/* ═══════════════════════════════════════════════════════════════════════════
   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.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.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.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));
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--navy-0);color:var(--ink);font:500 14px/1.45 var(--font);-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(--or);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(--mute)}
.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-d);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(--line);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(--ink);font-weight:600}
.langrow:hover{background:var(--navy-2)}.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(--mute);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(--or)}
.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 ───────────────────────────────────────────────────────────── */
.cols{display:grid;gap:16px;align-items:start;grid-template-columns:236px minmax(0,1fr) 300px;padding-block:16px}
/* 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(--line);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(--ink);font-weight:600;font-size:13px}
.sportnav a .ico{width:20px;height:20px;color:var(--or-2);flex:none}
.sportnav a:hover{background:var(--navy-2)}
.sportnav a.on{background:color-mix(in srgb,var(--or) 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(--or-d)}
.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(--line);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(--mute)}
.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(--mute);font-size:11.5px}
.mt-go{color:var(--mute);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(--navy-2);border:1px solid var(--line);border-radius:var(--r-s);transition:border-color .12s,background .12s,transform .06s}
.chip:hover{border-color:var(--or);background:var(--navy-3)}
.chip:active{transform:translateY(1px)}
.chip .lbl{color:var(--mute);font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .px{font-size:16px;font-weight:800}
.chip.on{background:var(--or);border-color:var(--or)}
.chip.on .lbl,.chip.on .px{color:#fff}

/* 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(--line);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(--mute);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(--line);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(--line);font-weight:800}
.card-b{padding:14px}
.slip{box-shadow:0 12px 30px rgba(0,0,0,.3)}
.slip-n{background:var(--or);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(--line)}
.leg-info{flex:1;min-width:0}.leg-info b{display:block;font-size:13px}.leg-info small{color:var(--mute);font-size:11.5px;display:block}
.leg .px{font-size:14px;font-weight:800}
.leg-x{color:var(--mute);padding:2px 5px;border-radius:6px}.leg-x:hover{color:var(--live);background:var(--navy-2)}
.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(--mute);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(--or);color:#fff}
.btn-line{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--mute);background:transparent;border-radius:var(--r-s);padding:8px 14px;font-weight:700}
.btn-line:hover{border-color:var(--or);color:var(--or-2)}
.empty{padding:24px 16px;text-align:center;color:var(--mute)}.empty b{display:block;color:var(--ink);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(--line)}
.wins .win-row:last-child{border-block-end:0}
.wins small{display:block;color:var(--mute);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(--line);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(--mute);display:block}
.slipbar .btn{background:var(--or);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(--line)}
.stake-row label{color:var(--mute);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(--navy-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-s);padding:9px 12px;width:100%;font:600 14px/1.2 var(--font)}
.in:focus{outline:none;border-color:var(--or)}
.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(--line)}
.sys{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--mute);font-weight:700;font-size:12.5px;cursor:pointer}.sys.on{border-color:var(--or);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(--mute)}.krow b{font-weight:800}.krow.big b{font-size:18px}
.combos{border-block-end:1px solid var(--line)}
.combo{display:flex;align-items:center;gap:10px;padding:9px 14px;border-block-start:1px solid var(--line);color:var(--ink);cursor:pointer}
.combo:first-child{border-block-start:0}
.combo input{accent-color:var(--or);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(--mute);font-weight:700;font-size:12.5px}
.check{display:flex;align-items:flex-start;gap:10px;margin-block-end:10px;color:var(--mute);font-weight:600}.check input{accent-color:var(--or);width:17px;height:17px;margin-block-start:1px;flex:none}
select.in{appearance:none}
.form-note{color:var(--mute);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(--mute);font-weight:600}.acct-nav a:hover{background:var(--navy-2);color:var(--ink)}.acct-nav a.on{background:color-mix(in srgb,var(--or) 18%,transparent);color:var(--or-2)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-block-end:1px solid var(--line)}.kv:last-child{border-block-end:0}.kv span{color:var(--mute)}.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(--mute);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-block-end:1px solid var(--line)}
.tbl td{padding:11px 12px;border-block-end:1px solid var(--line)}.tbl tr:last-child td{border-block-end:0}.tbl tbody tr:hover{background:var(--navy-2)}
.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(--navy-2);color:var(--mute)}
.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(--or) 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(--navy-2);overflow:hidden}.bar i{display:block;height:100%;background:var(--or);border-radius:999px}
.h1{font-size:22px;font-weight:800}.h2{font-size:16px;font-weight:800}.eyebrow{color:var(--mute);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(--line);border-radius:var(--r);color:var(--ink)}
.page-title{color:var(--ink);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(--mute);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(--line);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(--or) 45%,transparent);color:var(--or-2)}

/* footer */
.ftr{margin-block-start:auto;border-block-start:1px solid var(--line);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(--mute);font-size:12.5px}
.ftr-in a:hover{color:var(--or-2)}.ftr .adult{border:1px solid var(--mute);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(--mute);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(--or)}
.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.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.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(--or-d);font-size:15px;padding:11px 22px}
.slide-live .hero-cta,.slide-combo .hero-cta{background:var(--or);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(--or)}
@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(--line);font-weight:700;font-size:13px;white-space:nowrap;transition:border-color .12s,transform .06s}
.ql:hover{border-color:var(--or);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(--line);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(--line);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(--ink);font-weight:600;font-size:12.5px}
.leaguenav a:hover{background:var(--navy-2)}
.lg-dot{width:7px;height:7px;border-radius:50%;background:var(--or);flex:none}
.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(--line);scrollbar-width:none}
.mov-tabs::-webkit-scrollbar{display:none}
.mov-tab{padding:7px 12px;border-radius:999px;background:var(--navy-2);color:var(--mute);font-weight:700;font-size:12.5px;white-space:nowrap}
.mov-tab.on{background:var(--or);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(--or) calc(var(--p)*1%),var(--navy-2) 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(--line)}
.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}

