/* Rex — o Dino do Léo · cena viva em tela cheia */

:root{
  --dino:#57a95a; --belly:#cdeeaa; --spike:#3c7a3f; --eye:#2a2018; --tooth:#fffdf5;
  --sky-top:#8fd3ff; --sky-bot:#ffe9a8;
  --night-top:#141a3a; --night-bot:#3a2a5c;
  --ground:#7ac74f; --ground-dark:#5aa838;
  --ground-n:#2c5c3a; --ground-n-dark:#1e4229;
  --ink:#3a2c1a; --card:#fffaf0; --card-edge:#f0d79a;
  --cloud:#ffffff; --accent:#ff5722; --accent-dark:#b53410;
}
body.night{ --cloud:#5a5480; --ink:#fdf3d7; }

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Nunito',system-ui,sans-serif;
  background:linear-gradient(var(--sky-top), var(--sky-bot) 62%);
  color:var(--ink);
  overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* crossfade dia→noite: camada noturna fixa que só muda opacity (compositor) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(var(--night-top), var(--night-bot) 62%);
  opacity:0; transition:opacity 2.5s ease;
}
body.night::before{ opacity:1; }

#app{ position:relative; z-index:1; height:100dvh; display:flex; flex-direction:column; }

/* ---------- topo ---------- */
.topbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:calc(6px + env(safe-area-inset-top)) 12px 0;
}
.brand{
  font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:clamp(30px,8vw,52px); line-height:1;
  color:var(--dino); text-shadow:0 3px 0 var(--spike), 0 6px 10px rgba(0,0,0,.18);
  letter-spacing:.03em; transition:color .4s;
}
.round-btn{
  width:clamp(52px,13vw,64px); height:clamp(52px,13vw,64px);
  border-radius:50%; border:0; cursor:pointer;
  font-size:clamp(24px,6vw,30px); display:flex; align-items:center; justify-content:center;
  background:var(--card); box-shadow:0 4px 0 var(--card-edge), 0 6px 14px rgba(0,0,0,.12);
  transition:transform .08s, box-shadow .2s, background .3s;
}
.round-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--card-edge); }

/* microfone: desligado / ligado / ouvindo / pensando / falando */
#micBtn.mic-off{ filter:grayscale(1); opacity:.75; }
#micBtn.mic-on{ background:#e8f8e8; box-shadow:0 4px 0 #7fc97f, 0 0 0 4px rgba(87,169,90,.25); filter:none; opacity:1; }
#micBtn.mic-listening{ background:#ffe3e0; box-shadow:0 4px 0 #e0655c, 0 0 0 6px rgba(255,87,34,.3); animation:micPulse 1.1s infinite; }
#micBtn.mic-thinking .mic-ico{ animation:spinDots 1s infinite linear; }
#micBtn.mic-speaking{ background:#fff3c4; box-shadow:0 4px 0 #d8a012; }
@keyframes micPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.12);} }
@keyframes spinDots{ to{ transform:rotate(360deg);} }

/* ---------- cena ---------- */
#scene{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }

.celestial{ position:absolute; top:4%; right:7%; width:clamp(54px,11vw,84px); height:clamp(54px,11vw,84px);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:clamp(40px,9vw,64px);
  transition:transform 2.5s ease-in-out, opacity 2s; cursor:pointer; }
#sun{ background:#ffd23f; box-shadow:0 0 0 12px rgba(255,233,168,.7), 0 0 46px 8px rgba(255,233,168,.9); }
#moon{ background:transparent; box-shadow:none; transform:translateY(55vh); opacity:0; }
body.night #sun{ transform:translateY(60vh); opacity:0; }
body.night #moon{ transform:translateY(0); opacity:1; }

#stars{ position:absolute; inset:0 0 30% 0; pointer-events:none; }
.star{ position:absolute; border-radius:50%; background:#fff; opacity:0; transform:scale(.5);
  transition:opacity .6s, transform .6s; }
.star.on{ opacity:1; transform:scale(1); animation:twinkle 2.6s infinite ease-in-out; }
@keyframes twinkle{ 0%,100%{ opacity:.35;} 50%{ opacity:1;} }

