/* =========================
   BASE OVERLAY LAYER
========================= */

/* Standard Overlay (zentriert) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Draggable Overlays */
.overlay.no-blur {
  backdrop-filter: none;
  background: transparent;

  align-items: flex-start;
  justify-content: flex-start;

  pointer-events: none;
}

/* Fenster bleiben klickbar */
.overlay.no-blur .game-window,
.overlay.no-blur .character-container,
.overlay.no-blur .bank-overlay {
  pointer-events: auto;
}

.overlay.hidden {

  display: none;

}

#settingsOverlay {
  background: rgba(4, 3, 2, 0.34);
  backdrop-filter: blur(10px);
}

.email-reminder-dialog {
  width: min(520px, calc(var(--canvas-visible-width, 1920px) - 32px));
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(205, 178, 105, 0.45);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(31, 34, 24, 0.98), rgba(15, 17, 12, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.email-reminder-dialog h3 {
  margin: 4px 0 8px;
  color: #f7e9b8;
}

.email-reminder-dialog p {
  margin: 0;
  color: rgba(239, 242, 225, 0.78);
  line-height: 1.55;
}

.email-reminder-eyebrow,
.email-reminder-dialog label span {
  color: #cdb269;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.email-reminder-dialog label {
  display: grid;
  gap: 8px;
}

.email-reminder-dialog input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: #edf5de;
  background: rgba(0, 0, 0, 0.28);
}

.email-reminder-dialog .overlay-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#emailReminderSubmitBtn {
  grid-column: 1 / -1;
}

.email-reminder-dialog .overlay-actions button {
  min-height: 44px;
  white-space: normal;
}

@media (max-width: 720px) {
  .email-reminder-dialog .overlay-actions {
    grid-template-columns: 1fr;
  }

  #emailReminderSubmitBtn {
    grid-column: auto;
  }
}

.email-reminder-message {
  min-height: 1.4em;
  color: #d8f39b;
  font-size: 0.92rem;
}

.email-reminder-message.is-error {
  color: #ffb0a3;
}

.auto-health-overlay {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 3, 2, 0.42);
  backdrop-filter: blur(10px);
}

.auto-health-card {
  width: min(680px, calc(var(--canvas-visible-width, 1920px) - 32px));
  max-height: min(760px, calc(100dvh - 48px));
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(205, 178, 105, 0.42);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(25, 23, 17, 0.96), rgba(9, 8, 6, 0.96));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.6);
}

.auto-health-header,
.auto-health-actions,
.auto-health-food-row,
.auto-health-priority-row {
  display: flex;
  align-items: center;
}

.auto-health-header {
  justify-content: space-between;
  gap: 16px;
}

.auto-health-header h3 {
  margin: 2px 0 0;
  color: #f6ebc2;
}

.auto-health-eyebrow {
  color: #cdb269;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auto-health-warning {
  margin: -4px 0 2px;
  color: #ffb0a3;
  font-size: 0.9rem;
}

.auto-health-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 241, 224, 0.92);
}

.auto-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auto-health-grid label {
  display: grid;
  gap: 6px;
  color: rgba(245, 241, 224, 0.76);
  font-size: 0.86rem;
}

.auto-health-grid input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #f4f0df;
  background: rgba(0, 0, 0, 0.32);
}

.auto-health-threshold {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ui-border-strong, rgba(205, 178, 105, 0.42));
  border-radius: 10px;
}

