/* ============================================================
   BURUBLINHO — POTES DE CÉU
   Os Bichos da Dona Öta
   
   © 2026 Dani Rezende. Todos os direitos reservados.
   Personagens, canção, imagens, textos e código são obra autoral.
   É proibida a cópia, a reprodução ou a distribuição sem autorização
   expressa da autora.
   ============================================================ */

/* ============================================================
   AS LETRAS
   Embutidas na pasta assets/fontes para o jogo abrir igual em
   qualquer aparelho — e sem internet. Baloo 2 e Nunito são
   fontes livres (licença SIL Open Font License 1.1).
   ============================================================ */
@font-face{
  font-family:'Baloo 2';
  src:url('../assets/fontes/baloo2.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('../assets/fontes/nunito.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}
/* ============================================================
   BURUBLINHO — POTES DE CÉU
   estilo.css
   ============================================================ */

:root{
  --azul:#34B6F0;
  --azul-ceu:#8ED6F7;
  --azul-fundo:#E8F6FE;
  --amarelo:#FFD23F;
  --amarelo-sol:#FFB800;
  --rosa:#FF9CC9;
  --roxo:#8B5CF6;
  --creme:#FFF9EF;
  --texto:#3A2E4D;
  --suave:#6B6178;
  --branco:#FFFFFF;

  --alvo:76px;              /* tamanho mínimo de qualquer coisa tocável */
  --raio:22px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%;
  overflow:hidden;
  background:#BFE6FA;
  font-family:'Baloo 2','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--texto);
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}

#palco{
  position:fixed; inset:0;
  overflow:hidden;
}

/* ---------- CAMADAS DO CÉU ---------- */
.camada{
  position:absolute; inset:0;
  pointer-events:none;
}
.camada img, .camada svg{ width:100%; height:100%; object-fit:cover; display:block; }

#camada-fundo{ z-index:1; }

/* a faixa de nuvens da frente fica encostada embaixo, na largura toda */
#camada-frente{
  z-index:6;
  inset:auto 0 0 0; height:auto;
}
#camada-frente img{ width:100%; height:auto; object-fit:fill; }

/* nuvens decorativas que passam devagar */
.nuvem-passeio{
  position:absolute; z-index:2;
  width:26vmin; opacity:.85;
  animation:passear linear infinite;
}
.nuvem-passeio img, .nuvem-passeio svg{ width:100%; height:auto; display:block; }
@keyframes passear{
  from{ transform:translateX(-35vw); }
  to  { transform:translateX(135vw); }
}
body.sem-movimento .nuvem-passeio{ animation:none; }

/* ilhas flutuantes: pequenas, altas e longe do meio, pra não disputar
   atenção com o que a criança precisa tocar */
.ilha{
  position:absolute; z-index:3; pointer-events:none;
  animation:flutuar 7s ease-in-out infinite;
}
.ilha img, .ilha svg{ width:100%; height:auto; display:block; }
.ilha.espelhada img{ transform:scaleX(-1); }
body.sem-movimento .ilha{ animation:none; }
body.no-mapa .ilha{ display:none; }

/* Quando uma imagem de verdade entra no lugar de um desenho provisório,
   ela ocupa exatamente o mesmo espaço. Sem isso a imagem sai no tamanho
   original e estoura a tela. */
#palco-pote img, .escolha img, #caminho img, .cartao .figura img,
.entre-cartoes img, .nuvem-passeio img, #respirar img{
  width:100%; height:auto; display:block;
}

/* ---------- TELAS ---------- */
.tela{
  position:absolute; inset:0; z-index:10;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:5vmin 4vmin;
  gap:2.4vmin;
  text-align:center;
}
.tela[hidden]{ display:none !important; }

/* ---------- FAIXA DE FALA ---------- */
.fala{
  background:rgba(255,255,255,.88);
  border-radius:var(--raio);
  padding:2.2vmin 4vmin;
  font-size:clamp(17px, 3.4vmin, 30px);
  line-height:1.3;
  max-width:min(92vw, 720px);
  box-shadow:0 6px 0 rgba(58,46,77,.10);
}
.fala.pequena{ font-size:clamp(14px, 2.4vmin, 21px); background:rgba(255,255,255,.7); }

/* ---------- BOTÕES ---------- */
.botao{
  display:flex; align-items:center; justify-content:center; gap:2vmin;
  min-width:var(--alvo); min-height:var(--alvo);
  padding:2vmin 5vmin;
  border:none; border-radius:var(--raio);
  background:var(--azul); color:#fff;
  font-family:inherit; font-weight:700;
  font-size:clamp(18px, 3.2vmin, 28px);
  box-shadow:0 7px 0 #1b8fc9;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.botao:active{ transform:translateY(5px); box-shadow:0 2px 0 #1b8fc9; }
.botao.clara{ background:var(--branco); color:var(--texto); box-shadow:0 7px 0 rgba(58,46,77,.15); }
.botao svg{ width:clamp(26px,4.4vmin,40px); height:auto; }
.botao.clara svg *{ stroke:var(--texto); }
.botao.clara svg [fill]:not([fill="none"]){ fill:var(--texto); }

/* ---------- CANTOS FIXOS ---------- */
.canto{
  position:absolute; z-index:40;
  width:var(--alvo); height:var(--alvo);
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 4px 0 rgba(58,46,77,.14);
  border:2px solid rgba(52,182,240,.35);
  cursor:pointer;
}
.canto[hidden]{ display:none !important; }
.canto svg{ width:52%; height:52%; }
.canto img{ width:60%; height:60%; object-fit:contain; }
#btn-som{ left:3vmin; top:3vmin; }
#btn-voltar{ left:3vmin; bottom:3vmin; }
#canto-painel{
  right:0; top:0; width:78px; height:78px;
  background:transparent; box-shadow:none; border-radius:0;
  z-index:45;
}

