/* Fixed round geometry. Only the two absolutely stacked lower panels move.
   The personal subject form uses personal-game-screen, not this four-row
   layout: its nested form would otherwise overflow while scores fill 1fr. */
.beta-unified .game-screen {
  --game-h: min(var(--app-height, 100svh), 100svh);
  height: var(--game-h); max-height: 100%; bottom: auto;
  padding: max(6px, env(safe-area-inset-top)) 12px max(6px, env(safe-area-inset-bottom));
  display: grid; grid-template-rows: 48px minmax(0, 1fr) 56px clamp(196px, 36svh, 310px);
  gap: 6px; overflow: hidden; overscroll-behavior: none; animation: none !important;
  max-width: 680px; margin-inline: auto;
}
.beta-unified .game-screen > .gv2-topbar { grid-row: 1; order: initial; margin: 0; align-self: stretch; }
.beta-unified .gv2-clock-stack { width: 42px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.beta-unified .gv2-timer-pill { font-size: 17px; padding: 2px 8px; min-width: 34px; line-height: 22px; }
.beta-unified .gv2-clock-stack .q-cat-badge { position: static; width: 20px; height: 20px; opacity: 1; }
.beta-unified .game-screen > .question-card-live {
  grid-row: 2; order: initial; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  gap: 3px; padding: 0; margin: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: none;
}
.beta-unified .question-card-live .question-text {
  align-self: stretch; height: 100%; min-height: 0; min-width: 0; width: 100%; margin: 0;
  display: flex; justify-content: center; align-items: center; text-align: center; line-height: 1.18;
  overflow-wrap: anywhere; letter-spacing: 0;
}
.beta-unified .question-card-live .live-player-axis { margin: 0; padding: 0; }
.beta-unified .game-screen > .guess-section.game-top {
  grid-row: 3; order: initial; min-height: 0; height: 100%; margin: 0; padding: 4px 10px; overflow: hidden;
  border-radius: 999px; position: relative;
}
.beta-unified .guess-value-row { flex-wrap: nowrap; gap: 8px; align-items: center; }
.beta-unified .guess-value-row .reveal-answer { font-size: clamp(24px, calc((100vw - 140px) / var(--answer-length, 2)), 38px); line-height: 1; font-variant-numeric: tabular-nums; }
.beta-unified .guess-value-row .reveal-unit, .beta-unified .guess-value-unit { font-size: 14px; max-width: 33%; overflow-wrap: anywhere; line-height: 1.1; }
.beta-unified .guess-value { font-size: clamp(24px, 7vw, 38px); }
.beta-unified .guess-value.placeholder { font-size: clamp(15px, 4.5vw, 21px); }
.beta-unified .is-revealing .guess-section { border-color: var(--purple); background: rgba(15,140,121,.06); }
.beta-unified .gv2-lower-stage { grid-row: 4; order: initial; position: relative; min-height: 0; overflow: hidden; isolation: isolate; }
.beta-unified .game-screen .gv2-lower-stage > .keypad-zone,
.beta-unified .game-screen .gv2-results-panel {
  position: absolute; inset: 0; margin: 0; padding: 0; min-height: 0; max-height: none; width: 100%;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease, visibility 280ms;
}
.beta-unified .game-screen .gv2-lower-stage > .keypad-zone {
  display: grid; grid-template-rows: minmax(0, 1fr) 40px; gap: 5px;
  opacity: 1; transform: translateY(0); visibility: visible;
}
/* Token-count HUD (?beta=double only): sat above the keypad the whole
   round, competing with it for space -- now surfaced only as the
   .bet-trigger bubble that pops up over the keypad once a decision is
   actually open (see armBetDecision()), so nothing about it is visible
   the rest of the time. */
.beta-unified .keypad-zone > .bet-tokens-pill { display: none; }
.beta-unified .gv2-lower-stage .keypad { min-height: 0; margin: 0; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 4px; }
.beta-unified .gv2-lower-stage .key { min-height: 0; padding: 0; font-size: 23px; line-height: 1; border-radius: 10px; touch-action: manipulation; }
.beta-unified .gv2-input-actions { display: flex; gap: 6px; min-height: 0; }
.beta-unified .gv2-input-actions .submit-btn { margin: 0; min-height: 0; padding: 0; flex: 1; font-size: 17px; }
/* Skipping a question was dropped from the round: it wasn't usable in
   practice and it competed with the submit button for the widest, most
   reachable control on the screen. */
.beta-unified .gv2-input-actions .skip-row { display: none; }
.beta-unified .game-screen.is-revealing .gv2-lower-stage > .keypad-zone {
  opacity: 0; transform: translateY(100%); pointer-events: none; visibility: hidden; max-height: none;
}
.beta-unified .gv2-results-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) 40px; gap: 5px; opacity: 0; visibility: hidden; transform: translateY(-100%); pointer-events: none; }
.beta-unified .game-screen.is-revealing .gv2-results-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.beta-unified .gv2-results-heading { grid-row: 1; text-align: center; font-size: 13px; font-weight: 800; color: var(--purple); line-height: 18px; }
/* Empty during the brief searching animation (see gv2ResetRound()) -- the
   row itself collapses to 0 instead of holding open unused space. */
