:root{--bg-0: #050814;--bg-1: #0b1430;--cyan: #39ffe0;--magenta: #ff4d8d;--amber: #ff9f1c;--violet: #c77dff;--text: #e8f0ff;--muted: #8fa3c8;--panel: rgba(10, 22, 52, .78);--border: rgba(57, 255, 224, .28);--danger: #ff4d8d;--ok: #39ffe0;font-family:Rajdhani,system-ui,sans-serif;color:var(--text);background:radial-gradient(1200px 700px at 50% -10%,#1a2b66 0%,var(--bg-0) 55%)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg-0)}body{min-height:100vh;overflow-x:hidden}#app{min-height:100vh;display:grid;place-items:center;padding:1rem}.shell{width:min(1100px,100%);display:grid;grid-template-columns:minmax(280px,1fr) minmax(240px,320px);gap:1.25rem;align-items:start}.brand{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:.25rem}.brand h1{margin:0;font-family:Orbitron,sans-serif;font-weight:900;letter-spacing:.08em;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--cyan);text-shadow:0 0 18px rgba(57,255,224,.45)}.brand p{margin:.25rem 0 0;color:var(--muted);font-size:1.05rem}.stage-wrap{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:.75rem;box-shadow:0 0 0 1px #c77dff14,0 20px 50px #00000059}.hud{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.65rem;font-family:Orbitron,sans-serif;font-size:.95rem;letter-spacing:.04em}.hud-stat{display:flex;gap:.85rem}.hud-stat span{color:var(--cyan)}.canvas-frame{position:relative;width:100%;aspect-ratio:480 / 720;max-height:min(72vh,720px);margin:0 auto;border-radius:12px;overflow:hidden;background:#050814;border:1px solid rgba(57,255,224,.18)}canvas[data-testid=game-canvas]{width:100%;height:100%;display:block;touch-action:none}.controls-row{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.75rem}button,input{font:inherit}button{border:1px solid var(--border);background:linear-gradient(180deg,#39ffe029,#39ffe00d);color:var(--text);border-radius:999px;padding:.55rem 1.1rem;cursor:pointer;font-family:Orbitron,sans-serif;font-size:.8rem;letter-spacing:.06em;transition:transform .12s ease,border-color .12s ease,background .12s ease}button:hover{transform:translateY(-1px);border-color:var(--cyan)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}button.primary{background:linear-gradient(180deg,#39ffe059,#39ffe01f);color:#041018;font-weight:700}.side{display:grid;gap:1rem}.panel{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:1rem 1.1rem;box-shadow:0 16px 40px #00000047}.panel h2{margin:0 0 .65rem;font-family:Orbitron,sans-serif;font-size:1rem;letter-spacing:.08em;color:var(--violet)}.help{margin:0;color:var(--muted);line-height:1.35;font-size:1.02rem}.help strong{color:var(--text)}.leaderboard{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;min-height:12rem}.leaderboard li{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:center;padding:.45rem .55rem;border-radius:10px;background:#ffffff08;border:1px solid rgba(255,255,255,.04);font-size:1.05rem}.leaderboard .rank{color:var(--amber);font-family:Orbitron,sans-serif;font-size:.8rem}.leaderboard .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .score{color:var(--cyan);font-family:Orbitron,sans-serif;font-size:.85rem}.status{min-height:1.35rem;margin:.55rem 0 0;font-size:.95rem;color:var(--muted)}.status.error{color:var(--danger)}.status.ok{color:var(--ok)}.score-form{display:grid;gap:.55rem;margin-top:.75rem}.score-form label{font-size:.95rem;color:var(--muted)}.score-form input{width:100%;border-radius:12px;border:1px solid var(--border);background:#050814b3;color:var(--text);padding:.65rem .8rem;outline:none}.score-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #39ffe01f}.touch-controls{display:none;margin-top:.75rem;gap:.75rem;justify-content:space-between;-webkit-user-select:none;user-select:none}.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);gap:.35rem}.dpad .spacer{pointer-events:none}.touch-btn{width:56px;height:56px;border-radius:16px;border:1px solid var(--border);background:#39ffe01a;color:var(--text);font-family:Orbitron,sans-serif;font-size:1rem;display:grid;place-items:center;touch-action:none}.touch-btn.fire{width:92px;height:92px;border-radius:999px;align-self:end;background:#ff4d8d2e;border-color:#ff4d8d73}@media(max-width:900px){.shell{grid-template-columns:1fr}.brand{flex-direction:column;align-items:flex-start}}@media(max-width:720px){#app{padding:.65rem}.touch-controls{display:flex}.canvas-frame{max-height:min(58vh,640px)}}