:root{
  --bg: #0a0b0d;
  --panel: #121317;
  --panel-2: #17191e;
  --border: #24262d;
  --border-soft: #1b1d22;
  --divider: #2e3039;       
  --row-alt: #16181d;       
  --header-band: #20242c;   
  --header-band-border: #3a3d47;
  --cup-band: #241d10;      
  --cup-band-border: #5c4416;
  --text: #eae7e1;
  --text-dim: #90939c;
  --text-faint: #7c8089; 

  --accent: #e3a53d;        
  --accent-dim: #7a5e28;

  --good: #4ade80;          
  --bad: #f0645f;           

  --local: #5b9bd9;         
  --away: #d9705b;          
  --matchtotal: #9c8fd9;    
  --bothscore: #4fbfae;     

  --logo-bg: #eeece6;       

  --ball: #eae7e1;          
  --corner: #e2823f;        
  --card: #e8d23a;          
  --card-red: #d6543f;      

  --shadow: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  background:var(--bg); color:var(--text); margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  line-height:1.5;
}
::selection{ background:var(--accent); color:#1a1305; }
::-webkit-scrollbar{height:8px;width:8px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
img{ max-width:100%; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.dir{font-weight:700}
.dir.o{color:var(--good)}
.dir.u{color:var(--bad)}

.site-header{
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,var(--panel),var(--bg));
}
.site-inner{
  max-width:760px;margin:0 auto;padding:22px 20px 18px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; }
.mark{ flex-shrink:0; display:block; }
.wordmark{ display:flex; align-items:baseline; gap:2px; }
.wordmark .t1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.wordmark .t2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.wordmark.small .t1,.wordmark.small .t2{font-size:1.05rem}
.tagline{font-size:.82rem;color:var(--text-dim);margin:2px 0 0}

.header-right{display:flex;align-items:center;gap:8px}
.donate-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--accent-dim);background:var(--panel-2);color:var(--accent);
  font-weight:700;font-size:.78rem;padding:7px 16px;border-radius:999px;white-space:nowrap;flex-shrink:0;
  min-height:44px;
}
.donate-btn svg{width:14px;height:14px;flex-shrink:0}
.donate-btn:hover{background:var(--panel);border-color:var(--accent)}
.info-wrap{position:relative}
.icon-btn{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{color:var(--text);border-color:var(--local);background:var(--panel)}
.popover{
  position:absolute;top:26px;right:0;z-index:10;width:280px;
  background:var(--panel);border:1px solid var(--border-soft);border-radius:10px;
  padding:12px 14px;font-size:.78rem;color:var(--text-dim);box-shadow:var(--shadow);
}
#info-pop{position:fixed;right:auto;max-width:calc(100vw - 24px)}

.legend-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 12px}
.legend-cell{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-dim)}
.tag-mini{
  display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:16px;
  border-radius:4px;font-size:.6rem;font-weight:800;color:#0a0b0d;padding:0 4px;flex-shrink:0;
}
.popover-hr{border:none;border-top:1px solid var(--border-soft);margin:0 0 12px}
.legend-list{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.legend-list-item{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--text-dim)}
.legend-list-item .dir{width:16px;flex-shrink:0;text-align:center}
.star-inline{width:12px;height:12px;color:var(--accent);flex-shrink:0}
.popover-rule{font-size:.76rem;color:var(--text-dim);margin:0;line-height:1.55}

