/* ============================================================
   Vamos Ler! — Estilos
   ============================================================ */

/* ---------- Cores e medidas ---------- */
:root {
  /* Os itens da atividade (a palavra, o que a criança escreve, o teclado, as lacunas
     e as opções da escolha): em maiúsculas ou minúsculas, pela atividades.maiusculas
     (data-maiusculas no <html>, ver aplicarMaiusculas() no script.js). */
  --caixa-dos-itens: lowercase;
  --texto: #2b2d42;
  --texto-suave: #5c5f7a;
  --fundo-1: #fff4cc;
  --fundo-2: #d6efff;
  --cartao: #ffffff;

  --verde: #1f7a35;
  --verde-escuro: #155a26;
  --roxo: #5b34c4;
  --roxo-escuro: #43249a;
  --vermelho: #c0392b;
  --dourado: #ffc83d;

  --raio: 22px;
  --sombra: 0 6px 0 rgba(43, 45, 66, 0.18);
  --sombra-cartao: 0 10px 30px rgba(43, 45, 66, 0.15);

  --fonte-interface: 'Nunito', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --fonte-leitura: 'Andika', 'Nunito', 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  /* Emojis do próprio aparelho: a fonte web de emoji, em tamanho grande, fazia o desenho piscar. */
  --fonte-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* Visual novo (design/tokens.json): Abertura, Login, Adicionar aluno, Home, Jogar livre, leitura, escrita e sucesso. */
  --amarelo: #FFE58F;
  --fundo-circulo-1: #FFD95E;
  --fundo-circulo-2: #FFEDB0;
  --texto-jogo: #2E2140;
  --texto-jogo-suave: #5A4A2A;
  --sombra-amarela: #E8C24A;
  --chao: #F5D46A;
  --divisoria: #D9B23A;
  --verde-acerto: #187A41;
  --verde-acerto-sombra: #0F5A2E;
  --microfone: #5B3CC4;
  --microfone-sombra: #432B94;
  --microfone-ouvindo: #7C5CE0;
  --microfone-pulso: #B9A3FF;
  --selo-amarelo: #FFC93C;
  --selo-amarelo-texto: #3E2A00;
  --placeholder: #FFF6D6;
  --semente-cheia: #7A4B00;
  --campo-placeholder: #A08C5C;
  --marca-le: #187A41;

  /* 1% da altura visível (dvh desconta a barra do navegador no celular). */
  --vh: 1vh;
}
@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
:root[data-maiusculas="sim"] { --caixa-dos-itens: uppercase; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--fonte-interface);
  color: var(--texto);
  background: linear-gradient(160deg, var(--fundo-1) 0%, var(--fundo-2) 100%) fixed;
  background-color: var(--fundo-2);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  color: inherit;
  text-transform: inherit; /* botões não herdam por padrão */
  cursor: pointer;
  touch-action: manipulation; /* evita zoom com toque duplo */
}

button:focus-visible {
  outline: 4px solid var(--roxo);
  outline-offset: 3px;
}

/* ---------- Telas ---------- */
.tela {
  display: none;
  flex-direction: column;
  align-items: center;
  /* Cada tela ocupa exatamente a altura visível; o conteúdo se ajusta a ela.
     O scroll só aparece como último recurso em telas minúsculas. */
  height: calc(var(--vh) * 100);
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  gap: clamp(8px, calc(var(--vh) * 2), 18px);
  position: relative;
  z-index: 1; /* por cima do jardim do fundo */
}
.tela.ativa { display: flex; }

/* ---------- Jardim no fundo das telas ---------- */
.jardim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(90px, calc(var(--vh) * 24), 240px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s;
}
/* Nas telas de leitura o jardim fica bem suave e parado (mais leve em tablets simples). */
.jardim.suave { opacity: 0.14; }
.jardim.suave use { animation: none; }

