/* ============================================================ BOOM WORLD 4.1.7 // MOBILE BAG + SINGLE CHAT TITLE CSS-only stabilization layer. No observers. No DOM moves. No gameplay / DB changes. ============================================================ */ /* ROOT CAUSE OF THE DOUBLE TITLE: boom-world-mobile.css already paints WORLD CHAT with ::before. 4.1.6 also renders the real title inside .ch-hint. Keep the real title and permanently disable the legacy pseudo-title. */ html body.boom-world #world-chat::before, html body.boom-world #world-chat.world-chat::before { content: none !important; display: none !important; } /* One clean title row only. */ html body.boom-world #world-chat > .ch-hint.world416-chat-head { margin-top: 0 !important; padding-top: 0 !important; transform: none !important; } /* ============================================================ MOBILE BAG Do NOT depend on flex layout. Older WORLD styles contain competing display/height rules. The whole sheet is now one scroll surface and the close button is pinned to the viewport. Selectors cover BOTH states: 1) BAG still inside #game-frame for the first frame. 2) BAG has been portaled to by the existing safe bridge. ============================================================ */ @media (max-width: 900px), (pointer: coarse) { html body.boom-world.world412-bag-open { overflow: hidden !important; overscroll-behavior: none !important; } html body.boom-world #game-frame > #bag-panel.show, html body.boom-world #bag-panel.world412-mobile-bag.show { box-sizing: border-box !important; display: block !important; position: fixed !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; margin: 0 !important; padding: max(10px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) calc(86px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)) !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; border-radius: 0 !important; z-index: 100220 !important; transform: none !important; background: radial-gradient(circle at 95% 0%, rgba(83,105,255,.18), transparent 32%), linear-gradient(165deg, rgba(9,28,60,.998), rgba(3,10,26,.998)) !important; } /* The old flex attempt is deliberately neutralized. */ html body.boom-world #bag-panel.world412-mobile-bag.show { flex-direction: initial !important; } html body.boom-world #game-frame > #bag-panel.show .bag-view, html body.boom-world #bag-panel.world412-mobile-bag.show .bag-view { width: 100% !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; flex: none !important; } html body.boom-world #game-frame > #bag-panel.show .bag-view:not(.active), html body.boom-world #bag-panel.world412-mobile-bag.show .bag-view:not(.active) { display: none !important; } html body.boom-world #game-frame > #bag-panel.show .bag-view.active, html body.boom-world #bag-panel.world412-mobile-bag.show .bag-view.active { display: block !important; overflow: visible !important; } /* Keep the important controls visible while the content itself scrolls. */ html body.boom-world #game-frame > #bag-panel.show .economy-head, html body.boom-world #bag-panel.world412-mobile-bag.show .economy-head { position: sticky !important; top: calc(-1 * max(10px, env(safe-area-inset-top, 0px))) !important; z-index: 8 !important; margin: 0 !important; padding: 10px 4px 11px !important; background: rgba(8,24,53,.985) !important; border-bottom: 1px solid rgba(91,229,255,.13) !important; } html body.boom-world #game-frame > #bag-panel.show .bag-tabs, html body.boom-world #bag-panel.world412-mobile-bag.show .bag-tabs { position: sticky !important; top: 58px !important; z-index: 7 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 6px !important; width: 100% !important; margin: 0 0 10px !important; padding: 10px 0 !important; background: rgba(8,24,53,.985) !important; } html body.boom-world #game-frame > #bag-panel.show .bag-tab, html body.boom-world #bag-panel.world412-mobile-bag.show .bag-tab { min-width: 0 !important; min-height: 48px !important; padding: 8px 3px !important; font-size: clamp(.58rem, 2.8vw, .72rem) !important; border-radius: 12px !important; } /* Always-visible close action. It no longer participates in BAG layout, therefore it cannot fall to the end of a long/blank flex area. */ html body.boom-world #game-frame > #bag-panel.show #btn-bag-close, html body.boom-world #bag-panel.world412-mobile-bag.show #btn-bag-close { box-sizing: border-box !important; position: fixed !important; left: max(10px, env(safe-area-inset-left, 0px)) !important; right: max(10px, env(safe-area-inset-right, 0px)) !important; bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important; top: auto !important; width: auto !important; min-height: 54px !important; margin: 0 !important; padding: 12px 16px !important; z-index: 100240 !important; border-radius: 14px !important; box-shadow: 0 -14px 34px rgba(3,10,25,.92), 0 10px 28px rgba(0,0,0,.34) !important; } /* Inventory should finish naturally instead of stretching into a giant empty flex box. */ html body.boom-world #bag-panel.show [data-bag-panel="inventory"] { padding-bottom: 14px !important; } html body.boom-world #bag-panel.show .bag-row { min-height: 58px !important; padding: 12px 8px !important; } /* SHOP remains a normal vertical mobile list inside the one scroll surface. */ html body.boom-world #bag-panel.show #shop-grid, html body.boom-world #bag-panel.show #sell-grid { max-height: none !important; overflow: visible !important; } }