.tabbar-row{
  max-width:760px;margin:0 auto;padding:18px 20px 0;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.tabs{display:flex;gap:22px;position:relative}
.tab-btn{color:var(--text-dim);font-weight:700;font-size:.92rem;padding:6px 0 12px;position:relative}
.tab-btn.active{color:var(--text)}
.tab-underline{
  position:absolute;bottom:0;left:0;height:2px;width:1px;background:var(--accent);border-radius:2px;
  transform-origin:left center;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.tab-date{font-size:.78rem;color:var(--text-dim);margin:0}
.tabbar-rule{border-bottom:1px solid var(--border-soft);max-width:760px;margin:0 auto 22px;padding:0 20px}

.persistent-legend{
  display:none;
  max-width:760px;margin:14px auto 0;padding:10px 20px;
  align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
  background:var(--panel-2);
}
@media (min-width:640px){ .persistent-legend{display:flex} }
.pl-group{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;color:var(--text-dim)}
.pl-sep{width:1px;height:16px;background:var(--border)}

.compact-legend{
  display:flex;align-items:center;gap:14px;
  padding:10px 20px;border-bottom:1px solid var(--border-soft);
  background:var(--panel-2);
}
@media (min-width:640px){ .compact-legend{display:none} }
.cl-item{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-dim)}

.ad-banner{
  max-width:760px;margin:0 auto 20px;padding:0 20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.ad-banner .ad-label{
  font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);
}
.ad-banner .ad-slot{width:100%;max-width:300px;min-height:250px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
@media (min-width:640px){ .ad-banner .ad-slot{max-width:728px;min-height:250px} }

.side-rail{
  display:none;
  position:fixed; top:110px;
  width:300px; min-height:250px;
}
.side-rail:empty{display:none!important}
#side-rail-left{ left:calc(50% - 724px); }
#side-rail-right{ left:calc(50% + 424px); }
@media (min-width:1520px){
  .side-rail{display:block}
}

.sort-toolbar{
  position:sticky;top:0;z-index:15;background:var(--bg);
  max-width:760px;margin:0 auto 14px;padding:10px 20px;
  border-bottom:1px solid var(--border-soft);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.sort-toolbar-label{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.sort-order-group{display:flex;align-items:center;gap:10px;margin-left:auto}
.sort-control{position:relative}
.sort-btn{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--border);background:var(--panel-2);color:var(--text);
  border-radius:8px;padding:7px 12px;font-size:.82rem;font-weight:600;
  min-height:44px;
}
.sort-btn svg{width:15px;height:15px;flex-shrink:0}
.sort-btn svg:first-child{color:var(--text-dim)}
.sort-btn .sort-chev{width:10px;height:10px;color:var(--text-faint)}
.sort-btn:hover{border-color:var(--local)}
.sort-pop{top:calc(100% + 8px);width:200px;padding:6px}
.sort-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 8px;border-radius:7px;font-size:.84rem;color:var(--text);
}
.sort-opt:hover{background:var(--panel-2)}
.sort-opt .radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text-faint);flex-shrink:0;position:relative}
.sort-opt[aria-pressed="true"] .radio{border-color:var(--accent)}
.sort-opt[aria-pressed="true"] .radio::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--accent)}
.sort-opt-txt small{display:block;color:var(--text-dim);font-size:.72rem;font-weight:400;margin-top:1px}

.filter-pop{left:0;width:280px;padding:10px}
.sort-btn.filter-active{border-color:var(--accent-dim);background:var(--panel-2);color:var(--accent)}
.sort-btn.filter-active svg{color:var(--accent)}
.filter-clear{
  display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:var(--accent);margin-left:2px;flex-shrink:0;
}
.sort-btn.filter-active .filter-clear svg{width:9px;height:9px;color:#1a1305}
.filter-step-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding:4px 6px 8px}
.filter-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 4px 10px}
.filter-cat{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border-radius:8px;
  background:var(--panel-2);border:1px solid transparent;font:inherit;cursor:pointer;color:var(--text-dim);
}
.filter-cat:hover{border-color:var(--divider)}
.filter-cat.active{border-color:var(--accent-dim);background:rgba(227,165,61,.1)}
.filter-cat span.lbl{font-size:.64rem;font-weight:600}
.filter-opts{display:flex;flex-direction:column;gap:4px;padding:2px 4px 4px;max-height:260px;overflow-y:auto}
.filter-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:7px 8px;border-radius:7px;background:none;border:none;font:inherit;cursor:pointer;
  color:var(--text);font-size:.84rem;
}
.filter-opt:hover{background:var(--panel-2)}
.filter-opt.active{background:rgba(227,165,61,.12)}
.filter-opt .radio{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--text-faint);flex-shrink:0;position:relative}
.filter-opt.active .radio{border-color:var(--accent)}
.filter-opt.active .radio::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--accent)}
.filter-back{
  display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--text-dim);
  background:none;border:none;font:inherit;cursor:pointer;padding:6px 4px 10px;width:100%;
}
.filter-back svg{width:13px;height:13px;flex-shrink:0}
.filter-back:hover{color:var(--text)}
.filter-count-line{max-width:760px;margin:0 auto 14px;padding:0 20px;font-size:.76rem;color:var(--text-dim)}
.filter-count-line b{color:var(--text);font-family:'IBM Plex Mono',monospace}
.chip.filter-hit{outline:2px solid var(--accent);outline-offset:-2px}

