/* ============================================================
   BOOM WORLD 4.1.8 // BAG + LIVING OVERLAY POLISH
   Minimal stabilization layer. No observers, no timers, no DB/gameplay changes.
   ============================================================ */

/* ------------------------------------------------------------
   MOBILE BAG
   4.1.7 pinned STÄNG BAG to the viewport, which made it float over
   inventory rows while the BAG scrolled. Return it to normal document
   flow so it lives at the TRUE end of the active BAG view.
   ------------------------------------------------------------ */
@media (max-width: 900px), (pointer: coarse) {
  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 {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    min-height: 54px !important;
    margin: 16px 0 4px !important;
    padding: 12px 16px !important;
    z-index: auto !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.28) !important;
  }

  /* The BAG sheet no longer needs a fake 86px bottom reserve for a floating
     close button. Keep a small safe-area pad only. */
  html body.boom-world #game-frame > #bag-panel.show,
  html body.boom-world #bag-panel.world412-mobile-bag.show {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Compact always-available X inside the sticky BAG header. This clicks the
     existing safe close button, so no new BAG runtime is introduced. */
  html body.boom-world #bag-panel .economy-head {
    position: sticky !important;
  }

  html body.boom-world #btn-bag-close-top {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: 9px !important;
    right: 5px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,115,142,.34) !important;
    border-radius: 50% !important;
    background: rgba(78,28,54,.90) !important;
    color: #ff9aae !important;
    font: 900 1.15rem/1 system-ui,sans-serif !important;
    cursor: pointer !important;
    z-index: 12 !important;
  }

  html body.boom-world #bag-panel .economy-head h3 {
    padding-right: 44px !important;
  }
}

/* Desktop does not need the extra mobile BAG X. */
@media (min-width: 901px) and (pointer: fine) {
  html body.boom-world #btn-bag-close-top {
    display: none !important;
  }
}

/* ------------------------------------------------------------
   LIVING WORLD interaction prompt
   "Elin · TALK · Bell Keeper" must not sit on top of BAG/chat/trade/etc.
   WORLD already maintains world-layer-open for major sheets.
   ------------------------------------------------------------ */
html body.boom-world.world-layer-open #boom-mmo6-live,
html body.boom-world.world412-bag-open #boom-mmo6-live,
html body.boom-world.world411-menu-open #boom-mmo6-live,
html body.boom-world.world-chat-mobile-open #boom-mmo6-live {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------
   MMORPG dashboard / THE WORLD REMEMBERS
   Give the standalone dashboard a real close/back control to WORLD.
   ------------------------------------------------------------ */
#boom-mmorpg-close-world {
  box-sizing: border-box;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 120000;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(101,233,255,.42);
  border-radius: 15px;
  background: rgba(6,17,39,.94);
  box-shadow: 0 16px 42px rgba(0,0,0,.42), 0 0 22px rgba(80,226,255,.12);
  color: #78edff;
  text-decoration: none;
  font: 900 24px/1 system-ui,sans-serif;
  backdrop-filter: blur(12px);
}

#boom-mmorpg-close-world:hover,
#boom-mmorpg-close-world:focus-visible {
  background: rgba(17,42,75,.98);
  color: #fff;
  outline: none;
}

@media (max-width: 700px) {
  #boom-mmorpg-close-world {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 21px;
  }
}