/* ============================================================
   EIGEN · base.css
   Design tokens, reset, and page furniture shared by every page.
   Load order: base.css → sections.css → effects.css
   ============================================================ */

/* ---------- design tokens (light) ---------- */
:root{
  --ink:#36093d;            /* brand primary */
  --ink-deep:#1b031f;
  --ink-mid:#4b1355;
  --paper:#ffffff;
  --paper-tint:#f8f2fb;
  --muted:#5f3f6b;
  --violet:#7a1a8a;
  --violet-bright:#a34bb5;
  --violet-soft:#e3c2ff;
  --attack:#e0195a;
  --defend:#0a8fc2;
  --gold:#d98e00;
  --gold-bright:#ffc93e;

  /* the in-app card skin — deep purple in BOTH themes, it's the app's own look */
  --card:#2a0731;
  --card-line:rgba(199,125,255,.35);
  --card-dim:#a985ba;

  --font-display:'Unbounded', system-ui, sans-serif;
  --font-body:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --ease-out:cubic-bezier(.2,.8,.2,1);
}

/* ---------- design tokens (dark) ---------- */
html[data-theme="dark"]{
  --paper:#1b031f;
  --paper-tint:#2a0731;
  --muted:#cbb3d6;
  --violet:#c77dff;
  --violet-bright:#c77dff;
  --attack:#ff3e6c;
  --defend:#3ecfff;
  --gold:#ffc93e;
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  overflow-x:hidden;
  transition:background .4s ease,color .4s ease;
}
img,svg{max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
html[data-theme="dark"] ::selection{background:var(--violet);color:var(--ink-deep)}

/* ---------- rating scroll bar ---------- */
#ratingbar{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:linear-gradient(90deg,var(--violet-bright),var(--attack),var(--gold-bright));
  z-index:1000;box-shadow:0 1px 8px rgba(122,26,138,.4);
  transition:width .08s linear;
}
html[data-theme="dark"] #ratingbar{box-shadow:0 0 12px var(--violet)}

