:root {
    --bg-purple: #1a051d;
    --pink: #ff9de3;
    --baby-pink: #fbc2eb;
    --infant-pink: #ffe7f9;
    --heart-red: #ff4d6d;
    --heart-magenta: #ff758f;
}

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%; /* Changed from height: 100% */
    overflow-x: hidden; /* Prevent horizontal jitter */
    background-color: var(--bg-purple);
    font-family: 'Eagle Lake', serif;
    color: var(--baby-pink);
}
p {
    font-size: 1.5rem;
}
#tsparticles {
    position: fixed; /* Changed to fixed so it stays put while scrolling */
    width: 100%;
    height: 100%;
    z-index: 0;
}

.content-wrapper {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center; /* Centers the login card */
    min-height: 100vh; /* Allows growth */
    padding: 40px 20px;
    box-sizing: border-box;
}
.content-wrapper.letter-mode {
    align-items: flex-start; /* Start letter at the top, not middle */
}
.letter-card {
    background: rgba(255, 182, 193, 0.04);
    backdrop-filter: blur(15px);
    padding: 5vw;
    border-radius: 15px;
    max-width: 700px;
    width: 100%;
    line-height: 1.8;
    box-shadow: 0 10px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(251, 194, 235, 0.2);
}

.letter-header {
    font-family: "Bilbo Swash Caps", cursive;
    font-style: normal;
    font-weight: normal;
    font-size: 4rem;
    margin-bottom: 2rem;
    text-align: center;
}

.auth-card {
    background: rgba(255, 182, 193, 0.15);
    /* Semi-transparent baby pink */
    backdrop-filter: blur(12px);
    padding: 2.5rem;
    border-radius: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    text-align: center;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(251, 194, 235, 0.3);
    transition: transform 0.3s ease;
}

h2 {
    font-family: "Bilbo Swash Caps", cursive;
    font-size: 3.67rem;
    font-style: normal;
    font-weight: normal;
    line-height: 3.67rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(251, 194, 235, 0.5);
}

input {
    font-size: 1.5rem;
    font-family: 'Felipa', serif;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--baby-pink);
    border-radius: 10px;
    padding: 12px;
    color: white;
    width: 80%;
    margin-bottom: 20px;
    outline: none;
    text-align: center;
}

button {
    display: inline-block;
    background: var(--heart-red);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 2rem;
    cursor: pointer;
    font-family: 'Felipa', serif;
    font-size: 2rem;
    transition: 0.3s;
}

button:hover {
    background: var(--heart-magenta);
    transform: scale(1.05);
}

/* --- Animations --- */

.shake {
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.text-flash-red {
    color: #ff0000;
    text-shadow: 0 0 10px rgba(255, 0, 0);
    animation: flash 0.3s infinite alternate;
}
.text-flash-green {
    color: #00ff73;
    text-shadow: 0 0 10px #00ff73;
    animation: flash 0.8s infinite alternate;
}

.text-flash-magenta {
    color: #ff00ff;
    animation: flash 0.8s infinite alternate;
}


@keyframes flash {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}