/*
 * Deployment-safe mobile shell corrections for the game page.
 * The physical version is part of the filename because the IIS publication can
 * retain an earlier response for the same static-file path.
 */
@media (max-width: 47.99rem) {
    html,
    body.has-tourism-mobile-nav {
        overflow-x: clip !important;
        overscroll-behavior-x: none;
    }

    /* Some mobile/browser-emulation combinations expose a dynamic viewport
       wider than the root percentage containing block. Use the same viewport
       measurement as the fixed navigation so normal-flow portal content does
       not stop short of the right edge. */
    body.has-tourism-mobile-nav {
        box-sizing: border-box;
        width: 100vw;
        width: 100dvw;
        min-width: 100vw;
        min-width: 100dvw;
        max-width: 100dvw;
        margin-right: 0;
        margin-left: 0;
    }

    body.has-tourism-mobile-nav > .site-topbar,
    body.has-tourism-mobile-nav > .site-header,
    body.has-tourism-mobile-nav > .acr-game-page,
    body.has-tourism-mobile-nav > .site-footer {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
    }

    body.has-tourism-mobile-nav .acr-game-page__container,
    body.has-tourism-mobile-nav .acr-game-shell[data-mode="selection"],
    body.has-tourism-mobile-nav .acr-expedition-selector {
        box-sizing: border-box;
        width: 100%;
        max-width: none;
    }

    /* The modal enters the top layer. Its percentage min-width can otherwise
       resolve against the document's 434px overflow box instead of the visible
       390px viewport. Keep the popup independent from normal-flow body sizing. */
    body.has-tourism-mobile-nav .acr-passport__dialog {
        box-sizing: border-box;
        width: 100vw !important;
        width: 100dvw !important;
        min-width: 100vw !important;
        min-width: 100dvw !important;
        max-width: 100dvw !important;
    }

    body.has-tourism-mobile-nav .acr-passport__surface {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Preserve the approved fixed-navigation sizing. */
    body.has-tourism-mobile-nav .tourism-mobile-nav {
        position: fixed !important;
        z-index: 1035;
        right: auto !important;
        bottom: 0;
        left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        box-sizing: border-box;
        width: 100vw !important;
        width: min(100%, 100dvw) !important;
        min-width: 0 !important;
        max-width: 100dvw !important;
        margin: 0 !important;
        backface-visibility: visible;
        contain: none;
        transform: none;
        will-change: auto;
    }

    body.has-tourism-mobile-nav .tourism-mobile-nav a {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Preserve the approved right-edge compensation for the back-to-top control. */
    body.has-tourism-mobile-nav .back-to-top {
        right: 1rem !important;
        right: max(1rem, calc(100% - 100dvw + 1rem), env(safe-area-inset-right, 0px)) !important;
    }
}