/* css/base.css — estrutura e layout. Só var(), zero hex cru. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; overflow: hidden;
  font-family: var(--fonte); font-size: var(--fonte-base);
  color: var(--cor-texto); background: var(--cor-fundo);
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}

#app {
  display: flex; flex-direction: column; height: 100%; max-width: 800px; margin: 0 auto;
}

/* --- categorias --- */
#categorias {
  display: flex; gap: var(--esp-4); padding: var(--esp-8);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  border-bottom: var(--borda);
  min-height: calc(var(--toque-min) + var(--esp-8));
  align-items: center; flex-shrink: 0;
}
#categorias::-webkit-scrollbar { display: none; }

.cat-btn {
  flex-shrink: 0; min-width: var(--toque-min); min-height: var(--toque-min);
  border: var(--borda); border-radius: var(--raio);
  background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte); font-size: calc(var(--fonte-base) * 0.85);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: pointer; padding: var(--esp-4);
}
.cat-btn .icone { font-size: calc(var(--fonte-base) * 1.4); }
.cat-btn.ativa {
  background: var(--cor-turquesa); color: var(--cor-fundo); border-color: var(--cor-turquesa);
}

/* --- prancha --- */
#prancha {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--esp-8); display: grid; gap: var(--esp-8); align-content: start;
}
#prancha.grid-2 { grid-template-columns: repeat(2, 1fr); }
#prancha.grid-3 { grid-template-columns: repeat(3, 1fr); }
#prancha.grid-4 { grid-template-columns: repeat(4, 1fr); }

.botao-prancha {
  aspect-ratio: 1; min-width: var(--toque-min); min-height: var(--toque-min);
  border: var(--borda); border-radius: var(--raio);
  background: var(--cor-fundo); color: var(--cor-texto);
  font-family: var(--fonte); font-size: var(--fonte-base);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-4); cursor: pointer; padding: var(--esp-8);
  text-align: center; word-break: break-word; overflow: hidden;
}
.botao-prancha:active { background: var(--cor-turquesa); color: var(--cor-fundo); }
.botao-prancha .simbolo { font-size: 2em; line-height: 1; }
.botao-prancha .simbolo-img {
  width: 2.5em; height: 2.5em;
  object-fit: contain; border-radius: var(--esp-8);
}
.botao-prancha .palavra {
  font-size: 0.85em; font-weight: 500; line-height: 1.15;
}

/* --- barra de frase --- */
#barra-frase {
  display: flex; gap: var(--esp-8); padding: var(--esp-8);
  border-top: var(--borda); align-items: center; flex-shrink: 0;
  min-height: calc(var(--toque-min) + var(--esp-8));
}
#frase-container {
  flex: 1; display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center;
  min-height: calc(var(--toque-min) - var(--esp-8)); padding: var(--esp-8);
  border: var(--borda); border-radius: var(--raio); background: var(--cor-fundo);
  overflow-y: auto; max-height: calc(var(--toque-min) * 1.5);
}
.chip-frase {
  background: var(--cor-turquesa); color: var(--cor-fundo);
  padding: var(--esp-4) var(--esp-8); border-radius: var(--raio);
  font-family: var(--fonte); font-size: calc(var(--fonte-base) * 0.9); font-weight: 500;
}

.btn-acao {
  min-width: var(--toque-min); min-height: var(--toque-min);
  border: var(--borda); border-radius: var(--raio);
  font-family: var(--fonte); font-size: calc(var(--fonte-base) * 0.85); font-weight: 600;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: var(--esp-4); flex-shrink: 0;
}
.btn-falar {
  background: var(--cor-turquesa); color: var(--cor-fundo);
  border-color: var(--cor-turquesa); font-size: calc(var(--fonte-base) * 1.1);
}
.btn-falar:active { background: var(--cor-azul); }
.btn-apagar, .btn-limpar { background: var(--cor-fundo); color: var(--cor-texto); }
.btn-apagar:active, .btn-limpar:active { background: var(--cor-rosa); color: var(--cor-fundo); }

