:root {
  --text-main: #f0f3ea;
  --text-soft: #c6d0c1;
  --panel-bg: rgba(18, 24, 21, 0.3);
  --panel-border: rgba(197, 207, 191, 0.18);
  --panel-strong: rgba(27, 34, 30, 0.78);
  --accent: #ddb56d;
  --accent-soft: #f2d79d;
  --danger: #d37777;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: Verdana, sans-serif; background: #0f1713; color: var(--text-main); }
button, input { border: 1px solid var(--panel-border); font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.game-root { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.selection-box {
  position: absolute;
  border: 1px solid rgba(240, 211, 122, 0.95);
  background: rgba(240, 211, 122, 0.18);
  pointer-events: none;
  z-index: 4;
}

.hud-bar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  pointer-events: none;
  z-index: 3;
}

.hud-card, .floating-panel, .build-drawer, .character-panel, .building-panel, .resource-panel, .orders-bar, .interaction-menu, .debug-panel-shell, .shop-panel-shell {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}

.hud-card { min-width: 180px; max-width: 220px; padding: 8px 10px; pointer-events: auto; }
.hud-card p { margin: 0 0 4px; font-size: 11px; line-height: 1.25; }
.colonist-strip { flex: 1; display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; pointer-events: auto; }
.colonist-chip {
  min-width: 112px;
  max-width: 220px;
  padding: 7px 9px;
  background: rgba(20, 27, 23, 0.3);
  border: 1px solid rgba(230, 235, 224, 0.16);
  color: var(--text-main);
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease, max-width 0.12s ease;
}
.colonist-chip.is-selected {
  border-color: rgba(240, 211, 122, 0.85);
  box-shadow: inset 0 0 0 1px rgba(240, 211, 122, 0.5);
  background: rgba(43, 35, 21, 0.44);
}
.colonist-chip strong, .colonist-chip span { display: block; }
.colonist-chip-name { font-size: 11px; line-height: 1.2; }
.colonist-chip-body { display: grid; gap: 3px; margin-top: 6px; }
.colonist-chip span { color: var(--text-soft); font-size: 10px; line-height: 1.25; }
.colonist-chip-status { color: var(--accent-soft) !important; }
.colonist-chip-reason { font-size: 10px; line-height: 1.25; color: rgba(214, 220, 208, 0.72); }

.debug-panel {
  width: min(236px, 28vw);
  margin-left: auto;
  pointer-events: auto;
}

.debug-panel-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 7px;
  border-radius: 10px;
  background: rgba(18, 24, 21, 0.22);
  max-height: calc(100vh - 24px);
}

.debug-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.debug-panel-title {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(240, 243, 234, 0.82);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.debug-panel-toggle,
.debug-panel-button {
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 10px;
  background: rgba(255,255,255,0.018);
  color: rgba(232, 237, 226, 0.8);
}

.debug-panel-toggle:hover,
.debug-panel-button:hover,
.debug-panel-button.is-selected {
  color: #efe3bc;
  border-color: rgba(221,181,109,0.34);
  background: rgba(99, 83, 45, 0.14);
}

.debug-panel-button--danger {
  border-color: rgba(211, 119, 119, 0.28);
  color: rgba(245, 206, 206, 0.86);
}

.debug-panel-button--danger:hover {
  border-color: rgba(211, 119, 119, 0.52);
  background: rgba(106, 42, 42, 0.22);
}

.debug-panel-content {
  display: grid;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.debug-panel-line {
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.35;
}

.debug-panel-line strong {
  color: var(--accent-soft);
}

.debug-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.research-panel-toggle {
  position: fixed;
  left: 12px;
  top: 50%;
  z-index: 18;
  min-width: 44px;
  min-height: 164px;
  padding: 14px 10px;
  border: 1px solid rgba(226, 234, 224, 0.14);
  border-radius: 14px;
  background: rgba(23, 29, 26, 0.72);
  color: var(--accent-soft);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: translateY(-50%);
}

.research-panel-toggle:hover {
  border-color: rgba(221, 181, 109, 0.36);
  background: rgba(38, 45, 40, 0.86);
}

.shop-panel-toggle {
  position: fixed;
  right: 12px;
  top: 144px;
  z-index: 18;
  min-height: 38px;
  padding: 9px 15px;
  border: 1px solid rgba(226, 234, 224, 0.14);
  border-radius: 999px;
  background: rgba(23, 29, 26, 0.78);
  color: var(--accent-soft);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.shop-panel-toggle:hover {
  border-color: rgba(221, 181, 109, 0.36);
  background: rgba(38, 45, 40, 0.86);
}

.shop-panel {
  position: fixed;
  right: 12px;
  top: 190px;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 214px);
  z-index: 27;
}

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

.shop-panel-shell {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(23, 29, 26, 0.9);
  overflow: hidden;
}

.shop-subtitle,
.shop-status {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.35;
}

.shop-status {
  padding: 8px 10px;
  border: 1px solid rgba(221, 181, 109, 0.22);
  border-radius: 10px;
  background: rgba(68, 53, 28, 0.2);
}

.shop-product-grid {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 420px);
  overflow-y: auto;
  padding-right: 4px;
}

.shop-owned-section {
  display: grid;
  gap: 8px;
}

.shop-owned-section h3 {
  margin: 0;
  color: var(--accent-soft);
  font-size: 13px;
}

.shop-owned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-owned-grid {
  max-height: 184px;
}

.shop-owned-card {
  border-color: rgba(221, 181, 109, 0.2);
}

.shop-active-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
}

.shop-product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(226, 234, 224, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.shop-product-copy strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--accent-soft);
}

.shop-product-copy p {
  margin: 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.35;
}

.shop-product-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.shop-product-actions span {
  color: var(--text-soft);
  font-size: 11px;
}

