/* Custom Animations & Styles */
        * {
            box-sizing: border-box;
        }
        
        html, body {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 50%, #e6e6fa 100%);
            font-family: 'Playfair Display', serif;
            min-height: 100vh;
            min-height: 100dvh; /* Dynamic viewport height for mobile */
        }

        /* Heart Shape Construction */
        .heart-shape {
            position: relative;
            width: 80px;
            height: 72px;
            background-color: #ff3366;
            transform: rotate(-45deg);
            box-shadow: -10px 10px 90px #ff3366;
            animation: heartbeat 1.5s infinite;
            cursor: pointer;
            transition: all 0.5s ease;
            z-index: 20;
            flex-shrink: 0;
        }

        .heart-shape::before,
        .heart-shape::after {
            content: "";
            position: absolute;
            width: 80px;
            height: 72px;
            background-color: #ff3366;
            border-radius: 50%;
        }

        .heart-shape::before {
            top: -40px;
            left: 0;
        }

        .heart-shape::after {
            left: 40px;
            top: 0;
        }

        /* Heartbeat Animation */
        @keyframes heartbeat {
            0% { transform: rotate(-45deg) scale(1); box-shadow: -10px 10px 90px #ff3366; }
            15% { transform: rotate(-45deg) scale(1.1); box-shadow: -10px 10px 120px #ff3366; }
            30% { transform: rotate(-45deg) scale(1); box-shadow: -10px 10px 90px #ff3366; }
            45% { transform: rotate(-45deg) scale(1.1); box-shadow: -10px 10px 120px #ff3366; }
            60% { transform: rotate(-45deg) scale(1); box-shadow: -10px 10px 90px #ff3366; }
            100% { transform: rotate(-45deg) scale(1); box-shadow: -10px 10px 90px #ff3366; }
        }

        /* Active State (Clicked) */
        .heart-shape.active {
            animation: pulse-glow 2s infinite;
            background-color: #ff0044;
        }
        .heart-shape.active::before, .heart-shape.active::after {
            background-color: #ff0044;
        }

        @keyframes pulse-glow {
            0% { transform: rotate(-45deg) scale(1); box-shadow: 0 0 50px #ff0044, 0 0 100px #ff69b4; }
            50% { transform: rotate(-45deg) scale(1.15); box-shadow: 0 0 80px #ff0044, 0 0 150px #ff69b4; }
            100% { transform: rotate(-45deg) scale(1); box-shadow: 0 0 50px #ff0044, 0 0 100px #ff69b4; }
        }

        /* Floating Background Hearts */
        .floating-heart {
            position: fixed;
            color: rgba(255, 105, 180, 0.4);
            animation: floatUp linear forwards;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes floatUp {
            0% { transform: translateY(100vh) scale(0) rotate(0deg); opacity: 0; }
            10% { opacity: 0.6; }
            90% { opacity: 0.6; }
            100% { transform: translateY(-10vh) scale(1.5) rotate(360deg); opacity: 0; }
        }

        /* Typing Cursor */
        .cursor {
            display: inline-block;
            width: 2px;
            background-color: #d63384;
            animation: blink 1s infinite;
            margin-left: 2px;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* Message Container */
        .message-container {
            opacity: 0;
            transition: opacity 2s ease-in-out;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 100%;
        }
        
        .message-visible {
            opacity: 1;
        }

        /* Glassmorphism Card */
        .glass-card {
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 8px 32px 0 rgba(255, 105, 180, 0.15);
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* Custom Scrollbar for message box */
        .custom-scroll::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scroll::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        .custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(214, 51, 132, 0.3);
            border-radius: 3px;
        }
        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(214, 51, 132, 0.5);
        }

        /* Media Queries for Responsive Design */
        @media (max-width: 640px) {
            .heart-shape {
                width: 60px;
                height: 54px;
            }
            .heart-shape::before,
            .heart-shape::after {
                width: 60px;
                height: 54px;
            }
            .heart-shape::before {
                top: -30px;
            }
            .heart-shape::after {
                left: 30px;
            }
            
            #instruction-text {
                font-size: 0.875rem;
            }
            
            .glass-card {
                padding: 1.25rem;
                margin: 0.5rem;
            }
            
            .glass-card h1 {
                font-size: 1.875rem;
                margin-bottom: 1rem;
            }
            
            #typewriter-text {
                font-size: 1.125rem;
                line-height: 1.6;
            }
        }

        @media (min-width: 641px) and (max-width: 1024px) {
            .heart-shape {
                width: 70px;
                height: 63px;
            }
            .heart-shape::before,
            .heart-shape::after {
                width: 70px;
                height: 63px;
            }
            .heart-shape::before {
                top: -35px;
            }
            .heart-shape::after {
                left: 35px;
            }
            
            .glass-card {
                padding: 2rem;
            }
            
            .glass-card h1 {
                font-size: 2.5rem;
            }
            
            #typewriter-text {
                font-size: 1.375rem;
            }
        }

        @media (min-width: 1025px) {
            .heart-shape {
                width: 100px;
                height: 90px;
            }
            .heart-shape::before,
            .heart-shape::after {
                width: 100px;
                height: 90px;
            }
            .heart-shape::before {
                top: -50px;
            }
            .heart-shape::after {
                left: 50px;
            }
            
            .glass-card {
                padding: 3rem;
            }
            
            .glass-card h1 {
                font-size: 3.75rem;
            }
            
            #typewriter-text {
                font-size: 1.5rem;
            }
        }

        /* Landscape mode optimization */
        @media (max-height: 500px) and (orientation: landscape) {
            .heart-wrapper {
                margin-bottom: 0.5rem;
            }
            
            .heart-shape {
                width: 50px;
                height: 45px;
            }
            .heart-shape::before,
            .heart-shape::after {
                width: 50px;
                height: 45px;
            }
            .heart-shape::before {
                top: -25px;
            }
            .heart-shape::after {
                left: 25px;
            }
            
            .glass-card {
                padding: 1rem;
                max-height: 70vh;
                overflow-y: auto;
            }
            
            .glass-card h1 {
                font-size: 1.5rem;
                margin-bottom: 0.5rem;
            }
            
            #typewriter-text {
                font-size: 1rem;
                line-height: 1.5;
            }
        }

        /* Very small devices */
        @media (max-width: 320px) {
            .glass-card {
                padding: 1rem;
            }
            
            #typewriter-text {
                font-size: 1rem;
            }
        }