:root{--bg:#10141c;--panel:#1a2130;--text:#f4f6fa;--muted:#9aa7bd;--accent:#f2b73f;--ok:#4fd18b;--warn:#f28b4f;--bad:#f05d5d;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{min-height:100vh;margin:0}#app{grid-template-rows:auto 1fr auto;gap:24px;min-height:100vh;padding:24px 32px;display:grid}header{justify-content:space-between;align-items:center;gap:16px;display:flex}header h1{letter-spacing:.02em;margin:0;font-size:28px}.pill{background:var(--panel);color:var(--muted);border-radius:999px;padding:6px 14px;font-size:16px}.pill[data-status=connected]{color:var(--ok)}.pill[data-status=reconnecting]{color:var(--warn)}.pill[data-status=closed]{color:var(--bad)}main{grid-template-columns:1fr 1fr;align-items:start;gap:32px;display:grid}@media (max-width:900px){main{grid-template-columns:1fr}}.join{background:var(--panel);text-align:center;border-radius:20px;padding:32px}.join .lead{color:var(--muted);margin:0 0 8px;font-size:22px}.join .url{margin:0;font-size:30px;font-weight:600}.code{letter-spacing:.12em;color:var(--accent);margin:16px 0;font-size:clamp(72px,14vw,200px);font-weight:800;line-height:1}.qr{background:#fff;border-radius:12px;width:min(60vw,280px);height:auto;margin:8px auto 0;padding:12px;display:block}.players{background:var(--panel);border-radius:20px;padding:24px 32px}.players h2{color:var(--muted);margin:0 0 16px;font-size:24px;font-weight:500}.players ol{gap:10px;margin:0;padding:0;list-style:none;display:grid}.players li{background:#ffffff0a;border-radius:12px;grid-template-columns:56px 1fr auto;align-items:center;gap:16px;padding:10px 14px;font-size:28px;display:grid}.players li[data-connected=false]{opacity:.5}.players .seat{color:var(--muted);font-weight:700}.players .ready{color:var(--muted);font-size:20px}.players li[data-ready=true] .ready{color:var(--ok)}.players .empty{color:var(--muted);margin:0;font-size:22px}.banner{border:1px solid var(--bad);background:#f05d5d26;border-radius:14px;padding:16px 20px;font-size:22px}.banner[hidden]{display:none}footer{color:var(--muted);justify-content:space-between;align-items:center;font-size:16px;display:flex}button{font:inherit;border:1px solid var(--muted);color:var(--text);cursor:pointer;background:0 0;border-radius:10px;min-width:48px;min-height:48px;padding:10px 18px;font-size:18px}button.primary{background:var(--accent);color:#1a1400;border-color:var(--accent);font-weight:700}