/* ============================================================
   Sfax el Mezyena — Interactive Map
   Palette: ochre / Tunisian blue / olive / sandstone / white
   ============================================================ */

:root {
  --ochre: #c97b3c;
  --ochre-deep: #8a4a1f;
  --ochre-light: #e4a76a;
  --tunis-blue: #1f4e6e;
  --tunis-blue-deep: #0d2c44;
  --olive: #6a7a3a;
  --sand: #f4e7d2;
  --sand-deep: #d9c39a;
  --ink: #2a1a0e;
  --paper: #fbf6ec;
  --white: #ffffff;
  --shadow: 0 12px 40px rgba(42, 26, 14, 0.18);
  --shadow-sm: 0 4px 14px rgba(42, 26, 14, 0.12);
  --r: 14px;
  --r-sm: 8px;
}

/* Dark / night theme */
body.night {
  --paper: #16110a;
  --sand: #2a1f12;
  --ink: #f4e7d2;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Inter", -apple-system, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  transition: background 0.5s, color 0.5s;
}

/* ===== Loader — minimal, elegant ===== */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: #11100c;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease;
}
.loader.gone { opacity: 0; visibility: hidden; }
.loader-inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.arabic-title {
  font-family: "Amiri", serif;
  font-size: clamp(64px, 11vw, 120px);
  font-weight: 700;
  color: #e8d4a5;
  letter-spacing: 6px;
  margin: 0 0 12px;
  line-height: 1;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.1s forwards;
}
.brand-en {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 10px;
  color: #a08e6a;
  margin: 0 0 36px;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.35s forwards;
}
.brand-en em {
  font-style: normal;
  color: #d4b87a;
  letter-spacing: 6px;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.loader-bar {
  width: clamp(180px, 24vw, 280px); height: 1px;
  background: rgba(212, 184, 122, 0.15);
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.55s forwards;
}
.loader-fill {
  height: 100%; width: 0%;
  background: #d4b87a;
  transition: width 0.4s ease-out;
}

.loader-sub {
  margin-top: 22px;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(13px, 1.2vw, 15px);
  color: #6e6048;
  letter-spacing: 3px;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.75s forwards;
}

/* ─── SFAXIEN-FAMILY GATE — preloader gamification ───────────
   Appears between the brand and the loading bar. Asks for a family
   name in Latin or Arabic, checks against the Sfaxien-families list,
   grants access (or politely bounces non-Sfaxiens). Lives DURING
   the preload window so the wait turns into a moment of identity. */
.loader-gate {
  margin: 12px 0 4px;
  width: clamp(260px, 28vw, 360px);
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.65s forwards;
  text-align: center;
}
.loader-gate.granted .gate-prompt,
.loader-gate.granted .gate-form { display: none; }
.loader-gate.denied  .gate-form { opacity: 0.6; pointer-events: none; }

.gate-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  color: #d4b87a;
  font-family: "Cormorant Garamond", serif;
}
.gate-prompt-en {
  font-size: 14px;
  letter-spacing: 2px;
  font-style: italic;
}
.gate-prompt-ar {
  font-family: "Amiri", serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: #b09870;
}