/* --- ajustes --- */
#painel-ajustes {
  position: fixed; inset: 0; background: var(--cor-fundo); z-index: 100;
  display: flex; flex-direction: column; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#painel-ajustes.escondido { display: none; }

.ajustes-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-16); border-bottom: var(--borda); flex-shrink: 0;
}
.ajustes-header h2 { font-size: calc(var(--fonte-base) * 1.2); font-weight: 600; }
.ajustes-corpo {
  flex: 1; overflow-y: auto; padding: var(--esp-16);
  display: flex; flex-direction: column; gap: var(--esp-24);
}
.ajustes-grupo { display: flex; flex-direction: column; gap: var(--esp-8); }
.ajustes-grupo label { font-weight: 600; font-size: calc(var(--fonte-base) * 0.9); }
.ajustes-grupo select, .ajustes-grupo input {
  padding: var(--esp-8) var(--esp-12); border: var(--borda); border-radius: var(--raio);
  font-family: var(--fonte); font-size: var(--fonte-base); min-height: var(--toque-min);
}
.ajustes-grupo .range-row { display: flex; align-items: center; gap: var(--esp-8); }
.ajustes-grupo input[type="range"] { flex: 1; }
.ajustes-grupo .range-valor {
  min-width: 3ch; text-align: center; font-weight: 600;
}
.ajustes-rodape {
  padding: var(--esp-16); border-top: var(--borda); text-align: center; flex-shrink: 0;
}

/* --- modo adulto --- */
#painel-adulto {
  position: fixed; inset: 0; background: var(--cor-fundo); z-index: 200;
  display: flex; flex-direction: column; overflow-y: auto;
}
#painel-adulto.escondido { display: none; }
.editor-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--esp-16); border-bottom: var(--borda); flex-shrink: 0;
}
.editor-header h2 { font-size: calc(var(--fonte-base) * 1.2); font-weight: 600; }
.editor-corpo {
  flex: 1; overflow-y: auto; padding: var(--esp-16);
  display: flex; flex-direction: column; gap: var(--esp-16);
}
.editor-cat { margin-bottom: var(--esp-16); }
.editor-cat h3 { font-size: var(--fonte-base); font-weight: 600; margin-bottom: var(--esp-8); }
.editor-btn-lista { display: flex; flex-direction: column; gap: var(--esp-4); }
.editor-btn-item {
  display: flex; align-items: center; gap: var(--esp-8);
  padding: var(--esp-8); border: var(--borda); border-radius: var(--raio);
  background: var(--cor-fundo);
}
.editor-btn-item .simbolo { font-size: calc(var(--fonte-base) * 1.5); }
.editor-btn-item .info { flex: 1; font-size: calc(var(--fonte-base) * 0.85); }
.editor-btn-item .acoes { display: flex; gap: var(--esp-4); }
.editor-btn-item button {
  min-width: var(--esp-32); min-height: var(--esp-32);
  border: var(--borda); border-radius: var(--raio);
  background: var(--cor-fundo); cursor: pointer; font-size: var(--fonte-base);
}

/* --- trava --- */
#trava-tela {
  position: fixed; inset: 0; background: var(--cor-fundo); z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-24);
}
#trava-tela.escondido { display: none; }
#trava-tela .icone-trava { font-size: calc(var(--fonte-base) * 3); }
#trava-tela input {
  padding: var(--esp-12); border: var(--borda); border-radius: var(--raio);
  font-family: var(--fonte); font-size: var(--fonte-base);
  text-align: center; max-width: 200px;
}

