/* ============================================================
   Modo grupo
   Tudo aqui é lido do fundo da sala, então nada é pequeno e
   nada é sutil. O estado de cada equipe precisa ser óbvio de
   longe pra quem conduz não perder tempo conferindo.
   ============================================================ */

/* escolha do jeito de jogar, no briefing */

.cartao--modo { margin-top: var(--e6); background: var(--superficie-alta); }

.modos-jogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e3);
}

.modo-jogo {
  display: grid;
  gap: var(--e1);
  align-content: start;
  text-align: left;
  padding: var(--e4);
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.modo-jogo:hover { background: var(--superficie); }

.modo-jogo--escolhido {
  border-color: var(--marca-preto);
  box-shadow: 5px 5px 0 var(--marca-preto);
}

.modo-jogo__nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.modo-jogo--escolhido .modo-jogo__nome { color: var(--acento-texto); }

.modo-jogo__linha { font-size: 0.9rem; color: var(--texto-suave); line-height: 1.45; }

.quantas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  margin-top: var(--e4);
}

.quantas__rotulo {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-right: var(--e2);
}

.quantas__botao {
  min-width: 2.6rem;
  min-height: 2.6rem;
  font-family: var(--fonte-display);
  font-size: 1rem;
  color: var(--texto-suave);
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
  cursor: pointer;
}

.quantas__botao[aria-pressed="true"] {
  background: var(--marca-magenta);
  color: #ffffff;
  border-color: var(--marca-preto);
}

.quantas__dica { margin-top: var(--e3); font-size: 0.86rem; color: var(--texto-suave); }

/* coleta das respostas durante a rodada */

.coleta {
  display: grid;
  gap: var(--e4);
  padding: var(--e5);
  background: var(--superficie-alta);
  border: 2px solid var(--marca-preto);
  border-radius: var(--raio);
}

.coleta[data-fechado="sim"] { display: none; }

.coleta__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
}

.coleta__titulo {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.coleta__relogio {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--texto-suave);
}

.coleta__relogio[data-acabando="sim"] { color: var(--erro); }

.coleta__grade { display: grid; gap: var(--e2); }

.coleta__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
}

.coleta__equipe {
  flex: 1 1 7rem;
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.coleta__opcoes { display: flex; flex-wrap: wrap; gap: var(--e2); }

.coleta__opcao {
  min-width: 2.8rem;
  min-height: 2.8rem;
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  color: var(--texto-suave);
  background: var(--superficie-alta);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}

.coleta__opcao:hover { transform: translateY(-2px); }

/* Registrado, e sem dizer qual é a certa. A cor é neutra de
   propósito: verde aqui entregaria o gabarito antes da hora. */
.coleta__opcao[aria-pressed="true"] {
  background: var(--marca-marinho);
  color: #ffffff;
  border-color: var(--marca-preto);
}

/* placar das equipes */

.cartao--placar { margin-bottom: var(--e6); }

.placar-equipes { display: grid; gap: var(--e2); }

.placar-equipes__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--fundo-2);
  border: 2px solid var(--borda);
  border-radius: var(--raio-p);
}

.placar-equipes__linha[data-lider="sim"] {
  border-color: var(--marca-preto);
  background: var(--ok-veu);
}

.placar-equipes__nome {
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.placar-equipes__pontos {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--acento-texto);
  font-variant-numeric: tabular-nums;
}

.placar-equipes__linha[data-lider="sim"] .placar-equipes__pontos { color: var(--ok); }

@media (max-width: 40rem) {
  .coleta__linha { align-items: flex-start; }
  .coleta__equipe { flex: 1 1 100%; }
}

/* ---------------- sala no celular ---------------- */

.sala-abrir {
  display: grid;
  gap: var(--e2);
  justify-items: start;
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 2px dashed var(--borda);
}

.sala-abrir__rotulo {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* Pra quem não conseguiu apontar a câmera. Vai ser lido em voz
   alta do fundo da sala, então nasce grande e espaçado. */
.sala-abrir__codigo {
  font-family: var(--fonte-display);
  font-size: 2rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
}

.sala-abrir__nota {
  color: var(--texto-suave);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 42ch;
}

.coleta__sala {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--acento);
}

/* Resposta que chegou do celular ganha marca própria: o
   professor precisa saber, de relance, o que a equipe mandou e
   o que ele mesmo registrou na mão. */