.gate-form {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.gate-input {
  flex: 1;
  max-width: 240px;
  padding: 9px 14px;
  background: rgba(20, 16, 10, 0.65);
  border: 1px solid rgba(244, 215, 144, 0.35);
  border-radius: 8px;
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  letter-spacing: 1px;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
  text-align: center;
}
.gate-input:focus {
  border-color: rgba(244, 215, 144, 0.85);
  box-shadow: 0 0 12px rgba(244, 215, 144, 0.25);
}
.gate-input::placeholder {
  color: rgba(212, 184, 122, 0.45);
  font-style: italic;
}
.gate-submit {
  width: 38px;
  background: rgba(244, 215, 144, 0.12);
  border: 1px solid rgba(244, 215, 144, 0.45);
  border-radius: 8px;
  color: #f4d790;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gate-submit:hover {
  background: rgba(244, 215, 144, 0.28);
  border-color: rgba(244, 215, 144, 0.85);
}

.gate-result {
  min-height: 22px;
  margin-top: 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: 14px;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}
.gate-result.granted { color: #8fdb8f; font-weight: 600; }
.gate-result.denied  { color: #e8a070; font-style: italic; }

/* Guest-bypass button removed — strict Sfaxien gate. */

/* MB-loaded indicator — tiny line below the spinner text, monospace */
.loader-weight {
  margin-top: 8px;
  font-family: ui-monospace, "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  color: #5a4e3a;
  opacity: 0;
  animation: fadeUp 1.2s ease-out 0.85s forwards;
}

/* ENTER SFAX button — hidden until everything has loaded, then
   revealed via .ready. Click → triggers loader fade. Gives the
   user explicit control over when the WebGL render begins, so the
   first frame isn't a stutter during a still-downloading scene. */
.loader-enter {
  margin-top: 36px;
  display: none;            /* hidden by default; .ready reveals */
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  background: linear-gradient(180deg, rgba(244,215,144,0.18) 0%, rgba(244,215,144,0.08) 100%);
  border: 1.5px solid rgba(244, 215, 144, 0.75);
  border-radius: 11px;
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(244, 215, 144, 0.18);
}
.loader.ready .loader-enter {
  display: inline-flex;
  animation: enterReveal 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes enterReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.loader-enter:hover {
  background: rgba(244, 215, 144, 0.32);
  border-color: rgba(244, 215, 144, 1);
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(244, 215, 144, 0.42);
}
.loader-enter:active {
  transform: translateY(0) scale(0.98);
}
.loader-enter-arabic {
  font-family: "Amiri", serif;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: 700;
}
.loader-enter-en {
  font-weight: 500;
}
.loader-enter-arrow {
  font-size: 22px;
  color: #e8d4a5;
}

/* ===== Drive HUD speedometer ===== */
.drive-hud {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 1100;
  padding: 14px 16px 12px;
  background: rgba(20, 16, 10, 0.82);
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
  border-radius: 14px;
  border: 1px solid rgba(244, 215, 144, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(244, 215, 144, 0.08);
  display: none;
  pointer-events: none;
  text-shadow: 0 0 10px rgba(244, 215, 144, 0.3);
}
body.driving .drive-hud { display: block; }

.speedo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.speedo-dial {
  position: relative;
  width: 160px; height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(244, 215, 144, 0.08) 0%, rgba(20, 16, 10, 0) 60%),
    radial-gradient(circle at 50% 50%, #1a140c 0%, #0c0905 70%, #050402 100%);
  border: 2px solid rgba(244, 215, 144, 0.22);
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.85),
    inset 0 0 4px rgba(244, 215, 144, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
/* Coloured arc covering 240deg sweep starting from 7-o'clock (210deg in CSS
   conic terms, which starts at 12-o'clock). Green -> amber -> red. */
.speedo-arc {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: conic-gradient(
    from 210deg,
    #6ad26a 0deg,
    #cfe05a 80deg,
    #f4d790 130deg,
    #ff9a3c 180deg,
    #ff4f2a 240deg,
    transparent 240deg 360deg
  );
  -webkit-mask:
    radial-gradient(circle, transparent 56%, #000 56%, #000 70%, transparent 70%);
          mask:
    radial-gradient(circle, transparent 56%, #000 56%, #000 70%, transparent 70%);
  opacity: 0.85;
  pointer-events: none;
}
.speedo-ticks {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.speedo-ticks .tick {
  stroke: rgba(244, 215, 144, 0.65);
  stroke-width: 1.4;
}
.speedo-ticks .tick.major { stroke-width: 2.4; stroke: rgba(244, 215, 144, 0.95); }
.speedo-ticks .tick-label {
  fill: rgba(244, 215, 144, 0.85);
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.speedo-needle {
  position: absolute;
  left: 50%; top: 50%;
  width: 4px; height: 62px;
  margin-left: -2px; margin-top: -54px;
  background: linear-gradient(180deg, #ffeac5 0%, #ff7a2a 70%, #c44a18 100%);
  border-radius: 3px 3px 1px 1px;
  transform-origin: 50% 87%;
  transform: rotate(-120deg);
  transition: transform 0.12s cubic-bezier(0.25, 0.8, 0.4, 1);
  box-shadow: 0 0 6px rgba(255, 140, 60, 0.65), 0 2px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.speedo-hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin-left: -8px; margin-top: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4d790 0%, #a8742b 60%, #4a2f10 100%);
  box-shadow: 0 0 0 2px rgba(20, 16, 10, 0.9), 0 2px 4px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.speedo-unit {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  font-family: "Cormorant Garamond", serif;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(244, 215, 144, 0.7);
  text-shadow: none;
  pointer-events: none;
}
.speedo-readout {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  width: 100%;
}
.speedo-digital {
  flex: 1;
  font-family: "Inter", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f4d790;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(244, 215, 144, 0.18);
  border-radius: 8px;
  padding: 3px 10px;
  text-align: center;
  text-shadow: 0 0 8px rgba(244, 215, 144, 0.45);
  min-width: 70px;
}
.speedo-gear {
  width: 38px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1a140c;
  background: linear-gradient(180deg, #f4d790 0%, #c8a370 100%);
  border: 1px solid rgba(244, 215, 144, 0.4);
  border-radius: 8px;
  padding: 3px 0;
  text-align: center;
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: background 0.2s, color 0.2s;
}
.speedo-gear[data-gear="R"] {
  background: linear-gradient(180deg, #ff8a6c 0%, #c44a18 100%);
  color: #fff;
}
.speedo-gear[data-gear="N"] {
  background: linear-gradient(180deg, #a8a08a 0%, #6a624e 100%);
  color: #1a140c;
}
.speedo-gear[data-gear="P"] {
  background: linear-gradient(180deg, #cfe0d8 0%, #6f8e80 100%);
  color: #1a140c;
}
/* ===== Nitro gauge (left side, only visible while driving) ===== */
.nitro-gauge {
  position: fixed; left: 28px; bottom: 86px;
  z-index: 1100;
  width: 86px;
  padding: 14px 12px 10px;
  background: rgba(20, 16, 10, 0.78);
  border: 1px solid rgba(244, 215, 144, 0.22);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: none;
  pointer-events: none;
  text-align: center;
}
body.driving .nitro-gauge { display: block; }
/* ===== Helicopter-view HUD hint =====
   Moved from LEFT (above the nitro gauge) to RIGHT (above the
   speedometer) on 2026-05-16 — user wanted a tighter right-edge
   driving cluster. The speedometer sits at right:28 bottom:28 with
   a height ~220px, so we anchor 250px up to give a 14px gap above. */
.heli-hud-hint {
  position: fixed;
  right: 28px;
  bottom: 258px;
  z-index: 1100;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: rgba(20, 16, 10, 0.78);
  border: 1px solid rgba(244, 215, 144, 0.22);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  font-family: "Cormorant Garamond", serif;
  color: #d4b87a;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
body.driving .heli-hud-hint { display: inline-flex; }
.heli-hud-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: rgba(244, 215, 144, 0.14);
  border: 1px solid rgba(244, 215, 144, 0.35);
  color: #f4d790;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.heli-hud-label {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: lowercase;
}
.heli-hud-hint.active {
  color: #f4d790;
  border-color: rgba(244, 215, 144, 0.6);
  background: rgba(40, 30, 16, 0.92);
  box-shadow: 0 0 18px rgba(244, 215, 144, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
}
.heli-hud-hint.active .heli-hud-key {
  background: rgba(244, 215, 144, 0.28);
  color: #fff4cf;
}
/* ===== Car radio HUD (top-left, drive mode only). Shows current station
        on entry + every TAB-cycle, auto-hides after 3s via .hide class.
        While tuning (~0.5s static burst), .tuning class adds a scanning
        sweep line + jittery letter-spacing on the text. ===== */
.radio-hud {
  position: fixed;
  top: 76px;
  left: 24px;
  z-index: 1100;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 12px;
  max-width: 340px;
  background: rgba(20, 16, 10, 0.82);
  border: 1px solid rgba(244, 215, 144, 0.28);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4),
              inset 0 0 12px rgba(244, 215, 144, 0.08);
  pointer-events: none;
  font-family: "Cormorant Garamond", serif;
  color: #f4d790;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}
body.driving .radio-hud { display: inline-flex; }
.radio-hud.show {
  opacity: 1;
  transform: translateY(0);
}
.radio-hud.hide {
  opacity: 0;
  transform: translateY(-6px);
}
.radio-hud-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(244, 215, 144, 0.35));
}
.radio-hud-text {
  font-size: 15px;
  letter-spacing: 0.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
  transition: letter-spacing 0.18s ease, color 0.18s ease;
}
.radio-hud-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px; height: 20px;
  padding: 0 6px;
  border-radius: 5px;
  background: rgba(244, 215, 144, 0.12);
  border: 1px solid rgba(244, 215, 144, 0.32);
  color: #d4b87a;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.radio-hud-scan {
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg,
    rgba(244, 215, 144, 0) 0%,
    rgba(244, 215, 144, 0.35) 50%,
    rgba(244, 215, 144, 0) 100%);
  pointer-events: none;
  opacity: 0;
}
.radio-hud.tuning {
  border-color: rgba(255, 220, 140, 0.7);
  box-shadow: 0 0 20px rgba(244, 215, 144, 0.4),
              inset 0 0 14px rgba(244, 215, 144, 0.18);
  animation: radioJitter 0.08s steps(2) infinite;
}
.radio-hud.tuning .radio-hud-text {
  color: #fff4cf;
  letter-spacing: 2px;
}
.radio-hud.tuning .radio-hud-scan {
  opacity: 1;
  animation: radioScan 0.5s linear 1;
}
@keyframes radioScan {
  from { left: -40%; }
  to   { left: 100%; }
}
@keyframes radioJitter {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(0.6px, -0.4px); }
  100% { transform: translate(-0.4px, 0.5px); }
}
.nitro-label {
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: 4px;
  color: #d4b87a;
  margin-bottom: 8px;
}
.nitro-bar {
  height: 90px; width: 14px;
  margin: 0 auto;
  background: rgba(120, 90, 50, 0.25);
  border-radius: 7px;
  overflow: hidden;
  display: flex; flex-direction: column-reverse;
  border: 1px solid rgba(244, 215, 144, 0.15);
}
.nitro-fill {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #9ad8ff 0%, #ffd34a 55%, #ff6a1c 100%);
  box-shadow: 0 0 14px rgba(255, 200, 90, 0.5);
  transition: height 0.05s linear;
}
.nitro-fill.ready { animation: nitroReady 1.4s ease-in-out infinite alternate; }
@keyframes nitroReady { from { opacity: 0.78; } to { opacity: 1; } }
.nitro-key {
  margin-top: 8px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #c8a370;
  padding: 3px 8px;
  background: rgba(244, 215, 144, 0.08);
  border-radius: 6px;
  display: inline-block;
}
.drive-hud.nitro {
  color: #ffeac5;
  border-color: #ff8a2c;
  background: rgba(60, 22, 8, 0.85);
  text-shadow: 0 0 18px #ff9a3c, 0 0 36px #ff6a1c;
  box-shadow: 0 0 28px rgba(255, 140, 40, 0.6), inset 0 0 12px rgba(255, 200, 90, 0.3);
  animation: nitroPulse 0.4s ease-in-out infinite alternate;
}
.drive-hud.nitro .speedo-dial {
  border-color: rgba(255, 180, 80, 0.55);
  box-shadow:
    inset 0 0 28px rgba(255, 110, 40, 0.45),
    inset 0 0 6px rgba(255, 220, 140, 0.25),
    0 0 22px rgba(255, 140, 40, 0.45);
}
.drive-hud.nitro .speedo-digital {
  color: #ffeac5;
  border-color: rgba(255, 180, 80, 0.5);
  text-shadow: 0 0 12px #ff9a3c;
}
.drive-hud.nitro .speedo-needle {
  background: linear-gradient(180deg, #fff5e0 0%, #ff5a18 70%, #a82a08 100%);
  box-shadow: 0 0 12px rgba(255, 180, 60, 0.9), 0 2px 4px rgba(0, 0, 0, 0.6);
}
@keyframes nitroPulse {
  from { transform: scale(1); box-shadow: 0 0 28px rgba(255, 140, 40, 0.6); }
  to   { transform: scale(1.06); box-shadow: 0 0 44px rgba(255, 180, 60, 0.9); }
}

/* ===== Compass + nearest-street bar (top center, drive mode only) ===== */
.compass-bar {
  position: fixed;
  top: 76px; left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  width: 320px;
  padding: 8px 14px 10px;
  background: rgba(251, 246, 236, 0.94);
  border: 1px solid rgba(138, 74, 31, 0.22);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(40, 28, 14, 0.18);
  font-family: "Inter", sans-serif;
  color: #3a2a18;
  display: none;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
body.driving .compass-bar { display: block; }
.compass-tape-wrap {
  position: relative;
  width: 100%;
  height: 22px;
  overflow: hidden;
  border-bottom: 1px solid rgba(138, 74, 31, 0.18);
}
.compass-tape {
  position: absolute;
  top: 0; left: 50%;
  height: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #5a4630;
  white-space: nowrap;
  will-change: transform;
}
.compass-tape span {
  display: inline-block;
  width: 40px;
  text-align: center;
  line-height: 22px;
}
.compass-tape span.card {
  color: #8a4a1f;
  font-weight: 700;
  font-size: 13px;
}
.compass-pointer {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 22px;
  background: #8a4a1f;
  box-shadow: 0 0 4px rgba(138, 74, 31, 0.45);
}
.compass-street {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #2a1d10;
  min-height: 16px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compass-street.dim {
  color: #9a8870;
  font-style: italic;
  font-weight: 400;
}

/* ===== Tour HUD (top-center, only visible while driving) ===== */
.tour-hud {
  position: fixed;
  top: 148px; left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  min-width: 280px;
  padding: 12px 18px 14px;
  background: rgba(20, 16, 10, 0.82);
  border: 1px solid rgba(244, 215, 144, 0.25);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  display: none;
  pointer-events: none;
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
}
body.driving .tour-hud { display: block; }
.tour-hud-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(244, 215, 144, 0.18);
}
.tour-hud-title {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #d4b87a;
}
.tour-hud-count {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #f4d790;
  text-shadow: 0 0 10px rgba(244, 215, 144, 0.3);
}
.tour-hud-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tour-hud-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #c8a370;
  transition: color 0.25s ease;
}
.tour-hud-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 163, 112, 0.5);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.tour-hud-item.visited {
  color: #b9f0b1;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 240, 177, 0.4);
}
.tour-hud-item.visited .tour-hud-mark {
  background: #3aa84a;
  border-color: #6fd57b;
  color: #0f2a13;
  box-shadow: 0 0 12px rgba(110, 213, 123, 0.55);
}
.tour-hud.complete {
  border-color: rgba(110, 213, 123, 0.7);
  box-shadow: 0 8px 28px rgba(60, 168, 74, 0.35), 0 0 18px rgba(110, 213, 123, 0.35);
  animation: tourComplete 1.6s ease-in-out infinite alternate;
}
@keyframes tourComplete {
  from { box-shadow: 0 8px 28px rgba(60, 168, 74, 0.35), 0 0 18px rgba(110, 213, 123, 0.35); }
  to   { box-shadow: 0 8px 28px rgba(60, 168, 74, 0.55), 0 0 32px rgba(110, 213, 123, 0.65); }
}

/* ===== Coin counter (drive mode only — below tour HUD) ===== */
.coin-hud {
  position: fixed;
  top: 270px; left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: none;
  align-items: center; gap: 10px;
  padding: 8px 18px;
  background: rgba(20, 16, 10, 0.82);
  border: 1px solid rgba(244, 215, 144, 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(244, 215, 144, 0.08);
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
  pointer-events: none;
  transition: transform 0.18s ease, box-shadow 0.25s ease;
}
body.driving .coin-hud { display: inline-flex; }
.coin-hud-icon {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(244, 215, 144, 0.55));
}
.coin-hud-count {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f4d790;
  text-shadow: 0 0 10px rgba(244, 215, 144, 0.35);
  min-width: 58px;
  text-align: center;
}
.coin-hud.pulse {
  animation: coinPulse 0.45s ease-out;
}
@keyframes coinPulse {
  0%   { transform: translateX(-50%) scale(1);   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(244, 215, 144, 0.08); }
  35%  { transform: translateX(-50%) scale(1.18); box-shadow: 0 6px 22px rgba(244, 215, 144, 0.55), inset 0 0 18px rgba(244, 215, 144, 0.35); }
  100% { transform: translateX(-50%) scale(1);   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 0 12px rgba(244, 215, 144, 0.08); }
}
.coin-hud.complete {
  border-color: rgba(244, 215, 144, 0.85);
  box-shadow: 0 8px 28px rgba(244, 215, 144, 0.55), inset 0 0 22px rgba(244, 215, 144, 0.35);
}

/* ===== Radar mini-map (top-right, drive mode only) ===== */
.minimap {
  position: fixed;
  top: 76px; right: 24px;
  z-index: 1100;
  width: 160px; height: 160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(244, 215, 144, 0.06) 0%, rgba(20, 16, 10, 0) 60%),
    radial-gradient(circle at 50% 50%, rgba(26, 20, 12, 0.92) 0%, rgba(12, 9, 5, 0.95) 70%, rgba(5, 4, 2, 0.96) 100%);
  border: 2px solid rgba(244, 215, 144, 0.32);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.75),
    inset 0 0 3px rgba(244, 215, 144, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.45);
  display: none;
  pointer-events: none;
  overflow: hidden;
}
body.driving .minimap { display: block; }
.minimap canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: 50%;
  /* Crosshair guideline overlay (concentric range rings) */
  background:
    radial-gradient(circle, transparent 0 27%, rgba(244, 215, 144, 0.06) 27% 28%, transparent 28% 53%, rgba(244, 215, 144, 0.05) 53% 54%, transparent 54% 100%);
}
.minimap-cardinal {
  position: absolute;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(244, 215, 144, 0.9);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 2;
}
.minimap-n {
  top: 6px; left: 50%;
  transform: translateX(-50%);
  color: #ff6a4a;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(255, 106, 74, 0.4);
}

/* ===== Top bar ===== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(251, 246, 236, 0.96), rgba(251, 246, 236, 0.82));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(138, 74, 31, 0.12);
}
body.night .topbar {
  background: linear-gradient(180deg, rgba(22, 17, 10, 0.96), rgba(22, 17, 10, 0.82));
  border-bottom-color: rgba(228, 167, 106, 0.15);
}

.brand { display: flex; align-items: baseline; gap: 12px; min-width: max-content; }
.brand-mark {
  font-family: "Amiri", serif;
  font-size: 28px;
  color: var(--ochre-deep);
  line-height: 1;
}
body.night .brand-mark { color: var(--ochre-light); }
.brand-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.brand-name em { font-style: italic; color: var(--ochre); font-weight: 400; }

.itineraries {
  flex: 1;
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: none;
}
.itineraries::-webkit-scrollbar { display: none; }
.itin-chip {
  flex-shrink: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid rgba(138, 74, 31, 0.25);
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.itin-chip:hover {
  background: var(--ochre);
  color: var(--white);
  border-color: var(--ochre);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.itin-chip.active {
  background: var(--tunis-blue);
  color: var(--white);
  border-color: var(--tunis-blue);
}
.itin-emoji { margin-right: 6px; }

.controls { display: flex; gap: 6px; }
.ctrl {
  width: 38px; height: 38px;
  border: 1px solid rgba(138, 74, 31, 0.25);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.ctrl:hover {
  background: var(--ochre);
  color: var(--white);
  border-color: var(--ochre);
  transform: rotate(5deg);
}
.ctrl.active {
  background: var(--ochre);
  color: var(--white);
  border-color: var(--ochre);
  box-shadow: 0 0 0 2px rgba(138, 74, 31, 0.18);
}

/* "Drive" button — promoted to a labeled CTA so people notice the
   car experience. Wider pill shape, ochre background, slight pulse
   animation to draw the eye. */
.ctrl.ctrl-drive {
  width: auto;
  height: 38px;
  padding: 0 16px 0 12px;
  border-radius: 22px;
  background: var(--ochre);
  color: var(--white);
  border-color: var(--ochre);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(138, 74, 31, 0.28);
  animation: ctrlDrivePulse 2.4s ease-in-out infinite;
}
.ctrl.ctrl-drive:hover {
  transform: translateY(-1px) rotate(0);
  background: #a85e2a;
  border-color: #a85e2a;
  box-shadow: 0 4px 14px rgba(138, 74, 31, 0.45);
  animation-play-state: paused;
}
.ctrl.ctrl-drive .drive-icon {
  font-size: 18px;
  line-height: 1;
}
.ctrl.ctrl-drive .drive-label {
  font-family: inherit;
}
@keyframes ctrlDrivePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(138, 74, 31, 0.28); }
  50%      { box-shadow: 0 2px 14px rgba(231, 145, 70, 0.65); }
}

/* ===== Map ===== */
.map {
  position: absolute; inset: 0;
  background: var(--sand);
  z-index: 1;
}
/* Sepia / ochre filter on tiles for an "anime-journal" feel */
.leaflet-tile-pane {
  filter: sepia(0.35) saturate(0.85) hue-rotate(-10deg) brightness(0.98);
}
body.night .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95);
}

.leaflet-container { background: var(--sand) !important; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(251, 246, 236, 0.7) !important; }

/* ===== Custom marker ===== */
.sfax-marker {
  position: relative;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.sfax-marker .pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  animation: pulse 2.4s ease-out infinite;
}
.sfax-marker .dot {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ochre);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: var(--white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s;
  cursor: pointer;
  border: 2px solid var(--paper);
}
.sfax-marker:hover .dot { transform: scale(1.18); }
.sfax-marker.active .dot { transform: scale(1.3); animation: bounce 0.5s ease-out; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 123, 60, 0.55); }
  70% { box-shadow: 0 0 0 18px rgba(201, 123, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 123, 60, 0); }
}
@keyframes bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.45); }
  100% { transform: scale(1.3); }
}