.jardim-grama {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  background: linear-gradient(180deg, #8fd46b 0%, #6cbf52 45%, #58a843 100%);
  border-top: 4px solid #4f9d3a;
  border-radius: 50% 50% 0 0 / 40px 40px 0 0;
}

.planta-jardim {
  position: absolute;
  width: auto;
  aspect-ratio: 100 / 130;
  transform: translateX(-50%);
  overflow: visible;
}
/* Balanço leve, a partir da base da planta. */
.planta-jardim use {
  transform-box: view-box;
  transform-origin: 50% 97%;
  animation: balancar 4.5s ease-in-out var(--atraso, 0s) infinite alternate;
}
.planta-jardim.nova { transform-origin: 50% 100%; animation: chegar-no-jardim 0.9s ease-out; }

/* ---------- Botões genéricos ---------- */
.botao {
  border: none;
  border-radius: var(--raio);
  font-size: clamp(1.1rem, min(5vw, calc(var(--vh) * 3.6)), 2rem);
  font-weight: 900;
  min-height: clamp(48px, calc(var(--vh) * 9), 72px);
  padding: 8px 28px;
  box-shadow: var(--sombra);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.botao:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(43, 45, 66, 0.18);
}
.botao:disabled {
  filter: grayscale(0.9);
  opacity: 0.55;
  cursor: not-allowed;
}

.botao-principal { background: var(--verde); color: #fff; }
.botao-principal:hover:not(:disabled) { background: var(--verde-escuro); }

.botao-secundario { background: #fff; color: var(--texto); border: 3px solid #c9cde0; }
.botao-secundario:hover { background: #f3f4fa; }

.botao-perigo { background: var(--vermelho); color: #fff; }

/* ---------- Telas com o visual novo (Home, Jogar livre, leitura, escrita e sucesso) ----------
   Cores de design/tokens.json. O layout segue a §1 do design/LEIA-ME.md:
   celular (menor lado < 600px) ou tablet/desktop, vertical (altura ≥ largura) ou
   horizontal. As medidas de cada layout ficam em variáveis, trocadas nas media queries. */
.tela-nova {
  padding: 0;
  gap: 0;
  overflow: hidden; /* só a lista do Jogar livre rola (por dentro) */
  background: var(--amarelo);
  color: var(--texto-jogo);
  font-family: 'Baloo 2', var(--fonte-interface);
  text-transform: none; /* maiúsculas e minúsculas como no design */
}

/* ---------- Tela inicial (Home) ---------- */
.home-ceu, .home-jardim { position: absolute; inset: 0; pointer-events: none; }
.home-circulo { position: absolute; border-radius: 50%; }
/* Chão: do horizonte até o pé da tela, mais largo que a tela e com o topo em elipse. */
.home-chao {
  position: absolute;
  left: calc(-1 * var(--chao-sobra));
  right: calc(-1 * var(--chao-sobra));
  top: var(--chao-topo);
  bottom: 0;
  border-radius: 50% 50% 0 0 / var(--chao-raio) var(--chao-raio) 0 0;
  background: var(--chao);
  pointer-events: none;
}
/* Cada planta do jardim numa vaga: x e base em % do quadro do layout, tamanho em px. */
.home-vaga { position: absolute; overflow: visible; }

.home-conteudo {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
  padding: max(var(--margem-topo), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--margem-base), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}

/* O topo fica na frente da árvore da Home (que pode subir até o espaço logo abaixo dele). */
.home-topo { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--topo-espaco); height: var(--topo); flex-shrink: 0; }
/* Nome do app em texto (design/LEIA-ME.md §2): "Lê" verde + "Letrinhas". */
.home-marca {
  font-size: var(--marca-fonte);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: var(--marca-margem, 0px);
}
.home-marca-le { color: var(--marca-le); }
.home-quebra { display: none; }
.home-crianca {
  display: flex;
  align-items: center;
  gap: var(--nome-espaco);
  height: var(--topo);
  min-width: 0;
  padding: var(--nome-padding);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 var(--sombra-amarela);
}
.home-avatar {
  width: var(--avatar);
  height: var(--avatar);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--microfone);
  color: #fff;
  font-size: var(--avatar-fonte);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-nome { font-size: var(--nome-fonte); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-espaco { flex-grow: 1; }
.home-redondo, .home-area {
  height: var(--topo);
  flex-shrink: 0;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 4px 0 var(--sombra-amarela);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-redondo { width: var(--topo); }
.home-redondo svg { width: var(--topo-icone-menor); height: var(--topo-icone-menor); }
/* Área do Responsável e Área do Professor: pílulas com o texto (no celular vertical, só o ícone). */
.home-area {
  gap: 8px;
  padding: var(--area-padding);
  color: var(--microfone-sombra);
  font-size: var(--area-fonte);
  font-weight: 800;
  text-decoration: none;
}
.home-area svg { width: var(--area-icone); height: var(--area-icone); }

.home-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--espaco); }
/* A planta fica apoiada no chão (embaixo do espaço livre) e só encolhe se não couber. */
.home-planta-area {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: var(--planta-padding-base, 0px);
}
/* Árvore da marca atrás da planta (§7.1): centralizada, com a base escondida atrás do vaso.
   Tem o tamanho do design, mas encolhe para não passar do espaço acima da área da planta. */
.home-arvore {
  position: absolute;
  left: 50%;
  bottom: calc(var(--planta-padding-base, 0px) + var(--arvore-base));
  height: min(var(--arvore-a), calc(100% - var(--planta-padding-base, 0px) - var(--arvore-base) + var(--espaco)));
  aspect-ratio: var(--arvore-proporcao);
  transform: translateX(-50%);
  background: var(--arvore) no-repeat center bottom / contain;
  pointer-events: none;
}
.home-planta {
  position: relative;
  height: min(var(--planta-a), 100%);
  aspect-ratio: var(--planta-proporcao);
  flex-shrink: 0;
}
.home-planta-sombra {
  position: absolute;
  left: var(--sombra-lados);
  right: var(--sombra-lados);
  bottom: var(--sombra-base);
  height: var(--sombra-a);
  border-radius: 50%;
  background: var(--sombra-amarela);
}
.home-planta-imagem { position: absolute; inset: 0; }
.home-planta-imagem svg { display: block; width: 100%; height: 100%; }

.home-sementes {
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--sementes-gap);
  height: var(--sementes-a);
  flex-shrink: 0;
  padding: 0 var(--sementes-padding);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 5px 0 var(--sombra-amarela);
}
.home-sementes-fileira { display: flex; align-items: center; gap: var(--sementes-espaco); }
.semente {
  width: var(--semente-l);
  height: var(--semente-a);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; /* gota */
  background: #FFEDB0;
  border: 2px dashed var(--divisoria);
}
.semente.cheia { background: #7A4B00; border: none; }
.home-sementes-texto { font-size: var(--sementes-texto); font-weight: 800; color: var(--texto-jogo-suave); }

.home-botoes { display: flex; flex-direction: column; gap: var(--botoes-espaco); flex-shrink: 0; }
.home-missao, .home-livre { border: none; display: flex; align-items: center; min-width: 0; }
.home-missao {
  height: var(--missao-a);
  gap: var(--missao-gap);
  padding: var(--missao-padding);
  border-radius: var(--missao-raio);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--missao-sombra) 0 var(--verde-acerto-sombra);
  text-align: left;
}
.home-missao-icone {
  width: var(--missao-caixa);
  height: var(--missao-caixa);
  flex-shrink: 0;
  border-radius: var(--missao-caixa-raio);
  background: var(--verde-acerto-sombra);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-missao-icone svg { width: var(--missao-icone); height: var(--missao-icone); }
.home-missao-textos { display: flex; flex-direction: column; gap: var(--missao-textos-gap); flex-grow: 1; min-width: 0; line-height: 1.1; }
.home-missao-titulo { font-size: var(--missao-titulo); font-weight: 800; }
.home-missao-sub { font-size: var(--missao-sub); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-missao-seta { width: var(--missao-seta); height: var(--missao-seta); flex-shrink: 0; }
.home-livre {
  height: var(--livre-a);
  justify-content: center;
  gap: var(--livre-gap);
  border-radius: var(--livre-raio);
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--livre-sombra) 0 var(--sombra-amarela);
  font-size: var(--livre-fonte);
  font-weight: 800;
}
.home-livre svg { width: var(--livre-icone); height: var(--livre-icone); color: var(--microfone); }
.home-missao:active, .home-livre:active, .home-redondo:active, .home-area:active { transform: translateY(3px); box-shadow: none; }

.tela-home { --planta-proporcao: 180 / 220; }

/* Home — celular vertical (quadro 390x844) */
@media (orientation: portrait) and (max-width: 599.98px) {
  .tela-home {
    --margem-topo: 20px; --margem-lados: 16px; --margem-base: 16px; --espaco: 14px;
    --topo: 48px; --topo-espaco: 8px; --topo-icone: 24px; --topo-icone-menor: 22px; --area-icone: 24px;
    --avatar: 36px; --avatar-fonte: 18px; --nome-fonte: 20px; --nome-padding: 0 16px 0 6px; --nome-espaco: 8px;
    --planta-l: 180px; --planta-a: 220px; --sombra-lados: 14px; --sombra-base: -10px; --sombra-a: 22px;
    --sementes-a: 56px; --sementes-padding: 18px; --sementes-espaco: 6px; --sementes-texto: 18px; --sementes-gap: 12px;
    --semente-l: 16px; --semente-a: 22px; --apos-planta: 14px; --botoes-espaco: 12px;
    --missao-a: 96px; --missao-raio: 28px; --missao-sombra: 6px; --missao-padding: 0 18px 0 16px; --missao-gap: 14px;
    --missao-caixa: 60px; --missao-caixa-raio: 20px; --missao-icone: 30px; --missao-titulo: 26px; --missao-sub: 16px; --missao-seta: 28px; --missao-textos-gap: 2px;
    --livre-a: 72px; --livre-raio: 28px; --livre-sombra: 5px; --livre-fonte: 22px; --livre-icone: 26px; --livre-gap: 10px;
    --chao-topo: 60.43%; --chao-raio: 40px; --chao-sobra: 40px;
    --marca-fonte: 28px;
    --arvore: url(marca/arvore-home-celularVertical.svg); --arvore-a: 414.2px; --arvore-proporcao: 280 / 414.2; --arvore-base: 16px;
  }
  .home-circulo:nth-child(1) { left: 74.36%; top: 13.03%; width: 130px; height: 130px; background: var(--fundo-circulo-1); }
  .home-circulo:nth-child(2) { left: -12.82%; top: 27.25%; width: 110px; height: 110px; background: var(--fundo-circulo-2); }
  .home-circulo:nth-child(3) { left: 60.51%; top: 8.77%; width: 34px; height: 34px; background: var(--fundo-circulo-1); }
}
/* Home — celular horizontal (quadro 844x390) */
@media (orientation: landscape) and (max-height: 599.98px) {
  .tela-home {
    --margem-topo: 16px; --margem-lados: 32px; --margem-base: 16px; --espaco: 12px;
    --topo: 48px; --topo-espaco: 10px; --topo-icone: 24px; --topo-icone-menor: 22px; --area-icone: 22px;
    --avatar: 36px; --avatar-fonte: 18px; --nome-fonte: 20px; --nome-padding: 0 16px 0 6px; --nome-espaco: 8px;
    --planta-l: 140px; --planta-a: 170px; --sombra-lados: 12px; --sombra-base: -8px; --sombra-a: 18px;
    --sementes-a: 48px; --sementes-padding: 16px; --sementes-espaco: 5px; --sementes-texto: 17px; --sementes-gap: 10px;
    --semente-l: 14px; --semente-a: 19px; --apos-planta: 12px; --botoes-espaco: 12px;
    --missao-a: 92px; --missao-raio: 28px; --missao-sombra: 6px; --missao-padding: 0 18px 0 16px; --missao-gap: 14px;
    --missao-caixa: 56px; --missao-caixa-raio: 18px; --missao-icone: 28px; --missao-titulo: 26px; --missao-sub: 16px; --missao-seta: 28px; --missao-textos-gap: 2px;
    --livre-a: 68px; --livre-raio: 28px; --livre-sombra: 5px; --livre-fonte: 22px; --livre-icone: 26px; --livre-gap: 10px;
    --chao-topo: 65.13%; --chao-raio: 36px; --chao-sobra: 40px;
    --colunas-espaco: 24px; --coluna-direita: 340px;
    --area-fonte: 16px; --area-padding: 0 18px 0 14px;
    --marca-fonte: 26px; --planta-padding-base: 10px;
    --arvore: url(marca/arvore-home-celularHorizontal.svg); --arvore-a: 281.7px; --arvore-proporcao: 186 / 281.7; --arvore-base: 12px;
  }
  .home-circulo:nth-child(1) { left: 71.09%; top: 10.26%; width: 100px; height: 100px; background: var(--fundo-circulo-1); }
  .home-circulo:nth-child(2) { left: -4.74%; top: 23.08%; width: 96px; height: 96px; background: var(--fundo-circulo-2); }
  .home-circulo:nth-child(3) { left: 39.1%; top: 7.69%; width: 30px; height: 30px; background: var(--fundo-circulo-1); }
}
/* Home — tablet / desktop vertical (quadro 834x1194) */
@media (orientation: portrait) and (min-width: 600px) {
  .tela-home {
    --margem-topo: 28px; --margem-lados: 32px; --margem-base: 32px; --espaco: 20px;
    --topo: 56px; --topo-espaco: 12px; --topo-icone: 26px; --topo-icone-menor: 24px; --area-icone: 24px;
    --avatar: 44px; --avatar-fonte: 22px; --nome-fonte: 24px; --nome-padding: 0 20px 0 6px; --nome-espaco: 10px;
    --planta-l: 280px; --planta-a: 350px; --sombra-lados: 20px; --sombra-base: -14px; --sombra-a: 30px;
    --sementes-a: 64px; --sementes-padding: 22px; --sementes-espaco: 8px; --sementes-texto: 22px; --sementes-gap: 14px;
    --semente-l: 20px; --semente-a: 27px; --apos-planta: 20px; --botoes-espaco: 16px;
    --missao-a: 112px; --missao-raio: 32px; --missao-sombra: 6px; --missao-padding: 0 22px 0 20px; --missao-gap: 16px;
    --missao-caixa: 68px; --missao-caixa-raio: 22px; --missao-icone: 34px; --missao-titulo: 30px; --missao-sub: 18px; --missao-seta: 30px; --missao-textos-gap: 2px;
    --livre-a: 112px; --livre-raio: 32px; --livre-sombra: 6px; --livre-fonte: 26px; --livre-icone: 30px; --livre-gap: 12px;
    --chao-topo: 68.68%; --chao-raio: 56px; --chao-sobra: 60px;
    --area-fonte: 18px; --area-padding: 0 22px 0 16px;
    --marca-fonte: 28px;
    --arvore: url(marca/arvore-home-tabletVertical.svg); --arvore-a: 800.4px; --arvore-proporcao: 592 / 800.4; --arvore-base: 20px;
  }
  .home-circulo:nth-child(1) { left: 76.74%; top: 13.4%; width: 180px; height: 180px; background: var(--fundo-circulo-1); }
  .home-circulo:nth-child(2) { left: -8.39%; top: 35.18%; width: 150px; height: 150px; background: var(--fundo-circulo-2); }
  .home-circulo:nth-child(3) { left: 64.75%; top: 10.05%; width: 44px; height: 44px; background: var(--fundo-circulo-1); }
}
/* Home — desktop horizontal (quadro 1440x900) */
@media (orientation: landscape) and (min-height: 600px) {
  .tela-home {
    --margem-topo: 32px; --margem-lados: 48px; --margem-base: 40px; --espaco: 24px;
    --topo: 56px; --topo-espaco: 12px; --topo-icone: 26px; --topo-icone-menor: 24px; --area-icone: 24px;
    --avatar: 44px; --avatar-fonte: 22px; --nome-fonte: 24px; --nome-padding: 0 22px 0 6px; --nome-espaco: 10px;
    --planta-l: 260px; --planta-a: 320px; --sombra-lados: 22px; --sombra-base: -14px; --sombra-a: 32px;
    --sementes-a: 64px; --sementes-padding: 22px; --sementes-espaco: 8px; --sementes-texto: 22px; --sementes-gap: 14px;
    --semente-l: 20px; --semente-a: 27px; --apos-planta: 24px; --botoes-espaco: 16px;
    --missao-a: 128px; --missao-raio: 36px; --missao-sombra: 7px; --missao-padding: 0 26px 0 24px; --missao-gap: 18px;
    --missao-caixa: 76px; --missao-caixa-raio: 24px; --missao-icone: 38px; --missao-titulo: 34px; --missao-sub: 20px; --missao-seta: 32px; --missao-textos-gap: 4px;
    --livre-a: 96px; --livre-raio: 32px; --livre-sombra: 6px; --livre-fonte: 28px; --livre-icone: 30px; --livre-gap: 12px;
    --chao-topo: 60.89%; --chao-raio: 60px; --chao-sobra: 80px;
    --colunas-espaco: 48px; --coluna-direita: 480px;
    --area-fonte: 18px; --area-padding: 0 22px 0 16px;
    --marca-fonte: 38px; --marca-margem: 12px;
    --arvore: url(marca/arvore-home-desktopHorizontal.svg); --arvore-a: 654.8px; --arvore-proporcao: 450 / 654.8; --arvore-base: 16px;
  }
  .home-circulo:nth-child(1) { left: 81.94%; top: 13.33%; width: 200px; height: 200px; background: var(--fundo-circulo-1); }
  .home-circulo:nth-child(2) { left: -5.56%; top: 33.33%; width: 170px; height: 170px; background: var(--fundo-circulo-2); }
  .home-circulo:nth-child(3) { left: 48.61%; top: 16.67%; width: 50px; height: 50px; background: var(--fundo-circulo-1); }
}

/* Arranjos da Home: celular vertical (pilha; as Áreas do Responsável e do Professor viram só o ícone e o nome da
   criança vai para a 2ª linha do topo), tablet (pilha com os botões lado a lado) e os
   horizontais (planta à esquerda, botões à direita). */
@media (orientation: portrait) and (max-width: 599.98px) {
  .home-area { width: var(--topo); padding: 0; }
  .home-area-texto { display: none; }
  .home-topo { height: auto; flex-wrap: wrap; row-gap: 0; }
  .home-marca, .home-espaco, .home-topo > a, .home-topo > button { order: 1; }
  .home-quebra { display: block; order: 2; flex-basis: 100%; height: 0; }
  .home-crianca { order: 3; margin-top: var(--espaco); }
}
/* A equipe vê as duas áreas: as pílulas só cabem com o texto no desktop largo; fora dele, viram só o ícone. */
@media not all and (orientation: landscape) and (min-height: 600px) and (min-width: 1100px) {
  .home-topo-duas-areas .home-area { width: var(--topo); padding: 0; }
  .home-topo-duas-areas .home-area-texto { display: none; }
}
@media (orientation: portrait) and (min-width: 600px) {
  .tela-home { --planta-proporcao: 280 / 350; }
  .home-botoes { flex-direction: row; gap: 16px; }
  .home-missao { flex: 1.4 1 0; }
  .home-livre { flex: 1 1 0; }
}
@media (orientation: landscape) {
  .home-corpo { display: grid; grid-template-columns: minmax(0, 1fr) var(--coluna-direita); column-gap: var(--colunas-espaco); }
  .home-planta-area { grid-area: planta; }
  .home-sementes { grid-area: sementes; justify-self: center; }
  .home-botoes { grid-area: botoes; }
}
/* Celular horizontal: planta embaixo da coluna esquerda; sementes e botões centralizados à direita. */
@media (orientation: landscape) and (max-height: 599.98px) {
  .tela-home { --planta-proporcao: 140 / 170; }
  .home-corpo {
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "planta ." "planta sementes" "planta botoes" "planta .";
    row-gap: var(--botoes-espaco);
  }
}
/* Desktop: planta e sementes embaixo da coluna esquerda; botões centralizados à direita. */
@media (orientation: landscape) and (min-height: 600px) {
  .tela-home { --planta-proporcao: 260 / 320; }
  .home-corpo {
    grid-template-rows: 1fr auto;
    grid-template-areas: "planta botoes" "sementes botoes";
    row-gap: var(--apos-planta);
  }
  .home-botoes { align-self: center; }
}

/* ---------- Plantinha ---------- */
.planta.sede { filter: saturate(0.45) brightness(0.97); }

/* ---------- Barra do topo (tela entre as etapas da missão) ---------- */

.barra-topo {
  width: 100%;
  max-width: 1000px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.botao-discreto, .espaco-botao {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
}
.botao-discreto {
  border: 2px solid rgba(43, 45, 66, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  font-size: 1.5rem;
  opacity: 0.75;
}
.botao-discreto:hover { opacity: 1; }

.progresso { flex: 1; }

/* ---------- Tela do jogo (leitura) ----------
   Medidas de design/ (celular vertical) e de design-home-atividade/ (os outros três layouts).
   O palco usa --u: 1px no quadro de referência e menos quando a tela é menor, para tudo
   caber sem scroll; o mascote usa --m (1,4 × --u no tablet e no desktop). Os botões
   e o topo não encolhem. --fonte-palavra e --cartao-altura (sem unidade) também são
   lidos pelo script.js para limitar o tamanho da palavra. */
#tela-jogo {
  --m: var(--u);
  --palco-largura: calc(var(--palco-l) * var(--u));
  --voltar: 48px; --licao: 14px; --titulo: 20px; --topo-gap: 12px;
  --progresso-altura: 12px; --progresso-margem: 0px;
  --cartao-raio: 40; --cartao-sombra: 10px; --cartao-padding: 20;
  --palavra-espacamento: 3px;
  --mic-altura: 64px; --mic-min: 230px; --mic-padding: 28px; --mic-fonte: 22px; --mic-icone: 28px;
  --mic-gap: 12px; --mic-sombra: 5px; --pulso: -6px; --onda-l: 5px; --onda-a: 26px; --ondas-gap: 4px;
  --selo: 18px; --selo-fonte: 13px; --selo-direita: -8px; --selo-topo: -6px;
  --dica: 15px; --palco-mic: 18px;
  --rotulo: 14px; --adulto-padding: 14px; --adulto-gap: 10px;
  --botao-a: 84px; --botao-raio: 28px; --botao-sombra: 5px; --botao-gap: 8px; --botoes-gap: 12px;
  --ajuda-fonte: 22px; --acerto-fonte: 24px; --ajuda-icone: 28px; --acerto-icone: 30px;
  --acerto-borda: 5px; --selo-mb-borda: 3px; --selo-mb-gap: 10px;
}
/* Celular vertical (390×844): o palco ocupa a largura (até 358px) e só a altura encolhe. */
@media (orientation: portrait) and (max-width: 599.98px) {
  #tela-jogo {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 380px) / 380), calc((100vw - 32px) / 358)), 1px);
    --margem-topo: 20px; --margem-lados: 16px; --margem-base: 16px; --espaco: 14px;
    --palco-largura: min(100%, max(358px, calc(358 * var(--u))));
    --cartao-altura: 260; --fonte-palavra: 104;
    --mic-altura: clamp(52px, calc(var(--vh) * 7.6), 64px);
    --botao-a: clamp(60px, calc(var(--vh) * 10), 84px);
  }
}
/* Celular horizontal (844×390): palco 436×292 à esquerda, coluna de 320px à direita. */
@media (orientation: landscape) and (max-height: 599.98px) {
  #tela-jogo {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 92px - env(safe-area-inset-bottom)) / 302),
         calc((100vw - 2 * max(32px, env(safe-area-inset-left), env(safe-area-inset-right)) - 344px) / 436)), 1px);
    --margem-topo: 16px; --margem-lados: 32px; --margem-base: 16px; --espaco: 12px;
    --palco-l: 436; --cartao-altura: 180; --fonte-palavra: 104;
    --progresso-margem: 12px;
    --colunas-gap: 24px; --coluna-direita: 320px; --direita-espaco: 14px;
  }
}
/* Tablet / desktop vertical (834×1194): pilha como o celular, tudo maior. */
@media (orientation: portrait) and (min-width: 600px) {
  #tela-jogo {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 480px) / 509), calc((100vw - 64px) / 680)), 1px);
    --m: calc(1.4 * var(--u));
    --margem-topo: 28px; --margem-lados: 32px; --margem-base: 32px; --espaco: 20px;
    --palco-l: 680; --cartao-altura: 340; --fonte-palavra: 150; --palco-mic: 30px;
  }
}
/* Desktop horizontal (1440×900): palco 760×517 à esquerda, coluna de 440px à direita. */
@media (orientation: landscape) and (min-height: 600px) {
  #tela-jogo {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 152px) / 529),
         calc((100vw - 2 * max(48px, env(safe-area-inset-left), env(safe-area-inset-right)) - 488px) / 760)), 1px);
    --m: calc(1.4 * var(--u));
    --margem-topo: 32px; --margem-lados: 48px; --margem-base: 40px; --espaco: 24px;
    --palco-l: 760; --cartao-altura: 360; --fonte-palavra: 160;
    --progresso-margem: 24px;
    --colunas-gap: 48px; --coluna-direita: 440px; --direita-espaco: 24px;
  }
}
/* Tablet e desktop: topo, microfone e botões do adulto maiores. */
@media (min-width: 600px) and (min-height: 600px) {
  #tela-jogo {
    --voltar: 56px; --licao: 16px; --titulo: 26px; --topo-gap: 16px;
    --progresso-altura: 14px;
    --cartao-raio: 48; --cartao-sombra: 12px; --cartao-padding: 28;
    --palavra-espacamento: 4px;
    --mic-altura: 72px; --mic-min: 280px; --mic-padding: 32px; --mic-fonte: 26px; --mic-icone: 32px;
    --mic-gap: 14px; --mic-sombra: 6px; --pulso: -7px; --onda-l: 6px; --onda-a: 30px; --ondas-gap: 5px;
    --selo: 20px; --selo-fonte: 14px; --selo-direita: -9px; --selo-topo: -7px;
    --dica: 18px;
    --rotulo: 16px; --adulto-padding: 16px; --adulto-gap: 12px;
    --botao-a: 104px; --botao-raio: 32px; --botao-sombra: 6px; --botao-gap: 10px; --botoes-gap: 16px;
    --ajuda-fonte: 26px; --acerto-fonte: 28px; --ajuda-icone: 32px; --acerto-icone: 34px;
    --acerto-borda: 6px; --selo-mb-borda: 4px; --selo-mb-gap: 12px;
  }
}

/* Círculos do fundo: posição e tamanho sorteados a cada palavra; ficam atrás de tudo e não recebem toque. */
.circulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.circulo {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  transition: left 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease, background-color 0.5s ease;
}

.jogo-conteudo {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
  padding: max(var(--margem-topo), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--margem-base), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}

/* Topo: Voltar, Lição/título e a barra (que desce para uma linha própria nos layouts verticais). */
.jogo-topo { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--topo-gap); row-gap: var(--espaco); flex-shrink: 0; }
.botao-voltar {
  flex: 0 0 var(--voltar);
  width: var(--voltar);
  height: var(--voltar);
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 4px 0 var(--sombra-amarela);
  display: flex;
  align-items: center;
  justify-content: center;
}
.jogo-titulos { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; line-height: 1.1; }
.jogo-sobretitulo { font-size: var(--licao); font-weight: 600; color: var(--texto-jogo-suave); }
.jogo-titulo { font-size: var(--titulo); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Barra contínua: itens já respondidos ÷ total (sem marcar acerto ou ajuda). */
.jogo-progresso {
  flex: 1 1 100%;
  height: var(--progresso-altura);
  border-radius: calc(var(--progresso-altura) / 2);
  background: var(--chao);
  overflow: hidden;
}
.jogo-progresso-barra { width: 0; height: 100%; border-radius: inherit; background: var(--verde-acerto); transition: width 0.4s ease; }
@media (orientation: landscape) {
  .jogo-topo { flex-wrap: nowrap; }
  .jogo-titulos { max-width: 45%; }
  .jogo-progresso { flex: 1 1 0; margin-left: var(--progresso-margem); }
}

/* Texto da parte (para o aluno ou os pais): faixa branca embaixo do topo, na leitura e na escrita.
   O corpo encolhe para dar lugar a ela. */
.instrucao-parte {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 16px;
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 3px 0 var(--sombra-amarela);
  font-size: clamp(14px, 2.2vmin, 18px);
  font-weight: 700;
  line-height: 1.25;
}
.instrucao-parte[hidden] { display: none; }
.instrucao-icone { flex-shrink: 0; font-family: var(--fonte-emoji); }

/* Corpo. Vertical: palco e microfone no meio do espaço que sobra, adulto embaixo.
   Horizontal: palco centralizado à esquerda; microfone e adulto numa coluna à direita. */
.jogo-corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr auto;
  grid-template-areas: "." "palco" "microfone" "." "adulto";
  justify-items: center;
  position: relative; /* para o selo do acerto sem microfone (.escuta-linha.sem-microfone) */
}
.palco { grid-area: palco; }
.escuta-linha { grid-area: microfone; margin-top: var(--palco-mic); }
.area-adulto { grid-area: adulto; justify-self: stretch; margin-top: var(--espaco); }
@media (orientation: landscape) {
  .jogo-corpo {
    grid-template-columns: minmax(0, 1fr) var(--coluna-direita);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: "palco ." "palco microfone" "palco adulto" "palco .";
    column-gap: var(--colunas-gap);
  }
  .palco { align-self: center; }
  .escuta-linha { margin-top: 0; }
  .area-adulto { margin-top: var(--direita-espaco); }
}