/* ── RESPONSIVE v2 — deve RIFLUIRE ─────────────────────────────────────── */
@media (max-width:1180px){
  .cols{grid-template-columns:200px minmax(0,1fr) 280px}
}
@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(--navy-0);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 ─────────────────────────────────────────── */
.casino-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:12px}
.casino-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px;background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .15s}
.casino-card:hover{border-color:var(--or)}
.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(--ink);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(--or);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(--line);border-radius:6px;font-size:12px;font-weight:800;color:var(--mute);
  cursor:pointer;position:relative;user-select:none}
.leg-b.on{background:var(--or);border-color:var(--or);color:var(--on-or,#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(--mute);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(--line);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(--mute);font-size:11px}
.acct-sec{display:block;padding:10px 11px 4px;color:var(--mute);font-size:10.5px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;opacity:.8}
.pay-cat{display:block;color:var(--mute);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(--line);border-radius:var(--r-s);background:var(--navy-1);color:var(--ink);
  font:inherit;text-align:start;cursor:pointer}
.pay-tile small{color:var(--mute);font-size:11.5px}
.pay-tile.on{border-color:var(--or);background:color-mix(in srgb,var(--or) 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(--line);border-radius:var(--r-s);
  background:var(--navy-1);color:var(--mute);font:inherit;font-weight:700;cursor:pointer}
.reg-tab.on{border-color:var(--or);color:var(--or-2);background:color-mix(in srgb,var(--or) 12%,transparent)}
.acct-exit{padding:8px;border-block-start:1px solid var(--line)}
/* Area conto: menu a sinistra + contenuto, senza schedina — due colonne, non tre. */
.cols:has(> .rail-l):not(:has(> .rail-r)){grid-template-columns:236px minmax(0,1fr)}

/* ============================================================================
   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 */