/* Marcos de carta. Va DESPUÉS de style.css y piel.css y aplica a las cartas
   con la clase `con-marco`, que hoy son todas: tablero, mano, colección, sobre
   y visor pintan la misma carta a cinco tamaños.

   Las fuentes van vendorizadas, como Inter: el juego no pide nada a terceros.
   Cinzel sólo en 600 y 700, Libre Baskerville en 400, subconjunto latino. */
/* Cinzel es una fuente VARIABLE (eje wght 400-900): un solo fichero sirve la
   600 del tipo y la 700 del nombre. Google entregaba el mismo binario para las
   dos peticiones, así que guardarlo dos veces era guardarlo dos veces. */
@font-face { font-family: 'Cinzel'; font-weight: 400 900; font-display: swap;
  src: url('assets/fuentes/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-weight: 400; font-display: swap;
  src: url('assets/fuentes/libre-baskerville-400-latin.woff2') format('woff2'); }
/* Terralis es la letra del juego: cifras, mayúsculas, minúsculas y las
   acentuadas del castellano, trazadas de seis tiras generadas por IA con
   `python tools/terralis.py`. Lleva las métricas de Cinzel (mismo cuerpo de
   mayúscula, misma ascendente) para que el cambio no mueva nada, y el
   `unicode-range` la limita a lo que tiene: cualquier otro carácter —una
   coma, un paréntesis— sigue saliendo de Cinzel, que va detrás en la pila.
   Un solo peso, declarado 400-900 para que el navegador no le invente una
   negrita. */
@font-face { font-family: 'Terralis'; font-weight: 400 900; font-display: swap;
  unicode-range: U+30-39, U+2F, U+41-5A, U+61-7A,
    U+C1, U+C9, U+CD, U+D1, U+D3, U+DA, U+DC, U+E1, U+E9, U+ED, U+F1, U+F3, U+FA, U+FC;
  src: url('assets/fuentes/terralis.woff2') format('woff2'); }

/* Un marco por familia y, en las criaturas, por rareza. Las tres familias de
   soporte llevan uno solo cada una: son 16 cartas y a 83 px la rareza la cuenta
   mejor la colección. Las clases las emite `claseMarco()` en render.js. */
.m-dino_comun { --marco: url('assets/marcos/dino_comun.webp'); }
.m-dino_rara { --marco: url('assets/marcos/dino_rara.webp'); }
.m-dino_epica { --marco: url('assets/marcos/dino_epica.webp'); }
.m-dino_legendaria { --marco: url('assets/marcos/dino_legendaria.webp'); }
.m-dino_jefe { --marco: url('assets/marcos/dino_jefe.webp'); }
.m-clima { --marco: url('assets/marcos/clima.webp'); }
.m-evento { --marco: url('assets/marcos/evento.webp'); }
.m-recurso { --marco: url('assets/marcos/recurso.webp'); }

:root {
  --chapa-ataque: url('assets/marcos/chapas/ataque.webp');
  --chapa-ataque_mermado: url('assets/marcos/chapas/ataque_mermado.webp');
  --chapa-ataque_potenciado: url('assets/marcos/chapas/ataque_potenciado.webp');
  --chapa-biomasa: url('assets/marcos/chapas/biomasa.webp');
  --chapa-vida: url('assets/marcos/chapas/vida.webp');
  --chapa-vida_herida: url('assets/marcos/chapas/vida_herida.webp');
}

/* La carta con marco dibujado.

   La geometría NO la decide esta hoja: la decide el PNG. Se mide con
   `python tools/marcos.py` sobre los ficheros de verdad, nunca se estima, y los
   números se copian aquí. Los de aquí abajo son los del marco VIEJO, que hoy
   usan el jefe y —con los suyos— las tres familias de soporte; las cuatro
   rarezas de criatura estrenaron otro juego el 19-09-2026 y lo escriben más
   abajo, en `.m-cria`.

   Una criatura reparte su cara en cinco huecos: el anillo del coste arriba a la
   izquierda, la BANDA del nombre a su derecha, la VENTANA de la ilustración, la
   CAJA de la habilidad y las dos chapas del pie. Es la anatomía de una carta de
   TCG, y se llegó a ella después de medir que el binomial entero no cabe en
   ninguna banda de una línea: 28 letras en 58 px. Por eso la banda lleva sólo
   el GÉNERO y el binomial se lee en el visor.

   Las de soporte no llevan banda ni chapas: su nombre y su habilidad son el
   mismo, así que la caja lleva el nombre, y la ventana sube hasta el borde con
   el anillo del coste montado en la esquina. */

.carta.con-marco {
  /* Una carta es una PIEZA del juego, no una imagen que guardar: el menú de
     imagen de Android —que sale a los 500 ms de tener el dedo encima— caía
     encima de la ficha que la pulsación larga acababa de abrir. El menú sigue
     estando donde tiene sentido: «Ver la ilustración», en el visor.
     `main.js` frena además el `contextmenu`, que Chrome en Android no
     entiende `-webkit-touch-callout`. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  /* --- familia DINOSAURIO --- */
  --ban-x0: 23.2%; --ban-x1: 7.8%;  --ban-y0: 7.0%;  --ban-al: 6.8%;
  --ven-x0: 10.0%; --ven-x1: 10.1%; --ven-y0: 16.7%; --ven-alto: 37.7%; --ven-forma: 1.5517;
  --pla-x0: 10.2%; --pla-x1: 10.2%; --pla-y0: 57.9%; --pla-y1: 19.3%;
  --cos-cx: 13.87%; --cos-cy: 10.03%;
  /* Las dos chapas de cifras: círculo a la izquierda, triángulo a la derecha.
     El `lleno` medido lo confirma —0,78 es un círculo (π/4) y 0,64 un triángulo—
     y por eso se distinguen de un vistazo sin necesidad de símbolo dentro. */
  --atq-x: 34.96%; --atq-y: 87.11%;  --vid-x: 65.04%; --vid-y: 87.4%;

  background: #14100c;
  /* Sin aro de CSS: el canto lo trae dibujado el marco, y la rareza también. */
  box-shadow: none;
  border-radius: 5.4% / 3.9%;
}
/* ============================================ el marco de las CRIATURAS
   Desde el 19-09-2026 las cuatro rarezas de criatura llevan este juego de
   marcos —el legendario llegó un día antes y las otras tres detrás— y el jefe
   se queda con el suyo de siempre, que es el dibujo viejo. La clase que las
   junta es `m-cria`, que `claseMarco()` emite al lado de la de la rareza:
   cuatro selectores por regla se leían peor que el CSS que describen.

   Trae dentro lo que hasta ahora eran piezas sueltas —el aro del coste, el círculo del
   Ataque y el triángulo de la Vida—, así que sus tres chapas se apagan:
   dibujarlas encima sería ponerle un aro a un aro.

   Y desde el 19-09-2026 por la noche las tres figuras vienen RELLENAS de
   papel, como la banda, la caja y todo el marco de jefe. Nacieron huecas
   —cifra clara sobre el fondo oscuro de la carta— y el autor las cambió al
   verlas en la mano: un hueco deja ver lo que haya detrás, y detrás no hay
   nada que ver. Así que aquí ya no hay dos tintas: **las cinco van oscuras**,
   y una criatura se lee igual que un jefe o que una carta de soporte.

   La geometría la midió `python tools/marcos.py` sobre los cuatro PNG, como
   manda la regla de que la decide el dibujo y no el CSS, y los cuatro caen
   dentro de medio punto en todo menos en el centro del aro del coste, que por
   eso se escribe por rareza. Lo único que no mide la herramienta son la banda
   y la caja, porque en estos marcos no son magenta: ésas se midieron sobre el
   papel, y también coinciden dentro de un punto.

   Y la caja es más baja que la del marco viejo —20,9 % del alto contra
   22,8 %— porque la ventana creció del 37,7 % al 45,9 %. Por eso el texto y el
   título bajan de cuerpo aquí y sólo aquí: con los de siempre, cuatro cartas
   del set se cortaban por abajo. */
.carta.con-marco.m-cria {
  --ban-x0: 24%;    --ban-x1: 13%;    --ban-y0: 6.4%;   --ban-al: 6.2%;
  --ven-x0: 12.9%;  --ven-x1: 12.5%;  --ven-y0: 13%;    --ven-alto: 45.9%; --ven-forma: 1.1899;
  --pla-x0: 13%;    --pla-x1: 13%;    --pla-y0: 60.5%;  --pla-y1: 18.6%;
  --cos-cy: 9.2%;
  /* El triángulo va por su centro de MASA (90,2 %) y no por el de su caja
     (88,3 %), por lo mismo que la chapa suelta: una cifra centrada en el
     rectángulo se ve flotando sobre la punta. */
  --atq-x: 18.55%;  --atq-y: 89.5%;   --vid-x: 81.05%;  --vid-y: 90.2%;
}
/* El aro del coste es lo único que el generador movió de una rareza a otra:
   0,78 puntos entre la legendaria y la épica, que a 268 px son dos. */
.carta.con-marco.m-dino_comun,
.carta.con-marco.m-dino_rara { --cos-cx: 12.5%; }
.carta.con-marco.m-dino_epica { --cos-cx: 12.89%; }
.carta.con-marco.m-dino_legendaria { --cos-cx: 12.11%; }
.carta.con-marco.m-cria .c-chapa { display: none; }
.carta.con-marco.m-cria .c-cuerpo { padding: 2% 4% 1.5%; }
/* Sobre papel: el nombre, el título y el texto. */
.carta.con-marco.m-cria .c-genero {
  color: #38200c; text-shadow: 0 1px 0 rgba(255, 247, 225, .5);
}
.carta.con-marco.m-cria .c-hab { color: #5d2d08; }
.carta.con-marco.m-cria .c-nombre { color: #38200c; }
.carta.con-marco.m-cria .c-texto { color: #2e2113; }
/* Sobre papel también: las tres cifras. Y los dos estados del Ataque, que sin
   chapa que cambiar los cuenta el color de la cifra, como la Vida herida. Son
   los mismos cuatro tonos que el marco de jefe, elegidos para leerse sobre
   beige a 83 px: el verde y el rojo claros de antes eran para fondo oscuro. */
.carta.con-marco.m-cria .c-coste,
.carta.con-marco.m-cria .st-a b,
.carta.con-marco.m-cria .st-v b { color: #2b1706; }
.carta.con-marco.m-cria .st-v.herido b { color: #8d2410; }
.carta.con-marco.m-cria .st-a.mejorado b { color: #1d5a1b; }
.carta.con-marco.m-cria .st-a.mermado b { color: #8d2410; }
/* Los cuerpos del visor, que es donde el texto de la habilidad se pinta. */
.carta--visor.con-marco.m-cria .c-texto {
  font: 400 10.5px/12px 'Libre Baskerville', Georgia, serif;
}
.carta--visor.con-marco.m-cria .c-texto.largo { font-size: 9.5px; line-height: 10.8px; }
.carta--visor.con-marco.m-cria .c-cuerpo { gap: 3px; }
.carta--visor.con-marco.m-cria .c-hab { line-height: 18px; }

/* ============================================== el marco del JEFE
   El último del juego (19-09-2026) y el que cierra el set: hasta ese día las
   cinco cartas de jefe iban A SANGRE, y como ya pasó con las legendarias un
   día antes, el marco y la carta entera se pelean por la misma carta y ganó el
   marco. Lo que queda de aquello está en `esEntera()`, con la lista vacía.

   Comparte la anatomía de las criaturas —banda de género, ventana, caja, aro
   del coste, círculo del Ataque y triángulo de la Vida— y no su geometría: la
   ventana es más baja (40,9 % contra 45,9 %) porque la banda arranca más
   abajo y la piedra del pie es más honda, así que NO entra en `m-cria`.

   Y lo que de verdad lo separa: **los cinco huecos vienen RELLENOS de papel**,
   como los tres de soporte y al revés que las criaturas. Así que aquí las
   cinco tintas van oscuras —no hay una sola cifra sobre hueco— y las tres
   chapas se apagan igual, porque el aro, el círculo y el triángulo ya están
   dibujados.

   La herramienta sólo mide un hueco en este marco, la ventana; la banda, la
   caja y las tres figuras se midieron sobre el papel. Las dos cifras van por
   su centro de MASA y no por el de su caja, como en las criaturas: en el
   triángulo son once décimas de diferencia y se ve. */
.carta.con-marco.m-dino_jefe {
  --ban-x0: 26.2%;  --ban-x1: 15.2%;  --ban-y0: 8.45%;  --ban-al: 5.8%;
  --ven-x0: 14.2%;  --ven-x1: 13.8%;  --ven-y0: 15.1%;  --ven-alto: 40.9%; --ven-forma: 1.2889;
  --pla-x0: 14.8%;  --pla-x1: 13.5%;  --pla-y0: 58.8%;  --pla-y1: 22.5%;
  --cos-cx: 12.92%; --cos-cy: 9.19%;
  --atq-x: 21.49%;  --atq-y: 88.05%;  --vid-x: 76.58%;  --vid-y: 89.02%;
}
.carta.con-marco.m-dino_jefe .c-chapa { display: none; }
.carta.con-marco.m-dino_jefe .c-cuerpo { padding: 2% 4% 1.5%; }
/* Las cinco tintas, todas sobre papel. */
.carta.con-marco.m-dino_jefe .c-genero {
  color: #38200c; text-shadow: 0 1px 0 rgba(255, 247, 225, .5);
}
.carta.con-marco.m-dino_jefe .c-hab { color: #5d2d08; }
.carta.con-marco.m-dino_jefe .c-nombre { color: #38200c; }
.carta.con-marco.m-dino_jefe .c-texto { color: #2e2113; }
.carta.con-marco.m-dino_jefe .c-coste,
.carta.con-marco.m-dino_jefe .st-a b,
.carta.con-marco.m-dino_jefe .st-v b { color: #2b1706; }
.carta.con-marco.m-dino_jefe .st-v.herido b { color: #8d2410; }
.carta.con-marco.m-dino_jefe .st-a.mejorado b { color: #1d5a1b; }
.carta.con-marco.m-dino_jefe .st-a.mermado b { color: #8d2410; }
/* Su caja es la más baja del juego —18,7 puntos contra los 20,9 de una
   criatura— porque la piedra del pie se lleva tres puntos más. Con el cuerpo
   de siempre, las cinco se cortaban por abajo. */
.carta--visor.con-marco.m-dino_jefe .c-texto {
  font: 400 10.5px/12px 'Libre Baskerville', Georgia, serif;
}
.carta--visor.con-marco.m-dino_jefe .c-texto.largo { font-size: 9px; line-height: 10.2px; }
.carta--visor.con-marco.m-dino_jefe .c-cuerpo { gap: 3px; }
.carta--visor.con-marco.m-dino_jefe .c-hab { line-height: 18px; }

/* El especular ya viene pintado en el PNG; el de CSS encima lo emborronaba. */
.carta.con-marco::before { background: none; }

/* ============================================ el marco del SOPORTE
   Clima, evento y recurso estrenaron el suyo el 19-09-2026, un día después de
   las criaturas y con las mismas tres cosas dentro: el aro del coste dibujado
   y hueco, la caja de PAPEL pintada en el PNG, y el emblema de familia —sol,
   espiral y helecho— en la piedra del pie. Es lo que sustituye a la rareza:
   una carta de soporte no la enseña, así que lo que tiene que decirse de un
   vistazo es de qué familia es.

   No llevan banda de nombre, que su nombre y su habilidad son el mismo, y por
   eso la ventana sube hasta el borde: 51,5 % del alto contra el 45,9 % de una
   criatura, y arranca al 5 % en vez de al 13 %.

   La geometría la midió `python tools/marcos.py` sobre los tres PNG —ventana y
   aro del coste, que son los dos huecos magenta— y los tres caen dentro de
   medio punto en todo, aro incluido, así que aquí no hace falta una línea por
   familia como en las criaturas. La caja no es magenta y se midió sobre el
   papel, con el mismo margen que se le dejó a la de las criaturas. */
.carta.con-marco.no-dino {
  --ven-x0: 13.3%;  --ven-x1: 11.9%;  --ven-y0: 4.7%;   --ven-alto: 52.8%; --ven-forma: 1.0372;
  --pla-x0: 13%;    --pla-x1: 13%;    --pla-y0: 58.4%;  --pla-y1: 18.8%;
  --cos-cx: 12.51%; --cos-cy: 9.14%;
}
/* El aro del coste viene dibujado, así que la chapa de Biomasa se apaga: es el
   mismo caso que las tres chapas de las criaturas. */
.carta.con-marco.no-dino .c-chapa { display: none; }
/* Y aquí TODO cae sobre papel —el aro del coste también— así que las tres
   tintas van oscuras. Es lo contrario que en las criaturas, donde las cifras
   caen sobre hueco: ahí el aro está vacío y aquí está relleno. */
.carta.con-marco.no-dino .c-nombre { color: #38200c; }
.carta.con-marco.no-dino .c-texto { color: #2e2113; }
.carta.con-marco.no-dino .c-coste { color: #2b1706; }
/* La caja se queda con el relleno de siempre —`3% 5% 0`— y NO con el que se
   apretó para las criaturas: aquí lleva el NOMBRE con hasta tres líneas, no un
   título de dos, y el punto y medio de relleno de abajo le comía media línea a
   toda carta de soporte de dos líneas en la mano y en el tablero. El visor
   tiene el suyo aparte. */
/* Y el cuerpo del visor baja lo mismo que en las criaturas y por lo mismo: la
   caja perdió un punto de alto al crecer la ventana, y con el cuerpo de
   siempre la Crecida estacional —112 letras, el texto más largo del set— se
   cortaba por abajo. */
.carta--visor.con-marco.no-dino .c-texto {
  font: 400 10.5px/12px 'Libre Baskerville', Georgia, serif;
}
.carta--visor.con-marco.no-dino .c-texto.largo { font-size: 9.5px; line-height: 10.8px; }
.carta--visor.con-marco.no-dino .c-cuerpo { gap: 3px; }
.carta--visor.con-marco.no-dino .c-nombre { line-height: 18px; }

.con-marco .c-marco {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--marco); background-size: 100% 100%;
}

.con-marco .c-arte {
  position: absolute; left: var(--ven-x0); right: var(--ven-x1);
  top: var(--ven-y0); height: var(--ven-alto);
  flex: none; border-radius: 2%; background: #14100c; box-shadow: none;
}
.con-marco .c-arte .foto { filter: saturate(1.04) contrast(1.03); }

/* EL ENCUADRE (src/ui/art.js, tools/encuadre.html). Una foto con encuadre no
   se deja a `object-fit`: se le da tamaño y sitio a mano, que es lo único que
   permite ALEJARLA por debajo de «llenar». `--ven-forma` es el ancho entre el
   alto de la ventana de cada marco y sale de sus cuatro `--ven-*` —lo vigila
   test/encuadre.test.js—; `--ea` es la forma de la imagen. Con las dos, `--w`
   y `--h` son cuántas ventanas mide la foto a lo ancho y a lo alto: a zoom 1
   una vale 1 y la otra más, que es exactamente `cover`.

   El sitio es el de `object-position`: el punto x de la foto sobre el punto x
   de la ventana. Y va en `left`/`top`, NO en `transform`: en la mano la foto
   ya lleva el suyo para la inclinación, y quien escribe último gana. */
.foto-fondo { display: none; }
.con-marco:not(.entera) .c-arte .foto.encuadrada {
  position: absolute; max-width: none; object-fit: cover;
  --w: calc(var(--ez) * max(var(--ea) / var(--ven-forma), 1));
  --h: calc(var(--ez) * max(var(--ven-forma) / var(--ea), 1));
  width: calc(var(--w) * 100%); height: calc(var(--h) * 100%);
  left: calc((1 - var(--w)) * var(--ex) * 1%);
  top: calc((1 - var(--h)) * var(--ey) * 1%);
}
.con-marco:not(.entera) .c-arte .foto-fondo {
  display: block; position: absolute; left: -8%; top: -8%; width: 116%; height: 116%;
  object-fit: cover; filter: blur(5px) saturate(.9) brightness(.55);
}
.con-marco .c-arte::after { background: none; }

/* La lámina holográfica se QUITÓ (16-09-2026), por decisión del autor: brillaba
   sobre la ilustración de las legendarias y las dos de jefe en todas partes.
   No se vendía y no dependía de nada, así que irse fue borrar su regla; si
   vuelve, vuelve entera y con su guardián. `test/tienda.test.js` comprueba que
   no esté, que un degradado de arcoíris no se cuela dos veces sin querer. */

/* El coste va centrado en el campo de su chapa, igual que las otras dos cifras.
   Ya no lleva relleno propio: el campo oscuro lo trae la chapa de Biomasa, que
   es justo para lo que se pidió. Antes hacía falta porque el anillo del marco
   está hueco y la cifra caía sobre la ilustración —en un cielo claro
   desaparecía, y pasó con el Tyrannotitan—. */
.con-marco .c-coste {
  left: var(--cos-cx); top: var(--cos-cy);
  transform: translate(-50%, -50%);
  width: auto; height: auto; z-index: 4; border: none; background: none;
  color: #f4d99b; font-weight: 600; font-size: 8px;
}
.carta--mano .c-coste { font-size: 11px; }
.carta--col .c-coste { font-size: 10px; }
.carta--sobre .c-coste { font-size: 7px; }
.carta--visor .c-coste { font-size: 22px; }

/* ---------------------------------------------------------------- la banda
   El género, en una línea. La banda mide el 6,8 % del alto de la carta —7,7 px
   en el tablero, 7 en la mano— y el cuerpo de letra sale de ahí: la banda es un
   contenedor y su alto es siempre el 13,5 % de su ancho, porque los dos son
   proporciones fijas del marco. 11 cqi es el 82 % de ese alto. El segundo
   término baja el cuerpo si el género es largo y no entra: Cinzel en
   versalitas gasta hasta 0,68 em por letra —Antarctosaurus, de mayúsculas anchas,
   es el que lo marca— y los dos géneros más largos se quedan en 6 px. */
.con-marco .c-banda {
  position: absolute; z-index: 4; pointer-events: none;
  left: var(--ban-x0); right: var(--ban-x1); top: var(--ban-y0); height: var(--ban-al);
  display: flex; align-items: center; justify-content: center;
  container-type: inline-size;
}
.con-marco .c-genero {
  color: #f4ece0; white-space: nowrap; line-height: 1;
  font-size: min(11cqi, calc(100cqi / (0.68 * var(--gen, 10))));
}

/* ---------------------------------------------------------------- la caja
   En una criatura, el nombre de la habilidad; en una carta de soporte, el
   nombre de la carta, que es la misma cosa. Las cifras no viven aquí: tienen
   sus dos chapas al pie. */
.con-marco .c-cuerpo {
  position: absolute; left: var(--pla-x0); right: var(--pla-x1);
  top: var(--pla-y0); bottom: var(--pla-y1);
  z-index: 3; padding: 3% 5% 0;
  container-type: inline-size;
  display: flex; flex-direction: column; justify-content: center;
}
.con-marco .c-nombre { color: #f4ece0; text-align: center; }
.con-marco .c-hab {
  color: #f4d99b; text-align: center;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* El texto de la habilidad sólo se pinta en el visor: `marcoCarta()` lo emite
   sólo ahí, y esta regla es el cinturón por si alguien lo pide en otra parte. */
.con-marco .c-texto { display: none; }
.carta--visor .c-texto {
  display: block; margin: 0; color: #e8dcc8; text-align: left;
  font: 400 11.5px/14px 'Libre Baskerville', Georgia, serif;
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
/* Bajo el título quedan 44 px: tres líneas de 14. A 11,5 px entran unas 30
   letras por línea, así que hasta 80 letras cabe; las siete que pasan de ahí
   bajan a 10,5 sobre 13, que mete 89 letras en tres líneas y las 112 de la
   Crecida en cuatro, en la caja más alta de soporte. Medido sobre las 68. */
.carta--visor .c-texto.largo { font-size: 10.5px; line-height: 13px; }
.carta--visor .c-cuerpo { padding: 3% 5% 2.5%; justify-content: flex-start; gap: 5px; }

/* ------------------------------------------------------- cifras en su chapa
   Van sobre las chapas, en coordenadas de la CARTA. Y para eso `.c-stats` tiene
   que colgar de `.carta`, NO de `.c-cuerpo`: un `inset: 0` dentro de la placa
   se resuelve contra la placa, y las cifras salían tres puntos adentro. */
.con-marco .c-stats {
  position: absolute; inset: 0; margin: 0; display: block; gap: 0;
  z-index: 4; pointer-events: none;
}
.con-marco .c-stats .st {
  position: absolute; transform: translate(-50%, -50%);
  gap: 0; font-weight: 600;
}
.con-marco .c-stats .st-a { left: var(--atq-x); top: var(--atq-y); }
.con-marco .c-stats .st-v { left: var(--vid-x); top: var(--vid-y); }
/* Las chapas están vacías: no hay símbolo dentro que enseñar, y la forma
   —círculo contra triángulo— ya distingue una cifra de la otra mejor de lo que
   lo haría un glifo de 4 px. */
.con-marco .c-stats .st i { display: none; }
.con-marco .c-stats .st b { position: relative; font-variant-numeric: tabular-nums; }
/* Las cifras crecen con la chapa: 9 px en el tablero, 20 en el visor. */
.carta--col .c-stats { font-size: 11px; }
.carta--sobre .c-stats { font-size: 7px; }
.carta--visor .c-stats { font-size: 20px; }
.con-marco .c-stats .st.ancho b { font-size: 82%; letter-spacing: -.04em; }
.con-marco .st-a b { color: #f7e9c8; }
.con-marco .st-v b { color: #f5ded2; }
.con-marco .st-v.herido b { color: #f0a488; }

/* En el tablero la Vida va sin el máximo. Medido: la chapa tiene 6,6 px de
   interior a 63 px de carta, un dígito ocupa 5,8 y `3/5` se va a 15 — más del
   doble de lo que cabe. El color ya dice que está herida, así que la fracción
   sólo repetía en cifras lo que el tono contaba mejor. En la mano y el visor,
   donde hay sitio, se queda. */
.carta--ranura .st-v b em { display: none; }

/* =============================================================== las chapas
   Piezas sueltas que se posan sobre los huecos que el marco dejó. Van encima
   del marco y debajo de la cifra: z-index 3 contra el 4 del número.

   El encaje no se ajustó a ojo. De cada chapa se midió su CAMPO interior —el
   hueco oscuro que el aro encierra— y se calculó el tamaño que hace que ese
   campo caiga justo en el hueco del marco. Con el juego de marcos actual los
   huecos son algo mayores que con el primero y la chapa se escala con ellos:

       chapa     campo (% de la chapa)   hueco del marco   chapa completa
       Ataque    73,5 × 75,1             12,1 × 8,1        16,5 × 10,7
       Vida      72,2 × 65,4             12,9 × 7,3        17,8 × 11,2
       Biomasa   58,4 × 59,8             11,3 × 7,6        19,4 × 12,6

   El centro de masa del campo, no el de su rectángulo: en el triángulo de la
   Vida cae al 59,8 % de alto, y una cifra centrada en la caja se vería
   flotando por encima del campo. Por eso `--vida-y` no es el centro del hueco.

   Ancho y alto van por separado y no con `aspect-ratio`: el marco se estira
   distinto en cada eje, y una chapa circular sobre un hueco ya elíptico se
   notaría. */
.carta.con-marco {
  --ataque-an: 16.5%; --ataque-al: 10.7%; --ataque-x: 34.96%; --ataque-y: 87.11%;
  --vida-an: 17.8%;   --vida-al: 11.2%;   --vida-x: 65.04%;   --vida-y: 85.7%;
  --bio-an: 19.4%;    --bio-al: 12.6%;    --bio-x: 13.87%;    --bio-y: 10.03%;
}

.con-marco .c-chapa {
  position: absolute; z-index: 3; pointer-events: none;
  background-size: 100% 100%; background-repeat: no-repeat;
  transform: translate(-50%, -50%);
}
.con-marco .c-chapa-a {
  left: var(--ataque-x); top: var(--ataque-y);
  width: var(--ataque-an); height: var(--ataque-al);
  background-image: var(--chapa-ataque);
}
.con-marco .c-chapa-v {
  left: var(--vida-x); top: var(--vida-y);
  width: var(--vida-an); height: var(--vida-al);
  background-image: var(--chapa-vida);
}
.con-marco .c-chapa-b {
  left: var(--bio-x); top: var(--bio-y);
  width: var(--bio-an); height: var(--bio-al);
  background-image: var(--chapa-biomasa);
}
/* Los tres estados. Sólo cambia el metal: la silueta y el sitio no se mueven,
   porque una chapa que cambia de forma al recibir un golpe hace saltar la
   carta entera. */
.carta.con-marco.atq-alto .c-chapa-a { background-image: var(--chapa-ataque_potenciado); }
.carta.con-marco.atq-bajo .c-chapa-a { background-image: var(--chapa-ataque_mermado); }
.carta.con-marco.vid-herida .c-chapa-v { background-image: var(--chapa-vida_herida); }

/* Las cartas que no son criatura no tienen chapas de cifras, pero sí la de
   Biomasa: todas cuestan. */
.carta.con-marco.no-dino .c-chapa-a, .carta.no-dino .c-chapa-v { display: none; }

/* `line-height` en PÍXELES enteros, no en múltiplos. Con 1,1 sobre 9,2 px salen
   10,12 px por línea: la caja de dos líneas redondea a 20 y el contenido a 21,
   y esa diferencia de un píxel se ve como un trazo comido abajo. Con un entero
   la caja y el contenido caen en el mismo sitio. */
.con-marco .c-nombre, .con-marco .c-hab { line-height: 10px; }
.carta--col .c-nombre, .carta--col .c-hab { line-height: 11px; }
.carta--sobre .c-nombre, .carta--sobre .c-hab { line-height: 8px; }
.carta--visor .c-nombre, .carta--visor .c-hab { line-height: 21px; }

/* El rótulo de tipo sobra en la cara de la carta. Ocupaba un renglón de la
   placa y dejaba al nombre sin sitio —«Mortandad estacional» pedía 22 px y
   tenía 16—, y lo que decía ya lo dice el material del marco: cada familia
   tiene el suyo. Sigue estando en la ficha y en el visor, donde hay espacio. */
.carta.con-marco.no-dino .c-tipo { display: none; }

/* ========================================================== la tipografía
   Elegida: Cinzel para todo lo que es rótulo o cifra, Libre Baskerville para
   el texto corrido de la habilidad. Traducido a las clases que emite
   `marcoCarta()`:

       .card-name          -> .c-nombre
       .card-cost          -> .c-coste
       .card-stat          -> .st b
       .card-type/.rarity  -> .c-tipo, .c-clado, .c-rareza
       .card-ability-title -> .c-rasgo b
       .card-description   -> .c-rasgo p

   Cinzel no tiene cursiva, así que el binomial pierde la convención científica
   de ir en bastardilla. Queda dicho; es una decisión de estilo tomada a
   sabiendas, no un descuido.

   Son DOS ficheros nuevos en `assets/fuentes/`. Cinzel sólo necesita los pesos
   600 y 700, y Libre Baskerville el 400: subsetear a latín básico más las
   acentuadas del castellano deja los dos en torno a 30 KB cada uno. */
.con-marco .c-nombre, .con-marco .c-genero, .con-marco .c-hab, .c-rasgo b, .c-coste, .st b {
  font-family: 'Terralis', 'Cinzel', Georgia, serif;
}
.con-marco .c-nombre, .con-marco .c-genero, .con-marco .c-hab {
  font-style: normal; font-weight: 700; letter-spacing: .02em;
}
.con-marco .c-tipo, .c-clado, .c-rareza {
  font-family: 'Terralis', 'Cinzel', Georgia, serif;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.con-marco .c-rasgo p {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-weight: 400; line-height: 1.4;
}
/* Cinzel es una capital romana: sus cifras son altas y estrechas, y a 8 px en
   un campo de 6,6 se leen mejor que las de Inter, pero necesitan ir un punto
   más bajas para no tocar el aro. */
.con-marco .st b, .c-coste { font-weight: 700; }

/* Cinzel es bastante más ancha que Inter al mismo cuerpo, y con los 10 px que
   tenía la mano el binomial dejaba de caber en dos líneas: los nombres
   cortados pasaron de 6 a 31. Probado bajando de 10 a 6 de dos en dos décimas,
   el mayor que entra es 9,4 —en el tablero, en la mano y en clima por igual—,
   así que 9,2 con margen. La misma cifra sirve para las dos pantallas porque
   la placa crece con la carta. */
.con-marco .c-nombre, .carta--mano .c-nombre { font-size: min(9.2px, calc(90cqi / (0.69 * var(--pal, 9)))); }

/* Las cartas que no son criatura tienen nombres de dos palabras largas
   —«Rebrote tras incendio» pedía tres líneas— y a cambio su placa es más alta,
   porque no comparte sitio con las chapas de cifras. Así que ahí caben tres. */
.carta.con-marco.no-dino .c-nombre { -webkit-line-clamp: 3; }
/* Y su caja es un 8 % más estrecha que la del primer juego de marcos: a 9,2 px
   «Monzón de verano» se partía en tres líneas en la mano. A 8,4 vuelve a dos. */
.con-marco.no-dino .c-nombre { font-size: min(8.4px, calc(90cqi / (0.69 * var(--pal, 9)))); }

/* El nombre de la habilidad, medio punto menor: a 8,4 «Zarpazo por sorpresa»
   partía en tres líneas y la tercera se recortaba. Mismo freno por la palabra
   más larga: «reconocimiento» son 14 letras. */
.con-marco .c-hab { font-size: min(7.8px, calc(90cqi / (0.69 * var(--pal, 9)))); }

/* Y el tope sube con la carta: la colección la pinta a 105 px, el visor a 268.
   El sobre, a 62, baja. La fórmula de anchura es la misma en todos. Con
   `.con-marco` delante para el nombre: la regla de soporte de arriba lleva
   tres clases y sin eso le ganaba al visor. */
.con-marco.carta--col .c-nombre, .carta--col .c-hab { font-size: min(9.4px, calc(90cqi / (0.69 * var(--pal, 9)))); }
.con-marco.carta--sobre .c-nombre, .carta--sobre .c-hab { font-size: min(6.4px, calc(90cqi / (0.69 * var(--pal, 9)))); }
/* En el visor el título va a UNA línea y no encoge nunca: si el flex tuviera
   que elegir, encogía el título hasta 1 px y dejaba el texto. Con `--hn`, el
   largo del título, el cuerpo baja hasta que quepa: 16 px hasta 13 letras y
   12 px con «Vuelo de reconocimiento». */
.carta.con-marco.carta--visor .c-nombre, .carta--visor .c-hab {
  flex: none; -webkit-line-clamp: 1;
  font-size: min(16px, calc(100cqi / (0.7 * var(--hn, 12))));
}

/* ============================================================ la carta ENTERA
   Las criaturas legendarias y las cinco de jefe van A SANGRE: la ilustración
   cubre la carta, el marco de latón se reduce a un filete dorado y el nombre y
   la habilidad se posan sobre velos translúcidos. Es la variante «full art» de
   cualquier TCG, y aquí es una VARIANTE: la clase `entera` la pone `render.js`
   sólo si la carta lo es Y tiene foto (una silueta a sangre sería un rectángulo
   de color), así que sin foto la carta sale con su marco de siempre y nada de
   lo de abajo se aplica.

   Todo lo que se mueve es la GEOMETRÍA de los mismos huecos —la ventana pasa a
   ocupar la carta entera, la banda se ensancha, la caja baja hasta apoyarse en
   las chapas— y no la composición: `marcoCarta()` emite lo mismo. Las chapas
   de coste, Ataque y Vida se quedan donde estaban, y por eso la caja termina
   al 86 %: las dos chapas de abajo montan sobre su borde, que es lo que hace
   que parezcan puestas sobre la carta y no flotando en el arte. */
.carta.con-marco.entera {
  --ven-x0: 0; --ven-x1: 0; --ven-y0: 0; --ven-alto: 100%; --ven-forma: 0.7321;
  --ban-x0: 25%; --ban-x1: 6%; --ban-y0: 4.6%; --ban-al: 8%;
  --pla-x0: 6%; --pla-x1: 6%; --pla-y0: 60%; --pla-y1: 14%;
  /* Las chapas de Ataque y Vida bajan al 90 %: en el marco dibujado van
     donde el PNG les dejó el hueco; aquí son libres, y más abajo dejan sitio
     a un título de dos líneas sin taparlo. Miden un 5,6 % de alto a cada
     lado del centro, así que empiezan al 86 %, y la caja se organiza para
     que nada escrito pase de ahí. */
  --ataque-y: 91.5%; --vida-y: 91.7%;
  /* …y las CIFRAS con ellas: van en otro par de variables y se quedaron al
     87 % la primera vez, montadas sobre el canto de su chapa. Las dos chapas
     van alineadas por la BASE, no por el centro: en el marco dibujado el
     triángulo iba 1,4 puntos más alto porque así lo dejó el PNG, y a sangre
     se veía flotar sobre el círculo. La cifra de la Vida va 1,3 puntos por
     debajo del centro de su caja, donde cae el centro de masa del triángulo. */
  --atq-y: 91.5%; --vid-y: 93%;
  /* El filete: oro para las legendarias, bronce oscuro para el jefe. */
  --filete: linear-gradient(160deg, #f7e2a0 0%, #b98a2e 30%, #f3d27a 52%, #8c5d1a 78%, #eccb70 100%);
}
.carta.con-marco.entera.jefe {
  --filete: linear-gradient(160deg, #d9b56a 0%, #6b4a1c 30%, #c9a05a 52%, #3d2a10 78%, #b8904c 100%);
}
.carta.con-marco.entera.carta--visor { --pla-y0: 58%; }
/* La caja se llena desde arriba y deja el pie a las chapas: un título de una
   línea no se va al centro, donde chocaría con ellas. El relleno de abajo es
   la franja que las chapas ocupan sobre la caja. */
.entera .c-cuerpo { justify-content: flex-start; padding: 4% 5% 6%; }
.carta.con-marco.entera.carta--visor .c-cuerpo { padding: 3% 5% 4%; }

/* La ventana es la carta: mismo radio, y una línea oscura por dentro del
   filete para que el oro no se funda con un cielo claro. */
.entera .c-arte {
  border-radius: inherit; background: transparent; z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
}

/* La foto es APAISADA (3:2) y la carta es vertical (0,73): a sangre con
   `cover` se veía el 49 % del ancho y el animal se quedaba en barriga. Así
   que la foto va ENTERA, como una banda nítida a lo ancho, y detrás la misma
   foto ampliada y desenfocada rellena la carta —lo que hacen los
   reproductores con un vídeo en vertical—. El nombre y la caja caen sobre la
   parte desenfocada, y una ilustración vertical de verdad (3:4, ver
   PROMPTS.md) entra en el mismo hueco casi a sangre sin tocar nada: `contain`
   la deja a ras de alto con un 1 % de aire a los lados.

   La banda va al 30 % del hueco libre, no centrada: deja el nombre entero
   sobre el fondo y termina donde empieza la caja. */
.entera .c-arte .foto {
  object-fit: contain; object-position: 50% 30%;
  filter: saturate(1.06) contrast(1.04) drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
}
.carta.con-marco.entera.carta--visor .c-arte .foto { object-position: 50% 22%; }
.c-fondo { display: none; }
.entera .c-fondo {
  display: block; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background-color: #14100c; background-size: cover; background-position: 50% 40%;
  filter: blur(9px) saturate(.9) brightness(.62);
}

/* El marco dibujado se apaga y el mismo <span> pinta el filete: un degradado
   metálico recortado a un anillo con dos máscaras (la de fuera menos la de
   dentro). `padding` es el grosor, en porcentaje del ancho: 6 px en el visor,
   dos en la mano. */
.entera .c-marco {
  background-image: none;
  background: var(--filete);
  padding: 2.2%; box-sizing: border-box; border-radius: inherit;
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* El velo de arriba: la sombra que deja leer el nombre y el coste sobre
   cualquier cielo. Es un <span> propio y no `.c-arte::after`, porque ese
   pseudoelemento ya lo usa el brillo de las legendarias en la colección. */
.c-velo { display: none; }
.entera .c-velo {
  display: block; position: absolute; left: 0; right: 0; top: 0; height: 26%;
  z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(8, 6, 4, .78) 0%, rgba(8, 6, 4, .42) 50%, transparent 100%);
}

/* La banda ya no tiene fondo dibujado: el nombre va sobre el velo, con una
   sombra que lo despega del arte. */
.entera .c-genero {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6);
}

/* La caja: un cristal oscuro con filo de oro, apoyado en las chapas. El
   `backdrop-filter` es lo que la hace translúcida sin dejar de leerse; sin él
   sería un rectángulo negro, o un texto sobre la foto. */
.entera .c-cuerpo {
  background: linear-gradient(180deg, rgba(14, 10, 6, .62), rgba(14, 10, 6, .88) 40%);
  border-top: 1px solid rgba(244, 217, 155, .6);
  border-radius: 3% / 2%;
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
  backdrop-filter: blur(5px) saturate(1.05);
  box-shadow: 0 -6px 14px -8px rgba(0, 0, 0, .9);
}
/* Las chapas montan sobre la caja: suben un piso, y las cifras con ellas. */
.entera .c-chapa { z-index: 4; }
.entera .c-stats { z-index: 5; }
.entera .c-coste { z-index: 5; }