:root{
    --ink:#2A1418; --ink-soft:#4F3236; --paper:#FFFBF2; --cream:#FFF4DC;
    --sky:#BFE6F5; --sun:#FFC73A; --coral:#D6431F; --teal:#146B80; --sage:#1F7A4C; --mint:#B4DDC4;
    --wood:#B97C47; --wood-dk:#8E5A2E; --wood-lt:#D79A60;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:'Quicksand',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;color:inherit;cursor:pointer;}
  h1,h2,h3{font-family:'Fredoka',sans-serif;margin:0;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
  :focus-visible{outline:3px solid var(--ink);outline-offset:3px;}

  /* ---------- page swipe ---------- */
  .swipe{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;}
  .swipe i{flex:1;transform:translateY(-100%);}
  .swipe i:nth-child(1){background:var(--coral);} .swipe i:nth-child(2){background:var(--sun);} .swipe i:nth-child(3){background:var(--sage);}
  .swipe.go i{animation:swipeDown .7s cubic-bezier(.6,0,.3,1) forwards;}
  .swipe.go i:nth-child(2){animation-delay:.08s;} .swipe.go i:nth-child(3){animation-delay:.16s;}
  @keyframes swipeDown{0%{transform:translateY(-100%);}45%{transform:translateY(0);}100%{transform:translateY(100%);}}

  /* ---------- nav ---------- */
  .site{position:sticky;top:0;z-index:60;background:var(--cream);border-bottom:3px solid var(--ink);}
  .nav{max-width:1280px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .logo{display:flex;align-items:center;gap:12px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.35rem;}
  .logo img{height:44px;width:auto;border-radius:10px;}
  .links{display:flex;gap:4px;}
  .links a{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.05rem;padding:8px 16px;border-radius:999px;border:2px solid transparent;color:var(--ink-soft);transition:transform .15s,background .15s;}
  .links a:hover{transform:translateY(-2px);background:#fff;}
  .links a.active{background:var(--sun);border-color:var(--ink);color:var(--ink);}
  .kz{font-family:'Baloo 2',sans-serif;font-weight:700;background:var(--coral);color:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:9px 22px;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s;}
  .kz:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;border:3px solid var(--ink);border-radius:999px;
    padding:13px 26px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:1.08rem;box-shadow:4px 4px 0 var(--ink);
    transition:transform .15s,box-shadow .15s;
  }
  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
  .btn.coral{background:var(--coral);color:#fff;} .btn.teal{background:var(--teal);color:#fff;}
  .btn.sun{background:var(--sun);color:var(--ink);} .btn.white{background:#fff;color:var(--ink);} .btn.ink{background:var(--ink);color:#fff;}

  footer{background:var(--ink);color:#fff;padding:58px 28px 26px;}
  .fgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
  footer h4{font-family:'Fredoka',sans-serif;font-size:1.08rem;color:var(--sun);margin:0 0 14px;}
  footer ul{list-style:none;margin:0;padding:0;} footer li{margin-bottom:8px;}
  footer a{font-weight:600;font-size:.95rem;color:#F1DDD0;} footer a:hover{text-decoration:underline;}
  .fbrand{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-size:1.25rem;margin-bottom:10px;}
  .fbrand img{height:34px;border-radius:8px;}
  .fbottom{max-width:1180px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);text-align:center;font-size:.88rem;opacity:.75;}
  .totop{position:fixed;right:18px;bottom:18px;z-index:50;width:46px;height:46px;border-radius:50%;background:#FFC93C;color:var(--ink);border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink);display:grid;place-items:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.3rem;text-decoration:none;}
  html{scroll-behavior:smooth;}

  /* ---- header to match live site ---- */
  header.site{background:#FDF3E3 !important;border-bottom:1px solid #E6D8C3 !important;box-shadow:none !important;position:sticky;top:0;z-index:60;}
  .nav{padding:8px 28px !important;min-height:78px;position:relative;}
  .logo img{height:62px !important;width:auto;border-radius:0 !important;display:block;}
  .links{position:absolute;left:50%;transform:translateX(-50%);gap:10px !important;}
  .links a{color:#3A1F1F !important;border:0 !important;padding:9px 20px !important;font-size:1.1rem !important;}
  .links a:hover{background:rgba(197,232,209,.55) !important;transform:none !important;}
  .links a.active{background:#C5E8D1 !important;color:#2A5B3E !important;}
  .kz{background:#C8452B !important;border:0 !important;box-shadow:none !important;padding:12px 30px !important;font-size:1.1rem;color:#fff !important;}
  .kz:hover{transform:none !important;background:#B33B23 !important;}
  .kz-m{display:none;} .burger{display:none;}
  @media (max-width:980px){
    .links{display:none !important;position:absolute;top:100%;left:0;right:0;transform:none;flex-direction:column;background:#FDF3E3;padding:12px 20px 20px;border-bottom:1px solid #E6D8C3;gap:4px !important;}
    .links.open{display:flex !important;} .kz-d{display:none;} .kz-m{display:inline-block;text-align:center;margin-top:8px;}
    .burger{display:grid;gap:5px;background:none;border:0;padding:10px;cursor:pointer;} .burger i{display:block;width:26px;height:3px;border-radius:3px;background:#3A1F1F;}
    .logo img{height:52px !important;}
  }


html{font-size:15px}
.nav{min-height:62px !important;padding:6px 24px !important}.logo img{height:48px !important}.links a{font-size:1rem !important;padding:7px 16px !important}.kz{padding:9px 24px !important;font-size:1rem !important}footer{padding:40px 24px 20px !important}.fbrand{font-size:1.1rem !important}
@media(max-width:720px){.fgrid{grid-template-columns:1fr 1fr !important}.fgrid>div:first-child{grid-column:1/-1}footer{padding:44px 20px 22px}}


/* ================= KIDS ZONE — "Game Lobby" look =================
   Flat colour blocks, chunky candy buttons, big rounded cards. No sky, clouds or hills. */
.fp{--vio:#5B2FD0;--vio2:#7D55F0;--vio3:#3C1C9C;--deep:#2A1170;--sun:#FFC531;--sund:#D79A00;--mint:#22C08A;--mintd:#138F65;--coralk:#FF6B4A;--shadow:rgba(42,20,24,.14);
  font-family:'Quicksand',sans-serif;font-weight:600;color:var(--ink);overflow-x:clip;background:#FFF8EA}
.fp *{box-sizing:border-box}
.fp h1,.fp h2,.fp h3,.fp h4{font-family:'Fredoka',sans-serif;margin:0}
.fp p{margin:0}
.fp button{font-family:'Fredoka',sans-serif}
.wr{max-width:1160px;margin:0 auto;padding:0 22px;position:relative}

/* candy buttons */
.fp .btn{--b:var(--coralk);--d:#C9432A;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--b);color:#fff;border:0;border-radius:18px;box-shadow:0 6px 0 var(--d);padding:12px 26px;font:600 1.12rem 'Fredoka',sans-serif;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}
.fp .btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--d)}
.fp .btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--d)}
.fp .btn.sun{--b:var(--sun);--d:var(--sund);color:var(--ink)}
.fp .btn.white{--b:#fff;--d:#D3CAEA;color:var(--ink)}
.fp .btn.green{--b:var(--mint);--d:var(--mintd)}
.fp .btn.pink{--b:#FF5C9E;--d:#C93878}
.fp .btn.purple{--b:#7B4FE0;--d:#4F2BB0}
.fp .btn.ghost{--d:rgba(0,0,0,.28);background:rgba(255,255,255,.14);box-shadow:0 6px 0 var(--d),inset 0 0 0 3px rgba(255,255,255,.75)}
.fp .btn.ghost:hover{background:rgba(255,255,255,.24);box-shadow:0 8px 0 var(--d),inset 0 0 0 3px #fff}
.fp .btn.big{font-size:1.3rem;padding:15px 32px;border-radius:22px}
.fp .btn.sm{padding:7px 16px;font-size:.95rem;border-radius:14px;box-shadow:0 4px 0 var(--d)}

/* sticky mini-nav */
.zn{position:sticky;top:62px;z-index:40;background:#fff;box-shadow:0 3px 0 var(--shadow);display:flex;gap:8px;padding:9px 16px;overflow-x:auto;align-items:center;scrollbar-width:none}
.zn::-webkit-scrollbar{display:none}
.zn a{flex:none;font:600 .98rem 'Fredoka',sans-serif;border-radius:14px;padding:6px 14px;background:var(--c);color:var(--ink);text-decoration:none;transition:transform .12s,box-shadow .12s}
.zn a:hover{transform:translateY(-2px)}
.zn a.on{box-shadow:inset 0 -4px 0 rgba(42,20,24,.28)}
.zn .sp{flex:1}
.zn .st{flex:none;background:var(--ink);color:#fff;border-radius:14px;padding:6px 14px;font:600 1rem 'Fredoka',sans-serif;white-space:nowrap}
.zn .st b{color:var(--sun)}

/* HERO */
.hero{position:relative;z-index:2;background:var(--vio) radial-gradient(rgba(255,255,255,.1) 2px,transparent 2.6px) 0 0/30px 30px;color:#fff;padding:70px 0 96px;border-radius:0 0 56px 56px;overflow:hidden}
.hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;background:var(--sun);color:var(--ink);font:600 1rem 'Fredoka',sans-serif;padding:6px 18px;border-radius:99px}
.hero h1{font-size:clamp(4.4rem,10vw,8.4rem);line-height:.86;margin:22px 0 22px;letter-spacing:-1px}
.hero h1 .w{display:block;white-space:nowrap}
.hero h1 b{display:inline-block;color:var(--c);text-shadow:0 .055em 0 var(--deep);animation:hop 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes hop{0%,62%,100%{transform:translateY(0)}30%{transform:translateY(-.12em)}}
.hero .tag{font:600 clamp(1.15rem,2vw,1.45rem)/1.45 'Quicksand',sans-serif;color:#EEE8FF;max-width:34ch;margin-bottom:28px}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap}
.facts{list-style:none;display:flex;gap:26px;flex-wrap:wrap;margin:34px 0 0;padding:0;font:600 1rem 'Fredoka',sans-serif;color:#D9CEFF}
.facts li{display:flex;align-items:baseline;gap:8px}.facts b{font-size:2.1rem;line-height:1;color:var(--sun)}
/* calm flat shapes (only 4) */
.hero [class^=sh]{position:absolute;pointer-events:none}
.sh1{width:46px;height:46px;background:#FF8FB8;border-radius:50%;left:4%;top:54px;animation:bob 5s ease-in-out infinite}
.sh2{width:40px;height:40px;background:#4FD1C5;clip-path:polygon(50% 0,100% 100%,0 100%);left:46%;top:36px;animation:bob 6s ease-in-out -2s infinite}
.sh3{width:54px;height:54px;background:var(--sun);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);right:4%;top:46px;animation:bob 5.5s ease-in-out -1s infinite}
.sh4{width:34px;height:34px;border:8px solid #FF9A3C;border-radius:50%;left:3%;bottom:190px;animation:bob 7s ease-in-out -3s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* character stage */
.stagew{position:relative;width:100%;max-width:520px;margin-left:auto}
.stage{position:relative;width:100%;aspect-ratio:1;background:var(--vio2);border-radius:46px;box-shadow:0 12px 0 var(--vio3);overflow:hidden}
.disc{position:absolute;left:50%;bottom:-20%;width:100%;aspect-ratio:1;transform:translateX(-50%);background:var(--sun);border-radius:50%}
.disc:after{content:"";position:absolute;inset:11%;border-radius:50%;background:#FFD866}
.stage img.ch{position:absolute;bottom:0;width:auto;animation:breathe 4s ease-in-out infinite;transform-origin:bottom center}
.stage img.ch.l{left:1%;height:80%}.stage img.ch.r{right:2%;height:65%;animation-delay:-2s}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.say{position:absolute;z-index:4;background:#fff;color:var(--ink);border-radius:18px;padding:8px 16px;font:600 1.05rem 'Fredoka',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.say:after{content:"";position:absolute;bottom:-11px;left:28px;border:8px solid transparent;border-top:12px solid #fff}
.say.l{left:5%;top:6%}.say.r{right:5%;top:27%}.say.r:after{left:auto;right:34px}

/* sections */
.sec{position:relative;padding:76px 0 84px;scroll-margin-top:112px}
.rooms{margin-top:-56px;padding-top:122px;background:#FFF8EA}
.sh{text-align:center;margin-bottom:38px}
.eb{display:inline-block;background:var(--c);color:var(--ink);font:600 .92rem 'Fredoka',sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:4px 16px;border-radius:99px;margin-bottom:12px}
.sh h2{font-size:clamp(2.2rem,4.8vw,3.4rem);line-height:1.1}
.sh h2 mark{color:inherit;background:linear-gradient(transparent 60%,var(--c) 60%);padding:0 .12em;border-radius:6px}
.sh p{font-weight:600;font-size:1.12rem;margin-top:12px;color:var(--ink-soft)}
.more{text-align:center;margin-top:38px}
.panel{background:#fff;border-radius:32px;box-shadow:0 8px 0 var(--shadow);padding:30px;position:relative}

/* room tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tile{--b:#FF8A65;--d:#D95F3D;position:relative;display:flex;flex-direction:column;background:#fff;border-radius:30px;box-shadow:0 8px 0 var(--d);text-decoration:none;color:var(--ink);overflow:hidden;cursor:pointer;border:0;padding:0;font:inherit;text-align:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.tile:hover{transform:translateY(-7px);box-shadow:0 15px 0 var(--d)}
.tile:active{transform:translateY(4px);box-shadow:0 3px 0 var(--d)}
.tile .top{background:var(--b);height:146px;display:grid;place-items:center;position:relative}
.tile .ic{width:98px;height:98px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:3.5rem;line-height:1;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tile:hover .ic{transform:scale(1.14)}
.tile .tg{position:absolute;top:12px;right:12px;background:#fff;color:var(--ink);font:600 .82rem 'Fredoka',sans-serif;border-radius:99px;padding:2px 12px}
.tile .bd{padding:16px 16px 20px;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.tile h3{font-size:1.42rem;color:var(--ink)}
.tile p{font-weight:600;font-size:.95rem;line-height:1.35;color:var(--ink-soft);min-height:2.7em}
.tile .go{margin-top:8px;background:var(--b);color:var(--ink);border-radius:14px;padding:6px 24px;font:600 1.05rem 'Fredoka',sans-serif;box-shadow:0 3px 0 var(--d)}
.tile.rnd{--b:#fff;--d:#1B0A52;background:var(--deep);color:#fff}
.tile.rnd .top{background:var(--vio)}.tile.rnd h3{color:#fff}.tile.rnd p{color:#D9CEFF}.tile.rnd .go{background:var(--sun);box-shadow:0 3px 0 var(--sund)}
.tile.rnd .ic{background:var(--sun);animation:dice 2.6s ease-in-out infinite}
@keyframes dice{0%,60%,100%{transform:scale(1)}72%{transform:scale(1.12)}86%{transform:scale(.95)}}

/* today */
.duo2{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch}
.lbl{display:inline-block;background:#FFEDB0;color:var(--ink);font:600 .95rem 'Fredoka',sans-serif;padding:4px 16px;border-radius:99px;margin-bottom:16px}
.riddle{text-align:center}
.riddle .q{font:600 clamp(1.5rem,3vw,2.1rem)/1.3 'Fredoka',sans-serif;margin:0 0 24px}
.riddle .opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;counter-reset:o}
.riddle .opt{display:flex;align-items:center;gap:12px;background:#F4EFFF;border:0;border-radius:18px;box-shadow:0 5px 0 #D3CAEA;padding:12px 14px;font:600 1.15rem 'Fredoka',sans-serif;cursor:pointer;color:var(--ink);text-align:left;transition:transform .12s,box-shadow .12s}
.riddle .opt:before{counter-increment:o;content:counter(o,upper-alpha);flex:none;width:36px;height:36px;border-radius:50%;background:#7B4FE0;color:#fff;display:grid;place-items:center;font-size:1.05rem}
.riddle .opt:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 0 #D3CAEA}
.riddle .opt.good{background:#A9F0CB;box-shadow:0 5px 0 #46AE69}.riddle .opt.good:before{background:#138F65}
.riddle .opt.bad{background:#FFC3BA;box-shadow:0 5px 0 #D9604F}.riddle .opt.bad:before{background:#D9604F}
.riddle .opt:disabled{cursor:default}
.riddle .why{margin-top:18px;background:#FFF4D6;border-radius:16px;padding:10px 16px;font-weight:700}
.letter{text-align:center;--c:#FF5C9E}
.letter .lrow{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:6px}
.letter .L{width:150px;height:150px;border-radius:34px;background:var(--c);color:#fff;font:700 6.4rem/150px 'Fredoka',sans-serif;box-shadow:0 8px 0 rgba(42,20,24,.25);text-shadow:0 5px 0 rgba(0,0,0,.18)}
.letter .em{font-size:5rem;line-height:1}
.letter .small{font:600 1.05rem 'Fredoka',sans-serif;margin:12px 0 2px;color:var(--ink-soft)}.letter .small b{display:inline-block;min-width:1.7em;padding:0 .35em;margin-left:6px;border-radius:10px;background:var(--c);color:#fff;font-size:1.3rem}
.letter h3{font-size:1.65rem;margin:4px 0 16px}
.letter .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* print */
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pc{background:#fff;border-radius:30px;box-shadow:0 8px 0 #E6C255;padding:16px;display:flex;flex-direction:column;gap:10px;text-align:center}
.pc .pv{aspect-ratio:1;border:3px dashed #E4D6B5;border-radius:20px;background:#FFFDF6;overflow:hidden;padding:6px}
.pc .pv svg{width:100%;height:100%;display:block}
.pc h4{font-size:1.25rem}
.pc .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* paint */
.paint{display:grid;grid-template-columns:1fr 230px;gap:24px;align-items:start;background:#fff;border-radius:32px;box-shadow:0 8px 0 #BFAEF0;padding:24px}
.cwrap{border:3px solid #E6DCFF;border-radius:22px;background:#fff;line-height:0;overflow:hidden}
.cwrap canvas{width:100%;height:auto;display:block;cursor:crosshair;touch-action:none}
.pside{display:flex;flex-direction:column;gap:16px}
.pside h4{font-size:1.05rem;margin-bottom:8px}
.pal{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.sw{aspect-ratio:1;border-radius:50%;border:0;background:var(--c);cursor:pointer;padding:0;box-shadow:0 3px 0 rgba(0,0,0,.25);transition:transform .12s}
.sw:hover{transform:scale(1.1)}
.sw.on{outline:4px solid var(--ink);outline-offset:2px}
.tl{display:flex;flex-wrap:wrap;gap:8px}
.tl button{background:#F3EEFF;color:var(--ink);border:0;border-radius:12px;padding:6px 12px;font:600 .95rem 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 3px 0 #D3CAEA}
.tl button.on{background:#7B4FE0;color:#fff;box-shadow:0 3px 0 #4F2BB0}
#save{width:100%;font-size:1.05rem}

/* poems */
.poemwrap{display:grid;grid-template-columns:270px 1fr;gap:26px}
.plist{display:flex;flex-direction:column;gap:14px}
.pi{background:#fff;border:0;border-radius:22px;padding:12px 16px;font:600 1.12rem 'Fredoka',sans-serif;cursor:pointer;text-align:left;display:flex;gap:12px;align-items:center;box-shadow:0 5px 0 #E8B7CF;color:var(--ink);transition:transform .12s}
.pi:hover{transform:translateY(-2px)}
.pi span{font-size:1.9rem}
.pi.on{background:#FF5C9E;color:#fff;box-shadow:0 5px 0 #C93878}
.poem{text-align:center}
.poem .pe{font-size:4rem;line-height:1.1}.poem h3{font-size:2rem;margin:4px 0 12px}
.poem .ln{font:600 clamp(1.15rem,2.4vw,1.5rem) 'Fredoka',sans-serif;line-height:1.7;padding:0 14px;border-radius:12px;display:inline-block;transition:background .2s,transform .2s}
.poem .ln.on{background:#FFE08A;transform:scale(1.04)}
.poem .row{display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap}

/* rewards */
.rw{background:#FFF8EA}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:46px}
.step{background:#fff;border-radius:30px;box-shadow:0 8px 0 var(--d);padding:0 20px 24px;text-align:center;position:relative;overflow:hidden}
.step:before{content:"";display:block;height:14px;background:var(--c);margin:0 -20px 18px}
.step .n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--c);font:700 1.3rem 'Fredoka',sans-serif;color:var(--ink)}
.step .e{font-size:3.6rem;line-height:1.2;margin:6px 0 2px}.step h3{font-size:1.4rem;margin-bottom:4px}.step p{font-weight:600;color:var(--ink-soft)}
.book{background:#fff;border-radius:32px;box-shadow:0 8px 0 var(--shadow);padding:28px 24px;text-align:center;margin-bottom:34px}
.book h3{font-size:1.5rem;margin-bottom:18px}
.stk{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;max-width:920px;margin:0 auto}
.sk{aspect-ratio:1;border-radius:18px;display:grid;place-items:center;font-size:clamp(1.4rem,3.2vw,2.2rem);background:#FFF4D6;box-shadow:0 4px 0 #E6C255;position:relative}
.sk.lock{background:#EFE9F7;box-shadow:0 4px 0 #D3CAEA;filter:grayscale(1);opacity:.8}.sk.lock span{font-size:1rem}.sk small{position:absolute;bottom:2px;right:6px;font:700 .65rem 'Fredoka',sans-serif}
.book .note{font-weight:700;margin-top:20px;font-size:1.05rem}
.safe{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sf{background:#fff;border-radius:22px;box-shadow:0 5px 0 var(--shadow);padding:16px 12px;text-align:center;font:600 1.05rem 'Fredoka',sans-serif}
.sf span{display:block;font-size:2.1rem;margin-bottom:2px}

/* books strip */
.books{background:var(--vio3);color:#fff;padding:54px 0 0;overflow:hidden}
.bk{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.bt{padding-bottom:54px;max-width:760px}
.bt h3{font-size:clamp(1.8rem,3.4vw,2.4rem);line-height:1.15;margin-bottom:10px}
.bt p{font-weight:600;font-size:1.1rem;color:#D9CEFF}
.bt .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.books img.ch{height:250px;width:auto;flex:none;display:block}

/* floating */
.fx{position:fixed;z-index:9000;pointer-events:none;font:700 1.6rem 'Fredoka',sans-serif;color:#C77D00;-webkit-text-stroke:1px var(--ink);animation:fl 1.1s ease-out forwards}
@keyframes fl{from{transform:translateY(0) scale(.6);opacity:1}to{transform:translateY(-90px) scale(1.3);opacity:0}}
.bit{position:fixed;z-index:9000;pointer-events:none;font-size:1.4rem;animation:bit 1s ease-out forwards}
@keyframes bit{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1.2) rotate(var(--r));opacity:0}}
.totop{bottom:18px}

/* responsive */
@media(max-width:1000px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .pg{grid-template-columns:repeat(2,1fr)}
  .duo2,.poemwrap,.paint{grid-template-columns:1fr}
  .plist{flex-direction:row;overflow-x:auto;padding:0 2px 10px}.pi{flex:none}
  .steps{grid-template-columns:1fr}
}
@media(max-width:860px){
  .hero{padding:44px 0 74px;border-radius:0 0 36px 36px}
  .hgrid{grid-template-columns:1fr;gap:34px;text-align:center}
  .ht{display:flex;flex-direction:column;align-items:center}
  .hero .cta,.facts{justify-content:center}
  .stagew{margin:0 auto;max-width:400px}
  .say{font-size:.9rem;padding:6px 12px}
  .hero [class^=sh]{display:none}
  .rooms{margin-top:-36px;padding-top:98px}
  .bk{flex-direction:column;align-items:center;text-align:center}.bt{padding-bottom:10px}.bt .row{justify-content:center}.books img.ch{height:200px}
}
@media(max-width:560px){
  .sec{padding:54px 0 60px}
  .tiles{gap:14px}.tile{border-radius:22px;box-shadow:0 6px 0 var(--d)}.tile .top{height:100px}.tile .ic{width:68px;height:68px;font-size:2.3rem}.tile h3{font-size:1.1rem}.tile p{font-size:.8rem}.tile .bd{padding:12px 8px 14px}.tile .go{padding:5px 16px;font-size:.95rem}.tile .tg{top:8px;right:8px;font-size:.7rem;padding:1px 8px}
  .pg{gap:14px}.pc{padding:10px;border-radius:22px}.pc h4{font-size:1rem}.pc .btn.sm{padding:6px 10px;font-size:.85rem}
  .panel,.paint{padding:18px;border-radius:26px}
  .riddle .opts{grid-template-columns:1fr}
  .letter .L{width:110px;height:110px;font-size:4.6rem;line-height:110px}.letter .em{font-size:3.8rem}
  .stk{grid-template-columns:repeat(6,1fr)}
  .safe{grid-template-columns:1fr 1fr}
  .facts{gap:16px}.facts b{font-size:1.7rem}
}
@media(prefers-reduced-motion:reduce){.hero h1 b,.hero [class^=sh],.stage img.ch,.tile.rnd .ic{animation:none}}

/* ================= v2 — extra kiddy layer ================= */
@keyframes spin{to{transform:rotate(360deg)}}
.sec{overflow:hidden}
.band{background-color:var(--bg);background-image:radial-gradient(rgba(42,20,24,.07) 3px,transparent 3.6px);background-size:36px 36px}
.rooms{background-image:radial-gradient(rgba(255,197,49,.38) 3px,transparent 3.6px);background-size:40px 40px}
.band:before,.books:before{content:"";position:absolute;left:0;right:0;top:-1px;height:24px;background:radial-gradient(circle at 24px 0,var(--prev,#FFF8EA) 23px,transparent 24.5px) 0 0/48px 24px repeat-x;z-index:1;pointer-events:none}
.books{position:relative;background-image:radial-gradient(rgba(255,255,255,.09) 2px,transparent 2.6px);background-size:30px 30px}
.bdg{width:84px;height:84px;margin:0 auto 14px;border-radius:50%;background:var(--c);display:grid;place-items:center;font-size:2.8rem;line-height:1;box-shadow:0 0 0 6px #fff,0 9px 0 6px rgba(42,20,24,.14);animation:bob 4s ease-in-out infinite}
.dc{position:absolute;font-style:normal;font-size:2.6rem;line-height:1;animation:bob 5s ease-in-out infinite;pointer-events:none;z-index:0}
@media(max-width:1279px){.dc{display:none}}
.wr{z-index:2}

/* hero extras */
.ticker{margin-top:58px;background:var(--sun);box-shadow:0 6px 0 var(--sund);padding:13px 0;overflow:hidden;white-space:nowrap;color:var(--ink)}
.tk{display:inline-flex;gap:46px;padding-right:46px;font:700 1.3rem 'Fredoka',sans-serif;letter-spacing:.06em;animation:tick 30s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.burst{position:absolute;right:-16px;top:-18px;width:116px;height:116px;display:grid;place-content:center;text-align:center;color:#fff;z-index:5;line-height:1.05}
.burst:before{content:"";position:absolute;inset:0;background:#FF5C9E;clip-path:polygon(50.0% 0.0%,60.6% 10.4%,75.0% 6.7%,79.0% 21.0%,93.3% 25.0%,89.6% 39.4%,100.0% 50.0%,89.6% 60.6%,93.3% 75.0%,79.0% 79.0%,75.0% 93.3%,60.6% 89.6%,50.0% 100.0%,39.4% 89.6%,25.0% 93.3%,21.0% 79.0%,6.7% 75.0%,10.4% 60.6%,0.0% 50.0%,10.4% 39.4%,6.7% 25.0%,21.0% 21.0%,25.0% 6.7%,39.4% 10.4%);animation:spin 18s linear infinite;z-index:-1}
.burst b{font:700 1.55rem 'Fredoka',sans-serif}.burst small{font:600 .85rem 'Fredoka',sans-serif}
.tile .top{background-image:radial-gradient(rgba(255,255,255,.4) 3px,transparent 3.6px);background-size:24px 24px}
.tile.rnd .top{background-image:radial-gradient(rgba(255,255,255,.14) 3px,transparent 3.6px)}

/* characters sitting on cards */
.cw{position:relative;display:flex;margin-top:96px}
.cw>.panel,.cw>.paint{flex:1;width:100%}
.duo2{margin-top:0}
.peek{position:absolute;right:34px;bottom:calc(100% - 4px);height:140px;width:auto;z-index:2;animation:breathe 4s ease-in-out infinite;transform-origin:bottom center}
.peek.l{left:44px;right:auto;height:134px}
.say2{position:absolute;right:124px;bottom:calc(100% + 70px);background:#fff;color:var(--ink);border-radius:16px;padding:6px 14px;font:600 1rem 'Fredoka',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.14);z-index:3;white-space:nowrap}
.say2:after{content:"";position:absolute;bottom:-10px;right:18px;border:7px solid transparent;border-top:11px solid #fff}
.say2.l{left:140px;right:auto;bottom:calc(100% + 70px)}.say2.l:after{right:auto;left:18px}
.cw.wide{margin-top:100px}

/* balloon game */
.gamecard{max-width:900px;margin:0 auto;background:#fff;border-radius:34px;box-shadow:0 8px 0 #E5A99A;padding:18px;position:relative;z-index:2}
.ghud{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:12px;margin-bottom:14px}
.ghud>div{background:#FFF1EC;border-radius:18px;padding:8px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center;font:600 .9rem 'Fredoka',sans-serif}
.ghud b{font:700 2rem/1.1 'Fredoka',sans-serif}
.ghud .gt{background:#7B4FE0;color:#fff;box-shadow:0 4px 0 #4F2BB0}.ghud .gt b{font-size:3rem;color:var(--sun)}
.arena{position:relative;height:420px;border-radius:24px;overflow:hidden;background:#EFE8FF radial-gradient(rgba(123,79,224,.13) 3px,transparent 3.6px) 0 0/30px 30px;touch-action:manipulation;user-select:none}
.arena.shake{animation:shk .25s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.gmsg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;background:rgba(239,232,255,.93);z-index:5;padding:20px}
.gmsg[hidden]{display:none}
.gmsg h3{font-size:2.6rem}.gmsg p{font-weight:700;font-size:1.15rem;max-width:34ch}
.bal{position:absolute;bottom:-130px;border:0;padding:0;cursor:pointer;background:var(--c);color:#fff;font:700 1.9rem 'Fredoka',sans-serif;border-radius:50% 50% 48% 48%/55% 55% 45% 45%;display:grid;place-items:center;animation:rise var(--t) linear forwards;text-shadow:0 2px 0 rgba(0,0,0,.2);box-shadow:inset -8px -10px 0 rgba(0,0,0,.12);touch-action:manipulation}
.bal:before{content:"";position:absolute;top:13%;left:20%;width:22%;height:14%;border-radius:50%;background:rgba(255,255,255,.55)}
.bal:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:46px;margin-left:-1px;background:#7a6a70}
@keyframes rise{to{transform:translateY(calc(-1*var(--ah,640px)))}}
.bal.pop{animation:popb .25s ease-out forwards;pointer-events:none}
@keyframes popb{to{transform:scale(1.5);opacity:0}}

/* print extras */
.crayons{display:flex;justify-content:center;gap:10px;margin-top:24px;align-items:flex-end}
.crayons i{position:relative;display:block;width:24px;height:84px;background:var(--c);clip-path:polygon(0 20%,50% 0,100% 20%,100% 100%,0 100%);animation:bob 3.2s ease-in-out infinite}
.crayons i:nth-child(odd){animation-delay:-1.4s}
.crayons i:after{content:"";position:absolute;left:0;right:0;top:50%;height:20px;background:rgba(255,255,255,.55)}
.pc{position:relative}
.pc:before{content:"";position:absolute;top:-13px;left:50%;width:92px;height:28px;margin-left:-46px;background:#FF8FB8;border-radius:4px;box-shadow:0 3px 0 rgba(0,0,0,.1);z-index:2}
.pc:nth-child(3n+2):before{background:#7ED0FF}.pc:nth-child(3n):before{background:#7BDC9A}
.pc .lv{position:absolute;top:26px;left:26px;background:#fff;border-radius:99px;padding:2px 12px;font:600 .85rem 'Fredoka',sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.14);z-index:2}

/* paint extras */
.pleft{display:flex;flex-direction:column;gap:14px}
.idea{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#FFF4D6;border-radius:18px;padding:8px 8px 8px 16px;font:600 1.08rem 'Fredoka',sans-serif}
.idea #ideatxt{flex:1;min-width:170px}
.cwrap{border:7px solid #7B4FE0;border-radius:26px;box-shadow:0 6px 0 #4F2BB0}
.pside{background:#FFF4D6;border-radius:26px;padding:18px;box-shadow:0 6px 0 #E6C255}
.paint{padding:22px}

/* poem extras */
.pi{--pc:#FF5C9E}
.pi.on{background:var(--pc);box-shadow:0 5px 0 rgba(0,0,0,.25)}
.poem{overflow:hidden}
.poem:before{content:"";display:block;height:16px;background:var(--pc,#FF5C9E);margin:-30px -30px 22px}
.poem .nt{position:absolute;font-size:2.2rem;line-height:1;color:var(--pc);opacity:0;pointer-events:none}
.poem.sing .nt{animation:note 2.4s ease-in infinite}
.nt.n1{left:6%;bottom:90px}.nt.n2{right:7%;bottom:140px;animation-delay:-.8s!important}.nt.n3{left:10%;bottom:240px;animation-delay:-1.6s!important}.nt.n4{right:10%;bottom:60px;animation-delay:-1.2s!important}
@keyframes note{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-120px) scale(1.2);opacity:0}}

/* rewards extras */
.step{overflow:visible}.step:before{border-radius:30px 30px 0 0}
.step:not(:last-child):after{content:"➜";position:absolute;right:-27px;top:50%;font-size:1.8rem;line-height:1;z-index:2}
.book{background:none;box-shadow:none;border-radius:0;padding:0;margin-bottom:40px}
.cover{background:#7B4FE0;color:#fff;border-radius:32px 32px 0 0;padding:20px 26px 42px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cover h3{font-size:1.6rem;margin:0}
.meter{display:flex;align-items:center;gap:12px;flex:1;min-width:240px;max-width:470px;font:600 1.1rem 'Fredoka',sans-serif}
.mbar{flex:1;height:22px;background:rgba(255,255,255,.28);border-radius:99px;overflow:hidden}
.mbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF5C8A,#FFC531,#22C08A,#38B6FF);border-radius:99px;transition:width .6s}
.page{background:#fff;border-radius:30px;margin-top:-24px;padding:28px 22px 22px;box-shadow:0 8px 0 #4F2BB0;position:relative;outline:3px dashed #E1D8F5;outline-offset:-12px}
.sk{background:#FFF4D6;box-shadow:0 4px 0 #E6C255;transition:transform .15s}.sk:not(.lock):hover{transform:scale(1.15)}
.sk.lock{background:#F4F0FB;box-shadow:none;border:3px dashed #CFC5E8;filter:none;opacity:1}
.sk.lock span{font:700 1.7rem 'Fredoka',sans-serif;color:#B5A9D6}
.sf{background:var(--c,#fff);box-shadow:0 5px 0 rgba(42,20,24,.15)}

@media(max-width:1000px){.step:not(:last-child):after{display:none}}
@media(max-width:860px){
  .burst{width:88px;height:88px;right:-6px;top:-14px}.burst b{font-size:1.2rem}.burst small{font-size:.7rem}
  .ghud{grid-template-columns:1fr 1fr 1fr}.ghud .gt{grid-column:1/-1}
  .arena{height:380px}
  .peek{height:92px;right:20px}.peek.l{height:100px;left:20px}.say2{right:92px;bottom:calc(100% + 44px);font-size:.85rem}.say2.l{left:110px;bottom:calc(100% + 50px)}
  .cw,.cw.wide{margin-top:78px}
}
@media(max-width:560px){
  .bdg{width:68px;height:68px;font-size:2.3rem}
  .cover{padding:16px 16px 36px}.page{padding:22px 12px 16px}
  .ghud b{font-size:1.6rem}.ghud .gt b{font-size:2.4rem}.gmsg h3{font-size:2rem}
  .tk{font-size:1.05rem}
  .poem:before{margin:-18px -18px 18px}
}
@media(prefers-reduced-motion:reduce){.tk,.burst:before,.bdg,.dc,.peek,.crayons i,.bal{animation:none}}

/* ================= v3 — arcade, facts, missions ================= */
.zn a.st2{flex:none;background:var(--sun);color:var(--ink);border-radius:14px;padding:6px 12px;font:600 1rem 'Fredoka',sans-serif;box-shadow:none}
.cw.arcw{max-width:960px;margin-left:auto;margin-right:auto}
.cw>.arc,.cw>.fgrid{flex:1;width:100%}
.arc{background:#fff;border-radius:34px;box-shadow:0 8px 0 #8FC9EE;padding:20px}
.atabs{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none}
.atabs::-webkit-scrollbar{display:none}
.atabs button{flex:none;border:0;border-radius:16px;padding:8px 16px;font:600 1.02rem 'Fredoka',sans-serif;background:#EAF5FF;color:var(--ink);cursor:pointer;box-shadow:0 4px 0 #C3DDF2;transition:transform .12s}
.atabs button:hover{transform:translateY(-2px)}
.atabs button.on{background:#38B6FF;color:#fff;box-shadow:0 4px 0 #1B8DD6}
.apanel{background:#F1F8FF;border-radius:26px;padding:24px 18px;min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.apanel h3{font-size:1.7rem}
.apanel .hint{font-weight:700;color:var(--ink-soft);font-size:1.05rem}
.apanel .btn{margin-top:4px}
/* memory */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:480px}
.mc{aspect-ratio:1;border:0;border-radius:20px;background:#7B4FE0;color:#fff;box-shadow:0 5px 0 #4F2BB0;font-size:2.4rem;line-height:1;cursor:pointer;transition:transform .12s}
.mc:hover{transform:translateY(-2px)}
.mc.up{background:#fff;box-shadow:0 5px 0 #CFC5E8}
.mc.ok{background:#A9F0CB;box-shadow:0 5px 0 #46AE69;cursor:default}
/* count */
.cnt{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;font-size:2.6rem;line-height:1.2;max-width:440px;background:#fff;border-radius:24px;padding:16px 20px;min-height:130px;align-content:center}
.nopts{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.nb{width:78px;height:78px;border-radius:22px;border:0;font:700 2.3rem 'Fredoka',sans-serif;color:#fff;background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.25);cursor:pointer;transition:transform .12s}
.nb:hover:not(:disabled){transform:translateY(-3px)}
.nb.good{background:#22C08A;outline:4px solid var(--ink);outline-offset:2px}.nb.bad{background:#C9C2D8}
/* mixer */
.blobs{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.blob{width:88px;height:88px;border-radius:50%;border:0;background:var(--c);box-shadow:0 5px 0 rgba(0,0,0,.22),inset 0 0 0 4px rgba(0,0,0,.06);cursor:pointer;font:600 .9rem 'Fredoka',sans-serif;color:var(--ink);transition:transform .12s}
.blob:hover{transform:translateY(-3px)}
.blob.sel{outline:5px solid var(--ink);outline-offset:3px}
.cup{width:120px;height:120px;border-radius:50%;background:var(--r,#fff);border:5px dashed #C3DDF2;transition:background .4s}
.mxn{font:700 1.8rem 'Fredoka',sans-serif}
/* eco */
.item{font-size:5.4rem;line-height:1;animation:bob 2.4s ease-in-out infinite}
.bins{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.bin{border:0;border-radius:24px;padding:14px 18px;min-width:128px;background:var(--c);color:var(--ink);font:600 1.1rem 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .12s}
.bin span{font-size:2.6rem;line-height:1.1}
.bin:hover:not(:disabled){transform:translateY(-3px)}
.tip{font-weight:700;min-height:2.6em;max-width:36ch}
/* piano */
.keys{display:flex;gap:6px;width:100%;max-width:640px}
.pk{flex:1;min-width:0;height:210px;border:0;border-radius:6px 6px 18px 18px;background:var(--c);color:#fff;font:700 1.3rem 'Fredoka',sans-serif;padding-bottom:12px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;box-shadow:0 7px 0 rgba(0,0,0,.25);transition:transform .08s,box-shadow .08s;touch-action:manipulation}
.pk.hit{transform:translateY(6px);box-shadow:0 1px 0 rgba(0,0,0,.25);filter:brightness(1.15)}
/* jokes */
.joke{font:600 1.6rem/1.35 'Fredoka',sans-serif;max-width:28ch;min-height:3.6em;display:flex;align-items:center}
.punch{font:700 1.8rem/1.3 'Fredoka',sans-serif;color:#E85A9A;max-width:26ch;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.punch[hidden]{display:none}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.jb{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* wheel */
.wheelw{position:relative;width:min(320px,78vw);aspect-ratio:1}
.wheel{position:relative;width:100%;height:100%;border-radius:50%;border:6px solid #fff;box-shadow:0 0 0 5px #7B4FE0,0 8px 0 5px #4F2BB0;transition:transform 4s cubic-bezier(.12,.7,.1,1)}
.wl{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;font-size:2.3rem;transform:rotate(var(--a)) translateY(-112px)}
.ptr{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:2.2rem;line-height:1;z-index:3;color:#2A1170;filter:drop-shadow(0 2px 0 #fff)}
.wres{font:600 1.5rem 'Fredoka',sans-serif;min-height:2.6em;display:flex;align-items:center;gap:10px;justify-content:center}
/* flip cards */
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fc{aspect-ratio:1/1.02;perspective:900px;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--ink)}
.fci{position:relative;display:block;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.fc.on .fci{transform:rotateY(180deg)}
.ff,.fb{position:absolute;inset:0;border-radius:28px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;text-align:center;box-shadow:0 8px 0 var(--d)}
.ff{background:var(--c);gap:6px}
.ff i{font-style:normal;font-size:4.2rem;line-height:1}
.ff b{font:600 1.1rem 'Fredoka',sans-serif;background:#fff;border-radius:99px;padding:2px 16px}
.fb{background:#fff;transform:rotateY(180deg);font:700 1.05rem/1.4 'Quicksand',sans-serif;border:5px solid var(--c)}
.fc:hover .fci{translate:0 -4px}
/* missions */
.mis{background:#fff;border-radius:30px;box-shadow:0 8px 0 var(--shadow);padding:22px 22px 24px;margin-bottom:40px;scroll-margin-top:120px}
.mh{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.mh h3{font-size:1.5rem}.mh span{font:600 1.02rem 'Fredoka',sans-serif;background:#FFEDB0;border-radius:99px;padding:3px 16px}
.mrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mp{display:flex;align-items:center;gap:12px;background:#F4EFFF;border-radius:20px;box-shadow:0 5px 0 #D3CAEA;padding:12px 16px;color:var(--ink);text-decoration:none;transition:transform .12s}
.mp:hover{transform:translateY(-3px)}
.mp .mi{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.7rem;flex:none}
.mp b{flex:1;font:600 1.08rem/1.25 'Fredoka',sans-serif}
.mp i{font-style:normal;font-size:1.5rem}
.mp.done{background:#CFF5E2;box-shadow:0 5px 0 #46AE69}
@media(max-width:1000px){.fgrid{grid-template-columns:repeat(2,1fr);gap:16px}.mrow{grid-template-columns:1fr}}
@media(max-width:560px){
  .arc{padding:12px;border-radius:26px}.apanel{padding:18px 10px;min-height:400px}.apanel h3{font-size:1.4rem}
  .mgrid{gap:8px}.mc{font-size:1.8rem;border-radius:14px}
  .nb{width:64px;height:64px;font-size:1.9rem}.blob{width:70px;height:70px}.bin{min-width:96px;padding:10px}
  .pk{height:170px}.joke{font-size:1.3rem}.punch{font-size:1.4rem}
  .wl{transform:rotate(var(--a)) translateY(-94px);font-size:1.9rem}
  .ff i{font-size:3.2rem}.fb{font-size:.9rem;padding:10px}
}

/* ================= v4 — motion, parade, buddy, more games & sections ================= */
@keyframes flyx{from{left:-8%}to{left:108%}}
@keyframes flyy{from{transform:translateY(0) rotate(-10deg)}to{transform:translateY(-46px) rotate(10deg)}}
@keyframes bigjump{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-46px) scale(1.06,.94)}55%{transform:translateY(0) scale(.96,1.05)}75%{transform:translateY(-14px)}100%{transform:translateY(0)}}
@keyframes wig{0%,86%,100%{transform:rotate(0) scale(1)}90%{transform:rotate(-12deg) scale(1.1)}95%{transform:rotate(12deg) scale(1.1)}}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* hero life */
.crit{position:absolute;font-style:normal;font-size:2.2rem;left:-8%;pointer-events:none;z-index:1;animation:flyx 22s linear infinite,flyy 2.6s ease-in-out infinite alternate}
.crit.c1{top:44%}.crit.c2{top:18%;animation-duration:30s,1.9s;animation-delay:-12s,0s;font-size:1.8rem}
.stage img.ch{cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage img.ch.l{translate:calc(var(--px,0)*9px) calc(var(--py,0)*4px)}.stage img.ch.r{translate:calc(var(--px,0)*-7px) calc(var(--py,0)*3px)}
.stage img.ch.jump{animation:bigjump .7s ease}
.say{transition:none}.say.swap{animation:popin .35s cubic-bezier(.3,1.6,.5,1)}
.tile .ic{animation:wig 5s ease-in-out infinite}
.tile:nth-child(2) .ic{animation-delay:-.6s}.tile:nth-child(3) .ic{animation-delay:-1.2s}.tile:nth-child(4) .ic{animation-delay:-1.8s}.tile:nth-child(5) .ic{animation-delay:-2.4s}.tile:nth-child(6) .ic{animation-delay:-3s}.tile:nth-child(7) .ic{animation-delay:-3.6s}.tile:nth-child(8) .ic{animation-delay:-4.2s}
.tile:hover .ic{animation:none;transform:scale(1.14)}
.tile.rnd .ic{animation:dice 2.6s ease-in-out infinite}

/* parade */
.parade{position:relative;height:270px;background:#3CCBB8 radial-gradient(rgba(255,255,255,.22) 3px,transparent 3.6px) 0 0/36px 36px;overflow:hidden;z-index:1}
.ptitle{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:#fff;border-radius:99px;padding:6px 20px;font:600 1.05rem 'Fredoka',sans-serif;white-space:nowrap;box-shadow:0 4px 0 rgba(0,0,0,.14);z-index:3}
.road{position:absolute;left:0;right:0;bottom:0;height:50px;background:#2A1170}
.road:after{content:"";position:absolute;left:0;right:0;top:21px;height:7px;background:repeating-linear-gradient(90deg,#FFC531 0 34px,transparent 34px 68px);animation:roadmove 1.4s linear infinite}
@keyframes roadmove{to{background-position:-68px 0}}
.walker{position:absolute;left:0;bottom:42px;cursor:pointer;animation:walk var(--t) linear infinite;animation-delay:var(--dl);z-index:2}
.walker .wk{display:block;height:var(--h);width:auto;transform-origin:bottom center;animation:step .6s ease-in-out infinite alternate}
.w1{--t:26s;--dl:-4s;--h:150px}.w2{--t:34s;--dl:-15s;--h:134px}.w3{--t:42s;--dl:-27s;--h:128px}
@keyframes walk{from{transform:translateX(-260px)}to{transform:translateX(calc(100vw + 120px))}}
@keyframes step{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.walker.jump .wk{animation:bigjump .7s ease}
.pbub{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;background:#fff;border-radius:14px;padding:5px 12px;font:600 .95rem 'Fredoka',sans-serif;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.walker.say .pbub{opacity:1}
.fly{position:absolute;font-style:normal;font-size:2.2rem;left:-8%;pointer-events:none;animation:flyx var(--t) linear infinite,flyy 2.2s ease-in-out infinite alternate}
.fly.f1{top:80px;--t:19s}.fly.f2{top:130px;--t:27s;animation-delay:-9s,-1s}.fly.f3{top:60px;--t:36s;animation-delay:-20s,-.5s}

/* buddy */
.buddy{position:fixed;left:12px;bottom:0;z-index:60;pointer-events:none}
.buddy img{display:block;height:112px;width:auto;pointer-events:auto;cursor:pointer;transform-origin:bottom center;animation:breathe 4s ease-in-out infinite}
.buddy img.jump{animation:bigjump .7s ease}
.bsay{position:absolute;left:62px;bottom:104px;width:max-content;max-width:190px;background:#fff;color:var(--ink);border-radius:16px;padding:7px 14px;font:600 .95rem/1.25 'Fredoka',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.18);opacity:0;transform:scale(.7);transform-origin:bottom left;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.bsay.on{opacity:1;transform:scale(1)}
.bsay:after{content:"";position:absolute;bottom:-9px;left:14px;border:7px solid transparent;border-top:10px solid #fff}
@media(max-width:700px){.buddy{display:none}}

/* arcade hub */
.abar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:2px 2px 14px}
.abar[hidden]{display:none}
.abar b{font:600 1.2rem 'Fredoka',sans-serif}.abar .grow{flex:1}
.apanel.hub{justify-content:flex-start;align-items:stretch;min-height:0;padding:18px}
.gf{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.gf button{border:0;border-radius:99px;padding:5px 16px;font:600 .98rem 'Fredoka',sans-serif;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 #C3DDF2}
.gf button.on{background:#38B6FF;color:#fff;box-shadow:0 3px 0 #1B8DD6}
.ghub{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.gcard{--b:#B392FF;--d:#7F5FD6;position:relative;border:0;border-radius:24px;background:#fff;box-shadow:0 6px 0 var(--d);padding:0 8px 14px;cursor:pointer;font:inherit;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;overflow:hidden;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s;animation:popin .4s both}
.gcard:hover{transform:translateY(-6px);box-shadow:0 11px 0 var(--d)}
.gcard .gtop{align-self:stretch;background:var(--b);padding:14px 0 10px;margin:0 -8px 4px}
.gcard .ge{font-size:2.8rem;line-height:1;display:block;animation:wig 5s ease-in-out infinite}
.gcard b{font:600 1.1rem 'Fredoka',sans-serif}
.gcard small{font:600 .78rem 'Fredoka',sans-serif;background:#F1F8FF;border-radius:99px;padding:1px 10px}
.big{font-size:3rem!important}
/* game bits */
.pic{font-size:5.4rem;line-height:1}
.slots{display:flex;gap:10px;justify-content:center}
.slot{width:54px;height:62px;border-radius:14px;background:#fff;border-bottom:5px solid #C3DDF2;display:grid;place-items:center;font:700 2rem 'Fredoka',sans-serif;color:var(--ink)}
.slot.on{background:#A9F0CB;border-color:#46AE69}
.letters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lt{width:60px;height:60px;border:0;border-radius:18px;background:#7B4FE0;color:#fff;font:700 1.9rem 'Fredoka',sans-serif;box-shadow:0 5px 0 #4F2BB0;cursor:pointer}
.lt:disabled{opacity:.25;box-shadow:none}
.shake2{animation:shk .3s}
.ogrid{display:grid;gap:8px;width:100%;max-width:440px;min-height:60px}
.oc{aspect-ratio:1;border:0;border-radius:14px;background:#fff;font-size:clamp(1.4rem,5vw,2.4rem);line-height:1;cursor:pointer;box-shadow:0 4px 0 #D5E6F5;padding:0}
.simon{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(300px,80vw)}
.spd{aspect-ratio:1;border:0;border-radius:26px;background:var(--c);opacity:.55;box-shadow:0 6px 0 rgba(0,0,0,.2);cursor:pointer;transition:opacity .1s,transform .1s}
.spd.lit{opacity:1;transform:scale(1.07)}
.cfield{position:relative;width:100%;max-width:640px;height:340px;border-radius:24px;background:#fff radial-gradient(rgba(56,182,255,.14) 3px,transparent 3.6px) 0 0/28px 28px;overflow:hidden;touch-action:none;cursor:ew-resize}
.cfield.hurt{animation:shk .25s;background-color:#FFD9D0}
.basket{position:absolute;bottom:6px;left:0;width:68px;text-align:center;font-size:3.4rem;line-height:1;will-change:transform}
.fall{position:absolute;left:0;top:0;width:40px;text-align:center;font-size:2.2rem;line-height:1;will-change:transform}
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(420px,100%)}
.hole{position:relative;aspect-ratio:1;border:0;background:none;padding:0;cursor:pointer;overflow:hidden;border-radius:0 0 50% 50%/0 0 30% 30%}
.hole .dirt{position:absolute;left:0;right:0;bottom:0;height:42%;background:#8A5A33;border-radius:50% 50% 30% 30%/70% 70% 30% 30%;box-shadow:inset 0 8px 0 #6E4524;z-index:2}
.hole .pest{position:absolute;left:0;right:0;bottom:-30%;text-align:center;font-size:3.2rem;line-height:1;transition:bottom .18s cubic-bezier(.3,1.6,.5,1);z-index:1}
.hole.up .pest{bottom:22%}.hole.hit .pest{transform:scale(.7) rotate(20deg);filter:grayscale(.4)}.hole.ouch{animation:shk .25s}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(300px,80vw)}
.tc{aspect-ratio:1;border:0;border-radius:20px;background:#fff;box-shadow:0 5px 0 #C3DDF2;font-size:2.6rem;line-height:1;cursor:pointer;padding:0}
.tc.win{background:#A9F0CB;box-shadow:0 5px 0 #46AE69}
.mon{position:relative;width:min(240px,64vw);height:290px;margin-top:10px}
.mbody{position:absolute;left:6%;right:6%;top:46px;bottom:0;background:var(--mc,#7BDC9A);border-radius:46% 46% 36% 36%/50% 50% 30% 30%;box-shadow:inset -14px -10px 0 rgba(0,0,0,.1);animation:mbob 2.2s ease-in-out infinite;transition:background .3s}
@keyframes mbob{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03) translateY(-4px)}}
.meyes,.mmouth{position:absolute;left:0;right:0;text-align:center;line-height:1}
.meyes{top:20%;font-size:3.4rem}.mmouth{top:56%;font-size:3.2rem}
.mhat{position:absolute;top:-6px;left:0;right:0;text-align:center;font-size:3.8rem;line-height:1;z-index:2}
.marm{position:absolute;right:-24px;top:55%;font-size:3rem;line-height:1;z-index:2;animation:bob 2s ease-in-out infinite}
.mctl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mctl button{border:0;border-radius:14px;padding:8px 14px;font:600 1rem 'Fredoka',sans-serif;background:#fff;box-shadow:0 4px 0 #C3DDF2;cursor:pointer;color:var(--ink)}
.mctl .sv{background:#22C08A;color:#fff;box-shadow:0 4px 0 #138F65}

/* dance */
.dance .eb{color:var(--ink)}
.dstage{position:relative;max-width:820px;height:300px;margin:0 auto 22px;border-radius:40px;background:#7B4FE0;box-shadow:0 10px 0 #3C1C9C;overflow:hidden;transition:background .25s}
.dstage:before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.14) 3px,transparent 3.6px) 0 0/34px 34px}
.dfloor{position:absolute;left:0;right:0;bottom:0;height:46px;background:#2A1170}
.dj{position:absolute;bottom:30px;width:auto;transform-origin:bottom center;z-index:2}
.dj.d1{left:16%;height:236px}.dj.d2{left:50%;margin-left:-80px;height:216px}.dj.d3{right:16%;height:200px}
.dj.hit{animation:djump .5s ease}
@keyframes djump{0%{transform:translateY(0) rotate(0) scale(1)}35%{transform:translateY(-44px) rotate(-5deg) scale(1.04,.97)}70%{transform:translateY(0) rotate(4deg) scale(.97,1.03)}100%{transform:translateY(0) rotate(0) scale(1)}}
.dnotes{position:absolute;inset:0;pointer-events:none}
.nt2{position:absolute;bottom:90px;font-size:2.4rem;color:#fff;animation:nup 1.2s ease-out forwards}
@keyframes nup{to{transform:translateY(-200px) scale(1.4);opacity:0}}
.pads{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;max-width:900px;margin:0 auto}
.pad{border:0;border-radius:22px;background:var(--c);color:var(--ink);padding:14px 4px 10px;font:600 .95rem 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;gap:2px;touch-action:manipulation;user-select:none}
.pad span{font-size:2.2rem;line-height:1.1}
.pad.on,.pad:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.dctl{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px}
.dcount{background:#fff;border-radius:99px;padding:6px 20px;font:600 1.1rem 'Fredoka',sans-serif}

/* story */
.storybox{text-align:center;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.sscene{font-size:4.2rem;line-height:1.1;animation:bob 3s ease-in-out infinite}
.stext{font:600 1.35rem/1.55 'Quicksand',sans-serif;max-width:34em}
.schoices{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.stip{background:#E3F8EF;border-radius:18px;padding:10px 18px;font-weight:700;max-width:34em}
.spage{font:600 .9rem 'Fredoka',sans-serif;color:var(--ink-soft)}

/* pet */
.petcard{max-width:900px;margin:0 auto;background:#fff;border-radius:34px;box-shadow:0 8px 0 #A8D99A;display:grid;grid-template-columns:1.1fr 1fr;gap:10px;overflow:hidden}
.pstage{position:relative;background:#FFE9B8;min-height:380px;display:flex;align-items:flex-end;justify-content:center}
.pstage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:#7BDC9A}
.petbear{position:relative;z-index:2;height:310px;width:auto;margin-bottom:10px;cursor:pointer;transform-origin:bottom center;animation:breathe 4s ease-in-out infinite}
.petbear.eat{animation:eat .6s ease}.petbear.no{animation:shk .5s}.petbear.giggle{animation:giggle .6s ease}.petbear.hop{animation:bigjump .7s ease 2}
@keyframes eat{0%,100%{transform:scale(1)}30%{transform:scale(1.08,.92)}60%{transform:scale(.95,1.06)}}
@keyframes giggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg) scale(1.03)}75%{transform:rotate(5deg) scale(1.03)}}
.pmeter{position:absolute;left:16px;right:16px;top:14px;display:flex;align-items:center;gap:10px;font:600 1rem 'Fredoka',sans-serif;z-index:3}
.pmeter .mbar{flex:1;background:rgba(42,20,24,.14)}.pmeter .mbar i{background:linear-gradient(90deg,#FF8FB8,#FFC531,#22C08A);transition:width .5s}
.pbubble{position:absolute;top:56px;right:14px;max-width:62%;background:#fff;border-radius:16px;padding:8px 14px;font:600 1.05rem 'Fredoka',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.14);opacity:0;transform:scale(.7);transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1);z-index:3}
.pbubble.on{opacity:1;transform:scale(1)}
.ptrayw{padding:24px 20px;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;text-align:center}
.ptrayw .hint{font-weight:700;color:var(--ink-soft)}
.ptray{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fd{width:78px;height:78px;border:0;border-radius:22px;background:#FFF4D6;box-shadow:0 5px 0 #E6C255;font-size:2.6rem;line-height:1;cursor:pointer;transition:transform .12s}
.fd:hover{transform:translateY(-3px)}
.flyfood{position:fixed;z-index:9000;font-size:2.4rem;line-height:1;pointer-events:none;width:40px;text-align:center}

/* scene maker */
.scm{display:grid;grid-template-columns:1fr 260px;gap:22px;max-width:1040px;margin:0 auto;background:#fff;border-radius:34px;box-shadow:0 8px 0 #8FD0C7;padding:22px}
.sbgs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sbgs button,.sctl button:not(.btn){border:0;border-radius:14px;padding:6px 14px;font:600 .98rem 'Fredoka',sans-serif;background:#EAF7F5;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 #BFE4DF}
.sbgs button.on{background:#22C08A;color:#fff;box-shadow:0 3px 0 #138F65}
.sarea{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;border:6px solid #CFF3EE;overflow:hidden;touch-action:none;user-select:none}
.stk2{position:absolute;transform:translate(-50%,-50%);line-height:1;cursor:grab;touch-action:none;user-select:none;padding:2px}
.stk2.sel{outline:3px dashed #7B4FE0;outline-offset:2px;border-radius:12px}
.sctl{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.sshelf{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-content:start;max-height:430px;overflow:auto;padding:4px}
.sshelf button{aspect-ratio:1;border:0;border-radius:14px;background:#F1FBF9;font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 3px 0 #BFE4DF;padding:0;transition:transform .12s}
.sshelf button:hover{transform:scale(1.15)}

@media(max-width:1100px){.ghub{grid-template-columns:repeat(3,1fr)}.pads{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){
  .petcard{grid-template-columns:1fr}.scm{grid-template-columns:1fr}.sshelf{grid-template-columns:repeat(8,1fr);max-height:none}
  .dstage{height:260px}.dj.d1{height:200px;left:8%}.dj.d2{height:182px;margin-left:-68px}.dj.d3{height:170px;right:8%}
  .parade{height:230px}.w1{--h:116px}.w2{--h:104px}.w3{--h:98px}.ptitle{font-size:.9rem;padding:5px 14px}
  .crit{font-size:1.6rem}
}
@media(max-width:560px){
  .ghub{grid-template-columns:repeat(2,1fr);gap:10px}.gcard .ge{font-size:2.2rem}.gcard b{font-size:.98rem}
  .pads{grid-template-columns:repeat(4,1fr);gap:8px}.pad{font-size:.75rem;padding:10px 2px 8px}.pad span{font-size:1.7rem}
  .sshelf{grid-template-columns:repeat(6,1fr)}
  .scm,.petcard{border-radius:26px}.scm{padding:14px}
  .dstage{height:240px;border-radius:28px}.dj.d1{height:190px}.dj.d2{height:170px;margin-left:-62px}.dj.d3{height:160px}
  .petbear{height:240px}.pstage{min-height:300px}.fd{width:64px;height:64px;font-size:2.1rem}
  .cfield{height:300px}.slot{width:44px;height:52px}.lt{width:52px;height:52px}.stext{font-size:1.15rem}.sscene{font-size:3.2rem}
}
@media(prefers-reduced-motion:reduce){.crit,.fly,.walker,.walker .wk,.road:after,.tile .ic,.gcard .ge,.dstage.party .dp,.dstage.party .up,.dstage.party .hd,.dstage.party .ll,.dstage.party .lr,.dstage.party .d2,.dstage.party .tor,.sscene,.mbody,.petbear,.buddy img{animation:none}}

/* dance — simple */
.dj{z-index:2}
.dj:after{content:none}
.dstage.party .dj{animation:dparty .52s ease-in-out infinite alternate}
.dstage.party .d2{animation-delay:-.26s}.dstage.party .d3{animation-delay:-.13s}
@keyframes dparty{from{transform:translateY(0) rotate(-2.5deg)}to{transform:translateY(-18px) rotate(2.5deg)}}
.dfloor{z-index:1}.dnotes{z-index:3}
/* v6 — piano studio, zoo, space, eco tree, 6 new games, sparkles */
.dark h2,.dark .sh p{color:#fff}.dark .eb{color:var(--ink)}
.band.dark{background-image:radial-gradient(#fff 1.2px,transparent 1.8px),radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.6px);background-size:90px 90px,47px 47px;background-position:0 0,20px 30px}
/* piano */
.pianop{padding:26px 24px 30px}
.plab{font:600 1rem 'Fredoka',sans-serif;color:var(--ink-soft);margin:6px 0 8px}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.psc{border:0;border-radius:99px;padding:8px 14px;background:#F3EDFF;color:var(--ink);font:600 .95rem 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 4px 0 #CDBCF3;transition:transform .1s}
.psc:hover{transform:translateY(-2px)}.psc.on{background:#7B4FE0;color:#fff;box-shadow:0 4px 0 #4F2BB0}
.pmodes{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}.pmodes .btn:disabled{opacity:.5}
.pstat{font:600 1.1rem 'Fredoka',sans-serif;text-align:center;min-height:1.6em;margin:10px 0 6px}
.pnext{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:38px;margin-bottom:10px}
.nb2{min-width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:700 .9rem 'Fredoka',sans-serif;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.nb2.cur{transform:scale(1.35);animation:bob .6s ease-in-out infinite;margin:0 4px}.nb2.more{background:#ddd;color:var(--ink)}
.kbw{position:relative;overflow-x:auto;padding:0 2px 12px;touch-action:manipulation}
.kb{position:relative;display:flex;gap:3px;min-width:680px;height:240px;user-select:none}
.pwk{flex:1;min-width:0;border:0;border-radius:4px 4px 16px 16px;background:linear-gradient(#fff,#F4F1FF);box-shadow:0 7px 0 #BCAAE8,inset 0 -8px 0 rgba(123,79,224,.08);display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;cursor:pointer;transition:transform .07s,box-shadow .07s;touch-action:manipulation}
.pwk .nl{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;font:700 .85rem 'Fredoka',sans-serif;display:grid;place-items:center;pointer-events:none}
.blk{position:absolute;top:0;width:4.2%;height:62%;border:0;border-radius:0 0 10px 10px;background:linear-gradient(#3b2a66,#1c1236);box-shadow:0 6px 0 #0d0820;z-index:2;cursor:pointer;touch-action:manipulation;transition:transform .07s}
.pwk.hit{transform:translateY(6px);box-shadow:0 1px 0 #BCAAE8;background:linear-gradient(#FFF1A8,#FFD04D)}
.blk.hit{transform:translateY(5px);background:linear-gradient(#FF8FB8,#E85A9A)}
.pwk.next,.blk.next{animation:nextk .7s ease-in-out infinite alternate}
@keyframes nextk{from{box-shadow:0 7px 0 #BCAAE8,0 0 0 0 rgba(255,197,49,.9)}to{box-shadow:0 7px 0 #BCAAE8,0 0 0 8px rgba(255,197,49,0),inset 0 0 0 4px #FFC531;background:#FFF6CF}}
.blk.next{background:linear-gradient(#FFC531,#E8A800)}
.pwk.bad,.blk.bad{animation:shk .3s}
.pfx{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none}
.pn{position:absolute;top:-4px;font-size:1.8rem;color:var(--c);animation:nup2 1.1s ease-out forwards;text-shadow:0 2px 0 rgba(0,0,0,.15)}
@keyframes nup2{to{transform:translateY(-130px) rotate(20deg) scale(1.4);opacity:0}}
/* zoo */
.zoop{max-width:980px;margin:0 auto}
.zbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.zc{font:600 1.1rem 'Fredoka',sans-serif}
.zmsg{font:600 1.5rem 'Fredoka',sans-serif;text-align:center;min-height:2.2em;margin:12px 0;color:var(--ink)}
.zgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.za{position:relative;border:0;border-radius:26px;background:var(--c);padding:14px 4px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 7px 0 rgba(42,20,24,.18);font:600 1rem 'Fredoka',sans-serif;color:var(--ink);touch-action:manipulation}
.za .ze{font-size:3.6rem;line-height:1.1;display:block;animation:bob 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
.za:hover{transform:translateY(-4px) rotate(-2deg)}
.za.talk{animation:zt .6s ease}.za.talk .ze{animation:none}
@keyframes zt{0%{transform:scale(1)}25%{transform:translateY(-20px) rotate(-8deg) scale(1.12)}50%{transform:translateY(0) rotate(8deg) scale(.95,1.06)}75%{transform:translateY(-8px) rotate(-4deg)}100%{transform:scale(1)}}
.zb{position:absolute;top:-16px;left:50%;translate:-50% 0;background:#fff;border-radius:14px;padding:5px 12px;font:700 1rem 'Fredoka',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.15);white-space:nowrap;animation:popin .25s ease both;z-index:3}
/* space */
.spw{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:center;max-width:1040px;margin:0 auto}
.solar{position:relative;width:100%;max-width:560px;aspect-ratio:1;margin:0 auto;container-type:inline-size;border-radius:50%;background:radial-gradient(circle,rgba(123,79,224,.35),transparent 70%)}
.sunc{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:12cqw;line-height:1;filter:drop-shadow(0 0 18px #FFC531);animation:breathe 3s ease-in-out infinite}
.orb{position:absolute;left:50%;top:50%;translate:-50% -50%;border:1.5px dashed rgba(255,255,255,.25);border-radius:50%;animation:spin linear infinite}
.pl{position:absolute;left:50%;top:0;translate:-50% -50%;width:var(--s);height:var(--s);min-width:10px;min-height:10px;border-radius:50%;border:0;padding:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.65),transparent 45%),var(--c);box-shadow:0 0 10px rgba(255,255,255,.3);cursor:pointer;animation:spin linear infinite reverse;font-size:var(--s)}
.pl:before{content:"";position:absolute;inset:-9px}
.pl.sel{outline:3px solid #FFC531;outline-offset:3px}
.pl.ring:after{content:"";position:absolute;left:-45%;right:-45%;top:30%;bottom:30%;border:3px solid #E8C46B;border-radius:50%;transform:rotate(-20deg);pointer-events:none}
.pinfo{text-align:center;padding:26px}.pinfo h3{font-size:1.8rem;margin:10px 0 6px}.pinfo p{font-weight:600;line-height:1.45}
.pbig{width:96px;height:96px;border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:3.6rem;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.pbig.pop{animation:popin .35s ease}
.pmeta{display:inline-block;margin:10px 0 16px;padding:5px 14px;border-radius:99px;background:#F1EAFF;font:600 .95rem 'Fredoka',sans-serif}.pmeta:empty{display:none}
.blastov{position:fixed;inset:0;z-index:9000;pointer-events:none;background:rgba(20,16,70,.55);display:grid;place-items:center}
.blastov b{font:700 12rem 'Fredoka',sans-serif;color:#fff;text-shadow:0 8px 0 #7B4FE0;animation:popin .5s ease}
.rocket{position:absolute;left:50%;bottom:-10%;font-size:8rem}
/* tree */
.treew{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;max-width:1040px;margin:0 auto;align-items:stretch}
.tstage{position:relative;min-height:440px;border-radius:36px;background:linear-gradient(#9ED8FF 0 70%,#7BDC9A 70%);box-shadow:0 10px 0 #46AE69;overflow:hidden}
.sunb{position:absolute;right:18px;top:12px;font-size:3.4rem;animation:spin 20s linear infinite}
.tground{position:absolute;left:0;right:0;bottom:0;height:30%;background:#7BDC9A}
.tgrow{position:absolute;left:50%;bottom:24%;translate:-50% 0;z-index:2;transform-origin:50% 100%;animation:sway 3.5s ease-in-out infinite alternate}
.tm{display:block;font-size:calc(var(--s)*96px);line-height:1}
.tgrow.boing{animation:bigjump .7s ease}
@keyframes sway{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
.tdeco{position:absolute;inset:0;z-index:3;pointer-events:none}.td{position:absolute;font-size:2rem;animation:bob 2.4s ease-in-out infinite;animation-direction:alternate}
.tlvl{position:absolute;left:12px;top:12px;background:#fff;border-radius:18px;padding:8px 14px;font:600 1.05rem 'Fredoka',sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.15);z-index:4;display:flex;flex-direction:column}.tlvl small{font-weight:600;color:var(--ink-soft);font-size:.82rem}
.tlist h3{margin-bottom:14px}.tchecks{display:grid;gap:10px}
.tck{display:flex;align-items:center;gap:12px;border:0;border-radius:18px;padding:10px 14px;background:#F2FBE3;box-shadow:0 4px 0 #CFE7A6;font:600 1rem 'Fredoka',sans-serif;color:var(--ink);cursor:pointer;text-align:left;transition:transform .1s}
.tck:hover{transform:translateX(4px)}.tck span{font-size:1.7rem}.tck b{flex:1}.tck i{font-style:normal}.tck.done{background:#BFF0D0;box-shadow:0 4px 0 #46AE69}
/* games */
.qq{font:700 1.5rem 'Fredoka',sans-serif;text-align:center;margin:14px auto 18px;max-width:560px;line-height:1.3}
.qopts{display:grid;gap:12px;max-width:520px;margin:0 auto}
.qo{border:0;border-radius:20px;padding:14px 18px;background:var(--c);color:#fff;font:600 1.15rem 'Fredoka',sans-serif;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.22)}.qo.good{background:#22C08A;animation:popin .3s}.qo.bad{background:#999;animation:shk .3s}.qo:disabled{cursor:default}
.eopts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:520px;margin:14px auto 0}
.eo{aspect-ratio:1;border:0;border-radius:22px;background:var(--c);font-size:2.8rem;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.22);line-height:1}.eo.good{background:#22C08A;animation:popin .3s}.eo.bad{background:#999;animation:shk .3s}
.pseq{width:100%;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:18px 0}
.pseq span{width:58px;height:58px;border-radius:16px;background:#fff;box-shadow:0 4px 0 #D9CBA6;display:grid;place-items:center;font:700 1.9rem 'Fredoka',sans-serif;border:3px solid #FFE49A}.pseq .q{background:#FFC531;animation:bob .7s ease-in-out infinite}
.slide{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,330px);margin:14px auto}
.stl{aspect-ratio:1;border:0;border-radius:18px;background:var(--c);color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.22);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;line-height:1.05}.stl b{font-size:1.8rem}.stl span{font-size:1.5rem}.stl.e{background:rgba(0,0,0,.08);box-shadow:none}
.ctw{font:700 4.4rem 'Fredoka',sans-serif;text-align:center;margin:14px 0;letter-spacing:.04em;min-height:1.2em}
.cbtns{display:flex;gap:16px;justify-content:center;margin-bottom:14px}.cb{width:74px;height:74px;border-radius:50%;border:5px solid #fff;box-shadow:0 5px 0 rgba(0,0,0,.25);cursor:pointer}
.rfield{position:relative;width:100%;height:380px;max-width:420px;margin:12px auto;border-radius:26px;overflow:hidden;background:linear-gradient(#1E1B5E,#4F2BB0);box-shadow:0 7px 0 #14104A;touch-action:manipulation;user-select:none}
.rfield.hit{animation:shk .25s}.rln{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed rgba(255,255,255,.2)}
.rkt{position:absolute;bottom:14px;translate:-50% 0;font-size:3.4rem;line-height:1;transition:left .12s;filter:drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.rit{position:absolute;top:0;font-size:2.6rem;line-height:1;will-change:transform}.rit{translate:-50% 0}
/* sparkle trail */
.trl{position:fixed;z-index:9999;pointer-events:none;font-size:15px;translate:-50% -50%;animation:trl .8s ease-out forwards}
@keyframes trl{to{transform:translate(var(--dx),34px) scale(.3) rotate(120deg);opacity:0}}
@media(max-width:820px){.spw,.treew{grid-template-columns:1fr}.zgrid{grid-template-columns:repeat(3,1fr)}.tstage{min-height:360px}.blastov b{font-size:8rem}.pianop{padding:18px 12px 22px}}
@media(max-width:480px){.zgrid{gap:10px}.za .ze{font-size:2.8rem}.ctw{font-size:3rem}.eopts{gap:8px}.eo{font-size:2.2rem}.zmsg{font-size:1.2rem}}
@media(prefers-reduced-motion:reduce){.orb,.pl,.tgrow,.za .ze,.sunb,.td,.sunc{animation:none}}

.btn[hidden],.apanel [hidden]{display:none!important}
.pinfo .btn.big{font-size:1.4rem;padding:12px 22px}

/* hero buttons — calmer */
.hero .cta{gap:12px}
.hero .btn.cta1,.hero .btn.cta2{font:600 1rem 'Fredoka',sans-serif;letter-spacing:.01em;padding:12px 26px;border-radius:12px;min-height:0;text-transform:none}
.hero .btn.cta1{background:#FFC531;color:#2A1418;box-shadow:0 4px 0 #D9A312}
.hero .btn.cta2{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.hero .btn.cta1:hover{transform:translateY(-2px)}.hero .btn.cta2:hover{background:rgba(255,255,255,.14)}
/* piano — clean */
.pianop{max-width:960px;margin:0 auto;padding:26px 28px 30px}
.ptop{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.psel{display:flex;flex-direction:column;gap:6px;font:600 .9rem 'Fredoka',sans-serif;color:var(--ink-soft)}
.psel select{appearance:none;-webkit-appearance:none;border:2px solid #E3D8FA;border-radius:12px;background:#FAF7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237B4FE0' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding:11px 38px 11px 14px;font:600 1.05rem 'Fredoka',sans-serif;color:var(--ink);cursor:pointer}
.psel select:focus{outline:3px solid #CDBCF3}
.pmodes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 4px}
.pgap{flex:1}
.plink{border:0;background:none;font:600 .92rem 'Fredoka',sans-serif;color:#6A4BC4;cursor:pointer;padding:6px 8px;border-radius:8px}.plink:hover{background:#F3EDFF}.plink:disabled{opacity:.4;cursor:default}
.pstat{font:600 1.05rem 'Fredoka',sans-serif;text-align:center;min-height:1.5em;margin:16px 0 8px;color:var(--ink)}
.pnext{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;min-height:34px;margin-bottom:12px}
.nb2{min-width:30px;height:30px;font-size:.85rem}.nb2.cur{transform:scale(1.2);animation:none;box-shadow:0 0 0 3px #FFC531}
.kbw{background:#2B1A63;border-radius:18px;padding:14px 14px 18px;overflow-x:auto}
.kb{height:200px;gap:2px;min-width:640px}
.pwk{position:relative;border-radius:2px 2px 10px 10px;background:#fff;box-shadow:0 5px 0 #B8A7E6;padding-bottom:8px;align-items:flex-end}
.pwk:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:0 0 10px 10px;background:var(--c);opacity:.9}
.pwk .nl{width:auto;height:auto;background:none;color:#8A7BB8;font:600 .8rem 'Fredoka',sans-serif;margin-bottom:12px}
.blk{width:4%;height:60%;border-radius:0 0 7px 7px;background:#1a1040;box-shadow:0 4px 0 #0a0624}
.pwk.hit{background:#FFE9A0;box-shadow:0 1px 0 #B8A7E6;transform:translateY(4px)}
.blk.hit{background:#7B4FE0;transform:translateY(3px)}
.pn{font-size:1.4rem}
@media(max-width:600px){.ptop{grid-template-columns:1fr}.pianop{padding:18px 14px 22px}.pgap{display:none}}

@media print{body.printing > *:not(#printarea){display:none!important}#printarea{display:block!important}#printarea img{width:100%;height:auto}@page{margin:8mm}}
#printarea{display:none}
/* WordPress admin bar (only for logged-in admins) */
@media(min-width:783px){.admin-bar header.site{top:32px}.admin-bar .zn{top:94px}}
@media(min-width:601px) and (max-width:782px){.admin-bar header.site{top:46px}.admin-bar .zn{top:108px}}
html.skz-html{margin-top:0}
.skip-link,.screen-reader-shortcut{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;z-index:99999;background:#fff;padding:8px 12px}

/* Main navigation click reliability — keep the nav above page content */
header.site {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  isolation: isolate !important;
}
header.site .nav {
  position: relative !important;
  z-index: 100000 !important;
  isolation: isolate !important;
}
header.site #mainnav {
  z-index: 100001 !important;
  pointer-events: auto !important;
}
header.site #mainnav a,
header.site .nav > a,
header.site .nav button {
  position: relative !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
}
/* Decorative overlays must never intercept navigation clicks. */
header.site::before,
header.site::after,
header.site .nav::before,
header.site .nav::after { pointer-events: none !important; }
@media (min-width: 981px) {
  header.site #mainnav { position: absolute !important; }
}
@media (max-width: 980px) {
  header.site #mainnav { position: absolute !important; }
}