@import url('./npc-unique-portraits.css');

/* =========================
   GENERIC PANEL WINDOW
========================= */

.game-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;

  width: 900px;

  max-height: 864px;

}


/* =========================
   SECTION BLOCK
========================= */

.skill-section {

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

  border-radius: 10px;

  padding: 12px 16px;

}

.skill-section h3 {
  font-family: var(--font-accent);
  margin: 0 0 8px;

  font-size: 13px;

  opacity: 0.8;

  text-transform: uppercase;

  letter-spacing: 0.6px;

  color: var(--ui-text-muted);

}

.npc-entry-name,
.npc-dialog-speaker-kicker,
.npc-dialog-name,
.npc-dialog-body h3,
.shop-header h3,
.quest-header h3,
.quest-row-title,
.service-row-title,
.quest-complete-kicker,
.quest-complete-title,
.quest-complete-section-title,
.away-summary-kicker,
.away-summary-levelup-skill,
.story-continuation-card h2,
.story-continuation-kicker,
.shop-section-title,
.trade-window-heading,
.trade-window-header h3,
.trade-pane-title,
.trade-detail-kicker {
  font-family: var(--font-accent);
}


/* =========================
   XP BAR
========================= */

.xp-bar {

  width: 100%;

  height: 8px;

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

  border-radius: 4px;

  margin-top: 6px;

  overflow: hidden;

}

.xp-fill {

  height: 100%;

  background: linear-gradient(
    90deg,
    var(--ui-accent),
    var(--ui-accent-soft)
  );

  transition: width 0.25s ease;

}

.xp-pulse {

  filter: brightness(1.35);

}

.xp-module-pulse {
  border-color: rgba(177, 216, 107, 0.58) !important;
  box-shadow: 0 0 0 1px rgba(177, 216, 107, 0.18), 0 0 18px rgba(177, 216, 107, 0.24) !important;
}


/* =========================
   BUTTONS
========================= */

button,
.login-box button,
.enter-world-btn,
.skill-switch-btn,
.smithing-tab,
.start-resource-btn,
.bank-close,
.skill-close,
.char-close,
.overlay-close {

  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 10px;
  border: 1px solid rgba(214, 184, 116, 0.18);
  color: var(--ui-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(28, 24, 18, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 20px rgba(0,0,0,0.24);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;

}

button {
  padding: 10px 14px;
}

button:hover,
.login-box button:hover,
.enter-world-btn:hover,
.skill-switch-btn:hover,
.smithing-tab:hover,
.start-resource-btn:hover,
.bank-close:hover,
.skill-close:hover,
.char-close:hover,
.overlay-close:hover {
  transform: translateY(-1px);
  border-color: rgba(214, 184, 116, 0.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    rgba(40, 33, 22, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 12px 24px rgba(0,0,0,0.3);
}

button:active,
.login-box button:active,
.enter-world-btn:active,
.skill-switch-btn:active,
.smithing-tab:active,
.start-resource-btn:active,
.bank-close:active,
.skill-close:active,
.char-close:active,
.overlay-close:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 6px 14px rgba(0,0,0,0.2);
}

button:disabled,
.login-box button:disabled,
.enter-world-btn:disabled,
.skill-switch-btn:disabled,
.smithing-tab:disabled,
.start-resource-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    none;
}

button.primary,
.login-box button:first-of-type,
.start-resource-btn,
#startCraftBtn,
#loginBtn,
#registerBtn,
.enter-world-btn {
  color: #112015;
  border-color: rgba(173, 205, 151, 0.42);
  background:
    linear-gradient(180deg, #c7d4a4, #88a56f 54%, #5f7d4e);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 10px 24px rgba(52, 81, 42, 0.26);
}

button.primary:hover,
.login-box button:first-of-type:hover,
.start-resource-btn:hover,
#startCraftBtn:hover,
#loginBtn:hover,
#registerBtn:hover,
.enter-world-btn:hover {
  filter: saturate(1.05) brightness(1.04);
}

button.danger,
#stopBtn,
#cancelCraftBtn {
  color: #ffe7df;
  border-color: rgba(219, 110, 83, 0.36);
  background:
    linear-gradient(180deg, #a84f3f, #7c3128 60%, #56211d);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 10px 24px rgba(83, 25, 21, 0.24);
}

button.danger:hover,
#stopBtn:hover,
#cancelCraftBtn:hover {
  filter: brightness(1.06);
}

/* Lighter red tone for end-activity buttons (gathering + processing stops) */
.end-activity-btn {
  background:
    linear-gradient(180deg, #c45f4f, #9c4639 60%, #6f2f28);
  border-color: rgba(219, 110, 83, 0.5);
}

.end-activity-btn:hover {
  filter: brightness(1.08);
}

/* Calm moss-green counterpart to the red activity stop action. */
.activity-start-btn {
  color: #f3ead2;
  border-color: rgba(145, 174, 101, 0.48);
  background:
    linear-gradient(180deg, #657949, #4c6339 58%, #33472b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 10px 24px rgba(31, 53, 27, 0.24);
}

.activity-start-btn:hover:not(:disabled) {
  filter: saturate(1.04) brightness(1.08);
}

.activity-start-btn:disabled {
  filter: grayscale(0.3);
  opacity: 0.48;
}

.end-activity-hint {
  font-size: 0.72rem;
  color: #b8a17a;
  text-align: center;
  opacity: 0.85;
  margin-top: 4px;
  line-height: 1.2;
}

/* For city scene stop buttons */
.city-scene-tool-btn.end-activity-btn + .end-activity-hint {
  font-size: 0.65rem;
  margin-top: 2px;
}

#backToList,
#backBtn,
#returnBtn,
.login-box button:nth-of-type(2) {
  color: #f3e6c5;
}

/* =========================
   RESOURCE LIST'@, 1)
$content = [regex]::Replace($content, '\.resource-item \.start-resource-btn \{[\s\S]*?\}', @'
.resource-item .start-resource-btn {

  padding: 8px 14px;
  font-size: 0.9rem;
  min-width: 104px;

}
========================= */

.resource-list-section {

  margin: 1.2rem 0;

}

.resource-items {

  display: flex;

  flex-direction: column;

  gap: 0.7rem;

}

.resource-item {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 0.9rem 1.2rem;

  border-radius: 10px;

  background: rgba(40, 55, 40, 0.32);

  border: 1px solid rgba(120,160,120,0.25);

  transition: all 0.15s ease;

}

.resource-item:hover {

  background: rgba(60,80,60,0.5);

  transform: translateY(-1px);

}

.resource-item.locked {

  opacity: 0.55;

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

  border-color: rgba(140,140,140,0.2);

  pointer-events: none;

}

.resource-item .icon {

  font-size: 1.9rem;

  min-width: 40px;

}

.resource-item .info {

  flex: 1;

}

.resource-item .info strong {

  font-size: 1.05rem;

}

.resource-item .start-resource-btn {

  padding: 6px 12px;

  font-size: 0.9rem;

  background: var(--ui-accent);

  border: none;

  border-radius: 6px;

  color: white;

  cursor: pointer;

}

.resource-item .lock-icon {

  font-size: 1.6rem;

  color: #ff9800;

}


/* =========================
   FLOATING TEXT
========================= */

#floating-text-container {
  /* Native popovers default to CanvasText (black); notifications use a dark surface. */
  color: #f3ead4;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  width: auto;
  height: auto;

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 9999;

  /* Reward placement uses viewport pixels. Keeping this host outside the
     user-controlled chrome zoom prevents scaled and unscaled collision
     rectangles from being mixed at settings such as 90%. */
  zoom: 1;

}

.floating-text {
  /* Readable fallback for generic notifications, including admin command results. */
  color: #f3ead4;

  position: absolute;

  left: 50%;

  bottom: 120px;

  min-width: 220px;

  max-width: min(460px, calc(var(--canvas-visible-width, 1920px) - 40px));

  padding: 16px 20px;

  border-radius: 18px;

  font-weight: 800;

  font-size: 18px;

  line-height: 1.35;

  text-align: center;

  opacity: 0;

  transform: translate3d(-50%, 0, 0);

  animation: dopamineFloat 1.6s cubic-bezier(.2,.9,.2,1) forwards;

  text-shadow: 0 1px 0 rgba(0,0,0,0.35);

  white-space: pre-line;

  border: 1px solid rgba(255,255,255,0.18);

  box-shadow: 0 24px 60px rgba(0,0,0,0.42);

  backdrop-filter: blur(10px);

  background:
    radial-gradient(circle at top, rgba(255,255,255,0.18), transparent 56%),
    linear-gradient(180deg, rgba(31,26,14,0.94), rgba(14,12,8,0.9));

}

.floating-text.reward-burst {

  animation: none;

  transform: translate3d(-50%, 14px, 0);

  filter: blur(0);

}

.floating-text.reward-burst.is-visible {
  /* The outer node owns entry and resolution transforms. */
  animation: rewardBurstIn 0.28s cubic-bezier(.18, .95, .32, 1) forwards;
}

.floating-text.reward-burst .floating-text-content {
  display: inline-block;
  transform-origin: center;
}

.floating-text.reward-burst.is-visible .floating-text-content {
  /* Keep rewards alive and readable while they wait for the resolve burst. */
  animation:
    rewardIdleDrift 1080ms 300ms ease-in-out infinite,
    rewardSoftPulse 920ms 380ms ease-in-out infinite;
}

.floating-text.reward-burst.is-resolving {
  animation: rewardResolve 0.4s cubic-bezier(.2, .9, .3, 1) forwards;
}

.floating-text.reward-burst.is-resolving .floating-text-content {
  animation-play-state: paused;
}

/* Pure text floating rewards (no box/body).
   Stronger colored neon glow + weight for "geiler" feel.
   Pulse/shake added via animation.
*/
.floating-text.reward-burst {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 3px;
  min-width: auto !important;
  max-width: none !important;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

/* Dynamic positioned popups (smart non-overlapping placement).
   Explicit left+bottom from JS. Disable default 50% center.
*/
.floating-text.popup-dynamic {
  transform: none;
}

.floating-text.popup-dynamic.reward-burst {
  transform: translate3d(0, 14px, 0);
}

.floating-resource {

  color: #ffe39b;

  border-color: rgba(255, 190, 84, 0.34);

  box-shadow: 0 26px 60px rgba(255, 170, 70, 0.2), 0 24px 60px rgba(0,0,0,0.42);

}

.floating-xp {

  color: #8fd0ff;

  border-color: rgba(115, 198, 255, 0.34);

  box-shadow: 0 26px 60px rgba(77, 163, 255, 0.2), 0 24px 60px rgba(0,0,0,0.42);

}

.floating-coins {

  color: #ffd571;

  border-color: rgba(255, 208, 102, 0.38);

  box-shadow: 0 26px 60px rgba(255, 200, 82, 0.22), 0 24px 60px rgba(0,0,0,0.42);

}

.floating-error {

  color: #ffd0c8;

  animation: questFloatingText 4.2s cubic-bezier(.2,.9,.2,1) forwards;

  border-color: rgba(255, 97, 78, 0.58);

  box-shadow: 0 28px 72px rgba(219, 48, 35, 0.32), 0 24px 60px rgba(0,0,0,0.48);

  background:
    radial-gradient(circle at top, rgba(255, 112, 92, 0.24), transparent 56%),
    linear-gradient(180deg, rgba(66, 24, 19, 0.97), rgba(20, 10, 8, 0.94));

}

.floating-quest {

  color: #d7f0a4;

  animation: questFloatingText 4.2s cubic-bezier(.2,.9,.2,1) forwards;

  border-color: rgba(177, 218, 107, 0.42);

  box-shadow: 0 28px 70px rgba(147, 199, 73, 0.26), 0 24px 60px rgba(0,0,0,0.42);

  background:
    radial-gradient(circle at top, rgba(221, 255, 166, 0.22), transparent 56%),
    linear-gradient(180deg, rgba(28, 40, 17, 0.95), rgba(12, 18, 9, 0.92));

}

.floating-protection {

  color: #e8f8b4;

  animation: questFloatingText 5.6s cubic-bezier(.2,.9,.2,1) forwards;

  border-color: rgba(198, 232, 116, 0.58);

  box-shadow: 0 28px 76px rgba(147, 199, 73, 0.34), 0 24px 60px rgba(0,0,0,0.46);

  background:
    radial-gradient(circle at top, rgba(223, 255, 152, 0.22), transparent 56%),
    linear-gradient(180deg, rgba(42, 56, 22, 0.98), rgba(13, 18, 9, 0.94));

}

/* Neon glow + colors for pure text rewards (more "pop") */
.floating-text.reward-burst.floating-xp {
  color: #6bc02a !important;
  text-shadow:
    0 0 2px rgba(107, 192, 42, 0.38),
    0 0 4px rgba(107, 192, 42, 0.2),
    0 2px 3px rgba(0, 0, 0, 0.95) !important;
}

.floating-text.reward-burst.floating-resource {
  color: #d8b83a !important;
  text-shadow:
    0 0 2px rgba(216, 184, 58, 0.32),
    0 0 3px rgba(216, 184, 58, 0.17),
    0 2px 3px rgba(0, 0, 0, 0.95) !important;
}

/* Item gains retain the floating reward animation, with real inventory art. */
.floating-text.reward-burst.floating-item-reward-popup {
  max-width: min(460px, calc(var(--canvas-visible-width, 100vw) - 32px)) !important;
}
.floating-item-rewards {
  display: grid;
  gap: 7px;
  max-width: 100%;
  white-space: normal;
  text-align: left;
}
.floating-item-reward-heading {
  font-size: .66em;
  line-height: 1.25;
  white-space: pre-line;
}
.floating-item-reward-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.floating-item-reward-icon-frame {
  position: relative;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid var(--mg-brass, #b8925a);
  border-radius: 0;
  background: rgba(83, 57, 32, .42);
  box-shadow: 0 2px 6px rgba(31, 20, 11, .22), inset 0 0 0 1px rgba(226, 211, 174, .09);
}
.floating-item-reward-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}
.floating-item-reward-icon-frame .item-icon-badge {
  right: 1px;
  bottom: 0;
  font-size: 9px;
}
.floating-item-reward-label {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.floating-item-rewards,
.floating-item-rewards * { pointer-events: none; }

.floating-text.reward-burst.floating-coins {
  color: #e8c85a !important;
  text-shadow:
    0 0 2px rgba(232, 200, 90, 0.3),
    0 0 3px rgba(232, 200, 90, 0.15),
    0 2px 3px rgba(0, 0, 0, 0.95) !important;
}

.reward-bubble {

  position: absolute;

  width: 9px;
  height: 9px;
  border-radius: 999px;

  opacity: 0;

  animation: xpBubbleFly 1.08s cubic-bezier(.2,.82,.22,1) forwards;

  box-shadow: 0 0 10px currentColor;
}

.reward-bubble-item {

  color: #d8b83a;

  background: radial-gradient(circle at 30% 30%, #f0d890, #d8b83a 60%, rgba(216,184,58,0.15) 100%);

}

.reward-bubble-xp {

  color: #6bc02a;

  background: radial-gradient(circle at 30% 30%, #a8e070, #6bc02a 60%, rgba(107,192,42,0.18) 100%);

}

.reward-bubble-coin {

  color: #e8c85a;

  background: radial-gradient(circle at 30% 30%, #f5e0a0, #e8c85a 60%, rgba(232,200,90,0.15) 100%);

}

.coins-pulse {

  filter: brightness(1.16) saturate(1.08);

}

.skill-event-box {

  pointer-events: auto;
  position: relative;
  overflow: hidden;

  background: rgba(20,18,10,0.95);

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

  border-radius: 10px;

  padding: 12px 16px;

  margin-top: 10px;

  text-align: center;

  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;

  animation: pop 0.2s ease-out;

}

.skill-event-box.interaction-countdown-box {
  min-width: min(520px, calc(var(--canvas-visible-width, 1920px) - 40px));
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}

.skill-event-box.interaction-countdown-box.timing-countdown-box {
  width: min(960px, calc(var(--canvas-visible-width, 1920px) - 40px));
  max-width: 960px;
  min-width: min(720px, calc(var(--canvas-visible-width, 1920px) - 40px));
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.skill-event-box.interaction-countdown-box.overstrike-countdown-box,
.skill-event-box.overstrike-interaction-box {
  width: min(960px, calc(var(--canvas-visible-width, 1920px) - 40px));
  max-width: 960px;
  min-width: min(720px, calc(var(--canvas-visible-width, 1920px) - 40px));
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
}

.skill-event-box.timing-interaction-box {
  width: min(960px, calc(var(--canvas-visible-width, 1920px) - 40px));
  max-width: 960px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
}

.timing-interaction-title {
  flex: 0 0 92px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.overstrike-interaction-title {
  flex: 0 0 108px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

.overstrike-instruction {
  flex: 0 1 230px;
  margin: 0 !important;
}

.timing-countdown-box .interaction-countdown-info {
  flex: 0 0 148px;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
}

.interaction-preview-shell {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 116px;
}

.interaction-preview-muted {
  opacity: 0.62;
  filter: saturate(0.84) brightness(0.9);
}

.interaction-preview-shell .interaction-area {
  position: relative;
  width: min(300px, calc(var(--canvas-visible-width, 1920px) - 92px));
  height: 180px;
  border-radius: 10px;
  border: 1px solid rgba(210, 186, 133, 0.28);
  background:
    radial-gradient(circle at 50% 45%, rgba(214, 184, 116, 0.12), transparent 52%),
    rgba(18, 15, 11, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}

.interaction-preview-shell .forager-eye-grid {
  position: relative;
  width: min(520px, calc(var(--canvas-visible-width, 1920px) - 92px));
  height: 240px;
  border-radius: 10px;
  border: 1px solid rgba(210, 186, 133, 0.24);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035), transparent 18%, rgba(255,255,255,0.02) 36%, transparent 54%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 74px),
    rgba(18, 15, 11, 0.34);
}

.interaction-preview-shell .timing-bar-shell {
  position: relative;
  width: min(360px, calc(var(--canvas-visible-width, 1920px) - 92px));
  height: 22px;
  margin: 8px auto;
  border-radius: 999px;
  border: 1px solid rgba(210, 186, 133, 0.28);
  background: rgba(28, 24, 18, 0.85);
  overflow: visible;
}

.timing-interaction-box > .timing-bar-shell,
.timing-interaction-box > .interaction-preview-shell {
  flex: 1 1 auto;
  min-width: 260px;
}

.overstrike-interaction-box > .overstrike-meter,
.overstrike-countdown-box > .overstrike-meter {
  flex: 1 1 auto;
  min-width: 300px;
  margin: 0 !important;
}

.overstrike-countdown-box > .interaction-countdown-info {
  flex: 0 0 128px;
  margin: 0 !important;
  text-align: center;
}

.overstrike-interaction-box > .overstrike-hold-btn {
  flex: 0 0 180px;
}

.timing-interaction-box > .interaction-preview-shell {
  min-height: 34px;
}

.timing-interaction-box > .interaction-info {
  flex: 0 1 250px;
  margin: 0 !important;
}

.timing-interaction-box > .timing-stop-btn {
  flex: 0 0 140px;
}

.interaction-preview-shell .timing-zone {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 999px;
}

.interaction-preview-shell .timing-zone-orange {
  left: 39%;
  width: 22%;
  background: rgba(255, 140, 58, 0.48);
}

.interaction-preview-shell .timing-zone-yellow {
  left: 43%;
  width: 14%;
  background: rgba(255, 214, 92, 0.58);
}

.interaction-preview-shell .timing-zone-green {
  left: 46.5%;
  width: 7%;
  background: rgba(92, 214, 124, 0.72);
}

.interaction-preview-shell .timing-runner {
  position: absolute;
  left: 8%;
  top: 50%;
  width: 42px;
  height: 52px;
  transform: translate(-50%, -50%);
  background: url('/releases/2026.11.02-01/frontend/assets/ui/skills/minigameAssets/bobber.png') center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(238,190,92,0.28)) drop-shadow(0 6px 9px rgba(0,0,0,0.38));
}

.interaction-preview-shell .overstrike-meter {
  position: relative;
  width: min(360px, calc(var(--canvas-visible-width, 1920px) - 92px));
  height: 28px;
  margin: 24px auto;
  border-radius: 999px;
  border: 1px solid rgba(210, 186, 133, 0.28);
  background:
    linear-gradient(90deg, rgba(146,54,45,0.44) 0 45%, rgba(218,168,64,0.5) 45% 72%, rgba(94,202,99,0.6) 72% 84%, rgba(224,112,50,0.48) 84% 92%, rgba(181,42,35,0.58) 92%),
    rgba(24,20,15,0.88);
}

.interaction-preview-shell .overstrike-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,230,135,0.12), rgba(255,230,135,0.34));
}

.interaction-preview-shell .overstrike-marker {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%) rotate(-34deg);
  border-radius: 50%;
  background: rgba(238, 210, 132, 0.8);
  box-shadow: 0 5px 8px rgba(0,0,0,0.35);
}

.skill-click-event-box {
  isolation: isolate;
  border-color: rgba(224, 196, 111, 0.92);
  background:
    radial-gradient(circle at 58% 18%, rgba(255, 232, 139, 0.24), transparent 42%),
    linear-gradient(180deg, rgba(42, 34, 20, 0.97), rgba(18, 15, 9, 0.95));
  box-shadow:
    0 0 0 1px rgba(255, 235, 166, 0.16),
    0 14px 38px rgba(0, 0, 0, 0.44),
    0 0 28px rgba(224, 184, 74, 0.2);
  animation: clickEventArrive 480ms cubic-bezier(0.14, 1.16, 0.28, 1) both;
}

.skill-click-event-box::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -70%;
  width: 64%;
  z-index: -1;
  pointer-events: none;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 241, 178, 0.26), transparent);
  animation: clickEventSheen 720ms ease-out 90ms both;
}

.skill-click-event-box .primary {
  animation: clickEventButtonPulse 560ms cubic-bezier(0.14, 1.16, 0.28, 1) 90ms both;
}

.skill-event-box.skill-event-missed-pop {
  border-color: rgba(218, 75, 55, 0.94);
  background:
    radial-gradient(circle at 50% 18%, rgba(218, 75, 55, 0.22), transparent 58%),
    rgba(28, 16, 12, 0.96);
  box-shadow:
    0 0 0 1px rgba(255, 164, 92, 0.16),
    0 12px 34px rgba(0, 0, 0, 0.42),
    0 0 20px rgba(218, 75, 55, 0.24);
  animation: missedSkillEventPop 420ms cubic-bezier(0.16, 0.78, 0.34, 1) forwards;
}

.skill-event-box.skill-event-success-pop,
.skill-event-box.skill-event-perfect-pop {
  border-color: rgba(246, 202, 92, 0.98);
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 231, 142, 0.3), transparent 56%),
    linear-gradient(180deg, rgba(45, 34, 15, 0.98), rgba(18, 15, 9, 0.94));
  box-shadow:
    0 0 0 1px rgba(255, 244, 180, 0.18),
    0 12px 34px rgba(0, 0, 0, 0.42),
    0 0 24px rgba(246, 202, 92, 0.28);
  animation: successSkillEventPop 360ms cubic-bezier(0.12, 0.9, 0.28, 1) forwards;
}

.skill-event-box.skill-event-perfect-pop {
  box-shadow:
    0 0 0 1px rgba(255, 244, 180, 0.24),
    0 14px 38px rgba(0, 0, 0, 0.44),
    0 0 32px rgba(255, 226, 118, 0.42);
  animation-duration: 320ms;
}

