From 2d8c5355bb46e2cb377ca7d7e96192cefe7406ea Mon Sep 17 00:00:00 2001
From: Azgaar <maxganiev@yandex.ru>
Date: Thu, 19 May 2022 00:19:24 +0300
Subject: [PATCH] load dynamically cultures editor

---
 index.css                                  |   10 -
 index.html                                 |   88 +-
 modules/dynamic/editors/cultures-editor.js | 1017 ++++++++++++++++++++
 modules/dynamic/editors/states-editor.js   |   26 +-
 modules/ui/biomes-editor.js                |    6 +-
 modules/ui/coastline-editor.js             |    6 +-
 modules/ui/cultures-editor.js              |  979 -------------------
 modules/ui/editors.js                      |   30 +-
 modules/ui/general.js                      |   15 +-
 modules/ui/lakes-editor.js                 |    7 +-
 modules/ui/measurers.js                    |    3 +-
 modules/ui/provinces-editor.js             |    8 +-
 modules/ui/religions-editor.js             |    6 +-
 modules/ui/zones-editor.js                 |    7 +-
 versioning.js                              |    2 +-
 15 files changed, 1091 insertions(+), 1119 deletions(-)
 create mode 100644 modules/dynamic/editors/cultures-editor.js
 delete mode 100644 modules/ui/cultures-editor.js

diff --git a/index.css b/index.css
index 848d8420..f070c939 100644
--- a/index.css
+++ b/index.css
@@ -1452,15 +1452,6 @@ div.states > .small {
   font-size: 0.9em;
 }
 
-div.states > .cultureName {
-  width: 7em;
-}
-
-div.states > .culturePopulation {
-  width: 4em;
-  cursor: pointer;
-}
-
 div.states > select {
   width: 7em;
   cursor: pointer;
@@ -1471,7 +1462,6 @@ div.states > select {
   appearance: none;
 }
 
-div.states > .cultureBase,
 div.states > .burgName,
 div.states > .burgState,
 div.states > .burgCulture {
diff --git a/index.html b/index.html
index 6aac18d2..9a9c5582 100644
--- a/index.html
+++ b/index.html
@@ -107,7 +107,7 @@
         }
       }
     </style>
-    <link rel="stylesheet" href="index.css?v=15052022" />
+    <link rel="stylesheet" href="index.css?v=18052022" />
     <link rel="stylesheet" href="icons.css" />
     <link rel="stylesheet" href="libs/jquery-ui.css" />
   </head>
@@ -3343,73 +3343,6 @@
         </div>
       </div>
 
-      <div id="culturesEditor" class="dialog stable" style="display: none">
-        <div id="culturesHeader" class="header">
-          <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
-          <div style="left: 9.9em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
-          <div style="left: 14.5em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expan.&nbsp;</div>
-          <div style="left: 20.3em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
-          <div style="left: 29.1em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
-          <div style="left: 33em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">
-            Population&nbsp;
-          </div>
-          <div style="left: 39.5em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
-          <div style="left: 47em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">
-            Emblems&nbsp;
-          </div>
-        </div>
-        <div id="culturesBody" class="table" data-type="absolute"></div>
-
-        <div id="culturesFooter" class="totalLine">
-          <div data-tip="Cultures number" style="margin-left: 12px">Cultures:&nbsp;<span id="culturesFooterCultures">0</span></div>
-          <div data-tip="Total land cells number" style="margin-left: 12px">Cells:&nbsp;<span id="culturesFooterCells">0</span></div>
-          <div data-tip="Total land area" style="margin-left: 12px">Land Area:&nbsp;<span id="culturesFooterArea">0</span></div>
-          <div data-tip="Total population" style="margin-left: 12px">Population:&nbsp;<span id="culturesFooterPopulation">0</span></div>
-        </div>
-
-        <div id="culturesBottom">
-          <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
-          <button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
-          <button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
-          <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
-          <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
-          <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
-          <div id="culturesManuallyButtons" style="display: none">
-            <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic"
-              >Brush size:
-              <input
-                id="culturesManuallyBrush"
-                oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
-                type="range"
-                min="5"
-                max="99"
-                value="15"
-                style="width: 7em"
-              />
-              <input
-                id="culturesManuallyBrushNumber"
-                oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
-                type="number"
-                min="5"
-                max="99"
-                value="15"
-              /> </label
-            ><br />
-            <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
-            <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
-          </div>
-          <button id="culturesEditNamesBase" data-tip="Edit a database used for names generation" class="icon-font"></button>
-          <button id="culturesAdd" data-tip="Add a new culture. Hold Shift to add multiple" class="icon-plus"></button>
-          <button id="culturesExport" data-tip="Download cultures-related data" class="icon-download"></button>
-          <button id="culturesImport" data-tip="Upload cultures-related data" class="icon-upload"></button>
-          <button id="culturesRecalculate" data-tip="Recalculate cultures based on current values of growth-related attributes" class="icon-retweet"></button>
-          <span data-tip="Allow culture centers, expansion and type changes to take an immediate effect">
-            <input id="culturesAutoChange" class="checkbox" type="checkbox" />
-            <label for="culturesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-          </span>
-        </div>
-      </div>
-
       <div id="namesbaseEditor" class="dialog stable textual" style="display: none">
         <div id="namesbaseBasesTop">
           <span>Select base: </span>
@@ -6193,39 +6126,38 @@
     <script src="libs/alea.min.js"></script>
     <script src="modules/fonts.js?v=11052022"></script>
     <script src="modules/ui/layers.js"></script>
-    <script src="modules/ui/measurers.js"></script>
+    <script src="modules/ui/measurers.js?v=18052022"></script>
     <script src="modules/ui/stylePresets.js"></script>
 
-    <script src="modules/ui/general.js?v=15052022"></script>
+    <script src="modules/ui/general.js?v=18052022"></script>
     <script src="modules/ui/options.js?v=14052022"></script>
     <script src="main.js?v=15052022"></script>
 
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
-    <script defer src="modules/ui/editors.js?v=15052022"></script>
+    <script defer src="modules/ui/editors.js?v=18052022"></script>
     <script defer src="modules/ui/tools.js"></script>
     <script defer src="modules/ui/world-configurator.js"></script>
     <script defer src="modules/ui/heightmap-editor.js"></script>
-    <script defer src="modules/ui/provinces-editor.js"></script>
-    <script defer src="modules/ui/biomes-editor.js"></script>
-    <script defer src="modules/ui/cultures-editor.js"></script>
+    <script defer src="modules/ui/provinces-editor.js?v=18052022"></script>
+    <script defer src="modules/ui/biomes-editor.js?v=18052022"></script>
     <script defer src="modules/ui/namesbase-editor.js"></script>
     <script defer src="modules/ui/elevation-profile.js"></script>
     <script defer src="modules/ui/temperature-graph.js"></script>
     <script defer src="modules/ui/routes-editor.js"></script>
     <script defer src="modules/ui/ice-editor.js"></script>
-    <script defer src="modules/ui/lakes-editor.js"></script>
-    <script defer src="modules/ui/coastline-editor.js"></script>
+    <script defer src="modules/ui/lakes-editor.js?v=18052022"></script>
+    <script defer src="modules/ui/coastline-editor.js?v=18052022"></script>
     <script defer src="modules/ui/labels-editor.js"></script>
     <script defer src="modules/ui/rivers-editor.js"></script>
     <script defer src="modules/ui/rivers-creator.js"></script>
     <script defer src="modules/ui/relief-editor.js"></script>
-    <script defer src="modules/ui/religions-editor.js"></script>
+    <script defer src="modules/ui/religions-editor.js?v=18052022"></script>
     <script defer src="modules/ui/burg-editor.js"></script>
     <script defer src="modules/ui/units-editor.js"></script>
     <script defer src="modules/ui/notes-editor.js"></script>
     <script defer src="modules/ui/diplomacy-editor.js"></script>
