/* Celular do operador (docs/design/telas/celular/1). O mesmo layout roda no
   notebook do clube: largura máxima de celular, centralizado — não existe
   versão desktop (§12.1).

   Os tamanhos saem do protótipo aprovado e são conferidos por
   test/design.test.js. Onde o protótipo e um token divergirem, vale o
   protótipo e a divergência fica apontada aqui. */

.operador {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
}

/* -------------------------------------------------------------- cabeçalho */

.topo {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ground);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-bottom: 1px solid var(--surface-raised);
}

.topo-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* DIVERGÊNCIA APONTADA: o protótipo escreve o nome do clube em 20px, e o
   token `title` está em 22px. Vale o protótipo. */
.topo-clube {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 22px;
  font-weight: var(--text-title-weight);
}

.topo-torneio {
  color: var(--ink-muted);
  font-size: var(--text-caption-size);
}

/* O clube e o torneio cedem para a TV e a conexão: uma linha cada, com
   reticências. Em 360, "Torneio de Aniversário do Clube" virava duas linhas
   e o cabeçalho crescia em todas as telas (varredura da nuvem, #10). */
.topo-marca-texto {
  min-width: 0;
}

.topo-clube,
.topo-torneio {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Estado da conexão sempre visível (§13.2). */
/* O atalho da TV mora ao lado do indicador de conexão, no alto. Fica
   discreto: é atalho, não ação da noite. */
.topo-acoes {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}

.botao-tv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  text-decoration: none;
  /* Alvo de toque confortável num celular segurado em pé no salão. */
  min-height: 32px;
}

.botao-tv:active {
  background: var(--surface-raised);
}

/* Na tela de abrir noite, o ranking num canto, sem disputar com os formatos. */
.abertura-ranking {
  align-self: flex-start;
}

.conexao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption-size);
  /* Padrão é "ainda não falou com o servidor". Verde EXIGE estado positivo,
     posto pelo JS na primeira resposta boa: assim o HTML não consegue mais
     nascer verde sem confirmação nenhuma, que era o caso. */
  color: var(--ink-muted);
}

.conexao[data-ok='sim'] {
  color: var(--ok);
}

.conexao[data-ok='nao'] {
  color: var(--warn);
}

.conexao::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: currentColor;
}

.relogio-linha {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.relogio-nivel {
  font-size: var(--text-label-size);
  color: var(--ink-muted);
  white-space: nowrap;
}

.relogio-tempo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 52px;
  line-height: 52px;
  font-weight: 600;
  white-space: nowrap;
}

.topo[data-pausado='sim'] .relogio-tempo {
  color: var(--ink-muted);
}

.blinds-linha {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 24px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* O próximo nível é apoio: fica no tamanho de legenda. */
.blinds-proximo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
}

/* Quem decide o tamanho dos quadros é o conteúdo, não terços fixos: cada
   um não encolhe abaixo do que o rótulo e o valor pedem numa linha. Cabendo
   em terços, ficam iguais; o pote que pede mais ("R$ 100.040" em 360) fica
   mais largo; e só quando nem assim cabem eles descem para a linha de baixo.
   Nunca o rótulo quebrando e o valor na borda (varredura da nuvem, #10). */
.numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* No painel do relógio (tela 9), sobre o fundo da folha. */
.numero-bloco {
  flex-grow: 1;
  flex-basis: 0;
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
}

.numero-rotulo {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  white-space: nowrap;
}

.numero-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-money-size);
  font-weight: var(--text-money-weight);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ abas */

/* Três recortes num controle segmentado: um fundo só, e a escolhida acesa. */
.recortes {
  padding: 0 var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Quatro abas em 360 px (a Janta é a quarta, spec-orange §3): o número vai
   EMBAIXO do rótulo. Lado a lado, "Eliminados 12" mede 92 px na Plex 600 a
   14 px, e cada aba tem 75 — medido pelas métricas da fonte servida. */
.abas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  background: var(--surface);
  padding: 4px;
  border-radius: var(--radius-md);
}

.aba {
  height: 48px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--text-label-size);
  line-height: 18px;
  font-weight: var(--text-label-weight);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.aba-contagem {
  font-size: var(--text-caption-size);
  line-height: 16px;
  white-space: nowrap;
}

.aba[aria-selected='true'] {
  background: var(--surface-raised);
  color: var(--ink);
}

/* Busca dentro do recorte aberto. No "todos" ela vai ao servidor; nos outros
   dois filtra a lista que já está na tela. */
.busca {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--tap-min);
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-muted);
}

.busca-entrada {
  flex-grow: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-body-size);
}

/* ----------------------------------------------------------------- lista */

