/* Map view: dig site with the path going down through layers of earth. */

#map-view {
  background: #5a3f2e;
}

/* Invisible probe to read env(safe-area-inset-*) from JS */
#map-view .map-safe-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#map-view .map-scroll {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#map-view .map-scroll::-webkit-scrollbar { display: none; }

#map-view .map-world {
  position: relative;
  overflow: hidden;
}

#map-view .map-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  pointer-events: none;
}

/* ---------- Illustrated background (js/map-bg.js) ---------- */

#map-view .map-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* the segments stack among themselves, always below the path and the nodes */
}
#map-view .map-bg img { display: block; }

#map-view .map-bg-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
}
#map-view .map-bg-scene { width: 100%; height: 100%; }
#map-view .map-bg-prop,
#map-view .map-bg-cloud { position: absolute; }
#map-view .map-bg-prop { height: auto; }
#map-view .map-bg-cloud img { width: 100%; height: auto; }
#map-view .map-bg-ladder {
  position: absolute;
  transform-origin: 50% 0;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

/* Clouds: drift right and fade out before reaching the right side; they reappear
   on the left already transparent, so the cycle has no jump. */
#map-view .map-bg-cloud {
  opacity: 0;
  animation: mv-cloud linear infinite;
  will-change: transform, opacity;
}
#map-view .map-bg.is-hidden .map-bg-cloud,
#map-view .map-bg.is-offscreen .map-bg-cloud { animation-play-state: paused; }

#map-view .map-bg-chunk {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
}
#map-view .map-bg-strip {
  position: absolute;
  left: 0;
  width: 100%;
}
#map-view .map-bg-strip.is-flip { transform: scaleX(-1); }
#map-view .map-bg-fossil { position: absolute; }

#map-view .map-nodes {
  position: absolute;
  inset: 0;
}

/* ---------- Nodes ---------- */

#map-view .map-node {
  position: absolute;
  border-radius: 50%;
  touch-action: pan-y;
}

#map-view .map-node-disc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.12s ease-out;
}

#map-view .map-node:active .map-node-disc { transform: scale(0.92); }

#map-view .map-node-dino {
  width: 78%;
  height: 78%;
  object-fit: contain;
  pointer-events: none;
}
#map-view .map-node-dino.is-portrait {
  width: 100%;
  height: 100%;
}
#map-view .map-node-dino.is-missing { visibility: hidden; }

/* Question mark of the surprise dino (current and locked nodes) */
#map-view .map-node-mystery {
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
#map-view .is-current .map-node-mystery {
  color: #fff;
  text-shadow: 0 3px 0 rgba(160, 50, 0, 0.35);
}
#map-view .is-locked .map-node-mystery {
  color: rgba(0, 0, 0, 0.18);
}

#map-view .map-node-badge {
  position: absolute;
  display: block;
  pointer-events: none;
}
#map-view .map-node-badge svg { display: block; width: 100%; height: 100%; }

/* Completed: dino in color with a star */
#map-view .is-done .map-node-disc {
  background: radial-gradient(circle at 50% 38%, #fffdf3 0%, #fff4cf 70%, #ffe7a3 100%);
  box-shadow: 0 0 0 6px #f6c443, 0 0 0 9px #d99a22, 0 8px 0 7px rgba(0, 0, 0, 0.25);
}
/* Completed fossil: the bones are light, so the disc is dark earth. Only completed
   stops carry is-type-<type>; the current and locked ones don't give away their type. */
#map-view .is-done.is-type-fossil .map-node-disc {
  background: radial-gradient(circle at 50% 38%, #9a6a45 0%, #7a4f32 65%, #5e3b24 100%);
}
#map-view .is-done.is-type-fossil .map-node-dino {
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.35));
}

#map-view .map-star {
  width: 40%;
  height: 40%;
  right: -10%;
  top: -12%;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2));
}

/* Current: white silhouette in an eye-catching pulsing circle */
#map-view .is-current {
  z-index: 2;
  animation: mv-bounce 1.6s ease-in-out infinite;
}
#map-view .is-current .map-node-disc {
  background: radial-gradient(circle at 40% 30%, #ffb35c 0%, #ff7a2f 60%, #f0531f 100%);
  box-shadow: 0 0 0 7px #fff, 0 0 0 11px #ff9a3c, 0 10px 0 9px rgba(0, 0, 0, 0.18);
}
#map-view .is-current .map-node-dino {
  filter: brightness(0) invert(1) drop-shadow(0 3px 0 rgba(160, 50, 0, 0.35));
}
#map-view .map-node-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: mv-halo 1.6s ease-out infinite;
}

