/* ================================================================
   BREATH OF ESTOVA — Pixel-art MMORPG Design System (v2)
   Parchment + wood + gold + restrained burnt copper
   ================================================================ */

:root {
  /* Sky & atmosphere */
  --sky:           #8ec5dc;
  --sky-light:     #b8dceb;
  --sky-deep:      #4a7a99;
  --cloud:         #f5f1e0;

  /* Nature */
  --grass:         #74a651;
  --grass-light:   #94c66e;
  --grass-deep:    #4a7a2d;
  --leaf-shadow:   #2d4a18;
  --dirt:          #a87850;

  /* Parchment */
  --parchment:     #f4dfb8;
  --parchment-lt:  #fbeed0;
  --parchment-dk:  #d9bc88;
  --parchment-edge:#b89968;

  /* Wood frames */
  --wood:          #8b5a3c;
  --wood-light:    #b07a55;
  --wood-dark:     #5a3a1e;
  --wood-deep:     #3d2811;
  --wood-black:    #1a0e08;

  /* Stone & metal */
  --stone:         #c9c4b0;
  --stone-dark:    #8a8474;
  --gold:          #f4c75e;
  --gold-bright:   #fde08a;
  --gold-dark:     #c89a2f;
  --gold-deep:     #8a6a1f;

  /* Restrained accents (toned-down) */
  --copper:        #b85a28;       /* burnt copper — alpha date, primary accent */
  --copper-deep:   #7a3818;
  --copper-light:  #d97a4a;
  --wine:          #8a2828;       /* deep burgundy — Aether-style */
  --wine-deep:     #5a1818;
  --teal:          #4fb89e;
  --teal-deep:     #2d8a72;
  --blue:          #4a7fc9;
  --blue-deep:     #2a4d8a;
  --purple:        #8c5fb8;

  /* Status colors */
  --red:           #c44a3a;
  --red-deep:      #8a2818;

  /* Text */
  --ink:           #3d2811;
  --ink-soft:      #5a3a1e;
  --ink-faint:     #8b6f45;
  --cream:         #f7eecf;
  --cream-soft:    #d9c89a;

  /* Layout */
  --container:     1280px;
  --frame-thick:   4px;
}

/* ----------------------------------------------------------------
   Reset & base
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Pixelify Sans', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: #2a9bf2;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Pure Estova sky blue backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background: #2a9bf2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  background-image: radial-gradient(circle, rgba(0,0,0,0.4) 1px, transparent 1px);
  background-size: 4px 4px;
}

/* ============ Atmospheric backdrop — real game art slot + clouds & birds ============ */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
}
.atmosphere__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.atmosphere__cloud {
  position: absolute;
  pointer-events: none;
  animation: cloud-drift 90s linear infinite;
}
.atmosphere__cloud--1 { top: 8%;  left: -180px; width: 220px; animation-duration: 110s; opacity: 0.95; }
.atmosphere__cloud--2 { top: 18%; left: -260px; width: 280px; animation-duration: 140s; animation-delay: -30s; opacity: 0.88; }
.atmosphere__cloud--3 { top: 28%; left: -160px; width: 180px; animation-duration: 130s; animation-delay: -75s; opacity: 0.8; }
.atmosphere__bird {
  position: absolute;
  pointer-events: none;
  animation: bird-glide 60s linear infinite;
}
.atmosphere__bird--1 { top: 14%; left: -60px; width: 36px; animation-duration: 70s; animation-delay: -10s; }
.atmosphere__bird--2 { top: 22%; left: -60px; width: 30px; animation-duration: 90s; animation-delay: -40s; }
@keyframes cloud-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 300px)); }
}
@keyframes bird-glide {
  from { transform: translateX(0) translateY(0); }
  25% { transform: translateX(25vw) translateY(-6px); }
  50% { transform: translateX(50vw) translateY(4px); }
  75% { transform: translateX(75vw) translateY(-3px); }
  to { transform: translateX(calc(100vw + 80px)) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere__cloud, .atmosphere__bird { animation: none; }
}

a {
  color: var(--wood-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--copper); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 {
  font-family: 'Press Start 2P', 'Pixelify Sans', monospace;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--wood-deep);
  margin: 0 0 0.5em;
  line-height: 1.25;
  text-shadow: 2px 2px 0 #fff, 3px 3px 0 rgba(58, 40, 24, 0.25);
}
h1 { font-size: clamp(1.8rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
h3 { font-size: clamp(0.95rem, 1.4vw, 1.15rem); }
h4 { font-size: 0.8rem; }

p {
  margin: 0 0 1em;
  color: var(--ink-soft);
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1.1rem;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ----------------------------------------------------------------
   Pixel frames
   ---------------------------------------------------------------- */
.frame {
  position: relative;
  background: var(--parchment);
  padding: 28px;
  border: var(--frame-thick) solid var(--wood-deep);
  box-shadow:
    inset 0 4px 0 var(--parchment),
    inset 0 0 0 8px var(--parchment-lt),
    0 6px 0 var(--wood-deep);
}

.plank {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--wood);
  color: var(--cream);
  border: 4px solid var(--wood-deep);
  box-shadow:
    inset 0 4px 0 var(--wood-light),
    inset 0 -4px 0 var(--wood-dark),
    0 4px 0 var(--wood-deep);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.07s steps(2), box-shadow 0.07s steps(2), filter 0.12s ease;
  white-space: nowrap;
  position: relative;

  /* A button must never be narrower than the words on it.
     `clip-path` below cuts anything that overhangs, and `white-space: nowrap`
     stops the text wrapping out of trouble, so a button squeezed by a flex or
     grid parent loses letters silently: "PLAY ALPHA" became "PLAY ALPH", and
     "GET MY PAYMENT ADDRESS" lost four characters from each end. Nothing warns
     you, it just reads as a broken page.

     `fit-content` makes the container overflow or wrap instead, which is a
     visible problem with an obvious fix, rather than an invisible one. */
  min-width: fit-content;
  /* Notched pixel corners — classic RPG button silhouette */
  clip-path: polygon(
    0 4px, 4px 4px, 4px 0,
    calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)
  );
}
/* Inner shine sweep across top half */
.btn::before {
  content: "";
  position: absolute;
  left: 5px; right: 5px; top: 5px;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0));
  pointer-events: none;
}
/* Inner pixel outline */
.btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0,0,0,0.22);
  pointer-events: none;
}

.btn--primary {
  background:
    linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 42%, var(--gold-dark) 100%);
  color: var(--wood-deep);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 5px 0 4px var(--gold-bright),
    inset 0 -5px 0 4px var(--gold-deep),
    0 6px 0 var(--wood-deep),
    0 8px 0 rgba(0,0,0,0.28);
  text-shadow: 1px 1px 0 rgba(253, 224, 138, 0.65);
}
.btn--primary:hover {
  transform: translateY(3px);
  filter: brightness(1.08) saturate(1.1);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 5px 0 4px var(--gold-bright),
    inset 0 -5px 0 4px var(--gold-deep),
    0 3px 0 var(--wood-deep),
    0 4px 0 rgba(0,0,0,0.28);
}
.btn--primary:active {
  transform: translateY(6px);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 4px 0 4px var(--gold-deep),
    inset 0 -4px 0 4px var(--gold-bright),
    0 0 0 var(--wood-deep);
}

.btn--copper {
  background:
    linear-gradient(180deg, var(--copper-light) 0%, var(--copper) 42%, var(--copper-deep) 100%);
  color: var(--cream);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 5px 0 4px var(--copper-light),
    inset 0 -5px 0 4px var(--copper-deep),
    0 6px 0 var(--wood-deep),
    0 8px 0 rgba(0,0,0,0.28);
  text-shadow: 1px 1px 0 rgba(122, 56, 24, 0.8);
}
.btn--copper:hover {
  transform: translateY(3px);
  filter: brightness(1.1) saturate(1.1);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 5px 0 4px var(--copper-light),
    inset 0 -5px 0 4px var(--copper-deep),
    0 3px 0 var(--wood-deep),
    0 4px 0 rgba(0,0,0,0.28);
}
.btn--copper:active {
  transform: translateY(6px);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 4px 0 4px var(--copper-deep),
    inset 0 -4px 0 4px var(--copper-light),
    0 0 0 var(--wood-deep);
}

.btn--ghost {
  background:
    linear-gradient(180deg, #fff8e4 0%, var(--parchment-lt) 42%, var(--parchment-dk) 100%);
  color: var(--wood-deep);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 5px 0 4px #fff8e4,
    inset 0 -5px 0 4px var(--parchment-edge),
    0 6px 0 var(--wood-dark),
    0 8px 0 rgba(0,0,0,0.22);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.7);
}
.btn--ghost:hover {
  transform: translateY(3px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 5px 0 4px #fff8e4,
    inset 0 -5px 0 4px var(--parchment-edge),
    0 3px 0 var(--wood-dark),
    0 4px 0 rgba(0,0,0,0.22);
}
.btn--ghost:active {
  transform: translateY(6px);
  box-shadow:
    inset 0 0 0 4px var(--wood-deep),
    inset 0 4px 0 4px var(--parchment-edge),
    inset 0 -4px 0 4px #fff8e4,
    0 0 0 var(--wood-dark);
}

.btn--small { padding: 11px 20px; font-size: 0.58rem; }
.btn--small::before { top: 4px; left: 4px; right: 4px; }
.btn--lg { padding: 19px 36px; font-size: 0.8rem; }

/* ----------------------------------------------------------------
   Nav
   ---------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--wood-dark);
  border-bottom: 4px solid var(--wood-deep);
  box-shadow:
    inset 0 4px 0 var(--wood),
    inset 0 -4px 0 var(--wood-deep),
    0 6px 0 rgba(0,0,0,0.25);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: var(--container);
  margin: 0 auto;
  /* P2-96: logo further left, and more air before the first nav item. The
     left padding shrinks to move the brand out; the menu takes an explicit
     left margin because space-between alone put "Home" right against it. */
  padding: 0 24px 0 12px;
}
.nav__menu { margin-left: 28px; }
.nav__brand { display: flex; align-items: center; gap: 12px; color: var(--cream); }
.nav__brand img { height: 44px; width: auto; }

.nav__links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
.nav__link {
  display: inline-block;
  padding: 10px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream-soft);
  transition: all 0.15s ease;
  border: 3px solid transparent;
}
.nav__link:hover { color: var(--gold-bright); }
.nav__link.is-active {
  color: var(--wood-deep);
  background: var(--gold);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--gold-bright), inset 0 -3px 0 var(--gold-dark), 0 3px 0 var(--wood-deep);
}

.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__socials { display: flex; gap: 6px; }
.nav__social {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--wood);
  color: var(--cream);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--wood-light), inset 0 -3px 0 var(--wood-deep);
  transition: all 0.15s ease;
}
.nav__social:hover { background: var(--gold); color: var(--wood-deep); box-shadow: inset 0 3px 0 var(--gold-bright), inset 0 -3px 0 var(--gold-dark); }

/* ----------------------------------------------------------------
   HERO
   ---------------------------------------------------------------- */
/* P2-96: 72px of hero padding met the next section's own top padding, so
   the visual gap was the sum of the two. Halved here rather than zeroed,
   the hero still needs to breathe under its buttons. */
.hero { position: relative; padding: 56px 0 36px; overflow: hidden; }

.hero__cloud { position: absolute; z-index: 1; pointer-events: none; animation: cloud-drift 80s linear infinite; }
/* P2-96 cloud clipping.

   All three drift left to right at DIFFERENT speeds, so they cross each other
   horizontally no matter what the delays are. The only thing that stops them
   intersecting is vertical separation, and the old tops did not give it:

     cloud 3   top  30, height  70  ->  30 to 100
     cloud 1   top  60, height  80  ->  60 to 140   overlaps 3, and 2
     cloud 2   top 110, height  80  -> 110 to 190   overlaps 1

   Height is width / viewBox aspect, so it is fixed by the width. New tops give
   each cloud its own band with a clear gap, smallest first from the top:

     cloud 3   top  14, width 150, height  58  ->  14 to  72
     cloud 1   top  88, width 150, height  75  ->  88 to 163
     cloud 2   top 180, width 200, height  73  -> 180 to 253

   Change a width and the height moves with it, so recheck the bands. */
.hero__cloud--1 { top: 88px;  left: -150px; width: 150px; }
.hero__cloud--2 { top: 180px; left: -200px; width: 200px; animation-delay: -25s; animation-duration: 110s; opacity: 0.85; }
.hero__cloud--3 { top: 14px;  left: -150px; width: 150px; animation-delay: -55s; animation-duration: 95s; opacity: 0.7; }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 260px)); } }

.hero__inner {
  position: relative; z-index: 5;
  max-width: var(--container);
  margin: 0 auto; padding: 0 32px;
  text-align: center;
}
.hero__logo {
  margin: 0 auto 22px;
  max-width: 520px;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,0.25));
}
.hero__tagline {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.65rem, 1.1vw, 0.85rem);
  letter-spacing: 0.06em;
  /* 6 Sep 2026 notes: white with a black pixel border, like the logo. */
  color: #ffffff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    0 4px 0 rgba(0, 0, 0, 0.55);
  margin: 0 0 24px;
}

