/* Shared responsive behavior for player pages and admin panels. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-width: 0;
    min-height: 100%;
}

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

body {
    overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

/* Player pages use rems authored against a 10rem phone canvas. Scale that
   canvas with the viewport on phones, then keep it comfortably centered on desktop. */
html.player-theme {
    width: 100% !important;
    margin: 0 !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    font-size: clamp(32px, 10vw, 50px) !important;
}

body.player-theme {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
}

body.player-theme #app,
body.player-theme .mian,
body.player-theme .home,
body.player-theme .page {
    width: 100% !important;
    max-width: 500px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.player-theme .navbar,
body.player-theme .van-tabbar,
body.player-theme #nav_checkUrl {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* The Vant bar and its wrapper were both fixed. On mobile, browser chrome
   resizing during scroll could move the two layers independently. Keep one
   fixed layer and include the safe-area space in its measured height. */
body.player-theme #nav_checkUrl {
    --player-nav-height: 1.46667rem;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    height: calc(var(--player-nav-height) + env(safe-area-inset-bottom, 0px)) !important;
}

body.player-theme .home #nav_checkUrl,
body.player-theme.activity-screen #nav_checkUrl {
    --player-nav-height: calc(1.33333rem + 1px);
}

body.player-theme #nav_checkUrl > .van-tabbar {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.player-theme .van-tabbar img,
body.player-theme .navbar img {
    max-width: none;
}

/* Wide admin data grids stay usable without forcing the whole page wider. */
@media (max-width: 767.98px) {
    body.hold-transition .content-wrapper,
    body.hold-transition .main-footer,
    body.hold-transition .main-header {
        margin-left: 0 !important;
    }

    body.hold-transition .content-wrapper {
        min-height: calc(100vh - 3.5rem);
        overflow-x: hidden;
    }

    body.hold-transition .content {
        padding: 0.75rem;
    }

    body.hold-transition .card-header,
    body.hold-transition .card-body {
        padding: 0.75rem;
    }

    body.hold-transition .table-responsive,
    body.hold-transition .dataTables_wrapper {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.hold-transition table {
        min-width: 34rem;
    }

    body.hold-transition .form-row > [class*="col-"],
    body.hold-transition .row > [class*="col-"] {
        min-width: 0;
    }

    body.hold-transition .content-header h1 {
        font-size: 1.35rem;
        overflow-wrap: anywhere;
    }
}