*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  height:100%;
  font-family:Arial, sans-serif;
  overflow:hidden;
  text-align:center;
  color:white;

  /* Soft pink base */
  background:#ffc2d1;
}

/* Soft romantic gradient */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, #ffd6e055 0%, transparent 45%),
    radial-gradient(circle at 80% 70%, #ffb3c655 0%, transparent 45%),
    linear-gradient(135deg,#ffccd5,#ff8fab);
  z-index:-1;
}

/* ===== LAYOUT ===== */
.screen{
  position:fixed;
  inset:0;
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:24px;
}

.screen.active{
  display:flex;
}

/* ===== TEXT ===== */
h1{
  font-size:clamp(34px,7vw,52px);
}

h2{
  font-size:clamp(26px,6vw,40px);
}

p{
  font-size:clamp(18px,5vw,22px);
}

h1,h2,p{
  color:white;
  text-shadow:0 3px 10px rgba(0,0,0,0.25);
}

/* ===== BUTTONS ===== */
button{
  padding:16px 28px;
  font-size:clamp(18px,5vw,22px);
  border:none;
  border-radius:18px;
  cursor:pointer;
  background:white;
  color:#ff4d6d;
  margin-top:24px;
  font-weight:bold;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

/* ===== LETTER CARD ===== */
.card{
  background:white;
  color:#ff4d6d;
  padding:28px;
  border-radius:24px;
  width:100%;
  max-width:460px;
  box-shadow:0 18px 40px rgba(0,0,0,0.2);
}

#typedText{
  font-size:20px;
  line-height:1.6;
  min-height:120px;
}

/* ===== HEART FLOAT ===== */
.heart{
  position:fixed;
  bottom:-20px;
  font-size:22px;
  animation:floatUp 5s linear forwards;
}

@keyframes floatUp{
  to{
    transform:translateY(-110vh);
    opacity:0;
  }
}

/* ===== FIREWORKS ===== */
.firework{
  position:fixed;
  width:8px;
  height:8px;
  border-radius:50%;
  pointer-events:none;
  animation:explode 1s ease-out forwards;
}

@keyframes explode{
  to{
    transform:translate(var(--x),var(--y));
    opacity:0;
  }
}

#finalMsg{
  display:none;
  margin-top:24px;
}