.mini-map {
  display: flex;
  flex-direction: column;
  border-radius: var(--app-radius-md);
  overflow: hidden;
  border: 1px solid var(--app-color-border);
  background: var(--app-color-surface);
  box-shadow: var(--app-shadow-sm);
}

.mini-map__visual {
  position: relative;
  width: 100%;
  height: 140px;
  background: var(--app-color-surface-alt);
  overflow: hidden;
}

.mini-map__svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .mini-map__rings circle:nth-child(1) {
    transform-origin: 100px 60px;
    animation: app-pulse 3s ease-in-out infinite;
  }
  .mini-map__rings circle:nth-child(2) {
    transform-origin: 100px 60px;
    animation: app-pulse 3s ease-in-out 0.3s infinite;
  }
  .mini-map__rings circle:nth-child(3) {
    transform-origin: 100px 60px;
    animation: app-pulse 3s ease-in-out 0.6s infinite;
  }
  .mini-map__pin {
    transform-origin: 100px 60px;
    animation: mini-map-pin-bounce 1.6s ease-in-out infinite;
  }
}

@keyframes mini-map-pin-bounce {
  0%, 100% { transform: translate(100px, 60px) translateY(0); }
  50% { transform: translate(100px, 60px) translateY(-4px); }
}

.mini-map__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--app-spacing-md);
  background: var(--app-color-surface);
}

.mini-map__label {
  font-size: var(--app-font-size-base);
  font-weight: 600;
  color: var(--app-color-text);
}

.mini-map__coords {
  font-size: var(--app-font-size-xs);
  color: var(--app-color-text-muted);
  font-family: var(--app-font-family-mono);
  font-variant-numeric: tabular-nums;
}

.mini-map__distance {
  font-size: var(--app-font-size-sm);
  color: var(--app-color-primary);
  font-weight: 600;
  margin-top: var(--app-spacing-xs);
  display: inline-block;
}

.mini-map__open {
  margin: 0 var(--app-spacing-md) var(--app-spacing-md) var(--app-spacing-md);
  align-self: flex-start;
}