:root {
    --page-edge: 10px;
}

/* One shared viewport gutter; safe areas still protect landscape device cutouts. */
.app-page-shell,
.app-topbar > .container-fluid,
.footnav > .container-fluid {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-left: max(var(--page-edge), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--page-edge), env(safe-area-inset-right, 0px)) !important;
}

/* Page containers must not add another gutter inside the shared shell. */
.app-content .container,
.app-content .container-fluid {
    --bs-gutter-x: 20px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-content > .container,
.app-content > .container-fluid {
    max-width: none !important;
}

/* Match outer grid margins to the 10px gutter to avoid horizontal overflow. */
.app-content > .row:not(.g-0):not(.gx-0),
.app-content > .container > .row:not(.g-0):not(.gx-0),
.app-content > .container-fluid > .row:not(.g-0):not(.gx-0) {
    --bs-gutter-x: 20px;
}

/* Alternate login and game layouts have their own outer wrappers. */
.app-content > .top-bar {
    padding-inline: 0;
}
.app-content > .wrap {
    max-width: none;
    padding-inline: 0;
}