/* ═════════════════════════════════════════════════════════════════════════
   STARKIDS ACADEMY — shared styles
   ═════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&family=Righteous&family=Nunito:wght@700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --f:'Lilita One',sans-serif;
  --b:'Righteous',sans-serif;
  --n:'Nunito',sans-serif;
  --sky:#4fc3f7;--sky2:#0288d1;
  --sun:#ffd54f;--sun2:#ffb300;
  --grass:#66bb6a;--grass2:#388e3c;
  --pink:#f48fb1;--pink2:#e91e8c;
  --purple:#ce93d8;--purple2:#7b1fa2;
  --orange:#ffb74d;--orange2:#e65100;
  --red:#ef5350;--ink:#1a237e;
  --teal:#26c6da;--teal2:#00838f;
}
html{scroll-behavior:smooth;}
body{font-family:var(--b);overflow-x:hidden;}

/* ── SITE NAV (same on every page) ─────────────────────────────────────── */
.site-nav{
  background:#1a237e;padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:400;
  box-shadow:0 3px 12px rgba(0,0,0,.3);
}
.site-nav .logo{
  font-family:var(--f);font-size:1.3rem;color:var(--sun);
  text-decoration:none;letter-spacing:2px;
}
.site-nav .links{display:flex;gap:5px;flex-wrap:wrap;}
.site-nav .links a{
  color:#fff;text-decoration:none;font-family:var(--f);font-size:.75rem;
  background:rgba(255,255,255,.1);border-radius:20px;padding:5px 12px;
  transition:all .2s;border:1.5px solid rgba(255,255,255,.15);
}
.site-nav .links a:hover,.site-nav .links a.active{
  background:var(--sun);color:var(--ink);border-color:var(--sun);
}

/* ── CHARACTER WIDGET (bottom-right) ───────────────────────────────────── */
.char-speaker{
  position:fixed;bottom:16px;right:16px;z-index:300;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  pointer-events:none;max-width:260px;
}
.char-bubble{
  background:#fff;border:3px solid var(--char-color,#66bb6a);
  border-radius:18px 18px 4px 18px;padding:10px 14px;max-width:250px;
  font-family:var(--b);font-size:.82rem;font-weight:800;
  color:var(--ink);line-height:1.4;text-align:center;
  box-shadow:3px 3px 0 var(--char-color,#66bb6a);
  transform-origin:bottom right;pointer-events:none;position:relative;
  animation:charBubbleIn .3s cubic-bezier(.34,1.4,.64,1);
}
.char-bubble::after{content:'';position:absolute;bottom:-12px;right:28px;border:6px solid transparent;border-top-color:var(--char-color,#66bb6a);}
.char-bubble::before{content:'';position:absolute;bottom:-8px;right:30px;border:5px solid transparent;border-top-color:#fff;z-index:1;}
.char-bubble.hide{opacity:0;transform:scale(.8);transition:all .2s;}
@keyframes charBubbleIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}

.char-svg-wrap{
  width:86px;height:86px;cursor:pointer;pointer-events:all;
  filter:drop-shadow(3px 5px 8px rgba(0,0,0,.25));transition:transform .2s;
}
.char-svg-wrap:hover{transform:scale(1.1) rotate(-4deg);}
.char-svg-wrap:active{transform:scale(.9);}
.char-svg-wrap svg{width:100%;height:100%;display:block;}
.char-blink{animation:charBlink 4s ease-in-out infinite;}
@keyframes charBlink{0%,86%,94%,100%{transform:scaleY(1)}90%{transform:scaleY(.05)}}
.char-talking{animation:charTalk .22s ease infinite alternate;}
@keyframes charTalk{0%{transform:scaleY(1) translateY(0)}100%{transform:scaleY(.95) translateY(2px)}}
.char-happy{animation:charHappy .5s ease infinite alternate;}
@keyframes charHappy{0%{transform:rotate(-9deg) scale(1)}100%{transform:rotate(9deg) scale(1.06)}}
.char-bounce{animation:charBounce .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes charBounce{0%{transform:translateY(0)}40%{transform:translateY(-24px) scale(1.1)}100%{transform:translateY(0)}}

@media(max-width:500px){
  .site-nav .links a{font-size:.68rem;padding:4px 9px;}
  .char-svg-wrap{width:72px;height:72px;}
  .char-bubble{font-size:.75rem;max-width:200px;}
}