/* The live map layer under the screens. */
.map { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.map__viewport {
  position: absolute; overflow: hidden; border-radius: 37px; background: #f6f6f6; /* matches .stage__inner */
  opacity: 0; transform: scale(0.98);
  transition: left 0.7s var(--ease), top 0.7s var(--ease), width 0.7s var(--ease), height 0.7s var(--ease),
    border-radius 0.7s var(--ease), opacity 0.5s var(--ease), transform 0.7s var(--ease), background-color 0.4s;
}
.map.is-on .map__viewport { opacity: 1; transform: none; pointer-events: auto; }
.map.is-full .map__viewport { border-radius: 0; }
.map.no-anim .map__viewport, .map.no-anim .map__stage { transition: none !important; }
:root[data-theme="dark"] .map__viewport { background: #1c1c1c; }

.map__stage {
  position: absolute; left: 0; top: 0; width: 2164px; height: 2262px; transform-origin: 0 0;
  transition: transform 1s var(--ease);
}
.map__stage > * { position: absolute; }
.map__tile { left: 0; top: 0; width: 2164px; height: 2262px; transform-origin: 0 0; }
.map__tile > * { position: absolute; }
.map__lines { max-width: none; transition: filter 0.4s; }
:root[data-theme="dark"] .map__lines { filter: brightness(0.22); }
.map__river { opacity: 0; }
.map__label {
  font-size: 8px; letter-spacing: 2.32px; text-transform: uppercase; color: #000; opacity: 0.5;
  white-space: nowrap; transform-origin: 0 0;
}
:root[data-theme="dark"] .map__label { color: #fff; opacity: 0.3; }
.map__raster { display: none; }
.map__city { display: none; } /* shown by .has-city below */
.map__city .three-canvas { display: block; width: 100%; height: 100%; }
@keyframes fade-in { from { opacity: 0; } }

/* Route: drawn in when the scene switches to route mode. */
.map__route { width: 582.975px; height: 524.581px; opacity: 0; transition: opacity 0.4s; }
.map__route svg { overflow: visible; }
.map__route-trail { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); }
.map[data-mode="route"] .map__route { opacity: 1; }
.map[data-mode="route"] .map__route-trail { animation: draw 1.6s 0.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Game-style guide: a glow under the line and bright dashes running towards the pick-up. */
.map__route-halo { stroke: #ff6b00; stroke-width: 16; opacity: 0.16; filter: blur(4px); }
.map__route-mask { stroke: #fff; stroke-width: 12; }
.map__route-flow {
  stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 14; opacity: 0; transition: opacity 0.6s 1.2s;
  animation: flow 0.8s linear infinite;
}
.map[data-mode="route"] .map__route-flow { opacity: 0.95; }
@keyframes flow { to { stroke-dashoffset: 32; } }
:root[data-theme="dark"] .map__route-halo { opacity: 0.3; }
.map__car {
  position: absolute; left: 0; top: 0; width: 48px; height: 84px; max-width: none;
  offset-distance: 100%; offset-rotate: auto -90deg; offset-anchor: 50% 45%;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25)); transition: filter 0.5s;
}
/* The car on a live trip glows like a game marker. */
.map[data-phase="arriving"] .map__car, .map[data-phase="driving"] .map__car {
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 10px rgba(255, 107, 0, 0.7)) drop-shadow(0 6px 6px rgba(0, 0, 0, 0.25));
}
.map[data-phase="here"] .map__car { offset-distance: 2%; }
/* Driving away from the pick-up runs the path forwards, so the car turns round. */
.map[data-phase="driving"] .map__car, .map[data-phase="done"] .map__car { offset-rotate: auto 90deg; }
.map[data-phase="done"] .map__car { offset-distance: 100%; }
.map[data-phase="driving"] .map__route-flow { animation-direction: reverse; }

/* You: orange target in route mode, yellow in cluster mode (as in the designs). */
.map__you { width: 103px; height: 103px; margin: -51.5px 0 0 -51.5px; --c: 255, 107, 0; transition: opacity 0.4s; }
.map[data-mode="cluster"] .map__you { --c: 255, 189, 48; width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.map__you i { position: absolute; inset: 0; border-radius: 50%; background: rgba(var(--c), 0.15); animation: breathe 2.4s ease-in-out infinite; }
.map__you i + i { inset: 9.3%; background: rgba(var(--c), 0.3); animation-delay: 0.3s; }
.map__you b {
  position: absolute; inset: 27%; border-radius: 30%; background: rgb(var(--c)); border: 9.5px solid #fff;
  display: grid; place-items: center; box-shadow: 0 6px 14px rgba(var(--c), 0.45);
}
.map[data-mode="cluster"] .map__you b { border-width: 5.5px; }
.map__you b img { width: 22px; height: 22px; max-width: none; }
.map[data-mode="cluster"] .map__you b img { width: 13px; height: 13px; }
@keyframes breathe { 50% { transform: scale(1.12); } }
.map__you.is-ping::after {
  content: ""; position: absolute; inset: -40px; border-radius: 50%; border: 2px solid rgba(var(--c), 0.6);
  animation: ping 1.6s ease-out infinite;
}
@keyframes ping { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.map[data-phase="here"] .map__you, .map[data-phase="done"] .map__you { animation: none; }

/* Nearby rides inside the pick-up radius. */
.map__cluster { width: 0; height: 0; transition: opacity 0.5s; opacity: 0; }
.map[data-mode="cluster"] .map__cluster { opacity: 1; }
.map__radius {
  position: absolute; border-radius: 50%;
  background: rgba(255, 194, 150, 0.2); border: 1.15px solid rgba(255, 107, 0, 0.2);
  animation: radius-in 1s var(--ease) both;
}
:root[data-theme="dark"] .map__radius { background: rgba(255, 107, 0, 0.07); border-color: rgba(255, 107, 0, 0.3); }
:root[data-theme="dark"] .map__radius { background: rgba(255, 194, 150, 0.22); }
@keyframes radius-in { from { transform: scale(0.3); opacity: 0; } }
/* Traffic: cars driven along the roads by traffic.js (orange: regular, black: premium).
   Each car is centred on its point and turned to face the road. Hidden once a ride is found; a route only being looked at keeps them. */
.map__traffic-layer { left: 0; top: 0; width: 0; height: 0; pointer-events: none; transition: opacity 0.5s; }
.map[data-mode="route"]:not([data-phase="idle"]) .map__traffic-layer { opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s; }
.map__traffic-car {
  position: absolute; left: 0; top: 0; width: 22.5px; height: 39.4px; margin: -19.7px 0 0 -11.25px;
  pointer-events: auto; cursor: pointer; will-change: transform;
}
.map__traffic-car.is-vip { width: 24px; height: 42px; margin: -21px 0 0 -12px; }
.map__traffic-car img {
  width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
  transition: filter 0.2s, scale 0.25s var(--spring);
}
.map__traffic-car:hover, .map__traffic-car.is-picked { z-index: 2; }
.map__traffic-car:hover img, .map__traffic-car.is-picked img { scale: 1.35; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 10px rgba(255, 107, 0, 0.55)); }

/* Driver card shown when you click a car. */
.map__card {
  position: absolute; z-index: 6; width: 260px; padding: 14px; border-radius: 22px; background: var(--surface);
  box-shadow: 0 18px 40px -10px rgba(16, 24, 40, 0.35); display: grid; gap: 10px; color: var(--text);
  transform: translate(-50%, -100%) scale(0.92); transform-origin: 50% 100%; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.3s var(--spring);
}
.map__card.is-below { transform: translate(-50%, 0) scale(0.92); transform-origin: 50% 0; }
.map__card.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, -100%); }
.map__card.is-below.is-on { transform: translate(-50%, 0); }
.map__card-top { display: flex; align-items: center; gap: 10px; }
.map__card-top > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
.map__card-top b { font-weight: 500; font-size: 15px; }
.map__card-pic { width: 44px; height: 44px; border-radius: 14px; overflow: hidden; flex: none; }
.map__card-pic img { width: 100%; height: 100%; object-fit: cover; }
.map__card-rate { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.map__card-rate img { width: 14px; height: 14px; }
.map__card-kind { padding: 4px 8px; border-radius: 99px; font-weight: 500; font-size: 11px; background: var(--orange-light); color: var(--orange); }
.map__card-kind.is-vip { background: #171717; color: #fff; }
:root[data-theme="dark"] .map__card-kind.is-vip { background: #fff; color: #171717; }
.map__card-car { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-2); }
.map__card-status { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--green); }
.map__card-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(0, 149, 40, 0.15); }
.map__card-status.is-busy { color: #d97706; }
.map__card-status.is-busy i { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15); }
.map__card .btn { height: 42px; border-radius: 14px; font-size: 14px; }

/* Greys the map behind the floating panel and logo on full-bleed screens. */
.map__veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
/* A soft left fade behind the panel: the map carries on under it, just quieter. */
.map.is-full .map__veil {
  opacity: 1;
  background: linear-gradient(90deg, rgba(236, 236, 236, 0.7) 0, rgba(236, 236, 236, 0.45) 26%, rgba(236, 236, 236, 0) 46%);
}
:root[data-theme="dark"] .map.is-full .map__veil {
  background: linear-gradient(90deg, rgba(23, 23, 23, 0.7) 0, rgba(23, 23, 23, 0.45) 26%, rgba(23, 23, 23, 0) 46%);
}

/* Desktop map buttons (bottom-right in the Home and Set Location frames). */
.map__controls { position: absolute; right: 36px; bottom: 40px; display: none; }
.map.has-controls .map__controls { display: flex; }
.map__ctl-row { display: flex; gap: 8px; }
/* 2D | 3D: the open one is tinted, like the nav. */
.map__view { display: flex; align-items: center; gap: 4px; height: 70px; padding: 6px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.map__view .map__ctl { width: 52px; height: 58px; border-radius: 12px; background: none; box-shadow: none; font-weight: 500; font-size: 15px; color: var(--muted); } /* 18 - 6 = 12 */
.map__view .map__ctl[aria-pressed="true"] { background: var(--orange-light); color: var(--orange); }
/* The 3D city, once loaded, replaces the flat map (desktop when chosen, phones always). */
.map__city { position: absolute; inset: 0; animation: fade-in 0.6s ease both; }
.map.has-city .map__city { display: block; }
.map.has-city .map__stage, .map.has-city .map__card { display: none; } /* the left fade (veil) stays over the city */
.map__ctl {
  display: grid; place-items: center; width: 70px; height: 70px; border-radius: 18px; background: var(--surface);
  color: var(--text); box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease);
}
.map__ctl img { width: 36px; height: 36px; filter: grayscale(1) brightness(0); }
:root[data-theme="dark"] .map__ctl img { filter: grayscale(1) brightness(0) invert(1); }
.map__ctl:active { transform: scale(0.92); }
.map__ctl.is-pulse { animation: ctl 0.4s var(--spring); }
/* Zoom out and in share one frame, split by a hairline. */
.map__zoom { display: flex; align-items: center; height: 70px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.map__zoom .map__ctl { width: 58px; background: none; box-shadow: none; }
.map__zoom .map__ctl:disabled { opacity: 0.3; cursor: default; }
.map__zoom i { width: 1px; height: 30px; background: var(--line); }
@keyframes ctl { 50% { transform: scale(1.1); } }

/* Phones use the raster maps from the mobile frames. */
@media (max-width: 767px) {
  .map__viewport { border-radius: 0; }
  /* The city's own sky while it loads; the flat map is only for phones without WebGL. */
  .map__viewport { background: #f1f2ee; }
  :root[data-theme="dark"] .map__viewport { background: #0f1012; }
  .map.no-city .map__raster {
    display: block; position: absolute; inset: 0; background: url("../assets/img/map-light.jpg") center / cover;
    transition: opacity 0.4s;
  }
  :root[data-theme="dark"] .map.no-city .map__raster { background-image: url("../assets/img/map-dark.jpg"); }
  .map__lines, .map__label, .map__traffic-layer, .map__veil, .map__card { display: none; }
  /* During a trip the drive fills the open band above the sheet and fades into it. */
  .map__drive { position: absolute; left: 0; right: 0; top: 0; height: 52%; animation: fade-in 0.6s ease both; }
  .map__drive .three-canvas { display: block; width: 100%; height: 100%; }
  .map__drive::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
  /* The Driving sheet is short, so the road runs down behind its top edge. */
  .map[data-phase="driving"] .map__drive { height: calc(100% - 270px); }
  .map[data-phase="driving"] .map__drive::after { height: 20%; }
  .map.has-drive .map__city { visibility: hidden; }
  .map.has-drive .map__viewport { background: var(--bg); }
  .map__controls { display: none !important; }
}