/* Original map proportions and hotspots, scoped away from the cover and collection. */
.map-legacy .map-scene {
  position: relative;
  aspect-ratio: 750 / 1624;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: #e7f5fd;
}
.map-legacy .map-scene--intro,
.map-legacy .map-scene--end { aspect-ratio: 941 / 1672; }
.map-legacy .map-scene--intro { --intro-scene-height: calc(min(100vw, 520px) * 1.776833156); display: flex; flex-direction: column; aspect-ratio: auto; min-height: var(--intro-scene-height); }
.map-legacy .map-scene > img { width: 100%; height: 100%; object-fit: cover; }
.map-legacy .map-scene.is-image-error > .image-fallback { z-index: 6; }
.map-legacy .map-scene.is-map-loading::before,
.map-legacy .map-scene.is-map-arriving::before {
  content: "正在准备地图…";
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #f5f1e5;
  font-size: 14px;
  pointer-events: none;
}
.map-legacy .map-scene.is-map-arriving::before {
  content: "";
  animation: return-map-paper .26s cubic-bezier(.22,.65,.3,1) both;
}
@keyframes return-map-paper { from { opacity: 1; } to { opacity: 0; } }
.map-legacy .map-scene::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 4px;
  background: linear-gradient(180deg, transparent, rgba(7,87,167,.12));
  pointer-events: none;
}
.map-legacy .map-scene--intro .map-intro__visual { inset: 0; }
.map-legacy .map-scene--intro .map-intro__visual::after { background: none; }
.map-legacy .map-intro {
  position: relative;
  order: 1;
  flex-shrink: 0;
  top: auto;
  left: auto;
  padding: max(calc(var(--intro-scene-height) * .13), calc(4.5em + max(12px, env(safe-area-inset-top)))) 9% 0;
}
.map-legacy .map-intro__visual.is-image-error { position: relative; order: 2; flex-shrink: 0; inset: auto; margin: 20px 9%; }
.map-legacy .map-intro__visual.is-image-error > img { display: none; }
.map-legacy .map-intro__visual.is-image-error > .image-fallback { position: static; padding: 18px 0; border-top: 1px solid #94b1c0; border-bottom: 1px solid #94b1c0; background: transparent; }
.map-legacy .map-intro .eyebrow { font-size: 11px; letter-spacing: .19em; }
.map-legacy .map-intro h1 {
  margin: 10px 0 14px;
  font-size: clamp(38px, 11vw, 58px);
  line-height: 1.03;
  letter-spacing: -.06em;
}
.map-legacy .map-intro > p:last-child { font-size: 14px; line-height: 1.75; }
.map-legacy .scroll-cue {
  position: relative;
  order: 3;
  flex-shrink: 0;
  align-self: flex-end;
  right: auto;
  bottom: auto;
  left: auto;
  margin: auto 9% calc(var(--intro-scene-height) * .07) 0;
  display: block;
  min-height: 0;
  padding: 0 6px 3px;
  font-size: 12px;
  border-radius: 4px;
  background: linear-gradient(to top, rgba(255,248,233,.48) 24px, transparent 24px);
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  transform: none;
}
.map-legacy .scroll-cue span {
  display: block;
  width: 1px;
  height: 42px;
  margin: 0 auto 10px;
  background: var(--blue);
  animation: legacy-scroll-line 1.8s ease-in-out infinite;
}
.map-legacy .spot-hotspot {
  /* Match the canvas width while preserving each landmark's original hit area. */
  --scene-width: min(100vw, 520px);
  --raw-hint-x: calc(var(--scene-width) * var(--hint-scene-x));
  --hint-shift-x: calc(clamp(60px, var(--raw-hint-x), calc(var(--scene-width) - 60px)) - var(--raw-hint-x));
  position: absolute;
  z-index: 5;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: var(--h);
  max-width: none;
  border-radius: 18px;
  cursor: pointer;
  transform: none;
}
.map-legacy .spot-hotspot[data-spot="jiefangbei"] { --hint-scene-x: .73898; }
.map-legacy .spot-hotspot[data-spot="shibatiti"] { --hint-scene-x: .157122; }
.map-legacy .spot-hotspot[data-spot="shanchengtrail"] { --hint-scene-x: .85201; }
.map-legacy .spot-hotspot[data-spot="elingfactory"] { --hint-scene-x: .86065; }
.map-legacy .spot-hotspot[data-spot="liziba"] { --hint-scene-x: .86746; }
.map-legacy .spot-hotspot[data-spot="ciqikou"] { --hint-scene-x: .82214; }
.map-legacy .spot-hotspot[data-spot="cableway"] { --hint-scene-x: .886; }
.map-legacy .spot-hotspot[data-spot="hongyadong"] { --hint-scene-x: .867325; }
.map-legacy .spot-hotspot::before,
.map-legacy .spot-hotspot::after,
.map-legacy .hotspot-ring {
  box-sizing: border-box;
  position: absolute;
  z-index: 2;
  top: var(--hint-y);
  left: calc(var(--hint-x) + var(--hint-shift-x));
  opacity: 0;
  pointer-events: none;
}
.map-legacy .spot-hotspot::before,
.map-legacy .spot-hotspot::after { pointer-events: auto; }
.map-legacy .spot-hotspot::before {
  content: "↗";
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  outline: 3px solid var(--paper);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 3px 4px 0 var(--ink), 0 0 0 0 rgba(255,201,40,.72);
  font-size: 20px;
  font-weight: 950;
  transform: translate(-50%, -50%) scale(.5);
}
.map-legacy .spot-hotspot::after {
  content: attr(data-spot-name) "\A打开札记";
  width: 88px;
  padding: 6px 10px;
  border-radius: 999px;
  outline: 2px solid var(--paper);
  color: white;
  background: rgba(7,58,117,.96);
  box-shadow: 0 5px 14px rgba(4,46,92,.2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
  white-space: pre;
  transform: translate(-50%, 33px);
}
.map-legacy .map-scene.is-visible .spot-hotspot::before {
  animation: legacy-hotspot-enter .16s ease-out forwards;
}
.map-legacy .map-scene.is-visible .spot-hotspot::after {
  animation: legacy-hotspot-label-in .16s ease-out forwards,
    legacy-hotspot-label-float 2.2s .16s ease-in-out infinite;
}
.map-legacy .hotspot-ring {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,201,40,.9);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.9);
}
.map-legacy .map-scene.is-visible .hotspot-ring {
  animation: legacy-hotspot-ring 2.2s .16s ease-out infinite;
}
.map-legacy .map-scene.is-hotspot-ready .spot-hotspot::before {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.map-legacy .map-scene.is-hotspot-ready .spot-hotspot::after { animation: none; opacity: 1; }
.map-legacy .map-scene.is-hotspot-ready .hotspot-ring { animation: none; opacity: 0; }
.map-legacy .spot-hotspot.is-collected::before {
  content: "✓";
  color: white;
  background: var(--blue);
  box-shadow: 3px 4px 0 var(--ink);
}
.map-legacy .spot-hotspot.is-collected::after {
  content: attr(data-spot-name) "\A已收集";
  color: var(--ink);
  background: var(--yellow);
}
.map-legacy .map-scene .spot-hotspot.is-collected .hotspot-ring { animation: none; opacity: 0; }
.map-legacy .spot-hotspot:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.map-legacy .spot-hotspot:active::before { scale: .82; transition: scale .12s ease; }
.map-legacy .map-scene .spot-hotspot.is-opening::before {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(.92);
}
.map-legacy .map-scene .spot-hotspot.is-opening::after {
  content: attr(data-spot-name) "\A正在打开…";
  animation: none;
  opacity: 1;
  transform: translate(-50%, 33px);
}
.map-legacy .map-scene .spot-hotspot.is-opening .hotspot-ring { animation: none; opacity: 0; }
.map-legacy .map-hotspot-meta {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@keyframes legacy-scroll-line {
  0%,100% { transform: scaleY(.55); transform-origin: top; opacity: .45; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes legacy-hotspot-enter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes legacy-hotspot-ring {
  0% { opacity: .78; transform: translate(-50%, -50%) scale(.9); }
  75%,100% { opacity: 0; transform: translate(-50%, -50%) scale(1.72); }
}
@keyframes legacy-hotspot-label-in {
  from { opacity: 0; transform: translate(-50%, 27px); }
  to { opacity: 1; transform: translate(-50%, 33px); }
}
@keyframes legacy-hotspot-label-float {
  0%,100% { opacity: 1; transform: translate(-50%, 33px); }
  50% { opacity: .86; transform: translate(-50%, 37px); }
}
@media (prefers-reduced-motion: reduce) {
  .map-legacy .spot-hotspot::before { opacity: 1; transform: translate(-50%, -50%); }
  .map-legacy .spot-hotspot::after { opacity: 1; }
}