.hero__alpha {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 32px;
  border: 4px solid var(--wood-deep);
  box-shadow: 0 6px 0 var(--wood-deep);
}
.hero__alpha-label {
  padding: 12px 18px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-shadow: 2px 2px 0 var(--wood-black);
}
.hero__alpha-date {
  padding: 12px 20px;
  background: var(--copper);
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  box-shadow: inset 0 4px 0 var(--copper-light), inset 0 -4px 0 var(--copper-deep);
}

/* Trailer */
.trailer {
  position: relative;
  /* 3 Sep 2026 notes: pushed down (moon visible above) and narrower so the
     animation breathes around it - the ship still shows beside the frame.
     4 Sep: back to CENTRED; the off-centre placement read as a bug. */
  margin: 56px auto 44px;
  max-width: 780px;
  aspect-ratio: 16 / 9;
  background: var(--wood-black);
  border: 6px solid var(--wood-deep);
  box-shadow:
    inset 0 0 0 6px var(--wood),
    inset 0 0 0 12px var(--wood-dark),
    0 10px 0 var(--wood-deep);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.trailer:hover { transform: translateY(2px); }
.trailer__thumb { position: absolute; inset: 12px; overflow: hidden; }
.trailer__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  background: var(--copper);
  border: 6px solid var(--wood-deep);
  display: grid; place-items: center;
  color: var(--cream);
  box-shadow: inset 0 6px 0 var(--copper-light), inset 0 -6px 0 var(--copper-deep), 0 8px 0 var(--wood-deep);
  font-size: 2.2rem; padding-left: 8px;
  transition: transform 0.15s ease;
  cursor: pointer;
}
.trailer:hover .trailer__play { transform: translate(-50%, calc(-50% - 3px)); }

/* `display: grid` above beats the `hidden` attribute, so with no trailer
   configured the play button was still rendering, as a large copper control
   that does nothing. That is the exact fault P2-137 existed to remove, put
   back by a specificity accident. */
.trailer__play[hidden] { display: none; }
.trailer__label {
  position: absolute;
  bottom: 14px; left: 14px;
  padding: 6px 12px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  border: 2px solid var(--gold);
}

.hero__cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ----------------------------------------------------------------
   Sections
   ---------------------------------------------------------------- */
/* P2-152 section rhythm.

   Ketema on the notes page: "Spacing between section below is too big". It was
   80px top and bottom, so between any two sections the reader crossed 160px of
   nothing. 64px halves that gap to 128 without letting sections touch, and the
   tight variant comes down with it so the ratio between the two holds.

   These two numbers are the only place vertical rhythm is set. Do not add
   per-section padding overrides, that is how the spacing drifted the first
   time. */
.section { position: relative; padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section--parchment {
  background: var(--parchment);
  border-top: 6px solid var(--wood-deep);
  border-bottom: 6px solid var(--wood-deep);
  box-shadow: inset 0 6px 0 var(--wood), inset 0 -6px 0 var(--wood);
}
.section--wood {
  background: var(--wood-dark);
  border-top: 6px solid var(--wood-deep);
  border-bottom: 6px solid var(--wood-deep);
  box-shadow: inset 0 6px 0 var(--wood), inset 0 -6px 0 var(--wood-deep);
  color: var(--cream);
}
.section--wood h1, .section--wood h2, .section--wood h3 {
  color: var(--gold-bright);
  text-shadow: 2px 2px 0 var(--wood-deep);
}
.section--wood p { color: var(--cream-soft); }

.section__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: var(--gold);
  color: var(--wood-deep);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--gold-bright), inset 0 -3px 0 var(--gold-dark);
  margin-bottom: 18px;
}
.section__eyebrow--copper {
  background: var(--copper); color: var(--cream);
  box-shadow: inset 0 3px 0 var(--copper-light), inset 0 -3px 0 var(--copper-deep);
}
.section__eyebrow--wine {
  background: var(--wine); color: var(--cream);
  box-shadow: inset 0 3px 0 #b04848, inset 0 -3px 0 var(--wine-deep);
}
.section__title { margin: 0 0 12px; }
.section__lead {
  max-width: 720px;
  margin: 0 auto 48px;
  font-size: 1.1rem;
  line-height: 1.6;
}
.section--center { text-align: center; }

/* ----------------------------------------------------------------
   ALPHA PROOF strip (real closed-alpha stats)
   ---------------------------------------------------------------- */
.alpha-proof {
  background: var(--wood-dark);
  border-top: 4px solid var(--wood-deep);
  border-bottom: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--wood), inset 0 -4px 0 var(--wood-deep);
  padding: 40px 0;
}
.alpha-proof__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  gap: 40px;
  align-items: center;
}
.alpha-proof__title {
  font-family: 'Press Start 2P', monospace;
  color: var(--gold-bright);
  font-size: 0.9rem;
  text-shadow: 2px 2px 0 var(--wood-black);
  margin-bottom: 10px;
}
.alpha-proof__lead {
  color: var(--cream-soft);
  font-size: 0.95rem;
  margin: 0;
}
.alpha-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--wood-deep);
  padding: 4px;
  border: 3px solid var(--wood-deep);
}
.alpha-stat {
  padding: 22px 14px;
  background: var(--parchment);
  text-align: center;
  margin: 2px;
  border: 2px solid var(--wood-dark);
}
.alpha-stat__value {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.5rem;
  color: var(--copper-deep);
  margin-bottom: 4px;
}
.alpha-stat__label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   ALBION-STYLE FEATURES SHOWCASE
   ---------------------------------------------------------------- */
.showcase {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  background: var(--wood-dark);
  border: 6px solid var(--wood-deep);
  box-shadow: inset 0 6px 0 var(--wood), inset 0 -6px 0 var(--wood-deep), 0 10px 0 var(--wood-deep);
  padding: 20px;
}

.showcase__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.showcase__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--wood);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--wood-light), inset 0 -3px 0 var(--wood-dark);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  color: var(--cream-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
}
.showcase__item:hover {
  background: var(--wood-light);
  color: var(--cream);
}
.showcase__item.is-active {
  background: var(--gold);
  color: var(--wood-deep);
  border-color: var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--gold-bright), inset 0 -3px 0 var(--gold-dark);
}
.showcase__item.is-active::after {
  content: '▶';
  position: absolute;
  right: 12px;
  color: var(--wood-deep);
  font-size: 0.7em;
}
.showcase__item-icon {
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: grid; place-items: center;
}

.showcase__view {
  position: relative;
  background: var(--wood-deep);
  border: 4px solid var(--wood-deep);
  overflow: hidden;
  min-height: 480px;
}
.showcase__panel { display: none; position: absolute; inset: 0; }
.showcase__panel.is-active { display: block; }

.showcase__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.showcase__image svg { width: 100%; height: 100%; display: block; }
/* Photo slot — drops on top of SVG fallback. If file missing, image hides via onerror. */
.showcase__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

.showcase__placeholder-tag {
  position: absolute;
  top: 14px; right: 14px;
  padding: 5px 12px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  border: 2px solid var(--gold);
  text-transform: uppercase;
  z-index: 4;
}

.showcase__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(26, 14, 8, 0.95) 100%);
  pointer-events: none;
  z-index: 2;
}
.showcase__content {
  position: absolute;
  left: 28px; right: 28px; bottom: 24px;
  z-index: 3;
  color: var(--cream);
}
.showcase__cat {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  color: var(--copper-light);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.showcase__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.5rem;
  color: var(--gold-bright);
  text-shadow: 3px 3px 0 var(--wood-black);
  margin: 0 0 12px;
}
.showcase__desc {
  max-width: 580px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cream-soft);
  margin: 0;
}

/* ----------------------------------------------------------------
   LIVING LORE ENGINE — Profile/chronicle mockup
   ---------------------------------------------------------------- */
.lore-engine {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.lle-profile {
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 8px 0 var(--wood-deep);
  padding: 0;
  overflow: hidden;
}
.lle-profile__header {
  background: var(--wood-deep);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lle-profile__header::before {
  content: '◆'; color: var(--copper-light);
}
.lle-profile__chain {
  margin-left: auto;
  font-size: 0.55rem;
  color: var(--gold-dark);
  background: var(--wood-black);
  padding: 4px 8px;
  letter-spacing: 0.1em;
  border: 1px solid var(--gold-dark);
}
.lle-profile__body { padding: 24px; }
.lle-profile__hero-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 3px dashed var(--parchment-edge);
}
.lle-profile__avatar {
  width: 64px; height: 64px;
  background: var(--wine);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 #b04848, inset 0 -3px 0 var(--wine-deep);
  display: grid; place-items: center;
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 1.2rem;
}
.lle-profile__handle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--wood-deep);
  margin-bottom: 6px;
}
.lle-profile__kingdom {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-family: 'Pixelify Sans', sans-serif;
}
.lle-profile__bio {
  background: var(--parchment);
  border-left: 4px solid var(--copper);
  padding: 14px 16px;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 18px;
  font-family: 'Pixelify Sans', sans-serif;
}
.lle-profile__deeds h5 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--wood-dark);
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
.lle-deed {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px dashed var(--parchment-edge);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-family: 'Pixelify Sans', sans-serif;
}
.lle-deed:last-child { border-bottom: none; }
.lle-deed__icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--copper-deep);
  font-size: 0.9rem;
}
.lle-deed__date {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--ink-faint);
  margin-left: auto;
  letter-spacing: 0.08em;
}

/* ----------------------------------------------------------------
   KINGDOMS
   ---------------------------------------------------------------- */
.kingdoms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.kingdom {
  padding: 18px 12px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  text-align: center;
  transition: transform 0.12s ease;
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 4px 0 var(--wood-deep);
}
.kingdom:hover { transform: translateY(-3px); }
.kingdom__crest {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  background: var(--kingdom-color, var(--gold));
  border: 3px solid var(--wood-deep);
  display: grid; place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  color: var(--cream);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.25);
}
.kingdom__name {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  color: var(--wood-deep);
}
.kingdom__type {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0;
  font-family: 'Pixelify Sans', sans-serif;
}

/* ----------------------------------------------------------------
   MOUNTS gallery — large image cards (no tabs)
   ---------------------------------------------------------------- */
