/* Combtone rooms (rooms agent): the store lobby (S03), the join card (S04), the in-game host menu, seat lists, team board, problem cards.
   Tokens and base classes come from app.css. Ink / paper / card / rule only, so every piece also works over a wall screen (body.wall-on).
   Status is never colour alone: marks (✓ ! ✋ ■ ◆), text and dashed or double borders carry it. No effect touches a chip or the mat. */

.rm-screen{ gap:12px; }
.rm-lobby{ display:flex; flex-direction:column; gap:12px; flex:1 1 auto; }
.rm-lobby > :empty{ display:none; }
.rm-head{ margin-bottom:6px; }

/* ---- store code + QR ---- */
.rm-code{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.rm-codelabel{ font-size:var(--fs-s); font-weight:700; color:var(--ink-2); text-transform:uppercase; letter-spacing:.08em; }
.rm-codebig{ width:100%; padding:6px 0 6px .16em; border:3px solid var(--ink); border-radius:4px; background:var(--paper); color:var(--ink);
  font:900 calc(56px * var(--tx))/1.05 var(--font-sign); letter-spacing:.16em; text-transform:uppercase; user-select:all; -webkit-user-select:all; }
.rm-codebig.sm{ font-size:calc(40px * var(--tx)); }
.rm-code.small .rm-codebig{ font-size:calc(40px * var(--tx)); }
.rm-qr{ line-height:0; }
.rm-url{ margin-top:-2px; }
.rm-actions{ display:flex; gap:8px; width:100%; }
.rm-actions .btn{ flex:1 1 0; }
.rm-codecard{ padding-top:12px; }

/* ---- links (Store Display / audience) ---- */
.rm-links{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.rm-link{ display:flex; flex-direction:column; gap:6px; padding:10px 0; border-top:1px solid var(--rule); }
.rm-linktxt{ display:flex; flex-direction:column; min-width:0; word-break:break-all; }
.rm-linkbtns{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- seats ---- */
.rm-seats{ display:flex; flex-direction:column; gap:8px; }
.rm-seat{ display:flex; align-items:center; gap:10px; padding:6px 10px; min-height:56px; border:1px solid var(--rule); border-radius:4px; background:var(--card); }
.rm-seat.me{ border:2px solid var(--ink); }
.rm-seat.away{ border-style:dashed; border-color:var(--ink-2); }
.rm-pin{ flex:0 0 auto; display:inline-flex; align-items:center; line-height:0; min-width:44px; }
.rm-who{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.rm-who > b{ font-size:var(--fs-l); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rm-tags{ display:flex; flex-wrap:wrap; gap:4px; }
.rm-tag{ display:inline-flex; align-items:center; min-height:20px; padding:0 7px; border:1.5px solid var(--ink-2); border-radius:3px; font-size:var(--fs-xs); font-weight:700; color:var(--ink); background:var(--paper); white-space:nowrap; }
.rm-tag.ask{ border-color:var(--ink); background:var(--card); border-width:2px; }
.rm-acts{ flex:0 0 auto; display:flex; gap:6px; }
.rm-seat .btn.small{ padding:4px 10px; }
.rm-pinprev{ flex:0 0 auto; line-height:0; display:grid; place-items:center; min-width:52px; min-height:48px; border:1px solid var(--rule); border-radius:4px; background:var(--paper); }
.rm-nameline{ display:flex; align-items:flex-end; gap:10px; }
.rm-lmark{ font-weight:700; white-space:nowrap; }
.rm-same{ margin:0; }

/* ---- teams: Matte ■ solid frame, Gloss ◆ double frame ---- */
.rm-teams{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.rm-team, .rm-trow{ min-width:0; }
.rm-trow{ flex-wrap:wrap; }
.rm-trow .rm-pin{ min-width:0; }
.rm-trow .rm-tname{ flex:1 1 70px; }
.rm-trow .btn{ flex:0 0 auto; white-space:nowrap; padding:4px 10px; min-width:52px; }
.rm-trow .btn.rm-x{ min-width:44px; padding:4px; }
.rm-team{ border:3px solid var(--ink); border-radius:4px; padding:6px 8px 8px; background:var(--card); display:flex; flex-direction:column; gap:6px; }
.rm-team.gloss{ border-style:double; border-width:6px; padding:3px 5px 5px; }
.rm-team.over{ background:var(--paper); outline:3px dashed var(--ink); outline-offset:2px; }
.rm-teamhead{ display:flex; align-items:center; gap:8px; font-size:var(--fs-l); }
.rm-teamhead b{ flex:1; font-family:var(--font-sign); text-transform:uppercase; }
.rm-teammark{ font-size:var(--fs-xl); line-height:1; }
.rm-trow{ display:flex; align-items:center; gap:6px; min-height:48px; padding:2px 4px; border-top:1px solid var(--rule); }
.rm-trow.away{ border-top-style:dashed; }
.rm-trow.lifted{ background:var(--paper); }
.rm-tname{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.rm-grip{ flex:0 0 auto; width:32px; min-height:44px; display:grid; place-items:center; font-size:var(--fs-xl); color:var(--ink-2); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.rm-ghost{ position:fixed; z-index:90; pointer-events:none; background:var(--card); border:2px solid var(--ink); border-radius:4px; box-shadow:0 4px 0 var(--ink); display:flex; align-items:center; gap:6px; padding:2px 6px; }
.rm-empty{ padding:6px 4px; }

/* ---- settings ---- */
.rm-settings{ display:flex; flex-direction:column; gap:12px; }
.rm-optgroup{ display:flex; flex-direction:column; gap:6px; }
.rm-opthead{ display:flex; flex-direction:column; }
.rm-optgroup .opts{ gap:8px; }
.rm-optgroup .opt{ flex:1 1 44%; }
.rm-optgroup[aria-label="Wall"] .opt{ flex:1 1 28%; padding:6px 8px; }
.rm-optgroup[hidden]{ display:none; }
.rm-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.rm-chip{ white-space:normal; }
.rm-by{ font-weight:600; color:var(--ink-2); }
.rm-twrow{ display:flex; gap:8px; align-items:stretch; }
.rm-twrow input{ flex:1 1 auto; min-width:0; }
.rm-twrow .btn{ flex:0 0 auto; }
.rm-twmsg:empty{ display:none; }

/* ---- status, footer, sticky bottom ---- */
.rm-status{ display:flex; align-items:center; gap:8px; padding:8px 12px; border:1.5px solid var(--ink-2); border-radius:4px; background:var(--card); font-size:var(--fs-s); }
.rm-status.warn{ border:2px solid var(--ink); font-weight:700; }
.rm-foot{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.rm-bottom{ display:flex; flex-direction:column; gap:8px; }

/* ---- problem + move + menu ---- */
.rm-fixes{ display:flex; flex-direction:column; gap:8px; }
.rm-move{ align-items:center; text-align:center; }
.rm-menu{ gap:16px; }
.rm-sec{ gap:10px; }
.rm-sec:empty{ display:none; }
.rm-menu h3{ font-size:var(--fs-l); }

/* ---- dev gallery (js/dev/rooms.js) ---- */
.rm-dev{ max-width:520px; margin:0 auto; padding:10px 12px 80px; }
.rm-dev > h2{ margin:22px 0 8px; padding-top:10px; border-top:2px solid var(--ink); font-size:var(--fs-l); }
.rm-dev .frame{ width:360px; max-width:100%; border:1px dashed var(--ink-2); padding:10px 16px; background:var(--paper); }
.rm-dev .bar{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.rm-dev .sticky-bottom{ position:static; border-top:0; }