:root{
  --ink:#0D0A13; --surface:#16111F; --surface2:#1F1830; --line:#2E2440;
  --text:#F2EDF7; --muted:#A093B5; --dim:#6E6285;
  --rose:#FF4D77; --teal:#37D8C8; --gold:#F5C451; --violet:#B08CFF;
  --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; --violet:#6D3BD4;
    --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; --violet:#6D3BD4;
  --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}
.mainnav{display:flex; gap:2px; margin-right:auto}
.mainnav a{font-family:var(--display); font-weight:700; font-size:14px; text-decoration:none; color:var(--muted); padding:6px 12px; border:1px solid transparent; transition:color .15s, border-color .15s, background .15s}
.mainnav a:hover{color:var(--text)}
.mainnav a[aria-current="page"]{color:var(--text); border-color:var(--line); background:var(--surface)}

/* landing */
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:26px}
.feature{background:var(--surface); padding:30px 26px; text-decoration:none; display:flex; flex-direction:column; gap:10px; transition:background .15s}
.feature:hover{background:var(--surface2)}
.feature .eyebrow{margin:0}
.feature h2{font-family:var(--display); font-weight:800; font-size:clamp(24px,3.4vw,34px); letter-spacing:-.02em; margin:0; color:var(--accent)}
.feature p{margin:0; color:var(--muted); font-size:14px; max-width:44ch}
.feature .go{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--accent); margin-top:auto; padding-top:16px}
.todaygrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.todaycell{background:var(--surface); padding:12px 14px; text-decoration:none; display:block; transition:background .15s}
.todaycell:hover{background:var(--surface2)}
.todaycell b{font-family:var(--display); font-weight:700; font-size:14px; display:block; color:var(--accent)}
.todaycell span{font-family:var(--mono); font-size:11px; color:var(--dim); display:block; margin-top:4px}
.sitefoot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--dim)}
.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)}
/* Every text-entry input, not just type=text -- a password field left out of
   this list falls back to the browser's default chrome and looks foreign. */
input[type=text],input[type=password],input[type=search],input[type=email],input[type=number]{
  font:inherit; background:var(--ink); border:1px solid var(--line); color:var(--text);
  padding:10px 12px; width:100%; border-radius:0; -webkit-appearance:none; appearance:none;
}
input[type=text]:focus,input[type=password]:focus,input[type=search]:focus,input[type=email]:focus,input[type=number]:focus{
  border-color:var(--dim); outline:none;
}
input[type=password]{letter-spacing:.12em}
input[type=password]:placeholder-shown{letter-spacing:normal}
.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}
/* ------------------------------- anidle ------------------------------- */
/* Every component that paints with --accent needs it defined, not just the
   difficulty-scoped ones -- an undefined accent drops the background and leaves
   ink-on-ink text. This is the site-wide fallback. */
