/* fantasy-player-card.css
 *
 * Carta de jugador tipo "FUT card" sobre assets/Plantilla-Card-*.png.
 * Todas las zonas internas se posicionan en % sobre el lienzo de la
 * plantilla activa, vía custom properties CSS (--photo-left, --name-top,
 * etc.) inyectadas por js/playerCardRenderer.js desde la configuración
 * única de js/playerCardConfig.js — fuente compartida también con el
 * <canvas> de descarga (playerCardDownload.js), para no mantener dos
 * copias de los mismos números.
 *
 * Extraído del <style> inline de jugadores.html para poder reutilizar la
 * misma carta en el tab "Cards Fantasy!" de equipos.html (varias cartas a
 * la vez en un grid, en vez de una única instancia con IDs globales — ver
 * playerCardRenderer.js para el porqué del cambio de IDs a clases).
 *
 * Prefijo de clase "fantasy-player-card" (no "player-card" a secas):
 * equipos.html ya tiene una clase .player-card completamente distinta (la
 * tarjeta tipo póster del tab "Plantilla", ver css/style.css), y ambas
 * conviven en la misma página.
 */

/* width:100% explícito en el propio wrap (no sólo en .fantasy-player-card):
   con align-items:center, un hijo de bloque normal sin ancho propio (p.ej.
   el mount point que usa jugadores.html para insertar la carta vía JS) se
   encoge a fit-content en vez de estirarse al ancho del padre — y su único
   hijo (.fantasy-player-card, width:100% RELATIVO a ESE hijo) no tiene
   entonces ninguna base de ancho real de la que partir. Algunos motores
   (Chromium en escritorio) resuelven ese ciclo con un ancho razonable por
   defecto, pero WebKit/iOS lo colapsaba a 0 (bug real: la carta
   desaparecía por completo en Safari iPhone, dejando el botón de descarga
   pegado al visor 3D sin ningún hueco de por medio). Las páginas que
   inserten la carta dentro de un contenedor intermedio (ver
   #player-card-mount en jugadores.html) deben darle también width:100% a
   ese contenedor. */
.fantasy-player-card-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.fantasy-player-card-download-btn { width: 100%; max-width: 420px; }
.fantasy-player-card {
  position: relative;
  width: 100%; max-width: 420px;
  aspect-ratio: 1086 / 1448; /* valor de partida = plantilla azul nueva (fallback); applyCardConfigToCss lo recalcula siempre según la demarcación real del jugador */
  container-type: inline-size; /* necesario para que las unidades cqw de los huecos de texto escalen con el ancho real de la carta */
}
/* El marco dorado va como <img> propio por encima de la foto (ver
   .fantasy-player-card-frame más abajo), NO como background-image de
   .fantasy-player-card: el background de un elemento se pinta siempre
   detrás de TODOS sus hijos sin importar z-index (no compite en el mismo
   stacking context), así que con el marco como fondo la foto del jugador lo
   tapaba por completo en vez de asomar sólo por su hueco — justo el bug
   visto en captura (foto desbordando sobre todo el marco). */
.fantasy-player-card-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  z-index: 1; pointer-events: none;
}
/* Foto del jugador: por DELANTE del marco (z-index mayor que
   .fantasy-player-card-frame), igual que el resto de información de la
   carta (nombre, dorsal, posición, stats, todas con z-index:2) — no "a
   través de un hueco" enmarcado por los cristales. El recorte real de las
   fotos (gráficos promocionales horizontales con texto, no retratos
   aislados) se resuelve con object-fit:cover centrado y un difuminado
   radial en los bordes (mask-image) para que no sea un corte duro aunque la
   foto quede por encima: se verá parte del fondo promocional alrededor del
   jugador, es una limitación de las fotos de origen, no del encaje (ver
   js/playerCardConfig.js para por qué no se segmenta al jugador real con un
   modelo de IA client-side).
   Todas las coordenadas/parámetros se leen de custom properties CSS
   (--photo-left, --photo-mask-start, etc.), inyectadas por JS desde la
   plantilla activa en js/playerCardConfig.js — fuente única compartida con
   el <canvas> de descarga (playerCardDownload.js), para no mantener dos
   copias de los mismos números. */
