/* =========================================================
   ROBÔ ACADEMY — PLANETA ROBOTIX
   Palco fixo de 1200x700 escalado para caber em qualquer tela.
   Tudo é desenhado em CSS/SVG: nenhuma imagem externa além do
   logo da escola.
   ========================================================= */

:root{
  --ciano:     #35D6E8;
  --ciano-esc: #0E8FA0;
  --roxo:      #8B5CF6;
  --roxo-esc:  #5B3BC4;
  --amarelo:   #FFC93D;
  --amarelo-esc:#D79B00;
  --verde:     #4ADE80;
  --verde-esc: #1E9E52;
  --rosa:      #FF7BAC;
  --vermelho:  #FF5A5A;
  --laranja:   #FF8A3D;
  --branco:    #FFFFFF;
  --noite:     #101B3D;
  --noite-2:   #1B2A5E;
  --texto:     #16234E;
  --fonte:     "Baloo 2", "Comic Sans MS", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; height:100%;
  background:#080E22;
  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:1200px; height:700px;
  transform:translate(-50%,-50%) scale(1);
  transform-origin:center center;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  background:linear-gradient(180deg,var(--noite) 0%, var(--noite-2) 100%);
}

/* ---------- 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(.985);} to{opacity:1; transform:none;} }

/* ---------- Espaço e planeta (fundo das telas de fora) ---------- */
.space{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 28% 8%,  #fff 0 2px,   transparent 3px),
    radial-gradient(circle at 46% 22%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 66% 10%, #fff 0 2px,   transparent 3px),
    radial-gradient(circle at 84% 26%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 92% 12%, #fff 0 2px,   transparent 3px),
    radial-gradient(circle at  8% 46%, #fff 0 2px,   transparent 3px),
    radial-gradient(circle at 22% 68%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 78% 62%, #fff 0 2px,   transparent 3px),
    radial-gradient(circle at 94% 78%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(ellipse at 50% 120%, rgba(139,92,246,.45) 0%, transparent 60%);
  opacity:.9;
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:.9; } 50%{ opacity:.65; } }

.planet{
  position:absolute; left:50%; bottom:-330px;
  width:900px; height:520px; transform:translateX(-50%);
  border-radius:50% 50% 0 0;
  background:radial-gradient(ellipse at 40% 20%, #4ADE80 0%, #22A05C 55%, #14663C 100%);
  box-shadow:0 -18px 60px rgba(74,222,128,.35);
}
.planet::after{
  content:""; position:absolute; inset:0; border-radius:50% 50% 0 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(0,0,0,.14) 0 40px, transparent 42px),
    radial-gradient(circle at 68% 30%, rgba(0,0,0,.12) 0 28px, transparent 30px),
    radial-gradient(circle at 52% 62%, rgba(0,0,0,.10) 0 34px, transparent 36px);
}

/* =========================================================
   LOGO DA ESCOLA
   ========================================================= */
.brand{
  position:absolute; top:12px; left:16px; z-index:40;
  padding:8px 14px 6px;
  background:#fff; border-radius:16px;
  box-shadow:0 4px 0 rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.3);
  pointer-events:none; text-align:center;
}
.brand__img{ display:block; height:28px; width:auto; }
/* nome da professora, no mesmo selo do logo */
.brand__teacher{
  display:block; margin-top:4px;
  font-size:13px; line-height:1; letter-spacing:.3px;
  color:#2F4368;
}

/* =========================================================
   HUD
   ========================================================= */
.topbar{
  position:absolute; top:0; left:0; right:0; height:74px;
  display:none; align-items:center; justify-content:space-between;
  padding:0 20px 0 250px;
  background:linear-gradient(180deg, rgba(8,14,34,.85), rgba(8,14,34,0));
  z-index:30;
}
.topbar.is-on{ display:flex; }
.topbar__id{
  display:flex; align-items:center; gap:10px;
  color:#fff; font-size:22px; letter-spacing:1px;
}
.topbar__face{ font-size:30px; line-height:1; }
.topbar__name{ opacity:.9; }
.topbar__stars{
  display:flex; align-items:center; gap:8px;
  color:#fff; font-size:26px;
  background:rgba(255,255,255,.12);
  padding:6px 18px; border-radius:999px;
}
.hud-star{ font-size:24px; }
.hud-count{ font-size:24px; }
.topbar__tools{ display:flex; gap:10px; }

.tool{
  width:52px; height:52px; border-radius:16px;
  font-size:26px; line-height:1; border:none; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff;
  transition:transform .12s ease, background .12s ease;
}
.tool:hover{ transform:translateY(-3px); background:rgba(255,255,255,.28); }
.tool.is-off{ opacity:.55; }
/* o ⚙️ é do professor: fica discreto e pequeno */
.tool--quiet{ width:40px; height:40px; font-size:18px; opacity:.4; align-self:center; }
.tool--quiet:hover{ opacity:.9; }
/* o ↩ só aparece dentro da fase */
#btn-back{ display:none; }
.topbar.is-playing #btn-back{ display:block; }

/* =========================================================
   TELA INICIAL
   ========================================================= */
#screen-start{ text-align:center; }
.title{
  position:relative; display:inline-block; margin:56px 0 0;
  font-size:74px; letter-spacing:3px; color:#fff;
  text-shadow:0 0 26px rgba(53,214,232,.7), 0 6px 0 var(--ciano-esc), 0 12px 24px rgba(0,0,0,.4);
  animation:title-pop 3.4s ease-in-out infinite;
}
@keyframes title-pop{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03);} }
.subtitle{
  position:relative; margin:6px 0 0;
  font-size:30px; color:var(--ciano);
}
.start-robot{ position:absolute; left:50%; top:372px; transform:translate(-50%,-50%) scale(.70); }
.question{
  position:absolute; left:0; right:0; top:484px; margin:0;
  font-size:26px; letter-spacing:3px; color:#fff; opacity:.85;
}
/* os botões descem um pouco: a pergunta precisa respirar acima deles */
.choice{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  display:flex; gap:40px;
}
.year{
  width:266px; height:132px; border:none; cursor:pointer;
  border-radius:34px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--fonte); color:#fff;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.year__icon{ font-size:54px; line-height:1; }
.year__label{ font-size:34px; letter-spacing:2px; }
.year--um{
  background:linear-gradient(180deg,#FFD469,#FF9F2E);
  box-shadow:0 10px 0 #C86A00, 0 16px 28px rgba(0,0,0,.35);
}
.year--dois{
  background:linear-gradient(180deg,#9C7BFF,#6E3FE0);
  box-shadow:0 10px 0 #4A25A8, 0 16px 28px rgba(0,0,0,.35);
}
.year:hover{ transform:translateY(-6px) scale(1.04); filter:brightness(1.08); }
.year:active{ transform:translateY(3px); }
.year--um   { animation:year-float 2.8s ease-in-out infinite; }
.year--dois { animation:year-float 2.8s ease-in-out .5s infinite; }
@keyframes year-float{ 0%,100%{ margin-top:0; } 50%{ margin-top:-10px; } }
.year:hover{ animation-play-state:paused; }

/* =========================================================
   BOTÕES GRANDES
   ========================================================= */
.big-button{
  display:inline-flex; align-items:center; gap:16px;
  padding:20px 46px;
  font-family:var(--fonte); font-size:36px; color:#fff;
  background:linear-gradient(180deg,#63E08B,#2FB765);
  border:none; border-radius:999px;
  box-shadow:0 10px 0 #1B8B4A, 0 16px 26px rgba(0,0,0,.35);
  cursor:pointer;
  transition:filter .12s ease, transform .12s ease;
}
.big-button__icon{ font-size:40px; line-height:1; }
.big-button:hover{ filter:brightness(1.1); transform:translateY(-3px); }
.big-button:active{ transform:translateY(3px); box-shadow:0 3px 0 #1B8B4A; }

#btn-intro-go, #btn-brief-go, #btn-result-go, #btn-finish-go{
  position:absolute; left:50%; bottom:38px;
  transform:translateX(-50%);
  animation:btn-breathe 2.6s ease-in-out infinite;
}
@keyframes btn-breathe{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%    { transform:translateX(-50%) scale(1.05); }
}
#btn-intro-go:hover, #btn-brief-go:hover, #btn-result-go:hover, #btn-finish-go:hover{
  animation-play-state:paused;
}

/* =========================================================
   TELA DE INTRODUÇÃO DA TRILHA
   ========================================================= */
#screen-intro{ text-align:center; }
.intro__icon{ position:absolute; left:0; right:0; top:104px; font-size:76px; line-height:1; }
.intro__title{
  position:absolute; left:0; right:0; top:196px; margin:0;
  font-size:56px; line-height:1.05; letter-spacing:3px; color:#fff;
  text-shadow:0 5px 0 rgba(0,0,0,.3);
}
/* o robô desce e encolhe um pouco: o balão dele precisa de espaço
   entre a frase de boas-vindas e a cabeça, senão tapa o título */
.intro__robot{ position:absolute; left:50%; top:470px; transform:translate(-50%,-50%) scale(.72); }
.intro__text{
  position:absolute; left:0; right:0; top:272px; margin:0;
  font-size:32px; color:var(--ciano);
}

/* =========================================================
   MAPA DO PLANETA
   ========================================================= */
#screen-map{ text-align:center; }
.map-ground{
  position:absolute; left:-6%; right:-6%; bottom:-190px; height:330px;
  border-radius:50% 50% 0 0;
  background:radial-gradient(ellipse at 50% 0%, #2E7D53 0%, #1B5738 70%);
  box-shadow:inset 0 10px 40px rgba(0,0,0,.35);
}
.map__title{
  position:absolute; left:0; right:0; top:88px; margin:0;
  font-size:36px; letter-spacing:4px; color:#fff; opacity:.92;
  text-shadow:0 0 20px rgba(53,214,232,.6);
}
.map-nodes{
  position:absolute; left:0; right:0; top:180px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.map-node{
  position:relative;
  width:168px; height:196px; border:none; cursor:pointer;
  border-radius:28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--fonte);
  background:linear-gradient(180deg,#FFFFFF,#DDE9F5);
  box-shadow:0 8px 0 rgba(0,0,0,.28), 0 14px 26px rgba(0,0,0,.3);
  transition:transform .18s ease, filter .18s ease;
}
.map-node__n{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--roxo); color:#fff; font-size:20px;
  box-shadow:0 3px 0 var(--roxo-esc);
}
.map-node__icon{ font-size:56px; line-height:1; margin-top:6px; }
.map-node__label{
  font-size:15px; letter-spacing:1px; color:var(--texto);
  max-width:150px; line-height:1.15;
}
.map-node__stars{ display:flex; gap:2px; margin-top:6px; font-size:19px; }
.map-node__stars i{ font-style:normal; filter:grayscale(1) opacity(.35); }
.map-node__stars i.on{ filter:none; }
.map-node:hover:not(:disabled){ transform:translateY(-6px) scale(1.04); }
.map-node.is-locked{ filter:grayscale(.9) brightness(.8); cursor:not-allowed; opacity:.7; }
.map-node.is-next{
  box-shadow:0 8px 0 rgba(0,0,0,.28), 0 0 0 7px var(--amarelo), 0 14px 26px rgba(0,0,0,.3);
  animation:node-next 1.8s ease-in-out infinite;
}
@keyframes node-next{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }
.map-node.just-won{ animation:node-won 1.2s ease; }
@keyframes node-won{ 0%{transform:scale(1);} 40%{transform:scale(1.18) rotate(-3deg);} 100%{transform:scale(1);} }
.map-link{
  width:34px; height:10px; border-radius:6px;
  background:rgba(255,255,255,.28);
}
.map-link.is-done{ background:var(--amarelo); }
.map-robot{ position:absolute; left:50%; top:520px; transform:translate(-50%,-50%) scale(.62); }

/* =========================================================
   SELO DO OBJETIVO
   ========================================================= */
.seal{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:4px solid rgba(255,255,255,.45);
  border-radius:26px;
  display:flex; flex-direction:column; align-items:center;
  color:#fff;
}
.seal__icon{ font-size:64px; line-height:1; }
.seal__kicker{ font-size:16px; letter-spacing:3px; opacity:.75; margin-top:4px; }
.seal__skill{ font-size:30px; letter-spacing:2px; color:var(--amarelo); }

.seal--big{
  position:absolute; left:50%; top:150px; transform:translateX(-50%);
  padding:22px 46px;
  box-shadow:0 0 40px rgba(53,214,232,.35);
  animation:seal-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes seal-in{ from{ transform:translateX(-50%) scale(.6); opacity:0; } to{ transform:translateX(-50%) scale(1); opacity:1; } }
.seal--calm{ animation:none; }

/* selo pequeno, dentro da fase */
.seal--mini{
  position:absolute; left:20px; top:92px;
  flex-direction:row; align-items:center; gap:10px;
  padding:8px 18px; border-radius:18px;
  border-width:3px;
  z-index:12;
}
.seal--mini .seal__icon{ font-size:28px; }
.seal--mini .seal__skill{ font-size:18px; letter-spacing:1px; }

#screen-briefing{ text-align:center; }
.brief__title{
  position:absolute; left:0; right:0; top:392px; margin:0;
  font-size:44px; letter-spacing:2px; color:#fff;
  text-shadow:0 5px 0 rgba(0,0,0,.3);
}
.brief__robot{ position:absolute; left:50%; top:540px; transform:translate(-50%,-50%) scale(.6); }

/* bolinhas dos desafios da fase */
.steps{
  position:absolute; right:24px; top:92px;
  display:flex; gap:9px; z-index:12;
}
.steps__dot{
  width:15px; height:15px; border-radius:50%;
  background:rgba(255,255,255,.3);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.15);
  transition:background .3s ease, transform .3s ease;
}
.steps__dot.is-done{ background:var(--verde); }
.steps__dot.is-now{ background:var(--amarelo); transform:scale(1.3); }

/* =========================================================
   TELA DE RESULTADO
   ========================================================= */
#screen-result{ text-align:center; }
.result__kicker{
  position:absolute; left:0; right:0; top:98px; margin:0;
  font-size:38px; letter-spacing:2px; color:#fff;
  text-shadow:0 0 22px rgba(255,201,61,.7);
}
.result__stars{
  position:absolute; left:0; right:0; top:158px;
  display:flex; justify-content:center; gap:16px;
}
#result-seal{ top:280px; }
.result__robot{ position:absolute; left:50%; top:552px; transform:translate(-50%,-50%) scale(.56); }

.star{ font-size:44px; line-height:1; filter:grayscale(1) opacity(.3); }
.star.is-on{ filter:none; animation:star-pop .7s cubic-bezier(.34,1.56,.64,1) both; }
.star--big{ font-size:74px; }
@keyframes star-pop{
  0%{ transform:scale(.2) rotate(-40deg); opacity:0; }
  60%{ transform:scale(1.35) rotate(10deg); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

/* =========================================================
   FIM DA TRILHA
   ========================================================= */
#screen-finish{ text-align:center; }
.finish__kicker{ position:absolute; left:0; right:0; top:92px; margin:0; font-size:70px; }
.finish__title{
  position:absolute; left:0; right:0; top:196px; margin:0; padding:0 90px;
  font-size:40px; line-height:1.15; letter-spacing:1px; color:#fff;
  text-shadow:0 0 26px rgba(255,201,61,.6), 0 5px 0 rgba(0,0,0,.3);
}
.finish__stars{
  position:absolute; left:0; right:0; top:300px;
  display:flex; justify-content:center; gap:14px;
}
.finish__robot{ position:absolute; left:50%; top:520px; transform:translate(-50%,-50%) scale(.66); }

/* =========================================================
   CENA DA FASE
   ========================================================= */
.scene{ position:absolute; inset:0; }
.layer{ position:absolute; inset:0; }
#decor-layer, #object-layer, #robot-layer{ pointer-events:none; }
#decor-layer{ z-index:1; }
#object-layer{ z-index:3; }
#robot-layer{ z-index:4; }
#ui-layer{ z-index:6; pointer-events:none; }
#ui-layer > *{ pointer-events:auto; }
#fx-layer{ z-index:50; pointer-events:none; }

/* peça de cenário genérica */
.tile{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center; pointer-events:none;
}
.tile svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); }
.tile.is-faded{ opacity:.42; }
.tile--item{ transition:opacity .35s ease, transform .35s ease; z-index:2; }
.tile--item.is-taken{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(30deg); }
.tile--goal{ transition:filter .4s ease; z-index:2; }
.tile--goal.is-closed{ filter:grayscale(.85) brightness(.7); }
.tile--goal .base-lamp{ transition:fill .4s ease; }
.tile--goal:not(.is-closed) .base-lamp{ fill:#FFC93D; }
.tile--goal.is-home{ animation:pop .6s ease; }
@keyframes pop{ 0%{transform:translate(-50%,-50%) scale(1);} 40%{transform:translate(-50%,-50%) scale(1.35);} 100%{transform:translate(-50%,-50%) scale(1);} }
.tile--gear svg{ transition:filter .4s ease; }
.tile--gear.is-running svg{ animation:spin 2.2s linear infinite; filter:drop-shadow(0 0 18px var(--amarelo)); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- tabuleiro ---------- */
.grid{
  position:absolute;
  display:grid;
  grid-template-columns:repeat(var(--cols), 1fr);
  grid-template-rows:repeat(var(--rows), 1fr);
  border-radius:20px; overflow:hidden;
  box-shadow:0 14px 0 rgba(0,0,0,.25), 0 0 44px rgba(53,214,232,.25);
  pointer-events:none;
}
.grid__cell{
  border:2px solid rgba(53,214,232,.35);
  background:rgba(53,214,232,.10);
}
.grid__cell:nth-child(even){ background:rgba(53,214,232,.18); }

/* =========================================================
   O ROBÔ PIX
   ========================================================= */
.pix{
  position:absolute; width:250px; height:300px;
  transform:translate(-50%,-50%);
  transition:left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.pix svg{ width:100%; height:100%; overflow:visible; }
.pix.is-hidden{ opacity:0; }
.pix.is-small{ width:118px; height:142px; }
.pix.is-stepping{ transition:left .44s ease, top .44s ease; }

.pix__body{ animation:bob 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center bottom; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

.pix__pupils{ transition:transform .12s ease-out; }
.pix__eye{ transform-box:fill-box; transform-origin:center; transition:transform .25s ease; }
.pix__bulb{ transition:fill .3s ease, filter .3s ease; }
.pix__core{ transition:fill .3s ease, filter .3s ease; }
.pix.is-on .pix__bulb{ fill:#FFE45C; filter:drop-shadow(0 0 12px #FFE45C); }
.pix.is-on .pix__core{ filter:drop-shadow(0 0 12px var(--verde)); }
.pix__arm-l, .pix__arm-r{ transform-box:fill-box; transform-origin:right center; }
.pix__arm-r{ transform-origin:left center; }

/* expressões */
.pix.is-feliz .pix__body{ animation:bob .5s ease-in-out 3, bob 2.8s ease-in-out infinite 1.5s; }
.pix.is-feliz .pix__arm-l{ animation:wave-l .45s ease-in-out 3; }
.pix.is-feliz .pix__arm-r{ animation:wave-r .45s ease-in-out 3; }
@keyframes wave-l{ 0%,100%{transform:rotate(0);} 50%{transform:rotate(-32deg);} }
@keyframes wave-r{ 0%,100%{transform:rotate(0);} 50%{transform:rotate(32deg);} }
.pix.is-pensando .pix__eye{ transform:scaleY(.72); }
.pix.is-surpreso .pix__eye{ transform:scale(1.22); }
.pix.is-dormindo .pix__eye{ transform:scaleY(.1); }
.pix.is-comemorando .pix__body{ animation:dance 1s ease-in-out infinite; }
@keyframes dance{
  0%,100%{ transform:translateY(0) rotate(-5deg); }
  50%    { transform:translateY(-16px) rotate(5deg); }
}
.pix.is-comemorando .pix__arm-l{ animation:wave-l .5s ease-in-out infinite; }
.pix.is-comemorando .pix__arm-r{ animation:wave-r .5s ease-in-out infinite; }

.pix.is-jumping{ animation:pix-jump .65s cubic-bezier(.3,1.4,.5,1); }
@keyframes pix-jump{
  0%,100%{ transform:translate(-50%,-50%); }
  40%    { transform:translate(-50%,-50%) translateY(-42px); }
}
.pix.is-spinning .pix__body{ animation:pix-spin .65s ease; }
@keyframes pix-spin{ to{ transform:rotateY(360deg); } }
.pix.is-bumping{ animation:pix-bump .42s ease 2; }
@keyframes pix-bump{
  0%,100%{ transform:translate(-50%,-50%); }
  30%    { transform:translate(-50%,-50%) rotate(-9deg) scale(.94); }
  60%    { transform:translate(-50%,-50%) rotate(9deg) scale(.94); }
}

/* balão de fala */
.pix__bubble{
  position:absolute; left:50%; top:-4px;
  transform:translate(-50%,-100%) scale(.6);
  background:#fff; color:var(--texto);
  font-size:26px; white-space:nowrap;
  padding:11px 22px; border-radius:22px;
  box-shadow:0 8px 0 rgba(0,0,0,.18);
  opacity:0; pointer-events:none; z-index:5;
  transition:opacity .2s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.pix__bubble::after{
  content:""; position:absolute; left:50%; bottom:-15px;
  transform:translateX(-50%);
  border:11px solid transparent; border-top-color:#fff;
}
.pix__bubble.is-on{ opacity:1; transform:translate(-50%,-100%) scale(1); }
/* no tabuleiro o robô é pequeno: o balão encolhe junto para não
   tapar a casa de cima */
.pix.is-small .pix__bubble{
  font-size:19px; padding:7px 13px; border-radius:14px;
  box-shadow:0 4px 0 rgba(0,0,0,.18);
}
.pix.is-small .pix__bubble::after{ bottom:-10px; border-width:7px; }

/* =========================================================
   BARRA DE COMANDOS
   ========================================================= */
.cmdbar{
  position:absolute; left:0; right:0; top:496px; height:186px;
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:0 24px;
}
.cmdbar--solo{ justify-content:center; top:466px; height:222px; }
.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, 82px);
  grid-template-rows:repeat(2, 70px);
  gap:8px;
}
.dpad--big{ grid-template-columns:repeat(3, 116px); grid-template-rows:repeat(2, 100px); gap:12px; }
.cmd--cima    { grid-column:2; grid-row:1; }
.cmd--esquerda{ grid-column:1; grid-row:2; }
.cmd--baixo   { grid-column:2; grid-row:2; }
.cmd--direita { grid-column:3; grid-row:2; }

.cmd{
  border:none; padding:0; cursor:pointer;
  background:linear-gradient(180deg,#6FE0F5,#28AFD0);
  border-radius:20px;
  box-shadow:0 7px 0 var(--ciano-esc), 0 10px 16px rgba(0,0,0,.3);
  display:grid; place-items:center;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.cmd:hover{ transform:translateY(-3px); filter:brightness(1.1); }
.cmd:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--ciano-esc); }
.cmd.is-off{ filter:grayscale(.7) opacity(.45); }
.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 var(--ciano-esc), 0 10px 16px rgba(0,0,0,.3); }
  50%    { transform:translateY(-6px) scale(1.09); box-shadow:0 12px 0 var(--ciano-esc), 0 0 28px var(--amarelo); }
}

/* botões de repetição */
.repeats{ display:flex; flex-direction:column; gap:7px; }
.cmd--repeat{
  width:98px; height:52px;
  display:flex; align-items:center; justify-content:center; gap:4px;
  background:linear-gradient(180deg,#B79BFF,#7C4DEC);
  box-shadow:0 5px 0 var(--roxo-esc), 0 8px 14px rgba(0,0,0,.3);
  color:#fff; font-family:var(--fonte);
}
.cmd--repeat__icon{ font-size:20px; line-height:1; }
.cmd--repeat__n{ font-size:23px; }
.cmd--repeat:active{ box-shadow:0 2px 0 var(--roxo-esc); }

/* fila de comandos */
.program-wrap{ flex:1; display:flex; justify-content:center; }
.program{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:88px; padding:12px 16px;
  background:rgba(255,255,255,.14); border-radius:22px;
  border:4px solid rgba(255,255,255,.3);
}
.program__slot{
  position:relative;
  width:56px; height:56px; border-radius:14px;
  border:3px dashed rgba(255,255,255,.35);
  display:grid; place-items:center;
}
.program__slot svg{ width:76%; height:76%; overflow:visible; }
.program__slot.is-set{
  border-style:solid; border-color:transparent;
  background:linear-gradient(180deg,#6FE0F5,#28AFD0);
  box-shadow:0 4px 0 var(--ciano-esc);
  cursor:pointer;
  transition:transform .14s ease, filter .14s ease;
}
/* clicar num comando da fila apaga só ele: consertar sem recomeçar */
.cmdbar:not(.is-running) .program__slot.is-set:hover{
  transform:translateY(-4px) scale(1.08);
  filter:brightness(1.15);
}
.cmdbar:not(.is-running) .program__slot.is-set:hover::after{
  content:"✕"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:26px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.5);
  background:rgba(0,0,0,.32); border-radius:14px;
}
.program__times{
  position:absolute; right:-8px; bottom:-8px;
  min-width:30px; height:26px; padding:0 5px;
  border-radius:13px;
  background:var(--roxo); color:#fff;
  font-size:17px; line-height:26px; text-align:center;
  box-shadow:0 3px 0 var(--roxo-esc);
}
.program__slot.just-in{ animation:slot-in .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes slot-in{ 0%{transform:scale(.3);} 60%{transform:scale(1.25);} 100%{transform:scale(1);} }
.program__slot.is-playing{ box-shadow:0 0 0 5px var(--amarelo), 0 4px 0 var(--ciano-esc); transform:scale(1.1); }
.program.is-full{ animation:shake .4s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-12px);} 75%{transform:translateX(12px);} }

.cmd-actions{ display:flex; align-items:center; gap:12px; }
.cmd--undo{
  width:80px; height:80px; border-radius:22px;
  font-family:var(--fonte); font-size:34px; color:#fff;
  background:linear-gradient(180deg,#FFB13D,#FF8A2B);
  box-shadow:0 7px 0 #C86A00, 0 10px 16px rgba(0,0,0,.3);
}
.cmd--undo:active{ box-shadow:0 2px 0 #C86A00; }
.cmd--play{
  width:170px; height:92px; border-radius:26px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,#63E08B,#2FB765);
  box-shadow:0 8px 0 #1B8B4A, 0 12px 18px rgba(0,0,0,.32);
  color:#fff; font-family:var(--fonte);
}
.cmd--play__icon{ font-size:34px; line-height:1; }
.cmd--play__text{ font-size:21px; letter-spacing:1px; }
.cmd--play:active{ box-shadow:0 2px 0 #1B8B4A; }
.cmd--play.is-ready{ animation:play-ready 1.8s ease-in-out infinite; }
@keyframes play-ready{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }

/* botão de tentar de novo (missão final) */
.retry{
  position:absolute; left:50%; top:400px; transform:translate(-50%,-50%) scale(.7);
  display:none; align-items:center; gap:12px;
  padding:16px 34px; border:none; border-radius:999px; cursor:pointer;
  font-family:var(--fonte); font-size:26px; color:#fff;
  background:linear-gradient(180deg,#FFB13D,#FF8A2B);
  box-shadow:0 8px 0 #C86A00, 0 12px 22px rgba(0,0,0,.4);
  opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index:14;
}
.retry.is-on{ display:flex; opacity:1; transform:translate(-50%,-50%) scale(1); }
.retry__icon{ font-size:30px; }

/* =========================================================
   FASE DA SEQUÊNCIA
   ========================================================= */
.visor{
  position:absolute; left:50%; top:222px; transform:translate(-50%,-50%);
  display:flex; gap:16px; padding:18px 24px;
  background:rgba(10,18,44,.92); border-radius:26px;
  border:5px solid rgba(255,255,255,.4);
  box-shadow:0 10px 0 rgba(0,0,0,.3);
  pointer-events:none;
}
.visor__step{
  width:80px; height:80px; border-radius:20px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.visor__icon{ width:76%; height:76%; opacity:.5; transition:opacity .25s ease; }
.visor__icon svg{ width:100%; height:100%; overflow:visible; }
.visor__step.is-next{
  background:rgba(255,255,255,.2);
  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(74,222,128,.34); }
.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; }
.visor.is-wrong{ animation:visor-shake .5s ease; }
@keyframes visor-shake{
  0%,100%{ transform:translate(-50%,-50%); }
  25%    { transform:translate(calc(-50% - 14px),-50%); }
  75%    { transform:translate(calc(-50% + 14px),-50%); }
}
.visor.is-on{ border-color:var(--amarelo); box-shadow:0 0 40px var(--amarelo), 0 10px 0 rgba(0,0,0,.3); }

/* botões coloridos (cor + forma) */
.pad{
  position:absolute; transform:translate(-50%,-50%);
  width:166px; height:166px;
  padding:0; border:none; background:none;
  display:grid; place-items:center;
  border-radius:26%; cursor:pointer;
}
.pad__visual{
  width:78%; height:78%;
  display:grid; place-items:center;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));
  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 24px #fff) drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.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.3); filter:drop-shadow(0 0 32px #fff) drop-shadow(0 0 14px var(--amarelo)); }
  100%{ transform:scale(1); }
}
.pad.is-wrong .pad__visual{ animation:pad-wrong .5s ease; }
@keyframes pad-wrong{ 0%,100%{transform:rotate(0);} 25%{transform:rotate(-12deg);} 75%{transform:rotate(12deg);} }
.pad.hint .pad__visual{ animation:hint-wiggle 1s ease-in-out infinite; }
.pad.hint:hover .pad__visual{ animation:none; transform:scale(1.14); }
@keyframes hint-wiggle{
  0%,100%{ transform:scale(1) rotate(0); }
  25%    { transform:scale(1.14) rotate(-7deg); }
  75%    { transform:scale(1.14) rotate(7deg); }
}

/* =========================================================
   FASE DOS PADRÕES
   ========================================================= */
.fita{
  position:absolute; left:50%; top:250px; transform:translate(-50%,-50%);
  display:flex; gap:14px; padding:20px 26px;
  background:rgba(10,18,44,.9); border-radius:26px;
  border:5px solid rgba(255,255,255,.4);
  box-shadow:0 10px 0 rgba(0,0,0,.3);
  pointer-events:none;
}
.fita__cell{
  width:86px; height:86px; border-radius:20px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08);
  transition:background .25s ease, transform .25s ease;
}
.fita__icon{ width:78%; height:78%; }
.fita__icon svg{ width:100%; height:100%; overflow:visible; }
.fita__cell.is-flash{ background:#fff; transform:scale(1.12); }
.fita__cell--q{
  color:var(--amarelo); font-size:56px; font-family:var(--fonte);
  border:4px dashed var(--amarelo);
  animation:visor-next 1.4s ease-in-out infinite;
}
.fita__cell.is-answer{ background:rgba(74,222,128,.35); animation:slot-in .5s cubic-bezier(.34,1.56,.64,1); }

/* =========================================================
   FASE DE MONTAR (arrastar e soltar)
   ========================================================= */
.slot{
  position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  border-radius:24%;
  border:6px dashed rgba(255,255,255,.75);
  background:rgba(255,255,255,.10);
  pointer-events:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.slot__ghost{ width:62%; height:62%; opacity:.32; 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,.75); }
  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; }

.piece{
  position:absolute; transform:translate(-50%,-50%);
  padding:0; border:none; background:none;
  display:grid; place-items:center;
  border-radius:24%;
  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:70%; height:70%;
  display:grid; place-items:center;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));
  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 22px #fff) drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.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 28px #fff) drop-shadow(0 14px 18px rgba(0,0,0,.45));
}
.piece.is-returning{ transition:left .45s ease, top .45s ease; }
.piece.is-placed{ pointer-events:none; }
.piece.is-placed .piece__visual{ animation:pop-piece .5s ease; }
@keyframes pop-piece{ 0%{transform:scale(1);} 40%{transform:scale(1.45);} 100%{transform:scale(1);} }
.piece.hint .piece__visual{ animation:hint-wiggle 1s ease-in-out infinite; }
.piece.hint:hover .piece__visual{ animation:none; transform:scale(1.16); }

/* peça-fantasma que demonstra o gesto de arrastar */
#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:.5; }
.drag-demo__visual{ width:70%; height:70%; display:grid; place-items:center; }
.drag-demo__visual svg{ width:100%; height:100%; overflow:visible; }

/* =========================================================
   MÃOZINHA / HALO / EFEITOS
   ========================================================= */
.hand{
  position:absolute; z-index:20;
  font-size:62px; line-height:1;
  pointer-events:none; opacity:0;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));
  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(18px); }
}

#cursor-halo{
  position:fixed; left:0; top:0; z-index:9999;
  width:60px; height:60px; margin:-30px 0 0 -30px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(53,214,232,.45) 0%, rgba(53,214,232,0) 70%);
  border:3px solid rgba(255,255,255,.55);
  transition:opacity .2s ease, transform .12s ease, border-color .2s ease;
}
#cursor-halo.is-on{ opacity:1; }
#cursor-halo.is-hot{ transform:scale(1.35); border-color:var(--amarelo); }
#cursor-halo.is-press{ transform:scale(.8); }

