/* ============================================================================
   arcade-hub.css — the Arcade hub (/arcade).
   A penny arcade after dark on top of the site's Nightfall theme. The bulb
   marquee and the attract-mode screens are the only places pixel type lives,
   because those are the only places light is being emitted. Everything a
   visitor reads stays in the site faces.
   Each cabinet sets --h (its hue); every accent on it derives from that.
   ========================================================================== */

.ah {
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --ah-panel: oklch(20% 0.04 279);
  --ah-panel-2: oklch(23% 0.045 279);
  --ah-edge: oklch(38% 0.05 280);
  --ah-bezel: oklch(12% 0.022 280);
  --ah-won: oklch(74% 0.17 150);
  --ah-lost: oklch(68% 0.2 8);
  --ah-amber: oklch(82% 0.16 68);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 0 clamp(40px, 6vw, 72px);
}
.ah-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Marquee hero ─────────────────────────────────────────────────────────── */
.ah-hero {
  position: relative;
  text-align: center;
  padding: clamp(18px, 4vw, 44px) 0 clamp(26px, 4vw, 44px);
  isolation: isolate;
}
/* the warm light the sign throws onto the night around it */
.ah-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 0; width: min(1100px, 100vw); height: 78%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 42%, oklch(80% 0.13 78 / 0.20), oklch(60% 0.14 40 / 0.06) 55%, transparent 72%);
}

.ah-sign {
  position: relative;
  width: min(100%, 940px);
  margin: 0 auto clamp(22px, 4.2vw, 46px);
  aspect-ratio: 59 / 11;
  /* the sign's reflection on a glossy floor (WebKit/Blink; others simply skip it) */
  -webkit-box-reflect: below 4px linear-gradient(to bottom, transparent 52%, rgb(0 0 0 / 0.2));
}
.ah-sign canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ah-sign-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--pixel); font-size: clamp(24px, 6.4vw, 60px); line-height: 1; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 0 12px oklch(84% 0.13 86 / 0.7), 0 0 36px oklch(80% 0.15 70 / 0.45);
  background: linear-gradient(oklch(16% 0.03 282), oklch(12% 0.025 282));
  border-radius: 14px; box-shadow: inset 0 0 0 2px oklch(84% 0.13 86 / 0.35);
}
.ah-sign.is-lit .ah-sign-fallback { display: none; }
@media (max-width: 560px) {
  .ah-sign { aspect-ratio: 39 / 21; width: min(100%, 420px); }
  .ah-sign-fallback { font-size: clamp(22px, 8vw, 40px); }
}

.ah-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 auto; max-width: 17ch; text-wrap: balance;
}
.ah-lede {
  color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55;
  max-width: 52ch; margin: 14px auto 0; text-wrap: pretty;
}
.ah-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 22px; }

