/* TechFX design system — World Cup 2026 */
:root{
  --violet-950:#07020F; --violet-900:#0D041C; --violet-900b:#1C073D; --violet-800:#380E7A;
  --violet-700:#461199; --violet-50:#F4EBFF;
  --mint:#12E999; --mint-400:#41EDAD; --mint-200:#B8F8E0; --mint-700:#0B8C5C;
  --bg:#0D041C;
  --bg-grad:radial-gradient(120% 80% at 50% 0%,#1C073D 0%,#0D041C 60%,#07020F 100%);
  --line:rgba(244,235,255,0.12); --line2:rgba(181,156,222,0.22);
  --txt:#fff; --mut:rgba(255,255,255,.72); --dim:rgba(255,255,255,.48);
  --r:20px; --pill:999px;
  --ff:"Work Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow-violet:0 24px 48px -12px rgba(70,17,153,.45);
  --shadow-mint:0 0 0 6px rgba(18,233,153,.14),0 12px 32px rgba(18,233,153,.18);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff);background:var(--bg);color:var(--txt);font-weight:400;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}

.mark{display:inline-block;aspect-ratio:364/262;background:url("/assets/logo-mint-mark-a508a539.png") center/contain no-repeat}
.wordmark{display:inline-block;aspect-ratio:841/143;background:url("/assets/logo-wordmark-white-75f8e837.png") left center/contain no-repeat}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff);font-weight:600;font-size:14px;
  border-radius:var(--pill);padding:13px 22px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  white-space:nowrap;transition:background .14s var(--ease),transform .14s var(--ease),box-shadow .14s var(--ease)}
