/* Tema do jogo: fundo escuro com rabiscos e painéis brancos arredondados, com
   o laranja da marca nos botões e destaques. O mesmo arquivo veste a TV
   (host.html) e o celular (index.html).

   O fundo é escuro para o telão: numa TV grande, numa sala com a luz apagada,
   uma parede laranja acesa cansa a vista e rouba atenção dos painéis. No
   escuro os blocos brancos e os botões laranja é que saltam. */

/* Fonte servida pelo próprio Worker: nada de pedido externo, o jogo abre igual
   mesmo na internet ruim da casa de alguém. Baloo 2, licença SIL OFL 1.1
   (public/fonts/OFL.txt). */
@font-face {
  font-family: 'Baloo 2';
  src: url('/fonts/baloo2.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores conferidas com contraste WCAG. O laranja vivo é da marca e só
     aparece como fundo/preenchimento; texto laranja usa o tom escuro, que
     passa em contraste sobre branco. */
  --laranja: #f9861a;          /* laranja da marca: destaques e preenchimentos */
  /* fundo da página: quase preto, de leve puxando para o frio. Fica em 15.9:1
     com o branco dos painéis, então tudo que é bloco salta. */
  --fundo: #16181d;
  --fundo-vinco: #23262d;      /* separadores e vincos sobre o fundo escuro */
  --laranja-forte: #e0700c;    /* botões e texto laranja: vivo e ainda legível */
  --laranja-texto: #e0700c;
  --laranja-claro: #ffa14a;
  --laranja-escuro: #b85604;   /* laranja para texto/preenchimento miúdo (4.8:1) */
  --tinta: #2c2f36;            /* 13.4:1 sobre branco, 5.4:1 sobre o laranja */
  --cinza: #6b7280;            /* 4.8:1 sobre branco */
  --cinza-forte: #5b6270;      /* para texto sobre cinza-claro */
  --cinza-claro: #eef0f3;
  --azul: #1a68b8;             /* 5.7:1 sobre branco */
  --verde: #15803d;            /* 5.0:1 sobre branco */
  --vermelho: #c92f2f;         /* 5.3:1 sobre branco */
  --branco: #fff;
  /* escala de cantos: painel > controle > peça miúda. Sem meio-termo entre
     pílula e canto reto — tudo é canto arredondado, só avatar e barra são
     redondos de verdade. */
  --raio: 18px;
  --raio-controle: 14px;
  --raio-mini: 10px;
  --sombra: 0 5px 0 rgba(0, 0, 0, .13);
  --fonte: 'Baloo 2', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--fundo) url('/img/padrao.svg') repeat;
  background-size: 260px 260px;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
.hidden { display: none !important; }

/* ------------------------------------------------------------------- marca */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.logo-texto {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 800;
  font-style: italic;
  line-height: .95;
  color: var(--branco);
  -webkit-text-stroke: 4px #23262b;
  paint-order: stroke fill;
  letter-spacing: 1px;
}
.logo-texto span { color: var(--laranja-claro); }
.logo-sub {
  font-size: .78em;
  font-style: italic;
  font-weight: 700;
  color: var(--branco);
  -webkit-text-stroke: 0;
  text-align: right;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ botões */

button {
  font-family: inherit;
  font-weight: 800;
  border: none;
  cursor: pointer;
  border-radius: var(--raio-controle);
  padding: 11px 24px;
  min-height: 44px;            /* alvo de toque confortável no celular */
  font-size: 1.18rem;          /* graúdo o bastante para o branco no laranja ler bem */
  color: var(--branco);
  background: var(--laranja-forte);
  box-shadow: 0 4px 0 var(--laranja-escuro);
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
  touch-action: manipulation;
}
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}
button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--laranja-escuro); }
button:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
button.clara {
  /* dentro de painel branco o botão branco desaparecia: ganha contorno laranja */
  background: var(--branco);
  color: var(--laranja-forte);
  border: 3px solid var(--laranja-forte);
  box-shadow: 0 4px 0 #e8c9ab;
  padding: 8px 21px;
}
button.clara:hover:not(:disabled) { background: #fff8f1; }
button.mini {
  /* tamanho miúdo vale marcado ou não, senão o chip pula de tamanho ao clicar */
  font-size: .82rem;
  min-height: 34px;
  padding: 6px 14px;
}
button.clara.mini {
  /* em tamanho miúdo o laranja não tem contraste: texto escuro, contorno laranja */
  color: var(--tinta);
  border-width: 2px;
  padding: 4px 12px;
}
button.mini { border-radius: var(--raio-mini); }
button.mini:not(.clara) {
  /* chip marcado: texto branco miúdo pede um laranja um pouco mais fechado */
  background: var(--laranja-escuro);
  box-shadow: 0 3px 0 #8f4303;
}
button.clara:active:not(:disabled) { box-shadow: 0 1px 0 #e8c9ab; }

.icone {
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  background: transparent;
  box-shadow: none;
  color: var(--branco);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .25));
}
.icone:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

