:root {
            --pink: #FF6B9D;
            --pink-dark: #E91E8C;
            --pink-light: #FFB4D2;
            --yellow: #FFE135;
            --yellow-dark: #FFC700;
            --yellow-light: #FFF59D;
            --cream: #FFF8E7;
            --dark: #1A1A2E;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--cream);
            color: var(--dark);
            overflow-x: hidden;
            cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext y='24' font-size='24'%3E🍰%3C/text%3E%3C/svg%3E"), auto;
        }

        /* Marquee Banner */
        .marquee-banner {
            background: var(--pink-dark);
            color: var(--yellow);
            padding: 12px 0;
            overflow: hidden;
            font-family: 'Bangers', cursive;
            font-size: 1.2rem;
            letter-spacing: 2px;
            border-bottom: 4px solid var(--dark);
        }

        .marquee-content {
            display: flex;
            animation: marquee 20s linear infinite;
            white-space: nowrap;
        }

        .marquee-content span {
            padding: 0 50px;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            background: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 50%, var(--yellow) 100%);
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image:
                radial-gradient(circle at 20% 80%, var(--yellow) 0%, transparent 8%),
                radial-gradient(circle at 80% 20%, var(--pink-dark) 0%, transparent 6%),
                radial-gradient(circle at 40% 40%, var(--yellow-light) 0%, transparent 4%),
                radial-gradient(circle at 90% 90%, var(--pink) 0%, transparent 10%);
            opacity: 0.6;
        }

        .floating-elements {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .floater {
            position: absolute;
            font-size: 3rem;
            animation: float 6s ease-in-out infinite;
        }

        .floater:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
        .floater:nth-child(2) { top: 20%; right: 10%; animation-delay: 1s; font-size: 2rem; }
        .floater:nth-child(3) { bottom: 30%; left: 8%; animation-delay: 2s; }
        .floater:nth-child(4) { bottom: 15%; right: 5%; animation-delay: 0.5s; font-size: 4rem; }
        .floater:nth-child(5) { top: 50%; left: 3%; animation-delay: 1.5s; font-size: 2.5rem; }
        .floater:nth-child(6) { top: 15%; left: 40%; animation-delay: 3s; }

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

        .hero-content {
            text-align: center;
            z-index: 1;
            max-width: 1200px;
        }

        .badge {
            display: inline-block;
            background: var(--dark);
            color: var(--yellow);
            padding: 8px 24px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 2rem;
            animation: pulse 2s ease-in-out infinite;
            border: 3px solid var(--yellow);
        }

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

        .hero h1 {
            font-family: 'Bangers', cursive;
            font-size: clamp(4rem, 15vw, 12rem);
            color: var(--dark);
            text-shadow:
                6px 6px 0 var(--yellow),
                12px 12px 0 var(--pink-dark);
            letter-spacing: 8px;
            line-height: 0.9;
            margin-bottom: 1.5rem;
            animation: heroText 0.8s ease-out;
        }

        @keyframes heroText {
            0% { transform: translateY(50px) scale(0.8); opacity: 0; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }

        .hero-subtitle {
            font-family: 'Permanent Marker', cursive;
            font-size: clamp(1.2rem, 4vw, 2rem);
            color: var(--dark);
            margin-bottom: 3rem;
            transform: rotate(-2deg);
        }

        .cta-buttons {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 18px 40px;
            font-family: 'Outfit', sans-serif;
            font-size: 1.1rem;
            font-weight: 800;
            border: 4px solid var(--dark);
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            display: inline-block;
        }

        .btn-primary {
            background: var(--yellow);
            color: var(--dark);
            box-shadow: 6px 6px 0 var(--dark);
        }

        .btn-primary:hover {
            transform: translate(3px, 3px);
            box-shadow: 3px 3px 0 var(--dark);
        }

        .btn-secondary {
            background: transparent;
            color: var(--dark);
            box-shadow: 6px 6px 0 var(--pink-dark);
        }

        .btn-secondary:hover {
            background: var(--pink);
            transform: translate(3px, 3px);
            box-shadow: 3px 3px 0 var(--pink-dark);
        }

        /* Stats Section */
        .stats {
            background: var(--dark);
            padding: 5rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .stats::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 30px;
            background: repeating-linear-gradient(
                90deg,
                var(--pink) 0px,
                var(--pink) 30px,
                var(--yellow) 30px,
                var(--yellow) 60px
            );
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .stat-item {
            text-align: center;
            color: var(--cream);
            cursor: pointer;
            overflow: hidden;
            position: relative;
            height: 120px;
        }

        .stat-content {
            transition: transform 0.1s ease-out;
        }

        .stat-item.spinning .stat-content {
            animation: slotSpin 0.1s linear infinite;
        }

        @keyframes slotSpin {
            0% { transform: translateY(0); }
            100% { transform: translateY(-20px); }
        }

        .stat-item.landing .stat-content {
            animation: slotLand 0.3s ease-out forwards;
        }

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

        .stat-number {
            font-family: 'Bangers', cursive;
            font-size: 4rem;
            color: var(--yellow);
            display: block;
            text-shadow: 3px 3px 0 var(--pink);
        }

        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-top: 0.5rem;
        }

        .stat-item:hover .stat-number {
            animation: shake 0.5s ease-in-out;
        }

        .stat-item.spinning:hover .stat-number,
        .stat-item.landing:hover .stat-number {
            animation: none;
        }

        @keyframes shake {
            0%, 100% { transform: rotate(0); }
            25% { transform: rotate(-5deg); }
            75% { transform: rotate(5deg); }
        }

        /* Features Section */
        .features {
            padding: 6rem 2rem;
            background: linear-gradient(180deg, var(--yellow-light) 0%, var(--cream) 100%);
            position: relative;
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-header h2 {
            font-family: 'Bangers', cursive;
            font-size: clamp(2.5rem, 8vw, 5rem);
            color: var(--pink-dark);
            text-shadow: 4px 4px 0 var(--yellow);
            margin-bottom: 1rem;
        }

        .section-header p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
            color: var(--dark);
            opacity: 0.8;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            background: white;
            border: 4px solid var(--dark);
            padding: 2.5rem;
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 8px 8px 0 var(--pink);
        }

        .feature-card:nth-child(even) {
            box-shadow: 8px 8px 0 var(--yellow-dark);
        }

        .feature-card:hover {
            transform: translate(-4px, -4px);
            box-shadow: 12px 12px 0 var(--pink);
        }

        .feature-card:nth-child(even):hover {
            box-shadow: 12px 12px 0 var(--yellow-dark);
        }

        .feature-icon {
            font-size: 3rem;
            margin-bottom: 1.5rem;
            display: block;
        }

        .feature-card h3 {
            font-family: 'Permanent Marker', cursive;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--dark);
        }

        .feature-card p {
            color: var(--dark);
            opacity: 0.8;
            line-height: 1.6;
        }

        .feature-tag {
            position: absolute;
            top: -12px;
            right: 20px;
            background: var(--pink);
            color: white;
            padding: 4px 12px;
            font-size: 0.75rem;
            font-weight: 800;
            border: 2px solid var(--dark);
            transform: rotate(3deg);
        }

        /* Generator Callout */
        .generator-callout {
            background: var(--dark);
            padding: 4rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .generator-callout::before,
        .generator-callout::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 20px;
            background: repeating-linear-gradient(
                90deg,
                var(--pink) 0px,
                var(--pink) 20px,
                var(--yellow) 20px,
                var(--yellow) 40px
            );
        }

        .generator-callout::before {
            top: 0;
        }

        .generator-callout::after {
            bottom: 0;
        }

        .callout-content h2 {
            font-family: 'Bangers', cursive;
            font-size: clamp(2rem, 6vw, 4rem);
            color: var(--yellow);
            text-shadow: 3px 3px 0 var(--pink);
            margin-bottom: 1rem;
        }

        .callout-content p {
            color: var(--cream);
            font-size: 1.2rem;
            max-width: 500px;
            margin: 0 auto 2rem;
            opacity: 0.9;
        }

        .cta-button {
            display: inline-block;
            background: var(--yellow);
            color: var(--dark);
            padding: 1rem 2.5rem;
            font-family: 'Outfit', sans-serif;
            font-size: 1.1rem;
            font-weight: 800;
            text-decoration: none;
            border: 4px solid var(--cream);
            box-shadow: 6px 6px 0 var(--pink);
            transition: all 0.2s ease;
        }

        .cta-button:hover {
            transform: translate(3px, 3px);
            box-shadow: 3px 3px 0 var(--pink);
            background: var(--pink);
            color: white;
            border-color: var(--pink);
        }

        @media (max-width: 768px) {
            .generator-callout {
                padding: 3rem 1.5rem;
            }

            .callout-content p {
                font-size: 1rem;
            }
        }

        /* Testimonials */
        .testimonials {
            background: var(--pink);
            padding: 6rem 2rem;
            position: relative;
            overflow: hidden;
        }

        .testimonials::before,
        .testimonials::after {
            content: '💪';
            position: absolute;
            font-size: 15rem;
            opacity: 0.1;
        }

        .testimonials::before {
            top: -50px;
            left: -50px;
        }

        .testimonials::after {
            bottom: -50px;
            right: -50px;
            transform: scaleX(-1);
        }

        .testimonials .section-header h2 {
            color: var(--dark);
            text-shadow: 4px 4px 0 var(--yellow);
        }

        .testimonials .section-header p {
            color: var(--dark);
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .testimonial-card {
            background: var(--cream);
            border: 4px solid var(--dark);
            padding: 2rem;
            position: relative;
            transform: rotate(-1deg);
            transition: transform 0.3s ease;
        }

        .testimonial-card:nth-child(even) {
            transform: rotate(1deg);
        }

        .testimonial-card:hover {
            transform: rotate(0deg) scale(1.02);
        }

        .testimonial-quote {
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .author-avatar {
            width: 50px;
            height: 50px;
            background: var(--yellow);
            border: 3px solid var(--dark);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .author-info h4 {
            font-family: 'Permanent Marker', cursive;
            font-size: 1rem;
        }

        .author-info span {
            font-size: 0.85rem;
            opacity: 0.7;
        }

        .stars {
            position: absolute;
            top: 15px;
            right: 15px;
            color: var(--yellow-dark);
            font-size: 1.2rem;
        }

        /* Pricing */
        .pricing {
            padding: 6rem 2rem;
            background: linear-gradient(180deg, var(--cream) 0%, var(--yellow-light) 100%);
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .pricing-card {
            background: white;
            border: 4px solid var(--dark);
            padding: 2.5rem;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
        }

        .pricing-card.featured {
            background: var(--yellow);
            transform: scale(1.05);
            box-shadow: 12px 12px 0 var(--pink-dark);
        }

        .pricing-card:not(.featured) {
            box-shadow: 8px 8px 0 var(--dark);
        }

        .pricing-card:hover {
            transform: translateY(-10px);
        }

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-10px);
        }

        .popular-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--pink-dark);
            color: white;
            padding: 6px 20px;
            font-weight: 800;
            font-size: 0.8rem;
            border: 3px solid var(--dark);
        }

        .pricing-tier {
            font-family: 'Permanent Marker', cursive;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .pricing-price {
            font-family: 'Bangers', cursive;
            font-size: 4rem;
            color: var(--pink-dark);
            margin-bottom: 0.5rem;
        }

        .pricing-period {
            font-size: 0.9rem;
            opacity: 0.7;
            margin-bottom: 2rem;
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 2rem;
            text-align: left;
        }

        .pricing-features li {
            padding: 0.7rem 0;
            border-bottom: 2px dashed var(--dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .pricing-features li::before {
            content: '✓';
            color: var(--pink-dark);
            font-weight: bold;
        }

        /* Newsletter */
        .newsletter {
            background: var(--dark);
            padding: 5rem 2rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .newsletter::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 20px;
            background: repeating-linear-gradient(
                90deg,
                var(--yellow) 0px,
                var(--yellow) 20px,
                var(--pink) 20px,
                var(--pink) 40px
            );
        }

        .newsletter h2 {
            font-family: 'Bangers', cursive;
            font-size: clamp(2rem, 6vw, 4rem);
            color: var(--yellow);
            text-shadow: 3px 3px 0 var(--pink);
            margin-bottom: 1rem;
        }

        .newsletter p {
            color: var(--cream);
            font-size: 1.1rem;
            max-width: 500px;
            margin: 0 auto 2rem;
            opacity: 0.9;
        }

        .newsletter-form {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 500px;
            margin: 0 auto;
        }

        .newsletter-form input {
            flex: 1;
            min-width: 250px;
            padding: 15px 20px;
            border: 4px solid var(--yellow);
            background: transparent;
            color: var(--cream);
            font-size: 1rem;
            font-family: 'Outfit', sans-serif;
        }

        .newsletter-form input::placeholder {
            color: var(--cream);
            opacity: 0.6;
        }

        .newsletter-form button {
            padding: 15px 30px;
            background: var(--pink);
            color: white;
            border: 4px solid var(--yellow);
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .newsletter-form button:hover {
            background: var(--yellow);
            color: var(--dark);
        }

        /* Footer */
        footer {
            background: var(--pink-dark);
            padding: 3rem 2rem;
            text-align: center;
        }

        .footer-logo {
            font-family: 'Bangers', cursive;
            font-size: 2.5rem;
            color: var(--yellow);
            margin-bottom: 1rem;
        }

        .footer-tagline {
            color: var(--cream);
            margin-bottom: 2rem;
            font-size: 1rem;
        }

        .footer-links {
            display: flex;
            gap: 2rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .footer-links a {
            color: var(--cream);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--yellow);
        }

        .footer-copy {
            color: var(--cream);
            opacity: 0.7;
            font-size: 0.9rem;
        }

        .footer-tech {
            color: var(--cream);
            opacity: 0.4;
            font-size: 0.7rem;
            margin-bottom: 0.5rem;
            transition: opacity 0.3s ease;
        }

        .footer-tech:hover {
            opacity: 0.8;
        }

        /* Corner Banner */
        .corner-banner {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            overflow: hidden;
            width: 200px;
            height: 200px;
            pointer-events: none;
        }

        .corner-banner a {
            position: absolute;
            display: block;
            width: 300px;
            padding: 12px 0;
            background: var(--pink-dark);
            color: var(--yellow);
            text-align: center;
            font-family: 'Bangers', cursive;
            font-size: 1rem;
            letter-spacing: 1px;
            text-decoration: none;
            transform: rotate(-45deg) translate(-85px, -10px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            border-top: 3px dashed var(--yellow);
            border-bottom: 3px dashed var(--yellow);
            pointer-events: auto;
            transition: all 0.3s ease;
            animation: bannerPulse 2s ease-in-out infinite;
        }

        .corner-banner a:hover {
            background: var(--yellow);
            color: var(--pink-dark);
            transform: rotate(-45deg) translate(-85px, -10px) scale(1.05);
        }

        @keyframes bannerPulse {
            0%, 100% { box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
            50% { box-shadow: 0 4px 20px rgba(255,107,157,0.6); }
        }

        @media (max-width: 768px) {
            .corner-banner {
                width: 150px;
                height: 150px;
            }
            .corner-banner a {
                width: 220px;
                padding: 8px 0;
                font-size: 0.75rem;
                transform: rotate(-45deg) translate(-65px, -5px);
            }
            .corner-banner a:hover {
                transform: rotate(-45deg) translate(-65px, -5px) scale(1.05);
            }
        }

        /* Spinning Badge */
        .spinning-badge {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 100px;
            height: 100px;
            z-index: 100;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .spinning-badge:hover {
            transform: scale(1.1);
        }

        .spinning-badge svg {
            width: 100%;
            height: 100%;
            animation: spin 10s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .badge-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
        }

        /* Responsive - Tablet */
        @media (max-width: 968px) {
            .features-grid,
            .testimonials-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .pricing-card.featured:hover {
                transform: translateY(-10px);
            }
        }

        /* Responsive - Mobile */
        @media (max-width: 768px) {
            .marquee-banner {
                font-size: 1rem;
                padding: 10px 0;
            }

            .hero {
                padding: 1.5rem;
                min-height: 100svh;
            }

            .hero h1 {
                letter-spacing: 4px;
            }

            .hero-subtitle {
                font-size: 1.1rem;
            }

            .badge {
                font-size: 0.8rem;
                padding: 6px 16px;
            }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }

            .btn {
                width: 100%;
                max-width: 300px;
                text-align: center;
                padding: 16px 30px;
            }

            .floater {
                font-size: 2rem;
            }

            .floater:nth-child(4) {
                font-size: 2.5rem;
            }

            /* Stats */
            .stats {
                padding: 4rem 1.5rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
            }

            .stat-number {
                font-size: 2.8rem;
            }

            .stat-label {
                font-size: 0.9rem;
            }

            /* Features */
            .features {
                padding: 4rem 1.5rem;
            }

            .section-header {
                margin-bottom: 3rem;
            }

            .section-header p {
                font-size: 1rem;
                padding: 0 1rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .feature-card {
                padding: 2rem;
                box-shadow: 6px 6px 0 var(--pink);
            }

            .feature-card:nth-child(even) {
                box-shadow: 6px 6px 0 var(--yellow-dark);
            }

            .feature-icon {
                font-size: 2.5rem;
            }

            /* Testimonials */
            .testimonials {
                padding: 4rem 1.5rem;
            }

            .testimonials::before,
            .testimonials::after {
                font-size: 8rem;
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            .testimonial-card {
                transform: none !important;
            }

            .testimonial-quote {
                font-size: 1rem;
            }

            /* Pricing */
            .pricing {
                padding: 4rem 1.5rem;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .pricing-card {
                padding: 2rem;
            }

            .pricing-price {
                font-size: 3rem;
            }

            /* Newsletter */
            .newsletter {
                padding: 4rem 1.5rem;
            }

            .newsletter p {
                font-size: 1rem;
            }

            .newsletter-form {
                flex-direction: column;
                align-items: stretch;
            }

            .newsletter-form input {
                min-width: unset;
                width: 100%;
            }

            .newsletter-form button {
                width: 100%;
            }

            /* Footer */
            footer {
                padding: 2.5rem 1.5rem;
            }

            .footer-logo {
                font-size: 2rem;
            }

            .footer-links {
                flex-direction: column;
                gap: 1rem;
            }

            /* Spinning badge */
            .spinning-badge {
                width: 70px;
                height: 70px;
                bottom: 20px;
                right: 20px;
            }

            .badge-center {
                font-size: 1.5rem;
            }
        }

        /* Responsive - Small Mobile */
        @media (max-width: 380px) {
            .hero h1 {
                letter-spacing: 2px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
            }

            .stat-number {
                font-size: 3.5rem;
            }

            .pricing-price {
                font-size: 2.5rem;
            }

            .spinning-badge {
                width: 60px;
                height: 60px;
                bottom: 15px;
                right: 15px;
            }

            .badge-center {
                font-size: 1.2rem;
            }
        }

        /* Easter egg */
        .page-content.konami-activated {
            animation: rainbow 2s linear infinite;
        }

        @keyframes rainbow {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(360deg); }
        }

        /* Draggable Logo Secret */
        #draggableLogo {
            cursor: grab;
            user-select: none;
            position: relative;
            z-index: 2;
        }

        #draggableLogo:active {
            cursor: grabbing;
        }

        #draggableLogo.dragging {
            opacity: 0.8;
        }

        .secret-duck-game {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--dark);
            border: 4px solid var(--yellow);
            border-radius: 20px;
            padding: 1.5rem 2rem;
            text-align: center;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .secret-duck-game.revealed {
            opacity: 1;
            pointer-events: auto;
        }

        .secret-duck-game h4 {
            font-family: 'Permanent Marker', cursive;
            color: var(--yellow);
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }

        .secret-duck-game p {
            color: var(--cream);
            font-size: 0.8rem;
            margin-bottom: 1rem;
            opacity: 0.8;
        }

        .dancing-duck {
            font-size: 4rem;
            display: block;
            transition: transform 0.1s ease;
        }

        .dancing-duck.dance-up {
            animation: danceUp 0.2s ease;
        }

        .dancing-duck.dance-down {
            animation: danceDown 0.2s ease;
        }

        .dancing-duck.dance-left {
            animation: danceLeft 0.2s ease;
        }

        .dancing-duck.dance-right {
            animation: danceRight 0.2s ease;
        }

        @keyframes danceUp {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(-10deg); }
        }

        @keyframes danceDown {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(20px) rotate(10deg); }
        }

        @keyframes danceLeft {
            0%, 100% { transform: translateX(0) scaleX(1); }
            50% { transform: translateX(-20px) scaleX(-1); }
        }

        @keyframes danceRight {
            0%, 100% { transform: translateX(0) scaleX(1); }
            50% { transform: translateX(20px) scaleX(1); }
        }

        .duck-dance-counter {
            color: var(--pink);
            font-family: 'Bangers', cursive;
            font-size: 1.2rem;
            margin-top: 0.5rem;
        }

        /* Fake Dark Mode Toggle */
        .darkmode-toggle {
            position: fixed;
            top: 80px;
            right: 20px;
            background: var(--dark);
            color: var(--cream);
            border: 3px solid var(--yellow);
            padding: 8px 12px;
            font-family: 'Outfit', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }

        .darkmode-toggle:hover {
            background: var(--yellow);
            color: var(--dark);
        }

        .darkmode-toggle .icon {
            font-size: 1.1rem;
        }

        .darkmode-message {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8);
            background: var(--dark);
            color: var(--cream);
            border: 6px solid var(--yellow);
            box-shadow: 12px 12px 0 var(--pink);
            padding: 2rem 3rem;
            text-align: center;
            z-index: 1001;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .darkmode-message.show {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            pointer-events: auto;
        }

        .darkmode-message h3 {
            font-family: 'Bangers', cursive;
            font-size: 1.8rem;
            color: var(--yellow);
            margin-bottom: 1rem;
        }

        .darkmode-message p {
            margin-bottom: 0.5rem;
        }

        .darkmode-message .emoji {
            font-size: 3rem;
            display: block;
            margin-bottom: 1rem;
        }

        .darkmode-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .darkmode-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        @media (max-width: 768px) {
            .darkmode-toggle {
                top: 70px;
                right: 10px;
                padding: 6px 10px;
                font-size: 0.75rem;
            }

            .darkmode-message {
                margin: 1rem;
                padding: 1.5rem;
                left: 1rem;
                right: 1rem;
                width: auto;
                transform: translate(0, -50%) scale(0.8);
            }

            .darkmode-message.show {
                transform: translate(0, -50%) scale(1);
            }
        }

        /* Custom Tuff Alert */
        .tuff-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
        }

        .tuff-alert-overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        .tuff-alert {
            background: var(--dark);
            color: var(--cream);
            border: 6px solid var(--yellow);
            box-shadow: 12px 12px 0 var(--pink);
            padding: 2rem;
            max-width: 450px;
            width: 100%;
            text-align: center;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }

        .tuff-alert-overlay.show .tuff-alert {
            transform: scale(1);
        }

        .tuff-alert h3 {
            font-family: 'Bangers', cursive;
            font-size: 1.5rem;
            color: var(--yellow);
            margin-bottom: 1rem;
        }

        .tuff-alert p {
            margin-bottom: 0.5rem;
            line-height: 1.5;
        }

        .tuff-alert-btn {
            background: var(--yellow);
            color: var(--dark);
            border: 4px solid var(--cream);
            padding: 0.75rem 2rem;
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            margin-top: 1.5rem;
            transition: all 0.2s;
        }

        .tuff-alert-btn:hover {
            background: var(--pink);
            color: white;
            border-color: var(--pink);
        }

        /* Cookie Banner */
        .cookie-banner {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--dark);
            color: var(--cream);
            padding: 1.5rem 2rem;
            z-index: 1000;
            border-top: 4px solid var(--yellow);
            transform: translateY(100%);
            animation: slideUp 0.5s ease 1s forwards;
        }

        .cookie-banner.hidden {
            display: none;
        }

        @keyframes slideUp {
            to { transform: translateY(0); }
        }

        .cookie-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .cookie-text {
            flex: 1;
            min-width: 280px;
        }

        .cookie-text h3 {
            font-family: 'Permanent Marker', cursive;
            color: var(--yellow);
            margin-bottom: 0.5rem;
            font-size: 1.2rem;
        }

        .cookie-text p {
            font-size: 0.95rem;
            opacity: 0.9;
            line-height: 1.5;
        }

        .cookie-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .cookie-btn {
            padding: 12px 24px;
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            border: 3px solid var(--yellow);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .cookie-btn-accept {
            background: var(--yellow);
            color: var(--dark);
        }

        .cookie-btn-accept:hover {
            background: var(--pink);
            border-color: var(--pink);
            color: white;
        }

        .cookie-btn-reject {
            background: transparent;
            color: var(--yellow);
        }

        .cookie-btn-reject:hover {
            background: var(--pink);
            border-color: var(--pink);
            color: white;
        }

        .cookie-btn-settings {
            background: transparent;
            color: var(--cream);
            border-color: var(--cream);
            opacity: 0.7;
        }

        .cookie-btn-settings:hover {
            opacity: 1;
            border-color: var(--pink);
            color: var(--pink);
        }

        @media (max-width: 768px) {
            .cookie-banner {
                padding: 1.2rem 1.5rem;
            }

            .cookie-content {
                flex-direction: column;
                text-align: center;
            }

            .cookie-buttons {
                width: 100%;
                justify-content: center;
            }

            .cookie-btn {
                flex: 1;
                min-width: 100px;
            }
        }

        /* Achievement Popup */
        .achievement {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--dark);
            border: 4px solid var(--yellow);
            padding: 1rem 1.5rem;
            z-index: 1001;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 6px 6px 0 var(--pink);
            transform: translateX(150%);
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            max-width: 320px;
        }

        .achievement.show {
            transform: translateX(0);
        }

        .achievement-icon {
            font-size: 2.5rem;
            flex-shrink: 0;
        }

        .achievement-content h4 {
            font-family: 'Permanent Marker', cursive;
            color: var(--yellow);
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }

        .achievement-content p {
            color: var(--cream);
            font-size: 0.85rem;
            line-height: 1.3;
        }

        @media (max-width: 768px) {
            .achievement {
                top: 20px;
                bottom: auto;
                right: 10px;
                left: 10px;
                max-width: none;
            }
        }

        /* TuffBot Chat Widget */
        /* TuffBot Speech Bubble */
        .tuffbot-bubble {
            position: fixed;
            bottom: 30px;
            left: 115px;
            background: var(--yellow);
            border: 3px solid var(--dark);
            border-radius: 12px;
            padding: 0.6rem 1rem;
            font-family: 'Outfit', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--dark);
            z-index: 1001;
            cursor: pointer;
            box-shadow: 3px 3px 0 var(--pink-dark);
            animation: bubbleWobble 3s ease-in-out infinite, bubbleFadeIn 0.5s ease-out;
            max-width: 180px;
            line-height: 1.3;
        }

        .tuffbot-bubble::before {
            content: '';
            position: absolute;
            left: -12px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 12px solid var(--dark);
        }

        .tuffbot-bubble.hidden {
            display: none;
        }

        @keyframes bubbleWobble {
            0%, 100% { transform: rotate(-1deg); }
            50% { transform: rotate(1deg); }
        }

        @keyframes bubbleFadeIn {
            from { opacity: 0; transform: translateX(-10px) rotate(-1deg); }
            to { opacity: 1; transform: translateX(0) rotate(-1deg); }
        }

        .tuffbot-toggle {
            position: fixed;
            bottom: 30px;
            left: 30px;
            width: 60px;
            height: 60px;
            background: var(--pink);
            border: 4px solid var(--dark);
            border-radius: 50%;
            cursor: pointer;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            box-shadow: 4px 4px 0 var(--dark);
            transition: all 0.2s ease;
        }

        .tuffbot-toggle:hover {
            transform: scale(1.1);
            background: var(--yellow);
        }

        .tuffbot-window {
            position: fixed;
            bottom: 100px;
            left: 30px;
            width: 340px;
            height: 420px;
            background: var(--cream);
            border: 4px solid var(--dark);
            box-shadow: 8px 8px 0 var(--pink);
            z-index: 1000;
            display: none;
            flex-direction: column;
            overflow: hidden;
        }

        .tuffbot-window.open {
            display: flex;
        }

        .tuffbot-header {
            background: var(--dark);
            color: var(--yellow);
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .tuffbot-avatar {
            width: 40px;
            height: 40px;
            background: var(--yellow);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            border: 2px solid var(--cream);
        }

        .tuffbot-info h3 {
            font-family: 'Permanent Marker', cursive;
            font-size: 1rem;
            margin: 0;
        }

        .tuffbot-info span {
            font-size: 0.75rem;
            color: var(--pink-light);
        }

        .tuffbot-close {
            margin-left: auto;
            background: none;
            border: none;
            color: var(--cream);
            font-size: 1.5rem;
            cursor: pointer;
            opacity: 0.7;
        }

        .tuffbot-close:hover {
            opacity: 1;
        }

        .tuffbot-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .tuffbot-message {
            max-width: 85%;
            padding: 0.75rem 1rem;
            border-radius: 12px;
            font-size: 0.9rem;
            line-height: 1.4;
        }

        .tuffbot-message.bot {
            background: var(--pink-light);
            align-self: flex-start;
            border-bottom-left-radius: 4px;
        }

        .tuffbot-message.user {
            background: var(--yellow);
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }

        .tuffbot-typing {
            display: flex;
            gap: 4px;
            padding: 0.75rem 1rem;
            background: var(--pink-light);
            align-self: flex-start;
            border-radius: 12px;
            border-bottom-left-radius: 4px;
        }

        .tuffbot-typing span {
            width: 8px;
            height: 8px;
            background: var(--pink-dark);
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .tuffbot-typing span:nth-child(2) { animation-delay: 0.2s; }
        .tuffbot-typing span:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-6px); }
        }

        .tuffbot-input {
            display: flex;
            border-top: 3px solid var(--dark);
        }

        .tuffbot-input input {
            flex: 1;
            padding: 1rem;
            border: none;
            font-family: 'Outfit', sans-serif;
            font-size: 0.9rem;
            background: white;
        }

        .tuffbot-input input::placeholder {
            color: #999;
        }

        .tuffbot-input button {
            padding: 1rem 1.25rem;
            background: var(--yellow);
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            transition: background 0.2s;
        }

        .tuffbot-input button:hover {
            background: var(--pink);
        }

        .tuffbot-window.meh-wobble {
            animation: mehWobble 1.2s ease-in-out;
        }

        @keyframes mehWobble {
            0% { transform: rotate(0deg); }
            15% { transform: rotate(-2deg); }
            35% { transform: rotate(1.5deg); }
            55% { transform: rotate(-1deg); }
            75% { transform: rotate(0.5deg); }
            100% { transform: rotate(0deg); }
        }

        /* SQL Injection Glitch Effect - Old TV Static */
        .sql-glitch-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 99999;
            opacity: 0;
            mix-blend-mode: overlay;
        }

        .sql-glitch-overlay.active {
            opacity: 1;
            animation: sqlGlitchOverlay 2s steps(1) forwards;
        }

        .sql-glitch-overlay::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 255, 0, 0.03) 2px,
                rgba(0, 255, 0, 0.03) 4px
            );
            animation: sqlScanlines 0.05s linear infinite;
        }

        .sql-glitch-overlay.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.15;
            animation: sqlStatic 0.1s steps(5) infinite;
        }

        @keyframes sqlGlitchOverlay {
            0%, 100% { opacity: 0; }
            5%, 95% { opacity: 1; }
        }

        @keyframes sqlScanlines {
            0% { transform: translateY(0); }
            100% { transform: translateY(4px); }
        }

        @keyframes sqlStatic {
            0% { transform: translate(0, 0); }
            20% { transform: translate(-2%, 2%); }
            40% { transform: translate(2%, -1%); }
            60% { transform: translate(-1%, -2%); }
            80% { transform: translate(1%, 1%); }
            100% { transform: translate(0, 0); }
        }

        /* Hacker text overlay */
        .sql-glitch-text {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 100000;
            display: none;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: #0f0;
            overflow: hidden;
            text-shadow: 0 0 5px #0f0;
        }

        .sql-glitch-text.active {
            display: block;
            animation: sqlTextFade 2s ease-out forwards;
        }

        .sql-glitch-text span {
            position: absolute;
            white-space: nowrap;
            animation: sqlTextScroll 0.5s linear infinite;
        }

        @keyframes sqlTextFade {
            0% { opacity: 0.8; }
            50% { opacity: 0.6; }
            100% { opacity: 0; }
        }

        @keyframes sqlTextScroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-20px); }
        }

        body.sql-glitch {
            animation: sqlBodyGlitch 2s steps(1);
        }

        @keyframes sqlBodyGlitch {
            0% { filter: none; transform: translate(0) skewX(0); }
            2% { filter: none; transform: translate(-5px, 2px) skewX(-1deg); clip-path: inset(10% 0 60% 0); }
            4% { filter: none; transform: translate(5px, -2px) skewX(1deg); clip-path: inset(40% 0 20% 0); }
            5% { filter: none; transform: translate(0) skewX(0); clip-path: none; }
            8% { filter: hue-rotate(90deg) saturate(2); transform: translate(-3px, 0); }
            10% { filter: none; transform: translate(0); }
            15% { filter: invert(1); transform: translate(4px, -3px) skewX(-2deg); clip-path: inset(20% 0 50% 0); }
            17% { filter: none; transform: translate(0) skewX(0); clip-path: none; }
            20% { filter: none; transform: translate(-8px, 0); clip-path: inset(70% 0 5% 0); }
            22% { filter: none; transform: translate(8px, 0); clip-path: inset(5% 0 70% 0); }
            24% { filter: none; transform: translate(0); clip-path: none; }
            30% { filter: brightness(2) contrast(2); transform: translate(0, -2px); }
            32% { filter: none; transform: translate(0); }
            40% { filter: hue-rotate(180deg); transform: translate(-2px, 3px) skewX(1deg); }
            42% { filter: none; transform: translate(0) skewX(0); }
            50% { filter: saturate(0) brightness(1.5); transform: translate(3px, 0); clip-path: inset(30% 0 30% 0); }
            52% { filter: none; transform: translate(0); clip-path: none; }
            60% { filter: none; transform: translate(-4px, -1px) skewX(-1deg); }
            62% { filter: none; transform: translate(4px, 1px) skewX(1deg); }
            64% { filter: none; transform: translate(0) skewX(0); }
            70% { filter: invert(1) hue-rotate(180deg); transform: translate(0, 4px); }
            72% { filter: none; transform: translate(0); }
            80% { filter: none; transform: translate(-3px, 0); clip-path: inset(50% 0 20% 0); }
            82% { filter: none; transform: translate(0); clip-path: none; }
            90% { filter: brightness(0.5); transform: translate(2px, -2px); }
            92% { filter: brightness(2); transform: translate(-2px, 2px); }
            94% { filter: none; transform: translate(0); }
            100% { filter: none; transform: translate(0) skewX(0); clip-path: none; }
        }

        /* RGB split effect on images during glitch */
        body.sql-glitch img,
        body.sql-glitch object,
        body.sql-glitch svg {
            animation: sqlRgbSplit 0.2s steps(1) infinite;
        }

        @keyframes sqlRgbSplit {
            0% { filter: none; }
            25% { filter: drop-shadow(-3px 0 0 rgba(255,0,0,0.5)) drop-shadow(3px 0 0 rgba(0,255,255,0.5)); }
            50% { filter: drop-shadow(2px 0 0 rgba(255,0,255,0.5)) drop-shadow(-2px 0 0 rgba(0,255,0,0.5)); }
            75% { filter: drop-shadow(-2px 0 0 rgba(0,0,255,0.5)) drop-shadow(2px 0 0 rgba(255,255,0,0.5)); }
            100% { filter: none; }
        }

        @media (max-width: 768px) {
            .tuffbot-bubble {
                bottom: 20px;
                left: 85px;
                font-size: 0.75rem;
                padding: 0.5rem 0.8rem;
                max-width: 150px;
            }

            .tuffbot-toggle {
                bottom: 20px;
                left: 20px;
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }

            .tuffbot-window {
                left: 10px;
                right: 10px;
                bottom: 80px;
                width: auto;
                height: 350px;
            }
        }

        /* Breaking News Ticker */
        .breaking-news {
            position: fixed;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--dark);
            border: 4px solid var(--yellow);
            padding: 1rem 2rem;
            z-index: 1002;
            box-shadow: 6px 6px 0 var(--pink);
            max-width: 90%;
            transition: top 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .breaking-news.show {
            top: 20px;
        }

        .breaking-news-label {
            display: inline-block;
            background: var(--pink);
            color: white;
            padding: 0.2rem 0.6rem;
            font-family: 'Bangers', cursive;
            font-size: 0.9rem;
            letter-spacing: 2px;
            margin-right: 0.75rem;
            animation: breakingPulse 0.5s ease-in-out infinite alternate;
        }

        @keyframes breakingPulse {
            from { opacity: 1; }
            to { opacity: 0.6; }
        }

        .breaking-news-text {
            color: var(--cream);
            font-size: 1rem;
        }

        .breaking-news-close {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 28px;
            height: 28px;
            background: var(--yellow);
            border: 3px solid var(--dark);
            border-radius: 50%;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .breaking-news-close:hover {
            background: var(--pink);
            color: white;
        }

        @media (max-width: 768px) {
            .breaking-news {
                left: 10px;
                right: 10px;
                transform: none;
                max-width: none;
                padding: 0.75rem 1rem;
            }

            .breaking-news.show {
                top: 10px;
            }

            .breaking-news-label {
                display: block;
                margin-bottom: 0.5rem;
                margin-right: 0;
                text-align: center;
            }
        }

        /* Floating Tompouce */
        .floating-tompouce {
            position: fixed;
            font-size: 3rem;
            z-index: 999;
            pointer-events: none;
            animation: tompouceDrift linear forwards;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
        }

        @keyframes tompouceDrift {
            0% {
                transform: translateX(-100px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateX(calc(100vw + 100px)) rotate(360deg);
                opacity: 0;
            }
        }

        /* Floating Banana */
        .floating-banana {
            position: fixed;
            right: 0;
            font-size: 3rem;
            z-index: 999;
            pointer-events: none;
            animation: bananaDrift linear forwards;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
        }

        @keyframes bananaDrift {
            0% {
                transform: translateX(100px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            50% {
                transform: translateX(calc(-50vw)) rotate(-180deg);
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateX(calc(-100vw - 100px)) rotate(-360deg);
                opacity: 0;
            }
        }

        /* Duck Hunt Duck */
        .hunt-duck {
            position: fixed;
            font-size: 2.5rem;
            z-index: 998;
            cursor: crosshair;
            animation: duckFly linear forwards;
            filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
            transition: transform 0.1s;
        }

        .hunt-duck:hover {
            transform: scale(1.2);
        }

        .hunt-duck.shot {
            animation: duckFall 0.5s ease-in forwards !important;
            pointer-events: none;
        }

        @keyframes duckFly {
            0% {
                transform: translateX(-80px) translateY(0);
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            25% {
                transform: translateX(25vw) translateY(-30px);
            }
            50% {
                transform: translateX(50vw) translateY(20px);
            }
            75% {
                transform: translateX(75vw) translateY(-20px);
            }
            95% {
                opacity: 1;
            }
            100% {
                transform: translateX(calc(100vw + 80px)) translateY(0);
                opacity: 0;
            }
        }

        @keyframes duckFall {
            0% {
                transform: rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(720deg);
                opacity: 0;
            }
        }

        /* Hidden Duck Hunt */
        .hidden-duck {
            position: absolute;
            cursor: pointer;
            font-size: 1rem;
            opacity: 0.3;
            transition: all 0.3s ease;
            z-index: 10;
            user-select: none;
        }

        .hidden-duck:hover {
            opacity: 0.7;
            transform: scale(1.3);
        }

        .hidden-duck.found {
            opacity: 1;
            animation: duckFound 0.5s ease-out;
            pointer-events: none;
        }

        @keyframes duckFound {
            0% { transform: scale(1); }
            50% { transform: scale(1.5) rotate(20deg); }
            100% { transform: scale(0) rotate(360deg); opacity: 0; }
        }

        /* === IDLE EFFECTS === */

        /* Duck Footprints - webbed bird feet */
        .duck-footprint {
            position: fixed;
            width: 20px;
            height: 24px;
            z-index: 997;
            pointer-events: none;
            opacity: 0.4;
            transition: opacity 1s ease-out;
        }

        .duck-footprint::before,
        .duck-footprint::after,
        .duck-footprint span {
            content: '';
            position: absolute;
            width: 3px;
            height: 12px;
            background: #FF8C00;
            border-radius: 2px;
        }

        /* Left toe */
        .duck-footprint::before {
            left: 2px;
            top: 0;
            transform: rotate(-25deg);
        }

        /* Middle toe */
        .duck-footprint span {
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }

        /* Right toe */
        .duck-footprint::after {
            right: 2px;
            top: 0;
            transform: rotate(25deg);
        }

        /* Webbing between toes */
        .duck-footprint span::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: -8px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid rgba(255, 140, 0, 0.5);
        }

        /* Floating Clouds */
        .floating-cloud {
            position: fixed;
            left: -100px;
            z-index: 1;
            pointer-events: none;
            animation: cloudDrift linear forwards;
            filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.1));
        }

        @keyframes cloudDrift {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(100vw + 200px));
            }
        }

        /* Idle Sparkles */
        .idle-sparkle {
            position: fixed;
            font-size: 1.5rem;
            z-index: 1000;
            pointer-events: none;
            animation: sparkleAnim 1.5s ease-out forwards;
        }

        @keyframes sparkleAnim {
            0% {
                opacity: 0;
                transform: scale(0) rotate(0deg);
            }
            20% {
                opacity: 1;
                transform: scale(1.2) rotate(20deg);
            }
            50% {
                opacity: 1;
                transform: scale(1) rotate(-10deg);
            }
            100% {
                opacity: 0;
                transform: scale(0.5) rotate(180deg) translateY(-30px);
            }
        }

        /* Duck counter */
        .duck-counter {
            position: fixed;
            bottom: 100px;
            left: 30px;
            background: var(--dark);
            color: var(--yellow);
            padding: 8px 16px;
            border: 3px solid var(--yellow);
            border-radius: 50px;
            font-family: 'Bangers', cursive;
            font-size: 1rem;
            z-index: 998;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }

        .duck-counter.show {
            opacity: 1;
            transform: translateY(0);
        }

        .duck-counter.complete {
            background: var(--yellow);
            color: var(--dark);
            border-color: var(--pink-dark);
        }

        @media (max-width: 768px) {
            .duck-counter {
                bottom: 140px;
                left: 10px;
                font-size: 0.9rem;
                padding: 6px 12px;
            }
        }

        @media (max-width: 768px) {
            .floating-tompouce,
            .floating-banana {
                font-size: 2rem !important;
            }

            .hunt-duck {
                font-size: 2rem;
            }

            .breaking-news-text {
                display: block;
                font-size: 0.9rem;
                line-height: 1.4;
            }
        }

        @media (max-width: 380px) {
            .floating-tompouce,
            .floating-banana {
                font-size: 1.5rem !important;
            }

            .breaking-news {
                padding: 0.6rem 0.8rem;
            }

            .breaking-news-label {
                font-size: 0.75rem;
            }

            .breaking-news-text {
                font-size: 0.8rem;
            }

            .breaking-news-close {
                width: 24px;
                height: 24px;
                font-size: 0.8rem;
            }
        }