.shop-buy-button {
  min-width: 92px;
}

.research-panel {
  position: fixed;
  left: 64px;
  top: 50%;
  transform: translateY(-50%);
  width: min(1360px, calc(100vw - 88px));
  max-height: calc(100vh - 32px);
  z-index: 25;
}

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

.research-panel-shell {
  padding: 16px;
  border: 1px solid rgba(226, 234, 224, 0.12);
  border-radius: 16px;
  background: rgba(23, 29, 26, 0.92);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.research-panel-header {
  margin-bottom: 14px;
}

.research-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  gap: 14px;
  min-height: 640px;
}

.research-tree-canvas,
.research-tree-sidepanel {
  min-width: 0;
  min-height: 0;
}

.research-tree-canvas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap: 10px;
  overflow: auto hidden;
  padding: 4px 2px 6px;
}

.research-tier-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 100%;
  padding: 10px;
  border: 1px solid rgba(226, 234, 224, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.research-tier-column h3 {
  margin: 0;
  font-size: 13px;
  color: var(--accent-soft);
}

.research-tier-groups {
  display: grid;
  gap: 8px;
}

.research-branch-group {
  display: grid;
  gap: 4px;
}

.research-branch-title {
  padding: 0 2px;
  color: rgba(214, 220, 208, 0.72);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.research-tree-sidepanel {
  overflow: auto;
  padding-right: 2px;
}

.research-detail-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.research-detail-group h4 {
  margin: 0;
  font-size: 12px;
  color: var(--accent-soft);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

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

.research-detail-card {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid rgba(226, 234, 224, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.research-detail-card strong {
  font-size: 13px;
}

.research-detail-card small {
  color: var(--text-soft);
  font-size: 11px;
}

.research-tree-sidepanel .character-section > p {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.35;
}

.build-toggle-button {
  position: absolute;
  top: 90px;
  right: 12px;
  z-index: 4;
  min-height: 42px;
  padding: 10px 16px;
  background: rgba(25, 31, 27, 0.3);
  color: var(--accent-soft);
}

.build-drawer, .character-panel, .building-panel, .resource-panel {
  position: absolute;
  top: 140px;
  z-index: 4;
  width: 296px;
  max-height: calc(100vh - 250px);
  padding: 8px;
  overflow: auto;
}
.build-drawer { right: 12px; }
.character-panel, .building-panel, .resource-panel {
  right: 12px;
  top: auto;
  bottom: 154px;
  max-height: calc(100vh - 174px);
}

.build-drawer-header, .character-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.build-drawer-header h2, .character-panel-header h2 { margin: 0; font-size: 17px; line-height: 1.2; }

.build-actions,
.character-panel-content {
  font-size: 12px;
}

.build-actions p, .character-panel-content p {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: 11.5px;
  line-height: 1.4;
}

.build-drawer .eyebrow,
.character-panel .eyebrow,
.building-panel .eyebrow,
.resource-panel .eyebrow {
  font-size: 10px;
  letter-spacing: 0.08em;
}

.build-drawer .primary-button,
.build-drawer .secondary-button,
.character-panel .primary-button,
.character-panel .secondary-button,
.building-panel .primary-button,
.building-panel .secondary-button,
.resource-panel .primary-button,
.resource-panel .secondary-button {
  font-size: 12px;
}

.build-drawer .stack-buttons strong,
.character-panel .stack-buttons strong,
.building-panel .stack-buttons strong,
.resource-panel .stack-buttons strong {
  font-size: 12.5px;
  line-height: 1.25;
}

.build-drawer .stack-buttons small,
.character-panel .stack-buttons small,
.building-panel .stack-buttons small,
.resource-panel .stack-buttons small {
  font-size: 10.5px;
  line-height: 1.35;
}
.stack-buttons { display: grid; gap: 6px; }
.build-button { display: flex; align-items: center; gap: 12px; text-align: left; }

.build-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

.build-icon::before { content: ""; position: absolute; }
.build-icon--wood_wall::before { inset: 6px; background: linear-gradient(90deg,#7b5738 0 20%,transparent 20% 28%,#7b5738 28% 48%,transparent 48% 56%,#7b5738 56% 76%,transparent 76% 84%,#7b5738 84% 100%); }
.build-icon--reinforced_wall::before { inset: 4px; background: linear-gradient(0deg,#8e6d47 0 60%,#4d5a62 60% 72%,#8e6d47 72% 100%); }
.build-icon--stone_wall::before { inset: 5px; background: linear-gradient(90deg,#90959d 0 48%,#6d737d 48% 52%,#90959d 52% 100%), linear-gradient(0deg,transparent 0 48%,#6d737d 48% 52%,transparent 52% 100%); }
.build-icon--fence::before { inset: 4px; background: linear-gradient(90deg,transparent 0 10%,#9b7249 10% 18%,transparent 18% 40%,#9b7249 40% 48%,transparent 48% 70%,#9b7249 70% 78%,transparent 78% 100%), linear-gradient(0deg,transparent 0 34%,#b88b57 34% 40%,transparent 40% 62%,#b88b57 62% 68%,transparent 68% 100%); }
.build-icon--door::before { inset: 4px 7px; border: 2px solid #8d6942; background: rgba(141,105,66,0.3); }
.build-icon--campfire::before { left: 8px; right: 8px; bottom: 5px; height: 12px; background: linear-gradient(45deg,#b07b41 0 44%,transparent 44% 56%,#b07b41 56% 100%), radial-gradient(circle at center,#f39d3c 0 35%,#ca542f 35% 70%,transparent 70% 100%); }
.build-icon--bed::before { left: 5px; right: 5px; bottom: 6px; height: 14px; background: linear-gradient(0deg,#7f5f40 0 28%,#b8b8b8 28% 100%); }
.build-icon--chest::before { inset: 6px; background: linear-gradient(0deg,#7a5938 0 60%,#9e7547 60% 100%); border: 1px solid rgba(0,0,0,0.25); }
.build-icon--farm_plot::before { inset: 5px; background: linear-gradient(0deg,#6d4b2d 0 100%); box-shadow: inset 0 0 0 1px rgba(160,126,86,0.8); }
.build-icon--workbench::before { inset: 6px 4px; background: linear-gradient(0deg,transparent 0 20%,#8d6a45 20% 30%,transparent 30% 100%), linear-gradient(90deg,transparent 0 18%,#8d6a45 18% 26%,transparent 26% 74%,#8d6a45 74% 82%,transparent 82% 100%), linear-gradient(0deg,#b28a5f 70%,transparent 70%); }

.character-grid { display: grid; gap: 8px; }
.character-grid--compact { gap: 6px; }
.character-section { padding: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); }
.character-section--compact { padding: 6px; }
.character-section h3 { margin: 0 0 7px; font-size: 11px; color: var(--accent-soft); letter-spacing: 0.03em; }
.stat-row, .need-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 5px; font-size: 11.5px; line-height: 1.35; }
.stat-row strong,
.need-row strong {
  font-size: 11.5px;
}
.injury-list { display: grid; gap: 6px; margin: 6px 0 8px; }
.injury-entry { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 12px; color: rgba(255,255,255,0.86); }
.injury-note { display: block; margin-top: 2px; font-size: 11px; color: rgba(255,255,255,0.62); font-weight: 400; }
.orders-tab-panel .character-section { padding: 8px; }
.orders-tab-panel .character-section h3 { margin-bottom: 6px; font-size: 13px; }
.orders-tab-panel .stat-row,
.orders-tab-panel .need-row { gap: 8px; margin-bottom: 6px; font-size: 12px; }
.orders-tab-panel p { margin: 0 0 8px; font-size: 12px; line-height: 1.35; }
.priority-grid { display: grid; gap: 10px; }
.priority-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; }
.priority-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.priority-button {
  min-width: 30px;
  min-height: 28px;
  padding: 4px 6px;
  background: rgba(34,44,38,0.68);
  color: var(--text-main);
}
.priority-button.is-selected {
  color: var(--accent-soft);
  border-color: rgba(221,181,109,0.55);
  background: rgba(64, 54, 31, 0.5);
}
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.schedule-cell {
  min-height: 42px;
  padding: 6px;
  display: grid;
  gap: 2px;
  text-align: left;
  background: rgba(34,44,38,0.68);
  color: var(--text-main);
}
.schedule-cell span { font-size: 11px; opacity: 0.8; }
.schedule-cell strong { font-size: 11px; }
.schedule-cell--work { background: rgba(64, 54, 31, 0.5); }
.schedule-cell--rest { background: rgba(42, 61, 74, 0.5); }
.schedule-cell--sleep { background: rgba(48, 41, 68, 0.5); }
.schedule-cell.is-current { box-shadow: inset 0 0 0 1px rgba(240, 211, 122, 0.9); }
.need-bar { height: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2); margin-bottom: 8px; }
.need-fill { height: 100%; background: linear-gradient(90deg,#7cd49b,#d8d170); }

.orders-bar {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: min(430px, calc(100vw - 24px));
  padding: 5px;
  border: 1px solid rgba(216, 223, 209, 0.12);
  background:
    linear-gradient(180deg, rgba(28, 34, 31, 0.62) 0%, rgba(19, 24, 22, 0.56) 100%);
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.orders-bar.is-collapsed {
  width: min(150px, calc(100vw - 24px));
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.orders-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  padding: 2px;
}

.orders-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  flex: 1;
}

.orders-bar.is-collapsed .orders-tabs {
  display: none;
}

.orders-bar.is-collapsed .orders-header {
  justify-content: flex-start;
  padding: 0;
}

.orders-bar.is-collapsed .orders-collapse-button {
  min-width: 92px;
  min-height: 28px;
  background: rgba(18, 23, 20, 0.34);
  border-color: rgba(255,255,255,0.1);
}

.orders-tab-button,
.orders-collapse-button {
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 10.5px;
  line-height: 1.1;
  background: rgba(255,255,255,0.018);
  color: rgba(232, 237, 226, 0.72);
}

.orders-tab-button.is-active,
.orders-collapse-button:hover {
  color: #efe3bc;
  border-color: rgba(221,181,109,0.32);
  background: rgba(99, 83, 45, 0.14);
}

.orders-content {
  display: grid;
  gap: 5px;
}

.orders-left {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.orders-content--main .orders-left {
  display: grid;
}

.orders-tab-panel {
  min-height: 78px;
  max-height: 176px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(8, 12, 10, 0.12);
}

.orders-panel-grid {
  display: grid;
  gap: 6px;
}

.orders-colonist-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.orders-colonist-tabs--disabled {
  opacity: 0.56;
}

.orders-placeholder {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.35;
  font-size: 11px;
}

.research-tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 8px;
}

.research-tree-branches,
.research-tree-details {
  min-width: 0;
}

.knowledge-list {
  display: grid;
  gap: 3px;
}

.knowledge-entry {
  display: grid;
  gap: 1px;
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  background: rgba(255,255,255,0.018);
}

.knowledge-entry strong {
  display: block;
  font-size: 9px;
  line-height: 1.15;
  font-weight: 600;
}

.knowledge-entry.is-colony-known,
.knowledge-entry.is-known {
  border-color: rgba(196, 177, 120, 0.32);
  background: rgba(196, 177, 120, 0.08);
}

.knowledge-entry-button {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.knowledge-entry-button.is-selected {
  border-color: rgba(224, 208, 156, 0.55);
  background: rgba(224, 208, 156, 0.14);
}

.resource-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }

.resource-overview-item {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  background: rgba(255,255,255,0.018);
}

.resource-overview-item strong,
.resource-overview-item span {
  display: block;
  font-size: 12px;
  line-height: 1.3;
}

.resource-overview-item span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 11px;
}

.orders-tab-panel .priority-row {
  grid-template-columns: 96px 1fr;
  gap: 8px;
  font-size: 12px;
}

.orders-tab-panel .priority-buttons {
  gap: 4px;
}

.orders-tab-panel .priority-button {
  min-width: 24px;
  min-height: 24px;
  padding: 2px 5px;
  font-size: 11px;
}

.order-button {
  min-width: 64px;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 10px;
  background: rgba(255,255,255,0.018);
  color: rgba(232, 237, 226, 0.8);
}

.order-button.is-active {
  color: #efe3bc;
  border-color: rgba(221,181,109,0.34);
  background: rgba(99, 83, 45, 0.14);
}

.orders-submenu {
  display: grid;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(8, 12, 10, 0.12);
}

.orders-submenu-title {
  margin: 0;
  color: rgba(239, 227, 188, 0.88);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.orders-submenu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.submenu-button {
  min-height: 24px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 10.5px;
  background: rgba(255,255,255,0.018);
  color: rgba(232, 237, 226, 0.82);
}

.submenu-button.is-selected {
  color: #efe3bc;
  border-color: rgba(221,181,109,0.34);
  background: rgba(99, 83, 45, 0.14);
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 5px;
  margin-top: 5px;
}

.inventory-actions {
  margin-top: 6px;
}

.inventory-actions .submenu-button {
  width: 100%;
}

.inventory-grid--storage {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.storage-filter-details {
  margin-top: 6px;
}

.storage-filter-toggle {
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.storage-filter-list {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.storage-filter-option-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(17, 23, 19, 0.34);
  font-size: 11px;
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.storage-filter-option-button.is-selected {
  border-color: rgba(221,181,109,0.55);
  background: rgba(64, 54, 31, 0.42);
}

.storage-filter-mark {
  width: 16px;
  color: var(--accent-soft);
  text-align: center;
}

.inventory-slot {
  display: grid;
  gap: 6px;
  min-height: 58px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(17, 23, 19, 0.34);
}

.farm-toggle-row {
  margin-top: 6px;
}

.inventory-slot-label {
  font-size: 10px;
  color: var(--text-soft);
  line-height: 1.2;
}

.inventory-slot-empty {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 10px;
  color: rgba(233, 224, 206, 0.52);
}

.inventory-item-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 6px;
  border: 1px solid rgba(221,181,109,0.28);
  background: rgba(53, 44, 27, 0.38);
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
}

.inventory-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.inventory-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.inventory-item-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  image-rendering: pixelated;
}

.inventory-item-card strong,
.inventory-item-count,
.inventory-item-freshness {
  font-size: 10px;
  line-height: 1.2;
}

.inventory-item-card strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-item-count {
  justify-self: end;
  white-space: nowrap;
}

.inventory-item-freshness {
  color: rgba(233, 224, 206, 0.66);
}

.inventory-item-text small {
  font-size: 10px;
  line-height: 1.2;
  color: rgba(233, 224, 206, 0.66);
}

.inventory-item-card * {
  pointer-events: none;
}

.inventory-item-card.is-held {
  border-color: rgba(221,181,109,0.72);
  background: rgba(92, 71, 28, 0.52);
  box-shadow: 0 0 0 1px rgba(221,181,109,0.18) inset;
}

.inventory-drop-zone {
  transition: border-color 0.12s ease, background 0.12s ease;
}

.inventory-drop-zone:hover {
  border-color: rgba(221,181,109,0.28);
  background: rgba(35, 30, 20, 0.28);
}

.ground-drop-zone {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 8px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(18, 23, 20, 0.2);
}

.ground-drop-zone strong {
  font-size: 12px;
  color: var(--accent-soft);
}

.ground-drop-zone span {
  font-size: 11px;
  color: var(--text-soft);
  line-height: 1.35;
}

.submenu-hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.3;
}

.orders-status {
  min-height: 18px;
  padding: 0 2px 1px;
  color: rgba(205, 213, 199, 0.74);
  font-size: 10px;
  line-height: 1.3;
}

.orders-tab-panel .character-section {
  border-radius: 7px;
  border-color: rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.014);
}

.orders-tab-panel .character-section h3 {
  color: rgba(239, 227, 188, 0.84);
  font-size: 11px;
  letter-spacing: 0.03em;
}

.orders-tab-panel .inventory-grid {
  gap: 5px;
}

.orders-tab-panel::-webkit-scrollbar,
.building-panel::-webkit-scrollbar,
.character-panel::-webkit-scrollbar,
.resource-panel::-webkit-scrollbar {
  width: 8px;
}

.orders-tab-panel::-webkit-scrollbar-thumb,
.building-panel::-webkit-scrollbar-thumb,
.character-panel::-webkit-scrollbar-thumb,
.resource-panel::-webkit-scrollbar-thumb {
  background: rgba(201, 184, 142, 0.18);
  border-radius: 999px;
}

.interaction-menu {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 296px;
  z-index: 4;
  padding: 8px;
  font-size: 11.5px;
}
.interaction-grid { display: grid; gap: 8px; }

.screen-message {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  padding: 12px 18px;
  background: rgba(16,20,17,0.75);
  border: 1px solid rgba(221,181,109,0.5);
  color: var(--accent-soft);
  z-index: 5;
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12px;
  background: rgba(8,12,9,0.78);
  backdrop-filter: blur(5px);
  z-index: 10;
  pointer-events: auto;
  overflow: auto;
}
.overlay--center { align-items: center; }
.menu-card, .setup-card {
  width: min(1120px, 100%);
  border: 1px solid rgba(226,234,224,0.14);
  background: var(--panel-strong);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  pointer-events: auto;
  max-height: calc(100vh - 24px);
}
.menu-card { max-width: 520px; padding: 28px; text-align: center; }
.menu-card--main { max-width: 640px; padding: 34px 36px; }
.setup-card { padding: 24px; overflow: auto; }
.eyebrow { margin: 0 0 10px; color: var(--accent-soft); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.menu-card h2, .setup-card h2 { margin: 0 0 10px; font-size: 32px; }
.menu-brand { display: grid; gap: 6px; margin-bottom: 18px; }
.menu-card h1 {
  margin: 0;
  font-size: 52px;
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.menu-subtitle {
  margin: 0;
  color: rgba(240, 243, 234, 0.72);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 12px;
}
.menu-text { margin: 0 0 24px; color: var(--text-soft); line-height: 1.5; }
.menu-actions, .setup-footer { display: flex; gap: 12px; flex-wrap: wrap; }
.roadmap-view {
  max-height: min(46vh, 420px);
  overflow: auto;
  padding: 10px;
  margin-bottom: 18px;
  border: 1px solid rgba(226,234,224,0.1);
  background: rgba(11, 15, 13, 0.5);
  text-align: left;
}
.roadmap-content {
  margin: 0;
  white-space: pre-wrap;
  font: 12px/1.45 Consolas, monospace;
  color: var(--text-main);
}
.settings-language-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.language-button-active { border-color: rgba(221,181,109,0.55); background: rgba(221,181,109,0.18); color: var(--accent-soft); }
.primary-button, .secondary-button { min-height: 42px; padding: 10px 14px; transition: 0.15s ease; }
.primary-button { background: rgba(221,181,109,0.9); color: #23180a; }
.secondary-button { background: rgba(34,44,38,0.68); color: var(--text-main); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.setup-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.setup-warning { max-width: 360px; margin: 0; color: var(--danger); line-height: 1.4; }
.warning-ok { color: #97de9b; }
.setup-label { display: block; margin-bottom: 8px; color: var(--accent-soft); }
.setup-input {
  width: min(420px, 100%);
  min-height: 42px;
  margin-bottom: 8px;
  padding: 10px 12px;
  color: var(--text-main);
  background: rgba(12,16,13,0.55);
}
.setup-slug-preview { margin: 0 0 18px; color: var(--text-soft); }
.colonist-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.colonist-card { padding: 18px; border: 1px solid rgba(221,229,215,0.14); background: rgba(20,31,23,0.8); }
.colonist-card h3 { margin: 0 0 6px; }
.colonist-card p { margin: 0; color: var(--text-soft); }
.colonist-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.skills-grid { display: grid; gap: 8px; color: var(--text-main); font-size: 14px; }

.world-selection-card {
  width: min(1380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(99, 127, 96, 0.16), transparent 24%),
    radial-gradient(circle at bottom right, rgba(123, 104, 67, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(23, 30, 27, 0.98), rgba(18, 24, 21, 0.98));
}
.world-selection-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.88fr);
  gap: 24px;
  align-items: start;
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 4px;
}
.world-selection-summary {
  min-width: 260px;
  padding: 14px 16px;
  border: 1px solid rgba(226, 234, 224, 0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}
.world-selection-summary p,
.world-selection-region-info p { margin: 0 0 8px; color: var(--text-soft); }
.world-selection-summary strong,
.world-selection-region-info strong { color: var(--text-main); }
.world-map-atlas {
  min-width: 0;
}
.world-map-atlas__frame {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(226, 234, 224, 0.08);
  background:
    linear-gradient(180deg, rgba(51, 58, 52, 0.18), rgba(23, 29, 26, 0.52)),
    radial-gradient(circle at top, rgba(255, 232, 182, 0.08), transparent 42%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: auto;
}
.world-map-grid {
  display: grid;
  grid-template-columns: repeat(var(--world-grid-columns, 9), minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  min-width: 640px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(14, 18, 16, 0.22), rgba(42, 47, 43, 0.14)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 12px, transparent 12px 24px);
}
.world-map-grid--sites {
  grid-template-columns: repeat(var(--world-grid-columns, 60), 10px);
  width: fit-content;
  min-width: auto;
  gap: 1px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(14, 18, 16, 0.28), rgba(42, 47, 43, 0.14)),
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}
.world-map-cell {
  position: relative;
  min-width: 0;
  min-height: 88px;
  padding: 0;
  border: 1px solid rgba(226, 234, 224, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--world-fill) 0%, rgba(16,22,18,0.94) 100%);
  color: var(--text-main);
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.world-map-cell--super {
  min-height: 132px;
}
.world-map-cell--site {
  min-width: 10px;
  min-height: 10px;
  border-radius: 2px;
  border-color: rgba(255,255,255,0.04);
}
.world-map-cell--site:hover {
  transform: none;
  border-color: rgba(240, 211, 122, 0.42);
}
.world-map-cell:hover {
  transform: translateY(-1px);
  border-color: rgba(240, 211, 122, 0.3);
}
.world-map-cell__terrain,
.world-map-cell__marker,
.world-map-cell__shine {
  position: absolute;
  inset: 0;
  display: block;
}
.world-map-cell__terrain {
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,0.14), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,0.06), transparent 48%);
}
.world-map-cell__marker::before,
.world-map-cell__marker::after {
  content: "";
  position: absolute;
  opacity: 0.75;
}
.world-map-cell.marker-forest .world-map-cell__marker::before {
  left: 16%;
  bottom: 18%;
  width: 46%;
  height: 42%;
  background:
    radial-gradient(circle at 20% 60%, rgba(25, 43, 27, 0.38) 0 18%, transparent 19%),
    radial-gradient(circle at 58% 40%, rgba(25, 43, 27, 0.34) 0 16%, transparent 17%),
    radial-gradient(circle at 80% 78%, rgba(25, 43, 27, 0.28) 0 14%, transparent 15%);
}
.world-map-cell.marker-water .world-map-cell__marker::before,
.world-map-cell.marker-coast .world-map-cell__marker::before {
  left: 10%;
  right: 18%;
  bottom: 14%;
  height: 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120, 162, 179, 0.05), rgba(150, 203, 218, 0.3), rgba(82, 117, 125, 0.08));
}
.world-map-cell.marker-stone .world-map-cell__marker::before {
  right: 14%;
  bottom: 14%;
  width: 30%;
  height: 28%;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(196, 196, 186, 0.2), rgba(67, 72, 69, 0.08)),
    linear-gradient(45deg, transparent 0 42%, rgba(255,255,255,0.08) 43% 52%, transparent 53%);
}
.world-map-cell.marker-frost .world-map-cell__marker::before {
  right: 12%;
  top: 14%;
  width: 24%;
  height: 24%;
  background:
    linear-gradient(90deg, transparent 46%, rgba(220, 242, 255, 0.55) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(220, 242, 255, 0.55) 46% 54%, transparent 54%);
  transform: rotate(45deg);
}
.world-map-cell.marker-sun .world-map-cell__marker::before {
  right: 12%;
  top: 12%;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 226, 146, 0.55) 0 34%, rgba(255, 226, 146, 0.08) 35% 64%, transparent 65%);
}
.world-map-cell__shine {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(0deg, rgba(7,10,8,0.1), rgba(7,10,8,0.22));
}
.world-map-cell.is-selected {
  border-color: rgba(221,181,109,0.9);
  box-shadow:
    0 0 0 1px rgba(221,181,109,0.2),
    inset 0 0 0 1px rgba(221,181,109,0.58),
    0 14px 28px rgba(0, 0, 0, 0.28);
}
.world-map-cell--site.is-selected {
  box-shadow:
    inset 0 0 0 1px rgba(221,181,109,0.88),
    0 0 0 1px rgba(221,181,109,0.34);
}
.world-selection-sidebar {
  display: grid;
  gap: 12px;
}
.world-selection-panel {
  padding: 16px;
  border: 1px solid rgba(226, 234, 224, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)),
    rgba(17, 22, 19, 0.9);
}
.world-selection-panel h3 {
  margin: 0 0 12px;
  font-size: 26px;
}
.world-region-empty {
  margin: 0;
  color: rgba(233, 238, 229, 0.8);
  line-height: 1.55;
}
.world-region-hero {
  position: relative;
  min-height: 156px;
  margin-bottom: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 32%),
    linear-gradient(145deg, rgba(48, 77, 48, 0.72), rgba(17, 24, 20, 0.98));
}
.world-region-hero--steppe {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 32%), linear-gradient(145deg, rgba(122, 122, 68, 0.72), rgba(26, 24, 15, 0.98));
}
.world-region-hero--desert {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 32%), linear-gradient(145deg, rgba(145, 112, 58, 0.76), rgba(29, 21, 14, 0.98));
}
.world-region-hero--ice_wasteland {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent 32%), linear-gradient(145deg, rgba(97, 118, 140, 0.76), rgba(18, 23, 29, 0.98));
}
.world-region-hero--swamp {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 32%), linear-gradient(145deg, rgba(67, 95, 72, 0.78), rgba(17, 24, 20, 0.98));
}
.world-region-hero--taiga {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 32%), linear-gradient(145deg, rgba(40, 72, 63, 0.8), rgba(15, 23, 20, 0.98));
}
.world-region-hero__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(255,255,255,0.14), transparent 20%),
    linear-gradient(180deg, transparent, rgba(8, 11, 9, 0.62));
}
.world-region-hero__content {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
}
.world-region-hero__eyebrow,
.world-region-hero__subtitle {
  margin: 0 0 6px;
  color: rgba(237, 241, 231, 0.84);
}
.world-region-hero__eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.world-region-hero__subtitle {
  font-size: 13px;
}
.world-region-hero h3 {
  margin: 0 0 6px;
  font-size: 28px;
}
.world-region-aspects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.world-region-aspect,
.world-region-meter {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
}
.world-region-aspect span,
.world-region-meter span,
.world-region-section__title,
.world-region-confirm-hint {
  display: block;
  color: rgba(214, 220, 208, 0.8);
}
.world-region-aspect span,
.world-region-meter span,
.world-region-section__title {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.world-region-aspect strong,
.world-region-meter strong {
  display: block;
  margin-top: 4px;
  color: var(--text-main);
}
.world-region-section {
  margin-bottom: 14px;
}
.world-region-tags,
.world-region-meters {
  display: grid;
  gap: 8px;
}
.world-region-tags {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.world-region-tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(221,181,109,0.18);
  background: rgba(94, 79, 44, 0.14);
  color: rgba(240, 236, 224, 0.88);
  font-size: 12px;
}
.world-region-meter--high strong { color: #ece0b8; }
.world-region-meter--steady strong { color: #d6e3d1; }
.world-region-meter--low strong { color: #d8d0b1; }
.world-region-meter--scarce strong { color: #d7b6b6; }
.world-region-flavor {
  margin: 0 0 12px;
  color: rgba(231, 235, 226, 0.88);
  line-height: 1.55;
}
.world-region-confirm-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}
.world-selection-panel-actions {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.world-selection-panel-actions .secondary-button,
.world-selection-panel-actions .primary-button {
  width: 100%;
}
.world-selection-card .setup-footer {
  gap: 10px;
  flex-wrap: wrap;
}

.setup-footer {
  padding-top: 12px;
}

.world-selection-card .setup-footer {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(226, 234, 224, 0.12);
  background: rgba(27, 34, 30, 0.96);
}

.trade-panel {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 24px));
  z-index: 26;
}

.expedition-panel {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(1120px, calc(100vw - 24px));
  z-index: 26;
  pointer-events: auto;
}

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

.expedition-panel-shell {
  padding: 14px;
  border: 1px solid rgba(226, 234, 224, 0.12);
  border-radius: 16px;
  background: rgba(23, 29, 26, 0.9);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.expedition-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
  gap: 12px;
}

.expedition-panel-layout--draft {
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.78fr) minmax(250px, 0.78fr);
}

.expedition-panel-block,
.expedition-event-block {
  min-height: 210px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.028);
}

.expedition-panel-block h3,
.expedition-event-block h3 {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.25;
}

.expedition-destination-grid,
.expedition-colonist-grid,
.expedition-option-grid,
.expedition-cargo-grid,
.expedition-supply-grid {
  display: grid;
  gap: 8px;
}

.expedition-destination-carousel {
  position: relative;
  min-height: 340px;
  display: block;
}

.expedition-destination-stage {
  min-width: 0;
  min-height: 340px;
  height: 100%;
}

.expedition-destination-grid--carousel {
  grid-template-columns: 1fr;
  min-height: 340px;
}

.expedition-destination-grid--carousel > .expedition-destination-card:not(.is-selected) {
  display: none;
}

.expedition-destination-grid--carousel > .expedition-destination-card.is-selected {
  min-height: 340px;
}

.expedition-supply-grid {
  align-content: start;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}

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

.expedition-destination-card,
.expedition-colonist-card,
.expedition-option-card {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.024);
  color: rgba(232, 237, 226, 0.84);
}

.expedition-destination-card--art {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 18, 17, 0.18) 0%, rgba(14, 18, 17, 0.56) 56%, rgba(14, 18, 17, 0.88) 100%),
    var(--expedition-card-art-image),
    rgba(255,255,255,0.024);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.expedition-destination-card.is-selected,
.expedition-colonist-card.is-selected {
  border-color: rgba(221, 181, 109, 0.36);
  background: rgba(99, 83, 45, 0.14);
  color: #efe3bc;
}

.expedition-destination-card--art.is-selected {
  background:
    linear-gradient(180deg, rgba(73, 55, 23, 0.22) 0%, rgba(48, 38, 17, 0.52) 48%, rgba(16, 13, 8, 0.86) 100%),
    var(--expedition-card-art-image),
    rgba(99, 83, 45, 0.14);
}

.expedition-destination-card--hero {
  min-height: 340px;
  align-content: end;
  padding: 18px 18px 20px;
}

.expedition-route-badge {
  align-self: start;
  justify-self: start;
  margin-bottom: auto;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(12, 17, 15, 0.62);
  color: rgba(241, 228, 190, 0.94);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.expedition-destination-card--hero strong,
.expedition-destination-card--hero em,
.expedition-destination-card--hero span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42);
}

.expedition-destination-card--hero strong {
  font-size: 18px;
  line-height: 1.18;
}

.expedition-destination-card--hero em {
  font-size: 11px;
  line-height: 1.35;
}

.expedition-destination-card--hero .expedition-route-meta,
.expedition-destination-card--hero .expedition-route-estimate {
  max-width: min(560px, 100%);
}

.expedition-carousel-button {
  position: absolute;
  top: 14px;
  z-index: 3;
  min-width: 34px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 18px;
  line-height: 1;
  border-radius: 10px;
  background: rgba(16, 21, 18, 0.44);
  backdrop-filter: blur(6px);
}

.expedition-carousel-button[data-expedition-direction="prev"] {
  left: 14px;
}

.expedition-carousel-button[data-expedition-direction="next"] {
  right: 14px;
}

.expedition-carousel-button:hover {
  background: rgba(33, 40, 35, 0.62);
}

.expedition-colonist-card.is-static {
  cursor: default;
}

.expedition-colonist-card.is-packed {
  border-color: rgba(121, 182, 120, 0.34);
  background: rgba(43, 74, 43, 0.16);
}

.expedition-colonist-card.is-packing {
  border-color: rgba(221, 181, 109, 0.24);
}

.expedition-colonist-card strong {
  font-size: 11.5px;
  line-height: 1.25;
}

.expedition-colonist-card span {
  font-size: 10px;
  line-height: 1.3;
}

.expedition-member-state {
  color: var(--accent-soft);
  font-size: 10.5px;
}

.expedition-duration-row,
.expedition-return-row,
.expedition-cargo-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.expedition-duration-row {
  margin-top: 12px;
}

.expedition-duration-row label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-soft);
}

.expedition-duration-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  background: rgba(18,24,21,0.45);
}

.expedition-duration-row > span:last-child {
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-soft);
}

.expedition-duration-input {
  width: 72px;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(18,24,21,0.45);
  color: rgba(232, 237, 226, 0.9);
}

.expedition-duration-value {
  min-width: 28px;
  text-align: center;
  font-size: 12px;
  color: rgba(232, 237, 226, 0.94);
}

.expedition-stepper-button {
  min-width: 28px;
  min-height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
}

.expedition-hint {
  margin: 8px 0 0;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.4;
}

.expedition-destination-carousel + .expedition-hint,
.expedition-destination-carousel + .expedition-hint + .expedition-hint {
  display: none;
}

.expedition-supply-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.024);
}

.expedition-supply-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.expedition-supply-meta strong {
  font-size: 11.5px;
  color: rgba(232, 237, 226, 0.88);
}

.expedition-supply-meta span {
  font-size: 10.5px;
  color: var(--text-soft);
}

.expedition-destination-card em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--accent-soft);
  opacity: 0.9;
}