.beta-unified .gv2-results-heading:empty { display: none; }
.beta-unified .game-screen .gv2-cards-slot, .beta-unified .game-screen.is-revealing .gv2-cards-slot {
  /* Now holds one buildAxisRankList() table (a ranked, numbered row list),
     not a 2-column grid of cards -- a plain scrollable column, centered
     when it's short (a duel's 2 rows) and scrolling instead of clipping
     if it's ever taller than the available space (many players). */
  order: initial; grid-row: 2; display: flex; flex-direction: column; justify-content: center;
  width: 100%; margin: 0; max-height: 100%; min-height: 0; overflow-y: auto; opacity: 1; transition: none;
}
.beta-unified .gv2-cards-slot .axis-rank-list { margin: 0; max-height: none; gap: 3px; }
.beta-unified .gv2-cards-slot .axis-rank-row { padding: 5px 8px; }
.beta-unified .gv2-cards-slot .axis-rank-name { font-size: 12px; }
.beta-unified .gv2-cards-slot .axis-rank-value { font-size: 12px; }
.beta-unified .gv2-cards-slot .axis-rank-delta { font-size: 11px; width: 46px; }
.beta-unified .gv2-cards-slot .axis-rank-total { font-size: 13px; padding: 2px 8px; }
.beta-unified .gv2-next-slot { grid-row: 3; min-height: 0; display: flex; align-items: stretch; gap: 6px; }
.beta-unified .gv2-next-slot .btn { width: 100%; padding: 0 8px; margin: 0 !important; min-height: 0; font-size: 15px; }
.beta-unified .game-screen > .reveal-content,
.beta-unified #screen-mp-game > #mp-status-banner { display: none !important; }
.beta-unified .gv2-subject-wait { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; text-align: center; color: var(--text-muted); font-size: 18px; pointer-events: none; }
.beta-unified .gv2-subject-wait[hidden], .beta-unified .is-revealing .gv2-subject-wait { display: none; }
@media (max-height: 620px) and (orientation: portrait) {
  .beta-unified .game-screen { grid-template-rows: 42px minmax(0, 1fr) 46px 188px; gap: 4px; padding-block: 4px; }
  .beta-unified .gv2-clock-stack { gap: 0; }
  .beta-unified .gv2-timer-pill { font-size: 15px; line-height: 20px; }
  .beta-unified .gv2-lower-stage > .keypad-zone { grid-template-rows: minmax(0, 1fr) 36px !important; }
  .beta-unified .gv2-results-panel { grid-template-rows: auto minmax(0, 1fr) 34px; gap: 3px; }
  .beta-unified .gv2-results-heading { font-size: 12px; line-height: 16px; }
  .beta-unified .gv2-cards-slot .axis-rank-name { font-size: 11px; }
  /* --lpa-tag-space reserves room for the two-line name+distance tag; at
     this font size the tag actually renders taller than the old 29px
     reserve, so with 3 rungs (5-6 players) the outer rung's tag overran
     the question card's own bottom edge by a few px -- clipped by the
     card's overflow:hidden right where the guess box begins, reading as
     the name/distance being "hidden behind" it. Sized with a few px of
     slack so it's never a near thing. */
  .beta-unified .live-player-axis { --lpa-pole-base: 24px; --lpa-pole-step: 28px; --lpa-tag-space: 34px; }
  .beta-unified .lpa-nmrow { font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .beta-unified .game-screen { max-width: 100%; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr) 46px; gap: 6px 18px; }
  .beta-unified .game-screen > .gv2-topbar { grid-column: 1 / -1; }
  .beta-unified .game-screen > .question-card-live { grid-column: 1; grid-row: 2 / 4; }
  .beta-unified .game-screen > .guess-section.game-top { grid-column: 2; grid-row: 2; align-self: start; height: 46px; }
  .beta-unified .gv2-lower-stage { grid-column: 2; grid-row: 2 / 4; margin-top: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .beta-unified .game-screen .gv2-lower-stage > .keypad-zone, .beta-unified .game-screen .gv2-results-panel { transition: none !important; }
}

.beta-unified .game-screen:not(.active) { display: none; }
.review-explain { font-size: 14px; line-height: 1.5; color: var(--text-dim); }

/* The brand face is loaded with display=swap and preloaded in <head>, so the
   round keeps the game's own typography instead of falling back to a system
   face mid-match. */
.beta-unified #guess-section .guess-value-row #reveal-answer,
.beta-unified #mp-guess-section .guess-value-row #mp-reveal-answer {
  font-size: clamp(16px, calc((100vw - 136px) / var(--answer-length, 2)), 38px);
}
.beta-unified .guess-value:not(.placeholder) { font-size: clamp(16px, calc((100vw - 136px) / var(--guess-length, 2)), 38px); }
/* The double-or-nothing invite: revealed only once a decision is actually
   open (armBetDecision() -- itself only fires right after locking a real
   answer, see armMyBetDecisionIfEligible()), as a bouncing bubble floating
   over the now-locked keypad rather than a permanent fixture competing
   with it for space the rest of the round. */
