/****************************************/
/* common styles used for v1 through v4 */
/* Minimal-chrome fullscreen version    */
/****************************************/

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}

/* Hide the whole settings/tabs table — only final.html remains, no need to navigate. */
#controls { display: none; }

/* Kill the instructions block entirely */
#instructions { display: none; }
#stats        { display: none; }

/* Full-viewport game surface */
#racer  { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; border: none; z-index: 0; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; background-color: #000000; }

/* Mute button completely removed */
#mute { display: none !important; }

/*****************************************/
/* SPEEDOMETER (top-left overlay)        */
/*****************************************/

#hud { display: none; }                              /* legacy HUD bar killed */

#speedo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 120px;
  z-index: 100;
  pointer-events: none;
  user-select: none;
  line-height: 0;
}

.speedo__dial {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* Needle: silver-base pivot at (43.5%, 82%) of the needle image lines up with
   the dial's pivot at (49.5%, 45.6%) of the container. Rotation applies about
   the pivot. Uses CSS variable --deg driven by JS each frame. */
.speedo__needle {
  position: absolute;
  left: 49.5%;
  top: 45.6%;
  width: 11%;                                       /* 66/600 of the dial width */
  height: auto;
  transform-origin: 43.5% 82%;
  transform: translate(-43.5%, -82%) rotate(var(--deg, 0deg));
  image-rendering: pixelated;
  will-change: transform;
}

/* Odometer window — sits over the 6-compartment slot at (50%, 68.65%) of the
   600×504 source. Slot inner is ~150 px wide at source → ~30 px at 120 px
   display. Digits sized to fit inside that box. */
.speedo__odo {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/*****************************************/
/* SCREEN SHAKE — police rod hit feedback */
/*****************************************/
@keyframes police-hit-shake {
  0%,100% { transform: translate(0, 0); }
  15%     { transform: translate(-7px, 3px); }
  30%     { transform: translate(5px, -2px); }
  45%     { transform: translate(-4px, 4px); }
  60%     { transform: translate(4px, -1px); }
  80%     { transform: translate(-2px, 2px); }
}
canvas#canvas.is-shaking {
  animation: police-hit-shake 0.4s ease-in-out;
}

/*****************************************/
/* SCORE CARD (right of speedo)          */
/*****************************************/

/* Glass-morphism card, no stroke. Labels in Inter chrome style (mirrors
   the site's scroll-indicator label + deploy-version treatment); values
   in the site display face (New Black Typeface) so the numbers match
   the register of the main-site headline. */
.score-card {
  position: absolute;
  /* Vertically centred with the speedo: speedo top 20 + half its height
     (120 × 504/600 ÷ 2 ≈ 50) = 70. translateY(-50%) then centres this
     card's own box on that midline. */
  top: 70px;
  transform: translateY(-50%);
  left: 156px;                                       /* speedo (120px) + 16px gap */
  padding: 14px 20px 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-radius: 14px;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  z-index: 100;
  pointer-events: none;
  user-select: none;
  min-width: 160px;
}
.score-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.score-card__row--current { margin-bottom: 4px; }
.score-card__label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.score-card__row--best .score-card__label { color: rgba(255, 255, 255, 0.55); }
.score-card__value {
  font-family: 'New Black', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.score-card__row--current .score-card__value {
  font-size: 24px;
  color: #fff;
}
.score-card__row--best .score-card__value {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
}
/* Micro-pulse when the current run passes the best. */
.score-card.is-record-broken .score-card__row--best .score-card__value {
  color: #fff;
  animation: score-pulse 1.6s ease-out;
}
@keyframes score-pulse {
  0%   { text-shadow: 0 0 0 rgba(255,255,255,0); }
  30%  { text-shadow: 0 0 12px rgba(255,255,255,0.9); }
  100% { text-shadow: 0 0 0 rgba(255,255,255,0); }
}

/*****************************************/
/* CRASH PROMPT + LEADERBOARD            */
/* Black/white only. Site fonts:         */
/*   display face: New Black Typeface    */
/*   body:         Inter                 */
/* Matches the About/Contact chat-bubble */
/* language elsewhere on the site.       */
/*****************************************/

/*****************************************/
/* POST-CRASH PROMPT                     */
/*****************************************/

/* Post-crash prompt — redesigned 2026-08-27 to match Arun's Figma
   node 311:51. Full-viewport translucent-glass card with two
   equal columns (Current Score + Leaderboard on the left, Your
   Best + Try Again on the right).

   All type sizes and colours map to the site's design system:
     --ink  = #000
     --paper = #fff
     --font-body = 'Inter'
     --font-display = 'New Black'  (game uses this local face name)
     --type-body-m = 18px / 16px mobile
     --type-display-m = clamp(28px, 5vw, 50px) / 28px mobile

   Backdrop is transparent — the frosted look comes from the card
   itself (rgba(255,255,255,0.9) + backdrop-filter: blur(17px)),
   matching the Figma spec exactly. */
.crash-prompt {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mobile default — transparent so the game canvas stays fully
     visible behind the card. Desktop gets a dark frosted-glass
     backdrop via the media query below. */
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 500;
}
.crash-prompt.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Desktop backdrop — dark frosted glass. Blurs the game canvas
   behind the popup and tints it dark so the card reads as the
   focus. Mobile is unaffected. Per Arun 2026-08-27. */
@media (min-width: 768px) {
  .crash-prompt {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
  }
}

/* Card — matches Figma 311:51 exactly.
   padding 60px 60px 40px 60px · flex column · gap 10px · center. */
.crash-prompt__card {
  position: relative;                   /* anchor for the close X inside */
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(17px);
          backdrop-filter: blur(17px);
  border-radius: 12px;
  padding: 60px 60px 40px 60px;
  display: flex;
  flex-direction: column;               /* row 1: scores grid · row 2: Try Again */
  align-items: center;
  gap: 10px;
  color: #000;
}
/* Score row — matches Figma 311:52: two flex-column score blocks
   side-by-side, gap 60, centered. */
.crash-prompt__scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}
.crash-prompt__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                              /* label sits directly above value */
}
@media (max-width: 767px) {
  .crash-prompt__scores { gap: 40px; }
}

