/* LA SCELTA DELLE COMPETIZIONI — struttura, e basta.
 *
 * Dav, 04/08: «in eventi del giorno mantieni le TRE COLONNE come nei widget, e sistema il layout
 * della parte centrale che si vede male». Nello screenshot che ha mandato ogni competizione si
 * prendeva una riga intera larga tutta la pagina, col numero delle partite a un palmo di distanza
 * dal nome: trentuno righe per trentuno partite. Qui le competizioni di una nazione stanno in tre
 * colonne, come nei riquadri dei widget, e ogni nazione è un pannello.
 *
 * 🔴 QUESTE REGOLE STAVANO DENTRO LA PAGINA, in un `<style>` in cima al frammento. Vincolo scritto
 * da Dav sul casinò, che vale qui uguale: «non hardcodare codice nella pagina ma in caso
 * aggiungilo in un css separato». Spostate, non riscritte: chi guardava la pagina ieri ritrova le
 * stesse misure, più la griglia.
 *
 * ⛔ SOLO STRUTTURA, nessun colore. Il foglio sta fra gli STRUTTURALI perché il frammento della
 * scelta è lo stesso anche sulle skin VESTITE (misurato: 54 blocchi-nazione su timerbet come su
 * studio5) — finché lo stile era dentro la pagina viaggiava con lei; da fuori deve caricarsi
 * anche là, o la pagina vestita resta senza. È la quinta volta che questa catena morde: vedi le
 * note di `betlist_struttura.css` e `casino_struttura.css`. Colori e sfondi restano del tema, che
 * si carica dopo e ha l'ultima parola.
 *
 * ══════════════════════════════════════════════════════════════════════════════════════════════
 * 🎯 05/08 — A BLOCCHI, come lo screen 2 di Dav (04/08 18:02: «la parte centrale riesci a farla
 * come nello screen 2, senza hardcodare css nell html»).
 *
 * ⚠️ E QUI SOTTO ORA CI SONO DEI COLORI, che la riga «SOLO STRUTTURA» vietava: la scheda dello
 * screen 2 ha un fondo suo, più chiaro della pagina, e senza quello non è una scheda — è un
 * bordo. Non è una deroga, è l'altra metà della richiesta di Dav, scritta da lui il 04/08:
 * *«non dobbiamo usare variabili diverse, ma solo quelle del tema»*. Quindi ogni colore qui
 * dentro è **una variabile del tema** (`--qt-background`, `--primary-border`, `--secondary-text`,
 * `--btn-primary`, `--hdr-grad`): su una skin vestita li riempie il suo tema, e la scheda esce
 * dei suoi colori senza che questo foglio sappia quali siano.
 * 👉 La regola che resta: **nessun valore di colore scritto a mano**. Se serve una tinta che non
 * ha un nome nel tema, non la si inventa qui — si chiede che il tema la dichiari.
 */

.sc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
/* APRI TUTTE / CHIUDI TUTTE, in coda alla testata (finitura fase 3). `margin-left:auto` li manda
 * a destra senza toccare il titolo e il conteggio, che restano dove sono.
 * ⛔ Nessun colore né sfondo: sono due parole, non due pastiglie — ereditano l'inchiostro della
 * testata come fa il resto di questa pagina. `[hidden]` esplicito perché `display:flex` qui
 * sopra vincerebbe sull'attributo (stessa ragione della riga di `.sc-naz-tutte`). */
.sc-testa-comandi{margin-left:auto;display:flex;gap:12px}
/* 🔴 13/08 — `.sc-tutti-chiudi` NON ESISTE PIU': i due comandi a parole sono diventati UNA
   freccia (Dav, 16:25). Il nome resta qui SOLO finche' qualcuno non conferma che nessun tema
   importato lo usa — toglierlo e' un `grep`, non una supposizione. 📌 E il bottone adesso
   contiene un `svg`, non del testo: `line-height` e `font-size` non lo toccano piu'. */
.sc-tutti-apri,.sc-tutti-chiudi{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;opacity:.75;text-decoration:underline}
.sc-tutti-apri:hover,.sc-tutti-chiudi:hover{opacity:1}
.sc-tutti-apri[hidden],.sc-tutti-chiudi[hidden],.sc-testa-comandi:empty{display:none}
.sc-titolo{font-weight:800;font-size:1.1rem}
.sc-conta{opacity:.8;font-size:.9rem}