.expedition-route-meta {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.expedition-route-meta span {
  font-size: 10.5px;
  color: var(--text-soft);
  line-height: 1.35;
}

.expedition-route-estimate {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--accent-soft);
  line-height: 1.35;
}

.expedition-supply-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.expedition-supply-controls .secondary-button {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
}

.expedition-supply-count {
  min-width: 22px;
  text-align: center;
  font-size: 11.5px;
  color: var(--accent-soft);
}

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

.trade-panel-shell {
  padding: 14px;
  border: 1px solid rgba(226, 234, 224, 0.12);
  border-radius: 16px;
  background: rgba(23, 29, 26, 0.88);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.trade-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.trade-panel-header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.trade-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(228px, 0.78fr) minmax(0, 1fr);
  gap: 12px;
}

.trade-column,
.trade-offer-block {
  min-height: 220px;
  border: 1px solid rgba(226, 234, 224, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.trade-offer-block {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.trade-column-header,
.trade-offer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 8px;
}

.trade-column-header h3,
.trade-offer-header h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
}

.trade-column-grid,
.trade-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 7px;
  max-height: min(452px, 54vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 12px 8px;
}

.trade-center {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.trade-offer-grid {
  max-height: min(220px, 26vh);
}

.trade-item-card,
.trade-offer-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 72px;
  padding: 10px 11px;
  border: 1px solid rgba(190, 208, 202, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.trade-item-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.trade-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.trade-item-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.trade-item-card:hover,
.trade-offer-card:hover {
  background: rgba(255, 255, 255, 0.085);
  border-color: rgba(214, 229, 223, 0.2);
}

.trade-item-card strong,
.trade-offer-card strong {
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trade-item-card span,
.trade-item-card em,
.trade-offer-card span,
.trade-offer-card em {
  font-size: 12px;
  font-style: normal;
  opacity: 0.84;
}

.trade-confirm-button {
  width: 100%;
}

.trade-balance {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font-size: 13px;
}

.trade-balance.is-valid {
  color: #a8dfb5;
}

.trade-balance.is-invalid {
  color: #e1a7a7;
}

.trade-panel-empty {
  margin: 0;
  padding: 3px 0;
  opacity: 0.72;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .world-selection-layout {
    grid-template-columns: 1fr;
  }
  .world-selection-sidebar {
    grid-template-columns: 1fr;
  }
  .world-region-aspects {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .hud-bar { flex-direction: column; }
  .debug-panel {
    width: min(280px, calc(100vw - 24px));
    margin-left: 0;
  }
  .research-panel-toggle {
    left: auto;
    right: 12px;
    top: 88px;
    transform: none;
    min-height: 40px;
    padding: 10px 14px;
    writing-mode: horizontal-tb;
  }
  .shop-panel-toggle {
    top: 136px;
  }
  .shop-panel {
    left: 12px;
    right: 12px;
    top: 184px;
    width: auto;
    max-height: calc(100vh - 208px);
  }
  .shop-product-grid {
    max-height: calc(100vh - 360px);
  }
  .research-panel {
    left: 12px;
    right: 12px;
    top: 136px;
    transform: none;
    width: auto;
    max-height: calc(100vh - 148px);
  }
  .research-panel-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .research-tree-canvas {
    grid-auto-columns: minmax(220px, 1fr);
    max-height: 42vh;
    overflow: auto;
  }
    .setup-header { flex-direction: column; }
    .menu-card, .setup-card { max-height: calc(100vh - 16px); }
    .colonist-cards { grid-template-columns: 1fr; }
    .world-map-grid--sites {
      grid-template-columns: repeat(var(--world-grid-columns, 60), 8px);
    }
    .orders-bar, .build-drawer, .character-panel, .building-panel, .resource-panel, .interaction-menu {
      width: calc(100vw - 24px);
      left: 12px;
    right: 12px;
  }
  .trade-panel {
    width: calc(100vw - 24px);
  }
  .expedition-panel {
    width: calc(100vw - 24px);
  }
  .expedition-panel-layout {
    grid-template-columns: 1fr;
  }
  .expedition-panel-layout--draft {
    grid-template-columns: 1fr;
  }
  .trade-panel-layout {
    grid-template-columns: 1fr;
  }
  .build-drawer { top: 140px; }
  .character-panel, .building-panel, .resource-panel { bottom: 160px; top: auto; }
  .orders-bar { left: 12px; min-width: auto; width: calc(100vw - 24px); }
  .orders-bar.is-collapsed { width: calc(100vw - 24px); }
  .orders-tabs { grid-template-columns: 1fr 1fr; }
  .orders-colonist-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
  @media (max-width: 720px) {
    .overlay { padding: 8px; }
    .setup-card { padding: 16px; }
    .world-map-grid--sites {
      grid-template-columns: repeat(var(--world-grid-columns, 60), 6px);
    }
    .world-region-aspects,
    .world-region-tags {
      grid-template-columns: 1fr;
    }
  .orders-tabs { grid-template-columns: 1fr; }
  .orders-colonist-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-grid--storage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-product-card {
    grid-template-columns: 1fr;
  }
  .shop-product-actions {
    justify-items: stretch;
  }
  .world-map-cell { min-height: 72px; }
    .world-selection-panel h3 { font-size: 20px; }
    .setup-footer {
      flex-direction: column;
    align-items: stretch;
  }
  .primary-button, .secondary-button {
    width: 100%;
  }
}