:root{
  --ink:#0D0A13; --surface:#16111F; --surface2:#1F1830; --line:#2E2440;
  --text:#F2EDF7; --muted:#A093B5; --dim:#6E6285;
  --rose:#FF4D77; --teal:#37D8C8; --gold:#F5C451;
  --roseGhost:rgba(255,77,119,.10); --tealGhost:rgba(55,216,200,.09);
  --track:#241C33;
  --shadow:0 18px 40px -24px rgba(0,0,0,.9);
  --display:'Syne','Trebuchet MS',sans-serif;
  --body:'Zen Kaku Gothic New','Hiragino Sans',system-ui,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ink:#F7F4FA; --surface:#FFFFFF; --surface2:#F0EBF6; --line:#DFD6EC;
    --text:#1B1426; --muted:#6B5F80; --dim:#8C7FA3;
    --rose:#D91E52; --teal:#0B8E81; --gold:#A8760F;
    --roseGhost:rgba(217,30,82,.07); --tealGhost:rgba(11,142,129,.07);
    --track:#E7E0F0;
    --shadow:0 18px 40px -28px rgba(40,20,60,.4);
  }
}
:root[data-theme="light"]{
  --ink:#F7F4FA; --surface:#FFFFFF; --surface2:#F0EBF6; --line:#DFD6EC;
  --text:#1B1426; --muted:#6B5F80; --dim:#8C7FA3;
  --rose:#D91E52; --teal:#0B8E81; --gold:#A8760F;
  --roseGhost:rgba(217,30,82,.07); --tealGhost:rgba(11,142,129,.07);
  --track:#E7E0F0;
  --shadow:0 18px 40px -28px rgba(40,20,60,.4);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--body); font-size:15px; line-height:1.55; min-height:100vh}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.wrap{max-width:1180px; margin:0 auto; padding:22px 20px 48px}

/* masthead */
.masthead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--line)}
.wordmark{font-family:var(--display); font-weight:800; font-size:clamp(20px,2.6vw,27px); letter-spacing:-.02em; margin:0; text-decoration:none}
.wordmark em{font-style:normal; color:var(--rose)}
.wordmark em+em{color:var(--teal)}
.tagline{color:var(--muted); font-size:13.5px; margin:0 auto 0 0}
.navlink{font-family:var(--mono); font-size:11.5px; color:var(--muted); border:1px solid var(--line); padding:5px 10px; letter-spacing:.06em; text-decoration:none}
.navlink:hover{color:var(--text); border-color:var(--dim)}

/* primitives */
.btn{font-family:var(--display); font-weight:700; font-size:14px; border:1px solid var(--line); background:var(--surface2); padding:11px 20px; color:var(--text); transition:border-color .15s,background .15s,transform .1s; text-decoration:none; display:inline-block}
.btn:hover{border-color:var(--dim)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--rose); border-color:var(--rose); color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.35; cursor:not-allowed; filter:none}
.btn.ghost{background:none}
.block{border:1px solid var(--line); background:var(--surface); padding:20px}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:0 0 12px}
.note{margin:0; color:var(--muted); font-size:12.5px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--mono); font-size:12.5px; border:1px solid var(--line); padding:7px 13px; color:var(--muted); transition:.15s}
.chip:hover{color:var(--text); border-color:var(--dim)}
.chip[aria-pressed="true"]{background:var(--text); color:var(--ink); border-color:var(--text)}
.chip[disabled]{opacity:.3; cursor:not-allowed}
.field{display:grid; gap:10px; margin-bottom:20px}
.field:last-child{margin-bottom:0}
.field>span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
input[type=text]{font:inherit; background:var(--ink); border:1px solid var(--line); color:var(--text); padding:10px 12px; width:100%}
input[type=text]:focus{border-color:var(--dim); outline:none}
.tag{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; border:1px solid currentColor; padding:1px 5px; flex:none}
.t-op{color:var(--rose)} .t-ed{color:var(--teal)} .t-in{color:var(--gold)}
.err{border:1px solid var(--rose); color:var(--rose); padding:10px 14px; font-size:13.5px; margin:0}
.notice{border:1px solid var(--gold); color:var(--gold); padding:10px 14px; font-size:13px; margin:14px 0 0}

