:root{--sky:#35ccea;--deep:#087bb2;--leaf:#58d83d;--leaf2:#1da62d;--cream:#fff7ce;--brown:#64381f;--cell:clamp(34px,10.3vw,54px);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#fff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#0aa6d2}button{font:inherit}.app{position:relative;width:100%;height:100%;max-width:560px;margin:auto;overflow:hidden;background:linear-gradient(#41c8ec 0 54%,#d7f5ff 90%);box-shadow:0 0 40px #005c7f88}.screen{position:absolute;inset:0;overflow:hidden}.is-hidden{display:none!important}
.map-screen{background:linear-gradient(#8be2ff 0 45%,#b4eeff 70%,#81dd8d 100%)}.map-topbar{position:absolute;z-index:10;top:max(14px,env(safe-area-inset-top));left:14px;right:14px;display:flex;gap:8px;align-items:center}.currency{height:38px;padding:4px 12px 4px 6px;border-radius:20px;background:#ffffff88;border:2px solid #fff9;display:flex;align-items:center;gap:6px;color:#38697c;text-shadow:0 1px #fff}.star-gem,.energy-drop{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffd83b;color:#fff;text-shadow:0 2px #dc8e00}.energy-drop{background:#72d9ff;color:#ec4d7e}.round-btn{width:42px;height:42px;border:3px solid #fff;border-radius:50%;margin-left:auto;background:linear-gradient(#59d0ee,#2c9fc9);color:#fff;font-weight:900;font-size:20px;box-shadow:0 4px 0 #147599,0 6px 12px #03607b55}.cloud{position:absolute;background:#fff8;border-radius:50%;filter:blur(1px)}.cloud:after,.cloud:before{content:"";position:absolute;background:inherit;border-radius:50%}.cloud-a{width:140px;height:42px;top:15%;left:-25px}.cloud-a:after{width:65px;height:65px;left:34px;bottom:0}.cloud-b{width:130px;height:35px;top:24%;right:-35px}.cloud-b:before{width:55px;height:55px;left:22px;bottom:0}
.beanstalk{position:absolute;inset:10% 0 90px}.vine{position:absolute;width:135px;height:110%;left:50%;transform:translateX(-50%) rotate(4deg);border-radius:55% 45% 0 0;background:linear-gradient(90deg,#158e2a,#42d144 38%,#6ceb50 56%,#159a2c);box-shadow:inset -14px 0 20px #08722255,10px 0 24px #08722245}.leaf{position:absolute;width:150px;height:80px;border-radius:100% 10% 100% 10%;background:linear-gradient(145deg,#70ee5b,#1fab38);box-shadow:inset 10px 10px 12px #c2ff7655,0 8px 10px #08772144}.leaf:nth-of-type(even){transform:scaleX(-1)}.leaf-1{top:10%;left:10%}.leaf-2{top:25%;right:4%}.leaf-3{top:42%;left:0}.leaf-4{top:58%;right:-2%}.leaf-5{top:72%;left:2%}.leaf-6{top:87%;right:5%}.village{position:absolute;bottom:-30px;left:0;right:0;height:110px;background:linear-gradient(transparent,#5fd65d)}.village i{position:absolute;bottom:18px;width:55px;height:40px;border-radius:15px 15px 4px 4px;background:#e6a053;border:4px solid #fff4b0}.village i:before{content:"";position:absolute;left:-7px;right:-7px;top:-18px;height:24px;background:#df6848;clip-path:polygon(50% 0,100% 100%,0 100%)}.village i:nth-child(1){left:4%}.village i:nth-child(2){left:29%;transform:scale(.75)}.village i:nth-child(3){right:25%;transform:scale(.65)}.village i:nth-child(4){right:3%;transform:scale(.9)}
.level-nodes{position:absolute;inset:0}.level-node{position:absolute;width:60px;height:60px;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffec69 14%,#ffab32 50%,#dc7016 72%);box-shadow:0 5px 0 #9e5c20,0 7px 12px #144b2f77;color:#fff;font-weight:900;font-size:20px;text-shadow:0 2px #9a510e}.level-node:after{content:attr(data-stars);position:absolute;left:50%;transform:translateX(-50%);bottom:-19px;white-space:nowrap;font-size:14px;color:#ffe53b;letter-spacing:-1px}.level-node.locked{filter:grayscale(.8);opacity:.72}.level-node.current{animation:pulse 1.3s infinite;outline:5px solid #fff8}.level-node:nth-child(1){left:31%;bottom:14%}.level-node:nth-child(2){right:25%;bottom:40%}.level-node:nth-child(3){left:25%;top:27%}.map-mascot{position:absolute;left:8%;bottom:100px;width:72px;height:64px}.mascot-face{position:absolute;inset:12px 5px 0;border-radius:45% 45% 50% 50%;background:linear-gradient(#efc080,#fff4dd 55%);box-shadow:0 6px 0 #fff9}.mascot-face:before,.mascot-face:after{content:"";position:absolute;top:15px;width:8px;height:10px;border-radius:50%;background:#42251a}.mascot-face:before{left:19px}.mascot-face:after{right:19px}.mascot-face i{position:absolute;left:28px;top:28px;width:10px;height:6px;border-radius:0 0 10px 10px;background:#bf6435}.map-mascot span{position:absolute;right:-5px;top:0;background:#f14855;padding:4px;border-radius:8px;font-size:11px}.map-actions{position:absolute;z-index:12;bottom:54px;left:12px;right:12px;display:flex;align-items:center;gap:12px}.play-button{height:67px;flex:1;border:4px solid #fff;border-radius:23px;background:linear-gradient(#c964ff,#7432d7);box-shadow:0 5px 0 #4c209f,0 8px 16px #3e177266;color:#fff;text-shadow:0 2px #482184}.play-button small,.play-button b{display:block}.play-button small{font-size:12px}.play-button b{font-size:23px}.bottom-nav{position:absolute;z-index:11;bottom:0;left:0;right:0;height:45px;display:flex;background:#fff9;border-top:2px solid #fff}.bottom-nav button{flex:1;border:0;background:transparent;color:#3f8b64;font-weight:800;font-size:12px}
.game-screen{background:linear-gradient(#159bd1 0,#37d4ed 58%,#b7f1ff)}.game-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 40%,#fff5 0 2px,transparent 3px),radial-gradient(circle at 77% 30%,#fff4 0 3px,transparent 4px);background-size:60px 80px}.game-hud{position:absolute;z-index:6;top:max(8px,env(safe-area-inset-top));left:10px;right:62px;height:103px;display:grid;grid-template-columns:76px 1fr 118px 56px;align-items:start;gap:5px}.level-label{display:flex;flex-direction:column;text-shadow:0 2px #086b8e}.level-label b{font-size:21px}.level-label span{margin-top:9px;font-size:11px}.level-label strong{font-size:15px}.progress-wrap{padding-top:24px}.progress-stars{display:flex;justify-content:space-around;color:#7fa4af;text-shadow:0 2px #fff}.progress-stars i{font-style:normal;font-size:18px}.progress-stars i.on{color:#ffe52d;text-shadow:0 1px #dc8300,0 0 6px #fff}.progress{height:10px;border-radius:9px;background:#176d8d88;border:2px solid #fff8;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb52c,#fff12d);transition:width .35s}.goals{display:flex;gap:5px;justify-content:center}.goal{position:relative;width:50px;height:55px;border-radius:12px;background:linear-gradient(#f5a23d,#b76022);border:3px solid #ffe4a0;box-shadow:0 4px 0 #76391d;display:flex;align-items:center;justify-content:center}.goal .mini-animal{transform:scale(.58)}.goal b{position:absolute;right:-4px;bottom:-7px;min-width:24px;padding:2px 4px;border-radius:10px;background:#fff;color:#78421d;font-size:12px}.goal.done{filter:saturate(.7)}.goal.done:after{content:"✓";position:absolute;font-size:38px;color:#54dd43;text-shadow:0 2px #157b26}.moves{height:65px;border-radius:12px;background:linear-gradient(#7b472e,#4b271c);border:3px solid #b9753c;box-shadow:0 5px 0 #28150e;display:flex;flex-direction:column;align-items:center}.moves span{font-size:28px;font-weight:900}.moves small{font-size:9px}.game-menu{position:absolute;z-index:7;right:9px;top:max(9px,env(safe-area-inset-top));width:45px;height:29px;border:0;border-radius:16px;background:#266d8999;color:#fff;font-weight:900}.tree-canopy{position:absolute;top:-100px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle at 50% 60%,#4bdb48,#087e30 68%);filter:drop-shadow(0 8px 8px #07532f66)}.tree-canopy.left{left:-150px}.tree-canopy.right{right:-160px}.guide-mascot{position:absolute;z-index:5;top:122px;left:50%;transform:translateX(-50%);width:82px;height:70px}.owl-body{position:absolute;inset:8px 6px 0;border-radius:50% 50% 44% 44%;background:linear-gradient(#e7ac62,#fff1d9 62%);box-shadow:0 8px 0 #fff7}.owl-body:before,.owl-body:after{content:"";position:absolute;top:18px;width:10px;height:13px;border-radius:50%;background:#392518;box-shadow:0 0 0 4px #fff}.owl-body:before{left:20px}.owl-body:after{right:20px}.owl-body i{position:absolute;left:34px;top:34px;width:12px;height:8px;background:#e57936;clip-path:polygon(50% 100%,0 0,100% 0)}.guide-mascot span{position:absolute;left:67px;top:-6px;white-space:nowrap;padding:4px 8px;border-radius:12px;background:#fff;color:#e9792a;font-weight:900;opacity:0;transform:scale(.6);transition:.2s}.guide-mascot span.show{opacity:1;transform:scale(1)}
.board-wrap{position:absolute;z-index:3;top:205px;left:50%;transform:translateX(-50%);width:calc(var(--cell)*9);height:calc(var(--cell)*9)}.board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,var(--cell));grid-template-rows:repeat(9,var(--cell));touch-action:none;filter:drop-shadow(0 8px 8px #075a7966)}.cell{position:relative;width:var(--cell);height:var(--cell);border:1px solid #436b7e66;background:linear-gradient(135deg,#31576d,#1c3e54);box-shadow:inset 2px 2px 4px #081e2e88}.cell.hole{visibility:hidden}.tile{position:absolute;inset:2px;border-radius:28% 28% 35% 35%;cursor:pointer;transition:transform .18s ease,opacity .18s ease;filter:drop-shadow(0 3px 1px #081a2966);animation:tileIn .18s both}.tile.selected{transform:scale(1.11);outline:3px solid #fff;border-radius:35%;z-index:5;filter:drop-shadow(0 0 8px #fff)}.tile.matched{animation:pop .26s forwards}.tile.hinting{animation:hint 1s infinite}.animal{position:absolute;inset:0;border-radius:30% 30% 38% 38%;overflow:visible}.animal:before,.animal:after{content:"";position:absolute}.animal .eye{position:absolute;top:38%;left:26%;width:12%;height:17%;border-radius:50%;background:#17212a;box-shadow:calc(var(--cell)*.28) 0 0 #17212a}.animal .mouth{position:absolute;left:42%;top:64%;width:18%;height:10%;border-radius:0 0 10px 10px;background:#7c2b28}.bear{background:linear-gradient(#e9a33d,#b96324);box-shadow:inset 0 -5px #96451d}.bear:before,.bear:after{top:-7%;width:35%;height:35%;border-radius:50%;background:#b96324;z-index:-1}.bear:before{left:-5%}.bear:after{right:-5%}.bear .muzzle{position:absolute;left:31%;top:52%;width:38%;height:30%;border-radius:50%;background:#ffd793}.frog{background:linear-gradient(#74de3d,#28a62a);border-radius:45% 45% 36% 36%;box-shadow:inset 0 -5px #167d23}.frog:before,.frog:after{top:-12%;width:34%;height:34%;border-radius:50%;background:#5ed238;box-shadow:inset 0 0 0 3px #baff7a}.frog:before{left:5%}.frog:after{right:5%}.frog .eye{top:4%;z-index:2;box-shadow:calc(var(--cell)*.35) 0 0 #17212a}.frog .mouth{left:32%;width:38%;height:6%;top:68%}.fox{background:linear-gradient(#fa604b,#ce2e38);border-radius:22% 22% 36% 36%;box-shadow:inset 0 -5px #a71f30}.fox:before,.fox:after{top:-15%;width:45%;height:48%;background:#df3c41;z-index:-1}.fox:before{left:-4%;clip-path:polygon(50% 0,100% 100%,0 75%)}.fox:after{right:-4%;clip-path:polygon(50% 0,100% 75%,0 100%)}.fox .muzzle{position:absolute;left:20%;right:20%;bottom:8%;height:33%;border-radius:45%;background:#ffe2b0}.hippo{background:linear-gradient(#6dd8f5,#3797dd);box-shadow:inset 0 -5px #2c72bc}.hippo:before,.hippo:after{top:-5%;width:25%;height:28%;border-radius:50%;background:#4aaee5;z-index:-1}.hippo:before{left:3%}.hippo:after{right:3%}.hippo .muzzle{position:absolute;left:17%;right:17%;bottom:7%;height:34%;border-radius:48%;background:#9ce8f8}.chick{background:linear-gradient(#ffe351,#f1ad26);border-radius:50% 50% 35% 35%;box-shadow:inset 0 -5px #d78a14}.chick:before{top:-12%;left:43%;width:16%;height:21%;background:#e7473e;clip-path:polygon(50% 0,100% 100%,0 100%)}.chick .mouth{left:39%;top:57%;width:24%;height:14%;background:#ed7c26;clip-path:polygon(50% 100%,0 0,100% 0)}.special-mark{position:absolute;inset:25%;z-index:3;border-radius:50%;background:conic-gradient(#ff4b52,#ffe14b,#54e679,#4bc8ff,#9e67ff,#ff4b52);box-shadow:0 0 8px #fff;animation:spin 2s linear infinite}.special-row:after{content:"↔";position:absolute;inset:20% -8%;z-index:3;border-radius:9px;background:#fff8;color:#e43d63;display:grid;place-items:center;font-weight:900}.special-col:after{content:"↕";position:absolute;inset:-8% 20%;z-index:3;border-radius:9px;background:#fff8;color:#5864e8;display:grid;place-items:center;font-weight:900}.float-layer{position:absolute;inset:0;pointer-events:none}.particle{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 7px #fff;animation:particle .6s forwards}.float-score{position:absolute;color:#fff;font-weight:900;font-size:18px;text-shadow:0 2px #087898;animation:floatUp .8s forwards}.hint{position:absolute;z-index:4;top:calc(205px + var(--cell)*9 + 8px);left:50%;transform:translateX(-50%);font-size:12px;color:#eaffff;text-shadow:0 2px #087a9f;white-space:nowrap}.boosters{position:absolute;z-index:5;left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));height:76px;display:flex;justify-content:space-around;border-bottom:10px solid #86522c;border-radius:50%}.boosters button{position:relative;width:66px;border:0;background:transparent;color:#fff;font-weight:900;text-shadow:0 2px #17647c}.boosters button span{display:grid;place-items:center;width:52px;height:52px;margin:auto;border:4px solid #d8fbff;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#65dcf1 35%,#3fa7cd 75%);box-shadow:0 4px 0 #246f96;font-size:26px}.boosters button b{display:block;font-size:10px}.boosters button i{position:absolute;right:1px;top:0;width:19px;height:19px;border-radius:50%;background:#64cf2e;border:2px solid #fff;font-style:normal;font-size:10px}.boosters button.active span{outline:5px solid #fff44a;animation:pulse .8s infinite}
.modal{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:28px;background:#082d3bbb;backdrop-filter:blur(3px)}.modal-card{position:relative;width:min(92%,390px);padding:32px 24px 24px;border:8px solid #d6ffb5;border-radius:36px;background:linear-gradient(#fffbe0,#fff5b4);box-shadow:0 10px 0 #4d8d37,0 18px 32px #001b2366;color:#805129;text-align:center}.modal-card:before{content:"";position:absolute;inset:-18px -8px auto;height:42px;border-radius:50%;background:#5ccc42;z-index:-1}.modal-close{position:absolute;right:-10px;top:-14px;width:38px;height:38px;border:3px solid #fff;border-radius:50%;background:#72b866;color:#fff;font-size:24px}.modal-art{width:90px;height:90px;margin:-58px auto 4px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,#fff88a,#ffbd26 62%,#ed7b18 63%);font-size:55px;color:#fff;text-shadow:0 3px #de891d;box-shadow:0 0 20px #fff44a}.modal-card h2{margin:8px;font-size:30px}.modal-stars{font-size:46px;color:#a3a3a3;letter-spacing:-8px;text-shadow:0 3px #fff}.modal-stars .won{color:#ffe335}.modal-card p{min-height:44px;color:#976c43}.modal-primary{min-width:160px;padding:11px 28px;border:3px solid #eaffce;border-radius:18px;background:linear-gradient(#72de39,#2ba81d);box-shadow:0 5px 0 #1c7913;color:#fff;font-weight:900;font-size:19px}.toast{position:absolute;z-index:60;left:50%;bottom:120px;transform:translate(-50%,20px);padding:10px 16px;border-radius:18px;background:#123d4dcc;color:#fff;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes tileIn{from{transform:translateY(-22px);opacity:0}}@keyframes pop{40%{transform:scale(1.3)}to{transform:scale(.1) rotate(20deg);opacity:0}}@keyframes particle{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}@keyframes floatUp{to{transform:translateY(-45px) scale(1.3);opacity:0}}@keyframes pulse{50%{transform:scale(1.09)}}@keyframes hint{50%{transform:scale(1.12);filter:brightness(1.4)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-height:720px){:root{--cell:35px}.board-wrap{top:170px}.guide-mascot{top:104px;transform:translateX(-50%) scale(.8)}.hint{top:calc(170px + var(--cell)*9 + 5px)}.boosters{height:68px}.boosters button span{width:45px;height:45px}.game-hud{transform:scale(.9);transform-origin:top left;width:108%}}