/* Live4Sport – app styles (MPZ Live Score). Hand-written, no build step. Class contract: dev/SPEC.md "UI notes". */

/* ---------- tokens ---------- */
:root{
  --bg:#f1f3f7;--sf:#fff;--sf2:#f4f6f9;--sf3:#e9edf3;--line:#e2e6ed;
  --tx:#0b1320;--tx2:#55607a;--tx3:#8a94a8;
  --brand:#07a35b;--brand-tx:#067a45;--tint:rgba(7,163,91,.1);
  --on:#0b1320;--on-tx:#fff;
  --live:#e3213b;--live-tint:rgba(227,33,59,.08);--logo:url(logo-light.png?v=2);--four:url(four-light.png);
  --up:#0a8f4e;--dn:#d5263c;--yc:#f5b800;--rc:#e3213b;
  --bk:#1b2433;--bar:rgba(255,255,255,.88);--sh:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.05);
  --top:48px;--nav:46px;--tb:58px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#080c14;--sf:#111826;--sf2:#182132;--sf3:#212c40;--line:#222d40;
    --tx:#eef2f8;--tx2:#9ba8be;--tx3:#69768d;
    --brand:#2fe58b;--brand-tx:#2fe58b;--tint:rgba(47,229,139,.12);
    --on:#2fe58b;--on-tx:#04140b;
    --live:#ff4d5f;--live-tint:rgba(255,77,95,.1);--logo:url(logo-dark.png?v=2);--four:url(four-dark.png);
    --up:#2fd67b;--dn:#ff6272;--yc:#ffd23f;--rc:#ff4d5f;
    --bk:#1e293b;--bar:rgba(12,17,27,.86);--sh:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme=dark]{
  --bg:#080c14;--sf:#111826;--sf2:#182132;--sf3:#212c40;--line:#222d40;
  --tx:#eef2f8;--tx2:#9ba8be;--tx3:#69768d;
  --brand:#2fe58b;--brand-tx:#2fe58b;--tint:rgba(47,229,139,.12);
  --on:#2fe58b;--on-tx:#04140b;
  --live:#ff4d5f;--live-tint:rgba(255,77,95,.1);--logo:url(logo-dark.png?v=2);--four:url(four-dark.png);
  --up:#2fd67b;--dn:#ff6272;--yc:#ffd23f;--rc:#ff4d5f;
  --bk:#1e293b;--bar:rgba(12,17,27,.86);--sh:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top) + var(--nav) + var(--sat) + 8px)}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;min-height:100vh;min-height:100dvh;
  padding-bottom:calc(var(--tb) + var(--sab))}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
table{border-collapse:collapse;width:100%}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.i{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}
.o,.m-hs,.m-as,.m-status,.m-periods,time,.mh-score,.pt,.sc,.st b,.ev-m,.ev-s,.sn-n,.chip i,.lg-k{font-variant-numeric:tabular-nums}

