/* =====================================================================
   Layout: how the components compose the show on every screen.

   The 3D studio is one full-bleed canvas behind everything (#scene3dContainer).
   #stageViewport is the UI-free slot the camera frames the contestants
   into, so the interface and the stage read as one composition.

   Modes
     wide       landscape >= 900px     production desk left, stage right;
                                       in game: HUD + question on top,
                                       scoreboard right, answers below
     portrait   default                stage on top, desk below; in game the
                                       question and answers come first
     short      landscape, h <= 540    stage left, controls right
   ===================================================================== */

/* --- Studio canvas ------------------------------------------------- */
body > #scene3dContainer {
  position: fixed; inset: 0; z-index: var(--z-stage); pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, #0f2036, var(--ink-0) 72%);
}
#scene3dContainer canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* Screens (atriles, emblem) sit under the canvas and show through its holes. */
#scene3dContainer .stage-screens { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Lighting cue on top of the render: the house lights dim while a
   question is on air so the eye goes to the question. */
body > #scene3dContainer::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 70% 62% at 50% 46%, transparent 40%, rgb(2 3 7 / .85) 100%);
  opacity: .35; transition: opacity var(--dur-stage) var(--ease-in-out);
}
body[data-stage="question"] > #scene3dContainer::after { opacity: .62; }
body[data-stage="final"] > #scene3dContainer::after { opacity: .78; }
body[data-stage="reveal"] > #scene3dContainer::after { opacity: .4; }
body[data-stage="finished"] > #scene3dContainer::after { opacity: .5; }

.shell { position: fixed; inset: 0; z-index: var(--z-shell); display: grid; min-width: 0; min-height: 0; }
.broadcast { position: relative; min-width: 0; min-height: 0; }
.stage-viewport { position: relative; min-width: 0; min-height: 0; }

/* =====================================================================
   Production desk (home, lobby, finished, error)
   ===================================================================== */
.panel {
  grid-area: panel;
  position: relative;
  min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter) calc(24px + var(--safe-b));
  padding-left: max(var(--gutter), var(--safe-l));
  padding-right: max(var(--gutter), var(--safe-r));
  /* The studio continues behind the desk: no hard sidebar edge. */
  background: linear-gradient(180deg, rgb(3 5 10 / .55) 0%, rgb(3 5 10 / .9) 22%, rgb(3 5 10 / .94) 100%);
}
.panel-top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: calc(10px + var(--safe-t)) 0 10px;
  background: linear-gradient(180deg, rgb(3 5 10 / .92) 70%, transparent);
}
.app { min-width: 0; }

/* Brand: a clock-face mark (the studio emblem) and the wordmark. */
.brand-mini { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.brand-mini-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.brand-mini-text strong { color: var(--text-1); }
/* Ring of 12 ticks (::before, masked) around a question mark (::after). */
.brand-mark {
  position: relative; display: inline-block; flex-shrink: 0; width: 28px; height: 28px;
  border-radius: 50%; box-shadow: inset 0 0 0 2px var(--spot);
}
.brand-mark--lg { box-shadow: inset 0 0 0 3px var(--spot); }
.brand-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from -3deg, var(--spot) 0deg 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 66%, #000 67% 82%, transparent 83%);
          mask: radial-gradient(circle closest-side, transparent 66%, #000 67% 82%, transparent 83%);
}
.brand-mark::after {
  content: "?"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-1);
}
.brand-mark--lg { width: 64px; height: 64px; }
.brand-mark--lg::after { font-size: 34px; }
body[data-screen="home"] .brand-mini { visibility: hidden; }

