/*
 * User-side mobile viewport
 *
 * Keep user pages at a phone-sized width on desktop browsers while retaining
 * the original full-width layout on phones.
 */
:root {
    --user-mobile-viewport-width: 480px;
}

html {
    min-height: 100%;
    background-color: #f2f2f2;
}

body {
    width: 100%;
    max-width: var(--user-mobile-viewport-width);
    min-height: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-x: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, .12);
}

/* Common full-page roots. */
body > #app,
body > #wrap-contain,
body > #wrapper,
body > .container-page,
body > .page-container {
    width: 100%;
    max-width: var(--user-mobile-viewport-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Common fixed headers and footers must follow the centered page width. */
body > header,
body > footer,
body > .header,
body > .footer,
.header-page,
.footer-page,
.mui-bar,
.footer-nav-positi,
.gmfix,
.betfoot,
.pltit,
.ljzf_but,
.vux-header.header,
#footer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--user-mobile-viewport-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/*
 * Legacy user pages render the "back to lobby" action as a fixed, direct
 * child anchor with an inline width of 100%. Keep it aligned with the
 * centered phone canvas instead of letting it use the desktop viewport.
 */
a[href="/user/index.php"][style*="position: fixed"] {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: var(--user-mobile-viewport-width);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* Some account pages put the fixed header inside .main1. */
body header {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: var(--user-mobile-viewport-width);
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* The referral QR block is absolutely positioned against the viewport. */
.extend-qr-box {
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: var(--user-mobile-viewport-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.extend-qr-box img {
    max-width: 240px;
    height: auto;
}

body > header,
body > footer,
body > .header,
body > .footer {
    transform: none;
}

/*
 * style2 game pages are viewport-style applications. Creating a containing
 * block here also keeps their nested fixed menus, bet panels and dialogs
 * inside the mobile-width game canvas.
 */
body > #wrap-contain {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transform: translateZ(0);
}

/* Mobile Layer dialogs are appended directly to body and need their own cap. */
.layui-m-layermain {
    left: 50% !important;
    width: 100% !important;
    max-width: var(--user-mobile-viewport-width);
    transform: translateX(-50%);
}

@media (max-width: 480px) {
    body {
        box-shadow: none;
    }
}