/* category color overrides set inline via JS using --c CSS variable */
.sfax-marker .dot { background: var(--c, var(--ochre)); }
.sfax-marker .pulse { box-shadow: 0 0 0 0 var(--c, var(--ochre)); }

/* ===== Legend ===== */
.legend {
  position: fixed; left: 24px; bottom: 24px; z-index: 900;
  background: rgba(251, 246, 236, 0.92);
  backdrop-filter: blur(10px);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  max-width: 220px;
  font-size: 13px;
}
body.night .legend { background: rgba(22, 17, 10, 0.92); }
.legend-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
  color: var(--ochre-deep);
}
body.night .legend-title { color: var(--ochre-light); }
.legend-row {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.legend-row:hover { opacity: 1; }
.legend-row.muted { opacity: 0.35; }
.legend-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ===== Place card ===== */
.placecard {
  position: fixed; top: 76px; right: 24px; z-index: 950;
  width: 380px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 100px);
  background: var(--paper);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 28px 26px;
  overflow-y: auto;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s;
}
.placecard.hidden { transform: translateX(420px); opacity: 0; pointer-events: none; }
.placecard-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 22px; color: var(--ink); cursor: pointer;
  opacity: 0.5; transition: all 0.2s;
}
.placecard-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.placecard-emoji { font-size: 38px; line-height: 1; margin-bottom: 6px; }
.placecard-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--ochre);
  font-weight: 600;
  margin-bottom: 6px;
}
.placecard-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 4px;
}
.placecard-arabic {
  font-family: "Amiri", serif;
  font-size: 20px;
  color: var(--ochre-deep);
  margin-bottom: 14px;
  direction: rtl;
}
body.night .placecard-arabic { color: var(--ochre-light); }
.placecard-desc {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
  opacity: 0.88;
}
.placecard-meta {
  border-top: 1px solid rgba(138, 74, 31, 0.18);
  padding-top: 14px;
  margin-bottom: 18px;
}
.meta-row { display: flex; gap: 12px; padding: 5px 0; font-size: 13px; }
.meta-key {
  flex: 0 0 90px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ochre);
  font-weight: 600;
  font-size: 10px;
  padding-top: 3px;
}
.meta-val { flex: 1; line-height: 1.5; }

