/* Global viewport fit — every page (social, portal, legacy, PWA + mobile browser). */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
iframe,
embed,
object,
svg,
pre,
table {
    max-width: 100%;
}

img,
video {
    height: auto;
}

@media (max-width: 1100px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .wrap,
    .grid,
    .panel,
    .page,
    .layout-grid,
    .layout-grid > *,
    .main-content,
    .portal-main-content,
    .portal-social-frame,
    .sections,
    .tabs-shell,
    .tab-content,
    .header-grid,
    .social-landing,
    main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }
}

html.pwa-installed {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html.pwa-installed body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html.pwa-installed,
html.pwa-installed body {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}

html.pwa-installed body {
    overscroll-behavior-y: contain;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* App shells handle safe-area on header/nav — body gutters cause horizontal overflow */
html.pwa-installed body.social-page,
html.pwa-installed body.social-portal-page,
html.pwa-installed body.social-portal-embed,
html.pwa-installed body.portal-themed,
html.pwa-installed body.theme-xp {
    padding-left: 0;
    padding-right: 0;
}

html.pwa-installed .wrap {
    width: 100%;
    max-width: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-top: max(clamp(22px, 4vw, 42px), calc(12px + env(safe-area-inset-top, 0)));
    padding-bottom: max(clamp(22px, 4vw, 42px), calc(16px + env(safe-area-inset-bottom, 0)));
    padding-left: max(clamp(14px, 3vw, 22px), env(safe-area-inset-left, 0));
    padding-right: max(clamp(14px, 3vw, 22px), env(safe-area-inset-right, 0));
}

@media (max-width: 680px) {
    html.pwa-installed .wrap {
        padding-top: max(14px, calc(8px + env(safe-area-inset-top, 0)));
        padding-bottom: max(18px, calc(12px + env(safe-area-inset-bottom, 0)));
        padding-left: max(12px, env(safe-area-inset-left, 0));
        padding-right: max(12px, env(safe-area-inset-right, 0));
    }

    html.pwa-installed .panel {
        padding: 16px;
    }
}

html.pwa-installed .modalOverlay,
html.pwa-installed .modal-overlay {
    padding-top: max(12px, env(safe-area-inset-top, 0));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0));
    padding-left: max(12px, env(safe-area-inset-left, 0));
    padding-right: max(12px, env(safe-area-inset-right, 0));
}

html.pwa-installed body.casino-playing {
    overflow: hidden;
    padding: 0;
}

/* Legacy player portal embed (legacy_index tabs) */
body.social-portal-embed,
body.portal-themed,
body.theme-xp {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

body.social-portal-embed .sections,
body.social-portal-embed .tabs-shell,
body.social-portal-embed .tab-content,
body.social-portal-embed .header-grid,
body.social-portal-embed .card {
    max-width: 100%;
    min-width: 0;
}

body.social-portal-page .portal-main-content,
body.social-portal-page .layout-grid.layout-portal {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}