@font-face {
  font-family: 'Black Ops One';
  src: url('../fonts/blackopsone-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Audiowide';
  src: url('../fonts/audiowide-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Quadrillion';
  src: url('../fonts/quadrillion_sb.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
  background: #0d0d12;
  font-family: 'JetBrains Mono', monospace;
  color: #e8e6e3;
  /* Default: game UI should not show browser drag-selection highlights. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Real text fields and reference surfaces opt back in. */
input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
[contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

#game-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-canvas {
  display: block;
  background: #14141c;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  touch-action: none;
}

#ui-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

#ui-overlay * {
  pointer-events: auto;
}

/* In-run HUD: hidden in HTML until setHudVisible(true) after Begin (no flash before module load). */
#top-left-hud-cluster,
#minimap-container,
#bottom-left-hud,
#hud-debuffs {
  visibility: hidden;
}

#top-left-hud-cluster {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  z-index: 6;
  max-width: calc(100vw - 200px);
  /* Same idea as #minimap / #bottom-left-hud: children use pointer-events none, so without this
     the flex parent (auto from #ui-overlay *) would swallow clicks meant for the canvas. */
  pointer-events: none;
}

/* Expanded event journal must paint above Esc settings (#settings-overlay z-index 20). */
#top-left-hud-cluster:has(.game-message-log-is-expanded) {
  z-index: 25;
}

.top-left-hud-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.top-left-hud-fortress-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: var(--hud-fortress-stack-width, 280px);
  max-width: 100%;
  pointer-events: none;
}

.top-left-hud-fortress-stack > * {
  pointer-events: auto;
}

.void-pressure-gauge {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(12, 10, 18, 0.72);
  border: 1px solid rgba(140, 120, 200, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.void-pressure-gauge.hidden {
  display: none;
}

.void-pressure-gauge.at-cap {
  border-color: rgba(255, 100, 120, 0.75);
  animation: void-pressure-pulse var(--void-pressure-pulse-ms, 2000ms) ease-in-out infinite;
}

.void-pressure-gauge.critical {
  border-color: rgba(255, 100, 120, 0.75);
  animation: void-pressure-pulse 1.2s ease-in-out infinite;
}

@keyframes void-pressure-pulse {
  0%,
  100% {
    box-shadow: 0 0 6px rgba(255, 80, 100, 0.35);
    border-color: rgba(255, 100, 120, 0.75);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 18px rgba(255, 80, 100, 0.9);
    border-color: rgba(255, 160, 180, 1);
    opacity: 0.82;
  }
}

.void-pressure-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(200, 180, 255, 0.95);
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-width: 0;
}

.void-pressure-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.void-pressure-timer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: rgba(180, 170, 210, 0.85);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.void-pressure-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: rgba(40, 30, 60, 0.85);
  overflow: hidden;
}

.void-pressure-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #6d28d9, #a855f7, #f472b6);
  transition: width 0.35s ease;
}

.void-pressure-footer {
  display: grid;
  grid-template-columns: var(--void-pressure-arrow-slot-w) var(--void-pressure-net-slot-w) var(--void-pressure-arrow-slot-w) 1fr var(--void-pressure-pct-slot-w);
  align-items: center;
  column-gap: 2px;
  width: 100%;
  --void-pressure-arrow-slot-w: 3.1em;
  --void-pressure-net-slot-w: 3.35em;
  --void-pressure-pct-slot-w: 2.75em;
}

.void-pressure-net {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(230, 220, 255, 0.95);
  font-variant-numeric: tabular-nums;
  text-align: center;
  justify-self: center;
  width: 100%;
}

.void-pressure-rate-arrows {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.void-pressure-rate-arrows--vent {
  color: #6ee066;
  text-align: right;
  justify-self: end;
}

.void-pressure-rate-arrows--gain {
  color: #ff7b72;
  text-align: left;
  justify-self: start;
}

.void-pressure-rate-arrows-plus {
  font-size: 8px;
  vertical-align: super;
}

.void-pressure-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(230, 220, 255, 0.95);
  font-variant-numeric: tabular-nums;
  text-align: right;
  justify-self: end;
  width: 100%;
  grid-column: 5;
}

.hud-tooltip-multiline .void-pressure-tooltip-rates {
  color: #1a1008;
  font-weight: 700;
  font-size: inherit;
  margin-top: 2px;
}

.hud-tooltip-multiline .void-pressure-tooltip-rates-head {
  margin-bottom: 2px;
}

.hud-tooltip-multiline .void-pressure-tooltip-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.hud-tooltip-multiline .void-pressure-tooltip-rate-label {
  flex: 1 1 auto;
  min-width: 0;
}

.hud-tooltip-multiline .void-pressure-tooltip-rate-value {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hud-tooltip-multiline .void-pressure-tooltip-rate-row--net {
  margin-top: 2px;
}

.wave-ended-boon-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 162, 39, 0.22);
}

.wave-ended-boon-heading {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9a227;
}

.wave-ended-boon-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wave-ended-boon-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(160, 130, 220, 0.45);
  background: rgba(30, 20, 45, 0.85);
  color: #eee;
  cursor: pointer;
}

.wave-ended-boon-btn:hover {
  border-color: rgba(200, 170, 255, 0.7);
  background: rgba(45, 30, 65, 0.92);
}

.wave-ended-boon-btn strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.02rem;
  color: #f5e6a8;
}

.wave-ended-boon-desc {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(220, 210, 235, 0.88);
}

.anchor-wave-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(120, 200, 140, 0.35);
  background: rgba(10, 24, 16, 0.62);
}

.anchor-wave-panel.hidden {
  display: none;
}

.anchor-wave-panel-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(180, 240, 200, 0.95);
}

.anchor-starve-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.anchor-starve-row select {
  pointer-events: auto;
  font-size: 12px;
  padding: 4px;
}

.anchor-dissipate-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.anchor-dissipate-soul-qty {
  pointer-events: auto;
  font-size: 12px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

.anchor-dissipate-pending {
  margin: 0;
  font-size: 11px;
  color: rgba(160, 220, 180, 0.9);
}

.anchor-dissipate-pending.hidden {
  display: none;
}

.fortress-quick-drop-btn {
  width: 100%;
  box-sizing: border-box;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 166, 87, 0.55);
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.92), rgba(28, 18, 10, 0.96));
  color: rgba(255, 210, 160, 0.95);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.fortress-quick-drop-btn:hover:not(:disabled) {
  border-color: #ffa657;
  color: #ffe8cc;
  box-shadow: 0 0 10px rgba(255, 166, 87, 0.35);
}
.fortress-quick-drop-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

#hud {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #8b949e;
  background: rgba(90, 90, 90, 0.45);
  border: 1px solid rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Player journal: preview in tracking HUD top row; click expands full scrollable log */
.game-message-log {
  position: relative;
  flex: 1 1 auto;
  min-width: 100px;
  max-width: min(300px, calc(100vw - 260px));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: #c9d1d9;
  background: rgba(90, 90, 90, 0.45);
  border: 1px solid rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  user-select: none;
  align-self: stretch;
  pointer-events: auto;
}

.hud-tracking-top .game-message-log-collapsed {
  cursor: pointer;
  padding: 5px 7px;
  min-height: var(--hud-day-clock-size, 84px);
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

.game-message-log-collapsed {
  cursor: pointer;
  padding: 6px 8px;
  min-height: calc(1.35em * 3 + 12px);
  display: flex;
  align-items: stretch;
}

.game-message-log-collapsed:hover {
  background: rgba(120, 120, 120, 0.25);
}

.game-message-log-preview {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: flex-end;
}

.game-message-log-preview-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-message-log-preview-empty {
  color: #6e7681;
  font-weight: 500;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.game-message-log-kind-quest {
  color: #79c0ff;
}

.game-message-log-kind-dialogue {
  color: #7ee787;
}

.game-message-log-kind-notice {
  color: #ffa657;
}

.game-message-log-kind-event {
  color: #c9d1d9;
}

.game-message-log-expanded {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  width: max(100%, 320px);
  max-width: min(420px, 90vw);
  max-height: min(52vh, 420px);
  display: flex;
  flex-direction: column;
  background: rgba(22, 27, 34, 0.97);
  border: 1px solid rgba(180, 180, 180, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 80;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.game-message-log-expanded-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(180, 180, 180, 0.2);
  flex-shrink: 0;
}

.game-message-log-title {
  font-weight: 700;
  color: #e8e6e3;
}

.game-message-log-close {
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #8b949e;
  border-radius: 4px;
}

.game-message-log-close:hover {
  color: #e8e6e3;
  background: rgba(255, 255, 255, 0.08);
}

.game-message-log-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 8px 10px;
  min-height: 120px;
  font-size: 11px;
  line-height: 1.45;
}

.game-message-log-entry {
  margin-bottom: 6px;
  word-break: break-word;
}

.game-message-log-entry-meta {
  color: #6e7681;
  font-weight: 500;
}

.game-message-log-is-expanded .game-message-log-collapsed {
  opacity: 0.92;
}

#hud > div {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-weight: 700;
}

#hud * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#hud .hud-tracking-map-quest-row,
#hud .hud-tracking-map-quest-row *,
#hud #hud-day-clock .world-map-hud-btn,
#hud #hud-day-clock .hud-digital-time,
#hud .quest-hud,
#hud .quest-hud *,
#hud .game-message-log,
#hud .game-message-log * {
  pointer-events: auto;
}

#hud .winged-terror-arrival-stack,
#hud .winged-terror-arrival-stack * {
  pointer-events: none;
}

#hud .quest-hud-journal-hit {
  cursor: pointer;
}

.quest-hud {
  font-weight: 700;
}

/* Game-tracking HUD (top-left) */
.hud-tracking {
  --hud-tracking-clock-col: var(--hud-day-clock-size, 84px);
  position: relative;
  display: grid;
  grid-template-columns: var(--hud-tracking-clock-col) minmax(100px, 1fr) auto;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 280px;
  width: 100%;
  overflow: visible;
}

.hud-tracking-top {
  display: contents;
}

#game-message-log {
  grid-column: 2;
  grid-row: 1;
}

#hud-currency-row {
  grid-column: 3;
  grid-row: 1;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: stretch;
  gap: 0;
  min-height: 0;
  margin-left: 0;
  padding: 2px 0;
}

.hud-tracking-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sun/moon planet — top-left; tracking icons sit on the row below */
#hud-day-clock.hud-day-clock {
  --hud-day-clock-size: 84px;
  grid-column: 1;
  grid-row: 1;
  position: relative;
  flex-shrink: 0;
  width: var(--hud-day-clock-size);
  height: var(--hud-day-clock-size);
  margin: 0;
  line-height: 0;
  overflow: visible;
}

.hud-day-clock canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: var(--hud-day-clock-size);
  height: var(--hud-day-clock-size);
}

.hud-day-clock-labels {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--hud-day-clock-size) * 0.035);
  pointer-events: none;
}

.hud-day-number {
  text-align: center;
  line-height: 1;
  color: #fff9f2;
  -webkit-text-stroke: 1.75px rgba(10, 14, 30, 0.98);
  paint-order: stroke fill;
  text-shadow:
    1px 0 0 #0a0e1e,
    -1px 0 0 #0a0e1e,
    0 1px 0 #0a0e1e,
    0 -1px 0 #0a0e1e,
    1px 1px 0 #0a0e1e,
    -1px -1px 0 #0a0e1e,
    1px -1px 0 #0a0e1e,
    -1px 1px 0 #0a0e1e,
    0 2px 5px rgba(8, 12, 28, 0.75);
  white-space: nowrap;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: calc(var(--hud-day-clock-size) * 0.31);
  font-weight: 800;
}

.hud-digital-time {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  display: inline-block;
  text-align: center;
  line-height: 1.1;
  padding: 2px 6px;
  border-radius: 4px;
  color: #0a0a0a;
  font-family: 'JetBrains Mono', 'Audiowide', monospace;
  font-size: calc(var(--hud-day-clock-size) * 0.175);
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.42);
  border: 1.5px solid rgba(10, 14, 30, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 1;
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

.hud-currency-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-height: var(--hud-day-clock-size, 84px);
}

#hud-icons-row {
  grid-column: 1 / -1;
  grid-row: 3;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.hud-icon-stat {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
}

.hud-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.hud-icon-canvas {
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}

.hud-icon-stat-value {
  min-width: 1.25em;
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.hud-wave-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}

#hud-wave-value {
  font-weight: 700;
  color: #ffffff;
  min-width: 1em;
}

.hud-wave-break-timer {
  font-size: 13px;
  color: #ffa657;
}

.hud-enemy-icon-wrap {
  transform-origin: center center;
  transition: filter 0.05s linear;
}

/* Tooltip targets stay pointer-events: none (inherited) so clicks pass to the canvas;
   hover tooltips use rect hit-tests in hudTooltips.js. */
.hud-tooltip-target {
  cursor: default;
}

#hud-icons-row.hud-icons-row {
  --hud-stat-icon-size: 30px;
  --hud-stat-icon-gap: calc(var(--hud-stat-icon-size) * 0.35);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--hud-stat-icon-gap);
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
  margin: 0;
  padding: 2px 0;
}

#hud-icons-row .hud-wave-group,
#hud-icons-row .hud-icon-stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

#hud-icons-row .hud-icon-slot {
  flex-shrink: 0;
}

#hud-icons-row .hud-icon-stat-value,
#hud-icons-row #hud-wave-value {
  flex-shrink: 0;
  min-width: 1.25em;
}

/* Let pointer events pass through so the player can aim/shoot at the world behind (e.g. portals). */
#minimap-container {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 160px;
  height: 120px;
  border: 2px solid #30363d;
  border-radius: 6px;
  background: #0d1117;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

#minimap-container * {
  pointer-events: none;
}

#minimap-container.minimap-fullscreen {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 1000;
  pointer-events: auto;
}

#minimap-container.minimap-fullscreen * {
  pointer-events: auto;
}

#minimap-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#weapon-display {
  color: #7ee787;
}

#hp-display {
  color: #ff7b72;
}

#damage-display {
  color: #ffa657;
}

#coin-drop-display {
  color: #e6b800;
}

#level-display {
  color: #a371f7;
}

#exp-display {
  color: #79c0ff;
}


#wave-break-ready {
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  cursor: pointer;
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 4px;
  pointer-events: auto;
}

#wave-break-ready:hover {
  background: #2ea043;
}

.hud-tracking-map-quest-row {
  display: contents;
}

/* Clock column row 2: below Earth globe, above wave portal icons. */
#winged-terror-arrival-stack.winged-terror-arrival-stack {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: var(--hud-tracking-clock-col);
  margin-top: calc(var(--world-map-hud-size, 42px) * 0.28);
  padding: 0 2px 2px;
  pointer-events: none;
  overflow: visible;
}

/* Same frosted pill as #hud-day-clock .hud-digital-time */
.winged-terror-arrival-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
  line-height: 1.1;
  background: rgba(255, 255, 255, 0.42);
  border: 1.5px solid rgba(10, 14, 30, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

.winged-terror-arrival-label {
  flex: 0 0 auto;
  display: block;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #d45656;
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  transform-origin: center center;
}

.winged-terror-arrival-label.arrived {
  animation: winged-terror-arrived-pulse 1.05s ease-in-out infinite;
}

.winged-terror-arrival-countdown {
  flex: 0 0 auto;
  display: block;
  font-family: 'JetBrains Mono', 'Audiowide', monospace;
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #0a0a0a;
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.winged-terror-arrival-countdown.hidden {
  display: none;
}

@keyframes winged-terror-arrived-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.22);
    filter: brightness(1.35);
    opacity: 0.92;
  }
}

.world-map-hud-btn {
  --world-map-hud-size: 42px;
  flex-shrink: 0;
  width: var(--world-map-hud-size);
  height: var(--world-map-hud-size);
  margin: 0;
  padding: 0;
  display: block;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  line-height: 0;
  transition: filter 0.15s ease-out, transform 0.15s ease-out;
}

/* Overlap bottom rim of sun/moon clock; sits low on the disc (day # stays clear above) */
#hud-day-clock .world-map-hud-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
}

.world-map-hud-btn:hover {
  filter: brightness(1.1) drop-shadow(0 0 10px rgba(121, 192, 255, 0.45));
}

#hud-day-clock .world-map-hud-btn:hover {
  transform: translateX(-50%) scale(1.06);
}

.world-map-hud-btn:focus-visible {
  outline: 2px solid #79c0ff;
  outline-offset: 2px;
}

.world-map-hud-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.quest-hud {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(300px, calc(100vw - 260px));
  margin: 0;
  padding: 0;
  align-self: start;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: #79c0ff;
  background: transparent;
  border-radius: 4px;
  transition: transform 0.15s ease-out, filter 0.15s ease-out, background 0.15s ease-out;
}

.quest-hud-journal-hit {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 6px 4px 6px 7px;
  text-align: left;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  transition: background 0.15s ease-out;
}

.quest-hud-journal-hit:hover {
  background: rgba(121, 192, 255, 0.12);
}

.quest-hud-journal-hit:focus-visible {
  outline: 2px solid #79c0ff;
  outline-offset: 2px;
}

.quest-hud-title-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.quest-hud-prefix {
  flex-shrink: 0;
  color: #b1bac4;
  font-weight: 700;
}

.quest-hud-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #79c0ff;
  font-weight: 600;
}

.quest-hud-resources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.quest-hud-resources.hidden {
  display: none;
}

.quest-hud-res-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quest-hud-res-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  border: 1px solid #30363d;
  border-radius: 3px;
  background: rgba(22, 27, 34, 0.9);
}

.quest-hud-res-text {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
}

.quest-hud-res-text.quest-hud-res-unmet {
  color: #f85149;
}

.quest-hud-res-text.quest-hud-res-met {
  color: #3fb950;
}

.quest-hud-expanded {
  margin-top: 4px;
  padding: 8px 10px 10px 8px;
  border-radius: 6px;
  /* Opaque enough that long journal detail stays readable over the world (HUD chrome is often translucent). */
  background: rgba(13, 17, 23, 0.92);
  border: 1px solid rgba(48, 54, 61, 0.95);
  border-left: 2px solid rgba(121, 192, 255, 0.5);
}

.quest-hud-body {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #c8e1ff;
  white-space: normal;
}

.quest-hud-detail {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: #d8dee4;
  white-space: normal;
}

.quest-hud.quest-flash .quest-hud-journal-hit {
  animation: quest-flash 0.5s ease-in-out infinite;
}

@keyframes quest-flash {
  0%, 100% {
    transform: scale(1.08);
    filter: brightness(1.3);
    color: #79c0ff;
  }
  50% {
    transform: scale(1.18);
    filter: brightness(1.6);
    color: #a5d6ff;
  }
}

#world-map-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 10px;
  box-sizing: border-box;
  z-index: 16;
  pointer-events: auto;
}

#world-map-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 14px 16px 12px;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  min-height: 0;
}

#world-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

#world-map-title {
  margin: 0;
  font-size: 1.25rem;
  color: #e6edf3;
}

#world-map-close-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid #30363d;
  border-radius: 8px;
  background: #21262d;
  color: #e6edf3;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

#world-map-close-btn:hover {
  background: #30363d;
  border-color: #58a6ff;
  color: #fff;
}

#world-map-close-btn:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}

#world-map-body {
  display: flex;
  flex-direction: row;
  gap: 14px;
  min-height: 0;
  flex: 1;
}

#world-map-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
  background: rgba(12, 16, 12, 0.98);
  border: 1px solid rgba(180, 140, 80, 0.35);
  border-radius: 10px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}

#world-map-stage.world-map-stage--dragging {
  cursor: grabbing;
}

.world-map-pan {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  will-change: transform;
}

.world-map-bg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.world-map-roads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.world-map-road-path {
  fill: none;
  stroke: rgba(196, 158, 98, 0.82);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.world-map-road-path--edge {
  stroke: rgba(168, 132, 78, 0.55);
  stroke-width: 3.5;
  stroke-dasharray: 6 5;
}

.world-map-nodes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.world-map-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.world-map-node:hover {
  transform: translate(-50%, -50%) scale(1.15);
}

.world-map-node--main {
  background: #e5534b;
}

.world-map-node--side {
  background: #58a6ff;
}

.world-map-node--tent {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background: #3fb950;
  border-color: rgba(200, 255, 200, 0.9);
}

.world-map-node--tent.world-map-node--cleared {
  background: rgba(63, 185, 80, 0.35);
  border-color: rgba(160, 200, 160, 0.6);
}

.world-map-node--current {
  box-shadow: 0 0 0 3px rgba(255, 210, 120, 0.55), 0 0 12px rgba(255, 180, 60, 0.45);
}

.world-map-node--selected {
  outline: 2px solid #ffa657;
  outline-offset: 3px;
}

.world-map-tent-label {
  font-size: 12px;
  line-height: 1;
  color: #0d1117;
  font-weight: 700;
}

.world-map-player-sprite {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  z-index: 4;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.world-map-player-sprite--walking {
  animation: world-map-sprite-bob 0.25s ease-in-out infinite alternate;
}

@keyframes world-map-sprite-bob {
  from { transform: translate(-50%, -100%); }
  to { transform: translate(-50%, calc(-100% - 4px)); }
}

.world-map-quest-panel {
  flex: 0 0 min(220px, 32vw);
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 12px 14px;
  overflow-y: auto;
}

.world-map-quest-panel-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: #79c0ff;
}

.world-map-quest-list {
  margin: 0;
  padding-left: 1.2rem;
  color: #c9d1d9;
  font-size: 0.88rem;
  line-height: 1.45;
}

.world-map-quest-item--hidden {
  color: #6e7681;
  font-style: italic;
}

.world-map-quest-item--active {
  color: #ffa657;
}

.world-map-quest-item--completed {
  color: #3fb950;
  text-decoration: line-through;
}

.world-map-quest-item--empty {
  list-style: none;
  margin-left: -1.2rem;
  color: #6e7681;
  font-style: italic;
}

.world-map-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #6e7681;
  text-align: center;
  flex-shrink: 0;
}

#quest-journal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 10px;
  box-sizing: border-box;
  z-index: 16;
  pointer-events: auto;
}

#quest-journal-overlay:not(.hidden) {
  display: flex !important;
}

#quest-journal-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 14px 16px 12px;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

#quest-journal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

#quest-journal-title {
  margin: 0;
  font-size: 1.35rem;
  color: #e6edf3;
}

#quest-journal-close-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
}

#quest-journal-close-btn:hover {
  background: #30363d;
  border-color: #58a6ff;
  color: #fff;
}

#quest-journal-close-btn:focus-visible {
  outline: 2px solid #58a6ff;
  outline-offset: 2px;
}

.quest-journal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-shrink: 0;
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: rgba(13, 17, 23, 0.65);
}

.quest-journal-hud-preview {
  margin: 0;
  flex: 1 1 240px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #79c0ff;
  font-weight: 600;
}

.quest-journal-auto-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #c9d1d9;
  white-space: nowrap;
}

.quest-journal-auto-btn:hover:not(:disabled) {
  background: #30363d;
}

.quest-journal-auto-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.quest-journal-columns {
  display: flex;
  flex-direction: row;
  gap: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.quest-journal-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 10px 10px 8px;
  background: rgba(22, 27, 34, 0.6);
}

.quest-journal-col-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c9d1d9;
  flex-shrink: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #21262d;
}

.quest-journal-col-count {
  font-weight: 600;
  color: #8b949e;
  text-transform: none;
  letter-spacing: normal;
}

.quest-journal-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 4px 4px 4px 0;
  scrollbar-gutter: stable;
}

.quest-journal-empty {
  margin: 0;
  padding: 12px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #6e7681;
  font-style: italic;
  text-align: center;
}

.quest-journal-card {
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 10px 12px;
  background: #0d1117;
}

.quest-journal-card-pinned {
  border-color: #79c0ff;
  box-shadow: 0 0 0 1px rgba(121, 192, 255, 0.35);
}

.quest-journal-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #e6edf3;
  margin-bottom: 4px;
}

.quest-journal-card-status {
  font-size: 12px;
  font-weight: 600;
  color: #8b949e;
  margin-bottom: 6px;
}

.quest-journal-card-detail {
  font-size: 13px;
  line-height: 1.5;
  color: #c9d1d9;
  margin-bottom: 8px;
  white-space: pre-wrap;
}

.quest-journal-card-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.quest-journal-card-icons canvas {
  width: 28px;
  height: 28px;
  image-rendering: pixelated;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #161b22;
}

.quest-journal-reward-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 8px 0 4px;
  padding-top: 8px;
  border-top: 1px solid #21262d;
}

.quest-journal-reward-btn {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #238636;
  border: 1px solid #2ea043;
  border-radius: 6px;
  color: #fff;
}

.quest-journal-reward-btn:hover:not(:disabled) {
  background: #2ea043;
}

.quest-journal-reward-btn:disabled {
  opacity: 0.65;
  cursor: default;
  background: #21262d;
  border-color: #30363d;
  color: #8b949e;
}

.quest-journal-pin-btn {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #e6edf3;
}

.quest-journal-pin-btn:hover {
  background: #30363d;
}

.quest-journal-pin-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

#level-goal-display {
  color: #7ee787;
}

/* Let pointer events pass through so the player can aim/shoot at the world behind (e.g. portals). */
#bottom-left-hud {
  position: absolute;
  bottom: 16px;
  left: 16px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: bold;
  --hud-bar-height: 18px;
  pointer-events: none;
  background: rgba(90, 90, 90, 0.45);
  border: 1px solid rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
}

#bottom-left-hud > div {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-weight: 700;
}

#bottom-left-hud * {
  pointer-events: none;
}

#bottom-left-hud,
#bottom-left-hud * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.bottom-left-hud-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 1.35em;
}

#character-name-level {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Quadrillion', 'EB Garamond', serif;
  font-size: 17px;
  font-weight: normal;
  color: #e8e6e3;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.hud-combat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  width: 100%;
  column-gap: 4px;
}

.hud-combat-stat {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  min-width: 0;
  color: #e8e6e3;
  font-size: 13px;
  font-weight: 700;
}

.hud-stat-icon-canvas {
  display: block;
  flex-shrink: 0;
}

.hud-combat-stat-value {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#top-left-hud-cluster #hud-ben-mal-count.ben-leading {
  color: #9be7ff;
}

#top-left-hud-cluster #hud-ben-mal-count.mal-leading {
  color: #ffb4a8;
}

#top-left-hud-cluster #hud-ben-mal-count.ben-mal-neutral {
  color: #ffffff;
}

#weapon-equipped {
  color: #7ee787;
  font-size: 14px;
  font-weight: bold;
}


