.modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* The game modal wrapper covers the area around the game screen: only the modals themselves catch the mouse */
.game-modal-wrapper {
  pointer-events: none;
}

.game-modal-wrapper .modal {
  pointer-events: auto;
}

/* While the death dialog is open, the frozen game interface behind it ignores the mouse (see DeathModal) */
#game-wrapper.dead {
  pointer-events: none;
}

#game-wrapper.dead #death-modal {
  pointer-events: auto;
}

.modal {
  display: none;
  position: absolute;
  z-index: 30000;
  border: 1px solid black;
  box-shadow: 0px 0px 10px 0px black;
  background-image: url("/png/bg.png?v=552de1a126ee");
}

.modal-header {
  background-image: url("/png/bg2.png?v=5b440427c14f");
  cursor: grab;
  text-align: center;
  padding: 4px;
}

.modal .modal-footer {
  text-align: right;
}

.modal-body {
  box-shadow: inset 0 0 6px black;
  padding: 12px;
}

/* Short centered text of the simple modals (e.g., Confirm, You Are Dead, Change Key) */
.modal-message {
  text-align: center;
}

/* Seconds left before the previous Display Mode comes back (DisplayModeModal) */
.display-mode-countdown {
  margin-top: 6px;
  color: var(--color-text-muted);
}

.modal input {
  color: white;
  border: 1px solid black;
}

/* NPC trade offers modal: same look as the Edit Hotkey modal (see hotbar.css and theme.css) */
/* Nothing in the modal is selectable, so clicking around (or dragging the slider) never highlights text */
#offer-modal {
  width: 380px;
  max-width: 90vw;
  user-select: none;
}

/* Tabs: shared look (ui-tabs, see controls.css), two tabs of the same width */
.offer-tabs {
  margin-bottom: 8px;
}

.offer-tab {
  flex: 1 1 0;
}

/* Item grid: a fixed height (3 rows) so switching tabs never resizes the modal */
.offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, 38px);
  grid-auto-rows: 38px;
  gap: 6px;
  justify-content: start;
  align-content: start;
  height: 126px;
  padding: 8px;
  margin-bottom: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Empty list: italic muted text like the other empty lists (travel, quest log, auto loot) */
.offers-empty {
  grid-column: 1 / -1;
  padding: 12px;
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
}

.offer-slot {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 2px;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 4px;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
  transition: border-color 0.1s, box-shadow 0.1s;
}

.offer-slot:hover {
  border-color: var(--color-accent-text);
}

.offer-slot.selected {
  border-color: var(--color-accent);
  background-color: var(--color-accent-dark);
  background-blend-mode: overlay;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8), 0 0 6px var(--color-accent-glow);
}

/* Selected offer: two rows of fixed height, the amount row keeps its space while hidden */
#offer-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.7);
}

.offer-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.offer-info-row.hidden {
  visibility: hidden;
}

/* The amount row and the furniture package hint share the second row (one of them is shown at most) */
#buy-count-wrapper,
#offer-package {
  grid-row: 2;
  grid-column: 1;
}

#offer-package {
  font-size: 11px;
  line-height: 13px;
  color: var(--color-text-soft);
}

#offer-package .material-icons {
  font-size: 18px;
  color: var(--color-accent);
}

.offer-preview {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid black;
  border-radius: 4px;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Long names wrap to at most two lines (the height of the preview) so the row never grows */
#offer-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 15px;
  overflow-wrap: anywhere;
  font-weight: bold;
}

#offer-name.placeholder {
  font-weight: normal;
  font-style: italic;
  color: var(--color-text-muted);
}

.offer-price-wrapper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 72px;
  padding: 2px 6px;
  white-space: nowrap;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-accent-text);
  font-weight: bold;
}

/* The label takes the width of its text so it never runs into the slider */
.offer-count-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

#buy-count {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

#offer-count {
  flex: 0 0 auto;
  min-width: 28px;
  text-align: right;
  font-weight: bold;
}

