/* =========================
   MATERIAL SYSTEM
   Wood / Leather / Parchment / Stone / Brass accents
========================= */

:root {
  --ui-bg-main: rgba(11, 9, 6, 0.64);
  --ui-bg-panel: rgba(28, 21, 13, 0.92);
  --ui-bg-soft: rgba(235, 198, 128, 0.055);

  --ui-border: rgba(219, 181, 104, 0.16);
  --ui-border-strong: rgba(219, 181, 104, 0.36);

  --ui-text: #f2ead7;
  --ui-text-muted: rgba(242, 234, 215, 0.64);
  --ui-accent: #8fb36b;
  --ui-accent-soft: #d4e79d;

  --material-wood:
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent 18%, rgba(255,255,255,0.02) 36%, transparent 54%),
    repeating-linear-gradient(92deg, rgba(255,255,255,0.016) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, rgba(58, 40, 21, 0.95), rgba(19, 14, 8, 0.96));
  --material-wood-deep:
    linear-gradient(90deg, rgba(255,255,255,0.025), transparent 20%, rgba(255,255,255,0.014) 42%, transparent 60%),
    repeating-linear-gradient(94deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 20px),
    linear-gradient(180deg, rgba(34, 24, 13, 0.96), rgba(10, 8, 5, 0.96));
  --material-wood-horizontal:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 18%, rgba(255,255,255,0.02) 36%, transparent 54%),
    repeating-linear-gradient(2deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, rgba(53, 36, 19, 0.95), rgba(18, 13, 8, 0.96));
  --material-leather:
    linear-gradient(180deg, rgba(255, 229, 178, 0.09), rgba(0, 0, 0, 0.1)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.075), transparent 34%),
    linear-gradient(180deg, rgba(73, 52, 31, 0.96), rgba(34, 24, 15, 0.98));
  --material-leather-hover:
    linear-gradient(180deg, rgba(255, 233, 187, 0.14), rgba(0, 0, 0, 0.08)),
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.1), transparent 36%),
    linear-gradient(180deg, rgba(92, 65, 36, 0.98), rgba(43, 30, 18, 0.98));
  --material-parchment:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,0.19), transparent 30%),
    radial-gradient(circle at 82% 88%, rgba(102, 63, 25, 0.13), transparent 35%),
    repeating-linear-gradient(2deg, rgba(70, 47, 27, 0.023) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, rgba(236, 216, 173, 0.98), rgba(211, 184, 126, 0.98));
  --material-stone:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.08), transparent 28%),
    repeating-linear-gradient(140deg, rgba(255,255,255,0.026) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, rgba(45, 49, 49, 0.96), rgba(20, 22, 22, 0.98));
  --material-brass:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.12)),
    linear-gradient(135deg, #8d6429, #f0d07a 46%, #765120);

  --material-ink: #2f2116;
  --material-brass-color: #d0a24d;
  --material-brass-bright: #f3d77f;
  --material-shadow: 0 24px 64px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.045);
  --material-shadow-soft: 0 14px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045);
}

/* Wood: persistent shell and normal panels */
#topBar,
#sidebar,
#bottomBar,
.game-window,
.settings-window,
.bank-window,
.character-container,
.travel-panel,
.bottom-chat-panel,
.bottom-info-panel,
.npc-dialog-lowerbar,
.npc-dialog-portrait-panel,
.city-scene-header,
.location-scene-header,
.location-scene-action-bar,
.location-scene-drawer-shell,
.city-overview-panel,
.journal-window,
.worldmap-node-actions-card,
.worldmap-activity-menu-panel,
.login-box > div,
.login-box > form,
.consent-card,
.runtime-notice-update,
.runtime-notice-blocking {
  background: var(--material-wood);
  border-color: var(--ui-border-strong);
  box-shadow: var(--material-shadow);
}

#topBar,
#bottomBar {
  background: var(--material-wood-horizontal);
  border-color: rgba(219, 181, 104, 0.2);
  backdrop-filter: blur(10px);
}

#bottomBar {
  position: relative;
  z-index: 2200;
  pointer-events: auto;
}

.bottom-bar-shell {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

#sidebar {
  border-right: 1px solid rgba(219, 181, 104, 0.18);
}

#main,
#skillView {
  background: rgba(8, 7, 5, 0.28);
}

.skill-section,
.bank-grid-card,
.bank-hero,
.bank-action-menu,
.inventory-hero-overview,
.character-panel-card,
.character-equipment-slot,
.auto-health-panel,
.settings-admin-card,
.settings-card,
.escape-panel-frame,
.escape-info-overlay-card,
.shop-detail-card,
.trade-pane,
.trade-detail-card,
.service-row,
.recipe-detail,
.crafting-station-panel,
.city-scene-node-card,
.location-scene-status-panel,
.location-scene-utility-btn,
.worldmap-dashboard-card,
.worldmap-stage-toolbar,
.worldmap-activity-menu-toggle,
.worldmap-event-feed-summary,
.map-trade-pressure-card,
.city-overview-card,
.travel-confirm-card,
.travel-event-card,
.rest-dialog,
.email-reminder-dialog {
  background: var(--material-wood-deep);
  border-color: rgba(219, 181, 104, 0.18);
  box-shadow: var(--material-shadow-soft);
}

