:root{
 --bg:#f4f4f1; --surface:#fffefb; --surface-2:#f8f8f5; --sunk:#efeeea;
 --ink:#111110; --ink-2:#45443f; --ink-3:#66655f;
 --line:#e4e3dd; --line-2:#cfcec6;
 --accent:#b8321f; --accent-ink:#ffffff; --link:#1f5fae;
 --d1:#2a78d6; --d1-soft:#b7d3f6; --d2:#eb6834; --d2-soft:#f6c3ad; --d-mute:#c3c2b7;
 --div-pos:#2a78d6; --div-neg:#e34948; --div-mid:#f0efec;
 --good:#006300; --bad:#b3261e; --gold:#d49b32;
 --shadow:0 1px 2px rgba(17,17,16,.06),0 4px 16px rgba(17,17,16,.05);
 --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
 --r:12px; --r-sm:8px;
 --sans:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
 --cond:"Barlow Condensed","Arial Narrow",Barlow,sans-serif;
 --serif:Literata,Georgia,serif;
}
@media (prefers-color-scheme:dark){:root{
 --bg:#0d0d0d; --surface:#1a1a19; --surface-2:#20201f; --sunk:#262624;
 --ink:#f8f7f2; --ink-2:#c3c2b7; --ink-3:#a6a59c;
 --line:#2c2c2a; --line-2:#3d3d3a;
 --accent:#f0714f; --accent-ink:#1a1a19; --link:#7eb3f2;
 --d1:#3987e5; --d1-soft:#1c4f8c; --d2:#d95926; --d2-soft:#6e3219; --d-mute:#55544f;
 --div-pos:#3987e5; --div-neg:#e66767; --div-mid:#383835;
 --good:#5cc95c; --bad:#ff8a80;
 --shadow:none;
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.5 var(--sans);font-variant-numeric:lining-nums}
img{max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--cond);font-weight:700;line-height:1.05;letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 var(--s4)}
b,strong{font-weight:600}
:focus-visible{outline:3px solid var(--d1);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.kicker{font:600 .75rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.kicker.hot{color:var(--accent)}
.muted{color:var(--ink-3)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-60px;z-index:60;background:var(--ink);color:var(--bg);padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip:focus{top:var(--s3)}
main:focus{outline:none}

/* ---------- frame ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--s5) var(--s8)}
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
 padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:var(--s3);padding:11px 0;color:var(--ink);text-decoration:none}
.brand .mark{font:400 1.375rem/1 Ultra,Georgia,serif;letter-spacing:.01em}
.brand .sub{font:600 .75rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.nav{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--s2))}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;display:flex;align-items:center;min-height:44px;padding:0 var(--s3);border-radius:999px;
 font:600 .9375rem/1 var(--sans);color:var(--ink-2);text-decoration:none}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--bg)}
footer{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);display:flex;
 justify-content:space-between;gap:var(--s4);flex-wrap:wrap;color:var(--ink-3);font-size:.875rem}

/* ---------- page heads ---------- */
.hero{padding:var(--s6) 0 var(--s5)}
.hero .meta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.hero h1{font-weight:800;font-size:clamp(2.25rem,6.4vw,4rem);line-height:.96;max-width:18ch}
.hero .dek{margin:var(--s4) 0 0;font:400 1.1875rem/1.5 var(--serif);color:var(--ink-2);max-width:60ch}
.page-h{padding:var(--s6) 0 var(--s4)}
.page-h h1{font-weight:800;font-size:clamp(2.125rem,5.4vw,3.375rem);line-height:1}
.page-h p{margin:var(--s3) 0 0;color:var(--ink-2);max-width:62ch;font-size:1.0625rem}

/* ---------- layout ---------- */
.layout{display:grid;gap:var(--s6)}
@media (min-width:1024px){
 .layout{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"top aside" "main aside";gap:var(--s7) var(--s7);align-items:start}
 .l-top{grid-area:top} .l-main{grid-area:main} .aside{grid-area:aside;position:sticky;top:var(--s4)}
}
.l-main > .sec:first-child{margin-top:0}
.aside{display:grid;gap:var(--s5)}
.layout > *,.aside > *{min-width:0}
main{min-width:0}

/* ---------- lists are divided rows; only the matchups are cards ---------- */
.rows{display:grid;gap:0 var(--s5)}
.rows > *{min-width:0;padding:var(--s3) 0;border-top:1px solid var(--line)}
.rows > :first-child{border-top:0;padding-top:0}
@media (min-width:640px){.rows.two,.rows.three{grid-template-columns:1fr 1fr}
 .rows.two > :nth-child(2),.rows.three > :nth-child(2){border-top:0;padding-top:0}}
@media (min-width:900px){.rows.three{grid-template-columns:repeat(3,1fr)} .rows.three > :nth-child(3){border-top:0;padding-top:0}}
.list-h{font-size:1.25rem;padding-bottom:var(--s2);border-bottom:1px solid var(--line-2)}
/* Power rankings. Narrow: a scoreboard (rank, team, three numbers under one header, then the note).
   Wide: every number keeps its label and the roster's best player joins the row. Sized by the
   list's own width, since the sidebar changes how much room it gets. */
.plist{display:grid;container-type:inline-size}
.phead,.prow{display:grid;grid-template-columns:1.9em minmax(0,1fr) repeat(3,3.3em);gap:var(--s2);align-items:center}
.phead{padding-bottom:var(--s2);border-bottom:1px solid var(--line-2);font:600 .75rem/1.2 var(--sans);color:var(--ink-3);text-align:right}
.prow{padding:var(--s3) 0;border-top:1px solid var(--line)}
.phead + .prow{border-top:0}
.prow .rk{font:800 1.375rem/1 var(--cond);color:var(--ink-3);align-self:start;padding-top:4px}
.prow .rk small{display:block;margin-top:4px;font:700 .75rem/1 var(--sans)}
.prow .pteam{min-width:0}
.prow .tm.lg .av,.prow .tm.lg .av img.tcard{width:30px;height:45px}
.prow .tm.lg .ab{font-size:1.0625rem}
.prow .tm .av img.logo{display:none}
.prow .pn{text-align:right;line-height:1.1}
.prow .pn b{font:700 1.0625rem/1 var(--sans);font-variant-numeric:tabular-nums}
.prow .pn small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.prow .ptop{display:none}
.prow .pl .nm{white-space:normal}
.prow .pnote{grid-column:2/-1;margin:0;color:var(--ink-2);font-size:.9375rem}
@container (max-width:340px){.prow .tm .mg{display:none}}
@container (min-width:700px){
 .phead{display:none}
 .prow{grid-template-columns:2.2em minmax(9em,1fr) repeat(3,auto) minmax(12em,1.4fr);gap:var(--s3) var(--s4);padding:var(--s4) 0}
 .phead + .prow{padding-top:0}
 .prow .rk{font-size:1.625rem}
 .prow .tm.lg .av,.prow .tm.lg .av img.tcard{width:40px;height:60px}
 .prow .tm.lg .ab{font-size:1.3125rem}
 .prow .tm .av img.logo{display:block}
 .prow .pn{text-align:left}
 .prow .pn b{font-size:1.25rem}
 .prow .pn small{position:static;display:block;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;
  margin-top:3px;font:500 .75rem/1.3 var(--sans);color:var(--ink-3)}
 .prow .ptop{display:block;min-width:0}
}
.dlist{display:grid}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line)}
.drow:first-child{border-top:0}
.drow .dn{text-align:right;line-height:1.2}
.drow .dn b{display:block;font:700 1.125rem/1 var(--sans);font-variant-numeric:tabular-nums}
.drow .dn small{font:500 .75rem/1.3 var(--sans);color:var(--ink-3);font-variant-numeric:tabular-nums}
.sec{margin-top:var(--s7)}
.sec:first-child{margin-top:0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
 padding-bottom:var(--s3);margin-bottom:var(--s4);border-bottom:2px solid var(--ink)}
.sec-h h2{font-size:clamp(1.625rem,3.6vw,2.125rem)}
.sec-dek{margin:calc(-1*var(--s1)) 0 var(--s5);color:var(--ink-2);max-width:66ch}
.sec-dek.after{margin:var(--s3) 0 0}
/* the one call to action in a sidebar (the PIN box, the complaint form) sits on a panel; the rest is flat */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4)}
.blk{border-top:2px solid var(--ink);padding-top:var(--s3)}
.blk h3{font-size:1.25rem;margin-bottom:var(--s1)}
.blk .sub{font-size:.8125rem;color:var(--ink-3);margin:0 0 var(--s3)}
.blk .go{margin:var(--s3) 0 0;font-size:.875rem}
.blk .wait{font-size:.875rem;color:var(--ink-3)}
.aside .note{font-size:.8125rem;color:var(--ink-3);margin:0}
@media (max-width:600px){.wrap{padding:0 var(--s4) var(--s8)} .sec{margin-top:var(--s6)}}

