/* Warehouse TV. Fixed 1920x1080 stage scaled by js/tv.js. Always dark. Reads tokens only. */
html, body { height: 100%; overflow: hidden; background: var(--c-bg); cursor: none; }
.stage {
  position: absolute; left: 50%; top: 50%; width: var(--tv-stage-w); height: var(--tv-stage-h); transform-origin: center;
  padding: var(--tv-margin-y) var(--tv-margin-x);
  display: grid; row-gap: var(--tv-gap); grid-template-rows: var(--tv-header-h) 1fr var(--tv-strip-h) var(--tv-footer-h);
  background: var(--bg-texture), var(--c-bg); color: var(--c-ink); overflow: hidden;
}
.stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--stripe-h);
  background: repeating-linear-gradient(-45deg, var(--c-stripe-a) 0 18px, var(--c-stripe-b) 18px 36px); }

/* header */
.head { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; }
.head .logo { height: var(--tv-logo-h); }
.head .logo img { height: calc(var(--tv-logo-h) - var(--space-2)); }
.head .wordmark { font-size: var(--tv-fs-title); border-left: var(--space-1) solid var(--c-rule-2); padding-left: var(--space-3); }
.title { text-align: center; line-height: 1; min-width: 0; }
.title .contest { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--tv-fs-contest);
  text-transform: uppercase; letter-spacing: var(--ls-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title .sub { display: block; margin-top: var(--space-2); font-size: var(--tv-fs-meta); font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.count { justify-self: end; display: grid; justify-items: end; line-height: 1.05; }
.count .lab { font-size: var(--tv-fs-meta); font-weight: 600; letter-spacing: .12em; color: var(--c-muted); }
.count .val { font-size: var(--tv-fs-countdown); }
.count.soon .val { color: var(--c-accent-text); }   /* under 24 h */

/* More than 18 teams: 10 rows per column (19-20 teams, "dense") or 11-12 rows (21-24, "tight"). Rows get shorter (see .stand / .row height)
 * and the type steps down so a name still fits its row. js/tv.js sets data-density on <html>; fit.js reads these tokens. */
:root[data-density="dense"] { --tv-fs-team: 48px; --tv-fs-team-min: 40px; --tv-fs-score: 54px; --tv-fs-rank: 46px; --tv-fs-rank-prefix: 28px; --tv-fs-chip: 34px; }
:root[data-density="tight"] { --tv-fs-team: 40px; --tv-fs-team-min: 34px; --tv-fs-score: 44px; --tv-fs-rank: 38px; --tv-fs-rank-prefix: 28px; --tv-fs-chip: 28px; }

/* standings: grid of 2 columns, filled column by column */
.stand { position: relative; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--tv-rows, 9), min(var(--tv-row-h), calc((var(--tv-stand-h) - (var(--tv-rows, 9) - 1) * var(--tv-row-gap)) / var(--tv-rows, 9))));
  grid-template-columns: repeat(2, var(--tv-col-w)); column-gap: var(--tv-col-gap); row-gap: var(--tv-row-gap); align-content: start; min-height: 0; }
.row { position: relative; display: grid; align-items: center; height: min(var(--tv-row-h), calc((var(--tv-stand-h) - (var(--tv-rows, 9) - 1) * var(--tv-row-gap)) / var(--tv-rows, 9)));
  grid-template-columns: var(--tv-rank-w) var(--tv-stripe-w) var(--tv-name-w) var(--tv-chip-w) var(--tv-score-w);
  background: var(--c-surface); border: var(--panel-border); border-radius: var(--radius-tv); overflow: hidden; }
.row .rk { height: 100%; display: flex; align-items: baseline; justify-content: center; padding-top: 0; align-self: stretch;
  align-items: center; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--tv-fs-rank); line-height: 1; color: var(--c-muted); }
.row .rk .t { font-size: var(--tv-fs-rank-prefix); margin-right: var(--space-1); }
.row.first { border-color: var(--c-accent); }
.row.first .rk { background: var(--c-accent); color: var(--c-on-accent); }
.row .sw { height: 100%; transition: width var(--dur-fade) var(--ease); }
.row.glow .sw { transform: scaleX(1.6); transform-origin: left; }
.row .nm { padding-left: var(--tv-name-pad); font-family: var(--font-name); font-weight: var(--fw-name); line-height: 1;
  white-space: nowrap; overflow: hidden; min-width: 0; }