/* Leather: buttons, tabs, labels, compact interaction surfaces */
button,
.bank-button,
.npc-dialog-btn,
.quest-row-action,
.service-row-action,
.shop-buy-btn,
.trade-detail-actions button,
.worldmap-layer-btn,
.worldmap-node-action-btn,
.journal-chapter-tab,
.journal-entry-row,
.city-overview-btn,
.city-scene-tool-btn,
.smithing-tab,
.skill-switch-btn,
.start-resource-btn,
.bottom-info-module,
.bottom-bar-chat-toggle,
.bottom-chat-scope-btn,
.settings-secondary,
.escape-menu-btn,
.escape-submenu-card,
.pill,
.topbar-buff-pill,
.topbar-buff-overflow,
#currentSeason,
#currentWeather,
.topbar-shipment-indicator,
.topbar-health-wrap,
.bank-filter-chip,
.bank-sort-btn,
.auto-health-category-summary,
.auto-health-category-action,
.auto-health-item-row,
.quest-entry-status,
.worldmap-event-pill,
.map-token {
  background: var(--material-leather);
  border-color: rgba(235, 194, 118, 0.26);
  color: var(--ui-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -10px 18px rgba(0,0,0,0.14),
    0 8px 20px rgba(0,0,0,0.18);
}

button:hover,
.bank-button:hover,
.npc-dialog-btn:hover,
.quest-row-action:hover,
.service-row-action:hover,
.shop-buy-btn:hover,
.trade-detail-actions button:hover,
.worldmap-layer-btn:hover,
.worldmap-node-action-btn:hover,
.city-overview-btn:hover,
.city-scene-tool-btn:hover,
.smithing-tab:hover,
.skill-switch-btn:hover,
.start-resource-btn:hover,
.bottom-info-module:hover,
.bottom-info-module.is-active,
.bottom-bar-chat-toggle:hover,
.bottom-bar-chat-toggle.is-open,
.bottom-chat-scope-btn:hover,
.bottom-chat-scope-btn.active,
.settings-secondary:hover,
.escape-menu-btn:hover,
.escape-menu-btn.is-active,
.escape-submenu-card:hover,
.topbar-buff-overflow:hover,
.topbar-health-wrap:hover,
.bank-filter-chip:hover,
.bank-filter-chip.is-active,
.bank-sort-btn:hover,
.auto-health-category-summary:hover,
.auto-health-item-row:hover,
.worldmap-layer-btn.is-active {
  background: var(--material-leather-hover);
  border-color: rgba(243, 215, 127, 0.42);
  filter: none;
}

button.primary,
.start-resource-btn,
#startCraftBtn,
#loginBtn,
#registerBtn,
.enter-world-btn,
.npc-dialog-btn:not(.secondary),
.quest-row-action,
.service-row-action,
.city-overview-btn:not(.secondary),
.worldmap-node-action-btn:not(.secondary) {
  color: #23190b;
  border-color: rgba(236, 204, 125, 0.5);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(0,0,0,0.1)),
    linear-gradient(180deg, #eadcaa, #b9a264 54%, #7c6d3e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 18px rgba(86, 58, 18, 0.18),
    0 8px 20px rgba(0,0,0,0.2);
}

button.primary:hover,
.start-resource-btn:hover,
#startCraftBtn:hover,
#loginBtn:hover,
#registerBtn:hover,
.enter-world-btn:hover,
.npc-dialog-btn:not(.secondary):hover,
.quest-row-action:hover,
.service-row-action:hover,
.city-overview-btn:not(.secondary):hover,
.worldmap-node-action-btn:not(.secondary):hover {
  color: #1f1609;
  border-color: rgba(255, 225, 139, 0.66);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.3), rgba(0,0,0,0.08)),
    linear-gradient(180deg, #f1e4b7, #c2ab6d 54%, #897849);
}

.service-row-action,
.service-row-action:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.service-row-action .npc-dialog-btn {
  min-width: 92px;
}

.topbar-health-wrap.has-inn-regen-boost,
.topbar-health-wrap.has-inn-regen-boost:hover {
  border-color: rgba(245, 202, 91, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 18px rgba(0,0,0,0.14),
    0 0 0 1px rgba(245, 202, 91, 0.18),
    0 0 24px rgba(245, 202, 91, 0.26);
}

button.danger,
#stopBtn,
#cancelCraftBtn {
  color: #ffe9e2;
  border-color: rgba(221, 108, 83, 0.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.12)),
    linear-gradient(180deg, #a75342, #7c3027 58%, #54201b);
}

/* Lighter red for end-activity */
.end-activity-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(0,0,0,0.12)),
    linear-gradient(180deg, #c45f4f, #9c4639 58%, #6f2f28);
}

/* Parchment: quests, messages, lore and map content */
.quest-row,
.quest-complete-card,
.quest-entry,
.quest-step,
.npc-dialog-quest-description,
.npc-talk-topic-response,
.message,
.story-continuation-card,
.away-summary-card,
.worldmap-event-feed-item,
.worldmap-event-feed-details,
.city-overview-section,
.map-world-events-panel,
.map-economy-panel,
.email-reminder-body,
.escape-info-card,
.escape-patchlog-entry {
  background: var(--material-parchment);
  border-color: rgba(92, 62, 30, 0.26);
  color: var(--material-ink);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.19),
    0 14px 32px rgba(0,0,0,0.18);
}