.sc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
/* 🔴 GLI STESSI SEI CHIP, DUE VOLTE NELLA STESSA PAGINA (Angelo, 12/08 22:04, con la foto
   affiancata di 24248: «fammeli puliti»). Misurato sul servito, studio5 a 1600px,
   `/player/eventi-giorno/scegli`:

       centro   .sc-chip × 6   y=209   una riga
       rail     .sc-chip × 6   y=719 e y=751   43-45 × 25, su DUE righe

   Sono lo stesso comando scritto due volte: nella rail ce li ha chiesti Dav (11/08 13:14, «la
   stessa cosa sopra il menu sport»), nel centro ci sono da sempre. Dove il centro ce li ha già,
   quelli della rail non aggiungono niente e sembrano un secondo filtro.

   ⛔ Non si toglie il blocco di Dav: si spegne SOLO dove il doppione c'è. La domanda la fa al DOM
   — «questa pagina i chip ce li ha già?» — non a una classe di pagina, che non sa dire «a volte».
   👉 Dove restano da soli (`/…/selezione`, e il menu sport delle altre pagine) non cambia niente:
   è la carta A della domanda portata, e aspetta Angelo.

   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔴 13/08 — LA REGOLA COPRE DUE CASI IN PIÙ, e il secondo è un doppione che c'era già e che
   nessuno vedeva.

   ① Adesso i chip della barra stanno dentro un `rail-card` con la sua TESTATA: spegnere solo la
      griglia lascerebbe un riquadro intitolato e vuoto, che è proprio la cosa che le card di
      questa colonna ripetono di non fare. Si spegne il riquadro.
   ② 📏 **Il centro non li chiama sempre allo stesso modo**, e la regola guardava una classe sola:

          /player/eventi-giorno/scegli   centro `.sc-chips`   ← la vedeva
          /player/eventi-giorno          centro `.eg-chips`   ← NON la vedeva

      Misurato il 13/08 sul servito, betslot @1600 (studio5 su quella pagina la barra non ce l'ha):
      `/player/eventi-giorno` aveva **6 chip nella rail e 6 nel centro**. Era già un doppione ieri;
      con la testata sopra sarebbe diventato lo stesso titolo scritto due volte nella stessa pagina.
   ⚠️ Due selettori e non `:has(.sc-chips, .eg-chips)`: la lista dentro `:has()` non è supportata
   ovunque, e una riga che cade porta via con sé anche il caso che funzionava. */
body:has(.feed .sc-chips) .rail-l .sc-chips,
body:has(.feed .eg-chips) .rail-l .sc-chips{display:none}
body:has(.feed .sc-chips) .rail-l .rail-card:has(> .sc-chips),
body:has(.feed .eg-chips) .rail-l .rail-card:has(> .sc-chips){display:none}
.sc-chip{padding:4px 10px;border-radius:999px;border:1px solid currentColor;opacity:.65;
  text-decoration:none;font-size:.85rem}
.sc-chip.on{opacity:1;font-weight:700}

/* ══ I CHIP DEL PERIODO DENTRO LA BARRA SINISTRA — la disposizione di 24248, e solo quella ══
 *
 * Angelo, 12/08 22:04: *«fammeli puliti come si vedono su quel sito 24248»*. 📏 Misurato sulla sua
 * foto (scala 1:1 — le righe d'elenco sono 32px da loro, 33px da noi) e sul nostro servito:
 *
 *     da loro     TRE chip per riga, tutti della stessa larghezza (~68px in una colonna di ~234px)
 *     da noi      quattro sulla prima riga e due sulla seconda, larghi 43→79px a seconda della
 *                 parola: «1 HH» 43 · «OGGI + 1» 79   ← la frangia che lui ha cerchiato
 *
 * Quindi: una GRIGLIA a tre colonne uguali. Non è una misura scelta a occhio — è la sua foto, ed
 * è anche l'unica che entra: sei chip su una riga sola in 236px fanno ~39px l'uno, e «OGGI + 1»
 * non ci sta (per questo il sito di riferimento non li mette su una riga: nemmeno loro).
 *
 * ⛔ NIENTE COLORI: `.sc-chip` resta com'è (bordo `currentColor`, nessuna palette). Qui si
 * dispone e basta. L'altezza viene dal respiro verticale dei chip «puliti» che il prodotto ha già
 * al centro (`.eg-chip`, `padding:8px 18px` — quelli che Angelo NON ha cerchiato), non da un
 * numero nuovo; il passo interno (6px) e il fianco (6px) sono quelli che i riquadri di questa
 * colonna usano già (`.sportnav{padding:6px}`, `.wdg-league-list{padding:6px}`).
 * ⚠️ `white-space:nowrap` no: se un giorno una lingua allunga una parola, deve andare a capo
 * dentro il chip invece di sfondare la colonna. */