.lista {
  list-style: none;
  margin: 0;
  padding: 4px var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Na lista principal — as três abas —, só a lista de nomes rola (ensaio,
   28/09). A tela tem a altura da janela e não rola; o cabeçalho, as abas, a
   busca e o rodapé ficam onde estão, e a lista ocupa o que sobra, com
   rolagem própria. Com muitos jogadores, as abas nunca saem de vista.

   `100dvh` segue a barra do navegador do celular, que some e aparece; o
   `100vh` antes é a reserva de quem não conhece `dvh`. As outras telas
   (premiação, saída, encerramento, ajuste, acordo) continuam rolando
   inteiras. */
.operador[data-modo='lista'],
.operador[data-modo='inscricao'] {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.operador[data-modo='lista'] .lista,
.operador[data-modo='inscricao'] .lista,
.operador[data-modo='lista'] .fim-da-noite {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.linha {
  background: var(--surface);
  border-radius: var(--radius-md);
  min-height: 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--space-2) var(--space-2) var(--space-2) 14px;
}

.linha-toque {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
  min-height: 48px;
  justify-content: center;
}

/* Nome longo corta com reticências numa linha só, em toda lista e todo
   cartão (revisão do #10). */
.linha-nome {
  font-size: var(--text-body-size);
  line-height: 22px;
  font-weight: var(--text-label-weight);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O resumo embaixo do nome é uma linha só: quando é longo, ele corta com
   reticências — e o valor da pessoa, ao lado, nunca quebra (revisão do #10,
   caso 4). */
.linha-resumo {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.linha-saldo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body-size);
  font-weight: var(--text-money-weight);
  white-space: nowrap;
}

.linha-saldo[data-sentido='jogador recebe'] {
  color: var(--ok);
}

/* Quitado: "pagou R$ 90 ✓" / "recebeu R$ 350 ✓", marcado e não zerado. */
.linha-saldo[data-sentido='ok'] {
  color: var(--ok);
}

/* Torneio terminou: sobrou um, e o que falta é acertar e encerrar. O aviso é
   da lista da noite: por cima da tela de encerrar (e das outras telas
   cheias) ele repetia o que a tela já é (varredura da nuvem, #10). Pelo
   modo, no CSS — as telas cheias saem do desenho antes de a lista ser
   desenhada, e o JS da lista nem chega a rodar. */
.operador:not([data-modo='lista']) .aviso-fim {
  display: none;
}

.aviso-fim {
  margin: var(--space-2) var(--space-4) 0;
  padding: 8px 10px;
  border-left: 3px solid var(--ok);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-caption-size);
  color: var(--ok);
}

.linha-eliminada .linha-nome {
  color: var(--ink-muted);
}

.linha-posicao {
  font-family: var(--font-mono);
  color: var(--ink-muted);
  font-size: var(--text-caption-size);
  white-space: nowrap;
}

.botao-x {
  width: var(--tap-min);
  height: var(--tap-min);
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--red-text);
  display: grid;
  place-items: center;
}

/* Na tela de inscrição, a linha termina em "Inscrever" — ou na etiqueta de
   quem já está na noite. */
.linha-inscrever {
  height: 44px;
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
}

.etiqueta-jogando {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: var(--text-caption-size);
  color: var(--ok);
}

.etiqueta {
  font-size: var(--text-caption-size);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  background: var(--surface-raised);
  color: var(--ink-muted);
}

.vazio {
  color: var(--ink-muted);
  text-align: center;
  padding: var(--space-6);
}

/* --------------------------------------------------------------- rodapé */

/* Todo rodapé é `sticky` no FIM do fluxo, nunca `fixed` por cima dele.
   Fixo, ele cobria a última linha: cada tela reservava o espaço com um
   `padding-bottom` chutado (96, 104, 120, 140px), e bastava o rodapé ganhar
   um aviso ou um segundo botão para o chute ficar curto — no ajuste de
   formato e no encerramento ele cobria a última linha (ensaio, 27/09).
   Sticky, ele OCUPA o próprio lugar no fim da rolagem e continua preso no
   fundo enquanto a tela rola. `margin-top: auto` o empurra para baixo quando
   a tela é curta. test/fidelidade-estrutura.test.js confere. */
.rodape {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-4);
  background: var(--ground);
  border-top: 1px solid var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.rodape .botao-principal {
  width: 100%;
  min-height: 56px;
}

/* ---------------------------------------------------------------- login */

/* Tela 0 (telas/celular/0-login): ocupa a tela toda, logo e nome no meio, os
   campos embaixo — a mão do operador alcança sem esticar. */
.login {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--ground);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A composição do protótipo 0, com as medidas dele: 390 de largura e 844 de
   altura, no máximo. No celular ela ocupa a tela inteira, como o desenho; no
   notebook, é uma caixa no meio da janela — antes o formulário ia colado no
   fundo de uma janela alta, longe do logo (ensaio, 28/09). */
.login-caixa {
  width: 100%;
  max-width: 390px;
  height: 100%;
  max-height: 844px;
  box-sizing: border-box;
  padding: 0 var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
}

.login-marca {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* O logo da Orange é para fundo escuro (docs/marca/orange-logo-escuro.svg):
   vai direto sobre o ground, sem placa. */
.login-logo {
  width: 168px;
  height: auto;
}

.login-titulo {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 36px;
  font-weight: var(--text-title-weight);
}

.login-subtitulo {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo-rotulo {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--ink-muted);
}

.campo-caixa {
  display: flex;
  align-items: center;
  height: 56px;
  padding-left: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-sizing: border-box;
}

/* Erro marca os dois campos, porque a mensagem não diz qual é o errado. */
.login[data-erro='sim'] .campo-caixa {
  border-color: var(--warn);
}

.campo-entrada {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
}

.botao-olho {
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.botao-entrar {
  height: 56px;
  margin-top: var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--orange);
  color: var(--on-orange);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-entrar[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.login-nota {
  text-align: center;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* Aviso, não alarme: borda warn à esquerda. Vermelho no sistema é dinheiro e
   eliminação — erro de digitação não é nenhum dos dois. */
.alerta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border-left: 4px solid var(--warn);
  color: var(--warn);
}

/* A caixa de erro da tela fica acima de tudo, inclusive do cabeçalho fixo:
   ela só aparece quando algo quebrou, e aí é o que importa ver. */
.alerta-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 8px;
}

.alerta .icone-pequeno {
  flex-shrink: 0;
  margin-top: 2px;
}

.alerta-texto {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}

/* --------------------------------------------------- folha de inscrição */

/* Tela 2 (telas/celular/2-inscricao): o cabeçalho da noite NÃO sai —
   decisão do Edu no primeiro uso real: relógio e blinds são a informação da
   noite e não podem sumir de aba nenhuma.

   E a aba Todos não ganha respiro próprio em cima. Havia aqui um padding de
   16px nos recortes, sobra de quando o cabeçalho sumia nesta aba: com o
   cabeçalho de volta, ele só empurrava a aba Todos 16px para baixo, e a
   tela pulava ao trocar de aba (ensaio, 28/09). As três abas começam na
   mesma altura; test/fidelidade-estrutura.test.js confere. */

/* O véu escurece a lista, mas ela continua visível: a folha é sobre o que
   estava na tela, não outra tela. */
.veu {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: rgb(0 0 0 / 62%);
}

.folha {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  z-index: 9;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  background: var(--surface-raised);
  border-radius: 16px 16px 0 0;
  padding: 10px var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 92vh;
  overflow-y: auto;
}

.folha-alca {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--line-strong);
  align-self: center;
}

.folha-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.folha-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 28px;
  font-weight: var(--text-title-weight);
}