.auto-health-threshold > strong {
  color: var(--ui-text-primary, #f6ebc2);
}

.auto-health-unit-switch {
  display: flex;
  gap: 4px;
}

.auto-health-unit-switch button {
  flex: 1;
  min-height: 36px;
  padding: 6px;
  border: 1px solid var(--ui-border-strong, #786037);
  border-radius: 6px;
  color: var(--ui-text-primary, #f6ebc2);
  background: var(--material-leather, #292117);
  cursor: pointer;
}

.auto-health-unit-switch button[aria-pressed="true"] {
  border-color: #d5b469;
  background: var(--material-brass, #66502a);
  box-shadow: inset 0 0 0 1px rgba(213, 180, 105, 0.35);
  font-weight: 700;
}

.auto-health-threshold-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.auto-health-threshold-input > span {
  min-width: 22px;
  color: #d5b469;
  font-weight: 700;
}

.auto-health-threshold small {
  color: var(--ui-text-muted, #beb398);
  line-height: 1.4;
}

@media (max-width: 560px) {
  .auto-health-grid { grid-template-columns: minmax(0, 1fr); }
  .auto-health-overlay { padding: 12px; }
}

.auto-health-section {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.auto-health-section > strong {
  color: #f6ebc2;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auto-health-priority-list {
  display: grid;
  gap: 6px;
}

.auto-health-priority-row,
.auto-health-food-row {
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(205, 178, 105, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.auto-health-priority-row {
  justify-content: space-between;
}

.auto-health-food-list {
  display: grid;
  gap: 8px;
}

.auto-health-category-list {
  display: grid;
  gap: 8px;
}

.auto-health-category {
  border: 1px solid rgba(205, 178, 105, 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.auto-health-category.is-open {
  border-color: rgba(205, 178, 105, 0.32);
}

.auto-health-category.has-priority {
  border-color: rgba(230, 194, 93, 0.42);
  box-shadow: inset 0 0 0 1px rgba(230, 194, 93, 0.08);
}

.auto-health-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}

.auto-health-category-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  padding: 8px 10px;
  text-align: left;
}

.auto-health-category-toggle small {
  margin-left: auto;
  color: rgba(245, 241, 224, 0.58);
  font-size: 0.78rem;
  white-space: nowrap;
}

.auto-health-category-priority,
.auto-health-priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid rgba(230, 194, 93, 0.42);
  border-radius: 999px;
  color: #f5d87d;
  background: rgba(82, 62, 18, 0.34);
  font-size: 0.78rem;
  font-weight: 900;
}

.auto-health-category-chevron {
  width: 14px;
  color: #cdb269;
}

.auto-health-category-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.auto-health-category-actions button,
.auto-health-food-row button,
.auto-health-priority-row button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 0.82rem;
}

.auto-health-category-body {
  display: grid;
  gap: 7px;
  max-height: 280px;
  overflow: auto;
  padding: 0 8px 8px;
}

.auto-health-food-row.is-empty {
  opacity: 0.55;
}

.auto-health-food-row.is-priority {
  border-color: rgba(230, 194, 93, 0.38);
  background: rgba(37, 28, 10, 0.42);
}

.auto-health-food-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.auto-health-food-name {
  min-width: 0;
  flex: 1;
  color: #f6f0dd;
}

.auto-health-food-meta {
  color: rgba(245, 241, 224, 0.72);
  font-size: 0.86rem;
  white-space: nowrap;
}

.auto-health-food-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(245, 241, 224, 0.78);
  font-size: 0.84rem;
}

.auto-health-block-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auto-health-block-mark {
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 230, 190, 0.45);
  border-radius: 4px;
  background: rgba(8, 5, 2, 0.7);
  color: rgba(255, 92, 70, 0.95);
  font-size: 12px;
  line-height: 1;
}

.auto-health-block-toggle input:checked + .auto-health-block-mark::before {
  content: "x";
  font-weight: 900;
}

.auto-health-empty {
  color: rgba(245, 241, 224, 0.62);
  font-size: 0.9rem;
}

.auto-health-actions {
  justify-content: flex-end;
}


/* =========================
   GENERIC OVERLAY WINDOW
========================= */

.overlay-window {

  background: var(--ui-bg-panel);

  border: 2px solid var(--ui-border-strong);

  border-radius: 16px;

  box-shadow: var(--ui-shadow);

  display: flex;

  flex-direction: column;

  max-height: 864px;


}


/* =========================
   GENERIC HEADER
========================= */

.overlay-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 16px;

  border-bottom: 1px solid var(--ui-border);

  background: rgba(0,0,0,0.25);

  border-top-left-radius: 14px;

  border-top-right-radius: 14px;

}

.overlay-header h2 {

  margin: 0;

  font-family: var(--font-accent);

  font-size: 18px;

  letter-spacing: 0.3px;

}


/* =========================
   CLOSE BUTTON
========================= */

.overlay-close {

  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;

}

.overlay-close:hover {

  color: #fff;

}

.overlay-close:active {

  transform: translateY(1px);

}


/* =========================
   LEVEL UP TOAST
========================= */

.level-up-toast {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: min(360px, calc(var(--canvas-visible-width, 1920px) - 28px));
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(circle at top left, rgba(143,208,255,0.26), transparent 42%),
    radial-gradient(circle at top right, rgba(246,231,176,0.18), transparent 36%),
    linear-gradient(180deg, rgba(20, 26, 36, 0.98), rgba(10, 14, 22, 0.96));
  color: #f4f8ff;
  padding: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.42);
  animation: levelUpToastIn 0.28s ease-out;
  backdrop-filter: blur(10px);
  will-change: transform, opacity;
}

/*
 * Bottom-anchored stack: grows upward. No max-height / scroll — older cards may
 * leave the top of the viewport so the newest confirm button stays clickable.
 * On dismiss, remaining cards FLIP-slide downward (JS).
 */
.level-up-toast-stack {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  width: auto;
  height: auto;
  position: fixed;
  right: 18px;
  bottom: calc(var(--bottom-bar-clearance, 64px) + 12px);
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 12px;
  max-height: none;
  overflow: visible;
  z-index: 2147483647;
  pointer-events: none;
}

.email-reminder-eyebrow,
.email-reminder-dialog h3,
.auto-health-eyebrow,
.auto-health-header h3,
.level-up-toast-badge,
.level-up-toast-range,
.level-up-toast-copy strong,
.level-up-toast-section-title,
.unlock-level-header,
.city-overview-title,
.city-overview-section-title,
.worldmap-section-heading,
.map-economy-title,
.map-trade-pressure-title,
.city-overview-pressure-title,
.worldmap-node-actions-title,
.quest-entry-title,
.quest-step-title,
.quest-entry-status,
.quest-entry-step-label,
.quest-entry-reward-label,
.worldmap-event-title,
.city-world-event-title,
.map-world-events-title {
  font-family: var(--font-accent);
}

.level-up-toast-stack > * {
  pointer-events: auto;
}

.level-up-toast.is-leaving {
  animation: levelUpToastOut 0.3s ease forwards;
}

.level-up-toast.is-important {
  border-color: rgba(246,231,176,0.34);
  box-shadow:
    0 24px 48px rgba(0,0,0,0.42),
    0 0 0 1px rgba(246,231,176,0.12);
}

.level-up-toast-glow {
  position: absolute;
  inset: auto -28px -38px auto;
  width: 130px;
  height: 130px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(246,231,176,0.18), transparent 70%);
  pointer-events: none;
}

.level-up-toast-head,
.level-up-toast-hero,
.level-up-toast-unlocks,
.level-up-toast-empty {
  position: relative;
  z-index: 1;
}

.level-up-toast-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.level-up-toast-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(246,231,176,0.14);
  border: 1px solid rgba(246,231,176,0.22);
  color: #f6e7b0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.level-up-toast-range {
  color: rgba(219, 238, 255, 0.82);
  font-size: 13px;
  font-weight: 700;
}

.level-up-toast-hero {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.level-up-toast-skill-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.level-up-toast-skill-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.level-up-toast-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.level-up-toast-copy strong {
  font-size: 20px;
  line-height: 1.1;
}

.level-up-toast-copy span {
  color: rgba(219, 238, 255, 0.72);
  font-size: 13px;
  line-height: 1.4;
}

.level-up-toast-unlocks {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.level-up-toast-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(246,231,176,0.88);
  margin-bottom: 10px;
}

.level-up-toast-unlock-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.level-up-toast-unlock-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-up-toast-unlock-level {
  font-size: 12px;
  font-weight: 700;
  color: rgba(143, 208, 255, 0.94);
}

.level-up-toast-unlock-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.level-up-toast-unlock-item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.level-up-toast-unlock-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: var(--item-extra-filter, none);
}

.level-up-toast-unlock-icon.item-composite-icon {
  filter: var(--item-extra-filter, none);
}

.level-up-toast-empty {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(219, 238, 255, 0.72);
  font-size: 13px;
}

.level-up-toast-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.level-up-toast-confirm {
  border: 1px solid rgba(246,231,176,0.24);
  background: linear-gradient(180deg, rgba(246,231,176,0.18), rgba(246,231,176,0.1));
  color: #fff7d1;
  border-radius: 12px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.level-up-toast-confirm:hover {
  background: linear-gradient(180deg, rgba(246,231,176,0.24), rgba(246,231,176,0.14));
  border-color: rgba(246,231,176,0.38);
}

.level-up-toast-confirm:active {
  transform: translateY(1px);
}

@keyframes levelUpToastIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes levelUpToastOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (max-width: 640px) {
  .level-up-toast-stack {
    left: 12px;
    right: 12px;
    bottom: calc(var(--bottom-bar-clearance, 76px) + 8px);
    max-height: none;
    overflow: visible;
    align-items: stretch;
  }

  .level-up-toast {
    width: 100%;
  }

  .level-up-toast-head,
  .level-up-toast-hero {
    grid-template-columns: 1fr;
  }

  .level-up-toast-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .level-up-toast-unlock-item {
    width: 100%;
  }
}


/* =========================
   UNLOCKS WINDOW
========================= */

.unlocks-window {

  width: 460px;

  display: flex;

  flex-direction: column;

  border-radius: 16px;

}

.unlocks-list {

  flex: 1;

  overflow-y: auto;

  padding: 12px;

}

.unlock-row {

  display: grid;

  grid-template-columns: 60px 1fr 30px;

  padding: 8px;

  border-bottom: 1px solid rgba(255,255,255,0.05);

  align-items: center;

}

.unlock-row.locked {

  opacity: 0.45;

}

.unlock-row.unlocked {

  font-weight: 500;

}

.unlock-level-header {

  margin-top: 14px;

  margin-bottom: 6px;

  color: rgba(245, 236, 214, 0.94);

  color: var(--ui-accent-soft);

  opacity: 0.9;

}

.unlock-item {

  padding: 6px 12px;

  margin-left: 8px;

  border-radius: 6px;

  font-size: 14px;

  display: flex;

  align-items: center;

  gap: 8px;

}

.unlock-item.unlocked {

  background: rgba(76,175,80,0.08);

}

.unlock-type {

  font-size: 12px;

  opacity: 0.6;

}


/* =========================
   TRAVEL CONFIRM
========================= */

#travelConfirmOverlay .overlay-content {

  background: var(--ui-bg-panel);

  padding: 22px;

  border-radius: 12px;

  border: 2px solid var(--ui-border-strong);

  width: 360px;

  text-align: center;

  z-index: 1100;

}

.travel-shortcut-options {
  display: grid;
  gap: 8px;
  margin: 14px 0 6px;
  text-align: left;
}

.travel-shortcut-options.hidden {
  display: none;
}

.travel-shortcut-title {
  color: var(--ui-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.travel-route-option {
  align-items: center;
  background: rgba(10, 7, 3, 0.55);
  border: 1px solid rgba(178, 139, 70, 0.45);
  border-radius: 8px;
  color: var(--ui-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  justify-content: space-between;
  min-height: 42px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.travel-route-segments {
  display: grid;
  gap: 6px;
}

.travel-route-total {
  align-items: center;
  background: rgba(10, 7, 3, 0.36);
  border: 1px solid rgba(178, 139, 70, 0.35);
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  min-height: 34px;
  padding: 6px 10px;
}

.travel-route-total strong {
  color: var(--ui-accent);
}

.travel-route-option span {
  display: grid;
  gap: 2px;
}

.travel-route-option em {
  font-style: normal;
}

.travel-route-option small {
  color: var(--ui-text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.travel-route-option.active {
  background: linear-gradient(180deg, rgba(110, 142, 72, 0.42), rgba(49, 74, 31, 0.55));
  border-color: rgba(186, 231, 124, 0.85);
  box-shadow: inset 0 0 0 1px rgba(219, 255, 160, 0.15);
}

.travel-route-option strong {
  color: var(--ui-accent);
  font-size: 13px;
  white-space: nowrap;
}

.travel-route-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.travel-route-actions button {
  background: rgba(10, 7, 3, 0.48);
  border: 1px solid rgba(178, 139, 70, 0.5);
  border-radius: 7px;
  color: var(--ui-text);
  cursor: pointer;
  min-height: 32px;
  padding: 6px 8px;
}


/* =========================
   DRAG CURSORS
========================= */

.character-header,
.bank-header,
.unlocks-header {

  cursor: grab;

  user-select: none;

}

.character-header:active,
.bank-header:active,
.unlocks-header:active {

  cursor: grabbing;

}


/* =========================
   WORLDMAP
========================= */

.worldmap {
  position: relative;
  width: 900px;
  min-width: 900px;
  max-width: 900px;
  height: 600px;
  min-height: 600px;
  max-height: 600px;
  flex: 0 0 auto;
  background: url("/releases/2026.11.02-01/frontend/assets/ui/worldmap.jpg") center/cover no-repeat;
  border: 2px solid var(--ui-border-strong);
  border-radius: 14px;
  background-color: #14130b;
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.city-overview-panel {
  position: absolute;
  inset: 0;
  /* Keep the detail dialog above the world-map hero (z-index: 2000). */
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.auto-health-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

.auto-health-body > * { flex-shrink: 0; }
.auto-health-card > .auto-health-header,
.auto-health-card > .auto-health-actions { flex: 0 0 auto; }

/* Keep the viewport-sized wrapper unscaled; scale only its scrollable card. */
#worldMapOverlay > .city-overview-panel {
  zoom: 1;
  box-sizing: border-box;
  padding: calc(var(--ui-topbar-height, 48px) + 14px) 16px calc(var(--bottom-bar-clearance, 60px) + 14px);
}
#worldMapOverlay .city-overview-card {
  zoom: var(--ui-user-scale, 1);
  max-height: calc((var(--canvas-visible-height, 100dvh) - var(--ui-topbar-height, 48px) - var(--bottom-bar-clearance, 60px) - 28px) / var(--ui-user-scale, 1));
  width: min(560px, calc((100vw - 32px) / var(--ui-user-scale, 1)));
  min-height: 0;
}

.city-overview-card {
  width: min(560px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  pointer-events: auto;
  position: relative;
  border-radius: 14px;
  padding: 20px;
  background: rgba(18, 18, 18, 0.97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  color: #fff;
}

.city-overview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.city-overview-header {
  margin-bottom: 18px;
}

.city-overview-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.city-overview-subtitle {
  font-size: 14px;
  opacity: 0.75;
}

.city-overview-meta {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.city-overview-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.city-overview-meta-label {
  opacity: 0.8;
}

.city-overview-meta-value {
  font-weight: 600;
}

.city-overview-section {
  margin-bottom: 20px;
}

.city-overview-section-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.city-overview-economy-grid {
  display: grid;
  gap: 6px;
}

.city-overview-economy-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.city-overview-economy-label {
  opacity: 0.9;
}

.city-overview-economy-value {
  font-weight: 700;
}

.city-overview-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.city-overview-btn {
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
}

.city-overview-btn.secondary {
  opacity: 0.85;
}

.city-overview-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.map-economy-empty,
.city-overview-empty {
  opacity: 0.7;
  font-size: 12px;
}

.city-overview-empty.small {
  font-size: 11px;
}

.map-trade-pressure {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.map-trade-pressure-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.map-trade-pressure-block {
  margin-bottom: 6px;
}

.map-trade-pressure-subtitle {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
  margin-bottom: 3px;
}

.map-trade-pressure-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

.city-overview-pressure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.city-overview-pressure-column {
  display: grid;
  gap: 6px;
}

.city-overview-pressure-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.city-overview-pressure-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.map-economy-value-wrapper,
.city-overview-economy-value-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.economy-trend {
  display: inline-block;
  min-width: 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}

.economy-trend-up {
  color: #e05a5a;
}

.economy-trend-down {
  color: #58c26f;
}

.economy-trend-neutral {
  color: rgba(255, 255, 255, 0.35);
}

.city-overview-pressure-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.city-overview-routes-grid {
  display: grid;
  gap: 8px;
}

.city-overview-route-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
}

.city-overview-route-row div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.city-overview-route-row strong {
  color: rgba(246, 239, 220, 0.94);
  font-size: 12px;
}

.city-overview-route-row span,
.city-overview-route-row small {
  color: rgba(246, 239, 220, 0.66);
  font-size: 11px;
}

.city-overview-pressure-column {
  display: grid;
  gap: 6px;
  align-content: start;
}

.city-overview-pressure-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
/* =========================
   WORLDMAP WINDOW REFRESH
========================= */

#worldMapOverlay {
  align-items: flex-start;
  justify-content: center;
  bottom: 60px;
  padding-top: 56px;
  padding-bottom: 12px;
  pointer-events: none;
}

#worldMapContent {
  width: fit-content;
  max-width: calc(var(--canvas-visible-width, 1920px) - 24px);
  pointer-events: auto;
}

body.worldmap-overlay-open #bankOverlay:not(.hidden),
body.worldmap-overlay-open #inventoryOverlay:not(.hidden),
body.worldmap-overlay-open #characterOverlay:not(.hidden),
body.worldmap-overlay-open #questOverlay:not(.hidden),
body.worldmap-overlay-open #journalOverlay:not(.hidden),
body.worldmap-overlay-open #settingsOverlay:not(.hidden) {
  z-index: 900;
}

.worldmap-window {
  width: min(1120px, calc(var(--canvas-visible-width, 1920px) - 48px));
  max-height: 950px;
  overflow: visible;
}

.worldmap-hero {
  position: relative;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at left center, rgba(126, 170, 136, 0.14), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12));
}

.worldmap-hero-actions {
  position: relative;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  flex: 0 1 auto;
}

.worldmap-hero-badge {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
}

.worldmap-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 14px;
  overflow: visible;
}

.worldmap-dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: 12px;
  align-items: start;
  flex-shrink: 0;
}

.worldmap-dashboard-card {
  min-width: 0;
}

.worldmap-overview-card {
  flex-shrink: 0;
}

.worldmap-overview-grid {
  margin-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: 60px;
}

.worldmap-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.worldmap-overview-card .view-stat-pill {
  min-width: 0;
  padding: 0px 0px;
}

.worldmap-overview-card .view-stat-pill strong {
  font-size: 15px;
  line-height: 1.1;
}

.worldmap-stage {
  flex: 1;
  min-height: 0;
  padding: 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(10, 10, 8, 0.22);
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: visible;
}

.worldmap-stage-toolbar {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 14, 10, 0.66);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.worldmap-layer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(246, 239, 220, 0.72);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.worldmap-layer-btn strong {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(246, 239, 220, 0.88);
  font-size: 10px;
}

.worldmap-layer-btn.is-active {
  background: rgba(214, 187, 106, 0.18);
  color: #fff1c2;
}

.worldmap-layer-btn:not(.is-active) {
  opacity: 0.58;
}

.worldmap-activity-svg {
  position: absolute;
  inset: 0;
  z-index: 36;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.worldmap-route-layer {
  opacity: 1;
  animation: worldmapRouteDash 9s steps(108, end) infinite;
}

.worldmap-route-line {
  stroke: rgba(242, 204, 126, 0.28);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 5 9;
  filter: none;
  animation: none;
}

.worldmap-route-line-active {
  stroke: rgba(255, 230, 154, 0.38);
  stroke-width: 2.2;
  stroke-dasharray: none;
  animation: none;
}

.worldmap-route-cargo {
  opacity: 0.96;
  pointer-events: visiblePainted;
  cursor: help;
  filter: drop-shadow(0 0 6px rgba(255, 206, 116, 0.64)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.74));
}

.worldmap-route.is-player-shipment .worldmap-route-line {
  stroke: rgba(126, 224, 118, 0.54);
  stroke-width: 2.8;
  stroke-dasharray: 7 8;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(109, 224, 98, 0.32));
}

.worldmap-route.is-player-shipment .worldmap-route-cargo {
  opacity: 1;
  filter:
    drop-shadow(0 0 8px rgba(101, 231, 106, 0.74))
    drop-shadow(0 0 3px rgba(126, 224, 118, 0.8))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8));
}

