/* Visor 3D de cromos.
   Reglas de oro de este archivo:
   - `.card3d-inner` es el unico elemento que rota y no puede llevar filter, clip-path,
     overflow, opacity ni mix-blend-mode: cualquiera de ellos convierte `preserve-3d`
     en `flat` y el reverso dejaria de colocarse detras.
   - La sombra vive fuera del contexto 3D para poder desenfocarse sin aplanar nada.
   - El JS solo escribe variables (--rx, --ry, --pxn, --pyn, --active); el resto es CSS. */

.card3d {
  --rx: 0deg;
  --ry: 0deg;
  --rxn: 0;
  --ryn: 0;
  --pxn: .5;
  --pyn: .5;
  --active: 0;
  --card-width: 360px;
  width: 100%;
  max-width: var(--card-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card3d-stage {
  position: relative;
  aspect-ratio: 5 / 7;
  perspective: 1200px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.card3d-stage img { -webkit-user-drag: none; }
.card3d-stage:active { cursor: grabbing; }

.card3d-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--active) * -10px), 0)
             rotateX(var(--rx)) rotateY(var(--ry));
}

.card3d-face {
  position: absolute;
  inset: 0;
  isolation: isolate;
  backface-visibility: hidden;
  clip-path: polygon(5% 0, 95% 0, 100% 4%, 100% 96%, 95% 100%, 5% 100%, 0 96%, 0 4%);
}
.card3d-back { transform: rotateY(180deg); }

/* Dentro del visor la carta no lleva sombra, hover ni giro propios: los aporta el visor.
   Anula tambien la inclinacion que otras paginas aplican a `.trading-card`. */
.card3d .trading-card,
.card3d .trading-card:hover {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  transform: none;
  filter: none;
  transition: none;
}

/* Sombra proyectada: sigue al giro, vive fuera del contexto 3D. */
.card3d-shadow {
  position: absolute;
  inset: 14% 6% -9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #000000d9, #0000 68%);
  filter: blur(26px);
  transform: translate3d(calc(var(--ryn, 0) * .28px), calc(var(--rxn, 0) * -.16px), 0)
             scale(calc(.86 + var(--active) * .1));
  opacity: calc(.55 + var(--active) * .3);
  transition: opacity .3s;
  pointer-events: none;
}