/* NPC travel modal (ship captains and other carriers): same look as the trade offers modal (see theme.css) */
/* It has the size of the conversation window (see #npc-dialogue-modal) and opens at its place: switching never jumps */
#travel-modal,
#bank-modal {
  width: 360px;
  max-width: 90vw;
  user-select: none;
}

#travel-modal .modal-body,
#bank-modal .modal-body,
#npc-dialogue-modal .modal-body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 390px;
}

#travel-modal .modal-body > *,
#bank-modal .modal-body > *,
#npc-dialogue-modal .modal-body > * {
  flex: 0 0 auto;
}

.travel-intro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--color-accent-text);
  font-style: italic;
}

.travel-intro-icon {
  font-size: 22px;
  color: var(--color-accent);
  text-shadow: 0 0 4px var(--color-accent-glow);
}

/* Search field: shared text box with a search icon inside (text-field-icon-wrapper, see text-field.css) */
.travel-search-wrapper {
  margin-bottom: 8px;
}

/* Destination list: takes the rest of the fixed height, longer lists scroll (filtering never resizes the modal) */
#travel-modal .travel-destinations {
  flex: 1 1 auto;
  min-height: 0;
}

.travel-destinations {
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* A chosen destination blocks the list until the NPC has answered */
.travel-destinations.pending .travel-destination {
  pointer-events: none;
  opacity: 0.6;
}

.modal button.travel-destination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 7px 8px;
  font-size: 12px;
  text-align: left;
  border: 1px solid black;
  border-radius: 5px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
  transition: border-color 0.1s, box-shadow 0.1s;
}

.modal button.travel-destination:hover {
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

/* Destinations that do not match the search text */
.modal button.travel-destination.hidden,
.travel-empty.hidden {
  display: none;
}

.travel-empty {
  padding: 12px;
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.travel-destination-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--color-accent);
}

.travel-destination-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Price pill: same as the price of the trade offers modal */
.travel-destination-price {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 64px;
  padding: 2px 6px;
  white-space: nowrap;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-accent-text);
}

.travel-destination.unaffordable .travel-destination-price {
  color: var(--color-error);
}

.travel-destination.unaffordable .travel-destination-icon {
  opacity: 0.5;
}

.modal .travel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Gold of the player at the bottom of the trade and travel windows: the carried coins plus the bank balance */
.npc-gold {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: bold;
  color: var(--color-accent-text);
}

/* NPC bank modal: the size of the conversation window (see #travel-modal), it opens at its place when a bank NPC is greeted */

/* The last answer of the NPC, shown whole: a fixed height (three lines), a longer answer scrolls inside it */
.bank-reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 50px;
  margin-bottom: 6px;
  color: var(--color-accent-text);
  font-style: italic;
}

.bank-reply-icon {
  flex: 0 0 auto;
  font-size: 22px;
  color: var(--color-accent);
  text-shadow: 0 0 4px var(--color-accent-glow);
}

#bank-reply-text {
  flex: 1 1 auto;
  max-height: 100%;
  overflow-y: auto;
  line-height: 16px;
}

/* Balance card: static card (see theme.css) with the total and the coin piles */
.bank-balance-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid black;
  border-radius: 6px;
  background-image: var(--gradient-card);
  box-shadow: var(--shadow-raised);
}

.bank-balance-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.bank-balance-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: bold;
  color: var(--color-accent-text);
  text-shadow: 0 0 6px var(--color-accent-glow);
}

.bank-coins {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 2px;
}

.bank-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Coin pile: a slot like the trade offers (see .offer-slot) */
.bank-coin-sprite {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 2px;
  border: 1px solid black;
  border-radius: 4px;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8);
}

.bank-coin-count {
  font-size: 11px;
  font-weight: bold;
  color: var(--color-text-soft);
}

/* Coins the balance does not have */
.bank-coin.empty .bank-coin-sprite {
  opacity: 0.3;
}

