/*
 * ARCHKEEPERS — one stylesheet for every page of the site.
 *
 * THE STYLE IS TAKEN FROM THE GAME'S SCREEN, NOT INVENTED. Every colour and both
 * faces below come from the game's own `src/styles/tokens.css`; the card plates'
 * geometry comes from `src/ui/frames.ts` by way of `data.js`. The Archive is a BRIGHT
 * place — ivory, marble, gold and sunlight. A dark site would be a different game.
 */
/* ═══════════════════════════════════════════════ FONTS — the game's own two */
@font-face{font-family:'Marcellus';src:url('/assets/fonts/marcellus.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Spectral';src:url('/assets/fonts/spectral-700-latin.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* ---- the six system colours, verbatim from the game's tokens.css ---- */
  --blue:#14263f;
  --ivory:#fbf6ec;
  --gold:#c9a227;
  --core:#8c2f39;
  --ink:#4aa8d8;
  --green:#3a8f5c;

  /* ---- tints the game also defines ---- */
  --blue-soft:#1e3a5f;
  --blue-light:#2f4f7a;
  --parchment:#f4e9d4;
  --parchment-dim:#e6d7ba;
  --gold-bright:#e3c567;
  --gold-light:#f3d98b;
  --gold-body:#c9a24b;
  --gold-dark:#8a6a26;
  --ink-bright:#8fd4f2;

  /* ---- the site's own working values, all built from the six ---- */
  --sub:#5c6f86;
  --glass:rgba(251,246,236,.72);
  --glass-hi:rgba(255,253,247,.86);
  --edge:rgba(255,255,255,.8);
  --hair:rgba(201,162,39,.32);
  --shadow:0 18px 46px rgba(20,38,63,.16);
  --shadow-hi:0 28px 72px rgba(20,38,63,.26);

  /* Gold is a metal, never a flat fill — the game's rule, kept. */
  --gold-metal:linear-gradient(180deg,var(--gold-light) 0%,var(--gold-body) 55%,var(--gold-dark) 100%);
  --gold-text:linear-gradient(100deg,var(--gold-dark) 0%,var(--gold-light) 38%,#fff6d8 50%,var(--gold-body) 66%,var(--gold-dark) 100%);
  --royal-metal:linear-gradient(180deg,#2e5aa8 0%,#1b3a6b 55%,#0f1f3d 100%);

  --f-d:'Marcellus',Georgia,serif;
  --f-u:'Spectral',Georgia,serif;
  --wrap:1280px;

  /* The three Worlds that have art. Each one's accent is read off its paintings. */
  --w-tide:#2ea3c4;
  --w-glass:#a98fd6;
  --w-amber:#c9922a;
}

*{box-sizing:border-box;margin:0;padding:0}

/* The page never travels sideways. `clip` on the ROOT, because a fixed-position
   background and a few breathing haloes are wider than the window, and Safari on
   a phone does not honour `overflow-x` set only on body. `clip` rather than
   `hidden` so smooth anchor scrolling and sticky headers keep working. */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--f-u);color:var(--blue);
  font-size:17px;line-height:1.65;overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  background:var(--ivory);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ─────────────────────────── THE HALL BEHIND EVERYTHING
   The Archive's own great hall stands fixed behind the page and drifts down as
   you scroll. It is deliberately a quarter-screen taller than the window at both
   ends: without that slack, a long page eventually scrolls the image off its own
   top edge and lays a hard horizontal line of bare background across the text. */
.hall{position:fixed;left:0;right:0;top:-25vh;bottom:-25vh;z-index:-2;
  background:url('/assets/art/start-screen-master.webp') center/cover no-repeat}
.veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(251,246,236,.30) 0%,
    rgba(251,246,236,.72) 26%,
    rgba(251,246,236,.90) 58%,
    rgba(251,246,236,.96) 100%)}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
section{position:relative;scroll-margin-top:78px}
.pad{padding:96px 0}
@media (max-width:760px){.pad{padding:64px 0}}

/* ─────────────────────────── SOFT EDGES
   A full-width painting must not end in a ruled line. The edge is not repainted
   in ivory — it DISSOLVES, so whatever sits behind shows through and there is no
   seam at any block height against any neighbour. The stretch is long on purpose:
   a short gradient reads as a stripe rather than as a defocus. */
.melt{--m:8%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--m),#000 calc(100% - var(--m)),transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 var(--m),#000 calc(100% - var(--m)),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--m),#000 calc(100% - var(--m)),transparent 100%),
             linear-gradient(90deg,transparent 0,#000 var(--m),#000 calc(100% - var(--m)),transparent 100%);
  mask-composite:intersect}
.melt-y{--e-top:14%;--e-bot:14%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--e-top),#000 calc(100% - var(--e-bot)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--e-top),#000 calc(100% - var(--e-bot)),transparent 100%)}

/* ─────────────────────────── TYPOGRAPHY */
.eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
  color:var(--gold-dark);display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.eyebrow::before,.eyebrow::after{content:'';height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--gold))}
.eyebrow::after{background:linear-gradient(270deg,transparent,var(--gold))}

h2.sect{font-family:var(--f-d);font-weight:400;
  font-size:clamp(2.1rem,5vw,3.7rem);line-height:1.06;text-align:center;
  background:linear-gradient(180deg,#8a6a26 0%,#5d4a1c 46%,#2c2410 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:16px}

.lede{text-align:center;max-width:780px;margin:0 auto 48px;color:var(--sub);font-size:1.06rem}
.lede b{color:var(--blue);font-weight:600}

.orn{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 44px;max-width:340px}
.orn::before,.orn::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}
.orn i{width:9px;height:9px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.2)}

/* ─────────────────────────── PANELS */
.glass{background:var(--glass);backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--edge);border-radius:20px;box-shadow:var(--shadow)}
.plate{background:linear-gradient(180deg,rgba(251,246,236,.94),rgba(244,233,212,.9));
  border:1px solid var(--hair);border-radius:18px;box-shadow:var(--shadow)}

