*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#244b36;background:#bada91 url('/assets/garden.webp') center/cover fixed}.game{height:100svh;max-width:1100px;margin:auto;padding: max(12px,env(safe-area-inset-top)) 18px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}header,.game-info{display:flex;align-items:center;justify-content:space-between;gap:10px}h1{font-size:clamp(24px,4vw,38px);letter-spacing:-.045em;margin:0;text-shadow:0 2px #edffd0}.pill{font:800 15px ui-rounded,"Trebuchet MS",system-ui,sans-serif;border:2px solid #ffffffb3;border-radius:22px;background:#fffeed;color:#244b36;padding:11px 16px;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 #274c3426;min-height:44px;touch-action:manipulation}.pill:focus-visible,.platform:focus-visible{outline:4px solid #f9e260;outline-offset:4px}.game-info{padding:0 3px}.game-info p{font-size:clamp(16px,2.3vw,21px);font-weight:800;text-align:center;margin:0;padding:5px 10px;border-radius:20px;background:#f4ffe4e6}.snacks{display:flex;align-items:center;gap:10px;background:#fffdeb;padding:6px 14px;border-radius:24px;font-size:24px;min-width:73px}.snacks img{width:20px;height:30px;object-fit:contain}#pond{position:relative;flex:1;min-height:180px;background:radial-gradient(ellipse at 32% 20%,#8bdbd4a6,transparent 55%),linear-gradient(140deg,#4eb9b9,#248d9d);border:5px solid #d5ed9a;border-radius:44px;box-shadow:inset 0 0 50px #0d596c55,0 6px 0 #416b3450;isolation:isolate;overflow:hidden;touch-action:manipulation}#platforms{position:absolute;inset:0}.platform{position:absolute;width:clamp(76px,17vw,146px);height:clamp(66px,14vw,115px);transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:50%;z-index:2}.platform:disabled{cursor:default}.platform-art{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 2px #095e6540);transition:opacity .15s}.platform.log{width:clamp(83px,19vw,159px)}.bug{position:absolute;width:24px;height:34px;object-fit:contain;left:calc(50% - 12px);top:20%;pointer-events:none;filter:drop-shadow(0 2px 0 #153d3340)}.platform .bug[hidden]{display:none}.log-meter{position:absolute;left:20%;right:20%;height:7px;bottom:8px;background:#173f4740;border-radius:10px;overflow:hidden}.log-meter span{display:block;height:100%;background:#fff7aa;transform-origin:left}.log-meter[hidden]{display:none}#frog{position:absolute;width:clamp(65px,14vw,112px);height:clamp(65px,14vw,112px);z-index:6;pointer-events:none;transform:translate(-50%,-83%);will-change:transform}#frog>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 2px #124c3d45)}#happy{position:absolute;top:-25%;left:35%;color:#fa678c;font-size:clamp(30px,5vw,46px);text-shadow:0 2px #fff;opacity:0}#butterfly{position:absolute;width:clamp(70px,17vw,125px);height:clamp(70px,17vw,125px);object-fit:contain;z-index:7;pointer-events:none;opacity:0}#splash{position:absolute;width:70px;height:27px;border:5px solid #d4ffff;border-radius:50%;opacity:0;pointer-events:none;z-index:5}#pause-cover{position:absolute;inset:0;background:#19495388;z-index:10;display:grid;place-items:center;backdrop-filter:blur(4px)}#pause-cover[hidden]{display:none}footer{font-size:14px;font-weight:700;text-align:center;padding:2px;color:#274d38}@media(max-width:500px){.game{padding-left:9px;padding-right:9px;gap:9px}.pill{padding:9px 12px;font-size:14px}header h1{font-size:26px}#pond{border-radius:32px;border-width:4px}footer{font-size:12px}.game-info{gap:5px}.game-info p{font-size:16px}.snacks{padding:5px 10px;gap:7px;min-width:65px}}@media(max-height:500px){.game{gap:5px;padding-top:6px}header h1{font-size:23px}footer{display:none}.game-info p{font-size:15px}.pill{min-height:36px;padding:6px 13px}.snacks{font-size:20px;padding:1px 12px}.platform{width:85px;height:62px}.platform.log{width:95px}#frog{width:62px;height:62px}#butterfly{width:75px;height:75px}}