.placecard-actions { display: flex; gap: 8px; }
.action {
  flex: 1;
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 500;
  padding: 10px 14px;
  border-radius: 22px;
  border: 0;
  background: var(--tunis-blue);
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s;
}
.action:hover { background: var(--tunis-blue-deep); transform: translateY(-1px); }
.action.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(138, 74, 31, 0.3);
}
.action.ghost:hover { background: rgba(201, 123, 60, 0.1); }

/* ===== Tour overlay ===== */
.tour-overlay {
  position: fixed; left: 50%; bottom: 32px; z-index: 980;
  transform: translateX(-50%);
  transition: opacity 0.4s, transform 0.4s;
}
.tour-overlay.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 20px); }
.tour-card {
  background: rgba(13, 44, 68, 0.94);
  backdrop-filter: blur(10px);
  color: var(--white);
  border-radius: var(--r);
  padding: 18px 22px;
  width: min(520px, 92vw);
  box-shadow: var(--shadow);
}
.tour-step {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ochre-light);
  margin-bottom: 4px;
}
.tour-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px; font-weight: 700;
  margin-bottom: 6px;
}
.tour-desc { font-size: 14px; line-height: 1.5; opacity: 0.9; margin-bottom: 12px; }
.tour-controls { display: flex; gap: 8px; }
.tour-controls button {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 0;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.tour-controls button:hover { background: rgba(255,255,255,0.22); }
.tour-controls button.ghost { background: transparent; opacity: 0.6; }
.tour-controls button.ghost:hover { opacity: 1; }

/* ===== Hint ===== */
.hint {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 800;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ochre-deep);
  background: rgba(251, 246, 236, 0.85);
  padding: 6px 14px;
  border-radius: 18px;
  pointer-events: none;
  animation: fadeUp 1.2s 1.4s both;
  transition: opacity 0.4s;
}
body.night .hint { color: var(--ochre-light); background: rgba(22, 17, 10, 0.85); }
.hint.gone { opacity: 0; }
@keyframes fadeUp {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============================================================
   MapLibre Markers
   ============================================================ */
/* ============================================================
   Diorama HTML markers (Three.js project() positioned)
   ============================================================ */
.m3 {
  position: absolute; top: 0; left: 0;
  background: transparent; border: 0;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; font-family: inherit;
  will-change: transform;
  pointer-events: auto;
  z-index: 10;
}
.m3 .m3-pin {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c, #c97b3c);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.95);
  box-shadow: 0 5px 14px rgba(0,0,0,0.4), inset 0 -2px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
.m3 .m3-pin::before {
  content: ""; position: absolute; inset: 4px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 65%);
  pointer-events: none;
}
.m3 .m3-emoji { transform: rotate(45deg); font-size: 14px; line-height: 1; }
.m3 .m3-tip {
  margin-top: 4px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700; font-size: 11px;
  padding: 2px 7px;
  background: rgba(251, 246, 236, 0.94);
  border-radius: 10px;
  color: var(--ink, #2a1a0e);
  white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(-2px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
body.night .m3 .m3-tip { background: rgba(22,17,10,0.92); color: #f4e7d2; }
.m3:hover .m3-pin { transform: rotate(-45deg) scale(1.18); }
.m3:hover .m3-tip, .m3.active .m3-tip { opacity: 1; transform: translateY(0); }
.m3.active .m3-pin {
  transform: rotate(-45deg) scale(1.3);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5), 0 0 0 7px rgba(255,200,100,0.3);
  animation: m3-bounce 0.55s ease-out;
}
@keyframes m3-bounce {
  0%   { transform: rotate(-45deg) scale(1); }
  50%  { transform: rotate(-45deg) scale(1.5); }
  100% { transform: rotate(-45deg) scale(1.3); }
}

.mlb-marker {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: inherit;
  will-change: transform;
}
.mlb-marker .mlb-pin {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c, #c97b3c);
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 -3px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s, box-shadow 0.2s;
}
.mlb-marker .mlb-pin::before {
  content: "";
  position: absolute; inset: 5px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.45), transparent 65%);
  pointer-events: none;
}
.mlb-marker .mlb-emoji {
  transform: rotate(45deg);
  font-size: 18px;
  line-height: 1;
}
.mlb-marker .mlb-tip {
  margin-top: 6px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 12px;
  padding: 3px 9px;
  background: rgba(251, 246, 236, 0.94);
  border-radius: 12px;
  color: var(--ink, #2a1a0e);
  white-space: nowrap;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
body.night .mlb-marker .mlb-tip {
  background: rgba(22, 17, 10, 0.92);
  color: #f4e7d2;
}
.mlb-marker:hover .mlb-pin {
  transform: rotate(-45deg) scale(1.18);
  box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 0 6px rgba(255,200,100,0.18);
}
.mlb-marker:hover .mlb-tip,
.mlb-marker.active .mlb-tip { opacity: 1; transform: translateY(0); }
.mlb-marker.active .mlb-pin {
  transform: rotate(-45deg) scale(1.28);
  box-shadow: 0 10px 26px rgba(0,0,0,0.55), 0 0 0 8px rgba(255,200,100,0.3);
  animation: mlb-bounce 0.55s ease-out;
}
@keyframes mlb-bounce {
  0%   { transform: rotate(-45deg) scale(1); }
  50%  { transform: rotate(-45deg) scale(1.5); }
  100% { transform: rotate(-45deg) scale(1.28); }
}

/* Style MapLibre controls to fit the look */
.maplibregl-ctrl-group {
  background: rgba(251, 246, 236, 0.92) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-sm) !important;
}
body.night .maplibregl-ctrl-group { background: rgba(22, 17, 10, 0.92) !important; }
.maplibregl-ctrl-group button { background-color: transparent !important; }
.maplibregl-ctrl-attrib { font-size: 10px !important; background: rgba(251,246,236,0.6) !important; }

/* Map container */
.map { position: fixed; inset: 0; z-index: 1; }
body.night .map { filter: brightness(0.95) contrast(1.05); }

/* ============================================================
   3D MODE (legacy three.js — unused but kept for safety)
   ============================================================ */
.city3d {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
  z-index: 1;
  outline: none;
  cursor: grab;
}
.city3d:active { cursor: grabbing; }

.overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  /* Landmark markers must float above ambient UI (legend / compass / timebar
     at z-index 900) so the 4 markers are never occluded. Still below modals
     (placecard 950, topbar 1000, HUDs 1100). */
  z-index: 940;
}
.overlay .marker3d,
.overlay .m3 { pointer-events: auto; cursor: pointer; }

.marker3d {
  position: absolute;
  top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: inherit;
  will-change: transform;
}
.marker3d .m3-dot {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c, #c97b3c);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), inset 0 -3px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease-out;
}
.marker3d .m3-dot::before {
  content: "";
  position: absolute; inset: 6px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
}
.marker3d .m3-dot > * { transform: rotate(45deg); }
.marker3d .m3-tip {
  margin-top: 4px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 12px;
  padding: 2px 8px;
  background: rgba(251, 246, 236, 0.92);
  border-radius: 10px;
  color: var(--ink, #2a1a0e);
  white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(-2px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.marker3d:hover .m3-dot { transform: rotate(-45deg) scale(1.18); }
.marker3d:hover .m3-tip,
.marker3d.active .m3-tip { opacity: 1; transform: translateY(0); }
.marker3d.active .m3-dot {
  transform: rotate(-45deg) scale(1.3);
  animation: marker-bounce 0.6s ease-out;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 0 8px rgba(255, 200, 100, 0.25);
}
@keyframes marker-bounce {
  0%   { transform: rotate(-45deg) scale(1); }
  50%  { transform: rotate(-45deg) scale(1.5); }
  100% { transform: rotate(-45deg) scale(1.3); }
}

/* Timebar (bottom-left) */
.timebar {
  position: fixed; left: 24px; bottom: 24px; z-index: 900;
  background: rgba(251, 246, 236, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
  min-width: 200px;
}
body.night .timebar { background: rgba(22, 17, 10, 0.92); color: var(--ink); }
.timebar-track {
  width: 180px; height: 4px;
  background: rgba(138, 74, 31, 0.18);
  border-radius: 2px; overflow: hidden;
  margin-bottom: 6px;
}
.timebar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ffc4a0, #ff9060, #6a4a8a, #1a1828);
  transition: width 0.6s ease-out;
}
.timebar-label {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ochre-deep);
}
body.night .timebar-label { color: var(--ochre-light); }

/* Compass (top-right under the topbar) */
.compass {
  position: fixed; right: 24px; top: 80px; z-index: 900;
  width: 56px; height: 56px;
  background: rgba(251, 246, 236, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
body.night .compass { background: rgba(22, 17, 10, 0.85); color: #fff; }
.compass-ring {
  position: relative;
  width: 100%; height: 100%;
}
.compass-ring span {
  position: absolute;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--ochre-deep);
}
body.night .compass-ring span { color: var(--ochre-light); }
.compass-n { top: 4px;    left: 50%; transform: translateX(-50%); color: #a8323a !important; }
.compass-s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.compass-e { right: 6px;  top: 50%;  transform: translateY(-50%); }
.compass-w { left: 6px;   top: 50%;  transform: translateY(-50%); }

/* ============================================================
   Cinematic drive-mode intro
   ------------------------------------------------------------
   1. Yellow spawn-flash overlay — Tunisian taxi yellow (#f7b500)
      blooms across the screen for ~350 ms when the taxi appears.
   2. "PRESS WASD TO DRIVE" prompt — fades in after the 2-second
      orbit camera completes, then hangs for a few seconds.
   ============================================================ */
.drive-spawn-flash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(247, 181, 0, 0.85), rgba(247, 181, 0, 0.35) 60%, rgba(247, 181, 0, 0) 100%);
  opacity: 0;
  mix-blend-mode: screen;
}
.drive-spawn-flash.flash {
  animation: taxiYellowFlash 0.55s ease-out;
}
@keyframes taxiYellowFlash {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.05); }
}

.drive-intro-text {
  position: fixed;
  left: 50%;
  top: 28%;
  transform: translate(-50%, -50%);
  z-index: 1900;
  display: none;
  pointer-events: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 8px;
  color: #f7b500;
  text-shadow:
    0 0 18px rgba(247, 181, 0, 0.65),
    0 0 38px rgba(247, 181, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.6);
  opacity: 0;
  white-space: nowrap;
}
.drive-intro-text.show {
  animation: wasdFadeInOut 5.5s ease-in-out forwards;
}
@keyframes wasdFadeInOut {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}

/* ===== Collision damage HUD (drive mode only) ===== */
/* Top-left small red badge showing collision count — only visible while driving. */
.collision-badge {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1200;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(40, 6, 6, 0.82);
  border: 1px solid rgba(255, 70, 70, 0.55);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(180, 0, 0, 0.35), 0 0 12px rgba(255, 60, 60, 0.25);
  color: #ffd2d2;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  pointer-events: none;
  user-select: none;
}
body.driving .collision-badge { display: inline-flex; }
.collision-badge .collision-icon {
  font-size: 14px;
  line-height: 1;
}
.collision-badge .collision-count {
  font-variant-numeric: tabular-nums;
  color: #ff8c8c;
  text-shadow: 0 0 8px rgba(255, 90, 90, 0.55);
  min-width: 12px;
  text-align: right;
}
.collision-badge.bump {
  animation: collisionBadgeBump 0.32s ease-out;
}
@keyframes collisionBadgeBump {
  0%   { transform: scale(1);    box-shadow: 0 4px 14px rgba(180, 0, 0, 0.35), 0 0 12px rgba(255, 60, 60, 0.25); }
  35%  { transform: scale(1.18); box-shadow: 0 6px 22px rgba(220, 0, 0, 0.55), 0 0 22px rgba(255, 80, 80, 0.6); }
  100% { transform: scale(1);    box-shadow: 0 4px 14px rgba(180, 0, 0, 0.35), 0 0 12px rgba(255, 60, 60, 0.25); }
}

/* Full-screen red flash overlay (additive blend, 0.3s). Only fired during driving. */
.collision-flash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 50, 50, 0.55) 0%, rgba(180, 0, 0, 0.35) 55%, rgba(80, 0, 0, 0.0) 100%);
  mix-blend-mode: screen;       /* additive-style blend on dark scene */
  opacity: 0;
}
.collision-flash.active {
  animation: collisionFlash 0.3s ease-out;
}
@keyframes collisionFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Cinematic impact-feedback system (GTA-style) =====
   - Wanted stars (top-left, beside the collision badge)
   - Score popups (DOM-positioned at impact world->screen point, float up + fade)
   - Vignette overlay (full-screen, fades in on major collision)
   - Chromatic-aberration filter applied to the canvas via .canvas-hit class

   Wired in diorama.js -- see the "CINEMATIC IMPACT FEEDBACK" section. */