#hud-debuffs {
  position: absolute;
  bottom: 16px;
  left: calc(16px + 280px + 8px);
  /* Status chips only; coins moved to top-left tracking HUD */
  width: 220px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  pointer-events: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Coins + status row use pointer-events: auto; block browser text selection (same idea as #tab-menu) */
#hud-debuffs,
#hud-debuffs * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#hp-bar-row {
  width: 100%;
}

#hp-bar-container {
  position: relative;
  width: 100%;
  height: var(--hud-bar-height);
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid #30363d;
  border-radius: 4px;
  overflow: hidden;
}

#hp-bar-fill {
  position: relative;
  z-index: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #da3633, #ff7b72);
  transition: width 0.15s ease-out;
}

#stamina-bar-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 10%;
  width: 100%;
  background: linear-gradient(90deg, #388bfd, #79c0ff);
  transition: width 0.15s ease-out;
  z-index: 1;
  pointer-events: none;
}

#hp-bar-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 1px 2px #000;
}

#mp-bar-row {
  width: 100%;
}

#mp-bar-container {
  position: relative;
  width: 100%;
  height: var(--hud-bar-height);
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid #30363d;
  border-radius: 4px;
  overflow: hidden;
}

#mp-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #388bfd, #79c0ff);
  transition: width 0.15s ease-out;
}

#mp-bar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 1px 2px #000;
}

#exp-coin-row {
  display: flex;
  align-items: center;
  gap: 0px;
  width: 100%;
}

#bottom-left-hud #exp-bar-container {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: var(--hud-bar-height);
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid #30363d;
  border-radius: 4px;
  overflow: hidden;
}

#exp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #238636, #79c0ff);
  transition: width 0.15s ease-out;
}

#exp-bar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 1px 2px #000;
}

#coins-display-corner {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #e6b800;
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

/* Spinning coin: same as drop coins, drawn on canvas in JS */
#coins-display-corner .hud-coin-canvas {
  display: block;
  vertical-align: middle;
}

#hud-status-effects {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  pointer-events: auto;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}

#hud-debuffs * {
  pointer-events: auto;
}

.hud-debuff-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 6px 2px 4px;
  border: 1px solid #14532d;
  border-radius: 999px;
  background: rgba(10, 38, 18, 0.85);
  color: #9bffbe;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}

.hud-debuff-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.hud-debuff-time {
  min-width: 24px;
  text-align: right;
  font-weight: 700;
  text-shadow: 0 0 2px #000, 0 1px 2px #000;
}

#hud-debuff-tooltip {
  position: fixed;
  z-index: 30;
  max-width: min(300px, 92vw);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 246, 222, 0.55);
}

#hud-debuff-tooltip.hidden {
  display: none;
}

#hud-debuff-tooltip.hud-tooltip-multiline {
  white-space: pre-wrap;
  font-weight: 400;
  line-height: 1.4;
}

/* Character / inventory (Tab): full-screen modal; inner panel stretches to nearly the whole viewport */
#tab-menu {
  position: absolute;
  inset: 0;
  /* Above `#minimap-container.minimap-fullscreen` (z-index 1000) so pause inventory stays clickable */
  z-index: 1010;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: min(10px, 1.5vh) min(12px, 2vw);
  box-sizing: border-box;
  overflow: hidden;
  background:
    radial-gradient(ellipse 78% 52% at 50% 42%, rgba(32, 26, 52, 0.5), rgba(5, 4, 10, 0.9)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.055) 0px,
      rgba(0, 0, 0, 0.055) 1px,
      transparent 1px,
      transparent 3px
    );
}

/* Shift+click inventory / equip must not trigger browser text selection */
#tab-menu,
#tab-menu * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Same visual language as `#merchant-inner.merchant-rpg-window` (opaque panel, gold frame, inner line) */
#tab-menu-inner.tab-menu-rpg-window {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
  box-sizing: border-box;
  padding: clamp(20px, 3vh, 36px) clamp(16px, 2.5vw, 40px) clamp(22px, 3.2vh, 40px);
  width: 100%;
  max-width: none;
  overflow-x: auto;
  overflow-y: auto;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  color: rgba(235, 224, 200, 0.92);
  border: 3px solid #9a7028;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, transparent 42%),
    linear-gradient(152deg, #262031 0%, #1a1526 48%, #120f18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 130, 0.28),
    inset 0 0 26px rgba(0, 0, 0, 0.38),
    0 0 0 2px #100c14,
    0 0 0 5px #3d2a18,
    0 14px 36px rgba(0, 0, 0, 0.58),
    0 22px 44px rgba(0, 0, 0, 0.35);
}

#tab-menu-inner.tab-menu-rpg-window::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(95, 78, 125, 0.45);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

/* Stack content above ::before; do not force position on fixed overlays (menus would ignore clientX/Y) */
#tab-menu-inner.tab-menu-rpg-window > *:not(#blueprint-context-menu):not(#inv-context-menu):not(#pet-context-menu):not(#inv-destroy-confirm):not(#tab-menu-drag-ghost) {
  position: relative;
  z-index: 1;
}

#tab-menu-title {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  padding-bottom: 0;
  text-align: center;
  color: #f0dfa0;
  text-shadow:
    0 0 12px rgba(255, 195, 75, 0.22),
    0 2px 0 #1a0f08;
  border-bottom: none;
}

#tab-menu-layout {
  display: grid;
  grid-template-columns: minmax(200px, auto) minmax(280px, 1fr) minmax(320px, 1.15fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: flex-start;
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
}

#tab-menu-stats-section {
  min-width: 420px;
  max-width: 480px;
  padding: 14px 16px 16px;
  background: rgba(13, 17, 23, 0.42);
  border: 1px solid rgba(201, 162, 39, 0.28);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

#tab-menu-stats-columns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.tab-menu-stats-col {
  flex: 1;
  min-width: 0;
}

.tab-menu-stats-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(201, 162, 39, 0.75);
  margin: 0 0 8px;
}

#tab-menu-derived-stats-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 420px;
  overflow-y: auto;
  font-size: 0.95rem;
  color: rgba(228, 215, 185, 0.9);
}

.tab-menu-derived-group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(201, 162, 39, 0.55);
  margin: 8px 0 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
}

.tab-menu-derived-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.tab-menu-stat-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: help;
}

.tab-menu-stat-row:hover {
  background: rgba(201, 162, 39, 0.12);
}

.tab-menu-stat-label {
  color: rgba(210, 198, 170, 0.85);
  flex-shrink: 0;
}

.tab-menu-stat-value {
  color: rgba(228, 215, 185, 0.95);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

#tab-menu-stat-tooltip {
  position: fixed;
  z-index: 1100;
  max-width: 320px;
  padding: 10px 12px;
  background: rgba(12, 14, 18, 0.96);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(228, 220, 195, 0.92);
  white-space: pre-line;
  pointer-events: none;
}

#tab-menu-stat-tooltip.hidden {
  display: none;
}

#tab-menu-stats-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9a227;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

#tab-menu-stats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 1.2rem;
  color: rgba(228, 215, 185, 0.9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

#tab-menu-stats-list .stat-row {
  color: rgba(210, 198, 170, 0.88);
}

/* Column: loadout bar above silhouette so the sheet stays under the arrows, not beside them */
#tab-menu-character-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

#tab-menu-character-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#tab-menu-character-wrap .slot-quickuse {
  width: 72px;
  height: 72px;
  position: static;
  transform: none;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 6px;
  background: rgba(10, 8, 16, 0.35);
  font-size: 16px;
  color: rgba(190, 175, 150, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
#tab-menu-character-wrap .slot-quickuse:hover {
  border-color: rgba(232, 197, 71, 0.75);
  background: rgba(201, 162, 39, 0.12);
}
#tab-menu-character-wrap .slot-quickuse.equipped {
  border-color: rgba(142, 200, 120, 0.85);
  background: rgba(60, 90, 55, 0.35);
  color: #b8e8a8;
}

#tab-menu-character-silhouette {
  position: relative;
  width: 360px;
  height: 520px;
  border: 1px solid rgba(201, 162, 39, 0.42);
  border-radius: 4px;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background-color: #141018;
  /* Match merchant ally sheet: vignette + portrait so edges stay opaque (no “hole” over the map) */
  background-image:
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(12, 10, 18, 0.22) 0%, rgba(6, 5, 12, 0.65) 78%),
    url('../images/riftwalker.gif');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

#tab-menu-character-silhouette .equip-slot {
  position: absolute;
  z-index: 1;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 6px;
  background: rgba(8, 6, 14, 0.4);
  font-size: 16px;
  color: rgba(190, 175, 150, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  padding: 0;
  box-sizing: border-box;
}

#tab-menu-character-silhouette .equip-slot:hover {
  border-color: rgba(232, 197, 71, 0.8);
  background: rgba(201, 162, 39, 0.14);
}

#tab-menu-character-silhouette .equip-slot.equipped {
  border-color: rgba(142, 200, 120, 0.85);
  background: rgba(55, 85, 50, 0.38);
  color: #b8e8a8;
}

/* Position slots over silhouette: amulet top-left, ring top-right */
#tab-menu-character-silhouette .slot-head   { left: 50%; top: 2%;   transform: translate(-50%, 0); }
#tab-menu-character-silhouette .slot-chest  { left: 50%; top: 22%;  transform: translate(-50%, 0); }
#tab-menu-character-silhouette .slot-hands { left: 50%; top: 38%;  transform: translate(-50%, 0); }
#tab-menu-character-silhouette .slot-weapon{ left: 18%; top: 35%;  }
#tab-menu-character-silhouette .slot-legs  { left: 50%; top: 52%;  transform: translate(-50%, 0); }
#tab-menu-character-silhouette .slot-feet  { left: 50%; top: 72%;  transform: translate(-50%, 0); }
#tab-menu-character-silhouette .slot-ring  { right: 2%; top: 2%; left: auto; }
#tab-menu-character-silhouette .slot-amulet{ left: 2%; top: 2%; }
#tab-menu-character-silhouette .slot-shield{ left: 78%; top: 32%;  }
#tab-menu-character-silhouette .slot-pet   { left: 2%; bottom: 2%; top: auto; }

/* One framed column like merchant “your inventory” (opaque so slot gaps never show the map) */
#tab-menu-inner.tab-menu-rpg-window #tab-menu-inventory-section {
  min-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 16px 16px;
  background: rgba(10, 12, 18, 0.92);
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

#tab-menu-inventory-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  flex-shrink: 0;
}
#tab-menu-inventory-tabs .tab-menu-panel-tab {
  padding: 6px 14px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(40, 34, 52, 0.95), rgba(22, 18, 32, 0.98));
  color: rgba(195, 180, 155, 0.88);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
#tab-menu-inventory-tabs .tab-menu-panel-tab:hover {
  border-color: rgba(232, 197, 71, 0.65);
  color: #f5e6c8;
}
#tab-menu-inventory-tabs .tab-menu-panel-tab.active {
  border-color: rgba(232, 197, 71, 0.85);
  background: linear-gradient(180deg, rgba(55, 48, 30, 0.95), rgba(28, 22, 16, 0.98));
  color: #f5e6a8;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 140, 0.12);
}
.tab-menu-panel-content.hidden {
  display: none;
}
.tab-menu-panel-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c9a227;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.22);
}

.tab-menu-inventory-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.22);
}
.tab-menu-inventory-title-row .tab-menu-panel-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  flex: 1 1 auto;
}
.tab-menu-forge-rift-miner-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  background: linear-gradient(180deg, rgba(40, 36, 68, 0.95), rgba(22, 20, 42, 0.98));
  color: rgba(215, 210, 255, 0.92);
  cursor: pointer;
  flex: 0 0 auto;
}
.tab-menu-forge-rift-miner-btn:hover:not(:disabled) {
  border-color: rgba(165, 180, 252, 0.75);
  color: #eef2ff;
}
.tab-menu-forge-rift-miner-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.tab-menu-fortress-storage-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 166, 87, 0.45);
  background: linear-gradient(180deg, rgba(48, 32, 18, 0.95), rgba(28, 18, 10, 0.98));
  color: rgba(255, 210, 160, 0.92);
  cursor: pointer;
  flex: 0 0 auto;
}
.tab-menu-fortress-storage-btn:hover:not(:disabled) {
  border-color: rgba(255, 166, 87, 0.85);
  color: #ffe8cc;
}
.tab-menu-fortress-storage-btn.fortress-storage-mode-active {
  border-color: #ffa657;
  box-shadow: 0 0 12px rgba(255, 166, 87, 0.65), inset 0 0 8px rgba(255, 166, 87, 0.2);
  color: #fff;
}
.tab-menu-fortress-storage-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.fortress-storage-mode {
  cursor: none;
}
.fortress-storage-mode #tab-menu-inventory-slots .inv-slot:not(:disabled):hover,
.fortress-storage-mode #tab-menu-character-wrap .equip-slot.equipped:hover {
  box-shadow: 0 0 0 2px rgba(255, 166, 87, 0.85), 0 0 10px rgba(255, 166, 87, 0.45);
  border-color: #ffa657;
}

#tab-menu-fortress-storage-cursor {
  position: fixed;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 166, 87, 0.9);
  box-shadow: 0 0 14px rgba(255, 166, 87, 0.75), inset 0 0 6px rgba(255, 166, 87, 0.35);
  pointer-events: none;
  z-index: 10050;
}

.tab-menu-blueprints-toolbar {
  margin-bottom: 10px;
}
.tab-menu-blueprint-upload-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  background: linear-gradient(180deg, rgba(45, 38, 58, 0.95), rgba(22, 18, 32, 0.98));
  color: rgba(235, 220, 190, 0.92);
  cursor: pointer;
}
.tab-menu-blueprint-upload-btn:hover {
  border-color: rgba(232, 197, 71, 0.7);
  background: rgba(30, 26, 40, 0.95);
  color: #f5e6c8;
}
.tab-menu-blueprints-hint {
  font-size: 0.98rem;
  font-style: italic;
  color: rgba(175, 158, 130, 0.78);
  margin: 0 0 12px;
  max-width: 28rem;
  line-height: 1.45;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

#tab-menu-inventory-slots,
.tab-menu-inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  width: min-content;
}

.tab-menu-spells-hint {
  font-size: 12px;
  color: rgba(195, 180, 155, 0.78);
  margin: 0 0 10px;
  font-family: 'EB Garamond', Georgia, serif;
}
.tab-menu-spells-hint kbd {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(24, 20, 32, 0.8);
}

#tab-menu-spells-slots,
#spell-tome-spells-slots,
.tab-menu-spells-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: min-content;
}
#tab-menu-spells-slots .spell-slot,
#spell-tome-spells-slots .spell-slot,
#tab-menu-blueprints-slots .spell-slot {
  width: 80px;
  height: 80px;
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(32, 28, 44, 0.92), rgba(16, 14, 24, 0.96));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(195, 180, 155, 0.88);
  text-align: center;
  padding: 4px;
  overflow: hidden;
  font-family: 'EB Garamond', Georgia, serif;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
#tab-menu-spells-slots .spell-slot:hover,
#spell-tome-spells-slots .spell-slot:hover,
#tab-menu-blueprints-slots .spell-slot:hover {
  border-color: rgba(232, 197, 71, 0.72);
  background: rgba(40, 34, 52, 0.95);
}
#tab-menu-spells-slots .spell-slot.equipped,
#spell-tome-spells-slots .spell-slot.equipped,
#tab-menu-blueprints-slots .spell-slot.equipped {
  border-color: rgba(142, 200, 120, 0.85);
  background: rgba(35, 55, 38, 0.55);
  color: #c8e8b8;
}
#tab-menu-spells-slots .spell-slot.equipped-main,
#spell-tome-spells-slots .spell-slot.equipped-main {
  box-shadow: inset 0 0 0 2px rgba(120, 170, 255, 0.55);
}
#tab-menu-spells-slots .spell-slot.equipped-off,
#spell-tome-spells-slots .spell-slot.equipped-off {
  box-shadow: inset 0 0 0 2px rgba(200, 160, 90, 0.5);
}

#tab-menu-inventory-slots .inv-slot {
  width: 80px;
  height: 80px;
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(32, 28, 44, 0.92), rgba(16, 14, 24, 0.96));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(195, 180, 155, 0.88);
  text-align: center;
  padding: 2px;
  overflow: hidden;
  font-family: 'EB Garamond', Georgia, serif;
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#tab-menu-inventory-slots .inv-slot:hover {
  border-color: rgba(232, 197, 71, 0.72);
  background: rgba(40, 34, 52, 0.95);
}

#tab-menu-inventory-slots .inv-slot.equipped {
  border-color: rgba(142, 200, 120, 0.85);
  background: rgba(35, 55, 38, 0.55);
  color: #c8e8b8;
}

#tab-menu-inventory-slots .inv-slot:empty::after {
  content: '—';
  color: rgba(90, 75, 110, 0.55);
  font-size: 18px;
  pointer-events: none;
}

/* Inline canvas in flex <button> can layout oddly in some engines; match .merchant-shop-cell-canvas */
#tab-menu-inventory-slots .inv-slot > canvas,
#tab-menu-character-wrap .equip-slot > canvas,
#tab-menu-character-silhouette .equip-slot > canvas,
#tab-menu-spells-slots .spell-slot > canvas,
#tab-menu-abilities-slots .spell-slot > canvas {
  display: block;
  flex-shrink: 0;
}

#tab-menu-inner.tab-menu-rpg-window #tab-menu-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(201, 162, 39, 0.28);
}

#tab-menu-inner.tab-menu-rpg-window #tab-menu-hint {
  margin-top: 14px;
  font-size: 0.95rem;
  color: rgba(175, 158, 130, 0.82);
}

#inv-context-menu {
  position: fixed;
  z-index: 10000;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 120px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#inv-context-menu.hidden {
  display: none;
}
#inv-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  border: none;
  background: none;
  color: #e6edf3;
  cursor: pointer;
  font-size: 14px;
}
#inv-context-menu button:hover {
  background: #30363d;
}

#pet-context-menu {
  position: fixed;
  z-index: 10000;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#pet-context-menu.hidden {
  display: none;
}
#pet-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  border: none;
  background: none;
  color: #e6edf3;
  cursor: pointer;
  font-size: 14px;
}
#pet-context-menu button:hover:not(:disabled) {
  background: #30363d;
}
#pet-context-menu button:disabled {
  color: rgba(230, 237, 243, 0.45);
  cursor: not-allowed;
}

#blueprint-context-menu {
  position: fixed;
  z-index: 10000;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 120px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#blueprint-context-menu.hidden {
  display: none;
}
#blueprint-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  border: none;
  background: none;
  color: #e6edf3;
  cursor: pointer;
  font-size: 14px;
}
#blueprint-context-menu button:hover {
  background: #30363d;
}

#portal-travel-context-menu {
  position: fixed;
  z-index: 10000;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 4px 0;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#portal-travel-context-menu.hidden {
  display: none;
}
#portal-travel-context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  border: none;
  background: none;
  color: #e6edf3;
  cursor: pointer;
  font-size: 14px;
}
#portal-travel-context-menu button:hover {
  background: #30363d;
}

#inv-destroy-confirm {
  position: fixed;
  z-index: 10001;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 4px 0 6px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
#inv-destroy-confirm.hidden {
  display: none;
}
#inv-destroy-confirm .inv-scrap-confirm-prompt {
  margin: 0;
  padding: 8px 14px 6px;
  color: #8b949e;
  font-size: 12px;
}
#inv-destroy-confirm button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 14px;
  text-align: left;
  border: none;
  background: none;
  color: #e6edf3;
  cursor: pointer;
  font-size: 14px;
}
#inv-destroy-confirm button:hover {
  background: #30363d;
}
#inv-destroy-confirm button.inv-scrap-confirm-primary {
  color: #f0dfa0;
  font-weight: 600;
}
#inv-destroy-confirm button.inv-scrap-research-primary {
  color: #a5d6ff;
  font-weight: 600;
}
#inv-destroy-confirm button.hidden {
  display: none;
}

/* ---------------------------------------------------------------------------
   Shared game tooltips (.game-tooltip) — parchment skin, tiers, motion, tail
   --------------------------------------------------------------------------- */
.game-tooltip {
  --tooltip-bg-stripe-1: #f3e7c6;
  --tooltip-bg-stripe-2: #ecddb8;
  --tooltip-border: #8f7144;
  --tooltip-text: #3a2711;
  --tooltip-title: #54381b;
  --tooltip-muted: #5a4020;
  --tooltip-accent: #7a4e18;
  --tooltip-hint: #6b5538;

  box-sizing: border-box;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 80% 84%, rgba(127, 83, 32, 0.12), rgba(127, 83, 32, 0) 52%),
    repeating-linear-gradient(-9deg, var(--tooltip-bg-stripe-1), var(--tooltip-bg-stripe-1) 9px, var(--tooltip-bg-stripe-2) 9px, var(--tooltip-bg-stripe-2) 18px);
  border: 1px solid var(--tooltip-border);
  border-radius: 8px;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 12px;
  color: var(--tooltip-text);
  line-height: 1.45;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(122, 88, 46, 0.34),
    0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: scale(0.97);
  transform-origin: top left;
}

.game-tooltip.is-visible {
  /* Non-animation fallback so tooltips stay readable if animation is blocked/skipped */
  opacity: 1;
  transform: scale(1);
  animation: tooltip-enter 140ms ease-out forwards;
}

@keyframes tooltip-enter {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.game-tooltip.hidden {
  display: none;
}

.game-tooltip .tt-title {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
  color: var(--tooltip-title);
  text-shadow: 0 1px 0 rgba(255, 248, 231, 0.5);
  white-space: normal;
  overflow-wrap: anywhere;
}

.game-tooltip .tt-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.game-tooltip .tt-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(122, 88, 46, 0.14);
  border: 1px solid rgba(122, 88, 46, 0.28);
  color: var(--tooltip-muted);
}

.game-tooltip .tt-lore {
  font-style: italic;
  color: var(--tooltip-muted);
  margin-bottom: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.game-tooltip .tt-section-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tooltip-accent);
  margin: 6px 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(122, 88, 46, 0.25);
}

.game-tooltip .tt-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 1px 0;
  min-width: 0;
}

.game-tooltip .tt-stat-label {
  color: var(--tooltip-muted);
  flex-shrink: 0;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.game-tooltip .tt-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--tooltip-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.game-tooltip .tt-line {
  color: var(--tooltip-text);
  white-space: normal;
  overflow-wrap: anywhere;
}

.game-tooltip .tt-line--muted {
  color: var(--tooltip-muted);
  font-size: 11.5px;
}

.game-tooltip .tt-line--hint {
  color: var(--tooltip-hint);
  font-size: 11px;
  font-style: italic;
}

.game-tooltip .tt-line--accent {
  color: var(--tooltip-accent);
  font-weight: 600;
}

.game-tooltip .tt-kw {
  color: var(--tooltip-accent);
  font-weight: 600;
}

.game-tooltip .tt-divider {
  height: 1px;
  margin: 5px 0;
  background: rgba(122, 88, 46, 0.22);
}

.game-tooltip .tt-html .void-pressure-tooltip-rates {
  color: #1a1008;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Tier border glow */
.game-tooltip.tooltip-tier-2 {
  border-color: #5a9a62;
  box-shadow:
    inset 0 0 0 1px rgba(90, 154, 98, 0.35),
    0 0 10px rgba(126, 231, 135, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

.game-tooltip.tooltip-tier-3 {
  border-color: #4a7ab0;
  box-shadow:
    inset 0 0 0 1px rgba(74, 122, 176, 0.35),
    0 0 10px rgba(121, 192, 255, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

.game-tooltip.tooltip-tier-4 {
  border-color: #8a5ab8;
  box-shadow:
    inset 0 0 0 1px rgba(138, 90, 184, 0.35),
    0 0 12px rgba(210, 168, 255, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Cursor-following tooltips */
.game-tooltip.game-tooltip--cursor {
  position: fixed;
  z-index: 9999;
  max-width: 280px;
  transition: left 80ms ease-out, top 80ms ease-out;
}

.game-tooltip.game-tooltip--cursor::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--tooltip-bg-stripe-1);
  border: 1px solid var(--tooltip-border);
  transform: rotate(45deg);
  left: 12px;
  top: -5px;
  box-shadow: -1px -1px 0 rgba(122, 88, 46, 0.2);
}

.game-tooltip.game-tooltip--cursor.tooltip--flip-y::before {
  top: auto;
  bottom: -5px;
  box-shadow: 1px 1px 0 rgba(122, 88, 46, 0.2);
}

.game-tooltip.game-tooltip--cursor.tooltip--flip-x::before {
  left: auto;
  right: 12px;
}

/* Gameplay tooltip panel — top-left HUD column, independent of void pressure gauge width */
#world-hover-tooltip {
  align-self: flex-start;
  max-width: min(280px, calc(100vw - 48px));
  width: max-content;
  pointer-events: auto;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.35;
}

#world-hover-tooltip .tt-title {
  font-size: 12px;
  margin-bottom: 3px;
}

#world-hover-tooltip .tt-stat {
  margin: 0;
  gap: 6px;
}

#world-hover-tooltip .tt-stat-label {
  font-size: 10.5px;
}

#world-hover-tooltip .tt-stat-value {
  font-size: 10.5px;
}

#world-hover-tooltip .tt-divider {
  margin: 4px 0;
}

#world-hover-tooltip .tt-lore {
  font-size: 11px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.game-tooltip.game-tooltip--anchored {
  position: relative;
  max-width: min(280px, calc(100vw - 48px));
  width: max-content;
  max-height: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  z-index: 1;
}

.tt-stat-value--ok {
  color: #2d6a3a;
  font-weight: 600;
}

.tt-stat-value--bad {
  color: #8b2e2e;
  font-weight: 600;
}

#inv-item-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 260px;
  /* Beat `#ui-overlay * { pointer-events: auto }` so the tip never steals hover from build tiles. */
  pointer-events: none !important;
}
#inv-item-tooltip.hidden {
  display: none;
}

#hud-debuff-tooltip {
  position: fixed;
  z-index: 30;
  max-width: min(300px, 92vw);
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 246, 222, 0.55);
}
#hud-debuff-tooltip.hidden {
  display: none;
}
#hud-debuff-tooltip.hud-tooltip-multiline {
  white-space: pre-wrap;
  font-weight: 400;
  line-height: 1.4;
}

/* Legacy aliases */
#inv-item-tooltip .tt-name {
  font-weight: 700;
  margin-bottom: 4px;
  color: #54381b;
  text-shadow: 0 1px 0 rgba(255, 248, 231, 0.5);
}
#inv-item-tooltip .tt-line {
  color: #4a3117;
}

#tab-menu-hint {
  margin-top: 22px;
  font-size: 1.02rem;
  line-height: 1.5;
  font-style: italic;
  color: rgba(175, 158, 130, 0.82);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

#tab-menu-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