.skill-spot-missed-pop {
  cursor: default !important;
  animation: missedSpotPop 360ms cubic-bezier(0.16, 0.78, 0.34, 1) forwards;
}

.skill-spot-success-pop,
.skill-spot-perfect-pop {
  cursor: default !important;
  filter: drop-shadow(0 0 14px rgba(255, 219, 90, 0.9)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38)) !important;
  animation: successSpotPop 240ms cubic-bezier(0.12, 0.9, 0.28, 1) forwards;
}

.skill-spot-perfect-pop {
  filter: drop-shadow(0 0 18px rgba(255, 232, 112, 0.98)) drop-shadow(0 0 8px rgba(255, 255, 210, 0.6)) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.38)) !important;
  animation: perfectSpotPop 300ms cubic-bezier(0.12, 0.9, 0.28, 1) forwards;
}

.interaction-area {
  background: rgba(20,30,20,0.8);
  border: 1px solid rgba(120,160,120,0.4);
  border-radius: 8px;
  overflow: hidden;
}

.interaction-info {
  margin-top: 6px;
  font-size: 13px;
  opacity: 0.8;
}

/* =========================
   TOOLTIP
========================= */

.item-tooltip {

  color: var(--ui-text, #e8f5e9);

  position: fixed;

  z-index: 2000;

  background: rgba(10,20,15,0.96);

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

  border-radius: 8px;

  padding: 8px 10px;

  max-width: 240px;

  pointer-events: none;

  box-shadow: 0 8px 24px rgba(0,0,0,0.45);

  opacity: 0;

  transform: translateY(4px);

  transition: opacity 0.12s ease, transform 0.12s ease;

  font-size: 13px;

}

.item-tooltip.visible {

  opacity: 1;

  transform: translateY(0);

}

/* Shared item, control and map descriptions escape window stacking contexts. */
.floating-tooltip {
  position: fixed !important;
  inset: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 2147483647 !important;
  overflow: auto;
  overflow-wrap: anywhere;
  word-break: normal;
  transform: none !important;
  pointer-events: none;
  overscroll-behavior: contain;
}

.floating-tooltip:not([data-floating-tooltip-open]) {
  visibility: hidden !important;
}

.floating-tooltip.floating-tooltip-scrollable {
  pointer-events: auto;
}

.floating-tooltip::backdrop {
  background: transparent;
  pointer-events: none;
}

.item-tooltip .title {
  color: #f8e6b8;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 4px;
}

.item-tooltip .desc {
  color: rgba(238, 230, 206, 0.78);
  font-size: 12px;
  line-height: 1.35;
}


/* =========================
   STACK COUNT
========================= */

.stack {

  position: absolute;

  bottom: 4px;

  right: 4px;

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

  color: #ffd700;

  padding: 2px 6px;

  font-size: 10px;

  border-radius: 6px;

  font-weight: 700;

  min-width: 16px;

  text-align: center;

}


/* =========================
   SIDEBAR BUTTON
========================= */

.bank-button {

  margin-top: auto;

  padding: 12px;

  border-radius: 8px;

  background: rgba(255,255,255,0.05);

  cursor: pointer;

  display: flex;

  justify-content: space-between;

  align-items: center;

  transition: background 0.15s ease, transform 0.1s ease;

}

.bank-button:hover {

  background: rgba(255,255,255,0.12);

}

.bank-button:active {

  transform: translateY(1px);

}


/* =========================
   GENERIC ITEM ICON
========================= */

.item-icon {

  position: relative;

  width: 34px;

  height: 34px;

  object-fit: contain;

  filter: var(--item-extra-filter, none);

  z-index: 2;

}

.city-hub-window {
  display: flex;
  flex-direction: column;
  max-height: 864px;
  overflow: hidden;
}

.city-hub-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}

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

.city-boat-fare-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
}

.city-boat-fare-coin {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.city-boat-fare-coin img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.city-locations-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.city-location-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}






@media (max-width: 768px) {
  .game-window {
    width: 100%;
    max-width: 100%;
    max-height: none;
    min-height: calc(var(--canvas-visible-height, 1080px) - 190px);
    border-radius: 20px;
    border-width: 1px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.3);
    overflow: hidden;
  }

  .skill-section {
    padding: 12px;
    border-radius: 14px;
  }

  button,
  .login-box button,
  .enter-world-btn,
  .skill-switch-btn,
  .smithing-tab,
  .start-resource-btn,
  .bank-close,
  .skill-close,
  .char-close,
  .overlay-close {
    min-height: 44px;
  }

  .resource-list-section {
    margin: 0.9rem 0;
  }

  .resource-item {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.9rem;
    border-radius: 14px;
  }

  .resource-item .icon {
    min-width: 32px;
    font-size: 1.5rem;
  }

  .resource-item .info {
    min-width: 0;
    flex: 1 1 140px;
  }

  .resource-item .start-resource-btn {
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
  }

  .floating-text {
    bottom: calc(92px + env(safe-area-inset-bottom));
    min-width: 0;
    width: min(1766.4px, 420px);
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 16px;
  }
}

.mobile-sidebar-toggle {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sidebar-toggle {
    display: inline-flex;
    color: #112015;
    border-color: rgba(173, 205, 151, 0.42);
    background: linear-gradient(180deg, #c7d4a4, #88a56f 54%, #5f7d4e);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 10px 24px rgba(52, 81, 42, 0.26);
  }

  #skillList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
  }

  #skillList li {
    min-width: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
  }
}


.skill-nav-section-label {
  padding: 8px 2px 2px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 229, 205, 0.58);
  cursor: default;
  pointer-events: none;
}

.skill-nav-section-label:first-child {
  margin-top: 0;
}

.skill-nav-item {
  position: relative;
}

@media (prefers-reduced-motion: reduce) {
  .floating-text.reward-burst.is-visible .floating-text-content {
    animation: none;
  }
}

.skill-nav-item.is-disabled {
  cursor: default;
  opacity: 0.5;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
}

.skill-nav-item.is-disabled:hover {
  background: rgba(255,255,255,0.04);
}

.skill-nav-item.has-unread {
  border: 1px solid rgba(177, 216, 107, 0.38);
  color: #e4f3bd;
  box-shadow: 0 0 0 1px rgba(177, 216, 107, 0.1), 0 0 16px rgba(177, 216, 107, 0.16);
  animation: chatUnreadGlow 1.9s ease-in-out infinite;
}

.skill-nav-item.journal-new {
  border: 1px solid rgba(218, 165, 32, 0.45);
  color: #f4e8c1;
  box-shadow: 0 0 0 1px rgba(218, 165, 32, 0.12), 0 0 16px rgba(218, 165, 32, 0.22);
  animation: goldenShimmer 2.2s ease-in-out infinite;
}

.skill-nav-item.skill-xp-gain-pulse {
  animation: sidebarXpTargetPulse 1.15s ease-out both;
}

.sidebar-xp-flyer {
  position: fixed;
  z-index: 9999;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(76, 122, 36, 0.94);
  color: #dfff91;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 0 1px rgba(205, 255, 130, 0.22), 0 0 18px rgba(142, 235, 72, 0.32);
  pointer-events: none;
  will-change: transform, opacity;
}

.sidebar-xp-gain {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(76, 122, 36, 0.92);
  color: #eaffbc;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  pointer-events: none;
  animation: sidebarXpGainBadge 1.15s ease-out both;
}

@keyframes sidebarXpGainBadge {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(0.72);
  }
  22% {
    opacity: 1;
    transform: translateY(-50%) scale(1.06);
  }
  70% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-58%) scale(0.84);
  }
}

@keyframes sidebarXpTargetPulse {
  0% {
    border-color: rgba(177, 216, 107, 0.22);
    box-shadow: none;
  }
  18% {
    border-color: rgba(198, 246, 110, 0.72);
    box-shadow: 0 0 0 1px rgba(177, 216, 107, 0.18), 0 0 20px rgba(177, 216, 107, 0.34);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
}

.skill-nav-item.is-danger {
  border: 1px solid rgba(230, 84, 66, 0.46);
  background: linear-gradient(135deg, rgba(126, 30, 24, 0.34), rgba(42, 22, 15, 0.82));
  color: #ffd7cf;
  box-shadow: 0 0 0 1px rgba(230, 84, 66, 0.12), 0 0 18px rgba(230, 84, 66, 0.18);
}

.skill-nav-item.is-danger:hover {
  background: linear-gradient(135deg, rgba(151, 38, 30, 0.42), rgba(50, 25, 17, 0.92));
}

.skill-nav-meta {
  flex-shrink: 0;
  min-width: 42px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  color: rgba(244, 234, 211, 0.78);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
}

.skill-nav-item.is-danger .skill-nav-meta {
  background: rgba(255, 95, 78, 0.18);
  color: #ffd2ca;
  box-shadow: inset 0 0 0 1px rgba(255, 128, 112, 0.22);
}

.skill-nav-icon.is-disabled {
  filter: grayscale(1) opacity(0.8) drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.skill-nav-level.soon {
  color: rgba(233, 229, 205, 0.5);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.skill-nav-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.skill-nav-name {
  min-width: 0;
}

.skill-nav-level {
  flex-shrink: 0;
}

.skill-nav-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 6px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.32));
}

@media (max-width: 768px) {
  .skill-nav-icon {
    width: 24px;
    height: 24px;
  }
}


.npc-list {
  display: grid;
  gap: 8px;
}

.npc-entry {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
}

.npc-entry:hover {
  background: rgba(255, 255, 255, 0.08);
}

.npc-entry-name {
  font-weight: 700;
}

.npc-entry-subtitle {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 2px;
}

.npc-list-empty {
  font-size: 13px;
  opacity: 0.75;
}

.npc-conversation-open .game-window,
.npc-conversation-open .city-hub-window,
.npc-conversation-open .location-view-window {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.npc-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background:
    radial-gradient(circle at 18% 32%, rgba(227, 190, 119, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(7, 6, 4, 0.18), rgba(7, 6, 4, 0.56));
}

.npc-dialog-shell {
  width: 100%;
  min-height: var(--canvas-visible-height, 1080px);
  padding: 28px;
  box-sizing: border-box;
  overflow-y: auto;
}

.npc-dialog-shell-loading {
  display: flex;
  align-items: flex-end;
}

.npc-dialog-stage {
  position: relative;
  min-height: calc(var(--canvas-visible-height, 1080px) - 56px);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.npc-dialog-portrait-panel {
  position: absolute;
  right: max(20px, calc(50% - 620px));
  bottom: 360px;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
  pointer-events: none;
  animation: npcPortraitEnter 280ms ease-out;
}

.npc-dialog-portrait-frame {
  width: min(380px, 614.4px);
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(227, 196, 138, 0.28);
  background: linear-gradient(180deg, rgba(36, 30, 20, 0.9), rgba(16, 13, 9, 0.96));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.42);
}

.npc-dialog-portrait,
.npc-dialog-portrait-placeholder {
  width: 100%;
  height: 100%;
  display: block;
}

.npc-dialog-portrait {
  object-fit: contain;
  object-position: center bottom;
}

.npc-dialog-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 108px;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
}



.npc-dialog-speaker-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 222, 199, 0.62);
}

.npc-dialog-name {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  color: #f7f1e4;
}

.npc-dialog-lowerbar {
  position: relative;
  width: min(1120px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto;

  border-radius: 28px;
  padding: 24px 28px 22px;
  background: linear-gradient(180deg, rgba(24, 20, 15, 0.96), rgba(10, 8, 6, 0.98));
  border: 1px solid rgba(227, 196, 138, 0.14);
  box-shadow: 0 28px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: npcLowerBarEnter 260ms ease-out;

  min-height: 350px;
  max-height: 1150px;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}


/* leichter overlay-gloss */
.npc-dialog-lowerbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 36%);
  pointer-events: none;
}


.npc-dialog-lowerbar-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.npc-dialog-speaker-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.npc-dialog-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  color: #f3ecde;
}

.npc-dialog-body:has(.trade-window) {
  overflow-y: hidden;  /* Scrollen an die Panes übergeben */
  display: flex;
  flex-direction: column;
}


.npc-dialog-copy-block,
.npc-dialog-module-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.npc-dialog-greeting,
.npc-talk-prompt-text,
.quest-row-description {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: rgba(246, 239, 226, 0.95);
}

.npc-dialog-quest-description {
  font-size: 1.28rem;
  font-weight: 650;
  line-height: 1.55;
}

.npc-dialog-actions {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: 18px;
}

.npc-dialog-actions-row,
.npc-talk-topic-list,
.npc-talk-prompt-choices,
.npc-talk-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.npc-dialog-btn {
  border: 1px solid rgba(227, 196, 138, 0.12);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: #f8f1e1;
  background: linear-gradient(180deg, rgba(64, 51, 35, 0.84), rgba(35, 27, 18, 0.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.npc-dialog-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(227, 196, 138, 0.28);
  background: linear-gradient(180deg, rgba(86, 68, 47, 0.9), rgba(44, 33, 22, 0.94));
}

.npc-dialog-btn.secondary {
  color: rgba(248, 241, 225, 0.9);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.npc-dialog-btn.secondary:hover {
  background: rgba(255,255,255,0.09);
}

.npc-dialog-body h3,
.shop-header h3,
.quest-header h3 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #f7f1e4;
}

.shop-item-list,
.quest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@keyframes npcPortraitEnter {
  from {
    opacity: 0;
    transform: translate3d(-24px, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes npcLowerBarEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 900px) {
  .npc-dialog-shell {
    padding: 16px;
  }

  .npc-dialog-stage {
    min-height: calc(var(--canvas-visible-height, 1080px) - 32px);
    align-items: stretch;
    justify-content: flex-end;
  }

  .npc-dialog-portrait-panel {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-bottom: 14px;
    align-items: center;
  }

  .npc-dialog-portrait-frame {
    width: min(300px, 1420.8px);
  }

  .npc-dialog-lowerbar {
    width: 100%;
    border-radius: 22px;
    padding: 18px;
  }

  .npc-dialog-name {
    font-size: 24px;
  }

  .npc-dialog-greeting,
  .npc-talk-prompt-text,
  .quest-row-description {
    font-size: 16px;
  }

  .npc-dialog-actions-row,
  .npc-talk-topic-list,
  .npc-talk-prompt-choices,
  .npc-talk-inline-actions {
    gap: 10px;
  }

  .npc-dialog-btn {
    width: 100%;
  }
}
.shop-item-row {
  display: grid;
  grid-template-columns: 1fr 80px 100px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}

.shop-item-name {
  font-weight: 500;
}

.shop-item-price {
  text-align: right;
  opacity: 0.8;
}

.shop-item-action {
  text-align: right;
}

.quest-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}

.quest-row-title {
  color: #f7f1e4;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.16;
}

.quest-row-description {
  opacity: 0.85;
  font-size: 0.95rem;
  margin-top: 8px;
}

.quest-row-status {
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.75;
}

.quest-row-action {
  text-align: right;
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}

.service-row-title {
  font-weight: 600;
}

.service-row-description {
  opacity: 0.85;
  font-size: 0.95rem;
  margin-top: 4px;
}

.service-row-action {
  text-align: right;
  justify-self: end;
  width: auto;
}

.npc-talk-topic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.npc-talk-topic-response {
  margin-top: 12px;
}

.npc-talk-inline-actions {
  margin-top: 14px;
}

.quest-complete-overlay {
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  border: 0;
  overflow: auto;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.78);
  z-index: 1300;
}

.quest-complete-card {
  width: min(720px, calc(100% - 20px));
  border-radius: 18px;
  padding: 30px 28px 26px;
  border: 1px solid rgba(246, 231, 176, 0.24);
  background:
    radial-gradient(circle at top, rgba(246, 231, 176, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(30, 24, 14, 0.98), rgba(13, 12, 10, 0.96));
  box-shadow: 0 28px 80px rgba(0,0,0,0.5);
}

.quest-complete-kicker {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(246, 231, 176, 0.12);
  border: 1px solid rgba(246, 231, 176, 0.18);
  color: #f6e7b0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.quest-complete-burst {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
}

.quest-complete-title {
  margin: 10px 0 0;
  font-size: 30px;
  line-height: 1.1;
  color: #fff4cf;
}

.quest-complete-copy {
  margin: 14px 0 0;
  font-size: 16px;
  color: rgba(244, 240, 220, 0.84);
  line-height: 1.62;
}

.quest-complete-section-title {
  margin-top: 22px;
  margin-bottom: 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 240, 220, 0.64);
}

.quest-complete-rewards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quest-complete-reward-block {
  padding: 14px 16px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.quest-complete-reward-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(244, 240, 220, 0.64);
}

.quest-complete-reward-coins {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quest-complete-reward-coin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f6e7b0;
}

.quest-complete-reward-coin img {
  width: 16px;
  height: 16px;
}

.quest-complete-reward-xp {
  display: block;
  text-align: right;
  font-size: 16px;
  color: #8fd0ff;
}

.quest-complete-item-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.quest-complete-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .quest-complete-card {
    width: 100%;
    padding: 20px;
  }

  .quest-complete-title {
    font-size: 24px;
  }

  .quest-complete-actions .npc-dialog-btn {
    width: 100%;
  }
}
.offline-catchup-gate {
  position: absolute;
  left: calc(var(--canvas-extra-left, 0px) * -1);
  top: calc(var(--canvas-extra-top, 0px) * -1);
  width: var(--canvas-visible-width, 1920px);
  height: var(--canvas-visible-height, 1080px);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5, 5, 4, 0.42), rgba(5, 4, 3, 0.78)),
    url('/releases/2026.11.02-01/frontend/assets/locations/loginscreen.png') center / cover no-repeat;
  z-index: 1600;
}

.skill-nav-item[data-nav-key="SUPPORT"] .skill-nav-meta {
  min-width: 22px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: #b9ed72;
  background: rgba(103, 151, 45, 0.2);
  box-shadow: inset 0 0 0 1px rgba(185, 237, 114, 0.34), 0 0 10px rgba(139, 202, 68, 0.2);
}

.offline-catchup-gate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(205, 164, 83, 0.16), transparent 42%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.offline-catchup-card {
  position: relative;
  width: min(620px, calc(100% - 32px));
  padding: 34px 38px 30px;
  box-sizing: border-box;
  border: 1px solid rgba(203, 155, 76, 0.58);
  border-radius: 18px;
  color: #eadfc6;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(166, 119, 50, 0.17), transparent 48%),
    linear-gradient(180deg, rgba(28, 23, 15, 0.98), rgba(12, 10, 8, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 30px 90px rgba(0,0,0,0.68);
}

.offline-catchup-logo {
  width: 220px;
  height: 118px;
  margin: -12px auto 4px;
  background: url('/releases/2026.11.02-01/frontend/assets/ui/logo.png') center / contain no-repeat;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.54));
}

.offline-catchup-kicker {
  margin-top: 8px;
  color: #c99a51;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.offline-catchup-card h1 {
  margin: 9px 0 10px;
  color: #fff2cf;
  font-family: var(--font-accent);
  font-size: clamp(25px, 2vw, 34px);
  line-height: 1.15;
  text-shadow: 0 2px 12px rgba(0,0,0,0.62);
}

.offline-catchup-card p {
  max-width: 48ch;
  margin: 0 auto;
  color: rgba(234, 223, 198, 0.82);
  font-size: 15px;
  line-height: 1.55;
}

.offline-catchup-progress {
  height: 13px;
  margin-top: 25px;
  overflow: hidden;
  border: 1px solid rgba(210, 167, 91, 0.36);
  border-radius: 999px;
  background: rgba(0,0,0,0.52);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
}

.offline-catchup-progress span {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, #77501d, #d4a94f 52%, #f0d27a);
  box-shadow: 0 0 16px rgba(220, 173, 82, 0.48);
  transition: width 300ms ease;
}

.offline-catchup-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 9px;
  color: rgba(234, 223, 198, 0.74);
  font-size: 13px;
}

.offline-catchup-progress-meta strong {
  color: #edca77;
  font-variant-numeric: tabular-nums;
}

.offline-catchup-card > small {
  display: block;
  margin-top: 22px;
  color: rgba(234, 223, 198, 0.48);
  font-size: 12px;
}

.away-summary-overlay {
  position: absolute;
  left: calc(var(--canvas-extra-left, 0px) * -1);
  top: calc(var(--canvas-extra-top, 0px) * -1);
  width: var(--canvas-visible-width, 1920px);
  height: var(--canvas-visible-height, 1080px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  background:
    radial-gradient(circle at 72% 44%, rgba(205, 178, 105, 0.08), transparent 34%),
    rgba(5, 8, 10, 0.64);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 1200;
}

.away-summary-card {
  width: min(620px, calc(100% - 20px));
  max-height: min(720px, calc(var(--canvas-visible-height, 1080px) - 40px));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: .4rem;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 58%),
    linear-gradient(180deg, rgba(25, 24, 18, 0.98), rgba(13, 12, 10, 0.96));
  box-shadow: 0 26px 70px rgba(0,0,0,0.46);
  padding: 24px;
  line-height: 1.4;
}

.away-summary-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  margin-top: 16px;
  padding-right: 6px;
}

.away-summary-header {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}

.away-summary-header > div {
  min-width: 0;
}

.away-summary-card .away-summary-title {
  margin-top: 8px;
  color: #2f2114;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.away-summary-card .away-summary-copy {
  max-width: 48ch;
  margin: 14px 0 0;
  color: rgba(47, 33, 20, 0.9);
  font-size: 15px;
}

.away-summary-card .away-summary-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: rgba(47, 33, 20, 0.72);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.away-summary-card .npc-dialog-btn.secondary {
  color: #fff7df;
  border-color: rgba(255,255,255,0.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.05)),
    rgba(96, 70, 42, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 8px 20px rgba(74, 47, 20, 0.12);
}

.away-summary-card .away-summary-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(143, 208, 255, 0.1);
  border: 1px solid rgba(143, 208, 255, 0.18);
  color: #dbeeff;
  font-size: 13px;
  font-weight: 700;
}

.away-summary-loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #8fd0ff;
  box-shadow: 0 0 0 0 rgba(143, 208, 255, 0.6);
  animation: away-summary-pulse 1.1s ease-in-out infinite;
}

.away-summary-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}

.away-summary-columns.has-levelups {
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.95fr);
}

.away-summary-panel {
  padding: 16px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 248, 222, 0.24), rgba(107, 75, 35, 0.06));
  border: 1px solid rgba(103, 69, 31, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.away-summary-card .away-summary-section-title {
  margin-bottom: 8px;
  color: #3b2816;
  font-size: 14px;
  font-weight: 700;
}

.away-summary-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.away-summary-item-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 30px;
}

.away-summary-card .away-summary-item-name {
  color: rgba(47, 33, 20, 0.92);
}

.away-summary-card .away-summary-item-amount {
  color: #2c1d10;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.away-summary-item-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
}

.away-summary-item-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}

.away-summary-levelup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.away-summary-levelup-row {
  display: block;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 248, 222, 0.34), rgba(90, 64, 31, 0.08));
  border: 1px solid rgba(103, 69, 31, 0.14);
}

.away-summary-levelup-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.away-summary-levelup-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.away-summary-card .away-summary-levelup-skill {
  color: #3b2816;
  font-weight: 700;
}

.away-summary-card .away-summary-levelup-range {
  color: #2c1d10;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.away-summary-unlock-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.away-summary-unlock-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.away-summary-unlock-level {
  font-size: 12px;
  font-weight: 700;
  color: rgba(246, 231, 176, 0.88);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.away-summary-unlock-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.away-summary-unlock-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}

