/* Inglês Visual Kids — Claymorphism: chunky, bordas grossas, sombra dupla, bounce */
:root{
  --sky:#EAF2FF;
  --sky-2:#FFF6E8;
  --surface:#FFFFFF;
  --ink:#1F2A44;
  --ink-soft:#4C5A70;
  --coral:#D9491F;   --coral-d:#A83716;   --coral-soft:#FF7A50;
  --sun:#F9C440;     --sun-d:#D9A21C;
  --sky-blue:#3563C9;--sky-blue-d:#254BA0;--sky-soft:#5B8DEF;
  --mint:#27794A;    --mint-d:#1B5A36;    --mint-soft:#3FB36F;
  --navy:#1F2A44;
  --border:#DCE6F5;
  --r-card:24px; --r-btn:20px; --r-pill:999px;
  --shadow-card: 0 2px 0 rgba(31,42,68,.04), 0 10px 24px -10px rgba(31,42,68,.22);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --fast:160ms; --base:260ms;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{height:100%;}
body{
  margin:0;min-height:100dvh;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 100%) fixed;
  color:var(--ink);
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;
  touch-action:manipulation;
}
h1,h2,h3,.display,.btn,.topbar-title,.word,.big-q,.stat b,.price{font-family:'Baloo 2','Segoe UI Rounded',system-ui,sans-serif;}
button{font-family:inherit;color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:3px solid var(--sky-blue);outline-offset:3px;border-radius:12px;}

#main{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;overflow:hidden;}
.screen{
  min-height:100dvh;display:flex;flex-direction:column;gap:16px;
  padding:max(16px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));
  animation:screen-in var(--base) ease-out both;
}
@keyframes screen-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* barra de topo */
.topbar{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:8px;min-height:52px;}
.topbar-title{margin:0;text-align:center;font-size:1.25rem;font-weight:800;color:var(--ink);}
.brandbar{display:flex;justify-content:center;padding:6px 0 2px;}
.brand-logo{height:64px;width:auto;}

/* botão redondo (voltar, cadeado) */
.round-btn{
  width:52px;height:52px;border-radius:50%;
  background:var(--surface);border:3px solid var(--border);
  box-shadow:0 5px 0 var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.round-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--border);}
.round-btn img{width:32px;height:32px;object-fit:contain;}

/* botões clay */
.btn{
  position:relative;border:none;cursor:pointer;
  min-height:60px;padding:14px 22px;border-radius:var(--r-btn);
  font-weight:800;font-size:1.15rem;letter-spacing:.01em;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
  background:var(--sky-blue);
  box-shadow:0 6px 0 var(--sky-blue-d), inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--sky-blue-d), inset 0 2px 0 rgba(255,255,255,.35);}
.btn-block{width:100%;}
.btn-primary{background:var(--coral);box-shadow:0 6px 0 var(--coral-d), inset 0 2px 0 rgba(255,255,255,.35);}
.btn-primary:active{box-shadow:0 1px 0 var(--coral-d), inset 0 2px 0 rgba(255,255,255,.35);}
.btn-good{background:var(--mint);box-shadow:0 6px 0 var(--mint-d), inset 0 2px 0 rgba(255,255,255,.35);}
.btn-good:active{box-shadow:0 1px 0 var(--mint-d), inset 0 2px 0 rgba(255,255,255,.35);}
.btn-sun{background:var(--sun);color:var(--ink);text-shadow:none;box-shadow:0 6px 0 var(--sun-d), inset 0 2px 0 rgba(255,255,255,.5);}
.btn-sun:active{box-shadow:0 1px 0 var(--sun-d), inset 0 2px 0 rgba(255,255,255,.5);}
.btn img{width:30px;height:30px;object-fit:contain;}
.btn svg{flex-shrink:0;}
.link-btn{background:none;border:none;color:var(--ink-soft);font-weight:700;font-size:.95rem;text-decoration:underline;cursor:pointer;padding:10px;}

/* cartões clay */
.card{
  background:var(--surface);border:3px solid var(--border);border-radius:var(--r-card);
  padding:18px;box-shadow:var(--shadow-card);
}
.card.tinted{border-color:var(--tint-bd,var(--border));background:var(--tint-bg,var(--surface));}