#tab-menu-inner.tab-menu-rpg-window #tab-menu-actions button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  color: rgba(235, 224, 200, 0.92);
  background: linear-gradient(180deg, rgba(45, 38, 58, 0.95), rgba(22, 18, 32, 0.98));
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#tab-menu-inner.tab-menu-rpg-window #tab-menu-actions button:hover {
  border-color: rgba(232, 197, 71, 0.75);
  background: linear-gradient(180deg, rgba(55, 48, 38, 0.95), rgba(28, 22, 18, 0.98));
  color: #f5e6c8;
}

/* Legacy panels: hide if present (e.g. cached HTML) so only TAB menu is used */
#stats-panel,
#inventory-panel {
  display: none !important;
}

#stats-panel {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(22, 27, 34, 0.9);
  border: 1px solid #30363d;
  border-radius: 4px;
  font-size: 11px;
}

#stats-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #e8e6e3;
}

#stats-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#stats-list .stat-row {
  color: #8b949e;
}

#download-log-btn {
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 11px;
  align-self: flex-start;
}

#inventory-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  color: #8b949e;
  max-width: 200px;
  z-index: 10;
}

#inventory-title {
  margin-bottom: 4px;
  font-weight: 600;
}

#inventory-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#inventory-slots .inv-slot {
  width: 36px;
  height: 36px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #21262d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #8b949e;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  pointer-events: auto;
  font-family: inherit;
  margin: 0;
  min-width: 36px;
}

#inventory-slots .inv-slot:hover {
  border-color: #58a6ff;
  background: #161b22;
}

#inventory-slots .inv-slot.equipped {
  border-color: #7ee787;
  background: #1c2d1c;
}

#level-up-overlay,
#essence-level-up-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

#essence-level-up-overlay {
  z-index: 11;
}

#level-up-box,
#essence-level-up-box {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 24px;
  max-width: 90vw;
}

#level-up-box h2,
#essence-level-up-box h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #7ee787;
}

#level-up-box p,
#essence-level-up-box p {
  font-size: 0.9rem;
  color: #8b949e;
  margin-bottom: 16px;
}

#level-up-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  justify-items: stretch;
}

#essence-level-up-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  justify-items: stretch;
}

#essence-level-up-options .essence-level-up-card {
  --card-edge: #3d8bfd;
  --card-base: #161b22;
  color: #e6edf3;
  background: linear-gradient(165deg, #1c2330 0%, #12171f 100%);
  border-color: var(--card-edge);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

#essence-level-up-options .essence-level-up-card::after {
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

#essence-level-up-options .essence-level-up-card:hover,
#essence-level-up-options .essence-level-up-card:focus-visible {
  --card-edge: #58a6ff;
  background: linear-gradient(165deg, #243044 0%, #171d28 100%);
  box-shadow:
    0 0 0 1px rgba(88, 166, 255, 0.35),
    0 14px 28px rgba(0, 0, 0, 0.5);
}

#essence-level-up-options .essence-level-up-card:hover::after,
#essence-level-up-options .essence-level-up-card:focus-visible::after {
  opacity: 0.2;
}

#essence-level-up-options .essence-level-up-card .tier-pill {
  color: #0d1117;
  background: rgba(126, 231, 135, 0.88);
  border-color: rgba(13, 17, 23, 0.25);
}

#essence-level-up-options .essence-level-up-card .stat-name {
  color: #f0f6fc;
}

#essence-level-up-options .essence-level-up-card .stat-bonus {
  color: #7ee787;
  text-shadow: none;
}

#essence-level-up-options .essence-level-up-card .stat-effects {
  color: #c9d1d9;
}

#level-up-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
}

#level-up-reroll-cost {
  font-size: 12px;
  color: #8b949e;
}

.level-up-card {
  position: relative;
  width: 100%;
  min-height: 220px;
  border-radius: 12px;
  border: 2px solid var(--card-edge, #30363d);
  background: var(--card-base, #1b1f27);
  color: #000;
  font-weight: 800;
  cursor: pointer;
  padding: 14px 14px 12px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.level-up-card:hover {
  transform: translateY(-1px);
  transition: transform 90ms ease;
}

.level-up-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 26px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.level-up-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    radial-gradient(110% 80% at 70% 85%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 2px,
      rgba(0, 0, 0, 0.06) 6px);
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

.level-up-card .tier-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.2px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #000;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.level-up-card .card-body {
  position: relative;
  margin-top: 16px;
}

.level-up-card .stat-name {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px 0;
}

.level-up-card .stat-bonus {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #000;
  text-shadow: none;
}

.level-up-card .stat-effects {
  margin: 0;
  padding-left: 18px;
  color: #000;
  font-size: 12px;
  line-height: 1.35;
}

.level-up-card .stat-effects li {
  margin: 0 0 6px 0;
}

/* Subtle tier “aura” without fighting the base stat color */
.level-up-card {
  outline: 1px solid rgba(0, 0, 0, 0.18);
}

.level-up-card:hover::after {
  opacity: 0.45;
}

#stat-book-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#stat-book-box {
  position: relative;
  width: min(920px, 94vw);
  max-height: 88vh;
  overflow: auto;
  padding: 30px 34px 28px;
  border-radius: 16px;
  border: 1px solid #8d6f43;
  background:
    linear-gradient(90deg, rgba(103, 70, 34, 0.22) 49.4%, rgba(67, 44, 20, 0.36) 49.8%, rgba(67, 44, 20, 0.36) 50.2%, rgba(103, 70, 34, 0.22) 50.6%),
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0) 56%),
    radial-gradient(circle at 84% 86%, rgba(120, 82, 37, 0.18), rgba(120, 82, 37, 0) 58%),
    repeating-linear-gradient(-8deg, #f5e8c8, #f5e8c8 10px, #ecdcb6 10px, #ecdcb6 20px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 196, 0.45),
    inset 0 0 36px rgba(98, 68, 33, 0.2),
    0 18px 45px rgba(0, 0, 0, 0.45);
}

#stat-book-box::before,
#stat-book-box::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(122, 88, 46, 0.58);
  pointer-events: none;
  z-index: 1;
}

#stat-book-box::before {
  left: 12px;
  top: 12px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
}

#stat-book-box::after {
  right: 12px;
  bottom: 12px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 8px;
}

#npc-menu-overlay,
#dialogue-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  pointer-events: auto;
}

#anchor-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: transparent;
  pointer-events: auto;
}

#anchor-menu-overlay:not(.hidden) {
  display: flex !important;
}

#workbench-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(8, 6, 5, 0.88);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

#workbench-overlay:not(.hidden) {
  display: flex !important;
}

#quest-menu-overlay,
#npc-interact-choice-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  pointer-events: auto;
}

#quest-menu-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 24px;
  padding: 48px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

#quest-menu-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#quest-menu-options button {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
}

#quest-menu-options button:hover {
  background: #30363d;
}

#npc-interact-choice-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 24px;
  padding: 48px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

#npc-interact-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

#npc-interact-choice-buttons button,
#npc-interact-choice-cancel-btn {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
}

#npc-interact-choice-buttons button:hover,
#npc-interact-choice-cancel-btn:hover {
  background: #30363d;
}

#npc-menu-inner,
#dialogue-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 24px;
  padding: 48px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  min-width: min(520px, 90vw);
}

#dialogue-speaker.dialogue-speaker {
  font-weight: 600;
  color: #c9d1d9;
  margin: 0 0 12px;
}

#dialogue-text {
  margin: 0 0 8px;
  line-height: 1.45;
}

.dialogue-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0 8px;
}

.dialogue-choice-btn {
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #e6edf3;
  cursor: pointer;
  font-size: 14px;
}

.dialogue-choice-btn:hover:not(:disabled) {
  background: #30363d;
  border-color: #484f58;
}

.dialogue-choice-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#anchor-menu-inner {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 12px;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #0a0c10;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
}

#anchor-menu-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 14, 0.42) 0%,
    rgba(10, 12, 16, 0.55) 45%,
    rgba(6, 8, 12, 0.68) 100%
  );
  pointer-events: none;
  z-index: 0;
}

#anchor-menu-inner > * {
  position: relative;
  z-index: 1;
}

.anchor-menu-pages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.anchor-menu-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.anchor-menu-page.hidden {
  display: none !important;
}

.anchor-page-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #d4a853;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.anchor-page-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-right: 0;
}

.anchor-page-body--vigil {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.anchor-vigil-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  flex-shrink: 0;
  align-items: stretch;
}

.anchor-vigil-quest-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid rgba(48, 54, 61, 0.85);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.58);
  overflow-y: auto;
  max-height: min(240px, 30vh);
}

.anchor-vigil-quest-col .anchor-hub-body {
  margin-bottom: 0;
  flex: 0 1 auto;
  overflow: visible;
}

.anchor-vigil-void-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.anchor-vigil-void-idle {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #8b949e;
  border: 1px solid rgba(48, 54, 61, 0.65);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.45);
}

.anchor-vigil-void-idle.hidden {
  display: none;
}

.anchor-page-body--upgrades {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
}

.anchor-menu-page:not(#anchor-hub-page-vigil) > .anchor-page-body:not(.anchor-page-body--vigil) {
  overflow-y: auto;
  padding-right: 4px;
}

.anchor-subsection-title {
  margin: 16px 0 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #c9d1d9;
}

.anchor-shared-feed-panel {
  flex-shrink: 0;
  padding: 10px 0 4px;
  border-top: 1px solid #30363d;
  margin-bottom: 4px;
}

.anchor-shared-feed-panel.hidden {
  display: none !important;
}

#anchor-hub-page-craft {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#anchor-hub-page-craft .anchor-page-title {
  display: none;
}

.anchor-hub-craft-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.anchor-hub-craft-mount .workbench-shell--embedded {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  gap: 10px;
}

.anchor-hub-craft-mount .workbench-inner--embedded {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border-radius: 8px;
}

.anchor-hub-craft-mount .workbench-inner--embedded::before {
  border-radius: 8px;
}

.anchor-hub-craft-mount .workbench-resources-panel {
  max-height: none;
}

.anchor-menu-tabs {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 10px;
  border-top: 1px solid #30363d;
  border-bottom: 1px solid #21262d;
  margin-bottom: 12px;
}

.anchor-nav-tab {
  flex: 0 1 auto;
  min-width: 0;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #8b949e;
  text-align: center;
  line-height: 1.2;
  max-width: 11rem;
}

.anchor-nav-tab:hover {
  background: #30363d;
  color: #e6edf3;
}

.anchor-nav-tab--active {
  background: #2a3140;
  border-color: #d4a853;
  color: #f0e6d0;
  box-shadow: inset 0 0 0 1px rgba(212, 168, 83, 0.25);
}

.anchor-hub-fortress-block {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px solid #30363d;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.anchor-hub-quote {
  margin: 0 0 8px;
  color: #e6edf3;
  font-size: 0.92rem;
  line-height: 1.45;
  font-style: italic;
}

.anchor-hub-body {
  margin: 0 0 10px;
  color: #8b949e;
  font-size: 0.85rem;
  line-height: 1.4;
}

.anchor-hub-void-btn {
  padding: 8px 12px;
  font-size: 0.88rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 8px;
  color: #d4a853;
  min-width: 0;
  box-sizing: border-box;
}

.anchor-wave-panel .anchor-hub-void-btn {
  width: 100%;
}

.anchor-hub-void-btn:hover {
  background: #30363d;
}

.anchor-hub-claim-btn,
.anchor-hub-revive-btn,
.anchor-hub-craft-btn {
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 8px;
  color: #e6edf3;
  flex-shrink: 0;
}

.anchor-menu-footer-actions {
  display: none;
}

.anchor-hub-claim-btn:hover:not(:disabled),
.anchor-hub-revive-btn:hover:not(:disabled),
.anchor-hub-craft-btn:hover:not(:disabled) {
  background: #30363d;
}

.anchor-hub-claim-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.anchor-hub-upgrade-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.anchor-hub-tab {
  flex: 1;
  padding: 8px 10px;
  font-size: 0.88rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #8b949e;
}

.anchor-hub-tab--active {
  border-color: #d4a853;
  color: #e6edf3;
  box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.25);
}

.anchor-menu-actions--inline {
  flex-direction: row;
  gap: 8px;
  margin-bottom: 0;
}

.anchor-menu-actions--inline button {
  flex: 1;
}

#anchor-hub-upgrades .anchor-stat-sheet {
  max-height: 140px;
  flex: 1;
  min-height: 0;
}

#anchor-hub-soul-stone .anchor-soul-stone-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 8px;
}

.anchor-hub-fortress-hint {
  margin: 0 0 8px;
  color: #8b949e;
  font-size: 0.78rem;
  line-height: 1.35;
  flex-shrink: 0;
}

.anchor-hub-fortress-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.anchor-hub-fortress-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.anchor-hub-fortress-col-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.anchor-hub-fortress-grid {
  flex: 1;
  min-height: 0;
  max-height: 160px;
  overflow-x: hidden;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
}

.anchor-hub-fortress-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.anchor-hub-fortress-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-shrink: 0;
}

.anchor-hub-fortress-actions .fortress-inventory-action-btn {
  flex: 1;
  padding: 6px 8px;
  font-size: 0.78rem;
}

#anchor-hub-fortress-layout[data-quick-move='to-player'] .anchor-hub-fortress-col:first-child .fortress-inventory-slot:not(:disabled) {
  outline: 1px solid rgba(212, 168, 83, 0.35);
}

#anchor-hub-fortress-layout[data-quick-move='to-storage'] .anchor-hub-fortress-col:last-child .fortress-inventory-slot:not(:disabled) {
  outline: 1px solid rgba(212, 168, 83, 0.35);
}

@media (max-width: 820px) {
  #anchor-menu-inner {
    padding: 12px 10px 8px;
  }

  .anchor-vigil-top {
    grid-template-columns: 1fr;
  }

  .anchor-vigil-quest-col {
    max-height: none;
  }

  .anchor-menu-tabs {
    flex-wrap: wrap;
  }

  .anchor-nav-tab {
    flex: 0 1 auto;
    max-width: none;
    font-size: 0.75rem;
    padding: 8px 10px;
  }
}

#workbench-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 14px;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 10px 14px 12px;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  #workbench-shell {
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
  }

  #workbench-inner {
    flex: 1 1 auto;
    min-height: 55vh;
  }

  #workbench-resources-panel {
    flex: 0 0 auto;
    width: 100%;
    max-height: 28vh;
  }
}

#workbench-resources-panel {
  flex: 0 0 auto;
  width: min(228px, 22vw);
  min-width: 180px;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #30363d;
  background: #161b22;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.workbench-resources-heading {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #e6edf3;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.workbench-resources-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 6px;
  align-content: start;
  padding-right: 2px;
}

.workbench-resources-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #8b949e;
  text-align: center;
}

.workbench-resource-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 7px;
  border: 1px solid #30363d;
  background: #21262d;
  cursor: default;
  min-width: 0;
}

.workbench-resource-row:hover {
  border-color: #484f58;
  background: #262c36;
}

.workbench-resource-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workbench-resource-icon canvas {
  display: block;
  image-rendering: pixelated;
}

.workbench-resource-qty {
  flex-shrink: 0;
  min-width: 1.35em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-weight: 700;
  color: #c9d1d9;
}

#workbench-inner {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #3d3428;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  background-color: #1a1510;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#workbench-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 8, 6, 0.14) 0%,
    rgba(12, 10, 8, 0.22) 45%,
    rgba(8, 6, 5, 0.32) 100%
  );
  pointer-events: none;
  z-index: 0;
}

#workbench-inner > * {
  position: relative;
  z-index: 1;
}

.workbench-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(90, 78, 64, 0.45);
  background: rgba(20, 17, 14, 0.95);
}

.workbench-mods-header-btn {
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(90, 78, 64, 0.9);
  background: linear-gradient(180deg, #4a4036 0%, #2e2820 100%);
  color: #f0ebe4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  flex-shrink: 0;
}

.workbench-mods-header-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#workbench-crafting-zone {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px 16px;
  min-height: min(280px, 38vh);
  background: transparent;
  overflow: hidden;
}

/* Workbench UI should behave like a game panel, not selectable document text. */
#workbench-overlay,
#workbench-overlay * {
  -webkit-user-select: none;
  user-select: none;
}

.workbench-close-corner {
  position: static;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  line-height: 32px;
  font-size: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.4);
  color: #e8e6e3;
  cursor: pointer;
}

.workbench-close-corner:hover {
  background: rgba(40, 35, 30, 0.85);
}

.workbench-footer-hint {
  margin: 0;
  flex-shrink: 0;
  padding: 8px 14px 10px;
  font-size: 0.8rem;
  color: #d8cfc4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  border-top: 1px solid rgba(90, 78, 64, 0.35);
  background: rgba(12, 10, 8, 0.55);
}

.workbench-preview-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.workbench-owned-count-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(212, 184, 140, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.workbench-owned-count-wrap.hidden {
  display: none !important;
}

.workbench-owned-count {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #f0ebe4;
}

.workbench-craft-square {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(212, 184, 140, 0.45);
  border-radius: 10px;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(255, 255, 255, 0.06);
}

#workbench-preview-canvas {
  display: block;
  image-rendering: pixelated;
}

.workbench-cost-hint {
  margin: 0 auto;
  text-align: center;
  max-width: min(480px, 90%);
  font-size: 0.88rem;
  color: #e0d6cc;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  min-height: 2.5em;
}

.workbench-cost-hint-missing {
  color: #e8b4a8;
}

.workbench-craft-controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: min(280px, 92%);
  box-sizing: border-box;
  margin-top: 4px;
  padding: 0 2px;
}

.workbench-craft-qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.workbench-craft-qty-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  color: #fdf6e9;
  cursor: pointer;
  border-radius: 8px;
  border: 2px solid #6b5840;
  background: linear-gradient(180deg, #3d3530 0%, #221c18 100%);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.workbench-craft-qty-btn:hover:not(:disabled) {
  border-color: #9a8160;
  background: linear-gradient(180deg, #4d433c 0%, #2a221c 100%);
}

.workbench-craft-qty-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workbench-craft-qty-value {
  box-sizing: border-box;
  min-width: 3.5rem;
  width: 4.25rem;
  padding: 6px 8px;
  margin: 0;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  line-height: 1.2;
  color: #f0ebe4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  border: 1px solid rgba(107, 88, 64, 0.65);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.workbench-craft-qty-value:focus {
  outline: none;
  border-color: #c4a574;
  background: rgba(0, 0, 0, 0.52);
  box-shadow: 0 0 0 1px rgba(196, 165, 116, 0.35);
}

.workbench-craft-qty-value:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#workbench-overlay .workbench-craft-qty-value {
  -webkit-user-select: text;
  user-select: text;
}

.workbench-craft-submit-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.workbench-craftable-only-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(6, 5, 4, 0.36);
  border: 1px solid rgba(72, 62, 52, 0.45);
  color: #ece3cf;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.workbench-craftable-only-label:hover {
  border-color: rgba(196, 165, 116, 0.55);
}

.workbench-craftable-only-label input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #c4a574;
}

.workbench-craft-submit-btn {
  width: 100%;
  padding: 12px 20px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fdf6e9;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid #8a7048;
  background: linear-gradient(180deg, #5a4a38 0%, #2e2418 100%);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.workbench-craft-submit-btn:hover:not(:disabled) {
  border-color: #c4a574;
  background: linear-gradient(180deg, #6b5844 0%, #3a3020 100%);
}

.workbench-craft-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workbench-recipe-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 8px;
  background: transparent;
  border-top: 1px solid rgba(90, 78, 64, 0.45);
  overflow: hidden;
}

#workbench-recipe-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

#workbench-recipe-panel-title {
  margin: 0;
  font-size: 1.05rem;
  color: #f0ebe4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

#workbench-recipe-list {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-right: 4px;
}

.workbench-recipe-group {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.workbench-recipe-group-title {
  margin: 0 0 6px 4px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4c4a8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.workbench-recipe-row-chips {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(6, 5, 4, 0.36);
  border: 1px solid rgba(72, 62, 52, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.workbench-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 72px);
  justify-content: start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.workbench-recipe-slot {
  width: 72px;
  height: 72px;
  padding: 2px;
  margin: 0;
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(32, 28, 44, 0.92), rgba(16, 14, 24, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(195, 180, 155, 0.88);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.workbench-recipe-slot-icon {
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

.workbench-recipe-slot-fallback {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  padding: 2px;
  pointer-events: none;
}

.workbench-recipe-slot:hover:not(:disabled) {
  border-color: rgba(232, 197, 71, 0.72);
  background: rgba(40, 34, 52, 0.95);
}

.workbench-recipe-slot-selected {
  border-color: rgba(196, 165, 116, 0.95);
  background: rgba(55, 46, 36, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(196, 165, 116, 0.4);
}

.workbench-recipe-slot-unaffordable {
  opacity: 0.72;
  border-color: rgba(160, 90, 80, 0.55);
}

.workbench-recipe-slot-locked {
  opacity: 0.55;
  border-color: rgba(120, 113, 108, 0.65);
  filter: grayscale(0.35);
}

.workbench-recipe-slot:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* Cooking Station overlay — layout mirrors workbench; background images/cooking_station.png */
#cooking-station-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(8, 6, 5, 0.88);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

#cooking-station-overlay:not(.hidden) {
  display: flex !important;
}

#cooking-station-shell {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  gap: 14px;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 10px 14px 12px;
  box-sizing: border-box;
}

#cooking-station-inner {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 12px;
  border: 1px solid #4a3828;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  background-color: #1a1208;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

#cooking-station-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 6, 0.12) 0%, rgba(12, 8, 4, 0.28) 45%, rgba(8, 5, 3, 0.36) 100%);
  pointer-events: none;
  z-index: 0;
}

#cooking-station-inner > * {
  position: relative;
  z-index: 1;
}

.cooking-station-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(120, 80, 48, 0.45);
  background: rgba(28, 18, 10, 0.95);
}

.cooking-station-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f5e6d3;
}

.cooking-station-close-corner {
  padding: 4px 10px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(120, 80, 48, 0.9);
  background: linear-gradient(180deg, #5a4030 0%, #3a2818 100%);
  color: #f0ebe4;
}

#cooking-station-crafting-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px 10px;
}

.cooking-station-craft-square {
  width: 96px;
  height: 96px;
  border-radius: 8px;
  border: 2px solid rgba(180, 120, 60, 0.55);
  background: rgba(20, 12, 6, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cooking-station-cost-hint,
.cooking-station-well-fed-hint {
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: #e8dcc8;
  max-width: 520px;
}

.cooking-station-cost-hint-missing {
  color: #f0a890;
}

.cooking-station-well-fed-hint {
  color: #c4e8b0;
  font-size: 0.8rem;
}

.cooking-station-craft-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cooking-station-craft-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cooking-station-craft-qty-btn,
.cooking-station-craft-submit-btn,
.cooking-station-eat-row button {
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(120, 80, 48, 0.9);
  background: linear-gradient(180deg, #6a5038 0%, #4a3828 100%);
  color: #f0ebe4;
}

.cooking-station-craft-submit-btn:disabled,
.cooking-station-eat-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cooking-station-craft-qty-value {
  width: 3rem;
  text-align: center;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(120, 80, 48, 0.7);
  background: rgba(12, 8, 4, 0.85);
  color: #f0ebe4;
}

.cooking-station-eat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.cooking-station-eat-row select {
  min-width: 220px;
  max-width: 360px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 80, 48, 0.7);
  background: rgba(12, 8, 4, 0.9);
  color: #f0ebe4;
  font-size: 0.85rem;
}

#cooking-station-recipe-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(120, 80, 48, 0.35);
  background: rgba(16, 10, 6, 0.72);
}

.cooking-station-recipe-group-title {
  margin: 8px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c9a86c;
}

.cooking-station-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 72px));
  gap: 10px;
}

.cooking-station-recipe-slot {
  width: 72px;
  height: 72px;
  padding: 2px;
  border: 1px solid rgba(180, 120, 60, 0.32);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(44, 28, 16, 0.92), rgba(24, 14, 8, 0.96));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cooking-station-recipe-slot-selected {
  border-color: rgba(220, 160, 80, 0.95);
  box-shadow: 0 0 0 1px rgba(220, 160, 80, 0.4);
}

.cooking-station-recipe-slot-unaffordable {
  opacity: 0.72;
  border-color: rgba(160, 90, 80, 0.55);
}

.cooking-station-footer-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 14px 10px;
  font-size: 0.75rem;
  color: rgba(200, 180, 150, 0.85);
  text-align: center;
  background: rgba(16, 10, 6, 0.88);
}

/* Research Station overlay */
#research-station-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: rgba(8, 6, 12, 0.88);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

#research-station-overlay:not(.hidden) {
  display: flex !important;
}

#research-station-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 10px 14px 12px;
  box-sizing: border-box;
}

#research-station-inner {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid #3d4a5c;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  background-color: #121820;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

#research-station-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 18, 28, 0.15) 0%, rgba(10, 12, 20, 0.55) 100%);
  pointer-events: none;
}

.research-station-header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(100, 120, 160, 0.35);
  background: rgba(12, 16, 24, 0.82);
}

.research-station-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #e2e8f0;
}

.research-station-rp-balance {
  margin: 0;
  font-size: 0.9rem;
  color: #93c5fd;
  font-weight: 600;
}

.research-station-close-corner {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(120, 140, 180, 0.5);
  border-radius: 8px;
  background: rgba(20, 26, 38, 0.9);
  color: #e2e8f0;
}

.research-station-category-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(10, 14, 22, 0.78);
  border-bottom: 1px solid rgba(80, 100, 140, 0.25);
}

.research-station-category-nav {
  position: relative;
  top: auto;
  left: auto;
  flex: 0 0 168px;
  width: 168px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  max-height: none;
  height: 100%;
  overflow-y: auto;
  padding: 8px 6px;
  background: rgba(8, 12, 20, 0.88);
  border-right: 1px solid rgba(80, 100, 140, 0.35);
  pointer-events: auto;
  box-sizing: border-box;
}

