/* =========================================================
   IKARYS GAMING — LIGHTBOX DE INSIGNIAS
   Visor a pantalla completa para ver una insignia PvP a máxima
   calidad, con la misma luz de color detrás que en la tarjeta.
   ========================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__figure {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(90vw, 560px);
  transform: scale(0.94);
  transition: transform var(--dur-base) var(--ease-standard);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }

.lightbox__glow {
  position: absolute;
  inset: 6% 10% auto 10%;
  height: 70%;
  background: radial-gradient(circle, var(--badge-glow, var(--ik-red)) 0%, transparent 70%);
  filter: blur(38px);
  opacity: 0.65;
  z-index: 0;
}

.lightbox__img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.7));
}

.lightbox__name {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ik-white);
}

.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ik-black-line);
  background: var(--ik-black-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ik-white);
  transition: border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.lightbox__close:hover { border-color: var(--ik-red); transform: rotate(90deg); }

@media (max-width: 560px) {
  .lightbox__img { max-height: 56vh; }
  .lightbox__close { top: var(--sp-3); right: var(--sp-3); }
}