.folha-subtitulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-fechar {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartoes-acao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

/* Nada vaza da borda do cartão (revisão do #10: a conta da compra dupla
   quebrava em três linhas, o título subia por cima da borda e o "bônus"
   escapava). O cartão mostra uma linha de nome e uma de preço; o nome corta
   com reticências, e o que ainda sobrar fica dentro da borda. */
.cartao-acao {
  position: relative;
  min-width: 0;
  overflow: hidden;
  height: 72px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 0 14px;
}

/* Escolhido ganha borda vermelha e o visto no canto. */
.cartao-acao[aria-pressed='true'] {
  border: 2px solid var(--orange);
  background: var(--surface-raised);
}

.cartao-acao-visto {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--orange);
  color: var(--on-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartao-acao-nome {
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-acao-detalhe {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  white-space: nowrap;
}

.chaves {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}

.chave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  gap: 12px;
}

.chave-texto {
  display: flex;
  flex-direction: column;
}

.chave-titulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--text-label-weight);
}

.chave-nota {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* Chave de bônus: fichas, nunca dinheiro. */
/* A chave escapa da altura mínima de toque que o base.css põe em todo
   button: com ela, o fundo virava um círculo de 52 × 48 e a bolinha ficava
   presa no alto (revisão da nuvem no #11). A área de toque fica por fora: a
   linha inteira (`.chave`, um <label>) tem 52 px e aciona a chave. */
.chave-botao {
  position: relative;
  width: 52px;
  height: 32px;
  min-height: 0;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-sizing: border-box;
}

.chave-botao[aria-checked='true'] {
  background: var(--orange);
}

.chave-botao::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--ink-muted);
}

.chave-botao[aria-checked='true']::after {
  left: auto;
  right: 3px;
  background: var(--ink);
}

.valor-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  min-height: var(--tap-min);
}

.valor-titulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--text-label-weight);
}

.valor-nota {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.valor-direita {
  display: flex;
  align-items: center;
  gap: 12px;
}

.valor-numero {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: var(--text-label-weight);
  white-space: nowrap;
}

/* A conta da compra dupla, numa linha só dela embaixo do título e do valor:
   "R$ 40 + R$ 60 · 50K + 10K de bônus". A largura inteira é dela, e o texto
   ao lado do valor não é mais apertado (revisão do #10, caso 3). */
.valor-conta {
  flex-basis: 100%;
  text-align: right;
  padding-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Valor da regra ao lado do alterado: a alteração fica visível na hora, não só
   na auditoria. */
.valor-regra {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Valor alterado fica marcado: a auditoria vai mostrar, e a tela mostra antes. */
.valor-numero[data-alterado='sim'] {
  color: var(--warn);
}

.valor-alterar {
  height: 44px;
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: var(--text-label-size);
  text-decoration: underline;
}

.resumo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
}

.resumo-bloco {
  display: flex;
  flex-direction: column;
}

.resumo-bloco:last-child {
  align-items: flex-end;
}

.resumo-rotulo {
  font-size: var(--text-caption-size);
  color: var(--ink-muted);
}

.resumo-numero {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: var(--text-label-weight);
  white-space: nowrap;
}

.botao-registrar {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--orange);
  color: var(--on-orange);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-registrar[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ------------------------------------------------------- folha do X */

.relogio-linha {
  justify-content: space-between;
  align-items: flex-end;
}

.relogio-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Pausar é gesto de dedo grande: o relógio para no meio da correria. */
.botao-relogio {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.opcoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Voltar para o jogo é o caminho comum: vermelho, largo, com o preço à
   direita. "Fica eliminado" é o outro caminho, e não compete em cor. */
.opcao {
  width: 100%;
  min-height: 64px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--orange);
  color: var(--on-orange);
  font-family: inherit;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-4);
}

.opcao[data-volta='nao'] {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.opcao-rotulo {
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.opcao-detalhe {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-label-size);
  white-space: nowrap;
}

.opcao[data-volta='nao'] .opcao-detalhe {
  color: var(--ink-muted);
}

.folha-nota {
  margin: 0;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-cancelar {
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

/* ------------------------------------------------------ tela do intervalo */

.operador[data-modo='intervalo'] .recortes,
.operador[data-modo='intervalo'] .lista {
  display: none;
}

.intervalo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--space-4) var(--space-4);
}

.intervalo-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.intervalo-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--text-title-weight);
}

/* No intervalo o cabeçalho é o do protótipo 4: um relógio só. */
.operador[data-modo='intervalo'] .relogio-linha,
.operador[data-modo='intervalo'] .blinds-linha {
  display: none;
}

.intervalo-relogio {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--text-label-weight);
  white-space: nowrap;
}

.contadores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.contador {
  background: var(--surface-raised);
  border-radius: 10px;
  padding: var(--space-2) 10px;
  display: flex;
  flex-direction: column;
}

.contador-rotulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.contador-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  line-height: 22px;
  font-weight: var(--text-label-weight);
  white-space: nowrap;
}

/* "Faltam" é o número que trava a noite: amarelo enquanto houver pendente. */
.contador[data-alerta='sim'] .contador-rotulo,
.contador[data-alerta='sim'] .contador-valor {
  color: var(--warn);
}

