/* ============================================================
   THE TOURNAMENT TV (NORTH_STAR §9.9, T1b §2.10, T5 §2.10)
   1920×1080, Night, never scrolls. The screen, its top strip, the QR block and the call
   band are the event wall's (t3.css); this sheet adds the board on the left 1280px, the
   Tables column on the right 640px, and the Crown. The row and card heights here are the
   ones TournamentTvQuery and TvHelper fit pages to: change one, change both.
   ============================================================ */

/* ---------- The board: pages of up to three columns, crossfading every 15s ---------- */
.tv-board { position: relative; min-width: 0; overflow: hidden; }
.tvb-page {
  position: absolute; top: 40px; left: 48px; right: 48px; bottom: 184px;
  display: grid; grid-template-columns: repeat(3, 368px); gap: 40px; align-content: start;
  opacity: 0; transition: opacity 400ms linear; pointer-events: none;
}
.tvb-page.is-on { opacity: 1; }
.tvb-page--standings { grid-template-columns: 712px 432px; }
.tvb-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; max-height: 760px; overflow: hidden; }
.tvb-col > .tv-col__head { height: 28px; margin: 0; flex: none; }
@media (prefers-reduced-motion: reduce) { .tvb-page, .tvt-page { transition: none; } }

/* the road from the semifinals on (A42 §7): nothing pages. Cards sit by their centres
   (TvHelper#tv_road places them), joined by 2px line-strong connectors; the called final
   is the hero, its rows 88px and its names at TV Headline. */
.tvb-page.tvb-road { display: block; }
.tvb-road__lines { position: absolute; left: 0; top: 0; width: 1184px; height: 760px; overflow: visible; fill: none; stroke: var(--line-strong); stroke-width: 2; }
.tvb-road__head { position: absolute; left: var(--x); top: var(--y); width: 360px; height: 28px; margin: 0; }
.tvb-road__head--on { left: 0; top: auto; bottom: calc(100% + 20px); }
.tvb-road__card { position: absolute; left: var(--x); top: var(--y); width: 360px; transform: translateY(-50%); }
.tvb-road__card > .match { width: 100%; }
.tvb-road__card.is-hero .match__team { min-height: 88px; }
.tvb-road__card.is-hero .match__names { font-size: var(--fs-headline); }

/* the match card at TV density (the page's card; nobody is highlighted on the TV) */
.tv-board .match { flex: none; border-radius: 14px; cursor: default; }
.tv-board .match__head { height: 44px; padding: 0 18px; }
.tv-board .live { font-size: 20px; gap: 10px; }
.tv-board .live-dot { width: 12px; height: 12px; }
.tv-board .match__team { min-height: 76px; padding: 8px 18px; gap: 12px; }
.tv-board .match__seed { width: 28px; }
.tv-board .match__game { width: 40px; font-size: 36px; }
.tv-board .match__w { width: 40px; height: 40px; font-size: 26px; }
.tv-board .match__tag { height: 30px; padding: 0 10px; font-size: 16px; }
.tv-board .match__stakes { padding: 12px 18px 14px; }
.tv-board .match--yours { border-color: var(--line); box-shadow: none; }

