.map-wrap {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  isolation: isolate;
  background: #07101d;
}

.map-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: inherit;
  background: #07101d;
}

.map-wrap::after {
  content: "";
  position: absolute;
  z-index: 400;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(96, 165, 250, .08);
  box-shadow: inset 0 0 70px rgba(3, 7, 18, .48);
}

.map-follow,
.map-key {
  position: absolute;
  z-index: 500;
  bottom: 18px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: rgba(5, 9, 16, .84);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .32);
  backdrop-filter: blur(12px);
  color: #dbe7f7;
  font: 750 11px/1 var(--display);
  letter-spacing: .04em;
}

.map-follow {
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.map-follow:hover,
.map-follow:focus-visible {
  border-color: rgba(96, 165, 250, .72);
  background: rgba(13, 29, 54, .92);
  transform: translateY(-1px);
}

.map-follow span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #788498;
}

.map-follow.is-following span {
  background: var(--green);
  box-shadow: 0 0 9px var(--green);
  animation: pulse 2s ease-in-out infinite;
}

.map-key {
  right: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 14px;
  color: #aab6c8;
}

.map-key i {
  width: 7px;
  height: 7px;
  margin-left: 5px;
  border-radius: 50%;
}

.map-key i:first-child { margin-left: 0; }
.chaser-dot { background: var(--hunter); box-shadow: 0 0 9px rgba(255, 75, 66, .65); }
.runner-dot { background: var(--runner); box-shadow: 0 0 9px rgba(79, 141, 249, .65); }

.leaflet-container {
  background: #07101d;
  color: #e9f2ff;
  font-family: var(--body);
}

.leaflet-tile-pane {
  filter: saturate(.72) brightness(.64) contrast(1.16) hue-rotate(2deg);
}

.leaflet-control-zoom {
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .25) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .32) !important;
}

.leaflet-control-zoom a {
  border: 0 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
  background: rgba(5, 9, 16, .88) !important;
  color: #e6eefb !important;
}

.leaflet-control-zoom a:last-child { border-bottom: 0 !important; }
.leaflet-control-zoom a:hover { background: rgba(18, 40, 72, .94) !important; color: #60a5fa !important; }

.leaflet-control-attribution {
  padding: 2px 6px !important;
  background: rgba(5, 9, 16, .68) !important;
  color: #7e8da3 !important;
  font-size: 9px !important;
}

.leaflet-control-attribution a { color: #9fbbe4 !important; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border: 1px solid rgba(96, 165, 250, .3);
  background: rgba(7, 12, 21, .96);
  color: #dbe7f7;
}

.leaflet-popup-content { margin: 12px 15px; font-size: 12px; line-height: 1.45; }
.leaflet-popup-content strong { color: #fff; font-family: var(--display); }

.onyx-driver-marker {
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .72));
}

.onyx-driver-marker .vehicle-pulse {
  position: absolute;
  inset: 2px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .55;
  animation: marker-radar 1.8s ease-out infinite;
}

.onyx-driver-marker .vehicle-arrow {
  position: absolute;
  inset: 7px;
  clip-path: polygon(50% 0, 95% 92%, 50% 72%, 5% 92%);
  background: currentColor;
  transform: rotate(var(--heading));
  transform-origin: center;
}

.onyx-driver-marker b {
  position: absolute;
  top: 32px;
  left: 50%;
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(5, 9, 16, .92);
  color: #fff;
  font: 800 9px/1.3 var(--display);
  text-align: center;
  transform: translateX(-50%);
}

.marker-chaser { color: var(--hunter); }
.marker-runner { color: var(--runner); }
.onyx-start-marker { display: grid; place-items: center; border: 1px solid #f5d06f; background: rgba(22, 18, 8, .88); color: #f5d06f; font: 800 9px/1 var(--display); letter-spacing: .08em; }
.leaflet-route { filter: drop-shadow(0 0 5px currentColor); }
.map-error { display: grid; height: 100%; margin: 0; place-items: center; color: var(--muted); }

.result-map {
  position: relative;
  height: 420px;
  min-height: 420px;
  border-radius: 12px;
}

.result-map .map-key { bottom: 14px; }
.driver-role i { font-style: normal; }

@keyframes marker-radar {
  from { opacity: .7; transform: scale(.55); }
  to { opacity: 0; transform: scale(1.65); }
}

@media (max-width: 800px) {
  .map-wrap { min-height: 390px; }
  .result-map { height: 370px; min-height: 370px; }
}

@media (max-width: 560px) {
  .map-wrap { min-height: 340px; }
  .result-map { height: 330px; min-height: 330px; }
  .map-follow { left: 12px; bottom: 12px; }
  .map-key { right: 12px; bottom: 12px; padding: 0 10px; }
  .leaflet-control-attribution { display: none; }
}

@media (max-width: 420px) {
  .map-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .onyx-driver-marker,
  .onyx-driver-marker .vehicle-pulse { transition: none; animation: none; }
}