/* ============================================================
   VEVoltium — UI compartida del Voltium (moneda cosmética). #662
   Fuente única para TODOS los juegos (igual que VEShop / VEFreeSpins /
   control-bar). Estructura y comportamiento idénticos; solo cambia la
   PALETA por CSS variables que el juego define en su :root. Por defecto
   = tema neón de OverVolt (cian). Variables:
     --voltium-accent     color de acento (texto, glow, borde, coin glow)
     --voltium-bg         fondo del chip HUD
     --voltium-border     color del borde del chip (def: deriva del acento)
     --voltium-icon-size  tamaño del icono (OverVolt 30px / Gallows 22px)
     --voltium-text       color del número (def: acento claro)
     --voltium-bump-scale escala del "bump" al cambiar saldo (1.18 / 1.25)
     --voltium-bump-dur   duración del bump (0.45s / 0.35s)
     --voltium-hud-z      z-index del chip HUD (def 11)
     --voltium-fly-z      z-index de la capa de monedas (def 12)
     --voltium-top / --voltium-right  posición absoluta (solo modo flotante)
   El juego monta el módulo con VEVoltium.mount(); el chip puede ir
   FLOTANTE (absoluto, esquina) o EN LÍNEA dentro de una barra (.voltium-hud--inline).
   ============================================================ */

#voltium-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: 22px;
  background: var(--voltium-bg, rgba(8, 16, 28, 0.7));
  border: 1.5px solid var(--voltium-border, var(--voltium-accent, rgba(60, 170, 230, 0.6)));
  box-shadow: 0 0 14px var(--voltium-accent, rgba(40, 150, 220, 0.35));
  backdrop-filter: blur(3px);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Modo flotante (OverVolt): esquina superior derecha del stage. */
#voltium-hud {
  position: absolute;
  top: var(--voltium-top, 16px);
  right: var(--voltium-right, 18px);
  z-index: var(--voltium-hud-z, 11);
}

/* Modo en línea (Gallows): vive dentro de una barra flex; sin posicionar. */
#voltium-hud.voltium-hud--inline {
  position: static;
  top: auto;
  right: auto;
}

#voltium-hud #voltium-icon {
  width: var(--voltium-icon-size, 30px);
  height: var(--voltium-icon-size, 30px);
  object-fit: contain;
  filter: drop-shadow(0 0 6px var(--voltium-accent, rgba(60, 180, 240, 0.8)));
}

#voltium-hud #voltium-count {
  color: var(--voltium-text, var(--voltium-accent, #bfe9ff));
  font-weight: 800;
  font-size: 18px;
  min-width: 18px;
  text-align: center;
  text-shadow: 0 0 8px var(--voltium-accent, rgba(60, 180, 240, 0.7));
}

/* Bump al cambiar el saldo (no en cada spin: lo gobierna el módulo). */
#voltium-hud.voltium-bump {
  animation: voltium-bump var(--voltium-bump-dur, 0.45s) ease-out;
}
@keyframes voltium-bump {
  0% { transform: scale(1); }
  50% {
    transform: scale(var(--voltium-bump-scale, 1.18));
    box-shadow: 0 0 22px var(--voltium-accent, rgba(60, 180, 240, 0.9));
  }
  100% { transform: scale(1); }
}

/* Capa donde vuelan las monedas hacia el contador. Cubre el stage. */
#voltium-fly {
  position: absolute;
  inset: 0;
  z-index: var(--voltium-fly-z, 12);
  pointer-events: none;
}

/* Cada moneda voladora (canvas: drawImage de frames ya decodificados =
   cero parpadeo en móvil, render idéntico en ambos juegos). */
.voltium-coin {
  position: absolute;
  left: 0;
  top: 0;
  width: 54px;
  height: 54px;
  filter: drop-shadow(0 0 10px var(--voltium-accent, rgba(60, 180, 240, 0.9)));
  will-change: transform;
}