/* =========================================================
   05 · Selección de nivel (#proyectos)
   Lista de los cinco proyectos y el mapa de islas.
   ========================================================= */

.stage--map { background: #123c80; }
.stage__far--sea {
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 14px),
    #123c80;
}
.select {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.select__intro {
  max-width: 44ch;
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--ink);
}
.select__list {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.select__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 3px solid var(--ink);
  background: rgb(7 5 15 / .7);
  color: var(--text);
  font: 400 1rem/1.1 var(--f-display);
  text-decoration: none;
  transition: transform var(--dur-press) var(--ease), background-color var(--dur-hover) ease;
}
.select__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--gold);
  color: var(--ink);
  font: 700 var(--px-xs)/1 var(--f-pixel);
  border: 2px solid var(--ink);
}
.select__list a:active { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .select__list a:hover { background: var(--red); }
}

.map {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 4px solid var(--cream);
  outline: 4px solid var(--ink);
  box-shadow: 12px 12px 0 rgb(0 0 0 / .45);
  overflow: hidden;
  background: #17468f;
}
.map .scene { position: absolute; inset: 0; image-rendering: pixelated; }

/* Ruta entre niveles: trazo discontinuo que avanza */
.map__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff6e0;
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  animation: route 1.2s steps(6) infinite;
}
@keyframes route { to { stroke-dashoffset: -12; } }

/* Marcador de nivel: número con banderín y nombre debajo */
.map__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  justify-items: center;
  gap: 3px;
  color: var(--ink);
  text-decoration: none;
  transform: translate(-50%, -50%);
}
.map__node b {
  display: grid;
  place-items: center;
  width: clamp(26px, 2.6vw, 36px);
  height: clamp(26px, 2.6vw, 36px);
  border: 3px solid var(--ink);
  background: var(--gold);
  font: 700 var(--px-xs)/1 var(--f-pixel);
  box-shadow: 0 4px 0 var(--ink);
  transition: transform var(--dur-press) steps(2), background-color var(--dur-hover) steps(2);
}
.map__node span {
  padding: 3px 5px;
  background: var(--ink);
  color: var(--cream);
  font: 700 var(--px-2xs)/1 var(--f-pixel);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Pulso del marcador para invitar a pulsar */
.map__node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(26px, 2.6vw, 36px);
  height: clamp(26px, 2.6vw, 36px);
  border: 2px solid var(--gold);
  translate: -50% 0;
  animation: node-ping 1.6s steps(4) infinite;
  pointer-events: none;
}
.map__node:nth-of-type(2)::before { animation-delay: -.4s; }
.map__node:nth-of-type(3)::before { animation-delay: -.8s; }
.map__node:nth-of-type(4)::before { animation-delay: -1.2s; }
@keyframes node-ping {
  0% { transform: scale(1); opacity: .9; }
  100% { transform: scale(1.8); opacity: 0; }
}
.map__node:active b { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .map__node:hover b { background: var(--red); color: var(--cream); }
}
.map__dino { position: absolute; left: 4%; top: 60%; width: 9%; height: auto; aspect-ratio: 20 / 17; color: #1f5f1d; }

@media (max-width: 900px) {
  .select { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .map__node span { display: none; }
}