/**
 * 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: var(--et-secundaria);
}

.et-escalacao--tela .et-escalacao__palco {
	/*
	 * container-type: size libera cqh. Como o campo tem altura conhecida
	 * e largura derivada dela, medir tudo pela ALTURA mantém as
	 * proporções mesmo quando a barra de edição divide o espaço.
	 */
	container-type: size;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	border-radius: 0;
	overflow: hidden;
}

/* O conjunto inteiro é 16:9. */
.et-escalacao--tela {
	width: min(100%, calc(100vh * 16 / 9));
	max-height: 100vh;
	aspect-ratio: 16 / 9;
	flex-direction: column;
	overflow: hidden;
}

/*
 * ────────────────────────────────────────────────────────────────────────────
 * O CAMPO OCUPA O LADO ESQUERDO INTEIRO
 *
 * Cheguei a encolher o campo para dar espaço aos jogadores. Resolvia o
 * sintoma e criava outro: sobrava uma faixa da cor do time acima do gramado, e
 * o lado esquerdo deixava de ser o campo. Ele repetiu — com razão — que o lado
 * esquerdo inteiro tem de ser campo.
 *
 * O aperto nunca foi do campo: é dos CARDS. Cada card é centrado no ponto do
 * jogador e cresce para os dois lados a partir dali. O goleiro está em y=88%,
 * e metade do card dele desce a partir desse ponto — é essa metade que passa
 * da borda, não o campo.
 *
 * Então o campo volta a ocupar tudo, e quem recua é a CAMADA DOS JOGADORES:
 * ela fica encaixada um pouco para dentro do gramado, e as porcentagens da
 * formação passam a valer dentro dessa caixa menor. O gramado continua cheio,
 * de ponta a ponta, e nenhum card alcança a borda.
 *
 * A camada é a mesma referência que o editor usa para gravar as posições, então
 * arrastar um jogador continua gravando a mesma porcentagem que o desenho lê.
 * ────────────────────────────────────────────────────────────────────────────
 */
.et-escalacao--tela {
	/*
	 * A proporção do gramado. O campo ocupa SEMPRE a altura toda; é por aqui
	 * que se muda a largura dele — e a faixa do banner engorda com o que ele
	 * devolver, porque é ela quem tem `flex: 1 1 auto`.
	 *
	 *   26/32 → campo 45,7%   faixa 26,9%
	 *   24/32 → campo 42,2%   faixa 30,4%
	 *   22/32 → campo 38,7%   faixa 33,9%
	 *
	 * Encolher a ALTURA para estreitar seria o caminho errado: deixaria uma
	 * faixa da cor do time acima do gramado, e o lado esquerdo deixaria de ser
	 * o campo.
	 */
	/*
	 * A proporção do gramado, como um número só (largura ÷ altura).
	 *
	 * O campo ocupa sempre a altura toda, então é por aqui que se muda a
	 * largura dele — e a faixa do banner engorda com o que ele devolver,
	 * porque é ela quem tem `flex: 1 1 auto`.
	 *
	 *   0.8125 (26/32) → campo 45,7%   faixa 26,9%   (o original)
	 *   0.6250 (20/32) → campo 35,2%   faixa 38,4%
	 *   0.4375 (14/32) → campo 24,6%   faixa 49,0%   (30% mais estreito)
	 */
	/*
	 * A PROPORÇÃO DA CAIXA É A DA IMAGEM DO GRAMADO.
	 *
	 * A foto é 941×1408, ou seja 0.6683.
	 *
	 * A imagem é ajustada pela LARGURA e encostada na BASE. Daí a proporção da
	 * caixa decide o que se vê, e a conta é direta:
	 *
	 *   caixa = 0.6683  → encaixe exato, imagem inteira, nada cortado
	 *   caixa < 0.6683  → sobra cor de fundo em cima
	 *   caixa > 0.6683  → corta por cima, e só por cima
	 *
	 * A grande área de cima ocupa os primeiros 8% da imagem (a linha dela está
	 * em y=112 de 1408, medido na foto). Para cortar exatamente ela:
	 *
	 *   0.6683 ÷ 0.92 = 0.7264
	 *
	 * É o valor de hoje. Como tudo isso vive dentro da área fixa de 1280×720,
	 * o enquadramento é idêntico no celular e no desktop — só muda o tamanho
	 * final.
	 *
	 * O que não dá é cortar: `cover` e zoom acima de 100% comem as laterais, e
	 * foi tentando resolver por aí que eu errei três vezes. Com a imagem
	 * ajustada pela largura, ela nunca é cortada, em nenhuma proporção de
	 * caixa.
	 */
	--et-campo-prop: 0.78;
}

/* ---------------------------------------------------------------
   AS QUATRO COLUNAS DA ÁREA 16:9
   ---------------------------------------------------------------

   Gramado 45% · banco 5% · card de informações 25% · banner 25%.

   Estão escritas aqui, uma vez, em porcentagem da área — e não saem de
   proporção de imagem, de `flex: 1 1 auto` nem de "o que sobrar". Antes
   saíam: o campo tinha a largura derivada da própria altura pela razão
   0,78, o banco tinha uma conta com pixels dentro, e o painel ficava com
   o resto. O resultado batia por acaso (43,9 / 6,9 / 20,5 / 28,8) e
   mudava sozinho a cada ajuste em qualquer um dos três.

   O painel é uma coluna só no HTML e duas na conta: por isso ele recebe
   50% da área e divide ao meio por dentro — 25% + 25%.
   --------------------------------------------------------------- */

.et-escalacao--tela .et-escalacao__palco {
	display: grid;
	grid-template-columns:
		calc( var(--et-col-campo)  * 1% )
		calc( var(--et-col-banco)  * 1% )
		calc( ( var(--et-col-card) + var(--et-col-banner) ) * 1% );
}

/* Sem banco: duas colunas de fora, e o painel reparte a segunda. */
.et-escalacao--tela.et-escalacao--sem-banco .et-escalacao__palco {
	grid-template-columns:
		calc( var(--et-col-campo-pre) * 1% )
		calc( ( var(--et-col-card-pre) + var(--et-col-banner-pre) ) * 1% );
}

.et-escalacao--tela.et-escalacao--sem-banco .et-painel {
	grid-template-columns:
		calc( var(--et-col-card-pre)   / ( var(--et-col-card-pre) + var(--et-col-banner-pre) ) * 100% )
		calc( var(--et-col-banner-pre) / ( var(--et-col-card-pre) + var(--et-col-banner-pre) ) * 100% );
}

/*
 * `minmax(0, …)` na prática: todo item de grid tem piso de min-content, e
 * um rótulo comprido dentro do banco ou do painel empurraria a coluna para
 * além da porcentagem pedida. `min-width: 0` desliga esse piso.
 */
.et-escalacao--tela .et-campo,
.et-escalacao--tela .et-banco,
.et-escalacao--tela .et-painel {
	flex: none;
	width: 100%;
	min-width: 0;
}

.et-escalacao--tela .et-campo {
	height: 100%;
	/*
	 * Sem proporção fixa: a largura vem da coluna e a altura é a da área.
	 * A foto do gramado é `100% auto` presa pela base, então uma caixa um
	 * pouco mais larga só mostra um pouco mais de campo — nunca corta.
	 */
	aspect-ratio: auto;
}

.et-escalacao--tela .et-painel {
	display: grid;
	/*
	 * Divide a metade que lhe cabe na mesma razão pedida — 25 para 25.
	 *
	 * A conta é `card ÷ (card + banner)`, em porcentagem do painel. Tentei
	 * antes com `calc( … * 1fr )`, que parece natural e é INVÁLIDO: `fr` não
	 * é comprimento e não entra em calc(). O navegador descartava a linha
	 * inteira em silêncio e as duas colunas viravam 3% cada.
	 *
	 * Aqui as variáveis são números puros, então a divisão é legítima.
	 */
	grid-template-columns:
		calc( var(--et-col-card)   / ( var(--et-col-card) + var(--et-col-banner) ) * 100% )
		calc( var(--et-col-banner) / ( var(--et-col-card) + var(--et-col-banner) ) * 100% );
}