/* Halo de rareza: se enciende cuando el cromo esta vivo. */
.card3d-glow {
  position: absolute;
  inset: -6%;
  background: radial-gradient(circle at 50% 45%, var(--glow), #0000 62%);
  opacity: calc(.25 + var(--active) * .55);
  filter: blur(18px);
  transition: opacity .35s;
  pointer-events: none;
}

/* Lamina holografica: brillo puntual + banda de color que se desplaza con el puntero. */
.card3d-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--active) * var(--foil, .55));
  transition: opacity .3s;
  background-image:
    radial-gradient(circle at calc(var(--pxn) * 100%) calc(var(--pyn) * 100%),
      #ffffffb0, #ffffff26 22%, #0000 46%),
    linear-gradient(112deg, #0000 18%, #ff5ec733 30%, #57ffe23d 40%,
      #ffe45c33 50%, #7c5cff33 60%, #0000 74%);
  background-size: 100% 100%, 320% 320%;
  background-position: 0 0, calc(var(--pxn) * 100%) calc(var(--pyn) * 100%);
}

/* Purpurina: solo en las dos rarezas altas, para que signifique algo. */
.card3d-sparkle {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle, #fff 0 1px, #0000 1.6px),
    radial-gradient(circle, var(--frame) 0 1.2px, #0000 2px);
  background-size: 47px 47px, 71px 63px;
  transform: translate3d(calc((var(--pxn) - .5) * -22px), calc((var(--pyn) - .5) * -22px), 0);
  transition: opacity .35s;
}
.rarity-epico .card3d-sparkle { opacity: calc(var(--active) * .5); }
.rarity-legendario .card3d-sparkle { opacity: calc(var(--active) * .8); }

.rarity-normal { --foil: .3; }
.rarity-comun { --foil: .42; }
.rarity-raro { --foil: .6; }
.rarity-epico { --foil: .78; }
.rarity-legendario { --foil: .95; }

/* Controles */
.card3d-controls { display: flex; justify-content: center; gap: 10px; }
.card3d-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #3d4454;
  background: #10131dcc;
  color: #c9cfdb;
  text-transform: uppercase;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.card3d-button:hover { border-color: var(--frame); color: var(--ink-card); }
.card3d-button i { font-style: normal; font-size: .95rem; line-height: 1; }
.card3d-button[aria-pressed="true"] { border-color: var(--frame); color: var(--ink-card); }
.card3d-hint {
  margin: 0;
  text-align: center;
  color: #626a7b;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.card3d.is-touched .card3d-hint { visibility: hidden; }

/* ---- Reverso ---- */
.card-reverse .card-bezel {
  background:
    radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--frame2), transparent 55%), #0000 60%),
    linear-gradient(160deg, #141824, #080a10);
  gap: 12px;
}
.back-crest {
  position: relative;
  flex: 1 1 auto;
  min-height: 18%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid var(--frame2);
  clip-path: polygon(6% 0, 94% 0, 100% 6%, 100% 94%, 94% 100%, 6% 100%, 0 94%, 0 6%);
  overflow: hidden;
}
/* Fondo tipo billete: dos tramas concentricas que se cruzan. */
.back-guilloche {
  position: absolute;
  inset: -30%;
  opacity: .5;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, #0000 0 6px, color-mix(in srgb, var(--frame), transparent 78%) 6px 7px),
    repeating-conic-gradient(from 0deg at 50% 50%, #0000 0 4deg, color-mix(in srgb, var(--frame2), transparent 60%) 4deg 5deg);
}
.back-emblem {
  position: relative;
  width: 42%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid var(--frame);
  border-radius: 50%;
  background: #090b12aa;
  box-shadow: 0 0 22px var(--glow), inset 0 0 22px var(--glow);
}
.back-emblem span {
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--frame);
  letter-spacing: -.05em;
}
.back-wordmark {
  position: relative;
  margin: 0;
  color: var(--ink-card);
  font: 800 .5rem/1 ui-monospace, monospace;
  letter-spacing: .28em;
}
.back-info { flex: 0 1 auto; min-height: 0; max-height: 54%; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.back-facts { margin: 0; display: grid; gap: 6px; }
.back-facts > div { display: grid; gap: 2px; border-bottom: 1px dotted #2f3547; padding-bottom: 4px; }
.back-facts dt { color: #6f7687; font-family: ui-monospace, monospace; font-weight: 800; font-size: calc(.46rem * var(--fit, 1)); line-height: 1.3; letter-spacing: .13em; text-transform: uppercase; }
.back-facts dd { margin: 0; min-width: 0; color: var(--ink-card); font-size: calc(.6rem * var(--fit-text, 1) * var(--fit, 1)); line-height: 1.25; }
.back-serial { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-top: auto; }
.back-serial span { color: #6f7687; font-family: ui-monospace, monospace; font-weight: 800; font-size: calc(.46rem * var(--fit, 1)); line-height: 1.2; letter-spacing: .13em; text-transform: uppercase; }
.back-serial strong { margin-left: auto; color: var(--frame); font-family: ui-monospace, monospace; font-weight: 700; font-size: calc(1.15rem * var(--fit, 1)); line-height: 1; text-shadow: 0 0 12px var(--glow); }
.back-serial small { color: #8890a0; font-family: ui-monospace, monospace; font-weight: 700; font-size: calc(.5rem * var(--fit, 1)); line-height: 1.2; }

/* ---- Lupa: el mismo visor a pantalla completa ---- */
.card-viewer { width: min(560px, 92vw); max-width: none; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.card-viewer::backdrop { background: #05070ceb; backdrop-filter: blur(6px); }
.card-viewer-shell { display: grid; gap: 18px; }
.card-viewer .card3d { --card-width: min(420px, 78vw); }
.card-viewer-close {
  justify-self: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid #414859;
  background: #0d1019;
  color: #c9cfdb;
  text-transform: uppercase;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .13em;
  cursor: pointer;
}
.card-viewer-close:hover { border-color: var(--acid); color: var(--acid); }
.zoom-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: inherit; cursor: zoom-in; }

@media (prefers-reduced-motion: reduce) {
  .card3d-inner { transition: transform .2s linear; }
  .card3d-sparkle { display: none; }
}