.cloud{ position:absolute; width:clamp(90px,18vw,150px); pointer-events:none; will-change:transform;
  animation:drift linear infinite; }
.cloud svg{ width:100%; height:auto; display:block; transition:opacity 1s; }
.c1{ top:6%;  animation-duration:45s; animation-delay:-10s; }
.c2{ top:16%; animation-duration:70s; animation-delay:-30s; }
.c3{ top:11%; animation-duration:95s; animation-delay:-50s; }
@keyframes drift{ from{ transform:translateX(-30vw);} to{ transform:translateX(130vw);} }

#hill{ position:absolute; left:-4%; right:-4%; bottom:0; height:30%;
  background:radial-gradient(120% 150% at 50% 100%, var(--ground) 60%, var(--ground-dark));
  border-radius:50% 50% 0 0 / 26% 26% 0 0; }
#hill::after{ /* camada noturna do gramado, crossfade */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120% 150% at 50% 100%, var(--ground-n) 60%, var(--ground-n-dark));
  opacity:0; transition:opacity 2.5s ease; }
body.night #hill::after{ opacity:1; }
#hill.tremor{ animation:tremor .09s 2; }
@keyframes tremor{ 50%{ transform:translateY(2px);} }

/* flor que troca cor */
#flower{ position:absolute; left:12px; bottom:calc(6% + 4px); width:clamp(64px,15vw,92px); height:auto;
  background:none; border:0; cursor:pointer; z-index:5; padding:6px; }
#flower svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.2)); }
#flower:active{ transform:scale(.9); }
/* pétalas giram pelo atributo transform do SVG — NADA de transform/transform-origin
   no CSS aqui (somava com o atributo e as pétalas voavam pra fora da flor) */
.petal.next{ animation:petalPulse 1.2s infinite; stroke:#fff; stroke-width:3; }
@keyframes petalPulse{ 50%{ opacity:.45; } }

/* comida */
.food{ position:absolute; z-index:6; width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  font-size:44px; cursor:pointer; filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));
  animation:foodPop .4s cubic-bezier(.3,1.6,.5,1); transition:left .3s, top .3s, transform .3s, opacity .3s; }
.food.chosen{ animation:foodBounce .5s infinite; }
.food.eaten{ transform:scale(.2); opacity:0; }
@keyframes foodPop{ from{ transform:scale(0);} to{ transform:scale(1);} }
@keyframes foodBounce{ 50%{ transform:translateY(-10px) scale(1.1);} }

/* fx flutuantes */
#fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:8; }
.pop{ position:absolute; font-family:'Fredoka',sans-serif; font-weight:700;
  font-size:clamp(30px,8vw,58px); color:var(--accent);
  text-shadow:0 3px 0 #ffb400, 0 6px 12px rgba(0,0,0,.2);
  animation:popUp 1s ease-out forwards; }
.puff{ position:absolute; font-size:clamp(20px,5vw,36px); animation:puffUp .7s ease-out forwards; }
.floaty{ position:absolute; font-size:clamp(20px,5vw,34px); animation:floatUp 1.1s ease-out forwards; }
@keyframes popUp{ 0%{ transform:translateY(0) scale(.4); opacity:0;} 25%{ opacity:1; transform:translateY(-16px) scale(1.15);} 100%{ transform:translateY(-110px) scale(1); opacity:0;} }
@keyframes puffUp{ 0%{ transform:translateY(0) scale(.6); opacity:.9;} 100%{ transform:translateY(-26px) scale(1.6); opacity:0;} }
@keyframes floatUp{ 0%{ transform:translateY(0) scale(.6); opacity:0;} 25%{ opacity:1;} 100%{ transform:translateY(-84px) scale(1.1); opacity:0;} }

/* balão de fala do Rex */
#bubble{ position:absolute; z-index:9; max-width:min(70vw,320px);
  background:var(--card); color:#3a2c1a; border:3px solid var(--card-edge);
  border-radius:18px; padding:10px 14px;
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:clamp(15px,4vw,20px);
  box-shadow:0 4px 0 var(--card-edge); animation:bubbleIn .25s ease-out; }
