.glass {
            background: rgba(30, 41, 59, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .glass-card {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
            border: 1px solid rgba(148, 163, 184, 0.1);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .text-gradient {
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: linear-gradient(to right, #2dd4bf, #8b5cf6);
        }

        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-20px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* ═══════════════════════════════════════════════════
   Hamburger Menu - Mobile Navigation
   ═══════════════════════════════════════════════════ */

/* Hamburger Button */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 60;
}

/* Hamburger Lines Animation */
.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Navigation Links */
.nav-links {
    display: none;
    z-index: 55;
}

.nav-links.active {
    display: block;
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    .hamburger {
        display: flex;
    }
    
    /* Ensure nav-links is properly positioned */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }
    
    /* Nav link hover effect */
    .nav-link {
        display: block;
        width: 100%;
    }
    
    .nav-link:active {
        background-color: rgba(30, 41, 59, 0.8);
    }
}

/* Desktop: Hide hamburger and mobile nav */
@media (min-width: 768px) {
    .hamburger {
        display: none !important;
    }
    
    .nav-links {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════
   Mobile Spacing - Games Grid
   Requirements: 6.1, 6.2, 6.3
   ═══════════════════════════════════════════════════ */

/* Mobile viewport < 768px */
@media (max-width: 767px) {
    /* Games section container - ensure minimum 12px lateral padding */
    #games .max-w-7xl {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Games grid - ensure 16px gap between cards */
    #gamesGrid {
        gap: 16px;
    }
    
    /* Game cards - ensure proper spacing in single column */
    #gamesGrid > div {
        margin-bottom: 0; /* Reset any margin, use gap instead */
    }
    
    /* Category filters - better mobile spacing */
    #categoryFilters {
        gap: 8px;
        padding-bottom: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    #categoryFilters::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    /* Section title spacing */
    #games h2 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
}

/* Extra small devices (iPhone SE, etc.) - 375px and below */
@media (max-width: 375px) {
    #games .max-w-7xl {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    #gamesGrid {
        gap: 16px;
    }
    
    /* Slightly smaller card padding on very small screens */
    #gamesGrid > div .p-6 {
        padding: 1rem;
    }
}

/* Small mobile devices (up to 414px - iPhone Plus) */
@media (max-width: 414px) {
    #games .max-w-7xl {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    #gamesGrid {
        gap: 16px;
    }
}

/* ═══════════════════════════════════════════════════
   Cards Responsivos - Prevenção de Overflow
   Requirements: 2.2 - Cards com max-width: 100% em 320px
   ═══════════════════════════════════════════════════ */

@media (max-width: 320px) {
    /* Game cards - força max-width 100% para prevenir overflow */
    .game-card,
    .glass-card,
    #gamesGrid > div,
    [class*="card"] {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* Container principal - padding mínimo */
    #games .max-w-7xl {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Grid de jogos - gap reduzido para telas muito pequenas */
    #gamesGrid {
        gap: 12px !important;
    }
    
    /* Conteúdo interno dos cards */
    #gamesGrid .p-6 {
        padding: 12px !important;
    }
    
    /* Imagens dos jogos */
    #gamesGrid img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Títulos dos jogos - prevenção de overflow */
    #gamesGrid h3 {
        font-size: 1rem !important;
        line-height: 1.3;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    
    /* Descrições dos jogos */
    #gamesGrid p {
        font-size: 0.875rem !important;
        line-height: 1.4;
    }
    
    /* Botões de ação */
    #gamesGrid button,
    #gamesGrid a[role="button"] {
        width: 100% !important;
        min-height: 44px;
        font-size: 0.875rem;
    }
}