:root{
  --lav:#B9A5E8; --lav-d:#8F78D6; --plum:#3B2A4A; --blush:#F7B9C4; --cream:#FFF4E2;
  --mint:#BFE6CF; --honey:#F2C98A; --paper:#FFFBF3;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--plum);font-family:'Nunito',sans-serif;min-height:100%}
body{background:
  radial-gradient(circle at 15% 10%,#fde3ea 0,transparent 40%),
  radial-gradient(circle at 85% 0%,#e6dcff 0,transparent 45%),
  radial-gradient(circle at 50% 100%,#dff4e7 0,transparent 50%),var(--cream);}
.font-display{font-family:'Fredoka',sans-serif}
.font-hand{font-family:'Patrick Hand',cursive}
button{font-family:'Fredoka',sans-serif;cursor:pointer}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--lav-d);outline-offset:3px}
.btn{border:none;border-radius:999px;padding:.7rem 1.3rem;font-weight:600;color:var(--plum);background:#fff;
  box-shadow:0 4px 0 rgba(59,42,74,.15),0 6px 14px rgba(59,42,74,.08);transition:transform .15s var(--spring),box-shadow .15s;min-height:44px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(59,42,74,.15)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-lav{background:var(--lav);color:#fff;text-shadow:0 1px 0 rgba(59,42,74,.25)}
.btn-pink{background:var(--blush)}
.btn-mint{background:var(--mint)}
.btn-danger{background:#f39aa8;color:#fff}
.card{background:rgba(255,251,243,.88);backdrop-filter:blur(8px);border:2px solid rgba(59,42,74,.12);border-radius:24px;
  box-shadow:0 8px 24px rgba(59,42,74,.08)}

/* Room */
.room{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/10;min-height:340px;
  background:linear-gradient(#fff1de 0 68%,transparent 68%);border:2px solid rgba(59,42,74,.12);box-shadow:0 14px 40px rgba(59,42,74,.12)}
@media (max-width:640px){.room{aspect-ratio:auto;height:440px}}
.room.dim{filter:brightness(.72) saturate(.9)}
.room-wall{position:absolute;inset:0 0 32% 0;background:linear-gradient(115deg,#fff6e8 0%,#ffeeda 60%,#fbe3cf 100%)}
.sunbeam{position:absolute;top:0;right:12%;width:45%;height:100%;background:linear-gradient(200deg,rgba(255,240,200,.55),transparent 70%);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);pointer-events:none;mix-blend-mode:soft-light}
.window{position:absolute;top:8%;right:8%;width:30%;height:48%;border:10px solid #e8c48e;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 0 3px #d6ab70,0 6px 0 #d6ab70}
.window::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:6px;background:#e8c48e;transform:translateX(-50%)}
.cloud{position:absolute;background:#fff;border-radius:999px;opacity:.9;animation:drift 40s linear infinite}
.cloud::before,.cloud::after{content:'';position:absolute;background:#fff;border-radius:999px}
.cloud::before{width:55%;height:160%;left:15%;top:-70%}
.cloud::after{width:40%;height:130%;left:50%;top:-45%}
@keyframes drift{from{transform:translateX(-120%)}to{transform:translateX(420%)}}
.star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:twinkle 2s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.2}}
.floor{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:
   repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 40px,transparent 40px 80px),
   repeating-linear-gradient(0deg,rgba(247,185,196,.35) 0 30px,transparent 30px 60px),#fbe6ea;
  border-top:3px solid #f2cfd6}
.shelf{position:absolute;left:6%;top:24%;width:20%;height:10px;background:#e2b67d;border-radius:4px;box-shadow:0 4px 0 #c99b62}
.book{position:absolute;bottom:10px;width:12%;border-radius:3px 3px 0 0}
.polaroid{position:absolute;background:#fff;padding:4px 4px 12px;box-shadow:0 3px 8px rgba(0,0,0,.08);border-radius:3px}
.lamp{position:absolute;left:5%;bottom:30%;width:58px;cursor:pointer;background:none;border:none;padding:0}
.lamp-glow{position:absolute;left:-60px;top:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(rgba(255,214,140,.55),transparent 65%);pointer-events:none;transition:opacity .4s}
.plant-btn{position:absolute;background:none;border:none;padding:0;cursor:pointer}
.plant-btn.rustle svg{animation:rustle .6s ease-in-out}
@keyframes rustle{25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
.cushion{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:min(48%,300px);height:46px;background:var(--mint);border-radius:50%;box-shadow:inset 0 -8px 0 #a6d6ba,0 10px 20px rgba(59,42,74,.12)}

/* Blob */
.blob-wrap{display:inline-block;transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite;cursor:pointer;-webkit-tap-highlight-color:transparent}
.blob-wrap.static{animation:none;cursor:default}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.97)}}
.blob-wrap.squish{animation:squish .6s var(--spring)}
@keyframes squish{0%{transform:scale(1,1)}25%{transform:scale(1.18,.78)}50%{transform:scale(.9,1.12)}75%{transform:scale(1.05,.96)}100%{transform:scale(1,1)}}
.blob-wrap.stretch{animation:stretch 1.4s ease-in-out}
@keyframes stretch{40%{transform:scale(.88,1.18)}70%{transform:scale(1.05,.95)}}
.blob-wrap.wiggle{animation:wiggle .9s ease-in-out}
@keyframes wiggle{20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.blob-wrap.hop{animation:hop .7s var(--spring) 2}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}20%{transform:scale(1.1,.88)}50%{transform:translateY(-40px) scale(.94,1.08)}}
.blob-wrap.eat{animation:eat .32s ease-in-out 4}
@keyframes eat{50%{transform:scale(1.07,.93)}}
.blob-wrap.yuck{animation:yuck .5s ease-in-out 2}
@keyframes yuck{25%{transform:translateX(-6px) scale(.97,1.02)}75%{transform:translateX(6px)}}
.blob-wrap.bob{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
.aura{animation:spin 12s linear infinite;transform-origin:100px 100px}
@keyframes spin{to{transform:rotate(360deg)}}
.zzz{position:absolute;font-family:'Fredoka';font-weight:700;color:var(--lav-d);animation:zz 2.6s ease-in infinite;opacity:0}
@keyframes zz{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(30px,-60px) scale(1.2)}}

.float-up{position:absolute;pointer-events:none;font-family:'Fredoka';font-weight:700;animation:floatUp 1.5s ease-out forwards;white-space:nowrap;text-shadow:0 2px 0 #fff}
@keyframes floatUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-8px) scale(1.1)}100%{opacity:0;transform:translateY(-90px) scale(1)}}

.bubble-speech{position:relative;background:#fff;border:2.5px solid var(--plum);border-radius:22px;padding:.55rem 1rem;font-family:'Patrick Hand';font-size:1.2rem;line-height:1.25;max-width:min(340px,80vw);box-shadow:0 4px 0 rgba(59,42,74,.12);animation:pop .35s var(--spring)}
.bubble-speech::after{content:'';position:absolute;left:50%;bottom:-12px;width:18px;height:18px;background:#fff;border-right:2.5px solid var(--plum);border-bottom:2.5px solid var(--plum);transform:translateX(-50%) rotate(45deg)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.dots span{display:inline-block;animation:dot 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.4}}

.statbar{height:12px;background:rgba(59,42,74,.08);border-radius:99px;overflow:hidden}
.statbar>div{height:100%;border-radius:99px;transition:width .6s var(--spring)}
.low{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:80vh;overflow:auto;border-radius:28px 28px 0 0;background:var(--paper);box-shadow:0 -10px 40px rgba(59,42,74,.2);animation:slideUp .35s var(--spring)}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.overlay{position:fixed;inset:0;background:rgba(59,42,74,.35);z-index:39;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(59,42,74,.4);animation:fade .2s}
.modal>div{animation:pop .35s var(--spring);max-height:92vh;overflow:auto}

.toast{animation:toastIn .4s var(--spring)}
@keyframes toastIn{from{transform:translateY(-20px);opacity:0}}

/* bubble game */
.playfield{position:relative;overflow:hidden;border-radius:24px;height:min(62vh,460px);background:linear-gradient(#d9ccff,#ffe1ea 70%,#fff3df);border:2px solid rgba(59,42,74,.12)}
.gbubble{position:absolute;bottom:-90px;border-radius:50%;border:none;padding:0;
  background:radial-gradient(circle at 30% 30%,#fff 0 12%,rgba(255,255,255,.4) 13%,rgba(200,180,255,.35) 50%,rgba(170,230,210,.45) 80%,rgba(255,190,210,.6) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),0 4px 12px rgba(143,120,214,.25);animation-name:rise;animation-timing-function:linear;animation-fill-mode:forwards}
.gbubble.gold{background:radial-gradient(circle at 30% 30%,#fff 0 12%,#ffe9a6 40%,#f5c04a 100%);box-shadow:0 0 18px #ffd56b}
.gbubble.storm{background:radial-gradient(circle at 30% 30%,#eee 0 12%,#9aa0b8 60%,#6c6f8a 100%)}
.gbubble .wob{display:block;width:100%;height:100%;animation:wob 1.8s ease-in-out infinite;font-size:1.2em;line-height:1}
@keyframes rise{to{transform:translateY(calc(-1 * min(62vh,460px) - 120px))}}
@keyframes wob{50%{transform:translateX(12px)}}
.burst{position:absolute;border-radius:50%;border:3px solid #fff;animation:burst .4s ease-out forwards;pointer-events:none}
@keyframes burst{from{transform:scale(.5);opacity:1}to{transform:scale(1.8);opacity:0}}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.evo-flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:#fff}100%{background:transparent}}
.glowspin{animation:spin 3s linear infinite}

.paper{background:repeating-linear-gradient(#fffbf3 0 31px,#e8def5 31px 32px);border-radius:20px;position:relative;border:2px solid rgba(59,42,74,.1)}
.washi{position:absolute;width:70px;height:20px;background:rgba(191,230,207,.85);top:-8px;transform:rotate(-6deg)}
.tab-active{background:var(--lav)!important;color:#fff!important}
.tour-hl{position:relative;z-index:45;box-shadow:0 0 0 4px #fff,0 0 0 8px var(--lav)!important;border-radius:20px}
.confetti{position:fixed;pointer-events:none;z-index:60;animation:conf 1.6s ease-out forwards}
@keyframes conf{to{transform:translate(var(--dx),var(--dy)) rotate(360deg);opacity:0}}
.logo-letter{display:inline-block;animation:logobounce 2.4s var(--spring) infinite}
@keyframes logobounce{0%,80%,100%{transform:translateY(0)}88%{transform:translateY(-8px)}}

.reduce *,.reduce *::before,.reduce *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.reduce .gbubble{animation-duration:var(--dur)!important;animation-iteration-count:1!important}
@media (prefers-reduced-motion:reduce){.blob-wrap,.cloud{animation:none}}