/* ==============================================
   G18 MOBILE MENU REDESIGN - GOTHIC/CYBERPUNK STYLE
   ============================================== */

@media (max-width: 991px) {
    /* 1. Khung Menu Chính (Container) */
    .navbar-collapse {
        background: rgba(10, 10, 10, 0.98); /* Nền đen mờ sang trọng */
        backdrop-filter: blur(10px); /* Hiệu ứng mờ kính */
        -webkit-backdrop-filter: blur(10px); /* Safari support */
        border-top: 1px solid rgba(155, 44, 136, 0.3); /* Viền hồng mờ ở trên */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 0;
        z-index: 1000;
        box-shadow: 0 15px 30px rgba(0,0,0,0.8);
        max-height: 80vh; /* Giới hạn chiều cao */
        overflow-y: auto; /* Cho phép cuộn nếu menu quá dài */
        border-radius: 0; /* Xóa bo tròn thừa */
        margin: 0;
    }

    /* Custom scrollbar cho menu */
    .navbar-collapse::-webkit-scrollbar {
        width: 3px;
    }

    .navbar-collapse::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.02);
    }

    .navbar-collapse::-webkit-scrollbar-thumb {
        background: rgba(155, 44, 136, 0.3);
        border-radius: 3px;
    }

    .navbar-collapse::-webkit-scrollbar-thumb:hover {
        background: rgba(155, 44, 136, 0.5);
    }

    /* 2. Các Mục Menu (Links) */
    .navbar-nav {
        padding: 10px 0;
    }

    .navbar-nav .nav-item {
        border: none !important; /* Xóa viền bao quanh item */
        margin: 0;
        width: 100%;
        position: relative;
    }

    .navbar-nav .nav-link {
        color: #e0e0e0 !important;
        font-family: 'Orbitron', sans-serif; /* Font chữ game */
        font-size: 1rem;
        font-weight: 600;
        padding: 15px 25px !important; /* Khoảng cách rộng rãi */
        border: none !important; /* Xóa khung viền xấu */
        border-left: 3px solid transparent !important; /* Chuẩn bị cho hiệu ứng hover */
        background: transparent !important; /* Nền trong suốt */
        text-align: left; /* Căn trái cho dễ đọc */
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        display: block;
        width: 100%;
        border-radius: 0 !important; /* Xóa bo tròn không cần thiết */
    }

    /* Hiệu ứng khi chạm/hover vào menu */
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.active {
        background: linear-gradient(90deg, rgba(155, 44, 136, 0.1), transparent) !important;
        border-left-color: #9B2C88 !important; /* Viền trái màu hồng phát sáng */
        color: #fff !important;
        padding-left: 35px !important; /* Hiệu ứng đẩy chữ sang phải */
        transform: none; /* Xóa hiệu ứng translate không cần thiết */
    }

    /* 3. Dropdown Styling */
    .navbar-nav .dropdown {
        position: relative;
    }



    /* 4. Menu Con (Dropdown) */
    .navbar-nav .dropdown-menu {
        background-color: rgba(0, 0, 0, 0.3) !important; /* Nền tối hơn chút */
        border: none !important;
        margin: 0 !important;
        padding: 5px 0 !important;
        box-shadow: inset 0 5px 10px rgba(0,0,0,0.3) !important; /* Bóng đổ vào trong */
        position: static !important;
        width: 100% !important;
        border-radius: 0 !important;
        display: none;
    }

    .navbar-nav .dropdown-menu.show {
        display: block !important;
    }

    .navbar-nav .dropdown-item {
        padding: 12px 40px !important; /* Thụt vào trong so với menu cha */
        color: #ccc !important;
        font-size: 0.9rem;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        background: transparent !important;
        transition: all 0.3s ease;
        text-transform: none;
        letter-spacing: 0.5px;
        border-radius: 0 !important;
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus,
    .navbar-nav .dropdown-item:active {
        color: #9B2C88 !important;
        background: transparent !important;
        padding-left: 50px !important;
    }

    .navbar-nav .dropdown-item:last-child {
        border-bottom: none;
    }

    /* 5. Nút Tìm Kiếm (Search) - Hình tròn minimalist */
    /* DISABLED - Now controlled by navbar-mobile-fix.css */
    /*
    .navbar-search {
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 0 10px !important;
    }

    .search-btn {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: 2px solid #9B2C88 !important;
        color: #9B2C88 !important;
        font-size: 1.2rem;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        overflow: hidden;
    }

    .search-btn:hover,
    .search-btn:focus {
        background: rgba(155, 44, 136, 0.1) !important;
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(155, 44, 136, 0.4);
    }

    .search-btn:active {
        background: #9B2C88 !important;
        color: #fff !important;
        transform: scale(0.95);
    }

    .search-btn i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1.1rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    */

    /* 6. Hamburger Menu Button - Minimalist Style */
    /* DISABLED - Now controlled by navbar-mobile-fix.css */
    /*
    .navbar-toggler {
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border: 2px solid rgba(155, 44, 136, 0.5) !important;
        background: transparent !important;
        border-radius: 8px !important;
        transition: all 0.3s ease;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    .navbar-toggler:hover,
    .navbar-toggler:focus {
        background: rgba(155, 44, 136, 0.1);
        border-color: #9B2C88;
        box-shadow: 0 0 10px rgba(155, 44, 136, 0.3);
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(155, 44, 136, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    */

    /* 7. Fix cho Bootstrap dropdown-toggle-split */
    .dropdown-toggle-split {
        display: none !important;
    }
}

