/* Token Scoreboard. Look ported from token_odometer.py (Token Odometer): same tokens, dial, shelf and mascots.
   Fonts are served from /fonts (SIL OFL, see the OFL*.txt files there). Nothing loads from another site. */
@font-face{font-family:"Archivo Narrow";src:url(/fonts/ArchivoNarrow-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(/fonts/DMSerifDisplay-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(/fonts/DMSerifDisplay-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-600.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- tokens: color (light, dark below), type 12/14/17/24/32, spacing 4/8px steps ---- */
:root{--bg:#F9F8F5;--panel:#FFFFFF;--ink:#15243A;--soft:#5B6878;--line:#E3E1DB;--link:#306BA6;--accent:#2E5C8A;--ok:#2F7D4F;
--edge:rgba(21,36,58,.07);--shadow:0 1px 2px rgba(21,36,58,.04),0 8px 28px rgba(21,36,58,.06);
--serif:"DM Serif Display",Georgia,serif;--sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
--digit:#F2C14E;--warn:#A86A00;--warnbg:#FBEFD5;
--h0:#ECEAE5;--h1:#5B87B4;--h2:#3A6898;--h3:#24507E;--h4:#15243A;
--dial:#15243A;--cell:#1E314D;--dial-sep:#7D8CA3;--seg-on:#15243A;--seg-on-ink:#E8ECEF;
--fs-xs:12px;--fs-sm:14px;--fs-md:17px;--fs-lg:24px;--fs-xl:32px;
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--radius:12px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0F1826;--panel:#16223A;--ink:#E6EBF1;--soft:#93A1B3;--line:#27354E;--link:#7DAADB;--accent:#89B8E6;--ok:#5CC08A;--edge:#27354E;--shadow:none;--glass:rgba(22,34,58,.78);--warn:#F2C14E;--warnbg:#2A2412;--h0:#1B2940;--h1:#3A6A9C;--h2:#5288C0;--h3:#7DAADB;--h4:#CFE3F7;--dial:#0F1826;--cell:#1B2940;--dial-sep:#6D7C90;--seg-on:#2A3A55;--seg-on-ink:#E6EBF1;color-scheme:dark}}
:root[data-theme=dark]{--bg:#0F1826;--panel:#16223A;--ink:#E6EBF1;--soft:#93A1B3;--line:#27354E;--link:#7DAADB;--accent:#89B8E6;--ok:#5CC08A;--edge:#27354E;--shadow:none;--glass:rgba(22,34,58,.78);--warn:#F2C14E;--warnbg:#2A2412;--h0:#1B2940;--h1:#3A6A9C;--h2:#5288C0;--h3:#7DAADB;--h4:#CFE3F7;--dial:#0F1826;--cell:#1B2940;--dial-sep:#6D7C90;--seg-on:#2A3A55;--seg-on-ink:#E6EBF1;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-sm)/1.55 var(--sans)}
main{max-width:880px;margin:0 auto;padding:var(--s6) var(--s5) var(--s7);
padding-left:max(var(--s5),env(safe-area-inset-left));padding-right:max(var(--s5),env(safe-area-inset-right))}
@media (max-width:600px){main{padding:var(--s5) var(--s4) var(--s6);padding-left:max(var(--s4),env(safe-area-inset-left));padding-right:max(var(--s4),env(safe-area-inset-right))}}
h1{font:400 clamp(34px,5vw,44px)/1.05 var(--serif);letter-spacing:-.01em;margin:0}
h1 em{font-style:italic;color:var(--accent)}
h2{font:400 var(--fs-lg)/1.2 var(--serif);margin:0}
p.note{color:var(--soft);font-size:var(--fs-sm);margin:0}
section{margin:0 0 var(--s5)}
button{font:inherit;font-size:var(--fs-sm);line-height:1.3;background:var(--ink);color:var(--bg);border:0;margin:0;
padding:var(--s2) var(--s4);min-height:36px;border-radius:8px;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--digit);outline-offset:2px}
a{color:var(--link)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- panels ---- */
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:16px;box-shadow:var(--shadow);padding:var(--s5);margin:0 0 var(--s5)}
@media (max-width:600px){.panel{padding:var(--s4)}}
.sechead{display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;margin:0 0 var(--s4)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:0 var(--s2);border:1px solid var(--line);border-radius:999px;
background:var(--bg);color:var(--soft);font:600 var(--fs-xs)/22px var(--sans);white-space:nowrap}
.chip b{color:var(--ink);font-weight:700}
.chip.gold{border-color:#E7A92A}
.msg{border-color:var(--warn);background:var(--warnbg)}

/* ---- header ---- */
.top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4) var(--s5);flex-wrap:wrap;margin:0 0 var(--s5)}
.subtitle{color:var(--soft);font-size:var(--fs-sm);margin:var(--s2) 0 0}
.controls{display:flex;align-items:center;gap:var(--s3)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{border-radius:0;background:none;color:var(--ink);padding:6px 14px;min-height:34px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed=true],.seg button[aria-selected=true]{background:var(--seg-on);color:var(--seg-on-ink)}
.seg button:focus-visible{outline-offset:-3px}
.seg.icons button{padding:6px 10px;display:inline-flex;align-items:center;justify-content:center;min-width:36px}
.seg svg{width:16px;height:16px;display:block}
.ranges{display:flex;margin:0 0 var(--s4)}
.ranges button{flex:1;min-height:40px;font-weight:600;white-space:nowrap}
@media (max-width:420px){.ranges button{padding:6px 6px;font-size:13px}}
.live{display:inline-flex;align-items:center;gap:6px;margin-left:var(--s2);font-size:var(--fs-xs);color:var(--soft);white-space:nowrap}
.live b{color:var(--ok);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.live.off i{background:var(--soft)}
.live.off b{color:var(--soft)}

/* ---- hero: the leader, odometer in a navy window ---- */
.hero{background:var(--panel);border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow);padding:var(--s5)}
@media (max-width:600px){.hero{padding:var(--s4)}}
.hero-top{display:flex;align-items:center;gap:var(--s4)}
.hero-top .who{min-width:0;flex:1}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.hero .name{font:400 var(--fs-xl)/1.1 var(--serif);margin:2px 0 var(--s2);overflow-wrap:anywhere}
.hero .name a{color:inherit;text-decoration:none}
.hero .chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.odo-wrap{display:flex;flex-direction:column;align-items:center;margin:var(--s5) 0 var(--s2)}
.unit{margin:var(--s3) 0 0;font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);text-align:center}
.odo{display:inline-flex;gap:4px;background:var(--dial);padding:var(--s3);border-radius:12px;max-width:100%;box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
.odo .d,.odo .sep{font:700 clamp(26px,7.4vw,64px)/1.1 "Archivo Narrow","Arial Narrow",Arial,sans-serif;color:var(--digit)}
.odo .d{display:inline-block;box-sizing:content-box;height:1.1em;overflow:hidden;min-width:.66em;text-align:center;
padding:2px 6px;border-radius:4px;font-variant-numeric:tabular-nums;
background:linear-gradient(#0000 0 46%,rgba(255,255,255,.07) 46% 54%,#0000 54%),var(--cell)}
.odo .reel{display:block;transition:transform 1.5s cubic-bezier(.16,.84,.3,1)}
.odo .reel i{display:block;height:1.1em;font-style:normal}
.odo.still .reel{transition:none}
.odo .sep{display:inline-block;padding:0 1px;color:var(--dial-sep);align-self:flex-end}
@media (max-width:600px){.odo{gap:2px;padding:6px}.odo .d{padding:2px 3px}}
@media (prefers-reduced-motion:reduce){.odo .reel{transition:none}}
.hero .lead{text-align:center;color:var(--soft);margin:var(--s3) 0 0}
.hero .lead b{color:var(--ink)}
.empty{color:var(--soft);text-align:center;padding:var(--s5) 0}

/* ---- standings ---- */
.board{list-style:none;margin:0;padding:0}
.board li+li{border-top:1px solid var(--line)}
.board a.row{display:grid;grid-template-columns:28px 56px minmax(0,1fr) auto;align-items:center;gap:var(--s3);
padding:var(--s3) var(--s2);margin:0 calc(-1 * var(--s2));color:inherit;text-decoration:none;border-radius:10px}
.board a.row:hover{background:var(--bg)}
.board .rk{font:400 var(--fs-lg)/1 var(--serif);color:var(--soft);text-align:center}
.board li:first-child .rk{color:#C88A0E}
.board .nm{font-weight:700;font-size:var(--fs-md);line-height:1.25;overflow-wrap:anywhere}
.board .meta{color:var(--soft);font-size:var(--fs-xs);line-height:1.5}
.board .bar{display:block;height:6px;background:var(--h0);border-radius:3px;margin-top:6px;overflow:hidden}
.board .bar i{display:block;height:100%;background:var(--h3);border-radius:3px;transform-origin:left center;animation:grow .8s cubic-bezier(.16,1,.3,1) both}
.board .val{text-align:right}
.board .val strong{display:block;font:400 28px/1.1 var(--serif);white-space:nowrap}
.board .val small{display:block;color:var(--soft);font-size:var(--fs-xs);white-space:nowrap}
@keyframes grow{from{transform:scaleX(0)}}
.board.drawn .bar i{animation:none}
@media (max-width:480px){.board a.row{grid-template-columns:20px 44px minmax(0,1fr) auto;gap:var(--s2)}
.board .mslot{width:44px!important;height:44px!important}.board .val strong{font-size:24px}.board .meta .x{display:none}}

/* ---- stat strip (between hairlines, like the odometer) ---- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats>div{padding:var(--s4) var(--s4) var(--s4) var(--s5);border-left:1px solid var(--line);min-width:0}
.stats>div:first-child{border-left:0;padding-left:0}
.stats small{display:block;color:var(--soft);font-size:var(--fs-xs);line-height:1.4}
.stats strong{display:block;font:400 30px/1.1 var(--serif);margin:var(--s1) 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats.six>div:nth-child(3n+1){border-left:0;padding-left:0}.stats.six>div:nth-child(n+4){border-top:1px solid var(--line)}
@media (max-width:640px){.stats,.stats.six{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats>div,.stats.six>div{padding:var(--s3) var(--s3) var(--s3) var(--s4);border-left:1px solid var(--line);border-top:0}
.stats>div:nth-child(odd),.stats.six>div:nth-child(odd){border-left:0;padding-left:0}
.stats>div:nth-child(n+3),.stats.six>div:nth-child(n+3){border-top:1px solid var(--line)}
.stats strong{font-size:26px}}

/* ---- player page ---- */
.back{display:inline-flex;align-items:center;gap:6px;margin:0 0 var(--s4);font-weight:600;text-decoration:none}
.phead{display:flex;align-items:center;gap:var(--s5);margin:0 0 var(--s5)}
.phead h2{font-size:clamp(30px,6vw,40px);line-height:1.05;overflow-wrap:anywhere}
.phead .chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
@media (max-width:600px){.phead{gap:var(--s4)}.phead .mslot{width:80px!important;height:80px!important}}
.ladder{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s2)}
.ladder li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg);
border:1px solid var(--line);border-radius:10px;padding:var(--s3) var(--s2)}
.ladder .mslot{display:block;margin:0 auto var(--s1)}
.ladder .nm{font-size:var(--fs-sm);font-weight:700;line-height:1.3}
.ladder .tally{display:flex;align-items:baseline;justify-content:center;gap:var(--s1);margin-top:2px;color:var(--soft);font-size:var(--fs-xs)}
.ladder .tally b{font-size:var(--fs-md);color:var(--ink);font-variant-numeric:tabular-nums}
.ladder li.locked{background:none;border-style:dashed;border-color:var(--soft);color:var(--soft)}
.ladder li.locked .nm,.ladder li.locked .tally b{color:var(--soft)}
.ladder li.best{border-color:#E7A92A;box-shadow:inset 0 0 0 1px #E7A92A}
.ladder .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--digit);color:#15243A;
font-size:var(--fs-xs);font-weight:700;line-height:20px;border-radius:999px;padding:0 var(--s2);white-space:nowrap}
@media (max-width:760px){.ladder{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:var(--s4)}}
@media (max-width:540px){.ladder{grid-template-columns:1fr;row-gap:var(--s2)}
.ladder li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s3);text-align:left;padding:var(--s2) var(--s3)}
.ladder .mslot{width:44px!important;height:44px!important;margin:0}
.ladder .tally{margin:0}
.ladder .tag{left:auto;right:var(--s3);transform:none}}
.foot{color:var(--soft);font-size:var(--fs-xs);margin:var(--s3) 0 0}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .ax{fill:var(--soft);font:var(--fs-xs) var(--sans)}
.chart .grid{stroke:var(--line)}
.chart rect.bar{rx:2px}
.share{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--h0);margin:0 0 var(--s3)}
.share i{display:block;height:100%}
.share i+i{border-left:2px solid var(--panel)}
.key{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.key li{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:var(--s2);align-items:center}
.key li i{width:12px;height:12px;border-radius:3px}
.key li span:last-child{color:var(--soft);min-width:44px;text-align:right}
table.days{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.days th{font-size:var(--fs-xs);font-weight:600;color:var(--soft);text-align:right;padding:0 0 var(--s2) var(--s3);border-bottom:1px solid var(--line)}
table.days td{text-align:right;padding:var(--s2) 0 var(--s2) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
table.days th:first-child,table.days td:first-child,table.days th:nth-child(2),table.days td:nth-child(2){text-align:left;padding-left:0}
table.days td:nth-child(2){padding-left:var(--s3)}
table.days .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
@media (max-width:600px){table.days .x{display:none}table.days{font-size:13px}}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
@media (max-width:700px){.two{grid-template-columns:minmax(0,1fr)}}
.rise{animation:rise .5s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.rise,.board .bar i{animation:none}}
footer{color:var(--soft);font-size:var(--fs-xs);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s6)}
.mh{cursor:default}

/* ---------------- mascots (ported from mascot-playground.html) ----------------
   .mh = a host that reacts (hover, blink, hop, spin); .mslot.tN = where tier N's mascot is drawn */
.mslot{display:inline-block;flex:none;vertical-align:middle}
.mslot svg{display:block;width:100%;height:100%}
.m{display:block;overflow:visible}
.m *{transform-box:fill-box;transform-origin:center}
.m .rig,.m .body{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.m .eyes{transition:transform .35s cubic-bezier(.34,1.56,.64,1);transform:rotate(-22deg) translate(2px,-1px)}
.m .look{transition:transform .18s ease-out}
.m .eye{transition:transform .12s ease-in}
.hov .m .eyes{transform:rotate(0)}
.hov .m .rig{transform:rotate(-5deg) scale(1.04,.97)}
.blink .m .eye{transform:scaleY(.12)}
.hop .m .rig{animation:hop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes hop{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(2px) scale(1.12,.86)}
50%{transform:translateY(-16px) scale(.92,1.1)}78%{transform:translateY(1px) scale(1.08,.92)}100%{transform:translateY(0) scale(1,1)}}
.spin .m .rig{animation:spin .7s cubic-bezier(.45,0,.2,1)}
@keyframes spin{0%{transform:scaleX(1)}25%{transform:scaleX(0)}50%{transform:scaleX(-1)}75%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.t1 .m .look{animation:dart 5s ease-in-out infinite}
@keyframes dart{0%,38%{transform:translateX(0)}42%,55%{transform:translateX(-4px)}60%,74%{transform:translateX(4px)}80%,100%{transform:translateX(0)}}
.hov .t1 .m .look{animation:none}
.t2 .m .spark{animation:flick 1.6s steps(1) infinite}
@keyframes flick{0%,60%,100%{opacity:1}65%{opacity:.25}70%{opacity:1}85%{opacity:.4}}
.t3 .m .mic{animation:talk 2.4s ease-in-out infinite}
@keyframes talk{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.t4 .m .hat{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hov .t4 .m .hat{transform:translateY(-3px) rotate(-6deg)}
.t5 .m .scan{animation:scan 3.4s ease-in-out infinite}
@keyframes scan{0%,55%{transform:skewX(-20deg) translateX(0)}85%,100%{transform:skewX(-20deg) translateX(62px)}}
.t5 .m .holo{animation:holo 3s ease-in-out infinite}
@keyframes holo{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-3px);opacity:1}}
.t5 .m .cube{animation:cube 8s linear infinite}
@keyframes cube{to{transform:rotate(360deg)}}
.hov .t5 .m .cube{animation-duration:1.6s}
.hov .t5 .m .scan{animation-duration:1.2s}
.t5 .m .visor{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.hov .t5 .m .visor{transform:translateY(-1.5px) scale(1.04)}
.t6 .m .float,.t7 .m .float{animation:bob 3.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.t6 .m .halo{animation:halo 2.4s linear infinite}
@keyframes halo{to{stroke-dashoffset:-36}}
.t6 .m .glow,.t7 .m .glow{animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:.7}}
.t7 .m .cape{animation:cape 2.6s ease-in-out infinite;transform-origin:50% 0}
@keyframes cape{0%,100%{transform:skewX(0)}50%{transform:skewX(-6deg)}}
.t7 .m .crown{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.hov .t7 .m .crown{transform:rotate(-10deg) translateY(-2px)}
/* locked tiers: the same shape as a flat, still silhouette */
.m.sil{color:var(--soft);opacity:.4}
.m.sil *{animation:none!important}
/* a soft rim so the navy Architect still reads on dark backgrounds */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .m .body{stroke:rgba(255,255,255,.14);stroke-width:2}}
:root[data-theme=dark] .m .body{stroke:rgba(255,255,255,.14);stroke-width:2}
@media (prefers-reduced-motion:reduce){.m *{animation:none!important;transition:none!important}}
/* where they sit */
.trophy.mh{cursor:default}