/* Estilos do app. Cores, fontes, espaços e raios vêm de tokens.css. Mobile first. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--brand-fundo);
  color: var(--brand-tinta);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  color: var(--brand-destaque);
  margin: 0 0 var(--brand-espaco-2);
}

a { color: var(--brand-destaque); }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-foco);
  outline-offset: 2px;
}

/* ---------- Estilos de texto do DS ---------- */

.brand-placar,
.placar-final strong {
  font-family: var(--brand-font-titulo);
  font-size: 56px;
  line-height: 56px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.brand-titulo-1,
.tela-inicio h1,
.tela-resultado h1,
.pagina-texto h1 {
  font-family: var(--brand-font-titulo);
  font-size: 28px;
  line-height: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brand-titulo-2,
.cartao h2,
.pagina-texto h2 {
  font-family: var(--brand-font-titulo);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}

.brand-pergunta,
.enunciado {
  font-family: var(--brand-font-titulo);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
}

.brand-botao,
.botao,
.topo-marca,
.opcao .letra,
.item-ordem .posicao {
  font-family: var(--brand-font-titulo);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.brand-rotulo,
.contador,
.placar > span,
.chip-pilar,
.nivel {
  font-family: var(--brand-font-titulo);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand-corpo,
body {
  font-family: var(--brand-font-texto);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.brand-corpo-forte,
.botao-texto,
.voltar,
.perfil-topo .nome {
  font-family: var(--brand-font-texto);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.brand-apoio,
.rodape,
.instrucao,
.subtitulo-lista,
.como-funciona li,
.nota,
.perfil-topo .valor,
.perfil-nivel,
.item-ordem .sua-posicao {
  font-family: var(--brand-font-texto);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Números que mudam não pulam. */
.placar, .placar-final, .selo, .perfil-topo .valor, .item-ordem .posicao { font-variant-numeric: tabular-nums; }

/* ---------- Estrutura ---------- */

.topo, #app, .rodape {
  width: 100%;
  max-width: var(--brand-largura-max);
  margin: 0 auto;
  padding-inline: var(--brand-espaco-4);
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: max(var(--brand-espaco-3), env(safe-area-inset-top));
  padding-bottom: var(--brand-espaco-1);
}

.topo-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-espaco-2);
  min-height: var(--brand-alvo-toque);
  font-weight: 800;
  color: var(--brand-destaque);
  text-decoration: none;
}

.botao-icone {
  display: grid;
  place-items: center;
  width: var(--brand-alvo-toque);
  height: var(--brand-alvo-toque);
  border: 1px solid var(--brand-linha-controle);
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-superficie);
  color: var(--brand-tinta-suave);
  cursor: pointer;
}

#app {
  flex: 1;
  display: flex;
  flex-direction: column;
  outline: none;
}

.rodape {
  padding-top: var(--brand-espaco-2);
  padding-bottom: max(var(--brand-espaco-2), env(safe-area-inset-bottom));
  color: var(--brand-tinta-suave);
}
.rodape-links {
  display: flex;
  justify-content: center;
  gap: var(--brand-espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rodape-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--brand-alvo-toque);
  min-width: var(--brand-alvo-toque);
  padding-inline: var(--brand-espaco-3);
  color: inherit;
}

/* Páginas de texto (privacidade e termos) */
.pagina-texto { padding-top: var(--brand-espaco-3); padding-bottom: var(--brand-espaco-6); }
.pagina-texto h1 { margin-top: var(--brand-espaco-2); }
.pagina-texto h2 { margin-top: var(--brand-espaco-5); }
.pagina-texto p { margin: 0 0 var(--brand-espaco-3); }
.voltar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--brand-alvo-toque);
}

.carregando {
  margin: auto;
  color: var(--brand-tinta-suave);
}

.tela {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--brand-espaco-3);
  animation: entrar 0.25s ease-out;
}

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