.bank-coin.empty .bank-coin-count {
  color: var(--color-text-dim);
}

/* Deposit and Withdraw: two raised buttons of the same width, the chosen one has the accent look */
.bank-modes {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.modal button.ui-button.bank-mode {
  flex: 1 1 0;
  margin: 0;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: bold;
}

.modal button.ui-button.bank-mode.selected {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

/* Amount panel: takes the rest of the fixed height, the hint and the amount use the same space */
.bank-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

#bank-modal .bank-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.bank-hint {
  margin: auto;
  font-style: italic;
  color: var(--color-text-muted);
}

.bank-hint.hidden,
.bank-amount.hidden {
  display: none;
}

.bank-amount {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bank-amount-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bank-amount-wrapper {
  flex: 1 1 auto;
  min-width: 0;
}

.modal button.ui-button.bank-submit {
  flex: 0 0 auto;
  min-width: 96px;
  margin: 0;
  white-space: nowrap;
}

.bank-presets {
  display: flex;
  gap: 4px;
}

.modal button.ui-button.bank-preset {
  flex: 1 1 0;
  margin: 0;
  padding: 4px 2px;
}

/* The gold the chosen action can move: one line of fixed height, the error replaces it when the amount is too high */
.bank-available {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 16px;
  font-size: 11px;
  color: var(--color-text-muted);
}

#bank-available {
  font-weight: bold;
  color: var(--color-accent-text);
}

.bank-error {
  color: var(--color-error);
}

.bank-available:not(.error) .bank-error,
.bank-available.error > :not(.bank-error) {
  display: none;
}

/* A sent amount blocks the window until the NPC has answered */
#bank-modal.pending .bank-modes,
#bank-modal.pending .bank-panel {
  pointer-events: none;
  opacity: 0.6;
}

/* NPC conversation modal: the reply of the NPC and the words the player can say, same look as the travel modal (see theme.css) */
#npc-dialogue-modal {
  width: 360px;
  max-width: 90vw;
  user-select: none;
}

/* The window never changes size: the reply card and the options panel have fixed heights and scroll inside */

/* Long NPC names are cut on one line (the padding keeps them clear of the Back chevron and the close cross) */
#npc-dialogue-modal .modal-header,
#travel-modal .modal-header,
#offer-modal .modal-header {
  padding-left: 28px;
  padding-right: 28px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A tab per NPC (shared ui-tabs, see controls.css): inside the fixed height, so the window keeps its size when they
   appear; many NPCs scroll the bar */
.npc-dialogue-tabs {
  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.npc-dialogue-tabs.hidden {
  display: none;
}

.npc-dialogue-tab {
  position: relative;
  flex: 0 0 auto;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* An answer in a tab that is not shown: an accent dot until the tab is opened */
.npc-dialogue-tab.unread::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  box-shadow: 0 0 4px var(--color-accent-glow);
}

/* The last reply of the NPC on a static card: four lines, longer replies scroll */
.npc-dialogue-reply {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 82px;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid black;
  border-radius: 6px;
  background-image: var(--gradient-card);
  box-shadow: var(--shadow-raised);
}

.npc-dialogue-reply-icon {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--color-accent);
  text-shadow: 0 0 4px var(--color-accent-glow);
}

.npc-dialogue-reply-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 16px;
  overflow-wrap: anywhere;
}

/* No reply (e.g., after Back): the invitation to choose a topic */
.npc-dialogue-reply-text.empty {
  font-style: italic;
  color: var(--color-text-muted);
}

/* {Highlighted} words of the reply are clicked like the options */
.npc-dialogue-keyword {
  cursor: pointer;
  color: var(--color-accent);
  text-decoration: underline dotted;
}

.npc-dialogue-keyword:hover {
  color: var(--color-accent-text);
}

/* Options: rows of rounded buttons that wrap */
.npc-dialogue-options {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
}

/* All the options in one darker panel that takes the rest of the fixed height: the suggestions on top, then the
   topics; long lists scroll */
