/* =====================================================================================================
   A7 (ADR-066): the match-day television shows -- broadcast graphics over the studio (TvShowScene.ts).
   The game's light, sharp system adapted to television: white plates, ink straps, Barlow Condensed for
   names and numbers, Barlow for the spoken line, no radius. The programme brings one accent (--tv-accent)
   as a stripe and a rule; the clubs bring their crests and kit colours; blue stays for selection.
   Sized in the finale's unit --u (a hundredth of a 16:9 width). No letterbox: this is live television.
   ===================================================================================================== */
.finale.is-tv { --tv-accent: #c8102e; --tv-ink: #10151f; background: #05070b; }
.finale.is-tv::before, .finale.is-tv::after { display: none; }
.finale.is-tv { cursor: pointer; }
.tvs { position: absolute; inset: 0; font-family: var(--font-ui, Barlow, Arial, sans-serif); color: var(--ink-900); }

/* the channel's bug top left, the match's top right */
.tvs-top { position: absolute; left: calc(var(--u) * 2.2); right: calc(var(--u) * 2.2); top: calc(var(--u) * 1.8); display: flex; justify-content: space-between; align-items: flex-start; }
.tvs-channel { display: flex; align-items: stretch; box-shadow: var(--shadow-1); animation: tvs-in 520ms var(--ease-out) both; }
.tvs-channel b { background: var(--tv-ink); color: #fff; padding: calc(var(--u) * .45) calc(var(--u) * .9); font: 700 max(11px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .14em; }
.tvs-channel span { background: #fff; padding: calc(var(--u) * .45) calc(var(--u) * .9); border-left: calc(var(--u) * .35) solid var(--tv-accent);
  font: 700 max(11px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-700); }
.tvs-bug { display: flex; align-items: stretch; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); box-shadow: var(--shadow-1); animation: tvs-in 620ms var(--ease-out) both; }
.tvs-bug b { background: var(--tv-accent); color: #fff; padding: calc(var(--u) * .45) calc(var(--u) * .8); font: 700 max(10px, calc(var(--u) * .95)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.tvs-bug span { display: flex; align-items: center; gap: calc(var(--u) * .5); padding: 0 calc(var(--u) * .8); font: 600 max(11px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.tvs-bug em { font-style: normal; color: var(--ink-300); }
.tvs-bug > i { font-style: normal; display: flex; align-items: center; padding: 0 calc(var(--u) * .8); background: var(--ink-900); color: #fff;
  font: 700 max(10px, calc(var(--u) * .9)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
/* a European Super Cup night: the cup's own teal and silver on the bug, never the league's (the user, 7 October 2026) */
.tvs-bug.is-cup > i { background: var(--cup-teal, #0f5c63); color: var(--cup-silver, #c9d1d6); }
.tvs-bug.is-cup b { background: var(--cup-teal, #0f5c63); }

/* crests (the brand's SVG) at three sizes */
.tvs-crest { display: inline-grid; place-items: center; flex: none; }
.tvs-crest svg { width: 100%; height: 100%; display: block; }
.tvs-crest.is-s { width: max(16px, calc(var(--u) * 1.6)); height: max(16px, calc(var(--u) * 1.6)); }
.tvs-crest.is-m { width: max(26px, calc(var(--u) * 2.6)); height: max(26px, calc(var(--u) * 2.6)); }
.tvs-crest.is-l { width: max(52px, calc(var(--u) * 6.2)); height: max(52px, calc(var(--u) * 6.2)); }
.tvs-crest b { display: grid; place-items: center; width: 100%; height: 100%; background: var(--k1); color: #fff; font: 700 1em var(--font-display); }

/* the lower third: who speaks, and the line */
.tvs-talk { position: absolute; left: calc(var(--u) * 2.4); bottom: calc(var(--u) * 3); width: min(calc(var(--u) * 62), calc(100% - var(--u) * 24)); }
.tvs-talk.is-in .tvs-strap { animation: tvs-slide 420ms var(--ease-out) both; }
.tvs-talk.is-in .tvs-caption { animation: tvs-rise 520ms 90ms var(--ease-out) both; }
.tvs-strap { display: inline-flex; flex-direction: column; box-shadow: var(--shadow-2); }
.tvs-strap-name { position: relative; background: var(--tv-ink); color: #fff; padding: calc(var(--u) * .45) calc(var(--u) * 1.4) calc(var(--u) * .4) calc(var(--u) * 1.6);
  font: 700 max(18px, calc(var(--u) * 2.2)) var(--font-display); letter-spacing: .05em; text-transform: uppercase; line-height: 1; }
.tvs-strap-name::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * .45); background: linear-gradient(180deg, var(--tv-accent) 0 64%, var(--suit) 64% 100%); }
.tvs-strap-line { display: flex; justify-content: space-between; gap: calc(var(--u) * 1.4); background: #fff; padding: calc(var(--u) * .3) calc(var(--u) * 1) calc(var(--u) * .3) calc(var(--u) * 1.6);
  font: 600 max(11px, calc(var(--u) * 1.0)) var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.tvs-strap-line i { font-style: normal; color: var(--ink-300); }
.tvs-caption { margin: calc(var(--u) * .7) 0 0; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); padding: calc(var(--u) * 1) calc(var(--u) * 1.4);
  font: 500 max(14px, calc(var(--u) * 1.55)) / 1.35 var(--font-ui, Barlow, sans-serif); color: var(--ink-900); box-shadow: var(--shadow-1); border-left: calc(var(--u) * .3) solid var(--tv-accent); }
.has-board .tvs-talk { bottom: calc(var(--u) * 2); }
.has-board .tvs-caption { font-size: max(13px, calc(var(--u) * 1.3)); }

/* boards: full-screen graphics above the lower third; cards: beside the speaker on the right */
.tvs-gfx-host { position: absolute; inset: 0; pointer-events: none; }
.tvs-gfx { position: absolute; background: rgba(255,255,255,.95); backdrop-filter: blur(18px); box-shadow: var(--shadow-2); animation: tvs-rise 340ms var(--ease-out) both; }
.tvs-gfx.is-board { left: 50%; top: calc(var(--u) * 9); transform: translateX(-50%); width: min(calc(var(--u) * 74), 92%); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); }
.tvs-gfx.is-card { right: calc(var(--u) * 2.4); bottom: calc(var(--u) * 3); width: calc(var(--u) * 26); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); border-top: calc(var(--u) * .35) solid var(--k1, var(--tv-accent)); }
.tvs-head { display: flex; flex-direction: column; margin-bottom: calc(var(--u) * 1); }
.tvs-head span { font: 700 max(10px, calc(var(--u) * .9)) var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--tv-accent); }
.tvs-head b { font: 700 max(20px, calc(var(--u) * 2.6)) var(--font-display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }

/* the ident */
.tvs-title.is-board { top: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(255,255,255,.92); border-bottom: calc(var(--u) * .45) solid var(--tv-accent); }
.tvs-ident-crests { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 2.4); margin-bottom: calc(var(--u) * 1); }
.tvs-ident-crests i { width: calc(var(--u) * .25); height: calc(var(--u) * 4); background: var(--ink-300); transform: skewX(-14deg); }
.tvs-ident-kicker { font: 700 max(11px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--tv-accent); }
.tvs-ident h1 { margin: calc(var(--u) * .4) 0; font: 700 max(30px, calc(var(--u) * 4.6)) var(--font-display); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.tvs-ident p { margin: 0; font: 500 max(13px, calc(var(--u) * 1.3)) var(--font-ui, Barlow, sans-serif); color: var(--ink-500); }

/* line-ups */
.tvs-teams { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); }
.tvs-team-head { display: flex; align-items: center; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .6); border-bottom: calc(var(--u) * .25) solid var(--k1); }
.tvs-team-head b { font: 700 max(15px, calc(var(--u) * 1.7)) var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.tvs-team-head span { margin-left: auto; font: 600 max(11px, calc(var(--u) * 1.05)) var(--font-display); color: var(--ink-500); letter-spacing: .06em; }
.tvs-team ol { list-style: none; margin: calc(var(--u) * .6) 0; padding: 0; display: grid; gap: calc(var(--u) * .25); }
.tvs-team li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * .7); font: 600 max(12px, calc(var(--u) * 1.15)) var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.tvs-team li span { font: 500 max(10px, calc(var(--u) * .95)) var(--font-ui, Barlow, sans-serif); text-transform: none; color: var(--ink-500); }
.tvs-team-boss { font: 600 max(11px, calc(var(--u) * 1)) var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.tvs-team-boss b { color: var(--ink-900); }
.tvs-piece { --size: max(18px, calc(var(--u) * 1.9)); width: var(--size); height: var(--size); }
.tvs-piece.is-l { --size: max(54px, calc(var(--u) * 6)); }

/* form */
.tvs-form { display: grid; gap: calc(var(--u) * 1); }
.tvs-form-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 1); padding: calc(var(--u) * .7) 0; border-bottom: 1px solid var(--surface-ink); }
.tvs-form-row b { font: 700 max(15px, calc(var(--u) * 1.7)) var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.tvs-chips { display: flex; gap: calc(var(--u) * .35); }
.tvs-chips i { display: grid; place-items: center; width: max(22px, calc(var(--u) * 2.4)); height: max(22px, calc(var(--u) * 2.4)); font: 700 max(12px, calc(var(--u) * 1.2)) var(--font-display); font-style: normal; color: #fff; }
.tvs-chips i.is-w { background: var(--ink-900); } .tvs-chips i.is-d { background: var(--ink-300); } .tvs-chips i.is-l { background: #fff; color: var(--ink-700); box-shadow: inset 0 0 0 2px var(--ink-300); }
.tvs-form-key { margin-top: calc(var(--u) * .6); font: 500 max(10px, calc(var(--u) * .95)) var(--font-ui, Barlow, sans-serif); color: var(--ink-500); }

/* the table snippet */
.tvs-table-h, .tvs-table li { display: grid; grid-template-columns: calc(var(--u) * 3) 1fr calc(var(--u) * 6) calc(var(--u) * 6); align-items: center; }
.tvs-table-h { font: 700 max(10px, calc(var(--u) * .9)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); padding-bottom: calc(var(--u) * .4); }
.tvs-table ol { list-style: none; margin: 0; padding: 0; }
.tvs-table li { padding: calc(var(--u) * .5) 0; border-top: 1px solid var(--surface-ink); font: 600 max(13px, calc(var(--u) * 1.35)) var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.tvs-table li.is-on { background: var(--paper-2); box-shadow: inset calc(var(--u) * .35) 0 0 var(--k1); }
.tvs-pts { font-weight: 700; }

/* a person: key player, man of the match */
.tvs-person { display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
.tvs-person b { display: block; font: 700 max(17px, calc(var(--u) * 2)) var(--font-display); text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; }
.tvs-person span { display: block; font: 600 max(11px, calc(var(--u) * 1)) var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-top: calc(var(--u) * .2); }
.tvs-person p { margin: calc(var(--u) * .5) 0 0; font: 500 max(12px, calc(var(--u) * 1.15)) / 1.3 var(--font-ui, Barlow, sans-serif); color: var(--ink-700); }

/* the score */
.tvs-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: calc(var(--u) * .8); text-align: center; }
.tvs-score-side { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); }
.tvs-score-side b { font: 700 max(15px, calc(var(--u) * 1.7)) var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.tvs-score-num { display: flex; align-items: center; gap: calc(var(--u) * 1); font: 700 max(48px, calc(var(--u) * 7)) / .86 var(--font-display); }
.tvs-score-num i { width: calc(var(--u) * 1.2); height: calc(var(--u) * .3); background: var(--ink-300); }
.tvs-scorers { list-style: none; margin: 0; padding: 0; font: 500 max(11px, calc(var(--u) * 1.05)) var(--font-ui, Barlow, sans-serif); color: var(--ink-700); }
.tvs-scorers span { color: var(--ink-500); }

/* stats */
.tvs-stats-h { display: grid; grid-template-columns: auto 1fr 1fr 1fr auto; align-items: center; gap: calc(var(--u) * .8); padding-bottom: calc(var(--u) * .6);
  font: 700 max(13px, calc(var(--u) * 1.3)) var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.tvs-stats-h b:last-of-type { text-align: right; }
.tvs-stat { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: calc(var(--u) * .5) 0; border-top: 1px solid var(--surface-ink); }
.tvs-stat b { font: 700 max(16px, calc(var(--u) * 1.9)) var(--font-display); }
.tvs-stat b:last-child { text-align: right; }
.tvs-stat span { text-align: center; font: 600 max(11px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }

/* the analyst's board */
.tvs-board { position: relative; margin: 0 auto; aspect-ratio: 105 / 58; width: min(100%, calc((100vh - var(--u) * 31) * 105 / 58)); box-shadow: 0 0 0 2px var(--grass-edge, rgba(255,255,255,.82)), var(--shadow-1); }
.tvs-board canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tvs-board-key { display: flex; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * .7); font: 600 max(10px, calc(var(--u) * .95)) var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.tvs-board-key i { display: inline-block; width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 50%; margin-right: calc(var(--u) * .4); vertical-align: -10%; }
.tvs-board-key i.is-us { background: var(--k1); } .tvs-board-key i.is-them { background: var(--ink-700); }
.tvs-board-dir { margin-left: auto; } .tvs-board-dir::after { content: " →"; }
.tvs-board-cap { margin: calc(var(--u) * .6) 0 0; font: 500 max(12px, calc(var(--u) * 1.2)) / 1.3 var(--font-ui, Barlow, sans-serif); color: var(--ink-700); }
.tvs-analysis.is-board { width: auto; min-width: calc(var(--u) * 40); max-width: 88%; }

/* a prediction */
.tvs-predict { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .9); font: 700 max(34px, calc(var(--u) * 4.4)) / .86 var(--font-display); }
.tvs-predict i { width: calc(var(--u) * .9); height: calc(var(--u) * .25); background: var(--ink-300); }
.tvs-predict-clubs { display: flex; justify-content: space-between; margin-top: calc(var(--u) * .5); font: 600 max(10px, calc(var(--u) * .9)) var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.tvs-prediction.is-card { border-top-color: var(--suit, var(--tv-accent)); }

/* the controls: the only things that take a tap without cutting */
.tvs-controls { position: absolute; right: calc(var(--u) * 2.4); top: calc(var(--u) * 5.2); display: flex; align-items: center; gap: calc(var(--u) * 1); pointer-events: auto; }
.tvs-hint { font: 600 max(10px, calc(var(--u) * .9)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tvs-skip { all: unset; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 1.4); background: rgba(255,255,255,.9); color: var(--ink-900);
  font: 700 max(12px, calc(var(--u) * 1.05)) var(--font-display); letter-spacing: .14em; text-transform: uppercase; box-shadow: var(--shadow-1); transition: transform var(--t-micro, 130ms) var(--ease-std); }
.tvs-skip:hover { background: #fff; } .tvs-skip:active { transform: translateY(1px) scale(.98); }
.tvs-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@keyframes tvs-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tvs-slide { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes tvs-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tvs *, .tvs { animation-duration: 1ms !important; } }

/* landscape phones: the lower third and the boards tighten */
@media (max-height: 520px) {
  .tvs-talk { width: calc(100% - var(--u) * 6); bottom: calc(var(--u) * 1.6); }
  .tvs-caption { padding: 6px 10px; font-size: 13px; }
  .tvs-gfx.is-board { top: calc(var(--u) * 5); max-height: calc(100% - 150px); overflow: hidden; padding: 10px 14px; }
  .tvs-gfx.is-card { bottom: auto; right: auto; left: calc(var(--u) * 2.4); top: calc(var(--u) * 6.5); width: calc(var(--u) * 30); }
  .tvs-team li span { display: none; }
  .tvs-team ol { margin: 4px 0 2px; gap: 0; }
  .tvs-team li { font-size: 10.5px; line-height: 1.25; }
  .tvs-team-head { padding-bottom: 3px; }
  .tvs-team-boss { display: none; }
  .tvs-hint { display: none; }
}