/* IL CAMPETTO (LIVE TRACKER TheSports) — contenitore dell'iframe che sta SOPRA il coupon.
   Foglio standalone (regola di Dav: CSS in un file, mai inline), linkato SOLO quando il
   riquadro della diretta compare (`player/_campetto.html`, incluso da schedina.html e
   _slip.html — un frammento solo dal 09/08),
   cosi' vale su OGNI famiglia di rendering senza dipendere dal middleware o dal bundle casa.
   Altezza fissa perche' il widget hosted non comunica la propria (aspetto ~ intestazione +
   tabellone + campo); tarabile a occhio. */
.tb-campetto-box{ margin-bottom:10px; background:#0b1020; border-radius:8px; overflow:hidden; }
.tb-campetto{ display:block; width:100%; height:340px; border:0; }


/* ══════════ IL RIQUADRO A DUE LINGUETTE — Jesper, 09/08 11:34 ══════════
 * «metti 2 tab al riquadro uno per la TV e uno per il campo "Incontro Live"». Il riquadro c'e'
 * SEMPRE sulla scheda di una partita in diretta, anche quando dentro non c'e' niente: e' quello
 * che ha chiesto («un riquadro nero vuoto per ora, cosi' vedo il placeholder»).
 *
 * ⛔ MA IL NERO NON E' MUTO. Dentro c'e' scritto cosa manca, e quale dei tre «no» e' — sala
 * senza TV, partita senza video, campo non agganciato. Un riquadro nero e basta e' indistinguibile
 * da un sito rotto, ed e' il difetto chiuso tre volte nella notte fra l'8 e il 9.
 *
 * Le linguette sono due `radio` + CSS: niente JavaScript, funzionano da tastiera. */
.tb-diretta{ margin-bottom:10px; }
.tb-diretta-tabs{ display:flex; flex-wrap:wrap; background:#0b1020; border-radius:8px;
  overflow:hidden; }

/* Le radio restano nel DOM e raggiungibili col TAB: nasconderle con `display:none` toglierebbe
 * l'unico modo di cambiare linguetta a chi non usa il mouse. */
.tb-diretta-r{ position:absolute; opacity:0; width:1px; height:1px; }

.tb-diretta-tab{
  flex:1 1 0; min-width:0; padding:8px 10px; cursor:pointer; text-align:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:rgba(232,238,245,.62); background:rgba(255,255,255,.04);
  border-bottom:2px solid transparent;
}
.tb-diretta-tab:hover{ color:rgba(232,238,245,.9); }

/* I due pannelli, nascosti finche' la loro linguetta non e' scelta. L'ordine nel markup e'
 * radio,label,radio,label,pannello,pannello — cosi' `~` li raggiunge tutti e due. */
.tb-diretta-p{ display:none; order:9; flex:1 0 100%; }
.tb-diretta-r--tv:checked ~ .tb-diretta-p--tv,
.tb-diretta-r--campo:checked ~ .tb-diretta-p--campo{ display:block; }

/* La linguetta accesa: piena opacita' + la riga sotto. Due segnali, non uno — sul fondo scuro
 * del riquadro il solo colore del testo si perde. */
.tb-diretta-r--tv:checked ~ .tb-diretta-tab:nth-of-type(1),
.tb-diretta-r--campo:checked ~ .tb-diretta-tab:nth-of-type(2){
  color:#e8eef5; background:transparent; border-bottom-color:#e2700d;
}

/* IL NERO CHE PARLA: stessa altezza dell'iframe, cosi' la colonna non salta quando il campetto
 * compare o sparisce — una pagina che si accorcia da sola sposta il coupon sotto il dito. */
.tb-diretta-nero{
  min-height:340px; display:flex; align-items:center; justify-content:center;
  background:#000; padding:18px;
}
.tb-diretta-vuoto{
  margin:0; text-align:center; font-size:12.5px; line-height:1.45;
  color:rgba(232,238,245,.72); max-width:34ch;
}

/* L'ATTESA PRIMA DEL FISCHIO D'INIZIO (Angelo, 10/08 21:41) — la partita è nel menu del live
   ma non è ancora cominciata. Deve leggersi come un'attesa, non come un errore: stesso riquadro
   del campetto, nessun rosso, nessun bordo d'allarme. Chi legge deve capire di aspettare. */
.tb-diretta--attesa{ background:#0d1524; border:1px solid rgba(255,255,255,.10);
  border-radius:10px; padding:14px 16px; text-align:center; }
.tb-diretta--attesa p{ margin:0; color:inherit; font-size:13.5px; font-weight:600; }
.tb-diretta--attesa p.muted{ margin-top:4px; font-weight:400; opacity:.72; font-size:12.5px; }