:root {
            --purple: #9B5DE5;
            --pink: #F15BB5;
            --yellow: #FEE440;
            --blue: #00BBF9;
            --green: #00F5D4;
            --orange: #FF9F1C;
            --red: #FF4D6D;
            --teal: #2EC4B6;
            --cyan: #00B4D8;
            --lime: #82C91E;
            --indigo: #4C6EF5;
            --funky-font: 'Comic Neue', cursive;
            --brand-font: 'Fredoka One', cursive;
        }

        body {
            background: #f0f2f5;
            background-image: 
                radial-gradient(circle at 10% 20%, var(--pink) 1px, transparent 8px),
                radial-gradient(circle at 80% 40%, var(--blue) 1px, transparent 6px),
                radial-gradient(circle at 40% 50%, var(--yellow) 1px, transparent 7px),
                radial-gradient(circle at 70% 30%, var(--green) 1px, transparent 5px);
            background-size: 150px 150px;
            min-height: 100vh;
        }

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

        .category-card {
            background: white;
            border-radius: 30px;
            padding: 2rem 1.5rem;
            text-align: center;
            transition: all 0.4s ease;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            border: 6px solid;
            transform-style: preserve-3d;
        }

        .category-card::before {
            content: '';
            position: absolute;
            top: -15px;
            left: -15px;
            right: -15px;
            bottom: -15px;
            background: 
                radial-gradient(circle at 30% 30%, currentColor 1px, transparent 6px),
                radial-gradient(circle at 70% 70%, currentColor 1px, transparent 6px),
                radial-gradient(circle at 90% 20%, currentColor 1px, transparent 8px),
                radial-gradient(circle at 10% 90%, currentColor 1px, transparent 5px);
            border-radius: 35px;
            opacity: 0.1;
            z-index: -1;
            transition: all 0.4s ease;
        }

        .category-card:hover {
            transform: translateY(-15px) rotate(3deg);
            box-shadow: 
                15px 15px 30px rgba(0,0,0,0.2),
                inset 0 0 60px rgba(255,255,255,0.8);
        }

        .category-card:hover::before {
            transform: translateY(15px) rotate(-3deg);
            opacity: 0.2;
        }

        .category-icon {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            transition: all 0.4s ease;
            position: relative;
        }

        .category-card:hover .category-icon {
            transform: scale(1.3) rotate(-10deg);
            filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
        }

        .category-title {
            font-family: var(--brand-font);
            font-size: 1.8rem;
            margin-bottom: 0.8rem;
            color: #333;
        }

        .category-description {
            font-family: var(--funky-font);
            font-size: 1.2rem;
            color: #666;
        }

        .game-count {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: white;
            padding: 0.5rem 1.2rem;
            border-radius: 100px;
            font-family: var(--funky-font);
            font-size: 1rem;
            transform: rotate(-8deg);
            box-shadow: 3px 3px 0 currentColor;
            border: 2px solid currentColor;
        }

        /* Category-specific styles */
        .puzzle {
            border-color: var(--purple);
            background: linear-gradient(135deg, white 60%, var(--purple) 200%);
        }
        .puzzle .category-icon, .puzzle .game-count { color: var(--purple); }

        .action {
            border-color: var(--red);
            background: linear-gradient(135deg, white 60%, var(--red) 200%);
        }
        .action .category-icon, .action .game-count { color: var(--red); }

        .adventure {
            border-color: var(--orange);
            background: linear-gradient(135deg, white 60%, var(--orange) 200%);
        }
        .adventure .category-icon, .adventure .game-count { color: var(--orange); }

        .racing {
            border-color: var(--blue);
            background: linear-gradient(135deg, white 60%, var(--blue) 200%);
        }
        .racing .category-icon, .racing .game-count { color: var(--blue); }

        .girls {
            border-color: var(--pink);
            background: linear-gradient(135deg, white 60%, var(--pink) 200%);
        }
        .girls .category-icon, .girls .game-count { color: var(--pink); }

        .multiplayer {
            border-color: var(--teal);
            background: linear-gradient(135deg, white 60%, var(--teal) 200%);
        }
        .multiplayer .category-icon, .multiplayer .game-count { color: var(--teal); }

        .sports {
            border-color: var(--green);
            background: linear-gradient(135deg, white 60%, var(--green) 200%);
        }
        .sports .category-icon, .sports .game-count { color: var(--green); }

        .strategy {
            border-color: var(--indigo);
            background: linear-gradient(135deg, white 60%, var(--indigo) 200%);
        }
        .strategy .category-icon, .strategy .game-count { color: var(--indigo); }

        .math {
            border-color: var(--cyan);
            background: linear-gradient(135deg, white 60%, var(--cyan) 200%);
        }
        .math .category-icon, .math .game-count { color: var(--cyan); }

        .new {
            border-color: var(--lime);
            background: linear-gradient(135deg, white 60%, var(--lime) 200%);
        }
        .new .category-icon, .new .game-count { color: var(--lime); }

        .knowledge {
            border-color: var(--yellow);
            background: linear-gradient(135deg, white 60%, var(--yellow) 200%);
        }
        .knowledge .category-icon, .knowledge .game-count { color: var(--yellow); }

        .profile {
            border-color: var(--purple);
            background: linear-gradient(135deg, white 60%, var(--purple) 200%);
        }
        .profile .category-icon, .profile .game-count { color: var(--purple); }

        @media (max-width: 768px) {
            .category-card {
                padding: 1.5rem 1rem;
            }
        }