/* Palco: a cabeça do mascote fica atrás do cartão e as mãos, na frente (apoiadas na borda). */
.palco {
  position: relative;
  width: var(--palco-largura);
  height: calc(112 * var(--m) + var(--cartao-altura) * var(--u));
}
.mascote-cabeca, .mascote-maos {
  position: absolute;
  left: 50%;
  width: calc(170 * var(--m));
  transform: translateX(-50%);
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.mascote-cabeca { top: 0; height: calc(150 * var(--m)); object-position: center bottom; }
.mascote-maos { top: calc(94 * var(--m)); height: calc(40 * var(--m)); }
.area-palavra {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(112 * var(--m));
  height: calc(var(--cartao-altura) * var(--u));
  padding: calc(var(--cartao-padding) * var(--u) + 12px) 16px 12px;
  background: #fff;
  border-radius: calc(var(--cartao-raio) * var(--u));
  box-shadow: 0 var(--cartao-sombra) 0 var(--sombra-amarela);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.palavra {
  font-family: var(--fonte-leitura);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--palavra-espacamento);
  white-space: nowrap;
  text-transform: var(--caixa-dos-itens);
  color: var(--texto-jogo);
  user-select: none;
  -webkit-user-select: none;
}
/* Frases: quebram linha entre as palavras, nunca no meio de uma palavra. */
.palavra.frase {
  max-width: 100%;
  min-width: 0;
  line-height: 1.2;
  letter-spacing: 1px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
  -webkit-hyphens: manual;
  word-spacing: 0.15em;
  text-align: center;
  text-wrap: balance;
}
.palavra.aparecer { animation: aparecer 0.28s ease-out; }
/* Acerto: borda verde por dentro do cartão. */
#tela-jogo[data-acerto] .area-palavra::after {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--acerto-borda) solid var(--verde-acerto);
  border-radius: inherit;
  pointer-events: none;
}

/* Escuta da leitura (experimental): botão-pílula do microfone e a frase de apoio embaixo.
   O estado (pronto, ouvindo, pensando, ouvi, nao-ouvi) fica em data-estado. */
.escuta-linha { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.escuta-linha[hidden] { display: none; }
.microfone-envoltorio { position: relative; display: flex; }
.microfone-pulso {
  position: absolute;
  inset: var(--pulso);
  display: none;
  border-radius: 999px;
  background: var(--microfone-pulso);
  animation: pulso-microfone 1.2s ease-out infinite;
}
.microfone-envoltorio[data-estado="ouvindo"] .microfone-pulso { display: block; }
.botao-escutar {
  --volume: 0;
  position: relative;
  height: var(--mic-altura);
  min-width: var(--mic-min);
  padding: 0 var(--mic-padding);
  border: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mic-gap);
  font-size: var(--mic-fonte);
  font-weight: 800;
  color: #fff;
  background: var(--microfone);
  box-shadow: 0 var(--mic-sombra) 0 var(--microfone-sombra);
}
.microfone-envoltorio[data-estado="ouvindo"] .botao-escutar,
.microfone-envoltorio[data-estado="pensando"] .botao-escutar {
  background: var(--microfone-ouvindo);
  box-shadow: 0 var(--mic-sombra) 0 var(--microfone);
}
.botao-escutar:disabled { cursor: progress; }
/* Ouvi e não ouvi continuam "ativos" (botão cheio + pulinho): a criança pode tocar de novo. */
.microfone-envoltorio[data-estado="ouvi"] .botao-escutar,
.microfone-envoltorio[data-estado="nao-ouvi"] .botao-escutar { animation: pulinho 2s ease-in-out infinite; }
.icone-escutar { display: flex; align-items: center; }
.icone-escutar svg { width: var(--mic-icone); height: var(--mic-icone); }
/* Ondas do "Ouvindo…": crescem com o volume da voz. */
.ondas { display: flex; align-items: center; gap: var(--ondas-gap); height: calc(var(--onda-a) + 2px); }
.ondas i {
  width: var(--onda-l);
  height: calc(var(--onda-a) * (0.5 + 0.5 * var(--volume)));
  border-radius: 3px;
  background: #fff;
  animation: onda 0.9s ease-in-out infinite;
  transition: height 0.08s linear;
}
.ondas i:nth-child(2) { animation-delay: 0.15s; }
.ondas i:nth-child(3) { animation-delay: 0.3s; }
.ondas i:nth-child(4) { animation-delay: 0.45s; }
.pontinhos { display: flex; gap: 5px; }
.pontinhos i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: piscar 1s ease-in-out infinite; }
.pontinhos i:nth-child(2) { animation-delay: 0.2s; }
.pontinhos i:nth-child(3) { animation-delay: 0.4s; }
.icone-selo { position: relative; display: flex; }
.icone-selo b {
  position: absolute;
  right: var(--selo-direita);
  top: var(--selo-topo);
  width: var(--selo);
  height: var(--selo);
  border-radius: 50%;
  background: #FFC93C;
  color: #3E2A00;
  font-size: var(--selo-fonte);
  font-weight: 800;
  line-height: var(--selo);
  text-align: center;
}
.escuta-retorno { font-size: var(--dica); font-weight: 600; line-height: 1.2; color: var(--texto-jogo-suave); text-align: center; }
.escuta-retorno.quase { color: #7A4B00; font-weight: 800; }
.escuta-retorno.erro { color: var(--vermelho); }

/* Acerto (microfone ou adulto): o selo "Muito bem!" entra no lugar do microfone, do mesmo
   tamanho, sem sombra para não parecer botão. */
.selo-muito-bem {
  height: var(--mic-altura);
  min-width: var(--mic-min);
  padding: 0 var(--mic-padding);
  border: var(--selo-mb-borda) solid var(--verde-acerto);
  border-radius: 999px;
  background: #fff;
  color: var(--verde-acerto);
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--selo-mb-gap);
  font-size: var(--mic-fonte);
  font-weight: 800;
  animation: festa-pop 0.5s ease-out both;
}
.selo-muito-bem svg { width: var(--mic-icone); height: var(--mic-icone); }
#tela-jogo[data-acerto] .microfone-envoltorio { display: none; }
#tela-jogo[data-acerto] .selo-muito-bem { display: flex; }
/* Item sem microfone: o selo aparece sem empurrar o palco (fica no espaço livre embaixo
   dele; nos horizontais, em cima da área do adulto). */
.escuta-linha.sem-microfone { position: absolute; left: 0; right: 0; top: 0; }
@media (orientation: landscape) {
  .escuta-linha.sem-microfone { top: auto; bottom: 0; }
}

/* Área do adulto: Ajuda e Acertou! registram e já vão para a próxima palavra. */
.area-adulto {
  display: flex;
  flex-direction: column;
  gap: var(--adulto-gap);
  padding-top: var(--adulto-padding);
  border-top: 3px dashed var(--divisoria);
}
.rotulo-adulto { font-size: var(--rotulo); font-weight: 700; letter-spacing: 1.5px; color: var(--texto-jogo-suave); }
.botoes-resposta { display: flex; gap: var(--botoes-gap); }
.botao-adulto {
  height: var(--botao-a);
  min-width: 0;
  border: none;
  border-radius: var(--botao-raio);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--botao-gap);
  font-weight: 800;
}
.botao-ajuda { flex: 1 1 0; font-size: var(--ajuda-fonte); background: #fff; color: #7A4B00; box-shadow: 0 var(--botao-sombra) 0 var(--sombra-amarela); }
.botao-leu { flex: 1.3 1 0; font-size: var(--acerto-fonte); background: var(--verde-acerto); color: #fff; box-shadow: 0 var(--botao-sombra) 0 var(--verde-acerto-sombra); }
.botao-ajuda svg { width: var(--ajuda-icone); height: var(--ajuda-icone); }
.botao-leu svg, .botao-proxima svg, .bloco-acertou svg { width: var(--acerto-icone); height: var(--acerto-icone); }
/* Acerto: Ajuda e Acertou! somem. Pelo microfone, entra o Próxima; pelo adulto, o bloco
   "Acertou!" sem ação até avançar sozinho. Os dois na largura toda. */
.botao-proxima, .bloco-acertou {
  display: none;
  font-size: var(--acerto-fonte);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--botao-sombra) 0 var(--verde-acerto-sombra);
}
#tela-jogo[data-acerto] .botoes-resposta { display: none; }
#tela-jogo[data-acerto="microfone"] .botao-proxima, #tela-jogo[data-acerto="adulto"] .bloco-acertou { display: flex; }
.botao-adulto:active, .botao-escutar:active:not(:disabled), .botao-voltar:active { transform: translateY(3px); box-shadow: none; }
.bloco-acertou:active { transform: none; box-shadow: 0 var(--botao-sombra) 0 var(--verde-acerto-sombra); }
/* O ícone do Voltar acompanha o botão (22px no de 48px, 26px no de 56px). */
.botao-voltar svg { width: calc(var(--voltar) * 0.46); height: calc(var(--voltar) * 0.46); }

/* Indicador das etapas da missão (bolinhas). */
.indicador-etapas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 2px;
  font-size: clamp(0.85rem, min(3.6vw, calc(var(--vh) * 2.4)), 1.2rem);
  font-weight: 900;
  color: var(--roxo);
}
.indicador-etapas[hidden] { display: none; }
.indicador-etapas .nome-etapa { margin-right: 4px; }
.bolinha-etapa {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid #b9bdd4;
}
.bolinha-etapa.feita { background: var(--verde); border-color: var(--verde); }
.bolinha-etapa.atual { background: #fb8500; border-color: #fb8500; transform: scale(1.3); }
.indicador-grande { gap: 16px; }
.indicador-grande .bolinha-etapa { width: 26px; height: 26px; border-width: 4px; }

/* ---------- Círculos fixos do fundo (Jogar livre e sucesso) ----------
   Posição em % do quadro de referência de cada layout (design/claude-design) e diâmetro em px. */
.fundo-circulos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fundo-circulo {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--cd);
  height: var(--cd);
  border-radius: 50%;
  background: var(--fundo-circulo-1);
}
.fundo-circulo:nth-child(2) { background: var(--fundo-circulo-2); }

/* ---------- Jogar livre: lista ----------
   Medidas de design/tokens.json → jogarLivre. O topo fica fixo e só a lista rola. */
.tela-livre { align-items: stretch; }
.livre-topo {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--topo-gap);
  padding: max(var(--topo-cima), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           var(--topo-baixo) max(var(--margem-lados), env(safe-area-inset-left));
}
.livre-titulo { margin: 0; font-size: var(--titulo-livre); font-weight: 800; line-height: 1.1; }
.livre-lista {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--secoes-espaco);
  padding: var(--lista-cima) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--lista-baixo), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}
.livre-secao { display: flex; flex-direction: column; gap: var(--secao-espaco); }
.livre-secao-cabeca { display: flex; align-items: baseline; gap: var(--secao-cabeca-gap); }
.livre-secao-titulo { margin: 0; font-size: var(--secao-titulo); font-weight: 800; line-height: 1.1; }
.livre-secao-contagem { font-size: var(--secao-contagem); font-weight: 600; color: var(--texto-jogo-suave); }
.livre-aviso { margin: 0; font-size: var(--secao-contagem); font-weight: 600; color: var(--texto-jogo-suave); }
/* De 2 a 6 quadrados por linha: clamp(2, floor((largura + espaço) / (170 + espaço)), 6). */
.livre-grade {
  display: grid;
  gap: var(--grade-espaco);
  grid-template-columns: repeat(auto-fill, minmax(max(calc((100% - 5 * var(--grade-espaco)) / 6),
                                                      min(170px, calc((100% - var(--grade-espaco)) / 2))), 1fr));
}
.livre-quadrado {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  padding: var(--q-padding);
  border: none;
  border-radius: var(--q-raio);
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--q-sombra) 0 var(--sombra-amarela);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.livre-quadrado:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sombra-amarela); }
/* A "imagem" da atividade é o emoji dela, no espaço que sobra do quadrado. */
.livre-quadrado-imagem {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: var(--q-imagem-raio);
  background: var(--placeholder);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  container-type: size;
}
.livre-quadrado-emoji { font-family: var(--fonte-emoji); font-size: min(58cqh, 50cqw, 120px); line-height: 1; }
.livre-quadrado-textos { display: flex; flex-direction: column; gap: 1px; width: 100%; min-width: 0; padding: 0 4px 2px; }
.livre-quadrado-titulo, .livre-quadrado-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livre-quadrado-titulo { font-size: var(--q-titulo); font-weight: 800; line-height: 1.15; }
.livre-quadrado-sub { font-size: var(--q-sub); font-weight: 600; line-height: 1.2; color: var(--texto-jogo-suave); }
.livre-quadrado .selos { position: absolute; left: var(--tipo-pos); top: var(--tipo-pos); right: var(--tipo-pos); }

/* Selos do tipo: Leitura (roxo, microfone), Escrita (amarelo, lápis) e Escolha (verde, quadradinhos). Tamanhos em --tipo-*. */
.selos { display: flex; flex-wrap: wrap; gap: 4px; }
.selo-tipo {
  height: var(--tipo-a);
  padding: 0 var(--tipo-pd) 0 var(--tipo-pe);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: var(--tipo-gap);
  font-size: var(--tipo-fonte);
  font-weight: 800;
  line-height: 1;
}
.selo-tipo svg { width: var(--tipo-icone); height: var(--tipo-icone); flex-shrink: 0; }
.selo-leitura { background: var(--microfone); color: #fff; }
.selo-escrita { background: var(--selo-amarelo); color: var(--selo-amarelo-texto); }
.selo-escolha { background: var(--verde-acerto); color: #fff; }

/* ---------- Jogar livre: popup de tamanho ---------- */
.popup-veu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--veu-padding), env(safe-area-inset-top)) max(var(--veu-padding), env(safe-area-inset-right))
           max(var(--veu-padding), env(safe-area-inset-bottom)) max(var(--veu-padding), env(safe-area-inset-left));
  background: rgba(46, 33, 64, 0.55);
  color: var(--texto-jogo);
  font-family: 'Baloo 2', var(--fonte-interface);
  text-transform: none;
}
.popup {
  width: min(100%, var(--popup-l));
  max-height: 100%;
  overflow-y: auto;
  padding: var(--popup-padding);
  border-radius: var(--popup-raio);
  background: #fff;
  box-shadow: 0 var(--popup-sombra) 0 var(--sombra-amarela);
  display: flex;
  flex-direction: column;
  gap: var(--popup-espaco);
  animation: aparecer 0.2s ease-out;
}
.popup:focus { outline: none; }
.popup-cabeca { display: flex; align-items: flex-start; gap: var(--popup-cabeca-gap); }
.popup-titulos { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--popup-titulos-gap); }
.popup-titulo { margin: 0; font-size: var(--popup-titulo); font-weight: 800; line-height: 1.1; }
.popup-fechar {
  width: var(--popup-fechar);
  height: var(--popup-fechar);
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--texto-jogo);
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup-fechar svg { width: calc(var(--popup-fechar) * 0.46); height: calc(var(--popup-fechar) * 0.46); }
.popup-tamanho { display: flex; flex-direction: column; gap: var(--popup-rotulo-gap); }
/* Mesmo estilo do "Para o adulto marcar" da leitura. */
.popup-rotulo { font-size: var(--popup-rotulo); font-weight: 700; letter-spacing: 1.5px; color: var(--texto-jogo-suave); }
.popup-opcoes { display: flex; gap: var(--opcao-espaco); }
.popup-opcao {
  flex: 1 1 0;
  min-width: 0;
  height: var(--opcao-a);
  padding: 0 var(--opcao-padding);
  border: none;
  border-radius: var(--opcao-raio);
  background: var(--placeholder);
  color: var(--texto-jogo);
  box-shadow: 0 var(--opcao-sombra) 0 var(--sombra-amarela);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--opcao-gap);
}
.popup-opcao[aria-checked="true"] { background: var(--microfone); color: #fff; box-shadow: 0 var(--opcao-sombra) 0 var(--microfone-sombra); }
.popup-opcao-nome { font-size: var(--opcao-nome); font-weight: 800; line-height: 1.1; }
.popup-opcao-detalhe { font-size: var(--opcao-detalhe); font-weight: 600; line-height: 1.1; color: var(--texto-jogo-suave); }
.popup-opcao[aria-checked="true"] .popup-opcao-detalhe { color: #fff; }
.popup-comecar {
  flex-shrink: 0;
  height: var(--comecar-a);
  border: none;
  border-radius: var(--comecar-raio);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--comecar-sombra) 0 var(--verde-acerto-sombra);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--comecar-gap);
  font-size: var(--comecar-fonte);
  font-weight: 800;
}
.popup-comecar svg { width: var(--comecar-fonte); height: var(--comecar-fonte); }
.popup-opcao:active, .popup-comecar:active, .popup-fechar:active { transform: translateY(3px); box-shadow: none; }

