/* Jogos do Lucas - treino de clique para crianca de 2 anos.
   Regras que governam este arquivo:
   - alvo nunca menor que 110px, porque abaixo disso a mao de 2 anos nao acerta;
   - nada pisca rapido, nada vermelho de erro, nada de contagem regressiva;
   - todo clique produz alguma resposta, mesmo o que erra o alvo. */

:root {
  --creme: #FFF7E6;
  --tinta: #143642;
  --apoio: #31565F;
  --turquesa: #2FBFD6;
  --ambar: #F0B429;
  --coral: #E4572E;
  --verde: #3FA96B;
  --roxo: #8E6BC9;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--creme);
  color: var(--tinta);
  font-family: "Segoe UI", Verdana, system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* O menu precisa rolar no celular: com nove jogos o conteudo passa de 1500px e
   os ultimos cartoes ficariam inalcancaveis. A trava de rolagem so entra
   durante o jogo, para a crianca nao arrastar a tela sem querer. */
body.jogando {
  overflow: hidden;
  height: 100%;
}

/* ---------- entrada ---------- */

#entrada {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

#entrada h1 { margin: 0; font-size: clamp(28px, 4vw, 46px); }
#entrada .sub { margin: 0; color: var(--apoio); font-size: clamp(14px, 1.6vw, 18px); }

.cartoes { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* O cartao e a propria ilustracao: sem moldura, sem respiro branco em volta.
   O desenho sangra ate a borda e e ele que diz de qual jogo se trata, porque
   quem escolhe ainda nao le. */
.cartao {
  width: clamp(190px, 22vw, 268px);
  border: 0;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 10px 26px rgba(20, 54, 66, .18);
  transition: transform .14s, box-shadow .14s;
}

.cartao:hover, .cartao:focus-visible {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(20, 54, 66, .28);
  outline: none;
}

.cartao .arte {
  display: block;
  line-height: 0;
}
.cartao .arte svg {
  width: 100%;
  height: auto;
  display: block;
}

.cartao b {
  display: block;
  padding: 11px 14px 13px;
  font-size: 19px;
  line-height: 1.15;
}
.cartao b i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--apoio);
}

.voltar-hub {
  color: var(--apoio);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(49, 86, 95, .3);
}
.voltar-hub:hover { color: var(--tinta); }

#entrada .dica {
  max-width: 560px;
  font-size: 13px;
  color: var(--apoio);
  background: #F6EAD1;
  padding: 12px 18px;
  border-radius: 14px;
  margin: 0;
}

/* ---------- jogo ---------- */

#jogo {
  position: fixed;
  inset: 0;
  cursor: none;
  background: radial-gradient(circle at 50% 40%, #FFFDF7, var(--creme) 70%);
}

/* Os cenarios sao desenhados em ::before e ::after do #jogo. O ::after e
   gerado como ULTIMO filho, entao pinta por cima dos alvos e engolia o clique:
   nas cenas com ::after cobrindo o meio da tela o jogo parecia travado. Sao
   pura decoracao e nunca devem receber ponteiro. */
#jogo::before, #jogo::after { pointer-events: none; }

#particulas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#alvos { position: absolute; inset: 0; }

/* Cursor gigante: crianca pequena perde a setinha do sistema de vista. */
#cursor {
  position: absolute;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 6px solid var(--coral);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .08s;
  z-index: 40;
}
#cursor.apertado { transform: scale(.7); }

/* Em tela de toque nao ha ponteiro para seguir: o anel ficaria parado num canto.
   Some com ele e devolve o cursor normal, que no celular nem aparece. */
@media (pointer: coarse) {
  #cursor { display: none; }
  #jogo, .alvo, #engrenagem { cursor: auto; }
}

.alvo {
  position: absolute;
  border-radius: 50%;
  cursor: none;
  display: grid;
  place-items: center;
  animation: bailar 1.6s ease-in-out infinite;
  box-shadow: 0 10px 26px rgba(20, 54, 66, .22), inset 0 -10px 24px rgba(0, 0, 0, .12);
  will-change: transform;
}