:root{--accent:var(--rose)}
.d-easy{--accent:var(--teal)} .d-medium{--accent:var(--gold)}
.d-hard{--accent:var(--rose)} .d-expert{--accent:var(--violet)}
.rkstage{--accent:var(--teal)}   /* ranked: teal controls, rose reserved for the alarm */
.tabs{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin:24px 0 0; flex-wrap:wrap}
.tab{flex:1 1 140px; background:var(--surface); padding:13px 16px; text-align:left; transition:background .15s}
.tab:hover{background:var(--surface2)}
.tab b{font-family:var(--display); font-weight:700; font-size:15px; display:block; color:var(--muted)}
.tab span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--dim); display:block; margin-top:3px}
.tab[aria-selected="true"]{background:var(--surface2); box-shadow:inset 0 -3px 0 var(--accent)}
.tab[aria-selected="true"] b{color:var(--text)}
.tab .mark{float:right; font-family:var(--mono); font-size:12px; color:var(--accent)}
.game{border:1px solid var(--line); border-top:none; background:var(--surface); padding:26px 24px}
.stagebar{display:flex; gap:4px; margin:0 0 20px}
.stagebar i{flex:1; height:6px; background:var(--track); position:relative}
.stagebar i.used{background:var(--dim)}
.stagebar i.wrong{background:var(--rose)}
.stagebar i.now{background:var(--accent)}
.stagebar i.win{background:var(--gold)}
.player{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.playbig{width:74px; height:74px; flex:none; border:2px solid var(--accent); color:var(--accent); border-radius:50%; display:grid; place-items:center; transition:background .15s}
.playbig:hover{background:var(--accent)}
.playbig:hover svg{fill:var(--surface)}
.playbig svg{width:22px; height:22px; fill:currentColor; transition:fill .15s}
.cliplen{font-family:var(--display); font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1}
.cliplen small{display:block; font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:6px}
.clipbar{flex:1 1 200px; min-width:140px; height:6px; background:var(--track); position:relative; overflow:hidden}
.clipbar i{position:absolute; top:0; bottom:0; left:0; width:0; background:var(--accent)}
.combo{position:relative}
.combo input{width:100%}
.combo-list{position:absolute; left:0; right:0; top:100%; z-index:20; max-height:260px; overflow:auto; background:var(--surface2); border:1px solid var(--dim); margin-top:-1px}
.combo-list div{padding:8px 12px; font-size:14px; cursor:pointer; border-bottom:1px solid var(--line)}
.combo-list div:last-child{border-bottom:none}
/* Belt and braces: even with no accent in scope this stays readable. */
.combo-list div:hover,.combo-list div[aria-selected="true"]{
  background:var(--accent, var(--rose)); color:var(--ink); font-weight:500;
}
.combo-empty{padding:10px 12px; color:var(--dim); font-size:13px}
.guessrow{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap}
.guessrow .combo{flex:1 1 280px}
.guesses{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:6px}
.guesses li{display:flex; gap:10px; align-items:center; padding:9px 12px; border:1px solid var(--line); font-size:14px; background:var(--ink)}
.guesses .no{color:var(--rose); font-family:var(--mono); font-size:12px; flex:none}
.guesses .yes{color:var(--gold); font-family:var(--mono); font-size:12px; flex:none}
.guesses .skip{color:var(--dim); font-family:var(--mono); font-size:12px; flex:none}
.guesses li.miss{opacity:.75}
.reveal{border:1px solid var(--accent); padding:22px; margin-top:22px; background:var(--ink)}
.reveal .eyebrow{color:var(--accent)}
.reveal h3{font-family:var(--display); font-weight:800; font-size:clamp(21px,3vw,30px); letter-spacing:-.02em; margin:2px 0 6px; text-wrap:balance}
.reveal dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:14px 0 0; font-size:13.5px}
.reveal dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); align-self:center}
.reveal dd{margin:0}
/* ------------------------------- ranked 1v1 ------------------------------ */
/* avatars */
.pfp{display:inline-block; border-radius:50%; object-fit:cover; background:var(--surface2); border:1px solid var(--line); flex:none; vertical-align:middle}
.pfp.fallback{display:inline-grid; place-items:center; font-family:var(--display); font-weight:800; letter-spacing:.02em;
  color:hsl(var(--pfp-h) 70% 82%); background:hsl(var(--pfp-h) 45% 22%); border-color:hsl(var(--pfp-h) 45% 34%)}