.research-category-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--research-cat-accent, #93c5fd) 45%, rgba(80, 100, 140, 0.35));
  background: rgba(12, 16, 26, 0.92);
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.research-category-nav-btn:hover {
  background: rgba(24, 32, 48, 0.95);
  border-color: color-mix(in srgb, var(--research-cat-accent, #93c5fd) 65%, rgba(147, 197, 253, 0.4));
}

.research-category-nav-name {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15;
}

.research-category-nav-sub {
  font-size: 0.62rem;
  color: #94a3b8;
  line-height: 1.2;
}

.research-station-category-tabs--hidden {
  display: none;
}

.research-category-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(100, 130, 180, 0.45);
  background: rgba(24, 32, 48, 0.85);
  color: #cbd5e1;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.research-category-tab--active {
  background: linear-gradient(180deg, #3b4f72 0%, #2a3850 100%);
  color: #f8fafc;
  border-color: rgba(147, 197, 253, 0.55);
}

.research-station-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

.research-station-map-shell {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 220px;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(80, 100, 140, 0.35);
  background: rgba(8, 12, 20, 0.72);
}

.research-station-map {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 220px;
  overflow: hidden;
  cursor: default;
}

.research-station-map.research-station-map--panning {
  cursor: grabbing;
}

.research-station-map-pan {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.research-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.research-link {
  stroke-width: 2.5;
  opacity: 0.85;
}

.research-link--prereq {
  stroke: rgba(147, 197, 253, 0.85);
  stroke-linejoin: miter;
}

.research-category-divider {
  stroke: rgba(100, 130, 180, 0.28);
  stroke-width: 1;
}

.research-category-label-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.research-category-label {
  position: absolute;
  transform: translate(0, -50%);
  width: 112px;
  max-width: 112px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--research-cat-accent, #93c5fd) 45%, rgba(100, 130, 180, 0.4));
  background: rgba(12, 16, 26, 0.94);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.research-category-label-name {
  display: block;
  color: var(--research-cat-accent, #93c5fd);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.research-category-label-sub {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.research-node-layer {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 2;
}

.research-tech-popup {
  position: absolute;
  /* --research-popup-dy clamps into the map viewport (see positionTechPopup). */
  transform: translate(0, calc(-50% + var(--research-popup-dy, 0px)));
  pointer-events: auto;
  z-index: 5;
  min-width: 200px;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 2px solid var(--research-cat-accent, #93c5fd);
  background: rgba(10, 14, 22, 0.94);
  box-shadow:
    0 0 16px 2px color-mix(in srgb, var(--research-cat-accent, #93c5fd) 35%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.45);
  color: #e2e8f0;
  font-size: 0.8rem;
}

.research-tech-popup--left {
  transform: translate(-100%, calc(-50% + var(--research-popup-dy, 0px)));
}

.research-tech-popup-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
  color: var(--research-cat-accent, #93c5fd);
}

.research-tech-popup-desc {
  margin: 0 0 8px;
  color: #cbd5e1;
  font-size: 0.75rem;
  line-height: 1.35;
}

.research-tech-popup-cost {
  margin: 0 0 8px;
  color: #93c5fd;
  font-size: 0.75rem;
}

.research-tech-popup-unlocked {
  margin: 0;
  color: #86efac;
  font-weight: 600;
}

.research-tech-popup-actions {
  margin: 0 0 10px;
  padding-left: 16px;
  font-size: 0.72rem;
}

.research-node-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.research-node {
  min-width: 88px;
  max-width: 120px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid rgba(100, 130, 180, 0.45);
  background: rgba(24, 32, 48, 0.92);
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transform: scale(var(--research-map-node-scale, 1));
  transform-origin: center center;
}

.research-node--unlocked {
  border-color: rgba(74, 222, 128, 0.65);
  background: rgba(20, 60, 40, 0.85);
}

.research-node--ready {
  border-color: rgba(250, 204, 21, 0.75);
}

.research-node--locked {
  opacity: 0.45;
}

.research-node--needs-action {
  border-color: rgba(251, 146, 60, 0.65);
}

.research-node.research-node--selected {
  border-color: var(--research-cat-accent, #93c5fd);
  box-shadow:
    0 0 14px 2px color-mix(in srgb, var(--research-cat-accent, #93c5fd) 40%, transparent),
    0 0 0 2px color-mix(in srgb, var(--research-cat-accent, #93c5fd) 35%, transparent);
  opacity: 1;
}

.research-station-detail {
  display: none;
}

.research-detail-title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.research-detail-desc {
  margin: 0 0 10px;
  color: #cbd5e1;
}

.research-detail-cost {
  margin: 0 0 10px;
  color: #93c5fd;
}

.research-detail-actions {
  margin: 0 0 12px;
  padding-left: 18px;
}

.research-action-met {
  color: #86efac;
}

.research-action-unmet {
  color: #fca5a5;
}

.research-unlock-btn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(120, 150, 200, 0.55);
  background: linear-gradient(180deg, #3b4f72 0%, #2a3850 100%);
  color: #f8fafc;
  font-weight: 700;
  cursor: pointer;
}

.research-unlock-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.research-station-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(80, 100, 140, 0.25);
  background: rgba(10, 14, 22, 0.88);
}

.research-station-study-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(120, 150, 200, 0.55);
  background: rgba(30, 41, 59, 0.95);
  color: #e2e8f0;
  font-weight: 600;
  cursor: pointer;
}

.research-station-footer-hint {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(180, 195, 220, 0.85);
}

#cooking-station-resources-panel {
  flex: 0 0 200px;
  min-width: 160px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid #4a3828;
  background: rgba(20, 14, 8, 0.94);
  padding: 10px 12px;
  overflow: hidden;
}

.cooking-station-resources-heading {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e8dcc8;
}

.cooking-station-resources-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cooking-station-resource-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #d8c8b0;
}

.hud-buff-chip {
  border-color: rgba(220, 160, 80, 0.75) !important;
  box-shadow: 0 0 8px rgba(220, 140, 40, 0.25);
  background: rgba(48, 32, 12, 0.88);
  color: #fde68a;
  border: 1px solid rgba(220, 160, 80, 0.75);
}

.hud-buff-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.hud-buff-time {
  min-width: 28px;
  text-align: right;
  font-weight: 700;
  text-shadow: 0 0 2px #000, 0 1px 2px #000;
}

.npc-menu-quote {
  margin: 0 0 24px;
  font-size: 1.1rem;
  color: #e6edf3;
  white-space: pre-line;
}

#npc-menu-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#npc-menu-options button,
#dialogue-close-btn {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
}

#npc-menu-options button:hover,
#dialogue-close-btn:hover {
  background: #30363d;
}

.anchor-menu-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: #e6edf3;
  flex-shrink: 0;
}

.anchor-menu-close,
#anchor-menu-close-btn {
  flex-shrink: 0;
  align-self: center;
  width: min(420px, 100%);
  margin-top: 6px;
}

.anchor-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.anchor-menu-actions button,
#anchor-menu-close-btn {
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e6edf3;
}

.anchor-menu-actions button:hover,
#anchor-menu-close-btn:hover {
  background: #30363d;
}

.anchor-revive-hint {
  margin: 0 0 16px;
  color: #8b949e;
  font-size: 0.95rem;
}

.anchor-menu-summary {
  margin: 0 0 12px;
  color: #c9d1d9;
  font-size: 0.92rem;
  line-height: 1.45;
}

.anchor-menu-subtitle {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #e6edf3;
}

.anchor-stat-sheet {
  margin: 0 0 12px;
  padding: 12px 14px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: rgba(22, 27, 34, 0.85);
}

.anchor-stat-sheet-line {
  margin: 0 0 6px;
  color: #c9d1d9;
  font-size: 0.88rem;
  line-height: 1.4;
}

.anchor-stat-sheet-line:last-child {
  margin-bottom: 0;
}

.anchor-stat-sheet-line--title {
  color: #e6edf3;
  font-weight: 600;
  font-size: 0.95rem;
}

.anchor-menu-exp-bar {
  margin: 0 0 14px;
  color: #8b949e;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.anchor-feed-soul-qty {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 10px;
}

.anchor-feed-soul-qty-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
  background: linear-gradient(180deg, #2d333b 0%, #21262d 100%);
  border: 1px solid #484f58;
  border-radius: 8px;
  color: #e6edf3;
}

.anchor-feed-soul-qty-btn:hover:not(:disabled) {
  background: #30363d;
}

.anchor-feed-soul-qty-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.anchor-feed-soul-qty-value {
  min-width: 3.5rem;
  width: 4.25rem;
  height: 40px;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: #0d1117;
  border: 1px solid #484f58;
  border-radius: 8px;
  color: #e6edf3;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

.anchor-feed-soul-qty-value:focus {
  outline: none;
  border-color: #d4a853;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(212, 168, 83, 0.25);
}

#anchor-menu-overlay .anchor-feed-soul-qty-value {
  -webkit-user-select: text;
  user-select: text;
}

.anchor-menu-souls-held {
  margin: 0 0 16px;
  text-align: center;
  color: #8b949e;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.anchor-soul-stone-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}

.anchor-soul-stone-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: rgba(22, 27, 34, 0.85);
  cursor: pointer;
  text-align: left;
}

.anchor-soul-stone-row:hover {
  border-color: #484f58;
  background: rgba(33, 38, 45, 0.95);
}

.anchor-soul-stone-row--selected {
  border-color: #d4a853;
  box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.35);
}

.anchor-soul-stone-row--locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.anchor-soul-stone-row--locked:hover {
  border-color: #30363d;
  background: rgba(22, 27, 34, 0.85);
}

.anchor-soul-stone-row-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #0d1117;
  border: 1px solid #30363d;
}

.anchor-soul-stone-row-body {
  flex: 1;
  min-width: 0;
}

.anchor-soul-stone-row-name {
  margin: 0 0 4px;
  font-weight: 600;
  color: #e6edf3;
  font-size: 0.95rem;
}

.anchor-soul-stone-row-desc {
  margin: 0;
  color: #8b949e;
  font-size: 0.82rem;
  line-height: 1.35;
}

.anchor-menu-close {
  margin-top: 8px;
}

#dialogue-text {
  margin: 0 0 24px;
  color: #e6edf3;
  max-width: 400px;
  line-height: 1.5;
}

/* Merchant — same mood as Character (TAB) sheet: vignette + RPG frame + merchant art */
#merchant-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  pointer-events: auto;
  background:
    radial-gradient(ellipse 78% 52% at 50% 42%, rgba(32, 26, 52, 0.5), rgba(5, 4, 10, 0.9)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.055) 0px,
      rgba(0, 0, 0, 0.055) 1px,
      transparent 1px,
      transparent 3px
    );
}

#recruitment-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(8, 10, 14, 0.88);
  backdrop-filter: blur(2px);
  pointer-events: auto;
}

#recruitment-overlay:not(.hidden) {
  display: flex !important;
}

.recruitment-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
  background: linear-gradient(165deg, #1a2332 0%, #0d1117 100%);
  border: none;
  color: #e6edf3;
  position: relative;
}

.recruitment-header {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid #30363d;
}

.recruitment-header-text h2 {
  margin: 0 0 4px;
  font-size: 1.55rem;
  color: #e8e6e3;
}

.recruitment-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.recruitment-sidebar {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border-right: 1px solid #30363d;
  background: rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}

.recruitment-tab-btn {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #c9d1d9;
  font-size: 0.95rem;
  cursor: pointer;
}

.recruitment-tab-btn:hover {
  background: rgba(48, 54, 61, 0.6);
  color: #e6edf3;
}

.recruitment-tab-btn.recruitment-tab-btn--active {
  background: #21262d;
  border-color: #388bfd;
  color: #79c0ff;
  font-weight: 600;
}

.recruitment-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.recruitment-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px 20px 24px;
  box-sizing: border-box;
}

.recruitment-panel.hidden {
  display: none;
}

.recruitment-panel h3.recruitment-section-title:first-child {
  margin-top: 0;
}

.recruitment-close-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #484f58;
  background: #21262d;
  color: #e6edf3;
  cursor: pointer;
  font-size: 0.9rem;
}

.recruitment-close-btn:hover {
  background: #30363d;
}

#recruitment-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 24px;
  padding: 36px 44px;
  max-width: min(720px, 92vw);
  max-height: 88vh;
  overflow: auto;
  color: #e6edf3;
}

#recruitment-inner h2 {
  margin: 0 0 8px;
  font-size: 1.65rem;
  color: #e8e6e3;
}

#recruitment-inner h3.recruitment-section-title,
.recruitment-shell h3.recruitment-section-title {
  margin: 22px 0 10px;
  font-size: 1.05rem;
  color: #79c0ff;
  font-weight: 600;
}

.recruitment-sub {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #8b949e;
}

.recruitment-sub kbd {
  padding: 2px 6px;
  background: #21262d;
  border-radius: 4px;
  border: 1px solid #30363d;
}

.recruitment-coins {
  margin: 0 0 14px;
  font-weight: 600;
  color: #fbbf24;
}

.recruitment-summary {
  margin: 0 0 8px;
  padding: 12px 14px;
  background: #0d1117;
  border-radius: 10px;
  border: 1px solid #30363d;
}

.recruitment-summary p {
  margin: 0 0 6px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #c9d1d9;
}

.recruitment-summary p:last-child {
  margin-bottom: 0;
}

.recruitment-squad-panel {
  margin-bottom: 1rem;
  padding: 0.65rem 0.75rem;
  background: rgba(30, 35, 45, 0.95);
  border: 1px solid #30363d;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.recruitment-squad-panel .recruitment-squad-head {
  margin-bottom: 0.5rem;
  color: #8b949e;
}

.recruitment-squad-panel .recruitment-squad-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid #21262d;
}

.recruitment-squad-panel .recruitment-squad-label {
  flex: 1 1 12rem;
}

.recruitment-squad-panel .recruitment-squad-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.recruitment-squad-panel .recruitment-squad-empty {
  color: #8b949e;
  font-style: italic;
}

.recruitment-combat-panel {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
}

.recruitment-combat-panel .recruitment-combat-head {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}

.recruitment-combat-size-row {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
}

.recruitment-combat-size-input {
  width: 3.5rem;
  margin-left: 0.35rem;
}

.recruitment-combat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 0.9rem;
}

.recruitment-combat-row:first-of-type {
  border-top: none;
}

.recruitment-combat-label {
  flex: 1 1 12rem;
}

.recruitment-combat-select {
  min-width: 7rem;
}

.recruitment-combat-empty {
  color: #8b949e;
  font-style: italic;
  margin: 0;
}

.recruitment-combat-subhead {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.88rem;
  color: #8b949e;
}

.recruitment-npc-interact-btn {
  flex: 0 0 auto;
  min-width: 5.5rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 4px;
  background: rgba(30, 41, 59, 0.85);
  color: #e2e8f0;
}

.recruitment-npc-interact-btn:hover {
  background: rgba(51, 65, 85, 0.95);
  border-color: rgba(148, 163, 184, 0.7);
}

.recruitment-housing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.recruitment-recruit-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recruitment-housing-card {
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(13, 17, 23, 0.6);
}
.recruitment-housing-card--focus {
  border-color: #58a6ff;
  box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.35);
}
.recruitment-housing-card h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #e6edf3;
}
.recruitment-housing-select {
  margin-top: 6px;
  width: 100%;
  max-width: 420px;
  font-size: 12px;
  padding: 4px 6px;
}

.recruitment-card {
  padding: 14px 16px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 12px;
}

.recruitment-card h4 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: #e6edf3;
}

.recruitment-card .recruitment-meta {
  font-size: 0.82rem;
  color: #8b949e;
  margin: 0 0 8px;
  line-height: 1.4;
}

.recruitment-card .recruitment-worker-description {
  font-size: 0.85rem;
  color: #c9d1d9;
  margin: 0 0 10px;
  line-height: 1.45;
}

.recruitment-card .recruitment-bullets {
  margin: 0 0 10px;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: #b0c4de;
  line-height: 1.45;
}

.recruitment-card .recruitment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.recruitment-card button[data-recruit-id] {
  padding: 8px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  background: #238636;
  border: 1px solid #2ea043;
  border-radius: 8px;
  color: #fff;
}

.npc-assign-role-panel {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.npc-assign-role-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
}
.npc-assign-role-row button {
  flex-shrink: 0;
}
.recruitment-specialist-roster-list {
  margin-bottom: 0.75rem;
}
.recruitment-specialist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.35rem 0;
}
.recruitment-specialist-row button {
  flex-shrink: 0;
}
.recruitment-hire-worker-panel {
  margin-bottom: 0.75rem;
}
.recruitment-card button[data-recruit-id]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #21262d;
  border-color: #30363d;
  color: #8b949e;
}

.recruitment-unique-list {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #c9d1d9;
  padding: 10px 14px;
  background: #0d1117;
  border-radius: 10px;
  border: 1px solid #30363d;
}

.recruitment-unique-list .ru-row {
  margin-bottom: 6px;
}

/* legacy close btn — header uses .recruitment-close-btn */

/* Shift+click (stash to ally inv, etc.) must not trigger browser text selection */
#merchant-overlay,
#merchant-overlay * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#merchant-inner.merchant-rpg-window {
  position: relative;
  padding: 36px 40px 40px;
  max-width: 94vw;
  max-height: 90vh;
  overflow: auto;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  color: rgba(235, 224, 200, 0.92);
  border: 3px solid #9a7028;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, transparent 42%),
    linear-gradient(152deg, #262031 0%, #1a1526 48%, #120f18 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 130, 0.28),
    inset 0 0 26px rgba(0, 0, 0, 0.38),
    0 0 0 2px #100c14,
    0 0 0 5px #3d2a18,
    0 14px 36px rgba(0, 0, 0, 0.58),
    0 22px 44px rgba(0, 0, 0, 0.35);
}

#merchant-inner.merchant-rpg-window::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(95, 78, 125, 0.45);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

#merchant-inner.merchant-rpg-window > * {
  position: relative;
  z-index: 1;
}

#merchant-title {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 12px;
  color: #f0dfa0;
  text-shadow:
    0 0 12px rgba(255, 195, 75, 0.22),
    0 2px 0 #1a0f08;
}

#merchant-coins {
  font-size: 1.25rem;
  color: rgba(220, 200, 160, 0.88);
  margin: 0 0 20px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Merchant trade: ally sheet | ally inventory | your inventory (row); buy list below */
.merchant-trade-layout {
  margin-bottom: 28px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 20px;
}

.ally-sheet-side-col {
  flex: 0 0 min(240px, 100%);
  max-width: 280px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 100, 70, 0.45);
  border-radius: 6px;
  background: rgba(20, 16, 12, 0.55);
}

.ally-sheet-side-col.hidden {
  display: none;
}

.ally-sheet-greeting {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
}

.ally-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ally-sheet-action-btn {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(120, 100, 70, 0.5);
  border-radius: 4px;
  background: rgba(40, 32, 24, 0.85);
  color: #e8e6e3;
}

.ally-sheet-action-btn:hover:not(:disabled) {
  background: rgba(60, 48, 32, 0.95);
}

.ally-sheet-action-btn.hidden {
  display: none;
}

.merchant-trade-layout .merchant-trade-row {
  flex: 1 1 520px;
  min-width: min(100%, 480px);
}

/* Cursor-following item preview while trading (pointer-driven) */
/* pointer-events is not inherited — children must be none or clicks hit the icon, not slots below */
.merchant-drag-ghost,
.merchant-drag-ghost * {
  pointer-events: none;
}

.merchant-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10050;
  transform: translate(-50%, -55%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.65));
  opacity: 0.96;
}

.merchant-drag-ghost.hidden {
  display: none;
}

.merchant-drag-ghost canvas {
  display: block;
}

.merchant-drag-ghost-fallback {
  display: block;
  max-width: 140px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  color: #e6edf3;
  background: rgba(22, 27, 34, 0.95);
  border: 1px solid #58a6ff;
  border-radius: 8px;
}

.merchant-trade-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 1400px) {
  .merchant-trade-row {
    flex-wrap: wrap;
  }
}

.merchant-npc-sheet-col,
.merchant-npc-inv-col,
.merchant-player-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.merchant-sell-zone {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  color: #f0c14b;
  border: 2px dashed rgba(201, 162, 39, 0.45);
  border-radius: 6px;
  background: rgba(201, 162, 39, 0.08);
  cursor: pointer;
  user-select: none;
}

.merchant-sell-zone:hover {
  border-color: rgba(232, 197, 71, 0.85);
  background: rgba(201, 162, 39, 0.14);
}

.merchant-subheading {
  font-size: 20px;
  color: #8b949e;
  margin: 0 0 12px;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

#merchant-inner.merchant-rpg-window .merchant-subheading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #c9a227;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.22);
}

.merchant-inventory-hint {
  font-size: 12px;
  color: #6e7681;
  margin: 0 0 10px;
  max-width: 280px;
  text-align: center;
  line-height: 1.35;
}

#merchant-inner.merchant-rpg-window .merchant-inventory-hint {
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(175, 158, 130, 0.78);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.merchant-player-column .merchant-inventory-hint {
  max-width: 420px;
}

.merchant-npc-character-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.merchant-npc-character-wrap .merchant-npc-quickuse {
  width: 64px;
  height: 64px;
  position: static;
  transform: none;
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  color: #8b949e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
}

.merchant-npc-character-wrap .merchant-npc-quickuse:hover {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.15);
}

.merchant-npc-character-wrap .merchant-npc-quickuse.equipped {
  border-color: #7ee787;
  background: rgba(126, 231, 135, 0.2);
  color: #7ee787;
}

.merchant-npc-silhouette {
  position: relative;
  width: 340px;
  height: 480px;
  background: #1a1a1a url('../character.png') no-repeat center / contain;
  border: 1px solid #30363d;
  border-radius: 16px;
}

/* Trade UI: vignette; merchant ally uses images/merchant.png under the equip slots */
#merchant-inner.merchant-rpg-window .merchant-npc-silhouette {
  border: 1px solid rgba(201, 162, 39, 0.42);
  border-radius: 4px;
  background-color: #141018;
  background-image: radial-gradient(ellipse 75% 70% at 50% 42%, rgba(12, 10, 18, 0.15) 0%, rgba(6, 5, 12, 0.78) 78%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.5);
}

#merchant-inner.merchant-rpg-window .merchant-npc-silhouette[data-npc-sheet='merchant'] {
  background-image:
    radial-gradient(ellipse 75% 70% at 50% 42%, rgba(12, 10, 18, 0.22) 0%, rgba(6, 5, 12, 0.65) 78%),
    url('../images/merchant.png');
  background-repeat: no-repeat, no-repeat;
  /* Fill the full 340×480 sheet; cover avoids top/bottom letterboxing from contain */
  background-size: cover, cover;
  background-position: center, center;
}

.merchant-npc-silhouette .equip-slot {
  position: absolute;
  z-index: 1;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(48, 54, 61, 0.9);
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.35);
  font-size: 13px;
  color: #8b949e;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  padding: 2px;
  box-sizing: border-box;
}

.merchant-npc-silhouette .equip-slot:hover {
  border-color: #58a6ff;
  background: rgba(88, 166, 255, 0.15);
}

.merchant-npc-silhouette .equip-slot.equipped {
  border-color: #7ee787;
  background: rgba(126, 231, 135, 0.2);
  color: #7ee787;
}

#merchant-inner.merchant-rpg-window .merchant-npc-silhouette .equip-slot {
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 6px;
  background: rgba(8, 6, 14, 0.4);
  color: rgba(190, 175, 150, 0.88);
}

#merchant-inner.merchant-rpg-window .merchant-npc-silhouette .equip-slot:hover {
  border-color: rgba(232, 197, 71, 0.8);
  background: rgba(201, 162, 39, 0.14);
}

#merchant-inner.merchant-rpg-window .merchant-npc-silhouette .equip-slot.equipped {
  border-color: rgba(142, 200, 120, 0.85);
  background: rgba(55, 85, 50, 0.38);
  color: #b8e8a8;
}

.merchant-npc-silhouette .slot-head   { left: 50%; top: 2%;   transform: translate(-50%, 0); }
.merchant-npc-silhouette .slot-chest  { left: 50%; top: 22%;  transform: translate(-50%, 0); }
.merchant-npc-silhouette .slot-hands { left: 50%; top: 38%;  transform: translate(-50%, 0); }
.merchant-npc-silhouette .slot-weapon{ left: 18%; top: 35%;  }
.merchant-npc-silhouette .slot-legs  { left: 50%; top: 52%;  transform: translate(-50%, 0); }
.merchant-npc-silhouette .slot-feet  { left: 50%; top: 72%;  transform: translate(-50%, 0); }
.merchant-npc-silhouette .slot-ring  { right: 2%; top: 2%; left: auto; }
.merchant-npc-silhouette .slot-amulet{ left: 2%; top: 2%; }
.merchant-npc-silhouette .slot-shield{ left: 78%; top: 32%;  }
.merchant-npc-silhouette .slot-pet   { left: 2%; bottom: 2%; top: auto; }

.merchant-npc-inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  width: min-content;
}

.merchant-npc-inventory-grid .merchant-npc-inv-slot {
  width: 72px;
  height: 72px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #8b949e;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  font-family: inherit;
  margin: 0;
}

#merchant-inner.merchant-rpg-window .merchant-npc-inventory-grid .merchant-npc-inv-slot {
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(32, 28, 44, 0.92), rgba(16, 14, 24, 0.96));
  color: rgba(195, 180, 155, 0.88);
  font-family: 'EB Garamond', Georgia, serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.merchant-npc-inventory-grid .merchant-npc-inv-slot:hover {
  border-color: #58a6ff;
  background: #161b22;
}

#merchant-inner.merchant-rpg-window .merchant-npc-inventory-grid .merchant-npc-inv-slot:hover {
  border-color: rgba(232, 197, 71, 0.72);
  background: rgba(40, 34, 52, 0.95);
}

.merchant-npc-inventory-grid .merchant-npc-inv-slot:empty::after {
  content: '—';
  color: #30363d;
}

#merchant-inner.merchant-rpg-window .merchant-npc-inventory-grid .merchant-npc-inv-slot:empty::after {
  color: rgba(90, 75, 110, 0.5);
}

#blacksmith-anvil-section {
  margin-bottom: 24px;
}

#blacksmith-anvil-title {
  font-size: 22px;
  color: #8b949e;
  margin-bottom: 12px;
}

#blacksmith-anvil-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

#blacksmith-anvil-slot-a,
#blacksmith-anvil-slot-b,
.blacksmith-anvil-slot {
  width: 96px;
  height: 96px;
  border: 2px dashed #30363d;
  border-radius: 10px;
  background: #0d1117;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8b949e;
  font-size: 14px;
  text-align: center;
  padding: 6px;
}

.blacksmith-anvil-slot.has-item:hover {
  border-color: #58a6ff;
}

#blacksmith-inventory-title {
  font-size: 18px;
  color: #8b949e;
  margin-bottom: 12px;
}

#blacksmith-inventory-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  width: min-content;
}

#blacksmith-inventory-slots .blacksmith-inv-slot {
  width: 80px;
  height: 80px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #8b949e;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  font-family: inherit;
  margin: 0;
}

#blacksmith-inventory-slots .blacksmith-inv-slot:empty::after {
  content: '—';
  color: #30363d;
}

#blacksmith-inventory-slots .blacksmith-inv-slot:hover {
  border-color: #58a6ff;
  background: #161b22;
}

#merchant-inventory-title {
  margin-bottom: 4px;
}

#merchant-inventory-slots {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
  width: min-content;
}