.row .nm span { display: block; overflow: hidden; text-overflow: ellipsis; }
.row .chipcell { display: flex; justify-content: flex-end; padding-right: var(--space-3); }
.chip { font-size: var(--tv-fs-chip); line-height: 1; color: var(--c-on-accent); background: var(--c-accent);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); opacity: 1; transition: opacity var(--dur-fade) var(--ease); }
.chip.fade { opacity: 0; }
.row .pt { font-size: var(--tv-fs-score); line-height: 1; text-align: right; padding-right: var(--space-5); }
.row.slide { transition: transform var(--dur-slide) var(--ease); }

/* bottom strip */
.strip { display: grid; grid-template-columns: var(--tv-strip-label-w) 1fr; background: var(--c-surface); border: var(--panel-border);
  border-radius: var(--radius-tv); overflow: hidden; min-height: 0; }
.strip .lab { background: var(--c-surface-2); padding: var(--space-4) var(--space-4); display: flex; flex-direction: column; justify-content: space-between;
  border-top: var(--space-1) solid var(--c-rule-1); }
.strip .lab b { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--tv-fs-title); letter-spacing: var(--ls-display); text-transform: uppercase; line-height: .95; }
.strip .lab small { display: block; margin-top: var(--space-1); font-size: var(--tv-fs-meta); font-weight: 500; color: var(--c-muted); line-height: 1.1; }
.dots { display: flex; gap: var(--space-2); }
.dots i { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); border: 2px solid var(--c-muted); }   /* square page dots */
.dots i.on { background: var(--c-ink); border-color: var(--c-ink); }
.scenes { position: relative; min-width: 0; }
.scene { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; opacity: 0; pointer-events: none; transition: opacity var(--dur-scene) var(--ease); }
.scene.on { opacity: 1; }
.cell { padding: var(--space-4) var(--space-5); border-left: 1px dashed var(--c-line); display: grid; align-content: center; gap: var(--space-1); min-width: 0; }
.cell:first-child { border-left: 0; }
.cell .l1 { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; overflow: hidden; min-width: 0; }
.cell .l1 .sw { flex: none; width: var(--space-3); height: var(--space-7); }
.cell .l1 .tm { font-family: var(--font-name); font-weight: var(--fw-name); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cell .l1 .plus { font-size: var(--tv-fs-strip-item); color: var(--c-accent-text); flex: none; }
.cell .l1 .rkx { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--tv-fs-strip-item); color: var(--c-muted); flex: none; }
.cell .l2 { line-height: 1.25; font-size: var(--tv-fs-meta); font-weight: 500; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner { grid-column: 1 / -1; display: grid; align-content: center; padding: var(--space-4) var(--space-5); border-left: var(--space-3) solid var(--team, var(--team-silver)); gap: var(--space-1); min-width: 0; }
.winner .w1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--tv-fs-band); line-height: 1.1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.winner .w2 { line-height: 1.25; font-size: var(--tv-fs-meta); color: var(--c-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-strip { display: flex; align-items: center; padding: 0 var(--space-5); font-size: var(--tv-fs-meta); color: var(--c-muted); }

/* footer */
.foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--tv-fs-meta); font-weight: 500; color: var(--c-muted); }
.foot .note { height: var(--tv-footer-h); padding: 0 var(--space-5) 0 var(--space-4); }
.foot .note svg { width: var(--tv-fs-meta); height: var(--tv-fs-meta); }
.foot .note { transition: opacity var(--dur-fade) var(--ease); }
.live { display: flex; align-items: center; gap: var(--space-3); }
.live i { width: var(--space-4); height: var(--space-4); border-radius: var(--radius-pill); background: var(--c-good); }
.live.reconnecting i { background: transparent; border: 2px solid var(--c-muted); }
.live.hidden { visibility: hidden; }

/* full-stage messages (loading, between contests, calm error) */
.message { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: var(--space-5);
  background: var(--bg-texture), var(--c-bg); text-align: center; padding: var(--space-8); }
.message .logo { height: var(--tv-logo-h); } .message .logo img { height: calc(var(--tv-logo-h) - var(--space-2)); }
.message .wordmark { font-size: var(--tv-fs-title); }
.message h1 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); font-size: var(--tv-fs-band); text-transform: uppercase; line-height: 1.05; }
.message p { margin: 0; font-size: var(--tv-fs-meta); color: var(--c-muted); }

/* new-leader band (once per 10 minutes; reduced motion = appears without sliding) */
.band { position: absolute; left: 0; right: 0; top: 50%; z-index: 3; transform: translateY(-50%); padding: var(--space-5) var(--tv-margin-x);
  background: var(--team, var(--c-accent)); color: var(--on-team); text-align: center; font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--tv-fs-band); text-transform: uppercase; letter-spacing: var(--ls-display); transition: opacity var(--dur-fade) var(--ease); }