/* ==========================================================================
   pages/room.css: Party room / streamer mode (/room, /r/:code)
   Owner: the streamer lane. Scoped under .pg-room, prefixed rm-. Colours come
   from tokens and follow body[data-mode]. The review sheet renders in the
   overlay, outside .pg-room, so its few rules are prefixed .rm-review only.
   ========================================================================== */

/* ---- /room: host or join ------------------------------------------------- */
.pg-room .rm-start .page-title { margin-top: var(--s-2); }
.pg-room .rm-notice { margin-top: var(--s-5); }
.pg-room .rm-start-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-5);
  margin-top: var(--s-7); align-items: start;
}
.pg-room .rm-start .card { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.pg-room .rm-card-head { display: flex; align-items: center; gap: var(--s-4); }
.pg-room .rm-card-title { font: 700 var(--fs-lg)/1.2 var(--font-ui); margin: 0; }
.pg-room .rm-card-sub { margin: 2px 0 0; font-size: var(--fs-sm); }
.pg-room .rm-field { display: flex; flex-direction: column; gap: var(--s-2); }
.pg-room .rm-label {
  font: 500 var(--fs-micro)/1.2 var(--font-label); letter-spacing: var(--track-micro);
  text-transform: uppercase; color: var(--text-2);
}
.pg-room .rm-field .mode-switch { align-self: stretch; }
.pg-room .rm-field .seg { align-self: flex-start; }
.pg-room .rm-join { display: flex; gap: var(--s-2); }
.pg-room .rm-code-input {
  flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .32em;
  font: 700 var(--fs-lg)/1 var(--font-label);
}
.pg-room .rm-code-input::placeholder { letter-spacing: .32em; }

.pg-room .rm-steps {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4);
}
.pg-room .rm-step {
  display: flex; flex-direction: column; gap: 4px; padding: var(--s-4);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
}
.pg-room .rm-step-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--mode-tint); color: var(--mode-primary); font: 700 var(--fs-sm)/1 var(--font-label);
}
.pg-room .rm-step-t { font-weight: 700; }
.pg-room .rm-step-s { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.pg-room .rm-fine { margin-top: var(--s-5); }
.pg-room .rm-remind { margin-top: var(--s-3); }

/* ---- the room ------------------------------------------------------------- */
.pg-room .rm-room[data-role="host"] { max-width: 1320px; padding-bottom: 140px; }
.pg-room .rm-room[data-role="guest"] { padding-bottom: var(--s-9); }
.pg-room .rm-host {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--s-6); align-items: start;
}
.pg-room .rm-side { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 84px; }

/* The code, big enough to read from the sofa. */
.pg-room .rm-join-panel { padding: var(--s-5) var(--s-5) var(--s-4); text-align: left; }
.pg-room .rm-url { margin-top: var(--s-3); color: var(--text-2); font: 600 var(--fs-md)/1.2 var(--font-label); word-break: break-all; }
.pg-room .rm-code {
  font: 800 clamp(64px, 7vw, 104px)/.95 var(--font-display); letter-spacing: .08em;
  color: var(--mode-primary); text-shadow: 0 0 36px rgba(var(--mode-rgb), .45);
}
.pg-room .rm-aud {
  display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
  color: var(--text-2); font-size: var(--fs-sm);
}
.pg-room .rm-aud b { color: var(--text); font-size: var(--fs-md); }
.pg-room .rm-aud.is-sm { margin: 0; }