input, select {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
  background: var(--cinza-claro);
  border: 2px solid transparent;
  border-radius: var(--raio-controle);
  padding: 13px 16px;
  width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--laranja); background: var(--branco); }
input::placeholder { color: var(--cinza); font-weight: 600; }

/* ----------------------------------------------------------------- painéis */

.painel {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  min-height: 0;
}
.aba {
  /* aba clara sobre o fundo laranja: laranja em cima de laranja não separava */
  display: inline-block;
  background: var(--branco);
  color: var(--laranja-texto);
  font-weight: 800;
  letter-spacing: 1px;
  padding: 7px 26px;
  min-height: 40px;
  border-radius: var(--raio-controle) var(--raio-controle) 0 0;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: 1.18rem;
  box-shadow: none;
}
.aba.inativa { background: #e2e5ea; color: var(--cinza-forte); }

.rotulo { font-weight: 800; letter-spacing: 1px; color: var(--cinza); font-size: .8rem; text-transform: uppercase; }

/* -------------------------------------------------------------- jogadores */

.lista-jogadores { display: flex; flex-direction: column; overflow: auto; }
.jogador {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 2px solid var(--cinza-claro);
}
.jogador:last-child { border-bottom: none; }
.jogador .marca { width: 22px; font-size: 1.2rem; text-align: center; color: var(--verde); }
.jogador .cara {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: var(--cinza-claro);
  border: 3px solid var(--laranja);
  flex: 0 0 auto;
}
.jogador.eu .cara { border-color: var(--azul); }
.jogador .dados { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.jogador .nome {
  font-weight: 800;
  font-size: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jogador.eu .nome { color: var(--azul); }
.jogador .pontos { color: var(--azul); font-weight: 800; font-size: 1.05rem; }
.jogador.fora { opacity: .45; }
.jogador .ganho { color: var(--verde); font-weight: 800; }

/* ------------------------------------------------------------------- dicas */

.dicas-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.valendo { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--tinta); }
.valendo .valor {
  background: var(--laranja-escuro);
  color: var(--branco);
  border-radius: var(--raio-mini);
  padding: 4px 14px;
}
.dica-atual { font-weight: 800; color: var(--laranja-escuro); font-size: clamp(1rem, 1.5vw, 1.5rem); }
.dica-atual small { color: var(--cinza); font-size: .7em; }
.cronometro { font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.6rem); display: flex; align-items: center; gap: 8px; }
.cronometro.urgente { color: var(--vermelho); }

.lista-dicas { display: flex; flex-direction: column; gap: clamp(4px, .7vh, 9px); overflow: auto; flex: 1; min-height: 0; }

/* Na TV as dez dicas ficam em duas colunas (1 a 5 | 6 a 10): assim todas
   cabem na tela ao mesmo tempo, sem ninguém precisar rolar nada. */
@media (min-width: 1100px) {
  .tv .lista-dicas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-auto-flow: column;
    column-gap: 14px;
    overflow: hidden;
  }
  .tv .dica { align-items: center; }
}
.dica {
  /* as 10 linhas precisam caber na tela toda, então a altura acompanha a
     altura da janela: fica confortável tanto na TV quanto num notebook */
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cinza-claro);
  border-radius: var(--raio-mini);
  padding: clamp(4px, .75vh, 14px) 14px;
  font-size: clamp(.95rem, 2.1vh, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}
