/* ================================================
   GAMING ENHANCE — Visual Upgrade Layer v2
   ✅ Follows Theme Customizer primary color
   ✅ --ge-* vars injected by theme-vars.php
   ✅ No layout changes, no functionality changes
   ================================================ */

/* HOT/NEW glow vars now injected by theme-vars.php as --ge-acc-* and --ge-* */

/* ========== 1. TEXT SELECTION ========== */
::selection {
    background: var(--ge-20);
    color: inherit;
}

/* ========== 2. CUSTOM SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 6px;
    opacity: 0.7;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover, var(--primary));
}

/* ========== 3. DARK MODE — DEEPER ATMOSPHERE ========== */
body.dark-mode {
    background-image:
        radial-gradient(ellipse 70% 50% at 0% 0%, var(--ge-10) 0%, transparent 65%),
        radial-gradient(ellipse 55% 40% at 100% 100%, var(--ge-07) 0%, transparent 65%),
        radial-gradient(ellipse 40% 35% at 50% 110%, var(--ge-07) 0%, transparent 60%);
    background-attachment: scroll;
}

/* Light mode background accent */
body:not(.dark-mode) {
    background-image:
        radial-gradient(ellipse 60% 50% at 0% 0%, var(--ge-07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 100% 100%, var(--ge-07) 0%, transparent 70%);
    background-attachment: scroll;
}

/* ========== 4. HEADER GLASS (dark mode) ========== */
body.dark-mode .site-header {
    background: rgba(9, 13, 24, 0.85) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-bottom-color: var(--ge-18) !important;
    box-shadow: 0 1px 0 var(--ge-15), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .search-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .search-box:focus-within {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--ge-45) !important;
    box-shadow: 0 0 0 3px var(--ge-10), 0 0 16px var(--ge-10) !important;
}

/* Light mode header shadow */
body:not(.dark-mode) .site-header {
    box-shadow: 0 1px 0 var(--ge-07), 0 2px 10px var(--ge-07) !important;
}

/* ========== 5. SIDEBAR DARK MODE ========== */
body.dark-mode::before {
    background: linear-gradient(180deg, #0a0d16 0%, #080b12 100%) !important;
    border-right-color: var(--ge-10) !important;
}

body.dark-mode::after {
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--ge-30) 30%,
            var(--ge-40) 50%,
            var(--ge-20) 75%,
            transparent 100%) !important;
}

/* Light mode sidebar subtle tint */
body:not(.dark-mode)::before {
    background: linear-gradient(180deg, #fafafe 0%, #f5f5ff 100%) !important;
}

/* Active nav item — game-style glow */
body.dark-mode .nav-sidebar .nav-item.active {
    background: linear-gradient(90deg, var(--ge-20) 0%, var(--ge-07) 100%) !important;
}

body.dark-mode .nav-sidebar .nav-item.active::before {
    background: linear-gradient(to bottom, var(--primary), var(--primary-hover, var(--primary))) !important;
    box-shadow: 0 0 8px var(--ge-40);
    width: 3px;
}

body:not(.dark-mode) .nav-sidebar .nav-item.active {
    background: linear-gradient(90deg, var(--ge-15), var(--ge-07)) !important;
}

/* HOT / NEW icon glow — follows theme accent/primary */
body.dark-mode .nav-sidebar .nav-item.hot i {
    filter: drop-shadow(0 0 6px var(--ge-acc-55));
}

body.dark-mode .nav-sidebar .nav-item.new i {
    filter: drop-shadow(0 0 6px var(--ge-40));
}

/* ========== 6. GAME CARDS — Colored glow on hover ========== */
.game-card:hover {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.28),
        0 4px 12px rgba(0, 0, 0, 0.18),
        0 0 0 1.5px var(--ge-45),
        0 0 28px var(--ge-18) !important;
}

/* HOT card — accent color glow */
.game-card:has(.game-badge.hot):hover {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1.5px var(--ge-acc-55),
        0 0 30px var(--ge-acc-20) !important;
}

/* NEW card — primary color glow */
.game-card:has(.game-badge.new):hover {
    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1.5px var(--ge-45),
        0 0 28px var(--ge-18) !important;
}

/* Sidebar cards */
.sidebar-game-card:hover {
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1.5px var(--ge-40),
        0 0 20px var(--ge-15) !important;
    border-color: var(--ge-40) !important;
}

/* ========== 7. BADGE SHIMMER ========== */
.game-badge.hot,
.game-badge.new,
.game-badge.trending {
    position: relative;
    overflow: hidden;
}

.game-badge.hot::after,
.game-badge.new::after,
.game-badge.trending::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    animation: badgeShimmer 2.8s ease-in-out infinite;
    border-radius: inherit;
}

.game-badge.new::after {
    animation-delay: 0.8s;
}

.game-badge.trending::after {
    animation-delay: 0.4s;
}

@keyframes badgeShimmer {
    0% {
        left: -100%;
    }

    40% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}

/* HOT badge shadow — accent color */
.game-badge.hot {
    box-shadow: 0 2px 8px var(--ge-acc-55), 0 0 14px var(--ge-acc-20) !important;
}

/* NEW badge shadow — primary color */
.game-badge.new {
    box-shadow: 0 2px 8px var(--ge-45), 0 0 14px var(--ge-18) !important;
}

