/* Mobile viewport ownership: let ordinary product pages use the document
   scroller, while game and conversation surfaces retain their fixed shells. */
@media (max-width: 767px) {
    body:not(.game-active):not(.live-board-active):not(.mobile-conversation-active) {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    body:not(.game-active) > .app-container.tp-shell {
        height: auto;
        min-height: 100dvh;
        overflow-x: clip;
        overflow-y: visible;
    }

    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game):not(#screen-messages):not(#screen-ai-coach):not(#screen-profile) {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game):not(#screen-messages):not(#screen-ai-coach):not(#screen-profile) > .sm-page-header,
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game):not(#screen-messages):not(#screen-ai-coach):not(#screen-profile) > .home-header,
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game):not(#screen-messages):not(#screen-ai-coach):not(#screen-profile) > .sub-screen-header {
        /* These headers now participate in normal page flow. Retaining the old
           sticky offset moved them 61px over their own content. */
        top: auto !important;
    }
}

/* The screen wrapper reserves the floating navigation and safe area once.
   Content roots keep only ordinary end-of-content spacing. */
@media (max-width: 1023px) {
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game) {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game):not(.tp-messages-page) > .tp-product-content,
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game) > .tp-home__content,
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game) > .tp-more-page,
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game) > .tp-ai-root,
    body:not(.game-active) .tp-shell-main > .screen.active:not(#screen-game) > .league-screen-inner {
        padding-bottom: 24px;
    }
}