#npc-dialogue-modal .npc-dialogue-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.npc-dialogue-panel {
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* Search field: shared text box with a search icon inside (text-field-icon-wrapper, see text-field.css) */
.npc-dialogue-search-wrapper {
  margin-bottom: 8px;
}

/* Sections, options and the empty text hidden by the search */
.npc-dialogue-suggestions.hidden,
#npc-dialogue-topics-section.hidden,
.modal button.npc-dialogue-option.hidden,
.npc-dialogue-empty.hidden {
  display: none;
}

/* No word matches the search text: italic muted text like the other empty lists */
.npc-dialogue-empty {
  padding: 12px;
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* The topics below the suggestions, separated by a thin line */
.npc-dialogue-suggestions:not(.hidden) + #npc-dialogue-topics-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.6);
}

.npc-dialogue-section-title {
  margin-bottom: 6px;
  font-weight: bold;
  color: var(--color-accent-text);
}

.modal button.npc-dialogue-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  padding: 4px 10px;
  font-size: 12px;
  overflow-wrap: anywhere;
  border: 1px solid black;
  border-radius: 12px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
  transition: border-color 0.1s, box-shadow 0.1s;
}

/* The words the reply points to, the answers of a question and the windows of the NPC (trade, travel) */
.modal button.npc-dialogue-option.suggestion,
.modal button.npc-dialogue-option.service {
  color: var(--color-accent-text);
  border-color: var(--color-accent-dark);
}

.modal button.npc-dialogue-option.farewell {
  color: var(--color-text-soft);
}

/* Topics already asked in this conversation: greyed out, the hover shows them clearly again */
.modal button.npc-dialogue-option.asked {
  color: var(--color-text-dim);
  border-color: black;
  opacity: 0.6;
}

.modal button.npc-dialogue-option.asked .npc-dialogue-option-icon {
  color: var(--color-text-dim);
}

.modal button.npc-dialogue-option.asked:hover {
  opacity: 1;
}

/* Options act at once: the accent look on hover (after the variants, which have the same specificity) */
.modal button.npc-dialogue-option:hover {
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

.npc-dialogue-option-icon {
  font-size: 15px;
  color: var(--color-accent);
}

/* Key cap with the number of the keys 1 - 9 (see NPCDialogueModal.__applyShortcuts) */
.npc-dialogue-key {
  flex: 0 0 auto;
  min-width: 14px;
  padding: 0 2px;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: var(--color-text-muted);
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal button.npc-dialogue-option:hover .npc-dialogue-key {
  color: var(--color-accent-text);
}

.npc-dialogue-option.farewell .npc-dialogue-option-icon {
  color: var(--color-text-soft);
}

/* A clicked option blocks the window until the NPC has answered */
#npc-dialogue-modal.pending .npc-dialogue-option,
#npc-dialogue-modal.pending .npc-dialogue-keyword,
#npc-dialogue-modal.pending #npc-dialogue-back {
  pointer-events: none;
  opacity: 0.6;
}

/* Oracle modal (town and vocation of new players): same look as the travel modal (see theme.css) */
#oracle-modal {
  width: 440px;
  max-width: 90vw;
  user-select: none;
}

.oracle-intro {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--color-accent-text);
  font-style: italic;
}

.oracle-intro-icon {
  font-size: 22px;
  color: var(--color-accent);
  text-shadow: 0 0 4px var(--color-accent-glow);
}

.oracle-intro b {
  font-style: normal;
  color: var(--color-accent);
}

/* Only one step (vocation or town) and its footer buttons are shown at a time */
.oracle-step.hidden,
#oracle-modal .modal-footer button.hidden {
  display: none;
}

.oracle-section-title {
  margin-bottom: 4px;
  font-weight: bold;
  color: var(--color-accent-text);
}