/* Théo + balão */
.theo-say{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;}
.theo-say .theo-img{width:110px;height:auto;filter:drop-shadow(0 8px 12px rgba(31,42,68,.2));animation:bob 3.6s ease-in-out infinite;}
.theo-lg .theo-img{width:150px;}
.theo-sm .theo-img{width:84px;}
.bubble{
  position:relative;background:var(--surface);border:3px solid var(--border);border-radius:22px;
  padding:14px 16px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--ink);
  box-shadow:var(--shadow-card);
}
.bubble::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:20px;height:20px;background:var(--surface);border-left:3px solid var(--border);border-bottom:3px solid var(--border);border-radius:4px;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* decorativos flutuando */
.deco{position:absolute;pointer-events:none;width:44px;height:44px;object-fit:contain;z-index:0;}
.deco.float-a{animation:bob 3.2s ease-in-out infinite;}
.deco.float-b{animation:bob 4.1s ease-in-out infinite reverse;}
.deco.spin{animation:spin 10s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.rel{position:relative;}

/* formulário */
.field-label{font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:-6px;font-family:'Baloo 2',sans-serif;}
.input{
  width:100%;border:3px solid var(--border);border-radius:18px;
  padding:14px 16px;font-size:1.1rem;font-weight:700;background:var(--surface);color:var(--ink);
  box-shadow:inset 0 3px 0 rgba(31,42,68,.05);
}
.input:focus{outline:none;border-color:var(--sky-blue);}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  min-height:48px;padding:8px 16px;border-radius:var(--r-pill);
  background:var(--surface);border:3px solid var(--border);
  font-weight:800;font-size:1rem;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 0 var(--border);
  transition:transform var(--fast) var(--spring),background var(--fast),border-color var(--fast),box-shadow var(--fast);
}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border);}
.chip.sel{background:#FFE8DE;border-color:var(--coral);box-shadow:0 4px 0 var(--coral);color:var(--coral-d);}
.chip img{width:28px;height:28px;object-fit:contain;}

/* Home */
.streak-pill{
  align-self:center;display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:3px solid #FFD9A8;border-radius:var(--r-pill);
  padding:6px 16px 6px 8px;font-weight:800;font-family:'Baloo 2',sans-serif;font-size:1rem;color:var(--ink);
  box-shadow:0 4px 0 #FFD9A8;
}
.streak-pill img{width:30px;height:30px;object-fit:contain;animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.moments{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.moment{
  border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:var(--r-card);
  padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  cursor:pointer;box-shadow:0 6px 0 var(--tint-bd);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.moment:active{transform:translateY(4px);box-shadow:0 2px 0 var(--tint-bd);}
.moment img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(31,42,68,.16));}
.moment b{font-family:'Baloo 2',sans-serif;font-size:1.05rem;line-height:1.1;}
.moment small{font-size:.8rem;color:var(--ink-soft);font-weight:600;}
.moment.now{position:relative;}
.moment.now::after{
  content:"agora";position:absolute;top:-12px;right:10px;background:var(--coral);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.75rem;padding:2px 10px;border-radius:var(--r-pill);
  box-shadow:0 3px 0 var(--coral-d);
}
.tiles-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tile-btn{
  border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:var(--r-card);
  padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1rem;color:var(--ink);
  box-shadow:0 6px 0 var(--tint-bd);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.tile-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--tint-bd);}
.tile-btn img{width:56px;height:56px;object-fit:contain;}
.home-links{display:flex;justify-content:center;gap:10px;margin-top:4px;}
.mini-chip{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px 6px 8px;
  background:var(--surface);border:3px solid var(--border);border-radius:var(--r-pill);
  font-weight:800;font-size:.9rem;cursor:pointer;box-shadow:0 4px 0 var(--border);
}
.mini-chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border);}
.mini-chip img{width:24px;height:24px;object-fit:contain;}

/* Lição */
.dots{display:flex;gap:8px;justify-content:center;}
.dot{width:12px;height:12px;border-radius:50%;background:var(--surface);border:3px solid var(--border);transition:background var(--base),transform var(--base) var(--spring);}
.dot.on{background:var(--coral);border-color:var(--coral);transform:scale(1.15);}
.lesson-card{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:26px 20px;min-height:360px;
  border:4px solid var(--tint-bd);background:var(--tint-bg);border-radius:32px;
  box-shadow:0 8px 0 var(--tint-bd), var(--shadow-card);
  position:relative;overflow:hidden;
}
.lesson-card .word-img{width:min(64vw,240px);height:min(64vw,240px);object-fit:contain;filter:drop-shadow(0 16px 22px rgba(31,42,68,.2));animation:pop var(--base) var(--spring) both;}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.word{font-size:2.6rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:.01em;}
/* Palavra em ingles e da crianca (Baloo, grande). A traducao e do adulto que
   esta do lado: fonte de texto, pequena, sem competir com a de cima. */
.word-group{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.word-pt{
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;
  font-size:1rem;font-weight:600;line-height:1.25;
  color:var(--ink-soft);letter-spacing:.015em;
}
.audio-btn{
  width:72px;height:72px;border-radius:50%;border:none;cursor:pointer;
  background:var(--sun);color:var(--ink);
  box-shadow:0 6px 0 var(--sun-d), inset 0 2px 0 rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.audio-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sun-d);}
.audio-btn.playing{animation:pulse .6s ease-in-out infinite;}
.lesson-card .deco{opacity:.9;}

/* Mapa de Mundos */
.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.world-btn{
  border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:22px;
  padding:12px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;box-shadow:0 5px 0 var(--tint-bd);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.85rem;line-height:1.1;color:var(--ink);text-align:center;
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
  animation:screen-in var(--base) ease-out both;animation-delay:calc(var(--i,0) * 30ms);
}
.world-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tint-bd);}
/* fundo ilustrado do mundo (assets/mundos-bg): cobre o cartao, o icone fica por cima; rotulo ganha faixa clara pra ler */
.world-btn[style*="background-image"]{background-size:cover;background-position:center;}
.world-btn[style*="background-image"] span,.world-btn[style*="background-image"] small{background:rgba(255,255,255,.82);border-radius:8px;padding:1px 6px;}
.world-btn[style*="background-image"] small{margin-top:-4px;}
.world-btn img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(31,42,68,.15));}
.world-btn .done{
  position:absolute;
}

/* Painel dos pais */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stat{
  border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:22px;
  padding:12px 6px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 5px 0 var(--tint-bd);
}
.stat img{width:44px;height:44px;object-fit:contain;}
.stat b{font-size:1.7rem;line-height:1.1;font-weight:800;}
.stat span,.stat small{font-size:.78rem;color:var(--ink-soft);font-weight:700;}
.words-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.word-tile{
  background:var(--surface);border:3px solid var(--border);border-radius:18px;
  padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.8rem;color:var(--ink);
}
.word-tile img{width:44px;height:44px;object-fit:contain;}
.callout{
  display:flex;gap:10px;align-items:flex-start;
  background:#EAF6EE;border:3px solid #BFE7CB;border-radius:18px;padding:12px 14px;
  font-size:.92rem;font-weight:600;color:#245A39;
}
.callout img{width:30px;height:30px;object-fit:contain;flex-shrink:0;}

/* Oferta */
.price{font-size:2.8rem;font-weight:800;text-align:center;line-height:1;color:var(--ink);}
.price small{font-size:1rem;font-weight:700;color:var(--ink-soft);font-family:'Manrope',sans-serif;}
.checklist{display:flex;flex-direction:column;gap:10px;}
.checklist .li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1rem;}
.checklist .li img{width:30px;height:30px;object-fit:contain;flex-shrink:0;}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.trust div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:.75rem;font-weight:700;color:var(--ink-soft);}
.trust img{width:52px;height:52px;object-fit:contain;}
.note{font-size:.82rem;color:var(--ink-soft);text-align:center;font-weight:600;}

