:root{--bg: #0e1020;--panel: #191d33;--panel-2: #222746;--line: #2e3355;--text: #f0f2ff;--muted: #8a8fa3;--accent: #ff5c8a;--accent-2: #ffd166;--good: #8affc1;--bad: #ff6b6b;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 800px at 50% -10%,#1d2140 0%,var(--bg) 60%);color:var(--text);font-family:ui-rounded,Segoe UI,system-ui,-apple-system,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}.fill{position:absolute;top:0;right:0;bottom:0;left:0}.center{display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;align-items:center;gap:10px}.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;padding:24px 16px 40px}.brand{font-size:clamp(34px,7vw,58px);font-weight:900;letter-spacing:-1px;margin:12px 0 2px;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.tagline{color:var(--muted);margin-bottom:22px;text-align:center}.panel{width:min(720px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.panel+.panel{margin-top:14px}h2{margin:0 0 12px;font-size:18px}h3{margin:0 0 8px;font-size:15px}input[type=text]{width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:10px;outline:none}input[type=text]:focus{border-color:var(--accent)}.code-input{text-transform:uppercase;letter-spacing:8px;font-weight:800;text-align:center;font-size:24px}button{font:inherit;font-weight:700;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 18px;cursor:pointer;transition:transform .06s ease,filter .15s ease}button:hover:not(:disabled){filter:brightness(1.15)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:linear-gradient(100deg,var(--accent),#ff8360);border-color:transparent;color:#24102a}button.ghost{background:transparent}button.wide{width:100%}label.field{display:block}label.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.swatches{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}.swatch[aria-pressed=true]{border-color:var(--text)}.error{background:#ff6b6b24;border:1px solid var(--bad);color:#ffd7d7;border-radius:10px;padding:10px 12px;font-size:14px}.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.room-code{font-size:clamp(38px,10vw,64px);font-weight:900;letter-spacing:10px;text-align:center;color:var(--accent-2)}.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.player-chip{display:flex;align-items:center;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}.player-chip.disconnected{opacity:.45}.player-chip .name{flex:1 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-chip .score{margin-left:auto;color:var(--accent-2);font-weight:800}.dot{width:14px;height:14px;border-radius:50%;flex:none}.badge{flex:none;font-size:10px;font-weight:800;padding:2px 5px;border-radius:6px;background:var(--accent);color:#24102a}.empty-seat{border:1px dashed var(--line);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:13px}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.game-card{text-align:left;display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--panel-2);border:2px solid var(--line)}.game-card[aria-pressed=true]{border-color:var(--accent)}.game-card .icon{font-size:26px;line-height:1}.game-card .title{font-weight:800}.game-card .blurb{font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}.game-card .meta{font-size:11px;color:var(--muted);margin-top:6px}.game-card:disabled{opacity:.4}.game-host{background:#0e1020}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:14px}.hud>*{pointer-events:auto}.hud-bar{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;background:#0e1020bf;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-weight:800;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap}.hud-timer{color:var(--accent-2);font-variant-numeric:tabular-nums}.hud-timer.urgent{color:var(--bad)}.hud-note{position:absolute;bottom:22px;left:50%;transform:translate(-50%);background:#0e1020cc;border:1px solid var(--line);border-radius:999px;padding:8px 18px;color:var(--muted);font-size:14px;text-align:center}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.countdown-number{font-size:clamp(80px,22vw,190px);font-weight:900;color:var(--text);text-shadow:0 8px 40px rgba(255,92,138,.6);animation:pop .45s ease-out}@keyframes pop{0%{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}.intro-panel{position:absolute;left:50%;bottom:6vh;transform:translate(-50%);width:min(520px,calc(100% - 32px));background:#191d33eb;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.intro-panel h2{margin-bottom:4px}.intro-panel ul{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:14px}.intro-panel li{margin-bottom:4px}.result-row{display:grid;grid-template-columns:42px 20px 1fr auto auto;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--panel-2);animation:slide-in .35s ease-out backwards}.result-row.self{outline:2px solid var(--accent)}.result-row .rank{font-weight:900;font-size:18px;color:var(--accent-2)}.result-row .metric{color:var(--muted);font-variant-numeric:tabular-nums}.result-row .points{font-weight:900;color:var(--good);min-width:46px;text-align:right}@keyframes slide-in{0%{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}.next-up{text-align:center;color:var(--muted);margin-top:14px;font-size:14px}.progress-track{height:6px;background:var(--panel-2);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.conn-banner{position:fixed;top:0;left:0;right:0;z-index:50;text-align:center;padding:7px 12px;font-size:13px;font-weight:700;background:var(--accent-2);color:#2a2410}.conn-pill{position:fixed;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);background:#0e1020b3;border:1px solid var(--line);border-radius:999px;padding:5px 10px}.touch-controls{position:absolute;inset:auto 0 0 0;height:190px;pointer-events:none;padding:0 22px calc(22px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between}.touch-stick{pointer-events:auto;width:132px;height:132px;border-radius:50%;background:#ffffff12;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;touch-action:none}.touch-knob{width:58px;height:58px;border-radius:50%;background:#ffffff4d}.touch-action{pointer-events:auto;width:96px;height:96px;border-radius:50%;background:#ff5c8ad9;border:none;font-size:20px;font-weight:900;color:#24102a;touch-action:none}