/* =========================================================
   LetBetAfrika – classic bookmaker layout (light theme)
   ========================================================= */
:root{
  --brand:#0a7d3e;          /* header / primary */
  --brand-dark:#06612f;
  --gold:#ffc20e;           /* CTA / highlights */
  --gold-ink:#1c1600;
  --bg:#eceef1;
  --line:#e2e5e9;
  --line-2:#d3d7dc;
  --text:#1c1f23;
  --muted:#7d838c;
  --odd:#f1f3f5;
  --odd-hover:#e5e8ec;
  --sel:#0a7d3e;
  --live:#e5163a;
  --up:#0a9a49;
  --down:#e5163a;
  --nav-h:54px;
  --top-h:50px;
  --ow:52px;                /* odds box width */
  --og:4px;                 /* odds gap */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.35;-webkit-tap-highlight-color:transparent}
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));min-height:100vh;overflow-x:hidden}
body.has-pill{padding-bottom:calc(var(--nav-h) + 40px + env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;color:var(--text);background:#fff;border:1px solid var(--line-2);border-radius:3px;padding:9px 10px;width:100%;outline:none}
input:focus,select:focus{border-color:var(--brand)}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.center{text-align:center}
.accent{color:var(--brand)}
.gold{color:#b07c00}
.pad{padding:10px 12px}
.mt{margin-top:10px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:3px;font-weight:700;font-size:13px;white-space:nowrap}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.block{width:100%}
.btn-accent{background:var(--brand);color:#fff}
.btn-accent:hover{background:var(--brand-dark)}
.btn-accent:disabled{background:#a9b9b0;cursor:not-allowed}
.btn-ghost{border:1px solid var(--line-2);background:#fff;color:var(--text)}
.btn-ghost:disabled{opacity:.6}
.btn-light,.btn-dark,.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-glass{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7)}
.topbar .btn-ghost{background:transparent;border-color:rgba(255,255,255,.8);color:#fff}
.topbar .btn-accent{background:var(--gold);color:var(--gold-ink)}
.icon-btn{width:36px;height:36px;display:grid;place-items:center;flex:none}
.link-btn{display:block;margin:8px auto 0;color:var(--brand);font-weight:600;font-size:12.5px}

/* ---------- Brand ---------- */
.logo{display:flex;align-items:center;min-width:0;height:100%}
.logo-text{font-family:Kanit,Roboto,Arial,sans-serif;font-size:21px;font-weight:800;font-style:italic;letter-spacing:-.2px;color:#fff;white-space:nowrap;line-height:1}
.logo-text b{color:var(--gold);font-weight:800;margin-left:3px}
.logo-ball{width:19px;height:19px;margin-left:4px;flex:none}
.foot-logo,.drawer-head,.modal-logo{align-items:center}

/* ---------- Header ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--brand);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.topbar-inner{height:var(--top-h);display:flex;align-items:center;gap:2px;padding:0 6px;max-width:1280px;margin:0 auto}
.search-btn{margin-left:auto}
.top-actions{display:flex;gap:6px;align-items:center}
.balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:0 4px;color:#fff}
.balance small{opacity:.8;font-size:10px}
.balance b{font-size:13px}
.dep-plus{display:none}
.desk-nav{display:none}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live);vertical-align:middle;flex:none;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------- Layout ---------- */
.layout{max-width:1280px;margin:0 auto}
.left-rail{display:none}
main{min-width:0}
.page{display:none}
.page.active{display:block}
.page-title{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}
.page-title h1{font-size:15px;display:flex;align-items:center;gap:7px}
.sub-head{display:flex;align-items:center;gap:4px;padding:3px 6px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--top-h);z-index:6}
.sub-head h1{font-size:14px;line-height:1.25}
.sub-head small{font-size:11px}
.sh-mid{flex:1;min-width:0}
.fav{color:var(--muted)}
.fav.on{color:#e8a600}
.fav.on svg{fill:#e8a600}

/* ---------- Sport tabs (text tabs) ---------- */
.sport-tabs{display:flex;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid var(--line)}
.sport-tabs::-webkit-scrollbar{display:none}
.sport-tabs button{position:relative;flex:0 0 auto;padding:11px 12px;color:#555b63;font-size:13px;white-space:nowrap}
.sport-tabs button i{font-style:normal;font-size:10.5px;color:#a3a8b0;margin-left:3px}
.sport-tabs button .em{display:none}
.sport-tabs button.active{color:var(--brand);font-weight:700}
.sport-tabs button.active::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--brand)}

/* ---------- Carousel ---------- */
.carousel{position:relative;overflow:hidden;background:#0a4d29}
.slides{display:flex;transition:transform .5s ease}
.slide{flex:0 0 100%;aspect-ratio:1640/607;position:relative;display:block;background:#0a4d29 center/cover no-repeat}
.slide.textual{display:flex;align-items:center;padding:14px 16px;color:#fff}
.slide.textual::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0) 80%)}
.slide .st{position:relative;z-index:1;max-width:65%}
.slide small{display:inline-block;font-size:10px;letter-spacing:.8px;font-weight:700;background:var(--gold);color:var(--gold-ink);padding:2px 6px;border-radius:2px}
.slide h3{font-size:19px;line-height:1.15;margin:6px 0 3px;font-weight:900;text-transform:uppercase}
.slide p{font-size:12px;opacity:.9;margin-bottom:8px}
.dots{position:absolute;bottom:6px;left:0;right:0;display:flex;justify-content:center;gap:4px;z-index:2}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.dots i.on{background:#fff}

/* ---------- Quick links ---------- */
.quick-links{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-bottom:1px solid var(--line);padding:9px 4px 8px}
.quick-links a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;color:var(--text)}
.ql-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#e6f3ec;color:var(--brand)}
.ql-ic svg{width:18px;height:18px}
.ql-ic.red{background:#fde8ec;color:var(--live)}
.ql-ic.gold{background:#fff4d1;color:#b07c00}

/* ---------- Section head ---------- */
.section-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 6px}
.section-head h2{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;text-transform:uppercase}
.see-all{color:var(--brand);font-weight:600;font-size:12px}

/* ---------- Live strip (compact) ---------- */
.live-strip{display:flex;gap:6px;overflow-x:auto;padding:0 10px 4px;scrollbar-width:none}
.live-strip::-webkit-scrollbar{display:none}
.live-card{flex:0 0 228px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:7px 8px 8px}
.lc-link{display:block}
.lc-top{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:var(--muted);margin-bottom:3px}
.lc-top span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-min{color:var(--live);font-weight:700;white-space:nowrap}
.lc-team{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.5}
.lc-team span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-team b{color:var(--live);font-weight:700}
.lc-odds{display:grid;gap:4px;margin-top:6px}
.lc-odds .odd{height:34px}
.crest{display:none}

/* ---------- League chips ---------- */
.league-chips{display:flex;gap:6px;overflow-x:auto;padding:0 10px 4px;scrollbar-width:none}
.league-chips::-webkit-scrollbar{display:none}
.lchip{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:6px 10px}
.lchip .flag{font-size:15px}
.lchip b{display:block;font-size:12px;font-weight:600;white-space:nowrap}
.lchip small{color:var(--muted);font-size:10.5px}

/* ---------- List / market tabs ---------- */
.list-tabs{display:flex;background:#fff;border-bottom:1px solid var(--line);margin-top:8px;position:sticky;top:var(--top-h);z-index:5}
.list-tabs button{flex:1;padding:10px 4px;color:#555b63;position:relative}
.list-tabs button.active{color:var(--brand);font-weight:700}
.list-tabs button.active::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:2px;background:var(--brand)}
.market-tabs,.group-chips{display:flex;gap:6px;padding:7px 10px;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid var(--line)}
.market-tabs::-webkit-scrollbar,.group-chips::-webkit-scrollbar{display:none}
.market-tabs button,.group-chips button{flex:0 0 auto;padding:4px 11px;border:1px solid var(--line-2);border-radius:13px;font-size:12px;color:var(--text);background:#fff}
.market-tabs button.active,.group-chips button.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- Match list (compact rows) ---------- */
.league-block{background:#fff;border-bottom:1px solid var(--line);margin-bottom:6px}
.league-head{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 10px;background:#f6f7f9;border-bottom:1px solid var(--line);font-size:12px;font-weight:600}
.lh-name{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.lh-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.lh-name:hover{color:var(--brand)}
.league-head .flag{font-size:13px}
.league-head .cols{display:grid;grid-template-columns:repeat(var(--n,3),var(--ow));gap:var(--og);text-align:center;color:var(--muted);font-weight:500;font-size:11.5px}
.cols-pad{width:28px;flex:none}
.match{display:flex;align-items:center;gap:6px;min-height:56px;padding:5px 6px 5px 10px;border-top:1px solid var(--line)}
.league-head+.match{border-top:0}
.m-info{flex:1;min-width:0}
.m-meta{font-size:10.5px;color:var(--muted);display:flex;gap:6px;white-space:nowrap;overflow:hidden;line-height:1.4}
.m-meta .live{color:var(--live);font-weight:700}
.m-meta .mid{overflow:hidden;text-overflow:ellipsis}
.m-meta .star{color:#e8a600}
.m-team{display:flex;justify-content:space-between;font-size:13px;line-height:1.4}
.m-team span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-team b{color:var(--live);margin-left:6px;font-weight:700}
.m-odds{display:grid;grid-template-columns:repeat(var(--n,3),var(--ow));gap:var(--og)}
.m-more{width:28px;display:flex;align-items:center;justify-content:flex-end;font-size:11px;color:var(--muted)}
.m-more svg{width:11px;height:11px}

/* ---------- Odds buttons ---------- */
.odd{position:relative;height:38px;border-radius:3px;background:var(--odd);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;overflow:hidden}
.odd b{font-weight:600}
.odd small{font-size:10px;color:var(--muted);font-weight:400;line-height:1.1}
.odd:hover{background:var(--odd-hover)}
.odd.sel{background:var(--sel);color:#fff}
.odd.sel small{color:rgba(255,255,255,.85)}
.odd.void{background:transparent;pointer-events:none}
.odd.locked{cursor:not-allowed;background:#f6f7f8}
.odd .lock{width:13px;height:13px;color:#b3b8bf}
.odd.up::after,.odd.down::after{content:"";position:absolute;width:0;height:0;border-style:solid}
.odd.up::after{right:0;top:0;border-width:0 7px 7px 0;border-color:transparent var(--up) transparent transparent}
.odd.down::after{right:0;bottom:0;border-width:0 0 7px 7px;border-color:transparent transparent var(--down) transparent}
.odd.ob{flex-direction:row;justify-content:space-between;padding:0 10px;height:38px}
.odd.ob span{font-weight:400;font-size:12.5px;color:#555b63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:6px}
.odd.ob.sel span{color:rgba(255,255,255,.9)}

/* ---------- Match detail ---------- */
.md-hero{background:linear-gradient(rgba(4,38,20,.86),rgba(4,38,20,.92)),var(--hero,none) center/cover,#0a4d29;color:#fff;padding:12px 12px 8px}
.mh-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.mh-team{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;font-weight:700;font-size:14px;line-height:1.2;min-width:0}
.mh-team span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mh-shirt svg{width:30px;height:30px;fill:hsl(var(--h) 65% 55%);stroke:rgba(255,255,255,.75);stroke-width:1}
.mh-mid{text-align:center;min-width:86px}
.mh-score{display:flex;align-items:center;justify-content:center;gap:6px;font-size:28px;font-weight:700;font-variant-numeric:tabular-nums}
.mh-score i{font-style:normal;opacity:.6;font-size:22px}
.mh-time{font-size:22px;font-weight:700}
.mh-status{font-size:11.5px;opacity:.85;margin-top:1px}
.mh-status.live{color:#ff7088;opacity:1;font-weight:700}
.mh-bar{margin-top:10px}
.mh-track{position:relative;height:4px;background:rgba(255,255,255,.2)}
.mh-track>i{position:absolute;left:0;top:0;bottom:0;background:var(--gold)}
.mh-track .ht{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:rgba(255,255,255,.6)}
.mh-track .g{position:absolute;top:-14px;transform:translateX(-50%);font-size:9px;font-style:normal}
.mh-track .g.a{top:6px}
.mh-ticks{display:flex;justify-content:space-between;font-size:10px;opacity:.7;margin-top:4px}
.mh-mini{margin-top:8px;font-size:11.5px;border-top:1px solid rgba(255,255,255,.15);padding-top:6px}
.mh-mini>div:first-child{display:flex;justify-content:space-between}
.mh-mini>div:first-child span{opacity:.75}
.pbar{height:3px;background:#5aa9ff;margin:4px 0 5px}
.pbar i{display:block;height:100%;background:var(--gold)}
.mini-row{display:flex;justify-content:space-between;padding:1px 0}
.mini-row span:nth-child(2){opacity:.75}
.mh-foot{display:flex;justify-content:center;gap:12px;margin-top:8px;font-size:11px;opacity:.8}
.live-pill{background:var(--live);color:#fff;font-weight:700;border-radius:2px;padding:0 5px}
.md-tabs{display:flex;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:calc(var(--top-h) + 41px);z-index:5}
.md-tabs button{flex:1;padding:10px 4px;color:#555b63;position:relative}
.md-tabs button.active{color:var(--brand);font-weight:700}
.md-tabs button.active::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:2px;background:var(--brand)}
.mkt{background:#fff;border-bottom:1px solid var(--line);margin-top:6px}
.mkt-head{width:100%;display:flex;align-items:center;gap:8px;padding:9px 10px;font-weight:700;font-size:13px;text-align:left}
.mkt-head span{flex:1}
.mkt-head svg{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.mkt.closed .mkt-head svg{transform:rotate(-90deg)}
.mkt.closed .mkt-body{display:none}
.mkt-body{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:4px;padding:0 10px 10px}
.susp{font-style:normal;font-size:10.5px;color:#9a6b00;background:#fff3cd;padding:1px 6px;border-radius:2px}
.md-panel{background:#fff;margin-top:6px}
.card-pad{padding:12px}
.slegend{display:flex;justify-content:space-between;gap:8px;font-weight:700;font-size:12.5px;margin-bottom:6px}
.slegend span{display:flex;align-items:center;gap:6px;min-width:0}
.slegend span:first-child::before,.slegend span:last-child::after{content:"";width:10px;height:10px;border-radius:2px;background:var(--brand);flex:none}
.slegend span:last-child::after{background:#3d8bfd}
.srow{padding:6px 0}
.snum{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:4px}
.snum span{color:var(--muted)}
.sbar{display:flex;gap:3px;height:4px}
.sbar i{display:block}
.sbar .h{background:var(--brand)}
.sbar .a{background:#3d8bfd}
.sh{font-size:11.5px;text-transform:uppercase;color:var(--muted);margin:14px 0 6px;font-weight:700}
.sh:first-child{margin-top:0}
.timeline{list-style:none}
.timeline li{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.timeline li:last-child{border:0}
.timeline li.a{flex-direction:row-reverse;text-align:right}
.timeline li.ko{justify-content:center;flex-direction:row;color:var(--muted)}
.tmin{font-weight:700;min-width:28px}
.form-row{display:flex;align-items:center;gap:8px;padding:5px 0}
.form-row>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pills{display:flex;gap:3px}
.pills i{width:20px;height:20px;border-radius:2px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;color:#fff}
.pills .fW{background:var(--up)}
.pills .fD{background:#9aa1ab}
.pills .fL{background:var(--live)}
.h2h{list-style:none}
.h2h li{display:grid;grid-template-columns:70px 1fr auto 1fr;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.h2h li:last-child{border:0}
.h2h .hh{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h .ha{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h b{background:var(--odd);padding:2px 7px;border-radius:2px}
.minfo{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px}
.minfo dt{color:var(--muted)}

/* ---------- A–Z ---------- */
.search{padding:8px 10px;background:#fff;border-bottom:1px solid var(--line)}
.az-list{background:#fff}
.az-item{border-bottom:1px solid var(--line)}
.az-head{width:100%;display:flex;align-items:center;gap:10px;padding:12px;text-align:left}
.az-head svg{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.az-item.open .az-head svg{transform:rotate(180deg)}
.az-body{display:none;background:#f7f8fa}
.az-item.open .az-body{display:block}
.az-body a{display:flex;justify-content:space-between;gap:8px;padding:10px 12px 10px 40px;border-top:1px solid var(--line);font-size:12.5px}
.az-list .em{font-size:15px;width:20px;text-align:center}
.cnt{margin-left:auto;color:var(--muted);font-size:11.5px}

/* ---------- Jackpot ---------- */
.jackpot-hero{padding:18px 14px;text-align:center;color:#fff;background:linear-gradient(rgba(4,38,20,.7),rgba(4,38,20,.85)),var(--jp,none) center/cover,#0a4d29}
.jackpot-hero small{font-weight:700;letter-spacing:1px;font-size:11px;color:var(--gold)}
.jackpot-hero h1{font-size:30px;margin:2px 0 4px;font-weight:900;color:var(--gold)}
.jackpot-hero p{font-size:12px;opacity:.9}
.countdown{display:flex;justify-content:center;gap:6px;margin-top:10px}
.countdown div{background:rgba(0,0,0,.45);border-radius:3px;padding:4px 8px;min-width:48px}
.countdown b{display:block;font-size:16px;font-variant-numeric:tabular-nums}
.countdown span{font-size:9.5px;opacity:.8}
.jp-tools{display:flex;gap:6px;justify-content:flex-end;padding:7px 10px;background:#fff;border-bottom:1px solid var(--line)}
.jp-list{background:#fff}
.jp-row{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line)}
.jp-row .n{width:18px;color:var(--muted);font-size:11.5px;text-align:center;flex:none}
.jp-row .t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.jp-row .t small{font-size:10.5px}
.jp-row .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-row .opts{display:grid;grid-template-columns:repeat(3,var(--ow));gap:var(--og)}
.jp-row .opts button{height:36px;border-radius:3px;background:var(--odd);font-weight:600}
.jp-row .opts button.sel{background:var(--brand);color:#fff}
.jp-foot{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;background:#fff;border-top:1px solid var(--line-2);padding:8px 10px;box-shadow:0 -2px 6px rgba(0,0,0,.06)}
.jp-foot b{color:var(--brand);font-size:15px}

/* ---------- Promos ---------- */
.promo-grid{display:grid;gap:8px;padding:8px}
.promo{position:relative;border-radius:4px;overflow:hidden;background:#fff;border:1px solid var(--line);padding:0 0 12px}
.promo .ph{display:block;aspect-ratio:1640/607;background:#0a4d29 center/cover;margin-bottom:10px}
.promo .tag,.promo h3,.promo p,.promo .btn{margin-left:12px;margin-right:12px}
.promo .tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.6px;color:var(--brand);margin-bottom:2px}
.promo h3{font-size:15px;margin-bottom:2px}
.promo p{color:var(--muted);margin-bottom:8px}

/* ---------- Me ---------- */
.me-card{display:flex;gap:12px;align-items:center;padding:14px 12px;background:var(--brand);color:#fff}
.me-card .muted{color:rgba(255,255,255,.8)}
.avatar{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.avatar svg{width:24px;height:24px}
.wallet{display:flex;gap:6px;align-items:center;padding:12px;background:var(--brand-dark);color:#fff}
.wallet div{flex:1}
.wallet small{display:block;opacity:.8;font-size:11px}
.wallet strong{font-size:19px}
.bet-card{background:#fff;border-bottom:1px solid var(--line);padding:10px 12px;margin-top:6px}
.bet-card .bh{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;margin-bottom:4px}
.bet-card .bh small{color:var(--muted);font-size:11px}
.bet-card .bl{font-size:12.5px;padding:6px 0;display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line)}
.bet-card .bf{display:flex;justify-content:space-between;gap:8px;border-top:1px dashed var(--line-2);margin-top:4px;padding-top:6px;font-weight:700}
.bet-card .bf span:last-child{text-align:right}
.status{font-weight:700;padding:1px 6px;border-radius:2px;font-size:10.5px;height:fit-content;white-space:nowrap}
.status.open{background:#e3f4ea;color:var(--brand)}
.status.won,.status.cashout{background:#fff3cd;color:#9a6b00}
.status.lost{background:#fde8ec;color:var(--live)}
.empty{text-align:center;color:var(--muted);padding:26px 16px;line-height:1.6;background:#fff}
.empty .big{display:none}
.empty b{color:var(--text)}
.menu-list{list-style:none;background:#fff;margin-top:6px}
.menu-list li{padding:12px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between}
.menu-list li::after{content:"›";color:var(--muted)}
#logoutBtn{color:var(--live)}

/* ---------- Footer ---------- */
.site-foot{padding:18px 12px 24px;text-align:center;color:var(--muted);font-size:11.5px;line-height:1.6;background:#fff;border-top:1px solid var(--line);margin-top:10px}
.foot-logo{display:inline-flex;justify-content:center;margin-bottom:8px;background:var(--brand);padding:6px 12px;border-radius:3px}
.foot-logo .logo-text{font-size:18px}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 12px;margin-bottom:10px}
.foot-links a{color:var(--text)}
.pay-row{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:10px}
.pay-row span{border:1px solid var(--line-2);border-radius:2px;padding:3px 7px;font-weight:700;font-size:10.5px;color:var(--text)}
.age{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid var(--live);color:var(--live);font-size:9.5px;margin-right:4px}

/* ---------- Bottom nav ---------- */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--line-2)}
.bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;color:var(--muted)}
.bottom-nav a.active{color:var(--brand);font-weight:600}
.nav-badge{position:absolute;top:4px;left:calc(50% + 5px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--live);color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center}
.nav-badge[data-z="1"]{display:none}

/* ---------- Betslip ---------- */
.betslip{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:6px 6px 0 0;transform:translateY(105%);transition:transform .25s ease;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.betslip.open{transform:none}
.bs-grip{display:none}
.bs-head{display:flex;justify-content:space-between;align-items:center;padding:0 6px 0 12px;height:44px;background:var(--brand);color:#fff;border-radius:6px 6px 0 0}
.bs-head h3{display:flex;align-items:center;gap:8px;font-size:14px}
.badge{background:var(--gold);color:var(--gold-ink);border-radius:9px;padding:0 7px;font-size:11.5px}
.bs-tabs{display:flex;border-bottom:1px solid var(--line)}
.bs-tabs button{flex:1;padding:9px;color:#555b63;position:relative}
.bs-tabs button.active{color:var(--brand);font-weight:700}
.bs-tabs button.active::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:2px;background:var(--brand)}
.bs-body{overflow-y:auto;flex:1;min-height:60px}
.bs-item{position:relative;border-bottom:1px solid var(--line);padding:8px 36px 8px 12px}
.bs-item.susp{background:#fffbea}
.bs-item .pick{font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:6px}
.bs-item .pick b{font-variant-numeric:tabular-nums}
.bs-item .pick b.up{color:var(--up)}
.bs-item .pick b.up::before{content:"▲ ";font-size:8px}
.bs-item .pick b.down{color:var(--down)}
.bs-item .pick b.down::before{content:"▼ ";font-size:8px}
.bs-item .pick .lock{width:13px;height:13px;color:#9a6b00}
.lv{font-style:normal;font-size:9.5px;font-weight:700;background:var(--live);color:#fff;border-radius:2px;padding:0 4px;margin-right:5px;vertical-align:1px}
.bs-item .mk{font-size:11.5px;color:var(--muted)}
.mt-link{display:block;font-size:12px}
.bs-item .x{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:#e9ebee;color:var(--muted);font-size:14px;line-height:20px}
.single-stake{display:flex;align-items:center;gap:8px;margin-top:6px}
.single-stake input{padding:5px 8px;width:100px;text-align:right;font-weight:700}
.sw{font-size:11.5px;color:var(--brand);font-weight:600}
.susp-msg{font-size:11px;color:#9a6b00;margin-top:2px}
.bs-foot{padding:8px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);background:#f7f8fa}
.bs-foot .row{display:flex;justify-content:space-between;padding:2px 0}
.bs-foot .row.big{font-size:14px;font-weight:700}
.bs-foot .row.big b{color:var(--brand)}
.accept{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.accept input{width:auto;accent-color:var(--brand)}
.stake-row{display:flex;align-items:center;gap:10px;margin:4px 0}
.stake-row label{white-space:nowrap;color:var(--muted)}
.stake-row input{text-align:right;font-weight:700;font-size:14px}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:4px}
.chips button{padding:6px;border-radius:3px;background:#fff;border:1px solid var(--line-2);font-size:12px}
.boost-bar{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:11px;color:var(--muted)}
.bb-track{flex:1;height:4px;background:#e1e4e8}
.bb-track i{display:block;height:100%;width:0;background:var(--gold)}
.bs-actions{display:grid;grid-template-columns:1fr 2fr;gap:6px;margin-top:8px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.slip-pill{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:45;display:none;align-items:center;gap:8px;background:var(--brand);color:#fff;padding:0 12px;height:40px;font-weight:700;font-size:13px;border-top:1px solid var(--brand-dark)}
.slip-pill.show{display:flex}
.slip-pill b{background:var(--gold);color:var(--gold-ink);border-radius:9px;padding:0 7px;font-size:11.5px}
.slip-pill em{margin-left:auto;font-style:normal;font-weight:500}
body[data-page="jackpot"] .slip-pill{display:none}

/* ---------- Drawer ---------- */
.drawer{position:fixed;top:0;bottom:0;left:0;width:270px;max-width:85vw;z-index:80;background:#fff;transform:translateX(-100%);transition:transform .25s;display:flex;flex-direction:column;overflow-y:auto}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;height:var(--top-h);padding:0 14px;background:var(--brand)}

.drawer a{padding:12px 14px;border-bottom:1px solid var(--line)}
.drawer-foot{margin-top:auto;padding:14px;color:var(--muted);font-size:11.5px;display:flex;align-items:center}

/* ---------- Search ---------- */
.search-ov{position:fixed;inset:0;z-index:85;background:#fff;display:none;flex-direction:column}
.search-ov.open{display:flex}
.so-head{display:flex;align-items:center;gap:4px;padding:6px;background:var(--brand);color:#fff}
.so-head input{border:0}
.so-res{overflow-y:auto;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}
.tag-btn{padding:5px 11px;border-radius:14px;border:1px solid var(--line-2);font-size:12px}
.sr{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sr-sp{font-size:14px}
.sr-t{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr svg{width:14px;color:var(--muted)}
.live-t{color:var(--live);font-weight:700}

/* ---------- Modals ---------- */
.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);display:none;align-items:flex-end;justify-content:center}
.modal.open{display:flex}
.modal-card{position:relative;width:100%;max-width:400px;background:#fff;border-radius:6px 6px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;overflow:hidden}
.modal-logo{display:flex;justify-content:center;background:var(--brand);margin:-18px -16px 4px;padding:12px}

.modal-card h2{font-size:17px;text-align:center}
.modal-card>p.muted{text-align:center;margin-top:-4px}
.modal-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.modal-card label.check{flex-direction:row;align-items:center;gap:8px}
.modal-card label.check input{width:auto;accent-color:var(--brand)}
.modal-card a{color:var(--brand);font-weight:600}
.modal-x{position:absolute;top:6px;right:10px;font-size:24px;color:#fff;z-index:1}
#depositModal .modal-x,#codeModal .modal-x{color:var(--muted)}
.phone{display:flex}
.phone span{padding:9px 8px;background:#f3f4f6;border:1px solid var(--line-2);border-right:0;border-radius:3px 0 0 3px;white-space:nowrap}
.phone input{border-radius:0 3px 3px 0}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;top:58px;transform:translate(-50%,-10px);z-index:100;background:#2b2f35;color:#fff;padding:9px 14px;border-radius:4px;font-size:12.5px;opacity:0;pointer-events:none;transition:.2s;max-width:min(92vw,420px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--live)}

/* ---------- Small phones ---------- */
@media (max-width:420px){
  .balance small{display:none}
  .dep{padding:6px 10px!important}
  .dep-full{display:none}
  .dep-plus{display:inline;font-size:18px;line-height:1;font-weight:900}
}
@media (max-width:370px){
  :root{--ow:46px}
  .logo-text{font-size:18px}
  .top-actions .btn.sm{padding:5px 8px}
}

/* =========================================================
   TABLET / DESKTOP
   ========================================================= */
@media (min-width:768px){
  :root{--ow:64px}
  .modal{align-items:center}
  .modal-card{border-radius:6px}
  .promo-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  body,body.has-pill{padding-bottom:0}
  .bottom-nav,.slip-pill,.slip-pill.show,#menuBtn{display:none}
  .topbar-inner{padding:0 14px;height:54px}
  .desk-nav{display:flex;justify-content:center;background:var(--brand-dark)}
  .desk-nav a{padding:9px 16px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px}
  .desk-nav a:hover{color:#fff}
  .desk-nav a.active{color:var(--gold);font-weight:700}
  .layout{display:grid;grid-template-columns:210px minmax(0,1fr) 300px;gap:10px;padding:10px}
  .left-rail{display:block;position:sticky;top:100px;align-self:start;background:#fff;border:1px solid var(--line);max-height:calc(100vh - 110px);overflow:auto}
  .left-rail h4{font-size:11px;color:#fff;background:var(--brand);padding:8px 12px;text-transform:uppercase}
  .left-rail ul{list-style:none}
  .left-rail a{padding:8px 12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);font-size:12.5px}
  .left-rail a i{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted)}
  .left-rail a:hover{background:#f3f7f4;color:var(--brand)}
  .list-tabs,.sub-head{top:90px}
  .md-tabs{top:131px}
  .betslip{position:sticky;top:100px;align-self:start;transform:none;border:1px solid var(--line);max-height:calc(100vh - 110px);box-shadow:none;border-radius:0}
  .bs-head{border-radius:0}
  .bs-close{display:none}
  .scrim{display:none}
  .promo-grid{grid-template-columns:repeat(3,1fr)}
  .search-ov{inset:54px auto auto 50%;transform:translateX(-50%);width:520px;max-height:70vh;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.2)}
}

/* ---------- Country / currency picker ---------- */
.cc-top{display:none;align-items:center;gap:4px;margin-left:auto;padding:5px 8px;border:1px solid rgba(255,255,255,.5);border-radius:3px;color:#fff;font-size:12px;font-weight:700}
.cc-top+.search-btn{margin-left:4px}
.cc-row{display:flex;align-items:center;gap:8px;width:100%;padding:11px 14px;border-bottom:1px solid var(--line);background:#f6f7f9;text-align:left}
.cc-row .cc-chg{margin-left:auto;color:var(--brand);font-weight:600;font-size:12px}
.cc-foot{display:inline-block;margin:0 auto 10px;padding:5px 10px;border:1px solid var(--line-2);border-radius:3px;font-size:12px;color:var(--text)}
.cc-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line-2);border-radius:4px;text-align:left}
.cc-opt .f{font-size:26px}
.cc-opt b{display:block;font-size:14px}
.cc-opt small{color:var(--muted)}
.cc-opt.on{border-color:var(--brand);background:#eef7f1;box-shadow:inset 3px 0 0 var(--brand)}
.phone .dial{padding:9px 8px;background:#f3f4f6;border:1px solid var(--line-2);border-right:0;border-radius:3px 0 0 3px;white-space:nowrap;font-size:13px}
.phone .dial::after{content:" ▾";font-size:9px;color:var(--muted)}
@media (min-width:768px){ .cc-top{display:inline-flex} }

/* ---------- Counts & filters ---------- */
.cnt-pill{font-size:11px;font-weight:700;background:var(--live);color:#fff;border-radius:9px;padding:1px 7px;margin-left:2px}
.cnt-pill:empty{display:none}
.live-badge{background:var(--live)}
.live-badge:empty{display:none}
.day-chips{display:flex;gap:6px;padding:7px 10px 0;overflow-x:auto;scrollbar-width:none;background:#fff}
.day-chips::-webkit-scrollbar{display:none}
.day-chips button{flex:0 0 auto;padding:5px 12px;border-radius:3px;background:var(--odd);font-size:12px;color:#555b63}
.day-chips button.active{background:#e3f4ea;color:var(--brand);font-weight:700}
.lchip{padding:5px 9px}
.lchip small{display:none}
.lchip .flag{font-size:14px}

/* ---------- Bet results ---------- */
.lr.won{color:var(--up)}
.lr.lost{color:var(--live);text-decoration:line-through}
.lr.void{color:var(--muted)}
.ftag{font-size:10px;background:var(--odd);border-radius:2px;padding:0 4px;color:var(--text)}
.status.void{background:#eceef1;color:var(--muted)}
.lostc{color:var(--live)}

/* ---------- Virtuals ---------- */
.v-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;color:#fff;background:linear-gradient(120deg,#06612f,#0a4d29 60%,#073a20)}
.v-head small{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--gold)}
.v-head h1{font-size:20px;margin:2px 0}
.v-head p{font-size:11.5px;opacity:.85}
.v-clock{text-align:center;background:rgba(0,0,0,.4);border-radius:4px;padding:6px 12px;flex:none}
.v-clock small{display:block;color:#fff;opacity:.8;letter-spacing:0;font-weight:500}
.v-clock b{font-size:24px;font-variant-numeric:tabular-nums;color:var(--gold)}
.v-bar{height:3px;background:#d6dbe0}
.v-bar i{display:block;height:100%;width:0;background:var(--gold);transition:width 1s linear}

/* ---------- Results ---------- */
.res-day{padding:8px 12px;font-size:11.5px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.res-block{background:#fff;border-bottom:1px solid var(--line);margin-bottom:6px}
.res-row{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line);font-size:13px}
.res-block .league-head+.res-row,.res-block .res-row:first-child{border-top:0}
.res-row .rh{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-row .ra{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-row .rs{background:var(--brand);color:#fff;border-radius:3px;padding:3px 9px;font-variant-numeric:tabular-nums;min-width:54px;text-align:center}
.res-row .rht{grid-column:2;text-align:center;font-size:10.5px;color:var(--muted)}

/* ---------- Games ---------- */
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.game{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:12px;text-align:left}
.g-ic{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;color:#fff;margin-bottom:4px}
.g-ic svg{width:22px;height:22px}
.game b{font-size:13.5px}
.game small{color:var(--muted);font-size:11.5px}
.game em{position:absolute;top:8px;right:8px;font-style:normal;font-size:9.5px;font-weight:700;background:#fff4d1;color:#9a6b00;padding:1px 5px;border-radius:2px}

/* ---------- Account ---------- */
.acct-grid{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;margin-top:6px;border-top:1px solid var(--line)}
.acct-grid a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 4px;font-size:11px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--text)}
.acct-grid a:nth-child(4n){border-right:0}
.acct-grid svg{width:22px;height:22px;color:var(--brand)}
.logout-btn{display:block;width:100%;background:#fff;color:var(--live);padding:12px;margin-top:6px;font-weight:600}
.tx-list,.card-list{background:#fff}
.tx{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tx small{display:block;color:var(--muted);font-size:11px;margin-top:1px}
.tx-r{text-align:right}
.tx .pos{color:var(--up)}
.tx .neg{color:var(--text)}
.bonus{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}
.bonus small{display:block;color:var(--muted);margin-top:2px}
.msg{padding:12px;border-bottom:1px solid var(--line)}
.msg.unread{box-shadow:inset 3px 0 0 var(--brand)}
.msg p{margin:3px 0;color:#444a52}
.msg small{color:var(--muted)}
.form{display:flex;flex-direction:column;gap:10px;background:#fff}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.refer{background:#fff}
.code-box{display:flex;align-items:center;gap:10px;border:1px dashed var(--brand);border-radius:4px;padding:10px;margin-top:10px}
.code-box span{color:var(--muted);font-size:12px}
.code-box b{flex:1;font-size:17px;letter-spacing:1px}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:12px;border:1px solid var(--line);border-radius:4px}
.ref-stats div{padding:10px;text-align:center}
.ref-stats div+div{border-left:1px solid var(--line)}
.ref-stats b{display:block;font-size:17px}
.ref-stats small{color:var(--muted)}
.faq{border-bottom:1px solid var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";color:var(--muted);font-weight:400}
.faq[open] summary::after{content:"−"}
.faq p{margin-top:6px;color:#444a52}
@media (min-width:768px){ .games-grid{grid-template-columns:repeat(4,1fr)} .acct-grid{grid-template-columns:repeat(8,1fr)} .acct-grid a:nth-child(4n){border-right:1px solid var(--line)} }

/* ---------- Crests, flags, sport icons ---------- */
.crest{display:inline-block;width:16px;height:19px;flex:none;vertical-align:middle}
.crest.big{width:54px;height:65px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.flg{display:inline-block;width:18px;height:12px;border-radius:2px;vertical-align:middle;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.1);overflow:hidden}
.sp-ic{display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none;stroke-width:1.7}
.m-team{justify-content:flex-start;align-items:center;gap:6px}
.m-team span{flex:1;min-width:0}
.lc-team .crest{margin-right:1px}
.mh-team .crest{margin-bottom:2px}
.sport-tabs button{display:flex;align-items:center;gap:6px}
.sport-tabs button .em{display:inline-flex}
.sport-tabs button .em .sp-ic{width:17px;height:17px}
.az-list .em{display:inline-flex;width:auto}
.az-list .em .sp-ic{width:18px;height:18px;color:var(--brand)}
.left-rail .sp-ic{color:var(--brand)}
.res-row .rh,.res-row .ra{display:flex;align-items:center;gap:6px;min-width:0}
.res-row .rh{justify-content:flex-end}
.res-row .rh span,.res-row .ra span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jp-row .t span{display:flex;align-items:center;gap:6px}
.form-row .crest,.slegend .crest{width:18px;height:22px}
.slegend span:first-child::before,.slegend span:last-child::after{display:none}
.cc-opt .f .flg{width:30px;height:20px}
.dial .flg{margin-right:3px}
.lc-top .sp-ic{width:13px;height:13px;vertical-align:-2px}

/* =========================================================
   v5 – layout modelled on a classic African sportsbook
   ========================================================= */
:root{--odd:#d8ecde;--odd-hover:#c8e3d0;--odd-ink:#0a6b2e;--ow:66px;--og:2px}
html,body{font-size:14px}
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
body.has-pill{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}

/* odds */
.odd{background:var(--odd);color:var(--odd-ink);font-weight:700;font-size:15px;border-radius:2px;height:38px}
.odd small{color:#4f7b5c}
.odd:hover{background:var(--odd-hover)}
.odd.sel{background:var(--brand);color:#fff}
.odd.ob{height:40px;padding:0 12px}
.odd.ob span{color:#2c3a30;font-weight:400;font-size:14px}
.odd.ob b{font-size:15px}

/* picture tiles */
.tiles{display:flex;gap:8px;overflow-x:auto;padding:10px 10px 4px;background:#fff;scrollbar-width:none}
.tiles::-webkit-scrollbar{display:none}
.tile{position:relative;flex:0 0 92px;height:92px;border-radius:8px;overflow:hidden;background:#123 72% center/cover;display:flex;align-items:flex-end;padding:7px;color:#fff}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75))}
.tile b{position:relative;font-size:12px;line-height:1.15;font-weight:700}
.tile-match{background:linear-gradient(160deg,#1f3a2b,#0b1a12)}
.tile-match .tm{position:absolute;top:12px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:4px}
.tile-match .crest.big{width:30px;height:36px;filter:none}
.tile-match em{font-style:normal;font-size:10px;color:#cfd8d2}
.tile-game{background:linear-gradient(160deg,#b71c1c,#4a0d0d)}
.tile-game svg{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:38px;height:38px;color:#fff}

/* icon row */
.icon-row{display:grid;grid-template-columns:repeat(6,1fr);background:#fff;padding:8px 2px 12px}
.icon-row a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;color:#333}
.icon-row svg{width:26px;height:26px;color:#3a3f45;stroke-width:1.6}
.icon-row a:nth-child(2) svg{color:#e5163a}

/* category cards */
.cat-cards{display:flex;gap:8px;overflow-x:auto;padding:0 10px 12px;background:#fff;scrollbar-width:none}
.cat-cards::-webkit-scrollbar{display:none}
.cat{flex:0 0 132px;min-height:58px;padding:9px 10px;background:#f2f3f5;border-top:3px solid var(--c);font-size:13px;font-weight:900;line-height:1.15;color:#1c1f23;box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* section heads + text tabs */
.sec-head{display:flex;align-items:center;gap:12px;padding:12px 12px 6px;background:#fff}
.sec-head h2{font-size:22px;font-weight:700;padding-right:12px;border-right:1px solid #c9cdd2;line-height:1.1;flex:none}
.txt-tabs{display:flex;gap:16px;overflow-x:auto;scrollbar-width:none;align-items:center}
.txt-tabs::-webkit-scrollbar{display:none}
.txt-tabs button,.txt-tabs a{flex:0 0 auto;font-size:16px;color:#3a3f45;padding:4px 0;white-space:nowrap}
.txt-tabs .active{color:var(--brand);font-weight:700}
.txt-tabs .em,.txt-tabs i{display:none}
.sec-head.dark{background:#1d2127;color:#fff}
.sec-head.dark h2{border-color:#4a4f57}
.sec-head.dark .txt-tabs button{color:#e6e8eb}
.sec-head.dark .txt-tabs .active{color:#2ed16b}

/* market tabs as underline text tabs */
.mkt-tabs{display:flex;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid #e3e6ea}
.mkt-tabs::-webkit-scrollbar{display:none}
.mkt-tabs button{flex:0 0 auto;padding:11px 16px;font-size:15px;color:#3a3f45;position:relative;background:none;border:0;border-radius:0}
.mkt-tabs button.active{color:#111;font-weight:700;background:none}
.mkt-tabs button.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand)}
.mkt-tabs.dark{background:#1d2127;border-color:#2c3138}
.mkt-tabs.dark button{color:#cfd3d8}
.mkt-tabs.dark button.active{color:#fff}

/* hot */
.hot{background:#fff;margin-top:8px;padding-bottom:12px}
.lg-pills{display:flex;gap:8px;overflow-x:auto;padding:6px 10px 10px;scrollbar-width:none}
.lg-pills::-webkit-scrollbar{display:none}
.lpill{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:7px 14px;border:1.5px solid #cfd3d8;border-radius:22px;font-size:14px;color:#3a3f45;background:#fff}
.lpill .flg{width:20px;height:14px}
.lpill.active{border-color:#3a3f45;color:#111;font-weight:700}
.feat{display:flex;gap:10px;overflow-x:auto;padding:2px 10px 6px;scroll-snap-type:x mandatory;scrollbar-width:none}
.feat::-webkit-scrollbar{display:none}
.fcard{flex:0 0 88%;scroll-snap-align:center;background:#fff;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.15);padding:0 8px 8px;overflow:hidden}
.fc-top{display:flex;align-items:center;gap:8px;margin:0 -8px;font-size:12.5px;white-space:nowrap;overflow:hidden}
.fc-top a{color:var(--brand);text-decoration:underline;overflow:hidden;text-overflow:ellipsis}
.hot,.fc-top .hot{}
span.hot{display:inline-block;background:var(--live);color:#fff;font-weight:900;font-style:italic;font-size:11px;padding:2px 12px 2px 6px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);letter-spacing:.3px}
.fc-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 0 10px}
.fc-team{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13.5px;color:#7d838c;min-width:0;text-align:center}
.fc-team i{font-style:normal;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-team .crest.big{width:44px;height:53px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.fc-time{display:flex;flex-direction:column;align-items:center;gap:2px}
.fc-time b{font-size:16px}
.fc-time small{font-size:12px;color:#555}
.fc-time em{font-style:normal;color:var(--brand);font-weight:700;font-size:15px;margin-top:6px}
.fc-odds{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}

/* live block */
.live-block{background:#1d2127;margin-top:8px;color:#e9ebee}
.more-link{display:block;text-align:center;padding:12px;font-size:14px;color:var(--brand);background:#fff;border-top:1px solid #e3e6ea}
.more-link.dark{background:#1d2127;color:#2ed16b;border-color:#2c3138}

/* event rows */
.ev{padding:9px 12px 8px;border-bottom:1px solid #e9ebee;background:#fff}
.ev-meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#8a9099;white-space:nowrap;overflow:hidden;margin-bottom:3px}
.ev-meta .hot{margin-left:-12px}
.ev-meta .ev-lg{overflow:hidden;text-overflow:ellipsis}
.ev-meta .star{color:#e8a600}
.ev-body{display:flex;align-items:center;gap:10px}
.ev-teams{flex:1;min-width:0;display:flex;flex-direction:column;font-size:15px;line-height:1.45;color:#1c1f23}
.ev-teams span{display:flex;justify-content:space-between;gap:8px}
.ev-teams i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-teams b{font-weight:400;min-width:14px;text-align:right}
.ev-teams small{font-size:12.5px;color:#9aa0a8;margin-top:3px}
.ev-odds{display:grid;grid-template-columns:repeat(var(--n,3),var(--ow));gap:var(--og);flex:none}
.live-block .ev,.live-block .day-sep{background:#1d2127;border-color:#2c3138}
.live-block .ev-teams{color:#eef0f2}
.live-block .ev-teams small{color:#8a9099}
.live-block .odd{background:#2f343c;color:#36d26e}
.live-block .odd:hover{background:#3a4049}
.live-block .odd.sel{background:var(--brand);color:#fff}
.live-block .odd.locked{background:#262a30}
.lv-clock{color:#2ed16b;font-weight:700;font-size:14px}
.lv-half{color:#2ed16b;font-weight:700;font-size:14px}
.ev.is-live .ev-meta{gap:10px}
.page .ev.is-live .lv-clock,.page .ev.is-live .lv-half{color:var(--brand)}
.live-block .ev.is-live .lv-clock,.live-block .ev.is-live .lv-half{color:#2ed16b}

/* day separators & league accordion */
.day-sep{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;background:#eef0f2;font-size:14px;color:#3a3f45}
.day-sep .cols{display:grid;grid-template-columns:repeat(var(--n,3),var(--ow));gap:var(--og);text-align:center;color:#8a9099;font-size:13px}
.day-sep.dark{background:#2a2f36;color:#9aa0a8}
.sports-block{background:#fff;margin-top:8px}
.filter-bar{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;scrollbar-width:none}
.filter-bar button{flex:0 0 auto;padding:5px 12px;border-radius:14px;border:1px solid #d3d7dc;font-size:13px;color:#3a3f45}
.filter-bar button.active{border-color:var(--brand);color:var(--brand);font-weight:700;background:#eef7f1}
.lg-acc{display:flex;align-items:center;gap:10px;padding:15px 12px;border-top:1px solid #e9ebee;font-size:15.5px;font-weight:500;color:#1c1f23}
.lg-acc i{width:0;height:0;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--brand)}
.lg-acc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-acc b{font-weight:400;color:#555}

/* league head inside lists (live/league pages) */
.league-block{margin-bottom:8px}
.league-block .ev:last-child{border-bottom:0}
.league-head .cols{grid-template-columns:repeat(var(--n,3),var(--ow));gap:var(--og)}
.cols-pad{display:none}

/* bottom nav – dark */
.bottom-nav{background:#141518;border-top:0}
.bottom-nav a{color:#9aa0a8;font-size:11.5px}
.bottom-nav a svg{width:24px;height:24px}
.bottom-nav a.active{color:#fff}
.bottom-nav a.active::before{content:"";position:absolute;bottom:0;top:auto;left:18%;right:18%;width:auto;height:4px;border-radius:0;background:var(--live)}

/* floating betslip */
.slip-pill,.slip-pill.show{display:flex}
.slip-pill{left:auto;right:12px;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));width:60px;height:60px;padding:0;border-radius:50%;justify-content:center;background:#1aa34a;box-shadow:0 4px 14px rgba(0,0,0,.3);border:0}
.slip-pill svg{width:30px;height:30px;color:#fff;stroke-width:1.8}
.slip-pill b{position:absolute;top:-6px;right:-6px;min-width:24px;height:24px;border-radius:12px;background:#fff;color:#111;font-size:13px;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25);padding:0 5px}
.slip-pill em{display:none}
body[data-page="match"] .slip-pill,body[data-page="jackpot"] .slip-pill{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom))}

@media (max-width:370px){ :root{--ow:56px} .ev-teams{font-size:14px} }
@media (min-width:768px){ :root{--ow:76px} .fcard{flex-basis:46%} .cat{flex-basis:170px} .tile{flex-basis:110px;height:110px} }
@media (min-width:1024px){ .slip-pill,.slip-pill.show{display:none} .fcard{flex-basis:44%} }
.ev{overflow:hidden}
.ev-meta{overflow:visible}
.ev-meta .ev-lg{flex:1;min-width:0;white-space:nowrap}
.tile[href="#/virtuals"]{background-position:88% center}

/* =========================================================
   MOTION
   ========================================================= */
:root{--spring:cubic-bezier(.2,1.25,.35,1);--out:cubic-bezier(.2,.8,.2,1)}

/* ---------- Splash ---------- */
#splash{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;overflow:hidden;cursor:pointer;
  animation:spFailsafe 0s 6s forwards}
@keyframes spFailsafe{to{visibility:hidden;pointer-events:none}}
.sp-bg{position:absolute;inset:0;background:radial-gradient(120% 75% at 50% 42%,#13a457 0%,#0a7d3e 38%,#04351a 100%);transition:opacity .55s ease}
.sp-stripes{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 60px,rgba(0,0,0,.035) 60px 120px);transition:opacity .4s}
.sp-pitch{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.16);stroke-width:2;transition:opacity .4s}
.sp-pitch *{stroke-dasharray:1600;stroke-dashoffset:1600}
.sp-pitch .dot{fill:rgba(255,255,255,.3);stroke:none}
.run .sp-pitch *{animation:draw 1.3s var(--out) .05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sp-light{position:absolute;top:-30%;width:70%;height:130%;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);opacity:0;transition:opacity .4s}
.sp-light.l{left:-20%;transform:rotate(-24deg)}
.sp-light.r{right:-20%;transform:rotate(24deg)}
.run .sp-light{animation:flood 2.4s ease .2s forwards}
@keyframes flood{0%{opacity:0}20%{opacity:.9}35%{opacity:.5}50%{opacity:.85}100%{opacity:.6}}
.sp-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,14,.28),rgba(255,194,14,0) 65%);opacity:0;transition:opacity .4s}
.run .sp-glow{animation:glow 2.2s ease .7s forwards}
@keyframes glow{0%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.05)}100%{opacity:.8;transform:scale(1)}}
.sp-mark{position:relative;display:flex;align-items:center;gap:8px;will-change:transform}
.sp-word{font-family:Kanit,Roboto,Arial,sans-serif;font-style:italic;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.2px;white-space:nowrap;display:flex;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.sp-word .w2{color:#ffc20e;margin-left:5px}
.sp-word em{display:inline-block;font-style:inherit;opacity:0;transform:translateY(55%) skewX(-8deg);will-change:transform}
.run .sp-word em{animation:letter .55s var(--spring) forwards;animation-delay:calc(.62s + var(--i) * 46ms)}
@keyframes letter{60%{opacity:1}to{opacity:1;transform:none}}
.sp-mark::after{content:"";position:absolute;inset:-10px -20px;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;mix-blend-mode:soft-light;pointer-events:none}
.run .sp-mark::after{animation:sweep .9s ease 1.55s forwards}
@keyframes sweep{to{background-position:-60% 0}}
.sp-ball{width:42px;height:42px;opacity:0;transform:translateX(-85vw) rotate(-1080deg);filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.run .sp-ball{animation:roll 1.1s cubic-bezier(.15,.7,.25,1) .12s forwards,hop .5s ease-out 1.2s}
@keyframes roll{0%{opacity:1}100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-16px) rotate(40deg)}70%{transform:translateY(0) scale(1.08,.92)}}
.sp-tag{position:relative;margin-top:18px;font-size:12px;font-weight:600;letter-spacing:5px;text-transform:uppercase;opacity:0;transition:opacity .4s}
.run .sp-tag{animation:fadeUp .6s ease 1.35s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:.9;transform:none}}
.sp-bar{position:absolute;bottom:96px;width:150px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden;transition:opacity .3s}
.sp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffc20e,#fff3c4);border-radius:2px}
.run .sp-bar i{animation:load 2.3s cubic-bezier(.4,0,.2,1) .15s forwards}
@keyframes load{40%{width:55%}70%{width:72%}100%{width:100%}}
.sp-lic{position:absolute;bottom:44px;font-size:11px;opacity:.65;transition:opacity .3s}
.sp-lic b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #fff;font-size:8.5px;margin-right:5px}
#splash.out{pointer-events:none}
#splash.out .sp-bg,#splash.out .sp-stripes,#splash.out .sp-pitch,#splash.out .sp-light,#splash.out .sp-glow,#splash.out .sp-tag,#splash.out .sp-bar,#splash.out .sp-lic{opacity:0!important;animation:none}
#splash.out .sp-word{filter:none}
.splashing .topbar .logo{opacity:0}
.splashing body{overflow:hidden}

/* app entrance after splash */
.app-in .topbar{animation:dropIn .55s var(--out) both}
.app-in .bottom-nav{animation:riseIn .55s var(--out) .1s both}
.app-in #page-home>*{animation:riseIn .6s var(--out) both}
.app-in #page-home>*:nth-child(2){animation-delay:.06s}
.app-in #page-home>*:nth-child(3){animation-delay:.12s}
.app-in #page-home>*:nth-child(4){animation-delay:.18s}
.app-in #page-home>*:nth-child(5){animation-delay:.24s}
.app-in .slip-pill{animation:popIn .5s var(--spring) .5s both}
@keyframes dropIn{from{transform:translateY(-100%)}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}}
@keyframes popIn{from{opacity:0;transform:scale(.3)}}

/* ---------- Page transitions ---------- */
.page.enter-fwd{animation:pgFwd .34s var(--out)}
.page.enter-back{animation:pgBack .3s var(--out)}
.page.enter-fade{animation:pgFade .26s ease}
@keyframes pgFwd{from{opacity:.2;transform:translateX(42px)}}
@keyframes pgBack{from{opacity:.2;transform:translateX(-42px)}}
@keyframes pgFade{from{opacity:0;transform:translateY(6px)}}
.stagger .ev,.stagger .fcard,.stagger .league-block,.stagger .mkt,.stagger .tile,.stagger .cat,.stagger .res-block,.stagger .acct-grid a,.stagger .game,.stagger .az-item,.stagger .bet-card,.stagger .lg-acc{animation:riseIn .42s var(--out) both}
.stagger :is(.ev,.fcard,.league-block,.mkt,.tile,.cat,.res-block,.acct-grid a,.game,.az-item,.bet-card,.lg-acc):nth-child(2){animation-delay:.03s}
.stagger :is(.ev,.fcard,.league-block,.mkt,.tile,.cat,.res-block,.acct-grid a,.game,.az-item,.bet-card,.lg-acc):nth-child(3){animation-delay:.06s}
.stagger :is(.ev,.fcard,.league-block,.mkt,.tile,.cat,.res-block,.acct-grid a,.game,.az-item,.bet-card,.lg-acc):nth-child(4){animation-delay:.09s}
.stagger :is(.ev,.fcard,.league-block,.mkt,.tile,.cat,.res-block,.acct-grid a,.game,.az-item,.bet-card,.lg-acc):nth-child(5){animation-delay:.12s}
.stagger :is(.ev,.fcard,.league-block,.mkt,.tile,.cat,.res-block,.acct-grid a,.game,.az-item,.bet-card,.lg-acc):nth-child(6){animation-delay:.15s}
.stagger :is(.ev,.fcard,.league-block,.mkt,.tile,.cat,.res-block,.acct-grid a,.game,.az-item,.bet-card,.lg-acc):nth-child(n+7){animation-delay:.18s}

/* ---------- Skeletons ---------- */
.page{position:relative}
.skel-ov{position:absolute;inset:0;z-index:7;background:#eceef1;overflow:hidden;transition:opacity .2s}
.skel-ov.gone{opacity:0}
.sk{display:block;border-radius:3px;background:linear-gradient(90deg,#e1e4e8 0%,#f1f3f5 40%,#e1e4e8 80%);background-size:300% 100%;animation:shim 1.1s linear infinite}
@keyframes shim{from{background-position:100% 0}to{background-position:-200% 0}}
.sk-row{display:flex;gap:10px;align-items:center;background:#fff;padding:12px;border-bottom:1px solid #e9ebee}
.sk-l{flex:1;display:flex;flex-direction:column;gap:7px}
.sk-r{display:grid;grid-template-columns:repeat(3,var(--ow));gap:2px}
.sk-hero{display:flex;align-items:center;justify-content:space-around;height:170px;background:#0d3a22}
.sk-hero .sk{background:linear-gradient(90deg,#1b4d33,#28603f,#1b4d33);background-size:300% 100%}
.sk-hero>div{display:flex;flex-direction:column;align-items:center;gap:8px}
.sk-c{width:52px!important;height:60px!important;border-radius:10px}
.sk-card{background:#fff;padding:12px;margin-top:6px;display:flex;flex-direction:column;gap:10px}
.sk-r3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}

/* ---------- Press feedback & ripple ---------- */
.odd,.btn,.tile,.cat,.lpill,.icon-row a,.game,.fcard,.bottom-nav a{transition:transform .12s ease,background-color .15s}
.odd:active,.tile:active,.cat:active,.lpill:active,.game:active,.icon-row a:active{transform:scale(.95)}
.btn:active{transform:scale(.97)}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);pointer-events:none;animation:ripple .55s ease-out forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.odd,.btn,.tile,.cat,.lpill,.icon-row a,.game,.mkt-tabs button,.bottom-nav a{overflow:hidden}
.odd.sel{animation:selPop .32s var(--spring)}
@keyframes selPop{0%{transform:scale(.88)}100%{transform:none}}

/* fly-to-slip chip */
.fly-chip{position:fixed;left:0;top:0;z-index:250;background:var(--brand);color:#fff;font-weight:800;font-size:14px;padding:6px 10px;border-radius:14px;box-shadow:0 6px 16px rgba(10,125,62,.45);pointer-events:none;will-change:transform}

/* ---------- Odds movement ---------- */
.odd.up{animation:oddUp 1.6s ease}
.odd.down{animation:oddDown 1.6s ease}
@keyframes oddUp{0%,30%{background:#bfe9cc;box-shadow:inset 0 0 0 1.5px #12a24a}}
@keyframes oddDown{0%,30%{background:#f7d3da;box-shadow:inset 0 0 0 1.5px #e5163a}}
.live-block .odd.up{animation:oddUpD 1.6s ease}
.live-block .odd.down{animation:oddDownD 1.6s ease}
@keyframes oddUpD{0%,30%{background:#1f5a35}}
@keyframes oddDownD{0%,30%{background:#5a1f2a}}
.odd.up b,.odd.down b{display:inline-block;animation:numIn .35s var(--out)}
@keyframes numIn{from{transform:translateY(60%);opacity:0}}

/* ---------- Goal moments ---------- */
.ev.goal{animation:goalRow 1.8s ease}
@keyframes goalRow{0%,40%{background:#fff7d6}}
.live-block .ev.goal{animation:goalRowD 1.8s ease}
@keyframes goalRowD{0%,40%{background:#3a3415}}
.ev-teams b.pop{color:#e5163a;font-weight:800;animation:scorePop .7s var(--spring)}
.live-block .ev-teams b.pop{color:#ffc20e}
@keyframes scorePop{0%{transform:scale(2.2)}100%{transform:none}}
.mh-score.goal span{animation:scorePop .8s var(--spring)}
#goalTicker{position:fixed;left:50%;top:58px;z-index:120;display:flex;align-items:center;gap:10px;max-width:min(94vw,440px);padding:10px 16px 10px 12px;border-radius:30px;background:linear-gradient(90deg,#0a7d3e,#0c9a4c);color:#fff;font-size:13.5px;box-shadow:0 10px 26px rgba(0,0,0,.3);transform:translate(-50%,-140%);transition:transform .45s var(--spring)}
#goalTicker.on{transform:translate(-50%,0)}
#goalTicker b{color:#ffc20e;letter-spacing:.5px}
#goalTicker i{font-style:normal;opacity:.8}
.gt-sc{background:rgba(0,0,0,.25);padding:1px 7px;border-radius:4px;font-weight:800}
.gt-ball{width:22px;height:22px;flex:none;background:url(img/ball.png) center/contain;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Count-up flashes ---------- */
.tick-up{animation:tickUp .9s ease}
.tick-down{animation:tickDown .9s ease}
@keyframes tickUp{0%,40%{color:#7dffad}}
@keyframes tickDown{0%,40%{color:#ffb3c0}}
#bsWin.tick-up{animation:tickUpL .9s ease}
@keyframes tickUpL{0%,40%{color:#12a24a;transform:scale(1.06)}}

/* ---------- Sheets, drawer, toasts, modals ---------- */
.betslip{transition:transform .42s var(--spring)}
.drawer{transition:transform .36s var(--out)}
.modal.open .modal-card{animation:sheetUp .42s var(--spring)}
@keyframes sheetUp{from{transform:translateY(60px);opacity:0}}
@media (min-width:768px){ .modal.open .modal-card{animation:zoomIn .3s var(--spring)} @keyframes zoomIn{from{transform:scale(.92);opacity:0}} }
.toast{transition:transform .4s var(--spring),opacity .25s}
.mkt-tabs button.active::after,.txt-tabs .active::after,.list-tabs button.active::after,.md-tabs button.active::after,.sport-tabs button.active::after{animation:grow .3s var(--out)}
@keyframes grow{from{transform:scaleX(0)}}
.bottom-nav a.active svg{animation:navBounce .45s var(--spring)}
@keyframes navBounce{0%{transform:translateY(0)}40%{transform:translateY(-5px)}100%{transform:none}}
.slip-pill{transition:transform .2s}
.slip-pill:active{transform:scale(.92)}
.live-dot{animation:blink 1.2s infinite,ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(229,22,58,.55)}70%{box-shadow:0 0 0 7px rgba(229,22,58,0)}100%{box-shadow:none}}
.lv-clock{font-variant-numeric:tabular-nums}
.v-clock b{display:inline-block}

/* ---------- Pull to refresh & confetti ---------- */
.ptr{position:fixed;left:50%;top:62px;z-index:39;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);display:grid;place-items:center;opacity:0;transform:translate(-50%,0);pointer-events:none}
.ptr img{width:24px;height:24px}
.ptr.spin img{animation:spin .6s linear infinite}
.confetti{position:fixed;inset:0;z-index:260;pointer-events:none;width:100%;height:100%}

/* logo images from a licensed feed */
.logo-img{object-fit:contain}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  #splash{display:none}
  .splashing .topbar .logo{opacity:1}
}
.is-live .odd.sel,.live-block .odd.sel{animation:none}

/* =========================================================
   v6 – exact metrics (measured from the reference sportsbook
   at 390px: base 13.06px, small 10.89px, tab 15.24px, title 19.6px)
   ========================================================= */
:root{--fs:13.06px;--fs-s:10.89px;--fs-t:15.24px;--fs-h:19.6px;--ink:#1b1e25;--ink-2:#353a45;--mute:#9ca0ab;--g:#0d9737;--g-ink:#096b27;--g-bg:#d6ebdc;--live-g:#32ce62;--ow:67px;--og:1px;--side:11px;--nav-h:56px;--top-h:48px}
html,body{font-size:var(--fs);line-height:1.5;background:#fafafa;color:var(--ink)}

/* header 48px, buttons 30px */
.topbar-inner{height:48px;padding:0 8px 0 4px}
.logo-text{font-size:19px}
.logo-ball{width:17px;height:17px}
.top-actions{gap:8px}
.top-actions .btn.sm{height:30px;padding:0 8px;font-size:var(--fs);font-weight:500;border-radius:2px;line-height:30px}
.topbar .btn-accent{background:#fff;color:var(--brand)}
.topbar .btn-ghost{border:1px solid #fff}
.balance b{font-size:var(--fs)}
.icon-btn{width:40px;height:48px}

/* story tiles 70×70 */
.tiles{gap:8px;padding:0 9px;height:74px;align-items:flex-start;background:#fafafa}
.tile{flex:0 0 70px;height:70px;border-radius:4px;padding:4px 6px}
.tile b{font-size:8.7px;line-height:1.2;font-weight:700}
.tile-match .tm{top:10px;gap:2px}
.tile-match .crest.big{width:22px;height:26px}
.tile-match em{font-size:8px}
.tile-game svg{top:12px;width:28px;height:28px}

/* sport shortcut row: 64px cells, 22px icons */
.icon-row{grid-template-columns:repeat(6,1fr);height:65px;padding:11px 0 0;background:#fafafa}
.icon-row a{gap:0;font-size:var(--fs-s);line-height:1;color:var(--ink-2)}
.icon-row svg{width:22px;height:22px;margin-bottom:11px;stroke-width:1.5}

/* popular cards 113×52 */
.cat-cards{gap:4px;padding:0 11px 5px;background:#fafafa}
.cat{flex:0 0 113px;min-height:52px;height:52px;padding:7px 9px;font-size:11.5px;line-height:1.15;font-weight:900;border-top-width:3px;box-shadow:0 1px 3px rgba(0,0,0,.1);background:#f2f3f5;display:flex;align-items:center}

/* section heads */
.sec-head{padding:6.5px 6.5px 0 13px;gap:0;min-height:38px}
.sec-head h2{font-size:var(--fs-h);font-weight:700;color:var(--ink-2);padding-right:13px;margin-right:13px;line-height:1;border-right:1px solid #c9ccd2}
.txt-tabs{gap:0}
.txt-tabs button,.txt-tabs a{font-size:var(--fs-t);padding:0 4.7px;line-height:23px;color:var(--ink-2)}
.txt-tabs .active{color:var(--g)}
.hot{margin-top:0;padding-bottom:7.6px}
.lg-pills{gap:8px;padding:6px 9px 7px}
.lpill{height:32px;padding:0 10.9px;border-radius:16px;font-size:14.15px;border:1px solid #c9ccd2;gap:6px}
.lpill.active{border:1.5px solid var(--ink-2)}
.lpill .flg{width:18px;height:12px}

/* featured card 343×137 */
.feat{gap:8px;padding:2px 13px 4px}
.fcard{flex:0 0 343px;height:137px;padding:0 2px 2px;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.14);display:flex;flex-direction:column}
.fc-top{margin:0;height:16px;font-size:var(--fs-s);gap:6px}
.fc-top a{color:var(--g)}
.fc-top .hot{font-size:9.5px;padding:0 9px 0 5px;line-height:14px}
.fc-mid{flex:1;padding:4px 0 2px;grid-template-columns:1fr 90px 1fr}
.fc-team{gap:2px;font-size:11.97px;color:var(--mute)}
.fc-team .crest.big{width:34px;height:40px;filter:none}
.fc-time{gap:0}
.fc-time b{font-size:var(--fs)}
.fc-time small{font-size:var(--fs);color:var(--ink)}
.fc-time em{font-size:var(--fs);margin-top:6px;color:var(--g)}
.fc-odds{gap:2px}
.fc-odds .odd.ob{height:33px;padding:0 17.4px}
.fc-odds .odd.ob span,.fc-odds .odd.ob b{font-size:var(--fs-t);font-weight:700;color:var(--g-ink)}
.fc-odds .odd.ob.sel span,.fc-odds .odd.ob.sel b{color:#fff}

/* live block */
.live-block{margin-top:0;background:var(--ink)}
.sec-head.dark{background:var(--ink);padding:13px 13px 6.5px;min-height:0}
.sec-head.dark h2{color:#fff;border-color:#4a4e57}
.sec-head.dark .txt-tabs button{color:#fff;line-height:15px}
.sec-head.dark .txt-tabs .active{color:var(--live-g);font-weight:700}
.mkt-tabs{height:46px;align-items:stretch}
.mkt-tabs button{padding:11.4px 10.9px;font-size:var(--fs-t);font-weight:500;color:var(--ink-2)}
.mkt-tabs button.active{font-weight:700;color:var(--ink)}
.mkt-tabs button.active::after{height:3px;background:var(--g)}
.mkt-tabs.dark{background:var(--ink);border-bottom:0}
.mkt-tabs.dark button{color:#fff}
.mkt-tabs.dark button.active{color:#fff}
.more-link,.more-link.dark{padding:18.5px 11px;font-size:var(--fs);text-align:right;background:var(--ink);border:0;color:var(--live-g)}
.more-link:not(.dark){background:#fff;color:var(--g)}

/* column header rows (26px) */
.day-sep{height:26px;padding:0 var(--side);font-size:var(--fs);color:var(--ink-2);background:#eceef1}
.day-sep .cols{font-size:var(--fs);color:var(--mute)}
.day-sep.dark{background:#3a3c42;color:var(--mute)}

/* event rows */
.ev{margin:0 var(--side);padding:8.7px 0;border-bottom:1px solid #eceef1;background:transparent;overflow:visible}
.sports-block,.league-block,#lgList,#liveList,#vList{background:#fff}
.live-block .ev{border-bottom:1px solid rgba(242,243,245,.15);background:transparent}
.ev-meta{height:20px;margin-bottom:4.35px;gap:8.7px;font-size:var(--fs-s);color:var(--mute)}
.ev-meta>span:first-of-type:not(.hot),.ev-meta .lv-clock{font-size:var(--fs);color:var(--ink-2)}
.ev-meta .lv-clock,.ev-meta .lv-half{font-size:var(--fs);font-weight:700;color:var(--g)}
.live-block .ev-meta .lv-clock,.live-block .ev-meta .lv-half{color:var(--live-g)}
.ev-meta .ev-lg{font-size:var(--fs-s);color:var(--mute)}
.ev-meta .hot{margin-left:-11px;font-size:9.5px;padding:0 10px 0 6px;line-height:15px}
.ev-body{gap:0;align-items:flex-start}
.ev-teams{font-size:var(--fs);line-height:18.29px;color:var(--ink)}
.ev-teams span{padding-right:0}
.ev-teams i{padding-right:10.9px}
.ev-teams b{width:28px;text-align:center;flex:none;font-weight:400}
.ev-teams small{font-size:var(--fs-s);font-weight:500;color:var(--mute);margin-top:3.27px;line-height:15.24px}
.live-block .ev-teams{color:#f2f3f5}
.ev-odds{gap:var(--og);margin-top:1px}

/* odds 67×37 */
.odd{height:37px;border-radius:0;font-size:var(--fs-t);font-weight:700;background:var(--g-bg);color:var(--g-ink)}
.odd b{font-weight:700}
.odd:hover{background:#c7e3cf}
.odd.sel{background:var(--g);color:#fff}
.live-block .odd{background:rgba(214,235,220,.13);color:var(--live-g)}
.live-block .odd.locked{background:#22252d}
.live-block .odd .lock{color:#50545f}
.odd.ob{height:37px}
.mkt-body{gap:2px}
.mkt-body .odd.ob span{font-size:var(--fs);color:var(--ink-2);font-weight:400}

/* league list & heads */
.lg-acc{padding:13px var(--side);font-size:14.15px;font-weight:500}
.league-head{height:26px;font-size:var(--fs);padding:0 var(--side);background:#eceef1}
.league-head .cols{font-size:var(--fs);color:var(--mute)}
.league-block .ev:last-child{border-bottom:0}

/* bottom nav & betslip float */
.bottom-nav a{font-size:12px;gap:1px}
.bottom-nav a svg{width:22px;height:22px}
.slip-pill{width:61px;height:61px;background:var(--g);right:16px}
.slip-pill svg{width:26px;height:26px}
.slip-pill b{width:22px;min-width:22px;height:22px;top:-2px;right:-2px;font-size:var(--fs);font-weight:500;padding:0}

/* other lists a notch smaller to match */
.page-title h1{font-size:var(--fs-h)}
.res-row{font-size:var(--fs)}
.filter-bar{padding:6px var(--side)}
.filter-bar button{font-size:12px;padding:3px 10px}
@media (max-width:370px){ :root{--ow:60px} }
@media (min-width:768px){ :root{--ow:80px} .fcard{flex-basis:360px} }
/* v6.1 polish from side-by-side */
.tiles{margin-top:10px}
.cat{font-size:13px;line-height:1.08;padding:6px 10px}
.fc-dt{display:flex;align-items:center;gap:6px}
.fc-dt i{width:1px;height:13px;background:#c9ccd2}
.fc-time small{font-size:var(--fs)}
.fc-odds .odd.ob span{font-weight:400}
.fc-team .crest.big{width:36px;height:43px}
.bottom-nav{--nav-h:52px;height:calc(52px + env(safe-area-inset-bottom))}
body{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
.slip-pill{bottom:calc(52px + 14px + env(safe-area-inset-bottom))}
.top-actions .btn-ghost.sm{padding:0 8px}

/* =========================================================
   v7 – Me, Games lobby, Rocket Crash, footer
   ========================================================= */
/* ---------- Me ---------- */
#page-me{background:#fafafa}
.me-dark{background:var(--ink);color:#fff;padding:14px 13px 22px}
.me-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.me-user{display:flex;align-items:center;gap:12px;font-size:var(--fs-h);font-weight:500;color:#fff;min-width:0}
.me-user svg{width:30px;height:30px;flex:none;color:#fff}
.me-user svg:last-child{width:18px;height:18px;color:#9ca0ab}
.me-user span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-sub{font-size:var(--fs-s);color:#9ca0ab}
.me-bal{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 18px}
.me-bal span{font-size:var(--fs-t);font-weight:500}
.me-bal b{font-size:24px;font-weight:900;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.me-actions{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.me-actions button{height:44px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:var(--fs-t);font-weight:700;border-radius:2px}
.me-actions svg{width:20px;height:20px}
.me-dep{background:var(--g);color:#fff}
.me-wd{border:1.5px solid var(--live-g)!important;color:var(--live-g)}
.me-loyal{display:flex;align-items:center;gap:8px;margin-top:18px;height:46px;padding:0 12px 0 16px;border-radius:8px;background:linear-gradient(100deg,#7a4d00 0%,#3b3f49 45%,#3b3f49);color:#fff}
.me-loyal b{flex:1;font-family:Kanit,Roboto,sans-serif;font-style:italic;font-weight:800;font-size:16px;color:#ffc20e}
.me-loyal span{color:var(--live-g);font-weight:700;font-size:var(--fs)}
.me-loyal svg{width:18px;height:18px}
.me-quick{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;padding:16px 0;border-radius:8px;background:#353a45}
.me-quick a{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 6px;font-size:var(--fs);line-height:1.3;color:#f2f3f5;text-align:center}
.me-quick a+a{border-left:1px solid #4f5562}
.me-quick svg{width:24px;height:24px;stroke-width:1.5}
.me-quick em{position:absolute;top:-6px;left:calc(50% + 8px);min-width:17px;height:17px;border-radius:9px;background:var(--live);font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.me-quick em:empty{display:none}
.me-list{list-style:none;background:#fafafa}
.me-list li+li{border-top:1px solid #e9ebee}
.me-list a,.me-list button{display:flex;align-items:center;gap:14px;width:100%;height:56px;padding:0 13px;font-size:var(--fs-t);color:var(--ink);text-align:left}
.me-list svg{width:22px;height:22px;flex:none;color:var(--ink-2);stroke-width:1.6}
.me-list svg:last-child{width:16px;height:16px;color:#9ca0ab;margin-left:auto}
.me-list span:not(.cc-flag){flex:0 1 auto}
.me-list em{font-style:normal;margin-left:auto;font-size:var(--fs);color:#9ca0ab}
.me-list em+svg{margin-left:6px!important}
.me-list em.new{background:var(--live);color:#fff;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:8px}
.me-list em.dot{width:8px;height:8px;border-radius:50%;background:var(--live);padding:0}
.me-list em.dot[hidden]{display:none}
.me-list .cc-flag{display:inline-flex}
.me-list .cc-flag .flg{width:22px;height:15px}
#logoutBtn button{color:var(--live)}
#logoutBtn svg{color:var(--live)}
.how-step{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #eceef1}
.how-step b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center}
.how-step p{color:#666b75;margin-top:2px}
.nav-badge:empty{display:none}

/* ---------- Games lobby ---------- */
#page-games{background:var(--ink);min-height:calc(100vh - 100px)}
.gl{padding:12px 0 24px;color:#f2f3f5}
.gl-top{display:grid;grid-template-columns:1fr 132px;gap:10px;padding:0 13px}
.gl-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid #3b3f49;border-radius:8px;background:#0f1115}
.gl-search svg{width:18px;height:18px;color:#9ca0ab}
.gl-search input{border:0;background:none;padding:0;color:#fff;font-size:var(--fs-t)}
#gCat{height:40px;border-radius:8px;background:#2d313a;border:0;color:#fff;font-size:var(--fs);padding:0 10px}
.g-sec{margin-top:18px}
.g-h{display:flex;align-items:center;justify-content:space-between;padding:0 13px 10px}
.g-h h3{font-size:16px;font-weight:500}
.g-all{font-size:12px;color:var(--live-g);background:#2a2e36;padding:3px 10px;border-radius:12px}
.g-row{display:flex;gap:10px;overflow-x:auto;padding:0 13px;scrollbar-width:none;scroll-snap-type:x mandatory}
.g-row::-webkit-scrollbar{display:none}
.gcard{position:relative;flex:0 0 128px;height:128px;border-radius:10px;overflow:hidden;scroll-snap-align:start;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.g-art{display:block;width:100%;height:100%}
.gcard:active{transform:scale(.96)}
.g-rank{position:absolute;top:0;left:6px;width:28px;height:40px;background:var(--live);color:#fff;font:900 22px/34px Roboto,sans-serif;text-align:center;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.g-soon{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.6);color:#ffc20e;font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:8px}
.g-live{position:absolute;right:6px;top:6px;background:var(--live);color:#fff;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:8px;animation:blink 1.2s infinite}
.g-row.prov{gap:10px}
.g-prov{flex:0 0 150px;height:72px;border-radius:10px;background:#2d313a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:#c9ccd2}
.g-prov b{font-family:Kanit,Roboto,sans-serif;font-style:italic;font-weight:800;font-size:18px;color:#fff}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 13px}
.g-grid .gcard{height:auto;aspect-ratio:1}
.g-empty{padding:40px;text-align:center;color:#9ca0ab}

/* ---------- Rocket Crash ---------- */
#page-play{background:#0f1115;min-height:calc(100vh - 100px);color:#f2f3f5}
.cr-head{display:flex;align-items:center;gap:6px;height:46px;padding-right:10px;background:var(--ink)}
.cr-head b{font-family:Kanit,Roboto,sans-serif;font-style:italic;font-size:17px;flex:none}
.cr-head .icon-btn{height:46px;color:#fff}
.cr-hist{display:flex;gap:5px;overflow:hidden;margin-left:8px;mask-image:linear-gradient(90deg,#000 80%,transparent)}
.cr-hist i{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;background:#2a2e36}
.cr-hist .lo{color:#6ab0ff}.cr-hist .mid{color:#c084fc}.cr-hist .hi{color:#ffc20e}
.cr-stage{position:relative;height:240px;margin:10px 10px 0;border-radius:12px;overflow:hidden;background:radial-gradient(120% 90% at 20% 100%,#26180a 0%,#12141a 55%,#0b0c10 100%)}
#crCanvas{position:absolute;inset:0;width:100%;height:100%}
.cr-mult{position:absolute;left:0;right:0;top:34%;text-align:center;font-size:52px;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.6)}
.cr-mult.dead{color:#e5163a}
.cr-mult.dead::after{content:"CRASHED";display:block;font-size:14px;letter-spacing:4px;color:#ff7088}
.cr-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;width:200px}
.cr-msg b{display:block;font-size:16px;margin-bottom:10px}
.cr-msg i{display:block;height:4px;border-radius:2px;background:#ffc20e;transition:width .1s linear}
.cr-panel{margin:10px;padding:12px;border-radius:12px;background:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.cr-stake{display:flex;height:42px;border-radius:21px;background:#0f1115;overflow:hidden}
.cr-stake button{width:42px;font-size:20px;color:#fff}
.cr-stake input{flex:1;min-width:0;border:0;background:none;text-align:center;color:#fff;font-weight:700;font-size:16px;padding:0}
.cr-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.cr-quick button{height:28px;border-radius:14px;background:#2a2e36;color:#c9ccd2;font-size:11px}
.cr-auto{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:12px;color:#9ca0ab}
.cr-auto input{width:70px;height:28px;padding:0 8px;background:#0f1115;border:0;color:#fff;text-align:center}
.cr-btn{grid-column:1/-1;height:52px;border-radius:26px;background:var(--g);color:#fff;font-size:17px;font-weight:800;transition:background .2s}
.cr-btn.cash{background:linear-gradient(180deg,#ffd45c,#f0a900);color:#2a1c00;animation:pulseBtn 1s infinite}
.cr-btn.cancel{background:#e5163a}
@keyframes pulseBtn{50%{box-shadow:0 0 0 6px rgba(255,194,14,.25)}}
.cr-live{margin:0 10px 20px;border-radius:12px;background:var(--ink);overflow:hidden}
.cr-live-h{display:flex;justify-content:space-between;padding:10px 12px;font-size:12px;color:#9ca0ab;border-bottom:1px solid #2a2e36}
.cr-row{display:grid;grid-template-columns:1.4fr 1fr .8fr 1fr;padding:7px 12px;font-size:12px;color:#c9ccd2;border-bottom:1px solid #20232a}
.cr-row b{text-align:right;color:var(--live-g);font-weight:700}
.cr-row.out{background:rgba(50,206,98,.08)}
.cr-row.lost{opacity:.45}
.cr-row.me{color:#ffc20e;font-weight:700}

/* ---------- Footer (dark, like the reference) ---------- */
.site-foot{padding:0;margin-top:0;background:var(--ink);border:0;text-align:center}
.foot-strip{display:flex;justify-content:space-between;align-items:center;padding:16px 13px;background:#eceef1;color:#9ca0ab;font-size:12px}
.foot-strip .age{margin:0;border-color:#9ca0ab;color:#7d838c}
.foot-dark{padding:28px 18px 34px;color:#9ca0ab}
.foot-dark .foot-logo{background:none;padding:0;margin-bottom:6px}
.foot-dark .foot-logo .logo-text{font-size:22px}
.foot-tag{font-weight:700;font-size:var(--fs-t);color:#c9ccd2;margin-bottom:24px}
.foot-h{font-size:var(--fs);margin-bottom:12px}
.foot-dark .pay-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:300px;margin:0 auto 24px}
.foot-dark .pay-row span{border:0;background:#2a2e36;color:#c9ccd2;padding:9px 4px;font-size:11.5px;border-radius:3px}
.foot-dark .foot-links{gap:4px 14px;margin-bottom:16px}
.foot-dark .foot-links a{color:#c9ccd2;text-decoration:underline;font-size:12px}
.foot-dark .cc-foot{border-color:#3b3f49;color:#c9ccd2;margin-bottom:16px}
.foot-lic{font-size:12px;line-height:1.6}
@media (min-width:768px){ .gcard{flex-basis:150px;height:150px} .cr-stage{height:320px} }
.me-list a>span:not(.cc-flag),.me-list button>span:not(.cc-flag){flex:1}
.me-list em{margin-left:0}
.me-list svg:last-child{margin-left:8px!important}
body:is([data-page="me"],[data-page="games"],[data-page="play"],[data-page="acct"]) .slip-pill.empty{display:none}

/* v7.1 – page-by-page clean-up */
button:focus,a:focus{outline:none}
:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.modal-card label>span{display:block}
/* footer only on home & me (like the reference) */
body:not([data-page="home"]):not([data-page="me"]) .site-foot{display:none}
main{min-height:calc(100vh - 48px - 52px)}
#page-acct{background:#fff;min-height:calc(100vh - 100px)}
/* floating slip: keep off full-width forms and the jackpot bar */
body:is([data-page="acct"],[data-page="play"],[data-page="jackpot"],[data-page="promos"]) .slip-pill{display:none}
/* jackpot rows */
.jp-row .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-row .opts{grid-template-columns:repeat(3,52px)}
.jp-foot{bottom:calc(52px + env(safe-area-inset-bottom))}
/* drawer */
.drawer a{display:flex;align-items:center;gap:14px;padding:13px 16px;font-size:var(--fs-t);color:var(--ink)}
.drawer a svg{width:20px;height:20px;color:var(--ink-2);stroke-width:1.6}
.drawer a:active{background:#f2f3f5}
.drawer .cc-row{font-size:var(--fs)}
/* toasts sit under the header, never over content controls */
.toast{top:56px;font-size:var(--fs)}
/* match page markets: market title size */
.mkt-head{font-size:var(--fs-t)}
.md-tabs button{font-size:var(--fs-t)}
.group-chips button{font-size:var(--fs);padding:4px 12px}
@media (min-width:1024px){
  .tiles{display:grid;grid-template-columns:repeat(6,1fr);height:auto;padding:10px 0 0;margin-top:0}
  .tile{height:auto;aspect-ratio:1.25;border-radius:6px}
  .tile b{font-size:12px}
  .tile-match .crest.big{width:34px;height:40px}
  .cat-cards{display:grid;grid-template-columns:repeat(5,1fr);padding:0 0 8px}
  .cat{height:58px}
  .icon-row{background:#fff}
}

/* =========================================================
   v8 – single 12px gutter grid (mobile)
   ========================================================= */
:root{--side:12px}
.tiles{padding-left:var(--side);padding-right:var(--side);gap:8px}
.icon-row{padding-left:6px;padding-right:6px}
.cat-cards{padding-left:var(--side);padding-right:var(--side);gap:8px}
.sec-head{padding-left:var(--side);padding-right:var(--side)}
.sec-head h2{padding-right:12px;margin-right:8px}
.txt-tabs button:first-child,.txt-tabs a:first-child{padding-left:4px}
.sec-head.dark{padding-left:var(--side);padding-right:var(--side)}
.lg-pills{padding-left:var(--side);padding-right:var(--side)}
.feat{padding-left:var(--side);padding-right:var(--side);gap:8px;scroll-padding-left:var(--side)}
.fcard{flex-basis:calc(100% - 36px)}
.mkt-tabs button:first-child{padding-left:var(--side)}
.mkt-tabs button.active:first-child::after{left:var(--side)}
.day-sep,.league-head{padding-left:var(--side);padding-right:var(--side)}
.ev{margin-left:var(--side);margin-right:var(--side)}
.ev-meta .hot{margin-left:calc(var(--side) * -1)}
.lg-acc{padding-left:var(--side);padding-right:var(--side)}
.more-link,.more-link.dark{padding-left:var(--side);padding-right:var(--side)}
.page-title,.sub-head{padding-left:var(--side);padding-right:var(--side)}
.sub-head .icon-btn{margin-left:-10px}
.group-chips,.market-tabs,.filter-bar{padding-left:var(--side);padding-right:var(--side)}
.mkt-head{padding-left:var(--side);padding-right:var(--side)}
.mkt-body{padding-left:var(--side);padding-right:var(--side)}
.card-pad{padding-left:var(--side);padding-right:var(--side)}
.me-dark{padding-left:var(--side);padding-right:var(--side)}
.me-list a,.me-list button{padding-left:var(--side);padding-right:var(--side)}
.gl-top,.g-h,.g-row,.g-grid{padding-left:var(--side);padding-right:var(--side)}
.g-row{scroll-padding-left:var(--side)}
.foot-strip{padding-left:var(--side);padding-right:var(--side)}
.search{padding-left:var(--side);padding-right:var(--side)}
.az-head{padding-left:var(--side);padding-right:var(--side)}
.az-body a{padding-left:calc(var(--side) + 30px);padding-right:var(--side)}
.jp-row,.jp-tools,.jp-foot{padding-left:var(--side);padding-right:var(--side)}
.res-row{padding-left:var(--side);padding-right:var(--side)}
.tx,.bonus,.msg{padding-left:var(--side);padding-right:var(--side)}
.bet-card{padding-left:var(--side);padding-right:var(--side)}
.cr-stage,.cr-panel,.cr-live{margin-left:var(--side);margin-right:var(--side)}
.cr-head{padding-left:2px}
.v-head{padding-left:var(--side);padding-right:var(--side)}
.promo-grid{padding:var(--side)}
.bs-item,.bs-foot{padding-left:var(--side);padding-right:var(--side)}
.bs-item{padding-right:40px}
.topbar-inner{padding-left:2px;padding-right:var(--side)}
/* live block + sports block: column headers line up with odds */
.day-sep .cols,.league-head .cols{margin-right:0}
.ev-odds{margin-right:0}
@media (min-width:1024px){ :root{--side:12px} .ev{margin-left:var(--side);margin-right:var(--side)} }

/* =========================================================
   v9 – match page on the reference's dark layout
   ========================================================= */
#page-match{background:var(--ink);min-height:calc(100vh - 100px);color:#fff}
#page-match .sub-head{background:var(--ink);border-bottom:0;color:#fff;height:48px}
#page-match .sub-head h1,#page-match .sub-head h1 a{font-size:var(--fs-h);font-weight:400;color:#fff}
#page-match .sub-head small{display:none}
#page-match .sub-head .icon-btn{color:#fff}
#page-match .fav{color:#fff}
.md-hero{background:var(--ink);padding:14px var(--side) 10px}
.mh-lg{display:inline-block;color:var(--live-g);text-decoration:underline;font-size:var(--fs);line-height:16px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-clockrow{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 10px}
.mh-clock{font-size:var(--fs-t);color:var(--live-g);font-variant-numeric:tabular-nums}
.mh-clock b{font-weight:400}
.mh-clock.pre{color:#c9ccd2}
.mh-id{font-size:var(--fs-s);color:var(--mute)}
.mh-row{display:flex;gap:4px;height:26px;margin-top:3px}
.mh-row:first-of-type{margin-top:0}
.mh-name{flex:1;display:flex;align-items:center;gap:8px;padding:0 6px;background:rgba(234,236,239,.15);font-size:var(--fs-t);font-weight:700;color:#fff;min-width:0}
.mh-name i{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mh-name .crest{width:15px;height:18px}
.mh-sc{width:35px;display:grid;place-items:center;background:var(--live-g);color:var(--ink-2);font-size:var(--fs-t);font-weight:500}
.mh-sc.pop{animation:scorePop .7s var(--spring)}
.mh-bar{margin-top:14px}
.mh-track{background:rgba(255,255,255,.14)}
.mh-track>i{background:var(--live-g)}
.mh-ticks{color:#9ca0ab;opacity:1}
.mh-mini{border-top:1px solid rgba(255,255,255,.1);color:#c9ccd2}
.pbar{background:#3d8bfd}
.pbar i{background:var(--live-g)}
.md-tabs{background:var(--ink);border-bottom:1px solid #2d313a;top:calc(var(--top-h) + 48px)}
.md-tabs button{color:#9ca0ab;font-weight:700;font-size:var(--fs)}
.md-tabs button.active{color:#fff}
.md-tabs button.active::after{background:var(--live-g);height:3px;left:30%;right:30%}
.group-chips{background:var(--ink);border-bottom:1px solid #2d313a;gap:0;padding:0 var(--side);height:48px;align-items:stretch}
.group-chips button{background:none;border:0;border-radius:0;padding:0 14px;font-size:var(--fs);font-weight:700;color:#fff;position:relative}
.group-chips button:first-child{padding-left:0}
.group-chips button.active{background:none;color:#fff}
.group-chips button.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--g)}
.group-chips button:first-child.active::after{left:0}
.mkt{background:var(--ink);border-bottom:1px solid #2d313a;margin:0}
.mkt-head{height:48px;padding:0 var(--side);color:#fff;font-size:var(--fs-t);font-weight:400;gap:10px}
.mkt-head::before{content:"";width:0;height:0;border-style:solid;border-width:6px 5px 0 5px;border-color:var(--live-g) transparent transparent;transition:transform .2s}
.mkt.closed .mkt-head::before{transform:rotate(-90deg)}
.mkt-head svg{display:none}
.mkt-head .susp{margin-left:auto}
.mkt-body{gap:2px;padding:0 var(--side) 12px}
.mkt-body .odd.ob,.mkt-body .odd.tb{height:49px;background:rgba(234,236,239,.15);color:var(--live-g);border-radius:0}
.mkt-body .odd.ob span{color:var(--live-g);font-size:var(--fs);font-weight:500;line-height:1.25;white-space:normal;text-align:left}
.mkt-body .odd.ob b,.mkt-body .odd.tb b{font-size:var(--fs);font-weight:700;color:var(--live-g)}
.mkt-body .odd.tb b{font-size:var(--fs-t)}
.mkt-body .odd:hover{background:rgba(234,236,239,.22)}
.mkt-body .odd.sel,.mkt-body .odd.tb.sel{background:var(--g);color:#fff}
.mkt-body .odd.sel span,.mkt-body .odd.sel b{color:#fff}
.mkt-body .odd.locked{background:rgba(234,236,239,.07);color:#50545f}
.mkt-body .odd.locked span{color:#50545f}
.mkt-body .odd.locked .lock{color:#50545f}
.mkt-body.tbl{grid-template-columns:120px 1fr 1fr;gap:2px}
.mkt-body.tbl .th{height:27px;display:flex;align-items:center;padding-left:6px;background:rgba(234,236,239,.15);color:#dcdee5;font-size:var(--fs)}
.mkt-body.tbl .th:first-child{background:none}
.mkt-body.tbl .line{height:49px;display:grid;place-items:center;background:rgba(234,236,239,.15);color:#fff;font-size:var(--fs-t)}
.mkt-body .odd.up,.mkt-body .odd.down{animation:oddUpD 1.6s ease}
.mkt-body .odd.down{animation:oddDownD 1.6s ease}
.md-panel{background:var(--ink);margin-top:0;color:#fff}
.md-panel .card-pad{background:var(--ink)}
.md-panel .sh{color:#9ca0ab}
.md-panel .snum span,.md-panel .muted,.md-panel .h2h .muted{color:#9ca0ab}
.md-panel .timeline li,.md-panel .h2h li,.md-panel .how-step{border-color:#2d313a}
.md-panel .h2h b{background:rgba(234,236,239,.15);color:#fff}
.md-panel .minfo dt{color:#9ca0ab}
.md-panel .sbar .h{background:var(--live-g)}
.md-panel .form-row{color:#fff}
.md-panel .timeline li.ko{color:#9ca0ab}
.md-panel .tmin{color:var(--live-g)}
.md-panel .timeline li.a .tmin{color:#3d8bfd}
.md-panel p.muted{color:#9ca0ab}
body[data-page="match"] .slip-pill{display:flex}

/* =========================================================
   v10 – betslip on the reference layout
   ========================================================= */
.betslip{background:#fafafa;border-radius:0;max-height:92vh}
.bs-grip{display:none}
.bs-head{height:56px;padding:0 var(--side);background:#353a45;color:#fff;border-radius:0;display:flex;align-items:center;gap:12px;justify-content:flex-start}
.bs-cnt{width:30px;height:30px;border-radius:50%;background:var(--g);color:#fff;display:grid;place-items:center;font-size:var(--fs-t);font-weight:700}
.bs-title{font-size:var(--fs-t);font-weight:700}
.bs-x{margin-left:auto;width:40px;height:40px;display:grid;place-items:center;color:#fff}
.bs-x svg{width:24px;height:24px}
.bs-tools{display:flex;align-items:center;gap:16px;height:44px;padding:0 var(--side);background:#353a45;color:#fff;border-top:1px solid #454a56}
.bs-tool{display:flex;align-items:center;gap:8px;font-size:var(--fs-t);color:#fff}
.bs-tool svg{width:22px;height:22px}
#bsClear{margin-left:auto}
.bs-tabs{background:#353a45;padding:8px 6px 0;gap:4px;border:0}
.bs-tabs button{height:40px;border-radius:6px 6px 0 0;background:#4b515e;color:#c9ccd2;font-size:var(--fs-t);font-weight:700;position:static}
.bs-tabs button.active{background:#fafafa;color:var(--ink)}
.bs-tabs button.active::after{display:none}
.bs-tabs button:disabled{color:#8a9099;text-decoration:line-through;cursor:default}
.bs-body{background:#fafafa}
.bs-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 20px;color:var(--mute);text-align:center}
.bs-empty svg{width:40px;height:40px;stroke-width:1.4;color:#c9ccd2;margin-bottom:6px}
.bs-empty b{color:var(--ink);font-size:var(--fs-t)}
.bs-item{display:flex;gap:4px;padding:12px var(--side) 12px 6px;border-left:0;border-radius:0;border-bottom:1px solid #e3e6ea;background:#fafafa}
.bs-item.susp{background:#fffbea}
.bs-rm{width:36px;flex:none;display:grid;place-items:center;color:var(--ink);align-self:center}
.bs-rm svg{width:22px;height:22px;stroke-width:2.2}
.bs-main{flex:1;min-width:0}
.bs-l1{display:flex;align-items:center;gap:8px}
.bs-sp .sp-ic{width:18px;height:18px;vertical-align:-3px;color:var(--ink)}
.bs-pick{flex:1;font-size:var(--fs-h);font-weight:400;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-odd{font-size:var(--fs-h);font-weight:400;font-variant-numeric:tabular-nums;color:var(--ink)}
.bs-odd.up{color:var(--up)}.bs-odd.down{color:var(--down)}
.bs-odd.up::before{content:"▲ ";font-size:9px}.bs-odd.down::before{content:"▼ ";font-size:9px}
.bs-odd .lock{width:16px;height:16px;color:#9a6b00}
.bs-l2{display:block;margin-top:6px;font-size:var(--fs-t);color:var(--ink)}
.bs-l2 .lv{font-style:normal;background:var(--live-g);color:#fff;font-size:12px;padding:1px 6px;border-radius:2px;margin-right:6px;vertical-align:1px}
.bs-l3{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:var(--fs-t);color:var(--ink)}
.bs-l3 input{width:150px;height:40px;text-align:right;font-size:var(--fs-t);padding:0 12px;border:1px solid #9ca0ab;border-radius:4px;background:#fff}
.bs-foot{padding:12px var(--side) 10px;background:#fafafa;border-top:3px solid #e3e6ea}
.bs-stake-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--fs-t);font-weight:700}
.bs-stake{display:flex;align-items:center;gap:8px;font-weight:700}
.bs-stake i{font-style:normal;font-size:var(--fs-t)}
.bs-stake input{width:150px;height:40px;text-align:right;font-size:var(--fs-t);padding:0 12px;border:1px solid #9ca0ab;border-radius:4px;background:#fff}
.bs-foot .chips{margin:10px 0 6px}
.bs-foot .row{font-size:var(--fs-t);padding:6px 0}
.bs-foot .row b{font-weight:400}
.bs-foot .row.boost{align-items:center}
.bs-foot .row.boost b{font-weight:700}
.accept{margin:0;font-size:12px}
.bs-win{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:14px var(--side);background:#d6ebdc;font-size:var(--fs-t);font-weight:700;color:var(--ink)}
.bs-bar{display:grid;grid-template-columns:1fr 2fr;height:60px;flex:none}
.bs-book{background:#0a6b2e;color:#fff;font-size:var(--fs-t);font-weight:700}
.bs-place{background:var(--g);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}
.bs-place b{font-size:var(--fs-h);font-weight:500}
.bs-place small{font-size:var(--fs)}
.bs-place:disabled{background:#8fbf9f}
.betslip .empty{display:none}
@media (min-width:1024px){
  .betslip{background:#fafafa;max-height:calc(100vh - 110px)}
  .bs-x{display:none}
  .bs-head{border-radius:0}
}
.otp-row input{letter-spacing:6px;font-size:18px;text-align:center;font-weight:700}
.modal-card label .muted{font-weight:400}

/* =========================================================
   v11 – deposit / withdraw pages, legal pages
   ========================================================= */
.sh-link{font-size:var(--fs);color:var(--brand);font-weight:600;padding:0 4px}
.pay{background:#fafafa;min-height:calc(100vh - 100px);padding-bottom:30px}
.pay-bal{display:flex;justify-content:space-between;align-items:center;padding:14px var(--side);background:var(--ink);color:#fff}
.pay-bal span{font-size:var(--fs);color:#c9ccd2}
.pay-bal b{font-size:var(--fs-h);font-weight:700}
.pay-sec{background:#fff;margin-top:8px;padding:14px var(--side) 16px;border-top:1px solid #eceef1;border-bottom:1px solid #eceef1}
.pay-h{font-size:var(--fs);font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.pay-h small{font-weight:400;color:var(--mute)}
.pay-amt{display:flex;align-items:center;gap:8px;height:56px;border:1.5px solid #d3d7dc;border-radius:6px;padding:0 14px;background:#fff}
.pay-amt:focus-within{border-color:var(--brand)}
.pay-amt i{font-style:normal;font-size:var(--fs-h);font-weight:700;color:var(--ink)}
.pay-amt input{border:0;padding:0;font-size:26px;font-weight:700;color:var(--ink);background:none;min-width:0;flex:1;font-variant-numeric:tabular-nums}
.pay-amt button{font-size:12px;font-weight:700;color:var(--brand);padding:6px 10px;border:1px solid var(--brand);border-radius:14px}
.pay-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.pay-chips button{height:36px;border-radius:6px;border:1px solid #d3d7dc;background:#fff;font-size:var(--fs);font-weight:600;color:var(--ink)}
.pay-chips button.on{border-color:var(--brand);background:#e6f4ec;color:var(--brand)}
.pay-note{font-size:12px;color:var(--mute);margin-top:8px}
.pay-note.err{color:var(--live)}
.pm{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border-top:1px solid #eceef1;text-align:left}
.pm:first-of-type{border-top:0}
.pm-badge{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;flex:none;letter-spacing:.2px}
.pm b{display:block;font-size:var(--fs-t);font-weight:600;color:var(--ink)}
.pm small{color:var(--mute);font-size:12px}
.pm span{flex:1;min-width:0}
.pm-radio{width:22px;height:22px;border-radius:50%;border:2px solid #c9cdd2;flex:none;position:relative}
.pm.on .pm-radio{border-color:var(--brand)}
.pm.on .pm-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--brand)}
.pm-fields{display:grid;gap:10px;padding:4px 0 8px 56px}
.pm-fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mute)}
.pm-fields input,.pm-fields select{height:42px}
.pay-sum{background:#fff;margin-top:8px;padding:6px var(--side) 16px;border-top:1px solid #eceef1;border-bottom:1px solid #eceef1}
.pay-sum .row{display:flex;justify-content:space-between;padding:8px 0;font-size:var(--fs);color:var(--mute);border-bottom:1px solid #f1f3f5}
.pay-sum .row b{color:var(--ink);font-weight:600}
.pay-sum .row.total{border:0;padding-top:12px;font-size:var(--fs-t);color:var(--ink)}
.pay-sum .row.total b{font-size:var(--fs-h);font-weight:700}
.pay-cta{margin:14px var(--side) 0;height:50px;width:calc(100% - 24px);border-radius:6px;background:var(--brand);color:#fff;font-size:var(--fs-t);font-weight:700}
.pay-cta:disabled{background:#b7c9bd}
.pay-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12px;color:var(--mute)}
.pay-secure svg{width:14px;height:14px}
.pay-done{background:#fff;margin-top:8px;padding:30px var(--side) 24px;text-align:center;border-bottom:1px solid #eceef1}
.pay-done .ok{width:72px;height:72px;border-radius:50%;background:#e6f4ec;color:var(--brand);display:grid;place-items:center;margin:0 auto 14px;animation:popIn .5s var(--spring)}
.pay-done .ok.pend{background:#fff4d1;color:#b07c00}
.pay-done .ok svg{width:36px;height:36px;stroke-width:2.4}
.pay-done h2{font-size:var(--fs-h);margin-bottom:4px}
.pay-done .amt{font-size:32px;font-weight:700;color:var(--brand);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.pay-done p{color:var(--mute);font-size:var(--fs)}
.pay-steps{display:flex;gap:4px;margin:16px 0 4px}
.pay-steps div{flex:1;text-align:center;font-size:11px;color:var(--mute)}
.pay-steps i{display:block;height:5px;border-radius:3px;background:#e3e6ea;margin-bottom:6px}
.pay-steps .done i{background:var(--brand)}
.pay-steps .now{color:var(--brand);font-weight:700}
.pay-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px var(--side) 0}
.pay-actions .btn{height:46px;border-radius:6px}
.pay-login{padding:40px var(--side);text-align:center;background:#fff;color:var(--mute)}
.bank-box{margin-top:10px;padding:12px;border:1px dashed var(--brand);border-radius:8px;background:#f3fbf6;font-size:var(--fs)}
.bank-box .row{display:flex;justify-content:space-between;padding:4px 0}
.bank-box b{font-size:var(--fs-t);letter-spacing:.5px}
.legal{background:#fff;padding:16px var(--side) 40px;font-size:var(--fs-t);line-height:1.65;color:#2b2f36;min-height:calc(100vh - 100px)}
.legal h2{font-size:var(--fs-h);margin:0 0 4px}
.legal .upd{color:var(--mute);font-size:12px;margin-bottom:18px}
.legal h3{font-size:var(--fs-t);margin:20px 0 6px;color:var(--ink)}
.legal p,.legal li{margin:0 0 8px}
.legal ul{padding-left:20px}
.legal a{color:var(--brand)}
@media (min-width:1024px){ .pay,.legal{min-height:0} }

/* =========================================================
   v11 – account pages (sign up, login, reset, deposit, withdraw)
   ========================================================= */
.acc-root{max-width:480px;margin:0 auto;min-height:100vh;background:#f8f8f9}
@media (max-width:1023px){
  body[data-page="register"] .topbar,body[data-page="login"] .topbar,body[data-page="forgot"] .topbar,
  body[data-page="deposit"] .topbar,body[data-page="withdraw"] .topbar,
  body[data-page="register"] .site-foot,body[data-page="login"] .site-foot,body[data-page="forgot"] .site-foot,body[data-page="deposit"] .site-foot,body[data-page="withdraw"] .site-foot,
  body[data-page="register"] .bottom-nav,body[data-page="login"] .bottom-nav,body[data-page="forgot"] .bottom-nav,
  body[data-page="deposit"] .bottom-nav,body[data-page="withdraw"] .bottom-nav{display:none}
  body[data-page="register"],body[data-page="login"],body[data-page="forgot"],body[data-page="deposit"],body[data-page="withdraw"]{padding-bottom:0}
  body[data-page="register"] .slip-pill,body[data-page="login"] .slip-pill,body[data-page="forgot"] .slip-pill,
  body[data-page="deposit"] .slip-pill,body[data-page="withdraw"] .slip-pill{display:none!important}
}
@media (min-width:1024px){
  .acc-root{min-height:0;border:1px solid var(--line);margin-bottom:20px}
}

/* ---------- auth ---------- */
.au-top{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 0;color:#7d838c}
.au-top svg{width:24px;height:24px}
.au-tabs{display:grid;grid-template-columns:1fr 1fr;margin:10px 18px 0}
.au-tabs a{text-align:center;font-size:24px;color:var(--brand);padding:8px 0 12px;border-bottom:3px solid transparent}
.au-tabs a.on{font-weight:700;border-color:var(--brand)}
.au-form{display:flex;flex-direction:column;gap:12px;padding:18px 18px 30px}
.au-h{font-size:22px;color:var(--text)}
.au-sub{color:var(--muted);font-size:14px;line-height:1.5;margin-top:-4px}
.au-sub b{color:var(--text)}
.au-cc{display:flex;align-items:center;gap:8px;font-size:15px}
.au-cc .flg{width:26px;height:18px;border-radius:2px}
.au-link{color:var(--brand);font-weight:500;display:inline-flex;align-items:center;gap:2px}
.au-link svg{width:16px;height:16px}
.au-link.center{justify-content:center;margin-top:4px}
.au-group{display:flex;flex-direction:column}
.au-group .au-field+.au-field{margin-top:-1px}
.au-field{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #c9ccd1;border-radius:3px;min-height:52px}
.au-field:focus-within{border-color:var(--brand);z-index:1}
.au-field input{border:0;background:transparent;font-size:16px;padding:14px 12px;height:50px}
.au-field input[readonly]{color:var(--muted)}
.au-dial{padding-left:12px;font-size:16px;color:var(--text)}
.au-phone input{padding-left:8px}
.au-eye{padding:0 12px;color:#9aa0a8;height:50px}
.au-rules{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:12.5px;color:var(--muted);margin-top:-4px}
.au-rules li{display:flex;align-items:center;gap:5px}
.au-rules svg{width:15px;height:15px;stroke-width:2.6;color:#c3c7cd;transition:color .2s}
.au-rules li.ok{color:var(--brand)}
.au-rules li.ok svg{color:var(--brand)}
.au-err{background:#fdecef;color:#b3112e;border-radius:3px;padding:9px 11px;font-size:13px;line-height:1.45}
.au-err a{color:inherit;font-weight:700;text-decoration:underline}
.au-check{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#5d636b;line-height:1.45;cursor:pointer}
.au-check input{width:18px;height:18px;flex:none;accent-color:var(--brand);margin-top:1px;padding:0}
.au-check a{color:var(--brand)}
.au-check.sm{font-size:14px;color:var(--muted);align-items:center}
.au-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.au-row.links a{color:var(--brand);font-size:15px}
.au-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border-radius:4px;background:var(--brand);color:#fff;font-size:17px;font-weight:500;text-align:center;transition:background .15s,opacity .15s}
.au-btn:hover{background:var(--brand-dark)}
.au-btn:disabled{background:#dcdee3;color:#8e939b;cursor:not-allowed}
.au-btn.loading:disabled{background:var(--brand);color:#fff;opacity:.85;cursor:wait}
.au-btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.au-alt{text-align:center;color:var(--muted);font-size:14px}
.au-alt a{color:var(--brand);font-weight:500}
.au-lic{text-align:center;color:var(--muted);font-size:12px}
.au-lic b{display:inline-block;border:1.5px solid currentColor;border-radius:50%;width:24px;height:24px;line-height:21px;font-size:10px;margin-right:4px}
.au-why{display:flex;align-items:center;gap:7px;background:#fff8e1;color:#7a5a00;padding:9px 11px;border-radius:3px;font-weight:500}
.au-why svg{width:17px;height:17px}
.au-bonus{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#0a7d3e,#0d9a4c);color:#fff;border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.4}
.au-bonus svg{width:28px;height:28px;color:var(--gold);flex:none}
.au-bonus b{color:var(--gold)}
.au-bonus.big span{display:flex;flex-direction:column;gap:2px;text-align:left}
.au-ref summary{color:var(--brand);font-size:14px;cursor:pointer;list-style:none}
.au-ref summary::-webkit-details-marker{display:none}
.au-ref[open] summary{margin-bottom:8px}
.au-otp{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.au-otp input{height:56px;text-align:center;font-size:24px;font-weight:700;padding:0;border:1px solid #c9ccd1;border-radius:4px;background:#fff}
.au-otp input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,125,62,.12)}
.au-otp input.bad,input.bad{border-color:var(--live)!important;animation:auShake .4s}
@keyframes auShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.au-resend{text-align:center;color:var(--muted);font-size:14px}
.au-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 20px 36px;text-align:center}
.au-done h2{font-size:22px}
.au-done p{color:var(--muted);font-size:14px}
.au-tick{width:72px;height:72px;border-radius:50%;background:var(--brand);display:grid;place-items:center;color:#fff;animation:auPop .45s cubic-bezier(.2,1.4,.4,1)}
.au-tick svg{width:40px;height:40px;stroke-width:2.6}
.au-tick.fail{background:var(--live)}
.au-tick.pend{background:#f0a400}
@keyframes auPop{from{transform:scale(.4);opacity:0}}
.wl-demo{font-size:11.5px;color:#8a8f97;line-height:1.45;background:#f1f2f4;border-radius:3px;padding:7px 9px}
.wl-demo b{background:#8a8f97;color:#fff;border-radius:2px;padding:0 4px;font-size:10px;margin-right:3px}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:6px}
.spin.big{width:44px;height:44px;border-width:3px;color:var(--brand);margin:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- wallet ---------- */
.wl-head{display:flex;align-items:center;gap:6px;height:52px;padding:0 6px;background:var(--live);color:#fff;position:sticky;top:0;z-index:8}
.wl-head h1{flex:1;font-size:20px;font-weight:400;margin-left:4px}
.wl-head svg{width:24px;height:24px}
@media (min-width:1024px){ .wl-head{position:static} }
.wl-tabs{display:flex;background:#f8f8f9;border-bottom:1px solid #e3e5e8;overflow-x:auto;scrollbar-width:none;position:sticky;top:52px;z-index:7}
.wl-tabs::-webkit-scrollbar{display:none}
.wl-tabs a{flex:1 0 auto;min-width:88px;text-align:center;padding:14px 12px;font-size:15px;color:#353a45;border-bottom:3px solid transparent;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:5px}
.wl-tabs a.on{font-weight:700;border-color:var(--brand)}
.wl-tabs em{font-style:normal;background:#33e06b;color:#0b2a14;font-size:10px;font-weight:700;padding:1px 4px;border-radius:2px}
@media (min-width:1024px){ .wl-tabs{top:0;position:static} }
.wl-body{display:flex;flex-direction:column;gap:12px;padding:16px}
.wl-form{display:flex;flex-direction:column;gap:12px}
.wl-p{font-size:14px;line-height:1.5;color:#4a4f57}
.wl-small{font-size:12px;color:var(--muted);margin-top:-6px}
.wl-lbl{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#5d636b;font-weight:500}
.wl-lbl input,.wl-lbl select{height:48px;font-size:16px;border-color:#c9ccd1}
.wl-row{display:flex;justify-content:space-between;align-items:center}
.wl-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wl-bal{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e3e5e8;border-radius:4px;padding:12px;font-size:14px;color:#5d636b}
.wl-bal b{font-size:17px;color:var(--text)}
.wl-amt{display:flex;flex-direction:column;gap:8px}
.wl-amt-in{display:flex;align-items:center;background:#fff;border:1px solid #c9ccd1;border-radius:4px;height:52px;padding-left:12px}
.wl-amt-in:focus-within{border-color:var(--brand)}
.wl-amt-in span{font-size:18px;color:var(--muted)}
.wl-amt-in input{border:0;font-size:20px;font-weight:700;height:50px;padding-left:6px}
.wl-clear{padding:0 12px;color:#9aa0a8;height:50px}
.wl-clear svg{width:18px;height:18px}
.wl-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:8px}
.wl-chips button{height:40px;border:1px solid #c9ccd1;border-radius:4px;background:#fff;font-size:15px;font-weight:500;color:#353a45}
.wl-chips button:active{background:#e8f4ec;border-color:var(--brand)}
.wl-hint{font-size:12.5px;min-height:16px;margin-top:-2px;color:var(--muted)}
.wl-hint.bad{color:var(--live)}
.wl-hint.good{color:var(--brand);font-weight:600}
.wl-rules{font-size:12.5px;color:#7d838c;line-height:1.55;padding-left:18px;display:flex;flex-direction:column;gap:2px}
.wl-secure{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.wl-secure svg{width:15px;height:15px}
.wl-note,.wl-verify{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e3e5e8;border-left:3px solid var(--brand);border-radius:4px;padding:10px 12px;font-size:13px;line-height:1.45;color:#4a4f57}
.wl-note svg,.wl-verify>svg:first-child{width:22px;height:22px;color:var(--brand)}
.wl-note a{color:var(--brand);font-weight:600}
.wl-verify{border-left-color:#f0a400;background:#fffaf0}
.wl-verify>svg:first-child{color:#c98500}
.wl-verify span{flex:1;display:flex;flex-direction:column;gap:2px}
.wl-verify b{color:var(--text)}
.wl-tag{font-style:normal;font-size:9.5px;font-weight:700;background:#8a8f97;color:#fff;border-radius:2px;padding:1px 4px;vertical-align:2px}
.wl-copy{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--brand);color:var(--brand);border-radius:3px;padding:5px 9px;font-size:12.5px;font-weight:600;background:#fff;vertical-align:middle}
.wl-copy svg{width:15px;height:15px}
/* card */
.wl-card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #e3e5e8;border-radius:4px;padding:12px}
.wl-in{position:relative}
.wl-in em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:800;font-size:12px;color:#1a1f71}
.wl-opts{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e5e8;border-radius:4px}
.wl-opt{display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid #eef0f2;cursor:pointer}
.wl-opt:last-child{border-bottom:0}
.wl-opt input{width:18px;height:18px;accent-color:var(--brand);flex:none;padding:0}
.wl-opt-i{width:34px;height:34px;border-radius:50%;background:#e8f4ec;color:var(--brand);display:grid;place-items:center;flex:none}
.wl-opt>span:nth-of-type(2){flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wl-opt small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-del{color:#9aa0a8;padding:6px}
.wl-add{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;border:1px dashed var(--brand);border-radius:4px;color:var(--brand);font-weight:600;background:#fff}
/* virtual account / ussd */
.wl-va,.wl-ussd{background:#fff;border:1px solid #e3e5e8;border-radius:6px;padding:4px 14px}
.wl-va>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:10px 0;border-bottom:1px solid #eef0f2}
.wl-va>div:last-child{border-bottom:0}
.wl-va span{width:100%;font-size:12px;color:var(--muted)}
.wl-va b{font-size:15px}
.wl-va b.big{font-size:24px;letter-spacing:1px;flex:1}
.wl-sim{border-top:1px dashed #d3d7dc;padding-top:12px;display:flex;flex-direction:column;gap:10px}
.wl-ussd{display:flex;flex-direction:column;gap:10px;padding:14px;text-align:center}
.wl-ussd>span{font-size:13px;color:var(--muted)}
.wl-ussd>b{font-size:24px;letter-spacing:.5px;color:var(--brand);word-break:break-all}
.wl-ussd small{color:var(--muted)}
.wl-ussd .wl-copy{height:40px}
/* wallets + mobile money */
.wl-brand{display:flex;flex-direction:column;gap:2px;background:var(--bc);color:#fff;border-radius:6px;padding:14px}
.wl-brand b{font-size:20px}
.wl-brand span{font-size:13px;opacity:.92}
.wl-mm{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wl-mmo{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1.5px solid #e3e5e8;border-radius:6px;padding:10px 4px;cursor:pointer;text-align:center}
.wl-mmo{position:relative}
.wl-mmo input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;top:0;left:0;padding:0}
.wl-mmo:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 2px rgba(10,125,62,.15)}
.wl-mmo:has(input:focus-visible){outline:2px solid var(--brand)}
.wl-mm-logo{width:44px;height:44px;border-radius:50%;background:var(--bc);color:var(--bi);display:grid;place-items:center;font-weight:800;font-size:11.5px}
.wl-mmo small{font-size:11.5px;color:#4a4f57;line-height:1.2}
.wl-phone-anim{width:76px;height:76px;border-radius:50%;background:var(--bc);display:grid;place-items:center;color:#fff;animation:wlPulse 1.4s ease-in-out infinite}
.wl-phone-anim svg{width:38px;height:38px}
@keyframes wlPulse{50%{box-shadow:0 0 0 14px rgba(0,0,0,.06)}}
.wl-count{font-size:14px}
/* step accordions */
.wl-acc{display:flex;flex-direction:column;background:#fff;border:1px solid #e3e5e8;border-radius:4px}
.wl-step{border-bottom:1px solid #eef0f2}
.wl-step:last-child{border-bottom:0}
.wl-step summary{display:flex;align-items:center;gap:10px;padding:12px;font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.wl-step summary::-webkit-details-marker{display:none}
.wl-step summary svg{margin-left:auto;color:#9aa0a8;transition:transform .2s}
.wl-step[open] summary svg{transform:rotate(90deg)}
.wl-logo{width:34px;height:34px;border-radius:50%;background:#e8f4ec;color:var(--brand);display:grid;place-items:center;font-size:11px;font-weight:800;flex:none}
.wl-step ol{padding:0 14px 14px 36px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5;color:#4a4f57}
.wl-step ol .wl-copy{padding:2px 7px;margin-left:4px}
/* withdraw */
.wl-lockbox{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:#fff;border:1px solid #e3e5e8;border-radius:6px;padding:24px 16px}
.wl-lockbox>svg{width:44px;height:44px;color:var(--brand)}
.wl-lockbox h3{font-size:18px}
.wl-lockbox p{color:#5d636b;font-size:14px;line-height:1.5}
.wl-resolve{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);min-height:0}
.wl-resolve:empty{display:none}
.wl-resolve.ok{color:var(--brand)}
.wl-resolve.ok svg{width:17px;height:17px;stroke-width:2.6}
.wl-resolve.bad{color:var(--live)}
.wl-resolve small{width:100%;color:var(--muted)}
/* bottom sheet */
.wl-sheet{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.wl-sheet.open{opacity:1;pointer-events:auto}
.wl-sheet-card{width:100%;max-width:480px;max-height:92vh;overflow:auto;background:#fff;border-radius:12px 12px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;transform:translateY(30px);transition:transform .25s var(--out,ease)}
.wl-sheet.open .wl-sheet-card{transform:none}
@media (min-width:768px){ .wl-sheet{align-items:center} .wl-sheet-card{border-radius:10px} }
.wl-sheet-card h3{font-size:18px;text-align:center}
.wl-sheet-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.wl-sheet-btns.col{grid-template-columns:1fr}
.wl-sheet-btns:has(>:only-child){grid-template-columns:1fr}
.wl-dl{display:flex;flex-direction:column;background:#f6f7f8;border-radius:6px;padding:4px 12px}
.wl-dl>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #e8eaed;font-size:14px}
.wl-dl>div:last-child{border-bottom:0}
.wl-dl dt{color:var(--muted);flex:none}
.wl-dl dd{text-align:right;word-break:break-word}
.wl-dl dd small{color:var(--muted)}
.wl-proc,.wl-res{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:8px 0}
.wl-proc p{color:#5d636b;font-size:14px;line-height:1.5}
.wl-res .wl-dl{width:100%}
.wl-res-amt{font-size:28px}
.wl-res .wl-sheet-btns,.wl-proc .wl-sheet-btns{width:100%}
/* transaction status */
.tx-st{font-style:normal;font-size:10.5px;font-weight:700;border-radius:2px;padding:1px 5px;vertical-align:1px;margin-left:4px;background:#e2f3e8;color:#0a7d3e}
.tx-st.pending{background:#fff1d6;color:#9a6400}
.tx-st.failed{background:#fde4e8;color:#b3112e}
.tx-ref{display:block;color:var(--muted);font-size:11px}
@media (max-width:1023px){
  body[data-page="register"] .betslip,body[data-page="login"] .betslip,body[data-page="forgot"] .betslip,
  body[data-page="deposit"] .betslip,body[data-page="withdraw"] .betslip{display:none}
}
/* the wrapper shows focus, so the inner input doesn't need its own ring */
.au-field input:focus,.au-field input:focus-visible,.wl-amt-in input:focus,.wl-amt-in input:focus-visible{outline:none;box-shadow:none}

/* =========================================================
   v12 – reference-style inner pages (pages.js)
   ========================================================= */
/* brand header for inner pages; the site top bar hides on phones like the reference */
.pg-head{display:flex;align-items:center;gap:4px;height:48px;padding:0 6px;background:var(--brand);color:#fff;position:sticky;top:0;z-index:20}
.pg-head h1{flex:1;min-width:0;font-size:20px;font-weight:400;margin-left:4px;display:flex;flex-direction:column;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-head h1 small{font-size:11px;opacity:.8;font-weight:400}
.pg-head svg{width:24px;height:24px}
.pg-head .icon-btn{color:#fff}
.pg-head.dark{background:transparent;position:relative}
.pg-act{display:flex;align-items:center;gap:2px}
.pg-txt{color:#fff;font-size:15px;padding:0 8px}
.wl-head{background:var(--brand)}
@media (max-width:1023px){
  body[data-page="live"] .topbar,body[data-page="sports"] .topbar,body[data-page="list"] .topbar,body[data-page="league"] .topbar,
  body[data-page="jackpot"] .topbar,body[data-page="promos"] .topbar,body[data-page="promo"] .topbar,body[data-page="results"] .topbar,
  body[data-page="codes"] .topbar,body[data-page="bet"] .topbar{display:none}
}
@media (min-width:1024px){ .pg-head{position:static} .pg-head [data-back]{visibility:hidden;width:8px} }
.pg-root{min-height:60vh;background:#fff}
.pg-dark .pg-root{background:#1d2127;color:#e9ebee}
.pg-tabs{display:flex;background:#fff;border-bottom:1px solid #e3e6ea}
.pg-tabs>*{flex:1;text-align:center;padding:12px 6px;font-size:15px;color:#7d838c;position:relative;white-space:nowrap}
.pg-tabs .on{color:#1c1f23;font-weight:700}
.pg-tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand)}
.pg-tabs.sm>*{flex:0 0 auto;padding:12px 12px;font-size:16px}
.pg-tabs.dark{background:#262a31;border-color:#2f343c}
.pg-tabs.dark>*{color:#c3c7cd}
.pg-tabs.dark .on{color:#fff}
.pg-sticky{position:sticky;top:48px;z-index:6;background:#1d2127}
.pg-sticky.light{background:#fff}
@media (min-width:1024px){ .pg-sticky{top:96px} }
.pg-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center;color:#7d838c;font-size:14px}
.pg-empty>svg{width:40px;height:40px;color:#b8bdc4}
.pg-empty b{color:#1c1f23;font-size:16px}
.pg-empty .au-btn{width:auto;padding:0 22px;min-height:42px;font-size:15px;margin-top:6px}
.pg-empty.dark b{color:#fff}
.pg-foot-note{text-align:center;color:#9aa0a8;font-size:12px;padding:14px}
.tri{width:14px!important;height:14px!important;transition:transform .2s;flex:none}

/* sport icon tabs (live + sports filter) */
.sp-tabs{display:flex;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid #e3e6ea}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tabs button{position:relative;flex:0 0 auto;min-width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 9px;font-size:13.5px;color:#3a3f45;border-bottom:3px solid transparent}
.sp-tabs button svg{width:24px;height:24px}
.sp-tabs button span{line-height:1.1;text-align:center;max-width:72px}
.sp-tabs button.on{border-color:var(--brand);color:#1c1f23;font-weight:500}
.sp-tabs i{position:absolute;top:3px;left:50%;margin-left:6px;font-style:normal;font-size:10px;font-weight:700;background:#0d9737;color:#fff;border-radius:7px;padding:0 4px;line-height:14px}
.sp-tabs.dark{background:#1d2127;border-color:#2c3138}
.sp-tabs.dark button{color:#e6e8eb}
.sp-tabs.dark button.on{color:#fff;border-color:#2ed16b}

/* live */
.pg-live{margin-top:0}
.lv-tool{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #2c3138}
.lv-tool button{display:flex;align-items:center;gap:6px;color:#e6e8eb;font-size:14px}
.lv-tool button .tri,.lv-lg .tri,.el-lg .tri,.rs-lg .tri{color:#2ed16b}
.lv-tool label{display:flex;align-items:center;gap:8px;color:#9aa0a8;font-size:14px}
.lv-tool select{width:auto;height:32px;padding:0 28px 0 10px;background:#fff;color:#1c1f23;border-radius:2px;font-size:14px}
.lv-lg{display:flex;align-items:center;gap:8px;width:100%;padding:12px;color:#fff;font-size:15px;font-weight:500;text-align:left;border-bottom:1px solid #2c3138}
.lv-lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-lg em,.el-lg em,.rs-lg em{font-style:normal;color:#9aa0a8;font-size:13px;font-weight:400}
.lv-grp.shut .lv-rows,.el-grp.shut .el-rows{display:none}
.lv-grp.shut .tri,.el-grp.shut .tri,.rs-grp:not(.open) .tri{transform:rotate(-90deg)}

/* sports filter */
.sf-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-bottom:8px solid #f2f3f5}
.sf-quick a{border:1px solid #e3e6ea;border-radius:3px;padding:12px 10px;font-size:15px;color:#1c1f23;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-sec{border-bottom:8px solid #f2f3f5}
.sf-chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:14px 12px}
.sf-chips::-webkit-scrollbar{display:none}
.sf-chips button{flex:0 0 auto;min-width:108px;height:36px;padding:0 12px;border:1px solid var(--brand);border-radius:3px;color:var(--brand);font-size:14px;font-weight:500}
.sf-chips button.on{background:var(--brand);color:#fff}
.sf-list{padding:2px 0 80px}
.sf-row{display:flex;align-items:center;gap:10px;padding:11px 12px 11px 20px;font-size:14px;color:#3a3f45;cursor:pointer;width:100%;text-align:left}
.sf-row span{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sf-row em{font-style:normal;color:#7d838c;font-size:13px}
.sf-row input{width:18px;height:18px;padding:0;accent-color:var(--brand);flex:none}
.sf-row.head{padding-left:12px;font-weight:500;color:#1c1f23;border-bottom:1px solid #f0f1f3}
.sf-row.head>svg:last-child{width:18px;height:18px;color:#9aa0a8;transition:transform .2s}
.sf-ctry.open .sf-row.head>svg:last-child{transform:rotate(180deg)}
.sf-sub{display:none;background:#fafbfc}
.sf-ctry.open .sf-sub{display:block}
.sf-foot{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e3e6ea;z-index:5}
@media (max-width:1023px){ body[data-page="sports"] .sf-foot{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))} }

/* event list / league */
.el-live{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;background:#1d2127;color:#fff;font-size:17px}
.el-live em{font-style:normal;font-size:14px;color:#2ed16b;background:#2c333b;border-radius:3px;padding:1px 6px}
.el-live svg{width:18px;height:18px}
.el-filters{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #e3e6ea;background:#fff}
.el-filters label{position:relative;border-right:1px solid #eef0f2}
.el-filters label:last-child{border-right:0}
.el-filters select{border:0;border-radius:0;height:44px;padding:0 22px 0 10px;font-size:15px;font-weight:500;color:#1c1f23;background:#fff;appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.el-filters label::after{content:"";position:absolute;right:9px;top:19px;border:5px solid transparent;border-top-color:#7d838c;pointer-events:none}
.el-filters label.on select{color:var(--brand)}
.el-lg{display:flex;align-items:center;gap:8px;width:100%;padding:12px;font-size:15px;font-weight:500;color:#1c1f23;text-align:left;border-bottom:1px solid #eef0f2;background:#fff}
.el-lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.el-lg .tri{color:var(--brand)!important}
.el-lg .flg{width:18px;height:12px}
.out-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f0f1f3;font-size:15px}
.out-row span{flex:1}
.out-row .odd{width:var(--ow);height:37px;flex:none}

/* jackpot */
.jp-hero{background-size:cover;background-position:center;color:#fff;padding-bottom:16px}
.jp-prize{padding:6px 22px 10px}
.jp-prize p{font-size:17px;font-weight:700}
.jp-prize h2{font-size:30px;color:var(--gold);font-weight:500;letter-spacing:.3px;margin:2px 0}
.jp-prize small{color:#36d26e;font-size:12px;font-weight:600}
.jp-cd{display:flex;gap:12px;padding:6px 22px 0}
.jp-cd div{display:flex;flex-direction:column;align-items:center;gap:4px}
.jp-cd small{font-size:11px;color:#c3c7cd}
.jp-cd b{min-width:44px;height:44px;display:grid;place-items:center;background:rgba(255,255,255,.16);border-radius:4px;font-size:26px;font-weight:400;position:relative}
.jp-cd b::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.35)}
.jp-round{background:#3a3f48;color:#c3c7cd;text-align:center;padding:5px;font-size:14px}
.jp-th{display:grid;grid-template-columns:1fr repeat(3,68px);gap:2px;padding:8px 12px 6px 36px;font-size:13px;color:#e6e8eb}
.jp-th span:not(:first-child){text-align:center}
.jp-r{display:grid;grid-template-columns:24px 1fr repeat(3,68px);gap:2px;align-items:center;padding:8px 12px;border-bottom:1px solid #2c3138}
.jp-r .n{font-weight:400;color:#e6e8eb;align-self:start;padding-top:2px}
.jp-m{display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:700;color:#fff;line-height:1.35}
.jp-m small{font-weight:400;color:#c3c7cd;font-size:13px}
.jp-m span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jp-o{height:38px;border-radius:2px;background:#2f343c;color:#36d26e;font-weight:700;font-size:14px}
.jp-o.on{background:var(--brand);color:#fff}
.jp-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#262a31;border-top:1px solid #353a43;color:#e6e8eb;font-size:14px}
@media (max-width:1023px){ body[data-page="jackpot"] .jp-bar{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))} }
.jp-bar>div{flex:1;display:flex;flex-direction:column;min-width:0}
.jp-bar>div small{color:#9aa0a8;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jp-bar .au-btn{width:auto;min-height:40px;padding:0 14px;font-size:15px}
.jp-tool{color:#2ed16b;font-size:13px;font-weight:600;padding:6px 4px}
.jp-past{margin:12px;border:1px solid #2f343c;border-radius:6px;overflow:hidden}
.jp-past-h{display:flex;justify-content:space-between;padding:10px 12px;background:#262a31}
.jp-past-h span{color:var(--gold);font-weight:700}
.jp-tiers{display:grid;grid-template-columns:repeat(3,1fr)}
.jp-tiers div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;font-size:13px;border-right:1px solid #2f343c}
.jp-tiers div:last-child{border-right:0}
.jp-tiers span{color:#9aa0a8}
.jp-tiers small{color:#36d26e}
.jp-tk{padding:10px 12px;font-size:13px;color:#c3c7cd}
.jp-tk em{color:var(--gold);font-style:normal}
.jp-how{padding:6px 12px 20px}
.jp-how .how-step strong{color:#fff}
.jp-how .how-step p{color:#c3c7cd}

/* promotions */
.pr-list{display:flex;flex-direction:column;gap:14px;padding:14px 16px 24px;background:#fff}
.pr-card{display:block;border-radius:2px;overflow:hidden;background:#000;color:#fff}
.pr-img{display:flex;align-items:flex-end;aspect-ratio:356/112;background-size:cover;background-position:center;padding:10px 14px}
.pr-img b{font-family:Kanit,Roboto,sans-serif;font-style:italic;font-weight:800;font-size:22px;line-height:1.05;max-width:62%;text-shadow:0 2px 8px rgba(0,0,0,.6);text-transform:uppercase}
.pr-img[style*="background-image"] b{visibility:hidden}
.pr-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 2px;font-size:18px}
.pr-cap svg{width:24px;height:24px;flex:none}
.pr-card small{display:block;padding:0 18px 12px;color:#b8bdc4;font-size:12.5px}
.pr-img.big{aspect-ratio:390/150;border-radius:0}
.pr-detail{display:flex;flex-direction:column;gap:10px;padding:16px 16px 28px;font-size:14.5px;line-height:1.55;color:#3a3f45}
.pr-detail h2{font-size:20px;color:#1c1f23}
.pr-detail small{color:#9aa0a8}
.pr-detail h3{font-size:15px;color:#1c1f23;margin-top:6px}
.pr-detail ol,.pr-detail ul{padding-left:20px;display:flex;flex-direction:column;gap:4px}
.pr-detail a:not(.au-btn){color:var(--brand)}
.pr-detail .au-btn{margin-top:8px}

/* results */
.rs-date{display:grid;grid-template-columns:76px 1fr 76px;gap:4px;padding:8px 12px}
.rs-date>*{height:38px;display:grid;place-items:center;background:var(--brand);color:#fff;border-radius:2px;font-size:17px}
.rs-date button:disabled{opacity:.45}
.rs-date svg{width:22px;height:22px}
.rs-crumb{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 12px 10px;padding:10px;background:#f2f3f5;font-size:13.5px;color:#3a3f45}
.rs-crumb button{color:var(--brand);font-weight:700}
.rs-pick{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 12px}
.rs-pick button{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #d3d7dc;border-radius:16px;font-size:13px}
.rs-pick button svg{width:16px;height:16px}
.rs-pick button.on{border-color:var(--brand);color:var(--brand);font-weight:700}
.rs-list{display:flex;flex-direction:column;gap:6px;padding:0 12px 24px}
.rs-lg{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;background:#353a43;color:#fff;font-size:13.5px;text-align:left}
.rs-lg span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-rows{display:none;border:1px solid #e3e6ea;border-top:0}
.rs-grp.open .rs-rows{display:block}
.rs-row{display:grid;grid-template-columns:42px 1fr 50px 1fr;align-items:center;gap:6px;padding:10px 8px;border-bottom:1px solid #f0f1f3;font-size:14px}
.rs-row:last-child{border-bottom:0}
.rs-row small{color:#9aa0a8;font-size:12px}
.rs-row .h{text-align:right}
.rs-row b{text-align:center;background:#f2f3f5;border-radius:2px;padding:3px 0}
.rs-row .ht{grid-column:3;text-align:center;font-size:11px;margin-top:-6px}

/* code hub */
.ch-load{padding:12px 16px 4px;background:#fff}
.ch-load p{font-size:16px;color:#3a3f45;margin-bottom:10px}
.ch-in{display:flex;border:1px solid #d3d7dc;border-radius:3px;overflow:hidden}
.ch-in input{border:0;height:42px;font-size:15px}
.ch-in .au-btn{width:auto;min-height:42px;border-radius:0;padding:0 18px;font-size:16px}
.ch-chips{display:flex;gap:8px;padding:12px 16px;background:#fff;border-bottom:8px solid #f2f3f5}
.ch-chips button{padding:6px 18px;border-radius:18px;background:#f2f3f5;font-size:15px;color:#3a3f45}
.ch-chips button.on{background:#e3f3e8;color:var(--brand);border:1px solid var(--brand)}
.ch-feed{display:flex;flex-direction:column;gap:8px;background:#f2f3f5;padding-bottom:20px}
.ch-card{background:#fff;padding:12px 16px}
.ch-user{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ch-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:hsl(var(--h) 45% 40%);color:#fff;font-weight:700;flex:none}
.ch-user b{font-size:15px}
.ch-user small{flex:1;color:#9aa0a8;font-size:13px}
.ch-follow{background:var(--brand);color:#fff;border-radius:3px;padding:7px 14px;font-size:14px;font-weight:500}
.ch-follow.on{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.ch-code{display:flex;align-items:center;gap:14px;background:#e3f3e8;border:1px solid #c5e4cf;padding:8px 10px;font-size:13px;color:#7d838c}
.ch-code>b:first-child{font-size:17px;color:#1c1f23;letter-spacing:.5px;margin-right:auto}
.ch-code span{display:flex;align-items:center;gap:4px}
.ch-code span b{color:#1c1f23;font-size:15px}
.ch-code svg{width:16px;height:16px;color:var(--brand)}
.ch-legs{list-style:none;border:1px solid #e3e6ea;border-top:0}
.ch-legs li{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-bottom:1px solid #f0f1f3;font-size:13.5px}
.ch-legs li:last-child{border-bottom:0}
.ch-legs a{display:flex;flex-direction:column;min-width:0}
.ch-legs a b{font-weight:500;color:#1c1f23}
.ch-legs a .muted{font-weight:400}
.ch-legs small{color:#3a3f45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-legs small i{color:#9aa0a8;font-style:normal}
.ch-when{color:#9aa0a8;font-size:12px;white-space:nowrap;align-self:flex-end}
.ch-act{display:grid;grid-template-columns:1fr 1.5fr;margin-top:0}
.ch-act button{height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:500;color:var(--brand);background:#f2f3f5}
.ch-act button svg{width:18px;height:18px}
.ch-act button.go{background:var(--brand);color:#fff}

/* bet detail */
.bd-top{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px 16px;background:#1d2127;color:#fff}
.bd-top b{font-size:28px}
.bd-top small{color:#9aa0a8}
.bd-dl{margin:12px}
.bd-dl dd{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.bd-copy svg{width:16px;height:16px;color:var(--brand)}
.bd-h{font-size:15px;padding:4px 12px 8px}
.bd-legs{margin:0 12px;border:1px solid #e3e6ea;border-radius:6px;overflow:hidden}
.bd-leg{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid #f0f1f3;align-items:flex-start}
.bd-leg:last-child{border-bottom:0}
.bd-leg>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13.5px}
.bd-leg>div small{color:#7d838c}
.bd-leg>div em{font-style:normal;color:#7d838c;font-size:12.5px}
.bd-leg .live-t{color:var(--live);font-style:normal;font-weight:700}
.bd-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:none;background:#c3c7cd}
.bd-dot.won{background:var(--up)}
.bd-dot.lost{background:var(--live)}
.bd-dot.void{background:#9aa0a8}
.bd-dot.live{background:#f0a400;animation:wlPulse 1.4s infinite}
.bd-odd{display:flex;flex-direction:column;align-items:flex-end;font-weight:700;font-size:15px}
.bd-odd small{font-weight:600;font-size:10.5px;color:#9aa0a8}
.bd-act{display:flex;flex-direction:column;gap:10px;padding:16px 12px 28px}
.bd-act .au-btn svg{width:18px;height:18px}
.au-btn.gold{background:var(--gold);color:var(--gold-ink)}
.bet-card .bh{color:inherit}

/* home: Highlights / Today / Countries + sticky section heads like the reference */
.sports-block .filter-bar{display:flex;gap:0;padding:0;border-bottom:1px solid #e3e6ea;background:#fff}
.sports-block .filter-bar button{flex:1;border:0;border-radius:0;padding:12px 6px;font-size:16px;color:#7d838c;background:none;position:relative}
.sports-block .filter-bar button.active{color:#1c1f23;font-weight:700;background:none}
.sports-block .filter-bar button.active::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;background:var(--brand)}
.sports-block .filter-bar .chip-x{flex:0 0 auto;margin:6px 8px;padding:4px 10px;border:1px solid var(--brand);border-radius:14px;color:var(--brand);font-size:13px}
@media (max-width:1023px){
  .live-block>.sec-head,.sports-block>.sec-head{position:sticky;top:var(--top-h);z-index:7}
  .live-block>.mkt-tabs,.sports-block>.mkt-tabs{position:sticky;top:calc(var(--top-h) + 46px);z-index:7}
}
/* v12 fixes after side-by-side review */
body[data-page="sports"] .slip-pill,body[data-page="jackpot"] .slip-pill,body[data-page="codes"] .slip-pill.empty{display:none!important}
.pg-live>.pg-sticky{top:48px}
.jp-bar>div>span{white-space:nowrap}
.pg-tabs.dark>*{font-size:14px;padding:12px 4px}
#page-jackpot .pg-head.dark{position:sticky;top:0;z-index:20;transition:background .2s}
#page-jackpot .pg-head.dark.solid{background:var(--brand)}
.jp-hero{background-blend-mode:normal}
.ch-pick{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-row small{font-size:12px;margin-left:2px}
@media (min-width:1024px){ #page-jackpot .pg-head.dark{position:relative} }
.jp-hero{margin-top:-48px;padding-top:48px}

/* =========================================================
   v13 – Me page header like the reference + theme toggle
   ========================================================= */
.me-top{display:flex;align-items:center;flex-wrap:wrap}
.me-top .me-user{flex:1;min-width:0}
.me-theme{display:flex;align-items:center;gap:6px;color:#fff;font-size:14px;margin-left:auto;padding:6px 0}
.me-theme svg{width:20px;height:20px}
.me-sub{order:3;width:100%}
@media (max-width:1023px){ body[data-page="me"] .topbar{display:none} }
html[data-theme="dark"] .sp-tabs:not(.dark){background:#1d2127;border-color:#2c3138}
html[data-theme="dark"] .sp-tabs:not(.dark) button{color:#c9cdd2}
html[data-theme="dark"] .sp-tabs:not(.dark) button.on{color:#fff}
html[data-theme="dark"] .sf-chips button:not(.on){color:#4cd07d;border-color:#2a6a42}

/* =========================================================
   v14 – Instant Football + virtuals switch
   ========================================================= */
.v-switch{display:flex;background:#1d2127;border-bottom:1px solid #2c3138}
.v-switch a{flex:1;text-align:center;padding:12px 6px;color:#c3c7cd;font-size:15px;position:relative}
.v-switch a.on{color:#fff;font-weight:700}
.v-switch a.on::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:3px;background:#2ed16b}
.v-switch em,.vi-hero em{font-style:normal;background:#33e06b;color:#0b2a14;font-size:10px;font-weight:700;padding:1px 4px;border-radius:2px;vertical-align:2px}
@media (max-width:1023px){ body[data-page="instant"] .topbar{display:none} body[data-page="instant"] .slip-pill{display:none!important} }
.vi-hero{display:flex;flex-direction:column;gap:2px;padding:16px 16px 14px;background:linear-gradient(120deg,#7a0d1e,#c61b3a 55%,#e85a2a);color:#fff}
.vi-hero b{font-family:Kanit,Roboto,sans-serif;font-style:italic;font-weight:800;font-size:26px;letter-spacing:.5px}
.vi-hero span{font-size:13px;opacity:.9}
.vi-th{display:grid;grid-template-columns:1fr repeat(3,64px);gap:4px;padding:8px 12px;font-size:12.5px;color:#9aa0a8;background:#262a31}
.vi-th span:not(:first-child){text-align:center}
.vi-list{padding-bottom:210px}
.vi-r{display:grid;grid-template-columns:1fr auto repeat(1,auto);align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #2c3138}
.vi-r.won{background:linear-gradient(90deg,rgba(46,209,107,.16),transparent)}
.vi-r.lost{background:linear-gradient(90deg,rgba(229,22,58,.14),transparent)}
.vi-t{display:flex;flex-direction:column;font-size:14px;color:#eef0f2;min-width:0}
.vi-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vi-sc{display:flex;flex-direction:column;align-items:center;font-size:15px;color:#ffc20e;min-width:18px}
.vi-o{display:grid;grid-template-columns:repeat(3,64px);gap:4px}
.vi-o .jp-o{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;height:42px}
.vi-o .jp-o small{font-size:10px;color:#9aa0a8;font-weight:500}
.vi-o .jp-o.on small{color:#d6f5e1}
.vi-o .jp-o.res{box-shadow:inset 0 0 0 2px #ffc20e}
.vi-o .jp-o:disabled{cursor:default}
.vi-bar{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:30;display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#262a31;border-top:1px solid #353a43;color:#e6e8eb;max-width:100vw}
@media (min-width:1024px){ .vi-bar{position:sticky;bottom:0} }
.vi-type{display:grid;grid-template-columns:1fr 1fr;background:#1d2127;border-radius:3px;padding:2px}
.vi-type button{padding:7px;color:#9aa0a8;font-weight:600;border-radius:2px}
.vi-type button.on{background:#3a4049;color:#fff}
.vi-sum{display:flex;justify-content:space-between;font-size:13px;color:#c3c7cd}
.vi-sum b{color:#ffc20e}
.vi-stake{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.vi-stake label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#9aa0a8;white-space:nowrap;flex:none}
.vi-stake label span{color:#c3c7cd}
.vi-stake input{width:84px;height:34px;background:#1d2127;color:#fff;border-color:#3a4049;font-weight:700}
.vi-stake button{flex:none;height:30px;padding:0 9px;border:1px solid #3a4049;border-radius:3px;color:#c3c7cd;font-size:12.5px}
.vi-clock{display:flex;align-items:center;gap:12px;padding:6px 0}
.vi-clock b{font-size:30px;color:#2ed16b;min-width:60px;font-variant-numeric:tabular-nums}
.vi-res{display:flex;flex-direction:column;gap:2px}
.vi-res b{font-size:20px}
.vi-res.win b{color:#ffc20e}
.vi-res small{color:#9aa0a8}

/* =========================================================
   v15 – contrast (WCAG AA 4.5:1) – a touch darker green and greys on light
   surfaces, a touch lighter greys on dark ones
   ========================================================= */
:root{--g:#0a7f32;--g-ink:#086428;--muted:#6b717a;--mute:#6b717a}
.ev-meta,.ev-teams small,.day-sep .cols,.league-head .cols,.sf-row em,.pg-foot-note,.wl-rules,.wl-small,.wl-hint,.au-sub,.au-alt,.au-lic,.au-resend,.ch-user small,.ch-when,.rs-row small,.out-row small,.bd-leg>div small,.bd-leg>div em,.pr-detail small{color:#6b717a}
.sp-tabs i{background:#0a7f32}
.day-sep.dark,.day-sep.dark .cols,.live-block .ev-teams small,.live-block .ev-meta,.lv-tool label,.lv-lg em,.jp-bar>div small,.vi-th,.vi-sum,.jp-cd small,.bd-top small{color:#b4b9c0}
.pg-tabs>*:not(.on){color:#5f656d}
.pg-tabs.dark>*:not(.on){color:#c3c7cd}
.txt-tabs .active,.mkt-tabs button.active{color:#0a7f32}
.sec-head.dark .txt-tabs .active{color:#36d26e}
.live-block .ev-meta .ev-lg,.live-block .ev-meta>span,.pg-dark .ev-meta span:not(.lv-clock):not(.lv-half):not(.hot){color:#b4b9c0}
.sports-block .filter-bar button:not(.active),.pg-empty span,.ch-code span,.me-list .muted,.me-list em.muted,#meVer,.wl-demo{color:#5f656d}
.wl-demo b{background:#5f656d}
.pg-head h1 small{color:#f0f7f3;opacity:1}
.mh-id,.pg-empty.dark span{color:#b4b9c0}
.ch-legs small i{color:#6b717a}
#logoutBtn button span{color:#d01334}
.net-bar{position:fixed;left:0;right:0;top:0;z-index:200;background:#3a3f48;color:#fff;text-align:center;font-size:13px;padding:7px 12px calc(7px);transform:translateY(-100%);transition:transform .25s}
.net-bar.on{transform:none}
.net-bar.ok{background:var(--brand)}

/* =========================================================
   v16 – desktop: Over/Under 2.5 beside 1X2 (reference wide table)
   ========================================================= */
.ev-odds.ex,.cols.ex{display:none}
@media (min-width:1024px){
  .ev-odds.ex{display:grid;grid-template-columns:repeat(2,var(--ow));gap:var(--og);margin-left:10px}
  .cols.ex{display:grid;grid-template-columns:repeat(2,var(--ow));gap:var(--og);margin-left:10px;text-align:center}
  .day-sep,.league-head{gap:0}
  .desk-nav a{padding:9px 13px}
}
@media (min-width:1024px){
  .day-sep>span:first-child,.league-head .lh-name{flex:1;min-width:0}
}

/* =========================================================
   v17 – real flags (flag-icons) and crests: one size system
   flags 4:3, crests square boxes, same sizes on every page
   ========================================================= */
img.flg{display:inline-block;width:18px;height:13.5px;object-fit:cover;border-radius:2px;vertical-align:middle;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12);background:#e6e9ed}
svg.flg{width:18px;height:13.5px}
.lpill .flg,.el-lg .flg,.league-head .flg,.sf-row .flg,.left-rail .flg{width:18px;height:13.5px}
.cc-opt .f .flg{width:30px;height:22.5px}
.au-cc .flg{width:24px;height:18px}
.me-list .cc-flag .flg{width:22px;height:16.5px}
.crest.logo-img{object-fit:contain;background:none}
.crest.nation{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.15);background:#e6e9ed}
.crest.nation img{width:100%;height:100%;object-fit:cover}
.crest.nation:not(.big){width:16px;height:16px}
.crest.nation.big{width:44px;height:44px}
.tile-match .crest.nation.big{width:30px;height:30px}
.fc-team .crest.nation.big{width:36px;height:36px}
.crest-fb{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#3a4049;color:#fff;font:700 9px Roboto,sans-serif;width:16px;height:16px}
.crest-fb.big{width:40px;height:40px;font-size:13px}

/* =========================================================
   v18 – YOU WON trophy celebration
   ========================================================= */
.tr-ov{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(28px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background:radial-gradient(ellipse at 50% 46%,rgba(80,52,0,.55),rgba(8,9,12,.97) 62%);color:#fff;opacity:0;pointer-events:none;transition:opacity .3s}
.tr-ov.on{opacity:1;pointer-events:auto}
body.tr-lock{overflow:hidden}
.tr-x{position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;font-size:30px;color:#c3c7cd;width:40px;height:40px}
.tr-top{text-align:center;transform:translateY(-16px);opacity:0;transition:.5s .15s}
.tr-ov.on .tr-top{transform:none;opacity:1}
.tr-top h2{font:900 clamp(44px,13vw,64px)/1 Roboto,sans-serif;letter-spacing:1px;text-shadow:0 4px 18px rgba(0,0,0,.6)}
.tr-amt{display:block;margin-top:8px;font:900 clamp(26px,8vw,38px)/1.1 Roboto,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 3px 12px rgba(0,0,0,.6)}
.tr-stage{position:relative;width:min(78vw,340px);aspect-ratio:1;display:grid;place-items:center}
.tr-rays{position:absolute;inset:-18%;background:repeating-conic-gradient(from 0deg,rgba(255,214,106,.22) 0 7deg,transparent 7deg 22deg);border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:trSpin 14s linear infinite}
.tr-glow{position:absolute;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,170,.95),rgba(255,194,14,.45) 40%,transparent 70%);filter:blur(6px);animation:trPulse 2.2s ease-in-out infinite}
.tr-cup{position:relative;width:74%;filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));transform:scale(.4) translateY(40px);opacity:0;transition:transform .7s cubic-bezier(.2,1.5,.35,1) .1s,opacity .3s .1s}
.tr-ov.on .tr-cup{transform:none;opacity:1}
.tr-sp{position:absolute;width:10px;height:10px;background:#fff6d6;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:trTw 1.8s ease-in-out infinite}
.tr-sp.s1{top:12%;left:20%}.tr-sp.s2{top:18%;right:16%;animation-delay:.4s;width:14px;height:14px}.tr-sp.s3{top:50%;left:6%;animation-delay:.9s}.tr-sp.s4{top:58%;right:8%;animation-delay:1.3s;width:12px;height:12px}.tr-sp.s5{top:4%;left:52%;animation-delay:.6s}
.tr-src{color:#e6e8eb;font-size:15px;text-align:center}
.tr-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:440px}
.tr-btn{display:grid;place-items:center;height:54px;border-radius:4px;background:#2ed16b;color:#0b2a14;font:700 19px Roboto,sans-serif}
.tr-btn.ghost{background:transparent;border:2px solid #2ed16b;color:#2ed16b}
@keyframes trSpin{to{transform:rotate(360deg)}}
@keyframes trPulse{50%{transform:scale(1.12);opacity:.85}}
@keyframes trTw{0%,100%{transform:scale(.3);opacity:.2}50%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.tr-rays,.tr-glow,.tr-sp{animation:none}}
svg.tr-cup{width:74%;height:auto}
.tr-ov{background:radial-gradient(ellipse at 50% 48%,#4a3206 0%,#1a1408 38%,#0b0c0f 70%)}
svg.tr-cup{stroke:none}
/* trophy image (see v19); the SVG cup is only a fallback */
.tr-stage .tr-cup{display:none}
.tr-stage.noimg .tr-cup{display:block}
.tr-stage.noimg .tr-img{display:none}
.tr-img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 50%,transparent 71%);mask:radial-gradient(circle at 50% 50%,#000 50%,transparent 71%);
  transform:scale(.45) translateY(40px);opacity:0;transition:transform .75s cubic-bezier(.2,1.45,.35,1) .1s,opacity .35s .1s;filter:saturate(1.08) contrast(1.04)}
.tr-ov.on .tr-img{transform:none;opacity:1}
.tr-stage .tr-glow{opacity:.55}

/* ===== v19: LetBetAfrika 3D trophy (our own render – tools/trophy). Overlay dims the app like the benchmark ===== */
.tr-ov{background:radial-gradient(ellipse at 50% 42%,rgba(96,64,6,.58) 0%,rgba(24,18,6,.5) 34%,rgba(9,10,13,0) 66%),rgba(9,10,13,.93)}
.tr-stage{width:auto;height:min(100.8vw,456px,56vh);aspect-ratio:5/6;flex:none}
.tr-img{width:100%;height:100%;object-fit:contain;border-radius:0;-webkit-mask:none;mask:none;filter:none;transform:scale(.5) translateY(48px);transform-origin:50% 75%}
.tr-stage .tr-rays{inset:auto;left:-25%;top:-28%;width:150%;height:auto;aspect-ratio:1;opacity:.45}
.tr-stage .tr-glow{left:10%;top:1%;width:80%;height:auto;aspect-ratio:1;opacity:.4}
.tr-sp.s1{top:20%;left:14%}.tr-sp.s2{top:12%;right:12%}.tr-sp.s3{top:44%;left:2%}.tr-sp.s4{top:50%;right:2%}.tr-sp.s5{top:2%;left:48%}

/* ===== v20: instant games (arcade.js), Rocket Crash fairness, jackpot results ===== */
.ar{color:#e9ebee;padding-bottom:28px;min-height:calc(100vh - var(--nav-h))}
.ar-head{display:flex;align-items:center;gap:6px;height:48px;padding-right:12px;background:#15181d;position:sticky;top:0;z-index:20}
.ar-head .icon-btn{height:48px;color:#fff}
.ar-head .icon-btn svg{width:24px;height:24px}
.ar-head b{flex:1;min-width:0;font-family:Kanit,Roboto,sans-serif;font-style:italic;font-weight:800;font-size:19px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar-bal{font-weight:700;font-size:14px;color:#ffc20e;font-variant-numeric:tabular-nums}
.ar-bal button{height:30px;padding:0 14px;border-radius:15px;background:var(--g);color:#fff;font-size:13px;font-weight:700}
.ar-stage{position:relative;margin:12px;border-radius:14px;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px 12px;
  background:radial-gradient(120% 90% at 50% 0%,#2a3140 0%,#161a21 60%,#101318 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);overflow:hidden}
.ar-msg{min-height:26px;text-align:center;font-size:15px;margin:0 12px}
.ar-msg .win{color:#36d26e}.ar-msg .win b{color:#ffc20e;font-size:17px}
.ar-msg .lose{color:#9ca0ab}
.ar-pick{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin:10px 12px 0}
.ar-ch{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:10px;background:#262a31;color:#e9ebee;border:2px solid transparent;transition:border-color .15s,background .15s}
.ar-ch b{font-size:15px;font-weight:600}.ar-ch small{color:#ffc20e;font-weight:700;font-size:13px}
.ar-ch.on{border-color:#ffc20e;background:#2f2a1a}
.ar-bet{margin:12px;padding:12px;border-radius:12px;background:#262a31;display:grid;gap:10px}
.ar-stake{display:flex;align-items:center;height:48px;border-radius:24px;background:#13161b;overflow:hidden}
.ar-stake>button{width:52px;height:100%;font-size:24px;color:#fff;flex:none}
.ar-stake label{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.ar-stake small{font-size:10.5px;color:#9ca0ab}
.ar-stake input{width:100%;border:0;background:none;text-align:center;color:#fff;font-weight:800;font-size:18px;padding:0;font-variant-numeric:tabular-nums}
.ar-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ar-chips button{height:32px;border-radius:16px;background:#333842;color:#d5d8dd;font-size:12.5px;font-weight:600}
.ar-play{width:100%;height:54px;border-radius:27px;background:linear-gradient(180deg,#2ed16b,#0d9737);color:#fff;font-size:18px;font-weight:800;letter-spacing:.2px;box-shadow:0 6px 16px rgba(13,151,55,.35);transition:opacity .15s}
.ar-play:disabled{opacity:.45;box-shadow:none}
.ar-play small{display:block;font-size:12px;font-weight:600;opacity:.92}
.ar-hl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ar-hl .ar-play{height:60px;line-height:1.15}
.ar-hl .lower{background:linear-gradient(180deg,#ff5a6e,#c8102e);box-shadow:0 6px 16px rgba(200,16,46,.3)}
.ar-hist{margin:4px 12px 0}
.ar-hist h4{font-size:14px;font-weight:600;color:#c9ccd2;margin:8px 0}
.ar-hr{display:grid;grid-template-columns:44px 1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;background:#22262d;margin-bottom:4px;font-size:12.5px}
.ar-hr time{color:#9ca0ab}.ar-hr span{color:#d5d8dd;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-hr em{font-style:normal;color:#9ca0ab}.ar-hr b{color:#9ca0ab;min-width:64px;text-align:right}
.ar-hr.w b{color:#36d26e}
.ar-none{color:#9ca0ab;font-size:13px;padding:6px 2px}
.ar-info{margin:14px 12px 0;padding:12px;border-radius:12px;background:#22262d;font-size:13px;color:#c9ccd2}
.ar-info summary{cursor:pointer;font-weight:600;color:#e9ebee}
.ar-info p{margin:8px 0}
.ar-tab{display:grid;gap:4px}
.ar-tab>div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;background:#1b1f25}
.ar-tab b{color:#ffc20e;font-variant-numeric:tabular-nums}
.ar-tnote{color:#9ca0ab}
.ar-ts{display:inline-flex;gap:2px}.ar-ts svg{width:22px;height:22px}
.ar-fair{color:#9ca0ab;font-size:12px}
.ar-dice{display:flex;gap:22px}
.ar-die{width:84px;height:84px;border-radius:16px;background:linear-gradient(145deg,#fff,#dfe2e7);box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 -4px 0 rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(3,1fr);padding:12px;gap:4px}
.ar-die i{border-radius:50%}
.ar-die i.on{background:radial-gradient(circle at 35% 35%,#ff6b7f,#c8102e)}
.ar-dice.rolling .ar-die{animation:arShake .13s linear infinite}
.ar-dice.rolling .ar-die:last-child{animation-delay:.06s}
@keyframes arShake{0%{transform:rotate(-14deg) translateY(-3px)}50%{transform:rotate(12deg) translateY(3px)}100%{transform:rotate(-14deg) translateY(-3px)}}
.ar-sum{font-size:15px;color:#c9ccd2}.ar-sum b{font-size:22px;color:#ffc20e}
.ar-wheel{position:relative;width:min(80vw,290px);aspect-ratio:1}
.ar-wheel svg{width:100%;height:100%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
#arWheel{transform-box:fill-box;transform-origin:center}
.ar-pointer{position:absolute;left:50%;top:-6px;width:0;height:0;margin-left:-13px;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #fff;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.ar-pitch{position:relative;width:100%;max-width:420px}
.ar-pitch svg{width:100%;display:block}
.ar-keeper,.ar-ball{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.ar-call{position:absolute;left:0;right:0;top:30%;text-align:center;font:italic 900 44px/1 Kanit,Roboto,sans-serif;letter-spacing:1px;opacity:0;transform:scale(.6);transition:.3s}
.ar-call.on{opacity:1;transform:none}
.ar-call.goal{color:#ffc20e;text-shadow:0 4px 16px rgba(0,0,0,.7)}.ar-call.saved{color:#fff;text-shadow:0 4px 16px rgba(200,16,46,.9)}
.ar-reels{display:flex;gap:10px;padding:10px;border-radius:14px;background:linear-gradient(180deg,#ffc20e,#b87900);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.ar-reel{width:84px;height:92px;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#d9dce1,#fff 30%,#fff 70%,#d9dce1)}
.ar-sym{height:92px;display:grid;place-items:center}.ar-sym svg{width:64px;height:64px}
.ar-keno{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:100%}
.kn{aspect-ratio:1;border-radius:50%;background:#2d323b;color:#d5d8dd;font-weight:700;font-size:13px;transition:background .15s,transform .15s}
.kn.pk{background:#0d9737;color:#fff}
.kn.dr{background:#4a5260;color:#fff}
.kn.hit{background:radial-gradient(circle at 35% 35%,#ffe680,#ffc20e);color:#1b1e25}
.kn.pop{animation:arPop .3s}
@keyframes arPop{50%{transform:scale(1.25)}}
.ar-kn-tools{display:flex;align-items:center;gap:8px;width:100%;font-size:13px;color:#9ca0ab}
.ar-kn-tools span{flex:1}
.ar-kn-tools button,.ar-reveal{height:32px;padding:0 14px;border-radius:16px;background:#333842;color:#e9ebee;font-size:12.5px;font-weight:600}
.ar-scratch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(86vw,300px);padding:10px;border-radius:14px;background:linear-gradient(135deg,#ffc20e,#e08a00);box-shadow:0 10px 24px rgba(0,0,0,.45)}
.sc{position:relative;aspect-ratio:1;border-radius:10px;background:#fff;overflow:hidden}
.sc-v{position:absolute;inset:0;display:grid;place-items:center;font:italic 900 22px/1 Kanit,Roboto,sans-serif;color:#1b1e25}
.sc-v.p1{color:#0a7d3e}.sc-v.p2{color:#2b6cff}.sc-v.p3{color:#7b2d8e}.sc-v.p4{color:#e5163a}
.sc-cov{position:absolute;inset:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#b9bec6 0 6px,#cfd3d9 6px 12px);color:#5b616b;font-size:11px;font-weight:800;letter-spacing:1px;transition:opacity .35s,transform .35s}
.sc.open .sc-cov{opacity:0;transform:scale(1.2) rotate(8deg)}
.sc.win{box-shadow:0 0 0 3px #e5163a inset}
.ar-scratch.idle{opacity:.85}
.ar-cards{display:flex;align-items:center;gap:14px}
.ar-vs{color:#9ca0ab;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.ar-card{position:relative;width:104px;height:146px;border-radius:12px;background:#fff;color:#1b1e25;box-shadow:0 10px 22px rgba(0,0,0,.45);display:grid;place-items:center}
.ar-card.red{color:#c8102e}
.ar-card b{position:absolute;top:8px;left:10px;font:900 22px/1 Roboto,sans-serif}
.ar-card b.br{top:auto;left:auto;bottom:8px;right:10px;transform:rotate(180deg)}
.ar-card svg{width:46px;height:46px;fill:currentColor}
.ar-card.back{background:repeating-linear-gradient(45deg,#0a7d3e 0 8px,#0d9737 8px 16px);border:4px solid #fff}
.ar-card.back span{font:italic 800 28px Kanit,sans-serif;color:#ffc20e;text-shadow:0 2px 0 #064d27}
.ar-card.flip{animation:arFlip .5s}
@keyframes arFlip{0%{transform:rotateY(90deg)}100%{transform:none}}
.cr-fair{margin:10px;padding:12px;border-radius:12px;background:var(--ink);color:#c9ccd2;font-size:12.5px}
.cr-fair summary{font-weight:600;color:#fff;cursor:pointer}.cr-fair summary small{color:#9ca0ab;font-weight:400}
.cr-fair p{margin:8px 0}.cr-fair code{font-size:11px;word-break:break-all;color:#9ca0ab}
.cr-frow{display:grid;grid-template-columns:52px 52px 1fr 64px;gap:6px;align-items:center;padding:6px 0;border-top:1px solid #2a2e36}
.cr-frow.cur{grid-template-columns:52px 52px 1fr}
.cr-frow b{color:#ffc20e}
.cr-frow button{height:26px;border-radius:13px;background:#2a2e36;color:#e9ebee;font-size:11px}
.cr-frow button.ok{background:#0d9737}.cr-frow button.bad{background:#c8102e}
.cr-none{padding:14px;text-align:center;color:#9ca0ab;font-size:13px}
.jp-games{margin-top:8px;font-size:12.5px;color:#c9ccd2}
.jp-games summary{cursor:pointer;color:#36d26e}
.jp-games p{display:grid;grid-template-columns:20px 1fr auto 64px;gap:6px;padding:4px 0;border-top:1px solid #2f343c}
.jp-games em{font-style:normal;color:#fff}.jp-games i{font-style:normal;color:#ffc20e;text-align:right}
.jp-tk .won{color:#36d26e;font-style:normal;font-weight:700}.jp-tk .lost{color:#9ca0ab;font-style:normal}
@media (min-width:1024px){.ar{max-width:640px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.ar-dice.rolling .ar-die,.kn.pop,.ar-card.flip{animation:none}#arWheel,.ar-keeper,.ar-ball{transition-duration:.01s!important}}
/* game screens are full-screen on phones: their own header with back + balance, no betslip button */
@media (max-width:1023px){
  body[data-page="game"] .topbar,body[data-page="play"] .topbar,
  body[data-page="game"] .site-foot,body[data-page="play"] .site-foot,body[data-page="instant"] .site-foot{display:none}
}
body[data-page="game"] .slip-pill,body[data-page="play"] .slip-pill,body[data-page="instant"] .slip-pill{display:none!important}
.ar-pitch svg{height:auto}
.ar-stage{min-height:214px}
@media (max-height:700px){.ar-stage{min-height:196px;padding:12px}.ar-die{width:76px;height:76px}.ar-reel,.ar-sym{height:84px}.ar-card{width:96px;height:134px}}
html[data-theme="dark"] .ar-stake input,html[data-theme="dark"] .cr-stake input{background:none;border:0;box-shadow:none}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .ar-stake input,html:not([data-theme="light"]) .cr-stake input{background:none;border:0;box-shadow:none}}