/* Soma com Objetos v2 — "pomar ao sol": céu claro, morros, bandejas de
   madeira, objetos desenhados com volume, números grandes e o Pipo. */
:root{
  --tinta:#2B2440; --fraca:#5E5878; --ouro:#FFC531; --verde:#35C979; --verde2:#1E9A55;
  --azul:#3A8DFF; --azul2:#1F5FC9; --rosa:#FF6FA5; --madeira:#D9A066; --madeira2:#A86A2E;
  --vidro:rgba(255,255,255,.72); --sombra:0 10px 24px rgba(40,60,110,.22);
  --fonte:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Varela Round","Nunito","Quicksand",system-ui,-apple-system,"Segoe UI",sans-serif;
  --alvo:76px; --tam:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;display:flex;flex-direction:column;color:var(--tinta);font-family:var(--fonte);
  background:#BFE7FF;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--azul);outline-offset:3px}

/* ---------- cena ---------- */
#cena{position:fixed;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,#7CC8FF 0%,#BFE7FF 45%,#FFF4D6 100%)}
#sol{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,#FFF9D6 0 24%,#FFE27A 34%,rgba(255,226,122,0) 70%)}
#sol::before{content:"";position:absolute;inset:-60px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,240,170,.35) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%);
  animation:gira 40s linear infinite}
.nuvem{position:absolute;width:160px;height:46px;border-radius:40px;background:#fff;opacity:.9;
  box-shadow:30px -22px 0 6px #fff,70px -10px 0 4px #fff,inset 0 -8px 12px rgba(150,190,230,.35);
  animation:vento 60s linear infinite}
.n1{top:9%;left:-20%}.n2{top:22%;left:-40%;transform:scale(.7);animation-duration:85s;animation-delay:-30s;opacity:.75}
.n3{top:5%;left:-30%;transform:scale(.5);animation-duration:110s;animation-delay:-70s;opacity:.6}
@keyframes vento{from{translate:0 0}to{translate:150vw 0}}
@keyframes gira{to{transform:rotate(360deg)}}
.morro{position:absolute;left:-5%;width:110%;bottom:0;will-change:transform}
#morro1{height:34%}#morro2{height:22%}

