/* Estilos próprios do Tá na Cara. A base vem de /core/css/base.css. */

.jogo, .resultado { display: flex; flex-direction: column; gap: 16px; }

.pergunta { margin: 4px 0 0; font-size: 1.7rem; }

/* Pistas: as reveladas em cartões brancos, as que faltam tracejadas. */
.pistas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pista {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--branco);
  font-size: 1.05rem; line-height: 1.45;
}
.pista--nova { box-shadow: var(--sombra); background: var(--cor-clara); }
.pista__numero {
  flex: none; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cor); color: var(--branco); border: 2px solid var(--tinta);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 0.95rem;
}
.pista--bloqueada { border-style: dashed; border-color: var(--linha-forte); background: transparent; color: var(--grafite); }
.pista--bloqueada .pista__numero { background: transparent; color: var(--grafite); border-color: var(--linha-forte); }
.pista--bloqueada span:last-child { display: inline-flex; align-items: center; gap: 8px; }
.pista--bloqueada svg { width: 16px; height: 16px; }

/* Palpites errados */
.chutes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chutes li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--erro-claro); font-weight: 700; font-size: 0.95rem;
}
.chutes svg { width: 14px; height: 14px; color: var(--erro); }

/* Campo de palpite com a lista de nomes */
.palpite { display: flex; flex-direction: column; gap: 10px; }
.palpite label { font-weight: 700; }
.palpite input {
  width: 100%; height: 52px; padding: 0 16px;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--branco); color: var(--tinta);
  font: inherit; font-size: 1.1rem; font-weight: 700;
}
.palpite input::placeholder { font-weight: 400; color: var(--grafite); }
/* A lista fica no fluxo da página (empurra o botão para baixo) para nunca cobrir o "Chutar". */
.sugestoes {
  list-style: none; margin: 4px 0 0; padding: 4px;
  background: var(--branco); border: 2px solid var(--tinta); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.sugestoes li {
  min-height: 44px; padding: 0 12px;
  display: flex; align-items: center;
  border-radius: 4px; cursor: pointer; font-weight: 700;
}
.sugestoes li:hover, .sugestoes li[aria-selected="true"] { background: var(--cor-clara); }

.dica-revelada {
  margin: 0; padding: 12px 14px;
  border: 2px dashed var(--tinta); border-radius: var(--raio);
  background: var(--branco); font-size: 0.95rem;
}

.jogo__acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.botao [data-icone] { display: inline-flex; }
.botao [data-icone] svg { width: 20px; height: 20px; }

/* Resultado */
.resultado__placar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.resultado__rotulo { margin: 0; font-weight: 700; white-space: nowrap; }
.resultado__pontos { margin: 0; font-family: var(--fonte-titulo); font-weight: 800; line-height: 0.9; letter-spacing: -0.02em; display: flex; flex-direction: column; gap: 6px; }
.resultado__pontos strong { font-size: 4.6rem; letter-spacing: -0.04em; }
.resultado__pontos span { font-size: 1.1rem; color: var(--grafite); }
.resultado__grade { display: flex; gap: 4px; }
.resultado__grade span { width: 24px; height: 24px; border: 2px solid var(--tinta); background: var(--branco); }
.resultado__grade .certo { background: var(--cor); }
.resultado__grade .com-dica { background: var(--cor-clara); }
.resultado__grade .errado { background: var(--tinta); }
.resultado__grade .sobrou { border-color: var(--linha-forte); }

.revelado { display: flex; flex-direction: column; gap: 2px; }
.foto-famoso { margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.foto-famoso img {
  display: block; width: 100%; max-height: 360px; object-fit: cover; object-position: top;
  border: 2px solid var(--tinta); border-radius: var(--raio); background: var(--linha);
}
.foto-famoso figcaption { font-size: 0.8rem; color: var(--grafite); }
.texto .foto-famoso img { max-width: 320px; }
.revelado__rotulo { font-weight: 700; color: var(--grafite); }
.revelado__nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; color: var(--cor); }
.revelado__oficio { font-size: 1rem; }

.resultado__frase { margin: 0; font-size: 1.05rem; }
.resultado__proximo { margin: 0; text-align: center; }
.resultado__proximo strong { font-family: var(--fonte-titulo); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.resultado__mais { margin: 0; }
.resultado__anterior { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.resultado__anterior > a:last-child { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.resultado__sobre h2 { margin: 0 0 6px; font-size: 1.15rem; }
.resultado__sobre p { margin: 0 0 14px; }
.resultado__sobre ol { margin: 0 0 14px; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 6px; }
.resultado__sobre .resultado__fontes { margin: 0; font-size: 0.9rem; color: var(--grafite); }

.aviso-anterior {
  margin: 0; padding: 12px 14px;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--cor-clara); font-size: 0.95rem;
}
.aviso-anterior a { font-weight: 700; }

/* Progresso: rótulo "Errou" mais largo que os números. */
.distribuicao__rotulo { width: 3.2rem; }

/* Dica */
.dica__topo { display: flex; gap: 16px; align-items: center; }
.dica__topo svg { flex: none; }
.dica__topo h2 { margin: 0 0 4px; font-size: 1.7rem; }
.dica__topo p { margin: 0; }
.dica__nota { margin: 0; font-size: 0.9rem; color: var(--grafite); }

.explicacao { margin-top: 16px; }
.explicacao h2 { margin-top: 0; }

/* Páginas de respostas */
.texto .respostas-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.respostas-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--branco); border: 2px solid var(--tinta); border-radius: var(--raio); }
.respostas-lista__jogo { display: flex; flex-direction: column; }
.respostas-lista__jogo span { color: var(--grafite); font-size: 0.95rem; }
.respostas-lista__acoes { display: flex; align-items: center; gap: 14px; }
.respostas-lista__acoes .botao { min-height: 44px; }
.respostas-lista__acoes a:not(.botao) { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; }
.botoes-respostas { display: flex; flex-wrap: wrap; gap: 12px; }