/* =====================================================================
   CARTA (Bloque 27) - componente visual unico.
   Estructura (identica en templates/_carta.html y static/carta.js):

   .carta.carta--<rareza>.carta--<mini|normal|grande>
     .carta__cuerpo                 <- gira (tilt + volteo)
       .carta__cara.carta__frente   <- metal de la rareza (fondo = marco)
         .carta__ventana > img      <- la foto/portada, protagonista
         .carta__marco              <- bisel, aristas y ornamentos
         .carta__titulo > .carta__placa > .carta__nombre
         .carta__brillo             <- reflejo que sigue al movimiento
       .carta__cara.carta__dorso    <- reverso comun (rombos)

   Toda la diferencia entre rarezas son VARIABLES (--grosor, --metal,
   --textura, --tinta...). La geometria es la misma para las cuatro.
   Variables de estado que escribe carta.js: --rx --ry (inclinacion),
   --giro (volteo), --mx --my (posicion de la luz), --luz (0-1, intensidad
   del reflejo), --hold (0-1, progreso de "mantener pulsado").
   ===================================================================== */

.carta {
  --grosor: 4.4%;                 /* ancho del marco respecto a la carta */
  --radio: 5.2% / 3.7%;           /* esquinas de la carta */
  --radio-ventana: 2.6% / 1.9%;
  --metal: linear-gradient(145deg, #f1f3f6 0%, #aab1bc 28%, #f8f9fb 48%, #8e96a3 70%, #dde1e6 100%);
  --textura: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.035) 1px 2px);
  --arista: rgba(255,255,255,.75);
  --sombra-arista: rgba(20,24,32,.45);
  --bisel: 0 0 0 .45cqw rgba(40,46,58,.55), 0 0 0 .9cqw rgba(255,255,255,.55);
  --placa: linear-gradient(180deg, #fbfcfd 0%, #c9ced6 55%, #9aa2ae 100%);
  --placa-borde: rgba(60,66,78,.55);
  --tinta: #262a31;
  --relieve: 0 .09em 0 rgba(255,255,255,.7), 0 -.04em 0 rgba(0,0,0,.25);
  --tam-nombre: 6.3cqw;
  --brillo: .28;                  /* intensidad maxima del reflejo */
  --tinte-brillo: rgba(255,255,255,.95);
  --iris: 0;                      /* 0-1: reflejo tornasolado (epica/legendaria) */

  --rx: 0deg; --ry: 0deg; --giro: 0deg; --mx: 32%; --my: 18%; --luz: .35; --hold: 0;

  container-type: inline-size;
  position: relative; display: block; width: 100%; aspect-ratio: 5 / 7;
  perspective: 1100px; color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
a.carta:hover { text-decoration: none; }

.carta__cuerpo {
  position: absolute; inset: 0; display: block; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--giro))) scale(calc(1 + var(--hold) * .06));
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.carta.siguiendo .carta__cuerpo { transition: transform .08s linear; }
.carta.arrastrando .carta__cuerpo { transition: none; }

.carta__cara {
  position: absolute; inset: 0; display: block; border-radius: var(--radio); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* ---------- anverso: el fondo ES el marco metalico ---------- */
.carta__frente {
  background: var(--textura), var(--metal);
  box-shadow: 0 1.6cqw 4cqw rgba(0,0,0,.45), 0 .3cqw .8cqw rgba(0,0,0,.35);
}
.carta__ventana {
  position: absolute; inset: var(--grosor); display: block; overflow: hidden;
  border-radius: var(--radio-ventana); background: #0a0c11;
  box-shadow: var(--bisel);                    /* bisel del marco alrededor de la foto */
}
.carta__imagen { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* profundidad: la foto queda "hundida" en el marco (sombra interior encima de la imagen) */
.carta__ventana::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55), inset 0 .9cqw 1.6cqw rgba(0,0,0,.42), inset 0 -.3cqw .8cqw rgba(0,0,0,.25);
}
/* aristas de la carta: luz arriba-izquierda, sombra abajo-derecha */
.carta__marco {
  position: absolute; inset: 0; display: block; border-radius: inherit; pointer-events: none;
  box-shadow: inset .35cqw .35cqw 0 var(--arista), inset -.35cqw -.45cqw .3cqw var(--sombra-arista),
              inset 0 0 0 .2cqw rgba(0,0,0,.35);
}
.carta__marco::before, .carta__marco::after { content: ""; position: absolute; pointer-events: none; }