/* Portão dos pais */
.big-q{font-size:2rem;font-weight:800;text-align:center;line-height:1.1;}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.key{
  min-height:64px;border-radius:20px;border:3px solid var(--border);background:var(--surface);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.6rem;color:var(--ink);cursor:pointer;
  box-shadow:0 5px 0 var(--border);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast),background var(--fast),border-color var(--fast);
}
.key:active{transform:translateY(4px);box-shadow:0 1px 0 var(--border);}
.key.wrong{background:#FFE3E3;border-color:#F08A8A;box-shadow:0 5px 0 #F08A8A;animation:shake .35s ease;}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.lock-hero{width:120px;margin:0 auto;filter:drop-shadow(0 10px 14px rgba(31,42,68,.2));}

/* Celebração */
.celebrate{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(31,42,68,.55);opacity:0;transition:opacity 220ms ease;
}
.celebrate.on{opacity:1;}
.celebrate-card{
  position:relative;width:100%;max-width:400px;background:var(--surface);border:4px solid var(--sun);border-radius:32px;
  padding:56px 22px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
  box-shadow:0 10px 0 var(--sun-d), 0 24px 40px -10px rgba(0,0,0,.4);
  transform:scale(.7);transition:transform 320ms var(--spring);
}
.celebrate.on .celebrate-card{transform:scale(1);}
.celebrate-badge{position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(31,42,68,.3));animation:pop 420ms var(--spring) both .1s;}
.celebrate-theo{width:150px;filter:drop-shadow(0 10px 14px rgba(31,42,68,.25));}
.celebrate-card h2{margin:0;font-size:1.7rem;font-weight:800;}
.celebrate-card p{margin:0 0 6px;color:var(--ink-soft);font-weight:600;}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.confetti i{
  position:absolute;top:-16px;width:12px;height:18px;border-radius:3px;opacity:.95;
  animation:fall linear forwards;
}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.7}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
.grow{flex:1;}
.center{text-align:center;}
.muted{color:var(--ink-soft);font-weight:600;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
}


/* ---------- v3: hierarquia, formulário, cartão de aula, mundos ---------- */

/* rótulo de seção: hierarquia sem peso visual de card */
.section-label{
  margin:2px 0 -6px;font-family:'Baloo 2',sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);
}

/* CTA dominante da home: uma única ação primária por tela */
.hero-cta{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:28px;
  background:var(--tint-bg);border:4px solid var(--tint-bd);
  box-shadow:0 7px 0 var(--tint-bd), inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.hero-cta:active{transform:translateY(6px);box-shadow:0 1px 0 var(--tint-bd), inset 0 2px 0 rgba(255,255,255,.55);}
.hero-cta img{width:84px;height:84px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 8px 10px rgba(31,42,68,.18));}
.hero-cta-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.hero-cta-txt b{font-family:'Baloo 2',sans-serif;font-size:1.3rem;line-height:1.1;font-weight:800;}
.hero-cta-txt small{font-size:.86rem;color:var(--ink-soft);font-weight:700;}
.hero-cta-go{
  flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;
  box-shadow:0 4px 0 var(--coral-d);
}
.next-moment{width:100%;}

/* formulário do onboarding */
.form-card{
  background:var(--surface);border:3px solid var(--border);border-radius:var(--r-card);
  padding:18px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-card);
}
.field-label{font-weight:800;font-size:.95rem;color:var(--ink);margin-top:4px;}
.chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.chip-big{
  flex-direction:column;gap:4px;padding:10px 4px;min-height:92px;justify-content:center;
  font-size:.82rem;line-height:1.1;text-align:center;
}
.chip-big img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(31,42,68,.15));}

/* cartão de aula: imagem clicável, navegação com anterior + próxima */
.word-img-btn{
  background:none;border:0;padding:0;cursor:pointer;display:block;border-radius:24px;
  transition:transform var(--fast) var(--spring);
}
.word-img-btn:active{transform:scale(.96);}
.lesson-nav{display:flex;gap:12px;align-items:stretch;}
.lesson-nav .btn{flex:1;}
.lesson-nav .round-btn{width:60px;height:auto;min-height:60px;border-radius:22px;}
.round-btn:disabled{opacity:.35;box-shadow:none;cursor:default;}
.lesson-card.slide-l{animation:slide-in-l 260ms var(--spring) both;}
.lesson-card.slide-r{animation:slide-in-r 260ms var(--spring) both;}
@keyframes slide-in-l{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes slide-in-r{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}

/* mundos já visitados */
.world-btn{position:relative;}
.world-btn.visited{border-style:solid;}
.world-badge{
  position:absolute;top:-8px;right:-6px;width:28px;height:28px;border-radius:50%;
  background:var(--sun);border:3px solid #fff;color:#6B4A00;font-size:.8rem;font-style:normal;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--sun-d);
}

/* brincar junto */
.play-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:22px 18px;}
.play-img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(31,42,68,.2));}
.play-text{margin:0;font-size:1.22rem;font-weight:700;line-height:1.35;font-family:'Baloo 2',sans-serif;}
.play-time{
  display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:var(--r-pill);
  background:#fff;border:3px solid var(--tint-bd);font-weight:800;font-size:.85rem;color:var(--ink-soft);
}

