body {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.container {
    text-align: center;
    color: white;
}

/* Fade-in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 1.5s forwards;
}
.delay { animation-delay: 1s; }
.delay2 { animation-delay: 2s; }

@keyframes fadeIn { to { opacity: 1; } }

/* Card container */
.card-container {
    width: 80%;
    max-width: 1000px;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

/* Card style */
.card {
    width: 360px;
    height: 160px;
    background: #fff;
    color: #ff4d6d;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 20px;
    padding: 15px;
    cursor: pointer;
    transform-style: preserve-3d;
    animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    position: relative;
}

/* Shake animation for wrong answers */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

/* Buttons */
.buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    z-index: 20;
}
button {
    padding: 12px 25px;
    font-size: 18px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: transform 0.3s;
}
button:hover { transform: scale(1.1); }

#yesBtn { background-color: #ff4d6d; color: white; }
#noBtn { background-color: white; color: #ff4d6d; }

/* Tilt-in-fwd-tr animation */
@keyframes tilt-in-fwd-tr {
    0% {
        transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0) rotateX(0deg) translate(0,0) skew(0deg,0deg);
        opacity: 1;
    }
}

/* Letter container (higher on screen) */
.letter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: -50px; /* move the envelope higher */
}

/* Letter / envelope */
.letter-image {
    width: 350px;  /* bigger envelope */
    height: 350px;
    position: relative;
    cursor: pointer;
}

.animated-mail {
    position: relative;
    width: 350px;
    height: 250px;
    transition: .4s;
    /* start closed */
}

.animated-mail .body {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 170px 350px;
    border-color: transparent transparent #e95f55 transparent;
    z-index: 2;
}

.animated-mail .top-fold {
    position: absolute;
    top: 85px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 85px 175px 0 175px;
    transform-origin: 50% 0%;
    transition: transform .4s .4s, z-index .2s .4s;
    border-color: #cf4a43 transparent transparent transparent;
    z-index: 2;
    transform: rotateX(0deg); /* closed initially */
}

.animated-mail .back-fold {
    position: absolute;
    bottom: 0;
    width: 350px;
    height: 170px;
    background: #cf4a43;
    z-index: 0;
}

.animated-mail .left-fold {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 85px 0 85px 175px;
    border-color: transparent transparent transparent #e15349;
    z-index: 2;
}

.animated-mail .letter {
    left: 40px;
    bottom: 0px;
    position: absolute;
    width: 270px;
    height: 100px; /* start collapsed */
    background: white;
    z-index: 1;
    overflow: hidden;
    transition: .4s .2s;
}

.letter-context {
    margin-top: 40px;
    font-size: 22px;
    color: #ff4d6d;
}

/* Shadow */
.shadow {
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 350px;
    height: 50px;
    border-radius: 100%;
    background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    transform: translateX(-50%);
}

/* Envelope opens on hover (will be triggered by JS once) */
.animated-mail.opened .top-fold {
    transform: rotateX(180deg);
    z-index: 0;
}
.animated-mail.opened .letter {
    height: 250px;
}