/* Movimento reduzido: sem pulo, sem escala, sem rolagem suave. A troca de cor continua. */
@media (prefers-reduced-motion: reduce) {
  .tela, .selo-entra { animation: none; }
  .botao:active { transform: none; }
  html { scroll-behavior: auto; }
}

/* Ações ficam embaixo, na zona do polegar. */
.acoes {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: var(--brand-espaco-2);
  margin-top: auto;
  padding: var(--brand-espaco-4) 0 max(var(--brand-espaco-3), env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--brand-fundo) 30%);
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--brand-espaco-2);
  min-height: var(--brand-botao-altura);
  padding: var(--brand-espaco-3) var(--brand-espaco-5);
  border: 0;
  border-radius: var(--brand-raio-pilula);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.1s ease, background 0.15s ease;
}
.botao:active { transform: scale(0.98); }

.botao-primario {
  background: var(--brand-acao);
  color: var(--brand-sobre-acao);
}
.botao-primario:hover, .botao-primario:active { background: var(--brand-acao-hover); }

.botao-secundario {
  background: transparent;
  color: var(--brand-destaque);
  border: 2px solid var(--brand-linha-controle);
}

/* "Conferir" sem alternativa escolhida. */
.botao:disabled,
.botao-primario:disabled:hover {
  background: var(--brand-superficie-2);
  color: var(--brand-tinta-suave);
  cursor: not-allowed;
  transform: none;
}

.botao-texto {
  display: inline-flex;
  align-items: center;
  min-height: var(--brand-alvo-toque);
  border: 0;
  background: none;
  padding: 0 var(--brand-espaco-2);
  margin: 0 calc(-1 * var(--brand-espaco-2));
  color: var(--brand-tinta-suave);
  cursor: pointer;
}

/* ---------- Tela inicial ---------- */

.tela-inicio { text-align: center; }

.inicio-icone {
  width: 88px;
  height: 88px;
  margin: var(--brand-espaco-6) auto var(--brand-espaco-4);
}

.lead {
  color: var(--brand-tinta-suave);
  margin: 0 auto var(--brand-espaco-6);
  max-width: 26rem;
}

.cartao {
  background: var(--brand-superficie);
  border: 1px solid var(--brand-linha);
  border-radius: var(--brand-raio-lg);
  box-shadow: var(--brand-sombra-cartao);
  padding: var(--brand-espaco-4) var(--brand-espaco-5);
  text-align: left;
}
.cartao + .cartao { margin-top: var(--brand-espaco-3); }

.como-funciona {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--brand-espaco-2);
}
.como-funciona li {
  display: grid;
  grid-template-columns: var(--brand-espaco-6) 1fr;
  gap: var(--brand-espaco-2);
}
.como-funciona li::before {
  content: "";
  width: var(--brand-espaco-2);
  height: var(--brand-espaco-2);
  margin: var(--brand-espaco-2) auto 0;
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-verde-tech);
}

/* ---------- Pergunta ---------- */

/* Barra da rodada (BarraProgresso do DS): sair, contador e pontos em destaque. */
.barra-rodada {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--brand-espaco-2);
}
.barra-rodada .botao-texto { justify-self: start; }
.contador { color: var(--brand-tinta-suave); white-space: nowrap; }
.placar {
  justify-self: end;
  white-space: nowrap;
  color: var(--brand-destaque);
}
.placar strong {
  font-family: var(--brand-font-titulo);
  font-size: 20px;
  line-height: 24px;
  font-weight: 800;
}

/* Trilho: um segmento por pergunta. A forma muda junto com a cor. */
.trilho {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  align-items: center;
  gap: var(--brand-espaco-1);
  height: var(--brand-espaco-2);
  margin: var(--brand-espaco-2) 0 var(--brand-espaco-4);
}
.seg {
  height: var(--brand-espaco-2);
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-linha);
}
.seg-cravou { background: var(--brand-acerto); }
.seg-segunda { background: var(--brand-acerto); opacity: 0.45; }
.seg-errou { height: var(--brand-espaco-1); background: var(--brand-erro); }
.seg-atual { background: var(--brand-superficie-2); box-shadow: inset 0 0 0 2px var(--brand-destaque); }