@media (orientation: portrait) and (max-width: 599.98px) {
  .tela-livre {
    --margem-lados: 16px; --topo-cima: 20px; --topo-baixo: 12px; --topo-gap: 12px; --voltar: 48px; --titulo-livre: 24px;
    --lista-cima: 8px; --lista-baixo: 32px; --secoes-espaco: 28px;
    --secao-titulo: 22px; --secao-contagem: 14px; --secao-espaco: 12px; --secao-cabeca-gap: 10px; --grade-espaco: 12px;
  }
  .tela-livre .fundo-circulo:nth-child(1) { --cx: 74.36%; --cy: 14.22%; --cd: 140px; }
  .tela-livre .fundo-circulo:nth-child(2) { --cx: -12.82%; --cy: 66.35%; --cd: 120px; }
  .popup-veu { --veu-padding: 16px; --popup-l: 358px; --popup-padding: 20px; --popup-raio: 36px; --popup-sombra: 10px; --popup-espaco: 18px; }
}
@media (orientation: landscape) and (max-height: 599.98px) {
  .tela-livre {
    --margem-lados: 32px; --topo-cima: 16px; --topo-baixo: 10px; --topo-gap: 12px; --voltar: 48px; --titulo-livre: 24px;
    --lista-cima: 6px; --lista-baixo: 28px; --secoes-espaco: 28px;
    --secao-titulo: 22px; --secao-contagem: 14px; --secao-espaco: 12px; --secao-cabeca-gap: 10px; --grade-espaco: 14px;
  }
  .tela-livre .fundo-circulo:nth-child(1) { --cx: 82.94%; --cy: -7.69%; --cd: 130px; }
  .tela-livre .fundo-circulo:nth-child(2) { --cx: -4.74%; --cy: 64.1%; --cd: 110px; }
  .popup-veu { --veu-padding: 16px; --popup-l: 560px; --popup-padding: 20px 24px 24px; --popup-raio: 36px; --popup-sombra: 10px; --popup-espaco: 14px; }
}
@media (orientation: portrait) and (min-width: 600px) {
  .tela-livre {
    --margem-lados: 32px; --topo-cima: 28px; --topo-baixo: 16px; --topo-gap: 16px; --voltar: 56px; --titulo-livre: 30px;
    --lista-cima: 8px; --lista-baixo: 40px; --secoes-espaco: 36px;
    --secao-titulo: 26px; --secao-contagem: 16px; --secao-espaco: 16px; --secao-cabeca-gap: 12px; --grade-espaco: 20px;
  }
  .tela-livre .fundo-circulo:nth-child(1) { --cx: 77.94%; --cy: 11.73%; --cd: 200px; }
  .tela-livre .fundo-circulo:nth-child(2) { --cx: -8.39%; --cy: 58.63%; --cd: 160px; }
  .popup-veu { --veu-padding: 32px; --popup-l: 560px; }
}
@media (orientation: landscape) and (min-height: 600px) {
  .tela-livre {
    --margem-lados: 48px; --topo-cima: 32px; --topo-baixo: 16px; --topo-gap: 16px; --voltar: 56px; --titulo-livre: 30px;
    --lista-cima: 8px; --lista-baixo: 48px; --secoes-espaco: 40px;
    --secao-titulo: 26px; --secao-contagem: 16px; --secao-espaco: 16px; --secao-cabeca-gap: 12px; --grade-espaco: 20px;
  }
  .tela-livre .fundo-circulo:nth-child(1) { --cx: 83.33%; --cy: 8.89%; --cd: 220px; }
  .tela-livre .fundo-circulo:nth-child(2) { --cx: -5.56%; --cy: 62.22%; --cd: 180px; }
  .popup-veu { --veu-padding: 32px; --popup-l: 600px; }
}
/* Celulares: quadrado, selos e popup menores. Tablet e desktop: maiores. */
@media (max-width: 599.98px), (max-height: 599.98px) {
  .livre-quadrado {
    --q-padding: 8px; --q-raio: 24px; --q-sombra: 5px; --q-imagem-raio: 16px; --q-titulo: 17px; --q-sub: 13px;
    --tipo-a: 24px; --tipo-pd: 9px; --tipo-pe: 7px; --tipo-gap: 4px; --tipo-fonte: 12px; --tipo-icone: 13px; --tipo-pos: 14px;
  }
  .popup-veu {
    --popup-cabeca-gap: 12px; --popup-titulos-gap: 6px; --popup-titulo: 26px; --popup-fechar: 48px;
    --popup-rotulo: 13px; --popup-rotulo-gap: 10px;
    --opcao-a: 76px; --opcao-raio: 20px; --opcao-padding: 4px; --opcao-gap: 2px; --opcao-sombra: 4px; --opcao-nome: 18px; --opcao-detalhe: 13px; --opcao-espaco: 8px;
    --comecar-a: 68px; --comecar-raio: 24px; --comecar-sombra: 5px; --comecar-gap: 10px; --comecar-fonte: 24px;
    --tipo-a: 26px; --tipo-pd: 10px; --tipo-pe: 8px; --tipo-gap: 5px; --tipo-fonte: 13px; --tipo-icone: 14px;
  }
}
@media (orientation: landscape) and (max-height: 599.98px) {
  .popup-veu { --opcao-a: 72px; --opcao-espaco: 10px; --comecar-a: 60px; --comecar-raio: 22px; --comecar-fonte: 22px; }
}
@media (min-width: 600px) and (min-height: 600px) {
  .livre-quadrado {
    --q-padding: 10px; --q-raio: 28px; --q-sombra: 6px; --q-imagem-raio: 18px; --q-titulo: 19px; --q-sub: 14px;
    --tipo-a: 26px; --tipo-pd: 10px; --tipo-pe: 8px; --tipo-gap: 5px; --tipo-fonte: 13px; --tipo-icone: 14px; --tipo-pos: 16px;
  }
  .popup-veu {
    --popup-padding: 28px; --popup-raio: 40px; --popup-sombra: 12px; --popup-espaco: 22px;
    --popup-cabeca-gap: 16px; --popup-titulos-gap: 8px; --popup-titulo: 32px; --popup-fechar: 56px;
    --popup-rotulo: 15px; --popup-rotulo-gap: 12px;
    --opcao-a: 92px; --opcao-raio: 24px; --opcao-padding: 6px; --opcao-gap: 3px; --opcao-sombra: 5px; --opcao-nome: 22px; --opcao-detalhe: 15px; --opcao-espaco: 12px;
    --comecar-a: 80px; --comecar-raio: 28px; --comecar-sombra: 6px; --comecar-gap: 12px; --comecar-fonte: 28px;
    --tipo-a: 30px; --tipo-pd: 12px; --tipo-pe: 10px; --tipo-gap: 6px; --tipo-fonte: 15px; --tipo-icone: 16px;
  }
}
@media (orientation: landscape) and (min-height: 600px) { .livre-quadrado { --q-titulo: 20px; } }

/* ---------- Atividade de escrita ----------
   Medidas de design/tokens.json → escrita. O topo é o mesmo da leitura (.jogo-topo).
   Celular vertical e tablet: imagem e Ouvir lado a lado, o texto embaixo e o teclado no pé.
   Celular horizontal: imagem, texto e Pronto numa coluna à esquerda; teclado à direita.
   Desktop: imagem à esquerda do Ouvir e do texto; teclado centralizado embaixo.
   A parte do meio (.escrita-meio) é um container: a imagem e o cartão do texto
   encolhem (cqh) em telas mais baixas que o quadro de referência. */
.tela-escrita {
  --u: 1px; /* os círculos do fundo ficam com o diâmetro do design */
  --voltar: 48px; --licao: 14px; --titulo: 20px; --topo-gap: 12px; --progresso-altura: 12px; --progresso-margem: 0px;
}
.escrita-conteudo {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco);
  overflow-y: auto; /* só em telas menores que o mínimo */
  padding: max(var(--margem-topo), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--margem-base), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}
.escrita-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--espaco); }
.escrita-meio {
  flex: 1 1 0;
  min-height: var(--meio-minimo);
  container-type: size;
  display: grid;
  align-content: center;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "imagem ouvir" "cartao cartao";
  column-gap: var(--imagem-gap);
  row-gap: var(--meio-gap);
}
.escrita-lado { display: contents; }
.escrita-imagem {
  grid-area: imagem;
  align-self: center;
  flex-shrink: 0;
  width: var(--imagem);
  height: var(--imagem);
  padding: var(--imagem-padding);
  border-radius: var(--imagem-raio);
  background: #fff;
  box-shadow: 0 var(--imagem-sombra) 0 var(--sombra-amarela);
  container-type: size;
}
.escrita-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-emoji);
  /* Limite de 220px: emojis maiores pesam para o navegador redesenhar e podem piscar. */
  font-size: min(80cqmin, 220px);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
.escrita-emoji.aparecer { animation: aparecer 0.28s ease-out; }
.escrita-ouvir-grupo { grid-area: ouvir; align-self: center; min-width: 0; display: flex; flex-direction: column; gap: var(--dica-gap); }
.escrita-ouvir {
  flex-shrink: 0;
  height: var(--ouvir-a);
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--ouvir-sombra) 0 var(--sombra-amarela);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ouvir-gap);
  font-size: var(--ouvir-fonte);
  font-weight: 800;
}
.escrita-ouvir:active { transform: translateY(3px); box-shadow: none; }
.icone-alto-falante { width: var(--ouvir-icone); height: var(--ouvir-icone); color: var(--microfone); flex-shrink: 0; }
/* Enquanto o áudio toca, o alto-falante vira 4 barras de onda (a mesma animação da leitura). */
.ondas-ouvir { display: none; align-items: center; gap: var(--onda-gap); height: var(--ouvir-icone); }
.ondas-ouvir i { width: var(--onda-l); height: var(--onda-a); border-radius: 3px; background: var(--microfone); animation: onda 0.9s ease-in-out infinite; }
.ondas-ouvir i:nth-child(2) { animation-delay: 0.15s; }
.ondas-ouvir i:nth-child(3) { animation-delay: 0.3s; }
.ondas-ouvir i:nth-child(4) { animation-delay: 0.45s; }
.escrita-ouvir.tocando .icone-alto-falante { display: none; }
.escrita-ouvir.tocando .ondas-ouvir { display: flex; }
/* O navegador bloqueou o som automático: o Ouvir dá pulinhos para a criança tocar. */
.escrita-ouvir.piscando { animation: pulinho 2s ease-in-out infinite; }
.escrita-dica { font-size: var(--dica); font-weight: 600; line-height: 1.2; color: var(--texto-jogo-suave); text-align: center; }

.escrita-cartao {
  grid-area: cartao;
  position: relative;
  min-width: 0;
  height: var(--cartao-a);
  padding: var(--cartao-padding);
  border: var(--cartao-borda) solid #fff;
  border-radius: var(--cartao-raio);
  background: #fff;
  box-shadow: 0 var(--cartao-sombra) 0 var(--sombra-amarela);
  display: flex;
  align-items: center;
  justify-content: center;
}
.escrita-cartao[data-estado="acertou"] { border-color: var(--verde-acerto); }
.escrita-cartao[data-estado="quase"] { border-color: var(--selo-amarelo); }
.escrita-texto {
  text-transform: var(--caixa-dos-itens);
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  font-family: var(--fonte-leitura);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--texto-espacamento);
  color: var(--texto-jogo);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.escrita-texto .cursor {
  display: inline-block;
  width: var(--cursor-l);
  height: 1em;
  margin-left: var(--cursor-margem);
  border-radius: calc(var(--cursor-l) / 2);
  background: var(--microfone);
  vertical-align: -0.12em;
  animation: cursor-piscar 1s step-end infinite;
}
.escrita-cartao[data-estado="acertou"] .cursor { display: none; }
.escrita-selo {
  height: var(--selo-e-a);
  padding: 0 var(--selo-e-pd);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: var(--selo-e-gap);
  font-size: var(--selo-e-fonte);
  font-weight: 800;
  white-space: nowrap;
}
.escrita-selo svg { width: var(--selo-e-icone); height: var(--selo-e-icone); }
/* Acertou: centralizado na borda de cima, com o "pop" (por isso sem translateX). */
.selo-acertou {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--selo-e-a) / -2);
  width: max-content;
  margin: 0 auto;
  display: none;
  background: var(--verde-acerto);
  color: #fff;
  animation: festa-pop 0.5s ease-out both;
}
/* Quase: a tag "? Quase!" e a resposta certa lado a lado; o centro do grupo fica sobre a borda de cima. */
.escrita-tags {
  position: absolute;
  left: 50%;
  top: var(--tags-topo);
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: var(--tags-gap);
  white-space: nowrap;
}
.selo-quase { padding-left: var(--selo-e-pq); background: var(--selo-amarelo); color: var(--selo-amarelo-texto); }
/* A resposta inteira, sem reticências: a fonte diminui com o comprimento (tamanhoDaResposta). */
.escrita-resposta {
  text-transform: var(--caixa-dos-itens);
  height: var(--resposta-a);
  padding: 0 var(--resposta-pd);
  border: var(--resposta-borda) solid var(--selo-amarelo);
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  font-family: var(--fonte-leitura);
  font-weight: 700;
  letter-spacing: var(--resposta-espacamento);
  color: var(--texto-jogo);
}
.selo-interrogacao {
  width: var(--selo-e-bola);
  height: var(--selo-e-bola);
  border-radius: 50%;
  background: #fff;
  font-size: var(--selo-e-bola-fonte);
  line-height: var(--selo-e-bola);
  text-align: center;
}
.escrita-cartao[data-estado="acertou"] .selo-acertou, .escrita-cartao[data-estado="quase"] .escrita-tags { display: flex; }

/* Teclado: painel amarelo com as teclas brancas. Cada linha tem no máximo --por-linha letras. */
.teclado {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--teclado-gap);
  padding: var(--teclado-padding);
  border-radius: var(--teclado-raio);
  background: var(--chao);
  user-select: none;
  -webkit-user-select: none;
}
.teclado-letras, .teclado-acentos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tecla-gap); }
.teclado-letras { width: 100%; max-width: calc(var(--por-linha) * var(--tecla-l) + (var(--por-linha) - 1) * var(--tecla-gap)); margin: 0 auto; }
.teclado-acentos { padding-top: var(--teclado-gap); border-top: 2px dashed var(--divisoria); }
.tecla {
  text-transform: var(--caixa-dos-itens);
  width: min(var(--tecla-l), calc((100% - (var(--por-linha) - 1) * var(--tecla-gap)) / var(--por-linha)));
  height: var(--tecla-a);
  padding: 0;
  border: none;
  border-radius: var(--tecla-raio);
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--tecla-sombra) 0 var(--divisoria);
  font-family: var(--fonte-leitura);
  font-size: var(--tecla-fonte);
  font-weight: 700;
  line-height: 1;
}
.teclado-acentos .tecla {
  width: min(var(--acento-l), calc((100% - (var(--acentos-por-linha) - 1) * var(--tecla-gap)) / var(--acentos-por-linha)));
  color: var(--microfone);
}
/* Só vogais: A E I O U em teclas grandes, sem a linha de acentos. */
.teclado.so-vogais .teclado-acentos { display: none; }
.teclado.so-vogais .teclado-letras { max-width: none; flex-wrap: nowrap; gap: var(--vogal-gap); }
.teclado.so-vogais .tecla {
  width: min(var(--vogal-l), calc((100% - 4 * var(--vogal-gap)) / 5));
  height: var(--vogal-a);
  border-radius: var(--vogal-raio);
  box-shadow: 0 var(--vogal-sombra) 0 var(--divisoria);
  font-size: var(--vogal-fonte);
}
.teclado-acoes { display: flex; gap: var(--acoes-gap); }
.tecla-acao {
  min-width: 0;
  height: var(--acoes-a);
  padding: 0 8px;
  border: none;
  border-radius: var(--acoes-raio);
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--acoes-sombra) 0 var(--divisoria);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--acoes-icone-gap);
  font-size: var(--acoes-fonte);
  font-weight: 700;
  white-space: nowrap;
}
.tecla-apagar { flex: var(--apagar-flex); }
.tecla-apagar svg { width: var(--apagar-icone); height: var(--apagar-icone); flex-shrink: 0; }
.tecla-espaco { flex: var(--espaco-flex); color: var(--texto-jogo-suave); }
.tecla:active:not(:disabled), .tecla-acao:active:not(:disabled), .tecla.tocada, .tecla-acao.tocada {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--divisoria);
}
/* Depois do acerto, o teclado, o espaço e o Apagar ficam inativos até a Próxima. */
.tecla:disabled, .tecla-apagar:disabled, .tecla-espaco:disabled { opacity: 0.5; cursor: default; }
.botao-pronto {
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--pronto-sombra) 0 var(--verde-acerto-sombra);
  font-size: var(--pronto-fonte);
  font-weight: 800;
}
.botao-pronto.tecla-acao { flex: var(--pronto-flex); }
.botao-pronto:active:not(:disabled), .botao-pronto.tocada { box-shadow: 0 1px 0 var(--verde-acerto-sombra); }
.pronto-pronto, .pronto-acertou { display: flex; align-items: center; gap: var(--pronto-gap); }
.pronto-pronto svg, .pronto-acertou svg { width: var(--pronto-icone); height: var(--pronto-icone); flex-shrink: 0; }
/* No acerto, o Pronto vira "✓ Acertou!" e não responde ao toque durante a comemoração. */
.pronto-acertou, .botao-pronto.acertou .pronto-pronto { display: none; }
.botao-pronto.acertou .pronto-acertou { display: flex; }
.botao-pronto.acertou { cursor: default; }
.botao-pronto.acertou:active { box-shadow: 0 var(--pronto-sombra) 0 var(--verde-acerto-sombra); }
.botao-pronto-lateral { display: none; }