.country-tag{font-size:.74rem;color:var(--text-dim);font-weight:400;margin-left:6px}

.highlights-wrap{max-width:760px;margin:0 auto;padding:0 20px}
.highlights-wrap:empty{display:none}
.highlights{
  border:1px solid var(--accent-dim);border-radius:12px;background:var(--panel);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px;
}
.highlights.fade-in{animation:highlightsFadeIn .22s ease}
@keyframes highlightsFadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .highlights.fade-in{animation:none} }
.highlights-head{padding:16px 18px 4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.highlights-head h3{font-size:.9rem;font-weight:800;color:var(--text);margin:0;display:flex;align-items:center;gap:7px}
.highlights-head h3 svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.highlights-head p{font-size:.76rem;color:var(--text-dim);margin:0}
.highlights-scroll{position:relative}
.highlights-row{
  display:flex;gap:12px;padding:14px 18px 18px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.highlights-row::-webkit-scrollbar{display:none}
.hl-card{
  flex:1 1 0;min-width:200px;background:var(--panel-2);border:1px solid var(--border-soft);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;
  text-decoration:none;color:inherit;transition:border-color .15s;scroll-snap-align:start;
}
.hl-card:hover{border-color:var(--accent-dim)}
.hl-card .chip-wrap{align-self:flex-start}
.hl-league{display:flex;align-items:center;gap:6px;font-size:.68rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.03em}
.hl-league img{width:13px;height:13px;border-radius:50%;background:var(--logo-bg);flex-shrink:0}
.hl-teams{display:flex;flex-direction:column;gap:2px}
.hl-teams .tm{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--text)}
.hl-teams .tm img{width:14px;height:14px;border-radius:50%;background:var(--logo-bg);flex-shrink:0}
.hl-time{font-size:.7rem;color:var(--text-dim)}
.hl-time .live{color:var(--accent);font-weight:700}
.hl-time .in-play{font-size:.7rem}
.hl-time .sep{color:var(--text-faint)}
.hl-time .score{color:var(--text);font-weight:700}
.highlights-fade{
  position:absolute;top:14px;bottom:18px;right:0;width:28px;pointer-events:none;
  background:linear-gradient(to right, transparent, var(--panel));
  border-radius:0 10px 10px 0;
}

.league-grid{max-width:760px;margin:0 auto;padding:0 20px 60px;display:flex;flex-direction:column;gap:28px}
.league-group{ }
.panel{
  background:var(--panel);border:1px solid var(--divider);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:8px;padding:0;
  background:var(--header-band);border-bottom:2px solid var(--header-band-border);
  width:100%;text-align:left;
}
.panel-head-inner{display:flex;align-items:center;gap:8px;padding:12px 16px;flex:1;min-width:0}
.panel-head img{height:18px;width:18px;object-fit:contain;flex-shrink:0;background:var(--logo-bg);border-radius:50%;padding:2px}
.panel-head h3{font-size:.86rem;font-weight:700;color:var(--text);margin:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.league-count{
  font-size:.72rem;font-weight:600;color:var(--text-dim);
  background:var(--panel-2);border:1px solid var(--border);border-radius:999px;
  padding:2px 8px;flex-shrink:0;
}
.chevron{color:var(--text-dim);flex-shrink:0;margin-right:14px;transition:transform .18s}
.chevron.collapsed{transform:rotate(-90deg)}
.cup-section-label{
  display:flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);margin:0 0 -14px;padding:0 2px;
}
.cup-section-label svg{width:14px;height:14px;flex-shrink:0}
.panel.cup .panel-head{background:var(--cup-band);border-bottom-color:var(--cup-band-border)}

.match-block{
  border-bottom:1px solid var(--divider);scroll-margin-top:74px;
  cursor:pointer;position:relative;transition:background-color .12s ease;
}
.match-block:hover{background:var(--panel-2)}
.match-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background-color .12s ease}
.match-block:hover::before{background:var(--accent)}
.match-block:last-child{border-bottom:none}
.match-block:nth-child(even){background:var(--row-alt)}
.match-row{
  display:flex;align-items:center;gap:12px;padding:12px 16px 8px;
}
.row-status{width:64px;flex-shrink:0;font-size:.76rem;color:var(--text-dim);text-align:left}
.row-status .live{color:var(--accent);font-weight:700}
.in-play{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.68rem;letter-spacing:.02em;white-space:nowrap}
.in-play-dot{width:6px;height:6px;border-radius:50%;background:var(--text-dim);flex-shrink:0;animation:in-play-pulse 1.6s ease-in-out infinite}
@keyframes in-play-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .in-play-dot{animation:none} }
.row-status-stack{display:flex;flex-direction:column;gap:1px}
.in-play-sub{font-size:.66rem;color:var(--text-dim)}
.row-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-teams .tm{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-teams img{height:15px;width:15px;object-fit:contain;flex-shrink:0;background:var(--logo-bg);border-radius:50%;padding:1.5px}
.row-score{flex-shrink:0;text-align:right;font-size:.85rem;font-weight:700;color:var(--text-dim)}
.row-score div{line-height:1.65}
.row-score .finished{color:var(--text)}
.row-score .live-score{color:var(--text)}

.chip-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:0 16px 14px}
.chip-row:empty{display:none}
.chip-toggle{
  order:99;
  display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:700;color:var(--text-dim);
  border:1px dashed var(--border);border-radius:6px;
  padding:8px 11px;
  min-height:44px;
}
.chip-toggle .chevron{color:var(--text-dim);flex-shrink:0;margin-right:0}
.chip-toggle:hover{color:var(--text);border-color:var(--text-faint)}