/* ---------- PERSONAGENS ---------- */
.ator{ position:absolute; z-index:5; pointer-events:none; }
.ator img, .ator svg{ width:100%; height:100%; display:block; object-fit:contain; }
.ator .pose[hidden]{ display:none !important; }
.ator .pose{ position:absolute; inset:0; }

#burublinho{ width:46vmin; height:26vmin; }
#gentilicio{ width:60vmin; height:32vmin; }

/* flutuar de leve */
@keyframes flutuar{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-1.6vmin); }
}
.flutua{ animation:flutuar 2.5s ease-in-out infinite; }
body.sem-movimento .flutua{ animation:none; }

/* ---------- ABERTURA ---------- */
#tela-abertura .titulo{
  font-size:clamp(34px, 9vmin, 92px);
  font-weight:800; color:#1b6fa8;
  text-shadow:0 3px 0 rgba(255,255,255,.75);
  letter-spacing:-.01em; line-height:1;
}
#tela-abertura .palco-personagem{ width:52vmin; height:30vmin; position:relative; }

/* ---------- AVISO (antecipação) ---------- */
.cartoes{ display:flex; gap:3vmin; align-items:center; flex-wrap:wrap; justify-content:center; }
.cartao{
  background:rgba(255,255,255,.92);
  border-radius:var(--raio);
  padding:2.4vmin;
  width:30vmin; max-width:200px;
  box-shadow:0 6px 0 rgba(58,46,77,.10);
}
.cartao .rotulo{
  font-size:clamp(12px,2vmin,18px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--suave);
}
.cartao .figura{ height:18vmin; max-height:130px; display:flex; align-items:center; justify-content:center; }
.cartao .figura svg, .cartao .figura img{ max-width:100%; max-height:100%; }
.cartao .nome{ font-size:clamp(16px,2.8vmin,24px); font-weight:700; }
.entre-cartoes svg{ width:7vmin; max-width:46px; opacity:.5; }

/* ---------- O VOO DE COLETA ---------- */
#tela-voo{ display:block; padding:0; }
#tela-voo[hidden]{ display:none !important; }

#tela-voo #fala-voo{
  position:absolute; left:50%; top:3vmin; transform:translateX(-50%);
  z-index:20; max-width:86vw;
}

#campo-voo{ position:absolute; inset:0; z-index:12; }

#buru-voo{
  position:absolute;
  width:40vmin; height:23vmin;
  margin-left:-20vmin; margin-top:-11.5vmin;   /* o ponto é o centro dele */
  z-index:16; pointer-events:none;
}

/* ---------- CÉU DO SOL ---------- */
/* o rio embaixo, de onde a água sobe */
#rio-voo{
  position:absolute; left:0; right:0; bottom:0;
  height:auto; z-index:13; pointer-events:none;
}
#rio-voo[hidden]{ display:none !important; }
#rio-voo img{ width:100%; height:auto; display:block; }
/* enquanto não existe a imagem do rio, uma faixa de água desenhada */
#rio-voo.provisorio{
  height:16vmin;
  background:linear-gradient(180deg,
    rgba(110,205,240,0) 0%, rgba(96,196,236,.75) 30%, rgba(52,160,220,.95) 100%);
  border-top:3px solid rgba(255,255,255,.55);
  border-radius:40% 40% 0 0 / 14% 14% 0 0;
}
#rio-voo.provisorio svg{ display:none; }

/* num céu que tem rio, as nuvens brancas da frente saem de cena */
body.com-rio #camada-frente{ display:none; }

/* o sol: alvo grande e fixo, sempre no mesmo lugar */
#botao-sol{
  position:absolute; right:6vmin; top:9vmin;
  width:30vmin; height:30vmin; max-width:190px; max-height:190px;
  min-width:110px; min-height:110px;
  border:none; background:none; padding:0;
  cursor:pointer; z-index:15;
  animation:pulsaSol 3.2s ease-in-out infinite;
}
#botao-sol[hidden]{ display:none !important; }
#botao-sol img, #botao-sol svg{ width:100%; height:100%; object-fit:contain; display:block; }
#botao-sol.quente{ animation:brilhaSol .9s ease; }
/* no Céu da Chuva o gatilho é a nuvem carregada, no alto e no meio */
#botao-sol.nuvem-gatilho{
  right:auto; left:50%; top:17vmin;
  transform:translateX(-50%);
  width:44vmin; height:26vmin; max-width:270px; max-height:160px;
  animation:pesaNuvem 3.4s ease-in-out infinite;
}
#botao-sol.nuvem-gatilho.quente{ animation:chacoalha .7s ease; }