.quest-row *,
.quest-complete-card *,
.quest-entry *,
.quest-step *,
.npc-dialog-quest-description *,
.npc-talk-topic-response *,
.story-continuation-card *,
.away-summary-card *,
.worldmap-event-feed-item *,
.city-overview-section *,
.map-world-events-panel *,
.map-economy-panel *,
.escape-info-card *,
.escape-patchlog-entry * {
  color: inherit;
}

.quest-row-title,
.quest-complete-title,
.quest-entry-title,
.quest-step-title,
.worldmap-event-title,
.map-world-events-title,
.map-economy-title,
.city-overview-section-title,
.escape-patchlog-title {
  color: #3a2614;
}

.quest-row-description,
.quest-complete-copy,
.npc-dialog-quest-description,
.worldmap-event-copy,
.city-overview-empty,
.map-economy-empty,
.escape-info-card p,
.escape-patchlog-entry p {
  color: rgba(47, 33, 22, 0.78);
}

.city-world-event-card .city-world-event-title,
.city-world-event-card .city-world-event-copy,
.city-world-event-card .city-world-event-meta,
.city-world-event-card .worldmap-event-pill {
  opacity: 1;
}

.quest-complete-card {
  border-color: rgba(105, 72, 32, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 26px 70px rgba(0,0,0,0.48);
}

.quest-complete-kicker,
.quest-complete-section-title,
.quest-complete-reward-label {
  color: rgba(54, 35, 16, 0.78);
}

.quest-complete-burst {
  color: rgba(47, 33, 22, 0.82);
}

.quest-complete-title {
  color: #2f1d0d;
}

.quest-complete-copy {
  color: rgba(42, 29, 18, 0.86);
}

.quest-complete-reward-block {
  background: rgba(88, 57, 22, 0.07);
  border-color: rgba(93, 62, 27, 0.18);
}

.quest-complete-reward-xp,
.quest-complete-item-row strong,
.quest-complete-reward-coin {
  color: #2b1a0b;
}

.quest-complete-item-row {
  background: rgba(255, 248, 218, 0.36);
  border: 1px solid rgba(92, 62, 30, 0.12);
}

.quest-complete-item-row span {
  color: rgba(42, 29, 18, 0.84);
}

.story-continuation-card {
  border-color: rgba(105, 72, 32, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.24),
    0 26px 70px rgba(0,0,0,0.48);
}

.story-continuation-kicker {
  color: rgba(54, 35, 16, 0.8);
}

.story-continuation-card h2 {
  color: #2f1d0d;
}

.story-continuation-card p {
  color: rgba(42, 29, 18, 0.9);
}

.quest-entry .quest-entry-status {
  color: #f6ead1;
  background:
    linear-gradient(180deg, rgba(255, 236, 184, 0.08), rgba(0, 0, 0, 0.08)),
    rgba(42, 30, 18, 0.82);
  border-color: rgba(92, 62, 30, 0.22);
}

.quest-entry.completed .quest-entry-status {
  color: #3b2815;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.05)),
    rgba(207, 163, 82, 0.66);
  border-color: rgba(92, 62, 30, 0.3);
}

.quest-entry .quest-entry-step-label,
.quest-entry .quest-entry-reward-label {
  color: rgba(58, 38, 20, 0.72);
}

.bottom-chat-panel {
  position: absolute;
  z-index: 3200;
  isolation: isolate;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgba(41, 29, 15, 0.88), rgba(14, 10, 6, 0.9)),
    var(--material-wood-deep);
}

.bottom-chat-panel * {
  pointer-events: auto;
}

.bottom-chat-header,
.bottom-chat-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  pointer-events: auto;
}

.bottom-chat-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(219, 181, 104, 0.14);
  background: rgba(5, 4, 3, 0.34);
  pointer-events: auto;
}

.bottom-chat-message {
  background:
    linear-gradient(180deg, rgba(255, 236, 184, 0.055), rgba(0, 0, 0, 0.08)),
    rgba(18, 14, 9, 0.78);
  border-color: rgba(219, 181, 104, 0.22);
  color: #f4ead6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 8px 18px rgba(0,0,0,0.18);
}

.bottom-chat-message.is-system {
  background:
    linear-gradient(180deg, rgba(214, 187, 106, 0.12), rgba(0, 0, 0, 0.08)),
    rgba(31, 23, 12, 0.82);
  border-color: rgba(230, 198, 126, 0.3);
}

.bottom-chat-message-author {
  color: #f3d77f;
}

.bottom-chat-message-time {
  color: rgba(244, 234, 214, 0.62);
}

.bottom-chat-message-text {
  color: rgba(248, 240, 224, 0.92);
}

.bottom-chat-empty {
  color: rgba(248, 240, 224, 0.66);
}

.bottom-chat-input {
  background: rgba(6, 5, 4, 0.72);
  border-color: rgba(219, 181, 104, 0.26);
  color: #f4ead6;
  pointer-events: auto;
}

.bottom-chat-scope-btn,
.bottom-chat-send-btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.bottom-chat-input::placeholder {
  color: rgba(244, 234, 214, 0.46);
}

/* Stone / metal: robust work surfaces and progress */
.smithing-window,
.smithing-content,
.smithing-recipe-card,
.smithing-progress-card,
.progress-bar,
.travel-progress,
.bottom-info-xp-track,
.topbar-health-bar,
.durability-bar,
.bank-slot,
.inventory-slot,
.character-equipment-slot,
.item-detail-panel,
.recipe-material-row,
.resource-progress-card,
.location-scene-progress-card {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.055), transparent 30%),
    linear-gradient(180deg, rgba(44, 46, 44, 0.86), rgba(15, 16, 15, 0.88));
  border-color: rgba(190, 199, 190, 0.18);
}

