/* v1.0.0-beta.5.7.2 — overlap and clipping pass */

/* The board keeps its depth, but no shadow is allowed to bleed above its frame. */
#board .board-canvas-view{position:relative;isolation:isolate}
#board .board-navigation-bar{
  position:relative!important;z-index:4!important;margin-bottom:10px!important;
  box-shadow:0 8px 18px -16px rgba(0,0,0,.62),inset 0 0 0 1px rgba(255,255,255,.018)!important;
}
#board .board-shell,
#board .board-shell.board-pan-viewport{
  position:relative!important;z-index:2!important;isolation:isolate!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -22px 28px -30px rgba(0,0,0,.72)!important;
}
body:not(.mobile-layout) #board .board-shell.board-pan-viewport{contain:paint!important}
#board .board-shell::before,#board .board-shell::after{pointer-events:none!important}
#board .board-minimap{max-width:calc(100% - 28px)!important}
#board .board-space-tooltip{z-index:24!important}

/* Transient chapter notices must never cover navigation controls. */
.chapter-transition{
  top:auto!important;right:24px!important;bottom:24px!important;
  max-width:min(354px,calc(100vw - 32px))!important;pointer-events:none!important;
}

/* Stable layer order: page < header/menu < modal < exceptional magic overlays. */
.topbar{isolation:isolate}
.modal-backdrop{z-index:900!important}
.modal-backdrop.open,.modal-backdrop[aria-hidden="false"]{isolation:isolate!important}
body:has(.modal-backdrop.open) .entity-peek,
body:has(.modal-backdrop[aria-hidden="false"]) .entity-peek{display:none!important}


/* Record controls keep their own lanes instead of stacking on top of each other. */
.character-card>.qol139-card-menu{left:12px!important;right:auto!important;top:12px!important}
.character-card>.card-favorite{left:54px!important;top:12px!important}
@media(max-width:760px){
  body.mobile-layout .character-card>.qol139-card-menu{left:12px!important;top:12px!important;width:42px!important;height:42px!important}
  body.mobile-layout .character-card>.card-favorite{left:62px!important;top:12px!important;width:42px!important;height:42px!important}
  body.mobile-layout .character-card>.qol139-card-select{left:12px!important;top:60px!important}
}

/* Popovers and tooltips stay inside the viewport. */
.entity-peek,.section-relic-whisper{
  max-width:min(320px,calc(100vw - 24px))!important;
  overflow-wrap:anywhere!important;
}
.toolbar,.command-results,.publication-menu,.qol139-menu{max-width:calc(100vw - 20px)!important}

/* Fixed mobile navigation must not make the final controls unreachable. */
body.mobile-layout{
  scroll-padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 30px)!important;
}
body.mobile-layout main{
  padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 28px)!important;
}
body.mobile-layout footer{
  padding-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 18px)!important;
}
body.mobile-layout .tab-panel:not([hidden]){
  scroll-margin-bottom:calc(var(--mobile-nav-height,66px) + env(safe-area-inset-bottom) + 22px)!important;
}
body.mobile-layout .mobile-bottom-nav,
body.mobile-layout .tabs{
  isolation:isolate!important;overflow-x:auto!important;overflow-y:hidden!important;
}
body.mobile-layout .chapter-transition{display:none!important}

/* Modals always own the foreground on phones. */
body.mobile-layout .modal-backdrop{z-index:900!important}
body.mobile-layout .modal-backdrop>.modal{position:relative!important;z-index:1!important}
body.mobile-layout .modal-head{isolation:isolate!important}
body.mobile-layout .modal-foot{isolation:isolate!important}

/* Decorative layers never block working controls. */
.section-atmosphere,.theme-ornaments,.theme-motion,.theme-flourish,
.frame-side-left,.frame-side-right,.frame-column-left,.frame-column-right,
.ambient,.board-edge-vignette{pointer-events:none!important}

/* Stars remain clickable but cannot sit under fixed UI. */
.beta3-hidden-star{z-index:360!important;touch-action:manipulation!important}
body.mobile-layout .beta3-hidden-star{scroll-margin-block:118px calc(var(--mobile-nav-height,66px) + 118px)!important}

@media(max-width:760px){
  #board .board-shell,#board .board-shell.board-pan-viewport{box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important}
  .entity-peek,.section-relic-whisper{left:12px!important;right:12px!important;width:auto!important;max-width:none!important}
}