:root{
  --bg:#14110b; --surface:#1b1610; --surface2:#241e15; --raise:#2c2418;
  --bone:#ece3d0; --ink:#16120b; --text:#efe7d6; --muted:#9c9079; --faint:#6f6655;
  --line:rgba(236,227,208,.10); --line2:rgba(236,227,208,.18);
  --c-gold:#e3b23c; --c-teal:#3aa6a0; --c-violet:#9a7bd0; --c-tomato:#e3603c; --c-stone:#b8a98f;
  --display:'Anton',sans-serif; --sans:'Hanken Grotesk',sans-serif; --mono:'Space Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; overflow:hidden;
}

/* halftone grain + warm vignette */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.no-grain body::before{display:none;}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(227,178,60,.06), transparent 55%),
             radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
}

.app{height:100vh;display:flex;flex-direction:column;position:relative;z-index:1;}

/* ---------- header ---------- */
.hd{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:26px;
  padding:16px 26px; border-bottom:1px solid var(--line2);
  background:linear-gradient(180deg,var(--surface),rgba(27,22,16,.6));
}
.hd-mark{display:flex;flex-direction:column;gap:3px;}
.hd-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-gold);}
.hd-title{font-family:var(--display);font-size:40px;line-height:.82;letter-spacing:.01em;color:var(--bone);}
.hd-26{color:var(--c-tomato);margin-left:2px;}
.hd-nav{display:flex;gap:5px;margin-top:8px;}
.hd-nav button{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--muted);background:none;border:1px solid var(--line2);padding:4px 13px;border-radius:99px;cursor:pointer;transition:.15s;}
.hd-nav button:hover{color:var(--text);}
.hd-nav button.on{color:var(--ink);background:var(--bone);border-color:var(--bone);}
.hd-live{display:flex;align-items:center;gap:14px;justify-self:end;order:3;font-size:13px;}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--faint);}
.live-dot.on{background:var(--c-tomato);box-shadow:0 0 0 0 rgba(227,96,60,.6);animation:pulse 1.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(227,96,60,.5)}70%{box-shadow:0 0 0 8px rgba(227,96,60,0)}100%{box-shadow:0 0 0 0 rgba(227,96,60,0)}}
.live-txt{font-family:var(--mono);font-weight:700;letter-spacing:.18em;font-size:11px;}
.hd-sep{width:1px;height:18px;background:var(--line2);}
.hd-stat{color:var(--muted);font-size:12px;}
.hd-stat b{color:var(--text);font-family:var(--mono);font-size:15px;margin-right:3px;}
/* fade only the right (overflow) edge; the ticker text is left-anchored, so a
   left fade would clip its leading characters (e.g. "Awaiting the next goal…") */
.ticker{grid-column:2;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);}
.ticker-track{display:flex;gap:34px;white-space:nowrap;animation:tick 1s;}
.tk-item{font-size:13px;color:var(--text);display:inline-flex;align-items:center;gap:7px;}
.tk-item b{font-weight:700;}
.tk-ball{filter:grayscale(.2);}
.muted{color:var(--muted);}
@keyframes tick{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* ---------- main ---------- */
.main{flex:1;display:flex;min-height:0;}
.pane{min-height:0;}
.pane-title{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);padding:14px 18px 10px;}

/* leaderboard */
.left{width:352px;flex:none;border-right:1px solid var(--line2);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(27,22,16,.5),transparent 30%);}
.lb{display:flex;flex-direction:column;min-height:0;flex:1;}
.lb-head{display:grid;grid-template-columns:34px 1fr 64px 30px;gap:6px;padding:4px 18px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line);}
.lb-rows{overflow-y:auto;flex:1;padding:4px 8px 80px;}
.lb-row{width:100%;display:grid;grid-template-columns:34px 1fr 64px 30px;gap:6px;align-items:center;padding:9px 10px;background:none;border:none;border-radius:10px;cursor:pointer;color:var(--text);text-align:left;transition:background .15s;border:1px solid transparent;}
.lb-row:hover{background:var(--surface2);}
.lb-row.sel{background:var(--surface2);border-color:var(--c-gold);}
.lb-row.lead{background:linear-gradient(90deg,rgba(227,178,60,.14),rgba(227,178,60,.02));}
.lb-row.flash{animation:flashrow 1.4s;}
@keyframes flashrow{0%{background:rgba(227,96,60,.35)}100%{}}
.lb-rank{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center;}
.lb-row.lead .lb-rank{font-size:16px;}
.lb-player{display:flex;align-items:center;gap:10px;min-width:0;}
.lb-flag{font-size:18px;line-height:1;}
.lb-namecol{display:flex;flex-direction:column;min-width:0;}
.lb-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-club{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-g{display:flex;align-items:center;gap:7px;}
.lb-gnum{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--c-gold);width:14px;text-align:right;}
.lb-bar{flex:1;height:4px;background:var(--line2);border-radius:2px;overflow:hidden;}
.lb-bar i{display:block;height:100%;background:var(--c-gold);border-radius:2px;transition:width .5s;}
.lb-a{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center;}

