/* ============================================================
   ESTILO DO EBOOK INTERATIVO — tema: Bosque do Beto
   ============================================================ */

:root {
  --primaria: #3e7c3a;
  --primaria-escura: #28551f;
  --secundaria: #dcedc8;
  --fundo: #eef7e4;
  --destaque: #c96f1e;
  --destaque-claro: #fdeecb;
  --faixa: #a8c47f;
  --tinta: #3b2a1a;
  --branco: #fffdf8;
  --sombra: 0 6px 0 rgba(0, 0, 0, 0.12);
  --raio: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  font-weight: 600;
  background: var(--fundo);
  color: var(--tinta);
  min-height: 100vh;
}

h1, h2, h3 { font-family: 'Baloo 2', 'Nunito', sans-serif; }

/* ---------- Topo ---------- */
.topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--primaria);
  color: #fff;
  box-shadow: var(--sombra);
}
.topo-titulos { flex: 1; text-align: center; }
.topo h1 { font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.1; }
.subtitulo { font-size: 0.85rem; opacity: 0.92; }
.mascote { font-size: 2rem; }
.voltar {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.15s;
}
.voltar:hover { transform: scale(1.06); }

/* ---------- Menu de abas ---------- */
.menu {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  background: var(--secundaria);
  scrollbar-width: thin;
}
.aba {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.2rem;
  padding: 8px 14px;
  border: 3px solid transparent;
  border-radius: var(--raio);
  background: var(--branco);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform 0.15s;
  position: relative;
}
.aba span { font-size: 0.72rem; font-family: 'Nunito', sans-serif; font-weight: 800; }
.aba:hover { transform: translateY(-3px); }
.aba.ativa { border-color: var(--primaria); background: var(--destaque-claro); }
.aba.feita::after {
  content: '✔';
  position: absolute;
  top: -7px;
  right: -5px;
  background: #20a05a;
  color: #fff;
  font-size: 0.7rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

/* ---------- Seções ---------- */
main { max-width: 980px; margin: 0 auto; padding: 18px 14px 60px; }
.secao { display: none; animation: aparecer 0.35s ease; }
.secao.visivel { display: block; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.secao h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); color: var(--primaria-escura); margin-bottom: 4px; }
.instrucao { margin-bottom: 14px; }

.cartao {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
}

/* ---------- História ---------- */
.pagina-livro {
  background: var(--branco);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
#historia-img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.15s;
}
#historia-img.trocando { opacity: 0; }
.faixa-texto {
  background: var(--faixa);
  padding: 18px 22px;
}
#historia-texto {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  line-height: 1.45;
  text-align: center;
}
.controles-historia {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 16px;
}
.indicador { text-align: center; padding-bottom: 14px; font-weight: 800; opacity: 0.75; }

/* ---------- Botões ---------- */
.botao-grande {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: var(--primaria);
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform 0.15s;
}
.botao-grande:hover:not(:disabled) { transform: scale(1.05); }
.botao-grande:disabled { opacity: 0.4; cursor: default; }
.botao-grande.ouvir { background: var(--destaque); }
.botao-grande.ouvir.falando { animation: pulso 1s infinite; }
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.botao-mini {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  border: 3px solid var(--primaria);
  background: var(--branco);
  color: var(--primaria-escura);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform 0.15s;
}
.botao-mini:hover { transform: scale(1.05); }