.botao-chegou {
  width: 100%;
  height: var(--tap-min);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

.grupos {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.grupo-titulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cartao-jogador {
  background: var(--surface);
  border: 1px solid var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Quem ainda não decidiu fica destacado — é quem segura o travamento. */
.cartao-jogador[data-pendente='sim'] {
  border-color: var(--warn);
}

.cartao-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Com o X de quem está jogando (primeira noite, 29/09), o saldo fica à
   direita, antes dele. */
.cartao-topo .cartao-saldo {
  margin-left: auto;
}

/* O nome e o estado cedem para o saldo: o nome corta com reticências. São
   um botão (sessão de testes do Edu, 01/10): o toque abre a folha do
   jogador, e o alvo vai do começo do cartão até o saldo. */
.cartao-topo-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  text-align: left;
}

.cartao-nome-jogador {
  max-width: 100%;
  font-size: var(--text-body-size);
  line-height: 22px;
  font-weight: var(--text-label-weight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cartao-estado {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-label-weight);
  color: var(--ok);
}

.cartao-jogador[data-pendente='sim'] .cartao-estado {
  color: var(--warn);
}

.cartao-saldo {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-label-size);
  color: var(--ink-muted);
  white-space: nowrap;
}

.escolhas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.escolha {
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Depois de decidido, o que não foi escolhido apaga — e SÓ ele. Sem o
   :not, esta regra (três classes e atributos) pesava mais que a da
   escolhida (duas) e apagava o add-on feito: só o "Nenhum" aparecia
   preenchido, porque a regra dele também tem três e vem depois (ensaio,
   27/09). CLAUDE.md §34. */
.cartao-jogador[data-pendente='nao'] .escolha:not([aria-pressed='true']) {
  border-color: var(--surface-raised);
  background: var(--surface);
  color: var(--ink-muted);
}

.escolha[aria-pressed='true'] {
  border: 0;
  background: var(--orange);
  color: var(--on-orange);
}

/* "Nenhum" escolhido não é ação: fica claro, não vermelho. */
.escolha[aria-pressed='true'][data-caminho='decisoes'] {
  background: var(--ink);
  color: var(--ground);
}

.escolha {
  min-width: 0;
  padding: 0 4px;
}

/* Nada vaza pela borda do botão, e o preço nunca corta (revisão do #10):
   quem cede é o rótulo, que corta com reticências — ele é curto de
   propósito ("Super", não "Super add-on"). O preço é dois valores, "R$ 100:
   125K", cada um inteiro; quando o par não cabe numa linha (360px, cinco
   dígitos), ele desce em duas no ":", dentro dos 56px do botão. A recusa,
   que é frase, corta como o rótulo. */
.escolha-rotulo,
.escolha-detalhe[data-tipo='aviso'] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.escolha-rotulo {
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

.escolha-detalhe {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  color: var(--ink-muted);
}

.escolha-detalhe .valor-na-frase {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.escolha[aria-pressed='true'] .escolha-detalhe {
  color: inherit;
}

.rodape-travar {
  background: var(--ground);
  border-top: 1px solid var(--surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.aviso-travar {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--warn);
  text-align: center;
}

.botao-travar {
  width: 100%;
  height: 56px;
  border: 1px solid var(--surface-raised);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-travar[data-pronto='sim'] {
  border: 0;
  background: var(--orange);
  color: var(--on-orange);
}

/* ---------------------------------------------------- abrir noite (tela 5) */

.operador[data-modo='ajuste'] .topo,
.operador[data-modo='ajuste'] .recortes,
.operador[data-modo='ajuste'] .lista,
.operador[data-modo='ajuste'] .rodape:not(#ajuste-rodape),
.operador[data-modo='ajuste'] .abertura,
.operador[data-modo='abertura'] .topo,
.operador[data-modo='abertura'] .recortes,
.operador[data-modo='abertura'] .lista,
.operador[data-modo='abertura'] .rodape,
.operador[data-modo='premiacao'] .topo,
.operador[data-modo='premiacao'] .recortes,
.operador[data-modo='premiacao'] .lista,
.operador[data-modo='premiacao'] .rodape:not(#premiacao-rodape),
.operador[data-modo='premiacao'] .abertura,
.operador[data-modo='saida'] .topo,
.operador[data-modo='saida'] .recortes,
.operador[data-modo='saida'] .lista,
.operador[data-modo='saida'] .rodape:not(#saida-rodape),
.operador[data-modo='encerrar'] .topo,
.operador[data-modo='encerrar'] .recortes,
.operador[data-modo='encerrar'] .lista,
.operador[data-modo='encerrar'] .rodape:not(#encerrar-rodape),
.operador[data-modo='acordo'] .topo,
.operador[data-modo='acordo'] .recortes,
.operador[data-modo='acordo'] .lista,
.operador[data-modo='acordo'] .rodape:not(#acordo-rodape) {
  display: none;
}

.abertura {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-4) var(--space-4) var(--space-8);
}

/* O logo no topo da abertura, alinhado com o título. */
.abertura-logo {
  width: 112px;
  height: auto;
  margin-bottom: var(--space-2);
}

.abertura-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 32px;
  font-weight: var(--text-title-weight);
}

.abertura-subtitulo {
  font-size: var(--text-label-size);
  line-height: 20px;
  color: var(--ink-muted);
}

.abertura-secao {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  font-weight: var(--text-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cartao-formato {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 14px 12px 14px var(--space-4);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
}

/* Formato que não abre fica apagado e diz o motivo, em vez de levar 409. */
.cartao-formato[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.cartao-formato-texto {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cartao-formato-nome {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: var(--text-title-weight);
}

.cartao-formato-entrada {
  font-size: 15px;
  line-height: 20px;
}

.cartao-formato-nota {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

/* ------------------------------------------- antes de começar (tela 8) */

/* Relógio parado é número apagado: ele ainda não conta nada. */
.topo[data-estado='nao_iniciado'] .relogio-tempo {
  color: var(--ink-disabled);
}

.botao-comecar {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--orange);
  color: var(--on-orange);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.nota-antes {
  margin: 0;
  font-size: var(--text-label-size);
  line-height: 20px;
  color: var(--ink-muted);
}

/* ------------------------------------------------- relógio (tela 9) */

.botao-pausa-grande {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--orange);
  color: var(--on-orange);
  font-family: inherit;
  font-size: 19px;
  font-weight: var(--text-label-weight);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.botao-pausa-grande[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.corrigir-titulo {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: var(--text-title-weight);
}

.passo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.passo-rotulo {
  font-size: var(--text-label-size);
  line-height: 20px;
  color: var(--ink-muted);
}

.passo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Alvo grande: o operador mexe nisso com a mesa esperando. */
.passo-botao {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 26px;
  font-weight: var(--text-label-weight);
}

.passo-botao[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.passo-centro {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.passo-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  line-height: 28px;
  font-weight: var(--text-label-weight);
  white-space: nowrap;
}

.passo-nota {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
  white-space: nowrap;
}

.botao-secundario-largo {
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-body-size);
  font-weight: var(--text-label-weight);
}

.botao-secundario-largo[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.acrescimo-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--line-strong);
  min-height: var(--tap-min);
}

.acrescimo-titulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: var(--text-label-weight);
}

/* ------------------------------------- conferir e ajustar (telas 6 e 7) */

.ajuste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--space-4);
}

.ajuste-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 28px;
  font-weight: var(--text-title-weight);
}

.ajuste-subtitulo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.ajuste-secao {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.ajuste-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap-min);
}

.ajuste-rotulo {
  font-size: 15px;
  line-height: 20px;
}

/* Valor alterado em warn, com o do formato embaixo — o mesmo padrão do
   "Alterar" da inscrição. */
.ajuste-do-formato {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--warn);
}

.ajuste-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-body-size);
  color: var(--ink);
  white-space: nowrap;
}

.ajuste-valor[data-alterado='sim'] {
  color: var(--warn);
}

/* O rodapé do ajuste é um `.rodape` como os outros (sticky no fim do
   fluxo); aqui só o respiro de cima, do protótipo 6. */
.ajuste-rodape {
  padding-top: 12px;
}

.ajuste-resumo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.botao-abrir-noite {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--orange);
  color: var(--on-orange);
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--text-label-weight);
}

.botao-abrir-noite[disabled] {
  background: var(--surface);
  color: var(--ink-muted);
  cursor: not-allowed;
}

.botao-salvar-formato {
  height: var(--tap-min);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--text-label-weight);
}

/* ------------------------------------------------- cadastro de jogador */

/* Sem protótipo: composto com os componentes já aprovados. O botão fica na
   faixa dos recortes, à vista o tempo todo na aba Todos — descobrir que dá
   para cadastrar não pode depender de fazer uma busca que falha. */
/* Medidas do protótipo telas/celular/10-todos: secundário, 52px. */
.botao-cadastrar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin-top: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.botao-cadastrar:active {
  background: var(--surface);
}

/* No cadastro vazio ele é o principal da tela: vermelho, 56px, sem borda
   (telas/celular/11). É o único caminho dali. */
.botao-cadastrar-primeiro {
  height: 56px;
  border: 0;
  background: var(--orange);
  color: var(--on-orange);
  font-size: 17px;
}

.botao-cadastrar-primeiro:active {
  background: var(--orange);
}

/* Cadastro vazio: o aviso ocupa o lugar da lista e o botão vem junto, em
   destaque. É o primeiro estado de toda instalação nova. */
.vazio-cadastro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  text-align: center;
}

.vazio-cadastro .vazio-titulo {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ink);
}

.vazio-cadastro .vazio-nota {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}

.cadastro-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

/* O pé de toda folha que pergunta: um botão debaixo do outro. */
.folha-rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A frase inteira da confirmação do intervalo: é ela que o operador lê
   antes de mexer no pote. */
.confirmar-frase {
  margin: 0;
  font-size: 17px;
  line-height: 24px;
  color: var(--ink);
}

/* Um debaixo do outro: são dois caminhos diferentes, não confirmar/cancelar.
   Lado a lado, na correria, "só cadastrar" viraria o botão de escapar. */
.cadastro-form .folha-rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* A segunda escolha da folha de inscrição, só no intervalo. */
.grupo-intervalo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
}