.mount-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: 520px;
}
.mount-card {
  position: relative;
  background: var(--wood-deep);
  border: 4px solid var(--wood-deep);
  box-shadow: 0 6px 0 var(--wood-deep);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.mount-card:hover { transform: translateY(-3px); }
.mount-card--hero {
  grid-row: span 2;
}
.mount-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mount-card__image svg { width: 100%; height: 100%; display: block; }
.mount-card__overlay {
  position: absolute;
  inset: 0;
  /* P2-122. This was tuned against a flat colour wash, where eating the bottom
     half of the card cost nothing. With a drawn scene behind it that same ramp
     hides the ground the scene is standing on, so it now starts lower and stops
     short of opaque: enough to carry the name, not enough to delete the art. */
  background: linear-gradient(180deg,
    transparent 58%,
    rgba(26, 14, 8, 0.55) 78%,
    rgba(26, 14, 8, 0.88) 100%);
  pointer-events: none;
  z-index: 2;
}
.mount-card__info {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  z-index: 2;
}
.mount-card__name {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--gold-bright);
  text-shadow: 2px 2px 0 var(--wood-black);
  margin: 0 0 4px;
}
.mount-card--hero .mount-card__name { font-size: 1.2rem; }
.mount-card__rarity {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mount-card__rarity[data-r="legendary"] { color: var(--gold-bright); }
.mount-card__rarity[data-r="epic"] { color: #d4b0ff; }
.mount-card__rarity[data-r="rare"] { color: #9bc4ff; }
.mount-card__rarity[data-r="common"] { color: var(--cream-soft); }
.mount-card__placeholder-tag {
  position: absolute;
  top: 10px; right: 10px;
  padding: 4px 10px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  border: 2px solid var(--gold);
  z-index: 3;
}

/* ----------------------------------------------------------------
   ICON GRID (skills + weapons)
   ---------------------------------------------------------------- */
.icon-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}
.icon-tile {
  position: relative;
  aspect-ratio: 1;
  background: var(--parchment);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--parchment-lt), inset 0 -3px 0 var(--parchment-dk), 0 3px 0 var(--wood-deep);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.icon-tile:hover { transform: translateY(-2px); }
.icon-tile[data-r="legendary"] { background: linear-gradient(180deg, #fde08a 0%, #f4c75e 100%); box-shadow: inset 0 3px 0 #fff3c4, inset 0 -3px 0 var(--gold-dark), 0 3px 0 var(--wood-deep); }
.icon-tile[data-r="epic"] { background: linear-gradient(180deg, #a87dd0 0%, #8c5fb8 100%); box-shadow: inset 0 3px 0 #c4a5e0, inset 0 -3px 0 #5d3a85, 0 3px 0 var(--wood-deep); }
.icon-tile[data-r="rare"] { background: linear-gradient(180deg, #6f9bdc 0%, #4a7fc9 100%); box-shadow: inset 0 3px 0 #8eb5e5, inset 0 -3px 0 var(--blue-deep), 0 3px 0 var(--wood-deep); }
.icon-tile__name {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translate(-50%, 100%);
  padding: 4px 8px;
  background: var(--wood-deep);
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 10;
}
.icon-tile:hover .icon-tile__name { opacity: 1; }

/* ----------------------------------------------------------------
   BATTLEPASS — 25 tier strip
   ---------------------------------------------------------------- */
.bp-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
}
.bp-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.bp-card {
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 6px 0 var(--wood-deep);
  padding: 20px 22px;
}
.bp-card--premium {
  background: linear-gradient(180deg, #fef0c8 0%, var(--parchment) 100%);
  box-shadow: inset 0 4px 0 #fff3c4, inset 0 -4px 0 var(--parchment-edge), 0 0 0 3px var(--gold), 0 6px 0 var(--wood-deep);
}
.bp-card__label {
  display: inline-block;
  padding: 4px 10px;
  background: var(--wood-deep);
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.bp-card--premium .bp-card__label { background: var(--copper); }
.bp-card__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.95rem;
  color: var(--wood-deep);
  margin: 0 0 8px;
}
.bp-card__copy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-family: 'Pixelify Sans', sans-serif;
}
.bp-card__price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--copper-deep);
  padding: 6px 12px;
  background: var(--parchment);
  border: 2px solid var(--copper);
}

.bp-strip {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 3px;
  padding: 12px;
  background: var(--wood-deep);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--wood), inset 0 -4px 0 var(--wood-black), 0 6px 0 var(--wood-deep);
}
.bp-cell {
  aspect-ratio: 1;
  background: var(--parchment);
  border: 2px solid var(--wood);
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--wood-dark);
  position: relative;
  cursor: pointer;
}
.bp-cell[data-state="free"] {
  background: var(--grass-light);
  color: var(--wood-deep);
}
.bp-cell[data-state="premium"] {
  background: var(--gold);
  color: var(--wood-deep);
  box-shadow: inset 0 2px 0 var(--gold-bright), inset 0 -2px 0 var(--gold-dark);
}
.bp-cell[data-state="milestone"] {
  background: var(--copper);
  color: var(--cream);
  box-shadow: inset 0 2px 0 var(--copper-light), inset 0 -2px 0 var(--copper-deep);
}
.bp-cell[data-state="current"] {
  background: var(--wine);
  color: var(--cream);
  box-shadow: inset 0 2px 0 #b04848, inset 0 -2px 0 var(--wine-deep), 0 0 0 2px var(--gold-bright);
  z-index: 2;
}
.bp-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 18px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.bp-legend__swatch {
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  border: 2px solid var(--wood-deep);
  vertical-align: middle;
}

/* ----------------------------------------------------------------
   LEADERBOARDS (with multi-board tabs)
   ---------------------------------------------------------------- */
.lb-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
  background: var(--wood-deep);
  padding: 6px 6px 0;
  border: 4px solid var(--wood-deep);
  border-bottom: none;
}
.lb-tab {
  padding: 12px 18px;
  background: var(--wood);
  color: var(--cream-soft);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 3px solid var(--wood-deep);
  border-bottom: none;
  cursor: pointer;
  margin-right: 4px;
  transition: all 0.12s ease;
  box-shadow: inset 0 3px 0 var(--wood-light);
}
.lb-tab:hover { color: var(--gold-bright); }
.lb-tab.is-active {
  background: var(--parchment-lt);
  color: var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--parchment-lt);
  position: relative;
  top: 1px;
}
.lb-tab__icon {
  display: inline-block;
  margin-right: 6px;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 6px 0 var(--wood-deep);
}
.lb-table th, .lb-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 2px dashed var(--parchment-edge);
}
.lb-table th {
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 4px solid var(--wood);
}
.lb-table td { color: var(--wood-deep); font-size: 1rem; font-family: 'Pixelify Sans', sans-serif; }
.lb-table tr:last-child td { border-bottom: none; }
.lb-table tr:hover td { background: var(--gold-bright); }
.lb-table__rank { font-family: 'Press Start 2P', monospace; font-size: 0.8rem; color: var(--copper-deep); }
.lb-table__player { font-family: 'Press Start 2P', monospace; font-size: 0.68rem; color: var(--wood-deep); }

/* Podium tile */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  align-items: end;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto 32px;
}
.podium__step { text-align: center; }
.podium__avatar {
  width: 64px; height: 64px;
  margin: 0 auto 8px;
  background: var(--blue);
  border: 4px solid var(--wood-deep);
  display: grid; place-items: center;
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 1.2rem;
  box-shadow: inset 0 4px 0 #6f9bdc, inset 0 -4px 0 var(--blue-deep);
}
.podium__step--first .podium__avatar {
  width: 80px; height: 80px;
  background: var(--gold);
  color: var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--gold-bright), inset 0 -4px 0 var(--gold-dark);
}
.podium__plinth {
  padding: 12px 8px 22px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 4px 0 var(--wood-deep);
}
.podium__step--first .podium__plinth {
  background: var(--gold);
  box-shadow: inset 0 4px 0 var(--gold-bright), inset 0 -4px 0 var(--gold-dark), 0 4px 0 var(--wood-deep);
}
.podium__rank { display: block; font-family: 'Press Start 2P', monospace; font-size: 1rem; margin-bottom: 6px; }
.podium__name { display: block; font-family: 'Press Start 2P', monospace; font-size: 0.62rem; margin-bottom: 4px; }
.podium__votes { display: block; font-size: 0.9rem; font-family: 'Pixelify Sans', sans-serif; color: var(--ink-soft); }
.podium__step--first .podium__votes { color: var(--wood-deep); }

/* ----------------------------------------------------------------
   CORE GAMEPLAY — image cards
   ---------------------------------------------------------------- */
.gameplay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gameplay-card {
  position: relative;
  background: var(--wood-deep);
  border: 4px solid var(--wood-deep);
  box-shadow: 0 6px 0 var(--wood-deep);
  overflow: hidden;
  transition: transform 0.12s ease;
}
.gameplay-card:hover { transform: translateY(-3px); }
.gameplay-card__image {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--wood-deep);
}
.gameplay-card__image svg { width: 100%; height: 100%; display: block; }
.gameplay-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  border: 2px solid var(--gold);
  z-index: 2;
}
.gameplay-card__body {
  padding: 22px 22px 24px;
  background: var(--parchment);
}
.gameplay-card__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--wood-deep);
  margin: 0 0 10px;
  text-shadow: 2px 2px 0 var(--parchment-lt);
}
.gameplay-card__copy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
  font-family: 'Pixelify Sans', sans-serif;
}

/* ----------------------------------------------------------------
   KOHIRA → NERATHIS storyline (vertical journey)
   ---------------------------------------------------------------- */
.journey {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}
.journey__node {
  position: relative;
  padding: 28px 24px;
  background: var(--parchment);
  border: 4px solid var(--wood-deep);
  box-shadow: 0 6px 0 var(--wood-deep);
  text-align: left;
  z-index: 2;
}
.journey__node[data-state="done"] {
  background: var(--grass-light);
  box-shadow: 0 6px 0 var(--grass-deep);
}
.journey__node[data-state="now"] {
  background: var(--gold);
  box-shadow: inset 0 4px 0 var(--gold-bright), inset 0 -4px 0 var(--gold-dark), 0 6px 0 var(--copper-deep);
  z-index: 3;
  transform: translateY(-8px);
}
.journey__node[data-state="next"] {
  background: var(--parchment-lt);
}
.journey__phase {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: 8px;
}
.journey__node[data-state="done"] .journey__phase { color: var(--grass-deep); }
.journey__node[data-state="now"] .journey__phase { color: var(--wine); }
.journey__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.95rem;
  color: var(--wood-deep);
  margin: 0 0 10px;
}
.journey__copy {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  font-family: 'Pixelify Sans', sans-serif;
}
.journey__check {
  display: inline-block;
  margin-left: 8px;
  color: var(--grass-deep);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
}

/* ----------------------------------------------------------------
   ECONOMY / Built on Monad pillars
   ---------------------------------------------------------------- */
.econ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.econ-card {
  padding: 26px 22px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 6px 0 var(--wood-deep);
}
.econ-card__icon {
  width: 48px; height: 48px;
  margin-bottom: 16px;
  display: grid; place-items: center;
  background: var(--wood-deep);
  color: var(--gold-bright);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--wood-dark), inset 0 -3px 0 var(--wood-black);
}
.econ-card__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.78rem;
  color: var(--wood-deep);
  margin: 0 0 8px;
}
.econ-card__copy { font-size: 0.95rem; color: var(--ink-soft); margin: 0; font-family: 'Pixelify Sans', sans-serif; }

/* ----------------------------------------------------------------
   ROADMAP
   ---------------------------------------------------------------- */
