/* ==========================================================================
   MIZPHA GAMES — hub styles
   Palette pulled from the truck sprite (purple / tan) plus arcade gold.
   ========================================================================== */
:root {
  --bg: #0f0b24;
  --bg-2: #171138;
  --panel: #1f1848;
  --panel-2: #2a2160;
  --line: rgba(255, 255, 255, 0.1);
  --ink: #ffffff;
  --muted: #bdb6e6;
  --gold: #ffc83d;
  --gold-deep: #d98e00;
  --pink: #ff4f8b;
  --mint: #37e2a0;
  --violet: #8a5cff;
  --truck: #7b3a8f;
  --outline: #1b2033;
  --radius: 22px;
  /* racing type: Russo One for headings, buttons and game text; Exo 2 for body copy */
  --display: "Russo One", "Exo 2", system-ui, sans-serif;
  --body: "Exo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lock, html.lock body { overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(138, 92, 255, 0.28), transparent 60%),
    radial-gradient(900px 500px at -10% 40%, rgba(255, 79, 139, 0.14), transparent 60%),
    var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
kbd {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.45em;
  font: 700 0.78em/1 var(--body); color: var(--outline);
  background: #f4f1ff; border-radius: 7px; box-shadow: 0 3px 0 #9d95c9;
}
.mono { font-variant-numeric: tabular-nums; }
.sr, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--gold); color: var(--outline); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font: 700 12px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 0 rgba(55, 226, 160, 0.7); animation: ping 1.8s infinite;
}
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(55, 226, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(55, 226, 160, 0); } }

/* ---------------------------------------------------------------- buttons */
.btn-play {
  --c: var(--gold); --d: var(--gold-deep);
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px 14px 14px; border: 3px solid var(--outline); border-radius: 18px;
  background: linear-gradient(180deg, #ffe07a, var(--c) 55%);
  color: var(--outline); font: 400 clamp(20px, 2.2vw, 26px)/1 var(--display); letter-spacing: 0.03em;
  text-transform: uppercase; text-decoration: none;
  box-shadow: 0 7px 0 var(--outline), 0 14px 30px rgba(255, 200, 61, 0.35);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.2s;
}
.btn-play:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 9px 0 var(--outline), 0 18px 40px rgba(255, 200, 61, 0.5); }
.btn-play:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--outline), 0 6px 16px rgba(255, 200, 61, 0.3); }
.btn-play-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--outline); color: var(--gold);
}
.btn-play-icon svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.btn-play .hint-kbd { font-size: 12px; margin-left: 4px; opacity: 0.85; }
.btn-play.sm { padding: 9px 18px 9px 9px; font-size: 18px; border-radius: 14px; box-shadow: 0 5px 0 var(--outline); }
.btn-play.sm .btn-play-icon { width: 32px; height: 32px; border-radius: 9px; }
.btn-play.sm .btn-play-icon svg { width: 16px; height: 16px; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07); color: #fff; text-decoration: none;
  font: 700 15px/1 var(--body); letter-spacing: 0.02em;
  transition: background 0.2s, border-color 0.2s, transform 0.12s;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.btn-ghost:active { transform: translateY(2px); }
.btn-ghost.sm, .btn-ghost.small { padding: 10px 14px; font-size: 14px; border-radius: 13px; }

.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(20, 14, 50, 0.78);
  color: #fff; transition: background 0.2s, transform 0.12s;
}
.icon-btn:hover { background: rgba(60, 44, 130, 0.8); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-btn .ico-off, .icon-btn.is-muted .ico-on { display: none; }
.icon-btn.is-muted .ico-off { display: block; }
.icon-exit { background: rgba(255, 79, 139, 0.85); border-color: rgba(255, 255, 255, 0.4); }
.icon-exit:hover { background: var(--pink); }

.coin-ico {
  display: inline-block; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffd84a 0 42%, #f2a900 44% 100%);
  border: 2px solid var(--outline); box-shadow: inset 3px -3px 0 rgba(0, 0, 0, 0.12);
  position: relative; flex: none;
}
.coin-ico::after { content: ""; position: absolute; left: 50%; top: 22%; width: 3px; height: 56%; margin-left: -1.5px; background: #f2a900; border-radius: 2px; }

/* ----------------------------------------------------------------- top bar */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--gutter);
  transition: background 0.3s, padding 0.3s;
}
.topbar.solid { background: rgba(15, 11, 36, 0.94); padding-block: 10px; box-shadow: 0 1px 0 var(--line); }
.is-playing .topbar { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 58px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); transition: transform 0.25s cubic-bezier(.2, 1.4, .4, 1), height 0.3s; }
.brand:hover .brand-logo { transform: scale(1.06) rotate(-2deg); }
.topbar.solid .brand-logo { height: 46px; }
.brand-wheel { width: 40px; height: 40px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); }
.brand-wheel img { width: 100%; animation: spin 3.5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.brand-word {
  font: 400 26px/1 var(--display); letter-spacing: 0.02em; color: #fff;
  text-shadow: 0 3px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline), 0 -2px 0 var(--outline);
}
.brand-word b { font-weight: 400; color: var(--gold); }
.menu { display: flex; }
.player { display: flex; align-items: center; gap: 10px; }
.coin-count {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 9px; border-radius: 14px;
  background: rgba(15, 11, 36, 0.8); border: 1px solid var(--line); font: 400 20px/1 var(--display);
}
.coin-count b { font-weight: 400; min-width: 1ch; }

/* ------------------------------------------------------------------ stage */
.stage {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: #8fd0f4; isolation: isolate;
}
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.stage-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15, 11, 36, 0.62) 0%, rgba(15, 11, 36, 0.2) 38%, transparent 55%),
    linear-gradient(0deg, rgba(15, 11, 36, 0.9) 0%, transparent 18%);
  transition: opacity 0.5s;
}
.is-playing .stage { position: fixed; inset: 0; height: 100%; min-height: 0; z-index: 80; }
.is-playing .stage-scrim { opacity: 0; }

/* hero overlay */
.hero {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px var(--gutter) 70px;
  transition: opacity 0.3s;
}
/* entering or leaving a run, the intro (and its MONSTER HILLS title) only
   fades; it never slides, scales or blurs */