/* Wanted-stars HUD removed — feature disabled. Missions kept. */
.wanted-stars, .wanted-star { display: none !important; }

/* Floating score popups. The container is invisible; each popup-child uses
   absolute position so we can place it precisely at the projected impact pt. */
.score-popups {
  position: fixed;
  inset: 0;
  z-index: 1900;
  pointer-events: none;
  overflow: hidden;
}
.score-popup {
  position: absolute;
  transform: translate(-50%, -50%);          /* JS sets left+top to the projected pt */
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffe07a;
  text-shadow:
    0 0 10px rgba(255, 210, 74, 0.7),
    0 0 18px rgba(255, 180, 40, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  opacity: 1;
  will-change: transform, opacity;
  animation: scorePopupFloat 1.2s ease-out forwards;
}
@keyframes scorePopupFloat {
  0%   { transform: translate(-50%, -50%)              scale(0.85); opacity: 0; }
  15%  { transform: translate(-50%, calc(-50% - 12px)) scale(1.1);  opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 80px)) scale(1);    opacity: 0; }
}

/* Cinematic vignette -- semi-transparent dark edge overlay, opacity bumps on hit. */
.impact-vignette {
  position: fixed;
  inset: 0;
  z-index: 1950;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.55) 78%,
    rgba(0, 0, 0, 0.85) 100%);
  opacity: 0;
  transition: opacity 0.12s ease-out;
}
.impact-vignette.hit {
  opacity: 0.35;
  transition: opacity 0.12s ease-out;
}

