/* ============================================================
   KIDS LAST GAME — Design System (camada principal)
   "Mundo dos Bichinhos": fofo, limpo, premium e mobile-first.
   Carregado por último: define a linguagem visual e sobrescreve.
   ============================================================ */
:root{
  /* paleta refinada */
  --sky:#5cc4f2; --sky-deep:#1295d8; --mint:#5fded0; --mint-deep:#0f9e8b;
  --banana:#ffd95e; --banana-deep:#f0b429; --peach:#ffb38a; --peach-deep:#f97a3d;
  --pink:#ffaecb; --pink-deep:#ec5f9b; --grape:#b9a7ff; --grape-deep:#7c5cff;
  --ice:#f3fbff; --card:#ffffff; --ink:#2b4a57; --ink-soft:#46636e;
  /* mapeia nomes antigos p/ não quebrar jogos */
  --azul:var(--sky); --azul-d:var(--sky-deep); --verde:var(--mint); --verde-d:var(--mint-deep);
  --amarelo:var(--banana); --laranja:var(--peach); --rosa:var(--pink); --roxo:var(--grape); --tinta:var(--ink);
  /* espaçamento / raio / sombra / motion */
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px;
  --r-sm:16px; --r-md:24px; --r-lg:34px; --r-xl:44px; --raio:var(--r-md);
  --sh-sm:0 6px 16px rgba(20,80,110,.12);
  --sh:0 16px 36px rgba(20,80,110,.16);
  --sh-lg:0 28px 64px rgba(20,80,110,.24);
  --sombra:var(--sh);
  --fonte:'Fredoka','Baloo 2',system-ui,sans-serif;
  --ease:cubic-bezier(.34,1.56,.64,1);
}