/* ---------- Quiz / opções ---------- */
.quiz-progresso { font-weight: 800; opacity: 0.7; margin-bottom: 6px; }
#quiz-caixa h3 { font-size: 1.3rem; margin-bottom: 14px; }
.botao-opcao {
  display: block;
  width: 100%;
  text-align: left;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  background: var(--destaque-claro);
  color: var(--tinta);
  border: 3px solid var(--primaria);
  border-radius: var(--raio);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.12s, background 0.2s;
}
.botao-opcao:hover { transform: translateX(4px); }
.botao-opcao.certa { background: #20a05a; border-color: #167a43; color: #fff; }
.botao-opcao.errada { animation: tremer 0.4s; background: #ff6b6b; border-color: #d64545; color: #fff; }
.botao-opcao.travada { pointer-events: none; }
.botao-opcao.mini { text-align: center; padding: 8px 4px; margin-bottom: 0; font-size: 1.1rem; }
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.fim-atividade { text-align: center; padding: 18px 0; }
.fim-emoji { font-size: 3.4rem; display: block; margin-bottom: 8px; }
.fim-atividade h3 { margin-bottom: 6px; }
.fim-atividade .botao-grande { margin-top: 16px; }
.mensagem-vitoria {
  text-align: center;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.25rem;
  color: var(--primaria-escura);
  margin: 12px 0;
  min-height: 1.6em;
}

/* ---------- Ligar palavras ---------- */
.ligar-colunas { display: flex; gap: 18px; }
.ligar-coluna { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ficha {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 12px 10px;
  border: 3px solid var(--primaria);
  background: var(--branco);
  border-radius: var(--raio);
  cursor: pointer;
  transition: transform 0.12s;
  min-height: 62px;
}
.ficha:hover { transform: scale(1.03); }
.ficha.escolhida { background: var(--destaque); color: #fff; border-color: var(--destaque); }
.ficha.ligada { color: #fff; cursor: default; }
.ficha.errada { animation: tremer 0.4s; }
#ligar-denovo { display: block; margin: 8px auto 0; }

/* ---------- Caça-palavras ---------- */
.caca-cartao { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.caca-grade {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  touch-action: none;
  user-select: none;
  max-width: 420px;
  flex: 1 1 300px;
}
.caca-celula {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(0.8rem, 3.4vw, 1.15rem);
  background: var(--destaque-claro);
  border-radius: 8px;
  cursor: pointer;
}
.caca-celula.selecionada { background: var(--destaque); color: #fff; }
.caca-celula.encontrada { background: #20a05a; color: #fff; }
.caca-lista { list-style: none; display: flex; flex-direction: column; gap: 6px; min-width: 130px; }
.caca-lista li {
  font-weight: 800;
  background: var(--branco);
  border: 3px solid var(--primaria);
  border-radius: 999px;
  padding: 5px 14px;
  text-align: center;
}
.caca-lista li.riscada { text-decoration: line-through; opacity: 0.5; background: #d9f2e4; border-color: #20a05a; }
#caca-denovo { display: block; margin: 0 auto; }

/* ---------- Matemática ---------- */
.mat-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.mat-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px;
  text-align: center;
  transition: opacity 0.3s;
}
.mat-card.resolvido { outline: 4px solid #20a05a; }
.mat-emoji { font-size: 2.2rem; }
.mat-titulo { font-weight: 800; margin: 4px 0; }
.mat-conta { font-family: 'Baloo 2', sans-serif; font-size: 1.9rem; color: var(--primaria-escura); margin-bottom: 10px; }
.mat-opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#mat-denovo { display: block; margin: 0 auto; }

/* ---------- Paletas e canvas ---------- */
.paleta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cor {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.12s;
}
.cor:hover { transform: scale(1.15); }
.cor.escolhida { outline: 4px solid var(--tinta); transform: scale(1.12); }
.ferramentas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.opcao-tamanho { font-weight: 800; cursor: pointer; }
.moldura-canvas {
  border: 4px dashed var(--primaria);
  border-radius: var(--raio);
  overflow: hidden;
  background: #fff;
}
#desenho-canvas, #colorir-canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}
.colorir-minis { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.colorir-mini {
  border: 3px solid var(--primaria);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  width: 104px;
  transition: transform 0.12s;
}
.colorir-mini:hover { transform: scale(1.06); }
.colorir-mini.escolhida { outline: 4px solid var(--destaque); }
.colorir-mini img { display: block; width: 100%; height: 62px; object-fit: cover; }

/* ---------- Celebração ---------- */
.celebracao {
  position: fixed;
  left: 50%;
  top: 40%;
  font-size: 5rem;
  transform: translate(-50%, -50%);
  animation: estrela 1.1s ease forwards;
  pointer-events: none;
  z-index: 50;
}
@keyframes estrela {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
  40% { transform: translate(-50%, -50%) scale(1.4) rotate(10deg); opacity: 1; }
  100% { transform: translate(-50%, -120%) scale(1) rotate(0); opacity: 0; }
}

/* ---------- Rodapé ---------- */
.rodape { text-align: center; padding: 20px; opacity: 0.7; font-size: 0.9rem; }

@media (max-width: 560px) {
  .ligar-colunas { gap: 10px; }
  .ficha { font-size: 0.82rem; min-height: 70px; }
  .controles-historia .botao-grande { flex: 1 1 40%; font-size: 0.95rem; padding: 10px 12px; }
  .botao-grande.ouvir { order: 3; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}