/* ==========================================================================
   Big Party — site stylesheet

   The palette is the game's own. `core.css` supplies the neutrals and the gold;
   the twelve TEAM_COLORS from `src/core/state.js` supply everything else and are
   used here as a real accent system — one colour per minigame, carried through
   that mode's card, its meta chips and its hover glow.

   If a colour changes in the game, change it here.
   ========================================================================== */

:root {
  /* --- neutrals, from bigparty3d/styles/core.css --- */
  --ink: #14100c;
  --cream: #f4ead6;
  --cream-dim: #cdbfa6;
  --gold: #e0b83a;
  --gold-hot: #ffd45a;

  /* --- the game's TEAM_COLORS, as the site's accent palette --- */
  --c-crimson: #e0503a;
  --c-sky: #4aa8e0;
  --c-sage: #7fb04a;
  --c-gold: #e0b83a;
  --c-orchid: #a563d4;
  --c-teal: #3fc0ac;
  --c-rose: #e07aa8;
  --c-ember: #ef8a2b;
  --c-mint: #6fe0a0;
  --c-indigo: #6a72d8;

  /* Every accented component reads this. Default gold; overridden per card. */
  --accent: var(--gold);

  /* --- site-only surfaces ---
     Deliberately NOT the game's `--ink` (#14100c). That colour is a warm
     brown-black: fine as a UI background in-engine, but laid over the coloured
     sunset below it at any real opacity it turns the whole page to mud. These
     are near-black with a violet cast instead, so a panel reads as shade over
     the colour rather than a brown film on top of it. */
  --base: #0d0a13;
  --ink-2: #150f1e;
  --ink-3: #1e1729;
  --panel: rgba(16, 11, 24, 0.58);
  --edge: rgba(244, 234, 214, 0.16);
  --edge-strong: rgba(244, 234, 214, 0.34);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 26px 60px rgba(0, 0, 0, 0.6);

  --display: 'Archivo Black', 'Arial Black', 'Arial Bold', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --pad: clamp(18px, 4vw, 34px);
  --r: 18px;
}

/* ---------------------------------------------------------------- reset ---- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
}

/* The sky the game is actually set in: a sunset that drifts. Saturated colour
   at full strength, with nothing laid over the top to calm it down. The store
   backdrop image used to sit under this and has been dropped — it is warm brown
   and it was dulling every gradient above it. Pure colour reads better and is
   one fewer request. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(58% 44% at 12% 4%, rgba(165, 99, 212, 0.62), transparent 64%),
    radial-gradient(56% 42% at 88% 14%, rgba(239, 138, 43, 0.58), transparent 66%),
    radial-gradient(52% 40% at 74% 62%, rgba(224, 80, 58, 0.44), transparent 66%),
    radial-gradient(66% 48% at 46% 98%, rgba(63, 192, 172, 0.40), transparent 68%),
    radial-gradient(48% 40% at 24% 74%, rgba(106, 114, 216, 0.38), transparent 66%),
    var(--base);
  animation: drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.10); }
}

/* A vignette, NOT a veil. The old rule was a flat sheet of the game's warm
   brown-black at up to 92% across the whole viewport, which is what made a
   vibrant palette look muddy. This darkens the outer edges only and leaves the
   middle of the page — where the colour is — completely alone. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 100% at 50% 42%, transparent 42%, rgba(13, 10, 19, 0.62) 100%);
  pointer-events: none;
}

img, video, canvas { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--gold-hot);
  outline-offset: 3px;
  border-radius: 6px;
}

.vh {
  position: absolute;
  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;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------------------------------------------------------------- type ---- */

.eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The headline runs a warm gradient rather than sitting flat cream — it is the
   loudest thing on the page and it should look it.

   The gradient needs `color: transparent`, which means a browser without
   `background-clip: text` would render every H2 INVISIBLE rather than merely
   plain. So solid cream is the base and the gradient is applied only where the
   clip is actually supported. */