/* ─────────────────────────── BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-family:var(--f-u);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:10px;transition:transform .2s,box-shadow .3s,filter .25s;white-space:nowrap;border:0}
.btn-gold{padding:13px 28px;font-size:.8rem;color:#3a2c08;border:1px solid var(--gold-dark);
  background:var(--gold-metal);
  box-shadow:0 5px 18px rgba(138,106,38,.3),inset 0 1px 0 rgba(255,255,255,.7)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 12px 30px rgba(138,106,38,.42),inset 0 1px 0 rgba(255,255,255,.85)}
.btn-glass{padding:13px 26px;font-size:.8rem;color:var(--blue-soft);
  border:1px solid rgba(30,58,95,.28);background:rgba(255,255,255,.62);backdrop-filter:blur(10px)}
.btn-glass:hover{transform:translateY(-2px);background:#fff;border-color:var(--blue-soft);
  box-shadow:0 10px 26px rgba(20,38,63,.18)}
.btn-lg{padding:18px 44px;font-size:.92rem;border-radius:12px}
/* ═══════════════════════════════════════════════════════════ HEADER */
header{position:fixed;inset:0 0 auto 0;z-index:90;padding:14px 0;transition:.35s}
header.stuck{padding:8px 0;background:rgba(251,246,236,.78);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 6px 30px rgba(20,38,63,.1);border-bottom:1px solid rgba(201,162,39,.25)}
.hd{display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:11px}
/* The wordmark is 1000x429 and carries fine gold scrollwork: below about 40px the
   letters stop being letters. It is sized by WIDTH, so the mark reads the same whatever
   the file's aspect ratio becomes if the logo is ever redrawn. */
.brand img{width:176px;height:auto;object-fit:contain;
  filter:drop-shadow(0 3px 8px rgba(20,38,63,.24));transition:.3s}
header.stuck .brand img{width:142px}
@media (max-width:1080px){.brand img{width:148px}header.stuck .brand img{width:126px}}
nav{display:flex;gap:18px;margin-left:auto;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600}
nav a{color:var(--sub);position:relative;padding:6px 0;transition:color .2s;white-space:nowrap}
nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--gold);transition:right .3s}
nav a:hover,nav a.on{color:var(--gold-dark)}
nav a:hover::after,nav a.on::after{right:0}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px}
.burger i{width:24px;height:2px;background:var(--gold-dark);border-radius:2px;display:block;transition:.3s}

@media (max-width:1080px){
  nav{position:fixed;inset:60px 0 auto 0;flex-direction:column;gap:0;padding:12px 0;
    background:rgba(251,246,236,.97);backdrop-filter:blur(20px);
    box-shadow:0 18px 40px rgba(20,38,63,.16);
    transform:translateY(-130%);transition:transform .38s cubic-bezier(.3,.8,.35,1);
    font-size:.82rem;letter-spacing:.14em}
  nav.open{transform:none}
  nav a{padding:13px 26px;border-bottom:1px solid rgba(201,162,39,.16)}
  nav a::after{display:none}
  .burger{display:flex}
  .hd .btn-gold{display:none}
}

/* ═══════════════════════════════════════════════════════════ HERO */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;padding:84px 0 28px;overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* The hall's own light, breathing. Screen only lightens, so the painting under
   it is never dirtied — the beam that is already painted simply brightens. */
.hero-beam{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(38% 58% at 50% 34%,rgba(255,247,214,.5),rgba(255,247,214,0) 70%);
  animation:beam 7s ease-in-out infinite}
@keyframes beam{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(251,246,236,0),rgba(251,246,236,.82) 62%,var(--ivory) 100%)}

/* PAGES ADRIFT. The Archive is a place where loose Pages hang in the air, and the
   hall painting already has them — these are the same sheets, in motion. Pure CSS:
   no canvas, no library, nothing to load. Each sheet gets its own drift duration
   and delay from an inline custom property so the field never visibly loops. */
.drift{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.sheet{position:absolute;width:var(--w,26px);height:calc(var(--w,26px) * 1.32);
  background:linear-gradient(150deg,rgba(255,252,242,.95),rgba(244,233,212,.72));
  border:1px solid rgba(201,162,39,.4);border-radius:2px;
  box-shadow:0 4px 14px rgba(20,38,63,.16);
  opacity:0;animation:drift var(--t,22s) linear var(--d,0s) infinite}
/* Three faint rules on each sheet: it is a written page, not a blank card. */
.sheet::after{content:'';position:absolute;inset:18% 14%;
  background:repeating-linear-gradient(180deg,rgba(20,38,63,.22) 0 1px,transparent 1px 5px)}
@keyframes drift{
  0%{opacity:0;transform:translate3d(0,40px,0) rotate(var(--r0,-8deg))}
  12%{opacity:.85}
  88%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--dx,60px),-78vh,0) rotate(var(--r1,14deg))}}

.hero-top{position:relative;z-index:3;text-align:center;padding-top:clamp(12px,5vh,48px)}
.hero-logo{width:min(620px,74vw);margin:0 auto;
  filter:drop-shadow(0 10px 34px rgba(20,38,63,.3));
  animation:logoIn 1.5s cubic-bezier(.2,.9,.3,1) both}
@keyframes logoIn{from{opacity:0;transform:translateY(-22px) scale(.94)}to{opacity:1;transform:none}}

.hero-bottom{position:relative;z-index:3;text-align:center}
.hero-kicker{font-family:var(--f-d);font-size:clamp(1.25rem,3.1vw,2.1rem);line-height:1.22;
  color:var(--blue);max-width:19ch;margin:0 auto 14px;
  text-shadow:0 2px 20px rgba(251,246,236,.9)}