/* --- Home: the entrance to the show --------------------------------- */
.home {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-8);
  min-height: calc(100dvh - 60px - var(--safe-t) - var(--safe-b) - 24px);
  padding: var(--s-4) 0 var(--s-6);
}
.home-lockup { display: grid; justify-items: start; gap: var(--s-4); }
.wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display);
  line-height: .9; letter-spacing: var(--tracking-display); text-transform: uppercase;
}
.wordmark span { display: block; color: var(--spot); }
.home-tagline { max-width: 34ch; color: var(--text-2); font-size: var(--fs-lg); line-height: 1.45; }
.home-actions { display: grid; gap: var(--s-3); min-width: 0; }
.home-secondary { display: grid; gap: var(--s-3); justify-items: start; }
.home-secondary #homeAuthArea { width: 100%; }
.home-secondary #homeAuthArea:empty { display: none; }
.join-code { display: none; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-panel); border: 1px solid var(--signal-line); }
.join-code.open { display: block; }
@media (prefers-reduced-motion: no-preference) { .join-code.open { animation: modalIn var(--dur-base) var(--ease-out); } }
.join-code-row { display: flex; gap: 8px; min-width: 0; }
.join-code-row input { flex: 1; }
@media (prefers-reduced-motion: no-preference) {
  .home-lockup, .home-actions, .home-secondary { animation: deskIn var(--dur-stage) var(--ease-out) backwards; }
  .home-actions { animation-delay: 90ms; }
  .home-secondary { animation-delay: 180ms; }
}
@keyframes deskIn { from { opacity: 0; transform: translateY(14px); } }

/* --- Screens --------------------------------------------------------- */
.screen { display: none; }
.screen.active { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .screen.active:not(#screenHome) { animation: deskIn var(--dur-slow) var(--ease-out); }
}

/* --- Lobby: about to go on air -------------------------------------- */
.room-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 4px 0 var(--s-4); }
.room-name { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.05; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.room-code { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface-sunken); border: 1px solid var(--line-1); }
.room-code .gs-label { margin: 0; }
.room-code-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-code); line-height: 1; letter-spacing: .14em; color: var(--spot); }
.join-link-box { margin-top: var(--s-3); }
.join-link-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.join-link-input { flex: 1; font-size: var(--fs-sm); color: var(--text-2); user-select: all; }
.name-row { display: flex; gap: 8px; min-width: 0; }
.lobby-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* --- Finished --------------------------------------------------------- */
.finished-show { text-align: center; }
.finished-title { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.finished-title .pc { color: var(--pc); }
.finished-subtitle { color: var(--text-2); margin: 6px 0 var(--s-4); }
.rest-ranking { text-align: left; }
.finished-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.finished-actions .btn-lg { flex: 1 1 160px; }
.finished-actions .waiting-msg { width: 100%; }
.save-prompt { margin-top: 16px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-sunken); }
.save-prompt p { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 10px; }
.save-prompt .ph-trophy { color: var(--gold); }

/* --- Error --- */
.error-screen { text-align: center; padding: 32px 20px; }
.error-icon { font-size: 2.6rem; color: var(--danger); margin-bottom: 12px; display: inline-block; }
.error-title { font-family: var(--font-display); font-size: var(--fs-2xl); text-transform: uppercase; margin-bottom: 6px; }
.error-msg { color: var(--text-2); margin-bottom: 20px; }

