/* ═══════════════════════════════════════════════════════════════════════════
   TimerBet — design system del sito player. UN file, nostro, pulito.
   Struttura del template 24248 (header arancio, corpo navy, 3 colonne), ma
   esecuzione moderna: hero promozionale, rail sport con icone, chip-quota netti,
   micro-interazioni. L'ARANCIONE è l'azione (CTA, quota scelta); il denaro è
   arancio chiaro; il resto è inchiostro su navy. RTL via proprietà logiche.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:"Gilroy"; src:url("../playersite/assets/global.cdn000.net/css/new/fonts/gilroy/gilroy-Medium.af3642340e73.woff2") format("woff2"); font-weight:400 500; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../playersite/assets/global.cdn000.net/css/new/fonts/gilroy/gilroy-SemiBold.dcaa8dcfb983.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Gilroy"; src:url("../playersite/assets/global.cdn000.net/css/new/fonts/gilroy/gilroy-Bold.1ec5bc8965e9.woff2") format("woff2"); font-weight:700 800; font-display:swap; }

:root{
  --navy-0:#052033;   /* fondo pagina */
  --navy-1:#0a3350;   /* card */
  --navy-2:#0f3f61;   /* superficie rialzata */
  --navy-3:#155073;   /* hover */
  --line:#16496b;
  --ink:#eaf2f8;
  --mute:#9fbdd2;
  --or:#ff7900;       /* arancio del template = azione, selezione */
  --or-2:#ff9124;
  --or-d:#e86a00;
  /* 🔴 L'ARANCIO QUANDO FA DA INCHIOSTRO SU FONDO CHIARO — non è lo stesso che fa da fondo.
     `.btn` usava `--btn-primary-hover` (cioè `--or-d`) come COLORE DEL TESTO su bianco: un token
     nato per uno sfondo, usato come inchiostro. Misurato sul servito: **3,23:1** sui bottoni
     «Accedi» e «Registrati» della testata di studio5 e betslot.
     ⛔ E non si risolve scurendo `--or-d`, perché quello veste anche `--hdr-grad` (le barre di
     sezione): sarebbe la cura di un posto pagata da un altro. Serve un token suo. */
  --or-su-chiaro:#b85400;                 /* 4,86:1 sul bianco */
  /* 🔴 L'INCHIOSTRO CHE VA SULL'ARANCIO — era `#ffffff`, e sull'arancio il bianco non si legge:
     misurato sul servito, **2,63:1** contro una soglia di 4,5. Colpiva anche il «18+» del piede,
     che non è un dettaglio grafico ma un marchio di legge.
     ⚠️ E il valore giusto non l'ho scelto io: era già scritto come RIPIEGO in ogni regola che usa
     questo token (`var(--on-or,#2b1400)`), e su timerbet — dove il token non è definito — è quel
     ripiego a valere, infatti lì il bottone del casinò sta a 6,64 e si legge. Le due skin di casa
     usavano il bianco solo perché questa riga lo imponeva.
     📏 Misurato prima di cambiarlo, nei due contesti dove finisce:
         arancio piatto  #ff7900    bianco 2,63  →  scuro 6,64   ✅
         barra sport, gradiente     bianco 2,54  →  scuro 3,74   ✅ migliora, non passa ancora
     ⛔ La barra dello sport è di un'altra corsia e NON l'ho toccata: migliora come effetto di
     questo token e il residuo (3,74) è loro da chiudere — sta scritto nel referto. */
  --on-or:#2b1400;
  --money:#ffb23c;
  --live:#ff4655;
  --win:#2ee08a;
  --r:12px; --r-s:9px;
  --font:"Gilroy","Segoe UI",system-ui,-apple-system,sans-serif;
  --pad:clamp(10px,2vw,20px);
  /* Header, barre-sezione e rail-h: DERIVANO dall'azione (--or), così un tema le ridipinge tutte
     — prima era arancione cablato e restava tale su ogni skin riprodotta. Default ≈ com'era. */
  --hdr-grad:linear-gradient(180deg,var(--or-2,#ff9124),var(--or-d,#e86a00));

  /* ── I NOMI DEL TEMA, accanto ai nostri e con lo STESSO valore (Dav, 04/08) ───────────────
     *«non dobbiamo usare variabili diverse, ma solo quelle del tema»*. Il composer ormai scrive
     in tutti e due gli alfabeti (`skins_svc/theme.py: VAR_TEMA`), ma qui mancava la metà che
     conta per chi NON ha un tema importato: i suoi nomi non erano dichiarati da nessuna parte.
     Misurato il 04/08: dei 104 nomi di Dav i nostri fogli ne usano già 6 — e nessuno dei sei è
     dichiarato in casa nostra. Venti di quegli usi hanno un ripiego scritto a mano; due no, e
     lì la regola cade del tutto su una skin senza tema.
     Questi alias non cambiano un colore: `--primary-background` VALE `--navy-0`. Servono a
     rendere possibile il passo successivo — i nostri fogli che passano ai nomi di Dav, 381
     riferimenti in 11 fogli più 191 nei template — un pezzo per volta invece che tutto insieme.
     ⚠️ La direzione è questa e non il contrario: oggi ogni skin salvata scrive i NOSTRI nomi,
     quindi il valore vero sta lì. Girare l'alias spegnerebbe i colori di tutte le skin di
     famiglia — lo stesso errore che sarebbe stato togliere i nostri nomi dal composer. */
  /* 🔴 04/08 22:1x: erano `var(--primary-background, var(--navy-0))` — la variabile
     referenziava SE STESSA, che in CSS è un ciclo → dichiarazione invalida → colore spento
     (verificato in browser da w-contab2, otto variabili). Il commento sopra dice l'intento:
     «--primary-background VALE --navy-0». Quindi ora prende il valore vero, senza self-ref.
     Un tema importato che dichiara --primary-background più in alto/dopo vince col cascade. */
  --primary-background:var(--navy-0);
  --qt-background:var(--navy-2);
  --primary-border:var(--line);
  --primary-text:var(--ink);
  --secondary-text:var(--mute);
  --btn-primary:var(--or);
  --btn-primary-hover:var(--or-d);
  --btn-primary-text:var(--on-or);
  --font-family:var(--font);

  /* ── IL COUPON PRENDE I COLORI DELLA SKIN (Angelo, 06/08: «non prende oltretutto tutti i
     colori», su studio5) ────────────────────────────────────────────────────────────────────
     Il coupon è disegnato con l'azzurro/bianco del mockup di Dav, cablato in `coupon.css` e
     `skin_fixes.css`: uguale su ogni skin. Dentro studio5 — pagina navy, azione arancio — quel
     pannello bianco col blu di casa è un pezzo di un altro sito.

     🔴 PERCHÉ IL PONTE STA QUI E NON NEL FOGLIO DEL COUPON. `tb.css` è il vestito di CASA e
     **una pagina VESTITA da un tema importato non lo carica affatto** — è una regola scritta e
     voluta (Angelo, 29/07: *«dovrebbe essere tutto univoco a ogni tema»*, `views.py`: «NIENTE
     tb.css/layout.css su una pagina vestita»). Quindi questi nomi ESISTONO solo dove il vestito
     è nostro: il coupon li trova su studio5 e non li trova su timerbet, che resta al suo
     ripiego — cioè ai valori di oggi, byte per byte.

     ⚠️ È il punto in cui il tentativo precedente si era rotto, e vale la pena dirlo: quella
     catena leggeva `--or` direttamente, appoggiandosi al fatto che la skin 11 «non la
     definisce». Poi è passata la card dei colori del composer sulle skin vestite e la skin 11
     ha cominciato a definirla: la regola si reggeva su un'ASSENZA, e l'assenza è finita da
     sola, di notte, senza che nessuno toccasse il coupon. Un foglio che non viene caricato,
     invece, è una decisione — non un caso.

     I nomi li scelgo per SIGNIFICATO, dalla tabella dei token (`skins_svc/theme.py`), non per
     somiglianza: `--navy-1` è testualmente *«le card (partite, schedina)»*, ed è il foglio del
     coupon; `--or` è *«l'AZIONE: bottoni, quota scelta»*; `--money` è *«IL DENARO: saldo,
     vincite»*, che è quello che le righe dei totali dicono. */
  --tb-coupon-foglio:var(--navy-1);      /* il pannello: «le card (partite, schedina)» */
  --tb-coupon-rialzo:var(--navy-2);      /* bottoni e campi: «superfici sollevate» */
  --tb-coupon-hover:var(--navy-3);       /* al passaggio del mouse */
  --tb-coupon-bordo:var(--line);         /* bordi e separatori */
  --tb-coupon-testo:var(--ink);          /* il testo */
  --tb-coupon-testo-2:var(--mute);       /* testo secondario */
  /* 🔴 L'AZIONE DEL COUPON — era `var(--or)`, cioè l'arancio pieno, e su queste superfici SCURE
     non bastava: misurato sul servito, **4,19:1** sul bottone «Carica» (studio5), sotto la soglia
     di 4,5. `--or-2` è l'arancio chiaro che la tavolozza ha già, e sullo stesso fondo dà **4,9**:
     nessun colore nuovo, solo quello giusto dei due.
     ⚠️ Il token veste anche «Annulla» e «Codice evento», che stanno sulle stesse superfici scure:
     migliorano insieme, ed è la ragione per cui la cura sta QUI e non sulla singola regola.
     📌 Su timerbet non cambia niente: là questo foglio non arriva e vale il ripiego blu delle
     regole (`#1E63A4` su fondo chiaro, 4,98 — già a posto). */
  --tb-coupon-accento:var(--or-2);       /* l'azione: quota scelta, link, bottone Carica */
  --tb-coupon-oro:var(--money);          /* il denaro: la fascia dei totali */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--primary-background);color:var(--primary-text);font:500 14px/1.45 var(--font-family);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--btn-primary);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.px,.money,.num{font-variant-numeric:tabular-nums lining-nums}
