/* ========================================
   CLS (Cumulative Layout Shift) FIX
   Version: 1.0
   Fixes layout shifts on game pages
   ======================================== */

/* Fix logo container - reserve space with aspect-ratio */
.software-bg-logo {
    aspect-ratio: 1 / 1;
    width: 160px;
    height: 160px;
    object-fit: contain;
}

/* Header section - fixed height to prevent shift */
#newHeader.newHeader {
    min-height: 200px;
}

/* Game iframe wrapper - reserve space */
.game-iframe-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px;
    aspect-ratio: 16 / 9;
    background: #1a1a2e;
}

.game-iframe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.game-frame {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

/* Fallback content - prevent shift when shown */
.game-iframe-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.game-iframe-fallback.show {
    display: flex;
}

.fallback-game-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* Similar games grid - reserve space for images */
.game-content .content-image {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* FAQ accordion - prevent shift on toggle */
.faqbody {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Cookie consent - positioned fixed, won't cause CLS */
.cookie-consent-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.cookie-consent-bar.show {
    transform: translateY(0);
}

/* Age verification modal - already positioned, ensure no shift */
#popUp18plus {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

/* Loading spinner - centered, no shift */
.iframe-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .software-bg-logo {
        width: 120px;
        height: 120px;
    }

    #newHeader.newHeader {
        min-height: 180px;
    }

    .game-iframe-wrapper {
        min-height: 400px;
        aspect-ratio: 4 / 3;
    }

    .fallback-game-logo {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    .software-bg-logo {
        width: 100px;
        height: 100px;
    }

    #newHeader.newHeader {
        min-height: 160px;
    }

    .game-iframe-wrapper {
        min-height: 300px;
    }
}