.coleta__opcao[data-do-celular="sim"] {
  outline: 2px solid var(--marca-ciano);
  outline-offset: 2px;
}

/* ---------------- a tela do aluno ---------------- */

/* Tem que exigir --ativa. Sem isso o `display: flex` daqui vence
   o `display: none` do base, que carrega antes, e a tela da sala
   passa a aparecer por cima de qualquer jogo no projetor. Foi o
   que aconteceu: a turma via "Qual é a sua equipe?" no meio da
   Frase de parede. */
.tela--sala.tela--ativa { min-height: 70vh; display: flex; align-items: center; }

.conteudo--estreito {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  display: grid;
  gap: var(--e3);
  padding: var(--e5) var(--e4);
}

.titulo--medio { font-size: clamp(1.6rem, 7vw, 2.4rem); }

.sala__aviso {
  padding: var(--e3);
  background: var(--superficie);
  border-left: 4px solid var(--acento);
  line-height: 1.55;
}

.sala__equipes { display: grid; gap: var(--e2); }

.sala__equipe {
  min-height: var(--toque);
  padding: var(--e3) var(--e4);
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
}

.sala__equipe:hover { background: var(--superficie-alta); }

/* Alvo de dedo, e de dedo apressado. Quem está de pé no fundo
   da sala não acerta botão pequeno, e errar aqui custa a
   resposta da equipe inteira. */
.sala__botoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: var(--e3);
}

.sala__botao {
  min-height: 5.5rem;
  font-family: var(--fonte-display);
  font-size: 2.4rem;
  line-height: 1;
  background: var(--superficie);
  color: var(--texto);
  border: 3px solid var(--borda-forte);
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao);
}

.sala__botao:active { background: var(--superficie-alta); }

.sala__botao[aria-pressed="true"] {
  background: var(--acento);
  color: #ffffff;
  border-color: var(--marca-preto);
}


.sala__estado {
  color: var(--texto-suave);
  font-size: 0.95rem;
  line-height: 1.55;
  min-height: 1.5rem;
}

/* Celular que entrou pela sala não vê topbar nem ciclo: a tela
   é uma campainha, não o app inteiro. */
body[data-sala="sim"] .topbar__acoes,
body[data-sala="sim"] .ciclo { display: none; }


/* ---------------- entrar numa sala ---------------- */

/* Fica no topo da tela inicial. Quem abre isto num celular no
   meio da aula está procurando exatamente esta caixa, e rolar
   cinquenta jogos pra achar não é opção. No projetor ela é um
   cartão pequeno que o professor ignora. */
.entrar-sala {
  display: grid;
  gap: var(--e2);
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
}

.entrar-sala__rotulo {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* Item de grid nasce com min-width: auto, entao a largura minima
   do campo (size=20 na fonte display) empurrava a caixa inteira pra
   fora da tela num celular estreito: o aluno via o botao Entrar
   cortado na borda. O min-width: 0 deixa a linha encolher, e o wrap
   joga o botao pra baixo quando nem assim couber. */
.entrar-sala > * { min-width: 0; }

.entrar-sala__linha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: stretch;
  min-width: 0;
}

.entrar-sala__campo {
  flex: 1;
  min-width: 0;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto);
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
}

.entrar-sala__campo::placeholder {
  font-family: var(--fonte);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--texto-fraco);
}

.entrar-sala__nota { color: var(--texto-suave); font-size: 0.85rem; }