.grupo-rotulo {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--ink-muted);
}

/* ------------------------------------------------------- tela 13: premiação */

/* O cabeçalho das telas cheias (13): a seta de voltar e o título. */
.tela-topo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;
  padding: 12px var(--space-4);
  background: var(--surface);
}

.tela-topo-texto {
  display: flex;
  flex-direction: column;
}

.botao-voltar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Medidas do protótipo telas/celular/13-premiacao. Os tamanhos estão lá em
   pixel; aqui viram os mesmos números, e o teste de fidelidade confere. */
.premiacao-tela {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.premiacao-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.premiacao-subtitulo,
.premiacao-nota {
  font-size: 13px;
  color: var(--ink-muted);
}

/* O rótulo de seção é o mesmo em toda a tela: versalete espaçado. */
.secao-rotulo {
  margin-top: var(--space-4);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.composicao,
.composicao-totais,
.posicoes-premiadas {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.composicao-linha,
.total-linha,
.posicao-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 14px;
  border-top: 1px solid var(--surface-raised);
}

.composicao-linha:first-child,
.total-linha:first-child,
.posicao-linha:first-child {
  border-top: 0;
}

.composicao-acao {
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
}

.composicao-entradas {
  font-size: 13px;
  color: var(--ink-muted);
}

.composicao-total {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.total-rotulo {
  font-size: 15px;
  color: var(--ink);
}

/* Bruto e "para os jogadores" são os dois números que o operador compara com
   a comanda: ficam maiores que as linhas de cima. */
.total-linha[data-peso='forte'] .total-rotulo {
  font-weight: 600;
}

.total-valor {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.total-linha[data-tom='liquido'] .total-valor {
  color: var(--ok);
}

/* O rake sai do pote: vermelho de texto, como no protótipo 13. */
.total-linha[data-tom='rake'] .total-valor {
  color: var(--red-text);
}

/* Os dois cartões de lugares, lado a lado: a comparação é o ponto da tela. */
.cartoes-lugares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.cartao-lugares {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  font-family: inherit;
}

.cartao-lugares {
  position: relative;
}

.cartao-lugares[aria-pressed='true'] {
  border-color: var(--orange);
}

/* O ✓ do escolhido, no canto de cima (protótipo 13). */
.cartao-lugares-visto {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--orange);
}

.cartao-lugares-titulo {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.cartao-lugares-nota {
  font-size: 13px;
  color: var(--ink-muted);
}

.cartao-lugares-linha {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink);
}

.cartao-lugares-valor {
  white-space: nowrap;
}

.posicao-ordinal {
  font-size: 15px;
  color: var(--ink);
}

.posicao-direita {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

.posicao-valor {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Valor digitado diferente da sugestão, em warn — como no protótipo. */
.posicao-valor[data-alterado='sim'] {
  color: var(--warn);
}

.posicao-percentual {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* A sugestão só aparece onde o operador alterou, e em warn: ela é o que o
   sistema diria, ao lado do que ele decidiu. */
.posicao-sugestao {
  font-size: 13px;
  color: var(--warn);
}

.posicao-alterar {
  font-size: 14px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  font-family: inherit;
}

.botao-sem-dinheiro {
  align-self: flex-start;
  padding: 8px 0;
  font-size: 14px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  font-family: inherit;
}

/* O total embaixo das posições: verde quando bate com o líquido, âmbar com
   a diferença e o rake quando não (ensaio, 27/09). */
.premiacao-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border-left: 4px solid var(--ok);
}

.premiacao-total[data-bate='nao'] {
  border-left-color: var(--warn);
}

.premiacao-total-rotulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.premiacao-total-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
}

.premiacao-total[data-bate='nao'] .premiacao-total-valor,
.premiacao-total-nota {
  color: var(--warn);
}

.premiacao-total-nota {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 20px;
}

/* Mystery Bounty: os envelopes dentro ou fora do acordo. */
.acordo-envelopes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.acordo-envelopes[hidden] {
  display: none;
}

.acordo-envelopes-rotulo {
  font-size: 15px;
  line-height: 20px;
}

/* Mystery Bounty: o envelope na folha do X — qual saiu e quem levou. */
.envelope-x {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.envelope-x[hidden] {
  display: none;
}

/* Mystery Bounty: "R$ 1.234 para os envelopes", embaixo do total travado. */
.premiacao-envelopes {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* O seletor de "outro número de lugares": números grandes, de dedo. */
.lugares-opcoes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}

.lugares-opcao {
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.lugares-opcao[aria-pressed='true'] {
  border: 2px solid var(--orange);
}

/* O aviso de premiação travada, no cabeçalho: a partir daqui a noite não
   recebe mais nada, e o operador precisa saber antes de tocar. */
.aviso-travada {
  margin: var(--space-2) 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: var(--text-caption-size);
  color: var(--warn);
}

/* É um botão (noite de 06/10): o toque abre a premiação travada, com o
   Reorganizar em destaque. A seta à direita diz que abre. */
button.aviso-travada {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  font-family: inherit;
}

button.aviso-travada[hidden] {
  display: none;
}

.aviso-travada-seta {
  font-size: 18px;
  line-height: 1;
}

/* Reorganizar: quantos lugares pagam, com o − e o + dos dois lados. */
.acordo-lugares {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.acordo-lugares-botao {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
}

.acordo-lugares-botao:disabled {
  color: var(--ink-muted);
  border-color: var(--surface-raised);
  background: var(--surface);
}

.acordo-lugares-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.acordo-lugares-rotulo {
  font-size: var(--text-body-size);
  font-weight: 600;
  white-space: nowrap;
}

.acordo-lugares-nota,
.acordo-lugares-motivo {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}

.acordo-lugares-motivo {
  display: block;
  padding: 6px 2px 0;
}

.acordo-lugares-motivo[hidden] {
  display: none;
}

/* A premiação travada, só leitura, no lugar da escolha de antes de travar. */
.premiacao-travada {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.premiacao-travada[hidden] {
  display: none;
}

/* -------------------------------- telas 14, 15 e 16: saída e encerramento */

.saida-tela,
.encerrar-tela {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.saida-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
}

.saida-nome-civil {
  font-size: 14px;
  color: var(--ink-muted);
}

.saida-subtitulo {
  font-size: 15px;
  color: var(--ink-muted);
}

.extrato,
.conferencia,
.classificacao,
.pendencias {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.extrato-linha,
.conferencia-linha,
.classificacao-linha,
.pendencia-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 12px 14px;
  border-top: 1px solid var(--surface-raised);
}

.extrato-linha:first-child,
.conferencia-linha:first-child,
.classificacao-linha:first-child,
.pendencia-linha:first-child {
  border-top: 0;
}

/* A linha nunca é espremida pela caixa: com o nome em duas linhas, a caixa
   encolhia o botão até a altura mínima e ele, que centra o que tem dentro,
   jogava a primeira linha para cima da borda (varredura da nuvem, #10). */
.classificacao-linha,
.pendencia-linha {
  flex-shrink: 0;
}

/* O nome corta com reticências numa linha só, como na lista. */
.classificacao-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.extrato-rotulo,
.conferencia-texto,
.classificacao-nome {
  font-size: 15px;
  color: var(--ink);
}

.extrato-valor,
.classificacao-premio {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

/* Linha de subtotal e de prêmio: separadas do resto por peso, não por cor. */
.extrato-linha[data-tipo='subtotal'] .extrato-rotulo,
.extrato-linha[data-tipo='subtotal'] .extrato-valor {
  font-weight: 600;
}

.extrato-linha[data-tipo='premio'] .extrato-valor {
  color: var(--ok);
}

/* Valor cobrado diferente da regra: marcado na hora de conferir com o papel,
   não só na auditoria. */
.extrato-linha[data-alterado='sim'] .extrato-valor {
  color: var(--warn);
}

/* O saldo é o número da tela: quem paga a quem vai em palavra, porque
   "−R$ 350" na correria se lê como R$ 350. */
.saldo-caixa {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px var(--space-2);
  margin-top: var(--space-2);
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.saldo-rotulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.saldo-valor {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.saldo-sentido {
  grid-column: 1;
  font-size: 13px;
  color: var(--ink-muted);
}

/* O jogador recebendo é o caso que o operador não pode ler errado: em ok, não
   em vermelho — vermelho é o que o jogador deve (ensaio, 27/09). */
.saldo-caixa[data-sentido='jogador recebe'] .saldo-valor {
  color: var(--ok);
}

.conferencia-estado {
  font-size: 14px;
  color: var(--ok);
  white-space: nowrap;
}

.conferencia-linha[data-bate='nao'] .conferencia-estado {
  color: var(--warn);
}

/* A posição e o nome lado a lado, com espaço entre os dois ("1º Josefina",
   não "1ºJosefina"); o nome cede para o prêmio, com reticências. */
.classificacao-esquerda {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.classificacao-posicao {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-muted);
  min-width: 34px;
}

.pendencia-valor {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.pendencia-linha[data-sentido='jogador recebe'] .pendencia-valor {
  color: var(--ok);
}

.pendencia-sentido {
  font-size: 13px;
  color: var(--ink-muted);
}

/* ----------------------------------- telas 17, 18 e 19: folha do jogador */

/* Medidas dos protótipos 17 e 18: o extrato em linhas com fio em cima, o
   saldo fechando a conta numa linha, os gestos um por linha, e o desfazer
   discreto no fim.

   O fio entre as linhas do protótipo não é token: sai da mistura
   dos dois que existem, 20% do line-strong sobre o fundo da folha. */
#folha-jogador {
  --fio: color-mix(in srgb, var(--line-strong) 20%, var(--surface-raised));
}

.folha-topo-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.folha-extrato {
  display: flex;
  flex-direction: column;
}

#folha-jogador .extrato-linha {
  align-items: baseline;
  min-height: 40px;
  padding: 6px 0 0;
  border-top: 1px solid var(--fio);
}

.extrato-esquerda {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Na tela de saída, as linhas da folha (sessão de testes do Edu, 01/10): o
   valor na altura do rótulo, com a nota embaixo dele. */
#extrato .extrato-linha {
  align-items: baseline;
}

/* Na saída, o histórico do valor fica dentro do cartão do extrato, alinhado
   com o texto das linhas. */
#extrato .extrato-historico {
  padding: 0 14px 10px;
}

#folha-jogador .extrato-rotulo {
  font-size: 15px;
  line-height: 20px;
}

.extrato-nota {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}

#folha-jogador .extrato-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  white-space: nowrap;
}

.saldo-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--fio);
}

.saldo-linha-rotulo {
  font-size: 14px;
  line-height: 20px;
  color: var(--ink-muted);
}

.saldo-linha-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  white-space: nowrap;
}

.saldo-linha[data-sentido='jogador recebe'] .saldo-linha-valor {
  color: var(--ok);
}

.folha-gestos,
.gestos-jogador {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Voltar (rebuy) é o caminho comum: vermelho, com o preço à direita.
   Eliminar é contornado, com a nota em cinza. */
#folha-jogador .cartao-acao {
  height: auto;
  min-height: 60px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-4);
  border: 0;
  background: var(--orange);
  color: var(--on-orange);
}

#folha-jogador .cartao-acao[data-tom='contorno'] {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

#folha-jogador .cartao-acao-nome {
  font-size: 17px;
}

#folha-jogador .cartao-acao-detalhe {
  font-size: 14px;
  color: inherit;
}

#folha-jogador .cartao-acao[data-tom='contorno'] .cartao-acao-detalhe {
  color: var(--ink-muted);
}

