:root { --ink:#293a35; --cream:#fff9e9; --green:#267c63; --orange:#f28c45; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#ccebc7; color:var(--ink); font-family:Nunito, "Arial Rounded MT Bold", Arial, sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }
.game-shell { min-height:100vh; overflow:hidden; background:linear-gradient(#a9dded 0 45%, #a8d87f 45%); position:relative; }
header { height:74px; padding:10px clamp(16px,4vw,52px); display:flex; justify-content:space-between; align-items:center; background:rgba(255,249,233,.95); position:relative; z-index:10; box-shadow:0 3px 0 rgba(41,58,53,.12); }
.brand { border:0; background:none; color:#276e59; font-family:Georgia,serif; font-size:clamp(22px,3vw,34px); font-weight:900; }
.header-actions { display:flex; gap:10px; }.header-actions button { border:2px solid #d8dbc5; border-radius:20px; background:white; padding:10px 15px; font-weight:900; box-shadow:0 3px 0 #c8c9b9; }
.welcome { min-height:calc(100vh - 74px); display:grid; grid-template-columns:1.1fr 1fr; align-items:center; position:relative; padding:40px clamp(22px,8vw,120px); }
.welcome:after { content:""; position:absolute; bottom:-70px; left:-5%; width:110%; height:38%; background:#76b95d; border-radius:50% 50% 0 0; z-index:0; }
.welcome-copy { position:relative; z-index:2; background:rgba(255,249,233,.96); padding:clamp(26px,4vw,52px); border-radius:45px 45px 45px 12px; box-shadow:0 12px 0 rgba(38,124,99,.18); transform:rotate(-1deg); }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; color:#d56d35; font-size:13px; font-weight:1000; }
h1,h2,h3,p { margin-top:0; }.welcome h1 { font-family:Georgia,serif; font-size:clamp(38px,5vw,70px); line-height:1.03; margin-bottom:28px; }.welcome h1 em { color:#267c63; font-style:normal; }
.big-button { border:0; color:white; background:var(--orange); border-radius:22px; padding:17px 25px; font-size:22px; font-weight:1000; box-shadow:0 6px 0 #bd6332; }.big-button:active { transform:translateY(4px); box-shadow:0 2px 0 #bd6332; }.big-button span { padding-left:28px; }
.listen { border:0; background:none; margin-left:15px; color:#267c63; font-weight:900; padding:16px; }
.hero-art { position:relative; height:520px; z-index:2; display:flex; justify-content:center; align-items:flex-end; filter:drop-shadow(0 15px 3px rgba(41,58,53,.12)); }.gio .head { font-size:300px; display:block; transform:scaleX(-1); }.horns { display:none; }.jack { font-size:160px; margin-left:-95px; margin-bottom:20px; }
.sun { position:absolute; top:40px; left:45px; font-size:90px; animation:float 5s ease-in-out infinite; }.cloud { position:absolute; font-size:80px; opacity:.8; }.cloud.one { top:40px; left:35%; }.cloud.two { top:130px; right:3%; font-size:55px; }@keyframes float { 50% { transform:translateY(-10px) rotate(4deg); } }
.map-view { min-height:calc(100vh - 74px); padding:28px clamp(16px,4vw,60px) 50px; position:relative; background:linear-gradient(#a9dded 0 28%,#d7efb8 28% 100%); }
.map-title { display:flex; justify-content:center; gap:14px; align-items:center; position:relative; z-index:2; }.mini-gio { font-size:75px; }.map-title p { margin:0; color:#267c63; font-weight:1000; }.map-title h1 { font-family:Georgia,serif; font-size:clamp(28px,4vw,48px); margin:3px 0 20px; }
.road { position:absolute; inset:31% -10% 15%; background:#e8d09e; transform:rotate(-4deg); border:10px dashed rgba(255,255,255,.65); border-left:0;border-right:0; }
.place-grid { position:relative; z-index:2; max-width:1100px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.place-card { min-height:190px; border:0; border-radius:35px 35px 24px 24px; padding:18px 10px 14px; background:var(--card); box-shadow:0 8px 0 color-mix(in srgb,var(--card),#344 28%); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:.18s transform; }.place-card:hover { transform:translateY(-5px) rotate(1deg); }.place-card:active { transform:translateY(4px); }.place-card.visited { outline:5px solid #fff; }.place-icon { font-size:72px; line-height:1; }.place-card strong { font-size:19px; margin-top:8px; }.place-card small { margin-top:6px; color:#31554a; font-weight:900; }
.finish { display:block; position:relative; z-index:2; margin:38px auto 0; border:2px solid #5c8068; background:#fff9e9; border-radius:20px; padding:13px 22px; font-weight:900; }
.modal-backdrop { position:fixed; z-index:30; inset:0; background:rgba(28,57,48,.74); display:grid; place-items:center; padding:18px; backdrop-filter:blur(4px); }.activity,.book,.parent { width:min(610px,100%); max-height:95vh; overflow:auto; background:var(--cream); border-radius:36px; box-shadow:0 15px 0 rgba(0,0,0,.18); position:relative; text-align:center; padding:22px 28px 28px; }.close { position:absolute; right:17px; top:14px; z-index:3; width:45px;height:45px;border:0;border-radius:50%;background:white;font-size:30px;font-weight:900;box-shadow:0 3px 0 #bbb; }
.activity-top { margin:-22px -28px 22px; padding:25px 55px 20px 25px; min-height:130px; display:flex; align-items:center; text-align:left; gap:18px; border-radius:36px 36px 40% 20%; }.activity-top>span { font-size:72px; }.activity-top small { font-weight:1000; text-transform:uppercase; letter-spacing:.1em; }.activity-top h2 { margin:5px 0 0; font-family:Georgia,serif; font-size:26px; }
.gio-talk { display:flex; align-items:center; justify-content:center; gap:12px; }.gio-talk>span { font-size:62px; }.gio-talk h3 { margin:0; font-size:25px; }.gio-talk button { border:0;background:#dcefe5;border-radius:50%;width:45px;height:45px; }.choices { display:flex; gap:17px; justify-content:center; margin:26px 0 18px; }.choices button { width:125px;height:125px;border:4px solid white;border-radius:30px;background:#f0e5c8;font-size:58px;box-shadow:0 7px 0 #c8b991; }.choices button:hover { transform:translateY(-4px); }.hint { min-height:25px; color:#bb6334; font-weight:1000; }.hint.success { color:#267c63; }.stop { border:0;background:none;text-decoration:underline;color:#60756d;font-weight:800; }
.book h2,.parent h2 { font-family:Georgia,serif;font-size:36px;margin-bottom:16px; }.memory-art { height:230px;border-radius:28px;background:linear-gradient(#a9dded 0 57%,#82c66f 57%);display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden;margin-bottom:20px; }.book-jack { font-size:100px;z-index:2; }.book-gio { font-size:150px;margin-left:-35px; }.memory-icon { position:absolute;font-size:50px; }.memory-icon:nth-of-type(3){left:20px;bottom:20px}.memory-icon:nth-of-type(4){right:20px;bottom:20px}.memory-icon:nth-of-type(5){right:25px;top:15px}.stars { color:#efa83e;letter-spacing:10px;font-size:25px;margin:15px; }
.parent { text-align:left; }.parent>p,.parent>h2 { text-align:center; }.summary { text-align:center;background:#dcefe5;border-radius:25px;padding:20px;margin:20px 0; }.summary strong { font-size:42px;color:#267c63;display:block; }.summary span { font-weight:900; }.parent ul { list-style:none;padding:0; }.parent li { display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #e6dfca;padding:12px 4px;font-weight:900; }.parent li small { color:#66766f; }.parent-close { display:block;margin:20px auto 0;border:0;background:#267c63;color:white;padding:14px 20px;border-radius:15px;font-weight:900; }.empty{text-align:center;color:#68776f}.parent .close { text-align:center; }
@media(max-width:780px){ header {height:64px}.header-actions span{display:none}.welcome{min-height:calc(100vh - 64px);grid-template-columns:1fr;padding:18px}.hero-art{height:270px;order:2}.gio .head{font-size:185px}.jack{font-size:90px;margin-left:-60px}.welcome-copy{padding:28px;text-align:center}.welcome h1{font-size:39px}.listen{display:block;margin:10px auto 0}.place-grid{grid-template-columns:repeat(2,1fr);gap:14px}.place-card{min-height:150px;border-radius:25px}.place-icon{font-size:55px}.map-title{justify-content:flex-start}.mini-gio{font-size:58px}.choices{gap:9px}.choices button{width:30%;height:95px;font-size:46px}.activity{padding-left:18px;padding-right:18px}.activity-top{margin-left:-18px;margin-right:-18px}.activity-top h2{font-size:21px}.gio-talk h3{font-size:20px}.parent li{align-items:flex-start;gap:10px}.parent li small{text-align:right}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Refined destination scenes and preschool activity art */
.sound-toggle.muted { background:#edf0e9; color:#65726d; }
.destination-scene { width:100%; min-height:100px; padding:8px 8px 4px; border-radius:24px; background:linear-gradient(#bce5f2 0 58%,#7fc66c 58%); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; overflow:hidden; box-shadow:inset 0 0 0 3px rgba(255,255,255,.45); }
.destination-scene b { font-size:60px; line-height:1; filter:drop-shadow(0 4px 1px rgba(34,64,48,.13)); }
.destination-scene i { width:100%; margin-top:-3px; font-size:20px; line-height:1; font-style:normal; letter-spacing:.28em; white-space:nowrap; }
.place-card { padding:12px 12px 16px; min-height:215px; justify-content:flex-start; }
.place-card strong { font-size:20px; margin-top:11px; line-height:1.1; }
.activity { width:min(760px,100%); }
.activity-top { min-height:112px; }
.activity-top .activity-place { font-size:62px; }
.progress-dots { display:flex; gap:6px; margin-top:8px; }
.progress-dots i { width:28px; height:7px; border-radius:10px; background:rgba(255,255,255,.5); }
.progress-dots i.on { background:#286f59; }
.choices { align-items:stretch; gap:14px; }
.choices button { width:31%; height:175px; padding:8px 7px 12px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; font-size:inherit; transition:transform .16s, outline .16s; }
.choices button strong { width:100%; min-height:32px; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1.05; color:#384c45; }
.choices button.right { outline:7px solid #4ea973; background:#dff3dc; }
.choices button.try-again { animation:wobble .28s ease-in-out; }
.choice-picture { width:100%; height:118px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.single-icon,.bucket-art { font-size:69px; line-height:1; }
.object.ball { display:inline-block; width:68px; height:68px; border-radius:50%; box-shadow:inset -10px -12px 0 rgba(0,0,0,.12), inset 8px 8px 0 rgba(255,255,255,.28); }
.ball.purple{background:#9a62c9}.ball.green{background:#45a860}.ball.yellow{background:#f2c642}.ball.blue{background:#469bd2}.ball.orange{background:#ee8746}
.pair,.book-pair { display:flex; gap:10px; align-items:center; justify-content:center; }.pair .ball{width:53px;height:53px}
.watering-can { display:block; position:relative; width:90px; height:58px; border-radius:10px 10px 23px 23px; background:#55a9cf; box-shadow:inset -8px -6px rgba(0,0,0,.12); transform-origin:center bottom; }
.watering-can:before { content:""; position:absolute; width:42px; height:34px; border:8px solid #367d98; border-left:0; border-radius:0 50% 50% 0; right:-34px; top:8px; }
.watering-can:after { content:""; position:absolute; width:54px; height:18px; background:#55a9cf; left:-43px; top:5px; transform:rotate(-25deg); border-radius:14px 0 0 14px; }
.watering-can i { position:absolute; width:36px; height:30px; border:7px solid #367d98; border-bottom:0; border-radius:30px 30px 0 0; left:26px; top:-27px; }
.watering-can.small { transform:scale(.65); }.watering-can.big { transform:scale(1.08); }
.flower-art { font-size:78px; }.flower-art.red{filter:hue-rotate(300deg) saturate(1.6)}.flower-art.purple{filter:hue-rotate(50deg)}
.repeat { max-width:100%; text-align:center; font-size:38px; line-height:1.25; letter-spacing:1px; }.repeat.dots{color:#eb8745;letter-spacing:8px;font-size:35px}.repeat.crayons{font-size:30px}.repeat.wheels{font-size:34px;color:#3d5a54}
.shape { display:block; width:74px; height:74px; background:#f2994a; box-shadow:0 6px 0 rgba(0,0,0,.14); }.shape.circle{border-radius:50%;background:#68b66d}.shape.triangle{width:0;height:0;background:none;border-left:45px solid transparent;border-right:45px solid transparent;border-bottom:82px solid #e87864;box-shadow:none}.shape.square{background:#559dcc}
.tiles { color:#59a8cc; font-size:25px; line-height:.9; letter-spacing:1px; }.tiles.big{font-size:31px}.tiles.small{font-size:22px}
.sized { display:inline-block; line-height:1; transform-origin:center bottom; }.sized.small{font-size:43px}.sized.medium{font-size:61px}.sized.big,.sized.tall{font-size:88px}
.kite { position:absolute; font-size:55px; }.kite.low{top:53px}.kite.middle{top:30px}.kite.high{top:2px}
.book-art { width:78px; height:93px; border-radius:5px 13px 13px 5px; background:#e96558; box-shadow:inset 8px 0 rgba(0,0,0,.13),4px 5px #d7c68f; display:grid; place-items:center; }.book-art i{font-size:43px;font-style:normal}.book-pair i{font-style:normal;font-size:42px;background:#ec7b6b;padding:17px 9px;border-radius:5px 10px 10px 5px;box-shadow:3px 4px #cbbb8b}
.shelf-art { display:flex; flex-direction:column; align-items:center; gap:3px; }.shelf-art b{font-size:31px}.shelf-art i{font-style:normal;font-size:58px;border-bottom:7px solid #9a6745}
.car-art { position:relative;font-size:74px }.car-art i{position:absolute;font-style:normal;font-size:25px;left:15px;bottom:7px;color:#72513c}.car-art.clean i{color:#f3b52c;left:52px;top:-4px}
.rock-art { display:block; width:92px;height:63px;border-radius:50% 50% 35% 30%;background:#89928f;color:transparent;box-shadow:inset -12px -10px rgba(0,0,0,.13),inset 8px 7px rgba(255,255,255,.18)}
.leaf-art{font-size:78px}.leaf-art.brown{filter:hue-rotate(160deg) saturate(.7)}.leaf-art.red{filter:hue-rotate(290deg) saturate(1.8)}
.celebration { width:min(520px,100%); text-align:center; background:#fff9e9; padding:35px; border-radius:38px; box-shadow:0 15px 0 rgba(0,0,0,.18); }.celebration h2{font-family:Georgia,serif;font-size:39px;margin-bottom:10px}.celebrate-friends{font-size:105px}.confetti{display:block;color:#efa83e;font-size:34px;letter-spacing:15px;animation:float 1.8s ease-in-out infinite}
@keyframes wobble{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

@media(max-width:780px){
  .brand{font-size:20px}.header-actions{gap:5px}.header-actions button{padding:9px 10px}
  .destination-scene{min-height:82px}.destination-scene b{font-size:47px}.destination-scene i{font-size:16px}.place-card{min-height:168px}.place-card strong{font-size:16px}
  .activity{padding-bottom:20px}.activity-top{min-height:92px;margin-bottom:14px}.activity-top .activity-place{font-size:48px}.activity-top h2{font-size:18px}.gio-talk>span{font-size:48px}
  .choices{gap:8px;margin:18px 0 14px}.choices button{width:32%;height:145px;padding:5px 4px 9px}.choice-picture{height:100px}.choices button strong{font-size:12px}.single-icon,.bucket-art{font-size:55px}.object.ball{width:54px;height:54px}.pair .ball{width:40px;height:40px}.watering-can{transform:scale(.8)}.watering-can.small{transform:scale(.55)}.watering-can.big{transform:scale(.85)}
}

/* Hands-on connected adventures */
.hands-on { width:min(830px,100%); user-select:none; }
.hands-on .hint { margin:13px 0 8px; }
.room-scene,.jump-scene,.store-scene,.checkout-scene,.water-world,.build-scene,.ball-sort-scene,.sort-scene,.icecream-shop,.delivery-scene { position:relative; min-height:275px; margin:18px auto 8px; border-radius:28px; overflow:hidden; background:#e9d5aa; box-shadow:inset 0 0 0 4px rgba(255,255,255,.6); }
.room-scene { background:linear-gradient(#f8e5bd 0 72%,#b9895e 72%); }
.shelf { position:absolute; left:6%; top:12%; width:28%; height:55%; border:12px solid #9a6746; border-top-width:18px; color:#754a32; font-size:13px; padding-top:4px; }
.shelf:after { content:""; position:absolute; left:0; right:0; top:47%; height:10px; background:#9a6746; }
.scene-ball { border:0; padding:0; display:block; width:68px; height:68px; border-radius:50%; box-shadow:inset -10px -10px rgba(0,0,0,.13),0 7px 0 rgba(80,58,39,.2); position:absolute; }
.scene-ball.green{background:#48a961}.scene-ball.purple{background:#9664c5}.scene-ball.yellow{background:#f2c846}
.scene-ball.spiky { background-image:radial-gradient(circle at 20% 25%,rgba(255,255,255,.7) 0 3px,transparent 4px),radial-gradient(circle at 65% 20%,rgba(255,255,255,.5) 0 3px,transparent 4px),radial-gradient(circle at 45% 65%,rgba(255,255,255,.5) 0 3px,transparent 4px); }
.room-scene .scene-ball.green{left:40%;top:56%}.room-scene .scene-ball.purple{left:50%;top:25%}.room-scene .scene-ball.y1{left:68%;top:50%}.room-scene .scene-ball.y2{left:78%;top:20%}.scene-ball.found{animation:found .65s ease-in-out infinite alternate;outline:8px solid #fff}.ride-car{position:absolute;left:33%;bottom:5%;font-size:72px}.room-jack{position:absolute;right:4%;bottom:4%;font-size:90px}
@keyframes found{to{transform:translateY(-18px) scale(1.08)}}
.build-scene { display:grid; grid-template-columns:1fr 180px; padding:18px; background:linear-gradient(#d6eff2 0 73%,#b6d690 73%); }
.build-goal { position:relative; min-height:230px; border:4px dashed rgba(55,91,79,.25); border-radius:22px; }
.snap-slot { position:absolute; border:4px dashed #68877b; background:rgba(255,255,255,.38); transition:.2s; }
.snap-slot:nth-child(1){left:27%;bottom:25px}.snap-slot:nth-child(2){left:47%;bottom:25px}.snap-slot:nth-child(3){left:37%;bottom:97px}.snap-slot:nth-child(4){left:36%;bottom:142px}
.snap-slot.square{width:72px;height:72px}.snap-slot.rectangle{width:145px;height:46px}.snap-slot.triangle{width:0;height:0;background:none;border-left:74px solid transparent;border-right:74px solid transparent;border-bottom:70px solid rgba(255,255,255,.45);border-top:0;border-radius:0}
.snap-slot.filled.square{background:rgba(74,180,200,.72);border-style:solid}.snap-slot.filled.rectangle{background:rgba(226,106,91,.72);border-style:solid}.snap-slot.filled.triangle{border-left-color:transparent;border-right-color:transparent;border-bottom-color:rgba(242,192,73,.82)}
.garage-car{position:absolute;font-size:54px;left:43%;bottom:25px;z-index:3}.tile-tray{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.mag-tile{border:5px solid rgba(255,255,255,.7);box-shadow:0 5px 0 rgba(34,70,63,.2)}.mag-tile.square{width:65px;height:65px;background:rgba(74,180,200,.72)}.mag-tile.rectangle{width:105px;height:45px;background:rgba(226,106,91,.72)}.mag-tile.triangle{width:0;height:0;background:none;border-left:43px solid transparent;border-right:43px solid transparent;border-bottom:70px solid rgba(242,192,73,.82);border-top:0;box-shadow:none}
.ball-sort-scene{display:flex;align-items:center;justify-content:space-around;padding:25px;background:linear-gradient(#f3dfb9 0 72%,#bb8c61 72%)}.loose-balls{position:relative;width:62%;height:220px}.loose-balls .scene-ball:nth-child(1){left:5%;top:30%}.loose-balls .scene-ball:nth-child(2){left:36%;top:8%}.loose-balls .scene-ball:nth-child(3){left:58%;top:54%}.loose-balls .scene-ball:nth-child(4){left:77%;top:12%}.scene-ball.packed{transform:translate(160px,110px) scale(.2);opacity:0}.ball-basket{font-size:110px;display:flex;flex-direction:column}.ball-basket b{font-size:18px}
.jump-scene{background:linear-gradient(#a9deec 0 55%,#8ccc70 55%);overflow:visible}.floating-treasure{position:absolute;left:25%;top:18%;font-size:55px;transition:.2s}.floating-treasure.collected{transform:scale(.2);opacity:0}.jump-jack{position:absolute;left:42%;bottom:43px;font-size:88px;transition:.25s}.jump-jack.jumping{animation:jackjump .6s ease-in-out}.collect-basket{position:absolute;right:5%;bottom:50px;font-size:64px;display:flex;flex-direction:column}.collect-basket b{font-size:16px}.jump-button{position:absolute;left:20px;bottom:15px;border:0;border-radius:18px;background:#ef8848;color:#fff;padding:14px 22px;font-size:20px;font-weight:1000;box-shadow:0 5px #b95e32}@keyframes jackjump{50%{transform:translateY(-95px)}}
.sort-scene{padding:28px;background:#d8eab5}.rock-row,.basket-row{display:flex;justify-content:space-around;align-items:flex-end}.tap-rock{border:0;background:#8a9290;width:80px;height:58px;border-radius:50% 55% 35% 42%;box-shadow:inset -10px -8px rgba(0,0,0,.15),0 5px rgba(64,78,70,.15)}.tap-rock.little{transform:scale(.68)}.tap-rock.selected{outline:8px solid #f6bc48}.tap-rock.sorted{opacity:.15;transform:scale(.25)}.basket-row{margin-top:38px}.size-basket{border:4px solid #fff;border-radius:20px;background:#f5dfad;font-size:60px;padding:4px 35px;display:flex;align-items:center;gap:8px}.size-basket b{font-size:16px}.size-basket.little{transform:scale(.78)}
.water-world{height:330px;background:linear-gradient(#ade0ec 0 53%,#8dcd70 53%);touch-action:none}.garden-cloud{position:absolute;top:10px;right:40px;font-size:55px}.plant{position:absolute;bottom:22px;width:100px;height:110px;display:flex;align-items:flex-end;justify-content:center}.plant:nth-of-type(2){left:24%}.plant:nth-of-type(3){left:49%}.plant:nth-of-type(4){left:73%}.plant span{font-size:52px;transition:.4s}.plant.grown span{font-size:92px;animation:grow .5s ease-out}.drag-can{position:absolute;left:20px;top:55px;width:150px;height:120px;cursor:grab;z-index:4;touch-action:none}.drag-can .watering-can{position:absolute;left:42px;top:40px}.drag-can em{position:absolute;right:0;bottom:3px;font-style:normal;opacity:0}.drag-can.pouring em{opacity:1;animation:drip .4s linear infinite}@keyframes grow{from{transform:scale(.35)}}@keyframes drip{to{transform:translateY(20px)}}
.store-scene{background:linear-gradient(#fff0c8 0 78%,#b77c51 78%);padding:18px}.shopping-list{background:#fff;border:3px solid #d2b36e;border-radius:14px;padding:8px 16px;display:inline-flex;gap:15px;align-items:center;transform:rotate(-2deg)}.shopping-list span{font-size:28px}.store-shelves{display:flex;justify-content:center;gap:12px;margin-top:24px}.store-shelves button{width:105px;height:120px;border:4px solid white;border-radius:18px;background:#e5c68c;font-size:48px;display:flex;flex-direction:column;align-items:center;justify-content:center}.store-shelves b{font-size:13px}.store-shelves button.in-cart{transform:translateY(70px) scale(.3);opacity:0}.grocery-cart{font-size:65px;position:absolute;right:30px;bottom:5px}.grocery-cart b{font-size:15px}.checkout-scene{display:flex;align-items:center;justify-content:space-around;background:#f4dfb4}.belt{width:70%;height:100px;background:#4f6560;border-radius:25px;display:flex;align-items:center;justify-content:space-evenly;box-shadow:0 10px #344843}.belt button{border:0;background:none;font-size:58px}.belt button.checked{transform:translateX(150px) scale(.25);opacity:0}.register{font-size:70px;display:flex;flex-direction:column}.register b{font-size:15px}.animal-stage{min-height:280px;border-radius:28px;background:linear-gradient(#7f5d9a 0 15%,#f0c75c 15% 80%,#694931 80%);display:flex;align-items:center;justify-content:center;gap:18px}.animal-stage button{border:0;background:rgba(255,255,255,.88);border-radius:50% 50% 18px 18px;width:29%;height:170px;font-size:82px;display:flex;flex-direction:column;align-items:center;justify-content:center}.animal-stage button b{font-size:13px}.animal-stage button.played{animation:band .45s ease-in-out 2;outline:7px solid #fff}@keyframes band{50%{transform:translateY(-18px) rotate(4deg)}}
.serve-choice{display:flex;justify-content:center;gap:35px;margin:30px}.serve-choice button{width:190px;height:190px;border:5px solid #fff;border-radius:35px;background:#f1ddb9;box-shadow:0 8px #c5aa7a;display:flex;flex-direction:column;align-items:center}.serve-choice span{font-size:105px}.serve-choice b{font-size:20px}.serve-choice button.chosen{outline:8px solid #65ad7c}.icecream-shop{display:flex;align-items:center;justify-content:space-evenly;background:linear-gradient(#f8dfdc 0 76%,#c99675 76%)}.cone-builder{height:230px;width:150px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.empty-cone,.finished-cone>b{color:#c98c4c;font-size:110px;line-height:.55;transform:scaleX(.6)}.flavor-tray{width:45%;display:grid;grid-template-columns:1fr 1fr;gap:18px}.flavor-tray button{width:76px;height:76px;border-radius:50%;border:5px solid white;box-shadow:inset -9px -8px rgba(0,0,0,.12),0 5px rgba(0,0,0,.15)}.flavor-tray [data-scoop=pink],.ice-scoop.pink{background:#ef9eaf}.flavor-tray [data-scoop=green],.ice-scoop.green{background:#8fcf9c}.flavor-tray [data-scoop=cream],.ice-scoop.cream{background:#fff3ce}.flavor-tray [data-scoop=blue],.ice-scoop.blue{background:#83c8e7}.ice-scoop{display:block;width:82px;height:68px;border-radius:50% 50% 35% 35%;box-shadow:inset -9px -8px rgba(0,0,0,.11);margin-bottom:-9px}.delivery-scene{display:flex;align-items:center;justify-content:space-around;background:#f8dfdc}.finished-cone{position:relative;width:150px;display:flex;flex-direction:column;align-items:center}.finished-cone:before{content:"🍒";position:absolute;top:-35px;font-size:40px;opacity:0}.finished-cone.topped:before{opacity:1;animation:found .4s ease-out}.topping-button,.deliver-button{border:4px solid white;border-radius:22px;background:#f3dcb0;padding:15px;font-size:40px;display:flex;flex-direction:column}.topping-button b,.deliver-button{font-size:16px}.deliver-button{background:#3a8e70;color:white;font-size:18px}.deliver-button:disabled{opacity:.4}

@media(max-width:780px){.room-scene,.jump-scene,.store-scene,.checkout-scene,.water-world,.build-scene,.ball-sort-scene,.sort-scene,.icecream-shop,.delivery-scene{min-height:235px}.room-jack{font-size:65px}.ride-car{font-size:52px}.scene-ball{width:52px;height:52px}.build-scene{grid-template-columns:1fr 100px;padding:8px}.build-goal{min-height:210px}.snap-slot.square{width:52px;height:52px}.snap-slot.rectangle{width:106px;height:37px}.snap-slot.triangle{border-left-width:54px;border-right-width:54px;border-bottom-width:52px}.snap-slot:nth-child(1){left:20%}.snap-slot:nth-child(2){left:48%}.snap-slot:nth-child(3){left:32%;bottom:78px}.snap-slot:nth-child(4){left:31%;bottom:114px}.garage-car{font-size:38px;left:38%}.mag-tile.square{width:50px;height:50px}.mag-tile.rectangle{width:75px}.mag-tile.triangle{border-left-width:32px;border-right-width:32px;border-bottom-width:52px}.ball-basket{font-size:70px}.jump-jack{font-size:68px}.size-basket{font-size:45px;padding:3px 12px}.tap-rock{width:62px;height:47px}.water-world{height:250px}.plant{width:70px}.plant span{font-size:40px}.plant.grown span{font-size:65px}.drag-can{transform:scale(.72);transform-origin:left top}.store-shelves{gap:5px}.store-shelves button{width:18%;height:100px;font-size:36px}.store-shelves b{font-size:10px}.animal-stage button{height:140px;font-size:58px}.serve-choice button{width:42%;height:150px}.serve-choice span{font-size:75px}.flavor-tray button{width:58px;height:58px}.finished-cone{transform:scale(.8)}}