/* ═══ Animations — Swappable Layer ═══ */

/* ── Shake before reveal ───── */
@keyframes shakeLeft {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-8px) rotate(-5deg); }
  40% { transform: translateX(8px) rotate(5deg); }
  60% { transform: translateX(-6px) rotate(-3deg); }
  80% { transform: translateX(6px) rotate(3deg); }
}
@keyframes shakeRight {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(8px) rotate(5deg); }
  40% { transform: translateX(-8px) rotate(-5deg); }
  60% { transform: translateX(6px) rotate(3deg); }
  80% { transform: translateX(-6px) rotate(-3deg); }
}

.reveal-hand.shaking.left .hand-icon { animation: shakeLeft 0.5s ease infinite; }
.reveal-hand.shaking.right .hand-icon { animation: shakeRight 0.5s ease infinite; }

/* ── Slam reveal ───────────── */
@keyframes slamIn {
  0% { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.reveal-hand.revealed .hand-icon { animation: slamIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* ── Winner glow ───────────── */
@keyframes winnerPulse {
  0%, 100% { filter: drop-shadow(0 0 10px var(--win)); }
  50% { filter: drop-shadow(0 0 25px var(--win)); }
}
.reveal-hand.winner .hand-icon { animation: winnerPulse 0.8s ease infinite 3; }

/* ── Loser fade ────────────── */
.reveal-hand.loser .hand-icon {
  opacity: 0.4;
  filter: grayscale(1);
  transition: all 0.5s ease;
}

/* ── Draw bounce ───────────── */
@keyframes drawBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.reveal-hand.draw .hand-icon { animation: drawBounce 0.6s ease infinite 3; color: var(--draw); }

/* ── Choice button bounce ──── */
@keyframes selectBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1.05); }
}
.choice-btn.just-selected { animation: selectBounce 0.3s ease; }

/* ── Screen flash on result ── */
@keyframes screenFlash {
  0% { opacity: 0; }
  20% { opacity: 0.15; }
  100% { opacity: 0; }
}
.flash-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  animation: screenFlash 0.5s ease;
}
.flash-overlay.win { background: var(--win); }
.flash-overlay.lose { background: var(--lose); }
.flash-overlay.draw { background: var(--draw); }

/* ── Particle effects (high quality) ── */
.particle {
  position: fixed;
  pointer-events: none;
  z-index: 60;
  font-size: 1.5rem;
  animation: particleFly 1s ease-out forwards;
}
@keyframes particleFly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(360deg); }
}