/* Chromatic-aberration / blur kick on the canvas. Toggled for ~200 ms by JS. */
.city3d.canvas-hit {
  filter: blur(0.6px) hue-rotate(8deg);
  transition: filter 0.05s linear;
}

/* Ped-hit red screen-space vignette — pulses on pedestrian collision only.
   Uses an id selector so it is NOT suppressed by the class-based override
   block below (.collision-flash, .impact-vignette { display:none }). */
#pedVignette {
  position: fixed;
  inset: 0;
  z-index: 1960;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(180, 20, 10, 0) 35%,
    rgba(180, 20, 10, 0.28) 65%,
    rgba(180, 20, 10, 0.55) 100%);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  will-change: opacity;
}

/* ===== Missions panel (top-left, drive mode only) ===== */
.missions-hud {
  position: fixed;
  top: 76px; left: 24px;
  z-index: 1100;
  min-width: 260px;
  padding: 12px 16px 12px;
  background: rgba(20, 16, 10, 0.84);
  border: 1px solid rgba(244, 215, 144, 0.25);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  display: none;
  pointer-events: none;
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
}
body.driving .missions-hud { display: block; }
.missions-hud-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(244, 215, 144, 0.18);
}
.missions-hud-title {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #d4b87a;
}
.missions-hud-count {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #f4d790;
  text-shadow: 0 0 8px rgba(244, 215, 144, 0.25);
}
.missions-hud-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.missions-hud-item {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  color: #c8a370;
  transition: color 0.25s ease;
  line-height: 1.2;
}
.missions-hud-mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid rgba(200, 163, 112, 0.5);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.missions-hud-label { flex: 1; }
.missions-hud-progress {
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: rgba(200, 163, 112, 0.7);
}
.missions-hud-item.done {
  color: #b9f0b1;
  text-decoration: line-through;
  text-decoration-color: rgba(185, 240, 177, 0.4);
}
.missions-hud-item.done .missions-hud-mark {
  background: #3aa84a;
  border-color: #6fd57b;
  color: #0f2a13;
  box-shadow: 0 0 10px rgba(110, 213, 123, 0.45);
}
.missions-hud-item.done .missions-hud-progress { color: rgba(185, 240, 177, 0.55); }
.missions-hud-item.failed {
  color: #e89a8c;
}
.missions-hud-item.failed .missions-hud-mark {
  border-color: rgba(232, 154, 140, 0.55);
  color: rgba(232, 154, 140, 0.9);
}
.missions-hud-wanted {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(244, 215, 144, 0.18);
}
.missions-hud-wanted-label {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: #a0875a;
}
.missions-hud-wanted-value {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 700;
  color: #6fd57b;
  text-shadow: 0 0 10px rgba(110, 213, 123, 0.35);
}
.missions-hud.complete {
  border-color: rgba(110, 213, 123, 0.7);
  box-shadow: 0 8px 28px rgba(60, 168, 74, 0.35), 0 0 18px rgba(110, 213, 123, 0.35);
}

/* Mission complete popup — centred, fades in / out via .show */
.mission-popup {
  position: fixed;
  top: 30%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  z-index: 2000;
  padding: 18px 36px 20px;
  background: linear-gradient(180deg, rgba(35, 28, 18, 0.96) 0%, rgba(20, 16, 10, 0.96) 100%);
  border: 1.5px solid rgba(110, 213, 123, 0.7);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 32px rgba(110, 213, 123, 0.4);
  color: #f4d790;
  font-family: "Cormorant Garamond", serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  display: none;
}
.mission-popup.show {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.mission-popup-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #6fd57b;
  margin-bottom: 6px;
}
.mission-popup-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #f4d790;
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(244, 215, 144, 0.35);
}
.mission-popup-reward {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #b9f0b1;
  text-transform: uppercase;
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  /* --- Topbar: keep brand + all controls on one row --- */
  .topbar { flex-wrap: nowrap; padding: 10px 12px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .brand-mark { font-size: 24px; }
  .brand-name { font-size: 17px; white-space: nowrap; }
  .itineraries { display: none; }            /* hidden on mobile to free space */
  .controls { flex: 0 0 auto; gap: 4px; }
  .ctrl { width: 34px; height: 34px; font-size: 15px; }

  /* --- Place card: bottom sheet, bigger touch targets --- */
  .placecard {
    right: 10px; left: 10px;
    width: auto; top: auto; bottom: 10px;
    max-height: 60vh;
    padding: 20px 18px 18px;
    border-radius: 16px;
  }
  .placecard.hidden { transform: translateY(120%); }
  .placecard-name { font-size: 24px; line-height: 1.2; }
  .placecard-arabic { font-size: 17px; margin-bottom: 10px; }
  .placecard-desc { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
  .placecard-emoji { font-size: 32px; }
  .placecard-meta { padding-top: 10px; margin-bottom: 14px; }
  .meta-row { padding: 4px 0; font-size: 12px; }
  .meta-key { flex: 0 0 78px; font-size: 9.5px; }
  .action { padding: 11px 12px; font-size: 13px; }

  .legend { display: none; }
  .drive-intro-text { font-size: 24px; letter-spacing: 5px; }
  /* Missions HUD: stacks BELOW the compass-bar, still leaves room for minimap on right */
  .missions-hud { min-width: 0; left: 10px; right: 116px; top: 124px; padding: 8px 12px; }
  .mission-popup { padding: 14px 22px 16px; }
  .mission-popup-title { font-size: 20px; }

  /* --- Drive-mode HUD: prevent minimap from overlapping compass / tour-hud --- */
  /* Minimap shrinks and pins to top-right just under the topbar */
  .minimap {
    top: 62px;
    right: 10px;
    width: 96px;
    height: 96px;
    border-width: 1.5px;
  }
  .minimap-cardinal { font-size: 10px; }
  .minimap-n { top: 3px; }

  /* Compass-bar: anchor left, leave room for minimap on the right */
  .compass-bar {
    top: 62px;
    left: 10px;
    right: 116px;                /* 96 minimap + 10 inset + 10 gap */
    width: auto;
    transform: none;             /* override translateX(-50%) */
    padding: 6px 10px 8px;
    border-radius: 8px;
  }
  .compass-tape-wrap { height: 18px; }
  .compass-tape { height: 18px; font-size: 11px; }
  .compass-tape span { width: 32px; line-height: 18px; }
  .compass-tape span.card { font-size: 12px; }
  .compass-pointer { height: 18px; }
  .compass-street { font-size: 11.5px; margin-top: 4px; }

  /* Tour-hud: full width below the missions/minimap stack */
  .tour-hud {
    top: 232px;                  /* below missions-hud (124 + ~98 + gap) */
    left: 10px; right: 10px;
    transform: none;
    min-width: 0;
    padding: 8px 12px 10px;
    border-radius: 10px;
  }
  .tour-hud-header { padding-bottom: 6px; margin-bottom: 6px; gap: 10px; }
  .tour-hud-title { font-size: 10px; letter-spacing: 2px; }
  .tour-hud-count { font-size: 15px; }
  .tour-hud-item { font-size: 13px; gap: 7px; }
  .tour-hud-mark { width: 15px; height: 15px; font-size: 10px; }

  /* Speedometer: compact dial, sits clear of minimap */
  .drive-hud {
    right: 10px; bottom: 10px;
    padding: 10px 12px 10px;
    border-radius: 12px;
  }
  .speedo-dial { width: 120px; height: 120px; }
  .speedo-needle { height: 46px; margin-top: -40px; }
  .speedo-unit { bottom: 22px; font-size: 9px; letter-spacing: 2px; }
  .speedo-digital { font-size: 18px; padding: 2px 8px; min-width: 56px; }
  .speedo-gear { width: 32px; font-size: 15px; padding: 2px 0; }
  .speedo-readout { gap: 6px; }

  /* Nitro gauge: narrower */
  .nitro-gauge {
    left: 10px; bottom: 10px;
    width: 64px;
    padding: 10px 8px 8px;
    border-radius: 10px;
  }
  .nitro-label { font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; }
  .nitro-bar { height: 70px; width: 11px; }
  .nitro-key { margin-top: 6px; font-size: 9px; letter-spacing: 1.5px; padding: 2px 6px; }

  /* Helicopter-view hint: sits just above the (now shorter) nitro gauge */
  .heli-hud-hint {
    left: 10px;
    bottom: 160px;               /* nitro is ~140px tall + 10 gap */
    padding: 4px 10px 4px 6px;
    gap: 6px;
  }
  .heli-hud-key { width: 20px; height: 20px; font-size: 12px; }
  .heli-hud-label { font-size: 12px; letter-spacing: 1.5px; }
}

/* ===== Hood-cam (first-person driver's-eye) dashboard ===========
   Activated by `body.driving.hood-cam` (set in diorama.js when F is pressed
   inside drive mode). A semi-transparent black bar covers the bottom 15%
   of the screen; the existing speedometer dial slides over to be centred
   on that bar. The nitro gauge, helicopter hint, compass, and tour HUD are
   intentionally left alone so the player keeps their full chrome.       */
.hood-dashboard {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: 15vh;                                      /* spec: bottom 15% of screen */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.65) 35%,
    rgba(0, 0, 0, 0.85) 100%
  );
  /* Faint warm bezel along the top edge so it reads like a dashboard hood */
  border-top: 1px solid rgba(244, 215, 144, 0.18);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.6);
  z-index: 1095;                                     /* below .drive-hud (1100) */
  pointer-events: none;
  display: none;
}
body.driving.hood-cam .hood-dashboard { display: block; }