/* Insert coin: a real coin slot, the button that turns the sound on */
.ah-coin {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--label); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); background: oklch(18% 0.035 280); border: 1px solid oklch(67% 0.205 8 / 0.55);
  border-radius: 999px; padding: 9px 18px 9px 10px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .12s;
}
.ah-coin:hover { background: oklch(67% 0.205 8 / 0.12); border-color: var(--red); }
.ah-coin:active { transform: scale(0.96); }
.ah-coin-slot {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: oklch(12% 0.02 280); box-shadow: inset 0 0 0 1px oklch(67% 0.205 8 / 0.5);
}
.ah-coin-slot i { width: 3px; height: 14px; border-radius: 2px; background: var(--red); box-shadow: 0 0 8px var(--red); animation: ah-slot 1.6s ease-in-out infinite; }
@keyframes ah-slot { 50% { opacity: 0.35; box-shadow: none; } }
.ah-coin.has-credit { color: var(--gold); border-color: oklch(84% 0.13 86 / 0.6); }
.ah-coin.has-credit .ah-coin-slot i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.ah-coin.pop { animation: ah-coin-pop .4s var(--ease-out); }
@keyframes ah-coin-pop { 35% { transform: scale(1.08); } }
.ah-sound {
  font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 8px 13px; cursor: pointer;
}
.ah-sound:hover { color: var(--ink); border-color: var(--rule); }
.ah-sound[hidden] { display: none; }
.ah-story { font-family: var(--label); font-weight: 700; font-size: 14px; color: var(--gold); text-decoration: none; }
.ah-story span { display: inline-block; transition: transform .25s var(--ease-out); }
.ah-story:hover { color: var(--gold-deep); text-decoration: none; }
.ah-story:hover span { transform: translateX(4px); }
.ah-coin:focus-visible, .ah-sound:focus-visible, .ah-story:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── Today's lineup scoreboard ────────────────────────────────────────────── */
.ah-board {
  position: relative;
  background:
    radial-gradient(80% 140% at 0% 0%, oklch(84% 0.13 86 / 0.07), transparent 55%),
    linear-gradient(oklch(17% 0.032 280), oklch(14.5% 0.028 280));
  border: 1px solid var(--ah-edge);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 24px) clamp(16px, 2.6vw, 28px);
}
.ah-board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.ah-board-k {
  font-family: var(--pixel); font-weight: 400; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.3;
  color: var(--gold); letter-spacing: 0.02em; margin: 0;
  text-shadow: 0 0 10px oklch(84% 0.13 86 / 0.5);
}
.ah-board-line { margin: 10px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.ah-board-line b { color: var(--ink); font-weight: 700; }
.ah-board-line .ah-board-win { font-family: var(--pixel); font-weight: 400; font-size: 12px; color: var(--gold); margin-right: 6px; text-shadow: 0 0 12px oklch(84% 0.13 86 / 0.6); }
.ah-clock { margin: 0; display: flex; align-items: baseline; gap: 10px; font-family: var(--label); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ah-clock b {
  font-family: var(--pixel); font-weight: 400; font-size: clamp(15px, 1.7vw, 20px); letter-spacing: 0.04em;
  color: var(--ah-amber); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px oklch(80% 0.16 68 / 0.7), 0 0 22px oklch(70% 0.17 50 / 0.35);
  padding: 8px 10px; border-radius: 8px; background: oklch(10% 0.02 280); box-shadow: inset 0 0 0 1px oklch(40% 0.05 60 / 0.5);
}

.ah-board-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 18px; flex-wrap: wrap; }
.ah-lamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 124px)); gap: clamp(4px, 1vw, 12px); }
.ah-lamp {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px 9px; border-radius: 12px; text-align: center; color: var(--ink); text-decoration: none;
  transition: background .2s, transform .25s var(--ease-out);
}
.ah-lamp:hover { background: oklch(100% 0 0 / 0.05); transform: translateY(-2px); text-decoration: none; }
.ah-lamp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ah-bulb {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1;
  background: radial-gradient(circle at 38% 32%, oklch(40% 0.03 280), oklch(22% 0.03 280) 70%);
  box-shadow: inset 0 0 0 1.5px oklch(84% 0.13 86 / 0.35), inset 0 -4px 8px oklch(0% 0 0 / 0.35);
  transition: background .4s, box-shadow .4s, color .4s;
}
.ah-lamp.is-todo .ah-bulb { animation: ah-lamp-idle 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * 180ms); }
@keyframes ah-lamp-idle { 50% { box-shadow: inset 0 0 0 1.5px oklch(84% 0.13 86 / 0.85), inset 0 -4px 8px oklch(0% 0 0 / 0.35), 0 0 14px oklch(84% 0.13 86 / 0.35); } }
.ah-lamp.is-won .ah-bulb {
  color: oklch(22% 0.05 150); font-family: var(--label); font-weight: 900; font-size: 20px;
  background: radial-gradient(circle at 38% 30%, oklch(97% 0.06 150), oklch(78% 0.18 150) 42%, oklch(56% 0.15 150) 100%);
  box-shadow: 0 0 18px oklch(74% 0.17 150 / 0.65), 0 0 42px oklch(74% 0.17 150 / 0.25);
}
.ah-lamp.is-lost .ah-bulb {
  color: #fff; font-family: var(--label); font-weight: 900; font-size: 18px;
  background: radial-gradient(circle at 38% 30%, oklch(92% 0.06 10), oklch(68% 0.2 8) 45%, oklch(50% 0.17 8) 100%);
  box-shadow: 0 0 16px oklch(68% 0.2 8 / 0.55);
}
.ah-lamp-name { font-family: var(--label); font-weight: 700; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.ah-lamp-short { display: none; }
.ah-lamp-st { font-family: var(--label); font-weight: 800; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums; }
.ah-lamp.is-won .ah-lamp-st { color: oklch(82% 0.13 150); }
.ah-lamp.is-lost .ah-lamp-st { color: oklch(80% 0.11 10); }

.ah-next {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-family: var(--label); font-weight: 700; font-size: 15px; color: oklch(22% 0.04 277); text-decoration: none;
  background: var(--gold); border-radius: 999px; padding: 14px 22px;
  transition: background .2s, transform .25s var(--ease-out);
}
.ah-next b { font-weight: 800; }
.ah-next:hover { background: oklch(89% 0.13 88); transform: translateY(-2px); text-decoration: none; color: oklch(22% 0.04 277); }
.ah-next:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ah-next[hidden] { display: none; }

.ah-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.ah-share[hidden] { display: none; }
.ah-share-btn, .ah-share-soc {
  font-family: var(--label); font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
  border-radius: 999px; padding: 11px 18px; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .1s;
}
.ah-share-btn { background: oklch(84% 0.13 86 / 0.14); color: var(--gold); border: 1px solid oklch(84% 0.13 86 / 0.55); }
.ah-share-btn:hover { background: oklch(84% 0.13 86 / 0.24); }
.ah-share-soc { background: none; color: var(--ink-soft); border: 1px solid var(--ah-edge); }
.ah-share-soc:hover { color: var(--gold); border-color: var(--gold); }
.ah-share-btn:active, .ah-share-soc:active { transform: scale(0.97); }
.ah-share-btn:focus-visible, .ah-share-soc:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ah-toast { margin: 0 0 0 6px; font-family: var(--label); font-weight: 700; font-size: 13px; color: var(--gold); }
.ah-toast[hidden] { display: none; }
.ah-board.is-swept { border-color: oklch(84% 0.13 86 / 0.7); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.ah-sec { margin-top: clamp(40px, 6vw, 72px); }
.ah-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 24px; flex-wrap: wrap; margin-bottom: clamp(16px, 2.2vw, 24px); }
.ah-sec-title { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -0.015em; color: var(--ink); margin: 0; text-wrap: balance; }
.ah-sec-sub { margin: 0; color: var(--muted); font-size: 16px; }

.ah-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }

/* ── Cabinets ─────────────────────────────────────────────────────────────── */
.cab {
  --hue: var(--h, 86);
  --c: oklch(82% 0.15 var(--hue));
  --c-soft: oklch(82% 0.15 var(--hue) / 0.16);
  --c-line: oklch(70% 0.12 var(--hue) / 0.5);
  grid-column: span 2;
  position: relative; display: flex; flex-direction: column;
  color: var(--ink); text-decoration: none;
  border-radius: 16px;
  background:
    radial-gradient(90% 55% at 50% 0%, oklch(72% 0.14 var(--hue) / 0.14), transparent 70%),
    linear-gradient(oklch(22% 0.042 279), oklch(19% 0.036 279));
  border: 1px solid oklch(38% 0.05 280);
  transition: transform .4s var(--ease-out), border-color .3s;
}
.cab--xl { grid-column: span 3; }
[data-cab="sb"] { --c: oklch(90% 0.045 85); --c-soft: oklch(90% 0.045 85 / 0.14); }
/* the marquee tube along the top edge: the light that makes it a cabinet */
.cab::before {
  content: ""; position: absolute; top: -1px; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--c);
  box-shadow: 0 0 10px var(--c), 0 2px 26px oklch(80% 0.15 var(--hue) / 0.55);
  opacity: 0.85; transition: opacity .3s, left .45s var(--ease-out), right .45s var(--ease-out);
}
.cab:hover { transform: translateY(-4px); border-color: var(--c-line); text-decoration: none; color: var(--ink); }
.cab:hover::before { opacity: 1; left: 12px; right: 12px; }
.cab:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

.cab-screen {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  margin: 16px 16px 0; aspect-ratio: 16 / 10; border-radius: 10px;
  background: oklch(9% 0.02 280);
  box-shadow: 0 0 0 5px var(--ah-bezel), 0 0 0 6px oklch(34% 0.045 280);
  container-type: size;
}
.scr { position: absolute; inset: 0; display: grid; place-items: center; }
.scr-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* glass: scanlines, a vignette, and a soft glare */
.cab-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(162deg, oklch(100% 0 0 / 0.09), transparent 34%),
    radial-gradient(130% 110% at 50% 50%, transparent 58%, oklch(0% 0 0 / 0.5)),
    linear-gradient(oklch(0% 0 0 / 0.16) 50%, transparent 50%) 0 0 / 100% 3px;
}
/* PRESS START on hover, like an attract loop waiting for a player */
.cab-screen::before {
  content: "PRESS START"; position: absolute; z-index: 7; left: 50%; bottom: 9%;
  transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--pixel); font-size: clamp(8px, 4.2cqw, 12px); color: #fff;
  padding: 7px 10px 6px; border-radius: 6px; background: oklch(10% 0.02 280 / 0.82);
  text-shadow: 0 0 8px var(--c);
  transition: opacity .2s, transform .3s var(--ease-out);
}
.cab.is-played .cab-screen::before { content: "VIEW RESULTS"; }
@media (hover: hover) {
  .cab:hover .cab-screen::before, .cab:focus-visible .cab-screen::before { opacity: 1; transform: translate(-50%, 0); animation: ah-blink 1s steps(1) infinite .3s; }
  .cab:hover .scr { filter: brightness(1.12) saturate(1.08); }
}
.scr { transition: filter .3s; }
@keyframes ah-blink { 50% { opacity: 0; } }

/* screens power on like a tube: a bright line that opens into a picture */
@media (prefers-reduced-motion: no-preference) {
  .cab .scr { animation: ah-crt-on .7s var(--ease-expo) backwards; animation-delay: calc(250ms + var(--i, 0) * 110ms); }
}
@keyframes ah-crt-on {
  0% { clip-path: inset(50% 50% 50% 50%); filter: brightness(4); }
  35% { clip-path: inset(49.4% 0 49.4% 0); filter: brightness(3); }
  100% { clip-path: inset(0 0 0 0); filter: brightness(1); }
}