.alvo svg { width: 62%; height: 62%; pointer-events: none; }

/* O alvo nunca fica parado: movimento e o que chama a atencao para ele. */
@keyframes bailar {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.07) rotate(3deg); }
}

.alvo.morrendo { animation: estourar .34s ease-out forwards; pointer-events: none; }

@keyframes estourar {
  to { transform: scale(1.9); opacity: 0; }
}

/* recompensa que sobe depois do acerto */
.premio {
  position: absolute;
  pointer-events: none;
  animation: subir 1.5s ease-out forwards;
  z-index: 30;
}

@keyframes subir {
  0%   { transform: translateY(0) scale(.4); opacity: 0; }
  18%  { transform: translateY(-14px) scale(1.25); opacity: 1; }
  100% { transform: translateY(-190px) scale(.85); opacity: 0; }
}

/* colecao acumulada no rodape: progresso sem placar nem numero */
#colecao {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 74px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 12px 8px;
  flex-wrap: wrap;
  overflow: hidden;
  pointer-events: none;
}
#colecao svg { width: 46px; height: 46px; animation: pular .45s cubic-bezier(.2,1.5,.4,1) both; }

@keyframes pular {
  from { transform: translateY(60px) scale(.4); }
  to   { transform: translateY(0) scale(1); }
}

/* ---------- alvos livres (carro, jogador, balao) ---------- */

.alvo.livre {
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.alvo.livre svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(20, 54, 66, .3)); }

.alvo.chutando { animation: chutar .3s ease-out; }

@keyframes chutar {
  0%   { transform: rotate(0) translateX(0); }
  35%  { transform: rotate(-14deg) translateX(-10px); }
  60%  { transform: rotate(12deg) translateX(14px); }
  100% { transform: rotate(0) translateX(0); }
}

.bola {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff, #E8E8E8 60%, #C4C4C4);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.bola::after {
  content: "";
  position: absolute;
  inset: 12px;
  background: #143642;
  clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
  opacity: .82;
}

.chama {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #FFF3B0, #F0B429 45%, #E4572E 78%);
  pointer-events: none;
  animation: labareda .5s ease-out forwards;
  z-index: 25;
}

@keyframes labareda {
  0%   { transform: scaleY(.4) translateY(6px); opacity: .95; }
  45%  { transform: scaleY(1.5) translateY(-8px); opacity: 1; }
  100% { transform: scaleY(2.2) translateY(-26px); opacity: 0; }
}

/* ---------- cenarios ---------- */

#jogo.cenario-corrida {
  background:
    repeating-linear-gradient(90deg, transparent 0 76px, rgba(255,255,255,.85) 76px 140px) 0 50% / 100% 12px no-repeat,
    linear-gradient(#8ED0E8 0 44%, #6B6F76 44% 100%);
}
#jogo.cenario-corrida::after {
  content: "";
  position: absolute;
  right: 0; top: 44%; bottom: 0;
  width: 26px;
  background: repeating-conic-gradient(#fff 0 25%, #222 0 50%) 0 0 / 26px 26px;
}

#jogo.cenario-futebol {
  background:
    repeating-linear-gradient(90deg, #3FA96B 0 92px, #37995F 92px 184px);
}
#jogo.cenario-futebol::after {
  /* trave: so cenario, a bola passa por cima */
  content: "";
  position: absolute;
  right: 3%;
  top: 22%;
  width: 15%;
  height: 46%;
  border: 9px solid #fff;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.30) 0 3px, transparent 3px 11px);
}