.dot{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
@keyframes blink{50%{opacity:.35}}
@keyframes goal{0%,100%{background-color:transparent}25%,75%{background-color:var(--tint)}}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes sk{to{background-position:-200% 0}}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- progress bar ---------- */
#pbar{position:fixed;z-index:90;top:0;left:0;height:3px;width:0;background:var(--brand);opacity:0;pointer-events:none;border-radius:0 3px 3px 0;box-shadow:0 0 8px var(--brand)}
#pbar.on{opacity:1;width:82%;transition:width 8s cubic-bezier(.05,.8,.2,1)}
#pbar.done{opacity:0;width:100%;transition:width .18s ease-out,opacity .25s .18s}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:50;background:var(--bar);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);padding:var(--sat) var(--sar) 0 var(--sal)}
.top-in{height:var(--top);display:flex;align-items:center;gap:6px;padding:0 6px 0 12px;max-width:1240px;margin:0 auto}
.logo{display:flex;align-items:center;gap:8px;margin-right:auto;min-height:44px}
.lg-mark{width:34px;height:34px;flex:none;background:var(--logo) center/contain no-repeat}
.lg-word{font-size:18px;font-weight:800;letter-spacing:-.03em}
.lg-word b{display:inline-block;width:.8em;height:.92em;margin:0 .03em 0 .01em;vertical-align:-.09em;background:var(--four) center/contain no-repeat;color:transparent;overflow:hidden;font-size:1em}
.top-live{display:flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:16px;background:var(--live-tint);color:var(--live);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.top-live b{font-weight:700}
.top-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;border-radius:12px;color:var(--tx2);font-weight:600;font-size:13px}
.top-btn .i{width:22px;height:22px}
.top-x{display:none}

/* ---------- shell ---------- */
.shell{max-width:1000px;margin:0 auto}
#app{display:block;min-height:60vh}
#app.sw{animation:in .22s ease-out}
#app.is-loading{opacity:.5;transition:opacity .15s .1s}

/* sport nav: tabs on phones, rail on desktop */
#mpz-nav{position:sticky;top:calc(var(--top) + var(--sat));z-index:40;background:var(--bar);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--line);min-height:var(--nav)}
.sn{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 calc(4px + var(--sar)) 0 calc(4px + var(--sal));scroll-padding:0 40px}
.sn::-webkit-scrollbar,.db-s::-webkit-scrollbar,.fc::-webkit-scrollbar,.mk-ln::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.sn-a{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:var(--nav);padding:0 11px;color:var(--tx2);font-weight:600;font-size:13px;white-space:nowrap}
.sn-a .i{width:19px;height:19px}
.sn-a.is-on{color:var(--tx)}
.sn-a.is-on .i{color:var(--brand-tx)}
.sn-a.is-on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.sn-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--live);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center}

/* ---------- bottom tab bar ---------- */
.tb{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;height:calc(var(--tb) + var(--sab));padding:0 var(--sar) var(--sab) var(--sal);
  background:var(--bar);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line)}
.tb-a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--tx3);font-size:10.5px;font-weight:600;white-space:nowrap}
.tb-a .i{width:23px;height:23px}
.tb-a.is-on{color:var(--brand-tx)}
.tb-a:active{transform:scale(.94)}

/* ---------- list ---------- */
.ls{padding-bottom:16px}
.ls-h{font-size:12px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;padding:12px 12px 2px}
.db{display:flex;align-items:center;gap:6px;padding:8px 0 4px 8px}
.db-live{flex:none;display:flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:12px;background:var(--live-tint);color:var(--live);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.db-live.is-on{background:var(--live);color:#fff}
.db-live.is-on .dot,.db-live.is-on .dot::after{background:#fff}
.db-s{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding-right:8px;flex:1;min-width:0}
.db-a{flex:none;width:54px;height:44px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;scroll-snap-align:center;color:var(--tx2);line-height:1.2}
.db-a span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--tx3)}
.db-a b{font-size:12.5px;font-weight:700}
.db-a.is-today span{color:var(--brand-tx)}
.db-a.is-on{background:var(--on);color:var(--on-tx)}
.db-a.is-on span{color:inherit;opacity:.75}

.fc{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:8px 8px 10px}
html:not(.js) .fc{display:none}
.chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:17px;background:var(--sf);border:1px solid var(--line);color:var(--tx2);font-weight:600;font-size:13px;white-space:nowrap}
.chip::after{content:"";position:absolute;inset:-5px 0}
.chip i{font-style:normal;font-size:11.5px;color:var(--tx3);font-weight:600}
.chip i:empty{display:none}
.chip .i{width:15px;height:15px}
.chip.is-on{background:var(--on);border-color:var(--on);color:var(--on-tx)}
.chip.is-on i{color:inherit;opacity:.7}
.chip-live:not(.is-on){color:var(--live)}