/* painel dos pais */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.row-between small{font-size:.8rem;}
.callout.warn{background:#FFF1E6;border-color:#F3B183;color:#7A2E0E;}

/* oferta */
.price-card{text-align:center;display:flex;flex-direction:column;gap:4px;}
.price-eyebrow{font-weight:800;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.price-note{margin:0;font-size:.9rem;font-weight:700;color:var(--ink-soft);}
.trust-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;font-size:.75rem;font-weight:700;color:var(--ink-soft);}

/* overlay aberto trava o fundo */
body.no-scroll{overflow:hidden;}

/* telas curtas: reduz respiro pra caber sem rolagem */
@media (max-height:680px){
  .brand-logo{height:48px;}
  .theo-lg .theo-img{width:112px;}
  .hero-cta img{width:68px;height:68px;}
}


/* ---------- v3.1: correcoes da auditoria ---------- */

/* alvo de toque minimo (44px) nos links de escape */
.link-btn{min-height:48px;padding:12px 18px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-pill);transition:background var(--fast);}
.link-btn:active{background:rgba(31,42,68,.06);}

/* card e balao ganham o mesmo degrau solido dos outros componentes clay */
.card{box-shadow:0 5px 0 var(--border), inset 0 2px 0 rgba(255,255,255,.5);}
.card.tinted{box-shadow:0 6px 0 var(--tint-bd), inset 0 2px 0 rgba(255,255,255,.5);}
.bubble{box-shadow:0 5px 0 var(--border);}

/* badge "agora": branco 12px sobre coral nao passa 4.5:1, entao vai escuro sobre amarelo */
.moment.now::after{background:var(--sun);color:#5A3E00;box-shadow:0 3px 0 var(--sun-d);}

/* teclado do portao: tecla travada precisa parecer travada */
.key:disabled{opacity:.4;box-shadow:none;cursor:default;}

/* chamada da oferta, falando com o adulto */
.offer-lead{margin:0;font-size:1.06rem;font-weight:700;color:var(--ink-soft);line-height:1.4;}

/* foco programatico do roteador no h1 nao deve desenhar anel (nao e controle) */
[tabindex="-1"]:focus{outline:none;}


/* cartao que absorve a sobra da tela, no lugar de um .grow vazio */
.grow-card{flex:1;justify-content:center;}
.price-card{gap:6px;padding:18px 16px;}
.price-card .price{margin:2px 0;}


/* ---------- Aventuras (js/screens/adventure.js) ---------- */

/* cartoes de aventura na home e no mapa */
/* fileira que rola pro lado: 3 cartoes e a ponta do quarto aparecendo (sinal de que tem mais) */
.adv-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px) / 3.25);gap:10px;min-height:150px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:2px;
  padding:10px 2px 10px;margin:-8px -2px 0;scrollbar-width:none;}   /* 10px em cima: o selo do cartao fica em top:-8px e a rolagem cortava */
.adv-row::-webkit-scrollbar{display:none;}
.adv-row .adv-card{scroll-snap-align:start;}
.adv-card{
  position:relative;border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:22px;
  padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  box-shadow:0 5px 0 var(--tint-bd);color:var(--ink);text-align:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.86rem;line-height:1.1;
  transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.adv-card:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tint-bd);}
.adv-card.locked{opacity:.62;}
.adv-card small{font-family:'Manrope',sans-serif;font-weight:700;font-size:.7rem;color:var(--ink-soft);}
.adv-cover{width:72px;height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;container-type:inline-size;}
.adv-cover img,.adv-cover .art-svg{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(31,42,68,.18));}
.adv-cover .art-block{width:62%;}
.adv-cover .art-egg{width:52%;}

/* tela da aventura */
.adv-screen{gap:10px;}
.narr{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;min-height:64px;}
.narr-theo{width:50px;height:auto;filter:drop-shadow(0 5px 8px rgba(31,42,68,.2));}
.narr-bubble{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;
  background:var(--surface);border:3px solid var(--border);border-radius:20px;padding:8px 10px 8px 14px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.2rem;line-height:1.15;color:var(--ink);text-align:left;
  box-shadow:0 4px 0 var(--border);cursor:pointer;
}
.narr-bubble::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%) rotate(45deg);
  width:16px;height:16px;background:var(--surface);border-left:3px solid var(--border);border-bottom:3px solid var(--border);border-radius:3px;
}
.narr-bubble[hidden]{display:flex;visibility:hidden;}
.narr-ico{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--sun);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 var(--sun-d);}
.narr-ico svg{width:24px;height:24px;}
.narr-bubble:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border);}