.h2 {
  font-size: clamp(34px, 6.4vw, 68px);
  text-transform: uppercase;
  color: var(--cream);
  padding-bottom: 0.06em;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .h2 {
    background-image: linear-gradient(178deg, var(--cream) 30%, var(--gold-hot) 78%, var(--c-ember) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.h3 { font-size: clamp(24px, 3.4vw, 36px); text-transform: uppercase; }

.lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--cream-dim);
  max-width: 62ch;
}

.section-head { display: grid; gap: 12px; margin-bottom: clamp(30px, 5vw, 52px); }
.section-head.center { justify-items: center; text-align: center; }

section { padding-block: clamp(58px, 9vw, 116px); position: relative; }

/* A coloured wash per section, so the scroll changes temperature instead of
   running one flat dark from top to bottom. */
section[data-tint]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 60% at 50% 40%, var(--tint), transparent 70%);
  pointer-events: none;
}
section[data-tint='violet'] { --tint: rgba(165, 99, 212, 0.15); }
section[data-tint='ember']  { --tint: rgba(239, 138, 43, 0.15); }
section[data-tint='teal']   { --tint: rgba(63, 192, 172, 0.13); }
section[data-tint='crimson']{ --tint: rgba(224, 80, 58, 0.14); }

.rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--c-orchid), var(--c-ember), var(--gold-hot), var(--c-teal), transparent);
  opacity: 0.5;
}

/* -------------------------------------------------------------- buttons ---- */

.btn {
  --btn-bg: linear-gradient(180deg, var(--gold-hot), var(--c-ember));
  --btn-fg: var(--ink);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  border-radius: 13px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(120, 52, 8, 0.55), 0 14px 34px rgba(239, 138, 43, 0.34);
  transition: transform .08s ease, filter .14s ease, box-shadow .14s ease;
}

/* A shine that crosses the primary button every few seconds. */
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: shine 4.6s ease-in-out infinite;
}

@keyframes shine {
  0%       { transform: translateX(-180%) skewX(-18deg); }
  55%,100% { transform: translateX(420%) skewX(-18deg); }
}

.btn:hover { filter: brightness(1.07) saturate(1.1); box-shadow: 0 6px 0 rgba(120, 52, 8, 0.55), 0 18px 44px rgba(239, 138, 43, 0.5); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(120, 52, 8, 0.55), 0 8px 20px rgba(239, 138, 43, 0.3); }

.btn--ghost {
  --btn-bg: rgba(244, 234, 214, 0.06);
  --btn-fg: var(--cream);
  border: 2px solid var(--edge-strong);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost::after { content: none; }
.btn--ghost:hover { border-color: var(--gold-hot); color: var(--gold-hot); box-shadow: 0 0 26px rgba(224, 184, 58, 0.28); filter: none; }
.btn--ghost:active { transform: translateY(2px); box-shadow: none; }

.btn--sm { padding: 10px 18px; font-size: 13px; }

.btn .tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(13, 10, 19, 0.28);
  font-size: 11px;
  letter-spacing: 0.1em;
}

/* ------------------------------------------------------------------ nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(13, 10, 19, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav[data-stuck='true'] {
  border-bottom-color: transparent;
  background: rgba(13, 10, 19, 0.88);
}
/* The hairline is the full accent spectrum, not a grey line. */
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--c-orchid), var(--c-crimson), var(--c-ember), var(--gold-hot), var(--c-teal), var(--c-sky));
  opacity: 0;
  transition: opacity .25s ease;
}
.nav[data-stuck='true']::after { opacity: 0.9; }

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 0.03em;
}
.brand img { width: 34px; height: 34px; border-radius: 9px; }

.nav__links { display: flex; align-items: center; gap: 26px; }

.nav__links a:not(.btn) {
  position: relative;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color .14s ease;
}
.nav__links a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-hot);
  transition: right .22s ease;
}
.nav__links a:not(.btn):hover { color: var(--gold-hot); }
.nav__links a:not(.btn):hover::after { right: 0; }

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

.hero { padding-block: 0 clamp(40px, 6vw, 78px); }

.hero__stage {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--edge);
  box-shadow: var(--shadow-lift), 0 0 90px rgba(239, 138, 43, 0.20);
  isolation: isolate;
  margin-top: clamp(22px, 3vw, 40px);
}

.hero__plate { width: 100%; aspect-ratio: 1920 / 620; object-fit: cover; }

.hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 10, 19, 0.10) 0%, transparent 30%, rgba(13, 10, 19, 0.62) 78%, rgba(13, 10, 19, 0.82) 100%);
  pointer-events: none;
}