.botao-acertar {
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

.botao-acertar[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* O desfazer é linha discreta no fim: o gesto delicado não compete com os
   de cima. */
.desfazer-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--fio);
}

.desfazer-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.desfazer-titulo {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.desfazer-registro {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}

/* O "Desfazer" de cada linha do extrato, ao lado do valor: o mesmo botão do
   fim da folha, menor (retrospectiva, 29/09). O valor nunca quebra; quem
   cede é o texto da esquerda. */
.extrato-direita {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
}

/* Os gestos da linha embaixo do valor: "Alterar valor" ao lado do
   "Desfazer" (teste do Edu, 01/10). Embaixo, e não ao lado do valor: com os
   dois ao lado, o rótulo e a nota ficavam espremidos numa coluna estreita. */
.extrato-gestos {
  display: flex;
  gap: 4px;
}

/* O histórico do valor, uma alteração por linha, embaixo do lançamento:
   "R$ 40 → R$ 0, por Edu, 20h14". Discreto, como a nota; o "Desfazer" da
   alteração mais recente à direita. */
.extrato-historico {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 0 4px;
}

.extrato-historico-texto {
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}

.extrato-desfazer,
.extrato-alterar {
  height: 32px;
  min-height: 32px;
  padding: 0 0 0 8px;
  font-size: 13px;
}

.botao-desfazer {
  height: 44px;
  flex-shrink: 0;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--red-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
}

/* O registro que vai ser desfeito, em destaque: é ele que o operador
   reconhece antes de confirmar. */
.registro-destaque {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--space-2);
  margin: 0 var(--space-4);
  padding: 14px;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.registro-rotulo {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.registro-nota {
  grid-column: 1;
  font-size: 13px;
  color: var(--ink-muted);
}

.registro-valor {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-size: 15px;
  color: var(--ink-muted);
  white-space: nowrap;
}

#folha-desfazer .campo,
#folha-desfazer .premiacao-nota {
  margin: 0 var(--space-4);
}


/* --------------------------------------------------------- o fim da noite */

/* Com o torneio terminado, a lista de pendências é a tela principal: as abas
   e a lista de jogadores saem, e voltam num toque ("Ver todos os
   jogadores"). */
.operador[data-fim='sim'] .recortes,
.operador[data-fim='sim'] .lista {
  display: none;
}

.fim-da-noite {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

/* Quem rola é a tela do fim; as caixas dentro dela têm o próprio tamanho. */
.fim-da-noite > * {
  flex-shrink: 0;
}

/* A linha da pendência é um toque: abre o resumo com o acertar. */
button.pendencia-linha {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-top: 1px solid var(--surface-raised);
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
}

button.pendencia-linha:first-child {
  border-top: 0;
}

.pendencia-esquerda {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Link discreto: caminho de volta, não gesto da noite. */
.botao-link {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
}

.botao-link-topo {
  margin: var(--space-2) var(--space-4) 0;
}

/* ------------------------------------ telas 20 e 21: o acordo da mesa final */

.acordo-tela {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* A nota do total travado: aviso neutro, borda cinza (protótipo 20). */
.acordo-nota {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--space-2);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border-left: 4px solid var(--line-strong);
  font-size: 14px;
  line-height: 20px;
}

.acordo-em-jogo {
  color: var(--ink-muted);
}

.acordo-linhas {
  display: flex;
  flex-direction: column;
}

.acordo-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  border-top: 1px solid var(--surface-raised);
}

/* Quem já está fora: apagado, com cadeado, sem Alterar (regra 2). */
.acordo-linha[data-aberta='nao'] {
  opacity: 0.7;
}

.acordo-esquerda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.acordo-ordinal {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}

.acordo-quem {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ink-muted);
}

.acordo-quem svg {
  flex-shrink: 0;
}

/* "Nome · eliminado" numa linha só: o nome cede com reticências para o
   valor, que nunca quebra (varredura da nuvem, #10). */
.acordo-quem-texto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acordo-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.acordo-linha[data-aberta='nao'] .acordo-valor {
  color: var(--ink-muted);
  padding-right: 8px;
}

/* Mudou: o valor e o "travado R$ X" em warn, como no protótipo 20. */
.acordo-linha[data-mudou='sim'] .acordo-quem,
.acordo-linha[data-mudou='sim'] .acordo-valor {
  color: var(--warn);
}

/* O total: verde quando fecha com o travado; âmbar, com o que falta ou
   passa, quando não (regra 3). */
.acordo-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 14px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border-left: 4px solid var(--ok);
}

