/* Tablet (700 to 1099 px) and desktop (1100 px and up) layouts. Phones (under 700 px) use the base styles.
   Loaded by its own <link media="(min-width: 700px)"> in index.html, so phones never wait for it. Images come from
   variables set in styles.css (Vite inlines them there), never url() here.
   Art stays at whole-number scales: backgrounds 2x on phones, 3x on tablets, 4x on desktop for the room;
   portraits 1x, or 2x in the desktop room; the share card at 1x or 2x of its 360 x 450 design grid. */

.bc-side { display: none; }
.resume-panel { color: var(--c-ink); }
.panel-head { padding: 2px 2px 8px; border-bottom: var(--px) solid var(--c-ash); }
.panel-title { font-size: 34px; line-height: 1; }
.panel-body { padding-top: 8px; }
.panel-empty { margin: 10px 2px; color: var(--c-slate); }

/* ======================= tablet and up ======================= */
@media (min-width: 700px) {
  .page-head { padding: 18px 72px 10px 20px; }
  .page-title { font-size: 58px; }
  .sheet { max-width: 560px; }
  .speech { max-width: 560px; }

  /* title: art at 3x */
  .title-bg { width: 648px; height: 1152px; background-size: 648px 1152px; }
  .screen-title::after { top: 1152px; }
  .title-wrap { max-width: 648px; margin: 0 auto; padding-top: 56px; }
  .title-small { font-size: 54px; }
  .title-big { font-size: 116px; }
  .title-tag { font-size: 18px; }

  /* how it works: two balanced columns, no gaps under short cards */
  .screen-how .page-head { max-width: 1180px; margin: 0 auto; }
  .how { display: block; columns: 2; column-gap: 16px; max-width: 1180px; margin: 0 auto; padding: 0 20px 20px; }
  .how > * { break-inside: avoid; margin-bottom: 12px; }
  .how-members { grid-template-columns: 1fr 1fr; }
  .how-actions { column-span: all; }

  /* pool, listing, ranking: pool on the left, work on the right */
  .sel-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: 'pool work' 'pool foot' 'pool resume'; grid-template-rows: auto auto 1fr; align-items: start; gap: 12px 16px; padding: 0 16px 16px; }
  .sel-layout > .resume-panel {
    display: block; position: sticky; top: 8px; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px 8px 12px;
    border: 8px solid transparent; border-image: var(--frame-paper) 8 fill / 8px stretch; background-color: var(--c-paper);
  }
  .sel-layout > .work-panel, .sel-layout > .pool-panel { padding: 0; }
  .sel-layout.is-ranking > .pool-panel { display: block; }
  .sel-layout > .pool-panel { position: sticky; top: 0; max-height: 100dvh; overflow-y: auto; padding: 8px 6px 12px 0; scrollbar-color: var(--c-dusk) var(--c-ink); }
  .sel-layout > .sel-foot { position: static; padding: 0; background: none; }
  .sel-head .sel-help { max-width: 80ch; }

  /* committee room: art at 3x, all eight in a row above a centered docket */
  .room-bg, .room-pools { width: 648px; height: 1152px; background-size: 648px 1152px; }
  .screen-room::after { top: 1152px; }
  .pool.p1 { left: 120px; top: 500px; }
  .pool.p2 { left: 330px; top: 500px; }
  .room-ui { max-width: 900px; margin: 0 auto; padding: 16px 16px 180px; }
  .room-floor { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .room-floor > .docket { grid-row: 3; grid-column: 1 / -1; width: 100%; max-width: 720px; justify-self: center; }
  .room-floor > .vote-legend { grid-row: 2; }

  /* rest of 25: locked seeds beside the list */
  .rest-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; padding: 0 16px; gap: 16px; }
  .rest-locked { order: 0; position: sticky; top: 8px; }
  .locked-list { grid-template-columns: 1fr; }
  .rest-foot { max-width: 1100px; margin: 0 auto; padding: 12px 16px calc(12px + var(--safe-bottom)); }

  /* blind showdown: side by side */
  .blind-grid { grid-template-columns: 1fr 1fr; padding: 0 16px; max-width: 1100px; margin: 0 auto; gap: 16px; }
  .blind-games { grid-template-columns: 1fr; }
  .blind-result { max-width: 720px; margin: 0 auto; padding: 16px; }

  /* broadcast: the TV in the middle, the field and the bold calls beside it */
  .screen-broadcast { display: grid; grid-template-columns: 432px minmax(0, 340px); grid-template-areas: 'tv calls'; justify-content: center; gap: 0 20px; padding: 0 12px; }
  .tv { grid-area: tv; position: relative; width: 432px; min-height: 768px; overflow: hidden; box-shadow: 0 0 0 4px var(--c-navy), 0 0 0 8px var(--c-ink); }
  .tv .booth-bg { left: 0; transform: none; }
  .tv .crt { height: 100%; }
  .bc-side { display: block; align-self: start; margin-top: 20px; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .bc-right { grid-area: calls; }
  .bc-calls { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
  .bc-calls li { padding: 6px 8px; font-weight: 700; font-size: 14px; color: var(--c-glow); background: var(--c-ink); box-shadow: inset 4px 0 0 var(--c-broadcast-red); }
  .bc-outrage { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
  .bc-outrage .display { font-size: 44px; color: var(--c-signal-red); }
  .bc-meter { display: none; grid-template-columns: repeat(20, 1fr); gap: 3px; margin-top: 6px; }
  .bc-meter i { height: 22px; background: var(--c-charcoal); }
  .bc-meter i.glow { background: var(--c-glow); }
  .bc-meter i.amber { background: var(--c-amber); }
  .bc-meter i.red { background: var(--c-signal-red); }
  .bc-field { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
  .bc-field li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; background: var(--c-navy); padding-right: 4px; }
  .bc-field li span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bc-field .display { display: grid; place-items: center; height: 26px; font-size: 20px; color: var(--c-ink); background: var(--c-amber); }
  .bc-field li.bye .display { background: var(--c-accent-green); }
  .bc-auto { font-size: 10px; padding: 1px 3px; color: var(--c-ink); background: var(--c-amber); }
  .bc-left { display: none; }
  .ticker { max-width: none; }

  /* results: the card at 2x when it fits */
  .results-grid { padding: 0 16px 24px; gap: 8px; max-width: 1180px; margin: 0 auto; }
  .share-panel { gap: 16px; padding-top: 16px; }
  .share-side { padding: 0; }
  .share-actions .pbtn-big { font-size: 28px; }

  /* compare and the chart: centered */
  .compare { max-width: 760px; margin: 0 auto; }
  .screen-compare .page-head, .screen-compare .page-actions { max-width: 760px; margin: 0 auto; }
  .screen-chart .bump-card { width: fit-content; margin: 0 auto; }
  .screen-chart .bump-controls, .screen-chart .page-actions, .screen-chart .page-head { max-width: min(1640px, calc(100vw - 32px)); margin-left: auto; margin-right: auto; }
}

@media (min-width: 760px) {
  .share-img { width: 720px; height: 900px; }
}

/* ======================= desktop ======================= */
@media (min-width: 1100px) {
  .page-head { max-width: 1480px; margin: 0 auto; padding: 20px 80px 10px 24px; }

  /* pool, work area, persistent resume panel */
  .sel-layout { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(340px, 400px); grid-template-areas: 'pool work resume' 'pool foot resume'; grid-template-rows: auto 1fr; max-width: 1480px; margin: 0 auto; padding: 0 24px 24px; gap: 12px 20px; }
  .sel-layout > .work-panel { max-width: 640px; width: 100%; justify-self: center; }
  .sel-layout > .sel-foot { max-width: 640px; width: 100%; justify-self: center; }
  .slots { grid-template-columns: 1fr 1fr 1fr; }

  /* committee room: art at 4x; four members each side of the centered docket, faces at 2x */
  .room-bg, .room-pools { width: 864px; height: 1536px; background-size: 864px 1536px; }
  .screen-room::after { top: 1536px; }
  .pool.p1 { left: 170px; top: 660px; width: 384px; height: 384px; background-size: 384px 384px; }
  .pool.p2 { left: 430px; top: 660px; width: 384px; height: 384px; background-size: 384px 384px; }
  .room-ui { max-width: 1440px; padding: 16px 24px 190px; }
  .room-head { max-width: 1100px; margin: 0 auto; }
  .room-floor { grid-template-columns: auto minmax(0, 700px) auto; grid-template-areas: 'left docket right' 'legend docket .'; grid-template-rows: auto 1fr; justify-content: center; align-items: start; gap: 24px; }
  .room-floor > .vote-legend { grid-area: legend; grid-row: auto; grid-column: auto; margin: -12px auto 0; }
  .room-floor > .table { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 12px; align-content: start; padding-top: 10px; }
  .room-floor > .table-left { grid-area: left; }
  .room-floor > .table-right { grid-area: right; }
  .room-floor > .docket { grid-area: docket; grid-row: auto; grid-column: auto; max-width: none; margin-top: 0; }
  .member-name { font-size: 22px; }
  .member-recused { font-size: 12px; }
  .speech { bottom: calc(16px + var(--safe-bottom)); }

  /* rest of 25: locked, list, resume */
  .rest-layout { grid-template-columns: minmax(260px, 320px) minmax(0, 560px) minmax(340px, 400px); justify-content: center; max-width: 1480px; margin: 0 auto; padding: 0 24px; gap: 20px; }
  .rest-layout > .resume-panel {
    display: block; position: sticky; top: 8px; max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px 8px 12px;
    border: 8px solid transparent; border-image: var(--frame-paper) 8 fill / 8px stretch; background-color: var(--c-paper);
  }
  .rest-foot { max-width: 560px; }

  /* showdown */
  .blind-grid { max-width: 1240px; gap: 32px; padding-top: 8px; }
  .blind-card { padding: 8px 12px 12px; }
  .blind-name { font-size: 60px; }
  .blind-v { font-size: 52px; }
  .blind-l { font-size: 13px; }
  .blind-games { grid-template-columns: 1fr; gap: 3px; font-size: 19px; }
  .blind-games li { padding: 6px 10px; }

  /* broadcast: the booth as the hero (broadcast.js heroLayout picks the scale), the question and the answers beneath
     it at its full width, the field and the bold calls in side panels that take the rest of the screen */
  .screen-broadcast { grid-template-columns: 300px 432px 340px; grid-template-areas: 'field tv calls'; gap: 0 24px; }
  .screen-broadcast.bc-hero { grid-template-columns: minmax(300px, 1fr) var(--hero-w) minmax(300px, 1fr); justify-content: stretch; padding: 0 24px; min-height: 100dvh; }
  .bc-hero .tv { width: var(--hero-w); min-height: 0; padding-bottom: 54px; background: var(--c-night); box-shadow: 0 0 0 4px var(--c-navy), 0 0 0 8px var(--c-ink); }
  .bc-hero .tv .booth-bg { width: var(--hero-w); height: var(--hero-h); background-size: var(--hero-bg); background-position: 0 var(--hero-top); }
  .bc-hero .tv .crt { height: var(--hero-h); }
  .bc-hero .hosts { padding-top: var(--hosts-top); gap: 8px; }
  .bc-hero .host-plate { font-size: 22px; bottom: 18px; }
  .bc-hero .bug { top: 14px; left: 14px; }
  .bc-hero .bug-name, .bc-hero .bug-live { font-size: 24px; }
  .bc-hero .lower-third { margin: 16px 12px 0; }
  .bc-hero .lt-tab { font-size: 34px; padding: 0 12px; }
  .bc-hero .lt-name { font-size: 26px; }
  .bc-hero .lt-text { font-size: 18px; min-height: 3.2em; }
  .bc-hero .choices { margin: 12px 12px 0; gap: 8px; }
  .bc-hero .choice { font-size: 17px; min-height: 52px; }
  .bc-hero .after { padding: 12px 12px 20px; }
  .bc-hero .bc-side { align-self: stretch; display: flex; flex-direction: column; margin: 24px 0 60px; max-height: none; padding: 8px 12px 12px; }
  .bc-hero .bc-field { flex: 1; grid-auto-rows: minmax(32px, 1fr); max-height: 720px; }
  .bc-hero .bc-field li { height: auto; }
  .bc-hero .bc-outrage { margin-top: auto; padding-top: 12px; }
  .bc-hero .bc-meter { display: grid; }
  .bc-hero .bc-field li { grid-template-columns: 32px minmax(0, 1fr) auto; font-size: 17px; gap: 10px; }
  .bc-hero .bc-field .display { height: 32px; font-size: 24px; }
  .bc-hero .bc-auto { font-size: 12px; padding: 2px 5px; }
  .bc-hero .bc-calls li { font-size: 16px; padding: 8px 10px; }
  .bc-hero .bc-outrage .display { font-size: 56px; }
  .bc-hero .auto-legend { font-size: 13px; }
  .bid-inner { width: min(100%, 600px); }
  .bid-line { font-size: 40px; }
  .bid-out { font-size: 36px; }
  .bc-left { display: block; grid-area: field; }
  .bc-right { width: auto; }
  .tv { justify-self: center; }

  /* results: card large with the buttons beside it; then outrage and bracket beside the top 25 */
  .results-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1320px; gap: 12px 24px; }
  .share-panel { grid-column: 1 / -1; grid-template-columns: 720px minmax(0, 1fr); align-items: start; }
  .share-panel > .card-frame { grid-column: 1; grid-row: 1; }
  .share-panel > .share-side { grid-column: 2; grid-row: 1; }
  .side-meter { display: block; }
  .res-outrage .meter { display: none; }
  .share-side { gap: 12px; padding-top: 8px; }
  .share-actions { grid-template-columns: 1fr 1fr; }
  .res-outrage, .res-bracket { grid-column: 1; }
  .res-top25 { grid-column: 2; grid-row: 2 / span 3; }
  .follow { grid-column: 1 / -1; }
  .bracket { grid-template-columns: 1fr 1fr; }
}

/* Room on desktop: the legend sits under the left table; grid-area alone places the card (no row reset). */
@media (min-width: 1100px) {
  .room-floor > .docket { grid-area: docket; }
  .room-floor > .vote-legend { grid-area: legend; }
}

/* ======================= desktop: title ======================= */
/* The title art stands beside the title and actions instead of a narrow strip down the middle: 3x, or 4x on big
   screens, cropped by the window height, framed like the Pure Sports Channel TV. */
@media (min-width: 1100px) {
  .screen-title { display: grid; grid-template-columns: 648px minmax(440px, 600px); justify-content: center; column-gap: 64px; min-height: 100dvh; overflow: visible; }
  .screen-title::after { display: none; }
  .screen-title .title-bg { position: sticky; top: 0; left: auto; transform: none; width: 648px; height: 100dvh; background-size: 648px 1152px; background-position: 50% 0; box-shadow: 4px 0 0 var(--c-navy), -4px 0 0 var(--c-navy); }
  .title-wrap { max-width: none; margin: 0; padding: 72px 0 24px; min-height: 100dvh; justify-content: center; gap: 28px; }
  .title-logo { text-align: left; }
  .title-small { font-size: 60px; }
  .title-big { font-size: 128px; }
  .title-tag { margin-left: 4px; font-size: 22px; padding: 6px 14px; }
  .title-actions { margin-top: 0; justify-items: start; padding: 18px 0; background: none; }
  .title-cta { max-width: 420px; font-size: 32px; }
  .title-week { font-size: 22px; }
  .title-links { gap: 28px; }
  .title-foot { margin-top: 0; text-align: left; background: none; font-size: 13px; padding: 12px 0 0; }
}
@media (min-width: 1700px) and (min-height: 1000px) {
  .screen-title { grid-template-columns: 864px minmax(480px, 680px); column-gap: 80px; }
  .screen-title .title-bg { width: 864px; background-size: 864px 1536px; }
  .title-small { font-size: 72px; }
  .title-big { font-size: 156px; }
}

/* ======================= wide desktop (1600 px and up) ======================= */
@media (min-width: 1600px) {
  .page-head { max-width: 1800px; }
  /* how it works: three columns */
  .screen-how .page-head, .how { max-width: 1760px; }
  .how { columns: 3; }
  /* pool and rest of 25: wider lists and stats panel */
  .sel-layout { max-width: 1800px; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr) minmax(420px, 500px); gap: 16px 28px; }
  .sel-layout > .work-panel, .sel-layout > .sel-foot { max-width: 760px; }
  .rest-layout { max-width: 1800px; grid-template-columns: minmax(320px, 400px) minmax(0, 700px) minmax(420px, 500px); gap: 28px; }
  .rest-foot { max-width: 700px; }
  /* blind showdown: bigger cards */
  .blind-grid { max-width: 1640px; gap: 48px; }
  .blind-games { font-size: 22px; }
  /* committee room: a wider card between the members */
  .room-floor { grid-template-columns: auto minmax(0, 860px) auto; }
  .room-ui { max-width: 1840px; }
  .room-head { max-width: 1400px; }
  .member-name { font-size: 26px; }
  /* results: the card, the share buttons, and the top 25 in three columns */
  .results-grid { grid-template-columns: 720px minmax(380px, 1fr) minmax(400px, 480px); max-width: 1800px; gap: 12px 32px; }
  .share-panel { grid-column: 1 / 3; }
  .res-top25 { grid-column: 3; grid-row: 1 / span 3; padding-top: 16px; }
  .res-outrage, .res-bracket { grid-column: 1 / 3; }
  .follow { grid-column: 1 / -1; }
  .bracket { grid-template-columns: repeat(4, 1fr); }
  .bid-inner { width: min(100%, 760px); }
  .field-mini { font-size: 18px; }
}