/* ---------- team and player chips ---------- */
.tm{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;max-width:100%}
.tm .av{position:relative;flex:0 0 auto;width:30px;height:45px}
.tm .av img.tcard{width:30px;height:45px;border-radius:4px;object-fit:cover;display:block;box-shadow:0 0 0 1px var(--line)}
.tm .av img.logo{position:absolute;right:-7px;bottom:-5px;width:22px;height:22px;border-radius:50%;
 background:var(--surface);box-shadow:0 0 0 2px var(--surface);object-fit:contain}
.tm .nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.tm .ab{font:700 1.0625rem/1.1 var(--cond);letter-spacing:.01em}
.tm .mg{font-size:.8125rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm.lg .av{width:40px;height:60px} .tm.lg .av img.tcard{width:40px;height:60px}
.tm.lg .ab{font-size:1.3125rem}
.pl{display:flex;align-items:center;gap:var(--s3);min-width:0}
.pl .hs{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--sunk);object-fit:cover;object-position:center 20%}
.pl .hs.logo{object-fit:contain;padding:6px}
.pl .who{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pl .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .mt{font-size:.8125rem;color:var(--ink-3)}
.pl .v{margin-left:auto;text-align:right;font:700 1.125rem/1 var(--sans);font-variant-numeric:tabular-nums}
.pl .v small{display:block;font:500 .75rem/1.3 var(--sans);color:var(--ink-3)}

/* ---------- this week at a glance ---------- */
.glance{display:grid;gap:var(--s3)}
@media (min-width:600px){.glance{grid-template-columns:1fr 1fr}}
.mu{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);display:grid;gap:var(--s3);
 text-decoration:none;color:inherit;box-shadow:var(--shadow)}