.lgs{background:var(--sf);border-block:1px solid var(--line)}
.lg + .lg{border-top:1px solid var(--line)}
.lg-h{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px 0 12px;background:var(--sf2);cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none}
.lg-h::-webkit-details-marker,.mk summary::-webkit-details-marker,.inn summary::-webkit-details-marker{display:none}
.lg-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.lg-c{color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px;margin-right:7px}
.lg-n{font-weight:700;padding:13px 0}
.lg-k{font-style:normal;font-size:11px;font-weight:700;color:var(--tx3);min-width:22px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:var(--sf3);padding:0 6px}
.mk summary .i,.inn summary .i{width:18px;height:18px;color:var(--tx3);transition:transform .2s}
details[open]>summary>.i{transform:rotate(180deg)}
.lg-h::after{content:"";flex:none;width:7px;height:7px;margin:0 6px 3px 4px;border:solid var(--tx3);border-width:0 1.7px 1.7px 0;transform:rotate(45deg);transition:transform .2s}
.lg[open]>.lg-h::after{transform:rotate(-135deg);margin-bottom:-4px}
.more{display:flex;align-items:center;justify-content:center;min-height:48px;margin:12px;border-radius:14px;background:var(--sf);box-shadow:inset 0 0 0 1px var(--line);font-weight:700;color:var(--tx2)}

/* match row */
.m{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto 24px auto 36px;grid-template-rows:20px 20px;column-gap:5px;align-items:center;
  padding:8px 0 8px 4px;min-height:57px;border-top:1px solid var(--line);font-size:13.5px}