.et-escalacao--tela .et-painel__card,
.et-escalacao--tela .et-painel__lateral {
	flex: none;
	width: 100%;
	min-width: 0;
}

.et-escalacao--tela {
	/*
	 * O card do campo tem a MESMA largura do card do banco.
	 *
	 * Os 12,65% eram "11,5% do campo + 10%". O card do banco, medido, dá
	 * 16,08% da largura do campo — e é esse o número agora, para os dois
	 * ficarem do mesmo tamanho em qualquer janela. `cqw` aqui é 1% da largura
	 * do CAMPO, porque `.et-campo` é um container.
	 */
	/*
	 * AS QUATRO COLUNAS, em porcentagem da área. Somam 100.
	 *
	 * Sem unidade de propósito: o mesmo número precisa virar `%` na grade de
	 * fora e `fr` na de dentro do painel. Com "45%" gravado na variável, a
	 * conta de dentro daria 50% do painel em vez de 25% da área — foi
	 * exatamente o que aconteceu na primeira tentativa.
	 */
	--et-col-campo: 42;
	--et-col-banco: 7;
	--et-col-card: 24.6;
	--et-col-banner: 26.4;

	/*
	 * O PRÉ-JOGO TEM TRÊS COLUNAS, NÃO QUATRO.
	 *
	 * Antes do jogo ninguém entrou ainda, então a coluna do banco não existe —
	 * quem decide isso é o render (`et-escalacao--sem-banco`). O que a grade de
	 * quatro colunas fazia com dois filhos era o previsível e ninguém tinha
	 * medido: o painel caía na coluna do banco e abria com 5% de largura.
	 */
	--et-col-campo-pre: 42;
	--et-col-card-pre: 31.2;
	--et-col-banner-pre: 26.8;

	/*
	 * O TAMANHO DO CARD SAI DA ALTURA DA ÁREA, NÃO DA LARGURA DO CAMPO.
	 *
	 * Enquanto era `cqw` do campo, o card mudava de tamanho toda vez que a
	 * coluna do gramado mudava de porcentagem — e a cada mudança as linhas da
	 * formação, espaçadas em 20 pontos, passavam a encostar ou a sobrar. Foram
	 * três rodadas assim: 45% deixou o card em 20,03 de altura e ele encostou;
	 * 40% deixou em 17,60 e sobrou espaço; 46% levaria a 20,24 e encostaria de
	 * novo.
	 *
	 * `cqh` é 1% da ALTURA da área, que é 720 sempre. Com isso o card tem
	 * tamanho fixo em qualquer arranjo de colunas, e a altura dele fica em
	 * 19,8% da camada — abaixo dos 20 pontos que separam as linhas. Mexer nas
	 * colunas deixa de ser motivo para reconferir as dez formações.
	 */
	/*
	 * 11,5: o card do campo fica maior que o do banco — 82×124 contra 68×102.
	 * Quem começa jogando aparece maior que quem entrou, que é a ordem natural
	 * das duas colunas.
	 *
	 * A conta é sobre a ALTURA da área, não sobre a largura do campo: assim o
	 * card não muda de tamanho quando as porcentagens das colunas mudam.
	 *
	 * Vale só para o card do CAMPO. O do banco tem controle próprio, limitado
	 * pela altura da coluna: os dois já não são a mesma medida desde que a
	 * coluna do banco passou a ter porcentagem fixa.
	 */
	--et-card-w: 11.5cqh;

	/*
	 * O recuo da camada dos jogadores dentro do gramado: topo, laterais, base.
	 *
	 * A base é a maior porque é lá que está o goleiro, e porque abaixo do card
	 * ainda vêm a faixa do nome e as estrelas. O topo é menor: o atacante mais
	 * adiantado está em y=13%, e acima dele o card só tem a moldura.
	 */
	/*
	 * Quanto da altura da caixa a foto do gramado ocupa. 100% mostra o campo
	 * inteiro encostado na base; abaixo disso ele encolhe e sobra cor em cima.
	 */
	--et-gramado-zoom: 110%;

	/*
	 * O recuo cresceu de 2% para 10%. Como as posições da formação são
	 * porcentagens DESTA camada, encolher a camada aproxima todos os cards
	 * entre si e os afasta das bordas — sem tocar em nenhum dos dez esquemas.
	 * É o controle certo para "aproxima os cards": um número, e o desenho de
	 * cada formação fica intacto.
	 */
	--et-jogadores-topo: 10%;
	--et-jogadores-lado: 10%;
	--et-jogadores-base: 10%;
}

.et-escalacao--tela .et-campo__jogadores {
	inset:
		var(--et-jogadores-topo)
		var(--et-jogadores-lado)
		var(--et-jogadores-base);
}

/*
 * Campo = 81,25% da altura (26/32); card = 12,65% do campo => 10,28% da
 * altura. A coluna nunca fica mais larga do que o card cabe em altura,
 * senão sobraria vão dos lados quando há muitos lugares (--et-n).
 */
