/* Inlined fonts replaced with real files — see assets/fonts/ */
@font-face{font-family:'AntonX';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/anton-400.woff2') format('woff2');}
@font-face{font-family:'OswaldX';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/oswald-500.woff2') format('woff2');}
@font-face{font-family:'OswaldX';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/oswald-700.woff2') format('woff2');}

:root{
  --bg0:#f7f4ec; --bg1:#eee8da; --panel:#fffdf8; --panel2:#f0eadf;
  --line:#d1c9b8; --grid:#ddd6c8;
  --ink:#162d24; --muted:#65756d; --dim:#8a958f;
  --chalk:#142a21;
  --c23:#087ea4; --c24:#9a6700; --c25:#7753c7; --c26:#c52e3d;
  --gold:#9a6a00;
  --chart-grid:#c9c2b2; --chart-grid-strong:#87978c;
  --chart-label:#617568; --chart-label-strong:#203b2f; --chart-ink:#263d32;
  --chart-scrub:#718277; --chart-tooltip-bg:rgba(29,48,39,.94);
  --chart-tooltip-border:#617568; --chart-tooltip-label:#c7d1cb; --chart-tooltip-ink:#fffdf7;
  --chart-head-bg:rgba(255,253,247,.9);
  --chart-gold:rgba(154,106,0,.88); --chart-gold-line:rgba(154,106,0,.4);
  --chart-gold-fill:rgba(154,106,0,.14); --chart-gold-clear:rgba(154,106,0,0);
  --chart-gold-glow:rgba(154,106,0,.25);
  --display:'AntonX','Arial Narrow',Impact,sans-serif;
  --cond:'OswaldX','Arial Narrow',sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

html,body{background:var(--bg0);margin:0;}
*{box-sizing:border-box;}
[hidden]{display:none !important;}

/* The requested view is marked in the blocking head script. Keep the graph
   invisible while season data loads so it cannot flash before the leaders
   panel takes over. Visibility preserves its dimensions for canvas setup. */
html[data-view='leaders'] .stage:not([hidden]){visibility:hidden;}

.stage{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 82% -10%, rgba(213,44,58,.08), transparent 55%),
    radial-gradient(90% 70% at 5% 6%, rgba(8,126,164,.07), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(83,116,95,.16), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg0));
  color:var(--ink);
  font-family:var(--ui);
  display:flex;
  flex-direction:column;
  padding:calc(var(--site-header-height) + clamp(16px,2.4vw,28px)) clamp(14px,2.4vw,30px) clamp(14px,2.4vw,30px);
  gap:clamp(10px,1.4vw,18px);
}
/* faint scoreboard scanlines */
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(19,41,31,.018) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.45;
}

/* ===== Season leaders tab ===== */
.leaders-section{
  min-height:100vh;
  color:var(--ink);font-family:var(--ui);
  background:
    radial-gradient(100% 70% at 80% 0%,rgba(197,46,61,.07),transparent 58%),
    linear-gradient(180deg,var(--bg1),var(--bg0));
  padding:calc(var(--site-header-height) + clamp(28px,4vw,52px)) clamp(14px,3vw,40px) clamp(32px,6vw,72px);
}
.leaders-shell{max-width:1380px;margin:0 auto;}
.leaders-content{
  padding:8px 22px 20px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,253,248,.86);box-shadow:0 18px 42px rgba(46,55,49,.09);
}
.leaders-table{width:100%;border-collapse:collapse;table-layout:fixed;}
.leaders-table th,.leaders-table td{
  padding:14px 11px;border-top:1px solid var(--line);text-align:left;vertical-align:top;
}
.leaders-table thead th{
  font-family:var(--cond);font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.leaders-table thead th:not(:first-child)::before{
  content:'👑';margin-right:5px;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  font-size:.82em;letter-spacing:0;
}
.leaders-table thead th:first-child{width:8%;}
.leaders-table tbody th{
  font-family:var(--display);font-size:24px;font-weight:400;color:var(--seasoncol,var(--chalk));
}
.leaders-table td{font-family:var(--cond);font-size:17px;font-weight:500;color:var(--ink);}
.leader-ranking{counter-reset:leader-rank;display:grid;gap:5px;margin:0;padding:0;list-style:none;}
.leader-ranking li{
  counter-increment:leader-rank;display:grid;grid-template-columns:15px minmax(0,1fr);gap:3px;
  color:var(--muted);font-size:15px;line-height:1.32;
}
.leader-ranking li::before{
  content:counter(leader-rank);color:var(--seasoncol,var(--gold));font-size:12px;font-weight:700;
  line-height:1.55;font-variant-numeric:tabular-nums;
}
.leader-ranking li:first-child{color:var(--ink);font-weight:700;}
.leaders-note{margin:12px 10px 0;color:var(--muted);font-family:var(--cond);font-size:13px;line-height:1.5;}

/* ===== Story header ===== */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding:0;z-index:6;}
.brand{max-width:900px;}
.brand-meta{display:flex;align-items:center;gap:12px;font-family:var(--cond);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.site-home{color:var(--chalk);text-decoration:none;transition:color .16s ease;}
.site-home:hover{color:var(--gold);}
.site-home:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px;}
.story-eyebrow{color:var(--muted);}
.story-eyebrow::before{content:'·';margin-right:12px;color:var(--c26);}
.title{
  max-width:100%;font-family:var(--display);font-weight:400;white-space:normal;text-wrap:balance;
  font-size:clamp(38px,5.3vw,72px);line-height:.94;letter-spacing:.002em;
  margin:12px 0 0;
  color:var(--chalk);
}
.title em{font-style:normal;color:var(--c26);}
.dek{display:block;max-width:62ch;margin:10px 0 0;color:var(--muted);font-size:clamp(12px,1.1vw,14px);line-height:1.45;}
.dek b{color:var(--chalk);font-weight:700;}