/* center / graph */
.center{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;}
.legend{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);}
.lg-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;font-family:var(--sans);}
.lg-chip .lg-dot{width:9px;height:9px;border-radius:50%;background:var(--ct);opacity:.4;}
.lg-chip.on{color:var(--text);border-color:var(--ct);background:color-mix(in srgb,var(--ct) 12%,var(--surface));}
.lg-chip.on .lg-dot{opacity:1;}
.lg-chip:not(.on){text-decoration:line-through;text-decoration-color:var(--faint);}
.lg-n{font-family:var(--mono);font-size:10px;opacity:.7;}
.graph-wrap{flex:1;position:relative;min-height:0;}
.graph-wrap canvas{position:absolute;inset:0;display:block;}
.graph-tip{position:absolute;top:0;left:0;pointer-events:none;background:var(--raise);border:1px solid var(--line2);border-radius:9px;padding:8px 11px;display:flex;flex-direction:column;gap:1px;opacity:0;transition:opacity .12s;box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;z-index:5;}
.graph-tip b{font-size:13px;}
.graph-tip span{font-size:11px;color:var(--muted);}
.graph-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);}
.graph-foot b{color:var(--text);}
.clear-sel{background:none;border:1px solid var(--line2);color:var(--muted);border-radius:7px;padding:4px 9px;font-size:11px;cursor:pointer;font-family:var(--sans);}
.clear-sel:hover{color:var(--text);border-color:var(--c-gold);}

/* profile */
.profile-pane{flex:0 0 0px;width:392px;overflow:hidden;border-left:1px solid var(--line2);background:var(--surface);transition:flex-basis .28s cubic-bezier(.4,0,.2,1);}
.profile-pane.open{flex-basis:392px;}
.profile{width:392px;height:100%;overflow-y:auto;padding:22px 22px 90px;position:relative;}
.prof-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);cursor:pointer;font-size:13px;}
.prof-close:hover{color:var(--text);}
.prof-top{display:flex;gap:15px;align-items:flex-start;margin-bottom:20px;padding-right:34px;}
.prof-id{min-width:0;padding-top:2px;}
.prof-disc{width:62px;height:62px;border-radius:50%;background:var(--bone);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;flex:none;border:2px solid var(--c-gold);}
.prof-flag{font-size:12px;color:var(--muted);margin-bottom:2px;}
.prof-name{font-family:var(--display);font-size:25px;line-height:1.02;color:var(--bone);font-weight:400;letter-spacing:.01em;}
.prof-club{font-size:13px;color:var(--c-gold);margin-top:5px;}
.prof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px;}
.stat{background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:12px;text-align:center;}
.stat b{display:block;font-family:var(--mono);font-size:24px;color:var(--text);}
.stat span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
.prof-label{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.prof-tl{margin-bottom:24px;}
.tl-events{display:flex;flex-direction:column;gap:5px;}
.tl-ev{display:flex;align-items:center;gap:10px;font-size:13px;padding:6px 10px;background:var(--surface2);border-radius:8px;border-left:2px solid var(--c-tomato);}
.tl-min{font-family:var(--mono);font-weight:700;color:var(--c-tomato);width:30px;}
.tl-vs{color:var(--text);}
.tl-as{margin-left:auto;font-size:11px;color:var(--muted);}
.cgroup{margin-bottom:16px;}
.cgroup-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--text);margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em;}
.cgroup-head .cdot{width:9px;height:9px;border-radius:50%;background:var(--ct);}
.ccount{font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:400;background:var(--surface2);padding:1px 6px;border-radius:8px;}
.conn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:5px;cursor:pointer;color:var(--text);transition:.15s;font-family:var(--sans);}
.conn:hover{border-color:var(--line2);background:var(--raise);transform:translateX(2px);}
.conn-flag{font-size:18px;}
.conn-text{display:flex;flex-direction:column;min-width:0;flex:1;}
.conn-text b{font-size:13px;font-weight:600;}
.conn-text span{font-size:11px;color:var(--muted);}
.conn-arrow{color:var(--faint);font-size:13px;}

