/* PokéMerge — cartas de coleccionista (card() y emptyCard() de widgets.js).
   Diseño propio que recuerda a las cartas coleccionables: marco de metal
   según la rareza, cara del color del tipo, ventana de arte con fondo
   temático, brillo holográfico y pie con rareza, nº, región y nivel.
   Todo se mide en cqw (1 cqw = 1 % del ancho de la carta), así que una
   carta de 54 px y una de 280 px son la misma a otra escala; las consultas
   @container quitan detalles cuando es pequeña. */

/* ---------- Rejillas de cartas ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 74px), 1fr));
  gap: 10px;
}
.cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cards > .card { content-visibility: auto; contain-intrinsic-size: auto 110px; }
@media (max-width: 480px) {
  .cards-5 { gap: 5px; }
}
@media (max-width: 400px) {
  .cards { --card-min: 70px; gap: 8px; }
}
@media (min-width: 1200px) {
  .cards { --card-min: 96px; }
}

/* ---------- Carta: marco de metal ---------- */

.card {
  --tc: #b0a99f;
  --tc2: var(--tc);
  --ink-out: #0b1838;
  --metal: linear-gradient(135deg, #f4f7fb 0%, #a9b3c2 22%, #eef2f7 42%, #8893a5 62%, #e2e8f0 80%, #9aa5b5 100%);
  --metal-edge: rgba(255, 255, 255, 0.75);
  position: relative;
  display: block;
  container: card / inline-size;
  width: 100%;
  min-width: 0;
  aspect-ratio: 63 / 88;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 6% / 4.3%;
  background: var(--metal);
  box-shadow:
    0 0 0 2px var(--ink-out),
    inset 0 0 0 1px var(--metal-edge),
    0 4px 0 2px rgba(4, 9, 26, 0.55);
  color: var(--ink);
  font: inherit;
  line-height: 1.1;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.12s ease-out, filter 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}
button.card:active { transform: translateY(3px) scale(0.97); }
@media (hover: hover) {
  button.card:hover { transform: translateY(-3px); filter: brightness(1.08); }
}
button.card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Metales por rareza */
.card.r-rare {
  --metal: linear-gradient(135deg, #dcf0ff 0%, #4d8fd8 22%, #bfe4ff 42%, #2a5fa8 62%, #a6d6ff 80%, #3a76c4 100%);
  --metal-edge: rgba(200, 235, 255, 0.85);
}
.card.r-epic {
  --metal: linear-gradient(135deg, #f8e2ff 0%, #9d52e2 20%, #f0c8ff 38%, #6a2bb0 58%, #ffb8f2 76%, #7d3fd4 100%);
  --metal-edge: rgba(255, 220, 255, 0.85);
  /* Vetas en % de la línea del degradado (≈ 1,54 × el ancho a 118°), no en
     cqw: en la propia .card los cqw son del contenedor de fuera o de la
     pantalla, y las vetas no escalaban con la carta. */
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, 0) 0 1.43%, rgba(255, 255, 255, 0.16) 1.43% 1.95%), var(--metal);
}
.card.r-starter {
  --metal: linear-gradient(135deg, #fffbe0 0%, #e0a91e 20%, #fff4ae 40%, #b47706 60%, #ffe27a 78%, #c88b0e 100%);
  --metal-edge: rgba(255, 250, 210, 0.95);
  box-shadow:
    0 0 0 2px #3a2400,
    inset 0 0 0 1px var(--metal-edge),
    0 4px 0 2px rgba(4, 9, 26, 0.55),
    0 0 12px rgba(255, 210, 63, 0.35);
}
.card.r-legendary {
  --metal: linear-gradient(135deg, #ff9ab4 0%, #ffd36b 17%, #a8ffa0 34%, #7fdcff 51%, #b39bff 68%, #ff9ad8 85%, #ffd36b 100%);
  --metal-edge: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 2px var(--ink-out),
    inset 0 0 0 1px var(--metal-edge),
    0 4px 0 2px rgba(4, 9, 26, 0.55),
    0 0 14px rgba(200, 150, 255, 0.45);
}

/* Adornos del marco por rareza (encima del metal, en las esquinas; un SVG
   de 63 × 88 como la carta, así que no se deforma): común lisa, rara con
   gemas remachadas, épica con filigrana y legendaria con destellos. Diseño
   propio. Van SÓLO por la banda de metal, nunca sobre la cara: en unidades
   del SVG (1 = 1/63 del ancho) la banda mide 2 (3,2cqw, la grande) y en la
   esquina queda el anillo entre el canto de la carta (radio 3,78 desde
   (3,78, 3,78)) y la esquina redonda de la cara (radio 1,76). Por eso los
   trazos van a 1 del borde y las gemas y destellos, en (1,82, 1,82) con
   radio 1. Las de rejilla (≤ 104 px) tienen el marco de 5,5cqw y llevan
   otra versión más gruesa (más abajo, en su @container). */
.card.r-rare::after,
.card.r-epic::after,
.card.r-legendary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--orn) 0 0 / 100% 100% no-repeat;
}
.card.r-rare::after {
  --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'><g fill='rgba(70,160,255,1)' stroke='rgba(11,24,56,.9)' stroke-width='.22'><circle cx='1.82' cy='1.82' r='.9'/><circle cx='61.18' cy='1.82' r='.9'/><circle cx='1.82' cy='86.18' r='.9'/><circle cx='61.18' cy='86.18' r='.9'/></g><g fill='rgba(225,245,255,.95)'><circle cx='1.55' cy='1.55' r='.32'/><circle cx='60.91' cy='1.55' r='.32'/><circle cx='1.55' cy='85.91' r='.32'/><circle cx='60.91' cy='85.91' r='.32'/></g></svg>");
}
/* Épica: un filete que sigue el canto con una joya en la esquina, un rombo a
   media pata y una perla al final (una esquina, repetida en espejo). */
.card.r-epic::after {
  --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'><defs><g id='c'><g fill='none' stroke='rgba(255,236,255,.95)' stroke-linecap='round'><path d='M1 13.4V3.78A2.78 2.78 0 0 1 3.78 1H13.4' stroke-width='.42'/><circle cx='13.85' cy='1' r='.45' stroke-width='.3'/><circle cx='1' cy='13.85' r='.45' stroke-width='.3'/></g><g fill='rgba(255,236,255,1)' stroke='rgba(70,20,120,.9)' stroke-width='.22'><path d='M1.14 1.14L2.23 1.39 2.48 2.48 1.39 2.23z'/><path d='M7.85 1L8.6 .55 9.35 1 8.6 1.45z'/><path d='M1 7.85L1.45 8.6 1 9.35 .55 8.6z'/></g><g fill='rgba(255,236,255,.95)'><circle cx='13.85' cy='1' r='.17'/><circle cx='1' cy='13.85' r='.17'/></g></g></defs><use href='%23c'/><use href='%23c' transform='matrix(-1 0 0 1 63 0)'/><use href='%23c' transform='matrix(1 0 0 -1 0 88)'/><use href='%23c' transform='matrix(-1 0 0 -1 63 88)'/></svg>");
}
.card.r-legendary::after {
  --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'><defs><path id='s' d='M1.82 .67L2.14 1.5 2.97 1.82 2.14 2.14 1.82 2.97 1.5 2.14 .67 1.82 1.5 1.5z'/></defs><g fill='rgba(255,255,255,.95)' stroke='rgba(60,20,110,.8)' stroke-width='.22'><use href='%23s'/><use href='%23s' x='59.36'/><use href='%23s' y='84.36'/><use href='%23s' x='59.36' y='84.36'/></g></svg>");
}

/* Shiny: un arco iris por el borde de metal (gira en las que se animan;
   sólo transform: barato) y un foil arcoíris sobre la cara (.card-foil). */
.card.is-shiny::before {
  content: '';
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(#ff6b8b, #ffd36b, #8dff8a, #6be0ff, #9d8bff, #ff7be0, #ff6b8b);
  opacity: 0.85;
  mix-blend-mode: hard-light;
  animation: card-shiny-spin 6s linear infinite;
}
@keyframes card-shiny-spin { to { transform: rotate(1turn); } }

/* Cartas quietas (rejillas grandes: card() con lazy y no grande): ni giro,
   ni brillo, ni destellos; se animan al pasar el puntero o con el foco. */
.card.is-still:not(:hover, :focus-visible)::before,
.card.is-still:not(:hover, :focus-visible) .card-face::after,
.card.is-still:not(:hover, :focus-visible) .card-star { animation: none; }

/* Con una ventana abierta (#app inerte, ver modal() de dom.js) las cartas y
   los sprites de debajo se paran. */
#app[inert] .card,
#app[inert] .card::before,
#app[inert] .card::after,
#app[inert] .card *,
#app[inert] .card *::before,
#app[inert] .card *::after,
#app[inert] .sprite { animation-play-state: paused !important; }

/* ---------- Cara (color del tipo) ---------- */

.card-face {
  position: absolute;
  inset: 3.6cqw;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border-radius: 3.6cqw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(160deg, var(--tc) 0%, var(--tc) 45%, var(--tc2) 75%, color-mix(in srgb, var(--tc2) 70%, #000) 100%);
  box-shadow: 0 0 0 0.9cqw rgba(11, 24, 56, 0.9), inset 0 0 0 0.7cqw rgba(255, 255, 255, 0.32);
  overflow: hidden;
}

/* Cabecera con el nombre y los tipos */
.card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  flex: none;
  height: 17cqw;
  padding: 0 2.6cqw 0 4cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.1) 55%, rgba(0, 0, 0, 0.1));
  border-bottom: 0.8cqw solid rgba(11, 24, 56, 0.45);
  /* Ancho para el nombre (sin el punto de «nueva»): los tipos van en la
     esquina del arte, salvo en la grande. */
  --na: 86cqw;
  --nmax: 13.6cqw;   /* 13,5 y un poco: que el redondeo no baje un escalón */
  --nstep: 1.5cqw;
}
.card.is-new .card-top { --nd: 8cqw; }
.card-name {
  flex: 1;
  min-width: 0;
  /* Cabe entero: el tamaño sale del ancho del nombre en em (--nw, de card())
     y va a escalones de --nstep, así en una rejilla hay pocos tamaños
     distintos. Nunca menos de 8 px; si aun así no cabe, puntos suspensivos. */
  font-size: max(8px, min(var(--nmax), calc((var(--na) - var(--nd, 0cqw)) / var(--nw, 6))));
  font-size: max(8px, round(down, min(var(--nmax), calc((var(--na) - var(--nd, 0cqw)) / var(--nw, 6))), var(--nstep)));
  font-weight: 700;
  letter-spacing: -0.02em;
  /* 1,2: la letra (con sus colas, p o g, y su contorno) mide ≈ 1,15em; con
     1,1 el overflow del nombre las recortaba. */
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow:
    0 1px 0 var(--ink-out), 1px 0 0 var(--ink-out), -1px 0 0 var(--ink-out), 0 -1px 0 var(--ink-out),
    1px 1px 0 var(--ink-out), -1px 1px 0 var(--ink-out);
}
/* Nueva: punto rojo antes del nombre (no tapa el arte). */
.card-new {
  flex: none;
  width: max(5px, 6cqw);
  height: max(5px, 6cqw);
  margin-right: -0.4cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd5da 0 18%, #ff5f6d 45%, #c4213c);
  box-shadow: 0 0 0 max(1px, 0.8cqw) var(--ink-out), 0 0 2cqw rgba(255, 95, 109, 0.95);
}
/* Marca de texto en el pie ("+3" de Resultados; "SHINY" si la carta no lo
   es): ocupa el sitio del nº y la región. */
.card-tag {
  flex: none;
  margin-left: auto;
  padding: 0.4cqw 2cqw 0.8cqw;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3a6, #ffb81f);
  box-shadow: 0 0 0 0.7cqw var(--ink-out);
  color: #4a2a00;
  font-size: 9cqw;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}
.card-foot.has-tag .card-id { display: none; }
.card-tag + .card-lv { margin-left: 1.6cqw; }
/* Tipos: en la esquina de arriba a la derecha del arte (en la grande, en
   la cabecera). */
.card-types {
  position: absolute;
  z-index: 3;
  top: calc(100% + 4cqw);
  right: 5cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}
.card-lg .card-types { position: static; flex-direction: row; gap: 0.8cqw; flex: none; }
.ticon {
  display: inline-block;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.22em;
}
.ticon svg, .rsym svg { display: block; width: 100%; height: 100%; }
.card-types .ticon { width: 13cqw; height: 13cqw; filter: drop-shadow(0 0.6cqw 0 rgba(0, 0, 0, 0.35)); }

/* Ventana de arte */
.card-art {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  margin: 2.6cqw 3.4cqw 0;
  border-radius: 2.4cqw;
  overflow: hidden;
  background: var(--art-pat, none), var(--art-bg, radial-gradient(circle at 50% 70%, #fff, var(--tc)));
  background-size: var(--art-size, auto), 100% 100%;
  background-position: var(--art-pos, 0 0), 0 0;
  box-shadow: 0 0 0 0.9cqw var(--ink-out), 0 0 0 1.6cqw rgba(255, 255, 255, 0.35);
}
.card-art::after {
  /* Biselado y viñeta de la ventana */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.6cqw rgba(255, 255, 255, 0.35), inset 0 -5cqw 9cqw rgba(0, 0, 0, 0.22), inset 0 3cqw 6cqw rgba(255, 255, 255, 0.12);
}
.card-art > .sprite {
  position: relative;
  z-index: 2;
  top: 1.5cqw;   /* un poco hacia la peana (el margen lo pone fitSprite) */
  filter: drop-shadow(0 0.7cqw 0 rgba(0, 0, 0, 0.25));
}
.card-plat {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 10%;
  width: 62%;
  height: 15%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.18) 60%, transparent),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.35) 70%, transparent 72%);
  box-shadow: 0 0.6cqw 0 rgba(255, 255, 255, 0.2);
}
.card-holo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.card-star {
  position: absolute;
  z-index: 4;
  left: 3cqw;
  top: 3cqw;
  width: 15cqw;
  height: 15cqw;
  filter: drop-shadow(0 0 2cqw rgba(255, 243, 166, 0.9));
  animation: card-twinkle 1.8s ease-in-out infinite;
}
@keyframes card-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.8) rotate(20deg); } }

