/* ============================================================================
   The Arcade is open — launch feature (/news/the-arcade-is-open)
   A neon "opening night" editorial layered over the site's Nightfall theme.
   Everything is scoped to .ax. Per-cabinet accent comes from --ax-hue, set inline.
   ========================================================================== */

.ax {
  --pixel: "Press Start 2P", var(--display);
  --ax-accent: oklch(82% 0.135 var(--ax-hue, 86));
  --ax-accent-deep: oklch(70% 0.145 var(--ax-hue, 86));
  --ax-glow: oklch(72% 0.16 var(--ax-hue, 86) / 0.45);
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 20px) 0 var(--space-3xl);
}

/* ── Buttons ──────────────────────────────────────────────────────────────
   One solid fill (play) and one outline (ghost). No 1px-border + soft-shadow
   ghost cards; each commits to a single treatment. */
.ax-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--label); font-weight: 800; font-size: 14px;
  letter-spacing: 0.02em; line-height: 1; text-decoration: none;
  border-radius: 999px; padding: 13px 22px; cursor: pointer;
  border: 0; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease;
}
.ax-btn--play {
  background: var(--gold); color: oklch(22% 0.04 277);
  box-shadow: 0 8px 22px oklch(70% 0.15 86 / 0.28);
}
.ax-btn--play:hover { background: oklch(88% 0.13 88); transform: translateY(-2px); box-shadow: 0 12px 30px oklch(70% 0.15 86 / 0.4); }
.ax-btn--ghost {
  background: transparent; color: var(--ax-accent);
  border: 1.5px solid color-mix(in oklch, var(--ax-accent) 55%, transparent);
  padding: 11px 18px; font-size: 13px;
}
.ax-btn--ghost:hover {
  background: color-mix(in oklch, var(--ax-accent) 14%, transparent);
  border-color: var(--ax-accent); transform: translateY(-2px);
}
.ax-btn--lg { font-size: 16px; padding: 16px 30px; }
.ax-btn-coin {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, oklch(98% 0.04 90), oklch(64% 0.13 70));
  box-shadow: inset 0 0 0 1.5px oklch(54% 0.10 70 / 0.6);
}
.ax-arrow { transition: transform .2s ease; }
.ax-btn--ghost:hover .ax-arrow { transform: translateX(4px); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ax-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(18px, 4vw, 48px) 0 clamp(28px, 5vw, 60px);
}
.ax-kicker {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 12px; font-weight: 700; color: var(--gold);
}
.ax-kicker span { color: var(--rule); margin: 0 6px; }
.ax-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(46px, 8.5vw, 92px); line-height: 0.96; letter-spacing: -0.03em;
  margin: 14px 0 0; color: var(--ink); text-wrap: balance;
}
.ax-title-glow {
  color: var(--gold);
  text-shadow: 0 0 24px oklch(84% 0.13 86 / 0.55), 0 0 4px oklch(84% 0.13 86 / 0.5);
}
.ax-standfirst {
  font-family: var(--text); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6;
  color: var(--ink-soft); margin: 20px 0 0; max-width: 46ch; text-wrap: pretty;
}
.ax-hero-cta { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; margin-top: 28px; }
.ax-hero-meta { font-family: var(--label); font-size: 13px; color: var(--muted); }
.ax-hero-meta b { color: var(--ink); font-weight: 800; }

/* The fanned stack of three game screens. Decorative; the same shots carry real
   alt text down in the cabinets. */
.ax-hero-stack {
  position: relative; justify-self: center;
  width: min(100%, 440px); aspect-ratio: 5 / 5.4;
}
.ax-hero-glow {
  position: absolute; inset: 6% 10%;
  background: radial-gradient(60% 55% at 50% 42%, oklch(60% 0.15 300 / 0.4), transparent 70%);
  filter: blur(26px); z-index: 0;
}
.ax-hero-card {
  position: absolute; top: 50%; left: 50%; width: 52%;
  border-radius: 20px; padding: 7px;
  background: linear-gradient(160deg, oklch(34% 0.04 280), oklch(20% 0.03 280));
  box-shadow: 0 22px 50px oklch(8% 0.03 280 / 0.6),
              0 0 0 1px oklch(70% 0.05 280 / 0.25) inset,
              0 0 34px var(--ax-glow, transparent);
  will-change: transform;
}
.ax-hero-card img { display: block; width: 100%; height: auto; border-radius: 13px; }
.ax-hero-card--back  { transform: translate(-86%, -54%) rotate(-9deg); z-index: 1; opacity: 0.94; }
.ax-hero-card--mid   { transform: translate(-14%, -46%) rotate(7deg);  z-index: 2; }
.ax-hero-card--front { transform: translate(-50%, -50%) rotate(-2deg); z-index: 3; width: 56%; }