/* Completar a vogal (data-modo="vogal"): a tela da escrita com o teclado só de vogais,
   sem Apagar, espaço nem Pronto. O texto do cartão tem as lacunas das vogais: a atual
   pisca, a errada balança e a vogal certa fica em destaque no teclado depois dos erros. */
.tela-escrita[data-modo="vogal"] .teclado-acoes,
.tela-escrita[data-modo="vogal"] .botao-pronto-lateral,
.tela-escrita[data-modo="vogal"] .escrita-texto .cursor { display: none; }
.lacuna {
  display: inline-block;
  min-width: 0.7em;
  border-bottom: 0.08em solid var(--divisoria);
  text-align: center;
}
.lacuna.atual { border-bottom-color: var(--microfone); animation: piscar-lacuna 1s step-end infinite; }
.lacuna.preenchida { border-bottom-color: transparent; color: var(--microfone); }
.escrita-cartao[data-estado="acertou"] .lacuna.preenchida { color: var(--verde-acerto); }
.lacuna.balancando { animation: tremer 0.4s ease-in-out, piscar-lacuna 1s step-end 0.4s infinite; }
.teclado.so-vogais .tecla.mostrar { box-shadow: 0 0 0 4px var(--verde-acerto), 0 var(--vogal-sombra) 0 var(--divisoria); animation: pulinho 2s ease-in-out infinite; }

/* Escolha: a mesma tela da escrita. O texto digitado e o teclado saem, e as opções
   (botões brancos no painel amarelo do teclado) entram no lugar; as medidas vêm das
   do teclado só de vogais de cada layout. Sem o cartão do texto, a imagem cresce. */
/* Ver e ouvir (data-modo="apresentacao"): igual, com o item no quadro da imagem e só o Próximo no painel. */
.tela-escrita[data-modo="escolha"], .tela-escrita[data-modo="apresentacao"] { --cartao-a: 0px; }
.tela-escrita[data-modo="escolha"] .escrita-cartao,
.tela-escrita[data-modo="escolha"] #teclado,
.tela-escrita[data-modo="escolha"] .botao-pronto-lateral,
.tela-escrita[data-modo="apresentacao"] .escrita-cartao,
.tela-escrita[data-modo="apresentacao"] #teclado,
.tela-escrita[data-modo="apresentacao"] .botao-pronto-lateral,
.tela-escrita:not([data-modo="escolha"]):not([data-modo="apresentacao"]):not([data-modo="colorir"]) .opcoes-escolha { display: none; }
.teclado.opcoes-escolha {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 2), minmax(0, 1fr));
  gap: var(--vogal-gap);
  align-self: center;
  width: min(100%, 760px);
}
.opcao-escolha {
  min-width: 0;
  min-height: var(--vogal-a);
  padding: 4px 8px;
  border: var(--cartao-borda) solid #fff;
  border-radius: var(--vogal-raio);
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--vogal-sombra) 0 var(--divisoria);
  font-family: var(--fonte-leitura);
  font-size: var(--tecla-fonte);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--resposta-espacamento);
  overflow-wrap: anywhere;
  text-transform: var(--caixa-dos-itens); /* como no teclado da escrita */
}
.opcoes-escolha.letras .opcao-escolha { font-size: var(--vogal-fonte); }
/* Escolha do emoji (EMOJI_DA_PALAVRA e EMOJI_DA_LETRA): as opções são emojis, e a
   palavra ou a letra fica no quadro da imagem (--letras: o tamanho do texto). O
   Ouvir sai, porque a criança lê sozinha. */
.opcoes-escolha.emojis .opcao-escolha {
  font-family: var(--fonte-emoji);
  font-size: calc(var(--vogal-fonte) * 1.2);
  letter-spacing: 0;
  text-transform: none;
}
.escrita-emoji.texto {
  font-family: var(--fonte-leitura);
  font-weight: 800;
  font-size: min(70cqmin, calc(140cqw / var(--letras, 1)), 200px);
  color: var(--texto-jogo);
  text-transform: var(--caixa-dos-itens);
  overflow-wrap: anywhere;
}
.tela-escrita[data-ouvir="nao"] .escrita-ouvir { display: none; }
/* Na escolha do emoji, a opção tocada fica marcada (e fala a palavra) até o Responder. */
.opcao-escolha.selecionada { border-color: var(--microfone); box-shadow: 0 var(--vogal-sombra) 0 var(--microfone); }
/* Responder: verde e grande, embaixo das opções (a linha inteira da grade). Só na escolha do emoji
   e, como Próximo, no ver e ouvir. */
.botao-responder {
  display: none;
  grid-column: 1 / -1;
  min-height: var(--vogal-a);
  border: 0;
  border-radius: var(--vogal-raio);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--vogal-sombra) 0 var(--verde-acerto-sombra);
  font-family: inherit;
  font-size: var(--pronto-fonte);
  font-weight: 800;
  cursor: pointer;
}
.opcoes-escolha.emojis .botao-responder,
.opcoes-escolha.apresentacao .botao-responder,
.opcoes-escolha.colorir .botao-responder { display: block; }
.botao-responder:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--verde-acerto-sombra); }
.botao-responder:disabled { opacity: 0.45; cursor: default; }
.opcao-escolha:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--divisoria); }
/* Errada (ou, depois dos erros, as que não são a certa): apagada e sem toque. */
.opcao-escolha.errada { opacity: 0.35; cursor: default; }
/* A certa em destaque depois dos erros: borda verde e pulinhos até a criança tocar. */
.opcao-escolha.mostrar { border-color: var(--verde-acerto); animation: pulinho 2s ease-in-out infinite; }
.opcao-escolha.certa {
  border-color: var(--verde-acerto);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--vogal-sombra) 0 var(--verde-acerto-sombra);
  cursor: default;
}

@media (orientation: portrait) and (max-width: 599.98px) {
  .tela-escrita {
    --margem-topo: 20px; --margem-lados: 16px; --margem-base: 16px; --espaco: 12px;
    --cartao-a: clamp(64px, calc(100cqh - 72px - 24px - 8px), 96px);
    --imagem: clamp(72px, calc(100cqh - var(--cartao-a) - 24px - 8px), 150px);
    --meio-minimo: 150px; --meio-gap: 24px; --imagem-gap: 14px;
    --imagem-padding: 10px; --imagem-raio: 28px; --imagem-sombra: 6px;
    --ouvir-a: 64px; --ouvir-fonte: 22px; --ouvir-icone: 30px; --ouvir-gap: 10px; --ouvir-sombra: 5px;
    --onda-l: 5px; --onda-a: 26px; --onda-gap: 4px; --dica: 15px; --dica-gap: 10px;
    --cartao-padding: 8px 16px; --cartao-raio: 28px; --cartao-borda: 3px; --cartao-sombra: 6px;
    --texto-espacamento: 2px; --cursor-l: 4px; --cursor-margem: 3px;
    --selo-e-a: 32px; --selo-e-fonte: 16px; --selo-e-gap: 6px; --selo-e-pd: 14px; --selo-e-pq: 6px; --selo-e-icone: 18px; --selo-e-bola: 22px; --selo-e-bola-fonte: 15px;
    --tags-topo: -20px; --tags-gap: 8px; --resposta-a: 40px; --resposta-borda: 3px; --resposta-pd: 16px; --resposta-espacamento: 1px;
    --teclado-padding: 10px; --teclado-raio: 28px; --teclado-gap: 10px;
    --por-linha: 7; --acentos-por-linha: 7; --tecla-l: 42px; --acento-l: 42px; --tecla-a: clamp(36px, calc(var(--vh) * 5.45), 46px);
    --tecla-raio: 12px; --tecla-fonte: 24px; --tecla-gap: 6px; --tecla-sombra: 3px;
    --vogal-l: 62px; --vogal-a: clamp(56px, calc(var(--vh) * 9.5), 80px); --vogal-raio: 16px; --vogal-fonte: 36px; --vogal-gap: 7px; --vogal-sombra: 4px;
    --acoes-a: clamp(44px, calc(var(--vh) * 6.6), 56px); --acoes-raio: 18px; --acoes-gap: 8px; --acoes-sombra: 4px; --acoes-fonte: 18px; --acoes-icone-gap: 6px;
    --apagar-flex: 0 0 72px; --apagar-icone: 28px; --espaco-flex: 1 1 0;
    --pronto-flex: 1.3 1 0; --pronto-fonte: 20px; --pronto-icone: 24px; --pronto-gap: 6px; --pronto-sombra: 4px;
  }
  .tecla-apagar-texto { display: none; }
}
@media (orientation: landscape) and (max-height: 599.98px) {
  .tela-escrita {
    --margem-topo: 16px; --margem-lados: 32px; --margem-base: 16px; --espaco: 12px; --progresso-margem: 12px;
    --imagem: 112px; --cartao-a: clamp(56px, calc(100cqh - 112px - 6px - 24px - 56px - 6px), 80px);
    --meio-minimo: 0px; --meio-gap: 12px; --imagem-gap: 12px;
    --imagem-padding: 8px; --imagem-raio: 24px; --imagem-sombra: 5px;
    --ouvir-a: 56px; --ouvir-fonte: 20px; --ouvir-icone: 26px; --ouvir-gap: 8px; --ouvir-sombra: 5px;
    --onda-l: 4px; --onda-a: 22px; --onda-gap: 4px; --dica: 13px; --dica-gap: 8px;
    --cartao-padding: 6px 12px; --cartao-raio: 24px; --cartao-borda: 3px; --cartao-sombra: 5px;
    --texto-espacamento: 2px; --cursor-l: 4px; --cursor-margem: 3px;
    --selo-e-a: 28px; --selo-e-fonte: 15px; --selo-e-gap: 5px; --selo-e-pd: 12px; --selo-e-pq: 5px; --selo-e-icone: 16px; --selo-e-bola: 20px; --selo-e-bola-fonte: 14px;
    --tags-topo: -17px; --tags-gap: 6px; --resposta-a: 34px; --resposta-borda: 3px; --resposta-pd: 12px; --resposta-espacamento: 1px;
    --teclado-padding: 10px; --teclado-raio: 26px; --teclado-gap: 8px;
    --por-linha: 9; --acentos-por-linha: 11; --tecla-l: 48px; --acento-l: 39px; --tecla-a: clamp(36px, calc(var(--vh) * 11.3), 44px);
    --tecla-raio: 12px; --tecla-fonte: 22px; --tecla-gap: 5px; --tecla-sombra: 3px;
    --vogal-l: 88px; --vogal-a: clamp(56px, calc(var(--vh) * 20.5), 80px); --vogal-raio: 18px; --vogal-fonte: 36px; --vogal-gap: 10px; --vogal-sombra: 4px;
    --acoes-a: clamp(36px, calc(var(--vh) * 11.3), 44px); --acoes-raio: 14px; --acoes-gap: 8px; --acoes-sombra: 3px; --acoes-fonte: 17px; --acoes-icone-gap: 6px;
    --apagar-flex: 1 1 0; --apagar-icone: 24px; --espaco-flex: 2 1 0;
    --pronto-fonte: 22px; --pronto-icone: 26px; --pronto-gap: 8px; --pronto-sombra: 5px;
  }
  .escrita-corpo { flex-direction: row; gap: 20px; }
  .escrita-meio {
    flex: 0 0 260px;
    grid-template-columns: var(--imagem) minmax(0, 1fr);
    grid-template-areas: "imagem ouvir" "cartao cartao" "pronto pronto";
  }
  .escrita-imagem, .escrita-ouvir-grupo { margin-bottom: 8px; } /* espaço para as tags do Quase */
  .escrita-dica { line-height: 1.15; }
  .teclado { flex: 1 1 0; min-width: 0; align-self: center; }
  .teclado .botao-pronto { display: none; }
  .botao-pronto-lateral {
    grid-area: pronto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: none;
    border-radius: 20px;
  }
}
@media (orientation: portrait) and (min-width: 600px) {
  .tela-escrita {
    --margem-topo: 28px; --margem-lados: 32px; --margem-base: 32px; --espaco: 20px;
    --voltar: 56px; --licao: 16px; --titulo: 26px; --topo-gap: 16px; --progresso-altura: 14px;
    --cartao-a: clamp(72px, calc(100cqh - 100px - 36px - 10px), 150px);
    --imagem: clamp(64px, calc(100cqh - var(--cartao-a) - 36px - 10px), 280px);
    --meio-minimo: 0px; --meio-gap: 36px; --imagem-gap: 32px;
    --imagem-padding: 16px; --imagem-raio: 40px; --imagem-sombra: 8px;
    --ouvir-a: 80px; --ouvir-fonte: 28px; --ouvir-icone: 36px; --ouvir-gap: 12px; --ouvir-sombra: 6px;
    --onda-l: 6px; --onda-a: 32px; --onda-gap: 5px; --dica: 18px; --dica-gap: 14px;
    --cartao-padding: 12px 28px; --cartao-raio: 36px; --cartao-borda: 4px; --cartao-sombra: 8px;
    --texto-espacamento: 3px; --cursor-l: 6px; --cursor-margem: 4px;
    --selo-e-a: 40px; --selo-e-fonte: 20px; --selo-e-gap: 8px; --selo-e-pd: 18px; --selo-e-pq: 8px; --selo-e-icone: 22px; --selo-e-bola: 26px; --selo-e-bola-fonte: 17px;
    --tags-topo: -26px; --tags-gap: 12px; --resposta-a: 52px; --resposta-borda: 4px; --resposta-pd: 22px; --resposta-espacamento: 2px;
    --teclado-padding: 16px; --teclado-raio: 36px; --teclado-gap: 14px;
    --por-linha: 9; --acentos-por-linha: 11; --tecla-l: 73px; --acento-l: 58px; --tecla-a: clamp(56px, calc(var(--vh) * 6), 72px);
    --tecla-raio: 18px; --tecla-fonte: 34px; --tecla-gap: 10px; --tecla-sombra: 4px;
    --vogal-l: 136px; --vogal-a: clamp(80px, calc(var(--vh) * 9.4), 112px); --vogal-raio: 26px; --vogal-fonte: 52px; --vogal-gap: 14px; --vogal-sombra: 5px;
    --acoes-a: clamp(56px, calc(var(--vh) * 6), 72px); --acoes-raio: 22px; --acoes-gap: 12px; --acoes-sombra: 4px; --acoes-fonte: 22px; --acoes-icone-gap: 8px;
    --apagar-flex: 1 1 0; --apagar-icone: 30px; --espaco-flex: 1.6 1 0;
    --pronto-flex: 1.3 1 0; --pronto-fonte: 26px; --pronto-icone: 30px; --pronto-gap: 8px; --pronto-sombra: 5px;
  }
  .escrita-meio {
    grid-template-columns: minmax(0, 1fr) auto minmax(200px, 300px) minmax(0, 1fr);
    grid-template-areas: ". imagem ouvir ." "cartao cartao cartao cartao";
  }
}
@media (orientation: landscape) and (min-height: 600px) {
  .tela-escrita {
    --margem-topo: 32px; --margem-lados: 48px; --margem-base: 40px; --espaco: 24px;
    --voltar: 56px; --licao: 16px; --titulo: 26px; --topo-gap: 16px; --progresso-altura: 14px; --progresso-margem: 24px;
    --imagem: clamp(120px, calc(100cqh - 8px), 300px);
    --cartao-a: clamp(80px, calc(100cqh - 72px - 34px - 8px), 170px);
    --meio-minimo: 0px; --imagem-gap: 40px;
    --imagem-padding: 16px; --imagem-raio: 40px; --imagem-sombra: 8px;
    --ouvir-a: 72px; --ouvir-fonte: 26px; --ouvir-icone: 34px; --ouvir-gap: 12px; --ouvir-sombra: 6px;
    --onda-l: 6px; --onda-a: 30px; --onda-gap: 5px; --dica: 20px; --dica-gap: 20px;
    --cartao-padding: 12px 28px; --cartao-raio: 40px; --cartao-borda: 4px; --cartao-sombra: 8px;
    --texto-espacamento: 3px; --cursor-l: 6px; --cursor-margem: 4px;
    --selo-e-a: 40px; --selo-e-fonte: 20px; --selo-e-gap: 8px; --selo-e-pd: 18px; --selo-e-pq: 8px; --selo-e-icone: 22px; --selo-e-bola: 26px; --selo-e-bola-fonte: 17px;
    --tags-topo: -26px; --tags-gap: 12px; --resposta-a: 52px; --resposta-borda: 4px; --resposta-pd: 22px; --resposta-espacamento: 2px;
    --teclado-padding: 18px; --teclado-raio: 36px; --teclado-gap: 14px;
    --por-linha: 13; --acentos-por-linha: 11; --tecla-l: 72px; --acento-l: 72px; --tecla-a: clamp(48px, calc(var(--vh) * 7.6), 68px);
    --tecla-raio: 18px; --tecla-fonte: 32px; --tecla-gap: 10px; --tecla-sombra: 4px;
    --vogal-l: 160px; --vogal-a: clamp(72px, calc(var(--vh) * 11.6), 104px); --vogal-raio: 24px; --vogal-fonte: 48px; --vogal-gap: 16px; --vogal-sombra: 5px;
    --acoes-a: clamp(52px, calc(var(--vh) * 7.6), 68px); --acoes-raio: 22px; --acoes-gap: 12px; --acoes-sombra: 4px; --acoes-fonte: 22px; --acoes-icone-gap: 8px;
    --apagar-flex: 0 0 220px; --apagar-icone: 30px; --espaco-flex: 1 1 0;
    --pronto-flex: 0 0 280px; --pronto-fonte: 26px; --pronto-icone: 30px; --pronto-gap: 8px; --pronto-sombra: 5px;
  }
  .escrita-meio { display: flex; align-items: center; justify-content: center; gap: var(--imagem-gap); }
  .escrita-lado { flex: 0 1 760px; min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, calc(100cqh - 72px - var(--cartao-a) - 8px), 34px); }
  .escrita-ouvir-grupo { flex-direction: row; align-items: center; }
  .escrita-ouvir { width: 240px; }
  .escrita-dica { text-align: left; }
  .teclado { align-self: center; width: min(100%, 1092px); }
}