.hero-sub{color:var(--sub);max-width:60ch;margin:0 auto 26px;font-size:1.04rem}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.hero-top,.hero-bottom>*{animation:rise 1.1s cubic-bezier(.2,.9,.3,1) both}
.hero-bottom>*:nth-child(1){animation-delay:.25s}
.hero-bottom>*:nth-child(2){animation-delay:.4s}
.hero-bottom>*:nth-child(3){animation-delay:.55s}
.hero-bottom>*:nth-child(4){animation-delay:.7s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* The four numbers under the hero are READ OUT OF `data.js` at load and counted
   up. Nothing here is typed: see `fillCounts()` in the script. */
.hero-figs{display:flex;justify-content:center;gap:clamp(18px,5vw,60px);flex-wrap:wrap}
.fig{text-align:center;min-width:76px}
.fig u{display:block;font-family:var(--f-d);font-size:clamp(1.7rem,4vw,2.6rem);
  line-height:1;text-decoration:none;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.fig span{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sub);margin-top:7px}

/* On a phone the hero's four figures reach the foot of the screen, and the wheel sat on
   top of the last label. A scroll hint is also the one thing a phone reader does not
   need — the gesture is the whole interface. */
@media (max-width:820px){.scroll-hint{display:none}}
.scroll-hint{position:absolute;left:50%;bottom:14px;z-index:4;transform:translateX(-50%);
  width:22px;height:34px;border:1.5px solid rgba(20,38,63,.3);border-radius:12px}
.scroll-hint::after{content:'';position:absolute;left:50%;top:7px;width:3px;height:7px;
  margin-left:-1.5px;border-radius:2px;background:var(--gold-dark);
  animation:wheel 1.9s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ═══════════════════════════════════════════════════════════ SCROLL REVEAL
   One observer, one class. Anything with `.r` starts 30px low and transparent and
   arrives when it enters the window; `--rd` staggers a row without a keyframe each. */
.r{opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.8,.3,1) var(--rd,0s),transform .85s cubic-bezier(.2,.8,.3,1) var(--rd,0s)}
.r.in{opacity:1;transform:none}
/* ═══════════════════════════════════════════════════════════ THE LEGEND
   Four beats hung on a gold thread that draws itself as the section passes. */
.beats{position:relative;max-width:900px;margin:0 auto;padding:10px 0}
.thread{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:rgba(201,162,39,.16);border-radius:2px;overflow:hidden}
.thread i{position:absolute;inset:0 0 auto 0;height:0;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  box-shadow:0 0 14px rgba(227,197,103,.7);transition:height .12s linear}
.beat{position:relative;display:flex;padding:28px 0;min-height:132px}
.beat:nth-child(even){justify-content:flex-end}
.beat-node{position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  transform:rotate(45deg);background:var(--ivory);border:2px solid var(--gold);z-index:2;
  transition:.5s}
.beat.in .beat-node{background:var(--gold-bright);
  box-shadow:0 0 0 6px rgba(227,197,103,.22),0 0 20px rgba(227,197,103,.9)}
.beat-card{position:relative;width:calc(50% - 46px);padding:22px 24px;
  background:linear-gradient(180deg,rgba(251,246,236,.95),rgba(244,233,212,.9));
  border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow)}
.beat-card::before{content:attr(data-n);position:absolute;top:-14px;left:22px;
  font-family:var(--f-d);font-size:1.5rem;line-height:1;padding:0 8px;
  background:var(--ivory);color:rgb(var(--bc,201 162 39))}
.beat-card u{display:block;font-family:var(--f-d);font-size:1.22rem;text-decoration:none;
  margin-bottom:8px;color:var(--blue)}
.beat-card p{color:var(--sub);font-size:.97rem}
.beat-card b{color:var(--blue);font-weight:600}
/* The halo breathes. It is INSIDE the card's own box on purpose: a halo hung on
   negative insets is wider than the window, and a breathing element wider than the
   window changes the page's scroll width as it breathes — which is exactly how a
   page ends up rocking sideways on a phone. */
.beat-card::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 0 rgba(var(--bc,201 162 39) / .35);transition:box-shadow .6s}
.beat.in .beat-card::after{animation:halo 4.5s ease-in-out infinite}
@keyframes halo{0%,100%{box-shadow:0 0 0 0 rgba(var(--bc,201 162 39) / .3)}
  50%{box-shadow:0 0 34px 2px rgba(var(--bc,201 162 39) / .22)}}
@media (max-width:820px){
  .thread{left:15px}
  .beat,.beat:nth-child(even){justify-content:flex-start;padding-left:44px}
  .beat-node{left:15px}
  .beat-card{width:100%}
}

/* Three intro plates, side by side, that lift on hover. */
.intro3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 auto 54px;max-width:1120px}
.intro3 figure{position:relative;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  border:1px solid var(--hair);transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s}
.intro3 figure:hover{transform:translateY(-8px);box-shadow:var(--shadow-hi)}
.intro3 img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.intro3 figure:hover img{transform:scale(1.07)}
.intro3 figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;
  font-family:var(--f-d);font-size:1.02rem;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(20,38,63,0),rgba(20,38,63,.84))}
@media (max-width:760px){.intro3{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════ THE KINGDOM
   ONE KINGDOM. Producer ruling of 2026-09-15 (Register §73): the game ships with
   Tidelit Kingdom and nothing a player sees names another kingdom, a choice between
   kingdoms, or "worlds" in the plural. This site is a player-facing surface, so the
   ruling binds it. The art for the other kingdoms is on disk and stays there.       */
.facets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:44px}
.facet{position:relative;border-radius:18px;overflow:hidden;background:var(--parchment);
  box-shadow:var(--shadow);transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s}
.facet:hover{transform:translateY(-10px);box-shadow:var(--shadow-hi)}
.facet-art{position:relative;aspect-ratio:16/11;overflow:hidden}
.facet-art img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.facet:hover .facet-art img{transform:scale(1.09)}
.facet-art::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:linear-gradient(180deg,rgba(20,38,63,0) 44%,rgba(46,163,196,.4) 100%)}
.facet:hover .facet-art::after{opacity:1}
.facet-body{padding:18px 20px 22px}
.facet-body h3{font-family:var(--f-d);font-weight:400;font-size:1.3rem;color:var(--blue);
  margin-bottom:5px}
