@font-face{
  font-family:'Zpix';
  src:url('../assets/zpix.woff2') format('woff2');
  font-display:swap;
}
:root{
  /* 统一色板 */
  --pink:#ff5e9e; --pink-deep:#c33a74; --pink-soft:#ff96c6;
  --ink:#2a0f28; --cream:#fff4fa; --gold:#ffd24a;
  /* 统一的「像素硬阴影」标题质感：硬边偏移 + 收敛的柔光，不再发糊 */
  --tshadow-h1:0 2px 0 var(--pink-deep),0 4px 0 rgba(42,15,40,.55),0 0 14px rgba(255,140,190,.4);
  --tshadow-h2:0 2px 0 var(--pink-deep),0 3px 0 rgba(42,15,40,.5);
  /* 浅色小字压在画面上时的可读底衬 */
  --plate:rgba(26,10,24,.5);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:#10060f;overflow:hidden;
  touch-action:none;overscroll-behavior:none;position:fixed;width:100%;
  -webkit-user-select:none;}
canvas#game,#frame{touch-action:none;}
body{
  font-family:'Zpix','Segoe UI',sans-serif;
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;touch-action:none;
}
#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
#frame{
  position:relative;width:100%;height:100%;max-width:900px;max-height:506px;
  background:#1a0a18;overflow:hidden;
  box-shadow:0 0 60px rgba(255,120,180,.35);
}
@media(min-aspect-ratio:900/506){
  #frame{width:auto;aspect-ratio:900/506;}
}
canvas#game{display:block;width:100%;height:100%;}

/* ---------- HUD ---------- */
#hud{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;pointer-events:none;
}
#hud.hide{display:none;}
#collect{
  font-size:14px;color:#fff;letter-spacing:1px;
  background:#ff78aa;border:0;border-radius:0;padding:5px 14px;
  box-shadow:0 0 0 3px #fff,0 0 0 6px #c33a74,0 6px 0 rgba(140,42,85,.7);
  image-rendering:pixelated;transform-origin:left center;
}
#collect.bump{animation:hudbump .42s steps(8,end);}
@keyframes hudbump{0%{transform:scale(1);}30%{transform:scale(1.2);}60%{transform:scale(.96);}100%{transform:scale(1);}}
#collect b{display:inline-block;}
#collect.bump b{animation:cntflash .42s ease;}
@keyframes cntflash{0%,100%{color:#fff;}40%{color:#fff2a8;text-shadow:0 0 8px #ffe06a;}}
#mute{
  pointer-events:auto;width:34px;height:34px;border-radius:0;
  border:0;background:#ff78aa;color:#fff;
  font-size:15px;cursor:pointer;image-rendering:pixelated;
  box-shadow:0 0 0 3px #fff,0 0 0 6px #c33a74,0 5px 0 #8e2a55;
  position:relative;
}
#mute::before{content:'';position:absolute;left:5px;top:5px;width:7px;height:7px;background:rgba(255,255,255,.85);}
#mute.off{opacity:.5;}

/* ---------- 文案横幅 ---------- */
#banner{
  position:absolute;left:0;right:0;top:44px;z-index:25;
  display:flex;justify-content:center;pointer-events:none;
  opacity:0;transform:scale(.7) translateY(-12px);
  transition:opacity .3s ease,transform .42s cubic-bezier(.2,1.5,.4,1);
}
#banner.show{opacity:1;transform:scale(1) translateY(0);}
#bannerInner{
  max-width:74%;margin:0 16px;
  font-size:15px;line-height:1.6;color:#7a2a52;text-align:center;
  background:#fff;
  border:0;border-radius:8px;
  padding:10px 18px;
  box-shadow:
    0 0 0 3px #ff7fb0, 0 0 0 6px #fff, 0 0 0 9px #ffb3d6,
    0 9px 0 rgba(180,60,120,.45), 0 14px 22px rgba(180,60,120,.25);
  animation:bannerfloat 3s ease-in-out infinite;
  position:relative;
}
@keyframes bannerfloat{0%,100%{transform:translateY(-2px);}50%{transform:translateY(2px);}}
#bannerInner::before{content:'';position:absolute;inset:-9px;border-radius:11px;
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 22px rgba(255,170,210,.8);
  opacity:0;pointer-events:none;}
