/* THE MATCH LAB v3 — dark, dense, strong. Near-black green-tinted surfaces, bold cards, bright pitch green. */
:root{
  --bg:#0B0F0E; --card:#161E1B; --card2:#1C2622; --ink:#F2F5F3; --mut:#A9B5AE; --mut2:#7E8B84;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.17);
  --acc:#1DB45A; --acc-soft:rgba(61,220,116,.13); --acc-ink:#3DDC74;
  --green:#1DB45A;
  --draw:#E5A93D; --draw-soft:rgba(229,169,61,.13); --away:#5B9BE8; --away-soft:rgba(91,155,232,.13);
  --neg:#FF6B57;
  --fd:"Plus Jakarta Sans",system-ui,sans-serif; --fb:"Plus Jakarta Sans",system-ui,sans-serif; --fm:"Plus Jakarta Sans",system-ui,sans-serif;
  --r:20px; --sh:0 12px 32px rgba(0,0,0,.45); --sh-sm:0 4px 14px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--acc-ink);text-decoration:none}
a:hover{text-decoration:underline}
img.crest{width:34px;height:34px;object-fit:contain;vertical-align:-9px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
img.crest.sm{width:24px;height:24px;vertical-align:-6px}
img.crest.lg{width:88px;height:88px}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--fm)}
.muted{color:var(--mut)}
.pos{color:var(--acc-ink)} .neg{color:var(--neg)}
h1,h2,h3{font-family:var(--fd);line-height:1.12;margin:0}
main{max-width:1060px;margin:0 auto;padding:0 18px 70px;display:block}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:12px 20px;flex-wrap:wrap}
.wordmark{font-family:var(--fd);font-weight:800;font-size:19px;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:9px}
.wordmark em{font-style:normal;color:var(--acc)}
.wordmark:hover{text-decoration:none}
.wm-box{width:26px;height:26px;border-radius:9px;background:var(--acc);position:relative;flex:none}
.wm-box::after{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:#fff}
.mast-tag{display:none}
.mast-nav{display:flex;gap:4px;margin-left:auto}
.mast-nav a{padding:8px 14px;border-radius:999px;color:var(--mut);font-weight:700;font-size:14.5px}
.mast-nav a:hover{text-decoration:none;background:var(--acc-soft);color:var(--acc-ink)}
.mast-nav a.on{background:var(--acc);color:#fff}
.mast-status{font-size:12.5px;color:var(--mut2);margin:0;width:100%}
@media(min-width:760px){.mast-status{width:auto;margin-left:6px}}
.loading{padding:44px 0;text-align:center;color:var(--mut);font-weight:600}
.error-box{background:#FDECE8;border:1px solid #F3C1B4;color:#7A2716;border-radius:var(--r);padding:20px 22px;margin:26px 0;font-size:15px}
.empty-note{color:var(--mut);font-size:14.5px;background:var(--card);border:1px dashed var(--line2);border-radius:14px;padding:14px 16px}
.backlink{display:inline-block;margin:20px 0 4px;font-weight:700;font-size:14.5px}
.kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-ink);margin:0 0 10px}
.block-h{font-size:20px;font-weight:800;margin:30px 0 12px;letter-spacing:-.01em}
.honesty{color:var(--mut);font-size:13.5px;margin:26px 0 0;max-width:72ch}
.table-note{color:var(--mut2);font-size:12.5px;margin:10px 0 0}
.scene-tag{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-ink);margin:0 0 8px}
.scene-title{font-size:clamp(30px,5.4vw,46px);font-weight:800;letter-spacing:-.02em;margin:0 0 10px}
.scene-title em{font-style:normal;color:var(--acc)}
.scene{margin-top:44px}
.scene-head{margin-bottom:18px}
.scene-note{display:block;color:var(--mut);font-size:15px;max-width:62ch;margin-top:8px}
.lede{color:var(--mut);font-size:16.5px;max-width:64ch;margin:0 0 8px}
.enter-btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:800;font-size:15.5px;border:none;border-radius:999px;padding:13px 26px;cursor:pointer;box-shadow:var(--sh-sm)}
.enter-btn:hover{background:var(--acc-ink);text-decoration:none}
.ghost-btn{display:inline-flex;align-items:center;background:#fff;color:var(--ink);font-weight:700;font-size:15px;border:1px solid var(--line2);border-radius:999px;padding:12px 22px;cursor:pointer}
.ghost-btn:hover{border-color:var(--acc);color:var(--acc-ink);text-decoration:none}
.entry{padding:52px 0 8px;text-align:center}
.entry-stage{display:none}
.entry-copy h1{font-size:clamp(38px,7vw,64px);font-weight:800;letter-spacing:-.025em;max-width:16ch;margin:0 auto}
.entry-copy h1 .thin{display:block;font-weight:800}
.entry-copy h1 em{font-style:normal;color:var(--acc)}
.entry-sub{color:var(--mut);font-size:18px;max-width:52ch;margin:18px auto 0}
.entry-sub b{color:var(--ink)}
.entry-actions{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;align-items:center}
.entry-meta{width:100%;margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.entry-meta span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13.5px;color:var(--mut);box-shadow:var(--sh-sm)}
.entry-meta b{color:var(--ink)}
.scroll-cue{display:none}
.obs-head{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin:44px 0 6px;flex-wrap:wrap}
.obs-head h2{font-size:clamp(28px,4.6vw,40px);font-weight:800;letter-spacing:-.02em}
.obs-head h2 em{font-style:normal;color:var(--acc)}
.signal{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:16px 18px;min-width:270px;max-width:360px;flex:1}
.signal h3{font-size:14px;margin:0 0 8px;display:flex;justify-content:space-between}
.signal h3 b{color:var(--neg);font-size:11px}
.signal-row{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);color:var(--ink);font-size:14px}
.signal-row:last-child{border-bottom:none}
.signal-row:hover{text-decoration:none;background:var(--acc-soft);border-radius:8px}
.sr-teams{flex:1;font-weight:600}
.sr-score{font-weight:800}
.sr-clock{color:var(--neg);font-weight:800;font-size:12px}
.obs-layout{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start;margin-top:14px}
@media(max-width:860px){.obs-layout{grid-template-columns:1fr}}
.rail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px;position:sticky;top:76px}
@media(max-width:860px){.rail{position:static}}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.field input,.field select{width:100%;padding:11px 13px;border:1.5px solid var(--line2);border-radius:12px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus{border-color:var(--acc);outline:none}
.rail-status{display:flex;flex-direction:column;gap:7px}
.rs-btn{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border:1.5px solid var(--line);border-radius:12px;color:var(--mut);font-weight:700;font-size:14px;cursor:pointer;width:100%;text-align:left;font-family:var(--fb)}
.rs-btn .rs-dot{width:8px;height:8px;border-radius:50%;background:var(--line2)}
.rs-btn.on{color:#fff;background:var(--acc);border-color:var(--acc)}
.rs-btn.on .rs-dot{background:#fff}
.featured{margin-top:20px;border-radius:16px;padding:16px;background:var(--acc-soft);border:1px solid #CBE9D4}
.featured .kicker{color:var(--acc-ink)}
.feat-teams{font-weight:800;font-size:17.5px;line-height:1.3;margin:6px 0}
.feat-teams .vs{color:var(--acc-ink);font-weight:600;font-size:13.5px}
.feat-meta{font-size:12.5px;color:var(--mut);margin:0 0 8px}
.feat-prob{font-size:12.5px;color:var(--acc-ink);font-weight:700;margin:0 0 12px}
.feat-btn{font-size:14px;padding:10px 18px}
.league-block{margin-bottom:20px}
.league-head{display:flex;align-items:baseline;gap:12px;margin:0 2px 10px}
.league-head h3{font-size:19px;font-weight:800}
.league-head .lcode{color:var(--mut2);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.league-head a{margin-left:auto;font-size:13.5px;font-weight:700}
.timeline{display:flex;flex-direction:column;gap:8px}
.mrow{display:grid;grid-template-columns:60px 1fr auto auto;gap:6px 12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:11px 14px;color:var(--ink);box-shadow:var(--sh-sm)}
.mrow:hover{text-decoration:none;border-color:var(--acc);transform:translateY(-1px)}
.mrow.is-live{border-color:#e8a5a5}
.mrow.is-live .mscore{font-size:18px}
.mtime{font-weight:800;font-size:13.5px;color:var(--mut)}
.mtime.live{color:#fff;background:#d92d20;border-radius:999px;padding:2px 7px;font-size:13px}
.node{display:none}
.mteams{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.mteams .vs{color:var(--mut2);font-weight:600;font-size:12.5px}
.mteams .win{color:var(--ink)}
.mteams .lose{color:var(--mut2)}
.mscore{font-weight:800;font-size:17px;text-align:right}
.mscore small{display:block;font-weight:600;font-size:11px;color:var(--mut2)}
.pwrap{display:flex;flex-direction:column;gap:4px;align-items:flex-end;min-width:150px}
.pstrip{display:flex;width:130px;height:8px;border-radius:99px;overflow:hidden;background:var(--line)}
.pstrip .ph{background:var(--acc)} .pstrip .pd{background:var(--draw)} .pstrip .pa{background:var(--away)}
.pmeta{font-size:12px;color:var(--mut)}
.pmeta b{color:var(--ink)}
.ppick{font-size:13px;color:var(--ink)}
.ppick b{color:var(--acc-ink)}
@media(max-width:640px){.mrow{grid-template-columns:52px 1fr auto}.pwrap{grid-column:1/-1;align-items:flex-start;min-width:0}.pstrip{width:100%}}
.match-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px;margin:12px 0}
.match-head{text-align:center;padding:24px 20px}
.mh-league{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink)}
.mh-teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:14px}
.mh-team h2{font-size:clamp(19px,4.6vw,27px);font-weight:800;letter-spacing:-.01em;margin-top:8px}
.mh-team .rt-sub{color:var(--mut);font-size:13px;margin:4px 0 0}
.mh-mid .big-score{font-size:48px;font-weight:800}
.mh-mid .kick{font-size:22px;font-weight:800;display:block}
.mh-mid .kick small{display:block;font-size:13px;color:var(--mut);font-weight:600}
.rt-venue{color:var(--mut2);font-size:12.5px;display:block;margin-top:6px}
.win-rows{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.win-row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr 52px;gap:12px;align-items:center}
.win-row .wr-name{font-weight:700;font-size:15.5px;display:flex;gap:8px;align-items:center;min-width:0}
.win-row .wr-bar{height:14px;border-radius:99px;background:var(--bg);overflow:hidden}
.win-row .wr-bar i{display:block;height:100%;border-radius:99px}
.win-row.h .wr-bar i{background:var(--acc)} .win-row.d .wr-bar i{background:var(--draw)} .win-row.a .wr-bar i{background:var(--away)}
.win-row .wr-pct{font-weight:800;font-size:24px;text-align:right}
.card-note{color:var(--mut);font-size:13.5px;margin:14px 0 0}
.big-score-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.most-score{font-size:64px;font-weight:800;letter-spacing:-.02em;color:var(--acc-ink);line-height:1}
.most-score-p{font-weight:800;font-size:18px;color:var(--mut)}
.score-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.score-chip{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px}
.score-chip b{color:var(--acc-ink)}
.goal-rows{display:flex;flex-direction:column;gap:10px}
.market-row{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.market-row:last-child{border-bottom:none}
.market-row b{font-size:16px}
.market-row .mbar{grid-column:1/-1;height:7px;border-radius:99px;background:var(--bg);overflow:hidden}
.market-row .mbar i{display:block;height:100%;background:var(--acc);border-radius:99px}
.more-btn{width:100%;padding:16px;border-radius:var(--r);border:1.5px dashed var(--line2);background:#fff;font:inherit;font-weight:800;font-size:16px;color:var(--acc-ink);cursor:pointer;margin:8px 0 4px}
.more-btn:hover{border-color:var(--acc)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.trio-cell{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center;box-shadow:var(--sh-sm)}
.tc-label{display:block;font-size:12.5px;font-weight:700;color:var(--mut)}
.tc-val{display:block;font-size:26px;font-weight:800;margin-top:2px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
.uni-grid{display:grid;grid-template-columns:220px 1fr 240px;gap:20px;align-items:start}
@media(max-width:1000px){.uni-grid{grid-template-columns:1fr}}
.uni-left,.uni-right{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm)}
.uni-center{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm)}
.big-mp{display:block;font-size:56px;font-weight:800;color:var(--acc-ink);line-height:1}
.big-mp-p{display:block;font-weight:700;color:var(--mut);margin:4px 0}
.split-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line);margin:8px 0}
.split-bar .ph{background:var(--acc)} .split-bar .pd{background:var(--draw)} .split-bar .pa{background:var(--away)}
.top-score{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-weight:700}
.xg-note{margin-top:14px;font-size:13.5px;color:var(--mut);line-height:1.65;border-top:1px dashed var(--line);padding-top:12px}
.xg-note b{color:var(--ink)}
.universe{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.ucell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;position:relative;cursor:pointer;min-height:26px}
.ucell.uhead,.ucell.ucorner{font-size:11px;font-weight:800;color:var(--mut2);cursor:default;aspect-ratio:auto;min-height:18px}
.udot{border-radius:50%;display:block}
.unum{display:none;font-size:9.5px;font-weight:700;color:var(--ink)}
.universe.precise .unum{display:block}
.universe.precise .udot{display:none}
.ucell.dim{opacity:.25} .ucell.hl{background:var(--acc-soft)} .ucell.sel{background:#CDEEDB}
.universe.mini .ucell{min-height:20px}
.matrix-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.matrix-head h3{font-size:16.5px;font-weight:800;margin:0}
.uni-toggle{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px}
.uni-toggle button{border:none;background:transparent;font:inherit;font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--mut)}
.uni-toggle button.on{background:var(--acc);color:#fff}
.matrix-readout{font-size:14px;color:var(--mut);margin:12px 0 0}
.matrix-readout b{color:var(--ink)}
.autopsy{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.autopsy{grid-template-columns:1fr}}
.autopsy-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.factor{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line)}
.factor:last-child{border-bottom:none}
.factor h4{margin:0;font-size:14.5px}
.factor p{margin:2px 0 0;color:var(--mut);font-size:13px}
.factor .fval{font-weight:800;white-space:nowrap}
.factor.off{opacity:.55}
.form-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);align-items:center}
.form-row h4{margin:0;font-size:14.5px}
.form-row p{margin:2px 0 0}
.fseq{display:flex;gap:5px}
.fmark{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff}
.fmark.w{background:var(--acc)} .fmark.l{background:var(--neg)} .fmark.d{background:var(--mut2)}
.meter-row{display:grid;grid-template-columns:170px 1fr 46px;gap:4px 12px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
.meter-row:last-child{border-bottom:none}
.meter{position:relative;height:9px;background:var(--bg);border-radius:99px}
.meter i{display:block;height:100%;background:var(--acc);border-radius:99px}
.meter em{position:absolute;top:-3px;width:2px;height:15px;background:var(--mut2)}
.m-val{font-weight:800;color:var(--acc-ink)}
.m-note{grid-column:1/-1;color:var(--mut2);font-size:12px}
.kv{display:flex;justify-content:space-between;border-top:1px dashed var(--line);padding-top:9px;font-size:14px}
.kv b{color:var(--acc-ink)}
.h2h-sum{font-size:14.5px;margin:0 0 6px}
.h2h-row{display:flex;gap:12px;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line);color:var(--mut);flex-wrap:wrap}
.h2h-row b{color:var(--ink)}
.unc{margin:0 0 8px;font-size:14.5px}
.lineups{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:700px){.lineups{grid-template-columns:1fr}}
.lu-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.lu-head h4{margin:0;font-size:16px}
.lu-head .formation{margin-left:auto;font-weight:800;color:var(--acc-ink)}
.lu-list{list-style:none;margin:0;padding:0}
.lu-list li{display:flex;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.lu-num{width:26px;font-weight:800;color:var(--mut)}
.lu-name{flex:1}
.lu-pos{color:var(--mut2);font-size:12.5px;font-weight:700}
.lu-subs{font-size:13.5px;color:var(--mut)}
.stat-list{display:flex;flex-direction:column}
.stat-row{display:grid;grid-template-columns:52px 1fr 52px;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14.5px;align-items:center}
.stat-row .sv{font-weight:800;text-align:center}
.stat-row .sl{text-align:center;color:var(--mut)}
.timeline-list{list-style:none;margin:0;padding:0}
.timeline-list li{display:flex;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
.tl-clock{font-weight:800;width:40px;color:var(--acc-ink)}
.tl-type{font-weight:700;min-width:110px}
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:8px;border-bottom:2px solid var(--line)}
table.data td{padding:8px;border-bottom:1px dashed var(--line)}
.lab-pick{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px;margin:18px 0}
@media(max-width:640px){.lab-pick{grid-template-columns:1fr}}
.sim-layout{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
@media(max-width:900px){.sim-layout{grid-template-columns:1fr}}
.sim-controls{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-sm)}
.sim-controls h3{font-size:17px;margin:0 0 6px}
.slider-ctl{display:flex;justify-content:space-between;font-weight:700;font-size:14px;margin:16px 0 6px}
input[type=range]{width:100%;accent-color:var(--acc)}
.lab-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.lt-cell{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center;box-shadow:var(--sh-sm)}
.lt-delta{display:block;font-size:12px;margin-top:3px;color:var(--mut)}
.lab-dual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.lab-dual{grid-template-columns:1fr}}
.sim-col{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh-sm)}
.lm-chip{display:inline-block;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;margin:0 7px 8px 0;font-size:13.5px;color:var(--mut)}
.lm-chip b{color:var(--acc-ink)}
.lab-markets{margin-top:14px}
.comp-search{width:100%;max-width:440px;padding:12px 16px;border:1.5px solid var(--line2);border-radius:999px;font:inherit;font-size:15px;margin:6px 0 18px;background:#fff}
.comp-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px}
.comp-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink);box-shadow:var(--sh-sm)}
.comp-item:hover{border-color:var(--acc);text-decoration:none}
.comp-item h3{font-size:16px;margin:0 0 3px}
.comp-item p{margin:0;color:var(--mut);font-size:13px}
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.team-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink);box-shadow:var(--sh-sm);display:flex;gap:10px;align-items:center;font-weight:700}
.team-card:hover{border-color:var(--acc);text-decoration:none}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
@media(max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--sh-sm)}
.k-num{display:block;font-size:31px;font-weight:800;color:var(--acc-ink)}
.k-label{font-size:12.5px;color:var(--mut)}
.verdict{background:var(--acc-soft);border:1px solid #CBE9D4;border-radius:16px;padding:14px 18px;font-weight:600}
.series-chart{width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:var(--sh-sm)}
.series-chart text{font-family:var(--fb);font-size:12px;font-weight:700}
.calib{display:flex;gap:6px;align-items:flex-end;margin:14px 0 4px}
.cal-col{flex:1;text-align:center}
.cal-bars{height:110px;display:flex;align-items:flex-end;justify-content:center;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 2px}
.cal-bars i{display:block;width:9px;border-radius:4px 4px 0 0}
.cal-bars .cp{background:var(--acc)} .cal-bars .co{background:#C9C2B2}
.cal-lab{display:block;font-size:11px;color:var(--mut);margin-top:5px}
.cal-n{display:block;font-size:10.5px;color:var(--mut2)}
.archive{display:flex;flex-direction:column;gap:8px}
.archive-row{display:grid;grid-template-columns:86px 1fr auto auto;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 15px;font-size:14px;align-items:center;box-shadow:var(--sh-sm)}
.archive-row .ar-date{color:var(--mut2);font-size:12.5px}
.archive-row .ar-verdict{font-weight:800;color:var(--neg)}
.archive-row.hit .ar-verdict{color:var(--acc-ink)}
@media(max-width:640px){.archive-row{grid-template-columns:1fr auto}.ar-date,.ar-probs{display:none}}
.method p{color:var(--mut);max-width:74ch}
.site-foot{border-top:1px solid var(--line);background:#fff;margin-top:20px}
.foot-grid{max-width:1060px;margin:0 auto;padding:26px 18px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:20px;align-items:start}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{font-weight:800;margin:0}
.foot-brand em{font-style:normal;color:var(--acc)}
.foot-note{color:var(--mut);font-size:13.5px;margin:0}
.foot-nav{display:flex;flex-direction:column;gap:7px}
.foot-nav a{font-weight:700;font-size:14px}
.foot-src{grid-column:1/-1;color:var(--mut2);font-size:12px;margin:0}
.reveal-grid{} .reveal-head{} .reveal-mid{} .reveal-team{} .pitch-tilt{display:none} .layer-strip{display:none}
.pick-card{background:linear-gradient(180deg,#EFF9F1,#fff);border:1.5px solid #BFE6CC}
.pick-card.neutral{background:var(--card);border:1px solid var(--line)}
.pick-main{font-size:26px;font-weight:800;margin:2px 0 8px;letter-spacing:-.01em}
.pick-odds{color:var(--acc-ink)}
.pick-line{font-size:15px;margin:0}
.top-picks{margin:38px 0 4px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px}
.pick-item{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink);box-shadow:var(--sh-sm);display:block}
.pick-item:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-1px)}
.pick-item .pi-teams{font-weight:700;font-size:14.5px;line-height:1.35}
.pick-item .pi-pick{margin-top:10px;font-size:13px;color:var(--mut)}
.pick-item .pi-pick b{display:block;font-size:21px;color:var(--acc-ink)}
.pick-item .pi-score{font-size:12.5px;color:var(--mut2);margin-top:3px}

@media(max-width:640px){.masthead{gap:8px;padding:10px 14px}.mast-nav a{padding:7px 10px;font-size:13.5px}.wordmark{font-size:17px}.mast-status{width:auto;margin-left:auto}}

/* ---------- app shell: bottom tab bar + segmented controls ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #e6e2d5;
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 0 8px; min-height: 60px; text-decoration: none;
  color: #7a7f78; font-size: 11px; font-weight: 600; line-height: 1.2;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--green); }
.tabbar a:active { background: #f0efe6; }
@media (min-width: 641px) { .tabbar { display: none; } }
@media (max-width: 640px) {
  .mast-nav { display: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  main { padding-bottom: 24px; }
}
.date-switch, .scope-switch {
  display: inline-flex; gap: 2px; background: #fff; border: 1px solid #e6e2d5;
  border-radius: 999px; padding: 3px; margin: 0 8px 12px 0;
}
.date-switch button, .scope-switch button {
  border: 0; background: transparent; border-radius: 999px; cursor: pointer;
  padding: 0 16px; min-height: 44px; font: 600 14px "Plus Jakarta Sans", sans-serif; color: #5b615c;
}
.date-switch button.on, .scope-switch button.on { background: var(--green); color: #fff; }

/* ---------- board sections ---------- */
.live-block { background: #FFFBFB; border: 1.5px solid #e8a5a5; border-radius: 20px; padding: 16px; margin-bottom: 20px; }
.live-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: #b3261e; margin-bottom: 10px; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: #d92d20; animation: livedot 2.4s ease-in-out infinite; }
@keyframes livedot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.sec-label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a918c; margin: 18px 0 10px; }
.meta-line { font-size: 13px; color: var(--mut2); margin: 0 0 14px; }
.ptop { display: block; font-size: 13px; color: #2f6b45; font-weight: 700; margin-top: 3px; }

/* ---------- skeletons (calm shimmer, never a blank page) ---------- */
.skel-list { display: grid; gap: 10px; }
.skel-row { height: 64px; border-radius: 16px; background: linear-gradient(90deg, #efeee4 25%, #f7f6ef 50%, #efeee4 75%); background-size: 200% 100%; animation: shimmer 1.6s ease infinite; }
.skel-block { height: 180px; border-radius: 20px; background: linear-gradient(90deg, #efeee4 25%, #f7f6ef 50%, #efeee4 75%); background-size: 200% 100%; animation: shimmer 1.6s ease infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- top-3, value highlight, scorer status ---------- */
.top3-rows { display: grid; gap: 8px; margin-top: 6px; }
.top3-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0efe6; }
.top3-row:last-child { border-bottom: 0; }
.top3-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.top3-label { font-size: 15px; }
.top3-pct { font-size: 24px; color: var(--green); }
.value-highlight { display: block; background: #eef7f0; border: 1px solid #bfe3cb; border-radius: 16px; padding: 14px 16px; margin-bottom: 16px; text-decoration: none; color: var(--ink); }
.vh-kicker { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #2f6b45; margin-bottom: 4px; }
.vh-main { display: block; font-size: 15px; font-weight: 700; }
.vh-main .num { color: var(--green); }
.vh-sub { display: block; font-size: 13px; color: #5b615c; margin-top: 4px; }
.scorer-status { font-size: 13px; color: #5b615c; margin: 0 0 10px; }

/* ---------- design-craft raise: hierarchy, touch, calm motion ---------- */
.wr-pct { font-size: 22px; }
.match-card { padding: 22px; }
.block-h { margin-bottom: 12px; }
.enter-btn, .more-btn, .rs-btn { min-height: 44px; }
.enter-btn:active, .more-btn:active { transform: scale(.98); }
#app.app-in { animation: appin .25s ease; }
@keyframes appin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .live-dot, .skel-row, .skel-block, #app.app-in { animation: none; }
  .enter-btn:active, .more-btn:active { transform: none; }
}
.skel-row { display: flex; align-items: center; gap: 12px; padding: 0 14px; }
.skel-row i { display: block; background: #e0ded0; border-radius: 6px; }
.sk-time { width: 44px; height: 12px; flex: none; }
.sk-teams { flex: 1; height: 28px; }
.sk-strip { width: 90px; height: 12px; flex: none; }

/* ---------- combined design: match-center tabs, market groups, top strips, pitch ---------- */
.mc-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid var(--line); margin: 14px 0 4px; scrollbar-width: none; }
.mc-tabs::-webkit-scrollbar { display: none; }
.mc-tab { border: 0; background: transparent; padding: 0 18px; min-height: 48px; font: 800 15px "Plus Jakarta Sans", sans-serif; color: var(--mut); white-space: nowrap; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.mc-tab.on { color: var(--acc-ink); border-bottom-color: var(--acc); }
.mc-panel[hidden] { display: none; }
.mkt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.mkt-chips::-webkit-scrollbar { display: none; }
.mkt-chip { flex: none; border: 1.5px solid var(--line2); background: #fff; border-radius: 999px; padding: 0 16px; min-height: 44px; font: 700 14px "Plus Jakarta Sans", sans-serif; color: var(--mut); cursor: pointer; white-space: nowrap; }
.mkt-chip.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.mkt-group { border-top: 1px dashed var(--line); padding-top: 2px; margin-top: 6px; }
.mkt-head { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; font: 800 12px "Plus Jakarta Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-ink); padding: 0 2px; min-height: 44px; cursor: pointer; text-align: left; }
.mkt-head span:first-child { flex: 1; }
.mkt-count { background: var(--acc-soft); color: var(--acc-ink); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.mkt-chev { font-size: 16px; color: var(--mut2); }
.top-strip-sec { margin: 22px 0 4px; }
.top-strip-sec:empty { display: none; }
.strip-head { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.top-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 14px; min-width: 0; scrollbar-width: thin; }
.top-card { flex: 0 0 auto; width: 248px; max-width: 82vw; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; color: var(--ink); box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: 7px; }
.top-card:hover { border-color: var(--acc); text-decoration: none; }
.top-card.is-live { border-color: #e8a5a5; }
.tc-league { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--acc-ink); }
.tc-row { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; min-width: 0; }
.tc-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-mid { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 2px 0; }
.tc-score { font-size: 30px; font-weight: 800; }
.top-card.is-live .tc-score { color: #b3261e; }
.tc-clock { font-size: 13px; font-weight: 800; color: #b3261e; background: #fdf0ef; border-radius: 999px; padding: 3px 10px; }
.tc-vs { font-size: 22px; font-weight: 800; color: var(--acc-ink); letter-spacing: .04em; }
.tc-when { font-size: 13px; color: var(--mut); font-weight: 600; }
.tc-1x2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--bg); border-radius: 10px; padding: 8px; font-size: 12.5px; color: var(--mut); text-align: center; margin-top: 2px; }
.tc-1x2 b { display: block; font-size: 15px; color: var(--acc-ink); }
.tc-note { font-size: 12.5px; color: var(--mut2); text-align: center; padding: 4px 0 2px; }
.mrow.is-live .mscore { color: #b3261e; }
.pitch-side-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; }
.pitch-side-head b { font-size: 16px; }
.pitch-side-head .formation { margin-left: auto; font-weight: 800; color: var(--acc-ink); }
.pitch { position: relative; width: 100%; aspect-ratio: 68/105; max-height: 640px; background: #ddeede; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.pl-half { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.9); }
.pl-circle { position: absolute; width: 26%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pl-box-t { position: absolute; left: 22%; right: 22%; top: 0; height: 11%; border: 2px solid rgba(255,255,255,.9); border-top: 0; }
.pl-box-b { position: absolute; left: 22%; right: 22%; bottom: 0; height: 11%; border: 2px solid rgba(255,255,255,.9); border-bottom: 0; }
.pitch-player { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; width: 60px; text-align: center; }
.pp-num { background: #182420; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.pp-name { font-size: 11.5px; font-weight: 700; line-height: 1.15; background: rgba(255,255,255,.88); border-radius: 6px; padding: 1px 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-prob { font-size: 11px; font-weight: 800; color: var(--acc-ink); background: rgba(255,255,255,.88); border-radius: 6px; padding: 0 4px; }
.pp-prob:empty { display: none; }
.pitch-bench { font-size: 13.5px; color: var(--mut); margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .mkt-chev { transition: none; } }

/* ---------- v3 dark: reference-strength surfaces, image header, bigger crests ---------- */
.masthead { background: rgba(11,15,14,.92); border-bottom: 1px solid var(--line); }
.tabbar { background: rgba(11,15,14,.94); border-top: 1px solid rgba(255,255,255,.12); }
.tabbar a { color: #8A958F; }
.tabbar a:active { background: #1C2622; }
.date-switch, .scope-switch { background: #1C2622; border: 1px solid rgba(255,255,255,.12); }
.date-switch button, .scope-switch button { color: #A9B5AE; }
.ghost-btn { background: #1C2622; border: 1px solid var(--line2); color: var(--ink); }
.error-box { background: rgba(255,107,87,.12); border: 1px solid rgba(255,107,87,.35); color: #FFB4A8; }
.field input, .field select { background: #121917; border: 1.5px solid var(--line2); color: var(--ink); }
.rs-btn { background: #1C2622; border: 1.5px solid var(--line); color: var(--mut); }
.more-btn { background: #1C2622; border: 1.5px dashed var(--line2); color: var(--acc-ink); }
.comp-search { background: #121917; border: 1.5px solid var(--line2); color: var(--ink); }
.site-foot { background: #0E1513; }
.featured { border: 1px solid rgba(61,220,116,.30); }
.verdict { border: 1px solid rgba(61,220,116,.30); }
.pick-card { background: linear-gradient(180deg, rgba(61,220,116,.16), rgba(61,220,116,.05)); border: 1.5px solid rgba(61,220,116,.35); }
.ucell.sel { background: rgba(61,220,116,.25); }
.cal-bars .co { background: #3A4540; }
.ptop { color: #3DDC74; }
.vh-kicker { color: #3DDC74; }
.value-highlight { background: rgba(61,220,116,.10); border: 1px solid rgba(61,220,116,.30); }
.sec-label { color: #9AA69F; }
.enter-btn:hover { background: #159A4C; }
.skel-row, .skel-block { background: linear-gradient(90deg, #232C29 25%, #2A3531 50%, #232C29 75%); background-size: 200% 100%; }
.sk-time, .sk-teams, .sk-strip { background: #2E3A36; }
.top3-row { border-bottom: 1px solid var(--line); }

/* live treatment, brightened for dark */
.live-block { background: rgba(255,81,71,.08); border: 1.5px solid rgba(255,81,71,.35); }
.live-head { color: #FF6B5E; }
.live-dot { background: #FF5147; }
.mtime.live { background: #E5484D; }
.mrow.is-live { border-color: rgba(255,81,71,.45); }
.top-card.is-live { border-color: rgba(255,81,71,.45); }
.mrow.is-live .mscore { color: #FF6B5E; }
.top-card.is-live .tc-score { color: #FF6B5E; }
.tc-clock { color: #FF6B5E; background: rgba(255,81,71,.14); }

/* market chips + pill markets */
.mkt-chip { background: #1C2622; border: 1.5px solid var(--line2); color: var(--mut); }
.market-row { background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 15.5px; }
.market-row:last-child { border-bottom: 1px solid var(--line); }
.market-row b { font-size: 17px; }

/* stronger hierarchy + bigger crests */
.block-h { font-size: 22px; }
.mrow { padding: 12px 14px; }
.mteams { font-weight: 800; }
.mscore { font-size: 19px; }
.mrow.is-live .mscore { font-size: 20px; }
.top3-row { padding: 12px 0; }
.top3-pct { font-size: 27px; }
.most-score { font-size: 72px; }
.strip-head { font-size: 22px; }
.tc-score { font-size: 34px; }
.top-card img.crest { width: 36px; height: 36px; }
.tc-row { gap: 10px; }

/* stadium image header (photo is decorative, never captioned as the actual venue) */
.match-head {
  background: linear-gradient(rgba(6,10,9,.82), rgba(6,10,9,.45) 45%, rgba(6,10,9,.88)), url(/img/stadium.jpg) center/cover;
  border-color: rgba(255,255,255,.14);
  color: #fff;
  padding: 30px 20px 26px;
}
.match-head .mh-league { color: rgba(255,255,255,.85); }
.match-head .mh-team h2 { color: #fff; font-size: clamp(20px,5vw,30px); }
.match-head .mh-team .rt-sub { color: rgba(255,255,255,.7); }
.match-head .mh-mid .big-score { color: #fff; font-size: 60px; }
.match-head .mh-mid .kick { color: #fff; }
.match-head .mh-mid .kick small { color: rgba(255,255,255,.72); }
.match-head .rt-venue { color: rgba(255,255,255,.62); }

/* ---------- v4 full redesign: placement + strength (home first) ---------- */
/* New home order (viewDiscover): compact hero -> Top LIVE strip -> strongest picks
   -> Top Pre-match strip -> observatory (head + one control bar + featured + board).
   The old sidebar rail (.obs-layout/.rail) is no longer rendered; its rules stay
   below as dead CSS rather than risking a delete across other views. */

/* --- masthead: taller, stronger, identity slot --- */
.masthead { padding: 14px 20px; gap: 14px; }
.wordmark { font-size: 21px; }
.wm-box { width: 30px; height: 30px; border-radius: 10px; }
.wm-box::after { width: 10px; height: 10px; }
.mast-status { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--mut); width: auto; }
@media (min-width: 760px) { .mast-status { margin-left: 6px; } }
.mast-nav a { padding: 10px 16px; font-size: 15px; }
.mast-nav a.on { background: var(--acc-ink); color: #0B0F0E; }

/* --- compact hero: content surfaces faster --- */
.entry { padding: 28px 0 4px; }
.entry-copy h1 { font-size: clamp(32px, 6vw, 52px); }
.entry-sub { font-size: 17px; margin-top: 14px; }
.entry-actions { margin-top: 20px; }
.entry-meta { margin-top: 20px; }

/* --- buttons: one strong active language (bright green fill + near-black text) --- */
.enter-btn { min-height: 56px; font-size: 17px; padding: 15px 32px; background: var(--acc-ink); color: #0B0F0E; box-shadow: 0 10px 28px rgba(61,220,116,.28); }
.enter-btn:hover { background: var(--acc-ink); filter: brightness(1.08); text-decoration: none; }
.feat-btn { font-size: 15px; padding: 12px 22px; min-height: 48px; }
.ghost-btn { min-height: 52px; font-size: 16px; padding: 13px 24px; }
.more-btn { min-height: 56px; font-size: 17px; }
.date-switch button.on, .scope-switch button.on { background: var(--acc-ink); color: #0B0F0E; }
.date-switch button, .scope-switch button { min-height: 46px; font-size: 14.5px; font-weight: 700; }
.rs-btn.on { background: var(--acc-ink); border-color: var(--acc-ink); color: #0B0F0E; }
.rs-btn.on .rs-dot { background: #0B0F0E; }
.uni-toggle button.on { background: var(--acc-ink); color: #0B0F0E; }
.top3-rank { background: var(--acc-ink); color: #0B0F0E; }

/* --- one control bar replaces the sidebar rail (all filter IDs preserved) --- */
.ctl-bar { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; min-width: 0; }
.ctl-bar::-webkit-scrollbar { display: none; }
.ctl-bar .date-switch, .ctl-bar .scope-switch { margin: 0; flex: none; }
.ctl-bar .ctl-status { display: flex; gap: 8px; flex: none; }
.ctl-bar .rs-btn { width: auto; flex: none; border-radius: 999px; padding: 0 18px; min-height: 46px; justify-content: center; }
.ctl-bar .rs-dot { display: none; }
.ctl-date, .ctl-league, .ctl-team { flex: none; min-height: 46px; border: 1.5px solid var(--line2); border-radius: 999px; background: #121917; color: var(--ink); font: 700 14.5px "Plus Jakarta Sans", sans-serif; padding: 0 16px; }
.ctl-date { width: 158px; color-scheme: dark; }
.ctl-league { width: 208px; }
.ctl-team { width: 188px; }
.ctl-team::placeholder { color: var(--mut2); }

/* --- featured card: full width, deeper --- */
.featured { margin: 0 0 18px; padding: 20px; border-radius: 18px; }
.feat-teams { font-size: 19px; }

/* --- section heads: bigger + green accent bar --- */
.obs-head { margin: 40px 0 10px; }
.obs-head h2 { font-size: clamp(30px, 5vw, 42px); }
.strip-head { font-size: 24px; margin-bottom: 14px; }
.strip-head::before { content: ""; width: 5px; height: 24px; border-radius: 99px; background: var(--acc); flex: none; }
.top-strip-sec { margin: 26px 0 4px; }
.top-picks { margin: 32px 0 4px; }
.sec-label { font-size: 13px; margin: 20px 0 12px; }
.league-head h3 { font-size: 20px; }
.block-h { font-size: 24px; }

/* --- boxes/cards: deeper, more present --- */
.match-card, .top-card, .pick-item, .autopsy-sec, .uni-left, .uni-right, .uni-center,
.sim-controls, .sim-col, .kpi, .comp-item, .team-card { border-color: var(--line2); box-shadow: var(--sh); }
.match-card { padding: 22px; border-radius: 22px; }
.top-card { width: 264px; padding: 16px 18px; border-radius: 18px; }
.pick-item { padding: 18px; border-radius: 18px; }
.pick-item .pi-pick b { font-size: 23px; }
.mrow { padding: 13px 16px; border-radius: 18px; border-color: var(--line2); }
.mscore { font-size: 20px; }
.tc-score { font-size: 36px; }

/* --- match-center tabs + market chips: filled pills --- */
.mc-tabs { border-bottom: none; gap: 6px; padding: 4px 0 14px; }
.mc-tab { border: 1.5px solid var(--line2); background: #1C2622; border-radius: 999px; padding: 0 20px; min-height: 52px; font-size: 16px; margin-bottom: 0; }
.mc-tab.on { background: var(--acc-ink); border-color: var(--acc-ink); color: #0B0F0E; }
.mkt-chip { min-height: 48px; font-size: 15px; padding: 0 18px; }
.mkt-chip.on { background: var(--acc-ink); border-color: var(--acc-ink); color: #0B0F0E; }
.mkt-head { min-height: 48px; font-size: 13px; }

/* --- bottom tab bar: taller, bolder active --- */
.tabbar a { min-height: 64px; padding: 12px 0 10px; font-size: 11.5px; }
.tabbar a svg { width: 26px; height: 26px; }
.tabbar a.on { color: var(--acc-ink); font-weight: 800; }

/* TOPCORNER brand mark */
.wm-mark{width:30px;height:30px;border-radius:8px;display:block;flex:none}
.foot-brand .wm-mark{width:16px;height:16px;border-radius:4px}
.foot-brand{display:flex;align-items:center;gap:8px}

/* ---------- v5 home-top creative redesign ---------- */
/* New home top only: stadium photo band with an angled edge, an overlapping live
   spotlight card, stepped stat tiles, and reimagined strip cards. The discover
   template changed with it; all feature code, filter IDs, polling, match-center
   code, and the TOPCORNER brand block are untouched. The old .entry rules stay
   below as dead CSS (the hero no longer renders them). */

/* --- stadium photo band: full-bleed, angled bottom edge, giant left type --- */
.hero-band{margin:0 -18px;padding:38px 20px 54px;background:linear-gradient(rgba(6,10,9,.72),rgba(6,10,9,.55) 45%,rgba(6,10,9,.93)),url(/img/stadium.jpg) center 30%/cover;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),0 100%);color:#fff}
.hero-band-inner{max-width:1060px;margin:0 auto;text-align:left}
.hero-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 14px}
.hero-band h1{font-size:clamp(46px,13vw,88px);line-height:.98;letter-spacing:-.03em;color:#fff}
.hero-band h1 em{font-style:normal;color:var(--acc-ink)}
.hero-sub{color:rgba(255,255,255,.78);font-size:16.5px;max-width:46ch;margin:16px 0 0}
.hero-sub b{color:#fff}
.hero-cta-row{margin-top:22px}
.hero-cta{min-height:56px}

/* --- overlapping spotlight: first live match, else next upcoming --- */
.hero-spot{display:block;position:relative;z-index:2;margin:-26px 0 0;background:#121917;border:1.5px solid var(--line2);border-radius:20px;padding:16px 18px;color:var(--ink);box-shadow:var(--sh)}
.hero-spot:hover{text-decoration:none;border-color:var(--acc)}
.hero-spot[hidden]{display:none}
.hs-kicker{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:12px}
.hs-kicker>span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.hs-clock{background:var(--neg);color:#fff;border-radius:999px;padding:2px 10px;letter-spacing:0;text-transform:none;font-size:12.5px;flex:none}
.hs-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;font-size:18px;padding:3px 0}
.hs-row .hs-name{display:flex;align-items:center;gap:10px;min-width:0}
.hs-row .hs-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-score{font-size:24px;color:#fff;flex:none}
.hs-pick{display:block;margin-top:10px;font-size:14px;font-weight:700;color:var(--acc-ink)}

/* --- stepped stat tiles replace the plain pills --- */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 4px}
.hero-stat{background:var(--card);border:1px solid var(--line2);border-top:3px solid var(--acc);border-radius:16px;padding:14px 10px 12px;min-width:0}
.hero-stat:nth-child(2){margin-top:10px}
.hero-stat b{display:block;font-size:26px;line-height:1;color:var(--acc-ink);letter-spacing:-.02em}
.hero-stat span{display:block;font-size:11px;font-weight:700;color:var(--mut);margin-top:5px;line-height:1.3}

/* --- strip heads + cards, reimagined --- */
.strip-head{font-size:26px}
.strip-head::before{transform:skewX(-14deg)}
.top-strip{scroll-snap-type:x proximity;padding:14px 2px 14px}
.top-card{position:relative;scroll-snap-align:start}
.top-card.is-live{border-color:var(--line2);border-left:4px solid var(--acc-ink)}
.top-card.is-live::before{content:"LIVE";position:absolute;top:-11px;left:16px;background:var(--neg);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:999px}
.top-card.is-live .tc-score{font-size:44px}
.tc-vs{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--line2);border-radius:50%;font-size:13px;font-weight:800}

/* --- strongest picks display header --- */
.picks-display{font-size:clamp(30px,8vw,48px);font-weight:800;letter-spacing:-.025em;margin:0 0 4px;line-height:1.05}
.picks-display em{font-style:normal;color:var(--acc)}

/* --- v6: competitions browser (Flashscore-style list, our dark identity) --- */
.comp-strip{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:thin}
.comp-day{flex:none;min-width:54px;padding:10px 8px 8px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--mut2);cursor:pointer;text-align:center;border-radius:10px 10px 0 0}
.comp-day span{display:block;font-size:11px;font-weight:800;letter-spacing:.08em}
.comp-day b{display:block;font-size:15px;font-weight:800;margin-top:3px}
.comp-day.on{color:var(--acc-ink);border-bottom-color:var(--acc)}
.comp-day:disabled{opacity:.35;cursor:default}
.comp-strip-note{font-size:12px;color:var(--mut);margin:0 0 6px}
.comp-allgames{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line2);font-size:20px;font-weight:800}
.comp-sec-label{background:var(--card);border:1px solid var(--line2);border-radius:10px;color:var(--acc-ink);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:10px 12px;margin:18px 0 4px}
.comp-group-head{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);padding:16px 4px 6px}
.comp-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 4px;border-bottom:1px solid var(--line2);color:var(--ink);text-decoration:none}
.comp-row:hover{text-decoration:none}
.comp-flag{flex:none;width:28px;font-size:22px;text-align:center;line-height:1}
.comp-txt{display:flex;flex-direction:column;min-width:0}
.comp-txt small{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--mut)}
.comp-txt b{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comp-counts{margin-left:auto;flex:none;display:flex;align-items:center;gap:10px}
.comp-live{background:var(--neg);color:#fff;font-size:13px;font-weight:800;padding:3px 10px;border-radius:7px}
.comp-total{font-size:15px;color:var(--mut2)}
.comp-foot{font-size:12px;color:var(--mut);margin:20px 4px 0;line-height:1.5}

/* ---------- slip builder ---------- */
.slip-rule{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--mut);font-size:14.5px}
.slip-rule b{color:var(--ink)}
.slip-stake{display:flex;gap:10px;flex-wrap:wrap}
.slip-stake .field{margin-bottom:0;flex:1;min-width:180px}
.slip-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);padding:18px;margin:18px 0}
.risk-chips{display:flex;gap:8px;flex-wrap:wrap}
.risk-chip{flex:none;border:1.5px solid var(--line2);background:var(--card);border-radius:999px;padding:0 16px;min-height:44px;font-weight:700;font-size:14px;color:var(--mut);cursor:pointer;white-space:nowrap}
.risk-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.slip-legedit{font-size:13px;color:var(--mut2);margin-top:4px}
.slip-legedit select{margin-left:6px;max-width:100%;font-size:13px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 6px}
.slip-legwrap{padding:10px 0;border-bottom:1px dashed var(--line)}
.slip-leg{display:flex;gap:10px;align-items:baseline}
.slip-odd{font-size:13px;color:var(--mut2);margin-top:2px}
.slip-odd b{color:var(--ink)}
.odd-real{color:var(--acc-ink);font-weight:800}
.slip-leg b{color:var(--ink)}
.slip-leg .num{margin-left:auto;color:var(--acc-ink);font-weight:800;white-space:nowrap}
.slip-total{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:15px}
.slip-total b{color:var(--ink)}

/* ---------- rich match cards (Discover board) ---------- */
.mc-list-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 12px}
.mc-list-head h2{font-size:20px;font-weight:800;letter-spacing:.02em}
.mc-list-head span{color:var(--mut2);font-size:13.5px;font-weight:700;white-space:nowrap}
.timeline{gap:14px}
.mcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--sh-sm);color:var(--ink)}
.mcard:hover{text-decoration:none;border-color:var(--acc)}
.mcard.is-live{border-color:rgba(255,81,71,.35)}
.mc-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.mc-league{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.mc-when{color:var(--mut2);font-size:13.5px;font-weight:600;white-space:nowrap}
.mc-when.live{color:#FF6B5E}
.mc-ring{margin-left:auto;width:46px;height:46px;flex:none;border-radius:50%;background:conic-gradient(var(--rc) var(--rp),rgba(255,255,255,.09) 0);display:flex;align-items:center;justify-content:center}
.mc-ring b{width:36px;height:36px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink)}
.mc-main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center;margin-bottom:14px}
.mc-team{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.mc-crest{height:56px;display:flex;align-items:center}
.mcard img.crest{width:56px;height:56px;vertical-align:0}
.mc-name{font-weight:700;font-size:15.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mc-name.win{color:var(--acc-ink)} .mc-name.lose{color:var(--mut2)}
.mc-score{text-align:center;font-size:34px;font-weight:800;line-height:1.1;white-space:nowrap}
.mc-score small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--mut2);margin-top:4px}
.mc-score.dim{color:var(--mut2)}
.mc-bar-labels{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);font-weight:700;margin-bottom:6px}
.mc-bar-labels b{color:var(--ink)}
.mc-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line);margin-bottom:14px}
.mc-bar i{display:block;height:100%}
.mc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.mc-chip{background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--mut)}
.mc-chip.yes{color:var(--acc-ink);border-color:rgba(61,220,116,.35);background:var(--acc-soft)}
.mc-chip.no{color:var(--mut2)}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.mc-note{color:var(--mut);font-size:13.5px}
.mc-note b{color:var(--ink)}
.mc-analysis{color:var(--acc-ink);font-weight:800;font-size:14.5px;white-space:nowrap}
@media(max-width:480px){.mc-score{font-size:28px}.mcard img.crest{width:48px;height:48px}.mc-crest{height:48px}.mc-name{font-size:14px}}

/* ---------- match analysis enrichment ---------- */
.hero-card .hero-score{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px}
.hero-team{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;flex:1;min-width:0}
.hero-team b{font-size:15px;line-height:1.25}
.hero-mid{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.hero-mid .num{font-size:38px;font-weight:800;line-height:1}
.hero-pill{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:var(--acc-ink);border:1px solid var(--acc);border-radius:999px;padding:4px 10px;white-space:nowrap}
.hero-pick{color:var(--mut);font-size:14.5px;margin:0}
.hero-pick b{color:var(--ink)}
.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.hero-mini{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.hero-mini b{font-size:20px}
.hero-mini.pick{background:var(--acc-soft);border-color:var(--acc)}
.hero-mini.pick b{color:var(--acc-ink)}
.conf-bar{display:block;height:8px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden}
.conf-bar i{display:block;height:100%;background:var(--acc)}
.insight-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.insight-list li{color:var(--mut);font-size:15px}
.insight-list li b{color:var(--ink)}
.radar-wrap{display:flex;justify-content:center}
.radar-svg{width:100%;max-width:340px;height:auto;display:block}
.radar-legend{font-size:13.5px;color:var(--mut);display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 0}
.dot-h,.dot-a{display:inline-block;width:10px;height:10px;border-radius:3px}
.dot-h{background:#3DDC74}.dot-a{background:#5B9BE8}
.tape-team{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
.tape-rec{color:var(--mut);font-size:13.5px}
.tape-blocks{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tape-block{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:7px;font-size:12px;font-weight:800;color:#fff}
.tape-block.w{background:var(--acc)}.tape-block.d{background:#5A6B62}.tape-block.l{background:var(--neg)}
.race-svg{width:100%;height:auto;display:block;margin-top:6px}
.rec-team{display:flex;justify-content:space-between;gap:10px;margin:14px 0 6px}
.rec-team span{color:var(--mut);font-size:13.5px}
.rec-bar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.rec-bar .rw{background:var(--acc)}.rec-bar .rd{background:#5A6B62}.rec-bar .rl{background:var(--neg)}
.cmp-row{display:grid;grid-template-columns:44px 1fr 44px;gap:10px;align-items:center;margin:10px 0}
.cmp-row>.num{text-align:center;font-weight:800}
.cmp-row>.num:first-child{text-align:left}.cmp-row>.num:last-child{text-align:right}
.cmp-mid{display:flex;flex-direction:column;gap:5px;text-align:center;color:var(--mut);font-size:12.5px}
.cmp-bar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}
.cmp-bar .ch{background:var(--acc)}.cmp-bar .ca{background:var(--away)}
.split-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.split-card{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.split-grid{display:grid;grid-template-columns:1fr auto;gap:6px 10px;margin-top:10px;color:var(--mut);font-size:13.5px}
.split-grid b{color:var(--ink)}
.narr p{color:var(--mut);font-size:15.5px}
.narr p b{color:var(--ink)}
.narr-rule{font-size:13px;color:var(--mut2)}
@media(max-width:520px){.split-wrap{grid-template-columns:1fr}.hero-cards{grid-template-columns:1fr}.hero-mid .num{font-size:32px}}

/* Gate fix 2026-10-25: the pre-existing score grid inside full analysis
   overflowed phones (corner label "Lecce\Juventus" is unbreakable, so the
   12-col grid's min-content was 437px on a 354px panel). On narrow screens
   let columns shrink below min-content and let the corner label wrap. */
@media(max-width:640px){
  .universe{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ucell.ucorner{font-size:9px;overflow-wrap:anywhere;line-height:1.25}
}

/* Gate fix 2026-10-25 (2): .cols grid items default to min-width:auto, so
   the 408px odds table forced the single phone column past the panel.
   min-width:0 lets the table-wrap scroll internally, as designed. */
.cols > *{min-width:0}

/* Matches-list redesign 2026-10-25: grouped rows, top-pick pills, market
   chips, date strip. TOPCORNER dark/green only — no reference-theme colours. */
.mc-rowwrap{display:flex;flex-direction:column;gap:6px}
.mc-pillrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mc-pill{display:inline-flex;align-items:center;background:var(--acc-soft);border:1px solid rgba(61,220,116,.45);color:var(--acc-ink);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:800;white-space:nowrap}
.mc-pill.hit{background:var(--acc-soft);border-color:rgba(61,220,116,.45);color:var(--acc-ink)}
.mc-pill.miss{background:rgba(255,107,87,.08);border-color:rgba(255,107,87,.4);color:var(--neg)}
.mc-pill.dim{background:var(--card2);border-style:dashed;color:var(--mut2)}
.mc-pill-tag{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--mut2)}
.date-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.date-strip::-webkit-scrollbar{display:none}
.day-btn{flex:none;min-width:54px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:8px 6px;text-align:center;cursor:pointer;font-family:inherit}
.day-btn .dow{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--mut)}
.day-btn .dom{display:block;font-size:17px;font-weight:800;color:var(--ink)}
.day-btn.on{background:var(--acc);border-color:var(--acc)}
.day-btn.on .dow,.day-btn.on .dom{color:#fff}
.day-btn:disabled{opacity:.38;cursor:not-allowed}
.strip-note{color:var(--mut2);font-size:12.5px;margin:-2px 0 14px}
.mkt-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none}
.mkt-chips::-webkit-scrollbar{display:none}
.mkt-chip{flex:none;border:1.5px solid var(--line);background:var(--card2);color:var(--mut);border-radius:999px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;font-family:inherit}
.mkt-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.mkt-chip .n{opacity:.75;font-weight:800}
.league-head-btn{display:flex;align-items:baseline;gap:10px;background:none;border:none;color:var(--ink);cursor:pointer;padding:0;text-align:left;font-family:inherit;min-width:0}
.league-head-btn h3{overflow-wrap:anywhere}
.league-head-btn .chev{color:var(--mut2);font-size:13px;flex:none}
.lcount{background:var(--card2);border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800;flex:none}
.live-days{display:grid;gap:8px}
.live-day{display:flex;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-size:13.5px}
.live-day span:first-child{color:var(--mut2)}
.live-kpis{margin:16px 0}

/* ---------- SCOREBOARD REDESIGN 2026-10-25: live-scoreboard direction ----------
   Broadcast-style: huge numbers, calm live pulse, generous spacing, softer
   eye-comfortable dark palette (muted greens, warmer neutrals — NOT neon,
   NOT hamzaa.tech lime/coral). Appended last so these rules win.
   Fonts: Archivo for display/scores, Inter for body. */

/* --- palette + type --- */
:root{
  --bg:#101613; --card:#1A211E; --card2:#202A25; --ink:#E9EDEA; --mut:#B3BFB7; --mut2:#8B9790;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --acc:#2E9E5B; --acc-soft:rgba(111,207,151,.12); --acc-ink:#6FCF97;
  --green:#2E9E5B;
  --draw:#D8A24A; --draw-soft:rgba(216,162,74,.13); --away:#6E9AC8; --away-soft:rgba(110,154,200,.13);
  --neg:#E85D4D;
  --fd:"Archivo","Inter",system-ui,sans-serif; --fb:"Inter",system-ui,sans-serif; --fm:ui-monospace,SFMono-Regular,Menlo,monospace;
}
body{font-family:var(--fb);font-size:16px;line-height:1.65}
h1,h2,h3{font-family:var(--fd);letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* --- scoreboard numerals: Archivo 900, bigger --- */
.mc-score,.tc-score,.most-score,.mh-mid .big-score,.hero-mid .num,.hs-score{font-family:var(--fd);font-weight:900;letter-spacing:-.02em}
.mc-score{font-size:40px}
.tc-score{font-size:40px}
.top-card.is-live .tc-score{font-size:44px}
.most-score{font-size:76px}
.mh-mid .big-score{font-size:64px}
.hero-mid .num{font-size:44px}
.hs-score{font-size:28px}
.k-num,.top3-pct,.wr-pct{font-family:var(--fd);font-weight:800}
@media(max-width:480px){.mc-score{font-size:34px}}
@media(max-width:520px){.hero-mid .num{font-size:36px}}

/* --- surfaces: warmer, softer dark --- */
.masthead{background:rgba(16,22,19,.92)}
.tabbar{background:rgba(16,22,19,.94)}
.site-foot{background:#0E1411}
.hero-band{background:linear-gradient(rgba(10,14,12,.72),rgba(10,14,12,.55) 45%,rgba(10,14,12,.93)),url(/img/stadium.jpg) center 30%/cover}
.match-head{background:linear-gradient(rgba(10,14,12,.82),rgba(10,14,12,.45) 45%,rgba(10,14,12,.88)),url(/img/stadium.jpg) center/cover}
.ghost-btn,.rs-btn,.mkt-chip{background:#202A25}
.field input,.field select,.comp-search,.ctl-date,.ctl-league,.ctl-team{background:#171F1C}
.hero-spot{background:#171F1C}
.more-btn{background:#202A25}
.skel-row,.skel-block{background:linear-gradient(90deg,#222B26 25%,#28322C 50%,#222B26 75%);background-size:200% 100%}
.sk-time,.sk-teams,.sk-strip{background:#2C3833}
.ctl-date,.ctl-league,.ctl-team,.mc-tab,.mkt-chip,.mkt-head,.date-switch button,.scope-switch button{font-family:var(--fb)}

/* --- muted accents: no neon glare anywhere --- */
.featured{border-color:rgba(111,207,151,.28)}
.verdict{border-color:rgba(111,207,151,.28)}
.pick-card{background:linear-gradient(180deg,rgba(111,207,151,.16),rgba(111,207,151,.05));border-color:rgba(111,207,151,.35)}
.value-highlight{background:rgba(111,207,151,.10);border-color:rgba(111,207,151,.30)}
.mc-chip.yes{border-color:rgba(111,207,151,.35)}
.mc-pill{border-color:rgba(111,207,151,.4)}
.ucell.sel{background:rgba(111,207,151,.22)}
.dot-h{background:#6FCF97}.dot-a{background:#6E9AC8}
.pitch{background:#22382C}

/* --- live red, muted but still unmistakably live --- */
.live-block{background:rgba(232,93,77,.08);border-color:rgba(232,93,77,.35)}
.mrow.is-live{border-color:rgba(232,93,77,.45)}
.top-card.is-live{border-color:rgba(232,93,77,.45)}
.mrow.is-live .mscore,.top-card.is-live .tc-score{color:#F08A7D}
.mc-when.live{color:#F08A7D}
.live-head{color:#F08A7D}
.live-dot{background:#E85D4D;animation:livedot 3s ease-in-out infinite}
.mtime.live{background:#D84A3C}
.tc-clock{color:#F08A7D;background:rgba(232,93,77,.14)}

/* --- active states: soft mint fill + dark text (readable, no glare) --- */
.mkt-chip.on,.risk-chip.on,.day-btn.on{background:var(--acc-ink);border-color:var(--acc-ink);color:#0E1512}
.day-btn.on .dow,.day-btn.on .dom{color:#0E1512}
.date-switch button.on,.scope-switch button.on{background:var(--acc-ink);color:#0E1512}
.mc-tab.on,.rs-btn.on,.uni-toggle button.on,.top3-rank{background:var(--acc-ink);color:#0E1512}

/* --- breathing room: nothing crowded, nothing piled up --- */
main{padding-left:20px;padding-right:20px}
.timeline{gap:20px}
.league-block{margin-bottom:28px}
.match-card{padding:24px}
.top-strip-sec{margin:32px 0 4px}
.top-picks{margin:36px 0 4px}
.mc-list-head{margin:28px 0 12px}
.sec-label{margin:24px 0 12px}
.mcard{padding:18px}
.mc-main{margin-bottom:16px}
.lede{font-size:17px}
.card-note{font-size:14px}
.hero-band{padding:34px 20px 48px}
.hero-band h1{line-height:1}
.hero-sub{font-size:17px}

/* --- strips: real swipe feel (mandatory snap) --- */
.top-strip{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}

/* --- scoreboard cards: pick + number first, rest behind Details --- */
.mc-card-link{display:block;color:var(--ink)}
.mc-card-link:hover{text-decoration:none}
.mc-expand{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:transparent;border:1.5px dashed var(--line2);border-radius:12px;color:var(--mut);font:700 14px var(--fb);font-family:var(--fb);cursor:pointer;margin-top:14px}
.mc-expand:hover{color:var(--acc-ink);border-color:var(--acc-ink)}
.mc-extra[hidden]{display:none}

/* --- trust strip (Home): live record --- */
.trust-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;margin:18px 0 4px}
.trust-strip[hidden]{display:none}
.ts-numbers{display:flex;align-items:baseline;gap:10px;min-width:0}
.ts-num{font-family:var(--fd);font-weight:900;font-size:24px;color:var(--acc-ink);line-height:1}
.ts-label{font-size:13.5px;color:var(--mut);font-weight:600}
.ts-label b{color:var(--ink)}
.ts-link{margin-left:auto;font-weight:800;font-size:14px;white-space:nowrap}
.ts-method{width:100%;font-size:12.5px;color:var(--mut2)}

/* --- progressive disclosure: details/summary blocks --- */
details.disclosure{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:16px 0}
details.disclosure>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;font-size:14.5px;color:var(--acc-ink);display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
details.disclosure>summary::-webkit-details-marker{display:none}
details.disclosure>summary::after{content:"⌄";color:var(--mut2);flex:none}
details.disclosure[open]>summary::after{content:"⌃"}
details.disclosure>div{padding:0 16px 16px;color:var(--mut);font-size:14.5px;line-height:1.65}
details.disclosure>div b{color:var(--ink)}

/* --- slip card: ticket edge --- */
.slip-card{border-radius:22px}
.slip-card .slip-total{border-top:2px dashed var(--line2);padding-top:14px}

/* Reduced motion still wins over the slower live pulse above. */
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}

/* ---------- v7 FULL REDESIGN: the Saturday paper ----------
   One bold direction, editorial broadsheet. Warm paper, ink black, one
   sharp vermilion accent, navy for the away side, ochre for draws.
   Fraunces does all display and score work. IBM Plex Sans is the body
   voice. Inter is gone. This layer overrides the dark green layers
   above it. Nothing here changes record or match display logic,
   element IDs, or the live hero fix. */

/* --- semantic tokens, shadcn style: names, not raw colours in markup --- */
:root{
  --background:#F4EEE1; --foreground:#1B211E;
  --card:#FFFCF3; --card-foreground:#1B211E;
  --primary:#1B211E; --primary-foreground:#F4EEE1;
  --accent:#C24E1E; --accent-ink:#9E3B12; --accent-soft:rgba(194,78,30,.10);
  --muted:#EDE5D3; --muted-foreground:#5C665F;
  --border:rgba(27,33,30,.16); --border-strong:rgba(27,33,30,.32);
  --destructive:#B3261E; --destructive-soft:rgba(179,38,30,.08);
  --chart-home:#C24E1E; --chart-home-soft:rgba(194,78,30,.16);
  --chart-away:#2F5D8A; --chart-away-soft:rgba(47,93,138,.16);
  /* legacy names mapped onto the tokens, so old rules follow the paper */
  --bg:var(--background); --ink:var(--foreground); --mut:var(--muted-foreground); --mut2:#7A837D;
  --card2:#F1EAD8; --line:var(--border); --line2:var(--border-strong);
  --acc:var(--accent); --acc-soft:var(--accent-soft); --acc-ink:var(--accent-ink);
  --green:var(--accent); --draw:#9A7B1F; --draw-soft:rgba(154,123,31,.12);
  --away:#2F5D8A; --away-soft:var(--chart-away-soft); --neg:var(--destructive);
  --fd:"Fraunces",Georgia,serif; --fb:"IBM Plex Sans","Segoe UI",sans-serif; --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:14px; --sh:0 1px 0 rgba(27,33,30,.08); --sh-sm:0 1px 0 rgba(27,33,30,.08);
}
body{background-color:var(--background);background-image:radial-gradient(rgba(27,33,30,.045) 1px,transparent 1.5px);background-size:22px 22px;color:var(--foreground);font-family:var(--fb);line-height:1.65}
a{color:var(--accent-ink)}
h1,h2,h3{font-family:var(--fd);letter-spacing:-.015em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--foreground);color:var(--background);padding:12px 18px;font-weight:700;z-index:300;text-decoration:none}
.skip-link:focus{top:12px;color:var(--background)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- masthead and tab bar: paper, ink rule, no dark chrome --- */
.masthead{background:var(--background);border-bottom:3px solid var(--foreground);padding:14px 20px}
.wordmark{font-family:var(--fd);font-weight:900;font-size:26px;letter-spacing:-.02em;color:var(--foreground)}
.wordmark em{color:var(--accent)}
.mast-nav a{color:var(--muted-foreground)}
.mast-nav a:hover{background:var(--muted);color:var(--foreground);text-decoration:none}
.mast-nav a.on{background:var(--foreground);color:var(--background)}
.mast-status{background:var(--card);border:1px solid var(--border);color:var(--muted-foreground)}
.tabbar{background:var(--background);border-top:3px solid var(--foreground)}
.tabbar a{color:var(--muted-foreground);min-height:64px}
.tabbar a.on{color:var(--accent-ink)}
.tabbar a:active{background:var(--muted)}
.site-foot{background:var(--background);border-top:3px solid var(--foreground)}
.foot-brand{font-family:var(--fd);font-weight:900}
.foot-note,.foot-src{color:var(--muted-foreground)}

/* --- front page: headline grid, faint stadium texture, ruled cards --- */
.hero-band{margin:0 -20px;padding:44px 20px 40px;color:var(--foreground);clip-path:none;border-bottom:3px solid var(--foreground);background:linear-gradient(rgba(244,238,225,.94),rgba(244,238,225,.88)),url(/img/stadium.jpg) center 30%/cover}
.hero-band-inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,.8fr);gap:28px;align-items:end}
.hero-kicker{color:var(--accent-ink)}
.hero-band h1{font-family:var(--fd);font-weight:900;font-size:clamp(52px,10vw,96px);line-height:.95;letter-spacing:-.03em;color:var(--foreground)}
.hero-band h1 em{color:var(--accent)}
.hero-sub{color:var(--muted-foreground);font-size:18px}
.hero-sub b{color:var(--foreground)}
.hero-cta-row{margin-top:0}
.hero-spot{background:var(--card);border:1.5px solid var(--border-strong);border-left:6px solid var(--accent);color:var(--foreground);box-shadow:none}
.hero-spot:hover{border-color:var(--foreground)}
.hs-kicker{color:var(--accent-ink)}
.hs-clock{background:var(--destructive);color:#fff}
.hs-score{color:var(--foreground)}
.hs-pick{color:var(--accent-ink)}
.hero-stats{grid-template-columns:repeat(3,1fr);gap:14px}
.hero-stat{background:var(--card);border:1px solid var(--border);border-top:4px solid var(--foreground);border-radius:12px}
.hero-stat:nth-child(2){margin-top:14px}
.hero-stat b{color:var(--foreground);font-family:var(--fd);font-size:30px}
.hero-stat span{color:var(--muted-foreground)}
@media(max-width:640px){.hero-band-inner{grid-template-columns:1fr}.hero-stat:nth-child(2){margin-top:0}}

/* --- cards as articles: paper white, ink rule on top, no dark shadow --- */
.match-card,.mcard,.top-card,.pick-item,.kpi,.comp-item,.team-card,.sim-controls,.sim-col,.autopsy-sec,.uni-left,.uni-right,.uni-center,.slip-card,.featured,.signal,.hero-stat,.trust-strip,.value-highlight,.verdict,.pick-card,.series-chart,.comp-sec-label,.mc-league,.trio-cell,.lt-cell,.split-card,.hero-mini,.top3-row,.archive-row,.live-day,.comp-row,.market-row{box-shadow:none;border-color:var(--border)}
.match-card,.mcard,.top-card,.pick-item,.kpi,.comp-item,.team-card,.sim-controls,.sim-col,.autopsy-sec,.uni-left,.uni-right,.uni-center,.slip-card{background:var(--card);border:1.5px solid var(--border);border-radius:14px}
.match-card{border-top:4px solid var(--foreground)}
.mcard{border-top:4px solid var(--foreground)}
.mcard:hover,.top-card:hover,.pick-item:hover,.comp-item:hover,.team-card:hover{transform:none;border-color:var(--foreground)}
.mrow:hover{transform:none;border-color:var(--foreground)}
.mrow{background:var(--card);border-color:var(--border)}
.mc-score,.tc-score,.most-score,.mh-mid .big-score,.hero-mid .num,.hs-score,.k-num,.top3-pct,.wr-pct,.ts-num,.big-mp{font-family:var(--fd);font-weight:900;letter-spacing:-.02em;color:var(--foreground)}
.mc-score{font-size:42px}
.tc-score{font-size:42px}
.most-score{font-size:78px}
.mh-mid .big-score{font-size:66px}
.mc-name.win{color:var(--accent-ink)}
.mc-name.lose{color:var(--muted-foreground)}
.mc-ring{background:conic-gradient(var(--rc) var(--rp),rgba(27,33,30,.08) 0)}
.mc-ring b{background:var(--card);color:var(--foreground)}
.mc-bar,.pstrip,.split-bar,.rec-bar,.meter,.conf-bar,.mbar,.cmp-bar{background:rgba(27,33,30,.10)}
.mc-bar i,.pstrip .ph,.split-bar .ph,.rec-bar .rw,.meter i,.conf-bar i,.mbar i,.cmp-bar .ch{background:var(--accent)}
.pstrip .pd,.split-bar .pd,.rec-bar .rd{background:var(--draw)}
.pstrip .pa,.split-bar .pa,.rec-bar .rl,.cmp-bar .ca{background:var(--away)}
.mc-chip{background:var(--muted);border-color:var(--border);color:var(--muted-foreground)}
.mc-chip.yes{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.mc-pill{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.mc-pill.miss{background:var(--destructive-soft);border-color:var(--destructive);color:var(--destructive)}
.mc-pill.dim{background:var(--muted);border-style:dashed;color:var(--muted-foreground)}
.mc-pill-tag{color:var(--muted-foreground)}
.mc-note,.card-note,.meta-line,.table-note,.honesty,.strip-note,.comp-strip-note,.comp-foot{color:var(--muted-foreground)}
.kicker,.scene-tag,.mh-league,.tc-league,.vh-kicker{color:var(--accent-ink)}
.block-h,.strip-head,.obs-head h2,.picks-display,.scene-title{color:var(--foreground)}
.strip-head::before{background:var(--accent);transform:skewX(-14deg)}
.picks-display em,.scene-title em,.obs-head h2 em,.entry-copy h1 em{color:var(--accent)}
.top-card.is-live{border-left:4px solid var(--destructive)}
.top-card.is-live::before{background:var(--destructive)}
.top-card.is-live .tc-score{color:var(--destructive)}
.tc-clock{color:var(--destructive);background:var(--destructive-soft)}
.tc-vs{border-color:var(--border-strong);color:var(--foreground)}
.tc-1x2{background:var(--muted);color:var(--muted-foreground)}
.tc-1x2 b{color:var(--accent-ink)}
.tc-note{color:var(--muted-foreground)}

/* --- live: one pulse only, in the live block. Every other live dot is static. --- */
.live-dot{animation:none;background:var(--destructive)}
.live-block .live-dot{animation:livedot 3s ease-in-out infinite}
.live-block{background:var(--destructive-soft);border-color:var(--destructive)}
.live-head{color:var(--destructive)}
.mrow.is-live{border-color:var(--destructive)}
.mrow.is-live .mscore{color:var(--destructive)}
.mc-when.live{color:var(--destructive)}
.mtime.live{background:var(--destructive);color:#fff}

/* --- buttons, tabs, chips: ink primary, paper secondary, 44px minimum --- */
.enter-btn,.more-btn,.ghost-btn,.risk-chip,.mkt-chip,.mc-tab,.day-btn,.comp-day,.date-switch button,.scope-switch button,.rs-btn,.uni-toggle button,.mc-expand,.mkt-head,.tabbar a,.pop-cta{min-height:44px}
.enter-btn{background:var(--foreground);color:var(--background);box-shadow:none;border-radius:10px}
.enter-btn:hover{background:var(--foreground);filter:none;text-decoration:none}
.ghost-btn{background:transparent;border:1.5px solid var(--foreground);color:var(--foreground);border-radius:10px}
.ghost-btn:hover{border-color:var(--foreground);color:var(--foreground)}
.more-btn{background:var(--card);border:1.5px dashed var(--border-strong);color:var(--accent-ink);border-radius:12px}
.mc-tabs{display:flex;gap:4px;background:var(--muted);border:1px solid var(--border);border-radius:12px;padding:4px;overflow-x:auto}
.mc-tab{background:transparent;border:0;border-radius:8px;color:var(--muted-foreground);margin-bottom:0}
.mc-tab.on,.mc-tab[aria-selected="true"]{background:var(--card);border-color:var(--border);color:var(--foreground);box-shadow:0 1px 0 rgba(27,33,30,.10)}
.mkt-chip,.risk-chip,.date-switch button,.scope-switch button,.rs-btn,.day-btn,.comp-day{background:var(--card);border:1.5px solid var(--border);color:var(--muted-foreground)}
.mkt-chip.on,.risk-chip.on,.day-btn.on,.date-switch button.on,.scope-switch button.on,.rs-btn.on,.uni-toggle button.on,.top3-rank{background:var(--foreground);border-color:var(--foreground);color:var(--background)}
.day-btn.on .dow,.day-btn.on .dom{color:var(--background)}
.date-switch,.scope-switch{background:var(--card);border:1px solid var(--border)}
.uni-toggle{background:var(--muted);border:1px solid var(--border)}
.uni-toggle button{color:var(--muted-foreground)}
.mc-expand{border:1.5px dashed var(--border-strong);color:var(--muted-foreground)}
.mc-expand:hover{color:var(--accent-ink);border-color:var(--accent)}
.mkt-head{color:var(--accent-ink)}
.mkt-count{background:var(--accent-soft);color:var(--accent-ink)}
.mkt-chev{color:var(--muted-foreground)}

/* --- shadcn composition classes, vanilla translation --- */
.card{background:var(--card);border:1.5px solid var(--border);border-radius:14px}
.card-header{padding:4px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.card-title{font-family:var(--fd);font-weight:900;font-size:22px;color:var(--foreground);margin:0}
.card-description{color:var(--muted-foreground);font-size:14.5px;margin:6px 0 0}
.card-content{padding:2px 0}
.card-footer{border-top:1px solid var(--border);padding-top:12px;margin-top:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.field-group{display:flex;flex-direction:column;gap:16px}
.field-label{display:block;font-size:14px;font-weight:700;color:var(--foreground);margin-bottom:6px}
.field-description{color:var(--muted-foreground);font-size:13.5px;margin:6px 0 0}
.field-error{color:var(--destructive);font-size:13.5px;font-weight:700;margin:6px 0 0}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--destructive);outline:2px solid var(--destructive-soft)}
.field input,.field select,.comp-search,.ctl-date,.ctl-league,.ctl-team{background:var(--card);border:1.5px solid var(--border-strong);color:var(--foreground)}
.field label{color:var(--foreground);text-transform:none;letter-spacing:0;font-size:14px;font-weight:700}
.field input:focus,.field select:focus{border-color:var(--accent);outline:3px solid var(--accent-soft)}

/* --- match head: paper, not a dark photo panel --- */
.match-head{background:linear-gradient(rgba(244,238,225,.96),rgba(244,238,225,.90)),url(/img/stadium.jpg) center 30%/cover;border:1.5px solid var(--border);border-top:4px solid var(--foreground);color:var(--foreground)}
.match-head .mh-league{color:var(--accent-ink)}
.match-head .mh-team h2{color:var(--foreground)}
.match-head .mh-team .rt-sub{color:var(--muted-foreground)}
.match-head .mh-mid .big-score{color:var(--foreground)}
.match-head .mh-mid .kick{color:var(--foreground)}
.match-head .mh-mid .kick small{color:var(--muted-foreground)}
.match-head .rt-venue{color:var(--muted-foreground)}
.win-row .wr-bar{background:rgba(27,33,30,.10)}
.win-row.h .wr-bar i{background:var(--accent)} .win-row.d .wr-bar i{background:var(--draw)} .win-row.a .wr-bar i{background:var(--away)}
.pitch{background:#DCE6D2}
.pp-num{background:var(--foreground);color:var(--background)}
.pp-name,.pp-prob{background:rgba(255,252,243,.92)}
.pp-prob{color:var(--accent-ink)}
.dot-h{background:var(--chart-home)} .dot-a{background:var(--chart-away)}
.ucell.sel{background:var(--accent-soft)}
.ucell.hl{background:var(--accent-soft)}
.tape-block.w{background:var(--accent)} .tape-block.d{background:#7A837D} .tape-block.l{background:var(--destructive)}
.fmark.w{background:var(--accent)} .fmark.l{background:var(--destructive)} .fmark.d{background:#7A837D}
.top3-rank{background:var(--foreground);color:var(--background)}
.value-highlight{background:var(--accent-soft);border-color:var(--accent)}
.vh-kicker,.vh-main .num{color:var(--accent-ink)}
.featured{border-color:var(--accent)}
.pick-card{background:linear-gradient(180deg,var(--accent-soft),rgba(194,78,30,.03));border-color:var(--accent)}
.pick-card.neutral{background:var(--card);border-color:var(--border)}
.pick-odds{color:var(--accent-ink)}
.scorer-status{color:var(--muted-foreground)}
.error-box{background:var(--destructive-soft);border:1px solid var(--destructive);color:#7A1F18}
.empty-note{color:var(--muted-foreground);background:var(--card);border:1px dashed var(--border-strong)}
.skel-row,.skel-block{background:linear-gradient(90deg,#E9E1CC 25%,#F4EEE1 50%,#E9E1CC 75%);background-size:200% 100%}
.sk-time,.sk-teams,.sk-strip{background:#DDD3B8}
details.disclosure{background:var(--card);border:1px solid var(--border)}
details.disclosure>summary{color:var(--accent-ink)}
details.disclosure>div{color:var(--muted-foreground)}
details.disclosure>div b{color:var(--foreground)}
.slip-card{border-top:4px solid var(--foreground)}
.slip-card .slip-total{border-top:2px dashed var(--border-strong)}
.slip-legedit select{background:var(--card);color:var(--foreground);border:1px solid var(--border)}
.odd-real{color:var(--accent-ink)}
.trust-strip{background:var(--card);border:1.5px solid var(--foreground)}
.ts-num{color:var(--accent-ink)}
.ts-label{color:var(--muted-foreground)}
.ts-label b{color:var(--foreground)}
.ts-method{color:var(--muted-foreground)}
.comp-live{background:var(--destructive);color:#fff}
.comp-total{color:var(--muted-foreground)}
.comp-sec-label{background:var(--card);border:1px solid var(--border);color:var(--accent-ink)}
.comp-group-head{color:var(--muted-foreground)}
.comp-row{border-bottom:1px solid var(--border)}
.comp-day.on{color:var(--background);border-bottom-color:var(--foreground)}
.league-head .lcode{color:var(--muted-foreground)}
.lcount{background:var(--muted);border-color:var(--border);color:var(--muted-foreground)}
.sec-label{color:var(--muted-foreground)}
.lede{color:var(--muted-foreground)}
.scene-note{color:var(--muted-foreground)}
.ptop{color:var(--accent-ink)}
.narr p{color:var(--muted-foreground)}
.narr p b{color:var(--foreground)}
.xg-note{color:var(--muted-foreground)}
.xg-note b{color:var(--foreground)}
.method p{color:var(--muted-foreground)}

/* --- motion: one page entrance, colour only on frequent controls --- */
a,button,select,input{transition:background-color 180ms cubic-bezier(.22,1,.36,1),color 180ms cubic-bezier(.22,1,.36,1),border-color 180ms cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:no-preference){
  #app.app-in{animation:appin-v7 280ms cubic-bezier(.22,1,.36,1) both}
  @keyframes appin-v7{from{opacity:0;transform:translateY(6px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
  .live-block .live-dot{animation:livedot 3s ease-in-out infinite}
  .skel-row,.skel-block{animation:shimmer 1.6s cubic-bezier(.22,1,.36,1) infinite}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .live-dot{animation:none !important}
}

/* --- 320px reflow and 200 percent zoom: no horizontal scroll --- */
html,body{overflow-x:hidden}
main{min-width:0}
@media(max-width:400px){
  main{padding-left:12px;padding-right:12px}
  .hero-band{margin-left:-12px;margin-right:-12px;padding-left:14px;padding-right:14px}
  .hero-band h1{font-size:clamp(44px,15vw,64px)}
  .hero-stats{grid-template-columns:1fr}
  .mc-score{font-size:32px}
  .mcard img.crest{width:44px;height:44px}
  .mc-crest{height:44px}
  .mc-name{font-size:13.5px}
  .win-row{grid-template-columns:1fr 52px}
  .win-row .wr-bar{grid-column:1/-1}
  .trio,.lab-trio{grid-template-columns:1fr}
  .cols,.autopsy,.lab-dual,.lineups,.sim-layout,.uni-grid{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .hero-cards{grid-template-columns:1fr}
  .most-score{font-size:56px}
  .mh-mid .big-score{font-size:48px}
  .mh-team h2{font-size:17px}
  .top-card{width:248px}
  .archive-row{grid-template-columns:1fr auto}
  .ar-date,.ar-probs{display:none}
  .meter-row{grid-template-columns:1fr 46px}
  .meter-row .meter{grid-column:1/-1}
  .stat-row{grid-template-columns:40px 1fr 40px}
}

.lab-pick.field-group{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.lab-pick.field-group{grid-template-columns:1fr}}

/* v8 slip: risk radios and leg selects, 44px touch targets */
.slip-risk label{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:16px;cursor:pointer;font-size:15px}
.slip-risk input{width:18px;height:18px;accent-color:var(--accent)}
.slip-legedit select{min-height:44px}

/* Unified lineup pitch: one pitch, both teams. Home vermilion, away navy, plus HOME/AWAY text labels, never colour alone. */
.pitch-teams{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin:0 0 10px}
.pitch-team-head{display:flex;align-items:center;gap:8px;min-height:44px}
.pitch-team-head .formation{font-weight:800;color:var(--acc-ink)}
.pitch-team-tag{font-size:11px;font-weight:800;letter-spacing:.08em;background:var(--foreground);color:var(--background);border-radius:999px;padding:2px 8px}
.pitch-half-label{position:absolute;font-size:11px;font-weight:800;letter-spacing:.12em;color:rgba(27,33,30,.55);background:rgba(255,252,243,.75);border-radius:999px;padding:1px 8px}
.pitch-half-home{left:8px;top:8px}
.pitch-half-away{left:8px;bottom:8px}
.pitch-player.pp-home .pp-num{background:var(--chart-home);color:#fff}
.pitch-player.pp-away .pp-num{background:var(--chart-away);color:#fff}
.pp-pos{font-size:10px;font-weight:800;color:var(--muted-foreground);background:rgba(255,252,243,.92);border-radius:6px;padding:0 4px}
.pitch-text{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.pitch-text-side h4{margin:0 0 8px}
@media(max-width:700px){.pitch-text{grid-template-columns:1fr}}