-    <script defer src="modules/ui/zones-editor.js"></script>
+    <script defer src="modules/ui/zones-editor.js?v=18052022"></script>
     <script defer src="modules/ui/burgs-overview.js"></script>
     <script defer src="modules/ui/rivers-overview.js"></script>
     <script defer src="modules/ui/military-overview.js"></script>
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
new file mode 100644
index 00000000..fddb8bb5
--- /dev/null
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -0,0 +1,1017 @@
+const body = insertEditorHtml();
+addListeners();
+
+const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
+
+export function open() {
+  closeDialogs("#culturesEditor, .stable");
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  if (layerIsOn("toggleStates")) toggleStates();
+  if (layerIsOn("toggleBiomes")) toggleBiomes();
+  if (layerIsOn("toggleReligions")) toggleReligions();
+  if (layerIsOn("toggleProvinces")) toggleProvinces();
+
+  refreshCulturesEditor();
+
+  $("#culturesEditor").dialog({
+    title: "Cultures Editor",
+    resizable: false,
+    width: fitContent(),
+    close: closeCulturesEditor,
+    position: {my: "right top", at: "right-10 top+10", of: "svg"}
+  });
+  body.focus();
+}
+
+function insertEditorHtml() {
+  const editorHtml = /* html */ `<div id="culturesEditor" class="dialog stable" style="display: none">
+    <div id="culturesHeader" class="header">
+      <div style="left: 1.8em" data-tip="Click to sort by culture name" class="sortable alphabetically" data-sortby="name">Culture&nbsp;</div>
+      <div style="left: 9.9em" data-tip="Click to sort by type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+      <div style="left: 16.2em" data-tip="Click to sort by culture namesbase" class="sortable" data-sortby="base">Namesbase&nbsp;</div>
+      <div style="left: 24.5em" data-tip="Click to sort by culture cells count" class="sortable hide" data-sortby="cells">Cells&nbsp;</div>
+      <div style="left: 29.8em" data-tip="Click to sort by expansionism" class="sortable hide" data-sortby="expansionism">Expansion&nbsp;</div>
+      <div style="left: 37.2em" data-tip="Click to sort by culture area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
+      <div style="left: 42.8em" data-tip="Click to sort by culture population" class="sortable hide icon-sort-number-down" data-sortby="population">Population&nbsp;</div>
+      <div style="left: 50.8em" data-tip="Click to sort by culture emblems shape" class="sortable alphabetically hide" data-sortby="emblems">Emblems&nbsp;</div>
+    </div>
+    <div id="culturesBody" class="table" data-type="absolute"></div>
+
+    <div id="culturesFooter" class="totalLine">
+      <div data-tip="Cultures number" style="margin-left: 12px">Cultures:&nbsp;<span id="culturesFooterCultures">0</span></div>
+      <div data-tip="Total land cells number" style="margin-left: 12px">Cells:&nbsp;<span id="culturesFooterCells">0</span></div>
+      <div data-tip="Total land area" style="margin-left: 12px">Land Area:&nbsp;<span id="culturesFooterArea">0</span></div>
+      <div data-tip="Total population" style="margin-left: 12px">Population:&nbsp;<span id="culturesFooterPopulation">0</span></div>
+    </div>
+
+    <div id="culturesBottom">
+      <button id="culturesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
+      <button id="culturesEditStyle" data-tip="Edit cultures style in Style Editor" class="icon-adjust"></button>
+      <button id="culturesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
+      <button id="culturesPercentage" data-tip="Toggle percentage / absolute values display mode" class="icon-percent"></button>
+      <button id="culturesHeirarchy" data-tip="Show cultures hierarchy tree" class="icon-sitemap"></button>
+      <button id="culturesManually" data-tip="Manually re-assign cultures" class="icon-brush"></button>
+      <div id="culturesManuallyButtons" style="display: none">
+        <label data-tip="Change brush size. Shortcut: + (increase), – (decrease)" class="italic">Brush size:
+          <input
+            id="culturesManuallyBrush"
+            oninput="tip('Brush size: '+this.value); culturesManuallyBrushNumber.value = this.value"
+            type="range"
+            min="5"
+            max="99"
+            value="15"
+            style="width: 7em"
+          />
+          <input
+            id="culturesManuallyBrushNumber"
+            oninput="tip('Brush size: '+this.value); culturesManuallyBrush.value = this.value"
+            type="number"
+            min="5"
+            max="99"
+            value="15"
+          /> </label><br />
+        <button id="culturesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
+        <button id="culturesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
+      </div>
+      <button id="culturesEditNamesBase" data-tip="Edit a database used for names generation" class="icon-font"></button>
+      <button id="culturesAdd" data-tip="Add a new culture. Hold Shift to add multiple" class="icon-plus"></button>
+      <button id="culturesExport" data-tip="Download cultures-related data" class="icon-download"></button>
+      <button id="culturesImport" data-tip="Upload cultures-related data" class="icon-upload"></button>
+      <button id="culturesRecalculate" data-tip="Recalculate cultures based on current values of growth-related attributes" class="icon-retweet"></button>
+      <span data-tip="Allow culture centers, expansion and type changes to take an immediate effect">
+        <input id="culturesAutoChange" class="checkbox" type="checkbox" />
+        <label for="culturesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
+      </span>
+    </div>
+  </div>`;
+
+  const dialogs = document.getElementById("dialogs");
+  dialogs.insertAdjacentHTML("beforeend", editorHtml);
+
+  return document.getElementById("culturesBody");
+}
+
+function addListeners() {
+  applySortingByHeader("culturesHeader");
+
+  document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
+  document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
+  document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
+  document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
+  document.getElementById("culturesHeirarchy").addEventListener("click", showHierarchy);
+  document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));
+  document.getElementById("culturesManually").addEventListener("click", enterCultureManualAssignent);
+  document.getElementById("culturesManuallyApply").addEventListener("click", applyCultureManualAssignent);
+  document.getElementById("culturesManuallyCancel").addEventListener("click", () => exitCulturesManualAssignment());
+  document.getElementById("culturesEditNamesBase").addEventListener("click", editNamesbase);
+  document.getElementById("culturesAdd").addEventListener("click", enterAddCulturesMode);
+  document.getElementById("culturesExport").addEventListener("click", downloadCulturesData);
+  document.getElementById("culturesImport").addEventListener("click", () => document.getElementById("culturesCSVToLoad").click());
+  document.getElementById("culturesCSVToLoad").addEventListener("change", uploadCulturesData);
+}
+
+function refreshCulturesEditor() {
+  culturesCollectStatistics();
+  culturesEditorAddLines();
+  drawCultureCenters();
+}
+
+function culturesCollectStatistics() {
+  const {cells, cultures, burgs} = pack;
+  cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
+
+  for (const i of cells.i) {
+    if (cells.h[i] < 20) continue;
+    const cultureId = cells.culture[i];
+    cultures[cultureId].cells += 1;
+    cultures[cultureId].area += cells.area[i];
+    cultures[cultureId].rural += cells.pop[i];
+    const burgId = cells.burg[i];
+    if (burgId) cultures[cultureId].urban += burgs[burgId].population;
+  }
+}
+
+function culturesEditorAddLines() {
+  const unit = getAreaUnit();
+  let lines = "";
+  let totalArea = 0;
+  let totalPopulation = 0;
+
+  const emblemShapeGroup = document.getElementById("emblemShape")?.selectedOptions[0]?.parentNode?.label;
+  const selectShape = emblemShapeGroup === "Diversiform";
+
+  for (const c of pack.cultures) {
+    if (c.removed) continue;
+    const area = getArea(c.area);
+    const rural = c.rural * populationRate;
+    const urban = c.urban * populationRate * urbanization;
+    const population = rn(rural + urban);
+    const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`;
+    totalArea += area;
+    totalPopulation += population;
+
+    if (!c.i) {
+      // Uncultured (neutral) line
+      lines += /* html */ `<div
+          class="states"
+          data-id=${c.i}
+          data-name="${c.name}"
+          data-color=""
+          data-cells=${c.cells}
+          data-area=${area}
+          data-population=${population}
+          data-base=${c.base}
+          data-type=""
+          data-expansionism=""
+          data-emblems="${c.shield}"
+        >
+          <svg width="11" height="11" class="placeholder"></svg>
+          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" style="width: 7em"
+            value="${c.name}" autocorrect="off" spellcheck="false" />
+          <span class="icon-cw placeholder"></span>
+          <select class="cultureType placeholder">${getTypeOptions(c.type)}</select>
+          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(c.base)}</select>
+          <span data-tip="Cells count" class="icon-check-empty hide"></span>
+          <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
+          <span class="icon-resize-full placeholder hide"></span>
+          <input class="cultureExpan placeholder hide" type="number" />
+          <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
+          <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
+          <span data-tip="${populationTip}" class="icon-male hide"></span>
+          <div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(population)}</div>
+          <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
+          ${getShapeOptions(selectShape, c.shield)}
+        </div>`;
+      continue;
+    }
+
+    lines += /* html */ `<div
+        class="states cultures"
+        data-id=${c.i}
+        data-name="${c.name}"
+        data-color="${c.color}"
+        data-cells=${c.cells}
+        data-area=${area}
+        data-population=${population}
+        data-base=${c.base}
+        data-type=${c.type}
+        data-expansionism=${c.expansionism}
+        data-emblems="${c.shield}"
+      >
+        <fill-box fill="${c.color}"></fill-box>
+        <input data-tip="Culture name. Click and type to change" class="cultureName" style="width: 7em"
+          value="${c.name}" autocorrect="off" spellcheck="false" />
+        <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
+        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">${getTypeOptions(c.type)}</select>
+        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">${getBaseOptions(c.base)}</select>
+        <span data-tip="Cells count" class="icon-check-empty hide"></span>
+        <div data-tip="Cells count" class="cultureCells hide" style="width: 4em">${c.cells}</div>
+        <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
+        <input
+          data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
+          class="cultureExpan hide"
+          type="number"
+          min="0"
+          max="99"
+          step=".1"
+          value=${c.expansionism}
+        />
+        <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
+        <div data-tip="Culture area" class="cultureArea hide" style="width: 6em">${si(area)} ${unit}</div>
+        <span data-tip="${populationTip}" class="icon-male hide"></span>
+        <div data-tip="${populationTip}" class="culturePopulation hide pointer" style="width: 5em">${si(population)}</div>
+        <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
+        ${getShapeOptions(selectShape, c.shield)}
+        <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
+      </div>`;
+  }
+  body.innerHTML = lines;
+
+  // update footer
+  document.getElementById("culturesFooterCultures").innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
+  document.getElementById("culturesFooterCells").innerHTML = pack.cells.h.filter(h => h >= 20).length;
+  document.getElementById("culturesFooterArea").innerHTML = `${si(totalArea)} ${unit}`;
+  document.getElementById("culturesFooterPopulation").innerHTML = si(totalPopulation);
+  document.getElementById("culturesFooterArea").dataset.area = totalArea;
+  document.getElementById("culturesFooterPopulation").dataset.population = totalPopulation;
+
+  // add listeners
+  body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseenter", cultureHighlightOn));
+  body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseleave", cultureHighlightOff));
+  body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectCultureOnLineClick));
+  body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", cultureChangeColor));
+  body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName));
+  body.querySelectorAll("div > span.icon-cw").forEach(el => el.addEventListener("click", cultureRegenerateName));
+  body.querySelectorAll("div > input.cultureExpan").forEach(el => el.addEventListener("input", cultureChangeExpansionism));
+  body.querySelectorAll("div > select.cultureType").forEach(el => el.addEventListener("change", cultureChangeType));
+  body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("change", cultureChangeBase));
+  body.querySelectorAll("div > select.cultureEmblems").forEach(el => el.addEventListener("change", cultureChangeEmblemsShape));
+  body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
+  body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", cultureRegenerateBurgs));
+  body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", cultureRemove));
+
+  culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
+
+  if (body.dataset.type === "percentage") {
+    body.dataset.type = "absolute";
+    togglePercentageMode();
+  }
+  applySorting(culturesHeader);
+  $("#culturesEditor").dialog({width: fitContent()});
+}
+
+function getTypeOptions(type) {
+  let options = "";
+  cultureTypes.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
+  return options;
+}
+
+function getBaseOptions(base) {
+  let options = "";
+  nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
+  return options;
+}
+
+function getShapeOptions(selectShape, selected) {
+  if (!selectShape) return "";
+
+  const shapes = Object.keys(COA.shields.types)
+    .map(type => Object.keys(COA.shields[type]))
+    .flat();
+  const options = shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
+  return `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureEmblems hide">${options}</select>`;
+}
+
+function cultureHighlightOn(event) {
+  const culture = +event.target.dataset.id;
+  const info = document.getElementById("cultureInfo");
+  if (info) {
+    d3.select("#hierarchy")
+      .select("g[data-id='" + culture + "'] > path")
+      .classed("selected", 1);
+    const c = pack.cultures[culture];
+    const rural = c.rural * populationRate;
+    const urban = c.urban * populationRate * urbanization;
+    const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
+    info.innerHTML = `${c.name} culture. ${c.type}. ${population}`;
+    tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
+  }
+
+  if (!layerIsOn("toggleCultures")) return;
+  if (customization) return;
+
+  const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
+  cults
+    .select("#culture" + culture)
+    .raise()
+    .transition(animate)
+    .attr("stroke-width", 2.5)
+    .attr("stroke", "#d0240f");
+  debug
+    .select("#cultureCenter" + culture)
+    .raise()
+    .transition(animate)
+    .attr("r", 8)
+    .attr("stroke", "#d0240f");
+}
+
+function cultureHighlightOff(event) {
+  const culture = +event.target.dataset.id;
+  const info = document.getElementById("cultureInfo");
+  if (info) {
+    d3.select("#hierarchy")
+      .select("g[data-id='" + culture + "'] > path")
+      .classed("selected", 0);
+    info.innerHTML = "&#8205;";
+    tip("");
+  }
+
+  if (!layerIsOn("toggleCultures")) return;
+  cults
+    .select("#culture" + culture)
+    .transition()
+    .attr("stroke-width", null)
+    .attr("stroke", null);
+  debug
+    .select("#cultureCenter" + culture)
+    .transition()
+    .attr("r", 6)
+    .attr("stroke", null);
+}
+
+function cultureChangeColor() {
+  const el = this;
+  const currentFill = el.getAttribute("fill");
+  const culture = +el.parentNode.dataset.id;
+
+  const callback = newFill => {
+    el.fill = newFill;
+    pack.cultures[culture].color = newFill;
+    cults
+      .select("#culture" + culture)
+      .attr("fill", newFill)
+      .attr("stroke", newFill);
+    debug.select("#cultureCenter" + culture).attr("fill", newFill);
+  };
+
+  openPicker(currentFill, callback);
+}
+
+function cultureChangeName() {
+  const culture = +this.parentNode.dataset.id;
+  this.parentNode.dataset.name = this.value;
+  pack.cultures[culture].name = this.value;
+  pack.cultures[culture].code = abbreviate(
+    this.value,
+    pack.cultures.map(c => c.code)
+  );
+}
+
+function cultureRegenerateName() {
+  const culture = +this.parentNode.dataset.id;
+  const name = Names.getCultureShort(culture);
+  this.parentNode.querySelector("input.cultureName").value = name;
+  pack.cultures[culture].name = name;
+}
+
+function cultureChangeExpansionism() {
+  const culture = +this.parentNode.dataset.id;
+  this.parentNode.dataset.expansionism = this.value;
+  pack.cultures[culture].expansionism = +this.value;
+  recalculateCultures();
+}
+
+function cultureChangeType() {
+  const culture = +this.parentNode.dataset.id;
+  this.parentNode.dataset.type = this.value;
+  pack.cultures[culture].type = this.value;
+  recalculateCultures();
+}
+
+function cultureChangeBase() {
+  const culture = +this.parentNode.dataset.id;
+  const v = +this.value;
+  this.parentNode.dataset.base = pack.cultures[culture].base = v;
+}
+
+function cultureChangeEmblemsShape() {
+  const culture = +this.parentNode.dataset.id;
+  const shape = this.value;
+  this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
+
+  const rerenderCOA = (id, coa) => {
+    const coaEl = document.getElementById(id);
+    if (!coaEl) return; // not rendered
+    coaEl.remove();
+    COArenderer.trigger(id, coa);
+  };
+
+  pack.states.forEach(state => {
+    if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return;
+    if (shape === state.coa.shield) return;
+    state.coa.shield = shape;
+    rerenderCOA("stateCOA" + state.i, state.coa);
+  });
+
+  pack.provinces.forEach(province => {
+    if (pack.cells.culture[province.center] !== culture || !province.i || province.removed || !province.coa || province.coa === "custom") return;
+    if (shape === province.coa.shield) return;
+    province.coa.shield = shape;
+    rerenderCOA("provinceCOA" + province.i, province.coa);
+  });
+
+  pack.burgs.forEach(burg => {
+    if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
+    if (shape === burg.coa.shield) return;
+    burg.coa.shield = shape;
+    rerenderCOA("burgCOA" + burg.i, burg.coa);
+  });
+}
+
+function changePopulation() {
+  const cultureId = +this.parentNode.dataset.id;
+  const culture = pack.cultures[cultureId];
+  if (!culture.cells) return tip("Culture does not have any cells, cannot change population", false, "error");
+
+  const rural = rn(culture.rural * populationRate);
+  const urban = rn(culture.urban * populationRate * urbanization);
+  const total = rural + urban;
+  const l = n => Number(n).toLocaleString();
+  const burgs = pack.burgs.filter(b => !b.removed && b.culture === cultureId);
+
+  alertMessage.innerHTML = /* html */ `Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
+      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
+      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
+
+  const update = function () {
+    const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
+    if (isNaN(totalNew)) return;
+    totalPop.innerHTML = l(totalNew);
+    totalPopPerc.innerHTML = rn((totalNew / total) * 100);
+  };
+
+  ruralPop.oninput = () => update();
+  urbanPop.oninput = () => update();
+
+  $("#alert").dialog({
+    resizable: false,
+    title: "Change culture population",
+    width: "24em",
+    buttons: {
+      Apply: function () {
+        applyPopulationChange(rural, urban, ruralPop.value, urbanPop.value, cultureId);
+        $(this).dialog("close");
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    },
+    position: {my: "center", at: "center", of: "svg"}
+  });
+}
+
+function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture) {
+  const ruralChange = newRural / oldRural;
+  if (isFinite(ruralChange) && ruralChange !== 1) {
+    const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
+    cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
+  }
+  if (!isFinite(ruralChange) && +newRural > 0) {
+    const points = newRural / populationRate;
+    const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
+    const pop = rn(points / cells.length);
+    cells.forEach(i => (pack.cells.pop[i] = pop));
+  }
+
+  const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
+  const urbanChange = newUrban / oldUrban;
+  if (isFinite(urbanChange) && urbanChange !== 1) {
+    burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
+  }
+  if (!isFinite(urbanChange) && +newUrban > 0) {
+    const points = newUrban / populationRate / urbanization;
+    const population = rn(points / burgs.length, 4);
+    burgs.forEach(b => (b.population = population));
+  }
+
+  refreshCulturesEditor();
+}
+
+function cultureRegenerateBurgs() {
+  if (customization === 4) return;
+
+  const cultureId = +this.parentNode.dataset.id;
+  const cBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.lock);
+  cBurgs.forEach(b => {
+    b.name = Names.getCulture(cultureId);
+    labels.select("[data-id='" + b.i + "']").text(b.name);
+  });
+  tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
+}
+
+function removeCulture(cultureId) {
+  cults.select("#culture" + cultureId).remove();
+  debug.select("#cultureCenter" + cultureId).remove();
+
+  const {burgs, states, cells, cultures} = pack;
+
+  burgs.filter(b => b.culture == cultureId).forEach(b => (b.culture = 0));
+  states.forEach(s => {
+    if (s.culture === cultureId) s.culture = 0;
+  });
+  cells.culture.forEach((c, i) => {
+    if (c === cultureId) cells.culture[i] = 0;
+  });
+  cultures[cultureId].removed = true;
+
+  const origin = cultures[cultureId].origin;
+  cultures.forEach(c => {
+    if (c.origin === cultureId) c.origin = origin;
+  });
+  refreshCulturesEditor();
+}
+
+function cultureRemove() {
+  if (customization === 4) return;
+  const cultureId = +this.parentNode.dataset.id;
+
+  alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
+  $("#alert").dialog({
+    resizable: false,
+    title: "Remove culture",
+    buttons: {
+      Remove: function () {
+        removeCulture(cultureId);
+        $(this).dialog("close");
+      },
+      Cancel: function () {
+        $(this).dialog("close");
+      }
+    }
+  });
+}
+
+function drawCultureCenters() {
+  const tooltip = "Drag to move the culture center (ancestral home)";
+  debug.select("#cultureCenters").remove();
+  const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
+
+  const data = pack.cultures.filter(c => c.i && !c.removed);
+  cultureCenters
+    .selectAll("circle")
+    .data(data)
+    .enter()
+    .append("circle")
+    .attr("id", d => "cultureCenter" + d.i)
+    .attr("data-id", d => d.i)
+    .attr("r", 6)
+    .attr("fill", d => d.color)
+    .attr("cx", d => pack.cells.p[d.center][0])
+    .attr("cy", d => pack.cells.p[d.center][1])
+    .on("mouseenter", d => {
+      tip(tooltip, true);
+      body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
+      cultureHighlightOn(event);
+    })
+    .on("mouseleave", d => {
+      tip("", true);
+      body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
+      cultureHighlightOff(event);
+    })
+    .call(d3.drag().on("start", cultureCenterDrag));
+}
+
+function cultureCenterDrag() {
+  const el = d3.select(this);
+  const c = +this.id.slice(13);
+  d3.event.on("drag", () => {
+    el.attr("cx", d3.event.x).attr("cy", d3.event.y);
+    const cell = findCell(d3.event.x, d3.event.y);
+    if (pack.cells.h[cell] < 20) return; // ignore dragging on water
+    pack.cultures[c].center = cell;
+    recalculateCultures();
+  });
+}
+
+function toggleLegend() {
+  if (legend.selectAll("*").size()) {
+    clearLegend();
+    return;
+  } // hide legend
+  const data = pack.cultures
+    .filter(c => c.i && !c.removed && c.cells)
+    .sort((a, b) => b.area - a.area)
+    .map(c => [c.i, c.color, c.name]);
+  drawLegend("Cultures", data);
+}
+
+function togglePercentageMode() {
+  if (body.dataset.type === "absolute") {
+    body.dataset.type = "percentage";
+    const totalCells = +culturesFooterCells.innerHTML;
+    const totalArea = +culturesFooterArea.dataset.area;
+    const totalPopulation = +culturesFooterPopulation.dataset.population;
+
+    body.querySelectorAll(":scope > div").forEach(function (el) {
+      el.querySelector(".cultureCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
+      el.querySelector(".cultureArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
+      el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
+    });
+  } else {
+    body.dataset.type = "absolute";
+    culturesEditorAddLines();
+  }
+}
+
+function showHierarchy() {
+  // build hierarchy tree
+  pack.cultures[0].origin = null;
+  const validCultures = pack.cultures.filter(c => !c.removed);
+  if (validCultures.length < 3) return tip("Not enough cultures to show hierarchy", false, "error");
+
+  const root = d3
+    .stratify()
+    .id(d => d.i)
+    .parentId(d => d.origin)(validCultures);
+  const treeWidth = root.leaves().length;
+  const treeHeight = root.height;
+  const width = treeWidth * 40;
+  const height = treeHeight * 60;
+
+  const margin = {top: 10, right: 10, bottom: -5, left: 10};
+  const w = width - margin.left - margin.right;
+  const h = height + 30 - margin.top - margin.bottom;
+  const treeLayout = d3.tree().size([w, h]);
+
+  // prepare svg
+  alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>";
+  const svg = d3
+    .select("#alertMessage")
+    .insert("svg", "#cultureInfo")
+    .attr("id", "hierarchy")
+    .attr("width", width)
+    .attr("height", height)
+    .style("text-anchor", "middle");
+  const graph = svg.append("g").attr("transform", `translate(10, -45)`);
+  const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
+  const nodes = graph.append("g");
+
+  renderTree();
+  function renderTree() {
+    treeLayout(root);
+    links
+      .selectAll("path")
+      .data(root.links())
+      .enter()
+      .append("path")
+      .attr("d", d => {
+        return (
+          "M" +
+          d.source.x +
+          "," +
+          d.source.y +
+          "C" +
+          d.source.x +
+          "," +
+          (d.source.y * 3 + d.target.y) / 4 +
+          " " +
+          d.target.x +
+          "," +
+          (d.source.y * 2 + d.target.y) / 3 +
+          " " +
+          d.target.x +
+          "," +
+          d.target.y
+        );
+      });
+
+    const node = nodes
+      .selectAll("g")
+      .data(root.descendants())
+      .enter()
+      .append("g")
+      .attr("data-id", d => d.data.i)
+      .attr("stroke", "#333333")
+      .attr("transform", d => `translate(${d.x}, ${d.y})`)
+      .on("mouseenter", () => cultureHighlightOn(event))
+      .on("mouseleave", () => cultureHighlightOff(event))
+      .call(d3.drag().on("start", d => dragToReorigin(d)));
+
+    node
+      .append("path")
+      .attr("d", d => {
+        if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
+        // small circle
+        else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
+        // circle
+        else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
+        // diamond
+        else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
+        // hexagon
+        else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
+        if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
+        if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
+        if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
+        return "M-11,-11h22v22h-22Z"; // square
+      })
+      .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
+      .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
+
+    node
+      .append("text")
+      .attr("dy", ".35em")
+      .text(d => (d.data.i ? d.data.code : ""));
+  }
+
+  $("#alert").dialog({
+    title: "Cultures tree",
+    width: fitContent(),
+    resizable: false,
+    position: {my: "left center", at: "left+10 center", of: "svg"},
+    buttons: {},
+    close: () => {
+      alertMessage.innerHTML = "";
+    }
+  });
+
+  function dragToReorigin(d) {
+    if (isCtrlClick(d3.event.sourceEvent)) return changeCode(d);
+
+    const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
+
+    d3.event.on("drag", () => {
+      originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
+    });
+
+    d3.event.on("end", () => {
+      originLine.remove();
+      const selected = graph.select("path.selected");
+      if (!selected.size()) return;
+      const culture = d.data.i;
+      const oldOrigin = d.data.origin;
+      let newOrigin = selected.datum().data.i;
+      if (newOrigin == oldOrigin) return; // already a child of the selected node
+      if (newOrigin == culture) newOrigin = 0; // move to top
+      if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
+      pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
+      showHierarchy(); // update hierarchy
+    });
+  }
+
+  function changeCode(d) {
+    prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
+      pack.cultures[d.data.i].code = v;
+      nodes
+        .select("g[data-id='" + d.data.i + "']")
+        .select("text")
+        .text(v);
+    });
+  }
+}
+
+function recalculateCultures(must) {
+  if (!must && !culturesAutoChange.checked) return;
+
+  pack.cells.culture = new Uint16Array(pack.cells.i.length);
+  pack.cultures.forEach(function (c) {
+    if (!c.i || c.removed) return;
+    pack.cells.culture[c.center] = c.i;
+  });
+
+  Cultures.expand();
+  drawCultures();
+  pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
+  refreshCulturesEditor();
+  document.querySelector("input.cultureExpan").focus(); // to not trigger hotkeys
+}
+
+function enterCultureManualAssignent() {
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  customization = 4;
+  cults.append("g").attr("id", "temp");
+  document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
+  document.getElementById("culturesManuallyButtons").style.display = "inline-block";
+  debug.select("#cultureCenters").style("display", "none");
+
+  culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
+  culturesFooter.style.display = "none";
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+  $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+  tip("Click on culture to select, drag the circle to change culture", true);
+  viewbox
+    .style("cursor", "crosshair")
+    .on("click", selectCultureOnMapClick)
+    .call(d3.drag().on("start", dragCultureBrush))
+    .on("touchmove mousemove", moveCultureBrush);
+
+  body.querySelector("div").classList.add("selected");
+}
+
+function selectCultureOnLineClick(i) {
+  if (customization !== 4) return;
+  body.querySelector("div.selected").classList.remove("selected");
+  this.classList.add("selected");
+}
+
+function selectCultureOnMapClick() {
+  const point = d3.mouse(this);
+  const i = findCell(point[0], point[1]);
+  if (pack.cells.h[i] < 20) return;
+
+  const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
+  const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
+
+  body.querySelector("div.selected").classList.remove("selected");
+  body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
+}
+
+function dragCultureBrush() {
+  const radius = +culturesManuallyBrush.value;
+
+  d3.event.on("drag", () => {
+    if (!d3.event.dx && !d3.event.dy) return;
+    const p = d3.mouse(this);
+    moveCircle(p[0], p[1], radius);
+
+    const found = radius > 5 ? findAll(p[0], p[1], radius) : [findCell(p[0], p[1], radius)];
+    const selection = found.filter(isLand);
+    if (selection) changeCultureForSelection(selection);
+  });
+}
+
+function changeCultureForSelection(selection) {
+  const temp = cults.select("#temp");
+  const selected = body.querySelector("div.selected");
+
+  const cultureNew = +selected.dataset.id;
+  const color = pack.cultures[cultureNew].color || "#ffffff";
+
+  selection.forEach(function (i) {
+    const exists = temp.select("polygon[data-cell='" + i + "']");
+    const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
+    if (cultureNew === cultureOld) return;
+
+    // change of append new element
+    if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
+    else
+      temp.append("polygon").attr("data-cell", i).attr("data-culture", cultureNew).attr("points", getPackPolygon(i)).attr("fill", color).attr("stroke", color);
+  });
+}
+
+function moveCultureBrush() {
+  showMainTip();
+  const point = d3.mouse(this);
+  const radius = +culturesManuallyBrush.value;
+  moveCircle(point[0], point[1], radius);
+}
+
+function applyCultureManualAssignent() {
+  const changed = cults.select("#temp").selectAll("polygon");
+  changed.each(function () {
+    const i = +this.dataset.cell;
+    const c = +this.dataset.culture;
+    pack.cells.culture[i] = c;
+    if (pack.cells.burg[i]) pack.burgs[pack.cells.burg[i]].culture = c;
+  });
+
+  if (changed.size()) {
+    drawCultures();
+    refreshCulturesEditor();
+  }
+  exitCulturesManualAssignment();
+}
+
+function exitCulturesManualAssignment(close) {
+  customization = 0;
+  cults.select("#temp").remove();
+  removeCircle();
+  document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
+  document.getElementById("culturesManuallyButtons").style.display = "none";
+
+  culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
+  culturesFooter.style.display = "block";
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
+
+  debug.select("#cultureCenters").style("display", null);
+  restoreDefaultEvents();
+  clearMainTip();
+  const selected = body.querySelector("div.selected");
+  if (selected) selected.classList.remove("selected");
+}
+
+function enterAddCulturesMode() {
+  if (this.classList.contains("pressed")) return exitAddCultureMode();
+
+  customization = 9;
+  this.classList.add("pressed");
+  tip("Click on the map to add a new culture", true);
+  viewbox.style("cursor", "crosshair").on("click", addCulture);
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
+}
+
+function exitAddCultureMode() {
+  customization = 0;
+  restoreDefaultEvents();
+  clearMainTip();
+  body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
+  if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
+}
+
+function addCulture() {
+  const point = d3.mouse(this);
+  const center = findCell(point[0], point[1]);
+
+  if (pack.cells.h[center] < 20) return tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
+  const occupied = pack.cultures.some(c => !c.removed && c.center === center);
+  if (occupied) return tip("This cell is already a culture center. Please select a different cell", false, "error");
+
+  if (d3.event.shiftKey === false) exitAddCultureMode();
+  Cultures.add(center);
+
+  drawCultureCenters();
+  culturesEditorAddLines();
+}
+
+function downloadCulturesData() {
+  let data = `Id,Culture,Color,Cells,Expansionism,Type,Area ${getAreaUnit("2")},Population,Namesbase,Emblems Shape,Origin\n`; // headers
+
+  body.querySelectorAll(":scope > div").forEach(function (el) {
+    data += el.dataset.id + ",";
+    data += el.dataset.name + ",";
+    data += el.dataset.color + ",";
+    data += el.dataset.cells + ",";
+    data += el.dataset.expansionism + ",";
+    data += el.dataset.type + ",";
+    data += el.dataset.area + ",";
+    data += el.dataset.population + ",";
+    const base = +el.dataset.base;
+    data += nameBases[base].name + ",";
+    data += el.dataset.emblems + ",";
+    data += pack.cultures[+el.dataset.id].origin + "\n";
+  });
+
+  const name = getFileName("Cultures") + ".csv";
+  downloadFile(data, name);
+}
+
+function closeCulturesEditor() {
+  debug.select("#cultureCenters").remove();
+  exitCulturesManualAssignment("close");
+  exitAddCultureMode();
+}
+
+async function uploadCulturesData() {
+  const csv = await Formats.csvParser(this.files[0]);
+  this.value = "";
+
+  const {cultures, cells} = pack;
+  const shapes = Object.keys(COA.shields.types)
+    .map(type => Object.keys(COA.shields[type]))
+    .flat();
+
+  const populated = cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
+  cultures.forEach(item => {
+    if (item.i) item.removed = true;
+  });
+
+  for (const c of csv.iterator((a, b) => +a[0] > +b[0])) {
+    let current;
+    if (+c.id < cultures.length) {
+      current = cultures[c.id];
+
+      const ratio = current.urban / (current.rural + current.urban);
+      applyPopulationChange(current.rural, current.urban, c.population * (1 - ratio), c.population * ratio, +c.id);
+    } else {
+      current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
+      cultures.push(current);
+    }
+
+    current.removed = false;
+    current.name = c.culture;
+    current.code = abbreviate(
+      current.name,
+      cultures.map(c => c.code)
+    );
+
+    current.color = c.color;
+    current.expansionism = +c.expansionism;
+    current.origin = +c.origin;
+
+    if (cultureTypes.includes(c.type)) current.type = c.type;
+    else current.type = "Generic";
+
+    const shieldShape = c["emblems shape"].toLowerCase();
+    if (shapes.includes(shieldShape)) current.shield = shieldShape;
+    else current.shield = "heater";
+
+    const nameBaseIndex = nameBases.findIndex(n => n.name == c.namesbase);
+    current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
+  }
+
+  cultures.filter(c => c.removed).forEach(c => removeCulture(c.i));
+
+  drawCultures();
+  refreshCulturesEditor();
+}
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index a02076ea..28aa0f7c 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -126,6 +126,8 @@ function insertEditorHtml() {
 }
 
 function addListeners() {
+  applySortingByHeader("statesHeader");
+
   document.getElementById("statesEditorRefresh").addEventListener("click", refreshStatesEditor);
   document.getElementById("statesEditStyle").addEventListener("click", () => editStyle("regions"));
   document.getElementById("statesLegend").addEventListener("click", toggleLegend);
@@ -143,15 +145,6 @@ function addListeners() {
   document.getElementById("statesAdd").addEventListener("click", enterAddStateMode);
   document.getElementById("statesExport").addEventListener("click", downloadStatesData);
 
-  document
-    .getElementById("statesHeader")
-    .querySelectorAll(".sortable")
-    .forEach(function (element) {
-      element.addEventListener("click", function () {
-        sortLines(this);
-      });
-    });
-
   body.addEventListener("click", function (event) {
     const element = event.target;
     const classList = element.classList;
@@ -192,7 +185,7 @@ function refreshStatesEditor() {
 
 // add line for each state
 function statesEditorAddLines() {
-  const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+  const unit = getAreaUnit();
   const hidden = statesRegenerateButtons.style.display === "block" ? "" : "hidden"; // show/hide regenerate columns
   let lines = "",
     totalArea = 0,
@@ -201,7 +194,7 @@ function statesEditorAddLines() {
 
   for (const s of pack.states) {
     if (s.removed) continue;
-    const area = s.area * distanceScaleInput.value ** 2;
+    const area = getArea(s.area);
     const rural = s.rural * populationRate;
     const urban = s.urban * populationRate * urbanization;
     const population = rn(rural + urban);
@@ -238,7 +231,7 @@ function statesEditorAddLines() {
         <span data-tip="Burgs count" class="icon-dot-circled hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
         <span data-tip="Neutral lands area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
+        <div data-tip="Neutral lands area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
         <select class="cultureType ${hidden} placeholder show hide">${getTypeOptions(0)}</select>
@@ -277,7 +270,7 @@ function statesEditorAddLines() {
       <span data-tip="Burgs count" style="padding-right: 1px" class="icon-dot-circled hide"></span>
       <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
       <span data-tip="State area" style="padding-right: 4px" class="icon-map-o hide"></span>
-      <div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area) + unit}</div>
+      <div data-tip="State area" class="stateArea hide" style="width: 6em">${si(area)} ${unit}</div>
       <span data-tip="${populationTip}" class="icon-male hide"></span>
       <div data-tip="${populationTip}" class="statePopulation pointer hide" style="width: 5em">${si(population)}</div>
       <select data-tip="State type. Defines growth model. Click to change" class="cultureType ${hidden} show hide">${getTypeOptions(s.type)}</select>
@@ -296,7 +289,7 @@ function statesEditorAddLines() {
   statesFooterStates.innerHTML = pack.states.filter(s => s.i && !s.removed).length;
   statesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
   statesFooterBurgs.innerHTML = totalBurgs;
-  statesFooterArea.innerHTML = si(totalArea) + unit;
+  statesFooterArea.innerHTML = `${si(totalArea)} ${unit}`;
   statesFooterPopulation.innerHTML = si(totalPopulation);
   statesFooterArea.dataset.area = totalArea;
   statesFooterPopulation.dataset.population = totalPopulation;
@@ -784,8 +777,7 @@ function showStatesChart() {
     d3.select(ev.target).select("circle").classed("selected", 1);
     const state = d.data.fullName;
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    const area = d.data.area * distanceScaleInput.value ** 2 + unit;
+    const area = getArea(d.data.area) + " " + getAreaUnit();
     const rural = rn(d.data.rural * populationRate);
     const urban = rn(d.data.urban * populationRate * urbanization);
 
@@ -1289,7 +1281,7 @@ function exitAddStateMode() {
 }
 
 function downloadStatesData() {
-  const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
+  const unit = getAreaUnit("2");
   let data =
     "Id,State,Full Name,Form,Color,Capital,Culture,Type,Expansionism,Cells,Burgs,Area " + unit + ",Total Population,Rural Population,Urban Population\n"; // headers
   body.querySelectorAll(":scope > div").forEach(function (el) {
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 868a2505..0cfc5ee2 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -76,7 +76,7 @@ function editBiomes() {
   }
 
   function biomesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
     const b = biomesData;
     let lines = "",
       totalArea = 0,
@@ -84,7 +84,7 @@ function editBiomes() {
 
     for (const i of b.i) {
       if (!i || biomesData.name[i] === "removed") continue; // ignore water and removed biomes
-      const area = b.area[i] * distanceScaleInput.value ** 2;
+      const area = getArea(b.area[i]);
       const rural = b.rural[i] * populationRate;
       const urban = b.urban[i] * populationRate * urbanization;
       const population = rn(rural + urban);
@@ -281,7 +281,7 @@ function editBiomes() {
     b.cells.push(0);
     b.area.push(0);
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = getAreaUnit();
     const line = `<div class="states biomes" data-id="${i}" data-name="${b.name[i]}" data-habitability=${b.habitability[i]} data-cells=0 data-area=0 data-population=0 data-color=${b.color[i]}>
       <fill-box fill="${b.color[i]}"></fill-box>
       <input data-tip="Biome name. Click and type to change" class="biomeName" value="${b.name[i]}" autocorrect="off" spellcheck="false">
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index faa50b8d..2f918cd9 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -57,9 +57,8 @@ function editCoastline(node = d3.event.target) {
       .call(d3.drag().on("drag", dragVertex))
       .on("mousemove", () => tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights"));
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     const area = pack.features[f].area;
-    coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+    coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
   function dragVertex() {
@@ -89,9 +88,8 @@ function editCoastline(node = d3.event.target) {
     defs.select("mask#land > path#land_" + f).attr("d", d); // update land mask
     defs.select("mask#water > path#water_" + f).attr("d", d); // update water mask
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     const area = Math.abs(d3.polygonArea(points));
-    coastlineArea.innerHTML = si(area * distanceScaleInput.value ** 2) + unit;
+    coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
   function showGroupSection() {
diff --git a/modules/ui/cultures-editor.js b/modules/ui/cultures-editor.js
deleted file mode 100644
index 1b869c78..00000000
--- a/modules/ui/cultures-editor.js
+++ /dev/null
@@ -1,979 +0,0 @@
-"use strict";
-function editCultures() {
-  const cultureTypes = ["Generic", "River", "Lake", "Naval", "Nomadic", "Hunting", "Highland"];
-  if (customization) return;
-  closeDialogs("#culturesEditor, .stable");
-  if (!layerIsOn("toggleCultures")) toggleCultures();
-  if (layerIsOn("toggleStates")) toggleStates();
-  if (layerIsOn("toggleBiomes")) toggleBiomes();
-  if (layerIsOn("toggleReligions")) toggleReligions();
-  if (layerIsOn("toggleProvinces")) toggleProvinces();
-
-  const body = document.getElementById("culturesBody");
-  drawCultureCenters();
-  refreshCulturesEditor();
-
-  if (modules.editCultures) return;
-  modules.editCultures = true;
-
-  $("#culturesEditor").dialog({
-    title: "Cultures Editor",
-    resizable: false,
-    width: fitContent(),
-    close: closeCulturesEditor,
-    position: {my: "right top", at: "right-10 top+10", of: "svg"}
-  });
-  body.focus();
-
-  // add listeners
-  document.getElementById("culturesEditorRefresh").addEventListener("click", refreshCulturesEditor);
-  document.getElementById("culturesEditStyle").addEventListener("click", () => editStyle("cults"));
-  document.getElementById("culturesLegend").addEventListener("click", toggleLegend);
-  document.getElementById("culturesPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("culturesHeirarchy").addEventListener("click", showHierarchy);
-  document.getElementById("culturesRecalculate").addEventListener("click", () => recalculateCultures(true));
-  document.getElementById("culturesManually").addEventListener("click", enterCultureManualAssignent);
-  document.getElementById("culturesManuallyApply").addEventListener("click", applyCultureManualAssignent);
-  document.getElementById("culturesManuallyCancel").addEventListener("click", () => exitCulturesManualAssignment());
-  document.getElementById("culturesEditNamesBase").addEventListener("click", editNamesbase);
-  document.getElementById("culturesAdd").addEventListener("click", enterAddCulturesMode);
-  document.getElementById("culturesExport").addEventListener("click", downloadCulturesData);
-  document.getElementById("culturesImport").addEventListener("click", () => document.getElementById("culturesCSVToLoad").click());
-  document.getElementById("culturesCSVToLoad").addEventListener("change", uploadCulturesData);
-
-  function refreshCulturesEditor() {
-    culturesCollectStatistics();
-    culturesEditorAddLines();
-    drawCultureCenters();
-  }
-
-  function culturesCollectStatistics() {
-    const cells = pack.cells,
-      cultures = pack.cultures;
-    cultures.forEach(c => (c.cells = c.area = c.rural = c.urban = 0));
-
-    for (const i of cells.i) {
-      if (cells.h[i] < 20) continue;
-      const c = cells.culture[i];
-      cultures[c].cells += 1;
-      cultures[c].area += cells.area[i];
-      cultures[c].rural += cells.pop[i];
-      if (cells.burg[i]) cultures[c].urban += pack.burgs[cells.burg[i]].population;
-    }
-  }
-
-  // add line for each culture
-  function culturesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    let lines = "";
-    let totalArea = 0;
-    let totalPopulation = 0;
-
-    const emblemShapeGroup = document.getElementById("emblemShape").selectedOptions[0].parentNode.label;
-    const selectShape = emblemShapeGroup === "Diversiform";
-
-    for (const c of pack.cultures) {
-      if (c.removed) continue;
-      const area = c.area * distanceScaleInput.value ** 2;
-      const rural = c.rural * populationRate;
-      const urban = c.urban * populationRate * urbanization;
-      const population = rn(rural + urban);
-      const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to edit`;
-      totalArea += area;
-      totalPopulation += population;
-
-      if (!c.i) {
-        // Uncultured (neutral) line
-        lines += /* html */ `<div
-          class="states"
-          data-id=${c.i}
-          data-name="${c.name}"
-          data-color=""
-          data-cells=${c.cells}
-          data-area=${area}
-          data-population=${population}
-          data-base=${c.base}
-          data-type=""
-          data-expansionism=""
-          data-emblems="${c.shield}"
-        >
-          <svg width="9" height="9" class="placeholder"></svg>
-          <input data-tip="Neutral culture name. Click and type to change" class="cultureName italic" value="${c.name}" autocorrect="off" spellcheck="false" />
-          <span class="icon-cw placeholder"></span>
-          <span data-tip="Cells count" class="icon-check-empty hide"></span>
-          <div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
-          <span class="icon-resize-full placeholder hide"></span>
-          <input class="statePower placeholder hide" type="number" />
-          <select class="cultureType placeholder">
-            ${getTypeOptions(c.type)}
-          </select>
-          <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
-          <div data-tip="Culture area" class="biomeArea hide">${si(area) + unit}</div>
-          <span data-tip="${populationTip}" class="icon-male hide"></span>
-          <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-          <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
-          <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
-            ${getBaseOptions(c.base)}
-          </select>
-          ${
-            selectShape
-              ? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
-              : ""
-          }
-        </div>`;
-        continue;
-      }
-
-      lines += /* html */ `<div
-        class="states cultures"
-        data-id=${c.i}
-        data-name="${c.name}"
-        data-color="${c.color}"
-        data-cells=${c.cells}
-        data-area=${area}
-        data-population=${population}
-        data-base=${c.base}
-        data-type=${c.type}
-        data-expansionism=${c.expansionism}
-        data-emblems="${c.shield}"
-      >
-        <fill-box fill="${c.color}"></fill-box>
-        <input data-tip="Culture name. Click and type to change" class="cultureName" value="${c.name}" autocorrect="off" spellcheck="false" />
-        <span data-tip="Regenerate culture name" class="icon-cw hiddenIcon" style="visibility: hidden"></span>
-        <span data-tip="Cells count" class="icon-check-empty hide"></span>
-        <div data-tip="Cells count" class="stateCells hide">${c.cells}</div>
-        <span data-tip="Culture expansionism. Defines competitive size" class="icon-resize-full hide"></span>
-        <input
-          data-tip="Culture expansionism. Defines competitive size. Click to change, then click Recalculate to apply change"
-          class="statePower hide"
-          type="number"
-          min="0"
-          max="99"
-          step=".1"
-          value=${c.expansionism}
-        />
-        <select data-tip="Culture type. Defines growth model. Click to change" class="cultureType">
-          ${getTypeOptions(c.type)}
-        </select>
-        <span data-tip="Culture area" style="padding-right: 4px" class="icon-map-o hide"></span>
-        <div data-tip="Culture area" class="biomeArea hide">${si(area) + unit}</div>
-        <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        <span data-tip="Click to re-generate names for burgs with this culture assigned" class="icon-arrows-cw hide"></span>
-        <select data-tip="Culture namesbase. Click to change. Click on arrows to re-generate names" class="cultureBase">
-          ${getBaseOptions(c.base)}
-        </select>
-        ${
-          selectShape
-            ? `<select data-tip="Emblem shape associated with culture. Click to change" class="cultureShape hide">${getShapeOptions(c.shield)}</select>`
-            : ""
-        }
-        <span data-tip="Remove culture" class="icon-trash-empty hide"></span>
-      </div>`;
-    }
-    body.innerHTML = lines;
-
-    // update footer
-    culturesFooterCultures.innerHTML = pack.cultures.filter(c => c.i && !c.removed).length;
-    culturesFooterCells.innerHTML = pack.cells.h.filter(h => h >= 20).length;
-    culturesFooterArea.innerHTML = si(totalArea) + unit;
-    culturesFooterPopulation.innerHTML = si(totalPopulation);
-    culturesFooterArea.dataset.area = totalArea;
-    culturesFooterPopulation.dataset.population = totalPopulation;
-
-    // add listeners
-    body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseenter", ev => cultureHighlightOn(ev)));
-    body.querySelectorAll("div.cultures").forEach(el => el.addEventListener("mouseleave", ev => cultureHighlightOff(ev)));
-    body.querySelectorAll("div.states").forEach(el => el.addEventListener("click", selectCultureOnLineClick));
-    body.querySelectorAll("fill-box").forEach(el => el.addEventListener("click", cultureChangeColor));
-    body.querySelectorAll("div > input.cultureName").forEach(el => el.addEventListener("input", cultureChangeName));
-    body.querySelectorAll("div > span.icon-cw").forEach(el => el.addEventListener("click", cultureRegenerateName));
-    body.querySelectorAll("div > input.statePower").forEach(el => el.addEventListener("input", cultureChangeExpansionism));
-    body.querySelectorAll("div > select.cultureType").forEach(el => el.addEventListener("change", cultureChangeType));
-    body.querySelectorAll("div > select.cultureBase").forEach(el => el.addEventListener("change", cultureChangeBase));
-    body.querySelectorAll("div > select.cultureShape").forEach(el => el.addEventListener("change", cultureChangeShape));
-    body.querySelectorAll("div > div.culturePopulation").forEach(el => el.addEventListener("click", changePopulation));
-    body.querySelectorAll("div > span.icon-arrows-cw").forEach(el => el.addEventListener("click", cultureRegenerateBurgs));
-    body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", cultureRemove));
-
-    culturesHeader.querySelector("div[data-sortby='emblems']").style.display = selectShape ? "inline-block" : "none";
-
-    if (body.dataset.type === "percentage") {
-      body.dataset.type = "absolute";
-      togglePercentageMode();
-    }
-    applySorting(culturesHeader);
-    $("#culturesEditor").dialog({width: fitContent()});
-  }
-
-  function getTypeOptions(type) {
-    let options = "";
-    cultureTypes.forEach(t => (options += `<option ${type === t ? "selected" : ""} value="${t}">${t}</option>`));
-    return options;
-  }
-
-  function getBaseOptions(base) {
-    let options = "";
-    nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
-    return options;
-  }
-
-  function getShapeOptions(selected) {
-    const shapes = Object.keys(COA.shields.types)
-      .map(type => Object.keys(COA.shields[type]))
-      .flat();
-    return shapes.map(shape => `<option ${shape === selected ? "selected" : ""} value="${shape}">${capitalize(shape)}</option>`);
-  }
-
-  function cultureHighlightOn(event) {
-    const culture = +event.target.dataset.id;
-    const info = document.getElementById("cultureInfo");
-    if (info) {
-      d3.select("#hierarchy")
-        .select("g[data-id='" + culture + "'] > path")
-        .classed("selected", 1);
-      const c = pack.cultures[culture];
-      const rural = c.rural * populationRate;
-      const urban = c.urban * populationRate * urbanization;
-      const population = rural + urban > 0 ? si(rn(rural + urban)) + " people" : "Extinct";
-      info.innerHTML = /* html */ `${c.name} culture. ${c.type}. ${population}`;
-      tip("Drag to change parent, drag to itself to move to the top level. Hold CTRL and click to change abbreviation");
-    }
-
-    if (!layerIsOn("toggleCultures")) return;
-    if (customization) return;
-    const animate = d3.transition().duration(2000).ease(d3.easeSinIn);
-    cults
-      .select("#culture" + culture)
-      .raise()
-      .transition(animate)
-      .attr("stroke-width", 2.5)
-      .attr("stroke", "#d0240f");
-    debug
-      .select("#cultureCenter" + culture)
-      .raise()
-      .transition(animate)
-      .attr("r", 8)
-      .attr("stroke", "#d0240f");
-  }
-
-  function cultureHighlightOff(event) {
-    const culture = +event.target.dataset.id;
-    const info = document.getElementById("cultureInfo");
-    if (info) {
-      d3.select("#hierarchy")
-        .select("g[data-id='" + culture + "'] > path")
-        .classed("selected", 0);
-      info.innerHTML = "&#8205;";
-      tip("");
-    }
-
-    if (!layerIsOn("toggleCultures")) return;
-    cults
-      .select("#culture" + culture)
-      .transition()
-      .attr("stroke-width", null)
-      .attr("stroke", null);
-    debug
-      .select("#cultureCenter" + culture)
-      .transition()
-      .attr("r", 6)
-      .attr("stroke", null);
-  }
-
-  function cultureChangeColor() {
-    const el = this;
-    const currentFill = el.getAttribute("fill");
-    const culture = +el.parentNode.dataset.id;
-
-    const callback = newFill => {
-      el.fill = newFill;
-      pack.cultures[culture].color = newFill;
-      cults
-        .select("#culture" + culture)
-        .attr("fill", newFill)
-        .attr("stroke", newFill);
-      debug.select("#cultureCenter" + culture).attr("fill", newFill);
-    };
-
-    openPicker(currentFill, callback);
-  }
-
-  function cultureChangeName() {
-    const culture = +this.parentNode.dataset.id;
-    this.parentNode.dataset.name = this.value;
-    pack.cultures[culture].name = this.value;
-    pack.cultures[culture].code = abbreviate(
-      this.value,
-      pack.cultures.map(c => c.code)
-    );
-  }
-
-  function cultureRegenerateName() {
-    const culture = +this.parentNode.dataset.id;
-    const name = Names.getCultureShort(culture);
-    this.parentNode.querySelector("input.cultureName").value = name;
-    pack.cultures[culture].name = name;
-  }
-
-  function cultureChangeExpansionism() {
-    const culture = +this.parentNode.dataset.id;
-    this.parentNode.dataset.expansionism = this.value;
-    pack.cultures[culture].expansionism = +this.value;
-    recalculateCultures();
-  }
-
-  function cultureChangeType() {
-    const culture = +this.parentNode.dataset.id;
-    this.parentNode.dataset.type = this.value;
-    pack.cultures[culture].type = this.value;
-    recalculateCultures();
-  }
-
-  function cultureChangeBase() {
-    const culture = +this.parentNode.dataset.id;
-    const v = +this.value;
-    this.parentNode.dataset.base = pack.cultures[culture].base = v;
-  }
-
-  function cultureChangeShape() {
-    const culture = +this.parentNode.dataset.id;
-    const shape = this.value;
-    this.parentNode.dataset.emblems = pack.cultures[culture].shield = shape;
-
-    const rerenderCOA = (id, coa) => {
-      const coaEl = document.getElementById(id);
-      if (!coaEl) return; // not rendered
-      coaEl.remove();
-      COArenderer.trigger(id, coa);
-    };
-
-    pack.states.forEach(state => {
-      if (state.culture !== culture || !state.i || state.removed || !state.coa || state.coa === "custom") return;
-      if (shape === state.coa.shield) return;
-      state.coa.shield = shape;
-      rerenderCOA("stateCOA" + state.i, state.coa);
-    });
-
-    pack.provinces.forEach(province => {
-      if (pack.cells.culture[province.center] !== culture || !province.i || province.removed || !province.coa || province.coa === "custom") return;
-      if (shape === province.coa.shield) return;
-      province.coa.shield = shape;
-      rerenderCOA("provinceCOA" + province.i, province.coa);
-    });
-
-    pack.burgs.forEach(burg => {
-      if (burg.culture !== culture || !burg.i || burg.removed || !burg.coa || burg.coa === "custom") return;
-      if (shape === burg.coa.shield) return;
-      burg.coa.shield = shape;
-      rerenderCOA("burgCOA" + burg.i, burg.coa);
-    });
-  }
-
-  function changePopulation() {
-    const culture = +this.parentNode.dataset.id;
-    const c = pack.cultures[culture];
-    if (!c.cells) {
-      tip("Culture does not have any cells, cannot change population", false, "error");
-      return;
-    }
-    const rural = rn(c.rural * populationRate);
-    const urban = rn(c.urban * populationRate * urbanization);
-    const total = rural + urban;
-    const l = n => Number(n).toLocaleString();
-    const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
-
-    alertMessage.innerHTML = /* html */ ` Rural: <input type="number" min="0" step="1" id="ruralPop" value=${rural} style="width:6em" /> Urban:
-      <input type="number" min="0" step="1" id="urbanPop" value=${urban} style="width:6em" ${burgs.length ? "" : "disabled"} />
-      <p>Total population: ${l(total)} ⇒ <span id="totalPop">${l(total)}</span> (<span id="totalPopPerc">100</span>%)</p>`;
-
-    const update = function () {
-      const totalNew = ruralPop.valueAsNumber + urbanPop.valueAsNumber;
-      if (isNaN(totalNew)) return;
-      totalPop.innerHTML = l(totalNew);
-      totalPopPerc.innerHTML = rn((totalNew / total) * 100);
-    };
-
-    ruralPop.oninput = () => update();
-    urbanPop.oninput = () => update();
-
-    $("#alert").dialog({
-      resizable: false,
-      title: "Change culture population",
-      width: "24em",
-      buttons: {
-        Apply: function () {
-          applyPopulationChange(rural, urban, ruralPop.value, urbanPop.value, culture);
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      },
-      position: {my: "center", at: "center", of: "svg"}
-    });
-  }
-
-  function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture) {
-    const ruralChange = newRural / oldRural;
-    if (isFinite(ruralChange) && ruralChange !== 1) {
-      const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
-      cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
-    }
-    if (!isFinite(ruralChange) && +newRural > 0) {
-      const points = newRural / populationRate;
-      const cells = pack.cells.i.filter(i => pack.cells.culture[i] === culture);
-      const pop = rn(points / cells.length);
-      cells.forEach(i => (pack.cells.pop[i] = pop));
-    }
-
-    const burgs = pack.burgs.filter(b => !b.removed && b.culture === culture);
-    const urbanChange = newUrban / oldUrban;
-    if (isFinite(urbanChange) && urbanChange !== 1) {
-      burgs.forEach(b => (b.population = rn(b.population * urbanChange, 4)));
-    }
-    if (!isFinite(urbanChange) && +newUrban > 0) {
-      const points = newUrban / populationRate / urbanization;
-      const population = rn(points / burgs.length, 4);
-      burgs.forEach(b => (b.population = population));
-    }
-
-    refreshCulturesEditor();
-  }
-
-  function cultureRegenerateBurgs() {
-    if (customization === 4) return;
-    const culture = +this.parentNode.dataset.id;
-    const cBurgs = pack.burgs.filter(b => b.culture === culture && !b.lock);
-    cBurgs.forEach(b => {
-      b.name = Names.getCulture(culture);
-      labels.select("[data-id='" + b.i + "']").text(b.name);
-    });
-    tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
-  }
-
-  function removeCultureModel(culture) {
-    cults.select("#culture" + culture).remove();
-    debug.select("#cultureCenter" + culture).remove();
-
-    pack.burgs.filter(b => b.culture == culture).forEach(b => (b.culture = 0));
-    pack.states.forEach((s, i) => {
-      if (s.culture === culture) s.culture = 0;
-    });
-    pack.cells.culture.forEach((c, i) => {
-      if (c === culture) pack.cells.culture[i] = 0;
-    });
-    pack.cultures[culture].removed = true;
-
-    const origin = pack.cultures[culture].origin;
-    pack.cultures.forEach(c => {
-      if (c.origin === culture) c.origin = origin;
-    });
-    refreshCulturesEditor();
-  }
-
-  function cultureRemove() {
-    if (customization === 4) return;
-    const culture = +this.parentNode.dataset.id;
-
-    alertMessage.innerHTML = "Are you sure you want to remove the culture? <br>This action cannot be reverted";
-    $("#alert").dialog({
-      resizable: false,
-      title: "Remove culture",
-      buttons: {
-        Remove: function () {
-          removeCultureModel(culture);
-          $(this).dialog("close");
-        },
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      }
-    });
-  }
-
-  function drawCultureCenters() {
-    const tooltip = "Drag to move the culture center (ancestral home)";
-    debug.select("#cultureCenters").remove();
-    const cultureCenters = debug.append("g").attr("id", "cultureCenters").attr("stroke-width", 2).attr("stroke", "#444444").style("cursor", "move");
-
-    const data = pack.cultures.filter(c => c.i && !c.removed);
-    cultureCenters
-      .selectAll("circle")
-      .data(data)
-      .enter()
-      .append("circle")
-      .attr("id", d => "cultureCenter" + d.i)
-      .attr("data-id", d => d.i)
-      .attr("r", 6)
-      .attr("fill", d => d.color)
-      .attr("cx", d => pack.cells.p[d.center][0])
-      .attr("cy", d => pack.cells.p[d.center][1])
-      .on("mouseenter", d => {
-        tip(tooltip, true);
-        body.querySelector(`div[data-id='${d.i}']`).classList.add("selected");
-        cultureHighlightOn(event);
-      })
-      .on("mouseleave", d => {
-        tip("", true);
-        body.querySelector(`div[data-id='${d.i}']`).classList.remove("selected");
-        cultureHighlightOff(event);
-      })
-      .call(d3.drag().on("start", cultureCenterDrag));
-  }
-
-  function cultureCenterDrag() {
-    const el = d3.select(this);
-    const c = +this.id.slice(13);
-    d3.event.on("drag", () => {
-      el.attr("cx", d3.event.x).attr("cy", d3.event.y);
-      const cell = findCell(d3.event.x, d3.event.y);
-      if (pack.cells.h[cell] < 20) return; // ignore dragging on water
-      pack.cultures[c].center = cell;
-      recalculateCultures();
-    });
-  }
-
-  function toggleLegend() {
-    if (legend.selectAll("*").size()) {
-      clearLegend();
-      return;
-    } // hide legend
-    const data = pack.cultures
-      .filter(c => c.i && !c.removed && c.cells)
-      .sort((a, b) => b.area - a.area)
-      .map(c => [c.i, c.color, c.name]);
-    drawLegend("Cultures", data);
-  }
-
-  function togglePercentageMode() {
-    if (body.dataset.type === "absolute") {
-      body.dataset.type = "percentage";
-      const totalCells = +culturesFooterCells.innerHTML;
-      const totalArea = +culturesFooterArea.dataset.area;
-      const totalPopulation = +culturesFooterPopulation.dataset.population;
-
-      body.querySelectorAll(":scope > div").forEach(function (el) {
-        el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100) + "%";
-        el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100) + "%";
-        el.querySelector(".culturePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100) + "%";
-      });
-    } else {
-      body.dataset.type = "absolute";
-      culturesEditorAddLines();
-    }
-  }
-
-  function showHierarchy() {
-    // build hierarchy tree
-    pack.cultures[0].origin = null;
-    const cultures = pack.cultures.filter(c => !c.removed);
-    if (cultures.length < 3) {
-      tip("Not enough cultures to show hierarchy", false, "error");
-      return;
-    }
-    const root = d3
-      .stratify()
-      .id(d => d.i)
-      .parentId(d => d.origin)(cultures);
-    const treeWidth = root.leaves().length;
-    const treeHeight = root.height;
-    const width = treeWidth * 40,
-      height = treeHeight * 60;
-
-    const margin = {top: 10, right: 10, bottom: -5, left: 10};
-    const w = width - margin.left - margin.right;
-    const h = height + 30 - margin.top - margin.bottom;
-    const treeLayout = d3.tree().size([w, h]);
-
-    // prepare svg
-    alertMessage.innerHTML = "<div id='cultureInfo' class='chartInfo'>&#8205;</div>";
-    const svg = d3
-      .select("#alertMessage")
-      .insert("svg", "#cultureInfo")
-      .attr("id", "hierarchy")
-      .attr("width", width)
-      .attr("height", height)
-      .style("text-anchor", "middle");
-    const graph = svg.append("g").attr("transform", `translate(10, -45)`);
-    const links = graph.append("g").attr("fill", "none").attr("stroke", "#aaaaaa");
-    const nodes = graph.append("g");
-
-    renderTree();
-    function renderTree() {
-      treeLayout(root);
-      links
-        .selectAll("path")
-        .data(root.links())
-        .enter()
-        .append("path")
-        .attr("d", d => {
-          return (
-            "M" +
-            d.source.x +
-            "," +
-            d.source.y +
-            "C" +
-            d.source.x +
-            "," +
-            (d.source.y * 3 + d.target.y) / 4 +
-            " " +
-            d.target.x +
-            "," +
-            (d.source.y * 2 + d.target.y) / 3 +
-            " " +
-            d.target.x +
-            "," +
-            d.target.y
-          );
-        });
-
-      const node = nodes
-        .selectAll("g")
-        .data(root.descendants())
-        .enter()
-        .append("g")
-        .attr("data-id", d => d.data.i)
-        .attr("stroke", "#333333")
-        .attr("transform", d => `translate(${d.x}, ${d.y})`)
-        .on("mouseenter", () => cultureHighlightOn(event))
-        .on("mouseleave", () => cultureHighlightOff(event))
-        .call(d3.drag().on("start", d => dragToReorigin(d)));
-
-      node
-        .append("path")
-        .attr("d", d => {
-          if (!d.data.i) return "M5,0A5,5,0,1,1,-5,0A5,5,0,1,1,5,0";
-          // small circle
-          else if (d.data.type === "Generic") return "M11.3,0A11.3,11.3,0,1,1,-11.3,0A11.3,11.3,0,1,1,11.3,0";
-          // circle
-          else if (d.data.type === "River") return "M0,-14L14,0L0,14L-14,0Z";
-          // diamond
-          else if (d.data.type === "Lake") return "M-6.5,-11.26l13,0l6.5,11.26l-6.5,11.26l-13,0l-6.5,-11.26Z";
-          // hexagon
-          else if (d.data.type === "Naval") return "M-11,-11h22v22h-22Z"; // square
-          if (d.data.type === "Highland") return "M-11,-11l11,2l11,-2l-2,11l2,11l-11,-2l-11,2l2,-11Z"; // concave square
-          if (d.data.type === "Nomadic") return "M-4.97,-12.01 l9.95,0 l7.04,7.04 l0,9.95 l-7.04,7.04 l-9.95,0 l-7.04,-7.04 l0,-9.95Z"; // octagon
-          if (d.data.type === "Hunting") return "M0,-14l14,11l-6,14h-16l-6,-14Z"; // pentagon
-          return "M-11,-11h22v22h-22Z"; // square
-        })
-        .attr("fill", d => (d.data.i ? d.data.color : "#ffffff"))
-        .attr("stroke-dasharray", d => (d.data.cells ? "null" : "1"));
-
-      node
-        .append("text")
-        .attr("dy", ".35em")
-        .text(d => (d.data.i ? d.data.code : ""));
-    }
-
-    $("#alert").dialog({
-      title: "Cultures tree",
-      width: fitContent(),
-      resizable: false,
-      position: {my: "left center", at: "left+10 center", of: "svg"},
-      buttons: {},
-      close: () => {
-        alertMessage.innerHTML = "";
-      }
-    });
-
-    function dragToReorigin(d) {
-      if (isCtrlClick(d3.event.sourceEvent)) {
-        changeCode(d);
-        return;
-      }
-
-      const originLine = graph.append("path").attr("class", "dragLine").attr("d", `M${d.x},${d.y}L${d.x},${d.y}`);
-
-      d3.event.on("drag", () => {
-        originLine.attr("d", `M${d.x},${d.y}L${d3.event.x},${d3.event.y}`);
-      });
-
-      d3.event.on("end", () => {
-        originLine.remove();
-        const selected = graph.select("path.selected");
-        if (!selected.size()) return;
-        const culture = d.data.i;
-        const oldOrigin = d.data.origin;
-        let newOrigin = selected.datum().data.i;
-        if (newOrigin == oldOrigin) return; // already a child of the selected node
-        if (newOrigin == culture) newOrigin = 0; // move to top
-        if (newOrigin && d.descendants().some(node => node.id == newOrigin)) return; // cannot be a child of its own child
-        pack.cultures[culture].origin = d.data.origin = newOrigin; // change data
-        showHierarchy(); // update hierarchy
-      });
-    }
-
-    function changeCode(d) {
-      prompt(`Please provide an abbreviation for culture: ${d.data.name}`, {default: d.data.code}, v => {
-        pack.cultures[d.data.i].code = v;
-        nodes
-          .select("g[data-id='" + d.data.i + "']")
-          .select("text")
-          .text(v);
-      });
-    }
-  }
-
-  function recalculateCultures(must) {
-    if (!must && !culturesAutoChange.checked) return;
-
-    pack.cells.culture = new Uint16Array(pack.cells.i.length);
-    pack.cultures.forEach(function (c) {
-      if (!c.i || c.removed) return;
-      pack.cells.culture[c.center] = c.i;
-    });
-    Cultures.expand();
-    drawCultures();
-    pack.burgs.forEach(b => (b.culture = pack.cells.culture[b.cell]));
-    refreshCulturesEditor();
-    document.querySelector("input.statePower").focus(); // to not trigger hotkeys
-  }
-
-  function enterCultureManualAssignent() {
-    if (!layerIsOn("toggleCultures")) toggleCultures();
-    customization = 4;
-    cults.append("g").attr("id", "temp");
-    document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "none"));
-    document.getElementById("culturesManuallyButtons").style.display = "inline-block";
-    debug.select("#cultureCenters").style("display", "none");
-
-    culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
-    culturesHeader.querySelector("div[data-sortby='type']").style.left = "8.8em";
-    culturesHeader.querySelector("div[data-sortby='base']").style.left = "13.6em";
-    culturesFooter.style.display = "none";
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-    $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
-    tip("Click on culture to select, drag the circle to change culture", true);
-    viewbox
-      .style("cursor", "crosshair")
-      .on("click", selectCultureOnMapClick)
-      .call(d3.drag().on("start", dragCultureBrush))
-      .on("touchmove mousemove", moveCultureBrush);
-
-    body.querySelector("div").classList.add("selected");
-  }
-
-  function selectCultureOnLineClick(i) {
-    if (customization !== 4) return;
-    body.querySelector("div.selected").classList.remove("selected");
-    this.classList.add("selected");
-  }
-
-  function selectCultureOnMapClick() {
-    const point = d3.mouse(this);
-    const i = findCell(point[0], point[1]);
-    if (pack.cells.h[i] < 20) return;
-
-    const assigned = cults.select("#temp").select("polygon[data-cell='" + i + "']");
-    const culture = assigned.size() ? +assigned.attr("data-culture") : pack.cells.culture[i];
-
-    body.querySelector("div.selected").classList.remove("selected");
-    body.querySelector("div[data-id='" + culture + "']").classList.add("selected");
-  }
-
-  function dragCultureBrush() {
-    const r = +culturesManuallyBrush.value;
-
-    d3.event.on("drag", () => {
-      if (!d3.event.dx && !d3.event.dy) return;
-      const p = d3.mouse(this);
-      moveCircle(p[0], p[1], r);
-
-      const found = r > 5 ? findAll(p[0], p[1], r) : [findCell(p[0], p[1], r)];
-      const selection = found.filter(isLand);
-      if (selection) changeCultureForSelection(selection);
-    });
-  }
-
-  function changeCultureForSelection(selection) {
-    const temp = cults.select("#temp");
-    const selected = body.querySelector("div.selected");
-
-    const cultureNew = +selected.dataset.id;
-    const color = pack.cultures[cultureNew].color || "#ffffff";
-
-    selection.forEach(function (i) {
-      const exists = temp.select("polygon[data-cell='" + i + "']");
-      const cultureOld = exists.size() ? +exists.attr("data-culture") : pack.cells.culture[i];
-      if (cultureNew === cultureOld) return;
-
-      // change of append new element
-      if (exists.size()) exists.attr("data-culture", cultureNew).attr("fill", color).attr("stroke", color);
-      else
-        temp
-          .append("polygon")
-          .attr("data-cell", i)
-          .attr("data-culture", cultureNew)
-          .attr("points", getPackPolygon(i))
-          .attr("fill", color)
-          .attr("stroke", color);
-    });
-  }
-
-  function moveCultureBrush() {
-    showMainTip();
-    const point = d3.mouse(this);
-    const radius = +culturesManuallyBrush.value;
-    moveCircle(point[0], point[1], radius);
-  }
-
-  function applyCultureManualAssignent() {
-    const changed = cults.select("#temp").selectAll("polygon");
-    changed.each(function () {
-      const i = +this.dataset.cell;
-      const c = +this.dataset.culture;
-      pack.cells.culture[i] = c;
-      if (pack.cells.burg[i]) pack.burgs[pack.cells.burg[i]].culture = c;
-    });
-
-    if (changed.size()) {
-      drawCultures();
-      refreshCulturesEditor();
-    }
-    exitCulturesManualAssignment();
-  }
-
-  function exitCulturesManualAssignment(close) {
-    customization = 0;
-    cults.select("#temp").remove();
-    removeCircle();
-    document.querySelectorAll("#culturesBottom > *").forEach(el => (el.style.display = "inline-block"));
-    document.getElementById("culturesManuallyButtons").style.display = "none";
-
-    culturesEditor.querySelectorAll(".hide").forEach(el => el.classList.remove("hidden"));
-    culturesHeader.querySelector("div[data-sortby='type']").style.left = "18.6em";
-    culturesHeader.querySelector("div[data-sortby='base']").style.left = "35.8em";
-    culturesFooter.style.display = "block";
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (!close) $("#culturesEditor").dialog({position: {my: "right top", at: "right-10 top+10", of: "svg"}});
-
-    debug.select("#cultureCenters").style("display", null);
-    restoreDefaultEvents();
-    clearMainTip();
-    const selected = body.querySelector("div.selected");
-    if (selected) selected.classList.remove("selected");
-  }
-
-  function enterAddCulturesMode() {
-    if (this.classList.contains("pressed")) {
-      exitAddCultureMode();
-      return;
-    }
-    customization = 9;
-    this.classList.add("pressed");
-    tip("Click on the map to add a new culture", true);
-    viewbox.style("cursor", "crosshair").on("click", addCulture);
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "none"));
-  }
-
-  function exitAddCultureMode() {
-    customization = 0;
-    restoreDefaultEvents();
-    clearMainTip();
-    body.querySelectorAll("div > input, select, span, svg").forEach(e => (e.style.pointerEvents = "all"));
-    if (culturesAdd.classList.contains("pressed")) culturesAdd.classList.remove("pressed");
-  }
-
-  function addCulture() {
-    const point = d3.mouse(this);
-    const center = findCell(point[0], point[1]);
-    if (pack.cells.h[center] < 20) {
-      tip("You cannot place culture center into the water. Please click on a land cell", false, "error");
-      return;
-    }
-    const occupied = pack.cultures.some(c => !c.removed && c.center === center);
-    if (occupied) {
-      tip("This cell is already a culture center. Please select a different cell", false, "error");
-      return;
-    }
-
-    if (d3.event.shiftKey === false) exitAddCultureMode();
-    Cultures.add(center);
-
-    drawCultureCenters();
-    culturesEditorAddLines();
-  }
-
-  function downloadCulturesData() {
-    const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data = "Id,Culture,Color,Cells,Expansionism,Type,Area " + unit + ",Population,Namesbase,Emblems Shape,Origin\n"; // headers
-
-    body.querySelectorAll(":scope > div").forEach(function (el) {
-      data += el.dataset.id + ",";
-      data += el.dataset.name + ",";
-      data += el.dataset.color + ",";
-      data += el.dataset.cells + ",";
-      data += el.dataset.expansionism + ",";
-      data += el.dataset.type + ",";
-      data += el.dataset.area + ",";
-      data += el.dataset.population + ",";
-      const base = +el.dataset.base;
-      data += nameBases[base].name + ",";
-      data += el.dataset.emblems + ",";
-      data += pack.cultures[+el.dataset.id].origin + "\n";
-    });
-
-    const name = getFileName("Cultures") + ".csv";
-    downloadFile(data, name);
-  }
-
-  function closeCulturesEditor() {
-    debug.select("#cultureCenters").remove();
-    exitCulturesManualAssignment("close");
-    exitAddCultureMode();
-  }
-
-  async function uploadCulturesData() {
-    const csv = await Formats.csvParser(this.files[0]);
-    this.value = "";
-
-    const cultures = pack.cultures;
-    const shapes = Object.keys(COA.shields.types)
-      .map(type => Object.keys(COA.shields[type]))
-      .flat();
-    const populated = pack.cells.pop.map((c, i) => (c ? i : null)).filter(c => c);
-    cultures.forEach(item => {
-      if (item.i) item.removed = true;
-    });
-    for (const c of csv.iterator((a, b) => +a[0] > +b[0])) {
-      let current;
-      if (+c.id < cultures.length) {
-        current = cultures[c.id];
-
-        const ratio = current.urban / (current.rural + current.urban);
-        applyPopulationChange(current.rural, current.urban, c.population * (1 - ratio), c.population * ratio, +c.id);
-      } else {
-        current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
-        cultures.push(current);
-      }
-
-      current.removed = false;
-      current.name = c.culture;
-      current.code = abbreviate(
-        current.name,
-        cultures.map(c => c.code)
-      );
-
-      current.color = c.color;
-      current.expansionism = +c.expansionism;
-      current.origin = +c.origin;
-
-      if (cultureTypes.includes(c.type)) current.type = c.type;
-      else current.type = "Generic";
-
-      const shieldShape = c["emblems shape"].toLowerCase();
-      if (shapes.includes(shieldShape)) current.shield = shieldShape;
-      else current.shield = "heater";
-
-      const nameBaseIndex = nameBases.findIndex(n => n.name == c.namesbase);
-      current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
-    }
-
-    cultures.filter(c => c.removed).forEach(c => removeCultureModel(c.i));
-
-    drawCultures();
-    refreshCulturesEditor();
-  }
-}
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 8200607e..f8172db5 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -85,6 +85,17 @@ document.querySelectorAll(".sortable").forEach(function (e) {
   });
 });
 
+function applySortingByHeader(headerContainer) {
+  document
+    .getElementById(headerContainer)
+    .querySelectorAll(".sortable")
+    .forEach(function (element) {
+      element.addEventListener("click", function () {
+        sortLines(this);
+      });
+    });
+}
+
 function sortLines(headerElement) {
   const type = headerElement.classList.contains("alphabetically") ? "name" : "number";
   let order = headerElement.className.includes("-down") ? "-up" : "-down";
@@ -1050,6 +1061,17 @@ function selectIcon(initial, callback) {
   });
 }
 
+function getAreaUnit(squareMark = "²") {
+  return document.getElementById("areaUnit").value === "square"
+    ? document.getElementById("distanceUnitInput").value + squareMark
+    : document.getElementById("areaUnit").value;
+}
+
+function getArea(rawArea) {
+  const distanceScale = document.getElementById("distanceScaleInput")?.value;
+  return rawArea * distanceScale ** 2;
+}
+
 function confirmationDialog(options) {
   const {
     title = "Confirm action",
@@ -1097,6 +1119,12 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const StateEditor = await import("../dynamic/editors/states-editor.js");
+  const StateEditor = await import("../dynamic/editors/states-editor.js?v=18052022");
   StateEditor.open();
 }
+
+async function editCultures() {
+  if (customization) return;
+  const CulturesEditor = await import("../dynamic/editors/cultures-editor.js");
+  CulturesEditor.open();
+}
diff --git a/modules/ui/general.js b/modules/ui/general.js
index f56a234d..0d0fde7b 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -202,18 +202,18 @@ function showMapTooltip(point, e, i, g) {
     const province = pack.cells.province[i];
     const prov = province ? pack.provinces[province].fullName + ", " : "";
     tip(prov + stateName);
-    if (document.getElementById('statesEditor')?.offsetParent) highlightEditorLine(statesEditor, state);
-    if (document.getElementById('diplomacyEditor')?.offsetParent) highlightEditorLine(diplomacyEditor, state);
-    if (document.getElementById('militaryOverview')?.offsetParent) highlightEditorLine(militaryOverview, state);
-    if (document.getElementById('provincesEditor')?.offsetParent) highlightEditorLine(provincesEditor, province);
+    if (document.getElementById("statesEditor")?.offsetParent) highlightEditorLine(statesEditor, state);
+    if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
+    if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
+    if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
   } else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
     const culture = pack.cells.culture[i];
     tip("Culture: " + pack.cultures[culture].name);
-    if (culturesEditor?.offsetParent) highlightEditorLine(culturesEditor, culture);
+    if (document.getElementById("culturesEditor")?.offsetParent) highlightEditorLine(culturesEditor, culture);
   } else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
 }
 
-function highlightEditorLine(editor, id, timeout = 15000) {
+function highlightEditorLine(editor, id, timeout = 10000) {
   Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
   const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
   if (hovered) hovered.classList.add("hovered"); // add hovered class
@@ -233,8 +233,7 @@ function updateCellInfo(point, i, g) {
   infoLon.innerHTML = toDMS(getLongitude(x, 4), "lon");
 
   infoCell.innerHTML = i;
-  const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-  infoArea.innerHTML = cells.area[i] ? si(cells.area[i] * distanceScaleInput.value ** 2) + unit : "n/a";
+  infoArea.innerHTML = cells.area[i] ? si(getArea(cells.area[i])) + " " + getAreaUnit() : "n/a";
   infoEvelation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
   infoDepth.innerHTML = getDepth(pack.features[f], pack.cells.h[i], point);
   infoTemp.innerHTML = convertTemperature(grid.cells.temp[g]);
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index eba1bd0d..972a9cb8 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -45,9 +45,7 @@ function editLake() {
 
     const l = getLake();
     document.getElementById("lakeName").value = l.name;
-
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    document.getElementById("lakeArea").value = si(l.area * distanceScaleInput.value ** 2) + unit;
+    document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
 
     const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
     document.getElementById("lakeShoreLength").value = si(length * distanceScaleInput.value) + " " + distanceUnitInput.value;
@@ -118,9 +116,8 @@ function editLake() {
     elSelected.attr("d", d);
     defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
 
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     feature.area = Math.abs(d3.polygonArea(points));
-    document.getElementById("lakeArea").value = si(feature.area * distanceScaleInput.value ** 2) + unit;
+    document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
   }
 
   function changeName() {
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index 488aafe4..3c11eada 100644
--- a/modules/ui/measurers.js
+++ b/modules/ui/measurers.js
@@ -528,8 +528,7 @@ class Planimeter extends Measurer {
     if (this.points.length < 3) return;
 
     const polygonArea = rn(Math.abs(d3.polygonArea(this.points)));
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-    const area = si(polygonArea * distanceScaleInput.value ** 2) + " " + unit;
+    const area = si(getArea(polygonArea)) + " " + getAreaUnit();
     const c = polylabel([this.points], 1.0);
     this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area);
   }
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 33ef6dc2..269ff25a 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -108,7 +108,7 @@ function editProvinces() {
 
   // add line for each state
   function provincesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
     const selectedState = +document.getElementById("provincesFilterState").value;
     let filtered = pack.provinces.filter(p => p.i && !p.removed); // all valid burgs
     if (selectedState != -1) filtered = filtered.filter(p => p.state === selectedState); // filtered by state
@@ -118,8 +118,7 @@ function editProvinces() {
       totalPopulation = 0;
 
     for (const p of filtered) {
-      const area = p.area * distanceScaleInput.value ** 2;
-      totalArea += area;
+      totalArea += getArea(p.area);
       const rural = p.rural * populationRate;
       const urban = p.urban * populationRate * urbanization;
       const population = rn(rural + urban);
@@ -632,8 +631,7 @@ function editProvinces() {
       const name = d.data.fullName;
       const state = pack.states[d.data.state].fullName;
 
-      const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
-      const area = d.data.area * distanceScaleInput.value ** 2 + unit;
+      const area = getArea(d.data.area) + " " + getAreaUnit();
       const rural = rn(d.data.rural * populationRate);
       const urban = rn(d.data.urban * populationRate * urbanization);
 
diff --git a/modules/ui/religions-editor.js b/modules/ui/religions-editor.js
index f0f55921..e4e9d174 100644
--- a/modules/ui/religions-editor.js
+++ b/modules/ui/religions-editor.js
@@ -59,7 +59,7 @@ function editReligions() {
 
   // add line for each religion
   function religionsEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
     let lines = "",
       totalArea = 0,
       totalPopulation = 0;
@@ -67,7 +67,7 @@ function editReligions() {
     for (const r of pack.religions) {
       if (r.removed) continue;
 
-      const area = r.area * distanceScaleInput.value ** 2;
+      const area = getArea(r.area);
       const rural = r.rural * populationRate;
       const urban = r.urban * populationRate * urbanization;
       const population = rn(rural + urban);
@@ -117,7 +117,7 @@ function editReligions() {
           data-deity=""
           data-expansionism=""
         >
-          <svg width="9" height="9" class="placeholder"></svg>
+          <svg width="11" height="11" class="placeholder"></svg>
           <input data-tip="Religion name. Click and type to change" class="religionName italic" value="${r.name}" autocorrect="off" spellcheck="false" />
           <select data-tip="Religion type" class="religionType placeholder">
             ${getTypeOptions(r.type)}
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index bd27840c..759447dd 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -67,7 +67,7 @@ function editZones() {
 
   // add line for each zone
   function zonesEditorAddLines() {
-    const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
+    const unit = " " + getAreaUnit();
 
     const typeToFilterBy = document.getElementById("zonesFilterType").value;
     const zones = Array.from(document.querySelectorAll("#zones > g"));
@@ -78,7 +78,7 @@ function editZones() {
       const description = zoneEl.dataset.description;
       const type = zoneEl.dataset.type;
       const fill = zoneEl.getAttribute("fill");
-      const area = d3.sum(c.map(i => pack.cells.area[i])) * distanceScaleInput.value ** 2;
+      const area = getArea(d3.sum(c.map(i => pack.cells.area[i])));
       const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
       const urban = d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
       const population = rural + urban;
@@ -107,7 +107,8 @@ function editZones() {
     body.innerHTML = lines.join("");
 
     // update footer
-    const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
+    const totalArea = getArea(graphWidth * graphHeight);
+    zonesFooterArea.dataset.area = totalArea;
     const totalPop = (d3.sum(pack.cells.pop) + d3.sum(pack.burgs.filter(b => !b.removed).map(b => b.population)) * urbanization) * populationRate;
     zonesFooterPopulation.dataset.population = totalPop;
     zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
diff --git a/versioning.js b/versioning.js
index 07617b2a..bc71f893 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,7 +1,7 @@
 "use strict";
 // version and caching control
 
-const version = "1.82.01"; // generator version, update each time
+const version = "1.82.02"; // generator version, update each time
 
 {
   document.title += " v" + version;