/* ---------- nombre: placa del mismo metal, sale del marco superior ---------- */
.carta__titulo {
  position: absolute; top: calc(var(--grosor) * .45); left: calc(var(--grosor) * .5);
  max-width: calc(100% - var(--grosor) * 3.2); display: block; z-index: 2;
  filter: drop-shadow(0 .35cqw .5cqw rgba(0,0,0,.55));
  opacity: calc(1 - var(--hold) * 1.4);
}
.carta__placa {
  display: block; padding: .32em 1.15em .3em .62em; background: var(--textura), var(--placa);
  clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 100%, 0 100%);
  border-radius: .22em 0 0 .22em;
  box-shadow: inset 0 .08em 0 rgba(255,255,255,.75), inset 0 -.1em 0 var(--placa-borde);
}
.carta__nombre {
  display: block; font-size: clamp(8px, var(--tam-nombre), 30px); line-height: 1.12; font-weight: 800;
  letter-spacing: .02em; color: var(--tinta); text-shadow: var(--relieve);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- reflejo de luz (solo sobre el metal) + destello muy suave en la foto ---------- */
.carta__brillo {
  position: absolute; inset: 0; display: block; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx) var(--my), var(--tinte-brillo), rgba(255,255,255,0) 38%),
    linear-gradient(115deg, rgba(255,80,160,0) 18%, rgba(255,210,90,calc(.6 * var(--iris))) 34%,
                    rgba(90,220,255,calc(.6 * var(--iris))) 50%, rgba(180,120,255,calc(.6 * var(--iris))) 66%, rgba(255,80,160,0) 82%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx) var(--my);
  mix-blend-mode: overlay; opacity: calc(var(--brillo) * var(--luz) * 2);
  padding: var(--grosor);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .35s;
}
.carta__frente::after {         /* destello sobre la foto: nunca la tapa */
  content: ""; position: absolute; inset: var(--grosor); border-radius: var(--radio-ventana); pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.5), rgba(255,255,255,0) 50%);
  mix-blend-mode: soft-light; opacity: calc(var(--luz) * var(--brillo) * .9); transition: opacity .35s;
}

/* ============================ RAREZAS ============================ */

/* COMUN: plata cepillada, limpia, poco ornamento (valores por defecto) */
.carta--comun { }