/* palco: proporcao fixa 4:5, cabe na altura da tela sem rolar */
.stage-wrap{display:flex;justify-content:center;}
.stage{
  position:relative;width:min(100%,max(280px,calc((100dvh - 250px) * .8)));aspect-ratio:4/5;
  container-type:inline-size;border-radius:28px;overflow:hidden;
  border:4px solid var(--tint-bd,var(--border));box-shadow:0 7px 0 var(--tint-bd,var(--border));
  background:#DCEFFF;touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.scene,.fx,.layer{position:absolute;inset:0;}
.scene-svg{width:100%;height:100%;display:block;}
.scene-img{width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;}
.layer[hidden]{display:none;}
.adv-nav{min-height:60px;}
.adv-nav .btn[hidden]{display:none;}
.pulse-in{animation:pop var(--base) var(--spring) both, nudge 1.6s ease-in-out .6s infinite;}
@keyframes nudge{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

/* objeto no palco: centro em left/top, largura em % do palco (cqw) */
.prop{
  position:absolute;width:calc(var(--s) * 1cqw);padding:0;border:0;background:none;cursor:pointer;
  transform:translate(-50%,-50%) translate(var(--dx,0px),var(--dy,0px)) scale(var(--k,1));
  transition:transform 260ms var(--spring),opacity 260ms ease;z-index:2;
  -webkit-touch-callout:none;
}
.prop.fixed{cursor:default;pointer-events:none;z-index:1;}
.prop[hidden]{display:none;}
.prop-in{display:block;width:100%;}
.prop-in img,.prop-in .art-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(31,42,68,.22));pointer-events:none;}
.prop.hue .prop-in img{filter:hue-rotate(var(--hue)) saturate(1.1) drop-shadow(0 6px 8px rgba(31,42,68,.22));}
.prop:focus-visible{outline:3px solid var(--sky-blue);outline-offset:2px;border-radius:14px;}
.prop.draggable{touch-action:none;cursor:grab;}
.prop.dragging{transition:none;z-index:40;cursor:grabbing;--k:1.12;}
.prop.dragging .prop-in img{filter:drop-shadow(0 14px 14px rgba(31,42,68,.3));}
.prop.returning{transition:transform 300ms var(--spring);}
.prop.snap{transition:none!important;}
.prop.flying{transition:transform 520ms cubic-bezier(.4,.1,.3,1),opacity 520ms ease .1s;z-index:30;}
.prop.gone{opacity:0;pointer-events:none;}
.prop.settled{pointer-events:none;}
.prop.sel .prop-in{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 6px var(--sun));}
.prop.sel{--k:1.1;}
.prop.hint .prop-in{animation:hint-glow 1.1s ease-in-out infinite;}
@keyframes hint-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(249,196,64,0))}50%{filter:drop-shadow(0 0 10px rgba(249,196,64,1)) drop-shadow(0 0 4px #fff)}}

/* reacoes (na camada de dentro: o transform de fora e posicao/arrasto) */
.prop.hop .prop-in{animation:hop 600ms var(--spring);}
@keyframes hop{0%{transform:none}35%{transform:translateY(-22%) scale(1.06)}70%{transform:translateY(0) scale(.97,1.03)}100%{transform:none}}
.prop.pop .prop-in{animation:pop 420ms var(--spring) both;}
.prop.shake .prop-in{animation:shake .4s ease;}
.prop.erupt .prop-in{animation:erupt 700ms ease;transform-origin:50% 100%;}
@keyframes erupt{0%,100%{transform:none;filter:none}20%{transform:scale(1.06,.94)}45%{transform:scale(.96,1.1);filter:brightness(1.25) saturate(1.3)}70%{transform:translate(-2%,0) scale(1.02)}85%{transform:translate(2%,0)}}
.prop.gulp .prop-in{animation:gulp 520ms var(--spring);}
@keyframes gulp{0%,100%{transform:none}40%{transform:scale(1.08,.94)}}
.prop.munch .prop-in{animation:munch 700ms ease;}
@keyframes munch{0%,100%{transform:none}20%,60%{transform:scale(1.04,.96) rotate(-2deg)}40%,80%{transform:scale(.97,1.03) rotate(2deg)}}
.prop.anim-rock .prop-in{animation:rock 3.4s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes rock{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-3%)}}
.prop.anim-swim .prop-in{animation:swim 2.6s ease-in-out infinite;}
@keyframes swim{0%,100%{transform:translate(-4%,0)}50%{transform:translate(4%,-5%)}}
.prop.run-off{transition:transform 1.6s cubic-bezier(.5,0,.7,.4);--dx:140cqw;}
.prop.off-up,.prop.fly-off{transition:transform 1.5s cubic-bezier(.5,0,.8,.3),opacity .4s ease 1.2s;--dy:-150cqw;pointer-events:none;}
.prop.off-left{transition:transform 1.6s cubic-bezier(.5,0,.7,.4);--dx:-140cqw;}
.prop.off-right{transition:transform 1.6s cubic-bezier(.5,0,.7,.4);--dx:140cqw;}
.prop.popped{transition:transform 260ms ease-in,opacity 260ms ease-in;--k:1.5;opacity:0;pointer-events:none;}
.prop.landed{pointer-events:none;}
/* destino do arrastar (princesa fixa, filhote ja pousado): aceita o toque do caminho sem arrasto */
.prop.alvo:not(.gone){pointer-events:auto;cursor:pointer;}
.prop.spin .prop-in{animation:spin-once 700ms var(--spring);}
@keyframes spin-once{to{transform:rotate(360deg)}}
.prop.wiggle .prop-in{animation:munch 700ms ease;}
.prop.glow .prop-in{animation:glow-once 900ms ease;}
@keyframes glow-once{0%,100%{filter:none}50%{filter:brightness(1.35) drop-shadow(0 0 12px #FFE58A)}}
.prop.grow .prop-in{animation:grow-once 700ms var(--spring);}
@keyframes grow-once{0%{transform:scale(1)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.prop.swim-by .prop-in{animation:swim 1.2s ease-in-out 2;}
.prop.run-off .prop-in{animation:hop 400ms linear infinite;}
.prop.is-open .prop-in{transform:perspective(160px) rotateY(-62deg);transform-origin:8% 50%;transition:transform 400ms var(--spring);}
.prop .prop-in{transition:transform 400ms var(--spring);}

/* brilho de acerto */
.spark{position:absolute;width:18cqw;height:18cqw;transform:translate(-50%,-50%);pointer-events:none;z-index:45;animation:spark 700ms ease-out forwards;}
@keyframes spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(40deg)}}

/* particulas do cenario: chuva, bolhas, estrelas, confete, neve, brilho */
.fx{pointer-events:none;z-index:5;overflow:hidden;}
.fx i{position:absolute;top:-10%;width:.9cqw;height:5cqw;border-radius:1cqw;background:linear-gradient(transparent,rgba(210,232,255,.95));animation:drop linear infinite;}
@keyframes drop{to{transform:translateY(125cqw)}}
.fx[data-fx="bubbles"] i{top:auto!important;bottom:-6%;width:3cqw;height:3cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,rgba(255,255,255,.25) 40%,rgba(255,255,255,.08) 70%);border:.35cqw solid rgba(255,255,255,.55);animation:bubble ease-in infinite;}
.fx[data-fx="bubbles"] i:nth-child(3n){width:1.8cqw;height:1.8cqw;}
@keyframes bubble{0%{transform:translateY(0) translateX(0);opacity:0}15%{opacity:1}100%{transform:translateY(-130cqw) translateX(3cqw);opacity:.2}}
.fx[data-fx="stars"] i,.fx[data-fx="sparkle"] i{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#FFF6C8;box-shadow:0 0 1.6cqw #FFE58A;animation:twinkle ease-in-out infinite;}
.fx[data-fx="stars"] i:nth-child(2n){width:1cqw;height:1cqw;}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.fx[data-fx="confetti"] i,.fx[data-fx="snow"] i{top:-6%!important;width:1.8cqw;height:2.6cqw;border-radius:.4cqw;animation:fall-fx linear infinite;}
.fx[data-fx="confetti"] i{background:hsl(calc(var(--i) * 60) 85% 60%);}
.fx[data-fx="snow"] i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#fff;opacity:.9;}
@keyframes fall-fx{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(135cqw) rotate(540deg)}}
/* no atraso a particula fica no primeiro quadro (bolha transparente), nao parada e opaca */
.fx[data-fx] i{animation-fill-mode:backwards;}
@media (prefers-reduced-motion: reduce){.fx i{animation:none!important;opacity:.6;}}

/* arte desenhada no app: ovo, bloco, pilha de blocos */
.art-svg{display:block;width:100%;height:auto;}
.art-egg{
  display:block;width:100%;aspect-ratio:4/5;margin:0 auto;
  border-radius:50% 50% 48% 48% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 34% 30%,#FFFFFF 0 9%,transparent 22%),
    radial-gradient(circle at 62% 58%,#D8B98C 0 4%,transparent 5%),
    radial-gradient(circle at 40% 70%,#D8B98C 0 3%,transparent 4%),
    radial-gradient(circle at 70% 34%,#D8B98C 0 3%,transparent 4%),
    radial-gradient(circle at 45% 40%,#FFF8EA,#F3E2C3 60%,#DCC196);
  box-shadow:inset -6px -8px 0 rgba(160,120,70,.18);
  filter:drop-shadow(0 6px 7px rgba(31,42,68,.22));
}
.art-bubble{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 12%,rgba(255,255,255,.35) 26%,rgba(190,235,255,.18) 60%,rgba(120,200,255,.35) 100%);border:.5cqw solid rgba(255,255,255,.8);box-shadow:inset -.8cqw -.8cqw 1.4cqw rgba(120,190,255,.35);}
.art-block{
  display:block;width:100%;aspect-ratio:1;border-radius:18%;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 45%,color-mix(in srgb,var(--c) 78%,#000) 100%);
  box-shadow:inset 0 -.9cqw 0 rgba(0,0,0,.18),inset 0 .8cqw 0 rgba(255,255,255,.35),0 .8cqw 1.4cqw rgba(31,42,68,.25);
}
.prop .art-block{box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),inset 0 5px 0 rgba(255,255,255,.35),0 5px 8px rgba(31,42,68,.25);}
.art-stack{display:grid;grid-template-columns:1fr 1fr;gap:4%;width:88%;}
.art-stack .art-block:first-child{grid-column:1 / span 2;width:50%;justify-self:center;}

/* paleta e encaixes do Construir */
.prop.palette{z-index:6;}
.slot{
  position:absolute;width:calc(var(--s) * 1cqw);aspect-ratio:var(--ar,1);transform:translate(-50%,-50%);
  border:.8cqw dashed rgba(31,42,68,.45);border-radius:18%;background:rgba(255,255,255,.6);
  cursor:pointer;padding:0;z-index:4;animation:slot-pulse 1.4s ease-in-out infinite;
}
.slot[hidden]{display:none;}
.slot.hint{background:color-mix(in srgb,var(--c,#fff) 55%,transparent);border-color:#fff;}
@keyframes slot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(249,196,64,.8)}50%{box-shadow:0 0 0 1.8cqw rgba(249,196,64,0)}}
.prop.placed{z-index:3;}

/* contador do "ache os escondidos" */
.spy-count{position:absolute;top:2.5cqw;left:50%;transform:translateX(-50%);display:flex;gap:2cqw;z-index:8;
  background:rgba(255,255,255,.82);border-radius:999px;padding:1.4cqw 3cqw;}
.spy-count[hidden]{display:none;}
.spy-slot{width:8cqw;display:block;opacity:.3;filter:grayscale(1);transition:opacity 300ms,filter 300ms,transform 300ms var(--spring);}
.spy-slot.on{opacity:1;filter:none;transform:scale(1.15);}

/* ---------- Kids TV (js/screens/kids-tv.js) ---------- */
.tv-screen{gap:12px;}
.tv-home-btn img,.tv-quick-btn img{width:56px;height:56px;}
/* cartao de video 16:9: assunto, titulo, duracao, fonte discreta */
.tv-card{
  display:flex;flex-direction:column;gap:0;text-align:left;cursor:pointer;color:var(--ink);
  border:3px solid var(--tint-bd);background:var(--surface);border-radius:var(--r-card);padding:0;overflow:hidden;
  box-shadow:0 5px 0 var(--tint-bd);transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.tv-card:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tint-bd);}
.tv-thumb{position:relative;display:block;width:100%;aspect-ratio:16/9;background:var(--tint-bg);overflow:hidden;}
.tv-thumb img{width:100%;height:100%;object-fit:cover;}
.tv-seen{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--mint-soft);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-style:normal;box-shadow:0 2px 0 var(--mint-d);}
.tv-card-txt{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;min-width:0;}
.tv-card-txt b{font-family:'Baloo 2',sans-serif;font-size:1rem;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tv-card-txt small{font-size:.74rem;color:var(--ink-soft);font-weight:700;}
.tv-cat{text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--sky-blue);font-weight:800;}
.tv-src{opacity:.8;}
.tv-hero .tv-card{width:100%;}
.tv-hero .tv-card-txt b{font-size:1.15rem;}
/* fileira que rola pro lado, finita, sem barra */
.tv-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(72%,260px);gap:10px;overflow-x:auto;
  overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:-4px -2px 0;scrollbar-width:none;}
.tv-row::-webkit-scrollbar{display:none;}
.tv-row .tv-card{scroll-snap-align:start;}
.tv-list{display:flex;flex-direction:column;gap:12px;}
/* cartao vertical 9:16 (Shorts aprovados) */
.tv-card-v .tv-thumb{aspect-ratio:9/16;}
.tv-row .tv-card-v{grid-auto-columns:min(44%,160px);}
/* grade de assuntos: a crianca escolhe assunto, nunca canal */
.tv-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.tv-cat-btn{
  border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:var(--r-card);padding:12px 6px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:var(--ink);
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:.92rem;line-height:1.1;text-align:center;
  box-shadow:0 5px 0 var(--tint-bd);transition:transform var(--fast) var(--spring),box-shadow var(--fast);
}
.tv-cat-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--tint-bd);}
.tv-cat-btn img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(31,42,68,.15));}
.tv-theme-head{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink-soft);}
.tv-theme-head img{width:64px;height:64px;object-fit:contain;}
.tv-legal{font-size:.72rem;color:var(--ink-soft);text-align:center;line-height:1.4;margin:4px 0 0;}
/* player: 16:9 responsivo, controles e marca do YouTube intocados */
.tv-title{font-size:1.2rem;line-height:1.15;margin:0;text-align:center;}
.tv-frame{position:relative;width:100%;aspect-ratio:16/9;background:#101522;border-radius:18px;overflow:hidden;
  border:3px solid var(--border);transition:max-width var(--base),margin var(--base);}
