/* ============================================
   🚀 PERFORMANCE BOOST CSS
   Hardware Acceleration & Smooth Rendering
   Optimized for Chrome + All Browsers
   Created: December 2025
   ============================================ */

/* ============================================
   GPU ACCELERATION & HARDWARE RENDERING
   ============================================ */

/* Force GPU acceleration on critical elements */
.gpu-accelerate,
#game,
#game-container,
#game-display-area,
#emulatorModal,
#game canvas,
.ejs_canvas,
video.active-stream,
iframe.game-frame {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Hero panels: promote to their own GPU composite layer */
.hero-multiplayer-panel,
.hero-live-panel,
.hero-launcher-panel {
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Radio player: own GPU layer to avoid repaints on the rest of the page */
.radio-player {
    will-change: auto;
    backface-visibility: hidden;
}

/* Optimize canvas rendering - CRITICAL for emulators */
canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    /* Remove default shadow/filter overhead */
    filter: none !important;
    box-shadow: none !important;
    /* Force GPU layer */
    transform: translate3d(0, 0, 0);
    isolation: isolate;
}

/* EmulatorJS specific optimizations */
#game canvas,
.ejs_canvas,
[id*="ejs"] canvas {
    contain: strict !important;
    will-change: contents !important;
    image-rendering: pixelated !important;
    transform: translateZ(0) !important;
}

/* ============================================
   CHROME SPECIFIC OPTIMIZATIONS
   ============================================ */

/* Disable expensive backdrop-filter in Chrome */
@supports (-webkit-appearance: none) {
    .game-mode-active * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ============================================
   ANIMATION PERFORMANCE
   ============================================ */

/* Reduce animation complexity on low-power mode */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Automatic lite mode for weak PCs, mobile devices, data saver and reduced motion. */
html.og-lite-mode *,
body.low-end-device *,
body.power-save-mode *,
body.data-save-mode * {
    scroll-behavior: auto !important;
}

html.og-lite-mode body::before,
html.og-lite-mode body::after,
body.low-end-device::before,
body.low-end-device::after,
body.power-save-mode::before,
body.power-save-mode::after {
    animation: none !important;
    transition: none !important;
}

html.og-lite-mode .modern-aurora,
html.og-lite-mode .modern-space-canvas,
html.og-lite-mode .modern-cover-wall,
html.og-lite-mode .hero-canvas,
html.og-lite-mode .hero-scanlines,
html.og-lite-mode .hero-vignette,
html.og-lite-mode .gradient-overlay,
html.og-lite-mode .scanline,
html.og-lite-mode .loading-orbs,
html.og-lite-mode .loading-particles,
html.og-lite-mode .gate-lightning,
body.low-end-device .modern-aurora,
body.low-end-device .modern-space-canvas,
body.low-end-device .modern-cover-wall,
body.low-end-device .hero-canvas,
body.low-end-device .hero-scanlines,
body.low-end-device .hero-vignette,
body.low-end-device .gradient-overlay,
body.low-end-device .scanline,
body.low-end-device .loading-orbs,
body.low-end-device .loading-particles,
body.low-end-device .gate-lightning {
    display: none !important;
}

html.og-lite-mode [style*="backdrop-filter"],
html.og-lite-mode [style*="filter: blur"],
body.low-end-device [style*="backdrop-filter"],
body.low-end-device [style*="filter: blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}

html.og-lite-mode .game-card,
html.og-lite-mode .console-card,
html.og-lite-mode .showcase-card,
html.og-lite-mode .live-card,
body.low-end-device .game-card,
body.low-end-device .console-card,
body.low-end-device .showcase-card,
body.low-end-device .live-card {
    transform: none !important;
    will-change: auto !important;
}

/* Pause animations when hidden */
.paused-animations *,
.paused-animations *::before,
.paused-animations *::after {
    animation-play-state: paused !important;
}

/* Disable expensive effects during game play */
body.game-active,
body.game-mode-active {
    /* Disable all non-essential visual effects */
}

body.game-active .cosmic-bg,
body.game-active .nebula-bg,
body.game-active .stars-container,
body.game-active .animated-bg,
body.game-active [class*="glow"],
body.game-active [class*="pulse"],
body.game-active [class*="animate"],
body.game-mode-active .cosmic-bg,
body.game-mode-active .nebula-bg,
body.game-mode-active .stars-container,
body.game-mode-active .animated-bg,
body.game-mode-active [class*="glow"],
body.game-mode-active [class*="pulse"],
body.game-mode-active [class*="animate"] {
    animation: none !important;
    transition: none !important;
}

body.game-active::before,
body.game-active::after,
body.game-mode-active::before,
body.game-mode-active::after {
    display: none !important;
}

/* ============================================
   SCROLL PERFORMANCE
   ============================================ */

/* Optimize scrollable containers */
.scroll-container,
.games-grid,
.console-grid,
#consoles-container,
.modal-content,
.popup-content {
    overflow-anchor: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    contain: layout style paint;
}

/* Contain to prevent layout thrashing */
.game-card,
.console-card,
.showcase-card,
.live-card {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: 280px 350px;
}

/* ============================================
   IMAGE & MEDIA OPTIMIZATION
   ============================================ */

/* Lazy load placeholder */
img[loading="lazy"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    transition: opacity 0.3s ease;
}

img[loading="lazy"]:not([src]) {
    opacity: 0;
}

/* Optimize image rendering */
img {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Video performance */
video {
    /* Hardware decode hint */
    transform: translateZ(0);
    object-fit: cover;
}

/* ============================================
   PAINT & LAYOUT OPTIMIZATION
   ============================================ */

/* Isolate paint operations */
.paint-isolated,
.modal,
.popup,
.overlay,
.dropdown,
.sidebar {
    isolation: isolate;
}

/* Layer promotion for frequently animating elements */
.promote-layer {
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity;
}

/* ============================================
   FONT OPTIMIZATION
   ============================================ */

/* Optimize font rendering */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Display text immediately with fallback */
@font-face {
    font-display: swap;
}

/* ============================================
   CSS CONTAINMENT FOR COMPLEX LAYOUTS
   ============================================ */

/* Strict containment for isolated sections */
section,
article,
.card-container,
.grid-container {
    contain: content;
}

/* Layout containment for grids */
.games-grid,
.console-grid,
.streams-grid {
    contain: layout style;
}

/* ============================================
   INTERSECTION OBSERVER HINTS
   ============================================ */

/* Elements that will be observed */
[data-lazy],
[data-aos],
.lazy-load {
    content-visibility: auto;
}

/* ============================================
   EMULATOR SPECIFIC OPTIMIZATIONS
   ============================================ */

/* Game container - maximum performance */
#game-container {
    contain: strict;
    isolation: isolate;
    overflow: hidden;
}

/* Game canvas - crisp pixels, fast render */
#game canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hide sidebar smoothly */
#game-sidebar.hidden {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

#game-sidebar:not(.hidden) {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ============================================
   LOADING STATES OPTIMIZATION
   ============================================ */

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   MOBILE PERFORMANCE BOOST
   ============================================ */

@media (max-width: 768px) {
    /* Reduce complexity on mobile */
    * {
        box-shadow: none !important;
    }
    
    /* Simpler shadows for cards */
    .game-card,
    .console-card {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Disable blur effects (expensive on mobile) */
    .backdrop-blur,
    [style*="backdrop-filter"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.95) !important;
    }
    
    /* Reduce animation complexity */
    .glow-effect,
    .neon-effect,
    [class*="glow"],
    [class*="neon"] {
        filter: none !important;
        box-shadow: none !important;
    }
    
    /* Simpler transitions */
    * {
        transition-duration: 0.15s !important;
    }
}

/* ============================================
   MACBOOK / DESKTOP PERFORMANCE
   ============================================ */

@media (min-width: 1024px) {
    /* Enable smooth scrolling on desktop */
    html {
        scroll-behavior: smooth;
    }
    
    /* GPU acceleration for hover effects */
    .game-card:hover,
    .console-card:hover {
        transform: translateY(-5px) translateZ(0);
    }
    
    /* Optimize grid layouts */
    .games-grid {
        contain: layout style paint;
    }
}

/* ============================================
   CRITICAL RENDERING PATH
   ============================================ */

/* Above-the-fold content priority */
.hero-section,
.featured-games,
.loading-screen {
    contain: none;
}

/* Below-the-fold content - defer rendering */
.consoles-section,
.all-games-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* ============================================
   MEMORY OPTIMIZATION
   ============================================ */

/* Hide elements completely when not visible */
.visually-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Reduce memory for hidden modals */
.modal:not(.active),
.popup:not(.active),
.overlay:not(.active) {
    display: none;
    content-visibility: hidden;
}

/* Ensure active modals display correctly */
.modal.active {
    display: flex !important;
    content-visibility: visible !important;
}

/* ============================================
   IFRAME OPTIMIZATION (Emulator Core)
   ============================================ */

iframe {
    /* GPU acceleration */
    transform: translateZ(0);
    /* Reduce repaints */
    will-change: contents;
    /* Optimize rendering */
    contain: layout style paint;
}

/* ============================================
   FPS INDICATOR STYLES
   ============================================ */

.fps-indicator {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #00ff00;
    padding: 5px 10px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.fps-indicator.visible {
    opacity: 1;
}

.fps-indicator.low-fps {
    color: #ff6b6b;
}

.fps-indicator.medium-fps {
    color: #ffd93d;
}

.fps-indicator.high-fps {
    color: #6bcb77;
}

/* ============================================
   🚀 MAXIMUM FPS MODE (game-active)
   All non-essential rendering STOPPED
   ============================================ */

/* CRITICAL: Complete visual shutdown for max FPS */
body.game-active *:not(#game):not(#game *):not(.mobile-controls):not(.mobile-controls *):not(.ejs_menu):not(.ejs_menu *):not(.toggle-controls-btn) {
    animation: none !important;
    transition: none !important;
    animation-play-state: paused !important;
    will-change: auto !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Hide ALL non-essential elements during gameplay */
body.game-active .sidebar,
body.game-active .header,
body.game-active .footer,
body.game-active .navbar,
body.game-active .navigation,
body.game-active #game-sidebar,
body.game-active .cosmic-bg,
body.game-active .nebula-bg,
body.game-active .stars-container,
body.game-active .animated-bg,
body.game-active .background-effects,
body.game-active .background-overlay,
body.game-active [class*="particles"],
body.game-active [class*="sparkle"],
body.game-active [class*="floating"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Force game container to use ALL available GPU resources */
body.game-active #game,
body.game-active #game-container,
body.game-active #game-display-area {
    isolation: isolate !important;
    contain: strict !important;
    will-change: contents !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* Canvas optimization for maximum FPS */
body.game-active canvas,
body.game-active #game canvas,
body.game-active .ejs_canvas {
    contain: strict !important;
    will-change: contents !important;
    image-rendering: pixelated !important;
    image-rendering: crisp-edges !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    /* Force exclusive GPU layer */
    z-index: 9999 !important;
    position: relative !important;
}

/* Disable ALL pseudo-elements during gameplay */
body.game-active *::before,
body.game-active *::after {
    display: none !important;
    content: none !important;
}

/* Allow only game-related pseudo-elements */
body.game-active #game *::before,
body.game-active #game *::after,
body.game-active .mobile-controls *::before,
body.game-active .mobile-controls *::after {
    display: initial;
    content: initial;
}

/* Force content-visibility for off-screen elements */
body.game-active .off-screen,
body.game-active [style*="display: none"],
body.game-active .hidden {
    content-visibility: hidden !important;
}