/* --- modal PIN --- */
.modal-pin {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.modal-pin.escondido { display: none; }
.modal-pin .caixa {
  background: var(--cor-fundo); padding: var(--esp-24);
  border-radius: var(--raio); border: var(--borda);
  display: flex; flex-direction: column; gap: var(--esp-16);
  min-width: 260px; text-align: center;
}
.modal-pin input {
  padding: var(--esp-12); border: var(--borda); border-radius: var(--raio);
  font-family: var(--fonte); font-size: var(--fonte-base); text-align: center;
}
.modal-pin .pin-botoes { display: flex; gap: var(--esp-8); justify-content: center; }
.modal-pin .pin-botoes button {
  flex: 1; padding: var(--esp-8); border: var(--borda); border-radius: var(--raio);
  font-family: var(--fonte); font-size: var(--fonte-base); cursor: pointer;
  background: var(--cor-fundo);
}
.modal-pin .pin-botoes .ok {
  background: var(--cor-turquesa); color: var(--cor-fundo); border-color: var(--cor-turquesa);
}

/* --- botões flutuantes --- */
#btn-ajustes, #btn-adulto, #btn-trava {
  position: fixed; z-index: 50; width: var(--esp-48); height: var(--esp-48);
  border-radius: 50%; border: var(--borda); background: var(--cor-fundo);
  font-size: calc(var(--fonte-base) * 1.2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#btn-ajustes { bottom: calc(var(--toque-min) + var(--esp-24)); right: var(--esp-8); }
#btn-adulto { bottom: calc(var(--toque-min) + var(--esp-24)); right: calc(var(--esp-48) + var(--esp-16)); }
#btn-trava { bottom: calc(var(--toque-min) + var(--esp-24)); right: calc(var(--esp-48) * 2 + var(--esp-24)); }

/* --- utilitários --- */
button.primario {
  background: var(--cor-turquesa); color: var(--cor-fundo); border: none;
  border-radius: var(--raio); padding: var(--esp-8) var(--esp-16);
  font-family: var(--fonte); font-size: var(--fonte-base); font-weight: 600;
  cursor: pointer; min-height: var(--toque-min);
}
button.primario:active { background: var(--cor-azul); }
.escondido { display: none !important; }

/* --- consentimento --- */
#overlay-consentimento {
  position: fixed; inset: 0; background: var(--cor-fundo); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: var(--esp-24);
}
#overlay-consentimento.escondido { display: none; }
.consentimento-caixa {
  max-width: 480px; display: flex; flex-direction: column; gap: var(--esp-16);
}
.consentimento-caixa h2 {
  font-size: calc(var(--fonte-base) * 1.3); font-weight: 700; line-height: 1.3;
}
.consentimento-caixa p {
  font-size: var(--fonte-base); line-height: 1.5;
}
.consentimento-botoes {
  display: flex; gap: var(--esp-8); margin-top: var(--esp-8);
}
.consentimento-botoes button {
  flex: 1; padding: var(--esp-12); border: var(--borda); border-radius: var(--raio);
  font-family: var(--fonte); font-size: var(--fonte-base); font-weight: 600;
  cursor: pointer; min-height: var(--toque-min);
}

#tela-sair {
  position: fixed; inset: 0; background: var(--cor-fundo); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
}
#tela-sair.escondido { display: none; }

/* --- seções legais nos ajustes --- */
.ajustes-secao {
  padding: var(--esp-16) 0; border-top: var(--borda);
  display: flex; flex-direction: column; gap: var(--esp-8);
}
.ajustes-secao:first-of-type { border-top: none; }
.ajustes-secao h3 {
  font-size: calc(var(--fonte-base) * 1.05); font-weight: 700;
}
.ajustes-secao p {
  font-size: calc(var(--fonte-base) * 0.85); line-height: 1.45;
}
.ajustes-secao button {
  padding: var(--esp-12); border: none; border-radius: var(--raio);
  font-family: var(--fonte); font-size: var(--fonte-base); font-weight: 600;
  cursor: pointer; min-height: var(--toque-min);
}