/* ── Editor's note ────────────────────────────────────────────────────────── */
.ax-note {
  max-width: 660px; margin: clamp(8px, 2vw, 24px) auto clamp(36px, 6vw, 72px);
  padding-top: clamp(24px, 4vw, 40px);
  border-top: 1px solid var(--hair);
  font-family: var(--text); color: var(--ink-soft);
  font-size: 18px; line-height: 1.7; text-wrap: pretty;
}
.ax-note p + p { margin-top: 1em; }
.ax-note-lead {
  font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; color: var(--ink);
  margin: 0;
}

/* ── The floor of cabinets ──────────────────────────────────────────────────── */
.ax-floor { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 104px); }

.ax-cab {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.ax-cab:nth-of-type(even) .ax-screen-wrap { grid-column: 2; grid-row: 1; }
.ax-cab:nth-of-type(even) .ax-cab-body     { grid-column: 1; grid-row: 1; }

.ax-screen-wrap { margin: 0; justify-self: center; width: 100%; display: flex; justify-content: center; }

/* The lit cabinet screen: a glossy bezel, an accent neon halo, a soft vignette and
   a single diagonal glare. No repeating scanline stripes. */
.ax-screen {
  position: relative; width: min(322px, 100%);
  border-radius: 20px; padding: 10px;
  background: linear-gradient(158deg, oklch(33% 0.035 280), oklch(18% 0.025 282));
  box-shadow:
    0 26px 60px oklch(7% 0.03 280 / 0.6),
    0 0 0 1px oklch(72% 0.06 280 / 0.28) inset,
    0 0 0 1px color-mix(in oklch, var(--ax-accent) 38%, transparent),
    0 0 44px var(--ax-glow);
}
.ax-cab--wide .ax-screen { width: min(860px, 100%); border-radius: 24px; padding: 12px; }
.ax-screen img { display: block; width: 100%; height: auto; border-radius: 12px; }
.ax-screen-scan,
.ax-screen-glare { position: absolute; inset: 10px; border-radius: 12px; pointer-events: none; }
.ax-screen-scan {
  background: radial-gradient(120% 120% at 50% 35%, transparent 58%, oklch(8% 0.02 280 / 0.45) 100%);
}
.ax-screen-glare {
  background: linear-gradient(128deg, oklch(100% 0 0 / 0.12) 0%, transparent 30%);
  mix-blend-mode: screen;
}

.ax-cab-body { max-width: 48ch; }
.ax-cab-tag {
  font-family: var(--pixel); font-size: 10px; line-height: 1.5; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ax-accent);
  text-shadow: 0 0 14px var(--ax-glow);
}
.ax-cab-name {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink); margin: 12px 0 0; text-wrap: balance;
}
.ax-cab-blurb {
  font-family: var(--text); font-size: 17px; line-height: 1.62; color: var(--ink-soft);
  margin: 14px 0 22px; text-wrap: pretty;
}

/* Steamboat: the one wide "feature" cabinet, centered with a river-tinted stage. */
.ax-cab--wide {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
  gap: clamp(22px, 3vw, 36px);
  padding: clamp(26px, 4vw, 48px) clamp(18px, 3vw, 40px);
  border-radius: 26px;
  background:
    radial-gradient(90% 120% at 50% 0%, oklch(40% 0.05 232 / 0.5), transparent 62%),
    oklch(26% 0.03 270 / 0.5);
  border: 1px solid oklch(60% 0.05 250 / 0.22);
}
/* Override the even-row swap (which has nth-of-type specificity) so the feature
   stacks: big screen on top, copy centered below. */
.ax-cab.ax-cab--wide .ax-screen-wrap { grid-column: 1; grid-row: 1; }
.ax-cab.ax-cab--wide .ax-cab-body { grid-column: 1; grid-row: 2; max-width: 62ch; }
.ax-cab--wide .ax-cab-body { display: flex; flex-direction: column; align-items: center; }
.ax-cab--wide .ax-cab-blurb { margin-inline: auto; }