html:not(.js) .m{grid-template-columns:44px minmax(0,1fr) auto 24px auto 6px}
.m:active{background:var(--sf2)}
.m-status{grid-area:1/1/3/2;text-align:center;font-size:11.5px;line-height:1.25;color:var(--tx2);font-weight:600;overflow-wrap:anywhere}
.m-t{grid-area:1/2/3/3;min-width:0}
.m-t b{display:block;height:20px;line-height:20px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-t u{float:right;margin:4px 0 0 5px;width:9px;height:12px;border-radius:2px;background:var(--rc);color:#fff;font-size:8.5px;line-height:12px;text-align:center;text-decoration:none;font-weight:700}
.m-periods{grid-area:1/3/3/4;display:flex;color:var(--tx3);font-size:11.5px}
.m-periods i{font-style:normal;width:19px;text-align:center;line-height:20px}
.m-periods .g{width:24px;color:var(--brand-tx);font-weight:700}
.m-hs,.m-as{grid-column:4;text-align:center;font-weight:700;line-height:20px;font-size:14px}
.m-hs{grid-row:1}.m-as{grid-row:2}
.m-odds{grid-area:1/5/3/6;display:flex;gap:2px}
.m-odds .o{position:relative;width:38px;height:34px;line-height:34px;text-align:center;border-radius:8px;background:var(--sf2);font-size:11.5px;font-weight:600;color:var(--tx);overflow:hidden;white-space:nowrap}
.m-odds .o-na{color:var(--tx3)}
.m-odds .up{color:var(--up)}.m-odds .dn{color:var(--dn)}
.m-odds .up::after,.m-odds .dn::after{content:"";position:absolute;right:2px;border:3px solid transparent}
.m-odds .up::after{top:2px;border-bottom-color:var(--up);border-top:0}
.m-odds .dn::after{bottom:2px;border-top-color:var(--dn);border-bottom:0}
.fv{grid-area:1/6/3/7;align-self:stretch;margin:-8px 0;display:flex;align-items:center;justify-content:center;color:var(--tx3)}
.fv .i{width:19px;height:19px;opacity:.65}
.is-fav .fv,.fav[aria-pressed=true]{color:var(--yc)}
.is-fav .fv .i,.fav[aria-pressed=true] .i{opacity:1;fill:currentColor}
/* states */
.m[data-state=live] .m-status{color:var(--live);font-weight:700}
.m[data-state=live] .m-hs,.m[data-state=live] .m-as{color:var(--live)}
.m[data-state=live]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--live)}
.m[data-state=live] .m-status{animation:blink 2s ease-in-out infinite}
.m[data-state=finished] .m-t b{color:var(--tx2)}
.m[data-w="1"] .m-t b:first-child,.m[data-w="2"] .m-t b:last-child{color:var(--tx);font-weight:700}
.m[data-w="1"] .m-as,.m[data-w="2"] .m-hs{color:var(--tx2);font-weight:500}
.m[data-state=postponed] .m-t,.m[data-state=cancelled] .m-t{opacity:.55}
.m[data-sv="1"] .m-t b:first-child::before,.m[data-sv="2"] .m-t b:last-child::before,.sv{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--yc);margin-right:5px;vertical-align:1px}
.m.goal{animation:goal 1.3s ease-in-out 4}
.m.goal .m-hs,.m.goal .m-as{animation:pop .6s ease-out 2}
/* filters */
.ls[data-f=live] .m:not([data-state=live]),.ls[data-f=finished] .m:not([data-state=finished]),.ls[data-f=scheduled] .m:not([data-state=scheduled]),.ls[data-f=fav] .lgs .m:not(.is-fav),.lg.is-x{display:none}
.favx h2{font-size:12px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;padding:16px 12px 8px}
.favx div{background:var(--sf);border-block:1px solid var(--line)}
.favx .m:first-child{border-top:0}
.favx small{grid-area:1/3/3/6;color:var(--tx3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding-right:4px}
/* phones: period columns win over odds chips */
@media (max-width:519px){
  .m-periods:not(:empty) ~ .m-odds{display:none}
}

/* ---------- generic ---------- */
.card{background:var(--sf);border-block:1px solid var(--line);margin-top:10px}
.card-h{font-size:12px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;padding:14px 14px 8px}
.note{padding:14px;color:var(--tx2)}
.hint{color:var(--tx2);font-size:12.5px;padding:8px 14px 0}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:22px;background:var(--on);color:var(--on-tx);font-weight:700;font-size:14px}
.btn-g{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-d{background:transparent;color:var(--dn);box-shadow:inset 0 0 0 1.5px currentColor}
.btn:active{transform:scale(.97)}
.empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:44px 24px;color:var(--tx2)}
.empty>.i{width:52px;height:52px;padding:14px;border-radius:50%;background:var(--sf3);color:var(--tx3)}
.empty p{max-width:300px}
.msg{text-align:center;padding:56px 24px 40px}
.msg-c{font-size:72px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--brand),var(--tx3));-webkit-background-clip:text;background-clip:text;color:transparent}
.msg h1{font-size:22px;margin:14px 0 8px;letter-spacing:-.02em}
.msg p{color:var(--tx2);max-width:360px;margin:0 auto}
.msg-a{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px!important}
.sk{padding:12px}
.sk i{display:block;height:44px;margin-bottom:10px;border-radius:10px;background:linear-gradient(90deg,var(--sf3) 25%,var(--sf2) 50%,var(--sf3) 75%);background-size:200% 100%;animation:sk 1.2s linear infinite}
.sk i:first-child{height:86px}