/* RARA: acero azulado, mas grosor, doble bisel y remaches en las esquinas */
.carta--rara {
  --grosor: 5.2%;
  --metal: linear-gradient(145deg, #e6f3ff 0%, #7fb0e3 22%, #f5faff 42%, #3e6ea9 64%, #9cc8f0 82%, #dcecfb 100%);
  --arista: rgba(235,246,255,.85);
  --bisel: 0 0 0 .45cqw rgba(16,40,78,.7), 0 0 0 1cqw rgba(214,236,255,.75), 0 0 0 1.35cqw rgba(30,70,125,.55);
  --placa: linear-gradient(180deg, #f4f9ff 0%, #a9cdf0 50%, #5d8fc8 100%);
  --placa-borde: rgba(20,50,95,.6);
  --tinta: #10284a;
  --brillo: .42;
}
.carta--rara .carta__marco {
  background:
    radial-gradient(circle at 4.6% 3.3%, #fff 0 .8%, #9fd0ff 1% 1.6%, #2b5a94 1.8% 2.2%, transparent 2.4%),
    radial-gradient(circle at 95.4% 3.3%, #fff 0 .8%, #9fd0ff 1% 1.6%, #2b5a94 1.8% 2.2%, transparent 2.4%),
    radial-gradient(circle at 4.6% 96.7%, #fff 0 .8%, #9fd0ff 1% 1.6%, #2b5a94 1.8% 2.2%, transparent 2.4%),
    radial-gradient(circle at 95.4% 96.7%, #fff 0 .8%, #9fd0ff 1% 1.6%, #2b5a94 1.8% 2.2%, transparent 2.4%);
}

/* EPICA: violeta, marco grueso con escamas, ventana de curvas organicas y
   un anillo ondulado (perlas) alrededor de la foto */
.carta--epica {
  --grosor: 6.6%;
  --radio-ventana: 11% 3.5% 11% 3.5% / 7.8% 2.5% 7.8% 2.5%;
  --metal: linear-gradient(155deg, #f1dcff 0%, #a56cf0 18%, #4a1c7c 42%, #c89cff 58%, #5a2a93 80%, #e3c8ff 100%);
  --textura:
    radial-gradient(circle at 50% 100%, transparent 54%, rgba(255,240,255,.28) 57%, rgba(40,0,70,.45) 64%, transparent 67%) 0 0 / 8% 5.7%,
    radial-gradient(circle at 50% 100%, transparent 54%, rgba(255,240,255,.2) 57%, rgba(40,0,70,.38) 64%, transparent 67%) 4% 2.85% / 8% 5.7%;
  --arista: rgba(248,230,255,.85);
  --sombra-arista: rgba(30,0,60,.6);
  --bisel: 0 0 0 .5cqw rgba(38,6,70,.8), 0 0 0 1.1cqw rgba(226,196,255,.7), 0 0 0 1.5cqw rgba(60,18,110,.6);
  --placa: linear-gradient(180deg, #caa2ff 0%, #7d3fcf 45%, #3d1370 100%);
  --placa-borde: rgba(20,0,45,.7);
  --tinta: #fbf2ff;
  --relieve: 0 -.06em 0 rgba(30,0,60,.8), 0 .08em .18em rgba(0,0,0,.45);
  --tam-nombre: 6.6cqw;
  --brillo: .6; --iris: .55;
  --tinte-brillo: rgba(255,235,255,.95);
}
.carta--epica .carta__marco::before {    /* anillo ondulado de perlas alrededor de la ventana */
  inset: calc(var(--grosor) - 1.9cqw); border-radius: 12% 5% 12% 5% / 9% 3.6% 9% 3.6%;
  background: radial-gradient(circle, rgba(250,230,255,.95) 0 28%, rgba(120,60,190,.9) 34% 44%, transparent 48%) 0 0 / 2.6cqw 2.6cqw;
  padding: 1.1cqw;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .9;
}

/* LEGENDARIA: oro, el marco mas trabajado: guilloche, triple bisel, joyas
   en las esquinas y reflejo tornasolado claramente superior */
.carta--legendaria {
  --grosor: 7.2%;
  --radio-ventana: 6% 6% 6% 6% / 4.3% 4.3% 4.3% 4.3%;
  --metal: linear-gradient(150deg, #fff7d6 0%, #e7bb4f 17%, #8c5b10 36%, #ffe9a3 52%, #b47b1d 72%, #7a4c0c 86%, #ffefc0 100%);
  --textura:
    repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 .55cqw, transparent .55cqw 1.7cqw),
    repeating-linear-gradient(-45deg, rgba(80,45,0,.16) 0 .55cqw, transparent .55cqw 1.7cqw);
  --arista: rgba(255,248,220,.95);
  --sombra-arista: rgba(70,40,0,.6);
  --bisel: 0 0 0 .45cqw rgba(70,40,0,.85), 0 0 0 .95cqw rgba(255,236,170,.95), 0 0 0 1.35cqw rgba(140,90,15,.9),
           0 0 0 1.75cqw rgba(255,244,205,.7);
  --placa: linear-gradient(180deg, #fff6d2 0%, #f0c95e 40%, #a86f14 100%);
  --placa-borde: rgba(80,45,0,.7);
  --tinta: #3a2204;
  --relieve: 0 .09em 0 rgba(255,245,210,.85), 0 -.05em 0 rgba(70,35,0,.4);
  --tam-nombre: 6.8cqw;
  --brillo: .85; --iris: 1;
  --tinte-brillo: rgba(255,248,215,1);
}
.carta--legendaria .carta__marco {
  background:
    conic-gradient(from 45deg at 50% 50%, #fff, #ffd76a, #fff, #c98a1c, #fff) 3.4% 2.4% / 3.6% 2.6% no-repeat,
    conic-gradient(from 45deg at 50% 50%, #fff, #ffd76a, #fff, #c98a1c, #fff) 96.6% 2.4% / 3.6% 2.6% no-repeat,
    conic-gradient(from 45deg at 50% 50%, #fff, #ffd76a, #fff, #c98a1c, #fff) 3.4% 97.6% / 3.6% 2.6% no-repeat,
    conic-gradient(from 45deg at 50% 50%, #fff, #ffd76a, #fff, #c98a1c, #fff) 96.6% 97.6% / 3.6% 2.6% no-repeat;
}
.carta--legendaria .carta__marco::before,
.carta--legendaria .carta__marco::after {   /* joyas en rombo en los cantos laterales */
  width: 3.6%; aspect-ratio: 1; top: 50%; transform: translateY(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #fff 0 18%, #ffe39a 30%, #b3781a 75%);
  box-shadow: 0 0 0 .3cqw rgba(80,45,0,.7), 0 0 1.2cqw rgba(255,230,150,.7);
}
.carta--legendaria .carta__marco::before { left: calc(var(--grosor) / 2 - 1.8%); }
.carta--legendaria .carta__marco::after { right: calc(var(--grosor) / 2 - 1.8%); }
.carta--legendaria .carta__placa { box-shadow: inset 0 .08em 0 rgba(255,255,255,.9), inset 0 -.1em 0 var(--placa-borde),
                                              inset 0 0 0 .06em rgba(120,75,5,.55); }

/* ============================ REVERSO ============================
   Comun a todas las cartas: negro, rombos de lineas blancas finas. */
.carta__dorso {
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.22) 0 1px, transparent 1px 7.2cqw),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.22) 0 1px, transparent 1px 7.2cqw),
    #07080b;
  /* B28: filete blanco exterior mas grueso y contundente */
  box-shadow: inset 0 0 0 2cqw #07080b, inset 0 0 0 3.1cqw rgba(255,255,255,.88),
              inset 0 0 0 4cqw #07080b, inset 0 0 0 4.25cqw rgba(255,255,255,.3),
              0 1.6cqw 4cqw rgba(0,0,0,.45);
}
.carta__dorso--frontal { transform: none; }
.carta__emblema {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; display: block;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(255,255,255,.75); box-shadow: 0 0 0 1.4cqw #07080b, 0 0 0 1.55cqw rgba(255,255,255,.4);
  background: #07080b;
}
.carta__emblema::after { content: ""; position: absolute; inset: 28%; border: 1px solid rgba(255,255,255,.6); }

/* volteada: se ve el reverso */
.carta.volteada { --giro: 180deg; }

/* ============================ GROSOR (B28) ============================
   Una carta no es una lamina infinitamente fina: las caras se separan
   --espesor en Z y cuatro cantos cierran el volumen. El canto es del color
   del metal de la rareza, a proposito: al mirar un taco de lado se intuye que
   rarezas vienen detras. Solo en cartas grandes (en rejillas no se giran). */
.carta--grosor { --espesor: 1.9cqw; --canto: #9aa3af; --canto-claro: #e4e7ec; }
.carta--grosor.carta--rara { --canto: #3d6fae; --canto-claro: #bcdcfa; }
.carta--grosor.carta--epica { --canto: #6b2fb3; --canto-claro: #d7b6ff; }
.carta--grosor.carta--legendaria { --canto: #b98320; --canto-claro: #ffe7a1; }
.carta--grosor .carta__frente { transform: translateZ(calc(var(--espesor) / 2)); }
.carta--grosor .carta__dorso { transform: rotateY(180deg) translateZ(calc(var(--espesor) / 2)); }
.carta__canto { position: absolute; display: block; pointer-events: none;
  /* dos laminas y el alma oscura del carton en medio, como una carta de verdad */
  background: linear-gradient(var(--dir-canto, 90deg), var(--canto) 0%, var(--canto-claro) 26%, var(--canto) 42%,
                              rgba(20,20,28,.55) 50%, var(--canto) 58%, var(--canto-claro) 74%, var(--canto) 100%); }
.carta__canto--d, .carta__canto--i { top: 3.7%; height: 92.6%; width: var(--espesor); --dir-canto: 90deg; }
.carta__canto--s, .carta__canto--f { left: 5.2%; width: 89.6%; height: var(--espesor); --dir-canto: 180deg; }
.carta__canto--d { left: calc(100% - var(--espesor) / 2); transform: rotateY(90deg); }
.carta__canto--i { left: calc(var(--espesor) / -2); transform: rotateY(-90deg); }
.carta__canto--s { top: calc(var(--espesor) / -2); transform: rotateX(90deg); }
.carta__canto--f { top: calc(100% - var(--espesor) / 2); transform: rotateX(-90deg); }

/* ============================ MODOS ============================ */
.carta--mini .carta__cuerpo { transition: transform .25s ease; }
.carta--mini { --luz: .45; }
a.carta--mini:hover .carta__cuerpo, a.carta--mini:focus-visible .carta__cuerpo { transform: translateY(-2%) rotateX(4deg); }
a.carta--mini:focus-visible { outline: none; }
a.carta--mini:focus-visible .carta__frente { outline: 2px solid var(--texto, #fff); outline-offset: 2px; }
.carta--mini .carta__nombre { font-size: clamp(8px, calc(var(--tam-nombre) * 1.12), 16px); }
.carta--retirada .carta__imagen { filter: grayscale(.55) brightness(.85); }
.carta--grande { --luz: .35; touch-action: none; cursor: grab; }
.carta--grande:focus-visible { outline: none; }
.carta--grande:focus-visible .carta__frente { outline: 3px solid var(--texto, #fff); outline-offset: 3px; }

/* mantener pulsado: el marco se abre hacia fuera y se desvanece; la foto "se acerca" */
.carta.sosteniendo .carta__cuerpo { transition: none; }
.carta.sosteniendo .carta__marco, .carta.sosteniendo .carta__frente { transition: none; }
.carta.sosteniendo .carta__ventana { inset: calc(var(--grosor) * (1 - var(--hold))); border-radius: calc(2.6% * (1 - var(--hold))); }
.carta.sosteniendo .carta__frente { background-color: #000; }
.carta.sosteniendo .carta__marco { opacity: calc(1 - var(--hold)); transform: scale(calc(1 + var(--hold) * .08)); }
.carta.sosteniendo .carta__brillo { opacity: calc(var(--brillo) * (1 - var(--hold))); }
.carta-progreso {
  position: absolute; left: 12%; right: 12%; bottom: -5.5%; height: 4px; border-radius: 4px; overflow: hidden;
  background: rgba(255,255,255,.18); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.carta-progreso i { display: block; height: 100%; width: calc(var(--hold) * 100%); background: #fff; }
.carta.sosteniendo .carta-progreso { opacity: 1; }

/* informacion FUERA del arte */
.carta-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: .72rem;
  font-weight: 800; letter-spacing: .06em; color: var(--texto-2, #b9bfcc); font-variant-numeric: tabular-nums; }
.carta-pie .badge { font-size: .66rem; }
.carta-celda { display: block; min-width: 0; }

/* ============================ INMERSIVO ============================ */
.inmersivo { position: fixed; inset: 0; z-index: 60; background: #000; display: grid; place-items: center;
  opacity: 0; transition: opacity .35s ease; touch-action: manipulation; }
.inmersivo.visible { opacity: 1; }
.inmersivo img, .inmersivo video { max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto;
  object-fit: contain; display: block; transform-origin: center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.inmersivo video { width: 100vw; height: 100vh; height: 100dvh; }
.inmersivo-salir { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 20px; cursor: pointer; }
.inmersivo-salir:focus-visible { outline: 2px solid #fff; }
.inmersivo-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.2); }
.inmersivo-barra i { display: block; height: 100%; width: 0; background: #fff; }
.inmersivo-toca { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-weight: 700; pointer-events: none; }
.inmersivo-error { position: absolute; left: 0; right: 0; top: 45%; text-align: center; color: #fff; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .carta__cuerpo, .carta--mini .carta__cuerpo { transition: none !important; }
  .carta { --rx: 0deg !important; --ry: 0deg !important; }
  .carta__cuerpo { transform: rotateY(var(--giro)); }
  .carta.sosteniendo .carta__cuerpo { transform: rotateY(var(--giro)); }
  .carta.sosteniendo .carta__ventana { inset: var(--grosor); }
  .carta.sosteniendo .carta__marco { transform: none; }
  .inmersivo, .inmersivo img, .inmersivo video { transition: none; }
}