/* Jogos de bebê (1 a 3 anos): Estoura Bolhas, Quem Faz?, Cadê? Achou! e
   Dedinho Colorido. Alvos enormes, cores vivas, movimento macio. Nada pisca
   mais de 3 vezes por segundo, e o "reduzir movimento" do aparelho é
   respeitado (a bolha ainda sobe, mas sem balanço nem confete). */

/* ---------- casca no modo bebê ---------- */
.modo-bebe #acoes-jogo { display: none; }
.modo-bebe .aviso { font-size: .85em; color: var(--apagado); min-height: 0; }
.modo-bebe .area-jogo { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Sair segurando: o botão enche em 1,2 s. */
.modo-bebe #btn-sair-jogo, .modo-bebe #btn-ajustes-jogo {
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--caneta) 35%, transparent) 50%, transparent 50%);
  background-size: 200% 100%; background-position: 100% 0;
}
.modo-bebe .segurando { animation: bb-enche 1.2s linear forwards; }
@keyframes bb-enche { to { background-position: 0 0; } }

/* ---------- placar em bolinhas (a criança não lê número) ---------- */
.bb-placar { display: flex; justify-content: center; margin-bottom: .5rem; }
.bb-placar span { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bb-placar i {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--linha); transition: background .3s, transform .3s;
}
.bb-placar i.cheia { background: var(--marca); transform: scale(1.15); }

