:root{--bg: #0a0e1a;--panel: #131a2e;--ink: #e8eefc;--muted: #8b97b8;--accent: #ffce4d;--danger: #ff5a5a;--good: #5ad6ff}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;height:100%;overflow:hidden;user-select:none;-webkit-user-select:none}#app{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px;height:100vh}h1{margin:4px 0 0;font-size:20px;letter-spacing:2px;color:var(--accent);text-transform:uppercase}.hud{display:flex;gap:18px;font-variant-numeric:tabular-nums;font-size:15px;background:var(--panel);padding:8px 16px;border-radius:10px;border:1px solid #243056}.hud b{color:var(--accent)}.hud .lives{color:var(--danger);letter-spacing:2px}canvas{background:#060912;border-radius:12px;border:1px solid #243056;box-shadow:0 10px 40px #00000080;touch-action:none;max-height:calc(100vh - 200px)}.controls{font-size:12px;color:var(--muted);text-align:center;line-height:1.6;max-width:540px}.controls kbd{background:#243056;border-radius:4px;padding:1px 6px;color:var(--ink);font-family:inherit;font-size:11px}.overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#060912db;gap:14px;z-index:10;text-align:center}.overlay.hidden{display:none}.overlay h2{margin:0;font-size:30px;color:var(--accent)}.overlay p{margin:0;color:var(--muted);max-width:460px;line-height:1.5}button{background:var(--accent);color:#1a1300;border:0;padding:12px 28px;font-size:16px;font-weight:700;border-radius:10px;cursor:pointer;letter-spacing:1px}button:hover{filter:brightness(1.08)}.pads{display:flex;gap:24px;margin-top:4px}.pad{display:grid;grid-template-rows:auto auto auto;gap:6px;justify-items:center}.pad .label{font-size:11px;color:var(--muted)}.pad button{width:56px;height:40px;padding:0;font-size:18px;background:#243056;color:var(--ink)}.pad button:active{background:var(--good);color:#021018}@media(min-width:760px){.pads{display:none}}