.acordo-total[data-fecha='nao'] {
  border-left-color: var(--warn);
}

.acordo-total-texto {
  display: flex;
  flex-direction: column;
}

.acordo-total-rotulo {
  font-size: 15px;
  font-weight: 600;
}

.acordo-total-nota {
  font-size: 13px;
  color: var(--ok);
}

.acordo-total-valor {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  color: var(--ok);
  white-space: nowrap;
}

.acordo-total[data-fecha='nao'] .acordo-total-nota,
.acordo-total[data-fecha='nao'] .acordo-total-valor {
  color: var(--warn);
}

/* "Registrar acordo" desabilitado é cinza, como no protótipo 21 — não o
   vermelho apagado dos outros botões: vermelho, mesmo esmaecido, ainda se
   lê como "toque aqui" (revisão da nuvem no #8). */
#registrar-acordo[disabled] {
  opacity: 1;
  border: 1px solid var(--surface-raised);
  background: var(--surface);
  color: var(--ink-muted);
}

/* O rake do encerramento: "Rake do clube" numa linha, e o valor — "R$ 2.530,
   20% do bruto" — desce para baixo dele, à direita, quando os dois não cabem
   (360, varredura da nuvem no #10). */
#encerrar-rake .total-linha {
  flex-wrap: wrap;
}

