<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Play Free Card Games - OnlineCardGames.io</title>
    <meta name="description"
        content="Play free online card games and other games. Enjoy Solitaire, Spider, FreeCell, Scorpion Solitaire, Snake Game and many more - no download required!">

    <!-- Favicon tags -->
    <link rel="apple-touch-icon" sizes="180x180" href="/_assets/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/_assets/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/_assets/favicons/favicon-16x16.png">
    <link rel="manifest" href="/_assets/favicons/site.webmanifest">
    <link rel="mask-icon" href="/_assets/favicons/safari-pinned-tab.svg" color="#0a0a16">
    <link rel="shortcut icon" href="/_assets/favicons/favicon.ico">
    <meta name="msapplication-TileColor" content="#0a0a16">
    <meta name="msapplication-config" content="/_assets/favicons/browserconfig.xml">
    <meta name="theme-color" content="#00ccff">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;500;700&display=swap"
        rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"
        crossorigin="anonymous">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/shared/footer.css">
    <style>
        /* Core Variables */
        :root {
            --primary-color: #00ccff;
            --secondary-color: #ff00aa;
            --accent-color: #FFD700;
            --tertiary-color: #00ffaa;
            --dark-bg: #0a0a16;
            --dark-bg-alt: #0f0f22;
            --cyan-glow: 0 0 10px rgba(0, 204, 255, 0.7), 0 0 20px rgba(0, 204, 255, 0.4);
            --magenta-glow: 0 0 10px rgba(255, 0, 170, 0.7), 0 0 20px rgba(255, 0, 170, 0.4);
            --gold-glow: 0 0 10px rgba(255, 215, 0, 0.7), 0 0 20px rgba(255, 215, 0, 0.4);
        }

        /* Base Styles */
        body {
            background: var(--dark-bg);
            font-family: 'Roboto', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: white;
            overflow-x: hidden;
            position: relative;
        }

        .font-game {
            font-family: 'Press Start 2P', cursive;
        }

        .site-content {
            flex: 1;
            position: relative;
            z-index: 2;
        }

        /* Global Retro Grid Background */
        .retro-grid-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.1;
            background-image:
                linear-gradient(rgba(0, 204, 255, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 204, 255, 0.15) 1px, transparent 1px);
            background-size: 20px 20px;
            transform-origin: center bottom;
            perspective: 1000px;
            transform: rotateX(60deg) translateZ(-100px) scale(2.5);
            animation: gridPulse 20s infinite linear;
        }

        @keyframes gridPulse {

            0%,
            100% {
                opacity: 0.1;
            }

            50% {
                opacity: 0.05;
            }
        }

        /* Scan Line Effect */
        .scan-lines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.1) 50%,
                    rgba(0, 0, 0, 0) 100%);
            background-size: 100% 4px;
            z-index: 900;
            opacity: 0.3;
        }

        /* Reimagined Header */
        .cyber-header {
            position: sticky;
            top: 0;
            z-index: 50;
            background: rgba(10, 10, 22, 0.8);
            border-bottom: 2px solid var(--primary-color);
            box-shadow: 0 0 15px rgba(0, 204, 255, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .nav-link {
            font-family: 'Press Start 2P', cursive;
            font-size: 0.7rem;
            color: white;
            position: relative;
            transition: all 0.3s;
            letter-spacing: 1px;
            padding-bottom: 0.3rem;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));
            transition: width 0.3s ease;
        }

        .nav-link:hover {
            color: var(--primary-color);
            text-shadow: var(--cyan-glow);
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* Mobile Menu */
        #mobile-menu {
            background: var(--dark-bg-alt);
            border-right: 2px solid var(--primary-color);
            box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            transform: translateX(-100%);
        }

        #mobile-menu.active {
            transform: translateX(0);
        }

        .mobile-link {
            font-family: 'Press Start 2P', cursive;
            font-size: 0.7rem;
            color: white;
            padding: 1rem;
            display: block;
            transition: all 0.3s;
            position: relative;
            padding-left: 1.5rem;
        }

        .mobile-link::before {
            content: '>';
            position: absolute;
            left: 0;
            color: var(--primary-color);
            animation: blink 1s infinite;
        }

        .mobile-link:hover {
            color: var(--primary-color);
            transform: translateX(5px);
            text-shadow: var(--cyan-glow);
        }

        /* Hero Section */
        .cyber-hero {
            position: relative;
            overflow: hidden;
            background: var(--dark-bg);
            border-bottom: 2px solid var(--primary-color);
        }

        .cyber-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg,
                    rgba(0, 204, 255, 0.1),
                    rgba(0, 0, 0, 0) 50%,
                    rgba(255, 0, 170, 0.1));
            z-index: 1;
        }

        .hero-container {
            position: relative;
            z-index: 2;
        }

        .hero-title {
            font-family: 'Press Start 2P', cursive;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: var(--cyan-glow);
            animation: titleGlow 3s infinite alternate;
            position: relative;
            display: inline-block;
        }

        @keyframes titleGlow {
            0% {
                filter: drop-shadow(0 0 8px rgba(0, 204, 255, 0.7));
            }

            100% {
                filter: drop-shadow(0 0 12px rgba(0, 204, 255, 0.9));
            }
        }

        .hero-text {
            color: rgba(255, 255, 255, 0.9);
            animation: fadeIn 1s ease-out 0.3s forwards;
            opacity: 0;
            text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
        }

        .hero-image-container {
            position: relative;
            perspective: 1000px;
        }

        .circuit-pattern {
            position: absolute;
            top: -20px;
            right: -20px;
            width: 150px;
            height: 150px;
            background-image:
                radial-gradient(circle, var(--primary-color) 1px, transparent 1px),
                linear-gradient(var(--primary-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--primary-color) 1px, transparent 1px);
            background-size: 10px 10px, 20px 20px, 20px 20px;
            background-position: 0 0, 0 0, 0 0;
            opacity: 0.2;
            border-radius: 50%;
            z-index: 1;
        }

        .ultra-neon-frame {
            position: relative;
            z-index: 1;
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }

        .ultra-neon-frame::before {
            content: '';
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border-radius: 0.75rem;
            background: linear-gradient(45deg, var(--secondary-color), var(--primary-color), var(--tertiary-color), var(--secondary-color));
            background-size: 400% 400%;
            z-index: -1;
            filter: blur(5px);
            animation: neon-glow 6s ease infinite;
            transform: translateZ(-10px);
        }

        .ultra-neon-frame::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 0.75rem;
            background: linear-gradient(45deg, var(--secondary-color), var(--primary-color));
            background-size: 200% 200%;
            z-index: -2;
            opacity: 0.7;
            animation: neon-glow 6s ease infinite reverse;
        }

        @keyframes neon-glow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .hero-image {
            border-radius: 0.75rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
            transform-style: preserve-3d;
            transition: transform 0.5s;
        }

        .ultra-neon-frame:hover .hero-image {
            transform: translateZ(20px);
        }

        /* Cyber Button */
        .cyber-button {
            position: relative;
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            font-family: 'Press Start 2P', cursive;
            font-size: 0.8rem;
            text-transform: uppercase;
            padding: 0.8rem 1.5rem;
            display: inline-block;
            letter-spacing: 1px;
            overflow: hidden;
            transition: 0.3s;
        }

        .cyber-button:hover {
            background: var(--primary-color);
            color: black;
            box-shadow: 0 0 30px rgba(0, 204, 255, 0.7);
            transform: translateY(-3px);
        }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to right,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, 0.3),
                    rgba(255, 255, 255, 0));
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                left: -200%;
                opacity: 0;
            }

            20% {
                left: -100%;
                opacity: 0;
            }

            40% {
                left: 0%;
                opacity: 0.5;
            }

            60% {
                left: 100%;
                opacity: 0;
            }

            100% {
                left: 200%;
                opacity: 0;
            }
        }

        /* Gaming Journey Section */
        .cyber-terminal {
            position: relative;
            background: rgba(10, 10, 22, 0.8);
            border: 1px solid var(--primary-color);
            border-top: 2px solid var(--primary-color);
            box-shadow:
                0 0 20px rgba(0, 204, 255, 0.3),
                inset 0 0 20px rgba(0, 204, 255, 0.2);
            padding: 1.5rem;
            border-radius: 0.5rem;
        }

        .terminal-header {
            border-bottom: 1px solid rgba(0, 204, 255, 0.3);
            margin-bottom: 1rem;
        }

        .terminal-title {
            font-family: 'Press Start 2P', cursive;
            color: var(--primary-color);
            font-size: 0.8rem;
        }

        .typewriter {
            overflow: hidden;
            border-right: 2px solid var(--primary-color);
            white-space: nowrap;
            margin: 0;
            display: inline-block;
            animation: typing 2.5s steps(30) 1s 1 normal both, blink-caret 1s step-end infinite;
        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes blink-caret {

            from,
            to {
                border-color: transparent
            }

            50% {
                border-color: var(--primary-color)
            }
        }

        .terminal-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .cyber-badge {
            background: rgba(6, 182, 212, 0.1);
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding: 4px 8px;
            border-radius: 2px;
            font-family: 'Press Start 2P', cursive;
            letter-spacing: 1px;
            font-size: 0.7rem;
            box-shadow: 0 0 5px rgba(0, 204, 255, 0.3);
        }

        .cyber-glitch-text {
            color: var(--primary-color);
            font-family: 'Press Start 2P', cursive;
            position: relative;
            display: inline-block;
            letter-spacing: 1px;
            text-shadow: 0 0 2px var(--primary-color);
        }

        .cyber-glitch-text::before,
        .cyber-glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--dark-bg);
        }

        .cyber-glitch-text::before {
            left: 2px;
            text-shadow: -1px 0 var(--secondary-color);
            clip: rect(44px, 450px, 56px, 0);
            animation: cyber-glitch-1 5s infinite linear alternate-reverse;
        }

        .cyber-glitch-text::after {
            left: -2px;
            text-shadow: -1px 0 var(--tertiary-color);
            clip: rect(24px, 450px, 36px, 0);
            animation: cyber-glitch-2 5s infinite linear alternate-reverse;
        }

        @keyframes cyber-glitch-1 {
            0% {
                clip-path: inset(45% 0 61% 0);
            }

            20% {
                clip-path: inset(97% 0 1% 0);
            }

            40% {
                clip-path: inset(44% 0 11% 0);
            }

            60% {
                clip-path: inset(23% 0 54% 0);
            }

            80% {
                clip-path: inset(80% 0 19% 0);
            }

            100% {
                clip-path: inset(53% 0 5% 0);
            }
        }

        @keyframes cyber-glitch-2 {
            0% {
                clip-path: inset(70% 0 12% 0);
            }

            20% {
                clip-path: inset(31% 0 58% 0);
            }

            40% {
                clip-path: inset(13% 0 78% 0);
            }

            60% {
                clip-path: inset(62% 0 36% 0);
            }

            80% {
                clip-path: inset(24% 0 67% 0);
            }

            100% {
                clip-path: inset(87% 0 10% 0);
            }
        }

        .cyber-progress {
            margin: 1rem 0;
        }

        .progress-track {
            height: 8px;
            background: rgba(0, 204, 255, 0.1);
            border: 1px solid rgba(0, 204, 255, 0.3);
            position: relative;
            overflow: hidden;
            border-radius: 4px;
        }

        .progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 35%;
            background: linear-gradient(90deg, rgba(0, 204, 255, 0.7), var(--primary-color));
            animation: progress-pulse 3s infinite;
        }

        @keyframes progress-pulse {

            0%,
            100% {
                box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
            }

            50% {
                box-shadow: 0 0 20px rgba(0, 204, 255, 0.8);
            }
        }

        .cyber-value {
            font-family: 'Press Start 2P', cursive;
            font-size: 1.2rem;
            color: var(--primary-color);
            text-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
        }

        .streak-day {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(0, 204, 255, 0.3);
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.8rem;
        }

        .streak-day.completed {
            background: rgba(16, 185, 129, 0.2);
            border-color: rgba(16, 185, 129, 0.5);
            color: #10b981;
        }

        .streak-day.current {
            background: rgba(79, 70, 229, 0.2);
            border-color: rgba(79, 70, 229, 0.5);
            color: #4f46e5;
            animation: pulse-day 1.5s infinite;
        }

        @keyframes pulse-day {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.9;
            }
        }

        .streak-day.bonus {
            background: rgba(251, 191, 36, 0.2);
            border-color: rgba(251, 191, 36, 0.5);
            color: #fbbf24;
        }

        .cyber-button-sm {
            font-family: 'Press Start 2P', cursive;
            font-size: 0.6rem;
            background: linear-gradient(45deg, var(--secondary-color), #ff3dc8);
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            position: relative;
            overflow: hidden;
            display: inline-block;
            transition: all 0.3s;
        }

        .cyber-button-sm:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 0, 170, 0.5);
        }

        /* Featured Games Section */
        .section-title {
            font-family: 'Press Start 2P', cursive;
            color: var(--primary-color);
            text-shadow: var(--cyan-glow);
            position: relative;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .pixel-divider {
            height: 4px;
            width: 200px;
            background: repeating-linear-gradient(90deg, var(--primary-color), var(--primary-color) 8px, transparent 8px, transparent 12px);
            margin: 0.5rem auto 2rem;
        }

        .arcade-cabinet {
            border: 4px solid #1a1a2e;
            background: #0f0f1a;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .cabinet-header {
            background: linear-gradient(90deg, #fbbf24, #f59e0b);
            padding: 0.8rem;
        }

        .cabinet-screen {
            background: #060612;
            border: 2px solid #1a1a2e;
        }

        .cabinet-controls {
            background: #1a1a2e;
            padding: 1rem;
        }

        .joystick-base {
            background: #e11d48;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        }

        .joystick-stick {
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .action-button {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
        }

        .arcade-button {
            background: linear-gradient(to bottom, #fbbf24, #d97706);
            color: black;
            font-family: 'Press Start 2P', cursive;
            font-size: 0.7rem;
            border: none;
            border-radius: 4px;
            padding: 0.7rem 1.4rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            transition: all 0.2s;
        }

        .arcade-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        }

        .shadow-neon-green {
            box-shadow: 0 0 15px rgba(0, 255, 128, 0.5);
        }

        .shadow-neon-blue {
            box-shadow: 0 0 15px rgba(0, 128, 255, 0.5);
        }

        .shadow-neon-red {
            box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
        }

        .shadow-neon-purple {
            box-shadow: 0 0 15px rgba(128, 0, 255, 0.5);
        }

        /* Game Cards */
        .retro-card {
            perspective: 1000px;
            transition: all 0.3s;
        }

        .card-inner {
            transform-style: preserve-3d;
            transition: all 0.6s;
            position: relative;
        }

        .retro-card:hover .card-inner {
            transform: rotateY(5deg) translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
        }

        .retro-card-header {
            position: relative;
            z-index: 5;
        }

        /* Coming Soon Section */
        .cyber-grid-overlay {
            background-image:
                linear-gradient(90deg, rgba(6, 182, 212, 0.15) 1px, transparent 1px),
                linear-gradient(rgba(6, 182, 212, 0.15) 1px, transparent 1px);
            background-size: 20px 20px;
            animation: gridMove 15s linear infinite;
        }

        @keyframes gridMove {
            0% {
                background-position: 0px 0px;
            }

            100% {
                background-position: 40px 40px;
            }
        }

        .neon-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid var(--primary-color);
            animation: pulse-circle 2s infinite alternate;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
        }

        @keyframes pulse-circle {
            0% {
                transform: scale(0.8);
                opacity: 0.7;
            }

            100% {
                transform: scale(1.1);
                opacity: 0.9;
            }
        }

        .cyber-loading-bar {
            width: 30%;
            background: linear-gradient(90deg, var(--primary-color), #0891b2);
            animation: cyber-loading 2s infinite linear;
        }

        @keyframes cyber-loading {
            0% {
                width: 0%;
            }

            50% {
                width: 70%;
            }

            70% {
                width: 70%;
            }

            80% {
                width: 80%;
            }

            95% {
                width: 95%;
            }

            96% {
                width: 80%;
            }

            100% {
                width: 95%;
            }
        }

        .cyber-blinking {
            animation: cyber-blink 1.2s infinite;
        }

        @keyframes cyber-blink {

            0%,
            49% {
                opacity: 1;
            }

            50%,
            100% {
                opacity: 0;
            }
        }

        /* Newsletter Section */
        .newsletter-section {
            position: relative;
            background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9));
            border-top: 2px solid var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
            overflow: hidden;
        }

        .newsletter-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                linear-gradient(90deg, var(--dark-bg) 25%, transparent 25%) center / 50px 50px,
                linear-gradient(var(--dark-bg) 25%, transparent 25%) center / 50px 50px;
            opacity: 0.05;
            z-index: 1;
        }

        .newsletter-content {
            position: relative;
            z-index: 2;
        }

        /* Floating Circuits - Completing the styles */
        .circuit-dot {
            position: absolute;
            width: 200px;
            height: 200px;
            background-image:
                radial-gradient(var(--secondary-color) 1px, transparent 1px),
                radial-gradient(var(--primary-color) 1px, transparent 1px);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
            opacity: 0.05;
            border-radius: 50%;
            z-index: 1;
        }

        .circuit-dot-1 {
            top: 10%;
            left: 5%;
        }

        .circuit-dot-2 {
            bottom: 20%;
            right: 10%;
            width: 300px;
            height: 300px;
            background-size: 15px 15px;
        }

        .circuit-dot-3 {
            top: 40%;
            right: 20%;
            width: 150px;
            height: 150px;
            background-size: 10px 10px;
        }

        /* Global Retro Effects */
        .retro-header {
            width: 100%;
            display: flex;
            justify-content: center;
            text-align: center;
        }

        .retro-header h2 {
            width: auto;
            display: inline-block;
        }

        /* Scan Line Effect - Across the entire site */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: repeating-linear-gradient(0deg,
                    rgba(0, 0, 0, 0.15),
                    rgba(0, 0, 0, 0.15) 1px,
                    transparent 1px,
                    transparent 2px);
            z-index: 999;
            opacity: 0.3;
        }

        /* Digital Glitch Effect */
        @keyframes digital-glitch {

            0%,
            100% {
                transform: translate(0, 0);
                opacity: 1;
            }

            34% {
                transform: translate(2px, 0);
                opacity: 0.8;
            }

            36% {
                transform: translate(-3px, 0);
                opacity: 0.9;
            }

            38% {
                transform: translate(0, -2px);
                opacity: 1;
            }
        }

        .glitch-element {
            animation: digital-glitch 5s infinite;
            animation-delay: calc(var(--delay, 0) * 1s);
        }

        /* Enhanced Circuit Background */
        .circuit-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                linear-gradient(var(--primary-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--primary-color) 1px, transparent 1px);
            background-size: 50px 50px;
            opacity: 0.03;
            z-index: 1;
        }

        /* Data Stream Animation */
        .data-stream {
            position: absolute;
            width: 2px;
            height: 10px;
            background-color: var(--primary-color);
            opacity: 0;
            z-index: 1;
            animation: data-flow 3s infinite linear;
        }

        @keyframes data-flow {
            0% {
                height: 10px;
                opacity: 0;
                transform: translateY(-20px);
            }

            20% {
                opacity: 0.5;
            }

            100% {
                height: 50px;
                opacity: 0;
                transform: translateY(100px);
            }
        }

        /* Random data streams positioned across the page */
        .data-stream:nth-child(1) {
            left: 10%;
            animation-delay: 0s;
        }

        .data-stream:nth-child(2) {
            left: 20%;
            animation-delay: 0.5s;
        }

        .data-stream:nth-child(3) {
            left: 35%;
            animation-delay: 1.5s;
        }

        .data-stream:nth-child(4) {
            left: 65%;
            animation-delay: 0.3s;
        }

        .data-stream:nth-child(5) {
            left: 80%;
            animation-delay: 0.8s;
        }

        .data-stream:nth-child(6) {
            left: 90%;
            animation-delay: 1.2s;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .cyber-button {
                font-size: 0.7rem;
                padding: 0.7rem 1.2rem;
            }

            .circuit-dot {
                opacity: 0.03;
            }
        }

        @media (max-width: 640px) {
            .hero-title {
                font-size: 1.5rem;
            }

            .hero-text {
                font-size: 1rem;
            }

            body::after {
                opacity: 0.2;
            }
        }
    </style>