#bannerInner.ding::before{animation:bannerding .5s ease-out;}
@keyframes bannerding{0%{opacity:.95;transform:scale(.88);}100%{opacity:0;transform:scale(1.18);}}

/* ---------- 右下：像素糖果 跳 + 动作键 ---------- */
#btnJ{
  position:absolute;right:30px;bottom:34px;z-index:18;
  width:84px;height:84px;border-radius:0;border:none;cursor:pointer;
  font-family:'Zpix',sans-serif;font-size:22px;letter-spacing:2px;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#ff6fa8;image-rendering:pixelated;opacity:.82;
  box-shadow:
    0 0 0 4px #fff, 0 0 0 8px #c33a74,
    inset 0 0 0 4px #ff96c6,
    0 9px 0 #8e2a55, 0 14px 14px rgba(140,30,70,.4);
  text-shadow:2px 2px 0 rgba(140,30,70,.6);
  touch-action:none;transition:transform .05s,box-shadow .05s,opacity .15s;
}
#btnJ::before{content:'';position:absolute;left:13px;top:13px;width:13px;height:13px;background:rgba(255,255,255,.85);}
#btnJ.hide{display:none;}
#btnJ:active{transform:translateY(7px);opacity:1;
  box-shadow:0 0 0 4px #fff,0 0 0 8px #c33a74,inset 0 0 0 4px #ff96c6,0 2px 0 #8e2a55,0 4px 8px rgba(140,30,70,.4);}
#btnA{
  position:absolute;right:142px;bottom:40px;z-index:18;
  width:80px;height:80px;border-radius:0;border:none;cursor:pointer;
  font-family:'Zpix',sans-serif;font-size:21px;color:#fff;
  background:#6fb6ff;image-rendering:pixelated;opacity:.82;
  box-shadow:
    0 0 0 4px #fff, 0 0 0 8px #3a5fb0,
    inset 0 0 0 4px #9cd0ff,
    0 8px 0 #2a4488, 0 12px 12px rgba(30,60,140,.4);
  text-shadow:2px 2px 0 rgba(30,50,120,.6);
  touch-action:none;transition:transform .05s,box-shadow .05s,opacity .15s;
}
#btnA::before{content:'';position:absolute;left:11px;top:11px;width:11px;height:11px;background:rgba(255,255,255,.82);}
#btnA.hide{display:none;}
#btnA:active{transform:translateY(6px);opacity:1;
  box-shadow:0 0 0 4px #fff,0 0 0 8px #3a5fb0,inset 0 0 0 4px #9cd0ff,0 2px 0 #2a4488,0 4px 8px rgba(30,60,140,.4);}
#btnA.hot{
  color:#7a4a00;opacity:1;background:#ffd35e;
  box-shadow:
    0 0 0 4px #fff, 0 0 0 8px #c89020,
    inset 0 0 0 4px #ffe79a,
    0 8px 0 #8e6410, 0 12px 12px rgba(180,120,20,.45);
  text-shadow:2px 2px 0 rgba(150,100,10,.5);
  animation:actpulse .6s steps(2,end) infinite;}
#btnA.hot::before{background:rgba(255,255,255,.92);}
@keyframes actpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}

/* ---------- 覆盖层 ---------- */
#overlay{
  position:absolute;inset:0;z-index:30;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:18px;
}
#overlay.show{display:flex;}
/* 求婚结局：文案+按钮沉到画面下部，给上方「刀刀抱猫+月光」留白，底部加暗角让字清晰 */
#overlay.winwrap{justify-content:flex-end;padding-bottom:30px;}
#overlay.winwrap::before{content:'';position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;
  background:linear-gradient(to bottom,rgba(26,10,24,0),rgba(26,10,24,.45) 42%,rgba(26,10,24,.8));}
#overlay.winwrap .bigline{max-width:74%;margin-bottom:2px;}
#overlay.winwrap .yesbtn{margin-top:14px;}
#overlay .title{font-size:32px;color:#fff;letter-spacing:3px;line-height:1.25;
  text-shadow:var(--tshadow-h1);}
