/* Basic Reset */
* {margin:0;padding:0;box-sizing:border-box;font-family:"Georgia", serif;}
body {
    background: radial-gradient(circle at top, #e57575, #000);
    color: #fff;
    overflow: hidden;
    height: 100vh;
}

  /* ===== Floating Hearts ===== */
  .heart {
    position:absolute;
    width:20px; height:20px;
    background:#ff4b5c;
    transform:rotate(45deg);
    animation: floatUp linear infinite;
    z-index: 5;
  }
  .heart::before, .heart::after {
    content:"";
    position:absolute;
    width:20px; height:20px;
    background:#ff4b5c;
    border-radius:50%;
  }
  .heart::before { top:-10px; left:0; }
  .heart::after { top:0; left:-10px; }

  @keyframes floatUp {
    0% { transform: translateY(0) rotate(45deg); opacity:1; }
    100% { transform: translateY(-1000px) rotate(45deg); opacity:0; }
  }

/* Container */
.container {
    position: relative;
    z-index: 10;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

/* Hidden Class */
.hidden {display:none;}

/* Buttons */
button {
    padding: 14px 28px;
    margin: 15px;
    font-size: 1.1rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
}
button:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(255,77,109,0.7); }

#startBtn, #continueBtn {
    background: linear-gradient(45deg, #ff4d6d, #ff8fa3);
    color: #fff;
}

#yesBtn { background:#ff4d6d;color:white; }
#noBtn { background:#444;color:white; position:relative; }

#musicBtn {
    position: fixed;
    top:20px;
    right:20px;
    background: rgba(0,0,0,0.5);
    color:white;
    border-radius:50%;
    padding:10px;
    z-index:15;
}
/* Floating Love Message Scrollable */
#floatingMessage {
    animation: float 3s ease-in-out infinite;
    max-width: 350px;
    max-height: 300px;   /* limit height */
    overflow-y: auto;    /* enable vertical scroll */
    padding: 15px;
    background: rgba(0,0,0,0.5);
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255,77,109,0.5);
    z-index: 10;
}

/* Scrollbar styling (optional but looks nice) */
#floatingMessage::-webkit-scrollbar {
    width: 6px;
}
#floatingMessage::-webkit-scrollbar-thumb {
    background: #ff4d6d;
    border-radius: 3px;
}
#floatingMessage::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1);
}

/* Rain (flowers/emojis) */
#rain span {
    position:absolute;
    top:-50px;
    animation: fall linear forwards;
    z-index:5;
}
@keyframes fall {
    to { transform: translateY(110vh) rotate(360deg); opacity:0; }
}

/* Confetti / Celebration */
#confetti span {
    position:absolute;
    bottom:0;
    animation: explode 2s ease-out forwards;
    z-index:5;
}
@keyframes explode {
    to { transform: translateY(-120vh) rotate(720deg); opacity:0; }
}

/* Responsive Text */
h1, h2, p { word-break: break-word; }
h1 { font-size: 1.8rem; margin-bottom:20px; }
h2 { font-size:1.5rem; margin:15px 0; }
p { font-size:1rem; line-height:1.5rem; }

/* Mobile Adjustments */
@media screen and (max-width:768px){
    h1 { font-size:1.4rem; }
    h2 { font-size:1.2rem; }
    p { font-size:0.95rem; }
    button { padding:12px 20px; font-size:1rem; }
}