/* ---------- Colorir a letra (data-modo="colorir") ----------
   A tela da escrita sem o cartão nem o teclado: a letra (os dois canvas do colorir.js)
   fica grande no quadro da imagem, com o Ouvir e a dica em cima (ao lado, no celular
   horizontal e no desktop), e a paleta de 8 cores e o Próximo ficam no painel das
   opções. O quadro cresce até caber (--imagem) e continua quadrado. */
.colorir-quadro { display: none; }
.tela-escrita[data-modo="colorir"] { --cartao-a: 0px; --imagem: clamp(120px, min(100cqw, 100cqh - var(--ouvir-a) - var(--meio-gap)), 520px); }
.tela-escrita[data-modo="colorir"] .escrita-cartao,
.tela-escrita[data-modo="colorir"] #teclado,
.tela-escrita[data-modo="colorir"] .botao-pronto-lateral,
.tela-escrita[data-modo="colorir"] .escrita-emoji { display: none; }
.tela-escrita[data-modo="colorir"] .escrita-meio {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "ouvir" "imagem";
  justify-items: center;
}
.tela-escrita[data-modo="colorir"] .escrita-ouvir-grupo { flex-direction: row; align-items: center; justify-content: center; }
.tela-escrita[data-modo="colorir"] .escrita-dica { text-align: left; }
.tela-escrita[data-modo="colorir"] .escrita-imagem { padding: 0; overflow: hidden; }
.tela-escrita[data-modo="colorir"] .colorir-quadro {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none; /* o dedo pinta, sem rolar nem dar zoom */
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.colorir-quadro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.colorir-contorno { pointer-events: none; }
.opcoes-escolha.colorir { --colunas: 8; }
.cor-colorir {
  justify-self: center;
  width: min(100%, var(--vogal-a));
  aspect-ratio: 1;
  padding: 0;
  border: var(--cartao-borda) solid #fff;
  border-radius: 50%;
  background: var(--cor);
  box-shadow: 0 var(--vogal-sombra) 0 var(--divisoria);
  cursor: pointer;
  transition: transform 0.12s ease-out;
}
.cor-colorir:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--divisoria); }
/* A cor escolhida: com o anel roxo, como a opção marcada da escolha. */
.cor-colorir.selecionada { box-shadow: 0 0 0 4px var(--microfone), 0 var(--vogal-sombra) 0 var(--divisoria); }
/* Pintou o bastante: o Próximo fica ativo e dá pulinhos até a criança tocar nele. */
.opcoes-escolha.colorir .botao-responder.pronto { animation: pulinho 2s ease-in-out infinite; }

@media (orientation: portrait) and (max-width: 599.98px) {
  .opcoes-escolha.colorir { --colunas: 4; }
}
@media (orientation: landscape) and (max-height: 599.98px) {
  /* A letra à esquerda (com o Ouvir e a dica ao lado) e a paleta numa coluna à direita. */
  .tela-escrita[data-modo="colorir"] { --imagem: clamp(100px, min(100cqh, 100cqw - 150px - var(--imagem-gap)), 520px); }
  .tela-escrita[data-modo="colorir"] .escrita-meio {
    flex: 1 1 0;
    grid-template-columns: auto minmax(0, 150px);
    grid-template-areas: "imagem ouvir";
    justify-content: center;
  }
  .tela-escrita[data-modo="colorir"] .escrita-imagem, .tela-escrita[data-modo="colorir"] .escrita-ouvir-grupo { margin-bottom: 0; }
  .tela-escrita[data-modo="colorir"] .escrita-ouvir-grupo { flex-direction: column; align-items: stretch; }
  .tela-escrita[data-modo="colorir"] .escrita-dica { text-align: center; }
  .tela-escrita[data-modo="colorir"] .teclado.opcoes-escolha { flex: 0 0 auto; width: min(40%, 300px); }
  .opcoes-escolha.colorir { --colunas: 4; }
}
@media (orientation: landscape) and (min-height: 600px) {
  /* A letra à esquerda do Ouvir e da dica; a paleta numa linha embaixo. */
  .tela-escrita[data-modo="colorir"] { --imagem: clamp(140px, calc(100cqh - 8px), 520px); }
  .tela-escrita[data-modo="colorir"] .escrita-lado { flex: 0 1 300px; }
  .tela-escrita[data-modo="colorir"] .escrita-ouvir-grupo { flex-direction: column; align-items: stretch; }
  .tela-escrita[data-modo="colorir"] .escrita-ouvir { width: auto; }
  .tela-escrita[data-modo="colorir"] .escrita-dica { text-align: center; }
}

/* ---------- Fim da atividade (sucesso) ----------
   Medidas de design/tokens.json → sucesso. O palco (mascote + cartão) usa --u, como o da
   leitura: 1px no quadro de referência e menos em telas menores, para caber sem scroll. */
.sucesso-confete { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sucesso-confete i {
  position: absolute;
  width: var(--confete-l);
  height: var(--confete-a);
  border-radius: var(--confete-raio);
  transform: rotate(var(--giro));
  animation: confete-cair 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) var(--atraso, 0s) both;
}
.sucesso-conteudo {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco);
  padding: max(var(--margem-topo), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--margem-base), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}
.sucesso-titulos { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--titulos-gap); text-align: center; }
.sucesso-titulo { margin: 0; font-size: var(--sucesso-titulo); font-weight: 800; line-height: 1.05; }
.sucesso-subtitulo { font-size: var(--sucesso-sub); font-weight: 600; color: var(--texto-jogo-suave); }
.sucesso-palco {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--palco-l) * var(--u));
  height: calc(112 * var(--m) + var(--cartao-altura) * var(--u));
}
.sucesso-cartao {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(112 * var(--m));
  height: calc(var(--cartao-altura) * var(--u));
  padding: calc(var(--cp-cima) * var(--u)) calc(var(--cp-lados) * var(--u)) calc(var(--cp-baixo) * var(--u));
  border-radius: calc(var(--cartao-raio) * var(--u));
  background: #fff;
  box-shadow: 0 var(--cartao-sombra) 0 var(--sombra-amarela);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--cartao-gap) * var(--u));
}
.sucesso-placar { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.sucesso-numeros { display: flex; align-items: baseline; gap: calc(var(--numeros-gap) * var(--u)); }
.sucesso-acertos { font-size: calc(var(--numero) * var(--u)); font-weight: 800; color: var(--verde-acerto); }
.sucesso-de-total { font-size: calc(var(--de-total) * var(--u)); font-weight: 800; color: var(--texto-jogo-suave); }
.sucesso-rotulo { font-size: calc(var(--rotulo-s) * var(--u)); font-weight: 700; color: var(--texto-jogo-suave); }
.sucesso-bolinhas {
  --b: calc(var(--bolinha) * var(--u) * var(--bolinha-escala, 1));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--bolinha-gap) * var(--u));
  max-width: calc(var(--bolinhas-l) * var(--u));
}
/* Mais de 12 itens: bolinhas um pouco menores, para caberem no cartão. */
.sucesso-bolinhas.muitas { --bolinha-escala: 0.8; }
.sucesso-bolinha {
  width: var(--b);
  height: var(--b);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--b) * 0.62);
  font-weight: 800;
  line-height: 1;
}
.sucesso-bolinha svg { width: calc(var(--b) * 0.58); height: calc(var(--b) * 0.58); }
.bolinha-acerto { background: var(--verde-acerto); color: #fff; }
.bolinha-ajuda { background: var(--selo-amarelo); color: var(--selo-amarelo-texto); }
.sucesso-legenda { display: flex; gap: calc(var(--legenda-gap) * var(--u)); font-size: calc(var(--legenda) * var(--u)); font-weight: 600; color: var(--texto-jogo-suave); }
.sucesso-legenda span { display: flex; align-items: center; gap: calc(var(--legenda-ponto-gap) * var(--u)); }
.sucesso-legenda i { width: calc(var(--legenda-ponto) * var(--u)); height: calc(var(--legenda-ponto) * var(--u)); border-radius: 50%; }
.legenda-acerto { background: var(--verde-acerto); }
.legenda-ajuda { background: var(--selo-amarelo); }
.sucesso-semente, .sucesso-aviso {
  flex-shrink: 0;
  min-height: var(--semente-a);
  padding: 0 var(--semente-pd) 0 var(--semente-pe);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 var(--semente-sombra) 0 var(--sombra-amarela);
  display: flex;
  align-items: center;
  gap: var(--semente-gap);
  font-size: var(--semente-fonte);
  font-weight: 800;
}
.sucesso-semente { animation: aparecer 0.3s ease-out; }
.sucesso-semente-icone {
  flex-shrink: 0;
  width: var(--gota-l);
  height: var(--gota-a);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--semente-cheia);
}
/* Não deu para salvar a missão: o aviso com o botão de tentar de novo. */
.sucesso-aviso { padding: 6px 6px 6px var(--semente-pd); border-radius: 28px; color: var(--texto-jogo-suave); font-size: calc(var(--semente-fonte) - 2px); }
.sucesso-aviso button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--microfone);
  color: #fff;
  font-weight: 800;
  font-size: inherit;
}
.sucesso-botoes { flex-shrink: 0; align-self: stretch; display: flex; flex-direction: column; gap: var(--botoes-gap); }
.sucesso-jogar, .sucesso-home {
  min-width: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--botao-icone-gap);
  font-weight: 800;
}
.sucesso-jogar {
  height: var(--jogar-a);
  border-radius: var(--jogar-raio);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--jogar-sombra) 0 var(--verde-acerto-sombra);
  font-size: var(--jogar-fonte);
}
.sucesso-jogar svg { width: var(--jogar-icone); height: var(--jogar-icone); flex-shrink: 0; }
.sucesso-home {
  height: var(--home-a);
  border-radius: var(--home-raio);
  background: #fff;
  color: var(--texto-jogo);
  box-shadow: 0 var(--home-sombra) 0 var(--sombra-amarela);
  font-size: var(--home-fonte);
}
.sucesso-home svg { width: var(--home-icone); height: var(--home-icone); flex-shrink: 0; color: var(--microfone); }
.sucesso-jogar:active, .sucesso-home:active, .sucesso-aviso button:active { transform: translateY(3px); box-shadow: none; }