.roadmap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}
.roadmap::before {
  content: '';
  position: absolute;
  top: 56px; left: 5%; right: 5%;
  height: 4px;
  background: repeating-linear-gradient(90deg, var(--wood-deep) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.roadmap__stage {
  position: relative;
  z-index: 1;
  text-align: center;
}
.roadmap__dot {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  display: grid; place-items: center;
  font-family: 'Press Start 2P', monospace;
  color: var(--wood-deep);
  font-size: 0.85rem;
  box-shadow: inset 0 3px 0 var(--parchment-lt), inset 0 -3px 0 var(--parchment-dk), 0 4px 0 var(--wood-deep);
}
.roadmap__stage[data-state="done"] .roadmap__dot { background: var(--grass-light); color: var(--grass-deep); box-shadow: inset 0 3px 0 #b4e08e, inset 0 -3px 0 var(--grass-deep), 0 4px 0 var(--wood-deep); }
.roadmap__stage[data-state="now"] .roadmap__dot { background: var(--copper); color: var(--cream); box-shadow: inset 0 3px 0 var(--copper-light), inset 0 -3px 0 var(--copper-deep), 0 4px 0 var(--wood-deep); transform: scale(1.15); }
.roadmap__phase {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.roadmap__stage[data-state="done"] .roadmap__phase { color: var(--grass-deep); }
.roadmap__stage[data-state="now"] .roadmap__phase { color: var(--copper-deep); }
.roadmap__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  color: var(--wood-deep);
  margin: 0 0 8px;
}
.roadmap__copy {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
  font-family: 'Pixelify Sans', sans-serif;
  line-height: 1.45;
}

/* ----------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item {
  margin-bottom: 12px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 4px 0 var(--wood-deep);
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  color: var(--wood-deep);
  letter-spacing: 0.02em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: 'Press Start 2P', monospace;
  font-size: 1.2rem;
  color: var(--copper-deep);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 24px 20px; color: var(--ink-soft); font-size: 1.05rem; font-family: 'Pixelify Sans', sans-serif; }

/* ----------------------------------------------------------------
   CTA block
   ---------------------------------------------------------------- */
.cta-block {
  position: relative;
  padding: 56px 40px;
  background: var(--wood-dark);
  border: 6px solid var(--wood-deep);
  text-align: center;
  color: var(--cream);
  box-shadow: inset 0 6px 0 var(--wood), inset 0 -6px 0 var(--wood-deep), 0 8px 0 rgba(0,0,0,0.3);
}
.cta-block h2 { color: var(--gold-bright); text-shadow: 3px 3px 0 var(--wood-deep); }
.cta-block p { color: var(--cream-soft); }

/* ----------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------- */
.footer {
  background: var(--wood-deep);
  color: var(--cream-soft);
  padding: 56px 0 24px;
  border-top: 6px solid var(--wood);
  box-shadow: inset 0 6px 0 var(--wood-deep);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer__brand-block p { max-width: 320px; font-size: 0.95rem; margin-top: 14px; color: var(--cream-soft); }
.footer__col h5 {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 2px 2px 0 var(--wood-black);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 10px; }
.footer__col a { color: var(--cream-soft); font-size: 0.95rem; font-family: 'Pixelify Sans', sans-serif; }
.footer__col a:hover { color: var(--gold-bright); }
.footer__bottom {
  padding-top: 24px;
  border-top: 3px dashed var(--wood);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--cream-soft);
  font-family: 'Pixelify Sans', sans-serif;
}

/* ----------------------------------------------------------------
   HOME LEADERBOARD — Top 3 medal podium
   ---------------------------------------------------------------- */
.home-medals {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 18px;
  align-items: end;
  max-width: 920px;
  margin: 0 auto;
}
.medal-card {
  position: relative;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 6px 0 var(--wood-deep);
  padding: 28px 22px 24px;
  text-align: center;
  transition: transform 0.15s ease;
}
.medal-card:hover { transform: translateY(-3px); }
.medal-card--gold {
  background: linear-gradient(180deg, #fde08a 0%, #f4c75e 100%);
  box-shadow: inset 0 4px 0 #fff3c4, inset 0 -4px 0 var(--gold-dark), 0 0 0 4px var(--wood-deep), 0 8px 0 var(--copper-deep);
  padding-top: 34px;
  padding-bottom: 30px;
  transform: translateY(-12px);
}
.medal-card--gold:hover { transform: translateY(-16px); }
.medal-card--silver {
  background: linear-gradient(180deg, #e8e4d4 0%, #c4bca8 100%);
  box-shadow: inset 0 4px 0 #f4efde, inset 0 -4px 0 #908a78, 0 6px 0 var(--wood-deep);
}
.medal-card--bronze {
  background: linear-gradient(180deg, #d49968 0%, #a8714a 100%);
  box-shadow: inset 0 4px 0 #e0ad7e, inset 0 -4px 0 #7a5230, 0 6px 0 var(--wood-deep);
}
.medal-card__medal {
  width: 80px; height: 80px;
  margin: -52px auto 12px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  display: grid; place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk);
  position: relative;
  z-index: 2;
}
.medal-card--gold .medal-card__medal {
  background: linear-gradient(180deg, #fff3c4 0%, #c89a2f 100%);
  color: var(--wood-deep);
  box-shadow: inset 0 4px 0 #fff8d8, inset 0 -4px 0 var(--gold-deep);
  width: 96px; height: 96px;
  margin-top: -60px;
  font-size: 1.7rem;
}
.medal-card--silver .medal-card__medal {
  background: linear-gradient(180deg, #f4efde 0%, #908a78 100%);
  color: var(--wood-deep);
  box-shadow: inset 0 4px 0 #fff, inset 0 -4px 0 #6a6454;
}
.medal-card--bronze .medal-card__medal {
  background: linear-gradient(180deg, #e0ad7e 0%, #7a5230 100%);
  color: var(--cream);
  box-shadow: inset 0 4px 0 #efc69e, inset 0 -4px 0 #4a2f1c;
}
.medal-card__avatar {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  background: var(--wood-deep);
  border: 3px solid var(--wood-deep);
  display: grid; place-items: center;
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  box-shadow: inset 0 3px 0 var(--wood), inset 0 -3px 0 var(--wood-black);
}
.medal-card__handle {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.78rem;
  color: var(--wood-deep);
  margin: 0 0 4px;
}
.medal-card__class {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0 0 14px;
  font-family: 'Pixelify Sans', sans-serif;
}
.medal-card__ep {
  display: inline-block;
  padding: 6px 14px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border: 2px solid var(--gold);
}
.medal-card--gold .medal-card__ep { background: var(--wood-deep); color: var(--gold-bright); }

/* ----------------------------------------------------------------
   AREA PROMO — single big dramatic feature card
   ---------------------------------------------------------------- */
.area-promo {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: var(--wood-deep);
  border: 6px solid var(--wood-deep);
  box-shadow: inset 0 6px 0 var(--wood), inset 0 -6px 0 var(--wood-black), 0 10px 0 var(--wood-deep);
  overflow: hidden;
}
.area-promo__image {
  position: relative;
  min-height: 480px;
  background: var(--wood-black);
  overflow: hidden;
}
.area-promo__image svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0; }
.area-promo__tag {
  position: absolute;
  top: 16px; left: 16px;
  padding: 6px 12px;
  background: var(--copper);
  color: var(--cream);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  border: 2px solid var(--wood-deep);
  z-index: 3;
}
.area-promo__body {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--cream);
}
.area-promo__title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--gold-bright);
  text-shadow: 3px 3px 0 var(--wood-black);
  margin: 12px 0 16px;
  line-height: 1.2;
}
.area-promo__lead {
  font-size: 1.05rem;
  color: var(--cream-soft);
  margin: 0 0 24px;
  font-family: 'Pixelify Sans', sans-serif;
}
.area-promo__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.area-promo__features li {
  padding: 10px 0 10px 24px;
  position: relative;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
  color: var(--cream);
  border-bottom: 2px dashed rgba(247, 238, 207, 0.15);
}
.area-promo__features li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 10px;
  color: var(--copper-light);
}
.area-promo__features li:last-child { border-bottom: none; }
.area-promo__features strong {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  color: var(--gold-bright);
  display: inline-block;
  margin-right: 8px;
}

/* ----------------------------------------------------------------
   USP GRID — "What makes Estova unique"
   ---------------------------------------------------------------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.usp-card {
  position: relative;
  background: var(--wood-deep);
  border: 4px solid var(--wood-deep);
  box-shadow: 0 6px 0 var(--wood-deep);
  overflow: hidden;
  transition: transform 0.12s ease;
}
.usp-card:hover { transform: translateY(-3px); }
.usp-card__image {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.usp-card__image svg { width: 100%; height: 100%; display: block; }
.usp-card__placeholder-tag {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  background: var(--wood-deep);
  color: var(--gold-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.45rem;
  letter-spacing: 0.1em;
  border: 2px solid var(--gold);
  z-index: 2;
}
.usp-card__body {
  padding: 22px 22px 24px;
  background: var(--parchment);
}
.usp-card__title {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.78rem;
  color: var(--wood-deep);
  margin: 0 0 10px;
  text-shadow: 2px 2px 0 var(--parchment-lt);
}
.usp-card__copy {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
  font-family: 'Pixelify Sans', sans-serif;
}

.page-header { padding: 80px 0 40px; text-align: center; }

/* Wiki cards (kept) */
.wiki-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wiki-card {
  padding: 24px 22px;
  background: var(--parchment-lt);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 4px 0 var(--wood-deep);
  transition: transform 0.12s ease;
}
.wiki-card:hover { transform: translateY(-3px); }
.wiki-card__cat { font-family: 'Press Start 2P', monospace; font-size: 0.55rem; letter-spacing: 0.1em; color: var(--copper-deep); margin-bottom: 8px; text-transform: uppercase; }
.wiki-card__title { font-family: 'Press Start 2P', monospace; font-size: 0.8rem; color: var(--wood-deep); margin: 0 0 8px; }
.wiki-card__count { font-size: 0.95rem; color: var(--ink-faint); font-family: 'Pixelify Sans', sans-serif; font-style: italic; }

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1080px) {
  .showcase { grid-template-columns: 280px 1fr; }
  .icon-row { grid-template-columns: repeat(6, 1fr); }
  .roadmap { grid-template-columns: repeat(3, 1fr); }
  .roadmap::before { display: none; }
}
@media (max-width: 960px) {
  .kingdoms { grid-template-columns: repeat(2, 1fr); }
  .alpha-proof__inner { grid-template-columns: 1fr; }
  .alpha-proof__stats { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: 1fr; }
  .showcase__list { flex-direction: row; overflow-x: auto; }
  .showcase__view { min-height: 360px; }
  .lore-engine { grid-template-columns: 1fr; }
  .mount-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: auto; }
  .mount-card--hero { grid-column: span 2; grid-row: auto; min-height: 280px; }
  .gameplay-grid { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .wiki-grid { grid-template-columns: 1fr; }
  .icon-row { grid-template-columns: repeat(4, 1fr); }
  .bp-cards { grid-template-columns: 1fr; }
  .bp-header { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .econ-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: 1fr; }
  .home-medals { grid-template-columns: 1fr; max-width: 380px; }
  .medal-card--gold { transform: none; }
  .medal-card--gold:hover { transform: translateY(-3px); }
  .area-promo { grid-template-columns: 1fr; }
  .area-promo__image { min-height: 280px; }
}
@media (max-width: 600px) {
  .container, .nav__inner { padding: 0 16px; }
  .section { padding: 46px 0; }
  .hero { padding: 32px 0 48px; }
  .bp-strip { grid-template-columns: repeat(5, 1fr); }
}

/* ============ Living Lore Engine — Chronicle mockup ============ */
.lle-stage { display:grid; grid-template-columns:380px 1fr; gap:24px; align-items:start; max-width:1080px; margin:0 auto; }
.lle-profile {
  background:var(--parchment-lt);
  border:4px solid var(--wood-deep);
  box-shadow:inset 0 4px 0 var(--parchment-lt), inset 0 -4px 0 var(--parchment-dk), 0 6px 0 var(--wood-deep);
  padding:22px 22px 24px; text-align:left;
}
.lle-profile__header { display:flex; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:14px; border-bottom:3px dashed var(--parchment-edge); }
.lle-profile__avatar {
  width:64px; height:64px;
  background:var(--wood-deep);
  border:3px solid var(--wood-deep);
  box-shadow:inset 0 3px 0 var(--wood), inset 0 -3px 0 var(--wood-black);
  display:grid; place-items:center; padding:6px;
}
.lle-profile__avatar svg { width:100%; height:100%; image-rendering:pixelated; }
.lle-profile__name { font-family:'Press Start 2P', monospace; font-size:0.95rem; color:var(--wood-deep); letter-spacing:0.04em; margin-bottom:4px; text-shadow:none; }
.lle-profile__title { font-size:0.85rem; color:var(--copper-deep); font-family:'Pixelify Sans', sans-serif; font-style:italic; }
.lle-profile__bio {
  background:var(--parchment); border:2px solid var(--wood-dark);
  padding:14px 16px; font-family:'Pixelify Sans', sans-serif;
  font-size:1rem; color:var(--ink-soft); font-style:italic;
  margin-bottom:18px; line-height:1.5;
}
.lle-profile__stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.lle-profile__stats > div {
  background:var(--wood-deep); color:var(--cream-soft);
  padding:8px 6px; text-align:center;
  font-family:'Pixelify Sans', sans-serif; font-size:0.75rem;
  border:2px solid var(--wood-deep);
  box-shadow:inset 0 2px 0 var(--wood), inset 0 -2px 0 var(--wood-black);
}
.lle-profile__stats span {
  display:block; font-family:'Press Start 2P', monospace;
  font-size:1rem; color:var(--gold-bright); margin-bottom:4px;
  text-shadow:1px 1px 0 var(--wood-black);
}

.lle-chronicle {
  background:#f7eecf;
  border:4px solid var(--wood-deep);
  box-shadow:inset 0 4px 0 #fff7da, inset 0 -4px 0 #d9c89a, 0 6px 0 var(--wood-deep);
  padding:22px 24px 24px; text-align:left; position:relative;
}
.lle-chronicle::before, .lle-chronicle::after {
  content:""; position:absolute; left:0; right:0; height:8px;
  background-image:radial-gradient(circle, var(--parchment-dk) 1.5px, transparent 2px);
  background-size:10px 8px; opacity:0.5;
}
.lle-chronicle::before { top:0; }
.lle-chronicle::after { bottom:0; }
.lle-chronicle__title {
  display:flex; align-items:center; gap:10px;
  font-family:'Press Start 2P', monospace; font-size:0.78rem; color:var(--wood-deep);
  margin-bottom:16px; padding-bottom:12px;
  border-bottom:3px dashed var(--parchment-edge);
  text-shadow:none;
}
.lle-chronicle__seal { color:var(--copper-deep); }
.lle-chronicle__date { margin-left:auto; font-size:0.55rem; color:var(--ink-faint); letter-spacing:0.1em; }
.lle-chronicle__entries { list-style:none; padding:0; margin:0; }
.lle-chronicle__entries li {
  padding:12px 0 14px 20px;
  border-bottom:2px dashed var(--parchment-edge);
  position:relative; font-family:'Pixelify Sans', sans-serif;
}
.lle-chronicle__entries li:last-child { border-bottom:none; }
.lle-chronicle__entries li::before {
  content:'◆'; position:absolute; left:0; top:14px;
  color:var(--gold-dark); font-size:0.75rem;
}
.lle-chronicle__npc {
  display:block; font-family:'Press Start 2P', monospace;
  font-size:0.6rem; color:var(--copper-deep);
  letter-spacing:0.08em; margin-bottom:6px;
  text-transform:uppercase; text-shadow:none;
}
.lle-chronicle__quote { font-size:1.04rem; color:var(--ink-soft); font-style:italic; line-height:1.5; }

@media (max-width:880px) {
  .lle-stage { grid-template-columns:1fr; }
}

/* ============ PvP Ranked Arena ============ */
.arena {
  position:relative;
  background:var(--wood-dark);
  border:6px solid var(--wood-deep);
  box-shadow:inset 0 6px 0 var(--wood), inset 0 -6px 0 var(--wood-deep), 0 10px 0 var(--wood-deep);
  padding:32px;
  overflow:hidden;
}

/* The capture behind the panel. The wood stays underneath as the fallback, so
   a background that fails to load leaves the panel exactly as it was rather
   than a hole with seven medals floating in it. */
.arena__bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  image-rendering:pixelated;
  z-index:0;
}

/* Seven medals and two headings sit on top of a busy forest, so the scrim is
   doing real work rather than being decoration. It is heavier on the left,
   where the copy is, and lighter on the right, where the scene is worth
   seeing. */
.arena__scrim {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(43,29,18,0.92) 0%, rgba(43,29,18,0.78) 24%, rgba(43,29,18,0.44) 52%, rgba(43,29,18,0.30) 100%),
    linear-gradient(180deg, rgba(43,29,18,0.30) 0%, rgba(43,29,18,0) 38%);
}
.arena > *:not(.arena__bg):not(.arena__scrim) { position:relative; z-index:2; }
.arena__top {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:32px; flex-wrap:wrap; gap:20px;
}
.arena__title-area { text-align:left; }
.arena__title-area h2 { margin:6px 0 8px; color:var(--gold-bright); text-shadow:2px 2px 0 var(--wood-black); }
.arena__title-area p { color:var(--cream-soft); font-family:'Pixelify Sans', sans-serif; max-width:560px; margin:0; }
.arena__modes { display:flex; gap:8px; flex-wrap:wrap; }
.arena__mode {
  padding:10px 16px;
  background:var(--wood-deep); color:var(--gold-bright);
  font-family:'Press Start 2P', monospace; font-size:0.62rem;
  letter-spacing:0.1em;
  border:2px solid var(--gold-dark);
  box-shadow:inset 0 2px 0 var(--wood), inset 0 -2px 0 var(--wood-black);
}
.arena__mode.is-active {
  background:var(--gold); color:var(--wood-deep);
  border-color:var(--wood-deep);
  box-shadow:inset 0 2px 0 var(--gold-bright), inset 0 -2px 0 var(--gold-dark);
}
.arena__ladder {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:10px;
  margin-bottom:24px;
}
.arena__tier {
  background:var(--parchment-lt);
  border:3px solid var(--wood-deep);
  box-shadow:inset 0 3px 0 var(--parchment-lt), inset 0 -3px 0 var(--parchment-dk), 0 4px 0 var(--wood-deep);
  padding:16px 8px 12px;
  text-align:center;
  transition:transform 0.15s ease;
  position:relative;
}
.arena__tier:hover { transform:translateY(-3px); }
.arena__tier-medal {
  width:42px; height:42px;
  margin:0 auto 10px;
  display:grid; place-items:center;
  border-radius:50%;
  border:3px solid var(--wood-deep);
  font-family:'Press Start 2P', monospace;
  font-size:0.85rem; color:var(--wood-deep);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.25);
}
.arena__tier-medal[data-t="iron"]     { background:#8a8474; color:#3a3530; }
.arena__tier-medal[data-t="bronze"]   { background:#b8703a; color:#3a1c08; }
.arena__tier-medal[data-t="silver"]   { background:#c4bca8; color:#3a3530; }
.arena__tier-medal[data-t="gold"]     { background:#f4c75e; color:#5a4624; }
.arena__tier-medal[data-t="platinum"] { background:#a8d6d0; color:#1f4a4a; }
.arena__tier-medal[data-t="diamond"]  { background:#94c1f4; color:#1f3a6a; }
.arena__tier-medal[data-t="champion"] { background:#c44a3a; color:#fde08a; box-shadow:inset 0 2px 0 #e08a72, inset 0 -2px 0 #5a1818, 0 0 10px rgba(196, 74, 58, 0.6); }
.arena__tier-name {
  font-family:'Press Start 2P', monospace;
  font-size:0.55rem; letter-spacing:0.05em;
  color:var(--wood-deep); text-transform:uppercase;
}
.arena__tier-reward {
  display:block; font-size:0.78rem;
  color:var(--ink-faint); font-family:'Pixelify Sans', sans-serif;
  margin-top:4px; font-style:italic;
}
.arena__footer {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding-top:18px; border-top:3px dashed rgba(247, 238, 207, 0.2);
}
.arena__season {
  font-family:'Press Start 2P', monospace;
  font-size:0.6rem; color:var(--gold-bright);
  letter-spacing:0.1em; text-transform:uppercase;
}
.arena__cta { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:960px) { .arena__ladder { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:600px) { .arena__ladder { grid-template-columns:repeat(2, 1fr); } }

/* ================================================================
   DETAIL PASS — richer pixel-art depth on cards, icons, chrome
   ================================================================ */

/* ---- Icon tiles: recessed slot with bevel + shine ---- */
.econ-card__icon,
.usp-card__icon,
.feature__icon {
  position: relative;
  background:
    linear-gradient(180deg, #4a3020 0%, var(--wood-deep) 55%, #2a1a0e 100%) !important;
  box-shadow:
    inset 0 0 0 2px var(--wood-black),
    inset 0 3px 0 2px #6a4830,
    inset 0 -3px 0 2px #1a0e08,
    0 3px 0 rgba(0,0,0,0.3) !important;
  overflow: hidden;
}
.econ-card__icon::after,
.usp-card__icon::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 3px;
  height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.14), transparent);
  pointer-events: none;
}
.econ-card__icon svg,
.usp-card__icon svg {
  position: relative;
  z-index: 1;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}

/* ---- Life-skill list icons: framed slot ---- */
.showcase__item-icon {
  width: 30px !important;
  height: 30px !important;
  background: rgba(26, 14, 8, 0.45);
  border: 2px solid rgba(26, 14, 8, 0.7);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.1), inset 0 -2px 0 rgba(0,0,0,0.4);
  padding: 2px;
}
.showcase__item.is-active .showcase__item-icon {
  background: rgba(61, 40, 17, 0.35);
  border-color: var(--wood-deep);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.35);
}
.showcase__item-icon svg { image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.45)); }

/* ---- Panel cards: corner rivets + inner bevel ---- */
.econ-card, .usp-card, .feature, .wiki-card,
.medal-card, .arena__tier, .kingdom, .faq__item, .lle-profile, .lle-chronicle {
  position: relative;
}
.econ-card::before, .usp-card::before, .wiki-card::before,
.lle-profile::before, .arena__tier::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(90, 58, 30, 0.16);
  pointer-events: none;
  z-index: 0;
}
/* Corner rivet studs on the big feature cards */
.usp-card::after, .econ-card::after {
  content: "";
  position: absolute;
  top: 7px; left: 7px;
  width: 3px; height: 3px;
  background: var(--wood-dark);
  box-shadow:
    calc(100% + 0px) 0 0 0 var(--wood-dark);
  pointer-events: none;
  opacity: 0.5;
}

/* ---- Section eyebrow: notched corners + shine ---- */
.section__eyebrow {
  position: relative;
  clip-path: polygon(
    0 3px, 3px 3px, 3px 0,
    calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px,
    100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%,
    3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)
  );
}
.section__eyebrow::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 3px;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  pointer-events: none;
}

