/* THE LAST QUEST — landing page.
   Clean pixel construction: no rounded corners anywhere, every "border" is a
   ring of hard box-shadows so it stays crisp at any zoom, and every transition
   steps instead of easing. Dark rift theme pulled straight off the key art —
   deep violet ground, gold for anything you can press, rift-green for anything
   the game gives you back. */

:root {
  /* ground */
  --void:    #100a1c;
  --void-2:  #150e26;
  --tint:    #171029;
  --panel:   #1c1332;
  --panel-2: #241940;
  --line:    #33255c;
  --line-2:  #261c48;
  --edge:    #090613;

  /* gold — the press-me colour */
  --gold:      #f5c542;
  --gold-d:    #a87a15;
  --gold-t:    #ffd863;
  --gold-glow: rgba(245, 197, 66, .16);
  --on-gold:   #241703;

  /* the rift, and the rest of the loot ladder */
  --rift:   #3ce08a;
  --rift-d: #1d8f57;
  --arcane: #b06cf0;
  --ember:  #ff9d2e;
  --blood:  #e8455f;
  --steel:  #8fa4c8;

  /* type */
  --pixel: "Press Start 2P", monospace;
  --read:  "VT323", "Silkscreen", monospace;
  --label: "Silkscreen", monospace;
  --text:  #efe6cf;
  --soft:  #a99fc9;
  --dim:   #7b6ea3;

  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--read);
  font-size: 21px;
  line-height: 1.5;
  overflow-x: hidden;
  font-variant-ligatures: none;
  -webkit-font-smoothing: none;
}
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--gold-t); }
b { font-weight: 400; color: var(--text); }
.gold { color: var(--gold-t); }
.rift { color: var(--rift); }
.arcane { color: var(--arcane); }
::selection { background: var(--gold); color: var(--on-gold); }

.cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ── nav — a plank across the top of the citadel ─────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 11px clamp(14px, 4vw, 42px);
  background: var(--panel);
  border-bottom: 3px solid var(--gold-d);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand canvas { width: 34px; height: 34px; display: block; flex: none; }
.brand .bname {
  font-family: var(--pixel); font-size: 12px; color: var(--gold-t);
  text-shadow: 2px 2px 0 var(--edge); letter-spacing: .5px; white-space: nowrap;
}
.nav-links {
  display: flex; align-items: center; gap: 18px;
  position: absolute; left: 50%; transform: translateX(-50%);
}
.nav-links a {
  font-family: var(--pixel); font-size: 9px; letter-spacing: .5px;
  color: var(--soft); text-decoration: none; padding: 6px 2px;
}
.nav-links a:hover { color: var(--gold-t); }
.nav-links i { width: 4px; height: 4px; background: var(--line); display: inline-block; }
.nav-right { display: flex; align-items: center; gap: 12px; }

