/* Kids AI Ventures — shared styles */
:root{
  --sky1:#8ED6FF; --sky2:#CDEFFF;
  --coral:#FF6B6B; --sun:#FFD93D; --grass:#6BCB77; --blue:#4D96FF;
  --purple:#9B77E8; --orange:#FF9F45; --pink:#FF8FD2; --teal:#3EC9B8;
  --ink:#2B3A55; --card:#FFFFFF;
  --radius:28px;
  --shadow:0 10px 24px rgba(43,58,85,.14);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:17px;}
body{
  margin:0; font-family:'Baloo 2','Fredoka','Comic Sans MS',cursive,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 60%,#EAF9EE 100%);
  min-height:100vh; overflow-x:hidden;
}
h1,h2,h3{font-family:'Fredoka','Baloo 2',cursive,sans-serif; line-height:1.15; margin:.3em 0;}
h1{font-size:clamp(1.9rem,5.5vw,3.4rem);}
h2{font-size:clamp(1.4rem,3.6vw,2.1rem);}
p{line-height:1.55;}

/* Header */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px clamp(14px,4vw,40px); position:relative; z-index:5; flex-wrap:wrap;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.logo .mark{width:52px; height:52px;}
.logo .word{font-family:'Fredoka',cursive; font-weight:700; font-size:1.35rem;}
.logo .word span{color:var(--coral);}
nav.mainnav{display:flex; gap:10px; flex-wrap:wrap;}
nav.mainnav a{
  text-decoration:none; font-weight:700; color:var(--ink);
  background:#fff; padding:10px 18px; border-radius:999px; box-shadow:var(--shadow);
  transition:transform .15s, background .15s;
}
nav.mainnav a:hover{transform:translateY(-3px) scale(1.04); background:var(--sun);}
nav.mainnav a.active{background:var(--sun);}

/* Buttons */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  font-family:'Fredoka','Baloo 2',cursive; font-weight:700; color:#fff;
  font-size:clamp(1.05rem,2.6vw,1.35rem);
  padding:16px 34px; border-radius:999px; box-shadow:var(--shadow);
  transition:transform .12s ease;
  background:var(--coral);
}
.btn:hover{transform:translateY(-3px) scale(1.05);}
.btn:active{transform:scale(.96);}
.btn.blue{background:var(--blue);} .btn.green{background:var(--grass);}
.btn.purple{background:var(--purple);} .btn.orange{background:var(--orange);}
.btn.big{font-size:clamp(1.25rem,3.2vw,1.7rem); padding:20px 44px;}

/* Layout helpers */
.wrap{max-width:1100px; margin:0 auto; padding:0 clamp(14px,4vw,40px);}
.center{text-align:center;}

/* Cards */
.grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin:26px 0 60px;}
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; text-align:center; position:relative;
  transition:transform .18s ease;
}
.card:hover{transform:translateY(-6px) rotate(-.5deg);}
.card .emoji{font-size:3.2rem; display:block;}
.card h3{font-size:1.35rem;}
.card p{font-size:.98rem; color:#51608a; margin:.4em 0 1em;}
.tag{
  display:inline-block; font-size:.8rem; font-weight:700; color:#fff;
  background:var(--teal); border-radius:999px; padding:4px 12px; margin-bottom:8px;
}
.tag.soon{background:#B9C3D8;}

/* Decorations */
.cloud{position:absolute; background:#fff; border-radius:999px; opacity:.9; animation:drift 38s linear infinite;}
.cloud::before,.cloud::after{content:""; position:absolute; background:#fff; border-radius:50%;}
@keyframes drift{from{transform:translateX(-220px);}to{transform:translateX(110vw);}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.bob{animation:bob 3.4s ease-in-out infinite;}

/* Game shells */
.game-stage{
  max-width:860px; margin:10px auto 40px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(16px,3.5vw,34px); text-align:center; position:relative;
  min-height:420px;
}
.prompt{font-family:'Fredoka',cursive; font-size:clamp(1.3rem,3.6vw,1.9rem); font-weight:700; min-height:2.4em; margin:6px 0 14px;}
.answers{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:18px 0;}
.stars{font-size:1.5rem; letter-spacing:4px; min-height:1.6em;}
.speak-btn{
  position:absolute; top:14px; right:14px; background:var(--sun); border:none; cursor:pointer;
  width:52px; height:52px; border-radius:50%; font-size:1.4rem; box-shadow:var(--shadow);
}
@keyframes pop{0%{transform:scale(.4); opacity:0;}70%{transform:scale(1.15);}100%{transform:scale(1); opacity:1;}}
.pop{animation:pop .45s ease both;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-9px);}75%{transform:translateX(9px);}}
.shake{animation:shake .4s ease;}
.confetti-bit{position:fixed; top:-20px; font-size:1.6rem; animation:fall linear forwards; z-index:50; pointer-events:none;}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);}}

/* Footer */
footer{
  margin-top:40px; padding:34px 20px 26px; text-align:center; color:#3f4d6e;
  background:linear-gradient(180deg,rgba(107,203,119,0) 0%, rgba(107,203,119,.35) 100%);
  font-size:.95rem;
}
footer a{color:var(--blue); font-weight:700; text-decoration:none;}

/* Video page */
.video-frame{max-width:900px; margin:0 auto 30px;}
.video-frame video, .video-frame iframe{
  width:100%; aspect-ratio:16/9; border-radius:var(--radius); box-shadow:var(--shadow); border:none; background:#000;
}
@media (max-width:600px){
  nav.mainnav a{padding:8px 14px; font-size:.92rem;}
}