/* ===================================================================
   CINEMA SLAUGHTER — FIT-TO-VIEWPORT
   The game is a video game, not a web page: the core play screens must
   fit the frame without the main area scrolling. This layer budgets the
   gameplay column height so its pieces (prompt · rail/grid · hand tray)
   sum to the available height, and compresses them together as it drops.

   Units are CONTAINER-relative (cqh) and breakpoints are @container, so
   ONE ruleset drives both modes: "Fit Window" (container = viewport) and
   a locked resolution (container = the fixed 1280×H canvas). #res-stage
   is the size-container (see res.css). Loaded AFTER styles/round/cut.
   =================================================================== */

/* ---- hand tray: the biggest space hog on the submit screen ----
   Tie its height to the canvas so the tray never eats more than ~a
   quarter of the frame, leaving room for the prompt + rail above it. */
.hand-scroll .vhs { height: clamp(104px, 23cqh, 188px); }
.hand-scroll { padding: 10px 12px 4px; }
.hand-bar { padding-top: 8px; }
.hand-meta { padding-top: 4px; }

/* trim the fixed bottom safety padding so result/tally sit higher */
.stage { padding: 20px 18px 26px; }

/* ---- VOTE grid: fit the submissions into the play area ---- */
.play-scroll .subs-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.play-scroll .sub-card { padding: 14px 15px 13px; min-height: 0; }
.play-scroll .sub-card .combo { font-size:calc((clamp(14px, 1.4cqw, 19px)) * var(--text-scale,1)); line-height: 1.16; }
.play-scroll .vote-prompt { margin-bottom: 10px; }
.play-scroll .vote-prompt .prompt-card { padding: 12px 20px 10px; }
.play-scroll .vote-prompt .prompt-quote { font-size:calc((clamp(17px, 2.2cqw, 26px)) * var(--text-scale,1)); }

/* ===================================================================
   HEIGHT COMPRESSION — shrinks the space-hungry pieces together as the
   canvas gets shorter, so the play column keeps fitting. Container
   queries so a locked 16:9 (720) canvas compresses on its LOGICAL height,
   independent of the window it's scaled into.
   =================================================================== */
@container (max-height: 780px) {
  .hand-scroll .vhs { height: clamp(100px, 21cqh, 168px); }
  .play-scroll { padding: 14px 18px 12px; }
  .play-scroll .prompt-card { padding: 13px 20px 11px; }
  .play-scroll .prompt-quote { font-size:calc((clamp(18px, 2.4cqw, 26px)) * var(--text-scale,1)); }
  .play-scroll .subs-grid { gap: 10px; }
  .waiting-block { margin-top: 14px; }
}

@container (max-height: 640px) {
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .hand-scroll .vhs { height: clamp(94px, 20cqh, 140px); }
  .hand-scroll { padding: 8px 12px 2px; }
  .play-scroll { padding: 10px 16px 8px; }
  .play-scroll .stage-head { margin-bottom: 6px; }
  .play-scroll .phase-title { font-size:calc((clamp(15px, 2.2cqw, 20px)) * var(--text-scale,1)); }
  .play-scroll .phase-sub { display: none; }
  .play-scroll .prompt-card { padding: 10px 16px 9px; }
  .play-scroll .prompt-quote { font-size:calc((clamp(15px, 2cqw, 21px)) * var(--text-scale,1)); line-height: 1.08; }
  .play-scroll .reel-tag { margin-bottom: 5px; }
  .play-scroll .prompt-credits { margin-top: 7px; padding-top: 6px; }
  .waiting-block { margin-top: 8px; }
  .wait-head { margin-bottom: 5px; }
  .cut-note { margin-top: 7px; padding: 6px 10px; }
  .stage { padding: 12px 16px 16px; }
}