.is-playing .hero { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s 0.25s; }
.hero-card {
  pointer-events: auto; width: min(560px, 100%);
  padding: clamp(22px, 3vw, 34px); border-radius: 30px;
  background: linear-gradient(160deg, rgba(40, 28, 96, 0.9), rgba(18, 12, 46, 0.93));
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 80px rgba(10, 6, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  animation: rise 0.8s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.title {
  margin: 14px 0 12px; display: flex; flex-direction: column;
  font: 400 clamp(58px, 8.5vw, 124px)/0.86 var(--display); letter-spacing: 0.01em; text-transform: uppercase;
}
.title span { display: block; -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; text-shadow: 0 7px 0 var(--outline), 0 16px 30px rgba(0, 0, 0, 0.35); }
.title .t1 { color: #fff; }
.title .t2 { color: var(--gold); }
.lede { margin: 0 0 22px; color: #e3ddff; font-size: clamp(15px, 1.35vw, 17px); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ride-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.ride-picker button {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 9px;
  border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.ride-picker button:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); }
.ride-picker button[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 200, 61, 0.14); }
.ride-picker .ride-slot { width: 100%; height: 44px; display: grid; place-items: center; }
.ride-picker .ride { height: 100%; width: auto; max-width: 100%; }
.ride-name { font: 700 12px/1.1 var(--body); color: #e8e4ff; text-align: center; }

.hero-stats {
  pointer-events: auto; position: absolute; right: var(--gutter); bottom: 34px;
  display: flex; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.hero-stats li {
  display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 10px 14px;
  border-radius: 16px; background: rgba(15, 11, 36, 0.8); border: 1px solid var(--line);
}
.hero-stats b { font: 400 24px/1 var(--display); color: var(--gold); font-variant-numeric: tabular-nums; }
.hero-stats span { font: 700 10px/1.4 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.scroll-cue {
  pointer-events: auto; position: absolute; left: 50%; bottom: 20px; width: 30px; height: 48px; margin-left: -15px;
  border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 16px;
}
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 10px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.6s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

/* Morning / Night toggle on the hero card */
.time-toggle {
  display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.14);
}
.time-toggle button {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 10px;
  background: transparent; color: #e8e4ff; font: 700 13px/1 var(--body); transition: background 0.2s, color 0.2s;
}
.time-toggle button svg { width: 16px; height: 16px; fill: currentColor; }
.time-toggle button:hover { background: rgba(255, 255, 255, 0.08); }
.time-toggle button[aria-pressed="true"][data-time="morning"] { background: var(--gold); color: var(--outline); }
.time-toggle button[aria-pressed="true"][data-time="night"] { background: #3b4fd8; color: #fff; }
.time-toggle button[aria-pressed="true"][data-time="rain"] { background: #4d6f8f; color: #fff; }
.time-btn .ico-moon, .time-btn .ico-rain, .is-night .time-btn .ico-sun, .is-rain .time-btn .ico-sun { display: none; }
.is-night .time-btn .ico-moon, .is-rain .time-btn .ico-rain { display: block; }
.is-rain .stage { background: #6b7688; }
.is-rain .feature-scene { background: linear-gradient(180deg, #3c4658, #98a3b3); }
.is-rain .fs-sun { opacity: 0.15; }
.is-rain .fs-hills .h1 { fill: #6c7a8e; }
.is-night .stage { background: #0b1640; }
/* the featured card's little scene follows the time of day */
.is-night .feature-scene { background: linear-gradient(180deg, #060d2b, #2a3d7a); }
.is-night .fs-sun { background: #f5f1da; box-shadow: 0 0 50px 14px rgba(200, 215, 255, 0.45); }
.is-night .fs-cloud { opacity: 0.35; }
.is-night .fs-hills .h1 { fill: #3a4a78; }

/* ---------------------------------------------------------------------- HUD */
.hud {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  opacity: 0; transform: translateY(-20px); pointer-events: none; transition: opacity 0.3s, transform 0.35s;
}
.is-playing .hud { opacity: 1; transform: none; pointer-events: auto; }
.hud-left, .hud-right { display: flex; gap: 8px; align-items: center; }
.hud-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px;
  border-radius: 14px; background: rgba(20, 14, 50, 0.85); border: 2px solid rgba(255, 255, 255, 0.16);
  font: 400 22px/1 var(--display); letter-spacing: 0.02em;
}
.hud-pill .lbl { font: 700 10px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hud-coins { color: var(--gold); }
.hud-coins.bump { animation: bump 0.35s; }
@keyframes bump { 40% { transform: scale(1.18); } }
.hud-speed span:first-child { min-width: 2.2ch; text-align: right; }
.hud-progress { --p: 0; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px; }
.hud-progress .track { position: relative; flex: 1; height: 12px; border-radius: 8px; background: rgba(20, 14, 50, 0.78); border: 2px solid rgba(255, 255, 255, 0.2); }
.hud-progress .fill { position: absolute; inset: 0; width: calc(var(--p) * 100%); border-radius: 6px; background: linear-gradient(90deg, var(--violet), var(--gold)); }
.hud-progress .marker {
  position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: var(--gold); border: 3px solid var(--outline);
}
.hud-progress .flag {
  width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--outline);
  background: conic-gradient(#fff 0 25%, var(--outline) 0 50%, #fff 0 75%, var(--outline) 0) 0 0 / 10px 10px;
}


@keyframes fadeout { to { opacity: 0; } }

.door-prompt {
  position: absolute; left: 50%; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 20px 10px 10px;
  transform: translateX(-50%); border-radius: 18px; border: 3px solid var(--outline);
  background: var(--gold); color: var(--outline); font: 400 22px/1 var(--display);
  box-shadow: 0 6px 0 var(--outline), 0 0 0 6px rgba(255, 200, 61, 0.3);
  animation: prompt-in 0.3s cubic-bezier(.2, 1.4, .4, 1), prompt-pulse 1.4s 0.3s infinite;
}
.door-prompt[hidden] { display: none; }
.door-prompt kbd { background: var(--outline); color: var(--gold); box-shadow: none; height: 34px; min-width: 34px; font-size: 16px; }
.door-prompt .dp-verb { text-transform: uppercase; }
.door-prompt b { font-weight: 400; }
@keyframes prompt-in { from { transform: translate(-50%, 30px) scale(0.8); opacity: 0; } }
@keyframes prompt-pulse { 50% { box-shadow: 0 6px 0 var(--outline), 0 0 0 12px rgba(255, 200, 61, 0.12); } }

.toast {
  position: absolute; left: 50%; top: 22%; z-index: 6; transform: translate(-50%, 0) scale(0.6);
  font: 400 clamp(28px, 5vw, 54px)/1 var(--display); color: #fff; letter-spacing: 0.02em; text-align: center;
  -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; text-shadow: 0 5px 0 var(--outline);
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.toast.show { animation: toast 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  25%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(1); }
}

/* wrong-house jump scare: the screen darkens and shakes while the five
   ghosts burst out from the middle. Ghosts keep their natural size: they
   only move and fade, they are never scaled. */
.spook {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgba(40, 10, 70, 0.35), rgba(8, 2, 20, 0.92) 75%);
  opacity: 0; visibility: hidden;
}
.spook img {
  position: absolute; left: 50%; top: 52%; width: auto; height: auto; max-width: none;
  opacity: 0; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 10px rgba(200, 220, 255, 0.8));
}
.spook.show { visibility: visible; animation: spook-bg 1.6s ease-out forwards, spook-shake 0.5s 0.05s linear; }
.spook.show img { animation: spook-fly 1.3s var(--d, 0s) cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes spook-bg { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0.85; } }
@keyframes spook-shake {
  10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } 100% { transform: none; }
}
@keyframes spook-fly {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  15% { opacity: 1; }
  40% { transform: translate(calc(-50% + var(--dx) * 0.55), calc(-50% + var(--dy) * 0.55)) }
  60% { transform: translate(calc(-50% + var(--dx) * 0.8), calc(-50% + var(--dy) * 0.8)) }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) }
}

/* touch controls: round buttons with a soft press. Held, a button shrinks a
   little and darkens; released, it eases back. No glow, no ripple. */
.pedals { display: none; }
.is-playing .pedals {
  position: absolute; inset: auto 0 0; z-index: 5; pointer-events: none;
  justify-content: space-between; align-items: flex-end;
  padding: 0 max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
/* the Brake / Gas / Jump buttons drive the car on every device: tapped on
   phones and tablets, clicked with the mouse on a PC */
.is-playing .pedals { display: flex; }
.pedal { cursor: pointer; }
.pedal-group { display: flex; align-items: flex-end; gap: 14px; }
.pedal {
  --c: #26c488; --c-down: #1a9a69;
  position: relative; pointer-events: auto;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: clamp(66px, 18vw, 82px); aspect-ratio: 1; padding: 0; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85); background: var(--c);
  color: #fff; font: 400 11px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 14px rgba(10, 6, 30, 0.28), inset 0 0 0 rgba(0, 0, 0, 0);
  transition: transform 0.25s cubic-bezier(.25, .8, .35, 1), background-color 0.25s ease, box-shadow 0.25s ease;
}
.pedal:focus, .pedal:focus-visible { outline: none; }
.pedal svg { width: 28px; height: 28px; fill: currentColor; transition: transform 0.25s cubic-bezier(.25, .8, .35, 1); }
.pedal-gas { --c: #26c488; --c-down: #1a9a69; }
.pedal-brake { --c: #ef3e78; --c-down: #c52a5d; }
.pedal-jump { --c: #f5a623; --c-down: #cf8710; width: clamp(58px, 16vw, 72px); margin-bottom: clamp(44px, 12vw, 58px); }
.pedal.down {
  transform: scale(0.94);
  background: var(--c-down);
  box-shadow: 0 2px 6px rgba(10, 6, 30, 0.22), inset 0 3px 8px rgba(0, 0, 0, 0.25);
  transition-duration: 0.12s;
}
.pedal.down svg { transform: scale(0.94); }

/* Gas and Brake use the pedal sprites and move like real hanging pedals.
   The pivot is the top of the arm: pressing swings the pad away from the
   driver, so it foreshortens toward the pivot, darkens as it tips away from
   the light, and its shadow tightens toward the floor. Releasing lets the
   return spring snap it back, a touch past rest, before it settles.
   Brake is firmer (less travel, slightly slower); gas is lighter. */
.pedal.is-foot, .pedal.is-foot.down {
  --travel: 0.8; --squeeze: 0.97; --press-time: 0.08s;
  width: clamp(64px, 17vw, 78px); aspect-ratio: auto; height: auto; padding: 0; gap: 7px;
  border: 0; border-radius: 16px; background: none; box-shadow: none; transform: none;
}
.pedal-brake.is-foot, .pedal-brake.is-foot.down { --travel: 0.87; --squeeze: 0.98; --press-time: 0.11s; }
.pedal.is-foot img {
  display: block; height: clamp(100px, 27vw, 128px); width: auto; pointer-events: none;
  -webkit-user-drag: none; user-select: none;
  transform-origin: 50% 0%;
  transform: scale(1, 1);
  filter: drop-shadow(0 9px 7px rgba(10, 6, 30, 0.42)) brightness(1);
  /* release: return spring, overshoots slightly then settles */
  transition: transform 0.42s cubic-bezier(.3, 1.6, .55, 1), filter 0.3s ease-out;
  will-change: transform;
}
/* the brake pedal sprite is shorter and wider, like a real brake pedal */
.pedal-brake.is-foot img { height: clamp(72px, 19vw, 92px); }
.pedal.is-foot.down img {
  transform: scale(var(--squeeze), var(--travel));
  filter: drop-shadow(0 3px 2px rgba(10, 6, 30, 0.5)) brightness(0.82);
  /* press: quick at first, then firming up against the spring */
  transition: transform var(--press-time) cubic-bezier(.25, .75, .35, 1), filter var(--press-time) ease-out;
}
.pedal-label {
  padding: 5px 10px; border-radius: 10px; background: var(--c); border: 2px solid rgba(255, 255, 255, 0.85);
  font: 400 11px/1 var(--display); letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 8px rgba(10, 6, 30, 0.25);
  transition: background-color 0.25s ease, transform 0.25s cubic-bezier(.25, .8, .35, 1);
}
.pedal.is-foot.down .pedal-label { background: var(--c-down); transform: scale(0.95); transition-duration: var(--press-time); }

/* ------------------------------------------------------------------ ticker */
.ticker {
  position: relative; z-index: 3; overflow: hidden; padding: 14px 0;
  background: var(--gold); color: var(--outline); border-block: 3px solid var(--outline);
  transform: rotate(-1.2deg) scale(1.02); margin-top: -10px;
}
.ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; animation: tick 38s linear infinite; }
.ticker span { font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.ticker i { width: 14px; height: 14px; background: var(--outline); transform: rotate(45deg); flex: none; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- sections */
.select, .controls { position: relative; padding: clamp(64px, 9vw, 120px) var(--gutter) 40px; max-width: 1320px; margin: 0 auto; }
.select { max-width: 1480px; }
.section-head { margin-bottom: 32px; }
.section-head h2 {
  margin: 10px 0 0; font: 400 clamp(40px, 6vw, 76px)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
  -webkit-text-stroke: 2px var(--outline); paint-order: stroke fill; text-shadow: 0 6px 0 #070514;
}
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s var(--delay, 0ms), transform 0.8s cubic-bezier(.2, .8, .2, 1) var(--delay, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* featured card */
.feature {
  position: relative; display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden;
  border-radius: 32px; border: 3px solid var(--outline);
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  box-shadow: 0 10px 0 #070514, 0 40px 80px rgba(0, 0, 0, 0.4);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.feature-scene { position: relative; min-height: 360px; overflow: hidden; background: linear-gradient(180deg, #5bb8f0, #bfe6fb); }
.fs-sun { position: absolute; right: 12%; top: 12%; width: 70px; height: 70px; border-radius: 50%; background: #fff6c9; box-shadow: 0 0 60px 20px rgba(255, 246, 201, 0.7); }
.fs-cloud { position: absolute; width: 150px; aspect-ratio: 200 / 106; background: url("../img/assets/cloud.png") center / contain no-repeat; animation: drift 30s linear infinite; }
.fs-cloud.c1 { top: 10%; left: -25%; }
.fs-cloud.c2 { top: 28%; left: -65%; width: 105px; opacity: 0.8; animation-duration: 44s; }
@keyframes drift { to { left: 120%; } }
.fs-hills { position: absolute; inset: auto 0 0; width: 100%; height: 75%; }
.fs-hills .h1 { fill: #9fb1cc; }
.fs-hills .h2 { fill: #3d3b52; stroke: #86c25a; stroke-width: 6; }
.fs-road { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #3d3b52; }
.fs-ride { position: absolute; left: 50%; bottom: 12%; width: min(62%, 440px); transform: translateX(-50%); }
.fs-ride .ride { width: 100%; }
.fs-ride .ride-body { animation: squat 1.1s ease-in-out infinite; }
.fs-ride .ride-wheel { animation: spin 0.9s linear infinite; }
@keyframes squat { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(3%) rotate(-1.2deg); } 60% { transform: translateY(-2%) rotate(0.8deg); } }
.feature:hover .fs-ride .ride-wheel { animation-duration: 0.35s; }
.fs-coin {
  position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--outline);
  background: radial-gradient(circle, #ffd84a 0 45%, #f2a900 47%); animation: coin 2.2s ease-in-out infinite;
}
.fs-coin.k1 { left: 14%; top: 38%; }
.fs-coin.k2 { left: 78%; top: 30%; animation-delay: -0.7s; }
.fs-coin.k3 { left: 88%; top: 50%; animation-delay: -1.4s; }
@keyframes coin { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-10px) scaleX(0.2); } }
.feature-info { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.badge {
  align-self: flex-start; margin: 0; padding: 7px 12px; border-radius: 10px;
  background: var(--pink); color: #fff; font: 700 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase;
}
.feature-info h3 { margin: 0; font: 400 clamp(38px, 4.4vw, 62px)/0.95 var(--display); text-transform: uppercase; color: var(--gold); -webkit-text-stroke: 2px var(--outline); paint-order: stroke fill; text-shadow: 0 5px 0 var(--outline); }
.feature-info > p { margin: 0; color: #dcd6fb; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 7px 11px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line); font: 700 12px/1 var(--body); color: #e8e4ff; }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.best { margin: 0 0 0 auto; color: var(--muted); font: 700 12px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.best b { display: block; margin-top: 6px; font: 400 24px/1 var(--display); letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }

/* game cards */
.card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.2vw, 48px); perspective: 1200px; }
.gcard {
  --rx: 0deg; --ry: 0deg; --mx: 50%;
  position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  border: 3px solid var(--outline); background: var(--panel);
  box-shadow: 0 8px 0 #070514, 0 0 0 0 var(--accent);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.25s ease-out, box-shadow 0.3s, opacity 0.7s var(--delay, 0ms);
}
.gcard.reveal:not(.in) { transform: translateY(34px); }
.gcard:hover, .gcard:focus-within { box-shadow: 0 8px 0 #070514, 0 0 0 4px var(--accent), 0 30px 60px rgba(0, 0, 0, 0.45); }
.gcard-media { position: relative; aspect-ratio: 4 / 3.6; overflow: hidden; background: #000; cursor: pointer; }
.gcard-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform 0.6s, opacity 0.4s; }
.gcard:hover .gcard-cover { transform: scale(1.06); }
.gcard-door {
  position: absolute; left: 14px; top: 14px; padding: 7px 11px; border-radius: 10px; border: 2px solid var(--outline);
  background: var(--gold); color: var(--outline); font: 400 15px/1 var(--display); text-transform: uppercase;
}
.gcard-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(400px circle at var(--mx) 0%, rgba(255, 255, 255, 0.28), transparent 45%);
}
.gcard:hover .gcard-shine { opacity: 1; }
.gcard-body { position: relative; display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 44px 20px 20px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-top: 4px solid var(--accent); }
.gcard-title { position: absolute; left: 16px; top: -46px; margin: 0; }
.gcard-logo { height: 78px; width: auto; max-width: 190px; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.4)); transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1); }
.gcard:hover .gcard-logo { transform: scale(1.08) rotate(-3deg); }
.gcard-genre { margin: 0; color: var(--accent); font: 700 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; filter: brightness(1.25); }
.gcard-blurb { margin: 0; color: #dcd6fb; font-size: 15px; flex: 1; }
.gcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 1320px; margin: 40px auto 0; padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--muted); font-size: 14px;
}
.foot p { margin: 0; flex: 1; min-width: 220px; }
.foot-brand img { height: 64px; width: auto; }
.foot a:not(.btn-ghost):not(.foot-brand) { color: var(--gold); }

/* contact */
.contact { padding: clamp(40px, 6vw, 80px) var(--gutter) 20px; max-width: 1320px; margin: 0 auto; }
.contact-card {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px);
  border-radius: 32px; border: 3px solid var(--outline);
  background: radial-gradient(600px 300px at 0% 0%, rgba(255, 200, 61, 0.14), transparent 60%), linear-gradient(135deg, var(--panel-2), var(--panel));
  box-shadow: 0 10px 0 #070514, 0 40px 80px rgba(0, 0, 0, 0.4);
}
.contact-intro h2 { margin: 10px 0 12px; font: 400 clamp(40px, 5.5vw, 68px)/0.95 var(--display); text-transform: uppercase; -webkit-text-stroke: 2px var(--outline); paint-order: stroke fill; text-shadow: 0 6px 0 #070514; }
.contact-intro > p { margin: 0 0 22px; color: #dcd6fb; max-width: 42ch; }
.contact-mail {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 12px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.14); text-decoration: none;
  font: 700 clamp(15px, 1.6vw, 18px)/1.2 var(--body); word-break: break-all; transition: border-color 0.2s, background 0.2s;
}
.contact-mail:hover { border-color: var(--gold); background: rgba(255, 200, 61, 0.1); }
.contact-mail small { display: block; margin-bottom: 4px; font: 700 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.contact-ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--gold); color: var(--outline); }
.contact-ico svg { width: 24px; height: 24px; }
.contact-form { display: grid; gap: 14px; align-content: start; }
.contact-form label { display: grid; gap: 6px; font: 700 12px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 13px 15px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 5, 24, 0.5); color: #fff; font: 400 16px/1.4 var(--body); letter-spacing: 0; text-transform: none; resize: vertical;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); background: rgba(8, 5, 24, 0.75); }
.contact-form [aria-invalid="true"] { border-color: var(--pink); }
.contact-form .btn-play { justify-self: start; margin-top: 4px; }
.contact-form .fine { margin: 0; font-size: 13px; color: var(--muted); }
.contact-form .fine.err { color: #ff9fbf; }

/* ------------------------------------------------------------------ modals */
.modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(8, 5, 24, 0.78);
  opacity: 0; transition: opacity 0.22s;
}
.modal.open { opacity: 1; }
.modal[hidden] { display: none; }
.modal-panel {
  position: relative; width: min(760px, 100%); max-height: calc(100svh - 32px); overflow: auto;
  border-radius: 30px; border: 3px solid var(--outline); background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: 0 12px 0 #070514, 0 40px 90px rgba(0, 0, 0, 0.6);
  transform: translateY(30px) scale(0.94); transition: transform 0.3s cubic-bezier(.2, 1.3, .4, 1);
}
.modal.open .modal-panel { transform: none; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.modal-x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 2px solid var(--line); background: rgba(255, 255, 255, 0.06); }
.modal-x svg { width: 20px; height: 20px; }

.door-panel { display: grid; grid-template-columns: 240px 1fr; }
.door-cover { background: #000; border-right: 4px solid var(--accent); }
.door-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.door-info { padding: 30px; }
.door-info .eyebrow { color: var(--accent); filter: brightness(1.25); }
.sr-title { margin: 12px 0; }
.sr-title img { height: 96px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, 0.4)); }
.door-info p { color: #dcd6fb; margin: 0; }
.door-info .fine { margin-top: 14px; font-size: 13px; color: var(--muted); }

.garage-panel { padding: 30px; width: min(880px, 100%); }
.garage-panel h2, .finish-panel h2 { margin: 8px 0 22px; font: 400 clamp(34px, 5vw, 50px)/1 var(--display); text-transform: uppercase; }
.garage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.garage-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px 16px;
  border-radius: 20px; border: 3px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.garage-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.1); }
.garage-card[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 200, 61, 0.12); }
.garage-card .ride-slot { width: 100%; height: 96px; display: grid; place-items: center; margin-bottom: 8px; }
.garage-card .ride { height: 100%; width: auto; max-width: 100%; }
.garage-card b { font: 400 22px/1 var(--display); }
.garage-card span:not(.ride-slot) { color: var(--muted); font-size: 13px; }
.garage-card kbd { position: absolute; top: 12px; right: 12px; }

.finish-panel { padding: 34px; text-align: center; width: min(560px, 100%); }
.finish-panel h2 { margin-bottom: 4px; color: var(--gold); font-size: clamp(50px, 9vw, 80px); -webkit-text-stroke: 3px var(--outline); paint-order: stroke fill; text-shadow: 0 6px 0 var(--outline); }
.finish-ride { margin: 0 0 18px; color: var(--muted); }
.badge-record { display: inline-block; margin: 0; padding: 8px 14px; border-radius: 12px; background: var(--pink); font: 400 18px/1 var(--display); text-transform: uppercase; animation: bump 0.6s 0.3s 3; }
.finish-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.finish-stats div { padding: 14px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); }
.finish-stats dt { font: 700 11px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.finish-stats dd { margin: 8px 0 0; font: 400 26px/1 var(--display); }
.finish-panel .modal-actions { justify-content: center; }

/* rides assembled from sprites */
.ride { position: relative; display: block; }
.ride img { position: absolute; display: block; max-width: none; }
.ride-body { z-index: 1; left: 0; }
.ride-wheel { z-index: 2; height: auto; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .card-row { grid-template-columns: repeat(4, minmax(260px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 22px; margin: 0 -4px; scrollbar-width: thin; }
  .gcard { scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature-scene { min-height: 260px; }
  .hud { grid-template-columns: auto auto; }
  .hud-progress { grid-column: 1 / -1; grid-row: 2; }
  .hud-right { justify-self: end; }
}
/* phones and portrait tablets: the hero docks to the bottom, the truck drives above it */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .stage { min-height: 620px; }
  .stage-scrim { background: linear-gradient(0deg, rgba(15, 11, 36, 0.95) 0%, rgba(15, 11, 36, 0.6) 45%, transparent 70%); }
  .hero { justify-content: flex-end; padding: 80px var(--gutter) 24px; }
  .hero-stats, .scroll-cue { display: none; }
}
@media (max-width: 760px) {
  .menu { display: none; }
  .brand-logo { height: 46px; }
  .topbar.solid .brand-logo { height: 40px; }
  .contact-card { grid-template-columns: 1fr; border-radius: 26px; }
  .hero-card { padding: 20px; border-radius: 24px; }
  .title { flex-direction: row; flex-wrap: wrap; gap: 0 0.25em; font-size: clamp(44px, 13vw, 64px); margin: 10px 0 8px; }
  .lede { margin-bottom: 16px; font-size: 14.5px; }
  .ride-picker { margin-top: 16px; gap: 8px; }
  .ride-picker .ride-slot { height: 34px; }
  .ride-name { font-size: 11px; }
  .hero-stats, .scroll-cue, .btn-play .hint-kbd { display: none; }
  .btn-play { padding: 11px 20px 11px 11px; }
  .btn-play-icon { width: 36px; height: 36px; }
  .hud { gap: 8px; }
  .hud-pill { height: 40px; padding: 0 10px; font-size: 18px; }
  .hud-pill .lbl { display: none; }
  .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .hud-right .icon-btn[data-action="mute"] { display: none; }
  .door-prompt { bottom: auto; top: 118px; }
  .toast { top: 30%; }
  .card-row { grid-template-columns: repeat(4, 80%); gap: 20px; }
  .door-panel { grid-template-columns: 1fr; }
  .door-cover { max-height: 200px; border-right: 0; border-bottom: 4px solid var(--accent); overflow: hidden; }
  .door-info { padding: 22px; }
  .sr-title img { height: 72px; }
  .garage-panel { padding: 22px; }
  .garage-grid { grid-template-columns: 1fr; }
  .garage-card { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; padding: 14px 44px 14px 14px; }
  .garage-card .ride-slot { grid-row: 1 / 3; width: 112px; height: auto; margin: 0; }
  .garage-card .ride { width: 100%; height: auto; }
  .garage-card b { font-size: 20px; }
  .finish-panel { padding: 24px 18px; }
  .finish-stats dd { font-size: 20px; }
  .best { margin-left: 0; }
}
@media (max-width: 440px) {
  .hud-speed { display: none; }
  /* no room for the sun/moon button on small phones: Morning / Night is
     chosen on the title card there */
  .hud .time-btn { display: none; }
}
@media (max-width: 380px) {
  .coin-count { font-size: 17px; padding: 6px 10px 6px 7px; }
  .hud-left .hud-pill:nth-child(3) { display: none; }   /* the timer; coins stay */
}
@media (max-height: 520px) and (orientation: landscape) {
  .stage { min-height: 100svh; }
  .hero { padding-top: 70px; padding-bottom: 12px; }
  .hero-card { padding: 16px 20px; }
  .title { font-size: 44px; flex-direction: row; gap: 0 0.25em; margin: 6px 0; }
  .lede, .hero-stats, .scroll-cue { display: none; }
  .ride-picker { margin-top: 12px; }
  .pedal { width: 62px; }
  .pedal.is-foot img { height: 84px; }
  .pedal-brake.is-foot img { height: 60px; }
  .pedal-jump { width: 56px; margin-bottom: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ticker-track { animation: none; }
}

/* spooked panel */
.fail-panel { background: linear-gradient(160deg, #2c1848, #150c2a); }
.fail-panel h2 { color: #c9b8ff; }
/* the ghost at its natural size: never scaled */
.fail-ghost { width: auto; height: auto; max-width: none; margin: 0 auto 10px; animation: float 2.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.finish-stats.two { grid-template-columns: repeat(2, 1fr); }

/* ==========================================================================
   INTRO SCREEN
   The title floats over the live game on a soft cinematic gradient instead
   of sitting in a box, so the night scene stays visible. Left: title, Play,
   ride + time-of-day setup. Bottom: the arcade doors as quick-start chips
   and the player's stats. Phones get a compact bottom sheet with the truck
   visible above it.
   ========================================================================== */
.stage-scrim {
  background:
    linear-gradient(90deg, rgba(8, 6, 26, 0.86) 0%, rgba(8, 6, 26, 0.62) 28%, rgba(8, 6, 26, 0.12) 52%, transparent 64%),
    linear-gradient(0deg, rgba(8, 6, 26, 0.92) 0%, rgba(8, 6, 26, 0.35) 16%, transparent 30%),
    linear-gradient(180deg, rgba(8, 6, 26, 0.5) 0%, transparent 14%);
}
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto;
  justify-content: stretch; align-items: center; gap: 22px;
  padding: 104px var(--gutter) 34px;
}
/* the hero overlay lets clicks through to the game; its panels take them back */
.hero-main { width: min(420px, 100%); pointer-events: auto; }
.hero-main > *, .hero-doors { animation: intro-rise 0.8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes intro-rise { from { opacity: 0; transform: translateY(22px); } }

.presents {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font: 700 12px/1 var(--body); letter-spacing: 0.3em; text-transform: uppercase; color: #cfc6ff;
}
.presents span { width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), transparent); }

.title { position: relative; margin: 10px 0 18px; font-size: clamp(46px, 4.8vw, 74px); line-height: 0.84; width: max-content; max-width: 100%; }
.title span.t1, .title span.t2 { -webkit-text-stroke: 3px var(--outline); text-shadow: 0 7px 0 var(--outline), 0 22px 40px rgba(0, 0, 0, 0.45); }
.title .t2 { color: var(--gold); background: none; -webkit-text-fill-color: currentColor; }
.title .title-badge {
  position: absolute; right: -0.2em; bottom: 0.42em; transform: rotate(-7deg);
  padding: 7px 12px 6px; border-radius: 10px; border: 3px solid var(--outline);
  background: var(--pink); color: #fff; font: 400 clamp(13px, 1.2vw, 17px)/1 var(--display);
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 5px 0 var(--outline);
  animation: badge-wiggle 4s ease-in-out 1.6s infinite;
}
@keyframes badge-wiggle { 0%, 88%, 100% { transform: rotate(-7deg); } 92% { transform: rotate(-2deg) scale(1.06); } 96% { transform: rotate(-10deg); } }

/* desktop keeps just the title: the tagline is dropped so the truck gets the space */
.hero .lede { display: none; }
.lede { margin: 0 0 20px; max-width: 38ch; color: #e6e0ff; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }

.hero-actions { gap: 16px; }
.btn-play.xl { padding: 11px 22px 11px 11px; font-size: clamp(18px, 1.6vw, 22px); }
.btn-play.xl .btn-play-icon { width: 38px; height: 38px; }
.btn-play.xl::after {
  content: ""; position: absolute; inset: -3px; border-radius: 20px; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.55); animation: play-pulse 2.4s ease-out infinite;
}
@keyframes play-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 61, 0.5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 200, 61, 0); } }
.hero-actions .btn-ghost { background: rgba(12, 9, 34, 0.55); }

/* ride + time-of-day panel */
.hero-setup {
  margin-top: 18px; padding: 10px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(34, 24, 84, 0.72), rgba(14, 10, 40, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 50px rgba(5, 3, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; }
.setup-label { font: 700 11px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: #cfc6ff; }
.hero-setup .time-toggle { margin-top: 0; padding: 3px; border-width: 1px; border-radius: 12px; }
.hero-setup .time-toggle button { padding: 7px 11px; font-size: 12px; border-radius: 9px; }
.hero-setup .ride-picker { margin-top: 0; gap: 10px; }
.hero-setup .ride-picker button {
  position: relative; gap: 3px; padding: 12px 8px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s cubic-bezier(.2, .8, .3, 1), border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.hero-setup .ride-picker button::before {                     /* a little spotlight under the car */
  content: ""; position: absolute; left: 18%; right: 18%; top: 32px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.45), transparent); pointer-events: none;
}
.hero-setup .ride-picker button:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); }
.hero-setup .ride-picker button[aria-pressed="true"] {
  border-color: var(--gold); background: linear-gradient(180deg, rgba(255, 200, 61, 0.2), rgba(255, 200, 61, 0.06));
  box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.12), 0 10px 24px rgba(0, 0, 0, 0.35);
}
.hero-setup .ride-slot { height: 34px; position: relative; z-index: 1; }
.ride-name { font: 400 14px/1.1 var(--display); letter-spacing: 0.02em; color: #fff; }
.ride-tag { font: 700 10px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: #a79fd6; }
.ride-picker button[aria-pressed="true"] .ride-tag { color: var(--gold); }

/* bottom bar: arcade doors + stats */
.hero-doors {
  pointer-events: auto; display: flex; align-items: center; gap: 18px; justify-self: start; max-width: 100%;
  padding: 10px 12px 10px 18px; border-radius: 22px;
  background: rgba(12, 9, 34, 0.72); border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(5, 3, 20, 0.45);
}
.doors-label { display: flex; flex-direction: column; gap: 4px; margin: 0; white-space: nowrap; }
.doors-label b { font: 400 18px/1 var(--display); letter-spacing: 0.02em; color: #fff; }
.doors-label span { display: none; }
.door-chips { display: flex; gap: 8px; }
.door-chip {
  --accent: var(--gold);
  position: relative; display: grid; place-items: center; width: 80px; height: 46px; padding: 6px 8px;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05);
  transition: transform 0.2s cubic-bezier(.2, .8, .3, 1), border-color 0.2s, background 0.2s;
}
.door-chip img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35)); }
.door-chip:hover, .door-chip:focus-visible { transform: translateY(-3px); border-color: var(--accent); background: rgba(255, 255, 255, 0.1); }
.door-no {
  position: absolute; left: -6px; top: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--outline); border: 2px solid var(--outline); font: 400 12px/1 var(--display);
}
.hero-doors .hero-stats {
  position: static; display: flex; gap: 8px; margin: 0 0 0 6px; padding: 0 0 0 16px; border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-doors .hero-stats li {
  display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  min-width: 0; padding: 6px 10px; border-radius: 12px; border: 0; background: none;
}
.hero-doors .hero-stats li > :first-child { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--gold); }
.hero-doors .hero-stats b { font-size: 20px; text-align: left; }
.hero-doors .hero-stats span { font-size: 9.5px; text-align: left; }
.hero .scroll-cue { bottom: 22px; left: auto; right: var(--gutter); margin: 0; }

/* medium desktops: tighten the bottom bar */
@media (max-width: 1240px) {
  .door-chip { width: 78px; }
  .doors-label span { display: none; }
}
@media (max-width: 1060px) and (orientation: landscape) {
  .hero-doors .hero-stats { display: none; }
}

/* phones and portrait tablets: compact bottom sheet, truck visible above */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .stage-scrim { background: linear-gradient(0deg, rgba(8, 6, 26, 0.97) 0%, rgba(8, 6, 26, 0.88) 26%, rgba(8, 6, 26, 0.3) 40%, transparent 50%); }
  .hero { grid-template-rows: 1fr auto; justify-content: stretch; align-items: end; padding: 80px var(--gutter) 18px; gap: 14px; }
  .hero-main { width: min(620px, 100%); }
  .hero .scroll-cue { display: none; }
}
@media (orientation: portrait) and (min-width: 761px) and (max-width: 1100px) {
  .hero-doors { justify-self: stretch; }
  .door-chips { flex: 1; }
  .door-chip { flex: 1; width: auto; }
}
@media (max-width: 760px) {
  .presents { display: none; }
  .title { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 0.22em; font-size: clamp(34px, 10vw, 46px); margin: 0 0 10px; width: auto; }
  .title span.t1, .title span.t2 { -webkit-text-stroke: 2px var(--outline); text-shadow: 0 5px 0 var(--outline); }
  .title .title-badge { position: relative; right: auto; bottom: auto; align-self: center; margin-left: 4px; font-size: 11px; padding: 5px 8px 4px; border-width: 2px; box-shadow: 0 3px 0 var(--outline); }
  .lede { display: none; }
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .btn-play.xl { flex: 1; justify-content: center; padding: 9px 16px 9px 9px; font-size: 18px; border-radius: 15px; box-shadow: 0 5px 0 var(--outline); }
  .btn-play.xl .btn-play-icon { width: 32px; height: 32px; border-radius: 10px; }
  .btn-play.xl .btn-play-icon svg { width: 16px; height: 16px; }
  .hero-actions .btn-ghost { padding: 10px 12px; font-size: 12.5px; border-radius: 13px; }
  .hero-setup { margin-top: 12px; padding: 8px; border-radius: 16px; }
  .setup-head { margin-bottom: 8px; }
  .setup-label { font-size: 10px; letter-spacing: 0.14em; }
  .hero-setup .ride-picker { gap: 7px; }
  .hero-setup .ride-picker button { padding: 6px 4px 5px; border-radius: 12px; }
  .hero-setup .ride-picker button::before { top: 26px; height: 8px; }
  .hero-setup .ride-slot { height: 26px; }
  .ride-name { font-size: 11px; }
  .hero-setup .time-toggle button { padding: 6px 9px; font-size: 11px; }
  .hero-setup .time-toggle button svg { width: 13px; height: 13px; }
  .ride-tag { display: none; }
  .hero-doors { display: none; }
}
@media (max-width: 370px) {
  .lede { display: none; }
  .hero-actions .btn-ghost { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero { padding-top: 64px; padding-bottom: 10px; gap: 8px; }
  .title { font-size: 44px; flex-direction: row; gap: 0 0.22em; margin: 6px 0; width: auto; }
  .title .title-badge, .lede, .hero-doors, .hero .scroll-cue { display: none; }
  .hero-setup { margin-top: 10px; padding: 8px; }
  .hero-setup .ride-slot { height: 30px; }
  .ride-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-main > *, .hero-doors, .title-badge, .btn-play.xl::after { animation: none !important; }
}

/* desktop compact intro: sticker sits under the title, actions stay on one row */
@media (min-width: 761px) {
  .title { display: flex; flex-direction: column; }
  .title .title-badge { position: relative; right: auto; bottom: auto; align-self: flex-start; margin: 14px 0 0 4px; }
  .hero-actions { flex-wrap: nowrap; gap: 12px; }
  .hero-actions .btn-ghost { padding: 11px 16px; font-size: 14px; white-space: nowrap; }
  .btn-play.xl { white-space: nowrap; }
  .btn-play.xl .hint-kbd { display: none; }
}

/* 3-2-1-GO countdown: bigger, punchier toast */
.toast.count { top: 30%; font-size: clamp(64px, 12vw, 140px); -webkit-text-stroke: 5px var(--outline); text-shadow: 0 8px 0 var(--outline), 0 0 40px rgba(255, 200, 61, 0.6); color: var(--gold); }
.toast.count.show { animation: count-pop 0.6s cubic-bezier(.2, 1.5, .4, 1) forwards; }
@keyframes count-pop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(2.2); }
  25% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
}

/* three theme buttons: on small phones they take the whole header row */
.setup-label { white-space: nowrap; }
@media (max-width: 480px) {
  .setup-label { display: none; }
  .hero-setup .time-toggle { flex: 1; display: flex; }
  .hero-setup .time-toggle button { flex: 1; justify-content: center; }
}

/* ==========================================================================
   CLEAN HEADINGS: no heavy outline stroke. A thin, soft drop shadow keeps the
   text readable over the game scene while the letters stay crisp.
   ========================================================================== */
.title span, .title span.t1, .title span.t2,
.section-head h2, .feature-info h3, .contact-intro h2, .finish-panel h2 {
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 3px 0 rgba(10, 6, 30, 0.9), 0 10px 26px rgba(0, 0, 0, 0.4) !important;
}
.toast, .toast.count {
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 3px 0 rgba(10, 6, 30, 0.9), 0 0 22px rgba(0, 0, 0, 0.55) !important;
}
.toast.count { text-shadow: 0 4px 0 rgba(10, 6, 30, 0.9), 0 0 36px rgba(255, 200, 61, 0.55) !important; }
@media (max-width: 760px) {
  .title span, .title span.t1, .title span.t2 { text-shadow: 0 2px 0 rgba(10, 6, 30, 0.9), 0 6px 16px rgba(0, 0, 0, 0.45) !important; }
}

/* PC (mouse): all three controls together on the right: Brake, Jump, Gas */
@media (hover: hover) and (pointer: fine) {
  .is-playing .pedals { justify-content: flex-end; gap: 16px; }
}

/* ==========================================================================
   MOTION: fast, springy, car-flavoured tweens. Transforms and opacity only,
   so they stay light; all of it switches off under prefers-reduced-motion.
   ========================================================================== */
:root {
  --zoom: cubic-bezier(.16, 1.2, .3, 1);      /* quick launch, small overshoot */
  --snap: cubic-bezier(.2, 1.5, .35, 1);      /* springy snap */
}

/* scroll reveals: things drive in from the left, skewed and blurred, then snap */
.reveal {
  opacity: 0; transform: translateX(-70px) skewX(-10deg); filter: blur(6px);
  transition: opacity 0.45s ease-out var(--delay, 0ms), transform 0.6s var(--zoom) var(--delay, 0ms), filter 0.45s ease-out var(--delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.gcard.reveal:not(.in) { transform: translateX(-70px) skewX(-10deg); }

/* section titles: a speed streak zips in underneath */
.section-head h2::after, .contact-intro h2::after {
  content: ""; display: block; width: 110px; height: 5px; margin-top: 14px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--pink) 70%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--zoom) 0.25s;
}
.section-head.in h2::after, .contact-card.in h2::after { transform: scaleX(1); }

/* scroll speed bar at the very top */
.scroll-meter {
  position: fixed; left: 0; top: 0; z-index: 70; height: 3px; width: 100%; pointer-events: none;
  background: linear-gradient(90deg, var(--pink), var(--gold)); box-shadow: 0 0 10px rgba(255, 200, 61, 0.7);
  transform: scaleX(var(--scroll, 0)); transform-origin: left;
}
.is-playing .scroll-meter { opacity: 0; }

/* Play buttons: a light streak shoots across on hover, the arrow pushes forward */
.btn-play {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%) -160% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #ffe07a, var(--gold) 55%);
  transition: transform 0.18s var(--snap), box-shadow 0.18s, filter 0.2s, background-position 0s;
}
.btn-play:hover { background-position: 160% 0, 0 0; transition: transform 0.18s var(--snap), box-shadow 0.18s, filter 0.2s, background-position 0.55s ease-out; transform: translateY(-3px) skewX(-4deg); }
.btn-play:active { transform: translateY(5px) scale(0.97); }
.btn-play-icon svg { transition: transform 0.25s var(--snap); }
.btn-play:hover .btn-play-icon svg { transform: translateX(4px) scale(1.12); }
.btn-play:hover .btn-play-icon { animation: rev 0.35s linear 2; }
@keyframes rev { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--zoom);
}
.btn-ghost:hover::after { transform: scaleX(1); }



/* game cards: lunge forward on hover */
.gcard { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift, 0px)) scale(var(--sc, 1)); transition: transform 0.3s var(--zoom), box-shadow 0.3s, opacity 0.45s ease-out var(--delay, 0ms), filter 0.45s ease-out var(--delay, 0ms); }
.gcard.in:hover, .gcard.in:focus-within { --lift: -10px; --sc: 1.025; }
.gcard .btn-play.sm .btn-play-icon { transition: transform 0.3s var(--snap); }
.gcard:hover .btn-play.sm .btn-play-icon { transform: scale(1.12) rotate(-6deg); }
.feature { transition: transform 0.35s var(--zoom), box-shadow 0.35s, opacity 0.45s ease-out, filter 0.45s ease-out; }
.feature.in:hover { transform: translateY(-6px); }
.door-chip:hover img { animation: rev 0.3s linear 2; }

/* picking a ride: it revs (hop + spinning wheels) */
.ride.rev .ride-body { animation: ride-hop 0.55s var(--snap); }
.ride.rev .ride-wheel { animation: wheel-spin 0.55s cubic-bezier(.3, 0, .2, 1); }
@keyframes ride-hop { 30% { transform: translateY(-14%) rotate(-5deg); } 60% { transform: translateY(2%) rotate(1deg); } }
@keyframes wheel-spin { to { transform: rotate(720deg); } }
.ride-picker button[aria-pressed="true"], .garage-card[aria-pressed="true"] { animation: picked 0.35s var(--snap); }
@keyframes picked { 40% { transform: scale(1.07); } }

/* starting a run: warp speed burst */
.warp-fx {
  position: absolute; inset: -30%; z-index: 9; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0.6) 0deg 0.8deg, transparent 0.8deg 7deg);
  -webkit-mask: radial-gradient(circle, transparent 16%, #000 55%); mask: radial-gradient(circle, transparent 16%, #000 55%);
}
.warp-fx.go { animation: warp 0.6s cubic-bezier(.2, .7, .3, 1); }
@keyframes warp { 0% { opacity: 0; transform: scale(0.55) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7) rotate(8deg); } }
.hero, .is-playing .hero { transform: none; filter: none; }

