:root{color-scheme:dark;--bg:#070b12;--ink:#e8f0f7;--muted:#748394;--line:#243241;--cyan:#64e6e0;--orange:#ffb45c;--red:#ff6b7a;--green:#7bf0aa}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:12px ui-monospace,SFMono-Regular,Menlo,monospace}body{display:flex;justify-content:center}.page{width:min(860px,100%);padding:18px 15px}header{height:42px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:10px}header h1{font-size:20px;letter-spacing:.12em;margin:0}header a,header button{border:0;background:none;color:var(--muted);text-decoration:none;font:10px inherit;letter-spacing:.08em;padding:12px 0;cursor:pointer}header button{text-align:right}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}.hud div{border:1px solid var(--line);background:#0b111a;padding:7px 9px;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:8px;letter-spacing:.08em}.hud div:nth-child(2){text-align:center}.hud div:last-child{text-align:right}.hud b{color:var(--ink);font-size:12px}.screen{position:relative;width:100%;border:1px solid #304052;background:#0b111a;padding:4px;box-shadow:5px 5px #020407}.screen canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#071018;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.overlay{position:absolute;inset:4px;background:#070b12df;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center}.overlay.hidden{display:none}.overlay b{font-size:clamp(25px,6vw,43px);letter-spacing:.1em}.overlay span{color:var(--muted);font-size:9px;letter-spacing:.1em}.overlay button{border:0;background:var(--cyan);color:#071014;padding:12px 22px;min-height:44px;font:700 10px inherit;letter-spacing:.1em;box-shadow:3px 3px #2a8d8a}.controls{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:11px}.controls button{height:55px;border:1px solid var(--line);background:#0b111a;color:var(--cyan);font:700 11px inherit;letter-spacing:.08em;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.controls button:first-child{color:var(--orange)}.controls button.active,.controls button:active{background:#152834;border-color:currentColor}.legend{display:flex;justify-content:center;gap:22px;margin-top:10px;color:var(--muted);font-size:8px}footer{text-align:center;border-top:1px solid var(--line);margin-top:13px;padding-top:10px;color:#465565;font-size:8px}@media(max-width:620px){.page{padding:8px 9px 10px}header{height:36px;margin-bottom:5px}header h1{font-size:15px}.hud{gap:4px;margin-bottom:5px}.hud div{padding:5px 6px}.screen{width:min(100%,calc((100svh - 165px)*16/9));margin:auto;padding:3px;box-shadow:3px 3px #020407}.overlay{inset:3px}.controls{margin-top:7px}.controls button{height:50px}.legend,footer{display:none}}@media(max-height:500px){header{display:none}.hud{margin-bottom:3px}.screen{width:min(82vw,calc((100svh - 100px)*16/9))}.controls{width:min(82vw,100%);margin:4px auto 0}.controls button{height:43px}}