/* Shiny: el fondo del arte se oscurece y lleva motas de estrellas (los
   colores alternativos resaltan), y un foil arcoíris cubre cabecera y arte. */
.card.is-shiny > .card-face > .card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='rgba(255,250,215,.95)'><path d='M8 5l.9 2.4 2.4.9-2.4.9L8 11.6l-.9-2.4-2.4-.9 2.4-.9z'/><path d='M30 24l.6 1.6 1.6.6-1.6.6-.6 1.6-.6-1.6-1.6-.6 1.6-.6z'/><circle cx='26' cy='7' r='.9'/><circle cx='13' cy='31' r='1'/><circle cx='36' cy='37' r='.7'/><circle cx='3' cy='20' r='.6'/></g></svg>") 0 0 / 34cqw 34cqw,
    radial-gradient(90% 75% at 50% 58%, rgba(8, 6, 34, 0.15), rgba(8, 6, 34, 0.62));
}
.card-foil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background:
    repeating-linear-gradient(118deg,
      rgba(255, 70, 140, 0.9) 0 6cqw, rgba(255, 210, 70, 0.9) 6cqw 12cqw, rgba(90, 255, 140, 0.9) 12cqw 18cqw,
      rgba(70, 200, 255, 0.9) 18cqw 24cqw, rgba(170, 110, 255, 0.9) 24cqw 30cqw);
  background-size: 140% 140%;
  background-position: var(--mx, 20%) var(--my, 20%);
  mix-blend-mode: overlay;
  opacity: 0.5;
  /* Más fuerte en la cabecera y el arte; casi nada en el pie. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.25) 80%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.25) 80%, transparent 92%);
}
.card-lg .card-foil { transition: background-position 0.2s; }
.card-shiny-mark { flex: none; display: grid; width: 9cqw; height: 9cqw; margin-left: -0.8cqw; filter: drop-shadow(0 0 1.4cqw rgba(255, 236, 140, 0.95)); }
.card-shiny-mark .ico { width: 100%; height: 100%; }

/* Línea pequeña bajo el arte ("+1 copia", "Línea de…", probabilidad) */
.card-sub {
  position: relative;
  z-index: 2;
  flex: none;
  margin: 1.6cqw 3.4cqw 0;
  font-size: max(9px, 9.5cqw);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 1px 0 var(--ink-out), 1px 0 0 var(--ink-out), -1px 0 0 var(--ink-out), 0 -1px 0 var(--ink-out);
}

/* Pie: rareza, nº de Pokédex, región y nivel */
.card-foot {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  height: 15cqw;
  padding: 0 3cqw 0 4cqw;
  font-size: 9cqw;
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 0 var(--ink-out), 1px 0 0 var(--ink-out), -1px 0 0 var(--ink-out), 0 -1px 0 var(--ink-out);
}
.card-foot .rsym { flex: none; width: 9.5cqw; height: 9.5cqw; filter: drop-shadow(0 0.5cqw 0 rgba(0, 0, 0, 0.35)); }
/* Nº y región juntos: es lo único del pie que encoge y, si no caben los
   dos (shiny, nº de 4 cifras, Nv.10), la región pasa a una segunda línea
   que queda fuera (la caja mide una línea). 1 px de relleno para el
   contorno del texto. */