/* Locked: stone with a faint silhouette and a padlock, not yet dug up */
#map-view .is-locked .map-node-disc {
  background: radial-gradient(circle at 45% 35%, #f1e8d8 0%, #d9cab0 70%, #c4b293 100%);
  box-shadow: 0 0 0 6px rgba(255, 244, 220, 0.55), 0 7px 0 6px rgba(0, 0, 0, 0.2);
}
#map-view .is-locked .map-node-dino {
  filter: brightness(0);
  opacity: 0.18;
}
#map-view .map-lock {
  width: 38%;
  height: 38%;
  left: 31%;
  bottom: -14%;
  padding: 7%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

/* ---------- Animations ---------- */

#map-view .is-shake { animation: mv-shake 0.45s ease-in-out; }

#map-view .is-current.is-pop {
  animation: mv-pop 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) 1s both, mv-bounce 1.6s ease-in-out 1.7s infinite;
}

#map-view .is-flash::after {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 180, 0.95) 0%, rgba(255, 220, 90, 0.6) 45%, rgba(255, 220, 90, 0) 70%);
  pointer-events: none;
  animation: mv-flash 1.1s ease-out 0.15s both;
}
#map-view .is-flash .map-star { animation: mv-star 0.8s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both; }

/* Uncovering the surprise dino: three hits (0–0.6 s, in time with the sound) and a sparkle
   (0.65 s). The node's bounce freezes where it is and everything animates on the disc, so
   there are no jumps. What appears with the sparkle stays hidden until then (fill forwards). */
#map-view .is-current.is-discover {
  z-index: 3;
  animation-play-state: paused;
}
#map-view .is-discover .map-node-halo { display: none; }
#map-view .is-discover .map-node-disc {
  will-change: transform, filter;
  animation:
    mv-knock 0.2s ease-out 3,
    mv-reveal 0.75s cubic-bezier(0.2, 1.4, 0.4, 1) 0.65s forwards,
    mv-disc-flash 0.75s ease-out 0.65s forwards;
}
#map-view .is-discover .map-node-mystery {
  animation: mv-mystery-out 0.5s ease-in 0.65s forwards;
}
#map-view .map-node-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
#map-view .map-burst-spark,
#map-view .map-burst-dirt {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  animation: mv-burst 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) 0.65s forwards;
}
#map-view .map-burst-spark {
  width: 22px;
  height: 22px;
  margin: -11px;
  background: radial-gradient(circle, #fff 0 18%, #ffe27a 30%, rgba(255, 210, 63, 0) 70%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
#map-view .map-burst-dirt {
  width: 13px;
  height: 10px;
  margin: -5px -6px;
  border-radius: 45% 55% 50% 40%;
  background: #8a5c3a;
}
#map-view .map-node-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 8px solid #fff3b0;
  box-shadow: 0 0 24px 8px rgba(255, 226, 120, 0.7);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: mv-ring 0.7s ease-out 0.65s forwards;
}

@keyframes mv-knock {
  0% { transform: translateY(0) rotate(0) scale(1); }
  25% { transform: translateY(4px) rotate(-8deg) scale(1.07, 0.93); }
  60% { transform: translateY(-3px) rotate(5deg) scale(0.97, 1.04); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}
@keyframes mv-reveal {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1.1); }
}
@keyframes mv-disc-flash {
  0% { filter: brightness(1); }
  25% { filter: brightness(2.2) saturate(0.4); }
  100% { filter: brightness(1.15); }
}
@keyframes mv-mystery-out {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(2.2) rotate(200deg); opacity: 0; }
}
@keyframes mv-burst {
  0% { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 110px), calc(var(--dy) * 110px + 30px)) rotate(var(--rot)) scale(1); opacity: 0; }
}
@keyframes mv-ring {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes mv-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-10px) scale(1.04); }
  60% { transform: translateY(-10px) scale(1.04); }
}
@keyframes mv-halo {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes mv-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-4deg); }
  40% { transform: translateX(9px) rotate(3deg); }
  60% { transform: translateX(-6px) rotate(-2deg); }
  80% { transform: translateX(4px); }
}
@keyframes mv-pop {
  0% { transform: scale(0.3); }
  100% { transform: scale(1); }
}
@keyframes mv-flash {
  0% { transform: scale(0.6); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes mv-star {
  0% { transform: scale(0) rotate(-90deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes mv-cloud {
  0% { transform: translateX(0); opacity: 0; }
  14% { opacity: var(--o); }
  68% { opacity: var(--o); }
  100% { transform: translateX(var(--travel)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #map-view .is-current,
  #map-view .map-node-halo { animation: none; }
  #map-view .is-discover .map-node-disc { animation: mv-disc-flash 0.35s ease-out forwards; }
  #map-view .is-discover .map-node-mystery,
  #map-view .map-burst-spark,
  #map-view .map-burst-dirt,
  #map-view .map-node-ring { animation-delay: 0s; animation-duration: 0.35s; }
  #map-view .map-bg-cloud { animation: none; opacity: var(--o); }
}