/*
 * Viewport-fit is shared by every HTML response.  It deliberately keeps
 * scrolling available for live logs and long pickers, but never reserves a
 * visible scrollbar gutter.  Main game and facility screens use the matching
 * script to fit their primary content inside the available viewport instead
 * of making the document itself taller than the screen.
 */
html,
body,
html *,
body * {
    -ms-overflow-style: none;
    scrollbar-width: none;
    scrollbar-gutter: auto !important;
}

:root {
    --endva-mobile-viewport-bottom: 0px;
    --endva-mobile-browser-chrome: calc(100vh - 100dvh);
    --endva-mobile-bottom-offset: max(0px, var(--endva-mobile-viewport-bottom), var(--endva-mobile-browser-chrome));
}

::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

html.endva-viewport-locked,
html.endva-viewport-locked body {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Facility shell -------------------------------------------------------- */
body.facility-theme.facility-shell-ready {
    overflow: hidden !important;
}

body.facility-theme .facility-content-frame {
    /* The facility shell fixes the browser viewport, so this frame must be
       the actual scroll container.  Hiding its overflow also disables touch
       scrolling for every long facility page on phones. */
    overflow-x: hidden;
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    align-content: flex-start;
    align-items: flex-start;
}

body.facility-theme .facility-content-stage {
    /* The facility theme sheet owns the panel layout.  Keep only the
       transform anchor here so it cannot undo that shared flex stage. */
    transform-origin: top center;
}

/* The global menu previously sat in the same top-right corner as the
   facility exit action. Place it directly below the facility header instead
   so both controls remain independently tappable. */
body.facility-theme.facility-shell-ready #floating-ui {
    top: calc(var(--facility-shell-header-height, 58px) + var(--facility-shell-gap, 10px) + 8px);
    right: var(--facility-shell-gap, 10px);
}

body.facility-theme.facility-compact .facility-content-frame {
    gap: 8px;
    padding: 0;
}

body.facility-theme.facility-compact .panel,
body.facility-theme.facility-compact .facility-panel {
    padding: clamp(10px, 1.1vw, 16px) !important;
}

body.facility-theme.facility-compact :is(.header, .npc-box, .town-event) {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}

body.facility-theme.facility-compact :is(.quest-item, .item-card, .shop-item, .room-card, .listing-card, .facility-card) {
    padding: 10px !important;
    margin-bottom: 8px !important;
}

body.facility-theme.facility-compact :is(.facility-btn, .tab-btn, .chat-tab) {
    min-height: 34px !important;
    padding-block: 7px !important;
}

body.facility-theme.facility-compact :is(p, .cms-text, .facility-desc, .item-desc, .shop-item-desc) {
    line-height: 1.38;
}

.facility-mobile-panes {
    display: none;
}

@media (max-width: 640px) {
    body.facility-theme.facility-shell-ready {
        padding: 7px !important;
    }

    body.facility-theme .facility-content-stage {
        width: 100%;
    }

    body.facility-theme.facility-shell-ready #floating-ui {
        top: calc(var(--facility-shell-header-height, 52px) + var(--facility-shell-gap, 8px) + 6px);
        right: 8px;
    }

    .facility-mobile-panes {
        flex: 0 0 auto;
        display: flex;
        width: min(100%, 560px);
        margin: 0 auto 6px;
        gap: 6px;
    }

    .facility-mobile-pane-button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 34px;
        padding: 7px 8px;
        border: 1px solid var(--border-color, #54544b);
        border-radius: 6px;
        background: var(--button-bg, #242d26);
        color: var(--text-muted, #a7a99e);
        font: inherit;
        font-size: 13px;
        font-weight: 800;
    }

    .facility-mobile-pane-button.is-active {
        border-color: var(--accent-green, #9b7650);
        background: var(--button-hover-bg, #303b32);
        color: var(--button-text, #eef0e7);
    }

    body.facility-theme.facility-mobile-panes-active .facility-content-stage > .container {
        display: block !important;
    }

    body.facility-theme.facility-mobile-panes-active .facility-content-stage > .container > .panel[hidden] {
        display: none !important;
    }
}

/* Mobile browser toolbars can cover position:fixed controls even when a
   device has no bottom safe-area inset. Every shared floating control uses
   this offset so it remains above Safari/Chrome's visible toolbar. */
@media (max-width: 768px) {
    /* A collapsed chat must be fully off-screen.  Some short phone viewports
       previously left its header peeking above the bottom browser bar. */
    body:not(.mobile-chat-open) #endvaMobileChatDrawer.mobile-chat-drawer {
        transform: translateY(calc(100% + 72px)) !important;
        pointer-events: none;
    }

    body.mobile-chat-open #endvaMobileChatDrawer.mobile-chat-drawer {
        transform: translateY(0) !important;
        pointer-events: auto;
    }

    /* Mobile safety net for shared overlays.  Individual facilities still
       contain a few broad `button { width: 100% }` rules; without an explicit
       reset those rules leak into controls appended by the global UI shell. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

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

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

    body.facility-theme .facility-npc-card-auto {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
    }

    body.facility-theme .facility-npc-card-auto > div:last-child {
        min-width: 0;
        flex: 1 1 180px;
    }

    #endvaMobileChatFab.mobile-chat-fab {
        box-sizing: border-box !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 74px !important;
        max-width: calc(100vw - 24px) !important;
        height: auto !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 9px 13px !important;
        flex: 0 0 auto !important;
        align-self: auto !important;
    }

    #endvaMobileChatDrawer.mobile-chat-drawer {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #endvaMobileChatDrawer .mobile-chat-close {
        box-sizing: border-box !important;
        display: inline-flex !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 38px !important;
        align-items: center;
        justify-content: center;
    }

    #endvaMobileChatDrawer .mobile-chat-tab {
        box-sizing: border-box !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 7px 11px !important;
        flex: 0 0 auto !important;
    }

    #endvaMobileChatDrawer .mobile-chat-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 8px !important;
        margin: 0 !important;
    }

    #endvaMobileChatDrawer .mobile-chat-form input {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 11px 12px !important;
    }

    #endvaMobileChatDrawer .mobile-chat-char-count {
        display: none !important;
    }

    #endvaMobileChatDrawer .mobile-chat-form button {
        box-sizing: border-box !important;
        display: inline-flex !important;
        width: auto !important;
        min-width: 68px !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        flex: 0 0 auto !important;
        align-items: center;
        justify-content: center;
    }

    .mobile-chat-fab {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--endva-mobile-bottom-offset)) !important;
    }

    /* The battle page has its own persistent action dock and battle-log
       ticker. Keep chat above them and away from the left-side 普攻 button. */
    body.mmo-battle #endvaMobileChatFab.mobile-chat-fab {
        right: 10px !important;
        left: auto !important;
        bottom: calc(128px + env(safe-area-inset-bottom, 0px) + var(--endva-mobile-bottom-offset)) !important;
    }

    .mobile-chat-drawer {
        bottom: var(--endva-mobile-bottom-offset) !important;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--endva-mobile-bottom-offset) - 18px) !important;
    }

    body.mmo-adventure {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px) + var(--endva-mobile-bottom-offset)) !important;
    }

    body.mmo-adventure .side-panel.open {
        bottom: var(--endva-mobile-bottom-offset) !important;
    }

    body.mmo-adventure .side-panel {
        height: min(82dvh, calc(720px - var(--endva-mobile-bottom-offset))) !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px) + var(--endva-mobile-bottom-offset)) !important;
    }
}

