/* ============================================================
   REALM — the shared ground.

   One look, everywhere: near-black, a hairline of gold, and pixels.
   One typeface, Pixelify Sans, for every word on the site. A pixel face
   loses its legs at small sizes, so nothing here is set below 0.66rem and
   the lines are given more air than a normal face would need. No gradients
   running through text, no coloured glass boxes, no rounded corners.

   Every canvas on the site is drawn at a third of the screen's size and
   blown up with hard edges, so the artwork and everything moving in it
   land on the same grid.
   ============================================================ */

:root{
  --void:#03010a;        /* the dark everything sits on */
  --ink:#07040f;         /* a panel, barely lighter */
  --line:rgba(227,186,92,.26);
  --line-lit:#e3ba5c;
  --gold:#e3ba5c;
  --bone:#f4efe4;
  --text:#f4efe4;
  --dim:#9d8fc4;
  --faint:#6d6192;

  --t-common:#9ca3af;
  --t-uncommon:#34d399;
  --t-rare:#3b82f6;
  --t-epic:#a855f7;
  --t-legendary:#f59e0b;
  --t-mythic:#ef4444;
  --t-entity:#a5f3fc;
  --t-god:#fde68a;
}

/* ---------- digits ----------
   A pixel face cannot tell 8 from B or 5 from S, and every number on this
   site is one somebody is deciding money on. So the words stay pixel and
   the numbers get a face that can be read at a glance, with figures that
   line up in a column. */
.num,.price b,.rw-row b,.tier .count,.qty-num,.bar-label,.slab-note,
.standing dd,.pill,.timeline .d,.j-where,.ch.num{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.num{font-size:1.06em}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:'Pixelify Sans',system-ui,sans-serif;
  font-weight:300;
  line-height:1.78;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

#sky{
  position:fixed;inset:0;z-index:-2;width:100%;height:100%;
  display:block;pointer-events:none;
}

/* Every canvas here is drawn small and stretched to fill the screen.
   Without this the browser smooths it back into mush. */
canvas{
  image-rendering:pixelated;
  image-rendering:crisp-edges;            /* the older name, for Safari */
}

/* ---------- anything that names something ---------- */
.panel h2,.tier .name,.card h3,.chapter h3,.timeline .s,.qty-num,.pill{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
}

/* ---------- a small label above a thing ---------- */
.eyebrow{
  margin:0;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;padding:13px 22px;text-decoration:none;cursor:pointer;
  background:#000;border:1px solid var(--line);color:var(--bone);
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .25s,background .25s;
}
.btn:hover{border-color:var(--line-lit);background:#050208}
.btn.primary{border-color:rgba(227,186,92,.6)}
.btn.wide{display:block;width:100%;text-align:center;margin-top:20px}
.btn.disabled{pointer-events:none;color:var(--faint);border-color:rgba(227,186,92,.16)}

/* ---------- the mint ---------- */
.mint-card{padding:22px 20px;border:1px solid var(--line);background:var(--ink)}
.mint-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.pill{
  font-size:.70rem;letter-spacing:.17em;text-transform:uppercase;
  padding:5px 11px;border:1px solid var(--line);color:var(--gold);
}
.pill.soft{color:var(--dim);border-color:rgba(157,143,196,.28)}

.price{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 14px;
}
.price b{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:1.6rem;line-height:1;color:var(--gold);
}
.price i{
  font-style:normal;font-size:.70rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
}

.bar{height:3px;background:rgba(244,239,228,.1);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--gold);transition:width .8s ease-out}
.bar-label{
  margin:10px 0 0;font-size:.70rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dim);
}

