*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Playfair Display', serif;
  background:#fff6f9;
  color:#4a2a36;
  overflow:hidden;
}

.scene{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:clamp(16px,4vw,40px);
  transition:opacity 1.6s ease;
}

.hidden{opacity:0;pointer-events:none;}

.text{
  font-size:clamp(20px,5vw,38px);
  cursor:pointer;
  animation:softGlow 4s infinite;
}

@keyframes softGlow{
  0%{opacity:.7}50%{opacity:1}100%{opacity:.7}
}

.hint{
  font-family:'Kalam', cursive;
  font-size:clamp(16px,4vw,22px);
  margin-bottom:20px;
}

canvas{
  width:min(80vw,320px);
  height:min(80vw,320px);
  border:1px solid #e3a1b8;
  border-radius:16px;
  touch-action:none;
}

input{
  width:260px;
  background:none;
  border:none;
  border-bottom:2px solid #e3a1b8;
  font-size:26px;
  text-align:center;
}

#imageFrame{
  width:90vw;
  max-width:900px;
  height:55vh;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  transition:opacity 2s;
}

.shayari{
  margin-top:20px;
  padding:16px;
  background:rgba(255,255,255,.7);
  border-radius:16px;
  opacity:0;
  transition:opacity 2s;
}

.shayari.show{opacity:1}

.final-image img{
  width:min(70vw,320px);
  border-radius:18px;
  margin-bottom:20px;
}

.proposal-text{
  font-size:clamp(24px,6vw,36px);
  margin-bottom:16px;
}

.buttons{
  display:flex;
  gap:20px;
  justify-content:center;
}

button{
  padding:14px 28px;
  font-size:18px;
  border:none;
  border-radius:30px;
  background:#ffb6c9;
  cursor:pointer;
}

.answer-comment{
  margin-top:12px;
  font-family:'Kalam', cursive;
}

.final-love{
  font-size:clamp(28px,7vw,42px);
  animation:fadeUp 2s ease forwards;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}