/* ═══════════════════════════════════════════════════════════════
 *  cosmetics.css — Estilos de cosméticos
 * ═══════════════════════════════════════════════════════════════
 *
 *  Mismas clases se reutilizan en:
 *    - Vista combate (#battle-scene, #battle-scene-2v2)
 *    - Vista armario (#armory-view preview)
 *
 *  Por slot:
 *    .platform-*   → aplicar a .bs-platform / .bs2-platform
 *    .frame-*      → aplicar a wrapper .sprite-frame envolviendo .bs-sprite
 *    .aura-*       → aplicar a wrapper .sprite-aura envolviendo .bs-sprite
 *    .hpfill-*     → aplicar a .bs-hpfill / .bs2-hpfill
 *    .nameplate-*  → aplicar a .bs-infobox / .bs2-namebar
 *    .dmgnum-*     → aplicar a numerito flotante creado en battle.js
 *    .ko-*         → aplicar al sprite rival al morir (animación 1 vez)
 *    .victory-*    → overlay full-screen pre-modal de resultado
 *
 *  Paleta NO tiene CSS aquí — su color se aplica en battle.js via
 *  override de animColor.
 * ═══════════════════════════════════════════════════════════════ */

/* ─── BASE WRAPPERS ──────────────────────────────────────────── */
/* Los wrappers se insertan dentro de .bs-sprite-area como siblings del
   sprite. .bs-sprite-area es position:absolute + flex column, así que
   wrappers absolutos top:0 centrados horizontalmente quedan superpuestos
   sobre el sprite (que es el primer hijo del flex).                    */
.sprite-frame,
.sprite-aura {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
}
.sprite-frame { z-index: 2; }
.sprite-aura  { z-index: 1; }

/* Tamaños por lado (coinciden con .bs-sprite-enemy / .bs-sprite-player) */
.bs-enemy-area  > .sprite-frame,
.bs-enemy-area  > .sprite-aura  {
  width:  clamp(72px, 14vw, 100px);
  height: clamp(72px, 14vw, 100px);
}
.bs-player-area > .sprite-frame,
.bs-player-area > .sprite-aura  {
  width:  clamp(88px, 16vw, 120px);
  height: clamp(88px, 16vw, 120px);
}
/* Aura sale ligeramente del sprite para que el orbital de emojis tenga aire */
.sprite-aura { transform: translateX(-50%) scale(1.35); }