/* badges on the glass */
.cab-badge, .cab-streak {
  position: absolute; z-index: 8; top: 9px; pointer-events: none;
  font-family: var(--pixel); font-size: 9px; line-height: 1; letter-spacing: 0.02em;
  padding: 6px 8px 5px; border-radius: 6px; white-space: nowrap;
}
.cab-badge { left: 9px; }
.cab-badge--todo { background: var(--gold); color: oklch(24% 0.05 78); }
.cab-badge--won { background: var(--ah-won); color: oklch(20% 0.04 150); }
.cab-badge--lost { background: var(--ah-lost); color: #fff; }
.cab-streak { right: 9px; background: oklch(12% 0.02 280 / 0.85); color: var(--ink); box-shadow: inset 0 0 0 1px oklch(72% 0.17 50 / 0.6); font-family: var(--label); font-weight: 800; font-size: 12px; padding: 5px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .cab-badge--todo { animation: ah-badge 2.4s ease-in-out infinite; }
}
@keyframes ah-badge { 50% { box-shadow: 0 0 0 3px oklch(84% 0.13 86 / 0.2), 0 0 16px oklch(84% 0.13 86 / 0.6); } }

/* played today: the screen dims and stamps the result, arcade style */
.cab-stamp {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 8px;
  background: oklch(8% 0.02 280 / 0.72); pointer-events: none; text-align: center;
  transition: opacity .25s;
  font-family: var(--pixel); font-size: clamp(11px, 7cqw, 22px); line-height: 1.2;
}
.cab-stamp b { font-weight: 400; }
.cab-stamp small { font-family: var(--pixel); font-size: clamp(7px, 3.4cqw, 10px); color: oklch(90% 0.02 84 / 0.8); }
.cab.is-won .cab-stamp b { color: oklch(84% 0.17 150); text-shadow: 0 0 10px oklch(74% 0.17 150 / 0.9), 0 0 30px oklch(74% 0.17 150 / 0.5); }
.cab.is-lost .cab-stamp b { color: oklch(78% 0.17 8); text-shadow: 0 0 10px oklch(68% 0.2 8 / 0.9), 0 0 30px oklch(68% 0.2 8 / 0.45); }
.cab.is-played .scr { filter: saturate(0.55); }
@media (hover: hover) { .cab:hover .cab-stamp { opacity: 0; } }

.cab-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 20px; flex: 1; }
.cab-meta { font-family: var(--label); font-weight: 700; font-size: 13px; color: var(--c); letter-spacing: 0.01em; }
.cab-name { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 1.8vw, 24px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--ink); text-wrap: balance; }
.cab--xl .cab-name { font-size: clamp(24px, 2.3vw, 30px); }
.cab-desc { color: var(--ink-soft); font-size: 15.5px; line-height: 1.5; max-width: 52ch; text-wrap: pretty; margin-bottom: 16px; }
.cab-cta {
  align-self: flex-start; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--label); font-weight: 800; font-size: 14px; color: var(--c);
  background: var(--c-soft); border-radius: 999px; padding: 9px 16px;
  transition: background .25s, color .25s;
}
.cab-cta::after { content: "▸"; font-size: 12px; transition: transform .25s var(--ease-out); }
.cab:hover .cab-cta { background: var(--c); color: oklch(18% 0.04 var(--hue)); }
.cab:hover .cab-cta::after { transform: translateX(3px); }
.cab.is-won .cab-cta { color: oklch(84% 0.13 150); background: oklch(74% 0.17 150 / 0.14); }
.cab.is-lost .cab-cta { color: var(--ink-soft); background: oklch(100% 0 0 / 0.06); }

/* ── Attract screens ──────────────────────────────────────────────────────── */

/* The Rope Drop: a word board that plays itself */
.scr-rd { background: radial-gradient(90% 90% at 50% 40%, oklch(26% 0.05 150 / 0.55), oklch(11% 0.025 280) 75%); }
.rd-board { --t: min(12.2cqh, 13cqw); display: grid; grid-template-columns: repeat(5, var(--t)); gap: calc(var(--t) * 0.13); perspective: 400px; }
.rd-t {
  width: var(--t); aspect-ratio: 1; display: grid; place-items: center; border-radius: calc(var(--t) * 0.1);
  font-family: var(--display); font-style: normal; font-weight: 800; font-size: calc(var(--t) * 0.52); line-height: 1; color: #fff;
  box-shadow: inset 0 0 0 1.5px oklch(42% 0.04 280); background: oklch(15% 0.025 280 / 0.6);
}
.rd-t.is-typed { box-shadow: inset 0 0 0 1.5px oklch(70% 0.04 280); animation: rd-pop .12s ease-out; }
.rd-t.is-c { background: oklch(64% 0.16 150); box-shadow: none; }
.rd-t.is-p { background: oklch(80% 0.14 86); box-shadow: none; color: oklch(22% 0.05 80); }
.rd-t.is-a { background: oklch(36% 0.03 280); box-shadow: none; }
.rd-t.is-flip { animation: rd-flip .34s ease-in-out; }
.rd-t.is-win { animation: rd-hop .5s var(--ease-out); }
@keyframes rd-pop { 50% { transform: scale(1.1); } }
@keyframes rd-flip { 50% { transform: rotateX(90deg); } }
@keyframes rd-hop { 40% { transform: translateY(-22%); } }
.rd-board.is-clearing .rd-t { transition: opacity .35s, transform .35s; opacity: 0; transform: scale(0.85); }

/* Mystery Ride: the lantern-lit car, with clue chips flipping over it */
.scr-mr .scr-img { object-position: 50% 40%; }
.mr-hud { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 2; display: grid; justify-items: center; gap: 2.6cqh; }
.mr-guess {
  font-family: var(--label); font-weight: 800; font-size: clamp(10px, 4.4cqw, 16px); color: #fff; white-space: nowrap;
  padding: 1.6cqh 3.4cqw; border-radius: 999px; background: oklch(10% 0.02 280 / 0.8); box-shadow: inset 0 0 0 1px oklch(82% 0.15 55 / 0.55);
  min-width: 40cqw; text-align: center;
}
.mr-guess.is-typing::after { content: "▍"; color: oklch(82% 0.15 55); animation: ah-blink .8s steps(1) infinite; margin-left: 2px; }
.mr-chips { display: flex; gap: 1.6cqw; perspective: 300px; }
.mr-chips i {
  --s: min(11cqw, 17cqh);
  width: var(--s); aspect-ratio: 1; border-radius: 18%; display: grid; place-items: center;
  font-style: normal; font-family: var(--label); font-weight: 900; font-size: calc(var(--s) * 0.5); color: #fff;
  background: oklch(30% 0.03 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.12);
}
.mr-chips i.is-c { background: oklch(64% 0.16 150); }
.mr-chips i.is-p { background: oklch(80% 0.14 86); color: oklch(22% 0.05 80); }
.mr-chips i.is-a { background: oklch(36% 0.03 280); }
.mr-chips i.is-flip { animation: rd-flip .34s ease-in-out; }
.scr-mr.is-solved .mr-guess { box-shadow: inset 0 0 0 1.5px oklch(74% 0.17 150); color: oklch(88% 0.12 150); }

