body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
    font-family: 'Arial', sans-serif;
    overflow: hidden; /* Prevent body scrollbars too */
    padding: 5px; /* Small padding so card doesn't touch screen edges */
    box-sizing: border-box;
}

.card-container {
    perspective: 1500px;
    width: clamp(360px, 90vw, 580px); /* Card container a bit wider */
}

.card {
    width: 100%;
    /* Height will be determined by content fitting, with a max screen height consideration */
    /* Let's aim for a common aspect ratio like 3:4 or 4:5 for the content area */
    /* Height will be controlled by content, but let's cap it with max-height */
    height: clamp(580px, 85vh, 780px); /* Card is taller, scales with viewport height */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border-radius: 15px; /* Apply to card itself for consistent rounding */
}

.card.open {
    transform: rotateY(-180deg);
}

.front-page, .inside-page {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Distribute space to help fit content */
    align-items: center;
    text-align: center;
    border-radius: 15px; /* Inherited or set here */
    box-sizing: border-box;
    padding: clamp(15px, 3vh, 25px); /* Slightly reduced max padding */
    /* overflow-y: auto; REMOVED to prevent scrolling within card */
}

.front-page {
    background: linear-gradient(to bottom right, #ff7eb9, #ffae8b);
    color: #fff;
    z-index: 2;
    border: 5px dashed #fff700;
}

.front-content { /* Container for front page elements */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, 2vh, 15px); /* Control spacing */
    width: 100%;
    height: 100%; /* Ensure it tries to use all space */
}

.front-content h1 {
    font-family: 'Georgia', serif;
    font-size: clamp(2.2em, 6vw, 3em); /* Adjusted for larger card */
    margin-bottom: 0; /* Control spacing with gap */
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    animation: pulseText 2s infinite;
}

.instruction {
    font-size: clamp(1em, 3vw, 1.3em);
    color: #f0f0f0;
    background-color: rgba(0,0,0,0.2);
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 0;
}

.heart-decoration {
    font-size: clamp(3.5em, 9vw, 4.5em); /* Slightly larger */
    color: #ff1493;
    text-shadow: 0 0 10px #ff1493, 0 0 20px #ff1493;
    animation: beat 1.5s infinite ease-in-out;
    margin-top: 5px; /* Reduced margin */
}

.flower-decoration {
    font-size: clamp(2.2em, 7vw, 3.2em);
    position: absolute;
    opacity: 0.8;
}
.flower-decoration.flower-2 {
    font-size: clamp(2em, 6vw, 2.7em);
    bottom: clamp(15px, 4%, 25px);
    left: clamp(15px, 4%, 25px);
    transform: rotate(-15deg);
    color: #ffd700;
}
.front-page .flower-decoration {
    top: clamp(20px, 6%, 35px);
    right: clamp(20px, 6%, 35px);
    color: #ffeb3b;
}

.sparkle {
    position: absolute;
    font-size: clamp(1.6em, 4.5vw, 2.2em);
    color: #fff700;
    animation: sparkleShine 1s infinite alternate;
}
.s1 { top: 12%; left: 12%; animation-delay: 0s; }
.s2 { top: 75%; right: 15%; animation-delay: 0.3s; }
.s3 { bottom: 8%; left: 50%; transform: translateX(-50%); animation-delay: 0.6s; }


.inside-page {
    background: linear-gradient(to bottom right, #fff59d, #ffcc80);
    color: #5d4037;
    transform: rotateY(180deg);
    z-index: 1;
    border: 8px solid #ff8a80;
}

.inside-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; /* Helps distribute elements if space allows */
    gap: clamp(5px, 1.5vh, 10px); /* Reduced gap significantly */
    width: 100%;
    height: 100%; /* Critical for justify-content to work well */
}

