/* === ANIMAÇÃO DE MOEDAS === */
.coins-container {
  position: relative;
  width: 239px;
  height: 148px;
  margin: 0 auto;
}
.coins-pile {
  position: absolute;
  height: 100%;
  width: 60px;
}

/* Posições exatas das 10 pilhas */
#pile1  { top: -60px; left: 66px; }
#pile2  { top: -50px; left: 04px; }
#pile3  { top: -60px; left: 128px; }
#pile4  { top: -21px; left: -32px; }
#pile5  { top: -10px; left: 36px; }
#pile6  { top: -20px; left: 100px; }
#pile7  { top: -20px; left: 161px; }
#pile8  { top: 0;     left: -2px; }
#pile9  { top: 0;     left: 66px; }
#pile10 { top: 0;     left: 132px; }

/* Posição vertical de cada moeda na pilha */
.coin-1 { top: 113px; }
.coin-2 { top: 103px; }
.coin-3 { top: 93px; }
.coin-4 { top: 83px; }
.coin-5 { top: 73px; }
.coin-6 { top: 63px; }
.coin-7 { top: 53px; }
.coin-8 { top: 43px; }

.coin {
  position: absolute;  
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}

.coin.visible { opacity: 1; }

@keyframes coinDrop {
  from { opacity: 0; transform: translateY(-80px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes coinFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.coin.dropping   { animation: coinDrop 0.45s ease-out forwards; }
.coin.fading-out { animation: coinFadeOut 0.3s ease-out forwards; }