/* ============================================================
   ROOM SYSTEM — landing, forms, lobby, Room Manager, reconnect.
   Reuses Torchlit tokens (HSL vars, Cinzel/Inter, .liquid-glass).
   ============================================================ */
.room-scene { position:fixed; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1.4rem,4vh,2.6rem); padding:6vh 5vw calc(6vh + env(safe-area-inset-bottom,0px)); overflow:auto;
  background:radial-gradient(ellipse 80% 60% at 50% 24%, hsl(28 40% 12%), hsl(220 30% 6%) 70%); }
.room-veil-bg { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at 50% 30%, hsl(var(--primary)/.14), transparent 60%); }
.room-head { position:relative; z-index:1; text-align:center; }
.room-head h1 { font-size:clamp(2.6rem,9vw,4.6rem); letter-spacing:.04em; }
.room-sub { margin-top:.4rem; font-size:clamp(.85rem,2.2vw,1.05rem); color:hsl(var(--muted-foreground)); letter-spacing:.04em; }

.room-paths { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,260px)); gap:clamp(.9rem,2.4vw,1.5rem); width:100%; max-width:880px; }
@media (max-width:760px){ .room-paths{ grid-template-columns:1fr; max-width:420px; } }
.room-path { display:flex; flex-direction:column; align-items:center; gap:.55rem; padding:1.7rem 1.2rem; border-radius:18px; cursor:pointer;
  border:1px solid hsl(var(--border)); background:hsl(var(--surface)/.5); transition:transform .12s, border-color .2s, box-shadow .2s; text-align:center; }
.room-path:hover { transform:translateY(-3px); border-color:hsl(var(--primary)/.6); box-shadow:0 14px 40px hsl(var(--primary)/.18); }
.rp-ico { width:64px; height:64px; display:grid; place-items:center; border-radius:50%; color:hsl(var(--primary));
  background:hsl(var(--primary)/.12); box-shadow:inset 0 0 0 1px hsl(var(--primary)/.4); }
.rp-t { font-size:1.25rem; color:hsl(var(--foreground)); letter-spacing:.02em; }
.rp-s { font-size:.78rem; color:hsl(var(--muted-foreground)); line-height:1.4; text-wrap:pretty; }

/* forms */
.room-form { position:relative; z-index:1; width:min(440px,100%); display:flex; flex-direction:column; gap:1rem;
  padding:clamp(1.4rem,4vw,2.2rem); border-radius:22px; border:1px solid hsl(var(--border)); }
.rm-back { align-self:flex-start; font-size:.78rem; padding:.3rem .7rem; border-radius:9px; cursor:pointer; }
.room-form h2 { font-size:clamp(1.5rem,5vw,2rem); }
.rm-formsub { font-size:.85rem; color:hsl(var(--muted-foreground)); margin-top:-.5rem; }
.rm-label { display:flex; flex-direction:column; gap:.4rem; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:hsl(var(--muted-foreground)); }
.rm-input { font-family:var(--font-body); font-size:1rem; padding:.7rem .85rem; border-radius:12px; color:hsl(var(--foreground));
  background:hsl(var(--background)/.7); border:1px solid hsl(var(--border)); outline:none; text-transform:none; letter-spacing:normal; }
.rm-input:focus { border-color:hsl(var(--primary)/.7); }
.rm-pass { display:flex; gap:.5rem; }
.rm-pass .rm-input { flex:1; }
.rm-pass-eye { display:inline-flex; align-items:center; gap:.3rem; padding:0 .7rem; border-radius:12px; cursor:pointer; font-size:.74rem;
  color:hsl(var(--muted-foreground)); background:hsl(var(--surface)); border:1px solid hsl(var(--border)); }
.rm-err { font-size:.82rem; color:hsl(var(--damage)); padding:.5rem .7rem; border-radius:10px; background:hsl(var(--damage)/.1); border:1px solid hsl(var(--damage)/.4); }
.rm-go { font-family:var(--font-display); font-size:1.02rem; letter-spacing:.03em; padding:.85rem; border-radius:13px; cursor:pointer; margin-top:.3rem;
  color:hsl(var(--primary-foreground)); border:1px solid hsl(var(--primary)/.7);
  background:linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary)/.82)); transition:transform .08s, opacity .2s; }
.rm-go:active:not(:disabled){ transform:scale(.98); }
.rm-go:disabled{ opacity:.5; cursor:wait; }
.rm-go.ghost { background:hsl(var(--surface)/.7); color:hsl(var(--foreground)); border-color:hsl(var(--border)); }
.rm-go.ghost:hover { border-color:hsl(var(--primary)/.6); }
.rm-or { display:flex; align-items:center; gap:.7rem; margin:.2rem 0; color:hsl(var(--muted-foreground)); font-size:.72rem; letter-spacing:.03em; }
.rm-or::before, .rm-or::after { content:''; flex:1; height:1px; background:hsl(var(--border)); }
.rm-mini { font-size:.72rem; padding:.35rem .7rem; border-radius:9px; cursor:pointer; }

/* segmented code input */
.code-input { display:flex; gap:.5rem; }
.code-input input { width:48px; height:60px; text-align:center; font-family:ui-monospace,monospace; font-size:1.6rem; text-transform:uppercase;
  border-radius:10px; color:hsl(var(--foreground)); background:hsl(var(--background)/.8); border:1px solid hsl(var(--border)); outline:none; }