body{ background:
  radial-gradient(120% 70% at 50% -10%, #d8f3ff 0%, transparent 50%),
  linear-gradient(180deg, var(--ice) 0%, #eefaf3 100%);
  color:var(--ink); font-family:var(--fonte);
}

/* ---------- Botões enormes (dedinhos pequenos) ---------- */
.btn-xl{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:68px; padding:16px 30px; font-size:22px; font-weight:700; color:#fff;
  border:none; border-radius:999px; cursor:pointer; font-family:var(--fonte);
  transition:transform .14s var(--ease), box-shadow .2s;
}
.btn-xl:active{ transform:translateY(3px) scale(.98); }
.btn-sun{ background:linear-gradient(180deg,#ffe07a,#f5b62b); color:#6b4906;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 8px 0 #dc9a16,0 16px 26px rgba(220,150,20,.4);}
.btn-sun:active{ box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 #dc9a16;}
.btn-mint{ background:linear-gradient(180deg,#7fe9dc,#22c2ad); color:#054b41;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 8px 0 #0f9e8b,0 16px 26px rgba(15,158,139,.35);}
.btn-sky{ background:linear-gradient(180deg,#7fd3f8,#1aa3e0); color:#06384f;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 8px 0 #1280bb,0 16px 26px rgba(18,128,187,.35);}
.btn-ghost2{ background:#fff; color:var(--sky-deep);
  box-shadow:var(--sh-sm), inset 0 0 0 3px #e3f3fb; }
.btn-back-xl{
  width:62px; height:62px; border-radius:50%; font-size:28px; background:#fff; color:var(--sky-deep);
  display:grid; place-items:center; box-shadow:var(--sh-sm), inset 0 0 0 3px #e3f3fb; flex:none;
}
.btn-back-xl:active{ transform:scale(.92); }

/* ---------- Topbar refinada ---------- */
#topbar{ background:rgba(255,255,255,.9); box-shadow:0 6px 22px rgba(20,80,110,.1); }
.brand-mark img, .brand img{ width:48px; height:48px; }
.brand-text b{ color:var(--sky-deep); }
.brand-text i{ color:var(--mint-deep); }
.navbtn{ border-radius:18px; }
.navbtn.active{ background:var(--sky); box-shadow:var(--sh-sm); }
.icon-btn{ width:54px; height:54px; }

/* ---------- Títulos de seção ---------- */
.ksec-title{ text-align:center; font-size:clamp(22px,5vw,32px); color:var(--ink); margin:0 0 var(--s3); }
.ksec-title small{ display:block; font-size:15px; color:var(--ink-soft); font-weight:600; margin-top:4px; }
.ksec{ margin:0 auto var(--s5); max-width:1120px; }

/* ---------- HERO ---------- */
.khero{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s4); align-items:center;
  max-width:1120px; margin:0 auto var(--s4); padding:var(--s3) var(--s2);
  background:linear-gradient(180deg,#d6f1ff,transparent); border-radius:var(--r-xl); overflow:hidden; }
.khero-badge{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--mint-deep);
  font-weight:800; font-size:15px; padding:8px 16px; border-radius:999px; box-shadow:var(--sh-sm); }
.khero h1{ font-size:clamp(30px,6vw,52px); line-height:1.05; margin:var(--s2) 0; color:var(--ink); }
.khero h1 span{ color:var(--sky-deep); }
.khero-sub{ font-size:clamp(16px,3.2vw,20px); color:var(--ink-soft); font-weight:600; margin-bottom:var(--s3); }
.khero-cta{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.khero-copy{ min-width:0; }
.khero h1{ overflow-wrap:normal; }
.khero-cta .btn-xl{ max-width:100%; }
.khero-art{ position:relative; min-height:300px; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); }
.khero-scene{ position:absolute; inset:0; }
.khero-scene svg{ width:100%; height:100%; display:block; }
.khero-mascots{ position:absolute; left:0; right:0; bottom:5%; display:flex; align-items:flex-end; justify-content:center; gap:1%; }
.khero-mascots .km{ width:42%; max-width:190px; filter:drop-shadow(0 14px 10px rgba(20,80,110,.28)); animation:bob 4s ease-in-out infinite; }
.khero-mascots .km2{ width:38%; max-width:172px; animation-delay:-2s; }
@keyframes bob{50%{transform:translateY(-12px)}}

/* ---------- Seletor de idade ---------- */
.age-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); max-width:760px; margin:0 auto; }
.age-card{ background:var(--card); border:4px solid transparent; border-radius:var(--r-lg); padding:var(--s3) var(--s2);
  text-align:center; box-shadow:var(--sh); cursor:pointer; transition:transform .15s var(--ease); }
.age-card:active{ transform:scale(.97); }
.age-card .ae{ font-size:56px; display:block; filter:drop-shadow(0 6px 6px rgba(20,80,110,.2)); }
.age-card b{ display:block; font-size:21px; color:var(--ink); margin-top:6px; }
.age-card span{ font-size:14px; color:var(--ink-soft); font-weight:600; }
.age-card.sel{ border-color:var(--banana-deep); box-shadow:0 14px 30px rgba(240,180,40,.4); }
.age-card:nth-child(1){ border-bottom:6px solid #d9f4ff; } .age-card:nth-child(2){ border-bottom:6px solid #dafaf0; }
.age-card:nth-child(3){ border-bottom:6px solid #ffe9d6; }

/* ---------- Categorias ---------- */
.cat-row{ display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:center; }
.cat-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:999px;
  padding:12px 20px; font-weight:800; font-size:17px; color:var(--ink); box-shadow:var(--sh-sm);
  border:3px solid transparent; cursor:pointer; transition:transform .14s var(--ease); }
.cat-chip:active{ transform:scale(.95); }
.cat-chip .ce{ font-size:24px; }
.cat-chip.sel{ border-color:var(--sky); background:#eaf8ff; color:var(--sky-deep); }

/* ---------- Cards de jogo premium ---------- */
.kgame-grid{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.kcard{ position:relative; background:var(--card); border-radius:var(--r-lg); padding:var(--s3) var(--s2) var(--s2);
  text-align:center; box-shadow:var(--sh); transition:transform .16s var(--ease); overflow:hidden; }
.kcard::before{ content:""; position:absolute; top:0; left:0; right:0; height:8px; background:var(--sky); }
.kcard.cat-ouvir::before{background:var(--grape)} .kcard.cat-colorir::before{background:var(--pink)}
.kcard.cat-memoria::before{background:var(--sky)} .kcard.cat-montar::before{background:var(--mint)}
.kcard.cat-aprender::before{background:var(--banana-deep)} .kcard.cat-tocar::before{background:var(--peach)}
.kcard.cat-sentir::before{background:#ff7a9c} .kcard.cat-formas::before{background:#22c2ad}
.kcard:hover{ transform:translateY(-8px); }
.kcard-ill{ font-size:clamp(64px,14vw,84px); line-height:1; filter:drop-shadow(0 8px 8px rgba(20,80,110,.22));
  display:flex; align-items:center; justify-content:center; height:106px; }
.kcard-ill .game-ico{ width:102px; height:102px; }
.intro-ill .game-ico{ width:clamp(124px,32vw,164px); height:clamp(124px,32vw,164px); }
@media(max-width:560px){ .kcard-ill{ height:86px; } .kcard-ill .game-ico{ width:82px; height:82px; } }
.kcard h3{ font-size:20px; margin:8px 0 4px; color:var(--ink); }
.kcard-meta{ display:inline-flex; gap:6px; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:12px; }
.kcard .btn-play2{ width:100%; min-height:58px; font-size:20px; }
.age-badge{ position:absolute; top:14px; left:14px; background:var(--banana); color:#6b4906; font-weight:900;
  font-size:13px; padding:5px 11px; border-radius:999px; box-shadow:var(--sh-sm); z-index:2; }
.kcard-fav{ position:absolute; top:10px; right:10px; width:46px; height:46px; font-size:26px; color:var(--banana-deep);
  background:rgba(255,255,255,.7); border-radius:50%; z-index:2; cursor:pointer; }
.kcard-fav.is-fav{ animation:pop-in .3s; }

/* ---------- Tela inicial de cada jogo ---------- */
.game-intro{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:var(--s2); }
.intro-top{ width:100%; max-width:560px; display:flex; }
.intro-card{ width:min(560px,94vw); background:var(--card); border-radius:var(--r-xl); padding:var(--s5) var(--s3);
  text-align:center; box-shadow:var(--sh-lg); position:relative; border-top:10px solid var(--sky); }
.intro-card.cat-ouvir{border-top-color:var(--grape)} .intro-card.cat-colorir{border-top-color:var(--pink)}
.intro-card.cat-montar{border-top-color:var(--mint)} .intro-card.cat-aprender{border-top-color:var(--banana-deep)}
.intro-card.cat-tocar{border-top-color:var(--peach)} .intro-card.cat-memoria{border-top-color:var(--sky)}
.intro-card.cat-sentir{border-top-color:#ff7a9c} .intro-card.cat-formas{border-top-color:#22c2ad}
.intro-ill{ font-size:clamp(90px,22vw,130px); line-height:1; filter:drop-shadow(0 12px 10px rgba(20,80,110,.25));
  animation:bob 3s ease-in-out infinite; }
.intro-card h2{ font-size:clamp(26px,6vw,38px); color:var(--ink); margin:var(--s2) 0; }
.intro-card p{ font-size:clamp(17px,4vw,21px); color:var(--ink-soft); font-weight:600; margin-bottom:var(--s4); }
.intro-card .age-badge{ position:static; display:inline-block; margin-bottom:var(--s3); font-size:14px; }
.intro-card .btn-xl{ min-width:240px; }

/* ---------- Jogo: Toque no Bichinho ---------- */
.toq-stage{ display:flex; flex-direction:column; align-items:center; gap:var(--s3); padding:var(--s4) var(--s2); }
.toq-animal{ background:radial-gradient(circle at 50% 40%,#fff,#eaf7ff); border:none; border-radius:50%;
  width:min(64vw,340px); height:min(64vw,340px); display:grid; place-items:center; box-shadow:var(--sh-lg);
  cursor:pointer; }
.toq-emoji{ font-size:min(40vw,210px); line-height:1; filter:drop-shadow(0 12px 10px rgba(20,80,110,.25)); }
.toq-animal.boing{ animation:boing .5s var(--ease); }
@keyframes boing{ 0%{transform:scale(1)} 35%{transform:scale(1.14) rotate(-3deg)} 70%{transform:scale(.95) rotate(2deg)} 100%{transform:scale(1)} }
.toq-hint{ font-size:clamp(20px,5vw,26px); font-weight:800; color:var(--sky-deep); }

/* ---------- Área para os pais ---------- */
.parents{ max-width:780px; margin:0 auto; padding:var(--s2); color:#3a4a52; font-family:'Nunito',var(--fonte); }
.parents h2{ font-family:var(--fonte); font-size:clamp(26px,5vw,34px); color:var(--ink); text-align:center; }
.parents .lead{ text-align:center; color:var(--ink-soft); font-size:18px; margin:var(--s2) 0 var(--s4); }
.parents-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s2); }
.parents-item{ background:#fff; border-radius:var(--r-md); padding:var(--s3); box-shadow:var(--sh-sm); }
.parents-item .pi{ font-size:34px; } .parents-item h3{ margin:6px 0 4px; font-family:var(--fonte); font-size:18px; color:var(--ink); }
.parents-item p{ font-size:15px; line-height:1.5; color:#4a5a62; }
.parents-actions{ text-align:center; margin-top:var(--s4); }
.btn-clear{ background:#fff; color:#b91c1c; border:3px solid #fecaca; border-radius:999px; padding:14px 26px;
  font-weight:800; font-size:16px; cursor:pointer; font-family:var(--fonte); }
.parents-note{ text-align:center; font-size:13px; color:#8a9aa2; margin-top:var(--s3); }

/* ---------- Mobile-first ---------- */
@media(max-width:880px){
  .khero{ grid-template-columns:1fr; text-align:center; }
  .khero-art{ order:-1; min-height:240px; }
  .khero-cta{ justify-content:center; }
  .khero-sub{ margin-left:auto; margin-right:auto; max-width:30ch; }
}
@media(max-width:560px){
  .age-cards{ grid-template-columns:1fr; }
  .age-card{ display:flex; align-items:center; gap:14px; text-align:left; padding:16px 20px; }
  .age-card .ae{ font-size:46px; }
  .kgame-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s2); }
  .btn-xl{ font-size:20px; min-height:62px; }
  .khero-cta{ flex-direction:column; align-items:stretch; }
  .khero-cta .btn-xl{ width:100%; }
}

/* ============================================================
   Jogos novos: Sentimentos, Formas e Cores, Padrões, Tamanhos
   Layout responsivo (cabe em qualquer tela).
   ============================================================ */
.ng-wrap{ max-width:840px; margin:0 auto; padding:var(--s2); }
.ng-progress{ text-align:center; font-weight:800; color:var(--ink-soft); margin-bottom:8px; }
.ng-q{ text-align:center; font-size:clamp(20px,5vw,30px); color:var(--ink); margin:0 0 4px;
  display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.ng-q .btn-round{ width:48px; height:48px; font-size:22px; flex:none; }
.ng-tip{ text-align:center; color:var(--ink-soft); font-weight:700; margin-bottom:14px; }
.ng-stage{ display:flex; gap:clamp(10px,3vw,26px); align-items:center; justify-content:center;
  flex-wrap:wrap; margin:0 auto 22px; min-height:150px; }
.ng-bigface svg{ width:clamp(120px,40vw,180px); height:auto;
  filter:drop-shadow(0 12px 12px rgba(20,80,110,.2)); animation:bob 3.5s ease-in-out infinite; }
.ng-options{ display:flex; gap:clamp(10px,2.4vw,16px); flex-wrap:wrap; justify-content:center; }
.ng-opt{ background:#fff; border-radius:var(--r-lg); padding:14px 16px; box-shadow:var(--sh);
  border:4px solid transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:6px; min-width:96px; transition:transform .14s var(--ease); font-family:var(--fonte); }
.ng-opt:active{ transform:scale(.95); }
.ng-opt svg{ width:clamp(54px,15vw,68px); height:clamp(54px,15vw,68px); }
.ng-opt b{ font-size:clamp(15px,4vw,18px); color:var(--ink); }
.ng-opt.correct{ border-color:var(--mint-deep); background:#e7fbf4; animation:pop-in .35s; }
.ng-opt.wrong{ border-color:#ffc0cf; animation:ngshake .4s; }
.ng-opt.answered{ pointer-events:none; }
@keyframes ngshake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

/* Padrões — sequência com lacuna */
.ng-seq{ gap:clamp(6px,1.8vw,14px); }
.ng-cell{ width:clamp(50px,14vw,84px); height:clamp(50px,14vw,84px); display:grid; place-items:center;
  background:#fff; border-radius:18px; box-shadow:var(--sh-sm); }
.ng-cell svg, .ng-cell .art-svg, .ng-cell .art-img{ width:84%; height:84%; }
.ng-cell.q{ background:#eef4f9; border:3px dashed #b9c8d4; font-size:clamp(28px,8vw,40px); color:#8aa0b0; font-weight:900; }

/* Tamanhos — botões dimensionados pela própria arte */
.ng-sizes{ align-items:flex-end; gap:clamp(10px,4vw,40px); }
.ng-size{ background:none; cursor:pointer; padding:6px; border-radius:24px; transition:transform .14s var(--ease); }
.ng-size:active{ transform:scale(.93); }
.ng-size .art-svg, .ng-size .art-img{ display:block; }
.ng-size.correct{ animation:pop-in .4s; }
.ng-size.wrong{ animation:ngshake .4s; }