#merchant-inventory-slots .merchant-inv-slot {
  width: 80px;
  height: 80px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #8b949e;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  font-family: inherit;
  margin: 0;
}

#merchant-inner.merchant-rpg-window #merchant-inventory-slots .merchant-inv-slot {
  border: 1px solid rgba(201, 162, 39, 0.32);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(32, 28, 44, 0.92), rgba(16, 14, 24, 0.96));
  color: rgba(195, 180, 155, 0.88);
  font-family: 'EB Garamond', Georgia, serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#merchant-inventory-slots .merchant-inv-slot:hover {
  border-color: #58a6ff;
  background: #161b22;
}

#merchant-inner.merchant-rpg-window #merchant-inventory-slots .merchant-inv-slot:hover {
  border-color: rgba(232, 197, 71, 0.72);
  background: rgba(40, 34, 52, 0.95);
}

#merchant-inventory-slots .merchant-inv-slot:empty::after {
  content: '—';
  color: #30363d;
}

#merchant-inner.merchant-rpg-window #merchant-inventory-slots .merchant-inv-slot:empty::after {
  color: rgba(90, 75, 110, 0.5);
}

#merchant-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 162, 39, 0.28);
}

#merchant-shop-wrap {
  width: 100%;
}

.merchant-shop-heading {
  margin-bottom: 6px !important;
}

.merchant-shop-hint {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(175, 158, 130, 0.78);
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.merchant-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  gap: 12px;
  justify-content: start;
  max-width: 100%;
}

.merchant-shop-cell {
  width: 88px;
  min-height: 102px;
  padding: 6px 4px 8px;
  box-sizing: border-box;
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 4px;
  background: linear-gradient(165deg, rgba(32, 28, 44, 0.95), rgba(16, 14, 24, 0.98));
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.merchant-shop-cell:hover:not(:disabled) {
  border-color: rgba(232, 197, 71, 0.75);
  background: rgba(42, 36, 54, 0.98);
}

/* Do not lower opacity on the whole cell: dark icons (e.g. Basic Drone) vanish on this background. */
.merchant-shop-cell:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: rgba(120, 110, 95, 0.38);
  background: linear-gradient(165deg, rgba(26, 24, 34, 0.96), rgba(14, 12, 20, 0.99));
}

.merchant-shop-cell:disabled .merchant-shop-cell-price {
  color: rgba(145, 132, 105, 0.92);
  opacity: 0.75;
  text-shadow: none;
}

.merchant-shop-cell-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.merchant-shop-cell-canvas {
  display: block;
  pointer-events: none;
}

.merchant-shop-cell-fallback {
  font-size: 11px;
  font-weight: 600;
  color: rgba(200, 185, 155, 0.85);
  text-align: center;
  line-height: 1.15;
  padding: 0 2px;
}

.merchant-shop-cell-price {
  font-size: 11px;
  font-weight: 600;
  color: #e8c547;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.merchant-shop-cell {
  position: relative;
}

.merchant-shop-cell-requested {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  color: #0d1117;
  background: #7ee787;
  border-radius: 2px;
  padding: 1px 2px;
  pointer-events: none;
}

.merchant-close-rpg {
  align-self: center;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 28px;
  cursor: pointer;
  color: #1a1208;
  background: linear-gradient(180deg, #edd78a, #b8892a);
  border: 2px solid #f0dfa0;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 2px 0 #5c4018,
    0 3px 8px rgba(0, 0, 0, 0.35);
}

.merchant-close-rpg:hover {
  filter: brightness(1.06);
}

#merchant-hint {
  margin-top: 20px;
  font-size: 1.02rem;
  font-style: italic;
  color: rgba(175, 158, 130, 0.82);
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

/* Large “Paused” label for ESC settings and build placement (top center). */
.game-paused-banner {
  position: fixed;
  top: clamp(16px, 3vh, 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(2.75rem, 7vw, 4.75rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: #0c0c0c;
  -webkit-text-stroke: 2px #8f1838;
  paint-order: stroke fill;
  text-shadow:
    0 0 10px rgba(160, 28, 56, 0.55),
    1px 2px 0 #5a0e24,
    -2px -1px 0 #a82044,
    2px 3px 0 #6b122c,
    0 4px 12px rgba(0, 0, 0, 0.65);
}

.game-paused-banner.hidden {
  display: none;
}

/* Settings (Esc in-game): top-left HUD-style; overlay passes clicks through to the map */
#settings-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  display: block;
  z-index: 20;
  pointer-events: none;
}

/* Title / pre-game options: dim and block clicks outside the panel (no game canvas underneath). */
#settings-overlay.settings-overlay--title {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.55);
}

#settings-inner {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 22;
  pointer-events: auto;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 12px 14px 14px;
  background: rgba(90, 90, 90, 0.45);
  border: 1px solid rgba(180, 180, 180, 0.25);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

#debug-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: auto;
}

#debug-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 24px;
  padding: 48px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

#settings-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #e8e6e3;
}

#settings-inner .settings-row {
  margin-bottom: 8px;
  gap: 8px;
}

#settings-inner .settings-row label {
  min-width: 110px;
  font-size: 13px;
}

#settings-inner .settings-row input[type='range'] {
  flex: 1 1 120px;
  min-width: 100px;
  max-width: 180px;
}

#settings-inner .settings-row span {
  font-size: 13px;
}

/* Dim backdrop + capture clicks when a centered settings submenu is open */
#settings-overlay.settings-overlay--submenu {
  pointer-events: auto;
}

#settings-overlay.settings-overlay--submenu::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 21;
  pointer-events: auto;
}

/* Top-level settings actions: uniform width, condensed vertical stack */
#settings-inner > button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 13px;
}

#settings-inner > #settings-controls-toggle {
  margin-top: 10px;
}

.settings-submenu-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 23;
  pointer-events: auto;
  box-sizing: border-box;
  width: min(560px, calc(100vw - 48px));
  max-height: min(78vh, calc(100vh - 48px));
  overflow: auto;
  padding: 18px 20px 16px;
  background: rgba(22, 27, 34, 0.98);
  border: 1px solid #30363d;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.settings-submenu-panel.hidden {
  display: none;
}

.settings-submenu-panel h3 {
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: #7ee787;
}

.settings-submenu-panel > button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 14px;
}

#debug-title {
  font-size: 2rem;
  margin-bottom: 24px;
  color: #e8e6e3;
}

.debug-intro {
  font-size: 16px;
  color: #8b949e;
  margin-bottom: 20px;
  line-height: 1.4;
}

#debug-inner .debug-perf-intro,
#debug-inner .debug-wave-spawns-hint,
#debug-inner .debug-whole-map-hint {
  margin-top: 8px;
}

#debug-inner > button {
  display: block;
  margin-top: 16px;
  padding: 12px 20px;
  font-size: 18px;
}

.debug-action-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.debug-action-row button {
  flex-shrink: 0;
  margin-top: 0;
  padding: 12px 20px;
  font-size: 18px;
}

.debug-action-row select {
  width: auto;
  min-width: 180px;
  max-width: 320px;
  padding: 10px 12px;
  font-size: 16px;
  color: #e6edf3;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 6px;
}

.debug-action-qty {
  width: 72px;
  flex-shrink: 0;
  padding: 10px 8px;
  font-size: 16px;
  color: #e6edf3;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 6px;
}

.debug-give-item-row {
  align-items: flex-start;
}

.debug-give-item-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  max-width: 360px;
  flex: 1 1 280px;
}

.debug-give-item-search {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  color: #e6edf3;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 6px;
}

.debug-give-item-search::placeholder {
  color: #8b949e;
}

.debug-give-item-select {
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 10.5em;
  padding: 8px 10px;
  font-size: 15px;
  line-height: 1.35;
  color: #e6edf3;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 6px;
}

.debug-give-item-count {
  font-size: 13px;
  color: #8b949e;
}

#debug-hint {
  margin-top: 24px;
  font-size: 18px;
  color: #8b949e;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.settings-row label {
  min-width: 180px;
  font-size: 18px;
  color: #8b949e;
}

.settings-row input[type="range"] {
  width: 200px;
}

.settings-row span {
  min-width: 48px;
  font-size: 18px;
  color: #e8e6e3;
}

.settings-controls-hint {
  font-size: 14px;
  color: #8b949e;
  line-height: 1.5;
  margin: 0 0 12px;
}

.settings-controls-option-row {
  margin: 0 0 14px;
}

.settings-controls-option-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #c9d1d9;
  cursor: pointer;
}

.settings-controls-option-row input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: #58a6ff;
  cursor: pointer;
}

.settings-controls-bindings {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-binding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-binding-row label {
  font-size: 15px;
  color: #c9d1d9;
  flex: 1;
  min-width: 140px;
}

.settings-binding-row button {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #58a6ff;
  cursor: pointer;
  min-width: 120px;
}

.settings-binding-row button:hover {
  border-color: #58a6ff;
  color: #e6edf3;
}

.settings-binding-row button.settings-binding-waiting {
  border-color: #d29922;
  color: #d29922;
}

#settings-controls-reset {
  margin-top: 14px;
  padding: 8px 16px;
  font-size: 14px;
}

.tab-menu-loadout-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  align-self: stretch;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 55%),
    linear-gradient(145deg, rgba(38, 32, 48, 0.9), rgba(18, 15, 26, 0.95));
  border: 1px solid rgba(201, 162, 39, 0.38);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.tab-menu-loadout-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
  row-gap: 6px;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.35;
  color: rgba(235, 224, 200, 0.92);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.tab-menu-loadout-prefix {
  font-style: italic;
  color: rgba(220, 200, 165, 0.9);
}

.tab-menu-loadout-sep {
  color: rgba(180, 160, 130, 0.65);
}

.tab-menu-loadout-hint {
  font-size: 0.98rem;
  font-style: italic;
  color: rgba(175, 158, 130, 0.78);
}

/* Hand-ink style loadout name field */
.tab-menu-loadout-ink-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  max-width: min(100%, 11rem);
  padding: 4px 12px 6px;
  margin: 0 2px;
  vertical-align: middle;
  background: linear-gradient(168deg, rgba(255, 250, 235, 0.94) 0%, rgba(228, 212, 188, 0.9) 100%);
  border: 1px solid rgba(72, 48, 32, 0.4);
  border-radius: 5px 7px 4px 6px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.2deg);
}

.tab-menu-loadout-ink-wrap:focus-within {
  outline: 2px solid rgba(201, 162, 39, 0.65);
  outline-offset: 2px;
}

.tab-menu-loadout-ink-input {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.05;
  color: #1f1410;
  text-align: center;
  width: 100%;
  min-width: 4rem;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  outline: none;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 0 rgba(255, 252, 245, 0.45),
    1px 2px 0 rgba(45, 28, 18, 0.2),
    -0.5px 1px 0 rgba(60, 40, 30, 0.15);
}

.tab-menu-loadout-ink-input::selection {
  background: rgba(201, 162, 39, 0.35);
  color: #1f1410;
}

.tab-menu-loadout-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 4px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background: linear-gradient(180deg, rgba(48, 40, 58, 0.95), rgba(22, 18, 32, 0.98));
  color: #f0dfa0;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tab-menu-loadout-arrow:hover {
  border-color: rgba(232, 197, 71, 0.85);
  color: #fff8e0;
  background: linear-gradient(180deg, rgba(58, 48, 38, 0.95), rgba(32, 26, 20, 0.98));
}

.settings-music-now {
  font-size: 15px;
  color: #8b949e;
  margin: 0 0 16px;
  line-height: 1.4;
}

.settings-music-hint {
  font-size: 14px;
  color: #8b949e;
  margin: 0 0 12px;
  line-height: 1.45;
}

.settings-music-empty {
  font-size: 14px;
  color: #8b949e;
  margin: 0;
  line-height: 1.45;
}

.settings-music-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  max-height: min(48vh, 420px);
  overflow: auto;
}

.settings-music-track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  color: #e8e6e3;
  background: rgba(33, 38, 45, 0.95);
  border: 1px solid #30363d;
  border-radius: 8px;
}

.settings-music-track-row.settings-music-track-active {
  border-color: #7ee787;
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.25);
}

.settings-music-track-cb {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.settings-music-track-label {
  flex: 1;
  min-width: 0;
}

.settings-music-track-play {
  flex-shrink: 0;
  margin-left: auto;
  padding: 6px 14px;
  font-size: 13px;
  color: #e8e6e3;
  background: rgba(48, 54, 61, 0.95);
  border: 1px solid #484f58;
  border-radius: 6px;
  cursor: pointer;
}

.settings-music-track-play:hover {
  border-color: rgba(126, 231, 135, 0.55);
  color: #7ee787;
}

.settings-music-track-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 15px;
  color: #e8e6e3;
  background: rgba(33, 38, 45, 0.95);
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
}

.settings-music-track-btn:hover {
  border-color: rgba(126, 231, 135, 0.45);
}

.settings-music-track-btn.settings-music-track-active {
  border-color: #7ee787;
  box-shadow: inset 0 0 0 1px rgba(126, 231, 135, 0.25);
}

#settings-inner #settings-hint {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #8b949e;
}

#stat-book-box h2 {
  font-size: 1.8rem;
  margin-bottom: 6px;
  color: #553716;
  text-shadow: 0 1px 0 rgba(255, 247, 225, 0.62);
}

#stat-book-box p {
  font-size: 0.95rem;
  color: #5c3f1f;
  margin-bottom: 18px;
}

/* Wave-ended report + ability allocation */
#wave-ended-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 29;
  pointer-events: auto;
  padding: 20px 28px;
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 80% 55% at 50% 45%, rgba(28, 22, 48, 0.45), rgba(4, 3, 8, 0.92)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.06) 0px,
      rgba(0, 0, 0, 0.06) 1px,
      transparent 1px,
      transparent 3px
    );
}

#wave-ended-panel.wave-ended-window {
  position: relative;
  width: min(1520px, 100%);
  max-height: min(900px, 100%);
  display: flex;
  flex-direction: column;
  padding: 0;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  color: #ede4cf;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65));
}

#wave-ended-panel .rpg-daily-window-chrome {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#wave-ended-panel .wave-ended-body.rpg-daily-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
}

.wave-ended-left-col,
.wave-ended-right-col {
  min-height: 0;
  min-width: 0;
  padding: 16px 22px 18px;
}

.wave-ended-left-col {
  overflow-y: auto;
  border-right: 1px solid rgba(201, 162, 39, 0.22);
}

.wave-ended-right-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wave-ended-stats {
  min-height: 0;
}

.wave-ended-alloc-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.wave-ended-alloc-section.hidden {
  display: none;
}

.wave-ended-alloc-empty {
  margin: 0;
  font-size: 1.02rem;
  font-style: italic;
  color: rgba(220, 200, 160, 0.72);
}

.wave-ended-points-banner {
  margin: 0;
  flex: 0 0 auto;
  text-align: left;
  font-size: 1.12rem;
  color: #f5e6a8;
  letter-spacing: 0.03em;
}

.wave-ended-sheet-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 720px) {
  #wave-ended-overlay {
    padding: 12px 10px;
  }

  #wave-ended-panel .wave-ended-body.rpg-daily-body {
    grid-template-columns: 1fr;
  }

  .wave-ended-left-col {
    border-right: none;
    border-bottom: 1px solid rgba(201, 162, 39, 0.22);
  }

  .wave-ended-right-col {
    overflow-y: auto;
  }
}

#wave-ended-attrs-col.character-creation-side-col {
  flex: 0 0 auto;
  max-height: none;
  min-height: 0;
}

#wave-ended-stats-col.character-creation-side-col {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

#wave-ended-attr-list.character-creation-side-list {
  gap: 4px;
  overflow-y: visible;
  flex: 0 0 auto;
}

#wave-ended-stat-list.character-creation-side-list {
  overflow-y: auto;
}

.wave-ended-attr-row {
  gap: 6px;
  min-height: 1.55em;
}

#wave-ended-attrs-col.character-creation-side-col,
#wave-ended-stats-col.character-creation-side-col {
  padding: 10px 12px 12px;
}

.wave-ended-attr-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.wave-ended-attr-controls .character-creation-stat-value {
  min-width: 1.6em;
  text-align: center;
}

.wave-ended-stat-arrow {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  line-height: 1;
  flex-shrink: 0;
  color: #c9d1d9;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wave-ended-stat-arrow:hover:not(:disabled) {
  background: #30363d;
  border-color: #8b949e;
  color: #fff;
}

.wave-ended-stat-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

#wave-ended-accept-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Morning “daily sheet” — classic RPG message window */
#daily-briefing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 28;
  pointer-events: auto;
  background:
    radial-gradient(ellipse 80% 55% at 50% 45%, rgba(28, 22, 48, 0.45), rgba(4, 3, 8, 0.92)),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.06) 0px,
      rgba(0, 0, 0, 0.06) 1px,
      transparent 1px,
      transparent 3px
    );
}

#daily-briefing-panel.rpg-daily-window {
  position: relative;
  width: min(640px, 94vw);
  max-height: min(560px, 86vh);
  padding: 0;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  color: #ede4cf;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.65));
}

.rpg-daily-window-chrome {
  position: relative;
  border: 3px solid #c9a227;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
    linear-gradient(145deg, #2a2138 0%, #1a1424 48%, #120e1a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 140, 0.35),
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    0 0 0 2px #1c1220,
    0 0 0 5px #4a3720;
}

.rpg-daily-window-chrome::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(90, 70, 110, 0.55);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

.rpg-daily-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(#e8c547, #e8c547) left 10px top 10px / 18px 3px no-repeat,
    linear-gradient(#e8c547, #e8c547) left 10px top 10px / 3px 18px no-repeat,
    linear-gradient(#e8c547, #e8c547) right 10px top 10px / 18px 3px no-repeat,
    linear-gradient(#e8c547, #e8c547) right 10px top 10px / 3px 18px no-repeat,
    linear-gradient(#e8c547, #e8c547) left 10px bottom 10px / 18px 3px no-repeat,
    linear-gradient(#e8c547, #e8c547) left 10px bottom 10px / 3px 18px no-repeat,
    linear-gradient(#e8c547, #e8c547) right 10px bottom 10px / 18px 3px no-repeat,
    linear-gradient(#e8c547, #e8c547) right 10px bottom 10px / 3px 18px no-repeat;
  opacity: 0.85;
}

.rpg-daily-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 22px 20px 12px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.rpg-daily-header h2 {
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f5e6a8;
  text-shadow:
    0 0 12px rgba(255, 200, 80, 0.25),
    0 2px 0 #1a0f08;
  margin: 0;
}

.rpg-daily-subtitle {
  margin: 10px 0 0;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(220, 200, 160, 0.75);
}

.rpg-daily-body {
  position: relative;
  z-index: 2;
  padding: 14px 22px 18px;
  overflow-y: auto;
  max-height: min(380px, 52vh);
  font-size: 1.08rem;
  line-height: 1.45;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.rpg-daily-section {
  margin-bottom: 18px;
}

.rpg-daily-section:last-child {
  margin-bottom: 0;
}

.rpg-daily-section h3 {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9a227;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

.rpg-daily-section ul {
  margin: 0;
  padding-left: 1.15em;
  color: rgba(235, 224, 200, 0.92);
}

.rpg-daily-section li {
  margin-bottom: 4px;
}

.rpg-daily-section p {
  margin: 0 0 6px;
  color: rgba(235, 224, 200, 0.9);
}

.rpg-daily-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(201, 162, 39, 0.28);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), transparent);
}

.rpg-daily-close-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 28px;
  cursor: pointer;
  color: #1a1208;
  background: linear-gradient(180deg, #f0d78c, #c9a227);
  border: 2px solid #f5e6a8;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 0 #5c4010,
    0 4px 8px rgba(0, 0, 0, 0.4);
}

.rpg-daily-close-btn:hover {
  filter: brightness(1.08);
}

.rpg-daily-close-btn:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 #5c4010;
}

.rpg-daily-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(180, 160, 130, 0.65);
}

#portal-book-overlay,
#mines-ladder-travel-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  pointer-events: auto;
}

#portal-book-box,
#mines-ladder-travel-box {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 24px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

#portal-book-box h2,
#mines-ladder-travel-box h2 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: #7ee787;
}

#portal-book-box > p,
#mines-ladder-travel-box > p {
  font-size: 0.9rem;
  color: #8b949e;
  margin-bottom: 16px;
}

.portal-book-realm {
  margin-bottom: 20px;
}

.portal-book-realm h3 {
  font-size: 1.1rem;
  color: #e8e6e3;
  margin-bottom: 8px;
}

.portal-book-realm-desc {
  margin: 6px 0 10px 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #8b949e;
}

.portal-book-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-book-map-btn {
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  background: #238636;
  color: #fff;
  border: 1px solid #2ea043;
  border-radius: 6px;
  font-family: inherit;
}

.portal-book-map-btn:hover {
  background: #2ea043;
}

.portal-book-map-locked {
  padding: 10px 18px;
  font-size: 14px;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
}

#portal-book-cancel-btn,
#mines-ladder-travel-cancel-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  background: #21262d;
  color: #8b949e;
  border: 1px solid #30363d;
  border-radius: 6px;
  font-family: inherit;
}

#portal-book-cancel-btn:hover,
#mines-ladder-travel-cancel-btn:hover {
  background: #30363d;
  color: #e8e6e3;
}

#stat-book-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  justify-items: stretch;
}

#stat-book-stats .stat-choice-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

#stat-book-stats .stat-choice-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #8f7144;
  border-radius: 10px;
  color: #3f2a12;
  position: relative;
  overflow: hidden;
  transform-origin: left center;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
  background:
    linear-gradient(180deg, rgba(255, 250, 237, 0.45), rgba(255, 250, 237, 0.15)),
    repeating-linear-gradient(-9deg, #efe1bd, #efe1bd 8px, #e7d5ad 8px, #e7d5ad 16px);
  box-shadow: inset 0 0 0 1px rgba(116, 80, 41, 0.24);
  margin: 0;
  width: 100%;
}

#stat-book-stats .stat-choice-btn:hover {
  border-color: #6f512b;
  background:
    linear-gradient(180deg, rgba(255, 250, 237, 0.62), rgba(255, 250, 237, 0.28)),
    repeating-linear-gradient(-9deg, #f3e6c4, #f3e6c4 8px, #ecdab3 8px, #ecdab3 16px);
  transform: perspective(900px) rotateY(-5deg) translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(116, 80, 41, 0.28),
    0 8px 14px rgba(58, 39, 17, 0.2);
}

#stat-book-stats .stat-choice-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 36%, rgba(255, 251, 241, 0.34) 49%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-130%);
  opacity: 0;
  transition: transform 260ms ease, opacity 180ms ease;
  pointer-events: none;
}

#stat-book-stats .stat-choice-btn:hover::before {
  transform: translateX(130%);
  opacity: 1;
}

#stat-book-stats .stat-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #84633a;
  background: rgba(122, 88, 46, 0.16);
  font-size: 17px;
  line-height: 1;
  flex: 0 0 auto;
}

#stat-book-stats .stat-choice-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

#stat-book-stats .stat-choice-title {
  font-size: 14px;
  font-weight: 700;
  color: #3f2a12;
}

#stat-book-stats .stat-choice-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: #6a4a24;
}

#stat-book-stats .stat-choice-desc {
  font-size: 11px;
  color: #5f4324;
  text-align: left;
  margin: 0;
  line-height: 1.35;
  padding: 0 2px;
}

/* Quest completion reward overlay — wood frame + canvas light beams + wispy energy */
#quest-reward-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Above #tab-menu (1010) so celebration stays visible while sim is paused */
  z-index: 1020;
  pointer-events: auto;
  cursor: pointer;
  background:
    radial-gradient(ellipse 72% 58% at 50% 48%, rgba(12, 28, 18, 0.52), rgba(2, 4, 6, 0.88));
}

#quest-reward-overlay.hidden {
  display: none;
  pointer-events: none;
}

.quest-reward-frame {
  position: relative;
  width: 40vmin;
  min-width: 280px;
  max-width: 520px;
  min-height: 30vmin;
  padding: 14px;
  border-radius: 18px;
  box-sizing: border-box;
  transform: scale(1);
  transform-origin: center center;
  opacity: 1;
  overflow: hidden;
  background:
    linear-gradient(165deg, #7a5230 0%, #4a2f18 22%, #3b2412 50%, #2a170c 78%, #1f1208 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 160, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.55),
    0 0 0 2px #1a0f06,
    0 0 36px rgba(255, 200, 60, 0.28),
    0 16px 48px rgba(0, 0, 0, 0.72);
}

.quest-reward-wood-chrome {
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
  box-shadow:
    inset 0 0 0 3px rgba(90, 55, 28, 0.95),
    inset 0 0 0 5px rgba(120, 78, 42, 0.55),
    inset 0 0 18px rgba(0, 0, 0, 0.45);
  background:
    repeating-linear-gradient(
      92deg,
      rgba(255, 210, 140, 0.04) 0 2px,
      transparent 2px 14px
    ),
    repeating-linear-gradient(
      8deg,
      rgba(0, 0, 0, 0.08) 0 3px,
      transparent 3px 22px
    );
}

.quest-reward-beams-canvas {
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.quest-reward-beams-canvas.is-sized {
  opacity: 1;
}

.quest-reward-energy-canvas {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.quest-reward-energy-canvas.is-sized {
  opacity: 1;
}

#quest-reward-overlay:not(.hidden):not(.is-enter):not(.is-pop) .quest-reward-frame,
#quest-reward-overlay.is-ready .quest-reward-frame {
  transform: scale(1);
  opacity: 1;
}

#quest-reward-overlay.is-enter .quest-reward-frame {
  animation: quest-reward-enter 0.55s ease-out forwards;
}

#quest-reward-overlay.is-pop .quest-reward-frame {
  animation: quest-reward-pop 0.22s ease-out;
}

#quest-reward-overlay.is-pop .quest-reward-flash {
  animation: quest-reward-flash 0.35s ease-out forwards;
}

@keyframes quest-reward-enter {
  0% {
    transform: scale(0.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes quest-reward-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes quest-reward-flash {
  0% { opacity: 0; }
  25% { opacity: 0.95; }
  100% { opacity: 0; }
}

.quest-reward-flash {
  position: absolute;
  inset: 14px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  background: radial-gradient(circle at 50% 42%, rgba(255, 248, 210, 0.9), transparent 58%);
}

.quest-reward-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  min-height: calc(30vmin - 28px);
  border-radius: 12px;
  overflow: hidden;
}

.quest-reward-header {
  flex: 0 0 auto;
  padding: 18px 20px 14px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.12) 100%);
  border-bottom: 1px solid rgba(255, 210, 120, 0.18);
}