/* Lightning Round: two real ride photos, one call */
.scr-lr { display: block; background: oklch(10% 0.02 280); }
.lr-side { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.lr-a { left: 0; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.lr-b { right: 0; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.lr-side img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform 4s linear; }
.lr-side img.is-swap { opacity: 0; }
.lr-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, oklch(8% 0.02 280 / 0.85)); }
.lr-wait {
  position: absolute; z-index: 2; bottom: 9%; font-family: var(--pixel); font-weight: 400; font-size: clamp(14px, 8cqw, 30px); line-height: 1;
  color: #fff; text-shadow: 0 0 10px oklch(0% 0 0 / 0.8); font-variant-numeric: tabular-nums;
}
.lr-wait::after { content: "min"; display: block; margin-top: 4px; font-size: 0.38em; color: oklch(92% 0.02 84 / 0.8); text-align: center; }
.lr-a .lr-wait { left: 12%; }
.lr-b .lr-wait { right: 12%; }
.lr-wait.is-hit { color: oklch(88% 0.17 95); text-shadow: 0 0 12px oklch(88% 0.17 95 / 0.8); }
.lr-vs {
  position: absolute; z-index: 3; left: 50%; top: 40%; transform: translate(-50%, -50%) rotate(-8deg);
  font-family: var(--pixel); font-size: clamp(10px, 5.6cqw, 18px); color: oklch(22% 0.05 90);
  background: oklch(88% 0.17 95); padding: 2.2cqh 2cqw 1.6cqh; border-radius: 6px;
  box-shadow: 0 0 18px oklch(88% 0.17 95 / 0.6);
}
.lr-streak {
  position: absolute; z-index: 3; bottom: 8%; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--pixel); font-size: clamp(7px, 3.2cqw, 10px); color: oklch(92% 0.02 84); text-transform: uppercase;
  background: oklch(10% 0.02 280 / 0.8); padding: 1.8cqh 2.4cqw 1.4cqh; border-radius: 6px;
}
.lr-streak b { font-weight: 400; color: oklch(88% 0.17 95); }
@container (max-width: 300px) { .lr-streak { display: none; } }
@container (max-aspect-ratio: 5/4) {
  .rd-board { --t: min(10.4cqh, 13cqw); margin-top: 15cqh; }
  .cn-board { margin-top: 12cqh; }
  .mr-hud { bottom: 6%; }
  .mr-guess { font-size: 9px; padding: 1.4cqh 2.4cqw; }
}
.lr-call {
  position: absolute; z-index: 4; left: 50%; top: 62%; transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  font-family: var(--pixel); font-size: clamp(8px, 4.4cqw, 14px); white-space: nowrap; color: oklch(20% 0.04 150);
  background: oklch(78% 0.17 150); padding: 2cqh 2.6cqw 1.6cqh; border-radius: 6px;
  transition: opacity .2s, transform .35s var(--ease-out);
}
.lr-call.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Park Connections: sixteen tiles that sort themselves into four groups */
.scr-cn { background: radial-gradient(90% 90% at 50% 40%, oklch(28% 0.06 305 / 0.5), oklch(11% 0.025 280) 75%); }
.cn-board { --tw: 21.4cqw; --th: min(17cqh, 12cqw); position: relative; width: calc(var(--tw) * 4 + var(--tw) * 0.18); height: calc(var(--th) * 4 + var(--th) * 0.3); }
.cn-t, .cn-bar {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; text-align: center;
  font-style: normal; font-family: var(--label); font-weight: 800; line-height: 1.05; border-radius: 5px;
}
.cn-t {
  width: var(--tw); height: var(--th); font-size: clamp(6px, 2.8cqw, 12px); padding: 0 2px; overflow: hidden;
  color: oklch(20% 0.03 280); background: oklch(90% 0.02 84);
  transform: translate(calc(var(--x) * var(--tw) * 1.06), calc(var(--y) * var(--th) * 1.1));
  transition: transform .5s var(--ease-out), background .3s, color .3s;
}
.cn-t.is-sel { background: oklch(40% 0.04 280); color: #fff; }
.cn-bar {
  width: calc(var(--tw) * 4 + var(--tw) * 0.18); height: var(--th); z-index: 2;
  transform: translateY(calc(var(--y) * var(--th) * 1.1));
  font-size: clamp(7px, 3.2cqw, 13px); text-transform: uppercase; letter-spacing: 0.06em; color: oklch(20% 0.04 280);
  opacity: 0; scale: 0.92; transition: opacity .3s, scale .4s var(--ease-out);
}
.cn-bar.is-on { opacity: 1; scale: 1; }
.cn-g0.cn-bar, .cn-g0.is-done { background: oklch(84% 0.13 86); }
.cn-g1.cn-bar, .cn-g1.is-done { background: oklch(72% 0.15 150); }
.cn-g2.cn-bar, .cn-g2.is-done { background: oklch(74% 0.11 235); }
.cn-g3.cn-bar, .cn-g3.is-done { background: oklch(70% 0.15 305); }
.cn-board.is-clearing .cn-bar { opacity: 0; }

/* Find the Stroller: the real 3D lot, with a search reticle hunting across it */
.scr-fs .scr-img { object-position: 50% 45%; }
.fs-reticle {
  position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 18cqw; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px oklch(0% 0 0 / 0.35), inset 0 0 0 999px oklch(100% 0 0 / 0.06);
  transition: left .7s var(--ease-out), top .7s var(--ease-out), box-shadow .3s;
}
.fs-reticle::before, .fs-reticle::after { content: ""; position: absolute; background: #fff; }
.fs-reticle::before { left: 50%; top: -18%; bottom: -18%; width: 2px; margin-left: -1px; mask: linear-gradient(#000 22%, transparent 22% 78%, #000 78%); }
.fs-reticle::after { top: 50%; left: -18%; right: -18%; height: 2px; margin-top: -1px; mask: linear-gradient(90deg, #000 22%, transparent 22% 78%, #000 78%); }
.fs-reticle.is-locked { box-shadow: 0 0 0 2.5px oklch(80% 0.15 230), 0 0 0 5px oklch(0% 0 0 / 0.35), 0 0 22px oklch(80% 0.15 230 / 0.9), inset 0 0 0 999px oklch(80% 0.15 230 / 0.14); }
.fs-reticle i { position: absolute; inset: -30%; border-radius: 50%; box-shadow: 0 0 0 2px oklch(80% 0.15 230); opacity: 0; }
.fs-reticle.is-locked.is-ping i { animation: fs-ping .8s var(--ease-out); }
@keyframes fs-ping { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.3); } }
.fs-found {
  position: absolute; z-index: 3; left: 50%; bottom: 8%; transform: translateX(-50%) translateY(6px); opacity: 0;
  font-family: var(--pixel); font-size: clamp(8px, 3.8cqw, 12px); color: oklch(20% 0.04 230); white-space: nowrap;
  background: oklch(82% 0.13 230); padding: 2cqh 3cqw 1.6cqh; border-radius: 6px;
  transition: opacity .25s, transform .35s var(--ease-out);
}
.fs-found b { font-weight: 400; }
.scr-fs.is-found .fs-found { opacity: 1; transform: translateX(-50%); }

/* Steamboat Scramble: the 1928 river, flickering like an old projector */
.scr-sb { background: oklch(55% 0.01 80); }
.scr-sb .scr-img { filter: sepia(0.25) contrast(1.05); }
.sb-logo { position: absolute; z-index: 2; width: 54%; height: auto; left: 60%; top: 31%; transform: translate(-50%, -50%) rotate(-2deg); filter: drop-shadow(0 4px 8px oklch(0% 0 0 / 0.45)); }
.scr-sb::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(90% 85% at 50% 50%, transparent 55%, oklch(15% 0.02 60 / 0.6)); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .cab-screen.is-live .scr-sb .sb-logo { animation: sb-bob 3.2s ease-in-out infinite; }
  .cab-screen.is-live .scr-sb::after { animation: sb-flicker 0.24s steps(2) infinite; }
}
@keyframes sb-bob { 50% { transform: translate(-50%, -56%) rotate(1deg); } }
@container (max-aspect-ratio: 5/4) { .sb-logo { width: 84%; left: 50%; top: 27%; } }
@keyframes sb-flicker { 50% { opacity: 0.86; } }

/* Which Ride Are You: answers on the left, the card you'd get on the right */
.scr-wr { background: radial-gradient(90% 90% at 70% 40%, oklch(30% 0.07 350 / 0.55), oklch(11% 0.025 280) 72%); grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; padding: 0 6cqw; gap: 4cqw; }
.wr-q { display: grid; gap: 2.6cqh; width: 100%; }
.wr-q i { height: 9cqh; border-radius: 999px; background: oklch(30% 0.04 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1); }
.wr-q i.is-pick { background: oklch(76% 0.15 350); box-shadow: 0 0 14px oklch(76% 0.15 350 / 0.6); }
.wr-deck { position: relative; width: min(100%, 44cqh * 1.5); aspect-ratio: 3 / 4; height: auto; perspective: 700px; }
.wr-card {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden; background: oklch(96% 0.02 84);
  padding: 5%; display: grid; grid-template-rows: 1fr auto; gap: 4%;
  box-shadow: 0 8px 18px oklch(0% 0 0 / 0.45); transform: rotate(4deg); backface-visibility: hidden;
}
.wr-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; min-height: 0; }
.wr-card span { font-family: var(--display); font-weight: 800; font-size: clamp(8px, 3.8cqw, 15px); line-height: 1.05; color: oklch(22% 0.04 280); text-align: center; }
.wr-card small { display: block; font-family: var(--label); font-weight: 800; font-size: 0.62em; letter-spacing: 0.1em; text-transform: uppercase; color: oklch(55% 0.16 350); margin-bottom: 2px; }
.wr-card:nth-child(2), .wr-card:nth-child(3) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wr-card { animation: wr-cycle 7.5s var(--ease-out) infinite both; animation-play-state: paused; }
  .wr-card:nth-child(2) { animation-delay: 2.5s; }
  .wr-card:nth-child(3) { animation-delay: 5s; }
  .cab-screen.is-live .wr-card { animation-play-state: running; }
  .wr-q i { animation: wr-pick-1 2.5s steps(1) infinite; animation-play-state: paused; }
  .wr-q i:nth-child(2) { animation-name: wr-pick-2; }
  .wr-q i:nth-child(3) { animation-name: wr-pick-3; }
  .cab-screen.is-live .wr-q i { animation-play-state: running; }
}
@keyframes wr-cycle {
  0% { opacity: 0; transform: rotateY(-90deg) rotate(4deg); }
  6%, 30% { opacity: 1; transform: rotateY(0) rotate(4deg); }
  36%, 100% { opacity: 0; transform: rotateY(90deg) rotate(4deg); }
}
@keyframes wr-pick-1 { 0% { background: oklch(76% 0.15 350); box-shadow: 0 0 14px oklch(76% 0.15 350 / 0.6); } 33% { background: oklch(30% 0.04 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1); } }
@keyframes wr-pick-2 { 0% { background: oklch(30% 0.04 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1); } 33% { background: oklch(76% 0.15 350); box-shadow: 0 0 14px oklch(76% 0.15 350 / 0.6); } 66% { background: oklch(30% 0.04 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1); } }
@keyframes wr-pick-3 { 0% { background: oklch(30% 0.04 280); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1); } 66% { background: oklch(76% 0.15 350); box-shadow: 0 0 14px oklch(76% 0.15 350 / 0.6); } }

