/* TV: 1920 × 1080 (docs/design/telas/tv).
   Cada tamanho aqui sai do protótipo aprovado, e test/design.test.js confere
   os dois lados: onde existe token, o token; onde não existe, o protótipo. Se
   o desenho for revisado, o teste falha e obriga a atualizar os dois.

   Nada de cor literal e nada menor que 30px NA TELA — a tela é lida do
   fundo do salão. Com a margem de segurança (js/tv/escala.js: o palco cabe
   nos 90% do meio), tudo encolhe a 90%; por isso nada aqui é desenhado com
   menos de 34px, que encolhidos continuam 30. Onde o protótipo tinha 30 ou
   32, vale 34 (primeira noite, 29/09). O que não cabe sai da tela, não
   encolhe. */

.tv {
  overflow: hidden;
  background: var(--ground);
}

/* O palco ocupa a janela; a tela dentro dele é sempre 1920 × 1080, ancorada
   no centro da janela, e recebe do js `translate(-50%, -50%) scale()` (ver
   js/tv/escala.js). O que sobra fica preto, como faixa, e nada rola.

   Não centralizar pelo grid do palco: numa janela menor que a tela, a trilha
   do grid mede 1920 e começa na borda esquerda, e o scale encolhia a tela em
   torno do centro da trilha — ela aparecia deslocada e cortada fora do
   1920 × 1080. */
.palco {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--ground);
}

.tela {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr) 440px;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: var(--ground);
}

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

.cabecalho {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr) 440px;
  align-items: center;
  padding: 20px 32px;
  background: var(--surface);
  border-bottom: 6px solid var(--orange);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* O logo da Orange é para fundo escuro: direto sobre o ground, sem placa. */
.logo {
  width: 88px;
  height: 78px;
  object-fit: contain;
}

.marca-nome {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  white-space: nowrap;
}

