/* HCC Tournament · styles
   Dark broadcast look: tokens in :root, then layout, components, views. */

html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: broadcast-style dark arena. Sticky top bar, hero "scoreboard" band, then content panels cut with angled corners. Single dark look by choice. */
:root{
  color-scheme: dark;
  --bg:#090c1a; --bg2:#0f1326; --panel:#141a32; --panel2:#1a2140; --line:#272e52; --line2:#353e6b;
  --fg:#eef0fa; --muted:#9aa1c6; --dim:#6b7299;
  --gold:#f5c451; --gold2:#ffdf8a; --goldInk:#1b1405;
  --live:#ff4d6d; --ht:#01a652; --win:#4fe0a0; --loss:#ff7a8a;
  --top:#f5c451; --strong:#aebde6; --average:#d69a6a;
  --f-display:"Big Shoulders Display", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body:"Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-label:"Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --cut:14px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;
  background-image:radial-gradient(1200px 500px at 85% -10%, rgba(245,196,81,.10), transparent 60%),radial-gradient(900px 500px at -10% 10%, rgba(1,166,82,.13), transparent 60%);
  background-attachment:fixed;min-height:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg2)}
a{color:var(--gold)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.lbl{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:12px;color:var(--muted)}

/* top bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(15,19,38,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.emblem{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--ht),0 0 0 4px rgba(245,196,81,.55);flex:none}
.emblem.big{width:76px;height:76px;box-shadow:0 0 0 3px var(--ht),0 0 0 6px var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.keyart{margin:16px 0 14px;max-width:640px;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:0 18px 50px -20px rgba(1,166,82,.55)}
.keyart img{display:block;width:100%;height:auto;aspect-ratio:1600/391}
.presented{display:inline-flex;align-items:center;gap:10px}
.presented img{height:20px;width:auto}
.brand b{font-family:var(--f-display);font-weight:900;font-size:22px;letter-spacing:.04em;line-height:1}
.brand small{display:block;font-family:var(--f-label);font-size:10.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;gap:2px;overflow-x:auto;flex:1 1 auto;min-width:0;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:var(--f-label);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--muted);text-decoration:none;padding:8px 9px;white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover{color:var(--fg)}
.nav a[aria-current="page"]{color:var(--fg);border-bottom-color:var(--gold)}
.tools{display:flex;gap:8px;align-items:center;margin-left:auto}
.sel,.btn{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:6px 10px;font-family:var(--f-label);font-weight:600;letter-spacing:.06em;font-size:13px;cursor:pointer}
.btn:hover,.sel:hover{border-color:var(--gold)}
.btn.on{background:var(--gold);color:var(--goldInk);border-color:var(--gold)}
.btn.gold{background:var(--gold);color:var(--goldInk);border-color:var(--gold)}
.btn.ghost{background:transparent}

/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;padding-block:40px 34px;position:relative}
.hero .ghostnum{position:absolute;right:-2%;top:-30%;font-family:var(--f-display);font-weight:900;font-size:min(46vw,520px);line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(245,196,81,.13);pointer-events:none;user-select:none}
.eyebrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px;padding:4px 10px;border-radius:3px;background:var(--panel2);color:var(--muted);border:1px solid var(--line2)}
.tag.gold{background:rgba(245,196,81,.12);color:var(--gold);border-color:rgba(245,196,81,.35)}
.tag.live{background:rgba(255,77,109,.14);color:var(--live);border-color:rgba(255,77,109,.4)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.tag.live .dot{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
h1.title{font-family:var(--f-display);font-weight:900;font-size:clamp(44px,6.4vw,96px);overflow-wrap:break-word;line-height:.88;letter-spacing:.01em;margin:14px 0 10px;text-transform:uppercase;text-wrap:balance}
h1.title span{color:var(--gold)}
.subtitle{font-family:var(--f-label);font-size:clamp(16px,2vw,20px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tagline{max-width:52ch;color:var(--muted);margin:14px 0 0}
.progress{margin-top:22px;max-width:520px}
.progress .rail{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-top:8px}
.progress .rail i{height:8px;background:var(--line);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.progress .rail i.done{background:var(--gold)}
.progress .rail i.cur{background:var(--live)}
.progress .rail i.po{background:var(--line2)}
.progress .legend{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin-top:5px}
.progress .legend span{font-family:var(--f-label);font-size:11px;color:var(--dim);text-align:center;letter-spacing:.06em}

.nextcard{align-self:end;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line2);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.nextcard h3{margin:0;font-family:var(--f-display);font-weight:800;font-size:30px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.count{display:flex;gap:10px}
.count div{background:var(--bg2);border:1px solid var(--line);padding:10px 12px;min-width:78px;text-align:center}
.count b{display:block;font-family:var(--f-display);font-size:46px;font-weight:900;line-height:1;color:var(--gold)}
.nextcard .pairs{gap:8px}
.nextcard .pair{font-size:16.5px;padding:8px 12px;background:var(--bg2);border:1px solid var(--line)}
.nextcard .pair > span em{white-space:normal;overflow:visible;line-height:1.15;overflow-wrap:break-word}
.nextcard .zones{flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none}
.nextcard .zones::-webkit-scrollbar{display:none}
.nextcard .zc{flex:1 1 auto;flex-direction:column;align-items:center;gap:1px;padding:4px 5px;font-size:9px;letter-spacing:.03em;white-space:nowrap;text-align:center}
.nextcard .zc b{font-size:16px;line-height:1.1}
.nextcard h3{font-size:38px}
.count small{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.step{padding:8px 10px;background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--line2)}
.step b{display:block;font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.step span{font-size:12.5px;color:var(--muted)}
.step.done{border-top-color:var(--win);opacity:.75}
.step.now{border-top-color:var(--gold);background:rgba(245,196,81,.07)}
.pairs{display:grid;gap:6px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;font-family:var(--f-label);font-weight:600;font-size:14.5px;letter-spacing:.03em}
.pair .r{justify-content:flex-end;text-align:right}
.pair .vs{font-size:11px;color:var(--dim);letter-spacing:.2em}
.pair > span{display:flex;align-items:center;gap:8px;min-width:0}
.pair > span em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* sections */
main{padding-block:28px 60px}
.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px;align-items:start}
.stack{display:flex;flex-direction:column;gap:24px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);min-width:0}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ph h2{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:26px;letter-spacing:.03em;line-height:1}
.pb{padding:16px 18px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* standings */
.tblwrap{overflow-x:auto}
table.st{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;min-width:560px}
.st th{font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--dim);text-align:center;padding:10px 6px;border-bottom:1px solid var(--line)}
.st th:nth-child(2){text-align:left}
.st td{white-space:nowrap;padding:9px 6px;text-align:center;border-bottom:1px solid var(--line);font-family:var(--f-label);font-size:16px;font-weight:600}
.st td.sq{text-align:left}
.st td.pts{font-family:var(--f-display);font-size:24px;font-weight:800;color:var(--fg)}
.st tr.q td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.st tr.cut td{border-bottom:2px dashed rgba(245,196,81,.45)}
.pos{font-family:var(--f-display);font-size:22px;font-weight:800;color:var(--muted);width:42px}
.st tr.q .pos{color:var(--gold)}
.sqcell{display:flex;align-items:center;gap:10px;min-width:0}
.sqcell b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px;font-size:16px;letter-spacing:.02em}
.sqcell .cap{display:block;font-family:var(--f-body);font-size:12px;color:var(--dim);font-weight:500;letter-spacing:0}
.form{display:flex;gap:3px;justify-content:center}
.form i{width:18px;height:18px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;border-radius:2px}
.form .W{background:rgba(79,224,160,.18);color:var(--win)}
.form .L{background:rgba(255,122,138,.15);color:var(--loss)}
.form .T{background:var(--panel2);color:var(--muted)}
.gdp{color:var(--win)} .gdn{color:var(--loss)}
.livemark{color:var(--live);font-size:10px;letter-spacing:.14em;margin-left:6px;vertical-align:middle}
.crest{flex:none;display:block;object-fit:contain}

