:root{
  --pink:#ff4d79;
  --deep:#c9184a;
  --soft:#ffe0e9;
  --dark:#3a1220;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#ffd6e0 0%,#ffb3c6 40%,#ff8fab 100%);
  color:var(--dark);
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* Floating hearts background */
.hearts-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.floaty{position:absolute;bottom:-40px;color:rgba(255,255,255,.6);animation:rise linear forwards}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(-110vh) rotate(360deg);opacity:0}
}

/* Screens */
.screen{
  position:fixed;inset:0;display:none;
  align-items:center;justify-content:center;
  padding:20px;z-index:2;
  animation:fadeIn .8s ease;
}
.screen.active{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Intro */
.intro-content{text-align:center;max-width:480px}
.big-heart-wrap{position:relative;display:inline-block;margin-bottom:22px}
.big-heart{font-size:5rem;color:var(--deep);animation:beat 1.2s infinite}
.big-heart.glow{filter:drop-shadow(0 0 25px rgba(201,24,74,.7))}
@keyframes beat{0%,100%{transform:scale(1)}25%{transform:scale(1.15)}40%{transform:scale(1)}60%{transform:scale(1.12)}}
.pulse-ring{
  position:absolute;top:50%;left:50%;width:90px;height:90px;
  border:3px solid var(--deep);border-radius:50%;
  transform:translate(-50%,-50%);animation:pulse 1.6s infinite;opacity:0
}
@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.6);opacity:.7}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
.intro-title{font-family:'Dancing Script',cursive;font-size:2.8rem;color:var(--deep);margin-bottom:8px}
.intro-sub{font-size:1.05rem;color:#7a2b40;margin-bottom:28px}

.btn-open{
  background:var(--deep);color:#fff;border:none;
  padding:15px 34px;font-size:1.05rem;border-radius:50px;
  cursor:pointer;font-family:'Poppins';font-weight:500;
  box-shadow:0 10px 25px rgba(201,24,74,.4);
  transition:transform .25s, box-shadow .25s;
}
.btn-open:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(201,24,74,.55)}

/* Note card */
.note-screen{overflow-y:auto}
.note-card{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(6px);
  border-radius:28px;
  padding:38px 30px;
  max-width:520px;width:100%;
  box-shadow:0 25px 60px rgba(140,20,50,.3);
  text-align:center;
  border:1px solid rgba(255,255,255,.6);
  margin:auto;
}
.from-tag{font-size:.8rem;letter-spacing:.5px;color:#b0748a;font-style:italic}
.note-heading{font-family:'Dancing Script',cursive;font-size:2.6rem;color:var(--deep);margin:6px 0 22px}
.note-heading i{font-size:1.6rem}
.note-body{text-align:center;line-height:1.9}
.line{
  font-size:1.12rem;color:#4a1f2c;margin:10px 0;
  opacity:0;transform:translateY(14px);
  animation:reveal .7s ease forwards;
  animation-delay:var(--d);
}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
.hl{color:var(--deep);font-weight:600}
.hl-love{color:#e5006e;font-weight:600;position:relative}

.signature{margin-top:26px;text-align:right;opacity:0;animation:reveal .7s ease forwards;animation-delay:var(--d)}
.signature p{color:#7a2b40}
.sign-name{font-family:'Dancing Script',cursive;font-size:1.7rem;color:var(--deep)}

.note-actions{margin-top:28px;display:flex;flex-direction:column;gap:12px;align-items:center;opacity:0;animation:reveal .7s ease forwards;animation-delay:var(--d)}
.btn-forgive{
  background:var(--deep);color:#fff;border:none;
  padding:14px 32px;font-size:1.05rem;border-radius:50px;cursor:pointer;
  font-family:'Poppins';font-weight:500;
  box-shadow:0 10px 24px rgba(201,24,74,.4);
  transition:transform .25s;
}
.btn-forgive:hover{transform:scale(1.06)}
.btn-no{
  background:transparent;border:2px solid #d98aa1;color:#a24763;
  padding:10px 24px;border-radius:50px;cursor:pointer;font-family:'Poppins';
  transition:all .2s;position:relative;
}
.btn-no:hover{background:#ffe0e9}

/* Done screen */
.done-content{text-align:center;max-width:520px}
.done-title{font-family:'Dancing Script',cursive;font-size:2.6rem;color:var(--deep);margin:10px 0}
.done-sub{font-size:1.1rem;color:#5a2333;line-height:1.7;margin-bottom:26px}
.btn-hug{
  background:var(--deep);color:#fff;border:none;padding:14px 30px;
  font-size:1.05rem;border-radius:50px;cursor:pointer;font-family:'Poppins';font-weight:500;
  box-shadow:0 10px 24px rgba(201,24,74,.4);transition:transform .25s;
}
.btn-hug:hover{transform:scale(1.06)}

/* Music button */
.music-btn{
  position:fixed;bottom:20px;right:20px;z-index:5;
  width:52px;height:52px;border-radius:50%;border:none;
  background:var(--deep);color:#fff;font-size:1.1rem;cursor:pointer;
  box-shadow:0 8px 20px rgba(201,24,74,.4);
  transition:transform .2s;
}
.music-btn:hover{transform:scale(1.1)}
.music-btn.playing i{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Burst hearts on forgive */
.burst{position:fixed;font-size:1.6rem;pointer-events:none;z-index:10;animation:burstUp 1.3s ease-out forwards}
@keyframes burstUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-160px) scale(1.6)}}

@media(max-width:520px){
  .intro-title,.note-heading,.done-title{font-size:2.2rem}
  .note-card{padding:30px 20px}
  .line{font-size:1rem}
}