#bubble::after{ content:""; position:absolute; bottom:-12px; left:34px;
  border:12px solid transparent; border-top-color:var(--card-edge); border-bottom:0; }
@keyframes bubbleIn{ from{ transform:scale(.6); opacity:0;} }

/* pedido do tamagotchi */
#needIcon{ position:absolute; z-index:9; font-size:clamp(30px,8vw,46px);
  animation:needBob 1.2s infinite ease-in-out; pointer-events:none;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
@keyframes needBob{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-10px) scale(1.15);} }

/* ---------- o Rex ---------- */
#stage{ position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  width:min(78vw,430px); z-index:7; cursor:pointer; touch-action:manipulation; }
#rexSvg{ width:100%; height:auto; display:block; overflow:visible; }

/* wrappers do rAF NÃO têm transition (regra de ouro).
   Ações one-shot ficam nos grupos internos com transition/keyframes: */
.jaw{ transform-box:view-box; transform-origin:352px 184px; transition:transform .12s; }
.head{ transform-box:view-box; transform-origin:340px 190px; transition:transform .18s; }
.lid{ transform-box:view-box; transform-origin:430px 132px; transform:scaleY(0); transition:transform .09s; }
.dino.roar .jaw{ transform:rotate(22deg); }
.dino.roar-grave .jaw{ transform:rotate(30deg); }
.dino.roar-bebe .jaw{ transform:rotate(9deg); }
.dino.roar .head, .dino.roar-grave .head{ transform:rotate(-6deg); }
.dino.roar, .dino.roar-grave{ animation:shake .5s; }
.dino.blink .lid, .dino.sleepy .lid{ transform:scaleY(1); }
.dino.squint .lid{ transform:scaleY(.6); }
.dino.chomp .jaw{ transform:rotate(16deg); }
@keyframes shake{ 0%,100%{ transform:translateX(0);} 20%{ transform:translateX(-8px) rotate(-1deg);} 40%{ transform:translateX(8px) rotate(1deg);} 60%{ transform:translateX(-5px);} 80%{ transform:translateX(5px);} }

/* pulo com squash&stretch no wrapper #squash (pivô no chão via matriz do JS quando animado);
   aqui só a classe que dispara o keyframe composto no grupo .dino */
.dino.jump{ animation:jumpSquash .65s cubic-bezier(.3,1.4,.5,1); transform-box:view-box; transform-origin:255px 378px; }
@keyframes jumpSquash{
  0%{ transform:translateY(0) scale(1,1); }
  15%{ transform:translateY(0) scale(1.08,.85); }
  45%{ transform:translateY(-70px) scale(.94,1.12); }
  80%{ transform:translateY(0) scale(1.06,.9); }
  100%{ transform:translateY(0) scale(1,1); }
}
.dino.spin{ animation:spinDino .7s ease-in-out; transform-box:view-box; transform-origin:255px 300px; }
@keyframes spinDino{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.dino.rofl{ animation:rofl 1.8s ease-in-out; transform-box:view-box; transform-origin:255px 340px; }
@keyframes rofl{ 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-60deg);} 60%{ transform:rotate(-70deg);} }

/* ---------- blocos de programar ---------- */
#blocksBar{ flex:0 0 auto; z-index:10; padding:6px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,250,240,.82); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; gap:6px; border-top:3px solid var(--card-edge); }
body.night #blocksBar{ background:rgba(24,20,45,.82); border-top-color:#4a3f6e; }
.seq-row{ display:flex; align-items:center; gap:8px; min-height:58px; }
.seq-slots{ flex:1; display:flex; gap:8px; }
.slot{ width:clamp(48px,13vw,60px); height:clamp(48px,13vw,60px); border-radius:14px;
  border:3px dashed var(--card-edge); display:flex; align-items:center; justify-content:center;
  font-size:clamp(24px,7vw,32px); background:rgba(255,255,255,.5); transition:transform .15s, border-color .15s, background .15s; }