.quest-reward-heading {
  margin: 0;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: clamp(1.35rem, 4.2vmin, 2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #ffe98a;
  text-shadow:
    0 1px 0 #5a4010,
    0 2px 6px rgba(0, 0, 0, 0.7),
    0 0 22px rgba(255, 220, 90, 0.5);
}

.quest-reward-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 20px 18px;
  text-align: center;
  background: rgba(0, 0, 0, 0.18);
}

.quest-reward-quest-name {
  margin: 0;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: clamp(1.05rem, 3.2vmin, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: #f0d060;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(255, 200, 70, 0.35);
}

.quest-reward-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 20px;
}

.quest-reward-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
}

.quest-reward-chip-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-reward-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  border: 2px solid rgba(255, 220, 140, 0.55);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.45);
  cursor: help;
  pointer-events: auto;
}

.quest-reward-icon--xp {
  background: radial-gradient(circle at 35% 30%, #9ef0a8, #2d6a3a);
  color: #eaffef;
}

.quest-reward-icon--rp {
  background: radial-gradient(circle at 35% 30%, #d4b0ff, #5a3080);
  color: #f5ebff;
}

.quest-reward-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: #ede4cf;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}

.quest-reward-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(220, 205, 170, 0.78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.quest-reward-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: rgba(210, 220, 200, 0.78);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#start-screen,
#win-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#start-screen {
  background-color: #0d0d12;
  overflow: hidden;
  justify-content: space-between;
  padding: 2vh 0 2vh;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Oversized art layer so slow pan / drift reads as “life” behind the crawl */
.start-screen-bg-layer {
  position: absolute;
  left: -8%;
  top: -8%;
  width: 116%;
  height: 116%;
  z-index: 0;
  background-image: linear-gradient(rgba(13, 13, 18, 0.5), rgba(13, 13, 18, 0.85)), url('../void_weaver_title.png');
  background-size: cover;
  background-position: center;
  animation: start-screen-bg-drift 96s ease-in-out infinite;
  will-change: transform;
}

/* Frequent gentle pan; slow zoom in/out only around the midpoint */
@keyframes start-screen-bg-drift {
  0% {
    transform: translate(0%, 0%) scale(1.028);
  }
  8% {
    transform: translate(1.2%, -0.9%) scale(1.028);
  }
  16% {
    transform: translate(-0.9%, 1.1%) scale(1.028);
  }
  24% {
    transform: translate(1.4%, 0.4%) scale(1.028);
  }
  32% {
    transform: translate(-1.1%, -0.6%) scale(1.028);
  }
  40% {
    transform: translate(0.6%, 1%) scale(1.028);
  }
  48% {
    transform: translate(-0.5%, -0.3%) scale(1.028);
  }
  52% {
    transform: translate(0.3%, 0.2%) scale(1.055);
  }
  56% {
    transform: translate(0.5%, -0.4%) scale(1.058);
  }
  60% {
    transform: translate(-0.4%, 0.5%) scale(1.055);
  }
  64% {
    transform: translate(0.2%, 0.1%) scale(1.028);
  }
  72% {
    transform: translate(-1.2%, 0.8%) scale(1.028);
  }
  80% {
    transform: translate(0.9%, -1%) scale(1.028);
  }
  88% {
    transform: translate(-0.7%, 0.3%) scale(1.028);
  }
  100% {
    transform: translate(0%, 0%) scale(1.028);
  }
}

#start-screen > h1,
#start-screen > .start-screen-lower {
  position: relative;
  z-index: 1;
}

.start-screen-lower {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 1vh;
}

#win-screen {
  background: rgba(13, 13, 18, 0.92);
}

#start-screen h1 {
  font-family: 'Black Ops One', 'JetBrains Mono', sans-serif;
  font-size: clamp(2.25rem, 11vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #e8e6e3;
  text-shadow: 0 0 24px rgba(126, 231, 135, 0.3);
  flex-shrink: 0;
  text-align: center;
  max-width: 95vw;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#win-screen h1 {
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #7ee787;
  text-shadow: 0 0 24px rgba(126, 231, 135, 0.3);
  flex-shrink: 0;
}

/* Title intro: one segment at a time; sits just above Play Game; left-click advance, right-click back */
#title-narrative-viewport {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  max-width: 820px;
  min-height: 0;
  padding: 0 16px 4px;
  cursor: pointer;
}

.title-narrative-text {
  font-family: 'Audiowide', 'JetBrains Mono', sans-serif;
  font-size: clamp(0.95rem, 2.1vw, 1.2rem);
  font-weight: 400;
  line-height: 1.75;
  text-align: center;
  color: #c9d1d9;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.95), 0 0 28px rgba(13, 13, 18, 0.9);
  padding: 0 0.25rem;
  background: none;
  border: none;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.title-narrative-text.is-visible {
  opacity: 1;
}

/* Landing: single "Start" button; click reveals title page and starts music */
#landing-screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d12;
}

#landing-start-btn {
  font-family: inherit;
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 600;
  padding: 0.5em 1.5em;
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  min-width: 200px;
  min-height: 80px;
}

#landing-start-btn:hover {
  background: #2ea043;
  transform: scale(1.02);
}

#landing-start-btn:active {
  transform: scale(0.98);
}

#start-screen .mode-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex-shrink: 0;
  margin-bottom: 2vh;
  min-width: 200px;
  max-width: 280px;
}

#start-screen .mode-btn {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.6em 1.4em;
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#start-screen .mode-btn:hover {
  background: #2ea043;
  transform: scale(1.02);
}

#start-screen .mode-btn:active {
  transform: scale(0.98);
}

#start-screen .mode-btn-secondary {
  background: rgba(35, 134, 54, 0.22);
  color: #d8dee3;
  border: 1px solid rgba(126, 231, 135, 0.45);
}

#start-screen .mode-btn-secondary:hover {
  background: rgba(46, 160, 67, 0.32);
  color: #fff;
}

#lobby-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  background: rgba(13, 13, 18, 0.96);
  z-index: 20;
}

#ledger-desk-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#ledger-desk-inner {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px 18px;
  min-width: 420px;
  max-width: 720px;
  max-height: min(86vh, 720px);
  overflow: auto;
  color: #e6edf3;
}

#ledger-desk-inner h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

#ledger-desk-intro {
  margin: 0 0 14px;
  color: #9da7b3;
  font-size: 0.92rem;
}

#ledger-desk-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.ledger-desk-panel h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.ledger-desk-hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: #8b949e;
}

.ledger-desk-request-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.ledger-desk-request-label {
  min-width: 52px;
  font-size: 0.85rem;
  color: #c9d1d9;
}

.ledger-desk-request-select {
  flex: 1;
  background: #0d1117;
  color: #e6edf3;
  border: 1px solid #30363d;
  border-radius: 4px;
  padding: 4px 6px;
}

.ledger-desk-demand-row {
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #161b22;
}

.ledger-desk-demand-row--done {
  opacity: 0.55;
}

.ledger-desk-demand-land {
  font-weight: 700;
  margin-bottom: 2px;
}

.ledger-desk-demand-item {
  font-size: 0.92rem;
}

.ledger-desk-demand-premium {
  font-size: 0.78rem;
  color: #8b949e;
  margin-top: 4px;
}

.ledger-desk-empty {
  color: #8b949e;
  font-size: 0.88rem;
}

#ledger-desk-close-btn {
  margin-top: 14px;
}

@media (max-width: 700px) {
  #ledger-desk-layout {
    grid-template-columns: 1fr;
  }
}

#chest-menu-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#chest-menu-inner {
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px;
  min-width: 340px;
  max-width: 860px;
}

#chest-menu-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

#chest-menu-items {
  display: grid;
  grid-template-columns: repeat(8, 48px);
  gap: 6px;
  margin: 10px 0 12px;
}

#chest-menu-player-inventory {
  display: grid;
  grid-template-columns: repeat(8, 48px);
  gap: 6px;
  margin: 10px 0 12px;
}

.chest-menu-slot {
  width: 48px;
  height: 48px;
  border: 1px solid #30363d;
  border-radius: 4px;
  background: #0d1117;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.chest-menu-slot:hover {
  border-color: #58a6ff;
  background: #111b2b;
}

.chest-menu-slot-label {
  font-size: 10px;
  color: #8b949e;
  font-weight: 700;
}

.chest-menu-player-slot {
  cursor: pointer;
}

.chest-menu-slot:disabled {
  cursor: default;
  opacity: 0.5;
  background: #0a0f15;
}

.chest-menu-supply-panel {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #30363d;
}

.chest-menu-supply-panel.hidden {
  display: none;
}

.chest-menu-supply-hint {
  font-size: 13px;
  color: #8b949e;
  margin: 0 0 10px;
}

.chest-menu-supply-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.chest-menu-supply-desired-input {
  width: 72px;
  padding: 4px 6px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #e6edf3;
  border-radius: 4px;
}

.chest-menu-supply-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.recruitment-worker-job-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 8px;
}

.recruitment-worker-job-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #c9d1d9;
  cursor: pointer;
}

.recruitment-worker-automation-panel {
  margin-bottom: 1.25rem;
  padding: 14px 16px;
  background: rgba(13, 17, 23, 0.85);
  border: 1px solid #30363d;
  border-radius: 10px;
}

.recruitment-automation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.recruitment-gathering-popup {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.recruitment-gathering-popup.hidden {
  display: none !important;
}

.recruitment-gathering-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 9, 0.55);
}

.recruitment-gathering-popup-panel {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(85vh, 520px);
  overflow: auto;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 14px 16px 16px;
}

.recruitment-gathering-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.recruitment-gathering-popup-header h4 {
  margin: 0;
  font-size: 1rem;
  color: #e6edf3;
}

.recruitment-gathering-popup-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 6px;
  color: #c9d1d9;
}

.recruitment-gathering-popup-close:hover {
  background: #30363d;
}

.recruitment-priority-gathering-btn {
  flex: 1;
  text-align: left;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.9rem;
  color: #58a6ff;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.recruitment-priority-gathering-btn:hover {
  color: #79c0ff;
}

@media (max-width: 900px) {
  .recruitment-automation-grid {
    grid-template-columns: 1fr;
  }
  .recruitment-sidebar {
    flex: 0 0 160px;
  }
}

.recruitment-gathering-subtask-row {
  flex-wrap: wrap;
}

.recruitment-gathering-subtask-label {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.recruitment-priority-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recruitment-priority-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #21262d;
}

.recruitment-priority-row:last-child {
  border-bottom: none;
}

.recruitment-priority-label {
  flex: 1;
  font-size: 0.9rem;
}

.recruitment-priority-btns {
  display: flex;
  gap: 4px;
}

.recruitment-priority-btns button {
  padding: 2px 8px;
  font-size: 0.85rem;
  cursor: pointer;
  background: #21262d;
  border: 1px solid #484f58;
  border-radius: 4px;
  color: #c9d1d9;
}

.recruitment-quota-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.recruitment-quota-table th,
.recruitment-quota-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid #21262d;
}

.recruitment-quota-table input[type='number'] {
  width: 72px;
  padding: 4px 6px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #e6edf3;
}

.recruitment-worker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.recruitment-worker-table th,
.recruitment-worker-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #21262d;
  vertical-align: top;
}

.recruitment-worker-table thead th {
  position: sticky;
  top: 0;
  background: #161b22;
  z-index: 1;
  color: #79c0ff;
  font-weight: 600;
}

.recruitment-worker-table select {
  max-width: 140px;
  font-size: 0.85rem;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #e6edf3;
  border-radius: 4px;
  padding: 4px;
}

.recruitment-worker-job-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: 220px;
}

.recruitment-worker-job-mini label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #8b949e;
  cursor: pointer;
}

.recruitment-ally-attributes {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.78rem;
  color: #8b949e;
  line-height: 1.35;
}

.recruitment-ally-attributes li + li {
  margin-top: 2px;
}

.recruitment-housing-card .recruitment-ally-attributes {
  margin-top: 4px;
  margin-bottom: 2px;
}

.recruitment-storage-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recruitment-storage-card {
  padding: 12px 14px;
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid #30363d;
  border-radius: 8px;
}

.recruitment-storage-card h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: #e6edf3;
}

.recruitment-schedules-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recruitment-schedule-toolbar {
  display: flex;
  justify-content: flex-end;
}

.recruitment-schedule-card {
  padding: 12px 14px;
  background: rgba(13, 17, 23, 0.75);
  border: 1px solid #30363d;
  border-radius: 8px;
}

.recruitment-schedule-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.recruitment-schedule-name-input {
  min-width: 180px;
  padding: 4px 8px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #e6edf3;
}

.recruitment-schedule-meta {
  font-size: 0.85rem;
  color: #8b949e;
}

.recruitment-schedule-hour-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}

.recruitment-schedule-hour-cell {
  font-size: 0.72rem;
  padding: 4px 2px;
  border-radius: 4px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
}

.recruitment-schedule-hour-cell--sleep {
  background: #1f2a44;
  border-color: #388bfd;
  color: #79c0ff;
}

.recruitment-schedule-hour-cell--work {
  background: #1c2128;
}

.recruitment-schedule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.recruitment-schedule-members-title {
  margin: 10px 0 6px;
  font-size: 0.95rem;
  color: #e6edf3;
}

.recruitment-schedule-members-list {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 0.85rem;
  color: #c9d1d9;
}

.recruitment-schedule-assign-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}

.recruitment-schedule-assign-row select {
  min-width: 160px;
}

.recruitment-storage-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: #8b949e;
}

.recruitment-storage-stock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.85rem;
}

.recruitment-storage-stock-row input[type='number'] {
  width: 64px;
  padding: 3px 6px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 4px;
  color: #e6edf3;
}

.recruitment-storage-priority-input {
  width: 56px;
}

#fortress-inventory-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 14, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

#fortress-inventory-inner.fortress-inventory-window {
  position: relative;
  min-width: min(920px, 96vw);
  max-width: 980px;
  max-height: 90vh;
  overflow: auto;
  padding: 28px 32px 24px;
  font-family: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  color: rgba(228, 220, 200, 0.94);
  border: 4px solid #5a5f68;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) 11px,
      rgba(0, 0, 0, 0.14) 11px,
      rgba(0, 0, 0, 0.14) 12px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) 11px,
      rgba(0, 0, 0, 0.1) 11px,
      rgba(0, 0, 0, 0.1) 12px
    ),
    linear-gradient(168deg, #5c6169 0%, #434850 28%, #353a42 55%, #2a2f36 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 2px 24px rgba(0, 0, 0, 0.45),
    0 0 0 2px #1a1c20,
    0 0 0 6px #2e3238,
    0 16px 40px rgba(0, 0, 0, 0.65);
}

#fortress-inventory-inner.fortress-inventory-window::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(120, 125, 135, 0.35);
  border-radius: 2px;
  pointer-events: none;
  z-index: 0;
}

#fortress-inventory-inner.fortress-inventory-window > * {
  position: relative;
  z-index: 1;
}

.fortress-inventory-header {
  margin-bottom: 18px;
  text-align: center;
}

#fortress-inventory-title {
  margin: 0 0 8px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #e8dcc4;
  text-shadow:
    0 2px 0 #1a1510,
    0 0 14px rgba(255, 200, 120, 0.18);
}

.fortress-inventory-hint {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(200, 192, 175, 0.88);
}

#fortress-inventory-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
}

.fortress-inventory-panel {
  padding: 14px 14px 12px;
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.35);
}

.fortress-inventory-panel--storage {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03) 0 6px,
      rgba(0, 0, 0, 0.06) 6px 12px
    ),
    linear-gradient(180deg, rgba(70, 78, 92, 0.55) 0%, rgba(38, 42, 50, 0.85) 100%);
  border-color: #4a5260;
}

.fortress-inventory-panel--player {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(120, 90, 55, 0.06) 0 8px,
      rgba(0, 0, 0, 0.05) 8px 16px
    ),
    linear-gradient(180deg, rgba(62, 52, 42, 0.45) 0%, rgba(32, 28, 26, 0.88) 100%);
  border-color: #6a5640;
}

#fortress-inventory-layout[data-quick-move='to-player'] .fortress-inventory-panel--storage {
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 200, 100, 0.45);
}

#fortress-inventory-layout[data-quick-move='to-storage'] .fortress-inventory-panel--player {
  box-shadow:
    inset 0 2px 12px rgba(0, 0, 0, 0.35),
    0 0 0 2px rgba(255, 200, 100, 0.45);
}

.fortress-inventory-panel-title {
  margin: 0 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f0e6d0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.fortress-inventory-panel-sub {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: rgba(190, 182, 168, 0.75);
  font-style: italic;
}

.fortress-inventory-grid {
  display: grid;
  grid-template-columns: repeat(8, 56px);
  gap: 6px;
  margin: 0 0 12px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}

.fortress-inventory-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 6px;
  min-width: 88px;
}

.fortress-inventory-quick-move-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #8a7a50;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background:
    radial-gradient(circle at 35% 30%, #6a6e78 0%, #3e434c 55%, #2a2e35 100%);
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.15),
    inset 0 -4px 10px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.45);
  transition: border-color 0.12s, transform 0.1s;
}

.fortress-inventory-quick-move-btn:hover {
  border-color: #d4b060;
  transform: scale(1.04);
}

.fortress-inventory-quick-move-btn[aria-pressed='true'] {
  border-color: #e8c060;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.2),
    0 0 12px rgba(255, 190, 80, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.45);
}

.fortress-inventory-quick-move-arrow {
  font-size: 2rem;
  line-height: 1;
  color: #f5e8c8;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  font-family: system-ui, sans-serif;
  font-weight: 700;
}

.fortress-inventory-quick-move-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(210, 200, 180, 0.8);
}

.fortress-inventory-action-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f2ead8;
  cursor: pointer;
  border: 2px solid #5a5040;
  border-radius: 3px;
  background: linear-gradient(180deg, #5a5248 0%, #3a342c 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

.fortress-inventory-action-btn:hover {
  border-color: #9a8048;
  background: linear-gradient(180deg, #6a6050 0%, #4a4034 100%);
}

.fortress-inventory-action-btn--deposit {
  font-size: 0.85rem;
  padding: 6px 10px;
}

.fortress-inventory-footer {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.fortress-inventory-action-btn--close {
  min-width: 140px;
}

.fortress-inventory-slot {
  width: 56px;
  height: 56px;
  border: 2px solid #2a2e34;
  border-radius: 3px;
  background:
    linear-gradient(145deg, #1e2228 0%, #12151a 100%);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.fortress-inventory-slot--quick-target:not(:disabled) {
  cursor: pointer;
  border-color: #4a4f58;
}

.fortress-inventory-slot--quick-target:not(:disabled):hover {
  border-color: #c8a050;
  background: linear-gradient(145deg, #2a2620 0%, #1a1814 100%);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 8px rgba(255, 190, 80, 0.2);
}

.fortress-inventory-slot-canvas {
  display: block;
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.fortress-inventory-slot-label {
  font-size: 11px;
  color: #a8a090;
  font-weight: 700;
  font-family: system-ui, sans-serif;
}

.fortress-inventory-slot:disabled {
  cursor: default;
  opacity: 0.42;
  background: linear-gradient(145deg, #16181c 0%, #0e1014 100%);
}

@media (max-width: 720px) {
  #fortress-inventory-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .fortress-inventory-center {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
  }

  .fortress-inventory-action-btn--deposit {
    flex: 1 1 auto;
    max-width: 160px;
  }
}

#lobby-screen h2 {
  font-size: 1.75rem;
  color: #e8e6e3;
  margin-bottom: 8px;
}

.lobby-status {
  font-size: 0.9rem;
  color: #8b949e;
  margin-bottom: 16px;
}

#lobby-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

#lobby-screen button {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.5em 1em;
  background: #21262d;
  color: #e8e6e3;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
}

#lobby-screen button:hover {
  background: #30363d;
}

#lobby-create-btn {
  background: #238636;
  border-color: #238636;
  color: #fff;
}

#lobby-create-btn:hover {
  background: #2ea043;
}

.lobby-room-list {
  width: 100%;
  max-width: 480px;
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.lobby-no-rooms-hint {
  font-size: 0.85rem;
  color: #8b949e;
  padding: 12px;
  max-width: 420px;
  line-height: 1.4;
}

.lobby-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
}

.lobby-room-row span {
  color: #c9d1d9;
  font-size: 0.95rem;
}

.lobby-room-row .join-room-btn {
  padding: 0.4em 0.9em;
  font-size: 0.9rem;
  background: #238636;
  border-color: #238636;
  color: #fff;
}

.lobby-room-row .join-room-btn:hover {
  background: #2ea043;
}

.lobby-room-row .join-room-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#lobby-in-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

#lobby-in-room .lobby-in-room-actions {
  display: block;
}

.lobby-back {
  margin-top: auto;
}

#create-game-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 30;
}

#create-game-modal.hidden {
  display: none;
}

.create-game-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 16px;
  padding: 24px;
  min-width: 280px;
}

.create-game-inner h3 {
  font-size: 1.25rem;
  color: #e8e6e3;
  margin-bottom: 16px;
}

.create-game-inner label {
  display: block;
  font-size: 14px;
  color: #8b949e;
  margin-bottom: 6px;
}

#create-game-max-players {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e8e6e3;
}

.create-game-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.create-game-buttons button {
  font-family: inherit;
  padding: 0.5em 1em;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
}

#create-game-confirm-btn {
  background: #238636;
  border: 1px solid #238636;
  color: #fff;
}

#create-game-cancel-btn {
  background: #21262d;
  border: 1px solid #30363d;
  color: #e8e6e3;
}

#start-screen #start-btn,
#win-screen p {
  font-size: 0.9rem;
}

#win-screen p {
  color: #8b949e;
}

#character-creation-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  overflow: auto;
  z-index: 25;
  pointer-events: auto;
  background-color: #2a2218;
  background-image:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(70, 60, 40, 0.18), rgba(40, 30, 20, 0.22)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'><g fill='none' stroke='rgba(0,0,0,0.42)' stroke-width='2'><line x1='0' y1='40' x2='180' y2='40'/><line x1='0' y1='80' x2='180' y2='80'/><line x1='60' y1='0' x2='60' y2='40'/><line x1='120' y1='0' x2='120' y2='40'/><line x1='30' y1='40' x2='30' y2='80'/><line x1='90' y1='40' x2='90' y2='80'/><line x1='150' y1='40' x2='150' y2='80'/><line x1='60' y1='80' x2='60' y2='120'/><line x1='120' y1='80' x2='120' y2='120'/></g><g fill='none' stroke='rgba(255,230,180,0.07)' stroke-width='1'><line x1='0' y1='1' x2='180' y2='1'/><line x1='0' y1='41' x2='180' y2='41'/><line x1='0' y1='81' x2='180' y2='81'/></g><g fill='rgba(0,0,0,0.13)'><circle cx='22' cy='18' r='1.2'/><circle cx='112' cy='22' r='1'/><circle cx='154' cy='14' r='1.4'/><circle cx='42' cy='62' r='1.2'/><circle cx='98' cy='58' r='1'/><circle cx='168' cy='66' r='1.3'/><circle cx='14' cy='102' r='1.1'/><circle cx='76' cy='106' r='1'/><circle cx='138' cy='98' r='1.2'/></g></svg>"),
    linear-gradient(135deg, #4a3a28 0%, #5d4730 35%, #3d2f20 100%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: cover, cover, 180px 120px, cover;
}

#character-creation-screen::before,
#character-creation-screen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 92px;
  pointer-events: none;
  background-repeat: repeat-y;
  background-size: 92px 240px;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}

#character-creation-screen::before {
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 240'><g stroke='%23365723' stroke-width='3.4' fill='none' stroke-linecap='round'><path d='M 22 -4 C 36 32 12 56 30 84 C 50 112 14 142 28 168 C 44 196 18 224 32 244'/><path d='M 28 30 C 46 38 56 32 64 26'/><path d='M 26 92 C 44 102 56 92 66 84'/><path d='M 30 168 C 48 178 58 168 66 162'/><path d='M 24 56 C 14 60 8 56 4 50'/><path d='M 28 132 C 14 138 6 132 2 124'/><path d='M 30 210 C 16 216 8 212 4 204'/></g><g fill='%235a8d3a'><ellipse cx='62' cy='30' rx='9' ry='4.2' transform='rotate(20 62 30)'/><ellipse cx='62' cy='44' rx='6.5' ry='3.5' transform='rotate(-15 62 44)' fill='%234a7a30'/><ellipse cx='66' cy='86' rx='9' ry='4.2' transform='rotate(15 66 86)'/><ellipse cx='62' cy='102' rx='6.5' ry='3.5' transform='rotate(-25 62 102)' fill='%234a7a30'/><ellipse cx='66' cy='162' rx='9' ry='4.2' transform='rotate(20 66 162)'/><ellipse cx='62' cy='178' rx='6.5' ry='3.5' transform='rotate(-15 62 178)' fill='%234a7a30'/><ellipse cx='6' cy='52' rx='7' ry='3.4' transform='rotate(-25 6 52)' fill='%234a7a30'/><ellipse cx='2' cy='126' rx='7.5' ry='3.6' transform='rotate(-30 2 126)'/><ellipse cx='4' cy='208' rx='7' ry='3.4' transform='rotate(-25 4 208)' fill='%234a7a30'/></g><g fill='%23ffe98a' opacity='0.55'><circle cx='62' cy='30' r='1.2'/><circle cx='66' cy='86' r='1'/><circle cx='66' cy='162' r='1.2'/></g></svg>");
}

#character-creation-screen::after {
  right: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 240'><g stroke='%23365723' stroke-width='3.4' fill='none' stroke-linecap='round'><path d='M 70 -4 C 56 32 80 56 62 84 C 42 112 78 142 64 168 C 48 196 74 224 60 244'/><path d='M 64 30 C 46 38 36 32 28 26'/><path d='M 66 92 C 48 102 36 92 26 84'/><path d='M 62 168 C 44 178 34 168 26 162'/><path d='M 68 56 C 78 60 84 56 88 50'/><path d='M 64 132 C 78 138 86 132 90 124'/><path d='M 62 210 C 76 216 84 212 88 204'/></g><g fill='%235a8d3a'><ellipse cx='30' cy='30' rx='9' ry='4.2' transform='rotate(-20 30 30)'/><ellipse cx='30' cy='44' rx='6.5' ry='3.5' transform='rotate(15 30 44)' fill='%234a7a30'/><ellipse cx='26' cy='86' rx='9' ry='4.2' transform='rotate(-15 26 86)'/><ellipse cx='30' cy='102' rx='6.5' ry='3.5' transform='rotate(25 30 102)' fill='%234a7a30'/><ellipse cx='26' cy='162' rx='9' ry='4.2' transform='rotate(-20 26 162)'/><ellipse cx='30' cy='178' rx='6.5' ry='3.5' transform='rotate(15 30 178)' fill='%234a7a30'/><ellipse cx='86' cy='52' rx='7' ry='3.4' transform='rotate(25 86 52)' fill='%234a7a30'/><ellipse cx='90' cy='126' rx='7.5' ry='3.6' transform='rotate(30 90 126)'/><ellipse cx='88' cy='208' rx='7' ry='3.4' transform='rotate(25 88 208)' fill='%234a7a30'/></g><g fill='%23ffe98a' opacity='0.55'><circle cx='30' cy='30' r='1.2'/><circle cx='26' cy='86' r='1'/><circle cx='26' cy='162' r='1.2'/></g></svg>");
}

