/**
 * Escalação Tática — front-end
 */

.et-escalacao {
	--et-primaria: #c1121f;
	--et-secundaria: #8d0801;
	--et-texto: #ffffff;
	--et-borda: #ffffff;
	--et-goleiro: #1e6fbf;
	--et-numero: #1d4ed8;
	--et-gramado: #3a7d44;
	--et-card-w: 12cqw;

	position: relative;
	max-width: 100%;
	margin: 0 0 2em;
	font-family: "Archivo", "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
	color: #14181f;
	line-height: 1.25;
	box-sizing: border-box;
}

.et-escalacao *,
.et-escalacao *::before,
.et-escalacao *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Cabeçalho da partida
   --------------------------------------------------------------- */

.et-header {
	background: linear-gradient(180deg, var(--et-primaria), var(--et-secundaria));
	color: var(--et-texto);
	padding: 14px 18px 12px;
	border-radius: 10px 10px 0 0;
	text-align: center;
}

.et-header__times {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 3vw, 34px);
}

.et-header__time {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	justify-content: flex-end;
	min-width: 0;
}

.et-header__time--fora {
	justify-content: flex-start;
}

.et-header__nome {
	font-size: clamp(14px, 2.4vw, 22px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.et-header__escudo {
	display: inline-flex;
	width: clamp(30px, 5vw, 48px);
	height: clamp(30px, 5vw, 48px);
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

.et-header__escudo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.et-header__escudo--vazio {
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
}

.et-header__placar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.et-header__gols {
	font-size: clamp(22px, 4vw, 38px);
	line-height: 1;
	min-width: 1.1em;
}

.et-header__x {
	font-size: clamp(13px, 2vw, 18px);
	opacity: 0.7;
	text-transform: lowercase;
}

.et-header__meta {
	margin: 8px 0 0;
	font-size: clamp(10px, 1.5vw, 13px);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

/* ---------------------------------------------------------------
   Palco: faixas + campo + banco
   --------------------------------------------------------------- */

.et-escalacao__palco {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: var(--et-secundaria);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
}

.et-header + .et-escalacao__palco {
	border-radius: 0 0 10px 10px;
}

.et-escalacao__palco:first-child {
	border-radius: 10px;
}

/* ---------------------------------------------------------------
   Modo tela cheia — proporção 16:9 obrigatória
   --------------------------------------------------------------- */

.et-escalacao--tela {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
}

.et-escalacao--tela .et-escalacao__palco {
	/* 16:9 travado: cabe na tela pela menor dimensão. */
	width: min(100%, calc(100vh * 16 / 9));
	max-height: 100vh;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	overflow: hidden;
}

/* O campo define a própria largura pela altura total do palco. */
.et-escalacao--tela .et-campo {
	flex: 0 0 auto;
	height: 100%;
	width: auto;
	aspect-ratio: 40 / 32;
}

.et-escalacao--tela {
	--et-card-w: 10cqw;
}

/*
 * Largura do banco derivada da geometria: campo = 70,3% do palco,
 * card = 10% do campo => 7,03% do palco + o respiro lateral.
 */
.et-escalacao--tela .et-banco {
	flex: 0 0 calc(7.03% + 32px);
	height: 100%;
	display: flex;
	flex-direction: column;
	/* container-type: size libera cqh para dimensionar os reservas. */
	container-type: size;
}

.et-escalacao--tela .et-banco__lista {
	flex: 1 1 auto;
	align-content: center;
	gap: 10px;
	min-height: 0;
}

/*
 * O reserva usa a largura do titular, mas nunca estoura a altura da
 * coluna: --et-n (quantidade de reservas) vem inline do PHP.
 * 0.669 = 95/142, a proporção do card.
 */
.et-escalacao--tela .et-card--reserva {
	width: min(
		100%,
		calc( ( 100cqh - 58px - ( var(--et-n, 5) - 1 ) * 10px ) / var(--et-n, 5) * 0.669 )
	);
}

/* Área vermelha vazia que fecha os 16:9. */
.et-sobra {
	flex: 1 1 auto;
	background: var(--et-secundaria);
}

.et-faixa {
	flex: 0 0 26px;
	background: var(--et-secundaria);
	color: var(--et-texto);
	display: flex;
	align-items: center;
	justify-content: center;
}

.et-faixa span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.et-faixa--competicao {
	background: #0f172a;
}

/* ---------------------------------------------------------------
   Campo
   --------------------------------------------------------------- */

.et-campo {
	position: relative;
	flex: 1 1 auto;
	aspect-ratio: 30 / 32;
	container-type: inline-size;
	overflow: hidden;
	isolation: isolate;
}

.et-campo__gramado {
	position: absolute;
	inset: 0;
	background-color: var(--et-gramado);
	background-image: repeating-linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.055) 0 8.33%,
		rgba(0, 0, 0, 0.055) 8.33% 16.66%
	);
}

.et-campo__linhas {
	position: absolute;
	inset: 2.5%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	pointer-events: none;
}

.et-linha {
	position: absolute;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.et-linha--meio {
	left: 0;
	right: 0;
	top: 50%;
	border-width: 0 0 2px 0;
}

.et-linha--circulo {
	left: 50%;
	top: 50%;
	width: 30%;
	aspect-ratio: 1;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.et-linha--area {
	left: 50%;
	bottom: 0;
	width: 58%;
	height: 19%;
	transform: translateX(-50%);
	border-bottom: 0;
}

.et-linha--pequena {
	left: 50%;
	bottom: 0;
	width: 28%;
	height: 8%;
	transform: translateX(-50%);
	border-bottom: 0;
}

.et-linha--penalti {
	left: 50%;
	bottom: 13%;
	width: 22%;
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	border-radius: 50%;
	clip-path: inset(0 0 55% 0);
}

.et-linha--gol {
	left: 50%;
	bottom: -3%;
	width: 16%;
	height: 4%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.18);
}

.et-linha--area-cima {
	left: 50%;
	top: 0;
	width: 58%;
	height: 12%;
	transform: translateX(-50%);
	border-top: 0;
}

.et-campo__jogadores {
	position: absolute;
	inset: 0;
}

/* ---------------------------------------------------------------
   Card do jogador
   --------------------------------------------------------------- */

.et-card {
	container-type: inline-size;
	position: relative;
	--et-faixa-cor: var(--et-primaria);
}

.et-card--go {
	--et-faixa-cor: var(--et-goleiro);
}

.et-card--titular {
	position: absolute;
	left: var(--et-x, 50%);
	top: var(--et-y, 50%);
	width: var(--et-card-w);
	transform: translate(-50%, -50%);
}

.et-card__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 95 / 142;
	background: var(--et-borda);
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
	border-radius: 0 0 50% 50% / 0 0 32% 32%;
}

.et-card__inner {
	position: absolute;
	inset: 3%;
	background: #e8ebef;
	border-radius: 0 0 50% 50% / 0 0 31% 31%;
	overflow: hidden;
}

/* Foto sempre 1:1. */
.et-card__foto {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: #c9ced6;
}

.et-card__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 12%;
	display: block;
}

.et-card__silhueta {
	position: absolute;
	left: 50%;
	bottom: -10%;
	width: 62%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.75);
}

