/* Color Palette & Variables for Paper Theme */
    :root {
        --paper-bg: #f5f0e6;
        --paper-letter: #fdfbf7;
        --env-back: #e3d9c6;
        --env-front: #ebe3d3;
        --env-flap: #e6dfcd;
        --env-shadow: rgba(110, 100, 85, 0.3);
        --ink-color: #2c3e50; /* Fountain pen dark blue/grey */
        --ink-light: #34495e;
        --heart-color: #e07a5f; /* Soft, warm muted red/orange */
    }

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

    body {
        background-color: var(--paper-bg);
        min-height: 100vh;
        font-family: 'Baskervville', serif;
        font-style: italic;
        color: var(--ink-color);
        overflow-x: hidden;
        overflow-y: auto; /* Fixed: Allow vertical scrolling on small screens */
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Subtle CSS noise texture for real paper feel */
    .texture-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
        z-index: 50;
        opacity: 0.35;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        mix-blend-mode: multiply;
    }

    /* Hearts Container */
    #hearts-container {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        pointer-events: none;
        z-index: 5;
        overflow: hidden;
    }

    .heart-wrapper {
        position: absolute;
        bottom: -50px;
        opacity: 0;
        animation: floatUp 15s linear forwards;
    }

    .heart {
        position: relative;
        width: 16px; height: 16px;
        background-color: var(--heart-color);
        transform: rotate(-45deg);
        opacity: 0.25;
        border-radius: 2px;
    }

    .heart::before, .heart::after {
        content: "";
        position: absolute;
        width: 16px; height: 16px;
        background-color: var(--heart-color);
        border-radius: 50%;
    }
    .heart::before { top: -8px; left: 0; }
    .heart::after { top: 0; left: 8px; }

    @keyframes floatUp {
        0% { transform: translateY(0) scale(0.6) rotate(-15deg); opacity: 0; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { transform: translateY(-110vh) scale(1.3) rotate(15deg); opacity: 0; }
    }

    /* Scene */
    .scene {
        position: relative;
        width: 100%; 
        min-height: 100vh;
        display: grid; /* Grid superimposes children perfectly without breaking document flow */
        align-items: start;
        justify-items: center;
        perspective: 1400px;
        z-index: 10;
        padding: 12vh 0 40px 0; /* Envelope starts 12vh down from the top */
    }

    /* Tap Hint */
    .tap-hint {
        position: absolute;
        top: -60px; width: 100%;
        text-align: center;
        color: var(--heart-color);
        font-size: 2.2rem; font-weight: 600;
        pointer-events: none; transition: opacity 0.2s;
        z-index: 10;
        animation: bounceHint 2s infinite ease-in-out;
    }
    @keyframes bounceHint {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }

    /* Envelope */
    .envelope-wrapper {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        width: 340px; height: 230px;
        transition: transform 0.1s, filter 1.2s;
        transform-style: preserve-3d;
        z-index: 20;
        filter: drop-shadow(0 15px 25px var(--env-shadow));
        cursor: pointer;
    }
    .envelope-wrapper.open {
        transform: translateY(120px) scale(0.7) !important;
        opacity: 0; pointer-events: none;
        transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 1.8s;
    }
    .envelope { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
    .envelope-back {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: var(--env-back); border-radius: 2px; z-index: 1;
    }
    .envelope-front {
        position: absolute; bottom: 0; left: 0; width: 0; height: 0;
        border-left: 170px solid var(--env-front);
        border-right: 170px solid var(--env-front);
        border-bottom: 115px solid var(--env-front);
        border-top: 115px solid transparent;
        z-index: 3; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
        filter: drop-shadow(0 -1px 2px rgba(0,0,0,0.03));
    }
    .envelope-flap {
        position: absolute; top: 0; left: 0; width: 0; height: 0;
        border-left: 170px solid transparent;
        border-right: 170px solid transparent;
        border-top: 140px solid var(--env-flap);
        transform-origin: top; transition: transform 0.1s ease-out;
        z-index: 4; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.06));
    }
    .envelope-wrapper.open .envelope-flap {
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transform: rotateX(180deg) !important; z-index: 0;
    }
    .letter-mini {
        position: absolute; bottom: 10px; left: 50%;
        transform: translateX(-50%); width: 90%; height: 85%;
        background: var(--paper-letter); border-radius: 1px;
        z-index: 2; padding: 20px;
        transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05), inset 0 0 20px rgba(0,0,0,0.02);
    }
    .envelope-wrapper.open .letter-mini { transform: translate(-50%, -200px); }
    .letter-mini .faux-line {
        height: 2px; background: rgba(44, 62, 80, 0.15); margin-bottom: 16px; border-radius: 2px;
    }
    .letter-mini .line-1 { width: 40%; }
    .letter-mini .line-2 { width: 85%; }
    .letter-mini .line-3 { width: 60%; }

    /* Full Realistic Paper View for Receiver */
    .full-letter-view {
        grid-column: 1;
        grid-row: 1;
        position: relative; /* Fixed: Removed absolute positioning for proper responsive height calculation */
        width: 90%; max-width: 600px;
        background: var(--paper-letter);
        background-image: 
            linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%),
            radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%);
        border-radius: 3px;
        padding: 60px 70px;
        z-index: 30;
        box-shadow: 
            0 20px 40px -10px rgba(100, 90, 70, 0.25),
            0 0 15px rgba(100, 90, 70, 0.08),
            inset 0 0 40px rgba(0,0,0,0.03);
        transform: translateY(20px);
        opacity: 0; pointer-events: none;
        transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) 2s;
    }
    .envelope-wrapper.open + .full-letter-view {
        opacity: 1; transform: rotate(-1.5deg); pointer-events: auto;
    }

    /* Handwritten Content Styling */
    .content { word-break: break-word; }
    .content h1 { font-size: 3.8rem; font-weight: 600; margin-bottom: 25px; color: var(--ink-color); text-align: left; opacity: 0; transform: translateY(10px); transition: all 1s ease 2.6s; line-height: 1.1; }
    .content p { font-size: 2rem; line-height: 1.4; margin-bottom: 20px; color: var(--ink-light); opacity: 0; transform: translateY(10px); transition: all 1s ease 2.9s; font-weight: 500; }
    .content p:nth-of-type(2) { transition-delay: 3.2s; }
    .content .signature { font-size: 2.6rem; font-weight: 600; margin-top: 35px; text-align: right; color: var(--ink-color); opacity: 0; transform: translateY(10px); transition: all 1s ease 3.6s; }
    .envelope-wrapper.open + .full-letter-view .content h1,
    .envelope-wrapper.open + .full-letter-view .content p,
    .envelope-wrapper.open + .full-letter-view .content .signature { opacity: 1; transform: translateY(0); }

    /* --- Generator View (Sleek Fade) --- */
    .generator-view {
        grid-column: 1;
        grid-row: 1;
        position: relative; /* Fixed: Not absolute so it can push container height down on mobile */
        transform: rotate(-1deg);
        width: 92%; max-width: 600px;
        background: var(--paper-letter);
        background-image: 
            linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%),
            radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%);
        border-radius: 3px;
        padding: 40px 50px;
        box-shadow: 
            0 20px 40px -10px rgba(100, 90, 70, 0.25),
            0 0 15px rgba(100, 90, 70, 0.08),
            inset 0 0 40px rgba(0,0,0,0.03);
        pointer-events: auto;
    }

    .fade-section {
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    .fade-section.active {
        opacity: 1;
    }

    /* Theme Selector */
    .theme-options {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }
    .theme-option {
        flex: 1;
        cursor: pointer;
    }
    .theme-option input {
        display: none;
    }
    .theme-card {
        background: rgba(0,0,0,0.02);
        border: 2px solid rgba(44, 62, 80, 0.1);
        border-radius: 4px;
        padding: 10px 5px;
        text-align: center;
        transition: all 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .theme-option input:checked + .theme-card {
        border-color: var(--heart-color);
        background: rgba(224, 122, 95, 0.05); /* very light heart color */
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(224, 122, 95, 0.15);
    }
    .theme-icon {
        font-size: 2.5rem;
        margin-bottom: 5px;
        display: block;
    }
    .theme-name {
        font-family: 'Baskervville', serif;
        font-style: italic;
        font-size: 1.2rem;
        color: var(--ink-color);
        line-height: 1.1;
    }

    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; font-size: 1.6rem; color: var(--ink-light); margin-bottom: 5px; }
    .form-group input, .form-group textarea {
        width: 100%; background: transparent; border: 1px solid rgba(44, 62, 80, 0.2); border-radius: 2px;
        padding: 6px 10px; font-family: 'Baskervville', serif; font-style: italic; font-size: 1.4rem; color: var(--ink-color);
        outline: none; transition: border-color 0.3s, background 0.3s;
    }
    .form-group input:focus, .form-group textarea:focus { border-color: var(--ink-color); background: rgba(255, 255, 255, 0.5); }
    .btn {
        display: block; width: 100%; background: var(--ink-color); color: var(--paper-letter); border: none;
        padding: 10px; font-family: 'Baskervville', serif; font-style: italic; font-size: 2rem; border-radius: 2px; cursor: pointer;
        transition: transform 0.1s, background 0.2s; margin-top: 25px; text-align: center; text-decoration: none;
    }
    .btn:active { transform: scale(0.98); }
    .btn:hover { background: var(--ink-light); }
    .result-box p { font-size: 1.8rem; margin-bottom: 10px; color: var(--ink-color); text-align: center; }

    /* Error pages reuse generator styling */
    .error-view { grid-column: 1; grid-row: 1; position: relative; transform: rotate(-1deg); width: 92%; max-width: 500px; text-align: center; pointer-events: auto; }
    .error-view h1 { font-size: 6rem; margin-bottom: 10px; color: var(--heart-color); }
    .error-view p { font-size: 2.2rem; margin-bottom: 30px; }

    @media (max-width: 768px) {
        .full-letter-view, .generator-view { padding: 35px 25px; width: 88%; }
        .content h1 { font-size: 3.2rem; } .content p { font-size: 1.6rem; } .content .signature { font-size: 2.2rem; }
    }
    @media (max-width: 480px) {
        .envelope-wrapper { width: 280px; height: 190px; }
        .envelope-front { border-left-width: 140px; border-right-width: 140px; border-bottom-width: 95px; border-top-width: 95px; }
        .envelope-flap { border-left-width: 140px; border-right-width: 140px; border-top-width: 120px; }
        .full-letter-view { padding: 30px 15px; width: 85%; }
        .envelope-wrapper.open + .full-letter-view { transform: rotate(0deg); } /* No rotation on mobile to prevent clipping */
        
        .generator-view { padding: 20px 15px; width: 85%; }
        .cute-final-message { 
            padding: 20px 15px; 
            width: 85%; 
            max-height: 45vh; 
        }
        .pop-board { 
            padding: 20px 15px; 
            width: 80%; 
            max-height: 60vh; 
        }
        .cute-final-message h1, .pop-board h1 { font-size: 2.0rem; margin-bottom: 15px; }
        .pop-msg-container, .board-msg-container { font-size: 1.4rem; margin: 10px 0; }
        .cute-sig, .pop-sig { font-size: 1.5rem; margin-top: 15px; }
        
        .form-group label { font-size: 1.4rem; margin-bottom: 3px; }
        .form-group input, .form-group textarea { font-size: 1.4rem; padding: 6px 10px; }
        .btn { font-size: 1.6rem; padding: 8px; margin-top: 15px; }
        .theme-icon { font-size: 2rem; }
        .theme-name { font-size: 1.2rem; }
    }

    /* --- Cute Parade Theme --- */
    .cute-stage {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        z-index: 50;
    }
    .cute-character {
        position: absolute;
        transform: scale(0);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        cursor: pointer;
        text-align: center;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .cute-character.visible {
        transform: scale(1);
        opacity: 1;
    }
    .cute-hat {
        width: 55px;
        height: 55px;
        position: absolute;
        top: -25px;
        left: 50%;
        transform: translateX(-50%) rotate(15deg);
        z-index: 2;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    .cute-bounce-wrapper {
        position: relative;
        animation: bounce 0.8s infinite alternate;
    }
    .cute-face {
        font-size: 6rem;
        filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1));
    }
    .cute-sign {
        background: white;
        border: 2px solid var(--ink-color);
        border-radius: 4px;
        padding: 10px 15px;
        font-size: 2.2rem;
        color: var(--ink-color);
        margin-bottom: 10px;
        box-shadow: 2px 4px 0 var(--ink-color);
        display: inline-block;
    }
    @keyframes bounce {
        0% { transform: translateY(0); }
        100% { transform: translateY(-20px); }
    }
    .cute-final-message {
        background: var(--paper-letter);
        border-radius: 4px;
        border: 2px dashed var(--heart-color);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        opacity: 0; 
        pointer-events: none; 
        transition: opacity 1s; 
        padding: 40px; 
        text-align: center; 
        position: absolute; 
        top: 10%; left: 50%; 
        transform: translateX(-50%); 
        width: 90%; max-width: 600px;
        max-height: 80vh;
        overflow-y: auto;
        margin-bottom: 50px;
        z-index: 10;
    }
    .cute-final-message.active {
        opacity: 1;
        pointer-events: auto;
    }
    .cute-final-message h1 { font-size: 2.6rem; color: var(--heart-color); margin-bottom: 20px; }
    .cute-final-message p { font-size: 1.6rem; color: var(--ink-color); margin-bottom: 15px; }
    .cute-sig { font-size: 1.8rem; color: var(--ink-color); font-weight: 600; text-align: right; margin-top: 30px; }

    /* --- Balloon Pop Theme --- */
    .balloon-stage {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
    }
    .balloon {
        position: absolute;
        bottom: -150px;
        width: 60px;
        height: 75px;
        border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
        cursor: crosshair;
        animation: floatBalloon linear infinite;
        transition: transform 0.1s, opacity 0.2s;
        box-shadow: inset -10px -10px 15px rgba(0,0,0,0.15);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .balloon::before {
        content: "";
        position: absolute;
        bottom: -8px; left: 50%;
        transform: translateX(-50%);
        width: 0; height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 8px solid inherit;
    }
    .balloon::after {
        content: "";
        position: absolute;
        bottom: -50px; left: 50%;
        width: 1px; height: 50px;
        background: rgba(44, 62, 80, 0.4);
    }
    @keyframes floatBalloon {
        0% { transform: translateY(0) translateX(0); }
        33% { transform: translateY(-40vh) translateX(30px); }
        66% { transform: translateY(-80vh) translateX(-30px); }
        100% { transform: translateY(-130vh) translateX(0); }
    }
    .pop-board {
        position: absolute; 
        top: 10%; left: 50%; 
        transform: translateX(-50%); 
        width: 90%; max-width: 600px; 
        max-height: 60vh;
        overflow-y: auto;
        margin-bottom: 50px;
        text-align: center;
        background: rgba(253, 251, 247, 0.95);
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        z-index: 10;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .pop-board h1 { font-size: 2.6rem; color: var(--ink-color); opacity: 0; transition: opacity 0.5s; }
    .pop-board.active h1 { opacity: 1; }
    .pop-msg-container, .board-msg-container {
        display: block; 
        font-size: 1.6rem; 
        color: var(--ink-color); 
        margin: 20px 0;
    }
    .board-paragraph {
        margin-bottom: 15px; 
        line-height: 1.4;
    }
    .dropped-chunk {
        opacity: 0;
        display: inline;
        filter: blur(4px);
        transition: all 0.6s ease;
    }
    .dropped-chunk.visible {
        opacity: 1;
        filter: blur(0);
    }
    .pop-sig { font-size: 1.8rem; color: var(--ink-color); font-weight: 600; text-align: right; opacity: 0; transition: opacity 0.5s; }
    .pop-board.active .pop-sig { opacity: 1; }