/* ⚠️ DUE CONTENITORI, UNA GRIGLIA (13/08 22:24). Angelo ha guardato la home e ha chiesto lo
 * stesso riquadro anche lì: *«quello cerchiato mettilo al posto di quello che è più pulito»*.
 * Le due colonne intitolano in due modi — `rail-card`+`rail-h` la barra delle altre pagine,
 * `wdg`+`sec-bar` la colonna composta della home — e ognuna tiene il SUO vestito. Quello che
 * condividono è la disposizione, e sta scritta una volta sola qui.
 * 📏 Sulla home i sei chip stavano su UNA riga da 220px: 29-41px l'uno, gap 0. */
/* 🔴 E `grid-auto-rows:1fr` NON È UNA RIFINITURA — misurato in onda sulla home di timerbet:
 *
 *     cella 71px · «OGGI + 1» chiede 64px di testo + 8 di respiro = 72     ← a capo per UN pixel
 *     e siccome le celle di una riga si stirano, la SECONDA riga diventava alta 49 contro 34
 *
 * Due rimedi che si tengono, perché uno solo non basta a nessuna delle due domande:
 *   · il respiro laterale scende a 2px → «OGGI + 1» sta su una riga sola (68 in 71) e il chip
 *     resta comunque staccato dal bordo;
 *   · `grid-auto-rows:1fr` → **se** un domani una lingua allunga una parola e il testo va a capo
 *     lo stesso, le righe restano ALTE UGUALE invece di sfalsarsi. È la differenza fra «pulito»
 *     e «pulito finché le parole sono queste».
 * ⛔ Niente `white-space:nowrap`: un chip che non può andare a capo sfonda la colonna, e la
 * colonna è larga 220px su una skin e 236 sull'altra. */
.rail-card > .sc-chips,
.wdg-tempi > .sc-chips{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;
  gap:6px;padding:6px;margin:0}
.rail-card > .sc-chips > .sc-chip,
.wdg-tempi > .sc-chips > .sc-chip{display:flex;align-items:center;justify-content:center;
  text-align:center;padding:8px 2px;line-height:1.15}

/* ══ LA BARRA DELLO SPORT ══
 * In cima al primo blocco di ogni sport, come nello screen 2. Il gradiente è quello che la casa
 * usa già per le barre-sezione (`--hdr-grad`), non uno nuovo: così una skin che ridipinge l'azione
 * ridipinge anche questa, ed è la ragione per cui quella variabile esiste. */
/* 🔴 IL RIPIEGO DI `--hdr-grad` NON È UN DI PIÙ — misurato sulle due skin servite, il 05/08:
 *     studio5    --hdr-grad = linear-gradient(180deg,#ff7e26,#c45000)   ✅
 *     timerbet   --hdr-grad = NON DEFINITA                              ❌
 * Su timerbet questa barra sarebbe uscita senza fondo, con il suo testo bianco
 * (`--btn-primary-text` = #ffffff) sopra un tema CHIARO (`--qt-background` = #d4dee8):
 * bianco su bianco, cioè una barra invisibile. Il ripiego è un ALTRO NOME DEL TEMA
 * (`--btn-primary`, che lì vale #1c4267), non un colore scritto a mano: la regola resta
 * «nessun valore di colore qui dentro» e la barra si vede su tutt'e due. */
