/* CyberForge Arcade — Mobile Game Player Layout
 *
 * Loaded after styles.css so these rules win without `!important` wars.
 *
 * Goal: on phones (especially portrait), maximize game-viewing space.
 * The default desktop modal forces a 16:9 box that letterboxes the game
 * into a tiny region on a tall portrait viewport. On mobile we:
 *
 *   - Drop the forced 16:9 aspect ratio so the modal can fill the screen.
 *   - Use 100dvw / 100dvh so the player adapts to dynamic browser chrome.
 *   - Move the controls bar to a compact, semi-translucent strip and
 *     reserve only its real height for the iframe (no 4rem dead zone).
 *   - Let the iframe itself preserve its content aspect by filling the
 *     available block with `object-fit: contain` semantics on the iframe.
 *
 * The fallback `.game-player-container` selector matches the user's
 * suggested API so future markup using that class also benefits.
 */

/* ------------------------------------------------------------------ */
/* Generic helper for any future `.game-player-container` element.    */
/* ------------------------------------------------------------------ */
.game-player-container {
    width: 100%;
    min-height: 75vh;
    height: clamp(500px, 80vh, 900px);
}

/* ------------------------------------------------------------------ */
/* Mobile portrait + general small-screen overrides for #gameModal    */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* Edge-to-edge modal: ditch the rounded card look on phones so the
       game gets every available pixel. */
    #gameModal.modal {
        background: #000;
    }

    #gameModal .modal-content {
        /* Take the entire viewport. Use dvh/dvw for browsers that hide
           chrome dynamically (mobile Safari/Chrome) and fall back to vh/vw
           for older engines via the height: 100vh below. */
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        /* Critical: remove the 16:9 forced ratio that was shrinking the
           game on tall portrait screens. */
        aspect-ratio: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        /* The iframe + controls absolutely position themselves inside, so
           we don't need padding-bottom for the controls anymore — the
           iframe rule below reserves the right amount of space. */
        margin: 0;
        background: #000;
        overflow: hidden;
    }

    /* The iframe fills the modal minus the compact controls strip. */
    #gameModal .modal-game-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        /* 56px controls bar -> reserve exactly that, no more. */
        height: calc(100% - 56px);
        border: 0;
        background: #000;
        display: block;
    }

    /* Compact, translucent controls strip at the bottom. */
    #gameModal .modal-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 56px;
        padding: 0 0.6rem;
        background: rgba(0, 0, 0, 0.82);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 0.4rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Hide the scrollbar on the controls overflow strip. */
    #gameModal .modal-controls::-webkit-scrollbar { display: none; }
    #gameModal .modal-controls { scrollbar-width: none; }

    /* Slightly smaller, denser control buttons so they all fit. */
    #gameModal .modal-controls .control-button {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 0.95rem;
        flex: 0 0 auto;
    }

    /* Volume slider gets a fixed compact width on mobile so it doesn't
       push other controls off-screen. */
    #gameModal .modal-controls .volume-control {
        flex: 0 1 120px;
        min-width: 90px;
    }

    /* Close button: keep it accessible but tuck it just inside the
       top-right with a safe-area-friendly inset. */
    #gameModal .close-modal {
        top: max(0.6rem, env(safe-area-inset-top, 0px));
        right: max(0.6rem, env(safe-area-inset-right, 0px));
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
        z-index: 1002;
        background: rgba(0, 0, 0, 0.7);
        color: var(--text, #fff);
        border: 1px solid var(--primary, #c0c0c0);
    }
    #gameModal .close-modal:hover {
        background: var(--primary, #c0c0c0);
        color: var(--background, #000);
    }
}

/* ------------------------------------------------------------------ */
/* Mobile PORTRAIT — the headline ask: game should dominate the view  */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) and (orientation: portrait) {
    /* Already filling the viewport via the rules above; just make
       absolutely sure no leftover aspect ratio sneaks back in via
       earlier media queries (320–480px overrides). */
    #gameModal .modal-content {
        aspect-ratio: auto;
        max-height: none;
        height: 100dvh;
    }

    /* Reserve at least 78% of the viewport for the iframe; the controls
       strip is 56px so on most phones the iframe naturally lands at
       ~85–90%, which matches the YouTube / Twitch feel. */
    #gameModal .modal-game-frame {
        height: calc(100dvh - 56px);
        min-height: 78dvh;
    }

    /* Loading message overlay should sit over the game, not push it. */
    #gameModal .loading-message {
        position: absolute;
        left: 50%;
        top: 1rem;
        transform: translateX(-50%);
        max-width: 90%;
        z-index: 1003;
    }
}

/* ------------------------------------------------------------------ */
/* Mobile LANDSCAPE — let the game truly take the screen              */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) and (orientation: landscape) {
    #gameModal.modal { background: #000; }

    #gameModal .modal-content {
        position: fixed;
        inset: 0;
        transform: none;
        width: 100vw;
        width: 100dvw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        max-height: none;
        aspect-ratio: auto;
        border: none;
        border-radius: 0;
        padding: 0;
        background: #000;
    }

    /* Slimmer controls strip in landscape so the game gets even more room. */
    #gameModal .modal-controls {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 48px;
        padding: 0 0.5rem;
        background: rgba(0, 0, 0, 0.78);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 0.4rem;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    #gameModal .modal-game-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100% - 48px);
        border: 0;
        background: #000;
    }

    #gameModal .modal-controls .control-button {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    #gameModal .close-modal {
        top: max(0.4rem, env(safe-area-inset-top, 0px));
        right: max(0.4rem, env(safe-area-inset-right, 0px));
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }
}

/* ------------------------------------------------------------------ */
/* Browser native fullscreen — game gets ALL pixels, hide controls    */
/* ------------------------------------------------------------------ */
.modal-content:fullscreen,
.modal-content:-webkit-full-screen {
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000 !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    margin: 0 !important;
}

.modal-content:fullscreen .modal-game-frame,
.modal-content:-webkit-full-screen .modal-game-frame {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* Fullscreen mode: keep a small, auto-hiding controls strip out of the
   way so the player feels truly fullscreen. The strip is visible for
   the first few seconds, then fades. */
.modal-content:fullscreen .modal-controls,
.modal-content:-webkit-full-screen .modal-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 52px !important;
    padding: 0 0.6rem !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 0.4rem !important;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.modal-content:fullscreen .modal-controls:hover,
.modal-content:-webkit-full-screen .modal-controls:hover,
.modal-content:fullscreen:hover .modal-controls,
.modal-content:-webkit-full-screen:hover .modal-controls {
    opacity: 1;
}

.modal-content:fullscreen .close-modal,
.modal-content:-webkit-full-screen .close-modal {
    top: max(0.6rem, env(safe-area-inset-top, 0px)) !important;
    right: max(0.6rem, env(safe-area-inset-right, 0px)) !important;
}

/* Safe-area gutter for devices with home indicator strips (modern iOS). */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        #gameModal .modal-controls {
            padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
            height: calc(56px + env(safe-area-inset-bottom, 0px));
        }
        #gameModal .modal-game-frame {
            height: calc(100% - 56px - env(safe-area-inset-bottom, 0px));
        }
    }
    @media (max-width: 768px) and (orientation: portrait) {
        #gameModal .modal-game-frame {
            height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
            min-height: 78dvh;
        }
    }
}