/* NPC Conversation Dialog - floating popup for keyword choices (npc-dialog.js). Its look is the Hub's skin
   (hub-skin.css, "NPC conversation"; owner 2026-09-30): a header strip with the NPC's face and name and the window
   buttons (.modal-chrome: the see-through eye, the X), the lines in a well, the keywords as buttons. It stays in the
   middle of the screen (owner: "No positioning should stay same"). */
#npc-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 29998;
  background-image: url("/png/bg.png");
  border: 1px solid black;
  box-shadow: 0px 0px 10px 0px black;
  padding: 6px;
  min-width: 230px;
  max-width: min(340px, 90vw);
  text-align: center;
}

/* the header strip spans the window (the negative margin undoes its padding), with room on the right for the eye
   and the X; 40px tall, so the 24px buttons sit 8px from the top (34px touch buttons: 3px, new.css) */
#npc-dialog-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px -6px 6px;
  padding: 4px 62px 4px 6px;
  background-image: url("/png/bg2.png");
}

#npc-dialog > .modal-chrome { top: 8px; }

#npc-dialog-face {
  flex: none;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

#npc-dialog-header {
  min-width: 0;
  font-weight: bold;
  font-size: 13px;
  line-height: 32px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#npc-dialog-message {
  padding: 7px 9px;
  margin-bottom: 7px;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  max-height: 140px;
  overflow-y: auto;
}

#npc-dialog-message .npc-dialog-line + .npc-dialog-line {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#npc-dialog-message .npc-keyword {
  font-weight: bold;
}

#npc-dialog-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

#npc-dialog-buttons button {
  min-width: 64px;
  padding: 6px 14px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
}

/* (media com npc-dialog) */
@media (pointer: coarse) {
  #npc-dialog-head { padding-right: 80px; }
  #npc-dialog > .modal-chrome { top: 3px; }
  #npc-dialog-buttons button { min-height: 34px; }
}

/* (media com npc-dialog) */
/* Desktop: larger type and a wider window beside a large game view (11px read tiny on a 1080p screen) */
@media (pointer: fine) and (min-width: 1024px) {
  #npc-dialog { min-width: 280px; max-width: 420px; }
  #npc-dialog-header { font-size: 14px; }
  #npc-dialog-message { font-size: 13px; max-height: 180px; }
  #npc-dialog-buttons button { padding: 7px 16px; font-size: 13px; }
}
/* ── Hub skin (2026-09-29) ────────────────────────────────────────────────
 * The look of the Hub (modal.css, "Hub") carried into every window the Hub
 * opens: the modal element carries .hub-skin (client/index.html). Owner
 * 2026-09-29, after the Hub redesign: "Do all" (every sub-window).
 *
 * Rules of this file:
 * - Visual only: colours, borders, radii, surfaces, type. No width, height,
 *   display or position changes, so each window keeps its own layout, its
 *   mobile rules (modal.css, mobile.css, achievementlog.css) and every id and
 *   class its controller binds.
 * - Loaded LAST (index.html stylesheet list) and every selector starts at
 *   .modal.hub-skin, so it wins over the per-window rules it restyles. Ids that
 *   the base CSS styles by id (#settings-modal, #settings-logout-button) are
 *   named here too, because a class selector cannot outrank an id.
 * - Surfaces come from --hs-surface*, which see-through mode swaps for
 *   translucent fills, so the eye in the header keeps showing the world.
 */

.modal.hub-skin,
#npc-dialog,
#trade-window {
  --hs-gold: #e5c46a;
  --hs-gold-soft: #e2c470;
  --hs-gold-line: rgba(255, 255, 255, 0.16);
  --hs-text: #efe9da;
  --hs-text-2: #cfc8b8;
  --hs-muted: #a39d90;
  --hs-edge: rgba(0, 0, 0, 0.8);
  --hs-hover-edge: rgba(229, 196, 106, 0.75);
  --hs-active-edge: #e5c46a;
  /* Fills are neutral: gold only as edges, text and symbols, where it stays
   * bright (owner 2026-09-29: a thin gold wash over grey read as brown). */
  --hs-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.26));
  --hs-sheen-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(0, 0, 0, 0.16));
  --hs-sheen-active: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.12));
  --hs-surface: url("/png/bg3.png");
  --hs-surface-hover: url("/png/bg2.png");
  --hs-well: rgba(0, 0, 0, 0.32);
  --hs-sticky: #1c1c1c;
  --hs-good: #8fd67f;
  --hs-bad: #ec8f7c;
}

body.games-seethrough-active .modal.hub-skin,
#npc-dialog.see-through {
  --hs-surface: rgba(14, 11, 8, 0.46);
  --hs-surface-hover: rgba(14, 11, 8, 0.56);
  --hs-well: rgba(0, 0, 0, 0.24);
  --hs-sticky: rgba(20, 20, 20, 0.9);
}

/* ── NPC conversation (#npc-dialog) ───────────────────────────────────────
 * Owner 2026-09-30, with the NPC trade and shop upgrade (layout: modal.css,
 * "NPC Conversation Dialog"). Not a .modal, so it names itself; the tokens
 * are its own too (top of this file). The face in a small well, the lines in
 * a well, gold keywords and keyword buttons as the Hub's buttons with gold
 * text. See-through (npc-dialog.js, the eye; the Hub's shared preference):
 * the frame and the header strip turn translucent as a see-through window's
 * do (modal.css, "See-through"). */
#npc-dialog { color: var(--hs-text); }

#npc-dialog-face {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.25) 70%);
}

#npc-dialog-header { color: var(--hs-text); text-shadow: 0 1px 0 #000; }

#npc-dialog-message {
  background: var(--hs-well);
  border: 1px solid rgba(0, 0, 0, 0.75);
  border-radius: 6px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55);
  color: var(--hs-text-2);
  text-shadow: 0 1px 0 #000;
  scrollbar-width: thin;
  scrollbar-color: #6c6c6c rgba(0, 0, 0, 0.25);
}

#npc-dialog-message .npc-keyword { color: var(--hs-gold); }

#npc-dialog-buttons button {
  border: 1px solid var(--hs-edge);
  border-radius: 5px;
  background: var(--hs-sheen), var(--hs-surface);
  color: var(--hs-gold);
  text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 1px rgba(0, 0, 0, 0.35);
}

#npc-dialog-buttons button:hover {
  border-color: var(--hs-hover-edge);
  color: #fff3d2;
  background: var(--hs-sheen-hover), var(--hs-surface-hover);
}

#npc-dialog-buttons button:focus-visible { outline: 2px solid #e0a030; outline-offset: 1px; }

#npc-dialog.see-through {
  background-image: none;
  background-color: rgba(24, 19, 12, 0.6);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

#npc-dialog.see-through #npc-dialog-head {
  background-image: none;
  background-color: rgba(40, 32, 20, 0.72);
}

/* ---- TibiaOT: some NPCs configure dozens of keywords; the list scrolls instead of growing the window ---- */
#npc-dialog-buttons {
  max-height: 132px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* hidden until npc-dialog.js shows it (the Minibia markup carries it inline) */
#npc-dialog { display: none; }