/* 标题页：猫立绘 + 像素心 + 漂浮装饰 + 整页像素描边 frame */
#overlay.titlewrap{overflow:hidden;justify-content:center;}
#overlay.titlewrap::after{content:'';position:absolute;inset:13px;pointer-events:none;z-index:8;
  border:3px solid #ffd24a;image-rendering:pixelated;
  box-shadow:inset 0 0 0 3px #ff5e9e, 0 0 0 3px #ff5e9e,
    inset 0 0 0 9px rgba(255,217,236,.16), 0 0 22px rgba(255,140,190,.35);}
.titlecat{width:96px;height:96px;image-rendering:pixelated;margin-bottom:6px;
  filter:drop-shadow(0 6px 0 rgba(150,40,90,.35)) drop-shadow(0 0 18px rgba(255,150,200,.55));
  animation:catbob 1.8s ease-in-out infinite;}
@keyframes catbob{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.04);}}
#overlay .title .hsp{display:inline-block;width:30px;height:auto;vertical-align:-5px;margin-left:4px;
  image-rendering:pixelated;
  filter:drop-shadow(0 2px 0 #c33a74) drop-shadow(0 0 12px rgba(255,140,190,.9));
  animation:heartbeat 1s ease-in-out infinite;}
@keyframes heartbeat{0%,100%{transform:scale(1);}30%{transform:scale(1.25);}45%{transform:scale(1.05);}}
#overlay .sub{margin-top:10px;font-size:13px;color:var(--cream);letter-spacing:2px;line-height:1.7;
  background:var(--plate);padding:5px 14px;border-radius:6px;box-shadow:0 0 0 2px rgba(255,127,176,.35);}
#overlay .scenecard{font-size:24px;color:#fff;letter-spacing:2px;
  text-shadow:var(--tshadow-h2);
  animation:cardin .55s cubic-bezier(.2,1.5,.4,1) both,bannerfloat 3s ease-in-out .55s infinite;}
#overlay .scenecard small{display:block;margin-top:8px;font-size:13px;color:#ffd9ec;letter-spacing:1px;
  animation:cardsub .5s ease .2s both;}
@keyframes cardin{0%{opacity:0;transform:scale(.6) translateY(-16px);}60%{opacity:1;}100%{opacity:1;transform:scale(1) translateY(0);}}
@keyframes cardsub{0%{opacity:0;transform:translateY(8px);}100%{opacity:.95;transform:translateY(0);}}
#overlay .bigline{font-size:17px;color:#fff;line-height:1.8;margin:6px 0;
  text-shadow:0 2px 0 rgba(150,40,90,.5);max-width:80%;
  animation:biglinein .6s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes biglinein{0%{opacity:0;transform:scale(.8) translateY(10px);}100%{opacity:1;transform:scale(1) translateY(0);}}
#overlay .num{font-size:36px;color:#fff;letter-spacing:4px;
  text-shadow:var(--tshadow-h1);}