/* ---------- match page ---------- */
.mh{background:var(--sf);border-bottom:1px solid var(--line);padding:0 12px 14px;position:relative;overflow:hidden}
.mh::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0,var(--tint),transparent 70%);pointer-events:none}
.mh[data-state=live]::before{background:radial-gradient(120% 90% at 50% 0,var(--live-tint),transparent 70%)}
.mh>*{position:relative}
.mh-top{display:flex;align-items:center;min-height:48px;margin:0 -8px}
.mh-back,.fav{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--tx2);border-radius:12px}
html:not(.js) .fav{visibility:hidden}
.fav .i,.mh-back .i{width:22px;height:22px}
.mh-lg{flex:1;min-width:0;text-align:center;font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 0}
.mh-lg span{display:block;color:var(--tx3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.mh-lg b{font-weight:700}
.mh-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:8px;padding-top:6px}
.mh-team{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.crest{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;letter-spacing:-.02em;color:#fff;
  background:linear-gradient(145deg,hsl(var(--h) 62% 48%),hsl(calc(var(--h) + 30) 58% 32%));box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.mh-name{font-weight:700;font-size:14.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.mh[data-state=finished] .mh-team:not(.is-w) .mh-name{color:var(--tx2)}
.mh-mid{min-width:104px;text-align:center;padding-top:4px}
.mh-score{display:flex;align-items:center;justify-content:center;gap:6px;font-size:38px;font-weight:800;line-height:54px;letter-spacing:-.02em}
.mh-score.is-l{font-size:22px;gap:5px}
.mh-score.is-xl{font-size:17px;gap:4px;letter-spacing:0}
.mh-score.is-l i,.mh-score.is-xl i{font-size:18px;transform:none}
.mh-score i{font-style:normal;color:var(--tx3);font-weight:500;font-size:28px;transform:translateY(-3px)}
.mh[data-state=live] .mh-score{color:var(--live)}
.mh-ko{font-size:32px;font-weight:800;line-height:54px;letter-spacing:-.02em}
.mh-status{display:inline-flex;align-items:center;gap:7px;margin-top:2px;padding:4px 11px;border-radius:12px;background:var(--sf3);font-size:12px;font-weight:700;color:var(--tx2)}
.mh[data-state=live] .mh-status{background:var(--live-tint);color:var(--live)}
.mh-game{margin-top:6px;font-weight:700;color:var(--brand-tx);font-size:13px}
.mh-per{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:12px;font-size:12px;color:var(--tx2)}
.mh-per b{color:var(--tx)}
.mh-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:12px;font-size:12px;color:var(--tx2)}
.mh-meta .i{width:14px;height:14px;margin-right:5px;vertical-align:-2px;color:var(--tx3)}
.mh.goal .mh-score{animation:pop .6s ease-out 3}

.tabs{display:flex;background:var(--sf);border-bottom:1px solid var(--line);position:sticky;top:calc(var(--top) + var(--nav) + var(--sat));z-index:30;overflow-x:auto;scrollbar-width:none}
.tab{position:relative;flex:1 1 0;min-width:84px;height:46px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--tx2)}
.mp[data-tab=summary] .tab[data-tab=summary],.mp[data-tab=stats] .tab[data-tab=stats],.mp[data-tab=odds] .tab[data-tab=odds],.mp[data-tab=scorecard] .tab[data-tab=scorecard]{color:var(--tx)}
.mp[data-tab=summary] .tab[data-tab=summary]::after,.mp[data-tab=stats] .tab[data-tab=stats]::after,.mp[data-tab=odds] .tab[data-tab=odds]::after,.mp[data-tab=scorecard] .tab[data-tab=scorecard]::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand)}
.pn{padding-bottom:16px;scroll-margin-top:150px}
.pn-h{font-size:12px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em;padding:16px 14px 0}
.js .pn-h{display:none}
.js .mp .pn{display:none}
.js .mp[data-tab=summary] [data-pn=summary],.js .mp[data-tab=stats] [data-pn=stats],.js .mp[data-tab=odds] [data-pn=odds],.js .mp[data-tab=scorecard] [data-pn=scorecard]{display:block;animation:in .2s ease-out}

