/* REMSCAPE expansion interfaces: dialogue, quest journal, character panel.

   Every interactive target in here is at least 48px tall and full width, body
   text is never smaller than 0.92rem, and nothing depends on hover to be
   discoverable. This is the file to read before changing any control size. */

/* ------------------------------------------------------------- HUD fit
   The expansion adds three things to the right of the HUD: a level chip, a
   Character button and a Quests button. The original layout gave .hud-mid
   `flex: 1; min-width: 0` while .hud-right grew unbounded, so the extra
   controls squeezed the room title down to one word per line. Let the right
   cluster wrap within itself and hold a floor under the title instead. */
   Measured at 1280px the bar came to exactly 1280px and wrapped by one item,
   so the gap is tightened and the title floor lowered to buy the row back. */
.hud-mid { min-width: 180px; }
#hud .hud-right { flex-wrap: wrap; justify-content: flex-end; gap: 8px; row-gap: 6px; min-width: 0; }
#hud #objective { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .hud-mid { min-width: 120px; }
  #hud .hud-right { gap: 6px; }
  #hud .btn { padding-inline: 11px; }
}

/* ---------------------------------------------------------- sheet panels
   A growable list panel. The middle scrolls; the header and the Close button
   never move, so the way out is always on screen however long the list is. */
.modal-card.modal-wide:has(.remscape-sheet) {
  background: #efe3c6;
  border-color: rgba(100, 73, 37, 0.45);
  padding: 0;
  overflow: hidden;
  display: flex;
}
.remscape-sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-height: 88vh;
  color: #493821;
}
.remscape-sheet-header { padding: 18px 20px 10px; border-bottom: 1px solid rgba(100, 73, 37, 0.22); }
.remscape-sheet-header .modal-title { margin: 0; color: #3a2a16; }
.remscape-sheet-kicker {
  margin: 0 0 4px; color: #7a5a32; font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.remscape-sheet-subtitle { margin: 6px 0 0; min-height: 1.3em; color: #6a5136; font-size: 0.9rem; }
.remscape-sheet-body { overflow-y: auto; padding: 14px 20px; }
.remscape-sheet-footer {
  padding: 12px 20px 16px; border-top: 1px solid rgba(100, 73, 37, 0.22);
  background: rgba(239, 227, 198, 0.96);
}
.remscape-sheet-close { width: 100%; min-height: 52px; }
.remscape-inventory-group {
  margin: 14px 0 8px; font: 700 0.82rem/1.2 "Segoe UI", sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: #7a5a32;
}
.remscape-inventory-group:first-child { margin-top: 0; }

/* ------------------------------------------------------------- dialogue */
.remscape-dialogue { color: #493821; display: flex; flex-direction: column; }
.remscape-dialogue-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  align-items: center; margin-bottom: 12px;
}
.remscape-dialogue-head:not(:has(.remscape-dialogue-portrait)) { grid-template-columns: minmax(0, 1fr); }
.remscape-dialogue-portrait {
  width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(100, 73, 37, 0.34);
  background: rgba(255, 248, 224, 0.42) center/contain no-repeat;
  display: grid; place-items: center;
}
.remscape-dialogue-portrait canvas {
  width: 100%; height: 100%; image-rendering: pixelated;
}
.remscape-dialogue-titles { min-width: 0; }
.remscape-dialogue-titles .modal-title { margin: 0 0 3px; color: #3a2a16; }
.remscape-dialogue-role {
  margin: 0; color: #7a5a32; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.remscape-dialogue-body {
  margin: 0 0 10px; padding: 14px 16px; border-radius: 10px;
  background: rgba(255, 248, 224, 0.38);
  border-left: 3px solid rgba(224, 173, 93, 0.7);
  color: #46341d; font: 1rem/1.55 var(--serif);
  min-height: 4.6em;
}
.remscape-dialogue-pages {
  margin: 0 0 8px; min-height: 1.1em;
  color: #8a6b41; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
}
.remscape-dialogue-actions { display: grid; gap: 9px; }
.remscape-dialogue-button {
  width: 100%; min-height: 50px; padding: 9px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.remscape-dialogue-button-label { font-size: 1rem; font-weight: 700; line-height: 1.2; }
.remscape-dialogue-button-hint { font-size: 0.78rem; opacity: 0.82; line-height: 1.2; }
.remscape-dialogue-button.is-disabled { opacity: 0.55; cursor: not-allowed; }

/* --------------------------------------------------------- quest journal */
.remscape-journal { color: #493821; }
.remscape-journal .modal-title { margin: 0 0 4px; color: #3a2a16; }
.remscape-journal-kicker {
  margin: 0 0 12px; color: #7a5a32; font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.remscape-journal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.remscape-journal-filter { min-height: 44px; padding: 8px 16px; }
.remscape-journal-filter[aria-pressed="true"] {
  background: rgba(224, 173, 93, 0.9); color: #2b2013; border-color: rgba(140, 100, 40, 0.7);
}
.remscape-journal-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; }
.remscape-journal-list { display: grid; gap: 8px; align-content: start; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.remscape-journal-entry {
  width: 100%; min-height: 56px; padding: 10px 12px; text-align: left;
  display: grid; gap: 3px; border-radius: 10px;
  border: 1px solid rgba(100, 73, 37, 0.28); background: rgba(255, 248, 224, 0.3);
}
.remscape-journal-entry[aria-pressed="true"] {
  border-color: rgba(190, 140, 60, 0.85); background: rgba(255, 240, 200, 0.72);
}
.remscape-journal-entry-title { font: 700 0.98rem/1.25 var(--serif); color: #3a2a16; }
.remscape-journal-entry-meta { font-size: 0.76rem; font-weight: 700; color: #7a5a32; letter-spacing: 0.03em; }
.remscape-journal-entry.is-complete .remscape-journal-entry-meta { color: #4f7a3c; }
.remscape-journal-details {
  padding: 14px; border-radius: 10px; min-height: 200px;
  border: 1px solid rgba(100, 73, 37, 0.28); background: rgba(255, 248, 224, 0.34);
}
.remscape-journal-details h4 { margin: 0 0 6px; font: 700 1.1rem/1.25 var(--serif); color: #3a2a16; }
.remscape-journal-details p { margin: 0 0 9px; font-size: 0.92rem; line-height: 1.5; color: #55412a; }
.remscape-journal-objective {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 240, 200, 0.7); border-left: 3px solid rgba(224, 173, 93, 0.85);
  font-weight: 700; color: #46341d;
}
.remscape-journal-meta { display: grid; gap: 4px; margin: 0 0 10px; font-size: 0.82rem; color: #7a5a32; }
.remscape-journal-meta strong { color: #5f4b32; }
.remscape-journal-rewards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.remscape-journal-reward {
  padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  background: rgba(224, 173, 93, 0.28); color: #6b4d1d;
}
.remscape-journal-track { width: 100%; min-height: 48px; }
/* The base theme's disabled style is a dark slate that reads as unreadable on
   parchment. A tracked quest is a confirmed state, not a dead control. */
.remscape-journal-track:disabled,
.remscape-journal-track[disabled] {
  background: rgba(224, 173, 93, 0.32);
  border-color: rgba(140, 100, 40, 0.5);
  color: #6b4d1d;
  opacity: 1;
}
.remscape-journal-empty { padding: 18px; text-align: center; color: #6a5136; }
.remscape-journal-close { width: 100%; min-height: 50px; margin-top: 14px; }

/* Tracked-quest HUD strip. */
.remscape-tracker {
  position: fixed; left: 12px; bottom: 12px; z-index: 60; max-width: min(320px, 46vw);
  padding: 9px 12px; border-radius: 10px; pointer-events: none;
  background: rgba(10, 12, 16, 0.82); border: 1px solid rgba(224, 173, 93, 0.4);
  color: #f1e4c7; font: 700 0.86rem/1.35 "Segoe UI", sans-serif;
}
.remscape-tracker[hidden] { display: none; }
.remscape-tracker strong { display: block; color: #f0c46a; font-size: 0.92rem; }
.remscape-tracker span { display: block; font-weight: 400; opacity: 0.92; }

/* ------------------------------------------------------- character panel */
.remscape-character { color: #493821; }
.remscape-character .modal-title { margin: 0 0 10px; color: #3a2a16; }
.remscape-character-level { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.remscape-character-level strong { font: 700 1.5rem/1 var(--serif); color: #3a2a16; }
.remscape-character-level span { color: #7a5a32; font-weight: 700; font-size: 0.86rem; }
.remscape-xp-bar {
  height: 14px; border-radius: 999px; overflow: hidden; margin-bottom: 4px;
  background: rgba(100, 73, 37, 0.22); border: 1px solid rgba(100, 73, 37, 0.3);
}
.remscape-xp-fill { height: 100%; background: linear-gradient(90deg, #d9a24b, #f0c46a); }
.remscape-xp-note { margin: 0 0 14px; font-size: 0.82rem; color: #7a5a32; font-weight: 700; }
.remscape-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.remscape-stat {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(100, 73, 37, 0.26); background: rgba(255, 248, 224, 0.32);
}
.remscape-stat-label { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7a5a32; }
.remscape-stat-value { display: block; font: 700 1.15rem/1.2 var(--serif); color: #3a2a16; }
.remscape-stat-bonus { font-size: 0.78rem; color: #4f7a3c; font-weight: 700; }
.remscape-slot-list { display: grid; gap: 7px; margin-bottom: 12px; }
.remscape-slot {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid rgba(100, 73, 37, 0.24); background: rgba(255, 248, 224, 0.26);
}
.remscape-slot-name { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #7a5a32; }
.remscape-slot-item { font-weight: 700; color: #3a2a16; }
.remscape-slot-item.is-empty { color: #96825f; font-style: italic; font-weight: 400; }

@media (max-width: 620px) {
  .remscape-journal-layout { grid-template-columns: minmax(0, 1fr); }
  .remscape-journal-list { max-height: 30vh; }
  .remscape-stat-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-height: 560px) {
  .remscape-dialogue-body { min-height: 3.4em; padding: 10px 12px; }
  .remscape-dialogue-button { min-height: 44px; }
  .remscape-journal-list { max-height: 34vh; }
  .remscape-journal-close, .remscape-journal-track { min-height: 44px; }
}

/* The level chip doubles as the Character button, so it needs a real target
   size and a hover/focus affordance the plain coin readout never had. */
.remscape-level-chip { min-height: 36px; padding-inline: 14px; cursor: pointer; }