/* settings popover (replaces the design-tool tweaks panel) */
.settings-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);cursor:pointer;font-size:14px;line-height:1;}
.settings-btn:hover,.settings-btn.on{color:var(--text);border-color:var(--c-gold);}
.settings-pop{position:fixed;top:78px;right:18px;z-index:80;width:256px;background:var(--raise);border:1px solid var(--line2);border-radius:11px;padding:15px;box-shadow:0 14px 40px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:10px;}
.settings-pop[hidden]{display:none;}
.set-section{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px;}
.set-section:first-child{margin-top:0;}
.set-opts{display:flex;gap:6px;flex-wrap:wrap;}
.set-opt{padding:5px 11px;border-radius:99px;border:1px solid var(--line2);background:var(--surface2);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:.15s;}
.set-opt:hover{color:var(--text);}
.set-opt.on{color:var(--text);border-color:var(--c-gold);background:color-mix(in srgb,var(--c-gold) 12%,var(--surface));}
.set-range{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);}
.set-range input{flex:1;accent-color:var(--c-gold);}
.set-range b{font-family:var(--mono);color:var(--text);font-size:12px;min-width:32px;text-align:right;}

/* tabbar (mobile) */
.tabbar{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;background:var(--surface);border-top:1px solid var(--line2);z-index:50;}
.tabbar button{flex:1;background:none;border:none;color:var(--muted);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.03em;cursor:pointer;}
.tabbar button.on{color:var(--c-gold);}
.tabbar button:disabled{opacity:.35;}

@media(max-width:880px){
  .hd{grid-template-columns:1fr auto;gap:12px;padding:12px 16px;}
  .ticker{display:none;}
  .hd-nav{display:none;}
  .hd-title{font-size:32px;}
  .hd-live{order:0;}
  .main{padding-bottom:58px;}
  .pane{display:none !important;flex:1;width:auto !important;border:none;}
  .pane.active{display:flex !important;}
  .left{width:auto;}
  .profile-pane{width:auto;}
  .profile-pane.open{width:auto;}
  .profile{width:100%;}
  .tabbar{display:flex;}
}