.sc-sport{display:flex;align-items:center;gap:10px;margin:14px 0 8px;padding:8px 12px;
  border-radius:var(--r-s,9px);background:var(--hdr-grad,var(--btn-primary));
  color:var(--btn-primary-text,#fff);
  font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sc-sport .ic{width:18px;height:18px;flex:none}
/* 🔴 L'ICONA DEL CENTRO VA MISURATA, come quella del menu di sinistra (Dav, 07/08: «le icone
   dello sport devono essere uguali a quelle di sinistra»). Il centro adesso passa da
   `player/_ico.html`, che emette un <img class="ico"> — e `.ico img` in tb.css è `width:100%`:
   senza questa riga esce il pallone grande mezzo schermo, che è il difetto del 01/08 già curato
   tre volte altrove (`.wdg-sports-menu .ico`, `.lvm .ico`). Stessa misura del `.ic` qui sopra. */
.sc-sport .ico{width:18px;height:18px;flex:none;object-fit:contain}

/* IL PANNELLO DELLA NAZIONE. Il bordo tiene insieme le sue competizioni: con la lista piatta di
 * prima, a metà pagina non si sapeva più sotto quale nazione si stesse leggendo.
 * Dallo screen 2 è una SCHEDA: fondo proprio, più chiaro della pagina. `--qt-background` è il
 * fondo che la casa dà ai riquadri delle quote — lo stesso gradino di chiaro, già nel tema. */
.sc-naz{margin:0 0 12px;border:1px solid var(--primary-border,currentColor);
  border-radius:var(--r,12px);overflow:hidden;background:var(--qt-background,transparent)}
.sc-naz-h{display:flex;align-items:center;gap:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;padding:9px 12px;cursor:pointer;list-style:none}
/* la freccina di serie del browser se ne va: il segno di apertura è l'icona nostra, a destra */
.sc-naz-h::-webkit-details-marker{display:none}
.sc-naz-nome{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* i comandi stanno a destra, e il conto delle partite resta dov'era, prima di loro */
.sc-naz-h .sc-comp-n{margin-left:auto}
.sc-naz-vai,.sc-naz-apri,.sc-naz-tutte{flex:none;display:flex;align-items:center;
  color:var(--secondary-text)}
.sc-naz-vai:hover{color:var(--btn-primary)}
/* 🔴 «SCEGLI TUTTE» (Dav, 08/08): il bottone della selezione massiva, accanto al «vai».
 * È un `<button>` vero e non uno `<span>` — si raggiunge col tasto TAB e risponde a Invio, che
 * per un comando che spunta venti caselle conta più che per un'icona qualsiasi. Ma un bottone
 * porta con sé lo sfondo, il bordo e il padding del browser: qui si azzerano, o in mezzo a due
 * icone piatte comparirebbe un tasto grigio.
 * ⚠️ `line-height:0` insieme a `padding:0`: senza, il `<button>` si tiene l'altezza della riga di
 * testo e la riga della nazione cresce di qualche pixel solo dove il bottone c'è.
 * 📌 `[hidden]` esce dal flex: `display:flex` qui sopra vincerebbe su `display:none` di serie e
 * il bottone si vedrebbe anche senza JavaScript — cioè un comando che non risponde, che è
 * esattamente quello che nascere `hidden` doveva evitare. È una riga che sembra inutile e non lo
 * è: è la stessa forma di difetto del `.ico img{width:100%}` dei palloni giganti, una regola
 * generica che ne scavalca una specifica. */
.sc-naz-tutte{background:none;border:0;padding:0;line-height:0;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.sc-naz-tutte[hidden]{display:none}
.sc-naz-tutte:hover{color:var(--btn-primary)}
/* Spento e acceso si distinguono a colpo d'occhio: quando sono già tutte spuntate il segno è
 * pieno, e il clic seguente le toglie. Lo stato lo dice `aria-pressed`, che è anche quello che
 * sente chi legge con la voce: un solo attributo per il colore e per la parola. */
.sc-naz-tutte[aria-pressed="true"]{color:var(--btn-primary)}
/* aperta in giù, chiusa a sinistra: è il verso dello screen, e lo dice la scheda stessa */
.sc-naz-apri{transition:transform .15s ease}
.sc-naz:not([open]) .sc-naz-apri{transform:rotate(-90deg)}
.sc-naz:not([open]) .sc-naz-h{border-bottom:0}
.sc-naz[open] .sc-naz-h{border-bottom:1px solid var(--primary-border,currentColor)}
.sc-naz-sport{font-weight:500;text-transform:none;color:var(--secondary-text);font-size:.85rem}

/* ══ LE TRE COLONNE ══
 * Numero FISSO, non `auto-fill`: la stessa lezione pagata sulla griglia del casinò il 04/08 —
 * `repeat(auto-fill, minmax(...))` dà il numero di colonne che ci sta, che a 1320px non è tre.
 * Dav ha chiesto tre come nei widget, e tre sono a qualunque larghezza da tablet in su. */
.sc-comps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 16px;padding:8px 12px}
.sc-comp{display:flex;align-items:flex-start;gap:10px;padding:6px 2px;min-width:0}
.sc-comp label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;flex:1;min-width:0}
.sc-comp label > input{margin-top:2px;flex:none}
/* 🔴 IL NOME VA A CAPO, NON SI TAGLIA — e prima si tagliava, di proposito («il nome non deve
 * spingere il numero fuori dalla colonna: taglia lui, non la riga»). Due cose l'hanno cambiato:
 *  1. col nome della nazione davanti («Argentina – Primera LPF, Reserves») i puntini si mangiano
 *     proprio la competizione, cioè l'unica parte che distingue una riga dall'altra. Misurato sul
 *     servito il 05/08, subito dopo la pubblicazione delle 18:20: «Argentina – Primera L…»,
 *     «International Clubs – …», «Denmark – A Liga, Wo…».
 *  2. nello screen 2 di Dav i nomi lunghi VANNO A CAPO: «Francia – Trophee des Champions» sta su
 *     due righe. Quindi non è una scelta mia, è quello che c'è nell'immagine.
 * Il numero resta al suo posto: `align-items:flex-start` lo tiene in alto, allineato alla prima
 * riga del nome, invece di farlo scivolare a metà di un nome su due righe. */
/* `white-space` e `overflow` si dichiarano invece di limitarsi a togliere le righe vecchie: un
 * tema che mettesse `nowrap` sulle sue etichette rimetterebbe i puntini senza che nessuno abbia
 * cambiato questo foglio. Detto qui, la riga va a capo comunque. */
.sc-comp label > span{white-space:normal;overflow:visible;overflow-wrap:anywhere}
.sc-comp-n{margin-left:auto;color:var(--secondary-text);font-size:.85rem;white-space:nowrap}

/* la barra di conferma resta a vista mentre si scorre: con trenta nazioni, un bottone in fondo
   alla pagina è un bottone che non si trova */
.sc-vai{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;
  padding:10px 0;backdrop-filter:blur(3px)}
/* 🔴 …ma una barra appiccicata in fondo COPRE l'ultimo pannello: nella foto del 04/08 l'ultima
 * nazione (RUSSIA) si leggeva attraverso il velo sfocato, con la sua casella sotto il bottone —
 * spuntabile solo scorrendo alla cieca. Lo spazio lo deve fare il form, non l'occhio di chi
 * guarda: `sticky` non toglie ingombro al flusso, e nessuno se ne accorge finché la pagina non è
 * abbastanza lunga da scorrere. */
.sc{padding-block-end:56px}
.sc-vai button{padding:10px 22px;border:0;border-radius:8px;font-weight:800;cursor:pointer}
.sc-vuoto{padding:26px 12px;text-align:center;opacity:.85}

/* Sotto i 1000px tre colonne di nomi di campionato diventano tre colonne di puntini di
 * sospensione: si scende a due, e sul telefono a una. Misurato sui nomi veri («UEFA Champions
 * League Women», «Campeonato De Reserva De Primera Division C»), non su nomi corti di comodo. */
@media (max-width: 1000px){
  .sc-comps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
}
@media (max-width: 640px){
  .sc-comps{grid-template-columns:minmax(0,1fr)}
}

/* IL TETTO RAGGIUNTO (11/08): la riga che spiega perché le caselle si sono spente.
   ⛔ Solo struttura, nessun colore proprio: prende quelli della pagina che la ospita — è la
      regola di Dav sui travasi, e vale anche per una riga aggiunta oggi. */
.sc-tetto{margin:0 0 10px;padding:8px 12px;border-radius:8px;font-size:.92em;
  border:1px solid currentColor;opacity:.85}
.sc-comp input[type=checkbox]:disabled + span,
.sc-comp label:has(input:disabled){opacity:.45}

/* IL TORNEO SENZA QUOTE LO DICE (14/08): il riquadro che sostituisce il rimbalzo muto sulle
   spunte. Prima un torneo senza mercati ricadeva sull'elenco senza una parola, e chi ci arrivava
   concludeva «il menu non funziona per questo sport» — misura del PM su otto sport, e mezza
   giornata persa a cercare un difetto di navigazione che in metà dei casi non c'era.
   ⛔ Solo struttura, nessun colore proprio: prende quelli della pagina che lo ospita, come
      `.sc-tetto` qui sopra. È la regola di Dav sui travasi, e vale anche per un riquadro nato
      oggi. */
.sc-muta{margin:0 0 12px;padding:14px 16px;border-radius:8px;
  border:1px solid currentColor;opacity:.9}
.sc-muta-t{margin:0 0 4px;font-weight:600}
.sc-muta-n{margin:0 0 8px;font-size:.92em;opacity:.85}
.sc-muta-x{margin:0;font-size:.92em}
/* 🏆 Le schede degli eventi che la griglia non sa disegnare (antepost): un elenco di strade, non
   una tabella finta. Sta dentro `.sc-muta` perché è lo stesso riquadro — cambia la frase, non il
   posto: chi ha imparato dove guardare non deve impararlo due volte. */
.sc-schede{margin:6px 0 8px;padding-inline-start:18px;font-size:.95em}
.sc-schede li{margin:2px 0}

/* ══ IL SEGNO DELLE STATISTICHE accanto a una partita (Gian + Angelo, 13/08) ══
 * Solo struttura: misura, allineamento e un tocco di opacità che segue il passaggio del mouse —
 * il COLORE è quello della riga che lo ospita (`currentColor` attraverso la maschera dell'icona),
 * perché lo stesso segno esce nella griglia prematch e nella banda del live, che sono vestite da
 * due fogli diversi. Una tinta scritta qui ne sfonderebbe una delle due. */
.tb-stat-segno{display:inline-flex;align-items:center;justify-content:center;
  color:inherit;text-decoration:none;opacity:.7;line-height:0}
.tb-stat-segno:hover,.tb-stat-segno:focus-visible{opacity:1}
/* nella banda del live sta in colonna con pin e stella: stessa larghezza dei suoi vicini */
.lc-side .tb-stat-segno{width:100%}
/* il segno sulla scheda-partita delle liste: in alto a destra, fuori dal link che copre la testa */
.match{position:relative}
.match-segni{position:absolute;inset-block-start:6px;inset-inline-end:8px;line-height:0}

/* ══ LA TENDINA DELLE STATISTICHE, sotto la riga (Gian, 13/08 — prova reversibile) ══
 * Solo struttura: il pannello prende il fondo di chi lo ospita, l'inchiostro della riga e un
 * bordo `currentColor` a bassa opacità — la stessa tendina esce dentro cinque contenitori vestiti
 * da fogli diversi, e una tinta scritta qui ne sfonderebbe almeno uno. */
.tb-stat-segno{background:none;border:0;padding:0 2px;cursor:pointer;font:inherit;color:inherit}
/* 🔴 14/08 — QUI C'ERA UN SECONDO `opacity:.7`, DENTRO UN ELEMENTO GIÀ VELATO A .7.
 * Le due opacità non si scelgono a vicenda: si MOLTIPLICANO. La freccia usciva a **0,49** —
 * il glifo più sbiadito di tutta la pagina, e nessuno l'aveva deciso: il velo di `.tb-stat-segno`
 * qui sopra è già quello che smorza il comando a riposo (torna a 1 col mouse), e questa riga lo
 * rifaceva una seconda volta sul solo `▾`.
 *
 *     misurato sul servito, il rapporto di contrasto del `▾` prima e dopo:
 *       betslot   1,44 → 1,70      studio5   2,03 → 2,69      timerbet   2,40 → 3,82
 *
 * ⛔ NON chiude il difetto e non pretende di farlo: su betslot il `▾` resta a 1,70 perché
 * l'inchiostro della RIGA che lo ospita è già chiaro, e quello è un colore che dichiara la skin —
 * la coppia non è nostra e il numero va a chi la possiede. Qui si toglie solo il velo di troppo,
 * che è nostro e che nessuna skin può correggere.
 * 📌 Alzare un'opacità non può peggiorare un contrasto su NESSUNA skin: avvicina l'inchiostro al
 * suo colore dichiarato e lo allontana dal fondo, qualunque fondo sia. È l'unica cura di colore
 * che si può fare senza sapere che palette ha il cliente. */
.tb-stat-freccia{font-size:.7em;margin-inline-start:1px}
.tb-stat-pan > td{padding:0}
/* 🔴 UN RIQUADRO CON LA SUA ALTEZZA, non due righe di testo (Gian, 13/08: *«se il ponte regge, lì
 * dentro ci va l'iframe e la tendina non cambia forma»*). L'altezza NON è scelta a occhio: è la
 * stessa del riquadro della diretta (`.tb-campetto{height:340px}` in `tracker.css`), che è l'unica
 * pagina di un fornitore che questo prodotto incorpora già. Domani l'iframe entra e la tendina
 * resta identica — è tutto il punto di darle l'altezza oggi.
 * ⚠️ `min-height` e non `height`: se il contenuto crescesse (una lingua lunga, due righe di nome)
 * il riquadro si allunga invece di tagliare. */
.tb-stat-dentro{display:flex;flex-direction:column;gap:6px;padding:10px 12px;
  border:1px solid currentColor;border-radius:8px;margin:2px 0 8px;min-height:340px}
/* ⛔ SOTTO I 700px DI SCHERMO il riquadro alto 340 sarebbe mezza pagina: lì vale il contenuto, e
 * l'altezza torna quella che serve. Un pannello che riempie lo schermo di un telefono non è «il
 * posto pronto», è una pagina intera aperta per sbaglio. */
@media (max-width:700px){.tb-stat-dentro{min-height:0}}
.tb-stat-link{font-weight:700;text-decoration:none;color:inherit}
.tb-stat-link:hover{text-decoration:underline}
.tb-stat-url{font-size:.78em;opacity:.6;word-break:break-all;user-select:all}
/* la PAGINA dentro la tendina (Gian): riempie il riquadro, che ha gia' la sua altezza */
.tb-stat-frame{flex:1;width:100%;min-height:300px;border:0;border-radius:6px;background:var(--qt-background,#0a2036)}
.tb-stat-link--piccolo{font-size:.82em;font-weight:600;opacity:.75}
@media (max-width:700px){.tb-stat-frame{min-height:420px}}
/* 🔴 IL RIQUADRO SOPRA LA PAGINA — Gian, 18/08 01:56: *«i popup per le statistiche di Betradar
 * devono essere SENZA CORNICE, SENZA URL: deve essere un popup custom in JavaScript o quello che
 * vuoi»*.
 * ⚖️ È la decisione che mancava, e chiude una questione misurata: una finestra aperta col comando
 * del browser **non può** nascondere la barra dell'indirizzo (`location=no` è ignorato da ogni
 * browser dal 2015, e sta scritto nel `<script>` di `_statistiche_popup.html`). L'unico modo è un
 * riquadro **dentro** la pagina — e adesso è autorizzato.
 * ⛔ E NON è un terzo modo di aprire le statistiche: prende il posto della tendina, sotto lo stesso
 * interruttore `PONTE`. Ponte acceso → questo riquadro · ponte spento → la finestra di prima, che
 * è quella che i dati ce li ha davvero. */
/* 🔁 18/08 (w-mercati) — LA PARETE E L'OMBRA PASSANO DA UN GETTONE, non da un colore a mano.
 * La guardia di questo foglio (`test_i_colori_del_foglio_passano_dalle_VARIABILI_DEL_TEMA`, regola
 * di Dav del 04/08) era rossa da giorni su due valori soli: `rgba(0,0,0,.62)` qui e
 * `rgba(0,0,0,.5)` nell'ombra sotto. Non erano un capriccio — un velo e un'ombra non sono colori
 * di tavolozza — ma scritti così **nessuna skin poteva schiarirli**, ed è proprio la ragione per
 * cui quella regola esiste. ⇒ gettone + ripiego: chi non lo dichiara vede esattamente quello di
 * prima (i due valori sono gli stessi), chi vuole un velo più chiaro adesso ha dove dirlo.
 * I due nomi sono dichiarati in `player/tb.css` (`:root`), così non sono nomi inventati. */
.tb-stat-velo{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;
  justify-content:center;padding:16px;background:var(--tb-velo,rgba(0,0,0,.62))}
.tb-stat-modale{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px;
  width:min(1100px,96vw);height:min(760px,88vh);border-radius:10px;
  background:var(--qt-background,#0a2036);color:var(--primary-text,#eaf2f8);
  box-shadow:0 18px 60px var(--tb-ombra,rgba(0,0,0,.5))}
/* il frame riempie il riquadro: qui l'altezza la dà il riquadro, non il `min-height` della tendina.
 * ⚠️ E `.tb-stat-dentro` porta bordo, margine e `min-height:340px` — giusti dentro una tendina,
 * sbagliati qui: il riquadro È già la scatola, e un secondo bordo dentro il primo si vede. */
.tb-stat-dentro--modale{flex:1;min-height:0;border:0;margin:0;padding:0}
.tb-stat-modale .tb-stat-frame{flex:1;min-height:0}
.tb-stat-titolo{font-weight:800;font-size:.9em;padding-inline-end:28px}
/* 🔴 44×44, e sul telefono non è un dettaglio: lì il riquadro è a tutto schermo, quindi «cliccare
 * fuori» non esiste e la tastiera non ha ESC — **il ✕ è l'unica via d'uscita**. Misurato prima di
 * scriverlo: con `padding:4px 8px` il tasto stava a **33×28**, sotto la regola di casa (44×44 al
 * dito, la stessa della freccetta di Stefano). */
.tb-stat-chiudi{position:absolute;inset-block-start:2px;inset-inline-end:2px;background:none;
  border:0;color:inherit;font:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:.8;
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.tb-stat-chiudi:hover,.tb-stat-chiudi:focus-visible{opacity:1}
/* ⛔ SUL TELEFONO il riquadro prende tutto: 88vh su 390px è già quasi tutto, e i margini laterali
 * tolgono spazio a una pagina che è essa stessa una tabella di numeri. */
@media (max-width:700px){
  .tb-stat-velo{padding:0}
  .tb-stat-modale{width:100vw;height:100vh;border-radius:0}
}
/* IL RIQUADRO DEL SEGNO (Angelo, 13/08 23:24, «copia questa uguale»): angoli tondi attorno alle
 * quattro stanghette, e il bordo prende l'inchiostro della riga — nessuna tinta scritta a mano,
 * perché lo stesso segno esce dentro cinque contenitori vestiti da fogli diversi.
 * ⚠️ La freccia resta FUORI dal riquadro: nel suo modello il riquadro contiene solo le stanghette,
 * e la freccia è la nostra regola («il segno deve dire cosa succede»), non la sua. */
.tb-stat-segno{display:inline-flex;align-items:center;gap:2px;vertical-align:middle}
/* 🔴 IL RIQUADRO STA SUL CONTENITORE, NON SULL'ICONA — e l'ha detto lo scatto ingrandito ×4:
 * col bordo sull'`<i>` si vedevano le quattro stanghette e del riquadro **solo una scheggia**.
 * Il perché: quell'elemento è dipinto con una MASCHERA (è così che l'icona prende il colore della
 * riga), e la maschera ritaglia anche il bordo — resta solo dove il disegno è pieno.
 * 👉 Un `<span>` attorno: la maschera resta sull'icona, il riquadro è di chi non è mascherato. */
.tb-stat-box{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;border-radius:4px;padding:2px;opacity:.75}
.tb-stat-segno i.ic{font-size:12px}
.tb-stat-segno:hover .tb-stat-box{opacity:1}