@container (max-height: 520px) {
  .hand-scroll .vhs { height: clamp(84px, 30cqh, 120px); }
  .play-scroll .phase-title { display: none; }
  .play-scroll .subs-grid { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .play-scroll .sub-card { padding: 10px 12px 10px; }
  .play-scroll .sub-card .combo { font-size:calc((clamp(13px, 1.3cqw, 16px)) * var(--text-scale,1)); }
}

/* ===================================================================
   MENU COMPACTION — the menus render inside the same locked canvas, so
   they must fit 720p too. Fires only at ≤760 logical height (16:9), so
   the roomier 16:10 / 4:3 canvases keep their generous spacing.
   =================================================================== */
@container (max-height: 760px) {
  .menu-body { padding: 18px 20px 14px; }
  /* home is the one screen that overruns at 720: the gaps between its five
     stacked blocks add up past the frame. Tighten the two loosest. */
  .friends-strip { margin-top: 12px; }
  .home-hero { margin-bottom: 16px; }
  .home-grid { gap: 14px; }
  .big-action { min-height: 168px; padding: 20px; gap: 6px; }
  .ba-glyph { font-size:calc((32px) * var(--text-scale,1)); }
  .play-extra { margin-top: 14px; }
  .home-foot { margin-top: 12px; }
  .foot-card { padding: 13px 16px; }
  .fc-num { font-size:calc((27px) * var(--text-scale,1)); }
  /* profile / store / lobby panels share the shell — trim their top pad too */
  .profile-banner { margin-bottom: 16px; }
  .stat-row { margin-bottom: 18px; }
}

/* Fallback for any context WITHOUT a size-container ancestor (shouldn't
   happen once #res-stage exists, but keeps the tray sane if it doesn't). */
@supports not (height: 1cqh) {
  .hand-scroll .vhs { height: clamp(104px, 23dvh, 188px); }
}

/* ===================================================================
   RESULT SCREEN — "the cutting room" (was a tall single stack)
   1280px of width was wasted stacking the winning combo, the cut, and the
   scoreboard vertically. Lay them out as combo-hero (left) + standings
   rail (right) so the whole reveal fits one frame.
   =================================================================== */
.result-layout {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 24px; align-items: start; max-width: 1120px; margin: 0 auto; width: 100%;
}
.result-main { min-width: 0; }
.result-layout .result-combo {
  max-width: none; margin: 0; padding: clamp(20px, 2.4cqw, 32px);
  display: flex; flex-direction: column; gap: 12px; height: 100%;
}
.result-layout .result-combo .quote { font-size:calc((clamp(22px, 2.8cqw, 36px)) * var(--text-scale,1)); line-height: 1.16; }
.result-layout .result-ref { margin-top: 0; }
.result-layout .result-actions { margin-top: auto; justify-content: flex-start; }

.result-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.result-rail .cut-banner { max-width: none; margin: 0; padding: 12px 16px 13px; text-align: left; }
.result-rail .cut-banner .cb-title { font-size:calc((clamp(18px, 2cqw, 24px)) * var(--text-scale,1)); }
.result-rail .cut-banner .cb-combo { margin-left: 0; }
.result-rail .scoreboard-wrap { margin: 0; }
.result-rail .final-board { max-width: none; margin: 8px 0 0; gap: 7px; }
.result-rail .final-row { padding: 9px 13px; }
.result-next { width: 100%; margin-top: 2px; }

/* stack the two columns when the frame is narrow (portrait / small window) */
@container (max-width: 820px) {
  .result-layout { grid-template-columns: 1fr; gap: 16px; }
  .result-layout .result-actions { justify-content: center; }
}

/* TALLY reveal rows: trim padding so more takes fit a frame */
@container (max-height: 760px) {
  .tally-list { gap: 9px; margin-top: 12px; }
  .tally-row { padding: 11px 15px; }
  .tally-row.ghost { min-height: 52px; }
  .tr-points b { font-size:calc((26px) * var(--text-scale,1)); }
}

/* ===================================================================
   WORKS-FOR-MAX — the cast can reach 8. Dense lists must never push the
   frame: they live in HEIGHT-BOUNDED panels that scroll internally (like
   a real game scoreboard), and compact by COUNT so 4–6 still fit with no
   scroll at all. The fixed HUD (prompt, lock bar, next button) stays put.
   =================================================================== */

/* --- RESULT: the score list is a bounded panel that scrolls internally --- */
.result-rail { min-height: 0; }
.result-rail .scoreboard-wrap { display: flex; flex-direction: column; min-height: 0; }
.result-rail .final-board {
  max-height: 46cqh; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blood) 70%, #000) transparent;
}
.result-rail .final-board::-webkit-scrollbar { width: 7px; }
.result-rail .final-board::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blood) 70%, #000); border-radius: 4px; }
/* count-aware: a big cast → denser rows so more fit before any scroll */
.result-rail .final-board:has(.final-row:nth-child(6)) { gap: 5px; }
.result-rail .final-board:has(.final-row:nth-child(6)) .final-row { padding: 7px 12px; }
.result-rail .final-board:has(.final-row:nth-child(6)) .final-row .sc { font-size:calc((21px) * var(--text-scale,1)); }
.result-rail .final-board:has(.final-row:nth-child(6)) .final-row .rank { font-size:calc((18px) * var(--text-scale,1)); }