.chip {
  font-family: var(--pixel); font-size: 8px; letter-spacing: .5px;
  color: var(--rift);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--void);
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
.chip i {
  width: 8px; height: 8px; background: var(--rift); display: inline-block;
  animation: blink 1.2s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--pixel); font-size: 12px;
  color: var(--on-gold); background: var(--gold);
  border: 0; cursor: pointer; text-decoration: none;
  display: inline-block; padding: 14px 20px;
  box-shadow:
    0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold),
    -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold),
    0 6px 0 0 var(--gold-d), -3px 3px 0 0 var(--gold-d), 3px 3px 0 0 var(--gold-d);
  transition: transform .06s steps(2), filter .12s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold),
             -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold);
}
.btn:disabled, .btn:disabled:hover {
  cursor: default; transform: none; filter: saturate(.2) brightness(.72);
}
.btn--sm  { font-size: 9px;  padding: 10px 12px; }
.btn--big { font-size: 13px; padding: 18px 24px; }
.btn--ghost {
  background: var(--panel); color: var(--gold-t);
  box-shadow:
    0 -3px 0 0 var(--panel), 0 3px 0 0 var(--panel),
    -3px 0 0 0 var(--panel), 3px 0 0 0 var(--panel),
    0 0 0 3px var(--panel),
    0 -6px 0 0 var(--line), 0 6px 0 0 var(--line),
    -6px 0 0 0 var(--line), 6px 0 0 0 var(--line);
}
.btn--ghost:hover { color: #fff; }
.btn--rift {
  color: #06210f; background: var(--rift);
  box-shadow:
    0 -3px 0 0 var(--rift), 0 3px 0 0 var(--rift),
    -3px 0 0 0 var(--rift), 3px 0 0 0 var(--rift),
    0 6px 0 0 var(--rift-d), -3px 3px 0 0 var(--rift-d), 3px 3px 0 0 var(--rift-d);
}
.btn--rift:active {
  box-shadow: 0 -3px 0 0 var(--rift), 0 3px 0 0 var(--rift),
             -3px 0 0 0 var(--rift), 3px 0 0 0 var(--rift);
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #2a1147 0%, rgba(42,17,71,0) 60%),
    linear-gradient(180deg, var(--void-2) 0%, #180f2b 55%, var(--void) 100%);
}
/* the key art, blurred back into a mood bed behind the real one */
.hero::before {
  content: ''; position: absolute; inset: -20px;
  background: url('/assets/ui/web_hero.jpg') center 40% / cover no-repeat;
  filter: blur(9px) saturate(1.15); opacity: .22;
  image-rendering: auto;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,10,28,.55) 0%, rgba(16,10,28,.35) 40%, var(--void) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: clamp(30px, 6vh, 60px) 20px 10px; }

.logo, .wordmark, .tag, .ctas, .domain, .scroll-hint, .hero-steps, .mint-progress { opacity: 0; }
.keyart {
  display: block; margin: 0 auto;
  /* Wider than the art it replaced (21:9, not 16:9), so it gets more width to
     keep the same presence on the page rather than reading as a thin strip. */
  width: min(900px, 92vw); height: auto;
  /* Smoothed, not nearest-neighbour: this is a 3200px pixel-art render being
     scaled DOWN past its own pixel grid, where snapping produces shimmer. */
  image-rendering: auto;
  box-shadow:
    0 -4px 0 0 var(--gold), 0 4px 0 0 var(--gold),
    -4px 0 0 0 var(--gold), 4px 0 0 0 var(--gold),
    0 0 0 4px var(--edge),
    0 14px 0 0 rgba(245, 197, 66, .18),
    0 18px 60px rgba(0, 0, 0, .7);
}
html.ready .logo { animation: settle .7s steps(6) both; }
@keyframes settle {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.wordmark {
  font-family: var(--pixel); font-size: clamp(10px, 2vw, 14px);
  color: var(--rift); margin-top: 30px; letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--edge);
}
html.ready .wordmark { animation: settle .7s steps(6) .12s both; }
.tag {
  font-size: clamp(20px, 2.5vw, 25px); color: var(--soft);
  max-width: 700px; margin: 22px auto 0;
}
html.ready .tag { animation: settle .7s steps(6) .22s both; }
.tag b { color: var(--text); }
/* Pre-launch strip: minting is open, the realm is not. Sits above the CTAs so
   it is read before the button is pressed, and is [hidden] until the server
   confirms the gate is shut (see paintBetaNotice in onboard.js) — a banner that
   flashed on every load and then vanished would read as a glitch. */
.beta-banner {
  max-width: 560px; margin: 30px auto 0; padding: 12px 16px;
  background: rgba(9, 6, 19, .72);
  box-shadow: 0 -2px 0 0 var(--ember), 0 2px 0 0 var(--ember),
             -2px 0 0 0 var(--ember), 2px 0 0 0 var(--ember);
}
.beta-banner[hidden] { display: none; }
.beta-banner b {
  display: block; font-family: var(--pixel); font-size: 10px;
  color: var(--ember); letter-spacing: .5px; line-height: 1.7;
}
.beta-banner span { display: block; margin-top: 8px; font-size: 18px; color: var(--soft); }

.ctas { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
html.ready .ctas { animation: settle .7s steps(6) .32s both; }

/* the scarcity bar — "N / cap minted", visible to anyone who lands on the page,
   not gated behind reaching the forge. See paintMintProgress() in onboard.js. */
.mint-progress { max-width: 420px; margin: 30px auto 0; }
html.ready .mint-progress { animation: settle .7s steps(6) .35s both; }
.mint-progress-track {
  height: 14px; background: var(--void);
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
  overflow: hidden;
}
.mint-progress-fill {
  height: 100%; width: 0%; background: var(--rift);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25);
  transition: width .6s steps(16);
}
.mint-progress-fill.paid     { background: var(--gold); }
.mint-progress-fill.sold-out { background: var(--blood); }
.mint-progress-label {
  font-family: var(--pixel); font-size: 9px; color: var(--soft);
  letter-spacing: .5px; margin-top: 9px;
}

.hero-steps { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
html.ready .hero-steps { animation: settle .7s steps(6) .38s both; }
.hpill {
  font-family: var(--pixel); font-size: 8px; letter-spacing: .5px;
  color: var(--soft); background: var(--panel);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px;
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
.hpill b { color: var(--gold-t); }
.hpill-sep { font-family: var(--pixel); font-size: 10px; color: var(--line); align-self: center; }

.domain {
  font-family: var(--pixel); font-size: 10px; color: var(--dim);
  margin-top: 28px; letter-spacing: 1px; line-height: 2;
}
html.ready .domain { animation: settle .7s steps(6) .42s both; }
.scroll-hint { font-size: 19px; color: var(--dim); margin-top: 8px; }
html.ready .scroll-hint { animation: settle .7s steps(6) .5s both; }
.scroll-hint .arrow { display: inline-block; color: var(--rift); animation: bob 1.4s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* the field strip — sprites patrolling the bottom of the hero */
.field {
  display: block; width: 100%; position: relative; z-index: 1;
  margin-top: 14px; cursor: crosshair;
}
.hero-hint {
  position: absolute; right: 14px; bottom: 10px; z-index: 3;
  font-size: 18px; color: var(--gold-t);
  background: rgba(16, 10, 28, .78); padding: 3px 9px; pointer-events: none;
}

/* ── ticker ──────────────────────────────────────────────────────────────── */
.ticker {
  background: var(--gold); overflow: hidden; contain: content;
  border-top: 3px solid var(--gold-d); border-bottom: 3px solid var(--gold-d);
}
.ticker-track {
  display: inline-flex; white-space: nowrap; padding: 9px 0;
  animation: tick 34s linear infinite; will-change: transform;
}
.ticker-track span {
  font-family: var(--read); font-size: 21px; color: var(--on-gold);
  padding: 0 34px; letter-spacing: 1px;
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ── facts strip ─────────────────────────────────────────────────────────── */
.strip {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 6vw, 84px);
  padding: 34px 20px; background: var(--panel);
  border-bottom: 2px solid var(--line);
}
.stat { text-align: center; }
.stat b {
  font-family: var(--pixel); font-size: clamp(15px, 2.4vw, 22px);
  color: var(--gold-t); display: block; text-shadow: 2px 2px 0 var(--edge);
}
.stat b.r { color: var(--rift); }
.stat > span {
  font-family: var(--label); font-size: 12px; color: var(--soft);
  text-transform: uppercase; letter-spacing: 1px;
  display: block; margin-top: 8px;
}

/* ── sections ────────────────────────────────────────────────────────────── */
.section { padding: clamp(60px, 10vh, 104px) 20px; background: var(--void); }
.section--tint { background: var(--tint); }
.container { max-width: 1120px; margin: 0 auto; }
.kicker {
  font-family: var(--pixel); font-size: 10px; color: var(--rift);
  letter-spacing: 2px; margin-bottom: 16px;
}
h2 {
  font-family: var(--pixel); font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.6; color: var(--gold-t); margin-bottom: 18px;
  text-shadow: 3px 3px 0 var(--edge);
}
.lead { font-size: clamp(20px, 2.3vw, 24px); color: var(--soft); max-width: 800px; }
.lead b { color: var(--text); }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.card {
  position: relative; background: var(--panel); padding: 26px 22px 24px;
  box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line),
             -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
  transition: transform .12s steps(3), box-shadow .12s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold),
             -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold),
              0 10px 0 0 var(--gold-glow);
}
.card-num {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--pixel); font-size: 10px; color: var(--line);
}
.card:hover .card-num { color: var(--gold-t); }
.card canvas { width: 64px; height: 64px; display: block; margin-bottom: 14px; }
.card h3 { font-family: var(--pixel); font-size: 12px; color: var(--gold-t); margin-bottom: 12px; line-height: 1.6; }
.card p { font-size: 19px; color: var(--soft); }