.worldmap-route.is-player-shipment .worldmap-route-label {
  fill: rgba(216, 255, 190, 0.94);
  stroke: rgba(7, 26, 8, 0.88);
}

.worldmap-route-label {
  fill: rgba(255, 244, 210, 0.88);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  font-size: 11px;
  font-weight: 1000;
  paint-order: stroke;
  stroke: rgba(9, 8, 5, 0.76);
  stroke-width: 3px;
}

.worldmap-route-cargo:hover + .worldmap-route-label {
  opacity: 1;
  visibility: visible;
}

.worldmap-event-marker {
  position: absolute;
  z-index: 220;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #1b1208;
  cursor: pointer;
}

.worldmap-event-marker-pulse,
.worldmap-event-marker-core {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.worldmap-event-marker-pulse {
  background: rgba(234, 167, 86, 0.18);
  border: 1px solid rgba(255, 217, 140, 0.42);
  animation: worldmapEventPulse 2.4s ease-out infinite;
}

.worldmap-event-marker-core {
  inset: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2c76f;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 0 14px rgba(242, 199, 111, 0.55);
}

.worldmap-event-marker.phase-impact .worldmap-event-marker-pulse {
  background: rgba(220, 92, 66, 0.2);
  border-color: rgba(255, 162, 128, 0.5);
}

.worldmap-event-marker.phase-impact .worldmap-event-marker-core {
  background: #e99270;
}

.worldmap-activity-popover {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  display: none;
  min-width: 190px;
  transform: translateX(-50%);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(17, 15, 10, 0.94);
  color: rgba(246, 239, 220, 0.9);
  text-align: left;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
  pointer-events: none;
  z-index: 900;
}

.worldmap-activity-popover strong,
.worldmap-activity-popover span,
.worldmap-activity-popover small {
  display: block;
}

.worldmap-activity-popover strong {
  color: #fff3c7;
  font-size: 13px;
}

.worldmap-activity-popover span,
.worldmap-activity-popover small {
  margin-top: 4px;
  font-size: 11px;
}

.worldmap-event-marker:hover .worldmap-activity-popover {
  display: block;
}

.worldmap-event-marker:hover {
  z-index: 850;
}

.quest-observation-overlay {
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 20px;
}

.quest-observation-card {
  width: min(520px, calc(100vw - 40px));
  padding: 28px 30px 24px;
  color: #eee5cf;
  background: linear-gradient(145deg, rgba(35, 29, 20, 0.98), rgba(18, 16, 13, 0.98));
  border: 1px solid rgba(207, 170, 92, 0.68);
  border-radius: 8px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.62), inset 0 0 35px rgba(178, 132, 56, 0.07);
}

.quest-observation-kicker {
  color: #cfae6a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.quest-observation-card h2 {
  margin: 8px 0 14px;
  color: #f4ead2;
  font-size: clamp(22px, 3vw, 30px);
}

.quest-observation-card p {
  margin: 0;
  white-space: pre-line;
  color: #d8cfbc;
  font-size: 16px;
  line-height: 1.65;
}

.quest-observation-continue {
  display: block;
  min-width: 120px;
  margin: 24px 0 0 auto;
}

.worldmap-community-project-marker {
  cursor: default;
}

.worldmap-community-project-marker .worldmap-event-marker-core {
  background: #d7a94f;
  box-shadow: 0 0 18px rgba(239, 190, 91, 0.72);
}

.worldmap-community-project-marker .worldmap-event-marker-pulse {
  border-color: rgba(255, 220, 139, 0.68);
  background: rgba(220, 166, 69, 0.24);
}

.worldmap-activity-menu {
  position: relative;
  z-index: 90;
  flex: 0 0 auto;
}

.worldmap-activity-menu.is-open {
  z-index: 1600;
}

.worldmap-activity-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 226, 158, 0.22);
  border-radius: 12px;
  background: rgba(12, 12, 8, 0.76);
  color: rgba(255, 244, 210, 0.94);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  font-family: inherit;
  font-weight: 1000;
  backdrop-filter: blur(8px);
}

.worldmap-activity-menu-toggle:hover,
.worldmap-activity-menu.is-open .worldmap-activity-menu-toggle {
  border-color: rgba(255, 226, 158, 0.44);
  background: rgba(42, 34, 18, 0.88);
}

.worldmap-activity-menu-toggle span {
  font-size: 12px;
  letter-spacing: 0;
}

.worldmap-activity-menu-toggle strong {
  min-width: 24px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 226, 158, 0.14);
  color: #ffe4a8;
  font-size: 11px;
  text-align: center;
}

.worldmap-activity-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1601;
  width: min(430px, calc(var(--canvas-visible-width, 1920px) - 72px));
  max-height: min(380px, 583px);
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255, 226, 158, 0.24);
  border-radius: 14px;
  background: rgba(12, 12, 8, 0.97);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(12px);
}

.worldmap-activity-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.worldmap-activity-menu-head strong {
  color: rgba(255, 244, 210, 0.96);
  font-size: 13px;
}

.worldmap-activity-menu-head button {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 239, 220, 0.72);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 9px;
}

.worldmap-activity-menu-sections {
  display: grid;
  gap: 12px;
}

.worldmap-activity-menu-sections section {
  display: grid;
  gap: 6px;
}

.worldmap-activity-menu-sections h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: rgba(246, 239, 220, 0.64);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.worldmap-activity-menu-sections h4 span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 226, 158, 0.12);
  color: #ffe4a8;
  text-align: center;
}

.worldmap-activity-menu-row,
.worldmap-activity-menu-empty {
  padding: 8px 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.045);
}

.worldmap-activity-menu-row {
  display: grid;
  gap: 2px;
}

.worldmap-activity-menu-row.is-player-shipment {
  border: 1px solid rgba(126, 224, 118, 0.18);
  background:
    linear-gradient(135deg, rgba(126, 224, 118, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.worldmap-activity-menu-row span,
.worldmap-activity-menu-row small,
.worldmap-activity-menu-empty {
  color: rgba(246, 239, 220, 0.62);
  font-size: 10px;
  font-weight: 900;
}

.worldmap-activity-menu-row span {
  text-transform: uppercase;
}

.worldmap-activity-menu-row strong {
  overflow: hidden;
  color: rgba(255, 244, 210, 0.94);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worldmap {
  position: relative;
  width: 900px;
  min-width: 900px;
  max-width: 900px;
  height: 600px;
  min-height: 600px;
  max-height: 600px;
  flex: 0 0 auto;
  background: url("/releases/2026.11.02-01/frontend/assets/ui/worldmap.jpg") center/cover no-repeat;
  border: 2px solid var(--ui-border-strong);
  border-radius: 14px;
  background-color: #14130b;
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.map-node {
  position: absolute;
  z-index: 25;
  transform: translate(-50%, -50%);
  display: block;
  cursor: pointer;
  overflow: visible;
}

.map-icon {
  display: block;
  width: 64px;
  height: 64px;
  pointer-events: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.map-label {
  position: absolute;
  left: 50%;
  top: calc(100% - 4px);
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(12, 11, 8, 0.62);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.map-node:hover {
  cursor: pointer;
  z-index: 2100;
}

.map-node:hover .map-icon {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px rgba(255,220,120,0.6));
}

.map-node:hover .map-label {
  transform: translateX(-50%) translateY(-1px);
  color: #fff3b0;
  text-shadow:
    0 0 4px black,
    0 0 12px rgba(255,220,120,0.6);
}

.map-node.current .map-icon {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 10px var(--ui-accent))
    drop-shadow(0 0 18px var(--ui-accent));
  transform: scale(1.22);
}

.map-node.current {
  z-index: 1200 !important;
  isolation: isolate;
}

.map-node.current::before {
  position: absolute;
  z-index: 0;
  top: 40px;
  right: -18px;
  bottom: -10px;
  left: -18px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(188, 157, 78, 0.48) 0%, rgba(129, 102, 42, 0.3) 42%, transparent 74%);
  filter: blur(5px);
  content: '';
  pointer-events: none;
}

.map-current-player-marker {
  position: relative;
  z-index: 1;
  display: inline-grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(242, 219, 152, 0.94);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(74, 55, 27, 0.96), rgba(30, 20, 10, 0.98));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.62);
}

.map-current-player-marker img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.map-node.current .map-label {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ui-accent-soft);
  text-shadow:
    0 0 4px black,
    0 0 10px var(--ui-accent);
}

.map-economy-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  transform: none;
  min-width: 220px;
  max-width: min(280px, 922px);
  overflow: visible;
  padding: 12px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(28, 25, 18, 0.98), rgba(14, 13, 10, 0.96));
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 12px;
  z-index: 2110;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.36);
  white-space: normal;
}

.map-economy-tooltip.open-up {
  top: 0;
  bottom: auto;
}

.map-economy-tooltip.open-down {
  top: 0;
  bottom: auto;
}

.map-economy-tooltip.open-left {
  left: 0;
  right: auto;
  transform: none;
}

.map-economy-tooltip.open-right {
  left: 0;
  right: auto;
  transform: none;
}

.map-economy-tooltip.hidden {
  display: none;
}

.map-node:hover .map-economy-tooltip {
  display: block;
  z-index: 2110;
}

.map-economy-title {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 14px;
}

.map-economy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}

.map-economy-row:last-child {
  margin-bottom: 0;
}

.map-economy-label {
  opacity: 0.9;
}

.map-economy-value {
  font-weight: 600;
}

.map-trade-pressure {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.map-trade-pressure-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.map-trade-pressure-block {
  margin-bottom: 6px;
}

.map-trade-pressure-subtitle {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
  margin-bottom: 3px;
}

.map-trade-pressure-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
}

.worldmap-node-actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  pointer-events: auto;
}

.worldmap-node-actions-card {
  min-width: 260px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  pointer-events: auto;
}

.worldmap-node-actions-title {
  margin-bottom: 8px;
  text-align: left;
  color: var(--ui-text);
}

.worldmap-node-actions-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(12, 10, 6, 0.34);
  color: rgba(246, 239, 220, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.worldmap-node-actions-meta strong {
  color: #fff1c2;
  font-size: 12px;
}

.worldmap-node-actions-card .worldmap-node-action-btn {
  width: 100%;
}

.city-overview-card {
  width: min(680px, calc(100% - 40px));
  max-height: calc(100% - 40px);
  padding: 18px;
  gap: 14px;
  background: var(--ui-bg-panel);
  border: 2px solid var(--ui-border-strong);
}

.city-overview-header {
  margin: 0;
  padding-right: 44px;
}

.city-overview-title {
  line-height: 1.05;
}

.city-overview-subtitle {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.city-overview-meta {
  gap: 10px;
  margin: 0;
}

.city-overview-meta-row,
.city-overview-pressure-row,
.city-overview-economy-row {
  align-items: center;
}

.city-overview-section {
  margin: 0;
}

.city-overview-economy-grid,
.city-overview-pressure-column {
  gap: 8px;
}

.city-overview-economy-row,
.city-overview-pressure-row {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}

.city-overview-actions {
  margin-top: 4px;
}

.quest-window {
  min-width: 680px;
  max-width: 1180px;
}

.quest-log-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: start;
}

.quest-log-main-column,
.quest-log-daily-column {
  min-width: 0;
}

.quest-section + .quest-section {
  margin-top: 14px;
}

.quest-log-daily-column .quest-section + .quest-section {
  margin-top: 0;
}

.quest-auto-track-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: rgba(244, 237, 220, 0.84);
  font-size: 0.86rem;
  cursor: pointer;
}

