/* ══════════════════════════════════════════════════════════════════════════
 * RONDA 188 · PACK DE BATERÍA 3D — pixel art por etapa y skin (perfil.html)
 * ──────────────────────────────────────────────────────────────────────────
 * El arte sale de tools/bateria_packs/packs_manual.py (48×48) y se pinta a
 * ×2 exacto (96 px) para que cada píxel del sprite sea un bloque de 2×2:
 * nada de escalas fraccionarias sobre pixel art (§6.3). Solo se anima
 * transform / opacity / filter (§6.1) con las curvas oficiales (§6.2).
 * El color del halo es el del rango activo de la Batería Power
 * (--bat-fill-c, power-ui.css «RONDA 168»), así sigue a la skin.
 * ════════════════════════════════════════════════════════════════════════ */
.pw-batt-pack {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  margin-top: 0.55rem;
}
.pw-batt-pack-art {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-batt-pack-art::before {
  content: "";
  position: absolute;
  inset: 14% 10% 6% 10%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--bat-fill-c, #ff3b30) 46%, transparent), transparent 72%);
  opacity: 0.55;
  transform: scale(0.94);
  animation: pwPackHalo 3200ms cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
.pw-batt-pack-art img {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 6px color-mix(in srgb, var(--bat-fill-c, #ff3b30) 45%, transparent));
  animation: pwPackFlota 2800ms cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}
.pw-batt-pack[data-etapa="2"] .pw-batt-pack-art::before { opacity: 0.7; }
.pw-batt-pack[data-etapa="3"] .pw-batt-pack-art::before { opacity: 0.85; animation-duration: 2400ms; }
.pw-batt-pack[data-etapa="3"] .pw-batt-pack-art img {
  animation-duration: 2200ms;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 9px color-mix(in srgb, var(--bat-fill-c, #ff3b30) 65%, transparent));
}
.pw-batt-pack-txt {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
  color: color-mix(in srgb, var(--bat-fill-c, #ff3b30) 70%, #ffffff);
  overflow-wrap: anywhere;
}

@keyframes pwPackFlota {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-2px);
  }
}
@keyframes pwPackHalo {
  0% {
    opacity: 0.45;
    transform: scale(0.94);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pw-batt-pack-art::before,
  .pw-batt-pack-art img { animation: none; }
}