/* Duelo · «toque de juego» en todas las pantallas (games/duelo/juego-vivo.js).
   Solo transform/opacity animados. Las entradas usan fill «backwards»: al
   terminar, cada elemento vuelve a sus reglas de siempre (p. ej. el rival
   elegido sigue subido 4 px). */

:root{ --jv-golpe:cubic-bezier(.3,1.6,.5,1); --jv-cae:cubic-bezier(.2,.9,.3,1.25); }

/* ══════════ ELIGE TU RIVAL ══════════
   La pantalla vive en duelo/elige-rival.js; aquí solo el latido del botón oro. */
#s1ConfirmCpu{ position:relative; isolation:isolate; }
#s1ConfirmCpu::before{ content:""; position:absolute; inset:-5px; border-radius:inherit; z-index:-1; pointer-events:none;
  box-shadow:0 0 22px 4px rgba(246,208,106,.75); opacity:0; animation:jvLate 1.6s ease-in-out 1.2s infinite; }
@keyframes jvLate{ 0%,100%{ opacity:.15; } 50%{ opacity:1; } }

/* ══════════ TEMA / PREGUNTA ══════════ */
/* el reloj golpea en los últimos segundos */
#board .s5-timer-num.jv-tic{ animation:jvTic 420ms var(--jv-golpe); }
@keyframes jvTic{ 0%{ transform:scale(1.55); color:#ff6b5e; } 100%{ transform:scale(1); } }
/* acierto: brillo que cruza TU respuesta (capa recortada, no la tapa) */
.jv-brillo{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:2; }
.jv-brillo i{ position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:translateX(-120%) skewX(-18deg); animation:jvCruza 620ms ease-out 80ms both; }
@keyframes jvCruza{ to{ transform:translateX(330%) skewX(-18deg); } }

/* capas fijas: onda y viñeta */
.jv-onda{ position:fixed; pointer-events:none; z-index:9996; box-shadow:0 0 0 3px var(--jc), 0 0 24px var(--jc);
  animation:jvOnda 620ms ease-out both; }
@keyframes jvOnda{ 0%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.18,1.6); } }
.jv-vineta{ position:fixed; inset:0; pointer-events:none; z-index:9994; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(255,40,40,.55) 100%); }
.jv-vineta.on{ animation:jvVineta 620ms ease-out both; }
@keyframes jvVineta{ 0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; } }

/* ══════════ ¡PORCIÓN! / ASÍ VAS ══════════ */
.wheel-ov.show .wov-card{ animation:jvCarta 520ms var(--jv-cae) backwards; }
.wheel-ov.show .wov-eyebrow{ animation:jvSube 320ms ease-out 120ms backwards; }


/* ══════════ RETOS ══════════ */
#retoPanel.jv-in{ animation:jvCarta 460ms var(--jv-cae) backwards; }
#retoPanel.jv-in .reto-kicker{ animation:jvSube 300ms ease-out 80ms backwards; }
#retoPanel.jv-in .reto-title{ animation:jvSello 520ms var(--jv-golpe) 140ms backwards; }
#retoPanel.jv-in .reto-score,
#retoPanel.jv-in .reto-cmp{ animation:jvPop 440ms var(--jv-golpe) 300ms backwards; }
#retoPanel.jv-in .reto-sub,
#retoPanel.jv-in .reto-lock,
#retoPanel.jv-in .reto-h2h,
#retoPanel.jv-in .reto-input{ animation:jvSube 340ms ease-out 380ms backwards; }
#retoPanel.jv-in .reto-wa{ animation:jvPop 420ms var(--jv-golpe) 480ms backwards; }
#retoPanel.jv-in .reto-wa + .reto-wa{ animation-delay:560ms; }
#retoPanel.jv-in .reto-copy,
#retoPanel.jv-in .reto-home{ animation:jvSube 300ms ease-out 640ms backwards; }
#retoPanel.jv-in .reto-cmp-head{ animation:jvSube 300ms ease-out 520ms backwards; }
#retoPanel.jv-in .reto-row{ animation:jvFila 360ms var(--jv-cae) backwards; animation-delay:calc(560ms + var(--i,0) * 45ms); }
#retoPanel.jv-in .reto-item{ animation:jvPlaca 440ms var(--jv-cae) backwards; animation-delay:calc(160ms + var(--i,0) * 90ms); }
.reto-score b.jv-golpe, .wov-count b.jv-golpe, .wov-s b.jv-golpe{ display:inline-block; animation:jvNum 360ms var(--jv-golpe); }

/* ══════════ BOTONES: se hunden y rebotan ══════════ */
:is(.s1-cta, .s1-volver, .s1-modal-x, .reto-wa, .reto-home, .reto-copy, .reto-item-btn, .btn3d, .s1-plain, .du-abandon, .du-back, .s1-retos-btn).jv-pulsa{
  transform:scale(.93) !important; transition:transform 60ms ease-out !important; }
:is(.s1-cta, .s1-volver, .s1-modal-x, .reto-wa, .reto-home, .reto-copy, .reto-item-btn, .btn3d, .s1-plain, .du-abandon, .du-back, .s1-retos-btn).jv-suelta{
  animation:jvSuelta 380ms var(--jv-golpe) !important; }
@keyframes jvSuelta{ 0%{ transform:scale(.93); } 55%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

/* ══════════ fotogramas comunes ══════════ */
@keyframes jvSello{ 0%{ opacity:0; transform:scale(2.2) rotate(-7deg); } 55%{ opacity:1; transform:scale(.92) rotate(1deg); } 100%{ transform:none; } }
@keyframes jvPop{ 0%{ opacity:0; transform:scale(.6); } 60%{ opacity:1; transform:scale(1.08); } 100%{ transform:none; } }
@keyframes jvSube{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes jvCarta{ 0%{ opacity:0; transform:translateY(-40px) scale(1.08); } 60%{ opacity:1; transform:translateY(4px) scale(.99); } 100%{ transform:none; } }
@keyframes jvFila{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:none; } }
@keyframes jvPlaca{ 0%{ opacity:0; transform:translateX(60px); } 70%{ opacity:1; transform:translateX(-5px); } 100%{ transform:none; } }
@keyframes jvNum{ 0%{ transform:scale(1.5); } 100%{ transform:scale(1); } }

@media (prefers-reduced-motion:reduce){
  .wheel-ov.show *, #retoPanel.jv-in *{ animation:none !important; }
  .jv-onda, .jv-vineta, .jv-brillo{ display:none !important; }
}