.hero__copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 18px;
  text-align: center;
  padding: clamp(20px, 4vw, 46px);
}

.hero__logo {
  width: clamp(230px, 42vw, 480px);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(255, 212, 90, 0.3));
}

.hero__tagline {
  font-family: var(--display);
  font-size: clamp(12px, 1.8vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-hot);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

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

.runners {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 42%;
  min-height: 130px;
  pointer-events: none;
}
.runners canvas { width: 100%; height: 100%; display: block; }

.hero__pitch {
  margin-top: clamp(26px, 4vw, 44px);
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}
.hero__pitch .lede { font-size: clamp(18px, 2.3vw, 22px); color: var(--cream); }
.hero__pitch .lede b { color: var(--gold-hot); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Each chip takes its own colour from the team palette — the row reads as the
   game's cast rather than six identical grey pills. */
.chip {
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, rgba(13, 10, 19, 0.6));
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

.chip:nth-child(1) { --accent: var(--c-mint); }
.chip:nth-child(2) { --accent: var(--c-gold); }
.chip:nth-child(3) { --accent: var(--c-crimson); }
.chip:nth-child(4) { --accent: var(--c-sky); }
.chip:nth-child(5) { --accent: var(--c-orchid); }
.chip:nth-child(6) { --accent: var(--c-teal); }

/* The live one pulses, gently. */
.chip--live { animation: livepulse 2.6s ease-in-out infinite; }
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%      { box-shadow: 0 0 0 9px transparent; }
}

/* --------------------------------------------------------------- ticker ---- */

.ticker {
  border-block: 1px solid var(--edge);
  background: linear-gradient(90deg,
    rgba(165, 99, 212, 0.18), rgba(224, 80, 58, 0.18), rgba(239, 138, 43, 0.18), rgba(63, 192, 172, 0.18));
  overflow: hidden;
  padding-block: 16px;
  --mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: var(--mask);
  -webkit-mask-image: var(--mask);
}

.ticker__track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker span {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  white-space: nowrap;
}

/* Cycle the mode names through the team palette. */
.ticker span:nth-of-type(7n+1) { color: var(--c-gold); }
.ticker span:nth-of-type(7n+3) { color: var(--c-sky); }
.ticker span:nth-of-type(7n+5) { color: var(--c-orchid); }
.ticker span:nth-of-type(7n+7) { color: var(--c-mint); }
.ticker span:nth-of-type(7n+9) { color: var(--c-ember); }
.ticker .dot { color: var(--cream-dim); opacity: 0.5; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- cards ---- */

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 26px;
  backdrop-filter: blur(3px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  box-shadow: var(--shadow-lift), 0 0 40px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --------------------------------------------------------------- slots ----
   Media "bones": every gameplay image and the trailer point at a file under
   assets/media/. Until that file exists the <img> removes itself on error and
   this placeholder shows through, labelled with the exact filename to drop in. */

.slot {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--accent) 9%, transparent) 0 12px, transparent 12px 24px),
    var(--ink-2);
  border: 1px dashed color-mix(in srgb, var(--accent) 38%, transparent);
  display: grid;
  place-items: center;
}

.slot::after {
  content: attr(data-slot);
  position: absolute;
  z-index: 0;
  padding: 9px 14px;
  border-radius: 9px;
  background: rgba(13, 10, 19, 0.74);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 70%, var(--cream));
  text-align: center;
  max-width: 84%;
}

/* The child is a <picture> now (WebP with a JPEG fallback), so these match the descendant
   rather than the direct child — `> img` stopped matching the moment the wrapper appeared. */
.slot > picture,
.slot > video {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.slot img,
.slot > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.slot:has(img),
.slot:has(video) { border-style: solid; }
.slot:has(img)::after,
.slot:has(video)::after { content: none; }

.slot--wide { aspect-ratio: 16 / 9; }
.slot--tall { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------------- featured ---- */

.featured {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}

.featured__body { display: grid; gap: 18px; align-content: start; }

.badge {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-hot), var(--c-ember));
  border: 0;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(-1.6deg);
  box-shadow: 0 8px 22px rgba(239, 138, 43, 0.4);
}