a.mu:hover{border-color:var(--line-2)}
.mu .row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.mu .sc{font:700 1.375rem/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.mu .sc small{display:block;font:500 .75rem/1.3 var(--sans);color:var(--ink-3)}
.mu .foot{display:flex;justify-content:space-between;gap:var(--s3);font-size:.8125rem;color:var(--ink-3)}
.wp{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s2);font:600 .8125rem/1 var(--sans);
 font-variant-numeric:tabular-nums;color:var(--ink-2)}
.wp .bar{display:flex;height:8px;gap:2px}
.wp .bar i{display:block;height:100%;border-radius:4px}
.wp .bar i.a{background:var(--d1)} .wp .bar i.b{background:var(--d2)}
.wp .k{display:inline-flex;align-items:center;gap:6px}
.wp .k::before{content:"";width:10px;height:3px;border-radius:2px;background:var(--d1)}
.wp .k.b::before{background:var(--d2)}
/* On a phone the week fits in one screen: two small tiles per row, abbreviations, score, odds, status. */
@media (max-width:599px){
 .glance{grid-template-columns:1fr 1fr;gap:var(--s2)}
 .mu{padding:var(--s3) 10px;gap:var(--s2)}
 .mu .row{gap:var(--s2)}
 .mu .tm .mg,.mu .tm .av img.logo,.mu .wp .t,.mu .foot .cta{display:none}
 .mu .sc small{font-size:.6875rem}
 .mu .tm .av,.mu .tm .av img.tcard{width:22px;height:33px}
 .mu .tm .ab{font-size:1rem}
 .mu .sc{font-size:1.0625rem}
 .mu .wp{gap:6px}
}
@media (max-width:339px){.glance{grid-template-columns:1fr}}

