.bhero{padding:40px 0 28px;background:radial-gradient(900px 400px at 80% 0%,rgba(47,179,106,.16),transparent 60%),radial-gradient(900px 400px at 10% 0%,rgba(227,52,47,.16),transparent 60%),linear-gradient(180deg,#121218,var(--bg))}
.bhero h1{max-width:900px}.bhero h1 span{color:var(--amber)}
.dates{color:var(--muted);font-size:14px;margin-bottom:10px}.dates b{color:var(--text);font-weight:600}
.sub{color:#cfccd6;max-width:720px;margin-bottom:20px}
.btns{align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;background:#2a1010;border:1px solid rgba(227,52,47,.5);font-size:14px}.chip b{color:var(--amber)}

/* live matchup */
.live{padding:24px}
.vs-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.side b{display:block;font-size:18px;margin-top:12px}.side b small{color:var(--muted);font-weight:400}
.side .info{font-size:13px;color:var(--muted);margin-bottom:12px}
.vote{display:block;text-align:center}
.vs{font-weight:800;font-size:28px;color:var(--red);letter-spacing:2px}
.seed{position:absolute;left:8px;top:8px;z-index:1;background:rgba(0,0,0,.8);border:1px solid var(--line);font-size:12px;font-weight:700;padding:1px 8px;border-radius:4px}
.thumb i{transform:scale(1.25)}
.bar{display:flex;height:30px;border-radius:999px;overflow:hidden;margin-top:22px;background:#2b2b36;font-size:13px;font-weight:700}
.bar span{display:flex;align-items:center;padding:0 12px}.bar span:first-child{background:linear-gradient(90deg,var(--red),#ff6a3d)}.bar span:last-child{flex:1;justify-content:flex-end}
.barmeta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-top:8px}

/* bracket tree */
.tree{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr repeat(3,1fr);gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 16px}
.rd h4{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px}
.rd .slots{display:flex;flex-direction:column;justify-content:space-around;height:560px}
.mu{background:#0f0f15;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative}
.rd.L .mu::after,.rd.R .mu::after{content:"";position:absolute;top:50%;width:14px;border-top:1px solid #4a2a2a}
.rd.L .mu::after{right:-15px}.rd.R .mu::after{left:-15px}
.tm{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12.5px;line-height:1.2;min-height:34px}
.tm+.tm{border-top:1px solid var(--line)}
.tm em{font-style:normal;color:var(--muted);font-size:11px;width:16px;text-align:right;flex:none}
.tm span{flex:1;min-width:0}.tm span small{color:var(--muted)}
.tm b{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tm.win{background:linear-gradient(90deg,rgba(227,52,47,.18),transparent)}.tm.win b{color:var(--amber)}
.tbd .tm span{color:#5d5a66;font-style:italic}
.center .slots{justify-content:center}
.champ{text-align:center;padding:18px 12px;border:1px solid rgba(255,181,71,.45);border-radius:12px;background:radial-gradient(circle at 50% 20%,rgba(255,181,71,.18),transparent 70%)}
.trophy{font-size:56px;line-height:1;filter:drop-shadow(0 6px 18px rgba(255,181,71,.45))}
.champ small{display:block;color:var(--amber);font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:8px 0 12px}
.champ p{font-size:12px;color:var(--muted);margin-top:10px}

/* mobile tabs (buttons, role=tab) */
.mtabs{display:none}
.mtabs .tabs{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;white-space:nowrap}
.mtab{font:inherit;font-size:13px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);flex:none;cursor:pointer;min-height:40px}
.mtab[aria-selected=true]{background:var(--text);color:#000;border-color:var(--text)}
.pane{display:flex;flex-direction:column;gap:10px}.pane[hidden]{display:none}
.pane .tm{font-size:14px;min-height:42px}.pane-note{font-size:13px;color:var(--muted)}
.pane.static{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* strip */
.strip{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.strip h3{font-size:18px;margin:8px 0 4px}.strip p{color:var(--muted);font-size:14px;margin-bottom:14px}.strip .btn{display:inline-block;font-size:14px;padding:9px 16px}

@media (max-width:1100px){.tree{display:none}.mtabs{display:block}}
@media (max-width:900px){
  .bhero{padding:22px 0 20px}.bhero h1{font-size:30px}
  .vs-grid{grid-template-columns:1fr 1fr;gap:12px;align-items:start}.vs{display:none}.side{display:flex;flex-direction:column;height:100%}.side .vote{margin-top:auto}
  .side b{font-size:15px}.side .info{display:none}.vote{font-size:13px;padding:10px 8px}
  .barmeta span:first-child,.barmeta span:last-child{display:none}.barmeta{justify-content:center}
  .live{padding:14px}.strip{grid-template-columns:1fr}
}
@media (max-width:900px){.vn{display:none}}

/* live voting */
.dates span{white-space:nowrap}.dates span.done{opacity:.55;text-decoration:line-through}.dates span.on b{color:var(--amber)}
.mugrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mucard{padding:16px;scroll-margin-top:90px}.mucard .vs-grid{gap:14px}.mucard .vs{font-size:20px}
.mucard.has-vote{border-color:rgba(255,181,71,.45)}
.mu-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mucard .side b{font-size:15px;margin:8px 0 10px}
.mucard .vote{width:100%;min-height:44px;font:inherit;font-weight:700;cursor:pointer}
.mucard .vote:disabled{cursor:default}.mucard .vote.ghost:disabled{opacity:.45}
.mucard .vote.voted{background:linear-gradient(90deg,#1f8a4c,#2fb36a);border-color:transparent;color:#fff;opacity:1}
.side.mine .thumb{outline:3px solid #2fb36a;outline-offset:2px;border-radius:10px}
.side.won .thumb{outline:3px solid var(--amber);outline-offset:2px;border-radius:10px}
.lead{font-style:normal;font-size:11px;font-weight:700;color:#000;background:var(--amber);border-radius:4px;padding:1px 6px;margin-left:4px;vertical-align:2px}
.mucard .bar{margin-top:14px;height:26px}.bar span:first-child{transition:width .5s ease;min-width:0;white-space:nowrap}
.bar.empty span:first-child{background:#3a3a46}
.mucard .barmeta{justify-content:center}
.bk-msg{font-size:13px;color:#cfccd6;text-align:center;margin-top:6px;min-height:1.3em}.bk-msg:focus{outline:none}.bk-msg.err{color:#ff8a80}
.mu-tag{position:absolute;right:6px;top:-9px;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:#2b2b36;color:var(--muted);border-radius:4px;padding:1px 5px}
.mu-tag.live{background:var(--red);color:#fff}
.mu{overflow:visible}a.mu{display:block;color:inherit;text-decoration:none}a.mu:hover,a.mu:focus-visible{border-color:var(--amber)}
.tm.proj span{color:#8d8a96;font-style:italic}
.champ-name{font-size:20px!important;font-weight:800;color:var(--text)!important}.champ-name span{color:var(--muted);font-weight:400}
.winner{padding:20px}.winner-grid{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr;gap:24px;align-items:center}.winner h3{font-size:28px;margin:6px 0}.winner p{color:#cfccd6;margin-bottom:14px}
@media (max-width:900px){.mugrid{grid-template-columns:1fr}.mucard .side b{font-size:14px}.winner-grid{grid-template-columns:1fr}.mucard .vote{font-size:14px}}