.beats { display: grid; gap: 11px; margin: 4px 0 0; padding: 0; list-style: none; }

.beats li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--cream-dim);
}

.beats li::before {
  content: '';
  width: 10px; height: 10px;
  margin-top: 0.5em;
  margin-left: 6px;
  border-radius: 2px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.beats li:nth-child(1) { --accent: var(--c-crimson); }
.beats li:nth-child(2) { --accent: var(--c-sky); }
.beats li:nth-child(3) { --accent: var(--c-gold); }
.beats li:nth-child(4) { --accent: var(--c-orchid); }
.beats li:nth-child(5) { --accent: var(--c-mint); }

.beats b { color: var(--cream); font-weight: 400; font-family: var(--display); font-size: 0.95em; }

/* ---------------------------------------------------------------- modes ---- */

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

/* One colour per mode, set by data-accent in the markup and inherited by the
   card's top bar, its slot, its meta chips and its hover glow. */
.mode {
  position: relative;
  display: grid;
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.mode::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}

.mode:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: var(--shadow-lift), 0 0 46px color-mix(in srgb, var(--accent) 26%, transparent);
}

.mode[data-accent='crimson'] { --accent: var(--c-crimson); }
.mode[data-accent='sky']     { --accent: var(--c-sky); }
.mode[data-accent='sage']    { --accent: var(--c-sage); }
.mode[data-accent='gold']    { --accent: var(--c-gold); }
.mode[data-accent='orchid']  { --accent: var(--c-orchid); }
.mode[data-accent='teal']    { --accent: var(--c-teal); }
.mode[data-accent='rose']    { --accent: var(--c-rose); }
.mode[data-accent='ember']   { --accent: var(--c-ember); }
.mode[data-accent='mint']    { --accent: var(--c-mint); }
.mode[data-accent='indigo']  { --accent: var(--c-indigo); }

.mode .slot { border-radius: 0; border-inline: 0; border-top: 0; }
.mode__body { display: grid; gap: 10px; padding: 22px; }

/* Lifted a fifth of the way toward cream. The bars, borders and glows keep the
   game's exact team colour, but as TEXT the darker accents get thin against the
   coloured field behind the card — orchid on the violet pool measured 3.4:1,
   which clears the large-text bar and nothing more. This lands every heading
   comfortably clear while the hue still reads as that mode's colour. */
.mode__body h3 { color: color-mix(in srgb, var(--accent) 80%, var(--cream)); }

.mode__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mode__meta span {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  color: var(--cream-dim);
}

.mode__meta .hot {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.mode__body p { color: var(--cream-dim); font-size: 15.5px; }

/* --------------------------------------------------------------- pillars ---- */

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.pillar { display: grid; gap: 11px; align-content: start; }

.pillar[data-accent='crimson'] { --accent: var(--c-crimson); }
.pillar[data-accent='sky']     { --accent: var(--c-sky); }
.pillar[data-accent='sage']    { --accent: var(--c-sage); }
.pillar[data-accent='gold']    { --accent: var(--c-gold); }
.pillar[data-accent='orchid']  { --accent: var(--c-orchid); }
.pillar[data-accent='teal']    { --accent: var(--c-teal); }
.pillar[data-accent='rose']    { --accent: var(--c-rose); }
.pillar[data-accent='ember']   { --accent: var(--c-ember); }
.pillar[data-accent='mint']    { --accent: var(--c-mint); }
.pillar[data-accent='indigo']  { --accent: var(--c-indigo); }

/* A stat key, not an icon: the number IS the claim, and the heading finishes
   the sentence ("0 / asset files", "10 / languages"). */
.pillar__key {
  font-family: var(--display);
  font-size: clamp(38px, 4.6vw, 54px);
  line-height: 0.9;
  /* Lifted toward cream for the same reason as the mode headings — the darker
     accents thin out against the coloured field. The glow underneath keeps the
     game's exact colour, so the identity is unchanged. */
  color: color-mix(in srgb, var(--accent) 80%, var(--cream));
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 45%, transparent);
}

.pillar h3 { font-size: 19px; text-transform: uppercase; }
.pillar p { color: var(--cream-dim); font-size: 15.5px; }

