*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#086e80}body{font-family:'Trebuchet MS','Segoe UI',sans-serif;color:#12576b;user-select:none}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid #fff;outline-offset:4px}button:disabled{cursor:default;opacity:.5}button,img{-webkit-user-drag:none}button{touch-action:manipulation}[hidden]{display:none!important}#stage{width:1024px;height:1024px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;background:url('assets/pond.png') center/cover;overflow:hidden;isolation:isolate}.screen{position:absolute;inset:0}.water-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 46% 42%,#d8ffff20,transparent 60%);animation:water 7s ease-in-out infinite alternate}header{position:absolute;left:28px;right:32px;top:15px;height:125px;display:flex;align-items:center;justify-content:space-between}.logo-button{width:475px;padding:0;background:none;border:0;transition:transform .2s}.logo-button:hover{transform:scale(1.025)}.logo-button img{width:100%;display:block}.counters{display:flex;gap:8px;padding:9px;border:3px solid #fff5d8;border-radius:28px;background:linear-gradient(#fff9e5,#efdfb8);box-shadow:0 6px 0 #397e8050, inset 0 0 0 2px #dfcfa9}.counters>div{height:72px;min-width:167px;padding:10px 12px;display:flex;align-items:center;gap:12px;border:2px solid #e4d2a8;border-radius:19px;background:#fff7e2}.counters span{font-size:19px;font-weight:900}.counters strong{font-size:39px;letter-spacing:-2px}.counters .low{color:#d55479;animation:pulse 1s infinite}#board-frame{position:absolute;left:80px;top:147px;width:864px;height:558px;padding:15px;border:4px solid #d9ffff;border-radius:44px;background:linear-gradient(140deg,#70e2e8bd,#077e999e);box-shadow:0 0 0 5px #59e8f16b,inset 0 0 0 6px #ffffff33,inset 0 0 35px #efffff66,0 12px 30px #02586f40}#board{position:relative;width:826px;height:520px;border-radius:25px;background:repeating-linear-gradient(90deg,transparent 0px,transparent 117px,#006c7c14 118px)}.bubble{position:absolute;width:106px;height:100px;margin:2px 6px;padding:0;border:3px solid #fff8;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 4px 6px #fff8,inset 0 -7px 8px #fff9,inset 5px -1px 10px #ffffff40,0 4px 3px #00506544,0 0 0 2px #ffffff30;transition:left .3s ease,top .36s cubic-bezier(.25,.7,.4,1.2),filter .15s,transform .15s;z-index:1}.bubble:before{content:'';position:absolute;width:28px;height:14px;border-radius:50%;background:#fff;opacity:.9;top:10px;left:15px;transform:rotate(-30deg);box-shadow:47px 28px 0 -5px #fff}.bubble:after{content:'';position:absolute;inset:6px;border-radius:50%;border-right:3px solid #ffffffa0;border-bottom:3px solid #ffffff70;pointer-events:none}.bubble[data-color="0"]{background:radial-gradient(circle at 35% 23%,#ffe3ef 0%,#ffa9cf 36%,#ed6ca9 75%,#bc4b8c 100%);color:#eb478c}.bubble[data-color="1"]{background:radial-gradient(circle at 35% 23%,#fffacf 0%,#ffe887 36%,#fbc840 75%,#d49a16 100%);color:#ffd338}.bubble[data-color="2"]{background:radial-gradient(circle at 35% 23%,#f6edff 0%,#c9a8ff 36%,#a776e4 75%,#7952c2 100%);color:#a777e7}.bubble[data-color="3"]{background:radial-gradient(circle at 35% 23%,#e5ffe7 0%,#a3eab0 36%,#56c995 75%,#369d78 100%);color:#42b97f}.bubble svg{width:54px;height:54px;filter:drop-shadow(0 2px 1px #7b4b5660);stroke:#fff9;stroke-width:1.3;fill:currentColor}.bubble.match,.bubble.hinted{z-index:3;filter:brightness(1.12);transform:scale(1.055);outline:3px solid #fff;box-shadow:0 0 20px #fff8,inset 0 -6px 9px #fff9}.bubble:hover{transform:scale(1.06)}.bubble.baby{background:radial-gradient(circle at 30% 20%,#ffffff7a,#8ddfff55 55%,#3a9cc7c9);border-color:#e6ffff;box-shadow:inset 0 -6px 12px #fff8,0 0 12px #fff7;z-index:2}.bubble.baby img{width:99px;height:99px;object-fit:contain;pointer-events:none;animation:bob 3s ease-in-out infinite}.bubble.pearl{background:radial-gradient(circle at 30% 25%,white,#ffe9fb 25%,#bce9ff 50%,#d6b9ff 70%,#ffe2ab);color:#fff;font-size:49px;text-shadow:0 2px 4px #a07ccb;animation:pearl 2s infinite}.bubble.invalid{animation:shake .3s}.instruction{position:absolute;top:719px;left:133px;width:758px;height:44px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:26px;background:linear-gradient(#fffceb,#eee4c7);border:3px solid #fff6db;box-shadow:0 5px 8px #005a7040;font-weight:800;font-size:20px}.pond-label{position:absolute;top:783px;left:40px;padding:11px 20px;background:linear-gradient(#f5dfab,#d5ae70);border:3px solid #fbe8b8;border-radius:12px;transform:rotate(-5deg);box-shadow:0 5px 0 #795f3c44;color:#6c543c;font-weight:900;font-size:18px;z-index:3}.pond-label span{display:block;font-size:13px;margin-top:3px;font-weight:700}#residents{position:absolute;left:200px;top:778px;width:650px;height:180px}.resident{position:absolute;width:157px;height:150px;border:0;background:none;padding:0;animation:bob 3.8s ease-in-out infinite;filter:drop-shadow(0 9px 4px #006b7d44)}.resident img{width:100%;height:100%;object-fit:contain}.resident:after{content:'';position:absolute;bottom:9px;left:20px;width:120px;height:25px;border:2px solid #d9ffff9c;border-radius:50%;z-index:-1;box-shadow:0 0 0 5px #ffffff12}.cream{filter:hue-rotate(38deg) saturate(.65) brightness(1.13)}.lavender{filter:hue-rotate(280deg) saturate(.75)}.mint{filter:hue-rotate(130deg) saturate(.65)}.blue{filter:hue-rotate(220deg) saturate(.65)}.peach{filter:hue-rotate(25deg)}footer{position:absolute;left:36px;right:36px;bottom:25px;display:flex;align-items:center;gap:10px}.footer-right{margin-left:auto;display:flex;gap:10px;align-items:center}.button,.round{border:3px solid #fff5d9;border-radius:24px;color:#155c69;font-weight:900;background:linear-gradient(#e3fff2,#89e2d6);box-shadow:inset 0 0 0 2px #5ebfad70,0 5px 0 #135c6a66,0 9px 14px #086a7033;transition:transform .15s,filter .15s;text-shadow:0 1px 0 #fff9}.button:hover,.round:hover{filter:brightness(1.08);transform:translateY(-2px)}.button:active,.round:active{transform:translateY(2px)}.button.small{padding:12px 22px;font-size:20px}.button small{font-size:13px;display:block}.round{width:58px;height:58px;background:linear-gradient(#fffbed,#eddfbb);font-size:28px;padding:0}.home-logo{position:absolute;top:100px;left:100px;width:824px;filter:drop-shadow(0 12px 8px #076b8044);animation:bob 6s ease-in-out infinite}.home-tagline{position:absolute;top:320px;left:0;right:0;text-align:center;color:#fff;font-size:24px;font-weight:900;text-shadow:0 2px 5px #087589}.hero-pets{position:absolute;top:366px;left:225px;right:225px;height:240px}.hero-pets img{position:absolute;width:300px;left:0;top:0;animation:bob 3s infinite ease-in-out;filter:drop-shadow(0 15px 5px #00808b55)}.hero-pets img+img{left:270px;top:22px;width:260px;animation-delay:-1.5s;filter:hue-rotate(38deg) saturate(.65) brightness(1.13) drop-shadow(0 15px 5px #00808b55);transform:scaleX(-1)}.home-actions{position:absolute;top:617px;left:322px;width:380px;display:flex;flex-direction:column;gap:20px}.button.large{font-size:34px;padding:18px 30px;border-radius:32px}.button span{float:right;margin-left:25px}.pink{background:linear-gradient(#ffe0ef,#f79ac4);color:#9e3669;box-shadow:inset 0 0 0 2px #d572a377,0 6px 0 #ad62818c,0 12px 20px #00566433}.cream-button{background:linear-gradient(#fffbe9,#efe2c0);padding:15px 30px;font-size:25px}.text-button{border:0;background:none;color:white;text-shadow:0 2px 4px #005d6e;font-weight:900;font-size:19px;padding:7px}.text-button:hover{text-decoration:underline}.help-home{position:absolute;bottom:27px;right:28px}#modal-layer{position:absolute;inset:0;z-index:20;display:flex;justify-content:center;align-items:center;background:#07536570;backdrop-filter:blur(6px)}#modal{position:relative;width:650px;padding:42px 46px;border:5px solid #fff8de;border-radius:42px;background:linear-gradient(145deg,#fffef0,#f2e8cc);box-shadow:inset 0 0 0 3px #dccda7,0 18px 60px #004d6b66;text-align:center}#modal h1{font-size:41px;margin:0 0 15px;color:#147386}#modal p{font-size:20px;line-height:1.55;margin:12px 0 24px}#modal .close{position:absolute;right:16px;top:15px;width:43px;height:43px;font-size:25px}#modal .button{padding:13px 30px;font-size:23px;margin-top:8px}#modal .secondary{background:#fff6df;margin-left:10px}.setting{display:flex;align-items:center;text-align:left;padding:20px 0;border-bottom:2px solid #dfd5b6;font-size:25px;font-weight:800;gap:20px}.setting>div{flex:1}.setting small{font-size:15px;display:block;font-weight:400;margin-top:7px}.switch{width:96px;padding:10px!important;border-radius:30px!important;margin:0!important;background:#a4e7d7!important;font-size:20px!important}.switch[aria-checked=false]{background:#e7ddc5!important;color:#857b68}.steps{text-align:left;display:grid;gap:14px;margin:25px 0}.step{display:flex;align-items:center;gap:18px;font-size:19px;line-height:1.4}.step b{flex:0 0 45px;height:45px;background:#a7e6d9;border-radius:50%;display:grid;place-items:center;color:#216d76;font-size:24px}.step strong{color:#a34d7e}.reward-pet{width:190px;height:165px;object-fit:contain;margin:-5px 0}.stars{font-size:48px;color:#efbe3c;text-shadow:0 2px 0 #b88928;letter-spacing:10px}#effects{position:absolute;inset:0;pointer-events:none;z-index:12}.particle{position:absolute;border-radius:50%;background:var(--color,#fff);width:12px;height:12px;box-shadow:0 0 8px #fff;animation:scatter .65s ease-out forwards}.pop-ring{position:absolute;width:100px;height:100px;border:4px solid #fff;border-radius:50%;animation:pop .4s ease-out forwards}.float-text{position:absolute;font-weight:900;font-size:32px;color:#fff9d0;text-shadow:0 3px 2px #2b728e;animation:floattext 1.2s ease-out forwards;white-space:nowrap;transform:translateX(-50%)}.rescue-flight{position:absolute;filter:drop-shadow(0 0 10px #ffffff80)}.rescue-flight img{width:100%;height:100%;object-fit:contain}.landing-ripple{position:absolute;height:25px;border:3px solid #eaffff;border-radius:50%;box-shadow:0 0 0 5px #ffffff35;animation:landing-splash .65s ease-out forwards}.settings-actions{display:flex;justify-content:center;gap:12px;margin-top:26px}#toast{position:absolute;top:137px;left:50%;transform:translate(-50%,-15px);background:#fff9e9f5;color:#176278;border:3px solid white;padding:12px 25px;border-radius:22px;box-shadow:0 5px 15px #005d6b33;font-size:20px;font-weight:800;z-index:30;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}#toast.show{opacity:1;transform:translate(-50%,0)}.ambient-bubble{position:absolute;width:14px;height:14px;border:1px solid #e4ffff80;background:#ffffff15;border-radius:50%;animation:rise var(--duration) linear infinite;bottom:-20px;pointer-events:none}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes water{to{opacity:.45;transform:scale(1.03)}}@keyframes pearl{50%{box-shadow:0 0 22px #fff, inset 0 -7px 8px #fff9}}@keyframes pulse{50%{opacity:.6}}@keyframes shake{25%,75%{translate:-5px 0}50%{translate:5px 0}}@keyframes pop{to{transform:scale(1.5);opacity:0}}@keyframes scatter{to{translate:var(--dx) var(--dy);opacity:0;scale:.2}}@keyframes floattext{to{translate:0 -90px;opacity:0}}@keyframes landing-splash{from{transform:scale(.6);opacity:1}to{transform:scale(1.7);opacity:0}}@keyframes rise{to{transform:translateY(-1070px);opacity:0}}@media(prefers-reduced-motion:reduce){.water-light,.ambient-bubble,.hero-pets img,.home-logo,.resident,.bubble.baby img{animation:none}}