.beta-unified .gv2-lower-stage .bet-trigger {
  position: absolute; inset: 0; z-index: 5; left: auto; bottom: auto;
  display: none; align-items: center; justify-content: center; pointer-events: none;
}
.beta-unified .gv2-lower-stage .bet-trigger.show { display: flex; }
.beta-unified .gv2-lower-stage .bet-trigger-btn-wrap, .beta-unified .gv2-lower-stage .bet-trigger-bubble { pointer-events: auto; }
.beta-unified .gv2-lower-stage .bet-overlay { position: absolute; padding: 0; backdrop-filter: none; background: var(--bg); border-radius: 12px; }
.beta-unified .gv2-lower-stage .bet-card { padding: 8px 12px; border: 0; border-radius: 12px; animation: none; }
.beta-unified .gv2-lower-stage .bet-icon { display: none; }
.beta-unified .gv2-lower-stage .bet-title { font-size: 17px; line-height: 20px; margin-bottom: 4px; }
.beta-unified .gv2-lower-stage .bet-subtitle { font-size: 12px; line-height: 15px; margin-bottom: 6px; }
.beta-unified .gv2-lower-stage .bet-actions { margin-bottom: 4px; }
.beta-unified .gv2-lower-stage .bet-actions .btn { font-size: 14px; padding: 8px; }
.beta-unified .gv2-lower-stage .bet-countdown-ring { width: 32px; height: 32px; }
.beta-unified .gv2-lower-stage .bet-countdown-num { font-size: 16px; }
.beta-unified .gv2-lower-stage .bet-countdown-label { font-size: 10px; margin-top: 2px; }

@media (max-height: 550px) and (orientation: portrait) {
  .beta-unified .game-screen { grid-template-rows: 34px minmax(0, 1fr) 40px 172px; }
  .beta-unified .gv2-clock-stack .q-cat-badge { height: 14px; width: 18px; }
  .beta-unified .gv2-clock-stack .cat-icon { height: 13px; }
  .beta-unified .gv2-timer-pill { padding-block: 0; line-height: 18px; }
  /* See the matching comment above the 620px breakpoint's --lpa-tag-space:
     this reserve must cover the real rendered tag height (name row +
     distance row) or the outermost rung clips against the card's own
     overflow:hidden edge, right at the guess box. */
  .beta-unified .live-player-axis { --lpa-pole-base: 20px; --lpa-pole-step: 24px; --lpa-tag-space: 31px; }
  .beta-unified .lpa-nmrow { font-size: 12px; }
  .beta-unified .lpa-detail { font-size: 10px; height: 12px; line-height: 12px; }
  .beta-unified .lpa-pennant, .beta-unified .lpa-twin-pennant { height: 12px; width: 21px; }
  .beta-unified .lpa-double { font-size: 9px; }
  .beta-unified .gv2-cards-slot .axis-rank-row { padding: 3px 6px; gap: 5px; }
  .beta-unified .gv2-cards-slot .axis-rank-name { font-size: 11px; }
  .beta-unified .gv2-cards-slot .axis-rank-value { font-size: 11px; }
  .beta-unified .gv2-cards-slot .axis-rank-delta { font-size: 10px; width: 40px; }
  .beta-unified .gv2-cards-slot .axis-rank-total { font-size: 12px; padding: 1px 7px; }
}

/* Personal subject answer: reserve input space before sizing the question.
   Applies to both layouts; inactive screens retain .screen:not(.active). */