/* Seat list: five rows, compact. */
.pg-room .rm-seats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pg-room .rm-seat-btn {
  width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px; min-height: 52px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-align: left; font: inherit;
}
.pg-room button.rm-seat-btn { cursor: pointer; transition: border-color var(--t-med), background-color var(--t-med); }
.pg-room button.rm-seat-btn:hover { border-color: var(--hover); background: #1E1F24; }
.pg-room .rm-seat.is-current .rm-seat-btn { border-color: var(--mode-line); box-shadow: 0 0 0 1px var(--mode-line), 0 0 24px -8px rgba(var(--mode-rgb), .6); }
.pg-room .rm-seat.is-locked .rm-seat-btn { border-color: rgba(34, 197, 94, .35); }
.pg-room .rm-seat-n {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: #24252B; color: var(--text-2); font: 700 var(--fs-xs)/1 var(--font-label);
}
.pg-room .rm-seat.is-locked .rm-seat-n { background: var(--green); color: #06140B; }
.pg-room .rm-seat.is-current .rm-seat-n { background: var(--mode-primary); color: var(--mode-ink); }
.pg-room .rm-seat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pg-room .rm-seat-role {
  font: 500 var(--fs-micro)/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-room .rm-seat-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-room .rm-seat-skip, .pg-room .rm-seat-wait { color: var(--text-muted); font-size: var(--fs-sm); }
.pg-room .rm-seat-live { display: inline-flex; align-items: center; gap: 6px; color: var(--mode-highlight); font: 700 var(--fs-sm)/1.2 var(--font-label); font-variant-numeric: tabular-nums; }
.pg-room .rm-seat-live.is-up { color: var(--gold); }
.pg-room .rm-seat-go { color: var(--text-2); }

/* Scenario head. */
.pg-room .rm-scn { margin-bottom: var(--s-5); }
.pg-room .rm-scn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pg-room .rm-scn-date, .pg-room .rm-scn-unranked {
  font: 500 var(--fs-micro)/1.2 var(--font-label); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--text-2);
}
.pg-room .rm-scn-unranked { padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--border); }
.pg-room .rm-scn-title { margin: var(--s-3) 0 0; font: 800 var(--fs-3xl)/1.02 var(--font-ui); letter-spacing: -.025em; }
.pg-room .rm-scn-blurb { margin: var(--s-3) 0 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.5; max-width: 62ch; }
.pg-room [data-role="host"] .rm-scn-title { font-size: clamp(34px, 3.4vw, 52px); }

/* The stage: the open seat. */
.pg-room .rm-stage { padding: var(--s-6); }
.pg-room .rm-stage-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pg-room .rm-stage-k {
  font: 600 var(--fs-xs)/1.2 var(--font-label); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--mode-primary);
}
.pg-room .rm-clock {
  font: 800 34px/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--text);
}
.pg-room .rm-clock.is-up { color: var(--gold); font-size: 26px; }
.pg-room .rm-timebar { height: 6px; margin-top: var(--s-3); border-radius: 3px; background: #24252B; overflow: hidden; }
.pg-room .rm-timebar i { display: block; height: 100%; background: var(--mode-gradient); border-radius: 3px; transition: width .25s linear; }
.pg-room .rm-timebar.is-up i { width: 0 !important; }
.pg-room .rm-role { margin: var(--s-5) 0 0; font: 800 var(--fs-2xl)/1.05 var(--font-ui); letter-spacing: -.02em; }
.pg-room .rm-asks { margin: var(--s-2) 0 var(--s-4); color: var(--text-2); font-size: var(--fs-md); }
.pg-room [data-role="host"] .rm-role { font-size: clamp(34px, 3vw, 48px); }
.pg-room [data-role="host"] .rm-asks { font-size: var(--fs-lg); }
.pg-room .rm-big { margin: var(--s-3) 0 var(--s-2); font: 700 var(--fs-xl)/1.25 var(--font-ui); }
.pg-room .rm-wait { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }

.pg-room .rm-nominate { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.pg-room .rm-nominate .input { flex: 1; min-width: 0; }
.pg-room .rm-nominate .btn { flex: 0 0 auto; }
.pg-room .rm-nominate.is-shut { display: block; }

.pg-room .rm-noms-head {
  display: flex; justify-content: space-between; margin: var(--s-6) 0 var(--s-2);
  font: 500 var(--fs-micro)/1.2 var(--font-label); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--text-2);
}
.pg-room .rm-noms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-room .rm-nom { display: flex; align-items: stretch; gap: var(--s-2); }
.pg-room .rm-nom-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; text-align: left;
}
.pg-room button.rm-nom-btn { cursor: pointer; transition: border-color var(--t-med), transform var(--t-fast); }
.pg-room button.rm-nom-btn:hover { border-color: var(--mode-line); }
.pg-room button.rm-nom-btn:active { transform: scale(.99); }
.pg-room .rm-nom.is-lead .rm-nom-btn { border-color: var(--mode-line); background: linear-gradient(90deg, var(--mode-tint), transparent 70%), var(--surface); }
.pg-room .rm-nom.is-mine .rm-nom-btn { box-shadow: inset 3px 0 0 var(--mode-primary); }
.pg-room .rm-nom.is-unlisted .rm-nom-name { color: var(--text-2); font-style: italic; }
.pg-room .rm-nom-rank { flex: 0 0 22px; color: var(--text-muted); font: 700 var(--fs-sm)/1 var(--font-label); text-align: center; }
.pg-room .rm-nom-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pg-room .rm-nom-name { font-weight: 700; font-size: var(--fs-md); overflow-wrap: anywhere; }
.pg-room [data-role="host"] .rm-nom-name { font-size: var(--fs-lg); }
.pg-room .rm-nom-lead, .pg-room .rm-nom-mine {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: var(--r-pill); vertical-align: 2px;
  font: 600 10px/1.3 var(--font-label); letter-spacing: .14em; text-transform: uppercase; font-style: normal;
}
.pg-room .rm-nom-lead { background: var(--mode-primary); color: var(--mode-ink); }
.pg-room .rm-nom-mine { border: 1px solid var(--mode-line); color: var(--mode-highlight); }
.pg-room .rm-nom-sub { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; }
.pg-room .rm-bar { display: block; height: 4px; border-radius: 2px; background: #24252B; overflow: hidden; margin-top: 2px; }
.pg-room .rm-bar i { display: block; height: 100%; background: var(--mode-primary); border-radius: 2px; transition: width var(--t-med) var(--ease-out); }
.pg-room .rm-nom-votes { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; min-width: 44px; }
.pg-room .rm-nom-votes b { font: 800 var(--fs-xl)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.pg-room .rm-nom-votes span { color: var(--text-muted); font-size: var(--fs-xs); }
.pg-room .rm-nom-tools { display: flex; align-items: center; }
.pg-room .rm-nom-tools .btn { min-height: 100%; }
.pg-room .rm-none {
  padding: var(--s-5); border-radius: var(--r-md); border: 1px dashed var(--border); color: var(--text-2); text-align: center;
}
.pg-room .rm-stage .fine { margin-top: var(--s-3); }

/* Guest top line and progress. The host gets the same line on narrow screens,
   where the big code panel sits below the stage. */
.pg-room .rm-host-chip { display: none; }
.pg-room .rm-ghead { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.pg-room .rm-gcode {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--mode-line); color: var(--text); font-size: var(--fs-sm);
}
.pg-room .rm-gcode b { color: var(--mode-primary); letter-spacing: .14em; }
.pg-room .rm-progress { margin-top: var(--s-6); }

/* Host controls, pinned like the board's Simulate bar. */
.pg-room .rm-bar-host {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom));
  padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));
  pointer-events: none;
}
.pg-room .rm-bar-inner {
  pointer-events: auto; max-width: 1320px; margin: 0 auto; padding: 8px 8px 8px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: rgba(11, 11, 14, .94); background: color-mix(in srgb, var(--page-deep) 94%, transparent);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 -12px 40px -8px rgba(0, 0, 0, .75);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pg-room .rm-auto { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; }
.pg-room .rm-auto input { width: 18px; height: 18px; accent-color: var(--mode-primary); }
.pg-room .rm-bar-btns { display: flex; align-items: center; gap: var(--s-2); }
.pg-room .rm-bar-btns .btn-primary { min-width: 280px; }
.pg-room .rm-bar-btns .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- the result ----------------------------------------------------------- */
.pg-room .rm-score { padding: var(--s-6); }
.pg-room .rm-score-n { font: 800 var(--fs-score)/.9 var(--font-display); margin: var(--s-2) 0 var(--s-3); font-variant-numeric: tabular-nums; }
.pg-room .rm-score-n small { font-size: .32em; color: var(--text-2); margin-left: 6px; }
.pg-room .rm-score[data-band="great"] .rm-score-n { color: var(--band-great); }
.pg-room .rm-score[data-band="good"] .rm-score-n { color: var(--band-good); }
.pg-room .rm-score[data-band="mid"] .rm-score-n { color: var(--band-mid); }
.pg-room .rm-score[data-band="low"] .rm-score-n { color: var(--band-low); }
.pg-room .rm-headline { margin: var(--s-4) 0 var(--s-2); font: 600 var(--fs-md)/1.45 var(--font-ui); }
.pg-room .rm-crew {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3);
}
.pg-room .rm-crew-card {
  display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  box-shadow: inset 4px 0 0 var(--tone, var(--mode-primary));
}
.pg-room .rm-crew-role { font: 600 var(--fs-micro)/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--tone, var(--text-2)); }
.pg-room .rm-crew-name { font: 600 var(--fs-xl)/1.1 var(--font-serif); }
.pg-room .rm-crew-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-room .rm-void {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--border);
  color: var(--text-2); font: 600 10px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