/* index */
.hero{padding:30px 0 6px}
.hero h1{font-family:var(--display); font-weight:800; font-size:clamp(30px,5.2vw,54px); line-height:1.02; letter-spacing:-.03em; margin:0; max-width:16ch; text-wrap:balance}
.hero p{color:var(--muted); max-width:58ch; margin:14px 0 0}
.panelgrid{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; margin-top:26px}
@media(max-width:820px){.panelgrid{grid-template-columns:1fr}}
.drop{border:1px dashed var(--line); background:var(--surface); padding:26px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; transition:border-color .15s,background .15s}
.drop.over{border-color:var(--rose); background:var(--roseGhost)}
.drop h2{font-family:var(--display); font-weight:700; font-size:19px; margin:0 0 4px}
.drop p{margin:0; color:var(--muted); font-size:13.5px; max-width:52ch}
.dropcol{flex:1 1 300px}
.count{font-family:var(--display); font-weight:800; font-size:44px; line-height:1; letter-spacing:-.03em}
.count small{font-family:var(--body); font-weight:500; font-size:13px; color:var(--muted); display:block; margin-top:6px; letter-spacing:0}
.preview{margin-top:16px; max-height:200px; overflow:auto; border-top:1px solid var(--line)}
.prow{display:flex; gap:10px; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px}
.prow b{font-weight:500}
.prow .an{color:var(--muted); font-size:12px; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:45%}
.cuplist{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.cuplist li{background:var(--surface)}
.cuplist a{display:flex; gap:12px; align-items:baseline; padding:12px 14px; text-decoration:none; transition:background .15s}
.cuplist a:hover{background:var(--surface2)}
.cuplist b{font-family:var(--display); font-weight:700; font-size:15px}
.cuplist span{font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-left:auto; white-space:nowrap}
.sharebox{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px}
.sharebox code{font-family:var(--mono); font-size:12.5px; background:var(--ink); border:1px solid var(--line); padding:9px 12px; flex:1 1 260px; overflow:auto; white-space:nowrap}

/* arena */
.roundbar{display:flex; align-items:center; gap:16px; padding:20px 0 14px; flex-wrap:wrap}
.roundname{font-family:var(--display); font-weight:800; font-size:clamp(22px,3.4vw,34px); letter-spacing:-.02em; margin:0; text-wrap:balance}
.matchno{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.ticks{display:flex; gap:3px; flex:1 1 220px; min-width:160px; height:5px}
.ticks i{flex:1; min-width:2px; background:var(--line)}
.ticks i.done{background:var(--dim)}
.ticks i.now{background:var(--gold)}
.arena{display:grid; grid-template-columns:1fr 62px 1fr; align-items:stretch}
@media(max-width:880px){.arena{grid-template-columns:1fr; grid-template-rows:auto 54px auto}}
.side{position:relative; border:1px solid var(--line); background:var(--surface); padding:26px 24px 20px; display:flex; flex-direction:column; gap:14px; text-align:left; transition:border-color .15s,transform .12s; box-shadow:var(--shadow)}
.side::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .2s}
.side.a::after{background:radial-gradient(120% 90% at 0% 0%, var(--roseGhost), transparent 60%)}
.side.b::after{background:radial-gradient(120% 90% at 100% 0%, var(--tealGhost), transparent 60%)}
.side:hover::after,.side:focus-visible::after{opacity:1}
.side.a:hover,.side.a:focus-visible{border-color:var(--rose); transform:translateY(-2px)}
.side.b:hover,.side.b:focus-visible{border-color:var(--teal); transform:translateY(-2px)}
.side>*{position:relative; z-index:1}
.sidehead{display:flex; align-items:center; gap:10px}
.sidehead .lbl{font-size:12.5px; color:var(--muted)}
.key{font-family:var(--mono); font-size:11px; color:var(--dim); letter-spacing:.1em; margin-left:auto}
.songtitle{font-family:var(--display); font-weight:800; font-size:clamp(21px,2.7vw,30px); line-height:1.12; letter-spacing:-.02em; margin:0; text-wrap:balance; overflow-wrap:anywhere}
.artist{margin:0; color:var(--muted); font-size:14px}
.anime{margin:0; font-size:14.5px; font-weight:500; border-top:1px solid var(--line); padding-top:12px; overflow-wrap:anywhere}
.anime small{display:block; color:var(--dim); font-weight:400; font-size:12.5px; margin-top:2px}
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--mono); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.meta b{font-weight:400; color:var(--dim)}
.transport{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px}
.play{width:44px; height:44px; flex:none; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; transition:background .15s}
.side.a .play{color:var(--rose)} .side.b .play{color:var(--teal)}
.play:hover{background:currentColor}
.play:hover svg{fill:var(--surface)}
.play svg{width:14px; height:14px; fill:currentColor; transition:fill .15s}
.bar{flex:1; min-width:40px; height:4px; background:var(--track); cursor:pointer; position:relative; touch-action:none}
/* The mark stays thin; the hit target is much taller than the mark. */
.bar::before{content:""; position:absolute; left:0; right:0; top:-11px; bottom:-11px}
.bar:focus-visible{outline:2px solid var(--gold); outline-offset:7px}
.bar i{position:absolute; top:0; bottom:0; left:0; width:0; background:var(--dim)}
.bar i::after{content:""; position:absolute; right:0; top:50%; width:11px; height:11px; margin:-5.5px -5.5px 0 0; border-radius:50%; background:inherit; opacity:0; transition:opacity .15s}
.bar:hover i::after,.bar:focus-visible i::after{opacity:1}
.side.a .bar i{background:var(--rose)} .side.b .bar i{background:var(--teal)}
.time{font-family:var(--mono); font-size:11.5px; color:var(--dim); font-variant-numeric:tabular-nums; flex:none}
.hosttag{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--dim); border:1px solid var(--line); padding:1px 5px; flex:none; cursor:default}
.hosttag:empty{display:none}
.hosttag.fell{color:var(--gold); border-color:var(--gold)}
.pickcue{font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:0; transition:opacity .15s; margin-top:4px}
.side.a .pickcue{color:var(--rose)} .side.b .pickcue{color:var(--teal)}
.side:hover .pickcue,.side:focus-visible .pickcue{opacity:1}
.seam{position:relative; display:grid; place-items:center}
.seam::before{content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--line)}
@media(max-width:880px){.seam::before{top:auto; left:0; right:0; height:1px; width:auto}}
.vs{width:46px; height:46px; background:var(--ink); border:1px solid var(--line); transform:rotate(45deg); display:grid; place-items:center; z-index:2}
.vs span{transform:rotate(-45deg); font-family:var(--display); font-weight:800; font-size:15px}
.tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:16px}
.tools .hint{font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-left:auto}
kbd{font-family:var(--mono); font-size:11px; border:1px solid var(--line); padding:1px 5px; color:var(--muted); margin-right:2px}

