/* DinoWar — hoja única. Móvil vertical, 360×640 a 430×932.
 *
 * Paleta «resina»: un solo acento cálido sobre tierra oscura. Los nombres
 * antiguos de las variables se conservan —los usa medio fichero— pero apuntan a
 * los valores nuevos, así que el cambio de piel no obliga a renombrar clases. */

/* Inter va vendorizada, no traída de un CDN: el juego no pide nada a terceros.
 * Es la variable, un solo fichero de 48 KB para los pesos 300–600. */
@font-face {
  font-family: 'Inter';
  src: url('assets/fuentes/inter-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #191410;
  --fondo-alto: #1d1710;
  --panel: #1d1610;
  --panel-alto: #241c15;
  --superficie-2: #2a2118;
  --linea: #33291d;
  --borde: #4a3c2a;
  --borde-fuerte: #8a6c38;
  --texto: #f4ece0;
  --texto-2: #d6c8b4;
  --tenue: #a6957e;
  --tenue-2: #8a7a64;
  --apagado: #6e6151;

  --bio: #d9a441;
  --acento-claro: #e8c079;
  --acento-vivo: #f4d99b;
  --trof: #e8c079;
  --vida: #e08a67;
  --peligro: #c8674a;
  --agua: #b2b6ca;

  --propio: #e8c079;
  --propio-tenue: #8a6c38;
  --rival: #c8674a;
  --rival-tenue: #5a3a2c;

  /* Escamas: el motivo del reverso, de las ranuras ocultas y de las pilas. */
  --escamas: radial-gradient(circle at 50% 100%, rgba(217,164,65,.13) 0 5px, transparent 6px),
             radial-gradient(circle at 50% 100%, rgba(217,164,65,.13) 0 5px, transparent 6px);

  --radio: 8px;
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Foco de teclado visible y del color del juego. Sin esto, quien navega con
   teclado no sabe dónde está: el anillo azul del navegador desaparecía sobre
   el fondo oscuro y :focus-visible no estaba definido en ninguna parte. */
:focus-visible { outline: 2px solid var(--bio); outline-offset: 2px; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font: 400 15px/1.4 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* El juego es vertical: en pantallas anchas se queda en su marco, centrado. */
#app {
  position: fixed;
  inset: 0;
  max-width: 430px;
  margin: 0 auto;
  padding: var(--seguro-arriba) var(--seguro-der) var(--seguro-abajo) var(--seguro-izq);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--fondo-alto), var(--fondo) 45%, var(--fondo-alto));
  overflow: hidden;
}

@media (min-width: 470px) {
  body { background: #0b0906; }
  #app {
    top: 12px; bottom: 12px;
    border: 1px solid var(--borde);
    border-radius: 18px;
    box-shadow: 0 20px 70px rgba(0,0,0,.7);
  }
  .pantalla { border-radius: 17px; }
}

.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; }
.oculta { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: none; }

/* ------------------------------------------------------------------ menú */

/* Héroe a sangre y acciones ancladas abajo: el menú deja de ser una lista
   centrada de botones y pasa a ser una portada. */
#menu {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--fondo);
}
.menu-heroe {
  position: absolute; inset: 0; width: 100%; height: 74%;
  object-fit: cover; object-position: 50% 18%;
  /* La portada ya viene cálida y oscura por abajo: se baja poco. Con la
     lámina apaisada de antes hacía falta el 72 % y el sepia. */
  filter: saturate(.92) contrast(1.04) brightness(.86);
}
.menu-velo {
  position: absolute; inset: 0;
  /* Arriba, lo justo para que el título se lea sobre el cielo naranja; el
     animal, entre el 25 % y el 55 %, queda casi limpio; y del 55 % abajo se
     funde con el fondo, que es donde viven los botones. */
  background: linear-gradient(180deg, rgba(25,20,16,.5) 0%, rgba(25,20,16,.08) 26%,
              rgba(25,20,16,.05) 44%, rgba(25,20,16,.84) 60%, var(--fondo) 72%);
}
.menu-caja {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--seguro-arriba) + 48px) 24px calc(var(--seguro-abajo) + 22px);
  text-align: left;
  /* Red de seguridad, no forma de leerlo. El menú cabe a 360×640 y la
     pantalla de jugar también; esto está por si un día no. En un móvil alto no
     cambia nada —sin desbordamiento no hay barra— y en uno corto se puede
     bajar. Se desplaza SÓLO esta caja: la portada va detrás, en su propia
     capa, y se queda quieta, que es lo que la hace una portada y no una
     cabecera. */
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.menu-caja::-webkit-scrollbar { display: none; }
.menu-epigrafe {
  display: flex; align-items: center; gap: 9px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--acento-claro);
}
.menu-epigrafe .filete { width: 18px; height: 1px; background: var(--bio); flex: 0 0 auto; }
.menu-caja h1 {
  margin-top: 8px;
  font-size: clamp(42px, 13vw, 52px); line-height: .94; font-weight: 500;
  letter-spacing: -.035em; color: var(--texto);
}
.menu-caja h1 span { color: var(--acento-claro); }
.menu-lema {
  margin-top: 10px; max-width: 270px;
  font-size: 14px; line-height: 1.5; color: var(--texto-2);
}
.menu-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* Botón perfilado, no macizo: el ámbar sólido gritaba más que el juego. */
.boton-grande {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 52px; padding: 15px 20px;
  background: rgba(217,164,65,.12); border: 1px solid var(--bio); border-radius: var(--radio);
  color: var(--texto); font-size: 17px;
  box-shadow: 0 0 24px rgba(217,164,65,.18);
}
.boton-grande span { color: var(--acento-claro); }
.boton-grande:active { background: rgba(217,164,65,.22); }
/* Deshabilitado: sin brillo y sin acento. Un botón apagado no puede seguir
   pareciendo la acción principal. */
.boton-grande[disabled] {
  opacity: .55; box-shadow: none; background: none;
  border-color: var(--borde); color: var(--tenue-2);
}

.boton-secundario {
  display: block; width: 100%; min-height: 46px; padding: 13px 6px;
  background: rgba(244,236,224,.04); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto-2); font-size: 13px;
}
.boton-secundario:active { border-color: var(--borde-fuerte); color: var(--texto); }

.boton-fantasma {
  flex: 1; min-height: 42px; padding: 12px 6px;
  border: 1px solid transparent; border-radius: var(--radio);
  color: var(--tenue); font-size: 13px;
}
.boton-fantasma:active { border-color: var(--borde); color: var(--texto-2); }

.menu-fila { display: flex; gap: 8px; }
.menu-fila .boton-secundario { flex: 1; }


.menu-monedas {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--tenue);
}
.menu-monedas b { color: var(--texto); font-weight: 500; }
/* Era un punto dorado que no quería decir nada. Ahora es la moneda, y aquí
   es donde se aprende el símbolo: es el único sitio del juego que además
   escribe «dinomonedas» con todas las letras. */
.menu-monedas .punto {
  width: 15px; height: 15px;
  background: url('assets/piel/moneda.webp') center / contain no-repeat;
}
.menu-monedas .sep { width: 1px; height: 12px; background: var(--borde); }
.menu-record {
  text-align: center; color: var(--tenue-2); font-size: 11px; min-height: 14px;
}

/* ---------------------------------------------------- misiones del día
   Tres renglones en la pantalla de JUGAR, detrás de su placa. Estuvieron un
   rato en el menú, debajo de las dinomonedas, y lo dejaron amontonado: el menú
   ya iba justo a 360×640 y tres renglones más lo pasaron por 58 px.

   La barra de progreso se pinta con un hijo al que el JS le escribe el `width`,
   y no con un degradado sobre el fondo: el porcentaje es continuo y cuarenta
   clases de anchura no son una hoja de estilos. */
.menu-misiones { margin-top: 2px; }
.menu-misiones-titulo {
  text-align: center; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue-2); margin-bottom: 5px;
}
.menu-misiones ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.menu-misiones ul + .menu-misiones-titulo { margin-top: 10px; }
/* Un logro se distingue de una misión por el premio, que no es una cifra. */
.mision.logro .mision-premio { color: var(--acento-claro); text-align: right; max-width: 46%; }
.menu-misiones-nota {
  margin-top: 8px; font-size: 11px; color: var(--texto-2); text-align: center; line-height: 1.4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mision-elegir { font-size: 12px; padding: 5px 12px; }

/* Rejilla de tres filas: nombre y cifra, texto y premio, y la barra cruzando
   por debajo como una base. A 360 px el texto de una misión son cinco palabras
   y no cabe en la misma línea que el nombre. */
.mision {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px;
  padding: 5px 9px 6px;
  border: 1px solid rgba(217,164,65,.22); border-radius: var(--radio);
  background: rgba(244,236,224,.03);
}
.mision-nombre {
  font-family: 'Cinzel', Georgia, serif; font-weight: 600; font-size: 11.5px;
  color: var(--acento-claro); letter-spacing: .01em;
}
.mision-cifra {
  font-size: 11px; color: var(--texto-2); font-variant-numeric: tabular-nums;
  justify-self: end; align-self: center;
}
.mision-texto { font-size: 10.5px; color: var(--tenue); line-height: 1.3; }
.mision-premio {
  font-size: 10px; color: var(--tenue-2); justify-self: end; align-self: center;
  font-variant-numeric: tabular-nums;
}
.mision-barra {
  grid-column: 1 / -1; margin-top: 5px;
  height: 3px; border-radius: 2px; background: rgba(244,236,224,.09); overflow: hidden;
}
.mision-barra i {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #b8862e, var(--acento-claro));
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}

/* Cumplida: el filete se enciende y la cifra se cambia por un visto. No se
   tacha ni se apaga — cumplirla es el premio, y una misión hecha que se ve gris
   se lee como una que se ha perdido. */
.mision.hecha { border-color: rgba(217,164,65,.5); background: rgba(217,164,65,.08); }
.mision.hecha .mision-cifra { color: var(--acento-vivo); }

/* El panel del Duelo hereda el del de misiones: misma caja, mismo título. */
#jugar.duelo-abierto .placa-duelo i { filter: brightness(1.25) saturate(1.2); }
#jugar.duelo-abierto .placa-duelo { color: var(--acento-vivo); }
.duelo-liga {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto;
  column-gap: 10px; align-items: center; margin-bottom: 8px;
}
/* El emblema trae su propio aro de metal: no se le pone borde ni se recorta en
   círculo, que las púas del Cretácico y la Extinción sobresalen del aro. La
   sombra va en filter y no en box-shadow para que siga la silueta. */
.duelo-emblema {
  grid-row: 1 / 4; width: 44px; height: 44px; object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
.fin-liga { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 8px; }
.fin-liga img { width: 96px; height: 96px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.75)); }
.fin-liga span { font-size: 13px; letter-spacing: .04em; color: var(--acento-claro); }
/* Subir de liga: el emblema nuevo entra con un golpe de luz. Sin movimiento de
   tamaño en la caja —el final es una columna y empujaría lo de abajo—: sólo
   transform y filter sobre la imagen. */
.fin-liga.sube img { animation: liga-sube .9s cubic-bezier(.2,.9,.3,1.2) backwards; }
@keyframes liga-sube {
  from { transform: scale(.4) rotate(-20deg); filter: brightness(3) drop-shadow(0 0 24px #ffd88a); opacity: 0; }
  60% { filter: brightness(1.6) drop-shadow(0 0 18px #ffd88a); opacity: 1; }
  to { transform: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.75)); }
}
@media (prefers-reduced-motion: reduce) { .fin-liga.sube img { animation: none; } }
.duelo-liga-nombre { font-family: var(--titulo, inherit); font-size: 15px; letter-spacing: .04em; }
.duelo-liga-nota { font-size: 10.5px; color: var(--tenue); }
.duelo-barra { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.duelo-barra i { display: block; height: 100%; background: var(--acento-vivo); transition: width .5s ease; }
.duelo-acciones { display: flex; flex-direction: column; gap: 6px; }
.duelo-acciones .boton-grande { min-height: 40px; }
.duelo-entrar { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--tenue); }
.duelo-entrar span { display: flex; gap: 6px; }
.duelo-entrar input {
  flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.35); color: inherit; font: inherit; letter-spacing: .2em; text-transform: uppercase;
}
.duelo-estado { font-size: 13px; margin: 6px 0 2px; }
.duelo-codigo { font-size: 22px; letter-spacing: .25em; color: var(--acento-vivo); font-family: monospace; }
.duelo-reloj { color: var(--tenue); font-variant-numeric: tabular-nums; }
.duelo-nota { font-size: 10.5px; color: var(--tenue); line-height: 1.35; margin: 4px 0 6px; }
/* El entrenamiento: sale pasado un rato en la cola, entre el reloj y «Dejar de buscar». */
.duelo-entrenar { display: block; width: 100%; margin-top: 6px; }
.duelo-entrenar + .duelo-nota { margin-top: 2px; }
.mision.hecha .mision-barra i { background: linear-gradient(90deg, var(--acento-claro), var(--acento-vivo)); }

@media (prefers-reduced-motion: reduce) { .mision-barra i { transition: none; } }
/* Quién eres. Va debajo del récord y en el mismo tono: es información, no un
   aviso — jugar sin cuenta es una forma legítima de jugar. */
.menu-cuenta {
  text-align: center; color: var(--tenue-2); font-size: 11px; min-height: 14px;
  margin: 2px 0 0;
}
/* Cómo instalar en iPhone, que no tiene ventana de instalación que lanzar. */
.menu-instalar {
  text-align: center; color: var(--acento-claro); font-size: 12px; line-height: 1.35;
  margin: -2px 0 2px;
}

/* Fin de partida: misma portada, otro titular. */
#fin {
  padding: calc(var(--seguro-arriba) + 24px) 24px calc(var(--seguro-abajo) + 24px);
  align-items: center; justify-content: center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(217,164,65,.10), transparent 60%), var(--fondo);
}
#fin .menu-caja {
  position: static; padding: 0; max-width: 380px; text-align: center;
  align-items: stretch; gap: 0;
}
#fin h1 {
  font-size: 46px; line-height: 1; font-weight: 500; letter-spacing: -.03em;
}
.fin-via {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acento-claro); margin-bottom: 10px;
}
#fin .menu-lema { max-width: none; margin: 12px 0 22px; text-align: center; font-size: 14px; }

/* El cara a cara del final (src/ui/fin.js). Sin `.con-arte` se pinta con CSS;
   con ella, con las piezas de assets/piel/fin/. Nada cambia de tamaño una vez
   pintado: lo que se mueve va en transform, opacity y filter. */
#fin { overflow-y: auto; justify-content: safe center; }
#fin.con-arte {
  background: linear-gradient(rgba(12,9,6,.55), rgba(12,9,6,.92)),
    url('assets/piel/fin/fondo_fin.webp') center / cover no-repeat, var(--fondo);
}
.fin-resumen { margin-bottom: 18px; }
.marcador-cinta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 4px; margin-bottom: 20px;
}
.marcador-bando {
  display: flex; align-items: center; gap: 5px; min-width: 0; height: 36px; padding: 0 6px;
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 12px; letter-spacing: .02em;
  background: linear-gradient(90deg, rgba(232,192,121,.22), rgba(232,192,121,.04));
  border-block: 1px solid rgba(232,192,121,.35);
}
.marcador-bando.rival {
  flex-direction: row-reverse;
  background: linear-gradient(270deg, rgba(200,103,74,.28), rgba(200,103,74,.05));
  border-color: rgba(200,103,74,.45);
}
.marcador-bando b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marcador-bando .emblema { width: 24px; height: 24px; flex: 0 0 auto; }
.marcador-vs {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 15px; color: var(--acento-vivo);
  border: 1px solid var(--borde-fuerte); background: radial-gradient(circle, #2a2118, #120d09);
  text-shadow: 0 1px 2px #000;
}
.marcador-cuerpo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding-top: 22px;
}
.marcador-mazo {
  position: relative; justify-self: center; width: min(19vw, 84px); aspect-ratio: 82 / 112;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.7));
}
.marcador-dorso i {
  position: absolute; inset: 0; border-radius: 5px;
  background: #1c1610 var(--dorso, url('assets/piel/dorso.webp')) center / 100% 100% no-repeat;
  filter: var(--dorso-filtro, none);
}
.marcador-mazo.vence .marcador-dorso i:last-child { display: none; }
/* El mazo que cae se rasga por un zigzag, como el sobre al abrirlo. El estado
   final va en la regla y la animación sólo rellena HACIA ATRÁS: con movimiento
   reducido se ve ya roto, y no queda un transform pegado de un fotograma. */
.marcador-mazo.cae { filter: saturate(.45) brightness(.7) drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.marcador-mazo.cae .marcador-dorso i:first-child {
  clip-path: polygon(0 0, 54% 0, 46% 14%, 57% 31%, 44% 48%, 55% 65%, 45% 82%, 52% 100%, 0 100%);
  transform: translateX(-7%) rotate(-5deg);
  animation: rasgar-izq .7s .45s cubic-bezier(.3,.7,.2,1) backwards;
}
.marcador-mazo.cae .marcador-dorso i:last-child {
  clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 45% 82%, 55% 65%, 44% 48%, 57% 31%, 46% 14%);
  transform: translateX(7%) rotate(4deg);
  animation: rasgar-der .7s .45s cubic-bezier(.3,.7,.2,1) backwards;
}
@keyframes rasgar-izq { from { transform: none; } }
@keyframes rasgar-der { from { transform: none; } }
/* Centrado con margen y no con translate: el transform es de la animación. */
.marcador-sello {
  position: absolute; left: 50%; top: -30%; width: 74%; aspect-ratio: 1; margin-left: -37%;
  background: url('assets/piel/ico_trofeo.webp') center / contain no-repeat;
  filter: drop-shadow(0 0 10px rgba(232,192,121,.75));
  animation: sello-cae .5s .35s cubic-bezier(.2,.9,.3,1.3) backwards;
}
@keyframes sello-cae { from { opacity: 0; transform: scale(1.8); } }
.marcador-cifras {
  display: grid; grid-template-columns: 40px auto 40px; align-items: center; justify-items: center;
  gap: 12px 8px;
}
.marcador-cifras small { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.rombo {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 40px; height: 40px;
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 18px; color: var(--texto-2);
}
.rombo::before {
  content: ''; position: absolute; inset: 6px; z-index: -1; transform: rotate(45deg);
  border: 1px solid var(--borde); background: rgba(0,0,0,.4);
}
.rombo.mejor { color: var(--acento-vivo); }
.rombo.mejor::before { border-color: var(--acento-claro); box-shadow: 0 0 10px rgba(232,192,121,.35); }
.marcador-turnos {
  margin-top: 12px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue-2);
}
/* La cinta va en un pseudoelemento y no en el fondo del bando: las cintas de
   la tienda se dibujan apuntando a la izquierda y la del rival tiene que
   reflejarse, y reflejar el bando entero volvería del revés su nombre. La
   cinta roja de siempre del rival ya viene dibujada hacia su lado y no gira. */
.marcador.con-arte .marcador-bando { position: relative; isolation: isolate; background: none; border: 0; }
.marcador.con-arte .marcador-bando::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--cinta-propia, url('assets/piel/fin/cinta_propia.webp')) center / 100% 100% no-repeat;
}
.marcador.con-arte .marcador-bando.rival::before {
  background-image: var(--cinta-rival, url('assets/piel/fin/cinta_rival.webp'));
  transform: var(--cinta-rival-giro, none);
}
.marcador.con-arte .marcador-vs {
  border: 0; background: url('assets/piel/fin/medallon_vs.webp') center / contain no-repeat;
}
.marcador.con-arte .marcador-sello { background-image: url('assets/piel/fin/sello_victoria.webp'); }
.marcador.con-arte .rombo::before {
  inset: 0; transform: none; border: 0; box-shadow: none;
  background: url('assets/piel/fin/rombo.webp') center / contain no-repeat;
}
.marcador.con-arte .rombo.mejor::before { filter: brightness(1.3) drop-shadow(0 0 6px rgba(232,192,121,.6)); }
@media (prefers-reduced-motion: reduce) {
  .marcador-sello, .marcador-mazo.cae .marcador-dorso i { animation: none; }
}

.fin-premio {
  padding: 10px; margin-bottom: 16px; border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte); background: rgba(217,164,65,.08);
  color: var(--acento-claro); font-size: 13px;
}
/* El aviso de desacuerdo. Va en el mismo sitio que el premio y con el mismo
   peso, no como un error rojo de esquina: no es culpa de quien juega y lo que
   tiene que hacer es LEERSE. `:empty` lo quita del flujo, que es lo normal. */
.fin-aviso:empty { display: none; }
.fin-aviso {
  padding: 10px; margin: -8px 0 16px; border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte); background: rgba(190,90,60,.1);
  color: var(--texto-2); font-size: 12.5px; line-height: 1.45;
}

/* Una carta PRESTADA del torneo: se ve que no es tuya sin que parezca rota.
   Un filete y el contador en el tono del latón, no un velo encima — atenuarla
   diría «no puedes ponerla» y es justo lo contrario. */
.mazo-celda.prestada .mazo-arte { box-shadow: 0 0 0 1px var(--acento) inset; border-radius: 6px; }
.mazo-celda.prestada .mazo-cuenta { color: var(--acento-claro); }
.mazo-celda.prestada .mazo-arte::after {
  content: 'prestada'; position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 8px; letter-spacing: .08em; text-transform: uppercase; text-align: center;
  padding: 1px 0; color: var(--acento-claro); background: rgba(16, 13, 10, .82);
}

#fin .boton-secundario { margin-top: 9px; }

/* La elección del mazo inicial (src/ui/iniciales.js). En el móvil, tres placas
   apaisadas una debajo de otra; con sitio, tres columnas altas como las de un
   cartel. El retrato va detrás, fundido hacia el texto. */
#iniciales {
  padding: calc(var(--seguro-arriba) + 20px) 16px calc(var(--seguro-abajo) + 20px);
  overflow-y: auto; align-items: center; justify-content: safe center;
  background: radial-gradient(120% 70% at 50% 0%, rgba(217,164,65,.10), transparent 60%), var(--fondo);
}
/* Contenedor y no media query: el juego se pinta en una columna del ancho de
   un móvil en mitad de la pantalla, y con `@media (min-width: 720px)` la
   ventana ancha pasaba a tres columnas de 80 px dentro de esa columna. Lo que
   decide es el sitio que tiene la caja, no el que tiene el navegador. */