.away-summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.away-summary-card .away-summary-unlock-level {
  color: rgba(47, 33, 20, 0.72);
}

.away-summary-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 248, 222, 0.24);
  border: 1px solid rgba(103, 69, 31, 0.12);
}

.away-summary-card .away-summary-stat-label {
  color: rgba(47, 33, 20, 0.82);
  font-size: 13px;
  font-weight: 700;
}

.away-summary-card .away-summary-stat-xp strong {
  color: #1d6f9f;
  font-weight: 800;
}

.away-summary-card .away-summary-stat-coins strong {
  color: #8a5a12;
  font-weight: 800;
}

@keyframes away-summary-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 208, 255, 0.5);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(143, 208, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(143, 208, 255, 0);
  }
}

@media (max-width: 640px) {
  .away-summary-overlay {
    padding: 12px;
  }

  .away-summary-card {
    width: 100%;
    max-height: calc(var(--canvas-visible-height, 1080px) - 24px);
    padding: 18px;
  }

  .away-summary-columns.has-levelups {
    grid-template-columns: 1fr;
  }

  .away-summary-levelup-meta {
    flex-direction: column;
    align-items: flex-start;
  }

.away-summary-unlock-item {
    width: 100%;
  }
}
.reward-popup {
  position: fixed;
  top: 80px;
  right: 20px;
  background: rgba(0,0,0,0.85);
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  z-index: 9999;
  animation: fadeInOut 2.5s ease forwards;
}

.reward-popup img {
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.away-summary-card .away-summary-unlock-item {
  color: #3b2816;
}

.story-continuation-overlay {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(203, 168, 95, 0.12), transparent 34%),
    rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.story-continuation-card {
  width: min(620px, calc(var(--canvas-visible-width, 1920px) - 32px));
  padding: 30px 28px 26px;
  border-radius: 14px;
  background: rgba(23, 19, 14, 0.96);
  border: 1px solid rgba(226, 194, 123, 0.22);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
  color: var(--ui-text);
}

.story-continuation-kicker {
  margin-bottom: 8px;
  color: #e7c987;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story-continuation-card h2 {
  margin: 0 0 12px;
  font-size: 28px;
  line-height: 1.08;
}

.story-continuation-card p {
  max-width: 54ch;
  margin: 0 0 22px;
  color: rgba(245, 238, 222, 0.78);
  font-size: 16px;
  line-height: 1.58;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  10% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-10px); }
}









.shop-view {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.shop-role-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.shop-role-badge,
.shop-role-mode,
.shop-item-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.shop-role-badge {
  color: #f4dfad;
}

.shop-copy,
.shop-item-meta {
  color: rgba(255,255,255,0.72);
}

.shop-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  margin-top: 4px;
}

.shop-item-tag.muted {
  opacity: 0.72;
}

.shop-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.shop-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.shop-item-row {
  grid-template-columns: minmax(0, 1fr) 90px 110px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.04);
}

.shop-item-row.is-disabled {
  opacity: 0.6;
}

.shop-item-main {
  min-width: 0;
}

.shop-item-price.positive {
  color: #8fd69f;
}
.npc-dialog-lowerbar {
  display: flex;
  flex-direction: column;
  max-height: min(496.8px, 420px);
}

.npc-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(324px, 270px);
  overflow-y: auto;
  padding-right: 6px;
}

.npc-dialog-actions {
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(16, 13, 10, 0), rgba(16, 13, 10, 0.88) 36%);
}

.shop-view {
  gap: 12px;
}

.shop-copy {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.shop-section {
  gap: 8px;
}

.shop-item-list {
  gap: 8px;
}

.shop-item-row {
  padding: 8px 10px;
}

.shop-item-price,
.shop-item-action {
  align-self: center;
}

@media (max-width: 768px) {
  .npc-dialog-lowerbar {
    max-height: min(561.6px, 440px);
  }

  .npc-dialog-body {
    max-height: min(367.2px, 300px);
  }
}
.npc-dialog-lowerbar {
  display: flex;
  flex-direction: column;
  max-height: min(734.4px, 760px);
}

.npc-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(561.6px, 620px);
  overflow-y: auto;
  padding-right: 6px;
}

.trade-window {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;  /* ← das hinzufügen */
}

.trade-window-header {
  display: grid;
  grid-template-columns: minmax(260px, max-content) minmax(260px, 1fr);
  align-items: end;
  gap: 16px;
}

.trade-window-heading {
  min-width: 0;
}

.trade-window-header h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
}

.trade-role-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.trade-role-badge,
.trade-role-mode {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.trade-role-badge {
  color: #f4dfad;
}

.trade-window-copy {
  margin: 0;
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  line-height: 1.25;
  max-width: 520px;
  justify-self: end;
  text-align: right;
}

.trade-window-header-side {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 0;
}

.trade-window-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.trade-wallet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(214, 187, 106, 0.22);
  background: rgba(13, 10, 6, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.trade-wallet-label {
  color: rgba(246, 239, 220, 0.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trade-window-close {
  flex: 0 0 auto;
}

.trade-window-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.trade-pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

.trade-pane.is-active {
  border-color: rgba(227, 196, 138, 0.18);
  box-shadow: inset 0 0 0 1px rgba(227, 196, 138, 0.06);
}

.trade-pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.trade-pane-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.trade-pane-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}

.trade-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.trade-pane-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.trade-detail-dock {
  flex: 0 0 auto;
}

.trade-slot {
  position: relative;
  min-height: 124px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  background: rgba(19, 17, 13, 0.92);
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.trade-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(227, 196, 138, 0.14);
}

.trade-slot.is-selected {
  border-color: rgba(227, 196, 138, 0.26);
  background: rgba(34, 28, 20, 0.98);
}

.trade-slot.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.trade-slot-art {
  position: relative;
  flex: 1;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(8, 7, 5, 0.44);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.trade-slot-art img:not(.item-composite-layer) {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}

/* Percentage heights collapse inside the flex-sized slot art area. Composite
   icons therefore need a concrete box for their absolutely positioned layers. */
.trade-slot-art .item-composite-icon {
  width: 54px;
  height: 54px;
  max-width: 78%;
  filter: var(--item-extra-filter, none);
}

.trade-slot-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.trade-slot-price {
  font-size: 12px;
  font-weight: 700;
}

.trade-slot-stack {
  font-size: 11px;
  color: rgba(255,255,255,0.62);
}

.trade-grid-empty,
.trade-detail-empty {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.68);
}

.trade-detail-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.trade-detail-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.trade-detail-art {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 11, 8, 0.84);
  border: 1px solid rgba(255,255,255,0.06);
  flex: 0 0 auto;
}

.trade-detail-art img:not(.item-composite-layer),
.trade-detail-art .item-composite-icon {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: var(--item-extra-filter, none);
}

.trade-detail-copy {
  min-width: 0;
  max-height: 88px;
  overflow: hidden;
}

.trade-detail-copy h4 {
  margin: 0 0 4px;
  font-size: 18px;
  color: #f7f1e4;
}

.trade-detail-copy p {
  margin: 0;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.24;
}

.trade-detail-copy p.is-long-description {
  font-size: 12px;
  line-height: 1.18;
}

.trade-detail-copy p.is-very-long-description {
  font-size: 11px;
  line-height: 1.12;
}

.trade-detail-kicker {
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-text-muted);
}

.trade-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 8px;
}

.trade-detail-note {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(227, 196, 138, 0.08);
  border: 1px solid rgba(227, 196, 138, 0.12);
  color: rgba(255,255,255,0.74);
  font-size: 12px;
  line-height: 1.35;
}

.trade-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}

.trade-detail-stat span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.trade-detail-stat strong {
  font-size: 15px;
  line-height: 1.1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.trade-quantity-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.trade-quantity-label {
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}

.trade-quantity-controls {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.trade-quantity-input {
  width: 82px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.22);
  color: #fff;
  font: inherit;
}

.trade-qty-btn {
  min-width: 42px;
  min-height: 42px;
  padding: 9px 12px;
}

.trade-detail-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.trade-detail-actions {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.trade-detail-actions .npc-dialog-btn {
  min-height: 42px;
  padding: 9px 16px;
}

@media (max-width: 980px) {
  .trade-window-header {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
  }

  .trade-window-copy {
    justify-self: start;
    text-align: left;
    max-width: none;
  }

  .trade-window-layout {
    grid-template-columns: 1fr;
  }

  .trade-detail-stats {
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  }

  .trade-detail-bottom {
    flex-wrap: wrap;
  }
}
.npc-dialog-lowerbar {
  min-height: 350px;
  max-height: calc(var(--canvas-visible-height, 1080px) - 96px);
}

.npc-dialog-body {
  max-height: calc(var(--canvas-visible-height, 1080px) - 260px);
}

.npc-dialog-lowerbar:has(.trade-window) {
  min-height: max(350px, calc(var(--canvas-visible-height, 1080px) - 132px));
  max-height: calc(var(--canvas-visible-height, 1080px) - 88px);
}

.npc-dialog-lowerbar:has(.trade-window) .npc-dialog-body {
  max-height: calc(var(--canvas-visible-height, 1080px) - 250px);
}

.npc-dialog-stage {
  min-height: calc(var(--canvas-visible-height, 1080px) - 32px);
}

@media (max-width: 900px) {
  .npc-dialog-lowerbar {
    min-height: 350px;
    max-height: calc(var(--canvas-visible-height, 1080px) - 72px);
  }

  .npc-dialog-body {
    max-height: calc(var(--canvas-visible-height, 1080px) - 230px);
  }

  .npc-dialog-lowerbar:has(.trade-window) {
    min-height: max(350px, calc(var(--canvas-visible-height, 1080px) - 104px));
    max-height: calc(var(--canvas-visible-height, 1080px) - 64px);
  }

  .npc-dialog-lowerbar:has(.trade-window) .npc-dialog-body {
    max-height: calc(var(--canvas-visible-height, 1080px) - 214px);
  }
}


.npc-dialog-lowerbar:not(:has(.trade-window)) {
  box-sizing: border-box !important;
  min-height: 350px !important;
  height: 350px !important;
  max-height: 350px !important;
  overflow: hidden;
}

.npc-dialog-lowerbar:not(:has(.trade-window)) .npc-dialog-body {
  max-height: none !important;
}

#npcDialogOverlay .npc-dialog-lowerbar {
  box-sizing: border-box;
  height: 350px;
  min-height: 350px;
  max-height: 350px;
}

#npcDialogOverlay .npc-dialog-lowerbar .npc-dialog-body {
  max-height: none;
}

#npcDialogOverlay .npc-dialog-lowerbar.is-trade-view {
  height: auto;
  min-height: max(350px, calc(var(--canvas-visible-height, 1080px) - 132px));
  max-height: calc(var(--canvas-visible-height, 1080px) - 88px);
}

#npcDialogOverlay .npc-dialog-lowerbar.is-trade-view .npc-dialog-body {
  max-height: calc(var(--canvas-visible-height, 1080px) - 250px);
  overflow: hidden;
}

#npcDialogOverlay .trade-window,
#npcDialogOverlay .trade-window-layout,
#npcDialogOverlay .trade-pane {
  min-width: 0;
  min-height: 0;
}

#npcDialogOverlay .trade-window {
  height: 100%;
}

.trade-slot-price,
.trade-detail-stat strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.trade-coins {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

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

.trade-coin-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.trade-coin-value {
  line-height: 1;
}

@media (max-width: 900px) {
  #npcDialogOverlay .npc-dialog-lowerbar.is-trade-view {
    min-height: max(350px, calc(var(--canvas-visible-height, 1080px) - 104px));
    max-height: calc(var(--canvas-visible-height, 1080px) - 64px);
  }

  #npcDialogOverlay .npc-dialog-lowerbar.is-trade-view .npc-dialog-body {
    max-height: calc(var(--canvas-visible-height, 1080px) - 214px);
  }
}

@media (max-height: 860px) and (min-width: 981px) {
  #npcDialogOverlay .npc-dialog-lowerbar.is-trade-view {
    min-height: calc(var(--canvas-visible-height, 1080px) - 52px);
    max-height: calc(var(--canvas-visible-height, 1080px) - 32px);
  }

  #npcDialogOverlay .npc-dialog-lowerbar.is-trade-view .npc-dialog-body {
    max-height: calc(var(--canvas-visible-height, 1080px) - 164px);
  }

  .npc-dialog-body:has(.trade-window) {
    padding-right: 2px;
  }

  .trade-window {
    gap: 8px;
  }

  .trade-window-header {
    gap: 10px;
  }

  .trade-window-header h3 {
    font-size: 19px;
  }

  .trade-role-line {
    margin-top: 4px;
  }

  .trade-window-copy {
    max-width: 430px;
    font-size: 11px;
    line-height: 1.2;
  }

  .trade-window-layout {
    gap: 12px;
  }

  .trade-pane {
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }

  .trade-pane-header {
    min-height: 20px;
  }

  .trade-slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }

  .trade-slot {
    min-height: 104px;
    padding: 6px;
    border-radius: 12px;
    gap: 5px;
  }

  .trade-slot-art {
    min-height: 56px;
  }

  .trade-slot-art {
    border-radius: 9px;
  }

  .trade-slot-art .item-composite-icon {
    width: 44px;
    height: 44px;
  }

  .trade-slot-price {
    font-size: 11px;
  }

  .trade-slot-stack {
    font-size: 10px;
    line-height: 1.1;
  }

  .trade-detail-card {
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
  }

  .trade-detail-head {
    gap: 10px;
  }

  .trade-detail-art {
    width: 68px;
    height: 68px;
    border-radius: 11px;
  }

  .trade-detail-copy {
    max-height: 68px;
  }

  .trade-detail-copy h4 {
    margin-bottom: 2px;
    font-size: 16px;
  }

  .trade-detail-copy p {
    font-size: 12px;
    line-height: 1.16;
  }

  .trade-detail-copy p.is-long-description,
  .trade-detail-copy p.is-very-long-description {
    font-size: 11px;
    line-height: 1.08;
  }

  .trade-detail-kicker {
    margin-bottom: 2px;
    font-size: 10px;
  }

  .trade-detail-stats {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    gap: 6px;
  }

  .trade-detail-stat {
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
  }

  .trade-detail-stat span {
    font-size: 9px;
  }

  .trade-detail-stat strong {
    font-size: 13px;
  }

  .trade-detail-note {
    padding: 6px 8px;
    font-size: 11px;
  }

  .trade-quantity-row {
    gap: 4px;
  }

  .trade-quantity-label {
    font-size: 11px;
  }

  .trade-quantity-controls {
    gap: 6px;
  }

  .trade-quantity-input {
    width: 70px;
    padding: 7px 9px;
    border-radius: 8px;
  }

  .trade-qty-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 10px;
  }

  .trade-detail-bottom {
    gap: 8px;
  }

  .trade-detail-actions .npc-dialog-btn {
    min-height: 36px;
    padding: 7px 14px;
  }
}

.service-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.service-row-meta-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.08);
  font-size: 12px;
  opacity: 0.9;
}

.activity-session-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 14px;
}

.activity-session-label,
.location-activity-session-note {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.activity-session-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(225, 207, 160, 0.22);
  border-radius: 6px;
  background: rgba(10, 9, 7, 0.28);
  color: var(--text);
}

.activity-session-timer span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.78;
}

.activity-session-timer strong {
  font-size: 14px;
}

.activity-session-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.activity-session-btn {
  min-width: 120px;
}

.activity-session-btn.active {
  box-shadow: inset 0 0 0 1px rgba(255, 224, 170, 0.45);
  background: linear-gradient(180deg, rgba(109, 79, 42, 0.9), rgba(74, 52, 26, 0.92));
}

.activity-session-hint {
  font-size: 0.72rem;
  color: #b8a17a;
  text-align: center;
  opacity: 0.85;
  margin-top: 6px;
  line-height: 1.2;
}

/* =========================
   NPC conversation mode
========================= */

.npc-conversation-open .game-window,
.npc-conversation-open .city-hub-window,
.npc-conversation-open .location-view-window {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform: none;
  filter: brightness(0.58) saturate(0.86) blur(1px);
}

.npc-conversation-open #main {
  grid-column: 1 / span 2;
  grid-row: 2;
}

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

.survival-foraging-method {
  position: relative;
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(225, 207, 160, 0.2);
  border-radius: 7px;
  background: rgba(10, 9, 7, 0.3);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.survival-foraging-method:hover:not(.is-disabled) {
  border-color: rgba(225, 207, 160, 0.45);
}

.survival-foraging-method.is-selected {
  border-color: rgba(216, 174, 100, 0.7);
  background: linear-gradient(180deg, rgba(99, 72, 39, 0.66), rgba(49, 35, 20, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 224, 170, 0.12);
}

.survival-foraging-method.is-disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.survival-foraging-method input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #c7954b;
}

.survival-foraging-method-icon,
.survival-foraging-hand-icon {
  width: 36px;
  height: 36px;
}

.survival-foraging-hand-icon {
  display: grid;
  place-items: center;
  font-size: 28px;
}

.survival-foraging-method-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.survival-foraging-method-copy strong {
  font-size: 13px;
}

.survival-foraging-method-copy small,
.survival-foraging-method-copy span {
  overflow: hidden;
  color: #c7b58f;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.survival-foraging-method em {
  color: #e6c98d;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.foraging-workspace { min-width: 0; }
.foraging-tab-rail { display: flex; gap: 6px; margin: 0 0 10px; }
.foraging-tab { flex: 1; min-width: 0; padding: 9px 7px; border: 1px solid rgba(225,207,160,.25); border-radius: 6px; background: rgba(22,20,15,.7); color: #c7b58f; font-size: 12px; }
.foraging-tab.is-active { border-color: #c7954b; background: linear-gradient(180deg,rgba(99,72,39,.8),rgba(49,35,20,.8)); color: #f0d8a7; }
.focused-foraging-panel { padding: 11px; border: 1px solid rgba(225,207,160,.22); border-radius: 7px; background: rgba(15,18,11,.5); }
.foraging-focus-copy { margin: 0 0 10px; color: #d0c4a3; font-size: 12px; line-height: 1.45; }
.foraging-property-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.foraging-property-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: #d0c4a3; font-size: 12px; }
.foraging-property-heading span { flex-shrink: 0; color: #e3cd88; }
.foraging-property-chip { min-width: 0; padding: 8px 5px; border: 1px solid #655f43; border-radius: 6px; background: rgba(26,33,18,.8); color: #d2d5b9; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.foraging-property-chip.is-selected { border-color: #c7b668; color: #fff0bb; background: rgba(93,103,46,.65); box-shadow: inset 0 0 0 1px rgba(231,220,164,.17); }
.foraging-property-chip:disabled { opacity: .4; cursor: not-allowed; }
.foraging-property-chip.is-selected.is-unavailable { border-style: dashed; color: #c7b58f; }
.foraging-focus-rates { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; color: #c9b684; font-size: 11px; line-height: 1.35; }
.foraging-focus-warning { margin: 8px 0; color: #e4bd83; font-size: 12px; line-height: 1.4; }
.foraging-auto-tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.foraging-auto-tool { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid rgba(225,207,160,.17); border-radius: 6px; }
.foraging-auto-tool > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.foraging-auto-tool strong { color: #e0d0ad; font-size: 11px; }
.foraging-auto-tool small { color: #b5a17b; font-size: 10px; overflow-wrap: anywhere; }
.foraging-auto-tool.is-unavailable { opacity: .55; }
.foraging-auto-tool .survival-foraging-method-icon, .foraging-auto-tool .survival-foraging-hand-icon { flex-shrink: 0; width: 28px; height: 28px; font-size: 24px; }
.bottom-info-focus-properties { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 9px; }
.bottom-info-focus-properties > span { padding: 4px 7px; border: 1px solid #726a46; border-radius: 6px; background: rgba(56,65,32,.5); color: #d9d2ad; font-size: 11px; }

@media (max-width: 720px) {
  .survival-foraging-method-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .foraging-property-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .foraging-auto-tool-grid { grid-template-columns: 1fr; }
}

/* Conversation mode owns the lower part of the screen. Keep the persistent
   navigation bar (and its mobile portal) out of the dialogue, even when a
   live-state refresh rerenders the bar while the NPC overlay is open. */
.npc-conversation-open #bottomBar,
.npc-conversation-open #bottomBarMobilePortal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.npc-conversation-open #sidebar {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  filter: none;
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    filter 180ms ease;
}

.npc-conversation-open #sidebar .sidebar-section,
.npc-conversation-open #sidebar .sidebar-category,
.npc-conversation-open #sidebar .sidebar-item,
.npc-conversation-open #sidebar .nav-item {
  opacity: 0;
}

.npc-dialog-overlay {
  background:
    radial-gradient(circle at 74% 46%, rgba(218, 178, 105, 0.13), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.64), rgba(4, 3, 2, 0.24) 18%, rgba(4, 3, 2, 0.04) 42%, rgba(4, 3, 2, 0.36)),
    linear-gradient(180deg, rgba(7, 6, 4, 0.12), rgba(7, 6, 4, 0.54));
  pointer-events: auto;
}

.npc-dialog-shell {
  padding: 0;
  overflow: hidden;
}

.npc-dialog-stage {
  position: relative;
  display: block;
  min-height: var(--canvas-visible-height, 1080px);
}

.npc-dialog-portrait-panel {
  position: absolute;
  right: clamp(28px, 96px, 96px);
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: min(652.8px, 460px);
  height: min(928.8px, 760px);
  pointer-events: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: npcPortraitEnter 280ms ease-out;
}

.npc-dialog-portrait-panel::before {
  content: "";
  position: absolute;
  inset: 8% -10% 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.44), transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 76%, rgba(0, 0, 0, 0.62) 100%);
  filter: blur(10px);
}

.npc-dialog-portrait-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  aspect-ratio: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}

.npc-dialog-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 28px 34px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 28px rgba(230, 181, 89, 0.08));
}

#npcDialogOverlay .npc-dialog-lowerbar {
  --npc-choice-column-lift: clamp(120px, 16vh, 180px);
  position: absolute;
  top: auto;
  bottom: clamp(42px, 7vh, 76px);
  left: clamp(112px, 249.6px, 250px);
  width: min(1100px, calc(var(--canvas-visible-width, 1920px) - 650px));
  height: auto !important;
  min-height: 0 !important;
  max-height: min(78vh, 760px) !important;
  margin: 0;
  padding: 0;
  overflow: visible !important;
  color: #f8eedc;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  /* The generic lower-bar animation resets transform to the bottom of the
     screen before this positioning rule can take over. Conversations have a
     fixed stage position, so render them there immediately. */
  animation: none;
}

#npcDialogOverlay .npc-dialog-lowerbar::before {
  display: none;
}

#npcDialogOverlay .npc-dialog-lowerbar-top {
  width: min(430px, 42%);
  margin-bottom: 10px;
  transform: translateY(calc(-1 * var(--npc-choice-column-lift)));
}

#npcDialogOverlay .npc-dialog-speaker-kicker {
  color: rgba(246, 234, 206, 0.64);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

#npcDialogOverlay .npc-dialog-name {
  color: #fff6df;
  font-size: clamp(31px, 55.68px, 48px);
  text-shadow:
    0 3px 16px rgba(0, 0, 0, 0.9),
    0 0 22px rgba(236, 196, 119, 0.24);
}

#npcDialogOverlay .npc-dialog-body {
  max-height: min(64vh, 610px) !important;
  padding-right: 8px;
  overflow-y: auto;
  color: #f8eedc;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78);
  scrollbar-gutter: stable;
}

