/*
  NPDA TV (npdatv.php) — stile "Netflix": ogni categoria è una fascia a
  fondo grigio 600 con una riga di card video scorrevole orizzontalmente
  (scrollbar nativa, niente frecce/JS). LE ORIGINI DI DUNKY è l'unica
  eccezione: un solo video, quindi niente riga scorrevole, solo il video
  centrato e più grande.
*/

/*
  [hidden] e una classe con un proprio "display" (es. .tv-poll-overlay,
  .tv-live-row) hanno la STESSA specificità (0,1,0): a parità di
  specificità il foglio d'autore vince sempre su quello dello user agent,
  quindi senza questa regola impostare l'attributo hidden via JS non
  nasconde nulla se l'elemento ha già un display: dichiarato qui sotto
  (bug reale: la X del sondaggio non chiudeva l'overlay per questo).
*/
[hidden] {
  display: none !important;
}

.tv-section {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-6);
  background: var(--color-gray-600);
  border-radius: var(--radius-md);
  padding: var(--space-6) 0;
}

.tv-section__empty {
  color: var(--color-text-inverse);
  padding: 0 var(--space-5);
}

.tv-section__title {
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--text-2xl);
  margin-bottom: var(--space-4);
  padding: 0 var(--space-5);
}

/* Riga scorrevole orizzontale, tipo Netflix. Bordi sfumati: mask-image
   sfuma a trasparente i primi/ultimi ~40px, effetto "altro contenuto oltre
   il bordo" senza bisogno di frecce/JS per rilevare l'overflow reale. */
.tv-row {
  display: flex;
  overflow-x: auto;
  padding: 0 var(--space-5) var(--space-3);
  mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}

.tv-row > * + * {
  margin-left: var(--space-4);
}

.tv-card {
  position: relative;
  flex: 0 0 320px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-black);
}

/* Fallback per browser senza aspect-ratio (es. motori datati di alcune
   smart TV): senza, la card collassa ad altezza 0 (l'iframe dentro è a
   height:100% di un genitore ad altezza 0) — il video "piccolino" di
   npdatvlive.php era proprio questo su una TV LG WebOS.
   NB: si era provato a usare SEMPRE questo trucco (anche dove
   aspect-ratio è supportata), per non dipendere da @supports — ma qui
   rompeva il desktop: il padding-bottom in percentuale si calcola sulla
   larghezza del blocco CONTENITORE (.tv-row per le card in riga, .tv-single
   per quella singola), non su quella della card stessa quando è più
   stretta (flex-basis 320px, o dentro un .tv-single con max-width), quindi
   su schermi larghi l'altezza cresceva a dismisura e il video finiva
   tagliato ai lati da object-fit:cover. aspect-ratio non ha questo
   problema (si basa sulla larghezza finale della card). Se questo
   fallback non dovesse bastare su una TV, pazienza: il desktop viene
   prima — vedi anche components/hero-slider.css, stesso ragionamento. */