/* timeline */
.ev-hd{display:flex;justify-content:space-between;gap:12px;padding:12px 14px 4px;font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em}
.ev-hd span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evs{padding:2px 8px 10px}
.ev{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center;min-height:44px;padding:3px 0}
.ev-c{display:flex;align-items:center;gap:8px;min-width:0}
.ev-home .ev-c:first-child{flex-direction:row-reverse;text-align:right}
.ev-m{justify-self:center;min-width:36px;padding:3px 4px;border-radius:9px;background:var(--sf2);text-align:center;font-size:11.5px;font-weight:700;color:var(--tx2)}
.ev-i{flex:none;width:22px;display:flex;justify-content:center}
.ev-i .i{width:19px;height:19px}
.ev-b{min-width:0;line-height:1.25}
.ev-b b{display:block;font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.ev-b small{display:block;font-size:12px;color:var(--tx2);overflow-wrap:anywhere}
.ev-b .out{color:var(--tx3)}
.ev-s{display:inline-block;margin-left:2px;padding:1px 6px;border-radius:6px;background:var(--on);color:var(--on-tx);font-weight:800;font-size:11.5px;white-space:nowrap;vertical-align:1px}
.ev-goal .ev-i{color:var(--brand-tx)}
.ev-og .ev-i,.ev-miss .ev-i{color:var(--dn)}
.ev-div{display:flex;align-items:center;gap:10px;padding:8px 6px;font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.06em}
.ev-div::before,.ev-div::after{content:"";flex:1;height:1px;background:var(--line)}
.cd{display:block;width:11px;height:15px;border-radius:2.5px;background:var(--yc);transform:rotate(6deg)}
.cd-r{background:var(--rc)}
.cd-yr{background:linear-gradient(135deg,var(--yc) 50%,var(--rc) 50%)}
.tg{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.03em;padding:2px 3px;border-radius:4px;background:var(--sf3);color:var(--tx2)}

/* period + cricket tables */
.pt,.sc{font-size:13px}
.pt th,.pt td,.sc th,.sc td{padding:10px 6px;text-align:center;border-top:1px solid var(--line);white-space:nowrap}
.pt thead th,.sc thead th{border-top:0;font-size:11px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pt th:first-child,.sc th:first-child{text-align:left;padding-left:14px;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.sc th:first-child{white-space:normal;max-width:none;min-width:140px}
.sc th small{display:block;font-weight:400;color:var(--tx3);font-size:11.5px}
.sc td:last-child,.pt td:last-child{padding-right:14px}
.sc td:nth-child(2){font-weight:700}
.sc .is-bat th{color:var(--brand-tx)}
.pt td{color:var(--tx2);min-width:30px}
.pt .pt-t{font-weight:800;color:var(--tx);font-size:14px}
.pt .is-w th{font-weight:800}
.inn summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px 0 14px;cursor:pointer;list-style:none}
.inn summary b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inn-t{font-weight:800}
.inn-x{padding:10px 14px;border-top:1px solid var(--line);color:var(--tx2);font-size:12.5px}
.inn .sc{border-top:1px solid var(--line)}
.fow{padding:4px 14px 14px;font-size:12.5px;color:var(--tx2);line-height:1.9}
.fow span{display:inline-block;margin-right:14px}
.fow b{color:var(--tx)}
.fow i{font-style:normal;color:var(--tx3)}
.lu{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 14px;font-size:13px}
.lu h4{font-size:12.5px;margin:0 0 6px}
.lu li{padding:3px 0;color:var(--tx2)}
.kv{padding:0 14px 8px}
.kv div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.kv div:first-child{border-top:0}
.kv dt{color:var(--tx2);flex:none}
.kv dd{font-weight:600;text-align:right;overflow-wrap:anywhere}

/* stats */
.sts{padding:4px 14px 14px}
.st{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;row-gap:6px;padding:9px 0}
.st>b{font-size:14px;font-weight:700}
.st>b:nth-child(3){text-align:right}
.st>span{text-align:center;font-size:12.5px;color:var(--tx2)}
.st-bar{grid-column:1/4;display:flex;gap:4px;height:6px}
.st-bar i{display:block;height:6px;border-radius:3px;background:var(--sf3);min-width:3px;transition:width .5s}
.st-h .st-bar i:first-child,.st-a .st-bar i:last-child{background:var(--brand)}

/* odds */
.od{padding-top:2px}
.od-lg{display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px 14px 4px;font-size:11.5px;color:var(--tx2)}
.od-lg b{color:var(--tx)}
.od-lg s,.ot s{text-decoration:none}
.od-lg s{color:var(--tx3)}
.od-lg .up::before,.od-lg .dn::before,.ot .up::after,.ot .dn::after{content:"";display:inline-block;border:4px solid transparent;vertical-align:middle}
.od-lg .up::before{border-bottom:5px solid var(--up);border-top:0;margin-right:5px}
.od-lg .dn::before{border-top:5px solid var(--dn);border-bottom:0;margin-right:5px}
.od-note{padding:14px;font-size:11.5px;color:var(--tx3);text-align:center}
.mk{background:var(--sf);border-block:1px solid var(--line);margin-top:8px}
.mk summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px 0 14px;cursor:pointer;list-style:none;user-select:none;-webkit-user-select:none}
.mk summary b{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-k{font-style:normal;font-size:11px;font-weight:700;color:var(--tx3);min-width:22px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:var(--sf3);padding:0 6px}
.mk-b{border-top:1px solid var(--line)}
.mk-ln{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 12px 4px}
html:not(.js) .mk-ln{display:none}
.mk-ln .chip{height:32px;min-width:48px;justify-content:center;padding:0 10px;background:var(--sf2)}
.mk-ln .chip.is-on{background:var(--on)}
.ot{table-layout:fixed}
.ot th,.ot td{padding:7px 4px;text-align:center;vertical-align:middle}
.ot thead th{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;padding:10px 4px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ot th:first-child{width:116px;text-align:left;padding-left:12px}
.ot tbody tr+tr{border-top:1px solid var(--line)}
.ot th small{display:block;font-size:10px;font-weight:700;color:var(--dn);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.ot .o{display:inline-block;font-size:14px;font-weight:700;padding:3px 7px;border-radius:7px;white-space:nowrap}
.ot s{display:block;line-height:1.1}
.ot s .o{font-size:11px;font-weight:500;color:var(--tx3);padding:0}
.ot .is-best>.o{background:var(--tint);color:var(--brand-tx)}
.ot .up{color:var(--up)}.ot .dn{color:var(--dn)}
.ot .up::after{border-bottom:5px solid var(--up);border-top:0;margin-left:4px;vertical-align:2px}
.ot .dn::after{border-top:5px solid var(--dn);border-bottom:0;margin-left:4px;vertical-align:1px}
.ot .is-st{opacity:.45}
.ot .o-na{color:var(--tx3);font-weight:500}
.ot-ln th{padding:10px 12px 6px!important;text-align:left;font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;width:auto!important}
.js .ot-ln{display:none}
.js .js-h{display:none}
.og{padding:10px 12px 12px}
.og+.og{border-top:1px solid var(--line)}
.og-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.og-h small{font-size:10px;font-weight:700;color:var(--dn);text-transform:uppercase;letter-spacing:.04em}
.og-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.og-w .og-g{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.og-c{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:34px;padding:0 9px;border-radius:8px;background:var(--sf2);font-size:12.5px;min-width:0}
.og-c i{font-style:normal;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.og-c .o{font-weight:700;flex:none}
.og-c .up{color:var(--up)}.og-c .dn{color:var(--dn)}
.og-m{align-self:center;font-size:12px;color:var(--tx3);padding-left:4px}
.og.is-st{opacity:.45}
.m[data-sport=cricket]{grid-template-columns:44px minmax(0,1fr) auto auto auto 36px}
.m[data-sport=cricket] .m-hs,.m[data-sport=cricket] .m-as{font-size:12.5px;text-align:right;min-width:24px}
.pt sup{font-size:9px;color:var(--tx3);margin-left:1px}
.kv small{font-weight:400;color:var(--tx3)}
.inn-h{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;padding:12px 14px 2px;border-top:1px solid var(--line);margin:0}
.bk{display:inline-flex;align-items:center;justify-content:center;width:95px;height:27px;padding:5px;border-radius:7px;background:var(--bk);overflow:hidden;vertical-align:middle}
.bk img{width:85px;height:17px;object-fit:contain}
.bk-t{display:inline-block;background:var(--sf2);box-shadow:inset 0 0 0 1px var(--line);color:var(--tx);font-size:12px;font-weight:700;line-height:17px;text-align:center;white-space:nowrap;text-overflow:ellipsis}

/* ---------- settings ---------- */
.set{padding-bottom:24px}
.set .card{padding-bottom:14px}
.seg{display:flex;gap:4px;margin:0 14px;padding:4px;border-radius:14px;background:var(--sf2);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{flex:1 1 0;min-width:0;height:40px;border-radius:10px;font-weight:700;font-size:13px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg .is-on{background:var(--on);color:var(--on-tx)}
.set-v{padding:0 14px;font-size:15px}
.set .btn{margin:12px 14px 0}
.ex .o{display:inline-block;margin-right:8px;padding:2px 8px;border-radius:7px;background:var(--sf2);font-weight:700;color:var(--tx)}
.about{text-align:center;padding-top:20px}
.about-l{display:inline-flex;align-items:center;gap:8px;margin-bottom:4px}

/* ---------- desktop ---------- */
@media (hover:hover){
  .m:hover,.sn-a:hover,.lg-h:hover,.mk summary:hover{background:var(--sf2)}
  .top-btn:hover,.mh-back:hover,.fav:hover,.fv:hover{color:var(--tx)}
  .db-a:not(.is-on):hover,.chip:not(.is-on):hover{background:var(--sf3)}
  .lg-n:hover,.mh-lg:hover b{text-decoration:underline}
}
@media (min-width:520px){
  .m{grid-template-columns:52px minmax(0,1fr) auto 28px auto 40px;column-gap:8px;padding-left:6px}
  .m-odds{gap:4px}
  .m-odds .o{width:46px;font-size:12px}
  .m-periods i{width:22px}
}
@media (min-width:960px){
  :root{--top:56px;--nav:0px;--tb:0px}
  body{padding-bottom:0}
  .tb{display:none}
  .top-x{display:flex;padding:0 12px}
  .top-in{padding:0 16px}
  .lg-mark{width:38px;height:38px}
  .lg-word{font-size:20px}
  .shell{display:grid;grid-template-columns:212px minmax(0,1fr);gap:20px;padding:20px 16px 48px;align-items:start}
  .shell:has(.mp){max-width:1240px}
  #mpz-nav{top:calc(var(--top) + 20px);background:var(--sf);border:1px solid var(--line);border-radius:16px;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:hidden;box-shadow:var(--sh)}
  .sn{flex-direction:column;padding:6px}
  .sn-a{height:44px;border-radius:10px;padding:0 12px;gap:10px;font-size:14px}
  .sn-a span{flex:1}
  .sn-a.is-on{background:var(--tint)}
  .sn-a.is-on::after{display:none}
  .lgs,.card,.mk,.favx div{border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
  .db{padding:0 0 6px}
  .db-s{padding:0}
  .fc{padding:8px 0 12px}
  .ls-h{padding:10px 4px 2px}
  .mh{border:1px solid var(--line);border-radius:16px 16px 0 0;padding:4px 20px 22px}
  .tabs{border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;top:var(--top)}
  .crest{width:64px;height:64px;font-size:21px}
  .mh-score{font-size:46px}
  .mh-name{font-size:16px}
  .msg{background:var(--sf);border:1px solid var(--line);border-radius:16px}
}
@media (min-width:1180px){
  .mp{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
  .mp .mp-odds{display:block!important;animation:none!important;padding:0}
  .mp-odds .pn-h{display:block;padding:2px 4px 0}
  .tab[data-tab=odds]{display:none}
  .js .mp[data-tab=odds] [data-pn=summary]{display:block}
  .mp[data-tab=odds] .tab[data-tab=summary]{color:var(--tx)}
  .mp-odds .ot th:first-child{width:112px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.odds-more{margin:14px 16px;font-size:13px;opacity:.65;text-align:center}