/* champion + stats */
.champ{border:1px solid var(--gold); padding:30px 26px; background:var(--surface); display:grid; gap:4px; box-shadow:var(--shadow)}
.champ .eyebrow{color:var(--gold); margin:0}
.champ h2{font-family:var(--display); font-weight:800; font-size:clamp(28px,5vw,52px); line-height:1.05; letter-spacing:-.03em; margin:6px 0 2px; text-wrap:balance; overflow-wrap:anywhere}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:24px 0}
.tile{background:var(--surface); padding:16px 18px}
.tile b{font-family:var(--display); font-weight:800; font-size:32px; line-height:1; letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums}
.tile span{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); display:block; margin-top:8px}
.tablewrap{overflow-x:auto; margin-top:8px}
table.rank{width:100%; border-collapse:collapse; min-width:640px}
table.rank th{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:left; font-weight:400; padding:0 12px 8px 0; border-bottom:1px solid var(--line); white-space:nowrap}
table.rank td{padding:10px 12px 10px 0; border-bottom:1px solid var(--line); vertical-align:middle; font-size:14px}
table.rank td.pl{font-family:var(--mono); color:var(--muted); font-variant-numeric:tabular-nums; width:1%; white-space:nowrap}
table.rank tr.top td.pl{color:var(--gold)}
table.rank tr.you td{background:var(--roseGhost)}
table.rank td small{display:block; color:var(--muted); font-size:12.5px}
table.rank td.num{font-family:var(--mono); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted)}
table.rank th.num{text-align:right}
/* win-rate meter: single-hue magnitude mark on a recessive track */
.meter{display:flex; align-items:center; gap:10px; min-width:150px}
.meter .track{position:relative; flex:1; height:8px; background:var(--track); min-width:70px}
.meter .fill{position:absolute; top:0; bottom:0; left:0; background:var(--rose); border-radius:0 4px 4px 0}
.meter .val{font-family:var(--mono); font-size:12px; color:var(--text); font-variant-numeric:tabular-nums; width:44px; text-align:right}
.meter .val.none{color:var(--dim)}
.recent{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.recent li{background:var(--surface); padding:10px 14px; display:flex; gap:12px; align-items:baseline; font-size:13.5px}
.recent .who{font-weight:500}
.recent .when{font-family:var(--mono); font-size:11.5px; color:var(--dim); margin-left:auto; white-space:nowrap}
.cols{display:grid; grid-template-columns:1.6fr .9fr; gap:26px; align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.loading{color:var(--muted); padding:40px 0; font-family:var(--mono); font-size:13px}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}