/* O telão (arquitetura, seção 5; D-016).
 *
 * Tamanhos pensados para o fundo da sala: corpo nunca abaixo de 28 px, títulos
 * em torno de 4,5vw e o placar em torno de 8vw. Tudo cabe numa tela, sem
 * rolagem, em 1024×768 (projetor 4:3 antigo) e em 1920×1080: o e2e confere as
 * duas coisas.
 *
 * Cada tamanho também tem um teto em vh: numa tela 16:9, 2,5vw dá 48 px em
 * 1920×1080, e a mesma tela que cabe em 4:3 passa da altura (seis equipes com
 * carta e decisão não cabem em 22 linhas). Com o teto, 16:9 fica na proporção
 * do 4:3 (39 px em 1080 de altura), e o 4:3 continua exatamente em 2,5vw.
 */

:root {
  --corpo: clamp(28px, min(2.5vw, 3.65vh), 64px);
  --titulo: clamp(40px, min(4.5vw, 6vh), 110px);
  --afirmacao: clamp(34px, min(3.4vw, 4.5vh), 84px);
  --placar: clamp(56px, min(8vw, 12vh), 180px);
  --espaco: clamp(10px, 1.8vh, 32px);
  --lateral: 3.5vw;
}

html, body { height: 100%; }

body.telao {
  display: flex; flex-direction: column;
  min-height: 100vh;
  font-size: var(--corpo);
}

#palco {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: calc(var(--espaco) * 1.3) var(--lateral) var(--espaco);
}

.tela { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--espaco); min-height: 0; }

.tela-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; }
.cabecalho-textos { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.cabecalho-lado { flex: none; text-align: right; }

.kicker {
  color: var(--texto-2);
  font-weight: 600;
  letter-spacing: .02em;
}

h1 {
  font-size: var(--titulo);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1.afirmacao { font-size: var(--afirmacao); font-weight: 650; line-height: 1.15; }
h1.titulo-bloco { font-size: calc(var(--titulo) * 1.05); }

.cronometro {
  font-size: calc(var(--corpo) * 1.5);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}
/* Tempo esgotado não pisca nem fica vermelho: é informação para o apresentador,
   que decide quando fechar (D-010). */
.cronometro[data-esgotado="true"] { color: var(--texto-2); }

.texto-grande { font-size: calc(var(--corpo) * 1.2); line-height: 1.3; max-width: 40em; }
.texto-secundario { color: var(--texto-2); }
.lista-simples { display: flex; flex-direction: column; gap: .4em; }
.lista-simples li::before { content: "— "; color: var(--texto-2); }

.numero-destaque { font-size: var(--placar); line-height: 1; font-weight: 750; }
.numero-grande { font-size: calc(var(--corpo) * 2); line-height: 1; font-weight: 750; }


.rodape-enquete {
  margin-top: auto;
  color: var(--texto-2);
  border-top: 1px solid var(--linha);
  padding-top: calc(var(--espaco) * .6);
}

.legenda { color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: .2em .5em; }

/* A equipe pelo personagem, "◯ 1 Jonas, motoboy" (telao.js, rotuloEquipe;
   teste do Kleber de 05/10). O nome e o ofício são pedaços inteiros: numa
   coluna estreita (a célula da decisão, a coluna da equipe no resultado), o
   rótulo quebra entre os dois, nunca no meio de uma palavra, e a forma e o
   número ficam na frente. */
.equipe-nome { white-space: normal; }
.equipe-quem, .equipe-oficio { white-space: nowrap; }
/* Formato simples: a cor inteira ("Verde-azulado"), sem quebrar no hífen.
   inline-block: a caixa fica do tamanho da entrelinha; inline, com a
   entrelinha 1 do aperto do resultado, ela passava da faixa da equipe. */
.equipe-cor { display: inline-block; white-space: nowrap; }

/* ---------- Gráficos medidos ---------- */

.grafico { position: relative; flex: 1 1 auto; min-height: 90px; min-width: 0; }
.grafico > svg { position: absolute; inset: 0; }
.grafico-vazio { min-height: 0; }

.segmento-simples { fill: var(--neutro); }
.referencia { stroke: var(--texto); stroke-width: 3; stroke-dasharray: 10 8; }
.parte-concorda { fill: var(--depois); }
.parte-neutro { fill: var(--piloto); }
.parte-discorda { stroke: var(--antes); stroke-width: 2; }
.barra.parte-neutro, .barra.parte-concorda { stroke: none; }

/* A cor de .fatia-par e .fatia-impar sai do graficos.js (COR_FATIA): é de lá que
   o rótulo dentro da fatia escolhe texto claro ou escuro (D-040). */
.fatia-grave { stroke: var(--antes); stroke-width: 2; }
.fatia-sorteada { stroke: var(--texto); stroke-width: 3; }
/* Com animação, o contorno da sorteada só aparece quando os ponteiros param
   (2,6 s, o mesmo atraso do .revelar-apos): antes, ele entregava a resposta
   (revisão da F2, achado 8). */
.fatias-animadas .fatia-sorteada { stroke: transparent; animation: contornar .01s linear 2.6s forwards; }
@keyframes contornar { to { stroke: var(--texto); } }
.ponteiro-seta { fill: var(--texto); }
.ponteiro-linha { stroke: var(--texto); stroke-width: 5; }

/* Os ponteiros de todas as equipes usam a mesma animação, com a mesma duração:
   param juntos (arquitetura, seção 5). */
@keyframes ponteiro {
  0% { transform: translateX(0); }
  55% { transform: translateX(var(--fim)); }
  100% { transform: translateX(var(--alvo)); }
}
.ponteiro-animado { animation: ponteiro 2.6s cubic-bezier(.25, .7, .25, 1) both; }

@keyframes aparecer { to { opacity: 1; } }
.revelar-apos { opacity: 0; animation: aparecer .35s ease 2.6s forwards; }

.escala-legenda {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0 .6em;
  color: var(--texto-2);
  text-align: center;
  line-height: 1.15;
}
.escala-legenda li { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.escala-legenda b { color: var(--texto); }
.escala-em-linha { color: var(--texto-2); }
.escala-em-linha b { color: var(--texto); }

/* ---------- Abertura ---------- */

/* D-082 (pedido do Kleber de 13/10 à noite): sem o painel do config, o que
   sobra fica no meio da tela, na vertical e na horizontal. Os blocos ("Com
   celulares" e "Sem celulares") lado a lado, cada um com até 28em; o aviso do
   config (só quando falta ou tem problema), o "Retomar" e o roteiro (só com
   mais de um) ocupam a largura inteira. Por file://, um bloco só, no meio. */
.tela-abertura { font-size: clamp(18px, 1.55vw, 30px); gap: 1.2em; justify-content: safe center; align-items: center; }
.tela-abertura .tela-cabecalho { justify-content: center; text-align: center; }
.tela-abertura .cabecalho-textos { align-items: center; }
.tela-abertura h1 { font-size: 2.2em; }
.tela-abertura h2 { font-size: 1.1em; margin-bottom: .5em; }
.abertura-grade {
  width: min(100%, 57.6em);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 1.2em 1.6em;
}
.abertura-grade > * { flex: 1 1 24em; max-width: 28em; }
.abertura-grade > :is(.abertura-alerta, .abertura-retomar, .abertura-roteiro) { flex-basis: 100%; max-width: none; }
.abertura-alerta { border-color: var(--foco); }
.abertura-roteiro .opcoes-roteiro { flex-direction: row; flex-wrap: wrap; gap: .3em 2em; }
.abertura-bloco {
  display: flex; flex-direction: column; gap: .6em;
  padding: 1em 1.2em;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--superficie);
}
.abertura-retomar { border-color: var(--texto-2); }
.abertura-pergunta { font-size: 1.2em; font-weight: 700; }
.abertura-status { color: var(--texto-2); }
.abertura-ok { color: var(--texto); }
.marca-ok { font-weight: 800; }
.abertura-erro { color: var(--texto); font-weight: 700; }
.lista-erros {
  list-style: decimal; padding-left: 1.6em;
  max-height: 40vh; overflow: auto;
  display: flex; flex-direction: column; gap: .3em;
}
.lista-erros code, .lista-avisos code { color: var(--texto-2); }
.lista-avisos summary { cursor: pointer; color: var(--texto-2); }
.lista-avisos ul { padding-left: 1em; margin-top: .4em; display: flex; flex-direction: column; gap: .3em; max-height: 25vh; overflow: auto; }
.zona-arquivo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em;
  padding: .8em; border: 2px dashed var(--linha-forte); border-radius: var(--raio);
}
body.arrastando .zona-arquivo { border-color: var(--foco); }
.zona-dica { color: var(--texto-2); }

/* A reserva do config (D-082), no pé da tela, no tamanho da barra do
 * apresentador. Escondida, só a faixa de cima dela (10 px, o BORDA_BARRA_PX do
 * telao.js) fica dentro da tela, invisível; com o mouse PARADO nela por 0,4 s
 * (o PARAR_NA_BORDA_MS: passar não abre), a barra sobe, e some 0,7 s depois
 * de o mouse sair dela (o SAIR_DA_BARRA_MS). Abre na hora com o H
 * (data-aberta), com o Tab chegando ao botão (:focus-within), arrastando um
 * arquivo e, de vez, quando falta o config ou ele tem problema (data-fixa). */
.reserva-config {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
  padding: 6px 10px 8px;
  background: rgba(17, 17, 17, .97);
  border-top: 1px solid var(--linha-forte);
  font-size: 15px; line-height: 1.25;
  transform: translateY(calc(100% - 10px)); opacity: 0;
  transition: transform .15s ease .7s, opacity .15s ease .7s;
}
/* Como todo :hover do projeto, só com mouse de verdade (test/estilo.test.mjs). */
@media (hover: hover) {
  .reserva-config:hover { transform: none; opacity: 1; transition-delay: .4s; }
}
.reserva-config:focus-within, .reserva-config[data-aberta="true"], .reserva-config[data-fixa="true"], body.arrastando .reserva-config {
  transform: none; opacity: 1; transition-delay: 0s;
}
.reserva-config .zona-arquivo { padding: 4px 8px; gap: 4px 12px; border-width: 1px; }
.reserva-config .lista-avisos ul { max-height: 30vh; }
/* Com a reserva aberta de vez (sem config), a tela inicial deixa o espaço
   dela livre embaixo. */
.tela-abertura:has(.reserva-config[data-fixa="true"]) { padding-bottom: 64px; }
.opcoes-roteiro { display: flex; flex-direction: column; gap: .5em; }
.opcao-roteiro { display: flex; align-items: center; gap: .6em; min-height: 48px; cursor: pointer; }
.opcao-roteiro input { width: 1.2em; height: 1.2em; accent-color: var(--texto); }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: .7em; }
.abertura-nota { color: var(--texto-2); }

