.map-mg-spots-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
  outline: none;
}

.map-mg-spots-layer--draft {
  z-index: 6;
}

.map-mg-spot {
  pointer-events: visiblePainted;
  cursor: default;
  outline: none;
}

.map-viewport:not(.is-edit-mode) .map-mg-spot {
  cursor: pointer;
}

.map-mg-spot:focus,
.map-mg-spot:focus-visible {
  outline: none;
}

.map-mg-spot--draft {
  pointer-events: none;
}

.map-mg-spot--draft.is-placement-complete .mg-spot-head,
.map-mg-spot--draft.is-placement-complete .mg-spot-base {
  pointer-events: visiblePainted;
}

.map-mg-spot--draft.is-placement-complete.map-mg-spot--dragging .mg-spot-head,
.map-mg-spot--draft.is-placement-complete.map-mg-spot--dragging .mg-spot-base {
  pointer-events: none;
}

.map-mg-spot.mg-spot--axis {
  --mg-spot-head-fill: var(--pin-axis);
}

.map-mg-spot.mg-spot--axis .mg-spot-head {
  filter: drop-shadow(0 0 6px var(--pin-axis-glow));
}

.map-mg-spot.mg-spot--allies {
  --mg-spot-head-fill: var(--pin-allies);
}

.map-mg-spot.mg-spot--allies .mg-spot-head {
  filter: drop-shadow(0 0 6px var(--pin-allies-glow));
}

.map-mg-spot.mg-spot--neutral {
  --mg-spot-head-fill: var(--pin-neutral);
}

.map-mg-spot.mg-spot--neutral .mg-spot-head {
  filter: drop-shadow(0 0 6px var(--pin-neutral-glow));
}

.map-mg-spot.mg-spot--no-media {
  --mg-spot-head-fill: var(--pin-mg-no-media);
}

.map-mg-spot.mg-spot--no-media .mg-spot-head {
  filter: drop-shadow(0 0 6px var(--pin-mg-no-media-glow));
}

.map-mg-spot--draft .mg-spot-head {
  stroke-width: 0.20;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
}

.mg-spot-stem {
  stroke: #000;
  stroke-linecap: round;
  stroke-dasharray: 0 0.35;
  fill: none;
}

.mg-spot-stem--preview {
  opacity: 0.6;
}

.mg-spot-base {
  fill: #000;
}

.mg-spot-head {
  fill: var(--mg-spot-head-fill, #ff0000);
  stroke: #000;
  stroke-width: 0.15;
  stroke-linejoin: miter;
  paint-order: stroke fill;
}

.mg-spot-head--preview {
  opacity: 0.8;
}

.map-mg-spot:not(.map-mg-spot--draft) .mg-spot-stem,
.map-mg-spot:not(.map-mg-spot--draft) .mg-spot-base {
  opacity: 0.5;
}

.map-mg-spot:not(.map-mg-spot--draft).is-highlighted .mg-spot-stem,
.map-mg-spot:not(.map-mg-spot--draft).is-highlighted .mg-spot-base {
  opacity: 1;
}

.map-mg-spot .mg-spot-head {
  opacity: 1;
}

.map-mg-spot.is-highlighted .mg-spot-head {
  stroke-width: 0.20;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
}

/* Editor mode: hover head or tail bar handle → same highlight as .is-highlighted */
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot:not(.map-mg-spot--draft):has(.mg-spot-head:hover) .mg-spot-stem,
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot:not(.map-mg-spot--draft):has(.mg-spot-base:hover) .mg-spot-stem,
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot:not(.map-mg-spot--draft):has(.mg-spot-head:hover) .mg-spot-base,
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot:not(.map-mg-spot--draft):has(.mg-spot-base:hover) .mg-spot-base {
  opacity: 1;
}

.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot:not(.map-mg-spot--draft):has(.mg-spot-head:hover) .mg-spot-head,
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot:not(.map-mg-spot--draft):has(.mg-spot-base:hover) .mg-spot-head,
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot--draft.is-placement-complete:has(.mg-spot-head:hover) .mg-spot-head,
.map-viewport.is-editor-mode:not(.is-editing-pin) .map-mg-spot--draft.is-placement-complete:has(.mg-spot-base:hover) .mg-spot-head {
  stroke-width: 0.20;
  filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
}

/* Editor browse + draft placement: head + tail bar are drag handles; the dotted
   stem in between stays non-interactive and simply follows whichever end moves. */
.map-viewport.is-editor-mode .mg-spot-head,
.map-viewport.is-editor-mode .mg-spot-base,
.map-viewport.is-editor-mode .map-mg-spot--draft.is-placement-complete .mg-spot-head,
.map-viewport.is-editor-mode .map-mg-spot--draft.is-placement-complete .mg-spot-base {
  cursor: grab;
  touch-action: none;
}

.map-viewport.is-editor-mode.is-pin-dragging .mg-spot-head,
.map-viewport.is-editor-mode.is-pin-dragging .mg-spot-base,
.map-viewport.is-editor-mode.is-pin-dragging .map-mg-spot--draft.is-placement-complete .mg-spot-head,
.map-viewport.is-editor-mode.is-pin-dragging .map-mg-spot--draft.is-placement-complete .mg-spot-base,
.map-mg-spot--dragging .mg-spot-head,
.map-mg-spot--dragging .mg-spot-base {
  cursor: grabbing;
}