/* ── zigzag dividers ─────────────────────────────────────────────────────── */
.zig { height: 14px; background-repeat: repeat-x; background-size: 28px 14px; }
.zig--down {
  background-color: var(--tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 0h14v7h7v7H14 0z' fill='%23100a1c'/%3E%3C/svg%3E");
}
.zig--up {
  background-color: var(--tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14h14V7h7V0h7v14z' fill='%23100a1c'/%3E%3C/svg%3E");
}

/* ── the hero forge — connect, cut, name, share ──────────────────────────── */
.forge-panel {
  margin-top: 44px; padding: 30px 26px 32px; background: var(--panel);
  box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold),
             -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold),
              0 12px 0 0 var(--gold-glow);
}
.steps { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.steppill {
  font-family: var(--pixel); font-size: 8px; letter-spacing: .5px;
  color: var(--dim); background: var(--void);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px;
  box-shadow: 0 -2px 0 0 var(--line-2), 0 2px 0 0 var(--line-2),
             -2px 0 0 0 var(--line-2), 2px 0 0 0 var(--line-2);
}
.steppill b { color: var(--line); }
.steppill.on {
  color: var(--on-gold); background: var(--gold);
  box-shadow: 0 -2px 0 0 var(--gold), 0 2px 0 0 var(--gold),
             -2px 0 0 0 var(--gold), 2px 0 0 0 var(--gold), 0 4px 0 0 var(--gold-d);
}
.steppill.on b { color: var(--on-gold); }
.steppill.done { color: var(--rift); background: var(--void); }
.steppill.done b { color: var(--rift); }

.fstep { display: none; }
.fstep.on { display: block; }

/* Step 5 — the hero is minted. This is the only step that isn't a form, so it
   gets the world behind it: the same rift scene as the banner with every
   creature stripped out, which is exactly why that variant exists. An empty
   backdrop means the player's own hero on the card is the only character on
   screen; the populated banner would have put eighteen others next to it.
   The scrim is heavy on purpose — this is a bed for text, not a picture. */
.fstep--minted.on {
  position: relative;
  padding: 26px 22px 28px;
  background: url('/assets/ui/mint_bg.jpg') center 60% / cover no-repeat;
  box-shadow: inset 0 0 0 3px var(--gold);
}
.fstep--minted.on::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 10, 28, .90) 0%, rgba(16, 10, 28, .84) 40%, rgba(16, 10, 28, .93) 100%);
}
/* Lift the real content over the scrim. */
.fstep--minted.on > * { position: relative; z-index: 1; }