/* Cards in a darker panel: three towns in a row, vocations in two columns */
.oracle-choices {
  display: grid;
  gap: 6px;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

.oracle-towns {
  grid-template-columns: repeat(3, 1fr);
}

.oracle-vocations {
  grid-template-columns: repeat(2, 1fr);
}

.modal button.oracle-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 8px 6px;
  font-size: 12px;
  border: 1px solid black;
  border-radius: 5px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
  transition: border-color 0.1s, box-shadow 0.1s;
}

.modal button.oracle-choice:not(.selected):hover {
  border-color: var(--color-accent-text);
  background-image: var(--gradient-surface-hover);
}

.modal button.oracle-choice.selected {
  border-color: var(--color-accent);
  background-image: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

.oracle-choice-icon {
  font-size: 24px;
  color: var(--color-accent);
}

.oracle-choice-name {
  font-size: 12px;
}

.oracle-choice-description {
  font-size: 10px;
  font-weight: normal;
  line-height: 13px;
  color: var(--color-text-soft);
  text-align: center;
  overflow-wrap: anywhere;
}

/* Summary of the choice: fixed height so selecting never resizes (and moves) the modal */
.oracle-summary {
  min-height: 32px;
  line-height: 16px;
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted);
}

.oracle-summary.complete {
  font-style: normal;
  color: white;
}

.oracle-summary b {
  color: var(--color-accent-text);
}

.oracle-warning {
  font-weight: bold;
  color: var(--color-warning);
}

/* A confirmed choice blocks the window until the NPC has answered */
#oracle-modal.pending .oracle-choice,
#oracle-modal.pending #oracle-confirm,
#oracle-modal.pending #oracle-back {
  pointer-events: none;
  opacity: 0.6;
}

/* Book text: its own parchment look instead of the shared text-field box (see text-field.css), with the same rounded
   corners, placeholder and focus border */
.book-text-wrapper {
  position: relative;
}

/* Transparent pane above the text: disabled text areas do not register mouseup events */
.book-text-pane {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#book-text-area {
  height: 220px;
  resize: none;
  scrollbar-width: thin;
  background-image: url("/png/bg2.png?v=5b440427c14f");
  color: white;
  font-weight: bold;
  padding: 12px;
  /* Room for the clear button in the top right corner (see text-field.css) */
  padding-right: 28px;
  font-size: 12px;
  font-family: Verdana;
  line-height: 1.4;
  box-shadow: inset 0 0 8px black;
  border: 1px solid black;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#book-text-area::placeholder {
  color: var(--color-text-muted);
  font-weight: normal;
}

#book-text-area:disabled {
  color: var(--color-text-soft);
}

#book-text-area:focus {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 8px black, 0 0 4px var(--color-accent-glow);
}

.map-modal-wrapper {
  position: relative;
}

#map-modal-canvas {
  background-color: black;
}

.map-modal-wrapper span {
  position: absolute;
  left: 4px;
  top: 4px;
}

.map-modal-wrapper .vline {
  pointer-events: none;
  border-bottom: 1px solid white;
  width: 256px;
  top: 128px;
  position: absolute;
}

.map-modal-wrapper .hline {
  pointer-events: none;
  border-right: 1px solid white;
  left: 128px;
  position: absolute;
  height: 256px;
}

/* Zoom in and out buttons in the top right corner of the map (see MapModal) */
.map-modal-zoom {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-modal-zoom button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  font-size: 18px;
  color: white;
  border: 1px solid black;
  border-radius: 4px;
  background-image: var(--gradient-surface);
  box-shadow: var(--shadow-raised);
}

.map-modal-zoom button:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Spellbook: the same list as the spells of the Edit Hotkey modal (rows styled by .hotbar-spell, see hotbar.css) */
#spellbook-list {
  width: 400px;
  max-width: 100%;
  max-height: 300px;
  margin-top: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  border: 1px solid black;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
}

/* The prototype row cloned for every spell (see SpellbookModal) */
#spellbook-wrapper-prototype {
  display: none;
}