/* ===== Scoreboard (hidden — JS still writes to these nodes to drive narration
   timing, so they stay in the DOM but take no visual space) ===== */
.scoreboard{display:none;}
.scoreboard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--seasoncol,var(--c23));box-shadow:0 0 18px var(--seasoncol,var(--c23));transition:background .4s,box-shadow .4s;}
.sb-year{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1;color:var(--seasoncol,var(--c23));grid-row:1/3;transition:color .4s;text-shadow:0 0 26px color-mix(in srgb,var(--seasoncol,var(--c23)) 40%,transparent);}
.sb-arc{font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--muted);align-self:end;}
.sb-record{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:.01em;color:var(--chalk);align-self:start;font-variant-numeric:tabular-nums;}
.sb-record .dash{color:var(--dim);margin:0 .06em;}
.sb-meta{grid-column:1/3;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);display:flex;gap:.6em;flex-wrap:wrap;font-family:var(--cond);font-weight:500;letter-spacing:.05em;text-transform:uppercase;font-size:11.5px;color:var(--muted);}
.sb-meta .pip{color:var(--dim);}
.sb-meta b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}

/* ===== Chart ===== */
.chartwrap{position:relative;flex:1 1 auto;min-height:340px;z-index:6;}
canvas#chart{position:absolute;inset:0;width:100%;height:100%;display:block;}
.narration{
  position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;pointer-events:none;
}
.narration .n-inner{
  font-family:var(--cond);font-weight:500;letter-spacing:.03em;
  font-size:clamp(13px,1.5vw,18px);color:var(--ink);
  background:rgba(255,253,248,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-left:3px solid var(--seasoncol,var(--c23));
  padding:8px 16px;border-radius:8px;max-width:min(78ch,92%);text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease,border-color .4s;
  box-shadow:0 12px 30px rgba(62,51,34,.16);
}
.narration.show .n-inner{opacity:1;transform:translateY(0);}

/* ===== Controls ===== */
.controls{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;z-index:6;}
.transport{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.btn{
  font-family:var(--cond);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:12.5px;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:9px 15px;cursor:pointer;transition:.16s ease;line-height:1;
}
.btn:hover{background:var(--panel2);border-color:#8ca093;transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.primary{background:var(--c26);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(197,46,61,.2);}
.btn.primary:hover{background:#a71f2d;}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.speed{display:flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--muted);}
.speed input[type=range]{width:96px;accent-color:var(--c26);cursor:pointer;}
#speedVal{color:var(--ink);min-width:2.2em;font-variant-numeric:tabular-nums;}


@media (max-width:720px){
  .stage{padding:calc(var(--site-header-height) + 10px) 10px 8px;gap:6px;}
  .top{flex-direction:column;padding:0;}
  .brand-meta{font-size:9.5px;}
  .story-eyebrow{display:none;}
  .title{font-size:clamp(30px,9vw,42px);margin-top:8px;}
  .dek{max-width:44ch;margin-top:7px;font-size:11px;line-height:1.35;}
  .controls{flex-direction:column;align-items:stretch;gap:8px;}
  .leaders-section{padding:calc(var(--site-header-height) + 20px) 10px 32px;}
  .leaders-content{padding:0 10px 12px;overflow:visible;}
  .leaders-table,.leaders-table tbody{display:block;}
  .leaders-table thead{display:none;}
  .leaders-table tbody{display:grid;gap:8px;}
  .leaders-table tr{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(255,253,247,.58);
  }
  .leaders-table th,.leaders-table td{border:0;padding:9px 10px;min-width:0;}
  .leaders-table tbody th{
    grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:flex-start;
    padding:10px 12px;border-bottom:1px solid var(--line);font-size:22px;
    background:rgba(22,45,36,.035);
  }
  .leaders-table td::before{
    content:'👑  ' attr(data-label);display:block;margin-bottom:3px;color:var(--muted);
    font-family:'Apple Color Emoji','Segoe UI Emoji',var(--cond);
    font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  }
  .leader-ranking{gap:4px;}
  .leader-ranking li{grid-template-columns:16px minmax(0,1fr);font-size:14px;line-height:1.28;}
  .leader-ranking li::before{font-size:11px;line-height:1.55;}
  .leaders-table td:nth-child(2){grid-column:1;grid-row:2;border-bottom:1px solid var(--line);}
  .leaders-table td:nth-child(3){grid-column:2;grid-row:2;border-bottom:1px solid var(--line);}
  .leaders-table td:nth-child(4){grid-column:1;grid-row:3;}
  .leaders-table td:nth-child(5){grid-column:2;grid-row:3;}
  .leaders-table td:nth-child(6){grid-column:1;grid-row:4;}
  .leaders-table td:nth-child(7){grid-column:2;grid-row:4;}
  .leaders-table td:nth-child(3),.leaders-table td:nth-child(5),.leaders-table td:nth-child(7){border-left:1px solid var(--line);}
  .leaders-note{margin:10px 4px 0;}
}
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms !important;}
}
.play-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(7,15,11,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:pointer;transition:opacity .55s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;padding:16px;}
.play-overlay.hide{opacity:0;pointer-events:none;}
.po-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3.5vw,16px);padding:20px;text-align:center;}
.po-btn{width:clamp(120px,34vw,138px);height:clamp(120px,34vw,138px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 38%,#ff5a63,#d3202c);box-shadow:0 0 0 10px rgba(255,90,99,.16),0 12px 34px rgba(0,0,0,.45);animation:poPulse 2.2s ease-in-out infinite;transition:transform .12s ease;}
.po-btn svg{width:46%;height:46%;margin-left:5%;}
.po-btn polygon{fill:#fff;}
.play-overlay:active .po-btn{transform:scale(.94);}
.play-overlay:hover .po-btn,.play-overlay:focus-visible .po-btn{transform:scale(1.06);}
.play-overlay:focus{outline:none;}
.play-overlay:focus-visible{outline:2px solid rgba(255,207,90,.7);outline-offset:8px;border-radius:12px;}
.po-label{font:400 clamp(32px,9.5vw,42px)/1 'AntonX',system-ui,sans-serif;letter-spacing:.06em;color:#f4efe3;text-transform:uppercase;}
.po-sub{font:500 clamp(11px,3.2vw,13px)/1 'OswaldX',system-ui,sans-serif;letter-spacing:.2em;color:rgba(233,227,208,.6);text-transform:uppercase;}
@keyframes poPulse{0%,100%{box-shadow:0 0 0 10px rgba(255,90,99,.16),0 0 34px rgba(255,90,99,.4),0 12px 34px rgba(0,0,0,.45);}50%{box-shadow:0 0 0 18px rgba(255,90,99,.07),0 0 54px rgba(255,90,99,.6),0 12px 34px rgba(0,0,0,.45);}}
@media (prefers-reduced-motion:reduce){.po-btn{animation:none;}}