#character-creation-inner {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(160deg, #1c1610 0%, #221b13 50%, #1a140e 100%);
  border: 2px solid #5e4a30;
  border-radius: 14px;
  padding: 28px 32px 32px;
  width: min(1120px, 92vw);
  max-width: 92vw;
  min-width: 320px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 170, 0.07),
    0 0 0 4px rgba(20, 12, 4, 0.7),
    0 24px 54px rgba(0, 0, 0, 0.75);
}

#character-creation-inner h2 {
  font-size: 1.75rem;
  margin: 0 0 18px;
  color: #e8e6e3;
  text-align: center;
}

/* ---------- 3-column layout: Attributes | Identity steppers | Stats ---------- */

.character-creation-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.4fr) minmax(220px, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 880px) {
  .character-creation-grid {
    grid-template-columns: 1fr;
  }
}

.character-creation-side-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 18px;
  background: rgba(13, 13, 18, 0.55);
  border: 1px solid #30363d;
  border-radius: 10px;
  min-height: 100%;
  /* The Stats column can overflow when the Engineering group is included;
     cap it so the screen layout never grows past one viewport height. */
  max-height: min(560px, 70vh);
}

.character-creation-side-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9a227;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

.character-creation-side-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.92rem;
  color: rgba(228, 215, 185, 0.92);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.character-creation-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  border-radius: 3px;
  /* Reserve enough vertical room that the pulsed (scaled) text doesn't get
     visually clipped by sibling rows above and below. */
  min-height: 1.6em;
  transition: color 180ms ease;
}

.character-creation-stat-row .character-creation-stat-label {
  color: rgba(210, 198, 170, 0.85);
  flex-shrink: 0;
  display: inline-block;
  /* Pulse anchors at the label's leading edge so it grows toward the gap
     (right) instead of pushing past the column's left edge. */
  transform-origin: left center;
}

.character-creation-stat-row .character-creation-stat-value {
  color: rgba(228, 215, 185, 0.95);
  font-variant-numeric: tabular-nums;
  text-align: right;
  display: inline-block;
  /* Mirror of the label: anchored at the trailing edge so the digits stay
     right-aligned and grow inward into the gap instead of off the panel. */
  transform-origin: right center;
}

.character-creation-stat-group-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(201, 162, 39, 0.55);
  margin: 8px 0 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 162, 39, 0.15);
}

.character-creation-stat-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.character-creation-stat-row.is-class-affected,
.character-creation-stat-row.is-class-affected .character-creation-stat-label,
.character-creation-stat-row.is-class-affected .character-creation-stat-value {
  color: #7ee787;
  text-shadow: 0 0 6px rgba(126, 231, 135, 0.45);
}

/* Throbbing pulse: only the label and value scale, each anchored at its own
   edge (label → left, value → right), so the row's layout box and the column
   width stay fixed. The row container itself is NOT scaled — that's what was
   compounding before (row × label) and pushing text off the panel edge. */
.character-creation-stat-row.is-class-affected .character-creation-stat-label,
.character-creation-stat-row.is-class-affected .character-creation-stat-value {
  animation: characterCreationClassPulse 2.4s ease-in-out infinite;
}

@keyframes characterCreationClassPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.18);
    filter: brightness(1.25);
  }
}

/* ---------- Center: steppers ---------- */

.character-creation-main-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  padding: 4px 6px;
}

.character-creation-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.character-creation-field-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c9a227;
  text-align: center;
}

#character-name-input {
  width: 100%;
  font-family: inherit;
  font-size: 18px;
  padding: 10px 14px;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  color: #e8e6e3;
  text-align: center;
}

.character-creation-stepper {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
}

.character-creation-stepper-arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: #c9d1d9;
  background: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.character-creation-stepper-arrow:hover {
  background: #30363d;
  border-color: #8b949e;
  color: #fff;
}

.character-creation-stepper-value {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  color: #e8e6e3;
  letter-spacing: 0.02em;
}

.character-creation-stepper-caption {
  min-height: 1.4em;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #8b949e;
}

.character-creation-stepper-short {
  text-align: center;
  font-size: 0.8rem;
  color: #c9d1d9;
  letter-spacing: 0.02em;
}

.character-creation-stepper-hs {
  margin-top: 2px;
  text-align: center;
  font-family: 'Audiowide', 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #f5d76e;
}

.character-creation-stepper-hs.empty {
  color: #6b7280;
}

.character-creation-stepper--sprite {
  grid-template-columns: 44px 96px 44px;
  justify-content: center;
  justify-self: center;
}

.character-creation-sprite-preview {
  width: 96px;
  height: 112px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 8px;
  overflow: hidden;
}

.character-creation-riftwalker-preview {
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

.character-creation-begin-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  perspective: 900px;
}

#character-creation-begin.rune-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 240px;
  padding: 16px 38px;
  font-size: 1.15rem;
  font-family: 'Black Ops One', 'JetBrains Mono', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f1ddb6;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.65),
    0 0 8px rgba(255, 220, 160, 0.18);
  border: 2px solid #2e1c0c;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 228, 180, 0.22), transparent 55%),
    radial-gradient(ellipse at 70% 78%, rgba(0, 0, 0, 0.36), transparent 60%),
    linear-gradient(160deg, #856237 0%, #5d4128 60%, #4a3320 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 180, 0.22),
    inset 0 -2px 4px rgba(0, 0, 0, 0.5),
    0 5px 0 #271708,
    0 9px 18px rgba(0, 0, 0, 0.55);
  transform-style: preserve-3d;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.2, 0.8, 0.3, 1),
    background 200ms ease;
}

#character-creation-begin.rune-button:hover {
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 228, 180, 0.28), transparent 55%),
    radial-gradient(ellipse at 70% 78%, rgba(0, 0, 0, 0.32), transparent 60%),
    linear-gradient(160deg, #966c3d 0%, #6a4a2c 60%, #533724 100%);
}

#character-creation-begin.rune-button:focus-visible {
  outline: 2px solid #7ee5ff;
  outline-offset: 4px;
}

#character-creation-begin.rune-button:disabled {
  cursor: default;
}

.rune-button-engravings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.rune-button-engravings-base path {
  fill: none;
  stroke: rgba(28, 14, 4, 0.78);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rune-button-engravings-glow path {
  fill: none;
  stroke: #7ee5ff;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 0 rgba(126, 229, 255, 0));
  transition:
    stroke-dashoffset 850ms ease-out,
    filter 200ms ease-out;
}

.rune-button-engravings-glow path:nth-child(1),
.rune-button-engravings-glow path:nth-child(4) {
  transition-delay: 0ms;
}

.rune-button-engravings-glow path:nth-child(2),
.rune-button-engravings-glow path:nth-child(3) {
  transition-delay: 220ms;
}

#character-creation-begin.rune-button.is-pressing .rune-button-engravings-glow path {
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(126, 229, 255, 0.85));
}

.rune-button-label {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

#character-creation-begin.rune-button.is-pressing {
  transform: translate3d(0, 5px, 0);
  box-shadow:
    inset 0 7px 18px rgba(0, 0, 0, 0.65),
    inset 0 -1px 0 rgba(255, 228, 180, 0.05),
    0 0 0 #271708,
    0 0 32px rgba(126, 229, 255, 0.28);
}

/* ---------- Character Creation: high-score banner + difficulty picker ---------- */

.character-creation-high-score-banner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  justify-content: center;
  width: min(820px, 92vw);
}

.char-create-hs-arcade {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #11151c 0%, #0a0d12 100%);
  border: 1px solid #30363d;
  border-radius: 12px;
  box-shadow: inset 0 0 32px rgba(247, 120, 186, 0.08), 0 0 18px rgba(126, 231, 135, 0.08);
  font-family: 'Audiowide', 'JetBrains Mono', monospace;
}

.char-create-hs-eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f778ba;
  text-shadow: 0 0 8px rgba(247, 120, 186, 0.55);
}

.char-create-hs-score {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 400;
  color: #ffd866;
  text-shadow: 0 0 14px rgba(255, 216, 102, 0.45);
  letter-spacing: 0.08em;
  line-height: 1.05;
}

.char-create-hs-meta {
  font-size: 12px;
  color: #8b949e;
  letter-spacing: 0.06em;
}

/* Rift-shard side panel (companion feature; just enough chrome that it lines up
   with the arcade box). Layout-only, no value judgments on its content. */
.char-create-rift-panel {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(13, 13, 18, 0.7);
  border: 1px solid #30363d;
  border-radius: 12px;
  color: #c9d1d9;
  font-size: 13px;
  text-align: center;
}

.char-create-rift-shards,
.char-create-rift-boosts {
  color: #c9d1d9;
}

#char-create-rift-roll-btn {
  margin-top: 4px;
  padding: 8px 14px;
  font-size: 12px;
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#char-create-rift-roll-btn:hover:not(:disabled) {
  background: #30363d;
  border-color: #8b949e;
}

#char-create-rift-roll-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Difficulty short tagline beneath the stepper highlights the chosen flavor's
   accent color — the list of mods this tier adds. (Long prose was removed; the
   Class column will host its descriptive text in a future update.) */
#character-creation-difficulty-short {
  color: var(--difficulty-accent, #c9d1d9);
  font-weight: 600;
}

/* ---------- Win screen: defeat layout + score breakdown + actions ---------- */

/*
 * The defeat container holds the title, narrative, score table, and "new high
 * score" banner. Constrained width with auto margins centers it inside
 * `#win-screen`'s flex column.
 */
.win-screen-defeat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(720px, 92vw);
  max-height: 92vh;
  overflow: auto;
  padding: 4px;
  text-align: center;
}

.win-screen-defeat-title {
  font-family: 'Black Ops One', 'JetBrains Mono', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #f778ba;
  text-shadow: 0 0 18px rgba(247, 120, 186, 0.45);
  margin: 0;
}

.win-screen-defeat-narrative {
  font-size: 14px;
  line-height: 1.6;
  color: #c9d1d9;
  max-width: 64ch;
  margin: 0;
}

.win-screen-defeat-difficulty {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8b949e;
}

.win-screen-rift-shards {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #c9d1d9;
}

.win-screen-rift-shards #win-screen-rift-icon {
  /* Render the spinner canvas at its intrinsic 52×52 (matches the per-shard
     fly animation, which sizes off the live bounding rect). */
  display: block;
}

.win-screen-rift-shards #win-screen-rift-count {
  font-family: 'Audiowide', 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  color: #ffd866;
  text-shadow: 0 0 12px rgba(255, 216, 102, 0.45);
  font-variant-numeric: tabular-nums;
}

/*
 * Each "+1 Rift Shard" travels in its own canvas appended to <body>. The
 * animation mutates `left`/`top` in pixels, so the element must be
 * positioned (fixed, since the bounding rects come from `getBoundingClientRect`)
 * and ride above every overlay. `pointer-events: none` so the flock never
 * intercepts clicks on the Save / Return buttons underneath.
 */
.rift-shard-fly {
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  image-rendering: pixelated;
  will-change: transform, opacity, left, top;
}

.win-screen-defeat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #c9d1d9;
}

.win-screen-defeat-table th,
.win-screen-defeat-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.6);
}

.win-screen-defeat-table thead th {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b949e;
  font-weight: 500;
  border-bottom: 1px solid #30363d;
}

.win-screen-defeat-table tbody th {
  text-align: left;
  font-weight: 500;
  color: #e8e6e3;
}

.win-screen-defeat-table tbody td:first-of-type {
  text-align: left;
  color: #8b949e;
}

.win-screen-defeat-table td:last-child,
.win-screen-defeat-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #ffd866;
}

.win-screen-defeat-table tfoot th {
  text-align: right;
  font-weight: 500;
  color: #c9d1d9;
}

.win-screen-defeat-table tfoot .win-screen-defeat-base-row td,
.win-screen-defeat-table tfoot .win-screen-defeat-mult-row td {
  color: #c9d1d9;
}

.win-screen-defeat-table tfoot .win-screen-defeat-final-row th,
.win-screen-defeat-table tfoot .win-screen-defeat-final-row td {
  font-size: 16px;
  color: #7ee787;
  text-shadow: 0 0 10px rgba(126, 231, 135, 0.35);
  border-top: 1px solid #30363d;
}

.win-screen-defeat-new-high {
  font-family: 'Audiowide', 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: #ffd866;
  text-shadow: 0 0 12px rgba(255, 216, 102, 0.55);
  margin: 8px 0 0;
}

.win-screen-victory {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.win-screen-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

.win-screen-action-btn {
  padding: 12px 24px;
  font-size: 1rem;
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.win-screen-action-btn:hover {
  background: #2ea043;
}

/* ---------- End-run confirmation overlay ---------- */

/*
 * The HUD's "End Run" button raises this confirmation. Without explicit
 * positioning the dialog falls into normal block flow at the top of
 * `#game-container`, which on the live HUD looks like a pile of text behind
 * the top-left HUD widgets. Center it over the game like the other modal
 * confirmations (mines ladder, return portal, etc.).
 */
#end-run-confirm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 18, 0.78);
  z-index: 28;
  pointer-events: auto;
}

#end-run-confirm-overlay.hidden {
  display: none;
}

#end-run-confirm-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: min(520px, 90vw);
  text-align: center;
  color: #c9d1d9;
  box-shadow: 0 0 24px rgba(247, 120, 186, 0.18);
}

#end-run-confirm-inner h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: #f778ba;
  letter-spacing: 0.04em;
}

#end-run-confirm-inner p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #c9d1d9;
}

#end-run-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#end-run-confirm-yes-btn,
#end-run-confirm-no-btn {
  padding: 10px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

#end-run-confirm-yes-btn {
  background: #8b3a3a;
  color: #fff;
}

#end-run-confirm-yes-btn:hover {
  background: #a85252;
}

#end-run-confirm-no-btn {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
}

#end-run-confirm-no-btn:hover {
  background: #30363d;
}

/* ---------- Return / outbound portal confirmation ---------- */

/*
 * Spell Tome portal travel asks yes/no before map change. Without explicit
 * positioning the dialog sits in normal block flow at the top of #ui-overlay,
 * behind the HUD cluster — same failure mode as end-run-confirm (see above).
 */
#return-portal-confirm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 18, 0.78);
  z-index: 28;
  pointer-events: auto;
}

#return-portal-confirm-overlay.hidden {
  display: none;
}

#return-portal-confirm-inner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 28px 32px;
  max-width: min(520px, 90vw);
  text-align: center;
  color: #c9d1d9;
  box-shadow: 0 0 24px rgba(126, 231, 135, 0.18);
}

#return-portal-confirm-inner h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  color: #7ee787;
  letter-spacing: 0.04em;
}

#return-portal-confirm-inner p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: #c9d1d9;
}

#return-portal-confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

#return-portal-confirm-yes-btn,
#return-portal-confirm-no-btn {
  padding: 10px 20px;
  font-size: 0.95rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

#return-portal-confirm-yes-btn {
  background: #238636;
  color: #fff;
}

#return-portal-confirm-yes-btn:hover {
  background: #2ea043;
}

#return-portal-confirm-no-btn {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
}

#return-portal-confirm-no-btn:hover {
  background: #30363d;
}

button {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 28px;
  margin-top: 8px;
  background: #238636;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

button:hover {
  background: #2ea043;
  transform: scale(1.02);
}

button:active {
  transform: scale(0.98);
}

/* Full-screen parchment “expedition chart” while changing maps */
#map-travel-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 40%, rgba(44, 36, 28, 0.55) 0%, rgba(12, 10, 8, 0.88) 70%);
}

.map-travel-scroll {
  width: min(92vw, 520px);
  padding: 28px 32px 24px;
  background:
    linear-gradient(145deg, rgba(255, 248, 220, 0.97) 0%, rgba(235, 214, 175, 0.98) 45%, rgba(218, 192, 148, 0.99) 100%);
  border: 2px solid #5c4033;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 2px 0 #3d2914;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
  color: #2a1f15;
}

.map-travel-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b4e32;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 600;
}

.map-travel-title {
  font-family: 'Caveat', 'EB Garamond', cursive;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 14px;
  color: #1e1410;
  line-height: 1.15;
}

.map-travel-svg-frame {
  border: 1px solid rgba(74, 52, 37, 0.45);
  border-radius: 2px;
  /* Opaque parchment so the dark overlay cannot show through (was washing out / darkening the chart). */
  background: #f4ecda;
  padding: 8px;
  margin-bottom: 18px;
}

#map-travel-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(38vh, 280px);
}

.map-travel-svg-caption {
  font-family: 'Caveat', 'EB Garamond', cursive;
  font-size: 13px;
  fill: #3d2914;
  font-weight: 600;
}

.map-travel-svg-endpoint {
  font-size: 12px;
  max-width: 8em;
}

.map-travel-svg-cavern {
  fill: #4a3560;
}

.map-travel-scroll--vertical .map-travel-svg-frame {
  margin-bottom: 20px;
}

/* Expedition-chart path: high-contrast ink on parchment; 16+12 period matches keyframes.
   (Inline stroke matched the old dark “map” panel and disappeared; SVG feDropShadow can also hide dashed strokes in some GPUs.) */
#map-travel-route-h,
#map-travel-route-v-down,
#map-travel-route-v-up {
  stroke: #2a1810 !important;
  stroke-width: 3 !important;
  stroke-dashoffset: 0;
  filter: none !important;
}

#map-travel-overlay:not(.hidden) #map-travel-route-h,
#map-travel-overlay:not(.hidden) #map-travel-route-v-down,
#map-travel-overlay:not(.hidden) #map-travel-route-v-up {
  animation: map-travel-dash-drift 1.4s linear infinite;
}

@keyframes map-travel-dash-drift {
  to {
    stroke-dashoffset: -28;
  }
}

@media (prefers-reduced-motion: reduce) {
  #map-travel-overlay:not(.hidden) #map-travel-route-h,
  #map-travel-overlay:not(.hidden) #map-travel-route-v-down,
  #map-travel-overlay:not(.hidden) #map-travel-route-v-up {
    animation: none;
  }
}

.map-travel-progress-block {
  text-align: center;
}

.map-travel-progress-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c4033;
  margin-bottom: 8px;
  font-weight: 600;
}

.map-travel-progress-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(74, 52, 37, 0.2);
  border: 1px solid rgba(74, 52, 37, 0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.map-travel-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #8b6914, #c9a227 55%, #e8c547);
  transition: width 0.12s linear;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.45);
}

.map-travel-hint {
  margin-top: 10px;
  font-size: 0.9rem;
  font-style: italic;
  color: #5c4033;
  min-height: 1.35em;
}

#loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background: radial-gradient(ellipse at 50% 40%, rgba(44, 36, 28, 0.55) 0%, rgba(12, 10, 8, 0.88) 70%);
}

.loading-scroll {
  width: min(92vw, 480px);
  padding: 28px 32px 24px;
  background:
    linear-gradient(145deg, rgba(255, 248, 220, 0.97) 0%, rgba(235, 214, 175, 0.98) 45%, rgba(218, 192, 148, 0.99) 100%);
  border: 2px solid #5c4033;
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 2px 0 #3d2914;
  font-family: 'EB Garamond', 'Palatino Linotype', Georgia, serif;
  color: #2a1f15;
}

.loading-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b4e32;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 600;
}

.loading-title {
  font-family: 'Caveat', 'EB Garamond', cursive;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  font-weight: 600;
  text-align: center;
  margin-bottom: 18px;
  color: #1e1410;
  line-height: 1.15;
}

.loading-progress-block {
  text-align: center;
}

.loading-progress-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c4033;
  margin-bottom: 8px;
  font-weight: 600;
  min-height: 1.35em;
}

.loading-progress-track {
  height: 10px;
  border-radius: 5px;
  background: rgba(74, 52, 37, 0.2);
  border: 1px solid rgba(74, 52, 37, 0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

.loading-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #8b6914, #c9a227 55%, #e8c547);
  transition: width 0.12s linear;
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.45);
}

#skill-tree-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(12, 10, 18, 0.55);
  backdrop-filter: blur(2px);
}

#skill-tree-overlay:not(.hidden) {
  display: flex !important;
}

.skill-tree-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  padding: 10px 14px 12px;
  box-sizing: border-box;
  background: linear-gradient(165deg, #2a2138 0%, #1a1524 100%);
  border: none;
  border-bottom: 1px solid rgba(120, 90, 160, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #e8e4f0;
  font-family: 'EB Garamond', Georgia, serif;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.skill-tree-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 6px;
}

.skill-tree-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #d4b8ff;
  text-align: left;
}

.skill-tree-summary {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #c4bdd8;
  text-align: center;
  flex-shrink: 0;
}

.skill-tree-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  touch-action: none;
  border-radius: 8px;
  cursor: grab;
  background-color: #07050e;
  background-image:
    linear-gradient(160deg, rgba(10, 6, 18, 0.55) 0%, rgba(8, 5, 14, 0.4) 50%, rgba(6, 4, 12, 0.5) 100%),
    url('../images/space.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid rgba(120, 90, 160, 0.35);
  user-select: none;
  -webkit-user-select: none;
}

.skill-tree-map.skill-tree-map--dragging {
  cursor: grabbing;
}

.skill-tree-map-pan {
  position: absolute;
  left: 50%;
  top: 50%;
  will-change: transform;
  border-radius: 8px;
  overflow: visible;
}

.skill-tree-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.skill-tree-map-svg path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skill-tree-link--web {
  stroke: rgba(120, 88, 155, 0.42);
  stroke-width: 1.5;
  stroke-dasharray: 5 8;
}

.skill-tree-link--prereq {
  stroke: rgba(178, 138, 225, 0.62);
  stroke-width: 2.25;
}

.skill-tree-node-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.skill-tree-node-slot {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  max-width: min(240px, 42vw);
  z-index: 1;
}

.skill-tree-node-slot--label-left {
  flex-direction: row-reverse;
}

.skill-tree-node-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ebe4f8;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.95),
    0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

/* Skill map nodes: global `button:hover { transform: scale(1.02) }` would override
   translate(-50%,-50%) and jump icons — keep the same transform on all states. */
.skill-tree-node-slot > .skill-tree-node {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  flex-shrink: 0;
}

.skill-tree-node-slot > .skill-tree-node:hover:not(:disabled),
.skill-tree-node-slot > .skill-tree-node:active:not(:disabled) {
  transform: none;
}

.skill-tree-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  margin: 0;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(200, 170, 255, 0.5);
  background: radial-gradient(circle at 30% 28%, #4a3d62 0%, #2a2238 70%);
  color: #e8d8ff;
  font-size: 1.15rem;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  overflow: hidden;
  line-height: 1.05;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  isolation: isolate;
}

.skill-tree-node--tier-bane {
  border-color: rgba(200, 175, 255, 0.88);
}

.skill-tree-node--tier-dmg {
  border-color: rgba(255, 210, 130, 0.92);
}

.skill-tree-node--tier-stun {
  border-color: rgba(110, 200, 255, 0.95);
}

.skill-tree-node--tier-explode {
  border-color: rgba(255, 130, 85, 0.95);
}

/*
 * Walk frames are huge square PNGs; the figure sits in the lower ~2/3 of the bitmap.
 * Center the img box on the button, then translate UP (more negative %) so the body
 * moves into the circle (was too low — only horn tips showed at the bottom edge).
 */
.skill-tree-node-fill-img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 265%;
  height: 265%;
  max-width: none;
  margin: 0;
  transform: translate3d(-50%, -64%, 0);
  object-fit: cover;
  object-position: 50% 38%;
  pointer-events: none;
  image-rendering: auto;
  backface-visibility: hidden;
}

.skill-tree-node-fallback-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  pointer-events: none;
}

.skill-tree-node:hover:not(:disabled) {
  transform: translate(-50%, -50%);
  border-color: rgba(140, 210, 160, 0.95);
  box-shadow: 0 0 14px rgba(80, 200, 120, 0.45);
}

.skill-tree-node:active:not(:disabled) {
  transform: translate(-50%, -50%);
}

.skill-tree-node:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.skill-tree-node.skill-tree-node--locked {
  border-style: dashed;
  opacity: 0.55;
}

.skill-tree-node.skill-tree-node--max {
  border-color: rgba(120, 200, 140, 0.65);
}

.skill-tree-node-rank {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 2px 2px 3px;
  font-size: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  text-align: center;
  color: #f4f0ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.75);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 50% 50%;
}

.skill-tree-hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #9a90b0;
  text-align: center;
  flex-shrink: 0;
}

.skill-tree-close-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid rgba(180, 140, 220, 0.45);
  background: rgba(60, 48, 82, 0.9);
  color: #e8e4f0;
}

.skill-tree-close-btn:hover {
  background: rgba(80, 64, 108, 0.95);
}

/* Spell Tome — learned spells (separate from Skill Tree) */
#spell-tome-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(10, 8, 6, 0.72);
  backdrop-filter: blur(2px);
}

#spell-tome-overlay:not(.hidden) {
  display: flex !important;
}

.spell-tome-inner {
  max-width: 520px;
  width: 100%;
  max-height: min(90vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 22px 20px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 2px solid rgba(62, 48, 32, 0.95);
  box-shadow:
    0 0 0 1px rgba(20, 14, 8, 0.9),
    0 12px 40px rgba(0, 0, 0, 0.65),
    inset 0 0 80px rgba(40, 28, 18, 0.25);
  background:
    linear-gradient(175deg, rgba(72, 56, 38, 0.97) 0%, rgba(38, 28, 20, 0.99) 45%, rgba(28, 22, 16, 1) 100%),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.04) 2px,
      rgba(0, 0, 0, 0.04) 3px
    );
  color: #e8dcc8;
  font-family: 'EB Garamond', Georgia, serif;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

.spell-tome-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(40, 32, 24, 0.85);
}

.spell-tome-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  color: #c9a86c;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.spell-tome-lede {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(200, 184, 160, 0.92);
}

.spell-tome-empty {
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(170, 155, 130, 0.88);
}

.spell-tome-empty.hidden {
  display: none;
}

#spell-tome-spells-slots {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  justify-items: center;
  align-content: start;
}

.spell-tome-equip-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(40, 32, 24, 0.85);
  flex-shrink: 0;
}

.spell-tome-equip-label {
  font-size: 0.82rem;
  color: rgba(180, 165, 140, 0.9);
  letter-spacing: 0.03em;
}

