/* Iconos de parada en tarjetas, vídeos de las pruebas, la canción y la foto del monigote. */

/* ── Iconos en la tarjeta del mapa y en las de Pruebas ───── */
.card__n { display: flex; flex-direction: column; gap: 2px; }
.card__n .ico { font-size: 24px; width: 28px; height: 28px; }
.card__n small { font: 800 11px var(--font-body); opacity: .85; }
.scard__n { position: relative; }
.scard__n .ico { width: 24px; height: 24px; font-size: 20px; }
.scard__num {
  position: absolute; right: -7px; bottom: -6px; min-width: 18px; height: 18px; padding: 0 3px;
  border-radius: 999px; background: #fff; color: var(--ink); border: 2px solid var(--ink);
  font: 800 10px/14px var(--font-body); font-style: normal; text-align: center;
}
.scard--done .scard__num { background: var(--mint); color: #fff; }

/* ── Paradas con dibujo propio: el edificio en el mapa ───── */
.pin--img { filter: none; }
.pin__pic { position: relative; width: 86px; height: 76px; filter: drop-shadow(2px 3px 0 var(--ink)); }
.pin__pic .ico { width: 100%; height: 100%; font: 800 22px var(--font-display); color: var(--ink); }
.pin__pic::after { /* el punto exacto en el suelo */
  content: ''; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; translate: -50% 0;
  border-radius: 50%; background: var(--plum); border: 2px solid #fff; z-index: -1;
}
.pin--img .pin__num { left: -4px; top: 2px; right: auto; bottom: auto; }
.pin--img .pin__label { order: -1; }
.pin--img.pin--current .pin__pic { animation: bob 1.4s ease-in-out infinite; }
.pin--img.pin--current .pin__pic::after { background: var(--pink); box-shadow: 0 0 0 6px rgba(255,79,147,.35); }
.pin--img.pin--done .pin__pic::after { background: var(--gold); }
.pin--img.pin--locked .pin__pic { filter: grayscale(1) drop-shadow(2px 3px 0 var(--ink)); }
.map--far .pin--img .pin__pic { width: 50px; height: 44px; }
.map--far .pin--img .pin__label { display: none; }

/* ── Vídeos de cada prueba ───────────────────────────────── */
.vids { margin-top: 12px; padding-top: 10px; border-top: 2px dashed var(--line); }
.vids .label { margin-top: 0; }
.vids__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; }
.vid { margin: 0; }
.vid video {
  width: 100%; aspect-ratio: 9 / 12; object-fit: cover; background: var(--ink);
  border-radius: 12px; border: 2px solid var(--ink); display: block;
}
.vid figcaption { font-size: 12px; color: var(--muted); margin-top: 3px; }
.vids .btn.is-busy { opacity: .5; pointer-events: none; }
.progress {
  position: relative; height: 26px; margin-top: 8px; border-radius: 999px; overflow: hidden;
  background: #F3E7F7; border: 2px solid var(--ink);
}
.progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--pink), var(--gold)); transition: width .3s; }
.progress span { position: relative; display: block; text-align: center; font: 800 12px/22px var(--font-body); color: var(--ink); }

/* ── La canción ──────────────────────────────────────────── */
.song { padding-bottom: 20px; }
.song__card {
  display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--plum), var(--plum-2)); color: #fff;
  border-radius: var(--radius); border: var(--ink-line); box-shadow: var(--hard);
}
.song__card h3 { margin: 0; font-size: 20px; }
.song__artist { margin: 2px 0 0; color: var(--gold-2); font-weight: 700; }
.song__disc {
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 26px;
  background: radial-gradient(circle, var(--gold) 0 18%, var(--ink) 19% 100%); border: 3px solid var(--gold);
}
.song.is-playing .song__disc { animation: spin 3s linear infinite; }
.song audio { width: 100%; margin-bottom: 10px; }
.lyrics { padding: 8px 4px 40vh; text-align: center; }
.lyrics p { margin: 0; padding: 7px 6px; font: 600 18px/1.35 var(--font-display); color: var(--ink); }
.lyrics--timed p { color: var(--muted); opacity: .6; cursor: pointer; transition: color .3s, opacity .3s, transform .3s; }
.lyrics--timed p.is-on { color: var(--plum); opacity: 1; transform: scale(1.08); text-shadow: 0 0 1px var(--gold-2); }
@keyframes spin { to { rotate: 360deg; } }

/* ── Paso "pon tu cara" de la entrada ────────────────────── */
.ob__mono { display: grid; place-items: center; padding: 20px 0 6px; }
.ob .btn--big { margin-top: 4px; }
.ob .btn--ghost { color: var(--plum); }