.fantasy-player-card-photo-wrap {
  position: absolute;
  left: var(--photo-left); top: var(--photo-top);
  width: var(--photo-width); height: var(--photo-height);
  overflow: hidden; z-index: 2;
  -webkit-mask-image: radial-gradient(ellipse var(--photo-mask-x) var(--photo-mask-y) at center, #000 var(--photo-mask-start), transparent 100%);
  mask-image: radial-gradient(ellipse var(--photo-mask-x) var(--photo-mask-y) at center, #000 var(--photo-mask-start), transparent 100%);
}
/* object-fit:cover + object-position arriba: la imagen se ajusta primero al
   ANCHO completo del hueco manteniendo su proporción real (nunca se
   deforma/estira), y si sobra alto respecto al hueco, el recorte se queda
   siempre por la parte de ABAJO — nunca por arriba, para no perder la cara
   del jugador, que en los gráficos promocionales de origen siempre queda en
   la mitad superior. */
.fantasy-player-card-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Escudo del club, debajo del hexágono de posición: hueco que el diseño
   anterior de la plantilla traía pintado y que las plantillas nuevas ya no
   incluyen (incrustado por nosotros, igual que la foto del jugador).
   object-fit:contain (no cover) porque es un logo cuadrado con fondo
   transparente que debe verse completo, no recortado. */
.fantasy-player-card-badge-wrap {
  position: absolute;
  left: var(--badge-left); top: var(--badge-top);
  width: var(--badge-width); height: var(--badge-height);
  z-index: 2;
}
.fantasy-player-card-badge-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fantasy-player-card-name {
  position: absolute;
  left: var(--name-left); top: var(--name-top);
  width: var(--name-width); height: var(--name-height);
  z-index: 2;
  /* Alineado a la izquierda (pedido explícito, antes centrado):
     justify-content:flex-start en vez de center; align-items:center sigue
     centrando verticalmente. Nombres que no quepan ni al mínimo de fuente
     (ver MAX_FONT_SIZE_ADJUST/minFontSize en playerCardConfig.js) se
     recortan con "…" en vez de cortarse en seco. */
  display: flex; align-items: center; justify-content: flex-start;
  padding: 0 var(--name-padding); /* evita invadir las esquinas doradas curvas de la franja */
  color: #fff; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 22px; /* valor de partida; playerCardRenderer.js (fitTextToWidth) lo recalcula siempre para llenar el ancho real del hueco, en vez de depender de un techo fijo en CSS */
}
.fantasy-player-card-dorsal, .fantasy-player-card-position {
  position: absolute; width: var(--dorsal-width);
  left: var(--dorsal-left);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; text-align: center;
  z-index: 2;
}
.fantasy-player-card-dorsal { top: var(--dorsal-top); height: var(--dorsal-height); font-size: clamp(12px, 6cqw, var(--dorsal-max-font)); }
.fantasy-player-card-position { top: var(--position-top); height: var(--position-height); font-size: clamp(9px, 4cqw, var(--position-max-font)); letter-spacing: 0.02em; }
.fantasy-player-card-stat {
  position: absolute; width: var(--stat-width); height: var(--stat-height);
  z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  color: #fff; font-weight: 700;
  padding: 0 var(--stat-padding); /* margen horizontal por lado, escalado con el ancho real de la carta */
  overflow: hidden; white-space: nowrap;
  font-size: 11px; /* valor de partida; playerCardRenderer.js (fitTextToWidth) lo recalcula para llenar el ancho real de cada caja */
}
.fantasy-player-card-stat[data-stat="1"] { left: var(--stat-left-col); top: var(--stat-row-1); }
.fantasy-player-card-stat[data-stat="2"] { left: var(--stat-left-col); top: var(--stat-row-2); }
.fantasy-player-card-stat[data-stat="3"] { left: var(--stat-left-col); top: var(--stat-row-3); }
.fantasy-player-card-stat[data-stat="4"] { left: var(--stat-right-col); width: var(--stat-right-width); top: var(--stat-row-1); }
.fantasy-player-card-stat[data-stat="5"] { left: var(--stat-right-col); width: var(--stat-right-width); top: var(--stat-row-2); }
.fantasy-player-card-stat[data-stat="6"] { left: var(--stat-right-col); width: var(--stat-right-width); top: var(--stat-row-3); }
/* Columna derecha en blanco: aquí no se diferencia color label/valor, todo
   el texto de estas cajas es blanco. */
.fantasy-player-card-stat .lbl { text-transform: uppercase; }
.fantasy-player-card-stat .chip {
  width: var(--chip-width); height: var(--chip-height); border-radius: 2px; flex-shrink: 0;
  /* Difuminado de bordes del propio chip de color sólido, en vez de un
     rectángulo con esquinas duras. */
  filter: blur(var(--chip-blur));
  box-shadow: 0 0 3px 1px currentColor;
}
.fantasy-player-card-stat .chip.yellow { background: #f2c200; color: #f2c200; }
.fantasy-player-card-stat .chip.red { background: var(--secondary); color: var(--secondary); }
.fantasy-player-card-stat .val { font-weight: 800; }