.dica .n {
  flex: 0 0 auto;
  width: clamp(24px, 3.4vh, 38px);
  height: clamp(24px, 3.4vh, 38px);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--laranja-escuro);
  color: var(--branco);
  font-weight: 800;
  font-size: clamp(.75rem, 1.7vh, 1.05rem);
}
.dica.travada {
  /* as bloqueadas são só marcador de lugar: ficam menores para sobrar tela
     para as dicas que já saíram */
  color: var(--cinza-forte);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(.8rem, 1.5vh, 1.05rem);
  padding: clamp(2px, .35vh, 7px) 14px;
}
.dica.travada .n {
  background: #dfe2e7;
  color: var(--cinza-forte);
  width: clamp(20px, 2.4vh, 28px);
  height: clamp(20px, 2.4vh, 28px);
  font-size: clamp(.65rem, 1.3vh, .85rem);
}
/* a dica que acabou de sair é a que todo mundo precisa ler */
.dica.atual {
  background: #fff1e0;
  box-shadow: inset 0 0 0 3px var(--laranja);
  color: var(--tinta);
}
.dica.nova { animation: entra .3s ease; }
@keyframes entra { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

.barra {
  height: 14px;
  border-radius: 999px;
  background: #3a3d44;
  overflow: hidden;
  flex: 1;
}
.barra i { display: block; height: 100%; background: var(--laranja); border-radius: 999px; transition: width .12s linear; }
.barra i.urgente { background: var(--vermelho); }
.rodape-dicas { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.contagem { font-weight: 800; color: var(--cinza); white-space: nowrap; }
.contagem b { color: var(--laranja-escuro); }

/* --------------------------------------------------------------- respostas */

.mural { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.mural .linha { font-weight: 700; font-size: 1rem; animation: entra .25s ease; }
.mural .certo { color: var(--verde); font-weight: 800; }
.mural .errado { color: var(--cinza-forte); }
/* estado vazio: não anima (a opacidade da animação derrubava o contraste) */
.mural .vazio { color: var(--cinza-forte); font-weight: 700; animation: none; }
.mural .quem { color: var(--tinta); }
.mural .aviso { color: var(--laranja-escuro); font-weight: 800; }

.campo-envio { display: flex; gap: 8px; margin-top: 10px; }
.campo-envio input { flex: 1; }

/* --------------------------------------------------------------- revelação */

.revelacao { text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 8px; flex: 1; min-height: 0; animation: entra .35s ease; }
.revelacao .quem { font-size: clamp(1rem, 1.6vw, 1.5rem); color: var(--cinza); font-weight: 800; }
.revelacao .cara-grande { font-size: clamp(3rem, 7vw, 5rem); }
.revelacao .nome { font-size: clamp(2rem, 6vw, 4.4rem); font-weight: 800; color: var(--laranja-texto); line-height: 1.05; }
.revelacao .obra { font-size: clamp(1.1rem, 2.2vw, 1.8rem); font-weight: 800; color: var(--azul); }

/* Revelação dos jogos com som: o painel do jogo continua na tela, mas só com o
   palco. O vídeo que tocou a rodada inteira escondido atrás da capa aparece
   aqui, junto do nome da resposta. */
/* Era um style="flex:1;..." no HTML, que nenhuma folha de estilo conseguia
   vencer — e a revelação precisa encolher este painel. */
.painel-jogo { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Ancorado no id de propósito: `.tv .arena .lista-dicas` tem especificidade
   maior do que qualquer seletor só de classe que eu escrevesse aqui, e a lista
   continuava na tela por cima da resposta. */
#painel-jogo.so-palco .dicas-topo,
#painel-jogo.so-palco .rodape-dicas,
#painel-jogo.so-palco .lista-dicas,
#painel-jogo.so-palco .tocando { display: none; }
#painel-jogo.so-palco { flex: 0 0 auto; }
/* `align-items: start` vem da regra de TV e deixava o vídeo encostado na
   esquerda enquanto a resposta ficava centrada no cartão. */
#painel-jogo.so-palco .arena { display: flex; flex-direction: column; align-items: center; gap: 0; }
#painel-jogo.so-palco .arena-som { align-items: center; justify-content: center; }
#painel-jogo.so-palco .palco { width: min(420px, 44vw); max-height: 30vh; }
/* Com o vídeo na tela sobra pouca altura para a resposta. A carinha sai: em TV
   de 768px ela era empurrada para trás do vídeo, e "Ninguém acertou" ou
   "Fulano acertou" já diz o que ela dizia. */
#painel-jogo.so-palco ~ #painel-resposta .cara-grande { display: none; }
#painel-jogo.so-palco ~ #painel-resposta .nome { font-size: clamp(1.6rem, 4.6vw, 3.4rem); }
#painel-jogo.so-palco ~ #painel-resposta .obra { font-size: clamp(.9rem, 1.6vw, 1.25rem); }
#painel-jogo.so-palco ~ #painel-resposta { gap: 4px; }

/* ------------------------------------------------------------------ pódio */

.podio { display: flex; flex-direction: column; gap: 10px; }
.podio .linha {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cinza-claro);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.7rem);
}
.podio .linha.p1 { background: #ffeec2; }
.podio .linha.p2 { background: #e9ecf1; }
.podio .linha.p3 { background: #f6e0cd; }
.podio .linha .pts { margin-left: auto; color: var(--azul); }

/* ------------------------------------------------------------------- lobby */

.entrada { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.codigo-sala {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--laranja-texto);
  line-height: 1;
}
.link-sala { font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 800; color: var(--azul); word-break: break-all; }
.dica-entrada { color: var(--cinza); font-weight: 700; margin-top: 6px; }
#qr { background: var(--branco); padding: 10px; border-radius: 14px; line-height: 0; border: 3px solid var(--cinza-claro); }
#qr svg { display: block; width: clamp(200px, 25vh, 300px); height: clamp(200px, 25vh, 300px); }

.config { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.config label {
  /* rótulo em cima, campo no meio e explicação embaixo, alinhados entre as
     três colunas mesmo quando um rótulo quebra em duas linhas */
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  font-weight: 800;
  color: var(--cinza);
  font-size: .8rem;
}

.controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* -------------------------------------------------------------------- TV */

.tv {
  /* altura fixa: o telão nunca rola, quem rola é a lista de dicas por dentro */
  height: 100dvh;
  overflow: hidden;
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Empurra o meio do topo para o centro numa TV larga. Vira `display:none` no
   celular, onde o topo quebra em linhas e espaçador só atrapalha. */
.espaco { flex: 1; }
.topo .acoes { display: flex; align-items: center; gap: 4px; }
.topo .logo { margin-right: 22px; }
.tabuleiro { flex: 1; display: grid; grid-template-columns: 350px 1fr; gap: 14px; min-height: 0; }
.coluna-direita { display: grid; grid-template-rows: minmax(0, 1fr) minmax(160px, 22vh); gap: 14px; min-height: 0; }
.painel-dicas { display: flex; flex-direction: column; overflow: hidden; }
.tv .controles { margin-top: 12px; }
.painel-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-height: 0; }
.caixa { display: flex; flex-direction: column; min-height: 0; }
.caixa .topo-aba { text-align: center; margin-bottom: -2px; }

/* --------------------------------------------------------------- CELULAR */

.celular {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.celular .painel { padding: 14px; }
.celular .dica { font-size: 1.05rem; padding: 9px 12px; }
.celular .dica .n { width: 28px; height: 28px; font-size: .85rem; }
.celular .dicas-topo { margin-bottom: 10px; }

.eu-topo { display: flex; align-items: center; gap: 12px; }
.eu-topo .cara {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--cinza-claro); border: 3px solid var(--laranja);
}
.eu-topo .pontos { margin-left: auto; font-size: 1.5rem; font-weight: 800; color: var(--azul); }

.recado { text-align: center; font-weight: 800; padding: 10px; border-radius: var(--raio-mini); }
.recado.ok { background: #e2f7ea; color: var(--verde); }
.recado.erro { background: #fde8e8; color: var(--vermelho); }
.recado.espera { background: var(--cinza-claro); color: var(--cinza-forte); }

.abas-celular { display: flex; gap: 6px; }
.abas-celular .aba { flex: 1; text-align: center; }

.status-conexao {
  display: inline-flex; align-items: center; gap: 6px;
  /* claro por cima do fundo escuro: o preto translúcido de antes contava com a
     parede laranja atrás e sumia agora */
  background: rgba(255, 255, 255, .12); color: var(--branco);
  padding: 6px 12px; border-radius: var(--raio-mini); font-weight: 800; font-size: .75rem;
}
.status-conexao i { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a0; }
.status-conexao i.off { background: #ff6b6b; }
.status-conexao i.espera { background: #ffd166; }

/* ------------------------------------------------------------------ modal */

.fundo-modal {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  padding: 20px;
}
.modal { max-width: 560px; width: 100%; }
.modal h2 { font-size: 1.5rem; margin-bottom: 10px; }
.modal ul { margin: 0 0 14px; padding-left: 20px; font-weight: 700; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1000px) {
  .tv { height: auto; min-height: 100dvh; overflow: visible; }
  .tabuleiro { grid-template-columns: 1fr; }
  .coluna-direita { grid-template-rows: auto auto; }
  .painel-baixo { grid-template-columns: 1fr; }
  .lista-dicas { max-height: 60vh; }

  /* Só o telão: a tela do jogador usa o mesmo `.topo`, mas lá cabe tudo e
     esconder a palavra do status seria piorar o que já estava bom.

     O topo do telão é desenhado para uma TV larga: logo, contador, código da
     sala, status e quatro botões numa linha só. Num celular isso pedia uns
     800px, e como o flex não quebrava, a PÁGINA INTEIRA é que ia para o lado
     — em partida chegava a 400px de rolagem lateral. Aqui ele quebra em
     linhas. */
  .tv .topo { flex-wrap: wrap; gap: 8px 10px; }
  .tv .espaco { display: none; }
  .tv .topo .logo { margin-right: 0; }
  /* a bolinha de status já diz se está online; a palavra é o que não cabe */
  .tv .status-conexao #conexao-texto { display: none; }
  /* e o recado da música ganha a linha inteira em vez de virar uma coluna
     de uma palavra por linha */
  .tv .recado-musica { max-width: none; flex: 1 0 100%; }
}

/* Na TV os botões do host são só apoio: ficam discretos para sobrar altura
   para as dez dicas. */
.tv .controles button { padding: 7px 18px; font-size: 1.18rem; }

/* Resumo da partida no lobby: os ajustes ficam num modal para a tela do QR
   respirar na TV. */
.resumo-partida {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: 800;
  color: var(--cinza);
}

/* Foto de perfil enviada pelo celular entra no lugar do emoji. */
img.cara { object-fit: cover; }
.cara { overflow: hidden; }
.cara img {
  /* a borda é do círculo de fora; a imagem preenche por dentro */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
  border-radius: 50%;
}
.feed-foto, .mural .foto {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; vertical-align: middle;
}
.revelacao .cara-grande img {
  width: clamp(70px, 12vh, 130px);
  height: clamp(70px, 12vh, 130px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--laranja);
}
.botao-foto {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: .8rem;
}

/* Aviso de conexão no celular: o telefone vive apagando a tela no meio do
   jogo, então a queda precisa ser óbvia. */
.aviso-conexao {
  background: var(--vermelho);
  color: var(--branco);
  font-weight: 800;
  text-align: center;
  padding: 10px 14px;
  border-radius: var(--raio-controle);
  box-shadow: var(--sombra);
}

/* Explicação curta embaixo de cada campo da configuração: sem isso o host
   tinha que adivinhar o que "tempo da resposta" queria dizer. */
.config label small {
  font-weight: 700;
  font-size: .72rem;
  color: var(--cinza);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

/* --------------------------------------------------------------- PORTAL */

.portal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 100dvh;
}

.cabecalho-portal { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.cabecalho-portal .logo-texto { font-size: clamp(2.2rem, 7vw, 4rem); }
.cabecalho-portal .logo-sub { text-align: center; }
.chamada {
  max-width: 620px;
  color: var(--branco);
  font-weight: 700;
  font-size: clamp(.95rem, 2.2vw, 1.15rem);
  line-height: 1.45;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.grade-jogos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.card-jogo {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-jogo .capa {
  background: linear-gradient(135deg, var(--laranja-forte), var(--laranja-claro));
  font-size: clamp(3.5rem, 9vw, 5rem);
  line-height: 1;
  padding: 26px;
  text-align: center;
}
.card-jogo .miolo { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-jogo h2 { font-size: 1.6rem; }
.card-jogo .subtitulo { color: var(--laranja-escuro); font-weight: 800; font-style: italic; margin-top: -4px; }
.card-jogo .frase { color: var(--tinta); font-weight: 600; line-height: 1.4; }
.card-jogo .ficha { color: var(--cinza); font-weight: 800; font-size: .85rem; }
.card-jogo .etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.card-jogo .etiqueta {
  background: var(--cinza-claro);
  color: var(--cinza-forte);
  font-weight: 800;
  font-size: .75rem;
  padding: 4px 10px;
  border-radius: var(--raio-mini);
}
.card-jogo .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 10px; }
.card-jogo .acoes a { text-decoration: none; }
.card-jogo.em-breve .capa { background: linear-gradient(135deg, #8a90a0, #c9ced6); }
.card-jogo.em-breve h2, .card-jogo.em-breve .subtitulo { color: var(--cinza-forte); }
.selo-breve {
  display: inline-block;
  background: var(--cinza-claro);
  color: var(--cinza-forte);
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px 20px;
  border-radius: var(--raio-controle);
}

.rodape-portal { margin-top: auto; text-align: center; color: var(--branco); font-weight: 700; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.rodape-portal a { color: var(--branco); }

/* ------------------------------------------------------------ ABERTURAS */

.tocando {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  background: var(--laranja-forte);
  color: var(--branco);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vh, 1.6rem);
  padding: 10px 18px;
  border-radius: var(--raio-controle);
  margin-bottom: 12px;
}
.tocando.mudo { background: var(--cinza-claro); color: var(--cinza-forte); }
/* Rodada muda mas com conserto à mão: fica laranja para o botão ser visto do
   sofá. Cinza é para quando não há nada a fazer. */
.tocando.mudo:has(#btn-tocar-som:not(.hidden)) { background: var(--laranja-forte); color: var(--branco); }
/* o motivo vai numa linha só dele, embaixo do recado */
.tocando { flex-wrap: wrap; }
.motivo-som { flex-basis: 100%; text-align: center; font-size: .72em; font-weight: 700; opacity: .75; }
.motivo-som:empty { display: none; }
/* o botão de liberar o som não pode quebrar em duas linhas na tela do celular */
.tocando #btn-tocar-som { white-space: nowrap; flex: none; }
.tocando .ondas { display: inline-flex; align-items: flex-end; gap: 4px; height: 22px; }
.tocando .ondas i {
  width: 5px;
  height: 100%;
  background: currentColor;
  border-radius: 3px;
  transform-origin: bottom;
  animation: onda .9s ease-in-out infinite;
}
.tocando .ondas i:nth-child(2) { animation-delay: .15s; }
.tocando .ondas i:nth-child(3) { animation-delay: .3s; }
.tocando .ondas i:nth-child(4) { animation-delay: .45s; }
.tocando .ondas i:nth-child(5) { animation-delay: .6s; }
.tocando.mudo .ondas i { animation: none; transform: scaleY(.25); }
@keyframes onda {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}

/* Palco do vídeo: o player fica coberto enquanto a rodada corre, porque a
   imagem entregaria a resposta, e aparece na revelação. */
.palco {
  position: relative;
  width: min(420px, 60vw);
  aspect-ratio: 16 / 9;
  margin: 0 auto 12px;
  border-radius: var(--raio-controle);
  overflow: hidden;
  background: #000;
}
.palco iframe { width: 100%; height: 100%; display: block; border: 0; }
.capa-video {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--laranja-forte), var(--laranja-claro));
  color: var(--branco);
  font-size: 3rem;
}
.capa-video small { font-size: .8rem; font-weight: 800; opacity: .9; }
/* No quiz de música a última dica é a cara do artista, e ela entra bem aqui:
   a capa já cobre o player, do tamanho certo e no lugar certo. Na revelação a
   capa sai inteira e o vídeo aparece por baixo. */
.capa-foto { display: none; }
.capa-foto.com-foto { display: block; position: absolute; inset: 0; }
.capa-foto.com-foto img { width: 100%; height: 100%; object-fit: cover; }
.capa-video:has(.capa-foto.com-foto) .capa-emoji,
.capa-video:has(.capa-foto.com-foto) small { display: none; }

/* Contador de rodada no alto do telão: sem ele ninguém sabe se está no
   terceiro ou no nono personagem da partida. */
.contador-rodada {
  color: var(--branco);
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
  white-space: nowrap;
}

/* Aberturas no telão: player de um lado, as cinco dicas do outro. Em tela
   estreita os dois viram uma coluna só. */
.arena { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.arena-som { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

@media (min-width: 1100px) {
  .arena {
    display: grid;
    grid-template-columns: minmax(300px, 34%) 1fr;
    gap: 20px;
    align-items: start;
  }
  .arena-som { position: sticky; top: 0; }
  /* aqui a lista volta a ser uma coluna só: são cinco dicas, não dez */
  .tv .arena .lista-dicas {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    overflow: auto;
  }
  .arena .palco { width: 100%; margin: 0; }
}

/* Pokémon: a última dica é a foto. Enquanto ela não vem, as dicas ocupam a
   largura toda; quando entra, a lista encolhe e divide a tela com a imagem. */
.palco-foto { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.foto-dica { display: none; }
.palco-foto.com-foto .foto-dica {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--branco);
  border-radius: var(--radio);
  padding: 10px;
  box-shadow: inset 0 0 0 2px var(--cinza-claro);
}
.foto-dica img { max-width: 100%; max-height: 40vh; object-fit: contain; }

@media (min-width: 1100px) {
  .palco-foto.com-foto {
    display: grid;
    grid-template-columns: minmax(260px, 36%) 1fr;
    /* a linha precisa caber na altura do painel, senão a lista transborda */
    grid-template-rows: minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    min-height: 0;
  }
  .palco-foto.com-foto .foto-dica { align-self: start; }
  /* com a foto na tela a lista vira uma coluna só, que rola por dentro */
  .tv .palco-foto.com-foto .lista-dicas {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    min-height: 0;
    overflow: auto;
  }
  /* dez dicas ao lado da imagem só cabem com o texto um pouco mais junto */
  .tv .palco-foto.com-foto .dica { padding: 7px 12px; font-size: 1.02rem; }
}

/* A imagem da resposta divide o quadro com o nome, que é o que importa. Ela
   fica com a sobra: um retrato em pé chegava a empurrar o nome para fora do
   cartão numa TV de 800px de altura. */
.foto-resposta { display: none; }
.foto-resposta.mostrando {
  display: flex;
  align-items: center;
  justify-content: center;
  /* base zero de propósito: assim a altura da caixa é calculada pela sobra do
     quadro, e o max-height da imagem tem contra o que medir. Com altura
     automática a imagem mantinha o tamanho natural e empurrava o nome da
     resposta para fora do cartão em TV de 768px e de 800px. */
  flex: 1 1 0;
  min-height: 0;
  max-height: 38vh;
}
.foto-resposta img { max-height: 100%; max-width: 100%; object-fit: contain; }
/* Com a imagem no quadro, a carinha de quem acertou vira coadjuvante: em TV de
   768px ela sozinha comia mais altura do que sobrava para a foto. */
.foto-resposta.mostrando ~ .cara-grande { font-size: clamp(1.8rem, 4vh, 3rem); }
.foto-resposta.mostrando ~ .cara-grande img { width: clamp(44px, 7vh, 80px); height: clamp(44px, 7vh, 80px); }
.foto-resposta.mostrando ~ .obra { font-size: clamp(1rem, 1.8vw, 1.4rem); }

/* no celular a foto divide espaço com as dicas anteriores, então fica menor */
.foto-dica-celular { display: block; max-width: 100%; max-height: 26vh; margin: 6px auto 0; object-fit: contain; }

/* Na revelação do celular a imagem não pode esticar como no telão: ali embaixo
   dela ainda vêm o nome, a obra e o ranking inteiro, e `flex: 1 1 0` empurrava
   tudo isso para fora da tela. Aqui ela ocupa o que precisa e para. */
.celular .foto-resposta.mostrando { flex: 0 0 auto; max-height: 32vh; }
.celular .foto-resposta img { max-height: 32vh; }

/* ---------------------------------------------------- Quiz Frases (escolha)

   A rodada não tem lista de dicas: tem a frase em romaji, grande, e as 4
   traduções embaixo, com a cena do anime ao lado quando a fala tem uma. A
   frase é o centro da tela: sem cena, ela fica com o telão inteiro. */

/* Coluna da imagem no quiz de frases. Ela some quando a frase não tem cena, e
   aí `sem-cena` no arena dá o telão inteiro para a frase. */
.lado-cena { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
/* fora do telão largo a arena é uma coluna só: a cena vazia deixaria um vão e
   o gap acima da frase */
.arena-frases.sem-cena .lado-cena { display: none; }
.lado-cena .foto-dica { width: 100%; display: flex; align-items: center; justify-content: center; }
.lado-cena img { max-width: 100%; max-height: 46vh; border-radius: var(--raio-mini); object-fit: contain; }

.lado-frase {
  flex: 1;
  min-height: 0;
  /* sem isto a coluna do grid cresce para caber a frase inteira numa linha só e
     empurra tudo para fora da tela */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 16px);
  /* centraliza: a frase e as 4 opções ocupam pouca altura, e encostadas no
     topo deixavam um vão morto embaixo na TV */
  justify-content: center;
  /* recorta em vez de esticar: é este recorte que `ajustarFrase()` mede para
     saber que precisa diminuir a frase */
  overflow: hidden;
}
.frase-palco { flex: 0 0 auto; overflow: visible; }

.frase-jp {
  /* japonês precisa de mais corpo que o alfabeto latino para ser lido de longe */
  font-size: clamp(1.7rem, 5.4vh, 3.4rem);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  color: var(--tinta);
  background: var(--branco);
  border: 3px solid var(--laranja);
  border-radius: var(--raio-mini);
  padding: clamp(10px, 2vh, 22px) 16px;
  /* japonês quebra entre caracteres; `keep-all` deixava a frase numa linha só e
     ela saía pela lateral da TV */
  word-break: normal;
  overflow-wrap: anywhere;
  animation: entra .3s ease;
}
/* três degraus de corpo, escolhidos pelo tamanho da frase: frase curta merece
   ocupar a tela, frase longa precisa caber sem espremer as 4 opções */
.frase-jp.grande { font-size: clamp(2rem, 7vh, 4.6rem); }
.frase-jp.pequena { font-size: clamp(1.25rem, 3.8vh, 2.4rem); }

.opcoes-grade {
  /* não encolhem: quem cede espaço é a frase */
  flex: 0 0 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(5px, .9vh, 11px);
  align-content: start;
  overflow: auto;
}
@media (min-width: 900px) {
  .opcoes-grade { grid-template-columns: 1fr 1fr; }
}
/* a arena do quiz de frases estica: as opções ocupam a tela em vez de deixar
   um vão embaixo, e nada escapa pela lateral */
@media (min-width: 1100px) {
  .arena-frases { align-items: stretch; min-height: 0; }
  /* Frase sem clipe — as expressões do dia a dia não pertencem a uma cena só.
     Aí a coluna do vídeo não existe e a frase toma o telão inteiro, em vez de
     ficar espremida na direita com metade da tela em branco. */
  .arena-frases.sem-cena { grid-template-columns: 1fr; }
  /* min-height junto do min-width: sem ele a coluna do vídeo estica a linha
     inteira em TV baixa e empurra as opções para fora do painel */
  .arena-frases > * { min-width: 0; min-height: 0; }
}
.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: var(--cinza-claro);
  border-radius: var(--raio-mini);
  padding: clamp(5px, 1vh, 14px) 14px;
  font-size: clamp(.9rem, 2vh, 1.4rem);
  font-weight: 700;
  line-height: 1.25;
}
.opcao .letra, .opcoes-botoes .letra {
  flex: 0 0 auto;
  width: clamp(24px, 3.4vh, 38px);
  height: clamp(24px, 3.4vh, 38px);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--laranja-escuro);
  color: var(--branco);
  font-weight: 800;
  font-size: clamp(.75rem, 1.7vh, 1.05rem);
}

/* Tela baixa (notebook, TV 720p com barra do navegador): a cena encolhe para
   sobrar altura para a frase e as 4 opções, que são o que a sala precisa ler. */
@media (max-height: 760px) {
  .arena-frases .lado-cena img { max-height: 30vh; }
}
/* Janela bem baixa (notebook pequeno espelhando na TV): a arena fica com uns
   170px, e só a grade de 4 opções já ocupa 138. Não adianta encolher a cena —
   quem come a tela são as caixas de respostas e chat lá embaixo. Elas saem, e
   a rodada fica inteira: frase legível, quatro opções e a cena. Só no quiz de
   frases, que é o único com opções para ler no telão. */
@media (max-height: 700px) {
  body[data-jogo="frases"] .painel-baixo { display: none; }
  /* a faixa de baixo é declarada no grid, então esconder o painel não devolve
     o espaço: a linha precisa sumir junto */
  body[data-jogo="frases"] .coluna-direita { grid-template-rows: minmax(0, 1fr); }
  .arena-frases .lado-cena img { max-height: 26vh; }
}

/* quem acertou, na revelação */
.acertos { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.acerto {
  background: var(--cinza-claro);
  color: var(--tinta);
  border-radius: 999px;
  padding: 5px 13px;
  font-weight: 800;
  font-size: clamp(.8rem, 1.7vh, 1.05rem);
}
.acerto b { color: var(--verde); }

/* celular: as 4 opções viram botões grandes, feitos para o polegar */
.opcoes-botoes { display: flex; flex-direction: column; gap: 9px; }
.opcoes-botoes button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  font-size: 1rem;
  line-height: 1.3;
  background: var(--branco);
  color: var(--tinta);
  border: 3px solid var(--laranja-forte);
  box-shadow: 0 4px 0 var(--laranja-escuro);
}
.opcoes-botoes button:disabled { opacity: .55; box-shadow: none; }
/* a opção tocada continua marcada, mesmo desabilitada, para a pessoa lembrar
   no que votou enquanto espera a revelação */
.opcoes-botoes button.minha {
  opacity: 1;
  background: var(--laranja-forte);
  color: var(--branco);
  border-color: var(--laranja-escuro);
}
.opcoes-botoes button.minha .letra { background: var(--branco); color: var(--laranja-escuro); }


/* Código da sala no topo, durante a partida. No lobby ele já aparece grande no
   meio da tela; depois some, e quem cai da sala no meio do jogo precisa dele
   para voltar sem interromper todo mundo. */
.sala-topo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .12);
  color: var(--branco);
  padding: 6px 12px;
  border-radius: var(--raio-mini);
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .5px;
  white-space: nowrap;
}
.sala-topo b {
  font-size: 1.15rem;
  letter-spacing: 3px;
  color: var(--laranja-claro);
}

/* ------------------------------------------------- música de fundo

   O player da playlist precisa existir E estar renderizado para o navegador
   tocar o som: com `display:none` ou `visibility:hidden` ele fica mudo em
   parte dos navegadores. Então ele continua na página, atrás do fundo dela,
   transparente e fora do alcance do toque. */
.player-fundo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 113px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
/* O estilo mora no quadro, nunca no alvo do player: o YouTube troca o alvo por
   um iframe e o iframe não herda a classe. Tamanho de verdade no filho porque
   player de altura zero não toca. */
.player-fundo > div,
.player-fundo iframe { width: 100%; height: 100%; border: 0; display: block; }

/* O player sai do esconderijo quando o navegador barra a música.
   No Safari do iPhone, mandar um iframe de outro domínio tocar a partir de um
   toque na PÁGINA não vale como gesto — só o toque dentro do próprio player
   vale. Escondido, ele nunca poderia ser tocado, e a música ficava impossível
   de destravar por mais que o host batesse na tela. Aparecendo, um toque
   resolve; depois ele volta a sumir sozinho. */
.player-fundo.aparecendo {
  opacity: 1;
  pointer-events: auto;
  z-index: 40;
  right: 12px;
  bottom: 12px;
  width: min(260px, 62vw);
  height: auto;
  aspect-ratio: 16 / 9;
  border: 3px solid var(--laranja);
  border-radius: var(--raio-mini);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}
/* Num celular ele fica por cima dos botões do host enquanto estiver à mostra,
   então encolhe: cobre menos e continua grande o bastante para o polegar. */
@media (max-width: 1000px) {
  .player-fundo.aparecendo { width: min(180px, 46vw); right: 8px; bottom: 8px; }
}

/* Música desligada: o mesmo ícone, riscado. Trocar o emoji por 🔇 confundia
   com o botão de efeitos sonoros, que fica logo ao lado e já usa esse.
   O apagado é leve de propósito: a 55% o ícone branco sumia no topo escuro e
   sobrava só o risco, que sozinho não diz "música". */
.icone.mudo { opacity: .8; position: relative; }
/* Recado no topo quando o navegador barra a música. Existe porque "não saiu
   som" sem nada escrito na tela é indistinguível de "o jogo não tem música" —
   e numa TV ninguém vai abrir o console para descobrir. O motivo vem junto,
   pequeno, para dar o que contar quando a coisa falhar na casa de alguém. */
.recado-musica {
  font-weight: 800;
  font-size: clamp(.7rem, 1.1vw, .9rem);
  color: var(--laranja-claro);
  max-width: 22ch;
  line-height: 1.15;
}
.recado-musica small { display: block; font-weight: 700; opacity: .7; font-size: .85em; }

/* O navegador barrou a música e só um toque na tela libera: o botão acende
   para o host ver de longe que falta um toque. Pisca sem mexer no tamanho nem
   na posição — escalando, ele virava alvo em movimento, ruim de acertar numa
   TV com o mouse do notebook espelhado na mão. Quem pulsa é o fundo. */
.icone.pedindo { animation: pede-toque 1.3s ease-in-out infinite; border-radius: 12px; }
@keyframes pede-toque {
  0%, 100% { background: transparent; box-shadow: none; }
  50% { background: var(--laranja-escuro); box-shadow: 0 0 0 3px rgba(224, 112, 12, .4); }
}
@media (prefers-reduced-motion: reduce) {
  .icone.pedindo { animation: none; background: var(--laranja-escuro); }
}

.icone.mudo::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  background: var(--laranja-forte);
  /* contorno escuro: o risco precisa aparecer por cima do ícone claro e do
     topo escuro ao mesmo tempo */
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .6);
  transform: rotate(-45deg);
}