:root[data-theme="light"] .pfp.fallback,
:root:not([data-theme="dark"]) .pfp.fallback{color:hsl(var(--pfp-h) 55% 28%); background:hsl(var(--pfp-h) 65% 90%); border-color:hsl(var(--pfp-h) 45% 76%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pfp.fallback{color:hsl(var(--pfp-h) 70% 82%); background:hsl(var(--pfp-h) 45% 22%); border-color:hsl(var(--pfp-h) 45% 34%)}}
.pfprow{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.pfpwrap{flex:none}
.whorow{display:flex; align-items:center; gap:11px}
.vsside.right .whorow{justify-content:flex-end}
@media(max-width:640px){.whorow,.vsside.right .whorow{justify-content:center}}

/* match chat */
.chatbox{border:1px solid var(--line); border-top:none; background:var(--surface); padding:16px 20px 18px}
.chatbox .eyebrow{margin:0 0 10px}
.chatlist{max-height:190px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; margin-bottom:12px}
.chatlist:empty::after{content:'Nothing said yet.'; color:var(--dim); font-size:13px}
.chatline{display:flex; align-items:center; gap:9px; font-size:14px}
.chatline .who{font-weight:700; color:var(--muted); flex:none}
.chatline.mine .who{color:var(--teal)}
.chatline .said{overflow-wrap:anywhere}
.chatrow{display:flex; gap:9px}
.chatrow input{flex:1}

.pagetitle{font-family:var(--display); font-weight:800; font-size:clamp(28px,4.6vw,46px); letter-spacing:-.03em; margin:0 0 8px}
.ratingrow{display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:22px; border:1px solid var(--line); background:var(--surface); padding:22px 24px}
.ratingbig{font-family:var(--display); font-weight:800; font-size:52px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.ratingbig small{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:8px; font-weight:400}
.recordbox{font-family:var(--display); font-weight:700; font-size:19px}
.recordbox span{color:var(--dim)}
.recordbox small{display:block; font-family:var(--body); font-weight:400; font-size:12.5px; color:var(--muted); margin-top:6px}
.activity{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:18px; width:fit-content; max-width:100%; flex-wrap:wrap}
.actcell{background:var(--surface); padding:11px 18px; display:flex; align-items:baseline; gap:7px}
.actcell b{font-family:var(--display); font-weight:800; font-size:19px; font-variant-numeric:tabular-nums; color:var(--dim)}
.actcell.live b{color:var(--teal)}
.actcell span{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.searching{display:flex; gap:8px; margin-top:20px}
.searching i{width:12px; height:12px; border-radius:50%; background:var(--rose); opacity:.25; animation:pulse 1.2s infinite}
.searching i:nth-child(2){animation-delay:.2s} .searching i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,100%{opacity:.25} 50%{opacity:1}}

.vsbar{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; border:1px solid var(--line); background:var(--surface); padding:18px 22px}
@media(max-width:640px){.vsbar{grid-template-columns:1fr; text-align:center}}
.vsside b{font-family:var(--display); font-weight:800; font-size:19px; display:block}
.vsside .elo{font-family:var(--mono); font-size:12px; color:var(--dim)}
.vsside.right{text-align:right}
@media(max-width:640px){.vsside.right{text-align:center}}
.lives{display:flex; gap:5px; margin-top:9px}
.vsside.right .lives{justify-content:flex-end}
@media(max-width:640px){.vsside .lives,.vsside.right .lives{justify-content:center}}
.life{width:13px; height:13px; background:var(--rose); clip-path:polygon(50% 100%,0 35%,20% 0,50% 20%,80% 0,100% 35%)}
.life.gone{background:var(--track)}
.vsmid{display:flex; flex-direction:column; align-items:center; gap:7px}
.vsmid .bo{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); white-space:nowrap}
.pips{display:flex; gap:5px}
.pip{width:10px; height:10px; border:1px solid var(--dim); border-radius:50%}
.pip.won{background:var(--gold); border-color:var(--gold)}

.rkstage{border:1px solid var(--line); border-top:none; background:var(--surface); padding:24px; position:relative}
/* The five seconds after the opponent locks in: unmissable on purpose. */
.rkstage.grace{animation:graceflash .6s steps(1,end) infinite}
@keyframes graceflash{
  0%,49%{box-shadow:inset 0 0 0 3px var(--rose); background:var(--roseGhost)}
  50%,100%{box-shadow:inset 0 0 0 3px transparent; background:var(--surface)}
}
/* Late-game phases: shorter samples, less grace, then none at all. */
.phasetag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold); padding:4px 9px; margin:14px 0 0}
.phasetag.hard{color:var(--rose); border-color:var(--rose)}

/* The opponent swinging and missing. */
.missbadge{font-family:var(--mono); font-size:11px; color:var(--rose); margin-left:8px}
.vsside.miss .whorow{animation:missflash .55s ease-out 2}
@keyframes missflash{0%{background:transparent} 30%{background:rgba(255,77,119,.22)} 100%{background:transparent}}