.chip-wrap{position:relative;display:inline-flex}
.chip{
  display:inline-flex;align-items:stretch;border-radius:6px;overflow:hidden;
  font-size:.68rem;font-weight:600;box-shadow:0 0 0 1px var(--border) inset;
  white-space:nowrap;
}
.chip .tag{
  font-weight:800;font-size:.62rem;padding:3px 6px;display:flex;align-items:center;
  letter-spacing:.01em;color:#0a0b0d;
}
.chip .body{background:var(--panel-2);color:var(--text);padding:3px 6px;display:flex;align-items:center;gap:4px}
.chip .rate{color:var(--text-dim);font-weight:500;padding-left:4px;margin-left:2px;border-left:1px solid var(--border)}
.chip .rate.tier-strong{color:var(--accent);font-weight:700}
.chip .body svg{width:18px;height:18px;fill:none;stroke-width:1.8;flex-shrink:0}
.tag-local{background:var(--local)}
.tag-away{background:var(--away)}
.tag-mt{background:var(--matchtotal)}
.tag-aa{background:var(--bothscore)}

@media (max-width:640px){
  .chip-row.expanded{flex-direction:column;align-items:flex-start;gap:6px}
  .chip-row.expanded .chip-toggle{width:100%;justify-content:center}
}
.icon-ball .ball-base{fill:var(--ball);stroke:none}
.icon-ball .ball-patch{fill:var(--panel-2);stroke:none}
.icon-corner .corner-pole{stroke:var(--corner)}
.icon-corner .corner-flag{fill:var(--corner);stroke:none}
.icon-card .card-back{fill:var(--card-red)}
.icon-card .card-front{fill:var(--card)}

.hit-badge{
  position:absolute;top:-5px;right:-5px;z-index:1;
  width:12px;height:12px;border-radius:50%;
  background:var(--bg);box-shadow:0 0 0 1px var(--border);
  display:flex;align-items:center;justify-content:center;
}
.hit-badge svg{width:8px;height:8px;fill:var(--accent);stroke:none}

.empty-state{
  border:1px dashed var(--border);border-radius:12px;background:var(--panel-2);
  padding:24px;font-size:.85rem;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}

.retry-btn, .empty-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:8px;
  border:1px solid var(--accent-dim);
  background:var(--panel);color:var(--accent);
  font-weight:700;font-size:.78rem;
  transition:background .15s,border-color .15s,opacity .15s;
}
.retry-btn:hover:not(:disabled), .empty-cta:hover{background:var(--panel-2);border-color:var(--accent)}
.retry-btn:disabled{opacity:.65;cursor:default}
.retry-btn svg, .empty-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.retry-btn.is-loading svg{animation:retry-spin .8s linear infinite;transform-origin:50% 50%}
@keyframes retry-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .retry-btn.is-loading svg{animation:none} }

