*{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:#2a0f1c;overscroll-behavior:none;touch-action:none;font-family:'Press Start 2P',monospace}
canvas{display:block;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;image-rendering:pixelated}
.page{position:fixed;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s;overflow:hidden;background:#2a0f1c}
.page.active{opacity:1;visibility:visible}
.abs{position:absolute;pointer-events:none}
.bg{position:absolute;left:0;top:0;pointer-events:none}
.z1{z-index:1}.z2{z-index:2}.z5{z-index:5}.z8{z-index:8}

/* ===== cover ===== */
#coverBg{position:absolute;left:0;top:0}
#clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#clouds canvas{position:absolute;left:0;top:0;will-change:transform}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,5vh,46px);padding-bottom:2vh;z-index:5}
.title{position:relative;font-size:min(13vw,21vh,150px);letter-spacing:.05em;padding-left:.05em;line-height:1;color:#b00000;white-space:nowrap;
  text-shadow:-.05em 0 #fff,.05em 0 #fff,0 -.05em #fff,0 .05em #fff,-.05em -.05em #fff,.05em -.05em #fff,-.05em .05em #fff,.05em .05em #fff,
  0 .09em 0 #fff,0 .12em 0 #e0901f,0 .15em 0 #c9770f,0 .18em 0 #a85d06,0 .27em .08em rgba(60,10,10,.38);
  animation:bob 1.6s steps(3) infinite}
.title::after{content:attr(data-text);position:absolute;left:.05em;top:0;letter-spacing:.05em;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;
  background:linear-gradient(#ff2a2a 0 42%,#d40d0d 42% 58%,#9c0000 58% 100%);-webkit-background-clip:text;background-clip:text}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.06em)}}
.btn{font-family:'Press Start 2P',monospace;font-size:clamp(14px,3.4vmin,26px);letter-spacing:.28em;padding:.95em 1.7em .95em 2em;border:0;border-radius:999px;color:#1b1646;background:#ff5757;cursor:pointer;position:relative;touch-action:manipulation;
  box-shadow:inset 0 .3em 0 #ff8f8f,inset 0 -.3em 0 #d93a45,0 0 0 .24em #1b1646,0 .55em 0 .24em #1b1646;transition:transform .08s,box-shadow .08s}
.btn:hover{background:#ff6767}
.btn:active{transform:translateY(.4em);box-shadow:inset 0 .3em 0 #ff8f8f,inset 0 -.3em 0 #d93a45,0 0 0 .24em #1b1646,0 .15em 0 .24em #1b1646}
.btn.wide{font-size:clamp(11px,2.7vmin,21px);letter-spacing:.16em}
.pulse{animation:pulse 1.1s steps(2) infinite}
.pulse:active{animation:none}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.credit{font-family:'VT323','Press Start 2P',monospace;font-size:clamp(16px,2.6vmin,22px);color:#4a1520;letter-spacing:.04em;margin-top:.4em}

/* ===== game ===== */
.hud{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:6px;padding:7px 12px;background:rgba(70,18,34,.62);border:3px solid rgba(255,255,255,.35);border-radius:14px;pointer-events:none}
.mute{position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);z-index:60;width:46px;height:46px;border-radius:12px;background:rgba(70,18,34,.7);border:3px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.mute:active{transform:scale(.92)}
#catShadow{position:absolute;left:8%;width:84%;height:9%;bottom:-3%;background:rgba(120,40,45,.3);border-radius:50%}
#catInner{position:absolute;inset:0;will-change:transform}
#catHit{position:absolute;inset:0;z-index:2;cursor:pointer;touch-action:none}
#bubble{transform-origin:50% 100%}
#bubble.hide{opacity:0;transform:scale(.3);pointer-events:none}
#bubble.pop{animation:bpop .45s steps(5)}
#bubble.nope{animation:nope .5s steps(6)}
@keyframes bpop{0%{transform:scale(.2)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes nope{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#bubbleBob{animation:bbob 1.2s steps(2) infinite}
@keyframes bbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#foods{position:absolute;inset:0;z-index:10;pointer-events:none}
.food{position:absolute;cursor:grab;pointer-events:auto;touch-action:none;filter:drop-shadow(0 5px 0 rgba(130,60,50,.3));transition:transform .12s}
.food:hover{transform:translateY(-4px)}
.food.drag{cursor:grabbing;z-index:50;transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 12px 0 rgba(90,30,30,.25))}
.food.back{transition:left .32s cubic-bezier(.3,1.6,.5,1),top .32s cubic-bezier(.3,1.6,.5,1),transform .2s}
.food.eat{transition:left .28s ease-in,top .28s ease-in,transform .28s ease-in,opacity .28s;transform:scale(.2);opacity:0;pointer-events:none}
#foods .fhit{position:absolute;pointer-events:auto;touch-action:none;cursor:grab;border-radius:50%}
#fx,#fx3{position:absolute;inset:0;z-index:20;pointer-events:none}
.fxp{position:absolute;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated}
.blinkfx{animation:blk .3s steps(2) infinite}
@keyframes blk{0%{opacity:1}50%{opacity:.2}}

#beam{background:linear-gradient(165deg,rgba(255,246,205,.30),rgba(255,246,205,0) 85%);clip-path:polygon(0 0,62% 0,100% 100%,30% 100%);animation:beamp 7s ease-in-out infinite}
@keyframes beamp{0%,100%{opacity:.7}50%{opacity:1}}

/* ===== page 3 ===== */
#dim{position:absolute;inset:0;z-index:3;background:linear-gradient(rgba(10,12,58,.62),rgba(20,14,60,.6));opacity:0;transition:opacity 2.6s ease;pointer-events:none}
#dim.on{opacity:1}
#winNight3{opacity:0;transition:opacity 2.6s ease}
#winNight3.on{opacity:1}
#cat3Wrap{position:absolute;z-index:5;pointer-events:none}
#cat3sleep{display:none;transform-origin:50% 100%}
#cat3sleep.on{display:block;animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
#zzz{position:absolute;z-index:9;pointer-events:none}
#zzz span{position:absolute;left:0;top:0;font-family:'Press Start 2P',monospace;color:#fff;text-shadow:3px 3px 0 #3b2a7a,-2px -2px 0 #3b2a7a,2px -2px 0 #3b2a7a,-2px 2px 0 #3b2a7a;opacity:0}
#zzz.on span{animation:zz 3.6s steps(12) infinite}
#zzz.on span:nth-child(2){animation-delay:1.2s}
#zzz.on span:nth-child(3){animation-delay:2.4s}
@keyframes zz{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(70px,-110px) scale(1.4);opacity:0}}
#againWrap{position:absolute;left:0;right:0;z-index:12;display:flex;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;pointer-events:none}
#againWrap.show{opacity:1;transform:none;pointer-events:auto}