/* The muted greys on this panel were chosen against a flat --panel fill. Over
   an image even a heavy scrim leaves bright spots — the portal glow and the
   clouds — and measured against the brightest of them the fine print fell to
   1.7:1, which is not readable. These two are lifted for this step only. */
.fstep--minted.on .fstep-sub { color: #cfc7e8; }
.fstep--minted.on .fg-fine   { color: #a79cd0; }
.fstep-title {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--pixel); font-size: 13px; color: var(--gold-t);
  line-height: 1.6; margin-bottom: 14px;
}
.fstep-title b { color: var(--rift); font-weight: 400; }
.snum {
  font-family: var(--pixel); font-size: 12px; color: var(--on-gold);
  background: var(--gold); padding: 8px 11px; box-shadow: 0 3px 0 0 var(--gold-d);
}
.fstep-sub { font-size: 20px; color: var(--soft); max-width: 660px; margin-bottom: 22px; }
.fstep-sub b { color: var(--gold-t); }

.fg-note { font-size: 18px; margin-top: 14px; min-height: 24px; color: var(--soft); }
.fg-note.err { color: var(--blood); }
.fg-note.ok  { color: var(--rift); }
.fg-fine { font-size: 16px; color: var(--dim); margin-top: 14px; }
.fg-fine a { color: var(--soft); }

.fg-conn {
  display: none; align-items: center; gap: 10px; margin-top: 18px;
  width: fit-content; padding: 10px 14px; background: var(--void);
  box-shadow: 0 -2px 0 0 var(--rift), 0 2px 0 0 var(--rift),
             -2px 0 0 0 var(--rift), 2px 0 0 0 var(--rift);
}
.fg-conn.on { display: flex; }
.fg-conn .dot { width: 8px; height: 8px; background: var(--rift); }
.fg-conn b { font-family: var(--pixel); font-size: 10px; color: var(--rift); }
.fg-conn button {
  background: none; border: 0; cursor: pointer; color: var(--dim);
  font-size: 16px; line-height: 1; padding: 0 0 0 6px;
}
.fg-conn button:hover { color: var(--blood); }

/* the quest board */
.qgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 4px;
}
.qcard {
  position: relative; background: var(--void); padding: 22px 16px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
  transition: box-shadow .12s;
}
/* the one you're meant to do next quietly asks for it */
.qcard.next {
  box-shadow: 0 -2px 0 0 var(--gold), 0 2px 0 0 var(--gold),
             -2px 0 0 0 var(--gold), 2px 0 0 0 var(--gold);
}
.qcard.done {
  box-shadow: 0 -2px 0 0 var(--rift), 0 2px 0 0 var(--rift),
             -2px 0 0 0 var(--rift), 2px 0 0 0 var(--rift);
}
.qcard .q-n {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--pixel); font-size: 9px; color: var(--on-gold);
  background: var(--line); padding: 5px 8px; color: var(--soft);
}
.qcard.next .q-n { background: var(--gold); color: var(--on-gold); }
.qcard.done .q-n { background: var(--rift); color: #06210f; }
.qcard h4 { font-family: var(--pixel); font-size: 11px; color: var(--text); margin-top: 4px; }
.qcard p { font-size: 17px; line-height: 1.35; color: var(--soft); flex: 1; }
.qcard .btn { width: 100%; text-align: center; }
.qcard .q-state {
  font-family: var(--pixel); font-size: 9px; letter-spacing: .5px;
  padding: 12px 0 9px; width: 100%;
}
.qcard .q-state.wait { color: var(--gold); animation: blink 1s steps(2, start) infinite; }
.qcard .q-state.ok   { color: var(--rift); }

/* the mint price line */
.fg-price {
  font-size: 19px; margin: 0 0 14px; padding: 11px 14px;
  background: var(--void); border-left: 3px solid var(--line);
}
.fg-price:empty { display: none; }
.fg-price.free { color: var(--rift); border-left-color: var(--rift); }
.fg-price.paid { color: var(--gold-t); border-left-color: var(--gold); }
/* Comes after .paid on purpose — a sold-out box also carries the .paid class
   (see paintMintPrice in onboard.js) and needs to win the cascade over it. */
.fg-price.sold-out { color: var(--blood); border-left-color: var(--blood); }

/* the creator */
.fg-creator {
  display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 26px;
  align-items: start; margin-bottom: 24px;
}
.fg-creator.locked { opacity: .8; }
.fg-stage { text-align: center; }
#fg-preview {
  display: block; width: 200px; height: 256px; margin: 0 auto 10px;
  image-rendering: pixelated;
  box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line),
             -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
}
.fg-creator.locked #fg-preview {
  box-shadow: 0 -3px 0 0 var(--rift), 0 3px 0 0 var(--rift),
             -3px 0 0 0 var(--rift), 3px 0 0 0 var(--rift);
}
#fg-random {
  font-family: var(--pixel); font-size: 8px; color: var(--soft);
  background: var(--void); border: 0; cursor: pointer; padding: 10px 12px;
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
#fg-random:hover:not(:disabled) { color: var(--gold-t); }
#fg-random:disabled { opacity: .4; cursor: default; }

