:root{--bg:#0b0d11;--deep:#0a0c10;--card:#151820;--border:#2a2f3a;--raised:#232833;--text:#f2f0ea;--text-2:#c9cdd4;--text-3:#b8bdc7;--muted:#8a909c;--yellow:#ddf23a;--yellow-sh:#8c9c1e;--coral:#ff6b4a;--cyan:#4fd6e8;--cyan-sh:#2a8c99;--ok:#5be37d;--live:#ff4d3d;--ink:#0e1014;--px:"Pixelify Sans", monospace;--ss:"Silkscreen", monospace;--num:"Press Start 2P", monospace}html,body,#root{background:var(--bg);height:100%;margin:0;overflow:hidden}*{box-sizing:border-box}button,input{font-family:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}@keyframes blink{0%,49%{opacity:1}50%,to{opacity:0}}.blink{animation:1.2s step-end infinite blink}.blink-fast{animation:1.1s step-end infinite blink}.stage{background:var(--bg);width:100%;height:100dvh;color:var(--text);font-family:Pixelify Sans,monospace;position:relative;overflow:hidden}.stage canvas{touch-action:none;width:100%;height:100%;image-rendering:pixelated;display:block;position:absolute;inset:0}.scanlines{pointer-events:none;background:repeating-linear-gradient(0deg,#00000024 0 1px,#0000 1px 3px);position:absolute;inset:0;box-shadow:inset 0 0 160px #00000080}.btn{font-family:var(--ss);cursor:pointer;border:none;border-radius:6px}.btn:disabled{cursor:not-allowed}.btn-primary{background:var(--yellow);color:var(--ink);box-shadow:0 4px 0 var(--yellow-sh)}.btn-primary:not(:disabled):active{box-shadow:0 1px 0 var(--yellow-sh);transform:translateY(3px)}.btn-secondary{background:var(--raised);color:var(--text);box-shadow:0 4px #000}.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px #000}.btn-hero{align-items:center;gap:14px;height:62px;padding:0 26px;font-size:19px;font-weight:700;display:flex}.btn-hero.yellow{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 var(--yellow-sh), 0 6px 0 3px #000}.btn-hero.yellow:hover{background:#e8fa5a}.btn-hero.yellow:active{box-shadow:0 1px 0 var(--yellow-sh);transform:translateY(5px)}.btn-hero.cyan{background:var(--cyan);color:var(--ink);box-shadow:0 6px 0 var(--cyan-sh), 0 6px 0 3px #000;gap:12px}.btn-hero.cyan:hover{background:#74e2f0}.btn-hero.cyan:active{box-shadow:0 1px 0 var(--cyan-sh);transform:translateY(5px)}.btn-join:not(:disabled):active{box-shadow:0 1px 0 var(--yellow-sh);transform:translateY(4px)}.btn-hud{background:var(--deep);height:36px;color:var(--text);box-shadow:0 0 0 2px var(--border), 0 4px 0 2px #000;font-family:var(--ss);cursor:pointer;border:none;border-radius:6px;padding:0 14px;font-size:12px}.btn-hud:hover{background:#1a1e27}.btn-link{font-family:var(--ss);color:var(--muted);cursor:pointer;background:0 0;border:none;align-self:center;padding:4px;font-size:11px}.btn-link:hover{color:var(--yellow)}.btn-sound{background:var(--deep);height:32px;box-shadow:0 0 0 2px var(--border), 0 4px 0 2px #000;font-family:var(--ss);cursor:pointer;border:none;border-radius:6px;padding:0 12px;font-size:11px}.seg{border:2px solid var(--border);border-radius:6px;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;display:grid}.seg button{font-family:var(--ss);cursor:pointer;color:var(--text-3);background:0 0;border:none;border-radius:3px;font-size:12px}.seg button[aria-pressed=true]{background:var(--yellow);color:var(--ink)}.overlay{place-items:center;padding:16px;display:grid;position:absolute;inset:0;overflow:auto}.card{background:var(--card);border:3px solid var(--border);border-radius:10px;flex-direction:column;margin:auto;display:flex;box-shadow:0 10px #000}.eyebrow{font-family:var(--ss);color:var(--cyan);font-size:11px}.label{font-family:var(--ss);color:var(--muted);font-size:11px}.title{font-family:var(--px);color:var(--yellow);text-shadow:3px 3px 0 var(--coral);font-weight:700;line-height:1}.name-input{background:var(--card);border:2px solid var(--border);height:40px;color:var(--text);font-family:var(--px);text-transform:uppercase;border-radius:4px;outline:none;width:100%;min-width:0;padding:0 10px;font-size:20px}.name-input:focus{border-color:var(--yellow)}.name-input::placeholder{color:#4c525c}.slot{background:var(--deep);border:2px solid var(--border);border-radius:8px;flex-direction:column;gap:10px;padding:14px;display:flex}.slot-head{font-family:var(--ss);align-items:center;gap:8px;font-size:11px;display:flex}.swatch{width:10px;height:10px}.keycap{font-family:var(--ss);background:var(--raised);min-width:24px;height:24px;color:var(--text);border-radius:4px;place-items:center;padding:0 6px;font-size:11px;display:inline-grid;box-shadow:0 3px #000}.chip{background:var(--deep);border:2px solid var(--border);color:var(--text-2);border-radius:4px;padding:4px 8px}.toast{top:16px}@media (width<=720px){.toast{top:116px}}