/* ==========================================================================
   DigPlay — telas de jogo
   ==========================================================================
   Dois mundos no mesmo arquivo, porque compartilham as cores e as formas das
   alternativas: o telão (projetor, lido de longe) e o celular (tocado de perto,
   com uma mão, às vezes no escuro).

   Depende dos tokens de base.css.
   ========================================================================== */

.jogo {
  /*
   * Escala do telão, ajustada pelo anfitrião e guardada no aparelho.
   *
   * `zoom` e não `transform: scale()`: o transform desenha menor mas mantém o
   * layout do tamanho original, então a barra de rolagem — e o corte no
   * projetor — continuariam exatamente onde estavam.
   */
  --escala: 1;
  zoom: var(--escala);

  /*
   * A altura precisa ser dividida pela escala.
   *
   * Dentro de um elemento com zoom, `100dvh` resolve contra a viewport REAL e
   * só depois é multiplicado pelo zoom. Sem a divisão, o telão a 80% cobriria
   * 80% da altura e deixaria uma faixa morta embaixo.
   */
  min-height: calc(100dvh / var(--escala));
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgb(55 180 186 / .10), transparent 60%),
    radial-gradient(900px 600px at 100% 108%, rgb(255 122 69 / .10), transparent 60%),
    var(--ground);
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Barra de topo — comum às duas telas
   -------------------------------------------------------------------------- */

.jogo-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: rgb(11 20 22 / .82);
  backdrop-filter: blur(6px);
  flex-wrap: wrap;
  flex: none;
}

.jogo-marca {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; letter-spacing: -.03em; color: var(--ink);
}
.jogo-marca .bolt {
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--accent); color: #17100C; border-radius: 6px;
  font-size: .8rem; font-weight: 800;
}

.jogo-passo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}

.jogo-pin {
  font-family: var(--mono); font-size: 1rem; font-weight: 700;
  letter-spacing: .22em; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 4px 12px;
}

.sinal {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.sinal::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}
.sinal.caiu { color: var(--crit-fg); }
.sinal.caiu::before { background: var(--crit); animation: pulsa 1.1s infinite; }

@keyframes pulsa { 50% { opacity: .25; } }

/* --------------------------------------------------------------------------
   Palco central
   -------------------------------------------------------------------------- */

.jogo-palco {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 26px 32px;
  min-height: 0;
}

.jogo-pe {
  flex: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: rgb(11 20 22 / .82);
  transition: opacity .35s ease;
}

/* --------------------------------------------------------------------------
   O pé some quando ninguém está mexendo no computador.
   --------------------------------------------------------------------------
   Esta tela vai para o PROJETOR. O pé é o painel de quem opera — "Próximo ›",
   "Pausar", "cabine", ritmo, volume, "Encerrar" — e a plateia inteira estava
   lendo isso embaixo de cada slide. Quebra a ilusão de apresentação, e é o
   tipo de coisa que quem tem pouca prática nem sabe que poderia esconder.

   Some por INATIVIDADE, e não por "a cabine pareou": o telão não sabe se o
   celular ainda está vivo, e esconder para sempre depois de um pareamento
   deixaria sem controle nenhum o anfitrião cujo celular ficou sem bateria.
   Inatividade acerta os dois casos de graça — quem está conduzindo pelo
   celular não toca no mouse, e o primeiro movimento traz tudo de volta.

   `opacity` e não `display: none`: o palco é `flex: 1` e centraliza o
   conteúdo na vertical. Tirar 52px do fluxo a cada 4 segundos faria o slide
   pular para baixo e voltar, o que é pior que o pé aparecendo. Invisível, o
   pé leva junto o fundo e a borda — o que sobra é o fundo da página, igual ao
   do palco.
   -------------------------------------------------------------------------- */

.jogo-pe.pe-oculto {
  opacity: 0;
  /* Sem isto, um clique no escuro acertaria "Encerrar" às cegas. */
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   TELÃO — lobby
   -------------------------------------------------------------------------- */

.lobby {
  display: grid;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}

.lobby-convite {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  text-align: center;
}
.lobby-convite .rotulo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.lobby-endereco {
  font-family: var(--mono); font-size: 1.05rem; color: var(--teal);
  word-break: break-all; margin-bottom: 18px;
}
.pin-gigante {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.qr-caixa {
  background: #fff; border-radius: 12px; padding: 10px;
  display: inline-block; line-height: 0;
}
.qr-caixa svg { width: 100%; height: auto; max-width: 232px; display: block; }

.lobby-jogadores { min-width: 0; }
.lobby-contagem {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px;
}
.lobby-contagem b {
  font-size: clamp(2rem, 5vw, 3.2rem); color: var(--ink);
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}

.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 7px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 100px; font-size: .94rem; color: var(--ink);
  animation: entra .32s ease-out;
}
.ficha .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--panel-3); color: var(--teal);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.ficha.offline { opacity: .45; }
.ficha button {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  padding: 0 0 0 2px; font-size: .9rem; line-height: 1;
}
.ficha button:hover { color: var(--crit-fg); }