/* HUD drops in, pedals slide up */
.is-playing .hud-left > *, .is-playing .hud-right > *, .is-playing .hud-progress { animation: hud-drop 0.5s var(--snap) backwards; }
.is-playing .hud-left > :nth-child(2) { animation-delay: 60ms; } .is-playing .hud-left > :nth-child(3) { animation-delay: 120ms; }
.is-playing .hud-progress { animation-delay: 150ms; }
.is-playing .hud-right > :nth-child(1) { animation-delay: 180ms; } .is-playing .hud-right > :nth-child(2) { animation-delay: 220ms; }
.is-playing .hud-right > :nth-child(3) { animation-delay: 260ms; } .is-playing .hud-right > :nth-child(4) { animation-delay: 300ms; }
.is-playing .hud-right > :nth-child(5) { animation-delay: 340ms; }
@keyframes hud-drop { from { opacity: 0; transform: translateY(-40px) scale(0.8); } }
.is-playing .pedal-group > * { animation: pedal-up 0.5s var(--snap) backwards 0.25s; }
.is-playing .pedal-group > :nth-child(2) { animation-delay: 0.33s; }
@keyframes pedal-up { from { opacity: 0; transform: translateY(80px); } }

/* speedometer redline near top speed */
.hud-speed { transition: color 0.2s, box-shadow 0.2s, border-color 0.2s; }
.hud-speed.redline { color: #ff6b8b; border-color: rgba(255, 79, 139, 0.8); box-shadow: 0 0 16px rgba(255, 79, 139, 0.5); }

/* theme switch: a light wipe sweeps across the scene */
.theme-wipe {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  transform: translateX(-110%);
}
.theme-wipe.go { animation: wipe 0.55s cubic-bezier(.5, 0, .3, 1); }
@keyframes wipe { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(110%); } }

/* popups slam in with a spring; finish stats pop in one by one */
.modal-panel { transform: translateY(50px) scale(0.86) rotate(-2deg); transition: transform 0.45s var(--snap); }
.modal.open .modal-panel { transform: none; }
.modal.open .finish-stats > div { animation: stat-pop 0.45s var(--snap) backwards; }
.modal.open .finish-stats > div:nth-child(1) { animation-delay: 0.15s; }
.modal.open .finish-stats > div:nth-child(2) { animation-delay: 0.25s; }
.modal.open .finish-stats > div:nth-child(3) { animation-delay: 0.35s; }
@keyframes stat-pop { from { opacity: 0; transform: translateY(20px) scale(0.7); } }

/* intro: the MONSTER HILLS title is shown as is, with no entrance effect */
.hero-main > .title, .title .t1, .title .t2 { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; filter: none; }
  .warp-fx, .theme-wipe, .scroll-meter { display: none; }
}

/* ==========================================================================
   PERFORMANCE: endless animations only run where you can see them, and the
   pulses animate transform/opacity (handled by the GPU) instead of
   box-shadow (a full repaint every frame).
   ========================================================================== */
.anim-paused, .anim-paused *, .anim-paused *::before, .anim-paused *::after { animation-play-state: paused !important; }
.is-playing .hero *, .is-playing .hero *::before, .is-playing .hero *::after { animation: none !important; }

.btn-play.xl::after {
  inset: -3px; border-radius: 20px; border: 3px solid rgba(255, 200, 61, 0.7); box-shadow: none;
  animation: play-ring 2.4s ease-out infinite;
}
@keyframes play-ring { 0% { transform: scale(1); opacity: 0.8; } 70%, 100% { transform: scale(1.1, 1.35); opacity: 0; } }

.live-dot { position: relative; box-shadow: none; animation: none; }
.live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint);
  animation: live-ring 1.8s ease-out infinite;
}
@keyframes live-ring { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }


/* Featured card scene, cheap to animate: clouds drift with transform (no
   layout), and Night / Rain darken the scene with one static tint layer
   instead of filters on the moving truck (a filter over animated content is
   recalculated every frame). */
.fs-cloud { left: 0 !important; animation: drift-x 30s linear infinite; will-change: transform; }
.fs-cloud.c1 { transform: translateX(-160px); }
.fs-cloud.c2 { animation-duration: 44s; animation-delay: -18s; }
@keyframes drift-x { from { transform: translateX(-180px); } to { transform: translateX(min(1100px, 110vw)); } }
.fs-ride .ride-body, .fs-ride .ride-wheel { will-change: transform; }
.feature-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: transparent; transition: background 0.3s; }
.is-night .feature-scene::after { background: rgba(8, 14, 48, 0.38); }
.is-rain .feature-scene::after { background: rgba(40, 50, 70, 0.28); }
.fs-sun { z-index: 1; }
.is-night .fs-cloud { opacity: 0.45; }
.is-rain .fs-cloud { opacity: 0.7; }

/* ==========================================================================
   TOP MENU: a dashboard-style bar. A lit "glider" slides between items on
   hover (springy) and rests on the section in view; items carry icons with
   their own little motion, speed streaks trail on hover, and a click gives a
   quick press with a burst ring. Play is a gold racing button.
   ========================================================================== */
