/* TV AO VIVO and Online agora on the home screen (tv-live.js). Black/red broadcast look from the
   styles.css tokens; the TV takes the hero's column on wide screens and a full-width band below the
   modes and the community on tablets and phones. */
.tv-home{--tv-edge:#ffffff1f;position:relative;z-index:1;min-width:0;min-height:0;align-self:stretch;display:flex;flex-direction:column;gap:12px;color:var(--ink,#f4f4f1);font-family:var(--ui-font,"Segoe UI",Arial,sans-serif)}
.tv-home-head{display:flex;align-items:center;gap:10px;min-width:0}
.tv-home-head h2{margin:0;font:800 15px/1 var(--tv-font,inherit);letter-spacing:2px;color:#fff}
.tv-logo{display:inline-grid;place-items:center;padding:4px 7px 3px;background:var(--red,#e1142d);color:#fff;font:italic 900 10px/1 var(--tv-font,inherit);letter-spacing:1.4px;border-radius:var(--r-xs,2px);white-space:nowrap}
.tv-home-count{margin-left:auto;color:var(--muted,#aab0bb);font-size:11px;letter-spacing:.4px;white-space:nowrap}

/* The screen: a 16:9 picture with the broadcast bugs over it. */
.tv-screen{position:relative;display:block;width:100%;aspect-ratio:16/9;flex:none;padding:0;margin:0;overflow:hidden;border:1px solid var(--tv-edge,#ffffff1f);border-top:3px solid var(--red,#e1142d);border-radius:var(--r-sm,4px);background:#040507;color:#fff;text-align:left;container-type:inline-size;box-shadow:0 18px 40px #0008;cursor:pointer;font:inherit}
div.tv-screen{cursor:default}
.tv-screen>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.tv-overlay{position:absolute;inset:0;container-type:inline-size;pointer-events:none}
.tv-screen:focus-visible{outline:3px solid var(--focus,#ffc42e);outline-offset:3px}
.tv-screen:hover .tv-names,.tv-screen:focus-visible .tv-names{background:#000000d9}
.tv-screen[data-state=empty]>canvas,.tv-screen[data-state=tuning]>canvas{opacity:0}
/* Top left, clear of the minimap the picture carries top right (--tv-map-left, tv-live.js): the score bug and AO VIVO
   with the audience on one row (AO VIVO wraps under the score on a narrow picture), the commentary strip below. */
.tv-corner{position:absolute;top:3.2cqw;left:3.2cqw;display:flex;flex-direction:column;align-items:flex-start;gap:1.1cqw;max-width:calc(var(--tv-map-left,88%) - 5cqw);z-index:2}
.tv-top{display:flex;flex-wrap:wrap;align-items:stretch;gap:.9cqw;max-width:100%}
.tv-live-bug{display:inline-flex;align-items:stretch;font:800 clamp(8px,2.4cqw,15px)/1 var(--tv-font,inherit);letter-spacing:.14em;box-shadow:0 2px 6px #0007}
.tv-live-on{display:inline-flex;align-items:center;gap:.6em;padding:.45em .7em .38em;background:linear-gradient(180deg,var(--red,#e1142d),#a80c26)}
.tv-live-bug i{width:.62em;height:.62em;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:tv-blink 1.3s ease-in-out infinite}
.tv-screen[data-state=empty] .tv-live-on{background:#2a2e36;color:#aab0bb}
.tv-screen[data-state=empty] .tv-live-bug i{background:#697180;box-shadow:none;animation:none}
.tv-channel-bug{position:absolute;right:3.2cqw;bottom:3cqw;font:italic 900 clamp(9px,2.8cqw,18px)/1 var(--tv-font,inherit);letter-spacing:.08em;color:#ffffffb8;text-shadow:0 1px 3px #000;z-index:2}
.tv-score-bug{display:flex;align-items:stretch;font:800 clamp(8px,2.5cqw,16px)/1 var(--tv-font,inherit);box-shadow:0 3px 10px #0009;max-width:100%}
.tv-score-bug>*{display:flex;align-items:center;padding:.42em .5em .36em}
.tv-bug-team{gap:.35em;background:#101318ee;letter-spacing:.06em}
.tv-bug-team .tv-crest{width:1.35em;height:1.35em}
.tv-bug-goals{background:#fff;color:#0c0e12;min-width:1.5em;justify-content:center;font-size:1.08em}
.tv-bug-sep{background:#fff;color:#0c0e12;padding-left:0!important;padding-right:0!important}
.tv-bug-clock{background:var(--red,#e1142d);color:#fff;letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tv-names{position:absolute;left:3.2cqw;bottom:3cqw;max-width:calc(100% - 20cqw);display:flex;align-items:center;gap:.45em;padding:.35em .7em .35em .35em;background:#000000b0;border-left:.3em solid var(--red,#e1142d);font:600 clamp(9px,2.5cqw,15px)/1.1 var(--ui-font,inherit);z-index:2;transition:background var(--dur-fast,.15s)}
.tv-names strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tv-names .tv-avatar{width:1.9em;height:2.3em;flex:none}
.tv-vs{color:var(--gold,#ffc42e)}
.tv-mode{flex:none;padding:.2em .45em;border:1px solid #ffffff38;color:#dfe2e8;font:700 .72em/1 var(--tv-font,inherit);letter-spacing:.12em;text-transform:uppercase}
.tv-watchers{display:inline-flex;align-items:center;padding:.3em .6em;background:#07080bd9;color:#e7e9ee;font:600 .86em/1 var(--ui-font,inherit);letter-spacing:.02em;white-space:nowrap}
/* The commentary strip: what the player's panel says at the moment on screen, in the broadcast's type. */
.tv-commentary{--kind:var(--red,#e1142d);--kind-ink:#fff;display:grid;justify-items:start;max-width:min(100%,32em);font-size:clamp(8px,2.1cqw,13px);filter:drop-shadow(0 3px 8px #0009)}
.tv-commentary.tv-wipe{animation:tv-strip-in .35s cubic-bezier(.2,.8,.2,1) both}
.tv-commentary[hidden]{display:none}
.tv-commentary-title{max-width:100%;padding:.4em 1.5em .32em .75em;background:var(--kind);color:var(--kind-ink);clip-path:polygon(0 0,100% 0,calc(100% - .8em) 100%,0 100%);font:800 1.05em/1.1 var(--tv-font,inherit);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv-commentary-detail{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;padding:.35em .8em .4em;border-left:.25em solid var(--kind);background:#07080bed;color:#eef0f4;font:500 1em/1.25 var(--ui-font,inherit)}
.tv-commentary[data-kind=goal]{--kind:var(--gold,#ffc42e);--kind-ink:#1c1300}
.tv-commentary[data-kind=play-on]{--kind:#0f7a43}
.tv-commentary[data-kind=foul]{--kind:#ff7a1a;--kind-ink:#1a0d00}
.tv-commentary[data-kind=card-yellow]{--kind:#ffd400;--kind-ink:#171300}
.tv-commentary[data-kind=card-red]{--kind:#d90429}
.tv-commentary[data-kind=injury]{--kind:#c2185b}
.tv-commentary[data-kind=referee]{--kind:#3a404c}
/* The goal replay's letterbox bars: the bugs step inside them and the strip rests (the bar names the goal). */
.tv-screen[data-replay] .tv-corner{top:calc(8.5% + 1.4cqw)}
.tv-screen[data-replay] .tv-commentary{display:none}
.tv-screen[data-replay] .tv-names,.tv-screen[data-replay] .tv-channel-bug{bottom:calc(8.5% + 1.4cqw)}
@keyframes tv-strip-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tv-tuning,.tv-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55em;text-align:center;padding:8%;z-index:1}
.tv-tuning{background:repeating-linear-gradient(0deg,#ffffff0d 0 1px,transparent 1px 3px),radial-gradient(circle at 50% 45%,#232833,#07080b 70%);font:700 clamp(10px,2.8cqw,17px)/1 var(--tv-font,inherit);letter-spacing:.14em;text-transform:uppercase;color:#cfd3da;animation:tv-roll 1.6s linear infinite}
.tv-empty{background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 38%,#e1142d2e,transparent 58%),linear-gradient(180deg,#0d0f14,#050608)}
.tv-empty-mark{display:grid;place-items:center;width:2.2em;height:2.2em;background:var(--red,#e1142d);color:#fff;font:italic 900 clamp(18px,7cqw,44px)/1 var(--tv-font,inherit);box-shadow:0 0 30px #e1142d66;transform:skew(-7deg)}
.tv-empty strong{font:800 clamp(11px,3.5cqw,22px)/1.15 var(--tv-font,inherit);letter-spacing:.05em;text-transform:uppercase;color:#fff}
.tv-empty span:last-child{font-size:clamp(10px,2.6cqw,15px);color:#b9bec8}
.tv-crest{display:block;object-fit:contain;flex:none}

/* Channel list. */
.tv-channels{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#59616d #0000;padding:2px}
.tv-channels[hidden]{display:none}
.tv-channel{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"top top" "teams who";align-items:center;gap:4px 12px;width:100%;min-height:48px;padding:8px 10px;border:1px solid var(--tv-edge,#ffffff1f);border-left:3px solid transparent;border-radius:var(--r-xs,3px);background:#0e1116e6;color:var(--ink,#f4f4f1);text-align:left;font:inherit;cursor:pointer}
.tv-channel:hover{background:#171b22}
.tv-channel[aria-pressed=true]{border-left-color:var(--red,#e1142d);background:#1a0d11}
.tv-channel:focus-visible{outline:3px solid var(--focus,#ffc42e);outline-offset:2px}
.tv-channel-top{grid-area:top;display:flex;align-items:center;gap:8px;font:800 10px/1 var(--tv-font,inherit);letter-spacing:1.4px;text-transform:uppercase;color:var(--gold,#ffc42e)}
.tv-channel-top .tv-mode{font-size:9px;color:#c6cad2}
.tv-channel-teams{grid-area:teams;display:flex;align-items:center;gap:6px;font-size:12px}
.tv-channel-teams .tv-crest{width:18px;height:18px}
.tv-channel-teams strong{padding:2px 6px;background:#fff;color:#0c0e12;font:800 12px/1 var(--tv-font,inherit);font-variant-numeric:tabular-nums}
.tv-channel-who{grid-area:who;display:flex;justify-content:flex-end;align-items:center;gap:8px;min-width:0;font-size:12px;color:#d9dce2}
.tv-channel-who>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tv-channel-clock{flex:none;color:var(--muted,#aab0bb);font-variant-numeric:tabular-nums}

/* Online agora. */
.tv-online{display:flex;flex-direction:column;gap:8px;min-width:0;padding:11px 12px;border:1px solid var(--tv-edge,#ffffff1f);border-radius:var(--r-sm,4px);background:#0e1116ee}
.tv-online-head{display:flex;align-items:center;gap:8px;min-width:0}
.tv-online-head h2{margin:0;font:800 12px/1 var(--tv-font,inherit);letter-spacing:1.6px;text-transform:uppercase}
.tv-dot{width:8px;height:8px;border-radius:50%;background:#2fd27a;box-shadow:0 0 8px #2fd27a;flex:none}
.tv-online-count{margin-left:auto;color:var(--muted,#aab0bb);font-size:11px;white-space:nowrap}
.tv-online-people{display:flex;gap:6px;overflow-x:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#59616d #0000;padding:2px 2px 4px}
.tv-person{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:66px;min-height:44px;padding:6px 4px;border:1px solid transparent;border-radius:var(--r-xs,3px);background:#151920;color:var(--ink,#f4f4f1);font:inherit;cursor:pointer}
.tv-person:hover{background:#1c212a;border-color:#ffffff24}
.tv-person:focus-visible{outline:3px solid var(--focus,#ffc42e);outline-offset:2px}
.tv-person-avatar{width:34px;height:42px}
.tv-person::after{content:"";position:absolute;top:6px;right:9px;width:9px;height:9px;border-radius:50%;border:2px solid #151920;background:#2fd27a}
.tv-person[data-status=in-match]::after{background:var(--red,#e1142d)}
.tv-person[data-status=away]::after{background:#c9a23a}
.tv-person-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600}
.tv-person-status{font-size:9px;letter-spacing:.4px;color:var(--muted,#aab0bb);text-transform:uppercase}
.tv-online-note{margin:0;color:#b9bec8;font-size:12px;line-height:1.4}
.tv-online-join{align-self:flex-start;min-height:44px;padding:10px 16px;border:1px solid var(--red,#e1142d);border-radius:var(--r-xs,3px);background:#e1142d22;color:#fff;font:700 12px/1.1 var(--ui-font,inherit);cursor:pointer}
.tv-online-join:hover{background:#e1142d44}
.tv-online-join:focus-visible{outline:3px solid var(--focus,#ffc42e);outline-offset:2px}
.tv-avatar-fallback{display:inline-grid;place-items:center;background:#262b35;color:#fff;font-weight:800}

/* Big view. */
.tv-dialog{width:min(1480px,96vw);max-width:none;height:min(900px,94dvh);max-height:none;padding:0;border:1px solid #ffffff26;border-top:3px solid var(--red,#e1142d);background:#07080bf7;color:var(--ink,#f4f4f1);box-shadow:0 30px 90px #000c;font-family:var(--ui-font,"Segoe UI",Arial,sans-serif);overflow:hidden}
.tv-dialog[open]{display:flex;flex-direction:column}
.tv-dialog::backdrop{background:#000000c9}
.tv-dialog-header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #ffffff1a}
.tv-dialog-header h2{margin:0;font:800 18px/1 var(--tv-font,inherit);letter-spacing:2px}
.tv-dialog-close{margin-left:auto;min-width:44px;min-height:44px;border:1px solid #ffffff2e;border-radius:var(--r-xs,3px);background:#151920;color:#fff;font:400 26px/1 var(--ui-font,inherit);cursor:pointer}
.tv-dialog-close:focus-visible{outline:3px solid var(--focus,#ffc42e);outline-offset:2px}
.tv-dialog-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;padding:16px;align-items:start}
.tv-dialog-body .tv-screen{max-height:100%;align-self:center}
.tv-dialog-side{display:flex;flex-direction:column;gap:10px;min-height:0;max-height:100%}
.tv-dialog-side h3{margin:0;font:800 12px/1 var(--tv-font,inherit);letter-spacing:1.6px;text-transform:uppercase;color:var(--gold,#ffc42e)}
.tv-dialog-empty{margin:0;color:#b9bec8;font-size:13px}
.tv-dialog-empty[hidden]{display:none}
.tv-dialog-note{margin:0;padding:0 16px 12px;color:var(--muted,#8d94a1);font-size:11px}

/* Wide screens: the TV fills the middle column of the home grid (home-social.css). */
@media(min-width:1200px){.front-menu[data-screen=home] .tv-home{align-self:center;max-height:100%}
  .front-menu[data-screen=home] .tv-home .tv-channels{flex:0 1 auto;max-height:168px}}
/* Tablets and phone landscape: a full-width band below the modes and the community. */
@media(min-width:750px) and (max-width:1199px){
  .front-menu[data-screen=home] .fm-home:has(>.tv-home){height:auto;grid-template-rows:auto auto}
  .front-menu[data-screen=home] .fm-home>.tv-home{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr);grid-template-areas:"head head" "screen side" "screen online";gap:12px 16px;align-items:start}
  .tv-home>.tv-home-head{grid-area:head}.tv-home>.tv-screen{grid-area:screen}.tv-home>.tv-channels{grid-area:side;max-height:220px}.tv-home>.tv-online{grid-area:online}
  .tv-home>.tv-channels[hidden]+.tv-online{grid-row:2/4}}
@media(max-width:749px){.front-menu[data-screen=home] .tv-home{width:100%}
  .tv-home .tv-channels{max-height:230px}
  .tv-dialog{width:100vw;height:100dvh;border:0;border-top:3px solid var(--red,#e1142d)}
  .tv-dialog-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding:10px;gap:10px;overflow:auto}
  .tv-dialog-header{padding:8px 10px}}
@media(max-width:1000px) and (orientation:landscape) and (max-height:560px){
  .tv-dialog{width:100vw;height:100dvh;border:0}
  .tv-dialog-body{grid-template-columns:minmax(0,1fr) 240px;padding:8px;gap:8px}
  .tv-dialog-header{padding:6px 10px}.tv-dialog-note{display:none}}
@keyframes tv-blink{50%{opacity:.25}}
@keyframes tv-roll{to{background-position:0 6px,0 0}}
@media(prefers-reduced-motion:reduce){.tv-live-bug i,.tv-tuning,.tv-commentary.tv-wipe{animation:none}}

/* Watching prioritizes the complete picture; the channel drawer is opt-in. */
.tv-dialog{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;box-shadow:none}
.tv-player{display:flex;flex-direction:column;flex:1;width:100%;min-height:0;background:#07080b}
.tv-player:fullscreen{width:100vw;height:100dvh;max-height:100dvh}
.tv-dialog-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:0;gap:0;align-items:stretch;overflow:hidden}
.tv-dialog-body .tv-screen{height:100%;min-height:0;max-height:none;aspect-ratio:auto;align-self:stretch;border:0;border-radius:0;box-shadow:none}
.tv-dialog[data-channels=open] .tv-dialog-body{grid-template-columns:minmax(0,1fr) 280px}
.tv-dialog-side{padding:14px;background:#10141c;border-left:1px solid #ffffff1a;overflow:auto}
.tv-dialog-side[hidden]{display:none}
.tv-dialog-side .tv-channels{min-height:0;overflow:auto}
.tv-controls{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:#10141c;border-top:1px solid #ffffff1a}
.tv-control{min-height:44px;padding:8px 14px;border:1px solid #ffffff26;border-radius:4px;background:#1a202c;color:#fff;font:700 13px/1.2 var(--ui-font,inherit);cursor:pointer}
.tv-control:hover,.tv-control[aria-expanded=true]{background:#303948;border-color:#ffc42e}
.tv-control:focus-visible,.tv-volume input:focus-visible{outline:3px solid var(--focus,#ffc42e);outline-offset:2px}
.tv-volume{display:flex;align-items:center;gap:8px;font-size:12px;color:#b9bec8}
.tv-volume input{width:110px;min-height:44px;accent-color:#ffc42e}
.tv-controls [data-focus=tv-channels-toggle]{margin-left:auto}
.tv-dialog:fullscreen,.tv-dialog.tv-expanded{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
@media(max-width:749px){
  .tv-dialog{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .tv-dialog-header{padding:6px 10px;gap:8px}
  .tv-dialog-header h2{font-size:13px}
  .tv-controls{gap:6px;padding:6px 8px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .tv-control{padding:6px 10px;font-size:12px}
  .tv-volume{flex:1;justify-content:flex-end}
  .tv-volume input{width:90px}
  .tv-dialog[data-channels=open] .tv-dialog-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,35%)}
  .tv-dialog-side{border-left:0;border-top:1px solid #ffffff1a;padding:8px}
}
@media(orientation:landscape) and (max-height:560px){
  .tv-dialog{width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0}
  .tv-dialog-header{padding:2px 8px}
  .tv-dialog-header h2{font-size:12px}
  .tv-dialog[data-channels=open] .tv-dialog-body{grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:minmax(0,1fr)}
  .tv-controls{padding:2px 8px;gap:6px}
  .tv-volume{flex:none}
}