:root{--ink:#1b2447;--font:'Press Start 2P','Courier New',monospace;--u:3;--fs:3;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
html,body{width:100%;height:100%;overflow:hidden;background:#0d1330;font-family:var(--font);touch-action:none;overscroll-behavior:none;}
img,canvas{image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none;}
canvas{display:block;}
.page{position:fixed;inset:0;display:none;overflow:hidden;}
.page.active{display:block;}
#p2.active,#p3.active{display:flex;flex-direction:column;}
.wipe{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;transition:opacity .28s steps(4);z-index:100;}
.wipe.on{opacity:1;}

/* ---------- COVER ---------- */
#p1{background:linear-gradient(#78c0f4 0%,#aedbf8 50%,#e2f3ff 100%);}
.drift{position:absolute;left:0;opacity:.95;animation:drift linear infinite;z-index:1;}
@keyframes drift{from{transform:translateX(-40vw)}to{transform:translateX(130vw)}}
.frame{position:absolute;inset:clamp(12px,3.2vw,34px);border:clamp(6px,1.3vw,12px) solid #a8bedc;
  background:linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.12));
  box-shadow:inset 0 0 0 3px #eaf3ff,inset 0 0 0 clamp(8px,1.6vw,16px) rgba(120,150,200,.28),0 0 0 3px #5b78a6,0 6px 0 3px rgba(40,70,120,.35);z-index:2;}
.corner{position:absolute;z-index:3;pointer-events:none;animation:cbob 3s steps(3) infinite;}
.corner img{display:block;width:calc(100px*var(--u));}
.corner.tl{left:-7%;top:-6%}
.corner.tr{right:-7%;top:-6%;transform:scaleX(-1);animation-delay:-1s}
.corner.bl{left:-9%;bottom:-8%;animation-delay:-2s}
.corner.br{right:-9%;bottom:-8%;transform:scaleX(-1);animation-delay:-.5s}
@keyframes cbob{50%{translate:0 4px}}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,3vh,30px);z-index:4;padding:0 6vw;}
.title{font-family:var(--font);font-weight:400;font-size:clamp(18px,9.2vw,76px);color:#46bdff;white-space:nowrap;letter-spacing:0;line-height:1;
  text-shadow:-.06em 0 0 #0b3a8c,.06em 0 0 #0b3a8c,0 -.06em 0 #0b3a8c,-.06em -.06em 0 #0b3a8c,.06em -.06em 0 #0b3a8c,-.06em .06em 0 #0b3a8c,.06em .06em 0 #0b3a8c,0 .06em 0 #0b3a8c,0 .12em 0 #0b3a8c,0 .17em 0 #0a2f73;}
.title span{display:inline-block;animation:wob 1.6s steps(4) infinite;animation-delay:calc(var(--i)*.1s);}
@keyframes wob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.14em)}}
.play{position:relative;width:clamp(68px,17vmin,112px);height:clamp(68px,17vmin,112px);border:0;cursor:pointer;background:#142f78;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);animation:pulse 1s steps(2) infinite;}
.play::before{content:"";position:absolute;inset:7%;background:linear-gradient(#7dbdff 0 45%,#3b7be8 45% 100%);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);}
.play::after{content:"";position:absolute;left:38%;top:30%;width:34%;height:40%;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);}
.play:active{transform:translateY(4px) scale(.96);}
@keyframes pulse{50%{transform:scale(1.07)}}
.credit{position:absolute;left:0;right:0;bottom:clamp(22px,6vw,56px);text-align:center;font-size:clamp(8px,2vw,11px);color:#fff;z-index:4;text-shadow:2px 2px 0 #3b5f95;}
.spark{position:absolute;z-index:1;animation:tw 1.4s steps(2) infinite;}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:1}}

/* ---------- ROOM ---------- */
.room{position:absolute;inset:0;background:linear-gradient(#bde2ea,#a4d1db);}
.room.night{background:linear-gradient(#18224b,#2e3d7c);}
.win{position:absolute;left:4%;top:calc(env(safe-area-inset-top) + 70px);width:min(58vw,560px);display:flex;gap:2.4%;padding:1.8%;background:#fff;
  border:4px solid #8fc7d0;box-shadow:0 0 0 4px #a9d6dd;}
.sash{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#8e9cb8;padding:3px;}
.sash i{display:block;aspect-ratio:1/.92;background:linear-gradient(135deg,#d3ecf4 0 46%,#bfe0ec 46% 54%,#d3ecf4 54%);}
.night .win{background:#c9d3f0;border-color:#4d5c9a;box-shadow:0 0 0 4px #34437e;}
.night .sash{background:#46558f;}
.night .sash i{background:linear-gradient(135deg,#1d2b5b 0 46%,#2a3a72 46% 54%,#1d2b5b 54%);}
.win .moon{position:absolute;left:58%;top:10%;width:calc(18px*var(--u));animation:moonb 3s steps(3) infinite;}
@keyframes moonb{50%{translate:0 3px}}
.scene{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;z-index:2;min-height:0;}

.scene:has(.bloom.drag){z-index:70;}
.table{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(6px,1.6vw,18px);
  padding:20px 12px calc(16px + env(safe-area-inset-bottom));background:repeating-linear-gradient(180deg,#f5cca2 0 26px,#dba46c 26px 30px);
  border-top:6px solid #c98d54;box-shadow:inset 0 4px 0 #ffe2bf;}
.table.dark{background:repeating-linear-gradient(180deg,#86675a 0 26px,#6a4e42 26px 30px);border-top-color:#4a352b;box-shadow:inset 0 4px 0 #a98b78;}
.vasewrap{position:absolute;right:1%;bottom:-4px;z-index:0;}
/* vase */
#vaseFront{position:absolute;left:0;top:0;z-index:4;pointer-events:none;}
/*flower draggg */
.bloom{position:absolute;z-index:3;touch-action:none;cursor:grab;transition:transform .3s cubic-bezier(.3,1.4,.5,1);}
.bloom.drag{transition:none;cursor:grabbing;z-index:60;}
.bloom.gone{display:none;}
.mute{position:fixed;z-index:120;top:max(10px,env(safe-area-inset-top));right:10px;width:46px;height:46px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:#fff;border:4px solid var(--ink);box-shadow:3px 3px 0 rgba(27,36,71,.3);}
.mute:active{transform:translateY(3px);box-shadow:0 0 0 rgba(0,0,0,0);}
.mute img{width:30px;display:block;}
.owlwrap{position:relative;z-index:1;display:inline-block;margin-bottom:-12px;}
.owlwrap::after{content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:12px;background:rgba(70,45,25,.25);border-radius:50%;z-index:-1;}
#owl{transition:filter .1s;}
#owl.hot{filter:drop-shadow(0 0 8px rgba(255,230,120,.95));}
#owl.jolt{animation:jolt .18s steps(2);}
@keyframes jolt{50%{transform:translateY(-8px)}}
.bubble{position:absolute;left:60%;bottom:94%;background:#fff;border:4px solid var(--ink);padding:6px;box-shadow:4px 4px 0 rgba(27,36,71,.3);z-index:6;animation:pop .35s steps(4);}
.bubble::after{content:"";position:absolute;left:14px;bottom:-12px;width:14px;height:14px;background:#fff;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(45deg);}
.bubble img{display:block;width:calc(18px*var(--u));height:calc(18px*var(--u));animation:wig 1s steps(2) infinite;}
.bubble.hide{display:none;}
.bubble.shake{animation:bshake .5s steps(6);}
@keyframes pop{0%{transform:scale(.3)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes wig{50%{transform:rotate(-6deg)}}
@keyframes bshake{0%,100%{translate:0}25%{translate:-6px}75%{translate:6px}}
.hud{position:absolute;z-index:10;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:rgba(255,255,255,.82);border:4px solid var(--ink);box-shadow:4px 4px 0 rgba(27,36,71,.3);}
.hud span{font-size:clamp(8px,2.3vw,12px);color:var(--ink);}
#meter{display:flex;gap:4px;}
#meter img{width:calc(9px*var(--u));display:block;}
#meter img.pop{animation:pop .4s steps(4);}
.food{position:relative;z-index:5;width:calc(18px*var(--fs));height:calc(18px*var(--fs));touch-action:none;cursor:grab;transition:transform .3s cubic-bezier(.3,1.4,.5,1);}
.food img{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 0 rgba(90,50,20,.28));pointer-events:none;}
.food:hover{filter:brightness(1.08);}
.food.drag{z-index:60;cursor:grabbing;transition:none;}
.fx{position:absolute;pointer-events:none;z-index:20;animation:rise 1.1s steps(9) forwards;}
.fx img{display:block;}
@keyframes rise{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx,0px),-90px) scale(1.2);opacity:0}}

/* ---------- PAGE 3 ---------- */
.congrats{position:absolute;z-index:6;top:calc(env(safe-area-inset-top) + 18px);left:0;right:0;text-align:center;}
.congrats h2{font-weight:400;font-size:clamp(20px,6vw,44px);color:#ffe680;text-shadow:-3px 0 #5a3b00,3px 0 #5a3b00,0 -3px #5a3b00,0 3px #5a3b00,0 6px #5a3b00;animation:pulse 1.4s steps(2) infinite;}
.congrats p{margin-top:14px;font-size:clamp(8px,2.2vw,14px);color:#dfe6ff;text-shadow:2px 2px 0 #121a40;}
.sleepwrap{position:relative;display:inline-block;margin-bottom:-6px;}
.sleepwrap canvas{position:relative;z-index:1;}
#cushion{position:absolute;left:50%;transform:translateX(-50%);bottom:-14px;z-index:0;}
.zs{position:absolute;left:62%;top:6%;z-index:3;pointer-events:none;}
.zs b{position:absolute;left:0;top:0;font-weight:400;color:#fff;text-shadow:2px 2px 0 #3b4b96;opacity:0;animation:zup 3.3s steps(12) infinite;}
.zs b:nth-child(1){font-size:clamp(10px,2.6vw,18px);}
.zs b:nth-child(2){font-size:clamp(14px,3.6vw,26px);animation-delay:1.1s;}
.zs b:nth-child(3){font-size:clamp(18px,4.6vw,34px);animation-delay:2.2s;}
@keyframes zup{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(clamp(20px,5vw,44px),clamp(-70px,-9vw,-110px));opacity:0}}
.btn{font-family:var(--font);font-size:clamp(11px,3.2vw,18px);color:#fff;background:#3f7fe0;border:4px solid #14337a;padding:16px 24px 18px;cursor:pointer;
  box-shadow:inset 0 -6px 0 #2a5bbf,inset 0 4px 0 #78b4ff,0 6px 0 #14337a;text-shadow:2px 2px 0 #14337a;position:relative;z-index:5;}
.btn:active{transform:translateY(5px);box-shadow:inset 0 -6px 0 #2a5bbf,inset 0 4px 0 #78b4ff,0 1px 0 #14337a;}
.star{position:absolute;z-index:1;animation:tw 1.6s steps(2) infinite;}