#encerrar-rake .total-rotulo {
  white-space: nowrap;
}

#encerrar-rake .total-valor {
  margin-left: auto;
}

/* O nome do torneio embaixo de "Encerrar a noite": uma linha, com
   reticências, como no cabeçalho. */
#encerrar-subtitulo {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------ o cadastro pela folha (0037) */

/* "Editar cadastro" e "Arquivar", discretos, embaixo do nome: são gestos de
   cadastro, não da noite. */
.folha-cadastro-gestos {
  display: flex;
  gap: var(--space-4);
  padding: 0 var(--space-4);
}

/* O fim da aba Todos: o caminho para os arquivados, e o de volta. */
.lista-arquivados {
  display: flex;
  justify-content: center;
  padding: var(--space-2) 0;
}

/* A janta (spec-orange §3; telas/celular/22-janta e 23-lancar-despesa). A
   lista é a mesma linha da lista de gente: descrição, detalhe e valor. */
.linha-resumo[data-sem-dono='sim'] {
  /* Sem quem adiantou impede encerrar: em amarelo, e escrito. */
  color: var(--warn);
}

.janta-total {
  padding: var(--space-2) 14px;
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}

.despesa-campos {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.despesa-pessoas {
  display: flex;
  flex-direction: column;
}

/* Nome longo corta com reticências numa linha só, como em toda lista
   (revisão do #10, CLAUDE.md §37): na linha de quem divide e na caixa de
   quem adiantou. */
.despesa-pessoas .chave-texto {
  flex: 1;
  min-width: 0;
}

.despesa-pessoas .chave-titulo,
#despesa-adiantou {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.despesa-resumo {
  font-size: var(--text-caption-size);
  line-height: var(--text-caption-line);
  color: var(--ink-muted);
}