/* ─────────────────────────────────────────────────────────────
   100TIP – one stylesheet for the whole site (no frameworks)
   Identity: electric violet + coral on soft lavender-white; deep violet-black in dark mode.
   Upload to: public_html/assets/site.css
   ───────────────────────────────────────────────────────────── */
:root{
  --brand:#15392a;--brand-2:#1f5a41;--brand-soft:#e8f1ec;--gold:#b8923a;--gold-soft:#f7f0de;--gold-ink:#7f621f;
  --ok:#14a058;--ok-soft:#e1f5ea;--no:#d23f44;--no-soft:#fbe6e6;--amber:#c98a12;
  --bg:#f6f7f4;--card:#fff;--card-2:#fafbf8;--line:#e2e8e3;--text:#0f1f18;--muted:#52635a;--faint:#83938a;
  --disp:"Fraunces",Georgia,"Times New Roman",serif;
  --head:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --on-brand:#fff;--r:14px;--r-s:9px;--shadow:0 1px 2px rgba(15,40,28,.05),0 8px 26px rgba(15,40,28,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --brand:#53c08c;--brand-2:#7dd3aa;--brand-soft:#16302a;--gold:#d8b660;--gold-soft:#2e2715;--gold-ink:#d8b660;
  --ok:#3fd486;--ok-soft:#0f2e1f;--no:#ff6b6f;--no-soft:#3a1719;
  --on-brand:#06140d;--bg:#0a130f;--card:#101c16;--card-2:#14231b;--line:#203429;--text:#edf4ef;--muted:#a2b5aa;--faint:#71857a;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme=dark]{
  --brand:#53c08c;--brand-2:#7dd3aa;--brand-soft:#16302a;--gold:#d8b660;--gold-soft:#2e2715;--gold-ink:#d8b660;
  --ok:#3fd486;--ok-soft:#0f2e1f;--no:#ff6b6f;--no-soft:#3a1719;
  --on-brand:#06140d;--bg:#0a130f;--card:#101c16;--card-2:#14231b;--line:#203429;--text:#edf4ef;--muted:#a2b5aa;--faint:#71857a;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 28px rgba(0,0,0,.3);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--body);overflow-x:clip;padding-bottom:64px}
@media (min-width:900px){body{padding-bottom:0}}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3{font-family:var(--disp);line-height:1.15;letter-spacing:-.015em;margin:0}
h1,h2{font-weight:600;font-variation-settings:"opsz" 72}
h3{font-family:var(--body)}
h1{font-size:clamp(28px,4.8vw,42px)}
h2{font-size:clamp(21px,2.8vw,27px);margin:32px 0 12px}
h3{font-size:16px;font-weight:600}
p{margin:0 0 12px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
svg{flex:0 0 auto}

/* ── header ── */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding:0 12px 0 16px;height:62px;display:flex;align-items:center;gap:18px}
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--text);font:600 23px/1 var(--disp);letter-spacing:-.02em;text-decoration:none!important;flex:0 0 auto}
.logo b{color:var(--gold-ink);font-weight:600}
.top-in .logo b{color:#8a6a22}
:root[data-theme=dark] .top-in .logo b{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .top-in .logo b{color:var(--gold)}}
.foot .logo b{color:#c9a54d}
.foot a.tg-btn{color:#fff}
.foot-rg b{color:#1a1205!important}
.logo.inv{color:#fff}
.nav{display:none;gap:2px;flex:1;min-width:0}
.nav a{padding:8px 11px;border-radius:999px;color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none}
.nav a:hover{background:var(--brand-soft);color:var(--text)}
.nav a.on{background:var(--brand);color:var(--on-brand)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:6px}
.ic-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ic-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tg-btn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 12px;border-radius:12px;background:#1877a8;color:#fff;font-weight:700;font-size:14px;text-decoration:none!important}
.tg-btn svg{width:20px;height:20px}
.tg-btn span{display:none}
.tg-btn.big{height:auto;padding:11px 16px;margin-top:6px}
@media (min-width:560px){.tg-btn span{display:inline}}
@media (min-width:1000px){.nav{display:flex}.menu-btn{display:none}}
.sp-row{display:none;max-width:1180px;margin:0 auto;padding:6px 16px 8px;gap:6px 14px;flex-wrap:wrap;font-size:12.5px}
.sp-row span{color:var(--faint);font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;align-self:center}
.sp-row a{color:var(--muted)}
@media (min-width:1000px){.sp-row{display:flex}}

/* ── drawer ── */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(6,18,12,.55)}
.drawer[hidden]{display:none}
.drawer-in{position:absolute;right:0;top:0;bottom:0;width:min(380px,92vw);background:var(--card);overflow-y:auto;padding:12px 16px 90px;overscroll-behavior:contain;animation:din .18s ease-out}
@keyframes din{from{transform:translateX(30px);opacity:0}}
.drawer-h{display:flex;align-items:center;justify-content:space-between;height:52px;margin-bottom:8px}
.drawer-tg{display:block;background:#1877a8;color:#fff;border-radius:var(--r);padding:12px 14px;margin-bottom:6px;text-decoration:none!important}
.drawer-tg b{display:block;font-size:15px}.drawer-tg small{opacity:.9}
.drawer-g h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:18px 0 6px}
.drawer-g{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.drawer-g h3{grid-column:1/-1}
.drawer-g a{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);color:var(--text);font-weight:600;font-size:14px;text-decoration:none}
.drawer-g a.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.drawer-g.sp a{font-weight:500;color:var(--muted)}
html.noscroll{overflow:hidden}

/* ── bottom nav (phones) ── */
.bnav{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:11px;font-weight:600;text-decoration:none;padding:3px 0}
.bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.bnav a.on{color:var(--brand)}.bnav .bn-tg{color:#1877a8}
@media (min-width:900px){.bnav{display:none}}

/* ── page parts ── */
main{padding-top:14px;padding-bottom:30px;min-height:60vh}
.crumbs{font-size:13px;color:var(--faint);margin:2px 0 12px}.crumbs a{color:var(--muted)}.crumbs span{margin:0 2px}
.ph{margin:4px 0 16px}
.ph p{color:var(--muted);max-width:760px;margin-top:8px}
.ph .kick{display:inline-block;font:700 11.5px var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:8px}
.lead{font-size:16px;color:var(--muted)}
.rec{font-size:13.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:9px 12px;display:inline-block}
.rec b{color:var(--ok)}
.empty{color:var(--muted);background:var(--card);border:1px dashed var(--line);border-radius:var(--r);padding:20px;text-align:center}
.cols{display:grid;gap:22px}
@media (min-width:1000px){.cols{grid-template-columns:minmax(0,1fr) 320px}}
.side .card{position:sticky;top:80px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}

/* hero (home) */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:28px 20px;margin:4px 0 18px;color:#fff;isolation:isolate;
  background:radial-gradient(90% 120% at 100% 0%,rgba(216,182,96,.28) 0%,rgba(216,182,96,0) 50%),linear-gradient(140deg,#0c2419 0%,#15392a 48%,#0a1d15 100%);
  box-shadow:0 18px 40px -18px rgba(12,36,25,.55)}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.09;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 64px),radial-gradient(circle at 78% 50%,transparent 0 92px,#fff 92px 93px,transparent 93px)}
.hero:after{content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,transparent,#d8b660,transparent)}
.hero .kick{display:inline-block;font:700 11.5px var(--body);text-transform:uppercase;letter-spacing:.14em;color:#d8b660;margin-bottom:10px}
.hero h1{font-size:clamp(30px,5.6vw,52px);max-width:780px;font-weight:600}
.hero p{max-width:620px;opacity:.92;font-size:16px;margin:10px 0 16px}
.hero .cta{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;padding:11px 16px;border-radius:12px;font-weight:700;font-size:14.5px;text-decoration:none!important;border:0;cursor:pointer}
.btn.w{background:#fff;color:#15392a}.btn.w:hover{background:#f7f0de}.btn.g{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.btn.v{background:var(--brand);color:var(--on-brand)}
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:20px;max-width:560px}
.hero-stats div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px}
.hero-stats b{display:block;font:600 26px/1.1 var(--disp);color:#f3e3b5}.hero-stats span{font-size:12px;opacity:.85}
@media (min-width:760px){.hero{padding:40px 36px}}

/* tabs */
.tabs{display:flex;gap:6px;margin:6px 0 14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:1 0 auto;min-width:96px;text-align:center;padding:8px 12px;border:1px solid var(--line);background:var(--card);border-radius:12px;color:var(--text);font-weight:700;font-size:14px;text-decoration:none}
.tabs a small{display:block;font-weight:500;font-size:11.5px;color:var(--faint)}
.tabs a.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.tabs a.on small{color:var(--on-brand);opacity:.75}

/* summary strip */
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 14px}
.strip div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 6px;text-align:center}
.strip b{display:block;font:700 19px/1.15 var(--head)}.strip span{font-size:11.5px;color:var(--muted)}
.ok{color:var(--ok)}.no{color:var(--no)}

/* market chips */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
.chips a{padding:7px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--text);font-weight:600;font-size:13px;text-decoration:none}
.chips a.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ── league groups + match rows ── */
.lg{margin:0 0 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.lg-h{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--card-2);border-bottom:1px solid var(--line);font:600 13.5px var(--body);letter-spacing:.01em}
.lg-h span{color:var(--muted);font-weight:500}
.lg-h img{border-radius:2px;width:18px;height:13px;object-fit:cover}
.mr{border-top:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 64px}
.mr:first-of-type{border-top:0}
.mr>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 22px minmax(104px,auto);
  grid-template-areas:"t tm sc pk" "t pr pr pk";align-items:center;column-gap:10px;row-gap:7px;padding:11px 12px;position:relative}
.mr-t{grid-area:t}.mr-teams{grid-area:tm}.mr-sc{grid-area:sc}.mr-pk{grid-area:pk}.mr-pr{grid-area:pr}.mr-od{grid-area:od}.mr-gx{grid-area:gx}
.mr>summary::-webkit-details-marker{display:none}
.mr>summary:hover{background:var(--card-2)}
.mr[open]>summary{background:var(--card-2)}
.mr-t{font:600 13px var(--head);color:var(--muted);font-variant-numeric:tabular-nums}
.mr-t .live{color:var(--no);display:inline-flex;align-items:center;gap:4px}
.mr-t .live:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--no);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}
.mr-t .ft{font-size:11.5px;letter-spacing:.04em}.mr-t .off{color:var(--amber);font-size:10.5px}
.mr-teams{display:flex;flex-direction:column;gap:4px;min-width:0}
.tm{display:flex;align-items:center;gap:7px;min-width:0}
.tm img,.tm .noimg{width:18px;height:18px;flex:0 0 18px;object-fit:contain}
.tm .noimg{display:inline-block;border-radius:50%;background:var(--line)}
.tm b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm.w b{font-weight:800}
.mr-sc{display:flex;flex-direction:column;gap:4px;font:700 14px var(--head);text-align:center;font-variant-numeric:tabular-nums}
.is-live .mr-sc{color:var(--no)}
.mr-pk{display:grid;grid-template-columns:auto;justify-items:end;gap:4px}
.bdg{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:26px;padding:0 9px;border-radius:8px;font:700 13.5px var(--head);
  background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.mr-pk.hi .bdg{background:var(--brand);color:var(--on-brand)}
.r-won .mr-pk .bdg,.legs .r-won .bdg{background:var(--ok);color:#fff}.r-lost .mr-pk .bdg,.legs .r-lost .bdg{background:var(--no-soft);color:var(--no)}.r-void .mr-pk .bdg{background:var(--line);color:var(--muted)}
.cf{width:84px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.cf i{display:block;height:100%;border-radius:3px;background:var(--faint)}
.mr-pk.hi .cf i{background:var(--ok)}.mr-pk.md .cf i{background:var(--amber)}
.pc{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.now-won .mr-pk .bdg{box-shadow:0 0 0 2px var(--ok)}.now-lost .mr-pk .bdg{box-shadow:0 0 0 2px var(--no)}
.legs li.now-won .bdg{box-shadow:0 0 0 2px var(--ok)}.legs li.now-lost .bdg{box-shadow:0 0 0 2px var(--no)}
.legs li.is-live .lg-t{color:var(--no)}
.is-live>summary:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--no);animation:blink 1.6s infinite}
@media (max-width:420px){.mr>summary{grid-template-columns:40px minmax(0,1fr) 18px 92px;column-gap:8px;padding:10px}.cf{width:70px}.tm b{font-size:13.5px}}

/* breakdown */
.bd{padding:4px 12px 14px;border-top:1px dashed var(--line);background:var(--card-2)}
.bd-1x2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.bd-1x2 div{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;overflow:hidden}
.bd-1x2 span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-1x2 b{font:700 18px var(--head)}.bd-1x2 small{float:right;color:var(--faint);font-size:11.5px;margin-top:6px}
.bd-1x2 i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:var(--brand)}
.bd-mk{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 16px;margin:0}
.bd-mk div{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bd-mk div.f{font-weight:700}
.bd-mk dt{flex:0 0 52px;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.bd-mk dd{margin:0;min-width:0}.bd-mk em{font-style:normal;color:var(--muted);font-size:12.5px}
.bd-mk s{text-decoration:none;font-weight:800}.bd-mk s.ok{color:var(--ok)}.bd-mk s.no{color:var(--no)}
.bd-f{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* slips */
.slip{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin:0 0 16px;overflow:hidden}
.slip-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 14px;background:linear-gradient(90deg,var(--brand-soft),transparent);border-bottom:1px solid var(--line)}
.slip-h h2{font-size:20px;margin:0;flex:1 1 auto}
.slip-o{font-size:13px;color:var(--muted)}.slip-o b{font:700 18px var(--head);color:var(--text)}
.slip-st{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--line);color:var(--muted)}
.s-won .slip-st{background:var(--ok);color:#fff}.s-lost .slip-st{background:var(--no);color:#fff}
.legs{list-style:none;margin:0;padding:0}
.legs li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"t m o" "t p r";gap:4px 10px;padding:11px 14px;border-top:1px solid var(--line);align-items:center}
.lg-t{grid-area:t;font:600 13px var(--head);color:var(--muted)}
.lg-m{grid-area:m;min-width:0}.lg-m b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lg-m small{color:var(--faint);font-size:12px}
.lg-p{grid-area:p;display:flex;align-items:center;gap:8px;min-width:0}.lg-p small{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-o{grid-area:o;text-align:right;font:700 15px var(--head)}.lg-o small{display:block;font:500 11.5px var(--body);color:var(--faint)}
.lg-r{grid-area:r;text-align:right;font-weight:700;font-size:13px}
.legs li.r-won .lg-r{color:var(--ok)}.legs li.r-lost .lg-r{color:var(--no)}
@media (min-width:760px){.legs li{grid-template-columns:52px minmax(0,1.3fr) minmax(0,1.2fr) 74px 70px;grid-template-areas:"t m p o r"}}

/* home: market board + promo cards */
.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:700px){.board{grid-template-columns:repeat(4,minmax(0,1fr))}}
.board a{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--text);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.board a:hover{transform:translateY(-2px);border-color:var(--brand)}
.board b{display:block;font:600 16.5px var(--disp)}.board small{color:var(--muted);font-size:12.5px}
.board i{float:right;font:700 12px var(--body);font-style:normal;color:var(--gold-ink);background:var(--gold-soft);border-radius:6px;padding:2px 7px}
.feat{display:grid;gap:12px}
@media (min-width:800px){.feat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feat .card{border-top:3px solid var(--gold)}
.feat .card h2,.feat .card h3{margin:0 0 8px;display:flex;justify-content:space-between;align-items:center;font:600 19px var(--disp)}
.feat .card a.more{font:700 13px var(--body)}

/* text pages */
.prose{max-width:780px}
.prose h2{margin-top:28px}.prose ul{padding-left:20px}.prose li{margin:4px 0}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 16px}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
/* editorial guide card */
.seo{position:relative;margin-top:34px;padding:26px 22px 22px;max-width:none;background:linear-gradient(180deg,var(--gold-soft),var(--card) 140px);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);counter-reset:sec;overflow:hidden}
.seo:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--brand),var(--gold) 55%,var(--brand))}
.seo:after{content:"100Tip guide";position:absolute;top:16px;right:18px;font:700 10.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:999px;padding:3px 10px;background:var(--card)}
.seo>*{max-width:760px}
.seo h2{counter-increment:sec;display:flex;align-items:baseline;gap:12px;margin:26px 0 10px;padding-top:18px;border-top:1px dashed var(--line);font-size:clamp(19px,2.4vw,23px);line-height:1.25}
.seo h2:first-child{margin-top:6px;padding-top:0;border-top:0;padding-right:120px}
.seo h2:before{content:counter(sec,decimal-leading-zero);flex:none;font:700 13px var(--body);letter-spacing:.06em;color:var(--on-brand);background:var(--brand);border-radius:8px;padding:4px 7px;transform:translateY(-2px)}
.seo h3{font-size:16.5px;margin:18px 0 6px}
.seo p,.seo li{color:var(--muted);font-size:15.5px;line-height:1.75}
.seo p:first-of-type{font-size:16.5px;color:var(--text)}
.seo a{color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--gold) 70%,transparent);text-underline-offset:3px;text-decoration-thickness:2px}
.seo a:hover{text-decoration-color:var(--brand)}
.seo ul,.seo ol{list-style:none;padding:0;margin:12px 0 16px;display:grid;gap:8px}
.seo li{position:relative;margin:0;padding:10px 14px 10px 42px;background:var(--card-2);border:1px solid var(--line);border-radius:12px}
.seo ul li:before{content:"";position:absolute;left:14px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231f8a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.seo ol{counter-reset:li}.seo ol li{counter-increment:li}
.seo ol li:before{content:counter(li);position:absolute;left:12px;top:10px;width:20px;height:20px;border-radius:50%;background:var(--gold-soft);color:var(--gold);font:700 11.5px/20px var(--body);text-align:center}
.seo li b,.seo li strong{color:var(--text)}
.seo table{border:1px solid var(--line);border-radius:12px;overflow:hidden;border-collapse:separate;border-spacing:0}
.seo th{background:var(--brand-soft);color:var(--text);font-weight:700}
.seo>p:last-child{margin-top:18px;padding:12px 14px;border-left:3px solid var(--gold);background:var(--card-2);border-radius:0 10px 10px 0;font-size:14.5px}
@media (min-width:900px){.seo{padding:34px 40px 30px}}
@media (max-width:520px){.seo:after{position:static;display:inline-block;margin-bottom:12px}.seo h2:first-child{padding-right:0}}
/* manual ad slots */
.ad-slot{margin:22px 0;text-align:center;min-height:100px}
.ad-slot small{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.rec-t{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--r);overflow:hidden;font-size:14px}
.rec-t th,.rec-t td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.rec-t td.n,.rec-t th.n{text-align:right;font-variant-numeric:tabular-nums}
.bar{display:inline-block;width:90px;height:6px;border-radius:3px;background:var(--line);vertical-align:middle;margin-right:8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}

/* FAQ */
.faq{margin-top:26px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 8px}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:700;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:right;color:var(--brand);font-weight:700}
.faq details[open] summary:after{content:"–"}
.faq p{padding:0 14px 12px;color:var(--muted);margin:0}