/* ---------- Lobby ---------- */

.lobby { flex: 1; display: flex; align-items: center; gap: 4vw; min-height: 0; }
.lobby-qr { flex: none; background: #fff; padding: 0; border-radius: 6px; line-height: 0; }
.lobby-info { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.lobby-chamada { font-size: var(--titulo); font-weight: 750; line-height: 1.05; }
.lobby-url { overflow-wrap: anywhere; font-weight: 600; }
.codigo-sala { font-size: var(--placar); font-weight: 800; letter-spacing: .08em; line-height: 1; }
.lobby-offline { display: flex; flex-direction: column; gap: var(--espaco); }

/* ---------- Faixa de entrada ---------- */

.faixa-entrada {
  flex: none;
  display: flex; align-items: center; gap: .3em 1.5em;
  padding: .5vh var(--lateral);
  line-height: 1.15;
  border-top: 1px solid var(--linha);
  background: var(--superficie);
}
.faixa-entrada .qr { flex: none; }
.faixa-codigo { letter-spacing: .08em; }

/* ---------- Enquete ---------- */

.enquete-status { display: flex; align-items: baseline; gap: .3em; }
.lista-afirmacoes { list-style: decimal; padding-left: 1.4em; display: flex; flex-direction: column; gap: .3em; }
.contadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; }
.contador {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .15em;
  padding: .4em .3em;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
  text-align: center; line-height: 1.15;
}
.contador-tecla {
  border: 2px solid var(--texto-2); border-radius: 6px;
  min-width: 1.6em; padding: 0 .3em;
}
.contador-valor { font-size: var(--placar); font-weight: 750; line-height: 1.05; }
.contador-rotulo { color: var(--texto-2); }

.resumos { display: flex; flex-direction: column; gap: var(--espaco); flex: 1 1 auto; min-height: 0; justify-content: center; }
.resumo-linha { display: flex; flex-direction: column; gap: .25em; }
.resumo-texto { font-weight: 600; }
.resumo-dados { display: flex; align-items: center; gap: 1.2em; }
.resumo-dados .grafico { height: 1.9em; min-height: 0; }
/* Só o "sem votos" (D-079: sem a linha "mediana · média · n"). */
.resumo-estat { flex: none; white-space: nowrap; color: var(--texto-2); }

/* ---------- Bloco ---------- */

.tela-bloco { justify-content: flex-start; }

/* D-079 (teste do Kleber de 06/10): o bloco de dados com o contexto do tópico,
   até 3 números e a fonte. O contexto um pouco maior (é o que se lê primeiro);
   cada número com um fio à esquerda, sem marcador nem caixa (pedido G1: menos
   poluído); a fonte em cinza, no corpo mínimo de 28 px. O aperto (telao.js,
   telaBloco): só quando a tela transborda, entrelinhas e vãos menores. */
.bloco-contexto { font-size: calc(var(--corpo) * 1.08); line-height: 1.3; max-width: 46em; }
/* O vão entre os itens: era .9 × espaço até o pedido do Kleber de 06/10 à
   noite (print 3: "aumentar um pouco o espaçamento entre os dados"). */
.bloco-itens { display: flex; flex-direction: column; gap: calc(var(--espaco) * 1.5); }
.bloco-item { padding-left: .6em; border-left: 6px solid var(--foco); line-height: 1.25; max-width: 48em; }
/* O respiro embaixo da fonte: colada ao pé da tela, a caixa do <b> (mais alta
   que a entrelinha) passava 2 px da tela, e o aperto ligava sem precisar. */
.bloco-fonte { margin-top: auto; padding-bottom: .15em; color: var(--texto-2); line-height: 1.2; }
.bloco-fonte b { color: var(--texto-2); font-weight: 700; }
.bloco-mapa .bloco-fonte { margin-top: 0; }
/* O aperto em dois degraus (telao.js, telaBloco). O primeiro só tira o que
   sobrou do vão novo e a folga da entrelinha do contexto; o segundo é o
   aperto de antes do pedido, com o vão dos itens um pouco maior (.8 em vez de
   .5: "Caminhos", o bloco mais longo, ainda cabe com a faixa de entrada). */
.tela-bloco[data-aperto] .bloco-contexto { line-height: 1.2; }
.tela-bloco[data-aperto] .bloco-itens { gap: var(--espaco); }
.tela-bloco[data-aperto="2"] { gap: calc(var(--espaco) * .6); }
.tela-bloco[data-aperto="2"] .bloco-contexto, .tela-bloco[data-aperto="2"] .bloco-item { line-height: 1.15; }
.tela-bloco[data-aperto="2"] .bloco-itens { gap: calc(var(--espaco) * .8); }
.tela-bloco[data-aperto="2"] .bloco-fonte { line-height: 1.1; }

/* Linha do tempo do seminário (D-042). Discreta nos blocos: uma trilha de
   marcas, com o mês do jogo escrito dentro da dele, e uma linha de texto. A cor
   nunca é o único canal: o passo atual também tem "você está aqui" escrito, e
   o mês, o próprio rótulo. */
.linha-tempo { display: flex; flex-direction: column; gap: .3em; }
.linha-tempo-trilha { display: flex; align-items: stretch; gap: 6px; }
.linha-tempo-trilha > .trecho { flex: 1 1 0; min-width: 10px; min-height: .9em; border-radius: 4px; background: var(--linha); }
.linha-tempo-trilha > .trecho-passado { background: var(--linha-forte); }
.linha-tempo-trilha > .trecho-atual { background: var(--foco); }
.linha-tempo-trilha > .trecho-rodada {
  flex: 0 0 auto; display: flex; align-items: center;
  padding: 0 .35em; background: var(--fundo);
  border: 2px solid var(--texto-2); color: var(--texto-2);
  font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.linha-tempo-trilha > .trecho-rodada.trecho-passado { background: var(--superficie-2); }
/* O fim do seminário agrupado (debrief, termômetro, medição, fechamento) vale
   por vários passos: marca mais larga, para não parecer um passo só. */
.linha-tempo-trilha > .trecho-final { flex-grow: 3; }
/* O item do "a seguir" é apontado na própria linha (rascunho, seção 7, item
   15): contorno tracejado na trilha, sublinhado no mapa. A cor não é o único
   canal: o texto "a seguir: …" diz o nome dele. */
.linha-tempo-trilha > .trecho-seguinte { outline: 3px dashed var(--foco); outline-offset: 2px; }
.trecho-mapa.trecho-seguinte .trecho-titulo { color: var(--texto); text-decoration: underline dashed var(--foco); text-underline-offset: .2em; }
.linha-tempo-seguir { color: var(--texto-2); }
.linha-tempo-seguir b { color: var(--texto); }
/* No "Mapa do seminário", a linha é o conteúdo: todos os trechos por extenso,
   em duas colunas quando passam de seis. Colunas de texto corrido (esquema v3):
   com 6 rodadas e 19 itens, as linhas de uma grade tinham a altura do item mais
   alto do par, e a lista passava da faixa de entrada em 1024×768. "safe
   center": se transbordar, a lista não sobe por cima do título. */
.bloco-mapa .linha-tempo { flex: 1 1 auto; min-height: 0; justify-content: safe center; gap: var(--espaco); }
.linha-tempo-lista { columns: var(--colunas); column-gap: 2.5vw; }
.trecho-mapa { display: flex; align-items: baseline; gap: .5em; line-height: 1.15; color: var(--texto-2); break-inside: avoid; }
.trecho-mapa + .trecho-mapa { margin-top: .3em; }
/* O aperto (telao.js, linhaDoTempo): só quando o mapa ainda transborda. */
.linha-tempo-mapa[data-aperto] .trecho-mapa { line-height: 1.06; }
.linha-tempo-mapa[data-aperto] .trecho-mapa + .trecho-mapa { margin-top: .08em; }
.trecho-marca { flex: none; align-self: center; width: .8em; height: .4em; border-radius: 3px; background: var(--linha-forte); }
.trecho-mapa.trecho-rodada .trecho-marca { height: .8em; background: transparent; border: 3px solid var(--texto-2); border-radius: 50%; }
.trecho-mapa.trecho-atual { color: var(--texto); font-weight: 700; }
.trecho-mapa.trecho-atual .trecho-marca { background: var(--foco); }
.trecho-aqui { color: var(--foco); }
.placar-resumido { display: flex; flex-direction: column; gap: .3em; }
.placar-discreto { margin-top: auto; color: var(--texto-2); }
.resumido-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25em 3vw; }
/* O rótulo da equipe já traz o personagem ("◯ 1 Jonas, motoboy", teste do
   Kleber de 05/10), e a linha de baixo com o nome saiu. Revisão da F2, achado
   18: entre o nome e o valor, em 1024×768, o nome virava "Ka…"; o rótulo
   quebra entre o nome e o ofício, e nunca é cortado. */
.resumido-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 .6em;
  padding: .15em 0; border-bottom: 1px solid var(--linha);
}
.resumido-linha > .equipe { grid-column: 1; grid-row: 1; }
.resumido-valor { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--texto); }

