body{margin:0;padding:0;background:rgb(0, 0, 0);font-size:12px;overflow:auto}
#mainDiv{width:100%;height:100%}
#loveHeart{float:left;width:670px;height:625px}
#garden{width:100%;height:100%}
#elapseClock{text-align:right;font-size:18px;margin-top:10px;margin-bottom:10px}
#words{font-family:"sans-serif";width:500px;font-size:24px;color:#ffffff}
#messages{display:none;text-align: center;font-size: 30px}
#elapseClock .digit{font-family:"digit";font-size:40px;text-align: center;}
#loveu{padding:5px;font-size:22px;margin-top:80px;margin-right:120px;text-align:right;display:none}
#loveu .signature{margin-top:10px;font-size:20px;font-style:italic}
#clickSound{display:none}
#code{float:left;width:440px;height:400px;color:#ffffff;font-family:"Consolas","Monaco","Bitstream Vera Sans Mono","Courier New","sans-serif";font-size:12px}
#code .string{color:#2a36ff}
#code .keyword{color:#7f0055;font-weight:bold}
#code .placeholder{margin-left:15px}#code .space{margin-left:7px}
#code .comments{color:#3f7f5f}
#copyright{margin-top:10px;text-align:center;width:100%;color:#666}
#errorMsg{width:100%;text-align:center;font-size:24px;position:absolute;top:100px;left:0}
#copyright a{color:#666}
#icon{font-size: 48px;color: red;margin: 50 px; align-content: center;}
#heartspan{align-content: center;text-align: center;margin: 20px;}

