/* ============================================================
   KIDS LAST GAME — Animações, ilustrações e refinamentos finais
   ============================================================ */

/* ---------- Ilustrações autorais ---------- */
.art-svg, .art-img{ display:block; max-width:100%; height:auto; filter:drop-shadow(0 10px 8px rgba(20,80,110,.18)); }
.art-img{ object-fit:contain; margin:0 auto; }
.toq-animal .art-img{ width:82%; }
.kcard-ill .art-img{ width:84px; height:84px; }
.mem-front .art-img{ width:80%; }
.enc-animal .art-img{ width:clamp(42px,9vw,74px); }
.bicho .art-img{ width:96px; height:96px; }
.art-emoji{ display:inline-block; line-height:1; filter:drop-shadow(0 6px 6px rgba(20,80,110,.2)); }
.son-opt-emoji .art-svg, .animal-chip-emoji .art-svg{ margin:0 auto; }
.toq-animal .art-svg{ width:82%; height:auto; }
.kcard-ill .art-svg{ width:84px; height:84px; margin:0 auto; }
/* ilustrações dentro dos jogos */
.mem-front .art-svg{ width:80%; height:auto; }
.mem-emoji{ font-size:clamp(34px,9vw,56px); }
.enc-animal{ line-height:0; }
.enc-animal .art-svg{ width:clamp(42px,9vw,74px); height:auto; }
.enc-target .art-svg{ width:42px; height:42px; vertical-align:middle; display:inline-block; }
.color-thumb .ct-emoji .art-svg{ width:66px; height:66px; }

/* ---------- Vitrine de bichinhos (home) ---------- */
.bicho-strip{
  display:flex; gap:14px; overflow-x:auto; padding:8px 4px 16px; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.bicho-strip::-webkit-scrollbar{ display:none; }
.bicho{
  flex:0 0 auto; width:124px; scroll-snap-align:center; background:#fff; border:none; cursor:pointer;
  border-radius:26px; padding:12px 8px 14px; box-shadow:var(--sh, 0 16px 36px rgba(20,80,110,.16));
  display:flex; flex-direction:column; align-items:center; gap:4px; transition:transform .15s var(--ease,ease);
}
.bicho:hover{ transform:translateY(-6px); }
.bicho span{ font-weight:800; font-size:15px; color:var(--ink,#2b4a57); }
.bicho .art-svg{ width:96px; height:96px; }

/* pulinho ao tocar */
.boing{ animation:boing .5s var(--ease,cubic-bezier(.34,1.56,.64,1)); }
@keyframes boing{ 0%{transform:scale(1)} 30%{transform:scale(1.12) rotate(-3deg)} 60%{transform:scale(.94) rotate(2deg)} 100%{transform:scale(1)} }

/* ---------- Entrada das telas (stagger suave) ---------- */
@keyframes rise{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
#screen .khero{ animation:rise .5s var(--ease,ease) both; }
#screen .ksec{ animation:rise .55s var(--ease,ease) both; }
#screen .ksec:nth-of-type(1){ animation-delay:.04s }
#screen .ksec:nth-of-type(2){ animation-delay:.10s }
#screen .ksec:nth-of-type(3){ animation-delay:.16s }
#screen .ksec:nth-of-type(4){ animation-delay:.22s }
#screen .ksec:nth-of-type(5){ animation-delay:.28s }

@keyframes cardpop{ from{opacity:0; transform:scale(.92) translateY(10px)} to{opacity:1; transform:none} }
.kgame-grid .kcard{ animation:cardpop .4s var(--ease,ease) both; }
.kgame-grid .kcard:nth-child(2){animation-delay:.04s}
.kgame-grid .kcard:nth-child(3){animation-delay:.08s}
.kgame-grid .kcard:nth-child(4){animation-delay:.12s}
.kgame-grid .kcard:nth-child(5){animation-delay:.16s}
.kgame-grid .kcard:nth-child(6){animation-delay:.20s}
.kgame-grid .kcard:nth-child(n+7){animation-delay:.24s}

/* ---------- Micro-interações ---------- */
.kcard{ transition:transform .16s var(--ease,ease), box-shadow .2s; }
.kcard:active{ transform:scale(.98); }
.age-card, .cat-chip, .btn-xl, .icon-btn, .navbtn{ -webkit-tap-highlight-color:transparent; }
.intro-card{ animation:rise .5s var(--ease,ease) both; }

/* brilho ambiente sutil no topo */
.khero::after{
  content:""; position:absolute; top:-40%; left:50%; width:60%; height:80%;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,247,200,.55), transparent 70%);
}

/* respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce){
  #screen .khero, #screen .ksec, .kgame-grid .kcard, .intro-card, .boing{ animation:none !important; }
}

@media(max-width:560px){
  .bicho{ width:108px; } .bicho .art-svg{ width:84px; height:84px; }
}