.nivel-area {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

/* "Nível 6": o número em 76px, o rótulo dentro dele em 36px. No intervalo
   vira "Volta no nível 11", que é mais comprido e cabe em 64px. */
.nivel {
  font-size: 76px;
  line-height: 76px;
  font-weight: 600;
  color: var(--orange);
  white-space: nowrap;
}

.nivel-rotulo {
  font-family: var(--font-sans);
  font-size: 36px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tela[data-intervalo='sim'] .nivel {
  font-size: 64px;
  line-height: 70px;
}

.tela[data-intervalo='sim'] .nivel-rotulo {
  font-size: 34px;
}

.torneio {
  justify-self: end;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------- colunas das laterais */

/* As duas laterais são painéis, não cartões soltos: um fundo só, e os grupos
   distribuídos na altura. */
.coluna {
  background: var(--surface-sunken);
  padding: 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

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

.grupo-separado {
  padding-top: var(--space-4);
  border-top: 2px solid var(--surface-raised);
}

.rotulo-tv {
  font-size: 34px;
  line-height: 36px;
  font-weight: var(--text-label-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Rótulo sem caixa alta: é frase, não etiqueta. */
.nota {
  font-size: 34px;
  line-height: 36px;
  font-weight: var(--text-label-weight);
  color: var(--ink-muted);
  white-space: nowrap;
}

.titulo-lateral {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
  white-space: nowrap;
}

.valor-tv {
  font-size: 64px;
  line-height: 68px;
  font-weight: 600;
  white-space: nowrap;
}

/* O médio em big blinds, e no intervalo o "na volta" na mesma linha. */
.valor-apoio {
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  color: var(--orange);
  white-space: nowrap;
}

.rotulo-entradas {
  padding-bottom: 6px;
}

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

.entradas li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
  border-top: 2px solid var(--surface-raised);
}

.entradas .acao {
  font-size: 34px;
  line-height: 36px;
  font-weight: var(--text-label-weight);
  color: var(--ink-muted);
  white-space: nowrap;
}

.entradas .quantidade {
  font-size: 56px;
  line-height: 60px;
  font-weight: 600;
}

/* ----------------------------------------------------------- premiação */

.cresce {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 34px;
  line-height: 36px;
  font-weight: var(--text-label-weight);
  color: var(--warn);
  white-space: nowrap;
}

/* A coluna da premiação: o total no topo e os jogadores no rodapé ficam
   fixos; a janela do meio ocupa o que sobra, e a lista dentro dela rola
   sozinha quando não cabe (js/tv/rolagem.js). */
.coluna-premiacao {
  justify-content: flex-start;
  gap: var(--space-4);
}

.premiacao-janela {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.premiacao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.premiacao li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-top: 2px solid var(--surface-raised);
}

.premiacao .posicao {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 54px;
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* O nome de quem fechou a posição (exceção da §11.2, só aqui). Vai numa
   segunda linha da mesma entrada, alinhado à direita com o valor: o número é
   o que o salão procura, o nome é a confirmação. */
.premiacao li[data-premiado='sim'] {
  flex-wrap: wrap;
}

.premiacao .premiado {
  flex-basis: 100%;
  text-align: right;
  font-size: 34px;
  line-height: 38px;
  color: var(--ink-muted);
  /* Nome comprido não empurra a coluna: corta com reticências. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O primeiro lugar é o número que todo mundo procura — e com a lista
   rolando, ele não é necessariamente a primeira linha à vista. */
.premiacao li[data-primeiro='sim'] .posicao {
  color: var(--orange);
}

.premiacao .valor {
  font-size: 56px;
  line-height: 60px;
  font-weight: 600;
  white-space: nowrap;
}

.premiacao .nao-monetaria {
  font-size: 34px;
  line-height: 36px;
  font-weight: var(--text-label-weight);
  color: var(--ink-muted);
  /* Prêmio em texto comprido ("Vaga Claudemir") encurta com reticências: ele
     ocupa o que sobra ao lado da posição, e não empurra o nome para fora. */
  flex: 1 1 0;
  min-width: 0;
  margin-left: 16px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jogadores {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}

.jogadores-rotulo {
  display: flex;
  flex-direction: column;
}

.jogadores .titulo-lateral,
.rebuy .titulo-lateral {
  font-size: 40px;
  line-height: 46px;
}

.jogadores-numero {
  font-size: 88px;
  line-height: 92px;
  font-weight: 600;
  white-space: nowrap;
}

.jogadores-total {
  font-size: 56px;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------- centro */

.centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 48px;
}

.tela[data-intervalo='sim'] .centro {
  gap: 14px;
  padding: 20px 48px;
}

.relogio {
  font-size: var(--text-clock-tv-size);
  line-height: var(--text-clock-tv-line);
  font-weight: var(--text-clock-tv-weight);
  letter-spacing: -0.04em;
}

.tela[data-intervalo='sim'] .relogio {
  font-size: var(--text-clock-tv-intervalo-size);
  line-height: var(--text-clock-tv-intervalo-line);
  font-weight: var(--text-clock-tv-intervalo-weight);
}

/* Relógio pausado é número apagado de propósito: quem precisa ler é a faixa de
   aviso, que está acesa em cima dele. */
.tela[data-pausado='sim'] .relogio {
  color: var(--ink-disabled);
}

/* A barra do nível é segmentada, não contínua: 24 pedaços que acendem. */
.progresso {
  display: flex;
  gap: 8px;
  width: 760px;
  height: 20px;
}

.progresso span {
  flex: 1;
  border-radius: 4px;
  background: var(--surface-raised);
}

.progresso span[data-cheio='sim'] {
  background: var(--orange);
}

.blinds {
  font-size: var(--text-blinds-tv-size);
  line-height: var(--text-blinds-tv-line);
  font-weight: var(--text-blinds-tv-weight);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.blinds .barra {
  color: var(--orange);
}

.ante {
  font-size: 64px;
  line-height: 70px;
  font-weight: 600;
  white-space: nowrap;
}

.ante-rotulo {
  color: var(--ink-muted);
}

.proximo {
  font-size: 44px;
  line-height: 50px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
}

.proximo-rotulo {
  font-family: var(--font-sans);
  font-size: 34px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.titulo-intervalo {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 100px;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
}

/* Cartões do intervalo: add-on e super, com fichas e preço. */
.cartoes {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-top: 14px;
}

.cartao {
  background: var(--orange);
  color: var(--on-orange);
  border-radius: 18px;
  padding: 18px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cartao-nome {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
  white-space: nowrap;
}

.cartao-fichas {
  font-size: 88px;
  line-height: 92px;
  font-weight: 600;
}

.cartao-preco {
  font-size: 48px;
  line-height: 54px;
  font-weight: 600;
}

/* ------------------------------------------------------- sobreposições */

/* A pausa é aviso no alto do centro, com o ícone do protótipo. */
.aviso-pausa {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--warn);
  color: var(--ground);
  border-radius: 16px;
  padding: 14px 36px;
}

.aviso-pausa-texto {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 76px;
  font-weight: 700;
  white-space: nowrap;
}

.tela[data-intervalo='sim'] .aviso-pausa {
  padding: 12px 32px;
}

.tela[data-intervalo='sim'] .aviso-pausa-texto {
  font-size: 64px;
  line-height: 68px;
}

.sem-conexao {
  position: absolute;
  right: var(--space-10);
  bottom: var(--space-6);
  background: var(--warn);
  color: var(--ground);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: 34px;
  line-height: 36px;
  font-weight: var(--text-label-weight);
}

/* Enquanto não há desenho aprovado para não iniciado e encerrado: logo, nome
   do torneio e o estado em texto grande, dentro do sistema. */
.estado-simples {
  position: absolute;
  inset: 0;
  background: var(--ground);
  display: grid;
  place-items: center;
  /* O texto e o "Ativar som" juntos, no meio: sem isto as linhas da grade
     dividem a altura inteira, e o botão ia parar no pé da tela. */
  align-content: center;
  gap: 48px;
}

/* O logo grande acima do estado: é o que a TV mostra antes da noite. */
.estado-simples-logo {
  width: 420px;
  height: auto;
  justify-self: center;
}

.estado-simples-logo[hidden] {
  display: none;
}

.estado-simples-texto {
  font-size: 120px;
  line-height: 132px;
  color: var(--ink-muted);
}

/* Troca de dealer: "Troca de dealer" grande no centro (o título do
   intervalo), acima da contagem de 2 minutos — que fica do tamanho do
   relógio do intervalo, para os dois caberem (teste do Edu, 29/09). */
.tela[data-troca='sim'] .relogio {
  font-size: var(--text-clock-tv-intervalo-size);
  line-height: var(--text-clock-tv-intervalo-line);
  font-weight: var(--text-clock-tv-intervalo-weight);
}

/* ------------------------------------------------ celular na vertical */

/* Deitada, a TV cabe no celular pela escala. Em pé, a 16:9 viraria uma
   faixa ilegível no meio da tela: em vez de tentar caber, pede para girar.
   Só com ponteiro de toque — uma janela de notebook estreita e alta continua
   escalando, com faixa em cima e embaixo. */
.gire {
  display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
  .palco {
    display: none;
  }

  .gire {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 0 var(--space-6);
    text-align: center;
    background: var(--ground);
    color: var(--ink);
    font-size: 40px;
  }
}

/* ----------------------------------------------------------- tela cheia */

/* Discreto: no canto, fora do palco escalado, meio apagado até o mouse ou o
   foco chegar nele. É ferramenta de quem liga a TV, não conteúdo da noite. */
.botao-tela-cheia {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-muted);
  opacity: 0.4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.botao-tela-cheia:hover,
.botao-tela-cheia:focus-visible {
  opacity: 1;
}

/* ------------------------------------------------------------------- som */

/* "Ativar som": no pé da coluna da esquerda, no fluxo — ocupa o próprio
   lugar, sem cobrir nada, e se lê de longe (revisão da nuvem no #11). Some
   depois de tocado (js/tv/som.js). */
.botao-som {
  align-self: stretch;
  min-height: 72px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 34px;
  font-weight: var(--text-label-weight);
  cursor: pointer;
}

/* Dentro da tela "Ainda não começou", logo abaixo do texto, no centro, com
   a largura do próprio conteúdo. Não cresce com a camada: o `stretch` do
   botão da coluna esticava este até o pé da tela, numa coluna de 178 × 363
   que empurrava o texto para cima (revisão da nuvem no #11). */
.estado-simples .botao-som {
  align-self: center;
  justify-self: center;
  height: 56px;
  min-height: 56px;
  padding: 0 48px;
}