/* ===== SORRY OVERLAY ===== */
#sorryOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.96);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity 0.8s ease}
#overlayInner{text-align:center;padding:20px 30px}
#heartAnimWrap{position:relative;display:inline-block;width:120px;height:120px;line-height:120px}
#brkHeart{font-size:90px;display:inline-block;animation:brkShake 0.4s ease-in-out 0.5s 4,brkFadeOut 0.6s ease 2.2s forwards}
#healHeart{font-size:90px;position:absolute;top:0;left:0;opacity:0;animation:healIn 1s ease 2.8s forwards,healPulse 2s ease 3.8s infinite}
#overlayTitle{color:#fff;font-size:28px;font-family:Georgia,serif;margin:18px 0 8px;animation:fadeInUp 1s ease 1s both}
#overlaySubtitle{color:#aaa;font-size:16px;margin:0;line-height:1.6;animation:fadeInUp 1s ease 1.5s both}
@keyframes brkShake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-10px) rotate(-10deg)}75%{transform:translateX(10px) rotate(10deg)}}
@keyframes brkFadeOut{to{opacity:0;transform:scale(0.4)}}
@keyframes healIn{0%{opacity:0;transform:scale(0.2);filter:drop-shadow(0 0 0px #ff6b9d)}70%{opacity:1;transform:scale(1.3);filter:drop-shadow(0 0 30px #ff6b9d)}100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 14px #ff6b9d)}}
@keyframes healPulse{0%,100%{filter:drop-shadow(0 0 10px #ff6b9d)}50%{filter:drop-shadow(0 0 28px #ff3366)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes yesGrow{0%{transform:scale(1);font-size:18px}100%{transform:scale(1.3);font-size:28px}}

/* ===== MUSIC TOGGLE ===== */
#musicToggle{position:fixed;top:14px;right:14px;z-index:10000;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);color:#fff;padding:8px 16px;border-radius:25px;cursor:pointer;font-size:14px;backdrop-filter:blur(4px);transition:background 0.3s,transform 0.2s;font-family:"sans-serif"}
#musicToggle:hover{background:rgba(255,80,130,0.35);transform:scale(1.06)}

/* ===== FORGIVE SECTION ===== */
#forgiveSection{width:100%;text-align:center;padding:55px 20px 80px;clear:both;box-sizing:border-box}
#fHeart{font-size:72px;display:inline-block;animation:fPulse 1.4s ease-in-out infinite}
#fHeart.heart-healed{animation:healIn 1s ease forwards,healPulse 2s ease 1s infinite}
@keyframes fPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
#forgiveQuestion{color:#fff;font-size:26px;font-family:Georgia,serif;margin:16px 0 28px}
#forgiveButtons{position:relative;min-height:60px}
#yesBtn,#noBtn{font-size:18px;padding:13px 30px;margin:8px;border:none;border-radius:30px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;font-family:"sans-serif"}
#yesBtn{background:linear-gradient(135deg,#ff6b9d,#ff3366);color:#fff;box-shadow:0 4px 22px rgba(255,80,130,0.5)}
#yesBtn:hover{transform:scale(1.08);box-shadow:0 6px 30px rgba(255,80,130,0.7)}
#noBtn{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.3)}
#yesMsg{display:none;color:#ff6b9d;font-size:22px;font-family:Georgia,serif;margin-top:22px;animation:fadeInUp 0.8s ease forwards;line-height:1.6}
#noGiveUp{color:#999;font-size:14px;display:block;margin-top:10px;font-family:"sans-serif"}

/* ===== CONFETTI HEARTS ===== */
.confetti-heart{position:fixed;top:-40px;pointer-events:none;z-index:8888;animation:fallDown linear forwards;user-select:none}
@keyframes fallDown{0%{top:-40px;opacity:1;transform:rotate(0deg) translateX(0)}100%{top:110vh;opacity:0.2;transform:rotate(400deg) translateX(50px)}}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width:800px){
  body{overflow-x:hidden}
  #mainContent{width:100% !important;overflow-x:hidden}
  #mainDiv{width:100% !important;height:auto !important}
  #content{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    margin-top:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  /* Code text shows all at once (no typewriter), full width */
  #code{
    float:none !important;
    width:100% !important;
    height:auto !important;
    min-height:unset !important;
    margin-top:0 !important;
    padding:20px 18px 16px !important;
    box-sizing:border-box !important;
    font-size:14px !important;
    line-height:1.8 !important;
    order:1
  }
  /* Animated heart canvas below code text */
  #loveHeart{
    float:none !important;
    width:100% !important;
    height:auto !important;
    order:2;
    position:relative !important;
  }
  #garden{display:block !important;width:100% !important;height:400px !important}
  /* Words below canvas */
  #words{
    position:static !important;
    width:90% !important;
    margin:0 auto !important;
    text-align:center !important;
    font-size:13px !important;
    padding:12px 0 10px !important;
  }
  #messages{display:block !important;font-size:15px !important;text-align:center !important}
  #elapseClock{font-size:11px !important;text-align:center !important}
  #elapseClock .digit{font-size:20px !important}
  #loveu{display:block !important;margin-right:0 !important;margin-top:6px !important;text-align:center !important;font-size:15px !important}
  #overlayTitle{font-size:22px !important}
  #overlaySubtitle{font-size:14px !important}
  /* Picture page: start from top so nothing is clipped */
  #pictureContent{align-items:flex-start !important;padding-top:10px !important}
  #pictureContainer{padding:10px 15px !important}
  #pictureTitle{font-size:22px !important;margin:0 0 8px 0 !important}
  #pictureWrap{max-width:65vw !important;margin:8px auto 12px auto !important}
  #pictureText{font-size:14px !important;margin:8px 0 12px !important}
  #forgiveButtonsWrap{margin:12px 0 !important}
  .forgive-btn{font-size:15px !important;padding:11px 24px !important}
  #successMsgPic{font-size:18px !important}
}
@media (max-width:480px){
  #brkHeart,#healHeart{font-size:68px !important}
  #overlayTitle{font-size:18px !important}
  #garden{height:320px !important}
  #elapseClock .digit{font-size:18px !important}
  #pictureWrap{max-width:75vw !important}
}