/* When hood-cam is on, slide the speedometer dial to the bottom-centre so it
   sits visually on top of the dashboard bar. Override the default
   right:28px/bottom:28px corner placement. The whole .drive-hud is repositioned
   (background panel + dial + readout) — looks like a centred instrument pod. */
body.driving.hood-cam .drive-hud {
  right: auto;
  left: 50%;
  bottom: max(8px, calc(7.5vh - 95px));              /* centre on the 15vh bar */
  transform: translateX(-50%);
  /* Trim the surrounding pod so just the dial+readout reads cleanly on glass */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 8px 6px;
}

/* ============================================================
   UX CLEANUP OVERRIDES
   The drive experience accumulated too many noisy HUDs and a
   constant red-flash every time the car nudged anything. Strip
   them back to the clean original feel: speedometer + nitro +
   compass + mini-map + radio + coins + tour-hud only.
   ============================================================ */

/* No more red overlays anywhere. */
.collision-flash,
.collision-flash.active,
.impact-vignette,
.impact-vignette.hit { display: none !important; opacity: 0 !important; animation: none !important; }

/* Drop the chromatic-aberration filter — was making the canvas feel sick. */
.city3d.canvas-hit { filter: none !important; }

/* No GTA score chip, no floating "+200 SMASH" popups, no collision-counter pill. */
#gtaScoreChip,
.score-popups,
.score-popup,
.collision-badge { display: none !important; }

/* No missions panel, no "MISSION COMPLETE" pop-in. */
.missions-hud,
body.driving .missions-hud,
.mission-popup,
.mission-popup.show { display: none !important; }

/* No coin counter banner ("0/30"). Coins still spawn + can be collected,
   but the HUD is hidden so it doesn't add noise. */
.coin-hud,
body.driving .coin-hud { display: none !important; }

/* Move the bawsala (compass) + avenue name to the left. */
.compass-bar {
  left: 16px !important;
  transform: none !important;
}
@media (max-width: 720px) {
  .compass-bar { left: 10px !important; right: 116px !important; }
}

/* Move the Tour Mode checklist to the left (under the compass). */
.tour-hud {
  left: 16px !important;
  transform: none !important;
}
@media (max-width: 720px) {
  .tour-hud { left: 10px !important; right: auto !important; }
}

/* ============================================================
   NITRO speed-streak overlay
   - White radial streaks that converge toward the screen centre
   - Fades in on .active (added by triggerNitro), fades out when
     the burst ends. CSS-only so it costs nothing on idle frames.
   ============================================================ */
.nitro-streaks {
  position: fixed;
  inset: 0;
  z-index: 1500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease-out;
  background:
    /* white radial speed lines from edge → centre */
    radial-gradient(
      ellipse 60% 60% at 50% 50%,
      transparent 35%,
      rgba(255, 255, 255, 0.08) 55%,
      rgba(255, 255, 255, 0.16) 75%,
      rgba(255, 255, 240, 0.22) 100%
    ),
    /* subtle vignette so edges feel tighter at speed */
    radial-gradient(
      ellipse 50% 50% at 50% 50%,
      transparent 50%,
      rgba(0, 0, 0, 0.18) 100%
    );
  mix-blend-mode: screen;
}
.nitro-streaks.active {
  opacity: 1;
  animation: nitroPulse 0.42s ease-in-out infinite alternate;
}
@keyframes nitroPulse {
  from { filter: brightness(1.0); }
  to   { filter: brightness(1.25); }
}

/* ============================================================
   PEDESTRIAN HIT — radial speed-lines flash
   38 thin lines rotate from the screen centre outward.
   Triggered by #speedLines.active (added/removed by JS).
   ============================================================ */
#speedLines {
  position: fixed;
  inset: 0;
  z-index: 2100;
  pointer-events: none;
  overflow: hidden;
}
#speedLines .sl {
  position: absolute;
  /* Anchor each line at the exact screen centre */
  left: 50%;
  top: 50%;
  /* Lines start as a 2px-wide, 0-length hairline and streak outward */
  width: 2px;
  height: 0;
  transform-origin: 0 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.0) 100%
  );
  opacity: 0;
}
/* Each line gets its rotation baked into a CSS custom property (--a).
   JS sets style="--a: Ndeg" on every span so we don't need 38 separate rules. */
#speedLines .sl { transform: rotate(var(--a, 0deg)) translateY(0); }

#speedLines.active .sl {
  animation: speedLineStreak 380ms ease-out forwards;
}
@keyframes speedLineStreak {
  0%   { height: 0;    opacity: 0;    transform: rotate(var(--a, 0deg)) translateY(0); }
  15%  { opacity: 1; }
  60%  { height: 48vh; opacity: 0.55; transform: rotate(var(--a, 0deg)) translateY(0); }
  100% { height: 48vh; opacity: 0;    transform: rotate(var(--a, 0deg)) translateY(0); }
}

/* ============================================================
   Radio HUD — Polish Layer
   Appended — DO NOT merge with lines 337-432 above
   ============================================================ */

/* ----------------------------------------------------------
   1. TEXT SHIMMER — subtle gold light sweeps across the label
   ---------------------------------------------------------- */
@keyframes radioHudShimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.radio-hud-text {
  /* Overlay a moving highlight on top of the flat gold text.
     The background-clip trick works because the element already
     has white-space:nowrap + overflow:hidden from line 377. */
  background-image: linear-gradient(
    90deg,
    rgba(244, 215, 144, 0)   0%,
    rgba(255, 245, 200, 0.55) 45%,
    rgba(244, 215, 144, 0)   55%,
    rgba(244, 215, 144, 0)   100%
  );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  /* Colour intentionally kept as currentColor so the shimmer
     blends over the existing #f4d790 set on the parent. */
  animation: radioHudShimmer 6s linear infinite;
  animation-play-state: paused; /* only plays when chip is visible */
}

