:root{color-scheme:dark;--ink:#102734;--deep:#07131d;--text:#fff3d1;--mint:#a4e6bb;--gold:#f5d47a;--pink:#efa0b0;--deck:88px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{min-height:100dvh;display:grid;place-items:center;background:#050d15;color:var(--text);font:16px/1.5 'Trebuchet MS',Arial,sans-serif;overflow-x:hidden}[hidden]{display:none!important}button{font:inherit;font-weight:800;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid var(--mint);outline-offset:3px}button:disabled{cursor:default;opacity:.55}.game-screen{width:min(100vw,calc((100dvh - var(--deck))*1.7777778));max-width:1600px;background:var(--deep);border:2px solid #233e4a;box-shadow:0 12px 70px #0008;overflow:hidden;container-type:inline-size}.playfield{width:100%;aspect-ratio:16/9;position:relative;isolation:isolate;background:#256783}#game{width:100%;height:100%;display:block;image-rendering:pixelated;outline:none;touch-action:none}.screen-grain{position:absolute;inset:0;pointer-events:none;opacity:.045;background:repeating-linear-gradient(0deg,#0000,#0000 2px,#041425 3px,#041425 4px);z-index:2}.system-controls{position:absolute;top:2%;right:1.8%;display:flex;gap:6px;z-index:7}.system-controls button{width:36px;height:34px;display:grid;place-items:center;border:1px solid #809e9d;background:#102734e8;box-shadow:2px 2px #091b27;font-size:20px;line-height:1}.system-controls button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}.hud{position:absolute;top:2%;left:1.8%;right:14.5%;display:flex;gap:7px;align-items:stretch;z-index:3;pointer-events:none}.hud>div{background:#102734ed;border:1px solid #83ad9b;box-shadow:3px 3px #0a1b29;padding:5px 11px}.hud span{display:block;font-size:clamp(11px,1.45cqw,16px)}.city-status{min-width:150px}.city-status #stage-label{font-weight:800;font-size:clamp(11px,1.55cqw,18px);color:var(--mint)}.hud strong{font:800 clamp(18px,2.5cqw,28px)/1.15 'Trebuchet MS',Arial,sans-serif;color:var(--gold)}.city-status #hud-name{display:none}.goal-status{flex:1;display:grid;place-items:center;text-align:center}.time-status{text-align:center;min-width:73px}.time-status span{font-size:11px}.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-start;padding:5.2%;background:linear-gradient(90deg,#071d2bea 0%,#0b2336cc 49%,#102a3910 85%);overflow:auto}.overlay-panel{margin-block:auto;width:57%;max-width:610px}.overlay.center{background:#071c2ee0;justify-content:center;text-align:center;padding:4%}.overlay.center .overlay-panel{width:85%;max-width:700px}.screen-kicker{margin:0 0 10px;color:var(--gold);font-size:clamp(12px,1.7cqw,21px);font-weight:800;letter-spacing:1.4px}.screen-title{font-family:monospace;font-size:clamp(26px,5.3cqw,74px);line-height:1.08;letter-spacing:-1.5px;text-shadow:4px 4px #081d2a;margin:0 0 18px}.screen-title span{color:var(--gold)}.screen-description,.result-lesson{font-size:clamp(14px,1.85cqw,25px);line-height:1.45;color:#e7efdb;margin:0 0 18px}.instruction{font-size:clamp(13px,1.65cqw,22px);color:#d8eadb;border-top:1px solid #91b4a45c;padding-top:12px;margin:14px 0}.control-copy{font-size:clamp(12px,1.48cqw,19px);color:#c5dccc;margin:12px 0 16px}.overlay-actions{display:flex;flex-wrap:wrap;gap:10px}.center .overlay-actions{justify-content:center}.primary-button,.secondary-button{min-height:43px;border:2px solid #0b2634;padding:10px 22px;box-shadow:4px 4px #081a24;font-size:clamp(15px,1.85cqw,25px);font-weight:900}.primary-button{background:var(--gold);color:#183344}.primary-button:hover{background:#ffeaa6}.secondary-button{border-color:#8fb6a6;background:#153648;color:var(--text)}.toast{position:absolute;top:19%;left:50%;transform:translateX(-50%);z-index:6;width:max-content;max-width:88%;padding:7px 14px;border:1px solid var(--gold);background:#102734f5;box-shadow:3px 3px #09202d;color:var(--text);font-size:clamp(12px,1.6cqw,20px);text-align:center;pointer-events:none}.input-deck{height:var(--deck);padding:7px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#0a1c28;border-top:2px solid #355967;user-select:none;-webkit-user-select:none;touch-action:none}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,33px);gap:3px}.dpad button{background:#244653;border:1px solid #799893;border-bottom:3px solid #102a39;border-radius:4px;font-size:19px;line-height:1}.dpad .up{grid-column:2}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad.horizontal{grid-template-columns:repeat(2,60px);grid-template-rows:48px;gap:7px}.dpad.horizontal .up,.dpad.horizontal .down{display:none}.dpad.horizontal .left{grid-column:1;grid-row:1}.dpad.horizontal .right{grid-column:2;grid-row:1}.action-buttons{display:flex;gap:10px;align-items:center}.action-button,.secondary-action{min-height:50px;padding:8px 21px;border:1px solid #fbd4c7;border-bottom:4px solid #914858;border-radius:5px;background:var(--pink);color:#102734;font-size:16px}.secondary-action{background:#284b56;border-color:#87aa9c;border-bottom-color:#102a39;color:var(--text);font-size:14px;padding:8px 12px}.input-deck button.pressed{filter:brightness(1.35);transform:translateY(2px)}
@media(max-width:650px){:root{--deck:91px}.game-screen{border-width:1px}.system-controls{gap:4px}.system-controls button{width:29px;height:28px;font-size:17px}.hud{right:27%;gap:4px}.hud>div{padding:4px 6px}.city-status{min-width:85px}.goal-status{display:none!important}.time-status{min-width:52px}.hud strong{font-size:18px}.hud span,.city-status #stage-label{font-size:11px}.time-status span{font-size:9px}.overlay{padding:5%;}.overlay-panel{width:76%}.overlay.center .overlay-panel{width:95%}.screen-title{font-size:clamp(22px,5.3cqw,34px);margin-bottom:10px}.screen-kicker{font-size:11px;margin-bottom:6px;letter-spacing:.8px}.screen-description,.result-lesson{font-size:13px;margin-bottom:10px;line-height:1.35}.instruction{font-size:12px;padding-top:7px;margin:9px 0}.control-copy{font-size:11px;line-height:1.35;margin:8px 0 10px}.primary-button,.secondary-button{min-height:38px;padding:7px 15px;font-size:14px}.overlay-actions{gap:7px}.input-deck{padding:6px 12px;gap:10px}.action-buttons{gap:6px}.action-button{padding:7px 12px;min-height:47px;font-size:14px}.secondary-action{padding:6px 8px;font-size:12px;min-height:43px}.dpad{grid-template-columns:repeat(3,39px);grid-template-rows:repeat(2,34px)}.dpad.horizontal{grid-template-columns:repeat(2,48px);grid-template-rows:47px}.toast{top:25%;font-size:11px;padding:5px 8px}}
@media(max-width:420px){.game-screen:not(.active) .playfield{aspect-ratio:4/3}.game-screen:not(.active) #game{object-fit:cover}.overlay-panel{width:88%}.overlay.center .overlay-panel{width:100%}.screen-title{font-size:27px}.screen-description,.result-lesson{font-size:14px}.instruction,.control-copy{font-size:12px}.system-controls button{width:28px;height:28px}.input-deck{padding:5px 7px}.dpad{grid-template-columns:repeat(3,35px);grid-template-rows:repeat(2,35px)}.action-buttons{gap:4px}.action-button{padding:6px 9px}.secondary-action{padding:6px;font-size:11px}}
@media(max-height:500px) and (orientation:landscape){:root{--deck:64px}.input-deck{padding:4px 20px}.dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,25px)}.dpad.horizontal{grid-template-columns:repeat(2,45px);grid-template-rows:43px}.action-button,.secondary-action{min-height:42px}.system-controls button{width:28px;height:27px}.overlay{padding:4%}.screen-title{font-size:4.5cqw;margin-bottom:9px}.screen-description{font-size:clamp(13px,1.9cqw,20px);margin-bottom:8px}.instruction{padding-top:6px;margin:8px 0}.control-copy{margin:6px 0 9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}