body.night .slot{ background:rgba(255,255,255,.08); }
.slot.filled{ border-style:solid; border-color:#7fc97f; background:#e8f8e8; }
.slot.running{ transform:scale(1.18); border-color:var(--accent); background:#ffe9d6; }
#playBtn{ width:clamp(56px,15vw,70px); height:clamp(56px,15vw,70px); border-radius:50%; border:0;
  font-size:clamp(26px,8vw,34px); cursor:pointer; color:#fff;
  background:linear-gradient(#68c968,#3f9d42); box-shadow:0 5px 0 #2c7030;
  display:flex; align-items:center; justify-content:center; transition:transform .08s, box-shadow .08s; }
#playBtn:active{ transform:translateY(4px); box-shadow:0 1px 0 #2c7030; }
#playBtn:disabled{ filter:grayscale(.8); opacity:.6; }
#clearBtn{ width:clamp(44px,11vw,54px); height:clamp(44px,11vw,54px); border-radius:50%; border:0;
  font-size:clamp(20px,6vw,26px); cursor:pointer; background:var(--card);
  box-shadow:0 4px 0 var(--card-edge); }
.palette{ display:flex; gap:8px; justify-content:center; }
.block{ flex:1; max-width:110px; height:clamp(52px,14vw,64px); border-radius:16px; border:0; cursor:pointer;
  font-size:clamp(26px,8vw,34px); display:flex; align-items:center; justify-content:center;
  color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.25); transition:transform .08s; }