/* The desktop choice column is visually lifted out of the body's original
   flow. Root/talk must therefore not clip it at the body's old top edge. */
#npcDialogOverlay[data-active-view="root"] .npc-dialog-body,
#npcDialogOverlay[data-active-view="talk"] .npc-dialog-body {
  max-height: none !important;
  overflow: visible;
  scrollbar-gutter: auto;
}

/* Functional modules are single interaction panels. Keep their complete body
   attached to the lifted NPC heading instead of the response baseline. Root
   and talk use the split conversation grid; trade owns a separate layout. */
#npcDialogOverlay:not([data-active-view="root"]):not([data-active-view="talk"]):not([data-active-view="shop"]) .npc-dialog-body {
  transform: translateY(calc(-1 * var(--npc-choice-column-lift)));
}

#npcDialogOverlay .npc-dialog-actions {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 0;
  padding-top: 0;
  background: transparent;
  border-top: 0;
}

#npcDialogOverlay .npc-dialog-actions .npc-conversation-exit-list {
  margin-top: 10px;
}

#npcDialogOverlay .npc-dialog-actions:empty {
  display: none;
}

#npcDialogOverlay .npc-dialog-floating-response {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(520px, 52%);
  color: #f8eedc;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78);
  pointer-events: none;
}

#npcDialogOverlay .npc-dialog-floating-response:empty {
  display: none;
}

#npcDialogOverlay .npc-dialog-floating-response .npc-social-action-response,
#npcDialogOverlay .npc-dialog-floating-response .npc-dialog-greeting {
  margin: 0;
}

#npcDialogOverlay .npc-dialog-greeting,
#npcDialogOverlay .npc-talk-prompt-text,
#npcDialogOverlay .npc-dialog-quest-description {
  max-width: 58ch;
  color: rgba(250, 238, 218, 0.92);
  font-size: clamp(18px, 27.84px, 22px);
  line-height: 1.62;
}

#npcDialogOverlay .npc-dialog-quest-description,
#npcDialogOverlay .npc-talk-topic-response,
#npcDialogOverlay .quest-view,
#npcDialogOverlay .quest-row {
  background: transparent;
  border: 0;
  box-shadow: none;
}

#npcDialogOverlay .npc-dialog-quest-description,
#npcDialogOverlay .quest-row-description {
  color: rgba(250, 238, 218, 0.92);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.78);
}

#npcDialogOverlay .npc-dialog-quest-description {
  position: relative;
  max-width: 60ch;
  margin: 0 0 18px;
  padding: 10px 16px 10px 18px;
  color: #fff4d9;
  font-weight: 760;
  background:
    linear-gradient(90deg, rgba(10, 8, 5, 0.5), rgba(10, 8, 5, 0.16) 72%, transparent);
  border-left: 2px solid rgba(243, 215, 127, 0.68);
  border-radius: 0 6px 6px 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 211, 0.06),
    0 10px 28px rgba(0, 0, 0, 0.18);
}

#npcDialogOverlay .npc-dialog-quest-description::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: -10px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(243, 215, 127, 0.32), transparent);
}

#npcDialogOverlay .quest-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  padding: 0;
}

#npcDialogOverlay .quest-row + .quest-row {
  margin-top: 22px;
}

#npcDialogOverlay .quest-row-title {
  color: #fff6df;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.88);
}

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

#npcDialogOverlay .quest-row-action {
  margin-top: 14px;
  text-align: left;
}

#npcDialogOverlay .service-view {
  max-width: 680px;
}

#npcDialogOverlay .service-header {
  margin-bottom: 10px;
}

#npcDialogOverlay .service-list {
  box-sizing: border-box;
  width: min(620px, calc(100% - 18px));
  max-width: 100%;
}

#npcDialogOverlay .npc-service-option {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 74px;
  box-sizing: border-box;
  padding: 10px 4px 10px 0;
}

#npcDialogOverlay .npc-service-option-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

#npcDialogOverlay .npc-service-option .service-row-title {
  color: #fff6df;
  font-size: clamp(19px, 26.496px, 24px);
  line-height: 1.1;
}

#npcDialogOverlay .npc-service-option .service-row-description {
  display: block;
  max-width: 48ch;
  margin: 0;
  color: rgba(250, 238, 218, 0.78);
  font-size: clamp(14px, 19.2px, 16px);
  line-height: 1.35;
}

#npcDialogOverlay .npc-service-option-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  padding: 8px 12px;
  color: #2a1a09;
  font-family: var(--font-readable);
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255, 244, 202, 0.6);
  background:
    linear-gradient(180deg, rgba(255, 247, 198, 0.98), rgba(178, 144, 61, 0.96));
  border: 1px solid rgba(255, 245, 191, 0.52);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 10px 22px rgba(0, 0, 0, 0.3);
}

#npcDialogOverlay .npc-service-option:hover .npc-service-option-action,
#npcDialogOverlay .npc-service-option:focus-visible .npc-service-option-action {
  filter: brightness(1.08);
}

#npcDialogOverlay .quest-outcome-progress {
  margin-top: 14px;
  color: rgba(250, 238, 218, 0.82);
}

.npc-conversation-option-list,
#npcDialogOverlay .npc-talk-topic-list,
#npcDialogOverlay .npc-talk-prompt-choices {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(620px, 100%);
  gap: 3px;
  margin-top: 22px;
  margin-left: 18px;
  padding-left: 28px;
}

.npc-conversation-option-list::before,
#npcDialogOverlay .npc-talk-topic-list::before,
#npcDialogOverlay .npc-talk-prompt-choices::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 2px;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(246, 234, 206, 0.34) 14%,
      rgba(246, 234, 206, 0.7) 50%,
      rgba(246, 234, 206, 0.34) 86%,
      transparent
    );
  box-shadow:
    0 0 10px rgba(243, 215, 127, 0.18),
    0 0 28px rgba(0, 0, 0, 0.46);
}

.npc-conversation-exit-list {
  margin-top: 28px;
}

.npc-conversation-option-list.is-scrollable,
#npcDialogOverlay .npc-talk-topic-list:has(.npc-dialog-btn:nth-child(7)),
#npcDialogOverlay .npc-talk-prompt-choices:has(.npc-conversation-option:nth-child(7)) {
  max-height: min(410.4px, 380px);
  padding-right: 8px;
  overflow-y: auto;
}

.npc-conversation-option,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 4px 2px;
  color: rgba(248, 238, 220, 0.68);
  font-family: var(--font-readable);
  font-size: clamp(20px, 33.024px, 28px);
  line-height: 1.18;
  text-align: left;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.94);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition:
    color 150ms ease,
    transform 150ms ease,
    text-shadow 150ms ease;
}

.npc-conversation-option .npc-conversation-caret,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn::before,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn::before,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn::before {
  content: ">";
  display: none;
  color: #f3d77f;
  font-size: 25px;
  line-height: 1;
  text-shadow: none;
}

#npcDialogOverlay .npc-conversation-quest-marker {
  display: inline-block;
  margin-right: 7px;
  color: #f1cb70;
  font-size: 1.15em;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 0 10px rgba(241, 203, 112, 0.48);
}

/* Conversation choices and spoken text are separate visual anchors. The NPC
   name belongs to the choice column; the current line sits beside it in the
   lower middle of the scene instead of pushing the choices down the page. */
#npcDialogOverlay .npc-dialog-copy-block,
#npcDialogOverlay .npc-dialog-talk-view {
  display: grid;
  grid-template-columns: minmax(330px, 430px) minmax(390px, 1fr);
  column-gap: clamp(42px, 4vw, 78px);
  align-items: end;
}

#npcDialogOverlay .npc-dialog-copy-block > .npc-dialog-greeting,
#npcDialogOverlay .npc-dialog-copy-block > .npc-talk-topic-response,
#npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-response {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 8px;
}

#npcDialogOverlay .npc-dialog-copy-block > .npc-conversation-option-list,
#npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-list {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  width: 100%;
  margin-top: 0;
  transform: translateY(calc(-1 * var(--npc-choice-column-lift)));
}

@media (min-width: 981px) {
  #npcDialogOverlay .npc-dialog-copy-block > .npc-dialog-greeting,
  #npcDialogOverlay .npc-dialog-copy-block > .npc-talk-topic-response,
  #npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-response {
    position: relative;
    left: clamp(48px, 12vw, 280px);
    top: -20px;
  }
  #npcDialogOverlay .npc-dialog-floating-response {
    right: calc(-1 * clamp(48px, 12vw, 280px));
    bottom: 20px;
  }
}

@media (max-width: 980px) {
  #npcDialogOverlay .npc-dialog-lowerbar {
    --npc-choice-column-lift: 0px;
    right: 24px;
    bottom: 28px;
    left: 24px;
    width: auto;
  }

  #npcDialogOverlay .npc-dialog-lowerbar-top {
    width: 100%;
  }

  #npcDialogOverlay .npc-dialog-floating-response {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 10px 0;
  }

  #npcDialogOverlay[data-active-view="root"] .npc-dialog-body,
  #npcDialogOverlay[data-active-view="talk"] .npc-dialog-body {
    max-height: min(64vh, 610px) !important;
    overflow-y: auto;
  }

  #npcDialogOverlay:not([data-active-view="root"]):not([data-active-view="talk"]):not([data-active-view="shop"]) .npc-dialog-body {
    transform: none;
  }

  #npcDialogOverlay .npc-dialog-copy-block,
  #npcDialogOverlay .npc-dialog-talk-view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  #npcDialogOverlay .npc-dialog-copy-block > .npc-dialog-greeting,
  #npcDialogOverlay .npc-dialog-copy-block > .npc-talk-topic-response,
  #npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-response {
    margin-bottom: 8px;
  }
}

#npcDialogOverlay .npc-conversation-quest-marker.is-daily {
  color: #75bdf4;
  text-shadow: 0 0 10px rgba(117, 189, 244, 0.52);
}

#npcDialogOverlay .npc-daily-list {
  display: grid;
  gap: 10px;
}

#npcDialogOverlay .npc-daily-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(172, 126, 50, 0.38);
  border-radius: 8px;
  background: rgba(10, 8, 5, 0.46);
}

#npcDialogOverlay .npc-daily-row.is-active {
  border-color: rgba(117, 189, 244, 0.46);
  background: rgba(25, 54, 72, 0.24);
}

#npcDialogOverlay .npc-daily-row.is-ready {
  border-color: rgba(156, 213, 98, 0.56);
  background: rgba(50, 72, 26, 0.3);
}

#npcDialogOverlay .npc-daily-row.is-completed {
  opacity: 0.58;
}

#npcDialogOverlay .npc-daily-title {
  color: #fff3d5;
  font-family: var(--font-title);
  font-size: 20px;
  line-height: 1.05;
}

#npcDialogOverlay .npc-daily-copy,
#npcDialogOverlay .npc-daily-meta {
  margin-top: 4px;
  color: rgba(238, 223, 190, 0.76);
  font-family: var(--font-readable);
  font-size: 14px;
  line-height: 1.35;
}

#npcDialogOverlay .npc-daily-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(236, 213, 160, 0.82);
}

#npcDialogOverlay .npc-daily-action .npc-dialog-btn {
  min-width: 104px;
}

#npcDialogOverlay .npc-daily-status {
  color: rgba(238, 223, 190, 0.64);
  font-family: var(--font-readable);
  font-size: 14px;
  font-weight: 800;
}

.npc-conversation-option:hover,
.npc-conversation-option:focus-visible,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:hover,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:focus-visible,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn:hover,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn:focus-visible,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn:hover,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn:focus-visible {
  color: #fff6df;
  transform: translateX(6px);
  text-shadow:
    0 3px 14px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(243, 215, 127, 0.36);
}

.npc-conversation-option:hover .npc-conversation-caret,
.npc-conversation-option:focus-visible .npc-conversation-caret,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:hover::before,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:focus-visible::before,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn:hover::before,
#npcDialogOverlay .npc-talk-prompt-choices .npc-dialog-btn:focus-visible::before,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn:hover::before,
#npcDialogOverlay .npc-talk-inline-actions .npc-dialog-btn:focus-visible::before {
  display: none;
  color: #f3d77f;
  text-shadow: 0 0 16px rgba(243, 215, 127, 0.6);
}

.npc-conversation-option.is-muted {
  margin-top: 12px;
  color: rgba(248, 238, 220, 0.5);
}

#npcDialogOverlay .npc-talk-topic-response,
#npcDialogOverlay .npc-dialog-copy-block,
#npcDialogOverlay .npc-dialog-quest-block {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* One consistent hierarchy for speech, narration and factual quest notes.
   These also apply to the quest conclusion card outside the conversation. */
.npc-dialog-passage { font-family: var(--font-readable); }
.npc-dialog-passage:lang(en) { quotes: "\201c" "\201d" "\2018" "\2019"; }
.npc-dialog-passage:lang(de) { quotes: "\201e" "\201c" "\201a" "\2018"; }
.npc-dialog-passage:lang(ru) { quotes: "\00ab" "\00bb" "\201e" "\201c"; }
.npc-dialog-speech.is-speech-continuation > q::before { content: no-open-quote; }
.npc-dialog-speech.is-speech-continued > q::after { content: no-close-quote; }
#npcDialogOverlay .npc-dialog-passage > p,
.quest-complete-copy.npc-dialog-passage > p { margin: 0; }
#npcDialogOverlay .npc-dialog-passage > p + p,
.quest-complete-copy.npc-dialog-passage > p + p { margin-top: 12px; }
#npcDialogOverlay .npc-dialog-passage .npc-dialog-speech,
.quest-complete-copy .npc-dialog-speech {
  color: #faeeda;
  font-size: inherit;
  line-height: 1.65;
  font-style: normal;
}
#npcDialogOverlay .npc-dialog-passage .npc-dialog-narration,
.quest-complete-copy .npc-dialog-narration {
  color: #c6baa6;
  font-size: 0.86em;
  line-height: 1.55;
  font-style: italic;
}
#npcDialogOverlay :is(.npc-dialog-passage, .npc-dialog-quest-summary) .npc-dialog-information,
.quest-complete-copy .npc-dialog-information {
  color: #d2c7b5;
  white-space: pre-line;
  font-family: var(--font-readable);
  font-size: clamp(15px, 0.85em, 19px);
  line-height: 1.55;
  font-style: normal;
  margin: 0;
}
#npcDialogOverlay .npc-dialog-quest-summary,
#npcDialogOverlay .npc-dialog-details,
.quest-complete-copy .npc-dialog-details {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(213, 185, 128, 0.35);
}
#npcDialogOverlay .npc-dialog-quest-summary .npc-dialog-quest-title {
  margin: 0 0 7px;
  color: #e2c68e;
  font-family: var(--font-readable);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}
#npcDialogOverlay .npc-dialog-quest-summary p + p { margin-top: 9px; }
#npcDialogOverlay .npc-talk-topic-response {
  display: flex;
  flex-direction: column;
  max-height: min(52cqh, 620px);
  overflow-y: hidden;
  overflow-x: hidden;
  padding-right: 12px;
}
#npcDialogOverlay .npc-dialog-response-copy {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#npcDialogOverlay .npc-talk-topic-response > .npc-talk-prompt { flex-shrink: 0; }
#npcDialogOverlay .npc-talk-topic-response .npc-talk-prompt-choices {
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  padding-left: 22px;
}
@container npc-dialog (min-width: 1101px) and (min-height: 601px) {
  #npcDialogOverlay .npc-dialog-copy-block > .npc-conversation-option-list,
  #npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-list {
    max-height: min(42cqh, 440px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
  }
  #npcDialogOverlay .npc-dialog-copy-block > .npc-conversation-option-list > button,
  #npcDialogOverlay .npc-dialog-talk-view > .npc-talk-topic-list > button {
    flex-shrink: 0;
  }
}

/* Only the reply moves; the conversation column and its geometry stay stable. */
#npcDialogOverlay .npc-response-animated {
  position: relative;
  pointer-events: auto;
}
#npcDialogOverlay .npc-response-animated::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 5px;
  bottom: 5px;
  width: 2px;
  background: rgba(238, 209, 143, 0.75);
  box-shadow: 0 0 10px rgba(238, 209, 143, 0.35);
  opacity: 0;
  animation: npc-response-accent 750ms ease-out;
  pointer-events: none;
}
#npcDialogOverlay .npc-response-animated:focus-visible {
  outline: 1px solid rgba(238, 209, 143, 0.5);
  outline-offset: 8px;
}
#npcDialogOverlay [data-action="open-talk-topic"] {
  transition: color 220ms ease, opacity 220ms ease, text-shadow 220ms ease;
}
@keyframes npc-response-accent {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}
#npcDialogOverlay .npc-response-reduced::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #npcDialogOverlay .npc-response-animated::before { animation: none; }
  #npcDialogOverlay [data-action="open-talk-topic"] { transition: none; }
}

.game-window.trade-office-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  box-sizing: border-box;
  overflow: hidden;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  color: #e9dfc9;
  background: #211c14;
  border: 1px solid #8b7546;
  border-radius: 12px;
  box-shadow: 0 20px 70px #000a;
}
.trade-office-dialog:not([open]) { display: none; }
.trade-office-dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
.trade-office-dialog > header {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px; border-bottom: 1px solid #8b754655;
}
.trade-office-dialog > header h2 { margin: 0; }
.trade-office-dialog > header button { font-size: 24px; padding: 4px 12px; }
.trade-office-body { padding: 20px 24px; overflow-y: auto; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; }
.trade-office-body .npc-dialog-module-view { max-width: none; }
.trade-office-body p, .trade-office-body h3, .trade-office-body h4 { margin: 0; }
.trade-office-body p { line-height: 1.5; }
.trade-office-body ul { margin: 8px 0; padding-left: 22px; }
.trade-office-body [data-office-message]:empty { display: none; }
.trade-office-body [data-office-section] { display: grid; gap: 12px; }
.trade-office-body .npc-daily-row { padding: 16px; border: 1px solid #8b754650; border-radius: 8px; background: #ffffff04; }
.trade-office-body .npc-daily-main { display: grid; gap: 10px; }
.trade-office-body .npc-dialog-btn { width: auto; justify-self: start; }
.trade-office-body [aria-pressed="true"] { border-color: #c5a86c; background: #66512b; }
.trade-office-body [hidden] { display: none !important; }

.npc-trade-overlay {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(5, 4, 3, 0.68);
  backdrop-filter: blur(3px);
}

.npc-trade-shell {
  width: min(1220px, calc(var(--canvas-visible-width, 1920px) - 56px));
  height: min(900px, calc(var(--canvas-visible-height, 1080px) - 56px));
  max-height: calc(var(--canvas-visible-height, 1080px) - 56px);
}

#npcTradeOverlay .npc-dialog-lowerbar.is-trade-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  box-sizing: border-box;
}

#npcTradeOverlay .npc-dialog-lowerbar.is-trade-view .npc-dialog-body {
  height: 100%;
  max-height: none;
  overflow: hidden;
}

#npcDialogOverlay .npc-dialog-lowerbar.is-trade-view .npc-dialog-actions:empty,
#npcTradeOverlay .npc-dialog-lowerbar.is-trade-view .npc-dialog-actions:empty {
  display: none;
}

#npcDialogOverlay .npc-dialog-lowerbar.is-trade-view,
#npcTradeOverlay .npc-dialog-lowerbar.is-trade-view {
  padding-bottom: 0;
}

#npcTradeOverlay .trade-window-layout {
  /* The item list owns the flexible space. A viewport-derived minimum height
     made the header/source switch additive and pushed the quantity, total and
     trade button below short Chrome viewports. */
  flex: 1 1 auto;
  min-height: 0;
}

/* Keep the location atmospheric during a conversation, but remove every
   competing scene interaction from the background. */
.npc-conversation-open .location-scene-window .location-scene-drawer,
.npc-conversation-open .location-scene-window .city-scene-node,
.npc-conversation-open .location-scene-window .location-scene-return-door {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.trade-switchbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.trade-switchbar > .trade-mode-tabs:first-child {
  flex: 0 1 50%;
  width: 50%;
  max-width: 50%;
}

.trade-source-tabs {
  flex: 0 1 calc(50% - 8px);
  width: calc(50% - 8px);
  max-width: calc(50% - 8px);
  opacity: 1;
  transform: translateX(0) scaleX(1);
  transform-origin: left center;
  overflow: hidden;
  transition:
    max-width 180ms ease,
    width 180ms ease,
    padding 180ms ease,
    border-width 180ms ease,
    opacity 130ms ease 35ms,
    transform 180ms ease;
}

.trade-source-tabs.is-collapsed {
  flex-basis: 0;
  width: 0;
  max-width: 0;
  padding-right: 0;
  padding-left: 0;
  border-right-width: 0;
  border-left-width: 0;
  opacity: 0;
  transform: translateX(-14px) scaleX(0.94);
  pointer-events: none;
}

.trade-mode-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 3px;
  margin: 0;
  border: 1px solid rgba(227, 196, 138, 0.14);
  border-radius: 11px;
  background: rgba(9, 7, 4, 0.56);
}

.trade-mode-tab {
  flex: 1;
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trade-mode-tab span {
  display: inline-grid;
  min-width: 20px;
  place-items: center;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  font-size: 11px;
}

.trade-mode-tab.is-active {
  border-color: rgba(231, 192, 105, 0.5);
  background: linear-gradient(180deg, rgba(149, 104, 40, 0.94), rgba(91, 57, 22, 0.96));
  box-shadow: inset 0 1px rgba(255, 233, 174, 0.22), 0 3px 10px rgba(0, 0, 0, 0.26);
  color: #fff7e7;
}

.trade-window-layout.is-single-pane {
  grid-template-columns: minmax(0, 1fr);
}

.trade-quantity-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.trade-qty-preset {
  min-width: 42px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(232, 194, 111, 0.42);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(125, 83, 31, 0.94), rgba(76, 47, 17, 0.96));
  color: #fff4dd;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.trade-qty-preset:hover,
.trade-qty-preset:focus-visible {
  border-color: rgba(255, 224, 145, 0.9);
  background: linear-gradient(180deg, rgba(167, 116, 45, 0.98), rgba(101, 62, 22, 0.98));
}

.trade-qty-preset.is-max {
  background: linear-gradient(180deg, rgba(94, 116, 60, 0.96), rgba(48, 70, 31, 0.98));
  border-color: rgba(174, 208, 113, 0.46);
}

.trade-total-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid rgba(235, 196, 108, 0.35);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(106, 70, 22, 0.86), rgba(47, 31, 11, 0.92));
}

.trade-total-confirm span {
  color: rgba(255, 238, 199, 0.78);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.trade-total-confirm strong {
  color: #ffe3a1;
  font-size: 18px;
}

/* Desktop management workspace: equipment and inventory are one working
   surface; opening a bank extends that same surface with storage. */
.character-workspace-collapse {
  display: none;
}

body.management-workspace-open #characterOverlay,
body.management-workspace-open #inventoryOverlay,
body.management-workspace-open #bankOverlay {
  z-index: 480;
}

body.management-workspace-open #characterOverlay .character-container,
body.management-workspace-open #inventoryOverlay .inventory-window,
body.management-workspace-open #bankOverlay .bank-window {
  top: 82px !important;
  bottom: auto;
  max-height: calc(var(--canvas-visible-height, 1080px) - 106px) !important;
  min-height: min(720px, calc(var(--canvas-visible-height, 1080px) - 106px));
  box-sizing: border-box;
  transition: left 180ms ease, width 180ms ease, transform 180ms ease, opacity 180ms ease;
}

