@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;}
html,body{width:100%;height:100%;background:#07070f;overflow:hidden;font-family:'Press Start 2P',monospace;}
#wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;gap:10px;padding:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom));}
#stage{display:flex;flex-direction:column;align-items:center;gap:8px;}
#gameContainer{position:relative;background:#000;border:3px solid #fff;border-radius:6px;box-shadow:0 0 36px #ff6b9d55,0 8px 30px #000;overflow:hidden;}
canvas{display:block;image-rendering:pixelated;}

#ui{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:7px 10px;pointer-events:none;z-index:10;}
.uiGroup{display:flex;gap:6px;}
.uib{background:rgba(0,0,0,.78);border:2px solid #fff;border-radius:4px;padding:5px 8px;font-size:7px;color:#fff;line-height:1.9;}
.uib b{color:#FFD700;}
#muteBtn{pointer-events:auto;cursor:pointer;font-size:11px;padding:5px 7px;}

#dlg{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:92%;max-width:700px;
  background:linear-gradient(180deg,rgba(22,12,32,.97),rgba(6,3,14,.97));
  border:3px solid #fff;border-radius:8px;padding:12px 16px;font-size:10px;color:#fff;line-height:2;
  z-index:20;display:none;text-align:center;box-shadow:0 0 24px #000,inset 0 0 18px rgba(255,107,157,.08);}
#dlg.pop{animation:dlgPop .22s ease-out;}
#dlgSpk{color:#FFD700;margin-bottom:6px;font-size:8px;text-shadow:1px 1px #000;}
#dlgTxt{text-shadow:1px 1px #000;min-height:32px;}
#dlgHint{color:#aab;font-size:6px;margin-top:8px;animation:bob 1s ease-in-out infinite;}

#lvlTitle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:17px;color:#FFD700;
  text-shadow:3px 3px #b8860b,0 0 18px #ffcc00aa;text-align:center;line-height:2;z-index:50;pointer-events:none;display:none;}
#lvlTitle .sub{font-size:9px;color:#fff;text-shadow:2px 2px #000;}

.screen{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 32%,#241540,#05030c 75%);overflow:hidden;}
.screen.popin{animation:screenFade .45s ease;}
.screen.fadeOut{animation:fadeOutScale .26s ease forwards;}
#titleScreen h1{font-size:19px;color:#FFD700;text-shadow:4px 4px #b8860b,0 0 22px #ffcc0088;margin-bottom:14px;text-align:center;line-height:1.8;z-index:2;}
#titleScreen .couple{font-size:34px;margin-bottom:14px;animation:bob 2s ease-in-out infinite;z-index:2;
  filter:drop-shadow(0 0 20px rgba(255,209,102,.55));}
#titleScreen h2{font-size:8px;color:#ff6b9d;margin-bottom:20px;text-align:center;line-height:2.3;text-shadow:2px 2px #000;z-index:2;}
.blink{font-size:9px;color:#fff;animation:blink 1s step-end infinite;z-index:2;margin-bottom:16px;}
.skiplink{font-size:7px;color:#9be8f4;text-decoration:underline;cursor:pointer;z-index:2;padding:6px;}

#endScreen{display:none;}
#endScreen h1{font-size:13px;color:#ff6b9d;text-shadow:3px 3px #c0392b;margin-bottom:10px;text-align:center;line-height:2;z-index:2;}
.edate{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:800;letter-spacing:1px;
  font-size:30px;color:#FFD700;text-shadow:3px 3px #b8860b,0 0 18px #ffcc0088;margin:12px 0 6px;text-align:center;animation:pulse 1.5s ease-in-out infinite;z-index:2;}
.eloc{font-family:-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:600;
  font-size:16px;color:#ff6b9d;margin-bottom:10px;text-align:center;line-height:1.6;text-shadow:1px 1px #000;z-index:2;}
#countdown{font-size:9px;color:#9be8f4;margin-bottom:18px;text-shadow:1px 1px #000;z-index:2;}
.ehearts{font-size:24px;animation:hb .8s ease-in-out infinite;margin-bottom:12px;z-index:2;}
#calBtn{display:inline-block;font-family:'Press Start 2P',monospace;font-size:8px;color:#07070f;background:#FFD700;
  border:3px solid #fff;border-radius:6px;padding:12px 16px;text-decoration:none;margin-bottom:14px;z-index:2;
  box-shadow:0 4px 0 #b8860b;transition:transform .1s;}
#calBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #b8860b;}
#siteBtn{display:inline-block;font-family:'Press Start 2P',monospace;font-size:8px;color:#fff;background:#1a5f7a;
  border:3px solid #fff;border-radius:6px;padding:12px 16px;text-decoration:none;margin-bottom:14px;z-index:2;
  box-shadow:0 4px 0 #0d3d52;transition:transform .1s;}
#siteBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #0d3d52;}
.erestart{font-size:7px;color:#aab;cursor:pointer;animation:blink 1s step-end infinite;margin-top:6px;z-index:2;}

.heartsRain{position:absolute;inset:0;pointer-events:none;z-index:1;}
.heartsRain span{position:absolute;top:-10%;font-size:14px;animation:fall linear infinite;opacity:.7;}
.heartsRain span:nth-child(1){left:6%;animation-duration:6s;animation-delay:0s;}
.heartsRain span:nth-child(2){left:16%;animation-duration:8s;animation-delay:1.5s;font-size:10px;}
.heartsRain span:nth-child(3){left:27%;animation-duration:7s;animation-delay:3s;}
.heartsRain span:nth-child(4){left:38%;animation-duration:9s;animation-delay:.7s;font-size:18px;}
.heartsRain span:nth-child(5){left:49%;animation-duration:6.5s;animation-delay:2.2s;}
.heartsRain span:nth-child(6){left:60%;animation-duration:8.5s;animation-delay:4s;font-size:11px;}
.heartsRain span:nth-child(7){left:70%;animation-duration:7.5s;animation-delay:1s;}
.heartsRain span:nth-child(8){left:80%;animation-duration:6.8s;animation-delay:3.6s;font-size:16px;}
.heartsRain span:nth-child(9){left:90%;animation-duration:9.5s;animation-delay:.3s;}
.heartsRain span:nth-child(10){left:33%;animation-duration:10s;animation-delay:5s;font-size:9px;}

#mpad{display:none;width:100%;max-width:520px;justify-content:space-between;align-items:center;padding:0 6px;}
.dpad{display:flex;gap:10px;}
.pbtn{width:58px;height:58px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));
  border:2px solid rgba(255,255,255,.45);display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;cursor:pointer;user-select:none;-webkit-user-select:none;box-shadow:0 3px 0 rgba(0,0,0,.4);}
.pbtn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4);background:rgba(255,255,255,.35);}
#jumpBtn{width:72px;height:72px;border-radius:50%;background:linear-gradient(180deg,rgba(255,107,157,.42),rgba(255,107,157,.18));border:2px solid rgba(255,140,180,.7);font-size:22px;}
#deskHint{font-size:6px;color:#667;text-align:center;line-height:2;}
#deskHint b{color:#FFD700;}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes hb{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fall{0%{transform:translateY(0) rotate(0deg)}100%{transform:translateY(120vh) rotate(360deg)}}
@keyframes dlgPop{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.96);}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}
@keyframes screenFade{0%{opacity:0;}100%{opacity:1;}}
@keyframes fadeOutScale{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.04);}}