/* ==========================================================================
   Mac Manhunt — styles
   Brand colours sampled from the helmet logo (maroon #622232, silver #B9B0B1)
   ========================================================================== */

:root {
  /* Surfaces: near-black with the cold teal tint of the hand footage */
  --bg: #040506;
  --bg-2: #08090b;
  --surface: #0e1114;
  --surface-2: #14181c;
  --fog: #15282d;

  /* Text */
  --text: #ece7e7;
  --text-2: #b9b0b1;   /* logo silver */
  --text-3: #8c8486;
  --line: rgba(236, 231, 231, 0.1);
  --line-strong: rgba(236, 231, 231, 0.2);

  /* Brand maroon (logo #622232, lifted for UI contrast) */
  --maroon-900: #1e070d;
  --maroon-800: #3d1019;
  --maroon-logo: #622232;
  --maroon: #7a2236;
  --maroon-600: #8e2a41;
  --maroon-400: #c2566f;  /* 4.7:1 on --bg */
  --maroon-300: #db8497;  /* 7.5:1 on --bg */

  /* Status colours (registration + exec pages) */
  --ok: #5fd39a;          /* game on, checked in, signed */
  --warn: #f0b45a;        /* postponed, waitlist */
  --error: #ff9aac;       /* form errors (10:1 on --bg) */

  /* Brushed-silver gradient used on display type (matches the helmet) */
  --silver: linear-gradient(180deg, #f7f3f3 0%, #d6cfd0 48%, #9c9394 100%);
  --silver-maroon: linear-gradient(180deg, #f3c3cd 0%, #db8497 45%, #a8425a 100%);

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1280px;
  --header-h: 72px;
  --radius: 4px;
  --radius-lg: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--header-h); } /* jumps land below the fixed header */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
body.menu-open { overflow: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: 0.75rem 1rem; background: var(--maroon); color: #fff; border-radius: var(--radius);
  font-weight: 600; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--maroon-300); outline-offset: 3px; border-radius: 2px; }

.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(36rem + 2 * var(--gutter)); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0.8rem 1.45rem;
  font: 600 0.9rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .icon { transition: transform 0.25s var(--ease-out); }
@media (hover: hover) { .btn:hover .icon--nudge { transform: translateX(3px); } }
.btn--primary {
  background: var(--maroon); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 30px -12px rgba(122, 34, 54, 0.9);
}
@media (hover: hover) { .btn--primary:not([aria-disabled="true"]):not(:disabled):hover { background: var(--maroon-600); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 36px -10px rgba(194, 86, 111, 0.7); } }
.btn--ghost { background: rgba(236, 231, 231, 0.04); border-color: var(--line-strong); color: var(--text); }
@media (hover: hover) { .btn--ghost:hover { background: rgba(236, 231, 231, 0.09); border-color: rgba(236, 231, 231, 0.42); } }
.btn--sm { min-height: 44px; padding: 0.6rem 1.05rem; font-size: 0.78rem; }
.btn--lg { min-height: 56px; padding: 1rem 1.8rem; font-size: 0.95rem; }
.btn--xl { min-height: 60px; padding: 1.1rem 1.8rem; font-size: 1.05rem; letter-spacing: 0.1em; }
.btn--danger { background: transparent; border-color: rgba(255, 154, 172, 0.5); color: var(--error); }
@media (hover: hover) { .btn--danger:hover { background: rgba(255, 154, 172, 0.1); } }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(6, 7, 9, 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}
.site-header__inner {
  display: flex; align-items: center; gap: 2rem;
  height: var(--header-h); max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; }
.brand__mark { width: auto; height: 40px; filter: drop-shadow(0 0 12px rgba(122, 34, 54, 0.35)); }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
.brand__name span { color: var(--text-2); }

.nav { margin-inline: auto; }
.nav__list { display: flex; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.nav__list a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; font-size: 0.98rem; letter-spacing: 0.02em; color: var(--text-2);
  transition: color 0.2s;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: var(--maroon-400); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav__list a:hover, .nav__list a[aria-current="true"] { color: var(--text); }
.nav__list a:hover::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.menu-toggle {
  display: none; place-items: center; width: 44px; height: 44px; margin-left: auto;
  background: rgba(236, 231, 231, 0.05); border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle .icon { width: 22px; height: 22px; }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  background: rgba(4, 5, 6, 0.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__list a {
  display: flex; align-items: center; min-height: 64px;
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; text-transform: uppercase; letter-spacing: 0.02em;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 899px) {
  .nav, .site-header__cta { display: none; }
  .menu-toggle { display: grid; }
}

/* "Game info" link in the header of the registration / exec pages */
.header-back {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 0.95rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(236, 231, 231, 0.04);
  color: var(--text-2); font-size: 0.92rem; font-weight: 500; cursor: pointer;
}
@media (hover: hover) { .header-back:hover { color: var(--text); border-color: rgba(236, 231, 231, 0.4); } }
/* ---------- Status banner (config "status") ---------- */

/* Status banner on the registration pages ("status" in data/config.json) */
.status-banner { border-bottom: 1px solid var(--line); }
.status-banner__inner {
  display: flex; align-items: center; gap: 0.75rem;
  max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding: 0.7rem var(--gutter);
}
.status-banner .icon { width: 1.3rem; height: 1.3rem; }
.status-banner p { margin: 0; font-size: 0.97rem; line-height: 1.4; }
.status-banner strong {
  display: inline-block; margin-right: 0.45rem; padding: 0.28rem 0.5rem 0.26rem; border-radius: 2px; vertical-align: 0.1em;
  font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.status-banner--on { background: rgba(52, 168, 108, 0.13); border-color: rgba(95, 211, 154, 0.32); }
.status-banner--on .icon { color: var(--ok); }
.status-banner--on strong { background: var(--ok); color: #06140d; }
.status-banner--cancelled { background: #5b1626; border-color: var(--maroon-400); color: #fff; }
.status-banner--cancelled strong { background: #fff; color: var(--maroon); }
.status-banner--postponed { background: rgba(240, 180, 90, 0.13); border-color: rgba(240, 180, 90, 0.4); }
.status-banner--postponed .icon { color: var(--warn); }
.status-banner--postponed strong { background: var(--warn); color: #1d1204; }

/* ---------- Scroll scene ---------- */
/* The scene starts below the fixed header and pins just under it */
.scene { position: relative; height: 420vh; padding-top: var(--header-h); background: var(--bg); }
.scene__stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden;
  background: var(--bg) url("../assets/frames/001.webp") center / cover no-repeat;
  --dim: 0; --blackout: 0; --intro: 1;
}
.js .scene__stage { background-image: none; }

.scene__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.2s ease;
}
.scene__stage.is-ready .scene__canvas { opacity: 1; }

.scene__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4, 5, 6, 0.7) 0%, rgba(4, 5, 6, 0) 18%),
    linear-gradient(to top, rgba(4, 5, 6, 0.96) 0%, rgba(4, 5, 6, 0.55) 26%, rgba(4, 5, 6, 0) 52%),
    linear-gradient(to right, rgba(4, 5, 6, calc(0.8 * var(--intro))) 0%, rgba(4, 5, 6, 0) 58%),
    radial-gradient(120% 95% at 50% 42%, rgba(4, 5, 6, 0) 50%, rgba(4, 5, 6, 0.85) 100%);
}
/* film grain */
.scene__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* scroll-driven dimming + final fade to black */
.scene__stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--bg); opacity: calc(var(--dim) * 0.5 + var(--blackout));
}

.scene__intro, .next-hunt, .scroll-cue, .beat, .scene__progress, .scene__skip { z-index: 4; }
[data-beat] { will-change: opacity, transform; }

/* Bottom-aligned, but boxed in so it can never ride up past the top of the stage */
.scene__intro {
  position: absolute; left: var(--gutter); right: var(--gutter);
  top: 1.5rem; bottom: clamp(6.5rem, 17vh, 10rem);
  max-width: 44rem;
  display: flex; flex-direction: column;
  justify-content: flex-end; justify-content: safe flex-end;
  pointer-events: none;
}
.scene__intro > * { pointer-events: auto; }
.eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin: 0;
  font: 600 0.78rem/1.3 var(--font-body); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-2);
}
.eyebrow__num { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--maroon-300); font-variant-numeric: tabular-nums; }
.eyebrow__num::after { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.7; }

