:root{--bg:#060912;--panel:#0d1425;--line:#1e293b;--text:#e2e8f0;--muted:#64748b;--accent:#a855f7}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);flex-direction:column;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;display:flex;overflow:hidden}.bar{border-bottom:1px solid var(--line);background:var(--panel);z-index:20;flex:none;align-items:center;gap:18px;padding:10px 16px;display:flex;position:relative}.bar .brand{letter-spacing:.12em;color:var(--accent);font-weight:700}.bar .sp{flex:1}.kv{color:var(--muted)}.kv b{color:var(--text);font-weight:600}#phase{text-transform:uppercase;letter-spacing:.1em;font-weight:700}#phase[data-phase=lobby]{color:var(--muted)}#phase[data-phase=countdown]{color:#facc15}#phase[data-phase=playing]{color:#22c55e}#phase[data-phase=over]{color:#f87171}#status:before{content:"";background:var(--muted);border-radius:50%;width:7px;height:7px;margin-right:6px;display:inline-block}#status[data-state=open]:before{background:#22c55e}#status[data-state=connecting]:before{background:#facc15}#status[data-state=closed]:before{background:#ef4444}input[type=number]{width:62px;color:var(--text);border:1px solid var(--line);font:inherit;background:#0b1220;border-radius:5px;padding:3px 6px}button{color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;background:#1e293b;border-radius:6px;padding:6px 16px;font-weight:600}button:hover:not(:disabled){border-color:var(--accent)}button.on{background:var(--accent);border-color:var(--accent);color:#0b1020}button:disabled{opacity:.4;cursor:default}main{flex:1;gap:16px;min-height:0;padding:16px;display:flex}.stage{flex:none;gap:12px;display:flex}body.spectating .stage{display:none}#own{aspect-ratio:1/2;border:1px solid var(--line);border-radius:8px;height:100%}#side{width:92px;height:100%}.feed-wrap{border:1px solid var(--line);background:#080d1a;border-radius:8px;flex:1;min-width:0;padding:8px}#feed{width:100%;height:100%;display:block}#toast{border:1px solid var(--line);opacity:0;pointer-events:none;background:#111c33;border-radius:8px;padding:9px 18px;font-weight:600;transition:opacity .16s,transform .16s;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(12px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}.hint{color:var(--muted);font-size:11px}#roomcount.alone{color:#fbbf24}#lobby{z-index:10;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#060912bd;justify-content:center;align-items:center;display:none;position:fixed;inset:0}body.in-lobby #lobby{display:flex}.lobby-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:340px;max-width:420px;padding:22px 26px}.lobby-card h2{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 4px;font-size:14px}#lobbyCount{color:var(--muted);margin-bottom:14px}#lobbyList{flex-direction:column;gap:5px;max-height:40vh;margin:0 0 12px;padding:0;list-style:none;display:flex;overflow-y:auto}#lobbyList li{background:#0b1220;border-radius:6px;justify-content:space-between;gap:20px;padding:6px 10px;display:flex}#lobbyList li.me{outline:1px solid var(--accent)}#lobbyList .yes{color:#22c55e;font-weight:700}#lobbyList .no{color:var(--muted)}#lobbyReady{width:100%;margin-bottom:12px;padding:10px;font-size:14px}