.fg-controls { display: grid; gap: 12px; font-family: var(--pixel); font-size: 8px; color: var(--soft); }
.fg-slider { display: grid; grid-template-columns: 74px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.fg-slider input[type=range] { width: 100%; accent-color: var(--gold); }
.fg-slider b { font-weight: 400; color: var(--dim); text-align: right; }
.fg-lock { cursor: pointer; user-select: none; white-space: nowrap; }
.fg-lock input { position: absolute; opacity: 0; }
.fg-lock > span::after { content: "[ ]"; margin-right: 4px; color: var(--dim); }
.fg-lock > input:checked + span::after { content: "[L]"; color: var(--gold-t); }

.fg-pal { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.fg-pal b { font-weight: 400; color: var(--dim); }
.fg-pal-items { display: flex; flex-wrap: wrap; }
.fg-sw { width: 24px; height: 24px; padding: 0; border: 1px solid var(--edge); cursor: pointer; margin: -1px 0 0 -1px; }
.fg-sw:hover:not(:disabled) { outline: 3px solid #fff; position: relative; z-index: 2; }
.fg-sw.active { outline: 2px solid var(--gold); position: relative; z-index: 1; }
.fg-outline { display: flex; align-items: center; gap: 10px; }
.fg-outline input[type=color] { width: 46px; height: 24px; padding: 0; border: 1px solid var(--line); background: var(--void); cursor: pointer; }

/* the name */
.fg-field { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; position: relative; }
#fg-name {
  font-family: var(--read); font-size: 24px; color: var(--text);
  background: var(--void); border: 0; padding: 13px 40px 13px 15px;
  flex: 1 1 260px; min-width: 200px; max-width: 380px; outline: none;
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
#fg-name:focus {
  box-shadow: 0 -2px 0 0 var(--gold), 0 2px 0 0 var(--gold),
             -2px 0 0 0 var(--gold), 2px 0 0 0 var(--gold);
}
#fg-name::placeholder { color: var(--dim); }
#fg-avail { position: absolute; left: 340px; font-size: 22px; color: var(--soft); }
#fg-avail[data-state=ok] { color: var(--rift); }
#fg-avail[data-state=no] { color: var(--blood); }

/* the card */
#fg-card {
  display: block; width: 100%; height: auto; margin-bottom: 24px;
  box-shadow: 0 -3px 0 0 var(--gold), 0 3px 0 0 var(--gold),
             -3px 0 0 0 var(--gold), 3px 0 0 0 var(--gold),
              0 12px 0 0 var(--gold-glow);
}
.fg-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn--x {
  color: #fff; background: var(--edge);
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge),
             -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge),
              0 6px 0 0 #000, -3px 3px 0 0 #000, 3px 3px 0 0 #000;
}
.btn--x:active {
  box-shadow: 0 -3px 0 0 var(--edge), 0 3px 0 0 var(--edge),
             -3px 0 0 0 var(--edge), 3px 0 0 0 var(--edge);
}