/* --- alto contraste --- */
body.alto-contraste .cat-btn.ativa {
  background: var(--cor-turquesa); color: var(--hc-fundo);
}
body.alto-contraste .chip-frase {
  background: var(--cor-turquesa); color: var(--hc-fundo);
}
body.alto-contraste .btn-falar {
  background: var(--cor-turquesa); color: var(--hc-fundo);
}
body.alto-contraste .modal-pin { background: rgba(255,255,255,0.3); }

/* ============================================================
   CAMADA VISUAL — redesign de 10/08/2026
   Mesma lógica do app adulto, com a marca Balbuu.
   Regra: nenhuma cor crua aqui, tudo vem de css/tema.css.
   ============================================================ */

body { background: var(--cor-fundo); }

/* ---------- O VISOR: a frase é a estrela ---------- */
/* 🐛 CORRIGIDO 10/08 noite: aqui estava `display: block`, que apagava o
   `display: flex` da regra original. Resultado: os três botões desciam
   empilhados soltos na esquerda e o visor comia 40% da tela em branco.
   O `<footer>` também é o último no HTML, então ia parar no rodapé; o
   `order: -1` o traz para o topo, igual ao app adulto. */
#barra-frase {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-8);
  order: -1;
  flex-shrink: 0;
  background: var(--cor-visor);
  border: none;
  border-radius: 0 0 var(--raio-grande) var(--raio-grande);
  padding: var(--esp-12) var(--esp-16) var(--esp-16);
  position: relative;
  overflow: hidden;
}
#barra-frase::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, rgba(36,191,173,.20), transparent 60%);
}
#frase-container {
  background: transparent;
  border: none;
  color: var(--cor-visor-texto);
  font-size: var(--fonte-frase);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  min-height: 52px;
  display: block;
  margin-bottom: var(--esp-12);
}
#frase-container:empty::before {
  display: block;
  color: var(--cor-visor-vazio);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0;
}
#frase-container .palavra { display: inline-block; margin-right: 12px; position: relative; }
#frase-container .palavra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px;
  background: var(--cor-turquesa); border-radius: 2px; opacity: .6;
}

#btn-apagar, #btn-limpar, #btn-trava {
  background: rgba(255,255,255,.10);
  color: var(--cor-visor-texto);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--raio);
}

/* ============================================================
   CARA DE BALBUU — 10/08/2026 noite
   Queixa dele: "não tô achando nada a ver com o Balbuu" e "que tanto de
   emoji feio". O conserto não foi inventar estilo novo: foi puxar o que o
   Balbuu já tem (personagem, logo, paleta e o gabarito de ícone de
   `docs/amostra-icones-balbuu.html`).
   ============================================================ */

/* ---------- o personagem abre o app ---------- */
.consent-personagem {
  display: block;
  width: 150px; height: 150px;
  margin: 0 auto var(--esp-8);
  object-fit: contain;
}
/* ⚠️ `balbuu-logo.png` é o MESMO passarinho do `balbuu.webp`: usar os dois
   punha o personagem duplicado na tela. Fica a imagem + o nome escrito. */
.consentimento-caixa { text-align: center; }
.consentimento-caixa p, .consentimento-caixa h2 { text-align: left; }
.consentimento-caixa::after { margin-inline: auto; }

/* ---------- fontes do Balbuu, em arquivo local ---------- */
@font-face {
  font-family: 'Baloo 2'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fontes/baloo2-extrabold.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fontes/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fontes/nunito-700.woff2') format('woff2');
}
body, button, input, select { font-family: var(--fonte); }
#frase-container, .palavra, h2, h3, .cat-btn, .btn-falar, .consentimento-caixa::before {
  font-family: var(--fonte-titulo);
  font-weight: 800;
}

/* ---------- profundidade ---------- */
#prancha .botao-prancha { box-shadow: var(--sombra-marca); }
#prancha .botao-prancha:active { box-shadow: none; }
#categorias .cat-btn { box-shadow: 0 2px 8px rgba(21,39,58,.06); }
#categorias .cat-btn.ativa { box-shadow: var(--sombra-marca); }
#barra-frase { box-shadow: var(--sombra-alta); position: relative; z-index: 2; }
.consentimento-caixa { box-shadow: var(--sombra-alta); }