.quest-auto-track-option input {
  accent-color: #afc77a;
}

.quest-entry {
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 10px;
}

.quest-entry.completed {
  opacity: 0.72;
}

.quest-entry.daily {
  border: 1px solid rgba(112, 177, 224, 0.28);
  background:
    linear-gradient(135deg, rgba(40, 76, 104, 0.12), rgba(218, 197, 113, 0.045)),
    rgba(255, 255, 255, 0.035);
  color: rgba(246, 239, 220, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.035),
    0 14px 30px rgba(0,0,0,0.22);
}

.quest-entry.daily * {
  color: inherit;
}

.quest-entry.daily .quest-entry-title {
  min-width: 0;
  color: rgba(255, 246, 219, 0.98);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-entry.daily .quest-entry-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid rgba(135, 190, 230, 0.42);
  border-radius: 999px;
  background: rgba(11, 31, 45, 0.74);
  color: rgba(182, 222, 250, 0.96);
  font-size: 0.74rem;
  font-weight: 800;
  opacity: 1;
}

.quest-daily-objective {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(217, 197, 130, 0.2);
  border-radius: 8px;
  background: rgba(10, 8, 5, 0.42);
}

.quest-daily-objective-title {
  color: rgba(209, 178, 105, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quest-daily-objective-main {
  color: rgba(255, 247, 226, 0.97);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.22;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-daily-targets {
  margin-top: 2px;
  gap: 4px 10px;
  color: rgba(232, 222, 199, 0.76);
}

.quest-daily-targets span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-daily-targets strong {
  color: rgba(185, 214, 150, 0.86);
  font-weight: 900;
}

@media (max-width: 980px) {
  .quest-log-layout {
    grid-template-columns: 1fr;
  }
}

.quest-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.quest-entry-title {
  font-size: 1rem;
}

.quest-entry-status {
  font-size: 0.85rem;
  opacity: 0.8;
}

.quest-entry-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quest-track-button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(213, 187, 115, 0.36);
  border-radius: 6px;
  background: rgba(48, 35, 20, 0.62);
  color: rgba(247, 231, 187, 0.94);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.quest-track-button.is-tracked {
  border-color: rgba(180, 213, 112, 0.66);
  background: rgba(101, 137, 58, 0.28);
  color: #e2f0bd;
}

.quest-tracker {
  display: flex;
  width: min(290px, calc(var(--canvas-visible-width, 1920px) - 32px));
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px 12px 16px;
  border-left: 2px solid rgba(220, 190, 101, 0.7);
  background: linear-gradient(90deg, rgba(20, 15, 10, 0.58), rgba(20, 15, 10, 0.14) 88%, transparent);
  color: rgba(250, 242, 222, 0.95);
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
  transition: opacity 0.12s ease, visibility 0.12s ease;
}


.quest-tracker-kicker {
  color: rgba(233, 205, 124, 0.9);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quest-tracker-title {
  font-size: 15px;
  line-height: 1.2;
}

.quest-tracker-objective {
  color: rgba(246, 239, 220, 0.84);
  font-size: 13px;
  line-height: 1.35;
}

.quest-tracker-objective.is-complete {
  color: #cfe8a4;
  font-weight: 800;
}

.quest-entry-description {
  margin-top: 8px;
  white-space: pre-line;
  opacity: 0.88;
}

.quest-entry-step,
.quest-entry-rewards {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quest-entry-step-label,
.quest-entry-reward-label {
  font-size: 0.82rem;
  opacity: 0.72;
}

.quest-entry-steps {
  margin-top: 12px;
}

.quest-step-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest-step {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.quest-step.is-current {
  border-color: rgba(196, 216, 137, 0.28);
  background: rgba(128, 167, 64, 0.08);
}

.quest-step.is-complete {
  background: rgba(101, 132, 55, 0.08);
  border-color: rgba(162, 201, 93, 0.18);
}

.quest-step-header,
.quest-step-title-row,
.quest-objective {
  display: flex;
  align-items: center;
}

.quest-step-header {
  justify-content: space-between;
  gap: 10px;
}

.quest-step-title-row {
  gap: 8px;
  min-width: 0;
}

.quest-step-check,
.quest-objective-check {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  font-size: 0.72rem;
  line-height: 1;
}

.quest-step-check {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

.quest-step.is-current .quest-step-check,
.quest-step.is-complete .quest-step-check,
.quest-objective.is-complete .quest-objective-check {
  background: rgba(160, 204, 93, 0.2);
  color: #d3e8a2;
}

.quest-step-title {
  font-size: 0.95rem;
}

.quest-step-status,
.quest-objective-meta {
  font-size: 0.78rem;
  opacity: 0.72;
  white-space: nowrap;
}

.quest-objective-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quest-objective {
  gap: 8px;
}

.quest-objective-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  opacity: 0.92;
}

.quest-objective-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.76rem;
  line-height: 1.25;
  opacity: 0.74;
}

.quest-objective-targets strong {
  color: #c7d991;
  font-weight: 700;
}

.quest-objective.is-complete .quest-objective-copy {
  opacity: 0.72;
}
.quest-reward-coins {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quest-reward-coin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quest-reward-coin img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* =========================
   TRAVELER'S JOURNAL
========================= */

.journal-window {
  width: min(1280px, calc((var(--canvas-visible-width, 1920px) / var(--ui-user-scale, 1)) - 64px));
  max-height: min(820px, calc((var(--canvas-visible-height, 1080px) / var(--ui-user-scale, 1)) - 104px));
  overflow: hidden;
}

.worldmap-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.worldmap.is-layout-editing .map-node {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.worldmap.is-layout-editing .map-node:active {
  cursor: grabbing;
}

.worldmap.is-layout-editing .map-economy-tooltip {
  display: none !important;
}

.worldmap-node-coords {
  display: block;
  margin-left: 5px;
  color: var(--ui-accent-soft);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.journal-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(219, 181, 104, 0.22);
}

.journal-hero h2 {
  margin: 2px 0 4px;
  font-family: var(--font-accent);
  font-size: 30px;
  line-height: 1.05;
}

.journal-hero p {
  max-width: 700px;
  margin: 0;
  color: rgba(246, 239, 220, 0.68);
  font-size: 14px;
}

.journal-layout {
  display: grid;
  grid-template-columns: 210px 300px minmax(0, 1fr);
  min-height: 0;
  padding: 16px;
  gap: 16px;
  overflow: hidden;
}

.journal-nav,
.journal-index {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
}

.journal-nav {
  grid-template-rows: auto;
  align-content: start;
}

.journal-index {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.journal-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 7px;
}

.journal-search input,
.journal-search select,
.journal-search button {
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(219, 181, 104, 0.24);
  border-radius: 9px;
  color: rgba(248, 240, 224, 0.9);
  background: rgba(0, 0, 0, 0.24);
  font: inherit;
}

.journal-search input {
  grid-column: 1 / -1;
  padding: 0 10px;
}

.journal-search select {
  padding: 0 7px;
  font-size: 11px;
}

.journal-search button {
  width: 34px;
  cursor: pointer;
}

.journal-search-result {
  align-items: start;
}

.journal-search-result em {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(246, 239, 220, 0.58);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.journal-sections,
.journal-chapters {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.journal-sections {
  align-content: start;
  min-height: 0;
  overflow: hidden auto;
  padding-right: 4px;
}

.journal-section-group {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.journal-chapters {
  align-content: start;
  min-height: 0;
  margin-left: 12px;
  padding: 0 0 4px 10px;
  border-left: 1px solid rgba(219, 181, 104, 0.18);
}

.journal-section-tab,
.journal-chapter-tab,
.journal-entry-row {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  text-align: left;
}

.journal-section-tab,
.journal-chapter-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
}

.journal-section-tab {
  padding: 11px 12px;
}

.journal-chapter-tab {
  padding: 8px 10px;
  font-size: 12px;
}

.journal-section-tab span,
.journal-chapter-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-section-tab strong,
.journal-chapter-tab strong {
  flex: 0 0 auto;
  font-size: 11px;
  color: rgba(255, 235, 176, 0.78);
}

.journal-section-tab.is-active,
.journal-chapter-tab.is-active {
  border-color: rgba(243, 215, 127, 0.5);
}

.journal-list-head {
  min-height: 44px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(219, 181, 104, 0.16);
}

.journal-list-head span,
.journal-list-head strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-list-head span {
  color: rgba(246, 239, 220, 0.5);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journal-list-head strong {
  margin-top: 2px;
  color: rgba(248, 240, 224, 0.9);
  font-size: 14px;
}

.journal-entry-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: hidden auto;
  padding-right: 4px;
}

.journal-entry-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 11px;
  opacity: 0.82;
}

.journal-firewood-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(68, 44, 21, 0.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.journal-firewood-status.is-required {
  color: #8a4118;
}

.journal-firewood-status.is-not-required {
  color: rgba(66, 86, 60, 0.86);
}

.journal-firewood-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}

.journal-knowledge-row > .journal-firewood-status {
  padding: 3px 7px;
  border: 1px solid rgba(92, 62, 30, 0.24);
  border-radius: 999px;
  background: rgba(88, 70, 28, 0.12);
}

.journal-knowledge-row > .journal-firewood-status .journal-firewood-icon {
  width: 17px;
  height: 17px;
}

.journal-entry-row.is-active,
.journal-entry-row:hover {
  opacity: 1;
}

.journal-entry-row.knowledge-1 {
  filter: saturate(0.72);
}

.journal-entry-row.is-recipe {
  filter: none;
}

.journal-entry-row span {
  min-width: 0;
}

.journal-entry-row strong,
.journal-entry-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-entry-row strong {
  color: rgba(248, 240, 224, 0.94);
  font-size: 13px;
}

.journal-entry-row small {
  margin-top: 2px;
  color: rgba(248, 240, 224, 0.58);
  font-size: 11px;
}

.journal-entry-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.journal-page {
  min-height: 0;
  overflow: auto;
  padding: 26px 30px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,0.2), transparent 32%),
    repeating-linear-gradient(1deg, rgba(75, 49, 24, 0.022) 0 2px, transparent 2px 17px),
    linear-gradient(180deg, rgba(238, 219, 176, 0.98), rgba(209, 181, 122, 0.98));
  border: 1px solid rgba(92, 62, 30, 0.28);
  color: #2f2116;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    0 18px 42px rgba(0, 0, 0, 0.22);
}

.journal-page.is-empty {
  display: grid;
  place-content: center;
  text-align: center;
}

.journal-page-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(92, 62, 30, 0.18);
}

.journal-page-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: rgba(73, 45, 20, 0.1);
  border: 1px solid rgba(92, 62, 30, 0.18);
}

.journal-page-item-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.journal-page-kicker,
.journal-block-label {
  color: rgba(75, 49, 24, 0.62);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journal-page h2 {
  margin: 3px 0 9px;
  color: #2d1f13;
  font-family: var(--font-accent);
  font-size: 34px;
  line-height: 1.05;
}

.journal-knowledge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journal-knowledge-mark {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(63, 42, 23, 0.09);
  border: 1px solid rgba(63, 42, 23, 0.12);
  color: rgba(47, 33, 22, 0.42);
  font-size: 11px;
  font-weight: 900;
}

.journal-knowledge-mark.is-unlocked {
  background: rgba(88, 70, 28, 0.18);
  border-color: rgba(92, 62, 30, 0.24);
  color: #382713;
}

.journal-printed-block,
.journal-handwritten-block {
  margin-top: 22px;
}

.journal-printed-block p {
  max-width: 74ch;
  margin: 9px 0 0;
  color: rgba(47, 33, 22, 0.86);
  font-family: var(--font-readable);
  font-size: 16px;
  line-height: 1.58;
}

.journal-entry-description {
  color: rgba(47, 33, 22, 0.62) !important;
  font-style: italic;
}

.journal-handwritten-block {
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(82, 50, 24, 0.075);
  border: 1px dashed rgba(82, 50, 24, 0.24);
}

.journal-handwritten-block .journal-block-label {
  color: rgba(78, 42, 20, 0.68);
}

.journal-handwritten-empty,
.journal-handwritten-line {
  margin: 10px 0 0;
  color: rgba(68, 37, 23, 0.78);
  font-family: "MedievalSharp", var(--font-accent);
  font-size: 17px;
  line-height: 1.5;
}

.journal-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
}

.journal-mode-tab {
  min-width: 112px;
  padding: 7px 13px;
  border-radius: 8px;
  color: rgba(246, 239, 220, 0.72);
  border: 1px solid rgba(219, 181, 104, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.journal-mode-tab.is-active {
  color: #fff0c9;
  border-color: rgba(243, 215, 127, 0.55);
  background: rgba(117, 83, 35, 0.3);
}

.journal-mode-tab.is-disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.38;
}

.journal-statistics-view {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow: auto;
}

.journal-achievements-view { padding: 16px; overflow: auto; display: grid; gap: 16px; align-content: start; }
.achievement-overview { display: flex; gap: 12px; }
.achievement-overview > div { min-width: 170px; padding: 12px 16px; border: 1px solid rgba(219,181,104,.28); border-radius: 10px; background: rgba(0,0,0,.22); display: grid; gap: 4px; }
.achievement-overview span { color: rgba(246,239,220,.62); font-size: 12px; }
.achievement-overview strong { color: #f3d77f; font-size: 20px; }
.achievement-overview > .is-points { border-color: rgba(255,212,92,.55); background: linear-gradient(135deg,rgba(112,75,20,.42),rgba(0,0,0,.22)); }
.achievement-category h3 { color: #e5c880; margin: 0 0 10px; }
.achievement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.achievement-card { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 13px; border: 1px solid rgba(219,181,104,.2); border-radius: 10px; background: rgba(10,7,4,.25); }
.achievement-card.is-locked { opacity: .58; filter: grayscale(.45); }
.achievement-card.is-unlocked { border-color: rgba(243,215,127,.48); background: rgba(91,64,28,.25); }
.achievement-card h4,.achievement-card p { margin: 0; }.achievement-card h4 { color: #fff0c9; }.achievement-card p { margin-top: 4px; color: rgba(246,239,220,.65); font-size: 12px; }
.achievement-card small { display:block; margin-top:7px; color:#e5c880; }.achievement-card em { position:absolute; top:8px; right:9px; color:#f3d77f; font-size:9px; text-transform:uppercase; }
.achievement-points { position:absolute; right:9px; bottom:8px; color:#ffd45c; font-size:11px; font-weight:700; }
.achievement-card-mark,.achievement-toast-icon,.founder-star { color:#ffd45c; text-shadow:0 0 7px rgba(255,190,44,.65); }
.achievement-progress { height:5px; margin-top:9px; border-radius:9px; background:rgba(0,0,0,.35); overflow:hidden; }.achievement-progress span { display:block; height:100%; background:#d8ad4d; }.achievement-card b { font-size:10px; color:rgba(246,239,220,.6); }
.achievement-toast-icon { font-size:30px; }.founder-star { display:inline-block; margin-left:5px; }
.character-founder-star-toggle,.character-trailblazer-icon-toggle { display:flex; align-items:center; gap:5px; cursor:pointer; font-size:11px; color:#f4df9e; }
.character-trailblazer-icon-toggle .trailblazer-icon,
.character-trailblazer-icon-toggle img.trailblazer-icon {
  width: 12px;
  height: 12px;
  max-width: 12px;
  max-height: 12px;
  margin-left: 0;
  flex: 0 0 12px;
}
@media (max-width: 900px) { .achievement-grid { grid-template-columns:1fr; } }

.journal-stat-category {
  padding: 14px;
  border: 1px solid rgba(219, 181, 104, 0.2);
  border-radius: 12px;
  background: rgba(12, 8, 5, 0.24);
}

.journal-stat-category h3 {
  margin: 0 0 11px;
  color: #e5c880;
  font-family: var(--font-accent);
  font-size: 18px;
}

.journal-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.journal-stat-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.journal-stat-card span {
  overflow: hidden;
  color: rgba(246, 239, 220, 0.58);
  font-size: 11px;
  text-overflow: ellipsis;
}

.journal-stat-card strong {
  color: #fff0c9;
  font-size: 16px;
}

.journal-stat-coins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.journal-stat-coin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.journal-stat-coin img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.journal-stat-coin b {
  color: #fff0c9;
  font-size: 14px;
}

@media (max-width: 900px) {
  .journal-statistics-view,
  .journal-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* Community projects */
.community-project-banner {
  position: absolute;
  z-index: 12;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 14px;
  min-width: min(430px, calc(100% - 150px));
  padding: 9px 14px;
  color: #f4ead2;
  border: 1px solid rgba(213, 174, 92, 0.68);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(63, 49, 30, 0.96), rgba(34, 29, 23, 0.96));
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

.community-project-banner strong { grid-row: 1 / span 2; align-self: center; }
.community-project-banner-kicker { color: #dbb96e; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.community-project-banner > span:last-child { font-size: 12px; opacity: .82; }
.community-project-banner.is-reward_active { border-color: rgba(111, 190, 123, .8); }
.community-project-banner:hover {
  transform: translateX(-50%) translateY(-1px);
  border-color: rgba(239, 205, 126, .86);
  box-shadow: 0 9px 24px rgba(0, 0, 0, 0.42), 0 0 14px rgba(205, 168, 94, 0.12);
}

.community-project-overlay {
  box-sizing: border-box;
  padding: calc(var(--ui-topbar-height, 48px) + 12px) 12px calc(var(--bottom-bar-clearance, 60px) + 12px);
}
.community-project-window {
  box-sizing: border-box;
  width: min(680px, 100%);
  max-width: 100%;
  max-height: min(780px, 100%);
  min-height: 0;
  overflow: hidden;
}
.community-project-window > .overlay-header { flex: 0 0 auto; }
.community-project-kicker { color: #cda85e; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; }
.community-project-body {
  display: grid;
  gap: 14px;
  padding: 18px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.community-project-summary, .community-project-reward { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 12px; border: 1px solid rgba(205, 168, 94, .32); background: rgba(30, 25, 19, .48); }
.community-project-resources { display: grid; gap: 12px; }
.community-project-resource { display: grid; gap: 7px; padding: 12px; border: 1px solid rgba(255,255,255,.11); border-radius: 6px; background: rgba(0,0,0,.17); }
.community-project-resource-heading, .community-project-resource-meta, .community-project-contribute-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.community-project-resource-meta { font-size: 12px; opacity: .78; }
.community-project-progress { height: 9px; overflow: hidden; border-radius: 99px; background: rgba(0,0,0,.45); }
.community-project-progress span { display: block; height: 100%; background: linear-gradient(90deg, #8c6835, #d1ad62); }
.community-project-contribute-row input { width: 130px; }
.community-project-warning { color: #d7bc83; font-size: 12px; }
.community-project-error { color: #e98273; }

@media (max-width: 700px) {
  .community-project-banner { top: 8px; min-width: calc(100% - 110px); grid-template-columns: 1fr; }
  .community-project-banner strong { grid-row: auto; }
  .community-project-resource-meta, .community-project-contribute-row { align-items: stretch; flex-direction: column; }
  .community-project-contribute-row input { width: 100%; }
}

.journal-handwritten-line.is-mastery {
  color: #66501d;
  font-weight: 700;
}

.journal-mastery-progress {
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(106, 82, 31, 0.32);
  background: rgba(165, 128, 45, 0.08);
}

.journal-mastery-progress.is-complete {
  border-color: rgba(160, 116, 20, 0.7);
  box-shadow: inset 0 0 18px rgba(190, 137, 24, 0.12);
}

.journal-mastery-progress-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.journal-mastery-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(42, 34, 20, 0.22);
}

.journal-mastery-progress-track > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8d6a21, #d1a43e);
}

.journal-mastery-benefits {
  margin-top: 10px;
}

.journal-note-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.journal-note-list li {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(82, 50, 24, 0.12);
  color: rgba(47, 33, 22, 0.76);
  font-family: "MedievalSharp", var(--font-accent);
  font-size: 15px;
}

.journal-note-list strong {
  color: #382013;
  font-weight: 800;
}

.journal-recipe-block p {
  margin: 10px 0 0;
  color: rgba(47, 33, 22, 0.82);
  font-family: var(--font-readable);
  font-size: 15px;
  line-height: 1.55;
}

.journal-recipe-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.journal-recipe-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid rgba(82, 50, 24, 0.12);
  color: rgba(47, 33, 22, 0.76);
  font-family: var(--font-readable);
  font-size: 15px;
}

.journal-recipe-list li > span {
  color: rgba(75, 49, 24, 0.58);
  font-weight: 900;
}

.journal-recipe-list strong,
.journal-recipe-list small {
  min-width: 0;
}

.journal-recipe-list strong {
  color: #382013;
  font-weight: 900;
}

.journal-recipe-list .journal-clickable-item {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(56, 32, 19, 0.35);
  text-underline-offset: 2px;
}

.journal-recipe-list .journal-clickable-item:hover {
  color: #2c180f;
  text-decoration-color: #382013;
}

.journal-recipe-list small {
  grid-column: 2;
  color: rgba(47, 33, 22, 0.58);
  font-size: 12px;
  line-height: 1.4;
}

.journal-recipe-list small .journal-clickable-item {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(56, 32, 19, 0.3);
}

.journal-recipe-list small .journal-clickable-item:hover {
  color: #382013;
  text-decoration-color: #382013;
}

.journal-recipe-list .journal-compatible-items {
  display: grid;
  gap: 4px;
}

.journal-compatible-items > b {
  color: rgba(47, 33, 22, 0.72);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.journal-compatible-level {
  display: block;
}

.journal-compatible-level > em {
  display: inline-block;
  min-width: 72px;
  color: rgba(75, 49, 24, 0.58);
  font-style: normal;
  font-weight: 800;
}

.journal-processing-variants .journal-recipe-list li {
  grid-template-columns: 72px minmax(0, 1fr);
  padding: 6px 0;
}

.journal-processing-variants .journal-recipe-list li > div {
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
}

.journal-processing-variants .journal-processing-effect {
  display: block;
  margin-top: 3px;
  color: rgba(47, 33, 22, 0.62);
  font-family: var(--font-readable);
  font-size: 12px;
  font-weight: 600;
}

.journal-recipe-meta-only .journal-note-list {
  margin-top: 0;
}

.journal-processing-variants .journal-recipe-list b {
  margin: 0 5px;
  color: rgba(75, 49, 24, 0.48);
}

.journal-empty {
  padding: 14px;
  border-radius: 12px;
  color: rgba(246, 239, 220, 0.58);
  background: rgba(255,255,255,0.04);
}

@media (max-width: 768px) {
  #worldMapOverlay {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: 10px;
    justify-content: stretch;
  }

  #worldMapContent {
    width: 100%;
    max-width: 100%;
  }

  .worldmap-window {
    width: 100%;
    max-height: calc(100cqh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 22px;
    overflow: visible;
  }

  .worldmap-hero {
    padding: 14px;
    gap: 12px;
  }

  .worldmap-hero-badge {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 24px;
  }

  .worldmap-body {
    padding: 12px;
    gap: 12px;
  }

  .worldmap-overview-grid {
    grid-template-columns: 1fr;
  }

  .worldmap-stage {
    padding: 8px;
    min-height: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: visible;
  }

  .worldmap {
    width: 900px;
    min-width: 900px;
    max-width: 900px;
    height: 600px;
    min-height: 600px;
    max-height: 600px;
  }

  .map-economy-tooltip {
    min-width: 190px;
    max-width: min(240px, 1498px);
    padding: 10px;
  }

  .city-overview-card {
    width: min(100%, calc(100% - 20px));
    max-height: calc(100% - 20px);
    padding: 14px;
    border-radius: 20px;
  }

  .city-overview-pressure-grid {
    grid-template-columns: 1fr;
  }
}



.city-overview-group {
  display: grid;
  gap: 6px;
}

.city-overview-group-toggle {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.05);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.city-overview-group-toggle:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
}

.city-overview-group-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.city-overview-group-label-wrap.solo {
  gap: 0;
}

.city-overview-group-chevron {
  width: 12px;
  text-align: center;
  opacity: 0.78;
  transition: transform 0.18s ease;
}

.city-overview-group.is-expanded .city-overview-group-chevron {
  transform: translateY(1px);
}

.city-overview-subrows {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.city-overview-subrow,
.city-overview-pressure-subrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.035);
}

.city-overview-subrow-label {
  opacity: 0.82;
  font-size: 13px;
}

.rest-overlay-window {
  width: 920px;
  max-width: calc((100vw - 32px) / var(--ui-user-scale, 1));
  max-height: min(740px, calc((100dvh - 32px) / var(--ui-user-scale, 1)));
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  zoom: var(--ui-user-scale, 1);
  container: camp-dialog / inline-size;
  overflow: hidden;
}

.rest-overlay-window > .overlay-header {
  flex: 0 0 auto;
  gap: 12px;
}

.rest-overlay-window > .overlay-header h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rest-overlay-window .overlay-close { flex: 0 0 auto; }

.rest-overlay-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.rest-overlay-body > * { flex-shrink: 0; }

.rest-overlay-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.rest-overlay-workspace.has-consumables {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.rest-overlay-copy {
  margin: 0;
  opacity: 0.86;
  line-height: 1.5;
}

.rest-overlay-summary {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.rest-overlay-workspace:not(.has-consumables) .rest-overlay-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rest-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.rest-summary-row span {
  color: rgba(245, 241, 224, 0.78);
}

.rest-summary-row strong {
  text-align: right;
  overflow-wrap: anywhere;
}

.rest-camp-consumables {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(212, 177, 114, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
}

.rest-consumable-grid {
  display: grid;
  gap: 8px;
}

.rest-consumable-grid:has(> .rest-consumable-row:nth-child(3)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rest-consumable-grid:has(> .rest-consumable-row:nth-child(3)) .rest-consumable-row {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 6px;
}

.rest-consumable-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.rest-consumable-row span {
  color: rgba(245, 241, 224, 0.78);
  font-size: 0.9rem;
}

.rest-consumable-row select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #f4f0df;
  background: rgba(0, 0, 0, 0.32);
}

.rest-camp-consumables small {
  color: rgba(245, 241, 224, 0.72);
  line-height: 1.4;
}

.rest-overlay-actions {
  display: flex;
  align-items: center;
}

.rest-overlay-actions button {
  width: 100%;
  min-height: 42px;
  white-space: normal;
}

.rest-overlay-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
  gap: 18px;
  flex: 0 0 auto;
  padding: 14px 18px;
  border-top: 1px solid var(--ui-border);
  background: rgba(0, 0, 0, 0.2);
}

.rest-overlay-timer {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.rest-progress-shell {
  display: grid;
  gap: 10px;
}

.rest-progress-shell.is-idle {
  opacity: 0.58;
}

.rest-progress-bar {
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rest-progress-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d7b46a 0%, #5ec3a5 100%);
  transition: width 90ms linear;
}

.rest-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.rest-overlay-status {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.rest-camp-event {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  padding: 14px;
  border: 1px solid rgba(212, 177, 114, 0.2);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.rest-camp-event:empty { display: none; }
.rest-camp-event h3 { margin: 0; grid-column: 1 / -1; font-size: 17px; }
.rest-camp-event p { margin: 0; grid-column: 1; line-height: 1.45; overflow-wrap: anywhere; }
.rest-camp-event button { grid-column: 2; grid-row: 2 / span 5; align-self: end; }

.camp-build-window { width: 800px; }
.camp-build-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.camp-build-option.recipe {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  text-align: left;
  white-space: normal;
}
.camp-build-option strong, .camp-build-option small { overflow-wrap: anywhere; }
.camp-build-option small { line-height: 1.45; opacity: 0.78; }

@container camp-dialog (max-width: 620px) {
  .rest-overlay-workspace.has-consumables { grid-template-columns: 1fr; }
  .rest-overlay-workspace:not(.has-consumables) .rest-overlay-summary { grid-template-columns: 1fr; }
  .rest-overlay-body { padding: 12px; gap: 12px; }
  .rest-overlay-footer { padding: 12px; gap: 12px; }
  .camp-build-list { grid-template-columns: 1fr; }
}

@container camp-dialog (max-width: 420px) {
  .rest-overlay-footer { grid-template-columns: 1fr; }
  .rest-consumable-row { grid-template-columns: 56px minmax(0, 1fr); gap: 6px; }
  .rest-consumable-grid:has(> .rest-consumable-row:nth-child(3)) { grid-template-columns: 1fr; }
  .rest-camp-event { grid-template-columns: 1fr; }
  .rest-camp-event button { grid-column: 1; grid-row: auto; }
}

.worldmap-events-card {
  display: grid;
  gap: 6px;
  position: relative;
  overflow: visible;
  z-index: 4;
  
}

.worldmap-events-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.worldmap-events-subtitle {
  opacity: 0.72;
  font-size: 11px;
  line-height: 1.3;
}

.worldmap-event-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  position: relative;
  overflow: visible;
}

.worldmap-event-feed-item,
.city-world-event-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.city-world-event-card {
  gap: 10px;
  padding: 14px 16px;
  border-color: rgba(95, 61, 24, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 239, 184, 0.34), rgba(191, 141, 64, 0.16)),
    rgba(229, 194, 119, 0.32);
  box-shadow:
    inset 0 0 0 1px rgba(255, 249, 219, 0.24),
    0 10px 22px rgba(41, 23, 10, 0.14);
}

.city-world-event-card .city-world-event-topline {
  align-items: flex-start;
}

.city-world-event-card .city-world-event-title {
  font-size: 15px;
  line-height: 1.2;
  color: #33200f;
  text-shadow: 0 1px 0 rgba(255, 243, 205, 0.42);
}

.city-world-event-card .city-world-event-phase {
  margin-top: 1px;
  background: rgba(82, 52, 19, 0.1);
  border-color: rgba(82, 52, 19, 0.16);
  color: #5a3716;
  box-shadow: inset 0 1px 0 rgba(255, 246, 210, 0.34);
}

.city-world-event-card .city-world-event-copy {
  color: rgba(43, 28, 15, 0.88);
  line-height: 1.45;
  opacity: 1;
}

.city-world-event-card .city-world-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: rgba(51, 33, 17, 0.76);
  font-size: 11px;
  opacity: 1;
}

.city-world-event-card .worldmap-event-pill {
  background: rgba(55, 34, 15, 0.18);
  border-color: rgba(55, 34, 15, 0.16);
  color: #2d1c0d;
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, 0.2);
}

.worldmap-event-feed-item {
  padding: 0;
  overflow: visible;
  position: relative;
  min-height: 72px;
}

.worldmap-event-feed-item.is-expanded {
  z-index: 10;
}

.worldmap-event-feed-summary {
  width: 100%;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.worldmap-event-feed-summary:hover {
  background: rgba(255,255,255,0.03);
}

.worldmap-event-feed-summary:focus-visible {
  outline: 1px solid rgba(214, 187, 106, 0.45);
  outline-offset: -1px;
}

.worldmap-event-feed-item.is-expanded .worldmap-event-feed-summary {
  background: rgba(255,255,255,0.035);
}

.worldmap-event-feed-details {
  display: grid;
  gap: 8px;
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(27, 28, 22, 0.98), rgba(13, 15, 12, 0.96));
  box-shadow: 0 22px 44px rgba(0,0,0,0.42);
  z-index: 8;
  backdrop-filter: blur(10px);
}

.worldmap-event-feed-topline,
.city-world-event-topline,
.map-world-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.worldmap-event-title,
.city-world-event-title,
.map-world-event-name {
  font-weight: 700;
}

.worldmap-event-phase,
.city-world-event-phase,
.map-world-event-phase {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(214, 187, 106, 0.14);
  border: 1px solid rgba(214, 187, 106, 0.2);
  color: #f1d58e;
  font-size: 11px;
  white-space: nowrap;
}

.worldmap-event-location,
.worldmap-event-copy,
.city-world-event-copy,
.city-world-event-meta {
  opacity: 0.86;
}

.worldmap-event-location,
.worldmap-event-copy,
.worldmap-event-meta,
.worldmap-event-pill {
  font-size: 11px;
}

.worldmap-event-resources,
.city-world-event-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.worldmap-event-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}

.worldmap-event-pill.muted {
  opacity: 0.72;
}

.death-summary-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(5px);
}

.death-summary-card {
  width: min(760px, calc(var(--canvas-visible-width, 1920px) - 48px));
  max-height: min(886px, 720px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(188, 72, 55, 0.34);
  background:
    radial-gradient(circle at top left, rgba(155, 63, 46, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(35, 25, 17, 0.98), rgba(13, 10, 7, 0.98));
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.68),
    inset 0 1px 0 rgba(255, 232, 196, 0.08);
  color: var(--ui-text);
}

.death-summary-head {
  display: grid;
  gap: 6px;
}

.death-summary-head span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(229, 153, 125, 0.88);
}

.death-summary-head h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 34px;
  line-height: 1;
}

.death-summary-head p {
  margin: 0;
  color: var(--ui-text-muted);
  line-height: 1.45;
}

.death-summary-stats,
.death-summary-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.death-summary-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.death-summary-stats > div,
.death-summary-panel {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(214, 184, 116, 0.14);
  background: rgba(12, 10, 7, 0.48);
}

.death-summary-stats span,
.death-summary-panel h3 {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.death-summary-stats strong {
  display: block;
  margin-top: 4px;
  color: var(--ui-text);
}

.death-summary-panel {
  display: grid;
  gap: 10px;
}

.death-summary-list {
  display: grid;
  gap: 6px;
}

.death-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.death-summary-row strong {
  color: #f0a077;
  white-space: nowrap;
}

.death-summary-empty {
  color: var(--ui-text-muted);
  font-size: 13px;
}

.worldmap-event-empty {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  opacity: 0.76;
}

.map-world-events {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.map-world-events-title {
  font-weight: 700;
  font-size: 12px;
  color: #f1d58e;
}

.city-overview-world-events {
  display: grid;
  gap: 10px;
}

.city-world-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
}

.worldmap-event-count-pill strong {
  color: #f1d58e;
}

@media (max-width: 768px) {
  .worldmap-dashboard-row {
    grid-template-columns: 1fr;
  }

  .worldmap-hero-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .worldmap-stage-toolbar {
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 14px;
  }

  .worldmap-activity-menu {
    left: auto;
    bottom: auto;
  }

  .worldmap-activity-menu-panel {
    width: min(360px, calc(var(--canvas-visible-width, 1920px) - 42px));
    max-height: 497px;
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    bottom: auto;
  }

  .worldmap-event-feed {
    grid-template-columns: 1fr;
  }

  .worldmap-event-feed-details {
    position: static;
    margin-top: -4px;
  }
}

@keyframes worldmapRouteDash {
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes worldmapEventPulse {
  0% {
    opacity: 0.8;
    transform: scale(0.65);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (min-width: 1280px) and (max-height: 1080px) {
  .worldmap-window {
    width: min(1080px, calc(var(--canvas-visible-width, 1920px) - 40px));
    max-height: 994px;
  }

  .worldmap-body {
    gap: 8px;
    padding: 10px 12px 12px;
  }

  .worldmap-dashboard-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: 8px;
  }

  .worldmap-overview-card,
  .worldmap-events-card {
    padding: 10px 12px;
  }

  .worldmap-overview-grid {
    gap: 6px;
  }

  .worldmap-overview-card .view-stat-pill {
    padding: 6px 9px;
  }

  .worldmap-overview-card .view-stat-pill strong {
    font-size: 14px;
  }

  .worldmap-events-header h3,
  .worldmap-overview-card h3 {
    font-size: 14px;
    line-height: 1.1;
  }

  .worldmap-events-subtitle {
    font-size: 10px;
    line-height: 1.2;
  }

  .worldmap-event-feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .worldmap-event-feed-item {
    min-height: 62px;
  }

  .worldmap-event-feed-summary {
    padding: 7px 9px;
    gap: 2px;
  }

  .worldmap-event-title,
  .worldmap-event-location {
    font-size: 11px;
  }

  .worldmap-event-phase {
    padding: 2px 6px;
    font-size: 9px;
  }

  .worldmap-stage {
    padding: 6px;
  }
}


.city-scene-quest-icon.is-in-progress { filter: grayscale(1); opacity: .7; }
.npc-conversation-quest-marker.is-in-progress { color: #aaa; filter: grayscale(1); }
.quest-contacts { padding: 8px 0; line-height: 1.6; }
.quest-progress-details > summary { cursor: pointer; padding: 10px 0; }

#questOverlay .quest-window.quest-modern {width:960px;max-width:calc(100vw / var(--ui-user-scale,1) - 24px);height:var(--character-quest-window-height,860px);max-height:calc((var(--canvas-visible-height,1080px) / var(--ui-user-scale,1)) - 24px);display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.quest-modern .quest-hero {flex-shrink:0;display:flex;justify-content:space-between;padding:16px 20px;}
.quest-modern .quest-tabs {display:flex;gap:6px;padding:8px 16px;flex-wrap:wrap;border-bottom:1px solid #76603b;}
.quest-tabs button {padding:8px 12px;}.quest-tabs .is-active {background:#70572b;color:#fff1cd;}
.quest-toolbar {display:flex;gap:8px;padding:12px 16px;}.quest-toolbar input {flex:1;min-width:0;}.quest-toolbar select{max-width:35%;}
.quest-modern .quest-auto-track-option {margin:0;padding:0 16px 12px;}
.quest-browser {display:grid;grid-template-columns:minmax(190px,30%) minmax(0,1fr);min-height:0;flex:1;border-top:1px solid #76603b;}
.quest-browser-list,.quest-browser-detail {overflow:auto;min-height:0;padding:12px;overscroll-behavior:contain;}
.quest-browser-list {border-right:1px solid #76603b;}.quest-browser-list button {display:block;width:100%;text-align:left;padding:12px;margin:0 0 6px;border:1px solid transparent;border-radius:6px;}
.quest-browser-list button[aria-current=true] {background:#4d3c20;border-color:#bd9a55;color:#fff0cc;}
.quest-journal-status {display:block;margin-top:5px;font-size:11px;font-weight:normal;}
.quest-journal-status.status-notStarted {color:#e8cf8b;}
.quest-journal-status.status-locked {color:#b8aaa0;}
.quest-journal-status.status-active {color:#a8cbea;}
.quest-journal-status.status-completed {color:#add08c;}
.quest-browser-detail .quest-journal-requirements {margin-top:12px;}
.quest-toolbar [hidden] {display:none;}
.quest-browser-detail .quest-entry {margin:0;}.quest-browser-detail [data-quest-back]{display:none;}
@media(max-width:650px){.quest-browser{grid-template-columns:1fr;}.quest-browser-detail{display:none;}.show-quest-detail .quest-browser-list{display:none;}.show-quest-detail .quest-browser-detail{display:block;}.quest-browser-detail [data-quest-back]{display:block;margin-bottom:12px;}.quest-toolbar{flex-wrap:wrap;}.quest-tabs button{flex:1;}}

/* Farming has its own movable workspace; only one category is shown at a time. */
.location-scene-drawer.farming-window {pointer-events:auto;position:absolute;inset:auto;transform:none;width:760px;max-width:calc(100vw / var(--ui-user-scale,1) - 24px);height:680px;max-height:calc(100vh / var(--ui-user-scale,1) - 24px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--ui-border-strong);border-radius:14px;background:var(--ui-bg-panel);box-shadow:var(--ui-shadow);zoom:var(--ui-user-scale,1);}
.farming-window-header {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;flex-shrink:0;cursor:grab;border-bottom:1px solid var(--ui-border);}
.farming-window-header>div {display:flex;align-items:center;gap:12px;}.farming-window-header img {width:36px;height:36px;object-fit:contain;}.farming-window-header h3 {font-family:var(--font-accent);margin:0;font-size:25px;}
.farming-window-tabs {display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;flex-shrink:0;border-bottom:1px solid var(--ui-border);}
.farming-window-tabs button {flex:1;padding:9px 12px;white-space:nowrap;}.farming-window-tabs button[aria-selected="true"] {background:#70572b;color:#fff1cd;border-color:#bd9a55;}
.farming-window > .farming-window-body {flex:1;min-height:0;min-width:0;box-sizing:border-box;overflow:auto;padding:20px 24px 24px;overscroll-behavior:contain;}
.farming-window .farming-panel {display:block;min-width:0;border:0;background:none;padding:0;box-shadow:none;}
.farming-window .farming-panel:has(.farming-workspace)>.location-scene-drawer-copy {display:none;}
.farming-window .farming-workspace {display:block;}.farming-window .farming-workspace>section[hidden] {display:none!important;}
.farming-window .location-scene-skill-summary {margin-bottom:16px;padding:12px 16px !important;box-sizing:border-box;gap:12px;}
.farming-window .location-scene-skill-topline {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:0;}
.farming-window .location-scene-skill-topline > span {white-space:nowrap;}


/* Journal catalog: variant comparison and independent knowledge/material filters. */
.journal-index { grid-template-rows: auto auto auto minmax(0, 1fr); }
.journal-catalog-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin: 8px 0; }
.journal-catalog-controls select, .journal-catalog-controls button {
  min-width: 0; width: 100%; min-height: 34px; border: 1px solid rgba(219,181,104,.24);
  border-radius: 9px; background: rgba(0,0,0,.24); color: #f8f0e0; font: inherit; font-size: 11px; padding: 4px 7px;
}
.journal-page button.journal-catalog-link {
  display: inline-block; text-align: left; color: #3e2b13; font: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  background: transparent; box-shadow: none; text-shadow: none;
  border: 0; padding: 4px 0; border-radius: 0; transform: none;
}
.journal-page button.journal-catalog-link:hover { color: #735018; background: transparent; }
.journal-catalog-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.journal-place-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.journal-place-mark { width: 24px; flex: 0 0 24px; align-self: center; color: #c9ae76; text-align: center; }
.journal-place-actions button:disabled { opacity: .55; cursor: default; }
.journal-place-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.journal-place-facts { list-style: none; margin: 8px 0 0; padding: 0; }
.journal-place-facts > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; padding: 10px 0; border-bottom: 1px solid rgba(78,57,27,.18); overflow-wrap: anywhere; }
.journal-place-facts > li > strong { min-width: 0; }
.journal-place-facts > li > span, .journal-place-facts > li > small { font-size: 12px; }
.journal-place-facts > li > small, .journal-place-condition, .journal-place-capacity { grid-column: 1 / -1; }
.journal-place-facts > li.is-unavailable { color: #665f51; }
.journal-place-condition { font-size: 12px; line-height: 1.5; margin: 4px 0 0; }
.journal-place-capacity { font-size: 12px; line-height: 1.5; margin: 4px 0 0; }
.journal-place-stage { font-weight: 600; }
.journal-place-recipes { grid-column: 1 / -1; margin-top: 5px; }
.journal-place-recipes summary { cursor: pointer; font-size: 13px; }
.journal-place-recipes ul { list-style: none; padding-left: 12px; }
.journal-place-recipes li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.journal-place-recipes small { font-size: 11px; }
.journal-catalog-connections { color: #3e2b13; }
.journal-catalog-connections .journal-catalog-link { display: block; }
.journal-variant-table { color: #3e2b13; overflow-x: auto; max-height: 320px; overflow-y: auto; }
.journal-variant-table table { border-collapse: collapse; width: 100%; font-size: 13px; }
.journal-variant-table th, .journal-variant-table td { text-align: left; padding: 7px 9px; border-bottom: 1px solid rgba(130,105,65,.25); }
.journal-variant-table th { color: #58401e; }
.journal-catalog-status { font-weight: 700; }
.journal-catalog-summary small { display: block; opacity: .8; }
.journal-item-properties { display: grid; gap: 6px; color: #3e2b13; }
.journal-item-properties > div { display: flex; justify-content: space-between; gap: 16px; }
.journal-item-properties dd { margin: 0; font-weight: 700; }
@media (max-width: 1000px) {
  #journalOverlay .journal-window { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); overflow: auto; }
  #journalOverlay .journal-layout { grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr); overflow: visible; }
  .journal-nav { grid-column: 1 / -1; }
  .journal-sections { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; max-height: 170px; overflow: auto; }
  .journal-section-group { flex: 1 0 130px; align-content: start; }
  .journal-section-group.is-active { flex-basis: 100%; order: 1; }
  .journal-section-group.is-active .journal-chapters { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
  .journal-chapters .journal-chapter-tab { width: auto; }
  .journal-index { max-height: 640px; }
  .journal-page { min-width: 0; }
}
@media (max-width: 600px) {
  #journalOverlay .journal-layout { grid-template-columns: minmax(0, 1fr); }
  .journal-catalog-controls { grid-template-columns: minmax(0, 1fr); }
  .journal-index { max-height: 380px; }
  .journal-page { grid-column: 1; }
}
/* Override the later material theme's fixed desktop dimensions on compact screens. */
@media (max-width: 1000px) {
  #journalOverlay .game-window.journal-window {
    min-height: 0; height: calc(100vh - 24px); max-height: calc(100vh - 24px);
    top: auto; left: auto; transform: none; overflow: auto; box-sizing: border-box;
  }
  #journalOverlay .journal-window .journal-layout {
    grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
  }
  #journalOverlay .journal-window .journal-hero { flex-shrink: 0; }
}
@media (max-width: 600px) {
  #journalOverlay .journal-window .journal-layout { display: block; flex: none; }
  #journalOverlay .journal-window .journal-nav { margin-bottom: 12px; }
  #journalOverlay .journal-window .journal-index { display: block; max-height: none; margin-bottom: 16px; }
  #journalOverlay .journal-window .journal-entry-list { max-height: 210px; overflow: auto; margin-top: 8px; }
  #journalOverlay .journal-window .journal-page { max-height: none; overflow: visible; padding: 16px; }
  #journalOverlay .journal-window .journal-page-head { flex-wrap: wrap; }
  #journalOverlay .journal-window .journal-sections { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  #journalOverlay .journal-window .journal-section-group.is-active { grid-column: 1 / -1; }
}

/* Room for readable, configurable controls. */
.settings-controls-expanded #settings-panel-controls { min-height: min(580px, 65vh); }
#settings-panel-controls .settings-keybinding-row { min-height: 48px; gap: 20px; }
#settings-panel-controls .settings-keybinding-button { min-width: 180px; min-height: 38px; }
#settings-panel-controls .settings-keybindings-card p { line-height: 1.55; color: var(--text-muted, #c8bea9); }
.activity-tool-durability { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0; }
@media(max-width:600px) { #settings-panel-controls .settings-keybinding-button { min-width: 120px; } }

.mysticism-focus { border-top: 1px solid #655436; padding-top: 12px; }
.mysticism-focus details { margin: 10px 0; padding: 10px; border: 1px solid #655436; border-radius: 6px; }
.mysticism-focus summary { cursor: pointer; font-weight: bold; }
.mysticism-focus p { line-height: 1.5; }

.worldmap-hero-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Recipe connections need stronger specificity than the general inline link rule. */
.journal-page .journal-catalog-connections > button.journal-catalog-link {
  display: block;
}
.journal-recipe-usage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 6px 16px;
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.journal-recipe-usage-list > li {
  min-width: 0;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(130, 105, 65, .22);
}
.journal-page .journal-recipe-usage-list button.journal-catalog-link {
  display: block;
  width: 100%;
  padding: 8px 6px;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
  text-decoration: none;
}
.journal-page .journal-recipe-usage-list button.journal-catalog-link:hover {
  background: rgba(130, 105, 65, .1);
  text-decoration: underline;
}
.forestry-dialog.farming-window {
  width: min(760px, calc(100vw - 32px));
  height: min(760px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  color: var(--text-main, #dfd2ae);
}
.forestry-dialog[open] { display: flex; flex-direction: column; }
.forestry-dialog .farming-window-header > div { display: flex; align-items: center; gap: 12px; }
.forestry-dialog .farming-window-header img { width: 32px; height: 32px; object-fit: contain; }
.forestry-dialog .farming-window-header h3 { margin: 0; }
.forestry-dialog .forestry-grid { display: grid; gap: 10px; }
.forestry-dialog .forestry-plot { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
.forestry-dialog .forestry-plot h3 { margin: 0 0 4px; }
.forestry-dialog .forestry-plot p { margin: 6px 0; }
.forestry-dialog .forestry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.forestry-dialog .forestry-plot-body select { max-width: 100%; min-height: 32px; }
.forestry-dialog .farming-plot-action-group { flex-wrap: wrap; }
.forestry-dialog [data-error]:empty { display: none; }
.forestry-dialog [data-error] { color: #e7a997; }

/* Keep the prepared soil beneath every living tree stage, including harvest. */
.forestry-dialog .forestry-composite-icon {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.forestry-dialog .forestry-composite-icon > .forestry-icon-ground {
  position: absolute;
  width: 100%;
  height: 65%;
  left: 0;
  bottom: 0;
  object-fit: contain;
  z-index: 0;
}
.forestry-dialog .forestry-composite-icon > .forestry-icon-tree {
  position: absolute;
  width: 86%;
  height: 86%;
  left: 7%;
  bottom: 16%;
  object-fit: contain;
  z-index: 1;
}

/* Mysticism: property-based ingredients share the inventory slot presentation. */
.mysticism-ingredient-slots { display:flex; flex-wrap:wrap; gap:14px; padding:6px 0; }
.mysticism-ingredient-choice { display:flex; flex-direction:column; align-items:center; gap:5px; width:92px; }
.mysticism-ingredient-property { font-size:12px; color:var(--mg-text-main,#dfcfac); }
.mysticism-ingredient-slot { position:relative; width:64px; height:64px; padding:6px; cursor:pointer; border:1px solid #74603a; border-radius:5px; }
.mysticism-ingredient-slot > :is(img,.item-composite-icon), .mysticism-ingredient-option .ui-slot > :is(img,.item-composite-icon) { width:44px; height:44px; object-fit:contain; }
.mysticism-ingredient-name { font-size:11px; text-align:center; line-height:1.25; overflow-wrap:anywhere; }
.mysticism-ingredient-count { position:absolute; right:3px; bottom:2px; padding:0 2px; font-size:11px; color:#eee0bf; background:#191711d9; border-radius:2px; }
.mysticism-ingredient-slot.is-missing .mysticism-ingredient-count { color:#ff746b; }
.mysticism-ingredient-slot.is-compatible-item { outline:2px solid #c9b45c; box-shadow:0 0 14px #e6c25699 !important; }
.mysticism-ingredient-slot.is-compatible-item.is-item-pointer-drop-target { outline-color:#c8e59c; box-shadow:0 0 18px #a7d96baa !important; }
.mysticism-ingredient-picker { position:fixed; z-index:100000; box-sizing:border-box; overflow:auto; padding:12px; border:1px solid #a48b52; border-radius:7px; background:#211e18; color:#dfcfac; box-shadow:0 8px 28px #000b; }
.cooking-ingredient-quality { color:var(--gold-light, #d9c190); font-size:10px; line-height:1.3; text-align:center; }
/* Fixed and selectable inputs share label, slot, name and quality rows. */
.processing-workbench .mysticism-ingredient-slots {
  display:grid;
  grid-template-columns:repeat(auto-fill,92px);
  column-gap:14px;
  row-gap:5px;
}
.processing-workbench .mysticism-ingredient-choice {
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 4;
  justify-items:center;
  align-items:start;
  gap:5px;
}
.processing-workbench .mysticism-ingredient-choice > .mysticism-ingredient-property { grid-row:1; text-align:center; overflow-wrap:anywhere; max-width:92px; }
.processing-workbench .mysticism-ingredient-choice > .mysticism-ingredient-slot { grid-row:2; }
.processing-workbench .mysticism-ingredient-choice > .mysticism-ingredient-name { grid-row:3; }
.processing-workbench .mysticism-ingredient-choice > .cooking-ingredient-quality { grid-row:4; }
.cooking-ingredient-search { width:100%; min-width:0; margin:10px 0; padding:7px 9px; border:1px solid #66523b; border-radius:4px; background:#18130e; color:#e9d7b4; }
.cooking-ingredient-picker .cooking-ingredient-clear { margin-bottom:9px; }
.mysticism-ingredient-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:9px; margin-top:10px; }
.mysticism-ingredient-option { display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px; background:transparent; color:inherit; border:1px solid transparent; border-radius:5px; cursor:pointer; font:inherit; font-size:11px; text-align:center; }
.mysticism-ingredient-option > .ui-slot { display:flex; align-items:center; justify-content:center; position:relative; width:58px; height:58px; box-sizing:border-box; border:1px solid #74603a; border-radius:4px; }
.mysticism-ingredient-option:hover, .mysticism-ingredient-option:focus-visible, .mysticism-ingredient-option[aria-pressed=true] { border-color:#c4a361; background:#c4a36118; }
.mysticism-ingredient-option small { color:#b8a985; }
.processing-material-choices .mysticism-ingredient-option { width:92px; }
.processing-material-choices .mysticism-ingredient-option:disabled { opacity:.45; cursor:default; }
.processing-workbench button.mysticism-ingredient-slot,
.recipe-detail .processing-material-selection button.ui-slot {
  padding:6px;
  border:1px solid #74603a;
  background-image:none !important;
  background-color:rgba(15,12,8,.65);
  box-shadow:inset 0 0 8px #0008;
}
.processing-material-selection .mysticism-ingredient-property:empty { display:none; }
.processing-material-selection.is-invalid > span,
.processing-material-selection .cooking-ingredient-choice.is-invalid,
.processing-material-selection .cooking-ingredient-choice.is-invalid > span { color:#ef7770 !important; }
.recipe-detail .processing-material-selection .cooking-ingredient-choice.is-invalid button.ui-slot {
  border-color:#dc5148 !important;
  background-color:rgba(110,22,18,.35) !important;
  box-shadow:inset 0 0 8px #8b211d80 !important;
}
.mysticism-ingredient-picker .mysticism-ingredient-option {
  background-image:none !important;
}

.mysticism-fixed-slot { display:flex; align-items:center; justify-content:center; box-sizing:border-box; cursor:default; }
.mysticism-empty-slot-mark { font-size:24px; color:#a48b52; }

/* Flat quality amounts: one row per quality, with direct input and Max. */
.quality-amounts { display:grid; gap:8px; margin:12px 0; min-width:0; }
.quality-amount-tools { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.quality-amount-tools > span { flex:1 1 100%; font-weight:600; }
.quality-amount-row { display:grid; grid-template-columns:minmax(0,1fr) 70px auto; align-items:center; gap:8px; }
.quality-amount-row label { min-width:0; font-size:13px; overflow-wrap:anywhere; }
.quality-amount-row small { display:block; opacity:.75; font-size:11px; }
.quality-amount-row input { width:100%; min-width:0; box-sizing:border-box; padding:7px; color:inherit; background:rgba(0,0,0,.22); border:1px solid #827154; border-radius:4px; }
.quality-amounts button { padding:6px 8px; font-size:12px; }
.quality-amount-row input[aria-invalid="true"] { border-color:#da7a66; }
.trade-detail-bottom:has(.quality-amounts) { display:grid; grid-template-columns:minmax(0,1fr); }
.trade-detail-bottom:has(.quality-amounts) .trade-detail-actions { justify-content:space-between; align-items:center; gap:12px; }
#npcTradeOverlay .trade-focus-panel .trade-detail-card:has(.quality-amounts) { gap:8px; padding:12px; }
#npcTradeOverlay .trade-focus-panel .trade-detail-card:has(.quality-amounts) .trade-detail-head { flex-direction:row; align-items:center; gap:10px; }
#npcTradeOverlay .trade-focus-panel .trade-detail-card:has(.quality-amounts) .trade-detail-art { width:54px; height:54px; flex:0 0 54px; }
#npcTradeOverlay .trade-focus-panel .trade-detail-card:has(.quality-amounts) .trade-detail-copy h4 { font-size:18px; }
#npcTradeOverlay .trade-focus-panel .trade-detail-card:has(.quality-amounts) .trade-detail-copy p { margin:3px 0; font-size:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#npcTradeOverlay .quality-amounts { margin:4px 0; }
#npcTradeOverlay .quality-amount-row { grid-template-columns:minmax(0,1fr) 60px auto; gap:6px; }
#npcTradeOverlay .quality-amount-row input { background:#f0e2c5; color:#2b2117; }
.quality-stack-badge { position:absolute; top:3px; left:3px; font-size:10px; line-height:1.3; padding:1px 3px; border-radius:3px; background:rgba(0,0,0,.75); color:#e9dfc6; pointer-events:none; }
.mysticism-quality-family { display:grid; grid-column:1 / -1; gap:6px; padding:8px; border:1px solid #827154; border-radius:5px; }
.mysticism-quality-options { display:flex; flex-wrap:wrap; gap:5px; }
.mysticism-quality-options button { flex:1 1 90px; padding:7px; font-size:12px; }
.mysticism-quality-options button > :is(img,.item-composite-icon) { width:28px; height:28px; object-fit:contain; }
.mysticism-concentration-preview { display:grid; gap:10px; min-width:0; }
.mysticism-concentration-preview h5,.mysticism-container-preview h5 { margin:0; font-size:13px; color:var(--mg-text-main,#ead9b4); }
.mysticism-concentration-preview p,.mysticism-container-preview p { margin:0; line-height:1.45; overflow-wrap:anywhere; }
.mysticism-concentration-policy { display:grid; gap:5px; min-width:0; }
.mysticism-concentration-policy select { width:100%; min-width:0; max-width:100%; padding:7px; font:inherit; color:inherit; background:#282219; border:1px solid #827154; border-radius:4px; }
.mysticism-concentration-profile { display:grid; gap:6px; padding:10px; border:1px solid #827154; border-radius:5px; }
.mysticism-concentration-profile dl { display:grid; gap:5px; margin:0; }
.mysticism-concentration-profile dl > div,.mysticism-concentration-quality-plan > div { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.mysticism-concentration-profile dd { margin:0; font-weight:700; }
.mysticism-concentration-quality-plan { display:grid; gap:7px; min-width:0; padding:9px; background:#ffffff06; border-radius:4px; }
.mysticism-concentration-quality-plan strong { font-size:12px; font-variant-numeric:tabular-nums; }
.mysticism-concentration-hint { font-size:12px; color:var(--mg-text-muted,#bcae91); }
.mysticism-container-preview { display:grid; gap:7px; font-size:12px; }
/* Keep the quality plan usable on short displays while the Craft action stays fixed. */
.location-scene-drawer.processing-workbench-window:has([data-concentration-preview]) { height:min(790px,calc(var(--canvas-visible-height,1080px) - 108px)); }
@media (max-height:640px) {
  .processing-recipe-detail-layout:has([data-concentration-preview]) .processing-recipe-hero-copy p { display:none; }
  .processing-recipe-detail-layout:has([data-concentration-preview]) .processing-recipe-hero-main { grid-template-columns:52px minmax(0,1fr); }
  .processing-recipe-detail-layout:has([data-concentration-preview]) .processing-recipe-hero-icon { min-height:52px; }
  .processing-recipe-detail-layout:has([data-concentration-preview]) .processing-recipe-hero-icon :is(img,.item-composite-icon) { width:42px; height:42px; }
}