/* a Terra fica no meio do céu e dá uma voltinha a cada toque */
#botao-sol.terra-gatilho{
  right:auto; left:50%; top:16vmin;
  transform:translateX(-50%);
  width:34vmin; height:34vmin; max-width:210px; max-height:210px;
  animation:none;
}
#botao-sol.terra-gatilho.quente{ animation:girouATerra 1.1s ease; }
@keyframes girouATerra{
  from{ transform:translateX(-50%) rotate(0deg); }
  to  { transform:translateX(-50%) rotate(360deg); }
}
@keyframes pesaNuvem{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(1.4vmin); }
}
@keyframes chacoalha{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  30%    { transform:translateX(-50%) translateY(2.2vmin); }
  65%    { transform:translateX(-50%) translateY(-1vmin); }
}
@keyframes pulsaSol{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.06); }
}
@keyframes brilhaSol{
  0%,100%{ transform:scale(1); filter:none; }
  40%    { transform:scale(1.22); filter:brightness(1.35); }
}
body.sem-movimento #botao-sol{ animation:none; }

/* as gotas e nuvens que passam */
.alvo{
  position:absolute;
  width:19vmin; height:19vmin;
  margin-left:-9.5vmin; margin-top:-9.5vmin;
  border:none; background:none; padding:0;
  cursor:pointer; z-index:14;
  display:flex; align-items:center; justify-content:center;
}
.alvo img, .alvo svg{ width:100%; height:100%; object-fit:contain; display:block; }
.alvo.nuvem{ width:26vmin; height:20vmin; margin-left:-13vmin; margin-top:-10vmin; }
.alvo.pego{ pointer-events:none; }
.alvo.balanca{ animation:balancar .5s ease; }
/* área de toque generosa, maior que o desenho */
.alvo::after{
  content:''; position:absolute; inset:-4vmin;
}

/* o pote enchendo, parado no canto */
#pote-progresso{
  position:absolute; right:4vmin; bottom:6vmin;
  width:30vmin; max-width:170px; min-width:104px;
  z-index:18; pointer-events:none;
}
#pote-figura img, #pote-figura svg{ width:100%; height:auto; display:block; }
#pote-dentro{
  position:absolute; left:19%; right:19%; top:34%; bottom:13%;
  display:flex; flex-wrap:wrap-reverse; align-content:flex-start;
  align-items:flex-end; justify-content:center; gap:3%;
  overflow:hidden;
}
#pote-dentro .pingo{
  width:27%; aspect-ratio:.8;
  animation:caiuNoPote .5s cubic-bezier(.3,1.4,.5,1);
}
#pote-dentro .pingo img, #pote-dentro .pingo svg{ width:100%; height:100%; object-fit:contain; }
#pote-dentro .nuvem-guardada{ width:82%; }
@keyframes caiuNoPote{
  from{ transform:translateY(-120%) scale(.5); opacity:0; }
  to  { transform:translateY(0) scale(1); opacity:1; }
}

/* o modelo da nuvem a procurar, em cima do pote */
#pote-modelo{
  position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  width:74%; margin-bottom:2vmin;
  background:rgba(255,255,255,.82); border-radius:4vmin; padding:1.6vmin;
  box-shadow:0 4px 0 rgba(58,46,77,.12);
}
#pote-modelo[hidden]{ display:none !important; }
#pote-modelo img, #pote-modelo svg{ width:100%; height:auto; display:block; }

/* a bolsa: o que a criança já juntou neste voo */
#bolsa{
  position:absolute; left:3vmin; top:calc(6vmin + var(--alvo));
  z-index:20; display:flex; flex-direction:column; gap:1.6vmin;
  pointer-events:none;
}
.bolsa-item{
  display:flex; align-items:center; gap:1.4vmin;
  background:rgba(255,255,255,.86); border-radius:99px;
  padding:1vmin 3vmin 1vmin 1vmin;
  box-shadow:0 3px 0 rgba(58,46,77,.12);
}
.bolsa-item .icone{ width:7vmin; max-width:46px; min-width:30px; }
.bolsa-item .icone svg, .bolsa-item .icone img{ width:100%; height:auto; display:block; }
.bolsa-item .conta{
  font-family:'Baloo 2',sans-serif; font-size:clamp(17px,3.2vmin,28px);
  color:#1b6fa8; min-width:1.2em; text-align:center;
}
.bolsa-item.ganhou{ animation:pulou .45s ease; }
@keyframes pulou{
  0%,100%{ transform:scale(1); }
  45%    { transform:scale(1.18); }
}

/* ---------- CONSTRUIR COISAS BOAS ---------- */
#buru-construir{ position:relative; width:38vmin; height:21vmin; }
.obras{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:3vmin; width:100%; max-width:560px; margin-top:1vmin;
}
.obra{
  border:none; background:rgba(255,255,255,.92);
  border-radius:var(--raio); padding:2.6vmin 2vmin 2vmin;
  display:flex; flex-direction:column; align-items:center; gap:1vmin;
  box-shadow:0 6px 0 rgba(58,46,77,.12);
  cursor:pointer; min-width:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.obra:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(58,46,77,.12); }