.spark{
  position:absolute; width:18px; height:18px; 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); }
}
.ring{
  position:absolute; width:40px; height:40px; border-radius:50%;
  transform:translate(-50%,-50%);
  border:6px solid #fff;
  animation:ring-grow .65s ease-out forwards;
}
@keyframes ring-grow{
  from{ opacity:.9; transform:translate(-50%,-50%) scale(.4); }
  to  { opacity:0;  transform:translate(-50%,-50%) scale(3); }
}
.praise{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--fonte); font-size:42px; color:#fff;
  text-shadow:0 4px 0 rgba(0,0,0,.35);
  pointer-events:none;
  animation:praise-up 1.2s ease-out forwards;
}
@keyframes praise-up{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.5); }
  25% { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
  100%{ opacity:0; transform:translate(-50%,-140%) scale(1); }
}
.flyer{
  position:absolute; transform:translate(-50%,-50%);
  transition:left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1),
             width .7s ease, height .7s ease, opacity .7s ease;
  pointer-events:none;
}
.flyer svg{ width:100%; height:100%; overflow:visible; }
.confetti{
  position:absolute; top:-40px; border-radius:4px;
  animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
  from{ transform:translateY(0) rotate(0); opacity:1; }
  to  { transform:translateY(760px) rotate(560deg); opacity:.9; }
}