.et-escalacao--tela .et-banco {
	/*
	 * O desconto (o "- 96px") cobre o título da coluna, os respiros e as
	 * bolhas de acontecimento, que sobram para fora do card: sem essa
	 * folga, o primeiro card da fila aparecia cortado no topo.
	 */
	/*
	 * `--et-banco-fator` encolhe o card do reserva.
	 *
	 * Multiplica o `min()` INTEIRO, e não um dos dois ramos: qual deles vence
	 * depende do número de lugares e da altura do palco. Mexer só no primeiro
	 * (o `10.28cqh`) não mudava nada com sete lugares, porque ali quem vence é
	 * o segundo — foi exatamente o que aconteceu na primeira tentativa.
	 *
	 * Os `+ 32px` ficam de fora da multiplicação: eles não são o card, são a
	 * folga do título e das bolhas de acontecimento que sobram para fora dele.
	 */
	flex: 0 0 calc(
		min(
			10.28cqh,
			( 100cqh - 96px - ( var(--et-n, 5) - 1 ) * 6px ) / var(--et-n, 5) * 0.669
		) * var(--et-banco-fator, 0.85) + 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;
	/*
	 * Encostada no topo, e não centralizada: com sete lugares sobra pouco, mas
	 * o pouco que sobra tem de ficar embaixo. Centralizado, a coluna nascia
	 * afastada do título e parecia solta no meio da faixa.
	 */
	align-content: flex-start;
	gap: 10px;
	min-height: 0;
}

/*
 * A coluna já tem a largura exata do card.
 *
 * O `min-width: 0` não é enfeite: item de grid nasce com `min-width: auto`,
 * que é o tamanho MÍNIMO DO CONTEÚDO. Sem ele o card para de encolher no
 * ponto em que o nome e as estrelas deixam de caber, e passa a transbordar a
 * coluna em vez de acompanhá-la — o que fazia `--et-banco-fator` estreitar a
 * coluna sem mudar o card. Só apareceu porque a medição mostrou a coluna
 * indo de 132px a 99px com o card parado em 80px.
 */
.et-escalacao--tela .et-card--reserva,
.et-escalacao--tela .et-card--vaga,
.et-escalacao--tela .et-tecnico--banco,
.et-escalacao--tela .et-tecnico--banco .et-card--tecnico {
	/*
	 * O card usa uma FRAÇÃO da coluna; o rótulo usa a coluna inteira.
	 *
	 * Enquanto os dois usavam 100%, mexer num mexia no outro: estreitar a
	 * coluna para diminuir o card cortava as palavras, e alargá-la para caber
	 * as palavras engordava o card até o sétimo lugar transbordar. São dois
	 * pedidos diferentes — "cards menores" e "as palavras aparecendo" — e
	 * precisavam de dois controles.
	 */
	/*
	 * A LARGURA DO CARD É O MENOR DOS DOIS LIMITES: a coluna e a altura.
	 *
	 * Antes só a coluna mandava — e mandava bem, porque a largura da coluna
	 * era CALCULADA a partir da altura disponível. Agora a coluna tem uma
	 * porcentagem fixa da área (10%), e com ela larga o bastante o card
	 * cresce até os seis lugares mais o técnico não caberem na altura. Foi o
	 * que aconteceu ao passar de 5% para 10%: dois lugares transbordaram.
	 *
	 * O segundo ramo é a mesma conta que a coluna usava: a altura útil
	 * dividida pelo número de lugares, convertida em largura pela proporção
	 * do card (0,669). Os 96px descontados são o título da coluna e os
	 * respiros; os 6px, o vão entre um lugar e outro.
	 */
	/*
	 * `--et-banco-mais` soma DEPOIS do `min()`: é um acréscimo em pixels, não
	 * um fator. Pedido de "uns 5px em cada card" — pedido em pixel se atende
	 * em pixel, senão o número que ele disse vira outro número na tela.
	 */
	width: calc(
		min(
			var(--et-banco-card, 92%),
			( 100cqh - 96px - ( var(--et-n, 5) - 1 ) * 6px ) / var(--et-n, 5) * 0.669
		)
		+ var(--et-banco-mais, 5px)
	);
	min-width: 0;
}

/* ---------------------------------------------------------------
   Painel lateral (tela cheia): escudos, placar e dados do jogo
   --------------------------------------------------------------- */

.et-painel {
	/*
	 * Ocupa o que sobrar. As medidas internas saem de um font-size base
	 * em cqh (altura do palco), então nada depende da largura do painel.
	 */
	flex: 1 1 auto;
	font-size: 2.1cqh;
	background: var(--et-secundaria);
	color: #21252c;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
	min-width: 0;
	overflow: hidden;
}

/* O card do jogo: caixa clara sobre o fundo do time. */
.et-painel__card {
	/* Pós-jogo: 22em menos 20%, e mais 4px de folga fora. */
	width: min(100%, calc(17.6em - 4px));
	height: 100%;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	/*
	 * De cima para baixo, sem distribuir sobra: o acordeão é que cresce
	 * para ocupar o que restar, e é dentro dele que a rolagem acontece.
	 */
	justify-content: flex-start;
	gap: 0.7em;
	padding: 1.1em 1.3em;
	border-radius: 0;
	background: #ffffff;
	box-shadow: 0 0 1.6em rgba(0, 0, 0, 0.3);
	overflow: hidden;
}

/*
 * O placar tem a altura do escudo e centraliza o próprio conteúdo:
 * assim o "x" fica na metade do escudo, e não na metade do bloco
 * escudo + sigla. Por isso `--et-escudo` e o alinhamento pelo topo.
 */
/* O momento do jogo, acima do placar. */
.et-painel__momento {
	flex: 0 0 auto;
	/* Respiro do teto do card e, abaixo do filete, dos escudos. */
	margin: 0.5em 0 0.5em;
	padding-bottom: 0.42em;
	border-bottom: 1px solid #e3e7ee;
	text-align: center;
	color: var(--et-primaria);
	/* Em `em`, então acompanha a fonte-base do painel, que é em `cqh`: cresce
	   com a área e continua a mesma fração em qualquer tela. */
	font-size: 2.7em;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
}

.et-painel__confronto {
	--et-escudo: 4.3em;

	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.45em;
}

.et-painel__time {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45em;
	min-width: 0;
}

.et-painel__escudo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--et-escudo);
	height: var(--et-escudo);
}

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

.et-painel__escudo--vazio {
	border-radius: 50%;
	background: #eceef2;
}

.et-painel__sigla {
	font-size: 1.1em;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #3b414b;
}

/*
 * O tamanho vive nos filhos, não aqui: o placar precisa medir em `em`
 * do card para a altura bater com a do escudo.
 */