.facet-body p{color:var(--sub);font-size:.93rem}
@media (max-width:900px){.facets{grid-template-columns:1fr}}

/* ─────────────────────────── THE WORLD PATH
   Twelve rungs, in the order the game lists them, on one rising line. A Boss rung
   wears its portrait; a chapter rung is a plain node. The names and the order are
   read out of `data.js` — see `buildPath()`. */
.path{position:relative;max-width:1120px;margin:0 auto;padding:8px 0}
.path-line{position:absolute;left:0;right:0;top:64px;height:2px;
  background:rgba(20,38,63,.1);border-radius:2px;overflow:hidden}
.path-line i{position:absolute;inset:0 auto 0 0;width:0;
  background:linear-gradient(90deg,var(--ink),var(--gold-bright));
  box-shadow:0 0 14px rgba(74,168,216,.6);transition:width 1.4s cubic-bezier(.2,.8,.3,1)}
.rungs{display:flex;gap:10px;overflow-x:auto;padding:0 2px 16px;scroll-snap-type:x proximity;
  scrollbar-width:thin;
  /* The ladder is longer than any screen. The right edge fades so the row reads as
     continuing rather than as ending on a hard crop. */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%)}
.rungs.ended{-webkit-mask-image:none;mask-image:none}
.rung{position:relative;flex:0 0 auto;width:118px;cursor:default;text-align:center;
  scroll-snap-align:center;background:none;border:0;font:inherit;padding:0}
.rung-face{position:relative;width:104px;height:104px;margin:12px auto 12px;border-radius:50%;
  overflow:hidden;background:var(--parchment-dim);border:2px solid var(--hair);
  box-shadow:0 8px 20px rgba(20,38,63,.18);
  transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s,border-color .45s}
.rung-face img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.rung:hover .rung-face{transform:translateY(-6px) scale(1.07);border-color:var(--gold);
  box-shadow:0 14px 34px rgba(20,38,63,.3)}
.rung.chapter .rung-face{width:64px;height:64px;margin:32px auto;
  display:grid;place-items:center;background:rgba(251,246,236,.9);
  font-family:var(--f-d);font-size:1.1rem;color:var(--gold-dark)}
.rung.queen .rung-face{border-color:var(--gold);
  box-shadow:0 10px 28px rgba(138,106,38,.4),0 0 0 4px rgba(227,197,103,.22)}
.rung u{display:block;font-size:.76rem;text-decoration:none;color:var(--blue);
  font-weight:600;line-height:1.3}
.rung span{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:4px}
.rung.chapter span{color:var(--sub)}

/* ═══════════════════════════════════════════════════════════ A REAL PAGE
   This is the game's card, not a web version of it.

   The plate is the game's own `frame-witness.webp` / `frame-witness-guardian.webp` /
   `frame-spell.webp`, and every position below is a percentage handed over by
   `data.js` from `src/ui/frames.ts`, where it was measured off the artwork's pixels
   rather than eyeballed. The card carries them as custom properties, so one rule set
   serves all three plates.

   TWO PLATE FAMILIES BEHAVE DIFFERENTLY, and the difference is in the PNG:
     Witness / Guardian — the window is a real hole, so the portrait goes BEHIND the
                          plate and the painted arch crops it for free.
     Spell              — the plate is fully opaque, so a portrait behind it would be
                          invisible. It goes ON TOP, clipped by a mask cut from the
                          plate's own pixels (`frame-spell-window.webp`).

   Type size is `cqw`, so a card is the same card at 150px and at 420px: the plate,
   the name and the sentence all scale as one object and nothing has a breakpoint. */
/* 🔴 TYPE IS SIZED IN `cqw` ON THE CHILDREN, NEVER ON `.card` ITSELF.
   A container-query unit written on the element that DECLARES the container does not
   measure that element — it falls back to the nearest ancestor container, and failing
   that to the viewport. `font-size: 7.8cqw` here read as 7.8vw: a 112px card name on a
   178px card, names ellipsised to "Ree…", and cost digits bigger than the portrait.
   The children below are inside the container and resolve correctly.
   The game's card em is 5.2% of card HEIGHT; a plate is 512x768, so height is 1.5x
   width and one card em is 7.8% of the width — hence 7.8cqw, split by the game's own
   multipliers: name .58em, sentence .42em, sockets .82em. */
.card{position:relative;width:100%;aspect-ratio:512/768;container-type:inline-size;
  line-height:1.2;
  filter:drop-shadow(0 10px 22px rgba(20,38,63,.26));
  transition:transform .45s cubic-bezier(.2,.8,.3,1),filter .45s}
/* 🔴 THE WINDOW IS SIZED, NOT INSET. An absolutely positioned REPLACED element — an
   <img> — with `width: auto` takes its INTRINSIC width and then quietly drops the
   `right` inset as over-constrained. The portraits are 512 square, so every card was
   drawing its painting 512px wide and hanging a strip of it off the plate's right
   edge, outside the frame. Four insets look right and are not; the width and height
   have to be stated. */
.card-art{position:absolute;z-index:1;object-fit:cover;
  top:var(--a-top);left:var(--a-left);
  width:calc(100% - var(--a-left) - var(--a-right));
  height:calc(100% - var(--a-top) - var(--a-bottom))}
.card.spell .card-art{z-index:3;
  -webkit-mask:var(--a-mask) center/100% 100% no-repeat;
  mask:var(--a-mask) center/100% 100% no-repeat}
.card-plate{position:absolute;inset:0;z-index:2;width:100%;height:100%}
/* The emblem — the scroll, column, bell or star that names a spell's kind — RIDES THE
   NAME BANNER beside the name, at 82% of the banner's height, exactly as the game sets
   it. A Witness has none. */
.card-emblem{height:82%;width:auto;flex:none;margin-right:3px;opacity:.9}
.card-name{position:absolute;z-index:4;left:9%;right:9%;
  top:var(--n-top);height:var(--n-h);
  display:flex;align-items:center;justify-content:center;gap:0;
  font-family:var(--f-d);font-size:4.52cqw;line-height:1;color:#2c2410;
  text-align:center;white-space:nowrap}