/* ----------------------------------------------------------------- cast ---- */
/* The lineup renders live into this box. It is sized in aspect rather than
   pixels so the figures keep their scale as the column narrows, and it keeps
   its height when the canvas never arrives — an empty band is better than the
   section collapsing to a heading. */

.cast {
  position: relative;
  aspect-ratio: 16 / 6;
  min-height: 210px;
  border-radius: var(--r);
  border: 1px solid var(--edge);
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 50% 118%, rgba(224, 112, 58, 0.28), transparent 68%),
    radial-gradient(60% 100% at 18% 0%, rgba(165, 99, 212, 0.26), transparent 66%),
    var(--ink-2);
  box-shadow: var(--shadow);
}

.cast canvas { width: 100%; height: 100%; display: block; }

/* A floor for them to stand on, so five figures are not hanging in a box. */
.cast::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%; bottom: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--edge-strong), transparent);
  pointer-events: none;
}

.cast__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  color: var(--cream-dim);
}

.cast__names {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.cast__names li { display: grid; gap: 3px; text-align: center; }
.cast__names b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.cast__names li:nth-child(1) { --accent: var(--c-crimson); }
.cast__names li:nth-child(2) { --accent: var(--c-sky); }
.cast__names li:nth-child(3) { --accent: var(--c-sage); }
.cast__names li:nth-child(4) { --accent: var(--c-orchid); }
.cast__names li:nth-child(5) { --accent: var(--cream-dim); }
.cast__names span { font-size: 13px; color: var(--cream-dim); line-height: 1.35; }

@media (max-width: 760px) {
  .cast { aspect-ratio: 4 / 3; }
  .cast__names { grid-template-columns: 1fr 1fr; text-align: left; }
  .cast__names li { text-align: left; }
  .cast__names li:last-child { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------- gallery ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
}
.gallery .slot:nth-child(1) { --accent: var(--c-crimson); }
.gallery .slot:nth-child(2) { --accent: var(--c-sky); }
.gallery .slot:nth-child(3) { --accent: var(--c-orchid); }
.gallery .slot:nth-child(4) { --accent: var(--c-mint); }
.gallery .slot:nth-child(5) { --accent: var(--c-ember); }
.gallery .slot:nth-child(6) { --accent: var(--c-teal); }

/* --------------------------------------------------------------- roadmap ---- */

.roadmap { display: grid; gap: 0; position: relative; }

.milestone {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  padding-block: 28px;
  border-top: 1px solid var(--edge);
  transition: background .2s ease;
}
.milestone:last-child { border-bottom: 1px solid var(--edge); }
.milestone:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }

.milestone[data-accent='mint']   { --accent: var(--c-mint); }
.milestone[data-accent='gold']   { --accent: var(--c-gold); }
.milestone[data-accent='sky']    { --accent: var(--c-sky); }
.milestone[data-accent='orchid'] { --accent: var(--c-orchid); }

.milestone__no {
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 42%, transparent);
  transition: color .2s ease;
}
.milestone:hover .milestone__no { color: var(--accent); }

.milestone__body { display: grid; gap: 8px; }
.milestone h3 { font-size: 22px; text-transform: uppercase; }
.milestone p { color: var(--cream-dim); font-size: 15.5px; }

.status {
  justify-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.status--live { animation: livepulse 2.6s ease-in-out infinite; }

/* ------------------------------------------------------------ newsletter ---- */

.signup {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: clamp(34px, 5vw, 62px) clamp(22px, 4vw, 48px);
  border-radius: 24px;
  border: 1px solid var(--edge);
  background:
    linear-gradient(165deg, rgba(74, 40, 110, 0.62), rgba(13, 10, 19, 0.86)),
    url('../assets/art/showcase.webp') center / cover no-repeat,
    var(--ink-2);
  box-shadow: var(--shadow-lift), 0 0 70px rgba(165, 99, 212, 0.2);
}

/* A colour band across the top of the band. */
.signup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-orchid), var(--c-crimson), var(--c-ember), var(--gold-hot), var(--c-mint), var(--c-teal));
}

.signup > * { position: relative; z-index: 1; }

.signup form {
  display: flex;
  gap: 11px;
  width: min(520px, 100%);
  margin-top: 4px;
}

