/* Map Page */
.map-container {
  position: relative; width: 100%; height: clamp(400px, 60vw, 700px);
  border: 1px solid var(--clr-border); border-radius: var(--radius-md); overflow: hidden; cursor: grab;
  touch-action: none;
  &:active { cursor: grabbing; }
}
.map-viewport {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform;
  image-rendering: pixelated;
}
.map-viewport img { display: block; position: absolute; }
.map-controls {
  display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap;
}
.map-zoom-indicator {
  position: absolute; bottom: var(--space-3); right: var(--space-3);
  padding: 2px 8px; background: rgba(0,0,0,0.8); border-radius: var(--radius-sm);
  font-size: var(--text-xs); color: var(--clr-text-muted); pointer-events: none;
}
.map-hint {
  position: absolute; bottom: var(--space-3); left: var(--space-3);
  font-size: var(--text-xs); color: var(--clr-text-dim); pointer-events: none;
}
.map-help { font-size: var(--text-xs); color: var(--clr-text-dim); margin-top: var(--space-2); }