:root{--bg: #0b0f17;--panel: #111827;--border: #1f2937;--text: #f1f5f9;--muted: #94a3b8;--accent: #fbbf24;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;height:100vh;width:100vw}#lobby{flex:0 0 320px;width:320px;background:var(--panel);border-right:1px solid var(--border);padding:20px;display:flex;flex-direction:column;gap:12px;overflow-y:auto}#game{flex:1 1 auto;position:relative;min-width:0;overflow:hidden}.label{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.join-code{font-size:88px;font-weight:800;letter-spacing:.08em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}.qr{background:#fff;border-radius:12px;padding:8px;align-self:center;line-height:0}.qr canvas{width:256px!important;height:256px!important}.controller-url{font-size:14px;color:var(--muted);word-break:break-all;text-align:center}.status-pill{align-self:flex-start;padding:4px 12px;border-radius:999px;font-size:14px;font-weight:600;background:#374151}.status-open{background:#14532d;color:#bbf7d0}.status-connecting{background:#713f12;color:#fde68a}.status-closed{background:#7f1d1d;color:#fecaca}.status-mock{background:#312e81;color:#c7d2fe}.legend{display:flex;flex-direction:column;gap:8px;font-size:16px}.legend-row{display:flex;flex-direction:column}.legend-name{font-weight:700}.legend-keys{color:var(--muted)}.players-head{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}.player-count{font-size:28px;font-weight:700}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}.player{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:600}.player.away{opacity:.4}.player.empty{color:var(--muted);font-size:18px;font-weight:400}.swatch{width:20px;height:20px;border-radius:50%;flex:0 0 20px}.player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.away-tag{font-size:16px;color:var(--muted)}.game-label{font-size:12px;color:var(--muted)}.change-game{align-self:stretch;padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:#1e293b;color:var(--text);font:600 14px system-ui,sans-serif;cursor:pointer}.change-game:hover{background:#273449}.change-game.armed{background:#7c2d12;border-color:#ea580c}.picker{position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:auto;padding:40px 48px;display:flex;flex-direction:column;gap:28px;background:radial-gradient(circle at 50% 0%,#1e293b 0%,var(--bg) 70%)}.picker-head h1{margin:0;font-size:56px;font-weight:800;color:var(--accent)}.picker-sub{margin:6px 0 0;font-size:22px;color:var(--muted)}.picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.picker-card{display:flex;flex-direction:column;padding:0;text-align:left;border:2px solid var(--border);border-radius:16px;overflow:hidden;background:var(--panel);color:var(--text);cursor:pointer;transition:transform .12s ease,border-color .12s ease}.picker-card:hover,.picker-card:focus-visible{transform:translateY(-3px);border-color:var(--accent);outline:none}.picker-card img{width:100%;aspect-ratio:16 / 10;object-fit:cover;display:block;background:#000}.picker-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}.picker-name{display:flex;justify-content:space-between;align-items:center;font-size:24px;font-weight:800}.picker-name kbd{font:700 14px system-ui,sans-serif;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 8px}.picker-blurb{font-size:16px;color:var(--muted);line-height:1.35}