.card-name span{overflow:hidden;text-overflow:ellipsis}
/* 11% each side is the whole of the painted field — measured row by row off both
   plates. 12% left 1.3% of parchment unused; 15% left nearly a fifth of it. */
.card-text{position:absolute;z-index:4;left:11%;right:11%;
  top:var(--t-top);bottom:var(--t-bot);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:3.28cqw;line-height:1.28;text-align:center;color:#3a3020;
  padding:0 2%}
.card-cost,.card-atk,.card-hp{position:absolute;z-index:5;display:grid;place-items:center;
  width:14%;transform:translate(-50%,-50%);
  font-size:6.4cqw;font-weight:700;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}
.card-cost{left:var(--c-x);top:var(--c-y);color:#eaf6ff}
.card-atk{left:var(--at-x);top:var(--at-y);color:#ffeede}
.card-hp{left:var(--h-x);top:var(--h-y);color:#e6fbff}

/* Rarity is a light along the edge, never a different plate — the game's rule. */
.card.rare{filter:drop-shadow(0 10px 22px rgba(20,38,63,.26)) drop-shadow(0 0 6px rgba(74,168,216,.75))}
.card.epic{filter:drop-shadow(0 10px 22px rgba(20,38,63,.26)) drop-shadow(0 0 7px rgba(140,90,200,.78))}
.card.legendary,.card.mythic,.card.apex{
  filter:drop-shadow(0 10px 22px rgba(20,38,63,.26)) drop-shadow(0 0 9px rgba(227,197,103,.85))}

/* ─────────────────────────── THE SHELF
   Every printed Page in the game, filterable, and each one tilts toward the cursor. */
.filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
.filters.small{margin-bottom:30px}
.chip{font:inherit;cursor:pointer;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;padding:8px 15px;border-radius:99px;color:var(--sub);
  background:rgba(251,246,236,.72);border:1px solid rgba(20,38,63,.16);
  transition:.28s}
.chip:hover{color:var(--gold-dark);border-color:var(--gold);transform:translateY(-2px)}
.chip.on{color:#3a2c08;background:var(--gold-metal);border-color:var(--gold-dark);
  box-shadow:0 4px 14px rgba(138,106,38,.3)}
.count{text-align:center;color:var(--sub);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:26px}
.count b{color:var(--gold-dark)}

.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:22px}
.slot{cursor:pointer;border:0;background:none;padding:0;perspective:1000px;
  transition:opacity .4s,transform .4s}
.slot.gone{display:none}
.slot .card:hover{transform:translateY(-10px) scale(1.04)}
@media (max-width:520px){.shelf{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}}

/* ─────────────────────────── THE LECTERN (card modal) */
.lectern{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
  background:rgba(20,38,63,.68);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .34s}
.lectern.on{opacity:1;pointer-events:auto}
.lectern-in{display:flex;gap:34px;align-items:center;max-width:900px;width:100%;
  transform:translateY(24px) scale(.96);transition:transform .38s cubic-bezier(.2,.9,.3,1)}
.lectern.on .lectern-in{transform:none}
.lectern .card{width:min(320px,62vw);flex:none}
.lectern-say{color:var(--ivory);max-width:420px}
.lectern-say h3{font-family:var(--f-d);font-weight:400;font-size:2rem;margin-bottom:6px}
.lectern-say .kind{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-bright);margin-bottom:18px}
.lectern-say dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.95rem}
.lectern-say dt{color:rgba(251,246,236,.55);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;padding-top:4px}
.lectern-say dd{color:var(--ivory)}
.lectern-say .rules{margin-top:20px;padding:15px 18px;border-radius:12px;
  background:rgba(251,246,236,.1);border:1px solid rgba(227,197,103,.3);
  font-style:italic;color:rgba(251,246,236,.94)}
.x{position:absolute;right:22px;top:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:rgba(251,246,236,.12);border:1px solid rgba(251,246,236,.3);color:var(--ivory);
  font-size:1.3rem;line-height:1;transition:.25s}
.x:hover{background:rgba(251,246,236,.24);transform:rotate(90deg)}
@media (max-width:820px){
  .lectern-in{flex-direction:column;gap:20px;overflow:auto;max-height:86vh}
  .lectern .card{width:min(240px,58vw)}
  .lectern-say{text-align:center}
  .lectern-say dl{justify-content:center}
}
/* ═══════════════════════════════════════════════════════════ THE BATTLE */
.keyart{position:relative;border-radius:20px;overflow:hidden;margin:0 auto 44px;
  max-width:1120px;box-shadow:var(--shadow-hi)}
.keyart img{width:100%;aspect-ratio:16/8;object-fit:cover}
.keyart figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 24px 18px;
  text-align:center;color:#fff;font-family:var(--f-d);font-size:1.06rem;
  background:linear-gradient(180deg,rgba(20,38,63,0),rgba(20,38,63,.78))}

/* The laws of a fight. Every figure is read from `data.js` — see `fillLaws()`. */
.laws{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:54px}
.law{position:relative;padding:24px 20px;border-radius:16px;text-align:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(251,246,236,.94),rgba(244,233,212,.88));
  border:1px solid var(--hair);box-shadow:var(--shadow);
  transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .4s}
.law:hover{transform:translateY(-6px);box-shadow:var(--shadow-hi)}
.law u{display:block;font-family:var(--f-d);font-size:2.5rem;line-height:1;text-decoration:none;
  background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.law em{display:block;font-style:normal;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dark);margin:10px 0 8px;font-weight:600}
.law p{font-size:.88rem;color:var(--sub);line-height:1.5}
/* A slow sheen crosses the plate, the way light crosses gilding. */
.law::after{content:'';position:absolute;top:0;bottom:0;width:40%;left:-50%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transition:left .8s cubic-bezier(.2,.8,.3,1)}
.law:hover::after{left:120%}