/* Cartão da pergunta (CartaoPergunta do DS). */
.cartao-pergunta {
  margin-bottom: var(--brand-espaco-4);
  padding: var(--brand-espaco-5);
  border-radius: var(--brand-raio-lg);
  background: var(--brand-superficie);
  box-shadow: var(--brand-sombra-cartao);
}
.cartao-pergunta-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-espaco-2);
  margin-bottom: var(--brand-espaco-4);
}

.pilar-E { --cor-pilar: var(--brand-pilar-e); --cor-pilar-suave: var(--brand-pilar-e-suave); --cor-pilar-texto: var(--brand-pilar-e-texto); }
.pilar-S { --cor-pilar: var(--brand-pilar-s); --cor-pilar-suave: var(--brand-pilar-s-suave); --cor-pilar-texto: var(--brand-pilar-s-texto); }
.pilar-G { --cor-pilar: var(--brand-pilar-g); --cor-pilar-suave: var(--brand-pilar-g-suave); --cor-pilar-texto: var(--brand-pilar-g-texto); }

.chip-pilar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 var(--brand-espaco-3) 0 var(--brand-espaco-1);
  border-radius: var(--brand-raio-pilula);
  background: var(--cor-pilar-suave);
  color: var(--cor-pilar-texto);
}
/* Letra sobre o tom "-texto" do pilar, como no DS, para ter contraste. */
.chip-letra {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--brand-raio-pilula);
  background: var(--cor-pilar-texto);
  color: var(--brand-superficie);
  font-size: 11px;
  letter-spacing: 0;
}

.nivel {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-espaco-2);
  color: var(--brand-tinta-suave);
}
.nivel-pontos { display: inline-flex; gap: var(--brand-espaco-1); }
.nivel-pontos i {
  width: var(--brand-espaco-2);
  height: var(--brand-espaco-2);
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-linha);
}
.nivel-pontos i.cheio { background: var(--brand-tinta-suave); }

.enunciado {
  margin: 0;
  color: var(--brand-tinta);
  text-wrap: pretty;
}
.instrucao {
  margin: var(--brand-espaco-2) 0 0;
  color: var(--brand-tinta-suave);
}

