*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1f1a45;touch-action:none;user-select:none;-webkit-user-select:none}
body{font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;color:#2b2350}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
 background:radial-gradient(circle at 12% 0,#fff3b8 0,transparent 42%),radial-gradient(circle at 100% 30%,#ffd1ea 0,transparent 40%),linear-gradient(#bfeaff 0,#e9f9ff 55%,#c9f2b3 55.1%,#a6e08a 100%)}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
.top{position:absolute;left:0;right:0;top:0;height:96px;display:flex;align-items:center;gap:14px;padding:0 26px;z-index:20}
.spacer{flex:1}
.btn{font:inherit;font-weight:900;border:0;border-radius:26px;padding:12px 26px;font-size:30px;color:#2b2350;background:#fff;box-shadow:0 6px 0 #cdbfe8,0 10px 18px rgba(60,30,120,.2);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:64px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #cdbfe8}
.btn.sm{font-size:26px;padding:8px 20px;min-height:56px}
.btn.big{font-size:48px;padding:16px 46px;min-height:104px;border-radius:36px}
.btn.go{background:linear-gradient(#5be38d,#1fb766);color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.3);box-shadow:0 8px 0 #12874a,0 14px 24px rgba(0,80,40,.3)}
.btn.go.ready{animation:pulse 1s ease-in-out infinite}
.btn.go.ready::after{content:"";}
.btn.warn{background:linear-gradient(#ffd45e,#ff9a2e);color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.3);box-shadow:0 8px 0 #c7690c}
@keyframes pulse{50%{transform:scale(1.08)}}
.stars{background:#fff;border-radius:99px;padding:8px 22px;font-size:34px;font-weight:900;box-shadow:0 5px 0 #cdbfe8}
.pips{display:flex;gap:10px;margin-left:12px}.pips i{width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid #8e7bd0;display:block}
.pips i.on{background:#ffd23f;border-color:#e0a000;box-shadow:0 0 0 4px #fff3}.pips i.done{background:#2fbf71;border-color:#12874a}
.banner{position:absolute;left:30px;right:30px;top:100px;height:240px;display:flex;align-items:center;gap:22px;z-index:10}
#mascot{width:200px;height:230px;border:0;background:none;padding:0;cursor:pointer;flex:none;transform-origin:50% 100%;animation:idle 3s ease-in-out infinite}
@keyframes idle{50%{transform:translateY(-6px)}}
#mascot .beak{transform-origin:100px 108px}
#mascot.talk .beak{animation:talk .22s ease-in-out infinite}
@keyframes talk{50%{transform:scaleY(.55)}}
#mascot .eyes{animation:blink 4s infinite;transform-origin:100px 88px}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
#mascot .wingL{transform-origin:46px 90px}#mascot .wingR{transform-origin:154px 90px}
#mascot.cheer{animation:dance .5s ease-in-out infinite}
#mascot.cheer .wingL{animation:wl .25s ease-in-out infinite alternate}#mascot.cheer .wingR{animation:wr .25s ease-in-out infinite alternate}
@keyframes dance{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-34px) rotate(6deg)}}
@keyframes wl{to{transform:rotate(-50deg)}}@keyframes wr{to{transform:rotate(50deg)}}
#mascot.oops{animation:shake .5s}
@keyframes shake{20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(5deg)}}
.bubble{position:relative;flex:1;background:#fff;border:6px solid #8e7bd0;border-radius:40px;padding:22px 34px;font-size:56px;line-height:1.15;font-weight:900;box-shadow:0 8px 0 #cdbfe8;min-height:140px;display:flex;align-items:center}
.bubble::before{content:"";position:absolute;left:-30px;top:50%;margin-top:-24px;border:24px solid transparent;border-right:30px solid #8e7bd0;border-left:0}
.bubble::after{content:"";position:absolute;left:-18px;top:50%;margin-top:-18px;border:18px solid transparent;border-right:24px solid #fff;border-left:0}
#scene{position:absolute;left:30px;right:30px;top:352px;bottom:150px}
.view{position:absolute;inset:0}
.view[hidden]{display:none}
.foot{position:absolute;left:30px;right:30px;bottom:22px;height:110px;display:flex;align-items:center;gap:20px;z-index:20}
/* menu */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;height:100%;padding-bottom:140px}
.act{font:inherit;border:6px solid #fff;border-radius:48px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 12px 0 rgba(0,0,0,.18),0 22px 30px rgba(60,30,120,.25);transition:transform .15s}
.act:active{transform:translateY(8px)}.act:hover{transform:translateY(-6px)}
.act h2{margin:0;font-size:46px;text-shadow:0 3px 4px rgba(0,0,0,.3);text-align:center;line-height:1.05;padding:0 10px}
.act .art{font-size:170px;line-height:1;position:relative;display:flex;align-items:center;filter:drop-shadow(0 12px 8px rgba(0,0,0,.3))}
.act .art span{font-size:100px;margin-left:-20px;align-self:flex-end}
.act .art .cookie{width:100px;height:100px}
.a1{background:linear-gradient(#ffb347,#ff6f3c)}.a2{background:linear-gradient(#c8873f,#8a4b1f)}.a3{background:linear-gradient(#ff7eb3,#d6307f)}.a4{background:linear-gradient(#58d68d,#1e9e63)}
/* shared 3D bits */
.dots{display:grid;grid-template-columns:repeat(5,34px);gap:8px}
.dots i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 30% 28%,#fff 0,#ff7a7a 30%,#d62f2f 85%);box-shadow:0 4px 5px rgba(0,0,0,.3)}
.dots i.b{background:radial-gradient(circle at 30% 28%,#fff 0,#7ab8ff 30%,#2f6bd6 85%)}
.card{background:#fff;border-radius:36px;border:6px solid #8e7bd0;box-shadow:0 8px 0 #cdbfe8;padding:16px 26px;display:flex;align-items:center;gap:22px}
.card .num{font-size:130px;font-weight:900;line-height:1;color:#d6307f;text-shadow:0 5px 0 #ffd0e6}
.scene{position:absolute;inset:0;display:flex}
.drag{cursor:grab;touch-action:none;position:relative}
.ghost{position:absolute;z-index:80;pointer-events:none;filter:drop-shadow(0 18px 14px rgba(0,0,0,.35));transform:scale(1.12)}
.ghost.back{transition:left .3s,top .3s}
.glow{outline:10px dashed #ffd23f;outline-offset:6px;border-radius:40px;animation:glow 1s ease-in-out infinite}
@keyframes glow{50%{outline-color:#fff}}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes bob{50%{transform:translateY(-14px)}}
@keyframes jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-50px) scale(1.06)}}
/* feed */
.feed{align-items:center;justify-content:space-around;padding-bottom:20px}
.feed .zoo{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px}
.feed .animal{font-size:330px;line-height:1;filter:drop-shadow(0 18px 12px rgba(0,0,0,.3));position:relative}
.feed .animal.chew{animation:jump .45s}
.feed .order{position:absolute;top:-4px;left:-70px;z-index:3;transform:scale(.8);transform-origin:top right}
.feed .tray{min-height:150px;min-width:560px;max-width:760px;background:#fff8;border:6px dashed #8e7bd0;border-radius:40px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:8px;position:relative}
.feed .tray .lbl{position:absolute;left:18px;top:-30px;background:#fff;border-radius:20px;padding:2px 18px;font-size:30px;font-weight:900}
.feed .tray .item{font-size:100px;line-height:1;cursor:pointer;animation:pop .3s;filter:drop-shadow(0 6px 4px rgba(0,0,0,.3))}
.feed .count{position:absolute;right:-96px;top:50%;margin-top:-50px;width:100px;height:100px;border-radius:50%;background:#2b2350;color:#fff;font-size:70px;font-weight:900;display:grid;place-items:center}
.feed .pile{width:640px;height:520px;border-radius:50% 50% 40% 40%/30% 30% 60% 60%;background:radial-gradient(circle at 40% 25%,#e9b36a,#a8691f 90%);border:8px solid #7a4710;box-shadow:inset 0 18px 30px rgba(0,0,0,.25),0 14px 0 #6a3b0c;position:relative;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:2px;padding:30px 40px}
.feed .pile .fruit{font-size:130px;line-height:1.05;filter:drop-shadow(0 8px 5px rgba(0,0,0,.35))}
.feed .pile .fruit.gone{visibility:hidden}
.feed .mid{display:flex;flex-direction:column;align-items:center;gap:18px}
/* bake */
.bake{align-items:center;justify-content:space-around;padding-bottom:16px;gap:10px}
.cookie{display:inline-block;width:110px;height:110px;border-radius:50%;background:
 radial-gradient(circle at 30% 34%,#4a2a14 0 8px,transparent 9px),radial-gradient(circle at 64% 28%,#4a2a14 0 7px,transparent 8px),radial-gradient(circle at 52% 66%,#4a2a14 0 9px,transparent 10px),radial-gradient(circle at 25% 70%,#4a2a14 0 6px,transparent 7px),radial-gradient(circle at 76% 62%,#4a2a14 0 6px,transparent 7px),
 radial-gradient(circle at 35% 30%,#f4c27f,#d28a3c 65%,#a8651f);box-shadow:inset -8px -10px 14px rgba(90,40,0,.4),0 8px 8px rgba(0,0,0,.3)}
.bake .oven{width:400px;height:430px;border-radius:40px;background:linear-gradient(#9aa4b5,#6d788c);border:8px solid #4d566a;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px;box-shadow:0 10px 0 #3d4558}
.bake .oven h3,.bake .shelf h3,.bake .packbox h3{margin:0;font-size:34px;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.4)}
.bake .tray2{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;flex:1;background:#2a2f3c;border-radius:26px;padding:12px;width:100%}
.bake .tray2 .cookie{cursor:grab;touch-action:none}
.bake .packbox{width:520px;display:flex;flex-direction:column;align-items:center;gap:8px}
.bake .box{width:500px;height:300px;position:relative;background:linear-gradient(#e7b778,#c58a45);border:8px solid #8f5a22;border-radius:26px;box-shadow:inset 0 12px 20px rgba(0,0,0,.25),0 10px 0 #7a4a18;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:20px;place-items:center}
.bake .box .slot{width:78px;height:78px;border-radius:50%;border:4px dashed #8f5a22aa;display:grid;place-items:center}
.bake .box .slot .cookie{width:72px;height:72px;animation:pop .3s}
.bake .box .lid{position:absolute;inset:-8px;border-radius:26px;background:linear-gradient(#ffcf7a,#e0993c);border:8px solid #8f5a22;display:grid;place-items:center;font-size:120px;font-weight:900;color:#fff;text-shadow:0 4px 0 #8f5a22;transform:translateY(-130%);transition:transform .45s}
.bake .box.closed .lid{transform:none}
.bake .box.glow{outline-offset:12px}
.bake .eq{font-size:46px;font-weight:900;background:#fff;border-radius:30px;padding:6px 24px;border:5px solid #8e7bd0}
.bake .eq b{color:#d6307f;font-size:62px}
.bake .shelf{width:660px;height:430px;border-radius:40px;background:linear-gradient(#fff4dc,#f0d9a8);border:8px solid #b98a45;box-shadow:0 10px 0 #8f6a2c;padding:14px 20px;display:flex;flex-direction:column;gap:10px}
.bake .shelf h3{color:#7a4a18;text-shadow:none}
.bake .boxes{display:flex;gap:10px;flex-wrap:wrap;min-height:120px;align-items:center;background:#fff7;border-radius:20px;padding:8px}
.minibox{width:110px;height:92px;border-radius:14px;background:linear-gradient(#ffcf7a,#d58b30);border:5px solid #8f5a22;display:grid;place-items:center;font-size:48px;font-weight:900;color:#fff;text-shadow:0 3px 0 #8f5a22;cursor:pointer;animation:pop .35s;position:relative;box-shadow:0 6px 0 #7a4a18}
.minibox::after{content:"";position:absolute;left:46px;top:-5px;width:14px;bottom:-5px;background:#e8453c;opacity:.85}
.bake .plate{flex:1;border-radius:26px;background:radial-gradient(circle,#fff 0,#f4f4f4 60%,#d9d9e3 100%);border:6px solid #b8b8cc;display:flex;flex-wrap:wrap;gap:6px;align-content:center;justify-content:center;padding:10px;position:relative}
.bake .plate .cookie{width:76px;height:76px;cursor:pointer;animation:pop .3s}
.bake .plate .tag,.bake .boxes .tag{position:absolute;left:12px;top:-6px;font-size:28px;font-weight:900;color:#7a4a18;background:#ffe9b8;border-radius:12px;padding:0 12px}
.bake .boxes{position:relative}
.bake .sample{display:flex;gap:8px;align-items:center;font-size:40px}
.bake .sample .minibox{width:56px;height:48px;font-size:24px;animation:none;box-shadow:none;border-width:3px}.bake .sample .cookie{width:36px;height:36px;box-shadow:none}
/* pizza */
.pizza{align-items:center;justify-content:center;gap:50px;padding-bottom:10px}
.pizza .friends{display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center}
.pizza .friend{width:300px;height:260px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}
.pizza .face{font-size:130px;line-height:1;position:relative;z-index:2;filter:drop-shadow(0 8px 6px rgba(0,0,0,.3))}
.pizza .plate{width:230px;height:120px;border-radius:50%;background:radial-gradient(#fff,#e9e9f3 70%,#bcbcd2);border:5px solid #aaaac4;margin-top:-30px;position:relative;display:grid;place-items:center;box-shadow:0 10px 0 #9a9ab6}
.pizza .plate svg{position:absolute;filter:drop-shadow(0 4px 3px rgba(0,0,0,.3))}
.pizza .friend.happy .face{animation:jump .6s 2}
.pizza .friend.sad .face{animation:shake .5s}
.pizza .field{position:relative;width:480px;height:480px;flex:none}
.pizza .field svg.piece{position:absolute;transition:transform .5s;cursor:grab;touch-action:none;filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));pointer-events:none}
.pizza .field svg.piece *{pointer-events:auto}
.pizza .overlay{position:absolute;inset:0;width:480px;height:480px}
.pizza .cutline{stroke:#fff;stroke-width:8;stroke-dasharray:18 14;stroke-linecap:round;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));animation:dash 1s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.pizza .hit{stroke:transparent;stroke-width:90;cursor:pointer;pointer-events:stroke}
.pizza .choice{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;gap:40px;justify-content:center;z-index:30}
.pizza .opt{font:inherit;border:6px solid #8e7bd0;background:#fff;border-radius:36px;padding:18px 40px;display:flex;align-items:center;gap:20px;font-size:54px;font-weight:900;cursor:pointer;box-shadow:0 8px 0 #cdbfe8;color:#2b2350}
.pizza .opt:active{transform:translateY(5px)}
.pizza .opt svg{width:130px;height:130px}
.pizza .opt b{font-size:90px;color:#d6307f}
.veil{position:absolute;inset:-10px;background:#fff9;border-radius:40px;z-index:25}
/* frog */
.frog{flex-direction:column;align-items:center;justify-content:center;gap:30px}
.frog .eq{font-size:96px;font-weight:900;background:#fff;border:6px solid #8e7bd0;border-radius:36px;padding:0 50px;box-shadow:0 8px 0 #cdbfe8}
.frog .eq b{color:#d6307f}
.frog .pond{position:relative;background:linear-gradient(#5fd0f2,#2a9fd6);border:8px solid #fff;border-radius:60px;padding:46px 30px;box-shadow:0 12px 0 #1c7fb0;width:1700px}
.frog .pads{display:grid;grid-template-columns:repeat(11,1fr);gap:24px 10px}
.frog .pad{height:110px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8ff07a,#2fb344 70%,#1e8a30);box-shadow:0 8px 0 #166a24,inset -6px -8px 12px rgba(0,0,0,.2);display:grid;place-items:center;font-size:52px;font-weight:900;color:#fff;text-shadow:0 3px 3px rgba(0,0,0,.4);cursor:pointer;position:relative;clip-path:none}
.frog .pad:active{transform:translateY(5px)}
.frog .pad.start{outline:8px solid #ffd23f;outline-offset:4px}
.frog .pad.hint{animation:glow 1s infinite;outline:8px dashed #ffd23f;outline-offset:4px}
.frog .pad.hide{visibility:hidden}
.frog .frogger{position:absolute;font-size:120px;line-height:1;z-index:5;pointer-events:none;transition:left .38s cubic-bezier(.3,.7,.4,1),top .38s;filter:drop-shadow(0 10px 6px rgba(0,0,0,.35))}
.frog .frogger.hop{animation:jump .38s}
#hand{position:absolute;width:110px;height:140px;z-index:95;pointer-events:none;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4));transform-origin:30px 10px}
#hand[hidden]{display:none}
/* portrait */
#stage.portrait .banner{height:250px}
#stage.portrait .bubble{font-size:50px}
#stage.portrait .top .btn.sm{font-size:22px;padding:6px 14px}
#stage.portrait #gradesLink{display:none}
#stage.portrait .acts{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
#stage.portrait .scene{flex-wrap:wrap}
#stage.portrait .feed{flex-direction:column}
#stage.portrait .feed .pile{width:760px;height:380px;padding:10px 40px}
#stage.portrait .feed .pile .fruit{font-size:110px}
#stage.portrait .feed .animal{font-size:260px}
#stage.portrait .feed .tray{min-width:700px}
#stage.portrait .bake{flex-direction:column;flex-wrap:nowrap;gap:18px}
#stage.portrait .bake .oven{width:900px;height:210px;flex-direction:row;align-items:center}
#stage.portrait .bake .oven h3{writing-mode:vertical-rl;transform:rotate(180deg);font-size:26px}
#stage.portrait .bake .shelf{width:900px;height:360px}
#stage.portrait .bake .box{height:260px}
#stage.portrait .pizza{flex-wrap:nowrap;gap:12px;flex-direction:column}
#stage.portrait .pizza .friends{flex-direction:row;gap:10px}
#stage.portrait .pizza .friend{width:240px;height:230px}
#stage.portrait .frog .pond{width:1000px;padding:40px 16px}
#stage.portrait .frog .pad{height:80px;font-size:40px}
#stage.portrait .frog .eq{font-size:80px}
#stage.portrait .frog .frogger{font-size:90px}
.foot[hidden]{display:none}
.act .art{margin-bottom:24px}
.feed .zoo{min-width:780px}
.feed .order{top:30px;left:-10px;transform:scale(.72);transform-origin:top left}
.feed .animal{font-size:300px}
.feed .count{right:-110px}
.bake .box{overflow:hidden}
.bake .oven{height:300px;width:400px}
.bake .oven h3{font-size:28px}
.bake .tray2 .cookie{width:84px;height:84px}
.bake .eq{font-size:34px;white-space:nowrap;padding:4px 16px}.bake .eq b{font-size:50px}
.bake .box{height:270px}
.bake .shelf{height:560px}
.bake .packbox h3{font-size:28px}
.bake .plate{min-height:150px}
.bake .order{padding:8px 16px}.bake .order .num{font-size:100px}
#stage.portrait .bake .oven{height:200px;width:900px}
.bake .boxes{padding-top:26px}.bake .plate{padding-top:26px}
#stage.portrait .pizza{align-items:center;justify-content:center}
#stage.portrait .pizza .friends{width:100%;justify-content:center}
#stage.portrait .top{gap:8px;padding:0 14px}
#stage.portrait .btn.sm{white-space:nowrap}
#stage.portrait .stars{white-space:nowrap;font-size:26px;padding:4px 14px}
#stage.portrait .feed{flex-direction:column;flex-wrap:nowrap;justify-content:space-around}
#stage.portrait .feed .zoo{min-width:0;width:100%}
#stage.portrait .feed .pile{width:780px;height:300px}
#stage.portrait .feed .pile .fruit{font-size:90px}
#stage.portrait .feed .animal{font-size:230px}
#stage.portrait .feed .tray{min-width:0;width:760px;min-height:120px}
#stage.portrait .feed .order{left:40px;top:10px}
#stage.portrait .feed .count{right:-10px;top:-40px;margin:0;width:80px;height:80px;font-size:54px}
#stage.portrait .bake>div:first-child{flex-direction:row!important;gap:14px!important}
#stage.portrait .bake .oven{width:560px;height:170px;padding:8px}
#stage.portrait .bake .tray2 .cookie{width:60px;height:60px}
#stage.portrait .bake .box{height:230px}
#stage.portrait .bake .shelf{width:960px;height:300px;padding:8px 16px;gap:6px}
#stage.portrait .bake .boxes{min-height:90px}
#stage.portrait .bake .plate{min-height:90px}
#stage.portrait .bake .plate .cookie{width:56px;height:56px}
#stage.portrait .bake .shelf .btn.big{min-height:70px;font-size:36px;padding:6px 30px}
#stage.portrait .bake .packbox{width:auto}
#stage.portrait .bake>div:first-child{width:100%;justify-content:center}
#stage.portrait .bake .oven{width:480px}
#stage.portrait .bake .order .num{font-size:70px}
#stage.portrait .bake .sample{display:none}
#stage.portrait .bake .shelf{height:340px}