.code-input input:focus { border-color:hsl(var(--primary)); box-shadow:0 0 0 2px hsl(var(--primary)/.3); }
@media (max-width:420px){ .code-input input{ width:42px; height:54px; font-size:1.4rem; } }

/* lobby */
.room-form.lobby { width:min(480px,100%); }
.room-scene .embers { position:absolute; inset:0; z-index:0; pointer-events:none; }
.lobby-code-plate { display:flex; flex-direction:column; align-items:center; gap:.6rem; padding:1.1rem; border-radius:16px;
  background:hsl(var(--primary)/.08); border:1px solid hsl(var(--primary)/.4); animation:room-plate-glow 3.6s ease-in-out infinite; }
@keyframes room-plate-glow { 0%,100%{ box-shadow:0 0 24px hsl(var(--primary)/.12); } 50%{ box-shadow:0 0 40px hsl(var(--primary)/.3); } }
.room-code { font-family:ui-monospace,monospace; font-size:clamp(2rem,9vw,3.5rem); letter-spacing:.35em; color:hsl(var(--primary)); text-indent:.35em;
  text-shadow:0 0 28px hsl(var(--primary)/.5); }
.lobby-code-row { display:flex; align-items:center; gap:.8rem; }
.lobby-pw { font-size:.86rem; color:hsl(var(--foreground)); letter-spacing:.04em; }
.lobby-party { display:flex; flex-direction:column; gap:.4rem; max-height:240px; overflow:auto; }
.lobby-party-h { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--muted-foreground)); display:flex; align-items:center; gap:.5rem; }
.lobby-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; font-family:var(--font-display);
  font-size:.72rem; color:hsl(var(--primary-foreground)); background:hsl(var(--primary)); }
.lobby-empty { font-size:.82rem; color:hsl(var(--muted-foreground)); padding:.6rem; text-align:center; }
.lobby-slot { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:10px; background:hsl(var(--surface)/.5); border:1px solid hsl(var(--border)/.6); }
.lobby-slot-name { font-family:var(--font-display); color:hsl(var(--foreground)); }
.lobby-slot-cls { margin-left:auto; font-size:.74rem; color:hsl(var(--muted-foreground)); }

/* connection dots */
.status-dot { width:10px; height:10px; border-radius:50%; flex:none; background:hsl(var(--muted-foreground)); }
.status-dot.connected { background:hsl(var(--primary)); box-shadow:0 0 8px hsl(var(--primary)); }
.status-dot.reconnecting { background:hsl(38 90% 55%); animation:room-pulse 1s infinite; }
.status-dot.disconnected { background:hsl(var(--muted-foreground)); opacity:.5; }
@keyframes room-pulse { 50%{ opacity:.35; } }

/* Room Manager (host panel) */
.rmgr-meta { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.7rem; font-size:.82rem; }
.rmgr-code b { font-family:ui-monospace,monospace; letter-spacing:.2em; color:hsl(var(--primary)); }
.rmgr-net { display:inline-flex; align-items:center; gap:.4rem; color:hsl(var(--muted-foreground)); }
.rmgr-slots { display:flex; flex-direction:column; gap:.45rem; }
.rmgr-slot { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.5rem .7rem; border-radius:10px;
  background:hsl(var(--surface)/.5); border:1px solid hsl(var(--border)/.6); }
.rmgr-name { font-family:var(--font-display); color:hsl(var(--foreground)); }
.rmgr-cls { font-size:.74rem; color:hsl(var(--muted-foreground)); }
.rmgr-state { font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; }
.rmgr-state.on { color:hsl(var(--heal)); }
.rmgr-state.off { color:hsl(var(--muted-foreground)); }
.rmgr-slot .tiny-btn { margin-left:auto; }
.rmgr-reassign { flex-basis:100%; display:flex; flex-direction:column; gap:.4rem; margin-top:.4rem; padding:.5rem; border-radius:9px; background:hsl(var(--background)/.5); }
.rmgr-reassign-h { font-size:.72rem; letter-spacing:.04em; color:hsl(var(--muted-foreground)); }
.rmgr-dev { display:flex; align-items:center; gap:.5rem; padding:.45rem .7rem; border-radius:8px; cursor:pointer; text-align:left; font-size:.82rem;
  color:hsl(var(--foreground)); background:hsl(var(--surface)); border:1px solid hsl(var(--border)); }
.rmgr-dev:hover { border-color:hsl(var(--primary)/.6); }
.rmgr-dev em { margin-left:auto; font-size:.7rem; color:hsl(var(--muted-foreground)); font-style:normal; }
.rmgr-hint { font-size:.74rem; color:hsl(var(--muted-foreground)); line-height:1.4; margin-top:.7rem; text-wrap:pretty; }

/* reconnection overlay */
.reconnect-veil { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.78); display:grid; place-items:center; padding:2rem;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.reconnect-box { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; max-width:34ch; }
.reconnect-rune { width:64px; height:64px; border:3px solid hsl(var(--primary)/.3); border-top-color:hsl(var(--primary)); border-radius:9999px; animation:room-spin 1s linear infinite; }
@keyframes room-spin { to{ transform:rotate(360deg); } }
.reconnect-t { font-size:1.3rem; color:hsl(var(--foreground)); }
.reconnect-s { font-size:.84rem; color:hsl(var(--muted-foreground)); line-height:1.5; }
.reconnect-s b { font-family:ui-monospace,monospace; letter-spacing:.15em; color:hsl(var(--primary)); }