/* battles */
.battles{display:grid;gap:14px}
.battle{background:var(--bg2);border:1px solid var(--line);min-width:0}
.bhead{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.bhead::-webkit-details-marker{display:none}
.bside{display:flex;align-items:center;gap:12px;min-width:0}
.bside.r{flex-direction:row-reverse;text-align:right}
.bside b{font-family:var(--f-label);font-weight:700;font-size:17px;letter-spacing:.03em;line-height:1.15;overflow-wrap:break-word;hyphens:auto;min-width:0}
.bside.win b{color:var(--fg)} .bside.lose b{color:var(--muted)}
.score{display:flex;flex-direction:column;align-items:center;gap:4px}
.score .sc{font-family:var(--f-display);font-weight:900;font-size:40px;line-height:.95;letter-spacing:.02em;display:flex;gap:10px;align-items:center}
.score .sc .w{color:var(--gold)}
.score .sc .sep{color:var(--dim);font-size:26px}
.stat{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:700}
.stat.live{color:var(--live)} .stat.final{color:var(--win)}
.bonus{font-size:12px;color:var(--gold);font-family:var(--f-label);letter-spacing:.06em}
.duels{border-top:1px solid var(--line);padding:6px 12px 12px}
.tierh{display:flex;align-items:center;gap:8px;margin:10px 4px 4px}
.tierh i{width:10px;height:10px;transform:rotate(45deg)}
.tierh span{font-family:var(--f-label);font-weight:700;letter-spacing:.16em;font-size:11.5px;text-transform:uppercase}
.duel{display:grid;grid-template-columns:minmax(0,1fr) 30px 14px 30px minmax(0,1fr) 22px;gap:8px;align-items:center;padding:6px 4px;border-bottom:1px solid rgba(39,46,82,.6);font-size:14px}
.duel:last-child{border-bottom:0}
.duel .h{text-align:right;overflow-wrap:anywhere}
.duel .g{font-family:var(--f-display);font-weight:800;font-size:20px;text-align:center;line-height:1}
.duel .x{color:var(--dim);text-align:center}
.duel .wn{font-weight:700;color:var(--fg)} .duel .ls{color:var(--muted)}
.duel .tbd{color:var(--dim);font-style:italic}
.pen{font-family:var(--f-label);font-size:10px;letter-spacing:.1em;color:var(--gold);border:1px solid rgba(245,196,81,.4);padding:0 4px;border-radius:2px;margin:0 4px;white-space:nowrap}
.note{margin:10px 4px 0;padding:8px 10px;border-left:3px solid var(--gold);background:rgba(245,196,81,.06);font-size:13px;color:var(--muted)}
.meta{font-size:12px;color:var(--dim);margin:8px 4px 0}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--f-label);font-weight:700;letter-spacing:.08em;font-size:13.5px;padding:7px 12px;background:var(--bg2);border:1px solid var(--line2);cursor:pointer;color:var(--muted);text-transform:uppercase;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.chip:hover{color:var(--fg)}
.chip.on{background:var(--gold);color:var(--goldInk);border-color:var(--gold)}
.chip.played{color:var(--fg)}