/* --- Portrait (default): stage on top, desk below --- */
body:not(.game-active) .shell {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: clamp(200px, 36dvh, 440px) minmax(0, 1fr);
  grid-template-areas: "stage" "panel";
}
body:not(.game-active) .broadcast { grid-area: stage; display: grid; padding-top: var(--safe-t); }
body:not(.game-active) .stage-viewport { height: 100%; }
body:not(.game-active) .panel { background: linear-gradient(180deg, rgb(3 5 10 / .2) 0, rgb(3 5 10 / .9) 64px, rgb(3 5 10 / .95) 100%); }
/* Portrait home: the brand sits over the stage, the desk keeps the actions. */
@media (orientation: portrait), (max-width: 639px) {
  body[data-screen="home"]:not(.game-active) .shell { grid-template-rows: clamp(150px, 26dvh, 300px) minmax(0, 1fr); }
  .home { min-height: 0; justify-content: flex-start; gap: var(--s-6); padding-top: 0; }
  .brand-mark--lg { width: 48px; height: 48px; }
  .brand-mark--lg::after { font-size: 26px; }
}
@media (max-width: 639px) {
  body:not(.game-active) > #scene3dContainer::after { opacity: 0; }
  .motion-toggle { right: 10px; bottom: 10px; width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .motion-toggle span { display: none; }
}

/* --- Wide and short landscape: desk left, stage right --- */
@media (orientation: landscape) and (min-width: 640px) {
  body:not(.game-active) .shell {
    grid-template-columns: clamp(360px, 34vw, 500px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "panel stage";
  }
  body:not(.game-active) .broadcast { padding: var(--safe-t) var(--safe-r) var(--safe-b) 0; }
  body:not(.game-active) .panel {
    padding-left: max(28px, var(--safe-l)); padding-right: 24px;
    background: linear-gradient(90deg, rgb(3 5 10 / .95) 0%, rgb(3 5 10 / .9) 78%, rgb(3 5 10 / .55) 100%);
  }
  /* The desk dissolves into the studio instead of ending in a hard edge. */
  body:not(.game-active) .panel-top { background: linear-gradient(180deg, rgb(3 5 10 / .9) 70%, transparent); }
}
@media (orientation: landscape) and (max-height: 540px) {
  .panel-top { min-height: 48px; padding: 6px 0; }
  .home { min-height: 0; gap: var(--s-4); padding-top: 0; }
  .home-tagline { display: none; }
  .brand-mark--lg { display: none; }
  .wordmark { font-size: 2.4rem; }
  .gs-cta { min-height: 60px; padding: 10px 14px; }
  .gs-cta-text strong { font-size: 1.25rem; }
}

/* =====================================================================
   In game: the broadcast
   ===================================================================== */
body.game-active .panel { display: none; }
body.game-active .shell { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
body.game-active .broadcast {
  display: grid; gap: 10px;
  width: min(1480px, 100%); margin-inline: auto; min-height: 0;
  padding: max(12px, var(--safe-t)) max(14px, var(--safe-r)) max(12px, var(--safe-b)) max(14px, var(--safe-l));
  overflow-y: auto; overflow-x: hidden;
  /* wide default: HUD and question centred on top, scoreboard beside the stage */
  grid-template-columns: minmax(0, 1fr) clamp(230px, 19vw, 290px);
  grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
  grid-template-areas:
    "hud hud"
    "q q"
    "stage rank"
    "fb rank"
    "ans ans";
}
body.game-active .stage-viewport { grid-area: stage; }
.game-hud { grid-area: hud; }
.hud-question-area { grid-area: q; }
.answer-feedback { grid-area: fb; justify-self: center; width: auto; min-width: min(100%, 360px); max-width: min(100%, 680px); }
.answer-overlay { grid-area: ans; }
.rank-overlay { grid-area: rank; }
body.game-active .game-hud, body.game-active .hud-question-area { justify-self: center; width: min(100%, 1060px); }
body.game-active .answer-overlay { justify-self: center; width: min(100%, 1240px); }
body.game-active .rank-overlay { align-self: start; max-height: 100%; }
body.game-active .broadcast-label { top: 4px; left: 4px; }
body.game-active .motion-toggle { right: 4px; bottom: 4px; }
body.game-active .account-slot { display: none; }
body:not(.game-active) .answer-feedback { display: none !important; }

/* --- Portrait tablets and phones -------------------------------------
   Priority: question, answers, timer, own status, then the rest. */
@media (orientation: portrait), (max-width: 899px) and (min-height: 541px) {
  body.game-active .broadcast {
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(120px, 1fr) auto auto auto;
    grid-template-areas: "hud" "q" "stage" "fb" "ans" "rank";
  }
  .broadcast-label { font-size: var(--fs-xs); }
  /* Scoreboard becomes a one-line strip; the toggle stays hidden. */
  .rank-overlay, .rank-overlay.collapsed { align-self: stretch; flex-direction: row; align-items: stretch; }
  .rank-header { display: none; }
  .rank-overlay .rank-list, .rank-overlay.collapsed .rank-list {
    display: flex; gap: 6px; padding: 6px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
  }
  .rank-list .lb-item { flex: 0 0 auto; min-height: 38px; padding: 4px 10px 4px 12px; gap: 8px; scroll-snap-align: start; font-size: .85rem; }
  .rank-list .lb-item::before { left: 4px; top: 8px; bottom: 8px; }
  .rank-list .lb-name { max-width: 9em; }
  .rank-list .lb-rank { width: 24px; height: 24px; font-size: .9rem; }
  .rank-list .lb-delta { right: 6px; top: -8px; }
}
@media (max-width: 599px) and (orientation: portrait) {
  .game-hud {
    column-gap: 8px; padding: 8px 12px 0;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "count cat score time"
      "streak streak streak streak"
      "timer timer timer timer";
  }
  .game-hud.with-block {
    grid-template-areas:
      "block block block block"
      "count cat score time"
      "streak streak streak streak"
      "timer timer timer timer";
  }
  .hud-progress-bar { display: none; }
  .hud-streak, .hud-connection { justify-self: center; }
  .hud-timer-wrap { margin: 0 -12px; }
  .hud-counter { font-size: 1.2rem; }
  .hud-category { font-size: .8rem; padding: 3px 10px; }
  .hud-timer-text { font-size: 1.4rem; }
  .hud-score { font-size: .9rem; padding: 3px 10px; }
  .hud-question-area h2 { padding: 12px 14px; }
  .answer-opt { min-height: 52px; padding: 8px 12px 8px 8px; gap: 10px; }
  .answer-opt-label { width: 32px; height: 32px; font-size: 1.1rem; }
  .answer-feedback { min-height: 40px; padding: 6px 12px; font-size: .92rem; }
  .event-banner { top: 8%; }
}
/* Tall phones: answers stacked, easier to read and tap */
@media (max-width: 599px) and (orientation: portrait) and (min-height: 700px) {
  .answer-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* --- Short landscape (phones on their side) ------------------------- */
@media (orientation: landscape) and (max-height: 540px) {
  body.game-active .broadcast {
    gap: 6px;
    padding-top: max(6px, var(--safe-t)); padding-bottom: max(6px, var(--safe-b));
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "hud hud"
      "stage q"
      "stage fb"
      "stage ans"
      "rank ans";
  }
  body.game-active .game-hud, body.game-active .hud-question-area, body.game-active .answer-overlay { width: 100%; }
  .game-hud { padding: 6px 12px 0; row-gap: 6px; }
  .hud-timer-wrap { margin: 0 -12px; }
  .hud-counter { font-size: 1.15rem; }
  .hud-timer-text { font-size: 1.3rem; }
  .hud-question-area h2 { padding: 8px 12px; font-size: clamp(.95rem, .7rem + 1.2vw, 1.2rem); }
  .answer-grid { gap: 6px; }
  .answer-opt { min-height: 44px; padding: 6px 10px 6px 6px; gap: 8px; font-size: .9rem; }
  .answer-opt-label { width: 28px; height: 28px; font-size: 1rem; }
  .answer-feedback { min-height: 36px; padding: 4px 10px; font-size: .88rem; }
  .rank-overlay, .rank-overlay.collapsed { align-self: end; flex-direction: row; align-items: stretch; }
  .rank-header { display: none; }
  .rank-overlay .rank-list, .rank-overlay.collapsed .rank-list { display: flex; gap: 6px; padding: 4px; overflow-x: auto; overflow-y: hidden; }
  .rank-list .lb-item { flex: 0 0 auto; min-height: 32px; padding: 2px 8px 2px 10px; font-size: .8rem; gap: 6px; }
  .rank-list .lb-avatar--sm { display: none; } /* too small to read: the colour stays */
  .rank-list .lb-item::before { left: 3px; top: 7px; bottom: 7px; }
  .rank-list .lb-rank { width: 22px; height: 22px; font-size: .8rem; }
  .motion-toggle { min-height: 28px; padding: 4px 10px; font-size: 11px; }
  .motion-toggle span { display: none; }
  .event-banner { top: 6%; }
  .mc-intro { place-items: start center; }
  .mc-intro-card { padding: 12px; gap: 6px; }
  .mc-intro-card .mc-countdown { order: -2; }
  .mc-intro-card .mc-next { order: -1; padding: 6px 10px; }
  .mc-next h2 { font-size: 1.2rem; margin: 0; }
}

/* --- Public rooms (full screen) ------------------------------------- */
#modalPublicRooms { align-items: stretch; justify-content: stretch; padding: 0; background: rgb(3 5 10 / .9); overflow: hidden; }
.lobby-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lobby-header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: calc(12px + var(--safe-t)) max(16px, var(--safe-r)) 12px max(16px, var(--safe-l));
  border-bottom: 1px solid var(--line-1); background: var(--surface-hud);
}
.lobby-back-btn { justify-self: start; }
.lobby-title { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; text-transform: uppercase; text-align: center; }
.lobby-online-badge {
  justify-self: end; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--success-soft); border: 1px solid rgb(61 220 145 / .3);
  color: var(--success); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.lobby-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px max(16px, var(--safe-r)) 12px max(16px, var(--safe-l));
  max-width: 880px; width: 100%; margin: 0 auto;
}
.lobby-search-wrap { position: relative; flex: 1 1 220px; min-width: 0; }
.lobby-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.lobby-search-input { padding-left: 40px; border-radius: var(--r-pill); }
.lobby-select { flex: 1 1 150px; width: auto; border-radius: var(--r-pill); }
.lobby-rooms {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-content: start; gap: 12px;
  width: 100%; max-width: 880px; margin: 0 auto;
  padding: 8px max(16px, var(--safe-r)) 16px max(16px, var(--safe-l));
}
.lobby-rooms > .lobby-empty, .lobby-rooms > .lobby-loading { grid-column: 1 / -1; }
.lobby-footer {
  display: flex; justify-content: center; flex-shrink: 0;
  padding: 12px max(16px, var(--safe-r)) calc(12px + var(--safe-b)) max(16px, var(--safe-l));
  border-top: 1px solid var(--line-1); background: var(--surface-hud);
}
@media (max-width: 520px) {
  .lobby-header { grid-template-columns: auto 1fr auto; }
  .lobby-title { font-size: var(--fs-xl); }
}

/* Room discovery uses the available viewport as a readable list. */
#modalPublicRooms .lobby-panel { width: 100%; min-width: 0; }
#modalPublicRooms .lobby-filters, #modalPublicRooms .lobby-rooms { max-width: none; }
#modalPublicRooms .lobby-rooms { display: flex; flex-direction: column; gap: 0; }
#modalPublicRooms .room-card {
  display: grid; grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(180px, 2fr) auto;
  align-items: center; gap: 24px; padding: 20px 16px; border: 0; border-bottom: 1px solid var(--line-1);
  border-radius: 0; box-shadow: none; background: transparent; transform: none;
}
#modalPublicRooms .room-card:hover { background: var(--surface-panel); }
#modalPublicRooms .room-card-header, #modalPublicRooms .room-card-players, #modalPublicRooms .room-card-chips { margin: 0; min-width: 0; }
#modalPublicRooms .room-card-name { white-space: normal; overflow-wrap: anywhere; }
#modalPublicRooms .room-card .btn-join { min-height: 44px; min-width: 100px; }
#modalPublicRooms .lobby-filters { align-items: center; }
#modalPublicRooms .lobby-select { flex: 0 1 200px; }
#modalPublicRooms .lobby-footer { justify-content: flex-end; }
.room-navigation { padding: 0 0 12px; }
.room-navigation .btn { min-height: 44px; width: 100%; justify-content: flex-start; }
@media (max-width: 760px) {
  #modalPublicRooms .room-card { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 18px 0; }
  #modalPublicRooms .room-card-header { grid-column: 1 / -1; }
  #modalPublicRooms .room-card-chips { grid-column: 1; grid-row: 3; }
  #modalPublicRooms .room-card-footer { grid-column: 2; grid-row: 2 / 4; }
  #modalPublicRooms .lobby-select { flex: 1 1 120px; }
  #modalPublicRooms .lobby-footer .btn { width: 100%; }
}

/* A clear reading order: play, discover, personalise; invite, configure, start. */
.home { gap: 24px; }
.home-lockup { gap: 14px; }
.home-tagline { font-size: 1rem; }
.home-actions, .home-discover, .home-personal { display: grid; gap: 10px; min-width: 0; }
.nav-group-title { margin: 0 0 2px; font: 600 .75rem var(--font-body, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.home-discover, .home-personal { padding-top: 18px; border-top: 1px solid var(--line-1); }
.home-discover .gs-cta, .home-personal .gs-cta { padding: 12px 14px; background: transparent; border-color: transparent; box-shadow: none; }
.home-discover .gs-cta strong, .home-personal .gs-cta strong { font-size: 1.1rem; }
.home-discover .gs-cta > i { font-size: 1.4rem; }
.home-discover .gs-cta:hover, .home-personal .gs-cta:hover { background: var(--surface-panel); border-color: var(--line-2); }
.home-actions .gs-cta { min-height: 72px; }
.lobby-guide { margin: 0 0 20px; }
.lobby-guide h1 { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.1; margin: 0 0 8px; }
.lobby-guide p, .section-hint { color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.section-hint { margin: -4px 0 16px; }
#screenLobby .room-navigation .btn { width: auto; min-height: 44px; padding-left: 0; background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
#screenLobby .room-navigation .btn:hover { color: var(--text-1); }
#screenLobby .join-link-box .gs-label { color: var(--text-2); }
#screenLobby .gs-panel--production { border-color: var(--signal-line); }
.setup-next-step { position: sticky; bottom: 0; z-index: 1; margin-top: 16px; padding: 14px 0 4px; background: var(--surface-panel); border-top: 1px solid var(--line-2); }
.setup-next-label { color: var(--text-2); font-size: .8rem; margin: 0 0 8px; }
.setup-next-step .mc-start { width: 100%; min-height: 48px; }
.directory-hint { text-align: center; color: var(--text-2); font-size: .85rem; margin: 4px 0 0; }
@media (max-width: 520px) { .directory-hint { display: none; } .lobby-guide h1 { font-size: 1.5rem; } }

/* Public directory: search first, compare rooms, then join. */
#modalPublicRooms .lobby-header { flex-shrink: 0; }
#modalPublicRooms .lobby-filters { gap: 16px; padding-block: 20px; flex-shrink: 0; align-items: end; border-bottom: 1px solid var(--line-1); }
.directory-search-field { flex: 1 1 280px; min-width: 0; }
.directory-field-label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.directory-filter { flex: 0 1 200px; min-width: 0; }
#modalPublicRooms .directory-filter .lobby-select { width: 100%; }
#modalPublicRooms .lobby-search-input, #modalPublicRooms .lobby-select { min-height: 44px; border-radius: var(--r-md, 8px); }
#btnClearRoomFilters { min-height: 44px; }
.directory-results-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px max(16px, var(--safe-r)) 12px max(16px, var(--safe-l)); flex-shrink: 0; }
.directory-results-bar h3 { font-size: 1rem; font-weight: 600; }
.directory-results-bar p, .directory-footer-hint { font-size: .85rem; color: var(--text-2); }
.directory-columns { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(180px, 2fr) auto; gap: 24px; padding: 10px 32px; border-bottom: 1px solid var(--line-2); color: var(--text-3); font-size: .75rem; flex-shrink: 0; }
.directory-columns span:last-child { min-width: 100px; text-align: right; }
#modalPublicRooms .lobby-rooms { padding-top: 0; }
#modalPublicRooms .room-card-name { font-size: 1.5rem; margin: 0 0 6px; }
#modalPublicRooms .room-card-host { font-size: .85rem; }
#modalPublicRooms .room-card-chips { opacity: .85; }
#modalPublicRooms .lobby-footer { justify-content: space-between; align-items: center; gap: 16px; }
@media (max-width: 760px) {
  .directory-columns { display: none; }
  #modalPublicRooms .lobby-filters { gap: 12px; padding-block: 14px; }
  .directory-search-field { flex-basis: 100%; }
  .directory-filter { flex: 1 1 120px; }
  .directory-results-bar { flex-wrap: wrap; gap: 4px; padding-block: 12px; }
  .directory-results-bar p { width: 100%; }
  #modalPublicRooms .lobby-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .directory-footer-hint { text-align: center; }
}
@media (max-height: 600px) { .directory-footer-hint, .directory-results-bar p { display: none; } #modalPublicRooms .lobby-filters { padding-block: 8px; } }

/* Connection belongs to the room context, beside its caption. */
.room-context-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.room-context-row .gs-caption { margin: 0; }
.room-connection { min-width: 0; max-width: 100%; }
.room-connection .status-bar { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; gap: 6px; font-size: .75rem; flex-wrap: wrap; }
.room-connection .status-meta { display: none; }
.room-connection .status-dot { width: 6px; height: 6px; }
.room-connection .status-text { overflow-wrap: anywhere; }
#statusBarDock:empty { display: none; }