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

        body {
            height: 100vh;
            overflow: hidden;
            /* Updated: more vibrant celebration-style gradient with gold and festive colors */
            background: linear-gradient(135deg, #ff2a6d 0%, #ffd700 30%, #ff9e1f 50%, #1fbbff 75%, #ff3d8c 100%);
            background-size: 400% 400%;
            animation: gradientBG 12s ease infinite;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        /* Sparkling stars */
        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }

        .star {
            position: absolute;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFDF00' d='M12 0L14.91 7.09L22 9.9L14.91 12.91L12 20L9.09 12.91L2 9.9L9.09 7.09z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            width: 20px;
            height: 20px;
            animation: twinkle 2s infinite;
        }
        

        /* Welcome Card */
        .welcome-card {
            /* Updated: more festive background with golden accents */
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            border: 3px solid rgba(255, 215, 0, 0.6);
            box-shadow: 0 8px 32px rgba(255, 105, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.5);
            border-radius: 30px;
            padding: 50px;
            text-align: center;
            max-width: 90%;
            width: 550px;
            position: relative;
            z-index: 10;
            transition: all 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6);
            overflow: hidden;
        }

        .welcome-card:before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,215,0,0.1) 40%, rgba(255,255,255,0) 70%);
            animation: shimmer 6s linear infinite;
            pointer-events: none;
            z-index: -1;
        }

        .celebration-border {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 30px;
            overflow: hidden;
            pointer-events: none;
            z-index: -1;
        }

        .celebration-border:before, .celebration-border:after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            /* Updated: more festive golden gradient */
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(255, 215, 0, 0.4) 20%, 
                transparent 40%, 
                rgba(255, 69, 0, 0.3) 60%, 
                transparent 80%
            );
            transform: rotate(45deg);
            animation: celebrationBorder 10s linear infinite;
        }

        .celebration-border:after {
            animation-delay: -5s;
        }

        h1 {
            font-family: 'Lobster', cursive;
            /* Updated: more vibrant red */
            color: #ff0051;
            font-size: 3.5rem;
            margin-bottom: 25px;
            /* Updated: gold text shadow for more celebratory feel */
            text-shadow: 3px 3px 0px rgba(255, 215, 0, 0.5), 
                         6px 6px 15px rgba(0, 0, 0, 0.2);
            animation: bounce 2s ease infinite alternate;
        }

        p {
            font-family: 'Dancing Script', cursive;
            /* Updated: brighter purple */
            color: #7209b7;
            font-size: 1.6rem;
            line-height: 1.6;
            margin-bottom: 30px;
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
        }

        /* Decorations */
        .balloon {
            position: absolute;
            width: 40px;
            height: 50px;
            /* Updated: brighter balloon color */
            background-color: #ff3d8c;
            border-radius: 50%;
            animation: float 15s ease-in-out infinite;
            box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.1);
            z-index: -1;
        }

        .balloon:before {
            content: '';
            position: absolute;
            width: 4px;
            height: 60px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
            top: 50px;
            left: 20px;
        }

        /* Heart-shaped button with 3D effect */
        .heart-button-container {
            position: relative;
            margin: 20px auto 10px;
            width: 130px;
            height: 130px;
            perspective: 500px;
        }

        .heart-button {
            position: relative;
            width: 100px;
            height: 90px;
            margin: 0 auto;
            cursor: pointer;
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            animation: heartBeat 2s infinite alternate;
        }

        .heart-button:before, .heart-button:after {
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            /* Updated: brighter heart color */
            background: #ff0051;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
            box-shadow: 0 0 25px rgba(255, 0, 81, 0.8), 
                        inset -5px -5px 15px rgba(0, 0, 0, 0.2);
        }

        .heart-button:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        .heart-button:hover {
            transform: scale(1.15) translateY(-10px) rotateY(10deg);
        }

        .heart-button-text {
            position: relative;
            z-index: 5;
            font-family: 'Pacifico', cursive;
            color: white;
            font-size: 1.4rem;
            top: 30px;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Enhanced pulse effect with multiple rings */
        .heart-pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pulse-ring {
            position: absolute;
            border-radius: 50%;
            /* Updated: brighter pulse color */
            background: rgba(255, 0, 81, 0.3);
            animation: pulseRing 3s cubic-bezier(0.1, 0.25, 0.1, 1) infinite;
        }

        .pulse-ring:nth-child(1) {
            animation-delay: 0s;
        }

        .pulse-ring:nth-child(2) {
            animation-delay: 0.5s;
        }

        .pulse-ring:nth-child(3) {
            animation-delay: 1s;
        }

        /* Rose petal */
        .petal {
            position: absolute;
            top: -50px;
            /* Updated: brighter petal color */
            background-color: #ff3d8c;
            width: 25px;
            height: 35px;
            border-radius: 40% 40% 60% 60%;
            z-index: 1;
            box-shadow: inset 5px 0 10px rgba(255, 255, 255, 0.3),
                        inset -5px -5px 10px rgba(0, 0, 0, 0.1);
        }

        /* Confetti effect */
        .confetti {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #f44336;
            top: -50px;
            z-index: 1;
        }

        /* Birthday cake icon */
        .cake-icon {
            position: absolute;
            width: 60px;
            height: 60px;
            bottom: 20px;
            left: 20px;
            /* Updated: brighter cake icon */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF1493'%3E%3Cpath d='M12 6a2 2 0 0 0 2-2c0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07c-.83.83-1.54 1.08-2.53 1.08-1.38 0-2.5-.7-3-1.5-.5-.8-1.61-1.5-3-1.5-1.99 0-2.7.25-3.53 1.08L2.4 12.01C1.55 12.86 1 14.08 1 15.39V22h22v-6.61c0-1.31-.55-2.53-1.4-3.4zM20 20H4v-4c0 .8.33 1.41.92 2 .76.76 1.81 1 3.08 1 1.27 0 2.32-.24 3.08-1 .59-.59.92-1.2.92-2 0 .8.33 1.41.92 2 .76.76 1.81 1 3.08 1 1.27 0 2.32-.24 3.08-1 .59-.59.92-1.2.92-2v4zm0-8.5c-.79 0-1.31.31-1.92.92C17.32 13.18 16.27 14 15 14s-2.32-.82-3.08-1.58c-.61-.61-1.13-.92-1.92-.92s-1.31.31-1.92.92C7.32 13.18 6.27 14 5 14v-1c.79 0 1.31-.31 1.92-.92C7.68 11.32 8.73 11 10 11s2.32.32 3.08 1.08c.61.61 1.13.92 1.92.92s1.31-.31 1.92-.92C17.68 11.32 18.73 11 20 11v1c-.79 0-1.31.31-1.92.92C17.32 13.18 16.27 14 15 14z'/%3E%3C/svg%3E");
            background-size: contain;
            opacity: 0.9;
            animation: float 3s ease-in-out infinite alternate;
        }

        /* Gift icon */
        .gift-icon {
            position: absolute;
            width: 60px;
            height: 60px;
            bottom: 20px;
            right: 20px;
            /* Updated: brighter gift icon */
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF1493'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35L12 4.02l-.5-.67C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
            background-size: contain;
            opacity: 0.9;
            animation: float 4s ease-in-out infinite alternate-reverse;
        }

        /* Ribbon */
        .ribbon {
            position: absolute;
            width: 150px;
            height: 150px;
            overflow: hidden;
            top: -10px;
            left: -10px;
            z-index: 100;
        }

        .ribbon-content {
            position: absolute;
            display: block;
            width: 220px;
            padding: 15px 0;
            /* Updated: brighter ribbon color */
            background-color: #ff0051;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            color: #fff;
            font-size: 1rem;
            font-family: 'Pacifico', cursive;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
            text-align: center;
            left: -40px;
            top: 35px;
            transform: rotate(-45deg);
        }

        .ribbon-content:before, .ribbon-content:after {
            content: "";
            position: absolute;
            bottom: -5px;
            border-top: 5px solid #b00038;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }

        .ribbon-content:before {
            left: 0;
        }

        .ribbon-content:after {
            right: 0;
        }
        #playButton:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 25px rgba(255, 0, 102, 0.6);
        }


        /* Animations */
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }

        @keyframes fall {
            0% {
                transform: translateY(-50px) rotate(0deg) translateX(10px);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            100% {
                transform: translateY(calc(100vh + 50px)) rotate(360deg) translateX(-100px);
                opacity: 0;
            }
        }

        @keyframes pulseRing {
            0% { width: 50px; height: 50px; opacity: 0.5; }
            100% { width: 200px; height: 200px; opacity: 0; }
        }

        @keyframes bounce {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        @keyframes shimmer {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes celebrationBorder {
            0% { transform: translate(-50%, -50%) rotate(45deg); }
            100% { transform: translate(-50%, -50%) rotate(405deg); }
        }

        @keyframes twinkle {
            0% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0.3; transform: scale(0.8); }
        }

        @keyframes confettiFall {
            0% { transform: translateY(-50px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(calc(100vh + 50px)) rotate(360deg); opacity: 0; }
        }

        @keyframes heartBeat {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* Responsiveness */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.8rem;
            }
            
            p {
                font-size: 1.3rem;
            }
            
            .welcome-card {
                padding: 40px 30px;
            }
            
            .ribbon {
                transform: scale(0.8);
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 2.4rem;
            }
            
            p {
                font-size: 1.1rem;
            }
            
            .welcome-card {
                padding: 30px 20px;
            }
            
            .heart-button-container {
                width: 110px;
                height: 110px;
            }
            
            .heart-button {
                width: 80px;
                height: 70px;
            }
            
            .heart-button:before, .heart-button:after {
                left: 40px;
                width: 40px;
                height: 60px;
            }
            
            .heart-button-text {
                font-size: 1.1rem;
                top: 22px;
            }
            
            .ribbon {
                transform: scale(0.7);
                top: -15px;
                left: -15px;
            }

            .cake-icon, .gift-icon {
                width: 40px;
                height: 40px;
            }
        }