/* Identidade visual do Buxa — "plantão de madrugada". Ver DESIGN.md.
   Tema único escuro: não há claro, então nada de prefers-color-scheme aqui. */

@import url("fontes/fontes.css");

:root {
  /* Paleta (espelhada em web/cena.js) */
  --noite: #070A0F;
  --fundo: #0B1017;
  --cartao: #121A24;
  --cartao-alto: #18222E;
  --borda: #22303F;
  --texto: #EAF0F7;
  --suave: #93A3B6;
  --ecg: #4ADE9B;
  --alerta: #FF6A5C;
  --luz: #FFD9A0;

  --titulo: "Space Grotesk", system-ui, sans-serif;
  --corpo: "Inter", system-ui, -apple-system, sans-serif;

  --raio: 14px;
  --largura: 620px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Cena ---------- */
.cena-moldura {
  position: sticky;      /* a cena fica no topo e as dicas rolam por baixo */
  top: 0;
  z-index: 2;
  /* A cena é desenhada em 400x200: mantendo a moldura em 2:1 ela aparece
     inteira, sem cortar o monitor nem as luminárias. */
  aspect-ratio: 2 / 1;
  max-height: 46vh;
  overflow: hidden;
  background: var(--noite);
  /* A borda inferior desfocada funde a cena com a página. */
  box-shadow: inset 0 -40px 40px -24px var(--fundo);
}
.cena-moldura svg { display: block; width: 100%; height: 100%; }
/* Fim de jogo: a cena deixa de ser fixa e rola junto com a página. */
body.terminado .cena-moldura { position: relative; }

/* ---------- Estrutura ---------- */
.coluna { max-width: var(--largura); margin: 0 auto; padding: 0 18px; }

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 10px;
}
.marca {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 1px;
  margin: 0;
  color: var(--texto);
}
.marca em { font-style: normal; color: var(--ecg); }
.hud-dia { font-size: 14px; color: var(--suave); }

/* Pontos de progresso: um por dica. */
.pontos { display: flex; gap: 6px; }
.ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--borda);
  transition: background .4s ease, transform .4s ease;
}
.ponto.gasto { background: var(--luz); }
.ponto.erro { background: var(--alerta); }
.ponto.acerto { background: var(--ecg); transform: scale(1.3); }

/* ---------- Cartão de dica ---------- */
.dica {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 10px;
  box-shadow: var(--sombra);
  animation: subir .5s cubic-bezier(.16, .8, .3, 1);
}
.dica header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dica .rotulo {
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--suave);
}
.dica p { margin: 6px 0 0; }

/* A dica recém-revelada é rolada para dentro da tela; esta margem garante que
   ela pare ACIMA da barra de palpite, e não atrás dela. */
.dica { scroll-margin-bottom: 150px; scroll-margin-top: 12px; }

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

/* ---------- Barra de palpite ---------- */
.barra {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(to top, var(--fundo) 70%, transparent);
  padding: 14px 0 calc(16px + env(safe-area-inset-bottom, 0px));
}