/* ---------- Formar equipes ---------- */

.grade-equipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco); flex: 1 1 auto; min-height: 0; align-content: center; }
.cartao-equipe {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .25em; padding: .45em .6em;
  font-size: var(--corpo); font-weight: 500;
  text-align: left;
}
.cartao-equipe .equipe { white-space: normal; }
.cartao-equipe.fechada { background: var(--fundo); border-style: dashed; }
.cartao-equipe.fechada .equipe { opacity: .55; }
.cartao-equipe[aria-pressed="true"] { background: var(--superficie-2); color: var(--texto); border-color: var(--texto); }
.cartao-equipe-detalhes { display: flex; flex-direction: column; gap: .05em; color: var(--texto-2); line-height: 1.15; }
.equipe-situacao { font-weight: 700; color: var(--texto); }
.cartao-equipe.fechada .equipe-situacao { color: var(--texto-2); }
.formar-status { font-weight: 600; }

/* ---------- Personas ---------- */

/* Três linhas por persona, na largura toda (D-065, teste de 30/09): quem é (as
 * equipes, o nome e o ofício), a casa (pessoas, básico, outra renda) e a conta
 * de um mês comum, em vermelho ou verde. Antes, duas linhas corridas: a equipe
 * (com a forma) e o nome ficavam em linhas de base diferentes, e o "· 3 pessoas
 * em casa" caía sozinho na linha de baixo; a tela parecia sobreposta. Cada
 * pedaço é inteiro (.conta, .equipe): a linha só quebra entre eles. */
.tela-personas h1 { font-size: calc(var(--corpo) * 1.4); }
.personas {
  display: flex; flex-direction: column; justify-content: safe center;
  gap: calc(var(--espaco) * .6);
  flex: 1 1 auto; min-height: 0;
}
/* Entrelinha 1,12 e vãos curtos: cinco personas (seis equipes) com a faixa de
   entrada embaixo passavam 7 px da borda de 1024×768. O fio entre as personas
   continua separando uma da outra. */
.persona-linha {
  display: flex; flex-direction: column; gap: .06em; line-height: 1.12;
  padding-bottom: calc(var(--espaco) * .5);
  border-bottom: 1px solid var(--linha);
}
.persona-quem { display: flex; flex-wrap: wrap; align-items: center; gap: .1em 1em; }
.persona-equipes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1em .45em; }
.persona-e { color: var(--texto-2); }
.persona-casa b { color: var(--texto); }
.persona-mes { font-weight: 600; }
.persona-mes[data-sinal="negativo"] { color: var(--negativo); }
.persona-mes[data-sinal="positivo"] { color: var(--positivo); }
/* O aperto (telao.js, telaPersonas): só quando a lista transborda, como seis
   personas com a faixa de entrada embaixo em 1024×768 (D-061). Entrelinha e
   vãos menores; a letra não encolhe e o fio entre as personas fica. Com a
   equipe pelo personagem no rótulo (teste do Kleber de 05/10), as seis
   entradas com a faixa de entrada passavam 1 px de 1024×768: vão de 1 px e
   respiro de 2 px embaixo de cada uma. */
.personas[data-aperto] { gap: 1px; }
.personas[data-aperto] .persona-linha { gap: 0; line-height: 1.04; padding-bottom: 2px; }

/* ---------- Rodada ---------- */

.situacao { font-size: calc(var(--corpo) * 1.05); line-height: 1.3; max-width: 46em; }
.opcoes { display: flex; flex-direction: column; gap: .25em; }
.opcoes li { display: flex; align-items: baseline; gap: .6em; }
.opcoes-compactas { color: var(--texto-2); }
/* D-079 (teste do Kleber de 06/10, print 1: "que greve? por quê? o que
   impacta?"): no formato simples, a mini-história em cinza, na mesma linha
   corrida do rótulo em negrito, e nenhum dinheiro na opção (a escolha é às
   cegas; o saldo aparece no resultado). */
.opcao-textos { min-width: 0; line-height: 1.22; }
.opcao-textos .opcao-rotulo { font-weight: 700; }
.opcao-narrativa { color: var(--texto-2); }
.letra {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35em; height: 1.35em;
  border: 2px solid var(--texto); border-radius: 6px;
  font-weight: 800; line-height: 1;
  flex: none;
}
.equipes-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em 1.5vw; margin-top: auto; }
.equipe-status {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2em .5em;
  padding: .35em .6em;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
}
.equipe-status.decidida { border-color: var(--texto-2); }
.equipe-andamento { color: var(--texto-2); flex-basis: 100%; }
.equipe-andamento b { color: var(--texto); }
.equipe-empate { font-weight: 700; flex-basis: 100%; }
.botoes-opcao { display: flex; gap: .4em; }
.botao-letra { min-width: 2em; min-height: 48px; padding: 0 .3em; font-size: max(28px, .85em); font-weight: 800; line-height: 1.3; }
/* 5 opções (formato simples, decisão do Kleber de 05/10): com a largura de 4,
   o quinto botão saía da célula da equipe em 1024×768 (três células por
   linha) e ficava por baixo da vizinha. Botões mais estreitos e vão menor; a
   altura de 48 px (o clique do apresentador) fica. */
.botoes-opcao:has(> :nth-child(5)) { gap: .2em; }
.botoes-opcao:has(> :nth-child(5)) .botao-letra { min-width: 1.55em; padding: 0 .12em; }
/* O aperto da decisão e da prorrogação (telao.js, apertarDecisao): só quando a
   tela transborda. Com a equipe pelo personagem (teste do Kleber de 05/10), o
   rótulo comprido quebra em duas linhas na célula, e seis células com a faixa
   de entrada passavam ~96 px de 1024×768. Entrelinhas e vãos menores; a letra
   fica nos 28 px. */
.tela[data-aperto] .situacao { line-height: 1.15; }
/* D-079: com a mini-história nas 5 opções, também os vãos entre o cabeçalho,
   a situação, as opções e as equipes encolhem pela metade. */
.tela-rodada-decidindo[data-aperto], .tela-rodada-prorrogacao[data-aperto] { gap: calc(var(--espaco) * .5); }
.tela[data-aperto] .opcao-textos { line-height: 1.15; }
.tela[data-aperto] .opcoes { gap: 0; line-height: 1.15; }
.tela[data-aperto] .equipes-status { gap: 6px 1.5vw; }
.tela[data-aperto] .equipe-status { line-height: 1.08; padding-top: .15em; padding-bottom: .15em; }
/* O segundo aperto (telao.js, apertarDecisao; revisão de 06/10): online, em
   1280×720 com a faixa de entrada, a segunda fileira de equipes ficava 39 px
   embaixo da faixa. O andamento sobe para a linha do nome ("Laranja 2 de 3"),
   sem a palavra "decidiram"; onde não couber, quebra como antes. Com a
   margem da célula e os vãos um pouco menores, "3 Verde-azulado 2 de 2" cabe
   numa linha em 1280 de largura (não cabia por ~10 px). */
:is(.tela-rodada-decidindo, .tela-rodada-prorrogacao)[data-aperto="2"] { gap: calc(var(--espaco) * .3); }
:is(.tela-rodada-decidindo, .tela-rodada-prorrogacao)[data-aperto="2"] .equipe-status { gap: .1em .3em; padding-left: .4em; padding-right: .4em; }
:is(.tela-rodada-decidindo, .tela-rodada-prorrogacao)[data-aperto="2"] .equipe-andamento { flex-basis: auto; }
:is(.tela-rodada-decidindo, .tela-rodada-prorrogacao)[data-aperto="2"] .andamento-palavra { display: none; }