.chathead{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.chathead .eyebrow{margin:0 0 10px}
.btn.tiny{font-size:11.5px; padding:3px 9px}

/* Watching a live match, and the lists that lead to one. */
.watchbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.livelist{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line)}
.liverow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface); padding:12px 16px}
.liverow .note{margin:0; flex:1; min-width:120px}
.liverow .btn, .liverow a.btn{margin-left:auto}
.livewho{display:flex; align-items:center; gap:9px; font-size:14px; flex-wrap:wrap}
/* Not .vs -- that is the worldcup bracket diamond, which would paint over this. */
.livewho .vscore{font-family:var(--mono); color:var(--dim); font-size:12.5px}
.result{font-family:var(--display); font-weight:800; font-size:15px; width:22px; text-align:center; flex:none}
.result.won{color:var(--teal)} .result.lost{color:var(--rose)}
.elo.up{color:var(--teal)} .elo.down{color:var(--rose)}

/* Guesses as they were made, live or in a replay. */
.feed{display:flex; flex-direction:column; gap:6px; margin-top:14px; min-height:64px}
.feedline{display:flex; align-items:baseline; gap:10px; font-size:14px; border-left:2px solid var(--line); padding-left:10px}
.feedline.miss{border-left-color:var(--rose)}
.feedline.right{border-left-color:var(--teal)}
.feedline .who{font-weight:700; color:var(--muted); flex:none}
.feedline .said{overflow-wrap:anywhere; color:var(--text)}
.feedline.miss .said{color:var(--muted); text-decoration:line-through}
.feedline .stamp{font-family:var(--mono); font-size:11.5px; color:var(--dim); flex:none; width:42px}
.feedline .mark{margin-left:auto; font-size:13px}
.feedline.right .mark{color:var(--teal)} .feedline.miss .mark{color:var(--rose)}

/* The replay's song picker. */
.roundstrip{display:flex; flex-wrap:wrap; gap:5px; margin-top:20px}
.rchip{font-family:var(--mono); font-size:12px; min-width:30px; padding:5px 7px; background:var(--surface);
  border:1px solid var(--line); color:var(--muted); cursor:pointer}
.rchip:hover{border-color:var(--muted); color:var(--text)}
.rchip.on{border-color:var(--gold); color:var(--gold)}
.rchip.l0{border-bottom-width:3px; border-bottom-color:var(--rose)}
.rchip.l1{border-top-width:3px; border-top-color:var(--rose)}
.autorow{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-left:auto}
button.volicon{background:none; border:none; cursor:pointer; padding:0 2px; font-size:15px; color:var(--dim)}
button.volicon:hover{color:var(--text)}
button.volicon[aria-pressed="true"]{color:var(--rose)}

/* Practice: pick a difficulty band, then play as long as you like. */
.bandwrap{margin-top:22px}
.bandrow{display:flex; flex-wrap:wrap; gap:7px}

.verified{color:var(--teal); font-size:12px; margin-left:5px}
input:disabled{opacity:.75; cursor:not-allowed}

/* AMQ verification. */
.amqcheck{color:var(--gold); font-size:13px; margin-left:6px}
.warnline{border-left:3px solid var(--gold); padding:8px 0 8px 12px; margin:14px 0 0; font-size:13.5px; color:var(--muted)}
.warnline b{color:var(--gold)}
.codebox{margin:12px 0}
.codebox code{font-family:var(--mono); font-size:20px; letter-spacing:.22em; background:var(--ink);
  border:1px solid var(--gold); color:var(--gold); padding:12px 18px; display:inline-block}
.gatebox{border:1px solid var(--gold); background:var(--surface); padding:20px 22px; margin-top:22px}
.gatebox .eyebrow{color:var(--gold)}

.bannedrow b{color:var(--rose)}
.subrow td{background:var(--surface2)}

.botname{color:var(--gold)}