.qty{display:flex;align-items:center;justify-content:center;gap:24px;margin:26px 0 6px}
.step{
  width:40px;height:40px;cursor:pointer;
  background:#000;border:1px solid var(--line);color:var(--bone);font-size:1.1rem;
}
.step:hover{border-color:var(--line-lit);color:var(--gold)}
.qty-num{font-size:2rem;min-width:46px;text-align:center;line-height:1}
.limit{
  text-align:center;margin:0;font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.fine{font-size:.80rem;color:var(--dim);text-align:center;margin:14px 0 0;line-height:1.55}

/* ---------- the eight tiers ---------- */
.tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{
  display:flex;align-items:center;gap:14px;
  padding:12px 15px;background:var(--ink);
}
/* the being grows with its tier, so the ladder reads at a glance */
.tier{align-items:center}
.tier .form-slot{
  width:48px;flex:none;display:flex;align-items:center;justify-content:center;
}
.tier canvas{width:var(--fs,30px);height:var(--fs,30px);display:block}

/* the being shown for each tier. It is pixel art shrunk from 360, so it is
   smoothed on the way down rather than blown apart by nearest-neighbour —
   the same reason the logo in the bar is not pixelated. */
.tier-art{
  display:block;width:76px;height:76px;
  image-rendering:auto;
  border:1px solid rgba(227,186,92,.22);
}
@media (max-width:420px){ .tier-art{width:64px;height:64px} }
.tier .name{flex:1;font-size:.92rem;letter-spacing:.11em}
.tier .count{text-align:right;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);line-height:1.5}
.tier .count b{
  display:block;font-family:'Pixelify Sans',system-ui,sans-serif;
  font-weight:800;font-size:1.05rem;letter-spacing:.02em;color:var(--bone);
}
.tier.god{background:#0b0715}
.tier.god .name{color:var(--t-god)}

/* ---------- the reward cards ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.card{padding:20px;background:var(--ink)}
.card h3{
  margin:0 0 9px;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.card p{margin:0;color:var(--dim);font-size:.9rem}
.card .who{
  margin:11px 0 0;padding-top:10px;border-top:1px solid rgba(227,186,92,.14);
  font-size:.70rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.disclaimer{
  margin:20px 0 0;font-size:.84rem;line-height:1.6;color:var(--faint);
  border-left:1px solid var(--line);padding-left:14px;
}

/* ---------- the reward tables ---------- */
.rw-label{margin:26px 0 9px;color:var(--gold)}
.rw-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rw-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 15px;background:var(--ink);
}
.rw-row span{font-size:.80rem;color:var(--dim)}
.rw-row b{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.92rem;color:var(--bone);
}
.rw-row.lit{background:#0b0715}
.rw-row.lit span,.rw-row.lit b{color:var(--t-god)}

/* ---------- the earnings chart ----------
   A table on a phone has one enemy, which is width. So every table here is
   four columns at most, and the round is chosen rather than being a column
   of its own — ten rounds side by side would need sideways scrolling, and
   anything you have to scroll to see does not get read. */
.ch-note{margin:0 0 13px;font-size:.84rem;line-height:1.62;color:var(--dim)}
.ch-foot{margin:11px 0 0;font-size:.76rem;line-height:1.62;color:var(--faint)}
.ch-foot b{color:var(--dim);font-weight:700}

.ch-picker{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 13px}
.ch-picker button{
  min-width:40px;padding:8px 6px;cursor:pointer;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;font-size:.82rem;
  color:var(--dim);background:var(--ink);border:1px solid var(--line);
}
.ch-picker button:hover{color:var(--bone);border-color:var(--line-lit)}
.ch-picker button[aria-pressed="true"]{
  color:var(--void);background:var(--gold);border-color:var(--gold);font-weight:700;
}

.ch-table{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:var(--cols,1.5fr 1fr 1fr 1fr);
}
.ch-table > div{
  padding:8px 9px;background:var(--ink);text-align:right;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--dim);
}
.ch-table > div.ch-lab{
  text-align:left;color:var(--bone);white-space:nowrap;
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
}
.ch-lab .num{font-size:.8rem;color:var(--faint);margin-left:.3em}
.ch-table > div.ch-h{
  background:#0a0616;color:var(--faint);text-align:right;
  font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;
  font-family:'Pixelify Sans',system-ui,sans-serif;line-height:1.35;
}
.ch-table > div.ch-h:first-child{text-align:left}
.ch-table > div.ch-in{background:#130b28}

/* a cell with the number over what it comes to after the mint is paid */
.ch-v{display:block}
.ch-v b{display:block;font-weight:400;font-size:.78rem;color:var(--bone)}
.ch-v i{display:block;font-style:normal;font-size:.68rem;line-height:1.5}
.ch-up{color:#74d69f}
.ch-down{color:#c4838b}
/* the chart sets its own size on numbers; the site-wide bump is for prose */
.ch-table .num{font-size:inherit}

/* what each row of buttons is choosing */
.pick-for{
  margin:0 0 7px;font-size:.70rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}
.ch-picker + .pick-for{margin-top:15px}
.ch-chosen{
  margin:2px 0 11px;padding:9px 12px;background:#130b28;
  border:1px solid rgba(227,186,92,.2);
  font-size:.78rem;line-height:1.6;color:var(--dim);
}
.ch-chosen b{color:var(--gold);font-weight:700}

/* ---------- the provenance hash ----------
   64 hex characters on a phone can only be read if it wraps anywhere and
   the figures line up, so it breaks mid-word on purpose. */
.prov{
  padding:12px 14px;background:var(--ink);border:1px solid var(--line);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:.74rem;line-height:1.7;letter-spacing:.04em;color:var(--gold);
  word-break:break-all;overflow-wrap:anywhere;
}
.prov.waiting{color:var(--faint);letter-spacing:.14em;text-transform:uppercase;
  font-family:'Pixelify Sans',system-ui,sans-serif;font-size:.72rem}

/* ---------- the story ----------
   One piece of writing rather than ten boxes, so it is set as reading
   matter: a measure that does not run past about 66 characters, an opening
   line that carries, and the Source at the top of it. */
.chapters{display:block;max-width:60ch;margin:0 auto}
.lore-art{
  display:block;width:min(240px,62vw);height:auto;margin:0 auto 26px;
  image-rendering:pixelated;border:1px solid var(--line);
}
.lore-p{margin:0 0 1.15em;font-size:.95rem;line-height:1.85;color:var(--dim)}
.lore-p.lore-open{
  font-size:1.12rem;line-height:1.7;color:var(--bone);
  margin-bottom:1.4em;
}
.chapters .chapter{display:none}
.chapter{padding:20px;border:1px solid var(--line);background:var(--ink)}
.chapter .meta{margin:0 0 9px;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.chapter h3{margin:0 0 9px;font-size:1.05rem;letter-spacing:.06em}
.chapter p.body{margin:0;color:var(--dim);font-size:.94rem;max-width:62ch}

/* a sealed chapter is withheld, not broken */
.chapter.sealed{border-style:dashed;border-color:rgba(157,143,196,.22)}
.chapter.sealed .meta{color:var(--faint)}
.chapter.sealed h3{color:var(--faint)}
.chapter.sealed p.body{display:none}
.chapter.sealed::after{
  content:'Sealed until the realm opens this far';
  display:block;font-size:.70rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--faint);
}

/* ---------- the rounds ---------- */
.timeline{list-style:none;margin:0;padding:0 0 0 20px;border-left:1px solid var(--line)}
.timeline li{position:relative;padding:0 0 22px 14px}
.timeline li::before{
  content:'';position:absolute;left:-25px;top:8px;width:9px;height:9px;
  background:var(--void);border:1px solid rgba(157,143,196,.4);
}
.timeline li.done::before{background:var(--dim);border-color:var(--dim)}
.timeline li.now::before{background:var(--gold);border-color:var(--gold)}
.timeline .r{
  font-family:'Pixelify Sans',system-ui,sans-serif;font-weight:700;
  font-size:.70rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.timeline li.now .r{color:var(--gold)}
.timeline .s{display:block;font-size:1rem;letter-spacing:.05em;color:var(--text)}
.timeline li:not(.done):not(.now) .s{color:var(--faint)}
.timeline .d{font-size:.80rem;color:var(--dim)}

/* ---------- the questions ---------- */
details{border:1px solid var(--line);padding:14px 16px;margin-bottom:9px;background:var(--ink)}
summary{cursor:pointer;font-size:.92rem;list-style:none;color:var(--bone)}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';float:right;color:var(--gold)}
details[open] summary::after{content:'\2212'}
details p{margin:10px 0 0;color:var(--dim);font-size:.88rem}

.lede{color:var(--dim);margin:0 0 26px;font-size:.95rem;max-width:62ch}

@media (min-width:680px){
  .cards{grid-template-columns:1fr 1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

.qty[hidden],.limit[hidden]{display:none}