.scene__title {
  margin: 1rem 0 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, min(17vw, 22vh), 11.5rem); line-height: 0.8; letter-spacing: 0.005em;
}
.scene__title span { display: block; }
.scene__title span:first-child {
  color: transparent; -webkit-text-stroke: 1.5px rgba(236, 231, 231, 0.75);
  font-size: 0.62em; letter-spacing: 0.06em; margin-bottom: 0.08em;
}
.scene__title span:last-child {
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.55));
}
.scene__lede { margin: 1.5rem 0 2rem; max-width: 30rem; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--text); }

.next-hunt {
  position: absolute; right: var(--gutter); bottom: 2.25rem;
  display: flex; align-items: stretch; width: 22.5rem;
  background: rgba(8, 10, 12, 0.6); border: 1px solid var(--line-strong); border-radius: var(--radius);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-color 0.25s, background-color 0.25s;
}
.next-hunt:hover { border-color: rgba(194, 86, 111, 0.6); background: rgba(20, 10, 14, 0.7); }
.next-hunt__arrow { display: grid; place-items: center; width: 3.5rem; flex: none; background: var(--maroon); color: #fff; }
.next-hunt__arrow .icon { transition: transform 0.25s var(--ease-out); }
.next-hunt:hover .next-hunt__arrow .icon { transform: translateX(3px); }
.next-hunt__body { display: grid; gap: 0.15rem; padding: 0.85rem 1.1rem; }
.next-hunt__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--maroon-300); }
.next-hunt__title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; line-height: 1.1; }
.next-hunt__meta { font-size: 0.88rem; color: var(--text-2); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.6rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--text-2);
}
.scroll-cue__line { position: relative; width: 1px; height: 2.75rem; background: var(--line-strong); overflow: hidden; }
.scroll-cue__line::after {
  content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: linear-gradient(to bottom, transparent, var(--maroon-300));
  animation: cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue { to { top: 100%; } }

.beat {
  position: absolute; margin: 0; opacity: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 10.5rem); line-height: 0.86; letter-spacing: 0.005em;
  color: var(--text); text-shadow: 0 6px 50px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
  max-width: calc(100% - 2 * var(--gutter));
}
.beat--left { left: var(--gutter); top: 20%; }
.beat--right { right: var(--gutter); top: 46%; text-align: right; }
.beat--center { left: var(--gutter); right: var(--gutter); top: 36%; text-align: center; margin-inline: auto; }
.beat em {
  font-style: normal; display: inline-block;
  background: var(--silver-maroon); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(122, 34, 54, 0.85));
}

.scene__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(236, 231, 231, 0.06); }
.scene__progress span {
  display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--maroon), var(--maroon-300));
}
.scene__skip {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0 1rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2);
  opacity: 0; pointer-events: none; transition: opacity 0.3s, color 0.2s;
}
.scene__skip:hover { color: var(--text); }
.scene__stage.show-skip .scene__skip, .scene__skip:focus-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 1099px) {
  .next-hunt { display: none; }
}
@media (max-width: 719px) {
  .scene { height: 340vh; }
  .scene__intro { bottom: 5.75rem; }
  .scene__lede { margin: 1.1rem 0 1.5rem; }
  .scene__intro .btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .scene__intro .btn { padding-inline: 0.75rem; font-size: 0.8rem; letter-spacing: 0.06em; }
  .scroll-cue { bottom: 0.6rem; gap: 0.4rem; }
  .scroll-cue__line { height: 1.75rem; }
  .beat--left { top: 16%; }
  .beat--right { top: auto; bottom: 22%; }
  .beat--center { top: 38%; }
}

/* Short screens (small laptop windows, phones in landscape) */
@media (max-height: 600px) {
  .scene__intro { bottom: 3.25rem; }
  .scene__title { font-size: clamp(3rem, min(17vw, 19vh), 11.5rem); margin-top: 0.6rem; }
  .scene__lede { margin: 0.75rem 0 1rem; max-width: 40rem; font-size: 1rem; line-height: 1.5; }
  .scroll-cue { display: none; }
  .next-hunt { bottom: 1.25rem; }
}

/* Static fallback: reduced motion or no JS — no pinning, poster frame only */
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; }
  .scene__stage, .js .scene__stage {
    position: relative; top: 0; height: auto;
    min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
    background-image: url("../assets/frames/001.webp");
  }
  .scene__canvas, .beat, .scene__progress, .scene__skip, .scroll-cue { display: none; }
  .scroll-cue__line::after { animation: none; }
}
html:not(.js) .scene { height: auto; }
html:not(.js) .scene__stage { position: relative; top: 0; min-height: calc(100svh - var(--header-h)); }
html:not(.js) .beat, html:not(.js) .scene__progress, html:not(.js) .scene__skip { display: none; }

/* ==========================================================================
   BODY — editorial dark sections
   Patterns: mono label tags, statement typography, big-number stats,
   horizontal step cards, hover-reveal list, timetable rows, accordion FAQ,
   split buttons, marquee tickers, giant-wordmark footer.
   ========================================================================== */

/* ---------- Shared section bits ---------- */
.section { position: relative; padding-block: clamp(4.5rem, 10vw, 8rem); }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head--row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); align-items: end; gap: 1.5rem 4rem;
}
.section-head--center { display: grid; justify-items: center; text-align: center; }
.section-title {
  margin: 1.1rem 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.9rem, 7vw, 5.75rem); line-height: 0.9; letter-spacing: 0.005em;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance;
}
.section-lede { margin: 1.25rem 0 0; max-width: 34rem; color: var(--text-2); font-size: clamp(1.05rem, 1.25vw, 1.18rem); line-height: 1.6; }
.section-head--row .section-lede { margin: 0; }
@media (max-width: 799px) {
  .section-head--row { grid-template-columns: minmax(0, 1fr); }
}