/* ---- Nav: wood grain + polish ---- */
.nav {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.06) 0 2px,
      transparent 2px 7px,
      rgba(255,255,255,0.03) 7px 8px,
      transparent 8px 14px
    );
}
.nav__social {
  position: relative;
  overflow: hidden;
}
.nav__social::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 2px;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
  pointer-events: none;
}
.nav__social svg { position: relative; z-index: 1; }
.nav__link { position: relative; transition: all 0.12s steps(2); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 3px;
  height: 34%;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}

/* ---- Wood sections: subtle plank grain ---- */
.section--wood {
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.05) 0 3px,
      transparent 3px 11px,
      rgba(255,255,255,0.025) 11px 12px,
      transparent 12px 22px
    );
}

/* ---- Parchment sections: faint fiber texture ---- */
.section--parchment {
  background-image:
    repeating-linear-gradient(0deg, rgba(138,111,69,0.045) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(138,111,69,0.03) 0 1px, transparent 1px 5px);
}

/* ---- Arena tier medals: metallic sheen ---- */
.arena__tier-medal {
  position: relative;
  overflow: hidden;
}
.arena__tier-medal::after {
  content: "";
  position: absolute;
  left: 15%; top: 12%;
  width: 40%; height: 32%;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  pointer-events: none;
}

/* ---- Medal cards (top-3): laurel shine ---- */
.medal-card__medal {
  position: relative;
  overflow: hidden;
}
.medal-card__medal::after {
  content: "";
  position: absolute;
  left: 12%; top: 10%;
  width: 42%; height: 30%;
  background: rgba(255,255,255,0.35);
  pointer-events: none;
}

/* ---- Mount cards: inner glow frame ---- */
.mount-card {
  position: relative;
}
.mount-card::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(253, 224, 138, 0.14);
  pointer-events: none;
  z-index: 3;
}

/* ---- Showcase view: vignette so art pops ---- */
.showcase__view::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 60px rgba(26, 14, 8, 0.35);
}

/* ---- FAQ: chevron polish + hover lift ---- */
.faq__item summary { transition: background 0.12s ease; }
.faq__item summary:hover { background: rgba(244, 199, 94, 0.14); }
.faq__item[open] summary { background: rgba(244, 199, 94, 0.18); }

/* ---- Placeholder tags: notched + shine ---- */
.showcase__placeholder-tag,
.mount-card__placeholder-tag,
.usp-card__tag,
.area-promo__tag {
  clip-path: polygon(
    0 2px, 2px 2px, 2px 0,
    calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
  );
}

/* ---- Kingdom crests: emboss ---- */
.kingdom__crest {
  position: relative;
  overflow: hidden;
}
.kingdom__crest::after {
  content: "";
  position: absolute;
  left: 3px; right: 3px; top: 3px;
  height: 32%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), transparent);
  pointer-events: none;
}

/* ---- Hero alpha plank: pulsing gem ---- */
.hero__alpha-label { position: relative; }
.hero__alpha-label::before {
  content: "◆";
  margin-right: 8px;
  color: var(--copper-light);
  animation: gem-pulse 2s steps(2) infinite;
}
@keyframes gem-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__alpha-label::before { animation: none; }
}

/* ---- Trailer frame: scanline detail ---- */
.trailer__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.07) 0 1px,
    transparent 1px 3px
  );
  z-index: 2;
}


/* ================================================================
   ADDED 2026-08-06
   Mobile navigation, table scroll, countdown, capture,
   trading cards page, founder page.
   ================================================================ */

/* ---------------- mobile nav ---------------- */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: var(--wood);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--wood-light), inset 0 -3px 0 var(--wood-deep);
  transition: background 0.15s ease;
}
.nav__toggle-bar {
  display: block;
  width: 20px; height: 3px;
  background: var(--cream);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav__toggle:hover { background: var(--gold); }
.nav__toggle:hover .nav__toggle-bar { background: var(--wood-deep); }

body.nav-open .nav__toggle { background: var(--gold); }
body.nav-open .nav__toggle .nav__toggle-bar { background: var(--wood-deep); }
body.nav-open .nav__toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav__toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav__toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav__toggle { display: flex; }
  .nav__socials { display: none; }

  .nav__menu {
    position: fixed;
    top: 76px; left: 0; right: 0;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    background: var(--wood-dark);
    border-bottom: 4px solid var(--wood-deep);
    box-shadow: 0 8px 0 rgba(0,0,0,0.25);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 99;
  }
  body.nav-open .nav__menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* override the old hard hide */
  .nav__links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 16px 18px;
  }
  .nav__links li { width: 100%; }
  .nav__link {
    display: block;
    width: 100%;
    padding: 15px 14px;
    font-size: 0.68rem;
    border-bottom: 2px solid rgba(0,0,0,0.22);
  }
  .nav__link.is-active { border: 3px solid var(--wood-deep); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__menu, .nav__toggle-bar { transition: none; }
}

/* ---------------- horizontal scroll wrapper for wide tables ---------------- */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 600px) {
  .table-scroll { box-shadow: inset -12px 0 12px -12px rgba(0,0,0,0.45); }
}

/* ---------------- countdown ---------------- */
.cd { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cd__unit {
  min-width: 76px;
  padding: 12px 10px 10px;
  background: var(--wood-deep);
  border: 4px solid var(--wood-black);
  box-shadow: inset 0 4px 0 var(--wood), inset 0 -4px 0 rgba(0,0,0,0.4);
  text-align: center;
}
.cd__unit b {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.3rem;
  color: var(--gold-bright);
  line-height: 1.2;
}
.cd__unit i {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.cd__soon {
  display: inline-block;
  padding: 12px 20px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.72rem;
  color: var(--gold-bright);
  background: var(--wood-deep);
  border: 4px solid var(--wood-black);
  box-shadow: inset 0 4px 0 var(--wood), inset 0 -4px 0 rgba(0,0,0,0.4);
}

/* ---------------- capture block ---------------- */
.capture { max-width: 560px; margin: 0 auto; text-align: center; }
.capture__form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.capture__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 16px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--parchment-lt);
  border: 4px solid var(--wood-dark);
  box-shadow: inset 0 4px 0 rgba(0,0,0,0.10);
}
.capture__input::placeholder { color: var(--ink-faint); }
.capture__input:focus { outline: 3px solid var(--gold); outline-offset: 2px; }
.capture__note { margin-top: 12px; font-size: 0.9rem; color: var(--ink-faint); }
.capture__note.is-warn { color: var(--red); font-weight: 600; }
.section--wood .capture__note { color: var(--cream-soft); }