/* calendar */
.cal{display:grid;gap:8px}
.calrow{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 14px;background:var(--bg2);border:1px solid var(--line);min-width:0}
.calrow.now{border-color:rgba(245,196,81,.5);background:linear-gradient(90deg,rgba(245,196,81,.08),var(--bg2))}
.calrow .rn{font-family:var(--f-display);font-weight:900;font-size:30px;line-height:.9;text-transform:uppercase}
.calrow .rn small{display:block;font-family:var(--f-label);font-size:11px;letter-spacing:.14em;color:var(--muted);font-weight:600}
.calrow .when{text-align:right;font-family:var(--f-label);font-weight:600;letter-spacing:.04em;white-space:nowrap}
.calrow .when small{display:block;color:var(--dim);font-size:12px}
.prov{color:var(--dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 18px}
.mini .pair{font-size:13.5px}
.mini .pair .g{font-family:var(--f-display);font-weight:800;font-size:17px}

/* bracket */
.bracket{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.bcol{display:flex;flex-direction:column;gap:14px}
.bslot{background:var(--bg2);border:1px solid var(--line);padding:10px 12px}
.bslot .row{display:flex;align-items:center;gap:10px;padding:5px 0;font-family:var(--f-label);font-weight:700;font-size:15px;justify-content:space-between}
.bslot .row > span{display:flex;align-items:center;gap:8px;min-width:0}
.bslot .row em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bslot .row b{font-family:var(--f-display);font-size:22px}
.seed{font-family:var(--f-label);font-size:11px;color:var(--gold);letter-spacing:.1em;width:26px;flex:none}
.bslot.final{border-color:rgba(245,196,81,.55);background:linear-gradient(160deg,rgba(245,196,81,.12),var(--bg2))}
.trophy{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:20px;color:var(--gold);letter-spacing:.06em}

/* squads */
.sqgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.sqcard{background:var(--panel);border:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;min-width:0;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.sqcard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)}
.sqcard .top{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sqcard .top .crest{filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}
.sqcard h3{margin:2px 0 4px;font-family:var(--f-display);font-weight:800;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:.02em;overflow-wrap:break-word;text-wrap:balance}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kv div{background:var(--bg2);padding:6px 8px;text-align:center}
.kv b{display:block;font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1.05}
.kv small{font-family:var(--f-label);font-size:10.5px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.tierbars{display:grid;gap:5px}
.tb{display:grid;grid-template-columns:72px minmax(0,1fr) 44px;gap:8px;align-items:center;font-family:var(--f-label);font-size:12px;letter-spacing:.08em}
.tb .trk{height:7px;background:var(--bg2);position:relative}
.tb .trk i{position:absolute;inset:0 auto 0 0;display:block}
.clubs{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto;font-size:13px}
.clubs div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid rgba(39,46,82,.6)}
.clubs span:last-child{font-family:var(--f-label);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.tcount{display:flex;gap:10px;font-family:var(--f-label);font-weight:700;font-size:12px;letter-spacing:.06em}
.roster{max-height:300px;overflow:auto;margin-top:2px}
.rr{display:grid;grid-template-columns:8px minmax(0,1fr) 42px 38px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(39,46,82,.6);font-size:13px}
.rrh{border-bottom:1px solid var(--line);font-family:var(--f-label);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:8px;padding-bottom:4px}
.rrh span:nth-child(n+3),.rp,.rw{text-align:right}
.td{width:8px;height:8px;transform:rotate(45deg)}
.rc{min-width:0}
.rc a{color:var(--fg);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc a:hover{color:var(--gold);text-decoration:underline}
.rc small{display:block;color:var(--dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capm{color:var(--gold);font-weight:700}
.rp{font-family:var(--f-label);font-weight:700;color:var(--muted)}
.rw{font-family:var(--f-label);color:var(--muted)}
.flag{font-size:.9em;margin-left:6px}
.zones{display:flex;flex-wrap:wrap;gap:6px}
.zc{display:inline-flex;align-items:baseline;gap:6px;padding:3px 8px;background:var(--bg2);border:1px solid var(--line);font-family:var(--f-label);font-size:11.5px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.zc b{font-family:var(--f-display);font-size:16px;color:var(--fg);letter-spacing:.02em}
.zc.me{border-color:rgba(245,196,81,.5);background:rgba(245,196,81,.08)}
.zc.me b{color:var(--gold)}
.ml{color:var(--dim);text-decoration:none;font-size:14px;text-align:center;border:1px solid var(--line);line-height:20px;height:22px}
.ml:hover{color:var(--goldInk);background:var(--gold);border-color:var(--gold)}
.prv{font-family:var(--f-label);font-size:11px;color:var(--dim);margin:0 5px;letter-spacing:.04em}

/* rules */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.rule{background:var(--bg2);border:1px solid var(--line);padding:12px 14px}
.rule b{display:block;font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1;color:var(--gold)}
.rule span{font-size:13.5px;color:var(--muted)}
.tiers{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tchip{font-family:var(--f-label);font-weight:700;letter-spacing:.14em;font-size:12px;padding:4px 10px;border:1px solid currentColor}

/* top performers */
.perf{display:grid;gap:4px}
.perf div{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.perf .n{font-family:var(--f-display);font-weight:800;color:var(--dim)}
.perf small{display:block;color:var(--dim);font-size:12px}
.perf .v{font-family:var(--f-label);font-weight:700;white-space:nowrap}

/* archive */
.arch{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.acard{background:var(--panel);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;min-width:0}
.acard .big{font-family:var(--f-display);font-weight:900;font-size:76px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--gold)}
.acard h3{margin:0;font-family:var(--f-display);font-size:28px;text-transform:uppercase;font-weight:800;line-height:1}

/* edit */
.edit .ein{background:var(--bg);border:1px solid var(--line2);border-radius:4px;padding:5px 7px;width:100%;min-width:0;font-size:13.5px}
.edit .ein.n{text-align:center;font-family:var(--f-display);font-weight:800;font-size:18px;padding:3px 2px}
.eduel{display:grid;grid-template-columns:minmax(0,1fr) 46px 46px minmax(0,1fr) 64px 92px;gap:6px;align-items:center;padding:4px 0}
.ebar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;background:rgba(245,196,81,.06);border-top:1px solid var(--line)}
.ebar label{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);font-family:var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.ebar .ein{width:auto}
.ebar .ein.w{width:62px}
.ebar .ein.note{min-width:200px;flex:1}
.editbanner{background:var(--gold);color:var(--goldInk);font-family:var(--f-label);font-weight:700;letter-spacing:.06em;font-size:13px}
.editbanner .wrap{padding-block:7px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.notice{padding:14px 16px;border:1px dashed var(--line2);color:var(--muted);font-size:14px;background:var(--bg2)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel2);border:1px solid var(--gold);padding:9px 16px;font-family:var(--f-label);font-weight:600;letter-spacing:.06em;z-index:90;max-width:calc(100% - 32px)}
.ecal{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ecal .ein{width:auto}
.esq{display:grid;gap:8px}
.esq label{display:grid;gap:3px;font-family:var(--f-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.esq .row2{display:grid;grid-template-columns:minmax(0,1fr) 90px 60px;gap:8px}


/* recap (finished season) */
.recap-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:24px;align-items:stretch}
.scard{display:flex;gap:20px;align-items:center;padding:22px;flex-wrap:wrap}
.scard .cup{flex:none;filter:drop-shadow(0 10px 24px rgba(245,196,81,.25))}
.scard h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:44px;line-height:.9;text-transform:uppercase}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:12px;font-size:14px}
.facts dt{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--dim);padding-top:2px}
.facts dd{margin:0;font-weight:600}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding:22px 18px 0}
.pod{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;min-width:0}
.pod .who{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pod .who b{font-family:var(--f-label);font-weight:700;font-size:15px;letter-spacing:.03em;line-height:1.15}
.pod .pair3{display:flex;gap:6px;justify-content:center;max-width:100%;min-width:0}
.pod .pair3 .who{flex:1 1 0;min-width:0}
.pod .who b{overflow-wrap:anywhere}
.step3d{width:100%;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:46px;line-height:1;color:var(--goldInk);clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 100%,0 100%)}
.pod.p1 .step3d{height:150px;background:linear-gradient(180deg,var(--gold2),var(--gold))}
.pod.p2 .step3d{height:105px;background:linear-gradient(180deg,#e3e9f8,#aebde6)}
.pod.p3 .step3d{height:75px;background:linear-gradient(180deg,#f0b88c,#c9844f)}
.pod .medal{font-family:var(--f-label);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.po{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,.8fr);align-items:center;gap:0}
.po .col{display:flex;flex-direction:column;gap:18px;min-width:0}
.po .colh{font-family:var(--f-label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:-8px}
.po .link{height:100%;position:relative}
.po .link::before{content:"";position:absolute;left:0;right:50%;top:25%;bottom:25%;border:2px solid var(--line2);border-left:0}
.po .link::after{content:"";position:absolute;left:50%;right:0;top:50%;border-top:2px solid var(--line2)}
.po .link.one::before{display:none}
.po .link.one::after{left:0}
.champ{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px;border:1px solid rgba(245,196,81,.5);background:linear-gradient(160deg,rgba(245,196,81,.14),var(--bg2))}
.champ b{font-family:var(--f-display);font-weight:900;font-size:22px;text-transform:uppercase;line-height:1}
.rres{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.rres .rb{background:var(--bg2);border:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.rres .rb button{all:unset;cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:18px;text-transform:uppercase}
.rres .rb button:hover,.rres .rb button:focus-visible{color:var(--gold)}
@media (max-width:560px){ .nextcard .zones{flex-wrap:wrap} .nextcard .zc{flex:1 1 22%} .nextcard .pair{font-size:14px;padding:8px} .nextcard .pair > span em{overflow-wrap:anywhere;hyphens:auto} }
@media (max-width:560px){ .podium{padding:16px 8px 0;gap:6px} .pod .who b{font-size:12px} .step3d{font-size:34px} }
@media (max-width:900px){ .recap-top{grid-template-columns:minmax(0,1fr)} .po{grid-template-columns:minmax(0,1fr);gap:14px} .po .link{display:none} }
/* stream */
body.streaming main .wrap{max-width:none}
body.streaming .bar,body.streaming .hero,body.streaming footer,body.streaming .editbanner{display:none}
.stream{min-height:100vh;display:flex;flex-direction:column;gap:18px;padding-block:22px}
.shead{display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;border-bottom:2px solid var(--gold);padding-bottom:12px}
.shead h1{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(34px,4.6vw,64px);line-height:.9;text-transform:uppercase}
.shead h1 span{color:var(--gold)}
.sgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;flex:1}
.stream .st td{font-size:clamp(15px,1.5vw,22px);padding-block:clamp(7px,1vw,14px)}
.stream .st td.pts{font-size:clamp(22px,2.4vw,36px)}
.stream .score .sc{font-size:clamp(34px,3.6vw,58px)}
.stream .bside b{font-size:clamp(15px,1.5vw,22px)}

footer{border-top:1px solid var(--line);color:var(--dim);font-size:13px}
footer .wrap{padding-block:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:900px){
  .hero .wrap,.grid2,.sgrid{grid-template-columns:minmax(0,1fr)}
  .calrow{grid-template-columns:70px minmax(0,1fr)}
  .calrow .when{grid-column:1 / -1;text-align:left}
  .bracket{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .bhead{gap:8px;padding:12px}
  .bside{flex-direction:column;align-items:flex-start;gap:6px}
  .bside.r{flex-direction:column;align-items:flex-end}
  .bside b{font-size:14.5px}
  .score .sc{font-size:32px}
  .tools{width:100%;margin-left:0}
  .eduel{grid-template-columns:minmax(0,1fr) 40px 40px minmax(0,1fr);}
  .eduel select,.eduel input[id$="-m"]{grid-column:1 / -1}
  .count div{min-width:54px}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- rules page ---------- */
.rhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:center}
.rhero h2{margin:4px 0 8px;font-family:var(--f-display);font-weight:900;font-size:clamp(40px,6vw,64px);line-height:.9;text-transform:uppercase}
.rhero p{max-width:52ch;margin:0}
.rules.keys{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.rules.keys .rule span{font-size:12.5px}
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;counter-reset:wk}
.week li{position:relative;background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--line2);padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;counter-increment:wk}
.week li::before{content:counter(wk);position:absolute;right:12px;top:6px;font-family:var(--f-display);font-weight:900;font-size:28px;color:var(--line2)}
.week li b{font-family:var(--f-label);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.week li span{font-size:13.5px;color:var(--muted)}
.week li.hl{border-top-color:var(--gold);background:linear-gradient(180deg,rgba(245,196,81,.08),var(--bg2))}
.week li.hl b{color:var(--gold)}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tcard{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--tc);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.tcard b{font-family:var(--f-display);font-weight:900;font-size:26px;color:var(--tc);letter-spacing:.04em}
.tcard span{font-family:var(--f-label);font-weight:700;font-size:17px}
.tcard small{color:var(--dim);font-size:12px}
.rlayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}
.rtoc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:flex;flex-direction:column;gap:2px}
.rtoc .lbl{margin-bottom:6px}
.rtoc a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;color:var(--muted);text-decoration:none;font-family:var(--f-label);font-weight:600;font-size:14.5px;border-left:2px solid var(--line)}
.rtoc a:hover{color:var(--fg);border-left-color:var(--gold)}
.rtoc a .num{color:var(--gold);font-family:var(--f-display);font-weight:800;min-width:14px}
.rbody .pb{padding:8px 26px 26px}
.rsec{scroll-margin-top:90px;padding-top:18px}
.rsec h3{display:flex;gap:12px;align-items:baseline;margin:0 0 10px;font-family:var(--f-display);font-weight:800;font-size:28px;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--line);padding-bottom:8px}
.rsec h3 .num{color:var(--gold)}
.ritem{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:8px 0;scroll-margin-top:90px}
.ritem p{margin:0;max-width:72ch;line-height:1.6}
.ritem p a{color:var(--gold)}
.rid{font-family:var(--f-label);font-weight:700;color:var(--muted);text-decoration:none;padding-top:1px}
.rid:hover{color:var(--gold)}
.rid::after{content:" #";opacity:0;color:var(--gold)}
.ritem:hover .rid::after{opacity:1}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{background:rgba(245,196,81,.22)}100%{background:transparent}}
.exgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.ex{background:var(--bg2);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ex p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.exscore{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;font-family:var(--f-label);font-weight:700}
.exscore span:last-child{text-align:right}
.exscore b{font-family:var(--f-display);font-weight:900;font-size:26px;color:var(--gold)}

/* ---------- creators' channels ---------- */
.ch{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:4px;font-family:var(--f-label);font-weight:700;font-size:13px;letter-spacing:.04em;text-decoration:none;color:#fff;background:var(--panel2);border:1px solid transparent;white-space:nowrap}
.ch i{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.ch:hover{filter:brightness(1.15)}
.ch.sm{padding:3px 8px;font-size:12px}
.ch-twitch{background:#9146ff}
.ch-youtube{background:#e62117}
.ch-kick{background:#53fc18;color:#0b0e1c}
.ch-x{background:#e7e9ea;color:#0b0e1c}
.ch-discord{background:#5865f2}
.ch-other{background:var(--panel2);border-color:var(--line2)}
.chs{display:flex;gap:5px;flex-wrap:wrap}
.crs{display:flex;flex-direction:column;gap:6px}
.cr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.cr b{font-family:var(--f-label);font-size:14.5px}
.crole{font-family:var(--f-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,196,81,.4);padding:0 5px}
.watch{display:flex;flex-direction:column;gap:2px}
.wrow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:0}
.wrow b{display:block;font-family:var(--f-label);font-size:15px}
.wrow small{display:block;color:var(--dim);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sstrip{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--line)}
.sstrip span{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-label);font-size:15px}
.sstrip em{font-style:normal;color:var(--muted);font-size:13.5px}
.sstrip em.pl-twitch{color:#b98cff}
.sstrip em.pl-youtube{color:#ff6b62}
@media (max-width:900px){
  .rhero,.rlayout{grid-template-columns:minmax(0,1fr)}
  .rtoc{position:static;flex-direction:row;flex-wrap:wrap}
  .rtoc .lbl{width:100%}
  .rtoc a{border-left:0;border-bottom:2px solid var(--line);padding:6px 8px}
  .week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exgrid,.tgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){ .week{grid-template-columns:minmax(0,1fr)} .rbody .pb{padding:6px 14px 18px} .wrow{grid-template-columns:28px minmax(0,1fr)} .wrow .chs{grid-column:2} }

.brand b,.btn{white-space:nowrap}
@media (min-width:1280px){ .bar .wrap{flex-wrap:nowrap} }