/* the standings scene: Monster and Swiss qualifying, round robin, a points race */
.tvs { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tvs th {
  height: 40px; padding: 0 8px; text-align: left; color: var(--ink-2); border-bottom: 1px solid var(--line);
  font-stretch: var(--wdth-plate); font-weight: 700; font-size: var(--fs-plate); line-height: 1;
  letter-spacing: var(--track-plate); text-transform: uppercase; white-space: nowrap;
}
.tvs td { height: 52px; padding: 0 8px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.tvs .tvs__rank { width: 56px; padding-left: 0; }
/* the Plate runs about 17px a letter here ("DIFF" is 67px); each column fits its head */
.tvs .tvs__num { width: 72px; text-align: right; }
.tvs .tvs__num--1 { width: 64px; }
.tvs .tvs__num--4 { width: 88px; }
.tvs .tvs__num--6 { width: 120px; }
/* "MATCH %" and "GAME %": a clear gap between the two heads */
.tvs .tvs__num--7 { width: 152px; }
.tvs td.tvs__rank, .tvs td.tvs__num {
  font-stretch: var(--wdth-live); font-weight: 800; font-size: var(--fs-figure); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.tvs td:nth-child(3) { color: var(--ink); }
.tvs__who {
  font-stretch: var(--wdth-name); font-weight: 700; font-size: var(--fs-name); line-height: 1.2;
  text-overflow: ellipsis;
}
.tvs tr.is-out .tvs__who { color: var(--ink-2); font-weight: 500; }
.tvs tr.is-advancing td.tvs__rank { color: var(--ink); }

/* before there's anything to draw */
.tvb-empty { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; padding-top: 120px; max-width: 900px; }
.tvb-empty__head { font-stretch: var(--wdth-name); font-weight: 800; font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.01em; }
.tvb-empty__line { color: var(--ink-2); font-weight: 500; font-size: var(--fs-meta); line-height: 1.35; }

/* ---------- The side: the Tables column (or Up now and Up next) over the QR ---------- */
.tv-side {
  border-left: 1px solid var(--line); padding: 24px 48px 184px; min-width: 0;
  display: flex; flex-direction: column; gap: 24px;
}
.tv-side__main { position: relative; flex: none; height: 512px; overflow: hidden; }
.tv-side .tv-qr { flex: none; height: 240px; }
/* a tournament's address (foos-app.com/t/3670) is longer than the 280px beside the code:
   it breaks at its first slash, never inside a word */
.tv-side .tv-qr__url { white-space: normal; }
.tv-qr__url > span { white-space: nowrap; }
.tvt-page { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms linear; }
.tvt-page.is-on { opacity: 1; }
.tvt-page > .tv-col__head, .tv-side__main .tv-col__head { height: 28px; margin: 0 0 4px; }
.tvt-list { display: flex; flex-direction: column; }

.tvt {
  box-sizing: border-box; height: 152px; padding: 6px 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line);
}
.tvt:first-child { border-top: 1px solid var(--line); }
.tvt--tag { height: 182px; }
.tvt--in_use { height: 92px; }
.tvt--open, .tvt--off { height: 56px; justify-content: center; padding: 0; }
.tvt--one { height: 104px; }
.tvt--one.tvt--tag { height: 136px; }
.tvt--one .tvt__who { flex-direction: row; gap: 12px; }
.tvt--one .tvt__team { flex: none; }
.tvt__head { display: flex; align-items: center; gap: 20px; height: 44px; flex: none; }
.tvt__n {
  flex: none; font-stretch: var(--wdth-live); font-weight: 700; font-size: 44px; line-height: 1;
  text-transform: uppercase; white-space: nowrap;
}
.tvt--called .tvt__n {
  color: var(--field-ink); background: var(--field); border-radius: var(--radius-plate);
  padding: 6px 12px 4px; margin-left: -12px;
}
.tvt__state {
  margin-left: auto; display: flex; align-items: center; gap: 20px; white-space: nowrap; color: var(--ink-2);
  font-stretch: var(--wdth-plate); font-weight: 700; font-size: 20px; line-height: 1;
  letter-spacing: var(--track-plate); text-transform: uppercase;
}
.tvt__state .live { font-size: 20px; gap: 10px; }
.tvt__state .live-dot { width: 12px; height: 12px; }
.tvt__state b {
  font-stretch: var(--wdth-live); font-weight: 800; font-size: 44px; letter-spacing: 0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.tvt--overdue .tvt__state { color: var(--ink); }
.tvt__who, .tvu__who { display: flex; flex-direction: column; min-width: 0; }
.tvt__team {
  font-stretch: var(--wdth-name); font-weight: 700; font-size: var(--fs-name); line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvt__team .vs { color: var(--ink-2); font-weight: 500; }
.tvt__tag, .tvu__meta {
  color: var(--ink-2); font-weight: 500; font-size: var(--fs-meta); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tvt--overdue .tvt__tag { color: var(--ink); }
.tvt--in_use .tvt__tag { font-weight: 600; }

.tvu { display: flex; flex-direction: column; }
.tv-side__main .tvu__head--gap { margin-top: 24px; }
.tvu__row {
  box-sizing: border-box; height: 130px; padding: 6px 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--line);
}
.tvu__row:first-child { border-top: 1px solid var(--line); }
.tvu__row--now { height: 160px; }
.tvu .tv-up__empty { margin-top: 4px; }

/* ---------- The champions ---------- */
/* settled, in the side column beside the final board */
.tv-side .tv-champ {
  margin: 0; height: 100%; box-sizing: border-box; padding: 32px 32px 40px; border-radius: 16px;
  position: relative; display: flex; flex-direction: column; justify-content: center;
}
.tv-champ .champ__plate { font-size: 20px; }
.tv-champ .champ__meta { margin-top: 8px; font-size: 24px; line-height: 1.3; }
/* the call is an h1: the screen's reset clears p, not its 0.67em default */
.tv-champ .champ__call { margin: 20px 0 0; font-size: 96px; line-height: 0.9; }
/* the plate's two-line clamp is a -webkit-box, which text-align can't centre: on the TV a
   plain block clipped at two lines */
.tv-side .champ__names, .tv-crown .champ__names { display: block; max-height: 2.2em; }
.tv-crown .champ__names { margin-left: auto; margin-right: auto; text-align: center; }
/* the names in Display at the TV's 72px: what the room reads from across it */
.tv-champ .champ__names { margin-top: 8px; max-width: none; font-size: 72px; line-height: 1.05; }
.tv-champ .champ__path, .tv-champ .champ__pot { font-size: 24px; line-height: 1.3; }
.tv-champ .champ__path { margin-top: 12px; }

/* the Crown: the whole screen for 20 seconds */
.tv-crown-host { position: absolute; inset: 0; z-index: 6; }
.tv-crown-host[hidden] { display: none; }
.tv-crown {
  position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 120px 120px; text-align: center;
}
.tv-crown .champ__plate { font-size: 20px; }
.tv-crown .champ__meta { margin-top: 10px; font-size: 24px; }
.tv-crown .champ__call { margin: 28px 0 0; }
.tv-crown .champ__names { max-width: none; margin-top: 20px; }
.tv-crown .champ__path, .tv-crown .champ__pot { font-size: 24px; }
.tv-crown .champ__path { margin-top: 24px; }
.tv-crown .crown__bead { width: 24px; height: 24px; margin: -12px 0 0 -12px; }