/* Big screens: the room art at 5x behind the members and the card. */
@media (min-width: 1700px) and (min-height: 1000px) {
  .room-bg, .room-pools { width: 1080px; height: 1920px; background-size: 1080px 1920px; }
  .screen-room::after { top: 1920px; }
  .pool.p1 { left: 212px; top: 825px; width: 480px; height: 480px; background-size: 480px 480px; }
  .pool.p2 { left: 538px; top: 825px; width: 480px; height: 480px; background-size: 480px 480px; }
}

/* You vs. the Committee: the summary beside the two fields on tablets and desktops */
@media (min-width: 700px) {
  .reveal-body, .compare-versus { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; padding: 0 20px 16px; max-width: 1240px; margin: 0 auto; }
  .screen-reveal .page-head, .reveal-actions { max-width: 1240px; margin: 0 auto; }
  .vs-item { font-size: 16px; padding: 5px 8px 5px 0; grid-template-columns: 34px minmax(0, 1fr); }
  .vs-seed { font-size: 26px; }
  .vs-note { font-size: 12px; }
}
@media (min-width: 1100px) {
  .reveal-body, .compare-versus { max-width: 1480px; gap: 32px; }
  .screen-reveal .page-head, .reveal-actions { max-width: 1480px; }
  .vs-headline { font-size: 40px; }
  .vs-lead-line { font-size: 32px; }
  .score-num { font-size: 120px; }
  .vs-item { font-size: 19px; }
  .vs-col-title { font-size: 28px; }
  .reveal-actions .pbtn { max-width: 520px; }
}
@media (min-width: 1600px) {
  .reveal-body, .compare-versus, .screen-reveal .page-head, .reveal-actions { max-width: 1760px; }
  .vs-item { font-size: 22px; padding: 7px 10px 7px 0; }
}
@media (min-width: 700px) {
  .screen-compare.compare-wide .page-head, .screen-compare.compare-wide .page-actions { max-width: 1240px; }
}
@media (min-width: 1100px) {
  .screen-compare.compare-wide .page-head, .screen-compare.compare-wide .page-actions { max-width: 1480px; }
}

/* The pending comparison on desktop: the countdown beside the locked ballot, the ballot in two columns. */
@media (min-width: 1100px) {
  .compare.compare-pending { max-width: 1240px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 24px; }
  .screen-compare:has(.compare-pending) .page-head, .screen-compare:has(.compare-pending) .page-actions { max-width: 1240px; }
  .compare-pending .pending-ballot .sec-title { margin-top: 0; }
  .compare-pending .final-list.compact { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(13, auto); grid-auto-flow: column; column-gap: 12px; }
}