/* altura fixa: os desenhos têm formatos diferentes, os cards não podem ter */
.obra .desenho{
  width:78%; height:15vmin; max-height:116px; min-height:72px;
  display:flex; align-items:center; justify-content:center;
}
.obra .desenho svg, .obra .desenho img{
  max-width:100%; max-height:100%; width:auto; height:auto; display:block;
}
.obra .titulo{
  font-family:'Baloo 2',sans-serif; font-size:clamp(13px,2.4vmin,20px);
  color:#1b6fa8; line-height:1.15; text-align:center;
}
/* o preço em bolinhas: dá pra contar, sem precisar ler número */
.obra .preco{ display:flex; gap:.8vmin; }
.obra .preco i{
  width:2.4vmin; height:2.4vmin; min-width:12px; min-height:12px;
  border-radius:50%; background:#CFE8F6; display:block;
}
.obra .preco i.cheia{ background:var(--azul); }
.obra .preco i.ar.cheia{ background:var(--amarelo-sol); }
.obra.sem-saldo{ opacity:.45; }
.obra.sem-saldo .titulo{ color:var(--suave); }
.obra.feita{ box-shadow:0 0 0 5px #9FD89F, 0 6px 0 rgba(58,46,77,.12); }

/* as coisas construídas aparecem na ilha do mapa */
.ilha-mapa .construcoes{
  position:absolute; left:48%; right:4%; bottom:50%;
  display:flex; align-items:flex-end; justify-content:flex-start; gap:5%;
  pointer-events:none;
}
.ilha-mapa .construcoes span{ width:29%; max-width:40px; display:block; }
.ilha-mapa .construcoes svg, .ilha-mapa .construcoes img{ width:100%; height:auto; display:block; }

/* a coisa coletada voando até o pote */
.indo-pro-pote{
  position:absolute; z-index:19; pointer-events:none;
  width:14vmin; height:14vmin; margin-left:-7vmin; margin-top:-7vmin;
  transition:left .7s cubic-bezier(.4,0,.6,1), top .7s cubic-bezier(.4,0,.6,1),
             transform .7s ease-in, opacity .7s ease-in;
}
.indo-pro-pote img, .indo-pro-pote svg{ width:100%; height:100%; object-fit:contain; }

@keyframes balancar{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-7px); }
  75%{ transform:translateX(7px); }
}

/* ---------- A HORA DO DIA ----------
   A cor escolhida pela criança pinta o céu inteiro. É isso que
   transforma a escolha em descoberta: ela vê a hora mudar. */
/* O CÉU DO LUGAR: fica logo acima do fundo e ABAIXO das nuvens e ilhas,
   para que cada céu tenha a sua própria luz sem apagar os desenhos. */
#fundo-do-ceu{
  z-index:1; opacity:0;   /* logo acima do fundo, abaixo das nuvens e ilhas */
  transition:opacity 1.1s ease, background 1.1s ease;
}
#fundo-do-ceu.pintado{ opacity:1; }

#hora-do-ceu{
  z-index:7;            /* acima das nuvens da frente: tinge a cena toda */
  opacity:0;
  transition:opacity 1.1s ease, background 1.1s ease;
}
#hora-do-ceu.pintado{ opacity:1; }
/* usado só para fotografar telas: mostra o resultado sem esperar a transição */
body.sem-transicao *{ transition:none !important; }

/* ---------- POTE ---------- */
#palco-pote{ width:34vmin; max-width:230px; position:relative; }
#palco-pote svg{ width:100%; height:auto; display:block; }
#buru-pote{
  position:relative; width:40vmin; height:22vmin;
  margin-bottom:-2vmin;
}

/* a cor fica guardada dentro do vidro */
.tinta{
  position:absolute; left:15%; right:15%; top:27%; bottom:9%;
  border-radius:9%;
  mix-blend-mode:color; opacity:.8; pointer-events:none;
}