/* =========================================================
   PAINEL DO PROFESSOR
   ========================================================= */
.config{
  position:absolute; inset:0; z-index:60;
  display:grid; place-items:center;
  background:rgba(8,14,34,.88);
  animation:screen-in .25s ease both;
}
.config[hidden]{ display:none; }
.config__box{
  background:#fff; border-radius:28px; padding:32px 42px;
  text-align:center; min-width:460px;
  box-shadow:0 18px 0 rgba(0,0,0,.2);
}
.config__title{ margin:0 0 10px; font-size:30px; color:var(--texto); }
.config__line{ margin:0 0 24px; font-size:19px; color:#54627F; }
.config__danger{
  position:relative; overflow:hidden;
  width:100%; padding:18px 24px; border:none; border-radius:18px;
  font-family:var(--fonte); font-size:20px; color:#fff; cursor:pointer;
  background:#E5484D;
  box-shadow:0 6px 0 #A82126;
}
.config__danger-text{ position:relative; z-index:2; }
.config__danger-fill{
  position:absolute; left:0; top:0; bottom:0; width:0;
  background:rgba(0,0,0,.32); z-index:1;
}
.config__danger-fill.is-filling{ animation:fill 2s linear forwards; }
@keyframes fill{ to{ width:100%; } }
.config__close{
  margin-top:16px; padding:12px 30px; border:none; border-radius:14px;
  font-family:var(--fonte); font-size:19px; cursor:pointer;
  background:#E8EDF5; color:var(--texto);
}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */
button:focus-visible{ outline:5px dashed #fff; outline-offset:4px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }
}


/* ---------- 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; }
}