/* Alternativas (múltipla e V/F) */
.opcoes {
  display: grid;
  gap: var(--brand-espaco-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.opcoes-vf { grid-template-columns: 1fr 1fr; }

.opcao {
  display: grid;
  grid-template-columns: var(--brand-espaco-8) 1fr auto;
  align-items: center;
  gap: var(--brand-espaco-3);
  width: 100%;
  min-height: 56px;
  padding: var(--brand-espaco-3) var(--brand-espaco-4);
  border: 2px solid var(--brand-linha-controle);
  border-radius: var(--brand-raio-md);
  background: var(--brand-superficie);
  color: var(--brand-tinta);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.opcao:hover:not(:disabled) { border-color: var(--brand-selecao-borda); }
.opcao:disabled { cursor: default; }

.ico {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opcao .letra {
  display: grid;
  place-items: center;
  width: var(--brand-espaco-8);
  height: var(--brand-espaco-8);
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-superficie-2);
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* Palavra de estado ao lado do texto: "Certa" ou "Sua escolha", sempre com ícone. */
.opcao .estado {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-espaco-1);
  font-family: var(--brand-font-titulo);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.opcao .estado:empty { display: none; }

/* Selecionada, antes de conferir. Letra contornada: nunca texto branco sobre verde. */
.opcao.selecionada {
  border-color: var(--brand-selecao-borda);
  background: var(--brand-selecao);
}
.opcao.selecionada .letra {
  background: var(--brand-superficie);
  box-shadow: inset 0 0 0 2px var(--brand-selecao-borda);
  color: var(--brand-destaque);
}

/* Erro nunca é preenchido: contorno, fundo suave e texto riscado. */
.opcao.errada {
  border-color: var(--brand-erro);
  background: var(--brand-erro-suave);
  color: var(--brand-erro-texto);
}
.opcao.errada .letra { background: var(--brand-erro); color: var(--brand-erro-suave); }
.opcao.errada .texto { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* Acerto: preenchimento sólido. */
.opcao.certa {
  border-color: var(--brand-acerto-borda);
  background: var(--brand-acerto);
  color: var(--brand-sobre-acerto);
  font-weight: 600;
}
.opcao.certa .letra { background: var(--brand-sobre-acerto); color: var(--brand-acerto); }

.opcao.apagada { opacity: 0.55; }

/* Verdadeiro ou falso: dois botões grandes, ícone e palavra. */
.opcoes-vf .opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--brand-espaco-1);
  min-height: 96px;
  padding: var(--brand-espaco-3);
  text-align: center;
  font-family: var(--brand-font-titulo);
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
}
.opcoes-vf .ico { width: 28px; height: 28px; }
.opcoes-vf small {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.opcoes-vf small:empty { display: none; }

/* Ordenação */
.lista-ordem {
  display: grid;
  gap: var(--brand-espaco-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.item-ordem {
  display: grid;
  grid-template-columns: var(--brand-espaco-8) 1fr auto;
  align-items: center;
  gap: var(--brand-espaco-3);
  min-height: 60px;
  padding: var(--brand-espaco-1) var(--brand-espaco-1) var(--brand-espaco-1) var(--brand-espaco-3);
  border: 2px solid var(--brand-linha-controle);
  border-radius: var(--brand-raio-md);
  background: var(--brand-superficie);
}
.item-ordem .posicao {
  display: grid;
  place-items: center;
  width: var(--brand-espaco-8);
  height: var(--brand-espaco-8);
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-superficie-2);
}
.item-ordem .mover { display: flex; gap: var(--brand-espaco-1); }
.item-ordem .mover button {
  display: grid;
  place-items: center;
  width: var(--brand-alvo-toque);
  height: var(--brand-alvo-toque);
  border: 1px solid var(--brand-linha-controle);
  border-radius: var(--brand-raio-sm);
  background: var(--brand-superficie-2);
  cursor: pointer;
}
.item-ordem .mover button:disabled { opacity: 0.3; cursor: default; }
.item-ordem.certa { border-color: var(--brand-acerto-borda); background: var(--brand-acerto-suave); color: var(--brand-acerto-texto); }
.item-ordem.certa .posicao { background: var(--brand-acerto); color: var(--brand-sobre-acerto); }
.item-ordem.errada { border-color: var(--brand-erro); background: var(--brand-erro-suave); color: var(--brand-erro-texto); }
.item-ordem.errada .posicao { background: var(--brand-superficie); border: 2px solid var(--brand-erro); color: var(--brand-erro-texto); }
.item-ordem .sua-posicao { color: inherit; padding-right: var(--brand-espaco-2); }

.subtitulo-lista {
  margin: 0 0 var(--brand-espaco-2);
  color: var(--brand-tinta-suave);
}

/* Feedback */
.feedback:empty { display: none; }
.feedback {
  margin-top: var(--brand-espaco-4);
  display: grid;
  gap: var(--brand-espaco-3);
  scroll-margin-bottom: 7rem; /* não fica escondido atrás do botão fixo */
}

/* Selo de pontos (SeloPontos do DS). O único movimento com deslocamento: o pulo do acerto. */
.selo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--brand-espaco-2);
  height: 40px;
  margin: 0;
  padding: 0 var(--brand-espaco-4) 0 var(--brand-espaco-2);
  border-radius: var(--brand-raio-pilula);
  font-family: var(--brand-font-titulo);
  font-size: 16px;
  line-height: 20px;
  font-weight: 800;
}
.selo .ico { width: 24px; height: 24px; }
.selo-pts { font-size: 18px; }
.selo-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.selo-cravou { background: var(--brand-acerto); color: var(--brand-sobre-acerto); }
.selo-segunda { background: var(--brand-acerto-suave); color: var(--brand-acerto-texto); }
.selo-zero { padding-left: var(--brand-espaco-4); background: var(--brand-superficie-2); color: var(--brand-tinta-suave); }
.selo-entra { animation: pulo 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes pulo {
  from { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Bloco de feedback (Bloco do DS): dica, acerto ou erro. */
.bloco {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--brand-espaco-1) var(--brand-espaco-3);
  padding: var(--brand-espaco-4);
  border-radius: var(--brand-raio-md);
  background: var(--brand-superficie-2);
  color: var(--brand-tinta);
  transition: background-color 0.15s ease;
}
.bloco p { margin: 0; }
.bloco-ico {
  grid-row: span 2;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--brand-raio-pilula);
  background: var(--brand-superficie);
}
.bloco-titulo { font-family: var(--brand-font-titulo); font-size: 16px; line-height: 22px; font-weight: 700; }
.bloco-texto { font-size: 15px; line-height: 22px; }
.bloco .bloco-fonte { grid-column: 2; margin-top: var(--brand-espaco-1); font-size: 13px; line-height: 18px; color: var(--brand-tinta-suave); }
.bloco-fonte a { color: var(--brand-destaque); font-weight: 600; }

/* Ícone escuro sobre o amarelo nos dois temas (o amarelo da dica é claro em ambos). */
.bloco-dica { background: var(--brand-dica-suave); }
.bloco-dica .bloco-ico { background: var(--brand-dica); color: var(--brand-sobre-acerto); }
.bloco-dica .bloco-titulo, .bloco-dica .bloco-texto { color: var(--brand-dica-texto); }
.bloco-acerto { background: var(--brand-acerto-suave); }
.bloco-acerto .bloco-ico { background: var(--brand-acerto); color: var(--brand-sobre-acerto); }
.bloco-acerto .bloco-titulo { color: var(--brand-acerto-texto); }
.bloco-erro { background: var(--brand-erro-suave); }
.bloco-erro .bloco-ico { color: var(--brand-erro); }
.bloco-erro .bloco-titulo { color: var(--brand-erro-texto); }

/* ---------- Resultado ---------- */

.tela-resultado { text-align: center; }
.tela-resultado h1 { margin-top: var(--brand-espaco-2); }

.placar-final {
  margin: var(--brand-espaco-3) auto var(--brand-espaco-1);
  font-family: var(--brand-font-titulo);
}
.placar-final strong {
  display: block;
  color: var(--brand-destaque);
}
.placar-final span { color: var(--brand-tinta-suave); }

.resumo-acertos { color: var(--brand-tinta-suave); margin: var(--brand-espaco-2) 0 var(--brand-espaco-5); }

.perfil { display: grid; gap: var(--brand-espaco-4); margin: var(--brand-espaco-1) 0 0; padding: 0; list-style: none; }
.perfil-linha { display: grid; gap: var(--brand-espaco-1); }
.perfil-topo { display: flex; justify-content: space-between; gap: var(--brand-espaco-4); }
.perfil-topo .nome { display: inline-flex; align-items: center; gap: var(--brand-espaco-2); }
.perfil-topo .nome::before {
  content: ""; width: var(--brand-espaco-2); height: var(--brand-espaco-2); border-radius: var(--brand-raio-pilula); background: var(--cor-pilar);
}
.perfil-topo .valor { color: var(--brand-tinta-suave); }
.perfil-barra {
  height: var(--brand-espaco-2);
  border-radius: var(--brand-raio-sm);
  background: var(--brand-superficie-2);
  overflow: hidden;
}
.perfil-barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cor-pilar);
}
.perfil-nivel { color: var(--brand-tinta-suave); }

.nota { color: var(--brand-tinta-suave); margin: var(--brand-espaco-3) 0 0; }

@media (min-width: 40rem) {
  .acoes { grid-auto-flow: column; grid-auto-columns: 1fr; }
}