/* Round UX: readable decisions inside the desktop game frame. */
.round-topbar { flex-shrink: 0; }
.round-topbar.large-cast .brand { display: none; }
.round-topbar.large-cast .spacer { display: none; }
.round-topbar.large-cast .score-strip { flex: 1; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; overflow: visible; }
.round-topbar.large-cast .round-chip { grid-column: 1 / -1; justify-self: start; padding: 0; border: 0; background: none; }
.round-topbar.large-cast .pip { min-width: 0; padding: 5px; gap: 4px; flex-wrap: wrap; border-radius: 4px; }
.round-topbar.large-cast .pip .av { display: none; }
.round-topbar.large-cast .pip .nm { max-width: none; width: 100%; font-size:calc((11px) * var(--text-scale,1)); }
.round-topbar.large-cast .pip .sc { margin-left: auto; }
.round-compose, .round-ballot { flex: 1; min-height: 0; padding: 14px 32px 0; gap: 12px; overflow: hidden; }
.round-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: 0 0 auto; }
.round-heading .phase-title { margin: 0; font-size:calc((28px) * var(--text-scale,1)); line-height: 1; }
.round-heading > .f-mono { font-size:calc((12px) * var(--text-scale,1)); color: var(--bone); opacity: .8; }
.compose-prompt { flex: 0 0 21cqh; max-height: 21cqh; overflow-y: auto; scrollbar-width: thin; }
.compose-prompt .prompt-card { margin: 0; padding: 12px 20px; }
.compose-prompt .reel-tag { display: none; }
.compose-prompt .prompt-quote { font-size:calc((24px) * var(--text-scale,1)); line-height: 1.18; }
.compose-prompt .prompt-credits { margin-top: 8px; padding-top: 5px; }
.compose-prompt .blank.filled { white-space: normal; }
.compose-hand { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 12px; padding: 3px; }
.compose-hand .hand-card { position: relative; min-width: 0; min-height: 0; }
.compose-hand .vhs { width: 100%; height: 100%; aspect-ratio: auto; }
.compose-hand .vhs .answer-text { font-size:calc((21px) * var(--text-scale,1)); line-height: 1.12; text-align: left; text-wrap: initial; }
.compose-hand .vhs .sleeve { padding: 10px 12px; }
.compose-hand .vhs .label-top { padding-right: 19px; margin-bottom: 6px; }
.compose-hand .vhs .barcode { height: 5px; margin-top: 4px; opacity: .7; }
.compose-hand .vhs .foot, .compose-hand .vhs .ref { font-size:calc((8px) * var(--text-scale,1)); }
.compose-hand .vhs.pickable:hover, .compose-hand .vhs.selected { transform: none; }
.compose-hand .vhs.selected { outline: 3px solid var(--chroma-c); outline-offset: 1px; }
.card-key { position: absolute; right: 12px; top: 24px; z-index: 2; color: var(--ink); font-size:calc((11px) * var(--text-scale,1)); pointer-events: none; }
.compose-wait { flex: 1; min-height: 0; padding: 24px; text-align: center; }
.compose-wait h2 { font-family: 'Anton', sans-serif; font-size:calc((32px) * var(--text-scale,1)); }
.round-action-bar { flex: 0 0 auto; min-height: 64px; border-top: 1px solid #4b3434; display: flex; align-items: center; gap: 20px; padding: 10px 0 12px; }
.round-action-bar > .f-mono { margin-right: auto; font-size:calc((12px) * var(--text-scale,1)); color: var(--bone); }
.round-action-bar .btn { min-width: 210px; font-size:calc((17px) * var(--text-scale,1)); padding: 11px 20px; }
.round-action-bar .countdown { width: 130px; }
.ballot-instruction { flex: 0 0 auto; margin: 0; font-size:calc((15px) * var(--text-scale,1)); color: var(--bone); line-height: 1.4; }
.ballot-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 24px; }
.take-spotlight { min-height: 0; min-width: 0; padding: 20px; background: #191514; border: 1px solid #776c39; display: flex; flex-direction: column; gap: 12px; }
.take-caption { display: flex; justify-content: space-between; gap: 12px; color: var(--chroma-c); font-size:calc((11px) * var(--text-scale,1)); }
.take-reading { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; align-items: safe center; padding: 6px 0; }
.take-reading .combo { font-size:calc((clamp(22px,2.1cqw,28px)) * var(--text-scale,1)); line-height: 1.35; overflow-wrap: anywhere; }
.take-reading .combo .fill { white-space: normal; }
.take-source { font-size:calc((11px) * var(--text-scale,1)); color: var(--bone); opacity: .7; }
.take-controls { display: flex; gap: 10px; }
.take-controls .btn { flex: 1; padding: 10px 9px; font-size:calc((14px) * var(--text-scale,1)); }
.take-controls .cut-selected { color: var(--chroma-c); border-color: var(--chroma-c); }
.cut-explanation { font-size:calc((12px) * var(--text-scale,1)); line-height: 1.45; color: var(--bone); opacity: .8; margin: 0; }
.take-index { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: minmax(0,1fr); gap: 10px; min-height: 0; }
.take-choice { appearance: none; min-height: 0; min-width: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #26211d; color: var(--bone); border: 1px solid #5c5047; border-radius: 3px; text-align: left; cursor: pointer; }
.take-choice.inspecting { border-color: var(--chroma-c); box-shadow: inset 3px 0 var(--chroma-c); background: #39321f; }
.take-choice.ranked .take-choice-label { color: var(--chroma-c); }
.take-choice-label { display: flex; justify-content: space-between; width: 100%; color: #c5bdb3; font-size:calc((11px) * var(--text-scale,1)); }
.take-choice-text { font-family: 'Archivo Black', sans-serif; font-size:calc((15px) * var(--text-scale,1)); line-height: 1.2; overflow-y: auto; }
.ballot-summary { flex: 0 0 auto; display: flex; gap: 18px; align-items: center; color: #b8afa5; font-size:calc((12px) * var(--text-scale,1)); padding-top: 4px; }
.ballot-summary .filled { color: var(--chroma-c); }
.ballot-summary .cut-filled { color: #ff8b7b; }
/* Round captions stay clear of decisions; repeated prompt/take captions duplicate
   text already on screen, so those are presented by the reading surface itself. */
body:has(.cs-root[data-phase="submit"]) .dir-caption.k-prompt,
body:has(.cs-root[data-phase="submit"]) .dir-caption.k-welcome,
body:has(.cs-root[data-phase="vote"]) .dir-caption.k-welcome,
body:has(.cs-root[data-phase="tally"]) .dir-caption.k-take { display: none; }
body.reduce-motion .round-compose *, body.reduce-motion .round-ballot * { animation: none !important; transition: none !important; }
body.text-boost .take-choice-text { font-size:calc((18px) * var(--text-scale,1)); }
body.text-boost .take-reading .combo { font-size:calc((29px) * var(--text-scale,1)); }
@container (max-height: 650px) {
  .round-compose, .round-ballot { gap: 8px; padding-top: 10px; }
  .round-heading .phase-title { font-size:calc((23px) * var(--text-scale,1)); }
  .compose-prompt .prompt-quote { font-size:calc((21px) * var(--text-scale,1)); }
  .compose-prompt .prompt-card { padding: 8px 14px; }
  .compose-hand .vhs .ref, .compose-hand .vhs .foot { display: none; }
  .compose-hand .vhs .answer-text { font-size:calc((20px) * var(--text-scale,1)); }
  .round-action-bar { min-height: 56px; padding: 8px 0; }
  .take-spotlight { padding: 12px; gap: 8px; }
  .take-choice { padding: 8px; gap: 4px; }
}
@container (max-width: 850px) {
  .round-compose, .round-ballot { padding-left: 16px; padding-right: 16px; }
  .compose-hand { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
  .compose-hand .vhs .spine-text { display: none; }
  .compose-hand .vhs .sleeve { left: 0; padding: 8px; }
  .compose-hand .vhs .ref, .compose-hand .vhs .foot { display: none; }
  .compose-hand .vhs .answer-text { font-size:calc((16px) * var(--text-scale,1)); }
  .ballot-workspace { gap: 10px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .take-choice-text { font-size:calc((13px) * var(--text-scale,1)); }
  .take-controls { flex-direction: column; }
  .round-action-bar { gap: 10px; }
  .round-action-bar .btn { min-width: 150px; }
  .round-action-bar .countdown { width: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .round-compose *, .round-ballot * { animation: none !important; transition: none !important; }
}

.take-reading { background: var(--card-paper); border-radius: 3px; padding: 16px; }
.take-reading .combo { color: var(--ink); font-family: 'Libre Caslon Display', serif; font-size:calc((25px) * var(--text-scale,1)); }
.take-reading .combo .ans { font-family: 'Archivo Black', sans-serif; font-size: .8em; background: var(--chroma-c); color: var(--ink); padding: .02em .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }


.compose-prompt .prompt-card { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.compose-hand .vhs .pick-num { z-index: 3; }

/* Reveal one complete take without moving the player's reading position. */
.round-tally { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.tally-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); gap: 24px; }
.tally-spotlight .take-reading .combo { font-size:calc((30px) * var(--text-scale,1)); }
.tally-intro { color: var(--ink); font: calc(32px * var(--text-scale,1)) 'Libre Caslon Display',serif; }
.tally-votes { display: flex; flex-wrap: wrap; gap: 16px; min-height: 18px; font-size:calc((12px) * var(--text-scale,1)); color: var(--bone); }
.tally-score-list { display: grid; grid-auto-rows: minmax(0,1fr); gap: 7px; min-height: 0; }
.tally-score { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #4b3e35; background: #211b19; color: #c7bdb0; min-height: 0; font-size:calc((15px) * var(--text-scale,1)); }
.tally-score > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tally-score b { font: calc(26px * var(--text-scale,1)) 'Anton',sans-serif; }
.tally-score.winning { color: var(--chroma-c); }
.tally-score.current { border-color: var(--chroma-c); background: #342d1c; }
.tally-place { width: 22px; font-size:calc((12px) * var(--text-scale,1)); }
.round-tally .round-action-bar .btn.ghost { min-width: 120px; }
body.reduce-motion .round-tally * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .round-tally * { animation: none !important; transition: none !important; } }

.cs-root[data-phase="result"] .stage, .cs-root[data-phase="tally"] .stage { overflow: hidden; }
.result-layout { height: 100%; min-height: 0; align-items: stretch; max-width: 1180px; }
.result-main { min-height: 0; overflow-y: auto; }
.result-layout .result-combo { min-height: 0; padding: 20px; text-align: left; }
.result-layout .result-combo .quote { flex: 1; min-height: 0; overflow-y: auto; font-size:calc((28px) * var(--text-scale,1)); line-height: 1.3; text-wrap: initial; background: var(--card-paper); color: var(--ink); padding: 16px; }
.result-layout .result-combo .quote .ans { display: inline; transform: none; text-transform: none; box-shadow: none; -webkit-box-decoration-break: clone; }
.result-winner-tag { flex-shrink: 0; margin-bottom: 0; }
.result-rail { height: 100%; gap: 12px; }
.result-rail .cut-banner { flex-shrink: 0; max-height: 38%; overflow-y: auto; }
.cut-take-detail { margin-top: 8px; font-size:calc((12px) * var(--text-scale,1)); }
.cut-take-detail summary { cursor: pointer; color: var(--bone); }
.result-rail .scoreboard-wrap { flex: 1; min-height: 0; }
.result-rail .final-board { flex: 1; max-height: none; display: flex; flex-direction: column; gap: 4px; }
.result-rail .final-board .final-row { flex: 1; min-height: 32px; padding: 4px 10px; gap: 8px; }
.result-rail .final-board .final-row .sc { font-size:calc((21px) * var(--text-scale,1)); }
.result-rail .final-board .final-row .nm { font-size:calc((13px) * var(--text-scale,1)); }
.result-rail .result-next { flex-shrink: 0; }
body:has(.cs-root[data-phase="result"]) .dir-caption.k-winner { display: none; }


.result-layout .result-combo .quote { overflow-x: hidden; overflow-wrap: anywhere; }
.tally-score { font-family: inherit; text-align: left; }
.tally-score:disabled { opacity: 1; cursor: default; }
.tally-score:not(:disabled) { cursor: pointer; }
.tally-score:focus-visible { outline: 2px solid var(--chroma-c); outline-offset: 2px; }

/* Reveal the quote first; secondary labels never compete with its eyeline. */
.prompt-reveal{width:100%;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:26px;box-sizing:border-box;padding:20px 0}
.prompt-reveal-heading{font-size:calc((14px) * var(--text-scale,1));letter-spacing:.22em;color:var(--chroma-c);text-align:center}
.prompt-reveal .prompt-card{width:100%;margin:0 auto;box-sizing:border-box}
.prompt-reveal .prompt-quote{font-size:clamp(30px,3.7cqw,48px);line-height:1.25}
.prompt-reveal-footer{font-size:calc((12px) * var(--text-scale,1));letter-spacing:.09em;text-align:center;color:var(--bone);opacity:.65}

/* One take owns the stage during the anonymous pre-vote screening. */
.screening-spotlight { flex:1; min-height:0; width:min(100%,1000px); align-self:center; }
.screening-spotlight .take-reading .combo { font-size:clamp(28px,3.4cqw,44px); line-height:1.32; }
.screening-progress { display:flex; justify-content:center; gap:12px; }
.screening-progress span { border-bottom:2px solid #5b5140; padding:4px 10px; color:var(--bone); opacity:.45; font:calc(14px * var(--text-scale,1)) monospace; }
.screening-progress .shown { opacity:.7; }
.screening-progress .current { opacity:1; color:var(--chroma-c); border-color:var(--chroma-c); }
.tally-announcement { align-items:center; justify-content:center; }
.tally-announcement .tally-intro { flex:0; }