/* ============================================================
   DEGRADÊS — mesma dosagem do app adulto: 4–10% nas superfícies (só para
   tirar o chapado) e degradê visível SÓ no que é ação. ⛔ Se dá para "ver
   o degradê" numa superfície, está forte demais.
   ============================================================ */
body {
  background:
    radial-gradient(85% 55% at 100% 0%, #E6F7F4 0%, transparent 60%),
    radial-gradient(70% 50% at 0% 100%, #EAF2FB 0%, transparent 62%),
    var(--cor-fundo);
}
/* o visor: navy da marca com o brilho turquesa vindo do canto do Balbuu */
#barra-frase {
  background:
    radial-gradient(90% 130% at 6% 0%, rgba(36,191,173,.22) 0%, transparent 60%),
    linear-gradient(160deg, #1D3550 0%, var(--cor-visor) 55%, #0C1723 100%);
}
/* ⚠️ COMPATIBILIDADE: `color-mix()` não existe em iPhone anterior ao iOS
   16.2, e o navegador descarta a declaração inteira. Por isso cada regra
   tem cor sólida na linha de cima — senão a aba ativa e o FALAR ficam com
   texto sobre fundo transparente. */

/* a tecla: branco em cima, um sopro da cor da categoria no pé */
#prancha .botao-prancha {
  background: var(--cor-cartao);
  background: linear-gradient(180deg,
    var(--cor-cartao) 60%,
    color-mix(in srgb, var(--cat-ativa, var(--cor-turquesa)) 9%, var(--cor-cartao)) 100%);
}
/* o disco: radial de dois tons, claro em cima — dá volume sem sombra */
#prancha .botao-prancha .simbolo {
  background: #DEF3F0;
  background:
    radial-gradient(80% 80% at 50% 22%,
      color-mix(in srgb, var(--cat-ativa, var(--cor-turquesa)) 10%, #FFFFFF) 0%,
      color-mix(in srgb, var(--cat-ativa, var(--cor-turquesa)) 26%, #FFFFFF) 100%);
}
/* categoria ativa e FALAR: aqui o degradê é para ser visto */
#categorias .cat-btn.ativa {
  background: var(--cat-cor, var(--cor-turquesa));
  background: linear-gradient(135deg,
    var(--cat-cor, var(--cor-turquesa)) 0%,
    color-mix(in srgb, var(--cat-cor, var(--cor-turquesa)) 76%, #000000) 100%);
}
#barra-frase #btn-falar {
  background: var(--cor-turquesa);
  background: linear-gradient(105deg,
    #1A8F82 0%,
    var(--cor-turquesa) 45%,
    var(--cor-amarelo) 100%);
  color: var(--cor-texto);
}

/* ---------- o Balbuu mora no visor e fala junto ---------- */
#balbuu-visor {
  width: 72px; height: 72px;
  object-fit: contain;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: var(--esp-24);
  transform-origin: 50% 90%;
}
/* Balança de leve só enquanto sai o som. ⛔ Sem pulo, sem confete, sem
   som de premiação: o app não avalia nem premia a criança. */
body.falando #balbuu-visor { animation: balbuu-fala 1.05s ease-in-out infinite; }
@keyframes balbuu-fala {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg)  translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  body.falando #balbuu-visor { animation: none; }
}

/* ---------- categoria: ícone da marca + cor própria ---------- */
/* ⚠️ prefixado com #categorias de propósito: a camada de redesign que vem
   antes já define `.cat-btn`, e sem a especificidade extra a cor da
   categoria não chegava a aparecer. */
#categorias .cat-btn .cat-ico { width: 34px; height: 34px; display: block; }
#categorias .cat-btn .icone { display: grid; place-items: center; }
#categorias .cat-btn {
  border-bottom: 5px solid var(--cat-cor, var(--cor-turquesa));
  gap: var(--esp-4);
}
#categorias .cat-btn.ativa {
  background: var(--cat-cor, var(--cor-turquesa));
  border-color: var(--cat-cor, var(--cor-turquesa));
  color: var(--cor-texto);
}