/* ── the forge — one dark cabinet, six tiers ─────────────────────────────── */
.forge {
  position: relative; margin-top: 46px; padding: 30px 26px 32px;
  background: linear-gradient(180deg, #2a1030 0%, #1b0d24 55%, #24122c 100%);
  box-shadow:
    0 -4px 0 0 var(--ember), 0 4px 0 0 var(--ember),
    -4px 0 0 0 var(--ember), 4px 0 0 0 var(--ember),
    0 12px 0 0 rgba(255, 157, 46, .16);
}
.forge-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px; margin-bottom: 8px;
}
.forge-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--pixel); font-size: 14px; color: var(--ember);
  text-shadow: 2px 2px 0 var(--edge);
}
.forge-title canvas { width: 58px; height: 50px; }
.forge-sub { font-size: 20px; color: var(--soft); max-width: 640px; margin: 6px 0 24px; }
.forge-sub b { color: var(--ember); }

.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rung {
  text-align: center; padding: 18px 8px 14px; background: rgba(9, 6, 19, .55);
  box-shadow: 0 -2px 0 0 var(--tcol), 0 2px 0 0 var(--tcol),
             -2px 0 0 0 var(--tcol), 2px 0 0 0 var(--tcol);
  transition: transform .12s steps(3);
}
.rung:hover { transform: translateY(-4px); }
/* The bag art is a 128px drawing, not a 16px sprite, so it is scaled DOWN to
   sit here. The global `image-rendering: pixelated` would nearest-neighbour
   that reduction and chew the drawstring off — this is the one place on the
   page that wants the browser's smooth filter, same as the key art. */
.rung img {
  width: 56px; height: 56px; display: block; margin: 0 auto 10px;
  image-rendering: auto;
}
.rung .r-t { font-family: var(--pixel); font-size: 11px; color: var(--tcol); display: block; }
.rung .r-n { font-family: var(--label); font-size: 12px; color: var(--soft); display: block; margin-top: 8px; letter-spacing: .5px; }
.forge-note { margin-top: 26px; text-align: center; font-size: 20px; color: var(--soft); }
.forge-note b { color: var(--gold-t); }

/* ── play to earn ────────────────────────────────────────────────────────── */
/* $QUEST wears --rift throughout: the same green the game paints the token in,
   so the colour means one thing on both sides of the door. */
b.q, .lead b.q { color: var(--rift); }

.cur-pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; margin-top: 40px;
}
.cur {
  padding: 24px 22px; background: var(--panel);
  box-shadow: 0 -3px 0 0 var(--tcol), 0 3px 0 0 var(--tcol),
             -3px 0 0 0 var(--tcol), 3px 0 0 0 var(--tcol);
}
.cur--gold  { --tcol: var(--gold-d); }
.cur--quest { --tcol: var(--rift-d); }
.cur-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.cur-name { font-family: var(--pixel); font-size: 15px; }
.cur--gold  .cur-name { color: var(--gold-t); }
.cur--quest .cur-name { color: var(--rift); }
.cur-tag {
  font-family: var(--label); font-size: 12px; letter-spacing: .5px;
  color: var(--soft); text-transform: uppercase;
}
.cur ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.cur li { font-size: 18px; color: var(--soft); padding-left: 18px; position: relative; line-height: 1.55; }
.cur li::before { content: "▸"; position: absolute; left: 0; color: var(--tcol); }
.cur li b { color: var(--text); }