/* Game-page override — mute button moves to top-right (was top-left
   site-wide). Only affects the retro-racer, not index/about/case-study.
   Per Arun 2026-09-06. */
.sound-toggle { left: auto; right: 60px; }
@media (max-width: 767px) {
  .sound-toggle { right: 20px; }
}

/* Tablet-only: disable native touch scrolling / pinch on the game
   surface so the touch-drive gestures wired in game-touch.js aren't
   fighting the browser. Excludes UI overlays (mute, close X, crash
   prompt, chat, panel) so those stay tap-responsive. */
@media (min-width: 768px) and (pointer: coarse) {
  html, body { touch-action: none; overscroll-behavior: none; }
  .crash-prompt, .about-panel, .hero-chat, .sound-toggle,
  .night-toggle, .site-nav { touch-action: auto; }
}

/* Close (X) — INSIDE the card, top-right corner (Figma 388:21 at
   top:14, right:14 offsets). Shared close.svg has stroke="white",
   inverted to black via CSS filter so it reads on the white card. */
.crash-prompt__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 160ms ease;
  z-index: 2;
}
.crash-prompt__close:hover { opacity: 1; }
.crash-prompt__close img {
  width: 100%;
  height: 100%;
  display: block;
  filter: invert(1);                    /* white-stroke SVG → black-on-white */
}
@media (max-width: 767px) {
  .crash-prompt__close { top: 12px; right: 12px; width: 22px; height: 22px; }
}

/* ── Soft-finish variant ─────────────────────────────────────
   Reuses the crash-card shell verbatim (same white card, same
   padding, same close X, same score row). Only adds what's
   unique: headline, warm note, buttons row, footer link, and a
   longer 1 s ease-in fade instead of the crash card's 260 ms
   snap. Per Arun 2026-09-09 handoff brief. */
.crash-prompt--soft { transition: opacity 1000ms ease-in; }

.crash-prompt__headline {
  margin: 0;
  font-family: 'New Black', system-ui, sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #000;
  text-align: center;
}
@media (max-width: 767px) {
  .crash-prompt__headline { font-size: 28px; }
}

.crash-prompt__note {
  margin: 0;
  max-width: 420px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
}

.crash-prompt__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.crash-prompt__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.crash-prompt__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Label — matches design system .type--body-m (Inter 400, 18px,
   line 1.5). Drops to 16px on mobile per --type-body-m mobile. */
.crash-prompt__label {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #000;
  text-align: center;
}

/* Value — per Figma 311:56 / 311:62: NewBlack 700, 50px, line 1.4,
   letter-spacing -0.5px, uppercase. Mobile drops to 28px. */