/* ---------- results & predictions (full-area takeover panes) ---------- */
.results-pane,.predictions-pane{display:none;flex:1;flex-direction:column;min-width:0;}
.main.takeover > .left,.main.takeover > .center,.main.takeover > .profile-pane{display:none;}
.main.takeover > .results-pane.active,.main.takeover > .predictions-pane.active{display:flex;}
.res-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px 12px;border-bottom:1px solid var(--line);}
.res-head .pane-title{padding:0;}
.res-filters{display:flex;gap:6px;flex-wrap:wrap;}
.res-chip{padding:5px 12px;border-radius:99px;border:1px solid var(--line2);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:.15s;}
.res-chip:hover{color:var(--text);}
.res-chip.on{color:var(--text);border-color:var(--c-gold);background:color-mix(in srgb,var(--c-gold) 12%,var(--surface));}
.res-scroll{flex:1;overflow-y:auto;padding:4px 18px 80px;}
.res-day{margin-top:6px;}
.res-day-h{position:sticky;top:0;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);background:linear-gradient(180deg,var(--bg) 70%,transparent);padding:14px 4px 9px;}
.res-match{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"meta meta meta" "home score away";align-items:center;gap:7px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:11px 16px;margin-bottom:8px;}
.res-match.live{border-color:color-mix(in srgb,var(--c-tomato) 45%,var(--line));background:color-mix(in srgb,var(--c-tomato) 7%,var(--surface2));}
.res-meta{grid-area:meta;display:flex;align-items:center;gap:9px;}
.res-badge{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:6px;line-height:1.5;}
.res-badge.live{color:#fff;background:var(--c-tomato);animation:pulse 1.6s infinite;}
.res-badge.ft{color:var(--muted);background:var(--surface);border:1px solid var(--line2);}
.res-badge.ko{color:var(--c-gold);background:color-mix(in srgb,var(--c-gold) 14%,var(--surface));}
.res-grp{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);}
.res-since{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--c-tomato);opacity:.85;margin-left:2px;}
.res-since::before{content:"·";margin-right:6px;color:var(--faint);}
.res-side{display:flex;align-items:center;gap:10px;min-width:0;}
.res-side.home{grid-area:home;justify-content:flex-end;text-align:right;}
.res-side.away{grid-area:away;justify-content:flex-start;text-align:left;}
.res-team{font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.res-side.win .res-team{color:var(--bone);}
.res-flag{font-size:21px;line-height:1;flex:none;}
.res-score{grid-area:score;font-family:var(--mono);font-weight:700;font-size:19px;color:var(--text);min-width:56px;text-align:center;}
.res-score i{font-style:normal;font-weight:400;color:var(--faint);margin:0 5px;}
.res-score.empty{font-size:12px;font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.res-empty{text-align:center;color:var(--muted);font-size:14px;padding:60px 0;}
/* real-time lag note */
.res-note{display:flex;align-items:center;gap:8px;padding:8px 18px;font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);}
.res-note-dot{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none;}
.res-note-dot.live{background:var(--c-tomato);animation:pulse 1.6s infinite;}
/* aggregate standings tables */
.st-group{margin-top:6px;}
.st-table{display:flex;flex-direction:column;gap:3px;margin-bottom:6px;}
.st-row{display:grid;grid-template-columns:26px 1fr repeat(8,24px);align-items:center;gap:2px;padding:8px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:9px;}
.st-row.head{background:none;border-color:transparent;padding:2px 12px 0;}
.st-row.adv{border-color:color-mix(in srgb,var(--c-gold) 32%,var(--line));}
.st-pos{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;}
.st-row.adv .st-pos{color:var(--c-gold);}
.st-row.head .st-pos,.st-row.head .st-team,.st-row.head .st-n{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:400;}
.st-team{display:flex;align-items:center;gap:9px;min-width:0;}
.st-flag{font-size:18px;line-height:1;flex:none;}
.st-name{font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.st-n{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;}
.st-n.pts{color:var(--text);font-weight:700;}
.st-row.adv .st-n.pts{color:var(--c-gold);}
/* predictions (Golden Boot / knockout odds) */
.pred-list{max-width:760px;margin:0 auto;}
.pred-row{display:grid;grid-template-columns:34px 1fr 168px;gap:12px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line);}
.pred-row.lead{background:linear-gradient(90deg,rgba(227,178,60,.12),rgba(227,178,60,.01));border-radius:10px;}
.pred-rank{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:center;}
.pred-row.lead .pred-rank{color:var(--c-gold);font-size:15px;}
.pred-id{display:flex;align-items:center;gap:11px;min-width:0;}
.pred-flag{font-size:22px;line-height:1;flex:none;}
.pred-namecol{display:flex;flex-direction:column;min-width:0;}
.pred-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pred-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pred-prob{display:flex;align-items:center;gap:10px;}
.pred-pct{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--c-gold);width:50px;text-align:right;}
.pred-bar{flex:1;height:6px;background:var(--line2);border-radius:3px;overflow:hidden;}
.pred-bar i{display:block;height:100%;background:var(--c-gold);border-radius:3px;}
.pred-foot{max-width:760px;margin:14px auto 0;font-size:11px;color:var(--faint);text-align:center;}

/* career: short bio + yearly stats (profile panel) */
.prof-career{margin-bottom:24px;}
.prof-bio{font-size:13px;line-height:1.55;color:var(--text);margin:0 0 12px;}
.ssn-table{display:flex;flex-direction:column;gap:4px;}
.ssn-row{display:grid;grid-template-columns:62px 1fr 34px 28px 28px;gap:8px;align-items:center;font-size:12px;padding:6px 10px;background:var(--surface2);border-radius:8px;}
.ssn-row.head{background:none;padding:2px 10px 0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.ssn-season{font-family:var(--mono);font-size:11px;color:var(--muted);}
.ssn-club{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssn-n{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;}
.ssn-n.g{color:var(--c-gold);font-weight:700;}
.ssn-row.head .ssn-season,.ssn-row.head .ssn-club,.ssn-row.head .ssn-n{font-family:var(--mono);font-size:9px;color:var(--faint);}