.pg-room .rm-crew-line { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.45; }
.pg-room .rm-crew-vote { margin-top: auto; padding-top: 6px; color: var(--text-muted); font: 500 var(--fs-xs)/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase; }
.pg-room .rm-result-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-6); }

/* ---- the review sheet (in the overlay, outside .pg-room) ------------------ */
.rm-review { display: flex; flex-direction: column; gap: var(--s-3); }
.rm-review-h { margin: 0; font: 700 var(--fs-lg)/1.25 var(--font-ui); }
.rm-review-name {
  margin: var(--s-2) 0; padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--gold-line);
  background: rgba(245, 181, 61, .06); font: 700 var(--fs-xl)/1.2 var(--font-ui); overflow-wrap: anywhere;
}
.rm-review-acts { display: flex; justify-content: flex-end; gap: var(--s-3); margin-top: var(--s-2); }

/* ---- phone ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .pg-room .rm-host { grid-template-columns: minmax(0, 1fr); }
  .pg-room .rm-side { position: static; }
  .pg-room .rm-host .rm-main { order: -1; }
  .pg-room .rm-side { order: 1; }
  .pg-room .rm-host-chip { display: block; }
}
@media (max-width: 760px) {
  .pg-room .rm-start-grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-6); }
  .pg-room .rm-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-room .rm-start .card { padding: var(--s-5); }
  .pg-room .rm-stage, .pg-room .rm-score { padding: var(--s-5) var(--s-4); }
  .pg-room .rm-role { font-size: var(--fs-xl); }
  .pg-room [data-role="host"] .rm-role { font-size: var(--fs-2xl); }
  .pg-room .rm-scn-title, .pg-room [data-role="host"] .rm-scn-title { font-size: var(--fs-2xl); }
  .pg-room .rm-scn-blurb { font-size: var(--fs-base); }
  .pg-room .rm-code { font-size: 64px; }
  .pg-room .rm-nom-tools .btn { padding: 8px 10px; }
  .pg-room .rm-room[data-role="host"] { padding-bottom: 190px; }
  .pg-room .rm-bar-inner { flex-direction: column; align-items: stretch; padding: 10px; gap: var(--s-2); }
  .pg-room .rm-bar-btns { flex-wrap: wrap; }
  .pg-room .rm-bar-btns .btn-primary { order: -1; flex: 1 1 100%; min-width: 0; }
  .pg-room .rm-bar-btns .btn-secondary, .pg-room .rm-bar-btns .btn-quiet { flex: 1 1 0; }
  .pg-room .rm-result-acts .btn { flex: 1 1 100%; }
  .pg-room .rm-nominate { flex-direction: column; }
}