/* Estilos próprios do Escadinha. 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; }

/* Número do jogo e contagem de degraus: quebram em duas linhas inteiras no celular. */
.info-dia { flex-wrap: wrap; gap: 2px 12px; }
.info-dia > * { white-space: nowrap; }

/* Abas dos três desafios do dia */
.abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.abas a {
  min-height: 52px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--branco); text-decoration: none; text-align: center; line-height: 1.2;
}
.abas a strong { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.05rem; }
.abas a span { font-size: 0.85rem; color: var(--grafite); }
.abas a[aria-current="page"] { background: var(--cor); color: var(--branco); box-shadow: var(--sombra); }
.abas a[aria-current="page"] span { color: var(--branco); }
.abas a.feito span::after { content: " ✓"; font-weight: 700; }

/* Escada: cada degrau é uma palavra, deslocada um pouco para a direita. */
.escada {
  list-style: none; margin: 0; padding: 0;
  align-self: center;
  display: flex; flex-direction: column; gap: 8px;
}
.degrau {
  display: flex; gap: 6px;
  margin-left: calc(var(--degrau, 0) * 14px);
}
.letra {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--branco);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.6rem; line-height: 1;
}
.degrau--partida .letra { background: var(--tinta); color: var(--branco); }
.letra--trocada { background: var(--cor); color: var(--branco); }
.degrau--proximo .letra { border: 2px dashed var(--cor); background: transparent; }
/* Palavras mais longas: casas menores para caber no celular. */
[data-letras="5"] .letra { width: 48px; height: 48px; font-size: 1.45rem; }
[data-letras="6"] .letra { width: 44px; height: 44px; font-size: 1.3rem; }
[data-letras="6"] .degrau { gap: 5px; margin-left: calc(var(--degrau, 0) * 8px); }
.degrau--chegada .letra { background: var(--cor-clara); box-shadow: 3px 3px 0 var(--tinta); }

.escada__chegada {
  align-self: center;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-top: 12px; border-top: 2px dashed var(--linha-forte);
}
.escada__rotulo { font-weight: 700; }

.subir { display: flex; flex-direction: column; gap: 10px; }
.subir label { font-weight: 700; }
.subir input {
  height: 52px; padding: 0 16px;
  border: 2px solid var(--tinta); border-radius: var(--raio);
  background: var(--branco); color: var(--tinta);
  font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.4rem; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.subir input::placeholder {
  font-family: var(--fonte-texto); font-weight: 400; font-size: 1rem; letter-spacing: 0;
  text-transform: none; color: var(--grafite);
}

.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; }
.jogo__secundarias { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jogo__secundarias .botao { min-height: 48px; padding: 0 12px; font-size: 1rem; }
.botao [data-icone] { display: inline-flex; }
.botao [data-icone] svg { width: 20px; height: 20px; }

.painel__titulo { margin: 0; font-size: 1.6rem; }
.painel__sub { margin: -12px 0 0; color: var(--grafite); }
.convite { display: flex; flex-direction: column; gap: 12px; }
.convite p { margin: 0; }
.botoes-respostas { display: flex; flex-wrap: wrap; gap: 12px; }
.painel__caixa > p { margin: 0; }

/* 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; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 150px; }
.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__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__caminhos h2 { margin: 0 0 4px; font-size: 1.15rem; }
.resultado__caminhos h2 + .caminho { margin: 0 0 14px; }
.resultado__caminhos .caminho:last-child { margin-bottom: 0; }
.caminho { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: 0.02em; hyphens: none; }

.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ótulos mais largos que os números do Quanto Custava? */
.distribuicao__rotulo { width: 5.5rem; }

/* 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; }
.texto .escada-resposta { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.escada-resposta li { margin-left: calc(var(--degrau, 0) * 14px); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.06em; }