/* ---------- aside blocks ---------- */
.mini{width:100%;border-collapse:collapse;font-size:.875rem}
.mini th{font:600 .6875rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right;padding:0 0 var(--s2)}
.mini th:first-child,.mini td:first-child{text-align:left}
.mini td{padding:var(--s2) 0;border-top:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.mini td .tm .av{width:20px;height:30px} .mini td .tm .av img.tcard{width:20px;height:30px}
.mini td .tm .av img.logo{display:none}
.mini td .tm .ab{font-size:.9375rem}
.meter{display:inline-block;width:64px;height:6px;border-radius:3px;background:var(--sunk);vertical-align:middle;margin-left:var(--s2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--d1);border-radius:3px}

/* ---------- long read ---------- */
.story{font:400 1.125rem/1.65 var(--serif);color:var(--ink)}
@media (max-width:600px){.story{font-size:1.0625rem;line-height:1.6}}
.story p{margin:0 0 var(--s4);max-width:66ch}
.story p b{font-family:var(--sans);font-weight:700}
.lead-art{margin:0 0 var(--s5);border-radius:var(--r);overflow:hidden;background:var(--sunk);aspect-ratio:16/9}
.lead-art img{width:100%;height:100%;object-fit:cover;display:block}
.caption{font-size:.8125rem;color:var(--ink-3);margin-top:var(--s2)}

/* ---------- a matchup, full: the one card on the page ---------- */
.game{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow);
 scroll-margin-top:var(--s4);min-width:0}