.xp-fill,
.bottom-info-xp-fill,
.travel-progress-fill,
.topbar-health-fill,
.durability-fill,
.progress-fill {
  box-shadow: 0 0 13px rgba(212, 163, 78, 0.24);
}

/* Brass / rope: restrained accents */
.overlay-header,
.skill-header,
.bank-hero,
.view-hero,
.worldmap-hero,
.settings-window,
.game-window,
.bank-window,
.character-container,
.location-scene-drawer-shell,
.city-scene-header,
.quest-complete-card,
.story-continuation-card {
  position: relative;
}

.overlay-header::after,
.skill-header::after,
.bank-hero::after,
.view-hero::after,
.worldmap-hero::after,
.settings-window::after,
.game-window::after,
.bank-window::after,
.character-container::after,
.location-scene-action-bar::after,
.location-scene-drawer-shell::after,
.city-scene-header::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(243, 215, 127, 0.42), transparent);
}

.overlay-header::before,
.skill-header::before,
.bank-hero::before,
.view-hero::before,
.worldmap-hero::before,
.settings-window::before,
.game-window::before,
.bank-window::before,
.character-container::before,
.quest-complete-card::before,
.story-continuation-card::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  right: 14px;
  top: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 32% 25%, #fff0a8, var(--material-brass-color) 52%, #684315);
  box-shadow: 0 0 0 2px rgba(54, 32, 12, 0.28);
  opacity: 0.72;
}

.overlay-close::before,
.settings-close::before,
.bank-close::before,
.char-close::before,
.skill-close::before {
  display: none;
}

/* Scene wrappers must stay transparent so location/city background art remains visible. */
.location-scene-window,
.location-scene-overlay,
.location-scene-map,
.city-scene-map,
.skill-view-city-scene {
  background: transparent !important;
  box-shadow: none;
}

.location-scene-window {
  border: none;
}

.location-scene-window::before,
.location-scene-window::after {
  content: none;
  display: none;
}

/* The world map ships as real map art and must not be replaced by material fills. */
#worldMapOverlay {
  background: transparent;
  backdrop-filter: none;
}

#worldMapContent {
  pointer-events: none;
}

.worldmap-window {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ui-text);
  pointer-events: auto;
}

.worldmap-window::before,
.worldmap-window::after {
  content: none;
  display: none;
}

.worldmap-window .worldmap-hero {
  background: var(--material-wood-horizontal);
  border: 1px solid rgba(219, 181, 104, 0.28);
  border-radius: 18px;
  box-shadow: var(--material-shadow-soft);
}

.worldmap-body {
  background: transparent;
}

.worldmap {
  background: url("/assets/ui/worldmap.png") center/cover no-repeat !important;
  background-color: #14130b !important;
  color: var(--ui-text);
  border-color: rgba(219, 181, 104, 0.36);
}

.worldmap-stage {
  background: var(--material-parchment);
  border-color: rgba(92, 62, 30, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 16px 36px rgba(0,0,0,0.24);
}

.map-label,
.worldmap-route-label,
.worldmap-activity-popover,
.worldmap-activity-popover *,
.worldmap-offer-marker,
.worldmap-event-marker {
  color: var(--ui-text);
}

.map-node:hover .map-label {
  color: #fff3c7;
  background: rgba(18, 13, 7, 0.86);
  border-color: rgba(243, 215, 127, 0.42);
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 0 12px rgba(255, 220, 120, 0.62);
}

.map-economy-tooltip {
  color: #f6ead1;
  background:
    linear-gradient(180deg, rgba(33, 25, 14, 0.96), rgba(11, 9, 6, 0.96));
  border-color: rgba(243, 215, 127, 0.22);
}

.map-economy-tooltip * {
  color: inherit;
}

.map-economy-title,
.map-economy-tooltip strong {
  color: #f3d77f;
}

.map-economy-label,
.map-economy-tooltip span,
.map-economy-tooltip small {
  color: rgba(246, 234, 211, 0.78);
}

.city-overview-section .city-overview-route-row {
  background: rgba(70, 47, 27, 0.07);
}

.city-overview-section .city-overview-route-row strong {
  color: #3b2815;
}

.city-overview-section .city-overview-route-row span,
.city-overview-section .city-overview-route-row small {
  color: rgba(47, 33, 22, 0.72);
}

/* Inputs remain modern/readable, just warmed up */
input,
select,
textarea,
.bottom-chat-input,
.chat-input,
.bank-search-input,
.settings-window input,
.settings-window select,
.auto-health-search,
.login-box input {
  background: rgba(10, 8, 5, 0.78);
  border-color: rgba(219, 181, 104, 0.22);
  color: var(--ui-text);
  box-shadow: inset 0 1px 8px rgba(0,0,0,0.34);
}

input:focus,
select:focus,
textarea:focus,
.login-box input:focus {
  outline: none;
  border-color: rgba(243, 215, 127, 0.54);
  box-shadow:
    inset 0 1px 8px rgba(0,0,0,0.34),
    0 0 0 2px rgba(208, 162, 77, 0.14);
}

/* Keep text-heavy gameplay readable */
.npc-dialog-greeting,
.npc-talk-prompt-text,
.quest-row-description,
.service-row-description,
.bottom-chat-message p,
.worldmap-event-copy,
.city-overview-meta,
.settings-subtitle,
.bank-hero-copy p,
.recipe-detail p,
.location-scene-action-copy p,
.location-scene-drawer-copy p {
  font-family: var(--font-readable);
  letter-spacing: 0;
}

/* Small material helpers for future markup */
.ui-material-wood { background: var(--material-wood); }
.ui-material-leather { background: var(--material-leather); }
.ui-material-parchment { background: var(--material-parchment); color: var(--material-ink); }
.ui-material-stone { background: var(--material-stone); }
.ui-material-brass { background: var(--material-brass); color: #25180a; }

/* NPC conversation mode keeps the scene visible instead of using framed panels. */
#npcDialogOverlay .npc-dialog-lowerbar,
#npcDialogOverlay .npc-dialog-portrait-panel,
#npcDialogOverlay .npc-dialog-portrait-frame,
#npcDialogOverlay .npc-dialog-copy-block,
#npcDialogOverlay .npc-dialog-quest-block,
#npcDialogOverlay .npc-talk-topic-response,
#npcDialogOverlay .npc-dialog-quest-description,
#npcDialogOverlay .quest-view,
#npcDialogOverlay .quest-row {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#npcDialogOverlay .npc-dialog-quest-description,
#npcDialogOverlay .npc-talk-topic-response,
#npcDialogOverlay .npc-talk-topic-response *,
#npcDialogOverlay .quest-row,
#npcDialogOverlay .quest-row * {
  color: inherit;
}

#npcDialogOverlay .npc-dialog-quest-description,
#npcDialogOverlay .quest-row-description {
  color: rgba(250, 238, 218, 0.92);
}