.money{color:var(--money);font-weight:800}
.muted{color:var(--secondary-text)}
.shell{width:min(1320px,100%);margin-inline:auto;padding-inline:var(--pad)}

/* ── HEADER (arancio) ─────────────────────────────────────────────────── */
.hdr{background:var(--hdr-grad);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.25)}
.hdr-in{display:flex;align-items:center;gap:14px;min-height:58px}
.burger{display:none;color:#fff}
.brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:19px;letter-spacing:.02em;white-space:nowrap}
.brand .clock{width:26px;height:26px}
.brand b{color:#0a3350}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:0 12px;color:#fff}
.search input{flex:1;background:none;border:0;color:#fff;padding:9px 0;font:inherit;outline:none}
.search input::placeholder{color:rgba(255,255,255,.75)}
.hdr-r{margin-inline-start:auto;display:flex;align-items:center;gap:9px}
.hdr-login{display:flex;align-items:center;gap:6px}
.hdr-login input{width:150px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-s);color:#fff;padding:8px 11px;font:inherit;outline:none}
.hdr-login input::placeholder{color:rgba(255,255,255,.75)}
.hdr-r .only-m{display:none}
.balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.balance .money{color:#fff}
.balance small{color:rgba(255,255,255,.8);font-size:11px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--or-su-chiaro,#b85400);border-radius:var(--r-s);padding:9px 16px;font-weight:800;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,.16);transition:filter .12s,transform .06s}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
/* 🔴 `background:transparent` NON E' DECORAZIONE: senza, un elemento che porta ENTRAMBE le classi
   (`class="btn btn-ghost"`) prende il fondo BIANCO di `.btn` e il testo BIANCO di questa —
   cioe' un bottone illeggibile. Misurato sul servito (skin betslot, 11/08): il bottone «Recupera
   password» della testata usciva come un RIQUADRO BIANCO VUOTO, con dentro il suo testo regolare
   (`color` e `background` tutti e due `rgb(255,255,255)`). Trovato guardando uno scatto, non i
   fogli: nel DOM il testo c'e', e nessuna prova poteva accorgersene.
   📌 Sui `.btn-ghost` da soli non cambia NIENTE — non avevano un fondo dichiarato, quindi erano
   gia' trasparenti. Cambia solo il caso in cui le due classi si sommano, che oggi capita in due
   punti (`widgets/header/_auth.html`, `messages.html`) e domani puo' capitare ovunque.
   ⚠️ Il `:hover` qui sotto resta e vince, perche' viene dopo. */
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:var(--r-s);padding:8px 14px;font-weight:700;white-space:nowrap}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-block{width:100%}

/* lingua */
.langpick{position:relative}
.langpick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:4px;padding:7px 9px;border:1px solid rgba(255,255,255,.5);border-radius:var(--r-s);color:#fff;font-size:16px}
.langpick summary::-webkit-details-marker{display:none}
.langpick-menu{position:absolute;inset-inline-end:0;margin-block-start:6px;z-index:60;background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r);min-width:190px;padding:6px;box-shadow:0 16px 40px rgba(0,0,0,.5);display:flex;flex-direction:column}
.langrow{display:flex;align-items:center;gap:10px;text-align:start;padding:8px 10px;border-radius:var(--r-s);color:var(--primary-text);font-weight:600}
.langrow:hover{background:var(--qt-background)}.langrow.on{color:var(--or-2)}.langrow .nm{flex:1}

/* subnav blu */
.subnav{background:#0a3350;border-top:1px solid rgba(255,255,255,.06)}
.subnav-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;gap:7px;padding:11px 14px;color:var(--secondary-text);font-weight:700;white-space:nowrap;border-bottom:2px solid transparent}
.subnav a:hover{color:#fff}
.subnav a.on{color:#fff;border-bottom-color:var(--btn-primary)}
.subnav a.live{color:#ff8a93}
.badge-mail{background:var(--live);color:#fff;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 6px;margin-inline-start:4px}
/* «TI MANCA QUALCOSA NEL PROFILO» — NON è la posta, e non deve somigliarle (Stefano 11/08).
   Fino a oggi portava `badge-mail`: stesso rosso, stessa forma, e il giocatore leggeva
   «messaggio nuovo» dove c'era scritto «completa il profilo». AMBRA, e testo scuro:
   #1c2b3a su #F5A623 = 7,12:1 (misurato con tests/_contrasto.py, la soglia è 4,5).
   ⚠️ Il rosso della posta resta com'era: ripingerlo è la carta CONTRASTO, che aspetta il PM —
   ma va detto che bianco su var(--live) #ff4655 fa 3,36:1, cioè sotto soglia. */
.badge-todo{background:#F5A623;color:#1c2b3a;border-radius:999px;font-size:10.5px;font-weight:800;padding:1px 6px;margin-inline-start:4px}
.subnav .ico{width:18px;height:18px}
.ico{display:inline-flex}.ico svg{width:100%;height:100%}

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
/* 🔴 LE COLONNE LE DECIDONO LE RAIL CHE CI SONO DAVVERO — non la pagina.
   Terzo caso dello stesso difetto (promozioni, 03/08; prima il casinò `c1c615de`, prima ancora
   l'area conto). La griglia dava per scontate TUTTE E DUE le rail: la base era
   `236px 1fr 300px`, e ogni combinazione diversa aveva bisogno della sua regola gemella. Le
   combinazioni sono quattro, le regole erano tre, e la quarta — «né menu né schedina» — non la
   prendeva nessuno: il contenuto cadeva nel primo slot da 236px con due colonne vuote accanto.
   Misurato su `/player/promozioni` da sloggato: 236px dentro una pagina da 1400.

   Non è una pagina che sbaglia, ed è per questo che non si corregge sulla pagina. La classe
   `solo` la decide `base.html` da `hide_slip`; le rail le decide il `{% block main %}` della
   pagina — e su promozioni la sinistra c'è **solo da loggati**. Classe e realtà possono
   contraddirsi, e una classe non sa dire «a volte». Il DOM sì.

   Quindi: la base è UNA colonna (nessuna rail = niente da riservare) e ogni rail presente si
   prende la sua. Le larghezze stanno in due variabili, così il punto di rottura le cambia in un
   posto solo — prima la media query a 1180px riscriveva la griglia a tre colonne e si riportava
   dietro il difetto fra 1081 e 1180 (misurato: 200px di contenuto). Quattro combinazioni, zero
   casi speciali: una pagina nuova senza rail nasce giusta. */
.cols{--rail-l-w:236px;--rail-r-w:300px;--col-pad:2px;
  display:grid;gap:16px;align-items:start;grid-template-columns:minmax(0,1fr);padding-block:16px}
.cols:has(> .rail-l){grid-template-columns:var(--rail-l-w) minmax(0,1fr)}
.cols:has(> .rail-r){grid-template-columns:minmax(0,1fr) var(--rail-r-w)}
.cols:has(> .rail-l):has(> .rail-r){
  grid-template-columns:var(--rail-l-w) minmax(0,1fr) var(--rail-r-w)}
/* Le due colonne laterali sono pannelli STICKY con scroll interno: restano ferme mentre
   scorre il centro, e le card dentro hanno respiro (gap).

   🔴 `--col-pad` VALE PER TUTTE E TRE LE COLONNE, e la ragione è una carta di Angelo
   (12/08 17:29: *«metti nella stessa linea il coupon che è leggermente più basso»*).
   Quei 2px sono il respiro che tiene l'ombra della prima card dentro il ritaglio delle rail
   (`overflow-y:auto` taglia sul bordo del padding). Ma stavano scritti SOLO sulle rail: il
   centro partiva 2px più in alto, e il coupon — che è la colonna dove l'occhio va — sembrava
   basso. 📏 Misurato sul servito, studio5 `/player/eventi-giorno/selezione`, 1600px:
   rail 155 → prima card 157 · centro 155 → primo pannello 155.

   ⛔ NON si sposta il coupon di un valore fisso: sarebbe l'errore che Angelo ha chiesto di non
   fare («alla prima pagina con un titolo diverso torna storto»). Si pareggia il PUNTO DI
   PARTENZA delle tre colonne con la stessa variabile, così non possono più separarsi: chi
   cambia il respiro delle rail muove anche il centro, senza saperlo e senza doverlo sapere.
   La variabile sta con le altre due misure della griglia, in cima al blocco LAYOUT. */
.rail-l,.rail-r{position:sticky;top:12px;align-self:start;max-height:calc(100vh - 24px);overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-block:var(--col-pad);scrollbar-width:thin}
.rail-l::-webkit-scrollbar,.rail-r::-webkit-scrollbar{width:6px}
.feed{min-width:0;padding-block:var(--col-pad)}
/* 🔴 QUI C'ERA `.cols.solo{grid-template-columns:minmax(0,1fr)}`, ED È STATO TOLTO — Angelo,
   11/08 19:47, con lo scatto: «si vede così». L'area personale di studio5 mostrava il menu del
   conto largo quanto la pagina, una voce sotto l'altra, e nient'altro.

   `solo` la scrive `base.html` da `hide_slip` («niente coupon»), e da stasera `_context` accende
   `hide_slip` su TUTTE le pagine fuori dal perimetro di scommessa (carta del coupon, `4011057f2`)
   — quindi anche sull'area personale, che fuori ci sta giustamente. Ma questa riga stava DOPO
   `.cols:has(> .rail-l)` e aveva la stessa specificità (`:has()` vale quanto il suo argomento):
   vinceva l'ultima scritta, cioè `solo`, e la colonna sinistra tornava una riga a tutta larghezza.
   📏 Misurato nel browser sulle pagine vere: **1240px su 1280**, su 7 pagine per skin, su tutte
   le 57 skin senza tema. Con la riga tolta: `236px 988px`.

   🔑 Si toglie invece di rattopparla, ed è la regola di questa griglia, scritta il 03/08:
   *«una classe non sa dire "a volte". Il DOM sì»* — la base è già UNA colonna e ogni rail
   presente si prende la sua, quindi `solo` non aggiungeva niente e poteva solo contraddire il
   DOM. Le pagine che hanno davvero due rail non si muovono: `.cols:has(> .rail-l):has(> .rail-r)`
   è più specifica e vinceva già (misurato: la home di betslot resta `236px 672px 300px`).
   ⚠️ Quella dentro `@media (max-width:1080px)` NON si tocca: lì è `!important` e serve a tenere
   una colonna sola sul telefono. */

/* rail sport con icone */
/* 🔴 `overflow:hidden` QUI TAGLIAVA VIA UN BLOCCO INTERO (13/08, misurato sul servito).
   La card «CAMPIONATI TOP» di betslot era alta 47px — la sola fascia del titolo — e tutte e
   cinque le voci cadevano FUORI dal ritaglio:

       betslot  card 181→228  overflow hidden   voci dentro 0 su 5   (LaLiga, Premier…)
       studio5  usa un'altra cornice (`wdg-top-league`) e non aveva il problema

   Il giocatore vedeva un titolo e il vuoto sotto, e il clic al centro di «LaLiga» non
   navigava. In più il rail sinistro non scorreva più per conto suo: le card strozzate gli
   toglievano l'altezza, contro quello che dice la riga 224 («pannelli sticky con scroll
   interno»).

   ⛔ Il ritaglio stava qui per gli angoli (`--r`): costa un blocco intero. Gli angoli li tiene
   il `border-radius` da solo. Isolato spegnendo una regola alla volta: è l'unica che fa
   tornare il clic. */
.rail-card{background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r)}
/* ⚠️ E TOGLIENDO IL RITAGLIO È VENUTO FUORI QUELLO CHE NASCONDEVA (13/08): il numero accanto
   allo sport (`.wdg-sport-n`) usciva dal bordo della card di **17px**. Prima non si vedeva
   perché veniva tagliato — cioè il numero era semplicemente sparito, e nessuno poteva saperlo.

   La causa è la solita delle righe flex: un figlio ha `min-width:auto` e non scende sotto la
   larghezza del proprio contenuto, così la riga diventa più larga della card.

   📌 `min-width:0` non impone niente: dà solo il PERMESSO di stringersi. Provato spegnendo una
   regola alla volta — è l'unica delle quattro candidate che porta lo sbordo a zero senza far
   sparire i cinque campionati. */
.rail-card *{min-width:0}
.rail-h{padding:11px 14px;font-weight:800;color:#fff;background:var(--hdr-grad);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.sportnav{padding:6px}
.sportnav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-s);color:var(--primary-text);font-weight:600;font-size:13px}
.sportnav a .ico{width:20px;height:20px;color:var(--or-2);flex:none}
.sportnav a:hover{background:var(--qt-background)}
.sportnav a.on{background:color-mix(in srgb,var(--btn-primary) 20%,transparent);color:#fff}
.sportnav a.on .ico{color:#fff}

/* ── HERO PROMO ───────────────────────────────────────────────────────── */
.promos{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-block-end:16px}
.promo{position:relative;border-radius:var(--r);overflow:hidden;min-height:150px;display:flex;align-items:center;padding:18px 20px;color:#fff}
.promo-1{background:linear-gradient(120deg,#ff7900,#ff5a00 60%,#c94800)}
.promo-2{background:linear-gradient(120deg,#0f3f61,#0a3350)}
.promo::after{content:"";position:absolute;inset-block:0;inset-inline-end:-30px;width:150px;background:radial-gradient(circle at 60% 40%,rgba(255,255,255,.22),transparent 70%)}
.promo-txt{position:relative;z-index:1}
.promo-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.9}
.promo h2{font-size:22px;font-weight:800;line-height:1.15;margin:4px 0 6px}
.promo-2 h2{font-size:19px}
.promo p{opacity:.9;font-size:13px;margin-block-end:12px}
.promo-cta{margin-block-start:2px}
.promo-1 .promo-cta{background:#fff;color:var(--btn-primary-hover)}
.promo-2 .btn-line{border:1px solid rgba(255,255,255,.5);color:#fff;background:transparent;border-radius:var(--r-s);padding:8px 14px;font-weight:700}

/* ── SEZIONI ──────────────────────────────────────────────────────────── */
.sec{margin-block-end:20px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-block-end:10px}
.sec-head h1,.sec-head h2{font-size:17px;font-weight:800}
.sec-head h1{font-size:22px}
.more{color:var(--or-2);font-weight:700;font-size:13px}
/* 🔴 12/08 — IL PALLINO LIVE STA SEMPRE SU BLU SCURO, e `--live` è tarato per il bianco.
   Misurato sul servito: **3,91** su studio5 e betslot (soglia 4,5). Non è un dettaglio da nulla:
   è il segno che dice «questa partita è in corso adesso».
   ⚠️ Due cose imparate misurando, non ragionando:
     ① l'istinto («scurisci il rosso») lo PEGGIORA — 3,91 → 2,27 → 1,94: il fondo è scuro, quindi
        il colore va schiarito, il contrario di quello che è servito stamattina per il bottone
        verde su bianco. La stessa forma di difetto vuole cure opposte a seconda del fondo.
     ② su TIMERBET il pallino non è rosso ed è a 10,37: quella pagina non carica questo foglio e
        il colore lo eredita. Un `!important` di prova me l'aveva portato a 3,86 — cioè la mia
        «correzione» rompeva la skin che stava bene. Qui si tocca solo chi usa questa regola.
   📏 Dove compare, contato su 3 skin × 3 pagine: 44 volte, **sempre** su blu scuro
   (`rgb(10,51,80)` e `rgb(28,66,103)`). Perciò un colore per questa superficie è sicuro.
   ⛔ E non si tocca `--live` in `:root`: la usano anche l'etichetta LIVE e i lampi delle quote,
   su fondi che non ho misurato. Si aggiunge il caso, non si sposta la tinta di tutti. */
.live-dot{color:var(--live-su-scuro,#ff6f7c);font-weight:800}

/* match card */
.matches{display:flex;flex-direction:column;gap:9px}
.match{background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r);overflow:hidden;transition:border-color .12s}
.match:hover{border-color:var(--navy-3)}
.match-top{display:flex;align-items:center;gap:12px;padding:11px 14px 8px}
.mt-when{flex:0 0 62px;font-size:11.5px;font-weight:700;color:var(--secondary-text)}
.mt-body{flex:1;min-width:0;display:flex;flex-direction:column}
.mt-body b{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-league{color:var(--secondary-text);font-size:11.5px}
.mt-go{color:var(--secondary-text);font-size:20px;font-weight:400}
.odds{display:flex;gap:8px;padding:0 14px 12px}
.odds form{flex:1;min-width:0}
.chip{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 13px;background:var(--qt-background);border:1px solid var(--primary-border);border-radius:var(--r-s);transition:border-color .12s,background .12s,transform .06s}
.chip:hover{border-color:var(--btn-primary);background:var(--navy-3)}
.chip:active{transform:translateY(1px)}
.chip .lbl{color:var(--secondary-text);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .px{font-size:16px;font-weight:800}
/* quota SCELTA: non l'arancio dell'azione ma l'unico colore dello stato «selezionato»
   (Dav 27/07: «non mischiamo colori»). La variabile è dichiarata in skin_fixes.css. */
.chip.on{background:var(--tb-quota-sel);border-color:var(--tb-quota-sel-line)}
.chip.on .lbl,.chip.on .px{color:var(--tb-quota-sel-ink)}

/* i più giocati: strip orizzontale */
.chips-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:10px;overflow-x:auto;padding-block-end:4px;scrollbar-width:thin}
.mp-card{background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r);padding:12px}
.mp-ev{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-league{color:var(--secondary-text);font-size:11px;margin-block-end:8px}

/* mercati (scheda evento) */
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}

/* ── SLIP ─────────────────────────────────────────────────────────────── */
.card{background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r);overflow:hidden}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-block-end:1px solid var(--primary-border);font-weight:800}
.card-b{padding:14px}
.slip{box-shadow:0 12px 30px rgba(0,0,0,.3)}
/* 🔴 Il bianco era scritto a mano su un fondo che è l'arancio dell'azione: **2,63:1**. Il token
   giusto esiste già ed è quello che tutte le altre regole usano — `--on-or`, l'inchiostro che va
   sull'arancio (6,64). Un valore a mano accanto a un token è il modo in cui una tavolozza smette
   di valere: si sistema il token e questo resta indietro, come è successo qui. */
.slip-n{background:var(--btn-primary);color:var(--btn-primary-text,#2b1400);border-radius:999px;min-width:22px;text-align:center;font-size:12px;font-weight:800;padding:1px 7px}
.leg{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;border-block-end:1px solid var(--primary-border)}
.leg-info{flex:1;min-width:0}.leg-info b{display:block;font-size:13px}.leg-info small{color:var(--secondary-text);font-size:11.5px;display:block}
.leg .px{font-size:14px;font-weight:800}
.leg-x{color:var(--secondary-text);padding:2px 5px;border-radius:6px}.leg-x:hover{color:var(--live);background:var(--qt-background)}
.leg.dead{opacity:.55}.leg .warn{color:var(--live);font-size:11px;font-weight:700}
.tot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px}.tot span{color:var(--secondary-text);font-weight:600}.tot b{font-size:15px;font-weight:800}
.slip-foot{padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px}
/* 🔴 IL BIANCO SULL'ARANCIO, quattro volte scritto a mano (12/08). Misurato sul servito:
   «Entra per giocare» in fondo al coupon di betslot era **bianco su #ff7900 = 2,63:1**. Le altre
   tre righe qui sotto hanno la stessa forma, e sono il bottone del coupon, quello della barra, la
   chiamata all'azione dei caroselli e la linguetta attiva dei movimenti.
   ⛔ Il token esiste già — `--on-or`, l'inchiostro che va sull'arancio (6,64) — e queste regole se
   l'erano perso per strada: un valore a mano accanto a un token è il modo in cui una tavolozza
   smette di valere, perché il giorno che si sistema il token questi restano indietro. È successo:
   ho corretto `--on-or` stanotte e queste quattro non se ne sono accorte.
   ⚠️ E il bianco resta come RIPIEGO, non si butta: dove `--on-or` non è definito (timerbet, che
   questo foglio non lo carica) `--btn-primary` non è l'arancio e il fondo è un altro — lì il
   bianco di oggi è giusto e non lo tocco. Si migliora dove si può, non si scommette dove non si
   sa. */
.slip-foot .btn{background:var(--btn-primary);color:var(--btn-primary-text,#fff)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--primary-border);color:var(--secondary-text);background:transparent;border-radius:var(--r-s);padding:8px 14px;font-weight:700}
.btn-line:hover{border-color:var(--btn-primary);color:var(--or-2)}
.empty{padding:24px 16px;text-align:center;color:var(--secondary-text)}.empty b{display:block;color:var(--primary-text);margin-block-end:4px}
.wins .win-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-block-end:1px solid var(--primary-border)}
.wins .win-row:last-child{border-block-end:0}
.wins small{display:block;color:var(--secondary-text);font-size:11px}

/* slipbar mobile */
.slipbar{display:none;position:fixed;inset-inline:0;inset-block-end:0;z-index:80;background:var(--navy-1);border-block-start:1px solid var(--primary-border);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));align-items:center;gap:12px;box-shadow:0 -8px 24px rgba(0,0,0,.45)}
.slipbar .sum{flex:1;line-height:1.2}.slipbar .sum b{font-size:14px}.slipbar .sum small{color:var(--secondary-text);display:block}
.slipbar .btn{background:var(--btn-primary);color:var(--btn-primary-text,#fff)}

/* ── COUPON / FORM / TABELLE / ACCOUNT (pagine interne) ───────────────── */
.coupon-wrap{width:min(680px,100%);margin-inline:auto}
.stake-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-block-end:1px solid var(--primary-border)}
.stake-row label{color:var(--secondary-text);font-weight:700;font-size:12.5px}
.stake-in{display:flex;align-items:center;gap:8px;margin-inline-start:auto}.stake-in .cursign{color:var(--money);font-weight:800}
.in{background:var(--qt-background);border:1px solid var(--primary-border);color:var(--primary-text);border-radius:var(--r-s);padding:9px 12px;width:100%;font:600 14px/1.2 var(--font-family)}
.in:focus{outline:none;border-color:var(--btn-primary)}
.stake-in .in{width:120px;text-align:end}
.sys-row{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-block-end:1px solid var(--primary-border)}
.sys{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--primary-border);border-radius:999px;padding:6px 12px;color:var(--secondary-text);font-weight:700;font-size:12.5px;cursor:pointer}.sys.on{border-color:var(--btn-primary);color:var(--or-2)}
.rows{padding-block:4px}
.krow{display:flex;justify-content:space-between;align-items:center;padding:8px 14px}.krow span{color:var(--secondary-text)}.krow b{font-weight:800}.krow.big b{font-size:18px}
.combos{border-block-end:1px solid var(--primary-border)}
.combo{display:flex;align-items:center;gap:10px;padding:9px 14px;border-block-start:1px solid var(--primary-border);color:var(--primary-text);cursor:pointer}
.combo:first-child{border-block-start:0}
.combo input{accent-color:var(--btn-primary);width:17px;height:17px;flex:none}
.combo .nm{flex:1;min-width:0;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.combo .px{font-size:13px;font-weight:800}.combo .money{font-size:13px}
.combo.off{opacity:.5}
.err{margin:10px 14px;padding:10px 12px;border-radius:var(--r-s);background:color-mix(in srgb,var(--live) 14%,transparent);border:1px solid color-mix(in srgb,var(--live) 40%,transparent);color:#ffc2c7;font-weight:600;font-size:13px}
.ok-note{margin:10px 14px;padding:10px 12px;border-radius:var(--r-s);background:color-mix(in srgb,var(--win) 12%,transparent);border:1px solid color-mix(in srgb,var(--win) 35%,transparent);color:#b7f0d3;font-weight:600;font-size:13px}
.auth{width:min(440px,100%);margin-inline:auto}
.field{display:flex;flex-direction:column;gap:6px;margin-block-end:14px}.field label{color:var(--secondary-text);font-weight:700;font-size:12.5px}
.check{display:flex;align-items:flex-start;gap:10px;margin-block-end:10px;color:var(--secondary-text);font-weight:600}.check input{accent-color:var(--btn-primary);width:17px;height:17px;margin-block-start:1px;flex:none}
select.in{appearance:none}
.form-note{color:var(--secondary-text);font-size:12.5px}.form-note a{color:var(--or-2);font-weight:700}
.acct-nav{padding:6px}.acct-nav a{display:block;padding:9px 11px;border-radius:var(--r-s);color:var(--secondary-text);font-weight:600}.acct-nav a:hover{background:var(--qt-background);color:var(--primary-text)}.acct-nav a.on{background:color-mix(in srgb,var(--btn-primary) 18%,transparent);color:var(--or-2)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-block-end:1px solid var(--primary-border)}.kv:last-child{border-block-end:0}.kv span{color:var(--secondary-text)}.kv b{font-weight:700;text-align:end}
.tblwrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:start;color:var(--secondary-text);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-block-end:1px solid var(--primary-border)}
.tbl td{padding:11px 12px;border-block-end:1px solid var(--primary-border)}.tbl tr:last-child td{border-block-end:0}.tbl tbody tr:hover{background:var(--qt-background)}
.tbl .num,.tbl .money{text-align:end}a.rowlink{color:var(--or-2);font-weight:700}
.tag{display:inline-block;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:800;background:var(--qt-background);color:var(--secondary-text)}
.tag.win{background:color-mix(in srgb,var(--win) 16%,transparent);color:var(--win)}
.tag.lose{background:color-mix(in srgb,var(--live) 14%,transparent);color:#ff8a93}
.tag.open{background:color-mix(in srgb,var(--btn-primary) 16%,transparent);color:var(--or-2)}
.tag.warn{background:color-mix(in srgb,var(--live) 14%,transparent);color:var(--live)}
.bar{height:7px;border-radius:999px;background:var(--qt-background);overflow:hidden}.bar i{display:block;height:100%;background:var(--btn-primary);border-radius:999px}
.h1{font-size:22px;font-weight:800}.h2{font-size:16px;font-weight:800}.eyebrow{color:var(--secondary-text);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.box-container,.jumbotron,.main-cont,.data-container,.side-nav-backoffice,.sidebar{background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r);color:var(--primary-text)}
.page-title{color:var(--primary-text);font-weight:800}
.stream{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;margin-block-end:12px}.stream iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.note{color:var(--secondary-text);font-size:13px;padding:10px 0}

/* flash */
.flash{display:flex;flex-direction:column;gap:8px;padding-block:12px}
.msg{padding:11px 14px;border-radius:var(--r-s);background:var(--navy-1);border:1px solid var(--primary-border);font-weight:600}
.msg.success{border-color:color-mix(in srgb,var(--win) 40%,transparent);color:#b7f0d3}
.msg.error{border-color:color-mix(in srgb,var(--live) 40%,transparent);color:#ffc2c7}
.msg.warning{border-color:color-mix(in srgb,var(--btn-primary) 45%,transparent);color:var(--or-2)}

/* footer */
.ftr{margin-block-start:auto;border-block-start:1px solid var(--primary-border);background:var(--navy-1);padding-block:18px}
.ftr-pay{display:flex;justify-content:center;padding-block-end:12px}.ftr-pay img{max-height:34px;opacity:.9}
.ftr-in{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;color:var(--secondary-text);font-size:12.5px}
.ftr-in a:hover{color:var(--or-2)}.ftr .adult{border:1px solid var(--secondary-text);border-radius:6px;padding:1px 6px;font-weight:800;font-size:11px}

/* scrollbar tema */
*{scrollbar-width:thin;scrollbar-color:#155073 transparent}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#155073;border-radius:8px}::-webkit-scrollbar-track{background:transparent}

/* ── RESPONSIVE (parte comune; il resto è nel blocco v2 più sotto) ──────── */
@media (max-width:860px){
  .hdr-login{display:none}
  .search{order:5;flex-basis:100%;max-width:none}
  .hdr-in{flex-wrap:wrap}
  .hdr-r .only-m{display:inline-flex}
  .balance small{display:none}
}
@media (max-width:520px){
  .odds{flex-wrap:wrap}.odds form{flex:1 1 46%}
  .promo h2{font-size:19px}
}

/* ═══ v2 — landing ricca stile 24248, moderna ════════════════════════════ */

/* Topbar nera con orologio */
.topbar{background:#0a1520;color:var(--secondary-text);font-size:12px}
.topbar-in{display:flex;align-items:center;justify-content:space-between;min-height:30px;gap:12px}
.tclock{font-variant-numeric:tabular-nums;color:#cfe0ec;font-weight:700}
.topbar-links{display:flex;gap:16px;flex-wrap:wrap}
.topbar-links a:hover{color:var(--or-2)}
.hdr{position:static}   /* niente sticky: lo zoom/scroll deve rifluire naturale */

/* TAB grandi centrati con icona (la firma del template) */
.subnav-in{justify-content:center;gap:6px}
.subnav .tab{flex-direction:column;gap:4px;min-width:92px;padding:8px 14px;border-bottom:0;border-radius:0;text-align:center;text-transform:uppercase;font-size:12px;letter-spacing:.03em}
.subnav .tab .ico{width:26px;height:26px}
.subnav .tab.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 -3px 0 var(--btn-primary)}
.subnav .tab.tab-live.on{box-shadow:inset 0 -3px 0 var(--live)}
.subnav .tab:hover{background:rgba(255,255,255,.05)}

/* Icone: gli SVG del template sono già colorati */
.ico{display:inline-flex;align-items:center;justify-content:center}
.ico img,img.ico{width:100%;height:100%;object-fit:contain}
.sportnav a .ico,.subnav .tab .ico{filter:none}

/* ── HERO SLIDER ──────────────────────────────────────────────────────── */
.hero{position:relative;border-radius:var(--r);overflow:hidden;margin-block-end:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;min-height:230px;display:flex;align-items:center;padding:26px 34px;color:#fff;position:relative;background-size:cover;background-position:center}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,20,32,.82) 0%,rgba(4,20,32,.35) 55%,transparent 100%)}
.slide-live{background:linear-gradient(120deg,#06263e,#0b3a5c),url("../playersite/assets/global.cdn000.net/images/slider/gr4/slider-5.b0f05161412e.jpg") center/cover}
.slide-bonus{background:linear-gradient(120deg,#ff7900,#c94800)}
.slide-combo{background:linear-gradient(120deg,#0f3f61,#0a2b44),url("../playersite/assets/global.cdn000.net/images/slider/gr4/slider-6.b8e246b87cfc.jpg") center/cover}
.slide-copy{position:relative;z-index:1;max-width:560px;animation:rise .6s ease both}
.slide-copy h2{font-size:clamp(22px,3.4vw,34px);font-weight:800;line-height:1.08;margin:8px 0 8px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.slide-copy p{opacity:.92;font-size:clamp(13px,1.6vw,16px);margin-block-end:14px}
.kicker,.tag-live{display:inline-block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.tag-live{background:var(--live);color:#fff;padding:3px 9px;border-radius:6px}
.hero-cta{background:#fff;color:var(--btn-primary-hover);font-size:15px;padding:11px 22px}
.slide-live .hero-cta,.slide-combo .hero-cta{background:var(--btn-primary);color:var(--btn-primary-text,#fff)}
.hero-dots{position:absolute;inset-block-end:12px;inset-inline:0;display:flex;justify-content:center;gap:7px;z-index:2}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);border:0;cursor:pointer;padding:0;transition:width .2s}
.hero-dots button.on{width:24px;border-radius:6px;background:var(--btn-primary)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* accessi rapidi */
.quicklinks{display:flex;gap:8px;overflow-x:auto;margin-block-end:16px;scrollbar-width:none}
.quicklinks::-webkit-scrollbar{display:none}
.ql{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--navy-1);border:1px solid var(--primary-border);font-weight:700;font-size:13px;white-space:nowrap;transition:border-color .12s,transform .06s}
.ql:hover{border-color:var(--btn-primary);transform:translateY(-1px)}
.ql-live{color:#ff8a93}

/* barra sezione arancione (come il template) */
.sec-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--hdr-grad);color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.03em;padding:10px 16px;border-radius:var(--r) var(--r) 0 0;margin-block-end:0}
.sec .sec-bar+*{border-radius:0 0 var(--r) var(--r)}
.sec{margin-block-end:18px}
.bar-more{color:#fff;font-weight:700;font-size:12px;text-transform:none;opacity:.92}
.bar-more:hover{text-decoration:underline}
.matches{gap:0}
.sec .matches{border:1px solid var(--primary-border);border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden;background:var(--navy-1)}
.sec .matches .match{border:0;border-block-end:1px solid var(--primary-border);border-radius:0}
.sec .matches .match:last-child{border-block-end:0}

/* league nav */
.leaguenav{padding:6px}
.leaguenav a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-s);color:var(--primary-text);font-weight:600;font-size:12.5px}
.leaguenav a:hover{background:var(--qt-background)}
.lg-dot{width:7px;height:7px;border-radius:50%;background:var(--btn-primary);flex:none}

/* 🔴 IL «CAMPIONATI TOP» DELLA BARRA E' IL WIDGET (Dav, 06/08: «i widget devono rimanere uguali
   nelle pagine»). Le righe le disegna `_top_league_lista.html`, lo stesso frammento del composer:
   qui c'e' solo il vestito per quando quelle righe stanno dentro una `.rail-card` di casa, cioe'
   fuori dalle pagine composte. Sopra restano `.leaguenav`/`.lg-dot`: non li usa piu' nessuno dei
   nostri, ma un tema potrebbe averli, e toglierli non e' questa card.

   ⚠️ STA QUI E NON IN `chrome_struttura.css`. Prima l'avevo messa li' ed era invisibile: **s1 quel
   foglio non lo carica** (misurato sull'HTML servito: 0 occorrenze; carica `tb.css`, `layout.css`,
   `casa.css`). Risultato sul vivo: icone a **234x234**, palloni giganti sulla home di s1. Il foglio
   giusto per il markup di casa e' quello di casa.

   ⚠️ E la misura dell'icona non e' pignoleria: `tb.css` ha gia' `.ico img, img.ico{width:100%;
   height:100%}`, che senza questa riga fa esplodere l'immagine dentro la riga. Gli attributi
   `width="20" height="20"` sull'<img> NON bastano: il CSS li batte sempre. */
.rail-card .wdg-league-list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px}
.rail-card .wdg-league-list a{display:flex;align-items:center;gap:9px;padding:8px 10px;
  border-radius:var(--r-s);color:var(--primary-text);font-weight:600;font-size:12.5px}
.rail-card .wdg-league-list a:hover{background:var(--qt-background)}
.rail-card .wdg-league-list .ico{width:20px;height:20px;flex:none;object-fit:contain}
.rail-card .wdg-league-list .wdg-league-name{flex:1;min-width:0}
.rail-card .wdg-league-list .muted{font-size:12px;opacity:.75;flex:none}
/* Le regole della riga spenta del pannello Campionati Top NON stanno piu' qui: sono in
   `pannello_leghe.css`, che il pannello si carica da se'. Qui non arrivavano alle skin col tema
   importato — misurato sul servito: nei loro <link> `tb.css` non c'e'. (PM, 06/08) */
.rail-h-live{background:linear-gradient(180deg,#c0303a,#9a2731)}
.sportnav a .ico img{width:20px;height:20px}

/* movers */
.movers{border-top:0;border-radius:0 0 var(--r) var(--r)}
.mov-tabs{display:flex;gap:4px;overflow-x:auto;padding:10px 12px;border-block-end:1px solid var(--primary-border);scrollbar-width:none}
.mov-tabs::-webkit-scrollbar{display:none}
.mov-tab{padding:7px 12px;border-radius:999px;background:var(--qt-background);color:var(--secondary-text);font-weight:700;font-size:12.5px;white-space:nowrap}
.mov-tab.on{background:var(--btn-primary);color:var(--btn-primary-text,#fff)}
.mov-pane{display:none;padding:14px}
.mov-pane.on{display:block}
.mov-ev{margin-block-end:10px}.mov-ev b{display:block;font-size:15px}.mov-ev .muted{font-size:12px}
.mov-pane .odds{padding:0}

/* più giocati: griglia coi cerchi % */
.mp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.mp-cell{padding:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.mp-cell .mp-league{color:var(--or-2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.mp-cell .mp-ev{font-weight:700;font-size:13px;line-height:1.25;min-height:2.4em}
.pct-ring{--p:0;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--btn-primary) calc(var(--p)*1%),var(--qt-background) 0);margin:4px 0}
.pct-ring span{width:74px;height:74px;border-radius:50%;background:var(--navy-1);display:grid;place-items:center;font-weight:800;font-size:20px}
.mp-cell .chip{width:100%}

/* banner promo (destra) */
.promo-banner{display:block;border-radius:var(--r);overflow:hidden;border:1px solid var(--primary-border)}
.promo-banner img{width:100%;height:auto;display:block;transition:transform .3s}
.promo-banner:hover img{transform:scale(1.03)}

/* La schedina/vincite non stanno più sticky da soli: la colonna scrolla */
.rail-r{position:sticky;top:12px}
/* 🔴 12/08 — LA CLASSE C'ERA E LA REGOLA NO (Jesper, 08:38). Il server mette
   `wdg-betslip--segue` su tutte le pagine dove l'operatore ha acceso «il coupon segue», ma la
   regola che la fa attaccare viveva dentro lo `<style>` del widget CMS — e su una pagina dove
   quel widget non si rende (studio5 `/player/eventi-giorno`) lo stile non arrivava.
   Misurato sul servito prima di spostarla:

       studio5 /player/               regola presente 1 · classe 2  → coupon sticky   ✅
       studio5 /player/eventi-giorno  regola presente 0 · classe 1  → coupon static   🔴

   Un'opzione accesa che non fa niente, e nessun errore da nessuna parte: è la stessa forma della
   guardia di casa sui «fantasmi» — là una `var()` che nessuno definisce, qui una classe che
   nessuno stila.
   ⛔ La `@media(min-width:900px)` si porta dietro: sotto i 900 il coupon non deve incollarsi,
   perché sul telefono la colonna sta sotto il contenuto e un blocco appiccicato mangerebbe lo
   schermo. Spostare una regola senza la sua condizione è il modo di ripararne una e romperne
   un'altra. */
/* 🔴 12/08 — E CHI SEGUE È LA COLONNA, NON SOLO IL COUPON (Jesper, 06:38).
   *«il banner "wdg wdg-banner" va sotto il coupon o meglio va sotto "box-sidebar" quando si
   scrolla — è buono che il coupon scrolla in quel modo ma devi includere tutto che c'è dopo il
   coupon»*.

   Misurato sul servito prima di toccare, sulla home di studio5:

       <section class="cms-region cms-rail_right cms-region--segue">
         <div class="wdg wdg-event-code">…
         <div class="wdg wdg-betslip wdg-betslip--segue">…   ← lo scroller era QUI, da solo
         <div class="wdg wdg-banner">…                       ← e questo restava FUORI

   Lo `sticky` stava sul widget del coupon: tutto quello che la regione mette dopo — il banner, e
   qualunque cosa l'operatore componga in coda — restava fermo nella pagina e usciva dallo
   schermo. Non è «sposta un banner»: è che il blocco che segue deve essere la COLONNA.

   👉 Adesso lo scroller è la regione, e il widget del coupon torna un blocco normale dentro di
   lei. Le due righe vanno insieme: lasciando lo sticky anche sul figlio si otterrebbero due
   scrollatori annidati, e la rotellina finirebbe nel più interno.

   ⚠️ `overscroll-behavior:auto` si porta con lo scroller — è la richiesta di Dav dell'08/08
   («arrivato alla fine permetta di scrollare anche la right bar»): il nome è *scroll chaining*, e
   vive sull'elemento che scorre, non su quello che una volta scorreva.
   ⛔ E la `@media(min-width:900px)` resta: sotto i 900 la colonna sta sotto il contenuto e un
   blocco appiccicato mangerebbe lo schermo. Spostare una regola senza la sua condizione è il
   modo di ripararne una e romperne un'altra. */
@media(min-width:900px){
  .cms-region--segue{position:sticky;top:12px;max-height:calc(100vh - 24px);
    overflow-y:auto;overscroll-behavior:auto}
  .cms-region--segue .wdg-betslip--segue{position:static;max-height:none;overflow:visible}
  /* le pagine SENZA regioni CMS non hanno la sezione: lì lo scroller resta quello di prima */
  .wdg-betslip--segue:not(.cms-region--segue *){position:sticky;top:12px;
    max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:auto}
}

/* ── LA COLONNA LARGA, 300px ⇄ 500px (Jesper 10/08 14:28) ──────────────────
   Una riga sola, perché la larghezza era GIÀ una variabile: griglia, rail sticky e contenuto
   dentro la leggono tutti da qui. Scriverne una nuova su `.rail-r` avrebbe lasciato la griglia a
   300 e il pannello a 500 — cioè un pannello che sborda sul centro.

   ⛔ SOLO DA 1181px IN SU, ed è la riga che questo blocco esiste per spiegare.
   `.cols.rail-larga` ha due classi e batte per specificità il `.cols` della media query a 1180 —
   quindi SENZA questo `@media` la modalità larga avrebbe vinto anche a 1100px, dove le tre
   colonne diventano 200 + 500 + due gap: al centro restano ~350px, cioè la partita si guarda in
   una fessura per allargare il pannello di fianco. E sotto i 1080 non farebbe niente comunque
   (là la griglia è forzata a una colonna con `!important`).
   👉 Perciò il tasto compare solo dove funziona: sotto 1181px è nascosto. Un tasto che non fa
   niente è peggio di un tasto che non c'è — chi lo preme conclude che il sito è rotto. */
@media (min-width:1181px){
  .cols.rail-larga{--rail-r-w:500px}
}

/* ── I PARZIALI PER SET nella riga IN DIRETTA (Jesper, 10/08 08:01) ────────
   *«per il tennis nella pagina in diretta fai lo score a set: 1 numero per set separati da una
   linea per ogni squadra/giocatore»*.

   ⛔ `float`, e non un terzo elemento della riga: `.tb-ev-live` è una griglia a DUE colonne
   (misurata sul servito, `227px 7px` — nome e punteggio) e la disegna il TEMA, non noi. Un
   `<span>` in mezzo sarebbe diventato un terzo elemento e sarebbe andato a capo, spezzando ogni
   riga live del sito. Dentro la cella del nome, invece, il float lo appoggia al bordo destro —
   cioè giusto a sinistra del punteggio, dove lo mette anche la banda `_lc_banda`.
   📌 Niente colore: il numero prende quello della riga, smorzato dall'opacità. È la lezione
   dell'incasso parziale di stasera — un colore fisso è un colore sbagliato appena cambia la
   scheda sotto.
   📌 `tabular-nums`: i parziali stanno uno sopra l'altro, e con le cifre a larghezza variabile
   le due righe non si allineano. */
.tb-parz{float:inline-end;margin-inline-start:8px;opacity:.7;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ── RESPONSIVE v2 — deve RIFLUIRE ─────────────────────────────────────── */
@media (max-width:1180px){
  /* Solo le MISURE delle rail, non il numero di colonne: quello lo decide chi c'è nel DOM
     (vedi il blocco LAYOUT). Riscrivendo qui la griglia a tre colonne, il difetto della quarta
     combinazione tornava fra 1081 e 1180px — e per giunta il casinò teneva 300px invece di 280,
     perché la regola `:has` vinceva su questa di specificità.
     ⚠️ QUESTA REGOLA RESTA LA PRIMA DEL BLOCCO: la prova che difende il punto di rottura legge
     esattamente la prima, e una riga infilata davanti la fa fallire senza che nulla si sia
     rotto davvero. Chi aggiunge qui dentro, aggiunge SOTTO. */
  .cols{--rail-l-w:200px;--rail-r-w:280px}
  /* ⛔ E il tasto della colonna larga sta QUI, non in un secondo `@media` con la stessa domanda:
     due blocchi con la stessa condizione sono due posti dove cercare la stessa regola, e chi ne
     cambia uno non sa dell'altro. */
  .tb-diretta-largo{display:none}
}
@media (max-width:1080px){
  .cols,.cols.solo{grid-template-columns:minmax(0,1fr)!important}
  .rail-r{position:static;max-height:none;overflow:visible;display:flex;flex-direction:column;gap:12px;order:3}
  .rail-r .slip{order:-1}
  .subnav-in{justify-content:flex-start}
  /* la sinistra diventa un cassetto a scomparsa col burger */
  .rail-l{position:fixed;inset-block:0;inset-inline-start:0;width:284px;max-width:86vw;max-height:none;z-index:95;transform:translateX(-105%);transition:transform .22s ease;background:var(--primary-background);padding:12px;box-shadow:6px 0 26px rgba(0,0,0,.5)}
  .rail-l.open{transform:none}
  .rail-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:94;opacity:0;visibility:hidden;transition:opacity .2s}
  .rail-scrim.on{opacity:1;visibility:visible}
  .burger{display:inline-flex}
}
@media (max-width:680px){
  .slide{min-height:180px;padding:18px 20px}
  .mp-grid{grid-template-columns:1fr 1fr}
  .subnav .tab{min-width:0;flex:1}
  .subnav .tab span{font-size:10px}
}
@media (max-width:420px){
  .mp-grid{grid-template-columns:1fr}
}

/* ── CASINÒ: la griglia dei giochi ─────────────────────────────────────────── */
/* LA GRIGLIA DELLA VETRINA — Dav, 04/08: «esattamente 6».
   🔴 NON `auto-fill`. Gliel'abbiamo chiesto prima di scrivere, misurando che la sua
   formula originale (`repeat(auto-fill, minmax(170px,1fr))`) dava un numero VARIABILE:
   1 colonna a 390px, 3 a 768, 5 a 1024, 6 da 1440 in su. Sei le voleva davvero, e fisse:
   `repeat(6,1fr)` e' l'unica forma che le da' a qualunque larghezza.
   ⚠️ IL PREZZO era stato misurato e detto: a 390px sei colonne fanno una card di 47px — un
   francobollo. La riga per il telefono era scritta qui sotto e SPENTA, in attesa di lui.
   ✅ 04/08, Dav ha risposto: «sei sul computer e su telefono fai 2». Riaccesa, con DUE
   colonne (non tre, come diceva la riga vecchia). */
.casino-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:12px}
/* LA SOGLIA E' 640px, e non e' un numero preso a caso: e' la larghezza alla quale la card a sei
 * colonne torna a essere un BERSAGLIO CHE SI PUO' TOCCARE. Misurato sul servito, card e
 * immagine dentro:
 *      320px -> 36x27  (immagine 34px)      <- sotto i 44px minimi di un tocco: non si prende
 *      390px -> 47x35  (immagine 45px)
 *      560px -> 75x56  (immagine 73px)
 *      640px -> 88x66  (immagine 86px)      <- il doppio del minimo: da qui in su si tocca
 *     1280px -> 192x144 (immagine 190px)
 * Sotto la soglia, con due colonne: 133x100 a 320px, 168x126 a 390px, 290x217 a 639px.
 * ⚠️ IL SALTO AL CONFINE E' GRANDE (290px -> 88px) e non e' un difetto: e' la conseguenza di
 * saltare da due colonne a sei, cioe' esattamente le due misure che ha chiesto Dav. Se un
 * giorno danno fastidio i 639px, la risposta non e' spostare la soglia ma chiedere a lui un
 * numero intermedio per le larghezze di mezzo.
 * Il `gap` scende a 8px perche' sul telefono 12px fra due sole colonne sono spazio buttato. */
@media (max-width:639px){ .casino-grid{grid-template-columns:repeat(2,1fr);gap:8px} }
.casino-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px;background:var(--qt-background);border:1px solid var(--primary-border);border-radius:var(--r);text-decoration:none;transition:border-color .15s}
.casino-card:hover{border-color:var(--btn-primary)}
.casino-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.casino-card-ph{display:grid;place-items:center;width:100%;aspect-ratio:4/3;font-size:34px;background:var(--navy-1);border-radius:6px}
.casino-card-name{color:var(--primary-text);font-weight:700;font-size:13px}
.casino-card-provider{color:var(--ink-3);font-size:11px}
.casino-badge{position:absolute;inset-block-start:6px;inset-inline-end:6px;background:var(--btn-primary);color:#0a2233;font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px}

/* ── SISTEMA: il FISSO (banker) e le poste per tipo ─────────────────────────
   La «B» accanto alla gamba (solo in modo sistema): fisso = entra in ogni
   combinazione. Le righe per tipo (Singole/Doppie/…) mostrano il conteggio del
   motore e la posta di ciascun tipo — il modello del riferimento cliente. */
.leg-b{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-block-start:2px;
  border:1px solid var(--primary-border);border-radius:6px;font-size:12px;font-weight:800;color:var(--secondary-text);
  cursor:pointer;position:relative;user-select:none}
.leg-b.on{background:var(--btn-primary);border-color:var(--btn-primary);color:var(--btn-primary-text,#0a2233)}
.type-rows{display:flex;flex-direction:column;gap:6px;padding:2px 14px 12px}
.type-row{display:flex;align-items:center;gap:10px}
.type-row .nm{flex:none;min-width:72px;font-weight:700;font-size:12.5px}
.type-row .ct{flex:1;color:var(--secondary-text);font-size:12px}
.type-row .stake-in{flex:none;width:110px}
.type-row .stake-in .in{width:100%}

/* ── Area conto: testata + sezioni del menu, e la griglia dei metodi di pagamento ── */
.acct-head{padding:12px 14px;border-block-end:1px solid var(--primary-border);display:flex;flex-direction:column;gap:4px}
.acct-who{font-size:13px;overflow:hidden;text-overflow:ellipsis}
.acct-saldo{display:flex;justify-content:space-between;align-items:baseline}
.acct-saldo small{color:var(--secondary-text);font-size:11px}
.acct-sec{display:block;padding:10px 11px 4px;color:var(--secondary-text);font-size:10.5px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;opacity:.8}
.pay-cat{display:block;color:var(--secondary-text);font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;margin-block-end:8px}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pay-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;
  border:1px solid var(--primary-border);border-radius:var(--r-s);background:var(--navy-1);color:var(--primary-text);
  font:inherit;text-align:start;cursor:pointer}
.pay-tile small{color:var(--secondary-text);font-size:11.5px}
.pay-tile.on{border-color:var(--btn-primary);background:color-mix(in srgb,var(--btn-primary) 12%,transparent)}
.pay-tile:disabled{cursor:default}

/* ── Registro a pestañas (e-mail / un clic) ── */
.reg-tabs{display:flex;gap:8px;margin-block-end:14px}
.reg-tab{flex:1;padding:10px;border:1px solid var(--primary-border);border-radius:var(--r-s);
  background:var(--navy-1);color:var(--secondary-text);font:inherit;font-weight:700;cursor:pointer}
.reg-tab.on{border-color:var(--btn-primary);color:var(--or-2);background:color-mix(in srgb,var(--btn-primary) 12%,transparent)}
.acct-exit{padding:8px;border-block-start:1px solid var(--primary-border)}
/* Le due regole che stavano qui — «area conto» (menu senza schedina) e la sua gemella del
   casinò (schedina senza menu, `c1c615de`) — sono state assorbite nel blocco LAYOUT, dove la
   griglia si deduce dalle rail presenti. Erano due casi speciali su quattro combinazioni: il
   terzo caso scoperto (promozioni, 03/08) ha mostrato che la lista dei casi non si chiude mai
   aggiungendo il gemello successivo. Qui non serve più niente. */

/* ============================================================================
   COUPON COMPATTO — richiesta Dav (22/07): «diminuire un po' i padding e il
   font size», densità simile al riferimento Dav_coupon_ref_compatto.png.
   Solo RITOCCO delle classi esistenti: nessun markup nuovo, tema scuro invariato.
   ⚠️ Tutto SCOPATO sotto .slip / .slipbar: `.card-h`, `.in`, `.btn`, `.krow`
   sono classi globali — senza scope rimpicciolirei mezzo sito.
   Design D.
   ========================================================================== */

/* testata «Il tuo coupon» */
.slip .card-h{padding:8px 12px;font-size:13.5px}
.slip .slip-n{min-width:20px;font-size:11px;padding:1px 6px}

/* riga evento: nome + mercato + quota + ✕ */
.slip .leg{padding:7px 12px;gap:8px}
.slip .leg-info b{font-size:12px;line-height:1.3}
.slip .leg-info small{font-size:10.5px;line-height:1.35}
.slip .leg .px{font-size:12.5px}
.slip .leg-x{padding:1px 4px}
.slip .leg .warn{font-size:10.5px}
.slip .leg-b{width:21px;height:21px;margin-block-start:1px}

/* modalità (Singola/Multipla/Sistema) */
.slip .sys-row{gap:6px}
.slip .sys{padding:4px 10px;font-size:11.5px}

/* blocco posta: importo, +/-, quick button */
.slip .stake-row{padding:8px 12px;gap:8px}
.slip .stake-row label{font-size:11.5px}
.slip .stake-in{gap:6px}
.slip .stake-in .in{width:92px}
.slip .in{padding:6px 9px;font-size:13px}
.slip .cursign{font-size:12.5px}
.slip .type-row{padding-block:4px}
.slip .type-row .nm{font-size:11.5px;min-width:64px}
.slip .type-row .ct{font-size:10.5px}

/* riepilogo: quota totale, bonus, vincita potenziale */
.slip .krow{padding:4px 12px;font-size:12px}
.slip .krow.big{padding-block:6px}
.slip .krow.big b{font-size:16px}

/* combinazioni (sistema ridotto) */
.slip .combo{padding-block:4px}
.slip .combo .nm{font-size:11.5px}
.slip .combo .px,.slip .combo .money{font-size:12px}

/* piede: bottoni */
.slip .slip-foot{padding:8px 12px 12px;gap:6px}
.slip .slip-foot .btn,.slip .slip-foot .btn-line{padding:8px 14px;font-size:13px}
.slip .form-note{font-size:10.5px;line-height:1.4}
.slip .empty{padding:18px 14px;font-size:12.5px}

/* barra schedina MOBILE: stessa cura, ma i bersagli restano tappabili */
.slipbar{padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));gap:10px}
.slipbar .sum b{font-size:13px}
.slipbar .sum small{font-size:11px}
.slipbar .btn{padding:9px 16px;font-size:13px}   /* ≥36px: resta comodo col pollice */

/* NIENTE LIVE NELLA PRENOTAZIONE (Angelo 29/07): il perché accanto al bottone spento. Non un
   errore rosso: un'istruzione — dice quale evento togliere, e si legge in un colpo. */
.slip-live-blocco{margin:6px 0 8px;padding:8px 10px;border-radius:8px;font-size:.82em;
  line-height:1.45;font-weight:700;background:#fff4d6;color:#7a4a00;border:1px solid #f0c86a}

/* ────────────────────────────────────────────────────────────────────────────────────────────
 * LE BANDIERE DEL SELETTORE LINGUA SONO IMMAGINI, e vanno misurate qui.
 *
 * Erano caratteri emoji: li dimensionava `font-size` (17px nel chip, 16px nelle voci) e non
 * serviva altro. Sostituite con le SVG del nostro pacchetto — perché una bandiera-carattere la
 * disegna il font di chi guarda, e dove quel font non c'è resta un quadratino vuoto — quella
 * misura non vale più: le SVG dichiarano `viewBox="0 0 640 480"` e senza width/height
 * uscirebbero larghe mezzo schermo.
 *
 * ⚠️ `img.fl` e non `.fl`: la stessa classe è usata anche altrove per gli `<span>` delle
 * bandierine di paese (`.he-team .fl`, `.lcw-lh .fl`…), che hanno già la loro regola. Il
 * selettore col tag tocca solo le immagini nuove.
 * 🔴 STA IN `tb.css` PER UNA RAGIONE MISURATA: le quattro cornici che hanno il selettore
 * lingua — `player/base.html` e i tre temi (arena, legacy24248, legacy_modern) — caricano
 * tutte questo foglio e NESSUNA carica `header_prefs.css`, dove vive `.tb-flag-r`. Appoggiarsi
 * a quella classe avrebbe lasciato le immagini senza misura proprio su queste pagine.
 * ──────────────────────────────────────────────────────────────────────────────────────────── */
img.fl{width:20px;height:20px;flex:none;max-width:none;border-radius:50%;object-fit:cover;
  vertical-align:middle}

/* IL PALLINO «AL SERVIZIO» sulla scheda evento — disegnato, non scritto.
 * Nessun font e nessuna immagine: un tondo con `background:currentColor`, che prende il colore
 * del testo che lo ospita e quindi funziona su tema chiaro e scuro senza due versioni. È la
 * regola di Dav sulle icone applicata alla cosa più piccola che c'è: un carattere lo disegna il
 * font di chi guarda, e dove quel font non c'è resta un quadratino vuoto. */
.tb-serve-dot{display:inline-block;width:.42em;height:.42em;border-radius:50%;
  background:currentColor;vertical-align:.12em;margin-inline-end:.28em}
[data-tb-serve="away"].tb-serve-dot{margin-inline:.28em 0}

/* ══ BARRA FILTRI delle liste del conto (movimenti, e domani le altre) ══
   Vive nel RAMO DI CASA, cioè su 57 skin su 58: il gemello del tema
   (theme_family/_filtri_data.html) ha i suoi colori perché sta dentro il suo grafico, questa usa
   le variabili della skin perché deve stare bene su tutte.
   ⚠️ Non è cosmetica: senza questa barra le liste restano ferme al giorno corrente
   (default_oggi), e l'assenza NASCONDE DENARO GIÀ MOVIMENTATO — vedi player/_filtri_data.html. */
.tb-filtri{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:12px 14px;
  background:var(--qt-background);border:1px solid var(--primary-border);
  border-radius:var(--r-s);margin:0 0 12px}
.tb-filtri .tbf-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.tb-filtri label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;
  color:var(--secondary-text)}
.tb-filtri .in{min-width:150px}
.tb-filtri .tbf-azioni{display:flex;gap:8px;margin-inline-start:auto;align-items:center}
@media (max-width:640px){
  .tb-filtri .in{min-width:0;width:100%}
  .tb-filtri .tbf-campo{flex:1 1 45%}
  .tb-filtri .tbf-azioni{margin-inline-start:0;width:100%}
}

/* ══ LE SETTE CASELLE D'ESITO, LA LEGENDA E I BOTTONI SOTTO (Jesper, 12/08 14:26) ══
   Tre fasce impilate sotto i campi: caselle, legenda, bottoni. `flex-basis:100%` perche' la
   barra e' un flex che va a capo da solo — senza, le caselle si infilerebbero in coda ai campi
   e la fila orizzontale che ha chiesto Jesper diventerebbe la coda di un'altra riga.
   ⚠️ I COLORI DEI QUADRATI NON STANNO QUI: il quadrato e' un `.bl-dot`, e quello legge le
   variabili del tema (--bl-rejected, --bl-lose, …) insieme al pallino della riga. Una legenda
   con la sua tavolozza direbbe «rosso = perdenti» mentre le righe sono di un altro rosso. */
.tb-filtri .tbf-esiti,.tb-filtri .tbf-legenda{flex:1 0 100%;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px 18px;padding-block-start:10px;
  border-block-start:1px solid var(--primary-border)}
.tb-filtri .tbf-esito{display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--primary-text);
  /* le etichette della barra sono maiuscoletto: queste sono scelte da leggere, non titoli */
  text-transform:none;letter-spacing:normal}
.tb-filtri .tbf-esito input{accent-color:var(--btn-primary);inline-size:15px;block-size:15px;
  margin:0;cursor:pointer}
.tb-filtri .tbf-legenda{gap:6px 14px;font-size:12.5px;color:var(--secondary-text)}
.tb-filtri .tbf-legenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* Il QUADRATO, non il pallino: Jesper ha chiesto «quadrati colorati». Stessa classe `.bl-dot`
   (quindi stesso colore della riga), forma diversa — il raggio lo azzero qui. */
.tb-filtri .tbf-legenda .bl-dot{border-radius:2px;inline-size:11px;block-size:11px}
.tb-filtri .tbf-riscossa{color:#fff;font-size:13px;line-height:1}
.tb-filtri .tbf-azioni--sotto{flex:1 0 100%;margin-inline-start:0;justify-content:center;
  padding-block-start:4px}

/* ══ LE TRE PAGINE DELL'AREA CONTO che il ramo di casa non aveva ══
   Sicurezza · Impostazioni del conto · Assistenza (Angelo 09/08). Su 57 skin su 58 quelle tre
   voci del menu aprivano «Dati personali»: la pagina non esisteva, e il menu la prometteva.
   Come per `.tb-filtri`, qui SOLO variabili della skin — la stessa pagina deve stare bene su
   57 tavolozze diverse, e il gemello del tema ha i suoi colori perché vive dentro il suo grafico. */

/* Una scelta in un elenco di scelte (formato quote, orologio). Serve perché `.field label` è la
   riga-etichetta del campo — grassetto e colore secondario: senza questa regola le sei quote si
   leggevano come sei titoli invece che come sei opzioni. */
.opt{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--primary-text);
  font-size:14px;cursor:pointer;padding-block:3px}
.opt small{font-weight:400}

/* Le PORTE dell'assistenza. `auto-fit` e non un numero di colonne fisso: a 390 diventa una
   colonna da sola, ed è la larghezza dove queste pagine si guardano di più. */
.as-porte{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.as-porta{display:block;padding:14px;border:1px solid var(--primary-border);
  border-radius:var(--r-s);background:var(--qt-background);color:inherit;text-decoration:none}
a.as-porta:hover{border-color:var(--btn-primary)}
.as-porta b{display:block;margin-block-end:4px;color:var(--primary-text)}
.as-porta small{display:block;color:var(--secondary-text);line-height:1.4}
/* La porta SPENTA non finge di essere premibile: nessun bordo che si accende, nessun cursore a
   manina. Si vede che è una notizia, non un bottone. */
.as-porta--spenta{opacity:.72}

/* Le CASELLE nella barra filtri (area Sport/Live, «solo non letti»). Sono un campo come gli
   altri — stessa etichetta in alto — ma il controllo sta in riga invece che in colonna: una
   casella sotto la sua etichetta, larga quanto il campo, sembra un interruttore rotto. */
.tb-filtri .tbf-flag .tbf-caselle{display:flex;align-items:center;gap:14px;min-height:38px}
.tb-filtri .tbf-flag label{display:flex;align-items:center;gap:6px;font-size:13px;
  text-transform:none;letter-spacing:0;font-weight:500;color:var(--primary-text);cursor:pointer}
.tb-filtri .tbf-flag > label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--secondary-text)}
/* I due importi non hanno bisogno della larghezza di una data: stretti stanno in riga con gli
   altri invece di mandare la barra a capo. */
.tb-filtri input[type="number"].in{min-width:110px}

/* ══ QUANTE RIGHE PER PAGINA (Angelo, 11/08 01:00, con foto) ═══════════════════════════════
   Sta nell'intestazione della card, in alto a destra — dove l'ha disegnato lui. Il contenitore
   `.card-h` è già `flex` con `space-between`, quindi qui non si posiziona niente: si dà solo
   alla barra il peso giusto per NON sembrare un titolo. Peso e corpo normali: dentro un
   `.card-h` che è `font-weight:800`, un campo in grassetto si legge come una seconda
   intestazione.
   ⚠️ Una riga sola per tutt'e due le cronologie: il markup è un file solo (`_per_pagina.html`),
   e due blocchi di CSS che lo vestono diverso ricreerebbero la differenza che il file toglie. */
.tb-perpag{display:flex;align-items:center;gap:10px;font-weight:400;font-size:12.5px}
.tb-perpag-f{display:flex;align-items:center;gap:6px;margin:0}
.tb-perpag label{opacity:.75;white-space:nowrap}
.tb-perpag input[type=number]{width:64px;padding:4px 6px;font-size:12.5px;
  border:1px solid var(--primary-border);border-radius:6px;background:transparent;color:inherit}
.tb-perpag-ok{padding:4px 10px;font-size:12.5px;cursor:pointer;
  border:1px solid var(--primary-border);border-radius:6px;background:transparent;color:inherit}
.tb-perpag-pag{display:flex;align-items:center;gap:6px}
.tb-perpag-pag a,.tb-perpag-pag .off{padding:2px 7px;border-radius:6px;text-decoration:none;
  border:1px solid var(--primary-border);color:inherit}
.tb-perpag-pag .off{opacity:.35}
.tb-perpag-n{opacity:.75;white-space:nowrap}
/* Sul telefono l'intestazione va a capo invece di stringere il titolo fino a spezzarlo. */
@media (max-width:560px){.card-h{flex-wrap:wrap}.tb-perpag{width:100%;justify-content:space-between}}

/* 🔴 CHI NAVIGA CON LA TASTIERA DEVE VEDERE DOV'È (13/08, misurato sul servito).
   Su 40 comandi per pagina, alcuni non mostravano nessun segno quando ricevevano il fuoco —
   e i peggiori stanno sulla REGISTRAZIONE, dove si compila un modulo senza mouse:

       studio5  home 1/40 · registrazione 4/40      betslot  home 3/40 · registrazione 6/40
       timerbet home 2/40 · registrazione 7/40

   ⛔ `:where()` ha specificità ZERO: questa regola non scavalca niente: riempie solo i buchi.
   Dove una skin o un tema hanno già il loro segno, resta il loro.
   ⛔ E `:focus-visible`, non `:focus`: il segno compare a chi arriva con la tastiera, non a chi
   clicca col mouse. Il disegno a riposo non cambia di un pixel — il patto con Dav è struttura
   sì, colori e sfondi no, e qui non si tocca nessuno dei due. */
a[href]:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--acc,#3fa9f5)!important;outline-offset:2px}

/* ⚠️ IL `!important` NON È PIGRIZIA, ed è l'unica riga di questo file che ne ha uno.
   Il primo tentativo era `:where(...)`, specificità ZERO, per non scavalcare nessuno. Misurato
   premendo Tab davvero: **non cambiava niente**. Il motivo è che in SEI fogli diversi qualcuno
   spegne l'outline apposta (`prematch.css`, `home_tabs.css`, `evsearch.css`, `live_frame.css`,
   `event_markets.css`, `event_search.css`), a volte già con `!important`.

   Inseguire quelle sei regole vuol dire toccare sei file di altre corsie per una cosa che è un
   PAVIMENTO, non una decorazione: chi naviga con la tastiera deve sapere dov'è.

   ⛔ E vale solo per `:focus-visible` — il segno compare a chi arriva con la tastiera, non a chi
   clicca. **A riposo non cambia un pixel**, quindi il patto con Dav resta intero. */