.card-id {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 4px 1.8cqw;
  height: calc(1.2em + 2px);
  margin: 0 -1px;
  padding: 1px;
  line-height: 1.2;
  overflow: hidden;
}
.card-no { flex: none; }
.card-set {
  flex: none;
  padding: 0.6cqw 1.6cqw 0.8cqw;
  border-radius: 1.6cqw;
  background: rgba(11, 24, 56, 0.55);
  font-size: 7.4cqw;
  letter-spacing: 0.04em;
  color: #dfe9ff;
}
.card-lv {
  flex: none;
  margin-left: auto;
  padding: 0.6cqw 2.4cqw 1cqw;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3a6, #f4ae1a);
  box-shadow: 0 0 0 0.8cqw var(--ink-out), inset 0 -0.8cqw 0 rgba(160, 90, 0, 0.35);
  color: #3a2400;
  font-size: 10.5cqw;
  text-shadow: none;
}
.card-lv small { font-size: 0.72em; margin-right: 0.3cqw; }
.card-lv .ico { width: 0.95em; height: 0.95em; margin: 0 0.25em 0 -0.15em; vertical-align: -0.14em; }
/* Puede subir: nivel en verde con la flecha. Sólo faltan monedas: apagado. */
.card-lv.is-up {
  background: linear-gradient(180deg, #c9ffdc, #3fcf76 55%, #23a456);
  box-shadow: 0 0 0 0.8cqw var(--ink-out), inset 0 -0.8cqw 0 rgba(0, 80, 30, 0.35), 0 0 2.6cqw rgba(95, 224, 138, 0.95);
  color: #06341a;
}
.card-lv.is-wait {
  background: linear-gradient(180deg, #dfe6f5, #8d9abb);
  box-shadow: 0 0 0 0.8cqw var(--ink-out), inset 0 -0.8cqw 0 rgba(20, 30, 60, 0.3);
  color: #1d2742;
}

/* Barra de copias para el siguiente nivel */
.card-xp {
  position: relative;
  z-index: 2;
  flex: none;
  display: block;
  height: 3.4cqw;
  margin: -0.6cqw 4cqw 3cqw;
  border-radius: 3cqw;
  background: rgba(4, 9, 26, 0.72);
  box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.card-xp-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(180deg, #9ad8ff, #3d9bf0); }
.card-xp.is-ready .card-xp-fill { background: linear-gradient(180deg, #a6f5c2, var(--green)); box-shadow: 0 0 2cqw var(--green); }
.card-xp.is-max .card-xp-fill { background: linear-gradient(180deg, #fff3a6, var(--gold)); }

/* Brillo compartido: una franja de luz lenta (sólo transform) en las
   épicas, iniciales y legendarias. */
.card.r-epic .card-face::after,
.card.r-starter .card-face::after,
.card.r-legendary .card-face::after {
  content: '';
  position: absolute;
  inset: -20% -120%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.34) 50%, transparent 56%);
  transform: translateX(-62%);
  animation: card-sheen 7s ease-in-out infinite;
  animation-delay: var(--sheen-delay, 0s);
}
.card.r-starter .card-face::after { background: linear-gradient(105deg, transparent 44%, rgba(255, 240, 180, 0.45) 50%, transparent 56%); }
@keyframes card-sheen {
  0%, 64% { transform: translateX(-62%); }
  90%, 100% { transform: translateX(62%); }
}

/* Inicial: cabecera dorada con laurel a los lados. Legendaria: nombre en
   foil arcoíris (el contorno va con drop-shadow: con texto recortado, una
   text-shadow taparía el degradado).
   El laurel (10 × 16) mide --lh del alto de la cabecera y va a --lo del
   canto; el relleno de los lados (--lp) es su ancho y algo más, así que el
   nombre, el punto de «nueva» y los tipos de la grande quedan entre los dos
   laureles y nunca encima. --na baja lo mismo que sube el relleno. */
.card.r-starter .card-top {
  --lh: 55%;
  --lo: 0.5cqw;
  --lp: 6.8cqw;
  --na: 79.2cqw;
  padding-left: var(--lp);
  padding-right: var(--lp);
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><path d='M8.5 15C3.5 13 1.5 8.5 3 1' fill='none' stroke='rgba(120,70,0,.55)' stroke-width='.8'/><g fill='rgba(255,236,150,.95)' stroke='rgba(120,70,0,.6)' stroke-width='.4'><path d='M2.9 2.5c1.6.4 2.2 1.6 1.6 2.9-1.4-.5-2-1.6-1.6-2.9z'/><path d='M2.7 6.3c1.7.2 2.5 1.3 2.1 2.7-1.5-.3-2.3-1.4-2.1-2.7z'/><path d='M3.6 10.1c1.7 0 2.7 1 2.5 2.4-1.6-.1-2.6-1.1-2.5-2.4z'/><path d='M1.3 4.6c-1-1 .1-2.6 1.4-2.1-.1 1.2-.5 1.8-1.4 2.1z'/><path d='M1 8.6c-1.1-1-.2-2.6 1.3-2.3 0 1.2-.4 1.9-1.3 2.3z'/></g></svg>") left var(--lo) center / auto var(--lh) no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><g transform='matrix(-1 0 0 1 10 0)'><path d='M8.5 15C3.5 13 1.5 8.5 3 1' fill='none' stroke='rgba(120,70,0,.55)' stroke-width='.8'/><g fill='rgba(255,236,150,.95)' stroke='rgba(120,70,0,.6)' stroke-width='.4'><path d='M2.9 2.5c1.6.4 2.2 1.6 1.6 2.9-1.4-.5-2-1.6-1.6-2.9z'/><path d='M2.7 6.3c1.7.2 2.5 1.3 2.1 2.7-1.5-.3-2.3-1.4-2.1-2.7z'/><path d='M3.6 10.1c1.7 0 2.7 1 2.5 2.4-1.6-.1-2.6-1.1-2.5-2.4z'/><path d='M1.3 4.6c-1-1 .1-2.6 1.4-2.1-.1 1.2-.5 1.8-1.4 2.1z'/><path d='M1 8.6c-1.1-1-.2-2.6 1.3-2.3 0 1.2-.4 1.9-1.3 2.3z'/></g></g></svg>") right var(--lo) center / auto var(--lh) no-repeat,
    linear-gradient(180deg, rgba(255, 248, 205, 0.8), rgba(255, 210, 80, 0.55) 55%, rgba(170, 105, 0, 0.35));
  border-bottom-color: rgba(110, 62, 0, 0.7);
}
.card.r-legendary .card-name {
  background: linear-gradient(100deg, #ffc4d8 0%, #fff0a0 28%, #b8ffd0 52%, #b0e4ff 74%, #e6c8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(1px 0 0 var(--ink-out)) drop-shadow(-1px 0 0 var(--ink-out)) drop-shadow(0 1px 0 var(--ink-out)) drop-shadow(0 -1px 0 var(--ink-out));
}

/* ---------- Marcas encima ---------- */

.card-badge {
  /* Sólo en la grande (SHINY o un texto), en la esquina del arte; en las
     demás va en la cabecera (.card-tag) o es el punto de «nueva». */
  position: absolute;
  z-index: 7;
  top: 23cqw;
  right: 6cqw;
  transform: rotate(4deg);
  height: max(17px, 19cqw);
  min-width: max(17px, 19cqw);
  padding: 0 max(4px, 4cqw);
  font-size: max(9px, 10cqw);
}
.card-pick {
  position: absolute;
  z-index: 7;
  top: 22cqw;
  left: 5cqw;
  display: grid;
  place-items: center;
  width: max(22px, 28cqw);
  height: max(22px, 28cqw);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe873, #f4ae1a);
  color: #3a2400;
  font-weight: 700;
  font-size: max(13px, 16cqw);
  border: 2px solid var(--edge-out);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.card-check {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgba(6, 14, 38, 0.58);
}
.card-check .ico { width: max(26px, 36cqw); height: max(26px, 36cqw); filter: drop-shadow(0 2px 0 var(--edge-out)); }

.card.is-dim { filter: saturate(0.35) brightness(0.62); }
.card.is-dim::before, .card.is-dim .card-face::after { animation: none; }

/* ---------- Hueco del álbum (líneas que te faltan) ----------
   Página de álbum: esquinas de foto, «???» donde va el nombre, silueta
   clara (≈ 3:1 con el fondo) y el borde y la gema del tono de su rareza. */

.card.is-locked {
  --slot: color-mix(in srgb, var(--rc) 55%, #5b83d6);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 34%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.04) 100%),
    rgba(6, 14, 38, 0.45);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--slot) 45%, transparent), inset 0 3px 8px rgba(0, 0, 0, 0.35);
}
.card.is-locked .card-face {
  --pc: rgba(185, 203, 240, 0.34);
  inset: 4cqw;
  background:
    linear-gradient(135deg, var(--pc) 50%, transparent 50%) 0 0 / 11cqw 11cqw no-repeat,
    linear-gradient(225deg, var(--pc) 50%, transparent 50%) 100% 0 / 11cqw 11cqw no-repeat,
    linear-gradient(45deg, var(--pc) 50%, transparent 50%) 0 100% / 11cqw 11cqw no-repeat,
    linear-gradient(315deg, var(--pc) 50%, transparent 50%) 100% 100% / 11cqw 11cqw no-repeat,
    radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--slot) 22%, transparent), transparent 70%),
    rgba(10, 22, 54, 0.35);
  border: 0.9cqw dashed color-mix(in srgb, var(--slot) 70%, transparent);
  box-shadow: none;
}
.card-slot-name {
  flex: none;
  margin: 4cqw 8cqw 0;
  padding: 0.6cqw 0 1.2cqw;
  border-radius: 2cqw;
  background: rgba(185, 203, 240, 0.1);
  text-align: center;
  font-size: max(8px, 11cqw);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.1;
  color: rgba(185, 203, 240, 0.6);
}
.card.is-locked .card-art {
  margin: 2cqw 4cqw 0;
  background: none;
  box-shadow: none;
}
.card.is-locked .card-art::after { display: none; }
.card.is-locked .card-art > .sprite { top: 0; filter: none; }
/* Silueta azul clara: negro → gris → tono azul (sin imagen aparte). */
.card.is-locked .sprite.is-sil { filter: brightness(0) invert(0.38) sepia(1) hue-rotate(180deg) saturate(1.7); }
.card-slot-no {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 1cqw 0 5cqw;
  font-size: 14cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(185, 203, 240, 0.78);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.card-slot-no .rsym { flex: none; width: 11cqw; height: 11cqw; filter: drop-shadow(0 0 1.6cqw color-mix(in srgb, var(--rc) 70%, transparent)); }
@media (hover: hover) {
  button.card.is-locked:hover { filter: none; box-shadow: inset 0 0 0 2px var(--slot), inset 0 3px 8px rgba(0, 0, 0, 0.35); }
}

/* Hueco vacío de un mazo */
.card.is-empty {
  background: rgba(6, 14, 38, 0.4);
  box-shadow: inset 0 0 0 2px rgba(91, 131, 214, 0.3);
}
.card.is-empty .card-face {
  inset: 5cqw;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 54, 0.3);
  border: 1cqw dashed rgba(122, 156, 224, 0.5);
  box-shadow: none;
}
.card-empty-l { font-size: max(18px, 30cqw); font-weight: 700; color: rgba(185, 203, 240, 0.5); }

/* ---------- Fondos de arte por tipo ----------
   --art-bg: degradado base; --art-pat: dibujo en mosaico (SVG en línea,
   sólo comillas simples y colores rgba); --art-size: tamaño del mosaico. */

/* Normal: pradera al atardecer (melocotón y crema con rayos cálidos); la
   cara también va cálida (cardColor() de widgets.js) para que no quede gris. */
.card.ty-normal {
  --art-bg: radial-gradient(120% 95% at 50% 105%, #fff6d8 0%, #ffd79a 30%, #f29b62 64%, #b8574a 100%);
  --art-pat:
    radial-gradient(circle at 50% 108%, rgba(255, 250, 220, 0.55) 0 14%, transparent 15%),
    repeating-conic-gradient(from -90deg at 50% 105%, rgba(255, 246, 210, 0.3) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 15deg);
  --art-size: 100% 100%;
}
.card.ty-fire {
  --art-bg: radial-gradient(130% 85% at 50% 108%, #ffe98a 0%, #ff9a3d 26%, #e0502a 52%, #7a1d10 88%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48'><g fill='rgba(255,226,120,.28)'><path d='M30 13c2.2 3.2 4.4 4.8 4.4 7.4a4.4 4.4 0 0 1-8.8 0c0-2.6 2.2-4.2 4.4-7.4z'/><path d='M8 25c1.6 2.4 3.3 3.6 3.3 5.6a3.3 3.3 0 0 1-6.6 0c0-2 1.7-3.2 3.3-5.6z'/></g><g fill='rgba(255,240,170,.9)'><circle cx='6' cy='8' r='1.3'/><circle cx='28' cy='4' r='.9'/><circle cx='18' cy='21' r='1.5'/><circle cx='35' cy='31' r='1.1'/><circle cx='12' cy='42' r='.8'/><circle cx='26' cy='41' r='1.2'/></g></svg>");
  --art-size: 36cqw 43cqw;
}
.card.ty-water {
  --art-bg: linear-gradient(180deg, #b4e8ff 0%, #59aef2 42%, #2563c2 78%, #173f8f 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='24'><path d='M0 9q10-7 20 0t20 0' fill='none' stroke='rgba(255,255,255,.34)' stroke-width='2.2'/><path d='M0 18q10-5 20 0t20 0' fill='none' stroke='rgba(255,255,255,.14)' stroke-width='1.4'/><circle cx='31' cy='4' r='1.6' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='.8'/><circle cx='8' cy='21' r='1' fill='rgba(255,255,255,.4)'/></svg>");
  --art-size: 34cqw 20.4cqw;
}
.card.ty-grass {
  --art-bg: radial-gradient(120% 95% at 50% 100%, #d6f7a6 0%, #6fd070 38%, #2a8a43 72%, #165a2b 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><g fill='rgba(230,255,200,.3)'><path d='M5 21c0-8.4 6.2-13.6 14.6-13.6 0 8.4-6.2 13.6-14.6 13.6z'/><path d='M29 45c2-7 8-10.4 15.6-9.4-2 7-8 10.4-15.6 9.4z'/><path d='M33 19c4-4.2 9.2-4.4 12.6-1.2-4 4.2-9.2 4.4-12.6 1.2z'/></g><g stroke='rgba(20,80,30,.28)' stroke-width='1' fill='none'><path d='M6 20 18.6 8.4M30 44l14-8'/></g></svg>");
  --art-size: 42cqw 42cqw;
}
.card.ty-electric {
  --art-bg: radial-gradient(110% 85% at 50% 62%, #fffbd0 0%, #ffe253 34%, #f5b014 66%, #a86400 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><path d='M2 30 10 21l4 5 8-11 4 5 8-10' fill='none' stroke='rgba(255,255,255,.55)' stroke-width='2' stroke-linejoin='bevel'/><path d='M24 40l5-6 3 3 6-8' fill='none' stroke='rgba(150,80,0,.25)' stroke-width='1.6'/><path d='M36 6l-3 5 3 1-2 5' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='1.4'/></svg>");
  --art-size: 40cqw 40cqw;
}
.card.ty-ice {
  --art-bg: linear-gradient(180deg, #f2ffff 0%, #b2eef2 40%, #5fc2d8 80%, #3a8fb8 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g stroke='rgba(255,255,255,.75)' stroke-width='1.2' stroke-linecap='round'><path d='M10 4v12M4.8 7l10.4 6M4.8 13l10.4-6'/><path d='M32 27v10M27.7 29.5l8.6 5M27.7 34.5l8.6-5' stroke-width='1'/></g><path d='M32 4l3 6-3 7-3-7z' fill='rgba(255,255,255,.4)'/><path d='M9 30l2 4.6-2 6.4-2-6.4z' fill='rgba(255,255,255,.32)'/></svg>");
  --art-size: 40cqw 40cqw;
}
.card.ty-fighting {
  --art-bg: radial-gradient(circle at 50% 62%, #ffe0a0 0%, #f78a45 26%, #c93a2a 60%, #5c1410 100%);
  --art-pat: repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 245, 210, 0.26) 0deg 7deg, rgba(255, 255, 255, 0) 7deg 20deg);
  --art-size: 100% 100%;
}
.card.ty-poison {
  --art-bg: radial-gradient(115% 95% at 50% 100%, #edb5ff 0%, #ae66df 38%, #6a2a98 72%, #3c1460 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='rgba(255,220,255,.16)' stroke='rgba(255,230,255,.5)' stroke-width='1'><circle cx='9' cy='10' r='5'/><circle cx='29' cy='26' r='7'/><circle cx='12' cy='32' r='3'/><circle cx='32' cy='6' r='2.4'/></g><g fill='rgba(255,255,255,.6)'><circle cx='7.4' cy='8.4' r='1.2'/><circle cx='26.4' cy='23.4' r='1.6'/></g></svg>");
  --art-size: 38cqw 38cqw;
}
.card.ty-ground {
  --art-bg: linear-gradient(180deg, #fff0bf 0%, #e9c174 45%, #b47f36 82%, #7e5420 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='30'><path d='M0 22q15-12 30 0t30 0v8H0z' fill='rgba(140,90,30,.2)'/><path d='M0 12q15-8 30 0t30 0' fill='none' stroke='rgba(255,245,210,.32)' stroke-width='1.4'/><g fill='rgba(110,64,18,.35)'><circle cx='12' cy='6' r='.8'/><circle cx='44' cy='17' r='.7'/><circle cx='26' cy='27' r='.9'/></g></svg>");
  --art-size: 52cqw 26cqw;
  --art-pos: 0 100%;
}
.card.ty-flying {
  --art-bg: linear-gradient(180deg, #e2f3ff 0%, #a9d2ff 46%, #6f9ce8 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='42'><g fill='rgba(255,255,255,.7)'><circle cx='12' cy='14' r='5'/><circle cx='19' cy='11' r='6.5'/><circle cx='26' cy='14' r='5'/><rect x='12' y='14' width='14' height='5' rx='2.5'/></g><g fill='rgba(255,255,255,.4)'><circle cx='46' cy='32' r='3.6'/><circle cx='51' cy='30' r='4.6'/><circle cx='56' cy='32' r='3.6'/><rect x='46' y='32' width='10' height='3.6' rx='1.8'/></g></svg>");
  --art-size: 60cqw 39cqw;
}
.card.ty-psychic {
  --art-bg: radial-gradient(circle at 50% 58%, #ffe0f0 0%, #ff86bd 30%, #c23d8c 66%, #5e1650 100%);
  --art-pat: repeating-radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.2) 0 2.4cqw, rgba(255, 255, 255, 0) 2.4cqw 6.4cqw);
  --art-size: 100% 100%;
}
.card.ty-bug {
  --art-bg: radial-gradient(115% 95% at 50% 100%, #effaa8 0%, #b4d24a 40%, #6b8a1c 75%, #3e5410 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='13.86' height='24' viewBox='0 0 13.86 24'><path d='M6.93 0 13.86 4v8L6.93 16 0 12V4zM6.93 16v8' fill='none' stroke='rgba(255,255,220,.3)' stroke-width='.7'/></svg>");
  --art-size: 13.2cqw 22.8cqw;
}
.card.ty-rock {
  --art-bg: linear-gradient(180deg, #efe3b8 0%, #c3ab6c 44%, #7c6536 82%, #54421f 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='rgba(70,50,25,.2)' stroke='rgba(255,245,220,.28)' stroke-width='1'><path d='M4 14l4-7 8 1 3 6-5 5-8-1z'/><path d='M24 30l3-6 7 1 3 5-4 5-7-1z'/><path d='M27 6l3-3 4 2-1 4-4 1z'/></g></svg>");
  --art-size: 38cqw 38cqw;
}
.card.ty-ghost {
  --art-bg:
    radial-gradient(60% 18% at 22% 88%, rgba(225, 215, 255, 0.4), transparent 70%),
    radial-gradient(70% 20% at 80% 95%, rgba(225, 215, 255, 0.34), transparent 70%),
    radial-gradient(95% 75% at 50% 38%, #a593ee 0%, #5d4cae 45%, #261b56 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path d='M0 30q12-7 24 0t24 0' fill='none' stroke='rgba(230,220,255,.2)' stroke-width='3'/><g fill='rgba(190,255,235,.7)'><circle cx='10' cy='10' r='1.4'/><circle cx='36' cy='20' r='1'/><circle cx='22' cy='42' r='.8'/></g></svg>");
  --art-size: 44cqw 44cqw;
}
.card.ty-dragon {
  --art-bg: radial-gradient(115% 95% at 50% 100%, #b5a8ff 0%, #7462ff 38%, #3a26b0 72%, #1c1068 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12'><path d='M0 0Q10 14 20 0M-10 6Q0 20 10 6M10 6Q20 20 30 6' fill='none' stroke='rgba(255,255,255,.2)' stroke-width='1.1'/></svg>");
  --art-size: 14cqw 8.4cqw;
}
.card.ty-dark {
  --art-bg:
    radial-gradient(circle at 80% 19%, #2a2342 0 6.4cqw, transparent 6.8cqw),
    radial-gradient(circle at 75% 23%, #fff4c0 0 7cqw, rgba(255, 244, 192, 0.25) 7.4cqw, transparent 14cqw),
    linear-gradient(180deg, #1c1830 0%, #352a52 62%, #5c4a6e 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><g fill='rgba(255,255,230,.85)'><circle cx='6' cy='8' r='.9'/><circle cx='30' cy='4' r='.6'/><circle cx='44' cy='22' r='1'/><circle cx='18' cy='28' r='.6'/><circle cx='36' cy='40' r='.8'/><circle cx='8' cy='44' r='.5'/></g><path d='M22 13l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z' fill='rgba(255,255,230,.7)'/></svg>");
  --art-size: 46cqw 46cqw;
}
.card.ty-steel {
  --art-bg: linear-gradient(160deg, #f4f8fb 0%, #c3cfd9 38%, #8696a4 78%, #5d6b78 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 .5h40M.5 0v40' stroke='rgba(40,55,70,.3)' stroke-width='1'/><path d='M0 1.5h40M1.5 0v40' stroke='rgba(255,255,255,.35)' stroke-width='1'/><g fill='rgba(40,55,70,.35)'><circle cx='6.4' cy='6.6' r='1.5'/><circle cx='34.4' cy='6.6' r='1.5'/><circle cx='6.4' cy='34.6' r='1.5'/><circle cx='34.4' cy='34.6' r='1.5'/></g><g fill='rgba(255,255,255,.75)'><circle cx='6' cy='6' r='1.3'/><circle cx='34' cy='6' r='1.3'/><circle cx='6' cy='34' r='1.3'/><circle cx='34' cy='34' r='1.3'/></g></svg>");
  --art-size: 40cqw 40cqw;
}
.card.ty-fairy {
  --art-bg: radial-gradient(115% 95% at 50% 62%, #fff4fb 0%, #ffc2e4 38%, #f07ab8 74%, #b94283 100%);
  --art-pat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44'><g fill='rgba(255,255,255,.85)'><path d='M10 4l1.2 3.8L15 9l-3.8 1.2L10 14l-1.2-3.8L5 9l3.8-1.2z'/><path d='M32 26l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8z'/></g><g fill='rgba(255,255,255,.55)'><circle cx='30' cy='8' r='1'/><circle cx='12' cy='34' r='1.2'/><circle cx='40' cy='40' r='.8'/></g><path d='M22 38c.6-1.2 2.4-1 2.4.4 0 1.2-1.4 2-2.4 2.8-1-.8-2.4-1.6-2.4-2.8 0-1.4 1.8-1.6 2.4-.4z' fill='rgba(255,255,255,.5)'/></svg>");
  --art-size: 40cqw 40cqw;
}

/* ---------- Brillo holográfico por rareza (estático) ---------- */

/* Rara: purpurina de destellos y un velo de luz. */
.card.r-rare .card-holo {
  background: linear-gradient(125deg, transparent 22%, rgba(255, 255, 255, 0.4) 40%, rgba(170, 220, 255, 0.25) 50%, transparent 62%);
  background-size: 200% 200%;
  background-position: var(--mx, 30%) var(--my, 30%);
  mix-blend-mode: overlay;
}
.card.r-rare .card-holo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g fill='white'><path d='M6 3l.7 2.3L9 6l-2.3.7L6 9l-.7-2.3L3 6l2.3-.7z'/><path d='M22 17l.5 1.5 1.5.5-1.5.5-.5 1.5-.5-1.5-1.5-.5 1.5-.5z'/><circle cx='20' cy='5' r='.7'/><circle cx='9' cy='24' r='.9'/><circle cx='27' cy='27' r='.5'/></g></svg>") 0 0 / 24cqw 24cqw;
  opacity: 0.55;
}
/* Épica: holo arcoíris en bandas diagonales con vetas finas. */
.card.r-epic .card-holo {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0 0.5cqw, transparent 0.5cqw 1.6cqw),
    repeating-linear-gradient(122deg,
      rgba(255, 80, 140, 0.55) 0 7cqw, rgba(255, 210, 80, 0.5) 7cqw 14cqw, rgba(90, 255, 160, 0.5) 14cqw 21cqw,
      rgba(80, 190, 255, 0.55) 21cqw 28cqw, rgba(190, 110, 255, 0.55) 28cqw 35cqw);
  background-position: 0 0, var(--mx, 0) var(--my, 0);
  mix-blend-mode: soft-light;
}
.card.r-epic .card-holo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 60%);
}
/* Inicial: cosmos dorado. */
.card.r-starter .card-holo {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36'><g fill='rgba(255,236,150,1)'><path d='M8 4l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/><path d='M27 20l.7 2.1 2.1.7-2.1.7-.7 2.1-.7-2.1-2.1-.7 2.1-.7z'/><circle cx='24' cy='7' r='.8'/><circle cx='12' cy='27' r='1'/><circle cx='33' cy='33' r='.6'/><circle cx='4' cy='18' r='.5'/></g></svg>") 0 0 / 30cqw 30cqw,
    radial-gradient(70% 55% at 30% 20%, rgba(255, 228, 140, 0.55), transparent 60%),
    radial-gradient(60% 50% at 80% 85%, rgba(255, 190, 80, 0.35), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Legendaria: arte completo de galaxia en toda la cara, del color de sus
   tipos (una nebulosa de cada tipo, a partes iguales: muchas son Dragón y
   algo más) y con el dibujo de su tipo encima, así cada una es distinta. */
.card.r-legendary .card-face {
  --tm: color-mix(in srgb, var(--tc) 50%, var(--tc2));
  background:
    radial-gradient(62% 42% at 20% 26%, color-mix(in srgb, var(--tc) 80%, transparent), transparent 72%),
    radial-gradient(75% 52% at 84% 70%, color-mix(in srgb, var(--tc2) 90%, transparent), transparent 72%),
    radial-gradient(48% 30% at 26% 92%, color-mix(in srgb, var(--tc2) 55%, rgba(255, 110, 200, 0.45)), transparent 72%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tm) 38%, #150e3c) 0%, #0b0928 62%, #06051a 100%);
}
.card.r-legendary .card-art {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='white'><circle cx='5' cy='7' r='.7'/><circle cx='22' cy='3' r='.4'/><circle cx='40' cy='12' r='.9'/><circle cx='55' cy='5' r='.5'/><circle cx='14' cy='26' r='.5'/><circle cx='33' cy='31' r='.6'/><circle cx='50' cy='38' r='.8'/><circle cx='8' cy='48' r='.6'/><circle cx='28' cy='55' r='.4'/><circle cx='45' cy='53' r='.5'/></g><path d='M30 18l.8 2.4 2.4.8-2.4.8-.8 2.4-.8-2.4-2.4-.8 2.4-.8z' fill='rgba(255,255,255,.9)'/></svg>") 0 0 / 50cqw 50cqw,
    var(--art-pat, none) var(--art-pos, 0 0) / var(--art-size, auto);
}
/* El dibujo del tipo, tenue y sólo por la parte de abajo (la galaxia arriba). */
.card.r-legendary .card-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 60%, color-mix(in srgb, var(--tc2) 50%, transparent), transparent 75%);
  mix-blend-mode: screen;
  opacity: 0.6;
}
.card.r-legendary .card-art::after { box-shadow: inset 0 -12cqw 16cqw rgba(0, 0, 0, 0.35); }
.card.r-legendary .card-holo {
  background:
    conic-gradient(from 200deg at 50% 55%, rgba(255, 100, 160, 0.35), rgba(255, 220, 100, 0.3), rgba(120, 255, 180, 0.3), rgba(100, 180, 255, 0.35), rgba(200, 120, 255, 0.35), rgba(255, 100, 160, 0.35));
  mix-blend-mode: color-dodge;
  opacity: 0.5;
}
.card.r-legendary .card-top,
.card.r-legendary .card-foot {
  background: linear-gradient(180deg, rgba(8, 6, 30, 0.6), rgba(8, 6, 30, 0.35));
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.card.r-legendary .card-foot { margin-top: auto; background: linear-gradient(0deg, rgba(8, 6, 30, 0.7), rgba(8, 6, 30, 0.2)); }
.card.r-legendary .card-sub { margin-top: auto; }
.card.r-legendary .card-sub + .card-foot { margin-top: 0; }
.card.r-legendary .card-plat {
  background:
    radial-gradient(closest-side, rgba(180, 140, 255, 0.55), rgba(120, 80, 255, 0.15) 70%, transparent),
    radial-gradient(closest-side, rgba(255, 255, 255, 0.25) 70%, transparent 72%);
}
.card.r-legendary .card-art > .sprite { top: 0; }
.card.r-legendary .card-star { top: 21cqw; }
.card-lg.r-legendary .card-star { top: 14cqw; }
.card.r-legendary:not(.card-lg) .card-art > .sprite { top: 1cqw; }

/* ---------- Cartas de rejilla (≤ 104 px): marco más grueso ----------
   El metal (y su adorno) se ve de un vistazo y la gema de rareza crece. */

@container card (max-width: 104px) {
  .card:not(.is-locked, .is-empty) > .card-face { inset: 5.5cqw; border-radius: 3cqw; }
  .card-top { --na: 83cqw; padding: 0 2.6cqw 0 3.4cqw; }
  .card.r-starter .card-top { --lh: 50%; --lp: 6cqw; --na: 77cqw; }
  .card-foot .rsym { width: 12cqw; height: 12cqw; }
  /* Adornos más gruesos para esta banda de 5,5cqw (3,47 unidades): el anillo
     de la esquina va del canto (radio 3,78) a la cara (centro (5,36, 5,36),
     radio 1,89), así que las gemas y destellos van en (2,56, 2,56) con radio
     2 y el filete a 1,5 del borde. La consulta vale para el ::after de la
     propia carta; si un navegador no la aplicara, queda la versión fina, que
     también cabe en la banda. */
  .card.r-rare::after {
    --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'><g fill='rgba(70,160,255,1)' stroke='rgba(11,24,56,.9)' stroke-width='.4'><circle cx='2.56' cy='2.56' r='1.75'/><circle cx='60.44' cy='2.56' r='1.75'/><circle cx='2.56' cy='85.44' r='1.75'/><circle cx='60.44' cy='85.44' r='1.75'/></g><g fill='rgba(225,245,255,.95)'><circle cx='2.1' cy='2.1' r='.6'/><circle cx='59.98' cy='2.1' r='.6'/><circle cx='2.1' cy='84.98' r='.6'/><circle cx='59.98' cy='84.98' r='.6'/></g></svg>");
  }
  .card.r-epic::after {
    --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'><defs><g id='c'><g fill='none' stroke='rgba(255,236,255,.95)' stroke-linecap='round'><path d='M1.5 13.6V3.78A2.28 2.28 0 0 1 3.78 1.5H13.6' stroke-width='.6'/><circle cx='14.2' cy='1.5' r='.6' stroke-width='.4'/><circle cx='1.5' cy='14.2' r='.6' stroke-width='.4'/></g><g fill='rgba(255,236,255,1)' stroke='rgba(70,20,120,.9)' stroke-width='.3'><path d='M1.25 1.25L2.77 1.57 3.09 3.09 1.57 2.77z'/><path d='M7.6 1.5L8.6 .8 9.6 1.5 8.6 2.2z'/><path d='M1.5 7.6L2.2 8.6 1.5 9.6 .8 8.6z'/></g></g></defs><use href='%23c'/><use href='%23c' transform='matrix(-1 0 0 1 63 0)'/><use href='%23c' transform='matrix(1 0 0 -1 0 88)'/><use href='%23c' transform='matrix(-1 0 0 -1 63 88)'/></svg>");
  }
  .card.r-legendary::after {
    --orn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 63 88'><defs><path id='s' d='M2.56 .66L3.06 2.06 4.46 2.56 3.06 3.06 2.56 4.46 2.06 3.06 .66 2.56 2.06 2.06z'/></defs><g fill='rgba(255,255,255,.95)' stroke='rgba(60,20,110,.8)' stroke-width='.3'><use href='%23s'/><use href='%23s' x='57.88'/><use href='%23s' y='82.88'/><use href='%23s' x='57.88' y='82.88'/></g></svg>");
  }
}

/* ≤ 84 px: sin la marca de región, que no cabe. */
@container card (max-width: 84px) {
  .card-set { display: none; }
  .card-types .ticon { width: 14cqw; height: 14cqw; }
  .card-foot { padding: 0 2.6cqw 0 3cqw; gap: 1.6cqw; }
  .card-id { column-gap: 1.6cqw; }
  .card-shiny-mark { width: 10cqw; height: 10cqw; }
}

/* ---------- Carta pequeña (≈ 54–70 px): menos texto, más grande ---------- */

@container card (max-width: 70px) {
  .card-no { display: none; }
  .card-top { height: 19cqw; padding: 0 2cqw; justify-content: center; --na: 85cqw; --nmax: 16.1cqw; --nstep: 2cqw; }
  /* Sin laurel: a este tamaño sería una mancha y el nombre centrado lo pisaría. */
  .card.r-starter .card-top { --lh: 0%; --lp: 2cqw; --na: 85cqw; }
  .card-name { flex: 0 1 auto; text-align: center; }
  .card-new { width: max(5px, 7cqw); height: max(5px, 7cqw); }
  .card.is-new .card-top { --nd: 9cqw; }
  .card-tag { font-size: 12cqw; padding: 0.4cqw 2.4cqw 1cqw; }
  .card-types .ticon { width: 17cqw; height: 17cqw; }
  .card-foot { height: 18cqw; padding: 0 2.4cqw; gap: 2cqw; }
  .card-foot .rsym { width: 13cqw; height: 13cqw; }
  .card-shiny-mark { width: 12cqw; height: 12cqw; margin-left: -1.4cqw; }
  .card-lv { font-size: 14cqw; padding: 0.4cqw 3cqw 1cqw; }
  .card-lv small { display: none; }
  .card-xp { height: 4.4cqw; margin: -0.6cqw 4cqw 3.4cqw; }
  .card-sub { font-size: max(9px, 13cqw); }
  /* Legendaria (arte en toda la cara) con línea debajo: el Pokémon sube para no quedar bajo el texto. */
  .card.r-legendary.has-sub:not(.card-lg) .card-art > .sprite { top: -6cqw; }
  .card-star { width: 16cqw; height: 16cqw; left: 2cqw; top: 2cqw; }   /* en la esquina del arte, sin pisar al Pokémon */
  .card-pick { top: 23cqw; left: 3cqw; }
  .card-slot-name { margin: 4cqw 6cqw 0; font-size: max(8px, 13cqw); }
}

/* ---------- Carta grande ('lg'): carta completa ---------- */

.card-lg {
  width: var(--card-w, 280px);
  max-width: 100%;
  flex: none;
  box-shadow:
    0 0 0 2px var(--ink-out),
    inset 0 0 0 1.5px var(--metal-edge),
    0 8px 0 3px rgba(4, 9, 26, 0.5),
    0 18px 40px rgba(0, 0, 0, 0.45);
}
.card-lg.r-starter { box-shadow: 0 0 0 2px #3a2400, inset 0 0 0 1.5px var(--metal-edge), 0 8px 0 3px rgba(4, 9, 26, 0.5), 0 0 30px rgba(255, 210, 63, 0.45); }
.card-lg.r-legendary { box-shadow: 0 0 0 2px var(--ink-out), inset 0 0 0 1.5px var(--metal-edge), 0 8px 0 3px rgba(4, 9, 26, 0.5), 0 0 34px rgba(190, 140, 255, 0.55); }
.card-lg .card-face { inset: 3.2cqw; border-radius: 2.8cqw; box-shadow: 0 0 0 0.6cqw rgba(11, 24, 56, 0.9), inset 0 0 0 0.45cqw rgba(255, 255, 255, 0.35); }
.card-lg .card-top { height: 11.5cqw; padding: 0 2cqw 0 3.2cqw; gap: 1.2cqw; border-bottom-width: 0.5cqw; }
.card-lg .card-name {
  font-size: min(7.6cqw, calc(var(--nkl, 135cqw) / var(--nl, 8)));
  text-shadow:
    0 2px 0 var(--ink-out), 2px 0 0 var(--ink-out), -2px 0 0 var(--ink-out), 0 -2px 0 var(--ink-out),
    2px 2px 0 var(--ink-out), -2px 2px 0 var(--ink-out), 2px -2px 0 var(--ink-out), -2px -2px 0 var(--ink-out);
}
.card-lg .card-top.has-t1 { --nkl: 124cqw; }
.card-lg .card-top.has-t2 { --nkl: 110cqw; }
/* Inicial grande: laurel más alto; nombre y tipos entre los dos (y algo menos de sitio para el nombre). */
.card-lg.r-starter .card-top { --lh: 80%; --lp: 6.8cqw; }
.card-lg.r-starter .card-top.has-t1 { --nkl: 112cqw; }
.card-lg.r-starter .card-top.has-t2 { --nkl: 99cqw; }
.card-lg .card-types .ticon { width: 8.4cqw; height: 8.4cqw; }
.card-lg .card-art {
  flex: 0 0 50cqw;
  margin: 2cqw 2.6cqw 0;
  border-radius: 1.6cqw;
  box-shadow: 0 0 0 0.6cqw var(--ink-out), 0 0 0 1.1cqw rgba(255, 255, 255, 0.4);
}
.card-lg .card-art > .sprite { top: 1cqw; }
.card-lg .card-star { width: 9cqw; height: 9cqw; left: 2cqw; top: 2cqw; }
.card-lg .card-foot { height: 8.4cqw; padding: 0 2.6cqw 0 3cqw; font-size: 4.2cqw; gap: 1.6cqw; }
.card-lg .card-foot .rsym { width: 5cqw; height: 5cqw; }
.card-lg .card-id { column-gap: 1.6cqw; }
.card-lg .card-shiny-mark { width: 5.4cqw; height: 5.4cqw; margin-left: -0.4cqw; filter: drop-shadow(0 0 0.9cqw rgba(255, 236, 140, 0.95)); }
.card-lg .card-set { font-size: 3.6cqw; padding: 0.3cqw 1cqw 0.5cqw; border-radius: 1cqw; }
.card-lg .card-lv { font-size: 5cqw; padding: 0.3cqw 1.8cqw 0.6cqw; box-shadow: 0 0 0 0.45cqw var(--ink-out), inset 0 -0.5cqw 0 rgba(160, 90, 0, 0.35); }
.card-lg .card-xp { height: 1.8cqw; margin: -0.4cqw 3cqw 2cqw; }
.card-lg .card-badge { font-size: 4.6cqw; height: 8cqw; min-width: 8cqw; padding: 0 2.4cqw; top: 17cqw; right: 5cqw; }
.card-lg .card-sub { font-size: 4.2cqw; margin-top: 1cqw; }

/* Cuerpo de la carta grande. Su alto es fijo (todo va en cqw), así que lo
   que lleva tiene que caber siempre: evolución, ataque, cómo ataca (1 o 2
   líneas), rol, 2 líneas de texto y definitivo. Ninguna fila encoge salvo el
   texto, y éste sólo si sobra (con la barra de copias y «cómo ataca» en dos
   líneas cabe justo). Lo comprueba la auditoría de cartas con todas las
   formas. */
.card-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8cqw;
  margin: 2cqw 2.6cqw 1.4cqw;
  padding: 1.3cqw 2.6cqw;
  border-radius: 1.6cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(240, 244, 255, 0.74));
  box-shadow: 0 0 0 0.5cqw rgba(11, 24, 56, 0.55), inset 0 0.5cqw 0 rgba(255, 255, 255, 0.6);
  color: #17223f;
  font-size: 3.6cqw;
  line-height: 1.18;
  overflow: hidden;
}
.card-evo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  flex: none;   /* no encoge: los Pokémon se saldrían de su fila */
  min-height: 12.6cqw;
  margin: -0.8cqw 0 0;
  padding-bottom: 1cqw;
  border-bottom: 0.4cqw dashed rgba(23, 34, 63, 0.22);
}
.card-evo-mon {
  display: grid;
  place-items: center;
  width: 15cqw;
  height: 12.6cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 34, 63, 0.1), transparent);
  opacity: 0.75;
}
.card-evo-mon.is-cur { opacity: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--tc) 55%, transparent), transparent); }
.card-evo-arrow {
  width: 2.4cqw;
  height: 2.4cqw;
  border-top: 0.8cqw solid rgba(23, 34, 63, 0.45);
  border-right: 0.8cqw solid rgba(23, 34, 63, 0.45);
  transform: rotate(45deg);
  margin: 0 1cqw 0 0.4cqw;
}
.card-evo-more { font-weight: 700; font-size: 3.6cqw; color: rgba(23, 34, 63, 0.7); }
.card-move {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  font-size: 4.6cqw;
  font-weight: 700;
}
.card-move .ticon { width: 6cqw; height: 6cqw; }
.card-move-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-move-dps {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.8cqw;
  font-size: 5.4cqw;
  color: #9a2a10;
}
.card-move-dps small { font-size: 2.9cqw; color: #4b5878; letter-spacing: 0.04em; }
.card-move-dps.is-none { font-size: 3.6cqw; color: #4b5878; }
.card-kind { margin-top: -0.6cqw; font-size: 3.4cqw; color: #4b5878; }
.card-role { font-size: 3.9cqw; font-weight: 700; color: #6a3c00; }
.card-desc {
  flex: 0 1 auto;
  min-height: 0;
  font-style: italic;
  color: #2b375a;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-body.no-evo .card-desc { -webkit-line-clamp: 3; }   /* sin la fila de evolución cabe otra línea */
.card-ult {
  display: flex;
  align-items: center;
  flex: none;   /* no encoge: el texto de ambiente cede antes */
  gap: 1.2cqw;
  margin-top: auto;
  padding-top: 0.8cqw;
  border-top: 0.4cqw dashed rgba(23, 34, 63, 0.22);
  font-size: 3.7cqw;
  font-weight: 700;
  color: #3a2a6e;
  white-space: nowrap;
  overflow: hidden;
}
.card-ult .ico { width: 4.6cqw; height: 4.6cqw; }
.card-ult small { font-size: 0.85em; color: #6a5aa0; font-weight: 400; }
.card.r-legendary .card-body { background: linear-gradient(180deg, rgba(14, 10, 46, 0.78), rgba(14, 10, 46, 0.62)); color: #eef0ff; box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.25); }
.card.r-legendary .card-role { color: #ffd98a; }
.card.r-legendary .card-kind { color: #b8bce8; }
.card.r-legendary .card-desc { color: #d8dcff; }
.card.r-legendary .card-ult { color: #f0c8ff; border-top-color: rgba(255, 255, 255, 0.2); }
.card.r-legendary .card-ult small, .card.r-legendary .card-move-dps small, .card.r-legendary .card-evo-more { color: #b8b8e8; }
.card.r-legendary .card-move-dps { color: #ffb08a; }
.card.r-legendary .card-evo { border-bottom-color: rgba(255, 255, 255, 0.2); }
.card.r-legendary .card-evo-arrow { border-color: rgba(255, 255, 255, 0.5); }
.card-lg.r-legendary .card-art { bottom: auto; height: 64cqw; }
.card-lg.r-legendary .card-art > .sprite { top: 2cqw; }
.card-lg.r-legendary .card-top { margin-bottom: 50cqw; }

/* Carta grande estrecha (< 230 px): menos texto y letra algo mayor. */
@container card (min-width: 140px) and (max-width: 230px) {
  .card-body { font-size: 4.2cqw; gap: 1.2cqw; }
  .card-kind { display: none; }
  .card-desc { -webkit-line-clamp: 2; }
  .card-move { font-size: 5.2cqw; }
  .card-role, .card-ult { font-size: 4.4cqw; }
}

/* Hueco grande (ficha de una línea que no tienes): «???», silueta, nº con
   gema y, abajo, dónde se consigue. */
.card-lg.is-locked .card-face { inset: 4cqw; border-width: 0.6cqw; }
.card-lg.is-locked .card-face { background-size: 7cqw 7cqw, 7cqw 7cqw, 7cqw 7cqw, 7cqw 7cqw, auto, auto; }
.card-lg .card-slot-name { margin: 4cqw 12cqw 0; padding: 0.6cqw 0 1cqw; border-radius: 1.4cqw; font-size: 6.4cqw; }
.card-lg.is-locked .card-art { flex: 0 0 48cqw; margin: 2cqw 4cqw 0; }
.card-lg.is-locked .card-slot-no { gap: 1.4cqw; padding: 1.4cqw 0 2cqw; font-size: 7cqw; }
.card-lg .card-slot-no .rsym { width: 6cqw; height: 6cqw; }
.card-where {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6cqw;
  margin: 0 5cqw 5cqw;
  padding: 2.6cqw 4cqw;
  border-radius: 2cqw;
  background: rgba(185, 203, 240, 0.09);
  box-shadow: inset 0 0 0 0.5cqw color-mix(in srgb, var(--slot) 45%, transparent);
  color: rgba(225, 233, 255, 0.88);
  font-size: 4.6cqw;
  line-height: 1.2;
}
.card-where b { font-size: 4cqw; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 60%, #fff); }
.card-where-i { display: flex; align-items: center; gap: 2cqw; font-weight: 700; }
.card-where-i .ico { flex: none; width: 6.4cqw; height: 6.4cqw; }

/* Inclinación 3D y reflejo que sigue al puntero */
.card-lg.is-tilt {
  touch-action: pan-y;
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1), box-shadow 0.2s;
}
.card-lg.is-tilt.is-tilting { transition: transform 0.08s linear; }
.card-glare {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 28%, transparent 55%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.3s;
}
.card-lg.is-tilting .card-glare { opacity: 1; }
.card-lg.is-tilting .card-face::after { animation-play-state: paused; opacity: 0; }
.card-lg.r-rare .card-holo,
.card-lg.r-starter .card-holo { background-position: var(--mx, 0) var(--my, 0), 0 0, 0 0; transition: background-position 0.2s; }

/* ---------- Colección: álbum por regiones ---------- */

.coll { gap: 14px; }
/* Cabecera: en móvil, una fila por bloque; si cabe, progreso y atajos van juntos. */
.coll-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px 14px; }
.coll-head > * { flex: 1 1 100%; min-width: 0; }
.coll-head > .coll-sum { flex: 1 1 300px; }
.coll-head > .coll-chips { flex: 0 1 auto; }
.coll-sum { display: grid; grid-template-columns: auto auto minmax(60px, 1fr); align-items: center; gap: 10px; }
.coll-book .ico { width: 30px; height: 30px; display: block; }
.coll-total { font-size: 18px; font-weight: 700; white-space: nowrap; text-shadow: var(--outline-sm); }
.coll-total b { font-size: 26px; color: var(--gold); text-shadow: var(--outline); }
.coll-pct { color: var(--muted); font-size: 15px; }
.coll-sum .bar { height: 14px; }
.coll-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.coll-chips:empty { display: none; }
.coll-hint { font-size: 13px; color: var(--muted); }
.coll-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 12px 4px 8px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(6, 14, 38, 0.6);
  box-shadow: 0 0 0 2px var(--edge-out), 0 3px 0 rgba(0, 0, 0, 0.35);
  font-size: 13px;
  font-weight: 700;
  text-shadow: var(--outline-sm);
  white-space: nowrap;
  transition: transform 0.1s;
}
.coll-chip::before { content: ''; position: absolute; inset: -6px -2px; }
.coll-chip:active { transform: translateY(2px); }
.coll-chip .ico { width: 18px; height: 18px; }
.coll-chip.chip-up { border-color: #a6f5c2; color: #c9ffdb; }
.coll-chip.chip-new { border-color: #ffb3bc; color: #ffd5da; }
.coll-chip b { font-weight: 700; }
.coll-chip-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin: 0 2px 0 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd5da 0 18%, #ff5f6d 45%, #c4213c);
  box-shadow: 0 0 0 2px var(--edge-out);
}
.coll-chip.chip-shiny { border-color: #fff1a6; color: #fff3b8; }
.coll-chip.is-on { color: var(--edge-out); text-shadow: none; }
.coll-chip.chip-up.is-on { background: linear-gradient(180deg, #a6f5c2, #2fb562); }
.coll-chip.chip-new.is-on { background: linear-gradient(180deg, #ff9aa5, #e2384f); color: #fff; text-shadow: var(--outline-sm); }
.coll-chip.chip-shiny.is-on { background: linear-gradient(180deg, #fff3a6, #ffb81f); }
.coll-tools { display: flex; gap: 8px; align-items: stretch; }
.coll-search { position: relative; flex: 1; min-width: 0; }
.coll-search::before, .coll-search::after { content: ''; position: absolute; pointer-events: none; }
.coll-search::before {
  left: 13px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border: 3px solid var(--gold);
  border-radius: 50%;
}
.coll-search::after {
  left: 24px;
  top: 50%;
  width: 3px;
  height: 8px;
  margin-top: 1px;
  background: var(--gold);
  transform: rotate(-45deg);
  border-radius: 2px;
}
.coll-q { padding-left: 38px; -webkit-appearance: none; appearance: none; }
.coll-q::-webkit-search-cancel-button { filter: invert(1) brightness(1.5); }
.coll-ftoggle { flex: none; min-height: 44px; padding: 0 14px; gap: 8px; font-size: 16px; }
.coll-ficon {
  width: 16px;
  height: 14px;
  background:
    linear-gradient(var(--gold), var(--gold)) 0 1px / 16px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 6px / 16px 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) 0 11px / 16px 2px no-repeat,
    radial-gradient(circle, #fff 0 2px, transparent 2.5px) 3px -1px / 6px 6px no-repeat,
    radial-gradient(circle, #fff 0 2px, transparent 2.5px) 9px 4px / 6px 6px no-repeat,
    radial-gradient(circle, #fff 0 2px, transparent 2.5px) 5px 9px / 6px 6px no-repeat;
}
.coll-fbadge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--edge-out);
  font-size: 12px;
  text-shadow: none;
}
.coll-fbadge[hidden] { display: none; }
.coll-ftoggle.is-open { box-shadow: 0 0 0 2px var(--edge-out), 0 0 0 4px rgba(255, 210, 63, 0.6); }
.coll-filters {
  display: grid;
  /* 150 px: caben «Para subir» y «Quitar filtros» en una línea. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--well);
  animation: scr-fade 0.2s both;
}
.coll-filters[hidden] { display: none; }
.coll-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--muted); }
.coll-field .select { width: 100%; padding-left: 10px; padding-right: 30px; font-size: 14px; }
.coll-reset { align-self: end; min-height: 44px; padding: 0 14px; font-size: 15px; white-space: nowrap; }

.coll-count { font-size: 13px; color: var(--muted); }
.coll-count[hidden] { display: none; }
.coll-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--muted); }

/* Un set = una página del álbum, con su cabecera pegada arriba al bajar. */
.album { display: flex; flex-direction: column; gap: 18px; }
.set {
  position: relative;
  padding: 0 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sb, #1c3d8c) 30%, transparent), transparent 220px),
    rgba(6, 14, 38, 0.42);
  box-shadow: inset 0 0 0 2px rgba(91, 131, 214, 0.28), 0 6px 0 2px rgba(4, 9, 26, 0.35);
}
.set > .cards { margin-top: 12px; }
.set-head {
  position: sticky;
  top: -14px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 -10px;
  padding: 8px 12px 8px 10px;
  border-radius: 16px 16px 12px 12px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sa) 35%, transparent), transparent 60%),
    linear-gradient(100deg, color-mix(in srgb, var(--sb) 85%, #000) 0%, color-mix(in srgb, var(--sg) 55%, var(--sb)) 100%);
  border: 2px solid color-mix(in srgb, var(--sa) 70%, #fff);
  box-shadow: 0 0 0 2px var(--edge-out), 0 5px 10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.set-emblem {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--sa) 80%, #fff) 30%, var(--sa) 60%, color-mix(in srgb, var(--sa) 60%, #000) 100%);
}
.set-emblem::before {
  content: '';
  position: absolute;
  inset: 3px;
  clip-path: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sb) 80%, #000), var(--sb));
}
.set-emblem b {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sa) 70%, #fff);
  text-shadow: 0 1px 0 #000;
}
.set-title { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; }
.set-title b { font-size: 20px; line-height: 1.05; text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-title small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(230, 238, 255, 0.85); text-shadow: var(--outline-sm); white-space: nowrap; }
.set-shiny { display: inline-flex; align-items: center; gap: 2px; color: #fff3b8; }
.set-shiny .ico { width: 13px; height: 13px; }
.set-prog { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.set-count { font-size: 14px; font-weight: 700; white-space: nowrap; text-shadow: var(--outline-sm); }
.set-count b { font-size: 18px; color: var(--gold); }
.set-bar {
  display: block;
  width: 92px;
  height: 9px;
  border-radius: 999px;
  border: 2px solid var(--edge-out);
  background: rgba(4, 9, 26, 0.6);
  overflow: hidden;
}
.set-bar i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(180deg, #fff, var(--sa)); }
.set-head.is-done .set-bar i { background: linear-gradient(180deg, #fff3a6, var(--gold)); }
/* Set completo: borde dorado, sello «COMPLETO» y el legendario a todo color. */
.set-head.is-done {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--edge-out), 0 0 16px rgba(255, 210, 63, 0.45), 0 5px 10px rgba(0, 0, 0, 0.35);
}
.set-stamp {
  margin: -2px 0 -3px;   /* sello: no hace la cabecera más alta que la barra */
  padding: 2px 7px;
  border: 2px solid var(--gold);
  border-radius: 6px;
  background: rgba(58, 36, 0, 0.55);
  color: #fff3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow: 0 1px 0 #000;
  transform: rotate(-5deg);
  box-shadow: 0 0 10px rgba(255, 210, 63, 0.5);
}
.set-head.is-done .set-mascot { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 226, 120, 0.9)); }
.set-mascot {
  position: absolute;
  z-index: 0;
  right: 104px;
  bottom: -6px;
  opacity: 0.55;
  pointer-events: none;
}
.set-mascot .sprite.is-sil { filter: brightness(0) opacity(0.45); }
@media (max-width: 420px) {
  .coll { gap: 9px; }
  .coll-head { padding: 8px 12px 9px; gap: 8px 14px; }
  .coll-total b { font-size: 24px; }
  /* Atajos compactos en una sola fila: icono y número. */
  .coll-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .coll-chips::-webkit-scrollbar { display: none; }
  .coll-chip { flex: none; min-height: 32px; padding: 2px 11px 3px 8px; font-size: 14px; }
  .coll-chip-l, .coll-reset-x { display: none; }
  .coll-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set > .cards { margin-top: 8px; }
  .set-head { padding-top: 6px; padding-bottom: 6px; }
  .set { padding: 0 8px 10px; }
  .set-head { margin: 0 -8px; gap: 8px; }
  .set-emblem { width: 38px; height: 38px; }
  .set-emblem b { font-size: 12px; }
  .set-title b { font-size: 18px; }
  .set-bar { width: 72px; }
  .set-mascot { right: 84px; }
}
@media (min-width: 1200px) {
  .coll .cards { --card-min: 104px; gap: 12px; }
}
/* Móvil en horizontal: cabeceras más bajas para ver cartas sin bajar. */
@media (orientation: landscape) and (max-height: 520px) {
  .coll { gap: 10px; }
  .coll-head { padding: 8px 12px 10px; gap: 8px 12px; }
  .coll-total b { font-size: 22px; }
  .coll-book .ico { width: 24px; height: 24px; }
  .coll .cards { --card-min: 84px; }
  .set-head { padding: 4px 10px 4px 8px; }
  .set-emblem { width: 36px; height: 36px; }
  .set-emblem b { font-size: 11px; }
  .set-title b { font-size: 17px; }
}

/* ---------- Ficha de carta: la carta grande y la información ---------- */

.detail { display: flex; flex-direction: column; gap: 14px; }
.detail-card {
  --card-w: min(280px, 76vw);
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
  perspective: 900px;
}
.detail-info { min-width: 0; }
.detail-info > .detail-head { margin-bottom: 8px; }
.detail-lead { margin-top: 8px; font-size: 17px; font-weight: 700; text-shadow: var(--outline-sm); }
.detail-info > .detail-lead + .muted { margin-top: 6px; }
.detail-info > .lvl:first-child, .detail-info > .detail-role + .lvl { margin-top: 10px; }
@media (min-width: 720px) {
  .detail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; }
  .detail-card { --card-w: 300px; position: sticky; top: 0; padding: 4px 0 8px; }
}
/* Móvil en horizontal: carta a la izquierda, del alto que quepa. */
@media (orientation: landscape) and (max-height: 520px) {
  .detail { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
  .detail-card { --card-w: min(250px, calc((100dvh - 120px) * 0.716)); position: sticky; top: 0; padding: 2px 0; }
}

/* Menos movimiento: sin giros, brillos ni rebotes. */
@media (prefers-reduced-motion: reduce) {
  .card.is-shiny::before, .card-face::after, .card-star { animation: none !important; }
  .card-face::after { display: none; }
  .card-lg.is-tilt { transform: none; }
}