*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;background:#bde7ff;
  font-family:ui-rounded,"SF Pro Rounded","Baloo 2",system-ui,-apple-system,sans-serif}
button{font:inherit;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}
#app{position:fixed;inset:0;display:flex;flex-direction:column;height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:linear-gradient(#8fd8ff,#d9f3ff 55%,#fff4d6)}
#top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 4px}
.pill{background:#fff;border-radius:30px;padding:6px 16px;font-size:26px;font-weight:800;color:#b8791a;display:flex;gap:8px;align-items:center;box-shadow:0 4px 0 #f0c15a}
.pill.bump{animation:bump .5s}
.round{width:54px;height:54px;border-radius:50%;background:#fff;font-size:28px;box-shadow:0 4px 0 #c7d6e2}
.round:active{transform:translateY(3px);box-shadow:0 1px 0 #c7d6e2}
#stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:6px 14px}
.stat{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.7);border-radius:20px;padding:6px 10px}
.stat i{font-style:normal;font-size:26px;line-height:1}
.bar{flex:1;height:18px;background:#e3edf5;border-radius:10px;overflow:hidden}
.fill{height:100%;border-radius:10px;transition:width .5s;background:var(--c)}
.stat[data-k=hunger]{--c:#ff9f43}.stat[data-k=sleep]{--c:#a78bfa}.stat[data-k=fun]{--c:#ff6b9d}.stat[data-k=clean]{--c:#38bdf8}
.stat.low i{animation:pulse .8s infinite}.stat.low .fill{background:#ff4d4d}
#stage{flex:1;position:relative;overflow:hidden;min-height:0;touch-action:none}
#hill{position:absolute;left:-20%;right:-20%;bottom:-18%;height:46%;background:radial-gradient(ellipse at 50% 0,#9be68f 60%,#7fd274 61%);border-radius:50%}
.cloud{position:absolute;background:#fff;border-radius:40px;height:34px;width:110px;opacity:.9;animation:drift 40s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:50px;height:50px;left:16px;top:-24px}.cloud::after{width:38px;height:38px;left:56px;top:-14px}
.c1{top:8%;left:-130px}.c2{top:26%;left:-130px;animation-delay:-20s;transform:scale(.7)}
#mascotWrap{position:absolute;left:50%;bottom:9%;width:min(96%,370px);aspect-ratio:22/24;transform:translateX(-50%);touch-action:none}
#mascot{width:100%;height:100%;overflow:visible;transform-origin:50% 90%;animation:breathe 3s ease-in-out infinite}
#mascot.jump{animation:jump .8s}
#mascot.giggle{animation:giggle .7s}
#mascot.shake{animation:shake .6s}
#mascot.chew{animation:chew .3s 4}
#mascot.sneeze{animation:sneeze 1s}
#mascot.sleepy{animation:droop 3.5s ease-in-out infinite}
#mascot.sleeping{animation:snore 3s ease-in-out infinite}
.blink{transform-box:fill-box;transform-origin:center;animation:blink 4.2s infinite}
.fly{animation:fly 2.2s linear infinite;transform-origin:8px 6px}
.stink{animation:stink 1.6s ease-in-out infinite}
.snot{transform-box:fill-box;transform-origin:center;animation:snot 2.6s ease-in-out infinite}
#bubble{position:absolute;left:50%;top:6%;margin-left:40px;width:92px;height:92px;border-radius:50%;background:#fff;font-size:46px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(0,0,0,.1);animation:pulse 1.2s infinite;z-index:3}
#bubble::after{content:"";position:absolute;left:8px;bottom:-8px;width:20px;height:20px;border-radius:50%;background:#fff}
#bubble:empty{display:none}
#fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6}
.fxe{position:absolute;font-size:34px;animation:floatup 1.4s ease-out forwards}
.foam{position:absolute;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset -3px -3px 0 rgba(120,200,255,.5);animation:foam 2.6s ease-out forwards}
.flyin{position:absolute;font-size:60px;transition:all .7s ease-in}
.big-float{position:absolute;right:14px;bottom:16px;width:96px;height:96px;border-radius:50%;background:#fff;font-size:54px;box-shadow:0 6px 0 #ff8aa8;z-index:5;animation:pulse 1s infinite}
#actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 12px 14px}
.act{height:86px;border-radius:26px;font-size:48px;color:#fff;box-shadow:0 6px 0 var(--d);background:var(--b);transition:transform .08s}
.act:active{transform:translateY(5px);box-shadow:0 1px 0 var(--d)}
.a1{--b:#ff8a5c;--d:#d1623a}.a2{--b:#38bdf8;--d:#1d90c7}.a3{--b:#ffcf3f;--d:#d4a413}
.a4{--b:#8b7cf6;--d:#5f50cc}.a5{--b:#34d399;--d:#17a073}.a6{--b:#ff6b9d;--d:#d1427a}
#night{position:fixed;inset:0;background:radial-gradient(circle at 80% 12%,rgba(255,255,255,.15),transparent 18%),rgba(14,16,60,.82);z-index:8;pointer-events:none;
  animation:fadein .8s}
#night::before{content:"🌙";position:absolute;right:26px;top:calc(env(safe-area-inset-top) + 14px);font-size:56px}
#night::after{content:"✨ ✨ ✨";position:absolute;left:24px;top:calc(env(safe-area-inset-top) + 40px);font-size:28px;letter-spacing:20px;animation:pulse 2.5s infinite}
body.sleeping #stage{z-index:9;position:relative}
body.sleeping #wakeBtn{position:fixed;z-index:10;left:50%;bottom:calc(env(safe-area-inset-bottom) + 28px);transform:translateX(-50%);width:130px;height:110px;border-radius:34px;
  background:#ffd23f;font-size:68px;box-shadow:0 7px 0 #d19f10}
body.sleeping #stage{background:transparent}
.zz{position:absolute;font-size:38px;font-weight:900;color:#cfd6ff;animation:floatup 3s ease-out infinite}
#sheet{position:fixed;inset:0;z-index:20;background:rgba(30,40,80,.45);display:flex;align-items:flex-end;animation:fadein .2s}
.panel{width:100%;background:#fff;border-radius:34px 34px 0 0;padding:20px 16px calc(env(safe-area-inset-bottom) + 20px);position:relative;animation:slideup .25s}
.close{position:absolute;right:12px;top:-30px;width:60px;height:60px;border-radius:50%;background:#ff6b6b;color:#fff;font-size:30px;box-shadow:0 4px 0 #c94444}
.grid{display:grid;gap:12px;margin-top:6px}
.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}
.item{position:relative;border-radius:24px;background:#f2f7fc;min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:50px;box-shadow:0 5px 0 #d3dfeb}
.item:active{transform:translateY(4px);box-shadow:0 1px 0 #d3dfeb}
.item .price{font-size:20px;font-weight:800;color:#b8791a;background:#fff3c9;border-radius:14px;padding:1px 10px}
.item.off{opacity:.55}.item.on{background:#d3f9d8;box-shadow:0 5px 0 #8fd39a}
.item svg{width:96px;height:84px}
.item .tick{position:absolute;right:6px;top:2px;font-size:24px}
.sec{font-size:28px;margin:10px 4px 0}
.hub{aspect-ratio:1/1;font-size:62px;color:#fff;font-weight:800}
.hub small{font-size:34px}
#game{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:linear-gradient(#ffe29f,#ffa99f 70%,#ff719a);animation:fadein .2s}
.gtop{display:flex;justify-content:space-between;align-items:center;padding:10px 14px}
.dots{display:flex;gap:8px;font-size:30px}.dots span{filter:grayscale(1) opacity(.45)}.dots span.on{filter:none}
#gBody{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:6px 14px 22px;min-height:0}
.fruits{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-content:center;max-width:340px;min-height:150px}
.fr{font-size:58px;line-height:1;transition:transform .15s}.fr.c{transform:scale(1.25);filter:drop-shadow(0 0 8px #fff) saturate(.6)}
.fr:active{transform:scale(.9)}
.opts{display:flex;gap:12px;justify-content:center;width:100%;flex-wrap:wrap}
.opt{min-width:98px;height:112px;border-radius:30px;background:#fff;font-size:62px;font-weight:900;box-shadow:0 7px 0 rgba(0,0,0,.18);color:var(--c);
  display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;max-width:120px}
.opt:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.opt.l{height:170px}.opt.l em{font-style:normal;font-size:56px;line-height:1}.opt.l b{font-size:74px;line-height:1}
.opt.sh{width:140px;height:140px;max-width:none;flex:none;padding:10px}.opt.sh svg{width:100%;height:100%}
.opt.no{animation:shake .5s}
.say{width:84px;height:84px;border-radius:50%;background:#fff;font-size:44px;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.say:active{transform:translateY(4px)}
.hint{width:70px;height:70px;background:#fff;border-radius:20px;padding:6px}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:380px}
.card{aspect-ratio:3/4;perspective:600px;background:none;border-radius:20px}
.card .in{position:absolute;inset:0;transition:transform .35s;transform-style:preserve-3d}
.card{position:relative}.card.f .in{transform:rotateY(180deg)}
.card .fa,.card .bk{position:absolute;inset:0;border-radius:20px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 5px 0 rgba(0,0,0,.18)}
.card .bk{background:#8b7cf6;font-size:42px;color:#fff}
.card .fa{background:#fff;font-size:44px;transform:rotateY(180deg)}
.card.m .fa{background:#d3f9d8}
.end{display:flex;flex-direction:column;align-items:center;gap:20px}
.end .stars{font-size:62px;animation:pulse 1s infinite}
.end .btns{display:flex;gap:18px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden}
.cf{position:absolute;top:-20px;width:12px;height:18px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.975)}}
@keyframes jump{0%{transform:scale(1.1,.85)}20%{transform:translateY(-70px) scale(.92,1.1)}45%{transform:translateY(-110px)}70%{transform:translateY(0) scale(1.1,.88)}100%{transform:none}}
@keyframes giggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-6deg) translateY(-14px)}35%{transform:rotate(6deg) translateY(0)}55%{transform:rotate(-5deg) translateY(-10px)}75%{transform:rotate(4deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}
@keyframes chew{0%,100%{transform:scale(1)}50%{transform:scale(1.05,.92)}}
@keyframes sneeze{0%{transform:none}35%{transform:scale(.9,1.08) translateY(-6px)}55%{transform:scale(1.14,.86) translateX(18px)}100%{transform:none}}
@keyframes droop{0%,100%{transform:rotate(-2deg) scale(1,.97)}50%{transform:rotate(3deg) scale(1,.94)}}
@keyframes snore{0%,100%{transform:scale(1,.96)}50%{transform:scale(1.03,.92)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes fly{to{transform:rotate(360deg)}}
@keyframes stink{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:.9;transform:translateY(-1.2px)}}
@keyframes snot{0%,100%{transform:scale(.4)}50%{transform:scale(1.4)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes bump{0%,100%{transform:scale(1)}40%{transform:scale(1.3)}}
@keyframes floatup{0%{opacity:0;transform:translateY(10px) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-150px) scale(1.2)}}
@keyframes foam{0%{transform:scale(.3);opacity:1}30%{transform:scale(1)}100%{transform:translateY(-30px) scale(1);opacity:0}}
@keyframes fadein{from{opacity:0}}
@keyframes slideup{from{transform:translateY(100%)}}
@keyframes drift{to{left:110%}}
@keyframes ball{0%{transform:translate(-120px,-40px)}25%{transform:translate(-40px,-150px)}50%{transform:translate(40px,0)}75%{transform:translate(120px,-110px)}100%{transform:translate(200px,0)}}
@media (max-height:700px){.act{height:68px;font-size:38px}.fr{font-size:44px}}