/* ── Feeling Lucky strip ──────────────────────────────────────────────────── */
.lucky {
  --c: oklch(72% 0.19 25);
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 3vw, 36px);
  margin-top: clamp(14px, 1.8vw, 22px); padding: clamp(22px, 3vw, 30px) clamp(18px, 3vw, 36px);
  border-radius: 16px; color: var(--ink); text-decoration: none; overflow: hidden;
  background:
    radial-gradient(70% 140% at 12% 50%, oklch(62% 0.19 25 / 0.28), transparent 60%),
    linear-gradient(oklch(21% 0.045 285), oklch(17% 0.04 285));
  border: 1px solid oklch(55% 0.13 25 / 0.5);
  transition: border-color .3s, transform .4s var(--ease-out);
}
.lucky:hover { border-color: oklch(72% 0.19 25 / 0.9); transform: translateY(-3px); text-decoration: none; color: var(--ink); }
.lucky:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.lucky-lights { position: absolute; left: 14px; right: 14px; top: 9px; display: flex; justify-content: space-between; pointer-events: none; }
.lucky-lights i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0.3; }
@media (prefers-reduced-motion: no-preference) {
  .lucky-lights i { animation: lk-chase 1.4s steps(1) infinite; }
  .lucky-lights i:nth-child(odd) { animation-delay: .7s; }
  .lucky:hover .lucky-lights i, .lucky.is-rolling .lucky-lights i { animation-duration: .35s; }
}
@keyframes lk-chase { 50% { opacity: 1; box-shadow: 0 0 8px var(--gold); } }
.lucky-machine {
  display: flex; gap: 7px; padding: 9px; border-radius: 14px;
  background: linear-gradient(oklch(80% 0.13 80), oklch(62% 0.13 62));
  box-shadow: inset 0 2px 0 oklch(95% 0.06 90 / 0.7), inset 0 -3px 0 oklch(45% 0.1 55 / 0.6);
}
.lucky-reel {
  width: clamp(46px, 5.4vw, 58px); aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; border-radius: 8px;
  background: linear-gradient(oklch(78% 0.01 84), #fff 32%, #fff 68%, oklch(78% 0.01 84));
  box-shadow: inset 0 0 0 1px oklch(40% 0.05 60 / 0.4);
}
.lucky-reel b { font-weight: 400; font-size: clamp(24px, 2.8vw, 30px); line-height: 1; display: block; }
.lucky-reel b.spin { animation: lk-blur .09s linear infinite; }
.lucky-reel b.land { animation: lk-land .34s var(--ease-out); }
@keyframes lk-blur { 50% { transform: translateY(4px); filter: blur(1.4px); } }
@keyframes lk-land { 0% { transform: translateY(-10px); } 100% { transform: none; } }
.lucky.is-jackpot .lucky-machine { animation: lk-win .5s ease 2; }
@keyframes lk-win { 50% { box-shadow: inset 0 2px 0 oklch(95% 0.06 90 / 0.7), 0 0 0 4px oklch(84% 0.13 86 / 0.35), 0 0 36px oklch(84% 0.13 86 / 0.8); } }
.lucky-copy { display: grid; gap: 4px; min-width: 0; }
.lucky-title { font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.3vw, 28px); line-height: 1.1; letter-spacing: -0.01em; }
.lucky-text { color: var(--ink-soft); font-size: 15.5px; line-height: 1.45; }
/* the lever: a red ball on a chrome arm that pulls down when you play */
.lucky-lever { position: relative; width: 34px; height: 84px; flex: none; }
.lucky-lever::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 16px; transform: translateX(-50%); border-radius: 6px 6px 3px 3px; background: linear-gradient(oklch(55% 0.02 280), oklch(35% 0.02 280)); }
.lucky-lever i {
  position: absolute; left: 50%; bottom: 10px; width: 6px; height: 64px; margin-left: -3px; border-radius: 3px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, oklch(62% 0.01 280), oklch(92% 0.005 280) 45%, oklch(58% 0.01 280));
  transition: transform .35s var(--ease-out);
}
.lucky-lever i::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, oklch(90% 0.08 25), oklch(62% 0.21 25) 50%, oklch(42% 0.17 25));
  box-shadow: 0 0 14px oklch(62% 0.21 25 / 0.55);
}
.lucky:hover .lucky-lever i { transform: rotate(-8deg); }
.lucky.is-rolling .lucky-lever i { transform: scaleY(-0.55); transition-duration: .22s; }

