:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#06070c;--ink:#e7f6ff;--dim:#8ea3b8;--line:#5ee0ff66;--accent:#5ee0ff;font-family:Avenir Next,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;margin:0;overflow:hidden}body{touch-action:none;overscroll-behavior:none;width:100%;position:fixed;inset:0}.app{height:100dvh;padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));background:radial-gradient(900px 420px at 50% -10%, #468cff2e, transparent 60%), radial-gradient(700px 380px at 100% 100%, #28dcc814, transparent 55%), var(--bg);flex-direction:column;gap:8px;display:flex;overflow:hidden}.hud{flex-direction:column;flex-shrink:0;gap:6px;display:flex}.title-row,.stats,.lives,.buttons{align-items:center;display:flex}.title-row{justify-content:space-between}h1{letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-shadow:0 0 18px #5ee0ff59;margin:0;font-size:1.35rem;font-weight:650}.tag,.stats span,.lives>span{color:var(--dim);letter-spacing:.14em;text-transform:uppercase;font-size:.68rem}.stats{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stats div,.lives{background:#080e16b8;border:1px solid #5ee0ff2e;border-radius:10px;padding:6px 10px}.stats strong{letter-spacing:.06em;color:var(--ink);margin-top:2px;font-family:SF Mono,ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;display:block}.lives{flex-shrink:0;justify-content:space-between;min-height:44px}.lives div{align-items:center;gap:4px;min-height:26px;display:flex}.lives strong{letter-spacing:.06em;color:var(--ink);margin-right:6px;font-family:SF Mono,ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem}.life{display:block}.stage{flex:1;align-items:stretch;gap:10px;min-height:0;display:flex}.ranking-panel{background:#080e16b8;border:1px solid #5ee0ff2e;border-radius:16px;flex:none;width:clamp(148px,24vw,230px);min-height:0;padding:12px 10px;overflow:auto}.board{border:1px solid var(--line);background:#070b12;border-radius:16px;flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;box-shadow:0 0 0 1px #0006,0 20px 60px #00000059}.board>canvas{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.life{flex:none;display:block;position:static;inset:auto}.overlay{pointer-events:none;background:linear-gradient(#04060a14,#04060a47);place-items:center;display:grid;position:absolute;inset:0}.card{text-align:center;border:1px solid var(--line);min-width:min(280px,86%);color:var(--ink);background:#060a10d1;border-radius:14px;padding:16px 18px;box-shadow:0 0 30px #5ee0ff1f}.card strong{letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;display:block}.start-keys{gap:4px;margin:0 0 4px;display:grid}.start-keys p{color:var(--ink);letter-spacing:.02em;margin:0;font-size:1.15rem;font-weight:700}.controls{justify-content:center;align-items:flex-end;gap:16px;margin-top:12px;display:flex}.pad{grid-template-columns:repeat(3,30px);gap:4px;display:grid}.keycap{border:1px solid var(--accent);width:30px;height:28px;color:var(--ink);background:linear-gradient(#1a3348,#0c1822);border-radius:7px;place-items:center;font-size:12px;font-weight:700;display:grid;box-shadow:0 3px #063040}.keycap.blank{visibility:hidden}.card.interactive{pointer-events:auto;background:#060a10f0;width:min(360px,92vw);max-height:min(78dvh,640px);overflow:auto}.name-field{text-align:left;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;flex-direction:column;gap:4px;margin:12px 0 10px;font-size:.75rem;display:flex}.name-field input{text-transform:none;letter-spacing:0;font:inherit;border:1px solid var(--line);min-height:44px;color:var(--ink);background:#0b1018;border-radius:10px;padding:0 12px;font-size:16px}.name-field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ranking-title{letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 8px;font-size:.75rem}.ranking-note{color:var(--dim);margin:0;font-size:.85rem}.ranking{margin:0;padding:0;list-style:none}.ranking li{color:var(--dim);font-variant-numeric:tabular-nums;border-radius:8px;grid-template-columns:1.4rem minmax(0,1fr) auto;align-items:center;gap:6px;margin:0 0 4px;padding:6px 8px;display:grid}.ranking li span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ranking li.you{color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);background:#5ee0ff2e;font-weight:700}.ranking li.you span:nth-child(2){color:var(--accent)}.card p{color:var(--dim);margin:0;line-height:1.45}.card.ready{letter-spacing:.22em;text-transform:uppercase;font-size:1.4rem}.bar{flex-direction:column;align-items:center;gap:8px;display:flex}.buttons{flex-wrap:wrap;justify-content:center;gap:8px}button{appearance:none;color:var(--ink);min-height:44px;font:inherit;letter-spacing:.08em;text-transform:uppercase;background:#0d141d;border:1px solid #5ee0ff59;border-radius:999px;padding:0 16px;font-size:.78rem}button:hover:not(:disabled){border-color:var(--accent);color:#fff}button:disabled{opacity:.4}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.dpad{touch-action:none;grid-template-columns:72px 72px 72px;grid-template-areas:".up.""left.right"".down.";gap:8px;display:none}.dpad button{border-radius:18px;width:72px;height:72px;font-size:.68rem}@media (pointer:coarse),(width<=820px){.dpad{display:grid}h1{font-size:1.1rem}}