/* Touch target improvements */
@media (max-width: 768px) {
    /* Hero section mobile */
    .hero-section {
        padding: 100px 0 60px;
        min-height: auto;
    }

    .hero-title {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

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

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        padding: 15px 20px;
        font-size: 1rem;
    }

    /* Section spacing */
    .section-padding {
        padding: 40px 0;
    }

    /* Game cards mobile - removed old code */

    /* Footer mobile */
    .footer {
        text-align: center;
    }

    .footer .col-md-4 {
        margin-bottom: 30px;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    .social-links a {
        margin: 0 8px;
        font-size: 1.5rem;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero-title {
        font-size: 2rem;
    }

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

    .section-title-tag {
        font-size: 1.5rem;
    }

    .games-grid-modern {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .navbar-brand {
        font-size: 1.2rem;
    }

    .logo-img {
        height: 35px;
    }

    /* Điều chỉnh menu cho màn hình nhỏ hơn */
    .navbar-nav .nav-link {
        font-size: 0.95rem !important;
        padding: 12px 20px !important;
    }

    .navbar-nav .dropdown-item {
        font-size: 0.85rem !important;
        padding: 10px 35px !important;
    }

    .search-btn {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .hero-particles {
        display: none;
    }

    /* Optimize transitions */
    * {
        transition-duration: 0.2s !important;
    }

    /* Reduce shadows for better performance */
    .game-card-modern {
        box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
    }

    /* Disable hover effects on touch devices - NO SCALING ANYWHERE */
    .game-card-modern:hover {
        transform: translateY(-8px) !important; /* Keep only vertical movement, no scaling */
        box-shadow: 0 15px 40px rgba(155, 44, 136, 0.25) !important;
    }

    /* Ensure images don't scale on mobile */
    .game-card-modern:hover .game-image-wrapper img {
        transform: none !important;
    }

    /* Disable all other potential zoom effects */
    .game-card:hover {
        transform: translateY(-10px) !important; /* Keep only vertical movement, no scaling */
    }

    .game-card:hover .game-thumbnail img {
        transform: none !important;
    }

    .game-thumbnail img:hover {
        transform: none !important;
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 991px) {
    /* Focus states */
    .nav-link:focus-visible,
    .dropdown-toggle:focus-visible,
    .btn:focus-visible,
    .search-btn:focus-visible {
        outline: 2px solid rgba(155, 44, 136, 0.5);
        outline-offset: 2px;
    }

    /* High contrast mode support */
    @media (prefers-contrast: high) {
        .navbar-collapse {
            border-top-width: 2px;
        }

        .navbar-nav .nav-link {
            border-left-width: 4px !important;
        }

        .search-btn {
            border-width: 3px !important;
        }
    }

    /* Reduced motion support */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Loading states for mobile */
@media (max-width: 768px) {
    .games-loading {
        padding: 40px 20px;
    }

    .games-loading i {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .placeholder-content {
        padding: 30px 15px;
        text-align: center;
    }
}

/* Search modal mobile optimizations */
@media (max-width: 768px) {
    .search-modal-content {
        margin: 20px;
        padding: 20px;
        max-height: calc(100vh - 40px);
        border-radius: 16px;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(155, 44, 136, 0.2);
    }

    .search-modal-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 14px 18px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .search-modal-header h3 {
        font-size: 1.1rem;
        font-weight: 600;
    }

    .search-close {
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .search-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Additional mobile fixes */
@media (max-width: 991px) {
    /* Fix hero section on mobile landscape */
    @media (orientation: landscape) and (max-height: 600px) {
        .hero-section {
            padding: 80px 0 40px;
            min-height: auto;
        }

        .hero-title {
            font-size: 2rem;
        }

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

        .navbar-collapse {
            max-height: calc(100vh - 60px);
        }
    }

    /* Improve game grid responsiveness */
    .games-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }

    /* Better category items on mobile */
    .category-item {
        min-height: 60px;
        margin-bottom: 8px;
        border-radius: 8px;
        overflow: hidden;
    }

    .category-content {
        padding: 0 16px;
    }

    .category-name {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    .category-badge {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
}

/* Very small mobile devices */
@media (max-width: 360px) {
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .hero-buttons .btn {
        padding: 12px 16px;
        font-size: 0.9rem;
    }

    .section-title-tag {
        font-size: 1.3rem;
    }

    .navbar-nav .nav-link {
        font-size: 0.9rem !important;
        padding: 10px 18px !important;
    }

    .navbar-nav .dropdown-item {
        font-size: 0.8rem !important;
        padding: 8px 30px !important;
    }
}

/* GLOBAL NO-ZOOM POLICY - Remove all scale effects from entire website */
/* This applies to ALL screen sizes, not just mobile */
.game-card:hover {
    transform: translateY(-10px) !important; /* Only vertical movement */
}

.game-card:hover .game-thumbnail img {
    transform: none !important; /* No image scaling */
}

.game-thumbnail img {
    transform: none !important; /* No image scaling */
}

.screenshot:hover {
    transform: none !important; /* No screenshot scaling */
    border-color: var(--accent-primary) !important;
    box-shadow: 0 5px 20px rgba(155, 44, 136, 0.4) !important;
}

.about-image:hover img {
    transform: none !important; /* No about image scaling */
}

.about-image-wrapper:hover img {
    transform: none !important; /* No about wrapper image scaling */
}

.stat-card:hover {
    transform: none !important; /* No stat card scaling */
    border-color: var(--accent-primary) !important;
    box-shadow: 0 5px 20px rgba(155, 44, 136, 0.3) !important;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .search-modal-input,
    input[type="text"],
    input[type="search"] {
        -webkit-appearance: none;
        border-radius: 8px;
    }

    /* Fix iOS safari viewport height issue */
    .hero-section {
        height: 100vh;
        height: calc(var(--vh, 1vh) * 100);
    }

    /* Fix iOS elastic scroll */
    .navbar-collapse {
        -webkit-overflow-scrolling: touch;
    }
}

/* Android specific fixes */
@media screen and (max-width: 991px) {
    /* Fix Android Chrome address bar hide/show */
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1030;
    }

    /* Adjust body padding for fixed navbar */
    body {
        padding-top: 70px;
    }

    .hero-section {
        margin-top: -70px;
        padding-top: 140px;
    }
}

/* --- CODE FIX GIAO DIỆN MOBILE (Game Cards) --- */
@media (max-width: 768px) {

    /* 1. Ép thẻ quay về dạng cột dọc (Hình trên - Chữ dưới) */
    .game-card-modern {
        display: flex !important;
        flex-direction: column !important; /* Mấu chốt nằm ở đây */
        width: 100% !important;
        margin-bottom: 20px !important;
        height: auto !important;
        border: 1px solid #333 !important;
    }

    /* 2. Ép hình ảnh bung lụa 100% chiều ngang - Banner thấp hơn cho mobile */
    .game-image-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important; /* Không cho co lại */
        padding-bottom: 26% !important; /* Banner rất sát cho mobile (~4:1 aspect ratio) */
        padding-top: 0 !important;
        height: 0 !important;
        position: relative !important;
    }

    /* 3. Chỉnh lại phần nội dung bên dưới */
    .game-card-info {
        width: 100% !important;
        padding: 15px !important;
        background: #1a1a1a !important;
    }

    /* 4. Ẩn bớt mô tả dài dòng nếu cần (tùy chọn) */
    .game-card-title {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
}