#npcDialogOverlay .quest-row-title {
  color: #fff6df;
}

#npcDialogOverlay .quest-row-status,
#npcDialogOverlay .quest-entry-rewards,
#npcDialogOverlay .quest-objective-meta {
  color: rgba(250, 238, 218, 0.68);
}

#npcDialogOverlay .npc-dialog-quest-description {
  color: #fff4d9;
  background:
    linear-gradient(90deg, rgba(10, 8, 5, 0.5), rgba(10, 8, 5, 0.16) 72%, transparent);
  border-color: rgba(243, 215, 127, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 211, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.18);
}

#npcDialogOverlay .npc-conversation-option,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#npcDialogOverlay .npc-conversation-option:hover,
#npcDialogOverlay .npc-conversation-option:focus-visible,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:hover,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:focus-visible,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn:hover,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn:focus-visible,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn:hover,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn:focus-visible {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#npcTradeOverlay .npc-dialog-lowerbar {
  background: var(--material-wood-deep);
  border-color: rgba(219, 181, 104, 0.34);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Workspace geometry lives in the last loaded stylesheet so it wins over the
   older experimental workspace rules in components.css. */
body.management-workspace-open {
  --management-workspace-gap: 10px;
  --management-visible-left: calc(var(--canvas-extra-left, 0px) * -1);
  --management-visible-right: calc(var(--canvas-visible-width, 1920px) + var(--management-visible-left));
  --management-visible-width: var(--canvas-visible-width, 1920px);
  --management-workspace-left: calc(var(--management-visible-left) + var(--ui-sidebar-width) + var(--management-workspace-gap));
  --management-workspace-right: var(--management-workspace-gap);
  --management-workspace-width: calc(var(--management-visible-width) - var(--ui-sidebar-width) - var(--management-workspace-gap) - var(--management-workspace-right));
  --management-workspace-top: calc(var(--ui-topbar-height) + 40px);
  --management-workspace-height: calc(var(--canvas-visible-height, 1080px) - var(--management-workspace-top) - 64px);
}

body.management-workspace-open #characterOverlay .character-container,
body.management-workspace-open #inventoryOverlay .inventory-window,
body.management-workspace-open #bankOverlay .bank-window {
  top: var(--management-workspace-top) !important;
  height: var(--management-workspace-height) !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.management-workspace-bank {
  --management-workspace-top: calc(var(--ui-topbar-height) + 4px);
  --management-workspace-height: calc(var(--canvas-visible-height, 1080px) - var(--management-workspace-top) - 88px);
  --management-bank-expanded-left: calc(var(--management-visible-left) + var(--management-workspace-gap));
  --management-bank-expanded-width: calc(var(--management-visible-width) - (var(--management-workspace-gap) * 2));
  --management-bank-inventory-width: 465px;
  --management-bank-character-width: 560px;
  --management-bank-expanded-bank-width: calc(var(--management-bank-expanded-width) - var(--management-bank-inventory-width) - var(--management-bank-character-width));
  --management-bank-expanded-inventory-width: var(--management-bank-inventory-width);
  --management-bank-expanded-character-width: var(--management-bank-character-width);
  --management-bank-collapsed-left: calc(var(--management-visible-left) + var(--ui-sidebar-width) + var(--management-workspace-gap));
  --management-bank-collapsed-inventory-width: var(--management-bank-inventory-width);
  --management-bank-collapsed-bank-width: var(--management-bank-expanded-bank-width);
}

