:root{--p:3;--p3:4}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#4b79a6;touch-action:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  font-family:'Press Start 2P',monospace}
.page{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s;overflow:hidden}
.page.active{opacity:1;visibility:visible}
img.px{display:block;width:calc(var(--w)*var(--p)*1px);height:auto;image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none;pointer-events:none}

/* ---------- COVER ---------- */
#p1{background:linear-gradient(160deg,#6e93bd,#4b79a6 60%,#5683b0)}
.ging{position:absolute;width:44%;height:38%;opacity:.55;
  background:conic-gradient(rgba(255,255,255,.85) 0 25%,transparent 0 50%,rgba(255,255,255,.85) 0 75%,transparent 0) 0 0/calc(var(--p)*14px) calc(var(--p)*14px)}
.ging.tl{top:0;left:0;border-bottom-right-radius:70% 60%}
.ging.br{bottom:0;right:0;border-top-left-radius:70% 60%}
.glass{position:absolute;inset:max(2.2vmin,10px);border-radius:min(11vmin,90px);
  border:min(2.4vmin,20px) solid transparent;
  background:linear-gradient(180deg,rgba(176,198,224,.9),rgba(140,171,204,.88) 55%,rgba(152,180,208,.9)) padding-box,
             linear-gradient(135deg,#fff 0%,#c6cfda 28%,#7f8a98 55%,#dfe6ee 80%,#fff 100%) border-box;
  background-clip:padding-box,border-box;
  box-shadow:0 1.6vmin 3.2vmin rgba(20,40,80,.45),inset 0 0 3vmin rgba(255,255,255,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(5vmin,40px)}
.glass::before{content:'';position:absolute;left:8%;right:8%;top:2%;height:12%;border-radius:50%;
  background:linear-gradient(rgba(255,255,255,.5),transparent);pointer-events:none}
.paw{position:absolute;width:min(12vmin,100px);height:min(12vmin,100px);fill:#fff;z-index:5;filter:drop-shadow(0 .6vmin 0 rgba(60,100,150,.35));animation:pawbob 3s ease-in-out infinite;pointer-events:none}
@keyframes pawbob{0%,100%{translate:0 0}50%{translate:0 -1.2vmin}}
.title{font-size:min(7.2vw,14vh);letter-spacing:.04em;color:#fff;text-align:center;line-height:1.1;
  text-shadow:0 -.07em 0 #cfe6f3,0 .07em 0 #a9cadf,-.07em 0 0 #cfe6f3,.07em 0 0 #cfe6f3,-.07em -.07em 0 #cfe6f3,.07em -.07em 0 #cfe6f3,-.07em .07em 0 #a9cadf,.07em .07em 0 #a9cadf,0 .16em .22em rgba(40,80,130,.4);
  animation:float 3.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2vmin)}}
.play{position:relative;width:clamp(72px,16vmin,130px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:max(3px,.8vmin) solid #2d5fd0;
  background:radial-gradient(circle at 50% 22%,#b4dbff 0 14%,#5a9cf5 42%,#2a62d6 100%);
  box-shadow:0 1.2vmin 2.4vmin rgba(0,30,90,.5),inset 0 -1.2vmin 2vmin rgba(255,255,255,.35);
  animation:pulse 1.6s ease-in-out infinite;transition:transform .15s}
.play::after{content:'';position:absolute;inset:25% 20% 25% 34%;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%);filter:drop-shadow(0 2px 0 rgba(0,40,120,.4))}
.play:active{transform:scale(.92);animation:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.by{position:absolute;bottom:3.4vmin;left:0;right:0;text-align:center;font-family:system-ui,Arial,sans-serif;font-size:clamp(10px,1.9vmin,15px);color:#243a56;letter-spacing:.02em}

/* ---------- ROOM ---------- */
.room{position:absolute;inset:0}
.wall{position:absolute;left:0;right:0;top:0;bottom:34%;background:linear-gradient(#a9bad1,#9db0c8)}
.base{position:absolute;left:0;right:0;top:62%;height:4%;background:linear-gradient(#dc9576 0 22%,#c27657 22% 100%)}
.floor{position:absolute;left:0;right:0;top:66%;bottom:0;
  background:linear-gradient(rgba(120,80,30,.14),transparent 30%),
  conic-gradient(#f5e2b2 0 25%,#efcb90 0 50%,#f5e2b2 0 75%,#efcb90 0) 0 0/calc(var(--p)*24px) calc(var(--p)*24px)}
.win{position:absolute;left:50%;top:9%;translate:-50% 0;transition:opacity 2s}
.win.night{opacity:0}
#p3.night .win.night{opacity:1}
.item{position:absolute;left:calc(var(--px)*1%);top:calc(var(--py)*1% + var(--off,0px));translate:-50% -100%;z-index:10;touch-action:none;cursor:grab}
.item.house{z-index:5;cursor:default}
@media (min-aspect-ratio:1/1){.item{left:calc(var(--lx)*1%);top:calc(var(--ly)*1% + var(--off,0px))}}
.item.drag{z-index:60;transition:none;transform:translate(var(--dx),var(--dy)) scale(1.12);cursor:grabbing;filter:drop-shadow(0 calc(var(--p)*2px) 0 rgba(0,0,0,.25))}
.item.back{transition:transform .38s cubic-bezier(.3,1.5,.5,1)}
.item.static{pointer-events:none;cursor:default}
.item img{transform:rotate(var(--rot,0deg))}

/* ---------- HUD ---------- */
.hud{position:absolute;left:max(3vw,12px);top:max(2.4vh,12px);z-index:70;display:flex;align-items:center;gap:10px;pointer-events:none}
.hud .bar{position:relative;width:min(52vw,320px);height:20px;border:3px solid #2b1b17;background:#5a3b4a;box-shadow:inset 0 -4px #48303c,0 3px 0 rgba(0,0,0,.25)}
.hud .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#ff9db6 0 40%,#ff5d85 40% 100%);transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.hud .bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),rgba(40,20,30,.45) calc(10% - 2px) 10%)}
.hud.pop img{animation:hudpop .4s}
@keyframes hudpop{50%{transform:scale(1.35)}}

/* ---------- DOG ---------- */
.dog{position:absolute;left:50%;top:87%;translate:-50% -100%;width:calc(46*var(--p)*1px);height:calc(42*var(--p)*1px);z-index:20;touch-action:none;cursor:pointer}
.dog>.dogbody{position:absolute;left:0;bottom:0;width:100%;height:100%;transform-origin:50% 100%;animation:breathe 2.6s ease-in-out infinite}
.dog.sad>.dogbody{animation:sadbreathe 3.4s ease-in-out infinite}
.dog.hop>.dogbody{animation:hop .65s ease-out}
.dog.wiggle>.dogbody{animation:wiggle .5s ease-in-out}
.dog.poke>.dogbody{animation:poke .25s ease-out}
.dog.angry>.dogbody{animation:shake .1s linear infinite}
.dog .bubble{position:absolute;left:-12%;top:-14%;animation:bob 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.04)}}
@keyframes sadbreathe{0%,100%{transform:scale(1,.97)}50%{transform:scale(1,1)}}
@keyframes hop{0%{transform:scale(1.1,.88)}30%{transform:translateY(calc(var(--p)*-9px)) scale(.94,1.1)}60%{transform:translateY(0) scale(1.1,.9)}100%{transform:scale(1)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
@keyframes poke{0%{transform:scale(1.07,.92)}100%{transform:scale(1)}}
@keyframes shake{0%{transform:translate(calc(var(--p)*-1px),0)}50%{transform:translate(calc(var(--p)*1px),calc(var(--p)*-1px))}100%{transform:translate(calc(var(--p)*-1px),0)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--p)*-2px))}}

/* ---------- PROPS ---------- */
#props{position:fixed;inset:0;pointer-events:none;z-index:150}
.prop{position:absolute;translate:-50% -50%}
.item.gone{visibility:hidden}
.item.pulse img{animation:rpulse .36s steps(2) infinite}
.item.pop img{animation:popin .34s ease-out}
@keyframes rpulse{50%{transform:rotate(var(--rot,0deg)) scale(1.07)}}
@keyframes popin{0%{transform:rotate(var(--rot,0deg)) scale(.4)}60%{transform:rotate(var(--rot,0deg)) scale(1.18)}100%{transform:rotate(var(--rot,0deg)) scale(1)}}
.dog.nod>.dogbody{animation:nod .48s ease-in-out}
@keyframes nod{0%,100%{transform:none}35%{transform:translateY(calc(var(--p)*2px)) scale(1.04,.93)}}
/* ---------- DOG PARTS ---------- */
.dogbody>img.px{position:absolute}
.dogbody>.main{left:0;top:0}
.dogbody>.tail{left:calc(32*var(--p)*1px);top:calc(27*var(--p)*1px);transform-origin:7% 27%;transition:transform .4s}
.dogbody>.foot{top:calc(34*var(--p)*1px)}
.dogbody>.fl{left:calc(11*var(--p)*1px)}
.dogbody>.fr{left:calc(27*var(--p)*1px)}
.dog.sad .tail{transform:rotate(16deg)}
.dog.wag .tail,.dog3.hoploop .tail{animation:wag .3s ease-in-out infinite}
@keyframes wag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(26deg)}}
.dog.walk .fl,.dog.walk .fr{animation:step .24s ease-in-out infinite}
.dog.walk .fr{animation-delay:.12s}
@keyframes step{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--p)*-2.2px))}}
.dog.batl .fl{animation:bat .38s ease-out}
.dog.batr .fr{animation:bat .38s ease-out}
@keyframes bat{0%{transform:none}40%{transform:translate(calc(var(--p)*-5px),calc(var(--p)*-3.5px)) rotate(-28deg)}100%{transform:none}}
/* ---------- FX ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.fx{position:absolute;translate:-50% -50%;animation:fxup 1.3s ease-out forwards}
@keyframes fxup{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1;transform:translate(0,calc(var(--p)*-3px)) scale(1)}100%{opacity:0;transform:translate(var(--fx,0px),calc(var(--p)*-22px)) scale(1.15)}}

/* ---------- PAGE 3 ---------- */
#p3 .room{transition:filter 2.2s}
#p3.night .room{filter:brightness(.6) saturate(.8)}
#p3 .item{transition:opacity 2s;opacity:.9}
#p3.night .item{opacity:.3}
.stage3{--p:var(--p3);position:absolute;inset:0;z-index:20;pointer-events:none}
.bedwrap{position:absolute;left:50%;top:66%;translate:-50% -50%;width:calc(62*var(--p)*1px);height:calc(28*var(--p)*1px)}
.bedwrap .bed{position:absolute;left:0;top:0;opacity:0;transform:translateY(calc(var(--p)*5px));transition:opacity 1s,transform 1s cubic-bezier(.3,1.4,.5,1)}
#p3.bed .bedwrap .bed{opacity:1;transform:none}
.dog3{position:absolute;left:50%;bottom:calc(var(--p)*5px);translate:-50% 0;z-index:2;width:calc(46*var(--p)*1px)}
.dog3 .dogbody{position:relative;width:calc(46*var(--p)*1px);height:calc(42*var(--p)*1px);transform-origin:50% 100%;transition:transform 1.2s}
.dog3.hoploop .dogbody{animation:hop3 .7s ease-in-out infinite}
.dog3.sleeping .dogbody{transform:translateY(calc(var(--p)*2px)) scale(1.02,.95);animation:snore 3.2s ease-in-out infinite}
@keyframes hop3{0%,100%{transform:scale(1.08,.9)}35%{transform:translateY(calc(var(--p)*-11px)) scale(.94,1.1)}70%{transform:translateY(0) scale(1.08,.92)}}
@keyframes snore{0%,100%{transform:translateY(calc(var(--p)*2px)) scale(1.02,.95)}50%{transform:translateY(calc(var(--p)*2px)) scale(1.02,.98)}}
.bedwrap .bed.front{z-index:3}
.zzz{position:absolute;left:62%;top:-2%;opacity:0;font-size:calc(var(--p)*3px);color:#fff;text-shadow:0 .15em 0 #5a79a8,.1em 0 0 #5a79a8,-.1em 0 0 #5a79a8,0 -.1em 0 #5a79a8}
.zzz b{position:absolute;left:0;top:0;font-weight:normal;opacity:0;animation:zz 3s ease-out infinite}
.zzz b:nth-child(2){animation-delay:1s;font-size:1.3em}
.zzz b:nth-child(3){animation-delay:2s;font-size:1.7em}
.dog3.sleeping .zzz{opacity:1}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(calc(var(--p)*10px),calc(var(--p)*-14px))}}
.caption{position:absolute;left:0;right:0;top:15%;text-align:center;color:#fff;font-size:clamp(11px,3.2vmin,22px);line-height:1.6;opacity:0;transition:opacity 1.5s;z-index:40;
  text-shadow:0 3px 0 #3f5f8e,2px 0 0 #3f5f8e,-2px 0 0 #3f5f8e,0 -2px 0 #3f5f8e;padding:0 6vw}
#p3.sleeping .caption{opacity:1}
.btn{position:absolute;left:50%;bottom:max(5vh,28px);translate:-50% 0;z-index:50;font-family:inherit;font-size:clamp(10px,2.6vmin,16px);color:#fff;cursor:pointer;
  padding:1.6em 2em;background:#3f80d8;border:4px solid #1d2f57;box-shadow:inset 0 -6px 0 #2a5db0,inset 0 4px 0 #78b0f5,0 6px 0 #1d2f57;
  opacity:0;pointer-events:none;transition:opacity 1s}
.btn:active{transform:translateY(3px);box-shadow:inset 0 -6px 0 #2a5db0,inset 0 4px 0 #78b0f5,0 3px 0 #1d2f57}
#p3.showbtn .btn{opacity:1;pointer-events:auto}