.spell-tome-equip-slots {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

#spell-tome-equip-row .sorcery-hand-slot {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  border: 2px dashed rgba(120, 96, 64, 0.65);
  background: rgba(18, 14, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}

#spell-tome-equip-row .sorcery-hand-slot.has-item {
  border-style: solid;
  border-color: rgba(201, 162, 39, 0.55);
}

#spell-tome-equip-row .sorcery-hand-slot:hover {
  border-color: rgba(201, 162, 39, 0.85);
  background: rgba(28, 22, 16, 0.75);
}

#tab-menu-spells-slots .spell-slot,
#spell-tome-spells-slots .spell-slot {
  cursor: pointer;
}

#tab-menu-spells-slots .spell-slot.sorcery-slot-picked,
#spell-tome-spells-slots .spell-slot.sorcery-slot-picked {
  border-color: rgba(120, 180, 255, 0.95);
  box-shadow:
    inset 0 0 0 2px rgba(120, 180, 255, 0.55),
    0 0 12px rgba(96, 165, 250, 0.35);
}

.spell-tome-hint {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(140, 124, 100, 0.9);
  text-align: center;
  flex-shrink: 0;
}

.spell-tome-hint kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(100, 80, 55, 0.6);
  background: rgba(24, 18, 12, 0.5);
}

.spell-tome-close-btn {
  flex-shrink: 0;
  margin: 0;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid rgba(100, 78, 48, 0.85);
  background: rgba(48, 36, 24, 0.92);
  color: #e8dcc8;
}

.spell-tome-close-btn:hover {
  background: rgba(68, 52, 34, 0.98);
}

/* ——— Building system (factory / iron works) ——— */
#building-system-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: min(3vw, 24px);
  background: radial-gradient(ellipse at 50% 0%, rgba(90, 110, 130, 0.35) 0%, transparent 55%),
    linear-gradient(165deg, rgba(12, 14, 18, 0.92) 0%, rgba(22, 26, 32, 0.96) 40%, rgba(8, 10, 14, 0.98) 100%);
  pointer-events: auto;
}

/* Paused placement mode: tiled picker over the map (right rail; map stays draggable on the left). */
.building-placement-layouts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.building-placement-layouts-head .building-placement-grid-section-title {
  margin: 0;
}

.building-placement-layouts-head--static {
  flex-shrink: 0;
  padding: 8px 14px 0;
  margin-bottom: -8px;
}

.building-placement-layouts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.building-placement-export-btn,
.building-placement-import-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
}

.building-placement-export-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#building-placement-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 125;
  pointer-events: none;
}

.building-placement-grid-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  min-height: 180px;
  max-height: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  background-color: #c8b48a;
  background-image: url('../images/ui/build-menu-parchment.png');
  background-size: 100% 200%;
  background-position: top center;
  background-repeat: no-repeat;
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.5);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  border-top: 2px solid rgba(62, 42, 24, 0.65);
}

.building-placement-grid-overlay--open .building-placement-grid-panel {
  transform: translateY(0);
}

.building-placement-grid-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 14px 4px;
  background: linear-gradient(180deg, rgba(72, 52, 32, 0.35) 0%, rgba(72, 52, 32, 0) 100%);
}

.building-placement-grid-head-text {
  min-width: 0;
}

.building-placement-grid-title {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a1c10;
  font-weight: 700;
}

.building-placement-grid-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.65rem;
  line-height: 1.3;
  color: rgba(42, 28, 16, 0.78);
}

.building-placement-done-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 8px;
  background: linear-gradient(180deg, #5c4030 0%, #3d2a1e 100%);
  border: 1px solid #2a1c10;
  color: #f4ead8;
}

.building-placement-done-btn:hover {
  background: linear-gradient(180deg, #6d4a36 0%, #4a3224 100%);
}

.building-placement-category-strip {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px 12px 6px;
  overflow-x: auto;
}

.building-placement-category-tab {
  flex-shrink: 0;
  min-width: 72px;
  padding: 6px 10px;
  border: 1px solid rgba(62, 42, 24, 0.45);
  border-radius: 10px;
  background: rgba(244, 234, 216, 0.55);
  color: #2a1c10;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.building-placement-category-tab:hover {
  background: rgba(255, 248, 235, 0.75);
  border-color: rgba(62, 42, 24, 0.65);
}

.building-placement-category-tab--active {
  border-color: #8b6914;
  background: rgba(255, 236, 180, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(139, 105, 20, 0.35);
}

.building-placement-grid-root {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 14px 12px;
}

.building-placement-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 8px;
}

.building-placement-tile {
  min-height: 76px;
  padding: 6px 4px;
  border: 1px solid rgba(62, 42, 24, 0.5);
  border-radius: 12px;
  background: rgba(255, 248, 235, 0.72);
  color: #2a1c10;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  font-size: 9px;
  line-height: 1.15;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(62, 42, 24, 0.15);
}

.building-placement-tile:hover {
  border-color: rgba(62, 42, 24, 0.75);
  background: rgba(255, 252, 245, 0.92);
}

.building-placement-tile--active {
  border-color: #8b6914;
  background: rgba(255, 244, 200, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 2px rgba(201, 162, 39, 0.45);
}

.building-placement-tile--unaffordable {
  filter: grayscale(1);
  opacity: 0.45;
}

.building-placement-tile--unaffordable.building-placement-tile--active {
  filter: none;
  opacity: 1;
}

.building-placement-tile:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.building-placement-tile-icon {
  display: block;
  image-rendering: pixelated;
}

.building-placement-tile-fallback {
  font-weight: 600;
  font-size: 11px;
  color: #3d2a1e;
  text-align: center;
}

.building-placement-tile-caption {
  font-size: 9px;
  color: #3d2a1e;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.building-placement-grid-empty {
  margin: 0;
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(42, 28, 16, 0.75);
  line-height: 1.4;
}

.building-factory-backdrop {
  width: min(960px, 100%);
  max-height: min(92vh, 900px);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.building-factory-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 2px solid #3d4450;
  border-radius: 4px;
  background: linear-gradient(180deg, #434a56 0%, #2b3038 12%, #1e2229 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.45),
    0 12px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.5);
}

.building-factory-rivet-row {
  height: 10px;
  flex-shrink: 0;
  background: repeating-linear-gradient(
    90deg,
    #2a2f36 0px,
    #2a2f36 14px,
    #1a1d22 14px,
    #1a1d22 16px
  );
  border-bottom: 1px solid #0f1115;
}

.building-factory-rivet-row--bottom {
  border-bottom: none;
  border-top: 1px solid #0f1115;
}

.building-factory-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 18px 12px;
  background: linear-gradient(180deg, #5c6572 0%, #3d444f 55%, #2f343d 100%);
  border-bottom: 1px solid #0d0f12;
}

.building-factory-title-block {
  min-width: 0;
}

.building-factory-heading {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8eaee;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.building-factory-tagline {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: #a8b0bc;
}

.building-factory-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.building-factory-btn {
  margin: 0;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  color: #dce0e6;
  border-radius: 3px;
  border: 1px solid #1a1c20;
  background: linear-gradient(180deg, #4a515c 0%, #2f343d 45%, #23272e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0, 0, 0, 0.45);
}

.building-factory-btn:hover {
  background: linear-gradient(180deg, #5a6270 0%, #383e48 45%, #2a2f38 100%);
  color: #fff;
}

.building-factory-btn--accent {
  border-color: #8b4513;
  background: linear-gradient(180deg, #c45c28 0%, #8a3a12 50%, #5c2408 100%);
  color: #fff7e8;
  box-shadow: inset 0 1px 0 rgba(255, 200, 140, 0.35), 0 2px 6px rgba(0, 0, 0, 0.55);
}

.building-factory-btn--accent:hover {
  background: linear-gradient(180deg, #d66a32 0%, #9f4514 50%, #6e2e0a 100%);
}

.building-factory-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 16px;
  background: linear-gradient(180deg, rgba(30, 34, 40, 0.55) 0%, rgba(18, 20, 24, 0.9) 100%);
}

.building-factory-footer {
  flex-shrink: 0;
  padding: 8px 16px 10px;
  background: #252a32;
  border-top: 1px solid #0d0f12;
}

.building-factory-footer-hint {
  font-size: 0.75rem;
  color: #8a929e;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.building-system-root {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #c9ced6;
}

.building-factory-intro {
  margin: 0 0 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #9aa3af;
}

.building-factory-section {
  margin-bottom: 18px;
  padding: 10px 12px 12px;
  border: 1px solid #2f3540;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(55, 62, 72, 0.5) 0%, rgba(28, 31, 38, 0.85) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.building-factory-section-head {
  margin-bottom: 8px;
}

.building-factory-section-title {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e2b866;
}

.building-factory-section-sub {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: #7a8494;
  line-height: 1.35;
}

.building-factory-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.building-factory-stock-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 6px;
  border-radius: 2px;
  font-size: 0.8rem;
}

.building-factory-stock-row--has {
  background: rgba(200, 210, 220, 0.06);
}

.building-factory-stock-label {
  color: #aeb6c2;
}

.building-factory-stock-count {
  font-weight: 600;
  color: #f0f3f7;
  min-width: 2ch;
  text-align: right;
}

.building-factory-empty {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: #6d7582;
}

.building-factory-bp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.building-factory-bp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 88px;
  padding: 8px 6px 6px;
  border: 1px solid #333842;
  border-radius: 3px;
  background: linear-gradient(180deg, #3a4049 0%, #23272e 100%);
  cursor: pointer;
  color: inherit;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.building-factory-bp-slot:hover {
  border-color: #5a6575;
}

.building-factory-bp-slot--active {
  border-color: #e2b866;
  box-shadow: 0 0 0 1px rgba(226, 184, 102, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.building-factory-bp-canvas {
  display: block;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.25);
}

.building-factory-bp-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.85rem;
  color: #8a929e;
}

.building-factory-bp-caption {
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #b4bcc8;
}

.building-factory-tab-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.building-factory-tab-head {
  flex-shrink: 0;
}

.building-factory-title.building-factory-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #d4dae3;
}

.building-factory-tab-toolbar {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.building-factory-tab-hint {
  margin: 8px 0 10px;
  font-size: 0.78rem;
  color: #8a929e;
}

/* —— Weaviary (Wizard bestiary) — open book over the game —— */
#weaviary-overlay {
  position: absolute;
  inset: 0;
  z-index: 125;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
  background: rgba(8, 6, 4, 0.82);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}

#weaviary-overlay:not(.hidden) {
  display: flex !important;
}

.weaviary-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 1080px);
  max-height: min(92vh, 760px);
  box-sizing: border-box;
  border-radius: 6px;
  border: 3px solid rgba(48, 36, 24, 0.98);
  box-shadow:
    0 0 0 1px rgba(18, 12, 6, 0.95),
    0 18px 48px rgba(0, 0, 0, 0.7),
    inset 0 2px 0 rgba(255, 240, 210, 0.08);
  background:
    linear-gradient(165deg, rgba(58, 42, 28, 0.98) 0%, rgba(32, 24, 16, 1) 55%, rgba(22, 16, 10, 1) 100%);
  color: #e8dcc8;
  font-family: 'EB Garamond', Georgia, serif;
  overflow: hidden;
}

.weaviary-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  flex-shrink: 0;
  padding: 14px 18px 10px;
  border-bottom: 2px solid rgba(28, 20, 12, 0.9);
  background: linear-gradient(180deg, rgba(72, 54, 36, 0.55) 0%, rgba(40, 30, 20, 0.35) 100%);
}

.weaviary-title-block {
  flex: 1 1 220px;
  min-width: 0;
}

.weaviary-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 600;
  color: #c9a86c;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.weaviary-subtitle {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(200, 184, 160, 0.9);
  max-width: 52ch;
}

.weaviary-progress {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: #a89068;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(80, 60, 40, 0.5);
  background: rgba(16, 12, 8, 0.45);
}

.weaviary-close-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(100, 78, 52, 0.7);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(56, 42, 28, 0.95) 0%, rgba(32, 24, 16, 0.98) 100%);
  color: #e8dcc8;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.weaviary-close-btn:hover {
  background: linear-gradient(180deg, rgba(80, 60, 40, 0.98) 0%, rgba(48, 36, 24, 1) 100%);
  border-color: #c9a86c;
}

/* Open spread: left index page | spine | right entry page */
.weaviary-book-spread {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 10px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.weaviary-spine {
  flex: 0 0 14px;
  background: linear-gradient(
    90deg,
    rgba(28, 20, 12, 0.95) 0%,
    rgba(12, 8, 4, 1) 45%,
    rgba(28, 20, 12, 0.95) 100%
  );
  box-shadow:
    inset 4px 0 8px rgba(0, 0, 0, 0.45),
    inset -4px 0 8px rgba(0, 0, 0, 0.45);
}

.weaviary-page {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  box-sizing: border-box;
  overflow: hidden;
  background:
    linear-gradient(180deg, #f4ead4 0%, #e8dcc4 12%, #ddd0b8 100%);
  color: #2a2218;
  box-shadow: inset 0 0 40px rgba(120, 96, 64, 0.12);
}

.weaviary-page::before {
  display: block;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(80, 60, 40, 0.75);
  border-bottom: 1px solid rgba(80, 60, 40, 0.25);
  padding-bottom: 6px;
}

.weaviary-page--index::before {
  content: 'Index of creatures';
}

.weaviary-page--entry::before {
  content: 'Entry';
}

.weaviary-page--index {
  border-radius: 2px 0 0 2px;
  border-right: 1px solid rgba(100, 80, 56, 0.2);
}

.weaviary-page--entry {
  border-radius: 0 2px 2px 0;
  border-left: 1px solid rgba(100, 80, 56, 0.2);
}

/* Left page: grid of silhouettes / unlocked sprites */
.weaviary-page .weaviary-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 4px 0 0;
  border: none;
  background: transparent;
}

.weaviary-page .weaviary-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 4px 0 0;
}

.weaviary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 6px 10px;
  border: 1px solid rgba(100, 78, 52, 0.45);
  border-radius: 4px;
  background: rgba(255, 248, 235, 0.72);
  box-shadow: 0 1px 3px rgba(60, 44, 28, 0.15);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.1s ease;
}

.weaviary-card:hover:not(.weaviary-card--locked) {
  border-color: rgba(140, 110, 72, 0.85);
  box-shadow: 0 2px 8px rgba(60, 44, 28, 0.25);
  transform: translateY(-1px);
}

.weaviary-card--selected {
  border-color: #8b6914;
  box-shadow:
    0 0 0 2px rgba(201, 168, 108, 0.45),
    0 2px 8px rgba(60, 44, 28, 0.3);
  background: rgba(255, 252, 240, 0.95);
}

.weaviary-card--locked {
  cursor: default;
  background: rgba(220, 210, 195, 0.55);
}

.weaviary-card--locked:hover {
  transform: none;
}

.weaviary-card-art {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at center, rgba(255, 252, 245, 0.9) 0%, rgba(232, 220, 200, 0.5) 100%);
  border: 1px dashed rgba(80, 60, 40, 0.25);
}

.weaviary-card-art img {
  display: block;
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.weaviary-card--locked .weaviary-card-art img {
  filter: brightness(0) saturate(100%);
  opacity: 0.88;
}

.weaviary-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  color: #3a3024;
  word-break: break-word;
}

.weaviary-card--locked .weaviary-card-name {
  color: rgba(60, 48, 36, 0.65);
  font-style: italic;
}

.weaviary-detail-empty {
  margin: 2rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  font-style: italic;
  color: rgba(60, 48, 36, 0.75);
  text-align: center;
}

.weaviary-detail-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(80, 60, 40, 0.3);
}

.weaviary-detail-art {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 252, 245, 0.85);
  border: 1px solid rgba(100, 78, 52, 0.35);
  box-shadow: inset 0 0 12px rgba(120, 96, 64, 0.1);
}

.weaviary-detail-art img {
  max-width: 88px;
  max-height: 88px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.weaviary-detail-name {
  margin: 0 0 6px;
  font-size: 1.35rem;
  font-weight: 600;
  color: #2a2218;
}

.weaviary-detail-meta {
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(48, 38, 28, 0.92);
}

.weaviary-detail-meta strong {
  color: #4a3828;
}

.weaviary-detail-section {
  margin-bottom: 12px;
}

.weaviary-detail-section h4 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(80, 60, 40, 0.9);
}

.weaviary-detail-section p,
.weaviary-detail-section li {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #2a2218;
}

.weaviary-detail-section ul {
  margin: 0;
  padding-left: 1.2rem;
}

.weaviary-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 0.88rem;
}

.weaviary-detail-stats div {
  padding: 6px 8px;
  border-radius: 3px;
  background: rgba(255, 252, 245, 0.65);
  border: 1px solid rgba(100, 78, 52, 0.2);
}

.weaviary-detail-stats strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(80, 60, 40, 0.85);
  margin-bottom: 2px;
}

.weaviary-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 18px 12px;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  color: rgba(160, 140, 110, 0.88);
}

/* —— Faction Codex (KeyF) — dossier book over the game —— */
#faction-codex-overlay {
  position: absolute;
  inset: 0;
  z-index: 125;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
  background: rgba(6, 8, 12, 0.84);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}

#faction-codex-overlay:not(.hidden) {
  display: flex !important;
}

.faction-codex-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(96vw, 1080px);
  max-height: min(92vh, 760px);
  box-sizing: border-box;
  border-radius: 6px;
  border: 3px solid rgba(36, 44, 58, 0.98);
  box-shadow:
    0 0 0 1px rgba(12, 16, 24, 0.95),
    0 18px 48px rgba(0, 0, 0, 0.7),
    inset 0 2px 0 rgba(200, 210, 230, 0.06);
  background:
    linear-gradient(165deg, rgba(42, 48, 62, 0.98) 0%, rgba(24, 28, 38, 1) 55%, rgba(16, 18, 26, 1) 100%);
  color: #dce4f0;
  font-family: 'EB Garamond', Georgia, serif;
  overflow: hidden;
}

.faction-codex-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  flex-shrink: 0;
  padding: 14px 18px 10px;
  border-bottom: 2px solid rgba(20, 24, 34, 0.9);
  background: linear-gradient(180deg, rgba(56, 64, 82, 0.55) 0%, rgba(32, 38, 52, 0.35) 100%);
}

.faction-codex-title-block {
  flex: 1 1 220px;
  min-width: 0;
}

.faction-codex-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 600;
  color: #8eb4d8;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.faction-codex-subtitle {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(180, 192, 210, 0.9);
  max-width: 52ch;
}

.faction-codex-progress {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: #7a9ab8;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(60, 72, 92, 0.5);
  background: rgba(12, 14, 20, 0.45);
}

.faction-codex-close-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(80, 96, 120, 0.7);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(48, 56, 72, 0.95) 0%, rgba(28, 32, 44, 0.98) 100%);
  color: #dce4f0;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.faction-codex-close-btn:hover {
  border-color: #8eb4d8;
  color: #fff;
}

.faction-codex-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(28, 32, 44, 0.85);
  flex-shrink: 0;
}

.faction-codex-filter-chip {
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(70, 84, 108, 0.65);
  background: rgba(20, 24, 34, 0.75);
  color: rgba(180, 192, 210, 0.95);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.faction-codex-filter-chip:hover {
  border-color: #8eb4d8;
}

.faction-codex-filter-chip--active {
  border-color: #8eb4d8;
  background: rgba(60, 90, 120, 0.45);
  color: #e8f0ff;
}

.faction-codex-book-spread {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.faction-codex-spine {
  flex: 0 0 10px;
  background: linear-gradient(90deg, rgba(8, 10, 16, 0.95) 0%, rgba(40, 48, 64, 0.5) 50%, rgba(8, 10, 16, 0.95) 100%);
}

.faction-codex-page {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.faction-codex-page--index {
  border-right: 1px solid rgba(28, 32, 44, 0.6);
}

.faction-codex-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
  align-content: start;
}

.faction-codex-detail {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px;
}

.faction-codex-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid rgba(60, 72, 92, 0.55);
  border-radius: 4px;
  background: rgba(16, 20, 30, 0.65);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.faction-codex-card:hover:not(.faction-codex-card--locked) {
  border-color: #8eb4d8;
  background: rgba(32, 42, 58, 0.75);
}

.faction-codex-card--selected {
  border-color: #8eb4d8;
  box-shadow: 0 0 0 1px rgba(142, 180, 216, 0.35);
}

.faction-codex-card--locked {
  cursor: default;
  opacity: 0.92;
}

.faction-codex-card-art {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.faction-codex-card-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.faction-codex-card--locked .faction-codex-card-art img {
  filter: brightness(0);
  opacity: 0.55;
}

.faction-codex-card-name {
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  color: rgba(200, 210, 224, 0.95);
}

.faction-codex-card--locked .faction-codex-card-name {
  color: rgba(120, 130, 150, 0.85);
}

.faction-codex-card-tier {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(120, 140, 170, 0.9);
}

.faction-codex-detail-empty {
  margin: 24px 8px;
  text-align: center;
  color: rgba(140, 152, 172, 0.9);
  font-style: italic;
}

.faction-codex-detail-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.faction-codex-detail-art {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(60, 72, 92, 0.6);
  border-radius: 4px;
  background: rgba(12, 14, 20, 0.6);
}

.faction-codex-detail-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.faction-codex-detail-name {
  margin: 0 0 6px;
  font-size: 1.25rem;
  color: #a8c8e8;
}

.faction-codex-detail-meta {
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(180, 192, 210, 0.92);
}

.faction-codex-detail-meta strong {
  color: #c8d8ec;
}

.faction-codex-detail-section {
  margin-bottom: 14px;
}

.faction-codex-detail-section h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(120, 140, 170, 0.95);
}

.faction-codex-detail-section p,
.faction-codex-detail-section li {
  margin: 0 0 6px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(200, 210, 224, 0.95);
}

.faction-codex-detail-section ul {
  margin: 0;
  padding-left: 1.2em;
}

.faction-codex-stance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.faction-codex-stance-table th,
.faction-codex-stance-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(40, 48, 64, 0.65);
  text-align: left;
}

.faction-codex-stance-table th {
  color: rgba(140, 160, 190, 0.95);
  font-weight: 600;
}

.faction-codex-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 18px 12px;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  color: rgba(130, 150, 180, 0.88);
}

/* —— Tutorial (ESC menu) —— */
#tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 126;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  box-sizing: border-box;
  background: rgba(8, 6, 4, 0.88);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}

#tutorial-overlay:not(.hidden) {
  display: flex !important;
}

.tutorial-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: linear-gradient(165deg, rgba(58, 42, 28, 0.98) 0%, rgba(28, 22, 16, 1) 100%);
  color: #e8dcc8;
  font-family: 'EB Garamond', Georgia, serif;
  overflow: hidden;
}

.tutorial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 2px solid rgba(28, 20, 12, 0.9);
}

.tutorial-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.45rem;
  color: #c9a86c;
}

.tutorial-subtitle {
  margin: 0 16px 8px;
  font-size: 0.92rem;
  color: rgba(200, 184, 160, 0.9);
}

.tutorial-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 12px;
  padding: 0 16px 8px;
}

.tutorial-main {
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.tutorial-faq {
  flex: 0 0 38%;
  min-width: 280px;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(100, 78, 52, 0.45);
}

.tutorial-faq-heading {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #c9a86c;
  font-weight: 600;
}

.tutorial-faq-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 6px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid rgba(100, 78, 52, 0.7);
  background: rgba(24, 18, 12, 0.92);
  color: #e8dcc8;
  font: inherit;
  font-size: 0.92rem;
}

.tutorial-faq-search:focus {
  outline: none;
  border-color: #c9a86c;
}

.tutorial-faq-status {
  margin: 0 0 6px;
  min-height: 1.1em;
  font-size: 0.78rem;
  color: rgba(160, 140, 110, 0.92);
}

.tutorial-faq-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

.tutorial-faq-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(100, 78, 52, 0.35);
}

.tutorial-faq-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tutorial-faq-item--hidden {
  display: none;
}

.tutorial-faq-item--first-match {
  border-radius: 4px;
  outline: 1px solid rgba(201, 168, 108, 0.55);
  outline-offset: 2px;
}

.tutorial-faq-category {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 140, 110, 0.88);
}

.tutorial-faq-question {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f4ead4;
  line-height: 1.35;
}

.tutorial-faq-answer {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(220, 208, 188, 0.92);
}

.tutorial-faq-highlight {
  background: rgba(201, 168, 108, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.tutorial-back-btn,
.tutorial-close-btn,
.tutorial-page-btn {
  border: 1px solid rgba(100, 78, 52, 0.7);
  border-radius: 4px;
  background: rgba(40, 30, 20, 0.9);
  color: #e8dcc8;
  font: inherit;
  cursor: pointer;
  padding: 6px 12px;
}

.tutorial-back-btn:hover,
.tutorial-close-btn:hover,
.tutorial-page-btn:hover {
  border-color: #c9a86c;
}

.tutorial-close-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 1.35rem;
  line-height: 1;
}

.tutorial-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 0 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.tutorial-category-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 120px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid rgba(100, 78, 52, 0.55);
  background-color: rgba(32, 24, 16, 0.85);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #f4ead4;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}

.tutorial-category-tile:hover {
  border-color: #c9a86c;
}

.tutorial-category-tile-title {
  font-size: 1.05rem;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.tutorial-category-tile-sub {
  font-size: 0.8rem;
  opacity: 0.92;
  margin-top: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.tutorial-book {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 8px;
}

.tutorial-page {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  max-height: none;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(244, 234, 212, 0.97) 0%, rgba(232, 220, 196, 0.98) 100%);
  background-size: cover;
  background-position: center;
  color: #2a2218;
}

.tutorial-page-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  pointer-events: none;
}

.tutorial-page-text-wrap {
  position: relative;
  z-index: 1;
  max-height: 100%;
  overflow-y: auto;
  padding: 16px 18px;
  background: linear-gradient(
    180deg,
    rgba(244, 234, 212, 0.92) 0%,
    rgba(232, 220, 196, 0.88) 70%,
    rgba(220, 208, 184, 0.85) 100%
  );
}

.tutorial-page-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  color: #2a2218;
}

.tutorial-page-body {
  font-size: 0.95rem;
  line-height: 1.55;
}

.tutorial-page-body p {
  margin: 0 0 0.75em;
}

.tutorial-page-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-shrink: 0;
  margin-top: 10px;
}

.tutorial-page-counter {
  font-size: 0.88rem;
  color: rgba(200, 184, 160, 0.9);
}

.tutorial-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 8px 16px 12px;
  font-size: 0.78rem;
  text-align: center;
  color: rgba(160, 140, 110, 0.88);
}

.hidden {
  display: none !important;
}