#jogo.cenario-balao {
  background: linear-gradient(#7FC8E8 0 58%, #BFE4F2 78%, #D9F0DC 100%);
}
#jogo.cenario-balao::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 34px, transparent 35px),
    radial-gradient(circle at 26% 26%, #fff 0 26px, transparent 27px),
    radial-gradient(circle at 74% 16%, #fff 0 30px, transparent 31px),
    radial-gradient(circle at 82% 20%, #fff 0 22px, transparent 23px);
  opacity: .82;
}

/* ---------- palavra do cenario ---------- */

#palavra {
  position: absolute;
  top: 3%;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  pointer-events: none;
  opacity: 0;
  z-index: 35;
}

/* a letra inicial, destacada como referencia */
#palavra .letra {
  display: grid;
  place-items: center;
  width: clamp(56px, 11vw, 132px);
  aspect-ratio: 1;
  border-radius: 24%;
  background: var(--ambar);
  color: #fff;
  font-size: clamp(38px, 7.5vw, 92px);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 0 #C08A12, 0 12px 28px rgba(0, 0, 0, .38);
}

/* a palavra inteira, sempre em maiusculas */
#palavra .todo {
  font-size: clamp(34px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 4px 0 rgba(20, 54, 66, .6), 0 10px 26px rgba(0, 0, 0, .45);
}

#palavra.aparecendo { animation: palavraEntra 2.6s ease-out forwards; }

@keyframes palavraEntra {
  0%   { opacity: 0; transform: scale(.4) rotate(-6deg); }
  14%  { opacity: 1; transform: scale(1.14) rotate(3deg); }
  26%  { transform: scale(1) rotate(0); }
  74%  { opacity: 1; }
  100% { opacity: .18; transform: scale(.96); }
}

/* manobra: a prancha inclina para um lado a cada clique */
.alvo.manobra-esq { animation: inclinaEsq .42s ease-out; }
.alvo.manobra-dir { animation: inclinaDir .42s ease-out; }

@keyframes inclinaEsq {
  0%   { transform: rotate(0); }
  45%  { transform: rotate(-17deg) translateX(-8px); }
  100% { transform: rotate(0); }
}
@keyframes inclinaDir {
  0%   { transform: rotate(0); }
  45%  { transform: rotate(17deg) translateX(8px); }
  100% { transform: rotate(0); }
}

/* ---------- cenarios das jornadas ---------- */

/* ---------- surfe: cada etapa com uma cena propria ----------
   A versao anterior tinha duas etapas com o MESMO fundo. Mudava de fase e a
   tela ficava igual, o que parecia travamento. Aqui cada cena muda de cor,
   de linha d'agua e de horizonte. */

/* o predio onde a familia mora, com a calcada na frente */
#jogo.cenario-predio {
  background:
    linear-gradient(#8FD4F0 0 62%, #C9C3B4 62% 74%, #A8A294 74% 78%, #BFB9A8 78%);
}
#jogo.cenario-predio::before {
  content: "";
  position: absolute; right: 0; top: 0; width: 42%; height: 66%;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, #2C3843 14px 40px, transparent 40px 54px),
    repeating-linear-gradient(180deg, transparent 0 16px, #F0B429 16px 34px, transparent 34px 52px),
    #4A5A66;
  background-blend-mode: normal, multiply, normal;
  border-radius: 6px 0 0 0;
}

