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

html, body {
  height: 100%;
  overflow: hidden;
  background: #0b0b0c;
  color: #fff;
  font-family: 'Inter', sans-serif;
  text-align: center;
}

/* PRELOADER */
#loader {
  position: fixed;
  inset: 0;
  background: #0b0b0c;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  color: #ff7aa2;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: .3 }
  50% { opacity: 1 }
  100% { opacity: .3 }
}

/* SCREENS */
.screen {
  display: none;
  min-height: 100vh;
  padding: 80px 20px;
}

.screen.active {
  display: block;
}

/* INTRO */
.intro-text {
  font-family: 'Playfair Display', serif;
  font-size: 2.8rem;
  opacity: 0;
  animation: fadeUp 1.5s forwards;
}

.delay {
  animation-delay: 1.2s;
}

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

button {
  margin-top: 40px;
  padding: 12px 30px;
  background: transparent;
  border: 1px solid #ff7aa2;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

/* CARDS */
.card {
  max-width: 340px;
  margin: 15px auto;
  padding: 18px;
  border: 1px solid #333;
  opacity: .4;
}

.card.unlocked {
  opacity: 1;
  border-color: #ff7aa2;
  cursor: pointer;
}

.card.locked {
  pointer-events: none;
}

/* DAY VIEW */
#dayTitle {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
}

#shayari {
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.6;
}

#dayImage {
  width: 80%;
  max-width: 360px;
  border-radius: 14px;
  margin-top: 30px;
}

/* PROPOSAL */
.choices button {
  margin: 20px;
  position: relative;
}

#finalMsg {
  margin-top: 30px;
  color: #ff7aa2;
  font-size: 1.2rem;
}

/* HEARTS */
#hearts span {
  position: fixed;
  bottom: -10px;
  font-size: 20px;
  animation: float 3s linear forwards;
}

@keyframes float {
  to {
    transform: translateY(-120vh);
    opacity: 0;
  }
}

/* CONTACT REVEAL — FIXED */
.contact {
  display: none;
  margin-top: 25px;
}

.contact.show {
  display: block;
  animation: fadeContact .8s ease forwards;
}

@keyframes fadeContact {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.contactBtn {
  display: inline-block;
  margin: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  border: 1px solid #ff7aa2;
  color: #fff;
  text-decoration: none;
  transition: .3s;
}

.contactBtn:hover {
  background: #ff7aa2;
  color: #050506;
}

/* FLOWERS */
.petals::before,
.petals::after {
  content: "❀ ❀ ❀ ❀ ❀";
  position: fixed;
  top: -10%;
  width: 100%;
  font-size: 1.5rem;
  color: rgba(255,122,162,.15);
  animation: fall 18s linear infinite;
  pointer-events: none;
}

.petals::after {
  animation-delay: 9s;
}

@keyframes fall {
  to { transform: translateY(120vh); }
}

/* ===== MOBILE SCROLL FIX ===== */
@media (max-width: 768px) {

  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
  }

  .screen {
    min-height: auto;
    padding: 70px 18px 120px;
  }

}

#lockScreen{
 position:fixed;
 inset:0;
 background:#0f1117;
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:9999;
}

.lock-box{
 background:#161a22;
 padding:30px 28px;
 border-radius:18px;
 width:320px;
 text-align:center;
 box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.lock-box h2{
 margin-bottom:18px;
 font-weight:600;
}

.lock-box input{
 width:100%;
 padding:12px;
 border-radius:10px;
 border:none;
 outline:none;
 margin-bottom:12px;
 background:#0f1117;
 color:#fff;
}

.lock-box button{
 width:100%;
 padding:12px;
 border:none;
 border-radius:10px;
 background:linear-gradient(135deg,#7c5cff,#00d4ff);
 color:#fff;
 font-weight:600;
 cursor:pointer;
}

.lock-box button:hover{
 opacity:.9;
}

#error{
 color:#ff6b6b;
 font-size:13px;
 margin-top:10px;
 display:none;
}