.et-painel__placar {
	height: var(--et-escudo);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.1em;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.et-painel__gol {
	font-size: 2.7em;
}

/* O "x" entre os números é um separador, não um número: menor. */
.et-painel__placar em {
	font-style: normal;
	font-size: 1.7em;
	color: #a0a6b0;
}

.et-painel__vs {
	font-size: 4.9em !important;
}

.et-painel__dados {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.7em;
	row-gap: 0;
	text-align: left;
	padding-top: 0;
}

/* Cada linha da ficha fica separada da seguinte. */
.et-painel__dados dt,
.et-painel__dados dd {
	padding-top: 0.62em;
	padding-bottom: 0.62em;
	border-bottom: 1px solid #edeff3;
}

.et-painel__dados dt:last-of-type,
.et-painel__dados dd:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
   A faixa do time, à direita do card: o espaço de publicidade
   --------------------------------------------------------------- */

/*
 * O banner saiu do card e veio para cá. A faixa é o que sobra da
 * largura do palco, e sobra bastante: dá um formato vertical
 * (300x600, o "arranha-céu" da publicidade) sem espremer nada.
 */
.et-painel__lateral {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	/*
	 * O banner encosta no topo, na mesma linha do título "Reservas" da
	 * coluna do banco: dois blocos começando na mesma altura leem como
	 * uma faixa só, e não como duas peças soltas.
	 */
	align-items: flex-start;
	justify-content: center;
	padding: 12px 2cqh 2cqh;
}

/*
 * Formato 16:9, o mesmo da tela: a largura vem da faixa e a altura sai
 * dela. Medida em cqh (altura do palco) para não depender de quanto
 * sobrou de largura em cada momento.
 */
.et-painel__banner {
	width: min(100%, 47cqh);
	aspect-ratio: 16 / 9;
	flex: 0 0 auto;
	border-radius: 0.4em;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
}

.et-painel__banner {
	position: relative;
}

/*
 * As artes ficam empilhadas: a de cima é a acesa. Trocar por opacidade
 * (e não por display) é o que permite o esmaecimento — e mantém todas
 * já carregadas, sem branco no meio da virada.
 */
.et-painel__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.et-painel__arte {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}

.et-painel__arte.is-ativa {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	.et-painel__arte {
		transition: none;
	}
}

/* Sobre o vermelho do time, o vazio precisa de outro contraste. */
.et-painel__banner--vazio {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 0.1em dashed rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.78em;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.7;
}

.et-painel__banner--vazio small {
	font-size: 0.78em;
	letter-spacing: 0.06em;
	text-transform: none;
	font-weight: 600;
}

/* O rótulo virou ícone: fica no title, para quem passa o mouse. */
.et-painel__dados dt {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.et-painel__icone {
	display: block;
	width: 1.15em;
	height: 1.15em;
	color: var(--et-primaria);
}

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

/* A ficha lê no mesmo corpo da classificação: o card é um só. */
.et-painel__dados dd {
	margin: 0;
	min-width: 0;
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.25;
}

/* Só para leitor de tela — o rótulo escrito continua existindo. */
.et-escalacao .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Lugar vago no banco */

.et-card--vaga .et-card__frame {
	background: rgba(255, 255, 255, 0.18);
	filter: none;
}

.et-card--vaga .et-card__inner {
	background: rgba(0, 0, 0, 0.18);
}

/* Sem coluna de banco (pré-jogo), o card do jogo ocupa mais espaço: 34em menos 30%. */
/*
 * A LARGURA DO CARD VEM DA COLUNA, NÃO DE UM `em`.
 *
 * Aqui havia `width: min(100%, calc(23.8em - 10px))`, de quando o painel se
 * arranjava sozinho com o que sobrava. Com as colunas escritas em
 * porcentagem, esse teto em `em` passou a brigar com a grade: a coluna dizia
 * 31,6% e o card abria com 27,3%, deixando uma faixa morta entre ele e o
 * banner. Quem manda na largura agora é a coluna.
 */
.et-escalacao--tela.et-escalacao--sem-banco .et-painel__card {
	width: 100%;
}

/*
 * O pré-jogo não tem banco: o card do jogo toma a coluna inteira e o
 * espaço vai para o patrocinador e para os escudos. Tudo aqui é medido
 * para somar exatamente a altura do palco — ver a conta no README.
 */
.et-escalacao--tela.et-escalacao--sem-banco .et-painel__card {
	width: 100%;
	gap: 0.38em;
	padding: 0.4em 1em;
}

/* ---------------------------------------------------------------
   O acordeão do card: informações, classificação, jogos, artilharia
   --------------------------------------------------------------- */

/*
 * O acordeão toma toda a altura que sobrar do card, e é ele que rola
 * por dentro — o card nunca cresce, porque a tela é fixa em 16:9.
 */
.et-acordeao {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid #e3e7ee;
}

.et-fole {
	flex: 0 0 auto;
	min-height: 0;
	border-bottom: 1px solid #e3e7ee;
}

/* A aba aberta é a única que cresce. */
.et-fole[ open ] {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * O Chrome novo embrulha o conteúdo do <details> num ::details-content.
 * Sem tratá-lo como parte da coluna, o corpo da aba não recebe a altura
 * do pai e a lista cresce até estourar o card — que não pode crescer,
 * porque a tela é fixa em 16:9.
 */
.et-fole[ open ]::details-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	block-size: auto;
	content-visibility: visible;
}

/*
 * Sete abas dividem a altura do card: cada linha de cabeçalho que sobra
 * é altura a menos para a lista aberta. Daí o aperto vertical aqui.
 */
.et-fole__cabeca {
	display: flex;
	align-items: center;
	gap: 0.5em;
	/* Cabeçalho ~40% mais alto: alvo maior para clicar no meio do jogo. */
	padding: 0.63em 0.1em;
	cursor: pointer;
	list-style: none;
	color: #767d8a;
	font-size: 0.82em;
	font-weight: 900;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	user-select: none;
}

/* O triângulo padrão do <details> não combina com o resto. */
.et-fole__cabeca::-webkit-details-marker {
	display: none;
}

.et-fole__cabeca::marker {
	content: "";
}

.et-fole[ open ] > .et-fole__cabeca {
	color: var(--et-primaria);
}

.et-fole__titulo {
	flex: 1 1 auto;
	min-width: 0;
}

.et-fole__icone,
.et-fole__seta {
	flex: 0 0 auto;
	display: block;
	width: 1.25em;
	height: 1.25em;
}

.et-fole__icone svg,
.et-fole__seta svg {
	width: 100%;
	height: 100%;
	display: block;
}

.et-fole__seta {
	width: 1em;
	height: 1em;
	opacity: 0.55;
	transition: transform 0.15s;
}

.et-fole[ open ] > .et-fole__cabeca .et-fole__seta {
	transform: rotate( 180deg );
	opacity: 1;
}

.et-fole__corpo {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	padding-bottom: 0.4em;
}

/*
 * A ficha do jogo espalha as linhas pela altura que sobrou, como era
 * antes do acordeão: o card fica cheio, e não com um bloco em cima e
 * um vazio embaixo.
 */
/*
 * A ficha fica no meio da aba, com as linhas respirando o mesmo tanto.
 * Espalhar as linhas por toda a altura abria vãos enormes no pós-jogo,
 * onde sobra espaço; `safe center` centraliza sem cortar o topo quando
 * um dia faltar.
 */
.et-fole--ficha .et-fole__rolo {
	display: flex;
	flex-direction: column;
	justify-content: safe center;
}

.et-fole--ficha .et-painel__dados {
	flex: 0 0 auto;
}

/*
 * Linhas ~40% mais altas: a ficha é o que mais se lê no ar. O pré-jogo
 * parte de uma linha mais compacta que o pós, então cada momento tem o
 * seu acréscimo — o resultado é o mesmo salto proporcional nos dois.
 */
.et-fole--ficha .et-painel__dados dt,
.et-fole--ficha .et-painel__dados dd {
	padding-top: 0.62em;
	padding-bottom: 0.62em;
}

.et-escalacao--sem-banco .et-fole--ficha .et-painel__dados dt,
.et-escalacao--sem-banco .et-fole--ficha .et-painel__dados dd {
	padding-top: 0.37em;
	padding-bottom: 0.37em;
}

/* O técnico não rola junto: ele encerra a aba, inteiro. */
.et-fole--ficha .et-tecnico--painel {
	flex: 0 0 auto;
	border-top: 1px solid #edeff3;
}

.et-fole__rolo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #c3c9d4 transparent;
}

.et-fole__rolo::-webkit-scrollbar {
	width: 0.45em;
}

.et-fole__rolo::-webkit-scrollbar-thumb {
	background: #c3c9d4;
	border-radius: 999px;
}

/* O recado de quando falta ligar alguma coisa. */
.et-fole__aviso {
	margin: 0;
	padding: 0.6em 0.3em;
	color: #6b7280;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.45;
}

/* Sem API só existe uma aba: aí o cabeçalho dela é ruído. */
.et-acordeao--solo {
	border-top: 0;
}

.et-acordeao--solo .et-fole {
	border-bottom: 0;
}

.et-acordeao--solo .et-fole__cabeca {
	display: none;
}

/* ---------------------------------------------------------------
   Classificação, jogos e artilharia, quando a API responde
   --------------------------------------------------------------- */

.et-tabela__cabecalho {
	display: grid;
	grid-template-columns: 1.7em 1fr 2em 2em 2em 2.5em;
	align-items: center;
	gap: 0.4em;
	padding: 0 0.3em 0.25em;
	color: #9aa1ad;
	font-size: 0.7em;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.et-tabela__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.et-tabela__linha {
	display: grid;
	grid-template-columns: 1.7em 1fr 2em 2em 2em 2.5em;
	align-items: center;
	gap: 0.4em;
	padding: 0.24em 0.3em;
	border-radius: 0.25em;
	font-size: 0.92em;
	line-height: 1.2;
}

/* Zebrado leve: a tabela inteira rola, e a linha precisa se separar. */
.et-tabela__linha:nth-child( even ) {
	background: #f5f7fa;
}

.et-tabela__num {
	text-align: center;
	font-variant-numeric: tabular-nums;
	color: #6b7280;
}

/* A linha do meu time é a razão de a tabela estar ali. */
.et-tabela__linha.is-eu {
	background: var(--et-primaria);
	color: #fff;
	font-weight: 800;
}

.et-tabela__pos {
	text-align: center;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.et-tabela__time {
	display: flex;
	align-items: center;
	gap: 0.4em;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.et-tabela__time img {
	width: 1.25em;
	height: 1.25em;
	object-fit: contain;
	flex: 0 0 auto;
}

.et-tabela__pts {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* A linha do meu time continua sendo a razão de a tabela estar ali. */
.et-tabela__linha.is-eu .et-tabela__num,
.et-tabela__linha.is-eu .et-tabela__pts {
	color: #fff;
}

/* Tabela de jogos */

.et-jogos,
.et-artilharia {
	margin: 0;
	padding: 0;
	list-style: none;
}

.et-jogos__item {
	display: grid;
	grid-template-columns: 1.7em 1fr auto 1.3em;
	align-items: center;
	gap: 0.4em;
	padding: 0.26em 0.3em;
	border-radius: 0.25em;
	font-size: 0.92em;
	line-height: 1.2;
}

.et-jogos__item:nth-child( even ) {
	background: #f5f7fa;
}

.et-jogos__rodada {
	text-align: center;
	color: #9aa1ad;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.et-jogos__times {
	min-width: 0;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.et-jogos__times em {
	font-style: normal;
	color: #a0a6b0;
	margin: 0 0.2em;
}

.et-jogos__saida {
	font-variant-numeric: tabular-nums;
	color: #6b7280;
	font-size: 0.9em;
}

.et-jogos__saida strong {
	color: #21252c;
	font-size: 1.1em;
}

/* Vitória, empate, derrota: uma letra, lida de longe. */
.et-jogos__selo {
	width: 1.3em;
	height: 1.3em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.25em;
	font-size: 0.8em;
	font-weight: 900;
	color: #fff;
}

.et-jogos__item.is-v .et-jogos__selo {
	background: #2e9e5b;
}

.et-jogos__item.is-e .et-jogos__selo {
	background: #9aa1ad;
}

.et-jogos__item.is-d .et-jogos__selo {
	background: #c8442f;
}

/* Na lista de confrontos, o olho procura um nome só: o seu. */
.et-jogos__eu {
	color: var(--et-primaria);
	font-weight: 800;
}

.et-jogos__ele {
	color: #6b7280;
}

/* Artilharia */

.et-artilharia__item {
	display: grid;
	grid-template-columns: 1.7em 1fr 2em;
	align-items: center;
	gap: 0.4em;
	padding: 0.26em 0.3em;
	border-radius: 0.25em;
	font-size: 0.92em;
	line-height: 1.2;
}

.et-artilharia__item:nth-child( even ) {
	background: #f5f7fa;
}

/* ---------------------------------------------------------------
   A casa do jogo: a foto do estádio (o nome mora na ficha)
   --------------------------------------------------------------- */

.et-painel__estadio {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;
	flex: 0 0 auto;
	border-radius: 0.4em;
	overflow: hidden;
	background: #2f3742;
	display: flex;
	align-items: flex-end;
}

.et-painel__estadio img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sem foto, o bloco vira uma faixa com o nome — nunca uma mancha vazia. */
.et-painel__estadio-nome {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0.7em;
	text-align: center;
	font-size: 0.95em;
	font-weight: 800;
}

.et-painel__estadio--sem-foto {
	background: #eef0f4;
	align-items: center;
	color: #6b7280;
}

/*
 * Com o acordeão embaixo, a foto do estádio cede altura: ela é a que
 * tem de sobra, e a tabela é que não pode ficar sem espaço.
 */
.et-escalacao--sem-banco .et-painel__estadio {
	/*
	 * A foto cede o tanto exato para as seis linhas da ficha caberem
	 * inteiras: meia linha cortada no rodapé lê pior do que uma foto
	 * um pouco mais baixa.
	 */
	aspect-ratio: 3.5 / 1;
}

.et-escalacao--sem-banco .et-painel__confronto {
	gap: 1em;
}

.et-escalacao--sem-banco .et-painel__confronto {
	--et-escudo: 7.2em;
}

.et-escalacao--sem-banco .et-painel__sigla {
	font-size: 1.45em;
}

.et-escalacao--sem-banco .et-painel__vs {
	font-size: 5.6em !important;
}

.et-escalacao--sem-banco .et-painel__dados {
	padding-top: 0;
}

/* No pré-jogo o retrato do técnico pode ser um pouco maior. */
.et-escalacao--sem-banco .et-tecnico__foto {
	width: 2.8em;
	height: 2.8em;
}

.et-escalacao--sem-banco .et-tecnico--painel {
	padding-top: 0.35em;
}

/* ---------------------------------------------------------------
   Técnico dentro do card do jogo: uma linha, não um card
   --------------------------------------------------------------- */

.et-tecnico--painel {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding-top: 0.8em;
	border-top: 1px solid #e6e9ef;
}

.et-tecnico__foto {
	flex: 0 0 auto;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	overflow: hidden;
	background: #dfe3ea;
	color: #9aa2b1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.et-tecnico__foto img,
.et-tecnico__foto svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.et-tecnico__texto {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	min-width: 0;
}

.et-tecnico__texto small {
	color: #8c93a1;
	font-size: 0.68em;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.et-tecnico__texto strong {
	font-size: 1.05em;
	font-weight: 800;
}

/* ---------------------------------------------------------------
   Vagas clicáveis: em campo e no banco
   --------------------------------------------------------------- */

.et-card--vazio {
	cursor: pointer;
}

.et-card--vazio .et-card__frame {
	background: rgba(255, 255, 255, 0.55);
	filter: none;
}

.et-card--vazio .et-card__inner {
	background: rgba(255, 255, 255, 0.24);
	border: 0.14em dashed rgba(255, 255, 255, 0.75);
}

.et-card--vazio .et-card__foto {
	opacity: 0.35;
}

.et-card--vazio .et-card__pos {
	background: rgba(255, 255, 255, 0.8);
	color: #2b303a;
}

.et-card--vazio .et-card__faixa {
	background: rgba(255, 255, 255, 0.86);
	color: #2b303a;
	border-color: rgba(255, 255, 255, 0.9);
}

.et-card--vazio .et-card__nome {
	color: #2b303a;
	letter-spacing: 0.04em;
}

.et-card__mais {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	text-shadow: 0 0.06em 0.18em rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.et-card--vaga-livre {
	cursor: pointer;
}

.et-card--vaga-livre .et-card__inner {
	border: 0.14em dashed rgba(255, 255, 255, 0.5);
}

.et-card--vazio:hover .et-card__inner,
.et-card--vaga-livre:hover .et-card__inner {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.34);
}

.et-card--vaga {
	width: 100%;
	opacity: 0.55;
}

/* Técnico dentro da coluna do banco */

.et-tecnico--banco {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-top: 10px;
	flex: 0 0 auto;
}

/* O rótulo do técnico, escrito acima do card, como o "Reservas". */
.et-banco__lista .et-tecnico__rotulo {
	display: block;
	/*
	 * Um respiro leve entre a palavra e o avatar: colados demais os dois
	 * viravam um borrão só na transmissão; afastados demais deixam de
	 * parecer o mesmo item. `--et-tecnico-vao` é o botão disso.
	 */
	margin-bottom: var(--et-tecnico-vao, 4px);
	color: rgba(255, 255, 255, 0.78);
	/* Mesma regra do título da coluna, e pelo mesmo motivo. */
	font-size: min(10px, 13cqw);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
}

/*
 * O card do técnico é o sétimo lugar da coluna, dentro da lista. Como
 * ele vem embrulhado, o embrulho precisa se comportar como card: sem
 * largura própria ele colapsa para altura zero no flex da coluna.
 */
/*
 * O embrulho do técnico ocupa a faixa inteira (é ele que segura o rótulo
 * "TÉCNICO", que precisa da largura toda), mas o CARD dentro dele tem a
 * largura dos outros cards — e, com `display: block`, ficava encostado à
 * esquerda. Medido: os reservas com o centro em 49px e o do técnico em 40px.
 *
 * Uma coluna flex centralizada resolve os dois: o rótulo continua com a
 * largura do embrulho, e o card fica no meio, alinhado com os de cima.
 */
.et-banco__lista .et-tecnico--banco {
	width: 100%;
	flex: 0 0 auto;
	/*
	 * `--et-tecnico-descer` afasta o técnico do último reserva. Ele é o único
	 * item da coluna que não faz parte da fila, então o respiro extra é o que
	 * separa visualmente "quem entrou" de "quem mandou entrar".
	 */
	margin: var(--et-tecnico-descer, 3px) 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	/*
	 * `gap: 0` porque o embrulho herda um `gap: 10px` da regra geral de
	 * `.et-tecnico`, feita para o rodapé, onde rótulo e card ficam lado a
	 * lado. Aqui eles são um par vertical: o espaço entre os dois é a margem
	 * do rótulo, e só ela. Sem isto, mexer na margem não mudava quase nada —
	 * 1px de margem continuava dando 11px de distância.
	 */
	gap: 0;
}

.et-tecnico--banco .et-card--tecnico {
	width: 100%;
}

/* Sem escalação em tela cheia o painel some, mas a faixa continua. */
.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;
}

/* Gramado: listras largas alternadas + leve escurecimento nas bordas. */
/*
 * O gramado é uma foto de campo de verdade, em pé, presa pela base — a
 * mesma que o flyer usa. Ela sobe um pouco da borda para a trave de baixo
 * aparecer inteira; o que fica descoberto embaixo é a cor média da
 * própria foto, então a emenda não se vê.
 */
.et-campo__gramado {
	position: absolute;
	inset: 0;
	/*
	 * A cor é a MÉDIA da grama na última linha da foto (#497316), medida nos
	 * 3.395 pixels de grama daquela faixa. Com a imagem levantada, essa cor é
	 * o que aparece abaixo da linha de fundo — e o antigo #43730e era escuro
	 * demais: a emenda entre foto e cor virava uma faixa visível.
	 */
	/*
	 * A cor de trás é a da BORDA da foto do gramado — a faixa escura em volta
	 * do campo. Assim, se um dia a foto não cobrir a caixa inteira, a emenda
	 * não aparece. Era #497316, tirado da grama clara da foto antiga.
	 */
	background-color: #1b4601;
	background-image:
		radial-gradient(
			120% 90% at 50% 45%,
			rgba(255, 255, 255, 0.09) 0%,
			rgba(255, 255, 255, 0) 55%,
			rgba(0, 0, 0, 0.22) 100%
		),
		var(--et-campo-foto, url("../img/campo-fundo.jpg"));
	background-repeat: no-repeat, no-repeat;
	/*
	 * O gramado é o fundo de uma div: largura da caixa, altura pela proporção
	 * da imagem, encostado na base.
	 *
	 * A FOTO E A CAIXA TÊM A MESMA PROPORÇÃO — por isso `cover`.
	 *
	 * A foto do campo tem 1122×1402, razão 0,8003. A coluna do gramado tem 45%
	 * de 1280 por 720 de altura, razão 0,8000. As duas batem na terceira casa,
	 * então `cover` mostra o campo INTEIRO — as duas grandes áreas, o círculo
	 * central e os dois gols — sem esticar e cortando meio pixel.
	 *
	 * Aqui já houve `100% auto` com a imagem presa pela base e um zoom para
	 * cortar a grande área de cima. Aquilo existia porque a foto antiga era
	 * muito mais estreita (0,6683) do que a caixa: encaixá-la inteira deixava
	 * faixa de cor sobrando. Com a foto certa, a conta some — e conta que some
	 * é conta que não tem como errar depois.
	 *
	 * Ancorada em `bottom`: o que encolhe sai por cima, e a linha de fundo
	 * continua encostada na base.
	 */
	/*
	 * A foto do gramado é o fundo desta div: altura controlada, largura pela
	 * proporção dela, ancorada na BASE.
	 *
	 * `--et-gramado-zoom` é a altura da imagem em relação à caixa. Em 100% o
	 * campo inteiro aparece — as duas grandes áreas e os dois gols. A foto foi
	 * ajustada para ter a mesma razão da coluna, então em 100% não sobra tira
	 * de cor em lado nenhum. Acima de 100% a imagem cresce e o excedente é
	 * repartido igualmente entre as quatro bordas, porque ela é centrada.
	 *
	 * Aqui já houve `cover`, que preenchia a caixa cortando 4,7px em cima e
	 * embaixo. Ficava cheio, mas comia um pedaço das duas linhas de fundo.
	 */
	background-size: 100% 100%, auto var(--et-gramado-zoom, 110%);
	/*
	 * CENTRADO nos dois eixos.
	 *
	 * Com o zoom acima de 100%, o que sobra é repartido igualmente: metade sai
	 * por cima, metade por baixo. Antes a âncora era a base, e todo o excedente
	 * saía pelo topo — bom para manter a linha de fundo de baixo parada, ruim
	 * para o equilíbrio quando as duas metades do campo aparecem.
	 *
	 * Fica registrado o que se aprendeu aqui e não se usa mais:
	 * `background-position` em porcentagem NÃO desloca por porcentagem, ela
	 * distribui o excesso. Foi a causa de três rodadas perdidas.
	 */
	background-position: center, center center;
}

/*
 * Com a foto no lugar, as linhas desenhadas sobrariam por cima das de
 * verdade — duas marcações no mesmo campo.
 */
.et-campo__svg {
	display: none;
}

.et-campo__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

/* Setas de movimentação */

.et-setas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: visible;
}

.et-setas line {
	stroke: #ffffff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 7 6;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}

.et-campo__jogadores {
	position: absolute;
	inset: 0;
	/* Gramado (0), linhas do campo (1) e setas (2) ficam sempre atrás. */
	z-index: 5;
}

.et-card--titular {
	z-index: 5;
}

/* ---------------------------------------------------------------
   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%);
}

/*
 * A sombra de chão, só para quem está no gramado. Ela mora no frame, e
 * não no card, porque só o frame tem altura conhecida — o card cresce
 * com a faixa do nome e com os badges, e a sombra ia parar longe do pé
 * do jogador.
 *
 * É elipse, e não retângulo desfocado: sombra de coisa em pé no gramado
 * se espalha mais para os lados do que para trás. E é mais larga que o
 * card, que é como sombra de luz alta de estádio cai.
 */
.et-card--titular .et-card__frame::after {
	content: "";
	position: absolute;
	left: -12%;
	right: -12%;
	top: 96%;
	height: 17%;
	z-index: -1;
	background: radial-gradient(
		closest-side,
		rgba(0, 0, 0, 0.55),
		rgba(0, 0, 0, 0.34) 45%,
		rgba(0, 0, 0, 0.12) 75%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
}

.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: var(--et-faixa-cor);
	color: var(--et-texto);
	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: 15cqw;
	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;
}

/*
 * A nota é o que mais se lê de longe no card, então ela é maior que o
 * card: passa da largura, como a faixa do nome, e encosta nela por
 * baixo. Por isso vive fora da moldura — lá dentro o recorte cortaria.
 */
.et-card__estrelas {
	position: absolute;
	/*
	 * A fila de estrelas termina onde termina a área branca do card: ela
	 * é grande, mas não solta no gramado. Os 2px empurram para baixo, para
	 * a faixa do nome não encostar nas pontas.
	 */
	left: 0;
	right: 0;
	top: calc(71% + 2px);
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: 0;
	letter-spacing: -0.06em;
	color: #b9bec7;
	font-size: 18.5cqw;
	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: 25cqw;
	height: 25cqw;
	padding: 0 1.5cqw;
	border-radius: 999px;
	background: #ffffff;
	color: #11141a;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
	font-size: 14cqw;
	font-weight: 800;
	line-height: 1;
}

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

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

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

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

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

/* Pênalti defendido é do goleiro: verde, como coisa boa que é. */
.et-badge-evento--defesa {
	color: #1f7a45;
}

.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: #f4f5f7;
	border: 1px solid #e2e5ea;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	color: #4b5563;
}

.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: #6b7280;
}

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

.et-card--tecnico {
	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);
	/*
	 * O recuo lateral era 16px de cada lado. Numa coluna de 77px isso deixava
	 * 45px de texto — menos do que "ENTRARAM" (61px) e "PROTOCOLO" (59px)
	 * precisam, e menos até do que "TÉCNICO" (49px). Os três rótulos saíam
	 * cortados, e cortados em silêncio, porque a coluna tem `overflow: hidden`.
	 *
	 * Diminuir a fonte não resolvia: nem com o card no tamanho original a
	 * palavra cabia. Quem tinha de ceder era o recuo.
	 */
	padding: 12px 6px 14px;
	overflow: hidden;
}

/*
 * "RESERVAS" e "TÉCNICO" são o mesmo rótulo, um no alto da coluna e outro no
 * meio dela — e estavam desenhados diferente: 8,5px/900/0.04em contra
 * 10px/800/0.12em. Lado a lado, um parecia menor que o outro sem motivo.
 * Agora os dois usam a medida do rótulo do técnico.
 */
.et-banco__titulo {
	margin: 0 0 6px;
	color: rgba(255, 255, 255, 0.78);
	/*
	 * O rótulo acompanha a LARGURA DA COLUNA, não um tamanho fixo.
	 *
	 * Com a coluna do banco em 5% da área, ela tem 64px em 1280 — e
	 * "ENTRARAM" a 10px não cabe. Já cortou antes, em silêncio, porque a
	 * coluna tem `overflow: hidden`. Amarrado ao `cqw` do próprio banco, o
	 * rótulo encolhe junto com a coluna e nunca mais some sem avisar.
	 */
	font-size: min(10px, 13cqw);
	letter-spacing: 0.01em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	line-height: 1;
	white-space: nowrap;
}

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

/*
 * O rótulo preso a um lugar da coluna ("Protocolo", acima do sexto).
 *
 * Mesmo desenho de "ENTRARAM" e "TÉCNICO" — os três são a mesma coisa: uma
 * legenda dentro da faixa do banco. Desenhá-los diferente faria parecer que
 * um deles é outra categoria de informação.
 */
.et-banco__rotulo {
	display: block;
	width: 100%;
	/*
	 * `min-width: 0` pelo mesmo motivo dos cards, e aqui o efeito era pior:
	 * item de grid nasce com a largura mínima do CONTEÚDO, e o conteúdo é uma
	 * palavra com `nowrap`. "PROTOCOLO" empurrava a coluna inteira para caber
	 * — os cards do banco cresceram de 67px para 103px e o sétimo lugar
	 * transbordou. Uma legenda não pode mandar na largura da faixa.
	 */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	/*
	 * Mais espaço em cima que embaixo, de propósito: a legenda pertence ao
	 * card que vem DEPOIS dela, e o respiro maior é o que separa esse par do
	 * jogador de cima. Simétrica, ela pareceria solta entre os dois.
	 */
	margin: 7px 0 1px;
	color: rgba(255, 255, 255, 0.78);
	/*
	 * Um ponto menor que "ENTRARAM" e "TÉCNICO", e com menos espaçamento:
	 * este rótulo vive DENTRO da lista, na largura do card (67px), enquanto
	 * os outros dois têm a largura da coluna. "PROTOCOLO" tem nove letras e
	 * a 10px saía cortado. Medido, não estimado.
	 */
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1;
	white-space: nowrap;
}

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

.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: #4b5563;
}

.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
   --------------------------------------------------------------- */

/*
 * As regras de celular abaixo disparam pela largura DO APARELHO. Na tela de
 * transmissão isso é errado por definição: ali o layout é desenhado numa área
 * fixa de 1280×720 e depois reduzido em bloco — a largura do aparelho não deve
 * mudar nada, só o tamanho final.
 *
 * Sem a exclusão, num celular em pé essas regras entravam DENTRO da área de
 * 1280 e desmontavam o quadro: o campo virava 100% de largura, o palco
 * quebrava linha, e dois lugares do banco transbordavam a coluna. Medido.
 */
@media (max-width: 640px) {
	body:not(.et-body-tela) .et-escalacao__palco {
		flex-wrap: wrap;
	}

	body:not(.et-body-tela) .et-campo {
		flex: 1 1 100%;
	}

	body:not(.et-body-tela) .et-banco {
		flex: 1 1 100%;
	}

	body:not(.et-body-tela) .et-banco__lista {
		/* Teto de 120px: sem ele os cards do banco esticam e ficam
		   desproporcionais em relação aos do campo. */
		grid-template-columns: repeat(auto-fill, minmax(92px, 120px));
		justify-content: center;
		gap: 20px 16px;
	}

	body:not(.et-body-tela) .et-card--reserva {
		width: 100%;
	}

	body:not(.et-body-tela) .et-faixa {
		display: none;
	}

	body:not(.et-body-tela) .et-escalacao {
		--et-card-w: 15cqw;
	}

	body:not(.et-body-tela) .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;
	}
}

/*
 * Na aba "Rodadas" o número já está no cabeçalho do grupo: repeti-lo em
 * cada linha só roubaria largura dos nomes dos times.
 */
.et-jogos--rodada .et-jogos__item {
	grid-template-columns: 1fr auto 1.3em;
}

.et-jogos--rodada .et-jogos__rodada {
	display: none;
}

/* Jogo em andamento: o ponto pulsa, como um sinal de gravação. */
.et-jogos__item.is-vivo .et-jogos__selo {
	background: #c8442f;
	animation: et-pulso 1.6s ease-in-out infinite;
}

.et-jogos__item.is-vivo .et-jogos__times {
	color: var(--et-primaria);
	font-weight: 800;
}

@keyframes et-pulso {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media ( prefers-reduced-motion: reduce ) {
	.et-jogos__item.is-vivo .et-jogos__selo {
		animation: none;
	}
}

/* Nome inteiro do clube na lista de partidas do time. */
.et-jogos__times--inteiro {
	font-weight: 700;
}

/* ---------------------------------------------------------------
   Ficha: campeonato, partida, time
   --------------------------------------------------------------- */

.et-ficha {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.8em;
	align-items: baseline;
}

.et-ficha dt,
.et-ficha dd {
	margin: 0;
	padding: 0.28em 0.3em;
	border-bottom: 1px solid #edeff3;
	font-size: 0.92em;
	line-height: 1.25;
}

.et-ficha dt {
	color: #8c93a1;
	font-weight: 700;
	white-space: nowrap;
}

.et-ficha dd {
	min-width: 0;
	font-weight: 800;
	text-align: right;
	word-break: break-word;
}

.et-ficha dt:last-of-type,
.et-ficha dd:last-of-type {
	border-bottom: 0;
}

/*
 * Vitórias e saldo só cabem no card largo (pré-jogo). No card estreito
 * do pós-jogo elas roubariam o nome do clube, que é o que se lê de
 * longe — então somem, e ficam pontos e jogos.
 */
@container ( max-width: 300px ) {
	.et-tabela__cabecalho,
	.et-tabela__linha {
		grid-template-columns: 1.7em 1fr 2em 2em;
	}

	.et-tabela__num--extra {
		display: none;
	}
}

/*
 * A ficha não estica: ela ocupa a altura das próprias linhas e devolve o
 * resto para a outra aba aberta — que, quando há jogo rolando, é o ao
 * vivo. Sem isso as duas dividiriam o card meio a meio, e metade da
 * altura da ficha seria espaço em branco.
 */
.et-fole--ficha[ open ] {
	flex: 0 1 auto;
}

/* Linhas um pouco mais juntas. */
.et-fole--ficha .et-painel__dados dt,
.et-fole--ficha .et-painel__dados dd {
	padding-top: 0.34em;
	padding-bottom: 0.34em;
}

.et-escalacao--sem-banco .et-fole--ficha .et-painel__dados dt,
.et-escalacao--sem-banco .et-fole--ficha .et-painel__dados dd {
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

/*
 * Nome comprido não quebra a linha da ficha: corta com reticências, e o
 * texto inteiro fica no title. "Estádio Municipal Coronel Francisco…"
 * empurrando o resto do card para baixo é pior do que cortado.
 */
.et-painel__dados dd {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Menos espaço entre as estrelas: elas são grandes, e o vão apareceria. */
.et-card__estrelas {
	letter-spacing: -0.12em;
}

.et-card__numero {
	top: 90%;
}

/* ---------------------------------------------------------------
   Jogos ao vivo: placar de estádio
   --------------------------------------------------------------- */

.et-vivo {
	margin: 0;
	padding: 0;
	list-style: none;
}

.et-vivo__item {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.3em;
	padding: 0.3em 0.15em;
	border-radius: 0.25em;
	/*
	 * Um degrau menor que as outras listas: aqui cabem dois nomes
	 * inteiros, o placar e a luz na mesma linha, e nome de clube
	 * cortado no meio ("Operário-…") não serve para nada no ar.
	 */
	font-size: 0.85em;
	line-height: 1.15;
}

.et-vivo__item:nth-child( even ) {
	background: #f5f7fa;
}

.et-vivo__time {
	min-width: 0;
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Mandante encosta no placar pela direita; visitante, pela esquerda. */
.et-vivo__time--casa {
	text-align: right;
}

.et-vivo__time--fora {
	text-align: left;
}

.et-vivo__placar {
	flex: 0 0 auto;
	padding: 0 0.15em;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.et-vivo__placar em {
	font-style: normal;
	color: #a0a6b0;
	margin: 0 0.15em;
}

/* Luz de transmissão ao vivo: pisca devagar, na cabeça da linha. */
.et-vivo__item {
	grid-template-columns: 0.45em 1fr auto 1fr;
}

.et-vivo__luz {
	flex: 0 0 auto;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: #c8442f;
	animation: et-pulso 1.6s ease-in-out infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	.et-vivo__luz {
		animation: none;
	}
}

/* O título da coluna do banco respira um pouco mais do teto. */
/* O bloco do banco encosta no topo da coluna: cada pixel aqui é lugar de card. */
.et-banco__titulo {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Acontecimentos do jogo, dentro da ficha
   --------------------------------------------------------------- */

.et-acontece {
	margin-top: 0.5em;
	padding-top: 0.5em;
	border-top: 1px solid #e3e7ee;
}

.et-acontece__titulo {
	margin: 0 0 0.3em;
	color: #8c93a1;
	font-size: 0.7em;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.et-acontece__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.et-acontece__item {
	display: grid;
	grid-template-columns: 1.35em 1fr auto;
	align-items: center;
	gap: 0.45em;
	padding: 0.2em 0.15em;
	font-size: 0.88em;
	line-height: 1.2;
}

.et-acontece__item:nth-child( even ) {
	background: #f5f7fa;
}

.et-acontece__nome {
	min-width: 0;
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.et-acontece__nome b {
	color: #6b7280;
}

.et-acontece__min {
	color: #6b7280;
	font-variant-numeric: tabular-nums;
}

/*
 * O badge aqui é só o desenho, sem a bolha branca dos cards — e com
 * tamanho próprio: o do card é medido em cqw, que neste contexto (o
 * card do jogo, bem mais largo) sairia gigante.
 */
.et-acontece .et-badge-evento svg {
	width: 100%;
	height: 100%;
}

.et-acontece .et-badge-evento {
	position: static;
	/* O badge do card tem font-size próprio em cqw; aqui ele herda. */
	font-size: inherit;
	width: 1.35em;
	height: 1.35em;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
}

/* ---------------------------------------------------------------
   Sem nota e nota zero: palavra no lugar das estrelas
   --------------------------------------------------------------- */

/*
 * Ocupam exatamente o espaço das estrelas — mesma faixa, mesma altura —
 * para que o card não mude de forma quando a nota muda de estado.
 */
.et-card__estrelas--texto {
	/* A palavra desce um pouco: a estrela pode encostar na faixa, a letra não. */
	top: 75%;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * Menor que as estrelas, porque "SEM NOTA" é palavra longa e não pode
	 * vazar do card — mas grande o bastante para se ler de longe, que é
	 * como esta tela é vista.
	 */
	font-size: 13.5cqw;
	letter-spacing: 0;
}

.et-card__semnota,
.et-card__zero {
	max-width: 100%;
	padding: 0.6cqw 3cqw;
	border-radius: 2px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.et-card__semnota {
	background: rgba(255, 255, 255, 0.9);
	color: #6b7280;
}

/* Zero é julgamento, e julgamento ruim: sai na cor de quem levou. */
.et-card__zero {
	background: #c8442f;
	color: #fff;
}

/* ---------------------------------------------------------------
   Os troféus do dia: Kuki (ouro) e Deu Ruim (sem cor)
   --------------------------------------------------------------- */

/*
 * O card do Kuki é maior que os outros e vira ouro — inclusive a faixa
 * do nome e as estrelas, que herdam --et-faixa-cor. Maior de propósito:
 * numa tela cheia de cards iguais, tamanho é o que o olho acha primeiro.
 */
.et-card--kuki {
	--et-faixa-cor: #b8860b;
	z-index: 6;
}

.et-escalacao--tela .et-card--titular.et-card--kuki {
	width: calc(var(--et-card-w) * 1.26);
}

.et-card--kuki .et-card__frame {
	background: linear-gradient(160deg, #f7e08a 0%, #d4af37 45%, #8a6b12 100%);
	box-shadow: 0 0 0 1px rgba(255, 245, 200, 0.8), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.et-card--kuki .et-estrela.is-on {
	color: #f5cd4a;
}

.et-card--kuki .et-card__numero {
	color: #8a6b12;
}

/* Deu ruim: o card perde a cor. O time é vermelho; aqui, cinza. */
.et-card--ruim {
	--et-faixa-cor: #5b6472;
}

.et-card--ruim .et-card__frame,
.et-card--ruim .et-card__foto img {
	filter: grayscale(1) contrast(0.92);
}

.et-card--ruim .et-estrela.is-on {
	color: #9aa3b0;
}

.et-card--ruim .et-card__numero {
	color: #5b6472;
}

.et-card--ruim .et-card__zero {
	background: #5b6472;
}

/* ---------------------------------------------------------------
   Média do time, abaixo do momento
   --------------------------------------------------------------- */

/*
 * O bloco da média encosta na linha do momento e se afasta dos escudos:
 * ele é o rodapé do título, não o cabeçalho do confronto.
 */
.et-painel__media {
	flex: 0 0 auto;
	margin: -0.35em 0 1.5em;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.3em 0.4em;
	color: #6b7280;
	font-size: 0.8em;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.et-painel__media b {
	color: var(--et-primaria);
	font-size: 1.45em;
	font-variant-numeric: tabular-nums;
}

.et-painel__media small {
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* Estrelas da média do time, ao lado do número. */
.et-painel__media-estrelas {
	display: inline-flex;
	align-items: center;
	gap: 0;
	letter-spacing: -0.04em;
	color: #cbd2dc;
	font-size: 1.35em;
	line-height: 1;
}

.et-painel__media-estrelas .et-estrela.is-on {
	color: var(--et-primaria);
}

/* A seta de quem saiu, dentro dos parênteses da troca. */
.et-acontece__saiu {
	color: #6b7280;
	font-weight: 700;
}

.et-acontece__saiu .et-badge-evento {
	position: static;
	font-size: inherit;
	width: 1.1em;
	height: 1.1em;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
	vertical-align: -0.15em;
}

.et-acontece__saiu .et-badge-evento svg {
	width: 100%;
	height: 100%;
}

/* "Média do time", numa linha própria acima das estrelas. */
.et-painel__media-rotulo {
	flex: 0 0 100%;
	text-align: center;
	color: #8c93a1;
	font-size: 0.82em;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
}

/* Técnico expulso: o card fica marcado como o de um jogador expulso. */
.et-card--tecnico.et-card--expulso .et-card__frame {
	filter: saturate(0.5) brightness(0.9);
}

.et-card--tecnico {
	cursor: pointer;
}

/*
 * O placar do time do usuário é somado dos gols dos jogadores: ele não
 * convida ao clique como o do adversário, que é digitado.
 */
.et-painel__gol--somado {
	cursor: default;
}