/* =====================================================================================================
   A7 (ADR-066): the match-day television shows -- broadcast graphics over the studio (TvShowScene.ts).
   (15 Oct, the user) only the studio and the talking: no boards or cards over the picture.
   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); }

/* 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 tightens */
@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-hint { display: none; }
}