:root{font-family:Avenir Next,Segoe UI,Tahoma,sans-serif;color:#d9e6f2;background:#090f1a;--panel-bg: rgba(10, 18, 32, .84);--panel-border: rgba(148, 163, 184, .28);--surface-bg: rgba(15, 23, 42, .72);--surface-border: rgba(148, 163, 184, .18);--text-soft: #c9d5e4;--text-strong: #eef4ff;--accent: #7dd3fc;--accent-strong: #38bdf8}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 16%,rgba(56,189,248,.16),transparent 28%),radial-gradient(circle at 82% 8%,rgba(16,185,129,.13),transparent 24%),linear-gradient(140deg,#060b14,#0e1728 46%,#111b2e)}#app{width:100vw;height:100vh}#hud{position:fixed;top:12px;left:12px;z-index:10;display:grid;gap:12px;width:min(360px,calc(100vw - 24px));background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;padding:12px;box-shadow:0 18px 44px #02061780;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#hud-controls{display:flex;align-items:center;gap:10px}#hud-controls label{display:grid;gap:4px;font-size:.8rem;color:var(--text-soft);letter-spacing:.01em}#room-select,#room-change{border:1px solid rgba(148,163,184,.35);background:#080f1dd1;color:var(--text-strong);border-radius:6px;padding:6px 8px}#room-change{cursor:pointer;transition:border-color .12s ease,transform .12s ease,background-color .12s ease}#room-change:hover{border-color:#7dd3fc80;background:#0e192df2}#room-change:active{transform:translateY(1px)}#status{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-soft);border:1px solid rgba(148,163,184,.25);border-radius:999px;padding:4px 10px;background:#09101ec2}#status:before{content:"";width:9px;height:9px;border-radius:999px;background:#60a5fa}#status[data-state=connected]{color:#86efac}#status[data-state=connected]:before{background:#22c55e}#status[data-state=connecting]{color:#93c5fd}#status[data-state=connecting]:before{background:#3b82f6}#status[data-state=reconnecting]{color:#fcd34d}#status[data-state=reconnecting]:before{background:#eab308}#status[data-state=disconnected]{color:#fca5a5}#status[data-state=disconnected]:before{background:#ef4444}#status[data-state=error]{color:#fda4af}#status[data-state=error]:before{background:#e11d48}#presence-panel{border-top:1px solid rgba(148,163,184,.22);padding-top:10px}#presence-panel header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}#presence-panel h2{margin:0;font-size:.9rem;color:var(--text-strong);letter-spacing:.02em}#online-metric{display:grid;justify-items:end;gap:2px}#online-count-label{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text-soft);opacity:.92}#online-count{font-size:.82rem;font-weight:700;border-radius:999px;padding:3px 10px;background:#38bdf829;color:var(--accent);border:1px solid rgba(56,189,248,.36)}#online-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;max-height:180px;overflow:auto}#online-list li{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:8px 9px;border-radius:8px;background:var(--surface-bg);border:1px solid var(--surface-border);box-shadow:inset 0 1px #94a3b814;font-size:.79rem}#online-list strong{color:var(--text-strong);font-weight:600}#online-list span{color:var(--accent-strong);font-weight:500}#online-list em{grid-column:1 / span 2;color:var(--text-soft);font-style:normal;opacity:.9}#online-list li.empty{background:#0f172a73;border-style:dashed}@media(max-width:720px){#hud{top:10px;left:10px;width:calc(100vw - 20px)}#online-list{max-height:160px}}