/* ── What's next + suggestion box ───────────────────────────────────────────── */
.ax-pitch {
  margin: clamp(56px, 9vw, 120px) auto 0; max-width: 940px;
  scroll-margin-top: 90px;
}
.ax-pitch-head { text-align: center; max-width: 64ch; margin: 0 auto clamp(28px, 4vw, 44px); }
.ax-pitch-kicker {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 12px; font-weight: 700; color: var(--red);
}
.ax-pitch-kicker .ax-blink { color: var(--red); animation: ax-blink 1.3s steps(1) infinite; margin-right: 6px; }
.ax-pitch-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--ink); margin: 12px 0 0; text-wrap: balance;
}
.ax-pitch-sub {
  font-family: var(--text); font-size: 18px; line-height: 1.65; color: var(--ink-soft);
  margin: 18px auto 0; max-width: 60ch; text-wrap: pretty;
}

.ax-form-card {
  background: linear-gradient(180deg, oklch(30% 0.045 278 / 0.85), oklch(26% 0.04 278 / 0.7));
  border: 1px solid oklch(58% 0.05 282 / 0.32);
  border-radius: 20px;
  padding: clamp(22px, 3.5vw, 38px);
  box-shadow: 0 24px 60px oklch(8% 0.03 280 / 0.45), 0 0 40px oklch(70% 0.13 86 / 0.07);
}
.ax-form-h {
  font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 16px;
}
/* The form reuses the site .cf-* / .contact-* fields verbatim; only the submit and
   the fine print are themed here. */
.ax-form .cf-field > span { color: var(--ink-soft); }
.ax-form-submit { width: 100%; justify-content: center; margin-top: 6px; }
.ax-form-fine { font-family: var(--text); font-size: 13px; color: var(--muted); margin: 14px 0 0; text-align: center; }
.ax-form-fine a { color: var(--gold-deep); }

.ax-thanks { text-align: center; padding: clamp(8px, 2vw, 20px) 0; }
.ax-thanks-mark {
  display: inline-block; font-size: 28px; color: var(--gold);
  text-shadow: 0 0 18px oklch(84% 0.13 86 / 0.6); margin-bottom: 8px;
}
.ax-thanks h3 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); color: var(--ink); margin: 0 0 10px; }
.ax-thanks p { font-family: var(--text); font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; margin: 0 auto 22px; }

/* ── Outro ──────────────────────────────────────────────────────────────────── */
.ax-outro {
  text-align: center; margin-top: clamp(56px, 9vw, 116px);
  padding: clamp(32px, 5vw, 56px) 0 0; border-top: 1px solid var(--hair);
}
.ax-outro-h {
  font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 44px);
  letter-spacing: -0.02em; color: var(--ink); margin: 0 0 24px; text-wrap: balance;
}
.ax-outro-fine { font-family: var(--text); font-size: 15px; color: var(--muted); margin: 18px 0 0; }
.ax-outro-fine a { color: var(--gold); }

/* ── Motion ─────────────────────────────────────────────────────────────────── */
@keyframes ax-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.18; } }
@keyframes ax-float-a { 0%,100% { transform: translate(-86%, -54%) rotate(-9deg); } 50% { transform: translate(-86%, -59%) rotate(-10.5deg); } }
@keyframes ax-float-b { 0%,100% { transform: translate(-14%, -46%) rotate(7deg); }  50% { transform: translate(-14%, -41%) rotate(8.5deg); } }
@keyframes ax-float-c { 0%,100% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, -53.5%) rotate(-1deg); } }
.ax-hero-card--back  { animation: ax-float-a 7s ease-in-out infinite; }
.ax-hero-card--mid   { animation: ax-float-b 6.2s ease-in-out infinite; }
.ax-hero-card--front { animation: ax-float-c 5.6s ease-in-out infinite; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .ax-hero { grid-template-columns: 1fr; gap: 36px; text-align: center; padding-top: 12px; }
  .ax-standfirst { margin-inline: auto; }
  .ax-hero-cta { justify-content: center; }
  .ax-hero-stack { width: min(86%, 360px); order: -1; }

  .ax-cab,
  .ax-cab:nth-of-type(even) { grid-template-columns: 1fr; gap: 22px; }
  .ax-cab:nth-of-type(even) .ax-screen-wrap,
  .ax-cab .ax-screen-wrap { grid-column: 1; grid-row: auto; }
  .ax-cab:nth-of-type(even) .ax-cab-body,
  .ax-cab .ax-cab-body { grid-column: 1; grid-row: auto; max-width: none; text-align: center; }
  .ax-cab-blurb { margin-inline: auto; }
  .ax-cab-body { display: flex; flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ax-hero-card--back, .ax-hero-card--mid, .ax-hero-card--front,
  .ax-pitch-kicker .ax-blink { animation: none; }
  .ax-btn { transition: none; }
}