#screen-mp-personal-turn {
  height: min(var(--app-height, 100svh), 100svh); max-height: 100%; bottom: auto;
  padding: max(6px, env(safe-area-inset-top)) 12px max(6px, env(safe-area-inset-bottom));
  grid-template-rows: 40px auto minmax(0, 1fr); gap: 6px;
  max-width: 600px; margin-inline: auto; overflow: hidden;
  overscroll-behavior: none; animation: none !important;
}
#screen-mp-personal-turn.active { display: grid; }
#screen-mp-personal-turn > .brand-row { grid-row: 1; padding: 0; min-width: 0; }
#screen-mp-personal-turn .brand { font-size: 12px; }
#screen-mp-personal-turn .brand-row-end { gap: 5px; }
#screen-mp-personal-turn .room-pill { font-size: 11px; padding: 6px 8px; }
#mp-personal-score-strip { grid-row: 2; align-content: start; grid-auto-rows: auto; gap: 4px; margin: 0; }
#mp-personal-score-strip .mp-score-card { padding: 3px 6px; }
#mp-personal-score-strip .mp-score-name { font-size: 10px; line-height: 12px; }
#mp-personal-score-strip .mp-score-num { font-size: 16px; line-height: 18px; }
#screen-mp-personal-turn .personal-turn-content {
  grid-row: 3; display: grid; grid-template-rows: auto minmax(0, 1fr) clamp(224px, 44svh, 370px);
  gap: 5px; min-height: 0; min-width: 0; max-width: none;
}
#mp-personal-subject-badge { padding: 6px 10px; font-size: 12px; line-height: 16px; }
#screen-mp-personal-turn .question-card { min-height: 0; margin: 0; padding: 8px 12px; overflow: hidden; }
#mp-personal-q-text {
  width: 100%; height: 100%; min-height: 0; min-width: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.18; overflow-wrap: anywhere; letter-spacing: 0;
}
#mp-personal-subject-view { display: grid; grid-template-rows: 52px minmax(0, 1fr); min-height: 0; gap: 5px; }
#mp-personal-answer-section { grid-row: 1; height: 100%; min-height: 0; margin: 0; padding: 3px 8px; overflow: hidden; }
#mp-personal-answer-section .guess-label { font-size: 11px; line-height: 14px; margin: 0; }
#mp-personal-answer-section .guess-value-row { flex-wrap: nowrap; gap: 8px; }
#mp-personal-answer-value { font-size: clamp(16px, calc((100vw - 136px) / var(--personal-answer-length, 2)), 30px); line-height: 1; }
#mp-personal-answer-unit { font-size: 14px; line-height: 1.1; max-width: 33%; overflow-wrap: anywhere; }
#mp-personal-subject-view .keypad-zone { grid-row: 2; display: grid; grid-template-rows: minmax(0, 1fr) 44px; min-height: 0; gap: 5px; }
#mp-personal-keypad { grid-template-rows: repeat(4, minmax(0, 1fr)); min-height: 0; margin: 0; gap: 4px; }
#mp-personal-keypad .key { min-height: 0; padding: 0; font-size: 23px; line-height: 1; touch-action: manipulation; }
#screen-mp-personal-turn .personal-answer-actions { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 0; gap: 6px; }
#mp-personal-key-submit { min-height: 0; padding: 0 8px; margin: 0; font-size: 17px; }
#btn-mp-personal-pass { min-height: 0; padding: 0 6px; margin: 0; font-size: 12px; line-height: 1.2; }
@media (max-height: 620px) and (orientation: portrait) {
  #screen-mp-personal-turn { grid-template-rows: 32px auto minmax(0, 1fr); gap: 4px; padding-block: 4px; }
  #screen-mp-personal-turn .personal-turn-content { grid-template-rows: auto minmax(0, 1fr) 224px; gap: 4px; }
  #mp-personal-subject-badge { padding-block: 3px; font-size: 11px; }
  #screen-mp-personal-turn .question-card { padding: 4px 8px; }
  #mp-personal-subject-view { grid-template-rows: 40px minmax(0, 1fr); gap: 4px; }
  #mp-personal-subject-view .keypad-zone { grid-template-rows: minmax(0, 1fr) 36px; gap: 4px; }
  #mp-personal-answer-value { font-size: clamp(16px, calc((100vw - 136px) / var(--personal-answer-length, 2)), 22px); }
}
@media (orientation: landscape) and (max-height: 550px) {
  #screen-mp-personal-turn { max-width: 100%; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 36px auto minmax(0, 1fr); gap: 5px 14px; }
  #screen-mp-personal-turn > .brand-row { grid-column: 1 / -1; }
  #mp-personal-score-strip { grid-column: 1; }
  #screen-mp-personal-turn .personal-turn-content { display: contents; }
  #mp-personal-subject-badge { grid-column: 2; grid-row: 2; }
  #screen-mp-personal-turn .question-card { grid-column: 1; grid-row: 3; }
  #mp-personal-subject-view { grid-column: 2; grid-row: 3; grid-template-rows: 40px minmax(0, 1fr); gap: 4px; }
  #mp-personal-subject-view .keypad-zone { grid-template-rows: minmax(0, 1fr) 36px; gap: 4px; }
  #mp-personal-answer-value { font-size: clamp(16px, calc((50vw - 110px) / var(--personal-answer-length, 2)), 22px); }
}