:root{--bg: #0a0e14;--panel: #131a26;--ink: #e6edf3;--accent: #ffcc33;--accent2: #38bdf8;--danger: #ff5470;--muted: #7a8aa0;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}#app{display:flex;flex-direction:column;align-items:center;min-height:100%}.hud{width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px}.brand{font-weight:800;letter-spacing:2px;color:var(--accent);font-size:14px}.hud-stats{display:flex;gap:10px;flex:1;justify-content:center;flex-wrap:wrap}.stat{font-size:11px;color:var(--muted);letter-spacing:1px}.stat b{color:var(--ink);font-variant-numeric:tabular-nums}.hud-right{display:flex;gap:6px}select,button{background:var(--panel);color:var(--ink);border:1px solid #2a3344;border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer}button:hover{border-color:var(--accent2)}.stage{position:relative;width:480px;max-width:100vw}canvas{display:block;width:100%;height:auto;background:#0c1220;border:1px solid #1d2738;border-radius:8px;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#06090fd1;border-radius:8px}.overlay.hidden{display:none}.panel{max-width:380px;padding:22px;text-align:center}.panel h1{margin:0 0 10px;letter-spacing:4px;color:var(--accent);font-size:26px}.panel p{color:var(--muted);font-size:13px;line-height:1.5}.panel .keys{list-style:none;padding:0;margin:14px 0;font-size:12px;color:var(--ink)}.panel .keys li{margin:5px 0}kbd{background:#1c2434;border:1px solid #2a3344;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:11px}button.primary{background:var(--accent);color:#1a1200;font-weight:700;letter-spacing:1px;padding:10px 26px;font-size:14px;margin-top:6px}.final{color:var(--accent2);font-size:14px;margin:8px 0}