/* ==========================================================================
   jmak.games — landing page
   Every value below resolves to a design-system token from css/tokens/*.
   No JS. No framework. Dark theme only, per the brand guide.

   Brand motifs (assets/motifs/): an externally referenced SVG cannot inherit
   currentColor, and CSS masks proved unreliable for load-bearing visuals, so
   the motifs ship as pre-tinted variants used via plain background-image
   (*-gold / *-ink). The currentColor originals stay canonical in the design
   system for inline-SVG use.
   Budget: one motif per view, two at most (see design system readme.md).
   ========================================================================== */

/* --------------------------------------------------------------- primitives */

/* Sticky header would otherwise cover in-page anchor targets */
html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}
/* Belt-and-braces: nothing may cause a sideways scroll on the page itself */
body { overflow-x: hidden; }

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

.gold { color: var(--gold-500); }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--gold-500);
  color: var(--text-on-gold);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.skip:focus { left: var(--space-4); }

/* Buttons — mirrors components/buttons/Button.jsx in plain CSS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 46px;
  padding: 0 var(--space-5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-snap);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 13px; gap: 6px; }
.btn--md { height: 46px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 17px; gap: 10px; }

.btn--primary {
  background: var(--gold-500);
  color: var(--text-on-gold);
  box-shadow: var(--glow-gold-soft);
}
.btn--primary:hover {
  background: var(--gold-600);
  color: var(--text-on-gold);
  box-shadow: var(--glow-gold);
}
.btn--primary:active { background: var(--gold-700); }

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* Badge — mirrors components/data-display/Badge.jsx */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: 1;
  white-space: nowrap;
}
.badge--gold { background: var(--gold-500); color: var(--text-on-gold); }
.badge--soon {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-default);
  color: var(--text-secondary);
}
/* Crown motif rides inside the badge — stays gold, so it ships as a real <img> */
.badge__crown { width: 14px; height: auto; margin-left: -1px; }

/* Tag — mirrors components/data-display/Tag.jsx (static here) */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}
.tag--selected {
  background: var(--gold-soft);
  border-color: rgba(255, 183, 0, 0.5);
  color: var(--gold-300);
}

/* Stat / fact pairs — the brand sets numbers big in condensed type */
.fact__value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}
.fact__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* ------------------------------------------------------- MOTIF: brush stroke
   Used as an accent RULE, not as a highlight behind text.

   The stroke is a diagonal tapered sweep — in the master logo the word "GAMES"
   is rotated to sit along it. Set straight text over it and the rising edge
   clips the last letters, so horizontal text on top is not a usable treatment.
   As a rule under a headline the taper is exactly the point.

   Pre-coloured gold variant via plain background-image: currentColor cannot
   resolve inside an externally referenced SVG. */