body.management-workspace-bank #bankOverlay .bank-window,
body.management-workspace-bank #bankOverlay #bankContent {
  left: var(--management-bank-expanded-left) !important;
  right: auto !important;
  width: var(--management-bank-expanded-bank-width) !important;
  max-width: none !important;
  border-radius: 16px 0 0 16px;
  border-right-width: 0;
}

body.management-workspace-bank #inventoryOverlay .inventory-window {
  left: calc(var(--management-bank-expanded-left) + var(--management-bank-expanded-bank-width)) !important;
  right: auto !important;
  width: var(--management-bank-expanded-inventory-width) !important;
  max-width: none !important;
  border-radius: 0;
  border-left-color: rgba(236, 203, 128, 0.68);
  border-right-width: 0;
}

body.management-workspace-bank #characterOverlay .character-container {
  left: calc(var(--management-bank-expanded-left) + var(--management-bank-expanded-bank-width) + var(--management-bank-expanded-inventory-width)) !important;
  right: auto !important;
  width: var(--management-bank-expanded-character-width) !important;
  max-width: none !important;
  border-radius: 0 16px 16px 0;
  border-left-color: rgba(236, 203, 128, 0.68);
}

body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window,
body.management-workspace-bank.management-character-collapsed #bankOverlay #bankContent {
  left: var(--management-bank-collapsed-left) !important;
  right: auto !important;
  width: var(--management-bank-collapsed-bank-width) !important;
  max-width: none !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(var(--management-bank-collapsed-left) + var(--management-bank-collapsed-bank-width)) !important;
  right: auto !important;
  width: var(--management-bank-collapsed-inventory-width) !important;
  max-width: none !important;
  border-radius: 0 16px 16px 0;
  border-right-width: 1px;
  border-right-color: rgba(236, 203, 128, 0.68);
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  top: calc(var(--management-workspace-top) + (var(--management-workspace-height) / 2) - 34px) !important;
  left: calc(var(--management-bank-collapsed-left) + var(--management-bank-collapsed-bank-width) + var(--management-bank-collapsed-inventory-width) - 1px) !important;
}

body.management-workspace-inventory {
  --management-workspace-top: calc(var(--ui-topbar-height) + 4px);
  --management-workspace-height: calc(var(--canvas-visible-height, 1080px) - var(--management-workspace-top) - 88px);
  --management-character-width: 560px;
  --management-inventory-width: var(--management-bank-inventory-width, 465px);
  --management-inventory-group-width: calc(var(--management-character-width) + var(--management-inventory-width));
  --management-inventory-group-left: calc(var(--management-visible-right) - var(--management-workspace-gap) - var(--management-inventory-group-width));
  --management-inventory-collapsed-left: calc(var(--management-visible-right) - var(--management-workspace-gap) - var(--management-inventory-width));
}

body.management-workspace-inventory #characterOverlay .character-container {
  left: var(--management-inventory-group-left) !important;
  right: auto !important;
  width: var(--management-character-width) !important;
  max-width: none !important;
  border-radius: 16px 0 0 16px;
  border-right-width: 0;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-container {
  transform: translateX(calc(100% + 18px));
}

body.management-workspace-inventory #characterOverlay .character-workspace-collapse {
  display: grid !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  place-items: center !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

body.management-workspace-inventory #characterOverlay .character-workspace-collapse::after {
  content: "\203A";
  display: block;
  font: 800 28px/1 sans-serif;
  transform: translateY(-1px);
}

body.management-workspace-inventory #inventoryOverlay .inventory-window {
  left: calc(var(--management-inventory-group-left) + var(--management-character-width)) !important;
  right: auto !important;
  width: var(--management-inventory-width) !important;
  max-width: none !important;
  border-radius: 0 16px 16px 0;
  border-left-color: rgba(236, 203, 128, 0.68);
}

body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: var(--management-inventory-collapsed-left) !important;
  right: auto !important;
  width: var(--management-inventory-width) !important;
  max-width: none !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore {
  left: calc(var(--management-inventory-collapsed-left) - 31px) !important;
}

body.management-workspace-bank #bankOverlay .bank-slots {
  grid-template-columns: repeat(9, minmax(52px, 1fr));
  gap: 7px;
}

body.management-workspace-bank #inventoryOverlay .inventory-slots {
  grid-template-columns: repeat(5, 75px);
  justify-content: start;
  gap: 7px;
}

body.management-workspace-bank #bankOverlay .bank-slot img:not(.item-composite-layer),
body.management-workspace-bank #bankOverlay .bank-slot .item-composite-icon,
body.management-workspace-bank #inventoryOverlay .inventory-slot img:not(.item-composite-layer),
body.management-workspace-bank #inventoryOverlay .inventory-slot .item-composite-icon {
  width: min(46px, 72%);
  height: min(46px, 72%);
}

body.management-workspace-inventory #inventoryOverlay .inventory-slots {
  grid-template-columns: repeat(5, 75px);
  justify-content: start;
  gap: 7px;
}

@media (max-width: 1280px) {
  body.management-workspace-open {
    --management-workspace-gap: 6px;
  }
}

/* Modal backdrops must cover the visible game viewport, not only the 1920x1080
   design canvas. This keeps ultrawide/taller viewports from showing clear edges. */
