/* Real app styling, adapted from the accepted round-three original design. No CDN UI framework. */
* { box-sizing: border-box; }
:root { color-scheme: light; --ink:#203b5b; --muted:#536276; --red:#c82e3e; --blue:#356fba; --green:#34794a; --paper:#fffefa; --line:#dce3ec; }
body { margin:0; color:var(--ink); background:#f6f7f3; background-image:radial-gradient(#356fb714 1px,transparent 1px); background-size:22px 22px; font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif; line-height:1.5; }
button,input,select { font:inherit; } button,input,select,summary { min-height:44px; } button,summary { cursor:pointer; } button { color:inherit; } button:disabled { opacity:.6; cursor:not-allowed; }
:where(button,input,select,summary,a,[tabindex]):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
:where(h1,h2,h3,p,span,li,label,button,summary) { overflow-wrap:anywhere; } a { color:#285e9e; } img,svg { max-width:100%; height:auto; } [hidden] { display:none!important; }
h1,h2,h3,p { margin:0 0 12px; } h1 { font-size:clamp(27px,6vw,34px); line-height:1.12; letter-spacing:-.04em; } h2 { font-size:22px; line-height:1.2; letter-spacing:-.025em; }
.skip-link { position:fixed; top:-90px; left:8px; z-index:9999; padding:12px; background:white; } .skip-link:focus { top:8px; }
.app-shell { max-width:600px; margin:22px auto; background:var(--paper); border:1px solid #d2dce7; border-radius:28px; overflow:hidden; box-shadow:0 18px 50px #233d6012; }
.app-shell:before { content:''; display:block; height:6px; background:repeating-linear-gradient(90deg,var(--red) 0 32px,white 32px 64px,var(--blue) 64px 70px,white 70px 96px); }
.app-top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 20px; } .brand { display:flex; align-items:center; gap:7px; font-size:20px; font-weight:800; letter-spacing:-.04em; color:var(--ink); text-decoration:none; } .brand img { flex:none; }
.account { display:flex; flex-direction:column; align-items:flex-end; font-size:11px; } .account .btn { min-height:44px; padding:5px 10px; font-size:12px; }
.app-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:7px 12px; border-block:1px solid var(--line); background:#fff; } .app-nav button { border:0; background:none; padding:9px 3px; border-radius:11px; font-size:13px; font-weight:800; } .app-nav button[aria-current=page] { background:#eaf2fc; color:var(--blue); } .app-nav span { font-size:19px; }
.player-bar { display:grid; grid-template-columns:79px minmax(0,1fr) 16px; align-items:center; gap:12px; width:100%; text-align:left; border:0; padding:6px 20px; background:white; } .player-bar strong { display:block; font-size:14px; } .player-bar small { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.local-note { padding:12px 20px; background:#eaf2fc; border-block:1px solid #cdddf1; color:#345779; font-size:12px; line-height:1.6; } .local-note p { margin:4px 0 0; } .local-note summary { min-height:44px; padding:4px 0; font-size:11px; }
.screen { padding:24px 22px 30px; } .screen > .portrait { max-width:270px; margin-block:18px; } .eyebrow { font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin-bottom:6px; }
.small { font-size:12px; line-height:1.65; color:var(--muted); } .center { text-align:center; } .full { width:100%; } .mt { margin-top:14px; } .note,.empty { background:#eaf2fc; border:1px solid #cdddf1; border-radius:13px; padding:12px; font-size:12px; line-height:1.65; }
.login-form { display:grid; gap:8px; max-width:360px; margin:18px auto 0; text-align:left; } .login-form label { font-size:12px; font-weight:750; } .login-form input { width:100%; min-height:48px; border:1px solid #9bb0c7; border-radius:11px; padding:10px 12px; background:white; color:var(--ink); } .login-form input:focus-visible { outline:3px solid var(--blue); outline-offset:2px; } .login-form .btn { margin-top:6px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:46px; border:1px solid transparent; border-radius:13px; padding:10px 14px; font-weight:750; font-size:13px; white-space:normal; box-shadow:none; background:transparent; text-decoration:none; }
.btn-primary { background:var(--red); color:white; border-color:var(--red); } .btn-primary:hover:not(:disabled) { background:#aa2030; } .btn-outline { background:white; color:#285e9e; border-color:#9bb7dc; } .btn-ghost { background:transparent; color:var(--ink); } .btn-danger { background:white; color:#a72234; border-color:#c8737b; }
.status { padding:0 20px; font-size:13px; background:#e8f3e4; } .status:not(:empty) { padding-block:12px; } .status.error,.error-text { color:#962b37; } .status.error { background:#fff0ed; } .error-text { font-size:12px; line-height:1.6; }
.collection-count { display:inline-block; background:#e7f1e3; color:#365c3e; border-radius:50px; padding:6px 11px; font-size:12px; font-weight:800; margin:4px 0 10px; }
.filters,.location-controls { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; } .location-controls .btn { font-size:12px; } .filters button { background:#eef2f7; border:0; border-radius:30px; padding:9px 13px; font-size:12px; font-weight:700; } .filters button[aria-pressed=true] { background:var(--blue); color:white; }
.dragon-row { border-bottom:1px solid var(--line); } .row-button { display:grid; grid-template-columns:64px minmax(0,1fr) 18px; align-items:center; gap:11px; width:100%; border:0; background:none; text-align:left; padding:12px 0; } .row-button .dragon-art { width:64px; background:#edf5e7; border-radius:14px; } .row-button strong { display:block; font-size:15px; line-height:1.35; } .row-button small { display:block; color:var(--muted); font-size:11px; margin-top:4px; }
.distance { display:inline-block; margin-top:5px; background:#edf3fc; color:#3a5d87; border-radius:6px; padding:3px 6px; font-size:11px; font-weight:700; } .distance.unknown { background:#f0f0eb; color:#55594e; } .row-body { padding:2px 0 18px; } .row-body > .btn { margin-top:12px; }
.catch-action { justify-content:space-between; } .xp-pill { padding:3px 7px; background:#ffffff25; border-radius:6px; white-space:nowrap; font-size:11px; } .caught-note { padding:11px 13px; border-radius:12px; background:#e8f3e4; color:#355a38; font-size:12px; font-weight:700; }
.row-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; } .photo-area { padding:13px; background:#eef4fc; border-radius:14px; margin-top:12px; } .photo-area strong { display:block; font-size:14px; margin-bottom:5px; } .photo-area label { display:block; font-size:12px; font-weight:700; }
.file-input { width:100%; min-height:46px; max-width:100%; background:white; padding:8px; border:1px solid #a1b7ce; border-radius:9px; font-size:12px; margin-top:8px; } .file-input::file-selector-button { min-height:32px; margin-right:7px; border:0; border-radius:5px; background:#eaf2fc; color:var(--ink); }
.photo-list { margin-top:10px; } .photo-entry { display:flex; gap:6px; justify-content:space-between; border-top:1px solid #c9d8e9; padding-top:6px; } select { width:100%; max-width:100%; border:1px solid #a1b7ce; background:white; color:var(--ink); padding:9px; border-radius:9px; } label { font-size:13px; }
.map-wrap { height:360px; width:100%; margin:15px 0; background:#edf1e7; border:1px solid #d2dfd0; border-radius:18px; z-index:0; } .map-consent { margin:15px 0; padding:20px; border:1px dashed #a9bdd7; border-radius:18px; background:#eef4fc; font-size:13px; }
.map-card { border:1px solid #cbdcf0; border-radius:16px; padding:15px; background:white; } .map-card > .btn { margin-top:12px; } .split { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:12px; margin-bottom:12px; } .split h2 { font-size:19px; margin-bottom:3px; }
.dragon-marker { background:transparent; border:none; } .marker-face { display:grid; place-items:center; width:38px; height:38px; background:var(--red); color:white; border:3px solid white; border-radius:50% 50% 50% 7px; box-shadow:0 2px 7px #203b5b40; font-size:14px; font-weight:800; } .marker-face.caught { background:var(--green); } .marker-face.selected { outline:3px solid var(--blue); outline-offset:2px; } .leaflet-control-attribution { font-size:11px!important; background:#fffffff0!important; } .leaflet-control-attribution a { color:#285e9e!important; }
.hero-stage { background:radial-gradient(ellipse at 50% 42%,#fffdf0 0,#eef3fc 63%,#e1eaf8 100%); border:1px solid #cfddf1; border-radius:23px; padding:15px; overflow:hidden; margin:17px 0; text-align:center; }
.portrait { position:relative; width:100%; max-width:340px; aspect-ratio:320/295; margin:auto; } .xp-arc { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .portrait-character { position:absolute; width:79%; height:84%; left:10.5%; top:12%; } .portrait-character .avatar-art { display:block; width:100%; height:100%; }
.level-medal { position:absolute; right:2%; bottom:6%; width:27%; aspect-ratio:1; background:linear-gradient(135deg,#fffdf0,#f7e4b9); border:3px solid #c49a48; border-radius:50%; box-shadow:0 4px 12px #6f583323; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; color:#8b2a36; }
.level-medal span { font-size:11px; font-weight:800; letter-spacing:.07em; } .level-medal b { font-size:clamp(38px,8vw,58px); font-weight:900; letter-spacing:-.06em; } .arc-caption { text-align:center; font-size:12px; font-weight:800; color:var(--blue); margin:0 0 7px; }
.portrait.mini { width:79px; height:80px; } .mini .level-medal { border-width:1px; width:30%; right:0; bottom:0; } .mini .level-medal span { display:none; } .mini .level-medal b { font-size:15px; } .mini .portrait-character { height:88%; }
.gear-chips { display:flex; gap:6px; flex-wrap:wrap; margin:12px 0; } .gear-chips span { background:#e8f3e4; border:1px solid #c2d7b8; color:#365b37; font-size:11px; border-radius:7px; padding:6px 8px; }
.level-list { display:grid; gap:8px; margin-top:14px; } .level-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:9px; background:white; border:1px solid var(--line); border-radius:13px; padding:10px; } .level-num { background:#edf1f7; display:grid; place-items:center; border-radius:50%; width:30px; height:30px; font-size:12px; font-weight:800; } .level-row.earned .level-num { background:var(--green); color:white; } .level-row strong { font-size:13px; display:block; } .level-row small { font-size:11px; color:var(--muted); display:block; } .level-xp { font-size:11px; color:var(--blue); font-weight:700; }
summary { display:flex; align-items:center; padding-block:8px; text-decoration:underline; text-underline-offset:3px; } .app-footer { padding:16px 20px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); color:var(--muted); font-size:11px; text-align:center; } .app-footer .btn { font-size:11px; }
dialog { border:0; padding:0; color:var(--ink); border-radius:25px; background:var(--paper); width:calc(100% - 24px); max-width:430px; max-height:92dvh; overflow:auto; } dialog::backdrop { background:#172d4bb8; } .modal-box { padding:22px; } .modal-box h2 { font-size:28px; line-height:1.12; letter-spacing:-.035em; } .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .dialog-head .btn { flex:none; } .celebration-box { position:relative; text-align:center; background:radial-gradient(ellipse at 50% 40%,#fffdf0,#eef3fd 80%); } #large-photo { display:block; max-height:65dvh; width:100%; object-fit:contain; border-radius:12px; margin-block:12px; }
.flow-step { display:flex; justify-content:center; gap:8px; margin:7px 0 16px; } .flow-step span { height:4px; width:30px; background:#d7e1ed; border-radius:4px; } .flow-step span.active { background:var(--red); }
.capture-art { position:relative; max-width:230px; margin:10px auto 15px; background:radial-gradient(circle,#e8f2d9 0,#ffffff00 68%); } .capture-art .dragon-art { width:100%; animation:pop .6s ease-out; } .capture-seal { display:inline-block; border:1px solid #aac69b; background:#e6f1dd; color:#386144; font-size:11px; border-radius:30px; padding:6px 12px; font-weight:800; margin-bottom:13px; }
.xp-result { min-height:88px; display:grid; align-content:center; gap:6px; margin:9px 0; } .levelup-word { font-size:25px; font-weight:900; color:var(--red); letter-spacing:-.02em; animation:pop .65s ease-out; } .mystery { font-size:14px; font-weight:700; color:#355c8b; }
.reward-stage { position:relative; isolation:isolate; max-width:270px; margin:6px auto 15px; aspect-ratio:1; } .reward-rays { position:absolute; inset:0; z-index:-1; border-radius:50%; background:repeating-conic-gradient(from 10deg,#e8bd6260 0deg 11deg,#f9eec400 11deg 29deg); mask-image:radial-gradient(circle,#000 0 28%,transparent 70%); animation:ray-spin 5s ease-out both; } .equipment-art { position:relative; width:100%; height:100%; display:block; animation:reveal .8s cubic-bezier(.2,.8,.3,1.2) both; filter:drop-shadow(0 7px 5px #38577720); } .reward-spark { position:absolute; font-size:30px; color:#c99533; animation:twinkle 1.1s ease-out both; left:4%; top:21%; }
.confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; } .confetti i { position:absolute; width:7px; height:13px; top:-20px; left:var(--x); background:var(--c); animation:fall 1.7s var(--delay) ease-out both; border-radius:2px; } .celebration-box button { position:relative; z-index:3; } .celebration-box .btn.full { margin-top:12px; }
@keyframes fall { from { transform:translateY(0) rotate(0); opacity:1; } to { transform:translateY(600px) rotate(560deg); opacity:0; } }
@keyframes pop { 0% { transform:scale(.8) rotate(-6deg); } 65% { transform:scale(1.07) rotate(3deg); } 100% { transform:scale(1) rotate(0); } }
@keyframes reveal { 0% { transform:translateY(18px) scale(.45) rotate(-16deg); opacity:0; } 70% { transform:translateY(-4px) scale(1.04) rotate(3deg); opacity:1; } 100% { transform:translateY(0) scale(1) rotate(0); opacity:1; } }
@keyframes ray-spin { from { transform:rotate(-35deg); opacity:0; } 25% { opacity:1; } to { transform:rotate(35deg); opacity:1; } }
@keyframes twinkle { 0% { transform:scale(.1); opacity:0; } 60% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; scroll-behavior:auto!important; transition:none!important; } .confetti { display:none; } }
@media (max-width:620px) { body { background:var(--paper); } .app-shell { width:100%; margin:0; border:0; border-radius:0; min-height:100dvh; box-shadow:none; } .screen { padding:20px 16px 26px; } .app-top { padding:12px 16px; } .player-bar { padding:8px 16px; gap:8px; } .brand { font-size:18px; } .modal-box { padding:18px; } .celebration-box .portrait { max-width:270px; } .reward-stage { max-width:240px; } .map-wrap { height:330px; } }
@media (max-width:350px) { .row-button { grid-template-columns:52px minmax(0,1fr) 14px; gap:7px; } .app-top { padding-inline:12px; } .brand { font-size:16px; } .player-bar { grid-template-columns:70px minmax(0,1fr) 12px; } .portrait.mini { width:70px; height:74px; } }