/* ---------- HUD ---------- */
#hud{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 4px}
.btn-redondo,.btn-quad{width:var(--alvo);height:var(--alvo);flex:0 0 auto;border-radius:50%;border:3px solid #fff;
  background:linear-gradient(180deg,#FFFFFF,#E6F2FF);box-shadow:0 5px 0 #B9CFEA,var(--sombra);display:grid;place-items:center;
  transition:transform .12s ease}
.btn-quad{border-radius:24px;width:84px;height:84px}
.btn-redondo svg,.btn-quad svg{width:54%;height:54%;fill:#3A4A7A;stroke:#3A4A7A}
.btn-redondo:active,.btn-quad:active{transform:translateY(3px)}
.btn-quad .risco{display:none;stroke:#E5484D}
.btn-quad[aria-pressed="false"] .risco{display:block}
.btn-quad[aria-pressed="false"] .onda{display:none}
#trilha{display:flex;gap:clamp(6px,1.5vmin,10px);align-items:center;background:var(--vidro);border:3px solid #fff;border-radius:40px;
  padding:8px 14px;box-shadow:var(--sombra)}
.ponto{width:clamp(20px,3.6vmin,30px);height:clamp(20px,3.6vmin,30px);display:grid;place-items:center;border-radius:50%;
  background:#DCE7F5;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.ponto svg{width:100%;height:100%}
.ponto.atual{transform:scale(1.25);box-shadow:0 0 0 3px var(--ouro)}
.ponto.feito{background:none}

/* ---------- palco ---------- */
#palco{position:relative;z-index:2;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  gap:clamp(6px,1.4vmin,14px);padding:4px 12px calc(env(safe-area-inset-bottom,0px) + 10px)}
#pergunta{display:flex;align-items:center;gap:10px;background:var(--vidro);border:3px solid #fff;border-radius:999px;
  padding:4px 20px 4px 6px;box-shadow:var(--sombra);max-width:100%}
#pipo{width:clamp(50px,9vmin,72px);height:clamp(50px,9vmin,72px);flex:0 0 auto;transform-origin:50% 90%}
#pipo.feliz{animation:pulo .7s cubic-bezier(.3,1.6,.5,1)}
#pipo.pensa{animation:inclina .9s ease}
#perguntaTxt{font-size:clamp(19px,4vmin,30px);font-weight:900;line-height:1.15}
#perguntaTxt.dica-txt{color:#E5602A;animation:pulo .5s ease}
@keyframes pulo{0%{transform:scale(1,1)}25%{transform:scale(1.2,.8)}55%{transform:translateY(-22%) scale(.9,1.12)}80%{transform:scale(1.08,.94)}100%{transform:none}}
@keyframes inclina{0%,100%{transform:none}30%{transform:rotate(-12deg)}65%{transform:rotate(10deg)}}

#grupos{flex:1;min-height:0;width:100%;max-width:1100px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:6px}
#grupos.lado{flex-direction:row;align-items:center}
.bandeja{position:relative;flex:1 1 0;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:var(--gap,8px);padding:10px;border-radius:28px;
  background:linear-gradient(180deg,#FFF8EA 0%,#F7E2BC 100%);border:4px solid var(--madeira);
  box-shadow:0 7px 0 var(--madeira2),0 16px 26px rgba(80,50,10,.25),inset 0 -10px 18px rgba(170,110,40,.18),inset 0 3px 0 #fff}
#grupos.lado .bandeja{align-self:stretch}
.bandeja.vazia{opacity:.55}
#mais{flex:0 0 auto;align-self:center;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  font-size:44px;font-weight:900;color:#fff;line-height:1;padding-bottom:4px;
  background:radial-gradient(circle at 35% 30%,#FFD27A,#FF8E3C 60%,#E5602A);box-shadow:0 4px 0 #B8461A,0 8px 14px rgba(0,0,0,.2)}
.obj{position:relative;width:var(--tam);height:var(--tam);border:none;background:none;padding:0;border-radius:22px;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .25s;touch-action:none}
.obj svg{width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 3px 2px rgba(60,40,20,.18))}
.obj.entra{animation:entra .55s cubic-bezier(.3,1.6,.5,1) both}
@keyframes entra{0%{transform:translateY(-40px) scale(.2);opacity:0}100%{transform:none;opacity:1}}
.obj.aceso{transform:translateY(-4px) scale(1.1)}
.obj.aceso::before{content:"";position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,140,.95) 0%,rgba(255,214,80,.55) 45%,rgba(255,214,80,0) 72%);z-index:-1}
.obj .badge{position:absolute;right:-6px;top:-8px;min-width:34px;height:34px;padding:0 6px;border-radius:17px;display:grid;place-items:center;
  font-size:22px;font-weight:900;color:#fff;background:linear-gradient(180deg,#5AA8FF,var(--azul2));border:3px solid #fff;
  box-shadow:0 3px 6px rgba(0,0,0,.25);transform:scale(0);transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.obj.aceso .badge{transform:scale(1)}
.obj.dica{animation:chamado 1s ease-in-out 2}
@keyframes chamado{0%,100%{transform:none}50%{transform:translateY(-10px) scale(1.12)}}
.obj.foi{opacity:.18;transform:scale(.8);pointer-events:none}
.obj.arrasta{opacity:.35}
.voando{position:fixed;z-index:30;pointer-events:none;width:var(--tam);height:var(--tam);
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.28));transition:none}
.voando svg{width:100%;height:100%}
.festa .obj{animation:danca .6s ease var(--d,0s) 2}
@keyframes danca{0%,100%{transform:none}40%{transform:translateY(-14px) rotate(-8deg) scale(1.08)}70%{transform:translateY(0) rotate(6deg)}}

#baixo{display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vmin,18px);width:100%;flex:0 0 auto}
#cesta{display:none;position:relative;width:clamp(150px,28vmin,240px);height:clamp(92px,16vmin,140px);flex:0 0 auto;transition:width .4s ease,transform .3s}
#cesta > svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 10px rgba(80,40,0,.3))}
#cestaDentro{position:absolute;z-index:1;left:12%;right:12%;top:18%;height:38%;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-content:flex-start;gap:0 2px}
#cestaDentro svg{width:clamp(22px,4.2vmin,34px);height:clamp(22px,4.2vmin,34px);margin-bottom:-8px;animation:cai .35s ease-out}
@keyframes cai{0%{transform:translateY(-30px)}70%{transform:translateY(3px)}100%{transform:none}}
#cesta.pula{animation:pulo .5s ease}
body.modo-cesta #cesta{display:block}
body.modo-cesta #opcoes{display:none}
body.modo-cesta.cheia #opcoes{display:flex}
body.modo-cesta.cheia #cesta{width:clamp(110px,20vmin,170px);height:clamp(72px,12vmin,110px)}
#opcoes{display:flex;gap:clamp(10px,2.6vmin,22px);justify-content:center}
.num{width:clamp(84px,14vmin,124px);height:clamp(84px,14vmin,124px);border:4px solid #fff;border-radius:30px;
  font-size:clamp(48px,9vmin,78px);font-weight:900;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#7FBFFF 0%,var(--azul) 50%,var(--azul2) 100%);
  text-shadow:0 3px 0 rgba(10,30,90,.35);box-shadow:0 7px 0 #1A4BA0,0 14px 22px rgba(20,40,100,.3),inset 0 3px 0 rgba(255,255,255,.55);
  transition:transform .12s ease,opacity .3s,filter .3s}
.num:active{transform:translateY(5px);box-shadow:0 2px 0 #1A4BA0,0 6px 12px rgba(20,40,100,.3)}
.num.errado{animation:treme .45s ease;filter:grayscale(.7);opacity:.55}
.num.certo{background:linear-gradient(180deg,#9AF5C3,var(--verde) 50%,var(--verde2));box-shadow:0 7px 0 #137A40,0 0 0 8px rgba(53,201,121,.35),0 14px 22px rgba(0,0,0,.25);
  animation:pulo .6s ease}
.num.brilha{animation:chamado 1.1s ease-in-out infinite}
@keyframes treme{0%,100%{transform:none}20%{transform:translateX(-10px) rotate(-4deg)}40%{transform:translateX(9px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}

#conta{position:absolute;left:50%;top:44%;z-index:8;transform:translate(-50%,-50%) scale(0);pointer-events:none;
  display:flex;align-items:center;gap:.3em;padding:.15em .6em;border-radius:999px;white-space:nowrap;
  font-size:clamp(54px,13vmin,120px);font-weight:900;color:#fff;
  background:linear-gradient(180deg,#FFB86B,#FF7A45);border:6px solid #fff;
  box-shadow:0 10px 0 #C24E1E,0 24px 40px rgba(0,0,0,.3);text-shadow:0 4px 0 rgba(120,40,0,.35)}
#conta.mostra{animation:conta 2.4s cubic-bezier(.3,1.5,.5,1) forwards}
#conta .t{color:#FFF46B}
@keyframes conta{0%{transform:translate(-50%,-50%) scale(0) rotate(-8deg)}18%{transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}
  28%{transform:translate(-50%,-50%) scale(1)}85%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-60%) scale(.9);opacity:0}}

#aviso{position:absolute;left:50%;top:6px;z-index:9;transform:translateX(-50%);background:#fff;color:var(--tinta);font-weight:900;
  font-size:clamp(20px,4.4vmin,30px);border-radius:999px;padding:10px 24px;opacity:0;pointer-events:none;white-space:nowrap;
  box-shadow:0 6px 0 #C7D7EE,var(--sombra);border:3px solid #E6EEF9}
#aviso.mostra{animation:aviso 2.2s ease forwards}
@keyframes aviso{0%{opacity:0;transform:translate(-50%,-14px) scale(.85)}12%{opacity:1;transform:translate(-50%,0) scale(1.04)}20%{transform:translate(-50%,0)}85%{opacity:1}100%{opacity:0}}

/* confete em DOM (leve) */
.confete{position:fixed;top:-20px;z-index:20;width:12px;height:8px;border-radius:2px;pointer-events:none;animation:caiConf 2.2s linear forwards}
@keyframes caiConf{to{transform:translate(var(--dx),110vh) rotate(720deg)}}

/* ---------- telas ---------- */
.tela{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.4vmin,22px);
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);text-align:center;overflow-y:auto;
  background:radial-gradient(80% 55% at 50% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 70%),linear-gradient(180deg,#7CC8FF 0%,#BFE7FF 50%,#FFF4D6 100%);
  transition:opacity .35s ease,visibility .35s}
.tela.oculta{opacity:0;visibility:hidden;pointer-events:none}
#pausa{background:rgba(220,238,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.titulo{font-size:clamp(44px,11vmin,88px);line-height:.95;font-weight:900;color:#FF7A45;
  text-shadow:0 4px 0 #fff,0 7px 0 #C24E1E,0 14px 20px rgba(150,60,0,.25)}
.titulo.pequeno{font-size:clamp(40px,9vmin,70px)}
#menuPipo{width:min(130px,24vmin);height:min(130px,24vmin);animation:boia 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes boia{0%,100%{transform:translateY(0) scale(1,1)}45%{transform:translateY(-10px) scale(.96,1.04)}55%{transform:translateY(-10px)}90%{transform:translateY(0) scale(1.06,.94)}}
#menuDemo{display:flex;align-items:center;gap:6px;font-size:40px;font-weight:900;color:#3A4A7A}
#menuDemo svg{width:52px;height:52px}
#menuDemo .q{color:#FF7A45}
.btn-grande{min-width:min(340px,86vw);min-height:88px;padding:14px 36px;border:none;border-radius:999px;
  font-size:clamp(28px,6vmin,40px);font-weight:900;letter-spacing:.06em;color:#08381F;
  background:linear-gradient(180deg,#9AF5C3 0%,var(--verde) 50%,#24B064 100%);
  box-shadow:0 8px 0 var(--verde2),0 16px 28px rgba(20,80,40,.3),inset 0 3px 0 rgba(255,255,255,.6);transition:transform .12s,box-shadow .12s}
.btn-grande:active{transform:translateY(6px);box-shadow:0 2px 0 var(--verde2),0 6px 12px rgba(0,0,0,.25)}
#menu .btn-grande{animation:chama 2.4s ease-in-out infinite}
@keyframes chama{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.linha-op{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.caixa-sel{display:flex;background:rgba(255,255,255,.7);border:3px solid #fff;border-radius:999px;padding:4px;box-shadow:var(--sombra)}
.chip{min-width:120px;height:76px;border:none;border-radius:999px;background:transparent;font-size:28px;font-weight:900;color:var(--fraca)}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,#FFE9A0,var(--ouro));color:#5A2E00;box-shadow:0 4px 0 #C98A1B}
.hoje{font-size:clamp(18px,3.6vmin,24px);font-weight:800;color:var(--fraca)}
.hoje b{color:#E5602A}
#fimEstrelas{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#fimEstrelas svg{width:clamp(44px,9vmin,64px);height:clamp(44px,9vmin,64px);animation:entra .5s cubic-bezier(.3,1.6,.5,1) both}
#pote{position:relative;width:120px;height:120px;border-radius:24px 24px 40px 40px;border:5px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.35);overflow:hidden;box-shadow:inset 0 0 0 3px rgba(120,170,230,.35),var(--sombra)}
#pote::after{content:"";position:absolute;left:12px;top:10px;width:14px;height:70%;border-radius:8px;background:rgba(255,255,255,.6)}
#poteNivel{position:absolute;left:0;right:0;bottom:0;height:0;transition:height 1.2s cubic-bezier(.3,1.2,.5,1);
  background:radial-gradient(circle at 30% 20%,#FFF6B0 0 6%,transparent 7%) 0 0/26px 22px,linear-gradient(180deg,#FFE066,#FFB020)}

@media (orientation:landscape) and (max-height:560px){
  #hud{padding:calc(env(safe-area-inset-top,0px) + 6px) 10px 2px;gap:8px}
  #hud #pergunta{flex:1 1 auto;min-width:0;justify-content:center;padding:2px 14px 2px 4px}
  #perguntaTxt{font-size:clamp(16px,4.6vh,22px)}
  #pipo{width:44px;height:44px}
  #trilha{padding:6px 10px}
  .ponto{width:20px;height:20px}
  #palco{padding-top:2px;gap:6px}
  .num{width:clamp(76px,21vh,96px);height:clamp(76px,21vh,96px);font-size:clamp(44px,12vh,60px);border-radius:24px}
  #mais{width:46px;height:46px;font-size:34px}
  #cesta{height:clamp(76px,21vh,100px)}
  .tela{flex-direction:row;flex-wrap:wrap;align-content:center}
  .tela .titulo{width:100%}
  #menu .titulo{width:auto}
  #menuPipo{width:90px;height:90px}
  #menuDemo{width:100%;justify-content:center}
  #fimEstrelas,#fim .hoje{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
  .nuvem{animation:none}
}