/* ---------- Sorteio e placar: linhas alinhadas com o gráfico ---------- */

.linhas-grafico {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 1.5vw;
}
.linhas-sorteio { grid-template-columns: auto minmax(0, 1fr) minmax(0, 11em); }
.coluna-rotulos, .coluna-valores { display: grid; grid-template-rows: repeat(var(--linhas), minmax(0, 1fr)); }
.linha-rotulo, .linha-valor { display: flex; align-items: center; min-height: 0; }
.linha-valor { font-weight: 700; line-height: 1.12; }
.linha-rotulo-sorteio { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.12; }
.linha-graves { color: var(--texto-2); }
.linha-graves b { color: var(--texto); }
.carta-sorteada { font-weight: 650; }
.referencias { color: var(--texto-2); display: flex; flex-wrap: wrap; gap: .2em 2em; }
.referencias b { color: var(--texto); }
.marca-referencia { font-weight: 800; color: var(--texto); }

/* ---------- Resultado ---------- */

/* D-065 (teste de 30/09): uma faixa por equipe, só com o essencial, em três
 * colunas alinhadas entre as faixas (subgrid): a equipe pelo personagem; a
 * carta, grande, com os dias parados embaixo; o saldo do período em verde ou
 * vermelho, com sinal e com o rótulo "saldo do bimestre" logo acima; e, numa
 * linha embaixo da carta e do saldo, a dívida total e o que faltou na mesa
 * (teste do Kleber de 05/10). Antes, cada equipe era uma frase corrida de
 * três linhas com todas as contas, sem espaço entre as equipes, e a tela era
 * difícil de explicar em aula. O detalhamento ficou no celular e na história.
 * Nada abaixo do corpo (28 px em 1024×768); o e2e prova seis equipes com a
 * carta mais cara em 1024×768, sem rolagem e com espaço entre as faixas. */
.tela-rodada-resultado { margin-left: calc(var(--lateral) * -.6); margin-right: calc(var(--lateral) * -.6); }
.tela-rodada-resultado h1 { font-size: calc(var(--corpo) * 1.4); }
/* A coluna da equipe em fit-content: com o personagem no rótulo ("◯ 1 Bruna,
   influenciadora", teste do Kleber de 05/10), em max-content ela tirava ~70 px
   da carta em 1024×768. Até 9em o rótulo fica numa linha; o mais comprido
   quebra entre o nome e o ofício, e a coluna da equipe ocupa as linhas da
   faixa inteira (.resultado-quem), ao lado da carta, do dinheiro e da linha de
   baixo. */
.grade-resultados {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: fit-content(9em) minmax(0, 1fr) max-content;
  align-content: safe center;
  row-gap: calc(var(--espaco) * 1.2);
}
/* O aperto (telao.js, apertarResultado): só quando seis faixas com a faixa de
   entrada embaixo não cabem. As faixas se aproximam, sem encostar, e a origem
   da decisão sai (o celular de cada equipe a mostra). */
.grade-resultados[data-aperto] { row-gap: calc(var(--espaco) * .7); }
.grade-resultados[data-aperto] .resultado-origem { display: none; }
/* A faixa tem três linhas (a carta e, ao lado, o rótulo e o saldo; embaixo,
   a linha da dívida total; teste do Kleber de 05/10), e seis delas com a
   entrelinha de 1,08 passavam ~60 px de 1024×768 (D-066). No aperto,
   a entrelinha fecha em 1 e o respiro de dentro da faixa diminui; a letra fica
   nos 28 px. */
.grade-resultados[data-aperto] .cartao-resultado { line-height: 1; padding-top: .1em; padding-bottom: .1em; }
.grade-resultados[data-aperto] .resultado-carta { line-height: 1; }
/* O segundo aperto (telao.js, apertarResultado): só se o primeiro não bastou. */
.grade-resultados[data-aperto="2"] { row-gap: 8px; }
/* Sem o respiro de dentro da faixa: com a faixa de entrada embaixo (online), seis
   faixas de três linhas passavam 11 px de 1024×768 no teste da parte 2.
   Teste do Kleber de 05/10: toda faixa passou a ter três linhas (o rótulo
   "saldo do bimestre" acima do saldo e a linha da dívida total embaixo), e
   seis delas com a faixa de entrada passavam ~5 px de 1024×768 mesmo com o
   segundo aperto antigo. Agora ele leva o saldo a 1,05× o corpo (ainda maior
   que ele), a carta e o título ao tamanho do corpo e a entrelinha a 0,98; o
   vão entre as faixas fica nos 8 px. */
.grade-resultados[data-aperto="2"] .cartao-resultado { padding-top: 0; padding-bottom: 0; line-height: .98; }
.grade-resultados[data-aperto="2"] .resultado-saldo { font-size: 1.05em; }
.grade-resultados[data-aperto="2"] .resultado-carta { font-size: 1em; line-height: .98; }
.tela-rodada-resultado[data-aperto="2"] h1 { font-size: calc(var(--corpo) * 1.05); }
.cartao-resultado {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: center;
  column-gap: 1.2em;
  padding: .2em .6em;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
  line-height: 1.08;
}
.resultado-quem, .resultado-meio, .resultado-dinheiro { display: flex; flex-direction: column; gap: .04em; min-width: 0; }
/* As linhas da faixa (telao.js, telaResultado): a equipe na primeira coluna,
   de cima a baixo; a carta e o dinheiro na primeira linha; embaixo deles, a
   linha da dívida (.resultado-limite); e a frase da D-067 na largura inteira.
   Linha sem nada fica com altura zero (a faixa não tem vão entre linhas). */
/* min-width: auto na equipe: com o 0 das três colunas, o fit-content deixava a
   coluna mais estreita que a palavra mais comprida do rótulo
   ("influenciadora"), e ela passava por cima da carta. */
.resultado-quem { grid-column: 1; grid-row: 1 / span 2; min-width: auto; }
.resultado-meio { grid-column: 2; grid-row: 1; }
.resultado-dinheiro { grid-column: 3; grid-row: 1; }
/* "decisão B" numa linha só (revisão de 30/09, achado 9); o nome do
   personagem está no rótulo da equipe (teste do Kleber de 05/10). */
.resultado-escolha { color: var(--texto-2); white-space: nowrap; }
.resultado-escolha b { color: var(--texto); }
.resultado-carta { font-size: 1.15em; font-weight: 750; line-height: 1.08; }
/* Cada pedaço da linha de detalhe inteiro (a decisão, o empréstimo, a parada,
   a proteção, a origem): a linha só quebra entre eles. "ninguém / votou"
   quebrava no meio (revisão de 30/09, achado 15). */
.resultado-detalhe { color: var(--texto-2); }
/* O separador " · " da origem fica fora do nowrap: dentro, não sobrava onde
   quebrar, e a origem invadia a coluna do saldo. */
.resultado-detalhe > span:not(.resultado-origem), .resultado-decisao { white-space: nowrap; }
/* A parada pode quebrar entre "20 dias parado" e "perdeu R$ X" (cada um
   inteiro): inteira e sem quebra, numa coluna da carta mais estreita, ela
   passava por cima da coluna do dinheiro. */
.resultado-detalhe > .resultado-custo { white-space: normal; }
.resultado-custo > .conta, .resultado-custo > .conta-quebra { white-space: nowrap; }
.resultado-detalhe b { color: var(--texto); }
.resultado-decisao { color: var(--texto-2); }
.resultado-dinheiro { align-items: flex-end; text-align: right; }
/* Teste do Kleber de 05/10 (print 7): o número colorido não dizia o que era (o
   "saldo do bimestre" ficava só no cabeçalho, no canto de cima). O rótulo vai
   logo acima de cada saldo, discreto e no corpo (28 px em 1024×768). */
.resultado-saldo-rotulo { color: var(--texto-2); white-space: nowrap; }
.resultado-saldo { font-size: 1.3em; font-weight: 800; white-space: nowrap; }
.resultado-saldo[data-sinal="negativo"] { color: var(--negativo); }
.resultado-saldo[data-sinal="positivo"] { color: var(--positivo); }
/* A linha de baixo, alinhada à direita, da coluna da carta até a borda: a
   dívida total (o banco, o empréstimo e as contas atrasadas num número só;
   teste do Kleber de 05/10, print 7: em duas linhas, "dívida" e "contas
   atrasadas" se liam como duas dívidas), o caixa positivo e o que faltou na
   mesa (D-066). Na coluna do dinheiro, um texto comprido alargava a coluna e a
   parada da carta quebrava em duas linhas. Cada pedaço inteiro; a linha só
   quebra entre eles. */
.resultado-limite { grid-column: 2 / -1; grid-row: 2; justify-self: end; text-align: right; color: var(--texto-2); }
.resultado-limite > span { white-space: nowrap; }
.resultado-limite b { color: var(--texto); }
/* D-067: a frase de quando a proteção pagou mais do que o trabalho, na largura
   da faixa inteira, embaixo das três colunas (numa coluna só, ela ocupava três
   ou quatro linhas). No tom do texto, e não no secundário: é o dado que a sala
   precisa ler, e não um detalhe. */