/* the three routes to the token */
.ways { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.way {
  padding: 24px 22px; background: var(--panel);
  box-shadow: 0 -3px 0 0 var(--line-2), 0 3px 0 0 var(--line-2),
             -3px 0 0 0 var(--line-2), 3px 0 0 0 var(--line-2);
}
.way-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.way-n { font-family: var(--pixel); font-size: 11px; color: var(--gold-d); }
.way-head b { font-family: var(--pixel); font-size: 13px; color: var(--gold-t); }
.way > p { font-size: 18px; color: var(--soft); line-height: 1.6; }
.way > p em { color: var(--text); font-style: normal; }

/* the exchange rate, read as one line */
.rate {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px;
  margin: 20px 0 12px; padding: 20px 16px; background: var(--void-2);
}
.rate-a, .rate-b { font-family: var(--pixel); font-size: 15px; }
.rate-a { color: var(--gold-t); }
.rate-b { color: var(--rift); }
.rate-arrow { font-family: var(--pixel); font-size: 15px; color: var(--dim); }
.rate-note { margin-top: 10px; font-size: 15px; color: var(--dim); line-height: 1.55; }

/* the prize ladder */
.ranks {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 20px 0 12px;
}
.rank {
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 14px 10px; background: var(--void-2);
}
.rank b { font-family: var(--pixel); font-size: 11px; color: var(--soft); }
.rank .r1 { color: #ffd863; }
.rank .r2 { color: #d7d7e4; }
.rank .r3 { color: #d8974a; }
.rank span { font-family: var(--label); font-size: 13px; color: var(--rift); letter-spacing: .5px; }

/* the worked example — a real contract, priced as the board actually prices it */
.contract {
  margin-top: 20px; padding: 22px 22px 20px; background: var(--void-2);
  box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line),
             -3px 0 0 0 var(--line), 3px 0 0 0 var(--line);
}
.contract-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.contract-name { font-family: var(--pixel); font-size: 13px; color: var(--gold-t); }
.pays { display: flex; gap: 8px; flex-wrap: wrap; }
.pay {
  font-family: var(--pixel); font-size: 10px; padding: 7px 11px;
  border: 2px solid var(--pc); color: var(--pc); background: var(--pbg); white-space: nowrap;
}
.pay--gold  { --pc: var(--gold-d); --pbg: #33291a; color: var(--gold-t); }
.pay--quest { --pc: var(--rift-d); --pbg: #11302a; color: var(--rift); }
.obj {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line-2);
  font-size: 18px; color: var(--soft);
}
.obj b { font-family: var(--pixel); font-size: 10px; color: var(--rift); white-space: nowrap; }
.contract-note {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 17px; color: var(--soft); line-height: 1.65;
}

.earn-steps {
  list-style: none; counter-reset: step; margin-top: 36px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.earn-steps li {
  counter-increment: step; position: relative;
  padding: 16px 16px 16px 52px; background: var(--panel);
  font-size: 17px; color: var(--soft); line-height: 1.55;
}
.earn-steps li::before {
  content: "0" counter(step); position: absolute; left: 16px; top: 16px;
  font-family: var(--pixel); font-size: 11px; color: var(--gold-d);
}
.earn-steps li b { color: var(--text); display: block; margin-bottom: 4px; }
.earn-fine {
  margin-top: 26px; font-size: 15px; color: var(--dim); line-height: 1.6;
  text-align: center;
}

/* ── bestiary ────────────────────────────────────────────────────────────── */
.mob-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 14px; margin-top: 42px;
}
.mob {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 8px 14px; background: var(--panel);
  box-shadow: 0 -2px 0 0 var(--line-2), 0 2px 0 0 var(--line-2),
             -2px 0 0 0 var(--line-2), 2px 0 0 0 var(--line-2);
  transition: transform .12s steps(3), box-shadow .12s;
}
.mob:hover {
  transform: translateY(-4px);
  box-shadow: 0 -2px 0 0 var(--blood), 0 2px 0 0 var(--blood),
             -2px 0 0 0 var(--blood), 2px 0 0 0 var(--blood);
}
.mob canvas { width: 62px; height: 62px; }
.mob span { font-family: var(--label); font-size: 12px; color: var(--soft); letter-spacing: .5px; text-align: center; }
.mob:hover span { color: var(--text); }

.pets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 42px; }
.pet {
  text-align: center; padding: 20px 12px 16px; background: var(--panel-2);
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
.pet canvas { width: 60px; height: 60px; display: block; margin: 0 auto 10px; }
.pet h4 { font-family: var(--pixel); font-size: 10px; color: var(--pcol, var(--gold-t)); margin-bottom: 8px; }
.pet p { font-size: 17px; color: var(--soft); line-height: 1.35; }

/* ── faq ─────────────────────────────────────────────────────────────────── */
.faqs { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
details {
  background: var(--panel);
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line),
             -2px 0 0 0 var(--line), 2px 0 0 0 var(--line);
}
summary {
  cursor: pointer; list-style: none; font-size: 22px; color: var(--text);
  padding: 16px 18px; display: flex; align-items: center; gap: 12px;
}
summary::-webkit-details-marker { display: none; }
summary::before { content: '▸'; color: var(--rift); font-size: 18px; transition: transform .1s steps(2); }
details[open] summary::before { transform: rotate(90deg); }
details p { padding: 0 20px 18px 44px; color: var(--soft); font-size: 20px; }
.faq-foot { margin-top: 28px; font-size: 20px; color: var(--soft); }

/* ── footer — dusk over the citadel ──────────────────────────────────────── */
.footer { background: linear-gradient(180deg, #150d24 0%, #0b0714 100%); color: var(--text); }
.dusk { display: block; width: 100%; }
.foot-grid {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); padding: 42px 20px 30px;
}
.foot-brand .bname { font-family: var(--pixel); font-size: 13px; color: var(--gold-t); text-shadow: 2px 2px 0 var(--edge); }
.foot-tag { font-size: 19px; color: var(--soft); max-width: 340px; margin-top: 14px; }
.foot-x {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-family: var(--pixel); font-size: 9px; color: var(--text);
  text-decoration: none; padding: 11px 13px; background: rgba(255, 255, 255, .05);
  box-shadow: 0 -2px 0 0 rgba(255,255,255,.13), 0 2px 0 0 rgba(255,255,255,.13),
             -2px 0 0 0 rgba(255,255,255,.13), 2px 0 0 0 rgba(255,255,255,.13);
}
.foot-x:hover { color: var(--gold-t); }
.foot-x svg { flex: none; }
.foot-col h5 { font-family: var(--pixel); font-size: 9px; color: var(--rift); letter-spacing: 2px; margin-bottom: 16px; }
.foot-col a, .foot-col span { display: block; font-size: 20px; color: var(--text); text-decoration: none; margin-bottom: 9px; }
.foot-col a:hover { color: var(--gold-t); }
.foot-col .dim { color: var(--dim); }
.foot-bar {
  max-width: 1120px; margin: 0 auto;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 18px 20px 26px; border-top: 2px solid rgba(255, 255, 255, .07);
  font-size: 17px; color: var(--dim);
}

/* ── reveal on scroll ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s steps(6), transform .5s steps(6); }
.reveal.in { opacity: 1; transform: none; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .nav-links { display: none; }
  .ladder { grid-template-columns: repeat(3, 1fr); }
  .pets { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .grid3 { grid-template-columns: 1fr; }
  .chip { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .faqs { grid-template-columns: 1fr; }
  .fg-creator { grid-template-columns: 1fr; gap: 18px; }
  .fg-controls { max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (max-width: 540px) {
  body { font-size: 19px; }
  .btn--big { font-size: 11px; padding: 15px 16px; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .pets { grid-template-columns: repeat(2, 1fr); }
  .brand .bname { font-size: 9px; }
  .hero-hint, .hpill-sep { display: none; }
  .mob-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .forge-panel { padding: 22px 16px 24px; }
  .fstep-title { font-size: 11px; }
  /* the check mark sits beside a full-width input on a phone, not inside it */
  .fg-field { flex-direction: column; align-items: stretch; }
  #fg-name { max-width: none; padding-right: 15px; }
  #fg-avail { position: static; text-align: right; }
  .fg-actions .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo, .wordmark, .tag, .ctas, .domain, .scroll-hint, .hero-steps, .mint-progress { opacity: 1; }
  html.ready .logo, html.ready .wordmark, html.ready .tag, html.ready .ctas,
  html.ready .domain, html.ready .scroll-hint, html.ready .hero-steps, html.ready .mint-progress { animation: none; }
  .mint-progress-fill { transition: none; }
  .ticker-track { animation-duration: 110s; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint .arrow, .chip i { animation: none; }
}