/* Custom Tablet Styles - Scaling Desktop layout to fit Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        zoom: 0.8; /* Scales down the desktop design by 20% to fit */
        -moz-transform: scale(0.8);
        -moz-transform-origin: top center;
    }
    
    .container {
        /* Ensure container fits properly */
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Force desktop layout for store buttons in the footer */
    .store-desktop {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .store-desktop .appstore-link img {
        margin-bottom: 0 !important;
    }
    
    .store-mobile {
        display: none !important;
    }

    /* Reduce bottom padding of the footer by 4px without causing scroll */
    .footer-content {
        padding-bottom: 1px !important; /* Originally 5px */
    }

    /* Remove horizontal scroll from Hero and Footer */
    /* Forcefully clip horizontal scroll using clip instead of hidden */
    html, body {
        overflow-x: clip !important;
        width: 100% !important;
        max-width: 100% !important;
        overscroll-behavior-x: none !important;
        position: relative !important;
    }

    .main-header, .hero-banner-complex, .hero-layout, .main-footer, .footer-content, .new-games-bar, .container {
        position: relative !important;
        overflow-x: clip !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make the hero characters smaller on tablet */
    .hero-char {
        height: 100% !important;
    }

    /* Align both heroes at the same bottom level */
    .hero-char.left, .hero-char.right {
        bottom: -10px !important;
    }

    /* Fix the alignment of the Developer and Play Button in the interaction bar */
    #game-meta-horizontal > div:first-child {
        transform: translateX(-50px) !important; /* Push slightly left */
        justify-content: center !important;
        width: auto !important;
        flex: none !important;
        margin-bottom: 0 !important;
    }

    /* Push the 3 game thumbnails to the right */
    #game-meta-horizontal .thumbnails-row {
        transform: translateX(20px) !important;
    }

    /* Remove the green border from the active thumbnail image */
    #game-meta-horizontal .thumb-item {
        border: 1px solid #333 !important;
    }

    #game-meta-horizontal {
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}