.resultado-acima { grid-column: 1 / -1; grid-row: 3; line-height: 1.12; padding-top: .1em; }
/* As contas do mês (D-044) e o custo real da carta (D-052), no resultado e na
   história: cada pedaço inteiro, o rótulo discreto e o valor em destaque. */
.contas, .custo-carta, .historia-dinheiro { color: var(--texto-2); }
.contas b, .custo-carta b, .historia-de-antes b { color: var(--texto); }
.conta { white-space: nowrap; }
/* Rótulo que quebra, com a última palavra colada ao valor (telao.js, rotuloEValor). */
.conta-fim { white-space: nowrap; }
/* Sem contorno de destaque (revisão da F6a): as cartas mais extremas só entram
   animadas. Um contorno mais grosso em duas faixas, sem legenda, a turma lia
   como "as equipes que ganharam". */
/* Carta grave: só o texto da consequência, em cor neutra e sem animação (seção
   8, "tema sensível"). */
.cartao-resultado.grave { border-color: var(--linha-forte); }
/* O deslocamento cabe na margem que sobra do palco (o resultado usa parte
   dela): com −1,5vw, o cartão animado saía pela esquerda da tela. */
@keyframes destacar { from { opacity: .15; transform: translateX(-1vw); } to { opacity: 1; transform: none; } }
.cartao-resultado.animada { animation: destacar .7s ease-out both; }

/* ---------- Comparativo ---------- */

.frase-comparativo { font-size: calc(var(--corpo) * 1.05); line-height: 1.3; }
.aviso-comparativo { font-weight: 700; }
.aviso-celulares { font-weight: 600; }
.paineis { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; }
.paineis-um { grid-template-columns: minmax(0, 1fr); }
.painel-distribuicao { display: flex; flex-direction: column; gap: .3em; min-height: 0; }
.painel-titulo { color: var(--texto-2); }
.paineis ~ .escala-legenda { font-size: var(--corpo); }

/* ---------- Placar final em páginas (D-041) ---------- */

.pagina-placar { color: var(--texto-2); font-weight: 600; white-space: nowrap; }
/* O nome da equipe no título da história, no peso do título. */
.tela-placar-final h1 .equipe-nome { font-weight: inherit; }
.linha-rotulo-placar { flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.12; }
.valor-saldo { justify-content: flex-end; white-space: nowrap; }
/* Escolha ou sorte: uma linha por equipe, contada como história. */
.historias-escolha { display: flex; flex-direction: column; gap: calc(var(--espaco) * .8); flex: 1 1 auto; min-height: 0; justify-content: safe center; }
.historia-escolha {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .05em .6em;
  padding-bottom: calc(var(--espaco) * .5); border-bottom: 1px solid var(--linha);
  line-height: 1.2;
}
/* A conta corre na mesma linha da equipe (display: contents põe cada passo
 * como item da linha): com a equipe numa linha e a conta embaixo, seis equipes
 * davam 18 linhas e passavam de 1024×768 (revisão de 29/09). */
.historia-conta { display: contents; color: var(--texto-2); }
.historia-conta b { color: var(--texto); }
.passo-conta { white-space: nowrap; }
/* O aperto (telao.js, telaPlacarFinal): só quando a lista transborda (12 meses,
   valores de cinco dígitos e seis nomes compridos em 1024×768). */
.historias-escolha[data-aperto] { gap: 3px; }
.historias-escolha[data-aperto] .historia-escolha { line-height: 1.08; padding-bottom: 3px; }
.historia-meses[data-aperto] { gap: calc(var(--espaco) * .4); }
.historia-meses[data-aperto] .historia-mes { line-height: 1.08; gap: 0; }
/* O segundo aperto do "Escolha ou sorte?" (telao.js, telaPlacarFinal; teste do
   Kleber de 05/10, pedido 14): com a linha de onde a conta parte, seis equipes
   passavam ~23 px de 1024×768 mesmo apertadas. O título da página menor (34 px
   em 1024×768, ainda maior que o corpo), os vãos da tela pela metade e o fio
   entre as equipes colado; a letra do corpo continua nos 28 px. */
.tela-placar-final[data-aperto="2"] { gap: calc(var(--espaco) * .5); }
.tela-placar-final[data-aperto="2"] h1 { font-size: calc(var(--corpo) * 1.2); }
.historias-escolha[data-aperto="2"] .historia-escolha { padding-bottom: 1px; }
/* O segundo aperto (telao.js, telaPlacarFinal): só se o primeiro não bastou. */
.historia-meses[data-aperto="2"] .historia-narrativa { -webkit-line-clamp: 1; line-clamp: 1; }
/* "Escolha ou sorte?" em grade fixa (revisão da F7, achado 13 da revisão de
   conteúdo e legibilidade). Corrida como texto, a conta de cada equipe quebrava
   num ponto diferente ("= terminaram com" na linha 2 de umas e na 3 de outras),
   e os números não ficavam em coluna. Agora são três linhas por equipe, as
   mesmas em todas, em duas colunas alinhadas entre as equipes (subgrid):
     equipe                     | se ninguém votasse: R$ a
     as escolhas mudaram: ±R$ b | as cartas mudaram: ±R$ c
     = terminaram com R$ d
   (os rótulos de 05/10; antes, "se não mudassem nada", "→ as escolhas" e
   "→ a sorte", que o Kleber não entendeu no teste de 05/10)
   Duas linhas não cabem: com valores de cinco dígitos, escolhas, sorte e total
   lado a lado passam da largura de 1024×768 com a letra de 28 px. Em cada
   passo, o rótulo à esquerda e o valor à direita da coluna: os valores ficam
   alinhados entre as equipes. A página do pior caso (.piores-casos) continua
   corrida: a conta dela tem outro formato.
   As duas colunas na largura do conteúdo (max-content), e não a segunda em
   1fr: esticada até a borda, em 1920×1080 o rótulo da sorte ficava a
   ~1.200 px do valor, e a conta se lia em diagonal (revisão do voto da F6b,
   achado 7). A grade, mais estreita que a tela em 1920×1080, fica no meio. */
.historias-escolha.escolhas-em-grade {
  display: grid; grid-template-columns: max-content max-content;
  align-content: safe center; row-gap: calc(var(--espaco) * .8); column-gap: 1.2em;
}
.escolhas-em-grade > .historia-escolha { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: .05em; }
.escolhas-em-grade > .historia-escolha > .equipe { grid-column: 1; grid-row: 1; }
.escolhas-em-grade .passo-conta { display: flex; justify-content: space-between; gap: .3em; }
.escolhas-em-grade .historia-conta > :nth-child(1) { grid-column: 2; grid-row: 1; }
.escolhas-em-grade .historia-conta > :nth-child(2) { grid-column: 1; grid-row: 2; }
.escolhas-em-grade .historia-conta > :nth-child(3) { grid-column: 2; grid-row: 2; }
.escolhas-em-grade .historia-conta > :nth-child(4) { grid-column: 1; grid-row: 3; }
.historias-escolha.escolhas-em-grade[data-aperto] { row-gap: 3px; column-gap: 1.2em; }
/* O total do fim, depois do "=", em destaque: é o resultado da conta. */
.passo-final { color: var(--texto); font-weight: 700; }
/* O pior que podia acontecer (D-059): a mesma lista do "Escolha ou sorte?",
 * com uma frase curta embaixo do título. "Não escolheram proteção" fica no
 * tom secundário: é a ausência do número, e não um número. */
.pior-nota { color: var(--texto-2); }
/* O que é proteção no jogo e quais opções protegem (teste do Kleber de 05/10,
   print 16: "o que seria escolher a proteção?"). No tom do texto: é a
   explicação que a sala precisa ler para entender a página. */
.pior-o-que { color: var(--texto); }
/* "Escolha ou sorte?": a linha que explica de onde a conta parte (teste do
   Kleber de 05/10), no tom da nota do pior caso. */
.escolhas-nota { color: var(--texto-2); }
.pior-sem-escolha { color: var(--texto-2); }
/* A história de uma equipe: um mês por item. */
.historia-meses { display: flex; flex-direction: column; gap: var(--espaco); flex: 1 1 auto; min-height: 0; justify-content: safe center; }
.historia-mes { display: flex; flex-direction: column; gap: .05em; padding-left: .6em; border-left: 4px solid var(--linha-forte); line-height: 1.2; }
.historia-titulo { font-weight: 700; }
.historia-fatos { color: var(--texto-2); }
/* A linha curta do mês, em primeira pessoa (D-045): até duas linhas, e o que
   não couber termina em reticências no fim, nunca no meio; a fonte fica no
   corpo (28 px em 1024×768), sem encolher para caber. */
.historia-narrativa {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; font-style: italic;
}
.historia-fatos b { color: var(--texto); }
.historia-final { font-size: calc(var(--corpo) * 1.1); }
/* O empréstimo como dívida (esquema v2.2): "pegou empréstimo de R$ 1.500" depois
   das contas do mês, e a dívida com que a equipe termina no fim da história. */