#overlay .num.pulse{display:inline-block;animation:numpulse 1s ease-in-out infinite;}
@keyframes numpulse{0%,100%{transform:scale(1);text-shadow:0 3px 0 #ff5e9e,0 0 18px rgba(255,140,190,.7);}
  50%{transform:scale(1.14);text-shadow:0 3px 0 #ff5e9e,0 0 34px rgba(255,180,210,1);}}
/* 结局爱心烟花（DOM 飘落粒子） */
#overlay.ending{overflow:hidden;}
.fw{position:absolute;top:-7%;z-index:5;pointer-events:none;
  text-shadow:0 0 8px currentColor;animation-name:fwfall;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes fwfall{
  0%{transform:translateY(0) rotate(0);opacity:0;}
  12%{opacity:1;}
  100%{transform:translateY(560px) rotate(360deg);opacity:0;}}
.startbtn,.againbtn,.yesbtn{
  margin-top:18px;font-family:'Zpix',sans-serif;cursor:pointer;
  font-size:19px;letter-spacing:2px;color:#fff;
  background:#ff5e9e;border:0;
  border-radius:0;padding:13px 38px;image-rendering:pixelated;
  box-shadow:0 0 0 4px #fff,0 0 0 8px #c33a74,0 9px 0 #8e2a55,0 0 26px rgba(255,140,190,.5);
  text-shadow:2px 2px 0 rgba(140,30,70,.5);
  animation:startblink 1.1s steps(2,end) infinite;
}
.startbtn:active,.againbtn:active,.yesbtn:active{transform:translateY(5px);
  box-shadow:0 0 0 4px #fff,0 0 0 8px #c33a74,0 4px 0 #8e2a55;}
@keyframes startblink{0%,100%{transform:scale(1);}50%{transform:scale(1.04);}}
.againbtn{font-size:15px;background:#9a5a86;box-shadow:0 0 0 4px #fff,0 0 0 8px #5a3450,0 7px 0 #3a2030;animation:none;}
.tip{margin-top:14px;font-size:12px;color:var(--cream);letter-spacing:1px;line-height:1.7;
  background:var(--plate);padding:8px 16px;border-radius:8px;box-shadow:0 0 0 2px rgba(255,127,176,.3);}

/* ---------- 情书（完整真心话） ---------- */
.letterwrap{width:84%;max-width:560px;max-height:84%;display:flex;flex-direction:column;align-items:center;}
.lettertitle{font-size:20px;color:#fff;letter-spacing:2px;margin-bottom:10px;text-shadow:0 2px 0 #ff5e9e;}
.letterbody{
  width:100%;max-height:300px;overflow-y:auto;text-align:left;
  font-size:15px;line-height:1.95;color:#7a2a52;
  background:rgba(255,255,255,.96);border:3px solid #ff7fb0;border-radius:14px;
  padding:16px 18px;box-shadow:0 6px 0 rgba(255,150,190,.5);white-space:pre-wrap;
}
/* ---------- DVD 回忆 ---------- */
.tv{width:78%;max-width:480px;}
.tvscreen{
  font-size:18px;line-height:1.8;color:#dff;text-align:center;
  background:linear-gradient(160deg,#3a2b6e,#6a4f9a);border:6px solid #c9b3ff;border-radius:14px;
  padding:34px 20px;min-height:140px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 26px rgba(180,150,255,.6),inset 0 0 30px rgba(0,0,0,.3);
  text-shadow:0 0 8px rgba(180,220,255,.8);
}
.tvhint{margin-top:12px;text-align:center;font-size:12px;color:#ffd9ec;animation:blink 1.2s steps(1) infinite;}
@keyframes blink{50%{opacity:.3;}}

/* ---------- 加载 ---------- */
#loading{position:absolute;inset:0;z-index:40;
  background:radial-gradient(120% 90% at 50% 35%,#5a2350,#1a0a18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
#loading.hide{display:none;}
.lheart{font-size:46px;color:#ff7fb0;text-shadow:0 0 18px rgba(255,140,190,.9),0 3px 0 #c44;
  animation:lpulse 1s ease-in-out infinite;}
@keyframes lpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}
.ltitle{font-size:24px;color:#fff;letter-spacing:3px;margin-bottom:4px;
  text-shadow:0 2px 0 #ff5e9e,0 0 18px rgba(255,140,190,.7);}
.lbar{width:200px;height:12px;border:2px solid #fff;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.12);
  box-shadow:0 0 14px rgba(255,140,190,.4);}
.lbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff8fc0,#ffd24a);transition:width .2s;}
.ltxt{font-size:13px;color:#ffd9ec;letter-spacing:1px;}

/* ---------- 竖屏旋转提示 ---------- */
#rotate{
  position:fixed;inset:0;z-index:90;background:#1a0a18;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  color:#ffd9ec;font-size:16px;letter-spacing:1px;
}
.ricon{font-size:54px;animation:rot 1.6s ease-in-out infinite;}
@keyframes rot{0%,40%{transform:rotate(0);}60%,100%{transform:rotate(-90deg);}}
@media(max-aspect-ratio:1/1){
  #rotate{display:flex;}
}