.site-footer{border-top:1px solid var(--border-soft);margin-top:8px}
.footer-inner{
  max-width:760px;margin:0 auto;padding:26px 20px;
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:600px){ .footer-inner{flex-direction:row;align-items:center;justify-content:space-between} }
.footer-sub{font-size:.76rem;color:var(--text-dim);margin:2px 0 0}
.footer-disclaimer{font-size:.76rem;color:var(--text-dim);max-width:340px;margin:0}
.footer-meta{font-size:.74rem;color:var(--text-dim);margin:0}
.footer-meta a{color:var(--text-dim);text-decoration:underline;text-decoration-color:var(--border)}
.footer-meta a:hover{color:var(--text);text-decoration-color:var(--text-dim)}

.popup-backdrop{
  position:fixed;inset:0;background:rgba(5,6,8,.72);z-index:30;
  display:flex;align-items:center;justify-content:center;padding:20px;
  overflow-y:auto;
}
.popup-card{
  background:var(--panel);border:1px solid var(--accent-dim);border-radius:14px;
  max-width:320px;width:100%;padding:22px 20px 18px;position:relative;text-align:center;
  box-shadow:var(--shadow);
  margin:auto;
}
.popup-close{
  position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:50%;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;
}
.popup-close svg{width:16px;height:16px}
.popup-close:hover{color:var(--text);border-color:var(--text-faint)}
.popup-icon{
  width:38px;height:38px;border-radius:50%;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.popup-icon svg{width:18px;height:18px}
.popup-card h3{font-size:1rem;margin:0 0 8px;color:var(--text)}
.popup-card p{font-size:.82rem;color:var(--text-dim);line-height:1.5;margin:0 0 16px}
.popup-cta{
  display:flex;align-items:center;justify-content:center;gap:7px;
  background:var(--accent);color:#1a1305;font-weight:700;font-size:.85rem;
  padding:10px 20px;border-radius:9px;text-decoration:none;
}
.popup-cta:hover{background:#ecb35c}
.popup-later{
  display:block;margin:10px auto 0;font-size:.76rem;color:var(--text-faint);
  text-decoration:underline;text-decoration-color:var(--border);background:none;border:none;
}
.popup-later:hover{color:var(--text-dim)}

.detail-modal{
  max-width:640px;width:100%;text-align:left;padding:0;overflow:hidden;
  max-height:min(85vh, 720px);display:flex;flex-direction:column;
}
.detail-modal .panel-head{
  border-radius:16px 16px 0 0;flex-shrink:0;position:sticky;top:0;z-index:2;
}
.detail-modal .panel-head .popup-close{position:static;flex-shrink:0;margin-right:12px}
.detail-modal.capturing .panel-head .popup-close{display:none!important}
.detail-modal.capturing .panel-head{position:static!important}
#match-detail-content{overflow-y:auto;flex:1;min-height:0}

.match-hero{display:flex;align-items:center;gap:18px;padding:22px 22px 16px;justify-content:center}
.hero-team{display:flex;flex-direction:column;align-items:center;gap:8px;width:150px;text-align:center}
.hero-team img{width:40px;height:40px;border-radius:50%;background:var(--logo-bg);object-fit:contain;padding:3px}
.hero-name{font-size:.9rem;font-weight:700;color:var(--text)}
.hero-ctx{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px}
.hero-ctx.local{color:var(--local);background:rgba(91,155,217,.12)}
.hero-ctx.away{color:var(--away);background:rgba(217,112,91,.12)}
.hero-mid{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-dim);font-size:.8rem}
.hero-mid .live{color:var(--accent);font-weight:700}
.hero-mid .in-play{font-size:.78rem}
.hero-mid .score{font-size:1.1rem;font-weight:700;color:var(--text)}

.detail-section{padding:2px 22px 20px}
.detail-label{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin:0 0 10px}

.detail-split{display:none;grid-template-columns:1fr 1fr;gap:18px}
@media (min-width:640px){ .detail-split{display:grid} .team-tabs{display:none} .team-panel{display:none} }
.team-col-head{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.team-col-head img{width:20px;height:20px;border-radius:50%;background:var(--logo-bg);object-fit:contain;padding:2px}
.team-col-head .nm{font-size:.86rem;font-weight:700;color:var(--text)}

.team-tabs{padding:0 22px;margin:0 0 4px;gap:32px}
.team-tabs .tab-btn{padding:10px 16px 12px}
.team-tabs .tab-btn.home.active{box-shadow:inset 0 -2px 0 var(--local)}
.team-tabs .tab-btn.away.active{box-shadow:inset 0 -2px 0 var(--away)}
.team-panel[hidden]{display:none}

.form-strip{display:flex;gap:4px;margin:0 0 12px}
.form-dot{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:800}
.form-dot.w{background:rgba(74,222,128,.14);color:var(--good)}
.form-dot.d{background:var(--panel-2);color:var(--text-dim);border:1px solid var(--border)}
.form-dot.l{background:rgba(240,100,95,.14);color:var(--bad)}

.hist-table{width:100%;border-collapse:collapse;font-size:.78rem;table-layout:fixed}
.hist-table th:nth-child(1),.hist-table td:nth-child(1){width:40%}
.hist-table th:nth-child(2),.hist-table td:nth-child(2){width:20%}
.hist-table th:nth-child(3),.hist-table td:nth-child(3),
.hist-table th:nth-child(4),.hist-table td:nth-child(4),
.hist-table th:nth-child(5),.hist-table td:nth-child(5){width:13.33%}
.hist-table th{text-align:left;font-weight:600;color:var(--text-faint);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;padding:0 6px 6px;border-bottom:1px solid var(--border-soft)}
.hist-table th.num,.hist-table td.num{text-align:center}
.hist-table th svg{width:13px;height:13px;vertical-align:-2px}
.hist-table td{padding:7px 6px;border-bottom:1px solid var(--border-soft);color:var(--text-dim)}
.hist-table td.opp{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-table td.hit{color:var(--good);font-weight:700}
.hist-table td.miss{color:var(--text-faint)}
.hist-table tr:last-child td{border-bottom:none}

.methodology{margin:0 22px 22px;padding:14px 16px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;font-size:.78rem;color:var(--text-dim);line-height:1.6}
.methodology b{color:var(--text)}

.data-source-note{margin:0 22px 20px;text-align:center;font-size:.7rem;color:var(--text-faint);line-height:1.5}

.share-actions{
  display:flex;gap:10px;position:sticky;bottom:0;z-index:2;
  padding:14px 22px;margin:0;background:var(--panel);border-top:1px solid var(--border-soft);
}
.share-btn{
  display:flex;align-items:center;justify-content:center;gap:7px;flex:1;
  padding:10px 16px;border-radius:9px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  font-weight:600;font-size:.82rem;text-decoration:none;
}
.share-btn:hover{border-color:var(--local)}
.share-btn svg{width:15px;height:15px;flex-shrink:0}
.share-btn[disabled]{opacity:.6}

.share-foot{
  display:none;align-items:center;justify-content:space-between;
  padding:12px 22px;background:var(--bg);border-top:1px solid var(--border-soft);
}
.share-foot .wordmark{font-size:.8rem;font-weight:800;letter-spacing:-.02em}
.share-foot .wordmark .t1{color:var(--text)}
.share-foot .wordmark .t2{color:var(--accent)}
.share-foot .tagline{font-size:.7rem;color:var(--text-faint)}

.detail-modal.capturing{max-height:none!important;overflow:visible!important}
.detail-modal.capturing #match-detail-content{overflow:visible!important;flex:none!important;max-height:none!important}
.detail-modal.capturing .detail-split{display:grid!important}
.detail-modal.capturing .team-tabs,
.detail-modal.capturing .team-panel{display:none!important}
.detail-modal.capturing .share-actions{display:none!important}
.detail-modal.capturing .share-foot{display:flex!important}

.image-lightbox{max-width:480px;padding:20px 20px 18px}
.image-lightbox img{width:100%;border-radius:10px;display:block;background:var(--panel-2)}
.lightbox-hint{font-size:.78rem;color:var(--text-dim);margin:14px 0 16px}
.image-lightbox .share-actions{position:static;background:none;border-top:none;padding:0;margin:0}

#share-capture-stage{position:fixed;left:-9999px;top:0;width:640px}