.greeting {
    font-family: 'Brush Script MT', 'cursive';
    font-size: clamp(2em, 7vw, 2.8em); /* Adjusted */
    color: #d81b60;
    margin-bottom: 0; /* Control with gap */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.message {
    font-size: clamp(1.2em, 4.5vw, 1.6em); /* Adjusted */
    font-weight: bold;
    color: #c2185b;
    margin: 0;
}

.highlight-love .love-text {
    color: #ff4081;
    font-size: 1.4em; /* Relative to parent .message, slightly smaller if needed */
    text-shadow: 0 0 8px #ff4081, 0 0 15px #ff4081;
    display: inline-block;
    transition: transform 0.3s ease-in-out, color 0.3s ease;
}

.highlight-love .love-text:hover {
    transform: scale(1.3) rotate(-5deg);
    color: #e91e63;
}

.mom-image {
    border: 4px solid #fff; /* Slightly smaller border */
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    margin: clamp(5px, 1vh, 8px) 0; /* Reduced margin */
    max-width: 65%; /* Adjust as needed, can be a bit smaller if space is tight */
    max-height: clamp(100px, 20vh, 150px); /* Control image height */
    height: auto;
    object-fit: cover; /* Ensures image covers the area if aspect ratios differ */
}

.thank-you {
    font-size: clamp(1em, 4vw, 1.4em); /* Adjusted */
    font-style: italic;
    color: #795548;
    padding: 5px 8px; /* Reduced padding */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    margin: 0;
}

.signature-container {
    margin-top: clamp(5px, 1.5vh, 10px); /* Reduced margin */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.5vh, 12px); /* Slightly adjusted gap */
    width: 100%;
}

.signature {
    font-family: 'Brush Script MT', 'cursive';
    font-size: clamp(1.6em, 6vw, 2em); /* Adjusted */
    color: #d81b60;
    margin: 0;
}

.interactive-button {
    padding: clamp(8px, 2vw, 10px) clamp(12px, 4vw, 20px);
    font-size: clamp(0.8em, 3vw, 1em);
    color: white;
    background-color: #ff69b4;
    border: none;
    border-radius: 20px; /* Slightly smaller radius */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    font-weight: bold;
    /* margin-top: 3px; Removed, use gap in container */
}

.interactive-button:hover {
    background-color: #ff1493;
    transform: translateY(-2px) scale(1.03); /* Slightly less transform */
    box-shadow: 0 4px 8px rgba(255, 20, 147, 0.5);
}

.interactive-button:active {
    transform: translateY(-1px) scale(1.01);
    background-color: #c71585;
}

.close-card-button {
    background-color: #78909c;
}
.close-card-button:hover {
    background-color: #546e7a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}


/* Video Modal Styles (remain largely the same, but ensure they work with body overflow:hidden) */
.video-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* overflow: auto; This might be okay here if video content itself is larger than modal */
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
}

.video-modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 3px solid #ff8a80;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    text-align: center;
}

#momVideo {
    max-width: 100%;
    max-height: 75vh; /* Max height relative to viewport for video */
    border-radius: 8px;
}

.close-video-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 35px;
    font-weight: bold;
    transition: color 0.3s ease;
}

.close-video-button:hover,
.close-video-button:focus {
    color: #ff1493;
    text-decoration: none;
    cursor: pointer;
}


/* Animations */
@keyframes pulseText {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes beat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes sparkleShine {
    0% { opacity: 0.5; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); text-shadow: 0 0 10px #fff700; }
}

/* Media Queries for very small screens if necessary -
   the clamp values should handle most things, but fine-tuning might be needed.
   With no scrolling, it's crucial that even on the smallest supported viewport,
   content fits. The current clamps might be okay.
*/
@media (max-height: 600px) { /* Example: if screen is very short */
    .card {
        height: clamp(480px, 90vh, 580px); /* Adjust card height */
    }
    .greeting { font-size: clamp(1.8em, 6vh, 2.2em); }
    .message { font-size: clamp(1em, 3.5vh, 1.3em); }
    .mom-image { max-height: clamp(80px, 15vh, 120px); }
    .interactive-button { padding: 6px 10px; font-size: clamp(0.7em, 2.5vh, 0.9em); }
    .front-page, .inside-page { padding: clamp(10px, 2vh, 20px); }
    .inside-content { gap: clamp(3px, 1vh, 8px); }

}