/* ChemRage identity — the ONE stylesheet every page shares.

   Dark only by design: this runs beside a dark game, and the palette
   is tuned against one ground. Cues from the game's HUD: warm
   near-black with a brown bias rather than blue slate, burnished
   bronze for structure and action, Radiant green and Dire red as the
   only other saturated colours. Ported from
   dota-draft-product/prototypes/_dota.css.

   Scope: tokens, the type/ground of the page, and the handful of
   components that appear on more than one page (chip, hint, bar,
   btn, eyebrow, mono). Page layout stays in each page's own <style>.
   Before 2026-09-04 every page (and the stats site) carried its own
   copy of this block and they drifted — the tool page had grown a
   different body font, radii and button; the stats build shipped a
   stale header. One file, served from /chemrage.css, ends that.
   wrColor() is NOT themed: it encodes win rate and must stay the same
   ramp everywhere. */

@font-face { font-family:"Cinzel"; font-weight:400 900; font-display:swap;
  src:url(/cinzel.woff2) format("woff2"); }

:root {
  color-scheme:dark;
  --page:#0c0a08; --surface:#171310; --surface-2:#1e1813;
  --ink:#f0e6d6; --ink-2:#c2b199; --muted:#93826c;
  --line:#3a2e21; --line-2:#5c4830;
  --gold:#c9a25e; --gold-2:#e6c489; --gold-ink:#14100c;
  --radiant:#74b355; --radiant-dim:rgba(116,179,85,.18);
  --dire:#c9564c;
  --seq:#c9a25e; --seq-track:#3a2e21;
  --r:3px;
  --display:"Cinzel",Georgia,serif;
  --mono:ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  background-image:radial-gradient(120% 80% at 50% 0%,
    rgba(201,162,94,.07) 0%,transparent 55%);background-attachment:fixed;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--display);font-weight:700;line-height:1.14}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
button:disabled{opacity:.5;cursor:default}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--display);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.sp{flex:1}
.hint{color:var(--muted);font-size:12.5px}
.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-bottom:12px}
.chip{border:1px solid var(--line);border-radius:999px;padding:3px 12px;
  font-size:12.5px;color:var(--muted);white-space:nowrap}
.chip.live,.chip.win{border-color:var(--radiant);color:var(--radiant)}
.chip.warn{border-color:var(--gold);color:var(--gold)}
.chip.loss{border-color:var(--dire);color:var(--dire)}
.chip.code{font-family:var(--mono);color:var(--gold);border-color:var(--gold)}

/* Buttons: .btn is the outlined default, .btn.gold the one primary
   action on a page, .btn.steam the sign-in. Bare <button> is left
   unshaped on purpose — pages build slots, tiles and rows out of it. */
.btn{border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink);padding:9px 16px;font-weight:600;font-size:14px;
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--r)}
.btn:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}
.btn.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:var(--gold-ink);border-color:var(--gold);font-weight:700}
.btn.gold:hover{filter:brightness(1.08);color:var(--gold-ink)}
.btn.steam{background:linear-gradient(180deg,#2a475e,#1b2838);
  color:#d7e3ee;border-color:#3d6285}
.btn.steam:hover{filter:brightness(1.15);color:#fff}