/* a rua com faixa de pedestre e carros parados dos dois lados */
#jogo.cenario-rua,
#jogo.cenario-rua-volta {
  background:
    linear-gradient(#8FD4F0 0 26%, #BFB9A8 26% 38%, #5A6068 38% 82%, #BFB9A8 82%);
}
#jogo.cenario-rua::before,
#jogo.cenario-rua-volta::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 58%; height: 5%;
  background: repeating-linear-gradient(90deg, #F4EFD8 0 46px, transparent 46px 92px);
}
#jogo.cenario-rua::after,
#jogo.cenario-rua-volta::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 40%; height: 40%;
  background:
    no-repeat 8% 22%/clamp(90px,15vw,180px)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"><path d="M10 62 q0 -16 18 -18 l12 -14 q3 -4 9 -4 h26 q6 0 9 4 l12 14 q14 2 14 18 v8 q0 5 -6 5 h-88 q-6 0 -6 -5z" fill="%232FBFD6"/><path d="M44 32 h14 v16 h-26z" fill="%23CFEAF2"/><circle cx="30" cy="74" r="12" fill="%232B2B2B"/><circle cx="74" cy="74" r="12" fill="%232B2B2B"/></svg>'),
    no-repeat 88% 68%/clamp(90px,15vw,180px)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 90"><path d="M10 62 q0 -16 18 -18 l12 -14 q3 -4 9 -4 h26 q6 0 9 4 l12 14 q14 2 14 18 v8 q0 5 -6 5 h-88 q-6 0 -6 -5z" fill="%23E4572E"/><path d="M44 32 h14 v16 h-26z" fill="%23CFEAF2"/><circle cx="30" cy="74" r="12" fill="%232B2B2B"/><circle cx="74" cy="74" r="12" fill="%232B2B2B"/></svg>');
}
/* a volta usa o fim de tarde, para a mesma rua nao parecer a mesma cena */
#jogo.cenario-rua-volta {
  background:
    linear-gradient(#F3A46B 0 26%, #C9AE8C 26% 38%, #4A4E56 38% 82%, #A89C88 82%);
}

/* casas baixas no caminho da praia */
#jogo.cenario-casas,
#jogo.cenario-casas-volta {
  background: linear-gradient(#8FD4F0 0 58%, #A8C98A 58% 70%, #D8C79C 70%);
}
#jogo.cenario-casas::before,
#jogo.cenario-casas-volta::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 22%; height: 46%;
  background:
    no-repeat 6% 100%/clamp(110px,17vw,210px)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="14" y="46" width="72" height="44" fill="%23F0B429"/><path d="M8 48 L50 16 L92 48z" fill="%23E4572E"/><rect x="42" y="62" width="18" height="28" fill="%238C5A34"/></svg>'),
    no-repeat 40% 100%/clamp(110px,17vw,210px)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="14" y="46" width="72" height="44" fill="%237FE3F0"/><path d="M8 48 L50 16 L92 48z" fill="%232F5AA8"/><rect x="42" y="62" width="18" height="28" fill="%238C5A34"/></svg>'),
    no-repeat 74% 100%/clamp(110px,17vw,210px)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="14" y="46" width="72" height="44" fill="%233FA96B"/><path d="M8 48 L50 16 L92 48z" fill="%238E6BC9"/><rect x="42" y="62" width="18" height="28" fill="%238C5A34"/></svg>');
}
#jogo.cenario-casas-volta {
  background: linear-gradient(#EFA978 0 58%, #93A87C 58% 70%, #C2AF87 70%);
}

/* 0. areia seca, sol alto e barracas */
#jogo.cenario-areia {
  background:
    radial-gradient(circle at 80% 12%, #FFF6C4 0 56px, #FFE38A 0 70px, transparent 72px),
    linear-gradient(#7FC8E8 0 40%, #A8DDF0 40% 48%, #F6E2B0 48%, #E0C489 100%);
}
#jogo.cenario-areia::before {
  content: "";
  position: absolute; left: 5%; bottom: 30%;
  width: clamp(110px, 18vw, 210px); aspect-ratio: 1;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L92 62 H8z" fill="%23E4572E"/><path d="M50 10 L71 36 L50 62 L29 36z" fill="%23FAFAFA" opacity=".85"/><rect x="47" y="58" width="6" height="30" fill="%23B07C46"/></svg>');
}
#jogo.cenario-areia::after {
  content: "";
  position: absolute; right: 7%; bottom: 34%;
  width: clamp(90px, 14vw, 170px); aspect-ratio: 1;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L92 62 H8z" fill="%238E6BC9"/><path d="M50 10 L71 36 L50 62 L29 36z" fill="%23FAFAFA" opacity=".85"/><rect x="47" y="58" width="6" height="30" fill="%23B07C46"/></svg>');
}

