/* Carta DIVIETO 26/27 — layout portado del prototipo del Mundial (métricas cqw calibradas),
   con dos cambios estructurales:
   1) CSS real (este archivo), nada de estilos en cadenas de JS. El JS pone datos
      (clases, data-attrs, srcs); el CSS decide TODO el aspecto.
   2) Escudo y bandera INTERCAMBIADOS respecto al Mundial: el club (química x2) es el icono
      grande bajo el overall; nacionalidad y liga (química x1) van pequeñas en la fila
      inferior. La jerarquía visual refleja el peso mecánico.
   Sin parches iOS preventivos: se prueba en iPhone real y se parchea lo que falle,
   documentando el motivo aquí. */

/* Las fuentes las declara marca.css, que carga toda la app. Aqui no se repiten:
   dos declaraciones de la misma fuente acaban desviandose. */

.carta {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 594 / 928;
  overflow: hidden;
  /* tinta sobre los marcos metálicos (mismo valor para los 6 tiers normales) */
  --tinta: #1a1000;
  --tinta-suave: rgba(26, 16, 0, 0.5);
  user-select: none;
  -webkit-user-select: none; /* Safari e iOS aún lo piden con prefijo */
  /* UNA CARTA NO ES UNA IMAGEN QUE GUARDARSE, ES UNA FICHA DE JUEGO.
     Sin esto, mantener el dedo encima saca el menú del navegador ("guardar imagen", "abrir en
     otra pestaña") justo cuando estás empezando a arrastrarla. Y pasa ANTES de moverse, así que
     el arrastre de la app no puede evitarlo: su `touchstart` es pasivo y solo cancela cosas
     cuando ya te has movido. */
  -webkit-touch-callout: none;
}

/* Y las cinco imágenes de dentro, que son las que el navegador querría llevarse. El atributo
   `draggable="false"` lo pone `cartas.js`; esto es para WebKit, que lo ignora y mira su propia
   propiedad. Se declaran las dos porque ningún motor entiende las dos. */
.carta img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* MOSCAS (IF): marco oscuro -> el texto negro no se ve. Texto claro metálico:
   oro para la mosca de oro, plata para la de plata. */
.carta[data-tier="oro-if"] {
  --tinta: var(--oro-claro);
  --tinta-suave: color-mix(in srgb, var(--oro-claro) 55%, transparent);
}
.carta[data-tier="plata-if"] {
  --tinta: #dcdcdc;
  --tinta-suave: rgba(220, 220, 220, 0.55);
}

/* CHAMPIONS — preparado, todavía sin activar (31-ago/1-sep-2026).
   Marcos nuevos en app/assets/cartas/champions-*.webp: mismo lienzo 1498x1050 y misma posición
   de escudo que los 12 marcos de Liga (comprobado a pixel con la mascara real), asi que NO hace
   falta tocar frames.mjs ni sus OVERRIDES. Relleno azul-noche de estadio con el trazo metalico
   de siempre (oro/plata/bronce) -> misma logica que las moscas: marco oscuro, tinta clara.
   Las cuatro franjas (nombre/fotobox/stats/racha) suben un pelin respecto a Liga porque el
   arte nuevo tiene la ilustracion superior mas alta; son ajustes medidos contra capturas reales,
   no numeros a ojo.
   Nada de esto se ve hoy: ningun sitio del codigo produce un tierKey "champions-*" todavia —
   eso depende de que exista el dato de la fase de liga de Champions y el mecanismo que decide
   "esta jornada es Champions" (pendiente, ver handoff de diseño visual). */
.carta[data-tier="champions-oro-brillante"],
.carta[data-tier="champions-oro-mate"] {
  --tinta: var(--oro-claro);
  --tinta-suave: color-mix(in srgb, var(--oro-claro) 55%, transparent);
}
.carta[data-tier="champions-plata-brillante"],
.carta[data-tier="champions-plata-mate"] {
  --tinta: #dcdcdc;
  --tinta-suave: rgba(220, 220, 220, 0.55);
}
.carta[data-tier="champions-bronce-brillante"],
.carta[data-tier="champions-bronce-mate"] {
  --tinta: #e0895a;
  --tinta-suave: rgba(224, 137, 90, 0.55);
}
.carta[data-tier^="champions-"].carta--grande .carta__fotobox { height: 78.19cqw; }
.carta[data-tier^="champions-"].carta--grande .carta__nombre  { top: 78.67cqw; }
.carta[data-tier^="champions-"].carta--grande .carta__stats   { top: 94.58cqw; }
.carta[data-tier^="champions-"].carta--grande .carta__racha   { top: 115.99cqw; }