@media (orientation: portrait) and (max-width: 599.98px) {
  .tela-sucesso {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 390px) / 330), calc((100vw - 32px) / 358)), 1px);
    --m: var(--u);
    --margem-topo: 28px; --margem-lados: 16px; --margem-base: 16px; --espaco: 22px;
    --sucesso-titulo: 40px; --sucesso-sub: 18px; --titulos-gap: 2px;
    --palco-l: 358; --cartao-altura: 218; --cartao-raio: 40; --cartao-sombra: 10px; --cp-cima: 30; --cp-lados: 20; --cp-baixo: 18; --cartao-gap: 12;
    --numero: 64; --de-total: 28; --rotulo-s: 18; --numeros-gap: 8; --bolinha: 24; --bolinha-gap: 6; --bolinhas-l: 300;
    --semente-a: 52px; --semente-pd: 20px; --semente-pe: 16px; --semente-gap: 10px; --semente-sombra: 5px; --semente-fonte: 17px; --gota-l: 18px; --gota-a: 24px;
    --botoes-gap: 12px; --botao-icone-gap: 10px;
    --jogar-a: 72px; --jogar-raio: 28px; --jogar-sombra: 6px; --jogar-fonte: 24px; --jogar-icone: 28px;
    --home-a: 64px; --home-raio: 28px; --home-sombra: 5px; --home-fonte: 21px; --home-icone: 26px;
  }
  .tela-sucesso .fundo-circulo:nth-child(1) { --cx: 71.79%; --cy: 7.11%; --cd: 150px; }
  .tela-sucesso .fundo-circulo:nth-child(2) { --cx: -15.38%; --cy: 61.61%; --cd: 130px; }
}
@media (orientation: landscape) and (max-height: 599.98px) {
  .tela-sucesso {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 44px) / 292),
         calc((100vw - 2 * max(32px, env(safe-area-inset-left), env(safe-area-inset-right)) - 344px) / 436)), 1px);
    --m: var(--u);
    --margem-topo: 16px; --margem-lados: 32px; --margem-base: 16px;
    --coluna-direita: 320px; --colunas-gap: 24px; --direita-espaco: 14px;
    --sucesso-titulo: 34px; --sucesso-sub: 16px; --titulos-gap: 0px;
    --palco-l: 436; --cartao-altura: 180; --cartao-raio: 40; --cartao-sombra: 10px; --cp-cima: 26; --cp-lados: 18; --cp-baixo: 12; --cartao-gap: 8;
    --numero: 52; --de-total: 24; --rotulo-s: 17; --numeros-gap: 8; --bolinha: 20; --bolinha-gap: 5; --bolinhas-l: 400;
    --semente-a: 46px; --semente-pd: 18px; --semente-pe: 14px; --semente-gap: 8px; --semente-sombra: 4px; --semente-fonte: 16px; --gota-l: 16px; --gota-a: 21px;
    --botoes-gap: 14px; --botao-icone-gap: 10px;
    --jogar-a: 64px; --jogar-raio: 26px; --jogar-sombra: 6px; --jogar-fonte: 22px; --jogar-icone: 26px;
    --home-a: 56px; --home-raio: 26px; --home-sombra: 5px; --home-fonte: 19px; --home-icone: 24px;
  }
  .tela-sucesso .fundo-circulo:nth-child(1) { --cx: 80.57%; --cy: -10.26%; --cd: 150px; }
  .tela-sucesso .fundo-circulo:nth-child(2) { --cx: -5.92%; --cy: 64.1%; --cd: 120px; }
  /* "8 de 10 acertos" numa linha só. */
  .sucesso-placar { flex-direction: row; align-items: baseline; gap: calc(8 * var(--u)); }
}
@media (orientation: portrait) and (min-width: 600px) {
  .tela-sucesso {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 430px) / 497), calc((100vw - 64px) / 680)), 1px);
    --m: calc(1.4 * var(--u));
    --margem-topo: 28px; --margem-lados: 32px; --margem-base: 32px; --espaco: 32px;
    --sucesso-titulo: 56px; --sucesso-sub: 22px; --titulos-gap: 4px;
    --palco-l: 680; --cartao-altura: 340; --cartao-raio: 48; --cartao-sombra: 12px; --cp-cima: 44; --cp-lados: 40; --cp-baixo: 24; --cartao-gap: 18;
    --numero: 96; --de-total: 40; --rotulo-s: 24; --numeros-gap: 12; --bolinha: 36; --bolinha-gap: 8; --bolinhas-l: 560;
    --botoes-gap: 16px; --botao-icone-gap: 12px;
    --jogar-a: 104px; --jogar-raio: 32px; --jogar-sombra: 6px; --jogar-fonte: 30px; --jogar-icone: 34px;
    --home-a: 104px; --home-raio: 32px; --home-sombra: 6px; --home-fonte: 26px; --home-icone: 32px;
  }
  .tela-sucesso .fundo-circulo:nth-child(1) { --cx: 76.74%; --cy: 7.54%; --cd: 220px; }
  .tela-sucesso .fundo-circulo:nth-child(2) { --cx: -9.59%; --cy: 65.33%; --cd: 180px; }
  /* Botões lado a lado: Voltar (1) à esquerda e Jogar de novo (1,3) à direita. */
  .sucesso-botoes { flex-direction: row; }
  .sucesso-home { order: -1; flex: 1 1 0; }
  .sucesso-jogar { flex: 1.3 1 0; }
}
@media (orientation: landscape) and (min-height: 600px) {
  .tela-sucesso {
    --u: clamp(0.5px, min(calc((var(--vh) * 100 - 86px) / 517),
         calc((100vw - 2 * max(48px, env(safe-area-inset-left), env(safe-area-inset-right)) - 488px) / 760)), 1px);
    --m: calc(1.4 * var(--u));
    --margem-topo: 32px; --margem-lados: 48px; --margem-base: 40px;
    --coluna-direita: 440px; --colunas-gap: 48px; --direita-espaco: 24px;
    --sucesso-titulo: 56px; --sucesso-sub: 22px; --titulos-gap: 4px;
    --palco-l: 760; --cartao-altura: 360; --cartao-raio: 48; --cartao-sombra: 12px; --cp-cima: 44; --cp-lados: 40; --cp-baixo: 26; --cartao-gap: 18;
    --numero: 104; --de-total: 44; --rotulo-s: 26; --numeros-gap: 12; --bolinha: 36; --bolinha-gap: 8; --bolinhas-l: 660;
    --botoes-gap: 16px; --botao-icone-gap: 12px;
    --jogar-a: 104px; --jogar-raio: 34px; --jogar-sombra: 7px; --jogar-fonte: 30px; --jogar-icone: 34px;
    --home-a: 88px; --home-raio: 32px; --home-sombra: 6px; --home-fonte: 26px; --home-icone: 30px;
  }
  .tela-sucesso .fundo-circulo:nth-child(1) { --cx: 81.94%; --cy: 4.44%; --cd: 240px; }
  .tela-sucesso .fundo-circulo:nth-child(2) { --cx: -6.25%; --cy: 66.67%; --cd: 200px; }
}
@media (max-width: 599.98px), (max-height: 599.98px) {
  .tela-sucesso { --confete-l: 10px; --confete-a: 18px; --confete-raio: 3px; --legenda: 13; --legenda-gap: 14; --legenda-ponto: 10; --legenda-ponto-gap: 5; }
}
@media (min-width: 600px) and (min-height: 600px) {
  .tela-sucesso {
    --confete-l: 14px; --confete-a: 24px; --confete-raio: 4px; --legenda: 17; --legenda-gap: 20; --legenda-ponto: 14; --legenda-ponto-gap: 6;
    --semente-a: 64px; --semente-pd: 26px; --semente-pe: 20px; --semente-gap: 12px; --semente-sombra: 5px; --semente-fonte: 22px; --gota-l: 22px; --gota-a: 30px;
  }
}
/* Horizontais: o palco à esquerda; título, semente e botões numa coluna à direita. */
@media (orientation: landscape) {
  .sucesso-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--coluna-direita);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: "palco ." "palco titulos" "palco semente" "palco aviso" "palco botoes" "palco .";
    column-gap: var(--colunas-gap);
    row-gap: 0;
    justify-items: stretch;
  }
  .sucesso-palco { grid-area: palco; align-self: center; justify-self: center; }
  .sucesso-titulos { grid-area: titulos; }
  .sucesso-semente { grid-area: semente; justify-self: center; margin-top: var(--direita-espaco); }
  .sucesso-aviso { grid-area: aviso; margin-top: var(--direita-espaco); }
  .sucesso-botoes { grid-area: botoes; margin-top: var(--direita-espaco); }
}

/* ---------- Missão: tela entre as etapas ---------- */
#tela-etapa { justify-content: space-between; }
.caixa-etapa {
  width: 100%;
  max-width: 560px;
  background: var(--cartao);
  border-radius: 32px;
  box-shadow: var(--sombra-cartao);
  padding: clamp(16px, calc(var(--vh) * 4), 36px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, calc(var(--vh) * 1.8), 16px);
  text-align: center;
  animation: aparecer 0.28s ease-out;
  min-height: 0;
}
.etapa-numero { font-size: clamp(1rem, calc(var(--vh) * 3), 1.5rem); font-weight: 900; color: var(--texto-suave); }
.etapa-emoji { font-size: clamp(2.5rem, calc(var(--vh) * 12), 6rem); line-height: 1; }
.etapa-nome {
  margin: 0;
  font-size: clamp(2rem, min(10vw, calc(var(--vh) * 8)), 4rem);
  font-weight: 900;
  color: var(--roxo);
}
.etapa-descricao { margin: 0; font-size: clamp(1rem, calc(var(--vh) * 3), 1.5rem); font-weight: 800; }
.botao-continuar { width: 100%; max-width: 480px; flex-shrink: 0; }

/* ---------- Carregando ---------- */
.carregando {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.carregando-caixa { text-align: center; font-size: 1.4rem; font-weight: 900; }
.bolinhas { display: inline-flex; gap: 12px; }
.bolinhas i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--roxo);
  animation: quicar 0.9s ease-in-out infinite;
}
.bolinhas i:nth-child(2) { background: #fb8500; animation-delay: 0.15s; }
.bolinhas i:nth-child(3) { background: var(--verde); animation-delay: 0.3s; }

/* ---------- Janela de aviso ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(43, 45, 66, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}
.modal-caixa {
  background: #fff;
  border-radius: 28px;
  padding: 24px;
  width: 100%;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--sombra-cartao);
  animation: aparecer 0.2s ease-out;
}
.modal-emoji { font-size: 3.5rem; line-height: 1; }
.modal-texto { font-size: 1.4rem; font-weight: 800; margin: 12px 0 20px; }
.modal-botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.modal-botoes .botao { flex: 1 1 160px; font-size: 1.3rem; min-height: 64px; padding: 10px 16px; }

/* ---------- Comemoração de acerto (comemoracao.js; design/LEIA-ME.md §5) ----------
   Leitura e escrita. Medidas de tokens.json → comemoracao: celular e, no tablet/desktop, "grande".
   A camada do confete cobre a tela; o centro de origem (--origem-x/y) é o centro do cartão. */
:root {
  --festa-escala: 1.06; --festa-pulo-1: -26px; --festa-pulo-2: -14px;
  --cf-l: 10px; --cf-a: 16px; --cf-raio: 3px;
}
@media (min-width: 600px) and (min-height: 600px) {
  :root {
    --festa-escala: 1.05; --festa-pulo-1: -40px; --festa-pulo-2: -20px;
    --cf-l: 14px; --cf-a: 22px; --cf-raio: 4px;
  }
}
.confete-acerto { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.confete-acerto i {
  --dx: var(--dx-celular); --dy: var(--dy-celular); --giro: var(--giro-celular);
  position: absolute;
  left: var(--origem-x);
  top: var(--origem-y);
  width: var(--cf-l);
  height: var(--cf-a);
  margin-left: calc(var(--cf-l) / -2);
  border-radius: var(--cf-raio);
  opacity: 0;
  animation: confete-acerto 1.8s cubic-bezier(0.12, 0.7, 0.3, 1) both;
}
@media (min-width: 600px) and (min-height: 600px) {
  .confete-acerto i { --dx: var(--dx-grande); --dy: var(--dy-grande); --giro: var(--giro-grande); }
}
.festa-cartao { animation: festa-cartao 0.8s ease-out; }
/* O mascote usa translate (e não transform), porque já é centralizado com translateX. */
.festa-mascote { animation: festa-mascote 1.2s ease-in-out; }

/* ---------- Animações ---------- */
@keyframes aparecer {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes quicar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes balancar {
  from { transform: rotate(-1.8deg); }
  to { transform: rotate(1.8deg); }
}
@keyframes chegar-no-jardim {
  from { transform: translateX(-50%) scale(0); }
  70% { transform: translateX(-50%) scale(1.12); }
  to { transform: translateX(-50%) scale(1); }
}
@keyframes piscar-lacuna {
  0%, 49% { border-bottom-color: var(--microfone); }
  50%, 100% { border-bottom-color: var(--divisoria); }
}
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-0.12em); }
  40%, 80% { transform: translateX(0.12em); }
}
@keyframes cursor-piscar {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes confete-cair {
  from { transform: translateY(-60vh) rotate(calc(var(--giro) - 180deg)); opacity: 0; }
  15% { opacity: 1; }
  to { transform: rotate(var(--giro)); }
}
@keyframes piscar {
  50% { opacity: 0; }
}
@keyframes pulso-microfone {
  from { transform: scale(0.95); opacity: 0.9; }
  to { transform: scale(1.18); opacity: 0; }
}
@keyframes onda {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}
@keyframes confete-acerto {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--giro)); }
}
@keyframes festa-cartao {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(var(--festa-escala)); }
  55% { transform: scale(0.98); }
  75% { transform: scale(1.02); }
}
@keyframes festa-mascote {
  0%, 40%, 80%, 100% { translate: 0 0; }
  20% { translate: 0 var(--festa-pulo-1); }
  60% { translate: 0 var(--festa-pulo-2); }
}
@keyframes festa-pop {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pulinho {
  0%, 70%, 100% { transform: translateY(0); }
  78% { transform: translateY(-6px); }
  86% { transform: translateY(0); }
  92% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .planta-jardim use, .planta-jardim.nova { animation: none !important; }
  .jardim, .planta { transition: none; }
  .botao-escutar, .microfone-pulso, .ondas i, .pontinhos i { animation: none !important; }
  .escrita-texto .cursor, .ondas-ouvir i, .escrita-ouvir.piscando, .escrita-emoji.aparecer, .opcao-escolha.mostrar,
  .opcoes-escolha.colorir .botao-responder.pronto { animation: none !important; }
  .lacuna.atual, .lacuna.balancando, .teclado .tecla.mostrar { animation: none !important; }
  .escrita-ouvir.piscando { box-shadow: 0 0 0 5px var(--selo-amarelo); }
  .sucesso-confete i, .sucesso-semente, .popup { animation: none !important; }
  /* Comemoração: sem confete, pulinhos nem "pop" (os 2 s e o avanço continuam). */
  .festa-cartao, .festa-mascote, .selo-muito-bem, .selo-acertou { animation: none !important; }
  .confete-acerto { display: none; }
  .circulo, .jogo-progresso-barra { transition: none; }
}

/* ---------- Abertura, Login e Adicionar aluno ----------
   Visual de design/claude-design (Abertura*, Login* e Aluno*.dc.html) e tokens.json
   (abertura, login, aluno). Fundo com círculos e chão como as outras telas; as posições
   dos círculos ficam em % do quadro de referência de cada layout. */
.conta-fundo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.conta-circulo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--fundo-circulo-1);
}
.conta-circulo:nth-child(2) { background: var(--fundo-circulo-2); }
.conta-chao {
  position: absolute;
  left: calc(-1 * var(--chao-sobra));
  right: calc(-1 * var(--chao-sobra));
  top: var(--chao-topo);
  bottom: 0;
  border-radius: 50% 50% 0 0 / var(--chao-raio) var(--chao-raio) 0 0;
  background: var(--chao);
}
.tela-conta h1 { margin: 0; font-size: var(--titulo); font-weight: 800; line-height: 1.1; }
.tela-conta p { margin: 0; }
.tela-conta a { color: var(--microfone); }
.tela-conta a:hover { color: var(--microfone-sombra); }

/* Abertura: a logo cresce uma vez e os pontinhos pulam em sequência. */
.tela-abertura { justify-content: center; }
.abertura-centro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco);
  margin-top: var(--deslocamento);
}
.abertura-logo {
  display: block;
  height: min(var(--logo-a), calc(var(--vh) * 100 - 120px));
  width: auto;
  max-width: calc(100vw - 32px);
  object-fit: contain;
  transform-origin: 50% 80%;
  animation: logo-cresce 0.9s cubic-bezier(.3, 1.4, .5, 1) both;
}
.abertura-pontinhos { display: flex; gap: var(--pontinhos-espaco); }
.abertura-pontinhos i {
  width: var(--pontinho);
  height: var(--pontinho);
  border-radius: 50%;
  background: var(--verde-acerto);
  animation: pontinho 1.2s ease-in-out infinite;
}
.abertura-pontinhos i:nth-child(2) { background: var(--selo-amarelo); animation-delay: 0.15s; }
.abertura-pontinhos i:nth-child(3) { background: var(--microfone); animation-delay: 0.3s; }
@keyframes logo-cresce {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pontinho {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(var(--pulo)); opacity: 1; }
}

/* Login: nos verticais, uma coluna centralizada com os termos no pé (a .login-coluna se
   desfaz e as margens automáticas centralizam o resto acima deles); nos horizontais,
   a logo à esquerda e a coluna à direita. */
.login-conteudo {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: max(var(--margem-topo), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--margem-base), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}
.login-logo { display: flex; align-items: center; justify-content: center; min-width: 0; }
.login-logo img {
  display: block;
  height: var(--logo-a);
  width: auto;
  max-width: 100%;
  max-height: calc(var(--vh) * 100 - var(--logo-folga));
  object-fit: contain;
}
.login-coluna { display: contents; }
.login-titulos { display: flex; flex-direction: column; gap: var(--titulos-espaco); }
.login-titulos p { font-size: var(--apoio); font-weight: 600; line-height: 1.3; color: var(--texto-jogo-suave); }
/* O botão é o do Google (iframe do renderButton); aqui só a pílula com a sombra do design. */
.login-google {
  align-self: center;
  width: fit-content;
  max-width: 100%;
  min-height: 40px;
  border-radius: 999px;
  line-height: 0;
  box-shadow: 0 var(--botao-sombra) 0 var(--sombra-amarela);
}
.login-google:empty { box-shadow: none; }
.login-nota { font-size: var(--nota); font-weight: 600; line-height: 1.3; color: var(--texto-jogo-suave); }
.login-termos { font-size: var(--termos); font-weight: 600; line-height: 1.35; color: var(--texto-jogo-suave); }
.login-quebra { display: none; }

@media (orientation: portrait) {
  .login-conteudo > .login-logo, .tela-conta .login-termos { margin-top: auto; }
  .login-titulos, .login-google, .tela-conta .login-nota { margin-top: var(--espaco); max-width: var(--coluna); }
  .login-termos { position: relative; }
}
@media (orientation: landscape) {
  .login-conteudo { flex-direction: row; gap: var(--colunas-espaco); }
  .login-logo { flex: 1 1 0; align-self: stretch; }
  .login-coluna { display: flex; flex-direction: column; gap: var(--espaco); width: var(--coluna); flex-shrink: 0; }
}