.crash-prompt__value {
  margin: 0;
  font-family: 'New Black', system-ui, sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.4;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Pill button — ghost (transparent, black border, black text) is
   the default. .crash-prompt__btn--primary flips to filled ink. */
.crash-prompt__btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  text-align: center;
  white-space: nowrap;
}
.crash-prompt__btn:hover { background: rgba(0, 0, 0, 0.06); }

.crash-prompt__btn--primary {
  background: #000;
  color: #fff;
  border-color: #000;
  min-width: 149px;                    /* Figma 388:11 baseline width */
}
.crash-prompt__btn--primary:hover { background: rgba(0, 0, 0, 0.85); color: #fff; }

/* Outline variant — transparent fill, 2px black border. Sits next
   to Try Again on the crash card as "The ride" (added 2026-09-10
   per Arun). Matches Try Again's geometry so the pair reads as a
   balanced two-button row. */
.crash-prompt__btn--outline {
  background: transparent;
  color: #000;
  border: 2px solid #000;
  min-width: 149px;
}
.crash-prompt__btn--outline:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* Primary CTA (soft-finish) — pill visual language ported from
   About's .contact__row__cta ("View the case study"): Inter 700,
   pill radius, tight padding, same hover flip. Colors adapted
   for the WHITE soft-finish card: black fill / white text at
   rest, inverts to white / inset-black-border on hover. Placed
   AFTER .crash-prompt__btn so it wins the equal-specificity
   cascade over the base. */
.crash-prompt__btn--cta {
  padding: 12px 22px;
  border-radius: 999px;
  border: none;
  background: #000;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease;
}
.crash-prompt__btn--cta:hover,
.crash-prompt__btn--cta:focus-visible {
  background: #fff;
  color: #000;
  box-shadow: inset 0 0 0 2px #000;
  outline: none;
}

/* Ghost variant — same pill geometry, transparent fill, subtle
   border. Sits alongside the CTA as the secondary option. */
.crash-prompt__btn--ghost {
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: transparent;
  color: #000;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}
.crash-prompt__btn--ghost:hover,
.crash-prompt__btn--ghost:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  border-color: #000;
  outline: none;
}

/* Mobile — smaller padding + gap, type sizes drop to design
   system mobile values. Card still stays two-column. */
@media (max-width: 767px) {
  .crash-prompt__card {
    padding: 40px 28px;
    gap: 32px;
    max-width: calc(100vw - 32px);
  }
  .crash-prompt__label,
  .crash-prompt__btn {
    font-size: 16px;
  }
  .crash-prompt__value {
    font-size: 28px;
  }
  .crash-prompt__btn {
    padding: 8px 16px;
  }
}

/*****************************************/
/* LEADERBOARD MODAL                     */
/*****************************************/

.leaderboard {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
  z-index: 600;
}
.leaderboard.is-open {
  opacity: 1;
  pointer-events: auto;
}
.leaderboard__card {
  width: min(460px, 92vw);
  max-height: 88vh;
  background: #fff;
  color: #111;
  border-radius: 12px;
  padding: 24px 24px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.leaderboard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.leaderboard__title {
  font-family: 'New Black', system-ui, sans-serif;
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: #000;
  line-height: 1;
}
.leaderboard__close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}
.leaderboard__close:hover { background: #000; color: #fff; }
.leaderboard__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}
.leaderboard__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
}
.leaderboard__row:last-child { border-bottom: none; }
.leaderboard__row--empty {
  display: block;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  padding: 40px 0;
}
.leaderboard__rank {
  color: rgba(0, 0, 0, 0.4);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: right;
}
.leaderboard__name {
  color: #000;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.leaderboard__value {
  color: #000;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  letter-spacing: 0.02em;
}
/* #1 rider — bigger display type, still black/white. */
.leaderboard__row:first-child .leaderboard__rank,
.leaderboard__row:first-child .leaderboard__name,
.leaderboard__row:first-child .leaderboard__value {
  font-family: 'New Black', system-ui, sans-serif;
  color: #000;
  font-size: 18px;
}
/* The visitor's own row — subtle light-gray highlight with left bar. */
.leaderboard__row--me {
  background: rgba(0, 0, 0, 0.04);
  border-left: 2px solid #000;
  padding-left: 6px;
}


/*****************************************/
/* PAUSE STATE — freeze input visually   */
/*****************************************/

/* When the crash prompt is up, dim the canvas slightly so focus goes to
   the card. Purely aesthetic — the game loop is already paused via JS. */
body.is-post-crash #canvas { opacity: 0.6; transition: opacity 200ms ease; }