/* ---------- o botão da prancha ---------- */
/* O emoji ficava minúsculo perdido no meio de um botão de 320px: parecia
   página inacabada. Agora ele mora num disco com a cor da categoria e o
   botão tem teto de altura. */
#prancha .botao-prancha .simbolo,
#prancha .botao-prancha img {
  width: clamp(48px, 16vmin, 92px);
  height: clamp(48px, 16vmin, 92px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #DEF3F0;
  background: color-mix(in srgb, var(--cat-ativa, var(--cor-turquesa)) 16%, #FFFFFF);
  font-size: clamp(26px, 9vmin, 46px);
  line-height: 1;
  object-fit: contain;
  padding: var(--esp-8);
  flex-shrink: 0;
}
/* ⚠️ O padding de baixo reserva o espaço dos três botões redondos, que são
   `position: fixed` e não ocupam lugar no fluxo. Sem ele o "centro" da
   grade cai atrás deles e a prancha fica visivelmente empurrada. */
#prancha { align-content: center; padding-bottom: 76px; }
#prancha > * { max-height: clamp(120px, 34vw, 210px); }

/* o desenho do Mulberry é traço fino: dentro do disco ele ganha massa */
#prancha .botao-prancha .simbolo-img,
#prancha .botao-prancha .simbolo img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* ---------- resposta ao toque e ao mouse ---------- */
/* ⛔ Sem festa: nada de pulo, brilho ou confete. A criança precisa de
   resposta clara de que acertou o botão, e só. */
#prancha .botao-prancha, #categorias .cat-btn {
  transition: transform .09s ease-out, box-shadow .14s ease-out;
}
@media (hover: hover) {
  #prancha .botao-prancha:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-alta);
  }
  #prancha .botao-prancha:hover .simbolo {
    background: color-mix(in srgb, var(--cat-ativa, var(--cor-turquesa)) 28%, #FFFFFF);
  }
  #categorias .cat-btn:hover { transform: translateY(-2px); }
}
#prancha .botao-prancha:active { transform: translateY(2px) scale(.99); }
@media (prefers-reduced-motion: reduce) {
  #prancha .botao-prancha, #categorias .cat-btn { transition: none; }
  #prancha .botao-prancha:hover, #categorias .cat-btn:hover { transform: none; }
}

/* ---------- layout de dentro do visor ---------- */
/* ⚠️ Com flex-wrap o visor virava 281px de altura para uma frase de 52px:
   o Balbuu ficava sozinho numa linha e sobrava um buraco no meio. Grid
   resolve: o personagem ocupa as duas linhas na esquerda, a frase vai ao
   lado dele e os botões ficam embaixo, com FALAR longe do "limpar tudo". */
#barra-frase {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "bicho frase  frase  frase"
    "bicho apagar limpar falar";
  align-items: center;
  gap: var(--esp-8) var(--esp-8);
  padding: var(--esp-12) var(--esp-16) var(--esp-16);
}
#balbuu-visor  { grid-area: bicho; align-self: center; margin-top: 0; }
#frase-container { grid-area: frase; }
#btn-apagar    { grid-area: apagar; }
#btn-limpar    { grid-area: limpar; }
#barra-frase #btn-falar {
  grid-area: falar;
  justify-self: end;
  padding-inline: var(--esp-24);
}
/* a marca sai do canto de cima e passa a acompanhar o personagem */
#barra-frase::before { top: var(--esp-8); left: calc(72px + var(--esp-24)); }

/* Os três botões redondos estavam ancorados no rodapé e ficavam boiando
   por cima do visor. Vão para o canto de baixo, em linha, fora do caminho
   da criança (quem usa é o adulto). */