.et-card__silhueta svg {
	width: 100%;
	height: auto;
	display: block;
}

.et-card__pos {
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(17, 20, 26, 0.78);
	color: #fff;
	font-size: 15cqw;
	font-weight: 800;
	line-height: 1;
	padding: 3cqw 4cqw;
	border-radius: 0 3px 3px 0;
	letter-spacing: 0.02em;
}

/* Número: abaixo do rating, só a fonte, sem fundo. */
.et-card__numero {
	position: absolute;
	left: 0;
	right: 0;
	top: 88%;
	text-align: center;
	color: var(--et-numero);
	font-size: 17cqw;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* A faixa do nome fica fora do recorte do card para caber nomes longos. */
.et-card__faixa {
	position: absolute;
	left: -10%;
	right: -10%;
	top: 60%;
	height: 14%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2cqw;
	padding: 0 2cqw;
	border-radius: 2px;
	background: var(--et-faixa-cor);
	color: var(--et-texto);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

.et-card__nome {
	font-size: 16cqw;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.et-card__capitao {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16cqw;
	height: 16cqw;
	border-radius: 3px;
	background: #f5a524;
	color: #3b1f00;
	font-size: 12cqw;
	font-weight: 900;
	line-height: 1;
}

.et-card__estrelas {
	position: absolute;
	left: 0;
	right: 0;
	top: 76%;
	display: flex;
	justify-content: center;
	gap: 0;
	letter-spacing: -0.06em;
	color: #b9bec7;
	font-size: 15cqw;
	line-height: 1;
}

.et-estrela.is-on {
	color: var(--et-faixa-cor);
	filter: brightness(1.05);
}

/* Destaque do jogo: contorno dourado brilhante. */
.et-card--destaque .et-card__frame {
	background: linear-gradient(
		155deg,
		#ffe89a 0%,
		#e0a819 38%,
		#fff6cf 52%,
		#d29c14 66%,
		#a97708 100%
	);
	filter:
		drop-shadow(0 0 4cqw rgba(247, 194, 62, 0.95))
		drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}

.et-card--expulso .et-card__inner {
	filter: grayscale(0.7);
}

.et-card--saiu {
	opacity: 0.92;
}

.et-card--lesionado .et-card__inner {
	filter: grayscale(0.55);
}

/* Badges de evento */

/* Cada tipo de evento tem um canto fixo, para nunca se sobreporem. */
.et-card__eventos {
	position: absolute;
	display: flex;
	gap: 2.5cqw;
	z-index: 3;
}

/* Cartões: abaixo da sigla da posição. */
.et-card__eventos--cartao {
	left: -7%;
	top: 17%;
	flex-direction: column;
}

/* Substituições (e lesão no pré-jogo): canto superior direito. */
.et-card__eventos--sub {
	right: -9%;
	top: -3%;
	flex-direction: column;
	align-items: flex-end;
}

/* Gols: centralizados e abaixo da base do card. */
.et-card__eventos--gols {
	left: 50%;
	top: 100%;
	transform: translate(-50%, -8%);
	flex-direction: row;
}

.et-badge-evento {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5cqw;
	min-width: 29cqw;
	height: 29cqw;
	padding: 0 1.5cqw;
	border-radius: 999px;
	background: #ffffff;
	color: #11141a;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	font-size: 16cqw;
	font-weight: 800;
	line-height: 1;
}

.et-badge-evento svg {
	width: 24cqw;
	height: 24cqw;
	display: block;
}

.et-badge-evento i {
	font-style: normal;
	font-size: 15cqw;
}

.et-badge-evento--gol {
	color: #11141a;
}

.et-badge-evento--gol-contra {
	color: #b91c1c;
}

.et-badge-evento--penalti {
	color: #7c2d12;
}

.et-badge-evento--amarelo {
	color: #eab308;
}

.et-badge-evento--vermelho {
	color: #dc2626;
}

.et-badge-evento--duplo {
	color: #11141a;
}

.et-badge-evento--saiu {
	color: #dc2626;
}

.et-badge-evento--entrou {
	color: #16a34a;
}

.et-badge-evento--lesao {
	color: #dc2626;
}

/* ---------------------------------------------------------------
   Técnico
   --------------------------------------------------------------- */

.et-rodape {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: #11151c;
	border-radius: 0 0 10px 10px;
	color: #d6dae1;
}

.et-escalacao__palco {
	border-radius: 0;
}

.et-escalacao > .et-escalacao__palco:last-child {
	border-radius: 0 0 10px 10px;
}

.et-tecnico {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.et-tecnico__rotulo {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: #9aa3b0;
}

.et-tecnico .et-card--tecnico {
	width: 92px;
	flex: 0 0 auto;
}

.et-card--tecnico {
	--et-faixa-cor: #1f2937;
	width: 100%;
}

.et-card--tecnico .et-card__frame {
	background: #6b7280;
}

/* ---------------------------------------------------------------
   Banco de reservas
   --------------------------------------------------------------- */

.et-banco {
	/* Largura calculada para que o card do banco tenha exatamente
	   o mesmo tamanho dos cards do campo (--et-card-w = 12% do campo). */
	flex: 0 0 calc(10.71% + 28.6px);
	container-type: inline-size;
	background: rgba(0, 0, 0, 0.16);
	padding: 12px 16px 14px;
	overflow: hidden;
}

.et-banco__titulo {
	margin: 0 0 10px;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
}

.et-banco__lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	justify-items: center;
}

/* Sete ou mais reservas: aperta o espaçamento para caber na coluna. */
.et-banco--compacto .et-banco__lista {
	gap: 6px;
}

.et-card--reserva {
	width: 100%;
}

/* ---------------------------------------------------------------
   Legenda
   --------------------------------------------------------------- */

.et-legenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: #9aa3b0;
}

.et-legenda li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.et-legenda .et-badge-evento {
	min-width: 20px;
	height: 20px;
	font-size: 10px;
	padding: 0 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	background: #f3f4f6;
}

.et-legenda .et-badge-evento svg {
	width: 12px;
	height: 12px;
}

/* ---------------------------------------------------------------
   Responsivo
   --------------------------------------------------------------- */

@media (max-width: 640px) {
	.et-escalacao__palco {
		flex-wrap: wrap;
	}

	.et-campo {
		flex: 1 1 100%;
	}

	.et-banco {
		flex: 1 1 100%;
	}

	.et-banco__lista {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 20px 16px;
	}

	.et-card--reserva {
		width: 100%;
	}

	.et-faixa {
		display: none;
	}

	.et-escalacao {
		--et-card-w: 18cqw;
	}

	.et-tecnico {
		width: 19cqw;
	}
}

/* Fallback para navegadores sem container queries */
@supports not (container-type: inline-size) {
	.et-card__nome {
		font-size: 12px;
	}

	.et-card__estrelas {
		font-size: 10px;
	}

	.et-card__pos,
	.et-card__numero {
		font-size: 9px;
		padding: 2px 3px;
	}

	.et-badge-evento {
		min-width: 20px;
		height: 20px;
		font-size: 10px;
	}

	.et-badge-evento svg {
		width: 12px;
		height: 12px;
	}
}