/* jackpot */
.jp-meta{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.jp-meta span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.jp-t{width:100%;border-collapse:collapse;background:var(--card);font-size:14px}
.jp-t td,.jp-t th{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.jp-t th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.jp-t .n{font:700 13px var(--head);color:var(--faint);width:28px}
.jp-t .p{text-align:center}.jp-t td small{color:var(--muted);display:block;font-size:12px}
.jp-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;box-shadow:var(--shadow)}

/* footer */
.foot{background:#0b1f16;color:#c3d3ca;margin-top:40px;padding:34px 0 18px;font-size:14px}
.foot a{color:#c3d3ca}
.foot p a,.foot-rg a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.foot-grid{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.foot-grid h3{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px}
.foot-grid div>a{display:block;padding:3px 0}
.foot-about{grid-column:1/-1}.foot-about p{max-width:420px;margin:10px 0;color:#9fb5a8}
@media (min-width:860px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}.foot-about{grid-column:auto}}
.foot-sp{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:24px;padding-top:16px;border-top:1px solid #1d3a2c;font-size:12.5px}
.foot-sp span{font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;color:#7f978a;margin-right:4px;align-self:center}
.foot-sp a{color:#9fb5a8}
.foot-rg{margin-top:16px;font-size:13px;color:#9fb5a8}.foot-rg b{background:var(--gold);color:#fff;border-radius:6px;padding:1px 7px;margin-right:6px}
.foot-b{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #1d3a2c;font-size:12.5px;color:#7f978a}
.foot-b a{margin-left:12px;color:#7f978a}

/* promo banner – small, like Supatips: 460px on desktop, 320px on phones */
.promo{position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom) + var(--lift,0px));z-index:2147483646;transition:bottom .2s;display:flex;justify-content:center;padding:6px 10px;background:var(--card);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.12)}
.promo[hidden]{display:none}
.promo-in{position:relative;width:100%;max-width:320px}
.promo-in a{display:block;line-height:0;border-radius:10px;overflow:hidden}
.promo img{display:block;width:100%;height:auto}
.promo-tag{position:absolute;left:0;top:-21px;font-size:10px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.promo-x{position:absolute;right:0;top:-24px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--muted);font-size:11px;cursor:pointer}
@media (min-width:900px){.promo{bottom:var(--lift,0px)}.promo-in{max-width:460px}}
}
.ad{margin:16px 0;min-height:250px;display:flex;align-items:center;justify-content:center}
@media (max-width:600px){
  .jp-t td,.jp-t th{padding:8px 5px;font-size:13px}
  .jp-t td.p small{display:none}
  .jp-t td.p:has(.bdg) small{display:block}
  .jp-t .n{width:18px}
  .jp-t td:nth-child(2) b{font-size:13px}
  .jp-t th:last-child,.jp-t td:last-child{width:46px}
}

/* ── premium match rows: win-chance bar, odds, goals (desktop shows every column) ── */
.mr-pr{display:flex;flex-direction:column;gap:4px;min-width:0}
.pr-l{display:flex;gap:10px;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.pr-l em{font-style:normal}.pr-l b{font-weight:700;color:var(--muted)}.pr-l .fv b{color:var(--text)}
.pr-b{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--line);gap:2px}
.pr-b i{display:block;height:100%}
.pr-b .h{background:var(--brand)}.pr-b .d{background:color-mix(in srgb,var(--faint) 55%,transparent)}.pr-b .a{background:var(--gold)}
.mr-od,.mr-gx{display:none}
.mr-head{display:none}
.lg-h .lg-n{margin-left:auto;font-weight:500;font-size:11.5px;color:var(--faint)}
@media (min-width:900px){
  .mr>summary,.mr-head{grid-template-columns:52px minmax(190px,1.35fr) 26px minmax(140px,1fr) 150px 80px 168px;grid-template-areas:"t tm sc pr od gx pk";column-gap:16px}
  .mr>summary{padding:12px 16px}
  .mr-head{display:grid;padding:7px 16px;font:700 10.5px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);background:var(--card)}
  .mr-head span:last-child{text-align:right}
  .mr-od{display:flex;gap:5px}
  .mr-od i{flex:1;display:flex;flex-direction:column;align-items:center;font-style:normal;font:600 13px var(--body);font-variant-numeric:tabular-nums;padding:4px 0;border-radius:8px;background:var(--card-2);border:1px solid var(--line);color:var(--text)}
  .mr-od i small{font-size:10px;color:var(--faint);font-weight:700;line-height:1.1}
  .mr-od i.on{border-color:var(--brand);background:var(--brand-soft)}
  .mr-gx{display:flex;flex-direction:column;gap:3px}
  .mr-gx i{font-style:normal;font:600 13px var(--body);font-variant-numeric:tabular-nums}
  .mr-gx small{display:inline-block;width:26px;font-size:10.5px;font-weight:700;color:var(--faint)}
  .pr-l{font-size:11.5px}
  .pr-b{height:6px}
}

.pk-l{display:none}
@media (min-width:900px){.pk-l{display:block;max-width:168px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}.cf{width:110px}}

/* ── titled blocks + view more ── */
.blk{margin:26px 0 0}
.blk-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin:0 0 12px}
.blk-h h2{margin:0;display:flex;align-items:center;gap:10px}
.blk-h p{margin:0;color:var(--muted);font-size:13.5px}
.cnt{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 8px;border-radius:999px;background:var(--gold-soft);color:var(--gold);font:700 12px var(--body)}
.blk .lg+.lg{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
.vm-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin:4px 0 0;padding:12px;border-radius:12px;border:1px dashed var(--brand);background:var(--brand-soft);color:var(--brand);font:700 14px var(--body);cursor:pointer;transition:background .15s}
.vm-btn:hover{background:color-mix(in srgb,var(--brand-soft) 70%,var(--brand) 12%)}
.vm-btn span{font-weight:600;opacity:.75}
.lg.vm[hidden]{display:none}
.pk-m{font:700 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
#main.pj-loading{opacity:.55;transition:opacity .15s;pointer-events:none}
.tabs a{transition:background .15s,color .15s}
.chips a{text-decoration:none}

/* ── Categories panel (button in the header on desktop, in the bottom bar on phones) ── */
.nav .cats-btn{display:inline-flex;align-items:center;gap:4px;padding:8px 11px;border-radius:999px;border:0;background:none;color:var(--muted);font:600 14px var(--body);cursor:pointer;white-space:nowrap}
.nav .cats-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav .cats-btn:hover{background:var(--brand-soft);color:var(--text)}
.nav .cats-btn.on{background:var(--brand);color:var(--on-brand)}
.nav .cats-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.bnav button{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font:600 11px var(--body);background:none;border:0;padding:3px 0;cursor:pointer}
.bnav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.bnav button[aria-expanded=true]{color:var(--brand)}
.cats{position:fixed;inset:0;z-index:58;background:rgba(6,18,12,.5)}
.cats[hidden]{display:none}
.cats-in{position:absolute;left:0;right:0;bottom:0;max-height:84vh;overflow-y:auto;overscroll-behavior:contain;background:var(--card);border-radius:20px 20px 0 0;padding:6px 16px calc(84px + env(safe-area-inset-bottom));animation:cup .2s ease-out}
@keyframes cup{from{transform:translateY(30px);opacity:0}}
.cats-in:before{content:"";display:block;width:42px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 6px}
.cats-h{display:flex;align-items:center;justify-content:space-between;padding:4px 0 6px}
.cats-h b{font:600 22px var(--disp)}
.cats-g h3{font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:14px 0 8px}
.cats-g>div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cats-g>div h3{grid-column:1/-1}
.cats-g a{padding:10px 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);font:600 13.5px var(--body);text-decoration:none;background:var(--card-2)}
.cats-g a:hover{border-color:var(--brand)}
.cats-g a.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
@media (min-width:1000px){
  .cats{background:rgba(6,18,12,.18)}
  .cats-in{left:50%;right:auto;bottom:auto;top:70px;transform:translateX(-50%);width:min(1120px,94vw);max-height:none;border-radius:18px;padding:18px 22px 22px;box-shadow:0 24px 60px -20px rgba(6,24,16,.45);animation:cdown .16s ease-out;border:1px solid var(--line)}
  @keyframes cdown{from{opacity:0;margin-top:-8px}}
  .cats-in:before{display:none}
  .cats-h{display:none}
  .cats-g{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  .cats-g>div{display:flex;flex-direction:column;gap:2px}
  .cats-g h3{margin:0 0 8px}
  .cats-g a{border:0;background:none;padding:7px 10px;border-radius:8px;font-weight:500}
  .cats-g a:hover{background:var(--brand-soft)}
}

/* ── banker of the day: one premium match card ── */
.bk{position:relative;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:18px;box-shadow:var(--shadow);padding:18px 18px 16px;margin:6px 0 10px;overflow:hidden}
.bk:before{content:"";position:absolute;inset:0 0 auto;height:150px;background:radial-gradient(70% 100% at 50% 0%,var(--brand-soft),transparent);pointer-events:none}
.bk>*{position:relative}
.bk-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted);font-weight:600}
.bk-top span{display:inline-flex;align-items:center;gap:7px}.bk-top img{border-radius:2px}
.bk-when time,.bk-when span{font:700 14px var(--body);color:var(--text)}
.bk-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:18px 0 16px;text-align:center}
.bk-t{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.bk-t img{width:56px;height:56px;object-fit:contain}
.bk-t b{font:600 clamp(17px,2.6vw,22px)/1.2 var(--disp)}
.bk-sc b{font:700 28px var(--disp);color:var(--text)}.bk-sc span{font:600 14px var(--body);color:var(--faint);letter-spacing:.1em;text-transform:uppercase}
.is-live .bk-sc b{color:var(--no)}
.bk-pick{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;background:var(--card-2);border:1px solid var(--line)}
.ring{--c:70;flex:0 0 auto;width:78px;height:78px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,var(--card-2) 80%,transparent 82% 100%),conic-gradient(var(--ok) calc(var(--c)*1%),var(--line) 0)}
.ring b{font:700 19px var(--body);line-height:1}.ring small{font-size:10.5px;color:var(--muted)}
.bk-pk{display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-pk small{font:700 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.bk-pk strong{font:600 clamp(19px,3vw,24px)/1.2 var(--disp)}
.bk-pk>span{font-size:14px;color:var(--muted)}.bk-pk>span b{color:var(--text)}
.bk .bdg{background:var(--brand);color:var(--on-brand)}
.bk.r-won .bdg{background:var(--ok);color:#fff}.bk.r-lost .bdg{background:var(--no-soft);color:var(--no)}
.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 0}
@media (min-width:760px){.bk{padding:22px 26px}.bk-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.bk-grid>div{background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-grid small{font:700 10.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.bk-grid>div>b{font:700 20px var(--body)}.bk-grid>div>span:not(.pr-l):not(.pr-b){font-size:12.5px;color:var(--muted)}
.bk-safe{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--gold-soft);font-size:14px}
.bk-venue{margin:10px 0 0;font-size:12.5px;color:var(--faint)}
.bk-h td{vertical-align:middle}