#minimap {
  position: fixed;
  z-index: 5;
  top: calc(max(12px, env(safe-area-inset-top)) + 108px);
  right: max(14px, env(safe-area-inset-right));
  width: clamp(156px, 40vmin, 360px);
  overflow: hidden;
  border-radius: 14px;
  background: rgba(7, 23, 40, 0.82);
  color: #f7fbff;
  font: 12px/1.35 "Avenir Next", "Segoe UI", sans-serif;
  touch-action: none;
}
#minimap.is-collapsed { width: 92px; }
#minimap [hidden] { display: none; }
#minimap button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
#minimap button:focus-visible { outline: 2px solid #ffe08a; outline-offset: -3px; }
#minimap-toggle { width: 100%; padding: 0 10px; text-align: left; font-weight: 650 !important; }
#minimap-map { position: relative; width: 100%; aspect-ratio: 1; }
#minimap-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#minimap-markers { touch-action: none; }
#minimap-north { position: absolute; top: 5px; left: 8px; pointer-events: none; font-weight: 700; }
#minimap-scale { position: absolute; bottom: 5px; left: 8px; pointer-events: none; text-shadow: 0 1px 3px #10233c; }
#minimap-controls { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
#minimap-controls button { min-width: 36px; font-size: 20px; }
#minimap-controls button:disabled { opacity: 0.4; }
#minimap-center[aria-pressed="true"] { color: #ffe08a; }
#minimap-route { min-height: 32px; padding: 0 8px 6px; font-variant-numeric: tabular-nums; }
/* Touch controls already occupy the corner; leave their layout intact. */
@media (hover: hover) and (pointer: fine) {
  #minimap { top: max(12px, env(safe-area-inset-top)); }
}