/* =============================================================================
   A PROJEÇÃO NA TELA DO AR

   Seis janelas numa área de 1280×720: duas colunas de três. A esquerda é o que
   se joga em casa, a direita o que se joga fora — a mesma leitura da tabela do
   campeonato, e por isso ninguém precisa de legenda para entender.

   Tudo cabe sem rolagem, sempre. Uma tela de transmissão que rola é uma tela
   que mostra metade.

   -----------------------------------------------------------------------------
   AS MESMAS TRÊS REGRAS DA ESCALAÇÃO E DAS NOTÍCIAS

   1. A área é de 1280×720 e quem a dimensiona é o palco (`palco.css`): o corpo
      inteiro é ampliado ou reduzido em bloco para caber na janela. Esta folha
      não sabe o tamanho da janela e não deve saber.

   2. POR ISSO TUDO É MEDIDO EM `cqh` — 1% da altura da área —, e não em `vh`
      nem em pixel. Era `clamp(px, vh, px)`: media a JANELA, não a área. Em tela
      cheia num monitor grande, o mesmo layout vinha com letras de outro
      tamanho, e o que cabia na janela deixava de caber no ar.

   3. A FAIXA VAZIA DA DIREITA, 27%, é onde entra a câmera no programa. Nada
      escrito atravessa — o fundo, sim.

/* -----------------------------------------------------------------------------
   AS CORES SÃO AS DO SITE

   Fundo claro, tinta escura, o vermelho do clube nos números que importam. A
   primeira versão desta tela era escura porque tela de transmissão costuma ser
   escura — mas ela ia ao ar ao lado das outras páginas do timbucast, e uma
   projeção preta entre uma ficha branca e uma lista branca não parece a mesma
   casa.

   Os tokens vêm do tema quando ele está presente (`--arqc-…`). NA PÁGINA DO AR
   ELE NÃO ESTÁ: o template tira a folha do tema de propósito, para o site não
   pintar por cima da tela. Por isso cada `var()` traz o valor do tema escrito
   como reserva — são os mesmos números do `style.css`, e é o que faz a tela do
   ar ter a cor do site sem carregar o site inteiro.
   ============================================================================= */

