/* ==========================================================
   Overworld realm map — tilted 3D board, path, nodes, marker
   ========================================================== */

.map-board {
  position: relative;
  width: min(88cqw, 1000px);
  height: min(58cqh, 430px);
  transform: perspective(900px) rotateX(26deg);
  transform-style: preserve-3d;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(240, 184, 96, 0.08), transparent 70%),
    repeating-conic-gradient(#2c1e48 0 25%, #271a40 0 50%) 0 0 / 64px 64px;
  border: var(--px) solid var(--purple-mid);
  outline: 2px solid var(--night-deep);
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.55),
    inset 0 0 60px rgba(21, 12, 40, 0.8);
  margin-top: 1vmin;
}

/* Dotted quest path */
.map-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-path polyline {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.7;
  stroke-dasharray: 2 2.4;
  stroke-linecap: round;
  opacity: 0.75;
  filter: drop-shadow(0 0 2px rgba(240, 184, 96, 0.8));
  animation: path-march 1.4s linear infinite;
}

@keyframes path-march {
  to { stroke-dashoffset: -4.4; }
}

/* Realm nodes stand upright on the tilted board */
.map-node {
  position: absolute;
  transform: translate(-50%, -80%) rotateX(-26deg);
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vmin;
  background: none;
  border: none;
  cursor: default;
  font-family: var(--font-pixel);
  z-index: 2;
}

.map-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 7.5cqh, 54px);
  height: clamp(34px, 7.5cqh, 54px);
  font-size: clamp(16px, 4cqh, 28px);
  background: linear-gradient(180deg, var(--night-soft) 0%, var(--night) 100%);
  border: 3px solid var(--gold-dim);
  outline: 2px solid var(--night-deep);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
}

.map-node-label {
  font-size: clamp(6px, 1.5cqh, 9px);
  color: var(--pink-soft);
  text-shadow: 1px 1px 0 var(--night-deep);
  max-width: 14ch;
  line-height: 1.6;
}

.map-node.done .map-node-icon {
  border-color: var(--gold);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 0 12px rgba(240, 184, 96, 0.6);
}

.map-node.locked {
  opacity: 0.38;
  filter: saturate(0.4);
}

.map-node.next.ready {
  cursor: pointer;
}

.map-node.next.ready .map-node-icon {
  border-color: var(--gold-bright);
  animation: node-beckon 1.1s ease-in-out infinite;
}

@keyframes node-beckon {
  0%, 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 217, 138, 0.5); transform: translateY(0); }
  50% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4), 0 0 22px rgba(255, 217, 138, 1); transform: translateY(-5px); }
}

/* The bat marker (Batman himself) */
.map-marker {
  position: absolute;
  transform: translate(-50%, -100%) rotateX(-26deg);
  transform-origin: 50% 100%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(242, 160, 192, 0.7));
  animation: marker-hover 0.8s ease-in-out infinite;
}

@keyframes marker-hover {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}

.map-caption {
  font-size: clamp(8px, 1.8vmin, 14px);
  color: var(--gold-bright);
  text-shadow: 2px 2px 0 var(--night-deep);
  margin-top: 2vmin;
  min-height: 2.4em;
}

/* Zoom-into-level transition (added to the whole screen) */
.screen.zoom-in {
  animation: screen-zoom 0.62s ease-in forwards;
  pointer-events: none;
}

@keyframes screen-zoom {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

.map-node-icon svg {
  width: 64%;
  height: auto;
}