/* ---------- CARTÃO DE UM POTE GUARDADO ---------- */
#cartao-pote{
  position:absolute; inset:0; z-index:80;
  background:rgba(58,46,77,.45);
  display:flex; align-items:center; justify-content:center; padding:5vmin;
}
#cartao-pote[hidden]{ display:none !important; }
.cartao-caixa{
  background:var(--creme); border-radius:28px;
  padding:5vmin 6vmin; width:min(92vw,430px);
  text-align:center; box-shadow:0 12px 0 rgba(58,46,77,.2);
}
.cartao-pote-figura{ width:42%; margin:0 auto 2vmin; position:relative; }
.cartao-pote-figura img, .cartao-pote-figura svg{ width:100%; height:auto; display:block; }
.cartao-linha{
  font-family:'Baloo 2',sans-serif; font-size:clamp(16px,3vmin,24px);
  color:#1b6fa8; line-height:1.25; margin-bottom:1vmin;
}
.cartao-rosto{ width:22%; margin:2vmin auto 1vmin; }
.cartao-rosto svg, .cartao-rosto img{ width:100%; height:auto; display:block; }
.cartao-data{
  font-family:'Nunito',sans-serif; font-size:clamp(12px,2.1vmin,16px);
  color:var(--suave); margin-top:1vmin;
}
.cartao-botoes{ display:flex; gap:2.5vmin; justify-content:center; margin-top:4vmin; flex-wrap:wrap; }
.cartao-botoes .botao{ padding:1.6vmin 4vmin; font-size:clamp(15px,2.6vmin,21px); min-height:60px; }
.escolhas{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2.4vmin; align-items:start; justify-items:center;
  width:100%; max-width:520px;
}
.escolha{
  border:none; border-radius:var(--raio); cursor:pointer;
  width:100%; aspect-ratio:1; min-height:76px;
  box-shadow:0 6px 0 rgba(58,46,77,.14);
  display:flex; align-items:center; justify-content:center;
  padding:1.4vmin; background:rgba(255,255,255,.9);
  transition:transform .15s ease, box-shadow .15s ease;
}
.escolha:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(58,46,77,.14); }
.escolha.marcada{ box-shadow:0 0 0 6px var(--amarelo), 0 6px 0 rgba(58,46,77,.14); }
.escolha svg{ width:100%; height:100%; }
.escolha-caixa{
  display:flex; flex-direction:column; align-items:center;
  width:100%; min-width:0; max-width:126px;
}
.escolha-caixa .palavra{
  font-size:clamp(12px,2.1vmin,18px); margin-top:1vmin;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- CELULAR DEITADO ----------
   O jogo é uma subida até a Lua: ele só faz sentido em pé.
   Deitado, em vez de espremer tudo, pedimos com calma pra virar. */
#gire-o-celular{ display:none; }
@media (orientation: landscape) and (max-height: 560px){
  #gire-o-celular{
    display:flex; align-items:center; justify-content:center;
    position:fixed; inset:0; z-index:200;
    background:linear-gradient(180deg,#BFE6FA,#E8F6FE);
    padding:5vmin;
  }
  .gire-caixa{ text-align:center; max-width:70vw; }
  .gire-desenho{ width:34vmin; max-width:180px; margin:0 auto 3vmin; }
  .gire-desenho img, .gire-desenho svg{ width:100%; height:auto; display:block; }
  .gire-texto{
    font-family:'Baloo 2',sans-serif;
    font-size:clamp(18px,5vmin,30px); color:#1b6fa8; line-height:1.25;
  }
}

/* ---------- A ESTANTE ---------- */
#btn-estante{ right:3vmin; bottom:3vmin; }
#btn-estante svg{ width:56%; height:56%; }

#tela-estante{ justify-content:flex-start; padding-top:3vmin; }
.estante-rolo{
  width:100%; max-width:560px; flex:1 1 auto;
  overflow-y:auto; padding:1vmin 0 2vmin;
  display:flex; flex-direction:column; gap:2vmin;
}
.estante-titulo{
  font-family:'Baloo 2',sans-serif; font-size:clamp(16px,3vmin,24px);
  color:#1b6fa8; margin:2vmin 0 0; text-align:center;
}

/* uma viagem: a data e os seis potes daquele dia */
.viagem{
  background:rgba(255,255,255,.88); border-radius:var(--raio);
  padding:2vmin 2.5vmin; box-shadow:0 4px 0 rgba(58,46,77,.10);
}
.viagem .quando{
  font-size:clamp(12px,2.1vmin,17px); color:var(--suave);
  margin-bottom:1vmin; text-align:center;
}
.viagem .potes{ display:flex; justify-content:center; gap:2%; }
.viagem .potes .um{ width:13%; max-width:56px; position:relative; }
.viagem .potes img, .viagem .potes svg{ width:100%; height:auto; display:block; }

/* o relatório: o que a chuva fez de bom */
#relatorio-obras{ display:flex; flex-direction:column; gap:1.6vmin; }
.linha-obra{
  display:flex; align-items:center; gap:3vmin;
  background:rgba(255,255,255,.88); border-radius:var(--raio);
  padding:1.6vmin 3vmin; box-shadow:0 4px 0 rgba(58,46,77,.10);
}
.linha-obra .desenho{ width:13vmin; max-width:72px; flex:0 0 auto; }
.linha-obra .desenho img, .linha-obra .desenho svg{ width:100%; height:auto; display:block; }
.linha-obra .conta{
  font-family:'Baloo 2',sans-serif; font-size:clamp(20px,4vmin,32px);
  color:#1b6fa8; min-width:1.4em; text-align:center;
}
.linha-obra .diz{ font-size:clamp(13px,2.4vmin,19px); line-height:1.25; text-align:left; }
.linha-obra.nenhuma{ opacity:.45; }

/* ---------- A CHEGADA NA LUA ---------- */
#tela-lua{ justify-content:center; gap:1vmin; }
#palco-lua{
  position:relative; width:100%; max-width:560px;
  height:46vmin; min-height:230px;
}
#lua-grande{
  position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  width:36vmin; max-width:210px;
  animation:flutuar 6s ease-in-out infinite;
}
#lua-grande img, #lua-grande svg{ width:100%; height:auto; display:block; }
body.sem-movimento #lua-grande{ animation:none; }