.game-modal-backdrop {
  position: absolute;
  left: calc(var(--canvas-extra-left, 0px) * -1);
  top: calc(var(--canvas-extra-top, 0px) * -1);
  right: auto;
  bottom: auto;
  width: var(--canvas-visible-width, 1920px);
  height: var(--canvas-visible-height, 1080px);
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 42%, rgba(205, 178, 105, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 5, 3, 0.58), rgba(7, 5, 3, 0.78));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.game-modal-backdrop.hidden {
  display: none;
}

#skillOverlay.game-modal-backdrop,
#unlocksOverlay.game-modal-backdrop,
#worldMapOverlay.game-modal-backdrop,
#settingsOverlay.game-modal-backdrop,
#journalOverlay.game-modal-backdrop,
#travelConfirmOverlay.game-modal-backdrop,
#emailReminderOverlay.game-modal-backdrop,
#npcDialogOverlay.game-modal-backdrop {
  position: absolute;
  left: calc(var(--canvas-extra-left, 0px) * -1);
  top: calc(var(--canvas-extra-top, 0px) * -1);
  right: auto;
  bottom: auto;
  width: var(--canvas-visible-width, 1920px);
  height: var(--canvas-visible-height, 1080px);
}

#skillOverlay.game-modal-backdrop,
#unlocksOverlay.game-modal-backdrop,
#journalOverlay.game-modal-backdrop,
#travelConfirmOverlay.game-modal-backdrop,
#emailReminderOverlay.game-modal-backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(205, 178, 105, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 5, 3, 0.58), rgba(7, 5, 3, 0.78));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#settingsOverlay.game-modal-backdrop,
#worldMapOverlay.game-modal-backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(205, 178, 105, 0.07), transparent 36%),
    linear-gradient(180deg, rgba(7, 5, 3, 0.44), rgba(7, 5, 3, 0.66));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#worldMapOverlay.game-modal-backdrop {
  bottom: auto;
}

#npcDialogOverlay.game-modal-backdrop {
  z-index: 300;
  display: block;
  background:
    radial-gradient(circle at 74% 46%, rgba(218, 178, 105, 0.13), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.64), rgba(4, 3, 2, 0.24) 18%, rgba(4, 3, 2, 0.04) 42%, rgba(4, 3, 2, 0.36)),
    linear-gradient(180deg, rgba(7, 6, 4, 0.22), rgba(7, 6, 4, 0.62));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* DOM layout fit pass: keep windows crisp by changing real dimensions instead
   of scaling the whole UI bitmap. */
.skill-view-city-scene,
.location-scene-overlay {
  --scene-ui-scale: 1;
}

.city-scene-node {
  gap: 7px;
  max-width: min(188px, calc(var(--canvas-visible-width, 1920px) - 32px));
}

.city-scene-node-dot,
.city-scene-location-landmark {
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-width: 2px;
  box-shadow:
    0 0 0 4px rgba(0,0,0,0.24),
    0 0 14px rgba(214, 184, 116, 0.2);
}

.city-scene-node.has-location-landmark {
  gap: 7px;
}

.city-scene-node.has-location-landmark .city-scene-location-landmark {
  width: 42px;
  height: 42px;
  margin-left: -8px;
}

.city-scene-node.has-location-landmark .city-scene-node-card,
.city-scene-node-card {
  min-width: 136px;
  max-width: 188px;
  padding: 5px 18px 5px 7px;
}

.city-scene-node-card strong {
  font-size: 12px;
  line-height: 1.08;
}

.city-scene-node-card span,
.city-scene-node-card small {
  font-size: 11px;
}

.city-scene-node-meta {
  gap: 4px;
  margin-top: 3px;
}

body.management-workspace-bank {
  --management-workspace-top: calc(var(--ui-topbar-height) + 8px);
  --management-workspace-height: calc(var(--canvas-visible-height, 1080px) - var(--management-workspace-top) - 82px);
  --management-bank-inventory-width: 480px;
  --management-bank-character-width: 520px;
}

body.management-workspace-bank #bankOverlay .bank-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main tools"
    "stats tools";
  gap: 7px 12px;
  padding: 10px 14px;
  min-height: 0;
  align-items: start;
}

body.management-workspace-bank #bankOverlay .bank-hero-main {
  gap: 9px;
  align-items: flex-start;
}

body.management-workspace-bank #bankOverlay .bank-hero-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

body.management-workspace-bank #bankOverlay .bank-hero-icon {
  width: 26px;
  height: 26px;
}

body.management-workspace-bank #bankOverlay .bank-hero-copy {
  max-width: 360px;
}

body.management-workspace-bank #bankOverlay .bank-hero-copy h2 {
  max-width: 100%;
  font-size: 30px;
  line-height: 1;
  overflow-wrap: normal;
  word-break: normal;
}

body.management-workspace-bank #bankOverlay .bank-hero-label {
  font-size: 9px;
  letter-spacing: 0.12em;
}

body.management-workspace-bank #bankOverlay .bank-remote-note {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.management-workspace-bank #bankOverlay .bank-hero-tools {
  grid-template-columns: auto;
  grid-template-areas:
    "bags"
    "coins";
  gap: 5px;
  padding-top: 0;
  justify-items: end;
}

body.management-workspace-bank #bankOverlay .bank-hero-coins-wrap {
  transform: none;
}

body.management-workspace-bank #bankOverlay .bank-hero-coins {
  min-height: 30px;
  padding: 3px 8px;
}

body.management-workspace-bank #bankOverlay .bank-hero-bags {
  gap: 5px;
}