.block:active{ transform:translateY(4px) scale(.96); box-shadow:0 1px 0 rgba(0,0,0,.25); }
.block[data-act="rugir"]{ background:#ff7043; }
.block[data-act="pular"]{ background:#42a5f5; }
.block[data-act="comer"]{ background:#9ccc65; }
.block[data-act="girar"]{ background:#ab47bc; }

/* ---------- modo papai ---------- */
#papaiOverlay{ position:fixed; inset:0; z-index:50; background:rgba(20,16,40,.55);
  display:flex; align-items:center; justify-content:center; padding:18px; backdrop-filter:blur(3px); }
#papaiOverlay[hidden], #bubble[hidden], #needIcon[hidden]{ display:none !important; }
.papai-card{ width:min(92vw,420px); background:var(--card); color:#3a2c1a; border-radius:22px;
  padding:18px 20px; box-shadow:0 12px 40px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:12px; }
.papai-card h2{ font-family:'Fredoka',sans-serif; margin:0; font-size:22px; }
.papai-card label{ font-weight:800; font-size:14px; display:flex; flex-direction:column; gap:4px; }
.papai-card input{ font-family:'Fredoka',sans-serif; font-size:18px; padding:9px 12px;
  border-radius:12px; border:3px solid var(--card-edge); outline:none; background:#fff; }
.papai-card input:focus{ border-color:var(--accent); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px; cursor:pointer;
  border:0; border-radius:999px; padding:9px 14px; background:#efe6cf; box-shadow:0 3px 0 #d8c9a4; }
.chip:active{ transform:translateY(2px); box-shadow:0 1px 0 #d8c9a4; }
.chip-close{ background:var(--accent); color:#fff; box-shadow:0 3px 0 var(--accent-dark); align-self:center; padding:10px 26px; }
.papai-stats{ display:flex; gap:14px; font-size:14px; }
.papai-hint{ margin:0; font-size:12.5px; opacity:.75; }

/* ---------- alvo piscante universal (o "clica aqui" do Leo) ---------- */
.alvo{ animation:alvoPulsa 1.1s infinite !important; position:relative; z-index:20; }
@keyframes alvoPulsa{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,87,34,.75), 0 0 0 0 rgba(255,210,63,.5); transform:scale(1); }
  50%{ box-shadow:0 0 0 12px rgba(255,87,34,0), 0 0 26px 8px rgba(255,210,63,.9); transform:scale(1.1); }
}

/* mãozinha fantasma que demonstra o clique */
#hand{ position:fixed; z-index:60; font-size:44px; pointer-events:none;
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));
  animation:handTap 1s infinite ease-in-out; }
#hand[hidden]{ display:none; }
@keyframes handTap{ 0%,100%{ transform:translateY(14px) scale(1);} 45%{ transform:translateY(0) scale(.85);} 60%{ transform:translateY(2px) scale(.9);} }

/* ---------- escolinha ---------- */
/* centralizada SEM transform: o pulso do .alvo usa transform:scale e apagava o translateX */
#escolaBtn{ position:absolute; top:8px; left:0; right:0; margin:0 auto;
  width:clamp(50px,12vw,62px); height:clamp(50px,12vw,62px); border-radius:50%;
  border:0; cursor:pointer; font-size:clamp(26px,7vw,34px); z-index:6;
  background:linear-gradient(#ffe27a,#ffb400); box-shadow:0 4px 0 #c78900, 0 6px 12px rgba(0,0,0,.15); }
#escolaBtn:active{ transform:translateY(3px); }
#escolaOverlay{ position:fixed; inset:0; z-index:40; background:rgba(20,16,40,.6);
  display:flex; align-items:center; justify-content:center; padding:14px; backdrop-filter:blur(3px); }
#escolaOverlay[hidden]{ display:none; }
.escola-card{ position:relative; width:min(94vw,520px); background:var(--card); border-radius:26px;
  padding:26px 20px 22px; box-shadow:0 14px 44px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:20px; align-items:center; }
.escola-fechar{ position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:50%;
  border:0; cursor:pointer; font-size:18px; background:#efe6cf; box-shadow:0 3px 0 #d8c9a4; }
.escola-palavra{ display:flex; gap:10px; }
.letra-slot{ width:clamp(52px,13vw,72px); height:clamp(60px,15vw,84px); border-radius:14px;
  border:4px dashed var(--card-edge); background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(34px,9vw,52px); color:#3a2c1a; }
.letra-slot.cheia{ border-style:solid; border-color:#7fc97f; background:#e8f8e8;
  animation:slotPop .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes slotPop{ from{ transform:scale(.4);} to{ transform:scale(1);} }
.tecladao{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.tecla{ width:clamp(64px,16vw,84px); height:clamp(64px,16vw,84px); border-radius:18px; border:0; cursor:pointer;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(32px,9vw,44px); color:#fff;
  background:linear-gradient(#5db2e8,#2a7fb8); box-shadow:0 6px 0 #1c5e8a; transition:transform .08s; }
.tecla:nth-child(3n){ background:linear-gradient(#9ccc65,#689f38); box-shadow:0 6px 0 #4a7529; }
.tecla:nth-child(3n+1){ background:linear-gradient(#ba68c8,#8e44ad); box-shadow:0 6px 0 #6a3282; }
.tecla:active{ transform:translateY(4px); }
.tecla.acertou{ background:linear-gradient(#ffe27a,#ffb400) !important; box-shadow:0 6px 0 #c78900 !important; }
.tecla.nope{ animation:nope .3s; }
@keyframes nope{ 25%{ transform:translateX(-6px) rotate(-3deg);} 75%{ transform:translateX(6px) rotate(3deg);} }

button:focus-visible, input:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* celular deitado: o Rex é limitado pela ALTURA e não cobre a cena inteira */
@media (orientation:landscape) and (max-height:520px){
  #stage{ width:min(78vw, 430px, 62vh) !important; bottom:4%; }
  .topbar{ padding-top:4px; }
  .round-btn{ width:46px; height:46px; font-size:22px; }
  .brand{ font-size:28px; }
  .seq-row{ min-height:46px; }
  .slot{ width:44px; height:44px; font-size:22px; }
  #playBtn{ width:50px; height:50px; }
  .block{ height:46px; font-size:24px; }
}

@media (prefers-reduced-motion:reduce){
  .cloud{ animation:none; }
  .star.on{ animation:none; opacity:.8; }
  .dino.roar, .dino.roar-grave{ animation:none; }
}