.map-location {
  position: absolute;
  left: var(--map-left);
  top: var(--map-top);
  width: var(--map-size);
  aspect-ratio: 1 / 1.04;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: end;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 5px 8px rgba(47, 61, 50, .18));
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.map-location-visual {
  position: relative;
  width: 68%;
  aspect-ratio: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: clamp(2px, .6cqw, 4px) solid rgba(255, 249, 229, .96);
  border-radius: 50%;
  background: #f7f1df;
  box-shadow: 0 0 0 1px rgba(184, 133, 42, .78), 0 4px 10px rgba(61, 67, 51, .18);
}

.map-location-visual img {
  width: 185%;
  height: 185%;
  display: block;
  object-fit: contain;
  transform: translateY(-18%);
  pointer-events: none;
}

/* The legacy illustrations include their old ribbon labels. The map component
   supplies the accessible label below, so this soft mask keeps only the art. */
.map-location-visual::after {
  content: "";
  position: absolute;
  inset: 58% 0 0;
  background: linear-gradient(180deg, rgba(247, 241, 223, 0), #f7f1df 38%);
  pointer-events: none;
}

.map-location-notice {
  position: absolute;
  z-index: 3;
  top: -2%;
  right: 2%;
  width: clamp(12px, 3.4cqw, 18px);
  aspect-ratio: 1;
  border: clamp(2px, .45cqw, 3px) solid #fff8e8;
  border-radius: 50%;
  background: #df493e;
  box-shadow: 0 2px 7px rgba(91, 29, 24, .45);
  animation: map-location-notice-pulse 1.8s ease-in-out infinite;
}

.map-location.is-unavailable {
  cursor: not-allowed;
  filter: grayscale(1) opacity(.52) drop-shadow(0 4px 6px rgba(47, 61, 50, .12));
}

.map-location.is-unavailable .map-location-visual {
  border-color: rgba(225, 225, 218, .88);
  background: #d8d8d2;
  box-shadow: 0 0 0 1px rgba(118, 118, 112, .48), 0 3px 8px rgba(50, 50, 47, .12);
}

.map-location.is-unavailable .map-location-label {
  border-color: rgba(136, 132, 122, .58);
  color: #77736b;
  background: rgba(236, 234, 226, .94);
  box-shadow: 0 2px 6px rgba(49, 49, 45, .1);
}

.map-location.is-unavailable:active,
.map-location.is-unavailable:hover {
  transform: translate(-50%, -50%);
  filter: grayscale(1) opacity(.52) drop-shadow(0 4px 6px rgba(47, 61, 50, .12));
}

@keyframes map-location-notice-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 2px 7px rgba(91, 29, 24, .42), 0 0 0 0 rgba(223, 73, 62, .38); }
  50% { transform: scale(1.08); box-shadow: 0 2px 9px rgba(91, 29, 24, .48), 0 0 0 6px rgba(223, 73, 62, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .map-location-notice { animation: none; }
}

.map-location-label {
  position: relative;
  z-index: 1;
  min-width: 82%;
  max-width: 118%;
  margin-top: -6%;
  padding: clamp(4px, 1cqw, 8px) clamp(7px, 1.8cqw, 14px);
  border: 1px solid rgba(184, 133, 42, .82);
  border-radius: 999px;
  background: rgba(255, 252, 241, .96);
  color: #3f3328;
  box-shadow: 0 3px 8px rgba(55, 64, 50, .14), inset 0 0 0 1px rgba(255, 255, 255, .9);
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(12px, 3.15cqw, 20px);
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.map-location:active {
  transform: translate(-50%, -50%) scale(.97);
}

.map-location:focus-visible {
  outline: 3px solid rgba(255, 239, 151, .96);
  outline-offset: 4px;
}

.map-location:focus-visible img {
  outline: none;
}

.map-location.is-selected,
.map-location.is-destination {
  z-index: auto;
  filter: drop-shadow(0 5px 8px rgba(47, 61, 50, .18));
}

@media (hover: hover) and (pointer: fine) {
  .map-location:hover {
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 5px 8px rgba(47, 61, 50, .18));
    outline: none;
  }
}

.map-instruction {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 2.2%;
  margin: 0;
  padding: 8% 5% 0;
  color: #fff4c7;
  background: linear-gradient(180deg, transparent, rgba(11, 86, 72, .7));
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(12px, 3cqw, 18px);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 1px 3px rgba(14, 56, 48, .56);
  pointer-events: none;
}