/* 1. a beira: metade areia, metade agua, com a espuma no meio */
#jogo.cenario-beira {
  background: linear-gradient(#7FC8E8 0 30%, #59B4D4 30% 52%, #CFEAF2 52% 58%, #F2DEA8 58%, #DFC386 100%);
}
#jogo.cenario-beira::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 10%;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 40px, transparent 40px 92px);
  border-radius: 50%;
}

/* 2. mar aberto, com as ondas quebrando la no fundo a direita */
#jogo.cenario-remada {
  background: linear-gradient(#8FD4F0 0 22%, #4FA8C9 22%, #2A88B0 62%, #1F6E92 100%);
}
#jogo.cenario-remada::after {
  content: "";
  position: absolute; right: 0; top: 22%; bottom: 0; width: 34%;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.55) 0 6px, transparent 6px 44px);
  mask-image: linear-gradient(90deg, transparent, #000 60%);
}

/* 3. a onda subindo atras dele */
#jogo.cenario-pegando {
  background: linear-gradient(#8FD4F0 0 18%, #46A9CE 18%, #24789E 100%);
}
#jogo.cenario-pegando::after {
  content: "";
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 66%;
  background: linear-gradient(#5FC0DE, #2A88B0 62%, #1B6C90);
  border-radius: 60% 40% 0 0 / 86% 86% 0 0;
  box-shadow: inset 0 16px 0 rgba(255, 255, 255, .6);
}

/* 4. a descida: parede alta e inclinada, com espuma quebrando no topo */
#jogo.cenario-descida {
  background: linear-gradient(#7FD0EE 0 14%, #3C9FC8 14%, #17638A 100%);
}
#jogo.cenario-descida::before {
  content: "";
  position: absolute; left: -20%; right: -6%; top: 8%; height: 96%;
  background: linear-gradient(200deg, #6FCBE6 0 22%, #2E8FB8 40%, #1B6C90 100%);
  border-radius: 88% 8% 0 0 / 78% 22% 0 0;
  box-shadow: inset 0 20px 0 rgba(255, 255, 255, .7);
}
#jogo.cenario-descida::after {
  content: "";
  position: absolute; left: 4%; top: 10%; width: 46%; height: 26%;
  background: radial-gradient(circle at 30% 60%, rgba(255,255,255,.9) 0 26px, transparent 28px),
              radial-gradient(circle at 62% 40%, rgba(255,255,255,.75) 0 20px, transparent 22px),
              radial-gradient(circle at 86% 70%, rgba(255,255,255,.65) 0 16px, transparent 18px);
}

/* 5. volta para a beira, agora com o sol mais baixo */
#jogo.cenario-volta {
  background:
    radial-gradient(circle at 22% 14%, #FFE9A8 0 52px, transparent 54px),
    linear-gradient(#9FD8EE 0 28%, #58B2D2 28% 50%, #D6EEF5 50% 56%, #F0DBA4 56%, #DCBF80 100%);
}

/* 6. a escolha: mar de um lado, areia do outro, dividido no meio */
#jogo.cenario-escolha {
  background: linear-gradient(90deg, #2A88B0 0 50%, #F0DBA4 50% 100%);
}
#jogo.cenario-escolha::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.35) 0 5px, transparent 5px 40px);
}
#jogo.cenario-escolha::after {
  content: "";
  position: absolute; right: 0; top: 0; bottom: 0; width: 50%;
  background: radial-gradient(circle at 70% 18%, #FFF3B0 0 46px, transparent 48px);
}