@supports not (aspect-ratio: 16 / 9) {
  .tv-card {
    height: 0;
    padding-bottom: 56.25%; /* 9/16 */
  }

  /* Col trucco height:0 qui sopra il "content box" di .tv-card è alto 0:
     un figlio normale a height:100% (l'iframe) risulterebbe anch'esso
     alto 0. Da absolute invece si dimensiona sul PADDING box del
     genitore posizionato, dove l'altezza vera vive. Il fallback per
     .tv-live-media (stesso ragionamento) è più sotto, vicino alla sua
     regola normale — deve stare DOPO per vincere il pareggio di
     specificità, non qui. */
  .tv-card iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.tv-card iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Sezione a video singolo (LE ORIGINI DI DUNKY): centrato, niente scroll */
.tv-single {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.tv-single .tv-card {
  flex: none;
  width: 100%;
}

/* Box del live (npdatvlive.php), più grande della dimensione base di
   .tv-single (800px): solo lì, non tocca "Le origini di Dunky" che riusa
   .tv-single senza questo modificatore. */
.tv-single--live {
  max-width: 1000px;
}

@media (max-width: 700px) {
  .tv-card {
    flex-basis: 260px;
  }
}

/*
  MATCH LIVE DR2 (npdatvlive.php) — video diretta con risultato in
  sovrimpressione (banda in basso), alimentati da live.php tramite
  risultati.csv. .tv-live-card riusa .tv-card ma serve da ancora di
  posizionamento per l'overlay assoluto.
*/

.tv-live-card {
  position: relative;
}

.tv-live-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  .tv-live-media è l'ancora di posizionamento per video + overlay, separata
  da .tv-live-card: in stato normale riempie semplicemente la card (nessun
  cambiamento visibile), ma è quella che viene ridimensionata al box 16:9
  esatto quando .tv-live-card è "espansa" — vedi sotto. Serve a tenere
  .tv-live-overlay (bottom:0) sempre ancorato al fondo del VIDEO vero, mai
  al fondo dello schermo/contenitore quando questo è più alto/largo del
  16:9.
*/
.tv-live-media {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Fallback per browser senza aspect-ratio (vedi il blocco @supports
   accanto a .tv-card più sopra, stesso motivo): lì il "content box" di
   .tv-card è alto 0, quindi .tv-live-media come figlio normale a
   height:100% risulterebbe anch'esso alto 0. Da absolute si dimensiona
   invece sul PADDING box di .tv-card (che è positioned), dove l'altezza
   vera vive. Deve stare DOPO la regola normale qui sopra per vincerla a
   parità di specificità (stesso selettore, un negativo prima non
   basterebbe). */
@supports not (aspect-ratio: 16 / 9) {
  .tv-live-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.tv-live-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none; /* lascia cliccabili i controlli nativi di YouTube sotto */
}

/* Ridotta: la banda risultato sparisce (il bottone la porta a 0 di
   contenuto/altezza), il bottone stesso resta l'unica cosa visibile.
   Essendo ancorato a top:0/left:0 di .tv-live-overlay e spostato sopra
   di sé con translateY(-100%) (vedi .tv-live-collapse-btn), quando la
   banda è vuota il suo bordo superiore coincide col fondo del video: il
   bottone finisce così da solo in basso a sinistra dello schermo. */
.tv-live-overlay.is-collapsed .tv-live-row,
.tv-live-overlay.is-collapsed .tv-live-no-match {
  display: none;
}

/* Appoggiato appena SOPRA il bordo superiore della banda (fuori dalla
   banda stessa, non dentro): pointer-events:auto perché il genitore
   .tv-live-overlay li ha disattivati (per lasciare cliccabili i controlli
   YouTube sotto). */
.tv-live-collapse-btn {
  position: absolute;
  top: 0;
  left: var(--space-2);
  transform: translateY(-100%);
  z-index: 3;
  pointer-events: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 13, 0.85);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.tv-live-collapse-btn:hover {
  background: rgba(11, 11, 13, 1);
}

/*
  In alto a sinistra, ancorato al bordo del video — non a tutta larghezza
  (max-width la limita al contenuto, con wrap se serve più spazio): deve
  restare corto per non finire sotto/sopra al pulsante "espandi" che sta
  nell'angolo in alto a destra (.tv-live-fullscreen-btn, z-index maggiore).
*/
.tv-poll-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: calc(100% - 48px);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: rgba(11, 11, 13, 0.85);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 0 var(--radius-md) 0;
}

.tv-poll-overlay > * + * {
  margin-top: var(--space-2);
}

/* Etichetta e pulsanti X/freccina sulla STESSA riga in cima al pannello,
   sempre — mobile e desktop. Prima X/freccina erano in position:absolute
   sopra al resto del contenuto: bastava che il pannello fosse più stretto
   o più alto del previsto perché finissero sovrapposte a un pulsante
   "Vota" sotto. Con una riga dedicata (flusso normale, non sovrapposizione
   forzata) il problema non può più capitare, a nessuna larghezza. */
.tv-poll-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tv-poll-header > * + * {
  margin-left: var(--space-2);
}

.tv-poll-actions {
  display: flex;
  flex: none;
}

.tv-poll-actions > * + * {
  margin-left: 2px;
}

.tv-poll-close,
.tv-poll-collapse {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
}

.tv-poll-close:hover,
.tv-poll-collapse:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Pillola che resta quando il sondaggio è "ridotto": stessa posizione del
   pannello pieno (in alto a sinistra), stile in linea con gli altri
   pulsanti-ancora sul video (.tv-live-fullscreen-btn), etichetta "VOTA
   L'MVP" così si capisce cosa riapre. Cliccandola si riapre il pannello
   completo, il sondaggio nel frattempo continua ad aggiornarsi sotto
   (stesso polling, solo nascosto alla vista). */
.tv-poll-collapsed-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: rgba(11, 11, 13, 0.85);
  color: var(--color-text-inverse);
  border: none;
  border-radius: 0 0 var(--radius-md) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.tv-poll-collapsed-icon > * + * {
  margin-left: var(--space-2);
}

.tv-poll-collapsed-icon:hover {
  background: rgba(11, 11, 13, 1);
}

.tv-poll-label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  text-transform: uppercase;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* flex-wrap con più righe: qui "> * + * { margin-left }" non basterebbe
   (il primo elemento di ogni riga a-capo si ritroverebbe comunque senza
   margine, e mancherebbe lo spazio verticale tra le righe). Margine "in
   uscita" (right/bottom) su OGNI figlio, non negativo sul contenitore: un
   margine negativo in alto avrebbe tirato su questo blocco fin dentro
   .tv-poll-header sopra, rubandogli l'area di hover di X/freccina nella
   metà inferiore — scoperto proprio così. Il margine in eccesso dopo
   l'ultimo elemento/riga resta innocuo (nessun fratello sotto a cui
   sovrapporsi). */
.tv-poll-options {
  display: flex;
  flex-wrap: wrap;
}

.tv-poll-options > * {
  margin-right: var(--space-3);
  margin-bottom: var(--space-3);
}

.tv-poll-option {
  display: flex;
  align-items: center;
}

.tv-poll-option > * + * {
  margin-left: var(--space-2);
}

.tv-poll-name {
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.tv-poll-vote-btn {
  background: var(--color-brand);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.tv-poll-vote-btn:hover {
  background: var(--color-brand-dark);
}

.tv-poll-pct {
  color: var(--color-white);
  background: var(--color-red-brand);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

@media (max-width: 700px) {
  .tv-poll-overlay {
    padding: var(--space-2);
  }

  /* I 3 giocatori uno sotto l'altro invece che affiancati: a schermo
     stretto affiancarli forzava l'a-capo a metà nome. Qui è una colonna
     (non più wrap su più righe), quindi il margin-right/margin-bottom dei
     figli del blocco desktop va azzerato e sostituito con un semplice
     margin-top a cascata. */
  .tv-poll-options {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    width: 100%;
  }

  .tv-poll-options > * {
    margin: 0;
  }

  .tv-poll-options > * + * {
    margin-top: var(--space-1);
  }

  .tv-poll-option {
    width: 100%;
    justify-content: space-between;
  }

  .tv-poll-name {
    font-size: var(--text-xs);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.tv-live-fullscreen-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 3;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 13, 0.65);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.tv-live-fullscreen-btn:hover {
  background: rgba(11, 11, 13, 0.85);
}

/*
  "Espandi" in pagina, non Fullscreen API del sistema operativo (si è
  rivelata inaffidabile: banner di Android fuori dal nostro controllo, e la
  centratura del box 16:9 dentro il suo "top layer" si comporta diversamente
  da browser a browser). Qui è tutto CSS/JS nostro: .tv-live-card diventa un
  overlay a tutta pagina (position:fixed) che fa da guscio centrante nero,
  mentre .tv-live-media dentro prende le dimensioni ESATTE del box 16:9 che
  sta nello schermo (min() sceglie il lato che fa da vincolo) — stesso
  meccanismo, affidabile perché è normale CSS, non il top layer del
  fullscreen. .tv-live-overlay resta ancorato al fondo DI QUESTO box, quindi
  segue sempre il video vero, in orizzontale come in verticale.
*/
.tv-live-card.is-expanded {
  position: fixed;
  /* top/right/bottom/left esplicite invece della scorciatoia "inset:0":
     su un motore vecchio che non capisce "inset", position:fixed senza
     nessuna delle quattro resterebbe ancorato dov'era nel flusso normale
     invece che al bordo dello schermo — è il sospetto principale per il
     "fullscreen che va oltre il bordo del browser" segnalato su TV/browser
     datati. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  width: 100vw;
  height: 100vh; /* fallback per browser senza dvh */
  height: 100dvh; /* su mobile esclude l'area sotto la barra del browser */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  border-radius: 0;
  aspect-ratio: unset;
  /* Annulla il padding-bottom che .tv-card riceve dal fallback per
     browser senza aspect-ratio (vedi sopra): qui l'altezza è già
     esplicita (100vh/100dvh), quindi su quei browser quel padding
     andrebbe semplicemente ad aggiungersi sopra, deformando il box
     espanso. Sui browser con aspect-ratio è un no-op innocuo (.tv-card
     non ha padding-bottom di suo). */
  padding-bottom: 0;
}

.tv-live-card.is-expanded .tv-live-media {
  /* Qui .tv-live-card è a schermo intero con altezza esplicita (vh/dvh):
     .tv-live-media torna sempre a essere un normale figlio flex centrato,
     anche sui browser vecchi dove il fallback qui sopra lo ancorerebbe
     altrimenti ai 4 lati con position:absolute (lì serve solo quando
     .tv-card usa il trucco padding-bottom, non qui dove l'altezza è già
     esplicita). */
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  /* Fallback per browser senza min()/max() CSS (funzione, non i valori
     min-width/max-width): senza, la dichiarazione sotto sarebbe l'unica e,
     se il motore non la capisce, .tv-live-media resterebbe senza
     dimensioni nello stato espanso. Con questa prima, un motore vecchio
     riempie semplicemente il riquadro nero a tutto schermo (niente barre
     nere corrette, ma anche niente overflow); uno moderno la sovrascrive
     subito con le dimensioni 16:9 precise sotto. */
  width: 100%;
  height: 100%;
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  height: min(100dvh, 56.25vw);
}

.tv-live-card.is-expanded .tv-live-media img {
  object-fit: contain;
}

/*
  Testo, loghi e pulsanti del box risultato/sondaggio dimensionati per un
  riquadro di ~800px in pagina (.tv-single): quando il video è "espanso" e
  può riempire l'intero schermo, restano piccoli e sproporzionati se non li
  si scala insieme. clamp(min, preferito-in-vw, max): il preferito cresce
  con la larghezza dello schermo, min/max evitano che diventino troppo
  piccoli o abnormi. Se il browser non capisce clamp() l'intera
  dichiarazione viene ignorata e resta la dimensione normale — nessun
  peggioramento, solo niente ingrandimento extra su un motore vecchio.
*/
.tv-live-card.is-expanded .tv-live-quarto,
.tv-live-card.is-expanded .tv-poll-label {
  font-size: clamp(0.875rem, 1.6vw, 1.75rem);
}

.tv-live-card.is-expanded .tv-live-team,
.tv-live-card.is-expanded .tv-live-vs,
.tv-live-card.is-expanded .tv-poll-name {
  font-size: clamp(1.125rem, 2vw, 2.25rem);
}

/* min-width/min-height di .tv-live-score sono già in "em": scalano da soli
   insieme al font-size, non serve ripeterli qui. */
.tv-live-card.is-expanded .tv-live-score {
  font-size: clamp(1.125rem, 2.2vw, 2.75rem);
}

.tv-live-card.is-expanded .tv-live-logo {
  max-width: clamp(36px, 4vw, 72px);
  max-height: clamp(36px, 4vw, 72px);
}

.tv-live-card.is-expanded .tv-live-badge {
  font-size: clamp(0.875rem, 1.4vw, 1.5rem);
}

.tv-live-card.is-expanded .tv-live-badge__dot {
  width: clamp(8px, 0.8vw, 14px);
  height: clamp(8px, 0.8vw, 14px);
}

.tv-live-card.is-expanded .tv-poll-vote-btn,
.tv-live-card.is-expanded .tv-poll-pct {
  font-size: clamp(0.75rem, 1.2vw, 1.25rem);
  padding: clamp(2px, 0.3vw, 6px) clamp(0.75rem, 1.5vw, 1.5rem);
}

.tv-live-card.is-expanded .tv-poll-close,
.tv-live-card.is-expanded .tv-poll-collapse {
  width: clamp(24px, 2.4vw, 40px);
  height: clamp(24px, 2.4vw, 40px);
  font-size: clamp(0.875rem, 1.2vw, 1.5rem);
}

.tv-live-card.is-expanded .tv-poll-collapsed-icon,
.tv-live-card.is-expanded .tv-live-fullscreen-btn,
.tv-live-card.is-expanded .tv-live-collapse-btn {
  width: clamp(36px, 3vw, 56px);
  height: clamp(36px, 3vw, 56px);
  font-size: clamp(1rem, 1.5vw, 1.75rem);
}

.tv-live-card.is-expanded .tv-live-row {
  padding: clamp(0.5rem, 1vw, 1.5rem) clamp(0.75rem, 1.5vw, 2rem);
}

.tv-live-card.is-expanded .tv-poll-overlay {
  padding: clamp(0.5rem, 1vw, 1.25rem);
}

/*
  Riga singola: quarto a sinistra, gruppo squadre centrato rispetto a tutta
  la larghezza (non solo allo spazio restante), badge LIVE a destra. Grid a
  3 colonne 1fr/auto/1fr: le due colonne laterali si dividono lo spazio in
  parti uguali, così la colonna centrale (gruppo squadre) resta visivamente
  centrata a prescindere da quanto sono larghi quarto e badge.
*/
.tv-live-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(11, 11, 13, 0.65);
  padding: var(--space-2) var(--space-3);
}

.tv-live-row > * + * {
  margin-left: var(--space-3);
}

.tv-live-quarto {
  grid-column: 1;
  justify-self: start;
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

/* Versione abbreviata ("1°QT") usata solo in mobile — vedi media query più
   sotto — per lasciare più spazio ai nomi delle squadre. */
.tv-live-quarto-short {
  display: none;
}

.tv-live-center {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
}

.tv-live-center > * + * {
  margin-left: var(--space-2);
}

.tv-live-team {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  max-width: 22vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gruppo compatto risultato A – trattino – risultato B: gap ridotto
   rispetto a .tv-live-center, così i due quadrati restano vicini al
   trattino invece di essere distanziati come squadra/logo. */
.tv-live-result-group {
  display: inline-flex;
  align-items: center;
}

.tv-live-result-group > * + * {
  margin-left: var(--space-1);
}

.tv-live-vs {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-inverse);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.tv-live-logo {
  max-width: 36px;
  max-height: 36px;
}

.tv-live-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  min-height: 1.7em;
  padding: 0 var(--space-1);
  background: var(--color-white);
  color: var(--color-red-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  border-radius: var(--radius-sm);
}

.tv-live-badge {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  font-size: var(--text-sm);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}

.tv-live-badge > * + * {
  margin-left: var(--space-1);
}

.tv-live-badge__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-red-brand);
  animation: tv-live-blink 1.2s ease-in-out infinite;
}

@keyframes tv-live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

.tv-live-no-match {
  text-align: center;
  padding: var(--space-3);
  background: rgba(11, 11, 13, 0.65);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
}

@media (max-width: 700px) {
  .tv-live-row {
    grid-template-columns: auto 1fr auto;
  }

  .tv-live-row > * + * {
    margin-left: var(--space-2);
  }

  .tv-live-team {
    font-size: var(--text-sm);
    max-width: 16vw;
  }

  .tv-live-logo {
    max-width: 28px;
    max-height: 28px;
  }

  .tv-live-score {
    font-size: var(--text-sm);
    min-width: 1.4em;
    min-height: 1.4em;
  }

  .tv-live-quarto-full {
    display: none;
  }

  .tv-live-quarto-short {
    display: inline;
  }

  /* Su mobile lo spazio va ai nomi squadra: niente data/ora (si vede solo
     durante la diretta, e in quel caso solo il pallino, senza la scritta
     "LIVE"). */
  .tv-live-badge {
    font-size: var(--text-xs);
  }

  .tv-live-badge:not(.is-live) {
    display: none;
  }

  .tv-live-badge__text {
    display: none;
  }
}