.tv-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.tv-frame-v{aspect-ratio:9/16;max-width:min(62vw,300px);margin:0 auto;}
.tv-frame-min{max-width:46%;margin:0 auto;}
.tv-attr{font-size:.82rem;color:var(--ink-soft);text-align:center;margin:0;line-height:1.35;}
.tv-attr small{font-size:.7rem;display:block;margin-top:2px;}
.tv-attr a{color:var(--sky-blue);font-weight:700;}
.tv-broken{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#fff;text-align:center;font-weight:700;padding:16px;}
.tv-broken p{margin:0;}
/* atividade nativa depois do video: pergunta grande, 3 figuras, sem pontuacao */
.tv-activity{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.tv-ask{font-family:'Baloo 2',sans-serif;font-size:1.5rem;font-weight:800;text-align:center;margin:0;cursor:pointer;line-height:1.15;}
.tv-ask b{color:var(--coral);}
.tv-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.tv-opt{
  border:3px solid var(--border);background:var(--surface);border-radius:var(--r-card);padding:10px;cursor:pointer;
  box-shadow:0 5px 0 var(--border);aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  transition:transform var(--fast) var(--spring),box-shadow var(--fast),border-color var(--fast);
}
.tv-opt img{width:100%;height:100%;object-fit:contain;}
.tv-opt:active{transform:translateY(4px);box-shadow:0 1px 0 var(--border);}
.tv-opt.ok{border-color:var(--mint-soft);box-shadow:0 5px 0 var(--mint-d);background:#E6F7EA;animation:pop var(--base) var(--spring) both;}
.tv-opt.nope{animation:tv-shake 420ms ease both;}
.tv-opt.glow{border-color:var(--sun);box-shadow:0 0 0 6px rgba(249,196,64,.45),0 5px 0 var(--sun-d);}
.tv-opt:disabled{cursor:default;}
@keyframes tv-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
/* Quick English proprio: moldura vertical 9:16 no centro, largura limitada */
.tv-count{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--ink-soft);text-align:right;}
.tv-vert{
  width:100%;max-width:340px;margin:0 auto;aspect-ratio:9/16;max-height:calc(100dvh - 140px);
  border:3px solid var(--tint-bd);background:var(--tint-bg);border-radius:var(--r-card);box-shadow:0 6px 0 var(--tint-bd);
  padding:14px;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.tv-slide{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.tv-slide-img{background:none;border:0;padding:0;cursor:pointer;}
.tv-slide-img img{width:min(56vw,220px);height:min(56vw,220px);object-fit:contain;filter:drop-shadow(0 14px 20px rgba(31,42,68,.2));animation:pop var(--base) var(--spring) both;}
.tv-slide .word{font-size:2.2rem;}
.tv-slide .tv-activity{width:100%;}
.tv-note{text-align:left;margin:8px 0 0;}
.sel{min-height:44px;border:3px solid var(--border);border-radius:14px;background:var(--surface);font:inherit;font-weight:700;padding:6px 10px;color:var(--ink);}
@media (prefers-reduced-motion:reduce){.tv-opt.nope,.tv-opt.ok,.tv-slide-img img{animation:none;}}

/* Termos e privacidade (js/screens/termos.js): texto corrido de adulto */
.legal{gap:6px;}
.legal h2{font-size:1.05rem;margin:14px 0 2px;}
.legal p{margin:0 0 6px;font-size:.92rem;line-height:1.5;color:var(--ink-soft);}
.legal a{color:var(--sky-blue);font-weight:700;}
.tv-ear{display:inline-flex;vertical-align:middle;color:var(--coral);}
.tv-ear svg{width:28px;height:28px;}
#watchRow .tv-row{grid-auto-columns:min(60%,220px);}

/* ---------- Curtinhos em sequencia (js/screens/kids-tv-feed.js) ---------- */
/* tela cheia, fora do fluxo do .screen: quem rola e o container snap, nao o body */
.tvf-screen{position:absolute;inset:0;height:100dvh;background:var(--sky);}
.tvf-feed{
  height:100%;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.tvf-feed::-webkit-scrollbar{display:none;}
.tvf-page{
  height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;gap:10px;
  padding:max(14px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
}
.tvf-top{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:8px;}
.tvf-indicator{display:flex;flex-direction:column;align-items:center;gap:2px;}
.tvf-dots{display:flex;gap:4px;}
.tvf-dot{width:6px;height:6px;border-radius:50%;background:var(--border);}
.tvf-dot.on{background:var(--coral-soft);}
.tvf-indicator small{font-size:.72rem;font-weight:800;color:var(--ink-soft);}
.tvf-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;}
.tvf-frame{
  position:relative;width:min(78vw,300px);aspect-ratio:9/16;max-height:100%;
  background:#101522;border-radius:22px;overflow:hidden;border:3px solid var(--border);
  box-shadow:0 6px 0 var(--tint-bd,var(--border));transition:width var(--base);
}
.tvf-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.tvf-frame.tvf-frame-done{width:min(50vw,200px);}
.tvf-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tvf-play{
  position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--coral);border:0;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px -4px rgba(0,0,0,.4);cursor:pointer;
}
.tvf-play svg{margin-left:4px;}
.tvf-meta{text-align:center;display:flex;flex-direction:column;gap:2px;}
.tvf-meta b{font-family:'Baloo 2',sans-serif;font-size:1.02rem;line-height:1.2;}
.tvf-meta small{font-size:.76rem;color:var(--ink-soft);font-weight:700;}
.tvf-activity{flex:0 0 auto;}
.tvf-activity .tv-opts{grid-template-columns:repeat(3,1fr);}
.tvf-arrows{position:absolute;right:8px;bottom:max(90px,calc(env(safe-area-inset-bottom) + 90px));display:flex;flex-direction:column;gap:10px;z-index:3;}
.tvf-arrow{
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.88);border:3px solid var(--border);
  box-shadow:0 4px 0 var(--border);font-size:1.1rem;line-height:1;color:var(--ink);cursor:pointer;
}
.tvf-arrow:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border);}
.tvf-end{align-items:center;justify-content:center;}
.tvf-end-card{
  width:100%;max-width:320px;margin:auto;text-align:center;background:var(--surface);
  border:3px solid var(--border);border-radius:var(--r-card);box-shadow:0 6px 0 var(--border);
  padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.tvf-end-card h2{margin:4px 0 0;font-size:1.3rem;}
.tvf-end-card p{margin:0 0 8px;color:var(--ink-soft);}

/* Faixa 9 a 10 (leitor): 4 idades numa linha no cadastro */
.chip-row.idades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.idades .chip{justify-content:center;padding:8px 4px;white-space:nowrap;}

/* Cartao da aula com frase (9 a 10). A figura encolhe pra frase caber sem rolar */
.lesson-card.leitor{gap:10px;}
.lesson-card.leitor .word-img{width:min(52vw,200px);height:min(52vw,200px);}
.lesson-card.leitor .word{font-size:2.3rem;}
.word-frase{
  border:none;cursor:pointer;max-width:100%;
  background:rgba(255,255,255,.78);border-radius:16px;padding:8px 14px;
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.35;
  color:var(--ink);text-align:center;
}
.word-frase mark{background:none;color:var(--coral-d);font-weight:800;box-shadow:inset 0 -.38em 0 rgba(249,196,64,.5);}
.word-frase[hidden]{display:none;}
.lesson-nav[hidden],.stage-wrap[hidden]{display:none;}

/* Monte a palavra (aula e aventura, 9 a 10) */
.spell-wrap{flex:1;display:flex;flex-direction:column;}
.spell{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:20px 14px 26px;background:var(--surface);border:4px solid var(--border);border-radius:32px;
  box-shadow:0 8px 0 var(--border), var(--shadow-card);
  animation:screen-in var(--base) ease-out both;
}
.spell-title{margin:0;font-family:'Baloo 2','Segoe UI Rounded',system-ui,sans-serif;font-weight:800;font-size:1.3rem;line-height:1.1;color:var(--ink);}
.spell-img{background:none;border:none;padding:0;cursor:pointer;}
.spell-img img{width:min(40vw,150px);height:min(40vw,150px);object-fit:contain;filter:drop-shadow(0 12px 16px rgba(31,42,68,.2));}
.spell-slots{display:flex;justify-content:center;gap:5px;width:100%;}
.spell-slot{
  flex:1 1 0;min-width:0;max-width:42px;height:56px;
  display:flex;align-items:flex-end;justify-content:center;
  border-bottom:4px solid var(--border);
  font-family:'Baloo 2','Segoe UI Rounded',system-ui,sans-serif;font-weight:800;font-size:clamp(1.4rem,7vw,2.1rem);line-height:1.1;color:var(--ink);
}
.spell-slot.on{border-color:var(--sky-blue);animation:pop var(--base) var(--spring) both;}
.spell-gap{flex:0 0 14px;}
.spell.done .spell-slot{border-color:var(--mint-soft);color:var(--mint);}
.spell.done .spell-img img{animation:pop 420ms var(--spring) both;}
.spell-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:340px;}
.spell-tile{
  width:56px;height:56px;border-radius:16px;cursor:pointer;
  border:3px solid var(--border);background:var(--surface);box-shadow:0 5px 0 var(--border);
  font-family:'Baloo 2','Segoe UI Rounded',system-ui,sans-serif;font-weight:800;font-size:1.7rem;line-height:1;color:var(--ink);
  transition:transform var(--fast) var(--spring),box-shadow var(--fast),border-color var(--fast);
}
.spell-tile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--border);}
.spell-tile:disabled{visibility:hidden;}
.spell-tile.wrong{animation:shake .35s ease;}
.spell-tile.hint{border-color:var(--sun-d);background:#FFF6D8;box-shadow:0 5px 0 var(--sun-d),0 0 0 5px rgba(249,196,64,.35);animation:pulse .9s ease-in-out infinite;}

/* Instalar na tela inicial (js/instalar.js): passo a passo do iPhone/Android */
.passos{margin:8px 0 2px;padding-left:22px;display:grid;gap:8px;font-size:15px;line-height:1.45;text-align:left}
.passos b{font-weight:800}
.ico-inline{width:18px;height:18px;vertical-align:-3px;display:inline-block}
.instalar-card .btn{margin-top:10px}
#passosInstalar{padding:0 4px 10px}