/* Adicionar aluno: o teclado do sistema pode empurrar o conteúdo, então esta tela rola. */
.tela-aluno { overflow-y: auto; }
.aluno-conteudo {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: max(var(--margem-topo), env(safe-area-inset-top)) max(var(--margem-lados), env(safe-area-inset-right))
           max(var(--margem-base), env(safe-area-inset-bottom)) max(var(--margem-lados), env(safe-area-inset-left));
}
.aluno-chip {
  display: flex;
  align-items: center;
  gap: var(--chip-espaco);
  align-self: flex-start;
  max-width: 100%;
  height: var(--chip);
  flex-shrink: 0;
  padding: var(--chip-padding);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 var(--sombra-amarela);
}
.aluno-avatar {
  width: var(--avatar);
  height: var(--avatar);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--microfone);
  color: #fff;
  font-size: var(--avatar-fonte);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aluno-email { font-size: var(--email-fonte); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aluno-cabecalho { display: flex; flex-direction: column; align-items: center; gap: var(--cabecalho-espaco); text-align: center; }
.aluno-simbolo { display: block; width: var(--simbolo); height: auto; }
.aluno-titulos { display: flex; flex-direction: column; gap: var(--titulos-espaco); }
.aluno-titulos p { font-size: var(--apoio); font-weight: 600; line-height: 1.3; color: var(--texto-jogo-suave); }
.aluno-campos { display: flex; flex-direction: column; gap: var(--campos-espaco); }
.aluno-campo { display: flex; flex-direction: column; gap: var(--campo-espaco); }
.aluno-campo label { font-size: var(--rotulo); font-weight: 800; }
.aluno-opcional, .aluno-opcional-curto { font-weight: 600; color: var(--texto-jogo-suave); }
.aluno-opcional-curto { display: none; }
.aluno-ajuda, .aluno-erro { font-size: var(--ajuda); font-weight: 600; line-height: 1.3; color: var(--texto-jogo-suave); }
.aluno-entrada {
  width: 100%;
  height: var(--campo-a);
  padding: 0 var(--campo-padding);
  border-radius: var(--campo-raio);
  border: var(--campo-borda) solid var(--sombra-amarela);
  background: var(--placeholder);
  color: var(--texto-jogo);
  font-family: inherit;
  font-size: var(--campo-fonte);
  font-weight: 700;
  text-transform: none;
}
.aluno-entrada::placeholder { color: var(--campo-placeholder); font-weight: 600; opacity: 1; }
.aluno-entrada:focus { outline: none; border-color: var(--microfone); }
.aluno-codigo { letter-spacing: var(--codigo-espacamento); }
/* Código da turma que o servidor não achou (não desenhado: sugestão do design/LEIA-ME.md §6). */
.aluno-codigo[aria-invalid="true"] { border-color: var(--selo-amarelo); }
.aluno-comecar {
  height: var(--comecar-a);
  flex-shrink: 0;
  border: none;
  border-radius: var(--comecar-raio);
  background: var(--verde-acerto);
  color: #fff;
  box-shadow: 0 var(--comecar-sombra) 0 var(--verde-acerto-sombra);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--comecar-espaco);
  font-size: var(--comecar-fonte);
  font-weight: 800;
}
.aluno-comecar svg { width: var(--comecar-icone); height: var(--comecar-icone); }
.aluno-comecar:disabled { opacity: 0.45; cursor: not-allowed; }
.aluno-comecar:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.aluno-campos, .aluno-cartao { background: #fff; }

/* Celular vertical: o meio e o cartão se desfazem; o cabeçalho e os campos ficam centralizados
   no espaço entre o chip e o Começar, que fica embaixo. */
@media (orientation: portrait) and (max-width: 599.98px) {
  .aluno-meio, .aluno-cartao { display: contents; }
  .aluno-chip { margin-bottom: 20px; }
  .aluno-cabecalho { margin-top: auto; }
  .aluno-campos { margin-top: 24px; margin-bottom: 20px; }
  .aluno-comecar { margin-top: auto; }
}
/* Tablet: tudo numa coluna de 600 px, com o Começar abaixo do cartão. */
@media (orientation: portrait) and (min-width: 600px) {
  .aluno-conteudo { align-items: center; gap: 24px; }
  .aluno-meio { flex-grow: 1; width: min(600px, 100%); display: flex; flex-direction: column; justify-content: center; gap: 36px; }
  .aluno-cartao { display: contents; }
}
/* Celular horizontal: o chip e o cabeçalho à esquerda; o cartão (com o Começar) à direita. */
@media (orientation: landscape) and (max-height: 599.98px) {
  .aluno-conteudo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cartao-l);
    grid-template-rows: auto 1fr;
    grid-template-areas: "chip cartao" "cabecalho cartao";
    column-gap: 28px;
    row-gap: 12px;
  }
  .aluno-meio { display: contents; }
  .aluno-chip { grid-area: chip; }
  .aluno-cabecalho { grid-area: cabecalho; justify-content: center; }
  .aluno-cartao { grid-area: cartao; align-self: center; }
  .aluno-opcional, .aluno-ajuda { display: none; }
  .aluno-opcional-curto { display: inline; }
}
/* Desktop: o chip em cima; embaixo, o cabeçalho à esquerda e o cartão (com o Começar) à direita. */
@media (orientation: landscape) and (min-height: 600px) {
  .aluno-meio { flex-grow: 1; display: flex; align-items: center; gap: 96px; }
  .aluno-cabecalho { flex: 1 1 0; min-width: 0; }
  .aluno-cartao { flex-shrink: 0; }
}
/* Nos horizontais o cartão é o bloco branco, com os campos e o Começar dentro. */
@media (orientation: landscape) {
  .aluno-cartao {
    width: var(--cartao-l);
    display: flex;
    flex-direction: column;
    gap: var(--campos-espaco);
    padding: var(--cartao-padding);
    border-radius: var(--cartao-raio);
    box-shadow: 0 var(--cartao-sombra) 0 var(--sombra-amarela);
  }
  .aluno-comecar { margin-top: 4px; }
}
@media (orientation: portrait) {
  .aluno-campos {
    padding: var(--cartao-padding);
    border-radius: var(--cartao-raio);
    box-shadow: 0 var(--cartao-sombra) 0 var(--sombra-amarela);
  }
}

/* Medidas e fundos — celular vertical (quadro 390x844) */
@media (orientation: portrait) and (max-width: 599.98px) {
  .tela-abertura {
    --logo-a: 238.2px; --pontinho: 14px; --pontinhos-espaco: 10px; --espaco: 40px; --deslocamento: -60px; --pulo: -10px;
    --chao-topo: 81.75%; --chao-raio: 40px; --chao-sobra: 40px;
  }
  .tela-abertura .conta-circulo:nth-child(1) { --x: 71.79%; --y: 8.29%; --d: 160px; }
  .tela-abertura .conta-circulo:nth-child(2) { --x: -15.38%; --y: 55.69%; --d: 130px; }
  .tela-abertura .conta-circulo:nth-child(3) { --x: 10.26%; --y: 17.77%; --d: 36px; }

  .tela-login {
    --margem-topo: 32px; --margem-lados: 24px; --margem-base: 20px; --espaco: 28px; --coluna: 100%;
    --logo-a: 197.1px; --logo-folga: 420px; --titulo: 32px; --apoio: 17px; --titulos-espaco: 6px;
    --botao-sombra: 5px; --nota: 15px; --termos: 13px;
    --chao-topo: 85.31%; --chao-raio: 40px; --chao-sobra: 40px;
  }
  .tela-login .conta-circulo:nth-child(1) { --x: 71.79%; --y: 7.11%; --d: 150px; }
  .tela-login .conta-circulo:nth-child(2) { --x: -15.38%; --y: 50.95%; --d: 120px; }
  .login-quebra { display: inline; }

  .tela-aluno {
    --margem-topo: 20px; --margem-lados: 16px; --margem-base: 16px;
    --chip: 44px; --chip-padding: 0 16px 0 6px; --chip-espaco: 8px; --avatar: 32px; --avatar-fonte: 16px; --email-fonte: 15px;
    --simbolo: 96px; --cabecalho-espaco: 12px; --titulos-espaco: 4px; --titulo: 30px; --apoio: 17px;
    --cartao-padding: 20px; --cartao-raio: 32px; --cartao-sombra: 8px; --campos-espaco: 18px; --campo-espaco: 8px;
    --rotulo: 17px; --ajuda: 14px; --campo-a: 60px; --campo-raio: 18px; --campo-borda: 3px; --campo-fonte: 22px; --campo-padding: 18px;
    --codigo-espacamento: 2px;
    --comecar-a: 72px; --comecar-raio: 28px; --comecar-sombra: 6px; --comecar-fonte: 24px; --comecar-icone: 28px; --comecar-espaco: 10px;
  }
  .tela-aluno .conta-circulo:nth-child(1) { --x: 74.36%; --y: 13.03%; --d: 140px; }
  .tela-aluno .conta-circulo:nth-child(2) { --x: -15.38%; --y: 61.61%; --d: 120px; }
}
/* Medidas e fundos — celular horizontal (quadro 844x390) */
@media (orientation: landscape) and (max-height: 599.98px) {
  .tela-abertura {
    --logo-a: 230px; --pontinho: 12px; --pontinhos-espaco: 10px; --espaco: 22px; --deslocamento: -30px; --pulo: -10px;
    --chao-topo: 81.03%; --chao-raio: 34px; --chao-sobra: 40px;
  }
  .tela-abertura .conta-circulo:nth-child(1) { --x: 80.57%; --y: -10.26%; --d: 160px; }
  .tela-abertura .conta-circulo:nth-child(2) { --x: -5.92%; --y: 51.28%; --d: 120px; }
  .tela-abertura .conta-circulo:nth-child(3) { --x: 14.22%; --y: 10.26%; --d: 32px; }

  .tela-login {
    --margem-topo: 20px; --margem-lados: 40px; --margem-base: 20px; --espaco: 16px; --colunas-espaco: 48px; --coluna: 380px;
    --logo-a: 250px; --logo-folga: 40px; --titulo: 30px; --apoio: 16px; --titulos-espaco: 4px;
    --botao-sombra: 5px; --nota: 14px; --termos: 12px;
    --chao-topo: 84.62%; --chao-raio: 30px; --chao-sobra: 40px;
  }
  .tela-login .conta-circulo:nth-child(1) { --x: 81.75%; --y: -10.26%; --d: 150px; }
  .tela-login .conta-circulo:nth-child(2) { --x: -5.92%; --y: 58.97%; --d: 110px; }

  .tela-aluno {
    --margem-topo: 16px; --margem-lados: 32px; --margem-base: 16px;
    --chip: 40px; --chip-padding: 0 14px 0 5px; --chip-espaco: 8px; --avatar: 30px; --avatar-fonte: 15px; --email-fonte: 14px;
    --simbolo: 84px; --cabecalho-espaco: 10px; --titulos-espaco: 10px; --titulo: 28px; --apoio: 16px;
    --cartao-l: 420px; --cartao-padding: 18px 20px 20px; --cartao-raio: 28px; --cartao-sombra: 6px; --campos-espaco: 12px; --campo-espaco: 6px;
    --rotulo: 16px; --ajuda: 14px; --campo-a: 52px; --campo-raio: 16px; --campo-borda: 3px; --campo-fonte: 20px; --campo-padding: 16px;
    --codigo-espacamento: 2px;
    --comecar-a: 58px; --comecar-raio: 22px; --comecar-sombra: 5px; --comecar-fonte: 22px; --comecar-icone: 26px; --comecar-espaco: 8px;
  }
  .tela-aluno .conta-circulo:nth-child(1) { --x: 39.1%; --y: -10.26%; --d: 130px; }
  .tela-aluno .conta-circulo:nth-child(2) { --x: -5.92%; --y: 64.1%; --d: 110px; }
}
/* Medidas e fundos — tablet / desktop vertical (quadro 834x1194) */
@media (orientation: portrait) and (min-width: 600px) {
  .tela-abertura {
    --logo-a: 394.2px; --pontinho: 18px; --pontinhos-espaco: 14px; --espaco: 56px; --deslocamento: -80px; --pulo: -14px;
    --chao-topo: 82.08%; --chao-raio: 56px; --chao-sobra: 60px;
  }
  .tela-abertura .conta-circulo:nth-child(1) { --x: 74.34%; --y: 7.54%; --d: 240px; }
  .tela-abertura .conta-circulo:nth-child(2) { --x: -9.59%; --y: 58.63%; --d: 190px; }
  .tela-abertura .conta-circulo:nth-child(3) { --x: 10.79%; --y: 18.43%; --d: 50px; }

  .tela-login {
    --margem-topo: 48px; --margem-lados: 32px; --margem-base: 32px; --espaco: 40px; --coluna: 520px;
    --logo-a: 328.5px; --logo-folga: 600px; --titulo: 44px; --apoio: 22px; --titulos-espaco: 8px;
    --botao-sombra: 6px; --nota: 19px; --termos: 16px;
    --chao-topo: 86.26%; --chao-raio: 56px; --chao-sobra: 60px;
  }
  .tela-login .conta-circulo:nth-child(1) { --x: 74.34%; --y: 6.7%; --d: 240px; }
  .tela-login .conta-circulo:nth-child(2) { --x: -9.59%; --y: 53.6%; --d: 190px; }

  .tela-aluno {
    --margem-topo: 28px; --margem-lados: 32px; --margem-base: 32px;
    --chip: 52px; --chip-padding: 0 20px 0 6px; --chip-espaco: 10px; --avatar: 40px; --avatar-fonte: 20px; --email-fonte: 18px;
    --simbolo: 150px; --cabecalho-espaco: 16px; --titulos-espaco: 6px; --titulo: 44px; --apoio: 22px;
    --cartao-padding: 32px; --cartao-raio: 40px; --cartao-sombra: 10px; --campos-espaco: 24px; --campo-espaco: 10px;
    --rotulo: 22px; --ajuda: 18px; --campo-a: 76px; --campo-raio: 24px; --campo-borda: 4px; --campo-fonte: 28px; --campo-padding: 24px;
    --codigo-espacamento: 3px;
    --comecar-a: 92px; --comecar-raio: 32px; --comecar-sombra: 7px; --comecar-fonte: 30px; --comecar-icone: 34px; --comecar-espaco: 12px;
  }
  .tela-aluno .conta-circulo:nth-child(1) { --x: 76.74%; --y: 11.73%; --d: 220px; }
  .tela-aluno .conta-circulo:nth-child(2) { --x: -9.59%; --y: 61.98%; --d: 180px; }
}
/* Medidas e fundos — desktop horizontal (quadro 1440x900) */
@media (orientation: landscape) and (min-height: 600px) {
  .tela-abertura {
    --logo-a: 470px; --pontinho: 18px; --pontinhos-espaco: 14px; --espaco: 44px; --deslocamento: -70px; --pulo: -14px;
    --chao-topo: 82.22%; --chao-raio: 60px; --chao-sobra: 80px;
  }
  .tela-abertura .conta-circulo:nth-child(1) { --x: 81.94%; --y: 4.44%; --d: 260px; }
  .tela-abertura .conta-circulo:nth-child(2) { --x: -6.25%; --y: 53.33%; --d: 210px; }
  .tela-abertura .conta-circulo:nth-child(3) { --x: 18.06%; --y: 13.33%; --d: 56px; }

  .tela-login {
    --margem-topo: 48px; --margem-lados: 96px; --margem-base: 48px; --espaco: 28px; --colunas-espaco: 96px; --coluna: 500px;
    --logo-a: 460px; --logo-folga: 96px; --titulo: 48px; --apoio: 22px; --titulos-espaco: 8px;
    --botao-sombra: 6px; --nota: 19px; --termos: 15px;
    --chao-topo: 85.56%; --chao-raio: 60px; --chao-sobra: 80px;
  }
  .tela-login .conta-circulo:nth-child(1) { --x: 81.94%; --y: 4.44%; --d: 260px; }
  .tela-login .conta-circulo:nth-child(2) { --x: -6.25%; --y: 55.56%; --d: 210px; }
  .login-conteudo { text-align: left; }
  .login-google { align-self: flex-start; }

  .tela-aluno {
    --margem-topo: 32px; --margem-lados: 96px; --margem-base: 48px;
    --chip: 52px; --chip-padding: 0 20px 0 6px; --chip-espaco: 10px; --avatar: 40px; --avatar-fonte: 20px; --email-fonte: 18px;
    --simbolo: 220px; --cabecalho-espaco: 20px; --titulos-espaco: 8px; --titulo: 52px; --apoio: 24px;
    --cartao-l: 540px; --cartao-padding: 32px; --cartao-raio: 40px; --cartao-sombra: 10px; --campos-espaco: 24px; --campo-espaco: 10px;
    --rotulo: 22px; --ajuda: 17px; --campo-a: 72px; --campo-raio: 24px; --campo-borda: 4px; --campo-fonte: 26px; --campo-padding: 24px;
    --codigo-espacamento: 3px;
    --comecar-a: 84px; --comecar-raio: 30px; --comecar-sombra: 6px; --comecar-fonte: 28px; --comecar-icone: 32px; --comecar-espaco: 12px;
  }
  .tela-aluno .conta-circulo:nth-child(1) { --x: 83.33%; --y: 6.67%; --d: 240px; }
  .tela-aluno .conta-circulo:nth-child(2) { --x: -6.25%; --y: 62.22%; --d: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .abertura-logo, .abertura-pontinhos i { animation: none; opacity: 1; }
}