/* ---------------- shared art placeholder ---------------- */
/* ART NOT DRAWN YET
   ----------------------------------------------------------------------------
   These used to print the filename the art will eventually live at, which is
   useful to us and reads to a visitor as a half-built page. The path now lives
   in data-art, where the art pipeline can still find it, and the box says what
   is coming in words a buyer understands.

   The overflow rules matter as much as the wording: at a narrow width the old
   version pushed its text past a dashed border, which is the single loudest
   way to look broken. */
.art-slot {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  background:
    repeating-linear-gradient(45deg,
      rgba(0,0,0,0.05) 0 8px, transparent 8px 16px),
    var(--parchment-dk);
  border: 4px dashed var(--parchment-edge);
  color: var(--ink-faint);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 10px;

  /* Never let the label decide the size of the box it is sitting in. */
  overflow: hidden;
  min-width: 0;
}
.art-slot > span {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.art-slot > small {
  font-size: 0.85em;
  opacity: 0.65;
  letter-spacing: 0.02em;
}
/* Below this there is no room for two lines, so keep the noun and drop the rest. */
@container (max-width: 90px) {
  .art-slot > small { display: none; }
}
.art-slot[data-art]::after {
  /* The filename, on demand, for whoever is producing the art.
     Add class="show-art-paths" to <body> to see them. */
  content: attr(data-art);
  display: none;
  position: absolute;
  inset: auto 2px 2px;
  font-size: 0.42rem;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.show-art-paths .art-slot[data-art]::after { display: block; }
.section--wood .art-slot { background: rgba(0,0,0,0.22); border-color: var(--wood); color: var(--cream-soft); }

/* ---------------- pack hero ---------------- */
.pack-hero { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 44px; align-items: center; }
.pack-hero__art { position: relative; }
.pack-hero__slot { aspect-ratio: 2 / 3; max-width: 340px; margin: 0 auto; }
.pack-hero__ribbon {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  color: var(--cream);
  background: var(--copper);
  border: 3px solid var(--copper-deep);
  box-shadow: inset 0 3px 0 var(--copper-light), inset 0 -3px 0 var(--copper-deep);
}
.pack-hero__title { margin: 0 0 16px; }
.pack-hero__lead { margin-bottom: 22px; }
.pack-hero__cd { margin-bottom: 22px; }
.pack-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.pack-stat {
  padding: 10px 14px;
  background: rgba(0,0,0,0.20);
  border: 3px solid var(--wood-deep);
}
.pack-stat b { display: block; font-family: 'Press Start 2P', monospace; font-size: 0.8rem; color: var(--gold-bright); }
.pack-stat span { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--cream-soft); }

@media (max-width: 880px) {
  .pack-hero { grid-template-columns: 1fr; gap: 28px; }
  .pack-hero__slot { max-width: 260px; }
}

/* ---------------- rarity strip ---------------- */
.rarity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rarity {
  padding: 18px 16px 20px;
  background: var(--parchment-lt);
  border: 4px solid var(--parchment-edge);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.5), 0 4px 0 var(--parchment-edge);
  text-align: center;
}
.rarity__chip {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--cream);
  border: 3px solid rgba(0,0,0,0.35);
}
.rarity--common   .rarity__chip { background: #8a8474; }
.rarity--uncommon .rarity__chip { background: var(--teal-deep); }
.rarity--rare     .rarity__chip { background: var(--blue-deep); }
.rarity--legend   .rarity__chip { background: var(--gold-dark); color: var(--wood-deep); }
.rarity__stars { font-size: 0.95rem; color: var(--gold-dark); letter-spacing: 3px; margin-bottom: 8px; }
.rarity__count { font-family: 'Press Start 2P', monospace; font-size: 0.72rem; color: var(--ink); }
.rarity__note { margin-top: 10px; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 760px) { .rarity-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- card gallery ---------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.tcard {
  background: var(--parchment-lt);
  border: 4px solid var(--wood-dark);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.45), 0 5px 0 var(--wood-deep);
  padding: 8px;
}
.tcard__art { aspect-ratio: 4 / 3; margin-bottom: 8px; font-size: 0.42rem; }
.tcard__name {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  line-height: 1.5;
  color: var(--ink);
  min-height: 2.2em;
}
.tcard__buff {
  margin-top: 7px; padding-top: 7px;
  border-top: 2px solid var(--parchment-edge);
  font-size: 0.82rem; color: var(--ink-soft);
}
.tcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.tcard__rar { font-family: 'Press Start 2P', monospace; font-size: 0.42rem; letter-spacing: 0.04em; }
.tcard--common   .tcard__rar { color: #8a8474; }
.tcard--uncommon .tcard__rar { color: var(--teal-deep); }
.tcard--rare     .tcard__rar { color: var(--blue-deep); }
.tcard--legend   .tcard__rar { color: var(--gold-dark); }
.tcard--legend { border-color: var(--gold-dark); box-shadow: inset 0 4px 0 rgba(255,255,255,0.45), 0 5px 0 var(--gold-deep); }
.tcard__supply { font-size: 0.76rem; color: var(--ink-faint); }

/* ---------------- slots explainer ---------------- */
.slots { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.slot {
  width: 84px; height: 108px;
  display: grid; place-items: center;
  background: rgba(0,0,0,0.22);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--wood);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--cream-soft);
}
.slot--filled { background: var(--gold-deep); border-color: var(--gold-dark); color: var(--gold-bright); }

/* ---------------- founder tiers ---------------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.tier {
  position: relative;
  background: var(--parchment-lt);
  border: 5px solid var(--wood-dark);
  box-shadow: inset 0 5px 0 rgba(255,255,255,0.5), 0 6px 0 var(--wood-deep);
  padding: 22px 20px 24px;
}
.tier--featured { border-color: var(--gold-dark); box-shadow: inset 0 5px 0 rgba(255,255,255,0.5), 0 6px 0 var(--gold-deep); }
.tier__flag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  white-space: nowrap;
  color: var(--wood-deep);
  background: var(--gold);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 var(--gold-bright), inset 0 -3px 0 var(--gold-dark);
}
.tier__slot { aspect-ratio: 2 / 3; max-width: 150px; margin: 6px auto 16px; }
/* P2-153. The persona is the name a buyer repeats ("I got the Noble pack"),
   so it leads. The tier number is the smaller line under it, present because a
   receipt and a support conversation both need it, but not competing for the
   headline. */
.tier__name { font-family: 'Press Start 2P', monospace; font-size: 0.9rem; color: var(--ink); text-align: center; margin-bottom: 4px; }
.tier__rank {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft, #6b5334);
  text-align: center;
  margin-bottom: 8px;
  opacity: 0.75;
}
.tier__price { font-family: 'Press Start 2P', monospace; font-size: 1.15rem; color: var(--copper); text-align: center; margin-bottom: 4px; }
.tier__tbd { display: block; margin-top: 8px; font-family: 'Pixelify Sans', sans-serif; font-size: 0.8rem; color: var(--ink-faint); }
.tier__list { list-style: none; padding: 0; margin: 18px 0 0; }
.tier__list li {
  padding: 9px 0 9px 22px;
  position: relative;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-top: 2px solid var(--parchment-dk);
}
.tier__list li::before { content: '◆'; position: absolute; left: 4px; top: 8px; color: var(--gold-dark); font-size: 0.7rem; }
.tier__list li b { color: var(--ink); }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ---------------- pay buttons ---------------- */
.pay { margin-top: 20px; }
.pay__label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
  margin-bottom: 10px;
}
.pay__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pay__btn {
  padding: 12px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: var(--cream-soft);
  background: var(--stone-dark);
  border: 3px solid var(--wood-deep);
  box-shadow: inset 0 3px 0 rgba(255,255,255,0.14);
  cursor: not-allowed;
  opacity: 0.72;
}
.pay__soon {
  margin-top: 10px;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  letter-spacing: 0.05em;
  color: var(--copper);
}

/* ---------------- inclusion detail ---------------- */
.incl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.incl {
  background: rgba(0,0,0,0.18);
  border: 4px solid var(--wood-deep);
  box-shadow: inset 0 4px 0 var(--wood);
  padding: 16px;
}
.incl__slot { aspect-ratio: 1 / 1; margin-bottom: 12px; font-size: 0.44rem; }
.incl__name { font-family: 'Press Start 2P', monospace; font-size: 0.6rem; color: var(--gold-bright); margin-bottom: 8px; line-height: 1.5; }
.incl__copy { font-size: 0.88rem; color: var(--cream-soft); line-height: 1.55; }

/* ---------------- how it works steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.step {
  position: relative;
  padding: 22px 18px 20px;
  background: var(--parchment-lt);
  border: 4px solid var(--parchment-edge);
  box-shadow: inset 0 4px 0 rgba(255,255,255,0.5);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: -14px; left: 16px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: var(--wood-deep);
  background: var(--gold);
  border: 3px solid var(--wood-deep);
}
.step h3 { font-size: 0.72rem; margin: 10px 0 8px; }
.step p { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------------- small print ---------------- */
.fineprint {
  max-width: 760px; margin: 26px auto 0;
  padding: 14px 18px;
  background: rgba(0,0,0,0.16);
  border-left: 4px solid var(--wood);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--cream-soft);
}
/* --ink-faint on parchment is about 3:1, which is below the 4.5:1 that body
   text needs and, at this size, genuinely hard to read. This paragraph carries
   the "gone for good" and "final quantities" terms of the sale, so it is the
   last thing that should be squinted at. */
.section--parchment .fineprint {
  background: rgba(0, 0, 0, 0.05);
  border-left-color: var(--wood);
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.7;
}

/* The wordmark, when the hosted image is unavailable. Two lines, sized off the
   container so it works at nav height and at hero height without a second
   rule. See BOELogoFallback in site.js for why this is markup and not an SVG. */
.logo-fallback {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40px;
  line-height: 1;
  font-family: 'Press Start 2P', monospace;
  color: var(--gold-bright, #f0c674);
  text-shadow: 2px 2px 0 var(--wood-black, #1c1109);
  white-space: nowrap;
}
.logo-fallback b { font-size: 0.34em; font-weight: normal; letter-spacing: 0.12em; }
.logo-fallback i { font-size: 0.5em;  font-style: normal; letter-spacing: 0.06em; margin-top: 0.22em; }
.hero__logo + .logo-fallback, .logo-fallback.hero__logo { height: 120px; }

/* THE TIER FLAG
   ----------------------------------------------------------------------------
   It sat at `top: -3px`, which straddled the card's 5px border and drew the
   border straight through the middle of the ribbon. On the featured card, with
   its gold border, it read as two things colliding rather than one label.

   Sitting it fully clear of the edge fixes it, and the grid gets the headroom
   so nothing is clipped by the section above. */
.tiers { padding-top: 42px; }

/* screen-reader-only heading, keeps the logo lockup but gives the page a real H1 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* THE BRAND, AND WHY IT COLLAPSED
   ----------------------------------------------------------------------------
   The logo is 948x124, and `.nav__brand img { height: 44px; width: auto }`
   should make it 336 wide. It was rendering at 27, stretched to fit, which is
   why it read as a smudge rather than a wordmark.

   The cause is a flexbox rule that is correct and surprising in equal measure.
   A flex item will not normally shrink below its content, but that floor is
   computed from the content's MINIMUM size, and a global `img { max-width:
   100% }` makes an image's minimum size zero. So the brand had no floor, the
   crowded nav row took the space, and `object-fit: fill` stretched the picture
   into the gap rather than letting it overflow where somebody would notice.

   Three lines, each doing one job: never shrink, never be capped by a parent
   that is itself being squeezed, and if something does go wrong with the box,
   letterbox the artwork instead of distorting it. The last one is the reason a
   future regression here will look obviously wrong rather than subtly cheap. */
.nav__brand { flex: 0 0 auto; }
.nav__brand img { max-width: none; object-fit: contain; }
.nav__brand .logo-fallback { flex: 0 0 auto; }

/* ============================================================================
   REAL ART REPLACING PLACEHOLDERS
   ----------------------------------------------------------------------------
   Every rule below removes decoration the page was drawing to stand in for a
   picture that did not exist yet. That decoration is not neutral once the
   picture arrives: a coloured circle behind a medal, a wood block behind a
   portrait and a dashed box around a pack all fight the artwork rather than
   framing it.

   `image-rendering: pixelated` on all of it. These are authored at 32 or 40
   pixels and exported at 3x to 5x, so any smoothing on the way to the screen
   undoes the thing that makes them pixel art.
   ========================================================================== */

/* --- the pack, on the cards page hero and the founder tiers -------------- */
.pack-hero__img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  image-rendering: pixelated;
}
.tier__img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 6px auto 16px;
  image-rendering: pixelated;
}
@media (max-width: 560px) {
  .pack-hero__img { max-width: 260px; }
}

/* --- arena rank medals ---------------------------------------------------
   The old medals were a CSS circle: a background colour per rank, a round
   border, an inset sheen and a gloss blob drawn with ::after. Each of those
   has to be undone explicitly, because a real medal now brings its own rim,
   its own metal and its own highlight, and the CSS versions would sit
   underneath and around it. */