/* ─────────────────────────── THE INK LADDER
   Ink starts at nothing and gains one every turn to a ceiling of ten — the game's
   own `INK_PER_TURN`, `STARTING_MAX_INK` and `MAX_INK`. Drag the ladder, or let it
   climb on its own, and the row beneath shows the real Pages that much Ink buys. */
.ladder{max-width:1000px;margin:0 auto}
.pips{display:flex;gap:9px;justify-content:center;margin-bottom:8px}
.pip{position:relative;width:38px;height:48px;cursor:pointer;border:0;padding:0;background:none}
.pip i{position:absolute;inset:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:rgba(20,38,63,.08);border:1.5px solid rgba(20,38,63,.16);
  transition:.35s cubic-bezier(.2,.8,.3,1)}
.pip.lit i{background:radial-gradient(circle at 42% 34%,var(--ink-bright),var(--ink) 58%,#2a6f97 100%);
  border-color:rgba(74,168,216,.8);
  box-shadow:0 0 16px rgba(74,168,216,.6),inset 0 2px 5px rgba(255,255,255,.55)}
.pip.now i{transform:scale(1.16);animation:inkPulse 1.7s ease-in-out infinite}
@keyframes inkPulse{0%,100%{box-shadow:0 0 16px rgba(74,168,216,.6),inset 0 2px 5px rgba(255,255,255,.55)}
  50%{box-shadow:0 0 28px rgba(74,168,216,.95),inset 0 2px 5px rgba(255,255,255,.7)}}
.pip b{position:absolute;left:0;right:0;bottom:-1px;font-size:.66rem;font-weight:700;
  color:rgba(251,246,236,.95);text-shadow:0 1px 2px rgba(0,0,0,.4);opacity:0;transition:.3s}
.pip.lit b{opacity:1}
.ladder-say{text-align:center;color:var(--sub);font-size:.9rem;margin-bottom:26px}
.ladder-say b{color:var(--blue);font-weight:600}
.afford{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;min-height:270px;align-items:flex-start}
.afford .slot{width:172px;animation:dealIn .5s cubic-bezier(.2,.9,.3,1) both}
@keyframes dealIn{from{opacity:0;transform:translateY(26px) rotate(var(--tilt,-3deg)) scale(.9)}
  to{opacity:1;transform:none}}
.afford-none{color:var(--sub);font-style:italic;align-self:center;padding:90px 0}
@media (max-width:620px){
  .pips{gap:5px}.pip{width:28px;height:38px}
  .afford .slot{width:136px}
}

/* ─────────────────────────── KEYWORDS */
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
  max-width:1000px;margin:54px auto 0}
.key{padding:20px 22px;border-radius:14px;border:1px solid var(--hair);
  background:rgba(251,246,236,.74);transition:.4s}
.key:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--shadow)}
.key u{display:block;font-family:var(--f-d);font-size:1.18rem;text-decoration:none;
  color:var(--blue);margin-bottom:6px}
.key u::before{content:'';display:inline-block;width:9px;height:9px;margin-right:9px;
  transform:rotate(45deg);background:var(--kc,var(--gold))}
.key p{font-size:.9rem;color:var(--sub)}

/* ═══════════════════════════════════════════════════════════ THE WORLD FOLIO
   Ten painted plates telling one World's history. The stack turns; the spine
   beneath says where you are. */
.folio{position:relative;max-width:1080px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:44px;align-items:center}
.folio-stage{position:relative;aspect-ratio:2/3;perspective:1600px}
/* The plate is painted WITH its own torn parchment edge and a transparent ground, so
   it gets no box of its own: `contain`, no radius, and the shadow cast by the artwork's
   silhouette rather than by a rectangle behind it. */
.folio-plate{position:absolute;inset:0;
  opacity:0;transform:rotateY(-24deg) translateX(8%) scale(.92);transform-origin:left center;
  transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.3,1);pointer-events:none;
  filter:drop-shadow(0 20px 40px rgba(20,38,63,.34))}
.folio-plate img{width:100%;height:100%;object-fit:contain}
.folio-plate.on{opacity:1;transform:none;pointer-events:auto}
.folio-plate.was{opacity:0;transform:rotateY(26px) translateX(-10%) scale(.9)}
.folio-say h3{font-family:var(--f-d);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.3rem);
  color:var(--blue);margin-bottom:10px;min-height:1.2em}
.folio-say .no{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:600;margin-bottom:12px}
.folio-say p{color:var(--sub);margin-bottom:24px;min-height:4.5em}
.spine{display:flex;gap:7px;flex-wrap:wrap}
.spine button{width:30px;height:30px;border-radius:7px;cursor:pointer;font:inherit;
  font-size:.74rem;font-weight:600;color:var(--sub);
  background:rgba(251,246,236,.72);border:1px solid rgba(20,38,63,.15);transition:.28s}
.spine button:hover{color:var(--gold-dark);border-color:var(--gold);transform:translateY(-2px)}
.spine button.on{color:#3a2c08;background:var(--gold-metal);border-color:var(--gold-dark);
  box-shadow:0 4px 12px rgba(138,106,38,.3)}
.folio-nav{display:flex;gap:10px;margin-top:22px}
.arrow{width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem;
  background:rgba(251,246,236,.8);border:1px solid var(--hair);color:var(--gold-dark);
  transition:.28s}
