/* Extra micro-animations and coin reactions */

@keyframes coin-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); filter: drop-shadow(0 0 10px gold); }
  100% { transform: scale(1); }
}
.wallet-coins.bump { animation: coin-pop 500ms ease; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
.shake { animation: shake 250ms ease; }

@keyframes flash-correct {
  0%   { background-color: rgba(74,222,128,0); }
  30%  { background-color: rgba(74,222,128,0.25); }
  100% { background-color: rgba(74,222,128,0); }
}
.flash-correct { animation: flash-correct 600ms ease; }

@keyframes flash-wrong {
  0%   { background-color: rgba(255,82,82,0); }
  30%  { background-color: rgba(255,82,82,0.25); }
  100% { background-color: rgba(255,82,82,0); }
}
.flash-wrong { animation: flash-wrong 600ms ease; }

/* Coin fly-up to wallet */
.coin-fly {
  position: fixed;
  font-size: 22px;
  z-index: 200;
  pointer-events: none;
  animation: coin-fly 900ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes coin-fly {
  0%   { transform: scale(1) translate(0, 0); opacity: 1; }
  100% { transform: scale(0.5) translate(var(--fly-x), var(--fly-y)); opacity: 0; }
}

/* Confetti */
.confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 80;
  overflow: hidden;
}
.confetti span {
  position: absolute; top: -20px;
  width: 8px; height: 12px;
  animation: confetti-fall 1.6s linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}