/* Estado de disponibilidad: círculo arriba-derecha. Semántica de SALUD del jugador
   (rojo lesión, ámbar duda, sanción) — no interfaz. Solo aparece si hay problema. */
.carta__estado {
  position: absolute;
  top: 0;
  right: 0;
  width: 17cqw;
  height: 17cqw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 12cqw;
  line-height: 1;
  z-index: 6;
  box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.45);
  border: 0.5cqw solid rgba(0, 0, 0, 0.28);
  font-weight: 700;
}
.carta__estado--injured   { background: #fff;    color: #d02b2b; }  /* cruz roja en círculo blanco */
.carta__estado--doubt     { background: #f2c200; color: #1a1000; }  /* interrogante en círculo amarillo */
.carta__estado--suspended { background: #d02b2b; color: #fff; }     /* círculo rojo */
.carta--mini .carta__estado { top: 0; right: 0; width: 24cqw; height: 24cqw; font-size: 16cqw; }

.carta__lienzo {
  position: absolute;
  inset: 0;
  transform: scale(var(--frame-scale, 1));
  transform-origin: top left;
}

/* ---- marco (lienzo 1498×1050 desplazado; ver app/js/frames.mjs) ---- */
.carta__marco {
  position: absolute;
  top: 0;
  margin-top: var(--frame-mt);
  left: var(--frame-left);
  width: var(--frame-w);
  height: auto;
  pointer-events: none;
  z-index: 0;
  display: block;
}

/* ---- foto (recorte transparente anclado al borde inferior de su ventana) ---- */
.carta__fotobox {
  position: absolute;
  left: 0; right: 0; top: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.carta--grande .carta__fotobox { height: 79cqw; }
.carta--mini   .carta__fotobox { height: 94.52cqw; right: 6.92cqw; }
.carta__foto {
  position: absolute;
  bottom: 0;
  object-fit: contain;
  object-position: bottom center;
}
.carta--grande .carta__foto { right: 4.88cqw; width: 68cqw; height: 68cqw; }
.carta--mini   .carta__foto { right: 0;      width: 74.62cqw; height: 74.62cqw; }

/* ---- overall y posición ---- */
.carta__overall {
  position: absolute;
  font-family: "Bebas Neue", Impact, sans-serif;
  color: var(--tinta);
  line-height: 1;
  z-index: 3;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.carta--grande .carta__overall { left: 5.97cqw; top: 15.5cqw;  font-size: 23cqw; }
.carta--mini   .carta__overall { left: 6.15cqw; top: 13.85cqw; font-size: 29.23cqw; }

.carta__pos {
  position: absolute;
  font-family: "Bebas Neue", Impact, sans-serif;
  color: var(--tinta);
  line-height: 1;
  z-index: 3;
}
.carta--grande .carta__pos { left: 8.21cqw; top: 35.07cqw; font-size: 8.21cqw; }
.carta--mini   .carta__pos { left: 8.46cqw; top: 37.69cqw; font-size: 12.31cqw; }

/* ---- ESCUDO DE CLUB (icono grande — antes bandera de selección) ---- */
.carta__club {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.carta--grande .carta__club { left: 7cqw;    top: 45.15cqw; width: 18cqw;    height: 18cqw; }
.carta--mini   .carta__club { left: 4.23cqw; top: 53.08cqw; width: 24.62cqw; height: 24.62cqw; }
.carta__club img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
/* placeholder de escudo: la inicial del club superpuesta */
.carta__club .carta__club-inicial {
  position: absolute;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 9cqw;
  color: #d2d2d2; /* gris neutro: antes era #cfd4de, que tiraba a azul */
  top: 34%;
}

/* ---- nombre ---- */
.carta__nombre {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 400;
  color: var(--tinta);
  z-index: 3;
  white-space: nowrap;
}
.carta--grande .carta__nombre { top: 79.48cqw; height: 16.04cqw; font-size: 12.69cqw; }
.carta--mini   .carta__nombre { top: 95.30cqw; height: 14.53cqw; font-size: 14.62cqw; letter-spacing: -0.3cqw; }
/* nombres largos: encoger, no desbordar */
.carta[data-nombre-largo] .carta__nombre { font-size: 10cqw; }
.carta--mini[data-nombre-largo] .carta__nombre { font-size: 11.5cqw; }

/* ---- banda de stats (solo grande): PUNTOS · MEDIA · RIVAL ---- */
.carta__stats {
  position: absolute;
  left: 0; right: 0;
  top: 96.20cqw;
  height: 18.66cqw;
  display: flex;
  /* LAS TRES COLUMNAS SE ALINEAN POR SU ETIQUETA, NO POR SU CENTRO.
     Con `center`, el alto de cada columna decidía dónde caía su etiqueta, así que el escudo del
     rival sólo podía medir lo mismo que un número —8.21cqw— o "Puntos" y "Media" se descolgaban.
     Apoyándolas abajo, las tres etiquetas quedan en la misma línea SIEMPRE y el escudo crece
     hacia arriba, hacia la holgura que la banda ya tenía de sobra.
     El `padding-bottom` es lo que las deja donde estaban: 3.55cqw es lo que sobraba por debajo
     cuando iban centradas, así que Puntos y Media no se mueven. El número salió de MEDIR el
     valor de Puntos antes y después del cambio —3.32 dejaba medio píxel de deriva—, no de
     restar altos sobre el papel. */
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 5.97cqw 3.55cqw;
  z-index: 3;
}
.carta__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75cqw;
}
.carta__stat-valor {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 8.21cqw;
  color: var(--tinta);
  line-height: 1;
}
.carta__stat-label {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 2.61cqw;
  color: var(--tinta-suave);
  letter-spacing: 0.37cqw;
  text-transform: uppercase;
  line-height: 1;
}
/* sin dato = estado de primera clase: mismo hueco, valor atenuado */
.carta__stat-valor[data-sin-dato] { opacity: 0.45; }

/* UN ROTULO LARGO ENCOGE, NO DESBORDA.
   "MEDIA RECIENTE" son catorce caracteres en una columna que tiene sitio para seis. Se aprieta
   la letra y el espaciado en vez de partirla en dos lineas: partirla subiria esa columna y
   dejaria las tres etiquetas de la banda a alturas distintas, que es lo unico que esta banda
   tiene prohibido (ver el comentario de alineacion mas arriba). */
.carta__stat-label[data-largo] {
  font-size: 2.05cqw;
  letter-spacing: 0.12cqw;
  white-space: nowrap;
}

/* EL RIVAL ES UN ESCUDO, Y ES LO QUE MANDA EN SU COLUMNA. No lleva alto propio: lo pone la
   imagen, y la columna crece con ella. Antes lo llevaba —8.21cqw, el alto de un número— porque
   la banda alineaba por el centro; ahora alinea por abajo y esa atadura sobra. */
.carta__stat-escudo {
  display: grid;
  place-items: center;
}

/* EL ESCUDO SE MIDE EN cqw, NUNCA EN PORCENTAJE.
   Esto decía `height: 100%` y era un porcentaje sin nada contra lo que resolverse: la fila
   implícita del grid se dimensiona `auto` —o sea, según la propia imagen—, así que el 100%
   dependía de lo que él mismo iba a medir. Ante ese bucle el navegador se queda con el tamaño
   intrínseco limitado por `max-width`, y el escudo salía de 22px dentro de una banda de 16:
   desbordaba 5px hacia abajo y TAPABA ENTERA la etiqueta "Rival", que sí estaba en el DOM.
   Puntos y Media tenían su etiqueta y Rival no.

   11cqw SON 22px EN EL MÓVIL, que es donde se mira: la carta del carrusel mide 200px de ancho
   tanto en un iPhone como en el escritorio —la limita el carrusel, no la pantalla—, así que un
   cqw son 2px y no hay dos casos que valorar.
   El primer intento fue 7.4cqw (15px) por miedo a volver a tapar la etiqueta, y Jepi lo dijo al
   verlo: se leía como un punto, no como un escudo. Se probaron 7.4, 9.5, 11 y 12.5 unas al lado
   de otras con la carta de verdad; a 12.5 el escudo asoma por encima de la banda y pesa más que
   el propio overall.
   `max-width` es holgado a propósito —el escudo más ancho de las cuatro ligas mide 12.64cqw— y
   está sólo para que un escudo apaisado no se coma la columna de "Media". */
.carta__stat-escudo img {
  height: 11cqw;
  width: auto;
  max-width: 14cqw;
  object-fit: contain;
}

/* ---- racha de forma (solo grande): cápsula de 5; sin datos = 5 huecos serenos ---- */
.carta__racha {
  position: absolute;
  left: 0; right: 0;
  top: 116.8cqw;
  height: 8.2cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.carta__racha-capsula {
  display: flex;
  width: 63cqw;
  height: 8.2cqw;
  border-radius: 4.1cqw;
  overflow: hidden;
  box-shadow: inset 0 0 0 0.3cqw rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.carta__racha-slot {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: 5.8cqw;
  line-height: 1;
  background: rgba(15, 15, 15, 0.32);
  color: rgba(255, 255, 255, 0.55);
}
.carta__racha-slot + .carta__racha-slot { box-shadow: inset 0.15cqw 0 0 rgba(0, 0, 0, 0.3); }

/* JORNADA JUGADA: color por puntos, con los tokens `--pts-*` de la marca. Son la MISMA escala que
   pinta los puntos del campo y de la jornada —los cinco tramos del Mundial, portados el
   12-ago-2026—, así que un jugador no puede salir verde en el campo y naranja en su carta. Los
   nombres de las clases son los de esa escala, no colores: si algún día el tramo alto deja de ser
   azul, aquí no hay que tocar nada.
   La tinta va oscura sobre los cinco fondos porque son claros y saturados: con blanco encima, el
   número desaparece a 5,8cqw de tamaño.
   El fondo apagado de la casilla vacía se queda como estaba: un hueco no es un color, es la
   ausencia de uno. Por eso el gris del cero es MÁS claro que el hueco — jugar y no puntuar es un
   dato, no jugar no lo es. */
.carta__racha-slot--alto,
.carta__racha-slot--bueno,
.carta__racha-slot--algo,
.carta__racha-slot--cero,
.carta__racha-slot--negativo {
  /* token-aparte: mismo papel que `--tinta` de la marca —tinta oscura sobre un fondo de color— y
     mismo valor, pero el token NO sirve aquí: `.carta` redefine `--tinta` para su propio marco, así
     que dentro de una carta vale #1a1000 y en las moscas es oro o plata. Sobre la píldora azul de
     un partidazo, esa tinta se perdería. */
  color: #0a0a0a;
}
.carta__racha-slot--alto     { background: var(--pts-alto); }     /* >= 10 */
.carta__racha-slot--bueno    { background: var(--pts-bueno); }    /* 6 a 9 */
.carta__racha-slot--algo     { background: var(--pts-algo); }     /* 1 a 5 */
.carta__racha-slot--cero     { background: var(--pts-cero); }     /* 0: jugó y no puntuó */
.carta__racha-slot--negativo { background: var(--pts-negativo); } /* negativa */

/* ---- fila inferior: LIGA + BANDERA de nacionalidad (antes liga + escudo) ---- */
.carta__inferior {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.carta--grande .carta__inferior { top: 127.24cqw; height: 14.93cqw; }
.carta--mini   .carta__inferior { top: 104.36cqw; bottom: 6.25cqw; }
.carta__liga-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carta--grande .carta__liga-box { width: 13cqw; height: 13cqw; margin: 0 0.5cqw; }
.carta--mini   .carta__liga-box { width: 20cqw; height: 20cqw; margin: 0 2.31cqw; }
.carta__liga-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
.carta__bandera {
  border-radius: 1cqw;
  box-shadow: 0 0.4cqw 1.2cqw rgba(0, 0, 0, 0.45);
  display: block;
}
.carta--grande .carta__bandera { width: 12cqw; height: 9cqw; margin: 0 0.5cqw; }
.carta--mini   .carta__bandera { width: 17cqw; height: 12.75cqw; margin: 0 2.31cqw; }