@keyframes entra {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   TELÃO — contagem 3·2·1
   -------------------------------------------------------------------------- */

.contagem-palco { text-align: center; }
.contagem-numero {
  font-family: var(--mono);
  font-size: clamp(6rem, 22vw, 15rem);
  font-weight: 700; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
  animation: bate .5s ease-out;
}
@keyframes bate {
  from { transform: scale(1.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.contagem-dica { color: var(--muted); font-size: 1.05rem; margin-top: 8px; }

/* --------------------------------------------------------------------------
   TELÃO — pergunta
   -------------------------------------------------------------------------- */

.enunciado-telao {
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  font-weight: 700; letter-spacing: -.028em; line-height: 1.14;
  color: var(--ink); text-align: center; text-wrap: balance;
  margin: 0;
}

.linha-tempo { display: flex; align-items: center; gap: 22px; justify-content: center; }

.anel { position: relative; width: 96px; height: 96px; flex: none; }
.anel svg { transform: rotate(-90deg); display: block; }
.anel circle { fill: none; stroke-width: 8; }
.anel .trilho { stroke: var(--panel-3); }
.anel .arco { stroke: var(--teal); transition: stroke-dashoffset .2s linear, stroke .3s; }
.anel.urgente .arco { stroke: var(--crit); }
.anel .valor {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 1.7rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.contador-respostas { text-align: center; }
.contador-respostas b {
  display: block; font-size: 2.1rem; color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.contador-respostas span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

.midia-telao {
  display: grid; place-items: center;
  max-height: 42vh; overflow: hidden; border-radius: 14px;
}
.midia-telao img, .midia-telao video {
  max-width: 100%; max-height: 42vh; border-radius: 14px; display: block;
}

.assistindo {
  text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.assistindo .selo {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 100px; padding: 5px 14px;
}
.assistindo video { max-height: 60vh; max-width: 100%; border-radius: 14px; }

/* alternativas no telão */
.alternativas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.alternativas.uma { grid-template-columns: 1fr; }

.alt {
  --cor: var(--panel-3);
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 16px 20px;
  background: var(--panel);
  border: 2px solid var(--line-2);
  border-left: 7px solid var(--cor);
  border-radius: 12px;
  font-size: clamp(1rem, 1.7vw, 1.45rem);
  font-weight: 600; color: var(--ink);
  transition: opacity .3s, border-color .3s, background .3s;
}
.alt.cor-a { --cor: var(--forma-a); }
.alt.cor-b { --cor: var(--forma-b); }
.alt.cor-c { --cor: var(--forma-c); }
.alt.cor-d { --cor: var(--forma-d); }

.alt .simbolo { width: 30px; height: 30px; background: var(--cor); }

/* na revelação: a certa cresce, as erradas somem de cena */
.alt.certa {
  border-color: var(--ok);
  background: var(--ok-wash);
  border-left-color: var(--cor);
}
.alt.errada { opacity: .28; }
.alt .marca-certa { color: var(--ok); font-size: 1.4rem; font-weight: 700; }

.alt .conta {
  font-family: var(--mono); font-size: .95rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   TELÃO — revelação
   -------------------------------------------------------------------------- */

.explicacao-telao {
  background: var(--panel); border-left: 3px solid var(--teal);
  border-radius: var(--r); padding: 14px 18px;
  font-size: 1.05rem; color: var(--body); max-width: 78ch; margin: 0 auto;
}

.resumo-rodada {
  display: flex; gap: 26px; justify-content: center; flex-wrap: wrap;
}
.resumo-rodada div { text-align: center; }
.resumo-rodada b {
  display: block; font-size: 1.7rem; color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.resumo-rodada span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}

/* --------------------------------------------------------------------------
   TELÃO — placar e pódio
   -------------------------------------------------------------------------- */

.placar-lista { display: grid; gap: 8px; max-width: 760px; margin: 0 auto; width: 100%; }
.placar-linha {
  display: grid; grid-template-columns: 46px 34px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px 18px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px;
  animation: entra .4s ease-out backwards;
}
.placar-pos {
  font-family: var(--mono); font-size: 1.15rem; font-weight: 700;
  color: var(--muted); text-align: center; font-variant-numeric: tabular-nums;
}
.placar-linha:nth-child(1) { border-color: var(--accent); }
.placar-linha:nth-child(1) .placar-pos { color: var(--accent); }
.placar-nome { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.placar-pontos {
  font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.placar-linha .avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-3); color: var(--teal);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
}

/* Flex, não grid de três colunas fixas.
   Com grid, uma partida de um ou dois colocados deixava as colunas vazias
   à direita e o pódio inteiro encostado na esquerda — foi exatamente o que
   apareceu na primeira palestra com um jogador só. Em flex, um centraliza,
   dois centralizam em par, três preenchem. */
.podio {
  display: flex; justify-content: center; align-items: flex-end;
  gap: 18px; max-width: 900px; margin: 0 auto; width: 100%;
}
.podio-lugar {
  flex: 1 1 0; min-width: 0; max-width: 300px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 14px 14px 0 0; padding: 22px 16px;
  text-align: center; animation: sobe .6s cubic-bezier(.2,.9,.2,1) backwards;
}
/* --------------------------------------------------------------------------
   O retrato do pódio
   A careta em tamanho grande, com a medalha por cima da quina. Quem não tirou
   foto ocupa exatamente o mesmo círculo, para as colunas não desalinharem.
   -------------------------------------------------------------------------- */

.podio-retrato {
  position: relative;
  width: var(--retrato, 96px);
  height: var(--retrato, 96px);
  margin: 0 auto 4px;
  border-radius: 50%;
  overflow: visible;
}

.podio-retrato img,
.podio-retrato .figura {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: grid; place-items: center;
  object-fit: cover;
  background: var(--panel-3);
  border: 3px solid var(--line-2);
  box-sizing: border-box;
}

.podio-retrato .figura {
  font-size: calc(var(--retrato, 96px) * 0.42);
  color: var(--teal);
  font-family: var(--mono);
  font-weight: 700;
}

.podio-retrato .figura[data-emoji="1"] { font-family: var(--ui); }

.podio-medalha {
  position: absolute;
  right: -4px; bottom: -4px;
  font-size: calc(var(--retrato, 96px) * 0.34);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / .6));
}

.podio-lugar.p1 { --retrato: 128px; }
.podio-lugar.p1 .podio-retrato img { border-color: var(--accent); }
.podio-lugar .nome {
  font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 8px 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podio-lugar .pontos {
  font-family: var(--mono); font-size: 1.35rem; color: var(--teal); font-weight: 700;
}
.podio-lugar.p1 { min-height: 230px; border-color: var(--accent); }
.podio-lugar.p2 { min-height: 180px; }
.podio-lugar.p3 { min-height: 150px; }
.podio-lugar.p1 { order: 2 } .podio-lugar.p2 { order: 1 } .podio-lugar.p3 { order: 3 }

@keyframes sobe {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   CELULAR — estrutura
   -------------------------------------------------------------------------- */

.celular { max-width: 560px; margin: 0 auto; width: 100%; }

.eu-barra {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 14px;
}
.eu-barra .avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-3); color: var(--teal);
  font-family: var(--mono); font-size: 12px; font-weight: 700; flex: none;
}
.eu-barra .nome { font-weight: 600; color: var(--ink); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-barra .pontos {
  font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.eu-barra .pos {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

/* botões de resposta: alvo grande, uma mão, às vezes no escuro */
.botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.botoes.uma-coluna { grid-template-columns: 1fr; }

.botao-resposta {
  --cor: var(--panel-3);
  position: relative;
  min-height: 118px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  background: var(--cor);
  border: 0; border-radius: 16px;
  color: #0B1416;
  font-family: var(--ui); font-size: 1.05rem; font-weight: 700;
  cursor: pointer; padding: 14px;
  transition: transform .08s, filter .15s, opacity .2s;
  -webkit-tap-highlight-color: transparent;
}
.botao-resposta.cor-a { --cor: var(--forma-a); }
.botao-resposta.cor-b { --cor: var(--forma-b); }
.botao-resposta.cor-c { --cor: var(--forma-c); }
.botao-resposta.cor-d { --cor: var(--forma-d); }
.botao-resposta:active { transform: scale(.97); }
.botao-resposta .forma-grande {
  width: 42px; height: 42px; background: rgb(11 20 22 / .78);
}
.botao-resposta .rotulo { color: rgb(11 20 22 / .92); line-height: 1.2; text-align: center; }

.botao-resposta.escolhido { outline: 4px solid var(--ink); outline-offset: -4px; }
.botao-resposta.apagado { opacity: .3; }
.botoes.travado .botao-resposta { pointer-events: none; }

/* aviso central de espera */
.aguarde {
  text-align: center; padding: 34px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.aguarde .titulo {
  font-size: 1.35rem; font-weight: 700; color: var(--ink); text-wrap: balance;
}
.aguarde .sub { color: var(--muted); max-width: 34ch; }
.aguarde .grande {
  font-family: var(--mono); font-size: 3.4rem; font-weight: 700; color: var(--accent);
  line-height: 1; font-variant-numeric: tabular-nums;
}

.pontinhos::after {
  content: "";
  display: inline-block; width: 1.2em; text-align: left;
  animation: pontos 1.2s steps(4, end) infinite;
}
@keyframes pontos {
  0% { content: ""; } 25% { content: "."; }
  50% { content: ".."; } 75% { content: "..."; }
}

/* resultado da resposta */
.resultado {
  border-radius: 18px; padding: 26px 20px; text-align: center;
  border: 1px solid var(--line-2); background: var(--panel);
}
.resultado.acertou { background: var(--ok-wash); border-color: var(--ok); }
.resultado.errou { background: var(--crit-wash); border-color: var(--crit); }
.resultado.parcial { background: var(--warn-wash); border-color: var(--warn); }
.resultado .cara { font-size: 2.6rem; line-height: 1; }
.resultado .frase {
  font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 8px 0 4px;
}
.resultado .ganho {
  font-family: var(--mono); font-size: 2.2rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.resultado .detalhe { color: var(--muted); font-size: .92rem; margin-top: 6px; }
.resultado .bonus {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 100px; padding: 3px 10px;
}

/* controles específicos no celular */
.campo-resposta {
  width: 100%; font-size: 1.3rem; padding: 16px; text-align: center;
  border-radius: 14px; font-weight: 600;
}

.slider-jogador { padding: 8px 4px 0; }
.slider-jogador .valor {
  font-family: var(--mono); font-size: 3rem; font-weight: 700; color: var(--teal);
  text-align: center; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.slider-jogador .unid { font-size: 1.1rem; color: var(--muted); }
.slider-jogador input[type=range] { width: 100%; height: 42px; }
.slider-jogador .extremos {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--faint);
}

.marcador-jogador { position: relative; display: block; border-radius: 14px; overflow: hidden; }
.marcador-jogador img { width: 100%; display: block; }
.marcador-jogador .pino {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 3px solid var(--ink); background: rgb(255 122 69 / .55);
  border-radius: 50%; pointer-events: none;
}
.marcador-jogador .gabarito {
  position: absolute; border: 3px dashed var(--ok); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}

.puzzle-jogador { display: grid; gap: 9px; }
.puzzle-opcao {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px;
  align-items: center; text-align: left;
  padding: 14px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  color: var(--ink); font-size: 1rem; font-weight: 600;
  cursor: pointer; font-family: var(--ui);
  -webkit-tap-highlight-color: transparent;
}
.puzzle-opcao .ordem {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
  background: var(--ground); color: var(--faint);
  font-family: var(--mono); font-size: .9rem; font-weight: 700;
}
.puzzle-opcao.posto { border-color: var(--teal); background: var(--teal-wash); }
.puzzle-opcao.posto .ordem { background: var(--teal); color: #06181A; }
.puzzle-opcao:active { transform: scale(.99); }

/* --------------------------------------------------------------------------
   Formulário de entrada do jogador
   -------------------------------------------------------------------------- */

.entrada { max-width: 400px; margin: 0 auto; width: 100%; }
.entrada h1 { font-size: 1.5rem; text-align: center; margin-bottom: 6px; }
.entrada .sub { text-align: center; color: var(--muted); margin-bottom: 22px; }

.campo-pin {
  width: 100%; text-align: center;
  font-family: var(--mono); font-size: 2.1rem; font-weight: 700;
  letter-spacing: .28em; padding: 16px 10px; border-radius: 14px;
  font-variant-numeric: tabular-nums;
}
.campo-pin::placeholder { letter-spacing: .28em; color: var(--faint); }

.avatares { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.avatares button {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel-2); border: 2px solid var(--line-2);
  font-size: 1.3rem; cursor: pointer; line-height: 1;
  display: grid; place-items: center;
}
.avatares button.atual { border-color: var(--accent); background: var(--accent-wash); }

/* --------------------------------------------------------------------------
   Ajustes de tela
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .lobby { grid-template-columns: 1fr; gap: 22px; }
  .jogo-palco { padding: 18px 16px; }
  /* Empilhado e na ordem natural, 1º em cima. Num telefone não há largura
     para o degrau clássico, e três colunas espremidas ficam piores que uma
     lista honesta. (O grid-template daqui virou letra morta quando .podio
     passou a ser flex.) */
  .podio { flex-direction: column; align-items: stretch; }
  .podio-lugar { border-radius: 14px; min-height: 0 !important; max-width: none; }
  .podio-lugar.p1, .podio-lugar.p2, .podio-lugar.p3 { order: 0; }
  .podio-lugar.p1 { --retrato: 96px; }
}

@media (max-width: 560px) {
  .alternativas { grid-template-columns: 1fr; }
  .placar-linha { grid-template-columns: 36px 28px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px; }
  .jogo-topo { padding: 10px 14px; gap: 10px; }
  .jogo-pe { padding: 10px 14px; }
}

/* Telão de verdade: tela grande e longe. Tudo cresce. */
@media (min-width: 1500px) {
  .jogo-palco { padding: 40px 60px; gap: 30px; }
  .alt { padding: 20px 26px; }
  .placar-lista { max-width: 900px; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha, .placar-linha, .podio-lugar, .contagem-numero { animation: none; }
  /* O pé continua sumindo — o que sai é só a transição. */
  .jogo-pe { transition: none; }
  .barra-preenche { transition: none; }
}

/* --------------------------------------------------------------------------
   Barra de proporção dentro da alternativa (revelação)
   -------------------------------------------------------------------------- */

.alt { position: relative; overflow: hidden; }
.alt > *:not(.alt-fundo) { position: relative; z-index: 1; }

.alt-fundo {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--cor);
  opacity: .20;
  z-index: 0;
  transition: width .7s cubic-bezier(.2, .8, .2, 1);
}

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

/* --------------------------------------------------------------------------
   Avatar: emoji escolhido pelo jogador ou iniciais do apelido
   -------------------------------------------------------------------------- */

.avatar[data-emoji="1"] {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05em;
  letter-spacing: 0;
  background: var(--ground);
}
.eu-barra .avatar[data-emoji="1"],
.placar-linha .avatar[data-emoji="1"] { font-size: 1.15rem; }
.ficha .avatar[data-emoji="1"] { font-size: .95rem; }

/* ==========================================================================
   IDENTIDADE PIXEL — só nas telas de jogo
   ==========================================================================
   Duas fontes com papéis distintos, e a medição que levou a essa divisão:

     Press Start 2P  → 2,5× mais larga que a Archivo, e a altura de maiúscula
                       é igual ao font-size. É a que grita "arcade", mas um
                       enunciado nela quebra em duas linhas no telão. Fica nos
                       NÚMEROS e nos textos curtos: PIN, contagem, cronômetro,
                       pontos, pódio.

     Pixelify Sans   → 1,23× a Archivo, altura de maiúscula praticamente igual.
                       Pixel e legível. Fica no texto de verdade: enunciado,
                       alternativas, apelidos, avisos.

   O editor e o painel continuam em Archivo de propósito: formulário longo e
   tabela densa em fonte pixel seria um retrocesso de usabilidade, não um
   ganho de charme.

   Como diminuir a dose: troque `--pixel` por `--ui` no bloco abaixo.
   Como aumentar: troque os seletores de `--pixel` para `--arcade` e reduza os
   tamanhos em ~35%, porque a Press Start 2P renderiza muito maior no mesmo px.
   ========================================================================== */

.jogo {
  --arcade: "Press Start 2P", "Courier New", monospace;
  --pixel: "Pixelify Sans", "Trebuchet MS", var(--ui);
}

/* corpo das telas de jogo */
.jogo,
.jogo .btn,
.jogo input,
.jogo select,
.jogo textarea { font-family: var(--pixel); }

/* Fonte pixel precisa de mais ar entre linhas: os contornos são quadrados e
   linhas apertadas viram um bloco cinza a cinco metros de distância. */
.jogo { line-height: 1.62; }

/* --------------------------------------------------------------------------
   Arcade: números e textos curtos
   -------------------------------------------------------------------------- */

.jogo-pin,
.pin-gigante,
.contagem-numero,
.anel .valor,
.contador-respostas b,
.lobby-contagem b,
.placar-pos,
.placar-pontos,
.podio-lugar .pontos,
.eu-barra .pontos,
.resultado .ganho,
.slider-jogador .valor,
.aguarde .grande,
.puzzle-opcao .ordem,
.dist-num {
  font-family: var(--arcade);
  letter-spacing: 0;
}

/*
   Tamanhos recalibrados. Na Press Start 2P a altura de maiúscula é igual ao
   font-size, então o mesmo valor em px rende ~1,5× mais alto que na Archivo:
   sem reduzir, o PIN estouraria o cartão e a contagem sairia da tela.
*/
.jogo-pin { font-size: .78rem; letter-spacing: .06em; padding: 6px 12px; }

.pin-gigante {
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  letter-spacing: .04em;
  line-height: 1.25;
}

.contagem-numero { font-size: clamp(3.6rem, 13vw, 8.5rem); line-height: 1.1; }

.anel .valor { font-size: 1.05rem; }
.contador-respostas b { font-size: 1.35rem; line-height: 1.3; }
.lobby-contagem b { font-size: clamp(1.3rem, 3.2vw, 2.1rem); line-height: 1.2; }

.placar-pos { font-size: .8rem; }
.placar-pontos { font-size: .92rem; }
.podio-lugar .pontos { font-size: .95rem; line-height: 1.4; }
.eu-barra .pontos { font-size: .8rem; }

.resultado .ganho { font-size: 1.45rem; line-height: 1.3; }
.slider-jogador .valor { font-size: 1.8rem; line-height: 1.35; }
.aguarde .grande { font-size: 2.4rem; }

.puzzle-opcao .ordem { font-size: .68rem; }
.dist-num { font-size: .68rem; }

/* --------------------------------------------------------------------------
   Pixel: o texto que precisa ser lido
   -------------------------------------------------------------------------- */

.enunciado-telao,
.alt,
.botao-resposta,
.placar-nome,
.podio-lugar .nome,
.aguarde .titulo,
.resultado .frase,
.ficha,
.entrada h1,
.explicacao-telao {
  font-family: var(--pixel);
}

/* A Pixelify Sans é ~23% mais larga: o enunciado desce um pouco para caber
   sem virar três linhas num telão. */
.enunciado-telao {
  font-size: clamp(1.35rem, 3.1vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -.005em;
}

.alt { font-size: clamp(.95rem, 1.5vw, 1.3rem); line-height: 1.35; }
.botao-resposta { font-size: 1rem; }
.placar-nome { font-size: 1.05rem; }
.podio-lugar .nome { font-size: 1.05rem; }
.aguarde .titulo { font-size: 1.25rem; line-height: 1.4; }
.resultado .frase { font-size: 1.3rem; line-height: 1.4; }
.entrada h1 { font-size: 1.3rem; line-height: 1.4; }

/* O PIN digitado no celular também é arcade: é um número, e o alinhamento
   monoespaçado ajuda a conferir dígito por dígito com a sala esperando. */
.campo-pin {
  font-family: var(--arcade);
  font-size: 1.5rem;
  letter-spacing: .14em;
  padding: 20px 10px;
}
.campo-pin::placeholder { letter-spacing: .14em; }

/* Rótulos minúsculos ficam em JetBrains Mono: a Press Start 2P a 10px é
   ilegível, e trocar legibilidade por tema é mau negócio. */
.jogo-passo,
.sinal,
.lobby-convite .rotulo,
.contador-respostas span,
.resumo-rodada span,
.eu-barra .pos,
.midia-meta,
.assistindo .selo,
.resultado .bonus,
.slider-jogador .extremos { font-family: var(--mono); }

/* --------------------------------------------------------------------------
   PIN: tamanho pela largura do CARTÃO, não da janela
   --------------------------------------------------------------------------
   Com vw, o PIN não sabe que o cartão do lobby encolheu: numa janela de 1000px
   o cartão vai a ~300px enquanto o vw ainda pede 44px de fonte, e os seis
   dígitos da Press Start 2P (~6,3em de avanço) estouram a caixa.

   Unidade de container resolve de verdade. O clamp fica como reserva para
   navegador antigo que não conheça cqw.
   -------------------------------------------------------------------------- */

.lobby-convite { container-type: inline-size; }

.pin-gigante { font-size: clamp(1.4rem, 3.4vw, 2.6rem); }

@supports (font-size: 1cqw) {
  .pin-gigante { font-size: min(3rem, 14cqw); }
}

/* --------------------------------------------------------------------------
   Colisão de cascata nos campos de jogo
   --------------------------------------------------------------------------
   Em base.css o seletor é `input[type=text]` (especificidade 0,1,1). Uma
   classe simples como `.campo-pin` é 0,1,0 e PERDE, por mais tarde que venha
   no arquivo. Resultado: o campo do PIN e o campo de resposta ficavam com o
   tamanho genérico de formulário (.95rem) em vez do tamanho de jogo, sem
   nenhum erro aparecer em lugar nenhum.

   Estas regras sobem a especificidade para 0,2,1 e vencem de propósito.
   -------------------------------------------------------------------------- */

.jogo input.campo-pin {
  font-family: var(--arcade);
  font-size: 1.4rem;
  letter-spacing: .14em;
  padding: 20px 10px;
  text-align: center;
}
.jogo input.campo-pin::placeholder { letter-spacing: .14em; }

.jogo input.campo-resposta {
  font-family: var(--pixel);
  font-size: 1.2rem;
  padding: 16px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Avanço automático
   --------------------------------------------------------------------------
   Depois do "começar", a partida anda sozinha. Uma tela que vira sem aviso
   parece defeito — a barra existe para a sala ver o tempo passando.
   -------------------------------------------------------------------------- */

.auto-barra {
  flex: none;
  height: 5px;
  background: var(--panel-2);
  overflow: hidden;
}
.auto-barra > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  transition: width .16s linear;
}
.auto-barra.pausada > span {
  background: var(--warn);
  transition: none;
}

/* aviso de pausa por cima do palco */
.pausa-selo {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 40;
  background: rgb(11 20 22 / .93);
  border: 2px solid var(--warn);
  border-radius: 18px;
  padding: 22px 34px;
  text-align: center;
  box-shadow: var(--sombra-lg);
}
.pausa-selo b {
  display: block;
  font-family: var(--arcade);
  font-size: 1.1rem;
  color: var(--warn);
  line-height: 1.5;
}
.pausa-selo span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* seletor de ritmo no rodapé */
.ritmo-grupo { display: inline-flex; gap: 2px; }
.ritmo-grupo button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--muted);
  cursor: pointer;
}
.ritmo-grupo button:first-child { border-radius: var(--r) 0 0 var(--r); }
.ritmo-grupo button:last-child { border-radius: 0 var(--r) var(--r) 0; }
.ritmo-grupo button.atual { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   PÓDIO — revelação com holofotes
   ==========================================================================
   O pódio é o momento mais visto da partida inteira: é a foto que a sala tira.
   Por isso os três lugares NÃO aparecem juntos — entram do terceiro para o
   primeiro, cada um com sua batida.

   Toda a coreografia é derivada do tempo desde que a partida entrou no estado
   "podio", que vem do servidor. Recarregar o telão no meio da revelação retoma
   do ponto certo em vez de recomeçar.
   ========================================================================== */

/* feixes de luz varrendo o palco durante o rufar */
.holofotes {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.holofotes.aceso { opacity: 1; }

.holofotes span {
  position: absolute;
  top: -30%;
  left: 50%;
  width: 46vw;
  height: 150vh;
  margin-left: -23vw;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom,
    rgb(255 255 255 / .13),
    rgb(255 255 255 / .05) 45%,
    transparent 78%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(2px);
  animation: varrer 4.5s ease-in-out infinite alternate;
}
.holofotes span:nth-child(1) { animation-delay: -0.6s; }
.holofotes span:nth-child(2) {
  animation-delay: -2.4s;
  background: linear-gradient(to bottom, rgb(255 122 69 / .16), transparent 72%);
}
.holofotes span:nth-child(3) {
  animation-delay: -3.9s;
  background: linear-gradient(to bottom, rgb(55 180 186 / .16), transparent 72%);
}

@keyframes varrer {
  from { transform: rotate(-26deg); }
  to { transform: rotate(26deg); }
}

/* o palco do pódio fica acima dos feixes */
.podio-cena { position: relative; z-index: 2; }

.podio-titulo {
  text-align: center;
  font-family: var(--arcade);
  font-size: clamp(1rem, 2.4vw, 1.8rem);
  color: var(--accent);
  line-height: 1.6;
  margin: 0 0 6px;
}
.podio-chamada {
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  min-height: 1.4em;
}

/* --------------------------------------------------------------------------
   Os três lugares
   -------------------------------------------------------------------------- */

.podio-lugar {
  position: relative;
  opacity: 0;
  transform: translateY(46px) scale(.9);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, 1.3, .35, 1);
}
.podio-lugar.revelado { opacity: 1; transform: none; }

/* halo de luz atrás de quem acabou de ser revelado */
.podio-lugar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150%;
  height: 130%;
  margin-left: -75%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgb(255 255 255 / .16), transparent 62%);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
  z-index: -1;
}
.podio-lugar.revelado::before { opacity: 1; }

.podio-lugar.p1.revelado::before {
  background: radial-gradient(ellipse at 50% 70%, rgb(255 122 69 / .34), transparent 64%);
  animation: respirar 2.6s ease-in-out infinite;
}

@keyframes respirar {
  50% { opacity: .55; }
}

/* o campeão ganha um pulso na entrada */
.podio-lugar.p1.revelado { animation: campeao .8s cubic-bezier(.2, 1.4, .3, 1); }

@keyframes campeao {
  0% { transform: translateY(46px) scale(.86); }
  55% { transform: translateY(-10px) scale(1.06); }
  100% { transform: none; }
}

/* placar completo entra por último, discreto */
.podio-resto {
  opacity: 0;
  transition: opacity .9s ease;
}
.podio-resto.revelado { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .holofotes span { animation: none; transform: rotate(0deg); }
  .podio-lugar,
  .podio-lugar.p1.revelado { transition: opacity .3s; animation: none; transform: none; }
  .podio-lugar.p1.revelado::before { animation: none; }
}

/* ==========================================================================
   Página de slides no telão
   Aqui o DigPlay some. A moldura, o rodapé e a marca ficam discretos de
   propósito: a tela é do apresentador, não nossa.
   ========================================================================== */

.pagina-palco {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pagina-imagem {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: var(--sombra-lg);
  background: #fff;
}

/* Enquanto o PDF.js desenha, o lugar da página fica reservado — sem isso o
   palco pula de tamanho a cada virada. */
.pagina-imagem[data-carregando] {
  width: min(90%, 1400px);
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(-45deg,
      var(--panel-2) 0 12px,
      var(--panel-3) 12px 24px);
  box-shadow: none;
}

.pagina-imagem[data-erro]::after {
  content: attr(data-erro);
  position: absolute;
  inset: auto 0 50% 0;
  text-align: center;
  color: var(--crit-fg);
  font-size: 1rem;
}

.pagina-rodape {
  position: absolute;
  right: 14px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: .55;
  font-size: .82rem;
}

.pagina-selo {
  color: var(--body);
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pagina-contador {
  font-family: var(--mono);
  color: var(--muted);
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ==========================================================================
   Transição entre os dois modos da apresentação
   Não é enfeite: é sinalização. A sala inteira precisa mudar de postura ao
   mesmo tempo, e por isso a tela é grande, curta e diz uma coisa só.
   O anfitrião pediu pouca animação — há uma entrada suave e nada além disso.
   ========================================================================== */

.transicao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  text-align: center;
  animation: transicao-entra .24s ease-out both;
}

@keyframes transicao-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

.transicao-titulo {
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.1;
  color: var(--ink);
}

.transicao-sub {
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  color: var(--body);
}

.transicao-detalhe {
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .95rem;
}

/* Para o quiz o acento é quente: é a hora de agir. */
.transicao-para_quiz .transicao-titulo { color: var(--accent); }

/* De volta aos slides o acento esfria: a palavra volta a ser do palestrante. */
.transicao-para_slides .transicao-titulo { color: var(--teal); }

.transicao-entrada {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

.transicao-endereco {
  font-family: var(--mono);
  font-size: clamp(.9rem, 1.6vw, 1.25rem);
  color: var(--body);
}

.transicao-pin {
  /* Mesma fonte dos outros PINs da interface: quem já viu no lobby reconhece. */
  font-family: var(--arcade);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  letter-spacing: .08em;
  color: var(--accent);
}

.transicao-lider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 1.05rem;
  color: var(--body);
}

/* Quiz Final: o mesmo jogo, com o que foi acumulado em jogo. */
.selo-final {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #0B1416;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .72rem;
}

/* O final se distingue pela FONTE, não por mais uma cor: a arcade já é,
   neste projeto, a fonte dos momentos grandes — o PIN, a contagem, o
   pódio. Ela rende muito maior no mesmo px, daí o tamanho menor. */
.transicao-para_quiz_final .transicao-titulo {
  font-family: var(--arcade);
  font-size: clamp(1.25rem, 3.4vw, 2.5rem);
  line-height: 1.35;
  color: var(--accent);
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 55%, transparent);
}

.transicao-para_quiz_final .transicao-sub { color: var(--ink); }

/* --------------------------------------------------------------------------
   Volta de quem perdeu a sessão
   Sem login, a identidade mora no localStorage do aparelho. O código abaixo
   é o que permite voltar quando esse cofre se perde — abrir o link noutro
   navegador, por exemplo. Discreto de propósito: quem nunca precisar dele
   mal repara; quem precisar já o tem na mão.
   -------------------------------------------------------------------------- */

.codigo-volta {
  margin: 10px 0 0;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--faint);
  font-size: .72rem;
  text-align: center;
}

.codigo-volta b {
  font-family: var(--mono);
  letter-spacing: .12em;
  color: var(--body);
}

/* Storage recusado: aqui o aviso precisa ser lido, não ignorado. */
.codigo-volta.alerta {
  border-color: var(--warn);
  background: var(--warn-wash);
  color: var(--ink);
  border-radius: var(--r);
  font-size: .82rem;
}

.codigo-volta.alerta b { color: var(--warn); font-size: 1.05rem; }

.campo-codigo {
  text-align: center;
  letter-spacing: .5em;
  font-family: var(--mono);
}

/* Ficha de quem está com a volta liberada, esperando reconectar. */
.ficha.liberado { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn) inset; }

/* ==========================================================================
   Caretas
   A foto entra no lugar do emoji. O círculo é o mesmo — só o conteúdo muda —
   para o placar não pular de layout entre quem tirou foto e quem não tirou.
   ========================================================================== */

.avatar.com-foto {
  padding: 0;
  overflow: hidden;
  background: var(--panel-3);
}

.avatar.com-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pré-visualização antes de entrar: grande, porque é o momento de decidir
   se a careta ficou boa. */
.foto-previa {
  margin: 14px auto;
  width: min(220px, 62vw);
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 2px solid var(--accent);
  background: var(--panel-2);
}

.foto-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   Controles de ajuste de tela
   Discretos: aparecem no rodapé de todos os estados, mas quem está na plateia
   não deve reparar neles. Quem precisa deles já sabe onde estão.
   -------------------------------------------------------------------------- */

.grupo-tela {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
}

.grupo-tela button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--ui);
  font-size: .78rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.grupo-tela button:hover { background: var(--panel-3); color: var(--ink); }

/* O nível é também o botão de voltar a 100%: o número em mono deixa claro
   que ele é um valor, e não mais um comando. */
#tela-nivel { font-family: var(--mono); min-width: 52px; }

/* "Ajustar" quando já cabia não muda nada; sem isto o clique parece perdido. */
@keyframes tela-piscou {
  0%, 100% { border-color: var(--line); }
  35%      { border-color: var(--ok); }
}

.grupo-tela.piscou { animation: tela-piscou .7s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .grupo-tela.piscou { animation: none; }
}

/* ==========================================================================
   Página da web e vídeo no telão
   ========================================================================== */

/* -------------------------------------------------------- o fechamento --- */

/* O fim sem ranking. Um número grande no meio da tela, como o pódio faz com
   os nomes — a diferença é de QUEM é o número, não de importância. */
.fechamento {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5vh 8vw;
  box-sizing: border-box;
  text-align: center;
}

.fechamento-selo {
  font-family: var(--mono);
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
}

.fechamento-numero {
  margin: 0;
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--accent);
}

.fechamento-numero span {
  font-size: .42em;
  letter-spacing: 0;
  color: var(--muted);
}

.fechamento-legenda {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.9rem);
  color: var(--body);
}

/* A pergunta que mais pegou: é o que serve para retomar o assunto na aula
   seguinte, então ela fica legível e não como nota de pé de página. */
.fechamento-dificil {
  margin-top: 4vh;
  max-width: 46ch;
  padding: 16px 20px;

  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-lg);
}

.fechamento-dificil p {
  margin: 6px 0;
  font-size: clamp(1rem, 2vw, 1.6rem);
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

/* ------------------------------------------------------------- o cartão --- */

/* A virada de assunto. Centralizado e com folga: é a única tela do fluxo cujo
   conteúdo inteiro é uma frase, e ela precisa ser lida do fundo da sala. */
.cartao-palco {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 6vh 8vw;
  box-sizing: border-box;
  text-align: center;
}

/* Teto em vh, não em px: o telão de um auditório e o monitor de uma sala de
   reunião têm a mesma proporção e alturas muito diferentes. */
.cartao-imagem {
  max-height: 42vh;
  max-width: 70%;
  object-fit: contain;
  border-radius: var(--r-lg);
}

.cartao-titulo {
  margin: 0;
  font-size: clamp(2.4rem, 6.5vw, 6rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.cartao-subtitulo {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(1.1rem, 2.4vw, 2.2rem);
  line-height: 1.3;
  color: var(--muted);
  text-wrap: balance;
}

.web-palco,
.video-palco {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.web-quadro {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--sombra-lg);
}

.video-cheio {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 8px;
  background: #000;
  box-shadow: var(--sombra-lg);
}

/* O site recusou ser embutido. A tela diz o motivo em vez de ficar branca. */
.web-bloqueada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  max-width: 46ch;
  margin: auto;
}

.web-dominio {
  font-family: var(--mono);
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  color: var(--ink);
}

/*
   O iframe de pré-carga precisa existir e RENDERIZAR — `display:none` faz o
   navegador adiar o trabalho, que é justamente o que queremos adiantar. Então
   ele fica fora da tela, com tamanho real.
*/
.pre-carga {
  position: fixed;
  left: -20000px;
  top: 0;
  width: 1280px;
  height: 720px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.pre-carga iframe { width: 100%; height: 100%; border: 0; }


/* --------------------------------------------------------------------------
   Caixa do código da cabine
   --------------------------------------------------------------------------
   Aparece sobre o canto do telão quando o anfitrião pede para parear o
   celular. Canto, e não centro: ela entra no meio de uma apresentação, e
   tapar o slide de quem está falando é pior que ficar pequena.
   -------------------------------------------------------------------------- */

.cabine-caixa {
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 60;

  min-width: 260px;
  padding: 16px 18px 14px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  text-align: center;
}

.cabine-caixa-x {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.cabine-caixa-x:hover { color: var(--ink); }

.cabine-caixa-titulo {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* O QR é o caminho principal: fundo branco próprio, porque leitor de câmera
   erra em cima de tema escuro. */
.cabine-caixa-qr {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  margin: 0 auto 10px;
  width: max-content;
  line-height: 0;
}

.cabine-caixa-qr svg { width: 168px; height: auto; display: block; }

/* "ou digite": separa o caminho principal do plano B sem parecer um passo a
   mais. Discreto de propósito — quem já leu o QR não deve nem notar. */
.cabine-caixa-ou {
  margin: 0 0 2px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.cabine-caixa-url { margin: 0; color: var(--teal); font-size: .9rem; }

/* O código é para ser lido de longe, por quem está com o celular na mão no
   fundo da sala. */
.cabine-caixa-codigo {
  margin: 6px 0 8px;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
}

.cabine-caixa-nota { margin: 0; font-size: .8rem; color: var(--muted); }

.cabine-caixa-erro { margin: 0; font-size: .85rem; color: var(--crit-fg); }


/* --------------------------------------------------------------------------
   Sobreposição: os gatilhos da cabine
   --------------------------------------------------------------------------
   Uma camada por cima do palco, disparada do celular do anfitrião a qualquer
   momento. Ela escurece o que está atrás em vez de substituir: a sala tem de
   entender que aquilo é um intervalo no que estava acontecendo, não uma
   mudança de assunto — e o apresentador não perde a referência do slide.
   -------------------------------------------------------------------------- */

.sobreposicao {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;

  /* Fundo escuro e translúcido: o slide continua lá, sugerido. */
  background: rgb(11 20 22 / .88);
}

.sobre-cartao {
  position: relative;
  width: min(900px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 30px 34px 34px;

  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: var(--sombra-lg);
  text-align: center;
}

.sobre-x {
  position: absolute;
  top: 10px; right: 14px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.sobre-x:hover { color: var(--ink); }

.sobre-titulo {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

.sobre-corpo { display: block; }

.sobre-legenda { margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; }

.sobre-legenda strong { color: var(--ink); }

/* Recado: é para ser lido do fundo da sala, então cresce com a tela. */
.sobre-recado {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* Cronômetro: número enorme e monoespaçado, para não pular de largura a cada
   segundo — dígito que dança faz a sala olhar o movimento, não o tempo. */
.sobre-relogio {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(4rem, 16vw, 11rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.sobre-relogio.acabou { color: var(--crit-fg); }

.sobre-pin {
  margin: 6px 0 14px;
  font-family: var(--mono);
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--ink);
}

.sobre-qr svg {
  width: min(240px, 40vw);
  height: auto;
  background: #fff;
  padding: 8px;
  border-radius: 10px;
}

.sobre-sorteado {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--accent);
}

/* ------------------------------------------------------------- a roleta --- */

/* Janela de três linhas com a fita correndo por dentro. A altura é fixa e
   igual a 3x .roleta-nome: é ela que faz a mira cair exatamente no meio. */
.roleta-janela {
  position: relative;
  height: 192px;
  overflow: hidden;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  /* Apaga as pontas: o nome do meio é o único que importa, e a sala segue o
     que está mais nítido sem ninguém precisar explicar. */
  mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
}

.roleta-fita { will-change: transform; }

.roleta-nome {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.9rem;
  font-weight: 700;
  color: var(--body);

  /* Nunca quebra linha: um apelido comprido some nas pontas, e a fita não
     pode mudar de altura no meio do giro — a conta do alvo depende dela. */
  white-space: nowrap;
  overflow: hidden;
}

/* A fita para com o vencedor na linha do meio; a mira é o que diz onde é o
   meio antes de a fita parar. */
.roleta-mira {
  position: absolute;
  left: 0; right: 0;
  top: 64px;
  height: 64px;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  pointer-events: none;
}

/* O vencedor é marcado por classe, e não por `:last-child`: depois dele a
   fita ainda tem duas linhas de enchimento, para a janela não terminar num
   vazio. */
.roleta-fita.parou .roleta-vencedor {
  color: var(--accent);
  font-size: 2.2rem;
}

@media (prefers-reduced-motion: reduce) {
  .roleta-fita { transition: none !important; }
}