/* ═══════════════════════════════════════════════════════════════════════════
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;
--on-or:#ffffff;
--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 */
--tb-coupon-accento:var(--or); /* 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(--btn-primary-hover);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)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;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}
.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;
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). */
.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:2px;scrollbar-width:thin}
.rail-l::-webkit-scrollbar,.rail-r::-webkit-scrollbar{width:6px}
.feed{min-width:0}
.cols.solo{grid-template-columns:minmax(0,1fr)}
/* rail sport con icone */
.rail-card{background:var(--navy-1);border:1px solid var(--primary-border);border-radius:var(--r);overflow:hidden}
.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}
.live-dot{color:var(--live);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)}
.slip-n{background:var(--btn-primary);color:#fff;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}
.slip-foot .btn{background:var(--btn-primary);color:#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:#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:#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' 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 `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:#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}
/* ── 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
`` 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 `` 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 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}