/* Performance Optimization CSS - Critical CSS Inline */ /* Inline this file content into HTML to speed up above-the-fold rendering */ /* ======================================== Critical CSS - Essential Above-the-Fold Styles ======================================== */ /* Base Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Prevent layout shift */ img, video, iframe { max-width: 100%; height: auto; display: block; } /* Font loading optimization */ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Container */ .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; } /* Properties to reduce repaints */ .game-card, .widget-item, .list-card { will-change: transform; contain: layout style paint; } /* Image lazy loading placeholder */ img.lazyload:not([src]), img[data-src]:not([src]) { opacity: 0; transition: opacity 0.3s; } img.lazyloaded, img[src] { opacity: 1 !important; } /* Skeleton screen animation */ @keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } .skeleton { background: linear-gradient( 90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100% ); background-size: 200px 100%; animation: skeleton-loading 1.5s infinite; } /* GPU acceleration */ .game-card, .widget-item, .button { transform: translateZ(0); backface-visibility: hidden; } /* Reduce layout calculations */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; content-visibility: auto; contain-intrinsic-size: auto 500px; } /* Scroll optimization */ body { overscroll-behavior: none; } /* CSS contain optimization */ header, footer, .sidebar { contain: layout style; }