body.management-workspace-inventory #characterOverlay .character-container {
  left: 18px !important;
  width: min(806.4px, 660px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window {
  left: min(calc(806.4px + 30px), 678px) !important;
  width: min(calc(1113.6px - 48px), 760px) !important;
  max-width: none;
}

body.management-workspace-bank #characterOverlay .character-container {
  left: 18px !important;
  width: min(480px, 420px) !important;
}

body.management-workspace-bank #bankOverlay .bank-window,
body.management-workspace-bank #bankOverlay #bankContent {
  left: calc(480px + 28px) !important;
  width: calc(960px - 44px) !important;
  max-width: none;
}

body.management-workspace-bank #inventoryOverlay .inventory-window {
  left: calc(1440px + 2px) !important;
  width: calc(480px - 20px) !important;
  max-width: none;
}

body.management-workspace-open #characterOverlay .character-workspace-collapse {
  position: absolute;
  z-index: 5;
  top: 50%;
  right: -16px;
  display: grid;
  width: 32px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(225, 192, 116, 0.42);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, rgba(92, 63, 27, 0.98), rgba(48, 29, 12, 0.98));
  color: #fff0c7;
  cursor: pointer;
  font: 800 28px/1 sans-serif;
}

body.management-workspace-open.management-character-collapsed #characterOverlay .character-container {
  transform: translateX(calc(-100% - 18px));
  opacity: 0;
  pointer-events: none;
}

body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: 18px !important;
  width: calc(var(--canvas-visible-width, 1920px) - 36px) !important;
}

/* Browser fallback: browser chrome can remove enough vertical space that the
   Character equipment would otherwise paint over Stats. The scrollbar is
   automatic, so it remains absent whenever the content fits. */
@media (min-width: 1024px) and (max-height: 900px) {
  body.management-workspace-inventory #characterOverlay .character-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.management-workspace-inventory #characterOverlay .character-main-row {
    flex: 0 0 auto;
    min-height: 460px;
  }
}

body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window,
body.management-workspace-bank.management-character-collapsed #bankOverlay #bankContent {
  left: 18px !important;
  width: calc(1190.4px - 28px) !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1190.4px + 8px) !important;
  width: calc(729.6px - 26px) !important;
}

body.management-workspace-open .management-discard-zone {
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(215, 103, 79, 0.66);
  border-radius: 10px;
  background: rgba(88, 28, 20, 0.28);
  color: rgba(255, 194, 171, 0.92);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The workspace should read as one administrative surface, not three
   draggable windows that merely happen to be open at the same time. */
body.management-workspace-open #characterOverlay .character-container,
body.management-workspace-open #inventoryOverlay .inventory-window,
body.management-workspace-open #bankOverlay .bank-window {
  border-color: rgba(218, 185, 108, 0.42);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.34);
}

body.management-workspace-open #characterOverlay .character-container {
  border-radius: 16px 0 0 16px;
}

body.management-workspace-open #bankOverlay .bank-window {
  border-radius: 0;
  border-left-color: rgba(236, 203, 128, 0.58);
  border-right-color: rgba(236, 203, 128, 0.58);
}

body.management-workspace-open #inventoryOverlay .inventory-window {
  border-radius: 0 16px 16px 0;
}

body.management-workspace-bank #characterOverlay .character-container {
  left: 6px !important;
  width: calc(422.4px - 6px) !important;
}

body.management-workspace-bank #bankOverlay .bank-window,
body.management-workspace-bank #bankOverlay #bankContent {
  left: 422.4px !important;
  width: 998.4px !important;
}

body.management-workspace-bank #inventoryOverlay .inventory-window {
  left: 1420.8px !important;
  width: calc(499.2px - 18px) !important;
}

body.management-workspace-inventory #characterOverlay .character-container {
  left: 6px !important;
  width: calc(729.6px - 6px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window {
  left: 729.6px !important;
  width: calc(1190.4px - 18px) !important;
}

body.management-workspace-open .bank-hero,
body.management-workspace-open .character-hero {
  min-height: 70px;
  padding: 9px 12px;
  gap: 9px;
}

body.management-workspace-open .bank-hero-icon-wrap,
body.management-workspace-open .character-hero-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

body.management-workspace-open .bank-hero-icon,
body.management-workspace-open .character-hero-icon {
  width: 27px;
  height: 27px;
}

body.management-workspace-open .bank-hero-copy h2,
body.management-workspace-open .character-hero .view-hero-copy h2 {
  font-size: clamp(20px, 25.92px, 28px);
}

body.management-workspace-open .bank-hero-stats,
body.management-workspace-open .character-hero-stats {
  gap: 5px;
}

body.management-workspace-open .bank-hero-stat,
body.management-workspace-open .character-hero-stat {
  min-height: 36px;
  padding: 5px 7px;
}

body.management-workspace-open .bank-slots,
body.management-workspace-open .inventory-slots {
  gap: 7px;
}

body.management-workspace-open .bank-slot,
body.management-workspace-open .inventory-slot {
  border-color: rgba(222, 191, 119, 0.3);
}

body.management-workspace-open .bank-slot img:not(.item-composite-layer),
body.management-workspace-open .bank-slot .item-composite-icon,
body.management-workspace-open .inventory-slot img:not(.item-composite-layer),
body.management-workspace-open .inventory-slot .item-composite-icon {
  width: min(40px, 68%);
  height: min(40px, 68%);
}

/* Character has much less horizontal room in the workspace. Keep its header
   to the same title grammar as bank and inventory; its detailed stats remain
   available in the character body instead of colliding with the title. */
body.management-workspace-open .character-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main collapse close";
  align-items: center;
}

body.management-workspace-open .character-hero .view-hero-main {
  grid-area: main;
  min-width: 0;
}

body.management-workspace-open .character-hero .view-hero-copy {
  min-width: 0;
}

body.management-workspace-open .character-hero .view-hero-copy h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(18px, 24px, 24px);
}

body.management-workspace-open .character-hero-stats {
  display: none;
}

body.management-workspace-open .character-hero .char-close {
  grid-area: close;
}

body.management-workspace-open #characterOverlay .character-container .character-workspace-collapse {
  grid-area: collapse;
  position: static !important;
  width: 28px;
  height: 36px;
  margin: 0;
  border-radius: 8px;
  font-size: 24px;
}

/* Bank → inventory → character: bank keeps the largest work area, inventory
   gains the width that used to be wasted by the oversized bank pane, and the
   equipment reference lives at the far right. */
body.management-workspace-bank #bankOverlay .bank-window,
body.management-workspace-bank #bankOverlay #bankContent {
  left: 6px !important;
  width: 883.2px !important;
}

body.management-workspace-bank #inventoryOverlay .inventory-window {
  left: 883.2px !important;
  width: 576px !important;
}

body.management-workspace-bank #characterOverlay .character-container {
  left: 1459.2px !important;
  width: calc(460.8px - 18px) !important;
  border-radius: 0 16px 16px 0;
}

body.management-workspace-bank #bankOverlay .bank-window {
  border-radius: 16px 0 0 16px;
}

body.management-workspace-bank #inventoryOverlay .inventory-window {
  border-radius: 0;
}

/* A single close button at the workspace edge is enough. */
body.management-workspace-bank #bankOverlay .bank-close,
body.management-workspace-bank #characterOverlay .char-close {
  display: none;
}

body.management-workspace-bank #inventoryOverlay .bank-close {
  display: inline-flex;
}

/* With the narrower bank and wider inventory their item grids now share the
   same practical cell size instead of looking like two different systems. */
body.management-workspace-bank #bankOverlay .bank-slots {
  grid-template-columns: repeat(9, minmax(52px, 1fr));
}

body.management-workspace-bank #inventoryOverlay .inventory-slots {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
}

body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window,
body.management-workspace-bank.management-character-collapsed #bankOverlay #bankContent {
  left: 6px !important;
  width: 1056px !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: 1056px !important;
  width: calc(864px - 18px) !important;
}

/* Shared outer bounds: every workspace pane starts and ends on the same
   horizontal line. Separator borders are owned by the pane on the right so
   adjoining windows never visually overlap. */
body.management-workspace-bank #characterOverlay .character-container,
body.management-workspace-bank #inventoryOverlay .inventory-window,
body.management-workspace-bank #bankOverlay .bank-window {
  top: 96px !important;
  height: calc(var(--canvas-visible-height, 1080px) - 196px) !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.management-workspace-bank #bankOverlay .bank-window {
  left: 6px !important;
  width: calc(883.2px - 6px) !important;
  border-right-width: 0;
}

body.management-workspace-bank #inventoryOverlay .inventory-window {
  left: 883.2px !important;
  width: calc(499.2px + 10px) !important;
  border-left-color: rgba(236, 203, 128, 0.68);
  border-right-width: 0;
  container-type: inline-size;
}

body.management-workspace-bank #characterOverlay .character-container {
  left: calc(1382.4px + 10px) !important;
  width: calc(537.6px - 28px) !important;
  border-left-color: rgba(236, 203, 128, 0.68);
}

@container (max-width: 390px) {
  body.management-workspace-bank #inventoryOverlay .inventory-slots {
    grid-template-columns: repeat(4, minmax(64px, 1fr));
  }
}

/* The Bank workspace constrains the Character pane. Scale its complete inner
   composition together before progressively hiding secondary detail. */
body.management-workspace-bank #characterOverlay .character-container {
  container-type: inline-size;
}

body.management-workspace-bank #characterOverlay .character-workspace-scale-frame {
  --character-workspace-scale: 1;
  display: flex;
  flex-direction: column;
  width: calc(100% / var(--character-workspace-scale));
  height: calc(100% / var(--character-workspace-scale));
  transform: scale(var(--character-workspace-scale));
  transform-origin: top left;
}

@container (max-width: 500px) {
  body.management-workspace-bank #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.92;
  }
}

@container (max-width: 430px) {
  body.management-workspace-bank #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.84;
  }

  body.management-workspace-bank #characterOverlay .stats-full-width {
    display: none;
  }
}

@container (max-width: 360px) {
  body.management-workspace-bank #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.78;
  }

  body.management-workspace-bank #characterOverlay .character-hero-stats {
    display: none;
  }
}

/* Character now deliberately shares the bank/inventory header treatment. */
body.management-workspace-bank #characterOverlay .character-hero {
  height: 132px;
  min-height: 132px;
  box-sizing: border-box;
  padding: 12px 14px;
  background:
    radial-gradient(circle at left center, rgba(197, 179, 109, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.12)) !important;
  border-bottom: 1px solid rgba(214, 184, 116, 0.16) !important;
  align-items: start;
}

body.management-workspace-bank #characterOverlay .character-hero-icon-wrap {
  background:
    linear-gradient(180deg, rgba(215, 197, 134, 0.16), rgba(98, 77, 34, 0.24)) !important;
  border-color: rgba(214, 184, 116, 0.18) !important;
}

body.management-workspace-bank #characterOverlay .character-hero,
body.management-workspace-bank #inventoryOverlay .bank-hero,
body.management-workspace-bank #bankOverlay .bank-hero {
  background-color: rgba(28, 20, 11, 0.96) !important;
}

body.management-workspace-bank #inventoryOverlay .bank-hero {
  height: 70px;
  min-height: 70px;
  box-sizing: border-box;
}

body.management-workspace-bank #bankOverlay .storage-bank-hero {
  height: 70px;
  min-height: 70px;
  box-sizing: border-box;
}

/* Both grids use the same rendered item scale; the inventory's narrower
   cells need a slightly higher percentage to avoid its icons feeling tiny. */
body.management-workspace-bank #bankOverlay .bank-slot img:not(.item-composite-layer),
body.management-workspace-bank #bankOverlay .bank-slot .item-composite-icon {
  width: min(46px, 72%);
  height: min(46px, 72%);
}

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

body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window {
  left: 6px !important;
  width: calc(1113.6px - 6px) !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: 1113.6px !important;
  width: calc(806.4px - 18px) !important;
}

.game-confirm-overlay {
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  border: 0;
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 3, 2, 0.66);
  backdrop-filter: blur(5px);
}

.game-confirm-dialog {
  width: min(420px, calc(var(--canvas-visible-width, 1920px) - 48px));
  padding: 22px;
  border: 1px solid rgba(221, 181, 94, 0.54);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(47, 34, 18, 0.98), rgba(19, 13, 7, 0.99));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 239, 196, 0.08);
  color: #f8eedc;
}

.game-confirm-kicker {
  color: rgba(242, 207, 129, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-confirm-dialog h3 {
  margin: 5px 0 8px;
  color: #fff1cf;
  font-family: var(--font-accent);
  font-size: 25px;
}

.game-confirm-dialog p {
  margin: 0;
  color: rgba(255, 242, 216, 0.82);
}

.game-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}

.game-confirm-actions .is-danger {
  background: linear-gradient(180deg, rgba(159, 68, 47, 0.98), rgba(95, 35, 25, 0.98));
  border-color: rgba(239, 127, 92, 0.58);
}

.game-quantity-row {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.game-quantity-row input {
  width: 120px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(225, 188, 106, 0.42);
  border-radius: 8px;
  background: rgba(7, 5, 3, 0.6);
  color: #fff0cf;
  font: inherit;
}

/* Collapsing Character is a visibility choice, not a resize action. Keep the
   bank and inventory exactly where they were and leave the right area empty. */
body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window {
  left: 6px !important;
  width: calc(883.2px - 6px) !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: 883.2px !important;
  width: 499.2px !important;
}

/* Restore tab: a real element replaces every legacy text/pseudo-chevron.
   Keeping its own full-size grid makes its centre deterministic. */
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  display: block !important;
  font-size: 0 !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::before,
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::after {
  content: none !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: inherit;
  font: 800 28px/1 sans-serif;
  transform: translateX(-1px);
}

/* Final desktop workspace geometry.
   A collapsed Character pane frees visual space, never grid space: the two
   working panes retain their dimensions and move past the actual sidebar. */
body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window,
body.management-workspace-bank.management-character-collapsed #bankOverlay #bankContent {
  left: calc(var(--ui-sidebar-width) + 6px) !important;
  width: calc(883.2px - 6px) !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(var(--ui-sidebar-width) + 883.2px) !important;
  width: 499.2px !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  left: calc(var(--ui-sidebar-width) + 1382.4px - 1px);
}

/* Inventory workspace: the same quiet, compact surface as banking, only
   Character → Inventory. Neither pane expands to fill the viewport. */
body.management-workspace-inventory #characterOverlay .character-container,
body.management-workspace-inventory #inventoryOverlay .inventory-window {
  top: 96px !important;
  height: calc(var(--canvas-visible-height, 1080px) - 196px) !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(883.2px - 18px) !important;
  width: calc(537.6px - 6px) !important;
  border-radius: 16px 0 0 16px;
  border-right-width: 0;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window {
  left: calc(1420.8px - 18px) !important;
  width: 499.2px !important;
  border-radius: 0 16px 16px 0;
  border-left-color: rgba(236, 203, 128, 0.68);
}

body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1420.8px - 18px) !important;
  width: 499.2px !important;
}

body.management-workspace-inventory #characterOverlay .char-close {
  display: none;
}

body.management-workspace-inventory #inventoryOverlay .bank-close {
  display: inline-flex;
}

body.management-workspace-inventory #inventoryOverlay .inventory-slots {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
}

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

#npcDialogOverlay .npc-social-relationship {
  margin: 8px 0 14px;
  color: rgba(236, 213, 160, 0.84);
  font-family: var(--font-readable);
  font-size: 14px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

#npcDialogOverlay .npc-social-memory,
#npcDialogOverlay .npc-social-initiative,
#npcDialogOverlay .npc-social-promise {
  width: min(620px, 100%);
  margin-top: 12px;
  padding: 10px 14px;
  border-left: 2px solid rgba(243, 215, 127, 0.46);
  background: rgba(15, 11, 7, 0.28);
}

#npcDialogOverlay .npc-social-promise-progress {
  color: rgba(246, 234, 206, 0.9);
  font-weight: 800;
}

#npcDialogOverlay .npc-social-action-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 4px;
}

#npcDialogOverlay .npc-social-gift-select {
  width: min(520px, 100%);
  margin: 0 0 6px;
}

#npcDialogOverlay .npc-conversation-option:disabled,
#npcDialogOverlay .npc-conversation-option:disabled:hover,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:disabled,
#npcDialogOverlay .npc-talk-topic-list .npc-dialog-btn:disabled:hover {
  color: rgba(248, 238, 220, 0.32);
  cursor: not-allowed;
  transform: none;
  text-shadow: none;
}

.quantity-action-overlay {
  z-index: 4200;
}

.quantity-action-dialog {
  width: min(440px, calc(var(--canvas-visible-width, 1920px) - 48px));
}

.tool-durability-selection .quantity-action-dialog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(var(--canvas-visible-height, 100dvh) - 48px);
}
.tool-durability-selection .quantity-action-dialog > :not(.quality-amounts) { flex-shrink: 0; }
.tool-durability-selection .quality-amounts { min-height: 0; overflow-y: auto; }
.tool-durability-selection .quality-amount-row:has(input:disabled) { opacity: .6; }

.quantity-action-item {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 8px 0 14px;
}

.quantity-action-item .quantity-action-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: contain;
  padding: 6px;
  border: 1px solid rgba(221, 181, 94, 0.28);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.24);
}

.quantity-action-item h3 {
  margin: 0 0 3px;
}

.quantity-action-item span {
  color: rgba(255, 242, 216, 0.66);
  font-size: 13px;
}

.quantity-action-warning {
  padding: 10px 12px;
  border: 1px solid rgba(222, 92, 70, 0.4);
  border-radius: 9px;
  background: rgba(126, 36, 25, 0.2);
  color: #ffd1c6 !important;
}

.quantity-action-stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  margin-top: 16px;
}

.quantity-action-stepper button,
.quantity-action-stepper input,
.quantity-action-presets button {
  min-height: 40px;
  border: 1px solid rgba(225, 188, 106, 0.34);
  border-radius: 8px;
  background: rgba(7, 5, 3, 0.5);
  color: #fff0cf;
  font: inherit;
  font-size: 12px;
}

.trade-mode-tab:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.trade-source-tabs .trade-mode-tab.is-active {
  border-color: rgba(177, 196, 128, 0.42);
  background: linear-gradient(180deg, rgba(92, 108, 57, 0.92), rgba(48, 62, 31, 0.96));
}


.quantity-action-stepper input {
  min-width: 0;
  padding: 8px 10px;
  text-align: center;
}

.quantity-action-stepper button:hover,
.quantity-action-presets button:hover {
  border-color: rgba(225, 188, 106, 0.68);
  background: rgba(225, 188, 106, 0.14);
}

.quantity-action-presets {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}

.quantity-action-presets button {
  flex: 1;
  padding: 6px 9px;
}

.bank-action-menu > button.is-danger {
  margin-top: 3px;
  border-color: rgba(213, 92, 70, 0.38);
  color: #ffc6b8;
}

.bank-action-menu > button.is-danger:hover {
  background: rgba(146, 48, 34, 0.34);
}

.quest-letter-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 13000;
}

.quest-letter-sheet {
  position: relative;
  width: min(520px, calc(100vw - 40px));
  max-height: min(620px, calc(100vh - 48px));
  overflow: auto;
  padding: 38px 42px 44px;
  color: #493821;
  background: linear-gradient(135deg, rgba(255, 248, 216, 0.98), rgba(220, 190, 128, 0.98));
  border: 1px solid rgba(105, 72, 29, 0.75);
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.72), inset 0 0 45px rgba(111, 72, 25, 0.16);
}

.quest-letter-kicker {
  display: block;
  margin-bottom: 7px;
  color: #806333;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quest-letter-sheet h3 {
  margin: 0 0 24px;
  color: #382713;
}

#readableItemOverlay {
  padding: clamp(12px, 2.5vw, 28px);
  overflow: hidden;
}

#readableItemOverlay .readable-item-sheet {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  height: min(900px, 100%);
  max-height: 100%;
  min-height: 0;
  padding: 32px;
  overflow: hidden;
}

.readable-item-header { flex: 0 0 auto; padding-right: 32px; }
.readable-item-header h3 { margin-bottom: 16px; }
.readable-item-sheet .quest-letter-close { z-index: 3; }

.readable-item-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 12px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.readable-item-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(105, 72, 29, .3);
}

.readable-item-contents a { color: #493821; text-decoration: underline; }
.readable-item-chapter { scroll-margin-top: 16px; }
.readable-item-chapter h4 { margin: 24px 0 8px; font-size: 18px; color: #382713; }
.readable-item-chapter p { margin: 0; font-size: 15px; line-height: 1.65; }

@media (max-width: 600px) {
  #readableItemOverlay .readable-item-sheet { padding: 32px 18px 20px; }
  .readable-item-body { padding-right: 4px; }
}

.quest-letter-body {
  font-size: 16px;
  line-height: 1.75;
  white-space: normal;
}

.quest-letter-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #5b4324;
  border: 0;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
}

/* Final Character + Inventory geometry. This block intentionally lives after
   every legacy workspace rule so the wider, readable pair cannot be reset by
   an older compact-layout declaration. */
body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(844.8px - 91px) !important;
  width: calc(537.6px + 58px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window,
body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1382.4px - 33px) !important;
  width: calc(537.6px - 3px) !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore {
  left: calc(1382.4px - 63px);
}

/* Final compact Character geometry for the two desktop workspaces. Keep the
   pane at its natural scale; only its internal cards and slots get denser so
   Stats has a real row of its own instead of overlapping equipment. */
body.management-workspace-open #characterOverlay .character-body {
  padding: 10px 12px 12px;
  gap: 10px;
}

body.management-workspace-open #characterOverlay .character-main-row {
  gap: 12px;
}

body.management-workspace-open #characterOverlay .left-column {
  width: 180px;
  gap: 10px;
}

body.management-workspace-open #characterOverlay .character-panel-card {
  gap: 7px;
}

body.management-workspace-open #characterOverlay .character-panel-card h3 {
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
}

body.management-workspace-open #characterOverlay .character-portrait {
  height: auto;
  min-height: 290px;
  border-radius: 11px;
}

body.management-workspace-open #characterOverlay .equipment-grid {
  padding: 2px 4px 0;
}

body.management-workspace-open #characterOverlay .equip-layout {
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(5, 54px);
  gap: 6px;
}

body.management-workspace-open #characterOverlay .equip-slot {
  width: 54px;
  height: 54px;
}

body.management-workspace-open #characterOverlay .tools-grid {
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 6px;
}

body.management-workspace-open #characterOverlay .tool-slot {
  width: 48px;
  height: 48px;
}

/* Give the Inventory pane an extra column's breathing room while keeping the
   complete Character → Inventory pair right-aligned and flush. */
body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(844.8px - 12px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window,
body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1382.4px - 18px) !important;
  width: calc(537.6px - 18px) !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore {
  left: calc(1382.4px - 48px);
}

/* One Character presentation for both desktop workspaces.
   The pane is deliberately scaled as one unit; do not separately shrink
   portrait, tools, equipment, or stats. That keeps Banking and
   Character/Inventory visually identical at the same pane width. */
body.management-workspace-open #characterOverlay .character-workspace-scale-frame {
  --character-workspace-scale: 0.88;
  display: flex;
  flex: 0 0 calc(100% / var(--character-workspace-scale));
  flex-direction: column;
  width: calc(100% / var(--character-workspace-scale));
  height: calc(100% / var(--character-workspace-scale));
  min-height: 0;
  transform: scale(var(--character-workspace-scale));
  transform-origin: top left;
}

body.management-workspace-open #characterOverlay .character-container {
  container-type: inline-size;
}