.et-proj {
	--et-proj-tinta: var(--arqc-tinta, #16181d);
	--et-proj-suave: var(--arqc-suave, #667085);
	--et-proj-fundo: var(--arqc-fundo, #ffffff);
	--et-proj-papel: var(--arqc-papel, #f6f7f9);
	--et-proj-borda: var(--arqc-borda, #e5e8ee);
	--et-proj-borda-forte: var(--arqc-borda-forte, #d3d8e2);
	--et-proj-clube: var(--arqc-clube, #c1121f);
	--et-proj-vitoria: var(--arqc-vitoria, #12783e);
	--et-proj-empate: var(--arqc-empate, #8a5a00);
	--et-proj-derrota: var(--arqc-derrota, #c1121f);
	--et-proj-raio: var(--arqc-raio, 14px);

	/*
	 * A FAIXA DA CÂMERA. Um número só, e é dele que sai o recuo de tudo o que
	 * é escrito: se a faixa mudar, muda inteira.
	 */
	--et-proj-vazio: 27%;

	/*
	 * `size` faz o `cqh` medir a ALTURA DESTA ÁREA, e não a da janela.
	 *
	 * E é por isso que ela não tem recuo nem conteúdo: quem declara a unidade
	 * não pode usá-la no que decide o próprio tamanho — a conta dependeria de
	 * si mesma. O recuo vive na camada de dentro.
	 */
	container-type: size;

	/*
	 * A ÁREA É A REFERÊNCIA DE POSIÇÃO DO MENU. Sem isto ele se penduraria na
	 * página, que no palco está escalada por `transform` — e o canto de cima da
	 * PÁGINA não é o canto de cima da ÁREA.
	 */
	position: relative;

	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--et-proj-fundo);
	color: var(--et-proj-tinta);
	font-family: var(--arqc-fonte, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
}

/*
 * `box-sizing` DENTRO DA ÁREA.
 *
 * Esta tela roda com o CSS do tema removido — e é de lá que vinha o
 * `box-sizing: border-box` que todo mundo assume existir. Sem ele, um
 * `width: 100%` com recuo interno soma o recuo à largura, e o item do menu
 * transborda do painel branco.
 */
.et-proj,
.et-proj *,
.et-proj *::before,
.et-proj *::after {
	box-sizing: border-box;
}

/* A camada de dentro: recuo, folga e tudo o que se lê. */
.et-proj__area {
	display: flex;
	flex-direction: column;
	gap: 2cqh;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	/*
	 * ── O TOPO COMEÇA NA LINHA DO MENU.
	 *
	 * "Alinha o topo mais acima, na mesma linha do menu hamburguer."
	 *
	 * O canto dos botões é posicionado em `top:10px` (`.et-hud`), e esta área
	 * abria com 3.2cqh de respiro — uns 23px no palco de 720. O nome do clube
	 * nascia treze pixels abaixo do botão ao lado dele, que é pouco para
	 * parecer intenção e muito para parecer alinhado.
	 *
	 * O respiro de baixo fica onde estava: ele não tem com o que se alinhar.
	 */
	/*
	 * ── E A DIREITA GANHOU UMA MARGEM — "coloca pra ocupar o espaço dentro
	 *    dessa área, pra dar uma margem pro banner".
	 *
	 * O recuo era a faixa exata: o texto acabava no pixel em que o anúncio
	 * começa. Enquanto o banner tinha recuo próprio, sobrava um respiro por
	 * acaso — e ele sumiu quando o anúncio passou a encostar na divisa. Era o
	 * respiro de ninguém, e por isso ele acabou.
	 *
	 * 2,6cqh é o mesmo respiro que a tela das notícias dá entre o texto e a
	 * divisa dela, pela mesma razão: tinta encostada em tinta, no ar, lê como
	 * uma coisa invadindo a outra.
	 */
	padding: 10px calc(var(--et-proj-vazio) + 2.6cqh) 3.2cqh calc(3.4cqh - 10px);
	min-height: 0;
}

/* -----------------------------------------------------------------------------
   O BANNER DO PATROCÍNIO, NA FAIXA DA DIREITA

   O mesmo banner das telas de pré-jogo e pós-jogo, no mesmo lugar delas: os 27%
   da direita. Aqui essa faixa já existia — era o vazio da câmera — e é para ela
   que a arte vai, e não para um canto novo. Duas telas do mesmo programa com o
   patrocínio em lugares diferentes obrigariam a remontar o enquadramento a cada
   troca de assunto.

   A faixa é POSICIONADA POR CIMA da área, e não uma coluna dela: a área é uma
   pilha vertical (topo + grade) que já divide os 720 de altura entre as seis
   janelas. Virar uma grade de duas colunas para pendurar o banner mudaria a
   conta de altura de tudo o que já está medido nesta folha.
   ----------------------------------------------------------------------------- */

.et-proj__faixa {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--et-proj-vazio);
	height: 100%;
	/*
	 * ── A FAIXA TEM TOM PRÓPRIO — "em vez de pôr uma linha vertical, faz que
	 *    fique com duas cores diferentes as duas seções".
	 *
	 * Ela já teve a linha fina que ele pediu antes, e a troca é a mesma das
	 * outras telas da live: uma área de outro tom diz «daqui para lá é a
	 * câmera» melhor do que um risco de dois pixels, que é a primeira coisa
	 * que a compressão do vídeo joga fora.
	 *
	 * É um véu preto e não uma cor escrita, pela mesma razão de lá: a tela
	 * veste a cor do clube. Aqui ele é mais leve — 4% contra 12 — porque o
	 * fundo é branco, e sobre branco um véu de 12% vira cinza de chumbo.
	 */
	background: rgba(0, 0, 0, 0.04);
	display: flex;
	/*
	 * A arte encosta no topo, na mesma altura do nome da projeção — como na
	 * escalação, onde ela nasce na linha do "Reservas". Centralizada na
	 * vertical, ela flutuaria no meio do vazio e leria como erro de montagem.
	 */
	align-items: flex-start;
	justify-content: center;
	/*
	 * ── E SEM RECUO — "faz o banner ficar assim em todas as telas das lives".
	 *
	 * Eram 3,2cqh no alto e 2,6 nos lados. A faixa inteira é do patrocínio:
	 * recuo aqui é fundo da tela aparecendo em volta da arte de quem pagou.
	 */
	padding: 0;

	/*
	 * NADA DE CLIQUE AQUI.
	 *
	 * A faixa cobre a direita inteira da tela, inclusive por cima da borda das
	 * janelas de fora de casa. Sem isto, o interruptor dos ajustes e os botões
	 * de ponto que ficam nessa beirada parariam de responder — e no ar, com a
	 * tela aparentemente normal, ele clicaria e nada aconteceria.
	 */
	pointer-events: none;
}

/*
 * ── MENOS A CAIXA DO PATROCINADOR, que é onde se clica.
 *
 * "Não está funcionando o clique ali no banner na projeção."
 *
 * A faixa inteira é atravessável de propósito — ela cobre a direita da tela e
 * engoliria os botões de ponto que ficam naquela beirada. Só que o destaque
 * nasceu depois dessa regra: a caixa do patrocinador passou a ser clicável em
 * todas as telas, e NESTA o clique atravessava junto com o resto. O menu do
 * operador aparecia (ele é desenhado pelo script, que não sabe de
 * `pointer-events`) e não respondia a nada.
 *
 * O que volta a receber clique é só a caixa, e não a faixa: a beirada em volta
 * dela continua atravessável, que era o motivo da regra de cima.
 */
.et-proj__faixa .et-painel__banner {
	pointer-events: auto;
}

/*
 * A CAIXA DA ARTE MUDOU DE ARQUIVO: ela está em `banner.css`, junto com a da
 * escalação e a das notícias.
 *
 * O comentário que estava aqui dizia que as regras eram repetidas "porque a
 * folha da escalação NÃO é carregada nesta página". Estava certo no diagnóstico
 * e errado na cura: a repetição envelheceu, e o mesmo anúncio passou a mudar de
 * tamanho e de canto conforme a tela. Agora a caixa mora numa folha só, que
 * cada tela enfileira — inclusive esta. O que continua sendo daqui é a FAIXA,
 * logo acima.
 */

/* -----------------------------------------------------------------------------
   O TOPO

   O escudo e o nome à esquerda; o placar geral à direita. O número grande é o
   que já foi conquistado: numa transmissão, o que se pergunta primeiro é
   "quantos pontos já temos".
   ----------------------------------------------------------------------------- */

.et-proj__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2.2cqh;
	flex: 0 0 auto;
}

/* =============================================================================
   O CANTO DO MENU É O PRIMEIRO ITEM DA LINHA

   Ele era `position:absolute` no canto da área, e esta linha abria um recuo à
   esquerda para não passar por baixo dele — duas medidas em arquivos diferentes
   que só se encontravam na tela, e que se desencontraram duas vezes: quando o
   canto ganhou o segundo botão, e quando o bloco da esquerda virou duas linhas.

   Dentro da linha não há o que combinar. O `align-items: center` da linha
   alinha o ☰ com o bloco de duas linhas sem nenhum número, e continua alinhando
   no dia em que o bloco virar três.

   `relative` e não `static`: a lista do menu se pendura nele por `absolute`, e
   sem um ancestral posicionado ela se penduraria na área.
   ============================================================================= */

.et-proj .et-hud--esq {
	position: relative;
	top: auto;
	left: auto;
	flex: 0 0 auto;
}


/*
 * ═════════════════════════════════════════════════════════════════════════════
 * DUAS LINHAS — "coloca cada linha dessa em uma linha".
 *
 * O nome em cima, a posição no campeonato embaixo. Em fila, as duas disputavam
 * a largura com o placar da projeção e o nome perdia: ele é o único elástico da
 * linha, e saía «Permanê…» — justamente a palavra que diz de que projeção se
 * trata.
 *
 * `flex: 1 1 auto` para a coluna tomar a sobra da linha: com o escudo fora e a
 * posição embaixo, o nome tem a largura inteira antes de precisar de
 * reticências.
 *
 * (O `.et-proj__escudo` que morava aqui saiu junto com o escudo — ver o PHP.)
 * ═════════════════════════════════════════════════════════════════════════════
 */
.et-proj__marca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.3cqh;
	flex: 1 1 auto;
	min-width: 0;
	/* A coluna é um item de flex: sem isto ela não encolhe e o nome não corta. */
	max-width: 100%;
}

.et-proj__nome {
	margin: 0;
	font-size: 3.4cqh;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;

	/*
	 * ─────────────────────────────────────────────────────────────────────────
	 * UMA LINHA, SEMPRE — e reticências quando o nome não couber.
	 *
	 * A régua achou isto ao medir o selo do repositório: com um nome longo
	 * («Permanência na Série B 2026 — Náutico») e o selo ao lado, o nome
	 * quebrava em duas linhas. O topo é `flex: 0 0 auto` e a grade é `1 1 auto`
	 * — o topo crescia 19px e as seis janelas pagavam os 19. Numa janela onde a
	 * lista de jogos cabe em três linhas, isso é um jogo saindo pela borda sem
	 * nada dizendo que estava ali.
	 *
	 * O nome é contexto, e está escrito na página toda; o selo e o placar são
	 * números do jogo de hoje. Quando não cabem os três, quem cede é o nome — e
	 * cede visivelmente, nas reticências, em vez de a projeção perder uma linha
	 * de jogo em silêncio.
	 *
	 * O `min-width: 0` é o que permite encolher: sem ele, um item de flex não
	 * passa do tamanho do próprio conteúdo, e o `ellipsis` nunca acontece.
	 * ───────────────────────────────────────────────────────────────────────── */
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.et-proj__geral {
	display: flex;
	/*
	 * O PLACAR TEM DUAS LINHAS AGORA, e por isso o alinhamento saiu da linha de
	 * base. Com `baseline`, a posição na tabela casaria com a PRIMEIRA linha do
	 * placar e ficaria pendurada acima do meio do bloco. `center` alinha as duas
	 * contas pelo miolo, que é o que o olho lê como "estão lado a lado".
	 */
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O PLACAR DA PROJEÇÃO — pontos em cima, jogos embaixo.
 *
 * "Aumenta o tamanho dos números à direita em cima… E coloca embaixo o número
 *  de jogos disputados / o número de jogos total."
 *
 * `align-items: flex-end` porque as duas linhas são um bloco alinhado à
 * direita: a de baixo é menor, e encostada à esquerda ela penduraria um degrau
 * no meio do canto direito da tela.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-proj__placar {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4cqh;
}

.et-proj__placar-linha {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

/*
 * A LINHA DOS JOGOS É O DENOMINADOR DE TEMPO.
 *
 * Ela é menor que os pontos de propósito: 12 de 20 é a resposta, e 5 de 15
 * jogos é o que diz se essa resposta está adiantada ou atrasada. Do tamanho da
 * de cima, as duas competiriam e nenhuma seria lida primeiro.
 */
.et-proj__jogos {
	font-size: 2.4cqh;
	font-weight: 600;
	color: var(--et-proj-suave);
	line-height: 1.1;
	white-space: nowrap;
}

/*
 * A POSIÇÃO NA TABELA, à esquerda do placar da projeção e separada dele por
 * uma linha. São duas contas diferentes — o campeonato inteiro e a projeção —
 * e coladas viravam uma fileira de números que ninguém separa no ar.
 */
/*
 * ── A POSIÇÃO NA TABELA, agora na linha de baixo do nome.
 *
 * Ela morava à esquerda do placar da projeção, com um risco entre as duas — e o
 * risco existia porque, lado a lado, elas pareciam a mesma conta. São de coisas
 * diferentes: esta é do CAMPEONATO, aquela é do PLANO. Debaixo do nome da
 * projeção ela não precisa mais do risco para se distinguir: o lugar já
 * distingue.
 */
.et-proj__tabela {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	max-width: 100%;
	white-space: nowrap;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O CANTO DIREITO CRESCEU.
 *
 * "Aumenta o tamanho dos números à direita em cima."
 *
 * Ele lê esta tela no vídeo, e no vídeo o que era 4,4% da altura virava um
 * número menor do que os nomes dos adversários logo abaixo — o placar da
 * projeção, que é o assunto da tela, era o texto mais discreto dela.
 *
 * A posição na tabela cresce JUNTO, na mesma proporção. Aumentar só um lado
 * faria a linha do topo virar um número grande e um pequeno, e o pequeno
 * pareceria um resto — quando na verdade são as duas contas que a tela compara.
 * ───────────────────────────────────────────────────────────────────────────── */
/*
 * ── E ELA ENCOLHEU, porque mudou de vizinho.
 *
 * Os 4,6cqh do número eram do tempo em que ele ficava ao lado do «17 de 20»: ali
 * ele tinha de aguentar a comparação com o número grande da direita. Embaixo do
 * nome da projeção, aquele corpo faria a posição no campeonato gritar mais alto
 * que o nome da tela — e o nome é a manchete.
 */
.et-proj__tabela-pos {
	font-size: 2.9cqh;
	font-weight: 800;
	line-height: 1;
}

.et-proj__tabela-txt {
	font-size: 2.2cqh;
	color: var(--et-proj-suave);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * "DEIXA O XX DE XX VERMELHO E GRANDE."
 *
 * Os DOIS números, e o "de" entre eles. Antes só o primeiro era grande e
 * vermelho — e um 12 sozinho não diz nada: ele só é bom ou ruim contra os 20 da
 * meta. A frase é "12 de 20", e é ela que tem de ser lida de longe.
 *
 * `white-space: nowrap` porque agora são três pedaços numa frase só: sem isso,
 * numa projeção de números de dois dígitos, o "de 20" desceria uma linha e o
 * canto direito da tela viraria uma escada.
 * ───────────────────────────────────────────────────────────────────────────── */
.et-proj__geral-num {
	font-size: 6cqh;
	font-weight: 800;
	line-height: 1;
	color: var(--et-proj-clube);
	white-space: nowrap;
}

/*
 * O "de" é da mesma frase e da mesma cor, com um pouco menos de corpo e de peso.
 *
 * Do tamanho exato dos números ele competiria com eles — o que se lê de longe
 * são os DOIS NÚMEROS, e a palavra no meio é o que os liga. Vermelha e grande
 * como ele pediu, sem disputar a leitura.
 */
.et-proj__geral-sep {
	font-size: 4.2cqh;
	font-weight: 700;
}

.et-proj__geral-de {
	font-size: 2.6cqh;
	color: var(--et-proj-suave);
}

.et-proj__geral-pc {
	padding: 3px 11px;
	border-radius: 999px;
	background: var(--et-proj-papel);
	border: 1px solid var(--et-proj-borda);
	font-size: 2.6cqh;
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   A GRADE

   Duas colunas de largura igual; dentro de cada uma, três células que dividem
   a altura entre si. `minmax(0, 1fr)` nas duas direções é o que impede uma
   célula com muitos jogos de empurrar as outras para fora da tela.
   ----------------------------------------------------------------------------- */

.et-proj__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 14px;
	flex: 1 1 auto;
	min-height: 0;
}

/*
 * `min-width: 0` NA COLUNA, e não só nas faixas da grade.
 *
 * A grade já pedia `minmax(0, 1fr)`, o que deixa a FAIXA encolher — mas o item
 * dentro dela continua com `min-width: auto` e não encolhe junto: ele
 * transborda a faixa e vai para a direita, onde mora a faixa de 27% da câmera.
 * Foi o que aconteceu quando o aviso de meta impossível entrou na linha da
 * manchete e trouxe uma frase sem quebra: a coluna inteira engordou trinta
 * pixels e o título "FORA DE CASA" invadiu a área do rosto.
 */
.et-proj__coluna {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	min-height: 0;
	min-width: 0;
}

.et-proj__coluna-titulo {
	margin: 0;
	font-size: 2cqh;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--et-proj-suave);
}

/* -----------------------------------------------------------------------------
   A CÉLULA

   Cartão branco com borda fina e canto arredondado: o mesmo cartão das listas
   do acervo, só que maior.
   ----------------------------------------------------------------------------- */

.et-proj-celula {
	display: flex;
	flex-direction: column;
	/*
	 * O VÃO E A MARGEM DE CIMA SÃO CURTOS DE PROPÓSITO.
	 *
	 * Cada pixel gasto entre o topo e a lista é pixel que falta para um jogo.
	 * A janela tem uma manchete, uma régua e uma lista — três coisas que se
	 * leem em sequência, e sequência não precisa de respiro grande.
	 */
	gap: 5px;
	min-height: 0;
	min-width: 0;
	padding: 10px 14px 12px;
	border: 1px solid var(--et-proj-borda);
	border-radius: var(--et-proj-raio);
	background: var(--et-proj-fundo);
}

/*
 * A célula resolvida muda de cor, e não só de número. Numa grade de seis, o
 * que se procura de relance é onde ainda falta — e a cor responde antes da
 * leitura. O verde é o mesmo das vitórias no retrospecto do site.
 */
.et-proj-celula--feita {
	border-color: rgba(18, 120, 62, 0.35);
	background: rgba(18, 120, 62, 0.06);
}

/*
 * A JANELA SEM META FICA APAGADA — nem verde, nem em alarme.
 *
 * Ela não é uma conquista nem um problema: é um plano que ainda não foi
 * escrito. Papel de fundo e texto mais fraco dizem isso sem precisar de aviso.
 */
.et-proj-celula--sem-meta {
	background: var(--et-proj-papel);
}

.et-proj-celula--sem-meta .et-proj-celula__falta strong {
	color: var(--et-proj-suave);
	font-size: 2.6cqh;
}

/*
 * ALINHADOS PELO TOPO, E NÃO PELA LINHA DE BASE.
 *
 * Com `baseline`, a primeira linha do canto casava a base dela com a base do
 * "2 a fazer" — que é o dobro do corpo — e as duas contas desciam quase meia
 * linha, empurrando a barra e a lista inteira para baixo. Alinhadas pelo topo,
 * elas sobem, e a janela toda sobe com elas.
 */
.et-proj-celula__topo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

/* A manchete sem folga de linha: ela é uma linha só, e alta. */
.et-proj-celula__falta {
	line-height: 1.05;
}

/*
 * O CANTO DIREITO DO TOPO: a conta e a fração de jogos, uma sobre a outra.
 *
 * A conta ocupava uma linha inteira acima da lista — e uma linha inteira é o
 * espaço de um jogo. Aqui ela fica no lugar onde o olho já procura número, e a
 * lista recupera a linha.
 */
.et-proj-celula__canto {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* Duas linhas curtas e coladas: juntas não passam da altura da manchete. */
	gap: 0;
	line-height: 1.1;
	text-align: right;
	white-space: nowrap;
}

.et-proj-celula__jogos {
	font-size: 1.9cqh;
	color: var(--et-proj-suave);
	white-space: nowrap;
}

/*
 * O ESTADO DA JANELA VIROU A MANCHETE DELA.
 *
 * Ele morava na segunda linha, menor que o nome do nível — que é sempre o
 * mesmo e nunca foi notícia. Agora ocupa a primeira linha, com o disco do
 * nível à esquerda no lugar em que o ícone já estava.
 */
.et-proj-celula__falta {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	/* `flex: 0 1 auto` para a manchete ceder largura antes de empurrar a célula. */
	flex: 0 1 auto;
	min-width: 0;
	/* E ela não quebra em duas linhas: quem cede é o aviso, com reticências. */
	white-space: nowrap;
	font-size: 2.2cqh;
	color: var(--et-proj-suave);
}

.et-proj-celula__marca {
	display: inline-flex;
	flex: 0 0 auto;
}

/* Só para leitor de tela: o nome do nível continua sendo dito. */
.et-proj__so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.et-proj-celula__falta strong {
	font-size: 3.6cqh;
	font-weight: 800;
	line-height: 1;
	color: var(--et-proj-tinta);
}

/*
 * A MANCHETE QUE É FRASE, E NÃO NÚMERO.
 *
 * "Diminui um pouco a fonte do «meta batida / meta não batida» pra a gente
 *  poder organizar melhor isso aí, tá muito bagunçado."
 *
 * «3 a fazer» é um número: cabe em 3,6cqh e é o que se lê de três metros. «Meta
 * não batida» são catorze letras no mesmo corpo — ocupava a linha toda e
 * empurrava o aviso do lado («· no máximo 2») para as reticências. Era o
 * bagunçado que ele viu: não a fonte grande, mas a fonte grande numa frase.
 *
 * Corpo menor só para as manchetes que são frase. O número continua intacto —
 * diminuir os dois para caber um só seria pagar a conta na conta errada.
 */
.et-proj-celula__falta strong.et-proj-celula__frase {
	font-size: 2.5cqh;
	letter-spacing: -0.01em;
}

.et-proj-celula--feita .et-proj-celula__falta strong {
	color: var(--et-proj-vitoria);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * A JANELA QUE ACABOU SEM BATER A META.
 *
 * "No quadrante que tem Cuiabá e São Bernardo já acabou, o Náutico não atingiu a
 *  meta, era ele estar vermelho com «meta não batida»."
 *
 * Ela era verde-clara como as outras que ainda devem — e «1 a fazer» parecia
 * pendência num quadrante onde não há mais jogo onde fazer esse 1. Em vermelho
 * ela deixa de ser tarefa e passa a ser resultado, que é o que ela é.
 *
 * O desenho é o espelho exato do «feita»: a mesma transparência, a mesma força
 * de borda, a cor trocada. Duas notícias opostas com o mesmo peso visual.
 */
.et-proj-celula--perdida {
	border-color: rgba(193, 18, 31, 0.35);
	background: rgba(193, 18, 31, 0.06);
}

.et-proj-celula--perdida .et-proj-celula__falta strong,
.et-proj-celula--perdida .et-proj-celula__meta {
	color: var(--et-proj-derrota);
}

/*
 * A CONTA — a linha forte do canto: é ela que diz onde a janela está.
 * Legenda de tela grande: abaixo de 14px não se lê a três metros.
 */
.et-proj-celula__meta {
	margin: 0;
	font-size: 2.1cqh;
	font-weight: 700;
	color: var(--et-proj-tinta);
	white-space: nowrap;
}

.et-proj-celula--feita .et-proj-celula__meta {
	color: var(--et-proj-vitoria);
}

/* A barra: fina, porque o número já está escrito acima dela. */
.et-proj-celula__barra {
	height: 6px;
	border-radius: 999px;
	background: var(--et-proj-papel);
	border: 1px solid var(--et-proj-borda);
	box-sizing: border-box;
	overflow: hidden;
}

.et-proj-celula__barra span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--et-proj-clube);
}

.et-proj-celula--feita .et-proj-celula__barra span {
	background: var(--et-proj-vitoria);
}

/*
 * O AVISO MORA NA LINHA DA MANCHETE, e por isso é `em` e não `p`: parágrafo
 * abre linha, e a linha que ele abria saía do espaço dos jogos. Sem itálico —
 * a cor já o separa, e itálico em corpo pequeno é o que menos se lê de longe.
 */
/*
 * ─────────────────────────────────────────────────────────────────────────────
 * O AVISO ENCOLHE, E NUNCA EMPURRA.
 *
 * Ele mora na linha da manchete, e uma frase em `nowrap` dentro de um flex é uma
 * largura mínima: a célula inteira passou a pedir o tamanho da frase, a coluna
 * da direita engordou e encostou na faixa de 27% reservada para a câmera. Numa
 * tela de transmissão isso não é um detalhe de layout — é o rosto de alguém em
 * cima de um número.
 *
 * Com `min-width: 0` e reticências, ele cede primeiro: aparece inteiro quando
 * cabe, corta quando não cabe, e em nenhum dos dois casos manda na largura.
 */
.et-proj-celula__aviso {
	margin: 0;
	min-width: 0;
	flex: 0 1 auto;
	font-size: 1.8cqh;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--et-proj-derrota);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * E O «PODE SOBRAR +N», que é o aviso bom.
 *
 * "Coloca nos que a meta foi batida o quanto o Náutico tem de sobra pra fazer."
 *
 * Mesmo tamanho e mesmo lugar do «no máximo N» — os dois corrigem a manchete
 * pelo lado de fora. A cor é o que os separa: um diz que a janela não chega, o
 * outro diz que ela pode passar. Na mesma cor, um olhar de relance no ar leria
 * «+3» como alarme.
 */
.et-proj-celula__folga {
	margin: 0;
	min-width: 0;
	flex: 0 1 auto;
	font-size: 1.8cqh;
	font-style: normal;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--et-proj-vitoria);
}

/* -----------------------------------------------------------------------------
   OS JOGOS DA CÉLULA

   Escudo, nome, placar (ou data) e os pontos. Quatro linhas no máximo, e o
   resto vira "e mais 5": uma lista de dez jogos dentro de uma janela de 200px
   não é lida por ninguém — e empurraria as outras cinco células.
   ----------------------------------------------------------------------------- */

.et-proj-celula__lista {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 0;
	overflow: hidden;
}

/*
 * QUATRO JOGOS EM DUAS COLUNAS.
 *
 * Numa rodada de quatro, esconder o quarto atrás de um "e mais 1" é esconder
 * justamente o que se quer ver. Em duas colunas os quatro cabem nas mesmas
 * duas linhas. A coluna do meio ganha um respiro maior que o vão entre linhas,
 * senão dois jogos vizinhos se leem como um só.
 */
.et-proj-celula__lista--duas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px 3.2cqh;
	align-content: start;
}

/*
 * O `min-width: 0` É O QUE MANTÉM AS DUAS COLUNAS IGUAIS.
 *
 * Sem ele o item da grade não encolhe abaixo do seu conteúdo, e o nome mais
 * longo dita a largura da coluna dele: as duas saem desiguais e o placar de
 * uma deixa de ficar debaixo do placar da outra. Com ele, o nome comprido
 * corta em reticências, que é o que já acontece na coluna única.
 */
.et-proj-celula__lista--duas .et-proj-jogo {
	min-width: 0;
}

/*
 * Em duas colunas cada jogo tem metade da largura, e o nome do adversário é o
 * primeiro a sofrer: o corpo cede um pouco, e o escudo com ele.
 */
.et-proj-celula__lista--duas .et-proj-jogo {
	font-size: 2.5cqh;
	gap: 5px;
}

.et-proj-celula__lista--duas .et-proj-escudo {
	width: 3.6cqh;
	height: 3.6cqh;
}

/* Em coluna estreita o distintivo de pontos aperta o cinto. */
.et-proj-celula__lista--duas .et-proj-jogo__pts {
	min-width: 1.5em;
	padding: 0 4px;
}

/* O aviso ocupa a última casa da grade, e não uma linha inteira. */
.et-proj-celula__lista--duas .et-proj-jogo--mais {
	justify-content: flex-start;
}

/*
 * A LINHA DO JOGO CRESCEU.
 *
 * Ela nasceu com o tamanho de uma legenda porque a célula precisava caber
 * quatro delas. Só que quem assiste está a três metros de uma tela de 40
 * polegadas, e o nome do adversário é a informação mais consultada da tela —
 * mais do que o percentual. Subiu de 14px para 18px no teto, e o escudo
 * acompanhou; o que perdeu foi uma linha por janela, que passou de quatro para
 * três.
 */
.et-proj-jogo {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 3cqh;
	font-weight: 600;
	line-height: 1.25;
}

/* -----------------------------------------------------------------------------
   O ESCUDO

   Tamanho fixo em relação à altura da tela, e `object-fit: contain` — escudo é
   desenho, e cortar um escudo para preencher um quadrado é desfigurar o clube.

   Sem escudo cadastrado, as iniciais no mesmo círculo: a coluna de nomes
   continua começando no mesmo x, que é o que faz a lista parecer uma lista.
   ----------------------------------------------------------------------------- */

.et-proj-escudo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.2cqh;
	height: 4.2cqh;
}

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

.et-proj-escudo--vazio {
	border-radius: 50%;
	background: var(--et-proj-papel);
	border: 1px solid var(--et-proj-borda-forte);
	color: var(--et-proj-suave);
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.et-proj-jogo__quem {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * ═════════════════════════════════════════════════════════════════════════════
 * O QUE AINDA NÃO ACONTECEU É QUE É A NOTÍCIA.
 *
 * "O jogo que já aconteceu deixa ele mais clarinho, mais opaco, pra ficar claro
 *  que já aconteceu e dar mais destaque ao que não aconteceu ainda."
 *
 * Estava ao contrário, e eu tinha escrito a razão ao lado: «o jogo que já
 * aconteceu tem o placar em tinta cheia — ele é fato, não agenda». O argumento
 * se defende e serve a outra tela: num resumo de temporada, o que aconteceu é
 * o assunto.
 *
 * Esta é a tela da PROJEÇÃO, e projeção é sobre o que falta. O 1×0 do Botafogo
 * já virou os três pontos que estão somados no «17 de 20» do topo; ele está na
 * lista para dar contexto, não para ser lido. Quem transmite está perguntando
 * contra quem é o próximo e quando — e era justamente essa linha que estava
 * cinza-clara.
 *
 * ── E A VIRADA É DE OPACIDADE NA LINHA INTEIRA, não de cor no texto.
 *
 * Clareando só a letra, o escudo e a pastilha de pontos continuariam em tinta
 * cheia — e a pastilha é a coisa mais saturada da janela: três jogos passados
 * com bolinha verde chamariam mais atenção do que o jogo que vem, por mais
 * apagado que estivesse o nome. `opacity` apaga a linha como um todo, que é o
 * que «mais clarinho» quer dizer quando se olha a tela.
 * ═════════════════════════════════════════════════════════════════════════════
 */
.et-proj-jogo__quando {
	flex: 0 0 auto;
	color: var(--et-proj-tinta);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.et-proj-jogo--fim {
	/*
	 * Meio tom. Abaixo disto o placar deixa de ser legível na compressão do
	 * YouTube, e ele ainda precisa ser lido por quem procura — só não antes do
	 * que vem.
	 */
	opacity: 0.5;
}

/*
 * OS PONTOS, NA COR DO RESULTADO — as mesmas três do retrospecto do site.
 *
 * O empate é a exceção que se explica: nenhum amarelo que ainda pareça amarelo
 * aguenta texto branco em cima. Então ele é o único preenchido com o âmbar
 * vivo e escrito em tinta escura.
 */
.et-proj-jogo__pts {
	flex: 0 0 auto;
	min-width: 1.5em;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 0.85em;
	font-weight: 700;
	text-align: center;
	color: #fff;
}

.et-proj-jogo__pts--v {
	background: var(--et-proj-vitoria);
}

.et-proj-jogo__pts--e {
	background: var(--arqc-empate-fundo, #e0a800);
	color: var(--arqc-empate-tinta, #3d2f00);
}

.et-proj-jogo__pts--d {
	background: var(--et-proj-derrota);
}

.et-proj-jogo--mais {
	color: var(--et-proj-suave);
	font-style: italic;
	font-weight: 400;
	font-size: 0.85em;
	padding-left: calc(4.2cqh + 1.2cqh);
}

.et-proj--vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 240px;
	background: var(--arqc-fundo, #ffffff);
	color: var(--arqc-tinta, #16181d);
	font-family: var(--arqc-fonte, system-ui, sans-serif);
	font-size: 18px;
}

/* -----------------------------------------------------------------------------
   O BLOCO DE TELA BAIXA FOI EMBORA — e é bom que tenha ido.

   Ele apertava as folgas quando a JANELA tinha menos de 680px de altura. Com o
   palco, a janela não decide mais nada: a área é sempre 1280×720 e é ela que
   encolhe inteira, texto e respiro na mesma proporção. Uma regra que reage ao
   tamanho da janela, aqui dentro, faria a tela mudar de desenho ao entrar em
   tela cheia — que é exatamente o que a medida em `cqh` existe para impedir.
   ----------------------------------------------------------------------------- */


/* =============================================================================
   OS ÍCONES

   Do tamanho da letra ao lado (`1em`) e na cor de quem os contém: assim o mesmo
   desenho serve à linha de 2.5cqh dos jogos e ao título de 2.9cqh, sem uma
   regra para cada lugar.

   `pointer-events: none` porque vários deles moram dentro de botões e links —
   e o clique é do botão, não do desenho. Sem isso, o alvo do clique passa a ser
   o `<svg>`, e todo `closest()` de JavaScript tem de saber disso.
   ============================================================================= */

.et-proj .et-ic {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: -0.12em;
	pointer-events: none;
}

/* Onde o ícone acompanha um texto, os dois viram uma linha só. */
.et-proj__coluna-titulo,
.et-proj__tabela,
.et-menu__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.et-proj__coluna-titulo {
	display: flex;
}

/*
 * O ALVO DA META fica do tamanho do número grande, e não da palavra: ele abre
 * o placar da projeção, e um alvo de 12px ao lado de um 15 de 27px seria um
 * ponto sujo na tela.
 */
.et-proj .et-ic--meta {
	width: 2.6cqh;
	height: 2.6cqh;
	margin-right: 0.4cqh;
	color: var(--et-proj-clube);
}

/* No menu, o ícone é o que alinha os itens: todos começam no mesmo x. */
.et-menu__item {
	display: flex;
}

.et-menu__item .et-ic {
	opacity: 0.75;
}

/* =============================================================================
   OS ÍCONES DO AR — maiores, e com peso de traço para três metros

   No painel eles convivem com texto de 13px e um traço fino basta. Aqui a tela
   é vista de longe: um traço de 2 em um desenho de 20px vira um risco cinza que
   ninguém identifica. O peso sobe, e o ícone do nível ganha um disco atrás —
   é ele que diz, num relance, se aquela janela é a dos fáceis ou a dos difíceis,
   e cor faz isso mais rápido do que forma.
   ============================================================================= */

.et-proj .et-ic {
	stroke-width: 2.4;
}

/* O nível: disco de cor, com o desenho por cima. */
.et-proj-celula__falta .et-ic {
	width: 3.8cqh;
	height: 3.8cqh;
	padding: 0.6cqh;
	stroke-width: 2.8;
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--et-proj-papel);
	color: var(--et-proj-tinta);
}

.et-proj-celula--facil .et-proj-celula__falta .et-ic {
	background: color-mix(in srgb, var(--et-proj-vitoria) 16%, #fff);
	color: var(--et-proj-vitoria);
}

.et-proj-celula--dificil .et-proj-celula__falta .et-ic {
	background: color-mix(in srgb, var(--et-proj-derrota) 14%, #fff);
	color: var(--et-proj-derrota);
}

/*
 * Nas janelas resolvidas o disco não muda de cor: quem diz "batida" é o número
 * em verde e o fundo da célula. Dois verdes diferentes lado a lado só fazem
 * perguntar qual é qual.
 */

/* O mando, no título da coluna: do tamanho da palavra e não menor que ela. */
.et-proj__coluna-titulo .et-ic {
	width: 2.4cqh;
	height: 2.4cqh;
}

/* A escada da tabela acompanha o número da posição. */
.et-proj__tabela .et-ic {
	width: 2.8cqh;
	height: 2.8cqh;
}

/* =============================================================================
   OS AJUSTES DE PONTOS NA TELA DO AR

   "Isso tem que ser editável no front end."

   Tudo aqui só existe para quem pode editar a projeção, e só aparece quando o
   interruptor está ligado. O padrão é a tela limpa: é ela que vai ao ar.
   ============================================================================= */

.et-proj__chave {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/*
 * O INTERRUPTOR FICA À ESQUERDA, ao lado do menu — e não no canto direito.
 *
 * Os 27% da direita são a faixa da câmera: nada escrito entra ali. O
 * interruptor tinha ido para lá porque é onde sobra espaço na tela, e é
 * justamente o espaço que não é nosso. O teste da faixa pegou.
 */
.et-proj__ajustar-liga {
	position: absolute;
	/*
	 * ── ELE DESCEU — "abaixa o botão ajustar".
	 *
	 * Em 8,6cqh ele encostava na segunda linha do canto (a posição na tabela e
	 * os pontos), e os dois liam como uma coisa só. Agora ele fica abaixo do
	 * bloco do título inteiro, na faixa vazia que sobra antes de «EM CASA» —
	 * e é a única coisa escrita naquela altura, à esquerda.
	 */
	/*
	 * ── E SUBIU — ele desenhou o retângulo ali.
	 *
	 * Em 12,4 o botão nascia colado em «EM CASA», que começa logo abaixo. A
	 * faixa vazia dele não é entre o TÍTULO e as colunas: é entre o CANTO DOS
	 * BOTÕES — que é quem está acima dele, na mesma coluna da tela — e o
	 * título da primeira coluna. Medida na bancada, ela tem 28px e o botão
	 * tem 19; 9,4cqh o põe no meio, com quatro pixels de cada lado.
	 *
	 * Os quatro pixels não são folga de sobra: a altura do canto e a do bloco
	 * do título mudam alguns pixels com a fonte do sistema de quem assiste, e
	 * um botão centrado com dois pixels de cada lado encostaria num deles na
	 * primeira máquina diferente.
	 */
	top: 9.4cqh;
	left: 1.6cqh;
	z-index: 20;
	display: flex;
	align-items: center;
	/*
	 * ── ELE ENCOLHEU — "diminui o tamanho desse botão".
	 *
	 * Ele é um controle de QUEM OPERA, e divide o canto de cima com o nome da
	 * projeção e a posição na tabela, que são o que vai ao ar. Do tamanho de
	 * antes — 87×29 na área de 1280×720 — ele competia com o título ao lado em
	 * vez de ficar à disposição.
	 *
	 * As quatro medidas descem juntas, na mesma proporção: mexer só na fonte
	 * deixaria uma pílula larga com letra miúda dentro, que é um botão
	 * encolhido pela metade errada.
	 */
	gap: 0.5cqh;
	padding: 0.6cqh 1.1cqh;
	border-radius: 999px;
	background: rgba(12, 16, 24, 0.35);
	color: #fff;
	font-size: 1.45cqh;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	opacity: 0.45;
	transition: opacity 0.15s;
}

.et-proj__ajustar-liga:hover,
.et-proj__chave:checked ~ .et-proj__ajustar-liga {
	opacity: 1;
}

.et-proj__chave:checked ~ .et-proj__ajustar-liga {
	background: var(--et-ui-marca, #b3122a);
}

.et-proj__ajustar-liga .et-ic {
	width: 1.7cqh;
	height: 1.7cqh;
}

/* ─────────────────────────────────────────────────────────────────────────────
   OS BOTÕES DE CADA JANELA — sobrepostos, e não no fluxo.

   A área do palco tem 1280×720 exatos. Um botão que ocupa altura empurra a
   lista de jogos para fora dela, e o enquadramento é o produto aqui.
   ───────────────────────────────────────────────────────────────────────────── */

.et-proj-celula {
	position: relative;
}

.et-proj-celula__ajustes {
	position: absolute;
	right: 0.8cqh;
	bottom: 0.8cqh;
	z-index: 5;
	display: none;
	align-items: center;
	gap: 0.6cqh;
}

.et-proj__chave:checked ~ .et-proj__area .et-proj-celula__ajustes {
	display: flex;
}

.et-proj-celula__bt {
	min-width: 4.4cqh;
	padding: 0.7cqh 1.1cqh;
	border: 0;
	border-radius: 0.9cqh;
	background: var(--et-ui-marca, #b3122a);
	color: #fff;
	font: inherit;
	font-size: 2cqh;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.et-proj-celula__bt:hover {
	filter: brightness(1.12);
}

.et-proj-celula__bt--volta {
	background: rgba(12, 16, 24, 0.45);
}

.et-proj-celula__sobrando {
	padding: 0.6cqh 1cqh;
	border-radius: 0.9cqh;
	background: rgba(224, 168, 0, 0.9);
	color: #2b2000;
	font-size: 1.7cqh;
	font-weight: 800;
	line-height: 1;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * OS PONTOS PERDIDOS — e por que não são amarelos como os que sobram.
 *
 * "Coloca pra nos quadrantes que n atingimos os pontos, eles poderem ser
 *  redistribuídos em outros quadrantes."
 *
 * O selo amarelo diz "esta janela tem crédito"; este diz "esta janela não
 * alcança mais". São notícias opostas e precisam de cores opostas — na mesma
 * cor, quem olha a tela de relance leria sete pontos perdidos como sete pontos
 * disponíveis, que é o contrário do que aconteceu no campeonato.
 *
 * O vermelho é o da derrota que a tela já usa no "no máximo K", para a mesma
 * ideia não ter duas cores.
 */
.et-proj-celula__perdido {
	padding: 0.6cqh 1cqh;
	border-radius: 0.9cqh;
	background: var(--et-proj-derrota, #c1121f);
	color: #fff;
	font-size: 1.7cqh;
	font-weight: 800;
	line-height: 1;
}

/*
 * E O BOTÃO QUE PUXA UM PERDIDO É VERDE, porque o que ele faz é o contrário do
 * "−1": aqui a janela passa a PEDIR mais, assumindo o que a outra não vai fazer.
 * Dois botões com o mesmo desenho e efeitos opostos na mesma linha seria a
 * receita para o clique errado no meio da transmissão.
 */
.et-proj-celula__bt--pega {
	background: var(--et-proj-vitoria, #12783e);
}
/* -----------------------------------------------------------------------------
   O REPOSITÓRIO DE PONTOS

   "Em cima a gente tem que ter um repositório de pontos… se um quadrante sobrou,
    a gente pode jogar os pontos dele pro repositório e depois distribuir eles pra
    outros que ficaram negativos."

   Duas peças: o selo do saldo, no alto, e três botões nas janelas.
   ----------------------------------------------------------------------------- */

/*
 * O SELO DO SALDO, NA LINHA DO TÍTULO.
 *
 * Ele entra entre o nome da projeção e o placar geral — e é o único elemento
 * daquela linha que aparece e desaparece. Por isso `flex: 0 0 auto`: crescendo,
 * ele empurraria o "17 de 20" para fora da faixa de câmera no dia em que
 * houvesse saldo, e o enquadramento mudaria sozinho no meio da transmissão.
 *
 * O amarelo é o mesmo do selo "+N livres" das janelas: é o mesmo assunto —
 * ponto de sobra disponível —, agora somado num lugar só.
 */
.et-proj__banco {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 0.8cqh;
	padding: 0.7cqh 1.4cqh;
	border-radius: 999px;
	border: 1px solid rgba(224, 168, 0, 0.55);
	background: rgba(224, 168, 0, 0.14);
	color: var(--et-proj-tinta, #10141c);

	/*
	 * Redundante com o `flex: 0 0 auto` acima — um item que não encolhe não
	 * quebra — e de pé de propósito: no dia em que alguém der encolhimento ao
	 * selo, é esta linha que o faz perder largura em vez de ganhar altura.
	 */
	white-space: nowrap;
}

.et-proj__banco .et-ic--banco {
	width: 2.8cqh;
	height: 2.8cqh;
	flex: 0 0 auto;
	color: #a37400;
}

.et-proj__banco-num {
	font-size: 2.8cqh;
	font-weight: 800;
	line-height: 1;
}

.et-proj__banco-txt {
	font-size: 1.9cqh;
	font-weight: 700;
	color: var(--et-proj-suave, #5b6472);
}

/*
 * OS TRÊS BOTÕES, E TRÊS DESENHOS DIFERENTES.
 *
 * Eles dividem a fileira com o "−1" do bolo e o "+1" dos perdidos, e um clique
 * errado ali muda o plano da temporada. Então cada um tem cor própria e seta
 * própria, e a seta diz para onde o ponto vai:
 *
 *   ↑1  guarda   — o ponto SOBE para o repositório (amarelo: é sobra)
 *   ↓1  tira     — ele DESCE de volta para a janela (apagado: desfaz)
 *   ←1  saca     — ele VEM para esta janela (verde: alivia quem recebe)
 *
 * O verde do saque é o mesmo do "+1" dos perdidos porque o efeito na janela que
 * clica é o mesmo: ela fica mais perto de bater a meta.
 */
.et-proj-celula__bt--guarda {
	background: rgba(224, 168, 0, 0.92);
	color: #2b2000;
}

.et-proj-celula__bt--tira {
	background: rgba(12, 16, 24, 0.45);
}

.et-proj-celula__bt--saca {
	background: var(--et-proj-vitoria, #12783e);
}

/*
 * E O SELO DO QUE ESTA JANELA TEM GUARDADO.
 *
 * Contornado, e não cheio como o "+N livres" ao lado: são dois estados do mesmo
 * ponto — livre é o que qualquer alívio pega sozinho, guardado é o que já tem
 * dono e só sai pela porta do saque. Cheios os dois, a fileira teria duas
 * pastilhas amarelas idênticas dizendo coisas diferentes.
 */
.et-proj-celula__guardado {
	padding: 0.5cqh 1cqh;
	border-radius: 0.9cqh;
	border: 1px solid rgba(224, 168, 0, 0.9);
	background: rgba(224, 168, 0, 0.16);
	color: #7a5800;
	font-size: 1.7cqh;
	font-weight: 800;
	line-height: 1;
}