/* Animaciones de Batalla */
.battle-roll-container {
  width: 100%; height: 100px;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}
.battle-roll-item {
  width: 100%; height: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.3);
  box-sizing: border-box;
}
.battle-roll-item.winner {
  box-shadow: 0 0 20px rgba(255,255,255,0.1) inset;
}
/* La animación mueve el contenido hacia arriba */
.battle-roll-container.rolling > .battle-roll-track {
  animation: rollVertical 3s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

/* Corrección para JS: añadir un wrapper interno */
.battle-roll-track {
  display: flex; flex-direction: column;
}
.battle-roll-container.rolling .battle-roll-track {
  transform: translateY(0); /* Start */
  animation: rollVertical 3s cubic-bezier(0.15, 0.95, 0.25, 1) forwards;
}

@keyframes rollVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-1800px); } /* -(N-1)*100px */
}