/* Carta estilo TCG (26-09, prototipo del boceto de Cristian). Todo en cqw para
   que escale con la carta. --m / --m2 = metal del marco según la rareza. */
.carta-tcg { --m: #C9D2E3; --m2: #6F7A90; --brillo-m: rgba(200,210,230,.45);
  container-type: inline-size; position: relative; aspect-ratio: 2 / 3; border-radius: 2.2cqw; overflow: hidden; background: #05060A;
  box-shadow: 0 2cqw 6cqw rgba(0,0,0,.55), 0 0 6cqw var(--brillo-m);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .12s; font-family: var(--f-titulo); color: #F4F7FF; }
.carta-tcg.r-rara { --m: #7FB8FF; --m2: #2552C8; --brillo-m: rgba(79,155,255,.55); }
.carta-tcg.r-epica { --m: #CFA8FF; --m2: #6A2FC4; --brillo-m: rgba(176,123,255,.55); }
.carta-tcg.r-legendaria { --m: #FFE08A; --m2: #B07A12; --brillo-m: rgba(242,196,81,.65); }
.carta-tcg.r-mitica { --m: #FF9AD0; --m2: #C21E78; --brillo-m: rgba(255,46,136,.6); }
.tcg-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tcg-velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,5,12,.55), transparent 22%, transparent 72%, rgba(3,5,12,.7)); }
/* placas: vidrio oscuro con borde metálico y halo (nada de rayas de un solo lado) */
.tcg-placa, .tcg-nv, .tcg-vida, .tcg-stats { background: linear-gradient(180deg, rgba(10,16,34,.9), rgba(4,7,18,.92));
  border: .5cqw solid var(--m); box-shadow: 0 0 0 .3cqw rgba(0,0,0,.6), 0 0 3cqw color-mix(in srgb, var(--m) 45%, transparent), inset 0 0 3cqw rgba(80,140,255,.12); }
.tcg-cab { position: absolute; left: 3cqw; top: 3cqw; right: 30cqw; display: flex; align-items: center; }
.tcg-emblema { position: relative; z-index: 2; flex: none; width: 17cqw; height: 17cqw; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--el) 70%, #fff), var(--el) 45%, #061232 80%);
  border: .9cqw solid var(--m); box-shadow: 0 0 0 .5cqw #05060A, 0 0 0 1cqw var(--m2), 0 0 5cqw var(--el); }
.tcg-emblema span { font-size: 9cqw; line-height: 1; filter: drop-shadow(0 0 1.5cqw #fff); }
.tcg-placa { margin-left: -4cqw; padding: 1.8cqw 7cqw 2cqw 6.5cqw; min-width: 0; flex: 1;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); border-right: 0; }
.tcg-placa b { display: block; font-size: 7.4cqw; line-height: .95; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .4cqw 0 rgba(0,0,0,.6); }
.tcg-placa small { display: block; margin-top: .8cqw; font-size: 3.5cqw; letter-spacing: .12em; text-transform: uppercase; color: #CFE0FF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcg-der { position: absolute; right: 3cqw; top: 3cqw; display: flex; flex-direction: column; align-items: flex-end; gap: 2cqw; }
.tcg-nv { display: flex; align-items: baseline; gap: 1.8cqw; padding: 1cqw 3.2cqw; clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 50%); }
.tcg-nv small { font-size: 3.4cqw; letter-spacing: .1em; } .tcg-nv b { font-size: 7cqw; line-height: 1; }
.tcg-vida { padding: 1.2cqw 3.4cqw 1.4cqw; border-radius: 2cqw; text-align: left; }
.tcg-vida small { display: block; font-size: 3cqw; letter-spacing: .14em; color: #CFE0FF; }
.tcg-vida span { display: flex; align-items: center; gap: 1.4cqw; } .tcg-vida svg { width: 6cqw; height: 6cqw; color: #BFE3FF; filter: drop-shadow(0 0 1cqw #7FC4FF); }
.tcg-vida b { font-size: 8.6cqw; line-height: 1; }
.tcg-stats { position: absolute; left: 6cqw; right: 6cqw; bottom: 4cqw; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2cqw 2cqw;
  clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%); }
.tcg-stats > div { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; }
.tcg-stats > div + div { border-left: .3cqw solid color-mix(in srgb, var(--m) 40%, transparent); }
.tcg-stats svg { flex: none; width: 7.5cqw; height: 7.5cqw; }
.tcg-stats .atk svg { color: #FF4D5E; filter: drop-shadow(0 0 1cqw #FF4D5E); } .tcg-stats .def svg { color: #7FC4FF; filter: drop-shadow(0 0 1cqw #7FC4FF); }
.tcg-stats .vel svg { color: #5AA9FF; filter: drop-shadow(0 0 1cqw #5AA9FF); }
.tcg-stats small { display: block; font-size: 2.6cqw; letter-spacing: .08em; } .tcg-stats .atk small { color: #FF7A86; }
.tcg-stats b { display: block; font-size: 6.4cqw; line-height: 1; font-style: italic; }
.tcg-rz { position: absolute; left: 50%; bottom: 17cqw; transform: translateX(-50%); padding: .8cqw 3cqw; border-radius: 99px; font-size: 3cqw; letter-spacing: .22em; text-transform: uppercase;
  background: rgba(4,7,18,.75); border: .4cqw solid var(--m); color: var(--m); box-shadow: 0 0 2.5cqw color-mix(in srgb, var(--m) 50%, transparent); }
.tcg-brillo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.5), transparent 45%); }
.carta-tcg.r-legendaria .tcg-brillo, .carta-tcg.r-mitica .tcg-brillo { background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.55), transparent 45%),
  linear-gradient(115deg, transparent 35%, rgba(255,230,160,.35) 45%, transparent 55%); background-size: 100% 100%, 250% 100%; animation: tcg-destello 4s linear infinite; }
@keyframes tcg-destello { from { background-position: 0 0, 150% 0; } to { background-position: 0 0, -150% 0; } }

/* filo metálico fino por dentro (la carta es a sangre completa, como el boceto) */
.carta-tcg::after, .carta.carta-tcg::after, .carta.carta-tcg.r-legendaria::after, .carta.carta-tcg.r-mitica::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; background: none; animation: none; opacity: 1; transform: none;
  box-shadow: inset 0 0 0 .7cqw var(--m), inset 0 0 0 1.1cqw rgba(0,0,0,.55), inset 0 0 5cqw color-mix(in srgb, var(--m) 35%, transparent); }
.tcg-cab, .tcg-der, .tcg-stats, .tcg-rz { z-index: 3; }
/* miniatura (colección, cofres): solo lo esencial */
@container (max-width: 190px) {
  .tcg-stats small, .tcg-vida small, .tcg-placa small, .tcg-rz { display: none; }
  .tcg-stats { padding: 2.6cqw 1cqw; } .tcg-stats b { font-size: 8.4cqw; } .tcg-stats svg { width: 8cqw; height: 8cqw; }
  .tcg-placa b { font-size: 9cqw; } .tcg-emblema { width: 20cqw; height: 20cqw; } .tcg-vida b { font-size: 9.5cqw; } .tcg-nv b { font-size: 8.5cqw; } .tcg-nv small { display: none; }
}
/* 26-09: la carta TCG sustituye a la vieja en toda la app: se anula lo que la
   clase .carta de aura.css ponía (relleno, marco degradado, holo…). */
.carta.carta-tcg { padding: 0; aspect-ratio: 2 / 3; background: #05060A; background-image: none; animation: none; border-radius: 2.2cqw; isolation: isolate;
  box-shadow: 0 2cqw 6cqw rgba(0,0,0,.55), 0 0 6cqw var(--brillo-m); color: #F4F7FF; }
.carta.carta-tcg::before { display: none; }
.carta.carta-tcg.bloqueada .tcg-arte { filter: grayscale(1) brightness(.3) blur(1.5px); }
.carta.carta-tcg.bloqueada .tcg-stats, .carta.carta-tcg.bloqueada .tcg-der, .carta.carta-tcg.bloqueada .tcg-placa small { visibility: hidden; }
.tcg-rz i { font-style: normal; color: #FFD66B; margin-right: 1.6cqw; letter-spacing: .1em; text-shadow: 0 0 1.2cqw rgba(255,200,80,.8); } .tcg-rz i span { opacity: .3; }
/* las rejillas y escaleras de la app ponían relleno a .carta */
.rejilla .carta.carta-tcg, .escalera .carta.carta-tcg { padding: 0; border-radius: 2.2cqw; }
.escalera .carta.carta-tcg .tcg-stats, .escalera .carta.carta-tcg .tcg-der, .escalera .carta.carta-tcg .tcg-cab, .escalera .carta.carta-tcg .tcg-rz { display: none; }
/* iconos dibujados de elemento dentro del emblema */
.tcg-emblema img.icono-dib { width: 118%; height: 118%; object-fit: contain; filter: drop-shadow(0 0 1.2cqw rgba(255,255,255,.5)); }
.tcg-emblema:has(img.icono-dib) { background: radial-gradient(circle at 50% 40%, #1a2440, #05060A 80%); }