/* Mono label tag (the small boxed labels above headlines) */
.tag {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.45rem 0.7rem 0.42rem;
  font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: #120a0c; background: var(--text); border-radius: 2px; width: fit-content; white-space: nowrap;
}
.tag::before { content: ""; width: 0.5rem; height: 0.5rem; flex: none; background: var(--maroon); }
.tag--maroon { background: var(--maroon); color: #fff; }
.tag--maroon::before { background: #fff; }
.tag--ghost { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag--ghost::before { background: var(--maroon-400); }
.tag--light { background: #f3eded; color: #2a0b14; }

/* Hand-scrawled marker annotations */
.scrawl {
  margin: 0; font-family: var(--font-marker); font-weight: 400; color: var(--maroon-300);
  font-size: 1.35rem; line-height: 1.15; transform: rotate(-4deg); transform-origin: left center;
}

/* Split buttons: label block + arrow block that pops on hover */
.btn--split { gap: 3px; padding: 0; min-height: 54px; background: none; border: 0; box-shadow: none; }
.btn--split .btn__label,
.btn--split .btn__icon {
  display: inline-flex; align-items: center; min-height: inherit;
  background: var(--maroon); color: #fff; border-radius: var(--radius);
  transition: background-color 0.2s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn--split .btn__label { gap: 0.6rem; padding: 0 1.5rem; }
.btn--split .btn__icon { justify-content: center; width: 54px; }
.btn--split .btn__icon .icon { width: 1.25rem; height: 1.25rem; }
@media (hover: hover) { .btn--split:hover .btn__label, .btn--split:hover .btn__icon { background: var(--maroon-600); } }
@media (hover: hover) { .btn--split:hover .btn__icon { transform: translateX(5px) rotate(-10deg) scale(1.08); } }
.btn--light .btn__label, .btn--light .btn__icon { background: #f3eded; color: #2a0b14; }
@media (hover: hover) { .btn--light:hover .btn__label, .btn--light:hover .btn__icon { background: #fff; } }
.btn--outline .btn__label, .btn--outline .btn__icon { background: rgba(236, 231, 231, 0.04); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (hover: hover) { .btn--outline:hover .btn__label, .btn--outline:hover .btn__icon { background: rgba(236, 231, 231, 0.1); } }
.btn--icon { width: 44px; padding: 0; }
@media (hover: hover) { .btn--jiggle:hover { animation: jiggle 0.55s ease-in-out; } }
@keyframes jiggle {
  20% { rotate: -2.5deg; } 40% { rotate: 2deg; } 60% { rotate: -1.25deg; } 80% { rotate: 0.6deg; } 100% { rotate: 0deg; }
}

/* ---------- Ticker bands ---------- */
.ticker-band { position: relative; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1rem, 3vw, 2rem); overflow: hidden; }
.ticker { position: relative; overflow: hidden; white-space: nowrap; }
.ticker--maroon { z-index: 2; background: var(--maroon); color: #fff; transform: rotate(-2deg) scale(1.03); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9); }
.ticker--silver { z-index: 1; margin-top: -1.25rem; background: #e6dfe0; color: #140a0d; transform: rotate(1.6deg) scale(1.03); }
.ticker--flat { transform: none; box-shadow: none; }
.ticker__track {
  display: inline-flex; align-items: center; gap: 1.75rem; padding: 0.9rem 0 0.8rem 1.75rem;
  animation: marquee var(--ticker-speed, 40s) linear infinite; will-change: transform;
}
.ticker__track--reverse { animation-direction: reverse; }
.ticker__track span { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 2.2rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; }
.ticker__track i { width: 0.6rem; height: 0.6rem; flex: none; background: currentColor; transform: rotate(45deg); opacity: 0.6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Manifesto + stats ---------- */
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 2rem 4rem; align-items: start; }
.manifesto__label { display: grid; justify-items: start; gap: 1.75rem; }
.manifesto__scrawl { font-size: 1.6rem; }
.manifesto__text {
  margin: 0; font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.85rem, 3.7vw, 3.6rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--text);
  text-wrap: pretty;
}
.manifesto__text em { font-style: normal; color: var(--maroon-300); }
.js .manifesto__text .w { color: rgba(236, 231, 231, 0.16); transition: color 0.4s ease; }
.js .manifesto__text .w.is-lit { color: var(--text); }
.js .manifesto__text em .w.is-lit { color: var(--maroon-300); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; list-style: none; }
.stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center;
  padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Gradient text only paints inside its box, so the box gets room for tall
   glyphs like "$" (line-height 1 + padding), pulled back in with negative margins. */
.stat__num {
  grid-row: span 2; font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1; padding-block: 0.06em; margin-block: -0.16em;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__num small { font-size: 0.38em; margin-left: 0.08em; letter-spacing: 0.04em; }
.stat__label { align-self: end; font: 500 0.78rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.stat__sub { align-self: start; margin-top: 0.25rem; font-size: 0.92rem; line-height: 1.35; color: var(--text-3); }

@media (max-width: 899px) {
  .manifesto__grid { grid-template-columns: 1fr; }
  .manifesto__label { grid-auto-flow: column; align-items: center; justify-content: start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } /* odd one out spans the row */
}
@media (max-width: 519px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- How it works: horizontal step cards ---------- */
.how { position: relative; padding-block: clamp(3rem, 6vw, 5rem); }
.hscroll__sticky { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.25rem, 3vh, 2.25rem); }
.how.is-pinned { padding-block: 0; }
.how.is-pinned .hscroll__sticky {
  position: sticky; top: var(--header-h); overflow: hidden;
  height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
}
.how__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; gap: 1rem 3rem; }
.how__head .section-title { font-size: clamp(2.6rem, 6vw, 5rem); }
.how__head .section-lede { margin: 0; }

.hscroll__viewport {
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-block: 1.25rem 1.5rem;
}
.hscroll__viewport::-webkit-scrollbar { display: none; }
.how.is-pinned .hscroll__viewport { overflow: visible; }
.hscroll__track {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; margin: 0; list-style: none;
  padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2));
}
.how.is-pinned .hscroll__track { will-change: transform; }
.step-card {
  --rot: -2deg;
  position: relative; isolation: isolate; overflow: hidden; flex: none;
  display: flex; flex-direction: column;
  width: clamp(17rem, 27vw, 24rem); min-height: clamp(21rem, 50vh, 30rem);
  padding: clamp(1.4rem, 2vw, 1.9rem); border-radius: 18px; scroll-snap-align: center;
  transform: rotate(var(--rot));
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-card:nth-child(even) { --rot: 1.75deg; }
@media (hover: hover) { .step-card:hover { transform: rotate(0deg) translateY(-8px); } }
.step-card__label { font-size: 1.65rem; transform: rotate(-3deg); }
.step-card__num {
  position: absolute; z-index: -1; right: -0.06em; bottom: -0.2em; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(9rem, 15vw, 13rem); line-height: 1;
  color: currentColor; opacity: 0.09;
}
.step-card__icon { width: 3.25rem; height: 3.25rem; margin: auto 0 1.25rem; stroke-width: 1.4; }
.step-card__title {
  margin: 0 0 0.6rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 3.4vw, 3.1rem); line-height: 0.9;
}
.step-card p:not(.scrawl) { position: relative; margin: 0; max-width: 19rem; font-size: 1.02rem; line-height: 1.5; }
.step-card--silver { background: linear-gradient(160deg, #f5f0f0 0%, #cbc3c4 100%); color: #16090d; }
.step-card--silver .step-card__label { color: var(--maroon); }
.step-card--silver p:not(.scrawl) { color: #3b2a2f; }
.step-card--maroon { background: linear-gradient(160deg, #96304a 0%, #5b1626 100%); color: #fff; }
.step-card--maroon .step-card__label { color: #f6c9d3; }
.step-card--maroon p:not(.scrawl) { color: rgba(255, 255, 255, 0.86); }
.step-card--dark { background: #0e1114; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.step-card--dark p:not(.scrawl) { color: var(--text-2); }
.step-card--steel { background: linear-gradient(160deg, #2c3137 0%, #14171b 100%); color: var(--text); }
.step-card--steel p:not(.scrawl) { color: var(--text-2); }
.step-card--cta {
  justify-content: flex-end;
  background: radial-gradient(90% 70% at 100% 0%, rgba(194, 86, 111, 0.45), transparent 65%), #12070b;
  color: var(--text); box-shadow: inset 0 0 0 1px rgba(194, 86, 111, 0.4);
}
.step-card--cta .step-card__label { margin-bottom: auto; }
.step-card--cta .btn { margin-top: 1.75rem; }
.step-card--cta p:not(.scrawl) { color: var(--text-2); }

.hscroll__progress { width: min(var(--max), calc(100% - 2 * var(--gutter))); height: 2px; margin-inline: auto; background: var(--line); }
.hscroll__progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--maroon), var(--maroon-300)); }

@media (max-width: 899px) {
  .how__head { grid-template-columns: 1fr; }
  .step-card { width: min(80vw, 21rem); min-height: 25rem; }
}

/* ---------- Sides ---------- */
.sides-section { padding-top: clamp(3rem, 7vw, 5.5rem); }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.side {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(1.75rem, 3.2vw, 2.75rem);
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(160deg, #111417 0%, #0a0c0e 100%);
}
.side::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 85% at 0% 0%, rgba(201, 193, 194, 0.13), transparent 62%);
}
.side--hunter { background: linear-gradient(160deg, #2a0b14 0%, #14070b 58%, #0b0709 100%); border-color: rgba(194, 86, 111, 0.3); }
.side--hunter::before { background: radial-gradient(70% 85% at 100% 0%, rgba(194, 86, 111, 0.3), transparent 62%); }
.side__top { display: flex; align-items: center; justify-content: space-between; }
.side__icon { width: 2rem; height: 2rem; color: var(--text-2); stroke-width: 1.5; }
.side--hunter .side__icon { color: var(--maroon-300); }
.side__title {
  margin: clamp(2rem, 5vw, 3.25rem) 0 0.75rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.2rem, 6.5vw, 5rem); line-height: 0.85;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.side--hunter .side__title { background: var(--silver-maroon); -webkit-background-clip: text; background-clip: text; }
.side__goal { margin: 0; max-width: 26rem; font-size: 1.15rem; color: var(--text); }
.side__list { display: grid; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.side__list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-top: 1px solid var(--line); color: var(--text-2); }
.side__list .icon { color: var(--text-3); }
.side--hunter .side__list li { border-color: rgba(194, 86, 111, 0.18); }
.side--hunter .side__list .icon { color: var(--maroon-300); }
.side__foot {
  margin: auto 0 0; padding-top: 1.75rem;
  font: 500 0.74rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 679px) {
  .sides { grid-template-columns: 1fr; }
}

/* ---------- Game modes: hover-reveal list on a maroon panel ---------- */
.modes-section { padding-block: clamp(2rem, 5vw, 4rem); }
.modes {
  position: relative; isolation: isolate; overflow: hidden;
  width: calc(100% - 2 * var(--gutter)); max-width: var(--max); margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 5vw, 5rem);
  border-radius: 28px; text-align: center; color: #fff;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(214, 90, 120, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, #7a2236 0%, #4a1422 100%);
}
.modes::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.08; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.modes__head { display: grid; justify-items: center; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.modes__title { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 4.5vw, 3.75rem); line-height: 0.95; color: #f3eded; }
.modes__scrawl { color: #f6c9d3; transform-origin: center; }
.modes__list { margin: 0; padding: 0; list-style: none; }
.mode { position: relative; padding: 0.04em 0; border-radius: 6px; cursor: default; outline-offset: 4px; }
.mode__name {
  display: inline-block; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.5rem, 10.5vw, 9.5rem); line-height: 0.9; letter-spacing: 0.005em; color: #f3eded;
  transition: color 0.3s, opacity 0.3s, transform 0.5s var(--ease-out);
}
.modes.is-hovering .mode:not(.is-active) .mode__name { opacity: 0.25; }
.mode.is-active .mode__name { color: transparent; -webkit-text-stroke: 2px #f3eded; transform: scale(1.03); }
.mode__tag, .mode__desc {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.modes__card {
  position: absolute; left: 0; top: 0; z-index: 5; width: 17rem; padding: 1rem 1.1rem 1.1rem;
  text-align: left; color: #1a0a0f; background: #f3eded; border-radius: 12px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.75);
  pointer-events: none; opacity: 0; transition: opacity 0.2s;
  will-change: transform, opacity;
}
.modes__card.is-visible { opacity: 1; }
.modes__card-tag {
  display: inline-block; margin-bottom: 0.6rem; padding: 0.35rem 0.5rem 0.32rem; border-radius: 2px;
  font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--maroon); color: #fff;
}
.modes__card p { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.45; }
.modes__mark {
  position: absolute; z-index: -1; right: -2.5rem; bottom: -4rem; width: clamp(9rem, 18vw, 15rem); height: auto;
  opacity: 0.12; transform: rotate(-14deg); pointer-events: none; filter: grayscale(1) brightness(1.6);
}

.hint-tap { display: none; }

/* Touch screens: no hover, so tap a mode to reveal its details */
@media (hover: none), (max-width: 719px) {
  .modes__card, .hint-hover { display: none; }
  .hint-tap { display: inline; }
  .mode { padding: 0.8rem 2.5rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.16); cursor: pointer; }
  .mode:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
  .mode__name { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .modes.is-hovering .mode:not(.is-active) .mode__name { opacity: 0.45; }
  /* + / × toggle */
  .mode::after {
    content: ""; position: absolute; right: 0.15rem; top: calc(0.8rem + clamp(2.75rem, 13vw, 4.5rem) * 0.45 - 15px);
    width: 30px; height: 30px; border-radius: 50%;
    background:
      linear-gradient(#f3eded, #f3eded) center / 12px 2px no-repeat,
      linear-gradient(#f3eded, #f3eded) center / 2px 12px no-repeat,
      rgba(255, 255, 255, 0.14);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s;
  }
  .mode.is-open::after { transform: rotate(135deg); }
  /* Collapsible details (0fr → 1fr animates the height) */
  .mode__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease-out); }
  .mode__more > div { min-height: 0; overflow: hidden; }
  .mode.is-open .mode__more { grid-template-rows: 1fr; }
  .mode__tag, .mode__desc { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .mode__tag {
    display: table; margin: 0.6rem auto 0; padding: 0.32rem 0.5rem 0.3rem; border-radius: 2px;
    font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    background: #f3eded; color: #2a0b14;
  }
  .mode__desc {
    max-width: 28rem; margin: 0.6rem auto 0.25rem; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9);
    opacity: 0; transform: translateY(-4px); transition: opacity 0.3s, transform 0.4s var(--ease-out);
  }
  .mode.is-open .mode__desc { opacity: 1; transform: none; }
}

/* ---------- Rules ---------- */
.rules__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.rule {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num icon" "title title" "text text";
  row-gap: 0.55rem; padding: 1.5rem 1.5rem 1.65rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color 0.25s, transform 0.35s var(--ease-out);
}
@media (hover: hover) { .rule:hover { border-color: rgba(194, 86, 111, 0.45); transform: translateY(-3px); } }
.rule__num { grid-area: num; align-self: center; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.14em; color: var(--maroon-300); }
.rule__icon { grid-area: icon; width: 1.5rem; height: 1.5rem; color: var(--text-3); transition: color 0.25s; }
@media (hover: hover) { .rule:hover .rule__icon { color: var(--maroon-300); } }
.rule h3 {
  grid-area: title; margin: 1.6rem 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.65rem; line-height: 1; letter-spacing: 0.01em;
}
.rule p { grid-area: text; margin: 0; font-size: 0.97rem; line-height: 1.55; color: var(--text-2); }

.safety {
  display: flex; align-items: flex-start; gap: 1.1rem; margin-top: 0.75rem; padding: 1.4rem 1.6rem;
  border: 1px solid rgba(194, 86, 111, 0.32); border-left: 3px solid var(--maroon-400); border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(122, 34, 54, 0.2), rgba(122, 34, 54, 0.04));
}
.safety__icon { width: 1.75rem; height: 1.75rem; color: var(--maroon-300); }
.safety__title { margin: 0 0 0.3rem; font-size: 1.06rem; font-weight: 600; }
.safety p { margin: 0; max-width: 60rem; color: var(--text-2); }

@media (max-width: 999px) {
  .rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .rules__list { grid-template-columns: 1fr; }
}

/* ---------- Events: timetable rows ---------- */
.events { background: var(--bg-2); border-top: 1px solid var(--line); }
.events::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 60%; pointer-events: none;
  background: radial-gradient(50% 70% at 85% 0%, rgba(21, 40, 45, 0.45), transparent 70%);
}
.events .container { position: relative; }
.events__list { border-top: 1px solid var(--line-strong); }
.event {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 9rem minmax(0, 1fr) 12.5rem auto; align-items: center; gap: 1.25rem 2rem;
  padding: clamp(1.4rem, 2.5vw, 2rem) 0; border-bottom: 1px solid var(--line-strong);
}
.event::before {
  content: ""; position: absolute; inset: 0 -1.25rem; z-index: -1; border-radius: 6px;
  background: linear-gradient(90deg, rgba(122, 34, 54, 0.4), rgba(122, 34, 54, 0.06));
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.45s var(--ease-out);
}
.event:focus-within::before { transform: scaleY(1); }
@media (hover: hover) { .event:hover::before { transform: scaleY(1); } }
.event__date { display: flex; align-items: center; gap: 0.75rem; }
.event__day { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.25rem, 5vw, 4.5rem); line-height: 0.8; font-variant-numeric: tabular-nums; }
.event__md { display: grid; gap: 0.3rem; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.event__month { color: var(--maroon-300); }
.event__dow { color: var(--text-3); }
.event.is-next .event__day { color: var(--maroon-300); }
.event__tag {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0;
  font: 500 0.72rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.event__title {
  margin: 0.45rem 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 0.95; letter-spacing: 0.01em;
  transition: transform 0.45s var(--ease-out);
}
@media (hover: hover) { .event:hover .event__title { transform: translateX(0.5rem); } }
.event__desc { margin: 0.5rem 0 0; max-width: 36rem; font-size: 0.98rem; color: var(--text-2); }
.event__meta { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font: 500 0.8rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--text); }
.event__meta li { display: flex; align-items: center; gap: 0.55rem; }
.event__meta .icon { color: var(--text-3); }
.event__actions { display: flex; gap: 0.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.55rem;
  font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: 2px; background: var(--maroon); color: #fff;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.8s ease-in-out infinite; }
.badge--muted { background: rgba(236, 231, 231, 0.1); color: var(--text-2); }
.badge--muted::before { display: none; }
@keyframes pulse { 50% { opacity: 0.3; } }
.event.is-past { opacity: 0.5; }
.event.is-past .event__actions { display: none; }
.event.is-past .event__day, .event.is-past .event__month { color: var(--text-3); }
.events__empty { margin-top: 1.5rem; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-2); text-align: center; }

@media (max-width: 999px) {
  .event { grid-template-columns: 7rem minmax(0, 1fr); align-items: start; }
  .event__meta, .event__actions { grid-column: 2; }
  .event__meta { grid-auto-flow: column; justify-content: start; gap: 0.5rem 1.5rem; }
}
@media (max-width: 559px) {
  .event { grid-template-columns: 1fr; gap: 0.9rem; }
  .event__meta, .event__actions { grid-column: 1; }
  .event__meta { grid-auto-flow: row; }
  .event__actions .btn--primary { flex: 1; }
  .event::before { inset: 0 -0.75rem; }
}

/* ---------- Gallery ---------- */
.gallery__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(9.5rem, 15vw, 13.5rem);
  grid-auto-flow: dense; gap: 0.75rem;
}
.shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: #0a0c0e; border: 1px solid var(--line); }
.shot--hero { grid-column: span 2; grid-row: span 2; }
.shot--tall { grid-row: span 2; }
.shot--wide { grid-column: span 2; }
a.shot { cursor: zoom-in; }
a.shot img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.9); transition: transform 0.7s var(--ease-out), filter 0.4s; }
@media (hover: hover) { a.shot:hover img { transform: scale(1.04); filter: none; } }
.shot__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem;
  font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  background: rgba(4, 5, 6, 0.9); border-top: 1px solid var(--line);
  transition: background-color 0.25s;
}
.shot__bar .icon { transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { a.shot:hover .shot__bar { background: var(--maroon); } }
@media (hover: hover) { a.shot:hover .shot__bar .icon { transform: translate(2px, -2px); } }
.shot--empty {
  --c: rgba(236, 231, 231, 0.28);
  background:
    linear-gradient(var(--c), var(--c)) 14px 14px / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 14px 14px / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 14px) 14px / 16px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 14px) 14px / 1px 16px no-repeat,
    radial-gradient(circle at var(--x, 35%) var(--y, 30%), rgba(21, 40, 45, 0.75), rgba(21, 40, 45, 0) 58%),
    #07090a;
}
.shot--empty:nth-child(2) { --x: 70%; --y: 25%; }
.shot--empty:nth-child(3) { --x: 40%; --y: 60%; }
.shot--empty:nth-child(4) { --x: 20%; --y: 50%; }
.shot--empty:nth-child(5) { --x: 80%; --y: 40%; }
.shot--empty:nth-child(6) { --x: 55%; --y: 20%; }
.shot__hint {
  position: absolute; left: 50%; top: calc(50% - 1.25rem); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.88rem; color: var(--text-3);
}
.shot--empty .shot__bar { color: var(--text-3); }
.gallery__more { display: flex; justify-content: center; margin-top: 2.25rem; }

@media (max-width: 767px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9.5rem; gap: 0.5rem; }
  .shot__bar { padding: 0.6rem 0.75rem; font-size: 0.7rem; }
  .shot__hint { font-size: 0.8rem; }
}

/* ---------- FAQ ---------- */
:root { interpolate-size: allow-keywords; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
.faq__scrawl { margin-top: 2.25rem; font-size: 1.5rem; }
.faq__list { display: grid; gap: 0.6rem; }
.qa {
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color 0.25s, background-color 0.25s;
}
@media (hover: hover) { .qa:hover { border-color: var(--line-strong); } }
.qa[open] { border-color: rgba(194, 86, 111, 0.45); background: linear-gradient(180deg, rgba(122, 34, 54, 0.2), var(--surface) 80%); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px; padding: 1rem 1.25rem 1rem 1.4rem; cursor: pointer; list-style: none;
  font-size: 1.12rem; font-weight: 600; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: -3px; border-radius: 14px; }
.qa__icon {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(236, 231, 231, 0.08);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s;
}
.qa__icon::before, .qa__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  background: var(--text); border-radius: 2px;
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(135deg); background: var(--maroon); }
.qa p { margin: 0; padding: 0 1.4rem 1.35rem; max-width: 42rem; color: var(--text-2); }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete; }
.qa[open]::details-content { block-size: auto; }

@media (max-width: 899px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
  .faq__scrawl { display: none; }
}

/* ---------- Join ---------- */
.join { position: relative; padding-bottom: clamp(4rem, 8vw, 6rem); }
.join > .ticker { margin-bottom: clamp(3rem, 6vw, 5rem); }
.join__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 2.5rem 4rem;
  padding: clamp(2.25rem, 6vw, 5rem); border-radius: 24px;
  border: 1px solid rgba(194, 86, 111, 0.26);
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(122, 34, 54, 0.55), transparent 60%),
    linear-gradient(135deg, #13070c 0%, #070809 62%);
}
.join__title {
  margin: 1.25rem 0 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3.25rem, 8vw, 7.5rem); line-height: 0.85;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.join__title span { display: block; background: var(--silver-maroon); -webkit-background-clip: text; background-clip: text; }
.join__actions { position: relative; display: grid; }
.join__actions .btn--split { margin-bottom: 1rem; }
.join__actions .btn--split .btn__label { flex: 1; }
.join__link {
  display: flex; align-items: center; gap: 0.7rem; min-height: 54px; padding: 0 0.25rem;
  border-bottom: 1px solid var(--line); color: var(--text-2); font-weight: 500;
  transition: color 0.2s, padding-left 0.35s var(--ease-out);
}
.join__link .icon:last-child { margin-left: auto; transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { .join__link:hover { color: var(--text); padding-left: 0.6rem; } }
@media (hover: hover) { .join__link:hover .icon:last-child { transform: translate(2px, -2px); color: var(--maroon-300); } }
.join__logo {
  position: absolute; z-index: -1; left: 52%; top: 50%; width: clamp(14rem, 24vw, 21rem); height: auto;
  transform: translate(-50%, -50%) rotate(-10deg); opacity: 0.07; pointer-events: none;
}


/* Registration widget: next game, countdown, spots left, Register ("nextEvent" in data/config.json) */
.game-card {
  position: relative; display: grid; gap: 1rem;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  background: rgba(10, 12, 14, 0.94); border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.95);
}
.game-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.game-card__phase { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; font: 500 0.75rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ok); }
.game-card.is-ended .game-card__phase { color: var(--text-3); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.game-card__title {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 7vw, 2.75rem); line-height: 0.95; letter-spacing: 0.01em;
}
.game-card__facts { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 1.02rem; }
.game-card__facts li { display: flex; align-items: center; gap: 0.65rem; }
.game-card__facts .icon { color: var(--maroon-300); }
.game-card__note { margin: -0.25rem 0 0; font-size: 0.88rem; color: var(--text-3); text-align: center; }
.game-card.is-closed { border-color: rgba(194, 86, 111, 0.55); }
.game-card.is-closed .game-card__note { color: var(--text-2); text-align: left; }

.countdown { display: grid; gap: 0.45rem; }
.countdown__label { margin: 0; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.countdown__unit {
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.55rem 0.25rem 0.5rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.countdown__unit b { font-family: var(--font-display); font-weight: 900; font-size: 1.85rem; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__unit small { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* The two sign-up sheets in the widget: runner (main choice) and hunter */
.sheets { display: grid; gap: 0.55rem; }
.sheets__label { margin: 0; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.sheets__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.sheet {
  position: relative; display: grid; align-content: start; gap: 0.45rem; min-height: 104px; padding: 0.95rem 0.95rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface-2); color: var(--text);
  transition: border-color 0.2s, background-color 0.2s, transform 0.35s var(--spring);
}
.sheet--runner { background: var(--maroon); border-color: var(--maroon-400); color: #fff; box-shadow: 0 12px 30px -14px rgba(122, 34, 54, 0.9); }
.sheet__name { font-family: var(--font-display); font-weight: 900; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.sheet__spots { font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.sheet--runner .sheet__spots { color: rgba(255, 255, 255, 0.86); }
.sheet__spots:empty { display: none; }
.sheet__bar { height: 4px; border-radius: 999px; background: rgba(236, 231, 231, 0.14); overflow: hidden; }
.sheet__bar span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: var(--maroon-300); transition: transform 0.8s var(--ease-out); }
.sheet--runner .sheet__bar span { background: #fff; }
.sheet__go { position: absolute; top: 0.95rem; right: 0.9rem; width: 1.1rem; height: 1.1rem; transition: transform 0.3s var(--ease-out); }
.sheet[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.sheet[aria-disabled="true"] .sheet__go { display: none; }
@media (hover: hover) {
  .sheet:not([aria-disabled="true"]):hover { transform: translateY(-3px); border-color: var(--maroon-300); }
  .sheet--runner:hover { background: var(--maroon-600); }
  .sheet:not([aria-disabled="true"]):hover .sheet__go { transform: translateX(3px); }
}
@media (hover: none) { .sheet:not([aria-disabled="true"]):active { transform: scale(0.98); } }
.join__actions .game-card { margin-bottom: 1rem; scroll-margin-top: 1.75rem; }

@media (max-width: 899px) {
  .join__panel { grid-template-columns: minmax(0, 1fr); }
  .join__logo { left: auto; right: -4rem; top: 2rem; transform: rotate(-10deg); width: 14rem; }
}

/* Floating join button — phones only, after the intro */
.float-cta {
  position: fixed; z-index: 40; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  translate: -50% 0; transform: translateY(170%);
  transition: transform 0.5s var(--ease-out);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.7));
}
.float-cta.is-visible { transform: none; }
@media (min-width: 900px) {
  .float-cta { display: none; }
}

/* ---------- Footer ---------- */
.site-footer { padding: clamp(3.5rem, 7vw, 5.5rem) 0 1.5rem; border-top: 1px solid var(--line); overflow: hidden; }
.site-footer .container { container-type: inline-size; }
.site-footer__cols { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.site-footer__about img { width: auto; height: 56px; margin-bottom: 1.25rem; }
.site-footer__about p { margin: 0; max-width: 22rem; color: var(--text-3); }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__col .tag { margin-bottom: 0.75rem; }
.site-footer__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); transition: color 0.2s; }
.site-footer__col a:hover { color: var(--text); }
.site-footer__wordmark {
  margin: clamp(3rem, 7vw, 5rem) 0 0; white-space: nowrap; text-align: center; user-select: none;
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 0.78; letter-spacing: 0;
  font-size: 14vw; font-size: 17.4cqi;
  background: linear-gradient(180deg, rgba(236, 231, 231, 0.92) 0%, rgba(236, 231, 231, 0.06) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--text-2); }
.site-footer__legal a:hover { color: var(--text); }

@media (max-width: 899px) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 519px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Reduced motion for body pieces ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .step-card, .step-card:hover { transform: none; }
  .js .manifesto__text .w { color: inherit; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--text);
}
.lightbox::backdrop { background: rgba(4, 5, 6, 0.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { display: grid; justify-items: center; gap: 1rem; margin: 0; padding: 4.5rem 1rem 2rem; }
.lightbox__figure img { max-width: min(92vw, 1400px); max-height: 80vh; max-height: 80dvh; object-fit: contain; border-radius: var(--radius); }
.lightbox__figure figcaption { color: var(--text-2); font-size: 0.95rem; text-align: center; }
.lightbox__btn {
  position: fixed; display: grid; place-items: center; width: 48px; height: 48px;
  background: rgba(236, 231, 231, 0.08); border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; transition: background-color 0.2s;
}
.lightbox__btn:hover { background: rgba(236, 231, 231, 0.16); }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .event.is-past[data-reveal].is-in { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .badge::before, .live-dot { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   MOBILE — phones are the main way people reach this site
   ========================================================================== */

/* Taps get their own feedback (hover effects are mouse-only) */
a, button, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn:active { filter: brightness(1.18); }
  .btn--split:active .btn__icon { transform: translateX(4px) scale(1.06); }
  .step-card:active { transform: rotate(0deg) scale(0.985); }
  .event:active::before { transform: scaleY(1); }
  .rule:active { border-color: rgba(194, 86, 111, 0.45); }
  .qa summary:active { background: rgba(236, 231, 231, 0.04); }
  .join__link:active { color: var(--text); }
  a.shot:active .shot__bar { background: var(--maroon); }
}

@media (max-width: 719px) {
  :root { --header-h: 64px; }
  .brand__mark { height: 34px; }
  .brand__name { font-size: 1.25rem; }
  /* Opaque header without blur: cheaper to composite while scrolling */
  .site-header { background: rgba(6, 7, 9, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mobile-menu { overflow-y: auto; }

  .scene { height: 300vh; }

  .section { padding-block: 3.75rem; }
  .section-head { margin-bottom: 2rem; }
  .ticker-band { padding-top: 2rem; }

  .manifesto__text { font-size: clamp(1.6rem, 7.4vw, 2.1rem); line-height: 1.15; }

  /* Stats: compact 2 × 2, number on top */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 2.5rem; }
  .stat { grid-template-columns: 1fr; row-gap: 0.2rem; padding: 1.15rem 1rem 1.2rem; }
  .stat__num { grid-row: auto; margin-bottom: 0.3rem; font-size: 3.1rem; }
  .stat__label { align-self: start; }
  .stat__sub { margin-top: 0; font-size: 0.86rem; }

  /* Steps: swipe, snapping each card to the left edge */
  .hscroll__viewport { scroll-padding-inline: var(--gutter); }
  .step-card { scroll-snap-align: start; min-height: 23rem; }

  /* Small labels: never below ~11px on phones */
  .badge, .mode__tag, .shot__bar, .event__md, .site-footer__legal { font-size: 0.72rem; }

  .modes { border-radius: 20px; }
  .join__panel { padding: 2.25rem 1.25rem; border-radius: 18px; }
  .game-card { gap: 0.85rem; }
  .countdown__unit b { font-size: 1.5rem; }
  .join__title { font-size: clamp(3rem, 15vw, 4.25rem); }
  .site-footer__legal { padding-bottom: env(safe-area-inset-bottom); }
}

/* Data Saver on: skip the 1 MB frame sequence and show a still hero instead */
html.static-scene .scene { height: auto; }
html.static-scene .scene__stage {
  position: relative; top: 0; height: auto;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  background-image: url("../assets/frames/001.webp");
}
html.static-scene .scene__canvas, html.static-scene .beat,
html.static-scene .scene__progress, html.static-scene .scene__skip { display: none; }

/* Narrow phones: keep the hero eyebrow on one line; slimmer floating button */
@media (max-width: 719px) {
  .float-cta { min-height: 48px; }
  .float-cta .btn__label { padding-inline: 1.25rem; font-size: 0.82rem; }
  .float-cta .btn__icon { width: 48px; }
}
@media (max-width: 400px) {
  .scene__intro .eyebrow { gap: 0.45rem; font-size: 0.72rem; letter-spacing: 0.16em; }
}

/* Long split-button labels wrap instead of pushing their container wider */
.btn--split { max-width: 100%; }
@media (max-width: 719px) {
  .btn--split .btn__label { white-space: normal; line-height: 1.25; padding-block: 0.75rem; }
}
.float-cta .btn__label { white-space: nowrap; }
@media (max-width: 719px) {
  .rules__list { gap: 0.5rem; }
  .rule { padding: 1.1rem 1.15rem 1.2rem; row-gap: 0.4rem; }
  .rule h3 { margin-top: 0.7rem; font-size: 1.5rem; }
}
.event__day--tba { color: var(--text-3); }

/* ==========================================================================
   APP PAGES — register, confirmed, feedback, exec
   ========================================================================== */
.page__main { padding-top: calc(var(--header-h) + 0px); padding-bottom: calc(4rem + env(safe-area-inset-bottom)); min-height: 100svh; }
.page__main > .container { padding-top: 1.5rem; }
.page-title {
  margin: 0.6rem 0 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.6rem, 11vw, 4rem); line-height: 0.92; letter-spacing: 0.005em;
  background: var(--silver); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-block: 0.04em; text-wrap: balance;
}
.page-lede { margin: 0.75rem 0 0; color: var(--text-2); font-size: 1.05rem; line-height: 1.55; }
.page-lede strong { color: var(--text); }
.notice {
  margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid rgba(194, 86, 111, 0.45); border-left: 3px solid var(--maroon-400);
  border-radius: 10px; background: rgba(122, 34, 54, 0.16);
}
.notice a, .field__error a, .store-other a, .share-fallback a { color: var(--maroon-300); text-decoration: underline; text-underline-offset: 3px; }
.notice-block { display: grid; gap: 0.75rem; padding-top: 0.5rem; }
.notice-block .btn { margin-top: 0.75rem; }
.fatal { margin: 2rem 0; padding: 1rem; border: 1px solid rgba(255, 154, 172, 0.4); border-radius: 10px; color: var(--error); }

/* Event summary strip (register page) */
.event-strip {
  display: grid; gap: 0.3rem; margin-bottom: 1.5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: linear-gradient(135deg, rgba(122, 34, 54, 0.28), var(--surface) 70%);
}
.event-strip__title { margin: 0.5rem 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; }
.event-strip__meta { margin: 0; font-size: 0.97rem; color: var(--text-2); }
.event-strip__spots { margin: 0.15rem 0 0; font: 500 0.78rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--maroon-300); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field > label, .field > legend, .waiver-block > legend, .form-group > legend { font-weight: 600; font-size: 1rem; color: var(--text); }
.field > legend { margin-bottom: 0.6rem; padding: 0; }
.field__optional { margin-left: 0.4rem; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field input[type="search"], .field textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 1rem;
  font: 400 1rem/1.4 var(--font-body); /* 16px+ stops iOS zooming into the field */
  color: var(--text); background: #0b0d10; border: 1px solid var(--line-strong); border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--maroon-300); box-shadow: 0 0 0 3px rgba(219, 132, 151, 0.28); }
.field [aria-invalid="true"] { border-color: var(--error) !important; }
.field__hint { margin: 0; font-size: 0.9rem; color: var(--text-3); }
.field__error { margin: 0; font-size: 0.92rem; font-weight: 500; color: var(--error); }
.field__error:empty, .form__error:empty { display: none; }
.form__error { margin: 0; padding: 0.8rem 1rem; border-radius: 10px; background: rgba(255, 154, 172, 0.1); color: var(--error); }

/* Checkbox */
.field--check { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.8rem; }
.field--check label { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.field--check .field__error { grid-column: 1 / -1; }
.field--check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; width: 28px; height: 28px; flex: none; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 7px; background: #0b0d10;
  transition: background-color 0.2s, border-color 0.2s;
}
.field--check input[type="checkbox"]:checked {
  background: var(--maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  border-color: var(--maroon-300);
}
.field--check input[aria-invalid="true"] { border-color: var(--error); }

/* Waiver */
/* Boxed groups of fields: emergency contact, waiver */
.waiver-block, .form-group { display: grid; gap: 1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.waiver-block > legend, .form-group > legend { padding: 0 0.4rem; margin-left: -0.4rem; }
.form-group > .field__hint { margin-top: -0.6rem; }
.waiver {
  max-height: 13rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.9rem 1rem;
  background: #07090b; border: 1px solid var(--line); border-radius: 10px;
  font-size: 0.93rem; line-height: 1.55; color: var(--text-2);
}
.waiver p { margin: 0 0 0.75rem; }
.waiver p:last-child { margin-bottom: 0; }
.field input.input--signature { font-family: var(--font-marker); font-size: 1.35rem; letter-spacing: 0.02em; }
.signed-at { margin: 0; font: 500 0.75rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.signed-at output { color: var(--text-2); }

/* Rating + yes/no tiles (radio inputs stay focusable for keyboards) */
.rating__options, .yesno__options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.yesno__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rating__options input, .yesno__options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__options label, .yesno__options label {
  display: grid; place-items: center; align-content: center; gap: 0.2rem; min-height: 64px; padding: 0.4rem;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); cursor: pointer;
  font-weight: 600; transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--spring);
}
.rating__options label b { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; line-height: 1; }
.rating__options label small { font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.rating__options input:checked + label, .yesno__options input:checked + label { background: var(--maroon); border-color: var(--maroon-300); color: #fff; transform: scale(1.03); }
.rating__options input:checked + label small { color: rgba(255, 255, 255, 0.85); }
.rating__options input:focus-visible + label, .yesno__options input:focus-visible + label { outline: 2px solid var(--maroon-300); outline-offset: 2px; }

/* Toast */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom));
  max-width: calc(100% - 2rem); padding: 0.85rem 1.15rem; border-radius: 10px;
  background: #f3eded; color: #16090d; font-weight: 600; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  translate: -50% 0; transform: translateY(160%); opacity: 0; transition: transform 0.35s var(--ease-out), opacity 0.35s;
}
.toast.is-visible { transform: none; opacity: 1; }

/* ---------- Confirmation / onboarding ---------- */
.confirm-hero { display: grid; gap: 0.25rem; margin-bottom: 1.5rem; }
.confirm-hero__badge { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(95, 211, 154, 0.14); color: var(--ok); }
.confirm-hero__badge .icon { width: 30px; height: 30px; }
.gate .confirm-hero__badge { background: rgba(236, 231, 231, 0.08); color: var(--text-2); }

.checklist { display: grid; gap: 0.6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.check { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0.9rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.check__mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-2);
}
.check.is-done .check__mark { background: rgba(95, 211, 154, 0.14); border-color: rgba(95, 211, 154, 0.45); color: var(--ok); }
.check__title { margin: 0.35rem 0 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.55rem; line-height: 1; }
.check__text { margin: 0.45rem 0 0; font-size: 0.98rem; color: var(--text-2); }
.check__text strong { color: var(--text); }
.check__text--muted { color: var(--text-3); font-size: 0.93rem; }
.store-buttons { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.store-buttons .btn { white-space: normal; }
.store-other { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--text-3); }

.meetup { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.map { position: relative; z-index: 0; height: 260px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: #0b0d10; }
.map__fallback { display: grid; place-items: center; height: 100%; margin: 0; padding: 1rem; text-align: center; color: var(--text-3); }
.map .leaflet-container { background: #0b0d10; font-family: var(--font-body); }
.map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(0.92) saturate(0.6); } /* dark map to match the site */
.map .leaflet-popup-content-wrapper, .map .leaflet-popup-tip { background: #f3eded; color: #16090d; }
.map .leaflet-popup-content { margin: 0.7rem 0.9rem; font-size: 0.95rem; line-height: 1.35; }
.map .leaflet-control-attribution { background: rgba(4, 5, 6, 0.75); color: var(--text-3); }
.map .leaflet-control-attribution a { color: var(--text-2); }
.map .leaflet-bar a { background: #14181c; color: var(--text); border-color: var(--line-strong); }
.map .map-label {
  padding: 0.35rem 0.6rem; border: 0; border-radius: 6px; background: #f3eded; color: #16090d;
  font: 600 0.85rem/1.2 var(--font-body); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.map .map-label::before { border-top-color: #f3eded; }
.map-pin span {
  display: block; width: 28px; height: 28px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--maroon-400); border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}
.meetup__photo { margin: 0.4rem 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.meetup__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.meetup__photo figcaption { padding: 0.65rem 0.9rem; font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

.kit__heading { margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; line-height: 1; }
.kit__grid { display: grid; gap: 0.5rem; margin: 0; }
.kit__row { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.kit__row dt { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; font: 500 0.75rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.kit__row dt .icon { color: var(--maroon-300); }
.kit__row dd { margin: 0; color: var(--text); }
.kit__row dd ul { margin: 0; padding-left: 1.15rem; }
.kit__row dd li + li { margin-top: 0.15rem; }
.confirm-actions { display: grid; gap: 0.6rem; margin-top: 1.75rem; }
.share-fallback { display: grid; gap: 0.4rem; }
.share-fallback label { font-size: 0.92rem; color: var(--text-2); }
.share-fallback input { min-height: 48px; padding: 0.6rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 10px; background: #0b0d10; font: 400 1rem var(--font-body); }

@media (min-width: 640px) {
  .store-buttons--both { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map { height: 320px; }
}

/* ---------- Exec dashboard ---------- */
.page--exec .container--narrow { padding-top: 2rem; }
.gate { display: grid; gap: 0.5rem; }
.dash { padding-top: 1.5rem; }
.dash__head { margin-bottom: 1.25rem; }
.dash__warning {
  display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0 0; padding: 0.75rem 0.9rem;
  border: 1px solid rgba(240, 180, 90, 0.4); border-radius: 10px; background: rgba(240, 180, 90, 0.1);
  font-size: 0.92rem; line-height: 1.45; color: #f6dcb4;
}
.dash__warning .icon { margin-top: 0.1rem; color: var(--warn); }
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.count { display: grid; gap: 0.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.count__num { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.count__label { font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.dash__section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.dash__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.dash__title { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.dash__sub { margin: 0; font: 500 0.78rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.dash__tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash__filters { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: center; gap: 0.6rem 1rem; margin-bottom: 1rem; }
.dash__danger p { max-width: 44rem; color: var(--text-2); }
.field--search { position: relative; }
.field--search .icon { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.field--search input { padding-left: 2.6rem !important; }
.segmented { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.segmented button {
  min-height: 44px; padding: 0 0.95rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--text-2); font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #120a0c; }

.roster-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.roster { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.roster th { position: sticky; top: 0; padding: 0.8rem 1rem; text-align: left; white-space: nowrap; font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.roster td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.roster tr:last-child td { border-bottom: 0; }
.roster td small { display: block; margin-top: 0.15rem; font-size: 0.84rem; color: var(--text-3); }
.roster td a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.roster tr.is-in td { background: rgba(95, 211, 154, 0.05); }
.roster__empty { margin: 0; padding: 1.25rem; text-align: center; color: var(--text-3); }
.waiver-ok { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--ok); }
.pill { display: inline-block; padding: 0.32rem 0.6rem; border-radius: 999px; white-space: nowrap; font: 500 0.72rem/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.pill--ok { background: rgba(236, 231, 231, 0.1); color: var(--text); }
.pill--wait { background: rgba(240, 180, 90, 0.16); color: #f4c987; }
.pill--hunter { background: var(--maroon); color: #fff; }
.pill--bad { background: rgba(255, 154, 172, 0.15); color: var(--error); }

.switch { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.25rem; border: 0; background: none; color: var(--text-2); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.switch__track { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-strong); transition: background-color 0.2s, border-color 0.2s; }
.switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: transform 0.3s var(--spring), background-color 0.2s; }
.switch[aria-checked="true"] { color: var(--ok); }
.switch[aria-checked="true"] .switch__track { background: #2b7f55; border-color: var(--ok); }
.switch[aria-checked="true"] .switch__thumb { transform: translateX(20px); background: #fff; }
.switch__text { min-width: 2em; }

.fb-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 2fr); gap: 0.5rem; }
.fb-big { display: grid; align-content: center; gap: 0.35rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fb-big__num { font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; line-height: 1; }
.fb-big__label { display: flex; align-items: center; gap: 0.4rem; font: 500 0.74rem/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.fb-big__label .icon { color: var(--maroon-300); }
.fb-dist { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.fb-dist__row { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.6rem; font: 500 0.82rem/1 var(--font-mono); color: var(--text-2); }
.fb-dist__bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.fb-dist__bar span { display: block; height: 100%; transform-origin: left; background: var(--maroon-400); }
.fb-comments { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fb-comment { padding: 0.9rem 1rem; border-left: 3px solid var(--maroon-400); border-radius: 0 10px 10px 0; background: var(--surface); }
.fb-comment p { margin: 0; }
.fb-comment small { display: block; margin-top: 0.35rem; font: 500 0.75rem/1.3 var(--font-mono); letter-spacing: 0.04em; color: var(--text-3); }
.fb-comment__rating { color: var(--maroon-300); }

@media (max-width: 719px) {
  /* Exec: counts 2 × 2, roster rows become cards */
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count__num { font-size: 2rem; }
  .dash__filters { grid-template-columns: minmax(0, 1fr); }
  .segmented { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .segmented button { flex: none; }
  .roster-wrap { overflow: visible; border: 0; }
  .roster thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .roster, .roster tbody, .roster tr, .roster td { display: block; width: 100%; }
  .roster tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name check" "email email" "waiver status";
    gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; padding: 0.9rem 1rem;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  }
  .roster tr.is-in { border-color: rgba(95, 211, 154, 0.4); }
  .roster tr.is-in td { background: none; }
  .roster td { width: auto; padding: 0; border: 0; }
  .roster td[data-label="Name"] { grid-area: name; }
  .roster td[data-label="Email"] { grid-area: email; font-size: 0.92rem; overflow-wrap: anywhere; }
  .roster td[data-label="Waiver"] { grid-area: waiver; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem; }
  .roster td[data-label="Waiver"] small { margin: 0; }
  .roster td[data-label="Status"] { grid-area: status; align-self: center; justify-self: end; }
  .roster td[data-label="Check-in"] { grid-area: check; align-self: start; }
  .fb-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-dist { grid-column: 1 / -1; }
}

/* ---------- Runner / hunter choice: the two sign-up sheets (register page) ---------- */
.role-pick > legend { margin-bottom: 0.6rem; padding: 0; font-weight: 600; font-size: 1rem; color: var(--text); }
.role-options { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.role-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.role-options label {
  display: grid; align-content: start; gap: 0.3rem; min-height: 112px; padding: 0.9rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--spring);
}
.role-options__name { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; line-height: 1; text-transform: uppercase; }
.role-options__desc { font-size: 0.9rem; line-height: 1.35; color: var(--text-2); }
.role-options__spots { padding-top: 0.35rem; font: 500 0.72rem/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--maroon-300); }
.role-options__spots:empty { display: none; }
.role-options input:checked + label { background: var(--maroon); border-color: var(--maroon-300); color: #fff; transform: scale(1.02); }
.role-options input:checked + label .role-options__desc { color: rgba(255, 255, 255, 0.88); }
.role-options input:checked + label .role-options__spots { color: #fff; }
.role-options input:focus-visible + label { outline: 2px solid var(--maroon-300); outline-offset: 2px; }
.role-options input:disabled + label { opacity: 0.5; cursor: not-allowed; }
.role-options input[aria-invalid="true"]:not(:disabled) + label { border-color: var(--error); }

/* ---------- Inline text links (rules, notices) ---------- */
.text-link { color: var(--maroon-300); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .text-link:hover { color: var(--text); } }
.waiver strong { color: var(--text); }

/* ---------- Past games (landing): one card per game, linking to its photos ---------- */
.past-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.75rem; }
.past-grid__empty { margin: 0; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-2); text-align: center; }
.past-card {
  display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  transition: border-color 0.25s, transform 0.45s var(--ease-out);
}
.past-card__photos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; aspect-ratio: 4 / 3; background: #07090a; }
.past-card__photos img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 0.7s var(--ease-out), filter 0.4s; }
.past-card__ph {
  background: radial-gradient(circle at 35% 30%, rgba(21, 40, 45, 0.7), rgba(21, 40, 45, 0) 60%), #07090a;
}
.past-card__none {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.9rem; color: var(--text-3);
  background:
    linear-gradient(rgba(236, 231, 231, 0.28), rgba(236, 231, 231, 0.28)) 14px 14px / 16px 1px no-repeat,
    linear-gradient(rgba(236, 231, 231, 0.28), rgba(236, 231, 231, 0.28)) 14px 14px / 1px 16px no-repeat,
    radial-gradient(circle at 40% 35%, rgba(21, 40, 45, 0.75), rgba(21, 40, 45, 0) 60%), #07090a;
}
.past-card__body { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem 1.25rem; }
.past-card__meta { font: 500 0.74rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--maroon-300); }
.past-card__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 0.95; text-transform: uppercase; }
.past-card__blurb { color: var(--text-2); font-size: 0.98rem; }
.past-card__cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.4rem; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.past-card__cta .icon { transition: transform 0.3s var(--ease-out); }
@media (hover: hover) {
  .past-card:hover { border-color: rgba(194, 86, 111, 0.5); transform: translateY(-4px); }
  .past-card:hover .past-card__photos img { transform: scale(1.04); filter: none; }
  .past-card:hover .past-card__cta .icon { transform: translateX(4px); }
}
@media (hover: none) { .past-card:active { border-color: rgba(194, 86, 111, 0.5); } }

/* ---------- A game's photos (/gallery/) ---------- */
.gallery-page .page-lede { margin-bottom: 1.5rem; }
.photo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.photo-wall__item {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 0; border-radius: var(--radius); background: #07090a;
}
.photo-wall__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
@media (hover: hover) { button.photo-wall__item:hover img { transform: scale(1.05); } }
.photo-wall__status { margin: 1rem 0 0; color: var(--text-2); }
.photo-wall__status:empty { display: none; }
.gallery-page__foot { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
@media (min-width: 900px) { .photo-wall { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; } }

/* ---------- Exec: upload and delete game photos ---------- */
.dash__note { margin: 0 0 1rem; max-width: 44rem; color: var(--text-2); }
.photos-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.photos-tools .field { flex: 1 1 16rem; }
.field select {
  width: 100%; min-height: 48px; padding: 0.6rem 2.4rem 0.6rem 0.9rem; appearance: none; -webkit-appearance: none;
  font: 400 1rem/1.3 var(--font-body); color: var(--text); background: #0b0d10; border: 1px solid var(--line-strong); border-radius: 10px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(-45deg, transparent 50%, var(--text-2) 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%; background-size: 6px 6px; background-repeat: no-repeat;
}
.field select:focus { outline: none; border-color: var(--maroon-300); box-shadow: 0 0 0 3px rgba(219, 132, 151, 0.28); }
.photos-status { margin: 0 0 0.75rem; color: var(--text-2); }
.photos-status:empty { display: none; }
.photo-wall--admin .photo-wall__item { cursor: default; }
.photo-wall__delete {
  position: absolute; top: 0.35rem; right: 0.35rem; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 154, 172, 0.5); border-radius: 50%; background: rgba(4, 5, 6, 0.8); color: var(--error); cursor: pointer;
}
@media (hover: hover) { .photo-wall__delete:hover { background: #5b1626; color: #fff; } }

/* ---------- HUNTR app page ---------- */
.huntr-hero { display: grid; gap: 0.35rem; margin-bottom: 1.5rem; }
.huntr-hero__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 0.5rem; border-radius: 18px; background: var(--maroon); color: #fff; box-shadow: 0 14px 34px -14px rgba(122, 34, 54, 0.9); }
.huntr-hero__icon .icon { width: 32px; height: 32px; }
.huntr-section { margin-top: 2.25rem; }
.huntr-signup { margin-top: 1.5rem; }