.campo-caixa { position: relative; }
input[type="text"] {
  width: 100%;
  padding: 15px 16px;
  font-family: var(--corpo);
  font-size: 16px;            /* abaixo de 16px o iOS dá zoom ao focar */
  color: var(--texto);
  background: var(--cartao-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: border-color .25s ease, box-shadow .25s ease;
}
input[type="text"]:focus {
  outline: none;
  border-color: var(--ecg);
  box-shadow: 0 0 0 3px rgba(74, 222, 155, .15);
}
input::placeholder { color: var(--suave); }

/* Tremor curto no palpite errado. */
.tremor { animation: tremer .4s ease; border-color: var(--alerta) !important; }
@keyframes tremer {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
  100% { transform: none; }
}

/* Autocomplete próprio: o <datalist> não abre de forma confiável no celular. */
.sugestoes {
  position: absolute;
  left: 0; right: 0; bottom: calc(100% + 8px);
  max-height: 44vh; overflow-y: auto;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--cartao-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
/* Nome de faculdade é comprido: a sugestão QUEBRA em mais de uma linha, nunca
   corta com reticências. `overflow-wrap` é a garantia para o caso extremo de
   uma palavra só maior que a largura da lista. */
.sugestoes li {
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  overflow-wrap: anywhere;
}
.sugestoes li[aria-selected="true"], .sugestoes li:hover { background: var(--borda); }
.sugestoes[hidden] { display: none; }

/* ---------- Botões ---------- */
.botoes { display: flex; gap: 10px; margin-top: 10px; }
.btn {
  flex: 1;
  padding: 14px 16px;
  font-family: var(--titulo);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: var(--raio);
  background: var(--ecg);
  color: #06281A;
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.secundario {
  background: transparent; color: var(--suave); border-color: var(--borda);
}
.btn.secundario:hover { color: var(--texto); background: var(--cartao); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

/* ---------- Avisos e fim de jogo ---------- */
.aviso { min-height: 1.4em; margin: 8px 2px 0; font-size: 14px; color: var(--alerta); }
.aviso.ok { color: var(--ecg); }

.fim {
  margin-top: 18px; padding: 20px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
  animation: subir .6s cubic-bezier(.16, .8, .3, 1);
}
/* Card final: o diagnóstico é o protagonista; a frase vem menor, abaixo. */
.rotulo-dx {
  margin: 0;
  font-family: var(--titulo); font-weight: 500; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--suave);
}
.fim h2.resposta { font-size: 32px; line-height: 1.15; margin: 2px 0 8px; }
.frase-fim { margin: 0 0 4px; font-size: 16px; }
.placar { font-size: 24px; letter-spacing: 5px; margin: 6px 0; }
.resposta { font-family: var(--titulo); font-weight: 700; color: var(--ecg); }
.streak { color: var(--luz); font-size: 15px; }
.referencias { color: var(--suave); font-size: 14px; padding-left: 20px; }
/* Comentário do fim: um parágrafo por bloco; quebra simples vira quebra de linha. */
.explicacao { margin-top: 14px; }
.explicacao p { margin: 0 0 12px; white-space: pre-line; line-height: 1.55; }

footer { color: var(--suave); font-size: 13px; text-align: center; padding: 24px 18px 40px; }

/* A estatística da turma, logo abaixo da sequência. */
.turma { color: var(--suave); font-size: 14px; margin: 2px 0 0; }

/* Botão que parece link: usado no rodapé para a troca de aparelho, que é
   assunto secundário e não pode competir com o jogo. */
.link {
  background: none; border: 0; padding: 2px; cursor: pointer;
  color: var(--suave); font-family: var(--corpo); font-size: 12px;
  text-decoration: underline; text-underline-offset: 3px;
}
.link:hover { color: var(--texto); }

dialog {
  width: min(92vw, 420px);
  background: var(--cartao); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 22px; box-shadow: var(--sombra);
}
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog h2 { font-family: var(--titulo); font-size: 18px; margin: 0 0 8px; }
dialog .ajuda { color: var(--suave); font-size: 14px; margin: 0 0 14px; }
dialog .rotulo {
  display: block; margin: 18px 0 6px;
  font-family: var(--titulo); font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--suave);
}
.codigo {
  font-family: var(--titulo); font-size: 20px; letter-spacing: 2px;
  color: var(--ecg); text-align: center; margin: 12px 0 0; min-height: 1.2em;
}

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

@media (min-width: 680px) {
  .marca { font-size: 30px; }
}

/* Telas curtas (iPhone SE e afins): a cena cede espaço para o texto.
   Com 667px de altura, a cena em 2:1 comia 188px e a dica aberta ficava atrás
   da barra de palpite. */
@media (max-height: 720px) {
  /* Altura fixa em vez de max-height: com aspect-ratio, limitar a altura
     encolhia a LARGURA junto (a faixa virava 280px num aparelho de 375) e a
     cena aparecia como um quadrado no canto. */
  .cena-moldura { aspect-ratio: auto; height: 140px; }
  .hud { padding: 10px 0 6px; }
  .dica { padding: 13px 16px; margin-bottom: 8px; }
  .barra { padding-top: 10px; }
  .botoes { margin-top: 8px; }
  body { font-size: 16px; }
}