/* Layout: a sticky count bar on top, then the interactive Swiss bracket as the hero, standings below. Dark by default. */
:root{
  --paper:#111419; --card:#191d24; --ink:#e8ebef; --muted:#9aa4b1; --faint:#3a414c; --line:#272d36;
  --accent:#7fa8e0; --accent-soft:#1d2a3d;
  --win:#5cc27f; --win-soft:#173322; --loss:#ee7a72; --loss-soft:#3a1d1b; --tie:#f0aa4a;
  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
/* Dark is the default; the page's own toggle switches to light. */
:root[data-swiss="light"]{
  --paper:#f6f7f9; --card:#ffffff; --ink:#15181d; --muted:#5d6672; --faint:#c9cfd7; --line:#e1e5ea;
  --accent:#2b5c9e; --accent-soft:#e3ecf8;
  --win:#2e8b4e; --win-soft:#dff1e5; --loss:#c8423b; --loss-soft:#f8e1df; --tie:#d98a1c;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16.5px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 64px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.wrap{max-width:1180px;margin:0 auto}
h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,5.2vw,44px);line-height:1.05;letter-spacing:-.025em;margin:36px 0 12px;text-wrap:balance}
.lede{max-width:640px;color:var(--muted);margin:0 0 20px}
.lede b{color:var(--ink);font-weight:600}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);padding-block:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.countrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.label{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#count{font-family:var(--mono);font-weight:700;font-size:clamp(15px,3.3vw,24px);font-variant-numeric:tabular-nums;word-break:break-all;transition:opacity .2s}
#count.busy{opacity:.35}
#approx{font-family:var(--mono);font-size:12px;color:var(--muted)}
.meter{position:relative;height:6px;background:var(--line);border-radius:3px;margin-top:8px;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:3px;transition:width .35s ease}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
button{font:700 12px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);background:var(--card);border:1px solid var(--faint);border-radius:6px;padding:10px 12px;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
button:disabled{opacity:.4;cursor:default}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.note{font-size:15px;color:var(--muted);margin:6px 0 0}
.round{margin-top:34px}
.round h2{font-family:var(--display);font-weight:700;font-size:25px;line-height:1.15;letter-spacing:-.015em;margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.round h2 small{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.tag{font-family:var(--display);font-weight:700;font-size:13px;padding:2px 6px;border-radius:4px;background:var(--card);border:1px solid var(--line)}
.tag.slot{border-style:dashed;color:var(--faint);font-weight:500;min-width:32px;text-align:center}
.done{margin-top:28px;font-size:18px}
@media (prefers-reduced-motion:reduce){.meter i,#count{transition:none}}

.live{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:14px;color:var(--muted)}
.live .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);margin-right:6px;vertical-align:1px}
.live.on .dot{background:var(--win)}
.live.err .dot{background:var(--loss)}
.live a{color:var(--accent)}
.live label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
.live input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.backlink{display:inline-block;margin-top:24px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.backlink:hover{color:var(--accent)}
.foot{margin-top:40px;font-size:14px;color:var(--muted);max-width:640px}
.foot a{color:var(--accent)}

.hero{margin-top:18px}
.next{margin:0 0 4px;font-size:16px;max-width:760px}
.next b{font-weight:700}
.bracket-scroll{overflow-x:auto;margin-top:10px;padding-bottom:6px}
.bracket{position:relative;min-width:860px}
.bheads,.bgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:28px}
.bheads{margin-bottom:6px}
.bheads span{font-family:var(--mono);font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bheads span.now{color:var(--accent)}
.bcol{display:flex;flex-direction:column;justify-content:space-around;gap:16px;position:relative;z-index:1;min-width:0}
.blines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.bpool{display:block;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:8px 8px 9px;color:var(--ink);text-decoration:none}
.bpool:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bpool.now{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.bpool h5,.bh{margin:0 0 3px;display:flex;justify-content:space-between;gap:2px;font-family:var(--mono);font-weight:700;font-size:12px;white-space:nowrap;color:var(--ink);text-decoration:none}
.bh em{font-style:normal;font-weight:400;color:var(--muted)}
.bpool h5 em{font-style:normal;font-weight:400;color:var(--muted)}
.bpool.end{background:var(--paper)}
.bpool.adv{border-top:3px solid var(--win)}
.bpool.out{border-top:3px solid var(--loss)}
.bx{position:relative;display:grid;margin-top:9px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--card)}
.bx span,.bx button{display:block;width:100%;box-sizing:border-box;font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.75;letter-spacing:0;text-transform:none;text-align:left;color:var(--ink);background:none;border:0;border-radius:0;padding:0 8px;white-space:nowrap;overflow:hidden}
.bx > span:not(.blk),.bx > button:not(.ux){display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.bx .nm{overflow:hidden;text-overflow:clip}
.bx .wp{flex:none;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--muted)}
.bx .l .wp{text-decoration:none}
.bx.hasicon > span:not(.blk),.bx.hasicon > button:not(.ux){padding-right:26px}
.bx button{cursor:pointer}
.bx button:hover:not(.w){background:var(--accent-soft);color:var(--ink)}
.bx.real button{cursor:default}
.bx > * + *{border-top:1px solid var(--line)!important}
.bx .w{background:var(--win-soft);color:var(--ink)}
.bx .l{color:var(--muted);text-decoration:line-through;opacity:.4}
.bx.tbd span{color:var(--faint);font-weight:500}
.bslots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:5px}
.bslot{display:block;width:100%;box-sizing:border-box;font-family:var(--display);font-weight:700;font-size:13.5px;line-height:1.8;letter-spacing:0;text-transform:none;text-align:center;color:var(--ink);border:1px solid var(--line);border-radius:3px;background:var(--card);padding:0;overflow:hidden;white-space:nowrap}
button.bslot{cursor:pointer}
button.bslot:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}
.bslot.sel{border-color:var(--accent);background:var(--accent-soft)}
.bslot.elig{border-style:dashed;border-color:var(--accent)}
.bslot.dim{opacity:.3}
.bslot.q{border-style:dashed;color:var(--faint);font-weight:500}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.bslot small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--accent)}
.bx .ux,.bx .blk{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:auto;padding:2px 5px;border:0;background:none;color:var(--muted);font:400 15px/1 var(--display);text-transform:none;letter-spacing:0;cursor:pointer;border-top:0!important}
.bx .blk{color:var(--accent);cursor:default;display:flex}
.bx .ux:hover{color:var(--loss)}
.rg{font-style:normal;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:0;text-transform:uppercase;color:var(--muted);margin-left:4px}
.bx .l .rg,.bx .l .wp{display:inline-block}
.bpool.end .bslots{grid-template-columns:minmax(0,1fr)}
.mini{position:fixed;inset:0 0 auto;z-index:6;background:var(--paper);font-family:var(--mono);font-weight:700;font-size:12px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);transform:translateY(-100%);visibility:hidden;transition:transform .2s ease,visibility .2s}
.mini.show{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.mini{transition:none}}
@media (max-width:700px){
  .bracket{min-width:0}
  .bracket-scroll{overflow:visible}
  .bheads{display:none}
  .bgrid{display:flex;flex-direction:column;gap:30px}
  .bcol{display:grid;gap:8px;align-items:start}
  .bcol::before{content:attr(data-head);grid-column:1/-1;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .bcol.now::before{color:var(--accent)}
  .bcol.c1{grid-template-columns:minmax(0,1fr);row-gap:26px}
  .bcol.c1 [data-rec="pi"]{justify-self:center;width:50%}
  .bcol.c2,.bcol.c6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcol.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bcol.c4{grid-template-columns:.6fr 1.2fr 1.2fr .6fr}
  .bcol.c5{grid-template-columns:.8fr 1.25fr .8fr}
  .bcol.c1 [data-rec="0-0"]{display:grid;column-gap:8px;align-content:start;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcol.c1 [data-rec="0-0"] > .bh,.bcol.c1 [data-rec="0-0"] > .bslots{grid-column:1/-1}
  .bcol.c1 [data-rec="0-0"] .bslots{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bpool{padding:6px 5px 7px}
  .bpool h5,.bh{font-size:10.5px}
  .bx span,.bx button{font-size:13px;line-height:1.7;padding:0 5px}
  .bx > span:not(.blk),.bx > button:not(.ux){gap:3px}
  .bx .wp{font-size:10px}
  .bx.hasicon > span:not(.blk),.bx.hasicon > button:not(.ux){padding-right:16px}
  .bx .ux,.bx .blk{right:0;padding:2px 3px}
  .bslot{font-size:12px}
  .rg{font-size:8.5px;margin-left:3px}
  .bcol.c4 .bpool.end .bslot{display:flex;flex-direction:column;align-items:center;line-height:1.35;padding:2px 0}
  .bcol.c4 .bpool.end .rg{margin-left:0}
  .bcol.c4 .bpool.end .bslots,.bcol.c5 .bpool.end .bslots{grid-template-columns:minmax(0,1fr)}
  .bar{position:static}
  .hero{margin-top:10px}
}
.theme-btn{margin-left:auto}

/* regions */
.hh-wrap{overflow-x:auto;max-width:100%;margin-top:12px}
.hh{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums}
.hh th{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
.hh thead th{padding:0 0 4px;text-align:center}
.hh tbody th{text-align:right;padding-right:8px;color:var(--ink)}
.hh td{width:64px;min-width:52px;height:40px;text-align:center;border-radius:4px;border:1px solid var(--line);cursor:pointer}
.hh td b{font-family:var(--mono);font-size:13px;font-weight:700}
.hh td:hover,.hh td.on{outline:2px solid var(--accent);outline-offset:-1px}
.hh td.pin{outline:2px solid var(--accent);outline-offset:1px}
.hh td.self{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 7px);border-color:transparent;cursor:default}
.hh td.none{border-style:dashed;cursor:default}
.hh th.tot{padding-left:10px}
.hh td.tot{border:0;border-left:2px solid var(--faint);border-radius:0;padding-left:10px;line-height:1.15}
.hh td.tot b{display:block}
.hh td.tot span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.rgcap{margin:12px 0 0;font-size:15px;min-height:1.55em;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.rgcap .hint{color:var(--muted)}
.rgcap .m{white-space:nowrap}
.rgcap .m em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:3px}
.rgcap .m.pick{color:var(--muted)}
@media (max-width:700px){
  .hh td{width:auto;min-width:44px;height:36px}
  .hh td b{font-size:12px}
}

/* chances to advance */
.odds{margin-top:12px;max-width:820px;transition:opacity .2s}
.odds.stale{opacity:.55}
.oh,.or{display:grid;grid-template-columns:96px minmax(80px,1fr) 64px;align-items:center;gap:10px;padding:5px 6px}
.oh{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.oh .adv,.or .adv{text-align:right;font-variant-numeric:tabular-nums}
.or{border-top:1px solid var(--line);font-size:14px}
.or b{font-weight:700;white-space:nowrap}
.or.gone{opacity:.4}
.or.gone b{text-decoration:line-through}
.obar{display:flex;height:12px;border-radius:2px;overflow:hidden;background:var(--line)}
.obar i{display:block;height:100%}
.obar .s0{background:var(--win)}
.obar .s1{background:color-mix(in srgb,var(--win) 70%,var(--line))}
.obar .s2{background:color-mix(in srgb,var(--win) 42%,var(--line))}
.obar .s3{background:color-mix(in srgb,var(--loss) 42%,var(--line))}
.obar .s4{background:color-mix(in srgb,var(--loss) 70%,var(--line))}
.obar .s5,.obar .s6{background:var(--loss)}
.or .adv{font-family:var(--mono);font-weight:700;font-size:13.5px}
@media (max-width:700px){
  .oh,.or{grid-template-columns:72px minmax(60px,1fr) 52px;gap:8px}
}
@media (prefers-reduced-motion:reduce){.odds{transition:none}}
.obar i{cursor:default}
.obar i.hot{filter:brightness(1.25);box-shadow:inset 0 0 0 1px var(--ink)}
.otip{position:fixed;z-index:20;pointer-events:none;background:var(--card);border:1px solid var(--faint);border-radius:6px;padding:5px 8px;font-size:13.5px;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.otip b{font-family:var(--mono);font-weight:700}

/* Knockout stage: the quarterfinal draw rules, then a bracket you draw and play yourself. */
#knockout .controls{margin-top:14px}
#knockout .note{margin-top:10px}
.kodds{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-top:14px}
.korow{border-top:3px solid var(--win);padding-top:6px;min-width:0}
.korow h4{margin:0 0 6px;font-family:var(--display);font-weight:700;font-size:15px;display:flex;justify-content:space-between}
.korow h4 em{font-style:normal;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--muted)}
.kot{display:flex;flex-wrap:wrap;gap:4px}
.koo{display:flex;flex-direction:column;gap:1px;margin-top:7px;font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--muted)}
.koo b{font-weight:700;color:var(--accent)}
button.tag{cursor:pointer;color:var(--ink)}
button.tag:hover:not(:disabled){border-color:var(--accent)}
.tag.sel{border-color:var(--accent);background:var(--accent-soft)}
.tag.elig{border-style:dashed;border-color:var(--accent)}
.tag.dim{opacity:.3}
.tag.drawn{opacity:.45}
#kbracket{min-width:620px}
#kbracket .bheads,#kbracket .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
#kbracket .bpool.tbd .bx span{color:var(--faint);font-weight:500}
@media (max-width:700px){
  #kbracket{min-width:0}
  #kbracket .bcol.kc1,#kbracket .bcol.kc2{grid-template-columns:repeat(2,minmax(0,1fr))}
  #kbracket .bcol.kc3{grid-template-columns:minmax(0,1fr)}
}
.bx .sc{font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--ink)}
/* a beaten team's game count still matters, so don't fade it as hard as a spent win chance */
.bx .l:has(.sc){opacity:.7}
.bx .l .sc{color:var(--muted)}

/* Hovering a team fades the rest of the Swiss bracket back and traces its path through it. */
#bracket.tracing .bx,#bracket.tracing .bslot{opacity:.62}
#bracket.tracing .bx:has(.on),#bracket.tracing .bslot.on{opacity:1}
#bracket .bx>.on .nm,#bracket .bslot.on{color:var(--accent)}
#bracket .bslot.on{border-color:var(--accent)}
.gprpick select{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:3px;padding:2px 4px;cursor:pointer}
.gprpick select:hover{border-color:var(--accent)}