.btn i,.btn svg{width:17px;height:17px;flex:none}
.btn-mint{background:var(--mint);color:var(--violet-950)}
.btn-mint:hover{box-shadow:var(--shadow-mint);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-light{background:#fff;color:var(--violet-900b)}
.btn-light:hover{background:var(--violet-50)}
.btn.big{font-size:15px;padding:15px 24px}

.topbar{border-bottom:1px solid var(--line);background:rgba(13,4,28,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.topbar .wrap{display:flex;align-items:center;gap:12px;padding:12px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px}
.brand .wordmark{height:17px;width:100px}
.seg{display:inline-flex;gap:3px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--pill);padding:3px}
.seg.lang{position:relative;gap:2px}
.topbar .topsub{margin-left:auto}
.seg a{position:relative;z-index:1;background:transparent;border:0;color:var(--mut);font-weight:600;font-size:12px;letter-spacing:.02em;
  padding:6px 12px;border-radius:var(--pill);cursor:pointer;transition:color .2s;text-decoration:none}
.seg a.on{color:#fff}
/* Flag picker: circular flags, dimmed until active; a violet "halo" thumb slides behind. */
.seg.lang a{display:flex;align-items:center;justify-content:center;padding:5px;border-radius:50%;opacity:.5;transition:opacity .2s}
.seg.lang a.on{opacity:1}
.seg.lang a:hover{opacity:.85}
.seg.lang .flag{width:21px;height:21px}
.seg.lang .thumb{position:absolute;left:0;top:0;width:0;height:0;z-index:0;background:var(--violet-700);
  border-radius:50%;transition:transform .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1),height .26s cubic-bezier(.4,0,.2,1)}
.topbar .btn{padding:9px 16px;font-size:13px}

header{position:relative;overflow:hidden;background:var(--bg-grad);padding:64px 0 48px}
header::before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:var(--mint);
  filter:blur(170px);opacity:.10;top:-160px;left:-90px;pointer-events:none}
header>*{position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 11px;border-radius:var(--pill);
  background:rgba(229,215,251,.08);border:1px solid var(--line2);font-size:13px;font-weight:500;color:#fff;margin-bottom:18px}
.hostflags{display:inline-flex;gap:5px}
h1{font-family:var(--disp);font-weight:500;font-size:clamp(38px,7.6vw,72px);line-height:1.05;
  letter-spacing:-.02em;margin:0 0 18px;color:#fff;text-wrap:balance}
h1 .g{color:var(--mint)}
.sub{color:var(--mut);font-size:clamp(15px,2.2vw,18px);line-height:1.6;max-width:600px;font-weight:400}
.sub b{color:#fff;font-weight:600}
.feats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.feat{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--mut);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--pill);padding:9px 15px}
.feat i,.feat svg{width:16px;height:16px;flex:none;color:var(--mint)}
.heroCTA{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

.next{margin-top:30px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;box-shadow:var(--shadow-violet);overflow:hidden}
.next .lbl{font-size:12px;letter-spacing:.04em;color:var(--mint);font-weight:600;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,233,153,.5)}70%{box-shadow:0 0 0 10px rgba(18,233,153,0)}100%{box-shadow:0 0 0 0 rgba(18,233,153,0)}}
.next .teams{font-family:var(--disp);font-weight:500;font-size:clamp(19px,3.2vw,26px);display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;color:#fff}
.next .teams .vsep{color:var(--dim);font-size:.7em}
.next .meta{color:var(--mut);font-size:14px;font-weight:400;margin-top:7px}
.cd{margin-left:auto;display:flex;gap:14px;text-align:center}
.cd b{font-family:var(--disp);font-weight:500;font-size:30px;display:block;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.cd span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

.tzbar{position:sticky;top:0;z-index:40;background:rgba(13,4,28,.8);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:12px 0;margin-top:36px}
.tzrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fld{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:var(--pill);padding:8px 14px;font-size:13px;color:var(--mut);font-weight:500}
.fld i,.fld svg{width:15px;height:15px;flex:none;opacity:.85}
/* The search is the flexible filler so the whole toolbar collapses onto one row. */
.fld.search{flex:1 1 120px;min-width:0}
select,input[type=search]{background:transparent;border:0;color:var(--txt);font:inherit;font-weight:500;
  font-size:14px;outline:none;cursor:pointer;max-width:230px}
input[type=search]{cursor:text;min-width:0;max-width:none;width:100%}
select option{background:var(--violet-900b);color:#fff}
#jump{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff);font-weight:500;font-size:13px;
  color:var(--mut);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--pill);
  padding:9px 15px;cursor:pointer;transition:.15s}
#jump:hover{color:#fff;border-color:var(--line2)}
#jump i,#jump svg{width:15px;height:15px;flex:none;color:var(--mint)}
.count{color:var(--dim);font-size:13px;font-weight:500;white-space:nowrap}
/* Icon-only toolbar buttons (label kept for a11y/tooltip) keep the crowded schedule on one row. */
#jump.iconly span,#showpast.iconly span{display:none}
#jump.iconly,#showpast.iconly{padding:9px 12px}

main{padding:26px 0 56px}
.day{font-family:var(--disp);font-weight:500;font-size:16px;color:#fff;margin:32px 0 14px;display:flex;
  align-items:center;gap:12px;text-transform:capitalize;letter-spacing:-.01em}
.day::after{content:"";flex:1;height:1px;background:var(--line)}
.day .n{font-family:var(--ff);color:var(--dim);font-weight:500;font-size:12px;text-transform:none}
.card{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin-bottom:10px;
  transition:background .2s,transform .2s var(--ease),border-color .2s}
.card:hover{background:rgba(255,255,255,.06);transform:translateY(-2px);border-color:var(--line2)}
.tcol{text-align:center}
.tcol .t{font-family:var(--disp);font-weight:500;font-size:23px;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
.tcol .ampm{font-size:11px;color:var(--dim);font-weight:500;margin-top:2px}
.tcol .lt{font-size:10px;color:var(--dim);margin-top:6px;font-variant-numeric:tabular-nums}
.tcol .livew{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-weight:600;font-size:12px}
.tcol .livew .dot{width:7px;height:7px}
.tcol .score{font-family:var(--disp);font-weight:600;font-size:24px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.tcol .score span{color:var(--dim);margin:0 3px}
.tcol .ftlbl{font-size:11px;color:var(--dim);font-weight:600;margin-top:3px;letter-spacing:.04em}
.match{min-width:0}
.team{display:flex;align-items:center;gap:11px;font-weight:500;font-size:16px;padding:3px 0;color:#fff}
.team.tbd{color:var(--mut)}
.team.win span{font-weight:700;color:#fff}
.tcell{min-width:0}
/* Possible opponents: candidate flags fanned into an overlapping stack under an unresolved
   slot. Hovering a flag pops it forward, parts its neighbours, and reveals a tooltip. */
.poss{display:flex;align-items:center;margin-top:7px;padding-top:3px}
.poss-chip{position:relative;display:inline-flex;margin-left:-6px;outline:none}
.poss-chip:first-child{margin-left:0}
.flag.mini{width:17px;height:17px;opacity:.82;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 2px var(--bg);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),opacity .2s var(--ease)}
.poss-chip:hover,.poss-chip:focus-visible{z-index:6}
.poss-chip:hover .flag.mini,.poss-chip:focus-visible .flag.mini{transform:translateY(-6px) scale(1.7);opacity:1}
/* neighbours slide aside so the hovered flag clears them */
.poss-chip:hover + .poss-chip .flag.mini,.poss-chip:focus-visible + .poss-chip .flag.mini{transform:translateX(9px)}
.poss-chip:has(+ .poss-chip:hover) .flag.mini,.poss-chip:has(+ .poss-chip:focus-visible) .flag.mini{transform:translateX(-9px)}
/* animated tooltip (lives on the chip, so the flag's scale doesn't distort it) */
.poss-chip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,6px) scale(.9);transform-origin:bottom center;
  background:var(--violet-900b);color:#fff;border:1px solid var(--line2);
  padding:4px 9px;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap;
  opacity:0;pointer-events:none;z-index:30;box-shadow:var(--shadow-violet);
  transition:opacity .2s var(--ease),transform .2s cubic-bezier(.34,1.56,.64,1)}
.poss-chip::before{content:"";position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--violet-900b);opacity:0;z-index:30;transition:opacity .2s var(--ease)}
.poss-chip:hover::after,.poss-chip:focus-visible::after{opacity:1;transform:translate(-50%,0) scale(1)}
.poss-chip:hover::before,.poss-chip:focus-visible::before{opacity:1}
.poss-more{font-size:10px;font-weight:600;color:var(--mut);margin-left:6px;align-self:center;letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.flag.mini,.poss-chip::after,.poss-chip::before{transition:none}}
.flag{width:24px;height:24px;border-radius:50%;flex:none;background:rgba(255,255,255,.06) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.flag.sm{width:18px;height:18px}
.flag.tbd{background:rgba(255,255,255,.05)}
.vs{font-size:11px;color:var(--dim);font-weight:600;margin:2px 0 2px 35px;letter-spacing:.08em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:4px 10px;
  border-radius:var(--pill);background:rgba(255,255,255,.05);color:var(--mut);border:1px solid var(--line)}
.tag i,.tag svg{width:12px;height:12px;flex:none}
.tag.stage{background:rgba(213,195,241,.12);color:#E5D7FB;border-color:rgba(181,156,222,.25)}
.tag.grp{background:rgba(18,233,153,.13);color:var(--mint-200);border-color:rgba(18,233,153,.28)}
.card.past{opacity:.4}
.card.islive{border-color:rgba(18,233,153,.55);box-shadow:0 0 0 1px rgba(18,233,153,.4)}
.card.nextmatch{border-color:rgba(18,233,153,.4);box-shadow:0 0 0 1px rgba(18,233,153,.25)}
.rcol{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.add{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--mut);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--pill);padding:8px 13px;
  cursor:pointer;white-space:nowrap;transition:.15s;text-decoration:none}
.add:hover{color:#fff;border-color:var(--line2)}
.add i,.add svg{width:13px;height:13px;flex:none;color:var(--mint)}
.no{text-align:center;color:var(--dim);padding:50px 0;font-weight:500}

.subscribe{margin:54px 0 12px;background:var(--violet-900b);border-radius:28px;padding:48px 40px;position:relative;overflow:hidden}
.subscribe::before,.subscribe::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;filter:blur(120px);pointer-events:none}
.subscribe::before{background:var(--mint);opacity:.30;left:-50px;top:-60px}
.subscribe::after{background:var(--violet-700);opacity:.80;right:-50px;bottom:-70px}
.subscribe>*{position:relative}
.subscribe h2{font-family:var(--disp);font-weight:500;font-size:clamp(24px,4vw,36px);line-height:1.1;
  letter-spacing:-.02em;margin-bottom:10px;color:#fff;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.subscribe h2 i,.subscribe h2 svg{width:.9em;height:.9em;flex:none;color:var(--mint)}
.subscribe p{color:var(--mut);max-width:560px;font-weight:400;margin-bottom:22px;line-height:1.6}
.btns{display:flex;flex-wrap:wrap;gap:11px}
.hint{margin-top:18px;font-size:12.5px;color:var(--dim);line-height:1.7}
.hint b{color:var(--mut)}
.hint code{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  color:var(--mut);font-family:var(--disp);font-size:12px}

footer{padding:44px 0 60px;border-top:1px solid var(--line);margin-top:44px;color:var(--dim);font-size:13px;line-height:1.7}
.fbrand{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.fbrand .wordmark{height:15px;width:90px}
footer p{max-width:700px;margin:0}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);background:var(--violet-900b);
  color:#fff;font-weight:500;font-size:14px;padding:14px 22px;border-radius:var(--pill);box-shadow:var(--shadow-violet);
  display:flex;align-items:center;gap:10px;opacity:0;transition:.3s var(--ease);z-index:99}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast i,.toast svg{width:16px;height:16px;flex:none;color:var(--mint)}

/* live hero, past-day collapse, show-past toggle */
.next-main{min-width:0}
.cd .herobox{display:flex;flex-direction:column;align-items:center;gap:3px}
.next .hero-score{font-family:var(--disp);font-weight:600;font-size:30px;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.next .hero-score span{color:var(--dim);margin:0 4px}
.next .hero-live{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--mint);letter-spacing:.02em}
.next .ftlbl{font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.dayblock.pastday{opacity:.5}
#showpast{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff);font-weight:500;font-size:13px;
  color:var(--mut);background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--pill);
  padding:9px 15px;cursor:pointer;transition:.15s}
#showpast:hover{color:#fff;border-color:var(--line2)}
#showpast i,#showpast svg{width:15px;height:15px;flex:none;color:var(--mint)}
#showpast.on{color:#fff;background:rgba(18,233,153,.12);border-color:rgba(18,233,153,.3)}

@media(max-width:640px){
  /* Stack the card: a compact top strip (time · #), then teams, tags, buttons. */
  .card{display:block;padding:15px 17px}
  .tcol{display:flex;align-items:center;gap:8px;text-align:left;margin-bottom:13px}
  .tcol .t{font-size:21px}
  .tcol .ampm{margin-top:0}
  .tcol .score{font-size:21px}
  .tcol .ftlbl{margin-top:0}
  .tcol .lt{margin-top:0;margin-left:auto}
  .team{font-size:16px}
  .vs{margin:1px 0 1px 35px}
  .rcol{flex-direction:row;justify-content:flex-start;gap:8px;margin-top:13px}
  .next{gap:14px}
  .cd{margin-left:0;width:100%;justify-content:space-between}
  .subscribe{padding:36px 24px}
}

/* ---------- Knockout bracket (/knockouts) ---------- */
/* View switch sits in the toolbar next to the filters; hidden on phones (which default to the
   schedule and don't show the tall bracket). */
.viewnav{flex:none}
@media(max-width:640px){.viewnav{display:none}}
.rtabs{display:none;gap:6px;flex-wrap:wrap;margin-left:auto}
.rtab{font-family:var(--ff);font-weight:500;font-size:13px;color:var(--mut);background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:var(--pill);padding:8px 14px;cursor:pointer;transition:.15s}
.rtab:hover{color:#fff;border-color:var(--line2)}
.rtab.on{color:var(--violet-950);background:var(--mint);border-color:var(--mint)}

.brkmain{padding:24px 0 64px}
.brkwrap{overflow-x:auto;overflow-y:hidden;padding-bottom:14px}
.bracket{position:relative;display:flex;gap:24px;min-width:max-content;padding:6px 0}
.blines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.blines path{fill:none;stroke:var(--line2);stroke-width:1.5;transition:stroke .15s,stroke-width .15s}
.blines path.hot{stroke:#9b7cff;stroke-width:2.5}
.bcol{position:relative;z-index:1;display:flex;flex-direction:column;flex:0 0 186px}
.brd-h{font-family:var(--disp);font-weight:500;font-size:12px;color:var(--mint);text-align:center;
  margin-bottom:12px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.bround{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:10px}

.bmatch{position:relative;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:9px 11px;
  transition:background .2s,border-color .2s}
/* Hover a card → it glows violet (distinct from the mint of today/next). Hovering a feeder
   slot also adds .trace to its source match (+ .hot to the connector), so the path lights up. */
.bmatch:hover,.bmatch.trace{background:rgba(255,255,255,.06);border-color:rgba(150,116,255,.65);
  box-shadow:0 0 0 1px rgba(150,116,255,.5),0 12px 34px -8px rgba(150,116,255,.45)}
.bmatch.st-next:hover,.bmatch.st-live:hover,.bmatch.st-next.trace,.bmatch.st-live.trace{animation:none}
.bmatch.islive{border-color:rgba(18,233,153,.55);box-shadow:0 0 0 1px rgba(18,233,153,.4)}
/* Match states (priority live > next > today) so the meaningful games are findable in a tall
   bracket: live & next glow (live pulses faster), today gets a quiet mint tint. */
@keyframes nextglow{
  0%,100%{box-shadow:0 0 0 1px rgba(18,233,153,.32),0 8px 26px -8px rgba(18,233,153,.28)}
  50%{box-shadow:0 0 0 1px rgba(18,233,153,.6),0 12px 36px -6px rgba(18,233,153,.5)}}
@keyframes blink{50%{opacity:.25}}
.bmatch.st-next{border-color:rgba(18,233,153,.6);background:rgba(18,233,153,.06);animation:nextglow 2.6s var(--ease) infinite}
.bmatch.st-live{border-color:rgba(18,233,153,.65);background:rgba(18,233,153,.07);animation:nextglow 1.5s var(--ease) infinite}
.bmatch.st-today{border-color:rgba(18,233,153,.3);background:rgba(18,233,153,.035)}
.bm-badge{position:absolute;top:-9px;left:12px;z-index:3;font-family:var(--ff);font-weight:700;font-size:9px;
  letter-spacing:.09em;text-transform:uppercase;border-radius:var(--pill);padding:3px 8px}
.bm-badge.st-next{color:var(--violet-950);background:var(--mint);box-shadow:0 4px 12px rgba(18,233,153,.4)}
.bm-badge.st-live{color:var(--violet-950);background:var(--mint);box-shadow:0 4px 12px rgba(18,233,153,.5);
  display:inline-flex;align-items:center;gap:5px}
.bm-badge.st-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet-950);animation:blink 1.4s infinite}
.bm-badge.st-today{color:var(--mint-200);background:#123d2e;border:1px solid #20694b}
@media (prefers-reduced-motion:reduce){
  .bmatch.st-next,.bmatch.st-live{animation:none;box-shadow:var(--shadow-mint)}
  .bm-badge.st-live::before{animation:none}}
.bm-side{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#fff;padding:3px 0;min-width:0}
/* The interactive zone hugs the flag + label, so hovering the empty right of the row does nothing. */
.bm-who{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.bm-who.has-poss{outline:none;cursor:pointer}
/* Hint that hovering reveals the candidates, without showing 30 flag-fans at once. */
.bm-who.has-poss .bm-team{border-bottom:1px dotted #5d5179;padding-bottom:1px}
.bm-who.has-poss:hover .bm-team,.bm-who.has-poss:focus-within .bm-team{border-bottom-color:var(--mint)}
/* A not-yet-decided slot reads as an empty placeholder, not dimmed/disabled content — so a
   half-resolved match (one real team, one slot) doesn't look broken, especially when glowing.
   Solid colours (no alpha) so the text never looks translucent over the card/glow. */
.bm-side.tbd{color:#c7c0d6}
.bm-side .flag.tbd{background:#241d36;box-shadow:inset 0 0 0 1.5px #4d4068}
.bm-side.win{color:#fff}
.bm-side.win .bm-team{font-weight:700}
/* The losing side of a finished match is muted with a solid colour, never opacity (which
   reads as a translucent/broken card). The winner stays white + mint score. */
.bmatch.done .bm-side:not(.win),.bmatch.done .bm-side:not(.win) .bm-sc{color:#8a8399}
.bm-cell{min-width:0;display:flex;flex-direction:column}
.bm-team{align-self:flex-start;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Candidate flags live in a popover that's hidden until the slot is hovered/focused, so the
   default bracket stays clean. Absolutely positioned → revealing it never reflows the tree. */
.poss-pop{position:absolute;left:0;top:calc(100% - 1px);z-index:9;padding:7px 9px;
  background:var(--violet-900b);border:1px solid var(--line2);border-radius:11px;box-shadow:var(--shadow-violet);
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
/* Top slot opens upward so it doesn't cover the bottom slot; bottom slot opens downward. */
.bm-side.home .poss-pop{top:auto;bottom:calc(100% - 1px);transform:translateY(5px)}
.bm-who:hover>.bm-cell>.poss-pop,.bm-who:focus-within>.bm-cell>.poss-pop{opacity:1;visibility:visible;transform:translateY(0)}
.poss-pop .poss{margin:0;padding:0}
.bm-sc{font-family:var(--disp);font-weight:600;font-variant-numeric:tabular-nums;color:#fff;font-size:15px;margin-left:auto}
.bm-side.win .bm-sc{color:var(--mint)}
.bm-foot{display:flex;align-items:center;justify-content:space-between;margin-top:7px;padding-top:6px;border-top:1px solid var(--line)}
.bm-no{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}
.bm-when{font-size:11px;color:var(--mut);font-weight:500}
.bm-live{display:inline-flex;align-items:center;gap:5px;color:var(--mint);font-weight:600;font-size:11px}
.bm-live .dot{width:6px;height:6px}
.bm-ft{font-size:10px;color:var(--dim);font-weight:600;letter-spacing:.04em}

.bthird{max-width:240px;margin:30px auto 0;width:100%}
.bthird .brd-h{color:var(--mut)}
.bthird .bround{display:block}

@media(max-width:860px){
  .rtabs{display:flex}
  .blines{display:none}
  .brkwrap{overflow-x:visible;padding-bottom:0}
  .bracket{display:block;min-width:0}
  .bcol{display:none;flex:none}
  .bcol.active{display:block}
  .bround{display:block}
  .bmatch{margin-bottom:10px}
  .brd-h{text-align:left;font-size:14px;margin-bottom:14px}
  .bthird{max-width:none;margin:0}
}

/* Language switch: fade the content out the instant the picker is tapped (masking the
   fetch), morph the new locale in while dimmed, then fade back. Topbar stays crisp so the
   sliding thumb reads as the anchor of the interaction. */
#content{transition:opacity .16s ease-out,transform .16s ease-out}
.lang-switching #content{opacity:.32;transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){
  #content,.seg.lang .thumb{transition:none}
  .lang-switching #content{opacity:1;transform:none}
}