@media (max-width:600px){.game{padding:var(--s4)}}
.game + .game{margin-top:var(--s5)}
.game .gh{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.game .gh h3{font-size:clamp(1.375rem,3vw,1.75rem);max-width:26ch}
.vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.vs .side{min-width:0} .vs .tm{max-width:100%}
.vs .r{justify-self:end;text-align:right}
.vs .r .tm{flex-direction:row-reverse} .vs .r .tm .nm{align-items:flex-end} .vs .r .tm .av img.logo{right:auto;left:-7px}
.vs .mid{font:700 .8125rem/1 var(--sans);color:var(--ink-3);letter-spacing:.08em}
.vs .big{margin-top:var(--s2);font:700 1.875rem/1 var(--sans);font-variant-numeric:tabular-nums}
.vs .big small{display:block;margin-top:4px;font:500 .75rem/1.3 var(--sans);color:var(--ink-3)}
.vs .r .big{text-align:right}
@media (max-width:600px){.vs .tm.lg .av,.vs .tm.lg .av img.tcard{width:30px;height:45px} .vs .tm.lg .ab{font-size:1.0625rem}
 .vs .big{font-size:1.625rem}}
.tape{display:grid;gap:var(--s3);margin:var(--s4) 0}
.tape .m{display:grid;grid-template-columns:4.2em 1fr auto 1fr 4.2em;align-items:center;gap:var(--s2);font-size:.875rem}
.tape .m .va{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.tape .m .vb{font-weight:700;font-variant-numeric:tabular-nums}
.tape .m .lab{font:600 .6875rem/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);text-align:center;min-width:8.5em}
.tape .m .ba,.tape .m .bb{height:10px;display:flex}
.tape .m .ba{justify-content:flex-end}
.tape .m .ba i,.tape .m .bb i{display:block;height:100%}
.tape .m .ba i{background:var(--d1);border-radius:4px 0 0 4px}
.tape .m .bb i{background:var(--d2);border-radius:0 4px 4px 0}
@media (max-width:520px){.tape .m{grid-template-columns:3.4em 1fr 3.4em;grid-template-areas:"lab lab lab" "va bars vb"}
 .tape .m .lab{grid-area:lab;text-align:left} .tape .m .va{grid-area:va} .tape .m .vb{grid-area:vb}
 .tape .m .ba,.tape .m .bb{grid-area:bars} .tape .m .ba{width:50%;justify-self:start;padding-right:1px} .tape .m .bb{width:50%;justify-self:end;padding-left:1px}}
.series{margin:var(--s4) 0}
.series > .kicker{display:block;margin-bottom:6px}
.series .dots{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.series .yr{font:600 .6875rem/1 var(--sans);color:var(--ink-3);margin:0 2px 0 6px}
.series .yr:first-child{margin-left:0}
.series .dot{width:12px;height:12px;border-radius:50%;background:var(--d-mute);box-shadow:0 0 0 2px var(--surface)}
.series .dot.a{background:var(--d1)} .series .dot.b{background:var(--d2)}
.series .dot.po{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink-3)}
.series .key{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s2);font-size:.8125rem;color:var(--ink-3)}
.series .key span{display:inline-flex;align-items:center;gap:6px}
.series .key span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--d1)}
.series .key span.b::before{background:var(--d2)}
.series .key span.po::before{background:none;box-shadow:inset 0 0 0 2px var(--ink-3)}
.lineups{display:grid;gap:var(--s4);margin-top:var(--s4)}
@media (min-width:640px){.lineups{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.lineups .col{display:grid;gap:var(--s3);align-content:start}
.lineups .col .kicker{margin-bottom:0}
/* On phones the full series and the key players fold behind a toggle; the story stays above it. */
.more{margin-top:var(--s4);border-top:1px solid var(--line)}
.more > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;cursor:pointer;
 list-style:none;font:600 .9375rem/1.2 var(--sans);color:var(--link)}
.more > summary::-webkit-details-marker{display:none}
.more > summary::after{content:"";flex:0 0 auto;width:7px;height:7px;margin-right:4px;border-right:2px solid currentColor;
 border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.more[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
@media (min-width:720px){.more{margin-top:0;border-top:0} .more > summary{display:none}}
.game > .poll{margin-top:var(--s4)}

/* ---------- tables ---------- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th{font:600 .6875rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right;
 padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:var(--s3);border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;vertical-align:middle}
.tbl th.l,.tbl td.l{text-align:left}
.tbl td.nw{white-space:nowrap}
.tbl tbody th{font:600 .9375rem/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);padding:var(--s3);border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.tbl tr:last-child th{border-bottom:0}
.tbl td.rk{font:700 1.125rem/1 var(--sans);color:var(--ink-3);width:2.2em;text-align:left}
.tbl td.note{text-align:left;color:var(--ink-2);font-size:.875rem;min-width:16em;max-width:30em}
.tbl tr:last-child td{border-bottom:0}
.tbl .up{color:var(--good);font-weight:600} .tbl .down{color:var(--bad);font-weight:600}
.tbl .barcell{min-width:120px}
.tbl .hb{display:flex;align-items:center;gap:var(--s2);justify-content:flex-end}
.tbl .hb i{display:block;height:8px;border-radius:0 4px 4px 0;background:var(--d1)}
@media (max-width:600px){.tbl{font-size:.875rem}.tbl td,.tbl th{padding:var(--s2)}
 .tbl.sticky tbody th{position:sticky;left:0;background:var(--bg);z-index:1}}

/* ---------- charts ---------- */
.chart{margin:var(--s5) 0 0}
.chart .ct{font:700 1.125rem/1.2 var(--cond);margin:0 0 var(--s1)}
.chart .cs{font-size:.875rem;color:var(--ink-2);margin:0 0 var(--s3)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart svg text{font-family:var(--sans);fill:var(--ink-2)}
.chart svg .t-strong{fill:var(--ink);font-weight:600}
.chart svg .t-muted{fill:var(--ink-3)}
.chart svg .grid{stroke:var(--line);stroke-width:1}
.chart svg .axis{stroke:var(--line-2);stroke-width:1}
.chart svg .m1{fill:var(--d1)} .chart svg .m2{fill:var(--d2)} .chart svg .mm{fill:var(--d-mute)}
.chart svg .m1s{fill:var(--d1-soft)}
.chart svg .pos{fill:var(--div-pos)} .chart svg .neg{fill:var(--div-neg)}
.chart svg .ln{fill:none;stroke:var(--d1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart svg .ln.mute{stroke:var(--d-mute)}
.chart svg .ring{stroke:var(--bg);stroke-width:2}
.chart svg [data-tip]{cursor:default}
.chart svg [data-tip]:hover{opacity:.82}
.chart .legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:.8125rem;color:var(--ink-2);margin:0 0 var(--s3)}
.chart .legend span{display:inline-flex;align-items:center;gap:6px}
.chart .legend i{width:10px;height:10px;border-radius:2px;background:var(--d1);display:inline-block}
.chart .legend i.m2{background:var(--d2)} .chart .legend i.mm{background:var(--d-mute)} .chart .legend i.m1s{background:var(--d1-soft)}
.chart .legend i.neg{background:var(--div-neg)}
.chart details{margin-top:var(--s3);font-size:.875rem}
.chart summary{cursor:pointer;color:var(--link);min-height:44px;display:inline-flex;align-items:center}
.viz-tip{position:fixed;z-index:50;pointer-events:none;background:var(--ink);color:var(--bg);padding:6px 10px;border-radius:6px;
 font:500 .8125rem/1.35 var(--sans);max-width:260px;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.viz-tip b{font-weight:700}
.smalls{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.smalls figure{margin:0}
.smalls figcaption{display:flex;justify-content:space-between;font-size:.8125rem;color:var(--ink-2);margin-bottom:var(--s1)}
.smalls figcaption b{color:var(--ink)}

/* ---------- awards ---------- */
.awards{margin-top:var(--s5)}
.award{display:grid;gap:var(--s2);align-content:start}
.award .kicker{color:var(--accent)}
.award .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.award .row .sc{font:700 1.375rem/1 var(--sans);font-variant-numeric:tabular-nums}
.award p{margin:0;color:var(--ink-2);font-size:.9375rem}

/* ---------- picks and polls ---------- */
.who{display:grid;gap:var(--s3)}
.who h3{font-size:1.25rem}
.who p{margin:0;color:var(--ink-2);font-size:.9375rem}
.pinrow{display:flex;gap:var(--s2)}
.pinrow input{flex:1;min-width:0;width:100%;min-height:44px;padding:0 var(--s3);border:1px solid var(--line-2);border-radius:var(--r-sm);
 background:var(--surface-2);color:var(--ink);font:600 1.0625rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.btn{min-height:44px;padding:0 var(--s4);border:0;border-radius:var(--r-sm);background:var(--ink);color:var(--bg);
 font:700 .9375rem/1 var(--sans);cursor:pointer}
.btn:hover{opacity:.9}
.whoami{font-weight:600;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.swap{background:none;border:0;color:var(--link);font:500 .875rem var(--sans);text-decoration:underline;cursor:pointer;min-height:44px;padding:0}
.status{font-size:.875rem;color:var(--ink-3);min-height:1.4em}
.polls{display:grid;gap:0 var(--s5)}
@media (min-width:720px){.polls{grid-template-columns:1fr 1fr}}
.poll{display:grid;gap:var(--s3);align-content:start;padding:var(--s4) 0 var(--s5);border-top:1px solid var(--line)}
.polls > .poll:first-child{border-top:0;padding-top:0}
@media (min-width:720px){.polls > .poll:nth-child(2){border-top:0;padding-top:0}}
.game .poll{padding:var(--s4) 0 0}
.poll .ptop{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.poll .lock{font:600 .75rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--good)}
.poll .lock.shut{color:var(--ink-3)}
.poll .q{font:700 1.25rem/1.2 var(--cond)}
.opts{display:grid;gap:var(--s2)}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative;display:flex;align-items:center;gap:var(--s2);width:100%;min-height:44px;padding:var(--s2) var(--s3);
 border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font:500 .9375rem/1.3 var(--sans);
 text-align:left;cursor:pointer;overflow:hidden}
.opt .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--d1-soft);opacity:.55;transition:width .3s}
.opt .lb,.opt .pc,.opt .odds{position:relative}
.opt .lb{flex:1}
.opt .odds{font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.opt .pc{font-weight:700;font-variant-numeric:tabular-nums;font-size:.875rem}
.opt.mine{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.mine .lb::after{content:" · tu voto";font-weight:600;color:var(--ink-3)}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.pick{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:52px;padding:var(--s2) var(--s3);
 border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);cursor:pointer;
 font:700 1rem/1 var(--cond);position:relative;overflow:hidden}
.pick .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--d1-soft);opacity:.5;transition:width .3s}
.pick .lb,.pick .pc{position:relative}
.pick .pc{font:700 .8125rem/1 var(--sans);font-variant-numeric:tabular-nums}
.pick.mine{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pmeta{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:.8125rem;color:var(--ink-3)}
.reveal{font-size:.875rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:var(--s3);display:none}
.poll.voted .reveal,.reveal.on{display:block}

/* ---------- board ---------- */
.field{display:grid;gap:var(--s1)}
.field label{font:600 .8125rem/1.2 var(--sans);color:var(--ink-2)}
.tinput{width:100%;min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--line-2);border-radius:var(--r-sm);
 background:var(--surface-2);color:var(--ink);font:400 1rem/1.4 var(--sans)}
textarea.tinput{min-height:120px;resize:vertical}
.tickets{display:grid}
.ticket{display:grid;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--line)}
.ticket:first-child{border-top:0;padding-top:0}
.admin > summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.admin .field{margin-top:var(--s2)}
.admin p{font-size:.875rem;margin:var(--s3) 0 0}
.ticket .th{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:.8125rem;color:var(--ink-3)}
.ticket h3{font:700 1.1875rem/1.2 var(--cond)}
.ticket p{margin:0;white-space:pre-wrap}
.tag{display:inline-flex;align-items:center;min-height:22px;padding:0 var(--s2);border-radius:999px;background:var(--sunk);
 color:var(--ink-2);font:600 .75rem/1 var(--sans)}
.tag.ok{color:var(--good)}

/* ---------- historia ---------- */
/* One row, oldest first; on a phone the row scrolls sideways (every champion is also in the table below). */
.champs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(6.5rem,1fr);gap:var(--s3);overflow-x:auto;
 scroll-snap-type:x proximity;padding-bottom:var(--s2);scrollbar-width:thin}
.champ{display:grid;gap:var(--s1);justify-items:center;align-content:start;text-align:center;scroll-snap-align:start}
.champ img{width:88px;height:131px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.champ .y{font:800 1.5rem/1 var(--cond);margin-top:var(--s2)}
.champ .d{font-size:.8125rem;color:var(--ink-3)}
.teams{display:grid;gap:0 var(--s5);grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr))}
.teamcard{display:grid;grid-template-columns:84px 1fr;gap:var(--s4);align-items:start;padding:var(--s4) 0;border-top:1px solid var(--line);
 scroll-margin-top:var(--s4)}
.teamcard img.tcard{width:84px;height:125px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.teamcard h3{font-size:1.375rem}
.teamcard .tn{font-size:.875rem;color:var(--ink-2);margin:2px 0 var(--s3)}
.teamcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);font-size:.875rem}
.teamcard dt{color:var(--ink-3)} .teamcard dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.teamcard .logo{width:28px;height:28px;object-fit:contain;vertical-align:middle;margin-right:6px}
.heat td{text-align:center;font-weight:600;min-width:2.4em}
.heat td.none{color:var(--ink-3)}
.heat td.won{box-shadow:inset 0 0 0 2px var(--gold)}
.chart .legend i.won{background:var(--surface);box-shadow:inset 0 0 0 2px var(--gold)}
.heat td.q0{background:#cde2fb;color:#111110} .chart .legend i.q0{background:#cde2fb}
.heat td.q1{background:#9ec5f4;color:#111110} .chart .legend i.q1{background:#9ec5f4}
.heat td.q2{background:#6da7ec;color:#111110} .chart .legend i.q2{background:#6da7ec}
.heat td.q3{background:#3987e5;color:#111110} .chart .legend i.q3{background:#3987e5}
.heat td.q4{background:#256abf;color:#ffffff} .chart .legend i.q4{background:#256abf}
.heat td.q5{background:#184f95;color:#ffffff} .chart .legend i.q5{background:#184f95}
.heat td.q6{background:#0d366b;color:#ffffff} .chart .legend i.q6{background:#0d366b}
.rec .v{font:700 2rem/1 var(--sans);font-variant-numeric:tabular-nums}
.rec .l{margin-top:var(--s2);font-size:.875rem;color:var(--ink-2)}
.rec .l b{color:var(--ink)}
.issues{display:grid}
.issue-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line);
 text-decoration:none;color:inherit}
.issue-row:first-child{border-top:0;padding-top:0}
.issue-row:hover b{text-decoration:underline;text-underline-offset:3px}
.issue-row b{font:700 1.25rem/1.2 var(--cond)}
.notes p{color:var(--ink-2);font-size:.9375rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.hbars{display:grid;gap:6px}
.hbar{display:grid;grid-template-columns:minmax(4.5em,max-content) 1fr 3.6em;align-items:center;gap:var(--s3);min-height:28px}
.hbar .lab{font:700 .9375rem/1.1 var(--cond);white-space:nowrap}
.hbar .lab small{font:500 .75rem var(--sans);color:var(--ink-3);margin-left:6px}
.hbar .track{position:relative;height:14px}
.hbar .track i{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--d1)}
.hbar .track i.m1s{background:var(--d1-soft)} .hbar .track i.mm{background:var(--d-mute)} .hbar .track i.m2{background:var(--d2)}
.hbar .track i.inner{top:3px;bottom:3px}
.hbar .val{font:700 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.dv{display:grid;gap:6px}
.dv .row{display:grid;grid-template-columns:minmax(4.5em,max-content) 1fr 3.4em;align-items:center;gap:var(--s3);min-height:28px}
.dv .lab{font:700 .9375rem/1.1 var(--cond)}
.dv .track{position:relative;height:14px;background:linear-gradient(var(--line-2),var(--line-2)) center/1px 100% no-repeat}
.dv .track i{position:absolute;top:0;bottom:0}
.dv .track i.pos{left:50%;background:var(--div-pos);border-radius:0 4px 4px 0}
.dv .track i.neg{right:50%;background:var(--div-neg);border-radius:4px 0 0 4px}
.dv .val{font:700 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.dotaxis{position:relative;padding:4px 0 26px}
.dotaxis .row{display:grid;grid-template-columns:minmax(4.5em,max-content) 1fr 3.6em;align-items:center;gap:var(--s3);min-height:30px}
.dotaxis .lab{font:700 .9375rem/1.1 var(--cond)}
.dotaxis .line{position:relative;height:2px;background:var(--line)}
.dotaxis .line i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--d1);box-shadow:0 0 0 2px var(--surface)}
.dotaxis .line i.hi{background:var(--d2)}
.dotaxis .val{font:700 .875rem/1 var(--sans);font-variant-numeric:tabular-nums;text-align:right}
.dotaxis .ticks{display:grid;grid-template-columns:minmax(4.5em,max-content) 1fr 3.6em;gap:var(--s3)}
.dotaxis .ticks .sc{position:relative;height:18px;border-top:1px solid var(--line-2)}
.dotaxis .ticks .sc span{position:absolute;top:4px;transform:translateX(-50%);font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.sdots{display:grid;grid-template-columns:2.6em repeat(var(--n),1fr);gap:0 4px;align-items:stretch}
.sdots .yl{position:relative;height:var(--h);font-size:.75rem;color:var(--ink-3)}
.sdots .yl span{position:absolute;right:6px;transform:translateY(-50%)}
.sdots .col{position:relative;height:var(--h);background:linear-gradient(to bottom,transparent calc(50% - .5px),var(--line) calc(50% - .5px),var(--line) calc(50% + .5px),transparent calc(50% + .5px)) 0 0/100% calc(var(--h)/var(--rows))}
.sdots .col i{position:absolute;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--d1);box-shadow:0 0 0 2px var(--surface)}
.sdots .col i.hi{background:var(--d2)}
.sdots .col b{position:absolute;left:50%;transform:translate(-50%,10px);font:700 .75rem/1 var(--cond);white-space:nowrap}
.sdots .xl{font-size:.75rem;color:var(--ink-3);text-align:center;padding-top:6px}
.sdots .cut{grid-column:2/-1;position:relative}
.spark{display:block;width:100%;height:44px}
.spark .avg{fill:none;stroke:var(--d-mute);stroke-width:1.5}
.spark .me{fill:none;stroke:var(--d1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.spark .end{fill:var(--d1);stroke:var(--surface);stroke-width:2}
.tblmini{width:100%;border-collapse:collapse;font-size:.875rem;margin-top:var(--s2)}
.tblmini th,.tblmini td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.tblmini th:first-child,.tblmini td:first-child{text-align:left}
.tblmini th{font:600 .6875rem/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}