/* --- STANDINGS (act break / final): 2 columns once the cast is large,
       so 7–8 players lay out in half the height --- */
.actbreak .final-board:has(.final-row:nth-child(7)),
.gover .final-board:has(.final-row:nth-child(7)) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; max-width: 760px;
}

/* --- TALLY: bound the reveal list; it scrolls to the newest take
       (see TallyView) instead of growing past the frame --- */
.tally-list {
  max-height: 52cqh; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blood) 70%, #000) transparent;
}
.tally-list::-webkit-scrollbar { width: 7px; }
.tally-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--blood) 70%, #000); border-radius: 4px; }

/* --- VOTE: with a big cast the grid scrolls inside the play area while
       the lock bar stays pinned; tighter cards raise the no-scroll ceiling --- */
.play-scroll .subs-grid:has(.sub-tile:nth-child(7)) { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.play-scroll .subs-grid:has(.sub-tile:nth-child(7)) .sub-card { padding: 11px 13px 11px; }
.play-scroll .subs-grid:has(.sub-tile:nth-child(7)) .sub-card .combo { font-size:calc((clamp(13px, 1.3cqw, 17px)) * var(--text-scale,1)); }

/* ===================================================================
   A TIED REEL — one hero block per winner, and all eight can tie
   The result screen renders winners.map(), so a tie stacks full combo
   heroes and pushes the frame by a screenful. Compact by count the way
   the scoreboard does, and bound the column so a big tie scrolls inside
   its own panel rather than moving anything else.
   =================================================================== */
.result-main:has(.result-combo:nth-child(2)) {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 62cqh; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blood) 70%, #000) transparent;
}
.result-main:has(.result-combo:nth-child(2))::-webkit-scrollbar { width: 7px; }
.result-main:has(.result-combo:nth-child(2))::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blood) 70%, #000); border-radius: 4px;
}
/* flex children shrink by default, which squashed every hero to its title bar
   inside the bounded column — they keep their own height and the column scrolls */
.result-main:has(.result-combo:nth-child(2)) .result-combo { flex: 0 0 auto; padding: clamp(14px, 2cqw, 22px); }
.result-main:has(.result-combo:nth-child(2)) .result-combo .quote { font-size:calc((clamp(17px, 2.2cqw, 26px)) * var(--text-scale,1)); }
.result-main:has(.result-combo:nth-child(4)) .result-combo .quote { font-size:calc((clamp(15px, 1.8cqw, 21px)) * var(--text-scale,1)); }
.result-main:has(.result-combo:nth-child(4)) .result-combo { padding: 12px 14px; }

/* ===================================================================
   LOBBY + NEWS at 720
   Both are stacks of cards inside a scrolling panel. At the design
   height they run past the frame, so tighten the repeated blocks —
   the ones whose cost multiplies by however many seats or stories
   are on screen — rather than shaving the shell.
   =================================================================== */
@container (max-height: 760px) {
  /* lobby: eight seats, a pack list and a code bar all stack */
  .lobby .menu-body { padding-top: 14px; }
  .lobby-title { margin-bottom: 8px; }
  .lobby-body { gap: 16px; }
  .seat-list { gap: 6px; }
  .seat { padding: 8px 12px; }
  .pack-body { padding: 12px 14px; gap: 5px; }
  .pack-name { font-size:calc((19px) * var(--text-scale,1)); }
  .pack-blurb { display: none; }          /* the pack name and count carry it */
  .pack-card .btn { margin-top: 3px; }
  .room-code { padding: 5px 10px; }

  /* The lobby is two columns and the taller one (packs) sets the row height —
     581px in a 523px box. Bound both and let the long one scroll inside itself,
     the same pattern the scoreboard and tally list already use. */
  .lobby-body { min-height: 0; }
  .lobby-left, .lobby-right {
    min-height: 0; max-height: 66cqh; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--blood) 70%, #000) transparent;
  }
  .lobby-left::-webkit-scrollbar, .lobby-right::-webkit-scrollbar { width: 7px; }
  .lobby-left::-webkit-scrollbar-thumb, .lobby-right::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--blood) 70%, #000); border-radius: 4px;
  }

  /* news: a column of story cards */
  .extras-body { padding: 18px 30px 22px; }
  .news-list { gap: 9px; }
  .news-card { padding: 12px 16px; }
  .news-head { margin-bottom: 5px; }
}