@container (max-width: 500px) {
  body.management-workspace-open #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.82;
  }
}

@container (max-width: 430px) {
  body.management-workspace-open #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.76;
  }

  body.management-workspace-open #characterOverlay .stats-full-width {
    display: flex;
  }
}

@container (max-width: 360px) {
  body.management-workspace-open #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.7;
  }
}

/* Reset the temporary per-section compression. The compact stats cards remain,
   but the Character composition itself is again its normal, familiar layout. */
body.management-workspace-open #characterOverlay .character-body {
  padding: 12px 16px 16px;
  gap: 14px;
  overflow: hidden;
}

body.management-workspace-open #characterOverlay .character-main-row {
  flex: 0 0 auto;
  gap: 16px;
  min-height: 340px;
}

body.management-workspace-open #characterOverlay .left-column {
  width: 195px;
  gap: 14px;
}

body.management-workspace-open #characterOverlay .character-panel-card {
  gap: 10px;
}

body.management-workspace-open #characterOverlay .character-panel-card h3 {
  font-size: 13px;
}

body.management-workspace-open #characterOverlay .character-portrait {
  height: auto;
  min-height: 290px;
  border-radius: 16px;
}

body.management-workspace-open #characterOverlay .equipment-grid {
  padding: 2px 6px 0;
}

body.management-workspace-open #characterOverlay .equip-layout {
  grid-template-columns: repeat(3, 64px);
  grid-template-rows: repeat(5, 64px);
  gap: 8px;
}

body.management-workspace-open #characterOverlay .equip-slot {
  width: 64px;
  height: 64px;
}

body.management-workspace-open #characterOverlay .tools-grid {
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(2, 54px);
  gap: 8px;
}

body.management-workspace-open #characterOverlay .tool-slot {
  width: 54px;
  height: 54px;
}

/* Character + Inventory has the extra horizontal room that Banking does not.
   Keep its right edge fixed, make Inventory wide enough for its fifth column,
   and spend the remaining space on a more legible Character/Stats pane. */
body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(844.8px - 91px) !important;
  width: calc(537.6px + 58px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window,
body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1382.4px - 33px) !important;
  width: calc(537.6px - 3px) !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore {
  left: calc(1382.4px - 63px);
}

body.management-workspace-inventory #characterOverlay .character-workspace-scale-frame {
  --character-workspace-scale: 0.92;
}

body.management-workspace-inventory #characterOverlay .stats-grid {
  gap: 8px;
}

body.management-workspace-inventory #characterOverlay .stats-grid > div {
  padding: 9px 10px;
  gap: 5px;
}

body.management-workspace-inventory #characterOverlay .stats-grid h4 {
  font-size: 13px;
}

body.management-workspace-inventory #characterOverlay .stat-row,
body.management-workspace-inventory #characterOverlay .stat-value {
  font-size: 12px;
}

@container (max-width: 500px) {
  body.management-workspace-inventory #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.86;
  }
}

@container (max-width: 430px) {
  body.management-workspace-inventory #characterOverlay .character-workspace-scale-frame {
    --character-workspace-scale: 0.8;
  }
}

/* Inventory-only final geometry: compact, right-aligned and never enlarged
   when the Character pane is temporarily hidden. */
body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(883.2px - 18px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window,
body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1420.8px - 18px) !important;
  width: 499.2px !important;
}

body.management-workspace-inventory #characterOverlay .character-container:has(.character-title-select-wrap.is-open),
body.management-workspace-bank #characterOverlay .character-container:has(.character-title-select-wrap.is-open) {
  overflow: visible;
}

body.management-workspace-inventory #characterOverlay .character-title-menu {
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  width: 100%;
  max-width: none;
  max-height: min(250px, calc(var(--canvas-visible-height, 1080px) - 260px));
  overflow-y: auto;
  padding: 5px;
  border-color: rgba(219, 181, 104, 0.42);
  background: var(--material-wood-deep);
}

body.management-workspace-inventory #characterOverlay .character-title-option {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 11px;
}

body.management-workspace-inventory #characterOverlay .character-title-lock-hint {
  display: none !important;
}

body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(var(--ui-sidebar-width) + 6px) !important;
  width: 499.2px !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore {
  position: fixed;
  z-index: 520;
  top: calc(540px - 34px);
  left: calc(var(--ui-sidebar-width) + 499.2px - 1px);
  display: block !important;
  width: 30px;
  height: 68px;
  padding: 0;
  border: 1px solid rgba(236, 203, 128, 0.68);
  border-left: 0;
  border-radius: 0 11px 11px 0;
  background: linear-gradient(180deg, rgba(90, 59, 23, 0.98), rgba(43, 26, 10, 0.98));
  box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.3);
  color: #fff0c7;
  cursor: pointer;
  font-size: 0 !important;
  pointer-events: auto;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore::before,
body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore::after {
  content: none !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: inherit;
  font: 800 28px/1 sans-serif;
  transform: translateX(-1px);
}

/* Inventory-only workspace stays a compact right-aligned pair. */
body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(883.2px - 18px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window {
  left: calc(1420.8px - 18px) !important;
}

/* Collapsing the Character panel must not turn the inventory into a full
   screen surface; it keeps its exact width and remains right-aligned. */
body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1420.8px - 18px) !important;
  width: 499.2px !important;
}

/* The title menu intentionally leaves the header. It is an overlay, so the
   Character shell must not clip it while the picker is open. */
body.management-workspace-inventory #characterOverlay .character-container:has(.character-title-select-wrap.is-open),
body.management-workspace-bank #characterOverlay .character-container:has(.character-title-select-wrap.is-open) {
  overflow: visible;
}

body.management-workspace-inventory #characterOverlay .character-title-menu {
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  width: 100%;
  max-width: none;
  max-height: min(250px, calc(var(--canvas-visible-height, 1080px) - 260px));
  overflow-y: auto;
  padding: 5px;
  border-color: rgba(219, 181, 104, 0.42);
  background: var(--material-wood-deep);
}

body.management-workspace-inventory #characterOverlay .character-title-option {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 11px;
}

body.management-workspace-inventory #characterOverlay .character-container {
  background: var(--material-wood) !important;
  border-color: rgba(219, 181, 104, 0.42) !important;
  box-shadow: var(--material-shadow) !important;
}

body.management-workspace-inventory #characterOverlay .character-body {
  background: transparent !important;
}

body.management-workspace-inventory #characterOverlay .character-panel-card,
body.management-workspace-inventory #characterOverlay .character-portrait,
body.management-workspace-inventory #characterOverlay .stats-grid > *,
body.management-workspace-inventory #characterOverlay .equipment-area,
body.management-workspace-inventory #characterOverlay .tools-section {
  background: var(--material-wood-deep) !important;
  border-color: rgba(219, 181, 104, 0.2) !important;
  box-shadow: var(--material-shadow-soft) !important;
}

body.management-workspace-inventory #characterOverlay .character-hero,
body.management-workspace-inventory #inventoryOverlay .bank-hero {
  height: 132px;
  min-height: 132px;
  box-sizing: border-box;
  background: var(--material-wood-horizontal) !important;
  background-color: rgba(28, 20, 11, 0.96) !important;
}

body.management-workspace-inventory #characterOverlay .character-hero {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(214, 184, 116, 0.16) !important;
  align-items: start;
}

body.management-workspace-inventory #characterOverlay .character-hero-icon-wrap {
  background: linear-gradient(180deg, rgba(215, 197, 134, 0.16), rgba(98, 77, 34, 0.24)) !important;
  border-color: rgba(214, 184, 116, 0.18) !important;
}

body.management-workspace-inventory #characterOverlay .character-hero {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main stats collapse";
}

body.management-workspace-inventory #characterOverlay .character-hero-stats {
  grid-area: stats;
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
  gap: 4px;
}

body.management-workspace-inventory #characterOverlay .character-hero-stat {
  min-width: 44px;
  min-height: 42px;
  padding: 5px 6px;
  border-color: rgba(219, 181, 104, 0.2);
  background: var(--material-wood-deep);
}

body.management-workspace-inventory #characterOverlay .character-hero-stat span {
  font-size: 8px;
}

body.management-workspace-inventory #characterOverlay .character-hero-stat strong {
  font-size: 14px;
}

body.management-workspace-inventory #characterOverlay .character-title-select-wrap {
  position: absolute;
  z-index: 12;
  top: 74px;
  left: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 180px);
  align-items: center;
  min-height: 26px;
  padding: 0;
  gap: 6px;
}

body.management-workspace-inventory #characterOverlay .character-title-select {
  min-height: 26px;
  padding: 4px 7px;
  border-color: rgba(219, 181, 104, 0.28);
  background: var(--material-wood-deep);
  font-size: 11px;
}

/* Keep the restore chevron optically and geometrically centered in its tab.
   It is absolutely centered so browser glyph metrics cannot push it sideways. */
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  display: grid !important;
  place-items: center !important;
  text-indent: 0 !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateX(-1px);
}

body.management-workspace-bank #characterOverlay .character-workspace-collapse::before,
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::before {
  content: "\203A";
}

body.management-workspace-bank #characterOverlay .character-container .character-workspace-collapse {
  width: 44px;
  height: 48px;
  border-radius: 10px;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  width: 42px;
  height: 76px;
}

/* Character uses the same wood/material layer as the other workspace panes,
   including its inner cards. This deliberately replaces the legacy cool,
   green-grey character palette while the workspace is open. */
body.management-workspace-bank #characterOverlay .character-container {
  background: var(--material-wood) !important;
  border-color: rgba(219, 181, 104, 0.42) !important;
  box-shadow: var(--material-shadow) !important;
}

body.management-workspace-bank #characterOverlay .character-body {
  background: transparent !important;
}

body.management-workspace-bank #characterOverlay .character-panel-card,
body.management-workspace-bank #characterOverlay .character-portrait,
body.management-workspace-bank #characterOverlay .stats-grid > *,
body.management-workspace-bank #characterOverlay .equipment-area,
body.management-workspace-bank #characterOverlay .tools-section {
  background: var(--material-wood-deep) !important;
  border-color: rgba(219, 181, 104, 0.2) !important;
  box-shadow: var(--material-shadow-soft) !important;
}

body.management-workspace-bank #characterOverlay .character-hero,
body.management-workspace-bank #bankOverlay .bank-hero,
body.management-workspace-bank #inventoryOverlay .bank-hero {
  background: var(--material-wood-horizontal) !important;
}

/* Keep the title and badge controls compact in the widened Character pane. */
body.management-workspace-bank #characterOverlay .character-hero {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "main stats collapse";
}

body.management-workspace-bank #characterOverlay .character-hero-stats {
  grid-area: stats;
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
  gap: 4px;
}

body.management-workspace-bank #characterOverlay .character-hero-stat {
  min-width: 44px;
  min-height: 42px;
  padding: 5px 6px;
  border-color: rgba(219, 181, 104, 0.2);
  background: var(--material-wood-deep);
}

body.management-workspace-bank #characterOverlay .character-hero-stat span {
  font-size: 8px;
}

body.management-workspace-bank #characterOverlay .character-hero-stat strong {
  font-size: 14px;
}

body.management-workspace-bank #characterOverlay .character-title-select-wrap {
  position: absolute;
  z-index: 12;
  top: 74px;
  left: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 180px);
  align-items: center;
  min-height: 26px;
  padding: 0;
  gap: 6px;
}

body.management-workspace-bank #characterOverlay .character-title-select-wrap > span {
  color: rgba(242, 234, 215, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.management-workspace-bank #characterOverlay .character-title-select {
  min-height: 26px;
  padding: 4px 7px;
  border-color: rgba(219, 181, 104, 0.28);
  background: var(--material-wood-deep);
  font-size: 11px;
}

body.management-workspace-bank #characterOverlay .character-title-menu {
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  width: 100%;
  max-width: none;
  max-height: min(250px, calc(var(--canvas-visible-height, 1080px) - 260px));
  overflow-y: auto;
  padding: 5px;
  border-color: rgba(219, 181, 104, 0.42);
  background: var(--material-wood-deep);
}

body.management-workspace-bank #characterOverlay .character-title-option {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 11px;
}

body.management-workspace-bank #characterOverlay .character-title-lock-hint {
  display: none !important;
}

.character-title-lock-tooltip {
  position: fixed;
  z-index: 1300;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid rgba(219, 181, 104, 0.42);
  border-radius: 8px;
  background: var(--material-wood-deep);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48);
  color: #f8eedc;
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}

.city-arrival-presentation {
  position: fixed;
  z-index: 2100;
  top: 216px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(620px, calc(var(--canvas-visible-width, 1920px) - 48px));
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  color: #fff2d1;
  text-align: center;
  animation: cityArrivalReveal 4.3s ease both;
}

.city-arrival-presentation::before {
  position: absolute;
  z-index: 0;
  inset: -44px -96px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(8, 10, 12, 0.76) 0%, rgba(8, 10, 12, 0.5) 40%, rgba(8, 10, 12, 0) 76%);
  content: '';
  opacity: 1;
  transition: opacity 90ms ease-out;
}

.city-arrival-presentation > * {
  position: relative;
  z-index: 1;
  transition: opacity 90ms ease-out;
}

.city-arrival-presentation.city-arrival-presentation--muted::before {
  opacity: 0.12;
}

.city-arrival-presentation.city-arrival-presentation--muted > * {
  opacity: 0.28;
}

.city-arrival-kicker {
  margin: 10px 0 4px;
  color: rgba(239, 207, 137, 0.8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.city-arrival-presentation strong {
  font-family: var(--font-accent);
  font-size: clamp(36px, 96px, 64px);
  line-height: 1;
  text-shadow: 0 5px 24px rgba(0, 0, 0, 0.82), 0 0 30px rgba(226, 182, 94, 0.2);
}

.city-arrival-detail {
  margin-top: 12px;
  color: rgba(255, 240, 210, 0.82);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.city-arrival-detail i {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px 3px;
  border-radius: 50%;
  background: rgba(240, 203, 124, 0.88);
}

.city-arrival-rule {
  width: min(100%, 430px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 201, 122, 0.72), transparent);
}

/* Compact Character stats for both desktop workspaces.
   The old cards inherited default h4 margins and a 140px minimum height. In a
   constrained Character pane that could make the heading dominate each card
   and push the Stats section into the Tools/Equipment area. */
body.management-workspace-open #characterOverlay .character-workspace-scale-frame,
body.management-workspace-open #characterOverlay .character-body {
  min-height: 0;
}

body.management-workspace-open #characterOverlay .character-body {
  overflow: hidden;
}

@media (min-width: 1024px) and (max-height: 900px) {
  body.management-workspace-inventory #characterOverlay .character-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.management-workspace-inventory #characterOverlay .character-main-row {
    flex: 0 0 auto;
    min-height: 460px;
  }
}

body.management-workspace-open #characterOverlay .character-main-row {
  flex: 0 1 auto;
  min-height: 0;
}

@media (min-width: 1024px) and (max-height: 900px) {
  body.management-workspace-open.management-workspace-inventory #characterOverlay .character-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  body.management-workspace-open.management-workspace-inventory #characterOverlay .character-main-row {
    flex: 0 0 auto;
    min-height: 460px;
  }
}

body.management-workspace-open #characterOverlay .stats-full-width {
  flex: 0 0 auto;
  min-height: 0;
  gap: 6px;
}

body.management-workspace-open #characterOverlay .stats-full-width > h3 {
  margin: 0;
  font-size: 12px;
  line-height: 1.1;
}

body.management-workspace-open #characterOverlay .stats-grid {
  gap: 6px;
}

body.management-workspace-open #characterOverlay .stats-grid > div {
  min-height: 0;
  padding: 7px 8px;
  gap: 4px;
  border-radius: 9px;
}

body.management-workspace-open #characterOverlay .stats-grid h4 {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 1.1;
}

body.management-workspace-open #characterOverlay .stat-row {
  gap: 4px;
  font-size: 11px;
  line-height: 1.2;
}

body.management-workspace-open #characterOverlay .stat-value {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 11px;
}

/* The chevrons are real button text, normalized by characterOverlay.js.
   Explicitly disable legacy pseudo-chevron rules so no encoded fallback text
   can be painted underneath the button. */
body.management-workspace-bank #characterOverlay .character-workspace-collapse,
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  font: 800 24px/1 sans-serif !important;
}

body.management-workspace-bank #characterOverlay .character-workspace-collapse::before,
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::before {
  content: none !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  font-size: 0 !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::after {
  content: "\203A";
  display: block;
  font: 800 28px/1 sans-serif;
}

@keyframes cityArrivalReveal {
  0% { opacity: 0; transform: translate(-50%, 18px); }
  8% { opacity: 1; transform: translate(-50%, 0); }
  77% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}

body.management-workspace-bank #characterOverlay .character-hero::after {
  left: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(219, 181, 104, 0.1), rgba(243, 215, 127, 0.42), rgba(219, 181, 104, 0.1)) !important;
}

body.management-workspace-bank #characterOverlay .character-portrait {
  color: rgba(245, 231, 199, 0.58);
}

body.management-workspace-open .character-workspace-restore {
  display: none;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  border-right-width: 1px;
  border-right-color: rgba(236, 203, 128, 0.68);
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  position: fixed;
  z-index: 520;
  top: calc(540px - 34px);
  left: calc(1382.4px - 1px);
  display: grid;
  width: 30px;
  height: 68px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(236, 203, 128, 0.68);
  border-left: 0;
  border-radius: 0 11px 11px 0;
  background: linear-gradient(180deg, rgba(90, 59, 23, 0.98), rgba(43, 26, 10, 0.98));
  box-shadow: 8px 10px 24px rgba(0, 0, 0, 0.3);
  color: #fff0c7;
  cursor: pointer;
  font-size: 0;
  pointer-events: auto;
}

body.management-workspace-bank #characterOverlay .character-workspace-collapse {
  font-size: 0;
}

body.management-workspace-bank #characterOverlay .character-workspace-collapse::before,
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::before {
  content: '›';
  font: 800 24px/1 sans-serif;
}

body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: 6px !important;
  width: calc(var(--canvas-visible-width, 1920px) - 24px) !important;
}

body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window,
body.management-workspace-bank.management-character-collapsed #bankOverlay #bankContent {
  left: 6px !important;
  width: calc(883.2px - 6px) !important;
}

body.management-workspace-bank.management-character-collapsed #inventoryOverlay .inventory-window {
  left: 883.2px !important;
  width: 499.2px !important;
}

/* Restore tab: one real icon, centered by a full-size grid. */
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  display: block !important;
  font-size: 0 !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::before,
body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore::after {
  content: none !important;
}

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: inherit;
  font: 800 28px/1 sans-serif;
  transform: translateX(-1px);
}

/* Inventory-only final geometry: compact, right-aligned and never enlarged
   when the Character pane is temporarily hidden. */
body.management-workspace-inventory #characterOverlay .character-container {
  left: calc(883.2px - 18px) !important;
}

body.management-workspace-inventory #inventoryOverlay .inventory-window,
body.management-workspace-inventory.management-character-collapsed #inventoryOverlay .inventory-window {
  left: calc(1420.8px - 18px) !important;
  width: 499.2px !important;
}

body.management-workspace-inventory #characterOverlay .character-container:has(.character-title-select-wrap.is-open),
body.management-workspace-bank #characterOverlay .character-container:has(.character-title-select-wrap.is-open) {
  overflow: visible;
}

body.management-workspace-inventory #characterOverlay .character-title-menu {
  top: calc(100% + 4px);
  right: auto;
  left: 0;
  width: 100%;
  max-width: none;
  max-height: min(250px, calc(var(--canvas-visible-height, 1080px) - 260px));
  overflow-y: auto;
  padding: 5px;
  border-color: rgba(219, 181, 104, 0.42);
  background: var(--material-wood-deep);
}

body.management-workspace-inventory #characterOverlay .character-title-option {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 11px;
}

/* Definitive layout rules — deliberately placed after the older workspace
   experiments so these are the only geometry values that win. */
body.management-workspace-bank.management-character-collapsed #bankOverlay .bank-window,
body.management-workspace-bank.management-character-collapsed #bankOverlay #bankContent {
  left: var(--management-bank-collapsed-left) !important;
  right: auto !important;
  width: var(--management-bank-collapsed-bank-width) !important;
  max-width: none !important;
}

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

body.management-workspace-bank.management-character-collapsed #characterOverlay .character-workspace-restore {
  left: calc(var(--management-bank-collapsed-left) + var(--management-bank-collapsed-bank-width) + var(--management-bank-collapsed-inventory-width) - 1px);
}

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

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

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

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

body.management-workspace-inventory #characterOverlay .character-container .character-workspace-collapse {
  width: 44px;
  height: 48px;
  padding: 0;
  place-items: center;
  border-radius: 10px;
  font: 800 28px/1 sans-serif;
}

body.management-workspace-inventory #characterOverlay .character-workspace-collapse::before {
  content: none !important;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore {
  top: calc(540px - 34px);
  left: calc(var(--management-inventory-collapsed-left) - 31px);
  width: 30px;
  height: 68px;
  border-width: 1px 0 1px 1px;
  border-radius: 11px 0 0 11px;
}

body.management-workspace-inventory.management-character-collapsed #characterOverlay .character-workspace-restore-icon {
  transform: translateX(1px) scaleX(-1);
}

body.management-workspace-inventory #characterOverlay .char-close {
  display: none;
}

body.management-workspace-inventory #inventoryOverlay .bank-close {
  display: inline-flex;
}

body.management-workspace-inventory #inventoryOverlay .inventory-slots {
  grid-template-columns: repeat(5, minmax(64px, 1fr));
}

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



/* Respect the selected interface size; use scrolling instead of shrinking text
   again inside the Character pane. Scene coordinates remain unscaled. */
body.management-workspace-open #characterOverlay .character-workspace-scale-frame {
  --character-workspace-scale: 1;
  transform: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1 1 0;
}
body.management-workspace-open #characterOverlay .character-body {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
.settings-save-status {
  font-size: 14px;
  line-height: 1.5;
  margin: 8px 0 16px;
  overflow-wrap: anywhere;
}
.settings-save-status button { margin-left: 12px; }

/* Narrow workspaces reflow instead of shrinking or hiding equipment columns. */
@container (max-width: 560px) {
  body.management-workspace-open #characterOverlay .character-main-row {
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
  }
  body.management-workspace-open #characterOverlay .left-column {
    width: 100%;
    flex: 0 0 auto;
  }
  body.management-workspace-open #characterOverlay .character-portrait {
    min-height: 110px;
    height: 110px;
    flex: 0 0 auto;
  }
  body.management-workspace-open #characterOverlay .equipment-area {
    min-width: 0;
    flex: 0 0 auto;
  }
  body.management-workspace-open #characterOverlay .stats-grid {
    grid-template-columns: 1fr;
  }
  body.management-workspace-open #characterOverlay .stat-row,
  body.management-workspace-open #characterOverlay .stat-value {
    font-size: 13px;
  }
}