/* 7. a barraca, fim de tarde e sombra */
#jogo.cenario-barraca {
  background:
    radial-gradient(circle at 84% 18%, #FFD97A 0 50px, transparent 52px),
    linear-gradient(#F3B96B 0 34%, #EBD3A0 46%, #E4C78C 56%, #D2AE70 100%);
}

/* sol, areia e duas barracas: o cenario da chegada na praia */
#jogo.cenario-praia {
  background:
    radial-gradient(circle at 80% 14%, #FFF3B0 0 54px, #FFE38A 0 66px, transparent 68px),
    linear-gradient(#7FC8E8 0 46%, #9FD8EE 46% 56%, #F6E2B0 56%, #E8CE93 100%);
}
#jogo.cenario-praia::before {
  content: "";
  position: absolute;
  left: 4%; bottom: 26%;
  width: clamp(120px, 20vw, 240px);
  aspect-ratio: 1;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L92 62 H8z" fill="%23E4572E"/><path d="M50 10 L71 36 L50 62 L29 36z" fill="%23FAFAFA" opacity=".85"/><rect x="47" y="58" width="6" height="30" fill="%23B07C46"/></svg>');
}
#jogo.cenario-praia::after {
  content: "";
  position: absolute;
  right: 6%; bottom: 24%;
  width: clamp(100px, 16vw, 200px);
  aspect-ratio: 1;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 10 L92 62 H8z" fill="%238E6BC9"/><path d="M50 10 L71 36 L50 62 L29 36z" fill="%23FAFAFA" opacity=".85"/><rect x="47" y="58" width="6" height="30" fill="%23B07C46"/></svg>');
}

/* mar aberto, remando para fora */
#jogo.cenario-mar {
  background:
    radial-gradient(circle at 78% 12%, #FFF3B0 0 48px, transparent 50px),
    linear-gradient(#8FD4F0 0 34%, #4FA8C9 34%, #2F86AC 72%, #24708F 100%);
}
#jogo.cenario-mar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 34%; bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 34px, transparent 34px 84px);
  mask-image: linear-gradient(rgba(0,0,0,.9), transparent);
}