.historia-emprestimo b { color: var(--texto); }
.historia-divida, .historia-caixa { color: var(--texto-2); white-space: nowrap; }
.historia-divida b, .historia-caixa b, .historia-mesa b, .historia-mesa-total b, .conta-atraso b { color: var(--texto); }
/* D-067: a mesma frase do resultado, no mês da história em que aconteceu. */
.historia-acima { color: var(--texto); }
/* D-066: o que faltou na mesa no ano, por equipe, embaixo do gráfico do saldo.
   Fora do gráfico e longe do "faltou R$ X": não é dívida nem parte do saldo. */
.mesa-no-ano { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em 1.2em; color: var(--texto-2); line-height: 1.15; }
.mesa-titulo { white-space: nowrap; }
.mesa-titulo b { color: var(--texto); }
.mesa-equipe { white-space: nowrap; }
.mesa-equipe b { color: var(--texto); }

/* ---------- Fim ---------- */

.placar-fim { margin-top: auto; }
/* G1 (teste do Kleber de 06/10: telas complementares menos poluídas): em duas
   colunas, "Equipe Verde-azulado" quebrava em três linhas em 1024×768 ao lado
   do "devendo R$ 3.791". Uma coluna só, com o nome inteiro numa linha e o
   valor perto dele; a tela do Fim tem altura de sobra para as seis linhas. */
.placar-fim .resumido-lista { grid-template-columns: minmax(0, 1fr); max-width: 30em; }
.placar-fim .equipe-nome { white-space: nowrap; }

/* ---------- Modo revendo (pedido 6 do Kleber, 05/10) ----------
 * O telão mostra um passo que já passou, só na projeção (telao.js,
 * telaRevista), e o selo em cima do palco diz isso à turma e ao apresentador:
 * "Revendo: <passo> · os celulares continuam no passo atual · → volta". É uma
 * faixa do fluxo (flex: none), e não uma camada por cima: as medidas do
 * desenho (o aperto do resultado, das personas e do mapa) contam com a altura
 * que sobra. No amarelo que nenhuma equipe usa (--foco), com o texto escuro
 * (14,3:1): não se confunde com nada da tela revista. A letra é a do aviso de
 * operação (~20 px em 1024×768), para o selo caber numa linha e a tela revista
 * continuar cabendo.
 * O resultado de seis equipes com a faixa de entrada embaixo, o caso mais
 * apertado do telão, passava 12 px de 1024×768 com o selo de 36 px em cima (o
 * e2e, parte 2). O selo fica com ~31 px, e o palco, que já tem o selo como
 * borda de cima, perde a maior parte do respiro de cima (18 → 6 px). */
.selo-revendo {
  flex: none;
  padding: .2em var(--lateral);
  background: var(--foco);
  color: var(--texto-sobre-claro);
  font-size: clamp(18px, min(1.95vw, 2.8vh), 40px);
  font-weight: 600;
  line-height: 1.15;
}
.selo-revendo b { font-weight: 800; }
body.revendo #palco { padding-top: calc(var(--espaco) * .4); }
/* O resultado revisto não repete a entrada animada das cartas: rever é para
   comentar, e a animação já mostrou, na hora, quais cartas pesaram. */
.tela-revista .cartao-resultado.animada { animation: none; }
.tela-revista-cartao { justify-content: center; }