.arrow:hover{background:#fff;transform:scale(1.08);box-shadow:var(--shadow)}
@media (max-width:860px){
  .folio{grid-template-columns:1fr;gap:26px}
  /* 🔴 NOT `max-width` + `margin: 0 auto`. Everything inside the stage is absolutely
     positioned, so its intrinsic width is nothing — and auto side margins turn a grid
     item's default `stretch` into shrink-to-fit, which on a phone measured the stage at
     exactly 0px wide and left the plate invisible with the caption still under it.
     `justify-self` centres the item without touching how it is sized. */
  .folio-stage{width:min(300px,76vw);justify-self:center}
  .folio-say{text-align:center}
  .spine{justify-content:center}
  .folio-nav{justify-content:center}
}
/* ═══════════════════════════════════════════════════════════ RELICS & INSTRUMENTS */
.relics{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:22px;
  max-width:1060px;margin:0 auto}
.relic{position:relative;text-align:center;cursor:default}
.relic-orb{position:relative;aspect-ratio:1;display:grid;place-items:center;margin-bottom:14px}
.relic-orb img{width:88%;height:88%;object-fit:cover;position:relative;z-index:2;
  border-radius:14px;border:1px solid var(--hair);
  box-shadow:0 10px 26px rgba(20,38,63,.26);
  transition:transform .6s cubic-bezier(.2,.8,.3,1),box-shadow .5s}
.relic:hover .relic-orb img{box-shadow:0 18px 40px rgba(20,38,63,.34)}
.relic:hover .relic-orb img{transform:translateY(-8px) scale(1.07)}
/* A ring of light turns behind the relic — slowly, and only while it is on screen. */
.relic-orb::before{content:'';position:absolute;inset:6%;border-radius:50%;z-index:1;
  background:conic-gradient(from 0deg,rgba(227,197,103,0),rgba(227,197,103,.5),
    rgba(74,168,216,.35),rgba(227,197,103,0));
  opacity:0;transition:opacity .5s;animation:turn 14s linear infinite}
.relic:hover .relic-orb::before{opacity:1}
@keyframes turn{to{transform:rotate(360deg)}}
.relic-orb::after{content:'';position:absolute;inset:16%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,247,214,.85),rgba(255,247,214,0) 70%)}
.relic h4{font-family:var(--f-d);font-weight:400;font-size:1.06rem;color:var(--blue)}
.relic span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-dark);margin-top:5px}

.insts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;
  max-width:1060px;margin:0 auto}
.inst{position:relative;padding:16px 14px 18px;border-radius:14px;text-align:center;
  background:rgba(251,246,236,.74);border:1px solid var(--hair);
  transition:.42s cubic-bezier(.2,.8,.3,1)}
.inst:hover{transform:translateY(-7px) rotate(-1.4deg);background:#fff;box-shadow:var(--shadow-hi)}
.inst img{width:74%;margin:0 auto 12px;filter:drop-shadow(0 6px 14px rgba(20,38,63,.24));
  transition:transform .5s}
.inst:hover img{transform:scale(1.08)}
.inst u{display:block;font-family:var(--f-d);font-size:.98rem;text-decoration:none;color:var(--blue)}

/* ═══════════════════════════════════════════════════════════ THE ARCHIVE (rooms) */
.rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1080px;margin:0 auto}
.room{position:relative;border-radius:18px;overflow:hidden;min-height:250px;
  display:flex;align-items:flex-end;box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.2,.8,.3,1),box-shadow .5s}
.room:hover{transform:translateY(-8px);box-shadow:var(--shadow-hi)}
.room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1)}
.room:hover img{transform:scale(1.08)}
.room-say{position:relative;z-index:2;padding:52px 24px 24px;width:100%;
  background:linear-gradient(180deg,rgba(20,38,63,0),rgba(20,38,63,.88))}
.room-say h3{font-family:var(--f-d);font-weight:400;font-size:1.44rem;color:#fff;margin-bottom:6px}
.room-say p{color:rgba(251,246,236,.82);font-size:.93rem}
@media (max-width:760px){.rooms{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════ FINAL */
.final{position:relative;padding:120px 0;text-align:center;overflow:hidden}
.final-art{position:absolute;inset:0;z-index:0}
.final-art img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.final-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--ivory),rgba(251,246,236,.5) 42%,rgba(251,246,236,.86))}
.final-in{position:relative;z-index:2}
.final h2{font-family:var(--f-d);font-weight:400;font-size:clamp(2.2rem,6vw,4.1rem);
  line-height:1.05;margin-bottom:16px;
  background:linear-gradient(180deg,#8a6a26,#4a3a14 55%,#241d0c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.final p{color:var(--sub);max-width:54ch;margin:0 auto 34px;font-size:1.08rem}

/* ═══════════════════════════════════════════════════════════ FOOTER */
footer{position:relative;background:var(--blue);color:rgba(251,246,236,.72);
  padding:58px 0 30px;font-size:.9rem}
footer::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
.ft img{height:38px;width:auto;margin-bottom:14px;opacity:.95}
.ft h5{font-family:var(--f-d);font-weight:400;color:var(--gold-bright);font-size:1rem;
  margin-bottom:13px}
.ft a{display:block;padding:4px 0;transition:.22s;color:rgba(251,246,236,.72)}
.ft a:hover{color:var(--gold-bright);transform:translateX(3px)}
.ft p{max-width:36ch;line-height:1.6}
.ft-end{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;border-top:1px solid rgba(251,246,236,.14);
  font-size:.8rem;color:rgba(251,246,236,.5)}
@media (max-width:820px){.ft{grid-template-columns:1fr 1fr}.ft>div:first-child{grid-column:1/-1}}

/* A quiet line the crawler and the reader both need: this site is generated. */
.stamp{text-align:center;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(251,246,236,.34);margin-top:14px}

/* ═══════════════════════════════════════════════════════════ INNER PAGES
   The guide and the legal pages. Same hall, same gold, but the page is a document:
   one column, generous measure, and nothing moving while somebody is reading. */
.doc{padding:118px 0 80px;position:relative}
.doc-head{text-align:center;margin-bottom:54px}
.doc-head h1{font-family:var(--f-d);font-weight:400;
  font-size:clamp(2.2rem,5.4vw,3.6rem);line-height:1.06;margin-bottom:14px;
  background:linear-gradient(180deg,#8a6a26 0%,#5d4a1c 46%,#2c2410 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.doc-head p{color:var(--sub);max-width:64ch;margin:0 auto;font-size:1.05rem}
.doc-head .when{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:600;margin-top:16px}

.sheet-doc{max-width:860px;margin:0 auto;padding:44px 48px 48px;
  background:linear-gradient(180deg,rgba(251,246,236,.95),rgba(244,233,212,.9));
  border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow)}
.sheet-doc.wide{max-width:1120px}
@media (max-width:700px){.sheet-doc{padding:28px 22px 32px;border-radius:16px}}

.sheet-doc h2{font-family:var(--f-d);font-weight:400;font-size:1.62rem;color:var(--blue);
  margin:38px 0 12px;padding-bottom:9px;border-bottom:1px solid var(--hair)}
.sheet-doc h2:first-child{margin-top:0}
.sheet-doc h3{font-family:var(--f-d);font-weight:400;font-size:1.2rem;color:var(--blue-soft);
  margin:26px 0 8px}
.sheet-doc p{margin-bottom:14px;color:#33465c}
.sheet-doc ul,.sheet-doc ol{margin:0 0 16px 22px;color:#33465c}
.sheet-doc li{margin-bottom:7px}
.sheet-doc b,.sheet-doc strong{color:var(--blue);font-weight:600}
.sheet-doc a{color:var(--blue-light);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--hair);transition:.2s}
.sheet-doc a:hover{color:var(--gold-dark);text-decoration-color:var(--gold)}
.sheet-doc hr{border:0;height:1px;margin:34px 0;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent)}

/* A definition grid for company details, currencies, terms. */
.sheet-doc dl{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin-bottom:18px}
.sheet-doc dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--gold-dark);padding-top:4px}
.sheet-doc dd{color:#33465c}
@media (max-width:560px){.sheet-doc dl{grid-template-columns:1fr;gap:2px}
  .sheet-doc dd{margin-bottom:12px}}

.sheet-doc table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.94rem}
.sheet-doc th{text-align:left;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-dark);padding:9px 12px;border-bottom:1px solid var(--hair)}
.sheet-doc td{padding:10px 12px;border-bottom:1px solid rgba(201,162,39,.16);color:#33465c}
.sheet-doc tr:last-child td{border-bottom:0}

/* A called-out rule, the way the game's Codex prints one. */
.callout{margin:22px 0;padding:18px 22px;border-radius:14px;
  background:rgba(74,168,216,.09);border:1px solid rgba(74,168,216,.28);
  border-left:4px solid var(--ink)}
.callout b{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-soft);margin-bottom:6px}
.callout.gold{background:rgba(201,162,39,.1);border-color:rgba(201,162,39,.3);
  border-left-color:var(--gold)}