/* Tamaños 2v2 — wrappers dentro de .bs2-sprite-wrap junto al .bs2-sprite */
.bs2-sprite-wrap > .sprite-frame,
.bs2-sprite-wrap > .sprite-aura {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.bs2-fighter-enemy .bs2-sprite-wrap > .sprite-frame,
.bs2-fighter-enemy .bs2-sprite-wrap > .sprite-aura {
  width:  clamp(52px, 10vw, 78px);
  height: clamp(52px, 10vw, 78px);
}
.bs2-fighter-ally  .bs2-sprite-wrap > .sprite-frame,
.bs2-fighter-ally  .bs2-sprite-wrap > .sprite-aura {
  width:  clamp(60px, 11vw, 88px);
  height: clamp(60px, 11vw, 88px);
}
.bs2-sprite-wrap > .sprite-aura { transform: translateX(-50%) scale(1.35); }

/* En el preview del armario los tamaños son fijos */
.armory-item-preview > .sprite-frame,
.armory-item-preview > .sprite-aura {
  width:  70px;
  height: 70px;
  top: 0;
  left: 0;
  transform: none;
}
.armory-item-preview > .sprite-aura { transform: scale(1.3); transform-origin: center; }
.armory-preview-stage > .bs-sprite-area > .sprite-frame,
.armory-preview-stage > .bs-sprite-area > .sprite-aura {
  width: 70px;
  height: 70px;
}

/* ─── PLATAFORMS (4) ─────────────────────────────────────────── */

.platform-bronze {
  background: radial-gradient(ellipse at center, #cd7f32 0%, #6b3a14 70%, #2a1408 100%) !important;
  box-shadow: 0 0 16px #cd7f3288, inset 0 0 8px #a0612099 !important;
  border: 1px solid #8a4f1f !important;
}

.platform-silver {
  background: radial-gradient(ellipse at center, #e8e8e8 0%, #9a9a9a 65%, #3a3a3a 100%) !important;
  box-shadow: 0 0 18px #ffffff66, inset 0 0 10px #ffffff55 !important;
  border: 1px solid #d0d0d0 !important;
  animation: platform-silver-shine 4s linear infinite;
}
@keyframes platform-silver-shine {
  0%   { box-shadow: 0 0 18px #ffffff66, inset 0 0 10px #ffffff55; }
  50%  { box-shadow: 0 0 28px #ffffffaa, inset 0 0 16px #ffffff99; }
  100% { box-shadow: 0 0 18px #ffffff66, inset 0 0 10px #ffffff55; }
}

.platform-gold {
  background: radial-gradient(ellipse at center, #ffe27a 0%, #ffd700 40%, #b8860b 80%, #4a3508 100%) !important;
  box-shadow: 0 0 28px #ffd700cc, inset 0 0 14px #ffe588 !important;
  border: 1.5px solid #ffd700 !important;
  animation: platform-gold-pulse 2.5s ease-in-out infinite;
}
@keyframes platform-gold-pulse {
  0%, 100% { box-shadow: 0 0 28px #ffd700cc, inset 0 0 14px #ffe588; }
  50%      { box-shadow: 0 0 40px #ffd700ff, inset 0 0 22px #fff5b0; }
}

.platform-lava {
  background: radial-gradient(ellipse at center, #ffaa00 0%, #ff4400 40%, #8b0000 80%, #220000 100%) !important;
  box-shadow: 0 0 32px #ff4400dd, inset 0 0 18px #ff8800 !important;
  border: 1.5px solid #ff4400 !important;
  animation: platform-lava-bubble 1.8s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.platform-lava::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 35%, #ffcc00 0%, transparent 12%),
    radial-gradient(circle at 70% 60%, #ffaa00 0%, transparent 10%),
    radial-gradient(circle at 50% 80%, #ff6600 0%, transparent 14%);
  animation: platform-lava-cracks 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes platform-lava-bubble {
  0%, 100% { box-shadow: 0 0 32px #ff4400dd, inset 0 0 18px #ff8800; }
  50%      { box-shadow: 0 0 48px #ff6600ff, inset 0 0 28px #ffcc00; }
}
@keyframes platform-lava-cracks {
  0%, 100% { opacity: .55; transform: scale(1) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.08) rotate(8deg); }
}

/* ─── FRAMES (2) ─────────────────────────────────────────────── */
/* Solo borde animado. NUNCA tapan el sprite (interior 100% transparente).
   Técnica: borde con gradient via mask-composite o doble pseudo-elemento. */

.frame-platinum {
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #e5e4e2,
    0 0 16px rgba(229,228,226,.55),
    0 0 28px rgba(255,255,255,.25);
  animation: frame-platinum-shine 3.5s ease-in-out infinite;
  will-change: box-shadow;
}
@keyframes frame-platinum-shine {
  0%, 100% {
    box-shadow:
      0 0 0 2px #e5e4e2,
      0 0 16px rgba(229,228,226,.55),
      0 0 28px rgba(255,255,255,.25);
  }
  50% {
    box-shadow:
      0 0 0 2px #ffffff,
      0 0 24px rgba(229,228,226,.85),
      0 0 40px rgba(255,255,255,.45);
  }
}

.frame-dragon-gold {
  border-radius: 50%;
  box-shadow:
    0 0 0 3px #ffd700,
    0 0 22px rgba(255,215,0,.7),
    0 0 40px rgba(255,170,0,.45);
  animation: frame-dragon-pulse 1.8s ease-in-out infinite;
  will-change: box-shadow;
}
@keyframes frame-dragon-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px #ffd700,
      0 0 22px rgba(255,215,0,.7),
      0 0 40px rgba(255,170,0,.45);
  }
  50% {
    box-shadow:
      0 0 0 3px #ffaa00,
      0 0 36px rgba(255,170,0,1),
      0 0 60px rgba(255,80,0,.55);
  }
}

/* ─── AURAS (3) ──────────────────────────────────────────────── */
/* Solo gradientes y glow. Sin emojis. Optimizado: animaciones de
   transform/opacity (GPU), keyframes simples, will-change selectivo. */

.aura-diamond,
.aura-fire,
.aura-arcane {
  border-radius: 50%;
  pointer-events: none;
}
/* Anillo de partículas gaseoso (radial conic). El conic-gradient con
   colores cíclicos + rotate produce un halo épico sin imágenes. */
.aura-diamond::before,
.aura-fire::before,
.aura-arcane::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  animation: aura-spin 6s linear infinite;
  pointer-events: none;
  will-change: transform;
  filter: blur(6px);
  opacity: .85;
}

.aura-diamond {
  box-shadow: 0 0 28px rgba(185,242,255,.6);
  animation: aura-diamond-pulse 2.5s ease-in-out infinite;
  will-change: box-shadow;
}
.aura-diamond::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #b9f2ff 60deg,
    transparent 110deg,
    #ffffff 200deg,
    transparent 240deg,
    #b9f2ff 300deg,
    transparent 360deg
  );
}
@keyframes aura-diamond-pulse {
  0%, 100% { box-shadow: 0 0 28px rgba(185,242,255,.6); }
  50%      { box-shadow: 0 0 46px rgba(255,255,255,.85); }
}

.aura-fire {
  box-shadow: 0 0 30px rgba(255,85,0,.55);
  animation: aura-fire-pulse 1.6s ease-in-out infinite;
  will-change: box-shadow;
}
.aura-fire::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #ff4400 50deg,
    #ffaa00 80deg,
    transparent 120deg,
    #ff6600 200deg,
    transparent 240deg,
    #ff8800 290deg,
    transparent 360deg
  );
  animation-duration: 3s;
}
@keyframes aura-fire-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(255,85,0,.55); }
  50%      { box-shadow: 0 0 54px rgba(255,136,0,.85); }
}

.aura-arcane {
  box-shadow: 0 0 34px rgba(160,32,240,.65);
  animation: aura-arcane-pulse 3s ease-in-out infinite;
  will-change: box-shadow;
}
.aura-arcane::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    #a020f0 50deg,
    #d040ff 80deg,
    transparent 130deg,
    #6020a0 200deg,
    transparent 240deg,
    #ff40ff 290deg,
    transparent 360deg
  );
  animation-direction: reverse;
  animation-duration: 5s;
}
@keyframes aura-arcane-pulse {
  0%, 100% { box-shadow: 0 0 34px rgba(160,32,240,.65); }
  50%      { box-shadow: 0 0 58px rgba(208,64,255,.95); }
}

@keyframes aura-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── HP BAR (1) ─────────────────────────────────────────────── */

.hpfill-dragon {
  background: linear-gradient(90deg, #ffd700 0%, #ff8800 50%, #ff4400 100%) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 8px #ff8800, inset 0 0 6px #ffd70099 !important;
  animation: hpfill-dragon-shimmer 2.5s linear infinite;
}
@keyframes hpfill-dragon-shimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ─── NAMEPLATES (2) ─────────────────────────────────────────── */

.nameplate-master {
  background: linear-gradient(135deg, #2a0000 0%, #1a0000 100%) !important;
  border: 2px solid #ff0000 !important;
  box-shadow: 0 0 18px #ff000099, inset 0 0 10px #ff000044 !important;
}
.nameplate-master .bs-char-name,
.nameplate-master .bs2-name {
  color: #ff4444 !important;
  text-shadow: 0 0 8px #ff0000 !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px;
}

.nameplate-royal {
  background: linear-gradient(135deg, #1a0a3a 0%, #3a1a6a 100%) !important;
  border: 2px solid #ffd700 !important;
  box-shadow: 0 0 16px #ffd70099, inset 0 0 8px #ffd70044 !important;
}
.nameplate-royal .bs-char-name,
.nameplate-royal .bs2-name {
  color: #ffd700 !important;
  text-shadow: 0 0 8px #ffd700 !important;
  font-family: 'Cinzel', serif !important;
  letter-spacing: 1px;
}

/* ─── DMGNUM (1) ─────────────────────────────────────────────── */

.dmgnum-blood {
  color: #ff0000 !important;
  text-shadow:
    0 0 8px #ff0000,
    0 0 16px #ff0000,
    2px 2px 0 #4a0000 !important;
  font-family: 'Cinzel', serif !important;
  font-weight: bold;
  font-size: 1.5rem !important;
}

/* ─── FINISHERS (2) — keyframes aplicados al sprite al morir ── */

@keyframes ko-enemy {
  0%   { transform: scale(1) rotate(0deg);   opacity: 1; filter: drop-shadow(0 0 0 #ff0000); }
  25%  { transform: scale(1.4) rotate(8deg); opacity: 1; filter: drop-shadow(0 0 24px #ff0000); }
  60%  { transform: scale(.6) rotate(-20deg); opacity: .6; filter: drop-shadow(0 0 40px #ff0000) blur(2px); }
  100% { transform: scale(0) rotate(-90deg); opacity: 0; filter: blur(8px); }
}
.ko-enemy {
  animation: ko-enemy 1.2s cubic-bezier(.5,0,.4,1) forwards;
  position: relative;
}
.ko-enemy::after {
  content: '';
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff000088 0%, #ff000044 35%, transparent 70%);
  animation: ko-enemy-shockwave 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes ko-enemy-shockwave {
  0%   { transform: scale(.2); opacity: 1; }
  60%  { transform: scale(2.5); opacity: .5; }
  100% { transform: scale(4);   opacity: 0; }
}

@keyframes ko-vapor {
  0%   { transform: scale(1)   translateY(0);    opacity: 1; filter: blur(0); }
  40%  { transform: scale(1.1) translateY(-15px); opacity: .8; filter: blur(2px) brightness(1.4); }
  100% { transform: scale(.6)  translateY(-60px); opacity: 0; filter: blur(20px) brightness(2); }
}
.ko-vapor {
  animation: ko-vapor 1.4s ease-out forwards;
}

/* ─── VICTORY (1) — overlay full-screen ──────────────────────── */
/* Aplicado al overlay #victory-overlay creado en battle.js antes
   del modal de resultado. Dura ~1.5s. Lo VEN ambos jugadores.
   SIN TEXTO — multidioma sin localización. Solo efectos. */

.victory-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.55) 80%);
  overflow: hidden;
}

/* Explosión arcana dorada — pure CSS sin emojis.
   3 capas: vignette del overlay + onda expansiva radial + anillo de fuego
   que se expande desde el centro. GPU-friendly (solo transform + opacity).
   Duración total 1.5s. */

/* Vignette estático con flash de opacidad — NO animamos `background`
   (interpolar radial-gradient stops fuerza paint full-screen cada frame).
   El "flash" se simula con un ::before del overlay base via opacity. */
.victory-dragon {
  background:
    radial-gradient(circle at center, rgba(255,170,0,.10) 0%, rgba(0,0,0,.75) 80%);
}
.victory-dragon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60vmin;
  height: 60vmin;
  margin-left: -30vmin;
  margin-top: -30vmin;
  border-radius: 50%;
  /* Gradient pre-blurreado en stops — sin filter:blur() runtime */
  background: radial-gradient(circle,
    rgba(255,255,255,1) 0%,
    rgba(255,235,160,.95) 12%,
    rgba(255,215,0,.85) 22%,
    rgba(255,140,0,.55) 42%,
    rgba(255,60,0,.25) 62%,
    transparent 82%);
  transform: scale(0);
  opacity: 0;
  animation: victory-dragon-core 1.5s cubic-bezier(.2,.85,.4,1) forwards;
  will-change: transform, opacity;
}

/* Anillo de fuego que se expande hacia los bordes de la pantalla */
.victory-dragon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20vmin;
  height: 20vmin;
  margin-left: -10vmin;
  margin-top: -10vmin;
  border-radius: 50%;
  border: 4px solid rgba(255,215,0,1);
  box-shadow:
    0 0 24px rgba(255,215,0,.9),
    0 0 48px rgba(255,140,0,.7),
    inset 0 0 24px rgba(255,215,0,.5);
  transform: scale(0);
  opacity: 0;
  animation: victory-dragon-ring 1.5s cubic-bezier(.15,.75,.3,1) forwards;
  will-change: transform, opacity, border-width;
}

@keyframes victory-dragon-core {
  0%   { transform: scale(0);    opacity: 0; }
  20%  { transform: scale(1.2);  opacity: 1; }
  60%  { transform: scale(1.5);  opacity: .7; }
  100% { transform: scale(2.5);  opacity: 0; }
}

@keyframes victory-dragon-ring {
  0%   { transform: scale(0);  opacity: 0; border-width: 4px; }
  15%  { opacity: 1; }
  100% { transform: scale(12); opacity: 0; border-width: 1px; }
}

/* ─── ARMARIO — Header ───────────────────────────────────────── */

.armory-header {
  position: relative;
  text-align: center;
  padding: 1.2rem 1rem 1rem;
  margin-bottom: 1rem;
  background:
    radial-gradient(ellipse at 50% 0%, #ffd70022 0%, transparent 60%),
    linear-gradient(180deg, #1a0a2a 0%, #0a0510 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,215,0,.18);
  overflow: hidden;
}
.armory-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 28%, #ffd70077, transparent),
    radial-gradient(1px 1px at 78% 18%, #ffffff55, transparent),
    radial-gradient(1.5px 1.5px at 35% 75%, #ffd70066, transparent),
    radial-gradient(1px 1px at 88% 82%, #ffffff44, transparent);
  opacity: .6;
  pointer-events: none;
}
.armory-header-title {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 16px #ffd70066, 0 2px 6px rgba(0,0,0,.6);
  letter-spacing: 2px;
  position: relative;
}
.armory-header-icon {
  font-size: 2rem;
  margin-right: .4rem;
  filter: drop-shadow(0 0 8px #ffd700);
}
.armory-header-sub {
  color: #cfc4ad;
  font-size: .9rem;
  margin-top: .3rem;
  font-style: italic;
  position: relative;
}
.armory-header-stats {
  display: flex;
  gap: .6rem;
  justify-content: center;
  margin-top: .8rem;
  flex-wrap: wrap;
  position: relative;
}
.armory-stat-chip {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,215,0,.3);
  color: #e8e0d0;
  padding: .3rem .7rem;
  border-radius: 16px;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.armory-stat-chip strong {
  color: #ffd700;
  font-size: .9rem;
}

/* ─── ARMARIO — Preview ──────────────────────────────────────── */

.armory-preview-card {
  text-align: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, rgba(20,12,38,.5) 0%, rgba(10,5,20,.2) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,215,0,.12);
}
.armory-preview-label {
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  color: #ffd700cc;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: .6rem;
}

/* ─── Icono de tab ───────────────────────────────────────────── */
.armory-tab-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.armory-preview-stage {
  position: relative;
  width: 320px;
  height: 260px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 50% 100%, #3a1a6a55 0%, transparent 60%),
    linear-gradient(180deg, #1a0a2a 0%, #0a0510 100%);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ffd70044;
  box-shadow:
    0 0 32px rgba(255,215,0,.08),
    inset 0 -40px 60px rgba(255,215,0,.04),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
/* Suelo del escenario preview con destello sutil */
.armory-preview-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 80%;
  height: 30px;
  background: radial-gradient(ellipse, #ffd70033 0%, transparent 70%);
  pointer-events: none;
}
/* Estrellas sutiles en el fondo */
.armory-preview-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, #ffffff77, transparent),
    radial-gradient(1px 1px at 70% 30%, #ffffff55, transparent),
    radial-gradient(1px 1px at 40% 60%, #ffffff66, transparent),
    radial-gradient(1px 1px at 85% 75%, #ffffff44, transparent),
    radial-gradient(2px 2px at 25% 80%, #ffd70088, transparent);
  pointer-events: none;
}
.armory-preview-stage .bs-sprite-area {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 2;
}
.armory-preview-stage .bs-sprite {
  position: relative;
  width: 80px;
  height: 80px;
  font-size: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.7));
  animation: armory-sprite-idle 3s ease-in-out infinite;
}
@keyframes armory-sprite-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.armory-preview-stage .bs-platform {
  width: 100px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, #3a2a4a 0%, #110a1a 100%);
  margin-top: 4px;
}
.armory-preview-stage .bs-infobox {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  padding: .45rem .6rem;
  background: rgba(8,4,16,.88);
  border: 1px solid #3a2a6a;
  border-radius: 8px;
  font-size: .8rem;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.armory-preview-stage .bs-char-name {
  color: #e8e0d0;
  font-weight: bold;
  font-size: .85rem;
}
.armory-preview-stage .bs-hptrack {
  background: #110a1a;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  margin-top: .35rem;
  border: 1px solid #2a1a3a;
}
.armory-preview-stage .bs-hpfill {
  background: linear-gradient(90deg, #44ff44, #ffaa00, #ff4444);
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}
.armory-preview-stage .dmg-preview {
  position: absolute;
  top: 48%;
  right: 22px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #fff;
  z-index: 5;
  animation: armory-dmg-float 2.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.8));
}
@keyframes armory-dmg-float {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%      { transform: translateY(-8px); opacity: 1; }
}

/* ─── ARMARIO — Tabs + Grid ──────────────────────────────────── */

.armory-tabs {
  display: flex;
  gap: .4rem;
  margin: 1.2rem 0 1rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: .5rem;
  background: linear-gradient(180deg, rgba(20,10,40,.6) 0%, rgba(10,5,20,.3) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255,215,0,.12);
}
.armory-tab {
  position: relative;
  background: rgba(20,12,38,.7);
  border: 1px solid #3a2a6a;
  color: #cfc4ad;
  padding: .55rem 1rem;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.9,.3,1.4);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 38px;
  overflow: hidden;
}
.armory-tab::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #ffd70022 0%, transparent 70%);
  opacity: 0;
  transition: opacity .25s;
}
.armory-tab:hover {
  border-color: #ffd70066;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.armory-tab:hover::before { opacity: 1; }
.armory-tab.active {
  background: linear-gradient(135deg, #3a1a6a 0%, #2a0a5a 100%);
  border-color: #ffd700;
  color: #ffd700;
  box-shadow:
    0 0 16px rgba(255,215,0,.35),
    inset 0 0 12px rgba(255,215,0,.12);
  font-weight: bold;
}
.armory-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  box-shadow: 0 0 8px #ffd700;
}

.armory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: .8rem;
}
.armory-item {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, #3a1a6a44 0%, transparent 70%),
    linear-gradient(180deg, #1a0a2a 0%, #0a0510 100%);
  border: 1px solid #3a2a6a;
  border-radius: 12px;
  padding: 1rem .7rem .8rem;
  text-align: center;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.9,.3,1.4);
  overflow: hidden;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Brillo sutil de fondo según rareza del item */
.armory-item.rarity-glow-common    { box-shadow: 0 0 0 1px rgba(170,170,170,.1); }
.armory-item.rarity-glow-rare      { box-shadow: 0 0 0 1px rgba(52,152,219,.15), inset 0 0 20px rgba(52,152,219,.05); }
.armory-item.rarity-glow-epic      { box-shadow: 0 0 0 1px rgba(155,89,182,.18), inset 0 0 22px rgba(155,89,182,.06); }
.armory-item.rarity-glow-legendary { box-shadow: 0 0 0 1px rgba(241,196,15,.22), inset 0 0 26px rgba(241,196,15,.08); }
.armory-item.rarity-glow-mythic    { box-shadow: 0 0 0 1px rgba(255,68,255,.25), inset 0 0 28px rgba(255,68,255,.10); }
.armory-item.rarity-glow-divine    { box-shadow: 0 0 0 1px rgba(255,247,0,.30), inset 0 0 32px rgba(255,247,0,.12); }

.armory-item:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: #ffd70077;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 22px rgba(255,215,0,.18);
}
.armory-item.locked {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.7);
}
.armory-item.locked:hover {
  transform: none;
  border-color: #3a2a6a;
  box-shadow: none;
}
.armory-item.equipped {
  border-color: #ffd700;
  box-shadow:
    0 0 24px rgba(255,215,0,.45),
    inset 0 0 16px rgba(255,215,0,.12);
  background:
    radial-gradient(ellipse at 50% 0%, #ffd70033 0%, transparent 70%),
    linear-gradient(180deg, #2a1a0a 0%, #0a0510 100%);
}
.armory-item-preview {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, #1a1024 0%, #060008 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2a1a4a;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.armory-item-preview-emoji {
  font-size: 2rem;
  z-index: 3;
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.7));
}
.armory-item-name {
  font-size: .88rem;
  font-weight: bold;
  color: #ffeec2;
  margin-bottom: .35rem;
  line-height: 1.2;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.armory-item-rarity {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: bold;
  padding: .15rem .5rem;
  border-radius: 10px;
  display: inline-block;
  margin-top: .2rem;
}
.armory-item-rarity.rarity-common    { color: #ddd;     background: #44444433; }
.armory-item-rarity.rarity-rare      { color: #5cbdfd;  background: #3498db33; }
.armory-item-rarity.rarity-epic      { color: #c79bfd;  background: #9b59b633; }
.armory-item-rarity.rarity-legendary { color: #ffe066;  background: #f1c40f33; }
.armory-item-rarity.rarity-mythic    { color: #ff8cff;  background: #ff44ff33; }
.armory-item-rarity.rarity-divine    { color: #fffaad;  background: #fff70033; }

.armory-item-source {
  font-size: .68rem;
  color: #8a7a6a;
  margin-top: .45rem;
  font-style: italic;
  padding-top: .35rem;
  border-top: 1px dashed #2a1a4a;
}

.armory-lock {
  position: absolute;
  top: .5rem;
  right: .5rem;
  font-size: 1.1rem;
  filter: drop-shadow(0 0 4px #000);
  z-index: 4;
}
.armory-eq {
  position: absolute;
  top: .4rem;
  left: .4rem;
  font-size: .62rem;
  font-weight: bold;
  color: #ffd700;
  background: rgba(0,0,0,.85);
  padding: .2rem .45rem;
  border-radius: 6px;
  border: 1px solid #ffd700;
  letter-spacing: .5px;
  z-index: 4;
  box-shadow: 0 0 8px #ffd70055;
}

/* ─── Hp bar genérica para nameplate sin cosmético en preview ── */
.armory-item-preview .bs-hpfill {
  position: absolute;
  bottom: 8px;
  left: 10%;
  width: 80%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #44ff44, #ffaa00);
}

/* ─── Preview dedicado por slot en cards de catálogo ────────── */
.armory-item-preview-platform-host {
  width: 80px;
  height: 22px;
  border-radius: 50%;
  margin: .8rem auto;
}
.armory-item-preview-nameplate-host {
  padding: .35rem .5rem;
  border-radius: 6px;
  font-size: .72rem;
  margin: .4rem .4rem .6rem;
}
.armory-item-preview-hpbar-host {
  width: 90%;
  height: 10px;
  border-radius: 5px;
  margin: 1.4rem auto;
  background: #1a0a2a;
  overflow: hidden;
}
.armory-item-preview-hpbar-host .bs-hpfill {
  width: 70%;
  height: 100%;
  position: relative;
}