/* V1.114 — directly opened codex panels receive the same focus and scroll ownership as the hub. */
html body.game-codex-modal-open:not(.maintenance-mode) :is(
  #characterCodexDialog,
  #professionCodexDialog,
  #opportunityLibraryDialog,
  #artifactLibraryDialog
):not([hidden]) > .rules-box {
  max-height: min(94dvh, 980px);
  overflow: auto;
  overscroll-behavior: contain;
}

html body.game-codex-modal-open:not(.maintenance-mode) :is(
  #closeCharacterCodex,
  #closeProfessionCodex,
  #closeOpportunityLibrary,
  #closeArtifactLibrary
):focus-visible {
  outline: 2px solid #f0cd72 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(234, 193, 85, 0.18), 0 0 20px rgba(235, 190, 71, 0.2) !important;
}

@media (max-width: 720px) {
  html body.game-codex-modal-open:not(.maintenance-mode) :is(
    #characterCodexDialog,
    #professionCodexDialog,
    #opportunityLibraryDialog,
    #artifactLibraryDialog
  ):not([hidden]) > .rules-box {
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.game-codex-modal-open:not(.maintenance-mode) :is(
    #characterCodexDialog,
    #professionCodexDialog,
    #opportunityLibraryDialog,
    #artifactLibraryDialog
  ) > .rules-box {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  html body.game-codex-modal-open:not(.maintenance-mode) :is(
    #closeCharacterCodex,
    #closeProfessionCodex,
    #closeOpportunityLibrary,
    #closeArtifactLibrary
  ):focus-visible {
    border: 2px solid CanvasText !important;
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }
}