.menu {
  position: relative; gap: 4px; padding: 6px; border-radius: 20px;
  background:
    linear-gradient(rgba(14, 10, 34, 0.86), rgba(14, 10, 34, 0.86)) padding-box,
    linear-gradient(120deg, rgba(255, 200, 61, 0.55), rgba(255, 79, 139, 0.35) 40%, rgba(138, 92, 255, 0.35) 70%, rgba(255, 200, 61, 0.45)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 10px 30px rgba(5, 3, 20, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.menu-glider {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: var(--gw, 0px); border-radius: 14px; pointer-events: none;
  transform: translateX(var(--gx, 0px)); opacity: var(--go, 0);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 18px rgba(255, 200, 61, 0.18);
  transition: transform 0.42s cubic-bezier(.2, 1.4, .35, 1), width 0.42s cubic-bezier(.2, 1.4, .35, 1), opacity 0.25s;
}
.menu-glider::after {                        /* the glowing brake-light strip under the lit item */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 3px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--pink)); box-shadow: 0 0 8px rgba(255, 200, 61, 0.8);
}
.menu-chip {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px;
  font: 800 13px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: #cfc8f5; overflow: hidden; text-decoration: none;
  transition: color 0.25s, transform 0.2s var(--snap);
}
.menu-chip:hover, .menu-chip.is-active, .menu-chip:focus-visible { background: none; color: #fff; }
.menu-chip .mc-text { transition: transform 0.3s var(--zoom); }
.menu-chip:hover .mc-text { transform: translateX(3px); }
.mc-icon { display: grid; place-items: center; width: 18px; height: 18px; }
.mc-icon svg { width: 18px; height: 18px; fill: currentColor; transition: transform 0.35s var(--snap); }
.menu-chip[data-spy="games"]:hover .mc-icon svg { animation: mc-wiggle 0.5s var(--snap); }
.menu-chip[data-spy="controls"]:hover .mc-icon svg { transform: rotate(-35deg); }
.menu-chip[data-spy="contact"]:hover .mc-icon svg { transform: translateY(-2px) scale(1.15); }
@keyframes mc-wiggle { 25% { transform: rotate(-14deg) scale(1.1); } 55% { transform: rotate(10deg) scale(1.1); } 80% { transform: rotate(-4deg); } }
/* speed streaks trailing behind the text on hover */
.menu-chip:not(.is-hot)::before {
  content: ""; position: absolute; left: 6px; top: 50%; width: 14px; height: 10px; margin-top: -5px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.9)) 0 0 / 100% 2px no-repeat,
              linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.6)) 3px 4px / 100% 2px no-repeat,
              linear-gradient(90deg, transparent, rgba(255, 200, 61, 0.9)) 0 8px / 100% 2px no-repeat;
  opacity: 0; transform: translateX(10px) scaleX(0.3);
}
.menu-chip:not(.is-hot):hover::before { animation: mc-streak 0.45s ease-out; }
@keyframes mc-streak { 0% { opacity: 0; transform: translateX(14px) scaleX(0.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(-8px) scaleX(1.1); } }

/* Play: gold racing button with stripes and a periodic light sweep */
.menu-chip.is-hot {
  color: var(--outline); margin-right: 4px; padding-right: 18px;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat,
    repeating-linear-gradient(115deg, transparent 0 16px, rgba(27, 32, 51, 0.12) 16px 22px),
    linear-gradient(180deg, #ffe07a, var(--gold));
  box-shadow: 0 4px 0 #b77b00, 0 6px 16px rgba(255, 200, 61, 0.35);
  animation: mc-sweep 3.6s ease-in-out infinite;
}
.menu-chip.is-hot:hover { color: var(--outline); transform: translateY(-2px); box-shadow: 0 6px 0 #b77b00, 0 10px 22px rgba(255, 200, 61, 0.5); }
.menu-chip.is-hot:hover .mc-icon svg { transform: translateX(3px) scale(1.15); }
@keyframes mc-sweep { 0%, 70% { background-position: -150% 0, 0 0, 0 0; } 100% { background-position: 150% 0, 0 0, 0 0; } }

/* click: quick press and a burst ring */
.menu-chip:active { transform: scale(0.93); }
.menu-chip.is-hot:active { transform: translateY(3px) scale(0.96); box-shadow: 0 1px 0 #b77b00; }
.menu-chip .mc-burst {
  position: absolute; left: var(--bx, 50%); top: var(--by, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  border: 2px solid rgba(255, 200, 61, 0.9); pointer-events: none; animation: mc-burst 0.5s ease-out forwards;
}
.menu-chip.is-hot .mc-burst { border-color: rgba(255, 255, 255, 0.95); }
@keyframes mc-burst { to { transform: scale(9); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .menu-glider { transition: none; }
  .menu-chip.is-hot { animation: none; }
}

/* ==========================================================================
   DOOR PROMPT: a clean dark card: gold door icon, a small label over the
   game name, and a keycap hint (E on PC, Tap on touch). Replaces the old
   gold slab with a heavy outline.
   ========================================================================== */
.door-prompt {
  display: inline-flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px;
  background: linear-gradient(135deg, rgba(34, 26, 78, 0.94), rgba(16, 12, 40, 0.96));
  color: #fff; font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 14px 34px rgba(5, 3, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: none;
  transition: transform 0.2s var(--snap), border-color 0.2s, box-shadow 0.2s;
}
.door-prompt.pop { animation: dp-in 0.45s var(--snap); }
@keyframes dp-in { from { opacity: 0; transform: translate(-50%, 24px) scale(0.9); } }
.door-prompt:hover { transform: translate(-50%, -3px); border-color: rgba(255, 200, 61, 0.55); box-shadow: 0 18px 40px rgba(5, 3, 20, 0.55), 0 0 0 4px rgba(255, 200, 61, 0.12); }
.door-prompt:active { transform: translate(-50%, 1px) scale(0.97); }
.dp-icon {
  position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: linear-gradient(180deg, #ffe07a, var(--gold)); color: var(--outline);
}
.dp-icon svg { width: 22px; height: 22px; fill: currentColor; }
.dp-icon::after {
  content: ""; position: absolute; inset: -4px; border-radius: 16px; border: 2px solid rgba(255, 200, 61, 0.6);
  animation: dp-ring 1.6s ease-out infinite;
}
@keyframes dp-ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
.dp-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.door-prompt .dp-verb {
  font: 700 10px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: #bdb4ea;
}
.door-prompt b {
  font: 800 17px/1.1 var(--body); letter-spacing: 0.01em; color: #fff; white-space: nowrap;
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis;
}
.dp-key {
  display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; margin-left: 4px; border-radius: 9px; flex: none;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-bottom-width: 3px;
  font: 800 13px/1 var(--body); color: #fff; letter-spacing: 0.04em;
}
.dp-key-touch { display: none; font-size: 11px; text-transform: uppercase; }
@media (hover: none) and (pointer: coarse) { .dp-key-pc { display: none; } .dp-key-touch { display: inline; } }
/* haunted door: same card, purple accent, mystery name */
.door-prompt.is-mystery .dp-icon { background: linear-gradient(180deg, #b79cff, #7a55d8); color: #1a1033; }
.door-prompt.is-mystery .dp-icon::after { border-color: rgba(183, 156, 255, 0.6); }
.door-prompt.is-mystery b { letter-spacing: 0.3em; color: #d8ccff; }

/* Russo One runs wider: keep ride names on one line */
.ride-name { white-space: nowrap; font-size: 12.5px; letter-spacing: 0; }
@media (max-width: 760px) { .ride-name { font-size: 11px; } }

/* four rides */
.ride-picker, .hero-setup .ride-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ride-picker button { min-width: 0; }
.ride-name { font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.garage-grid { grid-template-columns: repeat(2, 1fr); }
.hero-main { width: min(520px, 100%); }
@media (max-width: 760px) { .garage-grid { grid-template-columns: 1fr; } }

/* car previews fit their tile both ways: a long car (Red Classic) shrinks
   to the tile's width instead of poking out */
.ride-slot { container-type: size; }
.ride-slot .ride, .ride-picker .ride, .garage-card .ride {
  width: auto; max-width: none; height: min(100%, calc(100cqw / var(--ar, 2)));
}
@media (max-width: 760px) { .ride-name { font-size: 9px; letter-spacing: -0.02em; } .hero-setup .ride-picker button { padding-left: 2px; padding-right: 2px; } }

/* five rides: five columns on desktop; on phones a swipeable row */
.ride-picker, .hero-setup .ride-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hero-main { width: min(620px, 100%); }
.hero-setup .ride-name { font-size: 11px; }
.garage-grid .garage-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .ride-picker, .hero-setup .ride-picker {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px;
  }
  .hero-setup .ride-picker::-webkit-scrollbar { display: none; }
  .hero-setup .ride-picker button { scroll-snap-align: start; }
  .hero-setup .ride-name { font-size: 10px; letter-spacing: 0; }
  .garage-grid .garage-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* ride picker in two rows: three on top, two centred underneath
   (a 6-column grid, each tile spans 2; the 4th starts at column 2) */
.ride-picker, .hero-setup .ride-picker {
  grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
  overflow: visible; scroll-snap-type: none;
}
.ride-picker > button { grid-column: span 2; }
.ride-picker > button:nth-child(4) { grid-column: span 2; }
.hero-main { width: min(500px, 100%); }
.hero-setup .ride-name { font-size: 12px; }
@media (max-width: 760px) {
  .ride-picker, .hero-setup .ride-picker { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
  .hero-setup .ride-name { font-size: 10.5px; }
}

/* ==========================================================================
   LEVELS: Play shows the level, a Levels button opens the level map (20
   tiles, locked ones greyed with a padlock, stars earned), the HUD shows the
   level, and the finish panel shows the stars earned and "Next level".
   ========================================================================== */
.play-lv {
  margin-left: 4px; padding: 5px 8px; border-radius: 9px; background: var(--outline); color: var(--gold);
  font: 400 12px/1 var(--display); letter-spacing: 0.04em;
}
.btn-levels svg { width: 16px; height: 16px; }
.hud-level { color: var(--gold); font-size: 16px; }
@media (max-width: 760px) {
  .hide-phone { display: none !important; }
  .play-lv { font-size: 10px; padding: 4px 6px; }
  .hud-level { font-size: 13px; padding: 0 8px; }
}

.levels-panel { padding: 30px; width: min(760px, 100%); }
.levels-panel h2 { margin: 8px 0 6px; font: 400 clamp(30px, 4.5vw, 44px)/1 var(--display); text-transform: uppercase; }
.levels-sub { margin: 0 0 20px; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.levels-total { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: rgba(255, 200, 61, 0.12); color: var(--gold); font: 400 14px/1 var(--display); }
.levels-total i, .level-tile .stars i, .finish-stars i {
  display: inline-block; width: 14px; height: 14px; background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.level-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  aspect-ratio: 1.15; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  color: #fff; cursor: pointer; animation: stat-pop 0.4s var(--snap) backwards; animation-delay: calc(var(--i) * 22ms);
  transition: transform 0.2s var(--snap), border-color 0.2s, background 0.2s;
}
.level-tile b { font: 400 26px/1 var(--display); }
.level-tile small { position: absolute; top: 7px; left: 0; right: 0; text-align: center; font: 700 9px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.level-tile .stars { display: flex; gap: 3px; }
.level-tile .stars i { width: 13px; height: 13px; background: rgba(255, 255, 255, 0.18); }
.level-tile .stars i.on { background: var(--gold); }
.level-tile:not(.locked):hover { transform: translateY(-4px) scale(1.04); border-color: var(--gold); background: rgba(255, 200, 61, 0.1); }
.level-tile.current { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.15); }
.level-tile.locked { cursor: not-allowed; opacity: 0.45; background: rgba(0, 0, 0, 0.2); }
.level-tile .lock { width: 18px; height: 18px; fill: currentColor; color: #a79fd6; }
@media (max-width: 760px) {
  .levels-panel { padding: 22px 16px; }
  .level-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .level-tile { border-radius: 14px; gap: 5px; }
  .level-tile b { font-size: 20px; }
  .level-tile .stars i { width: 10px; height: 10px; }
  .level-tile small { font-size: 7px; top: 5px; }
}

.finish-stars { display: flex; justify-content: center; gap: 10px; margin: 4px 0 8px; }
.finish-stars i { width: 38px; height: 38px; background: rgba(255, 255, 255, 0.15); }
.modal.open .finish-stars i.on { background: var(--gold); animation: star-pop 0.5s var(--snap) backwards; animation-delay: var(--d); filter: drop-shadow(0 0 10px rgba(255, 200, 61, 0.7)); }
@keyframes star-pop { from { transform: scale(0) rotate(-40deg); } }
.finish-panel .modal-actions { flex-wrap: wrap; }

/* phone HUD with the level pill: keep everything on screen */
.hud-level { white-space: nowrap; }
@media (max-width: 440px) {
  .hud { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .hud-left, .hud-right { gap: 5px; }
  .hud-pill { height: 36px; padding: 0 8px; font-size: 15px; border-radius: 11px; }
  .hud-level { font-size: 12px; padding: 0 7px; }
  .hud .icon-btn { width: 36px; height: 36px; border-radius: 11px; }
  .hud .icon-btn svg { width: 18px; height: 18px; }
  .hud-progress { padding: 0 2px; }
}

/* the taller logos (Animal Café, UNO Clash) sit a little higher on their card */
.gcard[data-game="animal-cafe"] .gcard-title,
.gcard[data-game="uno-clash"] .gcard-title { top: -70px; }

/* arcade-door logos always fit inside their box, whatever their shape:
   pinned to the box's inner area and scaled to fit */
.door-chip img {
  position: absolute; left: 7px; top: 5px; width: calc(100% - 14px); height: calc(100% - 10px);
  max-width: none; max-height: none; object-fit: contain;
}
.door-chip .door-no { z-index: 1; }
/* the map icon on the Levels button keeps its size */
.btn-levels svg { flex: none; width: 17px; height: 17px; fill: none; }

/* ==========================================================================
   THE WORLD: the site is a road trip through six stops.
   ========================================================================== */

/* ---------------------------------------------------------------- world map */
.worldmap {
  position: relative; display: flex; align-items: center; width: min(640px, 52vw); height: 58px; padding: 0 22px;
  border-radius: 20px; border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(14, 10, 34, 0.9), rgba(14, 10, 34, 0.9)) padding-box,
    linear-gradient(120deg, rgba(255, 200, 61, 0.55), rgba(255, 79, 139, 0.35) 40%, rgba(138, 92, 255, 0.35) 70%, rgba(255, 200, 61, 0.45)) border-box;
  box-shadow: 0 10px 30px rgba(5, 3, 20, 0.45);
}
.wm-road {
  position: absolute; left: 46px; right: 46px; top: 21px; height: 6px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 8px, transparent 8px 16px) center / 100% 2px no-repeat, #2a2450;
}
.wm-fill {
  position: absolute; left: -24px; top: 0; bottom: 0; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--pink)); box-shadow: 0 0 10px rgba(255, 200, 61, 0.6);
  transition: width 0.25s ease-out;
}
.wm-stops { position: relative; z-index: 1; display: flex; justify-content: space-between; width: 100%; margin: 0; padding: 0; list-style: none; }
.wm-stops a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; color: #bdb4ea;
  font: 800 10px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 2px;
}
.wm-pin {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #1c1640; border: 2px solid rgba(255, 255, 255, 0.25); color: #cfc8f5;
  transition: transform 0.25s var(--snap), background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.wm-pin svg { width: 14px; height: 14px; }
.wm-stops a.is-done .wm-pin { border-color: var(--c); color: var(--c); }
.wm-stops a.is-here .wm-pin, .wm-stops a:hover .wm-pin, .wm-stops a:focus-visible .wm-pin {
  background: var(--c); border-color: #fff; color: var(--outline); transform: scale(1.18); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 0 16px var(--c);
}
.wm-stops a.is-here, .wm-stops a:hover { color: #fff; }
.wm-car {
  position: absolute; left: 0; top: -8px; width: 38px; z-index: 2; pointer-events: none; margin-left: -19px;
  transition: transform 0.25s ease-out; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}
.wm-car .ride { width: 100%; height: auto; }
.wm-car .ride-wheel { animation: spin 0.6s linear infinite; }
.map-btn { display: none; }
@media (max-width: 1100px) { .wm-name { display: none; } .worldmap { height: 50px; } .wm-road { top: 22px; } }
@media (max-width: 760px) { .worldmap { display: none; } .map-btn { display: grid; } }

/* phone map panel */
.map-panel { padding: 26px 22px; width: min(420px, 100%); }
.map-panel h2 { margin: 6px 0 16px; font: 400 32px/1 var(--display); text-transform: uppercase; }
.map-list { position: relative; margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 10px; }
.map-list::before { content: ""; position: absolute; left: 25px; top: 20px; bottom: 20px; width: 4px; border-radius: 2px; background: repeating-linear-gradient(180deg, var(--gold) 0 8px, transparent 8px 14px); opacity: 0.5; }
.map-list button {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 8px 12px 8px 4px; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: rgba(255, 255, 255, 0.04);
}
.map-list button.is-here { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.ml-pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: var(--outline); border: 3px solid #fff; flex: none; }
.ml-pin svg { width: 20px; height: 20px; }
.ml-text small { display: block; font: 700 10px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ml-text b { font: 400 22px/1.1 var(--display); color: #fff; }

/* ------------------------------------------------------------- travel */
.travel {
  --c: var(--gold);
  position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; visibility: hidden;
  clip-path: inset(0 100% 0 0);
}
.travel.go { visibility: visible; animation: tr-wipe 1.15s cubic-bezier(.7, 0, .3, 1) forwards; }
.travel.reverse.go { animation-name: tr-wipe-back; }
@keyframes tr-wipe { 0% { clip-path: inset(0 100% 0 0); } 32%, 62% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes tr-wipe-back { 0% { clip-path: inset(0 0 0 100%); } 32%, 62% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.tr-sky { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--c) 45%, #0f0b24), #0f0b24 70%); }
.tr-lines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 255, 255, 0.14) 34px 36px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: tr-streak 0.3s linear infinite;
}
@keyframes tr-streak { to { background-position: 0 36px; } }
.tr-sign {
  position: absolute; left: 50%; top: 26%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 34px 20px; border-radius: 18px; background: #1b7a4a; border: 4px solid #fff; color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); text-align: center;
}
.tr-sign small { font: 800 12px/1 var(--body); letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; }
.tr-sign b { font: 400 clamp(38px, 7vw, 72px)/1 var(--display); text-transform: uppercase; }
.tr-sign span { font: 600 14px/1 var(--body); opacity: 0.9; }
.travel.go .tr-sign { animation: tr-sign 1.15s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tr-sign { 0%, 18% { transform: translate(-50%, -40px) scale(0.8); opacity: 0; } 38% { transform: translate(-50%, 0) scale(1); opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0) scale(1); } }
.tr-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: repeating-linear-gradient(90deg, var(--gold) 0 70px, transparent 70px 140px) 0 45% / 140px 8px repeat-x, linear-gradient(#3a3850, #25233a);
  border-top: 6px solid #7bc257; animation: tr-road 0.25s linear infinite;
}
.travel.reverse .tr-road { animation-direction: reverse; }
@keyframes tr-road { to { background-position: -140px 45%, 0 0; } }
.tr-car { position: absolute; left: 50%; bottom: 72%; width: min(260px, 50vw); transform: translateX(-50%); animation: tr-bounce 0.28s ease-in-out infinite alternate; }
.travel.reverse .tr-car { transform: translateX(-50%) scaleX(-1); }
.tr-car .ride { width: 100%; height: auto; }
.tr-car .ride-wheel { animation: spin 0.25s linear infinite; }
@keyframes tr-bounce { to { margin-bottom: -5px; } }

/* -------------------------------------------------------------- stops */
.stop { position: relative; overflow: hidden; isolation: isolate; }
.stop > :not(.stop-env) { position: relative; z-index: 1; }
.stop-env { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
section.stop { max-width: none; padding: clamp(80px, 10vw, 130px) max(var(--gutter), calc((100vw - 1320px) / 2)) 50px; margin: 0; }
.stop-head { margin-bottom: 36px; max-width: 720px; }
.stop-tag {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14);
  font: 800 12px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: #fff;
}
.stop-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--stop-c, var(--gold)); color: var(--outline); font: 400 13px/1 var(--display); letter-spacing: 0; }
.stop-head h2 { margin: 14px 0 10px; font: 400 clamp(42px, 6vw, 80px)/0.95 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(10, 6, 30, 0.9), 0 10px 26px rgba(0, 0, 0, 0.4); }
.stop-head h2::after { content: ""; display: block; width: 110px; height: 5px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, var(--stop-c, var(--gold)), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--zoom) 0.2s; }
.stop-head.in h2::after { transform: scaleX(1); }
.stop-lede { margin: 0; color: #e3ddff; font-size: clamp(15px, 1.4vw, 18px); max-width: 56ch; }
/* arrival: the stop sign drops in */
.stop.arrived .stop-tag { animation: sign-drop 0.6s var(--snap); }
@keyframes sign-drop { 0% { transform: translateY(-30px) rotate(-6deg); opacity: 0; } 60% { transform: translateY(4px) rotate(2deg); opacity: 1; } }

/* next stop sign at the end of each stop */
.next-stop { position: relative; display: flex; justify-content: flex-end; align-items: center; margin-top: 56px; }
.ns-road { position: absolute; left: 0; right: 180px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 22px, transparent 22px 40px) center / 100% 2px no-repeat, rgba(0, 0, 0, 0.35); }
.next-stop button {
  position: relative; display: grid; gap: 3px; padding: 12px 22px 12px 18px; border-radius: 14px; text-align: left;
  background: #1b7a4a; border: 3px solid #fff; color: #fff; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.2s var(--snap), box-shadow 0.2s;
}
.next-stop button::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 26px; margin-left: -4px; background: #8a8fa3; }
.next-stop button:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 11px 0 rgba(0, 0, 0, 0.35); }
.next-stop small { font: 800 10px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.next-stop b { font: 400 26px/1 var(--display); text-transform: uppercase; }
.next-stop span { font: 600 13px/1 var(--body); color: var(--c); filter: brightness(1.3); }

/* ------------------------------------------ stop 02: the workshop */
.stop-services { --stop-c: #37e2a0; background: linear-gradient(180deg, #0d2a2a, #0a1d20 60%, #0b1518); }
.stop-services .stop-env {
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(0, 0, 0, 0.18) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0, 0, 0, 0.14) 78px 80px);
}
.env-lamp { position: absolute; top: 0; width: 2px; height: 70px; background: #54606a; }
.env-lamp::after { content: ""; position: absolute; left: -26px; top: 70px; width: 54px; height: 22px; border-radius: 0 0 30px 30px; background: #2f3a42; box-shadow: 0 30px 120px 60px rgba(120, 255, 200, 0.07); }
.env-lamp.l1 { left: 18%; } .env-lamp.l2 { left: 52%; } .env-lamp.l3 { left: 84%; }
.env-neon {
  position: absolute; right: max(var(--gutter), calc((100vw - 1320px) / 2)); top: 96px; padding: 8px 18px; border-radius: 12px; border: 2px solid #37e2a0;
  font: 400 clamp(22px, 3vw, 38px)/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #b9ffe4;
  text-shadow: 0 0 8px #37e2a0, 0 0 24px #37e2a0; box-shadow: 0 0 18px rgba(55, 226, 160, 0.5), inset 0 0 18px rgba(55, 226, 160, 0.3);
  animation: neon 5s steps(1) infinite;
}
@keyframes neon { 0%, 92%, 96% { opacity: 1; } 94%, 98% { opacity: 0.35; } }
.env-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: repeating-linear-gradient(135deg, rgba(255, 200, 61, 0.55) 0 14px, rgba(0, 0, 0, 0.3) 14px 28px) top / 100% 6px no-repeat, linear-gradient(#0b1a1c, #081214); }
.bays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bay {
  position: relative; min-height: 250px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, #173a38, #0f2528); border: 3px solid #2d4c4a; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.35);
}
.bay-inside { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.bay-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #37e2a0; color: var(--outline); }
.bay-icon svg { width: 26px; height: 26px; }
.bay h3 { margin: 4px 0 0; font: 400 22px/1.1 var(--display); color: #fff; }
.bay p { margin: 0; color: #c9e9dd; font-size: 14.5px; }
.bay-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
.bay-tags li { padding: 5px 9px; border-radius: 8px; background: rgba(55, 226, 160, 0.14); color: #9ff5d2; font: 700 11px/1 var(--body); letter-spacing: 0.06em; }
.bay-door {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px;
  padding: 18px 20px; border: 0; text-align: left; color: #fff; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    repeating-linear-gradient(180deg, #4b5866 0 16px, #3a4552 16px 18px, #56636f 18px 20px);
  transition: transform 0.6s cubic-bezier(.6, 0, .2, 1);
}
.bay-door::before { content: ""; position: absolute; left: 50%; top: 14px; width: 60px; height: 8px; margin-left: -30px; border-radius: 4px; background: #ffc83d; box-shadow: 0 0 12px rgba(255, 200, 61, 0.6); }
.bay-door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: repeating-linear-gradient(135deg, #ffc83d 0 12px, #1b2033 12px 24px); }
.bay-no { font: 800 11px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase; color: #ffc83d; }
.bay-title { font: 400 21px/1.1 var(--display); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.bay-hint { margin-bottom: 10px; font: 600 12px/1 var(--body); color: #cfd8e0; opacity: 0.8; }
.bay:hover .bay-door { transform: translateY(-14%); }
.bay.open .bay-door { transform: translateY(-100%); }
.bay.open .bay-door .bay-hint { opacity: 0; }

.pipeline { margin-top: 44px; padding: 26px 26px 30px; border-radius: 22px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.pipeline h3 { margin: 0 0 22px; font: 400 26px/1 var(--display); text-transform: uppercase; color: #b9ffe4; }
.pl-road { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding-top: 88px; }
.pl-road::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, var(--gold) 0 24px, transparent 24px 44px) center / 100% 2px no-repeat, #2b2d3f; }
.pl-car { position: absolute; top: 0; left: 0; width: 70px; transform: translateX(-10%); transition: none; }
.pl-car .ride { width: 100%; height: auto; }
.pipeline.in .pl-car { animation: pl-drive 6s cubic-bezier(.45, 0, .3, 1) 0.4s infinite; }
.pipeline.in .pl-car .ride-wheel { animation: spin 0.6s linear infinite; }
@keyframes pl-drive { 0% { left: 0; } 85%, 100% { left: calc(100% - 70px); } }
.pl-stop { position: relative; display: grid; gap: 6px; text-align: center; }
.pl-flag { position: absolute; left: 50%; top: -40px; display: grid; place-items: center; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: #37e2a0; color: var(--outline); font: 400 13px/1 var(--display); border: 3px solid #0f2528; }
.pl-stop b { font: 400 18px/1 var(--display); color: #fff; margin-top: 4px; }
.pl-stop small { color: #c9e9dd; font-size: 13px; }

/* ----------------------------------------- stop 03: arcade boulevard */
.stop-games { --stop-c: #ff4f8b; background: radial-gradient(900px 400px at 80% 0%, rgba(255, 79, 139, 0.22), transparent 60%), linear-gradient(180deg, #1a0d2e, #120a24); }
.env-marquee { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: radial-gradient(circle, #ffe38a 0 3px, transparent 4px) 0 50% / 26px 14px repeat-x, #2a1540; box-shadow: 0 0 20px rgba(255, 200, 61, 0.3); animation: chase 1.2s steps(2) infinite; }
@keyframes chase { to { background-position: 13px 50%, 0 0; } }

/* ---------------------------------------- stop 04: billboard highway */
.stop-clients { --stop-c: #5b8cff; background: linear-gradient(180deg, #1b2a6b 0%, #3b2a7a 45%, #c75b7a 85%, #f2a65a 100%); }
.env-sun { position: absolute; left: 50%; bottom: 120px; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(circle, #ffe7a3, #ff9a5a 60%, rgba(255, 120, 90, 0) 70%); opacity: 0.8; }
.env-hills { position: absolute; left: 0; right: 0; bottom: 70px; height: 160px; background: radial-gradient(60% 100% at 20% 100%, #3a2458 60%, transparent 61%), radial-gradient(50% 100% at 75% 100%, #2c1c49 60%, transparent 61%); }
.env-highway { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: repeating-linear-gradient(90deg, #ffc83d 0 60px, transparent 60px 120px) 0 50% / 120px 6px repeat-x, #262436; border-top: 4px solid #7bc257; animation: tr-road 1.6s linear infinite; }
.billboards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: end; padding-bottom: 20px; }
.billboard { position: relative; display: block; padding-bottom: 70px; text-decoration: none; color: inherit; }
.bb-face {
  position: relative; display: grid; place-items: center; align-content: center; gap: 8px; aspect-ratio: 16 / 9; padding: 18px; border-radius: 12px; text-align: center;
  background: #fff; color: var(--outline); border: 6px solid #1b2033; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
.bb-face::before { content: ""; position: absolute; left: 10%; right: 10%; top: -16px; height: 10px; background: radial-gradient(circle, #ffe38a 0 3px, transparent 4px) 0 50% / 22px 10px repeat-x; filter: drop-shadow(0 6px 10px rgba(255, 230, 140, 0.8)); }
.bb-face img { max-width: 80%; max-height: 70%; object-fit: contain; }
.billboard.reserved .bb-face { background: repeating-linear-gradient(135deg, #f5f1ff 0 16px, #ece6ff 16px 32px); }
.billboard.reserved b { font: 400 clamp(22px, 2.4vw, 32px)/1 var(--display); text-transform: uppercase; color: #3b2a7a; }
.billboard.reserved span { font: 600 13px/1.3 var(--body); color: #6a5aa0; }
.bb-post { position: absolute; left: 50%; bottom: 0; width: 18px; height: 72px; margin-left: -9px; background: linear-gradient(90deg, #4a4f66, #6b7190); }
.bb-plate { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 6px 12px; border-radius: 8px; background: #1b2033; color: #fff; font-size: 12px; white-space: nowrap; }
@media (hover: hover) { .billboard:hover .bb-face { transform: rotate(-1.5deg) scale(1.02); transition: transform 0.3s var(--snap); } }
.bb-cta { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: #fff; font: 600 16px/1.3 var(--body); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

/* -------------------------------------------- stop 05: the test track */
.stop-demos { --stop-c: #ff8a3d; background: radial-gradient(900px 500px at 20% 0%, rgba(255, 138, 61, 0.2), transparent 60%), linear-gradient(180deg, #1d1b24, #121117); }
.env-kerb { position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, #e63946 0 40px, #fff 40px 80px); }
.env-kerb.top { top: 0; } .env-kerb.bottom { bottom: 0; }
.pits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pit {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px;
  background: linear-gradient(160deg, #2a2733, #1c1a23); border: 2px solid #3a3645; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s var(--zoom), border-color 0.25s;
}
.pit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 16px 16px 0 0; background: repeating-linear-gradient(90deg, #ff8a3d 0 14px, #1b2033 14px 28px); }
.pit:hover { transform: translateY(-5px); border-color: #ff8a3d; }
.pit-no { position: absolute; right: 16px; top: 18px; font: 800 11px/1 var(--body); letter-spacing: 0.18em; text-transform: uppercase; color: #ff8a3d; }
.pit-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #ff8a3d; color: var(--outline); }
.pit-icon svg { width: 26px; height: 26px; }
.pit h3 { margin: 4px 0 0; font: 400 22px/1.1 var(--display); color: #fff; }
.pit p { margin: 0; color: #d8d3e6; font-size: 14.5px; flex: 1; }
.pit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.pit-tag { padding: 5px 9px; border-radius: 8px; background: rgba(255, 138, 61, 0.14); color: #ffb98a; font: 700 11px/1 var(--body); letter-spacing: 0.06em; }

/* ------------------------------------------- stop 06: finish line HQ */
.stop-contact { --stop-c: #b98cff; background: radial-gradient(900px 500px at 50% 0%, rgba(185, 140, 255, 0.25), transparent 60%), linear-gradient(180deg, #1a1236, #0f0b24); }
.env-checker { position: absolute; left: 0; right: 0; top: 0; height: 36px; background: conic-gradient(#fff 0 25%, #1b2033 0 50%, #fff 0 75%, #1b2033 0) 0 0 / 36px 36px; opacity: 0.9; }
.env-beam { position: absolute; top: 36px; width: 240px; height: 120%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 70%); transform-origin: top center; animation: beam 7s ease-in-out infinite alternate; }
.env-beam.b1 { left: 12%; transform: rotate(18deg); } .env-beam.b2 { right: 12%; transform: rotate(-18deg); animation-delay: -3s; }
@keyframes beam { to { transform: rotate(-8deg); } }
.env-beam.b2 { animation-name: beam2; } @keyframes beam2 { to { transform: rotate(8deg); } }
section.stop-contact { padding-top: clamp(100px, 11vw, 150px); }
.stop-contact .contact-card { margin: 0; }
.contact-h { margin: 10px 0 12px; font: 400 clamp(34px, 4.5vw, 54px)/0.95 var(--display); text-transform: uppercase; color: #fff; }
.stop-contact.arrived .stop-head h2 { animation: finish-pop 0.7s var(--snap); }
@keyframes finish-pop { 0% { transform: scale(0.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } }

/* -------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .bays, .pits { grid-template-columns: repeat(2, 1fr); }
  .billboards { grid-template-columns: repeat(2, 1fr); }
  .env-neon { display: none; }
}
@media (max-width: 760px) {
  section.stop { padding: 64px 16px 40px; }
  .bays, .pits, .billboards { grid-template-columns: 1fr; }
  .bay { min-height: 210px; }
  .pl-road { grid-template-columns: 1fr; gap: 18px; padding: 0 0 0 54px !important; }
  .pl-road::before { left: 14px; right: auto; top: 0; bottom: 0; width: 12px; height: auto; background: repeating-linear-gradient(180deg, var(--gold) 0 24px, transparent 24px 44px) center / 2px 100% no-repeat, #2b2d3f; }
  .pl-car { display: none; }
  .pl-stop { text-align: left; }
  .pl-flag { left: -54px; top: 0; margin: 0; }
  .ns-road { right: 150px; }
  .next-stop b { font-size: 22px; }
  .billboard { max-width: 360px; padding-bottom: 50px; }
  .billboard .bb-post { height: 52px; }
  .billboard.reserved ~ .billboard.reserved { display: none; }   /* one placeholder is enough on a phone */
}
@media (prefers-reduced-motion: reduce) {
  .travel { display: none; }
  .env-highway, .env-marquee, .env-beam, .env-neon { animation: none; }
}

/* the old top menu is replaced by the world map */
.menu { display: none !important; }

/* ---------------------------------------- stops inside the game */
.drive-here {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 16px 9px 12px; border-radius: 999px;
  border: 1.5px solid var(--stop-c, var(--gold)); background: rgba(0, 0, 0, 0.3); color: #fff;
  font: 700 14px/1 var(--body); transition: transform 0.2s var(--snap), background 0.2s, color 0.2s;
}
.drive-here svg { width: 20px; height: 20px; color: var(--stop-c, var(--gold)); transition: transform 0.3s var(--snap); }
.drive-here:hover, .drive-here:focus-visible { background: var(--stop-c, var(--gold)); color: var(--outline); transform: translateY(-2px); }
.drive-here:hover svg, .drive-here:focus-visible svg { color: var(--outline); transform: translateX(4px); }

.stop-panel { width: min(520px, 100%); padding: 26px 26px 22px; border-top: 6px solid var(--accent); }
.sp-sign { display: flex; align-items: center; gap: 14px; }
.sp-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--accent); color: var(--outline); border: 3px solid #fff; }
.sp-icon svg { width: 28px; height: 28px; }
.sp-sign .eyebrow { margin: 0 0 4px; color: var(--accent); }
.sp-sign h2 { margin: 0; font: 400 clamp(30px, 6vw, 42px)/1 var(--display); text-transform: uppercase; color: #fff; }
.sp-blurb { margin: 14px 0 12px; color: #e3ddff; }
.sp-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.sp-list li { padding: 7px 11px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; font: 600 13px/1.2 var(--body); }
.sp-list li:has(button) { padding: 0; }
.sp-list li button, .sp-list li a { display: block; padding: 7px 11px; border: 0; background: none; color: #fff; font: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; }
.sp-list li button:hover, .sp-list li a:hover, .sp-list li button:focus-visible { background: var(--accent); color: var(--outline); }
.sp-list li.wide { flex-basis: 100%; }
#modal-door, #modal-stop { --accent: var(--gold); }   /* the game or stop colour is set on the modal */

/* ==========================================================================
   WIN SCREEN: a victory scene that plays in order once it opens
     0.0s  backdrop, light rays, confetti      0.15s title slams in
     0.35s the car drives onto the podium, brakes (nose dip, dust), then idles
     1.2s+ stars stamp in one by one (ring burst + chime from game.js)
     1.6s  stats rise and count up             2.3s  record stamp, unlock pill
   ========================================================================== */
#modal-finish { background: radial-gradient(circle at 50% 38%, rgba(255, 186, 60, 0.3), rgba(8, 5, 24, 0.94) 62%); }
.win-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.win-rays {
  position: absolute; left: 50%; top: 38%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 130, 0.11) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 52%); mask: radial-gradient(circle, #000 0, transparent 52%);
  animation: win-spin 50s linear infinite;
}
@keyframes win-spin { to { transform: rotate(360deg); } }
.win-confetti i {
  position: absolute; top: -24px; left: var(--x); width: 9px; height: 15px; border-radius: 2px; background: var(--c);
  animation: win-fall var(--dur) linear var(--delay) infinite backwards;
}
.win-confetti i.round { width: 10px; height: 10px; border-radius: 50%; }
@keyframes win-fall { from { transform: translate3d(0, -4vh, 0) rotate(0); } to { transform: translate3d(var(--sway), 108vh, 0) rotate(var(--r)); } }

#modal-finish .finish-panel {
  z-index: 1; width: min(600px, 100%); padding: 26px 28px 24px; text-align: center; border-radius: 30px;
  border: 2px solid rgba(255, 214, 90, 0.55);
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 200, 61, 0.2), transparent 62%), linear-gradient(170deg, #2b1f66, #150e36);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 70px rgba(255, 186, 60, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.win-level {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0;
  font: 800 12px/1 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: #ffe39a;
}
.win-level::before, .win-level::after { content: ""; width: 44px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, #ffd75a); }
.win-level::after { transform: scaleX(-1); }
#modal-finish .win-title {
  margin: 6px 0 10px; font: 400 clamp(52px, 9vw, 84px)/0.95 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 0 !important; text-shadow: none !important;
  background:
    linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat,
    linear-gradient(180deg, #fff8d6 0%, #ffd75a 46%, #ff9d1c 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 4px 0 #7a3b00) drop-shadow(0 14px 26px rgba(255, 170, 40, 0.45));
}

/* the showroom stage */
.win-stage {
  position: relative; height: 200px; margin: 0 -6px; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(55% 60% at 50% 100%, rgba(255, 200, 61, 0.28), transparent 70%),
    linear-gradient(180deg, #1c1546 0%, #120d30 62%, #0c0922 62.5%, #17123a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -30px 40px rgba(0, 0, 0, 0.35);
}
.win-spot {
  position: absolute; left: 50%; top: -10px; width: 380px; height: 230px; margin-left: -190px;
  background: linear-gradient(180deg, rgba(255, 244, 200, 0.28), rgba(255, 244, 200, 0) 85%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
.win-podium {
  position: absolute; left: 50%; bottom: 14px; width: 340px; height: 50px; margin-left: -170px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #3d3478, #1d1745 70%); box-shadow: 0 -3px 0 #5a4fa6 inset, 0 10px 24px rgba(0, 0, 0, 0.5);
}
.win-podium b { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); font: 400 13px/1 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: #ffd75a; opacity: 0.85; }
.win-ring { position: absolute; inset: -6px -10px; border-radius: 50%; border: 2px solid rgba(255, 214, 90, 0.7); box-shadow: 0 0 22px rgba(255, 200, 61, 0.55); }
.win-car { position: absolute; left: 50%; bottom: 36px; width: 290px; margin-left: -145px; z-index: 1; }
.win-car .ride { width: min(100%, calc(var(--ar) * var(--car-h, 134px))); height: auto; margin: 0 auto; transform-origin: 50% 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.45)); }
.ride-char { z-index: 0; height: auto; }
.win-dust { position: absolute; bottom: 30px; width: 70px; height: 40px; border-radius: 50%; background: radial-gradient(ellipse, rgba(240, 230, 255, 0.55), transparent 70%); opacity: 0; z-index: 2; }
.win-dust.d1 { left: calc(50% - 160px); } .win-dust.d2 { left: calc(50% - 20px); }
#modal-finish .badge-record {
  position: absolute; right: 14px; top: 14px; z-index: 3; margin: 0; padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(180deg, #ff6b9d, #e0306f); border: 2px solid #fff; color: #fff;
  font: 400 15px/1 var(--display); text-transform: uppercase; transform: rotate(8deg); box-shadow: 0 6px 16px rgba(224, 48, 111, 0.5);
}

/* stars: the middle one is bigger, like a podium */
#modal-finish .finish-stars { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 18px 0 2px; }
.win-star { position: relative; display: block; width: 52px; height: 52px; }
.win-star:nth-child(2) { width: 68px; height: 68px; margin-bottom: 8px; }
.win-star i {
  position: absolute; inset: 0; display: block; width: auto; height: auto; background: rgba(255, 255, 255, 0.12);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.win-star.on { filter: drop-shadow(0 0 12px rgba(255, 200, 61, 0.75)) drop-shadow(0 3px 0 #a5560a); }
.win-star.on i { background: linear-gradient(160deg, #fff6c4 0%, #ffd34d 40%, #ff9f1c 100%); }
.win-star::after { content: ""; position: absolute; inset: -10%; border-radius: 50%; border: 3px solid #ffd75a; opacity: 0; pointer-events: none; }
.win-rating { margin: 6px 0 16px; font: 400 18px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }

/* stats */
#modal-finish .finish-stats { gap: 10px; }
#modal-finish .finish-stats div { padding: 12px 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid var(--sc, var(--gold)); }
#modal-finish .finish-stats div:nth-child(2) { --sc: #37e2a0; }
#modal-finish .finish-stats div:nth-child(3) { --sc: #b98cff; }
#modal-finish .finish-stats dt { color: var(--sc, var(--gold)); }
#modal-finish .finish-stats dd { margin-top: 8px; font: 400 28px/1 var(--display); font-variant-numeric: tabular-nums; color: #fff; }
.win-unlock {
  display: flex; align-items: center; gap: 8px; width: fit-content; margin: 14px auto 0; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(55, 226, 160, 0.14); border: 1.5px solid #37e2a0; color: #b9ffe4; font: 700 14px/1 var(--body);
}
.win-unlock[hidden] { display: none; }
.win-unlock svg { width: 18px; height: 18px; fill: #37e2a0; }
.win-unlock path { stroke: #37e2a0; }
#modal-finish .finish-ride { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* buttons */
.win-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
.win-actions .btn-play { justify-content: center; width: 100%; }
.win-actions .btn-play[hidden] { display: none; }
.win-more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.win-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 10px; border-radius: 14px;
  border: 1.5px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; font: 700 14px/1 var(--body);
  transition: transform 0.2s var(--snap), border-color 0.2s, background 0.2s;
}
.win-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.win-btn:hover, .win-btn:focus-visible { transform: translateY(-2px); border-color: var(--gold); background: rgba(255, 200, 61, 0.12); }

/* ------------------------------------------------------ the sequence */
#modal-finish.open .win-level { animation: win-fade-down 0.5s cubic-bezier(.2, .8, .2, 1) 0.1s backwards; }
#modal-finish.open .win-ring { animation: win-pulse 2s ease-in-out 1.3s infinite; }
#modal-finish.open .win-car .ride-wheel { animation: spin 0.2s linear 0.35s 4, spin 0.55s cubic-bezier(.2, .6, .4, 1) 1.15s 1; }
#modal-finish.open .win-dust { animation: win-dust 0.9s ease-out 1.05s; }
#modal-finish.open .win-dust.d2 { animation-delay: 1.1s; }
#modal-finish.open .win-star i { animation: win-star-off 0.4s ease-out var(--d) backwards; }
#modal-finish.open .win-star.on i { animation: win-star-pop 0.55s cubic-bezier(.2, 1.6, .4, 1) var(--d) backwards; }
#modal-finish.open .win-star.on::after { animation: win-burst 0.7s ease-out calc(var(--d) + 0.12s); }
#modal-finish.open .win-rating { animation: win-fade-up 0.5s ease-out 1.5s backwards; }
#modal-finish.open .finish-stats > div { animation: win-fade-up 0.5s cubic-bezier(.2, 1.3, .4, 1) backwards; }
#modal-finish.open .finish-stats > div:nth-child(1) { animation-delay: 1.15s; }
#modal-finish.open .finish-stats > div:nth-child(2) { animation-delay: 1.25s; }
#modal-finish.open .finish-stats > div:nth-child(3) { animation-delay: 1.35s; }
#modal-finish.open .badge-record { animation: win-stamp 0.5s cubic-bezier(.2, 1.4, .4, 1) 2.25s backwards; }
#modal-finish.open .win-unlock { animation: win-fade-up 0.5s cubic-bezier(.2, 1.3, .4, 1) 1.9s backwards; }
#modal-finish.open .finish-ride { animation: win-fade-up 0.5s ease-out 2s backwards; }
#modal-finish.open .win-actions { animation: win-fade-up 0.6s cubic-bezier(.16, 1, .3, 1) 0.95s backwards; }

@keyframes win-fade-down { from { opacity: 0; transform: translateY(-12px); } }
@keyframes win-fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes win-slam { 0% { opacity: 0; transform: scale(2.3); filter: blur(8px); } 60% { opacity: 1; transform: scale(0.94); filter: blur(0); } }
@keyframes win-shine { 0%, 55% { background-position: 160% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@keyframes win-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes win-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes win-dust { 0% { opacity: 0.8; transform: scale(0.3); } 100% { opacity: 0; transform: translateX(-40px) scale(1.7); } }
@keyframes win-star-off { from { opacity: 0; transform: scale(0.4); } }
@keyframes win-star-pop { 0% { transform: scale(0) rotate(-45deg); } 60% { transform: scale(1.35) rotate(8deg); } 100% { transform: none; } }
@keyframes win-burst { 0% { opacity: 1; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes win-stamp { 0% { opacity: 0; transform: rotate(8deg) scale(2.6); } 100% { opacity: 1; transform: rotate(8deg) scale(1); } }

@media (max-width: 560px) {
  #modal-finish .finish-panel { padding: 20px 16px 18px; border-radius: 24px; }
  #modal-finish .win-title { font-size: 50px; }
  .win-stage { height: 160px; margin: 0; }
  .win-car { width: 230px; margin-left: -115px; bottom: 30px; --car-h: 92px; }
  #modal-finish .badge-record { right: -6px; top: -12px; padding: 4px 7px; font-size: 10px; }
  .win-podium { width: 260px; height: 42px; margin-left: -130px; }
  .win-spot { width: 300px; margin-left: -150px; }
  .win-dust.d1 { left: calc(50% - 125px); }
  .win-star { width: 44px; height: 44px; } .win-star:nth-child(2) { width: 56px; height: 56px; }
  #modal-finish .finish-stats dd { font-size: 20px; }
  .win-btn { font-size: 13px; gap: 5px; padding: 0 6px; white-space: nowrap; }
  .win-btn svg { width: 16px; height: 16px; }
}
@media (max-height: 760px) and (min-width: 561px) {
  #modal-finish .win-title { font-size: 60px; }
  .win-stage { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  #modal-finish *, #modal-finish *::after { animation: none !important; }
  .win-confetti, .win-rays { display: none; }
}
#modal-finish .badge-record[hidden] { display: none; }

/* --------------------------------------------- win screen, polish pass */
.ride-char { transform: scaleX(-1); }           /* the art faces left; the driver looks ahead, as in the game */

/* the title: gold letters that drop in one by one, then a shine runs along them */
#modal-finish .win-title { background: none; filter: none; color: inherit; }
#modal-finish .win-title > span { display: inline-flex; filter: drop-shadow(0 4px 0 #7a3b00) drop-shadow(0 14px 26px rgba(255, 170, 40, 0.45)); }
#modal-finish .win-title b {
  display: inline-block; font-weight: 400; color: transparent;
  background:
    linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.95) 50%, transparent 62%) 220% 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #fff8d6 0%, #ffd75a 46%, #ff9d1c 100%);
  -webkit-background-clip: text; background-clip: text;
}
#modal-finish.open .win-title b {
  animation: win-letter 0.7s cubic-bezier(.2, 1.5, .35, 1) calc(0.12s + var(--i) * 0.055s) backwards,
             win-letter-shine 3.6s ease-in-out calc(1.1s + var(--i) * 0.06s) infinite;
}
@keyframes win-letter {
  0% { opacity: 0; transform: translateY(-70px) rotate(-14deg) scale(1.5); filter: blur(4px); }
  55% { opacity: 1; transform: translateY(6px) rotate(3deg) scale(0.96); filter: blur(0); }
  78% { transform: translateY(-3px) rotate(-1deg); }
}
@keyframes win-letter-shine { 0%, 60% { background-position: 220% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }

/* chequered flags on poles, leaning out either side of the podium; the
   cloth ripples (shading sweeps across it) and waves from the pole */
.win-flag {
  position: absolute; bottom: 30px; width: 5px; height: 142px; border-radius: 3px; z-index: 0;
  background: linear-gradient(90deg, #f1f2f8, #8d91a8); transform-origin: 50% 100%;
}
.win-flag::before { content: ""; position: absolute; left: 50%; top: -9px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c4, #ffc83d 45%, #a5650a); box-shadow: 0 0 10px rgba(255, 200, 61, 0.7); }
.win-flag i {
  position: absolute; left: 5px; top: 4px; width: 82px; height: 54px; border-radius: 0 4px 4px 0; transform-origin: 0 50%;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 22%, rgba(255, 255, 255, 0.26) 42%, transparent 60%, rgba(0, 0, 0, 0.3) 80%, transparent) 0 0 / 200% 100%,
    conic-gradient(#fff 0 25%, #1b2033 0 50%, #fff 0 75%, #1b2033 0) 0 0 / 20.5px 18px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}
.win-flag.l { left: calc(50% - 222px); transform: rotate(-9deg); }
.win-flag.r { right: calc(50% - 222px); transform: scaleX(-1) rotate(-9deg); }      /* mirrored: cloth points inward */
#modal-finish.open .win-flag.l { animation: win-flag-up 0.8s cubic-bezier(.2, 1.3, .4, 1) 0.2s backwards; }
#modal-finish.open .win-flag.r { animation: win-flag-up-r 0.8s cubic-bezier(.2, 1.3, .4, 1) 0.3s backwards; }
#modal-finish.open .win-flag i { animation: win-cloth 1.5s ease-in-out infinite, win-ripple 1.5s linear infinite; }
#modal-finish.open .win-flag.r i { animation-delay: -0.7s; }
@keyframes win-flag-up { from { transform: translateY(170px) rotate(-30deg); } }
@keyframes win-flag-up-r { from { transform: scaleX(-1) translateY(170px) rotate(-30deg); } }
@keyframes win-cloth { 0%, 100% { transform: perspective(240px) rotateY(-14deg) skewY(4deg); } 50% { transform: perspective(240px) rotateY(12deg) skewY(-4deg) scaleX(0.94); } }
@keyframes win-ripple { to { background-position: -200% 0, 0 0; } }

/* speed lines behind the car while it drives in */
.win-speed {
  position: absolute; left: 0; width: 46%; bottom: 52px; height: 70px; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(255, 255, 255, 0.5) 9px 11px, transparent 11px 21px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 60%, transparent); mask: linear-gradient(90deg, transparent, #000 60%, transparent);
}
#modal-finish.open .win-speed { animation: win-speed 1s ease-out 0.35s; }
@keyframes win-speed { 0% { opacity: 0; transform: translateX(-30%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }

/* the car: a smooth ease-out drive, then a squash on the brakes */
#modal-finish.open .win-car { animation: win-drive 1.05s cubic-bezier(.16, 1, .3, 1) 0.35s backwards, win-bob 2.8s ease-in-out 2s infinite; }
#modal-finish.open .win-car .ride { animation: win-dive 0.9s cubic-bezier(.3, 1.4, .5, 1) 0.95s; }
@keyframes win-drive { 0% { transform: translateX(-200%) skewX(-8deg); } 60% { transform: translateX(3%) skewX(3deg); } 100% { transform: none; } }
@keyframes win-dive { 0% { transform: none; } 30% { transform: rotate(3deg) scale(1.03, 0.95); } 65% { transform: rotate(-1deg) scale(0.99, 1.02); } 100% { transform: none; } }

/* the panel arrives with a soft zoom, and a light sweep crosses it once */
#modal-finish .finish-panel { overflow: hidden auto; }
#modal-finish.open .finish-panel { animation: win-panel-in 0.7s cubic-bezier(.16, 1, .3, 1); }
#modal-finish .finish-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 200, 0.18) 50%, transparent 65%) 150% 0 / 300% 100% no-repeat;
}
#modal-finish.open .finish-panel::after { animation: win-sweep 1.3s ease-in-out 0.45s; }
@keyframes win-panel-in { from { opacity: 0; transform: translateY(40px) scale(0.86); filter: blur(6px); } }
@keyframes win-sweep { 0% { opacity: 1; background-position: 150% 0; } 100% { opacity: 1; background-position: -50% 0; } }

/* stars: a sparkle burst as each one lands */
.win-star::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; opacity: 0; color: #fff3b0;
  box-shadow: 0 -34px 0 currentColor, 24px -24px 0 currentColor, 34px 0 0 currentColor, 24px 24px 0 currentColor,
              0 34px 0 currentColor, -24px 24px 0 currentColor, -34px 0 0 currentColor, -24px -24px 0 currentColor;
}
#modal-finish.open .win-star.on::before { animation: win-sparkle 0.7s ease-out calc(var(--d) + 0.1s); }
@keyframes win-sparkle { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }

/* stat cards flip up in 3D */
#modal-finish .finish-stats { perspective: 600px; }
#modal-finish.open .finish-stats > div { animation: win-flip 0.7s cubic-bezier(.2, 1.3, .4, 1) backwards; transform-origin: 50% 100%; }
@keyframes win-flip { from { opacity: 0; transform: rotateX(-85deg) translateY(10px); } }

/* the Next level button glints now and then */
#modal-finish .win-actions .btn-play { position: relative; overflow: hidden; }
#modal-finish .win-actions .btn-play::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg);
}
#modal-finish.open .win-actions .btn-play::after { animation: win-glint 3.4s ease-in-out 2.4s infinite; }
@keyframes win-glint { 0%, 70% { left: -40%; } 100% { left: 130%; } }

@media (max-width: 560px) {
  .win-flag { height: 112px; bottom: 26px; }
  .win-flag i { width: 60px; height: 40px; background-size: 200% 100%, 15px 13.3px; }
  .win-flag.l { left: 7%; } .win-flag.r { right: 7%; }
  .win-star::before { transform: scale(0.8); }
}
@media (prefers-reduced-motion: reduce) {
  #modal-finish *::before, #modal-finish .finish-panel, #modal-finish .finish-panel::after { animation: none !important; }
}

/* the New record stamp sits on the Best card */
#modal-finish .finish-stats div { position: relative; }
#modal-finish .badge-record { right: -8px; top: -14px; left: auto; padding: 5px 9px; font-size: 12px; border-width: 1.5px; }

/* ==========================================================================
   RACE START (replaces 3-2-1-GO), 2.75s; times from the start of the run
     0.0s  letterbox bars slide in
     0.45s start gantry drops; 1.15-2.05s three red lights, one every 0.45s
     2.75s GO: lights turn green, flash, speed streaks, GO! bursts and flies off
   ========================================================================== */
.start-seq { position: absolute; inset: 0; z-index: 4; display: none; pointer-events: none; overflow: hidden; }
.start-seq.on { display: block; }
.start-seq.hold, .start-seq.hold * { animation-play-state: paused !important; }

/* cinematic bars */
.ss-bar { position: absolute; left: 0; right: 0; height: 9vh; background: linear-gradient(#05030f, #0b0820); }
.ss-bar.top { top: 0; transform: translateY(-100%); box-shadow: 0 2px 0 rgba(255, 200, 61, 0.5); }
.ss-bar.bottom { bottom: 0; transform: translateY(100%); box-shadow: 0 -2px 0 rgba(255, 200, 61, 0.5); }
.start-seq.on .ss-bar { animation: ss-bar-in 0.5s cubic-bezier(.16, 1, .3, 1) forwards; }
.start-seq.go .ss-bar { animation: ss-bar-out 0.6s cubic-bezier(.7, 0, .84, 0) 0.25s both; }
@keyframes ss-bar-in { to { transform: none; } }
@keyframes ss-bar-out { from { transform: none; } }

/* the start gantry with three lights */
.ss-gantry { --off: calc(-100% - 9vh - 120px); position: absolute; left: 50%; top: calc(9vh + 54px); transform: translate(-50%, var(--off)); }
.ss-lights {
  position: relative; display: flex; gap: 14px; padding: 14px 18px; border-radius: 18px;
  background: linear-gradient(180deg, #2a2d3e, #15161f); border: 2px solid #3d4157;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.ss-cable { position: absolute; bottom: 100%; width: 4px; height: 30vh; background: linear-gradient(90deg, #5c6077, #2a2d3e); }
.ss-cable.l { left: 24%; } .ss-cable.r { right: 24%; }
.ss-lights i {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a2326, #170c0e 70%); border: 3px solid #0b0b10;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6);
  transition: background 0.08s, box-shadow 0.12s;
}
.ss-lights i::after { content: ""; position: absolute; inset: 6px 12px auto 10px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.start-seq[data-lights="1"] .ss-lights i:nth-child(-n+1),
.start-seq[data-lights="2"] .ss-lights i:nth-child(-n+2),
.start-seq[data-lights="3"] .ss-lights i:nth-child(-n+3) {
  background: radial-gradient(circle at 40% 35%, #ffd0c8, #ff3b3b 35%, #b0001a 75%);
  box-shadow: 0 0 18px 4px rgba(255, 40, 50, 0.75), 0 0 46px 10px rgba(255, 40, 50, 0.35);
  animation: ss-light 0.25s cubic-bezier(.2, 1.6, .4, 1);
}
.start-seq.go .ss-lights i, .start-seq.go[data-lights] .ss-lights i {
  background: radial-gradient(circle at 40% 35%, #e6ffe8, #3dff7a 35%, #00a83a 75%);
  box-shadow: 0 0 20px 6px rgba(60, 255, 120, 0.8), 0 0 60px 16px rgba(60, 255, 120, 0.35);
  animation: none;
}
@keyframes ss-light { from { transform: scale(0.7); } }
.start-seq.on .ss-gantry { animation: ss-gantry-in 0.65s cubic-bezier(.2, 1.4, .4, 1) 0.45s forwards; }
.start-seq.go .ss-gantry { animation: ss-gantry-out 0.6s cubic-bezier(.6, 0, .8, .2) 0.35s both; }
@keyframes ss-gantry-in { 0% { transform: translate(-50%, var(--off)) rotate(-3deg); } 70% { transform: translate(-50%, 4%) rotate(1deg); } 100% { transform: translate(-50%, 0); } }
@keyframes ss-gantry-out { from { transform: translate(-50%, 0); } to { transform: translate(-50%, var(--off)); } }

/* GO */
.ss-flash { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 48%, rgba(220, 255, 230, 0.75), rgba(60, 255, 120, 0.25) 40%, transparent 70%); }
.start-seq.go .ss-flash { animation: ss-flash 0.7s ease-out; }
@keyframes ss-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.ss-go { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.start-seq.go .ss-go { opacity: 1; }
.ss-go b {
  position: relative; font: 400 clamp(110px, 20vw, 240px)/1 var(--display); font-style: italic; letter-spacing: 0.02em;
  color: transparent; background: linear-gradient(180deg, #ffffff 0%, #c9ffd6 40%, #3dff7a 70%, #00b84a 100%);
  -webkit-background-clip: text; background-clip: text; transform: skewX(-12deg);
  filter: drop-shadow(0 6px 0 #064d22) drop-shadow(0 0 40px rgba(60, 255, 120, 0.6));
}
.start-seq.go .ss-go b { animation: ss-go 1.15s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes ss-go {
  0% { opacity: 0; transform: skewX(-12deg) scale(0.3); filter: blur(10px) drop-shadow(0 6px 0 #064d22); }
  22% { opacity: 1; transform: skewX(-12deg) scale(1.12); filter: blur(0) drop-shadow(0 6px 0 #064d22) drop-shadow(0 0 40px rgba(60, 255, 120, 0.6)); }
  55% { opacity: 1; transform: skewX(-12deg) scale(1); }
  100% { opacity: 0; transform: translateX(55vw) skewX(-24deg) scale(1.05); filter: blur(6px); }
}
.ss-streaks {
  position: absolute; inset: 20% -10%; opacity: 0;
  background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(255, 255, 255, 0.7) 22px 25px, transparent 25px 48px, rgba(120, 255, 160, 0.6) 48px 50px, transparent 50px 70px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.start-seq.go .ss-streaks { animation: ss-streaks 0.8s cubic-bezier(.3, 0, .2, 1); }
@keyframes ss-streaks { 0% { opacity: 0; transform: translateX(60%) scaleX(0.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(-60%) scaleX(1.4); } }

@media (max-width: 760px) {
  .ss-lights { gap: 8px; padding: 10px 12px; border-radius: 14px; }
  .ss-lights i { width: 30px; height: 30px; border-width: 2px; }
  .ss-lights i::after { inset: 4px 8px auto 6px; height: 5px; }
  .ss-gantry { top: calc(9vh + 64px); }
  .ss-bar { height: 7vh; }
}
@media (prefers-reduced-motion: reduce) {
  .start-seq * { animation: none !important; transition: none !important; }
  .start-seq.on .ss-gantry { transform: translate(-50%, 0); }
  .start-seq.go .ss-go b { opacity: 1; }
}

/* ---------------------------------------------- win screen stars */
.win-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.win-star { width: 62px; height: 62px; }
.win-star:nth-child(2) { width: 82px; height: 82px; margin-bottom: 12px; }
.win-star.on { filter: none; }
.win-star svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.slot-rim { fill: none; stroke: #0d0926; stroke-width: 12; stroke-linejoin: round; }
.slot-face { fill: url(#ws-slot); stroke: rgba(255, 255, 255, 0.1); stroke-width: 2; stroke-linejoin: round; }
.ws-gold { opacity: 0; filter: drop-shadow(0 4px 0 #8a3f05) drop-shadow(0 0 14px rgba(255, 196, 60, 0.75)); }
.win-star.on .ws-gold { opacity: 1; }
.gold-rim { fill: none; stroke: #b4560a; stroke-width: 11; stroke-linejoin: round; }
.gold-face { fill: url(#ws-gold); stroke: #ffe58a; stroke-width: 2.5; stroke-linejoin: round; }
.ws-rays {
  position: absolute; inset: -55%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 220, 110, 0.38) 0 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
}
.win-star:not(.on) .ws-rays { display: none; }
.ws-glint { position: absolute; left: 22%; top: 18%; width: 16px; height: 16px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 18%, transparent 20%), linear-gradient(transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(90deg, transparent 46%, #fff 46% 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%); mask: radial-gradient(circle, #000 25%, transparent 70%); }
.win-star:not(.on) .ws-glint { display: none; }

/* sequence: sockets fade in, gold stars spin into them, rays open behind */
#modal-finish.open .win-star .ws-slot { animation: win-star-off 0.4s ease-out calc(var(--d) - 0.3s) backwards; }
#modal-finish.open .win-star.on .ws-gold { animation: ws-in 0.75s cubic-bezier(.2, 1.5, .35, 1) var(--d) backwards; }
#modal-finish.open .win-star.on .ws-rays { animation: ws-rays-in 0.6s ease-out calc(var(--d) + 0.15s) forwards, ws-rays-spin 9s linear calc(var(--d) + 0.15s) infinite; }
#modal-finish.open .win-star.on .ws-glint { animation: ws-glint 2.8s ease-in-out calc(var(--d) + 1s) infinite; }
#modal-finish.open .win-star.on:nth-child(2) .ws-glint { animation-delay: calc(var(--d) + 1.9s); }
#modal-finish.open .win-star.on:nth-child(3) .ws-glint { animation-delay: calc(var(--d) + 1.4s); }
@keyframes ws-in {
  0% { opacity: 0; transform: translateY(-46px) scale(0.2) rotate(-200deg); }
  55% { opacity: 1; transform: translateY(4px) scale(1.25) rotate(12deg); }
  75% { transform: scale(0.94) rotate(-4deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes ws-rays-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ws-rays-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ws-glint { 0%, 78%, 100% { opacity: 0; transform: scale(0.2) rotate(0); } 86% { opacity: 1; transform: scale(1.3) rotate(45deg); } }

@media (max-width: 560px) {
  .win-star { width: 50px; height: 50px; } .win-star:nth-child(2) { width: 66px; height: 66px; }
  .ws-glint { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .win-star.on .ws-rays { opacity: 0.8; } }

/* trimmed car art in ride previews: only the car, not its baked ground shadow */
.ride-crop { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; z-index: 1; }
.ride-crop .ride-body { position: absolute; left: 0; top: 0; }
/* four rides, shown as two rows of two: in the intro picker and in the
   garage, on every screen size */
.ride-picker, .hero-setup .ride-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible;
}
.ride-picker > button, .ride-picker > button:nth-child(4) { grid-column: auto; }   /* the older 6-column layout made tiles span 2 */
.garage-grid, .garage-panel .garage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.garage-grid .garage-card:last-child:nth-child(odd) { grid-column: auto; }
/* phones: the two-across garage cards stack vertically (car on top, then
   the name and stats) instead of the old one-per-row side-by-side layout */
@media (max-width: 760px) {
  .garage-grid { gap: 10px; }
  .garage-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 10px 12px; }
  .garage-card .ride-slot { grid-row: auto; width: 100%; height: 64px; margin: 0 0 4px; }
  .garage-card b { font-size: 17px; }
  .garage-card span:not(.ride-slot) { font-size: 11.5px; line-height: 1.35; }
  .garage-card kbd { top: 8px; right: 8px; }
}


/* ==========================================================================
   FAIL SCREEN: a haunted "run over" scene
     0.0s  dark vignette, drifting fog, bats cross      0.1s card shudders in
     0.2s  SPOOKED! / CAUGHT! letters drop and keep wobbling
     0.4s  the ghost swoops in front of its haunted house and hovers;
           your ride trembles, a "!" pops above it
     0.9s  tip, distance bar fills, stats, buttons
   ========================================================================== */
#modal-fail { background: radial-gradient(circle at 50% 40%, rgba(120, 60, 170, 0.35), rgba(6, 3, 16, 0.95) 65%); }
.fail-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.fog { position: absolute; left: -30%; width: 160%; height: 40vh; border-radius: 50%; filter: blur(30px); opacity: 0.55;
  background: radial-gradient(ellipse at center, rgba(170, 140, 230, 0.35), transparent 65%); }
.fog.f1 { bottom: -12vh; animation: fog-drift 16s ease-in-out infinite alternate; }
.fog.f2 { top: -14vh; opacity: 0.35; animation: fog-drift 22s ease-in-out -6s infinite alternate-reverse; }
@keyframes fog-drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.fail-bat { position: absolute; width: 46px; height: auto; opacity: 0; filter: brightness(0.6) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.fail-bat.b1 { top: 14%; animation: bat-fly 6s linear 0.3s infinite, bat-flap 0.28s ease-in-out infinite alternate; }
.fail-bat.b2 { top: 30%; width: 32px; animation: bat-fly-r 8s linear 1.6s infinite, bat-flap 0.24s ease-in-out infinite alternate; }
.fail-bat.b3 { top: 70%; width: 38px; animation: bat-fly 9s linear 3.2s infinite, bat-flap 0.3s ease-in-out infinite alternate; }
@keyframes bat-fly { 0% { opacity: 0; left: -8%; translate: 0 0; } 8%, 90% { opacity: 0.9; } 50% { translate: 0 -40px; } 100% { opacity: 0; left: 108%; translate: 0 10px; } }
@keyframes bat-fly-r { 0% { opacity: 0; left: 108%; translate: 0 0; } 8%, 90% { opacity: 0.8; } 50% { translate: 0 30px; } 100% { opacity: 0; left: -8%; translate: 0 -10px; } }
@keyframes bat-flap { from { scale: 1 1; } to { scale: 1 0.55; } }

#modal-fail .fail-panel {
  z-index: 1; width: min(560px, 100%); padding: 24px 26px 22px; text-align: center; border-radius: 30px;
  border: 2px solid rgba(185, 140, 255, 0.5);
  background: radial-gradient(120% 60% at 50% 0%, rgba(185, 140, 255, 0.18), transparent 62%), linear-gradient(170deg, #241640, #0f0a22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 70px rgba(140, 90, 220, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fail-level { margin: 0; font: 800 12px/1 var(--body); letter-spacing: 0.26em; text-transform: uppercase; color: #cdb8ff; display: flex; align-items: center; justify-content: center; gap: 12px; }
.fail-level::before, .fail-level::after { content: ""; width: 40px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, transparent, #b98cff); }
.fail-level::after { transform: scaleX(-1); }
#modal-fail .fail-title {
  margin: 6px 0 10px; font: 400 clamp(48px, 8.5vw, 76px)/0.95 var(--display); text-transform: uppercase;
  -webkit-text-stroke: 0 !important; text-shadow: none !important; color: inherit;
}
#modal-fail .fail-title > span { display: inline-flex; filter: drop-shadow(0 4px 0 #2a0f4a) drop-shadow(0 0 22px rgba(160, 110, 255, 0.55)); }
#modal-fail .fail-title b {
  display: inline-block; font-weight: 400; color: transparent;
  background: linear-gradient(180deg, #f3ecff 0%, #c9a8ff 45%, #8a5cff 100%); -webkit-background-clip: text; background-clip: text;
}

/* the haunted scene */
.fail-stage {
  position: relative; height: 180px; margin: 0 -4px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(70% 70% at 70% 30%, rgba(160, 120, 255, 0.25), transparent 70%), linear-gradient(180deg, #1b1240 0%, #120c2c 70%, #0b0820 70.5%, #150f33 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 -30px 40px rgba(0, 0, 0, 0.4);
}
.fs-moon { position: absolute; left: 47%; top: 16px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff8e0, #e9dcff 60%, #b9a6f0); box-shadow: 0 0 30px 8px rgba(220, 200, 255, 0.35); }
.fs-house { position: absolute; right: 4%; bottom: 52px; height: 112px; width: auto; max-width: none; opacity: 0.7; filter: brightness(0.5) saturate(0.7) hue-rotate(220deg) drop-shadow(0 0 10px rgba(185, 140, 255, 0.35)); }
.fs-mist { position: absolute; left: 0; right: 0; bottom: 34px; height: 46px; background: linear-gradient(transparent, rgba(150, 120, 220, 0.25), transparent); filter: blur(6px); }
.fs-car { position: absolute; left: 12%; bottom: 30px; width: 200px; z-index: 1; }
.fs-car .ride { width: min(100%, calc(var(--ar) * 92px)); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.5)) brightness(0.92); }
.fs-shock {
  position: absolute; left: calc(12% + 84px); top: 18px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #ffd75a; color: #2a0f4a; font: 400 22px/1 var(--display); box-shadow: 0 4px 0 #a5650a, 0 0 18px rgba(255, 215, 90, 0.6);
}
.fs-ghost { position: absolute; right: 18%; bottom: 46px; height: 118px; width: auto; max-width: none; z-index: 2; filter: drop-shadow(0 0 18px rgba(200, 170, 255, 0.7)); }

/* tip, distance, stats */
.fail-tip {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 12px; padding: 12px 14px; border-radius: 16px; text-align: left;
  background: rgba(185, 140, 255, 0.1); border: 1px solid rgba(185, 140, 255, 0.28); color: #e6dcff; font-size: 14.5px; line-height: 1.45;
}
.fail-tip svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: #ffd75a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fail-progress { margin: 0 0 12px; text-align: left; }
.fp-head { display: flex; justify-content: space-between; margin-bottom: 6px; font: 800 11px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: #cdb8ff; }
.fp-head b { font: 400 15px/1 var(--display); letter-spacing: 0.04em; color: #fff; }
.fp-track { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.fp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 6px; background: linear-gradient(90deg, #8a5cff, #ff4f8b); box-shadow: 0 0 12px rgba(255, 79, 139, 0.5); }
.fp-fill::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #ff4f8b; }
.fp-flag { position: absolute; right: -2px; top: -7px; width: 18px; height: 24px; border-radius: 3px; background: conic-gradient(#fff 0 25%, #1b2033 0 50%, #fff 0 75%, #1b2033 0) 0 0 / 9px 8px; opacity: 0.8; }
#modal-fail .finish-stats { gap: 10px; }
#modal-fail .finish-stats div { position: relative; padding: 10px 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-top: 3px solid #b98cff; }
#modal-fail .finish-stats dt { color: #cdb8ff; }
#modal-fail .finish-stats dd { margin-top: 6px; font: 400 24px/1 var(--display); color: #fff; }
.fail-actions { margin-top: 16px; }
.win-more.two { grid-template-columns: repeat(2, 1fr); }
#modal-fail .btn-play { background: linear-gradient(180deg, #ffd75a, #f5a623); }

/* the sequence */
#modal-fail.open .fail-panel { animation: fail-in 0.75s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes fail-in {
  0% { opacity: 0; transform: translateY(40px) scale(0.88); filter: blur(5px); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.01); filter: blur(0); }
  65% { transform: translateX(-6px) rotate(-0.6deg); } 75% { transform: translateX(5px) rotate(0.5deg); }
  85% { transform: translateX(-3px); } 100% { transform: none; }
}
#modal-fail.open .fail-level { animation: win-fade-down 0.5s ease-out 0.1s backwards; }
#modal-fail.open .fail-title b {
  animation: fail-letter 0.7s cubic-bezier(.2, 1.5, .35, 1) calc(0.2s + var(--i) * 0.06s) backwards,
             fail-wobble 2.6s ease-in-out calc(1.1s + var(--i) * 0.12s) infinite;
}
@keyframes fail-letter { 0% { opacity: 0; transform: translateY(-50px) rotate(calc((var(--i) - 3) * 9deg)) scale(1.4); filter: blur(4px); } 60% { opacity: 1; transform: translateY(5px) rotate(-3deg); filter: blur(0); } }
@keyframes fail-wobble { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(2deg); } }
#modal-fail.open .fs-moon { animation: win-fade-down 0.8s ease-out 0.2s backwards; }
#modal-fail.open .fs-house { animation: fail-house 0.9s ease-out 0.25s backwards; }
@keyframes fail-house { from { opacity: 0; transform: translateY(14px); } }
#modal-fail.open .fs-ghost { animation: fail-ghost-in 0.9s cubic-bezier(.2, 1.3, .4, 1) 0.4s backwards, fail-ghost-hover 2.4s ease-in-out 1.3s infinite; }
@keyframes fail-ghost-in { 0% { opacity: 0; transform: translate(90px, 50px) scale(0.3) rotate(25deg); } 60% { opacity: 1; transform: translate(-8px, -6px) scale(1.12) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
@keyframes fail-ghost-hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
#modal-fail.open .fs-car { animation: win-fade-up 0.4s ease-out 0.2s backwards, fail-tremble 0.14s linear 0.7s 10; }
@keyframes fail-tremble { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px) rotate(-0.6deg); } 75% { transform: translateX(2px) rotate(0.6deg); } }
#modal-fail.open .fs-shock { animation: fail-shock 0.5s cubic-bezier(.2, 1.8, .4, 1) 0.75s backwards, fail-shock-bob 1.2s ease-in-out 1.4s infinite; }
@keyframes fail-shock { 0% { opacity: 0; transform: scale(0) rotate(-30deg); } 100% { opacity: 1; transform: none; } }
@keyframes fail-shock-bob { 50% { transform: translateY(-4px) rotate(6deg); } }
#modal-fail.open .fail-tip { animation: win-fade-up 0.5s cubic-bezier(.16, 1, .3, 1) 0.9s backwards; }
#modal-fail.open .fail-progress { animation: win-fade-up 0.5s cubic-bezier(.16, 1, .3, 1) 1s backwards; }
#modal-fail.open .fp-fill { animation: fp-fill 1s cubic-bezier(.16, 1, .3, 1) 1.15s backwards; }
@keyframes fp-fill { from { width: 0; } }
#modal-fail.open .finish-stats > div { animation: win-flip 0.6s cubic-bezier(.2, 1.3, .4, 1) backwards; }
#modal-fail.open .finish-stats > div:nth-child(1) { animation-delay: 1.15s; }
#modal-fail.open .finish-stats > div:nth-child(2) { animation-delay: 1.25s; }
#modal-fail .finish-stats { perspective: 600px; }
#modal-fail.open .fail-actions { animation: win-fade-up 0.6s cubic-bezier(.16, 1, .3, 1) 0.8s backwards; }

@media (max-width: 560px) {
  #modal-fail .fail-panel { padding: 20px 16px 18px; border-radius: 24px; }
  #modal-fail .fail-title { font-size: 46px; }
  .fail-stage { height: 150px; margin: 0; }
  .fs-car { left: 6%; width: 160px; bottom: 26px; }
  .fs-car .ride { width: min(100%, calc(var(--ar) * 72px)); }
  .fs-shock { left: calc(6% + 64px); top: 14px; width: 28px; height: 28px; font-size: 18px; }
  .fs-ghost { right: 10%; height: 96px; bottom: 40px; }
  .fs-house { height: 92px; bottom: 44px; }
  .fs-moon { width: 32px; height: 32px; left: 50%; top: 12px; }
  .fail-tip { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #modal-fail *, #modal-fail .fail-panel { animation: none !important; }
  .fail-fx { display: none; }
}

/* contact card: the founder, as a highlighted card that catches the eye:
   a gold border with a light sweeping across it now and then, a large
   initials badge in a slowly turning glow ring, a gold "Founder" pill */
.contact-person {
  position: relative; display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 16px 18px; overflow: hidden;
  border-radius: 20px; border: 2px solid rgba(255, 200, 61, 0.7);
  background: linear-gradient(135deg, rgba(255, 200, 61, 0.16), rgba(255, 79, 139, 0.08) 60%, rgba(255, 255, 255, 0.03));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 26px rgba(255, 200, 61, 0.18);
}
.contact-person::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.22), transparent); transform: skewX(-18deg);
  animation: cp-sweep 5s ease-in-out 1.2s infinite;
}
@keyframes cp-sweep { 0%, 70% { left: -45%; } 100% { left: 130%; } }
.cp-badge {
  position: relative; display: grid; place-items: center; flex: none; width: 70px; height: 70px; border-radius: 50%;
  background: conic-gradient(#ffd75a, #ff4f8b, #8a5cff, #37e2a0, #ffd75a);
  box-shadow: 0 0 22px rgba(255, 200, 61, 0.45);
  animation: cp-ring 8s linear infinite;
}
.cp-badge > span {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(160deg, #ffe07a, #f5a623); color: var(--outline); font: 400 22px/1 var(--display); letter-spacing: 0.02em;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  animation: cp-ring 8s linear infinite reverse;            /* the letters stay upright while the ring turns */
}
@keyframes cp-ring { to { transform: rotate(360deg); } }
.cp-text { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.cp-role {
  padding: 4px 10px 3px; border-radius: 999px; background: var(--gold); color: var(--outline);
  font: 800 11px/1 var(--body); letter-spacing: 0.2em; text-transform: uppercase;
}
.contact-person b { display: block; font: 400 clamp(22px, 2.4vw, 28px)/1.1 var(--display); color: #fff; text-shadow: 0 2px 0 rgba(10, 6, 30, 0.6); }
.contact-person small { display: block; font: 700 12px/1.2 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: #e8dcff; opacity: 0.85; }
.foot-founder { color: var(--gold); font-weight: 800; }
@media (max-width: 430px) {
  .contact-person { gap: 12px; padding: 14px; }
  .cp-badge { width: 58px; height: 58px; } .cp-badge > span { width: 50px; height: 50px; font-size: 18px; }
  .contact-person b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .contact-person::after, .cp-badge, .cp-badge > span { animation: none; } }
/* phones: keep the email address on one line */
@media (max-width: 430px) { .contact-mail > span:last-child { font-size: 13.5px; white-space: nowrap; } .contact-mail { padding-right: 12px; } }

/* contact form, sent in the background: field errors, the hidden spam trap,
   a spinner while sending, and the "Message sent!" card */
.contact-side { min-width: 0; }
.contact-form[hidden], .contact-sent[hidden] { display: none; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field-err { min-height: 0; font: 600 12.5px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: #ff9fbf; }
.field-err:empty { display: none; }
.contact-form [aria-invalid="true"] { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 79, 139, 0.18); }
.contact-form .fine a { color: var(--gold); font-weight: 700; }
.contact-form .btn-play.is-sending { opacity: 0.85; cursor: progress; }
.contact-form .btn-play.is-sending .btn-play-icon svg { display: none; }
.contact-form .btn-play.is-sending .btn-play-icon::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.contact-sent {
  display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 100%; padding: 26px 18px; text-align: center;
  border-radius: 22px; border: 2px solid rgba(55, 226, 160, 0.55); background: linear-gradient(160deg, rgba(55, 226, 160, 0.12), rgba(255, 255, 255, 0.03));
  outline: none;
}
.contact-sent h3 { margin: 4px 0 0; font: 400 clamp(28px, 3.4vw, 38px)/1 var(--display); text-transform: uppercase; color: #fff; }
.contact-sent p { margin: 0 0 6px; color: #d9f8ec; max-width: 34ch; }
.cs-check { width: 72px; height: 72px; fill: none; stroke: #37e2a0; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgba(55, 226, 160, 0.5)); }
.cs-check circle { stroke-dasharray: 145; stroke-dashoffset: 0; }
.cs-check path { stroke-dasharray: 40; stroke-dashoffset: 0; }
.contact-sent.in { animation: win-fade-up 0.5s cubic-bezier(.16, 1, .3, 1); }
.contact-sent.in .cs-check circle { animation: cs-draw 0.6s ease-out backwards; }
.contact-sent.in .cs-check path { animation: cs-draw-tick 0.4s ease-out 0.45s backwards; }
@keyframes cs-draw { from { stroke-dashoffset: 145; } }
@keyframes cs-draw-tick { from { stroke-dashoffset: 40; } }
@media (prefers-reduced-motion: reduce) { .contact-sent.in, .contact-sent.in .cs-check * { animation: none; } }

/* fail screen: a red danger outline. The card gets a red border whose glow
   pulses like a warning light, and the screen edges flash red as it opens,
   then keep a faint red glow. */
#modal-fail .fail-panel {
  border: 3px solid #ff3b5c;
  box-shadow: 0 0 0 1px rgba(255, 59, 92, 0.35), 0 0 28px rgba(255, 40, 80, 0.55), 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 0 22px rgba(255, 40, 80, 0.12);
}
#modal-fail.open .fail-panel { animation: fail-in 0.75s cubic-bezier(.2, 1.2, .4, 1), fail-alarm 1.6s ease-in-out 0.8s infinite; }
@keyframes fail-alarm {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 59, 92, 0.35), 0 0 22px rgba(255, 40, 80, 0.45), 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 0 18px rgba(255, 40, 80, 0.1); border-color: #ff3b5c; }
  50% { box-shadow: 0 0 0 4px rgba(255, 59, 92, 0.3), 0 0 46px rgba(255, 40, 80, 0.8), 0 30px 80px rgba(0, 0, 0, 0.65), inset 0 0 30px rgba(255, 40, 80, 0.2); border-color: #ff6b84; }
}
.fail-fx::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 4px rgba(255, 40, 70, 0.55), inset 0 0 120px 30px rgba(255, 20, 60, 0.28);
}
#modal-fail.open .fail-fx::after { animation: fail-edge 1.4s ease-out both; }
@keyframes fail-edge {
  0% { opacity: 0; }
  12% { opacity: 1; box-shadow: inset 0 0 0 10px rgba(255, 40, 70, 0.9), inset 0 0 180px 60px rgba(255, 20, 60, 0.55); }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { #modal-fail .fail-fx { display: block; } #modal-fail .fail-fx > * { display: none; } }

/* fail screen, fell into a river: no ghost or haunted house; a river runs
   along the bottom of the scene and the car nose-dives into it */
.fail-stage.is-water .fs-ghost, .fail-stage.is-water .fs-house { display: none; }
.fail-stage.is-water .fs-mist {
  z-index: 3; bottom: 0; height: 62px; filter: none; border-top: 3px solid rgba(255, 255, 255, 0.75);
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, 0.35) 30px 52px, transparent 52px 90px) 0 18px / 180px 3px no-repeat,
    linear-gradient(180deg, rgba(98, 196, 240, 0.92), rgba(30, 110, 180, 0.96) 60%, #14457e);
}
#modal-fail.open .fail-stage.is-water .fs-mist { animation: river-flow 2.4s linear infinite; }
@keyframes river-flow { from { background-position: 0 18px, 0 0; } to { background-position: -180px 18px, 0 0; } }
.fail-stage.is-water .fs-car { left: 50%; margin-left: -100px; bottom: 28px; }
#modal-fail.open .fail-stage.is-water .fs-car { animation: car-sink 1.1s cubic-bezier(.3, .2, .3, 1) 0.3s both, car-bob 2.2s ease-in-out 1.4s infinite; }
@keyframes car-sink { from { transform: translateY(-70px) rotate(0deg); } to { transform: translateY(0) rotate(14deg); } }
@keyframes car-bob { 0%, 100% { transform: rotate(14deg) translateY(0); } 50% { transform: rotate(11deg) translateY(4px); } }
.fail-stage.is-water .fs-shock { left: calc(50% + 40px); }
.fail-stage.is-water::after {           /* a few bubbles rising from the car */
  content: ""; position: absolute; left: calc(50% + 20px); bottom: 12px; z-index: 4; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8); box-shadow: 14px -10px 0 -1px rgba(255, 255, 255, 0.7), -10px -18px 0 0 rgba(255, 255, 255, 0.6);
  animation: bubbles 1.8s ease-in 1.2s infinite; opacity: 0;
}
@keyframes bubbles { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }
@media (max-width: 560px) { .fail-stage.is-water .fs-car { margin-left: -80px; } }

/* Reverse: a glossy blue push-button beside Brake, with a label pill below
   like Brake, Jump and Gas (Brake itself only ever slows and stops) */
.pedal.pedal-reverse.is-icon, .pedal.pedal-reverse.is-icon.down {
  --c: #4f7dff; --c-down: #3459c9;
  width: auto; aspect-ratio: auto; height: auto; padding: 0; gap: 7px;
  border: 0; border-radius: 16px; background: none; box-shadow: none; transform: none;
  margin-bottom: clamp(10px, 3vw, 16px);
}
.rev-disc {
  display: grid; place-items: center; width: clamp(54px, 15vw, 64px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #a9c2ff, #4f7dff 55%, #2f55c4); border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 0 #22398a, 0 10px 18px rgba(10, 6, 30, 0.35); color: #fff;
  transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.35s;
}
.rev-disc svg { width: 28px; height: 28px; fill: currentColor; filter: drop-shadow(0 2px 0 rgba(20, 30, 90, 0.5)); }
.pedal-reverse.is-icon.down .rev-disc { transform: translateY(5px) scale(0.95); box-shadow: 0 1px 0 #22398a, 0 4px 8px rgba(10, 6, 30, 0.3); transition-duration: 0.08s; }
.pedal-reverse.is-icon.down .pedal-label { background: var(--c-down); transform: scale(0.95); transition-duration: 0.08s; }
@media (max-width: 760px) { .rev-disc { width: 50px; } .rev-disc svg { width: 24px; height: 24px; } }

/* ---------- Coin pickup: the coin flies to the counter (game.js coinPop) */
.coin-fly {
  position: fixed; left: 0; top: 0; z-index: 110; pointer-events: none; will-change: transform;   /* over the game (80), under modals (120) */
  border-width: 3px;
  box-shadow: inset 4px -4px 0 rgba(0, 0, 0, 0.12), 0 0 18px 4px rgba(255, 210, 60, 0.75);
}
.coin-fly::after { width: 18%; margin-left: -9%; }
/* it lands: the counter pops and glows, a ring spreads, the coin spins,
   the number ticks up and a "+1" floats off */
.hud-coins { position: relative; }
.hud-coins.got { animation: coin-got 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.hud-coins.got::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  border: 3px solid #ffd84a; animation: coin-ring 0.6s ease-out forwards;
}
.hud-coins.got .coin-ico { animation: coin-spin 0.55s ease-out; }
.hud-coins [data-val].tick { display: inline-block; animation: coin-tick 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); }
.coin-plus {
  position: absolute; left: calc(100% + 6px); top: 10px; pointer-events: none; white-space: nowrap;
  font: 400 20px/1 var(--display); color: #fff3b0;
  text-shadow: 0 0 8px rgba(255, 200, 60, 0.95), 0 2px 0 rgba(120, 70, 0, 0.6);
  animation: coin-plus 0.9s ease-out forwards;
}
@keyframes coin-got {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); background: rgba(70, 48, 10, 0.92); border-color: #ffd84a; box-shadow: 0 0 22px 4px rgba(255, 200, 60, 0.7); }
  100% { transform: scale(1); }
}
@keyframes coin-ring { from { opacity: 0.95; transform: scale(1); } to { opacity: 0; transform: scale(1.35, 1.7); } }
@keyframes coin-spin { from { transform: rotateY(0) scale(1.25); } to { transform: rotateY(360deg) scale(1); } }
@keyframes coin-tick {
  0% { transform: translateY(-45%) scale(1.4); color: #fff; text-shadow: 0 0 12px rgba(255, 220, 90, 1); }
  100% { transform: none; }
}
@keyframes coin-plus {
  0% { opacity: 0; transform: translateY(6px) scale(0.6); }
  25% { opacity: 1; transform: translateY(-8px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-34px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-coins.got, .hud-coins.got::after, .hud-coins.got .coin-ico, .hud-coins [data-val].tick, .coin-plus { animation-duration: 0.01s; }
}

/* Jump: a glossy orange push-button in the same style as Reverse (an up
   arrow on a round button, label pill below). Pressing sinks it onto its
   base; releasing springs it back. */
.pedal.pedal-jump.is-icon, .pedal.pedal-jump.is-icon.down {
  --c: #f5a623; --c-down: #cf8710;
  width: auto; aspect-ratio: auto; height: auto; padding: 0; gap: 7px;
  border: 0; border-radius: 16px; background: none; box-shadow: none; transform: none;
  margin-bottom: clamp(10px, 3vw, 16px);
}
.rev-disc.jump-disc {
  background: radial-gradient(circle at 35% 28%, #ffe09a, #f5a623 55%, #c9790b);
  box-shadow: 0 6px 0 #94560a, 0 10px 18px rgba(10, 6, 30, 0.35);
}
.rev-disc.jump-disc svg { filter: drop-shadow(0 2px 0 rgba(120, 62, 0, 0.5)); }
.pedal-jump.is-icon.down .rev-disc.jump-disc { transform: translateY(5px) scale(0.95); box-shadow: 0 1px 0 #94560a, 0 4px 8px rgba(10, 6, 30, 0.3); transition-duration: 0.08s; }
.pedal-jump.is-icon.down .pedal-label { background: var(--c-down); transform: scale(0.95); transition-duration: 0.08s; }

/* ==========================================================================
   GAME PLAYER: a game played inside the site (hub.js). A bar on top (logo,
   genre, Full screen, Close) and the game in a frame filling the rest.
   Portrait games stand in a phone-shaped screen on wide displays.
   ========================================================================== */
html.player-on, html.player-on body { overflow: hidden; overscroll-behavior: none; }
.game-player {
  --accent: var(--gold);
  position: fixed; inset: 0; z-index: 130; display: grid; grid-template-rows: auto 1fr;
  background: #0b0722;
  background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--accent) 22%, #0b0722), #07051a 70%);
  opacity: 0; transition: opacity 0.22s ease;
}
.game-player.open { opacity: 1; }
.game-player[hidden] { display: none; }
.player-bar {
  display: flex; align-items: center; gap: 14px; min-height: 58px;
  padding: max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
  background: rgba(16, 11, 42, 0.96); border-bottom: 3px solid var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transform: translateY(-100%); transition: transform 0.3s cubic-bezier(.2, 1.2, .4, 1);
}
.game-player.open .player-bar { transform: none; }
.player-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.player-genre { font: 700 12px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.player-actions { margin-left: auto; display: flex; gap: 10px; }
.player-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; min-width: 42px; padding: 0 12px; justify-content: center;
  border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: #fff;
  font: 400 15px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
}
.player-btn svg { width: 22px; height: 22px; fill: currentColor; }
.player-btn:hover { background: rgba(255, 255, 255, 0.14); }
.player-btn:active { transform: scale(0.95); }
.player-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.player-close { background: var(--pink); border-color: rgba(255, 255, 255, 0.4); }
.player-close:hover { background: #ff6b9b; }
.player-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.player-frame {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto;
  width: 100%; height: 100%; border: 0; display: block; background: #000;
  opacity: 0; transition: opacity 0.35s ease;
}
.game-player.loaded .player-frame { opacity: 1; }
/* a portrait game on a wide screen: a phone-shaped screen in the middle */
.game-player.is-portrait .player-frame {
  width: min(100%, calc((100svh - 58px) * 9 / 16)); height: 100%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.55);
}
/* loading: the game's logo with a spinner, until the frame has loaded */
.player-load { grid-area: 1 / 1; display: grid; justify-items: center; gap: 22px; pointer-events: none; transition: opacity 0.3s; }
.game-player.loaded .player-load { opacity: 0; }
.player-load img { width: min(320px, 70vw); height: auto; max-height: 30svh; object-fit: contain; animation: player-bob 1.6s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.player-spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.18); border-top-color: var(--accent); animation: player-spin 0.8s linear infinite; }
@keyframes player-spin { to { transform: rotate(360deg); } }
@keyframes player-bob { 50% { transform: translateY(-8px) scale(1.03); } }
@media (max-width: 760px) {
  .player-bar { min-height: 50px; gap: 10px; }
  .player-logo { height: 32px; max-width: 130px; }
  .player-genre { display: none; }
  .player-btn { height: 38px; min-width: 38px; padding: 0 10px; font-size: 13px; }
  .game-player.is-portrait .player-frame { width: 100%; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .game-player, .player-bar, .player-frame { transition: none; }
  .player-load img { animation: none; }
}