/* The server-selected tool instance, shared by inventory and equipped Tool Bag. */
.inventory-slot.is-active-tool,
.tool-bag-storage-slot.is-active-tool {
  border-color: var(--material-brass-bright, #f3d77f);
  outline: 2px solid rgba(243, 215, 127, .85);
  outline-offset: -2px;
  box-shadow: inset 0 0 18px rgba(243, 215, 127, .32), 0 0 12px rgba(243, 215, 127, .7), 0 0 22px rgba(243, 215, 127, .3);
}

.game-window.flea-market-dialog[open] { display:flex; flex-direction:column; min-height:0; width:min(1050px,calc(100vw - 24px)); }
.flea-market-body { display:flex; flex-direction:column; gap:16px; }
.flea-market-tabs, .flea-market-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.flea-market-tabs [aria-pressed="true"] { background:#66512b; border-color:#c5a86c; }
.flea-market-body [hidden] { display:none !important; }
.flea-market-body label { display:flex; flex-direction:column; gap:6px; flex:1; min-width:130px; }
.flea-market-body form, .flea-market-body fieldset { display:grid; gap:12px; margin:12px 0; }
.flea-market-body input, .flea-market-body select { width:100%; box-sizing:border-box; min-width:0; padding:9px; background:#17140e; color:#e9dfc9; border:1px solid #8b7546; border-radius:5px; }
.flea-market-body button { width:auto; justify-self:start; }
.flea-market-offer { padding:16px; margin:12px 0; border:1px solid #8b754655; border-radius:8px; display:grid; gap:10px; background:#ffffff04; }
.flea-market-body fieldset { border:1px solid #8b754655; border-radius:8px; min-width:0; }
.flea-market-error { color:#ffbca8; }
.flea-market-error:empty { display:none; }
.flea-market-chat { max-height:40dvh; overflow:auto; display:flex; flex-direction:column; gap:8px; overflow-wrap:anywhere; }
.flea-market-row > select, .flea-market-row > input { flex:1; min-width:100px; }
@media (max-width:600px) { .flea-market-body { padding:12px; } .flea-market-tabs { gap:6px; } }

/* The fairground is a location, with a persistent social area and focused tools. */
.flea-market-scene { position:absolute; inset:12px; z-index:5; pointer-events:none; display:block; }
.flea-market-hub, .flea-market-social, .flea-market-workspace { pointer-events:auto; background:rgba(24,20,14,.94); border:1px solid #8b754680; border-radius:12px; color:#e9dfc9; box-shadow:0 12px 35px #0005; }
.flea-market-hub { position:absolute; bottom:16px; left:38%; transform:translateX(-50%); width:min(620px,60%); padding:18px; box-sizing:border-box; }
.flea-market-hub h2 { margin:0 0 10px; font-size:24px; }
.flea-market-hub p { margin:8px 0 14px; line-height:1.5; }
.flea-market-social { position:absolute; right:4px; top:14%; bottom:16px; width:min(350px,30%); padding:16px; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; }
.flea-market-social h3 { margin:0 0 10px; }
.flea-market-social [data-panel="visitors"] { flex:0 1 auto; min-height:0; }
.flea-market-social [data-panel="visitors"] > p { display:none; }
.flea-market-social [data-visitors] { max-height:145px; overflow:auto; }
.flea-market-social [data-panel="chat"] { display:flex; flex:1; flex-direction:column; min-height:0; border-top:1px solid #8b754650; padding-top:12px; }
.flea-market-social .flea-market-chat { flex:1; min-height:40px; max-height:none; }
.flea-market-social [data-chat] { margin:8px 0 0; gap:6px; }
.flea-market-workspace.game-window { position:absolute; left:1%; top:4%; bottom:8px; width:65%; height:auto; max-height:none; max-width:none; padding:18px; box-sizing:border-box; overflow:auto; z-index:2; }
.flea-market-workspace header { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:-18px; background:#211b12; z-index:2; padding:10px 0; }
.flea-market-workspace header h2 { margin:0; }
.flea-market-slots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.flea-market-body .flea-market-slot { width:100%; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:115px; padding:8px; border:1px dashed #a48b57; overflow-wrap:anywhere; }
.flea-market-slot span { font-size:12px; }
.flea-market-slot > span:first-child { font-size:25px; }
.flea-market-slot-icon { width:40px; height:40px; object-fit:contain; }
.flea-market-slot.is-listed { border-style:solid; }
.flea-market-slot.is-draft { border-color:#e7c980; box-shadow:inset 0 0 12px #e7c98022; }
body.flea-market-store-open .flea-market-workspace { left:auto; right:1%; width:52%; }
body.flea-market-store-open .flea-market-social { visibility:hidden; }
@media (max-width:900px) {
  .flea-market-social { width:36%; top:5%; padding:10px; }
  .flea-market-hub { left:30%; width:56%; padding:12px; bottom:8px; }
  .flea-market-workspace.game-window { width:61%; padding:12px; }
  .flea-market-slots { gap:4px; }
  .flea-market-body .flea-market-slot { padding:4px; min-height:90px; }
  body.flea-market-store-open .flea-market-workspace { width:52%; }
}
@media (max-width:600px) {
  .flea-market-scene { inset:8px; overflow:auto; }
  .flea-market-social { top:140px; bottom:180px; width:100%; right:0; min-height:180px; }
  .flea-market-social [data-visitors] { max-height:64px; }
  .flea-market-hub { left:0; transform:none; width:100%; bottom:0; }
  .flea-market-hub h2 { font-size:19px; }
  .flea-market-hub p { font-size:12px; margin:6px 0; }
  .flea-market-workspace.game-window, body.flea-market-store-open .flea-market-workspace { inset:0; width:100%; }
}

/* Keep the inventory next to the store instead of its last dragged position. */
body.flea-market-store-open #inventoryOverlay .inventory-window {
  position:fixed !important; left:16px !important; top:90px !important;
  bottom:72px !important; width:42vw !important; max-width:600px;
  height:auto !important; max-height:calc(100dvh - 162px) !important; transform:none !important;
}
@media (max-width:600px) {
  body.flea-market-store-open #inventoryOverlay .inventory-window { left:8px !important; width:calc(100vw - 16px) !important; }
  .flea-market-social { min-height:120px; }
}

.flea-market-scene > .flea-market-error:not(:empty) { position:absolute; top:0; left:18%; right:18%; z-index:10; background:#351b12; border:1px solid #b97656; border-radius:8px; padding:12px; pointer-events:auto; }

/* Scene containers can be taller than the physical viewport on mobile. */
.flea-market-scene { box-sizing:border-box; padding:0 !important; max-height:calc(100dvh - 140px); }
@media (max-width:600px) {
  .flea-market-social { top:110px; bottom:220px; overflow:auto; }
}

/* Compact, consistent inventory cells while configuring a market stall. */
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay .inventory-slots {
  grid-template-columns:repeat(auto-fill,72px) !important;
  grid-auto-rows:72px; gap:8px; align-content:start; justify-content:start;
}
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay .inventory-slot { width:72px; height:72px; aspect-ratio:1; }
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay .inventory-slot img:not(.item-composite-layer),
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay .inventory-slot .item-composite-icon { width:46px; height:46px; }
.flea-market-body .flea-market-slot.is-selected { border:2px solid #f1cf83; box-shadow:inset 0 0 20px #e6be6033; }
.flea-market-body .flea-market-slot.is-item-pointer-drop-target { background:#66512b; outline:3px solid #f1cf83; outline-offset:2px; }

.flea-market-search-results { display:flex; flex-direction:column; max-height:220px; overflow:auto; gap:4px; }
.flea-market-search-results button { text-align:left; width:100%; }

/* Compact market visitors; the list floats above chat without squeezing it. */
.flea-market-social [data-visitors] { max-height:none; overflow:visible; }
.flea-market-visitor-dropdown { position:relative; }
.flea-market-visitor-dropdown summary { cursor:pointer; padding:10px 12px; border:1px solid #8b7546; border-radius:7px; background:#292114; overflow-wrap:anywhere; }
.flea-market-visitor-options { position:absolute; z-index:5; top:100%; left:0; right:0; max-height:min(240px,35dvh); overflow:auto; padding:6px; background:#211b12; border:1px solid #8b7546; border-radius:7px; box-shadow:0 8px 20px #0008; }
.flea-market-visitor-options button { display:flex; align-items:center; gap:8px; width:100%; text-align:left; margin:2px 0; overflow-wrap:anywhere; }
.flea-market-friend-dot { display:inline-block; flex:none; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#6dcc68; }
.flea-market-visitor-actions { margin-top:8px; gap:8px; }

.flea-market-price-coins { display:inline-flex; align-items:center; gap:10px; vertical-align:middle; white-space:nowrap; }
.flea-market-price-coin { display:inline-flex; align-items:center; gap:4px; }
.flea-market-price-coin img { width:20px; height:20px; object-fit:contain; flex:none; }

/* Inventory-like stall editor: compact slots and a single offer card. */
.flea-market-workspace [data-panel-title] { font-family:var(--font-accent); }
.flea-market-body .flea-market-editor-note { margin:4px 0 10px; color:#b7ab91; font-size:12px; }
.flea-market-body [data-stand] { display:flex; align-items:flex-end; gap:8px; margin:8px 0 12px; }
.flea-market-body [data-stand] label { min-width:0; }
.flea-market-body [data-create] { gap:12px; margin:8px 0; }
.flea-market-editor-card { padding:12px; border:1px solid #8b754655; border-radius:8px; background:linear-gradient(135deg,#28251dcc,#13110dcc); display:grid; gap:10px; }
.flea-market-editor-card h3, .flea-market-editor-card p { margin:0; font-size:14px; }
.flea-market-editor-card small { color:#b7ab91; font-size:11px; }
.flea-market-quantity-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.flea-market-body .flea-market-quantity-grid label { min-width:0; font-size:12px; }
.flea-market-body .flea-market-editor-card fieldset { margin:0; padding:10px; gap:8px; }
.flea-market-editor-card [data-payments]:empty { display:none; }
.flea-market-slot-wrap { position:relative; min-width:0; }
.flea-market-body .flea-market-slot { min-height:94px; height:100%; border-radius:4px; background:linear-gradient(135deg,#34342ee0,#100f0bd9); }
.flea-market-body .flea-market-slot.is-selected { border:1px solid #ddc177; box-shadow:inset 0 0 12px #ddc17722; }
.flea-market-body .flea-market-clear { position:absolute; right:3px; top:3px; min-width:24px; width:24px; height:24px; padding:0; line-height:1; border-radius:5px; color:#ffe8dc; border:1px solid rgba(255,174,142,.44); background:linear-gradient(180deg,rgba(149,65,54,.9),rgba(82,28,24,.92)); opacity:0; pointer-events:none; }
.flea-market-slot-wrap:hover .flea-market-clear, .flea-market-slot-wrap:focus-within .flea-market-clear { opacity:1; pointer-events:auto; }
.flea-market-body .flea-market-clear:hover { background:linear-gradient(180deg,#b44f40,#66221d); }
.flea-market-body button.flea-market-publish { justify-self:stretch; width:100%; color:#f3ead2; border-color:rgba(145,174,101,.48); background:linear-gradient(180deg,#657949,#4c6339 58%,#33472b); }
.flea-market-body button.flea-market-publish:hover:not(:disabled) { background:linear-gradient(180deg,#718655,#566f41 58%,#3b5132); }
.flea-market-body .flea-market-offer { padding:12px; gap:6px; }
.flea-market-offer p, .flea-market-offer h3 { margin:0; }
@media (hover:none) { .flea-market-body .flea-market-clear { opacity:1; pointer-events:auto; } }
@media (max-width:600px) { .flea-market-quantity-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .flea-market-body .flea-market-slot { min-height:86px; } }

/* Full-width inventory-style heading, independent of the scrolled editor. */
.flea-market-workspace.game-window { padding:0; }
.flea-market-workspace > [data-panel] { padding:14px 18px 18px; }
.flea-market-workspace > header.flea-market-workspace-header { display:flex; align-items:center; justify-content:space-between; top:0; margin:0; padding:12px 18px; min-height:78px; box-sizing:border-box; border-bottom:1px solid #8b754655; border-radius:11px 11px 0 0; background:linear-gradient(110deg,#302719,#17130ded); }
.flea-market-workspace-header .bank-hero-main { flex:1; min-width:0; }
.flea-market-workspace-header .bank-hero-icon-wrap { flex:none; }
.flea-market-workspace-header [data-panel-title] { font-size:24px; line-height:1.1; }
.flea-market-workspace-header [data-panel-note] { color:#b7ab91; font-size:11px; line-height:1.4; margin-top:4px; }
.flea-market-workspace-header button[data-close] { flex:none; align-self:flex-start; margin:0; }
.flea-market-workspace .flea-market-editor-note { display:none; }
@media(max-width:600px) { .flea-market-workspace > header.flea-market-workspace-header { padding:10px; gap:8px; } .flea-market-workspace > [data-panel] { padding:10px; } .flea-market-workspace-header .bank-hero-main { gap:8px; } }

.flea-market-offer-price { font-weight:700; color:#f0dfa9; }
.flea-market-offer-price.is-discount { color:#a8ce78; }
.flea-market-offer-price.is-premium { color:#e69483; }
.flea-market-payment-option { min-width:0; }
.flea-market-payment-option .flea-market-offer-price { margin:0 0 8px; }
.flea-market-price-adjustment { white-space:nowrap; }
.game-window.live-trade-window { position:fixed; z-index:1100; inset:calc(var(--topbar-height, 48px) + 16px) auto auto 50%; transform:translateX(-50%); width:min(900px,calc(100vw - 32px)); max-height:calc(100dvh - var(--topbar-height, 48px) - 100px); padding:0; overflow:auto; }
.live-trade-window[hidden] { display:none; }
.live-trade-window > header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:linear-gradient(110deg,#302719,#17130d); border-bottom:1px solid #8b754655; }
.live-trade-window h2 { font-family:var(--font-accent); margin:0; }
.live-trade-body { padding:16px 20px; }
.live-trade-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.live-trade-columns > section { min-width:0; padding:12px; background:#17150e99; border:1px solid #8b754655; border-radius:8px; }
.live-trade-slots { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin-bottom:12px; }
.live-trade-slots button,.live-trade-empty,.live-trade-inventory button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80px; padding:5px; border:1px solid #8b754655; border-radius:3px; background:linear-gradient(#33352e,#12130f); color:#e5dcc7; font-size:11px; overflow-wrap:anywhere; }
.live-trade-item-icon { width:36px; height:36px; object-fit:contain; }
.live-trade-inventory { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px; }
.live-trade-body .is-valid { color:#bce994; }
.live-trade-body .is-invalid,.live-trade-body [data-error] { color:#e69483; }
.live-trade-body [data-your-value],.live-trade-body [data-their-value] { font-weight:bold; }
.live-trade-body img { vertical-align:middle; }
.live-trade-invitations .live-trade-invite { display:block; text-align:left; padding:6px 0; border:0; background:none; color:#d7e8a1; text-decoration:underline; }
@media(max-width:650px) { .game-window.live-trade-window { width:calc(100vw - 16px); } .live-trade-columns { gap:8px; } .live-trade-body { padding:10px; } .live-trade-slots { grid-template-columns:repeat(3,minmax(0,1fr)); } .live-trade-columns > section { padding:6px; } }
.live-trade-body [data-cancel] { background:linear-gradient(#793e30,#48241d); border-color:#a26750; color:#f5d8c9; }
.live-trade-body [data-cancel]:hover { background:linear-gradient(#914d3a,#613025); }
.game-window.live-trade-window { pointer-events:auto; background:rgba(24,20,14,.97); border:1px solid #8b754680; border-radius:12px; color:#e9dfc9; box-sizing:border-box; box-shadow:0 12px 35px #0008; }
/* Direct trade shares the existing separate inventory window layout. */
body.flea-market-trade-open #inventoryOverlay .inventory-window {
  position:fixed !important; left:16px !important; top:90px !important;
  bottom:72px !important; width:42vw !important; max-width:600px;
  height:auto !important; max-height:calc(100dvh - 162px) !important; transform:none !important;
}
body.flea-market-trade-open .game-window.live-trade-window { left:auto; right:16px; width:52vw; transform:none; }
body.flea-market-trade-open .flea-market-social { visibility:hidden; }
body.flea-market-trade-open .live-trade-columns { gap:10px; }
body.flea-market-trade-open .live-trade-columns > section { padding:8px; }
body.flea-market-trade-open .live-trade-slots button { min-width:0; }
.live-trade-coin-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
.live-trade-coin-inputs label { min-width:0; }
.live-trade-coin-inputs label > span { display:flex; align-items:center; gap:4px; font-size:12px; }
.live-trade-coin-inputs input { width:100%; min-width:0; box-sizing:border-box; }
/* Market windows share measured viewport bounds instead of independent vw offsets. */
[data-market-docked] { container-type:inline-size; overflow:hidden !important; }
.game-window.live-trade-window[data-market-docked],
.game-window.flea-market-workspace[data-market-docked],
.flea-market-dialog[data-market-docked] { display:flex; flex-direction:column; padding:0 !important; }
[data-market-docked] > header, [data-market-docked] > .bank-hero { flex:none; min-width:0; margin:0; position:relative !important; top:auto !important; }
[data-market-docked] > .live-trade-body,
[data-market-docked] > [data-panel]:not([hidden]),
[data-market-docked] > .trade-office-body { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:12px 16px; }
[data-market-docked] [hidden] { display:none !important; }
[data-market-docked] h2,[data-market-docked] h3,[data-market-docked] p { overflow-wrap:anywhere; }
[data-market-docked] .bank-hero-copy { min-width:0; }
[data-market-docked] .bank-hero h2 { font-size:clamp(18px,3cqw,26px); }
[data-market-docked] .live-trade-body > p { margin:8px 0; }
[data-market-docked] .live-trade-columns { gap:10px; }
[data-market-docked] .live-trade-columns > section { padding:10px; }
[data-market-docked] .live-trade-columns h3 { margin:0 0 8px; font-size:16px; }
[data-market-docked] .live-trade-slots { gap:4px; }
[data-market-docked] .live-trade-slots button,[data-market-docked] .live-trade-empty { min-width:0; min-height:64px; }
[data-market-docked] .live-trade-body > .flea-market-row { position:sticky; bottom:-12px; padding:10px 0; background:#19160f; z-index:2; }
[data-market-docked] .live-trade-coin-inputs label > span { flex-wrap:wrap; }
[data-market-docked] .bank-body,[data-market-docked] .bank-grid-card { min-height:0; min-width:0; }
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay [data-market-docked] .inventory-slots { grid-template-columns:repeat(auto-fill,minmax(60px,1fr)) !important; grid-auto-rows:64px; gap:6px; }
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay [data-market-docked] .inventory-slot { width:100%; height:64px; min-width:0; }
[data-market-docked] .flea-market-price-coins { flex-wrap:wrap; gap:6px; white-space:normal; }
@container (max-width: 620px) {
  [data-market-docked] .live-trade-columns { grid-template-columns:1fr; }
  [data-market-docked] .live-trade-columns > section { padding:8px; }
  [data-market-docked] .live-trade-slots { grid-template-columns:repeat(5,minmax(0,1fr)); }
  [data-market-docked] .flea-market-quantity-grid { grid-template-columns:1fr; }
  [data-market-docked] .bank-hero-icon-wrap { display:none; }
  [data-market-docked] .bank-hero { padding:8px 12px; gap:6px; }
  [data-market-docked] .bank-hero-main { gap:6px; }
}
/* Headers must not consume the short inventory row in the stacked layout. */
#inventoryOverlay [data-market-docked] > .bank-hero { display:flex !important; align-items:center; gap:8px; height:auto !important; min-height:0 !important; padding:8px 12px !important; }
#inventoryOverlay [data-market-docked] .bank-hero-main { flex:1; min-width:0; }
#inventoryOverlay [data-market-docked] .bank-hero-icon-wrap { width:36px; height:36px; }
#inventoryOverlay [data-market-docked] .bank-hero-icon { width:24px; height:24px; }
#inventoryOverlay [data-market-docked] .bank-hero h2 { margin:0; }
#inventoryOverlay [data-market-docked] .bank-body { padding:8px; overflow:hidden; }
#inventoryOverlay [data-market-docked] .bank-grid-card { flex:1; margin:0; padding:6px; display:flex; overflow:hidden; }
#inventoryOverlay [data-market-docked] .management-discard-zone { display:none; }
.game-window.live-trade-window[data-market-docked],.game-window.flea-market-workspace[data-market-docked] { zoom:var(--ui-user-scale,1); }
#inventoryOverlay [data-market-short="true"] > .bank-hero { padding:4px 8px !important; }
#inventoryOverlay [data-market-short="true"] .bank-hero-label,
#inventoryOverlay [data-market-short="true"] .bank-hero-icon-wrap { display:none; }
#inventoryOverlay [data-market-short="true"] .bank-body { padding:4px; }
#inventoryOverlay [data-market-short="true"] .bank-grid-card { padding:2px; }
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay [data-market-short="true"] .inventory-slots { grid-auto-rows:56px; }
body:is(.flea-market-store-open,.flea-market-trade-open) #inventoryOverlay [data-market-short="true"] .inventory-slot { height:56px; }
.npc-conversation-option.is-quest-guidance .service-row-title,
.npc-conversation-option.is-quest-guidance > span:not(.npc-conversation-caret) {
  color: #e8ce87;
  text-shadow: 0 0 10px rgba(226, 184, 83, .25);
}

/* Shared illustrated close control. Keep the real button and its accessible label. */
button.gom-close-icon {
 width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
 padding:0!important;border:0!important;border-radius:0!important;
 background:transparent url('/releases/2026.11.02-01/frontend/assets/ui/general/close_button.png') center/contain no-repeat!important;
 box-shadow:none!important;color:transparent!important;font-size:0!important;line-height:0!important;
 flex-shrink:0;cursor:pointer;
}
button.gom-close-icon::before,button.gom-close-icon::after {display:none!important;}
button.gom-close-icon:hover {filter:brightness(1.15);}
button.gom-close-icon:focus-visible {outline:2px solid var(--ui-accent-soft,#d6b874);outline-offset:2px;}

/* Settings use the same standalone icon treatment as close controls. */
#settingsBtn, button[data-inventory-layout], button.gom-settings-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent url('/releases/2026.11.02-01/frontend/assets/ui/general/settings_button.png') center/contain no-repeat!important;
  box-shadow:none!important;color:transparent!important;font-size:0!important;line-height:0!important;
  flex-shrink:0;cursor:pointer;
}
#settingsBtn::before, #settingsBtn::after,
button[data-inventory-layout]::before, button[data-inventory-layout]::after,
button.gom-settings-icon::before, button.gom-settings-icon::after {display:none!important;}
#settingsBtn:hover, button[data-inventory-layout]:hover, button.gom-settings-icon:hover {filter:brightness(1.15);}
#settingsBtn:focus-visible, button[data-inventory-layout]:focus-visible, button.gom-settings-icon:focus-visible {
  outline:2px solid var(--ui-accent-soft,#d6b874);outline-offset:2px;
}
.settings-button-icon {display:none;}

/* Unified public market: top tabs, category rail and compact offer rows. */
.flea-market-trading-tabs { flex:none; padding:10px 18px 0; gap:6px; border-bottom:1px solid #8b754655; background:#211b12; }
.flea-market-trading-tabs button { flex:1; min-height:40px; border-radius:6px; }

.flea-market-browse:not([hidden]) { display:grid; grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:start; }
.flea-market-categories { position:sticky; top:0; padding:10px; border:1px solid #8b754640; border-radius:8px; background:#15120ed9; }
.flea-market-categories h3 { margin:0 0 10px; font-size:14px; color:#c9b98f; }
.flea-market-categories button { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; margin:3px 0; padding:10px 8px; text-align:left; font-size:12px; border:1px solid transparent; background:transparent; color:#ddd1b9; }
.flea-market-categories button:hover { background:#ffffff0b; }
.flea-market-categories button[aria-pressed="true"] { background:#66512b66; border-color:#b79859; color:#ffe3a0; }
.flea-market-categories small { color:#af9f7f; }
.flea-market-results { min-width:0; }
.flea-market-results > label { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; color:#c9b98f; font-size:12px; }
.flea-market-results input { width:100%; box-sizing:border-box; min-height:38px; }
.flea-market-listing { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; padding:12px; margin:0 0 8px; background:linear-gradient(110deg,#30271988,#18140f); }
.flea-market-listing h3 { grid-column:1; grid-row:1; display:flex; align-items:center; gap:8px; margin:0; font-size:15px; }
.flea-market-listing-icon { width:36px; height:36px; object-fit:contain; flex:none; }
.flea-market-listing .flea-market-seller { grid-column:1; font-size:12px; color:#b9aa8d; }
.flea-market-listing > p { grid-column:1; margin:0; font-size:12px; color:#c9b98f; }
.flea-market-listing > .flea-market-row { grid-column:2; grid-row:1 / span 5; align-self:center; justify-content:flex-end; gap:10px; }
.flea-market-listing .flea-market-payment-option { padding:0; background:none; border:0; }
.flea-market-listing .flea-market-payment-option button { padding:6px 10px; min-height:32px; margin:2px; }
.flea-market-listing > button { grid-column:2; justify-self:end; }
@container (max-width:700px) {
  .flea-market-browse:not([hidden]) { grid-template-columns:140px minmax(0,1fr); gap:10px; }
  .flea-market-listing { grid-template-columns:minmax(0,1fr); }
  .flea-market-listing > .flea-market-row { grid-column:1; grid-row:auto; justify-content:flex-start; }
  .flea-market-listing > button { grid-column:1; }
}
@media(max-width:520px) {
  .flea-market-browse:not([hidden]) { grid-template-columns:minmax(0,1fr); }
  .flea-market-categories { position:static; display:flex; gap:4px; overflow-x:auto; padding:4px; }
  .flea-market-categories h3 { display:none; }
  .flea-market-categories button { flex:0 0 auto; width:auto; white-space:nowrap; }
  .flea-market-trading-tabs { padding:6px 10px 0; }
}

.game-window.flea-market-workspace.flea-market-public-window { background:linear-gradient(125deg,#292319,#17140f) !important; isolation:isolate; }
.flea-market-browse:not([hidden]) { align-content:start; }

/* Dense browse list with a persistent selection/action footer. */
.flea-market-trading-tabs button { flex:0 0 auto; width:auto; min-width:110px; min-height:34px; padding:6px 22px; }
.flea-market-workspace > .flea-market-browse:not([hidden]) { overflow:hidden; align-items:stretch; align-content:stretch; min-height:0; }
.flea-market-browse .flea-market-categories { overflow:auto; position:static; }
.flea-market-browse .flea-market-results { display:flex; flex-direction:column; min-height:0; }
.flea-market-results > label { flex:none; margin-bottom:8px; }
.flea-market-results [data-offers] { min-height:0; overflow:auto; scrollbar-gutter:stable; }
.flea-market-offer-row { display:grid; grid-template-columns:32px minmax(120px,1.3fr) minmax(100px,1fr) 90px minmax(150px,auto); align-items:center; gap:10px; min-height:52px; box-sizing:border-box; padding:6px 10px; border:1px solid #8b754633; border-radius:4px; margin-bottom:3px; background:#211c1480; cursor:pointer; font-size:12px; }
.flea-market-offer-row:nth-child(even) { background:#30271980; }
.flea-market-offer-row:hover { background:#66512b55; }
.flea-market-offer-row[aria-pressed="true"] { background:#66512b80; border-color:#d6b76f; box-shadow:inset 3px 0 #d6b76f; }
.flea-market-offer-row:focus-visible { outline:2px solid #ffe3a0; outline-offset:-2px; }
.flea-market-row-icon { width:30px; height:30px; object-fit:contain; }
.flea-market-row-name { min-width:0; font-size:13px; }
.flea-market-row-seller { display:flex; flex-direction:column; min-width:0; gap:3px; color:#c6b794; }
.flea-market-row-seller small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flea-market-row-stock { color:#c6b794; font-size:11px; white-space:nowrap; }
.flea-market-row-price { justify-self:end; text-align:right; }
.flea-market-row-price .flea-market-offer-price { margin:0; font-size:12px; }
.flea-market-row-price .flea-market-price-coins { gap:4px; }
.flea-market-row-price .flea-market-price-coin { gap:2px; }
.flea-market-row-price img { width:16px; height:16px; }
.flea-market-row-price small { font-size:10px; color:#baaa87; }
.flea-market-purchase-footer { flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; background:#211b12; border-top:1px solid #8b754677; }
.flea-market-purchase-footer[hidden] { display:none; }
.flea-market-purchase-summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; min-width:0; color:#c6b794; font-size:12px; }
.flea-market-purchase-summary select { max-width:240px; }
.flea-market-purchase-summary p { margin:0; }
.flea-market-purchase-actions { display:flex; flex:none; gap:8px; }
.flea-market-purchase-actions button { min-width:90px; min-height:34px; padding:6px 12px; }
.flea-market-purchase-actions button:disabled { opacity:.4; cursor:default; }
@container(max-width:900px) {
 .flea-market-offer-row { grid-template-columns:28px minmax(95px,1.2fr) minmax(80px,1fr) 65px minmax(110px,auto); gap:6px; padding:6px; }
 .flea-market-row-price .flea-market-price-adjustment { display:block; }
 .flea-market-purchase-footer { flex-wrap:wrap; gap:8px; }
}
@media(max-width:600px) {
 .flea-market-trading-tabs button { min-width:0; padding:6px 14px; }
 .flea-market-workspace > .flea-market-browse:not([hidden]) { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
 .flea-market-browse .flea-market-categories { display:flex; gap:4px; padding:4px; max-height:58px; }
 .flea-market-categories h3 { display:none; }
 .flea-market-categories button { flex:0 0 auto; width:auto; white-space:nowrap; }
 .flea-market-offer-row { grid-template-columns:28px minmax(0,1fr) auto; }
 .flea-market-row-name { grid-column:2 / 4; }
 .flea-market-row-seller { grid-column:2; grid-row:2; }
 .flea-market-row-stock { grid-column:2; grid-row:3; }
 .flea-market-row-price { grid-column:3; grid-row:2 / 4; }
 .flea-market-purchase-footer { padding:8px 10px; }
 .flea-market-purchase-actions { width:100%; }
 .flea-market-purchase-actions button { flex:1; min-width:0; padding:6px; }
}

/* Keep tab selection inside the illustrated wood frame. */
.flea-market-trading-tabs button::after { display:none !important; }
.flea-market-trading-tabs button[aria-pressed="true"] { color:#ffe3a0 !important; filter:brightness(1.14) !important; text-shadow:0 1px 2px #000; }
.flea-market-trading-tabs button:focus-visible { outline:2px solid #c5a86c; outline-offset:2px; }

/* Own offers share the compact browse rows, with a withdrawal action. */
.flea-market-own-row { grid-template-columns:32px minmax(120px,1.3fr) minmax(100px,1fr) 90px minmax(130px,auto) auto; cursor:default; }
.flea-market-row-withdraw { min-height:30px; padding:5px 10px; font-size:12px; }
@container(max-width:1000px) {
 .flea-market-own-row { grid-template-columns:28px minmax(100px,1.2fr) minmax(80px,1fr) 70px minmax(110px,auto); }
 .flea-market-own-row .flea-market-row-withdraw { grid-column:2 / -1; justify-self:end; }
}
@media(max-width:600px) {
 .flea-market-own-row { grid-template-columns:28px minmax(0,1fr) auto; }
 .flea-market-own-row .flea-market-row-withdraw { grid-column:2 / -1; grid-row:4; }
}

.westwood-dialog header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}.westwood-dialog .trade-office-body{overflow:auto}.westwood-dialog [data-error]{color:#eaa68c}.westwood-dialog .flea-market-tabs{margin:12px 0}.westwood-order{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;margin:8px 0;background:#241e16;border:1px solid #8b754650;border-radius:8px}.westwood-order h3{margin:0 0 8px;color:#ead5a6;font-size:16px}.westwood-order p{margin:6px 0;font-size:13px;color:#cfc2a7}.westwood-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.westwood-actions button{min-height:34px}.westwood-hint{padding:12px;border-left:3px solid #c2a467;background:#66512b33}@media(max-width:650px){.westwood-order{align-items:stretch;flex-direction:column}.westwood-actions{justify-content:flex-start}}
.westwood-dialog .trade-office-body { padding: 0 20px 20px; }
.westwood-dialog [data-error]:empty { display: none; }
.westwood-dialog .westwood-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; padding: 16px; margin: 16px 0;
  background: rgba(154, 119, 58, .12); border: 1px solid #8b754650; border-radius: 8px;
}
.fishing-contract-dialog .westwood-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fishing-contract-dialog .westwood-summary strong { font-size: 20px; }
.fishing-contract-dialog .westwood-summary p { grid-column: auto; }
.fishing-contract-card { line-height: 1.5; }
.fishing-contract-card .westwood-card-main > strong { display: block; margin: 8px 0; }
.fishing-contract-card .westwood-card-main > small { display: block; color: #cfc2a7; }
.fishing-contract-card .fishing-contract-conditions:empty { display: none; }
.fishing-contract-card .westwood-progress { margin-top: 12px; }
.quest-detail-content .fishing-contract-card { flex-direction: column; align-items: stretch; }
.quest-detail-content .fishing-contract-card .westwood-card-side { flex-basis: auto; text-align: left; }
.quest-detail-content .fishing-contract-card .westwood-actions { align-items: flex-start; }
.westwood-summary > div { display: flex; flex-direction: column; gap: 4px; }
.westwood-summary strong { font-size: 24px; color: #ead5a6; font-variant-numeric: tabular-nums; }
.westwood-summary span, .westwood-summary p { font-size: 12px; color: #cfc2a7; }
.westwood-summary p { grid-column: 1 / -1; margin: 0; padding-top: 10px; border-top: 1px solid #8b754640; }
.westwood-dialog .westwood-order-card { align-items: stretch; padding: 18px; gap: 22px; margin: 12px 0; }
.westwood-card-main { flex: 1; min-width: 0; }
.westwood-card-heading { display: flex; align-items: center; gap: 12px; }
.westwood-dialog .westwood-item-icon { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; }
.westwood-order-kind { display: block; margin-bottom: 4px; color: #c2a467; font-size: 11px; letter-spacing: .04em; }
.westwood-dialog .westwood-card-heading h3 { margin: 0; line-height: 1.4; }
.westwood-dialog .westwood-instructions { margin: 12px 0; line-height: 1.6; max-width: 70ch; }
.westwood-condition { display: inline-block; padding: 4px 8px; background: #66512b33; border-radius: 4px; }
.westwood-rewards { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid #8b754630; padding-top: 12px; margin-top: 12px; }
.westwood-rewards > small { color: #b9aa8c; margin-right: 4px; }
.westwood-rewards > span { font-size: 12px; color: #ead5a6; padding: 4px 8px; border-radius: 4px; background: #66512b33; }
.westwood-card-side { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 12px; flex: 0 0 180px; text-align: center; }
.westwood-card-side .westwood-actions { flex-direction: column; }
.westwood-order-status { color: #cfc2a7; font-size: 12px; line-height: 1.5; }
.westwood-order-status.is-ready { color: #bbd3a2; }
.westwood-action-hint { color: #b9aa8c; line-height: 1.5; }
.westwood-dialog [data-action="abandon"], .westwood-dialog [data-action="abort"] { background: transparent; box-shadow: none; font-size: 12px; color: #c9a994; }
.westwood-progress-list { display: grid; gap: 8px; margin-top: 12px; }
.westwood-progress > span { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #cfc2a7; }
.westwood-progress progress { display: block; width: 100%; height: 6px; margin-top: 5px; accent-color: #b9a16d; }
.westwood-rules { margin: 12px 0 16px; color: #cfc2a7; font-size: 13px; line-height: 1.6; }
.westwood-rules summary { cursor: pointer; color: #ead5a6; }
@media (max-width: 650px) {
  .westwood-dialog .trade-office-body { padding: 0 12px 12px; }
  .westwood-card-side { flex-basis: auto; text-align: left; }
  .westwood-card-side .westwood-actions { flex-direction: row; }
  .westwood-summary { gap: 8px; }
}

.game-confirm-overlay::backdrop { background: transparent; }

/* NPC trade workspace: merchant stock | focused transaction | player goods. */
#npcTradeOverlay .npc-dialog-lowerbar.is-trade-view {
  border: 1px solid rgba(189, 145, 71, .72);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 16%),
    linear-gradient(135deg, #211c16 0%, #100e0b 48%, #19140e 100%);
  box-shadow: 0 24px 70px #000d, inset 0 0 0 3px #080604, inset 0 0 0 4px rgba(214,170,88,.2);
}

#npcTradeOverlay .npc-dialog-body { padding: 10px; }
#npcTradeOverlay .trade-window { gap: 9px; height: 100%; }

#npcTradeOverlay .npc-trade-shell {
  width: min(1480px, calc(var(--canvas-visible-width, 1920px) - 24px), calc(100vw - 24px));
  height: min(920px, calc(var(--canvas-visible-height, 1080px) - 24px), calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}

#npcTradeOverlay .trade-window-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(310px, 1fr) auto;
  align-items: stretch;
  gap: 0;
  min-height: 84px;
  border: 1px solid rgba(183, 140, 68, .55);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(43,36,28,.98), rgba(21,18,14,.98));
  box-shadow: inset 0 1px rgba(255,235,187,.08), 0 3px 10px #0007;
  overflow: hidden;
}

#npcTradeOverlay .trade-title-block {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 13px 18px;
  border-right: 1px solid rgba(197,155,82,.25);
}

#npcTradeOverlay .trade-window-header h3 {
  font-family: var(--font-accent);
  font-size: clamp(22px, 2vw, 30px);
  color: #f1e6cd;
  text-shadow: 0 2px 2px #000;
}

#npcTradeOverlay .trade-merchant-card {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 0;
  border-right: 1px solid rgba(197,155,82,.25);
  min-width: 0;
}

#npcTradeOverlay .trade-merchant-card > img {
  width: 78px;
  height: 84px;
  object-fit: cover;
  object-position: top center;
  filter: sepia(.12) saturate(.85);
  border-right: 1px solid rgba(197,155,82,.3);
}

#npcTradeOverlay .trade-merchant-card strong {
  display: block;
  color: #eadcc0;
  font-family: var(--font-accent);
  font-size: 18px;
}

#npcTradeOverlay .trade-merchant-card .trade-window-copy {
  margin-top: 4px;
  text-align: left;
  font-family: Georgia, serif;
  font-style: italic;
  color: #aa9b81;
}

#npcTradeOverlay .trade-window-controls {
  align-items: center;
  padding: 12px 14px;
}

#npcTradeOverlay .trade-wallet {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 7px 12px;
  border-radius: 5px;
}

#npcTradeOverlay .trade-market-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(250px, .72fr) minmax(260px, 1fr);
  gap: 9px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#npcTradeOverlay .trade-pane {
  gap: 8px;
  padding: 10px;
  border-radius: 7px;
  border-color: rgba(162,124,62,.52);
  background: linear-gradient(150deg, rgba(39,32,24,.96), rgba(14,12,9,.98));
  box-shadow: inset 0 0 0 2px #090705aa;
}

#npcTradeOverlay .trade-pane.is-active {
  border-color: rgba(225,180,91,.82);
  box-shadow: inset 0 0 0 2px #090705aa, inset 0 0 22px #b77d2220;
}

#npcTradeOverlay .trade-pane-header { display: block; }
#npcTradeOverlay .trade-player-heading { display: grid; gap: 7px; }

#npcTradeOverlay .trade-pane-selector {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 7px;
  border: 0;
  border-bottom: 1px solid rgba(197,155,82,.28);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

#npcTradeOverlay .trade-pane-title {
  color: #f0e3c9;
  font-family: var(--font-accent);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
}

#npcTradeOverlay .trade-pane-meta {
  min-width: 26px;
  padding: 2px 7px;
  border: 1px solid #7e6035;
  border-radius: 99px;
  text-align: center;
  color: #dac08d;
  background: #17120d;
}

#npcTradeOverlay .trade-source-tabs {
  width: 100%;
  max-width: none;
  padding: 2px;
  border-radius: 6px;
}

#npcTradeOverlay .trade-source-tabs .trade-mode-tab {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 10px;
}

#npcTradeOverlay .trade-slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
}

#npcTradeOverlay .trade-slot {
  min-height: 98px;
  padding: 5px;
  gap: 4px;
  border-radius: 6px;
  border-color: rgba(155,116,59,.5);
  background: linear-gradient(145deg, #231d16, #100e0b);
  box-shadow: inset 0 0 0 2px #090705, 0 2px 5px #0008;
}

#npcTradeOverlay .trade-slot:hover { transform: none; border-color: #d3a653; filter: brightness(1.1); }
#npcTradeOverlay .trade-slot.is-selected { border-color: #efbd61; background: linear-gradient(145deg,#49341d,#1b130b); }
#npcTradeOverlay .trade-slot-art { min-height: 54px; border-radius: 4px; background: #0c0a08aa; }
#npcTradeOverlay .trade-slot-footer { gap: 1px; }
#npcTradeOverlay .trade-slot-price { font-size: 10px; }
#npcTradeOverlay .trade-slot-stack { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#npcTradeOverlay .trade-coin-icon { width: 14px; height: 14px; }

#npcTradeOverlay .trade-focus-panel {
  min-width: 0;
  overflow: auto;
  border: 1px solid #a87d3f;
  border-radius: 7px;
  background-color: #d8c39b !important;
  background-image: url('/releases/2026.11.02-01/frontend/assets/ui/parchment/ui_parchment_tile.png') !important;
  background-position: center !important;
  background-size: 256px !important;
  background-repeat: repeat !important;
  box-shadow: inset 0 0 24px #71502566, 0 3px 9px #0008;
  color: #2b2117;
}

#npcTradeOverlay .trade-focus-panel .trade-detail-card {
  min-height: 100%;
  box-sizing: border-box;
  padding: 15px;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background-color: rgba(232, 212, 171, .2) !important;
  background-image: none !important;
  color: #2b2117;
}

#npcTradeOverlay .trade-focus-panel .trade-detail-head { flex-direction: column; align-items: stretch; }
#npcTradeOverlay .trade-focus-panel .trade-detail-art {
  width: 100%;
  height: 170px;
  border: 0;
  border-radius: 2px;
  background: radial-gradient(circle, #f0e4c9aa, transparent 68%);
}
#npcTradeOverlay .trade-focus-panel .trade-detail-art img:not(.item-composite-layer),
#npcTradeOverlay .trade-focus-panel .trade-detail-art .item-composite-icon { width: 68%; height: 68%; }
#npcTradeOverlay .trade-focus-panel .trade-detail-copy { max-height: none; text-align: left; }
#npcTradeOverlay .trade-focus-panel .trade-detail-copy h4 { margin-bottom: 1px; color: #302217; font-family: var(--font-accent); font-size: 22px; }
#npcTradeOverlay .trade-focus-panel .trade-detail-copy p { color: #4d3b2b; }
#npcTradeOverlay .trade-focus-panel .trade-detail-kicker,
#npcTradeOverlay .trade-focus-panel .trade-detail-stat span,
#npcTradeOverlay .trade-focus-panel .trade-quantity-label { color: #765d3f; }
#npcTradeOverlay .trade-focus-panel .trade-detail-kicker {
  margin: 0 0 7px;
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: .12em;
}
#npcTradeOverlay .trade-focus-panel .trade-detail-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 2px 0 8px;
  border-bottom: 1px solid #76552d73;
}
#npcTradeOverlay .trade-focus-panel .trade-detail-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 22px;
  padding: 1px 4px;
  background: transparent !important;
  border: 0;
  border-radius: 0;
}
#npcTradeOverlay .trade-focus-panel .trade-detail-stat span {
  font-family: Georgia, serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
#npcTradeOverlay .trade-focus-panel .trade-detail-stat strong { color: #302217; }
#npcTradeOverlay .trade-focus-panel .trade-detail-note { color: #4a3522; background: #7f5c2322; border-color: #74501e55; }
#npcTradeOverlay .trade-focus-panel .trade-detail-bottom { flex-direction: column; align-items: stretch; }
#npcTradeOverlay .trade-focus-panel .trade-quantity-row {
  position: relative;
  align-items: center;
  padding-top: 2px;
}
#npcTradeOverlay .trade-focus-panel .trade-quantity-label {
  font-family: Georgia, serif;
  font-size: 12px;
}
#npcTradeOverlay .trade-focus-panel .trade-quantity-controls { justify-content: center; }
#npcTradeOverlay .trade-focus-panel .trade-quantity-input { background: #f0e2c5; border-color: #75572e; color: #2b2117; text-align: center; }
#npcTradeOverlay .trade-focus-panel .trade-quantity-presets { justify-content: center; }
#npcTradeOverlay .trade-focus-panel .trade-detail-actions { width: 100%; flex-direction: column; align-items: center; gap: 8px; }
#npcTradeOverlay .trade-focus-panel .trade-total-confirm { display: flex; justify-content: space-between; align-items: center; color: #49351f; }
#npcTradeOverlay .trade-focus-panel .trade-detail-actions .npc-dialog-btn {
  width: auto;
  min-width: min(190px, 80%);
  max-width: 260px;
  padding-inline: 30px;
}

@media (max-width: 980px) {
  #npcTradeOverlay .npc-trade-shell { height: min(calc(var(--canvas-visible-height, 1080px) - 16px), calc(100dvh - 16px)); }
  #npcTradeOverlay .trade-window-header { grid-template-columns: 1fr auto; }
  #npcTradeOverlay .trade-merchant-card { display: none; }
  #npcTradeOverlay .trade-market-layout { grid-template-columns: minmax(210px, 1fr) minmax(230px, .85fr) minmax(210px, 1fr); }
}

@media (max-width: 720px) {
  .npc-trade-overlay { padding: 6px; }
  #npcTradeOverlay .npc-trade-shell { width: 100%; height: calc(100dvh - 12px); max-height: none; }
  #npcTradeOverlay .trade-title-block { padding: 9px 10px; }
  #npcTradeOverlay .trade-window-header { min-height: 60px; }
  #npcTradeOverlay .trade-market-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(220px, 1fr) auto;
    overflow: auto;
  }
  #npcTradeOverlay .trade-focus-panel { grid-column: 1 / -1; grid-row: 2; max-height: 360px; }
  #npcTradeOverlay .trade-catalog-pane { grid-column: 1; grid-row: 1; }
  #npcTradeOverlay .trade-player-pane { grid-column: 2; grid-row: 1; }
  #npcTradeOverlay .trade-focus-panel .trade-detail-head { flex-direction: row; }
  #npcTradeOverlay .trade-focus-panel .trade-detail-art { width: 92px; height: 92px; flex: 0 0 92px; }
  #npcTradeOverlay .trade-focus-panel .trade-detail-bottom { flex-direction: row; }
}

@media (max-height: 760px) and (min-width: 721px) {
  #npcTradeOverlay .npc-trade-shell {
    width: min(1480px, calc(100vw - 12px));
    height: calc(100dvh - 12px);
    max-height: calc(100dvh - 12px);
  }

  #npcTradeOverlay .trade-window-header { min-height: 70px; }
  #npcTradeOverlay .trade-merchant-card > img { height: 70px; }
  #npcTradeOverlay .trade-focus-panel .trade-detail-art { height: 112px; }
}