/* ── About + FAQ ──────────────────────────────────────────────────────────── */
.ah-about {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 64px); align-items: start;
  margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--hair);
}
.ah-about-copy p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 14px 0 0; max-width: 56ch; }
.ah-about-copy a { color: var(--gold); }
.ah-about-copy .ah-credits { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 22px; }
.ah-credits a { color: var(--ink-soft) !important; }
.ah-faq { display: grid; }
.ah-faq-item { border-bottom: 1px solid var(--hair); }
.ah-faq-item:first-child { border-top: 1px solid var(--hair); }
.ah-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink);
}
.ah-faq-item summary::-webkit-details-marker { display: none; }
.ah-faq-item summary::after {
  content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--label); font-weight: 700; font-size: 18px; color: var(--gold); box-shadow: inset 0 0 0 1px oklch(84% 0.13 86 / 0.4);
  transition: transform .3s var(--ease-out), background .2s;
}
.ah-faq-item[open] summary::after { transform: rotate(45deg); background: oklch(84% 0.13 86 / 0.12); }
.ah-faq-item summary:hover { color: var(--gold); }
.ah-faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.ah-faq-item p { margin: 0 0 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 62ch; }

/* ── Confetti for a Daily Sweep ───────────────────────────────────────────── */
.ah-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.ah-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; }

