/* ============================================================
   BOOM WORLD 4.1.2 // MOBILE BAG + CHAT POLISH
   UI-only layer. No gameplay / DB / Society / MMORPG changes.
   ============================================================ */

/* WORLD CHAT: remove the old explanatory sentence everywhere. */
body.boom-world #world-chat .ch-hint {
  min-height: 34px !important;
  margin: 0 48px 10px 0 !important;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #60ecff !important;
  opacity: 1 !important;
  font-family: Orbitron, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
  line-height: 1.15 !important;
}

body.boom-world #world-chat .ch-hint .world412-chat-title {
  white-space: nowrap;
}

body.boom-world #world-chat .ch-hint #wchat-auth {
  color: #ffd95b !important;
  opacity: .9 !important;
  font-family: Rajdhani, sans-serif !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 901px) and (pointer: fine) {
  body.boom-world #world-chat.world-chat {
    height: clamp(430px, 44vh, 510px) !important;
    min-height: 430px !important;
    max-height: 510px !important;
  }
}

/* ============================================================
   MOBILE BOOM BAG / SHOP
   The bag becomes a real full-screen mobile sheet instead of
   being trapped inside the map frame.
   ============================================================ */
@media (max-width: 900px), (pointer: coarse) {
  body.boom-world.world412-bag-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.boom-world.world412-bag-open .world-command,
  body.boom-world.world412-bag-open .bn-launch,
  body.boom-world.world412-bag-open .boom-mobile-real-menu,
  body.boom-world.world412-bag-open #world411-ball-menu,
  body.boom-world.world412-bag-open #world411-menu-shade,
  body.boom-world.world412-bag-open #boom-society-toggle,
  body.boom-world.world412-bag-open #boom-mmo6-journal > .m6btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag {
    box-sizing: border-box !important;
    position: fixed !important;
    inset:
      max(8px, env(safe-area-inset-top, 0px))
      max(8px, env(safe-area-inset-right, 0px))
      max(8px, env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px)) !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    z-index: 100220 !important;
    overflow: hidden !important;
    border: 1px solid rgba(78, 225, 255, .44) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 95% 0%, rgba(83, 105, 255, .20), transparent 31%),
      linear-gradient(165deg, rgba(9, 28, 60, .995), rgba(3, 10, 26, .997)) !important;
    box-shadow:
      0 28px 80px rgba(0,0,0,.80),
      0 0 0 1px rgba(255,213,74,.10),
      inset 0 1px rgba(255,255,255,.045) !important;
    backdrop-filter: blur(18px) !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag.show {
    display: flex !important;
    flex-direction: column !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .economy-head {
    flex: 0 0 auto !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 2px 2px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(100, 230, 255, .12) !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .economy-head h3 {
    margin: 0 !important;
    font-size: .94rem !important;
    letter-spacing: .085em !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .coin-balance {
    flex: 0 0 auto !important;
    font-size: .82rem !important;
    white-space: nowrap !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-tabs {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 10px 0 !important;
    padding: 0 !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-tab {
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 7px 2px !important;
    border-radius: 12px !important;
    font-size: clamp(.56rem, 2.65vw, .72rem) !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-view {
    display: none !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 2px 3px 10px 1px !important;
    scrollbar-width: thin;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-view.active {
    display: block !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-row {
    min-height: 48px !important;
    padding: 9px 7px !important;
    font-size: .94rem !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #btn-bag-close {
    position: relative !important;
    bottom: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 50px !important;
    margin: 9px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 13px !important;
    box-shadow: 0 -10px 28px rgba(3,10,25,.75) !important;
    font-family: Orbitron, sans-serif !important;
    font-size: .76rem !important;
    letter-spacing: .055em !important;
  }

  /* SHOP gets its own compact mobile layout. */
  body.boom-world #bag-panel.world412-mobile-bag #shop-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 9px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 1px 12px !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-shop-head {
    min-height: 48px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    border-radius: 12px !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-shop-head strong {
    font-size: .72rem !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-shop-head span {
    font-size: .63rem !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-shop-cats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 2px 0 6px !important;
    overflow: visible !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-shop-cats button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 6px 4px !important;
    font-size: .61rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .economy-card.shop-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0,1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 10px !important;
    row-gap: 7px !important;
    border-radius: 12px !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .shop-card .shop-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    font-size: 1.45rem !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .shop-card b {
    font-size: .80rem !important;
    line-height: 1.18 !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .shop-card small,
  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-shop-desc {
    font-size: .67rem !important;
    line-height: 1.28 !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .shop-card > button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: .70rem !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-effects {
    gap: 5px !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag #shop-grid .boom-effect-chip {
    padding: 6px 7px !important;
    font-size: .60rem !important;
  }

  /* Chat on mobile: clean title and room for the close button. */
  body.boom-world #world-chat.chat-open .ch-hint,
  body.boom-world #world-chat.mobile-open .ch-hint {
    margin: 0 50px 8px 0 !important;
    min-height: 32px !important;
    padding-left: 1px !important;
  }

  body.boom-world #world-chat.chat-open .ch-hint .world412-chat-title,
  body.boom-world #world-chat.mobile-open .ch-hint .world412-chat-title {
    font-size: .69rem !important;
  }

  body.boom-world #world-chat.chat-open .ch-hint #wchat-auth,
  body.boom-world #world-chat.mobile-open .ch-hint #wchat-auth {
    font-size: .72rem !important;
  }
}

@media (max-width: 430px) {
  body.boom-world #bag-panel.world412-mobile-bag {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-tabs {
    gap: 5px !important;
  }

  body.boom-world #bag-panel.world412-mobile-bag .bag-tab {
    min-height: 43px !important;
    font-size: .57rem !important;
  }
}