/* Exploration stays a true single-column page on touch devices.  Some mobile
   browsers report a wider layout viewport, so use a slightly wider breakpoint
   than the original stylesheet instead of letting a two-column grid squeeze
   the activity panel into a narrow strip. */
@media (max-width: 1024px) and (pointer: coarse), (max-width: 768px) {
    body.mmo-adventure {
        width: 100%;
        max-width: none !important;
        min-width: 0;
        padding-inline: 10px !important;
    }

    body.mmo-adventure .grid-2 {
        display: block !important;
        width: 100% !important;
        min-width: 0;
    }

    body.mmo-adventure .main-panel {
        width: 100%;
        min-width: 0;
    }

    body.mmo-adventure .side-panel {
        position: fixed !important;
        right: 0;
        bottom: calc(-100dvh - 24px) !important;
        left: 0;
        width: 100% !important;
        height: min(82dvh, 720px) !important;
        z-index: 1000;
        display: flex !important;
        flex-direction: column;
        overflow-y: auto;
        padding: 16px;
        padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px) + var(--endva-mobile-bottom-offset));
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        background: var(--bg-panel, #0c1210);
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
        transition: bottom 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    }

    body.mmo-adventure .side-panel.open {
        bottom: var(--endva-mobile-bottom-offset) !important;
    }

    body.mmo-adventure .drawer-toggle-btn {
        right: 14px;
        left: auto;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--endva-mobile-bottom-offset)) !important;
        z-index: 997;
        display: flex !important;
        width: auto !important;
        min-width: 0;
        min-height: 46px;
        padding: 10px 15px;
        border: 1px solid rgba(213, 177, 106, 0.88);
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(18, 29, 24, 0.98), rgba(35, 27, 12, 0.98));
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
        justify-content: center;
    }

    /* Exploration already has an in-page party chat tab.  Do not duplicate it
       with a second floating chat control that overlaps the utility drawer. */
    body.mmo-adventure #endvaMobileChatFab.mobile-chat-fab,
    body.mmo-adventure #endvaMobileChatDrawer.mobile-chat-drawer,
    body.mmo-adventure #endvaMobileChatBackdrop.mobile-chat-backdrop {
        display: none !important;
    }

    body.mmo-adventure .drawer-handle {
        display: block !important;
    }

    body.mmo-adventure .close-drawer-btn {
        display: flex !important;
    }

    /* The chat drawer takes the foreground while open; keep the party trigger
       out of the way rather than leaving an inert button behind the drawer. */
    body.mmo-adventure.mobile-chat-open .drawer-toggle-btn {
        opacity: 0;
        pointer-events: none;
        transform: translateY(calc(100% + 24px));
    }
}

/* Fixed-size game views ------------------------------------------------- */
body.mmo-battle {
    min-height: 0;
    overflow: hidden;
}

body.mmo-battle .game-screen {
    height: min(85dvh, calc(100dvh - 24px));
    min-height: 0;
}

@media (max-width: 992px) {
    body.mmo-battle .game-screen {
        height: 100dvh;
        min-height: 0;
    }
}

@media (max-width: 640px) {
    body.mmo-character,
    body.mmo-lifeskills,
    body.mmo-create-character,
    body.mmo-death,
    body.mmo-prologue {
        padding: 8px !important;
        min-height: 100dvh !important;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.mmo-lifeskills .main-grid,
    body.mmo-lifeskills .skills-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    body.mmo-lifeskills .skill-card,
    body.mmo-lifeskills .main-category {
        min-height: 0 !important;
        padding: 11px 9px !important;
        gap: 7px;
    }
}