:root{--bg: #0b0d14;--panel: #141827;--panel2: #1c2236;--text: #eef1f8;--muted: #8a93ad;--accent: #2ad4ff;--radius: 16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%}#app{height:100dvh;display:flex;flex-direction:column;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;animation:pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.title{font-size:40px;font-weight:900;letter-spacing:-1px;margin:0;background:linear-gradient(90deg,#ff4fd8,#2ad4ff,#ffb020,#7cff3f);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{color:var(--muted);margin:0 0 8px;font-size:14px}.card{width:100%;max-width:420px;background:var(--panel);border:1px solid #232a44;border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:14px}input[type=text],input[type=tel]{width:100%;background:var(--panel2);border:1px solid #2a3352;color:var(--text);border-radius:12px;padding:12px 14px;font-size:17px;outline:none}input[type=text]:focus{border-color:var(--accent)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:12px;padding:13px 16px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .08s ease}.btn:active{transform:scale(.96)}.btn-primary{background:var(--accent);color:#03212a}.btn-ghost{background:var(--panel2);color:var(--text);border:1px solid #2a3352}.btn-pink{background:#ff4fd8;color:#2a0624}.btn-sm{padding:9px 12px;font-size:14px}.btn:disabled{opacity:.4;cursor:default}.theme-row{display:flex;gap:10px;justify-content:center}.theme-swatch{width:48px;height:48px;border-radius:12px;border:3px solid transparent;cursor:pointer;display:grid;place-items:center;font-size:22px;transition:transform .1s ease}.theme-swatch.selected{border-color:#fff;transform:scale(1.1)}.code-big{font-size:42px;font-weight:900;letter-spacing:8px;text-align:center;margin:4px 0}.player-list{display:flex;flex-direction:column;gap:8px}.player-row{display:flex;align-items:center;gap:10px;background:var(--panel2);padding:10px 12px;border-radius:12px}.player-dot{width:14px;height:14px;border-radius:50%;flex:none}.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:#2a3352;color:var(--muted)}.badge.host{background:#3a3b12;color:#ffb020}#game-root{flex:1;display:flex;flex-direction:column;min-height:0}.hud{display:flex;align-items:center;gap:8px;padding:8px 10px;flex-wrap:wrap}.hud .timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:18px;color:var(--text)}.scoreboard{display:flex;flex:1;gap:8px;min-width:0}.score-item{flex:1;background:var(--panel);border-radius:10px;padding:6px 8px;overflow:hidden}.score-item .name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-track{height:6px;background:#1c2236;border-radius:3px;margin-top:4px;overflow:hidden}.bar-fill{height:100%;border-radius:3px;transition:width .2s ease}.score-item .pct{font-size:11px;color:var(--muted)}#stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}canvas#arena{width:min(100%,100%);height:auto;max-width:100%;max-height:100%;aspect-ratio:1 / 1;touch-action:none;border-radius:14px;background:#0d0f18}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#05060cd1;display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .2s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.overlay .card{max-width:360px}.countdown{font-size:110px;font-weight:900;animation:pop .4s cubic-bezier(.34,1.56,.64,1)}.qr-box{background:#fff;padding:10px;border-radius:12px;display:inline-block}.toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%);background:var(--panel2);border:1px solid #2a3352;padding:10px 16px;border-radius:999px;z-index:100;animation:fade .2s ease}.icon-btn{width:42px;height:42px;border-radius:12px;background:var(--panel2);border:1px solid #2a3352;color:var(--text);font-size:20px;display:grid;place-items:center;cursor:pointer}.bar-chart{display:flex;flex-direction:column;gap:10px;width:100%}.bar-row{display:flex;align-items:center;gap:10px}.bar-row .lbl{width:92px;font-size:13px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-row .track{flex:1;height:18px;background:#1c2236;border-radius:6px;overflow:hidden}.bar-row .fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.22,1,.36,1)}.podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;height:180px}.podium .spot{text-align:center}.podium .block{border-radius:10px 10px 0 0;display:flex;align-items:center;justify-content:center;font-weight:900;color:#03212a}.hint{color:var(--muted);font-size:12px;text-align:center}.row{display:flex;gap:10px;width:100%}.row>*{flex:1}@media (min-width: 700px){.card{max-width:460px}}