#buru-lua{
  position:absolute; left:4%; bottom:6%;
  width:30vmin; height:17vmin; max-width:176px;
}
#pai-lua{
  position:absolute; right:0; bottom:-2%;
  width:32vmin; height:18vmin; max-width:188px;
  opacity:0; transition:opacity 1.2s ease;
}
/* na Lua, as nuvens brancas da frente saem: lá em cima é só noite */
body.na-lua #camada-frente{ display:none; }
#pai-lua.chegou{ opacity:1; }

/* na Lua, o resumo do que a chuva fez de bom: só ícone e número */
#relatorio-lua{
  display:flex; justify-content:center; align-items:flex-end;
  gap:4vmin; flex-wrap:wrap; min-height:8vmin;
}
#relatorio-lua .item{ display:flex; flex-direction:column; align-items:center; gap:.4vmin; }
#relatorio-lua .item .desenho{ width:9vmin; max-width:54px; }
#relatorio-lua .item .desenho img, #relatorio-lua .item .desenho svg{ width:100%; height:auto; display:block; }
#relatorio-lua .item .conta{
  font-family:'Baloo 2',sans-serif; font-size:clamp(15px,2.8vmin,22px); color:#FFF3C4;
  text-shadow:0 2px 0 rgba(42,53,102,.5);
}

/* os seis céus guardados, lado a lado */
#potes-da-viagem{
  display:flex; justify-content:center; align-items:flex-end;
  gap:2vmin; flex-wrap:wrap;
  width:100%; max-width:560px; min-height:14vmin;
}
#potes-da-viagem .pote-viagem{
  width:13%; min-width:44px; max-width:72px; position:relative;
  opacity:0; transform:translateY(2vmin);
  transition:opacity .5s ease, transform .5s ease;
}
#potes-da-viagem .pote-viagem.apareceu{ opacity:1; transform:translateY(0); }
#potes-da-viagem img, #potes-da-viagem svg{ width:100%; height:auto; display:block; }

/* ---------- MAPA DO CÉU ---------- */
#tela-mapa{ display:block; padding:0; }
#tela-mapa[hidden]{ display:none !important; }

#tela-mapa #fala-mapa{
  position:absolute; left:50%; top:3vmin; transform:translateX(-50%);
  z-index:22; max-width:86vw;
}

#mapa-ceu{ position:absolute; inset:0; z-index:12; }

#buru-mapa{
  position:absolute; width:34vmin; height:19vmin;
  margin-left:-17vmin; margin-top:-9.5vmin;
  z-index:20; pointer-events:none;
  transition:left 1s cubic-bezier(.4,0,.3,1), top 1s cubic-bezier(.4,0,.3,1);
}

/* cada ilha é um céu */
.ilha-mapa{
  position:absolute;
  width:26vmin; max-width:190px; min-width:110px;
  margin-left:-13vmin;
  border:none; background:none; padding:0;
  display:flex; flex-direction:column; align-items:center;
  cursor:pointer; z-index:14;
  transition:transform .2s ease;
}
.ilha-mapa .figura{ width:100%; position:relative; }
.ilha-mapa .figura img, .ilha-mapa .figura svg{ width:100%; height:auto; display:block; }
.ilha-mapa .nome{
  margin-top:.6vmin;
  background:rgba(255,255,255,.88);
  border-radius:99px; padding:.5vmin 2.4vmin;
  font-size:clamp(12px,2.1vmin,19px); font-weight:700; color:#1b6fa8;
  white-space:nowrap;
  box-shadow:0 3px 0 rgba(58,46,77,.10);
}
/* o pote guardado descansa em cima da ilha */
.ilha-mapa .pote-na-ilha{
  position:absolute; left:30%; bottom:52%;
  transform:translateX(-50%);
  width:34%;
}
.ilha-mapa .pote-na-ilha img, .ilha-mapa .pote-na-ilha svg{ width:100%; height:auto; display:block; }