.ini-caja {
  container-type: inline-size;
  width: 100%; max-width: 980px; display: flex; flex-direction: column; align-items: center;
  gap: 14px; text-align: center;
}
.ini-titulo {
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: clamp(24px, 7vw, 40px);
  font-weight: 700; color: var(--acento-claro);
}
.ini-lema { color: var(--texto-2); font-size: 13px; max-width: 46ch; }
.ini-lista { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ini-mazo {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  min-height: 124px; padding: 12px 14px; text-align: left; color: var(--texto); font: inherit; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--panel);
  transition: border-color .15s, box-shadow .15s;
}
.ini-retrato {
  position: absolute; inset: 0; z-index: -1; opacity: .42; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
  mask-image: linear-gradient(90deg, transparent 15%, #000 75%);
}
.ini-retrato > img, .ini-retrato > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.ini-mazo .emblema { grid-row: 1 / 3; width: 46px; height: 46px; }
.ini-mazo b {
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 21px; font-weight: 700;
  align-self: end; text-shadow: 0 1px 3px #000;
}
.ini-mazo small {
  align-self: start; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-claro);
}
.ini-texto {
  grid-column: 1 / 3; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--texto-2);
  text-shadow: 0 1px 2px #000;
}
.ini-mazo[aria-pressed="true"] {
  border-color: var(--acento-claro);
  box-shadow: 0 0 0 1px var(--acento-claro), 0 0 18px rgba(232,192,121,.25);
}
.ini-aviso { min-height: 16px; font-size: 12px; color: var(--peligro); }
.ini-empezar { width: 100%; max-width: 360px; }
@container (min-width: 720px) {
  .ini-lista { grid-template-columns: repeat(3, 1fr); }
  .ini-mazo {
    min-height: 340px; grid-template-columns: 1fr; justify-items: center; align-content: end;
    text-align: center; padding: 18px 16px;
  }
  .ini-mazo .emblema { grid-row: auto; width: 56px; height: 56px; margin-bottom: 6px; }
  .ini-mazo b, .ini-mazo small { align-self: auto; }
  .ini-texto { grid-column: auto; }
  .ini-retrato {
    -webkit-mask-image: linear-gradient(transparent 5%, #000 45%, transparent 100%);
    mask-image: linear-gradient(transparent 5%, #000 45%, transparent 100%);
  }
}

/* ------------------------------------------------- colección, sobres, mazos */

.meta { background: var(--fondo); }
.meta-barra {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: calc(var(--seguro-arriba) + 14px) 16px 14px;
  border-bottom: 1px solid var(--linea);
  background: rgba(15,11,8,.55);
}
.meta-barra h2 { flex: 1; font-size: 19px; font-weight: 500; letter-spacing: -.01em; text-align: center; }
.meta-volver { color: var(--tenue); font-size: 14px; padding: 6px 4px; }
.meta-volver:active { color: var(--texto); }
/* LAS TRES COSAS CONTABLES, con su icono.
   Hasta el 20-09-2026 eran caracteres Unicode sueltos —`◈` aquí, `✦` en las
   esquirlas y `⛁` en el torneo—, y el del torneo no existe en ninguna de las
   tipografías del juego: salía un rectángulo vacío. Tres símbolos para dos
   monedas y un recurso, y uno invisible.
   Van en `em` y no en píxeles a propósito: esto se pinta a 13 px en la barra
   de la colección y a 17 en el botón del torneo, así que un tamaño fijo se
   vería enano en uno de los dos. Con `1em` crece con el número al que
   acompaña, que es como se comporta un glifo — que es lo que sustituye. */
.ico {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.14em;
  background: center / contain no-repeat;
}
/* Y LA TRAMPA: `.boton-grande` es un flex con `space-between` —lleva la
   flecha a la derecha— así que un `.ico` suelto dentro se convierte en un
   ítem más y se va al otro extremo, lejos del número al que acompaña. Con el
   carácter Unicode no pasaba: un nodo de texto no es un ítem. Por eso los dos
   botones que llevan icono envuelven su rótulo en un `<span>`. Quien añada un
   tercero tiene que hacer lo mismo. */

/* El punto del menú era un círculo dorado con un fulgor que latía en
   `box-shadow`. Ahora es la moneda, y un box-shadow detrás de un PNG dibuja
   un rectángulo: el fulgor pasa a `drop-shadow`, que sigue el alfa. */
.ico-moneda { background-image: url('assets/piel/moneda.webp'); }
.ico-esquirla { background-image: url('assets/piel/esquirla.webp'); }
.ico-fosil { background-image: url('assets/piel/fosil.webp'); }
.ico-fragmento { background-image: url('assets/piel/fragmento.webp'); }

.meta-moneda { font-size: 13px; color: var(--tenue); min-width: 54px; text-align: right; }
.meta-moneda b { color: var(--bio); font-size: 15px; }
.meta-moneda::after {
  content: ''; display: inline-block; width: 1.15em; height: 1.15em;
  margin-left: .28em; vertical-align: -.22em;
  background: url('assets/piel/moneda.webp') center / contain no-repeat;
}

.meta-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; padding: 10px 12px 14px;
}
.meta-pie {
  flex: 0 0 auto; padding: 12px 16px calc(var(--seguro-abajo) + 14px);
  border-top: 1px solid var(--linea); background: rgba(15,11,8,.6);
}
.meta-nota { color: var(--tenue); font-size: 12px; line-height: 1.45; margin-bottom: 8px; }
.meta-nota.mal { color: var(--peligro); }


.meta-filtros {
  flex: 0 0 auto; display: flex; gap: 6px; padding: 9px 12px 0; flex-wrap: wrap;
}
.chip {
  padding: 6px 13px; border: 1px solid var(--borde); border-radius: 20px;
  font-size: 12px; color: var(--texto-2);
}
.chip:active { border-color: var(--borde-fuerte); }
/* El filtro activo va macizo: es el único ámbar sólido de la pantalla. */
.chip.on { background: var(--bio); border-color: var(--bio); color: #191410; }

/* Rejilla de colección: la misma carta compacta del tablero, con el contador
   de copias encima. */
/* grid-auto-rows explícito: con filas "auto" dentro de un contenedor de altura
   definida, Chrome las reparte y la carta se aplasta a la altura del texto. */
.col-rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-content: start; grid-auto-rows: max-content;
}
/* La carta con su marco dibujado y, debajo, un pie de texto con lo que el
   marco abrevia. La caja de alrededor ya no dibuja nada: el borde y la rareza
   los trae el marco. */
.col-carta {
  position: relative;
  /* Flex en columna, no bloque: un <button> no crece con su contenido y la
     rejilla lo aplasta a la altura de una línea. */
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  border-radius: 9px; text-align: left; padding: 0;
  /* `min-width: 0`: el pie lleva `white-space: nowrap`, y sin esto su anchura
     mínima estira la columna y las tres dejan de medir lo mismo. */
  min-width: 0;
}
.col-carta:active .carta { filter: brightness(1.12); }
.col-carta .carta--col { width: 100%; aspect-ratio: 82 / 112; border-radius: 6px; }

/* Altura en píxeles, no aspect-ratio: dentro de una rejilla, un aspect-ratio
   sobre anchura indefinida aporta cero a la altura intrínseca y la fila se
   colapsa a la altura del texto. El recorte lo hace object-fit. */
.col-arte {
  flex: 0 0 auto; height: 96px; background: #14100c;
  display: flex; align-items: center; justify-content: center;
}
.col-arte svg, .col-arte .foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-arte .foto { filter: saturate(.9) brightness(.85); }

.col-copias {
  display: inline-block; padding: 1px 5px; margin-right: 2px; border-radius: 3px; font-size: 9px;
  background: rgba(20,15,11,.85); box-shadow: 0 0 0 1px var(--borde); color: var(--texto-2);
}
/* Ámbar macizo = te sobran copias, y eso es justo lo que se puede fundir. */
.col-copias.sobra { background: var(--bio); box-shadow: none; color: #191410; }

.col-pie { flex: 1 1 auto; min-width: 0; padding: 0 2px; display: flex; flex-direction: column; gap: 3px; }
.col-nombre {
  font-size: 11px; line-height: 1.15; color: var(--texto);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.col-carta.dino .col-nombre { font-style: italic; }
.col-meta { font-size: 9px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Crear la copia que falta con esquirlas (src/data/crafteo.js). Un botón
   pequeño bajo el pie; el primer toque pregunta, el segundo crea. */
.col-crear {
  align-self: flex-start; margin-top: 2px; padding: 3px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 600; line-height: 1.2;
  border: 1px solid var(--borde-fuerte); background: rgba(217,164,65,.08); color: var(--acento-claro);
}
.col-crear.si { background: var(--bio); color: #17120e; border-color: var(--bio); }
.col-crear:disabled { opacity: .4; }
.col-crear:not(:disabled):active { transform: scale(.96); }

/* Una especie que no tienes es un hueco, no una carta apagada. */
.col-carta.ninguna { background: #1a1410; box-shadow: 0 0 0 1px #2e2519; overflow: hidden; }
.col-hueco {
  height: 96px; display: grid; place-items: center;
  color: #3a2f22; font-size: 20px;
}
.col-carta.ninguna .col-nombre { color: var(--apagado); }

.col-rar { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.rar-COMUN { color: var(--tenue); }
.rar-RARO { color: var(--texto-2); }
.rar-EPICO { color: var(--acento-claro); }
.rar-LEGENDARIO { color: var(--bio); }

/* Sobres */
.sobre-cuerpo { display: flex; flex-direction: column; }
.sobre-tirada {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
  min-height: 118px; align-content: start; grid-auto-rows: max-content; margin-bottom: 12px;
  /* `flex: none`: es hijo de una columna flex con altura fija, y sin esto el
     flex la encogía para hacer sitio al aviso y a la tabla de probabilidades.
     Con las cartas de antes cabía de sobra; con el marco, dos filas de cartas
     desbordaban por debajo y se pintaban encima de la tabla. */
  flex: none;
}
.sobre-vacio {
  grid-column: 1 / -1; color: var(--tenue); font-size: 13px; text-align: center;
  padding: 34px 10px; border: 1px dashed var(--borde); border-radius: var(--radio);
}
.sobre-odds { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--tenue); }
.sobre-odds th { text-align: left; font-weight: 400; padding: 4px 0; }
.sobre-odds td { text-align: right; padding: 4px 0; }
.sobre-odds tr + tr { border-top: 1px solid var(--superficie-2); }
.sobre-odds td:last-child { width: 5.2em; color: var(--tenue-2); }
/* Una rareza que ya tienes entera deja de ser una probabilidad y pasa a ser
   material de fusión: se apaga para que se vea de un vistazo qué falta. */
.sobre-odds tr.completa { opacity: .42; }
.sobre-odds tr.completa th::after { content: ' · completa'; color: var(--tenue-2); }
.sobre-nota { display: inline-block; margin-top: 8px; color: var(--tenue-2); font-size: 12px; }

/* ================================================================= mazos
   La única pantalla de fuera de la partida con piel: placas de piedra y latón
   por mazo, el sello de lacre en el que está en uso, los medallones de clado
   como filtros y la cabaña de expedición de fondo. Las piezas salen de
   `tools/mazos.py`, y los números de la ventana de la portada están MEDIDOS
   por esa herramienta sobre el PNG, no estimados. */

/* El fondo detrás de todo y las tres franjas por encima. */
#mazos .meta-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: 50% 30%;
  filter: brightness(.5) saturate(.85);
}
#mazos .meta-barra, #mazos .meta-cuerpo, #mazos .meta-pie { position: relative; z-index: 1; }
#mazos .meta-barra { background: rgba(15,11,8,.72); }
#mazos .meta-pie { background: rgba(15,11,8,.82); }

/* --- la placa ------------------------------------------------------------ */
.mazo { margin-bottom: 12px; }
.mazo-placa {
  position: relative; width: 100%; aspect-ratio: 2508 / 557;
  background: url('assets/piel/mazos/placa_mazo.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.55));
}
/* La ventana de la portada: dónde el PNG dejó el hueco. Medido. */
.mazo-ventana {
  position: absolute; left: 4.55%; top: 12.57%; width: 10.25%; height: 60.86%;
  background: #14100c; overflow: hidden; display: grid; place-items: center;
}
.mazo-ventana svg, .mazo-ventana .foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.mazo-ventana .foto { filter: saturate(.95) brightness(.9); }
.mazo-vacia { color: rgba(217,164,65,.35); font-size: 14px; }
.mazo-banda {
  position: absolute; left: 17.5%; right: 4.5%; top: 12%; bottom: 12%;
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0;
}
.mazo-nom {
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: #e9d9b5; text-shadow: 0 1px 2px rgba(0,0,0,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mazo-sub {
  font-size: 10.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 4px;
}
.mazo-sub b { font-weight: 500; color: var(--acento-claro); }
.mazo-sub b.mal, .mazo-cuenta.mal { color: var(--peligro); }
.sep { color: var(--tenue-2); }
/* El sello de lacre, medio salido de la esquina, como puesto encima. */
.mazo-sello {
  position: absolute; right: 1.5%; top: -18%; width: 13%; aspect-ratio: 1;
  background: url('assets/piel/mazos/sello_en_uso.webp') center / contain no-repeat;
  transform: rotate(-9deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.mazo-acciones {
  display: flex; gap: 4px; justify-content: flex-end; align-items: center; padding: 2px 2px 0;
  flex-wrap: wrap;
}
.mazo-acciones .accion {
  font-size: 12px; color: var(--acento-claro); padding: 7px 9px; border-radius: 6px;
  border: 1px solid transparent;
}
.mazo-acciones .accion:active { border-color: var(--borde-fuerte); }
.mazo-acciones .accion[disabled] { color: var(--tenue-2); }
.mazo-acciones .accion.mal { color: var(--peligro); border-color: rgba(200,80,60,.5); }
.mazo-pregunta { flex: 1; font-size: 12px; color: var(--texto-2); }

/* --- los medallones -------------------------------------------------------- */
.emblema {
  display: inline-block; width: 18px; height: 18px; vertical-align: middle;
  background: var(--emblema) center / contain no-repeat; flex: 0 0 auto;
}
.emb-clado_teropodo { --emblema: url('assets/piel/mazos/clado_teropodo.webp'); }
.emb-clado_sauropodo { --emblema: url('assets/piel/mazos/clado_sauropodo.webp'); }
.emb-clado_tireoforo { --emblema: url('assets/piel/mazos/clado_tireoforo.webp'); }
.emb-clado_ornitopodo { --emblema: url('assets/piel/mazos/clado_ornitopodo.webp'); }
.emb-clado_marginocefalo { --emblema: url('assets/piel/mazos/clado_marginocefalo.webp'); }
.emb-clado_pterosaurio { --emblema: url('assets/piel/mazos/clado_pterosaurio.webp'); }
.emb-clado_marino { --emblema: url('assets/piel/mazos/clado_marino.webp'); }
.emb-tipo_clima { --emblema: url('assets/piel/mazos/tipo_clima.webp'); }
.emb-tipo_evento { --emblema: url('assets/piel/mazos/tipo_evento.webp'); }
.emb-tipo_recurso { --emblema: url('assets/piel/mazos/tipo_recurso.webp'); }

/* --- el editor -------------------------------------------------------------- */
.mazo-cabecera { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.mazo-ventana.grande {
  position: relative; width: 54px; height: 74px; flex: 0 0 auto; border-radius: 5px;
  box-shadow: 0 0 0 1px var(--borde-fuerte), 0 3px 6px rgba(0,0,0,.5);
}
/* La ventana de la portada ES el botón de cambiarla: es donde se mira, y la
   cabecera ya lleva nombre, marcador y resumen — un cuarto botón ahí no lo
   habría visto nadie. La marca de la esquina es la seña de que se toca. */
.mazo-ventana.grande { padding: 0; border: 0; cursor: pointer; }
.mazo-ventana.grande[disabled] { cursor: default; }
.mazo-ventana.grande:not([disabled]):active { transform: scale(.97); }
.mazo-ventana.grande[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--bio), 0 3px 6px rgba(0,0,0,.5); }
.mazo-cambiar {
  position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 4px;
  background: rgba(20,16,12,.86); box-shadow: inset 0 0 0 1px var(--borde-fuerte);
}
/* Dos triángulos enfrentados: cambiar de cara, sin pedirle un icono a nadie. */
.mazo-cambiar::before, .mazo-cambiar::after {
  content: ''; position: absolute; top: 50%; width: 0; height: 0;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  margin-top: -3px;
}
.mazo-cambiar::before { left: 2px; border-right: 4px solid var(--acento-claro); }
.mazo-cambiar::after { right: 2px; border-left: 4px solid var(--acento-claro); }

/* Las caras entre las que elegir. Se desplaza a lo ancho: un mazo son ~19
   cartas distintas y en vertical se comería la rejilla. */
.mazo-caras {
  display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 8px 2px;
  margin-bottom: 8px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  scrollbar-width: thin;
}
.mazo-caras .chip { flex: 0 0 auto; }
.mazo-cara {
  flex: 0 0 auto; width: 40px; height: 54px; border-radius: 4px; overflow: hidden;
  background: #14100c; padding: 0; display: grid; place-items: center;
  box-shadow: 0 0 0 1px var(--borde-fuerte);
}
.mazo-cara svg, .mazo-cara .foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.mazo-cara.on { box-shadow: 0 0 0 2px var(--bio), 0 0 10px rgba(217,164,65,.35); }
.mazo-cara:active { transform: scale(.94); }

.mazo-cabecera-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mazo-nombre {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 14px;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .02em;
  background: rgba(15,11,8,.6); color: #e9d9b5;
  border: 1px solid var(--borde); border-radius: 6px;
  -webkit-user-select: text; user-select: text;
}
.mazo-marcador { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mazo-marcador b { font-size: 18px; font-weight: 500; color: var(--peligro); }
.mazo-marcador b.bien { color: var(--acento-claro); }
.mazo-marcador span { color: var(--tenue); }
.mazo-barra {
  flex: 1; height: 6px; border-radius: 3px; background: rgba(244,236,224,.09); overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.mazo-barra i { display: block; height: 100%; background: var(--borde-fuerte); transition: width .25s; }
.mazo-barra i.bien { background: linear-gradient(90deg, #a4761f, var(--bio)); }
.mazo-resumen { font-size: 10.5px; color: var(--tenue); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* La curva es un filtro: cada barra es un botón. */
.mazo-curva {
  display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-bottom: 10px;
  padding: 6px 6px 4px; border-radius: var(--radio);
  background: rgba(15,11,8,.55); border: 1px solid var(--linea);
}
.mazo-curva .cb {
  flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%;
  padding: 0; border: 0; border-radius: 4px; background: none; position: relative;
}
.mazo-curva .cb i {
  width: 100%; margin-top: auto; min-height: 2px; border-radius: 2px; background: #3a2f22;
  transition: height .25s;
}
.mazo-curva .cb i.n1 { background: #6b552d; }
.mazo-curva .cb i.n2 { background: #8a6c38; }
.mazo-curva .cb i.n3 { background: var(--bio); }
.mazo-curva .cb em { font-style: normal; font-size: 9px; color: var(--tenue-2); margin-top: 3px; }
.mazo-curva .cb small { position: absolute; top: 0; font-size: 8px; color: var(--tenue); }
.mazo-curva .cb.on { background: rgba(217,164,65,.14); box-shadow: 0 0 0 1px var(--bio); }
.mazo-curva .cb.on em { color: var(--acento-claro); }

.mazo-pestanas { display: flex; gap: 6px; margin-bottom: 8px; }
.mazo-pestanas .chip { flex: 1; font-size: 11.5px; padding: 7px 4px; }

.mazo-filtros { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.mazo-busca {
  flex: 0 0 34%; min-width: 0; padding: 7px 9px; font: inherit; font-size: 12px;
  background: rgba(15,11,8,.6); color: var(--texto); border: 1px solid var(--borde); border-radius: 6px;
  -webkit-user-select: text; user-select: text;
}
/* Los diez medallones en una fila que se desliza: no caben a 360 px y
   encogerlos los deja ilegibles. */
.mazo-emblemas {
  flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mazo-emblemas::-webkit-scrollbar { display: none; }
.mazo-emblemas button {
  flex: 0 0 auto; width: 32px; height: 32px; padding: 3px; border-radius: 50%;
  border: 1px solid transparent; opacity: .55; transition: opacity .12s, transform .12s;
}
.mazo-emblemas button .emblema { width: 100%; height: 100%; }
.mazo-emblemas button.on { opacity: 1; border-color: var(--bio); transform: scale(1.08); box-shadow: 0 0 8px rgba(217,164,65,.45); }
.mazo-emblemas button:active { opacity: 1; }
.mazo-rarezas { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.mazo-rarezas .chip { font-size: 10.5px; padding: 4px 9px; }
.mazo-rarezas .chip.quitar { color: var(--peligro); border-color: rgba(200,80,60,.4); }

/* Las celdas: la carta de la colección con su contador y su paso. */
.mazo-rejilla { gap: 8px 6px; }
.mazo-celda { gap: 4px; }
/* Una pulsación larga sobre la carta abre su ficha, así que el navegador no
   puede quedarse el gesto: sin esto Android saca su menú de imagen y el
   selector de texto encima de la carta a los 400 ms justos. */
.mazo-arte {
  position: relative; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.mazo-arte:active .carta { filter: brightness(1.15); }
.mazo-celda:not(.puesta) .mazo-arte .carta { filter: saturate(.7) brightness(.78); }
.mazo-celda.llena .mazo-arte .carta { filter: none; }
.mazo-celda.puesta .mazo-arte .carta { box-shadow: 0 0 0 1px var(--bio), 0 0 10px rgba(217,164,65,.25); }
.mazo-celda.mal .mazo-arte .carta { box-shadow: 0 0 0 2px var(--peligro), 0 0 10px rgba(200,80,60,.5); }
/* El número de copias sobre la carta, en la esquina de abajo. */
.mazo-n {
  position: absolute; right: -3px; bottom: -3px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; display: grid; place-items: center;
  background: var(--bio); color: #191410; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 2px #17120e, 0 2px 4px rgba(0,0,0,.6);
}
.mazo-celda.mal .mazo-n { background: var(--peligro); color: #fff; }
.mazo-paso { display: flex; align-items: center; justify-content: center; gap: 4px; }
.mazo-paso button {
  width: 30px; height: 28px; border: 1px solid var(--borde); border-radius: 6px;
  font-size: 16px; line-height: 1; color: var(--texto-2); background: rgba(15,11,8,.5);
}
.mazo-paso button:active:not([disabled]) { border-color: var(--borde-fuerte); }
.mazo-paso button[disabled] { opacity: .3; }
.mazo-cuenta { min-width: 26px; text-align: center; font-size: 10.5px; color: var(--texto-2); }
.mazo-celda .col-nombre { text-align: center; font-size: 10px; cursor: pointer; }
.mazo-celda.mal .col-nombre { color: var(--peligro); }
/* La «i» del nombre dice que ahí se lee la carta: el toque corto sobre la
   carta mete una copia, y sin seña nadie busca por dónde leerla. */
.col-info {
  display: inline-grid; place-items: center; width: 12px; height: 12px;
  margin-left: 3px; vertical-align: -2px; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--borde); color: var(--texto-2);
  font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;
}
.mazo-celda .col-nombre:active .col-info { color: var(--bio); box-shadow: 0 0 0 1px var(--bio); }

.meta-pie .fila { display: flex; gap: 8px; margin-bottom: 9px; }
.meta-pie .fila .boton-secundario { flex: 1; font-size: 12px; padding: 11px 4px; min-height: 42px; }
.meta-pie .fila .boton-grande, .meta-pie .fila .boton-secundario { margin-top: 0; }

/* ------------------------------------------------------------ animaciones */

/* Aterrizaje: al comprometer una carta boca abajo, cae con un golpe seco. */
@keyframes aterrizar {
  0%   { transform: translateY(-16px) scale(1.08); opacity: .25; }
  70%  { transform: translateY(2px) scale(.99); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.carta--ranura.aterriza { animation: aterrizar .26s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .carta--ranura.entra, .carta--ranura.aterriza { animation: none; }
  .sobre-carta, .sobre-paquete { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- sobre cerrado */

.sobre-tirada.cerrado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 190px;
}
/* El sobre cerrado es una pieza dibujada, keyeada: la bolsa con sus sellos en
   zigzag arriba y abajo y el medallón de la huella. El halo va en `filter` y
   no en `box-shadow` porque la silueta no es un rectángulo. */
.sobre-paquete {
  position: relative; width: 132px; height: 198px;
  background: url('assets/piel/sobre.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 18px rgba(217,164,65,.28)) drop-shadow(0 8px 10px rgba(0,0,0,.5));
  animation: respirar 2.8s ease-in-out infinite;
}
@keyframes respirar {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}
/* Un brillo de lámina que cruza el sobre cada tanto: es lo que dice que es
   metal y no cartón, y lo único que se mueve además de la respiración. */
.sobre-solapa {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,240,200,.28) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: brillo-legendario 5s ease-in-out infinite;
  mask: url('assets/piel/sobre.webp') center / contain no-repeat;
  -webkit-mask: url('assets/piel/sobre.webp') center / contain no-repeat;
}
.sobre-sello { display: none; }
.sobre-tirada.cerrado .sobre-vacio { border: 0; padding: 0; }

/* ---------------------------------------------------------- sobre abierto */

/* Tres columnas, no cinco: a cinco por fila cada carta se queda en 62 px y su
   ventana de arte salía en vertical (62x88), que en una ilustración apaisada
   enseña una tira del bicho y poco más. A tres caben 105 px y la ventana ya es
   del mismo formato que la de la colección. */
.sobre-tirada.abierto {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  align-items: start; padding-top: 10px;
}

.sobre-carta {
  perspective: 620px; background: none; border: 0; overflow: visible;
  animation: repartir .3s ease-out var(--retardo, 0ms) both;
}
@keyframes repartir {
  from { transform: translateY(-22px) scale(.8); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.sobre-giro {
  position: relative; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3,.8,.3,1.05);
  transition-delay: calc(var(--retardo, 0ms) + 260ms);
  transform: rotateY(180deg);
}
.sobre-carta.gira .sobre-giro { transform: none; }

.sobre-dorso, .sobre-frente {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--borde); border-radius: 7px; overflow: hidden;
  background: linear-gradient(180deg, var(--superficie-2), var(--panel-alto) 40%, var(--panel));
}
.sobre-dorso {
  position: absolute; inset: 0; transform: rotateY(180deg);
  border: 0; border-radius: 4px;
  background: #1c1610 var(--dorso, url('assets/piel/dorso.webp')) center / 100% 100% no-repeat;
  filter: var(--dorso-filtro, none);
}
/* La cara es la carta con su marco, y el nombre entero debajo a cuerpo de
   pie: a 62 px la banda sólo puede con el género. */
.sobre-frente { border: 0; background: none; border-radius: 0; overflow: visible; }
.sobre-frente .carta--sobre { width: 100%; aspect-ratio: 82 / 112; border-radius: 4px; }
.sobre-frente .col-pie { padding: 3px 1px 0; gap: 1px; }
.sobre-frente .col-nombre { font-size: 8px; height: 2.3em; }
.sobre-frente .col-rar { font-size: 8px; }

/* El brillo se reserva a lo que de verdad es raro: si todo destella, nada lo es. */
/* La rareza se lee en el borde, en la misma escala ámbar del resto: común
   apagado, rara y épica firmes, legendaria encendida. */
.sobre-carta.rareza-LEGENDARIO.gira .carta {
  animation: destello 1s ease-out calc(var(--retardo, 0ms) + 700ms) 2;
}
@keyframes destello {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,164,65,0); }
  40%      { box-shadow: 0 0 26px 2px rgba(217,164,65,.5); }
}
.sobre-carta.nueva .carta { box-shadow: 0 0 0 1px var(--bio); }

/* La mejor de la tirada sale la última, más grande y elevada: abrir un sobre
   tiene que tener un momento, y ese es. */
.sobre-carta.mejor { z-index: 2; }
.sobre-carta.mejor .sobre-giro { transform: rotateY(180deg) scale(1.16) translateY(-8px); }
.sobre-carta.mejor.gira .sobre-giro { transform: scale(1.16) translateY(-8px); }
.sobre-carta.mejor .carta { box-shadow: 0 0 26px rgba(217,164,65,.3); }

/* Qué es esta carta para tu colección. Sin esto, la cuarta copia de algo que
   ya no cabe se ve igual que la primera. */
.sobre-estado {
  display: block; margin-top: 5px; font-size: 8.5px; line-height: 1.2;
  color: var(--tenue-2); text-align: center;
}
.sobre-estado.nueva { color: var(--acento-claro); }
.sobre-estado.sobra { color: var(--peligro); }
.sobre-carta.mejor .sobre-estado { margin-top: 10px; }


/* ------------------------------------------------------- sobre: ceremonia
   Dos gestos: rasgar la bolsa y deslizar cada carta. `apertura.js` pone las
   clases y las variables; aquí sólo se dice qué hace cada una. Ninguna cambia
   el tamaño de nada: todo es `transform`, `clip-path` y `opacity`. */
.sobre-tirada.ceremonia { display: block; min-height: 0; }
/* Mientras dura, el aviso y la tabla no pintan nada: la ceremonia es lo único. */
.sobre-tirada.ceremonia ~ * { visibility: hidden; }

.apertura {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 8px 0 4px; touch-action: none; user-select: none; -webkit-user-select: none;
}
/* La escena tiene la proporción de la CARTA, 82/112, no la del PNG del sobre
   (2/3). Cada carta de la pila ocupa la escena entera y su dorso también, así
   que con la escena a 2/3 la carta —que es 82/112— dejaba libre el 9 % de
   abajo, y por ahí asomaba el dorso de la siguiente como una banda de latón
   bajo la carta descubierta. El sobre se estira ese mismo 9 %, igual que los
   marcos y el dorso, que son 2/3 y se pintan a 82/112 en todo el juego. */
.apertura-escena { position: relative; width: min(250px, 68vw); aspect-ratio: 82 / 112; }

/* El sobre son dos capas con la misma imagen, recortadas por el mismo zigzag:
   la tira de arriba y el cuerpo. `--p` es cuánto se ha rasgado, de 0 a 1, y
   levanta la tira desde su esquina izquierda como si se despegara. */
.apertura-sobre { position: absolute; inset: 0; cursor: grab; }
.apertura-cuerpo, .apertura-tira {
  position: absolute; inset: 0;
  background: url('assets/piel/sobre.webp') center / 100% 100% no-repeat;
}
.apertura-cuerpo { filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.apertura-tira {
  transform-origin: 0% 100%;
  transform: translate(calc(var(--p) * -5%), calc(var(--p) * -8%)) rotate(calc(var(--p) * -6deg));
  filter: drop-shadow(0 calc(var(--p) * 8px) calc(var(--p) * 10px) rgba(0,0,0,.6));
}
.apertura-sobre.suelto .apertura-tira { transition: transform .28s ease-out, filter .28s ease-out; }
.apertura-sobre.rasgado .apertura-tira { animation: tira-vuela .55s ease-in forwards; }
.apertura-sobre.rasgado .apertura-cuerpo { animation: sobre-cae .5s ease-in .12s forwards; }
@keyframes tira-vuela {
  to { transform: translate(-28%, -150%) rotate(-30deg); opacity: 0; }
}
@keyframes sobre-cae {
  to { transform: translateY(45%) scale(.9); opacity: 0; }
}

/* La pila: cinco cartas, la primera encima. `--i` es el puesto contando desde
   arriba, y da el escalón y el encogimiento; `--dx`/`--dy`/`--giro` los pone
   el dedo mientras arrastra la de arriba. */
.apertura-pila { position: absolute; inset: 0; display: none; }

/* El vídeo de una legendaria: una capa sobre toda la pantalla, el plano
   apaisado en el centro —la misma proporción 3:2 de la ilustración— y el
   binomial debajo. Va en `fixed` para no depender de quién la contiene, y
   cualquier toque la salta: diez segundos delante de una carta son muchos si
   ya se ha visto. */
.apertura-video {
  position: fixed; inset: 0; z-index: 60; overflow: hidden;
  background: #0b0906;
  opacity: 0; transition: opacity .5s ease; cursor: pointer;
}
.apertura-video.visible { opacity: 1; }
/* El plano llena la pantalla entera, también en vertical: el animal va
   centrado y lo que se recorta son los lados. Enseñado como banda apaisada
   dejaba dos tercios del móvil en negro. Entra en tres tiempos —el fondo, el
   plano acercándose, y el nombre— para que no aparezca de golpe encima de la
   carta que acaba de irse. */
.apertura-video-marco {
  position: absolute; inset: 0; background: #000;
  opacity: 0; transform: scale(1.1);
  transition: opacity .8s ease .25s, transform 1.6s cubic-bezier(.2, .7, .2, 1) .25s;
}
.apertura-video.visible .apertura-video-marco { opacity: 1; transform: none; }
.apertura-video.cierra .apertura-video-marco { transition-delay: 0s; transition-duration: .45s; opacity: 0; transform: scale(1.04); }
.apertura-video-marco video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* En vertical el plano apaisado se ve ENTERO como banda —nada del animal se
   recorta— y detrás, el mismo vídeo ampliado, desenfocado y oscuro rellena
   arriba y abajo. El fondo se escala más de la cuenta para que el desenfoque
   no deje un borde claro en los cantos. En apaisado el plano cubre y el fondo
   no existe: apertura.js no lo crea. */
.apertura-video-marco .apertura-video-fondo { position: absolute; inset: 0; z-index: 0; filter: blur(26px) brightness(.42) saturate(1.15); transform: scale(1.18); }
.apertura-video-marco .apertura-video-principal { position: relative; z-index: 1; }
/* Con la misma especificidad que la regla general de arriba, o `cover` gana. */
@media (orientation: portrait) {
  .apertura-video-marco .apertura-video-principal { object-fit: contain; }
}
/* Sombra abajo para que el nombre y el botón se lean sobre el agua. */
.apertura-video::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(11, 9, 6, .88));
}
.apertura-video-pie {
  position: absolute; left: 0; right: 0; bottom: calc(var(--seguro-abajo) + 30px); z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 16px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease .9s, transform .5s ease .9s;
}
.apertura-video.visible .apertura-video-pie { opacity: 1; transform: none; }
.apertura-video.cierra .apertura-video-pie { transition-delay: 0s; opacity: 0; }
.apertura-video-nombre { font-style: italic; font-size: 21px; color: var(--acento-claro); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.apertura-video-nombre.recto { font-style: normal; }
.apertura-video-cerrar {
  border: 1px solid var(--bio); border-radius: 22px; padding: 9px 22px;
  color: var(--acento-claro); font-size: 14px; letter-spacing: .02em;
  background: rgba(217, 164, 65, .10);
}
.apertura-video-cerrar:active { background: rgba(217, 164, 65, .24); }
.apertura.fase-pila .apertura-pila { display: block; }
.apertura.fase-pila .apertura-sobre { display: none; }
.apertura-carta {
  position: absolute; inset: 0; z-index: calc(20 - var(--i));
  transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + var(--i) * 7px))
             rotate(calc(var(--giro, 0) * 1deg)) scale(calc(1 - var(--i) * .035));
  transition: transform .26s cubic-bezier(.3,.8,.3,1.05);
  animation: pila-sube .5s ease-out both; animation-delay: calc(var(--i) * 55ms);
}
@keyframes pila-sube { from { opacity: 0; } to { opacity: 1; } }
.apertura-carta.arrastrando { transition: none; cursor: grabbing; }
.apertura-carta .carta { width: 100%; aspect-ratio: 82 / 112; border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.6); }
/* Las que esperan en la pila van BOCA ABAJO. Con las caras a la vista se
   veía la legendaria asomando detrás de la primera carta, y su vídeo llegaba
   después de que ya se hubiera visto. El dorso se retira al revelar. */
.apertura-carta::after {
  content: ''; position: absolute; inset: 0; border-radius: 12px; z-index: 2;
  background: #1c1610 var(--dorso, url('assets/piel/dorso.webp')) center / 100% 100% no-repeat;
  filter: var(--dorso-filtro, none);
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
  transition: opacity .32s ease, transform .32s ease;
}
.apertura-carta.revelada::after { opacity: 0; transform: scale(1.04); pointer-events: none; }
/* Y la carta que no tenías lo dice ENCIMA, no sólo en la línea de debajo: es
   lo único que se mira mientras pasan cinco, y a 12 px bajo el binomial se
   perdía. Va en `::before` porque el `::after` es el dorso, y por encima de él
   (z-index 3) para que no se lo coma mientras se desvanece. No cambia el
   tamaño de nada, como manda la regla de los gestos. */
.apertura-carta::before {
  content: 'Nueva'; position: absolute; top: 5%; right: 4%; z-index: 3;
  padding: 3px 8px; border-radius: 10px;
  border: 1px solid var(--bio); background: rgba(28, 22, 16, .92);
  color: var(--acento-claro); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1;
  opacity: 0; transform: scale(.7); pointer-events: none;
  transition: opacity .26s ease .16s, transform .26s cubic-bezier(.3,.8,.3,1.4) .16s;
}
.apertura-carta.nueva.revelada::before { opacity: 1; transform: scale(1); }
/* Sólo la de arriba tiene sitio para el texto; las de debajo lo enseñan al subir. */
.apertura-carta.fuera { pointer-events: none; transition: none; }
.apertura-carta.fuera-der { animation: carta-fuera-der .42s ease-in forwards; }
.apertura-carta.fuera-izq { animation: carta-fuera-izq .42s ease-in forwards; }
.apertura-carta.fuera-arriba { animation: carta-fuera-arriba .42s ease-in forwards; }
@keyframes carta-fuera-der { to { transform: translate(140%, -10%) rotate(24deg); opacity: 0; } }
@keyframes carta-fuera-izq { to { transform: translate(-140%, -10%) rotate(-24deg); opacity: 0; } }
@keyframes carta-fuera-arriba { to { transform: translate(0, -130%) rotate(4deg); opacity: 0; } }

/* Lo que pasa al descubrir cada carta, por rareza: común nada, rara y épica un
   aro, legendaria el destello que ya tiene en la rejilla. */
.apertura-carta.revelada.rareza-RARO .carta,
.apertura-carta.revelada.rareza-EPICO .carta { box-shadow: 0 0 0 1px var(--bio), 0 0 30px rgba(217,164,65,.35), 0 10px 26px rgba(0,0,0,.6); }
.apertura-carta.revelada.rareza-LEGENDARIO .carta {
  box-shadow: 0 0 0 1px var(--bio), 0 10px 26px rgba(0,0,0,.6);
  animation: destello 1s ease-out .15s 2;
}

.apertura-leyenda { text-align: center; min-height: 40px; }
.apertura-binomial { font-size: 16px; font-style: italic; color: var(--texto); }
.apertura-binomial.recto { font-style: normal; }
.apertura-estado { font-size: 12px; color: var(--tenue-2); margin-top: 2px; }
.apertura-estado.nueva { color: var(--acento-claro); }
.apertura-estado.sobra { color: var(--peligro); }
.apertura-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; font-size: 12px; color: var(--tenue); max-width: 300px;
}
/* La pista va sola en su línea: a 250 px de escena no cabe con lo demás. */
.apertura-pista { width: 100%; text-align: center; }
.apertura-contador { font-variant-numeric: tabular-nums; color: var(--tenue-2); }
.apertura-saltar {
  border: 1px solid var(--borde); border-radius: 20px; padding: 5px 12px; color: var(--tenue); font-size: 12px;
}
.apertura-saltar:active { border-color: var(--borde-fuerte); }
@media (prefers-reduced-motion: reduce) {
  .apertura-carta, .apertura-tira, .apertura-cuerpo { animation: none !important; transition: none !important; }
}


/* ------------------------------------------------- el menú de piedra
   La barra de «Empezar partida» y las cinco placas son piezas dibujadas, con
   el latón y la piedra de los marcos, keyeadas por `tools/placas.py`. El texto
   va encima en Cinzel, como en las cartas: las placas traen la mitad de abajo
   de roca vacía justo para eso. */
.boton-piedra {
  --placa: url('assets/piel/boton_ancho.webp');
  border: 0; background: var(--placa) center / 100% 100% no-repeat;
  box-shadow: none; min-height: 0; padding: 0 18%;
  aspect-ratio: 1086 / 245;
  justify-content: center;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 17px; letter-spacing: .04em;
  color: #f4ece0; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  transition: transform .12s ease-out, filter .12s ease-out;
}
/* Se repite la imagen: el `:active` de `.boton-grande` escribe el shorthand
   `background`, que la borraba, y la barra pulsada se quedaba sin latón. */
.boton-piedra:active {
  background: var(--placa) center / 100% 100% no-repeat;
  transform: scale(.985); filter: brightness(1.15) drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.boton-piedra[disabled] { filter: grayscale(.5) brightness(.7); box-shadow: none; }

/* La fila es contenedor para que el rótulo de cada placa se mida contra ELLA:
   un elemento no puede usar `cqi` contra sí mismo, y sin un contenedor
   antepasado las unidades caían a la ventana y el tope no actuaba nunca. */
.menu-placas { gap: 6px; container-type: inline-size; }
/* A 64 px la roca vacía de la placa no da para el rótulo sin montarse sobre
   el emblema, así que el rótulo va debajo, fuera de la piedra. */
.menu-placas .placa {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  container-type: inline-size;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .01em;
  /* «Colección» es la larga: a 9,5 px mide 57 px. Con seis placas —desde la
     tienda— cada una mide 47 px a 360 de pantalla y se salía 10 px sobre
     «Sobres». 2,45cqi de la fila es un sexto de fila entre seis: 7,6 px ahí, y
     9,5 en cuanto hay sitio. */
  font-size: min(9.5px, 2.45cqi); line-height: 1; white-space: nowrap;
  color: #e9d9b5; text-shadow: 0 1px 2px rgba(0,0,0,.9);
  transition: transform .12s ease-out, filter .12s ease-out;
}
.menu-placas .placa i {
  display: block; width: 100%; aspect-ratio: 1122 / 1402;
  background: var(--placa) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.menu-placas .placa:active { transform: scale(.95); filter: brightness(1.18); }
/* El punto de aviso: lo que te espera dentro y no se ve desde fuera. Va sobre
   la esquina de la placa y no debajo del rótulo, que ahí compite con el nombre
   y se lee como parte de él. */
.menu-placas .placa { position: relative; }
.placa-aviso {
  position: absolute; top: -3px; right: -2px; z-index: 2;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--peligro); color: #fff;
  font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #17120e, 0 2px 4px rgba(0,0,0,.6);
}
/* ------------------------------------------- las tres placas de jugar
   Cuadradas, a diferencia de las cinco del menú, que son verticales: aquí son
   tres en la misma fila y les sobra ancho, así que el emblema se ve el doble
   de grande sin que la fila crezca de alto.

   Heredan de `.menu-placas .placa` todo lo demás —el rótulo debajo de la
   piedra, el hundido al pulsar, el destello del latón— porque es la misma
   pieza con otra proporción, y duplicar esas reglas sería tener dos sitios
   donde arreglar el mismo canto. */
.jugar-placas { gap: 8px; }
.jugar-placas .placa {
  flex: 1; min-width: 0; padding: 0; border: 0; background: none; border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  container-type: inline-size;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: .01em;
  /* «En solitario» son once letras y es la larga de las CUATRO. A cuatro
     placas en 360 px cada una mide unos 78, así que el `cqi` manda y el
     rótulo cabe sin partirse. */
  font-size: min(11px, 12.5cqi); line-height: 1; white-space: nowrap;
  color: #e9d9b5; text-shadow: 0 1px 2px rgba(0,0,0,.9);
  position: relative;
  transition: transform .32s cubic-bezier(.2,1.7,.4,1), filter .25s ease-out;
}
.jugar-placas .placa i {
  display: block; width: 100%; aspect-ratio: 1 / 1;
  background: var(--placa) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
  position: relative;
}
.jugar-placas .placa:active { transform: scale(.95) translateY(1px); filter: brightness(1.18); transition-duration: .08s; }
.jugar-placas .placa:focus-visible { outline: 2px solid var(--acento-claro); outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) {
  .jugar-placas .placa:not([disabled]):hover { transform: translateY(-3px); filter: brightness(1.08); }
}

/* «Pronto» debajo del rótulo, en el hueco que deja el gap. Va en una línea
   propia y no entre paréntesis: el rótulo es Cinzel en versales y un
   paréntesis ahí se lee como parte del nombre. */
.jugar-placas .placa small {
  display: block; margin-top: 3px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 400; font-size: 9px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tenue-2);
}
/* Apagada: sin latón vivo y sin gesto. Se enseña porque existir y no poder
   todavía es información; fingir que hace algo, no. */
.jugar-placas .placa[disabled] {
  cursor: default; color: var(--tenue);
}
.jugar-placas .placa[disabled] i { filter: grayscale(.72) brightness(.62); }
.jugar-placas .placa[disabled]:active { transform: none; filter: none; }

.placa-solitario { --placa: url('assets/piel/placa_solitario.webp'); }
.placa-duelo { --placa: url('assets/piel/placa_duelo.webp'); }
.placa-misiones { --placa: url('assets/piel/placa_misiones.webp'); }

/* La placa de misiones, mientras su panel está abierto: el filete de latón
   encendido dice cuál de las tres está desplegada. */
#jugar.misiones-abiertas .placa-misiones i {
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) brightness(1.14);
}
#jugar.misiones-abiertas .placa-misiones { color: var(--acento-vivo); }

/* La cuarta placa de la fila de jugar, la del torneo. Llegó el 18-09-2026,
   como las otras tres: recortada y a 1254×1254, servida a 256 por
   tools/placas.py. Hasta entonces fue un dibujo de CSS. */
.placa-torneo { --placa: url('assets/piel/placa_torneo.webp'); }
#jugar.torneo-abierto .placa-torneo i { filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)) brightness(1.14); }
#jugar.torneo-abierto .placa-torneo { color: var(--acento-vivo); }

/* ------------------------------------------------------- el torneo */
/* La cartela del torneo: nombre, lema y la regla. La regla va en su propia
   línea y con el latón encendido porque es lo único que hay que leer para
   saber si tu mazo entra. */
.torneo-cartela { margin: 6px 0 10px; }
.torneo-nombre {
  font-family: 'Cinzel', Georgia, serif; font-size: 16px; margin: 0 0 2px;
  color: var(--texto); letter-spacing: .02em;
}
.torneo-lema { font-size: 11.5px; line-height: 1.35; color: var(--tenue); margin: 0 0 5px; }
.torneo-regla {
  font-size: 12px; font-weight: 600; color: var(--acento-claro); margin: 0;
  padding: 5px 8px; border-left: 2px solid var(--acento-claro);
  background: rgba(244,236,224,.04); border-radius: 0 var(--radio) var(--radio) 0;
}

/* La escalera de premios. Es una fila de casillas y no una tabla: lo que se
   mira es dónde estás, no cuánto paga cada una. */
.torneo-escalera {
  display: flex; gap: 4px; list-style: none; margin: 8px 0; padding: 0;
}
.torneo-escalera li {
  flex: 1; min-width: 0; text-align: center; padding: 5px 2px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: rgba(244,236,224,.03);
}
.torneo-escalera li b { display: block; font-size: 13px; color: var(--tenue); }
.torneo-escalera li span {
  display: block; font-size: 9px; line-height: 1.2; color: var(--tenue-2);
}
.torneo-escalera li.hecho { border-color: var(--acento-claro); }
.torneo-escalera li.hecho b { color: var(--acento-claro); }
.torneo-escalera li.aqui {
  background: rgba(214,170,94,.14); box-shadow: 0 0 0 1px var(--acento-claro) inset;
}
.torneo-escalera li.aqui span { color: var(--texto); }

/* El marcador de la racha: victorias a la izquierda, derrotas a la derecha.
   Las pastillas son las mismas del escudo de la liga. */
.torneo-marcador {
  display: flex; justify-content: space-between; gap: 8px; margin: 6px 0;
  font-size: 11px; color: var(--tenue);
}
.torneo-marcador i {
  display: inline-block; width: 7px; height: 7px; margin-right: 2px; border-radius: 50%;
  border: 1px solid var(--acento-claro); vertical-align: middle;
}
.torneo-victorias i.llena { background: var(--acento-claro); }
.torneo-derrotas i { border-color: #b8402f; }
.torneo-derrotas i.llena { background: #b8402f; }

/* Volver: centrado y separado, que es la salida de la pantalla. */
.jugar-volver { flex: none; align-self: center; min-width: 128px; margin-top: 2px; }

/* Anclado abajo, igual que el menú, y no centrado. Se probó centrarlo para
   repartir la banda oscura que queda entre los pies del animal y la primera
   placa; lo que hizo fue abrir un socavón de 500 px DEBAJO de «Volver». Esa
   banda no es hueco muerto: es donde el velo de la portada se funde con el
   fondo, y las tres placas con la dificultad y la salida la llenan casi
   exactamente, igual que las cinco del menú llenan la suya. */

/* «Pronto» pegado a su rótulo: con más aire parecía una cuarta fila. */
.jugar-placas .placa small { margin-top: 2px; }

.placa-coleccion { --placa: url('assets/piel/placa_coleccion.webp'); }
.placa-sobres { --placa: url('assets/piel/placa_sobres.webp'); }
.placa-mazos { --placa: url('assets/piel/placa_mazos.webp'); }
.placa-cuenca { --placa: url('assets/piel/placa_cuenca.webp'); }
.placa-cuenta { --placa: url('assets/piel/placa_cuenta.webp'); }
/* La sexta placa, la de la tienda. Sale de tools/tienda.py. */
.placa-tienda { --placa: url('assets/piel/placa_tienda.webp'); }

/* El dorso del RIVAL es el suyo, no el tuyo: en un duelo `--dorso-rival` lo
   pone src/ui/tienda.js con lo que dice el servidor, y contra la IA es el de
   siempre. Sin esta regla tu dorso comprado aparecería también en su mazo del
   marcador y en las cartas que vuelan a su pila. */
.marcador-mazo.rival .marcador-dorso i,
.fx-fantasma.rival .carta-dorso {
  background-image: var(--dorso-rival, url('assets/piel/dorso.webp')); filter: none;
}

/* ------------------------------------------------------------ la tienda */
.tienda-seccion { margin-bottom: 18px; }
.tienda-titulo {
  font-family: 'Cinzel', 'Terralis', serif; font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acento-claro); margin: 4px 2px 6px;
}
.tienda-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tienda-ficha {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: rgba(244,236,224,.03);
  text-align: center;
}
.tienda-ficha.puesto { border-color: var(--acento-claro); box-shadow: 0 0 0 1px var(--acento-claro) inset; }
.tienda-vista {
  width: 72%; aspect-ratio: 82 / 112; border-radius: 6px; margin-bottom: 4px;
  background: #1c1610 center / 100% 100% no-repeat;
  box-shadow: 0 6px 12px rgba(0,0,0,.55);
}
.tienda-nombre { font-size: 13px; font-weight: 600; color: var(--texto); }
.tienda-lema { font-size: 10.5px; line-height: 1.3; color: var(--tenue); min-height: 2.6em; }
.tienda-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 4px; min-height: 30px; align-items: center; }
.tienda-boton {
  padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--borde-fuerte); background: rgba(217,164,65,.08); color: var(--acento-claro);
}
.tienda-boton.si { background: var(--bio); color: #17120e; border-color: var(--bio); }
.tienda-boton:disabled { opacity: .45; }
.tienda-boton:not(:disabled):active { transform: scale(.96); }
.tienda-estado { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-vivo); }
.tienda-pregunta { width: 100%; font-size: 11px; color: var(--texto-2); }
/* El tapete se enseña como en el tablero: la losa repetida y el medallón. */
.tienda-vista.tienda-tapete {
  width: 100%; aspect-ratio: 1; border-radius: 8px;
  background-repeat: no-repeat, repeat; background-position: center, top left;
  background-size: 62% auto, 56px auto;
}
.tienda-vista.tienda-estandarte {
  width: 44%; aspect-ratio: 787 / 1919; border-radius: 0; box-shadow: none;
  background-color: transparent; background-size: 100% 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.tienda-vista.tienda-retrato { width: 86%; border-radius: 0; box-shadow: none; }
/* El título: cómo se leerá bajo tu nombre. */
.tienda-vista.tienda-titulo-vista {
  width: 100%; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px; border-radius: 8px; background: rgba(0,0,0,.35); box-shadow: none;
}
.tienda-titulo-vista b { font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 14px; color: var(--texto); }
.tienda-titulo-vista span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-claro); }
/* Lo que se gana y aún no se tiene: la ficha dice con qué logro. */
.tienda-bloqueado { font-size: 10.5px; color: var(--tenue); line-height: 1.3; }
.tienda-ficha:has(.tienda-bloqueado) .tienda-vista { opacity: .55; filter: grayscale(.6); }
/* El pack: el sobre dibujado —el mismo de la pantalla de sobres— con el
   número encima en una chapa. */
.tienda-vista.tienda-pack {
  position: relative; width: 62%; aspect-ratio: 2 / 3; border-radius: 0; box-shadow: none;
  background: url('assets/piel/sobre.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.tienda-pack b {
  position: absolute; right: -8px; bottom: 6px; padding: 2px 7px; border-radius: 10px;
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 14px; color: var(--acento-vivo);
  background: #120d09; box-shadow: 0 0 0 1px var(--borde-fuerte);
}
/* LA MAQUETA de dinomonedas por dinero real (src/data/dinero.js). Se pinta y
   no se toca: aquí sólo se APAGA, que el botón ya nace `disabled` y sin
   `data-*`. Va en gris y sin el oro de las fichas que sí se compran, para que
   no se lea como algo que está a un toque — es un escaparate. */
.tienda-maqueta-seccion .tienda-titulo { color: var(--tenue); }
.tienda-ficha.tienda-maqueta { border-style: dashed; background: rgba(244,236,224,.015); }
.tienda-ficha.tienda-maqueta .tienda-nombre { color: var(--texto-2); }
/* El tramo: la cifra grande con su moneda al lado, sobre una losa oscura.
   `.ico` lleva su tamaño en `em`, así que crece con la cifra sin tocarlo. */
.tienda-vista.tienda-tramo {
  width: 100%; aspect-ratio: 3 / 2; border-radius: 8px; box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: rgba(0,0,0,.35);
}
.tienda-tramo b {
  font-family: 'Terralis', 'Cinzel', Georgia, serif; font-size: 19px; color: var(--acento-claro);
}
.tienda-tramo .ico { width: .9em; height: .9em; font-size: 19px; opacity: .85; }
/* El «+N sin coste» es una cinta pegada al pie de la losa, no otra línea de
   texto: lo que tiene que leerse primero sigue siendo la cifra grande, y el
   regalo es lo que se ve DESPUÉS. La losa pasa a `relative` para colgarlo. */
.tienda-vista.tienda-tramo { position: relative; }
.tienda-bono {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2px 0; font-size: 10.5px; letter-spacing: .01em;
  color: #17130d; background: var(--bio);
  border-radius: 0 0 8px 8px;
}

/* El retrato del jugador (src/ui/tienda.js): el aro de latón encima y la cara
   en un círculo debajo. `--retrato` la pone quien lo usa; el hueco del aro es
   el 72 % de su ancho, medido por tools/tienda.py, y la cara entra un poco
   por debajo del latón para que no quede una rendija. */
.retrato-medallon {
  position: relative; isolation: isolate; display: inline-block; flex: 0 0 auto;
  aspect-ratio: 1; background: transparent url('assets/piel/tienda/marco_retrato.webp') center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.retrato-medallon::before {
  content: ''; position: absolute; inset: 13%; z-index: -1; border-radius: 50%;
  background: #1c1610 var(--retrato, none) center / cover no-repeat;
}
.menu-cuenta { display: flex; align-items: center; justify-content: center; gap: 6px; }
.menu-cuenta .retrato-medallon { width: 26px; --retrato: var(--retrato-propio); }
.marcador-retrato { width: 34px; margin-inline: -2px; }
.marcador-bando.propio .marcador-retrato { --retrato: var(--retrato-propio); }
.marcador-bando.rival .marcador-retrato { --retrato: var(--retrato-rival); }

/* Lo que queda debajo va a juego sin imagen: filete de latón en los chips y
   los enlaces, para que la piedra de arriba y la web de abajo no den un salto. */

/* ------------------------------------------- el menú respira y contesta
   Las piezas son dibujadas y sin esto el menú era una lámina: se tocaba y no
   pasaba nada. Tres cosas, todas baratas:

   1. ENTRAR. Cada vez que el menú se enseña, el título y las piezas suben por
      orden. No hace falta JS: una animación en un elemento que pasa de
      `display: none` a pintado arranca sola, y vuelve a arrancar cada vez que
      se vuelve al menú. Va con `backwards` y NO con `both`: `forwards` dejaría
      `transform: none` pegado al final y taparía el `:active` para siempre —
      es la trampa de `transform` de siempre, por otra puerta.
   2. PULSAR. Al bajar el dedo, la pieza se hunde rápido (`:active`) y al
      soltar vuelve con un rebote pequeño: la transición de ida y la de vuelta
      son distintas a propósito. Y `tacto.js` le pone `.pulsada`, que hace
      pasar un destello de luz por el latón. El destello es un pseudoelemento
      ENMASCARADO con el propio PNG de la pieza: sin la máscara pintaría un
      rectángulo sobre el aire que la placa tiene alrededor.
   3. VIVIR. La portada respira con un zoom de medio minuto que no se ve pero
      se nota, y el punto de las dinomonedas late despacio. */

@keyframes menu-alza {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
#menu .menu-epigrafe, #menu .menu-caja h1, #menu .menu-lema,
#menu .menu-acciones > :not(.menu-placas), #menu .menu-placas .placa {
  animation: menu-alza .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(var(--paso, 0) * 55ms);
}
#menu .menu-caja h1 { --paso: 1; }
#menu .menu-lema { --paso: 2; }
#menu .menu-acciones > :nth-child(1) { --paso: 3; }
#menu .menu-placas .placa:nth-child(1) { --paso: 4; }
#menu .menu-placas .placa:nth-child(2) { --paso: 5; }
#menu .menu-placas .placa:nth-child(3) { --paso: 6; }
#menu .menu-placas .placa:nth-child(4) { --paso: 7; }
#menu .menu-placas .placa:nth-child(5) { --paso: 8; }
#menu .menu-placas .placa:nth-child(6) { --paso: 9; }
#menu .menu-acciones > :nth-child(3) { --paso: 10; }
#menu .menu-acciones > :nth-child(n + 4) { --paso: 11; }

/* La pantalla de jugar entra igual: tres placas y lo de debajo. Es la misma
   tabla de escalones, con la fila de placas contada una a una. */
#jugar .menu-epigrafe, #jugar .menu-caja h1, #jugar .menu-lema,
#jugar .menu-acciones > :not(.jugar-placas), #jugar .jugar-placas .placa {
  animation: menu-alza .5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay: calc(var(--paso, 0) * 55ms);
}
#jugar .menu-caja h1 { --paso: 1; }
#jugar .menu-lema { --paso: 2; }
#jugar .jugar-placas .placa:nth-child(1) { --paso: 3; }
#jugar .jugar-placas .placa:nth-child(2) { --paso: 4; }
#jugar .jugar-placas .placa:nth-child(3) { --paso: 5; }
#jugar .menu-acciones > :nth-child(n + 2) { --paso: 6; }
/* El panel de misiones NO entra con el escalón: aparece cuando se pulsa su
   placa, mucho después de que la animación de entrada se haya gastado, y con
   `backwards` se quedaría invisible. Tiene la suya, más corta. */
#jugar .menu-misiones:not(.oculta) { animation: menu-alza .34s cubic-bezier(.2,.8,.2,1); }

@keyframes menu-brisa { from { transform: scale(1); } to { transform: scale(1.06); } }
.menu-heroe { transform-origin: 50% 30%; animation: menu-brisa 28s ease-in-out infinite alternate; }

@keyframes menu-fulgor {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(232,192,121,.55)); }
  50%      { filter: drop-shadow(0 0 6px rgba(232,192,121,.9)); }
}
.menu-monedas .punto { animation: menu-fulgor 3.2s ease-in-out infinite; }

/* La ida es seca y la vuelta rebota: el ease de la vuelta pasa de 1 y vuelve. */
.boton-piedra, .menu-placas .placa {
  position: relative;
  transition: transform .32s cubic-bezier(.2,1.7,.4,1), filter .25s ease-out;
}
.boton-piedra:active, .menu-placas .placa:active { transition-duration: .08s, .08s; }
.menu-placas .placa:active { transform: scale(.93) translateY(1px); }

/* El destello: una banda de luz que cruza el latón de izquierda a derecha. Con
   `background-size` al 300 %, la posición 100 % → 0 % es lo que mueve la banda
   de izquierda a derecha, aunque leído parezca al revés. */
@keyframes menu-brillo {
  from { opacity: 0; background-position: 100% 0; }
  25%  { opacity: 1; }
  to   { opacity: 0; background-position: 0 0; }
}
.boton-piedra::after, .menu-placas .placa i::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  /* Los topes van sobre el 300 %: del 45 al 55 es una banda de un tercio de
     la pieza, no más, o en vez de un reflejo es una lavada. */
  background: linear-gradient(105deg, transparent 45%, rgba(255,236,190,.28) 48%,
              rgba(255,244,214,.6) 50%, rgba(255,236,190,.28) 52%, transparent 55%)
              0 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  /* Dos máscaras cruzadas: el PNG de la pieza, para que el destello sólo
     pinte latón y piedra, y un rectángulo interior, porque las piezas traen
     un halo casi transparente alrededor y por él la banda se veía flotar
     sobre el aire por encima del medallón. */
  -webkit-mask: var(--placa) center / 100% 100% no-repeat,
                linear-gradient(#000, #000) center / var(--recorte, 90% 88%) no-repeat;
  -webkit-mask-composite: source-in;
  mask: var(--placa) center / 100% 100% no-repeat,
        linear-gradient(#000, #000) center / var(--recorte, 90% 88%) no-repeat;
  mask-composite: intersect;
}
.boton-piedra { --recorte: 92% 76%; }
.menu-placas .placa i { position: relative; }
.boton-piedra.pulsada::after, .menu-placas .placa.pulsada i::after {
  animation: menu-brillo .55s ease-out;
}

/* Con ratón, la placa se levanta un poco al pasar; con dedo no hay «pasar». */
@media (hover: hover) {
  .menu-placas .placa:hover { transform: translateY(-3px); filter: brightness(1.08); }
  .boton-piedra:hover { filter: brightness(1.06) drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
}
.boton-piedra:focus-visible, .menu-placas .placa:focus-visible {
  outline: 2px solid var(--acento-claro); outline-offset: 4px; border-radius: 6px;
}

/* Los enlaces de texto contestan sin latón. */
.boton-fantasma { transition: color .15s ease-out, border-color .15s ease-out, transform .25s cubic-bezier(.2,1.7,.4,1); }
.boton-fantasma:active { transform: scale(.96); transition-duration: .08s; }

@media (prefers-reduced-motion: reduce) {
  #menu .menu-epigrafe, #menu .menu-caja h1, #menu .menu-lema,
  #menu .menu-acciones > :not(.menu-placas), #menu .menu-placas .placa,
  #jugar .menu-epigrafe, #jugar .menu-caja h1, #jugar .menu-lema,
  #jugar .menu-acciones > :not(.jugar-placas), #jugar .jugar-placas .placa,
  #jugar .menu-misiones,
  .menu-heroe, .menu-monedas .punto,
  .boton-piedra.pulsada::after, .menu-placas .placa.pulsada i::after { animation: none; }
  .boton-piedra, .menu-placas .placa, .boton-fantasma { transition: none; }
}

/* ----------------------------------------------------- la marca de la casa
   Nace visible desde el HTML y se va con un fundido cuando `carga.js` le pone
   `se-va`. El fondo es el color de la esquina del logo, medido, para que la
   imagen no se recorte contra nada. */
#marca {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #030516;
  transition: opacity .35s ease-out;
}
#marca.se-va { opacity: 0; }
.marca-logo {
  width: min(72vw, 330px); aspect-ratio: 1 / 1;
  animation: marca-entra .7s cubic-bezier(.2,.8,.2,1) backwards,
             marca-late 2.6s ease-in-out .7s infinite;
}
@keyframes marca-entra { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
/* El neón del logo late en sus propios colores. Va en `filter`: es lo único
   que no toca el tamaño ni la posición. */
@keyframes marca-late {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(120, 90, 255, .35)); }
  50%      { filter: drop-shadow(0 0 26px rgba(40, 200, 255, .55)); }
}

/* --------------------------------------------------------- la carga
   La escena submarina entera detrás, y dos bloques: el título arriba, el
   medallón y la barra abajo. Las piezas son imágenes con alfa y van por
   `<img>`, no por `background`: un `<img>` en una sección oculta se descarga
   igual, y así entran mientras la marca está en pantalla. */
#carga { position: absolute; inset: 0; overflow: hidden; background: #061420; }
.carga-heroe { height: 100%; object-position: 50% 38%; filter: none; }
.carga-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,20,32,.42) 0%, rgba(6,20,32,0) 24%,
              rgba(6,20,32,0) 52%, rgba(6,20,32,.5) 78%, rgba(6,20,32,.82) 100%);
}
.carga-caja {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(var(--seguro-arriba) + 30px) 24px calc(var(--seguro-abajo) + 24px);
  text-align: center;
}
.carga-cabecera, .carga-pie {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  animation: menu-alza .5s cubic-bezier(.2,.8,.2,1) backwards;
}
.carga-cabecera { gap: 10px; }
.carga-pie { gap: 14px; animation-delay: 120ms; }
.carga-epigrafe { width: min(80%, 300px); }
.carga-logo { width: min(90%, 340px); filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.carga-lema { width: min(94%, 330px); }
.carga-medallon {
  width: min(44%, 168px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.6));
  animation: carga-late 2.8s ease-in-out infinite;
}
@keyframes carga-late {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
  50%      { transform: scale(1.03);
             filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(232,192,121,.45)); }
}
.carga-cargando { width: min(54%, 200px); }
.carga-nota { font-size: 11px; color: var(--tenue); min-height: 14px; margin-top: -6px; }

/* La barra: el marco debajo y el oro encima, recortado a la ranura. Los
   cuatro porcentajes los MIDE `tools/placas.py` sobre el PNG y los imprime;
   no se estiman, igual que los huecos de los marcos de carta.

   El oro no crece: se DESPLAZA. Un `width` que crece deja un corte vertical
   en la punta; desplazando el dibujo entero hacia la derecha, la punta
   redondeada del oro es siempre lo que avanza. `--p` va de 0 a 1 y lo escribe
   `carga.js` por cada hito. */
.carga-barra {
  position: relative; width: min(100%, 360px); aspect-ratio: 2096 / 443;
  --ranura-izq: 14.03%; --ranura-arriba: 54.40%;
  --ranura-ancho: 71.66%; --ranura-alto: 15.12%;
  --p: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.carga-marco, .carga-relleno { position: absolute; inset: 0; width: 100%; height: 100%; }
/* El recorte sobresale un poco de la ranura para que el halo del oro se derrame
   sobre el filete, que es lo que hace que parezca encendido y no pegado. */
.carga-ranura {
  position: absolute; inset: 0;
  clip-path: inset(
    calc(var(--ranura-arriba) - 1.4%)
    calc(100% - var(--ranura-izq) - var(--ranura-ancho) - .5%)
    calc(100% - var(--ranura-arriba) - var(--ranura-alto) - 1.4%)
    calc(var(--ranura-izq) - .5%)
    round 999px);
}
.carga-relleno {
  transform: translateX(calc((var(--p) - 1) * var(--ranura-ancho)));
  /* La duración la escribe `carga.js` por cada hito: es lo que le queda
     hasta su momento debido dentro del mínimo de la pantalla. Aquí sólo la
     curva, y un tope por si nadie la escribe. */
  /* Casi lineal con el final suave: en un recorrido de tres segundos, una
     curva de salida rápida lo tenía al 60 % al medio segundo y luego arrastrando. */
  transition: transform .55s cubic-bezier(.45,.05,.55,.95);
}

@media (prefers-reduced-motion: reduce) {
  #marca { transition: none; }
  .marca-logo, .carga-medallon, .carga-cabecera, .carga-pie { animation: none; }
  .carga-relleno { transition: none; }
}

/* ------------------------------------------------------------------- hud */

/* Tres líneas y sólo tres cifras por bando. El mazo y el descarte se han ido a
   la mesa, y con eso la fila cabe sin apreturas y sin solapes. */
#hud {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 14px 5px;
  border-bottom: 1px solid var(--linea);
  background: rgba(15,11,8,.55);
  font-size: 12px;
}
.hud-bando { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hud-etiqueta {
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase; flex: 0 0 auto;
}
.rival .hud-etiqueta { color: var(--rival); }
.propio .hud-etiqueta { color: var(--acento-claro); }

.hud-recs { display: flex; gap: 12px; }
.rec { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; position: relative; border-radius: 4px; }
/* A dos trofeos del final el contador se enciende y late, el tuyo y el suyo. */
.rec.cerca b { color: var(--bio); text-shadow: 0 0 6px rgba(217,164,65,.7); animation: latir-oro 1.6s ease-in-out infinite; }
@keyframes latir-oro { 0%, 100% { text-shadow: 0 0 4px rgba(217,164,65,.4); } 50% { text-shadow: 0 0 10px rgba(217,164,65,.95); } }
.rec b { font-size: 13px; font-weight: 500; }
.rec .meta { font-size: 10px; color: var(--tenue-2); margin-left: -2px; }
.rec i { font-style: normal; font-size: 11px; color: var(--tenue); }

/* El turno y el reloj, centrados entre las dos filas y con su propio filete:
   es la línea que separa un bando del otro. */
.hud-centro {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 5px 0; border-top: 1px solid var(--superficie-2); border-bottom: 1px solid var(--superficie-2);
}
#turno { font-size: 12px; color: var(--texto-2); white-space: nowrap; }

/* Un reloj por bando, en su propia fila del marcador. Cifra tabular para que
   no baile al pasar de 10:00 a 9:59, y apagado mientras no le toca: casi toda
   la partida es información de fondo. */
.reloj {
  font-variant-numeric: tabular-nums; font-size: 11.5px; letter-spacing: .02em;
  color: var(--tenue-2); padding: 1px 7px; border-radius: 10px;
  box-shadow: 0 0 0 1px var(--linea); margin-right: auto; margin-left: 10px;
}
/* El que corre es el que hay que mirar: se enciende y marca de quién es el
   tiempo. Sin esto, dos cifras iguales no dicen quién está pensando. */
.reloj.corre { color: var(--texto); box-shadow: 0 0 0 1px var(--borde-fuerte); }
.hud-bando.rival .reloj.corre { color: var(--rival); box-shadow: 0 0 0 1px var(--rival); }
.hud-bando.propio .reloj.corre { color: var(--acento-claro); box-shadow: 0 0 0 1px var(--bio); }
.reloj.apremia {
  color: var(--peligro); box-shadow: 0 0 0 1px var(--peligro);
}
.reloj.apremia.corre { animation: latir 1s ease-in-out infinite; }
@keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .reloj.apremia.corre { animation: none; } }


/* Lista del descarte: qué ha jugado y perdido cada bando. */
.desc-lista { display: flex; flex-direction: column; gap: 5px; }
.desc-fila {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 6px;
  background: rgba(244,236,224,.04); border: 1px solid var(--linea);
  font-size: 13px;
}
.desc-fila .n { font-weight: 500; color: var(--acento-claro); min-width: 20px; }
.desc-fila .nom { flex: 1; min-width: 0; }
.desc-fila .nom i { font-style: italic; }
.desc-fila .fam { font-size: 10px; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.desc-vacio { color: var(--tenue); font-size: 13px; }

/* ----------------------------------------------------------------- campo */

/* El relleno y los huecos van apretados a propósito. En 360×640 la pantalla
   son 640 px y entre el relleno y los huecos de #campo, #hud y #pie se iban
   116: el 18 % del alto en aire. Bajarlos es lo que le da a la fila de ranuras
   los 40 px que la carta necesita para crecer. Medido: la carta pasa de 64×87
   a 83×114, un 69 % más de superficie. */
#campo {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; padding: 6px;
  overflow: hidden;
}

/* Hábitat: canal fino con la cifra «actual/máximo» y, al final, la pila del
   mazo. El contador de cartas vive aquí y no en el marcador porque es un objeto
   de la mesa, no una estadística. */
.habitat { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.habitat-et { display: none; }
.habitat-barra {
  flex: 1; height: 8px; border-radius: 4px; overflow: hidden;
  background: rgba(244,236,224,.07);
}
.habitat-barra i { display: block; height: 100%; width: 100%; border-radius: 3px; transition: width .45s ease-out; }
.habitat.rival .habitat-barra i { background: linear-gradient(90deg, #8a3f2a, var(--rival)); }
.habitat.propio .habitat-barra i { background: linear-gradient(90deg, var(--borde-fuerte), var(--bio)); }
.habitat-num { flex: 0 0 auto; font-size: 11px; color: var(--texto); }
.habitat-num .tope { color: var(--tenue-2); }
.habitat.golpe .habitat-num { animation: latido .45s ease-out; }
@keyframes latido { 0%,100% { transform: none; } 40% { transform: scale(1.4); } }
/* Y la barra destella con el número: un velo blanco sobre el relleno que se
   apaga en medio segundo. Va en un `::after` y no en `filter`, que piel.css ya
   usa el filtro del relleno rival para girarle el tono. */
.habitat-barra i { position: relative; }
.habitat-barra i::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.habitat.golpe .habitat-barra i::after { animation: destello-barra .45s ease-out; }
@keyframes destello-barra { 0% { opacity: .75; } 100% { opacity: 0; } }
/* Por debajo del cuarto, la barra late: la partida puede acabar por aquí en
   un turno. El tuyo en rojo; el del rival en oro, que para ti es buena noticia. */
.habitat.peligro .habitat-barra i { animation: latir-barra 1.4s ease-in-out infinite; }
.habitat.propio.peligro .habitat-num b { color: var(--peligro); }
.habitat.rival.peligro .habitat-num b { color: var(--bio); }
@keyframes latir-barra { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Pila de mazo: una carta pequeña boca abajo (`i`) con el contador encima
   (`b`). Era una cajita apaisada de 32×22 con el número, y el dorso de la
   tienda no se veía en ninguna parte de la partida: pasaba volando del mazo a
   la mano y ya. Ahora es el sitio donde se mira, el tuyo abajo y el del rival
   arriba.

   La pila fija el alto de la fila de hábitat, así que su tamaño sale del
   presupuesto vertical del campo y no sólo de la estética: a 360×640 las
   filas de ranuras quedan en 128 px con la pila a 36, y la carta de 112 cabe. */
.pila { position: relative; width: 30px; height: 36px; flex: 0 0 auto; --grosor: 4; }
/* El taco de debajo asoma tanto como mazo queda: `--grosor` va de 4 a 0 y lo
   escribe render.js con la cuenta. A 55 cartas es un taco; con cuatro, una
   carta suelta. Es el reloj de la extinción, que se ve sin leer el número. */
.pila::before {
  content: ''; position: absolute; width: 26px; height: 34px;
  left: calc(1px + var(--grosor) * 1.5px); top: calc(var(--grosor) * 1px);
  border-radius: 3px; background: #241b11; box-shadow: 0 0 0 1px #45372a;
  transition: left .4s ease-out, top .4s ease-out;
}
.pila i {
  position: absolute; left: 0; top: 0; width: 26px; height: 34px; border-radius: 3px;
  background: #1c1610; box-shadow: 0 0 0 1px #45372a;
}
.pila b {
  position: absolute; left: 50%; bottom: -4px; translate: -50% 0;
  min-width: 18px; padding: 0 4px; border-radius: 8px; line-height: 13px;
  background: #120d09; box-shadow: 0 0 0 1px var(--borde-fuerte);
  font-size: 9px; font-weight: 600; color: var(--texto); text-align: center;
}
.habitat.propio .pila b { box-shadow: 0 0 0 1px var(--bio); }
.pila.aviso b { color: var(--peligro); box-shadow: 0 0 0 1px var(--peligro); animation: latir-mazo 1.4s ease-in-out infinite; }
@keyframes latir-mazo {
  0%, 100% { box-shadow: 0 0 0 1px var(--peligro); }
  50%      { box-shadow: 0 0 0 2px var(--peligro), 0 0 8px rgba(200,103,74,.7); }
}

/* Descarte: una ficha plana al lado del mazo, y se puede abrir. */
.descarte-ficha {
  flex: 0 0 auto; min-width: 26px; height: 18px; padding: 0 5px; border-radius: 4px;
  background: rgba(244,236,224,.04); box-shadow: 0 0 0 1px var(--linea);
  color: var(--tenue); font-size: 10px;
  display: grid; place-items: center;
}
.descarte-ficha:active { box-shadow: 0 0 0 1px var(--borde-fuerte); color: var(--texto-2); }

/* Las filas se reparten el hueco que queda: fijar su alto en vh desbordaba la
   pantalla en 360×640, que es la más pequeña que el juego declara soportar. */
/* `minmax(0, 1fr)` y no `1fr`: `1fr` es `minmax(auto, 1fr)`, y el «auto» deja
   que el contenido mínimo de una celda —un nombre de lugar en una línea—
   ensanche su columna y encoja las otras tres. Se vio con «Bosque de
   coníferas»: la primera ranura salía el doble de ancha que la cuarta. */
.fila-ranuras {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  flex: 1 1 0; min-height: 92px; max-height: 172px;
}

.ranura {
  position: relative; height: 100%; min-height: 0; min-width: 0;
  border-radius: 7px;
  border: 1px dashed #3a2f22;
  background: rgba(244,236,224,.015);
  display: flex; align-items: center; justify-content: center;
  color: #3a2f22; font-size: 11px;
  transition: border-color .18s, background .18s;
}
/* Ranura destino: lo único encendido mientras arrastras. */
.ranura.destino {
  border-color: var(--bio); background: rgba(217,164,65,.06); color: var(--acento-claro);
}
.ranura.destino::after {
  content: '+'; position: absolute; font-size: 16px; color: var(--acento-claro);
}
.ranura.ocupada { border-color: transparent; background: none; }

/* La PREVISIÓN del combate: una etiqueta sobre la carta con lo que le va a
   pasar si nadie cambia nada. Va sobre la VENTANA de la ilustración —el
   centro de la ventana de criatura cae al 36 % del alto— porque es lo único
   de la carta que no lleva información: al pie tapaba el Ataque y la Vida,
   que es justo lo que se mira para entenderla. La escribe render.js en
   `data-prevision` y sólo mientras se despliega; con `.ocupada` en el
   selector para pesar más que la raya de la ranura vacía de piel.css y que
   el «+» del destino. */
.ranura.ocupada[data-prevision]::after {
  content: attr(data-prevision);
  position: absolute; left: 50%; top: 36%; z-index: 5; transform: translate(-50%, -50%);
  padding: 1px 5px; border-radius: 3px;
  background: rgba(20,16,12,.92); box-shadow: 0 0 0 1px var(--acento-claro);
  color: var(--acento-claro); font-size: 8px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.ranura.ocupada[data-prevision-tono="bueno"]::after { box-shadow: 0 0 0 1px #8cc878; color: #b7e0a6; }
.ranura.ocupada[data-prevision-tono="malo"]::after { box-shadow: 0 0 0 1px var(--peligro); color: #f0a08a; }
/* Y junto a la cifra del hábitat, cuánto va a bajar. */
.habitat-num .prev { font-style: normal; font-size: 10px; font-weight: 600; color: #b7e0a6; margin-left: 3px; }
.habitat-num .prev.malo { color: #f0a08a; }
.habitat-num .prev:empty { display: none; }

/* Los lugares: uno por columna, entre la fila del rival y la franja del clima.
   Es la columna la que tiene lugar, así que va alineado con las ranuras —la
   misma rejilla— y no con la franja. Nombre siempre; el texto sólo donde cabe. */
.fila-lugares {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  flex: 0 0 auto;
}
.fila-lugares[hidden] { display: none; }
.lugar {
  position: relative; /* el rótulo del guión cuelga de aquí cuando el lugar actúa */
  min-width: 0; padding: 4px 3px 3px; border-radius: 6px;
  border: 1px solid var(--linea);
  /* Fondo OPACO, no un velo: la tira va justo encima del medallón del campo,
     que es ámbar y brillante en el centro, y con un velo translúcido las dos
     columnas de en medio se leían y las de los lados no. El color de cada
     lugar lo pone piel.css sobre este fondo. */
  background: #1a130d;
  color: var(--texto); font: inherit; cursor: pointer; text-align: center;
  line-height: 1.15;
  box-shadow: 0 1px 3px rgba(0,0,0,.55);
}
/* El nombre cabe en dos líneas y no se corta con puntos: «Bosque de coníferas»
   a 8,5 px son 26 letras y a 85 px de columna no entran en una. */
.lugar b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 8.5px; font-weight: 600; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden; overflow-wrap: anywhere;
}
.lugar i { display: none; font-style: normal; font-size: 9px; color: var(--tenue); margin-top: 2px; }
.lugar:active { border-color: var(--bio); }
/* El lugar ACTÚA —cura, pincha, dobla, quita o pone al golpe— y se enciende un
   momento, con el rótulo del guión encima. Igual que `.carta.dispara`. */
.lugar.dispara { animation: lugar-dispara .52s ease-out; }
@keyframes lugar-dispara {
  0%   { box-shadow: 0 0 0 0 var(--lugar-tinte, var(--bio)); filter: brightness(1.6); }
  100% { box-shadow: 0 0 0 6px transparent; filter: none; }
}
@media (min-width: 560px) {
  .lugar i { display: block; }
}

/* Franja de campo activo. */
.franja {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--linea);
  background: linear-gradient(90deg, rgba(217,164,65,.07), rgba(217,164,65,.02));
  font-size: 12px; min-height: 26px;
}
/* Se llama Clima porque es lo único que admite. Cuando ponía «Campo» se leía
   como «el sitio donde se juegan las cartas al campo» y ahí se soltaba de
   todo: una Mortandad, un recurso, cualquier cosa sin objetivo. */
.franja::before {
  content: 'Clima'; flex: 0 0 auto;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue);
}
.franja-campo {
  flex: 1; text-align: left; color: var(--tenue-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Vacía se ve como un hueco por llenar; con clima puesto, como una carta. */
.franja:not(:has(.franja-campo.puesto)) { border-style: dashed; }
.franja:has(.franja-campo.puesto) {
  border-color: var(--borde-fuerte);
  background: linear-gradient(90deg, rgba(217,164,65,.13), rgba(217,164,65,.04));
}
.franja-campo.puesto { color: var(--texto); }
.franja.destino { border-style: solid; border-color: var(--bio); background: rgba(217,164,65,.16); }
.franja-nota { color: var(--tenue-2); font-size: 10px; flex: 0 0 auto; }
/* Lo tuyo comprometido: se puede tocar, así que tiene que parecer un botón. */
.franja-mias {
  flex: 0 0 auto; font-size: 10px; color: var(--acento-claro);
  border: 1px solid var(--borde-fuerte); border-radius: 20px; padding: 3px 9px;
  white-space: nowrap;
}
.franja-mias:active { background: rgba(217,164,65,.12); }

/* Elegir varios: la opción marcada tiene que verse marcada. */
.opcion.marcada { border-color: var(--bio); background: rgba(217, 164, 65, .14); }
.opcion.aplicar { text-align: center; border-color: var(--bio); color: var(--acento-claro); }
.opcion.aplicar[disabled] { opacity: .45; border-color: var(--linea); color: var(--tenue); }

.comp-fila {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 6px;
  background: rgba(244,236,224,.04); border: 1px solid var(--linea); font-size: 13px;
}
.comp-fila .nom { flex: 1; min-width: 0; }
.comp-fila .nom i { font-style: italic; }
.comp-fila .que { display: block; font-size: 11px; color: var(--tenue); margin-top: 2px; }
.comp-fila .retirar {
  flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 12px;
  border: 1px solid var(--borde); border-radius: var(--radio); color: var(--acento-claro);
}
.comp-fila .retirar:active { border-color: var(--bio); }
.comp-fila .fijo { flex: 0 0 auto; font-size: 11px; color: var(--tenue); }

/* ----------------------------------------------------------------- carta */

/* Una sola composición para las tres escalas: ventana de arte arriba, coste en
   círculo sobre ella, nombre y las tres cifras debajo. Lo que cambia entre la
   ranura, la mano y el visor es el tamaño, nunca el orden. */
.carta {
  position: relative;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--superficie-2), var(--panel-alto) 40%, var(--panel));
  box-shadow: 0 0 0 1px var(--borde);
  display: flex; flex-direction: column;
  overflow: hidden;
  will-change: transform;
}

.c-arte {
  flex: 0 0 auto; height: 52px; position: relative;
  background: radial-gradient(120% 90% at 50% 15%, rgba(217,164,65,.07), transparent 70%), #14100c;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.c-arte svg { width: 100%; height: 100%; padding: 3px; }
/* La foto recorta y llena, y baja al valor de la interfaz: a este tamaño lo que
   se reconoce de un vistazo es el clado, no el detalle. */
.c-arte .foto {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85) brightness(.8);
}
/* Un velo abajo para que el nombre se lea sobre cualquier ilustración. */
.c-arte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(25,20,16,.45) 0%, transparent 40%, rgba(29,22,16,.75) 100%);
}

.c-coste {
  position: absolute; top: 3px; left: 3px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(20,15,11,.9); border: 1px solid var(--borde);
  color: var(--texto); font-size: 9px; font-weight: 500;
  display: grid; place-items: center;
}
.carta--ranura.propio .c-coste, .carta--mano .c-coste { border-color: var(--bio); }
.carta--ranura.rival .c-coste { border-color: var(--rival); }

.c-cuerpo { flex: 1; min-height: 0; padding: 4px; display: flex; flex-direction: column; gap: 4px; }
.c-nombre {
  font-size: 9px; line-height: 1.15; font-style: italic; color: var(--texto);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.carta.no-dino .c-nombre { font-style: normal; }
.c-tipo {
  margin-top: auto; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue);
}

/* La clave de estadísticas: glifo y color fijos en todas las pantallas.
   Van en fila y pegados a su cifra; en columna y con la cifra empujada al otro
   extremo eran tres renglones sueltos que no se leían como un grupo. */
.c-stats { display: flex; gap: 5px; font-size: 9px; margin-top: auto; }
/* Sin recuadro a tamaño de juego: en una carta de la mano, 67 px de ancho, las
   tres fichas con fondo y relleno no caben en una línea y la Vida se caía
   sola abajo. El color del glifo ya distingue las tres. */
.st { display: inline-flex; align-items: center; gap: 2px; }
.st i {
  width: 1.05em; height: 1.05em; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.st i svg { width: 100%; height: 100%; display: block; }
/* El nombre viaja siempre en el DOM y sólo asoma donde hay sitio. */
.st u { display: none; text-decoration: none; }
.st b { font-weight: 500; color: var(--texto); }
.st b em { font-style: normal; color: var(--tenue-2); }
.st-a i { color: var(--acento-claro); }
.st-d i { color: var(--agua); }
.st-v i { color: var(--vida); }
/* El recuadro sólo donde hay sitio para él. */
.ficha-cifras .st {
  padding: 1px 4px 1px 3px; border-radius: 3px; background: rgba(255, 255, 255, .045);
}
.ficha-cifras .st-a { background: rgba(217, 164, 65, .1); }
.ficha-cifras .st-d { background: rgba(126, 158, 176, .1); }
.ficha-cifras .st-v { background: rgba(214, 122, 90, .1); }
.st-a.mejorado b { color: var(--bio); }
.st-a.mermado b { color: var(--peligro); }
.st-v.herido b { color: var(--vida); }

/* Las cartas que no son dinosaurio no compiten con las que sí: fondo frío. */
.carta.no-dino { background: linear-gradient(180deg, #221d2c, #191320); }
.carta.no-dino .c-arte { background: #171320; }

.carta--ranura {
  position: absolute; inset: 0;
  transition: opacity .3s, transform .3s;
}
/* Las cifras al pie de la carta: la ranura es más alta que su contenido y
   dejarlas pegadas al nombre abría un hueco muerto debajo. */
/* La ranura es la carta más estrecha del juego y las tres cifras han de caber
   en una línea: si se parten, la Vida se sale por abajo del recorte y
   desaparece. `justify-content: space-between` reparte lo que sobre en vez de
   dejarlo todo al final, y el hueco mínimo evita que ninguna se corte. */
.carta--ranura .c-stats { margin-top: auto; justify-content: space-between; gap: 1px; }
.carta--ranura .st { gap: 1px; }
/* Los 54 px de la ranura tienen que aguantar el peor caso del set, que es
   Apatosaurus: 4 · 3 · 12, con la Vida de dos cifras. Un glifo algo menor y un
   punto menos de margen es lo que hace falta para que quepa sin partirse. */
.carta--ranura .st i { width: .92em; height: .92em; }
.carta--ranura .c-cuerpo { padding: 4px 3px; }

/* Ranura de enfrente vacía: por ahí pasa el daño. En lo tuyo se enciende en
   ámbar, en lo del rival en rojo, y es lo único encendido del tablero. */
.carta--ranura.propio.pasa { box-shadow: 0 0 0 1px var(--bio), 0 0 14px rgba(217,164,65,.2); }
.carta--ranura.rival.pasa { box-shadow: 0 0 0 1px var(--rival); }
.carta--ranura.pasa .c-arte::before {
  content: '›'; position: absolute; z-index: 2; top: 2px; right: 4px;
  font-size: 13px; line-height: 1; color: var(--acento-claro);
  text-shadow: 0 1px 3px #000;
}
.carta--ranura.rival.pasa .c-arte::before { color: var(--rival); transform: rotate(90deg); }
.carta--ranura.propio.pasa .c-arte::before { transform: rotate(-90deg); }

/* La rareza se lee en el borde, en la escala ámbar: común apagada, rara y
   épica firmes, legendaria encendida. */
.carta.rareza-RARO, .carta.rareza-EPICO { box-shadow: 0 0 0 1px var(--borde-fuerte); }
.carta.rareza-LEGENDARIO { box-shadow: 0 0 0 1px var(--bio); }

/* ==================================================== el guión de eventos

   Los gestos que `src/ui/guion.js` puede pedir. Cada uno es una clase que se
   pone y se quita sola, y ninguno cambia el tamaño de la carta: se pintan en
   `box-shadow`, `filter` y pseudoelementos porque el tablero es una rejilla y
   una carta que crece de verdad empuja a las de al lado a media animación. */

/* Dispara una habilidad: se enciende desde dentro. */
.carta.dispara { animation: disparar .5s ease-out; }
@keyframes disparar {
  0%   { box-shadow: 0 0 0 0 rgba(232,192,121,.0); filter: brightness(1); }
  35%  { box-shadow: 0 0 0 3px rgba(232,192,121,.55), 0 0 20px rgba(232,192,121,.4);
         filter: brightness(1.35); }
  100% { box-shadow: 0 0 0 0 rgba(232,192,121,0); filter: brightness(1); }
}

/* Gana algo permanente. */
.carta.crece { animation: crecer .68s ease-out; }
@keyframes crecer {
  0%   { filter: brightness(1); box-shadow: 0 0 0 0 rgba(140,200,120,0); }
  40%  { filter: brightness(1.25) saturate(1.2);
         box-shadow: 0 0 0 2px rgba(140,200,120,.6), 0 0 18px rgba(140,200,120,.35); }
  100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(140,200,120,0); }
}

/* Le quitan algo. */
.carta.merma { animation: mermar .68s ease-out; }
@keyframes mermar {
  0%   { filter: brightness(1) saturate(1); }
  35%  { filter: brightness(.72) saturate(.5);
         box-shadow: 0 0 0 2px var(--rival), 0 0 16px rgba(224,138,103,.4); }
  100% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 0 transparent; }
}

/* Vuelve a la mano: la única cosa que deshace un despliegue. Se desvanece en
   su sitio y no se encoge ni se va volando, por la regla de arriba —la rejilla
   no perdona—; el vuelo de vuelta a la mano lo hace el fantasma de `render.js`,
   que va por encima de todo y no compone con esto. */
.carta.rebota { animation: rebotar .42s ease-in; }
@keyframes rebotar {
  0%   { opacity: 1; filter: brightness(1); }
  55%  { opacity: .5; filter: brightness(1.5) saturate(.45);
         box-shadow: 0 0 0 2px rgba(150,190,230,.6), 0 0 18px rgba(150,190,230,.35); }
  100% { opacity: 1; filter: brightness(1); box-shadow: 0 0 0 0 transparent; }
}

/* Se cura. */
.carta.cura { animation: curarse .6s ease-out; }
@keyframes curarse {
  0%, 100% { filter: brightness(1); }
  45%      { filter: brightness(1.2) hue-rotate(-8deg); }
}

/* El nombre del rasgo, SOBRE la carta que lo dispara y no colgando de su borde
   superior: colgado se recortaba contra la cabecera en la fila del rival y
   contra la franja de clima en la tuya, y encima cambiaba de sitio según la
   fila. Centrado no depende de dónde esté la carta. */
.rotulo-rasgo {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  transform: translate(-50%, -50%);
  padding: 2px 7px; border-radius: 4px;
  background: rgba(20,16,12,.92); box-shadow: 0 0 0 1px var(--bio);
  color: var(--acento-vivo); font-size: 9px; font-weight: 600;
  white-space: nowrap; pointer-events: none;
  animation: rotular 1.1s ease-out both;
}
.rotulo-rasgo.bueno { box-shadow: 0 0 0 1px #8cc878; color: #b7e0a6; }
.rotulo-rasgo.malo { box-shadow: 0 0 0 1px var(--peligro); color: #f0a08a; }
@keyframes rotular {
  0%   { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(.92); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 14px)) scale(1); }
}

/* Lo que no cuelga de ninguna carta: la Mortandad, el clima que se impone. */
.anuncio {
  position: absolute; left: 50%; top: 50%; z-index: 8;
  transform: translate(-50%, -50%);
  padding: 7px 16px; border-radius: 6px;
  background: rgba(20,16,12,.94); box-shadow: 0 0 0 1px var(--borde-fuerte);
  color: var(--texto); font-size: 13px; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap; pointer-events: none;
  animation: anunciar 1.2s ease-out both;
}
.anuncio.malo { box-shadow: 0 0 0 1px var(--rival); color: var(--vida); }
.anuncio.bueno { box-shadow: 0 0 0 1px #8cc878; color: #b7e0a6; }
.anuncio.clima { box-shadow: 0 0 0 1px var(--bio); color: var(--acento-vivo); }
@keyframes anunciar {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1); }
}

/* Un contador del marcador que acaba de moverse. */
.pulso { animation: pulsar .5s ease-out; }
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  40%      { box-shadow: 0 0 0 2px var(--bio), 0 0 12px rgba(217,164,65,.35); }
}

/* ======================================================== la carta tiene cuerpo

   Hasta ahora una carta era un rectángulo plano con un borde. Esto le da
   volumen sin tocar el layout ni una sola vez:

   - un BRILLO ESPECULAR fijo en diagonal, que es lo que hace que una superficie
     parezca material y no un div;
   - una SOMBRA propia que la levanta del tablero;
   - una INCLINACIÓN que sigue al puntero, sólo en la mano y sólo donde hay
     puntero fino.

   La inclinación NO lleva envoltorio y NO se aplica en el tablero, por la misma
   razón las dos veces: `transform` es una sola propiedad y quien la escriba
   último gana. En el tablero las cartas corren `aterrizar`, `embestida` y
   `voltear`; en la mano ya estaba `alzada` con su `translateY`. Así que en la
   mano se compone todo en un solo `transform` con variables —`--alzar` para el
   gesto de coger, `--tx`/`--ty` para la inclinación— y en el tablero no se
   toca. */

.carta::before {
  content: ''; position: absolute; inset: 0; z-index: 3;
  pointer-events: none; border-radius: inherit;
  background: linear-gradient(150deg,
    rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 26%,
    transparent 46%, transparent 100%);
}

.carta--mano {
  --alzar: 0px;
  --tx: 0;
  --ty: 0;
  /* La sombra que la levanta va en `filter` y no en `box-shadow`: el aro de
     rareza ya ocupa el box-shadow y gana por especificidad —`.carta.rareza-RARO`
     son dos clases—, así que puestas ahí las dos, la profundidad desaparecía en
     todo lo que no fuera común. En `filter` conviven. */
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55));
  transform: translateY(var(--alzar))
             perspective(620px)
             rotateX(calc(var(--ty) * -7deg))
             rotateY(calc(var(--tx) * 9deg));
  transition: transform .18s ease-out, filter .18s ease-out;
}

/* El arte se mueve un poco menos que el marco: eso es el paralaje, y es lo que
   convierte una inclinación en profundidad en vez de en un giro. El `scale`
   sobra por los bordes justo lo que el desplazamiento va a descubrir. */
.carta--mano .c-arte > * {
  transform: translate(calc(var(--tx) * -3px), calc(var(--ty) * -3px)) scale(1.07);
  transition: transform .18s ease-out;
}

/* Mientras se arrastra manda el arrastre. */
.carta--mano.arrastrando { --tx: 0; --ty: 0; transition: none; }

@media (hover: none) {
  /* Sin puntero fino no hay inclinación que seguir: se queda el brillo. */
  .carta--mano { --tx: 0; --ty: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .carta--mano, .carta--mano .c-arte > * { transition: none; }
  .carta--mano { --tx: 0; --ty: 0; }
  .carta.dispara, .carta.crece, .carta.merma, .carta.cura, .carta.rebota,
  .pulso, .carta--mano.nueva, .pila.aviso b, .habitat.peligro .habitat-barra i,
  .habitat.golpe .habitat-barra i::after, .rec.cerca b { animation: none; }
  .rotulo-rasgo, .anuncio { animation-duration: .01s; animation-timing-function: step-end; }
}

/* ------------------------------------------------ las legendarias se ven

   Doce de las sesenta y seis, y hasta ahora se distinguían por un borde de 1 px
   que en un móvil no se ve. Dos tratamientos y ninguno toca el layout —todo va
   en pseudoelementos y en `box-shadow`— porque estas cartas se pintan dentro de
   rejillas y de una animación de volteo que no admite que nada cambie de
   tamaño a media reproducción.

   En la COLECCIÓN, un brillo que barre el arte cada seis segundos. Lento a
   propósito: una rejilla de cuarenta cartas con algo parpadeando es una
   pantalla que no se puede leer.

   AL JUGARSE, un destello de oro que sale del borde y se apaga. Se engancha a
   `.aterriza`, que ya existe y que sólo dura lo que dura la entrada. */

/* Sobre la ventana del marco, en la colección y en el sobre. Tres clases
   para ganar al `background: none` que carta.css le pone al velo de la
   ventana en toda carta con marco. */
.col-carta.rareza-LEGENDARIO .c-arte,
.sobre-carta.rareza-LEGENDARIO .c-arte { overflow: hidden; }

.col-carta.rareza-LEGENDARIO .c-arte::after,
.sobre-carta.rareza-LEGENDARIO .c-arte::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 38%, rgba(244,217,155,.34) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: brillo-legendario 6s ease-in-out infinite;
}

@keyframes brillo-legendario {
  0%, 72% { background-position: 160% 0; }
  100%    { background-position: -60% 0; }
}

/* El aro de la colección: el marco de oro ya dice legendaria, esto es el halo. */
.col-carta.rareza-LEGENDARIO .carta { box-shadow: 0 0 18px rgba(217,164,65,.22); }

/* Al caer en su ranura. Va como box-shadow del propio elemento y no como
   pseudoelemento: `.carta` lleva `overflow: hidden` y recortaría un `::after`
   desbordado, que es justo lo que un halo necesita hacer.

   Se re-declara `aterrizar` al lado porque las dos animaciones comparten
   propiedad y la segunda declaración habría borrado la primera. Y sin `both` en
   el destello: si se quedara en su último fotograma la carta arrastraría el
   halo el resto de la partida. */
.carta--ranura.rareza-LEGENDARIO.aterriza {
  animation: aterrizar .26s ease-out both, destello-legendario .62s ease-out;
}

@keyframes destello-legendario {
  0%   { box-shadow: 0 0 0 0 rgba(244,217,155,.75), 0 0 22px 6px rgba(217,164,65,.5); }
  100% { box-shadow: 0 0 0 14px rgba(244,217,155,0), 0 0 0 0 rgba(217,164,65,0); }
}

/* Quien pide menos movimiento se queda con el oro y sin el barrido: el aro
   sigue diciendo que es legendaria sin que nada se mueva en bucle. */
@media (prefers-reduced-motion: reduce) {
  .col-carta.rareza-LEGENDARIO .c-arte::after,
  .sobre-carta.rareza-LEGENDARIO .c-arte::after { animation: none; }
  .carta--ranura.rareza-LEGENDARIO.aterriza { animation: aterrizar .26s ease-out both; }
}

/* El bando y la marca de paso mandan sobre la rareza: en el tablero importa
   más de quién es la carta y por dónde entra el daño. */
.carta--ranura.propio { box-shadow: 0 0 0 1px var(--propio-tenue); }
.carta--ranura.rival { box-shadow: 0 0 0 1px var(--rival-tenue); }
.carta--ranura.propio { box-shadow: 0 0 0 1px var(--propio-tenue); }
.carta--ranura.rival { box-shadow: 0 0 0 1px var(--rival-tenue); }
/* El retardo lo pone animarRevelacion() para que las cartas se abran en
   cadena y no las diez a la vez. Sin variable, vale 0 y entra al instante. */
.carta--ranura.entra { animation: voltear .4s ease-out var(--retardo, 0ms) both; }
.carta--ranura.muere { opacity: 0; transform: scale(.8) rotate(-7deg); }
.carta--ranura.golpeada { animation: sacudida .35s ease-out; }
/* Embestir no es lo mismo que ser golpeado, y tiene que verse distinto: la
   sacudida se lee como «me han dado». Esto empuja hacia el rival y vuelve. */
.carta--ranura.embiste { animation: embestida .4s ease-out; }
@keyframes embestida {
  0%, 100% { transform: none; }
  45% { transform: translateY(-9px) scale(1.04); filter: brightness(1.15); }
}
.fila-ranuras[data-bando="1"] .carta--ranura.embiste { animation-name: embestida-rival; }
@keyframes embestida-rival {
  0%, 100% { transform: none; }
  45% { transform: translateY(9px) scale(1.04); filter: brightness(1.15); }
}
/* La barra del hábitat necesita sitio para el número flotante. */
.habitat { position: relative; }
.carta--ranura.pendiente { box-shadow: 0 0 0 1px var(--bio); opacity: .92; }

/* La mano es una fila, no un abanico: a 360 px el abanico solapaba las cartas
   y había que adivinar dónde empezaba cada una. */
.carta--mano {
  flex: 0 0 auto; height: 100%; width: auto; aspect-ratio: 82 / 112;
  transition: transform .18s ease-out, box-shadow .18s;
}
.carta--mano .c-nombre { font-size: 10px; }
.carta--mano .c-stats { flex-direction: row; gap: 6px; margin-top: auto; }
.carta--mano .st { justify-content: flex-start; gap: 2px; }
.carta--mano.impagable { opacity: .45; }
.carta--mano.impagable .c-coste { border-color: var(--peligro); color: var(--peligro); }
/* Lo que se puede jugar AHORA se enciende: lo dice `legales`, así que cuenta
   la fase, la Biomasa, los huecos y los objetivos. Una carta pagable sin hueco
   se queda apagada sin atenuarse: no es que no llegues, es que no hay sitio.
   Va en `filter`, como la sombra, porque el aro de rareza ocupa el box-shadow. */
.carta--mano.jugable {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) drop-shadow(0 0 5px rgba(217,164,65,.6));
}
.carta--mano.jugable .c-coste { box-shadow: 0 0 6px rgba(217,164,65,.8); }
/* La recién robada destella al aterrizar. La animación arranca cuando se le
   quita `en-vuelo` —el fantasma acaba de llegar— y `backwards`, no `both`,
   para que al terminar mande otra vez la cascada (el brillo de jugable). */
.carta--mano.nueva:not(.en-vuelo) { animation: recien-robada 1.1s ease-out backwards; }
@keyframes recien-robada {
  0%   { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) brightness(1.7) drop-shadow(0 0 12px rgba(244,236,224,.95)); }
  35%  { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)) brightness(1.15) drop-shadow(0 0 8px rgba(217,164,65,.8)); }
  100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
}
/* `--alzar` y no `transform`: la carta de la mano compone el gesto de coger y
   la inclinación del puntero en una sola propiedad, y escribir `transform` aquí
   habría borrado la inclinación justo al levantarla, que es cuando se mira. */
.carta--mano.alzada { box-shadow: 0 0 0 1px var(--bio), 0 10px 26px rgba(0,0,0,.6); --alzar: -6px; }
/* Mientras la arrastras, en su hueco de la mano queda la carta boca abajo:
   iba al 25 % de opacidad, y la cara medio borrada con la inclinación puesta
   se leía como una carta girada a medias. El dorso va en un `::after` por
   encima de todo lo de la carta —el marco está en z 2, el coste en 4— y es
   además el único sitio de la partida donde se puede MIRAR el dorso comprado:
   las demás veces pasa volando. */
.carta--mano.arrastrando { --alzar: 0px; box-shadow: none; }
.carta--mano.arrastrando::after {
  content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit;
  background: #1c1610 var(--dorso, url('assets/piel/dorso.webp')) center / 100% 100% no-repeat;
  filter: var(--dorso-filtro, none) brightness(.85);
}

.c-adap { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%;
          background: var(--bio); box-shadow: 0 0 0 1px #17120e; }
/* Presión rival encima: cuadrado y rojo, distinto de la adaptación a propósito
   —a 67 px de ancho el color solo no basta para decir qué le pasa a la carta. */
.c-merma { position: absolute; right: 3px; top: 13px; width: 7px; height: 7px;
           background: var(--peligro); box-shadow: 0 0 0 1px #17120e; }

/* Reverso: el dorso dibujado, el mismo que enseña el sobre al girar. */
.carta-dorso {
  position: absolute; inset: 0; border-radius: 6px;
  background: #1c1610 var(--dorso, url('assets/piel/dorso.webp')) center / 100% 100% no-repeat;
  filter: var(--dorso-filtro, none);
}

@keyframes voltear {
  from { transform: rotateY(90deg) scale(.75); opacity: 0; }
  to { transform: rotateY(0) scale(1); opacity: 1; }
}
@keyframes sacudida {
  0%,100% { transform: none; }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.dano-flotante {
  position: absolute; left: 50%; top: 30%;
  transform: translateX(-50%);
  font-size: 17px; font-weight: 800; color: var(--vida);
  text-shadow: 0 1px 3px #000; pointer-events: none; z-index: 20;
  animation: subeDano .8s ease-out forwards;
}
/* «sin daño» no es un golpe: ni el tamaño ni el rojo de una cifra de daño. */
/* «3 turnos» sobre la pila: cabe en una línea o no cabe. */
.dano-flotante.turnos { font-size: 10px; white-space: nowrap; }
.dano-flotante.nulo { font-size: 10px; font-weight: 700; color: var(--tenue); white-space: nowrap; }

@keyframes subeDano {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); }
  25% { opacity: 1; transform: translate(-50%, -4px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

/* ------------------------------------------------------------------- pie */

#pie {
  background: rgba(15,11,8,.6); border-top: 1px solid var(--linea);
  padding: 6px 14px calc(8px + var(--seguro-abajo));
  display: flex; flex-direction: column; gap: 6px;
}

.mensaje {
  font-size: 11px; line-height: 1.4; color: var(--acento-claro);
  /* En el flujo del pie, con su fila. Estuvo flotando con `bottom: 100%` para
     ahorrar 28 px, y caía justo encima de la barra de hábitat del jugador, que
     es lo que hay sobre el pie. Y el ahorro era falso: la fila de ranuras mide
     146 px y la carta sólo usa 114 —manda el ancho—, así que estos 28 salen del
     aire sobrante y la carta no se mueve. */
  min-height: 28px;
  display: flex; align-items: center; overflow: hidden;
}
.mensaje.aviso { color: var(--peligro); }

/* La mano es una fila con desbordamiento lateral. Era un abanico: bonito de
   lejos y ilegible a 360 px, con las cartas tapándose unas a otras y el borde
   metiéndose debajo del botón Listo. */
#mano {
  display: flex; align-items: flex-end; gap: 6px;
  height: clamp(94px, 16vh, 112px); flex: 0 0 auto;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
#mano::-webkit-scrollbar { display: none; }
/* Un velo al borde derecho dice que hay más mano de la que se ve. */
#pie { position: relative; }
#pie::after {
  content: ''; position: absolute; right: 0; bottom: 62px; width: 22px; height: clamp(94px, 16vh, 112px);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(15,11,8,.85));
}

.barra { display: flex; align-items: center; gap: 7px; }
.boton-listo {
  flex: 1; min-height: 44px; border-radius: var(--radio);
  background: rgba(217,164,65,.12); border: 1px solid var(--bio); color: var(--texto);
  font-size: 15px; box-shadow: 0 0 20px rgba(217,164,65,.2);
}
.boton-listo:disabled { background: none; border-color: var(--borde); color: var(--tenue-2); box-shadow: none; }
.boton-listo:active:not(:disabled) { background: rgba(217,164,65,.22); }

.boton-icono {
  width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto-2); font-size: 14px; display: grid; place-items: center;
}
.boton-icono:active { border-color: var(--borde-fuerte); }
.boton-icono.off { color: var(--tenue-2); }
/* Silenciado se ve, no sólo se atenúa: una raya cruzada sobre la nota. */
.boton-icono { position: relative; }
.boton-icono.off::after {
  content: ''; position: absolute; width: 22px; height: 2px;
  background: currentColor; transform: rotate(-45deg); border-radius: 1px;
}

/* El mismo botón en la puerta, el menú y la pantalla de jugar, en la esquina
   de arriba a la derecha, por encima de la portada. La música arranca antes
   de que el jugador toque nada, así que tiene que poder callarla desde la
   primera pantalla que ve y no desde dentro de una partida. */
.boton-sonido {
  position: absolute; top: calc(var(--seguro-arriba) + 12px); right: 14px; z-index: 3;
  background: rgba(25, 20, 16, .55); backdrop-filter: blur(4px);
  border-color: rgba(255, 255, 255, .14); color: var(--texto);
}
.boton-sonido.off { color: var(--tenue); }

/* El ancho y alto de aquí son sólo el valor de reserva: `empezarArrastre` los
   pisa con la medida real de una ranura, que sale del `1fr` de la fila y cambia
   con la pantalla —83×114 en un 360 px, 100×137 con la app a 430—. Fijos, el
   fantasma se quedaba pequeño frente al destino encendido. */
.arrastre {
  position: fixed; z-index: 60; width: 82px; height: 112px; pointer-events: none;
  transform: translate(-50%, -60%) scale(1.06);
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.7));
}

/* -------------------------------------------------------------- mulligan */

/* Va pegada al pie, sobre la mano: la decisión es sobre las cartas que estás
   viendo, así que taparlas con una hoja sería absurdo. */
.mulligan {
  position: absolute; z-index: 55; left: 8px; right: 8px; bottom: 178px;
  background: var(--panel-alto); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  padding: 10px 12px; box-shadow: 0 8px 26px rgba(0,0,0,.6);
  animation: subir .2s ease-out;
}
.mulligan p { font-size: 12.5px; line-height: 1.4; color: var(--texto-2); }
.mulligan p b { color: var(--acento-claro); font-weight: 500; }
.mulligan-botones { display: flex; gap: 8px; margin-top: 9px; }
.mulligan-cambiar {
  flex: 1; min-height: 40px; border-radius: var(--radio);
  border: 1px solid var(--bio); background: rgba(217,164,65,.12); color: var(--texto); font-size: 13px;
}
.mulligan-cambiar:active { background: rgba(217,164,65,.22); }
.mulligan-quedarse {
  flex: 1; min-height: 40px; border-radius: var(--radio);
  border: 1px solid var(--borde); color: var(--texto-2); font-size: 13px;
}
.mulligan-quedarse:active { border-color: var(--borde-fuerte); }

/* -------------------------------------------------------------- tutorial */

/* Encima del pie y por debajo de las hojas: explica el tablero, así que no
   puede taparlo entero ni robarle el sitio a la mano. */
.tutorial {
  position: absolute; z-index: 60; left: 8px; right: 8px; bottom: 190px;
  background: var(--panel); border: 1px solid var(--bio); border-radius: var(--radio);
  padding: 11px 12px; box-shadow: 0 8px 26px rgba(0,0,0,.6);
  animation: subir .2s ease-out;
}
.tutorial p { font-size: 13px; line-height: 1.45; color: var(--texto-2); }
.tutorial b { color: var(--acento-claro); font-weight: 500; }
.tutorial-pie { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tutorial-saltar {
  flex: 1; text-align: left; font-size: 11.5px; color: var(--tenue); min-height: 34px;
}
.tutorial-siguiente {
  flex: 0 0 auto; min-height: 38px; padding: 0 18px; border-radius: var(--radio);
  background: var(--bio); color: #191410; font-weight: 500; font-size: 13px;
}

/* ----------------------------------------------------------------- hojas */

.hoja {
  position: absolute; z-index: 70; left: 0; right: 0; bottom: 0; max-height: 84%;
  display: flex; flex-direction: column;
  background: var(--panel-alto); border-top: 1px solid var(--borde);
  border-radius: 14px 14px 0 0; padding: 16px 18px calc(16px + var(--seguro-abajo));
  box-shadow: 0 -16px 40px rgba(0,0,0,.65);
  animation: subir .22s ease-out;
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

.hoja-titulo { font-size: 19px; font-weight: 500; letter-spacing: -.01em; margin-bottom: 5px; }
.hoja-texto { font-size: 13px; color: var(--tenue); margin-bottom: 10px; }
/* `min-height: 0` con la base en el contenido: la hoja no tiene altura fija
   —crece con lo que lleva hasta el tope del 84 %—, así que la base ha de ser
   `auto` para que no se colapse, y el mínimo cero para que sí pueda encogerse
   cuando el tope muerde. Sin esto recortaba el final en vez de scrollear. */
.hoja-cuerpo {
  flex: 0 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
/* Cerrar es la acción de acento de la hoja: si no, la hoja no tiene salida
   evidente y se toca fuera a ciegas. */
.hoja-cerrar {
  margin-top: 14px; min-height: 46px; border-radius: var(--radio);
  border: 1px solid var(--bio); background: rgba(217,164,65,.12); color: var(--texto);
}
.hoja-cerrar:active { background: rgba(217,164,65,.22); }
/* Rendirse vive en la hoja de registro, no en la barra: es una salida, no una
   jugada, y en la barra competiría con Listo. En rojo porque termina la partida. */
.hoja-accion {
  margin-top: 12px; min-height: 46px; border: 1px solid var(--vida-tenue, var(--borde));
  border-radius: var(--radio); color: var(--vida); font-size: 14px;
}
.hoja-accion:active { border-color: var(--vida); }

/* Pasar de carta sin cerrar la ficha. Va pegado arriba —`sticky`— porque la
   hoja se desplaza y los botones tienen que seguir ahí con la carta larga; y
   con el fondo de la hoja detrás, que si no el texto pasa por debajo. */
.ficha-pasar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -4px 0 6px; padding: 4px 0 6px; background: var(--panel-alto);
}
.ficha-pasar span { font-size: 11.5px; color: var(--tenue); letter-spacing: .04em; }
.ficha-pasar button {
  min-width: 46px; min-height: 38px; border-radius: 8px; font-size: 20px; line-height: 1;
  border: 1px solid var(--borde); color: var(--texto-2); background: rgba(15,11,8,.5);
}
.ficha-pasar button:active:not([disabled]) { border-color: var(--bio); color: var(--texto); }
.ficha-pasar button[disabled] { opacity: .3; }

.ficha-cab { margin-bottom: 10px; }
/* La carta con su marco, centrada y al mismo tamaño que en el visor: es la
   misma pieza, y aquí la ficha sólo añade lo que la carta no lleva impreso. */
.ficha-carta { width: min(268px, 78vw); margin: 0 auto 12px; }
.ficha-carta .carta { border-radius: 12px; }
.ficha-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ficha-ampliar {
  font-size: 11.5px; color: var(--acento-claro);
  border: 1px solid var(--borde); border-radius: 20px; padding: 5px 12px;
}
.ficha-ampliar:active { border-color: var(--borde-fuerte); }
.ficha-binomial { font-style: italic; font-size: 22px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; }
.ficha-binomial.recto { font-style: normal; }
.ficha-clado {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--tenue); margin-top: 4px;
}
.ficha-rareza { padding: 2px 7px; border-radius: 3px; box-shadow: 0 0 0 1px currentColor; }

/* Las cifras del estado en partida, con la misma clave de color que la carta
   para que el jugador no tenga que traducir entre dos claves distintas. */
.ficha-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 10px;
}
.ficha-cifras .st { flex-direction: column; gap: 1px; padding: 6px 2px 5px; border-radius: 5px; }
.ficha-cifras .st u {
  display: flex; align-items: center; gap: 3px;
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue);
}
.ficha-cifras .st i { width: 11px; height: 11px; }
.ficha-cifras .st b { font-size: 17px; line-height: 1.1; }
.st-c i { color: var(--tenue-2); font-size: .8em; }
.cifra { display: inline-flex; align-items: center; gap: 5px; color: var(--tenue); }
.cifra b { color: var(--texto); font-size: 14px; font-weight: 500; }
.cifra i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.cifra.ca i::before, .cifra.cd i::before, .cifra.cv i::before {
  content: ''; width: 5px; height: 5px; border-radius: 1px;
}
.cifra.ca i::before { background: var(--acento-claro); }
.cifra.cd i::before { background: var(--agua); }
.cifra.cv i::before { background: var(--vida); }

/* Lo que le está pasando a esta copia concreta. Va entre la cabecera y el
   rasgo porque es lo que decide la jugada de ahora, no lo que dice la carta. */
.ficha-juego {
  margin: 12px 0; padding: 11px 12px; border-radius: var(--radio);
  background: rgba(244, 236, 224, .035); box-shadow: 0 0 0 1px var(--linea);
}
.ficha-juego h3 {
  font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 8px;
}
.ficha-juego .ficha-cifras { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.ficha-efectos { list-style: none; margin-top: 10px; display: grid; gap: 6px; }
.ficha-efectos li {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline;
  font-size: 12px; color: var(--tenue); padding-left: 8px;
  border-left: 2px solid var(--linea);
}
.ficha-efectos li b { font-weight: 500; color: var(--texto-2); }
.ficha-efectos li.bueno { border-left-color: var(--bio); }
.ficha-efectos li.malo { border-left-color: var(--peligro); }
.ficha-efectos li.malo b { color: var(--peligro); }

.ficha-rasgo {
  border-radius: var(--radio); padding: 10px 12px; margin-bottom: 12px;
  background: rgba(217,164,65,.06); border-left: 2px solid var(--bio);
}
.ficha-rasgo h3 {
  font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento-claro); margin-bottom: 5px;
}
.ficha-rasgo p { font-size: 13px; color: var(--texto-2); }

.evidencia {
  display: inline-block; font-size: 9.5px; letter-spacing: .09em;
  padding: 3px 8px; border-radius: 20px; margin-top: 9px; border: 1px solid currentColor;
}
.evidencia.ESTABLECIDO { color: #86a86b; }
.evidencia.INFERIDO { color: var(--acento-claro); }
.evidencia.DEBATIDO { color: var(--vida); }

.ficha-nota { font-size: 12.5px; line-height: 1.6; color: var(--tenue); }

.log-linea { font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--borde); line-height: 1.4; }
.log-linea:last-child { border-bottom: 0; }
.log-linea b { color: var(--texto); }
.log-linea.propio b { color: var(--propio); }
.log-linea.rival b { color: var(--rival); }
.log-turno { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin: 10px 0 2px; }

.opcion {
  display: block; width: 100%; text-align: left; padding: 12px 13px; margin-bottom: 7px;
  background: rgba(244,236,224,.04); border: 1px solid var(--borde);
  border-radius: var(--radio); min-height: 46px; font-size: 13px; color: var(--texto);
}
.opcion:active { border-color: var(--borde-fuerte); }
.opcion small { display: block; color: var(--tenue); font-size: 11.5px; margin-top: 3px; }

/* ----------------------------------------------------------------- visor */

/* La carta se dibuja a 67x94 y todo lo de dentro está en píxeles fijos: en vez
   de duplicar tamaños se escala el marco entero, que además mantiene la
   proporción exacta de la carta en el tablero. */
.visor {
  position: absolute; z-index: 90; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 16px 16px calc(16px + var(--seguro-abajo));
  background: rgba(8, 7, 5, .93); animation: aparecer .16s ease-out;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.visor-lienzo {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* La carta a tamaño de lectura es la misma que se juega, con su marco, a
   268 px: ahí la caja mide 84 px de alto y le cabe el texto de la habilidad.
   Debajo, el binomial entero y el clado, que la banda abrevia al género. */
.visor-marco { width: min(268px, 78vw); }
.carta--visor { width: 100%; aspect-ratio: 82 / 112; border-radius: 12px; }
.visor-leyenda {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-top: 12px; text-align: center;
}
.visor-binomial { font-size: 17px; font-style: italic; color: var(--texto); }
.visor-binomial.recto { font-style: normal; }
.visor-clado { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.visor-foto {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: var(--radio); border: 1px solid var(--borde);
}
/* La carta entera trae su propio borde dibujado, así que no se le pone otro
   encima: quedaría un filete gris rodeando la piedra. */
.visor-entera {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 10px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6));
}
.visor-pie { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.visor-modos { display: flex; gap: 6px; }
.visor-cerrar {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--borde);
  border-radius: var(--radio); color: var(--tenue);
}

/* ----------------------------------------------------------------- ayuda */

.ayuda-h { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--acento-claro); margin: 18px 0 8px; }
.ayuda-h:first-child { margin-top: 0; }
.ayuda-p { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.ayuda-p b { color: var(--texto); font-weight: 500; }

.ayuda-lista { list-style: none; font-size: 13px; line-height: 1.45; }
.ayuda-lista li { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--borde); }
.ayuda-lista li:last-child { border-bottom: 0; }
.ayuda-lista .k { flex: 0 0 84px; font-weight: 500; color: var(--acento-claro); }
.ayuda-lista .v { color: var(--tenue); min-width: 0; }

.ayuda-pasos { counter-reset: paso; list-style: none; font-size: 13px; }
.ayuda-pasos li { position: relative; padding: 5px 0 5px 26px; color: var(--tenue); line-height: 1.45; }
.ayuda-pasos li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: 6px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--panel-alto); border: 1px solid var(--borde);
  color: var(--texto); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ayuda-pasos b { color: var(--texto); font-weight: 600; }

/* La clave, no una carta con globos numerados: los glifos del cartel son los
   mismos que están en la carta, así que la explicación es la propia carta. */
.anatomia { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 10px; }
.anatomia-carta { position: relative; width: 96px; height: 134px; flex: 0 0 auto; }
.anatomia-carta .carta { position: absolute; inset: 0; }
.anatomia-notas { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.anatomia-notas div { display: flex; gap: 8px; padding: 4px 0; }
.anatomia-notas .n {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 4px;
  background: rgba(244,236,224,.05); box-shadow: 0 0 0 1px var(--borde);
  font-size: 10px; font-weight: 500;
  display: grid; place-items: center;
}
.anatomia-notas .n.c { border-radius: 50%; color: var(--texto); }
.anatomia-notas .n i { width: 11px; height: 11px; display: block; }
.anatomia-notas .n i svg { width: 100%; height: 100%; display: block; }
.anatomia-notas .n.st-a { color: var(--acento-claro); }
.anatomia-notas .n.st-d { color: var(--agua); }
.anatomia-notas .n.st-v { color: var(--vida); }
.anatomia-notas span { color: var(--tenue); }
.anatomia-notas b { color: var(--texto-2); font-weight: 500; }

.leyenda-ev { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--tenue); margin-top: 6px; }
.leyenda-ev span { display: inline-flex; align-items: center; gap: 5px; }
.leyenda-ev .ev { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ev.ESTABLECIDO { background: #86a86b; }
.ev.INFERIDO { background: var(--acento-claro); }
.ev.DEBATIDO { background: var(--vida); }

.ayuda-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.ayuda-tabla th, .ayuda-tabla td { padding: 5px 4px; text-align: left; border-bottom: 1px solid var(--borde); }
.ayuda-tabla th { color: var(--tenue); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.ayuda-tabla td.num { text-align: center; font-weight: 700; }

/* ----------------------------------------------------------------- debug */

.debug {
  position: absolute; z-index: 90; top: calc(var(--seguro-arriba) + 40px); left: 6px;
  font: 10px/1.4 ui-monospace, monospace; color: #7fb069;
  background: rgba(0,0,0,.75); padding: 4px 6px; border-radius: 4px;
  pointer-events: none; white-space: pre;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.mazo-nombre { touch-action: auto; }

/* ------------------------------------------------------------ La Cuenca
   La capa cooperativa. Reutiliza los tokens y los bloques de las pantallas
   meta: no es otra piel, es la misma pantalla con otro contenido. */

.cu-bloque {
  background: var(--tr-panel, rgba(255, 255, 255, .04));
  border: 1px solid var(--tr-borde, rgba(255, 255, 255, .09));
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 14px;
}

.cu-titulo { margin: 0 0 2px; font-size: 1.05rem; font-weight: 600; }
.cu-subtitulo { margin: 0 0 10px; opacity: .68; font-size: .85rem; }
.cu-nivel { font-size: .78rem; font-weight: 500; opacity: .6; }
.cu-linea { margin: 6px 0; font-size: .9rem; line-height: 1.45; }
.cu-nota { margin: 8px 0 0; font-size: .8rem; opacity: .6; line-height: 1.45; }
.cu-nota.mal { color: var(--rival, #d98b7a); opacity: .9; }
/* La puerta fuera de sus dos pestañas: recuperar la contraseña y ponerla. */
.ent-titulo { margin: 18px 0 12px; text-align: center; font: 600 1.05rem/1.3 'Cinzel', serif; color: var(--oro, #d9a441); }
.ent-enlace {
  display: block; width: 100%; margin-top: 10px; padding: 8px 4px; background: none; border: 0;
  color: var(--texto-2); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px;
}
.ent-enlace:active { color: var(--texto); }
.ent-legal { margin: 6px 0 0; text-align: center; font-size: .75rem; opacity: .55; }
.ent-legal a, .cu-version a { color: inherit; }
/* Borrar la cuenta: que se vea que no es un ajuste más, sin gritar. */
.cu-peligro { border-color: rgba(217, 139, 122, .28); }
.cu-peligro .cu-titulo { color: var(--rival, #d98b7a); }
.boton-secundario.cu-rojo { border-color: rgba(217, 139, 122, .6); color: #f0b4a6; }
.boton-secundario.cu-rojo:active { background: rgba(217, 139, 122, .16); }
.cu-version { margin: 4px 0 0; text-align: center; font-size: .72rem; letter-spacing: .08em; opacity: .4; }
.cu-version:empty { display: none; }
/* La barra de los gráficos bajados. Se DESPLAZA y no crece, como la de la
   carga: un `width` que cambia a cada fichero es un reflujo por fichero. */
.cu-descarga-barra {
  height: 6px; margin: 10px 0 2px; border-radius: 3px; overflow: hidden;
  background: rgba(244,236,224,.08);
}
.cu-descarga-barra i {
  display: block; height: 100%; border-radius: 3px; background: var(--oro, #d9a441);
  transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .3s ease-out;
}
.cu-alerta { color: var(--acento-claro, #e0b872); }
/* Las estadísticas de la cuenta: una rejilla de cifras, la cifra grande y
   el rótulo debajo, como los contadores del final de partida. */
.cu-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.cu-stat {
  padding: 10px 6px; border-radius: 10px; text-align: center;
  background: rgba(244,236,224,.05); border: 1px solid rgba(255,255,255,.07);
}
.cu-stat b { display: block; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--oro, #d9a441); }
.cu-stat span { display: block; margin-top: 2px; font-size: .72rem; opacity: .65; line-height: 1.2; }
.cu-cifra { margin: 4px 0 8px; font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cu-cifra small { font-size: .8rem; font-weight: 400; opacity: .55; }

/* Barra de progreso: depósito del yacimiento y vida del jefe. El número va
   DENTRO, porque a 360 px una barra con leyenda al lado no cabe. */
.cu-barra {
  position: relative; height: 26px; border-radius: 8px; overflow: hidden;
  background: rgba(255, 255, 255, .07); margin: 8px 0;
}
.cu-barra i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: var(--acento, #c9a227); transition: width .4s ease;
}
.cu-barra b {
  position: relative; display: block; line-height: 26px; text-align: center;
  font-size: .8rem; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.cu-barra.vida i { background: var(--rival, #b4553f); }

/* La puerta. Misma marca que el menú, para que entrar no parezca otra web. */
#entrada {
  padding: calc(var(--seguro-arriba) + 20px) 18px calc(var(--seguro-abajo) + 20px);
  align-items: center; justify-content: center; overflow-y: auto;
  background: radial-gradient(120% 70% at 50% 0%, rgba(217,164,65,.10), transparent 60%), var(--fondo);
}
.ent-caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.ent-marca { text-align: center; margin-bottom: 4px; }
.ent-marca h1 { margin: 6px 0 4px; }
.ent-pestanas { justify-content: center; }
.ent-pie { display: flex; flex-direction: column; gap: 10px; }
/* El widget de Turnstile mide 65 px de alto y se ensancha al contenedor; el
   hueco se reserva desde el principio para que el formulario no salte cuando
   llega. Si el script no viene, el hueco lo ocupa la nota de abajo. */
.ent-captcha { min-height: 65px; display: flex; justify-content: center; margin-top: 4px; }
.ent-captcha iframe { max-width: 100%; }

/* El ojito. Va dentro del campo y no al lado: al lado empuja el input y en un
   móvil de 360 px la contraseña se queda sin sitio. */
.cu-clave { position: relative; display: block; }
.cu-clave input { width: 100%; padding-right: 44px; }
.cu-ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: inherit; opacity: .55; cursor: pointer;
}
.cu-ojo:hover, .cu-ojo:focus-visible { opacity: 1; }
.cu-ojo svg { width: 100%; height: 100%; display: block; }

/* Formulario de la cuenta. Comparte caja y tipografía con el resto de la
   cuenca: es la misma pantalla de «fuera de la partida». */
.cu-pestanas { display: flex; gap: 8px; margin: 0 0 10px; }
.cu-campo {
  display: flex; flex-direction: column; gap: 4px;
  margin: 10px 0 0; font-size: .8rem; opacity: .7;
}
.cu-campo input {
  font: inherit; font-size: .95rem; opacity: 1;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--borde); background: rgba(0,0,0,.25); color: inherit;
}
.cu-campo input:focus { outline: none; border-color: var(--acento-claro); }

.cu-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cu-botones .boton-secundario { flex: 1 1 auto; min-width: 46%; }
/* La mejora a plazos: lo invertido sobre el coste del nivel que viene. */
.cu-mejora { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .85rem; color: var(--tenue); }
.cu-mejora b { color: var(--texto); }
.cu-mejora-barra { flex: 1 1 100px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; }
.cu-mejora-barra i { display: block; height: 100%; background: var(--acento-claro, #e0b35a); border-radius: 3px; }

/* El aviso de que esto todavía no es multijugador. Va al final y en voz baja,
   pero va: descubrirlo jugando sería peor. */
.cu-aviso {
  margin: 18px 0 0; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, .16);
  font-size: .78rem; opacity: .58; line-height: 1.5;
}

/* El anuncio de carta nueva, dentro de la ficha */
.cu-anuncio { text-align: center; padding: 6px 0 2px; }
.cu-anuncio-eyebrow {
  margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55;
}
.cu-anuncio h2 { margin: 0 0 8px; font-size: 1.3rem; }
.cu-anuncio-nota { margin: 0 0 8px; font-size: .86rem; opacity: .78; line-height: 1.5; }

.cu-cargando { color: var(--tr-ink, inherit); opacity: .55; padding: 28px 0; text-align: center; }

/* Alta de tribu. Campos grandes: se rellenan con el pulgar. */
.cu-formulario { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cu-campo { display: flex; flex-direction: column; gap: 4px; }
.cu-campo span { font-size: .8rem; opacity: .68; }
.cu-campo input {
  font: 400 1rem/1.4 inherit; color: inherit;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px; padding: 11px 12px; width: 100%;
}
.cu-campo input:focus-visible { outline: 2px solid var(--acento, #c9a227); outline-offset: 1px; }
.cu-codigo-campo { text-transform: uppercase; letter-spacing: .18em; font-family: ui-monospace, monospace; }
.cu-codigo { font-family: ui-monospace, monospace; letter-spacing: .12em; color: var(--acento-claro, #e0b872); }

.cu-aviso-error {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(180, 85, 63, .14); border: 1px solid rgba(180, 85, 63, .4);
  color: var(--rival, #d98b7a); font-size: .9rem; line-height: 1.45;
}

/* Los fósiles no llevan el rombo de las dinomonedas: son otro recurso. */
.meta-fosil { font-size: 13px; color: var(--tenue); min-width: 54px; text-align: right; }
.meta-fosil b { color: var(--acento-claro, #e0b872); font-size: 15px; }
.meta-fosil::after { content: ' fósiles'; opacity: .6; font-size: 11px; }
.cu-tribu .cu-codigo { font-size: 1.05rem; }

/* --- la piel de la Cuenca ----------------------------------------------
   Las piezas salen de `tools/cuenca.py`. La ventana y la cartela de la
   vitrina están MEDIDAS por esa herramienta sobre el PNG, no estimadas. */

#cuenca .meta-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; object-position: 50% 40%;
  filter: brightness(.48) saturate(.85);
}
#cuenca .meta-barra, #cuenca .meta-cuerpo, #cuenca .meta-pie { position: relative; z-index: 1; }
#cuenca .meta-barra { background: rgba(15,11,8,.72); }
#cuenca .meta-pie { background: rgba(15,11,8,.82); }
#cuenca .cu-bloque { background: rgba(15,11,8,.66); border-color: rgba(217,164,65,.22); }

/* El fósil como icono, junto a la cifra de la barra y a la del almacén. */
.meta-fosil::before, .cu-ico-fosil {
  content: ''; display: inline-block; width: 14px; height: 14px; vertical-align: middle;
  margin: -2px 4px 0 0; background: url('assets/piel/fosil.webp') center / contain no-repeat;
}
.cu-ico-fosil { width: 22px; height: 22px; margin-right: 6px; }

/* --- la vitrina del jefe ------------------------------------------------ */
.cu-vitrina {
  position: relative; width: 100%; max-width: 330px; margin: 0 auto 8px;
  aspect-ratio: 1406 / 934;
  background: url('assets/piel/cuenca/marco_jefe.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.55));
}
.cu-vitrina-ventana {
  position: absolute; left: 7.89%; top: 12.31%; width: 84.5%; height: 68.09%;
  background: #14100c; overflow: hidden;
}
.cu-vitrina-ventana img, .cu-vitrina-ventana svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cu-vitrina.caida .cu-vitrina-ventana img { filter: grayscale(.7) brightness(.7); }
.cu-vitrina-cartela {
  position: absolute; left: 25.82%; top: 87.26%; width: 48.36%; height: 6.85%;
  display: grid; place-items: center; overflow: hidden;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: #1a1206; white-space: nowrap;
  /* Grabado en el latón: una luz por debajo de cada letra. */
  text-shadow: 0 1px 0 rgba(255,232,180,.45);
}
.cu-vitrina-cartela i { font-style: italic; font-weight: 600; }
.cu-sello-caido {
  position: absolute; right: -2%; top: -6%; width: 18%; aspect-ratio: 1;
  background: url('assets/piel/cuenca/sello_caido.webp') center / contain no-repeat;
  transform: rotate(12deg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.cu-jefe { text-align: center; }
.cu-jefe.caido .cu-subtitulo { opacity: .5; }

/* La Vida del jefe con el canal y el relleno del hábitat, que ya existen. */
.cu-vida {
  position: relative; height: 22px; margin: 6px 0 8px;
  background: url('assets/piel/habitat_canal.webp') center / 100% 100% no-repeat;
}
.cu-vida i {
  position: absolute; left: 3%; top: 27%; height: 46%; max-width: 94%;
  background: url('assets/piel/habitat_relleno.webp') left center / 100% 100% no-repeat;
  filter: hue-rotate(-28deg) saturate(1.25); transition: width .6s ease;
}
.cu-vida b {
  position: relative; display: block; line-height: 22px; font-size: 12px; font-weight: 600;
  color: #f2e4c4; text-shadow: 0 1px 2px #000, 0 0 4px #000; font-variant-numeric: tabular-nums;
}
.cu-vida small { font-weight: 400; opacity: .75; }

/* Tres cifras en fila: ventana, asaltos de hoy y daño acumulado. */
.cu-datos { display: flex; gap: 6px; margin: 4px 0 6px; }
.cu-datos span {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border-radius: 6px; background: rgba(0,0,0,.28); border: 1px solid rgba(217,164,65,.16);
}
.cu-datos b { font-size: 15px; color: var(--acento-claro); font-variant-numeric: tabular-nums; }
.cu-datos b em { font-style: normal; font-size: 11px; color: var(--tenue); }
.cu-datos small { font-size: 9.5px; color: var(--tenue); }

/* El ranking de la tribu, con medallones. */
.cu-medallon {
  display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; vertical-align: middle;
  background: url('assets/piel/cuenca/medallon_excavador.webp') center / contain no-repeat;
}
.cu-ranking { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; }
.cu-ranking li {
  display: flex; align-items: center; gap: 7px; padding: 5px 0;
  border-top: 1px solid rgba(217,164,65,.1); font-size: 12px;
}
.cu-ranking li:first-child { border-top: 0; }
.cu-ranking li.yo .cu-quien, .cu-ranking li.yo .cu-dano { color: var(--acento-claro); font-weight: 600; }
.cu-puesto {
  width: 16px; text-align: center; font-size: 10px; color: var(--tenue-2);
  font-family: 'Cinzel', Georgia, serif; font-weight: 700;
}
.cu-ranking li:first-child .cu-puesto { color: var(--bio); }
.cu-quien { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-dano { font-variant-numeric: tabular-nums; }
.cu-cuota { width: 26%; height: 6px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; }
.cu-cuota i { display: block; height: 100%; background: linear-gradient(90deg, #a4761f, var(--bio)); }

/* --- el yacimiento ------------------------------------------------------ */
.cu-yac { padding-top: 0; overflow: hidden; }
.cu-yac-escena {
  position: relative; margin: 0 -16px 10px; aspect-ratio: 2 / 1;
  background: var(--escena) center / cover no-repeat;
  display: flex; align-items: flex-end; justify-content: space-between; padding: 8px 12px;
  box-shadow: inset 0 -40px 40px -20px rgba(15,11,8,.9);
}
.cu-yac-nivel, .cu-yac-ritmo {
  font-size: 11px; color: #e9d9b5; text-shadow: 0 1px 2px #000, 0 0 6px #000;
}
.cu-yac-nivel b { font-family: 'Cinzel', Georgia, serif; font-weight: 700; color: var(--acento-claro); }
.cu-yac-ritmo b { color: var(--acento-claro); }
/* La bandeja llena se destapa de izquierda a derecha según el depósito: lo
   que falta va tapado por un velo recortado con `clip-path`. Una imagen. */
.cu-bandeja {
  position: relative; width: 100%; aspect-ratio: 2508 / 519; margin: 4px 0;
  background: url('assets/piel/cuenca/bandeja_fosiles.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.cu-bandeja .falta {
  position: absolute; inset: 0; background: rgba(10,7,4,.74); pointer-events: none;
  clip-path: inset(0 0 0 var(--pct, 0%)); transition: clip-path .5s ease;
}
.cu-bandeja b {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%); z-index: 2;
  font-size: 13px; font-weight: 700; color: #f2e4c4; text-shadow: 0 1px 2px #000, 0 0 5px #000;
  font-variant-numeric: tabular-nums;
}
.cu-bandeja b small { font-weight: 400; opacity: .8; }

/* --- la tribu ----------------------------------------------------------- */
.cu-compartir {
  margin-left: 8px; padding: 4px 10px; border-radius: 12px; font-size: 11px;
  color: var(--acento-claro); border: 1px solid rgba(217,164,65,.4);
}
.cu-compartir:active { background: rgba(217,164,65,.18); }
.cu-miembros { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cu-miembros li { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-2); }
.cu-miembros li.yo { color: var(--acento-claro); font-weight: 600; }
/* Con mando la lista deja de ser una fila de nombres y pasa a tener botones:
   un renglón por persona, que si no los botones se reparten por el hueco. */
.cu-miembros li.cu-miembro { width: 100%; gap: 6px; }
.cu-miembros li.confirmando { color: var(--texto); }
.cu-rol {
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; color: var(--bio);
  box-shadow: 0 0 0 1px rgba(217,164,65,.45);
}
/* Lo aportado al común, en la fila de cada miembro. Va antes de los botones y
   empuja con `margin-left: auto`, así queda pegado a la derecha cuando no hay
   botones y justo antes de ellos cuando los hay. */
.cu-aportado {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--bio);
}
.cu-aportado .cu-ico-fosil { width: 13px; height: 13px; }
.cu-miembro .cu-aportado + .cu-mini { margin-left: 6px; }

/* Quién no aparece. En gris tenue y sin adorno: es un dato de la tribu, no un
   reproche, y sólo sale pasados dos días. Empuja igual que lo aportado, y si
   están los dos el `auto` lo gasta el primero. */
.cu-ausente { margin-left: auto; font-size: 10.5px; color: var(--tenue); font-style: italic; }
.cu-ausente + .cu-aportado { margin-left: 8px; }
.cu-miembro .cu-ausente + .cu-mini { margin-left: 6px; }
/* El relevo: la línea que aparece cuando el capataz lleva más del plazo sin
   entrar. Enmarcada, que es lo único de esta pantalla que cambia quién manda. */
.cu-relevo {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: rgba(217,164,65,.08); box-shadow: 0 0 0 1px rgba(217,164,65,.3);
}
.cu-relevo .cu-mini { margin-left: 8px; }

.cu-mini {
  margin-left: auto; padding: 4px 9px; min-height: 30px; border-radius: 6px;
  font-size: 11px; color: var(--texto-2);
  border: 1px solid var(--borde); background: rgba(15,11,8,.5);
}
.cu-mini + .cu-mini { margin-left: 0; }
.cu-mini:active { border-color: var(--borde-fuerte); }
.cu-mini.mal { color: var(--peligro); border-color: rgba(200,80,60,.4); }
.cu-salir { margin-top: 6px; }

/* --- los últimos asaltos ------------------------------------------------- */
.cu-historial { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cu-historial li {
  display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--texto-2);
  padding: 5px 8px; border-radius: 6px; background: rgba(0,0,0,.24);
}
.cu-historial li.yo { color: var(--acento-claro); }
.cu-h-quien { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-h-dano { color: var(--bio); font-weight: 700; white-space: nowrap; }
.cu-h-cuando { font-size: 10.5px; color: var(--tenue); white-space: nowrap; }

/* --- la lista de cuencas abiertas --------------------------------------- */
.cu-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cu-cuenca {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 8px; background: rgba(0,0,0,.28); font-size: 12px; color: var(--texto-2);
}
.cu-cuenca .emblema { width: 26px; height: 26px; flex: 0 0 auto; }
.cu-cuenca-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.cu-cuenca-datos b { color: var(--texto); font-weight: 600; line-height: 1.2; }
.cu-cuenca-datos small { font-size: 10.5px; color: var(--tenue); }
.cu-cuenca .cu-nota { margin-left: auto; white-space: nowrap; }
.cu-cuenca .cu-mini { margin-left: 0; }
/* El emblema de la cuenca, junto a su nombre. */
.cu-tribu .cu-titulo .emblema { width: 22px; height: 22px; vertical-align: -4px; margin-right: 6px; }
.cu-mini.on { color: var(--bio); border-color: var(--bio); }
/* Los diez medallones, como en el editor de mazos. */
.cu-emblemas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cu-emblemas button {
  width: 34px; height: 34px; padding: 3px; border-radius: 8px;
  border: 1px solid var(--borde); background: rgba(15,11,8,.5); opacity: .55;
}
.cu-emblemas button.on { opacity: 1; border-color: var(--bio); }
.cu-emblemas button .emblema { width: 100%; height: 100%; }

/* --- eventos ------------------------------------------------------------ */
.cu-evento { position: relative; padding: 10px 12px; border-radius: 8px; margin-top: 8px; overflow: hidden; background: rgba(0,0,0,.28); }
.cu-evento:first-of-type { margin-top: 4px; }
.cu-evento b { display: block; font-size: .95rem; position: relative; }
.cu-evento p { margin: 4px 0; font-size: .84rem; opacity: .8; line-height: 1.45; position: relative; }
.cu-evento small { font-size: .76rem; opacity: .55; position: relative; }
.cu-evento.jefe b { color: var(--rival, #d98b7a); }
.cu-evento.clima b { color: var(--acento-claro, #e0b872); }
/* El clima de cuenca lleva de fondo la textura que ese clima pone en el tablero. */
.cu-evento.clima::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none; }
.cu-evento.clima-aridez::before { background: url('assets/piel/efectos/calima.webp') center / cover; mix-blend-mode: multiply; opacity: .9; }
.cu-evento.clima-canal::before { background: url('assets/piel/efectos/bruma.webp') center / 300px; mix-blend-mode: screen; opacity: .35; }
.cu-evento.clima-sabana::before { background: url('assets/piel/efectos/lluvia.webp') center / 200px; mix-blend-mode: screen; opacity: .45; }
.cu-evento.clima-llanura::before { background: url('assets/piel/efectos/agua.webp') bottom / cover; mix-blend-mode: screen; opacity: .5; }
.cu-evento.clima-bosque::before { background: url('assets/piel/efectos/llovizna.webp') center / 220px; mix-blend-mode: screen; opacity: .4; }

/* --- cartas de jefe ----------------------------------------------------- */
.cu-premios { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cu-premio { width: 96px; font-size: .74rem; text-align: center; }
.cu-premio .carta--col { width: 100%; aspect-ratio: 82 / 112; border-radius: 6px; margin-bottom: 5px; }
/* Una carta que todavía no puedes forjar se enseña apagada y no gris: lo que
   dice no es «no está», es «aún no llegas». */
.cu-premio.lejos { opacity: .62; }
.cu-premio .cu-mini { margin-top: 4px; }

/* --- la forja: los fragmentos que llevas --------------------------------- */
.cu-forja { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cu-forja b { font-size: 1.25rem; color: var(--bio); }
.cu-forja small { color: var(--tenue); font-size: .78rem; }
/* Las tres cuñas son el hueco de la carta: la que falta se ve igual de grande
   y sin color, que es lo que cuenta cuántas quedan de un vistazo. El icono va
   por `mask` y no por `background` para poder apagarlo con `background-color`
   sin que aparezca el rectángulo de la caja. */
.cu-cunas { display: flex; gap: 4px; }
.cu-cuna {
  width: 18px; height: 26px; display: inline-block;
  background-color: rgba(220, 200, 160, .22);
  -webkit-mask: center / contain no-repeat url('assets/piel/fragmento.webp');
  mask: center / contain no-repeat url('assets/piel/fragmento.webp');
}
.cu-cuna.puesta { background: center / contain no-repeat url('assets/piel/fragmento.webp'); -webkit-mask: none; mask: none; }
.cu-anuncio-carta { width: min(60vw, 240px); margin: 12px auto; }
.cu-anuncio-carta .carta--visor { width: 100%; }

/* --- el informe del asalto, en la pantalla de fin ------------------------- */
.fin-informe:empty { display: none; }
.fin-informe { width: 100%; margin: 4px 0 10px; }
.fin-informe .cu-vitrina { max-width: 220px; }
.fin-informe .cu-vida { max-width: 300px; margin: 8px auto; }
.fin-informe .cu-vida i { transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.fin-informe .cu-datos { max-width: 300px; margin: 0 auto; }

/* ------------------------------------------------------------ expedición
   El mapa es una columna alta que se desplaza; los nodos van en posición
   absoluta sobre ella y el sendero en un SVG debajo. Sin arte, el mapa es un
   degradado y los medallones son círculos de CSS; con arte, el marco WebP va
   ENCIMA del retrato y el hueco transparente deja verlo. */
.exp-cuerpo { padding: 0 0 24px; position: relative; }
/* La tira de formaciones. Cada ficha lleva de fondo su propio mapa, oscurecido
   con un degradado para que el nombre se lea encima: es arte que ya existe y
   ahorra una pieza nueva. Se desplaza en horizontal, que a 360 px no caben
   cuatro. */
.exp-atlas {
  display: flex; gap: 8px; padding: 10px 14px 2px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.exp-atlas::-webkit-scrollbar { display: none; }
.exp-ficha {
  position: relative; flex: 0 0 auto; width: 116px; min-height: 58px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 8px; text-align: left; border-radius: 10px; cursor: pointer;
  border: 2px solid #4a4133; background-color: #17130e;
  background-size: cover; background-position: center;
  color: var(--texto); transition: border-color .18s, filter .18s;
}
/* El velo va en un pseudoelemento y no con `filter` sobre la ficha: el filtro
   se llevaría por delante el texto, que es hijo. */
.exp-ficha::before {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(180deg, rgba(10,8,6,.35), rgba(10,8,6,.88));
}
.exp-ficha b, .exp-ficha i { position: relative; }
.exp-ficha b { font-size: 12px; line-height: 1.15; font-weight: 700; }
.exp-ficha i { font-style: normal; font-size: 10px; color: var(--acento-claro); }
.exp-ficha.puesta { border-color: var(--acento-vivo); box-shadow: 0 0 14px rgba(217,164,65,.45); }
.exp-ficha.completa i::after { content: ' ✓'; color: #b8913e; }
.exp-ficha.bloqueada { filter: grayscale(1) brightness(.5); cursor: default; }
.exp-ficha.bloqueada i { color: #8d8272; }

.exp-era {
  text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-claro); margin: 12px 0 6px;
}
.exp-visitante {
  display: flex; align-items: center; gap: 12px; margin: 4px 14px 10px; padding: 10px 12px;
  width: calc(100% - 28px); text-align: left; border-radius: 12px;
  border: 1px solid rgba(217,164,65,.45);
  background: linear-gradient(90deg, rgba(120,30,20,.35), rgba(15,11,8,.6));
}
.exp-visitante.vencido { border-color: var(--linea); background: rgba(15,11,8,.5); }
.exp-visitante .exp-medallon { width: 58px; height: 58px; flex: none; }
.exp-visitante-texto { display: flex; flex-direction: column; gap: 2px; }
.exp-visitante-texto small { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-claro); }
.exp-visitante-texto b { font-size: 15px; font-weight: 600; }
.exp-visitante-texto i { font-style: normal; font-size: 11.5px; color: var(--tenue); }
.exp-mapa {
  position: relative; margin: 0 8px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, rgba(70,90,50,.35), transparent 60%),
    linear-gradient(180deg, #1c2418 0%, #15180f 55%, #22170f 100%) center / cover no-repeat;
  background-size: cover;
}
.exp-mapa.con-arte { background-color: #2a1c10; background-size: cover; background-position: center top; }
/* Sobre el dibujo el sendero y los nombres se perdían entre ríos y estratos:
   la sombra va en filter, que sigue la raya, y no en box-shadow. */
.exp-sendero { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 0 1px #000); }
.exp-mapa.con-arte .exp-nombre { background: rgba(8,8,6,.86); box-shadow: 0 1px 4px rgba(0,0,0,.7); }
.exp-sendero line { stroke: rgba(200,190,160,.35); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; }
.exp-sendero line.hecho { stroke: var(--acento-vivo); stroke-dasharray: 10 10; stroke-width: 5; }
.exp-nodo {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column;
  align-items: center; gap: 6px; width: 132px;
}
.exp-medallon { position: relative; display: block; width: 78px; height: 78px; }
.exp-retrato {
  position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; background: #111;
}
.exp-retrato img, .exp-retrato svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-marco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Con arte, el retrato va en el hueco del medallón. Medido por
   `tools/expediciones.py`: 18–19,5 % del borde en abierto, vencido y semana;
   el del bloqueado lo parten las cadenas y se mide mal, pero es la misma
   geometría. Un punto por dentro, para que el aro tape el canto. */
.exp-medallon.con-marco { width: 86px; height: 86px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); }
.exp-medallon.con-marco .exp-retrato { inset: 18%; }
.exp-visitante .exp-medallon.con-marco { width: 66px; height: 66px; }
/* Sin arte: el aro lo pinta el CSS, con el color del estado. */
.exp-medallon:not(.con-marco) { border-radius: 50%; border: 3px solid #5a5040; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.exp-medallon:not(.con-marco) .exp-retrato { inset: 4px; }
.exp-medallon.abierto:not(.con-marco) { border-color: var(--acento-vivo); box-shadow: 0 0 0 4px rgba(217,164,65,.25), 0 0 22px rgba(217,164,65,.55); }
.exp-medallon.vencido:not(.con-marco) { border-color: #b8913e; }
.exp-medallon.semana:not(.con-marco) { border-color: #b8513a; box-shadow: 0 0 14px rgba(184,81,58,.6); }
.exp-medallon.bloqueado .exp-retrato { filter: grayscale(1) brightness(.35); }
.exp-medallon.bloqueado:not(.con-marco)::after {
  content: '🔒'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px;
}
.exp-medallon.vencido:not(.con-marco)::after {
  content: '✓'; position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: #7a1f16; color: #f4d99b; font-weight: 700; font-size: 15px;
  border: 2px solid #b8913e;
}
.exp-nodo.abierto .exp-medallon { animation: exp-latido 2.4s ease-in-out infinite; }
/* El brillo del nodo abierto. Venía dibujado, pero el generador lo mezcló con
   el magenta en un aro rosa que no se puede separar del fondo: la herramienta
   lo quita y el resplandor lo pone esto, que además sigue la silueta. */
.exp-nodo.abierto .exp-medallon.con-marco {
  filter: drop-shadow(0 0 6px rgba(240,196,90,.85)) drop-shadow(0 0 16px rgba(217,164,65,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.7));
}
@keyframes exp-latido { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .exp-nodo.abierto .exp-medallon { animation: none; } }
.exp-nombre {
  font-family: 'Cinzel', Georgia, serif; font-size: 11.5px; line-height: 1.25; text-align: center;
  padding: 4px 8px; border-radius: 8px; background: rgba(10,12,8,.78); color: var(--texto);
}
.exp-nodo.bloqueado .exp-nombre { color: var(--tenue); }
.exp-nodo:active .exp-medallon { transform: scale(.94); }

.exp-hoja {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px;
  background: rgba(0,0,0,.66); backdrop-filter: blur(2px);
}
.exp-cartela {
  width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 20px 18px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, #2a2117, #15110c); border: 2px solid #8a6b3f;
  box-shadow: 0 10px 30px rgba(0,0,0,.7);
}
/* Con arte, la cartela es la pieza entera y todo va colocado sobre ella en
   porcentajes MEDIDOS del WebP (768×1282): la ventana del retrato por la
   herramienta, la banda del nombre y la piedra lisa sobre el original. Nada
   va en flujo, que un lema de dos líneas empujaría el nombre fuera de la banda. */
.exp-cartela.con-marco {
  position: relative; display: block; padding: 0; border: 0; border-radius: 0;
  width: min(340px, 100%, calc((100dvh - 36px) * .599)); aspect-ratio: 768 / 1282;
  background: url('assets/piel/expediciones/cartela_rival.webp') center / 100% 100% no-repeat;
  box-shadow: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,.8));
}
.exp-cartela.con-marco .exp-cartela-retrato {
  position: absolute; left: 22.4%; top: 7.8%; width: 55.1%; height: 33.3%; border: 0;
}
.exp-cartela.con-marco h3 {
  position: absolute; left: 12%; right: 12%; top: 44%; height: 10.3%; margin: 0;
  display: grid; place-items: center; font-size: clamp(14px, 4.6vw, 18px); line-height: 1.1;
  color: #1c140a; text-shadow: 0 1px 0 rgba(255,230,170,.45);
}
/* `width: auto`: la regla general le da 100 %, y con posición absoluta eso
   pesa más que left y right; el lema y el botón se salían por la derecha. */
.exp-cartela.con-marco .exp-cartela-texto {
  position: absolute; left: 10%; right: 10%; top: 57%; bottom: 5.5%; width: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px;
}
.exp-cartela.con-marco .exp-cartela-botones { margin-top: auto; }
.exp-cartela.con-marco .exp-cartela-botones .boton-grande { min-height: 42px; }
.exp-cartela-retrato {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--acento-vivo); background: #111;
}
.exp-cartela.con-marco .exp-cartela-retrato { border: 0; }
.exp-cartela-retrato img, .exp-cartela-retrato svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-cartela h3 { font-family: 'Cinzel', Georgia, serif; font-size: 19px; margin-top: 4px; }
.exp-cartela-lema { font-size: 13px; line-height: 1.4; color: var(--texto); opacity: .9; }
.exp-cartela-dato { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-claro); }
.exp-cartela-premio { font-size: 13px; color: var(--tenue); }
.exp-cartela-premio b { color: var(--bio); }
.exp-cartela-aviso { font-size: 12.5px; color: var(--peligro); }
.exp-cartela-texto { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.exp-cartela-botones { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; }
.exp-cartela-botones .boton-grande[disabled] { opacity: .45; }

/* La liga: el escudo de descenso como tres pastillas, la temporada y la tabla
   de la Extinción. Las pastillas llenas son derrotas de margen que quedan. */
.duelo-liga-pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 10.5px; color: var(--tenue); margin-top: 4px; }
.duelo-escudo { display: inline-flex; align-items: center; gap: 3px; }
.duelo-escudo i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--acento-claro); display: inline-block; }
.duelo-escudo i.llena { background: var(--acento-vivo); border-color: var(--acento-vivo); }
.duelo-liga-pie .chip { margin-left: auto; }
.duelo-tabla { margin: 0 0 8px; }
.duelo-ranking li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.duelo-ranking li.yo { color: var(--acento-claro); font-weight: 700; }
.duelo-tabla-puntos { font-variant-numeric: tabular-nums; color: var(--tenue); }
/* La escalera: una liga por fila, de arriba abajo, con sus divisiones como
   pastillas y el cofre a la derecha. Nada cambia de tamaño al marcar «aquí». */
.duelo-peldanos { list-style: none; margin: 4px 0 0; padding: 0; }
.duelo-peldanos li {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-top: 1px solid rgba(217,164,65,.1); font-size: 12px; border-radius: 6px;
}
.duelo-peldanos li:first-child { border-top: 0; }
.duelo-peldanos li.aqui { background: rgba(217,164,65,.08); }
.duelo-peldanos li.aqui .duelo-peldano-nombre { color: var(--acento-claro); }
.duelo-peldano-emblema { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.duelo-peldano-nombre { flex: 1; min-width: 0; font-family: var(--titulo, inherit); letter-spacing: .03em; }
.duelo-peldano-nombre b { font-family: inherit; font-weight: 500; font-size: 10px; color: var(--tenue); }
.duelo-divisiones { display: flex; gap: 3px; }
.duelo-divisiones i {
  min-width: 18px; padding: 1px 4px; border-radius: 4px; text-align: center;
  font: 700 9px/14px 'Cinzel', Georgia, serif; color: var(--tenue-2); background: rgba(255,255,255,.05);
}
.duelo-divisiones i.actual { color: #1a1208; background: var(--oro, #d9a441); }
.duelo-cofre { font-size: 11px; color: var(--acento-claro); white-space: nowrap; }
.duelo-cofre.cobrado { color: var(--tenue); }