img.arena__tier-medal {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  image-rendering: pixelated;
}
/* Kill the per-rank colours: they were the medal, and now they are behind it. */
img.arena__tier-medal[data-t] { background: none; box-shadow: none; }
img.arena__tier-medal::after { content: none; }

/* --- the lore portrait ---------------------------------------------------
   The frame stays, because the profile card wants a bordered avatar block.
   The padding goes: the portrait is drawn to fill its own square and 6px of
   inset left it floating in a wooden hole. */
.lle-profile__avatar { padding: 0; }
.lle-profile__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* THE LORE PROFILE HEADER, DARK TEXT ON A DARK PLATE
   ----------------------------------------------------------------------------
   "@Ketama" was invisible and the title was barely better. Not a colour choice,
   a collision: this component is defined twice in this file, once as a
   parchment card with a wood-coloured TITLE BAR and gold text, and later as a
   parchment card whose header is just a row with a dashed underline.

   The second definition only restated layout. It never cleared the first one's
   `background: var(--wood-deep)`, so the bar stayed dark while the name took
   the second design's ink colour, which is `--wood-deep` as well. Identical
   foreground and background: a contrast ratio of 1:1, and a name nobody could
   read at any size or on any screen.

   The second design is the one the rest of the card follows, so this finishes
   the job it started: clear the bar, clear the inherited uppercase title
   styling, and drop the decorative diamond that belonged to the title-bar
   version and now just sits in front of the portrait. */
.lle-profile__header {
  background: none;
  color: inherit;
  padding: 0 0 14px;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}
.lle-profile__header::before { content: none; }

/* ── T111 founder hero scarcity line ─────────────────────────────────
   Sits under the lead, above the countdown. Sale-urgency copy, so it
   reads louder than the lead but must not compete with the h1.        */
.pack-hero__scarcity {
  margin: 0 auto 26px;
  font-family: var(--font-display, inherit);
  /* No text-transform. The ticket says the three hero strings must match
     exactly, and uppercasing them in CSS makes that undiffable for anyone
     checking the rendered page. Weight and colour carry the emphasis. */
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold, #E8C169);
}

/* ── T112 five-benefit grid ──────────────────────────────────────────
   Five items do not divide evenly into the auto-fill grid the six-item
   version used: at 3-up the last row is a lonely pair. Fixed 5 columns
   on wide screens, then a clean 3/2 and 2/2/1 as it narrows.          */
.incl-grid--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .incl-grid--five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .incl-grid--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .incl-grid--five { grid-template-columns: 1fr; } }

.incl-note {
  margin: 30px auto 0;
  max-width: 620px;
  padding: 18px 22px;
  text-align: center;
  border: 1px solid rgba(232, 193, 105, 0.34);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}
.incl-note__title {
  font-family: var(--font-display, inherit);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--gold, #E8C169);
  margin-bottom: 6px;
}
.incl-note__copy { margin: 0; opacity: 0.88; font-size: 0.94rem; }

/* ── P2-96 hero button presence ──────────────────────────────────────
   The buttons already carry the game's bevel: a 4px inset frame, a lit
   top edge, a dark bottom edge and a 6px drop that collapses when you
   press. That treatment stays. What the hero pair was missing is scale
   and a light source, so they read as objects sitting on the art rather
   than as flat labels printed on it.                                  */
.btn--hero {
  position: relative;
  padding-inline: 34px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  overflow: hidden;
}
/* A hard-edged sheen across the top third. Pixel art has no soft gradients,
   so this is a flat band with a straight edge, not a blur. */
.btn--hero::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; top: 4px;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.hero__cta { gap: 16px; }

/* ── P2-97 In the Alpha tiles ────────────────────────────────────────
   Label only. If a paragraph ever reappears under one of these the
   section is back to what the ticket deleted.                         */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 38px;
}
@media (max-width: 860px) { .tiles { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.tile { margin: 0; }
/* The ticket asks for a distinctive frame shape, not a plain rectangle.
   Notched corners, cut on the diagonal, which is the same corner treatment
   the game's own panels use. clip-path does the shape; the gold rule sits on
   a wrapper behind it so the border follows the cut instead of being sliced
   off by it. */
.tile__frame {
  position: relative;
  overflow: hidden;
  background: var(--wood-deep);
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: 0 0 0 3px rgba(232, 193, 105, 0.55);
  aspect-ratio: 16 / 9;
}
.tile__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.tile:hover .tile__frame img { transform: scale(1.05); }

.tile__label {
  margin-top: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gold, #E8C169);
}

/* ── P2-98 life skills carousel ──────────────────────────────────────
   One skill on screen, arrows underneath. Slides are shown and hidden
   rather than translated: the descriptions are different lengths, and a
   sliding track would force every slide to the tallest one's height.  */
.lsc { max-width: 980px; margin: 34px auto 0; outline: none; }
.lsc__track { list-style: none; margin: 0; padding: 0; }
.lsc__slide { display: none; }
.lsc__slide.is-on { display: block; }

.lsc__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid var(--wood-deep);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22);
  background: var(--wood-deep);
}
.lsc__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The frame for a skill that has no capture yet. Deliberately looks like an
   empty slot rather than like a broken image, and carries the real in-game
   icon so the slide still says which skill it is. */
.lsc__await, .await {
  width: 100%; height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.035) 0 12px, transparent 12px 24px),
    var(--wood-deep);
}
.lsc__await-icon, .await__mark { width: 96px; height: 96px; image-rendering: pixelated; opacity: 0.9; }
.lsc__await-tag, .await__tag {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  color: var(--cream-soft, #e8ddc4);
  opacity: 0.55;
}

.lsc__body { text-align: center; margin-top: 20px; min-height: 108px; }
.lsc__name {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 10px;
  font-size: 1.3rem;
}
.lsc__icon { width: 40px; height: 40px; image-rendering: pixelated; }
.lsc__desc { margin: 0 auto; max-width: 62ch; line-height: 1.7; }

.lsc__nav {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 20px;
}
.lsc__arrow {
  width: 48px; height: 48px;      /* comfortably past the 44px tap floor */
  display: grid; place-items: center;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
  color: var(--wood-deep);
  background: var(--parchment-lt);
  border: 3px solid var(--wood-deep);
  border-radius: 8px;
  box-shadow: 0 4px 0 var(--wood-deep);
}
.lsc__arrow:hover { background: var(--gold, #E8C169); }
.lsc__arrow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--wood-deep); }
.lsc__dots { display: flex; gap: 8px; }
.lsc__dot {
  width: 11px; height: 11px; padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--wood-deep);
  background: transparent;
}
.lsc__dot.is-on { background: var(--wood-deep); }

@media (max-width: 560px) {
  .lsc__name { font-size: 1.08rem; }
  .lsc__body { min-height: 140px; }
}

/* ── P2-99 mounts ────────────────────────────────────────────────────
   The generic "In game" tag is gone. What replaces it is the one thing
   a visitor actually wants from a mount card: how do I get that.      */
.mounts__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}
.mounts__lead { margin: 8px 0 0; max-width: 560px; color: var(--ink-soft); }

.mount-card__obtain {
  display: block;
  margin-top: 7px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.48rem;
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: var(--cream-soft, #e8ddc4);
  opacity: 0.82;
}

/* ── P2-101 leaderboard cards ────────────────────────────────────────
   Letters are gone. A face slot in their place, a real portrait where
   one exists and an explicit empty frame where one does not, because a
   letter avatar was the thing being deleted.                          */
.lb-home .home-medals { margin-top: 46px; }

.medal-card__face {
  width: 76px; height: 76px;
  margin: 0 auto 12px;
  border: 3px solid var(--wood-deep);
  background: var(--wood-black, #1c1208);
  box-shadow: inset 0 3px 0 var(--wood), inset 0 -3px 0 var(--wood-black);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.medal-card__portrait {
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
/* An empty portrait frame, not a letter and not a broken image. The bust
   shape reads as "a face goes here" at a glance. */
.medal-card__portrait--await {
  background:
    radial-gradient(circle at 50% 32%, rgba(232, 193, 105, 0.30) 0 17%, transparent 18%),
    radial-gradient(ellipse 42% 30% at 50% 88%, rgba(232, 193, 105, 0.30) 0 60%, transparent 61%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.05) 0 8px, transparent 8px 16px);
}

/* 31 Aug 2026 review: the board is not wired to live data yet, so every podium
   face is a black box with a white question mark and every handle reads
   "You ?". The empty seat is the invitation. EP numbers stay as they were. */
.medal-card__portrait--you {
  background: #000;
  display: grid;
  place-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.6rem;
  color: #fff;
}

.medal-card__title {
  margin: 0 0 14px;
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  /* 1 Sep 2026: black, all three. The faint ink was invisible on the gold
     and silver cards, and the dark brown wasn't enough either - "The
     Contender" only read because the bronze card is the darkest of the
     three. All the card faces are light, so black works on every one. */
  color: #000;
}

/* The EP mark, drawn on the same 16x16 grid as the rest of the pixel UI so it
   sits on the baseline with the number instead of floating beside it. */
.ep__icon {
  width: 1.15em; height: 1.15em;
  vertical-align: -0.22em;
  margin-right: 7px;
  image-rendering: pixelated;
}
.medal-card__ep b { font-weight: inherit; }

/* Top-3 detail. The ticket asks for meaningfully different, not a tint. The
   gold card already sits higher and heavier; this adds a laurel notch to the
   rim so first place is distinguishable in a black and white screenshot. */
.medal-card--gold::before,
.medal-card--gold::after {
  content: '';
  position: absolute;
  top: 14px;
  width: 18px; height: 4px;
  background: var(--wood-deep);
  opacity: 0.55;
}
.medal-card--gold::before { left: 14px; }
.medal-card--gold::after  { right: 14px; }

/* ── shared "capture coming" frame ───────────────────────────────────
   Used by life skills, expeditions and zones. It is an empty slot on
   purpose: honest about what is missing, and it does not pretend a
   screenshot of some other part of the game is the one being described.
   Drop the real image in and delete the div, nothing else moves.      */
.await {
  position: relative;
  width: 100%;
  border-radius: 10px;
  border: 3px solid var(--wood-deep);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22);
}
.await--wide { aspect-ratio: 21 / 9; }
.await__mark {
  width: auto; height: auto;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold, #E8C169);
  opacity: 0.45;
}

/* ── P2-102 Expeditions ──────────────────────────────────────────────
   One image, a four-pip strip, three stats. Nothing else is allowed in
   here: no run names, no loot, no levels, no currency.                */
.exp { max-width: 940px; margin: 34px auto 0; }
.exp__shot { margin-bottom: 18px; }

.exp__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}
.exp__sep { opacity: 0.4; }
/* The free daily run is the hook for everyone who will never spend money, so
   it does not get to be the third item in a flat row. */
.exp__stat--free {
  padding: 10px 16px;
  border-radius: 8px;
  color: #2b1d0b;
  background: var(--gold, #E8C169);
  box-shadow: 0 4px 0 var(--gold-dark, #a9822f);
}
@media (max-width: 520px) {
  .exp__stats { font-size: 0.5rem; gap: 8px; }
  .exp__sep { display: none; }
}

/* ── P2-103 Zones carousel ───────────────────────────────────────────── */
.zc { max-width: 1000px; margin: 32px auto 0; outline: none; }

/* 31 Aug 2026 review: the per-slide caption bar under the frame is gone and
   the arrows moved up to sit right below the image. .zc__cap rules below are
   kept for the caption markup's possible return, but nothing renders them. */
.zc .lsc__nav { margin-top: 12px; }

/* P2-121. Same frame as the life-skills carousel, at the aspect the zone
   placeholder already used: these are landscapes rather than close-ups, so the
   wider crop is the one that shows a place instead of a patch of it. */
.zc__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid var(--wood-deep);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22);
  background: var(--wood-deep);
}
.zc__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zc__track { list-style: none; margin: 0; padding: 0; }

/* == 2 Sep 2026: the Expeditions shot wears the same frame as the zone
   slides (and as the .await plate it replaced): 21:9, wood outline, drop
   shadow. Without an explicit height:100% the img kept its height=720
   attribute while max-width shrank it - i.e. it stretched. If the .await
   placeholder ever comes back inside this frame, it sheds its own border
   so the two don't stack. */
.exp__shot {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid var(--wood-deep);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22);
  background: var(--wood-deep);
}
.exp__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp__shot .await { border: none; box-shadow: none; border-radius: 0; height: 100%; }
.zc__slide { display: none; }
.zc__slide.is-on { display: block; }
.zc__cap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.zc__cap b { font-family: 'Press Start 2P', monospace; font-size: 0.72rem; }
.zc__cap span { color: var(--ink-soft); font-size: 0.95rem; }

/* ── P2-103 economy strip ────────────────────────────────────────────
   Subordinate to the zones by construction: no card frame, no fill, no
   shadow. A hairline rule above it and nothing else. The ticket's test
   is "if it starts looking like a card, it is wrong", so the only
   decoration allowed in here is a rule and a bullet.                  */