#world{position:absolute;left:0;top:0;will-change:transform;transform-origin:0 0;background:radial-gradient(ellipse at 28% 33%,#a4e3ce55,transparent 35%),radial-gradient(ellipse at 72% 64%,#126f8840,transparent 40%),#46afb4;box-shadow:inset 0 0 0 18px #b0d47a,inset 0 0 0 27px #79ab68,inset 0 0 90px 25px #246e7299;border-radius:90px}#platforms{overflow:visible}.platform{width:clamp(88px,19vw,146px);height:clamp(70px,15vw,115px)}@media(max-height:500px){.platform{width:85px;height:62px}.platform.log{width:95px}}

/* The camera draws only a small window of the map, keeping mobile compositing light. */
#world{width:100%;height:100%;background:none;box-shadow:none;border-radius:0;will-change:auto}
#platforms{will-change:transform}
#frog,#butterfly,#splash{left:0;top:0;will-change:transform}
.game-info p{height:48px;min-width:0;line-height:18px;display:flex;align-items:center;justify-content:center;flex:1;font-size:clamp(14px,2vw,19px)}
@media(max-width:500px){.game-info p{font-size:14px;padding:5px 4px}}

#frog-body{position:absolute;inset:0;transform-origin:50% 75%;filter:drop-shadow(0 5px 2px #124c3d45)}
#frog-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sleep-frog{visibility:hidden}#frog[data-action="sleep"] .awake-frog{visibility:hidden}#frog[data-action="sleep"] .sleep-frog{visibility:visible}
#frog[data-color="purple"] #frog-body{filter:hue-rotate(185deg) saturate(1.2) drop-shadow(0 5px 2px #124c3d45)}
#frog[data-color="blue"] #frog-body{filter:hue-rotate(125deg) saturate(1.25) drop-shadow(0 5px 2px #124c3d45)}
#frog[data-color="pink"] #frog-body{filter:hue-rotate(235deg) saturate(1.05) drop-shadow(0 5px 2px #124c3d45)}
.platform[data-kind="purple"] .bug{filter:sepia(1) saturate(9) hue-rotate(225deg) brightness(2.7) drop-shadow(0 0 2px #fff)}
.platform[data-kind="blue"] .bug{filter:sepia(1) saturate(9) hue-rotate(165deg) brightness(2.4) drop-shadow(0 0 2px #fff)}
.platform[data-kind="pink"] .bug{filter:sepia(1) saturate(7) hue-rotate(285deg) brightness(2.7) drop-shadow(0 0 2px #fff)}
.platform[data-kind="glitter"] .bug{filter:sepia(.8) saturate(2) brightness(3) drop-shadow(0 0 3px #fff)}
.platform[data-kind="caterpillar"] .bug{width:39px;height:30px;left:calc(50% - 19px)}
.platform[data-kind="glitter"][data-bug="true"]:after{content:'✦';position:absolute;top:6%;left:60%;font-size:23px;color:#fff7ae;text-shadow:0 0 3px #8159b8;pointer-events:none;animation:glint 1.6s ease-in-out infinite}
#sleepy{display:none;position:absolute;left:58%;top:-26%;white-space:nowrap;font-size:24px;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 2px 3px #174d73}#frog[data-action="sleep"] #sleepy{display:block}
#sparkles{display:none;position:absolute;inset:-15%;pointer-events:none}#frog[data-sparkly="true"] #sparkles{display:block}
#sparkles i{position:absolute;color:#fff6b6;font-size:21px;font-style:normal;text-shadow:0 0 5px #fff,0 0 9px #c779fc;animation:glint 1.6s ease-in-out infinite}
#sparkles i:nth-child(1){left:2%;top:25%}#sparkles i:nth-child(2){left:75%;top:8%;animation-delay:-.4s}#sparkles i:nth-child(3){left:90%;top:60%;animation-delay:-.9s}#sparkles i:nth-child(4){left:20%;top:80%;animation-delay:-1.2s}#sparkles i:nth-child(5){left:43%;top:35%;animation-delay:-.7s}#sparkles i:nth-child(6){left:66%;top:77%;animation-delay:-.2s}#sparkles i:nth-child(7){left:30%;top:2%;animation-delay:-1s}#sparkles i:nth-child(8){left:4%;top:55%;animation-delay:-.5s}
@keyframes glint{0%,100%{opacity:.35;transform:scale(.55)}50%{opacity:1;transform:scale(1)}}
#pond[data-paused="true"] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){#sparkles i,.platform[data-kind="glitter"]:after{animation:none}}