#btn-ajustes, #btn-adulto, #btn-trava {
  bottom: var(--esp-16);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  border: 1px solid rgba(0,0,0,.10);
}
#btn-ajustes { right: var(--esp-16); }
#btn-adulto  { right: calc(var(--esp-48) + var(--esp-24)); }
#btn-trava   { right: calc(var(--esp-48) * 2 + var(--esp-32)); }
#btn-falar {
  background: var(--cor-turquesa);
  color: var(--cor-texto);
  border: none;
  border-bottom: 5px solid rgba(0,0,0,.22);
  border-radius: var(--raio);
  font-weight: 700;
  letter-spacing: .04em;
}
#btn-falar:active { transform: translateY(2px); border-bottom-width: 3px; }

/* ---------- marca Balbuu no topo do visor ---------- */
/* ---------- a marca aparece de verdade ---------- */
/* Estava em 13px com 80% de opacidade no canto: sumia no fundo escuro e o
   app não parecia Balbuu nenhum. Agora tem tamanho e um ponto de cor. */
#barra-frase::before {
  content: "balbuu";
  position: absolute;
  top: var(--esp-12); left: var(--esp-16);
  font-size: 20px; font-weight: 700; letter-spacing: .06em;
  text-transform: lowercase;
  color: var(--cor-turquesa);
  pointer-events: none;
  z-index: 2;
}

/* A primeira tela que o pai vê não pode parecer aviso de site genérico:
   ganha o nome, a cor da marca e os pontinhos do Balbuu. */
.consentimento-caixa::before {
  content: "balbuu";
  display: block;
  font-size: 32px; font-weight: 700; letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--cor-turquesa);
  margin-bottom: var(--esp-4);
}
.consentimento-caixa::after {
  content: "";
  display: block;
  height: 6px;
  width: 96px;
  margin-top: var(--esp-16);
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--cor-turquesa) 0 25%, var(--cor-amarelo) 25% 50%,
    var(--cor-azul) 50% 75%, var(--cor-rosa) 75% 100%);
}

/* ---------- categorias ---------- */
.cat-btn {
  border-radius: var(--raio-pilula);
  border: 2px solid var(--cor-borda);
  background: var(--cor-cartao);
  color: var(--cor-texto);
  min-height: 56px;
  padding: 0 var(--esp-16);
  font-weight: 700;
}
.cat-btn:nth-child(1) { --c: var(--cat-1); }
.cat-btn:nth-child(2) { --c: var(--cat-2); }
.cat-btn:nth-child(3) { --c: var(--cat-3); }
.cat-btn:nth-child(4) { --c: var(--cat-4); }
.cat-btn:nth-child(5) { --c: var(--cat-5); }
.cat-btn:nth-child(6) { --c: var(--cat-6); }
.cat-btn:nth-child(7) { --c: var(--cat-7); }
.cat-btn.ativa {
  background: var(--cor-visor);
  border-color: var(--cor-visor);
  color: #FFFFFF;
  box-shadow: inset 0 -5px 0 var(--c, var(--cat-1));
}

/* ---------- as teclas ---------- */
.botao-prancha {
  background: var(--cor-cartao);
  border: 1px solid var(--cor-borda);
  border-bottom: var(--tecla-base) solid var(--cat-ativa);
  border-radius: var(--raio);
  min-height: 124px;
  padding: var(--esp-12) var(--esp-8);
}
.botao-prancha:active { transform: translateY(2px); border-bottom-width: 4px; }
.botao-prancha .simbolo { font-size: 38px; }
.botao-prancha .palavra { font-size: 18px; font-weight: 700; }

/* foco sempre visível */
.botao-prancha:focus-visible, .cat-btn:focus-visible, #btn-falar:focus-visible {
  outline: 3px solid var(--cor-turquesa);
  outline-offset: 3px;
}