.econ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 46px;
  align-items: start;
  max-width: 1000px;
  margin: 42px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}
@media (max-width: 800px) { .econ { grid-template-columns: 1fr; gap: 18px; } }

.econ__h {
  margin: 0 0 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.76rem;
  line-height: 1.6;
}
.econ__line { margin: 0; color: var(--ink-soft); line-height: 1.7; }

.econ__points { list-style: none; margin: 0; padding: 0; }
.econ__points li {
  position: relative;
  padding: 7px 0 7px 22px;
  line-height: 1.6;
}
.econ__points li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 7px;
  font-size: 0.66rem;
  color: var(--gold-dark, #a9822f);
}

.econ__cta { text-align: center; margin-top: 34px; }

/* ── P2-113 leaderboards page ────────────────────────────────────────
   Same conventions as the home page section so the two cannot drift:
   no kingdoms, a quoted title under the handle, a portrait not a
   letter, the EP mark before every number, top three distinct.      */
.page-header--sky {
  position: relative;
  overflow: hidden;
}
/* The clouds are the home hero's sprites reused. Their vertical bands are
   already separated so they cannot clip into each other, see the note on
   .hero__cloud--1. Only two are used here because the header is shorter. */
.page-header--sky .hero__cloud { z-index: 0; opacity: 0.5; }
.page-header--sky .container { position: relative; z-index: 1; }

.lb-sub { font-size: 1.12rem; }

.lb-who { display: flex; align-items: center; gap: 12px; text-align: left; }
.lb-who__text { display: grid; gap: 2px; min-width: 0; }
.lb-who__name { font-size: 0.98rem; }
.lb-who__title {
  font-family: 'Pixelify Sans', sans-serif;
  font-size: 0.84rem;
  font-style: italic;
  color: var(--ink-faint);
  /* Not truncated. The table already scrolls inside .table-scroll, so a table
     cell never has to shrink below its content, which means an ellipsis has
     nothing to trigger against and the text just ran past its own box. It
     wraps instead. Titles are three words at most. */
  line-height: 1.35;
}
.lb-face {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border: 2px solid var(--wood-deep);
  background: var(--wood-black, #1c1208);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lb-face__img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.lb-face__img--await {
  background:
    radial-gradient(circle at 50% 32%, rgba(232, 193, 105, 0.30) 0 17%, transparent 18%),
    radial-gradient(ellipse 42% 30% at 50% 88%, rgba(232, 193, 105, 0.30) 0 60%, transparent 61%);
}

.lb-table__val { text-align: right; white-space: nowrap; }

/* Top three. Not a colour tint: a metal disc in the rank cell, a heavier row
   and a left edge, so the podium survives a black and white screenshot. */
.lb-rank__disc {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--wood-deep);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.68rem;
  color: var(--wood-deep);
}
.lb-rank.is-first  .lb-rank__disc { background: linear-gradient(180deg, #fff3c4, #c89a2f); }
.lb-rank.is-second .lb-rank__disc { background: linear-gradient(180deg, #f4efde, #908a78); }
.lb-rank.is-third  .lb-rank__disc { background: linear-gradient(180deg, #e0ad7e, #a8714a); }

.lb-row td { font-weight: 700; }
.lb-row--first  td:first-child { box-shadow: inset 5px 0 0 #c89a2f; }
.lb-row--second td:first-child { box-shadow: inset 5px 0 0 #908a78; }
.lb-row--third  td:first-child { box-shadow: inset 5px 0 0 #a8714a; }

@media (max-width: 480px) {
  .lb-who { gap: 9px; }
  .lb-face { flex-basis: 32px; width: 32px; height: 32px; }
  .lb-who__title { font-size: 0.74rem; }
  .lb-rank__disc { width: 28px; height: 28px; font-size: 0.56rem; }
}

/* The ellipsis on a long title only works if the flex item is allowed to be
   narrower than its content. A flex item's automatic minimum size is its
   content, so without this the text runs past the cell instead of truncating,
   which the layout audit caught on "Champion of Estova" at phone widths. */
.lb-who { min-width: 0; }
.lb-who__text { min-width: 0; }

/* ── P2-95 tap targets ───────────────────────────────────────────────
   Measured in a real browser at 375, 390 and 414, not guessed.       */
@media (max-width: 900px) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn--small { min-height: 44px; }
  .lb-tab { min-height: 44px; }

  /* Footer and nav links are text, so they are short. Padding gives them a
     real target without changing how they look. */
  .footer__col ul a,
  .nav__links .nav__link { display: inline-block; padding-block: 12px; }
}

/* The carousel dots stay small on purpose, they are a position indicator
   rather than the main control, and the arrows beside them are already 48px.
   But small is not the same as unhittable: this gives each dot a 44px
   invisible target without changing the 11px it draws. */
.lsc__dot { position: relative; }
.lsc__dot::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* The last three the audit found, all real controls rather than inline prose
   links: the logo link at 40x40, the wallet chip at 38 wide, and the wiki
   search field at 40 tall. */
@media (max-width: 900px) {
  .nav__brand { min-height: 44px; }
  .wchip { min-width: 44px; }
  input[type="search"], input[type="text"], input[type="email"] { min-height: 44px; }
}

/* One pixel short of the tap floor, found by the P2-95 audit. */
@media (max-width: 900px) { .nav__toggle { min-width: 44px; min-height: 44px; } }

/* ── P2-132 Genesis scarcity line ────────────────────────────────────
   Sits under the hero scarcity copy. Renders without a count when the
   service cannot be reached, and switches to an unmissable post-cap
   state at zero, because the 501st buyer must know before paying.   */
.gen-cap {
  margin: 0 auto 24px;
  max-width: 620px;
  padding: 12px 18px;
  border: 2px solid rgba(232, 193, 105, 0.55);
  border-radius: 8px;
  background: rgba(232, 193, 105, 0.10);
  font-size: 0.98rem;
  line-height: 1.6;
}
/* P2-167: this used to colour every <b> in the cap line gold. The line now
   sets its two numbers on their own gold plates, so this rule was painting
   gold text on a gold background and the count rendered as a blank chip.
   Scoped to bold text that is NOT one of the number plates. */
.gen-cap b:not(.gen-cap__n):not(.gen-cap__left) { color: var(--gold, #E8C169); }
.gen-cap.is-gone {
  border-color: rgba(190, 90, 60, 0.6);
  background: rgba(190, 90, 60, 0.12);
}
.gen-cap.is-gone b { color: #e58a6a; }

/* ── P2-133 per-tier rarity guarantee ─────────────────────────────── */
.tier__guarantee {
  margin: 8px 0 4px;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.10);
  font-size: 0.86rem;
  line-height: 1.5;
}
.tier__guarantee b { color: var(--gold-dark, #a9822f); }
.tier__guarantee--none { opacity: 0.55; }


/* == 31 Aug 2026 review: life-skills redesign ============================
   "The image can be way smaller... the icon and the name on the bottom
   left, a little bit above, and right of it the text, inside the image...
   and the arrows go where Faith is right now."

   The frame shrinks from 980px to 760px, keeps its border and its 16:9
   (a site test pins the ratio), and the icon+name+description move INSIDE
   the image on a dark plate toward the bottom left. The arrows land
   directly under the frame, where the name used to sit. On phones the
   plate would cover most of a small image, so it drops back below the
   frame there. Appended at the end of the sheet so these override the
   P2-98 rules and their media query without editing history. */
.lsc { max-width: 760px; }
.lsc__slide.is-on { position: relative; }
.lsc__body {
  position: absolute;
  left: 14px; right: 14px; bottom: 16px;
  margin: 0; min-height: 0;
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  padding: 10px 14px;
  background: rgba(28, 18, 8, 0.80);
  border: 2px solid var(--wood-deep);
  border-radius: 8px;
}
.lsc__name {
  margin: 0; flex: 0 0 auto;
  justify-content: flex-start;
  font-size: 1.02rem;
  color: var(--gold-bright, #FDE08A);
}
.lsc__icon { width: 32px; height: 32px; }
.lsc__desc {
  margin: 0; max-width: none;
  font-size: 0.92rem; line-height: 1.5;
  color: var(--cream-soft, #e8ddc4);
}
.lsc__nav { margin-top: 14px; }
@media (max-width: 640px) {
  .lsc__body { position: static; margin-top: 12px; min-height: 0; }
}


/* == 31 Aug 2026 review: In the Alpha tiles go square ====================
   "They can be more square and more zoomed in on the player, so you really
   see the player... the texts can be partially on top of the image or
   below, but partially, with a border around it."

   Square crop on the same captures until the three close-ups land (see the
   section comment in index.html); object-fit keeps the middle of each
   frame, which is where the player stands in all three. The label plates
   over the bottom edge of the image, half on, half off. */
/* == 3 Sep 2026 notes: the In-the-Alpha tiles are 3:4 PORTRAITS in the
   game-UI frame - ink border, gold inner line, gold corner studs - and the
   labels move OUT of the art onto plaques below each frame, every plaque
   the full width of its frame so the row reads as three columns. */
.tile { position: relative; padding-bottom: 0; }
.tile__frame {
  /* 6 Sep 2026 notes: 30% shorter than the 3:4 portrait */
  aspect-ratio: 15 / 14;
  clip-path: none;
  border: 4px solid #2b1d0b;
  box-shadow: inset 0 0 0 3px var(--gold, #E8C169);
  background:
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) 7px 7px / 10px 10px no-repeat,
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) calc(100% - 7px) 7px / 10px 10px no-repeat,
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) 7px calc(100% - 7px) / 10px 10px no-repeat,
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) calc(100% - 7px) calc(100% - 7px) / 10px 10px no-repeat,
    var(--wood-deep);
  padding: 12px;
}
.tile__frame img { width: 100%; height: 100%; object-fit: cover; }
/* the studs sit on the frame, above the image */
.tile__frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background:
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) 0 0 / 10px 10px no-repeat,
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) 100% 0 / 10px 10px no-repeat,
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) 0 100% / 10px 10px no-repeat,
    linear-gradient(var(--gold, #E8C169), var(--gold, #E8C169)) 100% 100% / 10px 10px no-repeat;
}
.tile__label {
  position: static;
  transform: none;
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 10px;
  text-align: center;
  background: var(--gold, #E8C169);
  color: #2b1d0b;
  border: 3px solid #2b1d0b;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}



/* == 2 Sep 2026: per-section fixed backdrops =============================
   Final shape of the 31 Aug "each section has a different background
   image" note. A section with data-backdrop (enabled by the loader script
   in index.html once the file exists) paints that image as its own
   background with background-attachment: fixed: the image stays put, the
   page scrolls over it, and it is visible only within the section - no
   switching, no crossfade. The translucent sky-blue overlay on top of the
   image is mathematically the same washed look as the village (image at
   50% over the page's own blue). Note: iOS Safari ignores fixed
   attachment and lets the image scroll with the section, which is the
   accepted graceful fallback. */
.section-backdrop {
  background-color: #2a9bf2;
  background-image:
    linear-gradient(rgba(42, 155, 242, 0.52), rgba(42, 155, 242, 0.52)),
    var(--backdrop);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  image-rendering: pixelated;
}

/* 3 Sep 2026 trial: the hero shows the ship animation RAW - no sky-blue
   wash - to judge whether the unwashed look reads better. Only the hero;
   every other backdrop section keeps the tint. Revert by deleting this
   rule. */
.hero.section-backdrop {
  background-image: var(--backdrop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Every backdrop section gets the same wood outline the parchment and wood
   sections carry, so two backdrops meeting (Mounts/Arena, Expeditions/Zones)
   read as separate panels instead of one washed image bleeding into the
   next - the same clear rule the Life Skills -> Mounts seam already has. */
.section-backdrop {
  border-top: 6px solid var(--wood-deep);
  border-bottom: 6px solid var(--wood-deep);
}

/* Keep every seam a single 6px rule: when the section above already closes
   with a wood border, the one below doesn't open with another. The hero sits
   at the top of the page under the nav, so it opens with no border at all. */
.section--parchment + .section-backdrop,
.section--wood + .section-backdrop,
.section-backdrop + .section-backdrop,
.section-backdrop + .section--parchment,
.section-backdrop + .section--wood,
.hero.section-backdrop {
  border-top: none;
}

/* == 3 Sep 2026: "+13 more" tag under the mount gallery, bottom right == */
.mounts__more {
  margin-top: 14px;
  text-align: right;
}
.mounts__more {
  display: block;
  width: max-content;
  margin-left: auto;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.62rem;
  color: var(--cream, #f4e9d0);
  background: rgba(20, 12, 6, 0.55);
  border: 2px solid var(--gold, #E8C169);
  border-radius: 6px;
  padding: 9px 13px;
}

/* == 3 Sep 2026: MMR floors removed from the ladder, so the medals and the
   rank titles take the released space. == */
.arena__tier-medal { width: 112px; height: auto; }
.arena__tier-name { font-size: 1.02rem; margin-top: 10px; }