*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
:root{
  --pix:'Silkscreen','Courier New',monospace;
  --body:'Saira Extra Condensed','Arial Narrow',sans-serif;
  --red:#ff2424;
}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none}
body{
  background:radial-gradient(ellipse at center,#ff2222 0%,#ff4448 38%,#ff8791 100%);
  font-family:var(--body);color:#fff;
}
#app{position:fixed;inset:0;height:100dvh}
img{image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-drag:none}

.page{position:absolute;inset:0;display:none;overflow:hidden}
.page.active{display:flex}

/* ---------- pixel button ---------- */
.pixel-btn{
  --c:8px;
  font-family:var(--pix);font-weight:700;
  font-size:clamp(22px,6vmin,44px);letter-spacing:.06em;
  color:#a63b3b;text-shadow:3px 3px 0 #7c2323;
  padding:.55em 1.5em;border:0;cursor:pointer;
  background:#e8964c;
  box-shadow:inset 0 var(--c) 0 #d6e83a,inset 0 calc(var(--c)*-1) 0 #ff3b88,inset var(--c) 0 0 #e2c24a,inset calc(var(--c)*-1) 0 0 #f2655e;
  clip-path:polygon(0 var(--c),var(--c) var(--c),var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--c)),0 calc(100% - var(--c)));
  transition:transform .08s steps(2),filter .1s;
}
.pixel-btn:hover{filter:brightness(1.1)}
.pixel-btn:active{transform:translateY(4px)}
.pixel-btn:focus-visible{outline:4px solid #fff;outline-offset:4px}

/* ---------- page 1 ---------- */
#page1{flex-direction:column;align-items:center;justify-content:center;gap:2vmin;padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom))}
.title{
  position:absolute;top:max(8px,env(safe-area-inset-top));left:12px;
  font-family:var(--pix);font-weight:700;font-size:clamp(34px,11vw,120px);line-height:1;
  letter-spacing:.04em;color:#fff;text-shadow:5px 5px 0 #c4141f,9px 9px 0 rgba(120,0,10,.35);
}
.starring{position:absolute;left:16px;top:calc(max(8px,env(safe-area-inset-top)) + clamp(40px,12vw,132px));font-size:clamp(20px,4.5vmin,36px);font-weight:600;letter-spacing:.02em}
.cover-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,4vmin,40px);margin-top:clamp(40px,10vmin,90px)}
.cover-cat{width:clamp(170px,46vmin,360px);animation:bob 1s steps(2) infinite;filter:drop-shadow(0 12px 0 rgba(120,0,10,.25))}
.credit{font-size:clamp(14px,2.6vmin,20px);font-weight:600;opacity:.95}
@keyframes bob{0%{transform:translateY(0)}50%{transform:translateY(-3%)}100%{transform:translateY(0)}}

/* ---------- page 2 ---------- */
#pawLayer{position:absolute;inset:0}
#pawLayer img{position:absolute;opacity:0;animation:pop .18s steps(3) forwards}
@keyframes pop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.loading-text{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  font-family:var(--pix);font-weight:700;font-size:clamp(20px,5.5vmin,44px);color:#fff;white-space:nowrap;
  background:#ff2f78;padding:.5em .9em;box-shadow:0 0 0 6px #fff,8px 8px 0 6px #7c0a22;
}

