*{box-sizing:border-box} :root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f6ff;background:#08131d;font-size:16px}body{margin:0;background:radial-gradient(ellipse at 50% 15%,var(--park-glow,#183b43) 0,#0b1d29 42%,#08131d 85%);min-height:100vh}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer;border:1px solid #405463;border-radius:9px;background:#192e3d;color:#ecf5fc;padding:9px 13px;font-weight:650;min-height:42px}button:hover:enabled{background:#274958;border-color:#85b8cb}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #b9ef56;outline-offset:3px}a{color:#d8edf5;text-decoration:none}a:hover{text-decoration:underline}.sitebar{height:52px;border-bottom:1px solid #29404c;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#081722}.brand{display:flex;gap:9px;align-items:center;font-weight:800}.brand img{object-fit:contain;border-radius:6px}.sitebar>a:last-child{font-size:.875rem}main{max-width:1000px;margin:auto;padding:15px 22px 18px}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}h1{font-size:clamp(1.5rem,3vw,2rem);margin:3px 0 0;letter-spacing:-.04em}.eyebrow{margin:0;color:#addc82;letter-spacing:.16em;font-size:.75rem;font-weight:750}.actions{display:flex;gap:7px}.actions button{font-size:.875rem}.dashboard{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background:#112735;border:1px solid #345063;border-bottom:0;border-radius:14px 14px 0 0;padding:12px 18px;gap:16px}.dashboard>div{display:grid;gap:4px}.label{font-size:.75rem;letter-spacing:.08em;color:#afc1d0}.dashboard strong{font-size:1rem;font-variant-numeric:tabular-nums}#lives{color:#ffb7a1;letter-spacing:2px}#shield{color:#c4ef80}#slow{display:grid;gap:3px;background:#2a4450;border-color:#55757d;min-width:133px}#slow small{font-size:.75rem;font-weight:400;color:#c1d6dd}.playfield{position:relative;background:#1e3440;border:1px solid #345063;border-radius:0 0 14px 14px;overflow:hidden;display:flex;justify-content:center}canvas{display:block;width:100%;max-height:calc(100dvh - 342px);object-fit:contain;aspect-ratio:14/9;touch-action:none;background:#102332}#acorns{font-size:.8rem}.dashboard>div{flex-shrink:0}#announcement{display:flex;align-items:center;justify-content:center;min-height:42px;padding:6px 12px;text-align:center;color:#d8edf5;font-size:.875rem;line-height:1.4;pointer-events:none;visibility:hidden}#announcement.visible{visibility:visible}.underboard{display:flex;justify-content:space-between;gap:12px;margin:8px 0;color:#bed0dc;font-size:.875rem}.underboard p{margin:0}.keys{white-space:nowrap}kbd{font-family:inherit;border:1px solid #3e5865;border-radius:4px;padding:0 4px;font-size:.75rem}.keys span{margin:0 4px}.access-note{text-align:center;color:#9fb7c7;font-size:.875rem;margin:10px 0 0}.touch-controls{display:none;justify-items:center;gap:5px}.touch-controls>div{display:flex;gap:5px}.touch-controls button{font-size:1.5rem;width:58px;height:48px;touch-action:none;background:#1e3b48}.touch-controls>button{margin-bottom:0}dialog{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:28px;border:1px solid #678797;border-radius:20px;background:#102533;color:#f0f6ff;box-shadow:0 24px 100px #0008}dialog::backdrop{background:#061017aa;backdrop-filter:blur(4px)}dialog h2{margin:7px 0 12px;font-size:1.75rem;line-height:1.18;letter-spacing:-.03em}dialog p{color:#c2d4df;line-height:1.5;margin:10px 0}.pill{font-size:.75rem;letter-spacing:.12em;color:#b9ea81;text-transform:uppercase;font-weight:800}.intro-mark{font-size:2.5rem;margin:0 0 4px;line-height:1}.intro-rules{display:grid;gap:8px;margin:18px 0;padding:0;list-style:none}.intro-rules li{display:flex;align-items:center;gap:12px;color:#d9e7ef;line-height:1.4}.intro-rules b{background:#294857;color:#bff082;display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%}label{display:block;color:#d5e5ed;font-size:.875rem;margin:18px 0 6px}select{width:100%;padding:10px;border:1px solid #5b7788;border-radius:8px;background:#1d3545;color:#fff}.primary{display:block;width:100%;background:#bcea67;color:#112322;border-color:#bcea67;margin-top:18px;font-weight:800}.primary:hover:enabled{background:#d2fa91;color:#112322}.secondary{display:block;width:100%;margin-top:9px}.answers{display:grid;gap:9px;margin-top:20px}.answer{display:flex;align-items:center;text-align:left;gap:13px;line-height:1.4;padding:12px}.answer b{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;background:#345464;border-radius:6px;color:#c5e8f1}.answer:focus{border-color:#c6f08b;background:#2a4756;outline:2px solid #b7e867;outline-offset:1px}.feedback-correct{color:#c1f388!important}.feedback-missed{color:#ffbf97!important}.reward{padding:12px 14px;background:#213d42;border:1px solid #446960;border-radius:10px;color:#d1f394!important}.summary-stats{display:flex;gap:14px;margin:18px 0}.summary-stats>div{flex:1;background:#1e3747;padding:14px;border-radius:10px}.summary-stats strong{display:block;font-size:1.6rem;color:#c4ef80}.summary-stats span{font-size:.875rem;color:#c2d2dc}details{margin-top:18px}summary{cursor:pointer;color:#dcebd8;padding:5px 0}.review-item{padding:12px 0;border-bottom:1px solid #355363}.review-item p{font-size:.875rem;margin:5px 0}.review-item h3{font-size:1rem;margin:5px 0}.game-shell:fullscreen,#game-shell:fullscreen{max-width:none;height:100dvh;background:#0a1b26;padding:14px 24px;overflow:auto}#game-shell:fullscreen canvas{max-height:calc(100dvh - 287px)}.fatal{color:#ffc1a8}
@media(pointer:coarse){.touch-controls{display:grid}.keys{display:none}canvas{max-height:calc(100dvh - 340px)}}
@media(max-width:600px){.sitebar{padding:0 14px;height:47px}main{padding:12px 10px}.heading{margin-bottom:10px;align-items:flex-start}.actions{gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:182px}.actions button{font-size:.75rem;padding:6px 8px;min-height:34px}h1{font-size:1.45rem}.eyebrow{font-size:.7rem}.dashboard{gap:8px;flex-wrap:wrap;padding:10px 12px}.dashboard .label{font-size:.7rem}.dashboard strong{font-size:.875rem}#slow{width:100%;min-height:35px;display:flex;justify-content:center;align-items:center;gap:9px}canvas{max-height:none}.underboard{font-size:.8rem;text-align:center;justify-content:center}.access-note{font-size:.8rem}.touch-controls{display:grid}dialog{padding:22px}dialog h2{font-size:1.5rem}#game-shell:fullscreen canvas{max-height:none}}
@media(max-height:500px) and (min-width:601px){.sitebar,.access-note,.underboard{display:none}main{padding:8px 14px}.heading{margin-bottom:6px}.dashboard{padding:6px 14px}canvas{max-height:calc(100dvh - 110px)}.touch-controls{position:fixed;right:12px;bottom:12px;opacity:.92;z-index:2}.touch-controls button{width:42px;height:38px;font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Reserve space for the selected-pack footer without shrinking phone controls. */
#pack-error:empty{display:none}
.intro-mark{font-size:0;height:40px;position:relative}
.intro-mark::before{content:"";position:absolute;left:3px;top:8px;width:25px;height:29px;border-radius:8px 8px 16px 16px;background:#e5b16a}
.intro-mark::after{content:"";position:absolute;left:0;top:5px;width:31px;height:12px;border-radius:8px 8px 4px 4px;background:#755032;box-shadow:0 -5px 0 -3px #bf9157}
@media(min-width:601px) and (min-height:501px) and (pointer:fine){canvas{max-height:calc(100dvh - 370px)}}
.mission{display:grid;gap:4px;padding:9px 16px;background:#20392e;border:1px solid #557750;color:#e4f4cd;min-height:62px}
.mission span{font-size:.7rem;letter-spacing:.08em;color:#c4ef80;font-weight:800}
.mission strong{font-size:.875rem;line-height:1.4}
.mission.returning{background:#183e49;border-color:#69bfc2}
.mission.returning span{color:#9de7ec}
@media(min-width:601px) and (min-height:501px) and (pointer:fine){canvas{max-height:calc(100dvh - 432px)}}
@media(pointer:coarse) and (min-width:601px){canvas{max-height:calc(100dvh - 426px)}}
#game-shell:fullscreen canvas{max-height:calc(100dvh - 365px)}
@media(max-width:600px){.mission{padding:8px 12px}.mission strong{font-size:.8rem}#game-shell:fullscreen canvas{max-height:none}}
