@font-face{font-family:'Baloo 2';src:url('./assets/fonts/baloo2-latin-ext.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Baloo 2';src:url('./assets/fonts/baloo2-latin.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{font-family:'Baloo 2','Trebuchet MS',system-ui,sans-serif;color:#4a6175;background:#bdebf4;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,.tile:focus-visible{outline:4px solid #f8b750;outline-offset:3px}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{position:relative;width:100%;height:100%;height:100dvh;min-height:480px;overflow:hidden;background:linear-gradient(180deg,var(--sky-top,#c8eff4) 0%,var(--sky-mid,#dff7ef) 68%,#e6f7e6 100%);transition:background .5s}.app:before{content:"";position:absolute;width:150%;height:200px;left:-25%;bottom:-125px;border-radius:50%;background:#a5dfba;opacity:.44}.app:after{content:"";position:absolute;width:120%;height:170px;left:-10%;bottom:-125px;border-radius:50%;background:#bbedcb;opacity:.7}.sky-dot{position:absolute;border-radius:50%;background:white;opacity:.44;pointer-events:none}.dot-a{width:18px;height:18px;left:8%;top:16%}.dot-b{width:10px;height:10px;right:12%;top:24%}.dot-c{width:12px;height:12px;left:17%;bottom:23%}
.topbar{position:absolute;z-index:10;top:0;left:0;right:0;max-width:900px;margin:auto;height:76px;padding:calc(13px + env(safe-area-inset-top)) 18px 0;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}.topbar>*{pointer-events:auto}.round-btn{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:17px;background:#fff9ed;color:#7c9d9c;box-shadow:0 5px 0 #c5d9cb,0 9px 18px #5b9db333;transition:transform .15s,box-shadow .15s}.round-btn:active,.play-btn:active,.next-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #c5d9cb}.round-btn svg{width:25px;height:25px}.home-btn{visibility:hidden}.sound-off{display:none}.muted .sound-on{display:none}.muted .sound-off{display:block}.brand{display:flex;gap:5px;align-items:center;padding-top:7px;font-size:27px;line-height:1;font-weight:700;letter-spacing:-1.7px;color:#f28181;text-shadow:0 3px white}.brand-highlight{color:#61c7ae}.brand-sun{font-size:20px;color:#ffcc70;letter-spacing:0}.brand-sun:last-child{color:#f6a6af}
.screen{position:absolute;inset:0;z-index:2}.intro{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:85px 20px 40px}.intro-art{position:relative;width:min(350px,90vw);height:235px;flex:none}.intro-card{position:absolute;top:38px;width:132px;height:154px;border-radius:32px;background:#fff9ee;box-shadow:0 11px 0 #d7e8d3,0 18px 20px #81b6a83b;display:grid;place-items:center;transform:rotate(-11deg)}.intro-right{right:0;top:61px;transform:rotate(10deg)}.intro-left{left:0}.intro-line{position:absolute;z-index:2;left:16%;top:73px;width:70%;height:105px;overflow:visible}.intro-line path{fill:none;stroke:#f5ae67;stroke-width:12;stroke-linecap:round;stroke-dasharray:15 4;filter:drop-shadow(0 4px 0 #e29d6a88)}.intro-spark{position:absolute;color:#f6b965;font-size:35px}.spark-one{top:7px;left:45%}.spark-two{top:178px;left:43%;color:#f58c99}.spark-three{top:25px;right:3%;color:#7bcdb0}.intro-title{font-size:clamp(49px,13vw,72px);line-height:1;font-weight:700;letter-spacing:-4px;color:#f28c8e;text-shadow:0 5px 0 #fffaf0;position:relative;margin-top:8px;white-space:nowrap}.intro-title>span:first-child{color:#69cdb5}.title-smile{position:absolute;font-size:35px;letter-spacing:0;color:#7db2b1;bottom:-25px;left:48%;transform:rotate(-4deg)}.intro-subtitle{display:flex;gap:22px;margin:25px 0 29px;color:#ffc76b;font-size:24px}.intro-subtitle span:nth-child(2){color:#fba6ac}.play-btn,.next-btn{display:grid;place-items:center;border-radius:50%;width:90px;height:90px;color:#fff;background:#ffb769;box-shadow:0 9px 0 #e49357,0 16px 20px #b8915c55;transition:transform .15s,box-shadow .15s;animation:playPulse 2s ease-in-out infinite}.play-btn svg{width:41px;height:41px;margin-left:7px}.intro-ground{position:absolute;bottom:4%;width:100%;display:flex;justify-content:space-around;color:#fff7ca;font-size:31px;opacity:.9}.intro-ground span:nth-child(even){color:#f7b4bd;transform:scale(.6)}
.game{padding:calc(85px + env(safe-area-inset-top)) 14px calc(32px + env(safe-area-inset-bottom));display:flex;align-items:center;flex-direction:column}.game-head{width:min(100%,650px);height:60px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px}.level-badge{width:57px;height:51px;border-radius:18px;background:#fff8eb;box-shadow:0 5px 0 #d6ddcd;display:flex;align-items:center;justify-content:center;gap:1px;font-size:23px;color:#ee9b6e;font-weight:700}.badge-star{font-size:18px;color:#f6c368}.progress{display:flex;justify-content:center;gap:7px;flex:1}.progress-dot{width:17px;height:17px;border-radius:50%;background:#fdfaf2;border:3px solid #cce8dd;box-shadow:0 2px 0 #add4c7}.progress-dot.done{background:#f9be69;border-color:#fff8ea;transform:scale(1.13)}.restart-btn{width:47px;height:47px;background:#fff8eb;color:#ecac78}.board-wrap{position:relative;flex:1;width:min(100%,650px);min-height:0;margin-top:10px;border-radius:38px;background:#fffdf3c9;border:5px solid #f7f9e8;box-shadow:inset 0 0 0 2px #e3f2d8,0 12px 0 #b5dec9,0 20px 24px #84bda63b;overflow:hidden}.board-bg{position:absolute;inset:0;pointer-events:none}.board-bg span{position:absolute;color:#c5e6d5;font-size:24px}.board-bg span:nth-child(1){left:48%;top:12%}.board-bg span:nth-child(2){left:51%;top:36%}.board-bg span:nth-child(3){left:46%;top:62%}.board-bg span:nth-child(4){left:50%;top:86%}.lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.lines path{fill:none;stroke-linecap:round;stroke-linejoin:round}.completed-line{stroke-width:12;filter:drop-shadow(0 3px 0 #9ec7b488)}#activeLine{stroke-width:13;filter:drop-shadow(0 3px 0 #9ec7b488)}.board{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;z-index:3;align-items:stretch;padding:12px 8px;gap:8px 22%;touch-action:none}.tile{position:relative;align-self:center;justify-self:center;width:clamp(92px,26vw,126px);height:clamp(93px,27vw,131px);border-radius:29px;background:#fffaf0;border:4px solid white;box-shadow:0 6px 0 var(--tile-shadow,#cfded3),0 9px 15px #a1bca744;display:grid;place-items:center;touch-action:none;cursor:grab;transition:transform .2s,opacity .25s,box-shadow .2s}.tile:before{content:"";position:absolute;inset:-12px;border-radius:38px}.tile:active{cursor:grabbing}.tile.matched{animation:bounce .55s cubic-bezier(.28,.7,.28,1.35)}.tile.matched:after{content:"★";position:absolute;right:-7px;top:-12px;display:grid;place-items:center;background:#80d49b;color:white;width:30px;height:30px;border-radius:50%;box-shadow:0 3px 0 #57aa75;font-size:17px}.tile.dragging{transform:scale(1.08)}.tile.target{transform:scale(1.1);box-shadow:0 6px 0 #a0d5b5,0 0 0 7px #9fe4bd80}.tile.disabled{pointer-events:none}.tile-blob{position:absolute;inset:9px;border-radius:21px;background:var(--blob,#e1f4ec);opacity:.5}.character{position:relative;display:grid;place-items:center;width:79px;height:79px;filter:drop-shadow(0 4px 0 #987d6a24)}.character.circle{border-radius:50%}.character.square{border-radius:19px}.character.triangle{clip-path:polygon(50% 2%,98% 92%,2% 92%);border-radius:11px}.character.star{clip-path:polygon(50% 0,62% 34%,98% 35%,70% 57%,80% 95%,50% 74%,20% 95%,30% 57%,2% 35%,38% 34%)}.character.red{background:#f47f82}.character.blue{background:#70b8e7}.character.green{background:#79cf9c}.character.yellow{background:#f8d273}.face{position:absolute;width:43px;height:31px;left:50%;top:50%;transform:translate(-50%,-34%);display:block}.triangle .face{top:64%}.star .face{top:51%}.face i,.star-face i{position:absolute;top:2px;width:6px;height:9px;border-radius:50%;background:#5c6273}.face i:first-child,.star-face i:first-child{left:8px}.face i:nth-child(2),.star-face i:nth-child(2){right:8px}.face b,.star-face b{position:absolute;left:17px;top:14px;width:10px;height:6px;border:2px solid #5c6273;border-top:0;border-radius:0 0 9px 9px}.emoji-character{position:relative;display:grid;place-items:center;width:100%;height:100%;font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;font-size:clamp(53px,16vw,76px);line-height:1;filter:drop-shadow(0 4px 0 #907d6930)}.emoji-character.with-face:after{content:'•ᴗ•';position:absolute;left:50%;top:59%;transform:translate(-50%,-50%);font-family:Arial,sans-serif;font-size:15px;font-weight:900;letter-spacing:2px;color:#4b5363;background:#fff8eac9;border-radius:100%;padding:1px 3px}.emoji-character.number{font-family:'Baloo 2',system-ui,sans-serif;font-size:72px;font-weight:700;color:var(--number-color,#ed9197);text-shadow:2px 4px 0 #fff}.emoji-character.number:after{top:76%;font-size:11px;letter-spacing:1px}.emoji-character.count{font-size:clamp(27px,8vw,39px);display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:0;line-height:1.1;padding:8px}.emoji-character.count:after{top:77%;font-size:10px}.success-check{position:absolute;z-index:6;left:50%;top:50%;width:94px;height:94px;transform:translate(-50%,-50%);pointer-events:none;animation:checkPop .7s both}.success-check svg{width:100%;height:100%;filter:drop-shadow(0 7px 0 #91bc9680)}.confetti{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}.confetto{position:absolute;left:50%;top:50%;width:10px;height:16px;background:var(--color);border-radius:3px;animation:confettiFly .8s ease-out forwards}.bottom-doodle{height:28px;flex:none;display:flex;align-items:end;gap:28px;color:#fff8c5;font-size:22px}.bottom-doodle span:nth-child(2){color:#f4aec1}
.celebration{position:absolute;inset:0;z-index:20;background:#d7f4e9ee;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;backdrop-filter:blur(5px);animation:fadeIn .25s}.celebration-burst{position:absolute;top:19%;color:#efb668;font-size:clamp(32px,8vw,58px);letter-spacing:10px;white-space:nowrap;animation:spinIn .8s}.celebration-star{position:relative;color:#f8c461;font-size:clamp(180px,46vw,260px);line-height:1;text-shadow:0 10px 0 #e7a964,0 16px 18px #a6c0a566;animation:starBounce .9s both}.star-face{position:absolute;left:50%;top:50%;transform:translate(-50%,-14%);width:70px;height:50px}.star-face i{width:11px;height:17px}.star-face i:first-child{left:12px}.star-face i:nth-child(2){right:12px}.star-face b{left:28px;top:24px;width:17px;height:11px;border-width:3px}.celebration-dots{display:flex;gap:12px;color:#efb1b0;font-size:20px}.celebration-dots span:nth-child(2){color:#f4c66f}.celebration-dots span:nth-child(3){color:#7bcda4}.next-btn{width:76px;height:76px;background:#ffb76d;color:white;box-shadow:0 8px 0 #e79658,0 13px 18px #b8915c55;animation:none}.next-btn svg{width:36px;height:36px}
@keyframes playPulse{50%{transform:scale(1.06)}}@keyframes bounce{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-19px) scale(1.08)}65%{transform:translateY(3px) scale(.96)}}@keyframes checkPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-20deg)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}@keyframes confettiFly{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes spinIn{from{opacity:0;transform:rotate(-20deg) scale(.5)}to{opacity:1;transform:rotate(0) scale(1)}}@keyframes starBounce{0%{transform:scale(.1) rotate(-30deg)}55%{transform:scale(1.18) rotate(9deg)}75%{transform:scale(.9) rotate(-3deg)}100%{transform:scale(1)}}
.special{position:relative;width:75px;height:75px;display:grid;place-items:center;filter:drop-shadow(0 4px 0 #9c8e6929)}.honeycomb{align-content:center;gap:0;color:#f5bc56;font-size:37px;font-weight:700;line-height:.55;letter-spacing:-8px;text-shadow:2px 2px #e59e48}.honeycomb span:nth-child(2){margin-left:-5px}.honeycomb b{position:absolute;left:26px;top:39px;font:900 13px Arial,sans-serif;letter-spacing:1px;color:#695d52;text-shadow:none}.aquarium{width:72px;height:70px;border:5px solid #77bde0;border-top:8px solid #79accb;border-radius:6px 6px 15px 15px;background:#d3f4f3;overflow:hidden}.aquarium-water{position:absolute;inset:22px 0 0;background:#9ad8ef}.aquarium-fish{position:relative;z-index:1;font-size:40px;transform:translateY(7px)}.aquarium-bubble{position:absolute;z-index:1;top:2px;left:9px;color:white;font-size:22px}.aquarium b{position:absolute;z-index:2;bottom:3px;left:24px;color:#58788a;font:900 11px Arial,sans-serif}.toothpaste{transform:rotate(-8deg)}.tube-cap{position:absolute;top:2px;width:38px;height:12px;border-radius:5px;background:#68aed8;box-shadow:0 3px #4d96c4}.tube-body{position:absolute;top:13px;width:53px;height:60px;border-radius:7px 7px 17px 17px;background:linear-gradient(90deg,#fff 0%,#f9f9ef 70%,#dcefe8 100%);border:3px solid #85c8c4;display:grid;place-items:center}.tube-body i{position:absolute;top:4px;color:#78c9ad;font-style:normal;font-size:20px}.tube-body b{position:absolute;top:31px;color:#5c6273;font:900 13px Arial,sans-serif;letter-spacing:1px}
.intro-mascots{position:absolute;z-index:2;inset:-16px -17px auto;width:calc(100% + 34px);height:252px;object-fit:contain;filter:drop-shadow(0 13px 12px #77a99838);animation:mascotFloat 3.4s ease-in-out infinite}.intro-card,.intro-line{display:none}.intro-spark{z-index:3}.item-art{position:relative;z-index:1;width:min(82%,92px);height:min(82%,92px);object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 0 #8aa99324)}.item-count{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:0;padding:5px}.item-count img{width:38%;height:70%;object-fit:contain;margin-inline:-3px;filter:drop-shadow(0 2px 0 #8aa99324)}.item-count.count-1 img{width:69%;height:80%}.item-count.count-2 img{width:49%;height:75%}.success-check img{display:block;width:100%;height:100%;filter:drop-shadow(0 7px 0 #91bc9680)}.tutorial-hand{position:absolute;z-index:7;left:0;top:0;width:57px;height:57px;pointer-events:none;filter:drop-shadow(0 6px 3px #719ba347);animation:guideMove 2.2s ease-in-out infinite}.tutorial-hand svg{width:100%;height:100%}
.round-btn img{display:block;width:27px;height:27px;object-fit:contain}.play-btn img{display:block;width:47px;height:47px;object-fit:contain;margin-left:6px}.next-btn img{display:block;width:40px;height:40px;object-fit:contain}.tutorial-hand{animation:none}.tutorial-hand img{display:block;width:100%;height:100%;object-fit:contain}.item-art{width:min(88%,96px);height:min(88%,96px)}
.map-screen{overflow:hidden;background:#d8f2e9}.map-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.map-scroll::-webkit-scrollbar{display:none}.map-track{position:relative;width:100%;height:max(1260px,158vh);background:#e9f5dc url('./assets/map-garden.webp') center center/cover no-repeat}.map-track:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#d6eff333 0%,transparent 16%,transparent 85%,#d7edcf33 100%);pointer-events:none}.map-nodes{position:absolute;inset:0}.map-node{position:absolute;left:var(--x);top:var(--y);width:68px;height:68px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:linear-gradient(#fffef3,#ffedcb);border:5px solid white;box-shadow:0 7px 0 #dcb98a,0 12px 15px #6a9f8c77;color:#b37e60;font-size:29px;font-weight:700;text-shadow:0 2px white;transition:transform .2s;z-index:2}.map-node:before{content:"";position:absolute;inset:-10px;border-radius:50%}.map-node.current{width:78px;height:78px;background:linear-gradient(#ffd878,#f8a867);border-color:#fff9e9;box-shadow:0 8px 0 #db8e60,0 0 0 7px #fff4b477,0 13px 16px #6a9f8c77;color:#fff;text-shadow:0 2px #df956b;animation:nodePulse 2s ease-in-out infinite}.map-node.done{background:linear-gradient(#ffe7af,#f7bc79);color:#a57561}.map-node.locked{background:linear-gradient(#f7f6e9,#dfe9df);border-color:#fffdf1;box-shadow:0 6px 0 #b4cbbd,0 10px 12px #6a9f8c55;color:#aab9a9;filter:saturate(.5)}.map-node img{position:absolute;width:25px;height:25px;right:-11px;bottom:-5px;filter:drop-shadow(0 2px 1px #8b8b7555)}.map-node.locked img{width:27px;height:27px;right:19px;bottom:18px;opacity:.88}.map-node.current:after{content:"✦";position:absolute;right:-19px;top:-14px;font-size:30px;color:#fff3bc;text-shadow:0 2px #efbb71}.map-progress{position:absolute;z-index:5;top:calc(80px + env(safe-area-inset-top));right:18px;display:flex;align-items:center;gap:5px;padding:5px 12px 5px 6px;border-radius:25px;background:#fffcf2e8;box-shadow:0 5px 0 #d1dabc,0 8px 14px #7da39066;font-size:19px;font-weight:700;color:#d69265}.map-progress img{width:30px;height:30px}.map-node:active{transform:translate(-50%,-45%)}
#referenceLine{stroke:#95bec0;stroke-width:10;stroke-dasharray:2 16;opacity:.65;filter:drop-shadow(0 2px #ffffffaa)}#activeLine{stroke-width:11}.trace-progress{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);z-index:7;display:flex;gap:5px;padding:7px 10px;border-radius:20px;background:#fffdf0e8;box-shadow:0 3px 0 #d2e5d8;pointer-events:none}.trace-progress span{width:11px;height:11px;border-radius:50%;background:#d9e7dd}.trace-progress span.filled{background:#f5b96f;box-shadow:0 0 0 2px #fff6d8}.trace-progress span.goal{box-shadow:0 0 0 2px #7ecfa6}.tile.guide-source{box-shadow:0 6px 0 #a0d5b5,0 0 0 7px #9fe4bd80}
@keyframes nodePulse{50%{transform:translate(-50%,-50%) scale(1.08)}}
.map-track{height:max(2480px,316vh);background:none}.map-region{position:absolute;left:0;right:0;height:50%;background-position:center;background-size:cover;background-repeat:no-repeat}.map-sky{top:0;background-image:url('./assets/map-sky.webp')}.map-garden{bottom:0;background-image:url('./assets/map-garden.webp')}.map-track:after{content:"";position:absolute;z-index:1;left:0;right:0;top:calc(50% - 50px);height:100px;background:linear-gradient(transparent,#fff9e088,transparent);pointer-events:none}.map-node.trace-node:not(.locked){border-color:#fff9f2;box-shadow:0 7px 0 #b8a1cf,0 12px 15px #7687ac66}.map-node.trace-node.current{background:linear-gradient(#c9b9ef,#9b89d8);box-shadow:0 8px 0 #8d77b8,0 0 0 7px #efe5ff99,0 13px 16px #7687ac66}.map-node .mode-badge{position:absolute;width:27px;height:27px;right:-10px;bottom:-7px;padding:2px;border-radius:50%;background:#fffaf0;box-shadow:0 2px 0 #d6d5c7}.map-node.done .mode-badge{display:none}
.trace-screen{padding:calc(85px + env(safe-area-inset-top)) 14px calc(32px + env(safe-area-inset-bottom));display:flex;align-items:center;flex-direction:column;background:linear-gradient(180deg,#e5def8 0%,#edf5f2 62%,#e4f4e5 100%)}.trace-head{width:min(100%,650px)}.trace-heading-art{display:flex;align-items:center;justify-content:center;gap:9px;flex:1;color:#f7c26e;font-size:21px}.trace-heading-art img{width:35px;height:35px;object-fit:contain}.trace-heading-art img:first-child{transform:rotate(-15deg)}.trace-panel{position:relative;flex:1;width:min(100%,650px);min-height:0;margin-top:10px;border-radius:38px;background:#fffdf6de;border:5px solid #fcfbeb;box-shadow:inset 0 0 0 2px #dcdaf2,0 12px 0 #b7b8df,0 20px 24px #8683ae3b;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.trace-panel:before{content:"";position:absolute;inset:12px;border:2px dashed #dfdff0;border-radius:28px;pointer-events:none}.trace-spark{position:absolute;color:#e9c383;font-size:27px;pointer-events:none}.trace-spark.s1{left:12%;top:11%}.trace-spark.s2{right:10%;top:20%;color:#b9b6e6}.trace-spark.s3{left:17%;bottom:17%;color:#b8d9ca}.trace-stage{position:relative;z-index:2;width:min(78vw,390px,calc(100dvh - 265px));aspect-ratio:1;flex:none;border-radius:31px;background:radial-gradient(circle at 50% 42%,#fff 0%,#f7faf4 69%,#eff4ec 100%);box-shadow:inset 0 0 0 3px #e6eadf,0 8px 0 #e1e9df,0 12px 18px #bdcdb855}.trace-guide,.trace-done,.trace-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.trace-guide{opacity:.9;pointer-events:none}.trace-done{z-index:3;filter:drop-shadow(0 8px 4px #9db7aa66);animation:shapeReveal .55s cubic-bezier(.2,.9,.3,1.4)}.trace-canvas{z-index:4;touch-action:none;cursor:crosshair}.trace-canvas #drawnTrace{fill:none;stroke:#f28b9a;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #e7b2aa88)}.trace-hint{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin-top:21px}.trace-hint img{width:31px;height:31px;object-fit:contain}.trace-hint-dots{display:flex;gap:6px}.trace-hint-dots i{width:8px;height:8px;border-radius:50%;background:#d4c9e9}.trace-hint-dots i:nth-child(2),.trace-hint-dots i:nth-child(4){transform:translateY(-5px)}.shape-progress{position:relative;z-index:2;display:flex;gap:7px;margin-top:16px}.shape-progress span{width:14px;height:14px;border-radius:50%;background:#e0e8db;border:2px solid #fff;box-shadow:0 2px 0 #c4d0c0}.shape-progress span.filled{background:#efafad;box-shadow:0 2px 0 #d88f91}.shape-progress span.goal{border-color:#ecc476}.trace-mascot{position:absolute;right:0;bottom:-9px;width:clamp(78px,22vw,125px);height:auto;max-height:190px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 5px 4px #8a93a355)}.trace-check{position:absolute;z-index:8;left:50%;top:50%;width:94px;height:94px;transform:translate(-50%,-50%);pointer-events:none;animation:checkPop .7s both}.trace-check img{width:100%;height:100%}@keyframes shapeReveal{from{opacity:0;transform:scale(.5) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media (max-height:680px){.trace-screen{padding-top:69px;padding-bottom:15px}.trace-panel{margin-top:4px}.trace-stage{width:min(70vw,330px,calc(100dvh - 235px))}.trace-hint{margin-top:12px}.shape-progress{margin-top:8px}.trace-mascot{width:80px}}
.intro-subtitle{margin:18px 0 10px}.intro-modes{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:22px}.intro-modes span{display:grid;place-items:center;width:46px;height:46px;border-radius:17px;background:#fffaf0;border:3px solid white;box-shadow:0 4px 0 #cfe2d0}.intro-modes img{width:30px;height:30px;object-fit:contain}.intro-modes i{width:45px;border-top:5px dotted #e9bc8c}.map-chapter-gate{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:106px;height:74px;border-radius:36px;background:#fff9e6;border:5px solid white;box-shadow:0 8px 0 #d6bd9e,0 13px 18px #6a9f8c66;display:flex;align-items:center;justify-content:center;gap:3px;color:#f0c77e;font-size:24px}.map-chapter-gate img{width:30px;height:30px;object-fit:contain}.app.in-map .topbar{height:105px;background:linear-gradient(#dff2eceb,#dff2ec00)}.app.in-map .brand{filter:drop-shadow(0 2px #fff9e9)}
@media (max-height:680px){.intro-modes{margin-bottom:12px}.intro-subtitle{margin:8px 0 5px}}
@keyframes mascotFloat{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes guideMove{0%,12%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.88)}23%{opacity:1;transform:translate(var(--sx),var(--sy)) scale(1)}75%{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}93%,100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.9)}}
.celebration-illustration{display:block;width:min(82vw,390px,48vh);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 18px #93b9a677);animation:starBounce .9s both}.celebration-burst{top:12%;opacity:.8}.celebration-dots{margin-top:-4px}
@media (min-width:700px){.app{max-width:900px;margin:auto;box-shadow:0 0 60px #78adb166}.board{gap:8px 27%;padding:15px 24px}.tile{width:122px;height:125px}.game{padding-top:85px;padding-bottom:42px}.intro-art{height:250px}}
@media (max-height:680px){.game{padding-top:69px;padding-bottom:15px}.game-head{height:48px}.board-wrap{margin-top:4px}.board{padding:6px}.tile{width:clamp(73px,22vw,102px);height:clamp(74px,22vw,102px);border-radius:23px}.character{width:65px;height:65px}.emoji-character{font-size:52px}.intro-art{height:190px;transform:scale(.85);margin-bottom:-25px}.intro-title{font-size:55px}.intro-subtitle{margin:15px 0 18px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Three chapters share one continuous, scrollable adventure map. */
.map-track{height:max(3720px,474vh)}
.map-region{height:33.3334%}
.map-candy{top:0;background-image:url('./assets/map-candy.webp')}
.map-sky{top:33.3333%;bottom:auto}
.map-garden{top:auto;bottom:0}
.map-track:after{display:none}
.map-chapter-gate{top:66.6667%}
.map-chapter-gate.story-gate{top:33.3333%;background:#fff7fa;box-shadow:0 8px 0 #d9bad4,0 13px 18px #978ab366}
.map-node.story-node:not(.locked){border-color:#fff5fa;box-shadow:0 7px 0 #d89ebf,0 12px 15px #a681b066}
.map-node.story-node.current{background:linear-gradient(#f9b6d2,#d994c9);box-shadow:0 8px 0 #b779a8,0 0 0 7px #ffe1f299,0 13px 16px #a681b066}
.intro-modes{gap:8px}.intro-modes i{width:26px}.intro-modes span:last-child{background:#fff4fb;box-shadow:0 4px 0 #d9c9eb}

/* The colored outline shows only the pieces that the child actually traced. */
.trace-canvas #coveredTrace{fill:none;stroke:#f3b86e;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 1px #d8a68066);pointer-events:none}
.trace-canvas #drawnTrace{stroke:#ee8f9f;stroke-width:9;opacity:.8}
.shape-progress{position:relative;display:block;width:min(65%,260px);height:21px;margin-top:17px;border-radius:99px;background:#e6e5ed;border:3px solid #fff;box-shadow:0 3px 0 #c8c7d8;overflow:visible}
.shape-progress-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#f6b6bd,#f4c778);transition:width .15s}
.shape-progress img{position:absolute;right:-18px;top:50%;width:36px;height:36px;transform:translateY(-50%);filter:grayscale(1) opacity(.65);transition:filter .2s,transform .2s}
.shape-progress.ready img{filter:drop-shadow(0 0 8px #fbd881);transform:translateY(-50%) scale(1.18)}
.trace-screen.story{background:linear-gradient(180deg,#f0e0f6 0%,#fae9ee 62%,#eaf4e9 100%)}
.trace-screen.story .trace-panel{box-shadow:inset 0 0 0 2px #f0d7e9,0 12px 0 #d7b4d3,0 20px 24px #a884ac44}
.trace-screen.story .trace-stage{background:radial-gradient(circle at 50% 42%,#fff 0%,#fff8f8 72%,#f5eaf4 100%);box-shadow:inset 0 0 0 3px #f0e1eb,0 8px 0 #ead8e9,0 12px 18px #c8afc855}
.trace-screen.story .trace-mascot{width:clamp(84px,23vw,135px);right:-7px;bottom:-12px}
.trace-screen.story .trace-canvas #coveredTrace{stroke:#eaa5bd}
.trace-screen.story .shape-progress-fill{background:linear-gradient(90deg,#dfa9dd,#f4b8a7)}
@media (max-height:680px){.shape-progress{margin-top:9px;height:17px}.shape-progress img{width:30px;height:30px}.trace-screen.story .trace-mascot{width:86px}}

/* Finger feedback sits above the artwork without intercepting pointer events. */
.touch-tip{position:absolute;z-index:7;width:48px;height:48px;object-fit:contain;pointer-events:none;transform:translate(-50%,-92%) scale(.88);filter:drop-shadow(0 4px 4px #a6697966);transition:transform .12s,filter .12s}
.touch-tip.on-guide{transform:translate(-50%,-92%) scale(1.06);filter:drop-shadow(0 0 9px #ffd981) drop-shadow(0 4px 4px #a6697966)}
#matchTouchTip{z-index:6;width:44px;height:44px}
.touch-sparkle{position:absolute;z-index:7;height:auto;pointer-events:none;transform:translate(-50%,-50%);animation:touchBurst .62s ease-out forwards}
.trace-canvas #drawnTrace{transition:opacity .22s;filter:drop-shadow(0 3px 2px #d9909b88)}
.tile.target{animation:targetBreathe .6s ease-in-out infinite alternate}
.tile.nearby{transform:scale(1.03);box-shadow:0 6px 0 var(--tile-shadow,#cfded3),0 0 0 5px #ffedcb99}
@keyframes touchBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-20deg)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25) rotate(14deg)}}
@keyframes targetBreathe{to{transform:scale(1.13);box-shadow:0 6px 0 #a0d5b5,0 0 0 10px #9fe4bd66}}
@media (max-height:680px){.touch-tip{width:39px;height:39px}#matchTouchTip{width:37px;height:37px}}

/* Dream Workshop adds a fourth chapter and a more tactile home screen. */
.map-track{height:max(4960px,632vh)}
.map-region{height:25%}
.map-dream{top:0;background-image:url('./assets/map-dream.webp')}
.map-candy{top:25%}
.map-sky{top:50%}
.map-garden{top:auto;bottom:0}
.map-chapter-gate{top:75%}
.map-chapter-gate.story-gate{top:50%}
.map-chapter-gate.dream-gate{top:25%;background:#f6efff;box-shadow:0 8px 0 #bfb3df,0 13px 18px #796ba066}
.map-node.dream-node:not(.locked){border-color:#fff9f1;box-shadow:0 7px 0 #a89bd3,0 12px 15px #706ba666}
.map-node.dream-node.current{background:linear-gradient(#cab9f0,#a497dd);box-shadow:0 8px 0 #8374b8,0 0 0 7px #f5e7ff99,0 13px 16px #706ba666}
.intro-modes{gap:6px}.intro-modes span{width:44px;height:44px}.intro-modes i{width:19px}
.intro-modes span:nth-child(1){animation:modeFloat 2.6s ease-in-out infinite}
.intro-modes span:nth-child(3){animation:modeFloat 2.6s .35s ease-in-out infinite}
.intro-modes span:nth-child(5){animation:modeFloat 2.6s .7s ease-in-out infinite}
.intro-modes span:nth-child(7){background:#f8f1ff;box-shadow:0 4px 0 #d4c6e8;animation:modeFloat 2.6s 1.05s ease-in-out infinite}
.play-btn{position:relative;width:118px;height:118px;background:transparent;box-shadow:none;border-radius:50%;animation:playBreathe 2.4s ease-in-out infinite;filter:drop-shadow(0 10px 9px #bd927b55)}
.play-btn img{width:100%;height:100%;margin:0;object-fit:contain}
.play-btn:active{transform:scale(.91);box-shadow:none}
.round-btn.home-btn img{width:33px;height:33px}.round-btn.sound-btn img{width:33px;height:33px}.round-btn.restart-btn img{width:32px;height:32px}.next-btn img{width:48px;height:48px}
.trace-screen.dream{background:linear-gradient(180deg,#e3dbfb 0%,#f4e9fa 61%,#e7f0f6 100%)}
.trace-screen.dream .trace-panel{box-shadow:inset 0 0 0 2px #e5daf6,0 12px 0 #aaa4d7,0 20px 24px #8577a744}
.trace-screen.dream .trace-stage{background:radial-gradient(circle at 50% 42%,#fff 0%,#fcf9ff 72%,#f0ebfa 100%)}
.trace-screen.dream .trace-canvas #coveredTrace{stroke:#ad9ddd}
.trace-screen.dream .shape-progress-fill{background:linear-gradient(90deg,#a6b5e7,#e9b9e0)}
.trace-screen.dream .trace-mascot{width:clamp(84px,23vw,135px);right:-7px;bottom:-13px}
.trace-panel.encourage .trace-guide{animation:guideCheer .65s ease-in-out}
.trace-panel.encourage .trace-mascot{animation:mascotWiggle .65s ease-in-out}
@keyframes modeFloat{50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes playBreathe{50%{transform:scale(1.065);filter:drop-shadow(0 15px 13px #bd927b66)}}
@keyframes guideCheer{50%{opacity:1;transform:scale(1.035)}}
@keyframes mascotWiggle{25%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}100%{transform:rotate(0)}}
@media (max-height:680px){.intro{padding-top:65px;padding-bottom:12px}.intro-art{height:140px;margin-bottom:-12px}.intro-title{font-size:48px}.intro-subtitle{margin:2px 0 4px}.intro-modes{margin-bottom:8px}.intro-modes span{width:39px;height:39px}.intro-modes img{width:26px;height:26px}.play-btn{width:88px;height:88px}.trace-screen.dream .trace-mascot{width:80px}}

/* Discovery Garden and the post-drawing object reveal. */
.sound-btn{overflow:hidden}.sound-btn img{display:block!important;max-width:100%;max-height:100%;object-fit:contain}
.map-track{height:max(6200px,790vh)}
.map-region{height:20%}
.map-discovery{top:0;background-image:url('./assets/map-discovery.webp')}
.map-dream{top:20%}.map-candy{top:40%}.map-sky{top:60%}.map-garden{top:80%;bottom:auto}
.map-chapter-gate{top:80%}.map-chapter-gate.story-gate{top:60%}.map-chapter-gate.dream-gate{top:40%}.map-chapter-gate.discovery-gate{top:20%;background:#f0fff2;box-shadow:0 8px 0 #aad8b4,0 13px 18px #76ac8b66}
.map-node.discovery-node:not(.locked){border-color:#fffbea;box-shadow:0 7px 0 #9acb92,0 12px 15px #75a38666}
.map-node.discovery-node.current{background:linear-gradient(#b8e49c,#88cbb0);box-shadow:0 8px 0 #71a98c,0 0 0 7px #e8ffcb99,0 13px 16px #75a38666}
.discovery-card{position:absolute;z-index:9;inset:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:28px;background:linear-gradient(170deg,#fff9eafa,#fff4faed);border:3px solid #fff;box-shadow:inset 0 0 0 3px #f5e6d9,0 12px 25px #6f9e8e55;animation:revealCard .45s cubic-bezier(.2,.9,.25,1.25) both}
.discovery-spark{font-size:clamp(25px,5vw,38px);letter-spacing:18px;color:#f3ba71;animation:modeFloat 2s ease-in-out infinite}
.discovery-object{width:min(58vw,235px,32vh);height:min(58vw,235px,32vh);border-radius:30px;background:radial-gradient(#fff,#f3f8ed);border:4px solid white;box-shadow:0 8px 0 #dce8d8,0 15px 20px #bacab744;display:grid;place-items:center;touch-action:manipulation}
.discovery-object img{width:94%;height:94%;object-fit:contain;filter:drop-shadow(0 8px 4px #aeacac66)}
.discovery-object.dance img{animation:objectDance .65s ease-in-out}
.discovery-name{font-size:clamp(29px,7vw,45px);font-weight:700;color:#735d73;text-align:center;text-shadow:0 3px #fff;line-height:1.1;padding:5px 12px}
.discovery-next{width:clamp(82px,23vw,104px);height:clamp(82px,23vw,104px);min-height:82px;flex:0 0 auto;border-radius:30px;background:#ffd599;box-shadow:0 7px 0 #e9ac75,0 13px 18px #baa58a66;animation:playBreathe 2.4s infinite;touch-action:manipulation}.discovery-next img{width:70%;height:70%;object-fit:contain}
.discovery-next:active{transform:translateY(5px);box-shadow:0 2px 0 #e9ac75}
.find-screen{padding:calc(85px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#d8f1df,#ebf7dc 68%,#d6ecdb)}
.find-head{width:min(100%,650px)}.find-progress{display:flex;gap:10px;justify-content:center;flex:1}
.find-panel{position:relative;flex:1;width:min(100%,650px);min-height:0;margin-top:10px;border-radius:38px;background:#fffdf2e8;border:5px solid #fffefa;box-shadow:inset 0 0 0 2px #d8ebce,0 12px 0 #acd3a7,0 20px 24px #7ba27955;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:13px 12px 20px;overflow:hidden}
.find-stars{position:absolute;top:5%;color:#ecc67b;font-size:24px;letter-spacing:14px;pointer-events:none}.find-prompt{display:flex;align-items:center;gap:10px;color:#77a884;font-size:clamp(26px,6vw,38px);font-weight:700;line-height:1}.find-prompt img{width:29px;height:29px;object-fit:contain}
.find-target{display:grid;place-items:center;width:min(52vw,210px,25vh);height:min(52vw,210px,25vh);border-radius:34px;background:#fff;border:4px dashed #aed7b2;box-shadow:0 7px 0 #d0e5cd;animation:targetBreathe 1.8s ease-in-out infinite alternate}.find-target img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 5px 3px #aab8a644)}
.find-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(7px,2vw,17px);width:100%;z-index:2}.find-option{aspect-ratio:1;max-height:175px;display:grid;place-items:center;border-radius:27px;background:#fff9ef;border:4px solid white;box-shadow:0 7px 0 #d5dfcb,0 11px 15px #9eb9a455;transition:transform .2s,box-shadow .2s}.find-option img{width:92%;height:92%;object-fit:contain}.find-option:active{transform:translateY(5px)}.find-option.try-again{animation:optionWobble .5s}.find-option.found{animation:objectDance .65s;box-shadow:0 7px 0 #8dcf9a,0 0 0 7px #abe5ab99}.find-feedback{position:absolute;z-index:5;left:50%;top:51%;width:86px;height:86px;transform:translate(-50%,-50%);pointer-events:none;animation:checkPop .7s both}.find-feedback img{width:100%;height:100%}
@keyframes revealCard{from{opacity:0;transform:translateY(35px) scale(.88)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes objectDance{25%{transform:rotate(-9deg) scale(1.06)}60%{transform:rotate(9deg) scale(1.12)}100%{transform:rotate(0) scale(1)}}@keyframes optionWobble{25%{transform:translateX(-8px) rotate(-4deg)}55%{transform:translateX(8px) rotate(4deg)}80%{transform:translateX(-4px)}100%{transform:translateX(0)}}
@media (max-height:680px){.find-screen{padding-top:67px;padding-bottom:13px}.find-panel{margin-top:4px;padding-top:7px}.find-stars{font-size:16px}.find-prompt{font-size:25px}.find-target{width:min(40vw,145px,22vh);height:min(40vw,145px,22vh)}.find-option{max-height:112px}.discovery-object{width:min(43vw,170px,28vh);height:min(43vw,170px,28vh)}.discovery-next{width:78px;height:78px;min-height:78px}}

/* Parent settings and the collectible shape book. */
.top-actions{display:flex;gap:7px;align-items:center}.settings-btn img{width:34px;height:34px;object-fit:contain}.settings-btn:active img{transform:rotate(30deg)}
.map-tools{position:absolute;z-index:6;left:16px;top:calc(80px + env(safe-area-inset-top));display:flex;gap:9px}.map-tools button{width:52px;height:52px;border-radius:18px;background:#fffaf0;box-shadow:0 5px 0 #c8d9c7,0 9px 14px #7da39066;border:2px solid white;display:grid;place-items:center}.map-tools img{width:37px;height:37px;object-fit:contain}.map-tools button:active{transform:translateY(4px);box-shadow:0 1px 0 #c8d9c7}
.panel-scrim{position:absolute;z-index:30;inset:0;padding:calc(70px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));background:#516b70a8;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;animation:fadeIn .22s}
.utility-panel{width:min(100%,470px);max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:17px 18px 20px;border-radius:30px;border:5px solid #fff;background:linear-gradient(155deg,#fffcf1,#f3faf4);box-shadow:0 10px 0 #bfd7c4,0 25px 35px #385f6666;animation:revealCard .35s cubic-bezier(.2,.9,.25,1.2)}
.utility-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}.utility-head img{width:43px;height:43px;object-fit:contain}.utility-head h2{font-size:29px;line-height:1;color:#6d8a7f;margin:0;flex:1}.utility-close{width:43px;height:43px;display:grid;place-items:center;border-radius:15px;background:#f7e5de;color:#aa827c;font-size:34px;line-height:1;box-shadow:0 4px 0 #e1c8c0}
.settings-list{display:grid;gap:10px}.setting-row{width:100%;min-height:62px;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:20px;background:#fff;border:2px solid #e5eee1;box-shadow:0 4px 0 #d9e6d7;color:#678076;text-align:left;font-size:20px;font-weight:700}.setting-symbol{width:34px;text-align:center;font-size:27px;color:#eba4ae}.setting-row>span:nth-child(2){flex:1}.setting-switch{position:relative;width:54px;height:32px;border-radius:20px;background:#c8d4ce;transition:background .2s}.setting-switch:after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;background:#fff;border-radius:50%;box-shadow:0 2px 3px #607a7766;transition:transform .2s}.setting-row[aria-pressed="true"] .setting-switch{background:#86d2a4}.setting-row[aria-pressed="true"] .setting-switch:after{transform:translateX(22px)}
.settings-album{width:100%;display:flex;align-items:center;gap:11px;margin-top:20px;padding:8px 13px;border-radius:19px;background:#f6efff;color:#8673a8;font-size:20px;font-weight:700;text-align:left;box-shadow:0 4px 0 #dbd0e9}.settings-album img{width:42px;height:42px;object-fit:contain}.settings-album span:nth-child(2){flex:1}.settings-album span:last-child{font-size:33px}
.reset-open{display:block;margin:19px auto 0;padding:9px 17px;border-radius:15px;background:#fff0ec;color:#aa7773;font-weight:700;font-size:16px}.reset-confirm{margin-top:10px;padding:12px;border-radius:18px;background:#fff5ee;border:2px solid #f3d5cc;text-align:center;color:#846a67}.reset-confirm p{margin:0 0 10px;font-size:16px}.reset-confirm>div{display:flex;justify-content:center;gap:9px}.reset-confirm button{padding:9px 13px;border-radius:13px;font-size:15px;font-weight:700;background:#e7f0e6;color:#5e806a}.reset-confirm button:last-child{background:#e9a49c;color:#fff}
.album-panel{display:flex;flex-direction:column;max-height:min(90dvh,790px)}.album-count{margin:0 0 12px;color:#8d9d83;font-size:17px;font-weight:700;text-align:center}.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow-y:auto;padding:5px 2px 8px;min-height:0}.album-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:112px;padding:5px;border-radius:20px;background:#fff;border:3px solid #f3eadf;box-shadow:0 4px 0 #e0e9db;color:#796c86;font-size:13px;font-weight:700;line-height:1.1}.album-tile img{width:min(100%,76px);height:76px;object-fit:contain}.album-tile.locked{background:#f1f2eb;filter:saturate(.4);opacity:.72}.album-tile.locked img{width:28px;height:28px}.album-preview{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 10px;margin-bottom:9px;border-radius:19px;background:#fff8e9;color:#8e6c80;font-size:25px;animation:shapeReveal .35s}.album-preview img{width:83px;height:83px;object-fit:contain}
@media (max-width:390px){.topbar{padding-left:10px;padding-right:10px}.brand{font-size:20px;letter-spacing:-1px}.brand-sun{font-size:15px}.top-actions{gap:3px}.top-actions .round-btn,.home-btn{width:42px;height:42px}.settings-btn img,.sound-btn img{width:30px!important;height:30px!important}.map-tools{left:10px}.map-progress{right:10px}}
@media (max-height:680px){.utility-panel{padding:12px 14px 15px}.utility-head{margin-bottom:9px}.utility-head h2{font-size:25px}.setting-row{min-height:53px;font-size:18px}.settings-album{margin-top:13px}.reset-open{margin-top:11px}.album-tile{min-height:96px}.album-tile img{height:60px}}

/* Clear first action, gentle lessons, and visible automatic progression. */
.play-btn{width:clamp(142px,42vw,174px);height:clamp(142px,42vw,174px);flex:none}
.play-btn:before{content:"";position:absolute;inset:-7px;border:3px dashed #fff8d9;border-radius:50%;animation:playHalo 9s linear infinite;pointer-events:none}
@keyframes playHalo{to{transform:rotate(360deg)}}
.help-btn{width:44px;height:44px;background:#f4efff;box-shadow:0 5px 0 #d8cbe8,0 9px 18px #8980ac33}.help-btn img{width:29px;height:29px;object-fit:contain}.game-head .help-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #d8cbe8}
.auto-next{position:relative;overflow:visible}.auto-next:before{content:"";position:absolute;inset:-9px;border-radius:50%;background:conic-gradient(#87d4aa var(--countdown,100%),#ffffff99 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));pointer-events:none}.auto-count{position:absolute;right:-13px;bottom:-9px;display:grid;place-items:center;width:31px;height:31px;border-radius:50%;border:3px solid white;background:#80cea3;color:white;font-size:17px;font-weight:700;line-height:1;box-shadow:0 3px 0 #6aae85}.discovery-next.auto-next{animation:none}.next-btn.auto-next{animation:none}
.lesson-overlay{position:absolute;z-index:25;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(80px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));background:#567c82ad;backdrop-filter:blur(5px)}.lesson-card{width:min(100%,460px);max-height:100%;overflow-y:auto;padding:18px 17px 22px;border-radius:33px;border:5px solid #fff;background:linear-gradient(#fffef5,#eaf8ee);box-shadow:0 10px 0 #b9d9c2,0 20px 24px #577a8666;display:flex;align-items:center;flex-direction:column;text-align:center;animation:revealCard .38s cubic-bezier(.2,.9,.25,1.2)}.lesson-spark{color:#f2be77;font-size:26px;letter-spacing:16px}.lesson-card h2{margin:2px 0 9px;color:#6c9b87;font-size:clamp(30px,8vw,42px);line-height:1}.lesson-card p{margin:10px 0 16px;color:#627b72;font-size:clamp(17px,4.6vw,22px);font-weight:700;line-height:1.3}.lesson-visual{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:122px;padding:10px;border-radius:24px;background:#fff8e9;border:2px dashed #efdfc7}.lesson-visual>img:not(.lesson-hand){width:clamp(75px,23vw,122px);height:clamp(75px,23vw,122px);object-fit:contain;animation:modeFloat 2.1s ease-in-out infinite}.lesson-visual>img:last-child{animation-delay:.5s}.lesson-line{color:#eeaf97;font-size:31px;letter-spacing:0;white-space:nowrap}.lesson-hand{position:absolute;width:42px;height:42px;object-fit:contain;left:47%;top:49%;animation:lessonHandMove 2.2s ease-in-out infinite;filter:drop-shadow(0 3px 3px #a6756d66)}.lesson-card button{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:#ffe1a9;box-shadow:0 7px 0 #e8b276}.lesson-card button img{width:92%;height:92%;object-fit:contain}.lesson-card button:active{transform:translateY(4px);box-shadow:0 2px 0 #e8b276}
@keyframes lessonHandMove{0%,100%{transform:translate(-30px,10px) rotate(-12deg)}50%{transform:translate(15px,-15px) rotate(12deg)}}
.match-result-name,.find-result-name{position:absolute;z-index:9;left:50%;transform:translateX(-50%);max-width:90%;padding:7px 15px;border-radius:20px;background:#fff9edee;border:3px solid white;box-shadow:0 4px 0 #d9e2cb;color:#9a7585;text-align:center;font-size:clamp(16px,4vw,23px);font-weight:700;white-space:normal;pointer-events:none;animation:revealCard .25s both}.match-result-name{bottom:15px}.find-result-name{top:54%}
@media (max-height:680px){.play-btn{width:clamp(112px,36vw,136px);height:clamp(112px,36vw,136px)}.intro-modes{margin-bottom:5px}.lesson-card{padding:10px 14px 15px}.lesson-visual{min-height:86px}.lesson-visual>img:not(.lesson-hand){width:78px;height:78px}.lesson-card p{margin:7px 0 12px}.lesson-card button{width:68px;height:68px}}
@media (prefers-reduced-motion:reduce){.play-btn:before{animation:none}.lesson-hand{animation:none}}

/* Memory Meadow, the sixth map region and an easy to touch card game. */
.map-track{height:max(7440px,948vh)}.map-region{height:16.6667%}
.map-memory{top:0;background-image:url('./assets/map-memory.webp')}.map-discovery{top:16.6667%}.map-dream{top:33.3333%}.map-candy{top:50%}.map-sky{top:66.6667%}.map-garden{top:83.3333%;bottom:auto}
.map-chapter-gate{top:83.3333%}.map-chapter-gate.story-gate{top:66.6667%}.map-chapter-gate.dream-gate{top:50%}.map-chapter-gate.discovery-gate{top:33.3333%}.map-chapter-gate.memory-gate{top:16.6667%;background:#f1edff;box-shadow:0 8px 0 #b7a9dc,0 13px 18px #7068a066}
.map-node.memory-node:not(.locked){border-color:#fff8e9;box-shadow:0 7px 0 #9d9cda,0 12px 15px #716db166}.map-node.memory-node.current{background:linear-gradient(#cbb9f4,#938acb);box-shadow:0 8px 0 #7b71b5,0 0 0 7px #e9e1ff99,0 13px 16px #716db166}
.intro-modes span:nth-child(9){background:#f3efff;box-shadow:0 4px 0 #d3c8ec;animation:modeFloat 2.6s 1.4s ease-in-out infinite}.intro-modes span:nth-child(9) img{width:34px;height:34px}
.memory-screen{padding:calc(85px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#e0e1fa,#eeeffb 66%,#e4f3ed)}.memory-head{width:min(100%,650px)}.memory-progress{display:flex;justify-content:center;gap:8px;flex:1}
.memory-panel{position:relative;flex:1;width:min(100%,650px);min-height:0;margin-top:10px;padding:35px 16px 22px;border-radius:38px;border:5px solid #fffdf8;background:radial-gradient(circle at 50% 32%,#fffdf6,#f6f2ff);box-shadow:inset 0 0 0 2px #e5dff2,0 12px 0 #b5acd8,0 20px 24px #8980aa55;display:flex;align-items:center;justify-content:center;overflow:hidden}.memory-spark{position:absolute;top:8px;color:#e2b9d7;font-size:24px;letter-spacing:14px;pointer-events:none}
.memory-grid{z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--memory-rows),minmax(0,1fr));gap:clamp(7px,2vw,13px);width:min(100%,390px);height:100%;max-height:610px;align-items:center}.memory-card{position:relative;width:100%;height:100%;max-height:170px;padding:0;background:none;perspective:700px;touch-action:manipulation}.memory-card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .46s cubic-bezier(.25,.8,.2,1)}.memory-card.flipped .memory-card-inner{transform:rotateY(180deg)}.memory-card-back,.memory-card-front{position:absolute;inset:0;display:grid;place-items:center;border:4px solid white;border-radius:25px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 6px 0 #c3bde0,0 10px 15px #9790bd55;overflow:hidden}.memory-card-back{background:linear-gradient(145deg,#d8c6f4,#a9a3db)}.memory-card-front{transform:rotateY(180deg);background:#fffaf0}.memory-card-back img{width:77%;height:77%;object-fit:contain;filter:drop-shadow(0 5px 3px #7d6ca244)}.memory-card-front img{width:91%;height:91%;object-fit:contain;filter:drop-shadow(0 4px 2px #8e8a8866)}.memory-card.matched .memory-card-front{border-color:#dbf7c8;box-shadow:0 6px 0 #9bc893,0 0 0 5px #ddffd88a}.memory-card.matched .memory-card-inner{animation:memoryCheer .55s ease-in-out}.memory-name{position:absolute;z-index:6;left:50%;bottom:15px;transform:translateX(-50%);padding:8px 20px;border-radius:22px;background:#fff8e9;border:3px solid white;box-shadow:0 4px 0 #e0d4e0;color:#8f6f9d;font-size:clamp(21px,5vw,30px);font-weight:700;pointer-events:none;animation:revealCard .3s both}@keyframes memoryCheer{50%{transform:rotateY(180deg) scale(1.1)}}
@media (max-width:390px){.intro-modes{gap:4px}.intro-modes span{width:38px;height:38px}.intro-modes img{width:25px;height:25px}.intro-modes span:nth-child(9) img{width:30px;height:30px}.intro-modes i{width:12px}.memory-panel{padding-left:10px;padding-right:10px}.memory-card-back,.memory-card-front{border-radius:20px}}
@media (max-height:680px){.memory-screen{padding-top:67px;padding-bottom:14px}.memory-panel{margin-top:4px;padding-top:26px;padding-bottom:11px}.memory-spark{font-size:17px;top:4px}.memory-card{max-height:135px}.memory-grid{gap:6px}}
@media (prefers-reduced-motion:reduce){.memory-card-inner{transition:none}.memory-card.matched .memory-card-inner{animation:none}}

/* Pattern Garden */
.map-track{height:max(8680px,1106vh)}.map-region{height:14.285714%}
.map-pattern{top:0;background-image:url('./assets/map-pattern.webp')}.map-memory{top:14.285714%}.map-discovery{top:28.571428%}.map-dream{top:42.857142%}.map-candy{top:57.142856%}.map-sky{top:71.42857%}.map-garden{top:85.714284%}
.map-chapter-gate{top:85.714284%}.map-chapter-gate.story-gate{top:71.42857%}.map-chapter-gate.dream-gate{top:57.142856%}.map-chapter-gate.discovery-gate{top:42.857142%}.map-chapter-gate.memory-gate{top:28.571428%}.map-chapter-gate.pattern-gate{top:14.285714%;background:#edfff6;box-shadow:0 8px 0 #a5d4c2,0 13px 18px #6aab9466}
.map-node.pattern-node:not(.locked){border-color:#fff9ed;box-shadow:0 7px 0 #8ec7b4,0 12px 15px #6ca99166}.map-node.pattern-node.current{background:linear-gradient(#b6eed1,#78cba8);box-shadow:0 8px 0 #69ab8e,0 0 0 7px #defce999,0 13px 16px #6ca99166}
.intro-modes span:nth-child(11){background:#eafff4;box-shadow:0 4px 0 #b6dec9;animation:modeFloat 2.6s 1.75s ease-in-out infinite}.intro-modes span:nth-child(11) img{width:37px;height:37px}.intro-modes{gap:5px}.intro-modes i{width:14px}
.pattern-screen{padding:calc(85px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#d9f4e8,#eaf9ef 60%,#f6f0e1)}.pattern-head{width:min(100%,650px)}.pattern-progress{display:flex;justify-content:center;gap:8px;flex:1}
.pattern-panel{position:relative;flex:1;width:min(100%,650px);min-height:0;margin-top:10px;padding:48px 15px 24px;border:5px solid #fffdf6;border-radius:38px;background:radial-gradient(circle at 50% 30%,#fffef3,#f2fff6 75%);box-shadow:inset 0 0 0 2px #d8efde,0 12px 0 #a8d7bd,0 20px 24px #81ac9455;display:flex;align-items:center;justify-content:space-around;flex-direction:column;overflow:hidden}.pattern-decor{position:absolute;top:10px;color:#d6b7d5;font-size:24px;letter-spacing:13px}.pattern-prompt{display:flex;align-items:center;gap:8px;color:#6aab8e;font-size:clamp(21px,6vw,31px);font-weight:800;text-align:center}.pattern-prompt img{width:47px;height:47px;object-fit:contain}
.pattern-sequence{display:flex;justify-content:center;align-items:center;gap:clamp(2px,1vw,7px);width:100%;min-height:clamp(65px,22vw,102px)}.pattern-sequence-card{display:grid;place-items:center;flex:0 1 clamp(34px,9vw,64px);width:clamp(34px,9vw,64px);aspect-ratio:1;border-radius:clamp(10px,3vw,20px);background:#fff9ec;border:3px solid white;box-shadow:0 5px 0 #e3d9c3,0 7px 10px #aeb49a44}.pattern-sequence-card img{width:94%;height:94%;object-fit:contain}.pattern-blank{background:#e9f7ed;border:3px dashed #9bceb1;box-shadow:none;color:#8cbea2;font-size:clamp(25px,7vw,42px);font-weight:900;animation:blankPulse 1.8s ease-in-out infinite}.pattern-blank.filled{background:#fff9ec;border:3px solid #a9d9a9;animation:patternPop .5s cubic-bezier(.2,.9,.2,1.3)}@keyframes blankPulse{50%{background:#fff8d9;transform:scale(1.07)}}@keyframes patternPop{50%{transform:scale(1.16)}}
.pattern-divider{color:#e9c89c;font-size:24px;letter-spacing:13px}.pattern-options{display:flex;justify-content:center;gap:clamp(9px,3vw,20px);width:100%}.pattern-option{display:grid;place-items:center;width:clamp(81px,25vw,126px);aspect-ratio:1;padding:4px;border:4px solid white;border-radius:clamp(21px,6vw,31px);background:linear-gradient(#fffdf4,#fcefdc);box-shadow:0 8px 0 #d7bfa9,0 12px 15px #9b9f8b44;touch-action:manipulation;transition:transform .15s,box-shadow .15s}.pattern-option:nth-child(2){background:linear-gradient(#fffdf4,#edf4ff);box-shadow:0 8px 0 #bac9dc,0 12px 15px #9b9f8b44}.pattern-option:nth-child(3){background:linear-gradient(#fffdf4,#f5edff);box-shadow:0 8px 0 #cbbcdc,0 12px 15px #9b9f8b44}.pattern-option img{width:100%;height:100%;object-fit:contain}.pattern-option:active{transform:translateY(5px);box-shadow:0 3px 0 #b8c6b0}.pattern-option.chosen{animation:patternPop .5s ease-in-out;border-color:#b4e2b9}.pattern-option.try-again{animation:patternWobble .45s ease-in-out}@keyframes patternWobble{20%,60%{transform:rotate(-8deg)}40%,80%{transform:rotate(8deg)}}.pattern-name{position:absolute;z-index:6;bottom:15px;left:50%;transform:translateX(-50%);padding:8px 18px;border:3px solid white;border-radius:22px;background:#fff9e8;box-shadow:0 4px 0 #d9ddc8;color:#799d87;font-size:clamp(19px,5vw,29px);font-weight:800;pointer-events:none;animation:revealCard .3s both}
@media(max-width:390px){.intro-modes{gap:3px}.intro-modes span{width:35px;height:35px;border-radius:13px}.intro-modes img{width:25px;height:25px}.intro-modes span:nth-child(11) img{width:29px;height:29px}.intro-modes i{width:6px}.pattern-panel{padding-left:7px;padding-right:7px}.pattern-sequence-card{border-width:2px}.pattern-options{gap:7px}}
@media(max-height:680px){.pattern-screen{padding-top:67px;padding-bottom:14px}.pattern-panel{margin-top:4px;padding-top:31px;padding-bottom:12px}.pattern-decor{top:3px;font-size:18px}.pattern-prompt img{width:35px;height:35px}.pattern-divider{font-size:17px}.pattern-option{width:clamp(70px,20vw,95px)}}
@media(prefers-reduced-motion:reduce){.pattern-blank,.pattern-option.chosen,.pattern-option.try-again{animation:none}}

/* Counting Orchard, Size Meadow, and Sorting Summit */
.map-track{height:max(12400px,1580vh)}.map-region{height:10%}
.map-emotions{top:0;background-image:url('./assets/map-emotions.webp')}.map-animals{top:10%;background-image:url('./assets/map-animals.webp')}.map-count{top:20%;background-image:url('./assets/map-count.webp')}.map-pattern{top:30%}.map-memory{top:40%}.map-discovery{top:50%}.map-dream{top:60%}.map-candy{top:70%}.map-sky{top:80%}.map-garden{top:90%}
.map-chapter-gate{top:90%}.map-chapter-gate.story-gate{top:80%}.map-chapter-gate.dream-gate{top:70%}.map-chapter-gate.discovery-gate{top:60%}.map-chapter-gate.memory-gate{top:50%}.map-chapter-gate.pattern-gate{top:40%}.map-chapter-gate.count-gate{top:30%;background:#fff3df;box-shadow:0 8px 0 #d6b388,0 13px 18px #a38c7066}.map-chapter-gate.animal-gate{top:20%;background:#f3efff;box-shadow:0 8px 0 #bda9db,0 13px 18px #8374ad66}.map-chapter-gate.emotion-gate{top:10%;background:#fff2e5;box-shadow:0 8px 0 #e0b997,0 13px 18px #a5806966}
.map-node.count-node.current{background:linear-gradient(#ffe4a8,#f5b773);box-shadow:0 8px 0 #d39b6f,0 0 0 7px #fff0cb99}.map-node.animal-node.current{background:linear-gradient(#decaf8,#b8a3e2);box-shadow:0 8px 0 #a18dc9,0 0 0 7px #f3eaff99}.map-node.emotion-node.current{background:linear-gradient(#ffd5bb,#f4a994);box-shadow:0 8px 0 #d58e80,0 0 0 7px #ffebdf99}
.intro-modes{gap:4px;max-width:100%}.intro-modes i{display:none}.intro-modes span,.intro-modes span:nth-child(11){width:clamp(30px,8vw,38px);height:clamp(30px,8vw,38px);border-radius:12px}.intro-modes img,.intro-modes span:nth-child(11) img{width:90%;height:90%}.intro-modes span:nth-child(13){background:#fff4e9;box-shadow:0 4px 0 #ebd6b8}.intro-modes span:nth-child(15){background:#f2edff;box-shadow:0 4px 0 #d9cce8}.intro-modes span:nth-child(17){background:#fff3e6;box-shadow:0 4px 0 #edcfb3}
.challenge-screen{padding:calc(85px + env(safe-area-inset-top)) 14px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#fff0d8,#f4f9e9 70%,#e9f5ef)}.challenge-screen[data-mode="animal"]{background:linear-gradient(180deg,#ebddfa,#f8f1ff 70%,#eaf4ed)}.challenge-screen[data-mode="emotion"]{background:linear-gradient(180deg,#ffe6d6,#fff4e9 65%,#ecf7ec)}.challenge-head{width:min(100%,650px)}.challenge-progress{display:flex;justify-content:center;gap:8px;flex:1}
.challenge-panel{position:relative;flex:1;width:min(100%,650px);min-height:0;margin-top:10px;padding:45px 14px 25px;border:5px solid #fffdf7;border-radius:38px;background:radial-gradient(circle at 50% 25%,#fffefa,#fff7e8 75%);box-shadow:inset 0 0 0 2px #f1e2c7,0 12px 0 #d9bfa1,0 20px 24px #a48e7555;display:flex;align-items:center;justify-content:space-around;flex-direction:column;overflow:hidden}.challenge-screen[data-mode="animal"] .challenge-panel{background:radial-gradient(circle at 50% 25%,#fffefa,#f6f1ff 75%);box-shadow:inset 0 0 0 2px #e8dbf4,0 12px 0 #c0b1da,0 20px 24px #9887af55}.challenge-screen[data-mode="emotion"] .challenge-panel{background:radial-gradient(circle at 50% 25%,#fffefa,#fff0e9 75%);box-shadow:inset 0 0 0 2px #f5dccc,0 12px 0 #e2b49f,0 20px 24px #aa897855}
.challenge-decor{position:absolute;top:8px;color:#e4b7ad;font-size:22px;letter-spacing:14px}.challenge-prompt{display:flex;align-items:center;justify-content:center;gap:8px;color:#b78169;font-size:clamp(22px,6vw,32px);font-weight:800;text-align:center}.challenge-prompt img{width:52px;height:52px;object-fit:contain}.challenge-stage{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;width:100%;min-height:125px;padding:8px;border-radius:26px;background:#fffdf2;border:3px dashed #e7dabb}.count-stage img{width:clamp(66px,18vw,100px);height:clamp(66px,18vw,100px);object-fit:contain;animation:modeFloat 2.4s ease-in-out infinite}.count-stage img:nth-child(even){animation-delay:.3s}.size-stage img,.order-stage img{width:115px;height:115px;object-fit:contain}.challenge-choices{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,20px);width:100%}.challenge-choice{display:grid;place-items:center;flex:0 1 125px;width:clamp(80px,25vw,125px);height:clamp(92px,27vw,135px);padding:5px;border-radius:clamp(21px,6vw,31px);border:4px solid white;background:linear-gradient(#fffdf7,#f9e9cf);box-shadow:0 8px 0 #d4b996,0 12px 15px #968c7c55;touch-action:manipulation;color:#a36e5c;font-size:clamp(48px,15vw,78px);font-weight:900}.challenge-choice:nth-child(2){background:linear-gradient(#fffdfa,#e9f4ff);box-shadow:0 8px 0 #adc9d9,0 12px 15px #968c7c55}.challenge-choice:nth-child(3){background:linear-gradient(#fffdfa,#f5edff);box-shadow:0 8px 0 #c9b9d8,0 12px 15px #968c7c55}.challenge-choice img{width:100%;height:100%;object-fit:contain}.challenge-choice.size-choice.small img,.challenge-choice.order-choice.rank-0 img{width:47%;height:47%}.challenge-choice.order-choice.rank-1 img{width:68%;height:68%}.challenge-choice.chosen{border-color:#a5dcb3;animation:patternPop .5s ease-in-out}.challenge-choice.try-again{animation:patternWobble .45s ease-in-out}.challenge-choice:disabled{opacity:.45}.challenge-slots{display:flex;justify-content:center;align-items:center;gap:10px;width:100%}.challenge-slot{display:grid;place-items:center;width:clamp(66px,20vw,95px);height:clamp(64px,19vw,90px);border-radius:20px;border:3px dashed #d7b8ac;background:#fff7ee;color:#e4c5b2;font-size:28px}.challenge-slot.rank-0 img{width:45%;height:45%}.challenge-slot.rank-1 img{width:67%;height:67%}.challenge-slot.rank-2 img{width:92%;height:92%}.challenge-slot img{object-fit:contain}.challenge-slot.filled{border-style:solid;border-color:#add6b7;background:#f2fff1;animation:patternPop .45s ease-in-out}.challenge-name{position:absolute;z-index:6;bottom:12px;left:50%;transform:translateX(-50%);max-width:90%;white-space:nowrap;padding:7px 16px;border:3px solid white;border-radius:22px;background:#fff9e8;box-shadow:0 4px 0 #d9ddc8;color:#8d8f74;font-size:clamp(17px,4.8vw,27px);font-weight:800;pointer-events:none;animation:revealCard .3s both}.lesson-visual>img.lesson-small{width:48px;height:48px}.lesson-visual>img.lesson-medium{width:75px;height:75px}
@media(max-width:390px){.intro-modes{gap:2px}.intro-modes span,.intro-modes span:nth-child(11){width:31px;height:31px}.challenge-panel{padding-left:8px;padding-right:8px}.challenge-choices{gap:7px}.challenge-prompt img{width:42px;height:42px}.count-stage img{width:clamp(57px,18vw,80px);height:clamp(57px,18vw,80px)}}
@media(max-height:680px){.challenge-screen{padding-top:67px;padding-bottom:14px}.challenge-panel{margin-top:4px;padding-top:29px;padding-bottom:10px}.challenge-decor{top:2px;font-size:17px}.challenge-stage{min-height:83px;padding:3px}.count-stage img{width:clamp(45px,13vw,74px);height:clamp(45px,13vw,74px)}.size-stage img,.order-stage img{width:70px;height:70px}.challenge-choice{height:clamp(70px,20vw,95px)}.challenge-slot{height:55px}.challenge-prompt img{width:35px;height:35px}}
@media(prefers-reduced-motion:reduce){.count-stage img,.challenge-choice.chosen,.challenge-choice.try-again,.challenge-slot.filled{animation:none}}

/* A continuous storybook journey from home through all ten chapters. */
.intro{justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding:calc(73px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,#eff8f344 0%,#fff7e044 55%,#eaf6da44 100%),url('./assets/intro-journey.webp') center 52%/cover no-repeat;animation:homePan 13s ease-in-out infinite alternate;scrollbar-width:none}.intro::-webkit-scrollbar{display:none}@keyframes homePan{to{background-position:center 47%}}
.intro-art{width:min(310px,82vw);height:clamp(105px,24dvh,230px);margin:0;filter:drop-shadow(0 15px 10px #426d6a33)}.intro-mascots{inset:0;width:100%;height:100%;object-fit:contain;animation:mascotFloat 3.7s ease-in-out infinite}.intro-spark{z-index:4;filter:drop-shadow(0 3px #fff)}.intro-title{margin-top:-7px;padding:3px 15px;border-radius:22px;background:#fff9e5c9;backdrop-filter:blur(6px);font-size:clamp(43px,12vw,65px);line-height:1.04;text-shadow:0 3px #fff}.intro-subtitle{margin:2px 0 6px;font-size:18px;gap:14px}.title-smile{display:none}.intro-ground{display:none}
.intro-journey{position:relative;z-index:2;width:min(100%,400px);padding:10px 13px 12px;border:3px solid #fff;border-radius:26px;background:#fffdf0e8;box-shadow:0 7px 0 #d4e1c2,0 13px 20px #648f8059;backdrop-filter:blur(9px)}.intro-journey-top{display:flex;align-items:center;gap:5px;color:#789986;font-size:15px;font-weight:700}.intro-journey-top img{width:24px;height:24px;object-fit:contain}.intro-journey-top span{flex:1}.intro-journey-top strong{color:#d69072;font-size:17px}.intro-progress-track{height:11px;margin:7px 1px 10px;border-radius:20px;background:#e8e9d4;box-shadow:inset 0 2px 3px #aab8a166;overflow:hidden}.intro-progress-track>div{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f7bc71,#f49d9d,#8fd5aa);transition:width .6s cubic-bezier(.2,.8,.2,1)}.intro-resume{display:flex;align-items:center;gap:10px}.intro-resume>img{width:45px;height:45px;object-fit:contain;filter:drop-shadow(0 4px 3px #b7a38c55);animation:modeFloat 3s ease-in-out infinite}.intro-resume>span{display:flex;flex:1;flex-direction:column;min-width:0}.intro-resume small{color:#9f9c87;font-size:13px;font-weight:700}.intro-resume strong{color:#648f81;font-size:21px;line-height:1.05}.intro-resume>b{display:flex;align-items:baseline;gap:2px;padding:6px 9px;border-radius:16px;background:#fff0d6;color:#d58767;font-size:26px;line-height:1;white-space:nowrap}.intro-resume>b small{font-size:12px;color:#b89072}
.intro-actions{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:17px;width:min(100%,400px);margin:9px 0 1px}.intro-main-action{display:flex;flex-direction:column;align-items:center;gap:1px}.intro-main-action strong{padding:3px 13px;border:2px solid white;border-radius:15px;background:#fff8e9e8;color:#ba836b;font-size:17px;line-height:1}.intro .play-btn{width:clamp(112px,31vw,150px);height:clamp(112px,31vw,150px);margin:0}.intro-map-btn{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:2px;width:86px;height:91px;border:3px solid white;border-radius:25px;background:#f8fff1e8;box-shadow:0 6px 0 #b8d7b5,0 11px 15px #5d938855;color:#719682;font-size:15px;font-weight:800}.intro-map-btn img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 3px 2px #b8aa8b66)}.intro-map-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #b8d7b5}
.intro-features{position:relative;z-index:2;display:flex;gap:7px;width:min(100%,405px);min-height:66px;padding:4px 2px 10px;margin-top:4px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}.intro-features::-webkit-scrollbar{display:none}.intro-features>div{display:flex;align-items:center;flex-direction:column;justify-content:center;flex:0 0 59px;min-height:59px;border:2px solid white;border-radius:17px;background:#fffaf0e8;box-shadow:0 4px 0 #d5dfcc;color:#8c9a84;font-size:11px;font-weight:800;scroll-snap-align:start}.intro-features img{width:35px;height:35px;object-fit:contain}.intro-features>div:nth-child(2n){background:#f8f1ffeb}.intro-features>div:nth-child(3n){background:#fff1e6eb}
.map-transitions{position:absolute;inset:0;z-index:1;pointer-events:none}.map-transitions i{position:absolute;left:0;right:0;top:var(--seam);height:clamp(210px,50vw,340px);transform:translateY(-50%);background:url('./assets/map-transition.webp') center/100% 100% no-repeat;opacity:.92}.map-node.current{animation:nodePulse 2s ease-in-out infinite,nodeGlow 3.4s ease-in-out infinite}@keyframes nodeGlow{50%{filter:drop-shadow(0 0 10px #fff4bf)}}.map-chapter-gate img{animation:gateBob 3.2s ease-in-out infinite}.map-chapter-gate img:last-child{animation-delay:.55s}@keyframes gateBob{50%{transform:translateY(-5px) rotate(5deg)}}
.app.playing .screen:not(.intro):not(.map-screen)::before{content:"";position:absolute;inset:0;z-index:0;background:var(--chapter-art) center/cover no-repeat;opacity:.13;pointer-events:none}.app.stage-arrival .screen:not(.hidden) .game-head,.app.stage-arrival .screen:not(.hidden) .board-wrap,.app.stage-arrival .screen:not(.hidden) .trace-panel,.app.stage-arrival .screen:not(.hidden) .find-panel,.app.stage-arrival .screen:not(.hidden) .memory-panel,.app.stage-arrival .screen:not(.hidden) .pattern-panel,.app.stage-arrival .screen:not(.hidden) .challenge-panel{animation:stageEntrance .48s cubic-bezier(.18,.8,.25,1.15) both}@keyframes stageEntrance{from{opacity:.3;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.celebration{background:linear-gradient(#e7f7e2dd,#fff5e9dd),var(--chapter-art) center/cover no-repeat}.celebration-next-preview{display:flex;align-items:center;gap:10px;padding:7px 13px;border:3px solid white;border-radius:19px;background:#fffdf0ed;box-shadow:0 5px 0 #cbdac0;color:#7f9e89;animation:revealCard .38s .18s both}.celebration-next-preview img{width:43px;height:43px;object-fit:contain}.celebration-next-preview span{display:flex;flex-direction:column}.celebration-next-preview small{font-size:12px;font-weight:700;color:#a7a693}.celebration-next-preview strong{font-size:17px;line-height:1.1}
.discovery-next-preview{display:flex;align-items:center;gap:7px;padding:4px 10px;border:2px solid #fff;border-radius:17px;background:#fffaf0dd;box-shadow:0 3px 0 #e0dac9;color:#8b9d89;font-size:14px;font-weight:800}.discovery-next-preview img{width:30px;height:30px;object-fit:contain}@media(max-height:680px){.discovery-next-preview{font-size:12px;padding:2px 7px}.discovery-next-preview img{width:25px;height:25px}}
@media(max-height:700px){.intro{padding-top:calc(58px + env(safe-area-inset-top))}.intro-art{height:clamp(90px,18dvh,135px)}.intro-title{font-size:clamp(41px,11vw,54px)}.intro-subtitle{margin:0 0 3px}.intro-journey{padding-top:7px;padding-bottom:8px}.intro-resume>img{width:36px;height:36px}.intro-resume strong{font-size:18px}.intro-resume>b{font-size:21px}.intro .play-btn{width:clamp(104px,28vw,125px);height:clamp(104px,28vw,125px)}.intro-map-btn{width:74px;height:79px}.intro-map-btn img{width:48px;height:48px}.intro-features{margin-top:2px}}
@media(prefers-reduced-motion:reduce){.intro,.intro-mascots,.intro-resume>img,.map-node.current,.map-chapter-gate img,.app.stage-arrival .screen:not(.hidden) .game-head,.app.stage-arrival .screen:not(.hidden) .board-wrap,.app.stage-arrival .screen:not(.hidden) .trace-panel,.app.stage-arrival .screen:not(.hidden) .find-panel,.app.stage-arrival .screen:not(.hidden) .memory-panel,.app.stage-arrival .screen:not(.hidden) .pattern-panel,.app.stage-arrival .screen:not(.hidden) .challenge-panel{animation:none}}

/* The primary action and its ornament stay within the touch target. */
.intro-main-action{min-width:0;max-width:100%}.intro .play-btn{isolation:isolate;animation:introPlayBreathe 2.6s ease-in-out infinite;filter:drop-shadow(0 7px 6px #52a57955)}
.intro .play-btn::before{inset:7px;border:2px dashed #eaffdf;opacity:.78;z-index:-1}
.intro .play-btn img{position:relative;z-index:1}
@keyframes introPlayBreathe{50%{transform:scale(1.035);filter:drop-shadow(0 8px 8px #52a57966)}}
.intro-actions{padding:0 6px;gap:clamp(8px,3vw,17px)}
.intro-main-action strong{color:#578b65;background:#f5fff1f2;max-width:100%;text-align:center}
.lesson-card button{background:#ddf6df;box-shadow:0 7px 0 #a8d8aa}
.language-setting{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:69px;padding:8px 10px;border:2px solid #d9eee1;border-radius:21px;background:#effbf1;box-shadow:0 4px 0 #cde7d5}
.language-heading{color:#598875;font-size:18px;font-weight:700;white-space:nowrap}.language-options{display:flex;gap:5px;min-width:0;padding:4px;border-radius:17px;background:#dcefe2}.language-options button{min-height:42px;min-width:72px;padding:4px 9px;border-radius:13px;background:transparent;color:#5b8b75;font-size:15px;font-weight:700;white-space:nowrap;transition:background .18s,box-shadow .18s,transform .18s}.language-options button[aria-pressed="true"]{background:#fff;color:#3d855d;box-shadow:0 3px 0 #b4d8bf}.language-options button:active{transform:translateY(2px)}
.utility-panel{max-height:calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media(max-width:360px){.topbar{padding-left:8px;padding-right:8px}.brand{font-size:18px;letter-spacing:-.8px}.brand-sun{font-size:12px}.top-actions .round-btn,.home-btn{width:40px;height:40px;border-radius:14px}.intro{padding-left:10px;padding-right:10px}.intro-title{font-size:clamp(39px,12vw,45px);letter-spacing:-3px}.intro-journey{padding-left:9px;padding-right:9px}.intro-journey-top{font-size:13px}.intro-resume strong{font-size:18px}.intro-resume>b{padding:5px 6px}.intro .play-btn{width:clamp(102px,34vw,119px);height:clamp(102px,34vw,119px)}.intro-map-btn{width:76px;height:77px}.intro-map-btn img{width:46px;height:46px}.language-setting{gap:5px;padding:7px}.language-heading{font-size:16px}.language-options button{min-width:61px;padding:4px 6px;font-size:14px}}
@media(max-height:600px){.app{min-height:0}.intro{padding-top:calc(52px + env(safe-area-inset-top))}.intro-art{height:82px}.intro-title{font-size:40px}.intro-journey{padding-top:6px;padding-bottom:6px}.intro-resume>img{width:31px;height:31px}.intro-resume strong{font-size:17px}.intro .play-btn{width:96px;height:96px}.intro-features{min-height:58px}.intro-features>div{min-height:54px}.settings-list{gap:7px}.setting-row{min-height:49px;font-size:17px}.language-setting{min-height:57px}.settings-album{margin-top:9px}}
@media(prefers-reduced-motion:reduce){.intro .play-btn{animation:none}}
.parent-area{margin-top:17px;padding:12px;border:2px solid #dce9da;border-radius:22px;background:#f8fcf4}.parent-open{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:7px 10px;border-radius:16px;background:#e8f4e7;color:#567f71;text-align:left;font-size:18px;font-weight:800}.parent-open span{flex:1}.parent-open:after{content:'›';font-size:27px;line-height:1}.parent-open[aria-expanded="true"]:after{transform:rotate(90deg)}.parent-gate{padding:13px 5px 4px;color:#637f70;font-size:16px;font-weight:700}.parent-gate label{display:block;margin-bottom:7px}.parent-gate>div{display:flex;gap:8px}.parent-gate input{width:100%;min-width:0;height:50px;padding:5px 12px;border:2px solid #b9d9c3;border-radius:13px;background:white;color:#456c5a;font:700 23px 'Baloo 2',sans-serif}.parent-gate button{min-width:78px;border-radius:13px;background:#80d3a0;color:#fff;font-size:19px;font-weight:800;box-shadow:0 4px 0 #56ab77}.parent-gate p{min-height:18px;margin:6px 1px 0;color:#c97272;font-size:14px}.parent-content{padding:9px 2px 0}.parent-content p{margin:4px 4px 9px;color:#627e70;font-size:14px;line-height:1.28;font-weight:600}.parent-content .parent-offline{color:#4a9b70}.parent-link{display:flex;align-items:center;min-height:44px;margin:6px 0;padding:7px 12px;border-radius:13px;background:#fff;color:#518a71;text-decoration:none;font-size:16px;font-weight:800}.parent-link:after{content:'↗';margin-left:auto}.parent-content .reset-open{margin-top:14px;width:100%}.parent-content .reset-confirm{margin-top:8px}.platform-youtube .sound-btn,.platform-youtube .parent-area{display:none!important}.platform-paused{animation-play-state:paused!important}.platform-paused *,.platform-paused *:before,.platform-paused *:after{animation-play-state:paused!important}.platform-paused .app{pointer-events:none}

/* Animal discovery adds a small interactive picture book to the home screen. */
.animal-corner{position:relative;z-index:2;width:min(100%,405px);margin:12px auto 5px;padding:13px;border:3px solid #fff;border-radius:27px;background:linear-gradient(145deg,#fbfff4ee,#f5f8ffed);box-shadow:0 7px 0 #bdd9bd,0 11px 18px #72988542}.animal-corner-head{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;color:#61977b}.animal-corner-head>span{color:#eeb5ad;font-size:23px}.animal-corner h2{margin:0;font-size:21px;line-height:1.04}.animal-corner-head p{margin:1px 0 0;font-size:12px;font-weight:700;color:#91a78e}.animal-friends{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:10px}.animal-friend{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:0;min-height:68px;padding:3px 1px;border:2px solid #e7e8d6;border-radius:15px;background:#fffefa;box-shadow:0 3px 0 #d4dcc8;transition:transform .16s,background .16s}.animal-friend img{width:43px;height:43px;object-fit:contain;filter:drop-shadow(0 2px 2px #8c9d8a44)}.animal-friend span{font-size:10px;line-height:1;color:#6d947d;font-weight:800;white-space:nowrap}.animal-friend:active,.animal-friend.selected{transform:translateY(2px) scale(1.04);background:#fff3cb;box-shadow:0 1px 0 #d4dcc8}.animal-spotlight{min-height:22px;margin:8px 2px 0;text-align:center;color:#638e78;font-size:12px;line-height:1.2;font-weight:800}.future-banner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(100%,405px);margin:9px auto 2px;padding:8px 10px;border:2px dashed #f2c789;border-radius:18px;background:#fff7e2d9;color:#9b8657;text-align:center;box-shadow:0 4px 0 #e4dab5}.future-banner strong{font-size:15px;line-height:1.15}.future-banner span{font-size:11px;font-weight:700}.future-banner.journey-complete{background:#fff0ce;animation:futureGlow 2.8s ease-in-out infinite alternate}.intro-credit{position:relative;z-index:2;margin:12px 0 8px;color:#678b78;text-align:center;font-size:11px;font-weight:800;text-shadow:0 1px #fff}.map-future{position:absolute;z-index:7;top:calc(98px + env(safe-area-inset-top));left:50%;display:none;align-items:center;justify-content:center;gap:3px;width:min(73vw,310px);padding:5px 8px;border:3px solid white;border-radius:22px;background:#fffbdbed;box-shadow:0 6px 0 #d8c49a,0 9px 15px #9b8f7166;transform:translateX(-50%);pointer-events:none}.map-future.visible{display:flex;animation:futureGlow 2.8s ease-in-out infinite alternate}.map-future img{width:47px;height:47px;object-fit:contain}.map-future span{display:flex;flex-direction:column;text-align:center;color:#9c8158}.map-future strong{font-size:22px;line-height:1}.map-future small{font-size:11px;font-weight:800;white-space:nowrap}.final-teaser{display:flex;align-items:center;justify-content:center;gap:5px;width:min(90vw,365px);padding:8px;border:3px solid #fff;border-radius:23px;background:#fff8e9ed;box-shadow:0 6px 0 #d4d9af;text-align:center;color:#8b9168;animation:revealCard .4s both}.final-teaser img{width:57px;height:57px;object-fit:contain}.final-teaser div{display:flex;flex-direction:column;min-width:0}.final-teaser strong{font-size:16px;line-height:1.1}.final-teaser span{font-size:12px;line-height:1.1;font-weight:700}.developer-credit{margin-top:12px!important;color:#658d76!important;font-weight:800!important}.platform-android .developer-link{display:none}.developer-offline-domain{color:#4c9b78}.platform-youtube .intro-credit{display:none}.platform-youtube .animal-corner{margin-bottom:10px}@keyframes futureGlow{to{filter:drop-shadow(0 0 9px #ffe7a1)}}
@media(max-width:360px){.animal-friends{grid-template-columns:repeat(3,minmax(0,1fr))}.animal-friend{min-height:62px}.animal-friend img{width:36px;height:36px}.animal-corner{padding:9px}.final-teaser img{width:44px;height:44px}}
@media(max-height:630px){.animal-corner{margin-top:7px}.celebration:has(.final-teaser:not(.hidden)) .celebration-illustration{width:min(65vw,32vh)}}
/* The primary action sits directly below the wordmark. */
.intro-spark,.intro-subtitle{display:none!important}.intro-title{position:relative;z-index:2}.intro-actions{order:0;min-height:145px;margin:0 auto 8px}.intro-journey{order:1}.intro-features{order:2}.animal-corner{order:3}.intro-credit{order:4}.intro-ground{order:5}.intro-main-action{z-index:2}.intro-map-btn{position:absolute;right:0;bottom:10px;width:70px;height:73px;font-size:12px;border-radius:20px}.intro-map-btn img{width:43px;height:43px}.intro .play-btn{width:clamp(122px,36vw,162px);height:clamp(122px,36vw,162px)}.intro-main-action strong{margin-top:-4px}.animal-friends{grid-template-columns:repeat(4,minmax(0,1fr))}.animal-friend img{width:49px;height:49px}.animal-friend span{font-size:11px}.map-future{display:flex!important;top:.12%;left:50%;width:min(74vw,300px);height:86px;animation:futureGlow 2.8s ease-in-out infinite alternate}.map-future img{width:56px;height:56px}
/* A stone wall and wooden door mark every chapter boundary. */
/* Clue cards turn the last twenty levels into recognition games. */
.challenge-screen[data-mode="animal"]{background:linear-gradient(180deg,#dbf3dc,#fff6e7 75%,#e4f1da)}.challenge-screen[data-mode="emotion"]{background:linear-gradient(180deg,#f7e6ef,#fff8e7 75%,#e7f3f6)}.challenge-screen[data-mode="animal"] .challenge-panel{background:radial-gradient(circle at 50% 25%,#fffefa,#f2fae9 75%);box-shadow:inset 0 0 0 2px #d8e9d4,0 12px 0 #abcaa8,0 20px 24px #74937255}.challenge-screen[data-mode="emotion"] .challenge-panel{background:radial-gradient(circle at 50% 25%,#fffefa,#fff0f4 75%);box-shadow:inset 0 0 0 2px #eedce5,0 12px 0 #d9b7ca,0 20px 24px #aa839755}.challenge-prompt #challengeSpeak{display:grid;place-items:center;width:46px;height:46px;flex:none;border:3px solid white;border-radius:15px;background:#a7d9c0;box-shadow:0 4px 0 #83b79e;color:#fff;font-size:23px}.recognition-stage{flex-direction:column;gap:0;padding:8px 10px}.clue-emoji{font-size:clamp(54px,16vw,90px);line-height:1;filter:drop-shadow(0 3px 4px #a5a5a566)}.clue-caption{font-size:clamp(17px,4.3vw,24px);font-weight:800;color:#729781;text-align:center;line-height:1.05}.emotion-stage .clue-caption{color:#aa8398}.challenge-choices.recognition-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:clamp(7px,2vw,14px)}.recognition-choice{width:min(100%,118px);height:clamp(85px,23vw,120px);min-width:0;min-height:0}.recognition-choice img{max-width:95%;max-height:95%}.recognition-choice:nth-child(4){grid-column:1 / 2}.recognition-choice:nth-child(5){grid-column:3 / 4}.challenge-screen[data-mode="animal"] .challenge-choice.chosen,.challenge-screen[data-mode="emotion"] .challenge-choice.chosen{background:#e8ffdf}.challenge-name{white-space:normal;text-align:center;min-width:50%}
@media(max-height:650px){.intro-actions{min-height:110px}.intro .play-btn{width:112px;height:112px}.intro-map-btn{width:62px;height:65px}.recognition-stage{min-height:92px}.clue-emoji{font-size:46px}.clue-caption{font-size:15px}.recognition-choice{height:72px}}
.challenge-stage.animal-stage,.challenge-stage.emotion-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 10px}
#challengeSpeak img{width:34px;height:34px;object-fit:contain}
.recognition-choices:has(> :nth-child(2):last-child),.recognition-choices:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,118px));justify-content:center}
.recognition-choices:has(> :nth-child(4):last-child) .recognition-choice:nth-child(4){grid-column:auto}
@media(max-width:360px){.intro-map-btn{right:3px;bottom:13px;width:58px;height:63px}.intro-map-btn img{width:39px;height:39px}.intro .play-btn{width:120px;height:120px}.animal-friends{grid-template-columns:repeat(4,minmax(0,1fr))}.animal-friend img{width:42px;height:42px}}

/* Compact, themed chapter doors stay inside the map rather than spanning the screen. */
.map-chapter-gate{--gate-edge:#92c4d3;--gate-floor:#d6e8cf;position:absolute;left:50%;z-index:4;display:block;width:116px;height:111px;padding:0;transform:translate(-50%,-50%);border:0;border-radius:0;background:none!important;box-shadow:none!important;overflow:visible;isolation:initial;pointer-events:none}
.map-chapter-gate:before{content:none!important}
.map-chapter-gate:after{content:"";position:absolute;left:50%;right:auto;top:auto;bottom:-10px;z-index:0;width:142px;height:20px;transform:translateX(-50%);border:0;border-radius:50%;background:radial-gradient(ellipse,#fffaf1 0 30%,var(--gate-floor) 69%,transparent 70%);box-shadow:none}
.map-chapter-gate .gate-portal{position:absolute;inset:5px 9px 0;z-index:1;border:8px solid var(--gate-edge);border-bottom-width:5px;border-radius:54px 54px 16px 16px;background:radial-gradient(circle at 50% 35%,#fffde1,#c8f4da 63%,#99d9ce);box-shadow:inset 0 1px 7px #ffffffaa,0 7px 0 #6e9a8b66,0 10px 11px #526c6e44}
.map-chapter-gate .gate-portal:after{content:"✦";position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);color:#fff;font-size:37px;text-shadow:0 0 13px #fff,0 3px 3px #78a997}
.map-chapter-gate .gate-leaf{position:absolute;inset:1px 2px 0;z-index:2;display:block;transform-style:preserve-3d;backface-visibility:hidden}
.map-chapter-gate .gate-leaf img{display:block;width:100%;height:100%;object-fit:contain;animation:none!important;filter:drop-shadow(0 4px 3px #5e705d77)}
.map-chapter-gate .gate-left img{clip-path:inset(0 50% 0 0)}
.map-chapter-gate .gate-right img{clip-path:inset(0 0 0 50%)}
.map-chapter-gate.open .gate-left{transform-origin:50% 60%;animation:chapterLeftOpen .85s cubic-bezier(.18,.8,.25,1) both}
.map-chapter-gate.open .gate-right{transform-origin:50% 60%;animation:chapterRightOpen .85s cubic-bezier(.18,.8,.25,1) both}
@keyframes chapterLeftOpen{from{transform:translateX(0) rotateY(0)}to{transform:translateX(-17px) rotateY(-44deg)}}
@keyframes chapterRightOpen{from{transform:translateX(0) rotateY(0)}to{transform:translateX(17px) rotateY(44deg)}}
.map-chapter-gate .gate-label{position:absolute;z-index:5;left:50%;top:-24px;min-width:78px;max-width:148px;padding:2px 9px;transform:translateX(-50%);border:2px solid #fff;border-radius:12px;background:#fff9e9f4;color:#618773;box-shadow:0 3px 0 #b1cdbc;text-align:center;font-size:12px;line-height:1.05;font-weight:800;white-space:nowrap}
.map-chapter-gate .gate-lock{position:absolute;left:50%;top:55%;z-index:4;display:block;width:31px;height:31px;transform:translate(-50%,-50%);padding:3px;border:2px solid white;border-radius:50%;background:#fff6dc;box-shadow:0 3px 5px #695a5788;animation:none!important;filter:none}
.map-chapter-gate.drawing-gate{--gate-edge:#9acbda;--gate-floor:#bddde5}.map-chapter-gate.story-gate{--gate-edge:#e1a8c7;--gate-floor:#efd1dc}.map-chapter-gate.dream-gate{--gate-edge:#b7a7dc;--gate-floor:#d5c8e8}.map-chapter-gate.discovery-gate{--gate-edge:#a4cfa9;--gate-floor:#d5e8c8}.map-chapter-gate.memory-gate{--gate-edge:#b5abd9;--gate-floor:#d5d0e8}.map-chapter-gate.pattern-gate{--gate-edge:#91cdbf;--gate-floor:#c6e8d9}.map-chapter-gate.count-gate{--gate-edge:#e1bf80;--gate-floor:#f0dfb4}.map-chapter-gate.animal-gate{--gate-edge:#9aca93;--gate-floor:#c9e7b3}.map-chapter-gate.emotion-gate{--gate-edge:#e8adac;--gate-floor:#f1d2ca}
@media(prefers-reduced-motion:reduce){.map-chapter-gate.open .gate-left{animation:none;transform:translateX(-17px) rotateY(-44deg)}.map-chapter-gate.open .gate-right{animation:none;transform:translateX(17px) rotateY(44deg)}}

/* Give the home controls their own rows and keep artwork inside each tile. */
.app:not(.in-map):not(.playing) .topbar{justify-content:flex-end}.app:not(.in-map):not(.playing) .topbar .brand,.app:not(.in-map):not(.playing) .topbar .home-btn{display:none}
.intro{padding-top:calc(69px + env(safe-area-inset-top));gap:0}
.intro-art{flex:none;width:min(275px,76vw);height:clamp(122px,23dvh,195px);transform:none;margin:0 auto}
.intro-title{flex:none;margin:0 auto 4px;padding:2px 12px;font-size:clamp(43px,12vw,61px)}
.intro-actions{order:0;flex:none;width:100%;min-height:0;margin:1px auto 4px;padding:0;overflow:visible}
.intro-main-action{width:100%;gap:0}.intro-main-action strong{position:relative;z-index:2;margin-top:-10px;padding:4px 16px}
.intro .play-btn{width:clamp(124px,35vw,153px);height:clamp(124px,35vw,153px);flex:none;animation:introPlayBreathe 3s ease-in-out infinite}
.intro .play-btn img{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.intro-journey{order:1;flex:none;margin:8px auto 0}
.intro-map-btn{position:relative;right:auto;bottom:auto;order:2;display:flex;flex:none;flex-direction:row;width:min(100%,405px);height:61px;margin:11px auto 0;padding:5px 13px;border-radius:20px;font-size:17px;box-shadow:0 5px 0 #b8d7b5,0 8px 12px #5d938844}
.intro-map-btn img{width:43px;height:43px;flex:none}.intro-map-btn span{flex:1;text-align:left}
.intro-features{order:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,405px);min-height:0;margin:14px auto 0;padding:0 1px 5px;overflow:visible;scroll-snap-type:none}
.intro-features>div{min-width:0;min-height:66px;gap:1px;padding:3px 1px;flex:auto;border-radius:16px;font-size:11px;line-height:1.05;white-space:nowrap}
.intro-features img{display:block;width:34px;height:34px;flex:none;object-fit:contain}
.animal-corner{order:4;margin-top:15px}.intro-credit{order:5}
@media(max-width:360px){.intro{padding-left:12px;padding-right:12px}.intro .play-btn{width:126px;height:126px}.intro-map-btn{width:min(100%,405px);height:57px;right:auto;bottom:auto}.intro-map-btn img{width:39px;height:39px}.intro-features{gap:5px}.intro-features>div{min-height:61px;font-size:10px}.intro-features img{width:30px;height:30px}}
@media(max-height:640px){.intro-art{height:104px}.intro-title{font-size:44px}.intro .play-btn{width:112px;height:112px}.intro-map-btn{height:54px;margin-top:7px}.intro-features{margin-top:10px}}

/* Map controls live below the path header; the 101+ note sits above level 100. */
.map-tools{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));left:14px}.map-progress{top:auto;bottom:calc(20px + env(safe-area-inset-bottom));right:14px}
.map-future{top:calc(109px + env(safe-area-inset-top));left:50%;display:flex!important;width:min(66vw,244px);height:67px;min-height:0;padding:3px 6px;gap:3px;border-radius:18px;background:#fffaf0f7;box-shadow:0 4px 0 #d8c49a,0 7px 12px #9b8f7144;transform:translateX(-50%);animation:none}
.map-future img{width:40px;height:40px;flex:none}.map-future strong{font-size:20px}.map-future small{font-size:10px;line-height:1.06;white-space:normal}
@media(max-width:360px){.map-future{width:190px;top:calc(108px + env(safe-area-inset-top));height:65px}.map-future img{width:32px;height:32px}.map-future small{font-size:9px}.map-tools button{width:48px;height:48px}.map-progress{font-size:16px}}
.settings-list{grid-template-columns:minmax(0,1fr);min-width:0}.voice-setting{width:100%;min-width:0;max-width:100%;overflow:hidden;padding:9px 11px 10px;border:2px solid #e4eee2;border-radius:19px;background:#fffdf6;color:#648578;box-shadow:0 3px 0 #dce9d9}.voice-setting label{display:block;margin-bottom:5px;font-size:16px;font-weight:800}.voice-controls{display:flex;width:100%;min-width:0;max-width:100%;gap:7px}.voice-controls select{display:block;flex:1 1 0;width:0;min-width:0;max-width:100%;height:45px;padding:0 10px;border:2px solid #d5e8da;border-radius:13px;background:#f7fcf5;color:#537462;font:700 15px 'Baloo 2',sans-serif;text-overflow:ellipsis;overflow:hidden}.voice-controls button{display:grid;place-items:center;flex:0 0 47px;width:47px;height:45px;border:2px solid white;border-radius:13px;background:#d6f1db;box-shadow:0 3px 0 #b2d7bd}.voice-controls button img{width:34px;height:34px;object-fit:contain}.voice-setting small{display:block;margin-top:5px;font-size:11px;line-height:1.1;font-weight:700;color:#91a699}
.parent-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.parent-actions button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:53px;padding:7px 8px;border:2px solid #fff;border-radius:16px;background:#e2f4ea;color:#478565;box-shadow:0 4px 0 #bfdfca;font-size:clamp(13px,3.8vw,16px);font-weight:800;line-height:1.1;text-align:center}.parent-actions button:last-child{background:#fff1cf;color:#a98341;box-shadow:0 4px 0 #e4d4a9}.parent-actions button span:first-child{font-size:22px;line-height:1}.parent-actions button:active{transform:translateY(3px);box-shadow:none}.feedback-form{min-width:0;padding:11px;border:2px solid #d6e9da;border-radius:17px;background:#fffdf6}.feedback-form label{display:block;margin-bottom:6px;color:#587f6b;font-size:17px;font-weight:800}.feedback-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:8px}.feedback-types button{min-width:0;min-height:37px;padding:4px 2px;border-radius:11px;background:#eef4e9;color:#6e8b78;font-size:12px;font-weight:800;white-space:nowrap}.feedback-types button[aria-pressed="true"]{background:#d8efdd;box-shadow:inset 0 0 0 2px #91c9a2;color:#477c60}.feedback-form textarea{display:block;width:100%;max-width:100%;min-width:0;min-height:92px;max-height:200px;resize:vertical;padding:9px 11px;border:2px solid #cfe3d4;border-radius:12px;background:#fff;color:#486c58;font:600 16px 'Baloo 2',sans-serif;line-height:1.25;user-select:text;-webkit-user-select:text}.feedback-form textarea:focus{outline:3px solid #a9d9b6;outline-offset:1px}.parent-content .feedback-count{text-align:right;margin:3px 1px;color:#8caa94;font-size:12px}.feedback-send{width:100%;min-height:46px;margin-top:2px;border-radius:13px;background:#74ca96;color:white;box-shadow:0 4px 0 #54a979;font-size:16px;font-weight:800}.feedback-send:disabled{opacity:.6;box-shadow:none;cursor:default}.parent-content .feedback-status,.parent-content .rate-status{margin:6px 2px;color:#638876;font-size:12px;line-height:1.25}.parent-content .rate-status:empty,.parent-content .feedback-status:empty{display:none}
.map-chapter-gate>img.gate-lock{display:block}
.map-chapter-gate.open .gate-portal{background:radial-gradient(circle at 50% 33%,#fffef2,#bcefd8 63%,#90d2c4)}
.map-chapter-gate.open .gate-portal:after{animation:gateStarGlow 2.5s ease-in-out infinite alternate}
.map-chapter-gate.open .gate-label{background:#f2fff4;color:#4f9b71}
@keyframes gateStarGlow{to{opacity:.65;transform:translate(-50%,-50%) scale(1.2);text-shadow:0 0 17px white,0 2px 6px #84e3be}}
@media(prefers-reduced-motion:reduce){.map-chapter-gate.open .gate-portal:after{animation:none}}

/* One continuous path passes through nine wall openings at the chapter seams. */
.map-track{isolation:isolate}
.map-scroll{touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.map-route{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.map-route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.map-route-shadow{stroke:#a88a6280;stroke-width:76;filter:drop-shadow(0 6px 5px #7e846a66)}
.map-route-sand{stroke:#f9e5b2;stroke-width:67}
.map-route-light{stroke:#fff9dfb8;stroke-width:3;stroke-dasharray:3 23}
.map-gate-walls{position:absolute;inset:0;z-index:3;pointer-events:none}
.map-gate-walls i{--wall:#c6d8c4;--wall-dark:#8bb5a3;position:absolute;left:0;right:0;top:var(--seam);display:grid;grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr);height:82px;transform:translateY(-50%)}
.map-gate-walls i:before,.map-gate-walls i:after{content:"";display:block;min-width:0;height:100%;box-sizing:border-box;border-top:8px solid #dbefcf;border-bottom:5px solid var(--wall-dark);background:repeating-linear-gradient(0deg,transparent 0 26px,#fff9eb9c 27px 30px,transparent 31px 53px,#759f9166 54px 57px),repeating-linear-gradient(90deg,#f4f3db88 0 3px,transparent 3px 58px),linear-gradient(155deg,#f8f5dc,var(--wall) 55%,var(--wall-dark));box-shadow:inset 0 2px 0 #fff9e8,0 6px 7px #54796755}
.map-gate-walls i:before{grid-column:1;border-radius:0 17px 17px 0;border-right:8px solid #fff6df}
.map-gate-walls i:after{grid-column:3;border-radius:17px 0 0 17px;border-left:8px solid #fff6df}
.map-gate-walls .drawing-wall{--wall:#c7e2e4;--wall-dark:#85b7bc}.map-gate-walls .story-wall{--wall:#eed5e4;--wall-dark:#be9bb8}.map-gate-walls .dream-wall{--wall:#ddd6f0;--wall-dark:#a99ccc}.map-gate-walls .discovery-wall{--wall:#d5e9c9;--wall-dark:#9fc39b}.map-gate-walls .memory-wall{--wall:#dcd9ef;--wall-dark:#aaa3cf}.map-gate-walls .pattern-wall{--wall:#cce9dd;--wall-dark:#92bfaa}.map-gate-walls .count-wall{--wall:#f0e1bd;--wall-dark:#c9aa79}.map-gate-walls .animal-wall{--wall:#d5e8bd;--wall-dark:#9fbd89}.map-gate-walls .emotion-wall{--wall:#f2d9d4;--wall-dark:#d3a8a0}
.map-chapter-gate{z-index:4}.map-nodes{z-index:5;pointer-events:none}.map-node{pointer-events:auto}
.map-chapter-gate .gate-label{top:auto;bottom:-35px;padding:4px 10px;font-size:13px}

/* Larger controls and consistent art frames for small touch screens. */
.topbar{height:90px;padding:calc(11px + env(safe-area-inset-top)) 12px 0;align-items:flex-start}
.round-btn,.top-actions .round-btn,.home-btn{width:56px;height:56px;border-radius:19px}
.top-actions{gap:7px}.brand{font-size:clamp(18px,5vw,25px);padding-top:12px}
.round-btn img,.round-btn.home-btn img,.round-btn.sound-btn img,.round-btn.restart-btn img,.settings-btn img,.sound-btn img{width:39px!important;height:39px!important;object-fit:contain;object-position:center;margin:auto}
.game-head{gap:8px;min-height:58px;height:auto}.game-head .round-btn{width:54px;height:54px;flex:none}
.game-head .round-btn img{width:37px!important;height:37px!important}
.map-tools button,.map-tools button:last-child{width:58px;height:58px}.map-tools img{width:42px;height:42px}
.tile,.find-option,.pattern-option,.pattern-sequence-card,.challenge-choice,.memory-card-front{place-items:center}
.tile>.item-art,.find-option>img,.pattern-option>img,.pattern-sequence-card>img,.challenge-choice>img,.memory-card-front>img{display:block;justify-self:center;align-self:center;margin:auto;object-fit:contain;object-position:center;flex:none}
.tile>.item-art{width:min(94%,106px);height:min(94%,106px)}
.find-option>img,.pattern-option>img,.challenge-choice>img,.memory-card-front>img{max-width:94%;max-height:94%;width:94%;height:94%}
.recognition-choice{display:flex;align-items:center;justify-content:center}
.recognition-choice>img{width:85%;height:85%;max-width:100%;max-height:100%;margin:0}
.pattern-sequence-card>img{width:96%;height:96%}
@media(max-width:390px){.topbar{padding-left:9px;padding-right:9px}.top-actions{gap:5px}.top-actions .round-btn,.home-btn{width:54px;height:54px}.brand{font-size:19px}.brand-sun{font-size:13px}.game-head .round-btn{width:51px;height:51px}.map-tools button,.map-tools button:last-child{width:56px;height:56px}}
@media(max-width:340px){.brand{font-size:16px;letter-spacing:-.7px}.brand-sun{display:none}.game-head{gap:5px}.game-head .round-btn{width:49px;height:49px}.setting-row{gap:7px;padding:8px 9px;font-size:16px}.setting-symbol{width:26px;flex:none;font-size:23px}.setting-switch{flex:none}}

/* The atlas uses road-free artwork. Each world fades into a shared portal seam. */
.map-screen,.map-track{background:#e8f4dc}
.map-track:before{display:none}
.map-region{background-position:center;background-size:100% 100%;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 5%,#000 95%,transparent 100%)}
.map-garden{background-image:url('./assets/map-v2-garden.webp')}
.map-sky{background-image:url('./assets/map-v2-sky.webp')}
.map-candy{background-image:url('./assets/map-v2-candy.webp')}
.map-dream{background-image:url('./assets/map-v2-dream.webp')}
.map-discovery{background-image:url('./assets/map-v2-discovery.webp')}
.map-memory{background-image:url('./assets/map-v2-memory.webp')}
.map-pattern{background-image:url('./assets/map-v2-pattern.webp')}
.map-count{background-image:url('./assets/map-v2-count.webp')}
.map-animals{background-image:url('./assets/map-v2-animals.webp')}
.map-emotions{background-image:url('./assets/map-v2-emotions.webp')}
.map-chapter-gate{top:var(--seam)!important}
.map-gate-walls i{top:var(--seam);display:grid;grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr);height:66px;background:none;filter:none}
.map-gate-walls i:before,.map-gate-walls i:after{display:block;height:100%;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 5px 4px #526f6255)}
.map-gate-walls i:before{grid-column:1;background:url('./assets/map-v2-wall-left.webp') right center/100% 100% no-repeat}
.map-gate-walls i:after{grid-column:3;background:url('./assets/map-v2-wall-right.webp') left center/100% 100% no-repeat}
.map-route-shadow{stroke:#9d815e8c;stroke-width:79;filter:drop-shadow(0 7px 5px #66836d75)}
.map-route-sand{stroke:#f8dfae;stroke-width:69}
.map-route-light{stroke:#fff9d9;stroke-width:4;stroke-dasharray:2 23}
@media(min-width:700px){.map-chapter-gate{width:140px;height:132px}.map-gate-walls i{grid-template-columns:minmax(0,1fr) 142px minmax(0,1fr);height:78px}}

/* Home sections keep their own height in the scroll column. */
.intro{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.intro-features{flex:0 0 auto;align-self:center;grid-auto-rows:minmax(66px,auto)}
.intro-features>div{height:auto;min-height:66px;overflow:hidden}
.intro-features>div span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.animal-corner{flex:0 0 auto;align-self:center}
@media(max-width:360px){.intro-features{grid-auto-rows:minmax(61px,auto)}.intro-features>div{min-height:61px}}
@media(min-width:700px){
  .intro-journey,.intro-map-btn,.intro-features,.animal-corner{width:min(100%,520px);max-width:520px}
  .intro-features{grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(78px,auto);gap:9px}
  .intro-features>div{min-height:78px;font-size:12px}
  .intro-features img{width:41px;height:41px}
  .animal-friends{grid-template-columns:repeat(8,minmax(0,1fr))}
}
@media(min-width:700px) and (min-height:900px){
  .game .board-wrap{max-height:980px;margin-top:auto;margin-bottom:auto}
  .game .tile{width:clamp(145px,21vw,168px);height:clamp(147px,21.5vw,172px);border-radius:34px}
  .game .tile>.item-art{width:min(94%,152px);height:min(94%,152px)}
  .game .tile-blob{border-radius:27px}
}

/* Android WebView versions before Chrome 87 do not understand inset. */
@supports not (inset:0){
  .screen,.board-bg,.board,.lines,.confetti,.celebration,.panel-scrim,.lesson-overlay,
  .map-scroll,.map-track:before,.map-nodes,.map-route,.map-gate-walls,.map-transitions,
  .memory-card-back,.memory-card-front,.trace-guide,.trace-done,.trace-canvas,
  .intro-mascots,.app.playing .screen:not(.intro):not(.map-screen)::before{
    top:0;right:0;bottom:0;left:0
  }
  .tile:before{top:-12px;right:-12px;bottom:-12px;left:-12px}
  .tile-blob{top:9px;right:9px;bottom:9px;left:9px}
  .map-node:before{top:-10px;right:-10px;bottom:-10px;left:-10px}
  .trace-panel:before{top:12px;right:12px;bottom:12px;left:12px}
  .aquarium-water{top:22px;right:0;bottom:0;left:0}
  .intro .play-btn::before{top:7px;right:7px;bottom:7px;left:7px}
  .auto-next:before{top:-9px;right:-9px;bottom:-9px;left:-9px}
  .discovery-card{top:12px;right:12px;bottom:12px;left:12px}
  .map-chapter-gate .gate-portal{top:5px;right:9px;bottom:0;left:9px}
  .map-chapter-gate .gate-leaf{top:1px;right:2px;bottom:0;left:2px}
}

/* A replayable discovery activity with large picture choices. */
.animal-play-launch{order:4;position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;align-self:center;width:min(100%,405px);min-height:104px;margin:12px 0 2px;padding:10px 15px;border:3px solid #fff;border-radius:28px;background:linear-gradient(115deg,#fff9ebf5,#ecfaeafa);box-shadow:0 7px 0 #b8d9b2,0 13px 18px #659a7e4d;text-align:left;color:#629381;transition:transform .16s,box-shadow .16s}
.animal-play-launch:active{transform:translateY(5px);box-shadow:0 2px 0 #b8d9b2}
.animal-play-launch-cat{width:78px;height:78px;flex:none;object-fit:contain;animation:modeFloat 3s ease-in-out infinite}
.animal-play-launch>span{display:flex;flex:1;min-width:0;flex-direction:column;line-height:1.14}
.animal-play-launch strong{font-size:clamp(20px,5.5vw,28px);color:#57977c}
.animal-play-launch small{font-size:clamp(11px,3vw,14px);font-weight:700;color:#819986}
.animal-play-launch em{align-self:flex-start;margin-top:5px;padding:3px 9px;border-radius:12px;background:#fff2cd;color:#c38d57;font-size:13px;font-style:normal;font-weight:900}
.animal-play-launch-arrow{width:43px;height:43px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 2px #88af8b66)}
.animal-corner{order:5}.intro-credit{order:6}
.animal-play-screen{z-index:3;overflow-y:auto;padding:calc(88px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));background:linear-gradient(#e6f9e8d9,#fff6e6e9),url('./assets/map-animals.webp') center/cover no-repeat;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.animal-play-head{display:flex;align-items:center;gap:10px;width:min(100%,570px);min-height:57px;margin:0 auto 10px;padding:4px 6px 4px 13px;border:3px solid white;border-radius:24px;background:#fffdf1e8;box-shadow:0 5px 0 #bedabe;color:#62947e}
.animal-play-head>img{width:47px;height:47px;object-fit:contain}.animal-play-head>div{display:flex;flex:1;flex-direction:column;line-height:1.06}.animal-play-head strong{font-size:clamp(20px,5.7vw,29px)}.animal-play-head span{color:#c49264;font-size:14px;font-weight:800}
.animal-play-head button{display:grid;place-items:center;width:48px;height:48px;flex:none;border:2px solid white;border-radius:17px;background:#e9f8e9;box-shadow:0 4px 0 #c1dac2}.animal-play-head button img{width:37px;height:37px;object-fit:contain}
.animal-play-panel{position:relative;display:flex;align-items:center;flex-direction:column;width:min(100%,570px);min-height:530px;margin:0 auto;padding:18px 13px 24px;border:4px solid white;border-radius:35px;background:linear-gradient(#fffdf6ed,#f6ffecee);box-shadow:inset 0 0 0 2px #d8ead3,0 10px 0 #b4d4af,0 17px 25px #7fa58755;overflow:hidden}
.animal-play-stars{display:flex;justify-content:center;gap:clamp(3px,1.3vw,9px);width:100%;height:35px}.animal-play-stars img{width:clamp(27px,7vw,37px);height:clamp(27px,7vw,37px);object-fit:contain;opacity:.26;filter:grayscale(1);transition:opacity .25s,transform .3s}.animal-play-stars img.found{opacity:1;filter:none;animation:patternPop .5s both}
.animal-play-prompt{margin:11px 0 8px;color:#66977e;font-size:clamp(21px,5.5vw,30px);font-weight:900;line-height:1.1;text-align:center}
.animal-play-animal{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;width:clamp(160px,44vw,220px);height:clamp(165px,43vw,220px);padding:8px;border:4px solid white;border-radius:37px;background:linear-gradient(#edfaf1,#d7efdf);box-shadow:0 8px 0 #a2cfaa,0 15px 15px #83a78a55}
.animal-play-animal img{width:80%;height:75%;object-fit:contain;filter:drop-shadow(0 5px 4px #85aa9766)}.animal-play-animal span{color:#538e75;font-size:clamp(19px,5vw,26px);font-weight:900;line-height:1}
.animal-play-panel.complete .animal-play-animal img{animation:bounce .75s both}
.animal-play-link{display:flex;align-items:center;justify-content:center;gap:8px;width:65%;height:43px;color:#edb869;font-size:23px}.animal-play-link i{width:100%;border-top:6px dotted #f5d49d;border-radius:30px}
.animal-play-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,2vw,15px);width:100%}
.animal-play-option{display:grid;place-items:center;min-width:0;height:clamp(88px,23vw,124px);padding:6px;border:4px solid white;border-radius:clamp(21px,6vw,30px);background:linear-gradient(#fffefa,#ffedce);box-shadow:0 7px 0 #ddbf91,0 12px 14px #a4947d55;touch-action:manipulation}
.animal-play-option:nth-child(2){background:linear-gradient(#fffefa,#e8f5ff);box-shadow:0 7px 0 #b7d3df,0 12px 14px #a4947d55}.animal-play-option:nth-child(3){background:linear-gradient(#fffefa,#f4ebff);box-shadow:0 7px 0 #cdbbdc,0 12px 14px #a4947d55}
.animal-play-option img{display:block;width:84%;height:84%;min-width:0;min-height:0;object-fit:contain;justify-self:center;align-self:center}
.animal-play-tip{position:absolute;left:0;right:0;bottom:14px;display:flex;align-items:center;justify-content:center;gap:6px;color:#9ab69b;font-size:15px;font-weight:800;transition:opacity .2s}.animal-play-tip img{width:29px;height:29px;object-fit:contain}.animal-play-tip i{color:#e5be7b;font-style:normal}.animal-play-panel.complete .animal-play-tip{opacity:0}
.animal-play-option.wobble{animation:patternWobble .45s}.animal-play-option.hint{animation:animalHint 1.2s ease-in-out infinite}.animal-play-option.correct{border-color:#8bd49c;animation:patternPop .5s}
@keyframes animalHint{50%{transform:scale(1.09);filter:drop-shadow(0 0 9px #a0de9c)}}
.animal-play-feedback{position:absolute;z-index:5;left:50%;top:42%;display:flex;align-items:center;gap:8px;width:min(86%,320px);min-height:90px;padding:7px 12px;border:4px solid white;border-radius:25px;background:#fff9e9f7;box-shadow:0 8px 0 #c8dda9,0 16px 18px #71937b66;transform:translate(-50%,-50%);animation:animalFeedback .45s both;pointer-events:none}
.animal-play-feedback img{width:67px;height:67px;flex:none;object-fit:contain}.animal-play-feedback strong{color:#568e72;font-size:clamp(18px,5vw,25px);line-height:1.1}
@keyframes animalFeedback{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.animal-play-finale{position:absolute;z-index:6;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:105px 20px 35px;background:linear-gradient(#e5f6e5f4,#fff4def4),url('./assets/map-animals.webp') center/cover;text-align:center}.animal-play-finale>img{width:min(70vw,310px,38vh);height:auto;object-fit:contain;animation:starBounce .9s both}.animal-play-finale h2{margin:0;color:#df9d65;font-size:clamp(30px,8vw,46px)}.animal-play-finale p{margin:2px 0 20px;color:#688e77;font-size:clamp(17px,4vw,22px);font-weight:700}.animal-play-finale>div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.animal-play-finale button{display:flex;align-items:center;gap:5px;min-height:62px;padding:7px 12px;border:3px solid white;border-radius:20px;background:#fff9e9;box-shadow:0 5px 0 #c7dab8;color:#6e977d;font-weight:900}.animal-play-finale button img{width:39px;height:39px;object-fit:contain}
.animal-album{margin-top:20px;padding-top:12px;border-top:3px dashed #dfdfc9}.animal-album h3{margin:0;color:#71957d;font-size:22px}.animal-album>p{margin:0 0 10px;color:#ad956e;font-weight:800}.animal-album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.animal-album-tile{display:flex;align-items:center;flex-direction:column;justify-content:center;min-width:0;min-height:106px;padding:5px;border:3px solid white;border-radius:21px;background:#f4faee;box-shadow:0 4px 0 #d5dec4;color:#648e77;font-weight:800}.animal-album-tile img{width:65px;height:65px;object-fit:contain}.animal-album-tile.locked{opacity:.58}.animal-album-tile.locked img{width:47px;height:47px}
@media(max-width:360px){.animal-play-launch{min-height:90px;padding:8px}.animal-play-launch-cat{width:60px;height:60px}.animal-play-launch-arrow{width:36px;height:36px}.animal-play-screen{padding-left:9px;padding-right:9px}.animal-play-panel{min-height:430px;padding:11px 8px 18px}.animal-play-prompt{margin:6px 0}.animal-play-animal{width:150px;height:152px}.animal-play-link{height:30px}.animal-play-option{height:82px}.animal-play-option img{width:82%;height:82%}}
@media(max-height:650px){.animal-play-screen{padding-top:calc(70px + env(safe-area-inset-top))}.animal-play-head{min-height:51px;margin-bottom:5px}.animal-play-panel{min-height:390px;padding-top:8px;padding-bottom:14px}.animal-play-stars{height:27px}.animal-play-stars img{width:27px;height:27px}.animal-play-animal{width:140px;height:145px}.animal-play-prompt{margin:5px 0}.animal-play-link{height:25px}.animal-play-option{height:78px}.animal-play-feedback{top:44%}}
@media(min-width:700px){.animal-play-launch{width:min(100%,520px)}.animal-play-panel{min-height:640px}.animal-play-animal{width:230px;height:230px}.animal-play-option{height:145px}}
@media(prefers-reduced-motion:reduce){.animal-play-launch-cat,.animal-play-option.hint,.animal-play-panel.complete .animal-play-animal img,.animal-play-finale>img{animation:none}}
@supports not (inset:0){.animal-play-finale{top:0;right:0;bottom:0;left:0}}

/* Each counting picture can be touched and named before choosing an answer. */
.count-item{position:relative;display:grid;place-items:center;width:clamp(66px,18vw,100px);height:clamp(66px,18vw,100px);flex:none;padding:0;border:0;border-radius:22px;background:transparent;touch-action:manipulation}
.count-item img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;animation:none}.count-item span{position:absolute;top:-4px;right:-2px;display:none;place-items:center;width:28px;height:28px;border:3px solid white;border-radius:50%;background:#77cba3;box-shadow:0 3px 0 #61a788;color:white;font-size:17px;font-weight:900;line-height:1}.count-item.counted span{display:grid;animation:patternPop .35s both}.count-item.counted img{filter:drop-shadow(0 0 6px #8bdbad)}
.number-choice.hint{animation:animalHint 1.2s ease-in-out infinite;box-shadow:0 8px 0 #a4c99f,0 0 0 5px #a5e3a1}
@media(max-width:390px){.count-item{width:clamp(57px,18vw,80px);height:clamp(57px,18vw,80px)}}
@media(max-height:680px){.count-item{width:clamp(45px,13vw,74px);height:clamp(45px,13vw,74px)}}
@media(prefers-reduced-motion:reduce){.count-item.counted span,.number-choice.hint{animation:none}}
.celebration-star-btn{display:grid;place-items:center;flex:none;padding:0;border:0;background:transparent;line-height:0;touch-action:manipulation;cursor:pointer}