.brush-rule {
  display: block;
  width: clamp(150px, 30%, 250px);
  height: 26px;
  margin-top: var(--space-6);
  background-image: url("../assets/motifs/jmak-brush-gold.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

/* ------------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--container-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 46px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
.nav__link {
  position: relative;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.nav__link:hover { color: var(--text-primary); }
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link--active::after { transform: scaleX(1); }
.nav__link--active { color: var(--text-primary); }

/* --------------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-subtle);
}
.hero__wash {
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  pointer-events: none;
}
/* MOTIF: splatters as texture. Native white/gold fills, so a plain <img>. */
.hero__splatters {
  position: absolute;
  top: -6%;
  left: 52%;
  width: 58%;
  max-width: 700px;
  height: auto;
  opacity: 0.11;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero__title {
  font-size: var(--fs-display-1);
  text-transform: uppercase;
}
.hero__lede {
  max-width: 46ch;
  margin: var(--space-6) 0 var(--space-8);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.hero__lede strong { color: var(--text-primary); font-weight: var(--fw-bold); }

.factbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

/* Key art. The export is a dark vignette on an opaque ground, so its rectangle
   edge is dissolved with a gradient OVERLAY tinted to the page background —
   plain, universally supported CSS, unlike masking the <img> itself. */
.hero__art {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 520px;
}
.hero__frame {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 480px;
}
.hero__monkey { display: block; width: 100%; height: auto; }
/* Vignette sized to the artwork, fading its rectangle into the page colour */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(104% 70% at 50% 43%,
      rgba(10, 10, 11, 0) 34%, rgba(10, 10, 11, 0.86) 72%, var(--bg-base) 93%);
}
.hero__wordmark {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 2%;
  width: 58%;
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75));
}

/* ----------------------------------------------------------------- sections */

.section { padding: var(--space-20) 0; }
.section--tight { padding: var(--space-16) 0; }

.band {
  position: relative;
  padding: var(--space-20) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
/* MOTIF: drip hanging off the band's bottom edge into the section below.
   Pre-tinted background-image, so it renders wherever background-image does. */
.band__drip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  transform: translateY(100%);
  background-image: url("../assets/motifs/jmak-drip-ink.svg");
  background-repeat: repeat-x;
  background-position: left top;
  background-size: auto 100%;
  pointer-events: none;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.section__title {
  margin-top: var(--space-3);
  font-size: var(--fs-h1);
  text-transform: uppercase;
}
.section__lede {
  max-width: 62ch;
  margin-bottom: var(--space-10);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ----------------------------------------------- games lineup: featured card */

.feature {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  background: var(--surface-card);
  background-image: var(--grad-surface);
  border: 1px solid rgba(255, 183, 0, 0.28);
  border-radius: var(--radius-xl);
  box-shadow: var(--glow-gold-soft);
}
.feature__art { position: relative; isolation: isolate; }
/* Square crop: the source art is 2:3, which makes the whole card far taller
   than its own text column. The subject sits high, hence the object-position. */
.feature__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: var(--radius-lg);
}
/* Same overlay trick, tinted to the card surface rather than the page */
.feature__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(closest-side circle at 50% 48%,
      rgba(26, 26, 29, 0) 62%, rgba(26, 26, 29, 0.7) 88%, var(--surface-card) 100%);
}
.feature__top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.feature__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
}
.feature__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
}
.feature__genre {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-500);
}
.feature__text {
  max-width: 46ch;
  margin: var(--space-4) 0 var(--space-5);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
.feature__cta { margin-top: var(--space-6); }

/* -------------------------------------------- games lineup: in-development */

.lineup {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.gamecard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  background-image: var(--grad-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.gamecard:hover { transform: translateY(-3px); border-color: var(--border-strong); }

.gamecard__art {
  position: relative;
  height: 230px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink-950);
  border-bottom: 1px solid var(--border-subtle);
}
/* Tic-Tac-Toe: gameplay shot dimmed back so the neon logo can sit on top */
.gamecard__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  opacity: 0.5;
}
.gamecard__logo {
  position: relative;
  width: 78%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.8));
}