/* ========== 8. CARD OVERLAY GRADIENT ========== */
.game-card .card-overlay {
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.4) 55%,
            transparent 100%) !important;
}

/* ========== 9. WIDGET TITLES ========== */
.widget-title {
    border-bottom: none !important;
    position: relative;
    padding-bottom: 10px !important;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 2.5px;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.widget-section:hover .widget-title::after {
    width: 60px;
}

/* ========== 10. BUTTONS — Glow & Lift ========== */
.btn-primary,
button[class*="btn-primary"],
a[class*="btn-primary"],
.cta-btn,
.play-btn {
    box-shadow: 0 4px 14px var(--ge-30) !important;
    transition: all 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
}

.btn-primary:hover,
button[class*="btn-primary"]:hover,
a[class*="btn-primary"]:hover,
.cta-btn:hover,
.play-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px var(--ge-45) !important;
}

/* ========== 11. STAR RATINGS ========== */
.overlay-rating,
[class*="rating"] .fa-star,
[class*="stars"] .fa-star {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.4));
}

/* ========== 12. DARK MODE FOOTER ========== */
body.dark-mode .site-footer {
    background: linear-gradient(180deg, #090d18 0%, #060912 100%) !important;
    border-top: 1px solid var(--ge-15) !important;
}

/* ========== 13. CATEGORY ICON BACKGROUNDS ========== */
.nav-sidebar .nav-category .cat-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover, var(--primary))) !important;
    box-shadow: 0 2px 8px var(--ge-30);
}

/* ========== 14. CARD LOAD-IN ANIMATION ========== */
/* CLS FIX: Removed translateY(12px) — it caused CLS 0.976 on Desktop
   (.main-layout shifted 0.933). Opacity-only fade prevents layout shift. */
@keyframes cardFadeUp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.game-card {
    animation: cardFadeUp 0.35s ease both;
}

.games-grid .game-card:nth-child(1) {
    animation-delay: 0.00s;
}

.games-grid .game-card:nth-child(2) {
    animation-delay: 0.04s;
}

.games-grid .game-card:nth-child(3) {
    animation-delay: 0.08s;
}

.games-grid .game-card:nth-child(4) {
    animation-delay: 0.12s;
}

.games-grid .game-card:nth-child(5) {
    animation-delay: 0.16s;
}

.games-grid .game-card:nth-child(6) {
    animation-delay: 0.20s;
}

.games-grid .game-card:nth-child(n+7) {
    animation-delay: 0.24s;
}

.sidebar-games-grid .sidebar-game-card:nth-child(1) {
    animation: cardFadeUp 0.35s 0.00s ease both;
}

.sidebar-games-grid .sidebar-game-card:nth-child(2) {
    animation: cardFadeUp 0.35s 0.06s ease both;
}

.sidebar-games-grid .sidebar-game-card:nth-child(3) {
    animation: cardFadeUp 0.35s 0.12s ease both;
}

.sidebar-games-grid .sidebar-game-card:nth-child(n+4) {
    animation: cardFadeUp 0.35s 0.18s ease both;
}

/* ========== 15. FOCUS RING ========== */
*:focus-visible {
    outline: 2px solid var(--ge-45);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ========== 16. DARK CARD SURFACE ========== */
body.dark-mode .sidebar-game-card {
    background: linear-gradient(145deg, #141925, #1a2030) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .sidebar-game-card:hover {
    border-color: var(--ge-40) !important;
}

/* ========== 17. SMOOTH TRANSITIONS ========== */
.nav-item,
.nav-category,
.game-card,
.sidebar-game-card,
.site-header,
.search-box,
.theme-btn {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========== 18. MOBILE PERFORMANCE — Disable GPU-heavy effects ========== */
/* Poki/CrazyGames pattern: remove backdrop-filter, blur, and animations on mobile */
/* Desktop is COMPLETELY UNCHANGED — only affects screens ≤ 768px */
@media (max-width: 768px) {

    /* #1: Remove header backdrop blur (biggest jank cause on mobile scroll) */
    .site-header,
    body.dark-mode .site-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* #2: Remove image blur placeholder (instant image display instead) */
    .game-card .card-thumb img.lazy {
        filter: none !important;
        opacity: 1 !important;
    }

    /* #3: Remove staggered card animations (instant render) */
    .game-card,
    .sidebar-game-card {
        animation: none !important;
    }

    /* #4: Remove sidebar backdrop blur */
    .sidebar-backdrop {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* #5: Simplify hover/touch shadows (reduce GPU paint layers) */
    .game-card:hover,
    .game-card:has(.game-badge.hot):hover,
    .game-card:has(.game-badge.new):hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    /* #6: Remove share modal backdrop blur */
    .share-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* #7: Reduce body gradient complexity */
    body,
    body.dark-mode {
        background-attachment: scroll !important;
    }

    /* #8: Perf hints — ONLY on .center-content (NOT .main-layout!)
       contain:layout on main-layout creates a containing block for
       position:fixed children, trapping nav-sidebar inside and breaking
       z-index vs sidebar-backdrop which is outside main-layout. */
    .center-content {
        will-change: auto;
        contain: layout style;
    }
}