</head>

<body class="text-white">
    <!-- Global Effects -->
    <div class="retro-grid-bg"></div>
    <div class="scan-lines"></div>

    <!-- Circuit Background Effects -->
    <div class="circuit-background"></div>

    <!-- Data Streams -->
    <div class="data-stream"></div>
    <div class="data-stream"></div>
    <div class="data-stream"></div>
    <div class="data-stream"></div>
    <div class="data-stream"></div>
    <div class="data-stream"></div>

    <!-- Header & Navigation -->
    <header class="cyber-header">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <h1 class="text-xl md:text-2xl font-game pr-6">
                    <a href="/" class="text-white hover:text-yellow-300 transition">OnlineCardGames.io</a>
                </h1>

                <!-- Desktop Navigation -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/all-games" class="nav-link">All Games</a>
                    <a href="/free-solitaire-games" class="nav-link">Classic Solitaire</a>
                </nav>
            </div>

            <!-- Auth Container (populated by header-auth.js) -->
            <div id="auth-container" class="flex items-center space-x-3"></div>

            <!-- Mobile Menu Button -->
            <button id="mobile-menu-button" class="md:hidden text-white ml-3">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div id="mobile-menu" class="md:hidden fixed top-0 left-0 h-full w-64 bg-green-900 shadow-lg p-5 z-50">
            <div class="flex justify-end">
                <button id="close-menu" class="text-white mb-5">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                        class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <nav class="flex flex-col space-y-4">
                <a href="/all-games" class="mobile-link">All Games</a>
                <a href="/free-solitaire-games" class="mobile-link">Free Solitaire</a>
                <a href="#arcade-games" class="mobile-link">Arcade</a>
                <a href="#new-games" class="mobile-link">New Games</a>
            </nav>
        </div>
    </header>

    <!-- Hero Section - Improved Title Readability -->
    <section class="cyber-hero py-10 md:py-20">
        <div class="container mx-auto px-4 hero-container">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 md:pr-8 hero-animation">
                    <!-- Enhanced Hero Title with Better Readability -->
                    <h2 class="text-3xl md:text-4xl lg:text-5xl font-game mb-6 enhanced-hero-title">Play Free Card Games
                        Online</h2>
                    <p class="text-lg md:text-xl mb-6 hero-text">No downloads, no signups, just fun! Choose from dozens
                        of free card games and other classics playable right in your browser.</p>
                    <div class="hero-button">
                        <a href="/all-games" class="cyber-button">
                            Play Now
                        </a>
                    </div>
                </div>
                <!-- ...existing hero image section... -->
                <div class="md:w-1/2 mt-8 md:mt-0 hero-animation">
                    <div class="grid grid-cols-2 gap-3 relative hero-image-container">
                        <div class="transform rotate-3 hover:rotate-0 transition ultra-neon-frame">
                            <img src="images/scorpion-solitaire.jpeg" alt="Scorpion Solitaire"
                                class="rounded-lg shadow-lg relative z-10 hero-image">
                        </div>
                        <div class="transform -rotate-2 hover:rotate-0 transition ultra-neon-frame">
                            <img src="images/snake-game.jpeg" alt="Snake Game"
                                class="rounded-lg shadow-lg relative z-10 hero-image">
                        </div>
                        <div
                            class="absolute inset-0 bg-gradient-to-t from-green-900 via-transparent to-transparent md:hidden">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- REDESIGNED GAME SECTIONS -->
    <main class="site-content py-8">
        <!-- Featured Games - Retro Arcade Style Section -->
        <section id="featured-games" class="container mx-auto px-4 mb-16">
            <div class="retro-header mb-8">
                <h2 class="text-3xl md:text-4xl font-game relative">
                    <span class="retro-glow text-yellow-300">FEATURED GAMES</span>
                    <div class="pixel-underline"></div>
                </h2>
            </div>

            <!-- Arcade Cabinet Style Layout -->
            <div
                class="arcade-cabinet relative overflow-hidden rounded-2xl border-8 border-gray-900 max-w-6xl mx-auto bg-gray-900">
                <!-- Scanline Effect Overlay -->
                <div class="scanlines absolute inset-0 pointer-events-none"></div>

                <!-- Cabinet Header -->
                <div class="cabinet-header bg-gradient-to-r from-yellow-600 via-yellow-500 to-yellow-600 p-4">
                    <div class="flex justify-between items-center">
                        <div class="text-black font-game text-sm md:text-lg tracking-wider">HIGH SCORE: 9999</div>
                        <div class="blinking-text font-game text-sm md:text-lg text-black">INSERT COIN</div>
                    </div>
                </div>

                <!-- Game Display Area -->
                <div class="cabinet-screen p-6 bg-gradient-to-b from-green-900 to-green-800">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
                        <!-- Featured Game - Takes 6 columns on medium+ screens -->
                        <div
                            class="md:col-span-6 featured-game-card transform hover:scale-105 transition-all duration-300">
                            <a href="/scorpion-solitaire/" class="block">
                                <div class="relative rounded-xl overflow-hidden shadow-neon-green">
                                    <img src="_home-page/scorpion-solitaire.jpeg" alt="Scorpion Solitaire"
                                        class="w-full h-auto">

                                    <!-- Pixelated Featured Badge -->
                                    <div
                                        class="absolute top-0 right-0 bg-yellow-400 text-black px-4 py-1 font-game text-sm transform rotate-0 pixel-edges">
                                        FEATURED
                                    </div>

                                    <!-- Game Info with Retro Style -->
                                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-80 p-4">
                                        <div class="flex items-center justify-between">
                                            <h3 class="text-lg md:text-xl font-game text-yellow-400 tracking-wider">
                                                SCORPION</h3>
                                            <span
                                                class="difficulty-pill bg-orange-500 text-black font-bold text-xs px-3 py-1 rounded-full">MEDIUM</span>
                                        </div>
                                        <p class="text-white text-sm mt-1">Build sequences in the same suit</p>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <!-- Other Featured Games - Each takes 3 columns on medium+ screens -->
                        <div class="md:col-span-6">
                            <div class="grid grid-cols-2 gap-4">
                                <!-- Snake Game -->
                                <a href="/snake-game/"
                                    class="game-tile block relative rounded-xl overflow-hidden hover:shadow-neon-green transition-all duration-300">
                                    <img src="images/snake-game.jpeg" alt="Snake Game" class="w-full h-auto">
                                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-2">
                                        <div class="flex items-center justify-between">
                                            <h3 class="text-sm font-game text-green-400">SNAKE</h3>
                                            <span
                                                class="difficulty-pill bg-green-500 text-black font-bold text-xs px-2 py-0.5 rounded-full">EASY</span>
                                        </div>
                                    </div>
                                </a>

                                <!-- Klondike Solitaire -->
                                <a href="/solitaire-turn-one/"
                                    class="game-tile block relative rounded-xl overflow-hidden hover:shadow-neon-blue transition-all duration-300">
                                    <img src="_home-page/classic-solitaire.jpeg" alt="Classic Solitaire"
                                        class="w-full h-auto">
                                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-2">
                                        <div class="flex items-center justify-between">
                                            <h3 class="text-sm font-game text-blue-400">KLONDIKE</h3>
                                            <span
                                                class="difficulty-pill bg-green-500 text-black font-bold text-xs px-2 py-0.5 rounded-full">EASY</span>
                                        </div>
                                    </div>
                                </a>

                                <!-- Spider Solitaire 1 Suit - Fix for difficulty badge -->
                                <a href="/spider-solitaire-one-suit/"
                                    class="game-tile block relative rounded-xl overflow-hidden hover:shadow-neon-red transition-all duration-300">
                                    <img src="_home-page/spider-solitaire-1-suit.jpeg" alt="Spider Solitaire 1 Suit"
                                        class="w-full h-auto">
                                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-2">
                                        <div class="flex items-center justify-between">
                                            <h3 class="text-sm font-game text-red-400">SPIDER 1</h3>
                                            <span
                                                class="difficulty-pill bg-yellow-500 text-black font-bold text-xs px-2 py-0.5 rounded-full">MEDIUM</span>
                                        </div>
                                    </div>
                                </a>

                                <!-- Spider Solitaire 4 Suits -->
                                <a href="/spider-solitaire-four-suits/"
                                    class="game-tile block relative rounded-xl overflow-hidden hover:shadow-neon-purple transition-all duration-300">
                                    <img src="_home-page/spider-solitaire.jpeg" alt="Spider Solitaire 4 Suits"
                                        class="w-full h-auto">
                                    <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-2">
                                        <div class="flex items-center justify-between">
                                            <h3 class="text-sm font-game text-purple-400">SPIDER 4</h3>
                                            <span
                                                class="difficulty-pill bg-red-500 text-black font-bold text-xs px-2 py-0.5 rounded-full">HARD</span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cabinet Controls -->
                <div class="cabinet-controls bg-gray-900 p-4">
                    <div class="flex justify-center gap-8 items-center">
                        <div class="joystick hidden md:block">
                            <div
                                class="joystick-base bg-red-600 rounded-full w-10 h-10 flex items-center justify-center">
                                <div class="joystick-stick bg-red-500 rounded-full w-6 h-6"></div>
                            </div>
                        </div>
                        <a href="/all-games"
                            class="arcade-button bg-gradient-to-r from-yellow-500 to-yellow-400 px-8 py-3 rounded-lg font-game text-black hover:from-yellow-400 hover:to-yellow-300 transition-all">
                            PLAY NOW
                        </a>
                        <div class="hidden md:flex gap-2">
                            <div class="action-button bg-red-600 rounded-full w-8 h-8"></div>
                            <div class="action-button bg-blue-600 rounded-full w-8 h-8"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Solitaire Games Section - Grid with Retro Cards -->
        <section id="solitaire-games" class="container mx-auto px-4 mb-16">
            <div class="retro-header mb-8">
                <h2 class="text-3xl md:text-4xl font-game relative">
                    <span class="retro-glow text-yellow-300">SOLITAIRE GAMES</span>
                    <div class="pixel-underline"></div>
                </h2>
            </div>

            <div class="retro-grid grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-6">
                <!-- Klondike Turn 1 -->
                <a href="/solitaire-turn-one/" class="retro-card block">
                    <div
                        class="card-inner bg-gradient-to-br from-blue-900 to-blue-700 p-1 rounded-lg border-4 border-blue-600 hover:border-blue-400 transition-all duration-300">
                        <div class="retro-card-header bg-blue-800 p-2 flex items-center justify-between rounded-t-sm">
                            <h3 class="text-sm font-game text-blue-300">KLONDIKE 1</h3>
                            <span
                                class="difficulty-tag bg-green-500 text-xs text-black font-bold px-2 py-0.5 rounded">EASY</span>
                        </div>
                        <div class="card-image h-32 overflow-hidden">
                            <img src="_home-page/classic-solitaire.jpeg" alt="Klondike Solitaire"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                </a>

                <!-- Klondike Turn 3 - UPDATED WITH NEW IMAGE -->
                <a href="/solitaire-turn-three/" class="retro-card block">
                    <div
                        class="card-inner bg-gradient-to-br from-purple-900 to-purple-700 p-1 rounded-lg border-4 border-purple-600 hover:border-purple-400 transition-all duration-300">
                        <div class="retro-card-header bg-purple-800 p-2 flex items-center justify-between rounded-t-sm">
                            <h3 class="text-sm font-game text-purple-300">KLONDIKE 3</h3>
                            <span
                                class="difficulty-tag bg-yellow-500 text-xs text-black font-bold px-2 py-0.5 rounded">MEDIUM</span>
                        </div>
                        <div class="card-image h-32 overflow-hidden">
                            <img src="_home-page/klondike-solitaire.jpeg" alt="Klondike Turn 3"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                </a>

                <!-- Spider One Suit -->
                <a href="/spider-solitaire-one-suit/" class="retro-card block">
                    <div
                        class="card-inner bg-gradient-to-br from-green-900 to-green-700 p-1 rounded-lg border-4 border-green-600 hover:border-green-400 transition-all duration-300">
                        <div class="retro-card-header bg-green-800 p-2 flex items-center justify-between rounded-t-sm">
                            <h3 class="text-sm font-game text-green-300">SPIDER 1 SUIT</h3>
                            <span
                                class="difficulty-tag bg-yellow-500 text-xs text-black font-bold px-2 py-0.5 rounded">MEDIUM</span>
                        </div>
                        <div class="card-image h-32 overflow-hidden">
                            <img src="_home-page/spider-solitaire-1-suit.jpeg" alt="Spider Solitaire 1 Suit"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                </a>

                <!-- Spider Four Suits -->
                <a href="/spider-solitaire-four-suits/" class="retro-card block">
                    <div
                        class="card-inner bg-gradient-to-br from-red-900 to-red-700 p-1 rounded-lg border-4 border-red-600 hover:border-red-400 transition-all duration-300">
                        <div class="retro-card-header bg-red-800 p-2 flex items-center justify-between rounded-t-sm">
                            <h3 class="text-sm font-game text-red-300">SPIDER 4 SUITS</h3>
                            <span
                                class="difficulty-tag bg-red-500 text-xs text-black font-bold px-2 py-0.5 rounded">HARD</span>
                        </div>
                        <div class="card-image h-32 overflow-hidden">
                            <img src="_home-page/spider-solitaire.jpeg" alt="Spider Solitaire 4 Suits"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                </a>

                <!-- FreeCell - UPDATED WITH NEW IMAGE -->
                <a href="/freecell-solitaire/" class="retro-card block">
                    <div
                        class="card-inner bg-gradient-to-br from-yellow-900 to-yellow-700 p-1 rounded-lg border-4 border-yellow-600 hover:border-yellow-400 transition-all duration-300">
                        <div class="retro-card-header bg-yellow-800 p-2 flex items-center justify-between rounded-t-sm">
                            <h3 class="text-sm font-game text-yellow-300">FREECELL</h3>
                            <span
                                class="difficulty-tag bg-yellow-500 text-xs text-black font-bold px-2 py-0.5 rounded">MEDIUM</span>
                        </div>
                        <div class="card-image h-32 overflow-hidden">
                            <img src="_home-page/freecell-solitaire.jpeg" alt="FreeCell Solitaire"
                                class="w-full h-full object-cover">
                        </div>
                    </div>
                </a>
            </div>
        </section>

        <!-- Arcade Games - Classic Arcade Machine Design -->
        <section id="arcade-games" class="container mx-auto px-4 mb-12">
            <div class="retro-header mb-8">
                <h2 class="text-3xl md:text-4xl font-game relative">
                    <span class="retro-glow text-yellow-300">ARCADE GAMES</span>
                    <div class="pixel-underline"></div>
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <!-- Snake Game -->
                <a href="/snake-game/"
                    class="arcade-machine block col-span-1 md:col-span-1 bg-gray-900 rounded-t-xl overflow-hidden transition-transform hover:scale-105">
                    <div class="machine-screen bg-black p-2 rounded-t-lg">
                        <img src="images/snake-game.jpeg" alt="Snake Game" class="w-full h-auto rounded">
                    </div>
                    <div class="machine-info bg-gradient-to-r from-gray-800 to-gray-700 p-3">
                        <div class="flex items-center justify-between">
                            <h3 class="font-game text-green-400 text-sm md:text-base tracking-wider">SNAKE</h3>
                            <span
                                class="difficulty-pill bg-green-500 text-black text-xs px-2 py-0.5 rounded-full font-bold">EASY</span>
                        </div>
                    </div>
                </a>

                <!-- Enhanced Coming Soon Section with Retro Grid -->
                <div class="col-span-1 md:col-span-3 cyber-terminal rounded-xl p-6 relative overflow-hidden">
                    <!-- Retro Grid Background -->
                    <div class="cyber-grid absolute inset-0 z-0"></div>

                    <div class="relative z-10">
                        <h3 class="cyber-glitch-text text-center text-3xl md:text-4xl mb-6"
                            data-text="GAMES UNDER DEVELOPMENT">GAMES UNDER DEVELOPMENT</h3>
                        <p class="cyber-text-alt text-center text-lg mb-6">More exciting arcade games coming soon! Stay
                            tuned for updates.</p>

                        <!-- Animated Retro Game Icons -->
                        <div class="flex justify-center gap-8 md:gap-16">
                            <div class="game-icon-neural">
                                <div class="neon-circle"></div>
                                <span class="text-5xl md:text-6xl block">🎮</span>
                            </div>
                            <div class="game-icon-neural">
                                <div class="neon-circle"></div>
                                <span class="text-5xl md:text-6xl block">🎯</span>
                            </div>
                            <div class="game-icon-neural">
                                <div class="neon-circle"></div>
                                <span class="text-5xl md:text-6xl block">🏆</span>
                            </div>
                        </div>

                        <!-- Retro "Loading" Animation -->
                        <div class="neural-loading-container mx-auto mt-8 max-w-md">
                            <div class="h-2 w-full bg-gray-800 rounded-full overflow-hidden">
                                <div class="cyber-loading-bar h-full"></div>
                            </div>
                            <div class="flex justify-between mt-2 text-xs text-cyan-400 font-game">
                                <span>INITIALIZING</span>
                                <span class="cyber-blinking">STANDBY</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- New Releases Section -->
        <section id="new-releases" class="container mx-auto px-4 mb-16">
            <div class="retro-header mb-8">
                <h2 class="text-2xl md:text-3xl font-press-start text-center text-shadow-retro">
                    New Releases <span class="animate-pulse text-red-500">NEW!</span>
                </h2>
                <div class="pixel-underline mx-auto"></div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- Pac-Man Card -->
                <div class="retro-card relative overflow-hidden flex flex-col">
                    <div class="card-inner bg-gray-900 rounded-xl flex flex-col h-full">
                        <div class="retro-card-header px-4 py-2 bg-gray-800 text-white">
                            <h3 class="text-lg font-bold truncate">Pac-Man</h3>
                        </div>
                        <div class="card-image h-36 overflow-hidden relative">
                            <img src="pac-man/images/pac-man.png" alt="Pac-Man Game" class="w-full h-full object-cover">
                            <span class="absolute top-2 left-2 bg-purple-600 text-white text-xs px-2 py-1 rounded">
                                NEW!
                            </span>
                        </div>
                        <div class="p-4 flex-1 flex flex-col">
                            <p class="text-gray-300 text-sm mb-4 h-12">Navigate the maze, eat dots, and avoid ghosts in
                                this classic arcade game!</p>
                            <a href="/pac-man/"
                                class="block w-full bg-blue-600 hover:bg-blue-700 transition-colors text-white text-center py-2 rounded mt-auto">
                                Play Now
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Mahjong Solitaire Card -->
                <div class="retro-card relative overflow-hidden flex flex-col">
                    <div class="card-inner bg-gray-900 rounded-xl flex flex-col h-full">
                        <div class="retro-card-header px-4 py-2 bg-gray-800 text-white">
                            <h3 class="text-lg font-bold truncate">Mahjong Solitaire</h3>
                        </div>
                        <div class="card-image h-36 overflow-hidden relative">
                            <img src="mahjong/mahjong.jpeg" alt="Mahjong Solitaire" class="w-full h-full object-cover">
                            <span class="absolute top-2 left-2 bg-purple-600 text-white text-xs px-2 py-1 rounded">
                                NEW!
                            </span>
                        </div>
                        <div class="p-4 flex-1 flex flex-col">
                            <p class="text-gray-300 text-sm mb-4 h-12">Match pairs of tiles in this classic Chinese
                                puzzle game!</p>
                            <a href="/mahjong/"
                                class="block w-full bg-blue-600 hover:bg-blue-700 transition-colors text-white text-center py-2 rounded mt-auto">
                                Play Now
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Minesweeper Card - styled to match others -->
                <div class="retro-card relative overflow-hidden flex flex-col">
                    <div class="card-inner bg-gray-900 rounded-xl flex flex-col h-full">
                        <div class="retro-card-header px-4 py-2 bg-gray-800 text-white">
                            <h3 class="text-lg font-bold truncate">Minesweeper Online</h3>
                        </div>
                        <div class="card-image h-36 overflow-hidden relative">
                            <img src="minesweeper/minesweeper-online.png" alt="Minesweeper Online"
                                class="w-full h-full object-cover">
                            <span class="absolute top-2 left-2 bg-purple-600 text-white text-xs px-2 py-1 rounded">
                                NEW!
                            </span>
                        </div>
                        <div class="p-4 flex-1 flex flex-col">
                            <p class="text-gray-300 text-sm mb-4 h-12">Uncover all safe squares and avoid the mines in
                                this classic puzzle game!</p>
                            <a href="/minesweeper/"
                                class="block w-full bg-blue-600 hover:bg-blue-700 transition-colors text-white text-center py-2 rounded mt-auto">
                                Play Now
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Golf Solitaire Card - styled to match others -->
                <div class="retro-card relative overflow-hidden flex flex-col">
                    <div class="card-inner bg-gray-900 rounded-xl flex flex-col h-full">
                        <div class="retro-card-header px-4 py-2 bg-gray-800 text-white">
                            <h3 class="text-lg font-bold truncate">Golf Solitaire</h3>
                        </div>
                        <div class="card-image h-36 overflow-hidden relative">
                            <img src="golf-solitaire/golf-solitaire.png" alt="Golf Solitaire"
                                class="w-full h-full object-cover bg-white rounded">
                            <!-- Changed object-contain to object-cover -->
                            <span class="absolute top-2 left-2 bg-purple-600 text-white text-xs px-2 py-1 rounded">
                                NEW!
                            </span>
                        </div>
                        <div class="p-4 flex-1 flex flex-col">
                            <p class="text-gray-300 text-sm mb-4 h-12">Clear the tableau by playing cards one higher or
                                lower in this fast-paced solitaire!</p>
                            <a href="/golf-solitaire/"
                                class="block w-full bg-blue-600 hover:bg-blue-700 transition-colors text-white text-center py-2 rounded mt-auto">
                                Play Now
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </section>
    </main>

    <style>
        /* Retro Styling */
        .retro-glow {
            text-shadow: 0 0 5px rgba(255, 255, 0, 0.5), 0 0 10px rgba(255, 255, 0, 0.4), 0 0 15px rgba(255, 255, 0, 0.3);
        }

        .pixel-underline {
            height: 4px;
            background: repeating-linear-gradient(90deg, #ffd700, #ffd700 8px, transparent 8px, transparent 12px);
            margin-top: 8px;
            width: 100%;
        }

        .pixel-edges {
            clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 0 100%);
        }

        .shadow-neon-green {
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
        }

        .shadow-neon-blue {
            box-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
        }

        .shadow-neon-purple {
            box-shadow: 0 0 10px rgba(255, 0, 255, 0.7);
        }

        .shadow-neon-red {
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
        }

        .scanlines {
            background: linear-gradient(180deg,
                    rgba(0, 0, 0, 0) 0%,
                    rgba(0, 0, 0, 0.1) 50%,
                    rgba(0, 0, 0, 0) 100%);
            background-size: 100% 4px;
        }

        .blinking-text {
            animation: blink 1.2s infinite;
        }

        @keyframes blink {

            0%,
            49% {
                opacity: 1;
            }

            50%,
            100% {
                opacity: 0;
            }
        }

        .retro-grid-bg {
            background-image:
                linear-gradient(rgba(33, 33, 33, 0.3) 1px, transparent 1px),
                linear-gradient(90deg, rgba(33, 33, 33, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        .pixel-dots {
            height: 4px;
            width: 20px;
            margin: 0 auto;
            background: repeating-linear-gradient(90deg, currentColor, currentColor 4px, transparent 4px, transparent 8px);
        }

        .arcade-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 255, 0, 0.5);
        }

        .glitch-text {
            position: relative;
        }

        .glitch-text::before,
        .glitch-text::after {
            content: attr(data-text);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            opacity: 0.8;
        }

        .glitch-text::before {
            left: 2px;
            text-shadow: -1px 0 red;
            animation: glitch-anim-1 2s infinite linear alternate-reverse;
        }

        .glitch-text::after {
            left: -2px;
            text-shadow: -1px 0 blue;
            animation: glitch-anim-2 3s infinite linear alternate-reverse;
        }

        @keyframes glitch-anim-1 {
            0% {
                clip-path: inset(0% 0% 0% 0%);
            }

            100% {
                clip-path: inset(40% 0 61% 0);
            }
        }

        @keyframes glitch-anim-2 {
            0% {
                clip-path: inset(51% 0 0% 0);
            }

            100% {
                clip-path: inset(0% 0 32% 0);
            }
        }

        @keyframes loading-progress {
            0% {
                width: 0%;
                background-position: 0% 50%;
            }

            50% {
                width: 70%;
                background-position: 100% 50%;
            }

            100% {
                width: 98%;
                background-position: 0% 50%;
            }
        }

        .animate-loading-progress {
            animation: loading-progress 3s ease-in-out infinite;
            background-size: 200% 100%;
        }

        /* Fix for arcade cabinet on smaller screens */
        @media (max-width: 768px) {
            .arcade-cabinet {
                border-width: 4px;
            }
        }

        /* Neon Frame Animation */
        .neon-frame {
            position: relative;
            z-index: 1;
        }

        .neon-frame::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 0.75rem;
            background: linear-gradient(45deg, #ff00aa, #00ccff, #ff00aa, #00ffaa, #ff00aa);
            background-size: 400% 400%;
            z-index: -1;
            filter: blur(3px);
            animation: neon-glow 6s ease infinite;
        }

        @keyframes neon-glow {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
                filter: blur(5px);
            }

            100% {
                background-position: 0% 50%;
            }
        }

        /* Retro Progress Bar Styling */
        .retro-progress-container {
            border: 2px solid #00ccff;
            box-shadow: 0 0 15px rgba(0, 204, 255, 0.4), inset 0 0 10px rgba(0, 204, 255, 0.3);
        }

        .pixel-dot-divider {
            height: 3px;
            width: 100%;
            background-image: linear-gradient(90deg, #00ccff 4px, transparent 4px);
            background-size: 8px 3px;
            opacity: 0.7;
        }

        .progress-bar {
            position: relative;
            overflow: hidden;
        }

        .progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transform: translateX(-100%);
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            100% {
                transform: translateX(100%);
            }
        }

        .level-badge {
            text-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
        }

        .day-box {
            width: 25px;
            height: 25px;
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.7rem;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.6);
        }

        .day-box.active {
            background-color: rgba(52, 211, 153, 0.3);
            border-color: rgba(52, 211, 153, 0.6);
            color: rgba(52, 211, 153, 1);
        }

        .day-box.current {
            background-color: rgba(79, 70, 229, 0.3);
            border-color: rgba(79, 70, 229, 0.6);
            color: rgba(79, 70, 229, 1);
        }

        .day-box.treasure {
            background-color: rgba(251, 191, 36, 0.3);
            border-color: rgba(251, 191, 36, 0.6);
            color: rgba(251, 191, 36, 1);
        }

        .pulse-animation {
            animation: pulse-box 1.5s infinite;
        }

        @keyframes pulse-box {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.1);
                opacity: 0.9;
            }
        }

        .play-today-btn {
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
            transition: all 0.3s;
        }

        .play-today-btn:hover {
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.7);
            transform: translateY(-2px);
        }

        /* Responsive styles for the progress section */
        @media (max-width: 768px) {
            .retro-progress-container {
                padding: 1rem;
            }

            .progress-stats {
                margin-top: 1rem;
            }

            .bonus-days {
                margin: 1rem 0;
            }
        }

        /* Cyber Terminal & Grid Styling for Games Under Development */
        .cyber-terminal {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(6, 182, 212, 0.3);
            border-top: 2px solid rgba(6, 182, 212, 0.5);
            box-shadow:
                0 0 20px rgba(6, 182, 212, 0.3),
                inset 0 0 20px rgba(6, 182, 212, 0.2);
        }

        .cyber-grid {
            background: #000;
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .cyber-grid::before,
        .cyber-grid::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .cyber-grid::before {
            background-image:
                linear-gradient(90deg, rgba(6, 182, 212, 0.15) 1px, transparent 1px),
                linear-gradient(rgba(6, 182, 212, 0.15) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: 1;
            animation: gridMove 15s linear infinite;
        }

        .cyber-grid::after {
            background: radial-gradient(circle at center, transparent 0%, #000 70%);
            z-index: 2;
        }

        @keyframes gridMove {
            0% {
                background-position: 0px 0px;
            }

            100% {
                background-position: 40px 40px;
            }
        }

        .cyber-glitch-text {
            color: #06b6d4;
            font-family: 'Press Start 2P', monospace;
            position: relative;
            display: inline-block;
            letter-spacing: 2px;
            text-shadow: 0 0 5px rgba(6, 182, 212, 0.7);
        }

        .cyber-glitch-text::before,
        .cyber-glitch-text::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
        }

        .cyber-glitch-text::before {
            left: 2px;
            text-shadow: -1px 0 #ff00aa;
            clip: rect(44px, 450px, 56px, 0);
            animation: cyber-glitch-1 5s infinite linear alternate-reverse;
        }

        .cyber-glitch-text::after {
            left: -2px;
            text-shadow: -1px 0 #00ffaa;
            clip: rect(24px, 450px, 36px, 0);
            animation: cyber-glitch-2 5s infinite linear alternate-reverse;
        }

        @keyframes cyber-glitch-1 {
            0% {
                clip-path: inset(45% 0 61% 0);
            }

            20% {
                clip-path: inset(97% 0 1% 0);
            }

            40% {
                clip-path: inset(44% 0 11% 0);
            }

            60% {
                clip-path: inset(23% 0 54% 0);
            }

            80% {
                clip-path: inset(80% 0 19% 0);
            }

            100% {
                clip-path: inset(53% 0 5% 0);
            }
        }

        @keyframes cyber-glitch-2 {
            0% {
                clip-path: inset(70% 0 12% 0);
            }

            20% {
                clip-path: inset(31% 0 58% 0);
            }

            40% {
                clip-path: inset(13% 0 78% 0);
            }

            60% {
                clip-path: inset(62% 0 36% 0);
            }

            80% {
                clip-path: inset(24% 0 67% 0);
            }

            100% {
                clip-path: inset(87% 0 10% 0);
            }
        }

        .cyber-text-alt {
            color: #22d3ee;
            font-family: 'Press Start 2P', monospace;
            letter-spacing: 1px;
            text-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
        }

        .game-icon-neural {
            position: relative;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }

        .neon-circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid #06b6d4;
            animation: pulse-circle 2s infinite alternate;
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
        }

        @keyframes pulse-circle {
            0% {
                transform: scale(0.8);
                opacity: 0.7;
            }

            100% {
                transform: scale(1.1);
                opacity: 0.9;
            }
        }

        .cyber-loading-bar {
            width: 30%;
            background: linear-gradient(90deg, #06b6d4, #0891b2);
            animation: cyber-loading 2s infinite linear;
        }

        @keyframes cyber-loading {
            0% {
                width: 0%;
            }

            50% {
                width: 70%;
            }

            70% {
                width: 70%;
            }

            80% {
                width: 80%;
            }

            95% {
                width: 95%;
            }

            96% {
                width: 80%;
            }

            100% {
                width: 95%;
            }
        }

        .cyber-blinking {
            animation: cyber-blink 1.2s infinite;
        }

        @keyframes cyber-blink {

            0%,
            49% {
                opacity: 1;
            }

            50%,
            100% {
                opacity: 0;
            }
        }
    </style>

    <!-- Newsletter & Signup -->
    <section class="bg-green-900 py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-2xl mx-auto text-center">
                <h2 class="text-2xl md:text-3xl font-game text-yellow-300 mb-4">Stay Updated</h2>
                <p class="mb-6">Be the first to know when we add new games or features!</p>

                <form class="flex flex-col md:flex-row gap-3 justify-center">
                    <input type="email" placeholder="Your email address"
                        class="px-4 py-2 rounded-lg text-black w-full md:w-auto flex-grow max-w-md" required>
                    <button type="submit"
                        class="bg-yellow-400 hover:bg-yellow-300 text-green-900 font-bold py-2 px-6 rounded-lg transition">Subscribe</button>
                </form>

                <p class="text-sm mt-4 text-gray-400">We respect your privacy. No spam, ever.</p>
            </div>
        </div>
    </section>

    <!-- INSANE MEGA FOOTER REDESIGN -->
    <footer class="mega-footer">
        <!-- Grid Overlay Animation -->
        <div class="grid-overlay"></div>

        <!-- Shooting Stars -->
        <div class="shooting-star star-1"></div>
        <div class="shooting-star star-2"></div>
        <div class="shooting-star star-3"></div>

        <!-- Floating Pixel Art Elements -->
        <div class="pixel-art pixel-joystick">🕹️</div>
        <div class="pixel-art pixel-ghost">👾</div>
        <div class="pixel-art pixel-heart">❤️</div>
        <div class="pixel-art pixel-star">⭐</div>

        <div class="footer-content max-w-7xl mx-auto px-4">
            <h2 class="footer-title">ONLINECARDGAMES.IO</h2>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="footer-section">
                    <h3 class="section-title">CLASSIC GAMES</h3>
                    <ul>
                        <li><a href="/solitaire-turn-one/">Klondike (Turn 1)</a></li>
                        <li><a href="/solitaire-turn-three/">Klondike (Turn 3)</a></li>
                        <li><a href="/spider-solitaire-one-suit/">Spider (1 Suit)</a></li>
                        <li><a href="/spider-solitaire-four-suits/">Spider (4 Suits)</a></li>
                        <li><a href="/freecell-solitaire/">FreeCell</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h3 class="section-title">NEW RELEASES</h3>
                    <ul>
                        <li><a href="/scorpion-solitaire/">Scorpion Solitaire</a></li>
                        <li><a href="/russian-solitaire/">Russian Solitaire</a></li>
                        <li><a href="/snake-game/">Snake Game</a></li>
                        <li><a href="/yukon-solitaire/">Yukon Solitaire</a></li>
                        <li><a href="/all-games/">View All Games</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h3 class="section-title">GAME COLLECTIONS</h3>
                    <ul>
                        <li><a href="/all-games/">All Games</a></li>
                        <li><a href="/free-solitaire-games/">Solitaire Collection</a></li>
                        <li><a href="/work-productivity-study/index.html">Solitaire Study</a></li>
                        <li><a href="/arcade-games.html">Arcade Games</a></li>
                        <li><a href="/puzzle-games.html">Puzzle Games</a></li>
                        <li>
                            <a href="/new-releases.html" class="flex items-center">
                                New Releases
                                <span class="new-badge ml-2">
                                    <span class="blink-text" data-text="NEW!">NEW!</span>
                                </span>
                            </a>
                        </li>
                    </ul>
                    <div class="mt-6 text-center">
                        <a href="/all-games/" class="btn-arcade">PLAY NOW</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="social-icons">
                <a href="#" class="social-icon">
                    <span>🐦</span>
                </a>
                <a href="#" class="social-icon">
                    <span>📱</span>
                </a>
                <a href="#" class="social-icon">
                    <span>📸</span>
                </a>
                <a href="#" class="social-icon">
                    <span>📺</span>
                </a>
            </div>

            <div class="copyright">
                <p>&copy; <span id="footerYear">2023</span> ONLINECARDGAMES.IO</p>
                <div class="flex flex-wrap justify-center mt-4 space-x-4 legal-links">
                    <a href="/privacy-policy.html" class="text-blue-400 hover:text-blue-300">Privacy Policy</a>
                    <a href="/terms-of-service.html" class="text-blue-400 hover:text-blue-300">Terms of Service</a>
                    <a href="/cookies.html" class="text-blue-400 hover:text-blue-300">Cookie Policy</a>
                    <a href="/accessibility.html" class="text-blue-400 hover:text-blue-300">Accessibility</a>
                    <a href="/report-bug.html" class="text-blue-400 hover:text-blue-300">Report Bug</a>
                    <a href="/contact.html" class="text-blue-400 hover:text-blue-300">Contact Us</a>
                    <a href="/about.html" class="text-blue-400 hover:text-blue-300">About</a>
                </div>
            </div>
        </div>

        <!-- Keep the original footer container for compatibility with existing scripts -->
        <div id="footer-container" class="hidden"></div>
    </footer>

    <style>
        /* Additional styles for the coming soon items */
        .coming-soon-item {
            position: relative;
            color: rgba(255, 255, 255, 0.7);
            padding-left: 1rem;
            margin-bottom: 0.5rem;
        }

        .coming-soon-item::before {
            content: '>';
            position: absolute;
            left: 0;
            color: #00ffff;
            animation: blink 1s infinite;
        }

        .coming-soon-badge {
            display: inline-block;
            background: linear-gradient(45deg, #ff0080, #7928ca);
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.7rem;
            color: white;
            animation: pulse-badge 2s infinite;
        }

        @keyframes pulse-badge {

            0%,
            100% {
                opacity: 0.8;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.05);
            }
        }

        .glitch-text-small {
            position: relative;
            font-size: 0.7rem;
            letter-spacing: 0.5px;
            font-weight: bold;
        }

        .glitch-text-small::before,
        .glitch-text-small::after {
            content: attr(data-text);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0.8;
        }

        .glitch-text-small::before {
            left: 1px;
            text-shadow: -0.5px 0 red;
            animation: glitch-text-small-1 2s infinite linear alternate-reverse;
        }

        .glitch-text-small::after {
            left: -1px;
            text-shadow: -0.5px 0 blue;
            animation: glitch-text-small-2 3s infinite linear alternate-reverse;
        }

        @keyframes glitch-text-small-1 {
            0% {
                clip-path: inset(0% 0% 0% 0%);
            }

            100% {
                clip-path: inset(40% 0 61% 0);
            }
        }

        @keyframes glitch-text-small-2 {
            0% {
                clip-path: inset(51% 0 0% 0);
            }

            100% {
                clip-path: inset(0% 0 32% 0);
            }
        }

        /* Legal links styling */
        .legal-links {
            font-size: 0.8rem;
        }

        .legal-links a {
            transition: all 0.3s;
            text-decoration: none;
            position: relative;
        }

        .legal-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -2px;
            left: 0;
            background-color: #00ffff;
            transition: all 0.3s;
        }

        .legal-links a:hover:after {
            width: 100%;
        }

        /* Card image styles */
        .card-image {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            overflow: hidden;
            position: relative;
        }

        .card-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
            pointer-events: none;
        }

        .card-image img {
            transition: transform 0.3s ease-out;
        }

        .retro-card:hover .card-image img {
            transform: scale(1.1);
        }

        /* Additional styles for the badges */
        .new-badge {
            display: inline-block;
            background: linear-gradient(45deg, #ff5e00, #ffb700);
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 0.7rem;
            color: white;
            font-weight: bold;
            animation: pulse-new 1.5s infinite;
        }

        @keyframes pulse-new {

            0%,
            100% {
                opacity: 0.9;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.08);
            }
        }

        .blink-text {
            position: relative;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
        }

        .blink-text::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
            animation: shine 2s infinite;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%);
            }

            60% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        /* Enhanced Hero Title - Better Readability */
        .enhanced-hero-title {
            font-family: 'Press Start 2P', cursive;
            color: white;
            /* Solid white base for better readability */
            text-shadow:
                3px 3px 0 var(--dark-bg),
                -1px -1px 0 var(--dark-bg),
                1px -1px 0 var(--dark-bg),
                -1px 1px 0 var(--dark-bg),
                1px 1px 0 var(--dark-bg),
                l 0 0 10px rgba(255, 255, 255, 0.8),
                0 0 15px var(--primary-color);
            letter-spacing: 2px;
            position: relative;
            z-index: 5;
            display: inline-block;
            background: linear-gradient(to bottom, #ffffff, #e8f7ff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 2px 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 8px rgba(0, 204, 255, 0.6));
            border-bottom: 4px solid var(--primary-color);
            padding-bottom: 8px;
        }

        /* Media queries for enhanced title */
        @media (max-width: 768px) {
            .enhanced-hero-title {
                letter-spacing: 1px;
                font-size: 2.5rem;
            }
        }

        @media (max-width: 640px) {
            .enhanced-hero-title {
                font-size: 1.8rem;
            }
        }
    </style>

    <!-- Scripts -->
    <script src="/shared/footer.js"></script>
    
    <!-- Firebase Authentication System -->
    <script type="module" src="/firebase/config.js"></script>
    <script type="module" src="/shared/header-auth.js"></script>

    <script>
        // Mobile Menu Toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function () {
            document.getElementById('mobile-menu').classList.add('active');
        });

        document.getElementById('close-menu').addEventListener('click', function () {
            document.getElementById('mobile-menu').classList.remove('active');
        });

        // Close mobile menu when clicking a link
        document.querySelectorAll('.mobile-link').forEach(link => {
            link.addEventListener('click', function () {
                document.getElementById('mobile-menu').classList.remove('active');
            });
        });

        // Category filter pill selection
        document.querySelectorAll('.category-pill').forEach(pill => {
            pill.addEventListener('click', function () {
                // Remove active class from all pills
                document.querySelectorAll('.category-pill').forEach(p => {
                    p.classList.remove('active');
                });

                // Add active class to clicked pill
                this.classList.add('active');

                // Filter logic would go here
                console.log('Filtering by:', this.textContent.trim());
            });
        });

        // Update footer year
        document.getElementById('footerYear').innerText = new Date().getFullYear();
    </script>
</body>

</html>
                