/* ---------- centered theme toggle ---------- */
.theme-toggle{
  position:fixed;top:14px;left:50%;z-index:1001;
  transform:translateX(-50%);
  width:66px;height:32px;padding:3px;border-radius:20px;cursor:pointer;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(54,9,61,.2);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(54,9,61,.18);
  transition:background .35s ease,border-color .35s ease,box-shadow .3s ease;
}
html[data-theme="dark"] .theme-toggle{
  background:rgba(42,7,49,.75);
  border-color:rgba(199,125,255,.4);
  box-shadow:0 6px 26px rgba(0,0,0,.5),0 0 22px rgba(199,125,255,.18);
}
.theme-toggle:hover{box-shadow:0 8px 30px rgba(122,26,138,.35)}
.theme-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.tt-track{display:block;position:relative;width:100%;height:100%}
.tt-knob{
  position:absolute;top:0;left:0;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--gold-bright),#e08b00);
  box-shadow:0 3px 10px rgba(217,142,0,.55);
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-out),background .4s ease,box-shadow .4s ease;
}
html[data-theme="dark"] .tt-knob{
  background:linear-gradient(145deg,#e9d8ff,#9a63c9);
  box-shadow:0 3px 12px rgba(199,125,255,.6);
  transform:translateX(34px) rotateY(180deg);
}
.tt-face{
  position:absolute;font-size:13px;line-height:1;
  backface-visibility:hidden;
}
.tt-moon{transform:rotateY(180deg)}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,0));
  backdrop-filter:blur(6px);
}
html[data-theme="dark"] nav{background:linear-gradient(180deg,rgba(27,3,31,.92),rgba(27,3,31,0))}
.nav-start{display:flex;align-items:center;gap:16px}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
html[data-theme="dark"] .nav-logo{color:#fff}
.nav-logo svg{width:38px;height:38px}
.nav-logo span{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:.18em}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{
  color:var(--violet);text-decoration:none;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .2s,text-shadow .2s;
}
.nav-links a:hover{color:var(--ink)}
html[data-theme="dark"] .nav-links a{color:var(--violet-soft)}
html[data-theme="dark"] .nav-links a:hover{color:#fff;text-shadow:0 0 14px var(--violet)}
.nav-cta{
  padding:10px 20px;border-radius:8px;
  color:#fff !important;background:var(--ink);border:1px solid var(--ink);
  box-shadow:0 6px 22px rgba(54,9,61,.28);
}
.nav-cta:hover{background:var(--violet);border-color:var(--violet)}
html[data-theme="dark"] .nav-cta{background:rgba(199,125,255,.08);border-color:var(--violet);box-shadow:none}
html[data-theme="dark"] .nav-cta:hover{background:var(--violet);color:var(--ink-deep) !important}
/* collapse the section links on small screens — but never the HUDs or the CTA */
@media(max-width:820px){.nav-links a:not(.nav-cta):not(.streak-hud){display:none}}
@media(max-width:520px){.nav-links a.nav-cta{display:none}}

/* ---------- live rating HUD ----------
   --tc is the tier colour. It resolves through the theme vars, so the
   HUD recolours correctly in dark mode; JS only sets [data-tier]. */
.rating-hud{
  --tc:#8d93a0;
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:10px;
  border:1px solid var(--tc);
  background:var(--paper);
  box-shadow:0 0 18px -3px var(--tc),inset 0 0 14px -8px var(--tc);
  font-family:var(--font-mono);line-height:1;
  text-decoration:none;cursor:pointer;
  transition:border-color .4s ease,box-shadow .4s ease,transform .2s var(--ease-out);
}
/* it links to the ranks section — make that feel clickable */
.rating-hud:hover{transform:translateY(-2px);box-shadow:0 0 26px -2px var(--tc),inset 0 0 14px -8px var(--tc)}
.rating-hud:active{transform:translateY(0)}
.rating-hud:focus-visible{outline:2px solid var(--tc);outline-offset:3px}
html[data-theme="dark"] .rating-hud{background:rgba(42,7,49,.6)}
.rating-hud[data-tier="npc"]{--tc:#8d93a0}
.rating-hud[data-tier="hustler"]{--tc:#b3772e}
.rating-hud[data-tier="tryhard"]{--tc:#7f9aa8}
.rating-hud[data-tier="gladiator"]{--tc:var(--violet-bright)}
.rating-hud[data-tier="warlord"]{--tc:var(--attack)}
.rating-hud[data-tier="titan"]{--tc:var(--defend)}
.rating-hud[data-tier="goated"]{--tc:var(--gold)}
.rh-label{font-size:8px;letter-spacing:.18em;color:var(--muted)}
.rh-val{
  font-size:19px;font-weight:700;color:var(--tc);
  text-shadow:0 0 14px var(--tc);
  font-variant-numeric:tabular-nums;
}
.rh-title{
  font-size:9px;letter-spacing:.14em;color:var(--tc);
  padding:4px 7px;border-radius:20px;
  background:color-mix(in srgb,var(--tc) 16%,transparent);
}
/* pulse + colour flash whenever the number moves */
.rating-hud.bump{animation:ratingBump .65s var(--ease-out)}
.rating-hud.up{animation:ratingBump .65s var(--ease-out),glowUp 1s ease-out}
.rating-hud.down{animation:ratingBump .65s var(--ease-out),glowDown 1s ease-out}
@keyframes ratingBump{
  0%{transform:scale(1)}
  35%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
@keyframes glowUp{
  0%,60%{box-shadow:0 0 30px -2px var(--tc),0 0 0 3px color-mix(in srgb,var(--tc) 35%,transparent)}
  100%{box-shadow:0 0 18px -3px var(--tc)}
}
@keyframes glowDown{
  0%,60%{box-shadow:0 0 30px -2px var(--attack),0 0 0 3px color-mix(in srgb,var(--attack) 35%,transparent)}
  100%{box-shadow:0 0 18px -3px var(--tc)}
}
@media(max-width:980px){.rh-label{display:none}}
@media(max-width:600px){.rating-hud{padding:5px 9px;gap:6px}.rh-title{display:none}}

/* ---------- live streak HUD (top right) ---------- */
.streak-hud{
  display:flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:10px;
  border:1px solid var(--gold);
  background:var(--paper);
  box-shadow:0 0 18px -3px var(--gold),inset 0 0 14px -8px var(--gold);
  font-family:var(--font-mono);line-height:1;
  text-decoration:none;cursor:pointer;
  transition:box-shadow .4s ease,transform .2s var(--ease-out);
}
html[data-theme="dark"] .streak-hud{background:rgba(42,7,49,.6)}
.streak-hud:hover{transform:translateY(-2px);box-shadow:0 0 26px -2px var(--gold),inset 0 0 14px -8px var(--gold)}
.streak-hud:active{transform:translateY(0)}
.streak-hud:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sh-flame{font-size:16px;filter:drop-shadow(0 0 8px rgba(217,142,0,.7));animation:flick .5s ease-in-out infinite alternate}
.sh-val{
  font-size:19px;font-weight:700;color:var(--gold);
  text-shadow:0 0 14px var(--gold);font-variant-numeric:tabular-nums;
}
.sh-label{font-size:7px;letter-spacing:.16em;color:var(--muted);line-height:1.35}
/* the flame + count kick whenever the streak extends */
.streak-hud.bump{animation:streakBump .7s var(--ease-out)}
.streak-hud.bump .sh-val{animation:streakPop .7s var(--ease-out)}
@keyframes streakBump{
  0%{transform:scale(1)}
  30%{transform:scale(1.16)}
  100%{transform:scale(1)}
}
@keyframes streakPop{
  0%{transform:translateY(0);opacity:1}
  35%{transform:translateY(-7px);opacity:.4}
  70%{transform:translateY(0);opacity:1;text-shadow:0 0 28px var(--gold)}
}
@media(max-width:980px){.sh-label{display:none}}
@media(max-width:600px){.streak-hud{padding:4px 9px;gap:5px}.sh-val{font-size:16px}}

/* ---------- shared section chrome ---------- */
section{position:relative;padding:120px clamp(20px,6vw,80px)}
.level-tag{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;
  color:var(--violet);text-transform:uppercase;margin-bottom:20px;
}
.level-tag::before{content:'';width:34px;height:1px;background:var(--violet)}
.level-tag .blink{animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
h2{
  font-family:var(--font-display);font-weight:900;color:var(--ink);
  font-size:clamp(30px,5vw,56px);line-height:1.08;
  text-transform:uppercase;margin-bottom:22px;
}
html[data-theme="dark"] h2{color:#fff}
h2 .glow{color:var(--violet);text-shadow:0 2px 24px rgba(163,75,181,.35)}
html[data-theme="dark"] h2 .glow{text-shadow:0 0 30px rgba(199,125,255,.6)}
.section-sub{max-width:560px;color:var(--muted);font-size:clamp(15px,1.4vw,18px)}
.centered{text-align:center}
.centered .level-tag{justify-content:center}
.centered .section-sub{margin-left:auto;margin-right:auto}

/* ---------- footer ---------- */
footer{
  border-top:1px solid rgba(54,9,61,.15);
  padding:34px clamp(20px,6vw,80px);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);
  background:var(--paper);
}
html[data-theme="dark"] footer{border-color:rgba(199,125,255,.2);background:var(--card);color:#cbb3d6}
footer a{color:var(--violet);text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline}
html[data-theme="dark"] footer a:hover{color:#fff}
.foot-eq{color:#a888b3}