body.management-workspace-bank #bankOverlay .bank-hero-stats {
  grid-template-columns: repeat(3, 88px);
  max-width: 282px;
  gap: 5px;
}

body.management-workspace-bank #inventoryOverlay .inventory-hero-overview {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: none;
}

body.management-workspace-bank #inventoryOverlay .inventory-hero-overview .bank-hero-stats {
  flex: 1 1 auto;
}

.inventory-hero-bank-action,
.character-hero-bank-action {
  min-height: 38px;
  border: 1px solid rgba(214, 184, 116, 0.34);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(92, 65, 33, 0.92), rgba(35, 25, 15, 0.94));
  color: rgba(250, 240, 214, 0.94);
  font-weight: 900;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.09),
    0 8px 18px rgba(0,0,0,0.18);
}

.inventory-hero-bank-action:hover,
.character-hero-bank-action:hover {
  filter: brightness(1.08);
}

.inventory-hero-bank-action:disabled,
.character-hero-bank-action:disabled {
  cursor: default;
  opacity: 0.42;
  filter: saturate(0.7);
}

body.management-workspace-bank #inventoryOverlay .inventory-hero-bank-action {
  flex: 0 0 142px;
  padding: 0 10px;
  font-size: 12px;
}

body.management-workspace-bank #characterOverlay .character-hero-bank-action {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  font-size: 11px;
}

body.management-workspace-bank #bankOverlay .bank-hero-stat {
  min-height: 32px;
  padding: 4px 7px;
  border-radius: 7px;
}

body.management-workspace-bank #bankOverlay .bank-hero-stat strong {
  font-size: 13px;
}

body.management-workspace-bank #bankOverlay .bank-hero-stat span {
  font-size: 8px;
  letter-spacing: 0.05em;
}

body.management-workspace-bank #bankOverlay .bank-body,
body.management-workspace-bank #inventoryOverlay .bank-body {
  overflow: hidden;
}

body.management-workspace-bank #bankOverlay .bank-slots {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  grid-auto-rows: 76px;
  gap: 7px;
  overflow-x: hidden;
  padding-right: 8px;
}

body.management-workspace-bank #bankOverlay .bank-slot,
body.management-workspace-bank #inventoryOverlay .inventory-slot {
  min-width: 0;
  min-height: 76px;
}

body.management-workspace-bank #inventoryOverlay .inventory-slots,
body.management-workspace-inventory #inventoryOverlay .inventory-slots {
  grid-template-columns: repeat(5, 75px);
  grid-auto-rows: 75px;
  justify-content: start;
  overflow-x: hidden;
}

body.management-workspace-bank #bankOverlay .bank-slot img:not(.item-composite-layer),
body.management-workspace-bank #bankOverlay .bank-slot .item-composite-icon {
  width: min(52px, 72%);
  height: min(52px, 72%);
}

#settingsOverlay.game-modal-backdrop,
#journalOverlay.game-modal-backdrop,
#questOverlay.game-modal-backdrop,
#skillOverlay.game-modal-backdrop,
#unlocksOverlay.game-modal-backdrop {
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--ui-topbar-height) + 14px) 18px 76px;
  overflow: hidden;
}

#settingsOverlay .settings-window,
#journalOverlay .journal-window,
#questOverlay .quest-window,
#skillOverlay .skill-window,
#unlocksOverlay .unlocks-window {
  max-height: calc(var(--canvas-visible-height, 1080px) - var(--ui-topbar-height) - 104px);
}

#settingsOverlay .settings-window {
  width: min(980px, calc(var(--canvas-visible-width, 1920px) - 64px));
  height: min(720px, calc(var(--canvas-visible-height, 1080px) - var(--ui-topbar-height) - 104px));
}

#settingsOverlay .escape-menu-layout {
  min-height: 0;
}

#settingsOverlay .escape-menu-panel {
  padding: 16px;
}

#settingsOverlay .escape-panel-frame {
  padding: 14px 16px;
}

#settingsOverlay .escape-panel-header {
  margin-bottom: 14px;
}

#settingsOverlay .escape-panel-header h2 {
  font-size: 1.55rem;
}

#settingsOverlay .settings-card-grid {
  gap: 10px;
}

#settingsOverlay .settings-section {
  gap: 12px;
}

#journalOverlay .journal-window {
  width: min(1040px, calc(var(--canvas-visible-width, 1920px) - 64px));
}

#journalOverlay .journal-hero {
  padding: 14px 18px;
}

#journalOverlay .journal-hero h2 {
  font-size: 24px;
}

#journalOverlay .journal-layout {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

#journalOverlay .journal-page {
  padding: 22px 28px;
}

#journalOverlay .journal-page h2 {
  font-size: 30px;
}

#questOverlay .quest-window {
  width: min(640px, calc(var(--canvas-visible-width, 1920px) - 64px));
  min-width: min(520px, calc(var(--canvas-visible-width, 1920px) - 64px));
  overflow: hidden auto;
}

#skillOverlay .skill-window {
  width: min(620px, calc(var(--canvas-visible-width, 1920px) - 64px));
  overflow: hidden;
}

#skillOverlay .skill-hero {
  padding: 12px 14px;
}

#skillOverlay .skill-hero-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

#skillOverlay .skill-overview-grid {
  gap: 8px;
}

#skillOverlay .skill-stat-pill {
  padding: 10px 12px;
}