/* ---------- Barra do apresentador ----------
 * Sobreposta ao que está projetado. Só aparece com H ou com o mouse PARADO
 * ~400 ms na faixa fina do pé da tela (D-038; pedido 8 do Kleber, 05/10;
 * BORDA_BARRA_PX e PARAR_NA_BORDA_MS no telao.js). Some 3 s depois do último
 * movimento do mouse sobre ela, ou ~0,7 s depois de o mouse sair dela.
 *
 * Compacta (pedido 8): a informação do passo numa linha corrida em cima (o
 * passo, o título, o salvamento, os ativos e o selo), a dica do passo embaixo
 * dela e os botões menores. Antes, a informação vinha numa coluna de cinco
 * linhas e os botões tinham 40 px de altura: aberta, a barra cobria um terço
 * da tela em 1024×768. Os botões ficam com pelo menos 28 px (alvo de toque
 * acima dos 24 px da WCAG 2.2). */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 10px 6px;
  background: rgba(17, 17, 17, .97);
  border-top: 1px solid var(--linha-forte);
  font-size: 15px; line-height: 1.25;
}
.barra-info { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.barra-passo { font-weight: 700; }
.barra-titulo { color: var(--texto-2); max-width: 22em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-salvo { color: var(--texto-2); }
.barra-salvo:empty { display: none; }
.barra-ativos { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.barra-ativos:empty { display: none; }
.barra-dica { color: var(--texto); flex-basis: 100%; order: 1; }
.barra-dica:empty { display: none; }
.barra-info .selo { padding: 0 .6em; font-size: 14px; }
.barra-botoes { display: flex; flex-wrap: wrap; gap: 4px; }
.botao-barra { min-height: 28px; padding: .1em .55em; font-size: 14px; }

/* ---------- Aviso e modal ---------- */

.aviso {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  max-width: min(92vw, 60em);
  padding: .4em .9em;
  background: var(--superficie-2);
  border: 2px solid var(--texto-2); border-left-width: 10px;
  border-radius: var(--raio);
  font-size: 28px; font-weight: 600;
}
/* D-047: em sessão, o aviso é do apresentador e mora junto da barra oculta. Só
 * aparece com ela aberta, logo acima dela, no tamanho da letra da barra; solto
 * no topo, projetava textos de operação (revisão de 29/09). --altura-barra vem
 * do mostrarBarra() do telao.js. */
body.em-sessao .aviso {
  top: auto; bottom: calc(var(--altura-barra, 72px) + 8px);
  max-width: min(96vw, 60em);
  font-size: 20px;
}
body.em-sessao:not(.barra-visivel) .aviso { display: none; }
.aviso[data-tipo="erro"] { border-color: var(--texto); }

.modal {
  max-width: min(92vw, 900px);
  padding: 1.2em 1.4em;
  background: var(--superficie);
  color: var(--texto);
  border: 2px solid var(--linha-forte);
  border-radius: var(--raio);
  font-size: 22px;
}
.modal::backdrop { background: rgba(0, 0, 0, .72); }
.modal h2 { font-size: 1.2em; margin-bottom: .6em; }
.modal-texto { color: var(--texto-2); margin-bottom: .8em; }
.modal-botoes { display: flex; flex-wrap: wrap; gap: .5em; }
.modal-botoes .botao-opcao { flex: 1 1 100%; justify-content: flex-start; text-align: left; }
.campo-cracha {
  font: inherit; font-size: 2em; letter-spacing: .2em; text-transform: uppercase;
  width: 5em; padding: .2em .4em; margin-bottom: .8em;
  background: var(--fundo); color: var(--texto); border: 2px solid var(--linha-forte); border-radius: var(--raio);
}

/* ---------- O formato simples (decisão do Kleber de 05/10 à noite) ----------
 * Um personagem só, 5 opções por bimestre com a mini-história e sem o dinheiro
 * (D-079: às cegas), o evento do mês igual para todas as equipes (sem sorteio)
 * e o placar pelo caminho de cada equipe (telao.js, simples()). Nada abaixo do
 * corpo (28 px em 1024×768); o e2e (telao-simples) prova seis equipes em
 * 1024×768 e 1920×1080. */

/* A decisão: a letra alinhada com a primeira linha do rótulo (o rótulo e a
   mini-história correm juntos, em duas linhas). */
.opcoes-simples li { align-items: flex-start; }
.opcoes-simples .letra { margin-top: .05em; }

/* "Conheça o Jonas": quem é, a casa, a conta de um mês comum em duas colunas
   (o que entra e sai, e o valor) e, embaixo, a falta do mês em vermelho.
   Sem encolher (flex-shrink 0): com a linha das fontes fora da .conheca, uma
   .conheca que encolhia deixava a frase do mês por cima de "Fontes:" em
   1024×768 com a faixa de entrada, sem a seção transbordar, e o aperto não
   entrava (e2e individual-online, revisão final de 14/10). */
.tela-personas .conheca { display: flex; flex-direction: column; gap: calc(var(--espaco) * .7); flex: 1 0 auto; justify-content: safe center; }
.conheca-quem { font-size: calc(var(--corpo) * 1.1); line-height: 1.25; }
/* Revisão final de 14/10 (pedido do Kleber): a conta do mês é o que se lê de
   longe, em letra maior; o básico item a item e as fontes vêm discretos, em
   uma linha cada, sem descer dos 28 px. */
.conheca-conta { display: grid; grid-template-columns: max-content max-content; gap: .1em 1.4em; font-size: calc(var(--corpo) * 1.15); }
.conheca-linha { display: contents; }
.conheca-linha > b { text-align: right; }
.conheca-itens { font-size: max(28px, .8em); line-height: 1.25; }
.conheca-itens b, .conheca-familia b { color: var(--texto); font-weight: 600; }
.conheca-mes { font-size: calc(var(--corpo) * 1.1); }
.tela-personas .conheca-fontes { margin-top: 0; font-size: max(28px, .72em); }
/* O aperto (telao.js, telaConheca): só quando a tela transborda (a faixa de
   entrada em 1280×720). */
.tela-personas[data-aperto] { gap: calc(var(--espaco) * .5); }
.tela-personas[data-aperto] .conheca { gap: calc(var(--espaco) * .35); }
.tela-personas[data-aperto] :is(.conheca-quem, .conheca-familia, .conheca-itens, .conheca-mes, .conheca-fontes) { line-height: 1.12; }
.tela-personas[data-aperto] .conheca-conta { gap: 0 1.4em; line-height: 1.12; }
.tela-personas:is([data-aperto="2"], [data-aperto="3"]) :is(.conheca-quem, .conheca-mes, .conheca-conta) { font-size: var(--corpo); }
.tela-personas[data-aperto="3"] .conheca-itens { display: none; }

/* O resultado: o evento do mês uma vez, no topo, e uma faixa por equipe em
   três colunas alinhadas entre as faixas (subgrid): a equipe e, embaixo, a
   opção escolhida; o saldo do bimestre; o dinheiro da família. Na equipe que
   uma escolha de antes atingiu, uma terceira linha: a observação (D-080). */
.evento-do-mes { display: flex; flex-direction: column; gap: .05em; padding: .1em .6em; border-left: 6px solid var(--texto-2); line-height: 1.2; }
.evento-titulo { font-size: calc(var(--corpo) * 1.15); font-weight: 750; }
.evento-linha { color: var(--texto-2); }
.grade-simples {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content;
  align-content: safe center;
  row-gap: calc(var(--espaco) * .9);
}
.resultado-simples {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: subgrid; align-items: center;
  column-gap: 1.2em;
  padding: .15em .6em;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
  line-height: 1.12;
}
.simples-quem { grid-column: 1; grid-row: 1; min-width: 0; }
.simples-opcao { grid-column: 1; grid-row: 2; display: flex; align-items: baseline; gap: .45em; min-width: 0; }
.simples-opcao .letra { height: 1.2em; min-width: 1.2em; }
.simples-saldo, .simples-familia { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.simples-saldo { grid-column: 2; }
.simples-familia { grid-column: 3; }
.simples-familia-valor { font-size: 1.1em; white-space: nowrap; }
.simples-familia-valor b { font-weight: 800; }
.simples-familia-valor[data-situacao="devendo"] b { color: var(--negativo); }
/* O aperto (telao.js, telaResultadoSimples): só quando seis faixas com a
   faixa de entrada embaixo não cabem; cada um, se o anterior não bastou (até o
   quinto, D-080). */
.tela-rodada-resultado[data-aperto] .grade-simples { row-gap: calc(var(--espaco) * .4); }
.tela-rodada-resultado[data-aperto] .resultado-simples { line-height: 1; padding-top: 0; padding-bottom: 0; }
.tela-rodada-resultado[data-aperto] .evento-do-mes { line-height: 1.05; }
.tela-rodada-resultado:is([data-aperto="2"], [data-aperto="3"], [data-aperto="4"], [data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) { gap: calc(var(--espaco) * .5); }
.tela-rodada-resultado:is([data-aperto="2"], [data-aperto="3"], [data-aperto="4"], [data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) h1 { font-size: calc(var(--corpo) * 1.1); }
.tela-rodada-resultado:is([data-aperto="2"], [data-aperto="3"], [data-aperto="4"], [data-aperto="5"]) .grade-simples { row-gap: 4px; }
.tela-rodada-resultado:is([data-aperto="2"], [data-aperto="3"], [data-aperto="4"], [data-aperto="5"]) .resultado-simples .resultado-saldo { font-size: 1.1em; }
/* D-078 e D-080: a consequência de uma escolha de antes, como observação na
   faixa da própria equipe, embaixo da opção, na largura das três colunas (na
   coluna da opção, "As costas travaram (2 bimestres puxados seguidos)" ia a
   duas linhas em 1024×768). Letra secundária: a cor do texto 2 e, onde o corpo
   passa de 28 px (1920×1080), 85% dele; nunca abaixo de 28 px. O terceiro
   aperto tira a frase do evento do mês; o quarto, se ainda faltar altura, o
   evento inteiro (ele está no celular). */
.simples-obs { grid-column: 1 / -1; grid-row: 3; font-size: max(28px, .85em); color: var(--texto-2); line-height: 1.12; }
.simples-obs b { display: inline-block; font-weight: 800; }
.tela-rodada-resultado[data-aperto] .simples-obs { line-height: 1; }
.tela-rodada-resultado:is([data-aperto="3"], [data-aperto="4"], [data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) .evento-linha { display: none; }
.tela-rodada-resultado:is([data-aperto="4"], [data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) .evento-do-mes { display: none; }
/* O quinto aperto (D-080), só se seis faixas com a observação ainda não couberem
   sem o evento: o pior caso medido é mar–abr com as seis equipes atingidas e a
   faixa de entrada em 1280×720 (cada faixa com três linhas passava 74 px). Cada
   linha da faixa fica com a altura da letra: a caixa da letra da opção, o saldo
   e o dinheiro da família no tamanho do corpo, e o vão entre as faixas em 2 px. */
.tela-rodada-resultado[data-aperto="5"] .grade-simples { row-gap: 2px; }
.tela-rodada-resultado[data-aperto="5"] .simples-quem { display: flex; align-items: center; line-height: 1; }
.tela-rodada-resultado[data-aperto="5"] .simples-opcao .letra { height: 1em; min-width: 1em; }
.tela-rodada-resultado[data-aperto="5"] .resultado-simples :is(.resultado-saldo, .simples-familia-valor) { font-size: 1em; line-height: 1; }

/* Placar, página 1: "O caminho de cada equipe". Em cada célula, a letra em
   cima e o saldo do bimestre embaixo (lado a lado, seis bimestres não cabiam
   em 1024×768); o total em destaque. Usa a margem lateral, como o resultado. */
.tela-placar-final[data-pagina="caminho"] { margin-left: calc(var(--lateral) * -.6); margin-right: calc(var(--lateral) * -.6); }
.caminho { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; }
.tabela-caminho { border-collapse: collapse; width: 100%; line-height: 1.1; }
.tabela-caminho th, .tabela-caminho td { padding: .15em .25em; border-bottom: 1px solid var(--linha); text-align: center; vertical-align: middle; }
.tabela-caminho thead th { color: var(--texto-2); font-weight: 600; }
.tabela-caminho .caminho-equipe { text-align: left; }
.tabela-caminho .caminho-equipe .equipe { white-space: normal; }
.caminho-letra { display: block; }
.caminho-saldo { display: block; white-space: nowrap; }
.caminho-saldo[data-sinal="negativo"], .caminho-total[data-sinal="negativo"] { color: var(--negativo); }
.caminho-saldo[data-sinal="positivo"], .caminho-total[data-sinal="positivo"] { color: var(--positivo); }
td.caminho-total { font-weight: 800; white-space: nowrap; text-align: right; }
.tela-placar-final[data-aperto] .tabela-caminho { line-height: 1; }
.tela-placar-final[data-aperto] .tabela-caminho th, .tela-placar-final[data-aperto] .tabela-caminho td { padding-top: 0; padding-bottom: 0; }

/* Placar, página 3: as combinações possíveis, só a melhor e a pior (D-079:
   sem a lista do lugar de cada equipe), maiores e no meio da tela. */
.combinacoes-extremos {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: safe center;
  gap: calc(var(--espaco) * 1.5); font-size: calc(var(--corpo) * 1.3); line-height: 1.2; color: var(--texto-2);
}
.combinacoes-extremos b { color: var(--texto); }
.combinacao-letras { letter-spacing: .06em; white-space: nowrap; }
/* Pedido do Kleber de 06/10 à noite (print 2): o subtítulo diz o que são as
   duas linhas, e a frase da família vai embaixo das letras, inteira em uma
   linha (depois de um "·", ela quebrava no meio do valor em 1024×768). A
   frase em .8em de 1,3 × corpo dá 29 px no menor tamanho, acima dos 28 px. */
.combinacoes-subtitulo { font-size: .85em; font-weight: 650; color: var(--texto); text-wrap: balance; }
.combinacao-familia { display: block; font-size: .8em; }

/* ---------- O modo individual (decisão do Kleber de 13/10 à noite) ----------
 * Cada aluno joga sozinho, em uma vaga própria, e o telão mostra só o resumo da
 * turma, em contagens e distribuições, sem nenhuma vaga nem nome (telao.js,
 * individual()). Nada abaixo do corpo (28 px em 1024×768); os e2e
 * (telao-individual e individual-online) provam 20 pessoas em 1024×768 e
 * 1280×720, com a faixa de entrada, e em 1920×1080. */

.lobby-cheia { color: var(--texto-2); font-weight: 600; }

/* A decisão: no lugar das células das equipes, "14 de 20 já escolheram"
   (online) ou as letras da escolha da turma (offline), no pé da tela. */
.turma-andamento { margin-top: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .3em; font-weight: 600; line-height: 1.15; }
.turma-numero { font-size: calc(var(--corpo) * 1.6); font-weight: 800; line-height: 1; }
.turma-decisao { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; }
.turma-decisao-rotulo { font-weight: 700; }
.turma-decisao .botoes-opcao { gap: .5em; }
.turma-decisao .botoes-opcao .botao-letra { min-width: 2.2em; padding: 0 .3em; }

/* O resultado da turma (D-084): o evento do mês e uma linha por opção, em
   cartões como as faixas das equipes do resultado simples, com as colunas
   alinhadas entre as opções (subgrid): a letra, o rótulo, quantas pessoas, o
   saldo do bimestre e a família de quem a escolheu (com "em média" embaixo,
   quando os valores variam). Os nomes das duas colunas de dinheiro vão uma vez
   só, em cima; repetidos em cada cartão, cinco opções não cabiam em 1024×768
   com a faixa de entrada. Embaixo da opção, na largura do rótulo para a
   direita, o que veio de antes, em letra secundária.
   O "em média" vai ao lado do valor quando cabe (1280×720 e 1920×1080) e
   embaixo dele quando não cabe (1024×768, onde o rótulo já quebra em duas
   linhas): em uma linha só para ele, cinco opções com consequência não cabiam
   em 1280×720 com a faixa de entrada. */
.turma-opcoes {
  display: grid; grid-template-columns: auto minmax(8em, 1fr) auto auto auto;
  column-gap: .5em; row-gap: calc(var(--espaco) * .45);
}
.turma-colunas, .turma-opcao { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.turma-colunas { padding: 0 .35em; border: 2px solid transparent; border-block: 0; color: var(--texto-2); line-height: 1.1; }
.turma-coluna-saldo, .turma-coluna-familia { grid-row: 1; text-align: right; white-space: nowrap; }
.turma-coluna-saldo { grid-column: 4; }
.turma-coluna-familia { grid-column: 5; }
.turma-opcao {
  align-items: center; row-gap: 0;
  /* A folga de cima e de baixo nunca some: com a entrelinha 1 (os últimos
     apertos), o texto passa uns 0,17em da linha, e sem a folga ele encostava
     na borda do cartão. */
  padding: .15em .35em;
  border: 2px solid var(--linha); border-radius: var(--raio);
  background: var(--superficie);
  line-height: 1.12;
}
.turma-opcao > .letra { grid-column: 1; grid-row: 1; height: 1.2em; min-width: 1.2em; }
.turma-opcao-rotulo { grid-column: 2; grid-row: 1; font-weight: 600; min-width: 0; }
.turma-n { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; color: var(--texto-2); }
.turma-n b { color: var(--texto); font-weight: 800; }
.turma-valor { grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: .3em; text-align: right; }
.turma-valor > * { white-space: nowrap; }
/* Em 1024×768 o rótulo já quebra em duas linhas: o "em média" vai sempre
   embaixo do valor, nas duas colunas (com a quebra decidida pela largura de
   cada coluna, uma ficava ao lado e a outra embaixo). */
@media (max-width: 1100px) {
  .turma-valor { flex-direction: column; align-items: flex-end; }
}
.turma-saldo-opcao { grid-column: 4; }
.turma-familia-opcao { grid-column: 5; }
.turma-saldo-valor { font-weight: 800; }
.turma-saldo-valor[data-sinal="negativo"] { color: var(--negativo); }
.turma-saldo-valor[data-sinal="positivo"] { color: var(--positivo); }
.turma-familia-valor b { font-weight: 800; }
.turma-familia-valor[data-situacao="devendo"] b { color: var(--negativo); }
.turma-media { color: var(--texto-2); font-size: max(28px, .8em); }
.turma-consequencias { grid-column: 2 / -1; grid-row: 2; font-size: max(28px, .85em); color: var(--texto-2); line-height: 1.12; }
.turma-consequencias b { display: inline-block; font-weight: 800; color: var(--texto); }
.turma-opcao-zero { color: var(--texto-2); background: transparent; border-style: dashed; }
.turma-opcao-zero .letra { border-color: var(--texto-2); }
.turma-opcao-zero .turma-n b { color: var(--texto-2); }
.turma-sem-voto { color: var(--texto-2); line-height: 1.15; }
/* O aperto (telao.js, telaResultadoDaTurma): os degraus 2 a 4 são os do
   resultado simples (o título menor; sem a frase do evento; sem o evento); o
   quinto deixa a entrelinha mínima e os cartões sem folga. */
.tela-rodada-resultado[data-aperto] .turma-opcoes { row-gap: 3px; }
.tela-rodada-resultado[data-aperto] :is(.turma-opcao, .turma-colunas, .turma-sem-voto, .turma-consequencias) { line-height: 1.05; }
.tela-rodada-resultado:is([data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) :is(.turma-opcao, .turma-consequencias, .turma-colunas) { line-height: 1; }
.tela-rodada-resultado:is([data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) .turma-opcao > .letra { height: 1em; min-width: 1em; }
.tela-rodada-resultado:is([data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) .turma-opcoes { row-gap: 2px; }
.tela-rodada-resultado:is([data-aperto="6"], [data-aperto="7"]) .turma-motivo-resto { display: none; }
.tela-rodada-resultado:is([data-aperto="5"], [data-aperto="6"], [data-aperto="7"]) .turma-opcao { border-width: 1px; }
/* O sétimo: sem o kicker, o título no tamanho do corpo e os nomes das colunas
   ("saldo do bimestre", "a família") na linha do título, à direita (os
   títulos dos bimestres terminam antes das colunas, medido em 1024×768). */
.tela-rodada-resultado[data-aperto="7"] .kicker { display: none; }
.tela-rodada-resultado[data-aperto="7"] h1 { font-size: var(--corpo); }
.tela-rodada-resultado[data-aperto="7"] .turma-colunas { margin-top: calc(var(--corpo) * -1.08 - var(--espaco) * .5); }

/* "Quanto sobrou, ou ficou devendo" da turma: a frase com os números em
   destaque (verde para quem terminou com dinheiro sobrando, vermelho para quem
   terminou devendo; a palavra diz o mesmo que a cor), uma coluna por aluno,
   sem nome, e a legenda. */
h1.fim-turma-frase { font-size: calc(var(--titulo) * .82); line-height: 1.15; }
.fim-turma-numero { font-size: 1.35em; font-weight: 850; }
.fim-turma-positivos, .fim-turma-valor[data-situacao="tem"] { color: var(--positivo); }
.fim-turma-negativos, .fim-turma-valor[data-situacao="devendo"] { color: var(--negativo); }
.grafico-turma { min-height: 120px; }
.coluna-sobrou { fill: var(--positivo); }
.coluna-devendo { fill: var(--negativo); }
.linha-media { stroke: var(--texto); }
.fim-turma-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .2em 1.4em; color: var(--texto-2); line-height: 1.2; }
.fim-turma-legenda b { color: var(--texto); }
.fim-turma-chave, .fim-turma-media { white-space: nowrap; }
.amostra-coluna { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -.05em; }
.amostra-sobrou { background: var(--positivo); }
.amostra-devendo { background: var(--negativo); }
.amostra-media { display: inline-block; width: 1.6em; border-top: 3px dashed var(--texto); vertical-align: middle; }
.fim-turma-caminho { font-size: calc(var(--corpo) * 1.3); color: var(--texto-2); }
.fim-turma-caminho b { color: var(--texto); letter-spacing: .06em; }
.fim-turma-resumo { margin-top: auto; }
/* "A turma" (sem celulares): uma frase e uma linha, maiores, no meio da tela. */
.tela.fim-turma-so { justify-content: center; gap: calc(var(--espaco) * 2); }
.fim-turma-so h1.fim-turma-frase { font-size: calc(var(--titulo) * 1.05); }
.fim-turma-so .fim-turma-caminho { font-size: calc(var(--corpo) * 1.6); }

/* "As escolhas da turma": bimestre × opção, com quantas pessoas (a mais
   escolhida em negrito); "O caminho da turma", sem celulares. */
.turma-escolhas { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; }
.tabela-turma { border-collapse: collapse; width: 100%; font-size: calc(var(--corpo) * 1.1); line-height: 1.15; }
.tabela-turma th, .tabela-turma td { padding: .2em .4em; border-bottom: 1px solid var(--linha); text-align: center; vertical-align: middle; }
.tabela-turma thead th { color: var(--texto-2); font-weight: 700; }
.tabela-turma .turma-bimestre { text-align: left; white-space: nowrap; }
.turma-celula-zero { color: var(--texto-2); }
.turma-celula-maior { font-weight: 800; }
.turma-nota { color: var(--texto-2); }
.tabela-caminho-turma .turma-escolha { text-align: left; }
.tabela-caminho-turma .turma-escolha .letra { margin-right: .2em; }
.tabela-caminho-turma .turma-saldo { text-align: right; white-space: nowrap; font-weight: 700; }
.turma-saldo[data-sinal="negativo"] { color: var(--negativo); }
.turma-saldo[data-sinal="positivo"] { color: var(--positivo); }
.turma-quem { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .ponteiro-animado { transform: translateX(var(--alvo)); }
  .revelar-apos { opacity: 1; }
}