/* ---------- respostas comuns ---------- */
.bb-pula { animation: bb-pula .45s ease-out; }
@keyframes bb-pula { 30% { transform: scale(1.12) rotate(-3deg); } 60% { transform: scale(.96) rotate(2deg); } }
.bb-chama { animation: bb-chama .9s ease-in-out 2; }
@keyframes bb-chama { 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
.bb-confete {
  position: absolute; z-index: 5; pointer-events: none; font-size: 2rem; line-height: 1;
  translate: -50% -50%; animation: bb-voa .9s ease-out forwards;
}
@keyframes bb-voa { to { transform: translate(var(--dx), var(--dy)) scale(.6); opacity: 0; } }

/* ---------- Estoura Bolhas ---------- */
.bb-campo {
  position: relative; overflow: hidden; border-radius: 26px; touch-action: none;
  height: calc(100vh - 250px); height: calc(100dvh - 250px); min-height: 340px;
}
.bb-ceu { background: linear-gradient(180deg, #BFE6FF 0%, #E9F7FF 60%, #FFF6DA 100%); }
.bb-bolha {
  position: absolute; bottom: calc(-1 * var(--tam)); width: var(--tam); height: var(--tam);
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / .95) 0 9%, rgb(255 255 255 / 0) 22%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cor) 55%, #FFFFFF) 0%, var(--cor) 75%);
  box-shadow: inset 0 -8px 16px rgb(0 0 0 / .12), 0 6px 14px rgb(0 0 0 / .12);
  font-size: calc(var(--tam) * .46); line-height: 1; display: grid; place-items: center;
  animation: bb-sobe var(--tempo) linear forwards, bb-balanca 2.6s ease-in-out infinite alternate;
}
@keyframes bb-sobe { to { bottom: 100%; } }
@keyframes bb-balanca { from { translate: -12px 0; } to { translate: 12px 0; } }
.bb-bolha.estouro, .bb-bolha.estourou { animation: bb-estoura .26s ease-out forwards; pointer-events: none; }
@keyframes bb-estoura { to { transform: scale(1.5); opacity: 0; } }
.bb-gota {
  position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 4px solid rgb(255 255 255 / .9); box-shadow: 0 0 0 2px rgb(30 136 229 / .35);
  pointer-events: none; animation: bb-gota .55s ease-out forwards;
}
@keyframes bb-gota { to { transform: scale(3); opacity: 0; } }

/* ---------- Quem Faz? ---------- */
.bb-bichos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; position: relative; }
.bb-bicho {
  aspect-ratio: 1; border-radius: 30px; cursor: pointer; padding: 0;
  background: var(--fundo); border: 4px solid rgb(0 0 0 / .08);
  box-shadow: 0 6px 0 rgb(0 0 0 / .1); display: grid; place-items: center; touch-action: manipulation;
}
.bb-bichos[style*="--quantos:2"] .bb-bicho { aspect-ratio: 3 / 4; }
.bb-figura { font-size: clamp(4.2rem, 24vw, 7.5rem); line-height: 1; pointer-events: none; }
.bb-bicho:active { transform: translateY(4px); box-shadow: 0 2px 0 rgb(0 0 0 / .1); }
.bb-bicho.bb-certo { border-color: #FFC107; box-shadow: 0 0 0 6px rgb(255 193 7 / .45); }

/* ---------- Cadê? Achou! ---------- */
.bb-palco {
  position: relative; border-radius: 26px; overflow: hidden;
  height: calc(100vh - 260px); height: calc(100dvh - 260px); min-height: 320px; max-height: 620px;
  background: linear-gradient(180deg, #FFF3E0 0%, #FFE0B2 72%, #D7B98E 72%, #CFAE82 100%);
}
.bb-lugar {
  position: absolute; top: 0; bottom: 0; translate: -50% 0;
  width: min(170px, calc(100% / var(--panos) - 12px));
  transition: left 1s ease-in-out;
}
.bb-amigo {
  position: absolute; left: 50%; bottom: 12%; translate: -50% 0;
  font-size: clamp(4.2rem, calc(60vw / var(--panos)), 7rem); line-height: 1; pointer-events: none;
}
.bb-pano {
  position: absolute; left: 0; right: 0; top: 30%; bottom: 5%; z-index: 2; padding: 0; cursor: pointer;
  border: 0; border-radius: 48% 48% 16px 16px / 36% 36% 16px 16px;
  background:
    radial-gradient(circle, rgb(255 255 255 / .55) 0 5px, transparent 6px) 0 0 / 26px 26px,
    var(--pano);
  box-shadow: inset 0 -12px 0 rgb(0 0 0 / .08), 0 6px 12px rgb(0 0 0 / .15);
  transform-origin: 50% 0; transition: transform .45s ease-out;
}
.bb-pano.aberto { transform: translateY(-82%) scaleY(.55); }

/* ---------- Dedinho Colorido ---------- */
.bb-tela-pintura {
  position: relative; border-radius: 22px; overflow: hidden; background: #FFFFFF;
  height: calc(100vh - 340px); height: calc(100dvh - 340px); min-height: 300px;
  box-shadow: inset 0 0 0 3px var(--linha);
}
.bb-tela-pintura canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#bb-tinta { touch-action: none; }
#bb-contorno { pointer-events: none; }
.bb-paleta { display: flex; justify-content: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.bb-tinta {
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--cor); border: 5px solid #FFFFFF; box-shadow: 0 0 0 2px var(--linha), 0 4px 8px rgb(0 0 0 / .15);
  transition: transform .15s;
}
.bb-tinta[aria-pressed="true"] { transform: scale(1.18); box-shadow: 0 0 0 4px var(--caneta), 0 4px 10px rgb(0 0 0 / .2); }

@media (prefers-reduced-motion: reduce) {
  .bb-bolha { animation: bb-sobe var(--tempo) linear forwards; }
  .bb-pula, .bb-chama { animation: none; }
  .bb-lugar { transition-duration: 1.4s; }
}

/* =====================================================================
   Jogos de 2 a 5 anos (22/09/2026). Fundos claros fixos com tinta escura
   fixa: assim continuam legíveis no tema escuro (a silhueta preta da
   "Sombra" sumiria num fundo escuro).
   ===================================================================== */
:root { --bb-tinta: #191231; --bb-fundo: #FBF7EF; }

/* ---------- Encaixa as Formas ---------- */
.fm-tabua {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  background: #F1E2CB; border-radius: 26px; padding: 18px 12px;
  box-shadow: inset 0 -8px 0 rgb(0 0 0 / .08);
}
.fm-buraco, .fm-peca { width: min(118px, 28vw); height: min(118px, 28vw); padding: 6px; border: 0; background: none; cursor: pointer; }
.fm-buraco svg, .fm-peca svg { width: 100%; height: 100%; overflow: visible; }
.fm-contorno * { fill: rgb(0 0 0 / .09); stroke: #6B5744; stroke-width: 4; stroke-dasharray: 9 7; }
.fm-buraco.cheio .fm-contorno * { fill: var(--pinta); stroke: rgb(0 0 0 / .25); stroke-dasharray: none; }
.fm-peca svg * { fill: var(--pinta); stroke: rgb(0 0 0 / .22); stroke-width: 3; }
.fm-pecas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; min-height: 110px; }
.fm-peca { transition: transform .15s; filter: drop-shadow(0 5px 4px rgb(0 0 0 / .2)); }
.fm-peca.escolhida { transform: translateY(-12px) scale(1.1); filter: drop-shadow(0 10px 8px rgb(0 0 0 / .3)); }

/* ---------- Separa as Cores ---------- */
.cr-palco { display: grid; place-items: center; height: 36vh; min-height: 200px; }
.cr-coisa { font-size: clamp(6rem, 34vw, 9rem); line-height: 1; background: none; border: 0; padding: 0; cursor: pointer; }
.cr-coisa.cr-vai { animation: cr-vai .5s ease-in forwards; }
@keyframes cr-vai { to { transform: translateY(30vh) scale(.25); opacity: 0; } }
.cr-cestos { display: flex; gap: 10px; justify-content: center; }
.cr-cesto {
  flex: 1 1 0; max-width: 150px; min-width: 58px; height: 130px; cursor: pointer; padding: 6px 0 0;
  border: 4px solid rgb(0 0 0 / .18); border-radius: 14px 14px 40px 40px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .18) 0 6px, transparent 6px 14px), var(--cor);
  box-shadow: 0 6px 0 rgb(0 0 0 / .12);
}
.cr-dentro { display: block; font-size: 1.5rem; line-height: 1; min-height: 1.6rem; }

/* ---------- Qual é a Sombra? ---------- */
.sb-modelo { display: grid; place-items: center; min-height: 30vh; }
.sb-figura { font-size: clamp(6rem, 34vw, 9rem); line-height: 1; background: none; border: 0; padding: 0; cursor: pointer; }
.sb-sombras { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sb-sombras[style*="--n:3"], .sb-sombras[style*="--n:6"] { grid-template-columns: repeat(3, 1fr); }
.sb-sombra {
  aspect-ratio: 1; border-radius: 24px; cursor: pointer; padding: 0;
  background: #F3EFFB; border: 3px dashed #CDBFE3; display: grid; place-items: center;
}
.sb-sombra span { font-size: clamp(3.2rem, 15vw, 5.5rem); line-height: 1; filter: brightness(0); opacity: .8; transition: filter .3s, opacity .3s; pointer-events: none; }
.sb-sombra.sb-mostra span, .sb-sombra.sb-certa span { filter: none; opacity: 1; }
.sb-sombra.sb-certa { border: 4px solid #FFC107; background: #FFF8E1; }

/* ---------- Conta Comigo ---------- */
.ct-cena {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 10px;
  min-height: 38vh; padding: 14px; border-radius: 24px; background: #E6F4FF;
}
.ct-coisa {
  position: relative; width: 76px; height: 76px; border-radius: 22px; cursor: pointer; padding: 0;
  background: #FFFFFF; border: 4px solid transparent; font-size: 3rem; line-height: 1; box-shadow: 0 4px 0 rgb(0 0 0 / .08);
}
.ct-coisa.contado { border-color: #A238F4; }
.ct-coisa.contado::after {
  content: attr(data-num); position: absolute; top: -10px; right: -10px;
  min-width: 32px; height: 32px; border-radius: 16px; display: grid; place-items: center;
  background: #6C19AB; color: #FFFFFF; font: 800 1.1rem/1 var(--mono, monospace);
}
.ct-numeros { display: flex; justify-content: center; gap: 14px; margin-top: 16px; min-height: 12px; }
.ct-numero {
  width: 100px; min-height: 112px; border-radius: 22px; cursor: pointer; padding: 6px;
  background: #FFFFFF; color: var(--bb-tinta); border: 4px solid #CDBFE3;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ct-numero b { font-size: 3.2rem; line-height: 1; }
.ct-pontos { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; max-width: 70px; }
.ct-pontos i { width: 9px; height: 9px; border-radius: 50%; background: #6C19AB; }
.ct-numero.ct-certo { border-color: #FFC107; box-shadow: 0 0 0 5px rgb(255 193 7 / .4); }

/* ---------- Xilofone Mágico ---------- */
.xl-xilofone {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 10px; border-radius: 26px; background: #FFF4E0;
}
.xl-barra {
  position: relative; width: var(--largura); height: 58px; cursor: pointer; padding: 0;
  border: 0; border-radius: 14px; background: var(--cor);
  box-shadow: inset 0 -7px 0 rgb(0 0 0 / .18), 0 4px 0 rgb(0 0 0 / .12); touch-action: manipulation;
}
.xl-barra i { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: rgb(255 255 255 / .75); }
.xl-barra i:first-child { left: 14px; }
.xl-barra i:last-child { right: 14px; }
.xl-barra.xl-soa { animation: xl-soa .28s ease-out; }
@keyframes xl-soa { 40% { transform: scale(1.04, .86); } }
.xl-barra.xl-luz { box-shadow: 0 0 0 6px #FFF59D, 0 0 26px 6px #FFEB3B; }

/* ---------- Primeiras Letras ---------- */
.vg-pergunta { display: grid; place-items: center; min-height: 12px; }
.vg-figura { font-size: clamp(5rem, 28vw, 8rem); line-height: 1; cursor: pointer; padding: 6px 0 12px; }
.vg-letras { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vg-carta {
  flex: 1 1 100px; max-width: 170px; min-height: 150px; cursor: pointer; padding: 8px;
  border-radius: 26px; border: 5px solid var(--cor);
  background: color-mix(in srgb, var(--cor) 22%, #FFFFFF); color: var(--bb-tinta);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  box-shadow: 0 6px 0 rgb(0 0 0 / .1);
}
.vg-carta b { font-size: clamp(3.4rem, 17vw, 6rem); line-height: 1; font-weight: 800; }
.vg-carta span { font-size: 2.4rem; line-height: 1; }
.vg-carta.vg-certa { box-shadow: 0 0 0 6px rgb(255 193 7 / .55); }