.callout p:last-child{margin-bottom:0}

/* The table of contents on a long document. */
.toc{columns:2;column-gap:34px;margin-bottom:8px;font-size:.94rem}
.toc a{display:block;padding:5px 0;text-decoration:none;color:var(--blue-light);
  transition:.2s;break-inside:avoid}
.toc a:hover{color:var(--gold-dark);transform:translateX(3px)}
@media (max-width:640px){.toc{columns:1}}

/* Back to the top of the site, always in reach on a long document. */
.back{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:9px;
  padding:12px 18px;border-radius:99px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--gold-dark);
  background:rgba(251,246,236,.92);border:1px solid var(--hair);
  box-shadow:var(--shadow);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:.35s}
.back.on{opacity:1;transform:none;pointer-events:auto}
.back:hover{background:#fff;box-shadow:var(--shadow-hi)}
@media (max-width:640px){.back span{display:none}.back{padding:13px;right:16px;bottom:16px}}

/* The guide shows real cards beside its explanations. */
.guide-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;margin:24px 0 28px}
.guide-cards .slot{width:100%}

/* ═══════════════════════════════════════════════════════════ PLATE BUTTONS
   THE BUTTON IS THE GAME'S BUTTON. Producer ruling, 2026-09-18: the site must not
   wear buttons of its own invention. These are `ui_button_primary_endturn_shell` —
   the plaque the player presses to end a turn — and `ui_button_secondary_shell`.
   The CSS-drawn `.btn-gold` / `.btn-glass` above are retired; nothing should use them.

   The plaque is an image, the label is a layer on top, and the field the label sits in
   was read off a percentage grid laid over the artwork:
     primary    parchment y 22%..68%, x 15%..85%, but the side jewels cut into the
                middle rows, so the safe field is 19%..81% / 29%..62%
     secondary  parchment y 33%..62%, x 13%..87%

   Size is set by WIDTH only. Height comes from the file's own proportions and the
   type size comes from the width, so one button is correct at 180px and at 380px. */
.plate-btn{position:relative;display:inline-block;border:0;padding:0;background:none;
  cursor:pointer;line-height:0;container-type:inline-size;vertical-align:middle;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s cubic-bezier(.3,.7,.4,1)}
.plate-btn img{width:100%;height:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 6px 15px rgba(20,38,63,.34))}
.plate-btn b{position:absolute;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-d);font-weight:400;color:#2a2312;line-height:1;text-align:center;
  white-space:nowrap;letter-spacing:.09em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
.plate-primary b{left:19%;right:19%;top:29%;bottom:38%;font-size:7cqw}
.plate-secondary b{left:15%;right:15%;top:33%;bottom:38%;font-size:8.2cqw}

/* The jewels painted on the plaque light up; nothing is recoloured, and nothing
   travels upward — that was the other site's move, not this one's. */
.plate-btn:hover img{filter:drop-shadow(0 6px 15px rgba(20,38,63,.34))
  drop-shadow(0 0 10px rgba(74,168,216,.8)) drop-shadow(0 0 24px rgba(74,168,216,.35))}
.plate-btn:active{transform:scale(.975)}
.plate-btn:active img{filter:drop-shadow(0 2px 6px rgba(20,38,63,.45)) brightness(.94) saturate(1.08)}
.plate-btn:focus-visible{outline:2px solid var(--gold-dark);outline-offset:6px;border-radius:8px}

/* the only thing set from outside */
.pb-hero{width:300px}
.pb-hero2{width:236px}
.pb-head{width:186px}
.pb-final{width:330px}
@media (max-width:760px){
  .pb-hero{width:264px}.pb-hero2{width:212px}.pb-final{width:280px}
}