/* ── Tablet: two across, the headliner goes wide ──────────────────────────── */
@media (max-width: 999px) {
  .ah-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cab, .cab--xl { grid-column: span 1; }
  .ah-grid--daily .cab:first-child { grid-column: 1 / -1; flex-direction: row; }
  .ah-grid--daily .cab:first-child .cab-screen { width: 54%; flex: none; margin: 16px 0 16px 16px; }
  .ah-grid--daily .cab:first-child .cab-body { padding: 22px 22px 18px; justify-content: center; }
  .ah-board-row { flex-direction: column; align-items: stretch; }
  .ah-lamps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ah-next { justify-content: center; }
  .ah-about { grid-template-columns: 1fr; }
}

/* ── Phone: row cabinets so the lineup fits a thumb ───────────────────────── */
@media (max-width: 639px) {
  .ah-grid { grid-template-columns: 1fr; gap: 12px; }
  .ah-grid .cab, .ah-grid--daily .cab:first-child { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .ah-grid .cab-screen, .ah-grid--daily .cab:first-child .cab-screen { width: 40%; flex: none; aspect-ratio: 1; margin: 12px 0 12px 12px; box-shadow: 0 0 0 4px var(--ah-bezel), 0 0 0 5px oklch(34% 0.045 280); }
  .ah-grid .cab-body, .ah-grid--daily .cab:first-child .cab-body { padding: 13px 14px 12px 16px; gap: 3px; justify-content: flex-start; }
  .cab-name, .cab--xl .cab-name { font-size: 19px; }
  .cab-meta { font-size: 12px; }
  .cab-desc { font-size: 14px; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cab-desc { margin-bottom: 8px; }
  .cab-cta { padding: 7px 13px; font-size: 13px; }
  .cab::before { left: 14px; right: auto; width: calc(40% - 4px); }
  .cab:hover::before { left: 14px; right: auto; }
  .cab-badge, .cab-streak { top: 6px; font-size: 7.5px; padding: 5px 6px 4px; }
  .cab-badge { left: 6px; }
  .cab-streak { right: 6px; font-size: 10.5px; padding: 3px 5px; }
  .cab-stamp small { display: none; }
  .scr-wr { grid-template-columns: 1fr; padding: 0; }
  .wr-q { display: none; }
  .wr-deck { width: 58cqw; }
  .ah-sec-head { display: block; }
  .ah-sec-sub { margin-top: 6px; font-size: 15px; }

  .ah-board { padding: 16px 14px; border-radius: 16px; }
  .ah-board-head { flex-direction: column; gap: 10px; }
  .ah-board-line { font-size: 15px; margin-top: 8px; }
  .ah-clock { font-size: 11px; }
  .ah-lamps { gap: 2px; }
  .ah-lamp { padding: 8px 0 6px; gap: 5px; }
  .ah-lamp-full { display: none; }
  .ah-lamp-short { display: inline; }
  .ah-bulb { width: 38px; height: 38px; font-size: 17px; }
  .ah-lamp-name { font-size: 10.5px; }
  .ah-lamp-st { font-size: 9.5px; letter-spacing: 0.02em; }
  .ah-next { width: 100%; padding: 14px 18px; }
  .ah-share-btn { flex: 1 1 100%; }
  .ah-share-soc { flex: 1 1 0; }

  .lucky { grid-template-columns: auto 1fr; padding: 22px 16px 18px; gap: 14px; }
  .lucky-lever { display: none; }
  .lucky-reel { width: 38px; }
  .lucky-reel b { font-size: 21px; }
  .lucky-machine { gap: 5px; padding: 7px; border-radius: 12px; }
  .lucky-title { font-size: 19px; }
  .lucky-text { font-size: 14px; }

  .ah-faq-item summary { font-size: 16.5px; }
}

/* ── Reduced motion: every loop holds its still frame ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ah-coin-slot i, .ah-lamp.is-todo .ah-bulb, .cab:hover .cab-screen::before, .lucky-reel b.spin, .lucky-reel b.land, .lucky.is-jackpot .lucky-machine { animation: none; }
  .cab, .cab::before, .lucky, .ah-lamp, .ah-next, .lucky-lever i, .cn-t, .fs-reticle, .lr-side img { transition: none; }
  .cab:hover, .lucky:hover, .ah-lamp:hover, .ah-next:hover { transform: none; }
}