/* Ant Colony: no key art yet — an honest teaser, not a stand-in image */
.gamecard__art--teaser { background: var(--ink-900); }
.teaser__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 178px;
  height: 214px;
  transform: translate(-50%, -50%);
  background-image: url("../assets/motifs/jmak-circle-ink.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.teaser__scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}
.teaser__hill  { width: 76px; height: auto; }
.teaser__stick { width: 46px; height: auto; margin-bottom: 8px; }
.teaser__food  { width: 52px; height: auto; }
.teaser__label {
  position: absolute;
  bottom: var(--space-4);
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.gamecard__body { padding: var(--space-6); }
.gamecard__title {
  margin-top: var(--space-4);
  font-size: var(--fs-h3);
  text-transform: uppercase;
}
.gamecard__genre {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.gamecard__text {
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* --------------------------------------------------------- feature triplet */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.card {
  padding: var(--space-6);
  background: var(--surface-card);
  background-image: var(--grad-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}
.card:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-5);
  background: var(--gold-soft);
  border-radius: var(--radius-md);
  color: var(--gold-500);
}
.card__icon svg { width: 22px; height: 22px; }
.card__title {
  font-size: var(--fs-h4);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.card__body { color: var(--text-secondary); }

.banner {
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: var(--space-16) auto 0;
}

/* ----------------------------------------------------------------- the deck */

.deck {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.deck__name {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--fs-lg);
  text-transform: uppercase;
}
.deck__note { font-size: var(--fs-sm); color: var(--text-muted); }

/* Playing cards: the game's own neon frame art, value set in condensed type */
/* Fallback for engines without aspect-ratio: padding keeps the card shape.
   The @supports block below reverts it where aspect-ratio is available. */
.pcard {
  position: relative;
  height: 0;
  padding-top: 150%;              /* 360 / 240 */
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
  transition: transform var(--dur) var(--ease-snap);
}
.pcard .pcard__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
@supports (aspect-ratio: 1) {
  .pcard {
    height: auto;
    padding-top: 0;
    aspect-ratio: 240 / 360;
    display: grid;
    place-items: center;
  }
  .pcard .pcard__face { position: static; inset: auto; display: block; }
}
.deck__item:hover .pcard { transform: translateY(-6px) rotate(-1.5deg); }

.pcard__face {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--jmak-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

.pcard--plus    { background-image: url("../assets/game/card-plus.png"); }
.pcard--minus   { background-image: url("../assets/game/card-minus.png"); }
.pcard--zero    { background-image: url("../assets/game/card-zero.png"); }
.pcard--combo   { background-image: url("../assets/game/card-combo.png"); }
.pcard--mystery { background-image: url("../assets/game/card-mystery.png"); }

/* ------------------------------------------------------------------- rules */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  padding: var(--space-6);
  background: var(--surface-card);
  background-image: var(--grad-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* MOTIF: brushed circle framing the step number */
.step__num {
  position: relative;
  isolation: isolate;           /* contains the ::before z-index: -1 */
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--gold-500);
}
.step__num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                  /* stay behind the numeral, never over it */
  background-image: url("../assets/motifs/jmak-circle-ink.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.step__title {
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--fs-h4);
  text-transform: uppercase;
}
.step__body { color: var(--text-secondary); }

.note {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--gold-soft);
  border: 1px solid rgba(255, 183, 0, 0.28);
  border-radius: var(--radius-lg);
}
.note p {
  max-width: 70ch;
  margin-top: var(--space-3);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------- opponents */

.opponent {
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  gap: var(--space-16);
  align-items: center;
}
.opponent .section__lede { margin-bottom: var(--space-8); }

.levels { margin: 0; display: grid; gap: var(--space-4); }
.level {
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease-out);
}
.level:hover { border-color: var(--border-strong); }
.level--top {
  border-color: rgba(255, 183, 0, 0.45);
  box-shadow: var(--glow-gold-soft);
}
.level__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}
.level--top .level__name { color: var(--gold-500); }
/* MOTIF: crown marks the top tier */
.level__crown { width: 20px; height: auto; }
.level__tier {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  color: var(--text-muted);
}
.level--top .level__tier { color: var(--gold-300); }
.level__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.level__desc em {
  display: block;
  margin-bottom: 2px;
  font-style: italic;
  color: var(--text-primary);
}

.opponent__art { position: relative; isolation: isolate; }
.opponent__art img {
  display: block;
  width: 100%;
  height: auto;
}
/* Overlay tinted to the band background */
.opponent__art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side circle at 50% 48%,
      rgba(16, 16, 18, 0) 56%, rgba(16, 16, 18, 0.72) 84%, var(--bg-alt) 100%);
}

/* --------------------------------------------------------------- screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-5);
}
.shot { margin: 0; }
.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.shot:hover img { transform: translateY(-4px); border-color: var(--border-strong); }
.shot figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-align: center;
}

/* ------------------------------------------------------------------- studio */

.studio {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.studio__lede { margin-bottom: var(--space-8); }
.studio__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-8);
  margin: 0;
  padding: var(--space-8);
  list-style: none;
  background: var(--surface-card);
  background-image: var(--grad-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.studio__facts .fact__value { font-size: var(--fs-h3); color: var(--gold-500); }

/* ---------------------------------------------------------------------- CTA */

.cta {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0;
  border-top: 1px solid var(--border-subtle);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  /* The game's own 67 texture, dialled right down so type stays readable */
  background: url("../assets/game/texture-67.jpg") center / cover no-repeat;
  opacity: 0.2;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink-950) 0%, rgba(10, 10, 11, 0.5) 50%, var(--ink-950) 100%);
}
.cta__inner { position: relative; z-index: 1; text-align: center; }
.cta__logo { height: 132px; width: auto; margin: 0 auto var(--space-6); }
.cta__title {
  font-size: var(--fs-display-2);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.cta__lede {
  max-width: 48ch;
  margin: 0 auto var(--space-8);
  font-size: var(--fs-lg);
  color: var(--text-secondary);
}

/* ------------------------------------------------------------------- footer */

.footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-subtle);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}
.footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.footer__brand img { height: 44px; width: auto; }
.footer__copy { font-size: var(--fs-sm); color: var(--text-muted); }

.footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.footer__nav a { font-size: var(--fs-sm); color: var(--text-secondary); }
.footer__nav a:hover { color: var(--gold-500); }

/* =========================================================== responsive === */

@media (max-width: 1080px) {
  .deck { grid-template-columns: repeat(3, 1fr); }
  .shots { grid-template-columns: repeat(3, 1fr); }
  .shots .shot:nth-child(n + 4) { display: none; }
  .feature { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature__art { max-width: 400px; margin: 0 auto; }
}

@media (max-width: 900px) {
  :root { --fs-display-1: 3.25rem; --fs-display-2: 2.75rem; --fs-h1: 2.25rem; }

  /* No JS, so no burger menu: the nav wraps to its own scrollable row rather
     than being hidden, which would make it unreachable on touch devices. */
  .site-header { height: auto; }
  .site-header__inner {
    height: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    padding-bottom: var(--space-2);
  }
  .brand img { height: 40px; }
  .nav {
    order: 3;
    flex: 1 0 100%;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { padding-left: var(--space-3); padding-right: var(--space-3); }
  .nav__link::after { left: var(--space-3); right: var(--space-3); }
  html { scroll-padding-top: 132px; }

  .hero__inner,
  .opponent,
  .studio,
  .lineup {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .hero__inner { padding-top: var(--space-12); }
  .hero__art { order: -1; min-height: 0; }
  .hero__monkey { max-width: 340px; }
  .hero__wordmark { max-width: 220px; }
  .hero__splatters { left: 30%; width: 80%; }

  .grid-3,
  .steps { grid-template-columns: 1fr; }

  .opponent__art { max-width: 380px; margin: 0 auto; }
  .factbar { gap: var(--space-8); }
  .band__drip { height: 32px; }
}

@media (max-width: 560px) {
  :root { --fs-display-1: 2.75rem; --gutter: 20px; }

  .section, .band { padding: var(--space-12) 0; }
  .cta { padding: var(--space-16) 0; }

  .deck { grid-template-columns: repeat(2, 1fr); }
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shots .shot:nth-child(n + 3) { display: none; }

  .feature { padding: var(--space-5); }
  .feature__top { flex-wrap: wrap; }

  .factbar { gap: var(--space-6) var(--space-8); }
  .fact__value { font-size: var(--fs-h3); }
  .studio__facts { grid-template-columns: 1fr; }

  .btn-row .btn { flex: 1 1 100%; }
}

/* Respect reduced-motion — the brand's springy hovers are decorative */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover, .gamecard:hover, .shot:hover img, .deck__item:hover .pcard { transform: none; }
}

/* ============================================== legal / document pages === */

.doc {
  max-width: 78ch;
  margin: 0 auto;
  padding: var(--space-16) var(--gutter) var(--space-20);
}
.doc__kicker { margin-bottom: var(--space-3); }
.doc h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.doc__meta {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-10);
}
.doc h2 {
  font-size: var(--fs-h4);
  text-transform: uppercase;
  margin: var(--space-12) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.doc h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  letter-spacing: 0;
  text-transform: none;
  margin: var(--space-6) 0 var(--space-2);
}
.doc p, .doc li { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.doc p { margin-bottom: var(--space-4); }
.doc ul, .doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.doc li { margin-bottom: var(--space-2); }
.doc strong { color: var(--text-primary); font-weight: var(--fw-bold); }
.doc a { text-decoration: underline; text-underline-offset: 2px; }

/* Summary panel at the top of each document */
.summary {
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  background: var(--gold-soft);
  border: 1px solid rgba(255, 183, 0, 0.28);
  border-radius: var(--radius-lg);
}
.summary p:last-child, .summary ul { margin-bottom: 0; }

/* Unfilled detail that must be completed before launch. Deliberately loud:
   this should be impossible to publish by accident. */
.fill {
  display: inline-block;
  padding: 1px 7px;
  background: var(--danger);
  color: #fff;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* Legal-basis table */
.doc__table { width: 100%; overflow-x: auto; margin-bottom: var(--space-4); }
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.doc th, .doc td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-subtle);
}
.doc th {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-primary);
  white-space: nowrap;
}
.doc td { color: var(--text-secondary); }

/* Utilities. These exist as classes rather than style="" attributes because the
   deployed CSP is style-src 'self' — inline style attributes are blocked. */
.u-center { text-align: center; }
.u-mt-8 { margin-top: var(--space-8); }