body:not(.math-cross-mobile) > .m4k-mobile-header { display: none; }
#game { touch-action: none; user-select: none; -webkit-user-select: none; }
#mobile-info[hidden] { display: none; }
#mobile-info {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow-y: auto;
    padding: 48px 20px 20px;
    border: 3px solid #9393ec;
    border-radius: 12px;
    background: #fffef1;
    color: #202540;
    text-align: start;
    font: 17px/1.5 system-ui, sans-serif;
    overscroll-behavior: contain;
}
#mobile-info h2 { font-size: 22px; }
#mobile-info-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: #e5e5ff;
    color: #252558;
    font: 32px/1 system-ui, sans-serif;
}
body.math-cross-mobile { margin: 0; }
.math-cross-mobile #page-header,
.math-cross-mobile #blueHeadBg { display: none; }
.math-cross-mobile main {
    height: auto;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    padding: 30px 6px 6px;
    align-items: flex-start;
}
.math-cross-mobile #game-wrap { margin: 0 auto; flex: none; }
.math-cross-mobile #game { max-width: 100%; border-radius: 8px; }
.math-cross-mobile .compPageTitle {
    position: absolute;
    inset: auto 0 calc(100% + 5px);
    width: 100%;
    margin: 0;
    padding: 0;
    font: 700 18px/1.2 Assistant, sans-serif;
    color: #193d67;
    text-align: center;
}
.math-cross-mobile #footer { position: static; }
@media (orientation: landscape) {
    .math-cross-mobile main { min-height: 100vh; min-height: 100dvh; }
}

/* Keep the site's portrait header above the game, within the viewport. */
body.math-cross-portrait main {
    min-height: 0;
    height: calc(100vh - 48px);
    height: calc(100dvh - 48px);
    padding: max(12px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
.math-cross-portrait .compPageTitle { display: none; }
.math-cross-portrait .m4k-mobile-menu {
    top: 48px;
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    pointer-events: auto;
}

body.math-cross-landscape main {
    min-height: 0;
    height: 100vh;
    height: 100dvh;
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}
.math-cross-landscape .compPageTitle,
.math-cross-landscape .m4k-mobile-logo { display: none; }
.math-cross-landscape > .m4k-mobile-header {
    position: absolute;
    top: max(4px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    width: auto;
    height: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}
.math-cross-landscape .m4k-mobile-header .m4k-mobile-menu-toggle {
    width: 44px;
    height: 44px;
    pointer-events: auto;
}
.math-cross-landscape .m4k-mobile-menu {
    top: 56px;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    pointer-events: auto;
}
.math-cross-landscape #mobile-info { right: 64px; }