.radio-hud.show .radio-hud-text {
  animation-play-state: running;
}

/* ----------------------------------------------------------
   2. TUNING BREATHE — amber pulse while scanning
   ---------------------------------------------------------- */
@keyframes radioHudBreathe {
  0%   { box-shadow: 0 0 10px rgba(255, 200, 100, 0.30),
                     inset 0 0 10px rgba(255, 200, 100, 0.10); }
  50%  { box-shadow: 0 0 32px rgba(255, 200, 100, 0.65),
                     inset 0 0 18px rgba(255, 200, 100, 0.28); }
  100% { box-shadow: 0 0 10px rgba(255, 200, 100, 0.30),
                     inset 0 0 10px rgba(255, 200, 100, 0.10); }
}

/* Merge with the existing radioJitter — both animations run together */
.radio-hud.tuning {
  animation: radioJitter 0.08s steps(2) infinite,
             radioHudBreathe 1.2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   3. CASSETTE REELS — pseudo-element circles flanking the chip
      Visible while playing (not tuning), hidden during tuning
   ---------------------------------------------------------- */
@keyframes radioReelSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Left reel */
.radio-hud::before,
.radio-hud::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px dotted rgba(244, 215, 144, 0.50);
  /* inner hub dot */
  background:
    radial-gradient(circle at 50% 50%,
      rgba(244, 215, 144, 0.70) 0%,
      rgba(244, 215, 144, 0.70) 20%,
      transparent 21%
    );
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.radio-hud::before {
  left: -16px;
  animation: radioReelSpin 1.4s linear infinite;
  animation-play-state: paused;
}

.radio-hud::after {
  right: -16px;
  animation: radioReelSpin 1.4s linear infinite reverse;
  animation-play-state: paused;
}

/* Show reels only while playing (show class present, tuning absent) */
.radio-hud.show:not(.tuning)::before,
.radio-hud.show:not(.tuning)::after {
  opacity: 1;
  animation-play-state: running;
}

/* ----------------------------------------------------------
   4. HOVER SCALE — tactile feedback in driving mode
   ---------------------------------------------------------- */
body.driving .radio-hud:hover {
  cursor: pointer;
  transform: scale(1.045);
  transition: opacity 0.35s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset scale when hud is hidden so the hide transition stays clean */
body.driving .radio-hud.hide:hover {
  transform: translateY(-6px) scale(1);
}

/* ----------------------------------------------------------
   5. SOUND-WAVE BACKGROUND — inline SVG as data URI, low opacity
      Two sine-wave paths rendered in warm gold at ~6% opacity
   ---------------------------------------------------------- */
.radio-hud {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='36' viewBox='0 0 340 36'%3E%3Cg fill='none' stroke='rgba(244%2C215%2C144%2C0.18)' stroke-width='1.4'%3E%3Cpath d='M0 18 Q17 6 34 18 Q51 30 68 18 Q85 6 102 18 Q119 30 136 18 Q153 6 170 18 Q187 30 204 18 Q221 6 238 18 Q255 30 272 18 Q289 6 306 18 Q323 30 340 18'/%3E%3Cpath d='M0 18 Q17 10 34 18 Q51 26 68 18 Q85 10 102 18 Q119 26 136 18 Q153 10 170 18 Q187 26 204 18 Q221 10 238 18 Q255 26 272 18 Q289 10 306 18 Q323 26 340 18' opacity='0.55'/%3E%3C/g%3E%3C/svg%3E"),
    rgba(20, 16, 10, 0.82);
  /* 'rgba(20,16,10,0.82)' reinstates the original background-color
     value from line 347 so the SVG sits on top of it correctly. */
  background-size: 340px 36px, cover;
  background-repeat: repeat-x, no-repeat;
  background-position: center center, 0 0;
}

/* ============================================================
   RADIO HUD — GTA-style compact chip, bottom-LEFT corner
   ============================================================
   The radio is a small unobtrusive chip in the bottom-left corner,
   matching GTA's radio UX. NOT in the centre of the screen.
   Overrides the top:76px positioning from line 339.
   ---------------------------------------------------------- */
.radio-hud {
  top: auto !important;
  bottom: 28px !important;
  left: 28px !important;
  max-width: 360px;            /* wider so freq+name+TAB stay on one line */
  padding: 6px 14px;
  font-size: 0.95em;
  border-radius: 999px;       /* fully pill-shaped, GTA-style */
  gap: 12px;                   /* slightly more breathing room between icon/text/key */
  white-space: nowrap;
  flex-wrap: nowrap;
  /* Pre-existing transform: translateY(-6px) flies the chip UP off-screen
     on hide. Since we now anchor by bottom, flip the entry direction so it
     slides DOWN off the bottom edge instead. */
  transform: translateY(8px);
}
.radio-hud .radio-hud-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.radio-hud.show {
  transform: translateY(0);
}
.radio-hud.hide {
  transform: translateY(8px);
}
/* Disable the giant cassette-reel ::before/::after decorations from the
   earlier polish pass — they sit OUTSIDE the chip and visually enlarge
   its footprint. Strict bottom-left compactness wins. */
.radio-hud::before,
.radio-hud::after {
  display: none !important;
}
/* Hover scale was too "in-your-face" for a bottom-left chip — kill it. */
body.driving .radio-hud:hover {
  transform: translateY(0) !important;
}
.radio-hud-key {
  font-size: 0.72em;
  padding: 3px 10px;            /* roomier so "TAB ↻" never wraps */
  border-radius: 6px;
  background: rgba(244, 215, 144, 0.22);
  border: 1px solid rgba(244, 215, 144, 0.45);
  letter-spacing: 0.4px;
  color: #fff3d6;
  white-space: nowrap;          /* never break across two lines */
  flex-shrink: 0;               /* don't get squeezed by the text */
  animation: radioHudKeyPulse 2.4s ease-in-out infinite;
}
@keyframes radioHudKeyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 215, 144, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(244, 215, 144, 0); }
}
.radio-hud-icon {
  font-size: 1em;
}

/* ─── FULL-TOUR CELEBRATION BANNER ───────────────────────────
   Centred overlay that appears once when the player visits every
   tour landmark. Fades in via .show, auto-dismisses after 6.5 s.
   Click anywhere or the "Continue driving →" button to close early.
   ─────────────────────────────────────────────────────────── */
.tour-complete-banner {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.6s ease;
  cursor: pointer;
  pointer-events: none;
}
.tour-complete-banner.show {
  opacity: 1;
  pointer-events: auto;
}
.tcb-inner {
  background: linear-gradient(180deg, rgba(35,28,18,0.96) 0%, rgba(20,16,10,0.98) 100%);
  border: 1.5px solid rgba(244, 215, 144, 0.85);
  border-radius: 18px;
  padding: 36px 48px 28px;
  text-align: center;
  max-width: 580px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 36px rgba(244, 215, 144, 0.18);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1);
  color: #f4d790;
}
.tour-complete-banner.show .tcb-inner {
  transform: translateY(0) scale(1);
}
.tcb-confetti {
  font-size: 28px;
  letter-spacing: 12px;
  margin-bottom: 12px;
  animation: tcbBounce 1.8s ease-in-out infinite;
}
@keyframes tcbBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.tcb-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  font-weight: 700;
  color: #d4b87a;
  margin-bottom: 12px;
}
.tcb-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
  font-weight: 700;
  color: #f4d790;
  margin: 0 0 10px;
  line-height: 1.18;
  text-shadow: 0 2px 12px rgba(244, 215, 144, 0.25);
}
.tcb-arabic {
  font-family: "Amiri", serif;
  font-size: 18px;
  color: #c8a370;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}
.tcb-body {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  line-height: 1.55;
  color: #d4b87a;
  margin: 0 0 18px;
}
.tcb-more {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #c8a370;
  font-style: italic;
  margin-bottom: 22px;
}
.tcb-close {
  background: linear-gradient(180deg, rgba(244,215,144,0.18) 0%, rgba(244,215,144,0.08) 100%);
  border: 1px solid rgba(244, 215, 144, 0.55);
  color: #f4d790;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  padding: 10px 24px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tcb-close:hover {
  background: rgba(244, 215, 144, 0.32);
  border-color: rgba(244, 215, 144, 0.9);
  transform: translateY(-1px);
}