.map-view {
  background:
    radial-gradient(circle at 76% 10%, rgba(171, 202, 184, 0.16), transparent 31%),
    radial-gradient(circle at 18% 82%, rgba(65, 121, 126, 0.2), transparent 38%),
    linear-gradient(162deg, #21494f 0%, #143a43 48%, #0d2c37 100%);
}

.brand-lockup,
.map-footer {
  pointer-events: none;
}

.map-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.map-stage.is-dragging {
  cursor: grabbing;
}

.map-stage:focus-visible {
  outline: 1px solid rgba(238, 211, 157, 0.72);
  outline-offset: -0.45rem;
}

.map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.map-stage::before {
  opacity: 0.5;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 28%, rgba(4, 25, 32, 0.2) 100%),
    linear-gradient(112deg, transparent 15%, rgba(232, 226, 201, 0.055) 42%, transparent 68%);
  mix-blend-mode: screen;
}

.world-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.map-camera {
  will-change: transform;
}

.ocean-light {
  fill: url("#ocean-light");
  opacity: 0.62;
}

.land-shadow {
  fill: rgba(4, 24, 28, 0.54);
  transform: translateY(6px);
}

.land-shape {
  fill: url("#world-land");
  fill-rule: evenodd;
  stroke: rgba(176, 199, 173, 0.32);
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
}

.coast-glow {
  fill: none;
  stroke: rgba(209, 220, 192, 0.13);
  stroke-width: 2.6;
  vector-effect: non-scaling-stroke;
}

.reference-geometry-raster {
  image-rendering: auto;
}

.map-reference-label-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  transform-origin: 0 0;
  --map-label-scale: 1;
  will-change: transform;
}

.map-reference-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  color: rgba(237, 232, 211, 0.91);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(5, 26, 31, 0.78), 0 0 6px rgba(5, 28, 34, 0.48);
  white-space: nowrap;
  will-change: transform;
  contain: layout style paint;
}

.map-reference-label b {
  font-weight: inherit;
}

.map-reference-label-country {
  font-size: calc(clamp(0.66rem, 2.45vw, 0.84rem) * var(--map-label-scale));
  letter-spacing: 0.045em;
}

.map-reference-label-country b {
  font-weight: 400;
}

.map-reference-label-city {
  color: rgba(239, 234, 216, 0.88);
  font-size: calc(clamp(0.56rem, 2vw, 0.69rem) * var(--map-label-scale));
  font-weight: 350;
}

.map-reference-city-dot {
  width: 0.26rem;
  height: 0.26rem;
  flex: 0 0 auto;
  border: 1px solid rgba(26, 57, 59, 0.95);
  border-radius: 50%;
  background: rgba(238, 216, 169, 0.95);
  box-shadow: 0 0 5px rgba(238, 216, 169, 0.34);
}

.map-reference-label-physical {
  color: rgba(219, 216, 194, 0.68);
  font-size: calc(clamp(0.54rem, 1.9vw, 0.66rem) * var(--map-label-scale));
  letter-spacing: 0.08em;
}

.map-reference-label-river {
  color: rgba(157, 194, 191, 0.78);
  font-size: calc(clamp(0.51rem, 1.75vw, 0.62rem) * var(--map-label-scale));
  font-style: italic;
}

.mountain-lines {
  fill: none;
  stroke: rgba(218, 218, 188, 0.22);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mountain-shadow {
  fill: none;
  stroke: rgba(16, 49, 46, 0.45);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(2px);
  vector-effect: non-scaling-stroke;
}

.place-marker {
  top: 0;
  left: 0;
  z-index: 5;
  width: 7rem;
  min-height: 3.75rem;
  transform: translate(-1rem, -50%);
  transition: opacity 0.22s ease;
  will-change: left, top;
}

.place-marker.is-offscreen {
  opacity: 0;
  pointer-events: none;
}

.future-place-marker {
  --future-penguin-height: clamp(4rem, 8.4vh, 5rem);
  --future-anchor-x: 1.8rem;
  --future-map-scale: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.25s ease;
  will-change: left, top;
}

.future-place-marker.is-offscreen {
  opacity: 0;
}

.future-place-content {
  position: absolute;
  bottom: 0;
  left: calc(-1 * var(--future-anchor-x));
  display: block;
  width: 9.5rem;
  height: var(--future-penguin-height);
  transform: scale(var(--future-map-scale));
  transform-origin: var(--future-anchor-x) 100%;
  will-change: transform;
}

.future-penguin-frame {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 3.6rem;
  height: 100%;
}

.future-penguin-frame::after {
  content: "";
  position: absolute;
  right: 17%;
  bottom: 0.05rem;
  left: 17%;
  z-index: 0;
  height: 0.28rem;
  border-radius: 50%;
  background: rgba(2, 18, 23, 0.54);
  filter: blur(2.5px);
  transform: scaleX(1.08);
}

.future-penguin {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 1;
  display: block;
  width: auto;
  height: 100%;
  transform: translateX(-50%);
  filter: saturate(0.78) brightness(0.88) drop-shadow(0 0.18rem 0.2rem rgba(3, 18, 22, 0.34));
}

.future-place-label {
  position: absolute;
  bottom: 0.42rem;
  left: 3.65rem;
  color: rgba(230, 229, 211, 0.72);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: clamp(0.58rem, 1.75vw, 0.7rem);
  font-weight: 350;
  line-height: 1;
  letter-spacing: 0.14em;
  text-shadow: 0 1px 2px rgba(5, 26, 31, 0.82), 0 0 6px rgba(5, 28, 34, 0.5);
  white-space: nowrap;
}

.future-place-marker.is-label-left .future-place-label {
  left: -3.25rem;
}

body[data-time-phase="night"] .future-penguin {
  filter: saturate(0.58) brightness(0.67) drop-shadow(0 0.18rem 0.22rem rgba(2, 10, 16, 0.54));
}

body[data-time-phase="night"] .future-place-label {
  color: rgba(203, 211, 207, 0.58);
}

@media (min-width: 900px) and (min-aspect-ratio: 4 / 3) {
  .future-place-marker {
    --future-penguin-height: clamp(5.5rem, 11vh, 6.5rem);
    --future-anchor-x: 2rem;
  }

  .future-penguin-frame {
    width: 4rem;
  }

  .future-place-label {
    left: 4.1rem;
  }
}

.marker-label {
  background: rgba(11, 37, 42, 0.68);
  box-shadow: 0 8px 24px rgba(2, 18, 23, 0.3);
}

.marker-weather {
  position: absolute;
  top: calc(50% + 1.5rem);
  left: 2.2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 0;
  padding: 0;
  color: rgba(246, 241, 220, 0.9);
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  text-shadow: 0 1px 3px rgba(3, 20, 25, 0.86);
}

.marker-weather-icon {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  color: #f2c77d;
  font-size: 0.9rem;
  line-height: 1;
}

.marker-weather-icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
  overflow: visible;
}

.marker-weather[data-weather-kind="rain"] .marker-weather-icon { color: #a8d4d0; }
.marker-weather[data-weather-kind="cloudy"] .marker-weather-icon { color: #d8d9c7; }
.marker-weather[data-weather-status="loading"] { color: rgba(246, 241, 220, 0.56); }

.map-gesture-hint {
  position: absolute;
  right: calc(var(--safe-right) + 0.15rem);
  bottom: calc(var(--safe-bottom) + 0.3rem);
  z-index: 4;
  margin: 0;
  color: rgba(237, 235, 217, 0.46);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  pointer-events: none;
}

@media (max-height: 680px) {
  .map-gesture-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .map-camera { will-change: auto; }
}