/* ---------- page 3 ---------- */
#page3{touch-action:none}
.actor{position:absolute;left:0;top:0;will-change:transform;touch-action:none}
.actor img{display:block;width:100%;pointer-events:none}
.actor.cat{cursor:grab;z-index:5}
.actor.cat.drag{cursor:grabbing}
.actor.fish{z-index:2}
.actor.fish img{animation:bob 1.4s steps(2) infinite}
.actor.pest{z-index:8;cursor:pointer}
.actor.pest::after{content:"";position:absolute;inset:-14px}
.actor.pest.hit img{animation:hit .18s steps(3)}
@keyframes hit{0%{filter:brightness(3)}50%{filter:brightness(1.8) hue-rotate(40deg);translate:6px 0}100%{filter:none}}
.bar{position:absolute;top:-16px;left:8%;width:84%;height:10px;background:#2b0b0b;border:2px solid #fff}
.bar i{display:block;height:100%;background:#ffe14a;transition:width .1s steps(3)}
.badge{position:absolute;left:50%;top:-30px;transform:translateX(-50%);font-family:var(--pix);font-weight:700;font-size:clamp(14px,3vmin,22px);color:#fff;background:#222;padding:2px 8px;display:none;white-space:nowrap}
.actor.pest.alert .badge{display:block;animation:bob .3s steps(2) infinite;top:-52px;background:#ffe14a;color:#a31;}
.actor.cat.bothered .badge{display:block}
.actor.cat.bothered img{animation:shake .12s steps(2) infinite}
.actor.cat.eating img{animation:chomp .22s steps(2) infinite}
@keyframes shake{0%{translate:-4px 0}100%{translate:4px 0}}
@keyframes chomp{0%{translate:0 0}100%{translate:0 4px}}
.float-txt{position:absolute;z-index:20;font-family:var(--pix);font-weight:700;font-size:clamp(14px,3.2vmin,26px);color:#fff;text-shadow:3px 3px 0 #a3101c;pointer-events:none;white-space:nowrap;animation:floatUp .9s steps(8) forwards}
@keyframes floatUp{to{transform:translateY(-60px);opacity:0}}
.hud{
  position:absolute;z-index:15;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;font-family:var(--pix);font-weight:700;font-size:clamp(13px,3vmin,22px);
  background:#7c0a22;padding:8px 14px;box-shadow:0 0 0 4px #fff,6px 6px 0 4px rgba(90,0,15,.5);pointer-events:none;
}
.hud-bar{display:flex;gap:4px}
.hud-bar i{width:clamp(14px,3.4vmin,26px);height:clamp(14px,3.4vmin,26px);background:#3b0a14}
.hud-bar i.on{background:#d6e83a}
.hint{
  position:absolute;z-index:15;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  width:max-content;max-width:92vw;text-align:center;font-size:clamp(16px,3.4vmin,26px);font-weight:600;
  background:rgba(124,10,34,.75);padding:6px 14px;pointer-events:none;transition:opacity .6s;
}
.hint.off{opacity:0}

/* ---------- page 4 ---------- */
#page4{flex-direction:column}
.burst-wrap{position:absolute;right:4vw;top:12vh;width:clamp(240px,52vmax,620px);aspect-ratio:1.3;max-width:92vw}
.burst{position:absolute;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:16%;
  font-family:var(--body);font-weight:600;font-size:clamp(26px,6.4vmin,60px);line-height:1;color:#111}
.burst.shadow{background:#000;transform:translate(3%,5%)}
.burst-wrap{animation:burstIn .5s steps(5) both}
@keyframes burstIn{0%{scale:.1;rotate:-12deg}70%{scale:1.12}100%{scale:1;rotate:0deg}}
.slash{position:absolute;background:#e11d25;z-index:-1;clip-path:polygon(0 0,100% 0,60% 100%)}
.slash.s1{width:14%;height:36%;left:34%;top:-12%;transform:rotate(14deg)}
.slash.s2{width:12%;height:30%;right:14%;bottom:-14%;transform:rotate(-24deg) scaleY(-1)}
.walk-cat{position:absolute;left:6vw;bottom:14vh;width:clamp(120px,28vmin,260px);animation:bob .5s steps(2) infinite}
#page4.run .walk-cat{animation:bob .35s steps(2) infinite,walkOut 2.2s linear 1.8s forwards}
@keyframes walkOut{to{left:112vw}}

/* ---------- page 5 ---------- */
#page5{flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vmin,30px);padding:16px}
.float-cat{width:clamp(200px,52vmin,420px);filter:drop-shadow(0 14px 0 rgba(120,0,10,.2))}
#page5.run .float-cat{animation:fall 2.4s cubic-bezier(.2,.7,.3,1) both,drift 3s ease-in-out 2.4s infinite}
@keyframes fall{from{transform:translateY(-110vh) rotate(160deg)}to{transform:translateY(0) rotate(0deg)}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-3vmin) rotate(5deg)}}
.ending-text{font-size:clamp(24px,6vmin,48px);font-weight:600;text-align:center;opacity:0}
#page5.run .ending-text,#page5.run #homeBtn{animation:fade .6s steps(6) 2.3s forwards}
#homeBtn{opacity:0}
@keyframes fade{to{opacity:1}}

/* landscape phones: tighter */
@media (max-height:480px){
  .title{font-size:clamp(28px,9vh,60px)}
  .starring{top:calc(max(8px,env(safe-area-inset-top)) + 11vh)}
  .cover-wrap{flex-direction:row;margin-top:6vh;gap:6vw}
  .cover-cat{width:34vh}
}
@media (prefers-reduced-motion:reduce){
  .cover-cat,.actor.fish img{animation:none}
}


.page{z-index:1}
.page.active{animation:pageIn .35s steps(5)}
@keyframes pageIn{from{opacity:0;scale:1.06}to{opacity:1;scale:1}}
.rays{position:fixed;inset:-50%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.16) 0 7deg,rgba(255,255,255,0) 7deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);mask-image:radial-gradient(circle,#000 0,transparent 55%);
  animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.star{position:absolute;bottom:-40px;animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-115vh) rotate(200deg)}}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 55%,rgba(90,0,15,.45) 100%)}
.mute{position:fixed;z-index:60;top:max(10px,env(safe-area-inset-top));right:10px;font-family:var(--pix);font-weight:700;
  font-size:clamp(11px,2.4vmin,16px);color:#fff;background:#7c0a22;border:0;padding:8px 10px;cursor:pointer;box-shadow:0 0 0 3px #fff}
.mute:active{transform:translateY(2px)}

/* cover */
.title{filter:drop-shadow(0 0 16px rgba(255,255,255,.55));z-index:3}
.title span{display:inline-block;animation:wave 1.4s steps(4) infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes wave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-.14em)}}
.starring{z-index:3;text-shadow:2px 2px 0 #a3101c}
.cat-stage{position:relative;display:grid;place-items:center;width:clamp(170px,46vmin,360px)}
.cat-stage .cover-cat{position:relative;z-index:2;width:100%;filter:drop-shadow(0 0 0 transparent)}
.aura{position:absolute;width:170%;aspect-ratio:1;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(255,244,210,.9) 0,rgba(255,200,120,.4) 32%,transparent 66%);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.92);opacity:.8}50%{transform:scale(1.08);opacity:1}}
.cat-shadow{position:absolute;bottom:-4%;width:62%;height:6%;border-radius:50%;background:rgba(90,0,15,.4);z-index:1;animation:shadow 1s steps(2) infinite}
@keyframes shadow{50%{transform:scaleX(.9);opacity:.7}}
#startBtn{z-index:3;animation:btn 1s steps(2) infinite}
@keyframes btn{50%{transform:scale(1.07)}}
#startBtn:active{animation:none;transform:translateY(4px)}

/* game */
.cloud{position:absolute;z-index:0;left:0;animation:cloud linear infinite;pointer-events:none}
@keyframes cloud{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.floor{position:absolute;left:0;right:0;bottom:0;height:max(64px,12%);z-index:1;pointer-events:none;
  background:linear-gradient(#8cf05f 0 8px,#45b53f 8px 18px,#8a5a3a 18px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 20px,transparent 20px 40px);
  background-blend-mode:normal;box-shadow:inset 0 -40px 0 rgba(60,25,10,.35)}
.actor img{filter:drop-shadow(0 6px 0 rgba(90,0,15,.3))}
.actor.fish img{filter:drop-shadow(0 0 8px rgba(255,255,255,.95)) drop-shadow(0 0 3px #ffe14a);animation:none}
.actor.cat img{animation:bob .8s steps(2) infinite}
.spark{position:absolute;width:9px;height:9px;z-index:19;pointer-events:none;animation:fly .5s steps(6) forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy));opacity:0}}
#page3.rumble{animation:rumble .18s steps(4)}
@keyframes rumble{25%{translate:-6px 3px}50%{translate:6px -3px}75%{translate:-3px -2px}}
.float-txt{font-size:clamp(18px,4vmin,34px);text-shadow:3px 3px 0 #a3101c,-2px -2px 0 #4a0010}

/* ending */
#confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-24px;animation:conf linear infinite}
@keyframes conf{to{transform:translateY(112vh) rotate(540deg)}}
.float-cat{position:relative;z-index:2}

/* =============== manya gelud =============== */
.actor.atk{animation:lunge .24s steps(4)}
@keyframes lunge{40%{translate:calc(var(--dir) * 30px) -8px}}
.brawl{position:absolute;left:0;top:0;width:clamp(70px,16vmin,130px);z-index:9;pointer-events:none;animation:brawl .3s steps(3) infinite}
.brawl img{display:block;width:100%;image-rendering:pixelated;filter:drop-shadow(0 4px 0 rgba(90,0,15,.35))}
@keyframes brawl{0%{rotate:-9deg;scale:1}50%{rotate:9deg;scale:1.14}100%{rotate:-9deg;scale:1}}
.scratch{position:absolute;width:64px;height:64px;z-index:21;pointer-events:none;
  background:repeating-linear-gradient(120deg,transparent 0 9px,#fff 9px 15px,transparent 15px 24px);
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);animation:scr .3s steps(4) forwards}
@keyframes scr{0%{scale:.3;opacity:1}100%{scale:1.5;opacity:0}}


.loading-text{top:auto;bottom:max(36px,10%);transform:translateX(-50%)}

/* cover */
.orbit{position:absolute;inset:-14%;z-index:3;pointer-events:none;animation:spin 12s linear infinite}
.orbit img{position:absolute;width:15%;animation:spin 12s linear infinite reverse}
.orbit img:nth-child(1){left:42%;top:0}
.orbit img:nth-child(2){right:0;top:42%}
.orbit img:nth-child(3){left:42%;bottom:0}
.orbit img:nth-child(4){left:0;top:42%}
.best{font-family:var(--pix);font-size:clamp(11px,2.4vmin,16px);color:#fff;background:rgba(124,10,34,.75);padding:5px 12px;box-shadow:0 0 0 3px #fff}
/* loading */
.tip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(max(36px,10%) + 78px);z-index:3;width:90%;text-align:center;
  font-size:clamp(18px,3.8vmin,30px);font-weight:600;text-shadow:3px 3px 0 #a3101c}
/* game */
.hills{position:absolute;left:0;right:0;bottom:max(64px,12%);height:24%;z-index:0;pointer-events:none}
.hills::before,.hills::after{content:"";position:absolute;left:0;right:0;bottom:0}
.hills::before{height:100%;background:rgba(150,10,30,.38);
  clip-path:polygon(0 100%,0 62%,6% 62%,6% 46%,14% 46%,14% 30%,22% 30%,22% 46%,30% 46%,30% 62%,40% 62%,40% 74%,50% 74%,50% 54%,58% 54%,58% 38%,68% 38%,68% 54%,76% 54%,76% 66%,86% 66%,86% 48%,94% 48%,94% 58%,100% 58%,100% 100%)}
.hills::after{height:62%;background:rgba(110,6,24,.5);
  clip-path:polygon(0 100%,0 50%,10% 50%,10% 36%,20% 36%,20% 56%,34% 56%,34% 70%,48% 70%,48% 44%,60% 44%,60% 30%,70% 30%,70% 52%,82% 52%,82% 38%,92% 38%,92% 60%,100% 60%,100% 100%)}
.actor.fish.gold img{filter:drop-shadow(0 0 10px #ffe14a) drop-shadow(0 0 4px #fff);animation:goldp .5s steps(2) infinite}
@keyframes goldp{50%{filter:drop-shadow(0 0 18px #fff27a) drop-shadow(0 0 6px #ffd23a)}}
.hud{gap:10px;padding:7px 12px}
.hud-score{margin-left:4px}
.hud-score b{color:#ffe14a}
@media (max-width:520px){.hud-label{display:none}.hud-bar i{width:11px;height:11px}.hud{font-size:12px;gap:7px}}
.dust{position:absolute;width:12px;height:12px;background:#fff;opacity:.85;z-index:4;pointer-events:none;animation:puff .45s steps(5) forwards}
@keyframes puff{to{transform:translateY(-16px) scale(.2);opacity:0}}
.flash{position:absolute;inset:0;background:#fff;z-index:30;pointer-events:none;animation:flasho .5s steps(5) forwards}
@keyframes flasho{from{opacity:.9}to{opacity:0}}
/* ending */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,3vmin,22px);opacity:0;font-family:var(--pix)}
.stats div{background:#7c0a22;box-shadow:0 0 0 3px #fff;padding:8px 14px;text-align:center;display:flex;flex-direction:column;gap:4px;min-width:clamp(72px,18vmin,120px)}
.stats span{font-size:clamp(10px,2.2vmin,14px);color:#ffd2d8}
.stats b{font-size:clamp(18px,4.4vmin,32px);color:#ffe14a}
.newrec{width:100%;text-align:center;color:#ffe14a;font-size:clamp(14px,3vmin,22px);text-shadow:3px 3px 0 #a3101c;animation:bob .5s steps(2) infinite}
#page5.run .stats{animation:fade .6s steps(6) 2.6s forwards}
@media (max-height:540px){.float-cat{width:32vh}#page5{gap:8px}}