/* ══════════════════════════════════════════════════════════
   Animación de progreso (modo SOLO) — la rana saltarina.
   SECUNDARIA: franja discreta (≤25% del marco, ver styles/player.css),
   SIN fondo (transparente) y CENTRADA verticalmente. Clases con prefijo frog-.
   ══════════════════════════════════════════════════════════ */
.ww-solo-anim { margin: 0; position: relative; }
.ww-solo-anim[hidden] { display: none !important; }
/* La animación se posiciona ABSOLUTA dentro del carril: llena su alto definido
   (player.css) SIN empujar la altura del flex item (height:100% en flujo lo
   inflaba y se comía el marco). */
.frog-anim { position: absolute; inset: 0; }

.frog-track {
  height: 100%;
  position: relative;
  overflow: hidden;                    /* todo cabe a lo ancho: sin scroll */
  background: transparent;             /* sin fondo verde: blende con la tarjeta */
}
.frog-world { position: relative; height: 100%; width: 100%; }

/* Charcos: solo el emoji (nenúfar), sin círculo de fondo, centrado vertical. */
.frog-pad {
  position: absolute; top: 64%;
  font-size: 1.1rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  user-select: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}

/* Rana: posada sobre el charco (centrada vertical, un poco por encima). */
.frog-mascot {
  position: absolute; top: 64%;
  transform: translate(-50%, -98%);
  text-align: center; z-index: 10;
  display: flex; flex-direction: column; align-items: center;
}
.frog-char {
  font-size: 1.6rem;
  line-height: 1; display: block;
  transition: filter .3s; transform-origin: bottom center; will-change: transform;
}
.frog-char.frog-golden {
  filter: brightness(1.3) sepia(.6) saturate(3) hue-rotate(5deg) drop-shadow(0 0 8px gold);
}
.frog-shadow {
  width: 22px; height: 5px; background: rgba(0,0,0,.22);
  border-radius: 50%; margin-top: 1px; flex-shrink: 0;
}
.frog-badge { font-size: .82rem; line-height: 1; min-height: 1rem; text-align: center; }

.frog-flag {
  position: absolute; top: 64%; transform: translate(-50%, -98%);
  font-size: 1.2rem; z-index: 5;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.3));
}

.frog-particle {
  position: absolute; border-radius: 50%; pointer-events: none;
  animation: frog-pop .7s ease-out forwards; z-index: 20;
}
@keyframes frog-pop {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}