.ilha-mapa.aberta:active{ transform:scale(.95); }
.ilha-mapa.aberta .nome{ background:var(--amarelo); color:#5a4300; }
/* a ilha que chama: um respiro devagar, nunca piscando */
.ilha-mapa.aberta .figura{ animation:chamando 3.4s ease-in-out infinite; }
@keyframes chamando{
  0%,100%{ transform:translateY(0) scale(1); }
  50%    { transform:translateY(-1.2vmin) scale(1.03); }
}
body.sem-movimento .ilha-mapa.aberta .figura{ animation:none; }

.ilha-mapa.fechada{ opacity:.42; filter:saturate(.35); cursor:default; }
.ilha-mapa.fechada .nome{ background:rgba(255,255,255,.7); color:var(--suave); }
/* construída, mas ainda não é a vez dela: menos apagada que a não construída */
.ilha-mapa.trancada{ opacity:.6; filter:saturate(.55); }
.ilha-mapa.trancada .nome{ background:rgba(255,255,255,.82); color:var(--suave); }
.ilha-mapa.feita .nome{ background:#DFF3DF; color:#2b6b2b; }

/* a Lua, no alto do arquipélago */
#lua-mapa{
  position:absolute; right:4vmin; top:4vmin;
  width:22vmin; max-width:140px; min-width:90px;
  z-index:15; opacity:.45; filter:saturate(.4);
  transition:opacity .8s ease, filter .8s ease;
}
#lua-mapa.acesa{ opacity:1; filter:none; animation:flutuar 5s ease-in-out infinite; }
#lua-mapa img, #lua-mapa svg{ width:100%; height:auto; display:block; }

/* ---------- PAINEL DO ADULTO ---------- */
#painel{
  position:absolute; inset:0; z-index:90;
  background:rgba(58,46,77,.55);
  display:flex; align-items:center; justify-content:center;
  padding:4vmin;
}
#painel[hidden]{ display:none !important; }
.painel-caixa{
  background:var(--creme);
  border-radius:26px;
  padding:5vmin 5vmin 4vmin;
  width:min(94vw,560px);
  max-height:92vh; overflow-y:auto;
  box-shadow:0 12px 0 rgba(58,46,77,.2);
  font-family:'Nunito','Segoe UI',sans-serif;
}
.painel-caixa h2{
  font-family:'Baloo 2',sans-serif; color:#1b6fa8;
  margin:0 0 1vmin; font-size:clamp(20px,3.4vmin,28px);
}
.painel-caixa p.dica{ margin:0 0 3vmin; color:var(--suave); font-size:14px; }
.linha{
  display:flex; align-items:center; justify-content:space-between;
  gap:3vmin; padding:11px 0; border-bottom:1px solid #E7DDCE;
}
.linha:last-of-type{ border-bottom:none; }
.linha label{ font-weight:700; font-size:15px; }
.linha .sub{ display:block; font-weight:400; color:var(--suave); font-size:12.5px; }
.linha input[type=range]{ width:44%; accent-color:var(--azul); }
.chaves{ display:flex; gap:6px; }
.chave{
  border:2px solid #D8CFC0; background:#fff; color:var(--texto);
  border-radius:12px; padding:8px 12px; font-family:inherit; font-size:14px;
  cursor:pointer; min-height:44px;
}
.chave.ativa{ background:var(--azul); border-color:var(--azul); color:#fff; font-weight:700; }
.botao-calmo{
  width:100%; margin:3vmin 0 1vmin;
  border:none; border-radius:16px; padding:16px;
  background:var(--azul-fundo); color:#1b6fa8;
  font-family:'Baloo 2',sans-serif; font-size:19px; cursor:pointer;
  box-shadow:0 5px 0 #cfe8f6;
}
.botao-calmo.ativo{ background:var(--azul); color:#fff; box-shadow:0 5px 0 #1b8fc9; }
.painel-fechar{
  width:100%; margin-top:2vmin; border:none; border-radius:16px; padding:16px;
  background:var(--texto); color:#fff; font-family:'Baloo 2',sans-serif; font-size:19px; cursor:pointer;
}
.perigo{ background:none; border:none; color:#B4544F; text-decoration:underline; font-size:13px; cursor:pointer; margin-top:2vmin; font-family:inherit; }

/* ---------- RESPIRAÇÃO (Pausa do Vento) ---------- */
#respirar{
  position:absolute; inset:0; z-index:70;
  background:rgba(226,243,253,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4vmin;
}
#respirar[hidden]{ display:none !important; }
#respirar .duo{ position:relative; width:60vmin; height:40vmin; }
#respirar .r-pai{ position:absolute; left:50%; top:4%; transform:translateX(-50%); width:52vmin; }
#respirar .r-filho{ position:absolute; left:50%; bottom:6%; transform:translateX(-50%); width:24vmin; transition:transform 2.5s ease-in-out; }
#respirar .r-pai svg, #respirar .r-filho svg, #respirar .r-pai img, #respirar .r-filho img{ width:100%; height:auto; display:block; }
#respirar .r-filho.sobe{ transform:translateX(-50%) translateY(-14vmin); }

/* ---------- BRILHO DO POTE GUARDADO ---------- */
@keyframes subirPote{
  from{ transform:translateY(0) scale(1); opacity:1; }
  to  { transform:translateY(-46vmin) scale(.34); opacity:0; }
}
.guardando{ animation:subirPote 2.2s ease-in forwards; }

/* ---------- TELAS LARGAS ---------- */
@media (min-aspect-ratio:13/10){
  #burublinho{ width:34vmin; height:19vmin; }
  #voador{ width:34vmin; height:19vmin; }
  #tela-abertura .palco-personagem{ width:38vmin; height:22vmin; }
  #gentilicio{ width:44vmin; height:24vmin; }
  /* em tela larga o vmin vira a altura, e as ilhas cresciam demais:
     a de baixo (o Sol, a primeira a tocar) ficava cortada pelo rodapé */
  .ilha-mapa{ width:20vmin; margin-left:-10vmin; }
}

/* ---------- SOBRE O JOGO (dentro do painel do adulto) ---------- */
#sobre-o-jogo{
  border:2px solid #E7DDCE; border-radius:16px;
  background:#fff; margin:0 0 1vmin;
}
#sobre-o-jogo summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; min-height:44px;
  font-family:'Baloo 2',sans-serif; font-size:17px; color:#1b6fa8;
}
#sobre-o-jogo summary::-webkit-details-marker{ display:none; }
.sobre-seta{
  width:11px; height:11px; flex:none;
  border-right:3px solid #1b6fa8; border-bottom:3px solid #1b6fa8;
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .2s ease;
}
#sobre-o-jogo[open] .sobre-seta{ transform:rotate(225deg) translate(-2px,-2px); }
.sobre-corpo{ padding:0 16px 14px; border-top:1px solid #F0E8DB; }
.sobre-corpo h3{
  font-family:'Baloo 2',sans-serif; color:#1b6fa8;
  font-size:15px; margin:14px 0 4px;
}
.sobre-corpo p{ margin:0 0 7px; font-size:14px; line-height:1.5; color:var(--texto); }
.sobre-corpo b{ font-weight:700; }
.sobre-rodape{
  margin-top:14px !important; padding-top:10px; border-top:1px solid #F0E8DB;
  color:var(--suave); font-size:12px !important; text-align:center;
}

/* as dicas de jogar junto, dentro do Sobre o jogo */
.sobre-dicas{ list-style:none; margin:.5rem 0 0; padding:0; }
.sobre-dicas li{
  position:relative; padding-left:14px; margin-bottom:8px;
  font-size:14px; line-height:1.5; color:var(--texto);
}
.sobre-dicas li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--azul-fundo);
  box-shadow:0 0 0 2px #cfe8f6;
}
.sobre-dicas b{ font-weight:700; color:#1b6fa8; }
.sobre-mais{ margin-top:14px !important; text-align:center; }
.sobre-mais a{
  display:inline-block; padding:10px 18px; min-height:44px; line-height:24px;
  background:var(--azul-fundo); color:#1b6fa8; text-decoration:none;
  border-radius:12px; font-weight:700; font-size:14px;
}

/* ---------- A PORTA DO ADULTO, NA ABERTURA ---------- */
/* discreta de propósito: quem procura acha, e não disputa com o botão
   grande de começar, que é o da criança */
.porta-adulto{
  margin-top:1.6vmin;
  background:rgba(255,255,255,.72); color:#1b6fa8;
  border:2px solid rgba(255,255,255,.9); border-radius:999px;
  padding:10px 22px; min-height:44px;
  font-family:'Nunito','Segoe UI',sans-serif; font-size:clamp(13px,2.1vmin,16px);
  font-weight:700; cursor:pointer;
  box-shadow:0 3px 0 rgba(58,46,77,.08);
}
.porta-adulto:hover{ background:#fff; }

/* ---------- VELOCIDADE DE CADA CÉU (painel do adulto) ---------- */
#velocidade-por-ceu{
  border:2px solid #E7DDCE; border-radius:16px;
  background:#fff; margin:0 0 11px;
}
#velocidade-por-ceu summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; min-height:44px;
  font-family:'Baloo 2',sans-serif; font-size:15px; color:#1b6fa8;
}
#velocidade-por-ceu summary::-webkit-details-marker{ display:none; }
#velocidade-por-ceu .sobre-seta{ margin-left:auto; }
.conta-mudados{ font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:700; color:var(--suave); }
.por-ceu-corpo{ padding:0 16px 12px; border-top:1px solid #F0E8DB; }
.por-ceu-corpo .dica{ margin:10px 0 12px; font-size:12.5px; color:var(--suave); line-height:1.45; }
.linha-ceu{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:9px 0; border-bottom:1px solid #F3EDE3; flex-wrap:wrap;
}
.linha-ceu:last-child{ border-bottom:none; }
.linha-ceu .nome-ceu{ font-weight:700; font-size:14px; }
.linha-ceu.em-obras .nome-ceu{ color:var(--suave); font-weight:400; }
.linha-ceu .chaves{ gap:5px; }
.linha-ceu .chave{ padding:7px 10px; font-size:12.5px; border-radius:10px; }

/* ---------- AVISO DO SILENCIOSO (iPhone e iPad) ---------- */
/* a chavinha lateral cala qualquer som de pagina; nao da para contornar,
   entao o jogo avisa — no painel sempre, na abertura uma vez so */
.aviso-silencioso{
  flex-basis:100%; margin:2px 0 10px;
  background:#FFF4D6; border:2px solid #F2E0AE; border-radius:12px;
  padding:10px 12px; font-size:12.5px; line-height:1.45; color:#6b5520;
}
.aviso-silencioso b{ font-weight:800; color:#8a6d16; }
.dica-silencioso{
  margin-top:1.4vmin; max-width:min(86vw,460px);
  background:rgba(255,255,255,.78); border-radius:14px;
  padding:8px 16px; font-size:clamp(12px,2vmin,15px); line-height:1.4;
  color:#1b6fa8; text-align:center;
}
.dica-silencioso b{ font-weight:800; }