@media (prefers-reduced-motion: reduce){
  .rkstage.grace{animation:none; box-shadow:inset 0 0 0 3px var(--rose); background:var(--roseGhost)}
}
/* match-found overlay */
.introwrap{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(8,5,14,.82); padding:20px}
.introcard{background:var(--surface); border:1px solid var(--gold); padding:30px 34px; text-align:center; max-width:520px; width:100%; box-shadow:var(--shadow)}
.introcard .eyebrow{color:var(--gold); margin:0 0 18px}
.introvs{display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap}
.introside{display:flex; flex-direction:column; align-items:center; gap:7px; min-width:110px}
.introside b{font-family:var(--display); font-weight:800; font-size:17px; overflow-wrap:anywhere}
.introx{font-family:var(--display); font-weight:800; font-size:22px; color:var(--muted)}
.introcount{font-family:var(--display); font-weight:800; font-size:64px; line-height:1; letter-spacing:-.03em; margin-top:18px; color:var(--gold); font-variant-numeric:tabular-nums}
.introcount.go{color:var(--teal)}
/* Chat rides inside the match-found card, and stays under the result afterwards. */
.introcard{max-height:calc(100vh - 40px); overflow-y:auto}
.introcard .chatbox{border:none; border-top:1px solid var(--line); background:none; margin-top:22px; padding:16px 0 0; text-align:left}
.introcard .chatlist{max-height:120px}
.matchover + .chatbox{border-top:1px solid var(--line); margin-bottom:24px}
.chatnote{margin:8px 0 0; font-size:12.5px; color:var(--dim); min-height:1em}
.chatrow input:disabled{opacity:.5; cursor:not-allowed}
@media (prefers-reduced-motion: no-preference){
  .introcard{animation:intropop .22s ease-out}
  @keyframes intropop{from{transform:scale(.94); opacity:0} to{transform:scale(1); opacity:1}}
}
/* Locked out after a wrong answer. */
.rkstage.penalty .combo input{border-color:var(--rose); color:var(--muted)}
.rkstage.penalty .combo input:focus{border-color:var(--rose)}
.stagefoot{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.btn.forfeit{margin-left:auto; color:var(--muted)}
.btn.forfeit:hover{color:var(--rose); border-color:var(--rose)}
.volrow{display:flex; align-items:center; gap:10px}
.volicon{color:var(--dim); font-size:15px}
.vollabel{font-family:var(--mono); font-size:11.5px; color:var(--dim); width:38px; font-variant-numeric:tabular-nums}
input[type=range].vol{-webkit-appearance:none; appearance:none; width:130px; height:4px; background:var(--track); outline:none; padding:0; border:none}
input[type=range].vol::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:var(--text); cursor:pointer; border:none}
input[type=range].vol::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:var(--text); cursor:pointer; border:none}
input[type=range].vol:focus-visible{outline:2px solid var(--gold); outline-offset:6px}
.timerow{display:flex; align-items:center; gap:16px}
.rkstatus{margin:16px 0 0; font-size:14.5px; min-height:1.4em; color:var(--muted)}
.rkstatus.good{color:var(--teal)} .rkstatus.bad{color:var(--rose)}
.rkstatus.urgent{color:var(--gold); font-weight:700}
.matchover{border:1px solid var(--gold); padding:24px; background:var(--surface); margin-bottom:24px}
.matchover.lost{border-color:var(--line)}
.matchover .eyebrow{color:var(--gold)} .matchover.lost .eyebrow{color:var(--muted)}
.matchover h2{font-family:var(--display); font-weight:800; font-size:clamp(22px,3.4vw,32px); letter-spacing:-.02em; margin:4px 0 6px}
.prov{color:var(--gold); font-weight:400; margin-left:2px}
.eloswing{font-family:var(--mono); font-size:18px; margin:14px 0 0; font-variant-numeric:tabular-nums}
.eloswing b{font-size:24px; color:var(--teal)}
.matchover.lost .eloswing b{color:var(--rose)}

.accepted{margin-top:18px; border-top:1px solid var(--line); padding-top:14px}
.accepted .eyebrow{margin:0 0 10px}
.titlepills{display:flex; flex-wrap:wrap; gap:6px; max-height:190px; overflow-y:auto}
.titlepills span{font-size:12.5px; border:1px solid var(--line); padding:4px 9px; color:var(--muted); background:var(--surface)}
.countdown{font-family:var(--mono); font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums}
/* Server update in progress: queue closed, running matches playing out. */
.maintbar{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-top:22px;
  border:1px solid var(--gold); border-left-width:4px; background:var(--surface); padding:14px 18px}
.maintbar b{font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:.02em; color:var(--gold); flex:none}
.maintbar span{font-size:13.5px; color:var(--muted)}
.maintbar.ready{border-color:var(--rose)}
.maintbar.ready b{color:var(--rose)}
.lbwrap{margin-top:26px}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}