/* a onda subindo, com a crista de espuma */
#jogo.cenario-onda,
#jogo.cenario-surfe {
  background:
    radial-gradient(circle at 16% 12%, #FFF3B0 0 44px, transparent 46px),
    linear-gradient(#8FD4F0 0 26%, #35A0C6 26%, #1F7CA4 100%);
}
#jogo.cenario-onda::after,
#jogo.cenario-surfe::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; bottom: 0;
  height: 74%;
  background: linear-gradient(#4FB6D8, #2A88B0 60%, #1B6C90);
  border-radius: 68% 22% 0 0 / 92% 46% 0 0;
  box-shadow: inset 0 14px 0 rgba(255, 255, 255, .55);
}

#jogo.cenario-gaivotas {
  background:
    radial-gradient(circle at 22% 16%, #FFF3B0 0 50px, transparent 52px),
    linear-gradient(#7FC8E8 0 62%, #BFE4F2 74%, #4FA8C9 74%, #2F86AC 100%);
}

/* fim de tarde: ceu laranja e reflexo no mar */
#jogo.cenario-porsol {
  background:
    radial-gradient(circle at 50% 52%, #FFD97A 0 62px, #FFB35C 0 78px, transparent 80px),
    linear-gradient(#F3A46B 0 40%, #E4726B 52%, #C4577A 58%, #7A4A86 100%);
}
#jogo.cenario-porsol::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 217, 122, .5) 0 26px, transparent 26px 64px),
    linear-gradient(#6E4A7E, #4A3660);
}

#jogo.cenario-terra {
  background:
    radial-gradient(circle at 78% 16%, #FFF3B0 0 46px, transparent 47px),
    linear-gradient(#8FD4F0 0 62%, #BFE6F5 74%, #6FBF6A 74%, #4E9E52 100%);
}

#jogo.cenario-espaco,
#jogo.cenario-lua,
#jogo.cenario-base {
  background-color: #0B1026;
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 2.5px, transparent 3px),
    radial-gradient(circle at 33% 9%,  #fff 0 1.8px, transparent 2px),
    radial-gradient(circle at 58% 22%, #fff 0 2.2px, transparent 3px),
    radial-gradient(circle at 79% 12%, #fff 0 1.6px, transparent 2px),
    radial-gradient(circle at 90% 34%, #fff 0 2.4px, transparent 3px),
    radial-gradient(circle at 22% 44%, #fff 0 1.6px, transparent 2px),
    radial-gradient(circle at 68% 48%, #fff 0 2px, transparent 3px);
}

/* a Terra pequena ao longe, para ele ver de onde veio */
#jogo.cenario-espaco::before {
  content: "";
  position: absolute;
  left: 6%; bottom: 8%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #6FC5E8, #2F7FC4 58%, #1B5A94);
  box-shadow: 0 0 40px rgba(90, 180, 240, .55);
}
#jogo.cenario-espaco::after {
  content: "";
  position: absolute;
  right: 10%; top: 12%;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #F6F2E4, #CFC9B8);
  box-shadow: 0 0 30px rgba(255, 250, 230, .4);
}

/* chao da Lua */
#jogo.cenario-lua::after,
#jogo.cenario-base::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: radial-gradient(circle at 22% 10%, #B9B2A4 0 34px, transparent 35px),
              radial-gradient(circle at 64% 26%, #B9B2A4 0 26px, transparent 27px),
              linear-gradient(#D6CFC0, #A9A294);
  border-radius: 46% 54% 0 0 / 22% 18% 0 0;
}

#jogo.cenario-base::before {
  content: "";
  position: absolute;
  right: 6%; bottom: 22%;
  width: clamp(150px, 26vw, 300px);
  aspect-ratio: 1;
  background: no-repeat center/contain
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="14" y="60" width="72" height="26" rx="6" fill="%23C9CED6"/><path d="M18 62 q32 -34 64 0z" fill="%23E4E8EE"/><rect x="42" y="64" width="18" height="22" rx="4" fill="%232FBFD6"/><circle cx="30" cy="50" r="7" fill="%237FE3F0"/><circle cx="70" cy="50" r="7" fill="%237FE3F0"/><rect x="76" y="24" width="3" height="26" fill="%239AA3AC"/><circle cx="77" cy="21" r="6" fill="%23E4572E"/></svg>');
}

/* corredor da base: escotilhas azuis nas paredes */
#jogo.cenario-interior {
  background:
    radial-gradient(circle at 16% 22%, #7FE3F0 0 44px, transparent 45px),
    radial-gradient(circle at 84% 20%, #7FE3F0 0 36px, transparent 37px),
    linear-gradient(#F6EAD1 0 72%, #D8C7A6 72%, #C4B08C 100%);
}

/* sala de jantar: mais quente, com a janela mostrando o espaco la fora.
   Precisa ser visivelmente diferente do corredor porque e a etapa seguinte. */
#jogo.cenario-mesa {
  background:
    radial-gradient(circle at 82% 24%, #0B1026 0 78px, #2B3350 0 88px, transparent 90px),
    linear-gradient(#FFE9C4 0 64%, #E8C79A 64% 72%, #B98F5E 72%, #9C7549 100%);
}
#jogo.cenario-mesa::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 64%; height: 8%;
  background: repeating-linear-gradient(90deg, rgba(140,90,52,.35) 0 58px, transparent 58px 64px);
}

/* solo lunar com a Terra no ceu: a etapa de pular na Lua, diferente da etapa
   do pouso, que usa o mesmo chao mas sem a Terra */
#jogo.cenario-lua-solo {
  background-color: #0B1026;
  background-image:
    radial-gradient(circle at 78% 20%, #6FC5E8 0 40px, #2F7FC4 0 52px, transparent 54px),
    radial-gradient(circle at 14% 14%, #fff 0 2.4px, transparent 3px),
    radial-gradient(circle at 38% 8%, #fff 0 1.8px, transparent 2px),
    radial-gradient(circle at 56% 26%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 92% 44%, #fff 0 1.8px, transparent 2px);
}
#jogo.cenario-lua-solo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%;
  background: radial-gradient(circle at 30% 14%, #B9B2A4 0 30px, transparent 32px),
              radial-gradient(circle at 72% 30%, #B9B2A4 0 24px, transparent 26px),
              linear-gradient(#D6CFC0, #A9A294);
  border-radius: 44% 56% 0 0 / 20% 16% 0 0;
}

#jogo.cenario-arvores {
  background:
    radial-gradient(circle at 14% 16%, #2E7D4F 0 90px, transparent 92px),
    radial-gradient(circle at 46% 8%,  #35935C 0 110px, transparent 112px),
    radial-gradient(circle at 84% 14%, #2E7D4F 0 96px, transparent 98px),
    linear-gradient(#9FD9A8 0 74%, #6FAF6E 74%, #4E8E52 100%);
}

#jogo.cenario-agua {
  background:
    linear-gradient(#9FD9A8 0 40%, #4FA8C9 40%, #2F86AC 78%, #24708F 100%);
}
#jogo.cenario-agua::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 40%;
  height: 14px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 26px, transparent 26px 58px);
  border-radius: 999px;
}

#jogo.cenario-savana {
  background:
    radial-gradient(circle at 84% 18%, #FFE08A 0 52px, transparent 53px),
    linear-gradient(#F6D98F 0 58%, #E0B75E 58%, #C99B48 100%);
}

#jogo.cenario-capim {
  background:
    linear-gradient(#F3E2A8 0 54%, #C7C05A 54%, #A6A044 100%);
}

#jogo.cenario-cidade-dia    { background: linear-gradient(#8FD4F0 0 70%, #6E7C88 70%, #4A5A66 100%); }
#jogo.cenario-cidade-tarde  { background: linear-gradient(#F3A46B 0 40%, #E4726B 62%, #6E5A66 70%, #48414F 100%); }
#jogo.cenario-cidade-noite  { background: linear-gradient(#16204A 0 66%, #2B3350 66%, #1B2136 100%); }

/* silhueta de predios comum aos tres momentos do dia */
#jogo[class*="cenario-cidade"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background:
    linear-gradient(90deg,
      #3C4A56 0 12%, transparent 12% 15%,
      #33404B 15% 30%, transparent 30% 33%,
      #3C4A56 33% 47%, transparent 47% 50%,
      #2C3843 50% 66%, transparent 66% 69%,
      #3C4A56 69% 84%, transparent 84% 87%,
      #33404B 87% 100%);
  mask-image: linear-gradient(#000 0 100%);
}
#jogo[class*="cenario-cidade"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background-image: radial-gradient(circle, #F0B429 0 3px, transparent 4px);
  background-size: 34px 40px;
  opacity: .55;
}

/* respingo de tinta do jogo Pintar */
.respingo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: crescer .5s cubic-bezier(.2, 1.3, .4, 1) both;
}

@keyframes crescer {
  from { transform: scale(0); opacity: .95; }
  to   { transform: scale(1); opacity: .8; }
}

/* ---------- saida do adulto ---------- */

#engrenagem {
  position: absolute;
  top: 10px; right: 10px;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 54, 66, .1);
  color: var(--apoio);
  font-size: 19px;
  cursor: none;
  z-index: 50;
}

#anel {
  position: absolute;
  top: 10px; right: 10px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 4px solid var(--coral);
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  opacity: 0;
  z-index: 51;
}
#anel.carregando { animation: encher 2s linear forwards; opacity: 1; }

@keyframes encher {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---------- painel do adulto ---------- */

#painel {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(420px, 92vw);
  height: fit-content;
  background: #fff;
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 20px 60px rgba(20, 54, 66, .35);
  z-index: 60;
}
#painel h2 { margin: 0 0 18px; font-size: 22px; }
#painel .linha { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
#painel label { font-size: 15px; }
#painel input[type=range] { width: 190px; accent-color: var(--turquesa); }
#painel input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--turquesa); }
#painel .botoes { display: flex; gap: 10px; margin-top: 22px; }
#painel button {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: #EDE3CC;
  color: var(--tinta);
}
#painel #fechar { background: var(--tinta); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .alvo { animation: none; }
}