/* =========================================================
   A AVENTURA DO ROBÔ CLICK — estilos
   Palco fixo de 1100x680 escalado para caber em qualquer tela.
   ========================================================= */

:root{
  --azul:      #3FA9F5;
  --azul-esc:  #1E6FB8;
  --amarelo:   #FFD246;
  --laranja:   #FF8A3D;
  --rosa:      #FF7BAC;
  --verde:     #56D97C;
  --roxo:      #8C6BE0;
  --branco:    #FFFFFF;
  --escuro:    #23345C;
  --fonte:     "Comic Sans MS", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; height:100%;
  background:#0E1A33;
  font-family:var(--fonte);
  overflow:hidden;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#app{ position:fixed; inset:0; }

/* ---------- Palco escalado ---------- */
#stage{
  position:absolute; top:50%; left:50%;
  width:1100px; height:680px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  background:#BFE9FF;
}

/* ---------- Telas ---------- */
.screen{
  position:absolute; inset:0;
  display:none;
  animation:screen-in .35s ease both;
}
.screen.is-active{ display:block; }
@keyframes screen-in{ from{opacity:0; transform:scale(.98);} to{opacity:1; transform:none;} }

/* =========================================================
   TELA INICIAL
   ========================================================= */
#screen-start{
  background:linear-gradient(180deg,#5EC8F8 0%,#9FE3FF 55%,#CFF3D6 100%);
  text-align:center;
}
.start-sky{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 22%, #fff 0 7px, transparent 8px),
    radial-gradient(circle at 88% 16%, #fff 0 5px, transparent 6px),
    radial-gradient(circle at 74% 34%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 26% 46%, #fff 0 4px, transparent 5px);
  opacity:.75;
}
.title{
  position:relative; margin:18px 0 0;
  font-size:66px; letter-spacing:2px;
  color:var(--branco);
  text-shadow:0 6px 0 var(--azul-esc), 0 10px 20px rgba(0,0,0,.25);
  animation:title-pop 3s ease-in-out infinite;
}
@keyframes title-pop{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} }
.subtitle{
  position:relative; margin:2px 0 0;
  font-size:30px; color:#134E7E;
}
.start-robot{
  position:absolute; left:50%; top:378px;
  transform:translate(-50%,-50%) scale(.95);
}
#btn-play{ position:absolute; left:50%; bottom:40px; }

/* =========================================================
   BOTÕES GRANDES
   ========================================================= */
.big-button{
  display:inline-flex; align-items:center; gap:16px;
  padding:22px 52px;
  font-family:var(--fonte); font-size:40px; color:#fff;
  background:linear-gradient(180deg,#FFB13D,#FF8A2B);
  border:none; border-radius:999px;
  box-shadow:0 10px 0 #D9661A, 0 16px 26px rgba(0,0,0,.25);
  cursor:pointer;
  transition:filter .12s ease;
}
.big-button__icon{ font-size:46px; line-height:1; }
.big-button:hover{ filter:brightness(1.1) saturate(1.1); }
/* quando o mouse chega, o botão PARA de pulsar: fica fácil de acertar */
.big-button:hover{ animation-play-state:paused; }
.big-button:active{ filter:brightness(.95); }

/* botões centralizados horizontalmente respiram sem perder o centro */
#btn-play, #btn-again{
  transform:translateX(-50%);
  animation:btn-breathe 2.4s ease-in-out infinite;
}
@keyframes btn-breathe{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%    { transform:translateX(-50%) scale(1.06); }
}
#btn-next{ animation:btn-breathe-center 2.4s ease-in-out infinite; }
@keyframes btn-breathe-center{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.06); }
}
.big-button--next{
  background:linear-gradient(180deg,#63E08B,#33BE63);
  box-shadow:0 10px 0 #1E8B45, 0 16px 26px rgba(0,0,0,.25);
}
.big-button--again{
  background:linear-gradient(180deg,#6FC4FF,#3E9BE8);
  box-shadow:0 10px 0 #1F6EAF, 0 16px 26px rgba(0,0,0,.25);
}

/* =========================================================
   HUD / PROGRESSO / CONTROLES
   ========================================================= */
#hud{
  position:absolute; top:0; left:0; right:0; height:92px;
  display:flex; align-items:center; justify-content:center;
  padding:0 24px; z-index:5; pointer-events:none;
}
.hud__stack{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.progress{ display:flex; gap:8px; }
.progress__star{
  width:46px; height:46px;
  display:grid; place-items:center;
  font-size:34px; line-height:1;
  filter:grayscale(1) opacity(.45);
  transition:transform .3s ease, filter .3s ease;
}
.progress__star.is-on{ filter:none; transform:scale(1.15); }
.progress__star.just-on{ animation:star-fill .6s ease; }
@keyframes star-fill{
  0%  { transform:scale(.4) rotate(-40deg); }
  60% { transform:scale(1.6) rotate(10deg); }
  100%{ transform:scale(1.15); }
}

.controls{
  position:absolute; top:14px; right:18px;
  display:flex; gap:12px; z-index:30;
}
.round-button{
  width:64px; height:64px; border-radius:50%;
  font-size:30px; line-height:1;
  border:none; cursor:pointer;
  background:#fff; color:var(--escuro);
  box-shadow:0 6px 0 rgba(0,0,0,.18), 0 8px 18px rgba(0,0,0,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.round-button:hover{ transform:translateY(-3px) scale(1.08); }
.round-button:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.round-button.is-off{ filter:grayscale(1); opacity:.7; }

/* =========================================================
   CENA
   ========================================================= */
.scene{ position:absolute; inset:0; }
.layer{ position:absolute; inset:0; }
#object-layer, #robot-layer, #decor-layer{ pointer-events:none; }
#fx-layer{ pointer-events:none; z-index:26; }

/* fundos por fase */
.bg-noite   { background:linear-gradient(180deg,#2B3A75 0%,#4A5EA8 60%,#6E7FC7 100%); }
.bg-oficina { background:linear-gradient(180deg,#8FD9F7 0%,#CFEFFF 60%,#F6E7C8 100%); }
.bg-fabrica { background:linear-gradient(180deg,#7FC9E8 0%,#BFE7F5 55%,#DCD3F0 100%); }
.bg-porta   { background:linear-gradient(180deg,#5FB7E8 0%,#A9E1F7 60%,#C9EFD6 100%); }
.bg-espaco  { background:linear-gradient(180deg,#20306B 0%,#3B4C99 55%,#6A5FB5 100%); }
.bg-planeta { background:linear-gradient(180deg,#79D5F5 0%,#BDEEDC 55%,#9BE38C 100%); }
.bg-jardim  { background:linear-gradient(180deg,#87DBF7 0%,#C6F0D8 50%,#84D67C 100%); }

/* chão simples em algumas fases */
.ground{
  position:absolute; left:0; right:0; bottom:0; height:110px;
  background:rgba(255,255,255,.28);
  border-top:8px solid rgba(255,255,255,.5);
}
.stars-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 35% 12%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 62% 24%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 82% 14%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 92% 40%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at  8% 55%, #fff 0 2px, transparent 3px);
  opacity:.85; animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.85;} 50%{opacity:.45;} }

/* =========================================================
   OBJETOS CLICÁVEIS
   O <button> é a área de clique (grande). O visual fica dentro,
   menor, para que clicar "perto" já funcione.
   ========================================================= */
.obj{
  position:absolute;
  padding:0; border:none; background:none;
  display:grid; place-items:center;
  cursor:pointer; pointer-events:auto;
  transform:translate(-50%,-50%);
  /* cantos só levemente arredondados: clicar no canto TAMBÉM conta.
     Com um círculo (50%) perderíamos ~21% da área de clique. */
  border-radius:26%;
}
.obj:focus-visible{ outline:6px dashed #fff; outline-offset:4px; }
.obj__visual{
  width:66%; height:66%;
  display:grid; place-items:center;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.obj__visual svg{ width:100%; height:100%; overflow:visible; pointer-events:none; }
.obj:hover .obj__visual{
  transform:scale(1.18);
  filter:drop-shadow(0 0 20px #fff) drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.obj:active .obj__visual{ transform:scale(1.03); }
.obj.is-done{ pointer-events:none; }

/* aro de luz no hover: ensina "aqui dá para clicar" */
.obj::before{
  content:""; position:absolute; inset:10%;
  border-radius:50%;
  border:6px solid rgba(255,255,255,0);
  transition:border-color .18s ease, transform .18s ease;
}
.obj:hover::before{ border-color:rgba(255,255,255,.85); transform:scale(1.06); }

/* chamada de atenção (dica) */
.obj.hint .obj__visual{ animation:hint-wiggle 1s ease-in-out infinite; }
/* o objeto para de se mexer assim que o cursor chega perto */
.obj.hint:hover .obj__visual{ animation:none; transform:scale(1.18); }
@keyframes hint-wiggle{
  0%,100%{ transform:scale(1) rotate(0); }
  25%    { transform:scale(1.16) rotate(-7deg); }
  75%    { transform:scale(1.16) rotate(7deg); }
}

/* reações */
.obj.pop .obj__visual{ animation:pop .5s ease; }
@keyframes pop{ 0%{transform:scale(1);} 40%{transform:scale(1.5);} 100%{transform:scale(1);} }

.obj.wobble .obj__visual{ animation:wobble .55s ease; }
@keyframes wobble{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-14deg);} 75%{transform:rotate(14deg);} }

.obj.vanish{ animation:vanish .45s ease forwards; }
@keyframes vanish{ to{ transform:translate(-50%,-50%) scale(.15) rotate(25deg); opacity:0; } }

.obj.spinning .obj__visual{
  animation:spin 2.2s linear infinite;
  filter:drop-shadow(0 0 18px var(--amarelo));
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.obj.grown .obj__visual{ transform:scale(1.55); }
.obj.splash .obj__visual{ animation:splash .8s ease; }
@keyframes splash{ 0%{transform:scale(1);} 30%{transform:scale(1.4,.7);} 60%{transform:scale(.85,1.3);} 100%{transform:scale(1);} }

/* decoração (não clicável) */
.decor{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center; pointer-events:none;
}
.decor svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 10px rgba(0,0,0,.18)); }

/* porta */
.door-leaf{
  transition:transform .9s cubic-bezier(.4,0,.2,1);
  transform-origin:left center; transform-box:fill-box;
}
.decor.door-open .door-leaf{ transform:rotateY(-100deg) translateX(-6px); }
.door-light{ opacity:0; transition:opacity .6s ease .3s; }
.decor.door-open .door-light{ opacity:1; }

/* =========================================================
   PISTA EM EMOJI — instrução sem texto
   ========================================================= */
.clue{
  position:absolute; left:50%; top:152px;
  transform:translate(-50%,-50%);
  font-size:84px; line-height:1; letter-spacing:12px;
  pointer-events:none; opacity:0;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));
  transition:opacity .4s ease;
}
.clue.is-on{ opacity:1; animation:clue-pulse 1.6s ease-in-out infinite; }
@keyframes clue-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%    { transform:translate(-50%,-50%) scale(1.12); }
}

/* na fase do esconde-esconde o robô fica ATRÁS dos arbustos */
#object-layer{ z-index:2; }
#robot-layer{ z-index:3; }
#robot-layer.behind{ z-index:1; }

/* antena espiando por cima do arbusto certo */
.peek{ animation:peek-wiggle 1.4s ease-in-out infinite; transform-origin:center bottom; }
@keyframes peek-wiggle{
  0%,100%{ transform:rotate(-7deg); }
  50%    { transform:rotate(7deg); }
}

/* =========================================================
   MÃO DE DICA
   ========================================================= */
.hand{
  position:absolute; z-index:15;
  font-size:64px; line-height:1;
  pointer-events:none; opacity:0;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transition:opacity .3s ease;
}
.hand.is-on{ opacity:1; animation:hand-point 1s ease-in-out infinite; }
@keyframes hand-point{
  0%,100%{ transform:translate(-50%,-50%) translateX(0); }
  50%    { transform:translate(-50%,-50%) translateX(20px); }
}

/* =========================================================
   ROBÔ
   ========================================================= */
.robot{
  position:absolute; width:260px; height:300px;
  transform:translate(-50%,-50%);
  transition:left 1s cubic-bezier(.4,0,.2,1), top 1s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.robot svg{ width:100%; height:100%; overflow:visible; }
.robot__body{
  animation:bob 2.6s ease-in-out infinite;
  transform-box:fill-box; transform-origin:center bottom;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.robot .eye{ transform-box:fill-box; transform-origin:center; transition:transform .25s ease; }
.robot .pupils{ transition:transform .12s ease-out; }
.robot .arm-l{ transform-box:fill-box; transform-origin:right center; }
.robot .arm-r{ transform-box:fill-box; transform-origin:left center; }
.robot .bulb{ transition:fill .3s ease, filter .3s ease; }
.robot .face-plate{ transition:opacity .4s ease; }

/* humores */
.robot.mood-sleepy .eye{ transform:scaleY(.16); }
.robot.mood-sleepy .robot__body{ animation-duration:4.5s; }
.robot.mood-sleepy .bulb{ fill:#9AA6BF; }
.robot.mood-sleepy .face-plate{ opacity:.5; }

.robot.charged .bulb{ fill:#FFD246; filter:drop-shadow(0 0 16px #FFD246); }

.robot.mood-curious .robot__body{ animation:tilt .9s ease-in-out; }
@keyframes tilt{ 0%,100%{transform:rotate(0);} 50%{transform:rotate(-9deg);} }

.robot.mood-happy .robot__body{ animation:hop .5s ease 3; }
@keyframes hop{ 0%,100%{transform:translateY(0) scale(1,1);} 40%{transform:translateY(-40px) scale(1.05,.95);} }

.robot.mood-wow .eye{ transform:scale(1.3); }
.robot.mood-wow .robot__body{ animation:wow .5s ease; }
@keyframes wow{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }

.robot.mood-dance .robot__body{ animation:dance 1s ease-in-out infinite; }
@keyframes dance{
  0%,100%{ transform:translateY(0) rotate(-8deg); }
  25%    { transform:translateY(-24px) rotate(0deg); }
  50%    { transform:translateY(0) rotate(8deg); }
  75%    { transform:translateY(-24px) rotate(0deg); }
}
.robot.mood-dance .arm-l{ animation:wave-l .5s ease-in-out infinite alternate; }
.robot.mood-dance .arm-r{ animation:wave-r .5s ease-in-out infinite alternate; }
.robot.mood-happy .arm-l{ animation:wave-l .28s ease-in-out 6 alternate; }
.robot.mood-happy .arm-r{ animation:wave-r .28s ease-in-out 6 alternate; }
@keyframes wave-l{ from{transform:rotate(0);} to{transform:rotate(-60deg);} }
@keyframes wave-r{ from{transform:rotate(0);} to{transform:rotate(60deg);} }

.robot.is-hidden{ opacity:0; }
.robot.pop-in{ animation:robot-pop .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes robot-pop{
  0%  { transform:translate(-50%,-10%) scale(.25); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

/* balão de fala */
.bubble{
  position:absolute; left:50%; top:-6px;
  transform:translate(-50%,-100%) scale(.6);
  background:#fff; color:var(--escuro);
  font-size:30px; white-space:nowrap;
  padding:12px 24px; border-radius:26px;
  box-shadow:0 8px 0 rgba(0,0,0,.12);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bubble::after{
  content:""; position:absolute; left:50%; bottom:-16px;
  transform:translateX(-50%);
  border:12px solid transparent; border-top-color:#fff;
}
.bubble.is-on{ opacity:1; transform:translate(-50%,-100%) scale(1); }

/* Na fase 5 o robo fica pequeno dentro do tabuleiro: o balao
   precisa encolher junto, senao cobre a casa ou a estrela. */
.robot.is-small .bubble{
  font-size:21px; padding:8px 15px; border-radius:16px;
  box-shadow:0 5px 0 rgba(0,0,0,.12);
}
.robot.is-small .bubble::after{ bottom:-11px; border-width:8px; }

/* =========================================================
   FEEDBACK / EFEITOS
   ========================================================= */
.spark{
  position:absolute; width:20px; height:20px; border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spark-fly .7s ease-out forwards;
}
@keyframes spark-fly{
  from{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  to  { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.2); }
}
.flyer{
  position:absolute; transform:translate(-50%,-50%);
  transition:left .7s cubic-bezier(.5,-0.25,.3,1),
             top  .7s cubic-bezier(.5,-0.25,.3,1),
             width .7s ease-in, height .7s ease-in, opacity .25s ease .5s;
}
.flyer svg{ width:100%; height:100%; overflow:visible; }
.ring{
  position:absolute; width:60px; height:60px; border-radius:50%;
  border:8px solid #fff; transform:translate(-50%,-50%) scale(.2);
  animation:ring-out .6s ease-out forwards; opacity:.9;
}
@keyframes ring-out{ to{ transform:translate(-50%,-50%) scale(3.4); opacity:0; } }

.praise{
  position:absolute; transform:translate(-50%,-50%);
  font-size:56px; color:#fff; white-space:nowrap;
  text-shadow:0 5px 0 rgba(0,0,0,.25);
  animation:praise-up 1.2s ease-out forwards;
}
@keyframes praise-up{
  0%  { opacity:0; transform:translate(-50%,-50%)  scale(.4); }
  25% { opacity:1; transform:translate(-50%,-75%)  scale(1.15); }
  100%{ opacity:0; transform:translate(-50%,-170%) scale(1); }
}

.confetti{
  position:absolute; top:-40px; width:18px; height:26px; border-radius:4px;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  from{ transform:translateY(-40px) rotate(0); }
  to  { transform:translateY(760px) rotate(760deg); }
}

/* =========================================================
   BANNER DE SUCESSO
   ========================================================= */
.banner{
  position:absolute; inset:0; z-index:25;
  /* a caixa fica embaixo: a criança continua vendo o robô comemorar,
     e o botão aparece sempre no mesmo lugar (como o JOGAR) */
  display:grid; place-items:end center;
  padding-bottom:30px;
  background:rgba(10,20,45,.28);
  animation:screen-in .3s ease both;
}
.banner[hidden]{ display:none; }
.banner__box{
  background:#fff; border-radius:40px; padding:26px 56px 30px;
  text-align:center; box-shadow:0 18px 0 rgba(0,0,0,.15);
  animation:box-in .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes box-in{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
.banner__text{ margin:0; font-size:46px; color:var(--escuro); }
.banner__star{ display:block; font-size:56px; line-height:1; animation:star-fill .6s ease; }

/* =========================================================
   TELA FINAL
   ========================================================= */
#screen-end{
  background:linear-gradient(180deg,#6E5BC9 0%,#B06FD8 55%,#FF9BC4 100%);
  text-align:center;
}
.end-stars{ font-size:72px; margin-top:22px; letter-spacing:14px; animation:title-pop 2s ease-in-out infinite; }
.end-robot{ position:absolute; left:50%; top:340px; transform:translate(-50%,-50%) scale(1.1); }
.end-text{
  position:absolute; left:0; right:0; top:495px; margin:0;
  font-size:44px; color:#fff; text-shadow:0 5px 0 rgba(0,0,0,.2);
}
#btn-again{ position:absolute; left:50%; bottom:32px; }

/* =========================================================
   HALO DO CURSOR — mostra à criança onde o mouse está
   ========================================================= */
#cursor-halo{
  position:fixed; left:0; top:0; z-index:9999;
  width:74px; height:74px; margin:-37px 0 0 -37px;
  border-radius:50%;
  border:5px solid rgba(255,255,255,.5);
  background:radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none; opacity:0;
  transition:opacity .25s ease, transform .15s ease, border-color .15s ease;
}
#cursor-halo.is-on{ opacity:1; }
#cursor-halo.is-hot{
  transform:scale(1.3);
  border-color:#FFD246;
  background:radial-gradient(circle, rgba(255,210,70,.45) 0%, rgba(255,210,70,0) 70%);
}
#cursor-halo.is-press{
  transform:scale(.75);
  border-color:#FFFFFF;
  background:radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 70%);
}

/* acessibilidade: respeitar quem pediu menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}


/* =========================================================
   LOGO DA ESCOLA
   Selo branco no canto: aparece nas três telas, nunca
   atrapalha o clique (pointer-events:none).
   ========================================================= */
.brand{
  position:absolute; top:14px; left:18px; z-index:28;
  padding:9px 16px 7px;
  background:#fff; border-radius:18px;
  box-shadow:0 4px 0 rgba(0,0,0,.12), 0 8px 18px rgba(0,0,0,.18);
  pointer-events:none; text-align:center;
}
.brand__img{ display:block; height:34px; width:auto; }
/* nome da professora, no mesmo selo do logo */
.brand__teacher{
  display:block; margin-top:4px;
  font-size:15px; line-height:1; letter-spacing:.3px;
  color:#2F4368;
}

/* =========================================================
   TRAVA DE TELA (modo aula)
   ========================================================= */

/* cadeadinho discreto: o professor confere o estado de longe */
.lock-badge{
  position:absolute; right:22px; bottom:18px; z-index:28;
  font-size:22px; line-height:1; opacity:.45;
  pointer-events:none; transition:opacity .2s ease;
}
.lock-badge.is-locked{ opacity:.75; }

/* aviso curto: travado / destravado */
.lock-toast{
  position:fixed; left:50%; top:22px; transform:translate(-50%,-14px);
  z-index:10000; pointer-events:none;
  padding:12px 26px; border-radius:999px;
  background:rgba(20,28,54,.9); color:#fff;
  font-family:var(--fonte); font-size:22px;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
}
.lock-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* cortina de trava: cobre a janela inteira, não só o palco */
.lock-overlay{
  position:fixed; inset:0; z-index:10001;
  display:grid; place-items:center;
  background:rgba(18,24,48,.92);
  animation:screen-in .25s ease both;
}
.lock-overlay[hidden]{ display:none; }
.lock-overlay__box{ text-align:center; color:#fff; padding:20px; }
.lock-overlay__icon{ font-size:96px; line-height:1; }
.lock-overlay__title{
  margin:14px 0 0; font-family:var(--fonte); font-size:52px;
  text-shadow:0 5px 0 rgba(0,0,0,.25);
}
.lock-overlay__sub{ margin:6px 0 30px; font-size:28px; opacity:.85; }
.lock-overlay__key{
  margin:30px 0 0; font-size:20px; opacity:.6;
}
/* o botão da cortina não pulsa: aqui quem clica é o adulto */
.lock-overlay .big-button{ animation:none; }


/* =========================================================
   BOLINHAS DAS MISSÕES
   A estrela é a FASE (a habilidade). As bolinhas são os passos
   dentro dela: a criança vê que falta pouco, sem número nenhum.
   ========================================================= */
.pips{ display:flex; gap:10px; }
.progress__pip{
  width:14px; height:14px; border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.10);
  transition:background .3s ease, transform .3s ease;
}
.progress__pip.is-on{ background:var(--amarelo); transform:scale(1.25); }

/* =========================================================
   FUNDOS NOVOS
   ========================================================= */
.bg-lab{ background:linear-gradient(180deg,#5B4BAF 0%,#8C6BE0 55%,#C7B4F5 100%); }
.bg-caminho{ background:linear-gradient(180deg,#7ED0F5 0%,#BFEAD2 45%,#EAF7C9 100%); }

/* camada de interface das fases 3, 4 e 5 */
#ui-layer{ z-index:6; pointer-events:none; }
#ui-layer > *{ pointer-events:auto; }

/* =========================================================
   FASE 3 — ARRASTAR E SOLTAR
   ========================================================= */

/* contorno tracejado: mostra ONDE a peça vai, pela FORMA */
.slot{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  border-radius:26%;
  border:6px dashed rgba(255,255,255,.85);
  background:rgba(255,255,255,.16);
  pointer-events:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.slot__ghost{ width:60%; height:60%; opacity:.35; filter:grayscale(1); }
.slot__ghost svg{ width:100%; height:100%; overflow:visible; }
.slot.hint{ animation:slot-call 1s ease-in-out infinite; }
@keyframes slot-call{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    border-color:rgba(255,255,255,.85); }
  50%    { transform:translate(-50%,-50%) scale(1.09); border-color:var(--amarelo); }
}
.slot.is-filled{ border-color:transparent; background:transparent; animation:none; }
.slot.is-filled .slot__ghost{ opacity:0; }

/* a peça que a criança leva */
.piece{
  position:absolute; transform:translate(-50%,-50%);
  padding:0; border:none; background:none;
  display:grid; place-items:center;
  border-radius:26%;
  cursor:grab; pointer-events:auto; touch-action:none;
  transition:left .42s cubic-bezier(.34,1.56,.64,1), top .42s cubic-bezier(.34,1.56,.64,1);
}
.piece__visual{
  width:66%; height:66%;
  display:grid; place-items:center;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease;
}
.piece__visual svg{ width:100%; height:100%; overflow:visible; pointer-events:none; }
.piece:hover .piece__visual{
  transform:scale(1.16);
  filter:drop-shadow(0 0 20px #fff) drop-shadow(0 8px 10px rgba(0,0,0,.25));
}
/* na mão: sem transição, gruda no cursor */
.piece.is-dragging, .piece.is-carrying{ transition:none; cursor:grabbing; z-index:12; }
.piece.is-dragging .piece__visual,
.piece.is-carrying .piece__visual{
  transform:scale(1.22) rotate(-4deg);
  filter:drop-shadow(0 0 26px #fff) drop-shadow(0 14px 16px rgba(0,0,0,.3));
}
.piece.is-returning{ transition:left .45s ease, top .45s ease; }
.piece.is-placed{ pointer-events:none; }
.piece.is-placed .piece__visual{ animation:pop .5s ease; }
.piece.hint .piece__visual{ animation:hint-wiggle 1s ease-in-out infinite; }
.piece.hint:hover .piece__visual{ animation:none; transform:scale(1.16); }

/* =========================================================
   FASE 4 — SEQUÊNCIA
   ========================================================= */

/* visor da máquina: a ordem em desenho, nunca em número */
.visor{
  position:absolute; left:50%; top:214px; transform:translate(-50%,-50%);
  display:flex; gap:16px; padding:18px 24px;
  background:rgba(23,32,64,.92); border-radius:28px;
  border:6px solid rgba(255,255,255,.5);
  box-shadow:0 10px 0 rgba(0,0,0,.2);
  pointer-events:none;
}
.visor__step{
  width:78px; height:78px; border-radius:20px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.visor__icon{ width:74%; height:74%; opacity:.55; transition:opacity .25s ease; }
.visor__icon svg{ width:100%; height:100%; overflow:visible; }
.visor__step.is-next{
  background:rgba(255,255,255,.22);
  box-shadow:0 0 0 5px var(--amarelo);
  animation:visor-next 1.2s ease-in-out infinite;
}
.visor__step.is-next .visor__icon{ opacity:1; }
@keyframes visor-next{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.visor__step.is-done{ background:rgba(86,217,124,.35); }
.visor__step.is-done .visor__icon{ opacity:1; }
.visor__step.is-flash{ background:#fff; transform:scale(1.16); }
.visor__step.is-flash .visor__icon{ opacity:1; }
/* memória: para quem já está seguro, o visor esconde o que vem */
.visor__step.is-veiled .visor__icon{ opacity:0; }
.visor.is-wrong{ animation:visor-shake .5s ease; }
@keyframes visor-shake{
  0%,100%{ transform:translate(-50%,-50%); }
  25%    { transform:translate(calc(-50% - 12px),-50%); }
  75%    { transform:translate(calc(-50% + 12px),-50%); }
}
.visor.is-on{ border-color:var(--amarelo); box-shadow:0 0 34px var(--amarelo), 0 10px 0 rgba(0,0,0,.2); }

/* botões: COR e FORMA diferentes em cada um */
.pad{
  position:absolute; transform:translate(-50%,-50%);
  padding:0; border:none; background:none;
  display:grid; place-items:center;
  border-radius:26%; cursor:pointer; pointer-events:auto;
}
.pad__visual{
  width:78%; height:78%;
  display:grid; place-items:center;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.25));
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), filter .16s ease;
}
.pad__visual svg{ width:100%; height:100%; overflow:visible; pointer-events:none; }
.pad:hover .pad__visual{ transform:scale(1.14); filter:drop-shadow(0 0 22px #fff) drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.pad:active .pad__visual{ transform:scale(1.02); }
.pad.is-flash .pad__visual{ animation:pad-flash .45s ease; }
@keyframes pad-flash{
  0%  { transform:scale(1); }
  40% { transform:scale(1.28); filter:drop-shadow(0 0 30px #fff) drop-shadow(0 0 12px var(--amarelo)); }
  100%{ transform:scale(1); }
}
.pad.hint .pad__visual{ animation:hint-wiggle 1s ease-in-out infinite; }
.pad.hint:hover .pad__visual{ animation:none; transform:scale(1.14); }

/* engrenagens da máquina girando no fim */
.decor.gearspin svg{ transition:filter .4s ease; }
.decor.gearspin.is-running svg{
  animation:spin 2.2s linear infinite;
  filter:drop-shadow(0 0 18px var(--amarelo));
}

/* =========================================================
   FASE 5 — CAMINHO
   ========================================================= */
.grid{
  position:absolute;
  display:grid;
  grid-template-columns:repeat(var(--cols), 1fr);
  grid-template-rows:repeat(var(--rows), 1fr);
  border-radius:22px; overflow:hidden;
  box-shadow:0 12px 0 rgba(0,0,0,.12);
  pointer-events:none;
}
.grid__cell{
  border:3px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.22);
}
.grid__cell:nth-child(even){ background:rgba(255,255,255,.34); }

.decor.is-faded{ opacity:.45; }
.decor.grid-star{ transition:opacity .35s ease, transform .35s ease; z-index:2; }
.decor.grid-star.is-taken{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(30deg); }
.decor.grid-house{ transition:filter .4s ease; z-index:2; }
/* a casa apagada: a estrela é a chave que acende a luz */
.decor.grid-house.is-dark{ filter:grayscale(.85) brightness(.75); }
.decor.grid-house .house-lamp{ transition:fill .4s ease; }
.decor.grid-house:not(.is-dark) .house-lamp{ fill:#FFD246; }
.decor.grid-house.is-home{ animation:pop .6s ease; }

/* robô pequeno, andando de casa em casa */
.robot.is-small{ width:132px; height:152px; }
.robot.is-stepping{ transition:left .42s ease, top .42s ease; }
.robot.is-bumping{ animation:robot-bump .45s ease 2; }
@keyframes robot-bump{
  0%,100%{ transform:translate(-50%,-50%); }
  30%    { transform:translate(-50%,-50%) rotate(-8deg) scale(.94); }
  60%    { transform:translate(-50%,-50%) rotate(8deg) scale(.94); }
}

/* barra de comandos */
.cmdbar{
  position:absolute; left:0; right:0; top:498px; height:172px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:0 26px;
  pointer-events:auto;
}
.cmdbar.is-running{ pointer-events:none; filter:saturate(.6) opacity(.75); }

/* setas em CRUZ: a posição do botão já é a direção */
.dpad{
  display:grid;
  grid-template-columns:repeat(3, 88px);
  grid-template-rows:repeat(2, 74px);
  gap:8px;
}
.cmd--up   { grid-column:2; grid-row:1; }
.cmd--left { grid-column:1; grid-row:2; }
.cmd--down { grid-column:2; grid-row:2; }
.cmd--right{ grid-column:3; grid-row:2; }

.cmd{
  border:none; padding:0; cursor:pointer;
  background:linear-gradient(180deg,#6FC4FF,#3E9BE8);
  border-radius:22px;
  box-shadow:0 7px 0 #1F6EAF, 0 10px 16px rgba(0,0,0,.2);
  display:grid; place-items:center;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cmd:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.cmd:active{ transform:translateY(3px); box-shadow:0 2px 0 #1F6EAF; }
.cmd__visual{ width:62%; height:62%; display:grid; place-items:center; }
.cmd__visual svg{ width:100%; height:100%; overflow:visible; }
.cmd.hint{ animation:cmd-call 1s ease-in-out infinite; }
@keyframes cmd-call{
  0%,100%{ transform:translateY(0)    scale(1);    box-shadow:0 7px 0 #1F6EAF, 0 10px 16px rgba(0,0,0,.2); }
  50%    { transform:translateY(-6px) scale(1.09); box-shadow:0 12px 0 #1F6EAF, 0 0 26px var(--amarelo); }
}

/* fila de setas escolhidas */
.program{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:78px; padding:10px 14px;
  background:rgba(255,255,255,.42); border-radius:24px;
  border:5px solid rgba(255,255,255,.7);
}
.program__slot{
  width:52px; height:52px; border-radius:14px;
  border:3px dashed rgba(35,52,92,.28);
  display:grid; place-items:center;
}
.program__slot svg{ width:78%; height:78%; overflow:visible; }
.program__slot.is-set{
  border-style:solid; border-color:transparent;
  background:linear-gradient(180deg,#6FC4FF,#3E9BE8);
  box-shadow:0 4px 0 #1F6EAF;
}
.program__slot.just-in{ animation:pop .4s ease; }
.program__slot.is-playing{ box-shadow:0 0 0 5px var(--amarelo), 0 4px 0 #1F6EAF; transform:scale(1.1); }
.program.is-full{ animation:visor-shake .4s ease; }

.cmd-actions{ display:flex; align-items:center; gap:12px; }
.cmd--undo{
  width:84px; height:84px; border-radius:24px;
  font-family:var(--fonte); font-size:38px; color:#fff;
  background:linear-gradient(180deg,#FFB13D,#FF8A2B);
  box-shadow:0 7px 0 #D9661A, 0 10px 16px rgba(0,0,0,.2);
}
.cmd--undo.is-off{ filter:grayscale(.7) opacity(.5); }
.cmd--play{
  width:150px; height:96px; border-radius:28px;
  background:linear-gradient(180deg,#63E08B,#33BE63);
  box-shadow:0 8px 0 #1E8B45, 0 12px 18px rgba(0,0,0,.22);
}
.cmd--play__icon{ font-size:52px; line-height:1; color:#fff; }
.cmd--play.is-ready{ animation:btn-breathe-center 1.8s ease-in-out infinite; }

/* =========================================================
   MAPA DAS AVENTURAS (entre uma fase e outra)
   ========================================================= */
#screen-map{
  background:linear-gradient(180deg,#5EC8F8 0%,#A8E6FF 50%,#FFE7B8 100%);
  text-align:center;
}
.map-trail{
  position:absolute; left:0; right:0; top:132px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.medal{
  position:relative;
  width:126px; height:126px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  box-shadow:0 8px 0 rgba(0,0,0,.15), 0 12px 22px rgba(0,0,0,.18);
  transition:transform .3s ease, filter .3s ease;
}
.medal__icon{ font-size:62px; line-height:1; }
.medal__star{
  position:absolute; right:-6px; bottom:-6px;
  font-size:44px; line-height:1; opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
.medal.is-done .medal__star{ opacity:1; }
.medal.is-locked{ filter:grayscale(1); opacity:.55; }
.medal.is-next{
  animation:medal-next 1.6s ease-in-out infinite;
  box-shadow:0 8px 0 rgba(0,0,0,.15), 0 0 0 8px var(--amarelo), 0 12px 22px rgba(0,0,0,.18);
}
@keyframes medal-next{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
.medal.just-won{ animation:medal-pop .8s ease; }
.medal.just-won .medal__star{ animation:star-fill .8s ease; }
@keyframes medal-pop{ 0%{ transform:scale(1); } 45%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
.medal__link{ width:34px; height:10px; border-radius:6px; background:rgba(255,255,255,.6); }
.medal__link.is-done{ background:var(--amarelo); }

.map-robot{ position:absolute; left:50%; top:472px; transform:translate(-50%,-50%) scale(.78); }
.map-next{
  position:absolute; left:0; right:0; top:296px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:52px; line-height:1;
}
.map-next__arrow{ color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.18); }
.map-next__icon{ animation:clue-pulse 1.6s ease-in-out infinite; }
#btn-go{
  position:absolute; left:50%; bottom:30px;
  transform:translateX(-50%);
  animation:btn-breathe 2.4s ease-in-out infinite;
}

/* fantasma que demonstra o arrastar (fase 3) */
#ui-layer > .drag-demo{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  pointer-events:none; opacity:0;
  transition:left 1.15s cubic-bezier(.4,0,.2,1),
             top  1.15s cubic-bezier(.4,0,.2,1),
             opacity .3s ease;
}
#ui-layer > .drag-demo.is-going{ opacity:.55; }
.drag-demo__visual{ width:66%; height:66%; display:grid; place-items:center; }
.drag-demo__visual svg{ width:100%; height:100%; overflow:visible; }


/* ---------- Celular: palco ocupa a tela toda, toque sem zoom/rolagem ---------- */
html,body{ touch-action:none; overscroll-behavior:none; -webkit-touch-callout:none; }
#stage, #stage *{ touch-action:none; }
button, .cmd{ touch-action:manipulation; }
#app{ height:100vh; height:100dvh; }

/* Em pé no celular: pede para girar (o jogo é horizontal) */
.rotate-tip{
  display:none; position:fixed; inset:0; z-index:99999;
  background:linear-gradient(160deg,#5ad2ff,#7b5cff 55%,#ff6ec7);
  color:#fff; text-align:center; font-family:var(--fonte);
  flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px;
}
.rotate-tip__icon{ font-size:84px; line-height:1; animation:rotate-tip 2s ease-in-out infinite; }
.rotate-tip__text{ font-size:26px; font-weight:800; text-shadow:0 3px 0 rgba(60,20,120,.4); }
@keyframes rotate-tip{ 0%,20%{transform:rotate(0)} 60%,100%{transform:rotate(-90deg)} }
@media (orientation:portrait) and (max-width:820px){
  .rotate-tip{ display:flex; }
}