/* =====================================================================
   CARTA CHICA DEL JUGADOR — assets/css/eg-carta-mini.css
   Mismo diseño que las cartas del Fantasy (oct 2026), con su propio
   nombre de clases (.eg-cm-*) para no depender del CSS del Fantasy.
   Se escala sola con su ancho (cqw). HTML: includes/class-eg-carta-mini.php
   ===================================================================== */

.eg-cm {
	display: block;
	width: 100%;
	max-width: 100%;
	container-type: inline-size;
}

.eg-cm-in {
	position: relative;
	display: block;
	aspect-ratio: .74;
	overflow: hidden;
	isolation: isolate;
	border-radius: 7cqw;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1.2cqw, transparent 1.2cqw 2.6cqw),
		linear-gradient(180deg, #1b1b1f, #101012);
	box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, .55);
	color: #fff;
	text-align: left;
}

.eg-cm-foto {
	position: absolute;
	inset: 3.5cqw;
	overflow: hidden;
	border-radius: 4cqw;
	background: radial-gradient(ellipse 60% 45% at 50% 32%, rgba(214, 150, 70, .3), transparent 70%);
}

.eg-cm-foto img {
	display: block;
	width: 100% !important;
	height: 76% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
	border-radius: 0 !important;
}

.eg-cm-foto::after {
	content: "";
	position: absolute;
	inset: 50% 0 0;
	background: linear-gradient(rgba(16, 16, 18, 0), #121214 55%);
}

.eg-cm-ini {
	position: absolute;
	inset: 0 0 30%;
	display: grid;
	place-items: center;
	font-family: var(--eg-f-titulo, 'Saira', sans-serif);
	font-size: 30cqw;
	font-style: italic;
	font-weight: 900;
	color: rgba(255, 255, 255, .12);
}

.eg-cm-top {
	position: absolute;
	top: 7cqw;
	left: 7cqw;
	z-index: 3;
	display: grid;
	justify-items: center;
	gap: 2cqw;
}

.eg-cm-top img {
	width: 22cqw !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 1.2cqw !important;
	box-shadow: 0 .5cqw 1.5cqw rgba(0, 0, 0, .5);
}

.eg-cm-top b {
	font-family: var(--eg-f-titulo, 'Saira', sans-serif);
	font-size: 11cqw;
	font-weight: 800;
	line-height: 1;
	text-shadow: 0 .4cqw 1.2cqw rgba(0, 0, 0, .7);
}

.eg-cm-barra {
	position: absolute;
	right: 3.5cqw;
	bottom: 3.5cqw;
	left: 3.5cqw;
	z-index: 3;
	display: grid;
	justify-items: center;
	padding: 4cqw 5cqw 5cqw;
}

.eg-cm-nom {
	max-width: 100%;
	overflow: hidden;
	font-family: var(--eg-f-titulo, 'Saira', sans-serif);
	font-size: 13cqw;
	font-stretch: 75%;
	font-weight: 900;
	line-height: 1.05;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.eg-cm-val {
	font-family: var(--eg-f-titulo, 'Saira', sans-serif);
	font-size: 10cqw;
	font-weight: 700;
	line-height: 1.15;
	white-space: nowrap;
	color: #b4b4bf;
	font-variant-numeric: tabular-nums;
}

.eg-cm-val b { font-size: 12cqw; font-weight: 900; color: #fe7006; }
.eg-cm-val .eg-cm-n-a { color: #4ade80; }
.eg-cm-val .eg-cm-n-m { color: #facc15; }
.eg-cm-val .eg-cm-n-z { color: #f87171; }

/* Tendencia bajo la carta (En alza / En baja) */
.eg-cm-tend {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 7px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}

.eg-cm-tend--alza { background: rgba(22, 163, 74, .18); color: #4ade80; }
.eg-cm-tend--baja { background: rgba(220, 38, 38, .18); color: #f87171; }

/* =====================================================================
   TEAM OF THE WEEK / SEASON (divisiones) con las cartas chicas
   ===================================================================== */

.eg-tw {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 22px 18px 18px;
	border-radius: 14px;
	background:
		radial-gradient(ellipse at 50% 0, rgba(254, 112, 6, .14), transparent 55%),
		linear-gradient(180deg, #1e1e24, #16161a);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
	overflow: hidden;
}

.eg-tw-cab { margin-bottom: 14px; }

.eg-tw-cab h3 {
	margin: 0 !important;
	font-family: var(--eg-f-titulo, 'Saira', sans-serif);
	font-size: clamp(24px, 4vw, 34px);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
}

.eg-tw-cab p {
	margin: 4px 0 0 !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #a1a1aa;
}

.eg-tw-cancha {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 18px 10px;
	border-radius: 12px;
	background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 56px, transparent 56px 112px), #19191e;
	box-shadow: inset 0 0 0 1px rgba(254, 112, 6, .25);
}

/* Líneas de la cancha */
.eg-tw-cancha::before,
.eg-tw-cancha::after {
	content: '';
	position: absolute;
	left: 50%;
	pointer-events: none;
}

.eg-tw-cancha::before {
	top: 50%;
	width: 110px;
	height: 110px;
	margin: -55px 0 0 -55px;
	border: 1px solid rgba(254, 112, 6, .22);
	border-radius: 50%;
}

.eg-tw-cancha::after {
	top: 50%;
	right: 0;
	left: 0;
	border-top: 1px solid rgba(254, 112, 6, .22);
}

.eg-tw-marca {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46%;
	max-width: 280px;
	opacity: .08;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.eg-tw-fila {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	--g: clamp(6px, 2vw, 22px);
	gap: var(--g);
}

.eg-tw-fila-vol { justify-content: space-between; padding: 0 2%; }

.eg-tw-j {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Todas del mismo tamaño: como si cupieran 5 por fila. */
	flex: 0 0 calc((100% - 4 * var(--g, 12px)) / 5);
	max-width: 110px;
	min-width: 0;
	color: #fff !important;
	text-decoration: none !important;
	transition: transform .15s;
}

.eg-tw-j:hover { transform: translateY(-3px); }

.eg-tw-club {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	margin-top: 5px;
	overflow: hidden;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	color: #a1a1aa;
}

.eg-tw-club img {
	flex: none;
	width: 14px !important;
	height: 14px !important;
	object-fit: contain;
}

.eg-tw-club span { overflow: hidden; text-overflow: ellipsis; }

.eg-tw-vacio {
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 12px;
	color: #71717a;
	background: rgba(255, 255, 255, .03);
}

@media (max-width: 520px) {
	.eg-tw { padding: 16px 8px 12px; }
	.eg-tw-cancha { padding: 14px 4px; gap: 10px; }
	.eg-tw-club { display: none; }
}

/* ---- Variante Team of the Week / Season: sin nota, nombre más grande,
   el club chico debajo y su escudo arriba a la derecha ---- */
.eg-cm-escudo {
	position: absolute;
	top: 6cqw;
	right: 6cqw;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 24cqw;
	height: 24cqw;
}

.eg-cm-escudo img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain;
	filter: drop-shadow(0 .6cqw 1.6cqw rgba(0, 0, 0, .7));
}

.eg-cm-sub {
	max-width: 100%;
	overflow: hidden;
	font-size: 7.5cqw;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .03em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	color: #a1a1aa;
}

.eg-cm--tw .eg-cm-nom { font-size: 15.5cqw; }
.eg-cm--tw .eg-cm-barra { padding: 3cqw 4cqw 4.5cqw; }

/* Cabecera: logo de la división a la izquierda del título */
.eg-tw-cab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: left;
}

.eg-tw-logo {
	flex: none;
	width: 64px !important;
	height: 64px !important;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}

.eg-tw-cab-txt { min-width: 0; }
.eg-tw-cab:not(:has(.eg-tw-logo)) { text-align: center; }

@media (max-width: 520px) {
	.eg-tw-logo { width: 44px !important; height: 44px !important; }
}

/* Nunca se salen de la cancha: si falta espacio, las cartas se achican. */
.eg-tw-cancha { overflow: hidden; }
.eg-tw-j { flex-shrink: 1 !important; }

/* ---- Ajustes oct 2026 (ZIP 454) ---- */

/* Cabecera pegada a la izquierda, logo y título más grandes
   (la bajada queda igual). */
.eg-tw-cab { justify-content: flex-start; gap: 18px; }
.eg-tw-cab:not(:has(.eg-tw-logo)) { text-align: left; }
.eg-tw-logo { width: 104px !important; height: 104px !important; }
.eg-tw-cab h3 { font-size: clamp(32px, 6vw, 54px); line-height: 1; }

@media (max-width: 520px) {
	.eg-tw-cab { gap: 12px; }
	.eg-tw-logo { width: 68px !important; height: 68px !important; }
}

/* Posición un poco más chica */
.eg-cm--tw .eg-cm-top b { font-size: 9.5cqw; }

/* Nombre: más aire abajo para que no se corten los "_" */
.eg-cm--tw .eg-cm-nom { line-height: 1.2; padding-bottom: .6cqw; }

/* Club: más separado, más chico, más tenue y con letra normal
   (no la del título), para que no compita con el nombre. */
.eg-cm--tw .eg-cm-sub {
	margin-top: 1.8cqw;
	font-family: inherit;
	font-size: 6.6cqw;
	font-stretch: normal;
	font-weight: 500;
	letter-spacing: .06em;
	color: #8b8b97 !important;
}

/* Cabecera centrada: logo + título como un solo bloque al medio. */
.eg-tw-cab { justify-content: center; }
.eg-tw-cab:not(:has(.eg-tw-logo)) { text-align: center; }