/* O endereço lido em voz alta pra sala inteira. */
.sala-abrir__endereco {
  font-family: var(--fonte-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  word-break: break-all;
}

/* ---------------- cronômetro fixo ---------------- */

/* Fixo na janela, não na página. No projetor a pergunta empurra o
   painel de coleta pra baixo da dobra, e o relógio ia junto. Aqui
   ele existe em qualquer rolagem, e some quando não está contando. */
.relogio-fixo {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding: var(--e2) var(--e5);
  background: var(--marca-marinho);
  color: #ffffff;
  border-bottom-left-radius: var(--raio);
  border-bottom-right-radius: var(--raio);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

.relogio-fixo__numero {
  font-family: var(--fonte-display);
  font-size: 2.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.relogio-fixo__rotulo {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Últimos dez segundos e tempo esgotado. Vermelho aqui não é
   enfeite: é o aviso que o professor precisa ver de longe, sem
   procurar. */
.relogio-fixo[data-acabando="sim"] { background: var(--erro); }

/* Rodada travada: os botões continuam na tela pra o professor ver
   o que cada equipe marcou, e param de aceitar clique. */
.coleta[data-travada="sim"] .coleta__opcao { opacity: 0.55; cursor: not-allowed; }
.coleta[data-travada="sim"] .coleta__opcao[aria-pressed="true"] { opacity: 1; }

/* ---------------- esconder as marcas no projetor ----------------
   Enquanto o tempo corre, a marca de uma equipe na tela grande é o
   gabarito da equipe do lado. Escondido, o botão marcado fica igual
   aos outros e no lugar aparece "registrado", que diz quem já
   respondeu sem dizer o quê. */

.coleta__registrado {
  display: none;
  padding: var(--e1) var(--e2);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--marca-marinho);
  color: #ffffff;
  border-radius: var(--raio-p);
}

.coleta[data-oculto="sim"] .coleta__linha[data-respondeu="sim"] .coleta__registrado {
  display: inline-block;
}

.coleta[data-oculto="sim"] .coleta__opcao[aria-pressed="true"] {
  background: var(--superficie-alta);
  color: var(--texto-suave);
  border-color: var(--borda);
}

.coleta[data-oculto="sim"] .coleta__opcao[data-do-celular="sim"] { outline: none; }


/* ============================================================
   CONTROLE NO CELULAR DO PROFESSOR

   Tudo aqui é dimensionado pra polegar em pé no meio da sala, sem
   olhar direito pra tela: alvo alto, texto grande, e o botão de
   avançar sempre embaixo, onde o dedo já está.
   ============================================================ */

.hub__controle { justify-self: start; margin: calc(var(--e3) * -1) 0 var(--e4); color: var(--texto-fraco); }

.tela--comando .titulo { margin-bottom: var(--e4); }

.comando__painel { display: grid; gap: var(--e4); margin-top: var(--e4); }
.comando__painel[hidden] { display: none; }

.comando__cabeca {
  display: grid;
  gap: var(--e1);
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio);
}

.comando__jogo { font-weight: 800; font-size: 0.98rem; }
.comando__conta { color: var(--texto-suave); font-size: 0.86rem; }

.comando__relogio {
  font-family: var(--fonte-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--marca-magenta);
}

.comando__rotulo {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.comando__grupo { display: grid; gap: var(--e2); }
.comando__grupo--fim { margin-top: var(--e3); }

.comando__botao {
  display: block;
  width: 100%;
  min-height: 3.4rem;
  padding: var(--e3) var(--e4);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  color: var(--texto);
  background: var(--fundo-2);
  border: 2px solid var(--borda-forte);
  border-radius: var(--raio-p);
  cursor: pointer;
}

.comando__botao:active { transform: translateY(2px); }

/* O último do fluxo é o que faz a coisa andar. Ganha cor pra o
   professor achar sem ler. */
.comando__botao--forte {
  color: #ffffff;
  background: var(--marca-magenta);
  border-color: var(--marca-preto);
  box-shadow: 4px 4px 0 var(--marca-preto);
  font-size: 1.14rem;
  min-height: 4rem;
}

.comando__botao--fraco { color: var(--texto-suave); background: transparent; font-weight: 600; }

/* Enquanto o comando não voltou do computador o painel inteiro
   fica pálido e surdo. Sem isso o professor aperta de novo achando
   que não pegou, e o jogo pula uma etapa na frente da turma.
   Trava tudo, e não só o botão apertado, porque o erro comum é
   apertar o de baixo achando que o de cima falhou. */
.comando__painel[data-esperando="sim"] .comando__botao {
  opacity: 0.4;
  pointer-events: none;
}

.comando__aviso {
  padding: var(--e3);
  color: var(--texto-suave);
  font-size: 0.9rem;
  background: var(--superficie);
  border-left: 4px solid var(--borda-forte);
}

/* O código de pareamento no painel do computador. Fica grande
   porque o professor lê ele de longe pra digitar no celular, e
   vermelho porque ele não pode ficar na parede depois de usado. */
.sala-abrir__controle {
  font-family: var(--fonte-display);
  font-size: 2.2rem;
  letter-spacing: 0.16em;
  color: var(--marca-magenta);
}