.signup input[type='email'] {
  flex: 1;
  min-width: 0;
  padding: 15px 18px;
  border-radius: 13px;
  border: 1px solid var(--edge-strong);
  background: rgba(13, 10, 19, 0.72);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.signup input[type='email']::placeholder { color: rgba(205, 191, 166, 0.6); }
.signup input[type='email']:focus {
  outline: none;
  border-color: var(--gold-hot);
  box-shadow: 0 0 0 4px rgba(255, 212, 90, 0.16);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.signup__note { font-size: 14.5px; color: var(--cream-dim); min-height: 1.6em; }
.signup__note[data-tone='bad'] { color: var(--c-crimson); }
.signup__note[data-tone='good'] { color: var(--c-mint); }

/* ------------------------------------------------------------------ faq ---- */

.faq { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }

.faq details {
  border: 1px solid var(--edge);
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color .18s ease;
}
.faq details:nth-child(1) { --accent: var(--c-mint); }
.faq details:nth-child(2) { --accent: var(--c-gold); }
.faq details:nth-child(3) { --accent: var(--c-sky); }
.faq details:nth-child(4) { --accent: var(--c-orchid); }
.faq details:nth-child(5) { --accent: var(--c-teal); }
.faq details:nth-child(6) { --accent: var(--c-crimson); }
.faq details:nth-child(7) { --accent: var(--c-ember); }
.faq details[open] { border-left-color: var(--accent); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 16px;
  transition: color .14s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq .plus {
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] .plus { transform: rotate(135deg); }

.faq .answer { padding: 0 20px 19px; color: var(--cream-dim); }

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

.footer { border-top: 1px solid var(--edge); padding-block: 46px 34px; position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-orchid), var(--c-ember), var(--c-teal), transparent);
  opacity: 0.55;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 34px;
  align-items: start;
}

.footer p { color: var(--cream-dim); font-size: 15px; max-width: 46ch; margin-top: 12px; }

.footer__links { display: grid; gap: 12px; justify-items: start; }
.footer__label { font-family: var(--display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

.socials { display: flex; flex-wrap: wrap; gap: 9px; }

.socials a {
  padding: 9px 15px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  transition: border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.socials a:nth-child(1) { --accent: var(--c-sky); }
.socials a:nth-child(2) { --accent: var(--c-orchid); }
.socials a:nth-child(3) { --accent: var(--c-rose); }
.socials a:nth-child(4) { --accent: var(--c-mint); }
.socials a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 30%, transparent);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
  font-size: 14px;
  color: var(--cream-dim);
}
.footer__base nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__base a:hover { color: var(--gold-hot); }

/* ------------------------------------------------------------ responsive ---- */

@media (max-width: 1000px) {
  .modes, .pillars, .gallery { grid-template-columns: 1fr 1fr; }
  .featured { grid-template-columns: 1fr; }
  .featured__art { order: -1; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav__links a:not(.btn) { display: none; }
  .runners { display: none; }
  .hero__stage { border-radius: 18px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .modes, .pillars, .gallery { grid-template-columns: 1fr; }
  .milestone { grid-template-columns: 1fr; gap: 10px; }
  .signup form { flex-direction: column; }
}

/* The game ships a REDUCE MOTION setting; the site honours the same principle.
   Everything that drifts, pulses, shines or marches stops here, and the runner
   strip never boots (scripts/site.js checks this too). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  .ticker__track { animation: none; }
  .btn::after { animation: none; opacity: 0; }
  .chip--live, .status--live { animation: none; }
  .runners { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* `color-mix` is well supported, but a browser without it would drop every rule
   that uses one. These restate the essentials in flat colour so an old engine
   still gets a styled, legible page rather than a transparent one. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .chip { border-color: var(--edge-strong); background: rgba(13, 10, 19, 0.6); color: var(--cream); }
  .slot { border-color: var(--edge); background: var(--ink-2); }
  .slot::after { color: var(--cream-dim); }
  .mode__meta .hot { border-color: var(--gold); color: var(--gold); background: transparent; }
  .mode__body h3 { color: var(--cream); }
  .pillar__key { color: var(--gold); text-shadow: none; }
  .status { border-color: var(--edge-strong); color: var(--cream); background: transparent; }
  .faq details { border-left-color: var(--gold); }
  .milestone__no { color: var(--cream-dim); }
}