/* ==========================================================================
 * IL CORPO DEL CMS — lo stile delle regioni e la griglia che le disegna.
 *
 * 🔴 PERCHÉ STA IN UN FILE E NON PIÙ IN UN `<style>` (14/08, carta della lentezza di Angelo).
 * Erano **22 KB dentro il documento**, su `base.html` + `widgets_home.html` +
 * `_colonne_chiudi.html` — cioè su quasi ogni pagina del giocatore, riscaricati a **ogni**
 * colpo perché il browser non può metterli in cache. Misurato: la home di timerbet portava
 * 216 KB di roba in linea, e questo era il blocco più grosso di tutti. In un foglio lo si
 * scarica una volta e poi costa **zero** (nginx: `max-age=604800`, e gzip).
 * A differenza delle cache del server — che servono al 25% che arriva a freddo — questo lo
 * pagano **tutti** i colpi, caldi e freddi.
 *
 * ⛔ IL `<link>` STA DOVE STAVA LO `<style>`, cioè in `widgets/_cms.html`, e NON in `base.html`.
 * È il vincolo per cui lo stile era lì: *«il corpo del CMS si porta dietro il proprio stile,
 * qualunque base lo ospiti, invece di dipendere da chi lo include»*. Spostare il `<link>` nella
 * base rompe proprio la proprietà che quel commento difende — e il difetto tornerebbe come è
 * già tornato tre volte per `chrome_struttura.css`: manca a UNA strada sola e le icone escono
 * a mezzo schermo. Un `<link>` ripetuto non fa danno: il browser scarica il foglio una volta.
 *
 * 📌 L'ORDINE DI CASCATA NON CAMBIA: `<style>` e `<link>` contano nell'ordine del documento,
 * e questo sta dove stava quello — cioè **dopo** i fogli della testa e dopo il tema. Le due
 * note qui sotto («questo blocco sta DOPO il `<link>`, quindi vinceva lui») restano vere.
 *
 * ⚠️ Gli appunti restano nel file, come in `chrome_struttura.css` / `eventi_struttura.css`:
 * i fogli statici in questa casa li tengono (verificato sul servito). Il taglia-appunti
 * (`player_ui/senza_appunti.py`) agisce sull'HTML e sul pacchetto `casa.css`, non qui.
 * ==========================================================================*/

  /* Il layout delle REGIONI: header pieno, poi rail sx | centro | rail dx, poi footer pieno.
     Su mobile impila. I colori vengono dai token del tema della skin (var(--...)). */
  .cms-page{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start;width:100%}
  @media(min-width:900px){
    /* larghezze dal tema (--cms-cols); le colonne vuote arrivano a «0» e collassano */
    .cms-page{grid-template-columns:var(--cms-cols,236px minmax(0,1fr) 300px);
      /* 🔴 04/08 — LA RIGA «barra», e perché il difetto di Jesper era QUI e non nel markup.
         Nell'HTML la nav è al posto giusto (dopo `cms-header`, prima di `cms-main`); ma in una
         griglia con le aree dichiarate, un figlio **senza area** non resta dov'è scritto: viene
         messo in una riga IMPLICITA, che nasce **dopo** tutte quelle nominate. Risultato: la
         barra scendeva in fondo, sopra il piede — l'ordine del sorgente non conta, conta l'area.
         Con la riga dedicata la barra torna dove la si legge. Se la barra non c'è la riga resta
         vuota e alta zero: non lascia spazio. */
      /* 🔴 09/08 — LA RIGA «menu», e il difetto era LO STESSO di quello qui sopra, cinque giorni
         dopo. Il menu a tre voci di Jesper (19) usciva su timerbet e NON su studio5 — cioè la
         skin di Jesper. Causa: studio5 ha la home COMPOSTA A WIDGET, che non passa né da
         `home.html` né da `theme_family/palinsesto_colonne.html`, i due template dove il menu
         era stato incluso. Passa di qui.
         ⚠️ E metterlo nel markup non sarebbe bastato: senza un'area sua sarebbe finito in una
         riga implicita **dopo** tutte le nominate, cioè in fondo alla pagina — esattamente come
         era successo alla barra sport. Il commento qui sopra era già la risposta, scritta prima
         che la domanda si ripresentasse. */
      grid-template-areas:"header header header" "menu menu menu" "barra barra barra" "railL main railR" "footer footer footer"}
    .cms-header{grid-area:header}.cms-rail_left{grid-area:railL}.cms-main{grid-area:main}
    .cms-rail_right{grid-area:railR}.cms-footer{grid-area:footer}
    /* Il menu sta SOPRA la barra sport: la barra filtra dentro «in diretta», il menu dice in
       quale delle tre sezioni sei. Sotto i 900px `grid-area` non vale e conta l'ordine del
       sorgente — che è lo stesso: il menu è incluso prima. */
    .cms-page>.msz{grid-area:menu}
  }
  /* 🔴 LA SCHEDINA CHE SEGUE LA PAGINA (Dav 04/08 08:17) — solo con l'opzione accesa.
     Sono DUE cose, e la seconda è quella che si dimentica:
       1. `position:sticky` la tiene a vista mentre si scorre il palinsesto;
       2. `max-height` + `overflow-y:auto` le danno una barra di scorrimento SUA quando diventa
          più alta della finestra. Senza la 2, un pannello appiccicato taglia il proprio tasto
          per giocare: con otto eventi in schedina il pulsante di conferma finisce fuori
          schermo e non lo raggiungi più scorrendo la pagina, perché la pagina non si muove.
     ⚠️ `align-self:stretch` sulla colonna NON è decorazione: `.cms-page` ha `align-items:start`,
     quindi la regione è alta quanto il suo contenuto e uno `sticky` dentro non ha spazio per
     scorrere — resterebbe fermo e sembrerebbe che l'opzione non funzioni.
     Solo da 900px in su: sotto, il coupon è il foglio che sale dal basso ed è già sempre a vista. */
  @media(min-width:900px){
    /* ⚠️ La classe la mette il SERVER — `cms-region--segue`, aggiunta sulla sezione nel ciclo
       delle regioni qui sotto — e non un `:has()`. Prima era `.cms-region:has(...)`, e la
       verifica esterna di
       un'altra lane ha fatto notare la fragilità: dove `:has()` manca, la colonna non si stira,
       lo sticky non ha spazio e l'opzione **non fa niente in silenzio** — il difetto peggiore,
       perché sembra che la si sia accesa e non funzioni. Una classe scritta dal server non ha
       versioni di browser. */
    /* 🔴 13/08 — `align-self:stretch` TOLTO, e la ragione è che la riga sopra è invecchiata con
       la riparazione del 12/08. Quando lo sticky stava sul COUPON, stirare la colonna serviva a
       dargli spazio in cui scorrere: giusto, e il commento qui sopra lo spiega. Ma dal 12/08 lo
       scroller è **la colonna** (`tb.css`, `.cms-region--segue{position:sticky}`), e una colonna
       stirata all'altezza della propria riga **non ha più margine per scorrere lei**: si stacca
       subito e se ne va su.

       📏 Misurato sul servito il 13/08, ed è la differenza fra le due pagine della carta 117-j:

           /player/ (composta, passa di qui)   align-self=stretch  colonna 876px in griglia 1072
                                               → in fondo la colonna sta a -527: il coupon esce
           /player/eventi-giorno (non composta) align-self=auto     colonna 561px in griglia 4261
                                               → in fondo -213: il coupon resta a vista

       ⚠️ Non è «una riga di troppo»: sono **due riparazioni della stessa carta che si annullano**,
       e la seconda sembrava funzionare perché la pagina su cui è stata provata non passa di qui.
       Le due righe vanno insieme — è la stessa frase che il blocco del 12/08 scrive in `tb.css`,
       letta dall'altro lato. */
    /* 🔴 `overscroll-behavior:auto` SCRITTO, e non semplicemente tolto (Dav, 08/08 08:22).
       *«arrivato alla fine permetta di scrollare anche la right bar del coupon, così che possa
       vedere tutto il contenuto sotto. Com'è adesso invece il contenuto resta fermo e quindi
       diventa non visibile»*. Il nome del comportamento è **scroll chaining**: il coupon arriva
       al suo fondo e il movimento continua sulla pagina. Qui era spento da `contain`, e chi ha
       un banner sotto il coupon non lo vede MAI.

       ## Perché il `contain` c'era — cercato prima di toglierlo, com'è giusto
       L'ha messo il commit `c360357e9` (04/08), quello che ha creato l'opzione. Il suo messaggio
       elenca per nome `position:sticky`, `max-height` e `overflow-y:auto` e **non nomina mai
       `overscroll-behavior`**: non è una scelta discussa e poi documentata, è il modo di casa
       copiato di fianco. Il modo di casa è `menu_live.css`, dove la riga ha il suo perché
       scritto — *«senza questa, in fondo scrolla la pagina»* — ed è un menu alto quanto lo
       schermo, dove la pagina che parte da sola sotto il dito è un fastidio.
       ⚠️ Sul coupon quel perché si capovolge: la pagina che riparte **è quello che Dav chiede**.
       Sotto c'è la sua colonna, non il vuoto. Quindi non stiamo disfando una decisione presa per
       questo elemento — ne stiamo togliendo una che non era mai stata presa.

       📌 E si SCRIVE `auto` invece di cancellare la dichiarazione proprio per questo: la riga
       tolta si riscrive da sola la prossima volta che qualcuno copia il blocco accanto. Scritta,
       dice che qui la catena è voluta.

       ⛔ Perimetro: questa regola vive dentro `.wdg-betslip--segue`, classe che il server mette
       solo con `opts.segui == "si"`. Con l'opzione spenta non c'è la classe, non c'è la barra
       interna, e non c'è niente da incatenare: la pagina scorreva e scorre uguale.
       Misurato tutt'e due i casi in `tests/proof_coupon_scroll_chaining.py`. */
    /* ⛔ LA REGOLA NON STA PIÙ QUI (12/08): è in `tb.css`, accanto alle altre di
       appiccicamento. Qui viveva dentro il markup di un widget, quindi sulle pagine dove il
       widget non si rende la classe arrivava **senza il suo stile** — e il coupon non si
       attaccava, senza che niente si lamentasse. Il perché lungo, con i numeri, è là. */
  }
  /* 🔴 04/08 — «LA PAGINA DEVE RESTARE LARGA E RIEMPIRE» (Jesper, IN-DIRETTA). Il `width:100%`
     non è cintura e bretelle: senza, su studio5 a 1920px la pagina si fermava a **1686px** con
     due bande vuote da 117px per lato — misurato sul servito.
     Il perché, che non si indovina leggendo: il `body` di quel tema è `display:flex` in
     **colonna**, e in flexbox un margine `auto` sull'asse TRASVERSALE **spegne lo stretch**
     (regola dello stretch: vale solo se nessuno dei due margini di traverso è `auto`). Quindi il
     `margin:0 auto` qui sotto — giusto e innocuo quando il body è un blocco — smetteva di
     centrare-e-basta e cominciava a **restringere**: il main si dimensionava al proprio contenuto
     (1686px) e si centrava. Nessuna regola dichiarava una larghezza: cercarla è tempo perso, la
     larghezza la toglieva il margine. E per lo stesso motivo `align-self:stretch` NON è la cura:
     provato sul vivo, non sposta di un pixel finché i margini restano `auto`.
     ⚠️ Non cambia niente per le altre skin: dove vale il `max-width:1240px` qui sotto, `100%`
     viene comunque tagliato a 1240 e i margini `auto` continuano a centrare — identico a prima.
     Si vede solo dove la skin ha già detto `max-width:100%`, cioè dove voleva riempire e non
     riusciva. */
  .cms-full-main{width:100%;max-width:1240px;margin:0 auto;padding:16px}
  .cms-region{min-width:0;display:flex;flex-direction:column;gap:14px}
  .wdg{min-width:0}
  /* 🔴 DELL'HEADER QUI STA SOLO IL COLORE. La FORMA (display, allineamento, padding) la governa
     `chrome_struttura.css`, che è dove vivono le varianti dello stile (strada C, Dav 02/08) —
     e questo blocco `<style>` sta DOPO il `<link>`, quindi vinceva lui: «doppia» e «menu-sport»
     restavano su una riga sola (`align-items:center` invece di `stretch`) e le due fasce non si
     impilavano. Misurato: la barra utility usciva larga 60px al centro invece che da bordo a
     bordo. Due posti che dicono la stessa cosa divergono sempre; la forma ne ha uno solo. */
  .wdg-header{background:var(--navy-1,#0a3350);border-radius:var(--r,12px)}
  .wdg-header .wdg-brand{font-weight:800;font-size:18px;color:var(--ink,#eaf2f8);text-decoration:none}
  .wdg-header-actions{display:flex;gap:8px;align-items:center}
  .wdg-balance{color:var(--money,#ffb23c);font-weight:700}
  .wdg-top-league .sec-bar,.wdg-most-played .sec-bar,.wdg-movers .sec-bar{font-weight:700;margin-bottom:8px}
  .wdg-league-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .wdg-league-list a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;
    color:var(--ink,#eaf2f8);text-decoration:none}
  .wdg-league-list a:hover{background:var(--navy-2,#0f3f61)}
  .wdg-league-list .muted{color:var(--mute,#9fbdd2);font-size:12px}
  /* 🔴 LA TENDINA SPORT A TRE LIVELLI È USCITA DA QUI (08/08) — sta in
     `player/sport_albero.css`, dentro il pacchetto `casa.css`.
     Il motivo è misurato: quelle regole vivevano in questo `<style>`, e questo `<style>` ce
     l'ha solo la pagina COMPOSTA. Da quando lo stesso menu va anche su
     `/player/eventi-giorno/scegli` e `…/selezione` (Jesper, 08/08 08:55), lì il markup arrivava
     senza vestito — stessa famiglia del marchio a 100px e del «Campionati Top».
     Il markup sta in `player/_sport_albero.html`. */
  .wdg-event-code{padding:12px 14px;background:var(--navy-1,#0a3350);border-radius:var(--r,12px)}
  .wdg-code-lab{font-size:12px;color:var(--mute,#9fbdd2);display:block;margin-bottom:6px}
  .wdg-code-row{display:flex;gap:8px}
  .wdg-code-input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--line,#16496b);
    background:var(--navy-0,#052033);color:var(--ink,#eaf2f8)}
  .wdg-hero{padding:16px;background:linear-gradient(135deg,var(--navy-1,#0a3350),var(--navy-2,#0f3f61));
    border-radius:var(--r,12px)}
  .wdg-hero-ev{display:flex;flex-direction:column;margin-bottom:10px}.wdg-hero-ev b{font-size:18px}
  .wdg-hero .odds{display:flex;gap:8px;flex-wrap:wrap}
  .wdg-winners{overflow:hidden;background:var(--navy-1,#0a3350);border-radius:999px;padding:8px 14px}
  .wdg-winners-track{display:flex;gap:26px;white-space:nowrap}
  .wdg-win{color:var(--mute,#9fbdd2);font-size:13px}
  .wdg-win .money{color:var(--money,#ffb23c);font-weight:700}
  .wdg-palinsesto-table{overflow-x:auto}
  .tb-palinsesto{width:100%;border-collapse:collapse;font-size:13px}
  .tb-palinsesto th{text-align:center;color:var(--mute,#9fbdd2);font-weight:600;font-size:11px;
    text-transform:uppercase;padding:6px 4px;border-bottom:1px solid var(--line,#16496b)}
  .tb-palinsesto th.tb-h-ev{text-align:left}
  .tb-palinsesto td{padding:6px 4px;border-bottom:1px solid var(--line,#16496b);text-align:center;vertical-align:middle}
  .tb-palinsesto .tb-time{white-space:nowrap;color:var(--mute,#9fbdd2);font-size:12px}
  .tb-palinsesto .tb-ev{text-align:left}.tb-palinsesto .tb-ev a{color:var(--ink,#eaf2f8);text-decoration:none}
  /* 🔴 LA RIGA LIVE COME LA VUOLE JESPER (05/08): due nomi impilati e i due numeri a destra,
     OGNUNO ALLINEATO ALLA SUA SQUADRA. L'allineamento è il punto della richiesta — un punteggio
     sfasato fa leggere il gol dell'altra squadra — e qui lo garantisce la STRUTTURA: griglia a
     due colonne, quattro figli in ordine (casa, punti casa, ospite, punti ospite), quindi ogni
     numero nasce nella riga del suo nome. Non due colonne affiancate che si allineano finché le
     altezze combaciano: un nome lungo che va a capo alza la SUA riga e si porta dietro il SUO
     numero, che è proprio il caso da provare.
     `align-items:baseline` allinea la cifra alla linea di scrittura del nome, non alla scatola:
     con due corpi di testo diversi è l'unica che si vede dritta. */
  .tb-palinsesto .tb-ev-live{display:grid;grid-template-columns:1fr auto;column-gap:12px;
    row-gap:1px;align-items:baseline}
  .tb-palinsesto .tb-sq{min-width:0;overflow-wrap:anywhere}
  /* tabular-nums: le cifre hanno tutte la stessa larghezza, così i due numeri restano incolonnati
     fra loro anche quando uno passa da 9 a 10 — se no il punteggio "balla" a ogni gol. */
  .tb-palinsesto .tb-pt{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;
    color:var(--ink,#eaf2f8)}
  /* il minuto in ALTO a sinistra: la cella dell'ora è la prima della riga, e senza questo si
     centrerebbe in verticale rispetto ai due nomi invece di stare in cima. */
  .tb-palinsesto .tb-time{vertical-align:top}
  /* 🔧 UN CONTENITORE SOLO (Jesper 05/08 20:24): «tempo sopra l'evento e tutto a sinistra».
     La cella unica prende il posto di `tb-time` + `tb-ev`, quindi va riportata a sinistra — le
     celle della tabella sono centrate per via delle colonne quota — e il `nowrap` di `tb-time`
     qui non deve valere, o i nomi lunghi non andrebbero più a capo. */
  .tb-palinsesto .tb-live-cella{text-align:left;vertical-align:top;white-space:normal;
    padding:6px 8px}
  /* una colonna sola: il minuto sopra, il blocco squadre sotto, stesso bordo sinistro.
     `align-items:stretch` perché la griglia dei nomi/punteggi deve prendere tutta la larghezza
     della cella: se si restringesse al contenuto, i due numeri si staccherebbero dal bordo
     destro e smetterebbero di incolonnarsi fra loro. */
  .tb-palinsesto .tb-live-blocco{display:flex;flex-direction:column;align-items:stretch;gap:2px}
  /* 🔴 RIGA1 DA BLOCCO A FLEX, e il motivo è la tendina «info» che Jesper ci ha messo dentro
     (08/08, precisazione): *«dentro tb-live-riga1, allineata a destra»*. A destra dentro un
     blocco vuol dire `float` o `text-align`, e tutt'e due spostano anche il minuto; nel flex la
     dà `margin-inline-start:auto` sulla sola tendina, e ● LIVE / minuto / set restano dov'erano.
     `position:relative` è l'aggancio del pannello: si apre appeso a QUESTA riga.

     ⚠️ `gap` NON si mette, ed è una trappola vera: gli spazi fra pallino, parola e minuto sono
     margini scritti uno per uno (`.tb-live-eti{margin-inline:.3em}`), e un `gap` li sommerebbe
     tutti allargando l'assetto che Jesper ha approvato stamattina. Il flex qui serve solo a
     spingere una cosa a destra, non a rifare la spaziatura. */
  .tb-palinsesto .tb-live-riga1{display:flex;align-items:center;position:relative;text-align:left}
  /* 🔴 LA PAROLA «LIVE» accanto al pallino (Jesper, 08/08 07:16: «deve sempre esserci ● LIVE»).
     Stesso colore e stesso peso del pallino — sono una cosa sola a vedersi, come nel `● LIVE` che
     `_match.html` ha già: se la parola fosse del colore del testo, «●» rosso e «LIVE» bianco
     sembrerebbero due elementi diversi appiccicati.

     ⚠️ LO SPAZIO STA QUI, non nel testo. Gli span di questa riga sono attaccati l'uno all'altro
     nel sorgente **apposta** (a capo fra due `<span>` inline diventa uno spazio a video, e il
     minuto si staccherebbe dal set): infatti oggi si legge «●84:05», senza spazio. Un
     `&nbsp;` nel markup avrebbe dato lo spazio ma sarebbe stato invisibile a chi rilegge, e non
     si sarebbe potuto spegnere da una skin. `margin-inline` dà i due spazi di «● LIVE 34'» — a
     sinistra dal pallino, a destra verso il minuto — e sparisce con la voce se qualcuno la
     spegne.

     📌 Classe sua, come gli altri tre pezzi: `.tb-live-eti{display:none}` toglie la parola e
     lascia il pallino, senza toccare minuto, set e punteggio. */
  .tb-palinsesto .tb-live-eti{color:var(--live);font-weight:800;margin-inline:.3em}
  /* 🔴 MINUTO, SET e PUNTO DEL GAME: TRE BLOCCHI, non un testo solo (Jesper, 06/08).
     Ognuno ha la sua classe, quindi una skin può spegnerne uno senza toccare gli altri:
     `.tb-live-set{display:none}` toglie il set e lascia il minuto, che prima era impossibile —
     erano una stringa sola dentro un `<span>` solo.

     ⚠️ IL SEPARATORE STA NEL CSS, non nel testo. Prima il « / » era dentro la stringa composta
     dal server: chi spegneva il set si portava dietro una barra orfana. Come `::before` del set
     appare e sparisce col blocco a cui appartiene, da solo.

     ⚠️ `:empty` invece di non disegnare il tag: il contenitore deve ESISTERE anche quando il
     dato non c'è, perché è lì che il poll scrive quando il minuto arriva (`[data-tb-line]`,
     `[data-tb-fase]`). Toglierlo dal markup vorrebbe dire una riga che non si aggiorna più —
     un riquadro vuoto in meno e una partita ferma in più. Vuoto non si disegna, e quando si
     riempie ricompare da sé, senza una riga di JavaScript. */
  .tb-palinsesto .tb-live-minuto:empty,
  .tb-palinsesto .tb-live-set:empty{display:none}
  /* 🔴 LA BARRA SOLO FRA DUE COSE, e l'ho vista nello scatto e non nel codice: alla prima
     versione bastava `.tb-live-set:not(:empty)::before`, e sulla riga Mexico–Panama — che ha i
     parziali ma non il minuto — usciva «/ 1° tempo», con la barra orfana in testa. È lo stesso
     difetto del «:» orfano del punteggio, in un altro punto. Il separatore appartiene alla
     COPPIA: si disegna solo se il minuto pieno sta davvero prima del set pieno.

     ⚠️ SPAZI UNIFICATORI (`\00a0`) e non spazi normali, da quando riga1 è un flex (08/08, la
     tendina «info»). In un blocco `content:" / "` dà «36' / 2° set»; in un flex ogni pezzo è un
     elemento a sé e lo spazio in testa e in coda alla riga si mangia — usciva «36'/2° set»,
     attaccato. Nessuno l'ha chiesto e non si vede nel codice: si vede solo nello scatto, ed è il
     tipo di scheggia che un cambio di `display` si porta dietro in silenzio. */
  .tb-palinsesto .tb-live-minuto:not(:empty)+.tb-live-set:not(:empty)::before{
    content:"\00a0/\00a0";opacity:.55}
  /* 🔽 LA TENDINA «info» E IL SUO PANNELLO (Jesper, 08/08 — richiesta delle 07:23 e precisazione
     subito dopo). Le statistiche non stanno più sotto le squadre: stanno dietro la parola «info»,
     in fondo a `tb-live-riga1` e allineate a destra. Le CLASSI sono quelle di prima
     (`tb-live-stat`, `tb-live-stat-una`): chi le spegne o le ricolora da skin non si accorge
     della tendina, e `.tb-live-stat{display:none}` continua a toglierle.

     🔴 IL PANNELLO È FUORI DAL FLUSSO — è **la** precisazione, non un ritocco: *«quando si apre
     NON prende spazio, si sovrappone invece di spingere giù il resto»*. Stesso mestiere di
     `.tb-ou-sel`, la tendina della linea Under/Over più sotto: `position:absolute` appeso al
     genitore `position:relative`, che qui è `tb-live-riga1`. Nel flusso, ogni tendina aperta
     allungherebbe la sua riga e farebbe saltare le altre a mezzo schermo — cioè lo spazio che
     questa card doveva togliere, restituito al primo clic.

     ⚠️ SFONDO PIENO e `z-index`, e non sono decorazione: sovrapposto e trasparente, i nomi delle
     squadre di sotto si leggono ATTRAVERSO i numeri degli angoli — due partite diverse mescolate
     in tre righe. Ci si accorge solo guardando la tendina APERTA, mai da chiusa.

     📌 `inset-inline-end:0`: il pannello si apre allineato a destra come la parola, così su una
     cella stretta non esce dal bordo. E `flex-direction:column` invece del `flex-wrap` di prima —
     dentro un riquadro stretto una voce per riga si legge, quattro in fila no.

     📌 Il marcatore nativo del `<summary>` via (`list-style:none` + la riga `-webkit-`, che
     Safari vuole ancora) e uno nostro al suo posto: quello di sistema è un triangolo pieno che a
     .76em, in una riga già fitta, si legge come un errore di stampa. Stessa scelta del selettore
     lingua (`.wdg-ub-caret`), e ruota allo stesso modo quando è aperta.
     `cursor:pointer` e `user-select:none`: senza il primo la parola non sembra cliccabile, senza
     il secondo un doppio clic per aprirla la seleziona invece di aprirla. */
  .tb-palinsesto .tb-live-info{margin-inline-start:auto;flex:0 0 auto}
  .tb-palinsesto .tb-live-info-eti{list-style:none;cursor:pointer;user-select:none;
    display:inline-flex;align-items:center;gap:4px;font-size:.76em;opacity:.75;
    padding:1px 6px;border-radius:999px;border:1px solid var(--line,#16496b);white-space:nowrap}
  .tb-palinsesto .tb-live-info-eti::-webkit-details-marker{display:none}
  .tb-palinsesto .tb-live-info-eti:hover{opacity:1}
  .tb-palinsesto .tb-live-info-freccia{font-size:9px;transition:transform .15s ease}
  .tb-palinsesto .tb-live-info[open] .tb-live-info-freccia{transform:rotate(180deg)}
  .tb-palinsesto .tb-live-stat{position:absolute;top:calc(100% + 3px);inset-inline-end:0;
    z-index:45;display:flex;flex-direction:column;gap:2px;min-width:max-content;padding:6px 9px;
    background:var(--navy-0,#052033);border:1px solid var(--line,#16496b);
    border-radius:var(--r,8px);box-shadow:0 8px 24px rgba(0,0,0,.45);
    font-size:.76em;font-variant-numeric:tabular-nums}
  .tb-palinsesto .tb-live-stat:empty{display:none}
  .tb-palinsesto .tb-live-stat-una b{font-weight:800}
  /* ⭐ la stella accanto alle due squadre, come nel bersaglio: la riga diventa
     [stella][blocco squadre], e il blocco prende tutto lo spazio che resta — così i due punteggi
     restano attaccati al bordo destro e incolonnati fra loro.
     `align-items:start`: su un nome che va a capo la stella resta in cima, dov'è la prima
     squadra, invece di scendere a metà fra le due. */
  .tb-palinsesto .tb-riga-sq{display:flex;align-items:start;gap:8px}
  .tb-palinsesto .tb-riga-sq .tb-ev-live{flex:1;min-width:0}
  .tb-palinsesto .tb-fav{cursor:pointer;opacity:.6;line-height:1.4}
  .tb-palinsesto .tb-fav.mdi-star{opacity:1}
  .tb-palinsesto .tb-ev .muted{display:block;color:var(--mute,#9fbdd2);font-size:11px}
  .tb-palinsesto .tb-more a{color:var(--or,#ff7900);text-decoration:none;font-size:12px;white-space:nowrap}
  /* la tendina della linea Under/Over (punto 7 di Jesper): piccola, sopra la quota, dentro la
     cella «Over». Sta nella riga perché le linee cambiano da un evento all'altro.
     ⚠️ **Fuori dal flusso**, e si vede nella foto perché è nata sbagliata: messa nel flusso
     alzava SOLO la cella «Over» e il suo chip scendeva sotto la fila delle altre quote — una
     riga che si legge storta. Ora la tendina è appoggiata sopra e lo spazio glielo fanno TUTTE
     E DUE le celle del gruppo, così i due chip restano incolonnati fra loro. */
  .tb-palinsesto .tb-odd--ou{position:relative;padding-top:17px}
  .tb-palinsesto .tb-ou-sel{position:absolute;top:1px;left:2px;width:calc(100% - 4px);
    padding:0 1px;font-size:10px;line-height:1.4;color:var(--mute,#9fbdd2);
    background:var(--navy-0,#052033);border:1px solid var(--line,#16496b);border-radius:5px;
    cursor:pointer}
  /* 🫥 «nessun evento» aveva DUE smorzature addosso: un colore già muto e per giunta
     `opacity:.5`, che insieme facevano 2,79 : 1 — un messaggio che il giocatore deve leggere,
     scritto come se fosse una decorazione. Il colore muto resta (dice «qui non c'è niente»,
     ed è giusto); il velo sale a .85, misurato 5,26. Il minimo che passava era .8 (4,84). */
  .tb-empty{color:var(--mute,#9fbdd2);opacity:.85}
  /* 📺 l'icona TV accanto al minuto: piccola come le altre della riga, e del colore del testo
     che la ospita (`currentColor`) — così su una skin chiara non resta un francobollo scuro. */
  .tb-palinsesto .tb-tv{display:inline-flex;vertical-align:-2px;margin-left:5px;
    color:var(--or,#ff7900)}
  .tb-palinsesto .tb-tv svg{width:13px;height:13px}
  /* 🔴 IL PALINSESTO STA NELLO SPAZIO CHE HA (PM, 05/08) — misurato sul servito di studio5:
     la riga chiedeva 861px e il riquadro ne ha 716. Sbordava di 145 a 1280 e di 476 a 390, e
     fuori schermo restavano UNDER/OVER e la freccia. Il punto non è che sia brutto: la PAGINA
     non scorre, scorre solo questo riquadro, quindi chi guarda non vede nessuna barra e crede
     che quelle quote non ci siano. Un pezzo di listino invisibile, non un difetto d'aspetto.

     Due misure, e sono quelle: il `min-width:46px` del chip diventa 0 (il chip prende la cella,
     `width:100%`) e il padding laterale delle celle scende da 4 a 2. Misurato sul servito:
     861 → 716 esatti, con le colonne di quota fra 45 e 53px — si leggono.

     ⚠️ **Provato e scartato: `table-layout:fixed` col `<colgroup>`.** Sembrava la strada pulita
     (colonne dichiarate invece che dedotte dal contenuto) e invece schiaccia le quote a **5px**
     l'una: la prima riga della testata ha le celle a `colspan` dei nomi-gruppo, e col layout
     fisso è da lì che il browser deriva le colonne. Ci stava tutto e non si leggeva niente —
     una tabella che «entra» e che nessuno può usare. Il layout automatico qui è quello giusto,
     bastava togliergli lo spintone. */
  .tb-palinsesto .tb-odd .chip{min-width:0;width:100%;padding-left:3px;padding-right:3px}
  .tb-palinsesto td,.tb-palinsesto th{padding-left:2px;padding-right:2px}
  /* 🔴 QUANDO LO SPAZIO NON BASTA, LA RIGA VA A CAPO invece di accorciarsi: a 390px servirebbero
     861px e non c'è misura che li faccia stare in una riga sola — dieci quote da 15px l'una non
     si leggono. Quindi la riga diventa due: sopra ora ed evento, sotto le quote che vanno a capo
     da sole. **Nessuna colonna sparisce**: è la condizione che il PM ha posto.
     L'intestazione in cima si spegne perché lì non è più sopra niente — e la sigla del mercato
     se la porta ogni quota addosso (`data-lab`, messo nel template). Senza, resterebbe una
     colonna di numeri di cui non sai su cosa stai puntando.

     ⚠️ **Si guarda il RIQUADRO, non la finestra**, e non è pignoleria: misurato sul servito, a
     1280px il palinsesto ha 716px e a **1024 ne ha 460** — meno che a 820, dove le colonne
     laterali sono già sparite e si prende tutto. Con una `@media` sulla finestra il 1024 restava
     scoperto: tabella larga 631 in un riquadro da 460, **255 quote fuori schermo**. Trovato
     provandolo a sette larghezze, non ragionandoci. La soglia è 680 perché la riga, stretta al
     massimo, chiede 631: il resto è margine per una quota lunga.
     Un browser che non conosce `@container` non entra qui e si tiene la barra di prima: si
     degrada a com'era, mai a peggio. */
  .wdg-palinsesto-table{container-type:inline-size}
  @container (max-width:680px){
    .tb-palinsesto,.tb-palinsesto tbody{display:block}
    .tb-palinsesto thead{display:none}
    .tb-palinsesto tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 3px;
      padding:7px 4px;border-bottom:1px solid var(--line,#16496b)}
    .tb-palinsesto tr.tb-lega-h{display:block;padding:0}
    /* 🔴 E QUI SOTTO IL MOTIVO PER CUI LA REGOLA `[hidden]` DEVE ESSERE ESPLICITA (Jesper, 08/08
       10:00). L'aggiornamento dal vivo nasconde la banda di un campionato rimasto senza eventi
       mettendole `hidden`; ma `[hidden]{display:none}` del browser ha specificità (0,0,0) e le due
       righe qui sopra la scavalcano — a schermo stretto la banda sarebbe rimasta VISIBILE, cioè il
       difetto sarebbe stato curato sul desktop e vivo sul telefono, che è dove Jesper guarda.
       ⚠️ Le due forme insieme e non una: `.tb-palinsesto tr[hidden]` pareggia la specificità di
       `.tb-palinsesto tr.tb-lega-h` (0,2,1) e vincerebbe solo per ordine di scrittura — cioè
       finché nessuno sposta una riga. Quella con la classe (0,3,1) vince e basta. */
    .tb-palinsesto tr[hidden],.tb-palinsesto tr.tb-lega-h[hidden]{display:none}
    .tb-palinsesto td{border-bottom:0;padding:0}
    .tb-palinsesto .tb-time{flex:0 0 auto;order:1;text-align:left}
    .tb-palinsesto .tb-ev,.tb-palinsesto .tb-live-cella{flex:1 1 55%;order:2;min-width:0}
    .tb-palinsesto .tb-more{flex:0 0 auto;order:3}
    .tb-palinsesto .tb-odd{order:4;flex:1 1 52px;min-width:48px;
      display:flex;flex-direction:column;align-items:stretch;gap:1px}
    .tb-palinsesto .tb-odd::before{content:attr(data-lab);font-size:9px;line-height:1.1;
      text-transform:uppercase;color:var(--mute,#9fbdd2);text-align:center}
    .tb-palinsesto .tb-odd--vai{flex:1 1 100%}
  }
  /* Barra di NAVIGAZIONE in alto (le sezioni del sito). */
  .wdg-topnav{display:flex;gap:2px;overflow-x:auto;background:var(--navy-1,#0a3350);border-radius:var(--r,12px);padding:0 8px}
  .wdg-topnav::-webkit-scrollbar{display:none}
  .wdg-topnav a{padding:13px 16px;white-space:nowrap;color:var(--ink,#eaf2f8);font-weight:700;font-size:13.5px;border-bottom:3px solid transparent}
  .wdg-topnav a:hover{color:var(--or,#ff7900)}
  .wdg-topnav a.on{border-bottom-color:var(--or,#ff7900);color:var(--or,#ff7900)}
  /* Barra sport in alto (tab orizzontali). */
  .wdg-sports-tabs{display:flex;gap:2px;overflow-x:auto;background:var(--navy-1,#0a3350);border-radius:var(--r,12px);padding:4px}
  .wdg-sports-tabs::-webkit-scrollbar{display:none}
  .wdg-tab{padding:9px 14px;white-space:nowrap;color:var(--mute,#9fbdd2);font-weight:700;font-size:13px;border-radius:8px}
  .wdg-tab:hover{color:var(--ink,#eaf2f8)}
  .wdg-tab.on{background:var(--or,#ff7900);color:var(--on-or,#2b1400)}
  /* Lista A-Z sport. */
  .wdg-az-list{list-style:none;margin:0;padding:4px;display:flex;flex-direction:column;gap:1px}
  .wdg-az-list a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink,#eaf2f8);font-size:13px}
  .wdg-az-list a:hover{background:var(--navy-2,#0f3f61)}
  .wdg-az-list a.on{background:var(--or,#ff7900);color:var(--on-or,#2b1400)}
  .wdg-live .sec-bar .live-dot{color:var(--live,#ff4655)}
  /* === SLIDER, MODO «MULTIPLO» (Dav 14/08 11:17) ==============================================
     Le diapositive spente restano `display:none`, quindi in griglia **non creano una traccia**:
     le colonne sono esattamente quante ne sono accese, e sono uguali. ⛔ Nient'altro: il modo
     «singolo» non passa di qui e resta identico a ieri — è la richiesta, «SOLO la quantità».
     📌 `minmax` e non `1fr` secco: la traccia deve poter scendere sotto la larghezza naturale
     dell'immagine, o sei banner da 1350px affiancati allargherebbero la fascia invece di
     stringersi dentro. È il pavimento implicito delle griglie, e qui morde.
     🔴 E IL PAVIMENTO È 112px, non 0 (Dav 11:53: *«devi ottimizzarli anche in base al window e
     mostrarli responsive»*). Con `minmax(0,1fr)` sei diapositive su 320px diventavano 45px l'una:
     «responsive» letto come «si schiacciano», che è il contrario di quello che serve. Con il
     pavimento, la SCELTA dice **quante al massimo** e la larghezza decide **quante ce ne stanno**:
     dove non ci stanno, le altre scorrono col dito — che è anche la richiesta di Jesper delle
     11:02. ⚠️ È lo **stesso 112** della fila di tessere, e di proposito: un numero solo in casa
     invece di due che un giorno divergono. */
  .wdg-slider--multi{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);
    gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    scrollbar-width:none}
  .wdg-slider--multi::-webkit-scrollbar{display:none}
  .wdg-slider--multi .wdg-slide{min-width:0;scroll-snap-align:start}
  .wdg-slider--multi .wdg-slide img{width:100%;height:100%;object-fit:cover}
  /* === FILA DI TESSERE (Jesper 14/08) ==========================================================
     Due sue frasi, a un'ora di distanza, e la seconda corregge la mia consegna:
       10:43  «6 BANNER PICCOLI FISSI uno accanto all'altro»
       11:02  «allora falli IN FILA DA UNO CHE SCORRONO SUL TELEFONO»
     ⇒ **Una riga sola, sempre.** Sul largo ci stanno tutte e sei e la fila è ferma; dove non ci
     stanno, scorre col dito. Non sono due comportamenti: è **lo stesso** — una fila che scorre
     quando non ci sta — e per questo NON c'è una `@media` che indovini «telefono». La riga si
     stringe quando la colonna si stringe, e su un computer con la finestra stretta fa la stessa
     cosa che fa un telefono, invece di una terza.
     ⛔ La prima versione mandava le tessere A CAPO (`auto-fit` + wrap): sei su un computer, tre
     più tre su un telefono. Lui l'ha vista e ha chiesto l'opposto. Chi rimette un `wrap` qui
     disfa quella risposta.
     📏 Il numero che tiene insieme le due frasi è il PAVIMENTO della tessera: 112px. A 1360 la
     colonna centrale è ~811, sei tessere da 112 più i vuoti ne chiedono 712 → ci stanno, e l'`1fr`
     le allarga a 128 fino al bordo (a filo, com'è stato chiesto). A 390 e a 320 ne servirebbero
     712 su 370 e 300 → non ci stanno, e la fila scorre. Alzare quel 112 vuol dire far scorrere
     anche il computer; abbassarlo, tessere che a filo diventano francobolli.
     🔴 E `auto-fit` NON `auto-fill`, imparato misurando: con `auto-fill` a 1360 la griglia apriva
     7 colonne per 6 tessere — l'ultima vuota, e la fila finiva prima del bordo.
     📌 La barra si nasconde come già fa `.wdg-sports-tabs` qui sopra: su un telefono lo
     scorrimento è il dito, e una barra grigia sotto le tessere è solo sporcizia. */
  .wdg-fila-giochi{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(112px,1fr);
    gap:8px;align-items:start;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scrollbar-width:none}
  .wdg-fila-giochi::-webkit-scrollbar{display:none}
  .wdg-fila-giochi>*{scroll-snap-align:start}
  .wdg-fg-t{display:flex;flex-direction:column;gap:5px;min-width:0;
    color:var(--ink,#eaf2f8);text-decoration:none}
  /* `aspect-ratio` + `object-fit` tengono la fila alla stessa altezza qualunque proporzione
     abbia la copertina del fornitore: senza, una sola immagine quadrata alzerebbe la riga.
     ⚠️ E la proporzione **non si sceglie qui**: è `4/3`, la stessa di `.tb-cg` in `casa.css`, che
     è il riquadro con cui la pagina del casinò disegna le stesse identiche copertine. Misurate
     sul servito, le immagini del fornitore vanno da 0,74 a 1,39 di rapporto — non esiste una
     proporzione «naturale» da rispettare, quindi tanto vale che lo stesso gioco sia tagliato allo
     stesso modo nei due posti. Con `1/1`, che avevo messo per primo, i titoli larghi uscivano
     mangiati ai lati e la stessa copertina appariva diversa dalla vetrina. */
  .wdg-fg-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;
    background:var(--navy-2,#0f3f61)}
  .wdg-fg-vuota{background:var(--navy-2,#0f3f61)}
  /* Il nome sotto, su una riga sola: un titolo lungo non deve alzare la tessera accanto. */
  .wdg-fg-nome{display:block;font-size:12px;line-height:1.25;font-weight:600;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wdg-fg-t:hover .wdg-fg-nome{color:var(--or,#ff7900)}
  /* === WIDGET STRUTTURALI (workflow cms-structural-widgets): barra utility + footer === */
  /* BARRA UTILITY (sottile) — la striscia in cima, sopra logo e menu. Sottile per definizione:
     poco padding verticale, testo piccolo. Colori dai token del tema (con fallback). */
  .wdg-utility_bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
    flex-wrap:wrap;padding:5px 12px;font-size:12.5px;line-height:1.2;
    background:var(--navy-1,#0a3350);border-radius:var(--r,12px);color:var(--ink,#eaf2f8)}

  /* --- SINISTRA: selettore lingua (dropdown nativo <details>, nessun JS) --- */
  .wdg-ub-lang{position:relative}
  .wdg-ub-lang>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
    padding:4px 8px;border-radius:999px;color:var(--ink,#eaf2f8);white-space:nowrap;user-select:none}
  .wdg-ub-lang>summary::-webkit-details-marker{display:none}
  .wdg-ub-lang>summary:hover{background:var(--navy-2,#0f3f61)}
  .wdg-ub-globe{opacity:.85}
  .wdg-ub-cur{font-weight:700}
  .wdg-ub-caret{color:var(--mute,#9fbdd2);font-size:10px;transition:transform .15s ease}
  .wdg-ub-lang[open]>summary .wdg-ub-caret{transform:rotate(180deg)}
  .wdg-ub-langlist{position:absolute;top:calc(100% + 6px);inset-inline-start:0;z-index:60;margin:0;
    padding:4px;list-style:none;min-width:160px;background:var(--navy-1,#0a3350);
    border:1px solid var(--line,#16496b);border-radius:var(--r,12px);
    box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .wdg-ub-langlist li{margin:0}
  .wdg-ub-langlist a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
    color:var(--ink,#eaf2f8);text-decoration:none;white-space:nowrap;font-size:13px}
  .wdg-ub-langlist a:hover{background:var(--navy-2,#0f3f61)}
  .wdg-ub-langlist a.on{color:var(--or,#ff7900);font-weight:700}
  /* 🔴 LA TENDINA DEI TRE NUMERI **NON STA PIÙ QUI** — Angelo, 15/08 00:04, col video:
     *«soltanto in QUESTA pagina funziona bene… in tutte le pagine del sito, quando apri la
     tendina, la pagina ti combina questo e si vede tutto male»*.
     📏 Misurato prima di spostare: il markup della tendina esce su **47** pagine, e questo foglio
     lo caricano **7**. Sulle altre 40 il pannello usciva senza forma — testo bianco dentro la
     barra arancione, che spingeva giù la testata. Non era «non c'è»: era «non è vestito».
     👉 Quindi le regole viaggiano **col markup**, dentro `widgets/header/_auth.html`: è la stessa
     regola di casa che `player_ui.mobile.FOGLI_STRUTTURALI` scrive nero su bianco e che
     `theme_family/_conto_nav.html` applica già. Un frammento che si fida di un foglio esterno
     funziona finché qualcuno non lo include altrove. */
  /* le bandiere sono <img> di SVG con viewBox 640x480: senza misura uscirebbero enormi.
     Tonde come le altre di casa (.tb-flag-r), 16px perche' la striscia e' sottile. */
  .wdg-ub-flag{width:16px;height:16px;flex:none;border-radius:50%;object-fit:cover}
  .wdg-ub-lang-static{display:inline-flex;align-items:center;gap:6px;color:var(--mute,#9fbdd2);
    padding:4px 6px;white-space:nowrap}

  /* --- DESTRA: azioni di giocatore/ospite --- */
  .wdg-ub-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-inline-start:auto}
  .wdg-ub-bal{text-decoration:none;padding:3px 8px;border-radius:999px;
    border:1px solid var(--line,#16496b);white-space:nowrap}
  .wdg-ub-bal:hover{border-color:var(--or,#ff7900)}
  .wdg-utility_bar .money{color:var(--money,#ffb23c);font-weight:800}
  .wdg-ub-link,.wdg-ub-exit{color:var(--mute,#9fbdd2);text-decoration:none;padding:4px 6px;white-space:nowrap}
  .wdg-ub-link:hover,.wdg-ub-exit:hover{color:var(--ink,#eaf2f8)}
  .wdg-ub-btn{background:var(--or,#ff7900);color:var(--on-or,#2b1400);text-decoration:none;
    font-weight:800;padding:5px 12px;border-radius:999px;white-space:nowrap}
  .wdg-ub-btn:hover{filter:brightness(1.06)}
  .wdg-ub-msg{position:relative;display:inline-flex;align-items:center;gap:5px;
    color:var(--ink,#eaf2f8);text-decoration:none;padding:4px 6px;white-space:nowrap}
  .wdg-ub-msg:hover{color:var(--or,#ff7900)}
  .wdg-ub-msg-ico{font-size:14px;line-height:1}
  .wdg-ub-badge{min-width:16px;height:16px;padding:0 4px;border-radius:999px;
    background:var(--live,#ff4655);color:#fff;font-size:10px;font-weight:800;line-height:16px;
    text-align:center;box-shadow:0 0 0 2px var(--navy-1,#0a3350)}

  /* Su schermi stretti la barra resta sottile: cade l'etichetta «Messaggi», resta l'icona+badge. */
  @media(max-width:520px){
    .wdg-ub-msg-lab{display:none}
    .wdg-ub-cur{max-width:96px;overflow:hidden;text-overflow:ellipsis}
  }
    /* ⛔ IL PIEDE DEI LINK NON STA PIÙ QUI (12/08): regole in `skin_fixes.css`, che entra in
       `casa.css` e arriva a tutte e tre le skin. Qui dentro non arrivavano sulle pagine che
       non rendono questo widget, e il bollino dell'età restava senza il suo arancio. */
    /* ⛔ IL PIEDE LEGALE NON STA PIÙ QUI (12/08): le sue regole sono in `skin_fixes.css`,
       che entra in `casa.css` e quindi arriva a tutte e tre le skin. Qui vivevano dentro il
       widget, e su 7 pagine su 12 non arrivavano: il fondo scuro spariva. Il perché lungo,
       coi numeri, è nel foglio e nel referto delle 218 regole. */
  @media(max-width:640px){
    .wdg-footer_legal{flex-direction:column;align-items:flex-start}
    .wdg-footer_legal .wdg-legal-side{max-width:none;width:100%}
  }
  /* BANDA CASINÒ — la fascia CTA a piena larghezza che chiude la home. Colori dai token del tema
     (con fallback): --or l'accento, --navy-1 il pannello, --navy-0 il fondo, --ink il testo, --mute il secondario. */
  .wdg-casino-band{width:100%}
  .wdg-cb-inner{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;
    gap:18px 28px;padding:26px 28px;border-radius:var(--r,12px);border:1px solid var(--line,#16496b);
    background:linear-gradient(120deg,var(--navy-1,#0a3350) 0%,var(--navy-0,#052033) 100%)}
  /* alone caldo dietro il testo: profondità senza immagini esterne */
  .wdg-cb-glow{position:absolute;inset:auto auto -40% -12%;width:62%;height:180%;pointer-events:none;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--or,#ff7900) 42%,transparent),transparent);
    filter:blur(6px);opacity:.55}
  /* semi delle carte, puramente decorativi (SVG inline) */
  .wdg-cb-suits{position:absolute;right:-8px;bottom:-16px;width:150px;height:150px;pointer-events:none;
    fill:var(--or,#ff7900);opacity:.08}
  .wdg-cb-text{position:relative;z-index:1;flex:1 1 320px;min-width:0}
  .wdg-cb-kicker{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:13px}
  .wdg-cb-mark{font-size:20px;line-height:1}
  .wdg-cb-live{display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;
    font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:11px;color:var(--or,#ff7900);
    background:color-mix(in srgb,var(--or,#ff7900) 16%,transparent)}
  .wdg-cb-dot{width:8px;height:8px;border-radius:50%;background:var(--or,#ff7900);
    animation:wdg-cb-pulse 1.6s ease-out infinite}
  @keyframes wdg-cb-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--or,#ff7900) 60%,transparent)}
    70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
  .wdg-cb-title{margin:0;color:var(--ink,#eaf2f8);font-weight:800;line-height:1.12;
    font-size:clamp(20px,3.4vw,30px)}
  .wdg-cb-sub{margin:8px 0 0;color:var(--mute,#9fbdd2);font-size:14px;max-width:54ch}
  .wdg-cb-bal{margin:10px 0 0;color:var(--mute,#9fbdd2);font-size:13.5px}
  .wdg-cb-bal .money{font-size:16px}
  .wdg-cb-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:14px 0 0;padding:0}
  .wdg-cb-tags li{font-size:11.5px;font-weight:700;color:var(--mute,#9fbdd2);padding:4px 10px;
    border-radius:999px;border:1px solid var(--line,#16496b);
    background:color-mix(in srgb,var(--navy-1,#0a3350) 55%,transparent)}
  .wdg-cb-cta{position:relative;z-index:1;flex:0 0 auto}
  .wdg-cb-btn{font-size:15px;padding:12px 22px;color:var(--on-or,#2b1400);
    background:linear-gradient(120deg,var(--or,#ff7900),var(--or-2,#ff9124))}
  .wdg-cb-arrow{display:inline-block;margin-left:2px;transition:transform .15s}
  .wdg-cb-btn:hover .wdg-cb-arrow{transform:translateX(3px)}
  @media(max-width:640px){
    .wdg-cb-inner{padding:20px 18px}
    .wdg-cb-cta{flex:1 1 100%}
    .wdg-cb-btn{width:100%}
    .wdg-cb-suits{opacity:.05}
  }
  @media(prefers-reduced-motion:reduce){
    .wdg-cb-dot{animation:none}
    .wdg-cb-arrow{transition:none}
  }
  .wdg-help_band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:14px 22px;background:var(--navy-1,#0a3350);border-radius:var(--r,12px);padding:16px 20px}
  .wdg-help_band .hb-intro{display:flex;align-items:center;gap:12px;min-width:0}
  .wdg-help_band .hb-ico{font-size:26px;line-height:1}
  .wdg-help_band .hb-title{display:block;color:var(--ink,#eaf2f8);font-weight:800;font-size:16px}
  .wdg-help_band .hb-sub{display:block;color:var(--mute,#9fbdd2);font-size:12.5px}
  .wdg-help_band .hb-links{display:flex;flex-wrap:wrap;gap:8px}
  .wdg-help_band .hb-links a{display:flex;align-items:center;gap:10px;padding:10px 14px;
    border-radius:var(--r,12px);border:1px solid var(--line,#16496b);color:var(--ink,#eaf2f8);
    text-decoration:none;transition:background .15s,border-color .15s,color .15s}
  .wdg-help_band .hb-emo{font-size:18px;line-height:1}
  .wdg-help_band .hb-txt{display:flex;flex-direction:column;line-height:1.25}
  .wdg-help_band .hb-txt b{font-weight:700;font-size:13.5px}
  .wdg-help_band .hb-txt small{color:var(--mute,#9fbdd2);font-size:11px}
  .wdg-help_band .hb-links a:hover{background:var(--or,#ff7900);border-color:var(--or,#ff7900);color:var(--on-or,#2b1400)}
  .wdg-help_band .hb-links a:hover .hb-txt small{color:var(--on-or,#2b1400)}
  @media(max-width:640px){
    .wdg-help_band{flex-direction:column;align-items:stretch}
    .wdg-help_band .hb-links{flex-direction:column}
  }
  /* EDIT MODE: ogni widget prende un contorno e una barretta per spostarlo/toglierlo. */
  .cms-edit .cms-w{position:relative;outline:1px dashed transparent;outline-offset:3px;border-radius:8px}
  .cms-edit .cms-w:hover{outline-color:var(--or,#ff7900)}
  .cms-w-bar{position:absolute;top:-11px;right:6px;display:none;gap:2px;z-index:5;
    background:var(--navy-2,#0f3f61);border:1px solid var(--or,#ff7900);border-radius:8px;padding:2px 4px}
  .cms-edit .cms-w:hover>.cms-w-bar{display:flex}
  .cms-w-bar button{background:none;border:0;color:var(--ink,#eaf2f8);cursor:pointer;font-size:12px;
    line-height:1;padding:2px 4px;border-radius:4px}
  .cms-w-bar button:hover{background:var(--or,#ff7900);color:var(--on-or,#2b1400)}
  .cms-w-bar .cms-w-name{color:var(--mute,#9fbdd2);font-size:10px;padding:2px 4px;max-width:120px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cms-edit .cms-w{cursor:grab}.cms-edit .cms-w:active{cursor:grabbing}
  .cms-edit .cms-region{min-height:40px}
  .cms-edit .cms-region.drag-over{outline:2px dashed var(--or,#ff7900);outline-offset:4px;border-radius:10px}
  .cms-drop-hint{color:var(--mute,#9fbdd2);font-size:12px;opacity:.6;padding:12px;text-align:center;
    border:1px dashed var(--line,#16496b);border-radius:10px}
  /* LAYER 3 — barra colori inline: cambia i token principali sulla preview. */
  .cms-colorbar{position:fixed;left:12px;bottom:12px;z-index:20;display:flex;gap:10px;padding:8px 12px;
    background:var(--navy-2,#0f3f61);border:1px solid var(--or,#ff7900);border-radius:12px;flex-wrap:wrap;
    box-shadow:0 6px 24px rgba(0,0,0,.4)}
  .cms-colorbar label{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--mute,#9fbdd2)}
  .cms-colorbar input[type=color]{width:34px;height:26px;border:0;background:none;cursor:pointer;padding:0}
  /* LE BANDE: la struttura LIBERA a fasce impilate. Ogni banda è una griglia con le SUE colonne
     (--band-cols). Su mobile ogni banda impila le colonne. È ciò che rende la pagina modellabile
     su QUALSIASI layout, non solo sulle 5 regioni fisse. */
  .cms-bands{display:flex;flex-direction:column;gap:14px;width:100%}
  .cms-band{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);align-items:start}
  @media(min-width:900px){ .cms-band{grid-template-columns:var(--band-cols,minmax(0,1fr))} }
  .cms-bcol{min-width:0;display:flex;flex-direction:column;gap:14px}
  /* EDIT MODE delle BANDE: ogni fascia prende un contorno e una barretta per spostarla/toglierla. */
  .cms-edit .cms-band-edit{position:relative;outline:1px dashed var(--line,#16496b);outline-offset:6px;border-radius:8px}
  .cms-edit .cms-band-edit:hover{outline-color:var(--or,#ff7900)}
  .cms-edit .cms-bcol{min-height:40px;outline:1px dotted transparent;outline-offset:3px}
  .cms-edit .cms-bcol.drag-over{outline-color:var(--or,#ff7900)}
  .cms-band-bar{position:absolute;top:-12px;left:8px;display:none;gap:2px;z-index:6;align-items:center;
    background:var(--navy-2,#0f3f61);border:1px solid var(--or,#ff7900);border-radius:8px;padding:2px 6px}
  .cms-edit .cms-band-edit:hover>.cms-band-bar{display:flex}
  .cms-band-bar .cms-band-name{color:var(--mute,#9fbdd2);font-size:10px;padding:2px 4px;white-space:nowrap}
  .cms-band-bar button{background:none;border:0;color:var(--ink,#eaf2f8);cursor:pointer;font-size:12px;
    padding:2px 5px;border-radius:5px}
  .cms-band-bar button:hover{background:var(--or,#ff7900);color:var(--on-or,#2b1400)}
  /* Strumenti di COLONNA (larghezza + aggiungi widget) e AGGIUNGI FASCIA. Solo in edit mode. */
  .cms-col-tools{display:flex;gap:4px;margin-bottom:6px}
  .cms-col-tools select{flex:1;min-width:0;font-size:11px;padding:3px 4px;border-radius:6px;
    background:var(--navy-1,#0a3350);color:var(--ink,#eaf2f8);border:1px solid var(--line,#16496b);cursor:pointer}
  .cms-col-tools select:hover{border-color:var(--or,#ff7900)}
  .cms-add-band{display:block;width:100%;margin-top:4px;padding:10px;border-radius:10px;cursor:pointer;
    background:none;border:1px dashed var(--line,#16496b);color:var(--mute,#9fbdd2);font-size:13px;font-weight:700}
  .cms-add-band:hover{border-color:var(--or,#ff7900);color:var(--or,#ff7900)}