diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index f01a2390..b027f814 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,3 +1,3 @@
 # These are supported funding model platforms
-github: Azgaar
+
 patreon: Azgaar
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
deleted file mode 100644
index 698d23ae..00000000
--- a/.github/copilot-instructions.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# Fantasy Map Generator
-
-Azgaar's Fantasy Map Generator is a client-side JavaScript web application for creating fantasy maps. It generates detailed fantasy worlds with countries, cities, rivers, biomes, and cultural elements.
-
-Always reference these instructions first and fallback to search or bash commands only when you encounter unexpected information that does not match the info here.
-
-## Working Effectively
-
-- **CRITICAL**: This is a static web application - NO build process needed. No npm install, no compilation, no bundling.
-- Run the application using HTTP server (required - cannot run with file:// protocol):
-  - `python3 -m http.server 8000` - takes 2-3 seconds to start
-- Access at: `http://localhost:8000`
-
-## Validation
-
-- Always manually validate any changes by:
-  1. Starting the HTTP server (NEVER CANCEL - wait for full startup)
-  2. Navigate to the application in browser
-  3. Click the "►" button to open the menu and generate a new map
-  4. **CRITICAL VALIDATION**: Verify the map generates with countries, cities, roads, and geographic features
-  5. Test UI interaction: click "Layers" button, verify layer controls work
-  6. Test regeneration: click "New Map!" button, verify new map generates correctly
-- **Known Issues**: Google Analytics and font loading errors are normal (blocked external resources)
-
-## Repository Structure
-
-### Core Files
-
-- `index.html` - Main application entry point
-- `main.js` - Core application logic
-- `versioning.js` - Version management and update handling
-
-### Key Directories
-
-- `modules/` - core functionality modules:
-  - `modules/ui/` - UI components (editors, tools, style management)
-  - `modules/dynamic/` - runtime modules (export, installation)
-  - `modules/renderers/` - drawing and rendering logic
-- `utils/` - utility libraries (math, arrays, strings, etc.)
-- `styles/` - visual style presets (JSON files)
-- `libs/` - Third-party libraries (D3.js, TinyMCE, etc.)
-- `images/` - backgrounds, UI elements
-- `charges/` - heraldic symbols and coat of arms elements
-- `config/` - Heightmap templates and configurations
-- `heightmaps/` - Terrain generation data
-
-## Common Tasks
-
-### Making Code Changes
-
-1. Edit JavaScript files directly (no compilation needed)
-2. Refresh browser to see changes immediately
-3. **ALWAYS test map generation** after making changes
-4. Update version in `versioning.js` for all changes
-5. Update file hashes in `index.html` for changed files (format: `file.js?v=1.108.1`)
-
-### Debugging Map Generation
-
-- Open browser developer tools console
-- Look for timing logs, e.g. "TOTAL: ~0.76s"
-- Map generation logs show each step (heightmap, rivers, states, etc.)
-- Error messages will indicate specific generation failures
-
-### Testing Different Map Types
-
-- Use "New Map!" button for quick regeneration
-- Access "Layers" menu to change map visualization
-- Available presets: Political, Cultural, Religions, Biomes, Heightmap, Physical, Military
-
-## Troubleshooting
-
-### Application Won't Load
-
-- Ensure using HTTP server (not file://)
-- Check console for JavaScript errors
-- Verify all files are present in repository
-
-### Map Generation Fails
-
-- Check browser console for error messages
-- Look for specific module failures in generation logs
-- Try refreshing page and generating new map
-
-### Performance Issues
-
-- Map generation should complete in ~1 second for standard configurations
-- If slower, check browser console for errors
-
-Remember: This is a sophisticated client-side application that generates complete fantasy worlds with political systems, geography, cultures, and detailed cartographic elements. Always validate that your changes preserve the core map generation functionality.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index acedeb18..b254d0ad 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,8 +14,8 @@
 
 # Versioning
 
-<!-- Update the VERSION if you want the PR to be merged. Currently it's a manual 3-steps process:
-  * update VERSION in `versioning.js` using semver principle
+<!-- Update the version if you want the PR to be merged fast. Currently it's a manual 3-steps process:
+  * update version in `versioning.js` using semver principle. Just set the next patch (for fixes) or minor version (for new features)
   * for all changed files update hash (the part after `?`) in place where file is requested (usually it's `index.html`)
   * if the change can be really interesting for end-users, describe it inside the `showUpdateWindow()` function in `versioning.js` -->
 
diff --git a/components/slider-input.js b/components/slider-input.js
deleted file mode 100644
index f1732027..00000000
--- a/components/slider-input.js
+++ /dev/null
@@ -1,78 +0,0 @@
-{
-  const style = /* css */ `
-    slider-input {
-      display: flex;
-      align-items: center;
-      gap: .4em;
-    }
-  `;
-
-  const styleElement = document.createElement("style");
-  styleElement.setAttribute("type", "text/css");
-  styleElement.innerHTML = style;
-  document.head.appendChild(styleElement);
-}
-
-{
-  const template = document.createElement("template");
-  template.innerHTML = /* html */ `
-    <input type="range" />
-    <input type="number" />
-  `;
-
-  class SliderInput extends HTMLElement {
-    constructor() {
-      super();
-      this.appendChild(template.content.cloneNode(true));
-
-      const range = this.querySelector("input[type=range]");
-      const number = this.querySelector("input[type=number]");
-
-      range.value = number.value = this.value || this.getAttribute("value") || 50;
-      range.min = number.min = this.getAttribute("min") || 0;
-      range.max = number.max = this.getAttribute("max") || 100;
-      range.step = number.step = this.getAttribute("step") || 1;
-
-      range.addEventListener("input", this.handleEvent.bind(this));
-      number.addEventListener("input", this.handleEvent.bind(this));
-      range.addEventListener("change", this.handleEvent.bind(this));
-      number.addEventListener("change", this.handleEvent.bind(this));
-    }
-
-    handleEvent(e) {
-      const value = e.target.value;
-      const isNaN = Number.isNaN(Number(value));
-      if (isNaN || value === "") return e.stopPropagation();
-
-      const range = this.querySelector("input[type=range]");
-      const number = this.querySelector("input[type=number]");
-      this.value = range.value = number.value = value;
-
-      this.dispatchEvent(
-        new CustomEvent(e.type, {
-          detail: {value},
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    set value(value) {
-      const range = this.querySelector("input[type=range]");
-      const number = this.querySelector("input[type=number]");
-      range.value = number.value = value;
-    }
-
-    get value() {
-      const number = this.querySelector("input[type=number]");
-      return number.value;
-    }
-
-    get valueAsNumber() {
-      const number = this.querySelector("input[type=number]");
-      return number.valueAsNumber;
-    }
-  }
-
-  customElements.define("slider-input", SliderInput);
-}
diff --git a/icons.css b/icons.css
index 4740f091..ae40ee00 100644
--- a/icons.css
+++ b/icons.css
@@ -253,7 +253,7 @@
 .icon-coa:before {content:'\f3ed'; font-size: .9em; color: #999;} /* '' */
 .icon-half:before {font-weight: bold;content:'½';}
 .icon-voice:before {content:'🔊';}
-.icon-robot:before {content:'🤖';}
+
 .icon-die:before {content:'🎲';}
 .icon-button-die:before {content:'🎲'; padding-right: .4em;}
 .icon-button-power:before {content:'💪'; padding-right: .6em;}
diff --git a/index.css b/index.css
index 373bf63c..555b650c 100644
--- a/index.css
+++ b/index.css
@@ -122,6 +122,10 @@ a {
   fill: none;
 }
 
+#biomes {
+  stroke-width: 0.7;
+}
+
 #landmass {
   mask: url(#land);
   fill-rule: evenodd;
@@ -166,7 +170,6 @@ t,
 #texture,
 #landmass,
 #vignette,
-#gridOverlay,
 #fogging {
   pointer-events: none;
 }
@@ -187,12 +190,20 @@ t,
   font-size: 0.8em;
 }
 
+#statesBody {
+  stroke-width: 3;
+}
+
 #statesHalo {
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
 
+#provincesBody {
+  stroke-width: 0.2;
+}
+
 #statesBody,
 #provincesBody,
 #relig,
@@ -345,14 +356,6 @@ text.drag {
   font-weight: bold;
 }
 
-button.ui-button:disabled {
-  filter: brightness(0.95);
-}
-
-button.ui-button:disabled:hover {
-  cursor: default;
-}
-
 .ui-dialog,
 #optionsContainer {
   user-select: none;
@@ -522,53 +525,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   font-size: smaller;
 }
 
-#options input[type="text"] {
-  border: 0px;
-  width: 62%;
-  font-size: smaller;
-}
-
-#options output {
-  text-align: right;
-  font-size: smaller;
-}
-
-#options input[type="number"] {
-  font-size: 0.8em;
-  border: 0;
-  text-align: right;
-  background-color: transparent;
-  width: 3.3em;
-}
-
-#options input[type="number"]::-webkit-inner-spin-button,
-#options input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-#options input[type="number"] {
-  appearance: textfield;
-  -moz-appearance: textfield;
-}
-
-#options input[type="number"]:hover {
-  outline: 1px solid var(--dark-solid);
-}
-
-#options input.paired {
-  text-align: center;
-  background-color: white;
-}
-
-#options input.long {
-  width: 100%;
-  background-color: white;
-  text-align: left;
-}
-
 #options input[type="range"] {
-  width: 100%;
   height: 8px;
   background: 0;
   appearance: none;
@@ -611,7 +568,55 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   height: 2px;
 }
 
-#options select {
+#options input[type="number"] {
+  font-size: 0.8em;
+}
+
+#options input[type="text"] {
+  border: 0px;
+  width: 62%;
+  font-size: smaller;
+}
+
+#optionsContent output {
+  text-align: right;
+  font-size: smaller;
+}
+
+#optionsContent input[type="number"] {
+  border: 0;
+  text-align: right;
+  background-color: transparent;
+  width: 3.3em;
+  -moz-appearance: textfield;
+}
+
+#optionsContent input[type="number"]::-webkit-inner-spin-button,
+#optionsContent input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+#optionsContent input[type="number"]:hover {
+  outline: 1px solid var(--dark-solid);
+}
+
+#optionsContent input.paired {
+  text-align: center;
+  background-color: white;
+}
+
+#optionsContent input.long {
+  width: 100%;
+  background-color: white;
+  text-align: left;
+}
+
+#optionsContent input[type="range"] {
+  width: 100%;
+}
+
+#optionsContent select {
   width: 100%;
 }
 
@@ -636,6 +641,19 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   transform: translate(0px, 1px);
 }
 
+#styleElements input[type="range"] {
+  width: 64%;
+}
+
+#styleElements select {
+  width: 64%;
+}
+
+#styleElements input[type="number"] {
+  width: 6em;
+  border: 0;
+}
+
 #styleSelectFont > option {
   font-size: 2em;
 }
@@ -674,7 +692,6 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   border: none;
   padding: 0.45em 0.75em;
   margin: 0.4em 0;
-  white-space: nowrap;
   font-family: var(--monospace);
   animation: glowing 2s infinite;
 }
@@ -707,6 +724,9 @@ input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0.45em 0.75em;
   margin: 0.35em 0;
   transition: 0.1s;
+  font-size: 1em;
+  text-transform: capitalize;
+
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -723,7 +743,7 @@ input[type="color"]::-webkit-color-swatch-wrapper {
 
 #toolsContent > .grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   margin: 0.2em 0;
 }
 
@@ -770,7 +790,7 @@ fieldset {
   text-overflow: ellipsis;
 }
 
-.tabcontent li.buttonoff {
+.tabcontent .buttonoff {
   background-color: var(--bg-disabled);
   color: #444444aa;
 }
@@ -1248,6 +1268,7 @@ i.resetButton:active {
   padding: 0;
   height: 2px;
   background: #d4d4d4;
+  top: -0.35em;
   position: relative;
   appearance: none;
   -webkit-appearance: none;
@@ -1512,6 +1533,20 @@ div.states > .burgCulture {
   width: 6em;
 }
 
+div.states .burgPopulation {
+  width: 4.8em;
+}
+
+div.states .burgType {
+  width: 3em;
+}
+
+div.states .burgType > span {
+  padding: 0 1px;
+  color: #6e5e66;
+  transition: 0.2s;
+}
+
 div.states span.inactive {
   color: #c6c2c2;
 }
@@ -1809,6 +1844,11 @@ div.editorLine {
   padding: 0px 3px !important;
 }
 
+#unitsBody > div > * {
+  display: inline-block;
+  margin-bottom: 0.2em;
+}
+
 .unitsHeader {
   margin: 0.8em 0 0 -1.1em;
   font-weight: bold;
@@ -1820,19 +1860,26 @@ div.editorLine {
   margin: 6px 0 0 6px;
 }
 
-#unitsBody label {
-  display: inline-block;
+#unitsBody > div > div {
   width: 9em;
 }
 
+#unitsBody > div > input[type="range"] {
+  width: 7em;
+}
+
 #unitsBody > div > select,
 #unitsBody > div > input[type="text"] {
-  width: 14.4em;
-  border: 1px solid #e9e9e9;
+  width: 12em;
 }
 
-#unitsBody input[type="range"] {
-  width: 9em;
+#unitsBody > div > input[type="number"] {
+  width: 4.35em;
+}
+
+#unitsBody > div > input,
+#unitsBody > div > select {
+  border: 1px solid #e9e9e9;
 }
 
 #unitsEditor i.icon-lock-open,
@@ -2367,34 +2414,6 @@ svg.button {
   margin-left: 0.25em;
 }
 
-@keyframes clockwiseBorderPulse {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-#chat-widget-container {
-  user-select: none;
-}
-
-#chat-widget-minimized {
-  animation: fadeIn 1s ease-in;
-  transform: scale(0.65);
-  opacity: var(--bg-opacity);
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: var(--bg-opacity);
-  }
-}
-
 @media print {
   div,
   canvas {
diff --git a/index.html b/index.html
index 5a18e579..6453976a 100644
--- a/index.html
+++ b/index.html
@@ -11,8 +11,8 @@
       name="description"
       content="Free web app that helps fantasy writers, game masters, and cartographers create and edit fantasy maps"
     />
-    <meta property="og:url" content="https://azgaar.github.io/Fantasy-Map-Generator" />
 
+    <meta property="og:url" content="https://azgaar.github.io/Fantasy-Map-Generator" />
     <meta property="og:title" content="Azgaar's Fantasy Map Generator" />
     <meta
       property="og:description"
@@ -138,14 +138,9 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=1.108.6" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=1.99.00" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
-    <link
-      rel="preload"
-      href="libs/jquery-ui.css?v=1.106.5"
-      as="style"
-      onload="this.onload=null; this.rel='stylesheet'"
-    />
+    <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
   </head>
   <body>
     <svg
@@ -349,15 +344,16 @@
         </g>
 
         <g id="deftemp">
-          <g id="featurePaths"></g>
-          <g id="textPaths"></g>
-          <g id="statePaths"></g>
-          <g id="defs-emblems"></g>
           <mask id="land"></mask>
-          <mask id="water"></mask>
+          <mask id="water">
+            <rect x="0" y="0" width="100%" height="100%" fill="white" />
+          </mask>
           <mask id="fog" style="stroke-width: 10; stroke: black; stroke-linejoin: round; stroke-opacity: 0.1">
             <rect x="0" y="0" width="100%" height="100%" fill="white" stroke="none" />
           </mask>
+          <g id="textPaths"></g>
+          <g id="statePaths"></g>
+          <g id="defs-emblems"></g>
         </g>
 
         <pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
@@ -442,7 +438,7 @@
           <select
             data-tip="Select a map layers preset"
             id="layersPreset"
-            onchange="handleLayersPresetChange(this.value)"
+            onchange="changePreset(this.value)"
             style="width: 45%"
           >
             <option value="political" selected>Political map</option>
@@ -482,6 +478,7 @@
               id="toggleTexture"
               data-tip="Texture overlay: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="X"
+              class="buttonoff"
               onclick="toggleTexture(event)"
             >
               Te<u>x</u>ture
@@ -490,6 +487,7 @@
               id="toggleHeight"
               data-tip="Heightmap: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="H"
+              class="buttonoff"
               onclick="toggleHeight(event)"
             >
               <u>H</u>eightmap
@@ -498,6 +496,7 @@
               id="toggleBiomes"
               data-tip="Biomes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="B"
+              class="buttonoff"
               onclick="toggleBiomes(event)"
             >
               <u>B</u>iomes
@@ -506,6 +505,7 @@
               id="toggleCells"
               data-tip="Cells structure: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="E"
+              class="buttonoff"
               onclick="toggleCells(event)"
             >
               C<u>e</u>lls
@@ -514,6 +514,7 @@
               id="toggleGrid"
               data-tip="Grid: click to toggle, drag to raise or lower. Ctrl + click to edit layer style and select type"
               data-shortcut="G"
+              class="buttonoff"
               onclick="toggleGrid(event)"
             >
               <u>G</u>rid
@@ -522,6 +523,7 @@
               id="toggleCoordinates"
               data-tip="Coordinate grid: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="O"
+              class="buttonoff"
               onclick="toggleCoordinates(event)"
             >
               C<u>o</u>ordinates
@@ -530,6 +532,7 @@
               id="toggleCompass"
               data-tip="Wind (Compass) Rose: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="W"
+              class="buttonoff"
               onclick="toggleCompass(event)"
             >
               <u>W</u>ind Rose
@@ -546,6 +549,7 @@
               id="toggleRelief"
               data-tip="Relief and biome icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="F"
+              class="buttonoff"
               onclick="toggleRelief(event)"
             >
               Relie<u>f</u>
@@ -554,6 +558,7 @@
               id="toggleReligions"
               data-tip="Religions: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="R"
+              class="buttonoff"
               onclick="toggleReligions(event)"
             >
               <u>R</u>eligions
@@ -562,6 +567,7 @@
               id="toggleCultures"
               data-tip="Cultures: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="C"
+              class="buttonoff"
               onclick="toggleCultures(event)"
             >
               <u>C</u>ultures
@@ -578,6 +584,7 @@
               id="toggleProvinces"
               data-tip="Provinces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="P"
+              class="buttonoff"
               onclick="toggleProvinces(event)"
             >
               <u>P</u>rovinces
@@ -586,6 +593,7 @@
               id="toggleZones"
               data-tip="Zones: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="Z"
+              class="buttonoff"
               onclick="toggleZones(event)"
             >
               <u>Z</u>ones
@@ -602,15 +610,17 @@
               id="toggleRoutes"
               data-tip="Trade routes: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="U"
+              class="buttonoff"
               onclick="toggleRoutes(event)"
             >
               Ro<u>u</u>tes
             </li>
             <li
-              id="toggleTemperature"
+              id="toggleTemp"
               data-tip="Temperature map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="T"
-              onclick="toggleTemperature(event)"
+              class="buttonoff"
+              onclick="toggleTemp(event)"
             >
               <u>T</u>emperature
             </li>
@@ -618,6 +628,7 @@
               id="togglePopulation"
               data-tip="Population map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="N"
+              class="buttonoff"
               onclick="togglePopulation(event)"
             >
               Populatio<u>n</u>
@@ -626,15 +637,17 @@
               id="toggleIce"
               data-tip="Icebergs and glaciers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="J"
+              class="buttonoff"
               onclick="toggleIce(event)"
             >
               Ice
             </li>
             <li
-              id="togglePrecipitation"
+              id="togglePrec"
               data-tip="Precipitation map: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="A"
-              onclick="togglePrecipitation(event)"
+              class="buttonoff"
+              onclick="togglePrec(event)"
             >
               Precipit<u>a</u>tion
             </li>
@@ -642,6 +655,7 @@
               id="toggleEmblems"
               data-tip="Emblems: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="Y"
+              class="buttonoff"
               onclick="toggleEmblems(event)"
             >
               Emblems
@@ -655,10 +669,10 @@
               <u>L</u>abels
             </li>
             <li
-              id="toggleBurgIcons"
+              id="toggleIcons"
               data-tip="Burg icons: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="I"
-              onclick="toggleBurgIcons(event)"
+              onclick="toggleIcons(event)"
             >
               <u>I</u>cons
             </li>
@@ -666,6 +680,7 @@
               id="toggleMilitary"
               data-tip="Military forces: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="M"
+              class="buttonoff"
               onclick="toggleMilitary(event)"
             >
               <u>M</u>ilitary
@@ -674,6 +689,7 @@
               id="toggleMarkers"
               data-tip="Markers: click to toggle, drag to raise or lower the layer. Ctrl + click to edit layer style"
               data-shortcut="K"
+              class="buttonoff"
               onclick="toggleMarkers(event)"
             >
               Mar<u>k</u>ers
@@ -682,6 +698,7 @@
               id="toggleRulers"
               data-tip="Rulers: click to toggle, drag to move, click on label to delete. Ctrl + click to edit layer style"
               data-shortcut="= (equal sign)"
+              class="buttonoff"
               onclick="toggleRulers(event)"
             >
               Rulers
@@ -819,24 +836,27 @@
                 </td>
               </tr>
 
-              <tr data-tip="Terracing power. Set to 0 to toggle off">
+              <tr data-tip="Terracing rate. Set to 0 (toggle off) to improve performance">
                 <td>Terracing</td>
                 <td>
-                  <slider-input id="styleHeightmapTerracing" min="0" max="20" step="1"></slider-input>
+                  <input id="styleHeightmapTerracingInput" type="range" min="0" max="20" step="1" />
+                  <output id="styleHeightmapTerracingOutput">0</output>
                 </td>
               </tr>
 
               <tr data-tip="Layers reduction rate. Increase to improve performance">
                 <td>Reduce layers</td>
                 <td>
-                  <slider-input id="styleHeightmapSkip" min="0" max="10" step="1"></slider-input>
+                  <input id="styleHeightmapSkipInput" type="range" min="0" max="10" step="1" value="5" />
+                  <output id="styleHeightmapSkipOutput">5</output>
                 </td>
               </tr>
 
               <tr data-tip="Line simplification rate. Increase to slightly improve performance">
                 <td>Simplify line</td>
                 <td>
-                  <slider-input id="styleHeightmapSimplification" min="0" max="10" step="1"></slider-input>
+                  <input id="styleHeightmapSimplificationInput" type="range" min="0" max="10" step="1" value="0" />
+                  <output id="styleHeightmapSimplificationOutput">0</output>
                 </td>
               </tr>
 
@@ -854,7 +874,7 @@
               <tr data-tip="Select color scheme for the element">
                 <td>Color scheme</td>
                 <td>
-                  <select id="styleHeightmapScheme" style="width: 86%"></select>
+                  <select id="styleHeightmapScheme"></select>
                   <button
                     id="openCreateHeightmapSchemeButton"
                     data-tip="Click to add a custom heightmap color scheme"
@@ -869,7 +889,8 @@
               <tr data-tip="Set opacity. 0: transparent, 1: solid">
                 <td>Opacity</td>
                 <td>
-                  <slider-input id="styleOpacityInput" min="0" max="1" step="0.01"></slider-input>
+                  <input id="styleOpacityInput" type="range" min="0" max="1" step="0.01" value=".4" />
+                  <output id="styleOpacityOutput">0.4</output>
                 </td>
               </tr>
             </tbody>
@@ -878,7 +899,8 @@
               <tr data-tip="Set maximum number of items in one column">
                 <td>Column items</td>
                 <td>
-                  <slider-input id="styleLegendColItems" min="1" max="30" step="1"></slider-input>
+                  <input id="styleLegendColItems" type="range" min="1" max="30" step="1" value="8" />
+                  <output id="styleLegendColItemsOutput">8</output>
                 </td>
               </tr>
 
@@ -893,7 +915,8 @@
               <tr data-tip="Set background opacity">
                 <td>Opacity</td>
                 <td>
-                  <slider-input id="styleLegendOpacity" min="0" max="1" step=".01"></slider-input>
+                  <input id="styleLegendOpacity" type="range" min="0" max="1" step="0.01" value="1" />
+                  <output id="styleLegendOpacityOutput">1</output>
                 </td>
               </tr>
             </tbody>
@@ -920,7 +943,7 @@
               <tr data-tip="Select texture image. Big textures can highly affect performance">
                 <td>Image</td>
                 <td>
-                  <select id="styleTextureInput" style="width: 86%">
+                  <select id="styleTextureInput">
                     <option value="">No texture</option>
                     <option value="./images/textures/folded-paper-big.jpg">Folded paper big</option>
                     <option value="./images/textures/folded-paper-small.jpg">Folded paper small</option>
@@ -1004,7 +1027,8 @@
               <tr data-tip="Set vignette blue propagation (in pixels)">
                 <td>Blur</td>
                 <td>
-                  <slider-input id="styleVignetteBlur" min="0" max="400" step="1"></slider-input>
+                  <input id="styleVignetteBlur" type="range" min="0" max="400" step="1" value="50" />
+                  <output id="styleVignetteBlurOutput">50</output>px
                 </td>
               </tr>
             </tbody>
@@ -1029,7 +1053,8 @@
               <tr data-tip="Set ocean pattern opacity">
                 <td>Pattern opacity</td>
                 <td>
-                  <slider-input id="styleOceanPatternOpacity" min="0" max="1" step=".01"></slider-input>
+                  <input id="styleOceanPatternOpacity" type="range" min="0" max="1" step=".01" value=".2" />
+                  <output id="styleOceanPatternOpacityOutput">0.2</output>
                 </td>
               </tr>
 
@@ -1065,13 +1090,6 @@
                     <option value="pointyHex">Hex grid (pointy)</option>
                     <option value="flatHex">Hex grid (flat)</option>
                     <option value="square">Square grid</option>
-                    <option value="square45deg">Square 45 degrees grid</option>
-                    <option value="squareTruncated">Truncated square grid</option>
-                    <option value="squareTetrakis">Tetrakis square grid</option>
-                    <option value="triangleHorizontal">Triangle grid (horizontal)</option>
-                    <option value="triangleVertical">Triangle grid (vertical)</option>
-                    <option value="trihexagonal">Trihexagonal grid</option>
-                    <option value="rhombille">Rhombille grid</option>
                   </select>
                 </td>
               </tr>
@@ -1084,15 +1102,6 @@
                     id="styleGridSizeFriendly"
                     data-tip="Distance between grid cell centers (in map scale)"
                   ></output>
-                  <a
-                    href="https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Scale-and-distance#grids"
-                    target="_blank"
-                  >
-                    <span
-                      data-tip="Open wiki article scale and distance to know about grid scale"
-                      class="icon-info-circled pointer"
-                    ></span>
-                  </a>
                 </td>
               </tr>
 
@@ -1109,7 +1118,8 @@
               <tr data-tip="Set wind (compass) rose size">
                 <td>Size</td>
                 <td>
-                  <slider-input id="styleCompassSizeInput" min=".02" max="1" step=".01"></slider-input>
+                  <input id="styleCompassSizeInput" type="range" min=".02" max="1" step=".01" value=".25" />
+                  <output id="styleCompassSizeOutput">.25</output>
                 </td>
               </tr>
 
@@ -1137,7 +1147,8 @@
               <tr data-tip="Define the size of relief icons. All relief icons will be regenerated">
                 <td>Size</td>
                 <td>
-                  <slider-input id="styleReliefSize" min=".2" max="4" step=".01"></slider-input>
+                  <input id="styleReliefSizeInput" data-stored="reliefSize" type="range" min=".2" max="4" step=".01" />
+                  <output id="styleReliefSizeOutput"></output>
                 </td>
               </tr>
 
@@ -1146,14 +1157,23 @@
               >
                 <td>Density</td>
                 <td>
-                  <slider-input id="styleReliefDensity" min=".3" max=".8" step=".01"></slider-input>
+                  <input
+                    id="styleReliefDensityInput"
+                    data-stored="reliefDensity"
+                    type="range"
+                    min=".3"
+                    max=".8"
+                    step=".01"
+                    value=".4"
+                  />
+                  <output id="styleReliefDensityOutput">.4</output>
                 </td>
               </tr>
             </tbody>
 
             <tbody id="styleFill">
               <tr data-tip="Set fill color">
-                <td>Fill color</td>
+                <td>Fill</td>
                 <td>
                   <input id="styleFillInput" type="color" value="#5E4FA2" />
                   <output id="styleFillOutput">#5E4FA2</output>
@@ -1163,7 +1183,7 @@
 
             <tbody id="styleStroke">
               <tr data-tip="Set stroke color">
-                <td>Stroke color</td>
+                <td>Stroke</td>
                 <td>
                   <input id="styleStrokeInput" type="color" value="#5E4FA2" />
                   <output id="styleStrokeOutput">#5E4FA2</output>
@@ -1175,16 +1195,8 @@
               <tr data-tip="Set stroke width">
                 <td>Stroke width</td>
                 <td>
-                  <slider-input id="styleStrokeWidthInput" min="0" max="5" step=".01"></slider-input>
-                </td>
-              </tr>
-            </tbody>
-
-            <tbody id="styleLetterSpacing">
-              <tr data-tip="Set letter spacing">
-                <td>Letter spacing</td>
-                <td>
-                  <slider-input id="styleLetterSpacingInput" min="0" max="20" step=".01"></slider-input>
+                  <input id="styleStrokeWidthInput" type="range" min="0" max="5" step=".01" value="1" />
+                  <output id="styleStrokeWidthOutput">1</output>
                 </td>
               </tr>
             </tbody>
@@ -1217,7 +1229,7 @@
               <tr data-tip="Select font">
                 <td>Font</td>
                 <td>
-                  <select id="styleSelectFont" style="width: 85%"></select>
+                  <select id="styleSelectFont"></select>
                   <button id="styleFontAdd" data-tip="Add a font" class="icon-plus sideButton"></button>
                 </td>
               </tr>
@@ -1229,7 +1241,7 @@
                 <td>
                   <button id="styleFontPlus" data-tip="Increase font" class="whiteButton">+</button>
                   <button id="styleFontMinus" data-tip="Descrease font" class="whiteButton">-</button>
-                  <input id="styleFontSize" type="number" min=".5" max="100" step=".1" />
+                  <input id="styleFontSize" type="number" min=".5" max="100" step=".1" value="14" />
                 </td>
               </tr>
             </tbody>
@@ -1269,14 +1281,16 @@
               <tr data-tip="Define transparency of temperature leyer. Set to 0 to make it fully transparent">
                 <td>Fill opacity</td>
                 <td>
-                  <slider-input id="styleTemperatureFillOpacityInput" min="0" max="1" step=".01"></slider-input>
+                  <input id="styleTemperatureFillOpacityInput" type="range" min="0" max="1" step=".01" value=".3" />
+                  <output id="styleTemperatureFillOpacityOutput">0.3</output>
                 </td>
               </tr>
 
               <tr data-tip="Set labels size">
                 <td>Labels size</td>
                 <td>
-                  <slider-input id="styleTemperatureFontSizeInput" min="0" max="30" step="1"></slider-input>
+                  <input id="styleTemperatureFontSizeInput" type="range" min="0" max="30" value="8" />
+                  <output id="styleTemperatureFontSizeOutput">8</output>
                 </td>
               </tr>
 
@@ -1293,7 +1307,8 @@
               <tr data-tip="Set states fill opacity. 0: invisible, 1: solid">
                 <td>Body opacity</td>
                 <td>
-                  <slider-input id="styleStatesBodyOpacity" min="0" max="1" step="0.01"></slider-input>
+                  <input id="styleStatesBodyOpacity" type="range" min="0" max="1" step="0.01" />
+                  <output id="styleStatesBodyOpacityOutput"></output>
                 </td>
               </tr>
 
@@ -1311,21 +1326,24 @@
               <tr data-tip="Set states halo effect width">
                 <td>Halo width</td>
                 <td>
-                  <slider-input id="styleStatesHaloWidth" min="0" max="30" step="0.1"></slider-input>
+                  <input id="styleStatesHaloWidth" type="range" min="0" max="30" step=".1" value="10" />
+                  <output id="styleStatesHaloWidthOutput">10</output>
                 </td>
               </tr>
 
               <tr data-tip="Set states halo effect opacity. 0: invisible, 1: solid">
                 <td>Halo opacity</td>
                 <td>
-                  <slider-input id="styleStatesHaloOpacity" min="0" max="1" step="0.01"></slider-input>
+                  <input id="styleStatesHaloOpacity" type="range" min="0" max="1" step="0.01" value="1" />
+                  <output id="styleStatesHaloOpacityOutput">1</output>
                 </td>
               </tr>
 
               <tr data-tip="Select halo effect power (blur). Set to 0 to make it solid line" style="margin-bottom: 1em">
                 <td>Halo blur</td>
                 <td>
-                  <slider-input id="styleStatesHaloBlur" min="0" max="10" step="0.01"></slider-input>
+                  <input id="styleStatesHaloBlur" type="range" min="0" max="10" step="0.01" value="4" />
+                  <output id="styleStatesHaloBlurOutput">4</output>
                 </td>
               </tr>
             </tbody>
@@ -1334,36 +1352,62 @@
               <tr data-tip="Set fill transparency. Set to 0 to make it fully transparent">
                 <td>Fill opacity</td>
                 <td>
-                  <slider-input id="styleArmiesFillOpacity" min="0" max="1" step=".01"></slider-input>
+                  <input id="styleArmiesFillOpacity" type="range" min="0" max="1" step=".01" value="1" />
+                  <output id="styleArmiesFillOpacityOutput">1</output>
                 </td>
               </tr>
               <tr data-tip="Set regiment box size. All regiments will be redrawn on change (position will defaulted)">
                 <td>Box Size</td>
                 <td>
-                  <slider-input id="styleArmiesSize" min="0" max="10" step=".1"></slider-input>
+                  <input id="styleArmiesSize" type="range" min="1" max="10" step=".1" value="3" />
+                  <output id="styleArmiesSizeOutput">3</output>
                 </td>
               </tr>
             </tbody>
 
             <tbody id="styleEmblems">
               <tr data-tip="Set state emblems size multiplier">
-                <td>State size</td>
+                <td>State Size</td>
                 <td>
-                  <slider-input id="emblemsStateSizeInput" min="0" max="5" step=".01"></slider-input>
+                  <input
+                    id="emblemsStateSizeInput"
+                    data-stored="emblemsStateSize"
+                    type="number"
+                    min="0"
+                    max="5"
+                    step=".02"
+                    value="1"
+                  />
                 </td>
               </tr>
 
               <tr data-tip="Set province emblems size multiplier">
-                <td>Province size</td>
+                <td>Province Size</td>
                 <td>
-                  <slider-input id="emblemsProvinceSizeInput" min="0" max="5" step=".01"></slider-input>
+                  <input
+                    id="emblemsProvinceSizeInput"
+                    data-stored="emblemsProvinceSize"
+                    type="number"
+                    min="0"
+                    max="5"
+                    step=".02"
+                    value="1"
+                  />
                 </td>
               </tr>
 
               <tr data-tip="Set burg emblems size multiplier">
-                <td>Burg size</td>
+                <td>Burg Size</td>
                 <td>
-                  <slider-input id="emblemsBurgSizeInput" min="0" max="5" step=".01"></slider-input>
+                  <input
+                    id="emblemsBurgSizeInput"
+                    data-stored="emblemsBurgSize"
+                    type="number"
+                    min="0"
+                    max="5"
+                    step=".02"
+                    value="1"
+                  />
                 </td>
               </tr>
 
@@ -1451,14 +1495,15 @@
               <tr data-tip="Set background opacity. 0: transparent, 1: solid">
                 <td>Back opacity</td>
                 <td>
-                  <slider-input id="styleScaleBarBackgroundOpacity" min="0" max="1" step=".01"></slider-input>
+                  <input id="styleScaleBarBackgroundOpacityInput" type="range" min="0" max="1" step="0.01" />
+                  <output id="styleScaleBarBackgroundOpacityOutput"></output>
                 </td>
               </tr>
 
               <tr data-tip="Set background fill color">
                 <td>Back fill</td>
                 <td>
-                  <input id="styleScaleBarBackgroundFill" type="color" />
+                  <input id="styleScaleBarBackgroundFillInput" type="color" />
                   <output id="styleScaleBarBackgroundFillOutput"></output>
                 </td>
               </tr>
@@ -1466,7 +1511,7 @@
               <tr data-tip="Set background stroke color and width">
                 <td>Back stroke</td>
                 <td>
-                  <input id="styleScaleBarBackgroundStroke" type="color" />
+                  <input id="styleScaleBarBackgroundStrokeInput" type="color" />
                   <output id="styleScaleBarBackgroundStrokeOutput"></output>
 
                   <span>Width </span>
@@ -1528,9 +1573,7 @@
               <td></td>
             </tr>
 
-            <tr
-              data-tip="Map seed number. Press 'Enter' to apply. Seed produces the same map only if canvas size and options are the same"
-            >
+            <tr data-tip="Map seed number. Seed produces the same map only if canvas size and options are the same">
               <td>
                 <i
                   data-tip="Show seed history to apply a previous seed"
@@ -1596,7 +1639,7 @@
 
             <tr data-tip="Define current year and era name">
               <td>
-                <i data-locked="0" id="lock_year" data-ids="year,era" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_era" class="icon-lock-open"></i>
               </td>
               <td>Year and era</td>
               <td>
@@ -1640,10 +1683,10 @@
               </td>
               <td>Cultures number</td>
               <td>
-                <input id="culturesInput" data-stored="cultures" type="range" min="1" />
+                <input id="culturesInput" data-stored="cultures" type="range" min="1" max="32" value="14" />
               </td>
               <td>
-                <input id="culturesOutput" data-stored="cultures" type="number" min="1" />
+                <input id="culturesOutput" data-stored="cultures" type="number" min="1" max="32" value="14" />
               </td>
             </tr>
 
@@ -1669,41 +1712,53 @@
 
             <tr data-tip="Define how many states and capitals should be generated">
               <td>
-                <i data-locked="0" id="lock_statesNumber" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_regions" class="icon-lock-open"></i>
               </td>
               <td>States number</td>
-              <td colspan="2">
-                <slider-input id="statesNumber" data-stored="statesNumber" min="0" max="100"></slider-input>
+              <td>
+                <input id="regionsInput" data-stored="regions" type="range" min="0" max="99" value="13" />
+              </td>
+              <td>
+                <input id="regionsOutput" data-stored="regions" type="number" min="0" max="999" value="13" />
               </td>
             </tr>
 
             <tr data-tip="Define burgs percentage to form a separate province">
               <td>
-                <i data-locked="0" id="lock_provincesRatio" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_provinces" class="icon-lock-open"></i>
               </td>
               <td>Provinces ratio</td>
-              <td colspan="2">
-                <slider-input id="provincesRatio" data-stored="provincesRatio" min="0" max="100"></slider-input>
+              <td>
+                <input id="provincesInput" data-stored="provinces" type="range" min="0" max="100" value="30" />
+              </td>
+              <td>
+                <input id="provincesOutput" data-stored="provinces" type="number" min="0" max="100" value="30" />
               </td>
             </tr>
 
             <tr data-tip="Define how much states and cultures can vary in size. Defines expansionism value">
               <td>
-                <i data-locked="0" id="lock_sizeVariety" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_power" class="icon-lock-open"></i>
               </td>
               <td>Size variety</td>
-              <td colspan="2">
-                <slider-input id="sizeVariety" data-stored="sizeVariety" min="0" max="10" step=".1"></slider-input>
+              <td>
+                <input id="powerInput" data-stored="power" type="range" min="0" max="10" step=".2" value="5" />
+              </td>
+              <td>
+                <input id="powerOutput" data-stored="power" type="number" min="0" max="10" step=".1" value="5" />
               </td>
             </tr>
 
             <tr data-tip="Set state and cultures growth rate. Defines how many lands will stay neutral">
               <td>
-                <i data-locked="0" id="lock_growthRate" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_neutral" class="icon-lock-open"></i>
               </td>
               <td>Growth rate</td>
-              <td colspan="2">
-                <slider-input id="growthRate" data-stored="growthRate" min=".1" max="2" step=".1"></slider-input>
+              <td>
+                <input id="neutralInput" data-stored="neutral" type="range" min=".1" max="2" step=".1" value="1" />
+              </td>
+              <td>
+                <input id="neutralOutput" data-stored="neutral" type="number" min=".1" max="2" step=".1" value="1" />
               </td>
             </tr>
 
@@ -1724,17 +1779,14 @@
               data-tip="Define how many organized religions and cults should be generated. Cultures will have their own folk religions in any case"
             >
               <td>
-                <i data-locked="0" id="lock_religionsNumber" class="icon-lock-open"></i>
+                <i data-locked="0" id="lock_religions" class="icon-lock-open"></i>
               </td>
               <td>Religions number</td>
-              <td colspan="2">
-                <slider-input
-                  id="religionsNumber"
-                  data-stored="religionsNumber"
-                  min="0"
-                  max="50"
-                  step="1"
-                ></slider-input>
+              <td>
+                <input id="religionsInput" data-stored="religions" type="range" min="0" max="50" step="1" value="15" />
+              </td>
+              <td>
+                <output id="religionsOutput" data-stored="religions" value="auto"></output>
               </td>
             </tr>
 
@@ -1763,16 +1815,22 @@
             >
               <td></td>
               <td>Interface size</td>
-              <td colspan="2">
-                <slider-input id="uiSize" data-stored="uiSize" min=".6" max="3" step=".1"></slider-input>
+              <td>
+                <input id="uiSizeInput" data-stored="uiSize" type="range" min=".6" max="3" step=".1" />
+              </td>
+              <td>
+                <input id="uiSizeOutput" data-stored="uiSize" type="number" min=".6" max="3" step=".1" />
               </td>
             </tr>
 
             <tr data-tip="Set tooltip size">
               <td></td>
               <td>Tooltip size</td>
-              <td colspan="2">
-                <slider-input id="tooltipSize" data-stored="tooltipSize" min="1" max="32" value="14"></slider-input>
+              <td>
+                <input id="tooltipSizeInput" data-stored="tooltipSize" type="range" min="4" max="32" value="14" />
+              </td>
+              <td>
+                <input id="tooltipSizeOutput" data-stored="tooltipSize" type="number" min="0" max="256" value="14" />
               </td>
             </tr>
 
@@ -1792,8 +1850,11 @@
             <tr data-tip="Set dialog and tool windows transparency">
               <td></td>
               <td>Transparency</td>
-              <td colspan="2">
-                <slider-input id="transparencyInput" data-stored="transparency" min="0" max="100"></slider-input>
+              <td>
+                <input id="transparencyInput" data-stored="transparency" type="range" min="0" max="100" />
+              </td>
+              <td>
+                <input id="transparencyOutput" data-stored="transparency" type="number" min="0" max="100" />
               </td>
             </tr>
 
@@ -1836,17 +1897,6 @@
               <td></td>
             </tr>
 
-            <tr data-tip="Toggle Azgaar Assistant (help bubble on the bottom right corner)">
-              <td></td>
-              <td>Azgaar assistant</td>
-              <td>
-                <select id="azgaarAssistant" data-stored="azgaarAssistant">
-                  <option value="show" selected>Show</option>
-                  <option value="hide">Hide</option>
-                </select>
-              </td>
-            </tr>
-
             <tr data-tip="Select speech synthesis voice to pronounce generated names">
               <td></td>
               <td>Speaker voice</td>
@@ -2010,8 +2060,8 @@
             </button>
             <button
               id="optionsReset"
-              data-tip="Click to restore default options and reload the page"
-              onclick="cleanupData()"
+              data-tip="Click to restore default options (page will be reloaded)"
+              onclick="restoreDefaultOptions()"
             >
               Reset to defaults
             </button>
@@ -2095,7 +2145,7 @@
               id="regenerateStateLabels"
               data-tip="Click to update state labels placement based on current borders"
             >
-              State Labels
+              Labels
             </button>
             <button id="regenerateMarkers" data-tip="Click to regenerate unlocked markers">
               Markers <i id="configRegenerateMarkers" class="icon-cog" data-tip="Click to set number multiplier"></i>
@@ -2128,7 +2178,7 @@
             <button id="regenerateRoutes" data-tip="Click to regenerate all unlocked routes">Routes</button>
             <button
               id="regenerateStates"
-              data-tip="Click to regenerate non-locked states. Emblems and military forces will be regenerated as well, burgs will remain as they are, but capitals will be different"
+              data-tip="Click to select new capitals and regenerate non-locked states. Emblems and military forces will be regenerated as well, burgs will remain as they are"
             >
               States
             </button>
@@ -2189,8 +2239,8 @@
 
           <div class="separator">Create</div>
           <div class="grid">
-            <button id="openSubmapTool" data-tip="Click to generate a submap from the current viewport">Submap</button>
-            <button id="openTransformTool" data-tip="Click to transform the map">Transform</button>
+            <button id="openSubmapMenu" data-tip="Click to generate a submap from the current viewport">Submap</button>
+            <button id="openResampleMenu" data-tip="Click to transform the map">Transform</button>
           </div>
         </div>
 
@@ -2699,24 +2749,6 @@
           />
         </div>
 
-        <button id="labelLetterSpacingShow" data-tip="Show the letter spacing section" class="icon-text-width"></button>
-        <div id="labelLetterSpacingSection" style="display: none">
-          <button
-            id="labelLetterSpacingHide"
-            data-tip="Hide the letter spacing section"
-            class="icon-text-width"
-          ></button>
-          <slider-input
-            id="labelLetterSpacingSize"
-            style="display: inline-block"
-            data-tip="Set the letter spacing size for this label"
-            min="0"
-            max="20"
-            step=".01"
-            value="0"
-          ></slider-input>
-        </div>
-
         <button id="labelAlign" data-tip="Turn text path into a straight line" class="icon-resize-horizontal"></button>
         <button id="labelLegend" data-tip="Edit free text notes (legend) for this label" class="icon-edit"></button>
         <button
@@ -3354,7 +3386,7 @@
               <use id="burgEmblem"></use>
             </svg>
             <div style="display: grid; grid-auto-rows: minmax(1.6em, auto)">
-              <div id="burgProvinceAndState" style="font-weight: bold; max-width: 16em"></div>
+              <div id="burgProvinceAndState" style="font-style: italic; max-width: 16em"></div>
 
               <div>
                 <div class="label">Name:</div>
@@ -3363,7 +3395,7 @@
                   data-tip="Type to rename the burg"
                   autocorrect="off"
                   spellcheck="false"
-                  style="width: 9em"
+                  style="width: 8em"
                 />
                 <span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
                 <span
@@ -3375,7 +3407,7 @@
 
               <div data-tip="Select burg type. Type slightly affects emblem generation">
                 <div class="label">Type:</div>
-                <select id="burgType" style="width: 9em">
+                <select id="burgType" style="width: 8em">
                   <option value="Generic">Generic</option>
                   <option value="River">River</option>
                   <option value="Lake">Lake</option>
@@ -3388,7 +3420,7 @@
 
               <div data-tip="Select dominant culture">
                 <div class="label">Culture:</div>
-                <select id="burgCulture" style="width: 9em"></select>
+                <select id="burgCulture" style="width: 8em"></select>
                 <span
                   id="burgNameReCulture"
                   data-tip="Generate culture-specific name for the burg"
@@ -3398,22 +3430,18 @@
 
               <div data-tip="Set burg population">
                 <div class="label">Population:</div>
-                <input id="burgPopulation" type="number" min="0" step="1" style="width: 9em" />
+                <input id="burgPopulation" type="number" min="0" step="1" style="width: 8em" />
               </div>
 
-              <div data-tip="Burg average yearly temperature" style="display: flex; justify-content: space-between">
-                <div>
-                  <div class="label">Temperature:</div>
-                  <span id="burgTemperature"></span>
-                </div>
-                <div style="display: flex; gap: 0.5em">
-                  <i class="icon-info-circled" id="burgTemperatureLikeIn"></i>
-                  <i
-                    id="burgTemperatureGraph"
-                    data-tip="Show temperature graph for the burg"
-                    class="icon-chart-area pointer"
-                  ></i>
-                </div>
+              <div data-tip="Burg mean annual temperature and real-world city for comparison">
+                <div class="label">Temperature:</div>
+                <span id="burgTemperature"></span>, like in
+                <span id="burgTemperatureLikeIn"></span>
+                <i
+                  id="burgTemperatureGraph"
+                  data-tip="Show temperature graph for the burg"
+                  class="icon-chart-area pointer"
+                ></i>
               </div>
 
               <div data-tip="Burg height above mean sea level">
@@ -3486,7 +3514,7 @@
                 <i id="burgLinkOpen" data-tip="Open burg map in a new tab" class="icon-link-ext pointer"></i>
               </div>
             </div>
-            <div id="burgPreviewObject" style="pointer-events: none"></div>
+            <div id="burgPreviewObject" style="max-width: 30em; pointer-events: none"></div>
           </div>
         </div>
 
@@ -3527,12 +3555,7 @@
 
           <button id="burgEditEmblem" data-tip="Edit emblem" class="icon-shield-alt"></button>
           <button id="burgTogglePreview" data-tip="Toggle preview" class="icon-map"></button>
-          <button id="burgLocate" data-tip="Zoom map and center view in the burg" class="icon-target"></button>
-          <button
-            id="burgRelocate"
-            data-tip="Relocate burg. Click on map to move the burg"
-            class="icon-map-pin"
-          ></button>
+          <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
           <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
           <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
           <button
@@ -3553,9 +3576,9 @@
             <input id="markerType" style="width: 10.3em" />
           </div>
 
-          <div data-tip="Marker icon" style="display: flex; align-items: center">
+          <div data-tip="Marker icon. Paste any Unicode symbol or select from the predefined list">
             <div class="label">Icon:</div>
-            <div id="markerIcon" style="font-size: 1.5em; width: 3.7em">👑</div>
+            <input id="markerIcon" style="width: 5em" />
             <button id="markerIconSelect" style="width: 5em">select</button>
           </div>
 
@@ -3644,10 +3667,10 @@
             ></i>
           </div>
 
-          <div data-tip="Regiment emblem" style="display: flex; align-items: center">
-            <div class="label">Emblem:</div>
-            <div id="regimentEmblem" style="font-size: 1.5em; width: 3.7em"></div>
-            <button id="regimentEmblemChange" style="padding: 0; width: 4.5em">change</button>
+          <div data-tip="Regiment emblem. Paste any Unicode symbol or select from the predefined list">
+            <div class="label italic">Emblem:</div>
+            <input id="regimentEmblem" style="width: 5em" />
+            <button id="regimentEmblemSelect" style="padding: 0; width: 4.5em">select</button>
           </div>
 
           <div id="regimentComposition" class="table"></div>
@@ -4100,24 +4123,72 @@
         </div>
 
         <div id="brushesSliders" style="display: none">
-          <div data-tip="Change brush size. Shortcut: + to increase; – to decrease">
-            <slider-input id="heightmapBrushRadius" min="1" max="100" value="25">
-              <div style="width: 3.5em">Radius:</div>
-            </slider-input>
+          <div data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" style="padding-bottom: 1px">
+            <div style="width: 3.2em; display: inline-block"><i>Radius:</i></div>
+            <input
+              id="brushRadius"
+              oninput="tip('Brush radius: '+this.value); brushRadiusNumber.value = this.value"
+              type="range"
+              min="1"
+              max="99"
+              value="25"
+              style="width: 13em"
+            />
+            <input
+              id="brushRadiusNumber"
+              oninput="tip('Brush radius: '+this.value); brushRadius.value = this.value"
+              type="number"
+              min="1"
+              max="99"
+              value="25"
+              style="border: 1px solid #d4d4d4"
+            />
           </div>
 
-          <div data-tip="Change brush power">
-            <slider-input id="heightmapBrushPower" min="1" max="10" value="5">
-              <div style="width: 3.5em">Power:</div>
-            </slider-input>
+          <div data-tip="Set the brush power">
+            <div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
+            <input
+              id="brushPower"
+              oninput="tip('Brush power: '+this.value); brushPowerNumber.value = this.value"
+              type="range"
+              min="1"
+              max="10"
+              value="5"
+              style="width: 13em"
+            />
+            <input
+              id="brushPowerNumber"
+              oninput="tip('Brush power: '+this.value); brushPower.value = this.value"
+              type="number"
+              min="1"
+              max="10"
+              value="5"
+              style="border: 1px solid #d4d4d4"
+            />
           </div>
         </div>
 
         <div id="lineSlider" style="display: none">
-          <div data-tip="Change tool power. Shortcut: + to increase; – to decrease">
-            <slider-input id="heightmapLinePower" min="-100" max="100" value="30">
-              <div style="width: 3.5em">Power:</div>
-            </slider-input>
+          <div data-tip="Set change power">
+            <div style="width: 3.2em; display: inline-block"><i>Power:</i></div>
+            <input
+              id="linePower"
+              oninput="tip('Line power: '+this.value); linePowerNumber.value = this.value"
+              type="range"
+              min="-100"
+              max="100"
+              value="30"
+              style="width: 13em"
+            />
+            <input
+              id="linePowerNumber"
+              oninput="tip('Line power: '+this.value); linePower.value = this.value"
+              type="number"
+              min="-100"
+              max="100"
+              value="30"
+              style="border: 1px solid #d4d4d4"
+            />
           </div>
         </div>
 
@@ -4383,10 +4454,26 @@
             class="icon-brush"
           ></button>
           <div id="biomesManuallyButtons" style="display: none">
-            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
-              Brush size:
-              <slider-input id="biomesBrush" min="1" max="100" value="15"></slider-input>
-            </div>
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
+              >Brush radius:
+              <input
+                id="biomesManuallyBrush"
+                oninput="tip('Brush radius: '+this.value); biomesManuallyBrushNumber.value = this.value"
+                type="range"
+                min="5"
+                max="99"
+                value="15"
+                style="width: 4em"
+              />
+              <input
+                id="biomesManuallyBrushNumber"
+                oninput="tip('Brush radius: '+this.value); biomesManuallyBrush.value = this.value"
+                type="number"
+                min="5"
+                max="99"
+                value="15"
+              /> </label
+            ><br />
             <button id="biomesManuallyApply" data-tip="Apply current assignment" class="icon-check"></button>
             <button id="biomesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
           </div>
@@ -4611,10 +4698,26 @@
 
           <button id="provincesManually" data-tip="Manually re-assign provinces" class="icon-brush"></button>
           <div id="provincesManuallyButtons" style="display: none">
-            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
-              Brush size:
-              <slider-input id="provincesBrush" min="1" max="100" value="8"></slider-input>
-            </div>
+            <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
+              >Brush size:
+              <input
+                id="provincesManuallyBrush"
+                oninput="tip('Brush size: '+this.value); provincesManuallyBrushNumber.value = this.value"
+                type="range"
+                min="5"
+                max="99"
+                value="8"
+                style="width: 5em"
+              />
+              <input
+                id="provincesManuallyBrushNumber"
+                oninput="tip('Brush size: '+this.value); provincesManuallyBrush.value = this.value"
+                type="number"
+                min="5"
+                max="99"
+                value="8"
+              /> </label
+            ><br />
             <button id="provincesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
             <button id="provincesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
           </div>
@@ -4790,7 +4893,7 @@
           <span style="margin-left: 2px">Names data: </span>
         </div>
 
-        <div id="namesbaseBody" style="margin-block: 2px; width: auto">
+        <div id="namesbaseBody" style="margin-block: 2px">
           <textarea
             id="namesbaseTextarea"
             data-base="0"
@@ -4799,7 +4902,6 @@
             placeholder="Provide a names data: a comma separated list of source names"
             autocorrect="off"
             spellcheck="false"
-            style="resize: none"
           ></textarea>
 
           <div>
@@ -4895,11 +4997,7 @@
         <div id="zonesBottom">
           <button id="zonesEditorRefresh" data-tip="Refresh the Editor" class="icon-cw"></button>
           <button id="zonesEditStyle" data-tip="Edit zones style in Style Editor" class="icon-adjust"></button>
-          <button
-            id="zonesLegend"
-            data-tip="Toggle Legend box (shows all non-hidden zones)"
-            class="icon-list-bullet"
-          ></button>
+          <button id="zonesLegend" data-tip="Toggle Legend box" class="icon-list-bullet"></button>
           <button
             id="zonesPercentage"
             data-tip="Toggle percentage / absolute values views"
@@ -4908,10 +5006,29 @@
 
           <button id="zonesManually" data-tip="Re-assign zones" class="icon-brush"></button>
           <div id="zonesManuallyButtons" style="display: none">
-            <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em">
-              Brush size:
-              <slider-input id="zonesBrush" min="1" max="100" value="8"></slider-input>
+            <div>
+              <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
+                >Brush:
+                <input
+                  id="zonesBrush"
+                  oninput="tip('Brush size: '+this.value); zonesBrushNumber.value = this.value"
+                  type="range"
+                  min="5"
+                  max="50"
+                  value="7"
+                  style="width: 9em"
+                />
+                <input
+                  id="zonesBrushNumber"
+                  oninput="tip('Brush size: '+this.value); zonesBrush.value = this.value"
+                  type="number"
+                  min="5"
+                  max="50"
+                  value="7"
+                />
+              </label>
             </div>
+
             <div>
               <input id="zonesBrushLandOnly" class="checkbox" type="checkbox" checked />
               <label for="zonesBrushLandOnly" class="checkbox-label"><i>Change land only</i></label>
@@ -4950,7 +5067,6 @@
         <div id="notesLegend" contenteditable="true"></div>
         <div style="margin-top: 0.3em">
           <button id="notesFocus" data-tip="Focus on selected object" class="icon-target"></button>
-          <button id="notesGenerateWithAi" data-tip="Generate note with AI" class="icon-robot"></button>
           <button
             id="notesPin"
             data-tip="Toggle notes box dispay: hide or do not hide the box on mouse move"
@@ -4962,40 +5078,6 @@
         </div>
       </div>
 
-      <div id="aiGenerator" class="dialog stable" style="display: none">
-        <div style="display: flex; flex-direction: column; gap: 0.3em; width: 100%">
-          <textarea id="aiGeneratorResult" placeholder="Generated text will appear here" cols="30" rows="10"></textarea>
-          <textarea id="aiGeneratorPrompt" placeholder="Type a prompt here" cols="30" rows="5"></textarea>
-          <div style="display: flex; align-items: center; gap: 1em">
-            <label for="aiGeneratorModel"
-              >Model:
-              <select id="aiGeneratorModel"></select>
-            </label>
-            <label
-              for="aiGeneratorTemperature"
-              data-tip="Temperature controls response randomness; higher values mean more creativity, lower values mean more predictability"
-            >
-              Temperature:
-              <input id="aiGeneratorTemperature" type="number" min="-1" max="2" step=".1" class="icon-key" />
-            </label>
-            <label for="aiGeneratorKey"
-              >Key:
-              <input
-                id="aiGeneratorKey"
-                placeholder="Enter API key"
-                class="icon-key"
-                data-tip="Enter API key. Note: the Generator doesn't store the key or any generated data"
-              />
-              <button
-                id="aiGeneratorKeyHelp"
-                class="icon-help-circled"
-                data-tip="Click to see the usage instructions"
-              />
-            </label>
-          </div>
-        </div>
-      </div>
-
       <div id="emblemEditor" class="dialog stable" style="display: none">
         <svg viewBox="0 0 200 200"><use id="emblemImage"></use></svg>
         <div id="emblemBody">
@@ -5171,11 +5253,11 @@
         <div id="unitsBody" style="margin-left: 1.1em">
           <div class="unitsHeader" style="margin-top: 0.4em">
             <span class="icon-map-signs"></span>
-            <label>Distance:</label>
+            <div>Distance:</div>
           </div>
 
           <div data-tip="Select a distance unit or provide a custom name">
-            <label>Distance unit:</label>
+            <div>Distance unit:</div>
             <select id="distanceUnitInput" data-stored="distanceUnit">
               <option value="mi" selected>Mile (mi)</option>
               <option value="km">Kilometer (km)</option>
@@ -5187,25 +5269,34 @@
             </select>
           </div>
 
+          <i data-locked="0" id="lock_distanceScale" class="icon-lock-open"></i>
           <div data-tip="Select how many distance units are in one pixel">
-            <i data-locked="0" id="lock_distanceScale" class="icon-lock-open"></i>
-            <slider-input id="distanceScaleInput" data-stored="distanceScale" min=".01" max="20" step=".1" value="3">
-              <label>1 map pixel:</label>
-            </slider-input>
+            <div>1 map pixel =</div>
+            <input id="distanceScaleOutput" type="range" min=".01" max="20" step=".1" value="3" />
+            <input
+              id="distanceScaleInput"
+              data-stored="distanceScale"
+              type="number"
+              min=".01"
+              max="100"
+              step=".01"
+              value="3"
+              data-value="3"
+            />
           </div>
 
           <div data-tip='Area unit name, type "square" to add ² to the distance unit'>
-            <label>Area unit:</label>
+            <div>Area unit:</div>
             <input id="areaUnit" data-stored="areaUnit" type="text" value="square" />
           </div>
 
           <div class="unitsHeader">
             <span class="icon-signal"></span>
-            <label>Altitude:</label>
+            <div>Altitude:</div>
           </div>
 
           <div data-tip="Select an altitude unit or provide a custom name">
-            <label>Height unit:</label>
+            <div>Height unit:</div>
             <select id="heightUnit" data-stored="heightUnit">
               <option value="ft" selected>Feet (ft)</option>
               <option value="m">Meters (m)</option>
@@ -5217,25 +5308,26 @@
           <div
             data-tip="Set height exponent, i.e. a value for altitude change sharpness. Altitude affects temperature and hence biomes"
           >
-            <slider-input
+            <div>Exponent:</div>
+            <input id="heightExponentOutput" type="range" min="1.5" max="2.2" value="2" step=".01" />
+            <input
               id="heightExponentInput"
               data-stored="heightExponent"
+              type="number"
               min="1.5"
               max="2.2"
-              step=".01"
               value="2"
-            >
-              <label>Exponent:</label>
-            </slider-input>
+              step=".01"
+            />
           </div>
 
           <div class="unitsHeader" data-tip="Select Temperature scale">
             <span class="icon-temperature-high"></span>
-            <label>Temperature:</label>
+            <div>Temperature:</div>
           </div>
 
           <div>
-            <label>Temperature scale:</label>
+            <div>Temperature scale:</div>
             <select id="temperatureScale" data-stored="temperatureScale">
               <option value="°C" selected>degree Celsius (°C)</option>
               <option value="°F">degree Fahrenheit (°F)</option>
@@ -5250,32 +5342,73 @@
 
           <div class="unitsHeader">
             <span class="icon-male"></span>
-            <label>Population:</label>
+            <div>Population:</div>
           </div>
 
           <div data-tip="Set how many people are in one population point">
-            <slider-input
-              id="populationRateInput"
+            <div>1 population point =</div>
+            <input
+              id="populationRateOutput"
               data-stored="populationRate"
+              type="range"
               min="10"
-              max="10000"
+              max="9990"
               step="10"
               value="1000"
-            >
-              <label>1 population point:</label>
-            </slider-input>
+            />
+            <input
+              id="populationRateInput"
+              data-stored="populationRate"
+              type="number"
+              min="10"
+              max="9990"
+              step="10"
+              value="1000"
+            />
           </div>
 
           <div data-tip="Set urbanization rate: burgs population relative to all population">
-            <slider-input id="urbanizationInput" data-stored="urbanization" min=".01" max="5" step=".01" value="1">
-              <label>Urbanization rate:</label>
-            </slider-input>
+            <div>Urbanization rate:</div>
+            <input
+              id="urbanizationOutput"
+              data-stored="urbanization"
+              type="range"
+              min=".01"
+              max="5"
+              step=".01"
+              value="1"
+            />
+            <input
+              id="urbanizationInput"
+              data-stored="urbanization"
+              type="number"
+              min=".01"
+              max="5"
+              step=".01"
+              value="1"
+            />
           </div>
 
           <div data-tip="Set urban density: average population per building in Medieval Fantasy City Generator">
-            <slider-input id="urbanDensityInput" data-stored="urbanDensity" min="1" max="200" step="1" value="10">
-              <label>Urban density:</label>
-            </slider-input>
+            <div>Urban density:</div>
+            <input
+              id="urbanDensityOutput"
+              data-stored="urbanDensity"
+              type="range"
+              min="1"
+              max="200"
+              step="1"
+              value="10"
+            />
+            <input
+              id="urbanDensityInput"
+              data-stored="urbanDensity"
+              type="number"
+              min="1"
+              max="200"
+              step="1"
+              value="10"
+            />
           </div>
         </div>
 
@@ -5309,7 +5442,7 @@
       </div>
 
       <div id="burgsOverview" class="dialog stable" style="display: none">
-        <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 6em 8em 6em">
+        <div id="burgsHeader" class="header" style="grid-template-columns: 8em 6em 6em 7em 7em 4em 2em">
           <div data-tip="Click to sort by burg name" class="sortable alphabetically" data-sortby="name">Burg</div>
           <div data-tip="Click to sort by province name" class="sortable alphabetically" data-sortby="province">
             Province
@@ -5325,9 +5458,7 @@
           >
             Population
           </div>
-          <div data-tip="Click to sort by burg features" class="sortable alphabetically" data-sortby="features">
-            Features&nbsp;
-          </div>
+          <div data-tip="Click to sort by burg type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
         </div>
 
         <div id="burgsBody" class="table"></div>
@@ -5755,13 +5886,12 @@
         </p>
         <p><b>Latitude:</b> <span id="infoLat"></span></p>
         <p><b>Longitude:</b> <span id="infoLon"></span></p>
-        <p><b>Geozone:</b> <span id="infoGeozone"></span></p>
         <p><b>Area:</b> <span id="infoArea">0</span></p>
         <p><b>Type:</b> <span id="infoFeature">n/a</span></p>
         <p><b>Precipitation:</b> <span id="infoPrec">0</span></p>
         <p><b>River:</b> <span id="infoRiver">no</span></p>
         <p><b>Population:</b> <span id="infoPopulation">0</span></p>
-        <p><b>Elevation:</b> <span id="infoElevation">0</span></p>
+        <p><b>Elevation:</b> <span id="infoEvelation">0</span></p>
         <p><b>Depth:</b> <span id="infoDepth">0</span></p>
         <p><b>Temperature:</b> <span id="infoTemp">0</span></p>
         <p><b>Biome:</b> <span id="infoBiome">n/a</span></p>
@@ -5773,101 +5903,11 @@
       </div>
 
       <div id="iconSelector" style="display: none" class="dialog">
-        <div>
-          <b>Unicode emojis</b>
-          <div style="font-style: italic">
-            <span>Select from the list or paste a Unicode character here: </span>
-            <input id="iconInput" style="width: 2.5em" />
-            <span>. See <a href="https://emojidb.org" target="_blank">EmojiDB</a> to search for emojis</span>
-          </div>
-          <table id="iconTable" class="table pointer" style="font-size: 2em; text-align: center; width: 100%"></table>
-        </div>
-
-        <div style="margin-top: 0.5em">
-          <b>External images</b>
-          <div style="font-style: italic">
-            <span>Paste link to the image here: </span>
-            <input id="imageInput" style="width: 20em" />
-            <button id="addImage" type="button">Add</button>
-          </div>
-          <div id="addedIcons" class="pointer" style="display: flex; flex-wrap: wrap; max-width: 420px"></div>
-        </div>
-      </div>
-
-      <div id="submapTool" style="display: none" class="dialog">
-        <p style="font-weight: bold">
-          This operation is destructive and irreversible. It will create a completely new map based on the current one.
-          Don't forget to save the .map file to your machine first!
-        </p>
-
-        <div style="display: flex; flex-direction: column; gap: 0.5em">
-          <div data-tip="Set points (cells) number of the submap" style="display: flex; gap: 1em">
-            <div>Points number</div>
-            <div>
-              <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
-              <output id="submapPointsFormatted" style="color: #053305">10K</output>
-            </div>
-          </div>
-
-          <div data-tip="Check to fit burg styles (icon and label size) to the submap scale">
-            <input type="checkbox" class="checkbox" id="submapRescaleBurgStyles" checked />
-            <label for="submapRescaleBurgStyles" class="checkbox-label">Rescale burg styles</label>
-          </div>
-        </div>
-      </div>
-
-      <div id="transformTool" style="display: none" class="dialog">
-        <div style="padding-top: 0.5em; width: 40em; font-weight: bold">
-          This operation is destructive and irreversible. It will create a completely new map based on the current one.
-          Don't forget to save the .map file to your machine first!
-        </div>
-
-        <div
-          id="transformToolBody"
-          style="
-            padding: 0.5em 0;
-            width: 100%;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            grid-template-rows: repeat(5, 1fr);
-            align-items: center;
-          "
-        >
-          <div>Points number</div>
-          <div>
-            <input id="transformPointsInput" type="range" min="1" max="13" value="4" />
-            <output id="transformPointsFormatted" style="color: #053305">10K</output>
-          </div>
-
-          <div>Shift</div>
-          <div>
-            <label>X: <input id="transformShiftX" type="number" size="4" value="0" /></label>
-            <label>Y: <input id="transformShiftY" type="number" size="4" value="0" /></label>
-          </div>
-
-          <div>Rotate</div>
-          <div>
-            <input id="transformAngleInput" type="range" min="0" max="359" value="0" />
-            <output id="transformAngleOutput">0</output>°
-          </div>
-
-          <div>Scale</div>
-          <div>
-            <input id="transformScaleInput" type="range" min="-25" max="25" value="0" />
-            <output id="transformScaleResult">1</output>x
-          </div>
-
-          <div>Mirror</div>
-          <div style="display: flex; gap: 0.5em">
-            <input type="checkbox" class="checkbox" id="transformMirrorH" />
-            <label for="transformMirrorH" class="checkbox-label">horizontally</label>
-            <input type="checkbox" class="checkbox" id="transformMirrorV" />
-            <label for="transformMirrorV" class="checkbox-label">vertically</label>
-          </div>
-        </div>
-
-        <div id="transformPreview" style="position: relative; overflow: hidden; outline: 1px solid #666">
-          <canvas id="transformPreviewCanvas" style="position: absolute; transform-origin: center"></canvas>
+        <table id="iconTable" class="table pointer" style="font-size: 2em; text-align: center; width: 100%"></table>
+        <div style="font-style: italic; font-size: 1.2em; margin: 0.4em 0 0 0.4em">
+          <span>Select from the list or paste a Unicode character here: </span>
+          <input id="iconInput" style="width: 2.5em" />
+          <span>. See <a href="https://emojipedia.org" target="_blank">Emojipedia</a> for reference</span>
         </div>
       </div>
 
@@ -6044,10 +6084,10 @@
 
         <div style="margin: 1em 0 0.3em; font-weight: bold">Export to GeoJSON</div>
         <div>
-          <button onclick="saveGeoJsonCells()" data-tip="Download cells data in GeoJSON format">cells</button>
-          <button onclick="saveGeoJsonRoutes()" data-tip="Download routes data in GeoJSON format">routes</button>
-          <button onclick="saveGeoJsonRivers()" data-tip="Download rivers data in GeoJSON format">rivers</button>
-          <button onclick="saveGeoJsonMarkers()" data-tip="Download markers data in GeoJSON format">markers</button>
+          <button onclick="saveGeoJSON_Cells()" data-tip="Download cells data in GeoJSON format">cells</button>
+          <button onclick="saveGeoJSON_Routes()" data-tip="Download routes data in GeoJSON format">routes</button>
+          <button onclick="saveGeoJSON_Rivers()" data-tip="Download rivers data in GeoJSON format">rivers</button>
+          <button onclick="saveGeoJSON_Markers()" data-tip="Download markers data in GeoJSON format">markers</button>
         </div>
         <p>
           GeoJSON format is used in GIS tools such as QGIS. Check out
@@ -6190,6 +6230,105 @@
         <div id="tileStatus" style="font-style: italic"></div>
       </div>
 
+      <div id="resampleDialog" style="display: none" class="dialog">
+        <div style="width: 34em; max-width: 80vw; font-weight: bold; padding: 6px">
+          This operation is destructive and irreversible. It will create a completely new map based on the current one.
+          Don't forget to save the current project to your machine first!
+        </div>
+
+        <div
+          style="
+            width: auto;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: repeat(5, 1fr);
+            align-items: center;
+            padding: 0.5em;
+          "
+        >
+          <div>Points number</div>
+          <div>
+            <input id="submapPointsInput" type="range" min="1" max="13" value="4" />
+            <output id="submapPointsOutputFormatted" style="color: #053305">10K</output>
+          </div>
+
+          <div>Shift</div>
+          <div>
+            <label>X: <input id="submapShiftX" type="number" size="4" value="0" /></label>
+            <label>Y: <input id="submapShiftY" type="number" size="4" value="0" /></label>
+          </div>
+
+          <div>Rotate</div>
+          <div>
+            <input id="submapAngleInput" type="range" min="0" max="359" value="0" />
+            <output id="submapAngleOutput">0</output>°
+          </div>
+
+          <div>Scale</div>
+          <div>
+            <input id="submapScaleInput" type="range" min="-25" max="25" value="0" />
+            <output id="submapScaleOutput">1</output>x
+          </div>
+
+          <div>Mirror</div>
+          <div>
+            <input type="checkbox" class="checkbox" id="submapMirrorH" />
+            <label for="submapMirrorH" class="checkbox-label">horizontally</label>
+            &nbsp;
+            <input type="checkbox" class="checkbox" id="submapMirrorV" />
+            <label for="submapMirrorV" class="checkbox-label">vertically</label>
+          </div>
+        </div>
+
+        <div
+          id="submapPreview"
+          style="border: 1px solid #666; margin: 1em auto; overflow: hidden; position: relative"
+        ></div>
+      </div>
+
+      <div id="submapOptionsDialog" style="display: none" class="dialog">
+        <p style="font-weight: bold">
+          This operation is destructive and irreversible. It will create a completely new map based on the current one.
+          Don't forget to save the current project as a .map file first!
+        </p>
+
+        <p>Settings to be changed: population rate, map pixel size</p>
+        <p>
+          Data to be copied: heightmap, biomes, religions, population, precipitation, cultures, states, provinces,
+          military regiments
+        </p>
+        <p>Data to be regenerated: zones, routes, rivers</p>
+        <p>Burgs may be remapped incorrectly, manual change is required</p>
+
+        <p>Keep data for:</p>
+        <div data-tip="Lock all markers copied from the original map">
+          <input id="submapLockMarkers" class="checkbox" type="checkbox" checked />
+          <label for="submapLockMarkers" class="checkbox-label">Markers</label>
+        </div>
+        <div data-tip="Lock all burgs copied from the original map">
+          <input id="submapLockBurgs" class="checkbox" type="checkbox" checked />
+          <label for="submapLockBurgs" class="checkbox-label">Burgs</label>
+        </div>
+
+        <p>Experimental features:</p>
+        <div data-tip="Rivers on the parent map will errode land (helps to get similar river network)">
+          <input id="submapDepressRivers" class="checkbox" type="checkbox" />
+          <label for="submapDepressRivers" class="checkbox-label">Errode riverbeds</label>
+        </div>
+        <div data-tip="Rescale styles (burg labels, emblem size) to match the new scale">
+          <input id="submapRescaleStyles" class="checkbox" type="checkbox" checked />
+          <label for="submapRescaleStyles" class="checkbox-label">Rescale styles</label>
+        </div>
+        <div data-tip="Move all existing towns to the 'largetown' burg group">
+          <input id="submapPromoteTowns" class="checkbox" type="checkbox" />
+          <label for="submapPromoteTowns" class="checkbox-label">Promote towns to largetowns</label>
+        </div>
+        <div data-tip="Add lakes in depressions (can be very slow on big landmasses)">
+          <input id="submapAddLakeInDepression" class="checkbox" type="checkbox" />
+          <label for="submapAddLakeInDepression" class="checkbox-label">Add lakes in depressions (slow)</label>
+        </div>
+      </div>
+
       <div id="alert" style="display: none" class="dialog">
         <p id="alertMessage">Warning!</p>
       </div>
@@ -7858,58 +7997,12 @@
           <pattern id="pattern_square" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
             <path d="M 25 0 L 0 0 0 25" />
           </pattern>
-
           <pattern id="pattern_pointyHex" width="25" height="43.4" patternUnits="userSpaceOnUse" fill="none">
             <path d="M 0,0 12.5,7.2 25,0 M 12.5,21.7 V 7.2 Z M 0,43.4 V 28.9 L 12.5,21.7 25,28.9 v 14.5" />
           </pattern>
-
           <pattern id="pattern_flatHex" width="43.4" height="25" patternUnits="userSpaceOnUse" fill="none">
             <path d="M 43.4,0 36.2,12.5 43.4,25 M 21.7,12.5 H 36.2 Z M 0,0 H 14.5 L 21.7,12.5 14.5,25 H 0" />
           </pattern>
-
-          <pattern id="pattern_square45deg" width="35.355" height="35.355" patternUnits="userSpaceOnUse" fill="none">
-            <path d="M 0 0 L 35.355 35.355 M 0 35.355 L 35.355 0" />
-          </pattern>
-
-          <pattern id="pattern_squareTruncated" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
-            <path
-              d="M 8.33 25 L 0 16.66 V 8.33 L 8.33 0 16.66 0 25 8.33  M 16.66 25 L 25 16.66 L 25 8.33 M 8.33 25 L 16.66 25"
-            />
-          </pattern>
-
-          <pattern id="pattern_squareTetrakis" width="25" height="25" patternUnits="userSpaceOnUse" fill="none">
-            <path
-              d="M 25 0 L 0 0 0 25 M 0 0 L 25 25 M 0 25 L 25 0 M 12.5 0 L 12.5 25 M 0 12.5 L 25 12.5 M 0 25 L 25 25 L 25 0"
-            />
-          </pattern>
-
-          <pattern
-            id="pattern_triangleHorizontal"
-            width="41.76"
-            height="72.33"
-            patternUnits="userSpaceOnUse"
-            fill="none"
-          >
-            <path
-              d="M 41.76 36.165 H 0 L 20.88 0 41.76 36.165 20.88 72.33 0 36.165 M 0 0 H 72.33 M 0 72.33 L 41.76 72.33"
-            />
-          </pattern>
-
-          <pattern id="pattern_triangleVertical" width="72.33" height="41.76" patternUnits="userSpaceOnUse" fill="none">
-            <path
-              d="M 36.165 0 L 0 20.88 36.165 41.76 72.33 20.88 36.165 0 V 41.76 M 0 0 V 72.33 M 72.33 0 L 72.33 41.76"
-            />
-          </pattern>
-
-          <pattern id="pattern_trihexagonal" width="25" height="43.4" patternUnits="userSpaceOnUse" fill="none">
-            <path d="M 25 10.85 H 0 L 18.85 43.4 25 32.55 H 0 L 18.85 0 25 10.85" />
-          </pattern>
-
-          <pattern id="pattern_rhombille" width="82.5" height="50" patternUnits="userSpaceOnUse" fill="none">
-            <path
-              d="M 13.8 50 L 0 25 13.8 0 H 41.2 L 27.5 25 41.2 50 55 25 41.2 0 68.8 0 82.5 25 68.8 50 M 0 25 H 27.5 M 55 25 H 82.5 M 13.8 50 H 41.2 L 68.8 50"
-            />
-          </pattern>
         </g>
 
         <g id="defs-hatching">
@@ -8061,124 +8154,108 @@
       </defs>
     </svg>
 
-    <script src="components/fill-box.js"></script>
-    <script src="components/slider-input.js"></script>
-
     <script src="libs/jquery-3.1.1.min.js"></script>
     <script src="libs/jquery-ui.min.js"></script>
     <script src="versioning.js"></script>
     <script src="libs/d3.min.js"></script>
+    <script src="libs/priority-queue.min.js"></script>
     <script src="libs/flatqueue.js"></script>
     <script src="libs/delaunator.min.js"></script>
     <script src="libs/indexedDB.js?v=1.99.00"></script>
 
-    <script src="utils/shorthands.js?v=1.106.0"></script>
-    <script src="utils/commonUtils.js?v=1.103.0"></script>
+    <script src="utils/shorthands.js?v=1.99.00"></script>
+    <script src="utils/commonUtils.js?v=1.99.00"></script>
     <script src="utils/arrayUtils.js?v=1.99.00"></script>
     <script src="utils/functionUtils.js?v=1.99.00"></script>
     <script src="utils/colorUtils.js?v=1.99.00"></script>
-    <script src="utils/graphUtils.js?v=1.106.0"></script>
+    <script src="utils/graphUtils.js?v=1.99.00"></script>
     <script src="utils/nodeUtils.js?v=1.99.00"></script>
     <script src="utils/numberUtils.js?v=1.99.00"></script>
     <script src="utils/polyfills.js?v=1.99.00"></script>
-    <script src="utils/probabilityUtils.js?v=1.99.05"></script>
-    <script src="utils/stringUtils.js?v=1.106.0"></script>
-    <script src="utils/languageUtils.js?v=1.108.11"></script>
+    <script src="utils/probabilityUtils.js?v=1.99.00"></script>
+    <script src="utils/stringUtils.js?v=1.99.00"></script>
+    <script src="utils/languageUtils.js?v=1.99.00"></script>
     <script src="utils/unitUtils.js?v=1.99.00"></script>
-    <script src="utils/pathUtils.js?v=1.106.0"></script>
-    <script defer src="utils/debugUtils.js?v=1.106.0"></script>
+    <script defer src="utils/debugUtils.js?v=1.99.00"></script>
 
     <script src="modules/voronoi.js"></script>
     <script src="config/heightmap-templates.js"></script>
     <script src="config/precreated-heightmaps.js"></script>
     <script src="modules/heightmap-generator.js?v=1.99.00"></script>
-    <script src="modules/features.js?v=1.104.0"></script>
-    <script src="modules/ocean-layers.js?v=1.108.4"></script>
-    <script src="modules/river-generator.js?v=1.106.7"></script>
+    <script src="modules/ocean-layers.js?v=1.99.00"></script>
+    <script src="modules/river-generator.js?v=1.99.00"></script>
     <script src="modules/lakes.js?v=1.99.00"></script>
     <script src="modules/biomes.js?v=1.99.00"></script>
-    <script src="modules/names-generator.js?v=1.105.11"></script>
-    <script src="modules/cultures-generator.js?v=1.106.0"></script>
-    <script src="modules/burgs-and-states.js?v=1.106.0"></script>
-    <script src="modules/provinces-generator.js?v=1.106.0"></script>
-    <script src="modules/routes-generator.js?v=1.106.0"></script>
-    <script src="modules/religions-generator.js?v=1.106.0"></script>
-    <script src="modules/military-generator.js?v=1.107.0"></script>
-    <script src="modules/markers-generator.js?v=1.107.0"></script>
-    <script src="modules/zones-generator.js?v=1.106.0"></script>
+    <script src="modules/names-generator.js?v=1.87.14"></script>
+    <script src="modules/cultures-generator.js?v=1.99.00"></script>
+    <script src="modules/renderers/state-labels.js?v=1.96.04"></script>
+    <script src="modules/burgs-and-states.js?v=1.99.00"></script>
+    <script src="modules/routes-generator.js?v=1.99.00"></script>
+    <script src="modules/religions-generator.js?v=1.99.00"></script>
+    <script src="modules/military-generator.js?v=1.99.00"></script>
+    <script src="modules/markers-generator.js?v=1.99.00"></script>
     <script src="modules/coa-generator.js?v=1.99.00"></script>
-    <script src="modules/resample.js?v=1.106.4"></script>
-    <script src="libs/alea.min.js?v1.105.0"></script>
-    <script src="libs/polylabel.min.js?v1.105.0"></script>
-    <script src="libs/lineclip.min.js?v1.105.0"></script>
-    <script src="libs/simplify.js?v1.105.6"></script>
-    <script src="modules/fonts.js?v=1.99.03"></script>
-    <script src="modules/ui/layers.js?v=1.108.4"></script>
+    <script src="modules/submap.js?v=1.99.00"></script>
+    <script src="libs/polylabel.min.js"></script>
+    <script src="libs/lineclip.min.js"></script>
+    <script src="libs/alea.min.js"></script>
+    <script src="modules/fonts.js?v=1.99.00"></script>
+    <script src="modules/ui/layers.js?v=1.99.00"></script>
     <script src="modules/ui/measurers.js?v=1.99.00"></script>
-    <script src="modules/ui/style-presets.js?v=1.100.00"></script>
-    <script src="modules/ui/general.js?v=1.100.00"></script>
-    <script src="modules/ui/options.js?v=1.106.2"></script>
-    <script src="main.js?v=1.108.1"></script>
+    <script src="modules/ui/stylePresets.js?v=1.99.00"></script>
 
-    <script defer src="modules/ui/style.js?v=1.108.4"></script>
-    <script defer src="modules/ui/editors.js?v=1.108.5"></script>
-    <script defer src="modules/ui/tools.js?v=1.108.5"></script>
-    <script defer src="modules/ui/world-configurator.js?v=1.105.4"></script>
-    <script defer src="modules/ui/heightmap-editor.js?v=1.105.2"></script>
-    <script defer src="modules/ui/provinces-editor.js?v=1.108.1"></script>
-    <script defer src="modules/ui/biomes-editor.js?v=1.108.4"></script>
-    <script defer src="modules/ui/namesbase-editor.js?v=1.105.11"></script>
+    <script src="modules/ui/general.js?v=1.99.00"></script>
+    <script src="modules/ui/options.js?v=1.99.00"></script>
+    <script src="main.js?v=1.99.00"></script>
+
+    <script defer src="modules/relief-icons.js?v=1.99.00"></script>
+    <script defer src="modules/ui/style.js?v=1.99.00"></script>
+    <script defer src="modules/ui/editors.js?v=1.99.00"></script>
+    <script defer src="modules/ui/tools.js?v=1.99.00"></script>
+    <script defer src="modules/ui/world-configurator.js?v=1.99.00"></script>
+    <script defer src="modules/ui/heightmap-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/provinces-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/biomes-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/namesbase-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/elevation-profile.js?v=1.99.00"></script>
-    <script defer src="modules/ui/temperature-graph.js?v=1.106.6"></script>
-    <script defer src="modules/ui/routes-editor.js?v=1.104.3"></script>
-    <script defer src="modules/ui/routes-creator.js?v=1.104.3"></script>
-    <script defer src="modules/ui/route-group-editor.js?v=1.103.8"></script>
+    <script defer src="modules/ui/temperature-graph.js?v=1.99.00"></script>
+    <script defer src="modules/ui/routes-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/routes-creator.js?v=1.99.00"></script>
+    <script defer src="modules/ui/route-group-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/ice-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/lakes-editor.js?v=1.106.0"></script>
+    <script defer src="modules/ui/lakes-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/coastline-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/labels-editor.js?v=1.106.0"></script>
-    <script defer src="modules/ui/rivers-editor.js?v=1.106.0"></script>
-    <script defer src="modules/ui/rivers-creator.js?v=1.106.0"></script>
+    <script defer src="modules/ui/labels-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/rivers-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/rivers-creator.js?v=1.99.00"></script>
     <script defer src="modules/ui/relief-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/burg-editor.js?v=1.106.6"></script>
-    <script defer src="modules/ui/units-editor.js?v=1.108.12"></script>
-    <script defer src="modules/ui/notes-editor.js?v=1.107.3"></script>
-    <script defer src="modules/ui/ai-generator.js?v=1.108.8"></script>
+    <script defer src="modules/ui/burg-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/units-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/notes-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/diplomacy-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/zones-editor.js?v=1.105.20"></script>
-    <script defer src="modules/ui/burgs-overview.js?v=1.105.15"></script>
-    <script defer src="modules/ui/routes-overview.js?v=1.104.3"></script>
+    <script defer src="modules/ui/zones-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/burgs-overview.js?v=1.99.00"></script>
+    <script defer src="modules/ui/routes-overview.js?v=1.99.00"></script>
     <script defer src="modules/ui/rivers-overview.js?v=1.99.00"></script>
-    <script defer src="modules/ui/military-overview.js?v=1.108.5"></script>
-    <script defer src="modules/ui/regiments-overview.js?v=1.108.5"></script>
-    <script defer src="modules/ui/markers-overview.js?v=1.108.10"></script>
-    <script defer src="modules/ui/regiment-editor.js?v=1.108.5"></script>
-    <script defer src="modules/ui/battle-screen.js?v=1.108.5"></script>
+    <script defer src="modules/ui/military-overview.js?v=1.99.00"></script>
+    <script defer src="modules/ui/regiments-overview.js?v=1.99.00"></script>
+    <script defer src="modules/ui/markers-overview.js?v=1.99.00"></script>
+    <script defer src="modules/ui/regiment-editor.js?v=1.99.00"></script>
+    <script defer src="modules/ui/battle-screen.js?v=1.99.00"></script>
     <script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script>
-    <script defer src="modules/ui/markers-editor.js?v=1.108.5"></script>
+    <script defer src="modules/ui/markers-editor.js?v=1.99.00"></script>
     <script defer src="modules/ui/3d.js?v=1.99.00"></script>
-    <script defer src="modules/ui/submap-tool.js?v=1.106.2"></script>
-    <script defer src="modules/ui/transform-tool.js?v=1.106.2"></script>
-    <script defer src="modules/ui/hotkeys.js?v=1.104.0"></script>
+    <script defer src="modules/ui/submap.js?v=1.99.00"></script>
+    <script defer src="modules/ui/hotkeys.js?v=1.99.00"></script>
     <script defer src="modules/coa-renderer.js?v=1.99.00"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
-    <script defer src="modules/io/save.js?v=1.107.4"></script>
-    <script defer src="modules/io/load.js?v=1.108.0"></script>
-    <script defer src="modules/io/cloud.js?v=1.106.0"></script>
-    <script defer src="modules/io/export.js?v=1.108.13"></script>
+    <script defer src="modules/io/save.js?v=1.99.00"></script>
+    <script defer src="modules/io/load.js?v=1.99.01"></script>
+    <script defer src="modules/io/cloud.js?v=1.99.00"></script>
+    <script defer src="modules/io/export.js?v=1.99.00"></script>
 
-    <script defer src="modules/renderers/draw-features.js?v=1.108.2"></script>
-    <script defer src="modules/renderers/draw-borders.js?v=1.104.0"></script>
-    <script defer src="modules/renderers/draw-heightmap.js?v=1.104.0"></script>
-    <script defer src="modules/renderers/draw-markers.js?v=1.108.5"></script>
-    <script defer src="modules/renderers/draw-scalebar.js?v=1.108.1"></script>
-    <script defer src="modules/renderers/draw-temperature.js?v=1.104.0"></script>
-    <script defer src="modules/renderers/draw-emblems.js?v=1.104.0"></script>
-    <script defer src="modules/renderers/draw-military.js?v=1.108.5"></script>
-    <script defer src="modules/renderers/draw-state-labels.js?v=1.108.1"></script>
-    <script defer src="modules/renderers/draw-burg-labels.js?v=1.108.1"></script>
-    <script defer src="modules/renderers/draw-burg-icons.js?v=1.104.0"></script>
-    <script defer src="modules/renderers/draw-relief-icons.js?v=1.108.4"></script>
+    <!-- Web Components -->
+    <script defer src="components/fill-box.js"></script>
   </body>
 </html>
diff --git a/libs/jquery-ui.css b/libs/jquery-ui.css
index ad11d1a6..36d437d5 100644
--- a/libs/jquery-ui.css
+++ b/libs/jquery-ui.css
@@ -314,44 +314,30 @@ body .ui-dialog {
 }
 .ui-dialog .ui-dialog-titlebar {
   display: flex;
-  padding: 0.3em 0.8em;
-  justify-content: space-between;
-  align-items: center;
+  padding: 0.4em 0.3em;
+  justify-content: space-evenly;
   font-size: 1.2em;
   min-width: 150px;
 }
 .ui-dialog .ui-dialog-title {
+  float: left;
+  margin: 0.1em 0;
   white-space: nowrap;
-  width: 100%;
+  width: 90%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .ui-dialog .ui-dialog-titlebar button {
-  padding: 3px;
-  margin-left: 5px;
-  width: 19px;
-  height: 18px;
+  padding: 0;
+  width: 1.8em;
+  height: 1.8em;
   color: #ffffff;
   background: none;
-  font-size: 0.8em;
+  font-size: 0.75em;
   border: 1px solid #c5c5c5;
 }
 
-@media (max-width: 600px) {
-  .ui-dialog .ui-dialog-title {
-    font-size: 1.6em;
-  }
-
-  .ui-dialog .ui-dialog-titlebar button {
-    padding: 3px;
-    margin-left: 10px;
-    width: 40px;
-    height: 32px;
-    font-size: 1.6em;
-  }
-}
-
 .ui-dialog .ui-dialog-titlebar button:active {
   border: 1px solid #5d4651;
   color: #5d4651;
diff --git a/libs/openwidget.min.js b/libs/openwidget.min.js
deleted file mode 100644
index 89583d8f..00000000
--- a/libs/openwidget.min.js
+++ /dev/null
@@ -1 +0,0 @@
-window.__ow=window.__ow||{},window.__ow.organizationId="7bb02e70-bcef-4861-a4e6-d259b0d10e24",window.__ow.integration_name="manual_settings",window.__ow.product_name="openwidget",function(n,e,t){function o(n){return c._h?c._h.apply(null,n):c._q.push(n)}var c={_q:[],_h:null,_v:"2.0",on:function(){o(["on",t.call(arguments)])},once:function(){o(["once",t.call(arguments)])},off:function(){o(["off",t.call(arguments)])},get:function(){if(!c._h)throw Error("[OpenWidget] You can't use getters before load.");return o(["get",t.call(arguments)])},call:function(){o(["call",t.call(arguments)])},init:function(){var n=e.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.openwidget.com/openwidget.js",e.head.appendChild(n)}};n.__ow.asyncInit||c.init(),n.OpenWidget=n.OpenWidget||c}(window,document,[].slice);
\ No newline at end of file
diff --git a/libs/priority-queue.min.js b/libs/priority-queue.min.js
new file mode 100644
index 00000000..acf2506b
--- /dev/null
+++ b/libs/priority-queue.min.js
@@ -0,0 +1 @@
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).PriorityQueue=t()}}(function(){return function t(e,i,r){function o(n,s){if(!i[n]){if(!e[n]){var h="function"==typeof require&&require;if(!s&&h)return h(n,!0);if(a)return a(n,!0);var u=new Error("Cannot find module '"+n+"'");throw u.code="MODULE_NOT_FOUND",u}var p=i[n]={exports:{}};e[n][0].call(p.exports,function(t){var i=e[n][1][t];return o(i||t)},p,p.exports,t,e,i,r)}return i[n].exports}for(var a="function"==typeof require&&require,n=0;n<r.length;n++)o(r[n]);return o}({1:[function(t,e,i){var r,o,a,n,s,h={}.hasOwnProperty;r=t("./PriorityQueue/AbstractPriorityQueue"),o=t("./PriorityQueue/ArrayStrategy"),n=t("./PriorityQueue/BinaryHeapStrategy"),a=t("./PriorityQueue/BHeapStrategy"),(s=function(t){function e(t){t||(t={}),t.strategy||(t.strategy=n),t.comparator||(t.comparator=function(t,e){return(t||0)-(e||0)}),e.__super__.constructor.call(this,t)}return function(t,e){for(var i in e)h.call(e,i)&&(t[i]=e[i]);function r(){this.constructor=t}r.prototype=e.prototype,t.prototype=new r,t.__super__=e.prototype}(e,r),e}()).ArrayStrategy=o,s.BinaryHeapStrategy=n,s.BHeapStrategy=a,e.exports=s},{"./PriorityQueue/AbstractPriorityQueue":2,"./PriorityQueue/ArrayStrategy":3,"./PriorityQueue/BHeapStrategy":4,"./PriorityQueue/BinaryHeapStrategy":5}],2:[function(t,e,i){e.exports=function(){function t(t){var e;if(null==(null!=t?t.strategy:void 0))throw"Must pass options.strategy, a strategy";if(null==(null!=t?t.comparator:void 0))throw"Must pass options.comparator, a comparator";this.priv=new t.strategy(t),this.length=(null!=t&&null!=(e=t.initialValues)?e.length:void 0)||0}return t.prototype.queue=function(t){this.length++,this.priv.queue(t)},t.prototype.dequeue=function(t){if(!this.length)throw"Empty queue";return this.length--,this.priv.dequeue()},t.prototype.peek=function(t){if(!this.length)throw"Empty queue";return this.priv.peek()},t.prototype.clear=function(){return this.length=0,this.priv.clear()},t}()},{}],3:[function(t,e,i){var r;r=function(t,e,i){var r,o,a;for(o=0,r=t.length;o<r;)i(t[a=o+r>>>1],e)>=0?o=a+1:r=a;return o},e.exports=function(){function t(t){var e;this.options=t,this.comparator=this.options.comparator,this.data=(null!=(e=this.options.initialValues)?e.slice(0):void 0)||[],this.data.sort(this.comparator).reverse()}return t.prototype.queue=function(t){var e;e=r(this.data,t,this.comparator),this.data.splice(e,0,t)},t.prototype.dequeue=function(){return this.data.pop()},t.prototype.peek=function(){return this.data[this.data.length-1]},t.prototype.clear=function(){this.data.length=0},t}()},{}],4:[function(t,e,i){e.exports=function(){function t(t){var e,i,r,o,a,n,s,h;for(this.comparator=(null!=t?t.comparator:void 0)||function(t,e){return t-e},this.pageSize=(null!=t?t.pageSize:void 0)||512,this.length=0,s=0;1<<s<this.pageSize;)s+=1;if(1<<s!==this.pageSize)throw"pageSize must be a power of two";for(this._shift=s,this._emptyMemoryPageTemplate=e=[],i=0,a=this.pageSize;0<=a?i<a:i>a;0<=a?++i:--i)e.push(null);if(this._memory=[],this._mask=this.pageSize-1,t.initialValues)for(r=0,o=(n=t.initialValues).length;r<o;r++)h=n[r],this.queue(h)}return t.prototype.queue=function(t){this.length+=1,this._write(this.length,t),this._bubbleUp(this.length,t)},t.prototype.dequeue=function(){var t,e;return t=this._read(1),e=this._read(this.length),this.length-=1,this.length>0&&(this._write(1,e),this._bubbleDown(1,e)),t},t.prototype.peek=function(){return this._read(1)},t.prototype.clear=function(){this.length=0,this._memory.length=0},t.prototype._write=function(t,e){var i;for(i=t>>this._shift;i>=this._memory.length;)this._memory.push(this._emptyMemoryPageTemplate.slice(0));return this._memory[i][t&this._mask]=e},t.prototype._read=function(t){return this._memory[t>>this._shift][t&this._mask]},t.prototype._bubbleUp=function(t,e){var i,r,o,a;for(i=this.comparator;t>1&&(r=t&this._mask,t<this.pageSize||r>3?o=t&~this._mask|r>>1:r<2?(o=t-this.pageSize>>this._shift,o+=o&~(this._mask>>1),o|=this.pageSize>>1):o=t-2,!(i(a=this._read(o),e)<0));)this._write(o,e),this._write(t,a),t=o},t.prototype._bubbleDown=function(t,e){var i,r,o,a,n;for(n=this.comparator;t<this.length;)if(t>this._mask&&!(t&this._mask-1)?i=r=t+2:t&this.pageSize>>1?(i=(t&~this._mask)>>1,r=(i=(i|=t&this._mask>>1)+1<<this._shift)+1):r=(i=t+(t&this._mask))+1,i!==r&&r<=this.length)if(o=this._read(i),a=this._read(r),n(o,e)<0&&n(o,a)<=0)this._write(i,e),this._write(t,o),t=i;else{if(!(n(a,e)<0))break;this._write(r,e),this._write(t,a),t=r}else{if(!(i<=this.length))break;if(!(n(o=this._read(i),e)<0))break;this._write(i,e),this._write(t,o),t=i}},t}()},{}],5:[function(t,e,i){e.exports=function(){function t(t){var e;this.comparator=(null!=t?t.comparator:void 0)||function(t,e){return t-e},this.length=0,this.data=(null!=(e=t.initialValues)?e.slice(0):void 0)||[],this._heapify()}return t.prototype._heapify=function(){var t,e,i;if(this.data.length>0)for(t=e=1,i=this.data.length;1<=i?e<i:e>i;t=1<=i?++e:--e)this._bubbleUp(t)},t.prototype.queue=function(t){this.data.push(t),this._bubbleUp(this.data.length-1)},t.prototype.dequeue=function(){var t,e;return e=this.data[0],t=this.data.pop(),this.data.length>0&&(this.data[0]=t,this._bubbleDown(0)),e},t.prototype.peek=function(){return this.data[0]},t.prototype.clear=function(){this.length=0,this.data.length=0},t.prototype._bubbleUp=function(t){for(var e,i;t>0&&(e=t-1>>>1,this.comparator(this.data[t],this.data[e])<0);)i=this.data[e],this.data[e]=this.data[t],this.data[t]=i,t=e},t.prototype._bubbleDown=function(t){var e,i,r,o,a;for(e=this.data.length-1;o=(i=1+(t<<1))+1,r=t,i<=e&&this.comparator(this.data[i],this.data[r])<0&&(r=i),o<=e&&this.comparator(this.data[o],this.data[r])<0&&(r=o),r!==t;)a=this.data[r],this.data[r]=this.data[t],this.data[t]=a,t=r},t}()},{}]},{},[1])(1)});
\ No newline at end of file
diff --git a/libs/simplify.js b/libs/simplify.js
deleted file mode 100644
index e4086e53..00000000
--- a/libs/simplify.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- (c) 2017, Vladimir Agafonkin
- Simplify.js, a high-performance JS polyline simplification library
- mourner.github.io/simplify-js
-*/
-{
-  // square distance between 2 points
-  function getSqDist([x1, y1], [x2, y2]) {
-    const dx = x1 - x2;
-    const dy = y1 - y2;
-
-    return dx * dx + dy * dy;
-  }
-
-  // square distance from a point to a segment
-  function getSqSegDist([x1, y1], [x, y], [x2, y2]) {
-    let dx = x2 - x;
-    let dy = y2 - y;
-
-    if (dx !== 0 || dy !== 0) {
-      const t = ((x1 - x) * dx + (y1 - y) * dy) / (dx * dx + dy * dy);
-
-      if (t > 1) {
-        x = x2;
-        y = y2;
-      } else if (t > 0) {
-        x += dx * t;
-        y += dy * t;
-      }
-    }
-
-    dx = x1 - x;
-    dy = y1 - y;
-
-    return dx * dx + dy * dy;
-  }
-  // rest of the code doesn't care about point format
-
-  // basic distance-based simplification
-  function simplifyRadialDist(points, sqTolerance) {
-    let prevPoint = points[0];
-    const newPoints = [prevPoint];
-    let point;
-
-    for (let i = 1; i < points.length; i++) {
-      point = points[i];
-      if (!point) continue;
-
-      if (getSqDist(point, prevPoint) > sqTolerance) {
-        newPoints.push(point);
-        prevPoint = point;
-      }
-    }
-
-    if (prevPoint !== point) newPoints.push(point);
-    return newPoints;
-  }
-
-  function simplifyDPStep(points, first, last, sqTolerance, simplified) {
-    let maxSqDist = sqTolerance;
-    let index = first;
-
-    for (let i = first + 1; i < last; i++) {
-      const sqDist = getSqSegDist(points[i], points[first], points[last]);
-
-      if (sqDist > maxSqDist) {
-        index = i;
-        maxSqDist = sqDist;
-      }
-    }
-
-    if (maxSqDist > sqTolerance) {
-      if (index - first > 1) simplifyDPStep(points, first, index, sqTolerance, simplified);
-      simplified.push(points[index]);
-      if (last - index > 1) simplifyDPStep(points, index, last, sqTolerance, simplified);
-    }
-  }
-
-  // simplification using Ramer-Douglas-Peucker algorithm
-  function simplifyDouglasPeucker(points, sqTolerance) {
-    const last = points.length - 1;
-
-    const simplified = [points[0]];
-    simplifyDPStep(points, 0, last, sqTolerance, simplified);
-    simplified.push(points[last]);
-
-    return simplified;
-  }
-
-  // both algorithms combined for awesome performance
-  function simplify(points, tolerance, highestQuality = false) {
-    if (points.length <= 2) return points;
-
-    const sqTolerance = tolerance * tolerance;
-
-    points = highestQuality ? points : simplifyRadialDist(points, sqTolerance);
-    points = simplifyDouglasPeucker(points, sqTolerance);
-
-    return points;
-  }
-
-  window.simplify = simplify;
-}
diff --git a/main.js b/main.js
index 848ff3c5..12f75328 100644
--- a/main.js
+++ b/main.js
@@ -4,7 +4,7 @@
 
 // set debug options
 const PRODUCTION = location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1";
-const DEBUG = JSON.safeParse(localStorage.getItem("debug")) || {};
+const DEBUG = localStorage.getItem("debug");
 const INFO = true;
 const TIME = true;
 const WARN = true;
@@ -14,7 +14,6 @@ const ERROR = true;
 const MOBILE = window.innerWidth < 600 || navigator.userAgentData?.mobile;
 
 // typed arrays max values
-const INT8_MAX = 127;
 const UINT8_MAX = 255;
 const UINT16_MAX = 65535;
 const UINT32_MAX = 4294967295;
@@ -63,7 +62,7 @@ let regions = viewbox.append("g").attr("id", "regions");
 let statesBody = regions.append("g").attr("id", "statesBody");
 let statesHalo = regions.append("g").attr("id", "statesHalo");
 let provs = viewbox.append("g").attr("id", "provs");
-let zones = viewbox.append("g").attr("id", "zones");
+let zones = viewbox.append("g").attr("id", "zones").style("display", "none");
 let borders = viewbox.append("g").attr("id", "borders");
 let stateBorders = borders.append("g").attr("id", "stateBorders");
 let provinceBorders = borders.append("g").attr("id", "provinceBorders");
@@ -73,7 +72,7 @@ let trails = routes.append("g").attr("id", "trails");
 let searoutes = routes.append("g").attr("id", "searoutes");
 let temperature = viewbox.append("g").attr("id", "temperature");
 let coastline = viewbox.append("g").attr("id", "coastline");
-let ice = viewbox.append("g").attr("id", "ice");
+let ice = viewbox.append("g").attr("id", "ice").style("display", "none");
 let prec = viewbox.append("g").attr("id", "prec").style("display", "none");
 let population = viewbox.append("g").attr("id", "population");
 let emblems = viewbox.append("g").attr("id", "emblems").style("display", "none");
@@ -81,7 +80,7 @@ let labels = viewbox.append("g").attr("id", "labels");
 let icons = viewbox.append("g").attr("id", "icons");
 let burgIcons = icons.append("g").attr("id", "burgIcons");
 let anchors = icons.append("g").attr("id", "anchors");
-let armies = viewbox.append("g").attr("id", "armies");
+let armies = viewbox.append("g").attr("id", "armies").style("display", "none");
 let markers = viewbox.append("g").attr("id", "markers");
 let fogging = viewbox
   .append("g")
@@ -106,10 +105,10 @@ coastline.append("g").attr("id", "lake_island");
 terrs.append("g").attr("id", "oceanHeights");
 terrs.append("g").attr("id", "landHeights");
 
-let burgLabels = labels.append("g").attr("id", "burgLabels");
 labels.append("g").attr("id", "states");
 labels.append("g").attr("id", "addedLabels");
 
+let burgLabels = labels.append("g").attr("id", "burgLabels");
 burgIcons.append("g").attr("id", "cities");
 burgLabels.append("g").attr("id", "cities");
 anchors.append("g").attr("id", "cities");
@@ -170,7 +169,7 @@ let scale = 1;
 let viewX = 0;
 let viewY = 0;
 
-const onZoom = debounce(function () {
+function onZoom() {
   const {k, x, y} = d3.event.transform;
 
   const isScaleChanged = Boolean(scale - k);
@@ -182,8 +181,9 @@ const onZoom = debounce(function () {
   viewY = y;
 
   handleZoom(isScaleChanged, isPositionChanged);
-}, 50);
-const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoom);
+}
+const onZoomDebouced = debounce(onZoom, 50);
+const zoom = d3.zoom().scaleExtent([1, 20]).on("zoom", onZoomDebouced);
 
 // default options, based on Earth data
 let options = {
@@ -313,11 +313,9 @@ async function checkLoadParameters() {
 async function generateMapOnLoad() {
   await applyStyleOnLoad(); // apply previously selected default or custom style
   await generate(); // generate map
-  applyLayersPreset(); // apply saved layers preset and reder layers
-  drawLayers();
+  applyPreset(); // apply saved layers preset
   fitMapToScreen();
   focusOn(); // based on searchParams focus on point, cell or burg from MFCG
-  toggleAssistant();
 }
 
 // focus on coordinates, cell or burg provided in searchParams
@@ -367,31 +365,6 @@ function focusOn() {
   }
 }
 
-let isAssistantLoaded = false;
-function toggleAssistant() {
-  const assistantContainer = byId("chat-widget-container");
-  const showAssistant = byId("azgaarAssistant").value === "show";
-
-  if (showAssistant) {
-    if (isAssistantLoaded) {
-      assistantContainer.style.display = "block";
-    } else {
-      import("./libs/openwidget.min.js").then(() => {
-        isAssistantLoaded = true;
-        setTimeout(() => {
-          const bubble = byId("chat-widget-minimized");
-          if (bubble) {
-            bubble.dataset.tip = "Click to open the Assistant";
-            bubble.on("mouseover", showDataTip);
-          }
-        }, 5000);
-      });
-    }
-  } else if (isAssistantLoaded) {
-    assistantContainer.style.display = "none";
-  }
-}
-
 // find burg for MFCG and focus on it
 function findBurgForMFCG(params) {
   const cells = pack.cells,
@@ -459,9 +432,7 @@ function findBurgForMFCG(params) {
 function handleZoom(isScaleChanged, isPositionChanged) {
   viewbox.attr("transform", `translate(${viewX} ${viewY}) scale(${scale})`);
 
-  if (isPositionChanged) {
-    if (layerIsOn("toggleCoordinates")) drawCoordinates();
-  }
+  if (isPositionChanged) drawCoordinates();
 
   if (isScaleChanged) {
     invokeActiveZooming();
@@ -495,6 +466,14 @@ function resetZoom(d = 1000) {
   svg.transition().duration(d).call(zoom.transform, d3.zoomIdentity);
 }
 
+// calculate x y extreme points of viewBox
+function getViewBoxExtent() {
+  return [
+    [Math.abs(viewX / scale), Math.abs(viewY / scale)],
+    [Math.abs(viewX / scale) + graphWidth / scale, Math.abs(viewY / scale) + graphHeight / scale]
+  ];
+}
+
 // active zooming feature
 function invokeActiveZooming() {
   const isOptimized = shapeRendering.value === "optimizeSpeed";
@@ -565,6 +544,21 @@ function invokeActiveZooming() {
   }
 }
 
+async function renderGroupCOAs(g) {
+  const [group, type] =
+    g.id === "burgEmblems"
+      ? [pack.burgs, "burg"]
+      : g.id === "provinceEmblems"
+      ? [pack.provinces, "province"]
+      : [pack.states, "state"];
+  for (let use of g.children) {
+    const i = +use.dataset.i;
+    const id = type + "COA" + i;
+    COArenderer.trigger(id, group[i].coa);
+    use.setAttribute("href", "#" + id);
+  }
+}
+
 // add drag to upload logic, pull request from @evyatron
 void (function addDragToUpload() {
   document.addEventListener("dragover", function (e) {
@@ -630,7 +624,8 @@ async function generate(options) {
     grid.cells.h = await HeightmapGenerator.generate(grid);
     pack = {}; // reset pack
 
-    Features.markupGrid();
+    markFeatures();
+    markupGridOcean();
     addLakesInDeepDepressions();
     openNearSeaLakes();
 
@@ -641,10 +636,11 @@ async function generate(options) {
     generatePrecipitation();
 
     reGraph();
-    Features.markupPack();
-    createDefaultRuler();
+    drawCoastline();
 
     Rivers.generate();
+    drawRivers();
+    Lakes.defineGroup();
     Biomes.define();
 
     rankCells();
@@ -654,16 +650,19 @@ async function generate(options) {
     Routes.generate();
     Religions.generate();
     BurgsAndStates.defineStateForms();
-    Provinces.generate();
-    Provinces.getPoles();
+    BurgsAndStates.generateProvinces();
     BurgsAndStates.defineBurgFeatures();
 
+    drawStates();
+    drawBorders();
+    drawStateLabels();
+
     Rivers.specify();
-    Features.specify();
+    Lakes.generateName();
 
     Military.generate();
     Markers.generate();
-    Zones.generate();
+    addZones();
 
     drawScaleBar(scaleBar, scale);
     Names.getMapName();
@@ -683,7 +682,10 @@ async function generate(options) {
       title: "Generation error",
       width: "32em",
       buttons: {
-        "Clear cache": () => cleanupData(),
+        "Clear data": function () {
+          localStorage.clear();
+          localStorage.setItem("version", version);
+        },
         Regenerate: function () {
           regenerateMap("generation error");
           $(this).dialog("close");
@@ -714,13 +716,75 @@ function setSeed(precreatedSeed) {
   Math.random = aleaPRNG(seed);
 }
 
+// Mark features (ocean, lakes, islands) and calculate distance field
+function markFeatures() {
+  TIME && console.time("markFeatures");
+  Math.random = aleaPRNG(seed); // get the same result on heightmap edit in Erase mode
+
+  const cells = grid.cells;
+  const heights = grid.cells.h;
+  cells.f = new Uint16Array(cells.i.length); // cell feature number
+  cells.t = new Int8Array(cells.i.length); // cell type: 1 = land coast; -1 = water near coast
+  grid.features = [0];
+
+  for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
+    cells.f[queue[0]] = i; // feature number
+    const land = heights[queue[0]] >= 20;
+    let border = false; // true if feature touches map border
+
+    while (queue.length) {
+      const q = queue.pop();
+      if (cells.b[q]) border = true;
+
+      cells.c[q].forEach(c => {
+        const cLand = heights[c] >= 20;
+        if (land === cLand && !cells.f[c]) {
+          cells.f[c] = i;
+          queue.push(c);
+        } else if (land && !cLand) {
+          cells.t[q] = 1;
+          cells.t[c] = -1;
+        }
+      });
+    }
+    const type = land ? "island" : border ? "ocean" : "lake";
+    grid.features.push({i, land, border, type});
+
+    queue[0] = cells.f.findIndex(f => !f); // find unmarked cell
+  }
+
+  TIME && console.timeEnd("markFeatures");
+}
+
+function markupGridOcean() {
+  TIME && console.time("markupGridOcean");
+  markup(grid.cells, -2, -1, -10);
+  TIME && console.timeEnd("markupGridOcean");
+}
+
+// Calculate cell-distance to coast for every cell
+function markup(cells, start, increment, limit) {
+  for (let t = start, count = Infinity; count > 0 && t > limit; t += increment) {
+    count = 0;
+    const prevT = t - increment;
+    for (let i = 0; i < cells.i.length; i++) {
+      if (cells.t[i] !== prevT) continue;
+
+      for (const c of cells.c[i]) {
+        if (cells.t[c]) continue;
+        cells.t[c] = t;
+        count++;
+      }
+    }
+  }
+}
+
 function addLakesInDeepDepressions() {
   TIME && console.time("addLakesInDeepDepressions");
-  const elevationLimit = +byId("lakeElevationLimitOutput").value;
-  if (elevationLimit === 80) return;
-
   const {cells, features} = grid;
   const {c, h, b} = cells;
+  const ELEVATION_LIMIT = +byId("lakeElevationLimitOutput").value;
+  if (ELEVATION_LIMIT === 80) return;
 
   for (const i of cells.i) {
     if (b[i] || h[i] < 20) continue;
@@ -729,7 +793,7 @@ function addLakesInDeepDepressions() {
     if (h[i] > minHeight) continue;
 
     let deep = true;
-    const threshold = h[i] + elevationLimit;
+    const threshold = h[i] + ELEVATION_LIMIT;
     const queue = [i];
     const checked = [];
     checked[i] = true;
@@ -915,7 +979,7 @@ function calculateTemperatures() {
     const [, y] = grid.points[rowCellId];
     const rowLatitude = mapCoordinates.latN - (y / graphHeight) * mapCoordinates.latT; // [90; -90]
     const tempSeaLevel = calculateSeaLevelTemp(rowLatitude);
-    DEBUG.temperature && console.info(`${rn(rowLatitude)}° sea temperature: ${rn(tempSeaLevel)}°C`);
+    DEBUG && console.info(`${rn(rowLatitude)}° sea temperature: ${rn(tempSeaLevel)}°C`);
 
     for (let cellId = rowCellId; cellId < rowCellId + grid.cellsX; cellId++) {
       const tempAltitudeDrop = getAltitudeTemperatureDrop(cells.h[cellId]);
@@ -1067,7 +1131,7 @@ function generatePrecipitation() {
           const from = west[0][0],
             to = west[west.length - 1][0];
           const y = (grid.points[from][1] + grid.points[to][1]) / 2;
-          wind.append("text").attr("text-rendering", "optimizeSpeed").attr("x", 20).attr("y", y).text("\u21C9");
+          wind.append("text").attr("x", 20).attr("y", y).text("\u21C9");
         }
       }
       if (easterly.length > 1) {
@@ -1078,7 +1142,6 @@ function generatePrecipitation() {
           const y = (grid.points[from][1] + grid.points[to][1]) / 2;
           wind
             .append("text")
-            .attr("text-rendering", "optimizeSpeed")
             .attr("x", graphWidth - 52)
             .attr("y", y)
             .text("\u21C7");
@@ -1089,14 +1152,12 @@ function generatePrecipitation() {
     if (northerly)
       wind
         .append("text")
-        .attr("text-rendering", "optimizeSpeed")
         .attr("x", graphWidth / 2)
         .attr("y", 42)
         .text("\u21CA");
     if (southerly)
       wind
         .append("text")
-        .attr("text-rendering", "optimizeSpeed")
         .attr("x", graphWidth / 2)
         .attr("y", graphHeight - 20)
         .text("\u21C8");
@@ -1159,6 +1220,222 @@ function reGraph() {
   TIME && console.timeEnd("reGraph");
 }
 
+// Detect and draw the coastline
+function drawCoastline() {
+  TIME && console.time("drawCoastline");
+  reMarkFeatures();
+
+  const cells = pack.cells,
+    vertices = pack.vertices,
+    n = cells.i.length,
+    features = pack.features;
+  const used = new Uint8Array(features.length); // store connected features
+  const largestLand = d3.scan(
+    features.map(f => (f.land ? f.cells : 0)),
+    (a, b) => b - a
+  );
+  const landMask = defs.select("#land");
+  const waterMask = defs.select("#water");
+  lineGen.curve(d3.curveBasisClosed);
+
+  for (const i of cells.i) {
+    const startFromEdge = !i && cells.h[i] >= 20;
+    if (!startFromEdge && cells.t[i] !== -1 && cells.t[i] !== 1) continue; // non-edge cell
+    const f = cells.f[i];
+    if (used[f]) continue; // already connected
+    if (features[f].type === "ocean") continue; // ocean cell
+
+    const type = features[f].type === "lake" ? 1 : -1; // type value to search for
+    const start = findStart(i, type);
+    if (start === -1) continue; // cannot start here
+    let vchain = connectVertices(start, type);
+    if (features[f].type === "lake") relax(vchain, 1.2);
+    used[f] = 1;
+    let points = clipPoly(
+      vchain.map(v => vertices.p[v]),
+      1
+    );
+    const area = d3.polygonArea(points); // area with lakes/islands
+    if (area > 0 && features[f].type === "lake") {
+      points = points.reverse();
+      vchain = vchain.reverse();
+    }
+
+    features[f].area = Math.abs(area);
+    features[f].vertices = vchain;
+
+    const path = round(lineGen(points));
+
+    if (features[f].type === "lake") {
+      landMask
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "black")
+        .attr("id", "land_" + f);
+      // waterMask.append("path").attr("d", path).attr("fill", "white").attr("id", "water_"+id); // uncomment to show over lakes
+      lakes
+        .select("#freshwater")
+        .append("path")
+        .attr("d", path)
+        .attr("id", "lake_" + f)
+        .attr("data-f", f); // draw the lake
+    } else {
+      landMask
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "white")
+        .attr("id", "land_" + f);
+      waterMask
+        .append("path")
+        .attr("d", path)
+        .attr("fill", "black")
+        .attr("id", "water_" + f);
+      const g = features[f].group === "lake_island" ? "lake_island" : "sea_island";
+      coastline
+        .select("#" + g)
+        .append("path")
+        .attr("d", path)
+        .attr("id", "island_" + f)
+        .attr("data-f", f); // draw the coastline
+    }
+
+    // draw ruler to cover the biggest land piece
+    if (f === largestLand) {
+      const from = points[d3.scan(points, (a, b) => a[0] - b[0])];
+      const to = points[d3.scan(points, (a, b) => b[0] - a[0])];
+      rulers.create(Ruler, [from, to]);
+    }
+  }
+
+  // find cell vertex to start path detection
+  function findStart(i, t) {
+    if (t === -1 && cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
+    const filtered = cells.c[i].filter(c => cells.t[c] === t);
+    const index = cells.c[i].indexOf(d3.min(filtered));
+    return index === -1 ? index : cells.v[i][index];
+  }
+
+  // connect vertices to chain
+  function connectVertices(start, t) {
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 50000); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      const v = vertices.v[current]; // neighboring vertices
+      const c0 = c[0] >= n || cells.t[c[0]] === t;
+      const c1 = c[1] >= n || cells.t[c[1]] === t;
+      const c2 = c[2] >= n || cells.t[c[2]] === t;
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
+
+  // move vertices that are too close to already added ones
+  function relax(vchain, r) {
+    const p = vertices.p,
+      tree = d3.quadtree();
+
+    for (let i = 0; i < vchain.length; i++) {
+      const v = vchain[i];
+      let [x, y] = [p[v][0], p[v][1]];
+      if (i && vchain[i + 1] && tree.find(x, y, r) !== undefined) {
+        const v1 = vchain[i - 1],
+          v2 = vchain[i + 1];
+        const [x1, y1] = [p[v1][0], p[v1][1]];
+        const [x2, y2] = [p[v2][0], p[v2][1]];
+        [x, y] = [(x1 + x2) / 2, (y1 + y2) / 2];
+        p[v] = [x, y];
+      }
+      tree.add([x, y]);
+    }
+  }
+
+  TIME && console.timeEnd("drawCoastline");
+}
+
+// Re-mark features (ocean, lakes, islands)
+function reMarkFeatures() {
+  TIME && console.time("reMarkFeatures");
+  const cells = pack.cells;
+  const features = (pack.features = [0]);
+
+  cells.f = new Uint16Array(cells.i.length); // cell feature number
+  cells.t = new Int8Array(cells.i.length); // cell type: 1 = land along coast; -1 = water along coast;
+  cells.haven = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length); // cell haven (opposite water cell);
+  cells.harbor = new Uint8Array(cells.i.length); // cell harbor (number of adjacent water cells);
+
+  if (!cells.i.length) return; // no cells -> there is nothing to do
+  for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
+    const start = queue[0]; // first cell
+    cells.f[start] = i; // assign feature number
+    const land = cells.h[start] >= 20;
+    let border = false; // true if feature touches map border
+    let cellNumber = 1; // to count cells number in a feature
+
+    while (queue.length) {
+      const q = queue.pop();
+      if (cells.b[q]) border = true;
+      cells.c[q].forEach(function (e) {
+        const eLand = cells.h[e] >= 20;
+        if (land && !eLand) {
+          cells.t[q] = 1;
+          cells.t[e] = -1;
+          if (!cells.haven[q]) defineHaven(q);
+        } else if (land && eLand) {
+          if (!cells.t[e] && cells.t[q] === 1) cells.t[e] = 2;
+          else if (!cells.t[q] && cells.t[e] === 1) cells.t[q] = 2;
+        }
+        if (!cells.f[e] && land === eLand) {
+          queue.push(e);
+          cells.f[e] = i;
+          cellNumber++;
+        }
+      });
+    }
+
+    const type = land ? "island" : border ? "ocean" : "lake";
+    let group;
+    if (type === "ocean") group = defineOceanGroup(cellNumber);
+    else if (type === "island") group = defineIslandGroup(start, cellNumber);
+    features.push({i, land, border, type, cells: cellNumber, firstCell: start, group});
+    queue[0] = cells.f.findIndex(f => !f); // find unmarked cell
+  }
+
+  markup(pack.cells, 3, 1, 0); // markupPackLand
+  markup(pack.cells, -2, -1, -10); // markupPackWater
+
+  function defineHaven(i) {
+    const water = cells.c[i].filter(c => cells.h[c] < 20);
+    const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
+    const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];
+
+    cells.haven[i] = closest;
+    cells.harbor[i] = water.length;
+  }
+
+  function defineOceanGroup(number) {
+    if (number > grid.cells.i.length / 25) return "ocean";
+    if (number > grid.cells.i.length / 100) return "sea";
+    return "gulf";
+  }
+
+  function defineIslandGroup(cell, number) {
+    if (cell && features[cells.f[cell - 1]].type === "lake") return "lake_island";
+    if (number > grid.cells.i.length / 10) return "continent";
+    if (number > grid.cells.i.length / 1000) return "island";
+    return "isle";
+  }
+
+  TIME && console.timeEnd("reMarkFeatures");
+}
+
 function isWetLand(moisture, temperature, height) {
   if (moisture > 40 && temperature > -2 && height < 25) return true; //near coast
   if (moisture > 24 && temperature > -2 && height > 24 && height < 60) return true; //off coast
@@ -1172,8 +1449,8 @@ function rankCells() {
   cells.s = new Int16Array(cells.i.length); // cell suitability array
   cells.pop = new Float32Array(cells.i.length); // cell population array
 
-  const flMean = d3.median(cells.fl.filter(f => f)) || 0;
-  const flMax = d3.max(cells.fl) + d3.max(cells.conf); // to normalize flux
+  const flMean = d3.median(cells.fl.filter(f => f)) || 0,
+    flMax = d3.max(cells.fl) + d3.max(cells.conf); // to normalize flux
   const areaMean = d3.mean(cells.area); // to adjust population by cell area
 
   for (const i of cells.i) {
@@ -1207,6 +1484,442 @@ function rankCells() {
   TIME && console.timeEnd("rankCells");
 }
 
+// generate zones
+function addZones(number = 1) {
+  TIME && console.time("addZones");
+  const {cells, states, burgs} = pack;
+  const used = new Uint8Array(cells.i.length); // to store used cells
+  const zonesData = [];
+
+  for (let i = 0; i < rn(Math.random() * 1.8 * number); i++) addInvasion(); // invasion of enemy lands
+  for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addRebels(); // rebels along a state border
+  for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addProselytism(); // proselitism of organized religion
+  for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addCrusade(); // crusade on heresy lands
+  for (let i = 0; i < rn(Math.random() * 1.8 * number); i++) addDisease(); // disease starting in a random city
+  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addDisaster(); // disaster starting in a random city
+  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addEruption(); // volcanic eruption aroung volcano
+  for (let i = 0; i < rn(Math.random() * 1.0 * number); i++) addAvalanche(); // avalanche impacting highland road
+  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addFault(); // fault line in elevated areas
+  for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addFlood(); // flood on river banks
+  for (let i = 0; i < rn(Math.random() * 1.2 * number); i++) addTsunami(); // tsunami starting near coast
+
+  drawZones();
+
+  function addInvasion() {
+    const atWar = states.filter(s => s.diplomacy && s.diplomacy.some(d => d === "Enemy"));
+    if (!atWar.length) return;
+
+    const invader = ra(atWar);
+    const target = invader.diplomacy.findIndex(d => d === "Enemy");
+
+    const cell = ra(
+      cells.i.filter(i => cells.state[i] === target && cells.c[i].some(c => cells.state[c] === invader.i))
+    );
+    if (!cell) return;
+
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(5, 30);
+
+    while (queue.length) {
+      const q = P(0.4) ? queue.shift() : queue.pop();
+      cellsArray.push(q);
+      if (cellsArray.length > power) break;
+
+      cells.c[q].forEach(e => {
+        if (used[e]) return;
+        if (cells.state[e] !== target) return;
+        used[e] = 1;
+        queue.push(e);
+      });
+    }
+
+    const invasion = rw({
+      Invasion: 4,
+      Occupation: 3,
+      Raid: 2,
+      Conquest: 2,
+      Subjugation: 1,
+      Foray: 1,
+      Skirmishes: 1,
+      Incursion: 2,
+      Pillaging: 1,
+      Intervention: 1
+    });
+    const name = getAdjective(invader.name) + " " + invasion;
+    zonesData.push({name, type: "Invasion", cells: cellsArray, fill: "url(#hatch1)"});
+  }
+
+  function addRebels() {
+    const state = ra(states.filter(s => s.i && !s.removed && s.neighbors.some(n => n)));
+    if (!state) return;
+
+    const neib = ra(state.neighbors.filter(n => n && !states[n].removed));
+    if (!neib) return;
+    const cell = cells.i.find(
+      i => cells.state[i] === state.i && !state.removed && cells.c[i].some(c => cells.state[c] === neib)
+    );
+    const cellsArray = [];
+    const queue = [];
+    if (cell) queue.push(cell);
+
+    const power = rand(10, 30);
+
+    while (queue.length) {
+      const q = queue.shift();
+      cellsArray.push(q);
+      if (cellsArray.length > power) break;
+
+      cells.c[q].forEach(e => {
+        if (used[e]) return;
+        if (cells.state[e] !== state.i) return;
+        used[e] = 1;
+        if (e % 4 !== 0 && !cells.c[e].some(c => cells.state[c] === neib)) return;
+        queue.push(e);
+      });
+    }
+
+    const rebels = rw({
+      Rebels: 5,
+      Insurgents: 2,
+      Mutineers: 1,
+      Rioters: 1,
+      Separatists: 1,
+      Secessionists: 1,
+      Insurrection: 2,
+      Rebellion: 1,
+      Conspiracy: 2
+    });
+    const name = getAdjective(states[neib].name) + " " + rebels;
+    zonesData.push({name, type: "Rebels", cells: cellsArray, fill: "url(#hatch3)"});
+  }
+
+  function addProselytism() {
+    const organized = ra(pack.religions.filter(r => r.type === "Organized"));
+    if (!organized) return;
+
+    const cell = ra(
+      cells.i.filter(
+        i =>
+          cells.religion[i] &&
+          cells.religion[i] !== organized.i &&
+          cells.c[i].some(c => cells.religion[c] === organized.i)
+      )
+    );
+    if (!cell) return;
+    const target = cells.religion[cell];
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(10, 30);
+
+    while (queue.length) {
+      const q = queue.shift();
+      cellsArray.push(q);
+      if (cellsArray.length > power) break;
+
+      cells.c[q].forEach(e => {
+        if (used[e]) return;
+        if (cells.religion[e] !== target) return;
+        if (cells.h[e] < 20) return;
+        used[e] = 1;
+        //if (e%2 !== 0 && !cells.c[e].some(c => cells.state[c] === neib)) return;
+        queue.push(e);
+      });
+    }
+
+    const name = getAdjective(organized.name.split(" ")[0]) + " Proselytism";
+    zonesData.push({name, type: "Proselytism", cells: cellsArray, fill: "url(#hatch6)"});
+  }
+
+  function addCrusade() {
+    const heresy = ra(pack.religions.filter(r => r.type === "Heresy"));
+    if (!heresy) return;
+
+    const cellsArray = cells.i.filter(i => !used[i] && cells.religion[i] === heresy.i);
+    if (!cellsArray.length) return;
+    cellsArray.forEach(i => (used[i] = 1));
+
+    const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade";
+    zonesData.push({name, type: "Crusade", cells: cellsArray, fill: "url(#hatch6)"});
+  }
+
+  function addDisease() {
+    const burg = ra(burgs.filter(b => !used[b.cell] && b.i && !b.removed)); // random burg
+    if (!burg) return;
+
+    const cellsArray = [];
+    const cost = [];
+    const power = rand(20, 37);
+
+    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
+    queue.queue({e: burg.cell, p: 0});
+
+    while (queue.length) {
+      const next = queue.dequeue();
+      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
+      used[next.e] = 1;
+
+      cells.c[next.e].forEach(nextCellId => {
+        const c = Routes.getRoute(next.e, nextCellId) ? 5 : 100;
+        const p = next.p + c;
+        if (p > power) return;
+
+        if (!cost[nextCellId] || p < cost[nextCellId]) {
+          cost[nextCellId] = p;
+          queue.queue({e: nextCellId, p});
+        }
+      });
+    }
+
+    const adjective = () =>
+      ra(["Great", "Silent", "Severe", "Blind", "Unknown", "Loud", "Deadly", "Burning", "Bloody", "Brutal", "Fatal"]);
+    const animal = () =>
+      ra([
+        "Ape",
+        "Bear",
+        "Boar",
+        "Cat",
+        "Cow",
+        "Dog",
+        "Pig",
+        "Fox",
+        "Bird",
+        "Horse",
+        "Rat",
+        "Raven",
+        "Sheep",
+        "Spider",
+        "Wolf"
+      ]);
+    const color = () =>
+      ra([
+        "Golden",
+        "White",
+        "Black",
+        "Red",
+        "Pink",
+        "Purple",
+        "Blue",
+        "Green",
+        "Yellow",
+        "Amber",
+        "Orange",
+        "Brown",
+        "Grey"
+      ]);
+
+    const type = rw({
+      Fever: 5,
+      Pestilence: 2,
+      Flu: 2,
+      Pox: 2,
+      Smallpox: 2,
+      Plague: 4,
+      Cholera: 2,
+      Dropsy: 1,
+      Leprosy: 2
+    });
+    const name = rw({[color()]: 4, [animal()]: 2, [adjective()]: 1}) + " " + type;
+    zonesData.push({name, type: "Disease", cells: cellsArray, fill: "url(#hatch12)"});
+  }
+
+  function addDisaster() {
+    const burg = ra(burgs.filter(b => !used[b.cell] && b.i && !b.removed)); // random burg
+    if (!burg) return;
+
+    const cellsArray = [],
+      cost = [],
+      power = rand(5, 25);
+    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
+    queue.queue({e: burg.cell, p: 0});
+
+    while (queue.length) {
+      const next = queue.dequeue();
+      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
+      used[next.e] = 1;
+
+      cells.c[next.e].forEach(function (e) {
+        const c = rand(1, 10);
+        const p = next.p + c;
+        if (p > power) return;
+
+        if (!cost[e] || p < cost[e]) {
+          cost[e] = p;
+          queue.queue({e, p});
+        }
+      });
+    }
+
+    const type = rw({Famine: 5, Dearth: 1, Drought: 3, Earthquake: 3, Tornadoes: 1, Wildfires: 1});
+    const name = getAdjective(burg.name) + " " + type;
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
+  }
+
+  function addEruption() {
+    const volcano = byId("markers").querySelector("use[data-id='#marker_volcano']");
+    if (!volcano) return;
+
+    const x = +volcano.dataset.x,
+      y = +volcano.dataset.y,
+      cell = findCell(x, y);
+    const id = volcano.id;
+    const note = notes.filter(n => n.id === id);
+
+    if (note[0]) note[0].legend = note[0].legend.replace("Active volcano", "Erupting volcano");
+    const name = note[0] ? note[0].name.replace(" Volcano", "") + " Eruption" : "Volcano Eruption";
+
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(10, 30);
+
+    while (queue.length) {
+      const q = P(0.5) ? queue.shift() : queue.pop();
+      cellsArray.push(q);
+      if (cellsArray.length > power) break;
+      cells.c[q].forEach(e => {
+        if (used[e] || cells.h[e] < 20) return;
+        used[e] = 1;
+        queue.push(e);
+      });
+    }
+
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch7)"});
+  }
+
+  function addAvalanche() {
+    const routes = cells.i.filter(i => !used[i] && Routes.isConnected(i) && cells.h[i] >= 70);
+    if (!routes.length) return;
+
+    const cell = +ra(routes);
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(3, 15);
+
+    while (queue.length) {
+      const q = P(0.3) ? queue.shift() : queue.pop();
+      cellsArray.push(q);
+      if (cellsArray.length > power) break;
+      cells.c[q].forEach(e => {
+        if (used[e] || cells.h[e] < 65) return;
+        used[e] = 1;
+        queue.push(e);
+      });
+    }
+
+    const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
+    const name = proper + " Avalanche";
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
+  }
+
+  function addFault() {
+    const elevated = cells.i.filter(i => !used[i] && cells.h[i] > 50 && cells.h[i] < 70);
+    if (!elevated.length) return;
+
+    const cell = ra(elevated);
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(3, 15);
+
+    while (queue.length) {
+      const q = queue.pop();
+      if (cells.h[q] >= 20) cellsArray.push(q);
+      if (cellsArray.length > power) break;
+      cells.c[q].forEach(e => {
+        if (used[e] || cells.r[e]) return;
+        used[e] = 1;
+        queue.push(e);
+      });
+    }
+
+    const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
+    const name = proper + " Fault";
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch2)"});
+  }
+
+  function addFlood() {
+    const fl = cells.fl.filter(fl => fl),
+      meanFlux = d3.mean(fl),
+      maxFlux = d3.max(fl),
+      flux = (maxFlux - meanFlux) / 2 + meanFlux;
+    const rivers = cells.i.filter(
+      i => !used[i] && cells.h[i] < 50 && cells.r[i] && cells.fl[i] > flux && cells.burg[i]
+    );
+    if (!rivers.length) return;
+
+    const cell = +ra(rivers),
+      river = cells.r[cell];
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(5, 30);
+
+    while (queue.length) {
+      const q = queue.pop();
+      cellsArray.push(q);
+      if (cellsArray.length > power) break;
+
+      cells.c[q].forEach(e => {
+        if (used[e] || cells.h[e] < 20 || cells.r[e] !== river || cells.h[e] > 50 || cells.fl[e] < meanFlux) return;
+        used[e] = 1;
+        queue.push(e);
+      });
+    }
+
+    const name = getAdjective(burgs[cells.burg[cell]].name) + " Flood";
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
+  }
+
+  function addTsunami() {
+    const coastal = cells.i.filter(i => !used[i] && cells.t[i] === -1 && pack.features[cells.f[i]].type !== "lake");
+    if (!coastal.length) return;
+
+    const cell = +ra(coastal);
+    const cellsArray = [],
+      queue = [cell],
+      power = rand(10, 30);
+
+    while (queue.length) {
+      const q = queue.shift();
+      if (cells.t[q] === 1) cellsArray.push(q);
+      if (cellsArray.length > power) break;
+
+      cells.c[q].forEach(e => {
+        if (used[e]) return;
+        if (cells.t[e] > 2) return;
+        if (pack.features[cells.f[e]].type === "lake") return;
+        used[e] = 1;
+        queue.push(e);
+      });
+    }
+
+    const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
+    const name = proper + " Tsunami";
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
+  }
+
+  function drawZones() {
+    zones
+      .selectAll("g")
+      .data(zonesData)
+      .enter()
+      .append("g")
+      .attr("id", (d, i) => "zone" + i)
+      .attr("data-description", d => d.name)
+      .attr("data-type", d => d.type)
+      .attr("data-cells", d => d.cells.join(","))
+      .attr("fill", d => d.fill)
+      .selectAll("polygon")
+      .data(d => d.cells)
+      .enter()
+      .append("polygon")
+      .attr("points", d => getPackPolygon(d))
+      .attr("id", function (d) {
+        return this.parentNode.id + "_" + d;
+      });
+  }
+
+  TIME && console.timeEnd("addZones");
+}
+
 // show map stats on generation complete
 function showStatistics() {
   const heightmap = byId("templateInput").value;
@@ -1216,8 +1929,7 @@ function showStatistics() {
 
   const stats = `  Seed: ${seed}
     Canvas size: ${graphWidth}x${graphHeight} px
-    Heightmap: ${heightmap}
-    Template: ${isRandomTemplate}${heightmapType}
+    Heightmap: ${heightmap} (${isRandomTemplate}${heightmapType})
     Points: ${grid.points.length}
     Cells: ${pack.cells.i.length}
     Map size: ${mapSizeOutput.value}%
@@ -1225,7 +1937,7 @@ function showStatistics() {
     Provinces: ${pack.provinces.length - 1}
     Burgs: ${pack.burgs.length - 1}
     Religions: ${pack.religions.length - 1}
-    Culture set: ${culturesSet.value}
+    Culture set: ${culturesSet.selectedOptions[0].innerText}
     Cultures: ${pack.cultures.length - 1}`;
 
   mapId = Date.now(); // unique map id is it's creation date number
@@ -1245,7 +1957,7 @@ const regenerateMap = debounce(async function (options) {
   resetZoom(1000);
   undraw();
   await generate(options);
-  drawLayers();
+  restoreLayers();
   if (ThreeD.options.isOn) ThreeD.redraw();
   if ($("#worldConfigurator").is(":visible")) editWorld();
 
@@ -1259,10 +1971,12 @@ function undraw() {
   viewbox
     .selectAll("path, circle, polygon, line, text, use, #texture > image, #zones > g, #armies > g, #ruler > g")
     .remove();
-  byId("deftemp")
+  document
+    .getElementById("deftemp")
     .querySelectorAll("path, clipPath, svg")
     .forEach(el => el.remove());
   byId("coas").innerHTML = ""; // remove auto-generated emblems
   notes = [];
+  rulers = new Rulers();
   unfog();
 }
diff --git a/modules/burgs-and-states.js b/modules/burgs-and-states.js
index 8e3879c1..dfd734cb 100644
--- a/modules/burgs-and-states.js
+++ b/modules/burgs-and-states.js
@@ -13,8 +13,6 @@ window.BurgsAndStates = (() => {
     placeTowns();
     expandStates();
     normalizeStates();
-    getPoles();
-
     specifyBurgs();
 
     collectStatistics();
@@ -22,10 +20,11 @@ window.BurgsAndStates = (() => {
 
     generateCampaigns();
     generateDiplomacy();
+    drawBurgs();
 
     function placeCapitals() {
       TIME && console.time("placeCapitals");
-      let count = +byId("statesNumber").value;
+      let count = +regionsOutput.value;
       let burgs = [0];
 
       const rand = () => 0.5 + Math.random() * 0.5;
@@ -86,7 +85,7 @@ window.BurgsAndStates = (() => {
         b.capital = 1;
 
         // states data
-        const expansionism = rn(Math.random() * byId("sizeVariety").value + 1, 1);
+        const expansionism = rn(Math.random() * powerInput.value + 1, 1);
         const basename = b.name.length < 9 && each5th(b.cell) ? b.name : Names.getCultureShort(b.culture);
         const name = Names.getState(basename, b.culture);
         const type = cultures[b.culture].type;
@@ -239,23 +238,16 @@ window.BurgsAndStates = (() => {
     return [x, y];
   }
 
-  const getType = (cellId, port) => {
-    const {cells, features, burgs} = pack;
-
+  const getType = (i, port) => {
+    const cells = pack.cells;
     if (port) return "Naval";
+    if (cells.haven[i] && pack.features[cells.f[cells.haven[i]]].type === "lake") return "Lake";
+    if (cells.h[i] > 60) return "Highland";
+    if (cells.r[i] && cells.r[i].length > 100 && cells.r[i].length >= pack.rivers[0].length) return "River";
 
-    const haven = cells.haven[cellId];
-    if (haven !== undefined && features[cells.f[haven]].type === "lake") return "Lake";
-
-    if (cells.h[cellId] > 60) return "Highland";
-
-    if (cells.r[cellId] && cells.fl[cellId] >= 100) return "River";
-
-    const biome = cells.biome[cellId];
-    const population = cells.pop[cellId];
-    if (!cells.burg[cellId] || population <= 5) {
-      if (population < 5 && [1, 2, 3, 4].includes(biome)) return "Nomadic";
-      if (biome > 4 && biome < 10) return "Hunting";
+    if (!cells.burg[i] || pack.burgs[cells.burg[i]].population < 6) {
+      if (population < 5 && [1, 2, 3, 4].includes(cells.biome[i])) return "Nomadic";
+      if (cells.biome[i] > 4 && cells.biome[i] < 10) return "Hunting";
     }
 
     return "Generic";
@@ -280,19 +272,115 @@ window.BurgsAndStates = (() => {
       });
   };
 
+  const drawBurgs = () => {
+    TIME && console.time("drawBurgs");
+
+    // remove old data
+    burgIcons.selectAll("circle").remove();
+    burgLabels.selectAll("text").remove();
+    icons.selectAll("use").remove();
+
+    // capitals
+    const capitals = pack.burgs.filter(b => b.capital && !b.removed);
+    const capitalIcons = burgIcons.select("#cities");
+    const capitalLabels = burgLabels.select("#cities");
+    const capitalSize = capitalIcons.attr("size") || 1;
+    const capitalAnchors = anchors.selectAll("#cities");
+    const caSize = capitalAnchors.attr("size") || 2;
+
+    capitalIcons
+      .selectAll("circle")
+      .data(capitals)
+      .enter()
+      .append("circle")
+      .attr("id", d => "burg" + d.i)
+      .attr("data-id", d => d.i)
+      .attr("cx", d => d.x)
+      .attr("cy", d => d.y)
+      .attr("r", capitalSize);
+
+    capitalLabels
+      .selectAll("text")
+      .data(capitals)
+      .enter()
+      .append("text")
+      .attr("id", d => "burgLabel" + d.i)
+      .attr("data-id", d => d.i)
+      .attr("x", d => d.x)
+      .attr("y", d => d.y)
+      .attr("dy", `${capitalSize * -1.5}px`)
+      .text(d => d.name);
+
+    capitalAnchors
+      .selectAll("use")
+      .data(capitals.filter(c => c.port))
+      .enter()
+      .append("use")
+      .attr("xlink:href", "#icon-anchor")
+      .attr("data-id", d => d.i)
+      .attr("x", d => rn(d.x - caSize * 0.47, 2))
+      .attr("y", d => rn(d.y - caSize * 0.47, 2))
+      .attr("width", caSize)
+      .attr("height", caSize);
+
+    // towns
+    const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
+    const townIcons = burgIcons.select("#towns");
+    const townLabels = burgLabels.select("#towns");
+    const townSize = townIcons.attr("size") || 0.5;
+    const townsAnchors = anchors.selectAll("#towns");
+    const taSize = townsAnchors.attr("size") || 1;
+
+    townIcons
+      .selectAll("circle")
+      .data(towns)
+      .enter()
+      .append("circle")
+      .attr("id", d => "burg" + d.i)
+      .attr("data-id", d => d.i)
+      .attr("cx", d => d.x)
+      .attr("cy", d => d.y)
+      .attr("r", townSize);
+
+    townLabels
+      .selectAll("text")
+      .data(towns)
+      .enter()
+      .append("text")
+      .attr("id", d => "burgLabel" + d.i)
+      .attr("data-id", d => d.i)
+      .attr("x", d => d.x)
+      .attr("y", d => d.y)
+      .attr("dy", `${townSize * -1.5}px`)
+      .text(d => d.name);
+
+    townsAnchors
+      .selectAll("use")
+      .data(towns.filter(c => c.port))
+      .enter()
+      .append("use")
+      .attr("xlink:href", "#icon-anchor")
+      .attr("data-id", d => d.i)
+      .attr("x", d => rn(d.x - taSize * 0.47, 2))
+      .attr("y", d => rn(d.y - taSize * 0.47, 2))
+      .attr("width", taSize)
+      .attr("height", taSize);
+
+    TIME && console.timeEnd("drawBurgs");
+  };
+
   // expand cultures across the map (Dijkstra-like algorithm)
   const expandStates = () => {
     TIME && console.time("expandStates");
     const {cells, states, cultures, burgs} = pack;
 
     cells.state = cells.state || new Uint16Array(cells.i.length);
-
-    const queue = new FlatQueue();
+    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
     const cost = [];
 
-    const globalGrowthRate = byId("growthRate").valueAsNumber || 1;
-    const statesGrowthRate = byId("statesGrowthRate")?.valueAsNumber || 1;
-    const growthRate = (cells.i.length / 2) * globalGrowthRate * statesGrowthRate; // limit cost for state growth
+    const globalNeutralRate = byId("neutralInput")?.valueAsNumber || 1;
+    const statesNeutralRate = byId("statesNeutral")?.valueAsNumber || 1;
+    const neutral = (cells.i.length / 2) * globalNeutralRate * statesNeutralRate; // limit cost for state growth
 
     // remove state from all cells except of locked
     for (const cellId of cells.i) {
@@ -308,13 +396,12 @@ window.BurgsAndStates = (() => {
       cells.state[capitalCell] = state.i;
       const cultureCenter = cultures[state.culture].center;
       const b = cells.biome[cultureCenter]; // state native biome
-      queue.push({e: state.center, p: 0, s: state.i, b}, 0);
+      queue.queue({e: state.center, p: 0, s: state.i, b});
       cost[state.center] = 1;
     }
 
     while (queue.length) {
-      const next = queue.pop();
-
+      const next = queue.dequeue();
       const {e, p, s, b} = next;
       const {type, culture} = states[s];
 
@@ -332,12 +419,12 @@ window.BurgsAndStates = (() => {
         const cellCost = Math.max(cultureCost + populationCost + biomeCost + heightCost + riverCost + typeCost, 0);
         const totalCost = p + 10 + cellCost / states[s].expansionism;
 
-        if (totalCost > growthRate) return;
+        if (totalCost > neutral) return;
 
         if (!cost[e] || totalCost < cost[e]) {
           if (cells.h[e] >= 20) cells.state[e] = s; // assign state to cell
           cost[e] = totalCost;
-          queue.push({e, p: totalCost, s, b}, totalCost);
+          queue.queue({e, p: totalCost, s, b});
         }
       });
     }
@@ -381,7 +468,8 @@ window.BurgsAndStates = (() => {
 
   const normalizeStates = () => {
     TIME && console.time("normalizeStates");
-    const {cells, burgs} = pack;
+    const cells = pack.cells,
+      burgs = pack.burgs;
 
     for (const i of cells.i) {
       if (cells.h[i] < 20 || cells.burg[i]) continue; // do not overwrite burgs
@@ -398,30 +486,26 @@ window.BurgsAndStates = (() => {
     TIME && console.timeEnd("normalizeStates");
   };
 
-  // calculate pole of inaccessibility for each state
-  const getPoles = () => {
-    const getType = cellId => pack.cells.state[cellId];
-    const poles = getPolesOfInaccessibility(pack, getType);
-
-    pack.states.forEach(s => {
-      if (!s.i || s.removed) return;
-      s.pole = poles[s.i] || [0, 0];
-    });
-  };
-
-  // Resets the cultures of all burgs and states to their cell or center cell's (respectively) culture
+  // Resets the cultures of all burgs and states to their
+  // cell or center cell's (respectively) culture.
   const updateCultures = () => {
     TIME && console.time("updateCulturesForBurgsAndStates");
 
-    // Assign the culture associated with the burgs cell
+    // Assign the culture associated with the burgs cell.
     pack.burgs = pack.burgs.map((burg, index) => {
-      if (index === 0) return burg;
+      // Ignore metadata burg
+      if (index === 0) {
+        return burg;
+      }
       return {...burg, culture: pack.cells.culture[burg.cell]};
     });
 
-    // Assign the culture associated with the states' center cell
+    // Assign the culture associated with the states' center cell.
     pack.states = pack.states.map((state, index) => {
-      if (index === 0) return state;
+      // Ignore neutrals state
+      if (index === 0) {
+        return state;
+      }
       return {...state, culture: pack.cells.culture[state.center]};
     });
 
@@ -527,7 +611,8 @@ window.BurgsAndStates = (() => {
   // generate Diplomatic Relationships
   const generateDiplomacy = () => {
     TIME && console.time("generateDiplomacy");
-    const {cells, states} = pack;
+    const cells = pack.cells,
+      states = pack.states;
     const chronicle = (states[0].diplomacy = []);
     const valid = states.filter(s => s.i && !states.removed);
 
@@ -611,23 +696,21 @@ window.BurgsAndStates = (() => {
       const defender = ra(
         ad.map((r, d) => (r === "Rival" && !states[d].diplomacy.includes("Vassal") ? d : 0)).filter(d => d)
       );
-      let ap = states[attacker].area * states[attacker].expansionism;
-      let dp = states[defender].area * states[defender].expansionism;
+      let ap = states[attacker].area * states[attacker].expansionism,
+        dp = states[defender].area * states[defender].expansionism;
       if (ap < dp * gauss(1.6, 0.8, 0, 10, 2)) continue; // defender is too strong
-
-      const an = states[attacker].name;
-      const dn = states[defender].name; // names
-      const attackers = [attacker];
-      const defenders = [defender]; // attackers and defenders array
+      const an = states[attacker].name,
+        dn = states[defender].name; // names
+      const attackers = [attacker],
+        defenders = [defender]; // attackers and defenders array
       const dd = states[defender].diplomacy; // defender relations;
 
-      // start an ongoing war
-      const name = `${an}-${trimVowels(dn)}ian War`;
-      const start = options.year - gauss(2, 3, 0, 10);
-      const war = [name, `${an} declared a war on its rival ${dn}`];
-      const campaign = {name, start, attacker, defender};
-      states[attacker].campaigns.push(campaign);
-      states[defender].campaigns.push(campaign);
+      // start a war
+      const war = [`${an}-${trimVowels(dn)}ian War`, `${an} declared a war on its rival ${dn}`];
+      const end = options.year;
+      const start = end - gauss(2, 2, 0, 5);
+      states[attacker].campaigns.push({name: `${trimVowels(dn)}ian War`, start, end});
+      states[defender].campaigns.push({name: `${trimVowels(an)}ian War`, start, end});
 
       // attacker vassals join the war
       ad.forEach((r, d) => {
@@ -707,6 +790,7 @@ window.BurgsAndStates = (() => {
     }
 
     TIME && console.timeEnd("generateDiplomacy");
+    //console.table(states.map(s => s.diplomacy));
   };
 
   // select a forms for listed or all valid states
@@ -865,12 +949,254 @@ window.BurgsAndStates = (() => {
     return adjName ? `${getAdjective(state.name)} ${state.formName}` : `${state.formName} of ${state.name}`;
   };
 
+  const generateProvinces = (regenerate = false, regenerateInLockedStates = false) => {
+    TIME && console.time("generateProvinces");
+    const localSeed = regenerate ? generateSeed() : seed;
+    Math.random = aleaPRNG(localSeed);
+
+    const {cells, states, burgs} = pack;
+    const provinces = [0];
+    const provinceIds = new Uint16Array(cells.i.length);
+
+    const isProvinceLocked = province => province.lock || (!regenerateInLockedStates && states[province.state]?.lock);
+    const isProvinceCellLocked = cell => provinceIds[cell] && isProvinceLocked(provinces[provinceIds[cell]]);
+
+    if (regenerate) {
+      pack.provinces.forEach(province => {
+        if (!province.i || province.removed || !isProvinceLocked(province)) return;
+
+        const newId = provinces.length;
+        for (const i of cells.i) {
+          if (cells.province[i] === province.i) provinceIds[i] = newId;
+        }
+
+        province.i = newId;
+        provinces.push(province);
+      });
+    }
+
+    const percentage = +provincesInput.value;
+
+    const max = percentage == 100 ? 1000 : gauss(20, 5, 5, 100) * percentage ** 0.5; // max growth
+
+    const forms = {
+      Monarchy: {County: 22, Earldom: 6, Shire: 2, Landgrave: 2, Margrave: 2, Barony: 2, Captaincy: 1, Seneschalty: 1},
+      Republic: {Province: 6, Department: 2, Governorate: 2, District: 1, Canton: 1, Prefecture: 1},
+      Theocracy: {Parish: 3, Deanery: 1},
+      Union: {Province: 1, State: 1, Canton: 1, Republic: 1, County: 1, Council: 1},
+      Anarchy: {Council: 1, Commune: 1, Community: 1, Tribe: 1},
+      Wild: {Territory: 10, Land: 5, Region: 2, Tribe: 1, Clan: 1, Dependency: 1, Area: 1}
+    };
+
+    // generate provinces for selected burgs
+    states.forEach(s => {
+      s.provinces = [];
+      if (!s.i || s.removed) return;
+      if (provinces.length) s.provinces = provinces.filter(p => p.state === s.i).map(p => p.i); // locked provinces ids
+      if (s.lock && !regenerateInLockedStates) return; // don't regenerate provinces of a locked state
+
+      const stateBurgs = burgs
+        .filter(b => b.state === s.i && !b.removed && !provinceIds[b.cell])
+        .sort((a, b) => b.population * gauss(1, 0.2, 0.5, 1.5, 3) - a.population)
+        .sort((a, b) => b.capital - a.capital);
+      if (stateBurgs.length < 2) return; // at least 2 provinces are required
+      const provincesNumber = Math.max(Math.ceil((stateBurgs.length * percentage) / 100), 2);
+
+      const form = Object.assign({}, forms[s.form]);
+
+      for (let i = 0; i < provincesNumber; i++) {
+        const provinceId = provinces.length;
+        const center = stateBurgs[i].cell;
+        const burg = stateBurgs[i].i;
+        const c = stateBurgs[i].culture;
+        const nameByBurg = P(0.5);
+        const name = nameByBurg ? stateBurgs[i].name : Names.getState(Names.getCultureShort(c), c);
+        const formName = rw(form);
+        form[formName] += 10;
+        const fullName = name + " " + formName;
+        const color = getMixedColor(s.color);
+        const kinship = nameByBurg ? 0.8 : 0.4;
+        const type = getType(center, burg.port);
+        const coa = COA.generate(stateBurgs[i].coa, kinship, null, type);
+        coa.shield = COA.getShield(c, s.i);
+
+        s.provinces.push(provinceId);
+        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
+      }
+    });
+
+    // expand generated provinces
+    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
+    const cost = [];
+
+    provinces.forEach(p => {
+      if (!p.i || p.removed || isProvinceLocked(p)) return;
+      provinceIds[p.center] = p.i;
+      queue.queue({e: p.center, p: 0, province: p.i, state: p.state});
+      cost[p.center] = 1;
+    });
+
+    while (queue.length) {
+      const {e, p, province, state} = queue.dequeue();
+
+      cells.c[e].forEach(e => {
+        if (isProvinceCellLocked(e)) return; // do not overwrite cell of locked provinces
+
+        const land = cells.h[e] >= 20;
+        if (!land && !cells.t[e]) return; // cannot pass deep ocean
+        if (land && cells.state[e] !== state) return;
+        const evevation = cells.h[e] >= 70 ? 100 : cells.h[e] >= 50 ? 30 : cells.h[e] >= 20 ? 10 : 100;
+        const totalCost = p + evevation;
+
+        if (totalCost > max) return;
+        if (!cost[e] || totalCost < cost[e]) {
+          if (land) provinceIds[e] = province; // assign province to a cell
+          cost[e] = totalCost;
+          queue.queue({e, p: totalCost, province, state});
+        }
+      });
+    }
+
+    // justify provinces shapes a bit
+    for (const i of cells.i) {
+      if (cells.burg[i]) continue; // do not overwrite burgs
+      if (isProvinceCellLocked(i)) continue; // do not overwrite cell of locked provinces
+
+      const neibs = cells.c[i]
+        .filter(c => cells.state[c] === cells.state[i] && !isProvinceCellLocked(c))
+        .map(c => provinceIds[c]);
+      const adversaries = neibs.filter(c => c !== provinceIds[i]);
+      if (adversaries.length < 2) continue;
+
+      const buddies = neibs.filter(c => c === provinceIds[i]).length;
+      if (buddies.length > 2) continue;
+
+      const competitors = adversaries.map(p => adversaries.reduce((s, v) => (v === p ? s + 1 : s), 0));
+      const max = d3.max(competitors);
+      if (buddies >= max) continue;
+
+      provinceIds[i] = adversaries[competitors.indexOf(max)];
+    }
+
+    // add "wild" provinces if some cells don't have a province assigned
+    const noProvince = Array.from(cells.i).filter(i => cells.state[i] && !provinceIds[i]); // cells without province assigned
+    states.forEach(s => {
+      if (!s.i || s.removed) return;
+      if (s.lock && !regenerateInLockedStates) return;
+      if (!s.provinces.length) return;
+
+      const coreProvinceNames = s.provinces.map(p => provinces[p]?.name);
+      const colonyNamePool = [s.name, ...coreProvinceNames].filter(name => name && !/new/i.test(name));
+      const getColonyName = () => {
+        if (colonyNamePool.length < 1) return null;
+
+        const index = rand(colonyNamePool.length - 1);
+        const spliced = colonyNamePool.splice(index, 1);
+        return spliced[0] ? `New ${spliced[0]}` : null;
+      };
+
+      let stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
+      while (stateNoProvince.length) {
+        // add new province
+        const provinceId = provinces.length;
+        const burgCell = stateNoProvince.find(i => cells.burg[i]);
+        const center = burgCell ? burgCell : stateNoProvince[0];
+        const burg = burgCell ? cells.burg[burgCell] : 0;
+        provinceIds[center] = provinceId;
+
+        // expand province
+        const cost = [];
+        cost[center] = 1;
+        queue.queue({e: center, p: 0});
+        while (queue.length) {
+          const {e, p} = queue.dequeue();
+
+          cells.c[e].forEach(nextCellId => {
+            if (provinceIds[nextCellId]) return;
+            const land = cells.h[nextCellId] >= 20;
+            if (cells.state[nextCellId] && cells.state[nextCellId] !== s.i) return;
+            const ter = land ? (cells.state[nextCellId] === s.i ? 3 : 20) : cells.t[nextCellId] ? 10 : 30;
+            const totalCost = p + ter;
+
+            if (totalCost > max) return;
+            if (!cost[nextCellId] || totalCost < cost[nextCellId]) {
+              if (land && cells.state[nextCellId] === s.i) provinceIds[nextCellId] = provinceId; // assign province to a cell
+              cost[nextCellId] = totalCost;
+              queue.queue({e: nextCellId, p: totalCost});
+            }
+          });
+        }
+
+        // generate "wild" province name
+        const c = cells.culture[center];
+        const f = pack.features[cells.f[center]];
+        const color = getMixedColor(s.color);
+
+        const provCells = stateNoProvince.filter(i => provinceIds[i] === provinceId);
+        const singleIsle = provCells.length === f.cells && !provCells.find(i => cells.f[i] !== f.i);
+        const isleGroup = !singleIsle && !provCells.find(i => pack.features[cells.f[i]].group !== "isle");
+        const colony = !singleIsle && !isleGroup && P(0.5) && !isPassable(s.center, center);
+
+        const name = (() => {
+          const colonyName = colony && P(0.8) && getColonyName();
+          if (colonyName) return colonyName;
+          if (burgCell && P(0.5)) return burgs[burg].name;
+          return Names.getState(Names.getCultureShort(c), c);
+        })();
+
+        const formName = (() => {
+          if (singleIsle) return "Island";
+          if (isleGroup) return "Islands";
+          if (colony) return "Colony";
+          return rw(forms["Wild"]);
+        })();
+
+        const fullName = name + " " + formName;
+
+        const dominion = colony ? P(0.95) : singleIsle || isleGroup ? P(0.7) : P(0.3);
+        const kinship = dominion ? 0 : 0.4;
+        const type = getType(center, burgs[burg]?.port);
+        const coa = COA.generate(s.coa, kinship, dominion, type);
+        coa.shield = COA.getShield(c, s.i);
+
+        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
+        s.provinces.push(provinceId);
+
+        // check if there is a land way within the same state between two cells
+        function isPassable(from, to) {
+          if (cells.f[from] !== cells.f[to]) return false; // on different islands
+          const queue = [from],
+            used = new Uint8Array(cells.i.length),
+            state = cells.state[from];
+          while (queue.length) {
+            const current = queue.pop();
+            if (current === to) return true; // way is found
+            cells.c[current].forEach(c => {
+              if (used[c] || cells.h[c] < 20 || cells.state[c] !== state) return;
+              queue.push(c);
+              used[c] = 1;
+            });
+          }
+          return false; // way is not found
+        }
+
+        // re-check
+        stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
+      }
+    });
+
+    cells.province = provinceIds;
+    pack.provinces = provinces;
+
+    TIME && console.timeEnd("generateProvinces");
+  };
+
   return {
     generate,
     expandStates,
     normalizeStates,
-    getPoles,
     assignColors,
+    drawBurgs,
     specifyBurgs,
     defineBurgFeatures,
     getType,
@@ -880,7 +1206,7 @@ window.BurgsAndStates = (() => {
     generateDiplomacy,
     defineStateForms,
     getFullName,
-    updateCultures,
-    getCloseToEdgePoint
+    generateProvinces,
+    updateCultures
   };
 })();
diff --git a/modules/cultures-generator.js b/modules/cultures-generator.js
index 34dc5edd..7f89b76f 100644
--- a/modules/cultures-generator.js
+++ b/modules/cultures-generator.js
@@ -8,10 +8,7 @@ window.Cultures = (function () {
     cells = pack.cells;
 
     const cultureIds = new Uint16Array(cells.i.length); // cell cultures
-
-    const culturesInputNumber = +byId("culturesInput").value;
-    const culturesInSetNumber = +byId("culturesSet").selectedOptions[0].dataset.max;
-    let count = Math.min(culturesInputNumber, culturesInSetNumber);
+    let count = Math.min(+culturesInput.value, +culturesSet.selectedOptions[0].dataset.max);
 
     const populated = cells.i.filter(i => cells.s[i]); // populated cells
     if (populated.length < count * 25) {
@@ -123,26 +120,26 @@ window.Cultures = (function () {
     cultures.forEach(c => (c.base = c.base % nameBases.length));
 
     function selectCultures(culturesNumber) {
-      let defaultCultures = getDefault(culturesNumber);
+      let def = getDefault(culturesNumber);
       const cultures = [];
 
       pack.cultures?.forEach(function (culture) {
-        if (culture.lock && !culture.removed) cultures.push(culture);
+        if (culture.lock) cultures.push(culture);
       });
 
       if (!cultures.length) {
-        if (culturesNumber === defaultCultures.length) return defaultCultures;
-        if (defaultCultures.every(d => d.odd === 1)) return defaultCultures.splice(0, culturesNumber);
+        if (culturesNumber === def.length) return def;
+        if (def.every(d => d.odd === 1)) return def.splice(0, culturesNumber);
       }
 
-      for (let culture, rnd, i = 0; cultures.length < culturesNumber && defaultCultures.length > 0; ) {
+      for (let culture, rnd, i = 0; cultures.length < culturesNumber && def.length > 0; ) {
         do {
-          rnd = rand(defaultCultures.length - 1);
-          culture = defaultCultures[rnd];
+          rnd = rand(def.length - 1);
+          culture = def[rnd];
           i++;
         } while (i < 200 && !P(culture.odd));
         cultures.push(culture);
-        defaultCultures.splice(rnd, 1);
+        def.splice(rnd, 1);
       }
       return cultures;
     }
@@ -172,7 +169,7 @@ window.Cultures = (function () {
       else if (type === "Nomadic") base = 1.5;
       else if (type === "Hunting") base = 0.7;
       else if (type === "Highland") base = 1.2;
-      return rn(((Math.random() * byId("sizeVariety").value) / 2 + 1) * base, 1);
+      return rn(((Math.random() * powerInput.value) / 2 + 1) * base, 1);
     }
 
     TIME && console.timeEnd("generateCultures");
@@ -518,7 +515,7 @@ window.Cultures = (function () {
     TIME && console.time("expandCultures");
     const {cells, cultures} = pack;
 
-    const queue = new FlatQueue();
+    const queue = new PriorityQueue({comparator: (a, b) => a.priority - b.priority});
     const cost = [];
 
     const neutralRate = byId("neutralRate")?.valueAsNumber || 1;
@@ -538,11 +535,11 @@ window.Cultures = (function () {
 
     for (const culture of cultures) {
       if (!culture.i || culture.removed || culture.lock) continue;
-      queue.push({cellId: culture.center, cultureId: culture.i, priority: 0}, 0);
+      queue.queue({cellId: culture.center, cultureId: culture.i, priority: 0});
     }
 
     while (queue.length) {
-      const {cellId, priority, cultureId} = queue.pop();
+      const {cellId, priority, cultureId} = queue.dequeue();
       const {type, expansionism} = cultures[cultureId];
 
       cells.c[cellId].forEach(neibCellId => {
@@ -566,7 +563,7 @@ window.Cultures = (function () {
         if (!cost[neibCellId] || totalCost < cost[neibCellId]) {
           if (cells.pop[neibCellId] > 0) cells.culture[neibCellId] = cultureId; // assign culture to populated cell
           cost[neibCellId] = totalCost;
-          queue.push({cellId: neibCellId, cultureId, priority: totalCost}, totalCost);
+          queue.queue({cellId: neibCellId, cultureId, priority: totalCost});
         }
       });
     }
diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
index 6622e3b5..4bbb778d 100644
--- a/modules/dynamic/auto-update.js
+++ b/modules/dynamic/auto-update.js
@@ -1,10 +1,8 @@
 "use strict";
 
 // update old map file to the current version
-export function resolveVersionConflicts(mapVersion) {
-  const isOlderThan = tagVersion => compareVersions(mapVersion, tagVersion).isOlder;
-
-  if (isOlderThan("1.0.0")) {
+export function resolveVersionConflicts(version) {
+  if (version < 1) {
     // v1.0 added a new religions layer
     relig = viewbox.insert("g", "#terrain").attr("id", "relig");
     Religions.generate();
@@ -51,8 +49,9 @@ export function resolveVersionConflicts(mapVersion) {
     BurgsAndStates.generateCampaigns();
     BurgsAndStates.generateDiplomacy();
     BurgsAndStates.defineStateForms();
-    Provinces.generate();
-    Provinces.getPoles();
+    drawStates();
+    BurgsAndStates.generateProvinces();
+    drawBorders();
     if (!layerIsOn("toggleBorders")) $("#borders").fadeOut();
     if (!layerIsOn("toggleStates")) regions.attr("display", "none").selectAll("path").remove();
 
@@ -64,7 +63,7 @@ export function resolveVersionConflicts(mapVersion) {
       .attr("stroke-width", 0)
       .attr("stroke-dasharray", null)
       .attr("stroke-linecap", "butt");
-    Zones.generate();
+    addZones();
     if (!markers.selectAll("*").size()) {
       Markers.generate();
       turnButtonOn("toggleMarkers");
@@ -108,11 +107,11 @@ export function resolveVersionConflicts(mapVersion) {
     biomesData.habitability.push(12);
   }
 
-  if (isOlderThan("1.1.0")) {
-    // v1.0 code had a bug with religion layer id
+  if (version < 1.1) {
+    // v1.0 initial code had a bug with religion layer id
     if (!relig.size()) relig = viewbox.insert("g", "#terrain").attr("id", "relig");
 
-    // v1.0 had Sympathy status then relaced with Friendly
+    // v1.0 initially has Sympathy status then relaced with Friendly
     for (const s of pack.states) {
       if (!s.diplomacy) continue;
       s.diplomacy = s.diplomacy.map(r => (r === "Sympathy" ? "Friendly" : r));
@@ -201,12 +200,10 @@ export function resolveVersionConflicts(mapVersion) {
     defs.select("#water").selectAll("path").remove();
     coastline.selectAll("path").remove();
     lakes.selectAll("path").remove();
-
-    Features.markupPack();
-    createDefaultRuler();
+    drawCoastline();
   }
 
-  if (isOlderThan("1.11.0")) {
+  if (version < 1.11) {
     // v1.11 added new attributes
     terrs.attr("scheme", "bright").attr("terracing", 0).attr("skip", 5).attr("relax", 0).attr("curve", 0);
     svg.select("#oceanic > *").attr("id", "oceanicPattern");
@@ -232,7 +229,7 @@ export function resolveVersionConflicts(mapVersion) {
     if (!terrain.attr("density")) terrain.attr("density", 0.4);
   }
 
-  if (isOlderThan("1.21.0")) {
+  if (version < 1.21) {
     // v1.11 replaced "display" attribute by "display" style
     viewbox.selectAll("g").each(function () {
       if (this.hasAttribute("display")) {
@@ -258,12 +255,12 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.22.0")) {
+  if (version < 1.22) {
     // v1.22 changed state neighbors from Set object to array
     BurgsAndStates.collectStatistics();
   }
 
-  if (isOlderThan("1.3.0")) {
+  if (version < 1.3) {
     // v1.3 added global options object
     const winds = options.slice(); // previostly wind was saved in settings[19]
     const year = rand(100, 2000);
@@ -288,7 +285,7 @@ export function resolveVersionConflicts(mapVersion) {
     Military.generate();
   }
 
-  if (isOlderThan("1.4.0")) {
+  if (version < 1.4) {
     // v1.35 added dry lakes
     if (!lakes.select("#dry").size()) {
       lakes.append("g").attr("id", "dry");
@@ -332,7 +329,7 @@ export function resolveVersionConflicts(mapVersion) {
     pack.states.filter(s => s.military).forEach(s => s.military.forEach(r => (r.state = s.i)));
   }
 
-  if (isOlderThan("1.5.0")) {
+  if (version < 1.5) {
     // not need to store default styles from v 1.5
     localStorage.removeItem("styleClean");
     localStorage.removeItem("styleGloom");
@@ -370,7 +367,7 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.6.0")) {
+  if (version < 1.6) {
     // v1.6 changed rivers data
     for (const river of pack.rivers) {
       const el = document.getElementById("river" + river.i);
@@ -402,7 +399,7 @@ export function resolveVersionConflicts(mapVersion) {
     }
   }
 
-  if (isOlderThan("1.61.0")) {
+  if (version < 1.61) {
     // v1.61 changed rulers data
     ruler.style("display", null);
     rulers = new Rulers();
@@ -456,12 +453,12 @@ export function resolveVersionConflicts(mapVersion) {
     pattern.innerHTML = /* html */ `<image id="oceanicPattern" href=${href} width="100" height="100" opacity="0.2"></image>`;
   }
 
-  if (isOlderThan("1.62.0")) {
+  if (version < 1.62) {
     // v1.62 changed grid data
     gridOverlay.attr("size", null);
   }
 
-  if (isOlderThan("1.63.0")) {
+  if (version < 1.63) {
     // v1.63 changed ocean pattern opacity element
     const oceanPattern = document.getElementById("oceanPattern");
     if (oceanPattern) oceanPattern.removeAttribute("opacity");
@@ -475,7 +472,7 @@ export function resolveVersionConflicts(mapVersion) {
     labels.select("#addedLabels").style("text-shadow", "white 0 0 4px");
   }
 
-  if (isOlderThan("1.64.0")) {
+  if (version < 1.64) {
     // v1.64 change states style
     const opacity = regions.attr("opacity");
     const filter = regions.attr("filter");
@@ -484,7 +481,7 @@ export function resolveVersionConflicts(mapVersion) {
     regions.attr("opacity", null).attr("filter", null);
   }
 
-  if (isOlderThan("1.65.0")) {
+  if (version < 1.65) {
     // v1.65 changed rivers data
     d3.select("#rivers").attr("style", null); // remove style to unhide layer
     const {cells, rivers} = pack;
@@ -526,13 +523,13 @@ export function resolveVersionConflicts(mapVersion) {
     }
   }
 
-  if (isOlderThan("1.652.0")) {
+  if (version < 1.652) {
     // remove style to unhide layers
     rivers.attr("style", null);
     borders.attr("style", null);
   }
 
-  if (isOlderThan("1.7.0")) {
+  if (version < 1.7) {
     // v1.7 changed markers data
     const defs = document.getElementById("defs-markers");
     const markersGroup = document.getElementById("markers");
@@ -590,7 +587,7 @@ export function resolveVersionConflicts(mapVersion) {
     }
   }
 
-  if (isOlderThan("1.72.0")) {
+  if (version < 1.72) {
     // v1.72 renamed custom style presets
     const storedStyles = Object.keys(localStorage).filter(key => key.startsWith("style"));
     storedStyles.forEach(styleName => {
@@ -601,7 +598,7 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.73.0")) {
+  if (version < 1.73) {
     // v1.73 moved the hatching patterns out of the user's SVG
     document.getElementById("hatching")?.remove();
 
@@ -612,17 +609,17 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.84.0")) {
+  if (version < 1.84) {
     // v1.84.0 added grid.cellsDesired to stored data
     if (!grid.cellsDesired) grid.cellsDesired = rn((graphWidth * graphHeight) / grid.spacing ** 2, -3);
   }
 
-  if (isOlderThan("1.85.0")) {
+  if (version < 1.85) {
     // v1.84.0 moved intial screen out of maon svg
     svg.select("#initial").remove();
   }
 
-  if (isOlderThan("1.86.0")) {
+  if (version < 1.86) {
     // v1.86.0 added multi-origin culture and religion hierarchy trees
     for (const culture of pack.cultures) {
       culture.origins = [culture.origin];
@@ -635,14 +632,14 @@ export function resolveVersionConflicts(mapVersion) {
     }
   }
 
-  if (isOlderThan("1.88.0")) {
+  if (version < 1.88) {
     // v1.87 may have incorrect shield for some reason
     pack.states.forEach(({coa}) => {
       if (coa?.shield === "state") delete coa.shield;
     });
   }
 
-  if (isOlderThan("1.91.0")) {
+  if (version < 1.91) {
     // from 1.91.00 custom coa is moved to coa object
     pack.states.forEach(state => {
       if (state.coa === "custom") state.coa = {custom: true};
@@ -691,14 +688,14 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.92.0")) {
+  if (version < 1.92) {
     // v1.92 change labels text-anchor from 'start' to 'middle'
     labels.selectAll("tspan").each(function () {
       this.setAttribute("x", 0);
     });
   }
 
-  if (isOlderThan("1.94.0")) {
+  if (version < 1.94) {
     // from v1.94.00 texture image is removed when layer is off
     texture.style("display", null);
 
@@ -716,7 +713,7 @@ export function resolveVersionConflicts(mapVersion) {
     }
   }
 
-  if (isOlderThan("1.95.0")) {
+  if (version < 1.95) {
     // v1.95.00 added vignette visual layer
     const mask = defs.append("mask").attr("id", "vignette-mask");
     mask.append("rect").attr("fill", "white").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
@@ -742,7 +739,7 @@ export function resolveVersionConflicts(mapVersion) {
     vignette.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
   }
 
-  if (isOlderThan("1.96.0")) {
+  if (version < 1.96) {
     // v1.96 added ocean rendering for heightmap
     terrs.selectAll("*").remove();
 
@@ -836,7 +833,7 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.97.0")) {
+  if (version < 1.97) {
     // v1.97.00 changed MFCG link to an arbitrary preview URL
     options.villageMaxPopulation = 2000;
     options.showBurgPreview = options.showMFCGMap;
@@ -852,7 +849,7 @@ export function resolveVersionConflicts(mapVersion) {
     });
   }
 
-  if (isOlderThan("1.98.0")) {
+  if (version < 1.98) {
     // v1.98.00 changed compass layer and rose element id
     const rose = compass.select("use");
     rose.attr("xlink:href", "#defs-compass-rose");
@@ -864,7 +861,7 @@ export function resolveVersionConflicts(mapVersion) {
     }
   }
 
-  if (isOlderThan("1.99.0")) {
+  if (version < 1.99) {
     // v1.99.00 changed routes generation algorithm and data format
     routes.attr("display", null).attr("style", null);
 
@@ -926,72 +923,4 @@ export function resolveVersionConflicts(mapVersion) {
       }
     }
   }
-
-  if (isOlderThan("1.100.0")) {
-    // v1.100.00 added zones to pack data
-    pack.zones = [];
-    zones.selectAll("g").each(function () {
-      const i = pack.zones.length;
-      const name = this.dataset.description;
-      const type = this.dataset.type;
-      const color = this.getAttribute("fill");
-      const cells = this.dataset.cells.split(",").map(Number);
-      pack.zones.push({i, name, type, cells, color});
-    });
-    zones.style("display", null).selectAll("*").remove();
-    if (layerIsOn("toggleZones")) drawZones();
-  }
-
-  if (isOlderThan("1.104.0")) {
-    // v1.104.00 separated pole of inaccessibility detection from layer rendering
-    BurgsAndStates.getPoles();
-    Provinces.getPoles();
-  }
-
-  if (isOlderThan("1.105.0")) {
-    // v1.104.0 introduced some bugs with layers visibility
-    viewbox.select("#icons").style("display", null);
-    viewbox.select("#ice").style("display", null);
-    viewbox.select("#regions").style("display", null);
-    viewbox.select("#armies").style("display", null);
-  }
-
-  if (isOlderThan("1.106.0")) {
-    // v1.104.0 introduced bugs with coastlines. Redraw features
-    defs.select("#featurePaths").remove();
-    defs.append("g").attr("id", "featurePaths");
-    defs.select("#land").selectAll("path, use").remove();
-    defs.select("#water").selectAll("path, use").remove();
-    viewbox.select("#coastline").selectAll("path, use").remove();
-
-    // v1.104.0 introduced bugs with state borders
-    regions
-      .attr("opacity", null)
-      .attr("stroke-width", null)
-      .attr("letter-spacing", null)
-      .attr("fill", null)
-      .attr("stroke", null);
-
-    // pole can be missing for some states/provinces
-    BurgsAndStates.getPoles();
-    Provinces.getPoles();
-  }
-
-  if (isOlderThan("1.107.0")) {
-    // v1.107.0 allowed custom images for markers and regiments
-    if (layerIsOn("toggleMarkers")) drawMarkers();
-    if (layerIsOn("toggleMilitary")) drawMilitary();
-  }
-
-  if (isOlderThan("1.108.0")) {
-    // v1.108.0 changed features rendering method
-    pack.features.forEach(f => {
-      // fix lakes with missing group
-      if (f?.type === "lake" && !f.group) f.group = "freshwater";
-    });
-    drawFeatures();
-
-    // some old maps has incorrect "heights" groups
-    viewbox.selectAll("#heights").remove();
-  }
 }
diff --git a/modules/dynamic/editors/cultures-editor.js b/modules/dynamic/editors/cultures-editor.js
index dee807db..7f886edb 100644
--- a/modules/dynamic/editors/cultures-editor.js
+++ b/modules/dynamic/editors/cultures-editor.js
@@ -51,9 +51,24 @@ function insertEditorHtml() {
       <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">
-        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
-          <slider-input id="culturesBrush" min="1" max="100" value="15">Brush size:</slider-input>
-        </div>
+        <label data-tip="Change brush size" data-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>
@@ -266,7 +281,6 @@ function getTypeOptions(type) {
 function getBaseOptions(base) {
   let options = "";
   nameBases.forEach((n, i) => (options += `<option ${base === i ? "selected" : ""} value="${i}">${n.name}</option>`));
-  if (!nameBases[base]) options += `<option selected value="${base}">removed</option>`; // in case namesbase was removed
   return options;
 }
 
@@ -345,13 +359,10 @@ function cultureChangeName() {
 }
 
 function cultureRegenerateName() {
-  const cultureId = +this.parentNode.dataset.id;
-  const base = pack.cultures[cultureId].base;
-  if (!nameBases[base]) return tip("Namesbase is not defined, please select a valid namesbase", false, "error", 5000);
-
-  const name = Names.getCultureShort(cultureId);
+  const culture = +this.parentNode.dataset.id;
+  const name = Names.getCultureShort(culture);
   this.parentNode.querySelector("input.cultureName").value = name;
-  pack.cultures[cultureId].name = name;
+  pack.cultures[culture].name = name;
 }
 
 function cultureChangeExpansionism() {
@@ -489,7 +500,6 @@ function applyPopulationChange(oldRural, oldUrban, newRural, newUrban, culture)
     burgs.forEach(b => (b.population = population));
   }
 
-  if (layerIsOn("togglePopulation")) drawPopulation();
   refreshCulturesEditor();
 }
 
@@ -497,15 +507,12 @@ function cultureRegenerateBurgs() {
   if (customization === 4) return;
 
   const cultureId = +this.parentNode.dataset.id;
-  const base = pack.cultures[cultureId].base;
-  if (!nameBases[base]) return tip("Namesbase is not defined, please select a valid namesbase", false, "error", 5000);
-
-  const cultureBurgs = pack.burgs.filter(b => b.culture === cultureId && !b.removed && !b.lock);
-  cultureBurgs.forEach(b => {
+  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 ${cultureBurgs.length} burgs are regenerated`, false, "success");
+  tip(`Names for ${cBurgs.length} burgs are regenerated`, false, "success");
 }
 
 function removeCulture(cultureId) {
@@ -711,7 +718,7 @@ function selectCultureOnMapClick() {
 }
 
 function dragCultureBrush() {
-  const radius = +culturesBrush.value;
+  const radius = +culturesManuallyBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -752,7 +759,7 @@ function changeCultureForSelection(selection) {
 function moveCultureBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +culturesBrush.value;
+  const radius = +culturesManuallyBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 
@@ -855,15 +862,14 @@ async function uploadCulturesData() {
   this.value = "";
   const csv = await file.text();
   const data = d3.csvParse(csv, d => ({
-    name: d.Name,
     i: +d.Id,
+    name: d.Name,
     color: d.Color,
     expansionism: +d.Expansionism,
     type: d.Type,
     population: +d.Population,
     emblemsShape: d["Emblems Shape"],
-    origins: d.Origins,
-    namesbase: d.Namesbase
+    origins: d.Origins
   }));
 
   const {cultures, cells} = pack;
@@ -890,7 +896,7 @@ async function uploadCulturesData() {
         culture.i
       );
     } else {
-      current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origins: [0], rural: 0, urban: 0};
+      current = {i: cultures.length, center: ra(populated), area: 0, cells: 0, origin: 0, rural: 0, urban: 0};
       cultures.push(current);
     }
 
@@ -910,10 +916,6 @@ async function uploadCulturesData() {
       else current.type = "Generic";
     }
 
-    culture.origins = current.i ? restoreOrigins(culture.origins || "") : [null];
-    current.shield = shapes.includes(culture.emblemsShape) ? culture.emblemsShape : "heater";
-    current.base = nameBases.findIndex(n => n.name == culture.namesbase); // can be -1 if namesbase is not found
-
     function restoreOrigins(originsString) {
       const originNames = originsString
         .replaceAll('"', "")
@@ -929,6 +931,12 @@ async function uploadCulturesData() {
       current.origins = originIds.filter(id => id !== null);
       if (!current.origins.length) current.origins = [0];
     }
+
+    culture.origins = current.i ? restoreOrigins(culture.origins || "") : [null];
+    current.shield = shapes.includes(culture.emblemsShape) ? culture.emblemsShape : "heater";
+
+    const nameBaseIndex = nameBases.findIndex(n => n.name == culture.namesbase);
+    current.base = nameBaseIndex === -1 ? 0 : nameBaseIndex;
   }
 
   cultures.filter(c => c.removed).forEach(c => removeCulture(c.i));
diff --git a/modules/dynamic/editors/religions-editor.js b/modules/dynamic/editors/religions-editor.js
index effa90cf..b6b2b5a0 100644
--- a/modules/dynamic/editors/religions-editor.js
+++ b/modules/dynamic/editors/religions-editor.js
@@ -26,7 +26,7 @@ function insertEditorHtml() {
     <div id="religionsHeader" class="header" style="grid-template-columns: 13em 6em 7em 18em 6em 7em 6em 7em">
       <div data-tip="Click to sort by religion name" class="sortable alphabetically" data-sortby="name">Religion&nbsp;</div>
       <div data-tip="Click to sort by religion type" class="sortable alphabetically icon-sort-name-down" data-sortby="type">Type&nbsp;</div>
-      <div data-tip="Click to sort by religion form" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
+      <div data-tip="Click to sort by religion form" class="sortable alphabetically hide" data-sortby="form">Form&nbsp;</div>
       <div data-tip="Click to sort by supreme deity" class="sortable alphabetically hide" data-sortby="deity">Supreme Deity&nbsp;</div>
       <div data-tip="Click to sort by religion area" class="sortable hide" data-sortby="area">Area&nbsp;</div>
       <div data-tip="Click to sort by number of believers (religion area population)" class="sortable hide" data-sortby="population">Believers&nbsp;</div>
@@ -66,9 +66,25 @@ function insertEditorHtml() {
 
       <button id="religionsManually" data-tip="Manually re-assign religions" class="icon-brush"></button>
       <div id="religionsManuallyButtons" style="display: none">
-        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
-          <slider-input id="religionsBrush" min="1" max="100" value="15">Brush size:</slider-input>
-        </div>
+        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic">Brush size:
+          <input
+            id="religionsManuallyBrush"
+            oninput="tip('Brush size: '+this.value); religionsManuallyBrushNumber.value = this.value"
+            type="range"
+            min="5"
+            max="99"
+            value="15"
+            style="width: 7em"
+          />
+          <input
+            id="religionsManuallyBrushNumber"
+            oninput="tip('Brush size: '+this.value); religionsManuallyBrush.value = this.value"
+            type="number"
+            min="5"
+            max="99"
+            value="15"
+          /> </label
+        ><br />
         <button id="religionsManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="religionsManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -167,7 +183,7 @@ function religionsEditorAddLines() {
         <select data-tip="Religion type" class="religionType placeholder" style="width: 5em">
           ${getTypeOptions(r.type)}
         </select>
-        <input data-tip="Religion form" class="religionForm placeholder" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
+        <input data-tip="Religion form" class="religionForm placeholder hide" style="width: 6em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw placeholder hide"></span>
         <input data-tip="Religion supreme deity" class="religionDeity placeholder hide" style="width: 17em" value="" autocorrect="off" spellcheck="false" />
         <span data-tip="Religion area" style="padding-right: 4px" class="icon-map-o hide"></span>
@@ -199,7 +215,7 @@ function religionsEditorAddLines() {
       <select data-tip="Religion type" class="religionType" style="width: 5em">
         ${getTypeOptions(r.type)}
       </select>
-      <input data-tip="Religion form" class="religionForm" style="width: 6em"
+      <input data-tip="Religion form" class="religionForm hide" style="width: 6em"
         value="${r.form}" autocorrect="off" spellcheck="false" />
       <span data-tip="Click to re-generate supreme deity" class="icon-arrows-cw hide"></span>
       <input data-tip="Religion supreme deity" class="religionDeity hide" style="width: 17em"
@@ -462,7 +478,6 @@ function changePopulation() {
       burgs.forEach(b => (b.population = population));
     }
 
-    if (layerIsOn("togglePopulation")) drawPopulation();
     refreshReligionsEditor();
   }
 }
@@ -681,7 +696,7 @@ function selectReligionOnMapClick() {
 }
 
 function dragReligionBrush() {
-  const radius = +byId("religionsBrush").value;
+  const radius = +byId("religionsManuallyBrushNumber").value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -721,7 +736,7 @@ function changeReligionForSelection(selection) {
 function moveReligionBrush() {
   showMainTip();
   const [x, y] = d3.mouse(this);
-  const radius = +byId("religionsBrush").value;
+  const radius = +byId("religionsManuallyBrushNumber").value;
   moveCircle(x, y, radius);
 }
 
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
index 4160fb4b..abdb3222 100644
--- a/modules/dynamic/editors/states-editor.js
+++ b/modules/dynamic/editors/states-editor.js
@@ -24,7 +24,7 @@ function insertEditorHtml() {
     <div id="statesHeader" class="header" style="grid-template-columns: 11em 8em 7em 7em 6em 6em 8em 6em 7em 6em">
       <div data-tip="Click to sort by state name" class="sortable alphabetically" data-sortby="name">State&nbsp;</div>
       <div data-tip="Click to sort by state form name" class="sortable alphabetically" data-sortby="form">Form&nbsp;</div>
-      <div data-tip="Click to sort by capital name" class="sortable alphabetically" data-sortby="capital">Capital&nbsp;</div>
+      <div data-tip="Click to sort by capital name" class="sortable alphabetically hide" data-sortby="capital">Capital&nbsp;</div>
       <div data-tip="Click to sort by state dominant culture" class="sortable alphabetically hide" data-sortby="culture">Culture&nbsp;</div>
       <div data-tip="Click to sort by state burgs count" class="sortable hide" data-sortby="burgs">Burgs&nbsp;</div>
       <div data-tip="Click to sort by state area" class="sortable hide icon-sort-number-down" data-sortby="area">Area&nbsp;</div>
@@ -55,25 +55,60 @@ function insertEditorHtml() {
       <div id="statesRegenerateButtons" style="display: none">
         <button id="statesRegenerateBack" data-tip="Hide the regeneration menu" class="icon-cog-alt"></button>
         <button id="statesRandomize" data-tip="Randomize states Expansion value and re-calculate states and provinces" class="icon-shuffle"></button>
-        <div data-tip="Additional growth rate. Defines how many land cells remain neutral" style="display: inline-block">
-          <slider-input id="statesGrowthRate" min=".1" max="3" step=".05" value="1">Growth rate:</slider-input>
-        </div>
+        <span data-tip="Additional growth rate. Defines how many lands will stay neutral">
+          <label class="italic">Growth rate:</label>
+          <input
+            id="statesNeutral"
+            type="range"
+            min=".1"
+            max="3"
+            step=".05"
+            value="1"
+            style="width: 12em"
+          />
+          <input
+            id="statesNeutralNumber"
+            type="number"
+            min=".1"
+            max="3"
+            step=".05"
+            value="1"
+            style="width: 4em"
+          />
+        </span>
         <button id="statesRecalculate" data-tip="Recalculate states based on current values of growth-related attributes" class="icon-retweet"></button>
-        <div data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect" style="display: inline-block">
+        <span data-tip="Allow states neutral distance, expansion and type changes to take an immediate effect">
           <input id="statesAutoChange" class="checkbox" type="checkbox" />
           <label for="statesAutoChange" class="checkbox-label"><i>auto-apply changes</i></label>
-        </div>
-        <div data-tip="Allow system to change state labels when states data is change" style="display: inline-block">
+        </span>
+        <span data-tip="Allow system to change state labels when states data is change">
           <input id="adjustLabels" class="checkbox" type="checkbox" />
           <label for="adjustLabels" class="checkbox-label"><i>auto-change labels</i></label>
-        </div>
+        </span>
       </div>
 
       <button id="statesManually" data-tip="Manually re-assign states" class="icon-brush"></button>
       <div id="statesManuallyButtons" style="display: none">
-        <div data-tip="Change brush size. Shortcut: + to increase; – to decrease" style="margin-block: 0.3em;">
-          <slider-input id="statesBrush" min="1" max="100" value="15">Brush size:</slider-input>
-        </div>
+        <label data-tip="Change brush size" data-shortcut="+ (increase), – (decrease)" class="italic"
+          >Brush size:
+          <input
+            id="statesManuallyBrush"
+            oninput="tip('Brush size: '+this.value); statesManuallyBrushNumber.value = this.value"
+            type="range"
+            min="5"
+            max="99"
+            value="15"
+            style="width: 5em"
+          />
+          <input
+            id="statesManuallyBrushNumber"
+            oninput="tip('Brush size: '+this.value); statesManuallyBrush.value = this.value"
+            type="number"
+            min="5"
+            max="99"
+            value="15"
+          /> </label
+        ><br />
         <button id="statesManuallyApply" data-tip="Apply assignment" class="icon-check"></button>
         <button id="statesManuallyCancel" data-tip="Cancel assignment" class="icon-cancel"></button>
       </div>
@@ -100,7 +135,8 @@ function addListeners() {
   byId("statesRegenerateBack").on("click", exitRegenerationMenu);
   byId("statesRecalculate").on("click", () => recalculateStates(true));
   byId("statesRandomize").on("click", randomizeStatesExpansion);
-  byId("statesGrowthRate").on("input", () => recalculateStates(false));
+  byId("statesNeutral").on("input", changeStatesGrowthRate);
+  byId("statesNeutralNumber").on("change", changeStatesGrowthRate);
   byId("statesManually").on("click", enterStatesManualAssignent);
   byId("statesManuallyApply").on("click", applyStatesManualAssignent);
   byId("statesManuallyCancel").on("click", () => exitStatesManualAssignment(false));
@@ -192,10 +228,10 @@ function statesEditorAddLines() {
         <input data-tip="Neutral lands name. Click to change" class="stateName name pointer italic" value="${
           s.name
         }" readonly />
-        <svg class="coaIcon placeholder"></svg>
+        <svg class="coaIcon placeholder hide"></svg>
         <input class="stateForm placeholder" value="none" />
-        <span class="icon-star-empty placeholder"></span>
-        <input class="stateCapital placeholder" />
+        <span class="icon-star-empty placeholder hide"></span>
+        <input class="stateCapital placeholder hide" />
         <select class="stateCulture placeholder hide">${getCultureOptions(0)}</select>
         <span data-tip="Click to overview neutral burgs" class="icon-dot-circled pointer hide" style="padding-right: 1px"></span>
         <div data-tip="Burgs count" class="stateBurgs hide">${s.burgs}</div>
@@ -231,14 +267,14 @@ function statesEditorAddLines() {
     >
       <fill-box fill="${s.color}"></fill-box>
       <input data-tip="State name. Click to change" class="stateName name pointer" value="${s.name}" readonly />
-      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer" viewBox="0 0 200 200"><use href="#stateCOA${
+      <svg data-tip="Click to show and edit state emblem" class="coaIcon pointer hide" viewBox="0 0 200 200"><use href="#stateCOA${
         s.i
       }"></use></svg>
       <input data-tip="State form name. Click to change" class="stateForm name pointer" value="${
         s.formName
       }" readonly />
-      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer"></span>
-      <input data-tip="Capital name. Click and type to rename" class="stateCapital" value="${capital}" autocorrect="off" spellcheck="false" />
+      <span data-tip="State capital. Click to zoom into view" class="icon-star-empty pointer hide"></span>
+      <input data-tip="Capital name. Click and type to rename" class="stateCapital hide" value="${capital}" autocorrect="off" spellcheck="false" />
       <select data-tip="Dominant culture. Click to change" class="stateCulture hide">${getCultureOptions(
         s.culture
       )}</select>
@@ -543,7 +579,6 @@ function changePopulation(stateId) {
       burgs.forEach(b => (b.population = population));
     }
 
-    if (layerIsOn("togglePopulation")) drawPopulation();
     refreshStatesEditor();
   }
 }
@@ -643,11 +678,11 @@ function stateRemove(stateId) {
   pack.states[stateId] = {i: stateId, removed: true};
 
   debug.selectAll(".highlight").remove();
-
-  if (layerIsOn("toggleStates")) drawStates();
-  if (layerIsOn("toggleBorders")) drawBorders();
+  if (!layerIsOn("toggleStates")) toggleStates();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
   if (layerIsOn("toggleProvinces")) drawProvinces();
-
   refreshStatesEditor();
 }
 
@@ -693,7 +728,7 @@ function showStatesChart() {
     .sum(d => d.area)
     .sort((a, b) => b.value - a.value);
 
-  const size = 150 + 200 * uiSize.value;
+  const size = 150 + 200 * uiSizeOutput.value;
   const margin = {top: 0, right: -50, bottom: 0, left: -50};
   const w = size - margin.left - margin.right;
   const h = size - margin.top - margin.bottom;
@@ -743,7 +778,6 @@ function showStatesChart() {
 
   node
     .append("text")
-    .attr("text-rendering", "optimizeSpeed")
     .style("font-size", d => rn((d.r ** 0.97 * 4) / lp(d.data.name), 2) + "px")
     .selectAll("tspan")
     .data(d => d.data.name.split(exp))
@@ -841,18 +875,24 @@ function recalculateStates(must) {
   if (!must && !statesAutoChange.checked) return;
 
   BurgsAndStates.expandStates();
-  Provinces.generate();
-  Provinces.getPoles();
-  BurgsAndStates.getPoles();
-
-  if (layerIsOn("toggleStates")) drawStates();
-  if (layerIsOn("toggleBorders")) drawBorders();
+  BurgsAndStates.generateProvinces();
+  if (!layerIsOn("toggleStates")) toggleStates();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
   if (layerIsOn("toggleProvinces")) drawProvinces();
   if (adjustLabels.checked) drawStateLabels();
-
   refreshStatesEditor();
 }
 
+function changeStatesGrowthRate() {
+  const growthRate = +this.value;
+  byId("statesNeutral").value = growthRate;
+  byId("statesNeutralNumber").value = growthRate;
+  tip("Growth rate: " + growthRate);
+  recalculateStates(false);
+}
+
 function randomizeStatesExpansion() {
   pack.states.forEach(s => {
     if (!s.i || s.removed) return;
@@ -919,7 +959,7 @@ function selectStateOnMapClick() {
 }
 
 function dragStateBrush() {
-  const r = +statesBrush.value;
+  const r = +statesManuallyBrush.value;
 
   d3.event.on("drag", () => {
     if (!d3.event.dx && !d3.event.dy) return;
@@ -962,7 +1002,7 @@ function changeStateForSelection(selection) {
 function moveStateBrush() {
   showMainTip();
   const point = d3.mouse(this);
-  const radius = +statesBrush.value;
+  const radius = +statesManuallyBrush.value;
   moveCircle(point[0], point[1], radius);
 }
 
@@ -985,7 +1025,6 @@ function applyStatesManualAssignent() {
 
   if (affectedStates.length) {
     refreshStatesEditor();
-    BurgsAndStates.getPoles();
     layerIsOn("toggleStates") ? drawStates() : toggleStates();
     if (adjustLabels.checked) drawStateLabels([...new Set(affectedStates)]);
     adjustProvinces([...new Set(affectedProvinces)]);
@@ -1201,6 +1240,7 @@ function addState() {
   const basename = center % 5 === 0 ? burgs[burg].name : Names.getCulture(culture);
   const name = Names.getState(basename, culture);
   const color = getRandomColor();
+  const pole = cells.p[center];
 
   // generate emblem
   const cultureType = pack.cultures[culture].type;
@@ -1250,21 +1290,38 @@ function addState() {
     culture,
     military: [],
     alert: 1,
-    coa
+    coa,
+    pole
   });
-
-  BurgsAndStates.getPoles();
   BurgsAndStates.collectStatistics();
   BurgsAndStates.defineStateForms([newState]);
   adjustProvinces([cells.province[center]]);
 
-  drawStateLabels([newState]);
+  if (layerIsOn("toggleProvinces")) toggleProvinces();
+  if (!layerIsOn("toggleStates")) toggleStates();
+  else drawStates();
+  if (!layerIsOn("toggleBorders")) toggleBorders();
+  else drawBorders();
+
+  // add label
+  defs
+    .select("#textPaths")
+    .append("path")
+    .attr("d", `M${pole[0] - 50},${pole[1] + 6}h${100}`)
+    .attr("id", "textPath_stateLabel" + newState);
+  labels
+    .select("#states")
+    .append("text")
+    .attr("id", "stateLabel" + newState)
+    .append("textPath")
+    .attr("xlink:href", "#textPath_stateLabel" + newState)
+    .attr("startOffset", "50%")
+    .attr("font-size", "50%")
+    .append("tspan")
+    .attr("x", name.length * -3)
+    .text(name);
+
   COArenderer.add("state", newState, coa, states[newState].pole[0], states[newState].pole[1]);
-
-  layerIsOn("toggleProvinces") && toggleProvinces();
-  layerIsOn("toggleStates") ? drawStates() : toggleStates();
-  layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
-
   statesEditorAddLines();
 }
 
@@ -1402,7 +1459,6 @@ function openStateMergeDialog() {
     unfog();
     debug.selectAll(".highlight").remove();
 
-    BurgsAndStates.getPoles();
     layerIsOn("toggleStates") ? drawStates() : toggleStates();
     layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
     layerIsOn("toggleProvinces") && drawProvinces();
diff --git a/modules/dynamic/export-json.js b/modules/dynamic/export-json.js
index cc895b7a..df0d6815 100644
--- a/modules/dynamic/export-json.js
+++ b/modules/dynamic/export-json.js
@@ -53,8 +53,7 @@ function getMinimalDataJson() {
     religions: pack.religions,
     rivers: pack.rivers,
     markers: pack.markers,
-    routes: pack.routes,
-    zones: pack.zones
+    routes: pack.routes
   };
   return JSON.stringify({info, settings, mapCoordinates, pack: packData, biomesData, notes, nameBases});
 }
@@ -73,7 +72,7 @@ function getGridDataJson() {
 
 function getMapInfo() {
   return {
-    version: VERSION,
+    version,
     description: "Azgaar's Fantasy Map Generator output: azgaar.github.io/Fantasy-map-generator",
     exportedAt: new Date().toISOString(),
     mapName: mapName.value,
@@ -173,8 +172,7 @@ function getPackCellsData() {
     religions: pack.religions,
     rivers: pack.rivers,
     markers: pack.markers,
-    routes: pack.routes,
-    zones: pack.zones
+    routes: pack.routes
   };
 }
 
diff --git a/modules/dynamic/supporters.js b/modules/dynamic/supporters.js
index 50a26d58..478516fa 100644
--- a/modules/dynamic/supporters.js
+++ b/modules/dynamic/supporters.js
@@ -580,13 +580,4 @@ MisterPete
 Johanna Martin
 Marmalade_MacGuffin
 James Benware
-FortunesFaded
-breadsticks
-Murderbits
-Ben Jones
-Marco Faltracco
-L
-silentArtifact
-Keith Potter
-Morgan Gilbert
-Alengork Gamer`;
+FortunesFaded`;
diff --git a/modules/features.js b/modules/features.js
deleted file mode 100644
index 9ef785d6..00000000
--- a/modules/features.js
+++ /dev/null
@@ -1,271 +0,0 @@
-"use strict";
-
-window.Features = (function () {
-  const DEEPER_LAND = 3;
-  const LANDLOCKED = 2;
-  const LAND_COAST = 1;
-  const UNMARKED = 0;
-  const WATER_COAST = -1;
-  const DEEP_WATER = -2;
-
-  // calculate distance to coast for every cell
-  function markup({distanceField, neighbors, start, increment, limit = INT8_MAX}) {
-    for (let distance = start, marked = Infinity; marked > 0 && distance !== limit; distance += increment) {
-      marked = 0;
-      const prevDistance = distance - increment;
-      for (let cellId = 0; cellId < neighbors.length; cellId++) {
-        if (distanceField[cellId] !== prevDistance) continue;
-
-        for (const neighborId of neighbors[cellId]) {
-          if (distanceField[neighborId] !== UNMARKED) continue;
-          distanceField[neighborId] = distance;
-          marked++;
-        }
-      }
-    }
-  }
-
-  // mark Grid features (ocean, lakes, islands) and calculate distance field
-  function markupGrid() {
-    TIME && console.time("markupGrid");
-    Math.random = aleaPRNG(seed); // get the same result on heightmap edit in Erase mode
-
-    const {h: heights, c: neighbors, b: borderCells, i} = grid.cells;
-    const cellsNumber = i.length;
-    const distanceField = new Int8Array(cellsNumber); // gird.cells.t
-    const featureIds = new Uint16Array(cellsNumber); // gird.cells.f
-    const features = [0];
-
-    const queue = [0];
-    for (let featureId = 1; queue[0] !== -1; featureId++) {
-      const firstCell = queue[0];
-      featureIds[firstCell] = featureId;
-
-      const land = heights[firstCell] >= 20;
-      let border = false; // set true if feature touches map edge
-
-      while (queue.length) {
-        const cellId = queue.pop();
-        if (!border && borderCells[cellId]) border = true;
-
-        for (const neighborId of neighbors[cellId]) {
-          const isNeibLand = heights[neighborId] >= 20;
-
-          if (land === isNeibLand && featureIds[neighborId] === UNMARKED) {
-            featureIds[neighborId] = featureId;
-            queue.push(neighborId);
-          } else if (land && !isNeibLand) {
-            distanceField[cellId] = LAND_COAST;
-            distanceField[neighborId] = WATER_COAST;
-          }
-        }
-      }
-
-      const type = land ? "island" : border ? "ocean" : "lake";
-      features.push({i: featureId, land, border, type});
-
-      queue[0] = featureIds.findIndex(f => f === UNMARKED); // find unmarked cell
-    }
-
-    // markup deep ocean cells
-    markup({distanceField, neighbors, start: DEEP_WATER, increment: -1, limit: -10});
-
-    grid.cells.t = distanceField;
-    grid.cells.f = featureIds;
-    grid.features = features;
-
-    TIME && console.timeEnd("markupGrid");
-  }
-
-  // mark Pack features (ocean, lakes, islands), calculate distance field and add properties
-  function markupPack() {
-    TIME && console.time("markupPack");
-
-    const {cells, vertices} = pack;
-    const {c: neighbors, b: borderCells, i} = cells;
-    const packCellsNumber = i.length;
-    if (!packCellsNumber) return; // no cells -> there is nothing to do
-
-    const distanceField = new Int8Array(packCellsNumber); // pack.cells.t
-    const featureIds = new Uint16Array(packCellsNumber); // pack.cells.f
-    const haven = createTypedArray({maxValue: packCellsNumber, length: packCellsNumber}); // haven: opposite water cell
-    const harbor = new Uint8Array(packCellsNumber); // harbor: number of adjacent water cells
-    const features = [0];
-
-    const queue = [0];
-    for (let featureId = 1; queue[0] !== -1; featureId++) {
-      const firstCell = queue[0];
-      featureIds[firstCell] = featureId;
-
-      const land = isLand(firstCell);
-      let border = Boolean(borderCells[firstCell]); // true if feature touches map border
-      let totalCells = 1; // count cells in a feature
-
-      while (queue.length) {
-        const cellId = queue.pop();
-        if (borderCells[cellId]) border = true;
-        if (!border && borderCells[cellId]) border = true;
-
-        for (const neighborId of neighbors[cellId]) {
-          const isNeibLand = isLand(neighborId);
-
-          if (land && !isNeibLand) {
-            distanceField[cellId] = LAND_COAST;
-            distanceField[neighborId] = WATER_COAST;
-            if (!haven[cellId]) defineHaven(cellId);
-          } else if (land && isNeibLand) {
-            if (distanceField[neighborId] === UNMARKED && distanceField[cellId] === LAND_COAST)
-              distanceField[neighborId] = LANDLOCKED;
-            else if (distanceField[cellId] === UNMARKED && distanceField[neighborId] === LAND_COAST)
-              distanceField[cellId] = LANDLOCKED;
-          }
-
-          if (!featureIds[neighborId] && land === isNeibLand) {
-            queue.push(neighborId);
-            featureIds[neighborId] = featureId;
-            totalCells++;
-          }
-        }
-      }
-
-      features.push(addFeature({firstCell, land, border, featureId, totalCells}));
-      queue[0] = featureIds.findIndex(f => f === UNMARKED); // find unmarked cell
-    }
-
-    markup({distanceField, neighbors, start: DEEPER_LAND, increment: 1}); // markup pack land
-    markup({distanceField, neighbors, start: DEEP_WATER, increment: -1, limit: -10}); // markup pack water
-
-    pack.cells.t = distanceField;
-    pack.cells.f = featureIds;
-    pack.cells.haven = haven;
-    pack.cells.harbor = harbor;
-    pack.features = features;
-
-    TIME && console.timeEnd("markupPack");
-
-    function defineHaven(cellId) {
-      const waterCells = neighbors[cellId].filter(isWater);
-      const distances = waterCells.map(neibCellId => dist2(cells.p[cellId], cells.p[neibCellId]));
-      const closest = distances.indexOf(Math.min.apply(Math, distances));
-
-      haven[cellId] = waterCells[closest];
-      harbor[cellId] = waterCells.length;
-    }
-
-    function addFeature({firstCell, land, border, featureId, totalCells}) {
-      const type = land ? "island" : border ? "ocean" : "lake";
-      const [startCell, featureVertices] = getCellsData(type, firstCell);
-      const points = clipPoly(featureVertices.map(vertex => vertices.p[vertex]));
-      const area = d3.polygonArea(points); // feature perimiter area
-      const absArea = Math.abs(rn(area));
-
-      const feature = {
-        i: featureId,
-        type,
-        land,
-        border,
-        cells: totalCells,
-        firstCell: startCell,
-        vertices: featureVertices,
-        area: absArea
-      };
-
-      if (type === "lake") {
-        if (area > 0) feature.vertices = feature.vertices.reverse();
-        feature.shoreline = unique(feature.vertices.map(vertex => vertices.c[vertex].filter(isLand)).flat());
-        feature.height = Lakes.getHeight(feature);
-      }
-
-      return feature;
-
-      function getCellsData(featureType, firstCell) {
-        if (featureType === "ocean") return [firstCell, []];
-
-        const getType = cellId => featureIds[cellId];
-        const type = getType(firstCell);
-        const ofSameType = cellId => getType(cellId) === type;
-        const ofDifferentType = cellId => getType(cellId) !== type;
-
-        const startCell = findOnBorderCell(firstCell);
-        const featureVertices = getFeatureVertices(startCell);
-        return [startCell, featureVertices];
-
-        function findOnBorderCell(firstCell) {
-          const isOnBorder = cellId => borderCells[cellId] || neighbors[cellId].some(ofDifferentType);
-          if (isOnBorder(firstCell)) return firstCell;
-
-          const startCell = cells.i.filter(ofSameType).find(isOnBorder);
-          if (startCell === undefined)
-            throw new Error(`Markup: firstCell ${firstCell} is not on the feature or map border`);
-
-          return startCell;
-        }
-
-        function getFeatureVertices(startCell) {
-          const startingVertex = cells.v[startCell].find(v => vertices.c[v].some(ofDifferentType));
-          if (startingVertex === undefined)
-            throw new Error(`Markup: startingVertex for cell ${startCell} is not found`);
-
-          return connectVertices({vertices, startingVertex, ofSameType, closeRing: false});
-        }
-      }
-    }
-  }
-
-  // add properties to pack features
-  function specify() {
-    const gridCellsNumber = grid.cells.i.length;
-    const OCEAN_MIN_SIZE = gridCellsNumber / 25;
-    const SEA_MIN_SIZE = gridCellsNumber / 1000;
-    const CONTINENT_MIN_SIZE = gridCellsNumber / 10;
-    const ISLAND_MIN_SIZE = gridCellsNumber / 1000;
-
-    for (const feature of pack.features) {
-      if (!feature || feature.type === "ocean") continue;
-
-      feature.group = defineGroup(feature);
-
-      if (feature.type === "lake") {
-        feature.height = Lakes.getHeight(feature);
-        feature.name = Lakes.getName(feature);
-      }
-    }
-
-    function defineGroup(feature) {
-      if (feature.type === "island") return defineIslandGroup(feature);
-      if (feature.type === "ocean") return defineOceanGroup();
-      if (feature.type === "lake") return defineLakeGroup(feature);
-      throw new Error(`Markup: unknown feature type ${feature.type}`);
-    }
-
-    function defineOceanGroup(feature) {
-      if (feature.cells > OCEAN_MIN_SIZE) return "ocean";
-      if (feature.cells > SEA_MIN_SIZE) return "sea";
-      return "gulf";
-    }
-
-    function defineIslandGroup(feature) {
-      const prevFeature = pack.features[pack.cells.f[feature.firstCell - 1]];
-      if (prevFeature && prevFeature.type === "lake") return "lake_island";
-      if (feature.cells > CONTINENT_MIN_SIZE) return "continent";
-      if (feature.cells > ISLAND_MIN_SIZE) return "island";
-      return "isle";
-    }
-
-    function defineLakeGroup(feature) {
-      if (feature.temp < -3) return "frozen";
-      if (feature.height > 60 && feature.cells < 10 && feature.firstCell % 10 === 0) return "lava";
-
-      if (!feature.inlets && !feature.outlet) {
-        if (feature.evaporation > feature.flux * 4) return "dry";
-        if (feature.cells < 3 && feature.firstCell % 10 === 0) return "sinkhole";
-      }
-
-      if (!feature.outlet && feature.evaporation > feature.flux) return "salt";
-
-      return "freshwater";
-    }
-  }
-
-  return {markupGrid, markupPack, specify};
-})();
diff --git a/modules/fonts.js b/modules/fonts.js
index c3af3624..53419851 100644
--- a/modules/fonts.js
+++ b/modules/fonts.js
@@ -69,12 +69,6 @@ const fonts = [
     unicodeRange:
       "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
   },
-  {
-    family: "Eagle Lake",
-    src: "url(https://fonts.gstatic.com/s/eaglelake/v24/ptRMTiqbbuNJDOiKj9wG1On4KCFtpe4.woff2)",
-    unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
-  },
   {
     family: "Faster One",
     src: "url(https://fonts.gstatic.com/s/fasterone/v17/H4ciBXCHmdfClFb-vWhf-LyYhw.woff2)",
@@ -135,12 +129,6 @@ const fonts = [
     unicodeRange:
       "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
   },
-  {
-    family: "Lugrasimo",
-    src: "url(https://fonts.gstatic.com/s/lugrasimo/v4/qkBXXvoF_s_eT9c7Y7au455KsgbLMA.woff2)",
-    unicodeRange:
-      "U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215"
-  },
   {
     family: "Kaushan Script",
     src: "url(https://fonts.gstatic.com/s/kaushanscript/v6/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2)",
diff --git a/modules/io/cloud.js b/modules/io/cloud.js
index 17ca92db..b25b6a90 100644
--- a/modules/io/cloud.js
+++ b/modules/io/cloud.js
@@ -60,7 +60,7 @@ window.Cloud = (function () {
 
     async save(fileName, contents) {
       const resp = await this.call("filesUpload", {path: "/" + fileName, contents});
-      DEBUG.cloud && console.info("Dropbox response:", resp);
+      DEBUG && console.info("Dropbox response:", resp);
       return true;
     },
 
@@ -104,7 +104,7 @@ window.Cloud = (function () {
 
     // Callback function for auth window
     async setDropBoxToken(token) {
-      DEBUG.cloud && console.info("Access token:", token);
+      DEBUG && console.info("Access token:", token);
       setToken(this.name, token);
       await this.connect(token);
       this.authWindow.close();
@@ -131,7 +131,7 @@ window.Cloud = (function () {
         allow_download: true
       };
       const resp = await this.call("sharingCreateSharedLinkWithSettings", {path, settings});
-      DEBUG.cloud && console.info("Dropbox link object:", resp.result);
+      DEBUG && console.info("Dropbox link object:", resp.result);
       return resp.result.url;
     }
   };
diff --git a/modules/io/export.js b/modules/io/export.js
index 4afa5f34..0d1286b9 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -175,7 +175,6 @@ async function getMapURL(type, options) {
     noWater = false,
     noScaleBar = false,
     noIce = false,
-    noVignette = false,
     fullMap = false
   } = options || {};
 
@@ -200,7 +199,6 @@ async function getMapURL(type, options) {
     clone.select("#oceanPattern").attr("opacity", 0);
   }
   if (noIce) clone.select("#ice")?.remove();
-  if (noVignette) clone.select("#vignette")?.remove();
   if (fullMap) {
     // reset transform to show the whole map
     clone.attr("width", graphWidth).attr("height", graphHeight);
@@ -320,40 +318,6 @@ async function getMapURL(type, options) {
     if (pattern) cloneDefs.appendChild(pattern.cloneNode(true));
   }
 
-  {
-    // replace external marker icons
-    const externalMarkerImages = cloneEl.querySelectorAll('#markers image[href]:not([href=""])');
-    const imageHrefs = Array.from(externalMarkerImages).map(img => img.getAttribute("href"));
-
-    for (const url of imageHrefs) {
-      await new Promise(resolve => {
-        getBase64(url, base64 => {
-          externalMarkerImages.forEach(img => {
-            if (img.getAttribute("href") === url) img.setAttribute("href", base64);
-          });
-          resolve();
-        });
-      });
-    }
-  }
-
-  {
-    // replace external regiment icons
-    const externalRegimentImages = cloneEl.querySelectorAll('#armies image[href]:not([href=""])');
-    const imageHrefs = Array.from(externalRegimentImages).map(img => img.getAttribute("href"));
-
-    for (const url of imageHrefs) {
-      await new Promise(resolve => {
-        getBase64(url, base64 => {
-          externalRegimentImages.forEach(img => {
-            if (img.getAttribute("href") === url) img.setAttribute("href", base64);
-          });
-          resolve();
-        });
-      });
-    }
-  }
-
   if (!cloneEl.getElementById("fogging-cont")) cloneEl.getElementById("fog")?.remove(); // remove unused fog
   if (!cloneEl.getElementById("regions")) cloneEl.getElementById("statePaths")?.remove(); // removed unused statePaths
   if (!cloneEl.getElementById("labels")) cloneEl.getElementById("textPaths")?.remove(); // removed unused textPaths
@@ -476,24 +440,14 @@ function inlineStyle(clone) {
   emptyG.remove();
 }
 
-function saveGeoJsonCells() {
-  const {cells, vertices} = pack;
+function saveGeoJSON_Cells() {
   const json = {type: "FeatureCollection", features: []};
-
+  const cells = pack.cells;
   const getPopulation = i => {
     const [r, u] = getCellPopulation(i);
     return rn(r + u);
   };
-
-  const getHeight = i => parseInt(getFriendlyHeight([...cells.p[i]]));
-
-  function getCellCoordinates(cellVertices) {
-    const coordinates = cellVertices.map(vertex => {
-      const [x, y] = vertices.p[vertex];
-      return getCoordinates(x, y, 4);
-    });
-    return [[...coordinates, coordinates[0]]];
-  }
+  const getHeight = i => parseInt(getFriendlyHeight([cells.p[i][0], cells.p[i][1]]));
 
   cells.i.forEach(i => {
     const coordinates = getCellCoordinates(cells.v[i]);
@@ -516,13 +470,20 @@ function saveGeoJsonCells() {
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
 
-function saveGeoJsonRoutes() {
-  const features = pack.routes.map(({i, points, group, name = null}) => {
-    const coordinates = points.map(([x, y]) => getCoordinates(x, y, 4));
+function saveGeoJSON_Routes() {
+  const {cells, burgs} = pack;
+  let points = cells.p.map(([x, y], cellId) => {
+    const burgId = cells.burg[cellId];
+    if (burgId) return [burgs[burgId].x, burgs[burgId].y];
+    return [x, y];
+  });
+
+  const features = pack.routes.map(route => {
+    const coordinates = route.points || getRoutePoints(route, points);
     return {
       type: "Feature",
       geometry: {type: "LineString", coordinates},
-      properties: {id: i, group, name}
+      properties: {id: route.id, group: route.group}
     };
   });
   const json = {type: "FeatureCollection", features};
@@ -531,31 +492,30 @@ function saveGeoJsonRoutes() {
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
 
-function saveGeoJsonRivers() {
-  const features = pack.rivers.map(
-    ({i, cells, points, source, mouth, parent, basin, widthFactor, sourceWidth, discharge, name, type}) => {
-      if (!cells || cells.length < 2) return;
-      const meanderedPoints = Rivers.addMeandering(cells, points);
-      const coordinates = meanderedPoints.map(([x, y]) => getCoordinates(x, y, 4));
-      return {
-        type: "Feature",
-        geometry: {type: "LineString", coordinates},
-        properties: {id: i, source, mouth, parent, basin, widthFactor, sourceWidth, discharge, name, type}
-      };
-    }
-  );
-  const json = {type: "FeatureCollection", features};
+function saveGeoJSON_Rivers() {
+  const json = {type: "FeatureCollection", features: []};
+
+  rivers.selectAll("path").each(function () {
+    const river = pack.rivers.find(r => r.i === +this.id.slice(5));
+    if (!river) return;
+
+    const coordinates = getRiverPoints(this);
+    const properties = {...river, id: this.id};
+    const feature = {type: "Feature", geometry: {type: "LineString", coordinates}, properties};
+    json.features.push(feature);
+  });
 
   const fileName = getFileName("Rivers") + ".geojson";
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
 
-function saveGeoJsonMarkers() {
+function saveGeoJSON_Markers() {
   const features = pack.markers.map(marker => {
     const {i, type, icon, x, y, size, fill, stroke} = marker;
     const coordinates = getCoordinates(x, y, 4);
-    const note = notes.find(note => note.id === "marker" + i);
-    const properties = {id: i, type, icon, x, y, ...note, size, fill, stroke};
+    const id = `marker${i}`;
+    const note = notes.find(note => note.id === id);
+    const properties = {id, type, icon, x, y, ...note, size, fill, stroke};
     return {type: "Feature", geometry: {type: "Point", coordinates}, properties};
   });
 
@@ -564,3 +524,22 @@ function saveGeoJsonMarkers() {
   const fileName = getFileName("Markers") + ".geojson";
   downloadFile(JSON.stringify(json), fileName, "application/json");
 }
+
+function getCellCoordinates(vertices) {
+  const p = pack.vertices.p;
+  const coordinates = vertices.map(n => getCoordinates(p[n][0], p[n][1], 2));
+  return [coordinates.concat([coordinates[0]])];
+}
+
+function getRiverPoints(node) {
+  let points = [];
+  const l = node.getTotalLength() / 2; // half-length
+  const increment = 0.25; // defines density of points
+  for (let i = l, c = i; i >= 0; i -= increment, c += increment) {
+    const p1 = node.getPointAtLength(i);
+    const p2 = node.getPointAtLength(c);
+    const [x, y] = getCoordinates((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, 4);
+    points.push([x, y]);
+  }
+  return points;
+}
diff --git a/modules/io/load.js b/modules/io/load.js
index ccfccecb..6d655485 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -1,5 +1,4 @@
 "use strict";
-
 // Functions to load and parse .map/.gz files
 async function quickLoad() {
   const blob = await ldb.get("lastMap");
@@ -13,7 +12,7 @@ async function quickLoad() {
 async function loadFromDropbox() {
   const mapPath = byId("loadFromDropboxSelect")?.value;
 
-  console.info("Loading map from Dropbox:", mapPath);
+  DEBUG && console.info("Loading map from Dropbox:", mapPath);
   const blob = await Cloud.providers.dropbox.load(mapPath);
   uploadMap(blob);
 }
@@ -96,7 +95,6 @@ function showUploadErrorMessage(error, URL, random) {
     title: "Loading error",
     width: "32em",
     buttons: {
-      "Clear cache": () => cleanupData(),
       OK: function () {
         $(this).dialog("close");
       }
@@ -106,28 +104,26 @@ function showUploadErrorMessage(error, URL, random) {
 
 function uploadMap(file, callback) {
   uploadMap.timeStart = performance.now();
+  const OLDEST_SUPPORTED_VERSION = 0.7;
+  const currentVersion = parseFloat(version);
 
   const fileReader = new FileReader();
   fileReader.onloadend = async function (fileLoadedEvent) {
     if (callback) callback();
     byId("coas").innerHTML = ""; // remove auto-generated emblems
-
     const result = fileLoadedEvent.target.result;
-    const {mapData, mapVersion} = await parseLoadedResult(result);
+    const [mapData, mapVersion] = await parseLoadedResult(result);
+
+    const isInvalid = !mapData || isNaN(mapVersion) || mapData.length < 26 || !mapData[5];
+    const isUpdated = mapVersion === currentVersion;
+    const isAncient = mapVersion < OLDEST_SUPPORTED_VERSION;
+    const isNewer = mapVersion > currentVersion;
+    const isOutdated = mapVersion < currentVersion;
 
-    const isInvalid = !mapData || !isValidVersion(mapVersion) || mapData.length < 10 || !mapData[5];
     if (isInvalid) return showUploadMessage("invalid", mapData, mapVersion);
-
-    const isUpdated = compareVersions(mapVersion, VERSION).isEqual;
-    if (isUpdated) return showUploadMessage("updated", mapData, mapVersion);
-
-    const isAncient = compareVersions(mapVersion, "0.70.0").isOlder;
+    if (isUpdated) return parseLoadedData(mapData);
     if (isAncient) return showUploadMessage("ancient", mapData, mapVersion);
-
-    const isNewer = compareVersions(mapVersion, VERSION).isNewer;
     if (isNewer) return showUploadMessage("newer", mapData, mapVersion);
-
-    const isOutdated = compareVersions(mapVersion, VERSION).isOlder;
     if (isOutdated) return showUploadMessage("outdated", mapData, mapVersion);
   };
 
@@ -153,65 +149,53 @@ async function uncompress(compressedData) {
 async function parseLoadedResult(result) {
   try {
     const resultAsString = new TextDecoder().decode(result);
-
     // data can be in FMG internal format or base64 encoded
     const isDelimited = resultAsString.substring(0, 10).includes("|");
-    let content = isDelimited ? resultAsString : decodeURIComponent(atob(resultAsString));
+    const decoded = isDelimited ? resultAsString : decodeURIComponent(atob(resultAsString));
 
-    // fix if svg part has CRLF line endings instead of LF
-    const svgMatch = content.match(/<svg[^>]*id="map"[\s\S]*?<\/svg>/);
-    const svgContent = svgMatch[0];
-    const hasCrlfEndings = svgContent.includes("\r\n");
-    if (hasCrlfEndings) {
-      const correctedSvgContent = svgContent.replace(/\r\n/g, "\n");
-      content = content.replace(svgContent, correctedSvgContent);
-    }
-
-    const mapData = content.split("\r\n"); // split by CRLF
-    const mapVersion = parseMapVersion(mapData[0].split("|")[0] || mapData[0] || "");
-
-    return {mapData, mapVersion};
+    const mapData = decoded.split("\r\n");
+    const mapVersion = parseFloat(mapData[0].split("|")[0] || mapData[0]);
+    return [mapData, mapVersion];
   } catch (error) {
-    const uncompressedData = await uncompress(result); // file can be gzip compressed
+    // map file can be compressed with gzip
+    const uncompressedData = await uncompress(result);
     if (uncompressedData) return parseLoadedResult(uncompressedData);
 
     ERROR && console.error(error);
-    return {mapData: null, mapVersion: null};
+    return [null, null];
   }
 }
 
 function showUploadMessage(type, mapData, mapVersion) {
-  let message, title;
+  const archive = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "archived version");
+  let message, title, canBeLoaded;
 
   if (type === "invalid") {
-    message = "The file does not look like a valid save file.<br>Please check the data format";
+    message = `The file does not look like a valid save file.<br>Please check the data format`;
     title = "Invalid file";
-  } else if (type === "updated") {
-    parseLoadedData(mapData, mapVersion);
-    return;
+    canBeLoaded = false;
   } else if (type === "ancient") {
-    const archive = link("https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog", "archived version");
     message = `The map version you are trying to load (${mapVersion}) is too old and cannot be updated to the current version.<br>Please keep using an ${archive}`;
     title = "Ancient file";
+    canBeLoaded = false;
   } else if (type === "newer") {
     message = `The map version you are trying to load (${mapVersion}) is newer than the current version.<br>Please load the file in the appropriate version`;
     title = "Newer file";
+    canBeLoaded = false;
   } else if (type === "outdated") {
-    INFO && console.info(`Loading map. Auto-updating from ${mapVersion} to ${VERSION}`);
+    INFO && console.info(`Loading map. Auto-update from ${mapVersion} to ${version}`);
     parseLoadedData(mapData, mapVersion);
     return;
   }
 
   alertMessage.innerHTML = message;
-  $("#alert").dialog({
-    title,
-    buttons: {
-      "Clear cache": () => cleanupData(),
-      OK: function () {
-        $(this).dialog("close");
-      }
+  const buttons = {
+    OK: function () {
+      $(this).dialog("close");
+      if (canBeLoaded) parseLoadedData(mapData, mapVersion);
     }
-  });
+  };
+  $("#alert").dialog({title, buttons});
 }
 
 async function parseLoadedData(data, mapVersion) {
@@ -221,29 +205,31 @@ async function parseLoadedData(data, mapVersion) {
     customization = 0;
     if (customizationMenu.offsetParent) styleTab.click();
 
-    {
-      const params = data[0].split("|");
+    const params = data[0].split("|");
+    void (function parseParameters() {
       if (params[3]) {
         seed = params[3];
         optionsSeed.value = seed;
-        INFO && console.group("Loaded Map " + seed);
-      } else INFO && console.group("Loaded Map");
+      }
       if (params[4]) graphWidth = +params[4];
       if (params[5]) graphHeight = +params[5];
       mapId = params[6] ? +params[6] : Date.now();
-    }
+    })();
 
-    {
+    INFO && console.group("Loaded Map " + seed);
+
+    // TODO: move all to options object
+    void (function parseSettings() {
       const settings = data[1].split("|");
       if (settings[0]) applyOption(distanceUnitInput, settings[0]);
-      if (settings[1]) distanceScale = distanceScaleInput.value = settings[1];
+      if (settings[1]) distanceScale = distanceScaleInput.value = distanceScaleOutput.value = settings[1];
       if (settings[2]) areaUnit.value = settings[2];
       if (settings[3]) applyOption(heightUnit, settings[3]);
-      if (settings[4]) heightExponentInput.value = settings[4];
+      if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4];
       if (settings[5]) temperatureScale.value = settings[5];
       // setting 6-11 (scaleBar) are part of style now, kept as "" in newer versions for compatibility
-      if (settings[12]) populationRate = populationRateInput.value = settings[12];
-      if (settings[13]) urbanization = urbanizationInput.value = settings[13];
+      if (settings[12]) populationRate = populationRateInput.value = populationRateOutput.value = settings[12];
+      if (settings[13]) urbanization = urbanizationInput.value = urbanizationOutput.value = settings[13];
       if (settings[14]) mapSizeInput.value = mapSizeOutput.value = minmax(settings[14], 1, 100);
       if (settings[15]) latitudeInput.value = latitudeOutput.value = minmax(settings[15], 0, 100);
       if (settings[18]) precInput.value = precOutput.value = settings[18];
@@ -255,19 +241,18 @@ async function parseLoadedData(data, mapVersion) {
       if (settings[21]) hideLabels.checked = +settings[21];
       if (settings[22]) stylePreset.value = settings[22];
       if (settings[23]) rescaleLabels.checked = +settings[23];
-      if (settings[24]) urbanDensity = urbanDensityInput.value = +settings[24];
+      if (settings[24]) urbanDensity = urbanDensityInput.value = urbanDensityOutput.value = +settings[24];
       if (settings[25]) longitudeInput.value = longitudeOutput.value = minmax(settings[25] || 50, 0, 100);
-      if (settings[26]) growthRate.value = settings[26];
-    }
+    })();
 
-    {
+    void (function applyOptionsToUI() {
       stateLabelsModeInput.value = options.stateLabelsMode;
       yearInput.value = options.year;
       eraInput.value = options.era;
       shapeRendering.value = viewbox.attr("shape-rendering") || "geometricPrecision";
-    }
+    })();
 
-    {
+    void (function parseConfiguration() {
       if (data[2]) mapCoordinates = JSON.parse(data[2]);
       if (data[4]) notes = JSON.parse(data[4]);
       if (data[33]) rulers.fromString(data[33]);
@@ -283,14 +268,13 @@ async function parseLoadedData(data, mapVersion) {
           declareFont(usedFont);
         });
       }
-    }
 
-    {
       const biomes = data[3].split("|");
       biomesData = Biomes.getDefault();
       biomesData.color = biomes[0].split(",");
       biomesData.habitability = biomes[1].split(",").map(h => +h);
       biomesData.name = biomes[2].split(",");
+
       // push custom biomes if any
       for (let i = biomesData.i.length; i < biomesData.name.length; i++) {
         biomesData.i.push(biomesData.i.length);
@@ -298,14 +282,14 @@ async function parseLoadedData(data, mapVersion) {
         biomesData.icons.push([]);
         biomesData.cost.push(50);
       }
-    }
+    })();
 
-    {
+    void (function replaceSVG() {
       svg.remove();
       document.body.insertAdjacentHTML("afterbegin", data[5]);
-    }
+    })();
 
-    {
+    void (function redefineElements() {
       svg = d3.select("#map");
       defs = svg.select("#deftemp");
       viewbox = svg.select("#viewbox");
@@ -355,33 +339,38 @@ async function parseLoadedData(data, mapVersion) {
       fogging = viewbox.select("#fogging");
       debug = viewbox.select("#debug");
       burgLabels = labels.select("#burgLabels");
+    })();
 
+    void (function addMissingElements() {
       if (!texture.size()) {
         texture = viewbox
           .insert("g", "#landmass")
           .attr("id", "texture")
           .attr("data-href", "./images/textures/plaster.jpg");
       }
+
       if (!emblems.size()) {
         emblems = viewbox.insert("g", "#labels").attr("id", "emblems").style("display", "none");
       }
-    }
+    })();
 
-    {
+    void (function parseGridData() {
       grid = JSON.parse(data[6]);
+
       const {cells, vertices} = calculateVoronoi(grid.points, grid.boundary);
       grid.cells = cells;
       grid.vertices = vertices;
+
       grid.cells.h = Uint8Array.from(data[7].split(","));
       grid.cells.prec = Uint8Array.from(data[8].split(","));
       grid.cells.f = Uint16Array.from(data[9].split(","));
       grid.cells.t = Int8Array.from(data[10].split(","));
       grid.cells.temp = Int8Array.from(data[11].split(","));
-    }
+    })();
 
-    {
+    void (function parsePackData() {
       reGraph();
-      Features.markupPack();
+      reMarkFeatures();
       pack.features = JSON.parse(data[12]);
       pack.cultures = JSON.parse(data[13]);
       pack.states = JSON.parse(data[14]);
@@ -391,21 +380,22 @@ async function parseLoadedData(data, mapVersion) {
       pack.rivers = data[32] ? JSON.parse(data[32]) : [];
       pack.markers = data[35] ? JSON.parse(data[35]) : [];
       pack.routes = data[37] ? JSON.parse(data[37]) : [];
-      pack.zones = data[38] ? JSON.parse(data[38]) : [];
-      pack.cells.biome = Uint8Array.from(data[16].split(","));
-      pack.cells.burg = Uint16Array.from(data[17].split(","));
-      pack.cells.conf = Uint8Array.from(data[18].split(","));
-      pack.cells.culture = Uint16Array.from(data[19].split(","));
-      pack.cells.fl = Uint16Array.from(data[20].split(","));
-      pack.cells.pop = Float32Array.from(data[21].split(","));
-      pack.cells.r = Uint16Array.from(data[22].split(","));
-      // data[23] had deprecated cells.road
-      pack.cells.s = Uint16Array.from(data[24].split(","));
-      pack.cells.state = Uint16Array.from(data[25].split(","));
-      pack.cells.religion = data[26] ? Uint16Array.from(data[26].split(",")) : new Uint16Array(pack.cells.i.length);
-      pack.cells.province = data[27] ? Uint16Array.from(data[27].split(",")) : new Uint16Array(pack.cells.i.length);
-      // data[28] had deprecated cells.crossroad
-      pack.cells.routes = data[36] ? JSON.parse(data[36]) : {};
+
+      const cells = pack.cells;
+      cells.biome = Uint8Array.from(data[16].split(","));
+      cells.burg = Uint16Array.from(data[17].split(","));
+      cells.conf = Uint8Array.from(data[18].split(","));
+      cells.culture = Uint16Array.from(data[19].split(","));
+      cells.fl = Uint16Array.from(data[20].split(","));
+      cells.pop = Float32Array.from(data[21].split(","));
+      cells.r = Uint16Array.from(data[22].split(","));
+      // data[23] for deprecated cells.road
+      cells.s = Uint16Array.from(data[24].split(","));
+      cells.state = Uint16Array.from(data[25].split(","));
+      cells.religion = data[26] ? Uint16Array.from(data[26].split(",")) : new Uint16Array(cells.i.length);
+      cells.province = data[27] ? Uint16Array.from(data[27].split(",")) : new Uint16Array(cells.i.length);
+      // data[28] for deprecated cells.crossroad
+      cells.routes = data[36] ? JSON.parse(data[36]) : {};
 
       if (data[31]) {
         const namesDL = data[31].split("/");
@@ -416,9 +406,9 @@ async function parseLoadedData(data, mapVersion) {
           nameBases[i] = {name: e[0], min: e[1], max: e[2], d: e[3], m: e[4], b};
         });
       }
-    }
+    })();
 
-    {
+    void (function restoreLayersState() {
       const isVisible = selection => selection.node() && selection.style("display") !== "none";
       const isVisibleNode = node => node && node.style.display !== "none";
       const hasChildren = selection => selection.node()?.hasChildNodes();
@@ -432,7 +422,7 @@ async function parseLoadedData(data, mapVersion) {
 
       // turn on active layers
       if (hasChild(texture, "image")) turnOn("toggleTexture");
-      if (hasChildren(terrs.select("#landHeights"))) turnOn("toggleHeight");
+      if (hasChildren(terrs)) turnOn("toggleHeight");
       if (hasChildren(biomes)) turnOn("toggleBiomes");
       if (hasChildren(cells)) turnOn("toggleCells");
       if (hasChildren(gridOverlay)) turnOn("toggleGrid");
@@ -447,13 +437,13 @@ async function parseLoadedData(data, mapVersion) {
       if (hasChildren(zones) && isVisible(zones)) turnOn("toggleZones");
       if (isVisible(borders) && hasChild(borders, "path")) turnOn("toggleBorders");
       if (isVisible(routes) && hasChild(routes, "path")) turnOn("toggleRoutes");
-      if (hasChildren(temperature)) turnOn("toggleTemperature");
+      if (hasChildren(temperature)) turnOn("toggleTemp");
       if (hasChild(population, "line")) turnOn("togglePopulation");
       if (hasChildren(ice)) turnOn("toggleIce");
-      if (hasChild(prec, "circle")) turnOn("togglePrecipitation");
+      if (hasChild(prec, "circle")) turnOn("togglePrec");
       if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
       if (isVisible(labels)) turnOn("toggleLabels");
-      if (isVisible(icons)) turnOn("toggleBurgIcons");
+      if (isVisible(icons)) turnOn("toggleIcons");
       if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
       if (hasChildren(markers)) turnOn("toggleMarkers");
       if (isVisible(ruler)) turnOn("toggleRulers");
@@ -461,19 +451,20 @@ async function parseLoadedData(data, mapVersion) {
       if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette");
 
       getCurrentPreset();
-    }
+    })();
 
-    {
+    void (function restoreEvents() {
       scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
       legend
         .on("mousemove", () => tip("Drag to change the position. Click to hide the legend"))
         .on("click", () => clearLegend());
-    }
+    })();
 
     {
       // dynamically import and run auto-update script
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.108.0");
-      resolveVersionConflicts(mapVersion);
+      const versionNumber = parseFloat(params[0]);
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.99.01");
+      resolveVersionConflicts(versionNumber);
     }
 
     // add custom heightmap color scheme if any
@@ -490,23 +481,19 @@ async function parseLoadedData(data, mapVersion) {
       if (textureHref) updateTextureSelectValue(textureHref);
     }
 
-    // data integrity checks
-    {
-      const {cells, vertices} = pack;
+    void (function checkDataIntegrity() {
+      const cells = pack.cells;
 
-      const cellsMismatch = cells.i.length !== cells.state.length;
-      const featureVerticesMismatch = pack.features.some(f => f?.vertices?.some(vertex => !vertices.p[vertex]));
-
-      if (cellsMismatch || featureVerticesMismatch) {
-        const message = "[Data integrity] Striping issue detected. To fix try to edit the heightmap in ERASE mode";
-        throw new Error(message);
+      if (pack.cells.i.length !== pack.cells.state.length) {
+        const message = "Data integrity check. Striping issue detected. To fix edit the heightmap in ERASE mode";
+        ERROR && console.error(message);
       }
 
       const invalidStates = [...new Set(cells.state)].filter(s => !pack.states[s] || pack.states[s].removed);
       invalidStates.forEach(s => {
         const invalidCells = cells.i.filter(i => cells.state[i] === s);
         invalidCells.forEach(i => (cells.state[i] = 0));
-        ERROR && console.error("[Data integrity] Invalid state", s, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid state", s, "is assigned to cells", invalidCells);
       });
 
       const invalidProvinces = [...new Set(cells.province)].filter(
@@ -515,14 +502,14 @@ async function parseLoadedData(data, mapVersion) {
       invalidProvinces.forEach(p => {
         const invalidCells = cells.i.filter(i => cells.province[i] === p);
         invalidCells.forEach(i => (cells.province[i] = 0));
-        ERROR && console.error("[Data integrity] Invalid province", p, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid province", p, "is assigned to cells", invalidCells);
       });
 
       const invalidCultures = [...new Set(cells.culture)].filter(c => !pack.cultures[c] || pack.cultures[c].removed);
       invalidCultures.forEach(c => {
         const invalidCells = cells.i.filter(i => cells.culture[i] === c);
         invalidCells.forEach(i => (cells.province[i] = 0));
-        ERROR && console.error("[Data integrity] Invalid culture", c, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid culture", c, "is assigned to cells", invalidCells);
       });
 
       const invalidReligions = [...new Set(cells.religion)].filter(
@@ -531,14 +518,14 @@ async function parseLoadedData(data, mapVersion) {
       invalidReligions.forEach(r => {
         const invalidCells = cells.i.filter(i => cells.religion[i] === r);
         invalidCells.forEach(i => (cells.religion[i] = 0));
-        ERROR && console.error("[Data integrity] Invalid religion", r, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid religion", r, "is assigned to cells", invalidCells);
       });
 
       const invalidFeatures = [...new Set(cells.f)].filter(f => f && !pack.features[f]);
       invalidFeatures.forEach(f => {
         const invalidCells = cells.i.filter(i => cells.f[i] === f);
         // No fix as for now
-        ERROR && console.error("[Data integrity] Invalid feature", f, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid feature", f, "is assigned to cells", invalidCells);
       });
 
       const invalidBurgs = [...new Set(cells.burg)].filter(
@@ -547,7 +534,7 @@ async function parseLoadedData(data, mapVersion) {
       invalidBurgs.forEach(burgId => {
         const invalidCells = cells.i.filter(i => cells.burg[i] === burgId);
         invalidCells.forEach(i => (cells.burg[i] = 0));
-        ERROR && console.error("[Data integrity] Invalid burg", burgId, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid burg", burgId, "is assigned to cells", invalidCells);
       });
 
       const invalidRivers = [...new Set(cells.r)].filter(r => r && !pack.rivers.find(river => river.i === r));
@@ -555,20 +542,21 @@ async function parseLoadedData(data, mapVersion) {
         const invalidCells = cells.i.filter(i => cells.r[i] === r);
         invalidCells.forEach(i => (cells.r[i] = 0));
         rivers.select("river" + r).remove();
-        ERROR && console.error("[Data integrity] Invalid river", r, "is assigned to cells", invalidCells);
+        ERROR && console.error("Data integrity check. Invalid river", r, "is assigned to cells", invalidCells);
       });
 
       pack.burgs.forEach(burg => {
         if (typeof burg.capital === "boolean") burg.capital = Number(burg.capital);
 
         if (!burg.i && burg.lock) {
-          ERROR && console.error(`[Data integrity] Burg 0 is marked as locked, removing the status`);
+          ERROR && console.error(`Data integrity check. Burg 0 is marked as locked, removing the status`);
           delete burg.lock;
           return;
         }
 
         if (burg.removed && burg.lock) {
-          ERROR && console.error(`[Data integrity] Removed burg ${burg.i} is marked as locked. Unlocking the burg`);
+          ERROR &&
+            console.error(`Data integrity check. Removed burg ${burg.i} is marked as locked. Unlocking the burg`);
           delete burg.lock;
           return;
         }
@@ -577,34 +565,36 @@ async function parseLoadedData(data, mapVersion) {
 
         if (burg.cell === undefined || burg.x === undefined || burg.y === undefined) {
           ERROR &&
-            console.error(`[Data integrity] Burg ${burg.i} is missing cell info or coordinates. Removing the burg`);
+            console.error(
+              `Data integrity check. Burg ${burg.i} is missing cell info or coordinates. Removing the burg`
+            );
           burg.removed = true;
         }
 
         if (burg.port < 0) {
-          ERROR && console.error("[Data integrity] Burg", burg.i, "has invalid port value", burg.port);
+          ERROR && console.error("Data integrity check. Burg", burg.i, "has invalid port value", burg.port);
           burg.port = 0;
         }
 
         if (burg.cell >= cells.i.length) {
-          ERROR && console.error("[Data integrity] Burg", burg.i, "is linked to invalid cell", burg.cell);
+          ERROR && console.error("Data integrity check. Burg", burg.i, "is linked to invalid cell", burg.cell);
           burg.cell = findCell(burg.x, burg.y);
           cells.i.filter(i => cells.burg[i] === burg.i).forEach(i => (cells.burg[i] = 0));
           cells.burg[burg.cell] = burg.i;
         }
 
         if (burg.state && !pack.states[burg.state]) {
-          ERROR && console.error("[Data integrity] Burg", burg.i, "is linked to invalid state", burg.state);
+          ERROR && console.error("Data integrity check. Burg", burg.i, "is linked to invalid state", burg.state);
           burg.state = 0;
         }
 
         if (burg.state && pack.states[burg.state].removed) {
-          ERROR && console.error("[Data integrity] Burg", burg.i, "is linked to removed state", burg.state);
+          ERROR && console.error("Data integrity check. Burg", burg.i, "is linked to removed state", burg.state);
           burg.state = 0;
         }
 
         if (burg.state === undefined) {
-          ERROR && console.error("[Data integrity] Burg", burg.i, "has no state data");
+          ERROR && console.error("Data integrity check. Burg", burg.i, "has no state data");
           burg.state = 0;
         }
       });
@@ -618,7 +608,7 @@ async function parseLoadedData(data, mapVersion) {
         if (!state.i && capitalBurgs.length) {
           ERROR &&
             console.error(
-              `[Data integrity] Neutral burgs (${capitalBurgs
+              `Data integrity check. Neutral burgs (${capitalBurgs
                 .map(b => b.i)
                 .join(", ")}) marked as capitals. Moving them to towns`
             );
@@ -632,7 +622,7 @@ async function parseLoadedData(data, mapVersion) {
         }
 
         if (capitalBurgs.length > 1) {
-          const message = `[Data integrity] State ${state.i} has multiple capitals (${capitalBurgs
+          const message = `Data integrity check. State ${state.i} has multiple capitals (${capitalBurgs
             .map(b => b.i)
             .join(", ")}) assigned. Keeping the first as capital and moving others to towns`;
           ERROR && console.error(message);
@@ -648,7 +638,7 @@ async function parseLoadedData(data, mapVersion) {
 
         if (state.i && stateBurgs.length && !capitalBurgs.length) {
           ERROR &&
-            console.error(`[Data integrity] State ${state.i} has no capital. Assigning the first burg as capital`);
+            console.error(`Data integrity check. State ${state.i} has no capital. Assigning the first burg as capital`);
           stateBurgs[0].capital = 1;
           moveBurgToGroup(stateBurgs[0].i, "cities");
         }
@@ -657,48 +647,17 @@ async function parseLoadedData(data, mapVersion) {
       pack.provinces.forEach(p => {
         if (!p.i || p.removed) return;
         if (pack.states[p.state] && !pack.states[p.state].removed) return;
-        ERROR &&
-          console.error(
-            `[Data integrity] Province ${p.i} is linked to removed state ${p.state}. Removing the province`
-          );
-        p.removed = true;
+        ERROR && console.error("Data integrity check. Province", p.i, "is linked to removed state", p.state);
+        p.removed = true; // remove incorrect province
       });
 
-      pack.routes.forEach(route => {
-        if (!route.points || route.points.length < 2) {
-          ERROR && console.error(`[Data integrity] Route ${route.i} has less than 2 points. Removing the route`);
-          Routes.remove(route);
-        }
-      });
-
-      for (const from in pack.cells.routes) {
-        const value = pack.cells.routes[from];
-        if (!value) continue;
-
-        if (Object.keys(value).length === 0) {
-          // remove empty object
-          delete pack.cells.routes[from];
-          continue;
-        }
-
-        for (const to in value) {
-          const routeId = value[to];
-          const route = pack.routes.find(r => r.i === routeId);
-          if (!route) {
-            ERROR &&
-              console.error(`[Data integrity] Route ${routeId} from ${from} to ${to} is missing. Removing the route`);
-            delete pack.cells.routes[from][to];
-          }
-        }
-      }
-
       {
         const markerIds = [];
         let nextId = last(pack.markers)?.i + 1 || 0;
 
         pack.markers.forEach(marker => {
           if (markerIds[marker.i]) {
-            ERROR && console.error("[Data integrity] Marker", marker.i, "has non-unique id. Changing to", nextId);
+            ERROR && console.error("Data integrity check. Marker", marker.i, "has non-unique id. Changing to", nextId);
 
             const domElements = document.querySelectorAll("#marker" + marker.i);
             if (domElements[1]) domElements[1].id = "marker" + nextId; // rename 2nd dom element
@@ -716,25 +675,20 @@ async function parseLoadedData(data, mapVersion) {
         // sort markers by index
         pack.markers.sort((a, b) => a.i - b.i);
       }
-    }
+    })();
 
-    {
-      // remove href from emblems, to trigger rendering on load
-      emblems.selectAll("use").attr("href", null);
-    }
+    fitMapToScreen();
 
-    {
-      // draw data layers (not kept in svg)
-      if (rulers && layerIsOn("toggleRulers")) rulers.draw();
-      if (layerIsOn("toggleGrid")) drawGrid();
-    }
+    // remove href from emblems, to trigger rendering on load
+    emblems.selectAll("use").attr("href", null);
 
-    {
-      if (window.restoreDefaultEvents) restoreDefaultEvents();
-      focusOn(); // based on searchParams focus on point, cell or burg
-      invokeActiveZooming();
-      fitMapToScreen();
-    }
+    // draw data layers (no kept in svg)
+    if (rulers && layerIsOn("toggleRulers")) rulers.draw();
+    if (layerIsOn("toggleGrid")) drawGrid();
+
+    if (window.restoreDefaultEvents) restoreDefaultEvents();
+    focusOn(); // based on searchParams focus on point, cell or burg
+    invokeActiveZooming();
 
     WARN && console.warn(`TOTAL: ${rn((performance.now() - uploadMap.timeStart) / 1000, 2)}s`);
     showStatistics();
@@ -744,15 +698,14 @@ async function parseLoadedData(data, mapVersion) {
     ERROR && console.error(error);
     clearMainTip();
 
-    alertMessage.innerHTML = /* html */ `An error is occured on map loading. Select a different file to load, <br>generate a new random map or cancel the loading.<br>Map version: ${mapVersion}. Generator version: ${VERSION}.
+    alertMessage.innerHTML = /* html */ `An error is occured on map loading. Select a different file to load, <br>generate a new random map or cancel the loading.<br>Map version: ${mapVersion}. Generator version: ${version}.
       <p id="errorBox">${parseError(error)}</p>`;
 
     $("#alert").dialog({
       resizable: false,
       title: "Loading error",
-      maxWidth: "40em",
+      maxWidth: "50em",
       buttons: {
-        "Clear cache": () => cleanupData(),
         "Select file": function () {
           $(this).dialog("close");
           mapToLoad.click();
diff --git a/modules/io/save.js b/modules/io/save.js
index 304fef59..73e6845f 100644
--- a/modules/io/save.js
+++ b/modules/io/save.js
@@ -41,7 +41,7 @@ function prepareMapData() {
   const date = new Date();
   const dateString = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
   const license = "File can be loaded in azgaar.github.io/Fantasy-Map-Generator";
-  const params = [VERSION, license, dateString, seed, graphWidth, graphHeight, mapId].join("|");
+  const params = [version, license, dateString, seed, graphWidth, graphHeight, mapId].join("|");
   const settings = [
     distanceUnitInput.value,
     distanceScale,
@@ -68,8 +68,7 @@ function prepareMapData() {
     stylePreset.value,
     +rescaleLabels.checked,
     urbanDensity,
-    longitudeOutput.value,
-    growthRate.value
+    longitudeOutput.value
   ].join("|");
   const coords = JSON.stringify(mapCoordinates);
   const biomes = [biomesData.color, biomesData.habitability, biomesData.name].join("|");
@@ -101,7 +100,6 @@ function prepareMapData() {
   const markers = JSON.stringify(pack.markers);
   const cellRoutes = JSON.stringify(pack.cells.routes);
   const routes = JSON.stringify(pack.routes);
-  const zones = JSON.stringify(pack.zones);
 
   // store name array only if not the same as default
   const defaultNB = Names.getNameBases();
@@ -154,8 +152,7 @@ function prepareMapData() {
     fonts,
     markers,
     cellRoutes,
-    routes,
-    zones
+    routes
   ].join("\r\n");
   return mapData;
 }
diff --git a/modules/lakes.js b/modules/lakes.js
index d95b87a9..ba6adb80 100644
--- a/modules/lakes.js
+++ b/modules/lakes.js
@@ -1,85 +1,96 @@
 "use strict";
 
 window.Lakes = (function () {
-  const LAKE_ELEVATION_DELTA = 0.1;
-
-  // check if lake can be potentially open (not in deep depression)
-  const detectCloseLakes = h => {
-    const {cells} = pack;
-    const ELEVATION_LIMIT = +byId("lakeElevationLimitOutput").value;
-
-    pack.features.forEach(feature => {
-      if (feature.type !== "lake") return;
-      delete feature.closed;
-
-      const MAX_ELEVATION = feature.height + ELEVATION_LIMIT;
-      if (MAX_ELEVATION > 99) {
-        feature.closed = false;
-        return;
-      }
-
-      let isDeep = true;
-      const lowestShorelineCell = feature.shoreline.sort((a, b) => h[a] - h[b])[0];
-      const queue = [lowestShorelineCell];
-      const checked = [];
-      checked[lowestShorelineCell] = true;
-
-      while (queue.length && isDeep) {
-        const cellId = queue.pop();
-
-        for (const neibCellId of cells.c[cellId]) {
-          if (checked[neibCellId]) continue;
-          if (h[neibCellId] >= MAX_ELEVATION) continue;
-
-          if (h[neibCellId] < 20) {
-            const nFeature = pack.features[cells.f[neibCellId]];
-            if (nFeature.type === "ocean" || feature.height > nFeature.height) isDeep = false;
-          }
-
-          checked[neibCellId] = true;
-          queue.push(neibCellId);
-        }
-      }
-
-      feature.closed = isDeep;
-    });
-  };
-
-  const defineClimateData = function (heights) {
-    const {cells, features} = pack;
+  const setClimateData = function (h) {
+    const cells = pack.cells;
     const lakeOutCells = new Uint16Array(cells.i.length);
 
-    features.forEach(feature => {
-      if (feature.type !== "lake") return;
-      feature.flux = getFlux(feature);
-      feature.temp = getLakeTemp(feature);
-      feature.evaporation = getLakeEvaporation(feature);
-      if (feature.closed) return; // no outlet for lakes in depressed areas
+    pack.features.forEach(f => {
+      if (f.type !== "lake") return;
 
-      feature.outCell = getLowestShoreCell(feature);
-      lakeOutCells[feature.outCell] = feature.i;
+      // default flux: sum of precipitation around lake
+      f.flux = f.shoreline.reduce((acc, c) => acc + grid.cells.prec[cells.g[c]], 0);
+
+      // temperature and evaporation to detect closed lakes
+      f.temp =
+        f.cells < 6
+          ? grid.cells.temp[cells.g[f.firstCell]]
+          : rn(d3.mean(f.shoreline.map(c => grid.cells.temp[cells.g[c]])), 1);
+      const height = (f.height - 18) ** heightExponentInput.value; // height in meters
+      const evaporation = ((700 * (f.temp + 0.006 * height)) / 50 + 75) / (80 - f.temp); // based on Penman formula, [1-11]
+      f.evaporation = rn(evaporation * f.cells);
+
+      // no outlet for lakes in depressed areas
+      if (f.closed) return;
+
+      // lake outlet cell
+      f.outCell = f.shoreline[d3.scan(f.shoreline, (a, b) => h[a] - h[b])];
+      lakeOutCells[f.outCell] = f.i;
     });
 
     return lakeOutCells;
+  };
 
-    function getFlux(lake) {
-      return lake.shoreline.reduce((acc, c) => acc + grid.cells.prec[cells.g[c]], 0);
-    }
+  // get array of land cells aroound lake
+  const getShoreline = function (lake) {
+    const uniqueCells = new Set();
+    if (!lake.vertices) lake.vertices = [];
+    lake.vertices.forEach(v => pack.vertices.c[v].forEach(c => pack.cells.h[c] >= 20 && uniqueCells.add(c)));
+    lake.shoreline = [...uniqueCells];
+  };
 
-    function getLakeTemp(lake) {
-      if (lake.cells < 6) return grid.cells.temp[cells.g[lake.firstCell]];
-      return rn(d3.mean(lake.shoreline.map(c => grid.cells.temp[cells.g[c]])), 1);
-    }
+  const prepareLakeData = h => {
+    const cells = pack.cells;
+    const ELEVATION_LIMIT = +document.getElementById("lakeElevationLimitOutput").value;
 
-    function getLakeEvaporation(lake) {
-      const height = (lake.height - 18) ** heightExponentInput.value; // height in meters
-      const evaporation = ((700 * (lake.temp + 0.006 * height)) / 50 + 75) / (80 - lake.temp); // based on Penman formula, [1-11]
-      return rn(evaporation * lake.cells);
-    }
+    pack.features.forEach(f => {
+      if (f.type !== "lake") return;
+      delete f.flux;
+      delete f.inlets;
+      delete f.outlet;
+      delete f.height;
+      delete f.closed;
+      !f.shoreline && Lakes.getShoreline(f);
 
-    function getLowestShoreCell(lake) {
-      return lake.shoreline.sort((a, b) => heights[a] - heights[b])[0];
-    }
+      // lake surface height is as lowest land cells around
+      const min = f.shoreline.sort((a, b) => h[a] - h[b])[0];
+      f.height = h[min] - 0.1;
+
+      // check if lake can be open (not in deep depression)
+      if (ELEVATION_LIMIT === 80) {
+        f.closed = false;
+        return;
+      }
+
+      let deep = true;
+      const threshold = f.height + ELEVATION_LIMIT;
+      const queue = [min];
+      const checked = [];
+      checked[min] = true;
+
+      // check if elevated lake can potentially pour to another water body
+      while (deep && queue.length) {
+        const q = queue.pop();
+
+        for (const n of cells.c[q]) {
+          if (checked[n]) continue;
+          if (h[n] >= threshold) continue;
+
+          if (h[n] < 20) {
+            const nFeature = pack.features[cells.f[n]];
+            if (nFeature.type === "ocean" || f.height > nFeature.height) {
+              deep = false;
+              break;
+            }
+          }
+
+          checked[n] = true;
+          queue.push(n);
+        }
+      }
+
+      f.closed = deep;
+    });
   };
 
   const cleanupLakeData = function () {
@@ -100,10 +111,23 @@ window.Lakes = (function () {
     }
   };
 
-  const getHeight = function (feature) {
-    const heights = pack.cells.h;
-    const minShoreHeight = d3.min(feature.shoreline.map(cellId => heights[cellId])) || 20;
-    return rn(minShoreHeight - LAKE_ELEVATION_DELTA, 2);
+  const defineGroup = function () {
+    for (const feature of pack.features) {
+      if (feature.type !== "lake") continue;
+      const lakeEl = lakes.select(`[data-f="${feature.i}"]`).node();
+      if (!lakeEl) continue;
+
+      feature.group = getGroup(feature);
+      document.getElementById(feature.group).appendChild(lakeEl);
+    }
+  };
+
+  const generateName = function () {
+    Math.random = aleaPRNG(seed);
+    for (const feature of pack.features) {
+      if (feature.type !== "lake") continue;
+      feature.name = getName(feature);
+    }
   };
 
   const getName = function (feature) {
@@ -112,5 +136,19 @@ window.Lakes = (function () {
     return Names.getCulture(culture);
   };
 
-  return {defineClimateData, cleanupLakeData, detectCloseLakes, getHeight, getName};
+  function getGroup(feature) {
+    if (feature.temp < -3) return "frozen";
+    if (feature.height > 60 && feature.cells < 10 && feature.firstCell % 10 === 0) return "lava";
+
+    if (!feature.inlets && !feature.outlet) {
+      if (feature.evaporation > feature.flux * 4) return "dry";
+      if (feature.cells < 3 && feature.firstCell % 10 === 0) return "sinkhole";
+    }
+
+    if (!feature.outlet && feature.evaporation > feature.flux) return "salt";
+
+    return "freshwater";
+  }
+
+  return {setClimateData, cleanupLakeData, prepareLakeData, defineGroup, generateName, getName, getShoreline};
 })();
diff --git a/modules/markers-generator.js b/modules/markers-generator.js
index 367cdd5f..d08f8807 100644
--- a/modules/markers-generator.js
+++ b/modules/markers-generator.js
@@ -11,7 +11,7 @@ window.Markers = (function () {
     /*
       Default markers config:
       type - short description (snake-case)
-      icon - unicode character or url to image
+      icon - unicode character, make sure it's supported by most of the browsers. Source: emojipedia.org
       dx: icon offset in x direction, in pixels
       dy: icon offset in y direction, in pixels
       min: minimum number of candidates to add at least 1 marker
@@ -117,7 +117,6 @@ window.Markers = (function () {
       while (quantity && candidates.length) {
         const [cell] = extractAnyElement(candidates);
         const marker = addMarker({icon, type, dx, dy, px}, {cell});
-        if (!marker) continue;
         add("marker" + marker.i, cell);
         quantity--;
       }
@@ -151,7 +150,6 @@ window.Markers = (function () {
   }
 
   function addMarker(base, marker) {
-    if (marker.cell === undefined) return;
     const i = last(pack.markers)?.i + 1 || 0;
     const [x, y] = getMarkerCoordinates(marker.cell);
     marker = {...base, x, y, ...marker, i};
diff --git a/modules/military-generator.js b/modules/military-generator.js
index 5aea87db..df2f2892 100644
--- a/modules/military-generator.js
+++ b/modules/military-generator.js
@@ -2,7 +2,7 @@
 
 window.Military = (function () {
   const generate = function () {
-    TIME && console.time("generateMilitary");
+    TIME && console.time("generateMilitaryForces");
     const {cells, states} = pack;
     const {p} = cells;
     const valid = states.filter(s => s.i && !s.removed); // valid states
@@ -252,6 +252,8 @@ window.Military = (function () {
       delete s.temp; // do not store temp data
     });
 
+    redraw();
+
     function createRegiments(nodes, s) {
       if (!nodes.length) return [];
 
@@ -310,9 +312,19 @@ window.Military = (function () {
       return regiments;
     }
 
-    TIME && console.timeEnd("generateMilitary");
+    TIME && console.timeEnd("generateMilitaryForces");
   };
 
+  function redraw() {
+    const validStates = pack.states.filter(s => s.i && !s.removed);
+    armies.selectAll("g > g").each(function () {
+      const index = notes.findIndex(n => n.id === this.id);
+      if (index != -1) notes.splice(index, 1);
+    });
+    armies.selectAll("g").remove();
+    validStates.forEach(s => drawRegiments(s.military, s.i));
+  }
+
   const getDefaultOptions = function () {
     return [
       {icon: "⚔️", name: "infantry", rural: 0.25, urban: 0.2, crew: 1, power: 1, type: "melee", separate: 0},
@@ -323,6 +335,122 @@ window.Military = (function () {
     ];
   };
 
+  const drawRegiments = function (regiments, s) {
+    const size = +armies.attr("box-size");
+    const w = d => (d.n ? size * 4 : size * 6);
+    const h = size * 2;
+    const x = d => rn(d.x - w(d) / 2, 2);
+    const y = d => rn(d.y - size, 2);
+
+    const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
+    const darkerColor = d3.color(baseColor).darker().hex();
+    const army = armies
+      .append("g")
+      .attr("id", "army" + s)
+      .attr("fill", baseColor)
+      .attr("color", darkerColor);
+
+    const g = army
+      .selectAll("g")
+      .data(regiments)
+      .enter()
+      .append("g")
+      .attr("id", d => "regiment" + s + "-" + d.i)
+      .attr("data-name", d => d.name)
+      .attr("data-state", s)
+      .attr("data-id", d => d.i)
+      .attr("transform", d => (d.angle ? `rotate(${d.angle})` : null))
+      .attr("transform-origin", d => `${d.x}px ${d.y}px`);
+    g.append("rect")
+      .attr("x", d => x(d))
+      .attr("y", d => y(d))
+      .attr("width", d => w(d))
+      .attr("height", h);
+    g.append("text")
+      .attr("x", d => d.x)
+      .attr("y", d => d.y)
+      .text(d => getTotal(d));
+    g.append("rect")
+      .attr("fill", "currentColor")
+      .attr("x", d => x(d) - h)
+      .attr("y", d => y(d))
+      .attr("width", h)
+      .attr("height", h);
+    g.append("text")
+      .attr("class", "regimentIcon")
+      .attr("x", d => x(d) - size)
+      .attr("y", d => d.y)
+      .text(d => d.icon);
+  };
+
+  const drawRegiment = function (reg, stateId) {
+    const size = +armies.attr("box-size");
+    const w = reg.n ? size * 4 : size * 6;
+    const h = size * 2;
+    const x1 = rn(reg.x - w / 2, 2);
+    const y1 = rn(reg.y - size, 2);
+
+    let army = armies.select("g#army" + stateId);
+    if (!army.size()) {
+      const baseColor = pack.states[stateId].color[0] === "#" ? pack.states[stateId].color : "#999";
+      const darkerColor = d3.color(baseColor).darker().hex();
+      army = armies
+        .append("g")
+        .attr("id", "army" + stateId)
+        .attr("fill", baseColor)
+        .attr("color", darkerColor);
+    }
+
+    const g = army
+      .append("g")
+      .attr("id", "regiment" + stateId + "-" + reg.i)
+      .attr("data-name", reg.name)
+      .attr("data-state", stateId)
+      .attr("data-id", reg.i)
+      .attr("transform", `rotate(${reg.angle || 0})`)
+      .attr("transform-origin", `${reg.x}px ${reg.y}px`);
+    g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
+    g.append("text").attr("x", reg.x).attr("y", reg.y).text(getTotal(reg));
+    g.append("rect")
+      .attr("fill", "currentColor")
+      .attr("x", x1 - h)
+      .attr("y", y1)
+      .attr("width", h)
+      .attr("height", h);
+    g.append("text")
+      .attr("class", "regimentIcon")
+      .attr("x", x1 - size)
+      .attr("y", reg.y)
+      .text(reg.icon);
+  };
+
+  // move one regiment to another
+  const moveRegiment = function (reg, x, y) {
+    const el = armies.select("g#army" + reg.state).select("g#regiment" + reg.state + "-" + reg.i);
+    if (!el.size()) return;
+
+    const duration = Math.hypot(reg.x - x, reg.y - y) * 8;
+    reg.x = x;
+    reg.y = y;
+    const size = +armies.attr("box-size");
+    const w = reg.n ? size * 4 : size * 6;
+    const h = size * 2;
+    const x1 = x => rn(x - w / 2, 2);
+    const y1 = y => rn(y - size, 2);
+
+    const move = d3.transition().duration(duration).ease(d3.easeSinInOut);
+    el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y));
+    el.select("text").transition(move).attr("x", x).attr("y", y);
+    el.selectAll("rect:nth-of-type(2)")
+      .transition(move)
+      .attr("x", x1(x) - h)
+      .attr("y", y1(y));
+    el.select(".regimentIcon")
+      .transition(move)
+      .attr("x", x1(x) - size)
+      .attr("y", y);
+  };
+
   // utilize si function to make regiment total text fit regiment box
   const getTotal = reg => (reg.a > (reg.n ? 999 : 99999) ? si(reg.a) : reg.a);
 
@@ -375,19 +503,21 @@ window.Military = (function () {
       : "";
 
     const campaign = s.campaigns ? ra(s.campaigns) : null;
-    const year = campaign
-      ? rand(campaign.start, campaign.end || options.year)
-      : gauss(options.year - 100, 150, 1, options.year - 6);
+    const year = campaign ? rand(campaign.start, campaign.end) : gauss(options.year - 100, 150, 1, options.year - 6);
     const conflict = campaign ? ` during the ${campaign.name}` : "";
     const legend = `Regiment was formed in ${year} ${options.era}${conflict}. ${station}${troops}`;
-    notes.push({id: `regiment${s.i}-${r.i}`, name: r.name, legend});
+    notes.push({id: `regiment${s.i}-${r.i}`, name: `${r.icon} ${r.name}`, legend});
   };
 
   return {
     generate,
+    redraw,
     getDefaultOptions,
     getName,
     generateNote,
+    drawRegiments,
+    drawRegiment,
+    moveRegiment,
     getTotal,
     getEmblem
   };
diff --git a/modules/names-generator.js b/modules/names-generator.js
index c35afedc..52bea286 100644
--- a/modules/names-generator.js
+++ b/modules/names-generator.js
@@ -48,28 +48,18 @@ window.Names = (function () {
     return chain;
   };
 
-  const updateChain = i => {
-    chains[i] = nameBases[i]?.b ? calculateChain(nameBases[i].b) : null;
-  };
+  // update chain for specific base
+  const updateChain = i => (chains[i] = nameBases[i] || nameBases[i].b ? calculateChain(nameBases[i].b) : null);
 
-  const clearChains = () => {
-    chains = [];
-  };
+  // update chains for all used bases
+  const clearChains = () => (chains = []);
 
   // generate name using Markov's chain
   const getBase = function (base, min, max, dupl) {
-    if (base === undefined) return ERROR && console.error("Please define a base");
-
-    if (nameBases[base] === undefined) {
-      if (nameBases[0]) {
-        WARN && console.warn("Namebase " + base + " is not found. First available namebase will be used");
-        base = 0;
-      } else {
-        ERROR && console.error("Namebase " + base + " is not found");
-        return "ERROR";
-      }
+    if (base === undefined) {
+      ERROR && console.error("Please define a base");
+      return;
     }
-
     if (!chains[base]) updateChain(base);
 
     const data = chains[base];
@@ -151,8 +141,16 @@ window.Names = (function () {
 
   // generate short name for base
   const getBaseShort = function (base) {
-    const min = nameBases[base] ? nameBases[base].min - 1 : null;
-    const max = min ? Math.max(nameBases[base].max - 2, min) : null;
+    if (nameBases[base] === undefined) {
+      tip(
+        `Namebase ${base} does not exist. Please upload custom namebases of change the base in Cultures Editor`,
+        false,
+        "error"
+      );
+      base = 1;
+    }
+    const min = nameBases[base].min - 1;
+    const max = Math.max(nameBases[base].max - 2, min);
     return getBase(base, min, max, "", 0);
   };
 
@@ -288,7 +286,7 @@ window.Names = (function () {
       {name: "Basque", i: 20, min: 4, max: 11, d: "r", m: .1, b: "Agurain,Aia,Aiara,Albiztur,Alkiza,Altzaga,Amorebieta,Amurrio,Andoain,Anoeta,Antzuola,Arakaldo,Arantzazu,Arbatzegi,Areatza,Arratzua,Arrieta,Artea,Artziniega,Asteasu,Astigarraga,Ataun,Atxondo,Aulesti,Azkoitia,Azpeitia,Bakio,Baliarrain,Barakaldo,Barrika,Barrundia,Basauri,Beasain,Bedia,Beizama,Belauntza,Berastegi,Bergara,Bermeo,Bernedo,Berriatua,Berriz,Bidania,Bilar,Bilbao,Busturia,Deba,Derio,Donostia,Dulantzi,Durango,Ea,Eibar,Elantxobe,Elduain,Elgeta,Elgoibar,Elorrio,Erandio,Ergoitia,Ermua,Errenteria,Errezil,Eskoriatza,Eskuernaga,Etxebarri,Etxebarria,Ezkio,Forua,Gabiria,Gaintza,Galdakao,Gamiz,Garai,Gasteiz,Gatzaga,Gaubea,Gautegiz,Gaztelu,Gernika,Gerrikaitz,Getaria,Getxo,Gizaburuaga,Goiatz,Gorliz,Gorriaga,Harana,Hernani,Hondarribia,Ibarra,Ibarrangelu,Idiazabal,Iekora,Igorre,Ikaztegieta,Irun,Irura,Iruraiz,Itsaso,Itsasondo,Iurreta,Izurtza,Jatabe,Kanpezu,Karrantza,Kortezubi,Kripan,Kuartango,Lanestosa,Lantziego,Larrabetzu,Lasarte,Laukiz,Lazkao,Leaburu,Legazpi,Legorreta,Legutio,Leintz,Leioa,Lekeitio,Lemoa,Lemoiz,Leza,Lezama,Lezo,Lizartza,Maeztu,Mallabia,Manaria,Markina,Maruri,Menaka,Mendaro,Mendata,Mendexa,Morga,Mundaka,Mungia,Munitibar,Murueta,Muskiz,Mutiloa,Mutriku,Nabarniz,Oiartzun,Oion,Okondo,Olaberria,Onati,Ondarroa,Ordizia,Orendain,Orexa,Oria,Orio,Ormaiztegi,Orozko,Ortuella,Otegi,Otxandio,Pasaia,Plentzia,Santurtzi,Sestao,Sondika,Soraluze,Sukarrieta,Tolosa,Trapagaran,Turtzioz,Ubarrundia,Ubide,Ugao,Urdua,Urduliz,Urizaharra,Urkabustaiz,Urnieta,Urretxu,Usurbil,Xemein,Zabaleta,Zaia,Zaldibar,Zambrana,Zamudio,Zaratamo,Zarautz,Zeberio,Zegama,Zerain,Zestoa,Zierbena,Zigoitia,Ziortza,Zuia,Zumaia,Zumarraga"},
       {name: "Nigerian", i: 21, min: 4, max: 10, d: "", m: .3, b: "Abadogo,Abafon,Adealesu,Adeto,Adyongo,Afaga,Afamju,Agigbigi,Agogoke,Ahute,Aiyelaboro,Ajebe,Ajola,Akarekwu,Akunuba,Alawode,Alkaijji,Amangam,Amgbaye,Amtasa,Amunigun,Animahun,Anyoko,Arapagi,Asande,Awgbagba,Awhum,Awodu,Babateduwa,Bandakwai,Bangdi,Bilikani,Birnindodo,Braidu,Bulakawa,Buriburi,Cainnan,Chakum,Chondugh,Dagwarga,Darpi,Dokatofa,Dozere,Ebelibri,Efem,Ekoku,Ekpe,Ewhoeviri,Galea,Gamen,Ganjin,Gantetudu,Gargar,Garinbode,Gbure,Gerti,Gidan,Gitabaremu,Giyagiri,Giyawa,Gmawa,Golakochi,Golumba,Gunji,Gwambula,Gwodoti,Hayinlere,Hayinmaialewa,Hirishi,Hombo,Ibefum,Iberekodo,Icharge,Idofin,Idofinoka,Igbogo,Ijoko,Ijuwa,Ikawga,Ikhin,Ikpakidout,Ikpeoniong,Imuogo,Ipawo,Ipinlerere,Isicha,Itakpa,Jangi,Jare,Jataudakum,Jaurogomki,Jepel,Kafinmalama,Katab,Katanga,Katinda,Katirije,Kaurakimba,Keffinshanu,Kellumiri,Kiagbodor,Kirbutu,Kita,Kogogo,Kopje,Korokorosei,Kotoku,Kuata,Kujum,Kukau,Kunboon,Kuonubogbene,Kurawe,Kushinahu,Kwaramakeri,Ladimeji,Lafiaro,Lahaga,Laindebajanle,Laindegoro,Lakati,Litenswa,Maba,Madarzai,Maianita,Malikansaa,Mata,Megoyo,Meku,Miama,Modi,Mshi,Msugh,Muduvu,Murnachehu,Namnai,Ndamanma,Ndiwulunbe,Ndonutim,Ngbande,Nguengu,Ntoekpe,Nyajo,Nyior,Odajie,Ogbaga,Ogultu,Ogunbunmi,Ojopode,Okehin,Olugunna,Omotunde,Onipede,Onma,Orhere,Orya,Otukwang,Otunade,Rampa,Rimi,Rugan,Rumbukawa,Sabiu,Sangabama,Sarabe,Seboregetore,Shafar,Shagwa,Shata,Shengu,Sokoron,Sunnayu,Tafoki,Takula,Talontan,Tarhemba,Tayu,Ter,Timtim,Timyam,Tindirke,Tokunbo,Torlwam,Tseakaadza,Tseanongo,Tsebeeve,Tsepaegh,Tuba,Tumbo,Tungalombo,Tunganyakwe,Uhkirhi,Umoru,Umuabai,Umuajuju,Unchida,Ungua,Unguwar,Unongo,Usha,Utongbo,Vembera,Wuro,Yanbashi,Yanmedi,Yoku,Zarunkwari,Zilumo,Zulika"},
       {name: "Celtic", i: 22, min: 4, max: 12, d: "nld", m: 0, b: "Aberaman,Aberangell,Aberarth,Aberavon,Aberbanc,Aberbargoed,Aberbeeg,Abercanaid,Abercarn,Abercastle,Abercegir,Abercraf,Abercregan,Abercych,Abercynon,Aberdare,Aberdaron,Aberdaugleddau,Aberdeen,Aberdulais,Aberdyfi,Aberedw,Abereiddy,Abererch,Abereron,Aberfan,Aberffraw,Aberffrwd,Abergavenny,Abergele,Aberglasslyn,Abergorlech,Abergwaun,Abergwesyn,Abergwili,Abergwynfi,Abergwyngregyn,Abergynolwyn,Aberhafesp,Aberhonddu,Aberkenfig,Aberllefenni,Abermain,Abermaw,Abermorddu,Abermule,Abernant,Aberpennar,Aberporth,Aberriw,Abersoch,Abersychan,Abertawe,Aberteifi,Aberthin,Abertillery,Abertridwr,Aberystwyth,Achininver,Afonhafren,Alisaha,Anfosadh,Antinbhearmor,Ardenna,Attacon,Banwen,Beira,Bhrura,Bleddfa,Boioduro,Bona,Boskyny,Boslowenpolbrogh,Boudobriga,Bravon,Brigant,Briganta,Briva,Brosnach,Caersws,Cambodunum,Cambra,Caracta,Catumagos,Centobriga,Ceredigion,Chalain,Chearbhallain,Chlasaigh,Chormaic,Cuileannach,Dinn,Diwa,Dubingen,Duibhidighe,Duro,Ebora,Ebruac,Eburodunum,Eccles,Egloskuri,Eighe,Eireann,Elerghi,Ferkunos,Fhlaithnin,Gallbhuaile,Genua,Ghrainnse,Gwyles,Heartsease,Hebron,Hordh,Inbhear,Inbhir,Inbhirair,Innerleithen,Innerleven,Innerwick,Inver,Inveraldie,Inverallan,Inveralmond,Inveramsay,Inveran,Inveraray,Inverarnan,Inverbervie,Inverclyde,Inverell,Inveresk,Inverfarigaig,Invergarry,Invergordon,Invergowrie,Inverhaddon,Inverkeilor,Inverkeithing,Inverkeithney,Inverkip,Inverleigh,Inverleith,Inverloch,Inverlochlarig,Inverlochy,Invermay,Invermoriston,Inverness,Inveroran,Invershin,Inversnaid,Invertrossachs,Inverugie,Inveruglas,Inverurie,Iubhrach,Karardhek,Kilninver,Kirkcaldy,Kirkintilloch,Krake,Lanngorrow,Latense,Leming,Lindomagos,Llanaber,Llandidiwg,Llandyrnog,Llanfarthyn,Llangadwaldr,Llansanwyr,Lochinver,Lugduno,Magoduro,Mheara,Monmouthshire,Nanshiryarth,Narann,Novioduno,Nowijonago,Octoduron,Penning,Pheofharain,Ponsmeur,Raithin,Ricomago,Rossinver,Salodurum,Seguia,Sentica,Theorsa,Tobargeal,Trealaw,Trefesgob,Trewedhenek,Trewythelan,Tuaisceart,Uige,Vitodurum,Windobona"},
-      {name: "Mesopotamian", i: 23, min: 4, max: 9, d: "srpl", m: .1, b: "Adab,Adamndun,Adma,Admatum,Agrab,Akkad,Akshak,Amnanum,Andarig,Anshan,Apiru,Apum,Arantu,Arbid,Arpachiyah,Arpad,Arrapha,Ashlakka,Assur,Awan,Babilim,Bad-Tibira,Balawat,Barsip,Birtu,Bit-Bunakki,Borsippa,Chuera,Dashrah,Der,Dilbat,Diniktum,Doura,Dur-Kurigalzu,Dur-Sharrukin,Dur-Untash,Dûr-gurgurri,Ebla,Ekallatum,Ekalte,Emar,Erbil,Eresh,Eridu,Eshnunn,Eshnunna,Gargamish,Gasur,Gawra,Gibil,Girsu,Gizza,Habirun,Habur,Hadatu,Hakkulan,Halab,Halabit,Hamazi,Hamoukar,Haradum,Harbidum,Harran,Harranu,Hassuna,Hatarikka,Hatra,Hissar,Hiyawa,Hormirzad,Ida-Maras,Idamaraz,Idu,Imerishu,Imgur-Enlil,Irisagrig,Irnina,Irridu,Isin,Issinnitum,Iturungal,Izubitum,Jarmo,Jemdet,Kabnak,Kadesh,Kahat,Kalhu,Kar-Shulmanu-Asharedu,Kar-Tukulti-Ninurta,Kar-shulmanu-asharedu,Karana,Karatepe,Kartukulti,Kazallu,Kesh,Kidsha,Kinza,Kish,Kisiga,Kisurra,Kuara,Kurda,Kurruhanni,Kutha,Lagaba,Lagash,Larak,Larsa,Leilan,Malgium,Marad,Mardaman,Mari,Marlik,Mashkan,Mashkan-shapir,Matutem,Me-Turan,Meliddu,Mumbaqat,Nabada,Nagar,Nanagugal,Nerebtum,Nigin,Nimrud,Nina,Nineveh,Ninua,Nippur,Niru,Niya,Nuhashe,Nuhasse,Nuzi,Puzrish-Dagan,Qalatjarmo,Qatara,Qatna,Qattunan,Qidshu,Rapiqum,Rawda,Sagaz,Shaduppum,Shaggaratum,Shalbatu,Shanidar,Sharrukin,Shawwan,Shehna,Shekhna,Shemshara,Shibaniba,Shubat-Enlil,Shurkutir,Shuruppak,Shusharra,Shushin,Sikan,Sippar,Sippar-Amnanum,Sippar-sha-Annunitum,Subatum,Susuka,Tadmor,Tarbisu,Telul,Terqa,Tirazish,Tisbon,Tuba,Tushhan,Tuttul,Tutub,Ubaid,Umma,Ur,Urah,Urbilum,Urkesh,Ursa'um,Uruk,Urum,Uzarlulu,Warka,Washukanni,Zabalam,Zarri-Amnan"},
+      {name: "Mesopotamian", i: 23, min: 4, max: 9, d: "srpl", m: .1, b: "Adab,Adamndun,Adma,Admatum,Agrab,Akkad,Akshak,Amnanum,Andarig,Anshan,Apiru,Apum,Arantu,Arbid,Arpachiyah,Arpad,Arrapha,Ashlakka,Assur,Awan,Babilim,Bad-Tibira,Balawat,Barsip,Birtu,Bit-Bunakki,Borsippa,Chuera,Dashrah,Der,Dilbat,Diniktum,Doura,Dur-Kurigalzu,Dur-Sharrukin,Dur-Untash,Dûr-gurgurri,Ebla,Ekallatum,Ekalte,Emar,Erbil,Eresh,Eridu,Eshnunn,Eshnunna,Gargamish,Gasur,Gawra,Gibil,Girsu,Gizza,Habirun,Habur,Hadatu,Hakkulan,Halab,Halabit,Hamazi,Hamoukar,Haradum,Harbidum,Harran,Harranu,Hassuna,Hatarikka,Hatra,Hissar,Hiyawa,Hormirzad,Ida-Maras,Idamaraz,Idu,Imerishu,Imgur-Enlil,Irisagrig,Irnina,Irridu,Isin,Issinnitum,Iturungal,Izubitum,Jarmo,Jemdet,Kabnak,Kadesh,Kahat,Kalhu,Kar-Shulmanu-Asharedu,Kar-Tukulti-Ninurta,Kar-Šulmānu-ašarēdu,Karana,Karatepe,Kartukulti,Kazallu,Kesh,Kidsha,Kinza,Kish,Kisiga,Kisurra,Kuara,Kurda,Kurruhanni,Kutha,Lagaba,Lagash,Larak,Larsa,Leilan,Malgium,Marad,Mardaman,Mari,Marlik,Mashkan,Mashkan-shapir,Matutem,Me-Turan,Meliddu,Mumbaqat,Nabada,Nagar,Nanagugal,Nerebtum,Nigin,Nimrud,Nina,Nineveh,Ninua,Nippur,Niru,Niya,Nuhashe,Nuhasse,Nuzi,Puzrish-Dagan,Qalatjarmo,Qatara,Qatna,Qattunan,Qidshu,Rapiqum,Rawda,Sagaz,Shaduppum,Shaggaratum,Shalbatu,Shanidar,Sharrukin,Shawwan,Shehna,Shekhna,Shemshara,Shibaniba,Shubat-Enlil,Shurkutir,Shuruppak,Shusharra,Shushin,Sikan,Sippar,Sippar-Amnanum,Sippar-sha-Annunitum,Subatum,Susuka,Tadmor,Tarbisu,Telul,Terqa,Tirazish,Tisbon,Tuba,Tushhan,Tuttul,Tutub,Ubaid,Umma,Ur,Urah,Urbilum,Urkesh,Ursa'um,Uruk,Urum,Uzarlulu,Warka,Washukanni,Zabalam,Zarri-Amnan"},
       {name: "Iranian", i: 24, min: 5, max: 11, d: "", m: .1, b: "Abali,Abrisham,Absard,Abuzeydabad,Afus,Alavicheh,Alikosh,Amol,Anarak,Anbar,Andisheh,Anshan,Aran,Ardabil,Arderica,Ardestan,Arjomand,Asgaran,Asgharabad,Ashian,Awan,Babajan,Badrud,Bafran,Baghestan,Baghshad,Bahadoran,Baharan Shahr,Baharestan,Bakun,Bam,Baqershahr,Barzok,Bastam,Behistun,Bitistar,Bumahen,Bushehr,Chadegan,Chahardangeh,Chamgardan,Chermahin,Choghabonut,Chugan,Damaneh,Damavand,Darabgard,Daran,Dastgerd,Dehaq,Dehaqan,Dezful,Dizicheh,Dorcheh,Dowlatabad,Duruntash,Ecbatana,Eslamshahr,Estakhr,Ezhiyeh,Falavarjan,Farrokhi,Fasham,Ferdowsieh,Fereydunshahr,Ferunabad,Firuzkuh,Fuladshahr,Ganjdareh,Ganzak,Gaz,Geoy,Godin,Goldasht,Golestan,Golpayegan,Golshahr,Golshan,Gorgab,Guged,Habibabad,Hafshejan,Hajjifiruz,Hana,Harand,Hasanabad,Hasanlu,Hashtgerd,Hecatompylos,Hormirzad,Imanshahr,Isfahan,Jandaq,Javadabad,Jiroft,Jowsheqan ,Jowzdan,Kabnak,Kahrizak,Kahriz Sang,Kangavar,Karaj,Karkevand,Kashan,Kelishad,Kermanshah,Khaledabad,Khansar,Khorramabad,Khur,Khvorzuq,Kilan,Komeh,Komeshcheh,Konar,Kuhpayeh,Kul,Kushk,Lavasan,Laybid,Liyan,Lyan,Mahabad,Mahallat,Majlesi,Malard,Manzariyeh,Marlik,Meshkat,Meymeh,Miandasht,Mish,Mobarakeh,Nahavand,Nain,Najafabad,Naqshe,Narezzash,Nasimshahr,Nasirshahr,Nasrabad,Natanz,Neyasar,Nikabad,Nimvar,Nushabad,Pakdasht,Parand,Pardis,Parsa,Pasargadai,Patigrabana,Pir Bakran,Pishva,Qahderijan,Qahjaverestan,Qamsar,Qarchak,Qods,Rabat,Ray-shahr,Rezvanshahr,Rhages,Robat Karim,Rozveh,Rudehen,Sabashahr,Safadasht,Sagzi,Salehieh,Sandal,Sarvestan,Sedeh,Sefidshahr,Semirom,Semnan,Shadpurabad,Shah,Shahdad,Shahedshahr,Shahin,Shahpour,Shahr,Shahreza,Shahriar,Sharifabad,Shemshak,Shiraz,Shushan,Shushtar,Sialk,Sin,Sukhteh,Tabas,Tabriz,Takhte,Talkhuncheh,Talli,Tarq,Temukan,Tepe,Tiran,Tudeshk,Tureng,Urmia,Vahidieh,Vahrkana,Vanak,Varamin,Varnamkhast,Varzaneh,Vazvan,Yahya,Yarim,Yasuj,Zarrin Shahr,Zavareh,Zayandeh,Zazeran,Ziar,Zibashahr,Zranka"},
       {name: "Hawaiian", i: 25, min: 5, max: 10, d: "auo", m: 1, b: "Aapueo,Ahoa,Ahuakaio,Ahupau,Alaakua,Alae,Alaeloa,Alamihi,Aleamai,Alena,Alio,Aupokopoko,Halakaa,Haleu,Haliimaile,Hamoa,Hanakaoo,Hanaulu,Hanawana,Hanehoi,Haou,Hikiaupea,Hokuula,Honohina,Honokahua,Honokeana,Honokohau,Honolulu,Honomaele,Hononana,Honopou,Hoolawa,Huelo,Kaalaea,Kaapahu,Kaeo,Kahalehili,Kahana,Kahuai,Kailua,Kainehe,Kakalahale,Kakanoni,Kalenanui,Kaleoaihe,Kalialinui,Kalihi,Kalimaohe,Kaloi,Kamani,Kamehame,Kanahena,Kaniaula,Kaonoulu,Kapaloa,Kapohue,Kapuaikini,Kapunakea,Kauau,Kaulalo,Kaulanamoa,Kauluohana,Kaumakani,Kaumanu,Kaunauhane,Kaupakulua,Kawaloa,Keaa,Keaaula,Keahua,Keahuapono,Kealahou,Keanae,Keauhou,Kelawea,Keokea,Keopuka,Kikoo,Kipapa,Koakupuna,Koali,Kolokolo,Kopili,Kou,Kualapa,Kuhiwa,Kuholilea,Kuhua,Kuia,Kuikui,Kukoae,Kukohia,Kukuiaeo,Kukuipuka,Kukuiula,Kulahuhu,Lapakea,Lapueo,Launiupoko,Lole,Maalo,Mahinahina,Mailepai,Makaakini,Makaalae,Makaehu,Makaiwa,Makaliua,Makapipi,Makapuu,Maluaka,Manawainui,Mehamenui,Moalii,Moanui,Mohopili,Mokae,Mokuia,Mokupapa,Mooiki,Mooloa,Moomuku,Muolea,Nakaaha,Nakalepo,Nakaohu,Nakapehu,Nakula,Napili,Niniau,Nuu,Oloewa,Olowalu,Omaopio,Onau,Onouli,Opaeula,Opana,Opikoula,Paakea,Paeahu,Paehala,Paeohi,Pahoa,Paia,Pakakia,Palauea,Palemo,Paniau,Papaaea,Papaanui,Papaauhau,Papaka,Papauluana,Pauku,Paunau,Pauwalu,Pauwela,Pohakanele,Polaiki,Polanui,Polapola,Poopoo,Poponui,Poupouwela,Puahoowali,Puakea,Puako,Pualaea,Puehuehu,Pueokauiki,Pukaauhuhu,Pukuilua,Pulehu,Puolua,Puou,Puuhaehae,Puuiki,Puuki,Puulani,Puunau,Puuomaile,Uaoa,Uhao,Ukumehame,Ulaino,Ulumalu,Wahikuli,Waianae,Waianu,Waiawa,Waiehu,Waieli,Waikapu,Wailamoa,Wailaulau,Wainee,Waiohole,Waiohonu,Waiohuli,Waiokama,Waiokila,Waiopai,Waiopua,Waipao,Waipionui,Waipouli"},
       {name: "Karnataka", i: 26, min: 5, max: 11, d: "tnl", m: 0, b: "Adityapatna,Adyar,Afzalpur,Aland,Alnavar,Alur,Ambikanagara,Anekal,Ankola,Annigeri,Arkalgud,Arsikere,Athni,Aurad,Badami,Bagalkot,Bagepalli,Bail,Bajpe,Bangalore,Bangarapet,Bankapura,Bannur,Bantval,Basavakalyan,Basavana,Belgaum,Beltangadi,Belur,Bhadravati,Bhalki,Bhatkal,Bhimarayanagudi,Bidar,Bijapur,Bilgi,Birur,Bommasandra,Byadgi,Challakere,Chamarajanagar,Channagiri,Channapatna,Channarayapatna,Chik,Chikmagalur,Chiknayakanhalli,Chikodi,Chincholi,Chintamani,Chitapur,Chitgoppa,Chitradurga,Dandeli,Dargajogihalli,Devadurga,Devanahalli,Dod,Donimalai,Gadag,Gajendragarh,Gangawati,Gauribidanur,Gokak,Gonikoppal,Gubbi,Gudibanda,Gulbarga,Guledgudda,Gundlupet,Gurmatkal,Haliyal,Hangal,Harapanahalli,Harihar,Hassan,Hatti,Haveri,Hebbagodi,Heggadadevankote,Hirekerur,Holalkere,Hole,Homnabad,Honavar,Honnali,Hoovina,Hosakote,Hosanagara,Hosdurga,Hospet,Hubli,Hukeri,Hungund,Hunsur,Ilkal,Indi,Jagalur,Jamkhandi,Jevargi,Jog,Kadigenahalli,Kadur,Kalghatgi,Kamalapuram,Kampli,Kanakapura,Karkal,Karwar,Khanapur,Kodiyal,Kolar,Kollegal,Konnur,Koppa,Koppal,Koratagere,Kotturu,Krishnarajanagara,Krishnarajasagara,Krishnarajpet,Kudchi,Kudligi,Kudremukh,Kumta,Kundapura,Kundgol,Kunigal,Kurgunta,Kushalnagar,Kushtagi,Lakshmeshwar,Lingsugur,Londa,Maddur,Madhugiri,Madikeri,Mahalingpur,Malavalli,Mallar,Malur,Mandya,Mangalore,Manvi,Molakalmuru,Mudalgi,Mudbidri,Muddebihal,Mudgal,Mudhol,Mudigere,Mulbagal,Mulgund,Mulki,Mulur,Mundargi,Mundgod,Munirabad,Mysore,Nagamangala,Nanjangud,Narasimharajapura,Naregal,Nargund,Navalgund,Nipani,Pandavapura,Pavagada,Piriyapatna,Pudu,Puttur,Rabkavi,Raichur,Ramanagaram,Ramdurg,Ranibennur,Raybag,Robertson,Ron,Sadalgi,Sagar,Sakleshpur,Saligram,Sandur,Sankeshwar,Saundatti,Savanur,Sedam,Shahabad,Shahpur,Shaktinagar,Shiggaon,Shikarpur,Shirhatti,Shorapur,Shrirangapattana,Siddapur,Sidlaghatta,Sindgi,Sindhnur,Sira,Siralkoppa,Sirsi,Siruguppa,Somvarpet,Sorab,Sringeri,Srinivaspur,Sulya,Talikota,Tarikere,Tekkalakote,Terdal,Thumbe,Tiptur,Tirthahalli,Tirumakudal,Tumkur,Turuvekere,Udupi,Vijayapura,Wadi,Yadgir,Yelandur,Yelbarga,Yellapur,Yenagudde"},
diff --git a/modules/provinces-generator.js b/modules/provinces-generator.js
deleted file mode 100644
index c0f8e8f7..00000000
--- a/modules/provinces-generator.js
+++ /dev/null
@@ -1,257 +0,0 @@
-"use strict";
-
-window.Provinces = (function () {
-  const forms = {
-    Monarchy: {County: 22, Earldom: 6, Shire: 2, Landgrave: 2, Margrave: 2, Barony: 2, Captaincy: 1, Seneschalty: 1},
-    Republic: {Province: 6, Department: 2, Governorate: 2, District: 1, Canton: 1, Prefecture: 1},
-    Theocracy: {Parish: 3, Deanery: 1},
-    Union: {Province: 1, State: 1, Canton: 1, Republic: 1, County: 1, Council: 1},
-    Anarchy: {Council: 1, Commune: 1, Community: 1, Tribe: 1},
-    Wild: {Territory: 10, Land: 5, Region: 2, Tribe: 1, Clan: 1, Dependency: 1, Area: 1}
-  };
-
-  const generate = (regenerate = false, regenerateLockedStates = false) => {
-    TIME && console.time("generateProvinces");
-    const localSeed = regenerate ? generateSeed() : seed;
-    Math.random = aleaPRNG(localSeed);
-
-    const {cells, states, burgs} = pack;
-    const provinces = [0]; // 0 index is reserved for "no province"
-    const provinceIds = new Uint16Array(cells.i.length);
-
-    const isProvinceLocked = province => province.lock || (!regenerateLockedStates && states[province.state]?.lock);
-    const isProvinceCellLocked = cell => provinceIds[cell] && isProvinceLocked(provinces[provinceIds[cell]]);
-
-    if (regenerate) {
-      pack.provinces.forEach(province => {
-        if (!province.i || province.removed || !isProvinceLocked(province)) return;
-
-        const newId = provinces.length;
-        for (const i of cells.i) {
-          if (cells.province[i] === province.i) provinceIds[i] = newId;
-        }
-
-        province.i = newId;
-        provinces.push(province);
-      });
-    }
-
-    const provincesRatio = +byId("provincesRatio").value;
-    const max = provincesRatio == 100 ? 1000 : gauss(20, 5, 5, 100) * provincesRatio ** 0.5; // max growth
-
-    // generate provinces for selected burgs
-    states.forEach(s => {
-      s.provinces = [];
-      if (!s.i || s.removed) return;
-      if (provinces.length) s.provinces = provinces.filter(p => p.state === s.i).map(p => p.i); // locked provinces ids
-      if (s.lock && !regenerateLockedStates) return; // don't regenerate provinces of a locked state
-
-      const stateBurgs = burgs
-        .filter(b => b.state === s.i && !b.removed && !provinceIds[b.cell])
-        .sort((a, b) => b.population * gauss(1, 0.2, 0.5, 1.5, 3) - a.population)
-        .sort((a, b) => b.capital - a.capital);
-      if (stateBurgs.length < 2) return; // at least 2 provinces are required
-      const provincesNumber = Math.max(Math.ceil((stateBurgs.length * provincesRatio) / 100), 2);
-
-      const form = Object.assign({}, forms[s.form]);
-
-      for (let i = 0; i < provincesNumber; i++) {
-        const provinceId = provinces.length;
-        const center = stateBurgs[i].cell;
-        const burg = stateBurgs[i].i;
-        const c = stateBurgs[i].culture;
-        const nameByBurg = P(0.5);
-        const name = nameByBurg ? stateBurgs[i].name : Names.getState(Names.getCultureShort(c), c);
-        const formName = rw(form);
-        form[formName] += 10;
-        const fullName = name + " " + formName;
-        const color = getMixedColor(s.color);
-        const kinship = nameByBurg ? 0.8 : 0.4;
-        const type = BurgsAndStates.getType(center, burg.port);
-        const coa = COA.generate(stateBurgs[i].coa, kinship, null, type);
-        coa.shield = COA.getShield(c, s.i);
-
-        s.provinces.push(provinceId);
-        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
-      }
-    });
-
-    // expand generated provinces
-    const queue = new FlatQueue();
-    const cost = [];
-
-    provinces.forEach(p => {
-      if (!p.i || p.removed || isProvinceLocked(p)) return;
-      provinceIds[p.center] = p.i;
-      queue.push({e: p.center, province: p.i, state: p.state, p: 0}, 0);
-      cost[p.center] = 1;
-    });
-
-    while (queue.length) {
-      const {e, p, province, state} = queue.pop();
-
-      cells.c[e].forEach(e => {
-        if (isProvinceCellLocked(e)) return; // do not overwrite cell of locked provinces
-
-        const land = cells.h[e] >= 20;
-        if (!land && !cells.t[e]) return; // cannot pass deep ocean
-        if (land && cells.state[e] !== state) return;
-        const evevation = cells.h[e] >= 70 ? 100 : cells.h[e] >= 50 ? 30 : cells.h[e] >= 20 ? 10 : 100;
-        const totalCost = p + evevation;
-
-        if (totalCost > max) return;
-        if (!cost[e] || totalCost < cost[e]) {
-          if (land) provinceIds[e] = province; // assign province to a cell
-          cost[e] = totalCost;
-          queue.push({e, province, state, p: totalCost}, totalCost);
-        }
-      });
-    }
-
-    // justify provinces shapes a bit
-    for (const i of cells.i) {
-      if (cells.burg[i]) continue; // do not overwrite burgs
-      if (isProvinceCellLocked(i)) continue; // do not overwrite cell of locked provinces
-
-      const neibs = cells.c[i]
-        .filter(c => cells.state[c] === cells.state[i] && !isProvinceCellLocked(c))
-        .map(c => provinceIds[c]);
-      const adversaries = neibs.filter(c => c !== provinceIds[i]);
-      if (adversaries.length < 2) continue;
-
-      const buddies = neibs.filter(c => c === provinceIds[i]).length;
-      if (buddies.length > 2) continue;
-
-      const competitors = adversaries.map(p => adversaries.reduce((s, v) => (v === p ? s + 1 : s), 0));
-      const max = d3.max(competitors);
-      if (buddies >= max) continue;
-
-      provinceIds[i] = adversaries[competitors.indexOf(max)];
-    }
-
-    // add "wild" provinces if some cells don't have a province assigned
-    const noProvince = Array.from(cells.i).filter(i => cells.state[i] && !provinceIds[i]); // cells without province assigned
-    states.forEach(s => {
-      if (!s.i || s.removed) return;
-      if (s.lock && !regenerateLockedStates) return;
-      if (!s.provinces.length) return;
-
-      const coreProvinceNames = s.provinces.map(p => provinces[p]?.name);
-      const colonyNamePool = [s.name, ...coreProvinceNames].filter(name => name && !/new/i.test(name));
-      const getColonyName = () => {
-        if (colonyNamePool.length < 1) return null;
-
-        const index = rand(colonyNamePool.length - 1);
-        const spliced = colonyNamePool.splice(index, 1);
-        return spliced[0] ? `New ${spliced[0]}` : null;
-      };
-
-      let stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
-      while (stateNoProvince.length) {
-        // add new province
-        const provinceId = provinces.length;
-        const burgCell = stateNoProvince.find(i => cells.burg[i]);
-        const center = burgCell ? burgCell : stateNoProvince[0];
-        const burg = burgCell ? cells.burg[burgCell] : 0;
-        provinceIds[center] = provinceId;
-
-        // expand province
-        const cost = [];
-        cost[center] = 1;
-        queue.push({e: center, p: 0}, 0);
-        while (queue.length) {
-          const {e, p} = queue.pop();
-
-          cells.c[e].forEach(nextCellId => {
-            if (provinceIds[nextCellId]) return;
-            const land = cells.h[nextCellId] >= 20;
-            if (cells.state[nextCellId] && cells.state[nextCellId] !== s.i) return;
-            const ter = land ? (cells.state[nextCellId] === s.i ? 3 : 20) : cells.t[nextCellId] ? 10 : 30;
-            const totalCost = p + ter;
-
-            if (totalCost > max) return;
-            if (!cost[nextCellId] || totalCost < cost[nextCellId]) {
-              if (land && cells.state[nextCellId] === s.i) provinceIds[nextCellId] = provinceId; // assign province to a cell
-              cost[nextCellId] = totalCost;
-              queue.push({e: nextCellId, p: totalCost}, totalCost);
-            }
-          });
-        }
-
-        // generate "wild" province name
-        const c = cells.culture[center];
-        const f = pack.features[cells.f[center]];
-        const color = getMixedColor(s.color);
-
-        const provCells = stateNoProvince.filter(i => provinceIds[i] === provinceId);
-        const singleIsle = provCells.length === f.cells && !provCells.find(i => cells.f[i] !== f.i);
-        const isleGroup = !singleIsle && !provCells.find(i => pack.features[cells.f[i]].group !== "isle");
-        const colony = !singleIsle && !isleGroup && P(0.5) && !isPassable(s.center, center);
-
-        const name = (() => {
-          const colonyName = colony && P(0.8) && getColonyName();
-          if (colonyName) return colonyName;
-          if (burgCell && P(0.5)) return burgs[burg].name;
-          return Names.getState(Names.getCultureShort(c), c);
-        })();
-
-        const formName = (() => {
-          if (singleIsle) return "Island";
-          if (isleGroup) return "Islands";
-          if (colony) return "Colony";
-          return rw(forms["Wild"]);
-        })();
-
-        const fullName = name + " " + formName;
-
-        const dominion = colony ? P(0.95) : singleIsle || isleGroup ? P(0.7) : P(0.3);
-        const kinship = dominion ? 0 : 0.4;
-        const type = BurgsAndStates.getType(center, burgs[burg]?.port);
-        const coa = COA.generate(s.coa, kinship, dominion, type);
-        coa.shield = COA.getShield(c, s.i);
-
-        provinces.push({i: provinceId, state: s.i, center, burg, name, formName, fullName, color, coa});
-        s.provinces.push(provinceId);
-
-        // check if there is a land way within the same state between two cells
-        function isPassable(from, to) {
-          if (cells.f[from] !== cells.f[to]) return false; // on different islands
-          const passableQueue = [from],
-            used = new Uint8Array(cells.i.length),
-            state = cells.state[from];
-          while (passableQueue.length) {
-            const current = passableQueue.pop();
-            if (current === to) return true; // way is found
-            cells.c[current].forEach(c => {
-              if (used[c] || cells.h[c] < 20 || cells.state[c] !== state) return;
-              passableQueue.push(c);
-              used[c] = 1;
-            });
-          }
-          return false; // way is not found
-        }
-
-        // re-check
-        stateNoProvince = noProvince.filter(i => cells.state[i] === s.i && !provinceIds[i]);
-      }
-    });
-
-    cells.province = provinceIds;
-    pack.provinces = provinces;
-
-    TIME && console.timeEnd("generateProvinces");
-  };
-
-  // calculate pole of inaccessibility for each province
-  const getPoles = () => {
-    const getType = cellId => pack.cells.province[cellId];
-    const poles = getPolesOfInaccessibility(pack, getType);
-
-    pack.provinces.forEach(province => {
-      if (!province.i || province.removed) return;
-      province.pole = poles[province.i] || [0, 0];
-    });
-  };
-
-  return {generate, getPoles};
-})();
diff --git a/modules/relief-icons.js b/modules/relief-icons.js
new file mode 100644
index 00000000..498886df
--- /dev/null
+++ b/modules/relief-icons.js
@@ -0,0 +1,128 @@
+"use strict";
+
+window.ReliefIcons = (function () {
+  const ReliefIcons = function () {
+    TIME && console.time("drawRelief");
+    terrain.selectAll("*").remove();
+
+    const cells = pack.cells;
+    const density = terrain.attr("density") || 0.4;
+    const size = 2 * (terrain.attr("size") || 1);
+    const mod = 0.2 * size; // size modifier
+    const relief = [];
+
+    for (const i of cells.i) {
+      const height = cells.h[i];
+      if (height < 20) continue; // no icons on water
+      if (cells.r[i]) continue; // no icons on rivers
+      const biome = cells.biome[i];
+      if (height < 50 && biomesData.iconsDensity[biome] === 0) continue; // no icons for this biome
+
+      const polygon = getPackPolygon(i);
+      const [minX, maxX] = d3.extent(polygon, p => p[0]);
+      const [minY, maxY] = d3.extent(polygon, p => p[1]);
+
+      if (height < 50) placeBiomeIcons(i, biome);
+      else placeReliefIcons(i);
+
+      function placeBiomeIcons() {
+        const iconsDensity = biomesData.iconsDensity[biome] / 100;
+        const radius = 2 / iconsDensity / density;
+        if (Math.random() > iconsDensity * 10) return;
+
+        for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
+          if (!d3.polygonContains(polygon, [cx, cy])) continue;
+          let h = (4 + Math.random()) * size;
+          const icon = getBiomeIcon(i, biomesData.icons[biome]);
+          if (icon === "#relief-grass-1") h *= 1.2;
+          relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
+        }
+      }
+
+      function placeReliefIcons(i) {
+        const radius = 2 / density;
+        const [icon, h] = getReliefIcon(i, height);
+
+        for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
+          if (!d3.polygonContains(polygon, [cx, cy])) continue;
+          relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
+        }
+      }
+
+      function getReliefIcon(i, h) {
+        const temp = grid.cells.temp[pack.cells.g[i]];
+        const type = h > 70 && temp < 0 ? "mountSnow" : h > 70 ? "mount" : "hill";
+        const size = h > 70 ? (h - 45) * mod : minmax((h - 40) * mod, 3, 6);
+        return [getIcon(type), size];
+      }
+    }
+
+    // sort relief icons by y+size
+    relief.sort((a, b) => a.y + a.s - (b.y + b.s));
+
+    let reliefHTML = "";
+    for (const r of relief) {
+      reliefHTML += `<use href="${r.i}" x="${r.x}" y="${r.y}" width="${r.s}" height="${r.s}"/>`;
+    }
+    terrain.html(reliefHTML);
+
+    TIME && console.timeEnd("drawRelief");
+  };
+
+  function getBiomeIcon(i, b) {
+    let type = b[Math.floor(Math.random() * b.length)];
+    const temp = grid.cells.temp[pack.cells.g[i]];
+    if (type === "conifer" && temp < 0) type = "coniferSnow";
+    return getIcon(type);
+  }
+
+  function getVariant(type) {
+    switch (type) {
+      case "mount":
+        return rand(2, 7);
+      case "mountSnow":
+        return rand(1, 6);
+      case "hill":
+        return rand(2, 5);
+      case "conifer":
+        return 2;
+      case "coniferSnow":
+        return 1;
+      case "swamp":
+        return rand(2, 3);
+      case "cactus":
+        return rand(1, 3);
+      case "deadTree":
+        return rand(1, 2);
+      default:
+        return 2;
+    }
+  }
+
+  function getOldIcon(type) {
+    switch (type) {
+      case "mountSnow":
+        return "mount";
+      case "vulcan":
+        return "mount";
+      case "coniferSnow":
+        return "conifer";
+      case "cactus":
+        return "dune";
+      case "deadTree":
+        return "dune";
+      default:
+        return type;
+    }
+  }
+
+  function getIcon(type) {
+    const set = terrain.attr("set") || "simple";
+    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
+    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
+    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
+    return "#relief-" + getOldIcon(type) + "-1"; // simple
+  }
+
+  return ReliefIcons;
+})();
diff --git a/modules/religions-generator.js b/modules/religions-generator.js
index 2bb972db..ca60466b 100644
--- a/modules/religions-generator.js
+++ b/modules/religions-generator.js
@@ -457,7 +457,7 @@ window.Religions = (function () {
     const lockedReligions = pack.religions?.filter(r => r.i && r.lock && !r.removed) || [];
 
     const folkReligions = generateFolkReligions();
-    const organizedReligions = generateOrganizedReligions(+religionsNumber.value, lockedReligions);
+    const organizedReligions = generateOrganizedReligions(+religionsInput.value, lockedReligions);
 
     const namedReligions = specifyReligions([...folkReligions, ...organizedReligions]);
     const indexedReligions = combineReligions(namedReligions, lockedReligions);
@@ -695,24 +695,23 @@ window.Religions = (function () {
     const {cells, routes} = pack;
     const religionIds = spreadFolkReligions(religions);
 
-    const queue = new FlatQueue();
+    const queue = new PriorityQueue({comparator: (a, b) => a.p - b.p});
     const cost = [];
 
-    // limit cost for organized religions growth
-    const maxExpansionCost = (cells.i.length / 20) * byId("growthRate").valueAsNumber;
+    const maxExpansionCost = (cells.i.length / 20) * neutralInput.value; // limit cost for organized religions growth
 
     religions
       .filter(r => r.i && !r.lock && r.type !== "Folk" && !r.removed)
       .forEach(r => {
         religionIds[r.center] = r.i;
-        queue.push({e: r.center, p: 0, r: r.i, s: cells.state[r.center]}, 0);
+        queue.queue({e: r.center, p: 0, r: r.i, s: cells.state[r.center]});
         cost[r.center] = 1;
       });
 
     const religionsMap = new Map(religions.map(r => [r.i, r]));
 
     while (queue.length) {
-      const {e: cellId, p, r, s: state} = queue.pop();
+      const {e: cellId, p, r, s: state} = queue.dequeue();
       const {culture, expansion, expansionism} = religionsMap.get(r);
 
       cells.c[cellId].forEach(nextCell => {
@@ -732,7 +731,7 @@ window.Religions = (function () {
           if (cells.culture[nextCell]) religionIds[nextCell] = r; // assign religion to cell
           cost[nextCell] = totalCost;
 
-          queue.push({e: nextCell, p: totalCost, r, s: state}, totalCost);
+          queue.queue({e: nextCell, p: totalCost, r, s: state});
         }
       });
     }
diff --git a/modules/renderers/draw-borders.js b/modules/renderers/draw-borders.js
deleted file mode 100644
index f0f3006e..00000000
--- a/modules/renderers/draw-borders.js
+++ /dev/null
@@ -1,120 +0,0 @@
-"use strict";
-
-function drawBorders() {
-  TIME && console.time("drawBorders");
-  const {cells, vertices} = pack;
-
-  const statePath = [];
-  const provincePath = [];
-  const checked = {};
-
-  const isLand = cellId => cells.h[cellId] >= 20;
-
-  for (let cellId = 0; cellId < cells.i.length; cellId++) {
-    if (!cells.state[cellId]) continue;
-    const provinceId = cells.province[cellId];
-    const stateId = cells.state[cellId];
-
-    // bordering cell of another province
-    if (provinceId) {
-      const provToCell = cells.c[cellId].find(neibId => {
-        const neibProvinceId = cells.province[neibId];
-        return (
-          neibProvinceId &&
-          provinceId > neibProvinceId &&
-          !checked[`prov-${provinceId}-${neibProvinceId}-${cellId}`] &&
-          cells.state[neibId] === stateId
-        );
-      });
-
-      if (provToCell !== undefined) {
-        const addToChecked = cellId => (checked[`prov-${provinceId}-${cells.province[provToCell]}-${cellId}`] = true);
-        const border = getBorder({type: "province", fromCell: cellId, toCell: provToCell, addToChecked});
-
-        if (border) {
-          provincePath.push(border);
-          cellId--; // check the same cell again
-          continue;
-        }
-      }
-    }
-
-    // if cell is on state border
-    const stateToCell = cells.c[cellId].find(neibId => {
-      const neibStateId = cells.state[neibId];
-      return isLand(neibId) && stateId > neibStateId && !checked[`state-${stateId}-${neibStateId}-${cellId}`];
-    });
-
-    if (stateToCell !== undefined) {
-      const addToChecked = cellId => (checked[`state-${stateId}-${cells.state[stateToCell]}-${cellId}`] = true);
-      const border = getBorder({type: "state", fromCell: cellId, toCell: stateToCell, addToChecked});
-
-      if (border) {
-        statePath.push(border);
-        cellId--; // check the same cell again
-        continue;
-      }
-    }
-  }
-
-  svg.select("#borders").selectAll("path").remove();
-  svg.select("#stateBorders").append("path").attr("d", statePath.join(" "));
-  svg.select("#provinceBorders").append("path").attr("d", provincePath.join(" "));
-
-  function getBorder({type, fromCell, toCell, addToChecked}) {
-    const getType = cellId => cells[type][cellId];
-    const isTypeFrom = cellId => cellId < cells.i.length && getType(cellId) === getType(fromCell);
-    const isTypeTo = cellId => cellId < cells.i.length && getType(cellId) === getType(toCell);
-
-    addToChecked(fromCell);
-    const startingVertex = cells.v[fromCell].find(v => vertices.c[v].some(i => isLand(i) && isTypeTo(i)));
-    if (startingVertex === undefined) return null;
-
-    const checkVertex = vertex =>
-      vertices.c[vertex].some(isTypeFrom) && vertices.c[vertex].some(c => isLand(c) && isTypeTo(c));
-    const chain = getVerticesLine({vertices, startingVertex, checkCell: isTypeFrom, checkVertex, addToChecked});
-    if (chain.length > 1) return "M" + chain.map(cellId => vertices.p[cellId]).join(" ");
-
-    return null;
-  }
-
-  // connect vertices to chain to form a border
-  function getVerticesLine({vertices, startingVertex, checkCell, checkVertex, addToChecked}) {
-    let chain = []; // vertices chain to form a path
-    let next = startingVertex;
-    const MAX_ITERATIONS = vertices.c.length;
-
-    for (let run = 0; run < 2; run++) {
-      // first run: from any vertex to a border edge
-      // second run: from found border edge to another edge
-      chain = [];
-
-      for (let i = 0; i < MAX_ITERATIONS; i++) {
-        const previous = chain.at(-1);
-        const current = next;
-        chain.push(current);
-
-        const neibCells = vertices.c[current];
-        neibCells.map(addToChecked);
-
-        const [c1, c2, c3] = neibCells.map(checkCell);
-        const [v1, v2, v3] = vertices.v[current].map(checkVertex);
-        const [vertex1, vertex2, vertex3] = vertices.v[current];
-
-        if (v1 && vertex1 !== previous && c1 !== c2) next = vertex1;
-        else if (v2 && vertex2 !== previous && c2 !== c3) next = vertex2;
-        else if (v3 && vertex3 !== previous && c1 !== c3) next = vertex3;
-
-        if (next === current || next === startingVertex) {
-          if (next === startingVertex) chain.push(startingVertex);
-          startingVertex = next;
-          break;
-        }
-      }
-    }
-
-    return chain;
-  }
-
-  TIME && console.timeEnd("drawBorders");
-}
diff --git a/modules/renderers/draw-burg-icons.js b/modules/renderers/draw-burg-icons.js
deleted file mode 100644
index 8e11bf3b..00000000
--- a/modules/renderers/draw-burg-icons.js
+++ /dev/null
@@ -1,69 +0,0 @@
-"use strict";
-
-function drawBurgIcons() {
-  TIME && console.time("drawBurgIcons");
-
-  icons.selectAll("circle, use").remove(); // cleanup
-
-  // capitals
-  const capitals = pack.burgs.filter(b => b.capital && !b.removed);
-  const capitalIcons = burgIcons.select("#cities");
-  const capitalSize = capitalIcons.attr("size") || 1;
-  const capitalAnchors = anchors.selectAll("#cities");
-  const capitalAnchorsSize = capitalAnchors.attr("size") || 2;
-
-  capitalIcons
-    .selectAll("circle")
-    .data(capitals)
-    .enter()
-    .append("circle")
-    .attr("id", d => "burg" + d.i)
-    .attr("data-id", d => d.i)
-    .attr("cx", d => d.x)
-    .attr("cy", d => d.y)
-    .attr("r", capitalSize);
-
-  capitalAnchors
-    .selectAll("use")
-    .data(capitals.filter(c => c.port))
-    .enter()
-    .append("use")
-    .attr("xlink:href", "#icon-anchor")
-    .attr("data-id", d => d.i)
-    .attr("x", d => rn(d.x - capitalAnchorsSize * 0.47, 2))
-    .attr("y", d => rn(d.y - capitalAnchorsSize * 0.47, 2))
-    .attr("width", capitalAnchorsSize)
-    .attr("height", capitalAnchorsSize);
-
-  // towns
-  const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
-  const townIcons = burgIcons.select("#towns");
-  const townSize = townIcons.attr("size") || 0.5;
-  const townsAnchors = anchors.selectAll("#towns");
-  const townsAnchorsSize = townsAnchors.attr("size") || 1;
-
-  townIcons
-    .selectAll("circle")
-    .data(towns)
-    .enter()
-    .append("circle")
-    .attr("id", d => "burg" + d.i)
-    .attr("data-id", d => d.i)
-    .attr("cx", d => d.x)
-    .attr("cy", d => d.y)
-    .attr("r", townSize);
-
-  townsAnchors
-    .selectAll("use")
-    .data(towns.filter(c => c.port))
-    .enter()
-    .append("use")
-    .attr("xlink:href", "#icon-anchor")
-    .attr("data-id", d => d.i)
-    .attr("x", d => rn(d.x - townsAnchorsSize * 0.47, 2))
-    .attr("y", d => rn(d.y - townsAnchorsSize * 0.47, 2))
-    .attr("width", townsAnchorsSize)
-    .attr("height", townsAnchorsSize);
-
-  TIME && console.timeEnd("drawBurgIcons");
-}
diff --git a/modules/renderers/draw-burg-labels.js b/modules/renderers/draw-burg-labels.js
deleted file mode 100644
index 69c3956b..00000000
--- a/modules/renderers/draw-burg-labels.js
+++ /dev/null
@@ -1,41 +0,0 @@
-"use strict";
-
-function drawBurgLabels() {
-  TIME && console.time("drawBurgLabels");
-
-  burgLabels.selectAll("text").remove(); // cleanup
-
-  const capitals = pack.burgs.filter(b => b.capital && !b.removed);
-  const capitalSize = burgIcons.select("#cities").attr("size") || 1;
-  burgLabels
-    .select("#cities")
-    .selectAll("text")
-    .data(capitals)
-    .enter()
-    .append("text")
-    .attr("text-rendering", "optimizeSpeed")
-    .attr("id", d => "burgLabel" + d.i)
-    .attr("data-id", d => d.i)
-    .attr("x", d => d.x)
-    .attr("y", d => d.y)
-    .attr("dy", `${capitalSize * -1.5}px`)
-    .text(d => d.name);
-
-  const towns = pack.burgs.filter(b => b.i && !b.capital && !b.removed);
-  const townSize = burgIcons.select("#towns").attr("size") || 0.5;
-  burgLabels
-    .select("#towns")
-    .selectAll("text")
-    .data(towns)
-    .enter()
-    .append("text")
-    .attr("text-rendering", "optimizeSpeed")
-    .attr("id", d => "burgLabel" + d.i)
-    .attr("data-id", d => d.i)
-    .attr("x", d => d.x)
-    .attr("y", d => d.y)
-    .attr("dy", `${townSize * -2}px`)
-    .text(d => d.name);
-
-  TIME && console.timeEnd("drawBurgLabels");
-}
diff --git a/modules/renderers/draw-emblems.js b/modules/renderers/draw-emblems.js
deleted file mode 100644
index 13781239..00000000
--- a/modules/renderers/draw-emblems.js
+++ /dev/null
@@ -1,129 +0,0 @@
-"use strict";
-
-function drawEmblems() {
-  TIME && console.time("drawEmblems");
-  const {states, provinces, burgs} = pack;
-
-  const validStates = states.filter(s => s.i && !s.removed && s.coa && s.coa.size !== 0);
-  const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && p.coa.size !== 0);
-  const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && b.coa.size !== 0);
-
-  const getStateEmblemsSize = () => {
-    const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
-    const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
-    const sizeMod = +emblems.select("#stateEmblems").attr("data-size") || 1;
-    return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
-  };
-
-  const getProvinceEmblemsSize = () => {
-    const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
-    const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
-    const sizeMod = +emblems.select("#provinceEmblems").attr("data-size") || 1;
-    return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
-  };
-
-  const getBurgEmblemSize = () => {
-    const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
-    const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
-    const sizeMod = +emblems.select("#burgEmblems").attr("data-size") || 1;
-    return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
-  };
-
-  const sizeBurgs = getBurgEmblemSize();
-  const burgCOAs = validBurgs.map(burg => {
-    const {x, y} = burg;
-    const size = burg.coa.size || 1;
-    const shift = (sizeBurgs * size) / 2;
-    return {type: "burg", i: burg.i, x: burg.coa.x || x, y: burg.coa.y || y, size, shift};
-  });
-
-  const sizeProvinces = getProvinceEmblemsSize();
-  const provinceCOAs = validProvinces.map(province => {
-    const [x, y] = province.pole || pack.cells.p[province.center];
-    const size = province.coa.size || 1;
-    const shift = (sizeProvinces * size) / 2;
-    return {type: "province", i: province.i, x: province.coa.x || x, y: province.coa.y || y, size, shift};
-  });
-
-  const sizeStates = getStateEmblemsSize();
-  const stateCOAs = validStates.map(state => {
-    const [x, y] = state.pole || pack.cells.p[state.center];
-    const size = state.coa.size || 1;
-    const shift = (sizeStates * size) / 2;
-    return {type: "state", i: state.i, x: state.coa.x || x, y: state.coa.y || y, size, shift};
-  });
-
-  const nodes = burgCOAs.concat(provinceCOAs).concat(stateCOAs);
-  const simulation = d3
-    .forceSimulation(nodes)
-    .alphaMin(0.6)
-    .alphaDecay(0.2)
-    .velocityDecay(0.6)
-    .force(
-      "collision",
-      d3.forceCollide().radius(d => d.shift)
-    )
-    .stop();
-
-  d3.timeout(function () {
-    const n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
-    for (let i = 0; i < n; ++i) {
-      simulation.tick();
-    }
-
-    const burgNodes = nodes.filter(node => node.type === "burg");
-    const burgString = burgNodes
-      .map(
-        d =>
-          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
-            d.size
-          }em"/>`
-      )
-      .join("");
-    emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
-
-    const provinceNodes = nodes.filter(node => node.type === "province");
-    const provinceString = provinceNodes
-      .map(
-        d =>
-          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
-            d.size
-          }em"/>`
-      )
-      .join("");
-    emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
-
-    const stateNodes = nodes.filter(node => node.type === "state");
-    const stateString = stateNodes
-      .map(
-        d =>
-          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
-            d.size
-          }em"/>`
-      )
-      .join("");
-    emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
-
-    invokeActiveZooming();
-  });
-
-  TIME && console.timeEnd("drawEmblems");
-}
-
-const getDataAndType = id => {
-  if (id === "burgEmblems") return [pack.burgs, "burg"];
-  if (id === "provinceEmblems") return [pack.provinces, "province"];
-  if (id === "stateEmblems") return [pack.states, "state"];
-  throw new Error(`Unknown emblem type: ${id}`);
-};
-
-async function renderGroupCOAs(g) {
-  const [data, type] = getDataAndType(g.id);
-
-  for (let use of g.children) {
-    const i = +use.dataset.i;
-    const id = type + "COA" + i;
-    COArenderer.trigger(id, data[i].coa);
-    use.setAttribute("href", "#" + id);
-  }
-}
diff --git a/modules/renderers/draw-features.js b/modules/renderers/draw-features.js
deleted file mode 100644
index 0112a0ae..00000000
--- a/modules/renderers/draw-features.js
+++ /dev/null
@@ -1,66 +0,0 @@
-"use strict";
-
-function drawFeatures() {
-  TIME && console.time("drawFeatures");
-
-  const html = {
-    paths: [],
-    landMask: [],
-    waterMask: ['<rect x="0" y="0" width="100%" height="100%" fill="white" />'],
-    coastline: {},
-    lakes: {}
-  };
-
-  for (const feature of pack.features) {
-    if (!feature || feature.type === "ocean") continue;
-
-    html.paths.push(`<path d="${getFeaturePath(feature)}" id="feature_${feature.i}" data-f="${feature.i}"></path>`);
-
-    if (feature.type === "lake") {
-      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
-
-      const lakeGroup = feature.group || "freshwater";
-      if (!html.lakes[lakeGroup]) html.lakes[lakeGroup] = [];
-      html.lakes[lakeGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
-    } else {
-      html.landMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="white"></use>`);
-      html.waterMask.push(`<use href="#feature_${feature.i}" data-f="${feature.i}" fill="black"></use>`);
-
-      const coastlineGroup = feature.group === "lake_island" ? "lake_island" : "sea_island";
-      if (!html.coastline[coastlineGroup]) html.coastline[coastlineGroup] = [];
-      html.coastline[coastlineGroup].push(`<use href="#feature_${feature.i}" data-f="${feature.i}"></use>`);
-    }
-  }
-
-  defs.select("#featurePaths").html(html.paths.join(""));
-  defs.select("#land").html(html.landMask.join(""));
-  defs.select("#water").html(html.waterMask.join(""));
-
-  coastline.selectAll("g").each(function () {
-    const paths = html.coastline[this.id] || [];
-    d3.select(this).html(paths.join(""));
-  });
-
-  lakes.selectAll("g").each(function () {
-    const paths = html.lakes[this.id] || [];
-    d3.select(this).html(paths.join(""));
-  });
-
-  TIME && console.timeEnd("drawFeatures");
-}
-
-function getFeaturePath(feature) {
-  const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
-  if (points.some(point => point === undefined)) {
-    ERROR && console.error("Undefined point in getFeaturePath");
-    return "";
-  }
-
-  const simplifiedPoints = simplify(points, 0.3);
-  const clippedPoints = clipPoly(simplifiedPoints, 1);
-
-  const lineGen = d3.line().curve(d3.curveBasisClosed);
-  const path = round(lineGen(clippedPoints)) + "Z";
-
-  return path;
-}
diff --git a/modules/renderers/draw-heightmap.js b/modules/renderers/draw-heightmap.js
deleted file mode 100644
index cefed230..00000000
--- a/modules/renderers/draw-heightmap.js
+++ /dev/null
@@ -1,144 +0,0 @@
-"use strict";
-
-function drawHeightmap() {
-  TIME && console.time("drawHeightmap");
-
-  const ocean = terrs.select("#oceanHeights");
-  const land = terrs.select("#landHeights");
-
-  ocean.selectAll("*").remove();
-  land.selectAll("*").remove();
-
-  const paths = new Array(101);
-  const {cells, vertices} = grid;
-  const used = new Uint8Array(cells.i.length);
-  const heights = Array.from(cells.i).sort((a, b) => cells.h[a] - cells.h[b]);
-
-  // ocean cells
-  const renderOceanCells = Boolean(+ocean.attr("data-render"));
-  if (renderOceanCells) {
-    const skip = +ocean.attr("skip") + 1 || 1;
-    const relax = +ocean.attr("relax") || 0;
-    lineGen.curve(d3[ocean.attr("curve") || "curveBasisClosed"]);
-
-    let currentLayer = 0;
-    for (const i of heights) {
-      const h = cells.h[i];
-      if (h > currentLayer) currentLayer += skip;
-      if (h < currentLayer) continue;
-      if (currentLayer >= 20) break;
-      if (used[i]) continue; // already marked
-      const onborder = cells.c[i].some(n => cells.h[n] < h);
-      if (!onborder) continue;
-      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
-      const chain = connectVertices(cells, vertices, vertex, h, used);
-      if (chain.length < 3) continue;
-      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
-      if (!paths[h]) paths[h] = "";
-      paths[h] += round(lineGen(points));
-    }
-  }
-
-  // land cells
-  {
-    const skip = +land.attr("skip") + 1 || 1;
-    const relax = +land.attr("relax") || 0;
-    lineGen.curve(d3[land.attr("curve") || "curveBasisClosed"]);
-
-    let currentLayer = 20;
-    for (const i of heights) {
-      const h = cells.h[i];
-      if (h > currentLayer) currentLayer += skip;
-      if (h < currentLayer) continue;
-      if (currentLayer > 100) break; // no layers possible with height > 100
-      if (used[i]) continue; // already marked
-      const onborder = cells.c[i].some(n => cells.h[n] < h);
-      if (!onborder) continue;
-
-      const startVertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
-      const chain = connectVertices(cells, vertices, startVertex, h, used);
-      if (chain.length < 3) continue;
-
-      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
-      if (!paths[h]) paths[h] = "";
-      paths[h] += round(lineGen(points));
-    }
-  }
-
-  // render paths
-  for (const height of d3.range(0, 101)) {
-    const group = height < 20 ? ocean : land;
-    const scheme = getColorScheme(group.attr("scheme"));
-
-    if (height === 0 && renderOceanCells) {
-      // draw base ocean layer
-      group
-        .append("rect")
-        .attr("x", 0)
-        .attr("y", 0)
-        .attr("width", graphWidth)
-        .attr("height", graphHeight)
-        .attr("fill", scheme(1));
-    }
-
-    if (height === 20) {
-      // draw base land layer
-      group
-        .append("rect")
-        .attr("x", 0)
-        .attr("y", 0)
-        .attr("width", graphWidth)
-        .attr("height", graphHeight)
-        .attr("fill", scheme(0.8));
-    }
-
-    if (paths[height] && paths[height].length >= 10) {
-      const terracing = group.attr("terracing") / 10 || 0;
-      const color = getColor(height, scheme);
-
-      if (terracing) {
-        group
-          .append("path")
-          .attr("d", paths[height])
-          .attr("transform", "translate(.7,1.4)")
-          .attr("fill", d3.color(color).darker(terracing))
-          .attr("data-height", height);
-      }
-      group.append("path").attr("d", paths[height]).attr("fill", color).attr("data-height", height);
-    }
-  }
-
-  // connect vertices to chain: specific case for heightmap
-  function connectVertices(cells, vertices, start, h, used) {
-    const MAX_ITERATIONS = vertices.c.length;
-
-    const n = cells.i.length;
-    const chain = []; // vertices chain to form a path
-    for (let i = 0, current = start; i === 0 || (current !== start && i < MAX_ITERATIONS); i++) {
-      const prev = chain[chain.length - 1]; // previous vertex in chain
-      chain.push(current); // add current vertex to sequence
-      const c = vertices.c[current]; // cells adjacent to vertex
-      c.filter(c => cells.h[c] === h).forEach(c => (used[c] = 1));
-      const c0 = c[0] >= n || cells.h[c[0]] < h;
-      const c1 = c[1] >= n || cells.h[c[1]] < h;
-      const c2 = c[2] >= n || cells.h[c[2]] < h;
-      const v = vertices.v[current]; // neighboring vertices
-      if (v[0] !== prev && c0 !== c1) current = v[0];
-      else if (v[1] !== prev && c1 !== c2) current = v[1];
-      else if (v[2] !== prev && c0 !== c2) current = v[2];
-      if (current === chain[chain.length - 1]) {
-        ERROR && console.error("Next vertex is not found");
-        break;
-      }
-    }
-    return chain;
-  }
-
-  function simplifyLine(chain, simplification) {
-    if (!simplification) return chain;
-    const n = simplification + 1; // filter each nth element
-    return chain.filter((d, i) => i % n === 0);
-  }
-
-  TIME && console.timeEnd("drawHeightmap");
-}
diff --git a/modules/renderers/draw-markers.js b/modules/renderers/draw-markers.js
deleted file mode 100644
index f7466a55..00000000
--- a/modules/renderers/draw-markers.js
+++ /dev/null
@@ -1,53 +0,0 @@
-"use strict";
-
-function drawMarkers() {
-  TIME && console.time("drawMarkers");
-
-  const rescale = +markers.attr("rescale");
-  const pinned = +markers.attr("pinned");
-
-  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
-  const html = markersData.map(marker => drawMarker(marker, rescale));
-  markers.html(html.join(""));
-
-  TIME && console.timeEnd("drawMarkers");
-}
-
-// prettier-ignore
-const pinShapes = {
-  bubble: (fill, stroke) => `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`,
-  pin: (fill, stroke) => `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`,
-  square: (fill, stroke) => `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`,
-  squarish: (fill, stroke) => `<path d="m 5,5 h 20 v 20 h -6 l -4,4 -4,-4 H 5 Z" fill="${fill}" stroke="${stroke}" />`,
-  diamond: (fill, stroke) => `<path d="M 2,15 15,1 28,15 15,29 Z" fill="${fill}" stroke="${stroke}" />`,
-  hex: (fill, stroke) => `<path d="M 15,29 4.61,21 V 9 L 15,3 25.4,9 v 12 z" fill="${fill}" stroke="${stroke}" />`,
-  hexy: (fill, stroke) => `<path d="M 15,29 6,21 5,8 15,4 25,8 24,21 Z" fill="${fill}" stroke="${stroke}" />`,
-  shieldy: (fill, stroke) => `<path d="M 15,29 6,21 5,7 c 0,0 5,-3 10,-3 5,0 10,3 10,3 l -1,14 z" fill="${fill}" stroke="${stroke}" />`,
-  shield: (fill, stroke) => `<path d="M 4.6,5.2 H 25 v 6.7 A 20.3,20.4 0 0 1 15,29 20.3,20.4 0 0 1 4.6,11.9 Z" fill="${fill}" stroke="${stroke}" />`,
-  pentagon: (fill, stroke) => `<path d="M 4,16 9,4 h 12 l 5,12 -11,13 z" fill="${fill}" stroke="${stroke}" />`,
-  heptagon: (fill, stroke) => `<path d="M 15,29 6,22 4,12 10,4 h 10 l 6,8 -2,10 z" fill="${fill}" stroke="${stroke}" />`,
-  circle: (fill, stroke) => `<circle cx="15" cy="15" r="11" fill="${fill}" stroke="${stroke}" />`,
-  no: () => ""
-};
-
-const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
-  const shapeFunction = pinShapes[shape] || pinShapes.bubble;
-  return shapeFunction(fill, stroke);
-};
-
-function drawMarker(marker, rescale = 1) {
-  const {i, icon, x, y, dx = 50, dy = 50, px = 12, size = 30, pin, fill, stroke} = marker;
-  const id = `marker${i}`;
-  const zoomSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : size;
-  const viewX = rn(x - zoomSize / 2, 1);
-  const viewY = rn(y - zoomSize, 1);
-
-  const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
-
-  return /* html */ `
-    <svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}">
-      <g>${getPin(pin, fill, stroke)}</g>
-      <text x="${dx}%" y="${dy}%" font-size="${px}px" >${isExternal ? "" : icon}</text>
-      <image x="${dx / 2}%" y="${dy / 2}%" width="${px}px" height="${px}px" href="${isExternal ? icon : ""}" />
-    </svg>`;
-}
diff --git a/modules/renderers/draw-military.js b/modules/renderers/draw-military.js
deleted file mode 100644
index a332130f..00000000
--- a/modules/renderers/draw-military.js
+++ /dev/null
@@ -1,155 +0,0 @@
-"use strict";
-
-function drawMilitary() {
-  TIME && console.time("drawMilitary");
-
-  armies.selectAll("g").remove();
-  pack.states.filter(s => s.i && !s.removed).forEach(s => drawRegiments(s.military, s.i));
-
-  TIME && console.timeEnd("drawMilitary");
-}
-
-const drawRegiments = function (regiments, s) {
-  const size = +armies.attr("box-size");
-  const w = d => (d.n ? size * 4 : size * 6);
-  const h = size * 2;
-  const x = d => rn(d.x - w(d) / 2, 2);
-  const y = d => rn(d.y - size, 2);
-
-  const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
-  const darkerColor = d3.color(baseColor).darker().hex();
-  const army = armies
-    .append("g")
-    .attr("id", "army" + s)
-    .attr("fill", baseColor)
-    .attr("color", darkerColor);
-
-  const g = army
-    .selectAll("g")
-    .data(regiments)
-    .enter()
-    .append("g")
-    .attr("id", d => "regiment" + s + "-" + d.i)
-    .attr("data-name", d => d.name)
-    .attr("data-state", s)
-    .attr("data-id", d => d.i)
-    .attr("transform", d => (d.angle ? `rotate(${d.angle})` : null))
-    .attr("transform-origin", d => `${d.x}px ${d.y}px`);
-  g.append("rect")
-    .attr("x", d => x(d))
-    .attr("y", d => y(d))
-    .attr("width", d => w(d))
-    .attr("height", h);
-  g.append("text")
-    .attr("x", d => d.x)
-    .attr("y", d => d.y)
-    .attr("text-rendering", "optimizeSpeed")
-    .text(d => Military.getTotal(d));
-  g.append("rect")
-    .attr("fill", "currentColor")
-    .attr("x", d => x(d) - h)
-    .attr("y", d => y(d))
-    .attr("width", h)
-    .attr("height", h);
-  g.append("text")
-    .attr("class", "regimentIcon")
-    .attr("text-rendering", "optimizeSpeed")
-    .attr("x", d => x(d) - size)
-    .attr("y", d => d.y)
-    .text(d => (d.icon.startsWith("http") || d.icon.startsWith("data:image") ? "" : d.icon));
-  g.append("image")
-    .attr("class", "regimentImage")
-    .attr("x", d => x(d) - h)
-    .attr("y", d => y(d))
-    .attr("height", h)
-    .attr("width", h)
-    .attr("href", d => (d.icon.startsWith("http") || d.icon.startsWith("data:image") ? d.icon : ""));
-};
-
-const drawRegiment = function (reg, stateId) {
-  const size = +armies.attr("box-size");
-  const w = reg.n ? size * 4 : size * 6;
-  const h = size * 2;
-  const x1 = rn(reg.x - w / 2, 2);
-  const y1 = rn(reg.y - size, 2);
-
-  let army = armies.select("g#army" + stateId);
-  if (!army.size()) {
-    const baseColor = pack.states[stateId].color[0] === "#" ? pack.states[stateId].color : "#999";
-    const darkerColor = d3.color(baseColor).darker().hex();
-    army = armies
-      .append("g")
-      .attr("id", "army" + stateId)
-      .attr("fill", baseColor)
-      .attr("color", darkerColor);
-  }
-
-  const g = army
-    .append("g")
-    .attr("id", "regiment" + stateId + "-" + reg.i)
-    .attr("data-name", reg.name)
-    .attr("data-state", stateId)
-    .attr("data-id", reg.i)
-    .attr("transform", `rotate(${reg.angle || 0})`)
-    .attr("transform-origin", `${reg.x}px ${reg.y}px`);
-  g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
-  g.append("text")
-    .attr("x", reg.x)
-    .attr("y", reg.y)
-    .attr("text-rendering", "optimizeSpeed")
-    .text(Military.getTotal(reg));
-  g.append("rect")
-    .attr("fill", "currentColor")
-    .attr("x", x1 - h)
-    .attr("y", y1)
-    .attr("width", h)
-    .attr("height", h);
-  g.append("text")
-    .attr("class", "regimentIcon")
-    .attr("text-rendering", "optimizeSpeed")
-    .attr("x", x1 - size)
-    .attr("y", reg.y)
-    .text(reg.icon.startsWith("http") || reg.icon.startsWith("data:image") ? "" : reg.icon);
-  g.append("image")
-    .attr("class", "regimentImage")
-    .attr("x", x1 - h)
-    .attr("y", y1)
-    .attr("height", h)
-    .attr("width", h)
-    .attr("href", reg.icon.startsWith("http") || reg.icon.startsWith("data:image") ? reg.icon : "");
-};
-
-// move one regiment to another
-const moveRegiment = function (reg, x, y) {
-  const el = armies.select("g#army" + reg.state).select("g#regiment" + reg.state + "-" + reg.i);
-  if (!el.size()) return;
-
-  const duration = Math.hypot(reg.x - x, reg.y - y) * 8;
-  reg.x = x;
-  reg.y = y;
-  const size = +armies.attr("box-size");
-  const w = reg.n ? size * 4 : size * 6;
-  const h = size * 2;
-  const x1 = x => rn(x - w / 2, 2);
-  const y1 = y => rn(y - size, 2);
-
-  const move = d3.transition().duration(duration).ease(d3.easeSinInOut);
-  el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y));
-  el.select("text").transition(move).attr("x", x).attr("y", y);
-  el.selectAll("rect:nth-of-type(2)")
-    .transition(move)
-    .attr("x", x1(x) - h)
-    .attr("y", y1(y));
-  el.select(".regimentIcon")
-    .transition(move)
-    .attr("x", x1(x) - size)
-    .attr("y", y)
-    .attr("height", "6")
-    .attr("width", "6");
-  el.select(".regimentImage")
-    .transition(move)
-    .attr("x", x1(x) - h)
-    .attr("y", y1(y))
-    .attr("height", "6")
-    .attr("width", "6");
-};
diff --git a/modules/renderers/draw-relief-icons.js b/modules/renderers/draw-relief-icons.js
deleted file mode 100644
index ffa0b69c..00000000
--- a/modules/renderers/draw-relief-icons.js
+++ /dev/null
@@ -1,124 +0,0 @@
-"use strict";
-
-function drawReliefIcons() {
-  TIME && console.time("drawRelief");
-  terrain.selectAll("*").remove();
-
-  const cells = pack.cells;
-  const density = terrain.attr("density") || 0.4;
-  const size = 2 * (terrain.attr("size") || 1);
-  const mod = 0.2 * size; // size modifier
-  const relief = [];
-
-  for (const i of cells.i) {
-    const height = cells.h[i];
-    if (height < 20) continue; // no icons on water
-    if (cells.r[i]) continue; // no icons on rivers
-    const biome = cells.biome[i];
-    if (height < 50 && biomesData.iconsDensity[biome] === 0) continue; // no icons for this biome
-
-    const polygon = getPackPolygon(i);
-    const [minX, maxX] = d3.extent(polygon, p => p[0]);
-    const [minY, maxY] = d3.extent(polygon, p => p[1]);
-
-    if (height < 50) placeBiomeIcons(i, biome);
-    else placeReliefIcons(i);
-
-    function placeBiomeIcons() {
-      const iconsDensity = biomesData.iconsDensity[biome] / 100;
-      const radius = 2 / iconsDensity / density;
-      if (Math.random() > iconsDensity * 10) return;
-
-      for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
-        if (!d3.polygonContains(polygon, [cx, cy])) continue;
-        let h = (4 + Math.random()) * size;
-        const icon = getBiomeIcon(i, biomesData.icons[biome]);
-        if (icon === "#relief-grass-1") h *= 1.2;
-        relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
-      }
-    }
-
-    function placeReliefIcons(i) {
-      const radius = 2 / density;
-      const [icon, h] = getReliefIcon(i, height);
-
-      for (const [cx, cy] of poissonDiscSampler(minX, minY, maxX, maxY, radius)) {
-        if (!d3.polygonContains(polygon, [cx, cy])) continue;
-        relief.push({i: icon, x: rn(cx - h, 2), y: rn(cy - h, 2), s: rn(h * 2, 2)});
-      }
-    }
-
-    function getReliefIcon(i, h) {
-      const temp = grid.cells.temp[pack.cells.g[i]];
-      const type = h > 70 && temp < 0 ? "mountSnow" : h > 70 ? "mount" : "hill";
-      const size = h > 70 ? (h - 45) * mod : minmax((h - 40) * mod, 3, 6);
-      return [getIcon(type), size];
-    }
-  }
-
-  // sort relief icons by y+size
-  relief.sort((a, b) => a.y + a.s - (b.y + b.s));
-
-  const reliefHTML = new Array(relief.length);
-  for (const r of relief) {
-    reliefHTML.push(`<use href="${r.i}" x="${r.x}" y="${r.y}" width="${r.s}" height="${r.s}"/>`);
-  }
-  terrain.html(reliefHTML.join(""));
-
-  TIME && console.timeEnd("drawRelief");
-
-  function getBiomeIcon(i, b) {
-    let type = b[Math.floor(Math.random() * b.length)];
-    const temp = grid.cells.temp[pack.cells.g[i]];
-    if (type === "conifer" && temp < 0) type = "coniferSnow";
-    return getIcon(type);
-  }
-
-  function getVariant(type) {
-    switch (type) {
-      case "mount":
-        return rand(2, 7);
-      case "mountSnow":
-        return rand(1, 6);
-      case "hill":
-        return rand(2, 5);
-      case "conifer":
-        return 2;
-      case "coniferSnow":
-        return 1;
-      case "swamp":
-        return rand(2, 3);
-      case "cactus":
-        return rand(1, 3);
-      case "deadTree":
-        return rand(1, 2);
-      default:
-        return 2;
-    }
-  }
-
-  function getOldIcon(type) {
-    switch (type) {
-      case "mountSnow":
-        return "mount";
-      case "vulcan":
-        return "mount";
-      case "coniferSnow":
-        return "conifer";
-      case "cactus":
-        return "dune";
-      case "deadTree":
-        return "dune";
-      default:
-        return type;
-    }
-  }
-
-  function getIcon(type) {
-    const set = terrain.attr("set") || "simple";
-    if (set === "simple") return "#relief-" + getOldIcon(type) + "-1";
-    if (set === "colored") return "#relief-" + type + "-" + getVariant(type);
-    if (set === "gray") return "#relief-" + type + "-" + getVariant(type) + "-bw";
-    return "#relief-" + getOldIcon(type) + "-1"; // simple
-  }
-}
diff --git a/modules/renderers/draw-scalebar.js b/modules/renderers/draw-scalebar.js
deleted file mode 100644
index b318f0be..00000000
--- a/modules/renderers/draw-scalebar.js
+++ /dev/null
@@ -1,103 +0,0 @@
-"use strict";
-
-function drawScaleBar(scaleBar, scaleLevel) {
-  if (!scaleBar.size() || scaleBar.style("display") === "none") return;
-
-  const unit = distanceUnitInput.value;
-  const size = +scaleBar.attr("data-bar-size");
-
-  const length = getLength(scaleLevel, size);
-  scaleBar.select("#scaleBarContent").remove(); // redraw content every time
-  const content = scaleBar.append("g").attr("id", "scaleBarContent");
-
-  const lines = content.append("g");
-  lines
-    .append("line")
-    .attr("x1", 0.5)
-    .attr("y1", 0)
-    .attr("x2", length + size - 0.5)
-    .attr("y2", 0)
-    .attr("stroke-width", size)
-    .attr("stroke", "white");
-  lines
-    .append("line")
-    .attr("x1", 0)
-    .attr("y1", size)
-    .attr("x2", length + size)
-    .attr("y2", size)
-    .attr("stroke-width", size)
-    .attr("stroke", "#3d3d3d");
-  lines
-    .append("line")
-    .attr("x1", 0)
-    .attr("y1", 0)
-    .attr("x2", length + size)
-    .attr("y2", 0)
-    .attr("stroke-width", rn(size * 3, 2))
-    .attr("stroke-dasharray", size + " " + rn(length / 5 - size, 2))
-    .attr("stroke", "#3d3d3d");
-
-  const texts = content.append("g").attr("text-anchor", "middle").attr("font-family", "var(--serif)");
-  texts
-    .selectAll("text")
-    .data(d3.range(0, 6))
-    .enter()
-    .append("text")
-    .attr("text-rendering", "optimizeSpeed")
-    .attr("x", d => rn((d * length) / 5, 2))
-    .attr("y", 0)
-    .attr("dy", "-.6em")
-    .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit));
-
-  const label = scaleBar.attr("data-label");
-  if (label) {
-    texts
-      .append("text")
-      .attr("text-rendering", "optimizeSpeed")
-      .attr("x", (length + 1) / 2)
-      .attr("dy", ".6em")
-      .attr("dominant-baseline", "text-before-edge")
-      .text(label);
-  }
-
-  const scaleBarBack = scaleBar.select("#scaleBarBack");
-  if (scaleBarBack.size()) {
-    const bbox = content.node().getBBox();
-    const paddingTop = +scaleBarBack.attr("data-top") || 0;
-    const paddingLeft = +scaleBarBack.attr("data-left") || 0;
-    const paddingRight = +scaleBarBack.attr("data-right") || 0;
-    const paddingBottom = +scaleBarBack.attr("data-bottom") || 0;
-
-    scaleBar
-      .select("#scaleBarBack")
-      .attr("x", -paddingLeft)
-      .attr("y", -paddingTop)
-      .attr("width", bbox.width + paddingRight)
-      .attr("height", bbox.height + paddingBottom);
-  }
-}
-
-function getLength(scaleLevel) {
-  const init = 100;
-
-  const size = +scaleBar.attr("data-bar-size");
-  let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit
-  if (val > 900) val = rn(val, -3); // round to 1000
-  else if (val > 90) val = rn(val, -2); // round to 100
-  else if (val > 9) val = rn(val, -1); // round to 10
-  else val = rn(val); // round to 1
-  const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale
-  return length;
-}
-
-function fitScaleBar(scaleBar, fullWidth, fullHeight) {
-  if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return;
-
-  const posX = +scaleBar.attr("data-x") || 99;
-  const posY = +scaleBar.attr("data-y") || 99;
-  const bbox = scaleBar.select("rect").node().getBBox();
-
-  const x = rn((fullWidth * posX) / 100 - bbox.width + 10);
-  const y = rn((fullHeight * posY) / 100 - bbox.height + 20);
-  scaleBar.attr("transform", `translate(${x},${y})`);
-}
diff --git a/modules/renderers/draw-temperature.js b/modules/renderers/draw-temperature.js
deleted file mode 100644
index 51dc32f5..00000000
--- a/modules/renderers/draw-temperature.js
+++ /dev/null
@@ -1,104 +0,0 @@
-"use strict";
-
-function drawTemperature() {
-  TIME && console.time("drawTemperature");
-
-  temperature.selectAll("*").remove();
-  lineGen.curve(d3.curveBasisClosed);
-  const scheme = d3.scaleSequential(d3.interpolateSpectral);
-
-  const tMax = +byId("temperatureEquatorOutput").max;
-  const tMin = +byId("temperatureEquatorOutput").min;
-  const delta = tMax - tMin;
-
-  const {cells, vertices} = grid;
-  const n = cells.i.length;
-
-  const checkedCells = new Uint8Array(n);
-  const addToChecked = cellId => (checkedCells[cellId] = 1);
-
-  const min = d3.min(cells.temp);
-  const max = d3.max(cells.temp);
-  const step = Math.max(Math.round(Math.abs(min - max) / 5), 1);
-
-  const isolines = d3.range(min + step, max, step);
-  const chains = [];
-  const labels = []; // store label coordinates
-
-  for (const cellId of cells.i) {
-    const t = cells.temp[cellId];
-    if (checkedCells[cellId] || !isolines.includes(t)) continue;
-
-    const startingVertex = findStart(cellId, t);
-    if (!startingVertex) continue;
-    checkedCells[cellId] = 1;
-
-    const ofSameType = cellId => cells.temp[cellId] >= t;
-    const chain = connectVertices({vertices, startingVertex, ofSameType, addToChecked});
-    const relaxed = chain.filter((v, i) => i % 4 === 0 || vertices.c[v].some(c => c >= n));
-    if (relaxed.length < 6) continue;
-
-    const points = relaxed.map(v => vertices.p[v]);
-    chains.push([t, points]);
-    addLabel(points, t);
-  }
-
-  // min temp isoline covers all graph
-  temperature
-    .append("path")
-    .attr("d", `M0,0 h${graphWidth} v${graphHeight} h${-graphWidth} Z`)
-    .attr("fill", scheme(1 - (min - tMin) / delta))
-    .attr("stroke", "none");
-
-  for (const t of isolines) {
-    const path = chains
-      .filter(c => c[0] === t)
-      .map(c => round(lineGen(c[1])))
-      .join("");
-    if (!path) continue;
-    const fill = scheme(1 - (t - tMin) / delta),
-      stroke = d3.color(fill).darker(0.2);
-    temperature.append("path").attr("d", path).attr("fill", fill).attr("stroke", stroke);
-  }
-
-  const tempLabels = temperature.append("g").attr("id", "tempLabels").attr("fill-opacity", 1);
-  tempLabels
-    .selectAll("text")
-    .data(labels)
-    .enter()
-    .append("text")
-    .attr("x", d => d[0])
-    .attr("y", d => d[1])
-    .text(d => convertTemperature(d[2]));
-
-  // find cell with temp < isotherm and find vertex to start path detection
-  function findStart(i, t) {
-    if (cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
-    return cells.v[i][cells.c[i].findIndex(c => cells.temp[c] < t || !cells.temp[c])];
-  }
-
-  function addLabel(points, t) {
-    const xCenter = svgWidth / 2;
-
-    // add label on isoline top center
-    const tc =
-      points[d3.scan(points, (a, b) => a[1] - b[1] + (Math.abs(a[0] - xCenter) - Math.abs(b[0] - xCenter)) / 2)];
-    pushLabel(tc[0], tc[1], t);
-
-    // add label on isoline bottom center
-    if (points.length > 20) {
-      const bc =
-        points[d3.scan(points, (a, b) => b[1] - a[1] + (Math.abs(a[0] - xCenter) - Math.abs(b[0] - xCenter)) / 2)];
-      const dist2 = (tc[1] - bc[1]) ** 2 + (tc[0] - bc[0]) ** 2; // square distance between this and top point
-      if (dist2 > 100) pushLabel(bc[0], bc[1], t);
-    }
-  }
-
-  function pushLabel(x, y, t) {
-    if (x < 20 || x > svgWidth - 20) return;
-    if (y < 20 || y > svgHeight - 20) return;
-    labels.push([x, y, t]);
-  }
-
-  TIME && console.timeEnd("drawTemperature");
-}
diff --git a/modules/renderers/draw-state-labels.js b/modules/renderers/state-labels.js
similarity index 53%
rename from modules/renderers/draw-state-labels.js
rename to modules/renderers/state-labels.js
index 9586a9c1..b0cf3001 100644
--- a/modules/renderers/draw-state-labels.js
+++ b/modules/renderers/state-labels.js
@@ -2,7 +2,7 @@
 
 // list - an optional array of stateIds to regenerate
 function drawStateLabels(list) {
-  TIME && console.time("drawStateLabels");
+  console.time("drawStateLabels");
 
   // temporary make the labels visible
   const layerDisplay = labels.style("display");
@@ -14,11 +14,11 @@ function drawStateLabels(list) {
   // increase step to 15 or 30 to make it faster and more horyzontal
   // decrease step to 5 to improve accuracy
   const ANGLE_STEP = 9;
-  const angles = precalculateAngles(ANGLE_STEP);
+  const raycast = precalculateAngles(ANGLE_STEP);
 
-  const LENGTH_START = 5;
-  const LENGTH_STEP = 5;
-  const LENGTH_MAX = 300;
+  const INITIAL_DISTANCE = 10;
+  const DISTANCE_STEP = 15;
+  const MAX_ITERATIONS = 100;
 
   const labelPaths = getLabelPaths();
   const letterLength = checkExampleLetterLength();
@@ -35,27 +35,87 @@ function drawStateLabels(list) {
       if (list && !list.includes(state.i)) continue;
 
       const offset = getOffsetWidth(state.cells);
-      const maxLakeSize = state.cells / 20;
+      const maxLakeSize = state.cells / 50;
       const [x0, y0] = state.pole;
 
-      const rays = angles.map(({angle, dx, dy}) => {
-        const {length, x, y} = raycast({stateId: state.i, x0, y0, dx, dy, maxLakeSize, offset});
-        return {angle, length, x, y};
+      const offsetPoints = new Map(
+        (offset ? raycast : []).map(({angle, x: x1, y: y1}) => {
+          const [x, y] = [x0 + offset * x1, y0 + offset * y1];
+          return [angle, {x, y}];
+        })
+      );
+
+      const distances = raycast.map(({angle, x: dx, y: dy, modifier}) => {
+        let distanceMin;
+        const distance1 = getMaxDistance(state.i, {x: x0, y: y0}, dx, dy, maxLakeSize);
+
+        if (offset) {
+          const point2 = offsetPoints.get(angle - 90 < 0 ? angle + 270 : angle - 90);
+          const distance2 = getMaxDistance(state.i, point2, dx, dy, maxLakeSize);
+
+          const point3 = offsetPoints.get(angle + 90 >= 360 ? angle - 270 : angle + 90);
+          const distance3 = getMaxDistance(state.i, point3, dx, dy, maxLakeSize);
+
+          distanceMin = Math.min(distance1, distance2, distance3);
+        } else {
+          distanceMin = distance1;
+        }
+
+        const [x, y] = [x0 + distanceMin * dx, y0 + distanceMin * dy];
+        return {angle, distance: distanceMin * modifier, x, y};
       });
-      const [ray1, ray2] = findBestRayPair(rays);
 
-      const pathPoints = [[ray1.x, ray1.y], state.pole, [ray2.x, ray2.y]];
-      if (ray1.x > ray2.x) pathPoints.reverse();
+      const {
+        angle,
+        x: x1,
+        y: y1
+      } = distances.reduce(
+        (acc, {angle, distance, x, y}) => {
+          if (distance > acc.distance) return {angle, distance, x, y};
+          return acc;
+        },
+        {angle: 0, distance: 0, x: 0, y: 0}
+      );
 
-      if (DEBUG.stateLabels) {
-        drawPoint(state.pole, {color: "black", radius: 1});
-        drawPath(pathPoints, {color: "black", width: 0.2});
-      }
+      const oppositeAngle = angle >= 180 ? angle - 180 : angle + 180;
+      const {x: x2, y: y2} = distances.reduce(
+        (acc, {angle, distance, x, y}) => {
+          const angleDif = getAnglesDif(angle, oppositeAngle);
+          const score = distance * getAngleModifier(angleDif);
+          if (score > acc.score) return {angle, score, x, y};
+          return acc;
+        },
+        {angle: 0, score: 0, x: 0, y: 0}
+      );
 
+      const pathPoints = [[x1, y1], state.pole, [x2, y2]];
+      if (x1 > x2) pathPoints.reverse();
       labelPaths.push([state.i, pathPoints]);
     }
 
     return labelPaths;
+
+    function getMaxDistance(stateId, point, dx, dy, maxLakeSize) {
+      let distance = INITIAL_DISTANCE;
+
+      for (let i = 0; i < MAX_ITERATIONS; i++) {
+        const [x, y] = [point.x + distance * dx, point.y + distance * dy];
+        const cellId = findCell(x, y, DISTANCE_STEP);
+
+        // drawPoint([x, y], {color: cellId && isPassable(cellId) ? "blue" : "red", radius: 0.8});
+
+        if (!cellId || !isPassable(cellId)) break;
+        distance += DISTANCE_STEP;
+      }
+
+      return distance;
+
+      function isPassable(cellId) {
+        const feature = features[cells.f[cellId]];
+        if (feature.type === "lake") return feature.cells <= maxLakeSize;
+        return stateIds[cellId] === stateId;
+      }
+    }
   }
 
   function checkExampleLetterLength() {
@@ -69,7 +129,7 @@ function drawStateLabels(list) {
 
   function drawLabelPath(letterLength) {
     const mode = options.stateLabelsMode || "auto";
-    const lineGen = d3.line().curve(d3.curveNatural);
+    const lineGen = d3.line().curve(d3.curveBundle.beta(1));
 
     const textGroup = d3.select("g#labels > g#states");
     const pathGroup = d3.select("defs > g#deftemp > g#textPaths");
@@ -106,7 +166,6 @@ function drawStateLabels(list) {
 
       const textElement = textGroup
         .append("text")
-        .attr("text-rendering", "optimizeSpeed")
         .attr("id", "stateLabel" + stateId)
         .append("textPath")
         .attr("startOffset", "50%")
@@ -133,15 +192,35 @@ function drawStateLabels(list) {
       const text = pathLength > state.fullName.length * 1.8 ? state.fullName : state.name;
       textElement.innerHTML = `<tspan x="0">${text}</tspan>`;
 
-      const correctedRatio = minmax(rn((pathLength / text.length) * 50), 50, 130);
+      const correctedRatio = minmax(rn((pathLength / text.length) * 50), 40, 130);
       textElement.setAttribute("font-size", correctedRatio + "%");
     }
   }
 
+  // point offset to reduce label overlap with state borders
   function getOffsetWidth(cellsNumber) {
-    if (cellsNumber < 40) return 0;
-    if (cellsNumber < 200) return 5;
-    return 10;
+    if (cellsNumber < 80) return 0;
+    if (cellsNumber < 140) return 5;
+    if (cellsNumber < 200) return 15;
+    if (cellsNumber < 300) return 20;
+    if (cellsNumber < 500) return 25;
+    return 30;
+  }
+
+  // difference between two angles in range [0, 180]
+  function getAnglesDif(angle1, angle2) {
+    return 180 - Math.abs(Math.abs(angle1 - angle2) - 180);
+  }
+
+  // score multiplier based on angle difference betwee left and right sides
+  function getAngleModifier(angleDif) {
+    if (angleDif === 0) return 1;
+    if (angleDif <= 15) return 0.95;
+    if (angleDif <= 30) return 0.9;
+    if (angleDif <= 45) return 0.6;
+    if (angleDif <= 60) return 0.3;
+    if (angleDif <= 90) return 0.1;
+    return 0; // >90
   }
 
   function precalculateAngles(step) {
@@ -149,135 +228,37 @@ function drawStateLabels(list) {
     const RAD = Math.PI / 180;
 
     for (let angle = 0; angle < 360; angle += step) {
-      const dx = Math.cos(angle * RAD);
-      const dy = Math.sin(angle * RAD);
-      angles.push({angle, dx, dy});
+      const x = Math.cos(angle * RAD);
+      const y = Math.sin(angle * RAD);
+      const angleDif = 90 - Math.abs((angle % 180) - 90);
+      const modifier = 1 - angleDif / 120; // [0.25, 1]
+      angles.push({angle, modifier, x, y});
     }
 
     return angles;
   }
 
-  function raycast({stateId, x0, y0, dx, dy, maxLakeSize, offset}) {
-    let ray = {length: 0, x: x0, y: y0};
-
-    for (let length = LENGTH_START; length < LENGTH_MAX; length += LENGTH_STEP) {
-      const [x, y] = [x0 + length * dx, y0 + length * dy];
-      // offset points are perpendicular to the ray
-      const offset1 = [x + -dy * offset, y + dx * offset];
-      const offset2 = [x + dy * offset, y + -dx * offset];
-
-      if (DEBUG.stateLabels) {
-        drawPoint([x, y], {color: isInsideState(x, y) ? "blue" : "red", radius: 0.8});
-        drawPoint(offset1, {color: isInsideState(...offset1) ? "blue" : "red", radius: 0.4});
-        drawPoint(offset2, {color: isInsideState(...offset2) ? "blue" : "red", radius: 0.4});
-      }
-
-      const inState = isInsideState(x, y) && isInsideState(...offset1) && isInsideState(...offset2);
-      if (!inState) break;
-      ray = {length, x, y};
-    }
-
-    return ray;
-
-    function isInsideState(x, y) {
-      if (x < 0 || x > graphWidth || y < 0 || y > graphHeight) return false;
-      const cellId = findCell(x, y);
-
-      const feature = features[cells.f[cellId]];
-      if (feature.type === "lake") return isInnerLake(feature) || isSmallLake(feature);
-
-      return stateIds[cellId] === stateId;
-    }
-
-    function isInnerLake(feature) {
-      return feature.shoreline.every(cellId => stateIds[cellId] === stateId);
-    }
-
-    function isSmallLake(feature) {
-      return feature.cells <= maxLakeSize;
-    }
-  }
-
-  function findBestRayPair(rays) {
-    let bestPair = null;
-    let bestScore = -Infinity;
-
-    for (let i = 0; i < rays.length; i++) {
-      const score1 = rays[i].length * scoreRayAngle(rays[i].angle);
-
-      for (let j = i + 1; j < rays.length; j++) {
-        const score2 = rays[j].length * scoreRayAngle(rays[j].angle);
-        const pairScore = (score1 + score2) * scoreCurvature(rays[i].angle, rays[j].angle);
-
-        if (pairScore > bestScore) {
-          bestScore = pairScore;
-          bestPair = [rays[i], rays[j]];
-        }
-      }
-    }
-
-    return bestPair;
-  }
-
-  function scoreRayAngle(angle) {
-    const normalizedAngle = Math.abs(angle % 180); // [0, 180]
-    const horizontality = Math.abs(normalizedAngle - 90) / 90; // [0, 1]
-
-    if (horizontality === 1) return 1; // Best: horizontal
-    if (horizontality >= 0.75) return 0.9; // Very good: slightly slanted
-    if (horizontality >= 0.5) return 0.6; // Good: moderate slant
-    if (horizontality >= 0.25) return 0.5; // Acceptable: more slanted
-    if (horizontality >= 0.15) return 0.2; // Poor: almost vertical
-    return 0.1; // Very poor: almost vertical
-  }
-
-  function scoreCurvature(angle1, angle2) {
-    const delta = getAngleDelta(angle1, angle2);
-    const similarity = evaluateArc(angle1, angle2);
-
-    if (delta === 180) return 1; // straight line: best
-    if (delta < 90) return 0; // acute: not allowed
-    if (delta < 120) return 0.6 * similarity;
-    if (delta < 140) return 0.7 * similarity;
-    if (delta < 160) return 0.8 * similarity;
-
-    return similarity;
-  }
-
-  function getAngleDelta(angle1, angle2) {
-    let delta = Math.abs(angle1 - angle2) % 360;
-    if (delta > 180) delta = 360 - delta; // [0, 180]
-    return delta;
-  }
-
-  // compute arc similarity towards x-axis
-  function evaluateArc(angle1, angle2) {
-    const proximity1 = Math.abs((angle1 % 180) - 90);
-    const proximity2 = Math.abs((angle2 % 180) - 90);
-    return 1 - Math.abs(proximity1 - proximity2) / 90;
-  }
-
   function getLinesAndRatio(mode, name, fullName, pathLength) {
-    if (mode === "short") return getShortOneLine();
-    if (pathLength > fullName.length * 2) return getFullOneLine();
-    return getFullTwoLines();
-
-    function getShortOneLine() {
-      const ratio = pathLength / name.length;
-      return [[name], minmax(rn(ratio * 60), 50, 150)];
-    }
-
-    function getFullOneLine() {
-      const ratio = pathLength / fullName.length;
-      return [[fullName], minmax(rn(ratio * 70), 70, 170)];
-    }
-
-    function getFullTwoLines() {
-      const lines = splitInTwo(fullName);
+    // short name
+    if (mode === "short" || (mode === "auto" && pathLength <= name.length)) {
+      const lines = splitInTwo(name);
       const longestLineLength = d3.max(lines.map(({length}) => length));
       const ratio = pathLength / longestLineLength;
-      return [lines, minmax(rn(ratio * 60), 70, 150)];
+      return [lines, minmax(rn(ratio * 60), 50, 150)];
     }
+
+    // full name: one line
+    if (pathLength > fullName.length * 2) {
+      const lines = [fullName];
+      const ratio = pathLength / lines[0].length;
+      return [lines, minmax(rn(ratio * 70), 70, 170)];
+    }
+
+    // full name: two lines
+    const lines = splitInTwo(fullName);
+    const longestLineLength = d3.max(lines.map(({length}) => length));
+    const ratio = pathLength / longestLineLength;
+    return [lines, minmax(rn(ratio * 60), 70, 150)];
   }
 
   // check whether multi-lined label is mostly inside the state. If no, replace it with short name label
@@ -308,5 +289,5 @@ function drawStateLabels(list) {
     return false;
   }
 
-  TIME && console.timeEnd("drawStateLabels");
+  console.timeEnd("drawStateLabels");
 }
diff --git a/modules/resample.js b/modules/resample.js
deleted file mode 100644
index 21349b9e..00000000
--- a/modules/resample.js
+++ /dev/null
@@ -1,367 +0,0 @@
-"use strict";
-
-window.Resample = (function () {
-  /*
-    generate new map based on an existing one (resampling parentMap)
-    parentMap: {grid, pack, notes} from original map
-    projection: f(Number, Number) -> [Number, Number]
-    inverse: f(Number, Number) -> [Number, Number]
-    scale: Number
-  */
-  function process({projection, inverse, scale}) {
-    const parentMap = {grid: deepCopy(grid), pack: deepCopy(pack), notes: deepCopy(notes)};
-    const riversData = saveRiversData(pack.rivers);
-
-    grid = generateGrid();
-    pack = {};
-    notes = parentMap.notes;
-
-    resamplePrimaryGridData(parentMap, inverse, scale);
-
-    Features.markupGrid();
-    addLakesInDeepDepressions();
-    openNearSeaLakes();
-
-    OceanLayers();
-    calculateMapCoordinates();
-    calculateTemperatures();
-
-    reGraph();
-    Features.markupPack();
-    createDefaultRuler();
-
-    restoreCellData(parentMap, inverse, scale);
-    restoreRivers(riversData, projection, scale);
-    restoreCultures(parentMap, projection);
-    restoreBurgs(parentMap, projection, scale);
-    restoreStates(parentMap, projection);
-    restoreRoutes(parentMap, projection);
-    restoreReligions(parentMap, projection);
-    restoreProvinces(parentMap);
-    restoreFeatureDetails(parentMap, inverse);
-    restoreMarkers(parentMap, projection);
-    restoreZones(parentMap, projection, scale);
-
-    showStatistics();
-  }
-
-  function resamplePrimaryGridData(parentMap, inverse, scale) {
-    grid.cells.h = new Uint8Array(grid.points.length);
-    grid.cells.temp = new Int8Array(grid.points.length);
-    grid.cells.prec = new Uint8Array(grid.points.length);
-
-    grid.points.forEach(([x, y], newGridCell) => {
-      const [parentX, parentY] = inverse(x, y);
-      const parentPackCell = parentMap.pack.cells.q.find(parentX, parentY, Infinity)[2];
-      const parentGridCell = parentMap.pack.cells.g[parentPackCell];
-
-      grid.cells.h[newGridCell] = parentMap.grid.cells.h[parentGridCell];
-      grid.cells.temp[newGridCell] = parentMap.grid.cells.temp[parentGridCell];
-      grid.cells.prec[newGridCell] = parentMap.grid.cells.prec[parentGridCell];
-    });
-
-    if (scale >= 2) smoothHeightmap();
-  }
-
-  function smoothHeightmap() {
-    grid.cells.h.forEach((height, newGridCell) => {
-      const heights = [height, ...grid.cells.c[newGridCell].map(c => grid.cells.h[c])];
-      const meanHeight = d3.mean(heights);
-      grid.cells.h[newGridCell] = isWater(grid, newGridCell) ? Math.min(meanHeight, 19) : Math.max(meanHeight, 20);
-    });
-  }
-
-  function restoreCellData(parentMap, inverse, scale) {
-    pack.cells.biome = new Uint8Array(pack.cells.i.length);
-    pack.cells.fl = new Uint16Array(pack.cells.i.length);
-    pack.cells.s = new Int16Array(pack.cells.i.length);
-    pack.cells.pop = new Float32Array(pack.cells.i.length);
-    pack.cells.culture = new Uint16Array(pack.cells.i.length);
-    pack.cells.state = new Uint16Array(pack.cells.i.length);
-    pack.cells.burg = new Uint16Array(pack.cells.i.length);
-    pack.cells.religion = new Uint16Array(pack.cells.i.length);
-    pack.cells.province = new Uint16Array(pack.cells.i.length);
-
-    const parentPackCellGroups = groupCellsByType(parentMap.pack);
-    const parentPackLandCellsQuadtree = d3.quadtree(parentPackCellGroups.land);
-
-    for (const newPackCell of pack.cells.i) {
-      const [x, y] = inverse(...pack.cells.p[newPackCell]);
-      if (isWater(pack, newPackCell)) continue;
-
-      const parentPackCell = parentPackLandCellsQuadtree.find(x, y, Infinity)[2];
-      const parentCellArea = parentMap.pack.cells.area[parentPackCell];
-      const areaRatio = pack.cells.area[newPackCell] / parentCellArea;
-      const scaleRatio = areaRatio / scale;
-
-      pack.cells.biome[newPackCell] = parentMap.pack.cells.biome[parentPackCell];
-      pack.cells.fl[newPackCell] = parentMap.pack.cells.fl[parentPackCell];
-      pack.cells.s[newPackCell] = parentMap.pack.cells.s[parentPackCell] * scaleRatio;
-      pack.cells.pop[newPackCell] = parentMap.pack.cells.pop[parentPackCell] * scaleRatio;
-      pack.cells.culture[newPackCell] = parentMap.pack.cells.culture[parentPackCell];
-      pack.cells.state[newPackCell] = parentMap.pack.cells.state[parentPackCell];
-      pack.cells.religion[newPackCell] = parentMap.pack.cells.religion[parentPackCell];
-      pack.cells.province[newPackCell] = parentMap.pack.cells.province[parentPackCell];
-    }
-  }
-
-  function saveRiversData(parentRivers) {
-    return parentRivers.map(river => {
-      const meanderedPoints = Rivers.addMeandering(river.cells, river.points);
-      return {...river, meanderedPoints};
-    });
-  }
-
-  function restoreRivers(riversData, projection, scale) {
-    pack.cells.r = new Uint16Array(pack.cells.i.length);
-    pack.cells.conf = new Uint8Array(pack.cells.i.length);
-
-    pack.rivers = riversData
-      .map(river => {
-        let wasInMap = true;
-        const points = [];
-
-        river.meanderedPoints.forEach(([parentX, parentY]) => {
-          const [x, y] = projection(parentX, parentY);
-          const inMap = isInMap(x, y);
-          if (inMap || wasInMap) points.push([rn(x, 2), rn(y, 2)]);
-          wasInMap = inMap;
-        });
-        if (points.length < 2) return null;
-
-        const cells = points.map(point => findCell(...point));
-        cells.forEach(cellId => {
-          if (pack.cells.r[cellId]) pack.cells.conf[cellId] = 1;
-          pack.cells.r[cellId] = river.i;
-        });
-
-        const widthFactor = river.widthFactor * scale;
-        return {...river, cells, points, source: cells.at(0), mouth: cells.at(-2), widthFactor};
-      })
-      .filter(Boolean);
-
-    pack.rivers.forEach(river => {
-      river.basin = Rivers.getBasin(river.i);
-      river.length = Rivers.getApproximateLength(river.points);
-    });
-  }
-
-  function restoreCultures(parentMap, projection) {
-    const validCultures = new Set(pack.cells.culture);
-    const culturePoles = getPolesOfInaccessibility(pack, cellId => pack.cells.culture[cellId]);
-    pack.cultures = parentMap.pack.cultures.map(culture => {
-      if (!culture.i || culture.removed) return culture;
-      if (!validCultures.has(culture.i)) return {...culture, removed: true, lock: false};
-
-      const [xp, yp] = projection(...parentMap.pack.cells.p[culture.center]);
-      const [x, y] = [rn(xp, 2), rn(yp, 2)];
-      const centerCoords = isInMap(x, y) ? [x, y] : culturePoles[culture.i];
-      const center = findCell(...centerCoords);
-      return {...culture, center};
-    });
-  }
-
-  function restoreBurgs(parentMap, projection, scale) {
-    const packLandCellsQuadtree = d3.quadtree(groupCellsByType(pack).land);
-    const findLandCell = (x, y) => packLandCellsQuadtree.find(x, y, Infinity)?.[2];
-
-    pack.burgs = parentMap.pack.burgs.map(burg => {
-      if (!burg.i || burg.removed) return burg;
-      burg.population *= scale; // adjust for populationRate change
-
-      const [xp, yp] = projection(burg.x, burg.y);
-      if (!isInMap(xp, yp)) return {...burg, removed: true, lock: false};
-
-      const closestCell = findCell(xp, yp);
-      const cell = isWater(pack, closestCell) ? findLandCell(xp, yp) : closestCell;
-
-      if (pack.cells.burg[cell]) {
-        WARN && console.warn(`Cell ${cell} already has a burg. Removing burg ${burg.name} (${burg.i})`);
-        return {...burg, removed: true, lock: false};
-      }
-
-      pack.cells.burg[cell] = burg.i;
-      const [x, y] = getBurgCoordinates(burg, closestCell, cell, xp, yp);
-      return {...burg, cell, x, y};
-    });
-
-    function getBurgCoordinates(burg, closestCell, cell, xp, yp) {
-      const haven = pack.cells.haven[cell];
-      if (burg.port && haven) return BurgsAndStates.getCloseToEdgePoint(cell, haven);
-
-      if (closestCell !== cell) return pack.cells.p[cell];
-      return [rn(xp, 2), rn(yp, 2)];
-    }
-  }
-
-  function restoreStates(parentMap, projection) {
-    const validStates = new Set(pack.cells.state);
-    pack.states = parentMap.pack.states.map(state => {
-      if (!state.i || state.removed) return state;
-      if (validStates.has(state.i)) return state;
-      return {...state, removed: true, lock: false};
-    });
-
-    BurgsAndStates.getPoles();
-    const regimentCellsMap = {};
-    const VERTICAL_GAP = 8;
-
-    pack.states = pack.states.map(state => {
-      if (!state.i || state.removed) return state;
-
-      const capital = pack.burgs[state.capital];
-      state.center = !capital || capital.removed ? findCell(...state.pole) : capital.cell;
-
-      const military = state.military.map(regiment => {
-        const cellCoords = projection(...parentMap.pack.cells.p[regiment.cell]);
-        const cell = isInMap(...cellCoords) ? findCell(...cellCoords) : state.center;
-
-        const [xPos, yPos] = projection(regiment.x, regiment.y);
-        const [xBase, yBase] = projection(regiment.bx, regiment.by);
-        const [xCell, yCell] = pack.cells.p[cell];
-
-        const regsOnCell = regimentCellsMap[cell] || 0;
-        regimentCellsMap[cell] = regsOnCell + 1;
-
-        const name =
-          isInMap(xPos, yPos) || regiment.name.includes("[relocated]") ? regiment.name : `[relocated] ${regiment.name}`;
-
-        const pos = isInMap(xPos, yPos)
-          ? {x: rn(xPos, 2), y: rn(yPos, 2)}
-          : {x: xCell, y: yCell + regsOnCell * VERTICAL_GAP};
-
-        const base = isInMap(xBase, yBase) ? {bx: rn(xBase, 2), by: rn(yBase, 2)} : {bx: xCell, by: yCell};
-
-        return {...regiment, cell, name, ...base, ...pos};
-      });
-
-      const neighbors = state.neighbors.filter(stateId => validStates.has(stateId));
-      return {...state, neighbors, military};
-    });
-  }
-
-  function restoreRoutes(parentMap, projection) {
-    pack.routes = parentMap.pack.routes
-      .map(route => {
-        let wasInMap = true;
-        const points = [];
-
-        route.points.forEach(([parentX, parentY]) => {
-          const [x, y] = projection(parentX, parentY);
-          const inMap = isInMap(x, y);
-          if (inMap || wasInMap) points.push([rn(x, 2), rn(y, 2)]);
-          wasInMap = inMap;
-        });
-        if (points.length < 2) return null;
-
-        const bbox = [0, 0, graphWidth, graphHeight];
-        const clipped = lineclip(points, bbox)[0].map(([x, y]) => [rn(x, 2), rn(y, 2), findCell(x, y)]);
-        const firstCell = clipped[0][2];
-        const feature = pack.cells.f[firstCell];
-        return {...route, feature, points: clipped};
-      })
-      .filter(Boolean);
-
-    pack.cells.routes = Routes.buildLinks(pack.routes);
-  }
-
-  function restoreReligions(parentMap, projection) {
-    const validReligions = new Set(pack.cells.religion);
-    const religionPoles = getPolesOfInaccessibility(pack, cellId => pack.cells.religion[cellId]);
-
-    pack.religions = parentMap.pack.religions.map(religion => {
-      if (!religion.i || religion.removed) return religion;
-      if (!validReligions.has(religion.i)) return {...religion, removed: true, lock: false};
-
-      const [xp, yp] = projection(...parentMap.pack.cells.p[religion.center]);
-      const [x, y] = [rn(xp, 2), rn(yp, 2)];
-      const centerCoords = isInMap(x, y) ? [x, y] : religionPoles[religion.i];
-      const center = findCell(...centerCoords);
-      return {...religion, center};
-    });
-  }
-
-  function restoreProvinces(parentMap) {
-    const validProvinces = new Set(pack.cells.province);
-    pack.provinces = parentMap.pack.provinces.map(province => {
-      if (!province.i || province.removed) return province;
-      if (!validProvinces.has(province.i)) return {...province, removed: true, lock: false};
-
-      return province;
-    });
-
-    Provinces.getPoles();
-
-    pack.provinces.forEach(province => {
-      if (!province.i || province.removed) return;
-      const capital = pack.burgs[province.burg];
-      province.center = !capital?.removed ? capital.cell : findCell(...province.pole);
-    });
-  }
-
-  function restoreMarkers(parentMap, projection) {
-    pack.markers = parentMap.pack.markers;
-    pack.markers.forEach(marker => {
-      const [x, y] = projection(marker.x, marker.y);
-      if (!isInMap(x, y)) Markers.deleteMarker(marker.i);
-
-      const cell = findCell(x, y);
-      marker.x = rn(x, 2);
-      marker.y = rn(y, 2);
-      marker.cell = cell;
-    });
-  }
-
-  function restoreZones(parentMap, projection, scale) {
-    const getSearchRadius = cellId => Math.sqrt(parentMap.pack.cells.area[cellId] / Math.PI) * scale;
-
-    pack.zones = parentMap.pack.zones.map(zone => {
-      const cells = zone.cells
-        .map(cellId => {
-          const [x, y] = projection(...parentMap.pack.cells.p[cellId]);
-          if (!isInMap(x, y)) return null;
-          return findAll(x, y, getSearchRadius(cellId));
-        })
-        .filter(Boolean)
-        .flat();
-
-      return {...zone, cells: unique(cells)};
-    });
-  }
-
-  function restoreFeatureDetails(parentMap, inverse) {
-    pack.features.forEach(feature => {
-      if (!feature) return;
-      const [x, y] = pack.cells.p[feature.firstCell];
-      const [parentX, parentY] = inverse(x, y);
-      const parentCell = parentMap.pack.cells.q.find(parentX, parentY, Infinity)[2];
-      if (parentCell === undefined) return;
-      const parentFeature = parentMap.pack.features[parentMap.pack.cells.f[parentCell]];
-
-      if (parentFeature.group) feature.group = parentFeature.group;
-      if (parentFeature.name) feature.name = parentFeature.name;
-      if (parentFeature.height) feature.height = parentFeature.height;
-    });
-  }
-
-  function groupCellsByType(graph) {
-    return graph.cells.p.reduce(
-      (acc, [x, y], cellId) => {
-        const group = isWater(graph, cellId) ? "water" : "land";
-        acc[group].push([x, y, cellId]);
-        return acc;
-      },
-      {land: [], water: []}
-    );
-  }
-
-  function isWater(graph, cellId) {
-    return graph.cells.h[cellId] < 20;
-  }
-
-  function isInMap(x, y) {
-    return x >= 0 && x <= graphWidth && y >= 0 && y <= graphHeight;
-  }
-
-  return {process};
-})();
diff --git a/modules/river-generator.js b/modules/river-generator.js
index 254e1af8..fd8a95b4 100644
--- a/modules/river-generator.js
+++ b/modules/river-generator.js
@@ -8,7 +8,6 @@ window.Rivers = (function () {
 
     const riversData = {}; // rivers data
     const riverParents = {};
-
     const addCellToRiver = function (cell, river) {
       if (!riversData[river]) riversData[river] = [cell];
       else riversData[river].push(cell);
@@ -20,7 +19,7 @@ window.Rivers = (function () {
     let riverNext = 1; // first river id is 1
 
     const h = alterHeights();
-    Lakes.detectCloseLakes(h);
+    Lakes.prepareLakeData(h);
     resolveDepressions(h);
     drainWater();
     defineRivers();
@@ -36,12 +35,14 @@ window.Rivers = (function () {
     TIME && console.timeEnd("generateRivers");
 
     function drainWater() {
+      //const MIN_FLUX_TO_FORM_RIVER = 10 * distanceScale;
       const MIN_FLUX_TO_FORM_RIVER = 30;
       const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25;
 
       const prec = grid.cells.prec;
+      const area = pack.cells.area;
       const land = cells.i.filter(i => h[i] >= 20).sort((a, b) => h[b] - h[a]);
-      const lakeOutCells = Lakes.defineClimateData(h);
+      const lakeOutCells = Lakes.setClimateData(h);
 
       land.forEach(function (i) {
         cells.fl[i] += prec[cells.g[i]] / cellsNumberModifier; // add flux from precipitation
@@ -190,15 +191,7 @@ window.Rivers = (function () {
         const meanderedPoints = addMeandering(riverCells);
         const discharge = cells.fl[mouth]; // m3 in second
         const length = getApproximateLength(meanderedPoints);
-        const sourceWidth = getSourceWidth(cells.fl[source]);
-        const width = getWidth(
-          getOffset({
-            flux: discharge,
-            pointIndex: meanderedPoints.length,
-            widthFactor,
-            startingWidth: sourceWidth
-          })
-        );
+        const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, 0));
 
         pack.rivers.push({
           i: riverId,
@@ -208,7 +201,7 @@ window.Rivers = (function () {
           length,
           width,
           widthFactor,
-          sourceWidth,
+          sourceWidth: 0,
           parent,
           cells: riverCells
         });
@@ -314,49 +307,59 @@ window.Rivers = (function () {
 
   // add points at 1/3 and 2/3 of a line between adjacents river cells
   const addMeandering = function (riverCells, riverPoints = null, meandering = 0.5) {
-    const {fl, h} = pack.cells;
+    const {fl, conf, h} = pack.cells;
     const meandered = [];
     const lastStep = riverCells.length - 1;
     const points = getRiverPoints(riverCells, riverPoints);
     let step = h[riverCells[0]] < 20 ? 1 : 10;
 
+    let fluxPrev = 0;
+    const getFlux = (step, flux) => (step === lastStep ? fluxPrev : flux);
+
     for (let i = 0; i <= lastStep; i++, step++) {
       const cell = riverCells[i];
       const isLastCell = i === lastStep;
 
       const [x1, y1] = points[i];
+      const flux1 = getFlux(i, fl[cell]);
+      fluxPrev = flux1;
 
-      meandered.push([x1, y1, fl[cell]]);
+      meandered.push([x1, y1, flux1]);
       if (isLastCell) break;
 
       const nextCell = riverCells[i + 1];
       const [x2, y2] = points[i + 1];
 
       if (nextCell === -1) {
-        meandered.push([x2, y2, fl[cell]]);
+        meandered.push([x2, y2, fluxPrev]);
         break;
       }
 
       const dist2 = (x2 - x1) ** 2 + (y2 - y1) ** 2; // square distance between cells
       if (dist2 <= 25 && riverCells.length >= 6) continue;
 
+      const flux2 = getFlux(i + 1, fl[nextCell]);
+      const keepInitialFlux = conf[nextCell] || flux1 === flux2;
+
       const meander = meandering + 1 / step + Math.max(meandering - step / 100, 0);
       const angle = Math.atan2(y2 - y1, x2 - x1);
       const sinMeander = Math.sin(angle) * meander;
       const cosMeander = Math.cos(angle) * meander;
 
-      if (step < 20 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) {
+      if (step < 10 && (dist2 > 64 || (dist2 > 36 && riverCells.length < 5))) {
         // if dist2 is big or river is small add extra points at 1/3 and 2/3 of segment
         const p1x = (x1 * 2 + x2) / 3 + -sinMeander;
         const p1y = (y1 * 2 + y2) / 3 + cosMeander;
         const p2x = (x1 + x2 * 2) / 3 + sinMeander / 2;
         const p2y = (y1 + y2 * 2) / 3 - cosMeander / 2;
-        meandered.push([p1x, p1y, 0], [p2x, p2y, 0]);
+        const [p1fl, p2fl] = keepInitialFlux ? [flux1, flux1] : [(flux1 * 2 + flux2) / 3, (flux1 + flux2 * 2) / 3];
+        meandered.push([p1x, p1y, p1fl], [p2x, p2y, p2fl]);
       } else if (dist2 > 25 || riverCells.length < 6) {
         // if dist is medium or river is small add 1 extra middlepoint
         const p1x = (x1 + x2) / 2 + -sinMeander;
         const p1y = (y1 + y2) / 2 + cosMeander;
-        meandered.push([p1x, p1y, 0]);
+        const p1fl = keepInitialFlux ? flux1 : (flux1 + flux2) / 2;
+        meandered.push([p1x, p1y, p1fl]);
       }
     }
 
@@ -383,35 +386,29 @@ window.Rivers = (function () {
   };
 
   const FLUX_FACTOR = 500;
-  const MAX_FLUX_WIDTH = 1;
+  const MAX_FLUX_WIDTH = 2;
   const LENGTH_FACTOR = 200;
-  const LENGTH_STEP_WIDTH = 1 / LENGTH_FACTOR;
+  const STEP_WIDTH = 1 / LENGTH_FACTOR;
   const LENGTH_PROGRESSION = [1, 1, 2, 3, 5, 8, 13, 21, 34].map(n => n / LENGTH_FACTOR);
+  const MAX_PROGRESSION = last(LENGTH_PROGRESSION);
 
-  const getOffset = ({flux, pointIndex, widthFactor, startingWidth}) => {
-    if (pointIndex === 0) return startingWidth;
-
-    const fluxWidth = Math.min(flux ** 0.7 / FLUX_FACTOR, MAX_FLUX_WIDTH);
-    const lengthWidth = pointIndex * LENGTH_STEP_WIDTH + (LENGTH_PROGRESSION[pointIndex] || LENGTH_PROGRESSION.at(-1));
+  const getOffset = (flux, pointNumber, widthFactor, startingWidth = 0) => {
+    const fluxWidth = Math.min(flux ** 0.9 / FLUX_FACTOR, MAX_FLUX_WIDTH);
+    const lengthWidth = pointNumber * STEP_WIDTH + (LENGTH_PROGRESSION[pointNumber] || MAX_PROGRESSION);
     return widthFactor * (lengthWidth + fluxWidth) + startingWidth;
   };
 
-  const getSourceWidth = flux => rn(Math.min(flux ** 0.9 / FLUX_FACTOR, MAX_FLUX_WIDTH), 2);
-
   // build polygon from a list of points and calculated offset (width)
-  const getRiverPath = (points, widthFactor, startingWidth) => {
-    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+  const getRiverPath = function (points, widthFactor, startingWidth = 0) {
     const riverPointsLeft = [];
     const riverPointsRight = [];
-    let flux = 0;
 
-    for (let pointIndex = 0; pointIndex < points.length; pointIndex++) {
-      const [x0, y0] = points[pointIndex - 1] || points[pointIndex];
-      const [x1, y1, pointFlux] = points[pointIndex];
-      const [x2, y2] = points[pointIndex + 1] || points[pointIndex];
-      if (pointFlux > flux) flux = pointFlux;
+    for (let p = 0; p < points.length; p++) {
+      const [x0, y0] = points[p - 1] || points[p];
+      const [x1, y1, flux] = points[p];
+      const [x2, y2] = points[p + 1] || points[p];
 
-      const offset = getOffset({flux, pointIndex, widthFactor, startingWidth});
+      const offset = getOffset(flux, p, widthFactor, startingWidth);
       const angle = Math.atan2(y0 - y2, x0 - x2);
       const sinOffset = Math.sin(angle) * offset;
       const cosOffset = Math.cos(angle) * offset;
@@ -511,7 +508,6 @@ window.Rivers = (function () {
     getBasin,
     getWidth,
     getOffset,
-    getSourceWidth,
     getApproximateLength,
     getRiverPoints,
     remove,
diff --git a/modules/routes-generator.js b/modules/routes-generator.js
index c0aa7681..376e9d03 100644
--- a/modules/routes-generator.js
+++ b/modules/routes-generator.js
@@ -1,15 +1,6 @@
 const ROUTES_SHARP_ANGLE = 135;
 const ROUTES_VERY_SHARP_ANGLE = 115;
 
-const MIN_PASSABLE_SEA_TEMP = -4;
-const ROUTE_TYPE_MODIFIERS = {
-  "-1": 1, // coastline
-  "-2": 1.8, // sea
-  "-3": 4, // open sea
-  "-4": 6, // ocean
-  default: 8 // far ocean
-};
-
 window.Routes = (function () {
   function generate(lockedRoutes = []) {
     const {capitalsByFeature, burgsByFeature, portsByFeature} = sortBurgsByFeature(pack.burgs);
@@ -127,9 +118,10 @@ window.Routes = (function () {
     }
 
     function findPathSegments({isWater, connections, start, exit}) {
-      const getCost = createCostEvaluator({isWater, connections});
-      const pathCells = findPath(start, current => current === exit, getCost);
-      if (!pathCells) return [];
+      const from = findPath(isWater, start, exit, connections);
+      if (!from) return [];
+
+      const pathCells = restorePath(start, exit, from);
       const segments = getRouteSegments(pathCells, connections);
       return segments;
     }
@@ -180,61 +172,29 @@ window.Routes = (function () {
 
       return routesMerged > 1 ? mergeRoutes(routes) : routes;
     }
-  }
 
-  function createCostEvaluator({isWater, connections}) {
-    return isWater ? getWaterPathCost : getLandPathCost;
+    function buildLinks(routes) {
+      const links = {};
 
-    function getLandPathCost(current, next) {
-      if (pack.cells.h[next] < 20) return Infinity; // ignore water cells
+      for (const {points, i: routeId} of routes) {
+        const cells = points.map(p => p[2]);
 
-      const habitability = biomesData.habitability[pack.cells.biome[next]];
-      if (!habitability) return Infinity; // inhabitable cells are not passable (e.g. glacier)
+        for (let i = 0; i < cells.length - 1; i++) {
+          const cellId = cells[i];
+          const nextCellId = cells[i + 1];
 
-      const distanceCost = dist2(pack.cells.p[current], pack.cells.p[next]);
-      const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
-      const heightModifier = 1 + Math.max(pack.cells.h[next] - 25, 25) / 25; // [1, 3];
-      const connectionModifier = connections.has(`${current}-${next}`) ? 0.5 : 1;
-      const burgModifier = pack.cells.burg[next] ? 1 : 3;
+          if (cellId !== nextCellId) {
+            if (!links[cellId]) links[cellId] = {};
+            links[cellId][nextCellId] = routeId;
 
-      const pathCost = distanceCost * habitabilityModifier * heightModifier * connectionModifier * burgModifier;
-      return pathCost;
-    }
-
-    function getWaterPathCost(current, next) {
-      if (pack.cells.h[next] >= 20) return Infinity; // ignore land cells
-      if (grid.cells.temp[pack.cells.g[next]] < MIN_PASSABLE_SEA_TEMP) return Infinity; // ignore too cold cells
-
-      const distanceCost = dist2(pack.cells.p[current], pack.cells.p[next]);
-      const typeModifier = ROUTE_TYPE_MODIFIERS[pack.cells.t[next]] || ROUTE_TYPE_MODIFIERS.default;
-      const connectionModifier = connections.has(`${current}-${next}`) ? 0.5 : 1;
-
-      const pathCost = distanceCost * typeModifier * connectionModifier;
-      return pathCost;
-    }
-  }
-
-  function buildLinks(routes) {
-    const links = {};
-
-    for (const {points, i: routeId} of routes) {
-      const cells = points.map(p => p[2]);
-
-      for (let i = 0; i < cells.length - 1; i++) {
-        const cellId = cells[i];
-        const nextCellId = cells[i + 1];
-
-        if (cellId !== nextCellId) {
-          if (!links[cellId]) links[cellId] = {};
-          links[cellId][nextCellId] = routeId;
-
-          if (!links[nextCellId]) links[nextCellId] = {};
-          links[nextCellId][cellId] = routeId;
+            if (!links[nextCellId]) links[nextCellId] = {};
+            links[nextCellId][cellId] = routeId;
+          }
         }
       }
-    }
 
-    return links;
+      return links;
+    }
   }
 
   function preparePointsArray() {
@@ -289,6 +249,109 @@ window.Routes = (function () {
     return data; // [[x, y, cell], [x, y, cell]];
   }
 
+  const MIN_PASSABLE_SEA_TEMP = -4;
+  const TYPE_MODIFIERS = {
+    "-1": 1, // coastline
+    "-2": 1.8, // sea
+    "-3": 4, // open sea
+    "-4": 6, // ocean
+    default: 8 // far ocean
+  };
+
+  function findPath(isWater, start, exit, connections) {
+    const {temp} = grid.cells;
+    const {cells} = pack;
+
+    const from = [];
+    const cost = [];
+    const queue = new FlatQueue();
+    queue.push(start, 0);
+
+    return isWater ? findWaterPath() : findLandPath();
+
+    function findLandPath() {
+      while (queue.length) {
+        const priority = queue.peekValue();
+        const next = queue.pop();
+
+        for (const neibCellId of cells.c[next]) {
+          if (neibCellId === exit) {
+            from[neibCellId] = next;
+            return from;
+          }
+
+          if (cells.h[neibCellId] < 20) continue; // ignore water cells
+          const habitability = biomesData.habitability[cells.biome[neibCellId]];
+          if (!habitability) continue; // inhabitable cells are not passable (eg. lava, glacier)
+
+          const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
+          const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
+          const heightModifier = 1 + Math.max(cells.h[neibCellId] - 25, 25) / 25; // [1, 3];
+          const connectionModifier = connections.has(`${next}-${neibCellId}`) ? 1 : 2;
+          const burgModifier = cells.burg[neibCellId] ? 1 : 3;
+
+          const cellsCost = distanceCost * habitabilityModifier * heightModifier * connectionModifier * burgModifier;
+          const totalCost = priority + cellsCost;
+
+          if (totalCost >= cost[neibCellId]) continue;
+          from[neibCellId] = next;
+          cost[neibCellId] = totalCost;
+          queue.push(neibCellId, totalCost);
+        }
+      }
+
+      return null; // path is not found
+    }
+
+    function findWaterPath() {
+      while (queue.length) {
+        const priority = queue.peekValue();
+        const next = queue.pop();
+
+        for (const neibCellId of cells.c[next]) {
+          if (neibCellId === exit) {
+            from[neibCellId] = next;
+            return from;
+          }
+
+          if (cells.h[neibCellId] >= 20) continue; // ignore land cells
+          if (temp[cells.g[neibCellId]] < MIN_PASSABLE_SEA_TEMP) continue; // ignore too cold cells
+
+          const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
+          const typeModifier = TYPE_MODIFIERS[cells.t[neibCellId]] || TYPE_MODIFIERS.default;
+          const connectionModifier = connections.has(`${next}-${neibCellId}`) ? 1 : 2;
+
+          const cellsCost = distanceCost * typeModifier * connectionModifier;
+          const totalCost = priority + cellsCost;
+
+          if (totalCost >= cost[neibCellId]) continue;
+          from[neibCellId] = next;
+          cost[neibCellId] = totalCost;
+          queue.push(neibCellId, totalCost);
+        }
+      }
+
+      return null; // path is not found
+    }
+  }
+
+  function restorePath(start, end, from) {
+    const cells = [];
+
+    let current = end;
+    let prev = end;
+
+    while (current !== start) {
+      cells.push(current);
+      prev = from[current];
+      current = prev;
+    }
+
+    cells.push(current);
+
+    return cells;
+  }
+
   function getRouteSegments(pathCells, connections) {
     const segments = [];
     let segment = [];
@@ -359,16 +422,21 @@ window.Routes = (function () {
 
   // connect cell with routes system by land
   function connect(cellId) {
-    const getCost = createCostEvaluator({isWater: false, connections: new Map()});
-    const pathCells = findPath(cellId, isConnected, getCost);
-    if (!pathCells) return;
+    if (isConnected(cellId)) return;
 
+    const {cells, routes} = pack;
+
+    const path = findConnectionPath(cellId);
+    if (!path) return;
+
+    const pathCells = restorePath(...path);
     const pointsArray = preparePointsArray();
     const points = getPoints("trails", pathCells, pointsArray);
-    const feature = pack.cells.f[cellId];
-    const routeId = getNextId();
+    const feature = cells.f[cellId];
+
+    const routeId = Math.max(...routes.map(route => route.i)) + 1;
     const newRoute = {i: routeId, group: "trails", feature, points};
-    pack.routes.push(newRoute);
+    routes.push(newRoute);
 
     for (let i = 0; i < pathCells.length; i++) {
       const cellId = pathCells[i];
@@ -378,6 +446,43 @@ window.Routes = (function () {
 
     return newRoute;
 
+    function findConnectionPath(start) {
+      const from = [];
+      const cost = [];
+      const queue = new FlatQueue();
+      queue.push(start, 0);
+
+      while (queue.length) {
+        const priority = queue.peekValue();
+        const next = queue.pop();
+
+        for (const neibCellId of cells.c[next]) {
+          if (isConnected(neibCellId)) {
+            from[neibCellId] = next;
+            return [start, neibCellId, from];
+          }
+
+          if (cells.h[neibCellId] < 20) continue; // ignore water cells
+          const habitability = biomesData.habitability[cells.biome[neibCellId]];
+          if (!habitability) continue; // inhabitable cells are not passable (eg. lava, glacier)
+
+          const distanceCost = dist2(cells.p[next], cells.p[neibCellId]);
+          const habitabilityModifier = 1 + Math.max(100 - habitability, 0) / 1000; // [1, 1.1];
+          const heightModifier = 1 + Math.max(cells.h[neibCellId] - 25, 25) / 25; // [1, 3];
+
+          const cellsCost = distanceCost * habitabilityModifier * heightModifier;
+          const totalCost = priority + cellsCost;
+
+          if (totalCost >= cost[neibCellId]) continue;
+          from[neibCellId] = next;
+          cost[neibCellId] = totalCost;
+          queue.push(neibCellId, totalCost);
+        }
+      }
+
+      return null; // path is not found
+    }
+
     function addConnection(from, to, routeId) {
       const routes = pack.cells.routes;
 
@@ -391,7 +496,7 @@ window.Routes = (function () {
 
   // utility functions
   function isConnected(cellId) {
-    const routes = pack.cells.routes;
+    const {routes} = pack.cells;
     return routes[cellId] && Object.keys(routes[cellId]).length > 0;
   }
 
@@ -402,34 +507,22 @@ window.Routes = (function () {
 
   function getRoute(from, to) {
     const routeId = pack.cells.routes[from]?.[to];
-    if (routeId === undefined) return null;
-
-    const route = pack.routes.find(route => route.i === routeId);
-    if (!route) return null;
-
-    return route;
+    return routeId === undefined ? null : pack.routes[routeId];
   }
 
   function hasRoad(cellId) {
     const connections = pack.cells.routes[cellId];
     if (!connections) return false;
-
-    return Object.values(connections).some(routeId => {
-      const route = pack.routes.find(route => route.i === routeId);
-      if (!route) return false;
-      return route.group === "roads";
-    });
+    return Object.values(connections).some(routeId => pack.routes[routeId].group === "roads");
   }
 
   function isCrossroad(cellId) {
     const connections = pack.cells.routes[cellId];
     if (!connections) return false;
-    if (Object.keys(connections).length > 3) return true;
-    const roadConnections = Object.values(connections).filter(routeId => {
-      const route = pack.routes.find(route => route.i === routeId);
-      return route?.group === "roads";
-    });
-    return roadConnections.length > 2;
+    return (
+      Object.keys(connections).length > 3 ||
+      Object.values(connections).filter(routeId => pack.routes[routeId].group === "roads").length > 2
+    );
   }
 
   // name generator data
@@ -613,16 +706,11 @@ window.Routes = (function () {
     return path.getTotalLength();
   }
 
-  function getNextId() {
-    return pack.routes.length ? Math.max(...pack.routes.map(r => r.i)) + 1 : 0;
-  }
-
   function remove(route) {
     const routes = pack.cells.routes;
 
     for (const point of route.points) {
       const from = point[2];
-      if (!routes[from]) continue;
 
       for (const [to, routeId] of Object.entries(routes[from])) {
         if (routeId === route.i) {
@@ -633,12 +721,14 @@ window.Routes = (function () {
     }
 
     pack.routes = pack.routes.filter(r => r.i !== route.i);
-    viewbox.select("#route" + route.i).remove();
+    viewbox
+      .select("#routes")
+      .select("#route" + route.i)
+      .remove();
   }
 
   return {
     generate,
-    buildLinks,
     connect,
     isConnected,
     areConnected,
@@ -648,7 +738,6 @@ window.Routes = (function () {
     generateName,
     getPath,
     getLength,
-    getNextId,
     remove
   };
 })();
diff --git a/modules/submap.js b/modules/submap.js
index 3c783fb0..6a9593ca 100644
--- a/modules/submap.js
+++ b/modules/submap.js
@@ -1,26 +1,31 @@
 "use strict";
+/*
+Cell resampler module used by submapper and resampler (transform)
+main function: resample(options);
+*/
 
 window.Submap = (function () {
   const isWater = (pack, id) => pack.cells.h[id] < 20;
   const inMap = (x, y) => x > 0 && x < graphWidth && y > 0 && y < graphHeight;
 
-  /*
+  function resample(parentMap, options) {
+    /*
     generate new map based on an existing one (resampling parentMap)
     parentMap: {seed, grid, pack} from original map
     options = {
-      projection: f(Number,Number)->[Number, Number]
-                  function to calculate new coordinates
-      inverse: g(Number,Number)->[Number, Number]
-                inverse of f
-      depressRivers: Bool     carve out riverbeds?
-      smoothHeightMap: Bool   run smooth filter on heights
-      addLakesInDepressions:  call FMG original funtion on heightmap
+          projection: f(Number,Number)->[Number, Number]
+                      function to calculate new coordinates
+          inverse: g(Number,Number)->[Number, Number]
+                    inverse of f
+          depressRivers: Bool     carve out riverbeds?
+          smoothHeightMap: Bool   run smooth filter on heights
+          addLakesInDepressions:  call FMG original funtion on heightmap
 
-      lockMarkers: Bool       Auto lock all copied markers
-      lockBurgs: Bool         Auto lock all copied burgs
+          lockMarkers: Bool       Auto lock all copied markers
+          lockBurgs: Bool         Auto lock all copied burgs
       }
     */
-  function resample(parentMap, options) {
+
     const projection = options.projection;
     const inverse = options.inverse;
     const stage = s => INFO && console.info("SUBMAP:", s);
@@ -31,7 +36,9 @@ window.Submap = (function () {
     seed = parentMap.seed;
     Math.random = aleaPRNG(seed);
     INFO && console.group("SubMap with seed: " + seed);
+    DEBUG && console.info("Using Options:", options);
 
+    // create new grid
     applyGraphSize();
     grid = generateGrid();
 
@@ -46,7 +53,7 @@ window.Submap = (function () {
       }
     };
 
-    stage("Resampling heightmap, temperature and precipitation");
+    stage("Resampling heightmap, temperature and precipitation.");
     // resample heightmap from old WorldState
     const n = grid.points.length;
     grid.cells.h = new Uint8Array(n); // heightmap
@@ -80,7 +87,7 @@ window.Submap = (function () {
     }
 
     if (options.depressRivers) {
-      stage("Generating riverbeds");
+      stage("Generating riverbeds.");
       const rbeds = new Uint16Array(grid.cells.i.length);
 
       // and erode riverbeds
@@ -89,7 +96,7 @@ window.Submap = (function () {
           if (oldpc < 0) return; // ignore out-of-map marker (-1)
           const oldc = parentMap.pack.cells.g[oldpc];
           const targetCells = forwardGridMap[oldc];
-          if (!targetCells) throw "TargetCell shouldn't be empty";
+          if (!targetCells) throw "TargetCell shouldn't be empty.";
           targetCells.forEach(c => {
             if (grid.cells.h[c] < 20) return;
             rbeds[c] = 1;
@@ -103,27 +110,33 @@ window.Submap = (function () {
       });
     }
 
-    stage("Detect features, ocean and generating lakes");
-    Features.markupGrid();
+    stage("Detect features, ocean and generating lakes.");
+    markFeatures();
+    markupGridOcean();
 
-    addLakesInDeepDepressions();
-    openNearSeaLakes();
+    // Warning: addLakesInDeepDepressions can be very slow!
+    if (options.addLakesInDepressions) {
+      addLakesInDeepDepressions();
+      openNearSeaLakes();
+    }
 
     OceanLayers();
 
     calculateMapCoordinates();
-    calculateTemperatures();
-    generatePrecipitation();
-    stage("Cell cleanup");
+    // calculateTemperatures();
+    // generatePrecipitation();
+    stage("Cell cleanup.");
     reGraph();
 
     // remove misclassified cells
-    stage("Define coastline");
-    Features.markupPack();
-    createDefaultRuler();
+    stage("Define coastline.");
+    drawCoastline();
 
-    // Packed Graph
+    /****************************************************/
+    /* Packed Graph */
+    /****************************************************/
     const oldCells = parentMap.pack.cells;
+    // const reverseMap = new Map(); // cellmap from new -> oldcell
     const forwardMap = parentMap.pack.cells.p.map(_ => []); // old -> [newcelllist]
 
     const pn = pack.cells.i.length;
@@ -134,7 +147,7 @@ window.Submap = (function () {
     cells.religion = new Uint16Array(pn);
     cells.province = new Uint16Array(pn);
 
-    stage("Resampling culture, state and religion map");
+    stage("Resampling culture, state and religion map.");
     for (const [id, gridCellId] of cells.g.entries()) {
       const oldGridId = reverseGridMap[gridCellId];
       if (oldGridId === undefined) {
@@ -193,12 +206,14 @@ window.Submap = (function () {
       forwardMap[oldid].push(id);
     }
 
-    stage("Regenerating river network");
+    stage("Regenerating river network.");
     Rivers.generate();
+    drawRivers();
+    Lakes.defineGroup();
 
     // biome calculation based on (resampled) grid.cells.temp and prec
     // it's safe to recalculate.
-    stage("Regenerating Biome");
+    stage("Regenerating Biome.");
     Biomes.define();
     // recalculate suitability and population
     // TODO: normalize according to the base-map
@@ -219,11 +234,11 @@ window.Submap = (function () {
       c.center = newCenters.length ? newCenters[0] : pack.cells.culture.findIndex(x => x === i);
     });
 
-    stage("Porting and locking burgs");
+    stage("Porting and locking burgs.");
     copyBurgs(parentMap, projection, options);
 
     // transfer states, mark states without land as removed.
-    stage("Porting states");
+    stage("Porting states.");
     const validStates = new Set(pack.cells.state);
     pack.states = parentMap.pack.states;
     // keep valid states and neighbors only
@@ -237,10 +252,9 @@ window.Submap = (function () {
         ? pack.burgs[s.capital].cell // capital is the best bet
         : pack.cells.state.findIndex(x => x === i); // otherwise use the first valid cell
     });
-    BurgsAndStates.getPoles();
 
     // transfer provinces, mark provinces without land as removed.
-    stage("Porting provinces");
+    stage("Porting provinces.");
     const validProvinces = new Set(pack.cells.province);
     pack.provinces = parentMap.pack.provinces;
     // mark uneccesary provinces
@@ -253,15 +267,20 @@ window.Submap = (function () {
       const newCenters = forwardMap[p.center];
       p.center = newCenters.length ? newCenters[0] : pack.cells.province.findIndex(x => x === i);
     });
-    Provinces.getPoles();
 
-    stage("Regenerating routes network");
+    BurgsAndStates.drawBurgs();
+
+    stage("Regenerating routes network.");
     regenerateRoutes();
 
-    Rivers.specify();
-    Features.specify();
+    drawStates();
+    drawBorders();
+    drawStateLabels();
 
-    stage("Porting military");
+    Rivers.specify();
+    Lakes.generateName();
+
+    stage("Porting military.");
     for (const s of pack.states) {
       if (!s.military) continue;
       for (const m of s.military) {
@@ -272,8 +291,9 @@ window.Submap = (function () {
       }
       s.military = s.military.filter(m => m.cell).map((m, i) => ({...m, i}));
     }
+    Military.redraw();
 
-    stage("Copying markers");
+    stage("Copying markers.");
     for (const m of pack.markers) {
       const [x, y] = projection(m.x, m.y);
       if (!inMap(x, y)) {
@@ -287,12 +307,14 @@ window.Submap = (function () {
     }
     if (layerIsOn("toggleMarkers")) drawMarkers();
 
-    stage("Regenerating Zones");
-    Zones.generate();
+    stage("Redraw emblems.");
+    drawEmblems();
+    stage("Regenerating Zones.");
+    addZones();
     Names.getMapName();
-    stage("Restoring Notes");
+    stage("Restoring Notes.");
     notes = parentMap.notes;
-    stage("Submap done");
+    stage("Submap done.");
 
     WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`);
     showStatistics();
@@ -372,7 +394,7 @@ window.Submap = (function () {
           b.removed = true;
           return;
         }
-
+        DEBUG && console.info(`Moving ${b.name} from ${cityCell} to ${newCell} near ${neighbor}.`);
         [b.x, b.y] = b.port ? getCloseToEdgePoint(newCell, neighbor) : cells.p[newCell];
         if (b.port) b.port = cells.f[neighbor]; // copy feature number
         b.cell = newCell;
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index f0b29661..81356130 100644
--- a/modules/ui/3d.js
+++ b/modules/ui/3d.js
@@ -373,7 +373,7 @@ window.ThreeD = (function () {
       }
 
       // icons
-      if (layerIsOn("toggleBurgIcons")) {
+      if (layerIsOn("toggleIcons")) {
         const geometry = isCity ? city_icon_geometry : town_icon_geometry;
         const material = isCity ? city_icon_material : town_icon_material;
         const iconMesh = new THREE.Mesh(geometry, material);
@@ -444,7 +444,6 @@ window.ThreeD = (function () {
       const url = await getMapURL("mesh", {
         noLabels: options.labels3d,
         noWater: options.extendedWater,
-        noViewbox: true,
         fullMap: true
       });
       const canvas = document.createElement("canvas");
@@ -624,7 +623,7 @@ window.ThreeD = (function () {
       material.map = texture;
       if (addMesh) addGlobe3dMesh();
     };
-    img2.src = await getMapURL("mesh", {noScaleBar: true, fullMap: true, noVignette: true});
+    img2.src = await getMapURL("mesh", {noScaleBar: true, fullMap: true});
   }
 
   function addGlobe3dMesh() {
diff --git a/modules/ui/ai-generator.js b/modules/ui/ai-generator.js
deleted file mode 100644
index 8ef13cf6..00000000
--- a/modules/ui/ai-generator.js
+++ /dev/null
@@ -1,228 +0,0 @@
-"use strict";
-
-const PROVIDERS = {
-  openai: {
-    keyLink: "https://platform.openai.com/account/api-keys",
-    generate: generateWithOpenAI
-  },
-  anthropic: {
-    keyLink: "https://console.anthropic.com/account/keys",
-    generate: generateWithAnthropic
-  },
-  ollama: {
-    keyLink: "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Ollama-text-generation",
-    generate: generateWithOllama
-  }
-};
-
-const DEFAULT_MODEL = "gpt-4o-mini";
-
-const MODELS = {
-  "gpt-4o-mini": "openai",
-  "chatgpt-4o-latest": "openai",
-  "gpt-4o": "openai",
-  "gpt-4-turbo": "openai",
-  o3: "openai",
-  "o3-mini": "openai",
-  "o3-pro": "openai",
-  "o4-mini": "openai",
-  "claude-opus-4-20250514": "anthropic",
-  "claude-sonnet-4-20250514": "anthropic",
-  "claude-3-5-haiku-latest": "anthropic",
-  "claude-3-5-sonnet-latest": "anthropic",
-  "claude-3-opus-latest": "anthropic",
-  "ollama (local models)": "ollama"
-};
-
-const SYSTEM_MESSAGE = "I'm working on my fantasy map.";
-
-async function generateWithOpenAI({key, model, prompt, temperature, onContent}) {
-  const headers = {
-    "Content-Type": "application/json",
-    Authorization: `Bearer ${key}`
-  };
-
-  const messages = [
-    {role: "system", content: SYSTEM_MESSAGE},
-    {role: "user", content: prompt}
-  ];
-
-  const response = await fetch("https://api.openai.com/v1/chat/completions", {
-    method: "POST",
-    headers,
-    body: JSON.stringify({model, messages, temperature, stream: true})
-  });
-
-  const getContent = json => {
-    const content = json.choices?.[0]?.delta?.content;
-    if (content) onContent(content);
-  };
-
-  await handleStream(response, getContent);
-}
-
-async function generateWithAnthropic({key, model, prompt, temperature, onContent}) {
-  const headers = {
-    "Content-Type": "application/json",
-    "x-api-key": key,
-    "anthropic-version": "2023-06-01",
-    "anthropic-dangerous-direct-browser-access": "true"
-  };
-
-  const messages = [{role: "user", content: prompt}];
-
-  const response = await fetch("https://api.anthropic.com/v1/messages", {
-    method: "POST",
-    headers,
-    body: JSON.stringify({model, system: SYSTEM_MESSAGE, messages, temperature, max_tokens: 4096, stream: true})
-  });
-
-  const getContent = json => {
-    const content = json.delta?.text;
-    if (content) onContent(content);
-  };
-
-  await handleStream(response, getContent);
-}
-
-async function generateWithOllama({key, model, prompt, temperature, onContent}) {
-  const ollamaModelName = key; // for Ollama, 'key' is the actual model name entered by the user
-
-  const response = await fetch("http://localhost:11434/api/generate", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({
-      model: ollamaModelName,
-      prompt,
-      system: SYSTEM_MESSAGE,
-      options: {temperature},
-      stream: true
-    })
-  });
-
-  const getContent = json => {
-    if (json.response) onContent(json.response);
-  };
-
-  await handleStream(response, getContent);
-}
-
-async function handleStream(response, getContent) {
-  if (!response.ok) {
-    let errorMessage = `Failed to generate (${response.status} ${response.statusText})`;
-    try {
-      const json = await response.json();
-      errorMessage = json.error?.message || json.error || errorMessage;
-    } catch {}
-    throw new Error(errorMessage);
-  }
-
-  const reader = response.body.getReader();
-  const decoder = new TextDecoder("utf-8");
-  let buffer = "";
-
-  while (true) {
-    const {done, value} = await reader.read();
-    if (done) break;
-
-    buffer += decoder.decode(value, {stream: true});
-    const lines = buffer.split("\n");
-
-    for (let i = 0; i < lines.length - 1; i++) {
-      const line = lines[i].trim();
-      if (!line) continue;
-      if (line === "data: [DONE]") break;
-
-      try {
-        const parsed = line.startsWith("data: ") ? JSON.parse(line.slice(6)) : JSON.parse(line);
-        getContent(parsed);
-      } catch (error) {
-        ERROR && console.error("Failed to parse line:", line, error);
-      }
-    }
-
-    buffer = lines.at(-1);
-  }
-}
-
-function generateWithAi(defaultPrompt, onApply) {
-  updateValues();
-
-  $("#aiGenerator").dialog({
-    title: "AI Text Generator",
-    position: {my: "center", at: "center", of: "svg"},
-    resizable: false,
-    buttons: {
-      Generate: function (e) {
-        generate(e.target);
-      },
-      Apply: function () {
-        const result = byId("aiGeneratorResult").value;
-        if (!result) return tip("No result to apply", true, "error", 4000);
-        onApply(result);
-        $(this).dialog("close");
-      },
-      Close: function () {
-        $(this).dialog("close");
-      }
-    }
-  });
-
-  if (modules.generateWithAi) return;
-  modules.generateWithAi = true;
-
-  byId("aiGeneratorKeyHelp").on("click", function (e) {
-    const model = byId("aiGeneratorModel").value;
-    const provider = MODELS[model];
-    openURL(PROVIDERS[provider].keyLink);
-  });
-
-  function updateValues() {
-    byId("aiGeneratorResult").value = "";
-    byId("aiGeneratorPrompt").value = defaultPrompt;
-    byId("aiGeneratorTemperature").value = localStorage.getItem("fmg-ai-temperature") || "1";
-
-    const select = byId("aiGeneratorModel");
-    select.options.length = 0;
-    Object.keys(MODELS).forEach(model => select.options.add(new Option(model, model)));
-    select.value = localStorage.getItem("fmg-ai-model");
-    if (!select.value || !MODELS[select.value]) select.value = DEFAULT_MODEL;
-
-    const provider = MODELS[select.value];
-    byId("aiGeneratorKey").value = localStorage.getItem(`fmg-ai-kl-${provider}`) || "";
-  }
-
-  async function generate(button) {
-    const key = byId("aiGeneratorKey").value;
-    if (!key) return tip("Please enter an API key", true, "error", 4000);
-
-    const model = byId("aiGeneratorModel").value;
-    if (!model) return tip("Please select a model", true, "error", 4000);
-    localStorage.setItem("fmg-ai-model", model);
-
-    const provider = MODELS[model];
-    localStorage.setItem(`fmg-ai-kl-${provider}`, key);
-
-    const prompt = byId("aiGeneratorPrompt").value;
-    if (!prompt) return tip("Please enter a prompt", true, "error", 4000);
-
-    const temperature = byId("aiGeneratorTemperature").valueAsNumber;
-    if (isNaN(temperature)) return tip("Temperature must be a number", true, "error", 4000);
-    localStorage.setItem("fmg-ai-temperature", temperature);
-
-    try {
-      button.disabled = true;
-      const resultArea = byId("aiGeneratorResult");
-      resultArea.disabled = true;
-      resultArea.value = "";
-      const onContent = content => (resultArea.value += content);
-
-      await PROVIDERS[provider].generate({key, model, prompt, temperature, onContent});
-    } catch (error) {
-      return tip(error.message, true, "error", 4000);
-    } finally {
-      button.disabled = false;
-      byId("aiGeneratorResult").disabled = false;
-    }
-  }
-}
diff --git a/modules/ui/battle-screen.js b/modules/ui/battle-screen.js
index d56ea3f8..12ad7bdd 100644
--- a/modules/ui/battle-screen.js
+++ b/modules/ui/battle-screen.js
@@ -36,31 +36,45 @@ class Battle {
     modules.Battle = true;
 
     // add listeners
-    byId("battleType").on("click", ev => this.toggleChange(ev));
-    byId("battleType").nextElementSibling.on("click", ev => Battle.prototype.context.changeType(ev));
-    byId("battleNameShow").on("click", () => Battle.prototype.context.showNameSection());
-    byId("battleNamePlace").on("change", ev => (Battle.prototype.context.place = ev.target.value));
-    byId("battleNameFull").on("change", ev => Battle.prototype.context.changeName(ev));
-    byId("battleNameCulture").on("click", () => Battle.prototype.context.generateName("culture"));
-    byId("battleNameRandom").on("click", () => Battle.prototype.context.generateName("random"));
-    byId("battleNameHide").on("click", this.hideNameSection);
-    byId("battleAddRegiment").on("click", this.addSide);
-    byId("battleRoll").on("click", () => Battle.prototype.context.randomize());
-    byId("battleRun").on("click", () => Battle.prototype.context.run());
-    byId("battleApply").on("click", () => Battle.prototype.context.applyResults());
-    byId("battleCancel").on("click", () => Battle.prototype.context.cancelResults());
-    byId("battleWiki").on("click", () => wiki("Battle-Simulator"));
+    document.getElementById("battleType").addEventListener("click", ev => this.toggleChange(ev));
+    document
+      .getElementById("battleType")
+      .nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changeType(ev));
+    document
+      .getElementById("battleNameShow")
+      .addEventListener("click", () => Battle.prototype.context.showNameSection());
+    document
+      .getElementById("battleNamePlace")
+      .addEventListener("change", ev => (Battle.prototype.context.place = ev.target.value));
+    document.getElementById("battleNameFull").addEventListener("change", ev => Battle.prototype.context.changeName(ev));
+    document
+      .getElementById("battleNameCulture")
+      .addEventListener("click", () => Battle.prototype.context.generateName("culture"));
+    document
+      .getElementById("battleNameRandom")
+      .addEventListener("click", () => Battle.prototype.context.generateName("random"));
+    document.getElementById("battleNameHide").addEventListener("click", this.hideNameSection);
+    document.getElementById("battleAddRegiment").addEventListener("click", this.addSide);
+    document.getElementById("battleRoll").addEventListener("click", () => Battle.prototype.context.randomize());
+    document.getElementById("battleRun").addEventListener("click", () => Battle.prototype.context.run());
+    document.getElementById("battleApply").addEventListener("click", () => Battle.prototype.context.applyResults());
+    document.getElementById("battleCancel").addEventListener("click", () => Battle.prototype.context.cancelResults());
+    document.getElementById("battleWiki").addEventListener("click", () => wiki("Battle-Simulator"));
 
-    byId("battlePhase_attackers").on("click", ev => this.toggleChange(ev));
-    byId("battlePhase_attackers").nextElementSibling.on("click", ev =>
-      Battle.prototype.context.changePhase(ev, "attackers")
-    );
-    byId("battlePhase_defenders").on("click", ev => this.toggleChange(ev));
-    byId("battlePhase_defenders").nextElementSibling.on("click", ev =>
-      Battle.prototype.context.changePhase(ev, "defenders")
-    );
-    byId("battleDie_attackers").on("click", () => Battle.prototype.context.rollDie("attackers"));
-    byId("battleDie_defenders").on("click", () => Battle.prototype.context.rollDie("defenders"));
+    document.getElementById("battlePhase_attackers").addEventListener("click", ev => this.toggleChange(ev));
+    document
+      .getElementById("battlePhase_attackers")
+      .nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changePhase(ev, "attackers"));
+    document.getElementById("battlePhase_defenders").addEventListener("click", ev => this.toggleChange(ev));
+    document
+      .getElementById("battlePhase_defenders")
+      .nextElementSibling.addEventListener("click", ev => Battle.prototype.context.changePhase(ev, "defenders"));
+    document
+      .getElementById("battleDie_attackers")
+      .addEventListener("click", () => Battle.prototype.context.rollDie("attackers"));
+    document
+      .getElementById("battleDie_defenders")
+      .addEventListener("click", () => Battle.prototype.context.rollDie("defenders"));
   }
 
   defineType() {
@@ -83,16 +97,20 @@ class Battle {
   }
 
   setType() {
-    byId("battleType").className = "icon-button-" + this.type;
+    document.getElementById("battleType").className = "icon-button-" + this.type;
 
-    const sideSpecific = byId("battlePhases_" + this.type + "_attackers");
-    const attackers = sideSpecific ? sideSpecific.content : byId("battlePhases_" + this.type).content;
-    const defenders = sideSpecific ? byId("battlePhases_" + this.type + "_defenders").content : attackers;
+    const sideSpecific = document.getElementById("battlePhases_" + this.type + "_attackers");
+    const attackers = sideSpecific
+      ? sideSpecific.content
+      : document.getElementById("battlePhases_" + this.type).content;
+    const defenders = sideSpecific
+      ? document.getElementById("battlePhases_" + this.type + "_defenders").content
+      : attackers;
 
-    byId("battlePhase_attackers").nextElementSibling.innerHTML = "";
-    byId("battlePhase_defenders").nextElementSibling.innerHTML = "";
-    byId("battlePhase_attackers").nextElementSibling.append(attackers.cloneNode(true));
-    byId("battlePhase_defenders").nextElementSibling.append(defenders.cloneNode(true));
+    document.getElementById("battlePhase_attackers").nextElementSibling.innerHTML = "";
+    document.getElementById("battlePhase_defenders").nextElementSibling.innerHTML = "";
+    document.getElementById("battlePhase_attackers").nextElementSibling.append(attackers.cloneNode(true));
+    document.getElementById("battlePhase_defenders").nextElementSibling.append(defenders.cloneNode(true));
   }
 
   definePlace() {
@@ -131,9 +149,7 @@ class Battle {
 
     for (const u of options.military) {
       const label = capitalize(u.name.replace(/_/g, " "));
-      const isExternal = u.icon.startsWith("http") || u.icon.startsWith("data:image");
-      const iconHTML = isExternal ? `<img src="${u.icon}" width="15" height="15">` : u.icon;
-      headers += `<th data-tip="${label}">${iconHTML}</th>`;
+      headers += `<th data-tip="${label}">${u.icon}</th>`;
     }
 
     headers += "<th data-tip='Total military''>Total</th></tr></thead>";
@@ -147,13 +163,9 @@ class Battle {
     const state = pack.states[regiment.state];
     const distance = (Math.hypot(this.y - regiment.by, this.x - regiment.bx) * distanceScale) | 0; // distance between regiment and its base
     const color = state.color[0] === "#" ? state.color : "#999";
-
-    const isExternal = regiment.icon.startsWith("http") || regiment.icon.startsWith("data:image");
-    const iconHtml = isExternal
-      ? `<image href="${regiment.icon}" x="0.1em" y="0.1em" width="1.2em" height="1.2em"></image>`
-      : `<text x="50%" y="1em" style="text-anchor: middle">${regiment.icon}</text>`;
     const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em; stroke: #333">
-      <rect x="0" y="0" width="100%" height="100%" fill="${color}"></rect>${iconHtml}</svg>`;
+      <rect x="0" y="0" width="100%" height="100%" fill="${color}"></rect>
+      <text x="0" y="1.04em" style="">${regiment.icon}</text></svg>`;
     const body = `<tbody id="battle${state.i}-${regiment.i}">`;
 
     let initial = `<tr class="battleInitial"><td>${icon}</td><td class="regiment" data-tip="${
@@ -188,7 +200,7 @@ class Battle {
   }
 
   addSide() {
-    const body = byId("regimentSelectorBody");
+    const body = document.getElementById("regimentSelectorBody");
     const context = Battle.prototype.context;
     const regiments = pack.states
       .filter(s => s.military && !s.removed)
@@ -234,7 +246,7 @@ class Battle {
     });
 
     applySorting(regimentSelectorHeader);
-    body.on("click", selectLine);
+    body.addEventListener("click", selectLine);
 
     function selectLine(ev) {
       if (ev.target.className === "inactive") {
@@ -265,7 +277,7 @@ class Battle {
         const shift = side === "attackers" ? attackers.length * -8 : (defenders.length - 1) * 8;
         regiment.px = regiment.x;
         regiment.py = regiment.y;
-        moveRegiment(regiment, defenders[0].x, defenders[0].y + shift);
+        Military.moveRegiment(regiment, defenders[0].x, defenders[0].y + shift);
       });
     }
 
@@ -277,15 +289,15 @@ class Battle {
 
   showNameSection() {
     document.querySelectorAll("#battleBottom > button").forEach(el => (el.style.display = "none"));
-    byId("battleNameSection").style.display = "inline-block";
+    document.getElementById("battleNameSection").style.display = "inline-block";
 
-    byId("battleNamePlace").value = this.place;
-    byId("battleNameFull").value = this.name;
+    document.getElementById("battleNamePlace").value = this.place;
+    document.getElementById("battleNameFull").value = this.name;
   }
 
   hideNameSection() {
     document.querySelectorAll("#battleBottom > button").forEach(el => (el.style.display = "inline-block"));
-    byId("battleNameSection").style.display = "none";
+    document.getElementById("battleNameSection").style.display = "none";
   }
 
   changeName(ev) {
@@ -298,8 +310,8 @@ class Battle {
       type === "culture"
         ? Names.getCulture(pack.cells.culture[this.cell], null, null, "")
         : Names.getBase(rand(nameBases.length - 1));
-    byId("battleNamePlace").value = this.place = place;
-    byId("battleNameFull").value = this.name = this.defineName();
+    document.getElementById("battleNamePlace").value = this.place = place;
+    document.getElementById("battleNameFull").value = this.name = this.defineName();
     $("#battleScreen").dialog({title: this.name});
   }
 
@@ -483,7 +495,7 @@ class Battle {
     this[side].power =
       d3.sum(options.military.map(u => (forces[u.name] || 0) * u.power * scheme[phase][u.type])) / adjuster;
     const UIvalue = this[side].power ? Math.max(this[side].power | 0, 1) : 0;
-    byId("battlePower_" + side).innerHTML = UIvalue;
+    document.getElementById("battlePower_" + side).innerHTML = UIvalue;
   }
 
   getInitialMorale() {
@@ -497,7 +509,7 @@ class Battle {
   }
 
   updateMorale(side) {
-    const morale = byId("battleMorale_" + side);
+    const morale = document.getElementById("battleMorale_" + side);
     morale.dataset.tip = morale.dataset.tip.replace(morale.value, "");
     morale.value = this[side].morale | 0;
     morale.dataset.tip += morale.value;
@@ -512,7 +524,7 @@ class Battle {
   }
 
   rollDie(side) {
-    const el = byId("battleDie_" + side);
+    const el = document.getElementById("battleDie_" + side);
     const prev = +el.innerHTML;
     do {
       el.innerHTML = rand(1, 6);
@@ -660,11 +672,11 @@ class Battle {
     this.attackers.phase = phase[0];
     this.defenders.phase = phase[1];
 
-    const buttonA = byId("battlePhase_attackers");
+    const buttonA = document.getElementById("battlePhase_attackers");
     buttonA.className = "icon-button-" + this.attackers.phase;
     buttonA.dataset.tip = buttonA.nextElementSibling.querySelector("[data-phase='" + phase[0] + "']").dataset.tip;
 
-    const buttonD = byId("battlePhase_defenders");
+    const buttonD = document.getElementById("battlePhase_defenders");
     buttonD.className = "icon-button-" + this.defenders.phase;
     buttonD.dataset.tip = buttonD.nextElementSibling.querySelector("[data-phase='" + phase[1] + "']").dataset.tip;
   }
@@ -748,7 +760,7 @@ class Battle {
 
   updateTable(side) {
     for (const r of this[side].regiments) {
-      const tbody = byId("battle" + r.state + "-" + r.i);
+      const tbody = document.getElementById("battle" + r.state + "-" + r.i);
       const battleCasualties = tbody.querySelector(".battleCasualties");
       const battleSurvivors = tbody.querySelector(".battleSurvivors");
 
@@ -782,7 +794,7 @@ class Battle {
     button.style.opacity = 0.5;
     div.style.display = "block";
 
-    document.getElementsByTagName("body")[0].on("click", hideSection, {once: true});
+    document.getElementsByTagName("body")[0].addEventListener("click", hideSection, {once: true});
   }
 
   changeType(ev) {
@@ -799,7 +811,7 @@ class Battle {
   changePhase(ev, side) {
     if (ev.target.tagName !== "BUTTON") return;
     const phase = (this[side].phase = ev.target.dataset.phase);
-    const button = byId("battlePhase_" + side);
+    const button = document.getElementById("battlePhase_" + side);
     button.className = "icon-button-" + phase;
     button.dataset.tip = ev.target.dataset.tip;
     this.calculateStrength(side);
@@ -861,8 +873,6 @@ class Battle {
       r.u = Object.assign({}, r.survivors);
       r.a = d3.sum(Object.values(r.u)); // reg total
       armies.select(`g#${id} > text`).text(Military.getTotal(r)); // update reg box
-
-      moveRegiment(r, r.px, r.py); // move regiment back to initial position
     }
 
     const i = last(pack.markers)?.i + 1 || 0;
@@ -871,7 +881,7 @@ class Battle {
       const marker = {i, x: this.x, y: this.y, cell: this.cell, icon: "⚔️", type: "battlefields", dy: 52};
       pack.markers.push(marker);
       const markerHTML = drawMarker(marker);
-      byId("markers").insertAdjacentHTML("beforeend", markerHTML);
+      document.getElementById("markers").insertAdjacentHTML("beforeend", markerHTML);
     }
 
     const getSide = (regs, n) =>
@@ -899,9 +909,7 @@ class Battle {
 
   cancelResults() {
     // move regiments back to initial positions
-    this.attackers.regiments.forEach(r => moveRegiment(r, r.px, r.py));
-    this.defenders.regiments.forEach(r => moveRegiment(r, r.px, r.py));
-
+    this.attackers.regiments.concat(this.defenders.regiments).forEach(r => Military.moveRegiment(r, r.px, r.py));
     $("#battleScreen").dialog("close");
     this.cleanData();
   }
diff --git a/modules/ui/biomes-editor.js b/modules/ui/biomes-editor.js
index 8c50993d..8f2400f0 100644
--- a/modules/ui/biomes-editor.js
+++ b/modules/ui/biomes-editor.js
@@ -317,7 +317,7 @@ function editBiomes() {
   }
 
   function regenerateIcons() {
-    drawReliefIcons();
+    ReliefIcons();
     if (!layerIsOn("toggleRelief")) toggleRelief();
   }
 
@@ -383,7 +383,7 @@ function editBiomes() {
   }
 
   function dragBiomeBrush() {
-    const r = +biomesBrush.value;
+    const r = +biomesManuallyBrush.value;
 
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
@@ -425,7 +425,7 @@ function editBiomes() {
   function moveBiomeBrush() {
     showMainTip();
     const point = d3.mouse(this);
-    const radius = +biomesBrush.value;
+    const radius = +biomesManuallyBrush.value;
     moveCircle(point[0], point[1], radius);
   }
 
diff --git a/modules/ui/burg-editor.js b/modules/ui/burg-editor.js
index 13e32850..a90a11d8 100644
--- a/modules/ui/burg-editor.js
+++ b/modules/ui/burg-editor.js
@@ -2,7 +2,7 @@
 function editBurg(id) {
   if (customization) return;
   closeDialogs(".stable");
-  if (!layerIsOn("toggleBurgIcons")) toggleBurgIcons();
+  if (!layerIsOn("toggleIcons")) toggleIcons();
   if (!layerIsOn("toggleLabels")) toggleLabels();
 
   const burg = id || d3.event.target.dataset.id;
@@ -47,7 +47,6 @@ function editBurg(id) {
   byId("burgEmblem").addEventListener("click", openEmblemEdit);
   byId("burgTogglePreview").addEventListener("click", toggleBurgPreview);
   byId("burgEditEmblem").addEventListener("click", openEmblemEdit);
-  byId("burgLocate").addEventListener("click", zoomIntoBurg);
   byId("burgRelocate").addEventListener("click", toggleRelocateBurg);
   byId("burglLegend").addEventListener("click", editBurgLegend);
   byId("burgLock").addEventListener("click", toggleBurgLockButton);
@@ -75,8 +74,7 @@ function editBurg(id) {
 
     const temperature = grid.cells.temp[pack.cells.g[b.cell]];
     byId("burgTemperature").innerHTML = convertTemperature(temperature);
-    byId("burgTemperatureLikeIn").dataset.tip =
-      "Average yearly temperature is like in " + getTemperatureLikeness(temperature);
+    byId("burgTemperatureLikeIn").innerHTML = getTemperatureLikeness(temperature);
     byId("burgElevation").innerHTML = getHeight(pack.cells.h[b.cell]);
 
     // toggle features
@@ -230,26 +228,34 @@ function editBurg(id) {
     const burgsToRemove = burgsInGroup.filter(b => !(pack.burgs[b].capital || pack.burgs[b].lock));
     const capital = burgsToRemove.length < burgsInGroup.length;
 
-    confirmationDialog({
-      title: "Remove burg group",
-      message: `Are you sure you want to remove ${
-        basic || capital ? "all unlocked elements in the burg group" : "the entire burg group"
-      }?<br />Please note that capital or locked burgs will not be deleted. <br /><br />Burgs to be removed: ${
+    alertMessage.innerHTML = /* html */ `Are you sure you want to remove ${
+      basic || capital ? "all unlocked elements in the burg group" : "the entire burg group"
+    }?
+      <br />Please note that capital or locked burgs will not be deleted. <br /><br />Burgs to be removed: ${
         burgsToRemove.length
-      }. This action cannot be reverted`,
-      confirm: "Remove",
-      onConfirm: () => {
-        $("#burgEditor").dialog("close");
-        hideGroupSection();
-        burgsToRemove.forEach(b => removeBurg(b));
+      }`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Remove burg group",
+      buttons: {
+        Remove: function () {
+          $(this).dialog("close");
+          $("#burgEditor").dialog("close");
+          hideGroupSection();
+          burgsToRemove.forEach(b => removeBurg(b));
 
-        if (!basic && !capital) {
-          const labelG = document.querySelector("#burgLabels > #" + group.id);
-          const iconG = document.querySelector("#burgIcons > #" + group.id);
-          const anchorG = document.querySelector("#anchors > #" + group.id);
-          if (labelG) labelG.remove();
-          if (iconG) iconG.remove();
-          if (anchorG) anchorG.remove();
+          if (!basic && !capital) {
+            // entirely remove group
+            const labelG = document.querySelector("#burgLabels > #" + group.id);
+            const iconG = document.querySelector("#burgIcons > #" + group.id);
+            const anchorG = document.querySelector("#anchors > #" + group.id);
+            if (labelG) labelG.remove();
+            if (iconG) iconG.remove();
+            if (anchorG) anchorG.remove();
+          }
+        },
+        Cancel: function () {
+          $(this).dialog("close");
         }
       }
     });
@@ -399,14 +405,6 @@ function editBurg(id) {
     byId("burgTogglePreview").className = options.showBurgPreview ? "icon-map" : "icon-map-o";
   }
 
-  function zoomIntoBurg() {
-    const id = +elSelected.attr("data-id");
-    const burg = pack.burgs[id];
-    const x = burg.x;
-    const y = burg.y;
-    zoomTo(x, y, 8, 2000);
-  }
-
   function toggleRelocateBurg() {
     const toggler = byId("toggleCells");
     byId("burgRelocate").classList.toggle("pressed");
@@ -511,13 +509,19 @@ function editBurg(id) {
         }
       });
     } else {
-      confirmationDialog({
+      alertMessage.innerHTML = "Are you sure you want to remove the burg?";
+      $("#alert").dialog({
+        resizable: false,
         title: "Remove burg",
-        message: "Are you sure you want to remove the burg? <br>This action cannot be reverted",
-        confirm: "Remove",
-        onConfirm: () => {
-          removeBurg(id); // see Editors module
-          $("#burgEditor").dialog("close");
+        buttons: {
+          Remove: function () {
+            $(this).dialog("close");
+            removeBurg(id); // see Editors module
+            $("#burgEditor").dialog("close");
+          },
+          Cancel: function () {
+            $(this).dialog("close");
+          }
         }
       });
     }
@@ -531,47 +535,46 @@ function editBurg(id) {
 }
 
 // in °C, array from -1 °C; source: https://en.wikipedia.org/wiki/List_of_cities_by_average_temperature
-const meanTempCityMap = {
-  "-5": "Snag (Yukon)",
-  "-4": "Yellowknife (Canada)",
-  "-3": "Okhotsk (Russia)",
-  "-2": "Fairbanks (Alaska)",
-  "-1": "Nuuk (Greenland)",
-  0: "Murmansk (Russia)",
-  1: "Arkhangelsk (Russia)",
-  2: "Anchorage (Alaska)",
-  3: "Tromsø (Norway)",
-  4: "Reykjavik (Iceland)",
-  5: "Harbin (China)",
-  6: "Stockholm (Sweden)",
-  7: "Montreal (Canada)",
-  8: "Prague (Czechia)",
-  9: "Copenhagen (Denmark)",
-  10: "London (England)",
-  11: "Antwerp (Belgium)",
-  12: "Paris (France)",
-  13: "Milan (Italy)",
-  14: "Washington (D.C.)",
-  15: "Rome (Italy)",
-  16: "Dubrovnik (Croatia)",
-  17: "Lisbon (Portugal)",
-  18: "Barcelona (Spain)",
-  19: "Marrakesh (Morocco)",
-  20: "Alexandria (Egypt)",
-  21: "Tegucigalpa (Honduras)",
-  22: "Guangzhou (China)",
-  23: "Rio de Janeiro (Brazil)",
-  24: "Dakar (Senegal)",
-  25: "Miami (USA)",
-  26: "Jakarta (Indonesia)",
-  27: "Mogadishu (Somalia)",
-  28: "Bangkok (Thailand)",
-  29: "Niamey (Niger)",
-  30: "Khartoum (Sudan)"
-};
-
 function getTemperatureLikeness(temperature) {
-  if (temperature < -5) return "Yakutsk (Russia)";
-  if (temperature > 30) return "Mecca (Saudi Arabia)";
-  return meanTempCityMap[temperature] || null;
+  if (temperature < -5) return "Yakutsk";
+  const cities = [
+    "Snag (Yukon)",
+    "Yellowknife (Canada)",
+    "Okhotsk (Russia)",
+    "Fairbanks (Alaska)",
+    "Nuuk (Greenland)",
+    "Murmansk", // -5 - 0
+    "Arkhangelsk",
+    "Anchorage",
+    "Tromsø",
+    "Reykjavik",
+    "Riga",
+    "Stockholm",
+    "Halifax",
+    "Prague",
+    "Copenhagen",
+    "London", // 1 - 10
+    "Antwerp",
+    "Paris",
+    "Milan",
+    "Batumi",
+    "Rome",
+    "Dubrovnik",
+    "Lisbon",
+    "Barcelona",
+    "Marrakesh",
+    "Alexandria", // 11 - 20
+    "Tegucigalpa",
+    "Guangzhou",
+    "Rio de Janeiro",
+    "Dakar",
+    "Miami",
+    "Jakarta",
+    "Mogadishu",
+    "Bangkok",
+    "Aden",
+    "Khartoum"
+  ]; // 21 - 30
+  if (temperature > 30) return "Mecca";
+  return cities[temperature + 5] || null;
 }
diff --git a/modules/ui/burgs-overview.js b/modules/ui/burgs-overview.js
index 2a487b67..b4dd8639 100644
--- a/modules/ui/burgs-overview.js
+++ b/modules/ui/burgs-overview.js
@@ -2,7 +2,7 @@
 function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   if (customization) return;
   closeDialogs("#burgsOverview, .stable");
-  if (!layerIsOn("toggleBurgIcons")) toggleBurgIcons();
+  if (!layerIsOn("toggleIcons")) toggleIcons();
   if (!layerIsOn("toggleLabels")) toggleLabels();
 
   const body = byId("burgsBody");
@@ -75,7 +75,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     for (const b of filtered) {
       const population = b.population * populationRate * urbanization;
       totalPopulation += population;
-      const features = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
+      const type = b.capital && b.port ? "a-capital-port" : b.capital ? "c-capital" : b.port ? "p-port" : "z-burg";
       const state = pack.states[b.state].name;
       const prov = pack.cells.province[b.cell];
       const province = prov ? pack.provinces[prov].name : "";
@@ -89,7 +89,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
         data-province="${province}"
         data-culture="${culture}"
         data-population=${population}
-        data-features="${features}"
+        data-type="${type}"
       >
         <span data-tip="Click to zoom into view" class="icon-dot-circled pointer"></span>
         <input data-tip="Burg name. Click and type to change" class="burgName" value="${
@@ -101,16 +101,15 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
           ${getCultureOptions(b.culture)}
         </select>
         <span data-tip="Burg population" class="icon-male"></span>
-        <input data-tip="Burg population. Type to change" value=${si(
-          population
-        )} class="burgPopulation" style="width: 5em" />
-        <div style="width: 3em">
+        <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)} />
+        <div class="burgType">
           <span
             data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}"
-            class="icon-star-empty${b.capital ? "" : " inactive pointer"}" style="padding: 0 1px;"></span>
+            class="icon-star-empty${b.capital ? "" : " inactive pointer"}"
+          ></span>
           <span data-tip="Click to toggle port status" class="icon-anchor pointer${
             b.port ? "" : " inactive"
-          }" style="font-size: .9em; padding: 0 1px;"></span>
+          }" style="font-size:.9em"></span>
         </div>
         <span data-tip="Edit burg" class="icon-pencil"></span>
         <span class="locks pointer ${
@@ -155,9 +154,9 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
   }
 
   function burgHighlightOn(event) {
+    if (!layerIsOn("toggleLabels")) toggleLabels();
     const burg = +event.target.dataset.id;
-    const label = burgLabels.select("[data-id='" + burg + "']");
-    if (label.size()) label.classed("drag", true);
+    burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
   }
 
   function burgHighlightOff() {
@@ -246,7 +245,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
 
     confirmationDialog({
       title: "Remove burg",
-      message: "Are you sure you want to remove the burg? <br>This action cannot be reverted",
+      message: "Are you sure you want to remove the burg? This actiove cannot be reverted",
       confirm: "Remove",
       onConfirm: () => {
         removeBurg(burg);
@@ -341,8 +340,8 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
       .sum(d => d.population)
       .sort((a, b) => b.value - a.value);
 
-    const width = 150 + 200 * uiSize.value;
-    const height = 150 + 200 * uiSize.value;
+    const width = 150 + 200 * uiSizeOutput.value;
+    const height = 150 + 200 * uiSizeOutput.value;
     const margin = {top: 0, right: -50, bottom: -10, left: -50};
     const w = width - margin.left - margin.right;
     const h = height - margin.top - margin.bottom;
@@ -608,7 +607,7 @@ function overviewBurgs(settings = {stateId: null, cultureId: null}) {
     const activeBurgs = pack.burgs.filter(b => b.i && !b.removed);
     const allLocked = activeBurgs.every(burg => burg.lock);
 
-    activeBurgs.forEach(burg => {
+    pack.burgs.forEach(burg => {
       burg.lock = !allLocked;
     });
 
diff --git a/modules/ui/coastline-editor.js b/modules/ui/coastline-editor.js
index 6ba14afe..2f918cd9 100644
--- a/modules/ui/coastline-editor.js
+++ b/modules/ui/coastline-editor.js
@@ -1,6 +1,5 @@
 "use strict";
-
-function editCoastline() {
+function editCoastline(node = d3.event.target) {
   if (customization) return;
   closeDialogs(".stable");
   if (layerIsOn("toggleCells")) toggleCells();
@@ -13,7 +12,6 @@ function editCoastline() {
   });
 
   debug.append("g").attr("id", "vertices");
-  const node = d3.event.target;
   elSelected = d3.select(node);
   selectCoastlineGroup(node);
   drawCoastlineVertices();
@@ -23,98 +21,93 @@ function editCoastline() {
   modules.editCoastline = true;
 
   // add listeners
-  byId("coastlineGroupsShow").on("click", showGroupSection);
-  byId("coastlineGroup").on("change", changeCoastlineGroup);
-  byId("coastlineGroupAdd").on("click", toggleNewGroupInput);
-  byId("coastlineGroupName").on("change", createNewGroup);
-  byId("coastlineGroupRemove").on("click", removeCoastlineGroup);
-  byId("coastlineGroupsHide").on("click", hideGroupSection);
-  byId("coastlineEditStyle").on("click", editGroupStyle);
+  document.getElementById("coastlineGroupsShow").addEventListener("click", showGroupSection);
+  document.getElementById("coastlineGroup").addEventListener("change", changeCoastlineGroup);
+  document.getElementById("coastlineGroupAdd").addEventListener("click", toggleNewGroupInput);
+  document.getElementById("coastlineGroupName").addEventListener("change", createNewGroup);
+  document.getElementById("coastlineGroupRemove").addEventListener("click", removeCoastlineGroup);
+  document.getElementById("coastlineGroupsHide").addEventListener("click", hideGroupSection);
+  document.getElementById("coastlineEditStyle").addEventListener("click", editGroupStyle);
 
   function drawCoastlineVertices() {
-    const featureId = +elSelected.attr("data-f");
-    const {vertices, area} = pack.features[featureId];
+    const f = +elSelected.attr("data-f"); // feature id
+    const v = pack.features[f].vertices; // coastline outer vertices
 
-    const cellsNumber = pack.cells.i.length;
-    const neibCells = unique(vertices.map(v => pack.vertices.c[v]).flat()).filter(cellId => cellId < cellsNumber);
+    const l = pack.cells.i.length;
+    const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())].filter(c => c < l);
     debug
       .select("#vertices")
       .selectAll("polygon")
-      .data(neibCells)
+      .data(c)
       .enter()
       .append("polygon")
-      .attr("points", getPackPolygon)
+      .attr("points", d => getPackPolygon(d))
       .attr("data-c", d => d);
 
     debug
       .select("#vertices")
       .selectAll("circle")
-      .data(vertices)
+      .data(v)
       .enter()
       .append("circle")
       .attr("cx", d => pack.vertices.p[d][0])
       .attr("cy", d => pack.vertices.p[d][1])
       .attr("r", 0.4)
       .attr("data-v", d => d)
-      .call(d3.drag().on("drag", handleVertexDrag).on("end", handleVertexDragEnd))
-      .on("mousemove", () =>
-        tip("Drag to move the vertex. Please use for fine-tuning only. Edit heightmap to change actual cell heights!")
-      );
+      .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 area = pack.features[f].area;
     coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
-  function handleVertexDrag() {
-    const {vertices, features} = pack;
-
-    const x = rn(d3.event.x, 2);
-    const y = rn(d3.event.y, 2);
+  function dragVertex() {
+    const x = rn(d3.event.x, 2),
+      y = rn(d3.event.y, 2);
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
-
-    const vertexId = d3.select(this).datum();
-    vertices.p[vertexId] = [x, y];
-
-    const featureId = +elSelected.attr("data-f");
-    const feature = features[featureId];
-
-    // change coastline path
-    defs.select("#featurePaths > path#feature_" + featureId).attr("d", getFeaturePath(feature));
-
-    // update area
-    const points = feature.vertices.map(vertex => vertices.p[vertex]);
-    feature.area = Math.abs(d3.polygonArea(points));
-    coastlineArea.innerHTML = si(getArea(feature.area)) + " " + getAreaUnit();
-
-    // update cell
-    debug.select("#vertices").selectAll("polygon").attr("points", getPackPolygon);
+    const v = +this.dataset.v;
+    pack.vertices.p[v] = [x, y];
+    debug
+      .select("#vertices")
+      .selectAll("polygon")
+      .attr("points", d => getPackPolygon(d));
+    redrawCoastline();
   }
 
-  function handleVertexDragEnd() {
-    if (layerIsOn("toggleStates")) drawStates();
-    if (layerIsOn("toggleProvinces")) drawProvinces();
-    if (layerIsOn("toggleBorders")) drawBorders();
-    if (layerIsOn("toggleBiomes")) drawBiomes();
-    if (layerIsOn("toggleReligions")) drawReligions();
-    if (layerIsOn("toggleCultures")) drawCultures();
+  function redrawCoastline() {
+    lineGen.curve(d3.curveBasisClosed);
+    const f = +elSelected.attr("data-f");
+    const vertices = pack.features[f].vertices;
+    const points = clipPoly(
+      vertices.map(v => pack.vertices.p[v]),
+      1
+    );
+    const d = round(lineGen(points));
+    elSelected.attr("d", d);
+    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 area = Math.abs(d3.polygonArea(points));
+    coastlineArea.innerHTML = si(getArea(area)) + " " + getAreaUnit();
   }
 
   function showGroupSection() {
     document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "none"));
-    byId("coastlineGroupsSelection").style.display = "inline-block";
+    document.getElementById("coastlineGroupsSelection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
     document.querySelectorAll("#coastlineEditor > button").forEach(el => (el.style.display = "inline-block"));
-    byId("coastlineGroupsSelection").style.display = "none";
-    byId("coastlineGroupName").style.display = "none";
-    byId("coastlineGroupName").value = "";
-    byId("coastlineGroup").style.display = "inline-block";
+    document.getElementById("coastlineGroupsSelection").style.display = "none";
+    document.getElementById("coastlineGroupName").style.display = "none";
+    document.getElementById("coastlineGroupName").value = "";
+    document.getElementById("coastlineGroup").style.display = "inline-block";
   }
 
   function selectCoastlineGroup(node) {
     const group = node.parentNode.id;
-    const select = byId("coastlineGroup");
+    const select = document.getElementById("coastlineGroup");
     select.options.length = 0; // remove all options
 
     coastline.selectAll("g").each(function () {
@@ -123,7 +116,7 @@ function editCoastline() {
   }
 
   function changeCoastlineGroup() {
-    byId(this.value).appendChild(elSelected.node());
+    document.getElementById(this.value).appendChild(elSelected.node());
   }
 
   function toggleNewGroupInput() {
@@ -138,44 +131,54 @@ function editCoastline() {
   }
 
   function createNewGroup() {
-    if (!this.value) return tip("Please provide a valid group name");
-
+    if (!this.value) {
+      tip("Please provide a valid group name");
+      return;
+    }
     const group = this.value
       .toLowerCase()
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (byId(group)) return tip("Element with this id already exists. Please provide a unique name", false, "error");
+    if (document.getElementById(group)) {
+      tip("Element with this id already exists. Please provide a unique name", false, "error");
+      return;
+    }
 
-    if (Number.isFinite(+group.charAt(0))) return tip("Group name should start with a letter", false, "error");
+    if (Number.isFinite(+group.charAt(0))) {
+      tip("Group name should start with a letter", false, "error");
+      return;
+    }
 
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     const basic = ["sea_island", "lake_island"].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      byId("coastlineGroup").selectedOptions[0].remove();
-      byId("coastlineGroup").options.add(new Option(group, group, false, true));
+      document.getElementById("coastlineGroup").selectedOptions[0].remove();
+      document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      byId("coastlineGroupName").value = "";
+      document.getElementById("coastlineGroupName").value = "";
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    byId("coastline").appendChild(newGroup);
+    document.getElementById("coastline").appendChild(newGroup);
     newGroup.id = group;
-    byId("coastlineGroup").options.add(new Option(group, group, false, true));
-    byId(group).appendChild(elSelected.node());
+    document.getElementById("coastlineGroup").options.add(new Option(group, group, false, true));
+    document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    byId("coastlineGroupName").value = "";
+    document.getElementById("coastlineGroupName").value = "";
   }
 
   function removeCoastlineGroup() {
     const group = elSelected.node().parentNode.id;
-    if (["sea_island", "lake_island"].includes(group))
-      return tip("This is one of the default groups, it cannot be removed", false, "error");
+    if (["sea_island", "lake_island"].includes(group)) {
+      tip("This is one of the default groups, it cannot be removed", false, "error");
+      return;
+    }
 
     const count = elSelected.node().parentNode.childElementCount;
     alertMessage.innerHTML = /* html */ `Are you sure you want to remove the group? All coastline elements of the group (${count}) will be moved under
@@ -187,14 +190,14 @@ function editCoastline() {
       buttons: {
         Remove: function () {
           $(this).dialog("close");
-          const sea = byId("sea_island");
-          const groupEl = byId(group);
+          const sea = document.getElementById("sea_island");
+          const groupEl = document.getElementById(group);
           while (groupEl.childNodes.length) {
             sea.appendChild(groupEl.childNodes[0]);
           }
           groupEl.remove();
-          byId("coastlineGroup").selectedOptions[0].remove();
-          byId("coastlineGroup").value = "sea_island";
+          document.getElementById("coastlineGroup").selectedOptions[0].remove();
+          document.getElementById("coastlineGroup").value = "sea_island";
         },
         Cancel: function () {
           $(this).dialog("close");
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 3ebff350..dfaeb9a2 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -8,30 +8,33 @@ function restoreDefaultEvents() {
   svg.call(zoom);
   viewbox.style("cursor", "default").on(".drag", null).on("click", clicked).on("touchmove mousemove", onMouseMove);
   legend.call(d3.drag().on("start", dragLegendBox));
-  svg.call(zoom);
 }
 
-// handle viewbox click
+// on viewbox click event - run function based on target
 function clicked() {
   const el = d3.event.target;
-  const parent = el?.parentElement;
-  const grand = parent?.parentElement;
-  const great = grand?.parentElement;
-  const ancestor = great?.parentElement;
-  if (!ancestor) return;
+  if (!el || !el.parentElement || !el.parentElement.parentElement) return;
+  const parent = el.parentElement;
+  const grand = parent.parentElement;
+  const great = grand.parentElement;
+  const p = d3.mouse(this);
+  const i = findCell(p[0], p[1]);
 
   if (grand.id === "emblems") editEmblem();
   else if (parent.id === "rivers") editRiver(el.id);
   else if (grand.id === "routes") editRoute(el.id);
-  else if (ancestor.id === "labels" && el.tagName === "tspan") editLabel();
+  else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
   else if (grand.id === "burgLabels") editBurg();
   else if (grand.id === "burgIcons") editBurg();
   else if (parent.id === "ice") editIce();
   else if (parent.id === "terrain") editReliefIcon();
   else if (grand.id === "markers" || great.id === "markers") editMarker();
   else if (grand.id === "coastline") editCoastline();
-  else if (grand.id === "lakes") editLake();
   else if (great.id === "armies") editRegiment();
+  else if (pack.cells.t[i] === 1) {
+    const node = byId("island_" + pack.cells.f[i]);
+    editCoastline(node);
+  } else if (grand.id === "lakes") editLake();
 }
 
 // clear elSelected variable
@@ -179,7 +182,6 @@ function addBurg(point) {
   burgLabels
     .select("#towns")
     .append("text")
-    .attr("text-rendering", "optimizeSpeed")
     .attr("id", "burgLabel" + i)
     .attr("data-id", i)
     .attr("x", x)
@@ -395,12 +397,12 @@ function createVillageGeneratorLink(burg) {
   else if (cells.r[cell]) tags.push("river");
   else if (pop < 200 && each(4)(cell)) tags.push("pond");
 
-  const roadsNumber = Object.values(pack.cells.routes[cell] || {}).filter(routeId => {
-    const route = pack.routes.find(route => route.i === routeId);
-    if (!route) return false;
+  const connections = pack.cells.routes[cell] || {};
+  const roads = Object.values(connections).filter(routeId => {
+    const route = pack.routes[routeId];
     return route.group === "roads" || route.group === "trails";
   }).length;
-  tags.push(roadsNumber > 1 ? "highway" : roadsNumber === 1 ? "dead end" : "isolated");
+  tags.push(roads > 1 ? "highway" : roads === 1 ? "dead end" : "isolated");
 
   const biome = cells.biome[cell];
   const arableBiomes = cells.r[cell] ? [1, 2, 3, 4, 5, 6, 7, 8] : [5, 6, 7, 8];
@@ -465,7 +467,6 @@ function drawLegend(name, data) {
 
       labels
         .append("text")
-        .attr("text-rendering", "optimizeSpeed")
         .text(data[i][2])
         .attr("x", offset + colorBoxSize * 1.6)
         .attr("y", fontSize / 1.6 + lineHeight + l * lineHeight + vOffset);
@@ -476,7 +477,6 @@ function drawLegend(name, data) {
   const offset = colOffset + legend.node().getBBox().width / 2;
   labels
     .append("text")
-    .attr("text-rendering", "optimizeSpeed")
     .attr("text-anchor", "middle")
     .attr("font-weight", "bold")
     .attr("font-size", "1.2em")
@@ -516,14 +516,13 @@ function fitLegendBox() {
 
 // draw legend with the same data, but using different settings
 function redrawLegend() {
-  if (legend.select("rect").size()) {
-    const name = legend.select("#legendLabel").text();
-    const data = legend
-      .attr("data")
-      .split("|")
-      .map(l => l.split(","));
-    drawLegend(name, data);
-  }
+  if (!legend.select("rect").size()) return;
+  const name = legend.select("#legendLabel").text();
+  const data = legend
+    .attr("data")
+    .split("|")
+    .map(l => l.split(","));
+  drawLegend(name, data);
 }
 
 function dragLegendBox() {
@@ -1168,66 +1167,25 @@ function selectIcon(initial, callback) {
       const cell = row.insertCell(i % 17);
       cell.innerHTML = icons[i];
     }
-
-    // find external images used as icons and show them
-    const externalResources = new Set();
-    const isExternal = url => url.startsWith("http") || url.startsWith("data:image");
-
-    options.military.forEach(unit => {
-      if (isExternal(unit.icon)) externalResources.add(unit.icon);
-    });
-
-    pack.states.forEach(state => {
-      state?.military?.forEach(regiment => {
-        if (isExternal(regiment.icon)) externalResources.add(regiment.icon);
-      });
-    });
-
-    externalResources.forEach(addExternalImage);
   }
 
-  input.oninput = () => callback(input.value);
-
+  input.oninput = e => callback(input.value);
   table.onclick = e => {
     if (e.target.tagName === "TD") {
       input.value = e.target.textContent;
       callback(input.value);
     }
   };
-
   table.onmouseover = e => {
     if (e.target.tagName === "TD") tip(`Click to select ${e.target.textContent} icon`);
   };
 
-  function addExternalImage(url) {
-    const addedIcons = byId("addedIcons");
-    const image = document.createElement("div");
-    image.style.cssText = `width: 2.2em; height: 2.2em; background-size: cover; background-image: url(${url})`;
-    addedIcons.appendChild(image);
-    image.onclick = () => callback(url);
-  }
-
-  byId("addImage").onclick = function () {
-    const input = this.previousElementSibling;
-    const ulr = input.value;
-    if (!ulr) return tip("Enter image URL to add", false, "error", 4000);
-    if (!ulr.match(/^((http|https):\/\/)|data\:image\//)) return tip("Enter valid URL", false, "error", 4000);
-    addExternalImage(ulr);
-    callback(ulr);
-    input.value = "";
-  };
-
-  byId("addedIcons")
-    .querySelectorAll("div")
-    .forEach(div => {
-      div.onclick = () => callback(div.style.backgroundImage.slice(5, -2));
-    });
-
   $("#iconSelector").dialog({
     width: fitContent(),
     title: "Select Icon",
     buttons: {
       Apply: function () {
+        callback(input.value || "⠀");
         $(this).dialog("close");
       },
       Close: function () {
@@ -1293,18 +1251,18 @@ function refreshAllEditors() {
 // dynamically loaded editors
 async function editStates() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/states-editor.js?v=1.108.1");
+  const Editor = await import("../dynamic/editors/states-editor.js?v=1.99.00");
   Editor.open();
 }
 
 async function editCultures() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.105.23");
+  const Editor = await import("../dynamic/editors/cultures-editor.js?v=1.96.01");
   Editor.open();
 }
 
 async function editReligions() {
   if (customization) return;
-  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.104.0");
+  const Editor = await import("../dynamic/editors/religions-editor.js?v=1.96.00");
   Editor.open();
 }
diff --git a/modules/ui/general.js b/modules/ui/general.js
index 6e276bd6..f665902d 100644
--- a/modules/ui/general.js
+++ b/modules/ui/general.js
@@ -153,26 +153,21 @@ function showMapTooltip(point, e, i, g) {
 
   if (group === "routes") {
     const routeId = +e.target.id.slice(5);
-    const route = pack.routes.find(route => route.i === routeId);
-    if (route) {
-      if (route.name) return tip(`${route.name}. Click to edit the Route`);
-      return tip("Click to edit the Route");
-    }
+    const name = pack.routes[routeId]?.name;
+    if (name) return tip(`${name}. Click to edit the Route`);
+    return tip("Click to edit the Route");
   }
 
   if (group === "terrain") return tip("Click to edit the Relief Icon");
 
   if (subgroup === "burgLabels" || subgroup === "burgIcons") {
-    const burgId = +path[path.length - 10].dataset.id;
-    if (burgId) {
-      const burg = pack.burgs[burgId];
-      const population = si(burg.population * populationRate * urbanization);
-      tip(`${burg.name}. Population: ${population}. Click to edit`);
-      if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burgId, 5000);
-      return;
-    }
+    const burg = +path[path.length - 10].dataset.id;
+    const b = pack.burgs[burg];
+    const population = si(b.population * populationRate * urbanization);
+    tip(`${b.name}. Population: ${population}. Click to edit`);
+    if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
+    return;
   }
-
   if (group === "labels") return tip("Click to edit the Label");
 
   if (group === "markers") return tip("Click to edit the Marker. Hold Shift to not close the assosiated note");
@@ -204,20 +199,18 @@ function showMapTooltip(point, e, i, g) {
   if (group === "coastline") return tip("Click to edit the coastline");
 
   if (group === "zones") {
-    const element = path[path.length - 8];
-    const zoneId = +element.dataset.id;
-    const zone = pack.zones.find(zone => zone.i === zoneId);
-    tip(zone.name);
-    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zoneId, 5000);
+    const zone = path[path.length - 8];
+    tip(zone.dataset.description);
+    if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000);
     return;
   }
 
   if (group === "ice") return tip("Click to edit the Ice");
 
   // covering elements
-  if (layerIsOn("togglePrecipitation") && land) tip("Annual Precipitation: " + getFriendlyPrecipitation(i));
+  if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getFriendlyPrecipitation(i));
   else if (layerIsOn("togglePopulation")) tip(getPopulationTip(i));
-  else if (layerIsOn("toggleTemperature")) tip("Temperature: " + convertTemperature(grid.cells.temp[g]));
+  else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[g]));
   else if (layerIsOn("toggleBiomes") && pack.cells.biome[i]) {
     const biome = pack.cells.biome[i];
     tip("Biome: " + biomesData.name[biome]);
@@ -263,11 +256,10 @@ function updateCellInfo(point, i, g) {
   const f = cells.f[i];
   infoLat.innerHTML = toDMS(getLatitude(y, 4), "lat");
   infoLon.innerHTML = toDMS(getLongitude(x, 4), "lon");
-  infoGeozone.innerHTML = getGeozone(getLatitude(y, 4));
 
   infoCell.innerHTML = i;
   infoArea.innerHTML = cells.area[i] ? si(getArea(cells.area[i])) + " " + getAreaUnit() : "n/a";
-  infoElevation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
+  infoEvelation.innerHTML = getElevation(pack.features[f], pack.cells.h[i]);
   infoDepth.innerHTML = getDepth(pack.features[f], point);
   infoTemp.innerHTML = convertTemperature(grid.cells.temp[g]);
   infoPrec.innerHTML = cells.h[i] >= 20 ? getFriendlyPrecipitation(i) : "n/a";
@@ -291,18 +283,6 @@ function updateCellInfo(point, i, g) {
   infoBiome.innerHTML = biomesData.name[cells.biome[i]];
 }
 
-function getGeozone(latitude) {
-  if (latitude > 66.5) return "Arctic";
-  if (latitude > 35) return "Temperate North";
-  if (latitude > 23.5) return "Subtropical North";
-  if (latitude > 1) return "Tropical North";
-  if (latitude > -1) return "Equatorial";
-  if (latitude > -23.5) return "Tropical South";
-  if (latitude > -35) return "Subtropical South";
-  if (latitude > -66.5) return "Temperate South";
-  return "Antarctic";
-}
-
 // convert coordinate to DMS format
 function toDMS(coord, c) {
   const degrees = Math.floor(Math.abs(coord));
@@ -446,17 +426,17 @@ function highlightEmblemElement(type, el) {
 
 // assign lock behavior
 document.querySelectorAll("[data-locked]").forEach(function (e) {
-  e.addEventListener("mouseover", function (e) {
-    e.stopPropagation();
+  e.addEventListener("mouseover", function (event) {
     if (this.className === "icon-lock")
       tip("Click to unlock the option and allow it to be randomized on new map generation");
     else tip("Click to lock the option and always use the current value on new map generation");
+    event.stopPropagation();
   });
 
   e.addEventListener("click", function () {
-    const ids = this.dataset.ids ? this.dataset.ids.split(",") : [this.id.slice(5)];
-    const fn = this.className === "icon-lock" ? unlock : lock;
-    ids.forEach(fn);
+    const id = this.id.slice(5);
+    if (this.className === "icon-lock") unlock(id);
+    else lock(id);
   });
 });
 
diff --git a/modules/ui/heightmap-editor.js b/modules/ui/heightmap-editor.js
index 20fa201c..2cec7437 100644
--- a/modules/ui/heightmap-editor.js
+++ b/modules/ui/heightmap-editor.js
@@ -75,8 +75,7 @@ function editHeightmap(options) {
       changeOnlyLand.checked = true;
     } else if (mode === "risk") {
       defs.selectAll("#land, #water").selectAll("path").remove();
-      defs.select("#featurePaths").selectAll("path").remove();
-      viewbox.selectAll("#coastline use, #lakes path, #oceanLayers path").remove();
+      viewbox.selectAll("#coastline path, #lakes path, #oceanLayers path").remove();
       changeOnlyLand.checked = false;
     }
 
@@ -91,7 +90,7 @@ function editHeightmap(options) {
     if (!sessionStorage.getItem("noExitButtonAnimation")) {
       sessionStorage.setItem("noExitButtonAnimation", true);
       exitCustomization.style.opacity = 0;
-      const width = 12 * uiSize.value * 11;
+      const width = 12 * uiSizeOutput.value * 11;
       exitCustomization.style.right = (svgWidth - width) / 2 + "px";
       exitCustomization.style.bottom = svgHeight / 2 + "px";
       exitCustomization.style.transform = "scale(2)";
@@ -112,9 +111,7 @@ function editHeightmap(options) {
     layersPreset.value = "heightmap";
     layersPreset.disabled = true;
     mockHeightmap();
-
     viewbox.on("touchmove mousemove", moveCursor);
-    svg.on("dblclick.zoom", null);
 
     if (tool === "templateEditor") openTemplateEditor();
     else if (tool === "imageConverter") openImageConverter();
@@ -139,7 +136,7 @@ function editHeightmap(options) {
       return;
     }
 
-    moveCircle(x, y, heightmapBrushRadius.valueAsNumber, "#333");
+    moveCircle(x, y, brushRadius.valueAsNumber, "#333");
   }
 
   // get user-friendly (real-world) height value from map data
@@ -160,7 +157,11 @@ function editHeightmap(options) {
   // Exit customization mode
   function finalizeHeightmap() {
     if (viewbox.select("#heights").selectAll("*").size() < 200)
-      return tip("Insufficient land area. There should be at least 200 land cells!", null, "error");
+      return tip(
+        "Insufficient land area! There should be at least 200 land cells to finalize the heightmap",
+        null,
+        "error"
+      );
     if (byId("imageConverter").offsetParent) return tip("Please exit the Image Conversion mode first", null, "error");
 
     delete window.edits; // remove global variable
@@ -172,7 +173,6 @@ function editHeightmap(options) {
     if (byId("options").querySelector(".tab > button.active").id === "toolsTab") toolsContent.style.display = "block";
     layersPreset.disabled = false;
     exitCustomization.style.display = "none"; // hide finalize button
-
     restoreDefaultEvents();
     clearMainTip();
     closeDialogs();
@@ -187,7 +187,6 @@ function editHeightmap(options) {
     else if (mode === "risk") restoreRiskedData();
 
     // restore initial layers
-    drawFeatures();
     byId("heights").remove();
     turnButtonOff("toggleHeight");
     document
@@ -216,7 +215,8 @@ function editHeightmap(options) {
     pack.religions = [];
 
     const erosionAllowed = allowErosion.checked;
-    Features.markupGrid();
+    markFeatures();
+    markupGridOcean();
     if (erosionAllowed) {
       addLakesInDeepDepressions();
       openNearSeaLakes();
@@ -225,7 +225,7 @@ function editHeightmap(options) {
     calculateTemperatures();
     generatePrecipitation();
     reGraph();
-    Features.markupPack();
+    drawCoastline();
 
     Rivers.generate(erosionAllowed);
 
@@ -237,6 +237,8 @@ function editHeightmap(options) {
       }
     }
 
+    drawRivers();
+    Lakes.defineGroup();
     Biomes.define();
     rankCells();
 
@@ -247,16 +249,19 @@ function editHeightmap(options) {
     Routes.generate();
     Religions.generate();
     BurgsAndStates.defineStateForms();
-    Provinces.generate();
-    Provinces.getPoles();
+    BurgsAndStates.generateProvinces();
     BurgsAndStates.defineBurgFeatures();
 
+    drawStates();
+    drawBorders();
+    drawStateLabels();
+
     Rivers.specify();
-    Features.specify();
+    Lakes.generateName();
 
     Military.generate();
     Markers.generate();
-    Zones.generate();
+    addZones();
     TIME && console.timeEnd("regenerateErasedData");
     INFO && console.groupEnd("Edit Heightmap");
   }
@@ -333,13 +338,14 @@ function editHeightmap(options) {
       zone.selectAll("*").remove();
     });
 
-    Features.markupGrid();
+    markFeatures();
+    markupGridOcean();
     if (erosionAllowed) addLakesInDeepDepressions();
     OceanLayers();
     calculateTemperatures();
     generatePrecipitation();
     reGraph();
-    Features.markupPack();
+    drawCoastline();
 
     if (erosionAllowed) Rivers.generate(true);
 
@@ -433,9 +439,13 @@ function editHeightmap(options) {
       c.center = findCell(c.x, c.y);
     }
 
+    drawStateLabels();
+    drawStates();
+    drawBorders();
+
     if (erosionAllowed) {
       Rivers.specify();
-      Features.specify();
+      Lakes.generateName();
     }
 
     // restore zones from grid
@@ -479,14 +489,10 @@ function editHeightmap(options) {
     updateHistory();
   }
 
-  function getColor(value, scheme = getColorScheme()) {
-    return scheme(1 - (value < 20 ? value - 5 : value) / 100);
-  }
-
   // draw or update heightmap
   function mockHeightmap() {
     const data = renderOcean.checked ? grid.cells.i : grid.cells.i.filter(i => grid.cells.h[i] >= 20);
-
+    const scheme = getColorScheme();
     viewbox
       .select("#heights")
       .selectAll("polygon")
@@ -494,12 +500,13 @@ function editHeightmap(options) {
       .join("polygon")
       .attr("points", d => getGridPolygon(d))
       .attr("id", d => "cell" + d)
-      .attr("fill", d => getColor(grid.cells.h[d]));
+      .attr("fill", d => getColor(grid.cells.h[d], scheme));
   }
 
   // draw or update heightmap for a selection of cells
   function mockHeightmapSelection(selection) {
     const ocean = renderOcean.checked;
+    const scheme = getColorScheme();
 
     selection.forEach(function (i) {
       let cell = viewbox.select("#heights").select("#cell" + i);
@@ -511,7 +518,7 @@ function editHeightmap(options) {
           .append("polygon")
           .attr("points", getGridPolygon(i))
           .attr("id", "cell" + i);
-      cell.attr("fill", getColor(grid.cells.h[i]));
+      cell.attr("fill", getColor(grid.cells.h[i], scheme));
     });
   }
 
@@ -657,7 +664,7 @@ function editHeightmap(options) {
       const fromCell = +lineCircle.attr("data-cell");
       debug.selectAll("*").remove();
 
-      const power = byId("heightmapLinePower").valueAsNumber;
+      const power = byId("linePower").valueAsNumber;
       if (power === 0) return tip("Power should not be zero", false, "error");
 
       const heights = grid.cells.h;
@@ -679,7 +686,7 @@ function editHeightmap(options) {
     }
 
     function dragBrush() {
-      const r = heightmapBrushRadius.valueAsNumber;
+      const r = brushRadius.valueAsNumber;
       const [x, y] = d3.mouse(this);
       const start = findGridCell(x, y, grid);
 
@@ -697,7 +704,7 @@ function editHeightmap(options) {
     }
 
     function changeHeightForSelection(selection, start) {
-      const power = heightmapBrushPower.valueAsNumber;
+      const power = brushPower.valueAsNumber;
 
       const interpolate = d3.interpolateRound(power, 1);
       const land = changeOnlyLand.checked;
@@ -1342,7 +1349,7 @@ function editHeightmap(options) {
         return lum | 0; // land
       };
 
-      const scheme = d3.range(101).map(i => getColor(i));
+      const scheme = d3.range(101).map(i => getColor(i, color()));
       const hues = scheme.map(rgb => d3.hsl(rgb).h | 0);
       const getHeightByScheme = function (color) {
         let height = scheme.indexOf(color);
diff --git a/modules/ui/hotkeys.js b/modules/ui/hotkeys.js
index 4b1e626d..3af5f4f3 100644
--- a/modules/ui/hotkeys.js
+++ b/modules/ui/hotkeys.js
@@ -18,9 +18,10 @@ function handleKeyup(event) {
 
   event.stopPropagation();
 
-  const {code, key, ctrlKey, metaKey, shiftKey} = event;
+  const {code, key, ctrlKey, metaKey, shiftKey, altKey} = event;
   const ctrl = ctrlKey || metaKey || key === "Control";
   const shift = shiftKey || key === "Shift";
+  const alt = altKey || key === "Alt";
 
   if (code === "F1") showInfo();
   else if (code === "F2") regeneratePrompt();
@@ -29,7 +30,7 @@ function handleKeyup(event) {
   else if (code === "Tab") toggleOptions(event);
   else if (code === "Escape") closeAllDialogs();
   else if (code === "Delete") removeElementOnKey();
-  else if (code === "KeyO" && byId("canvas3d")) toggle3dOptions();
+  else if (code === "KeyO" && document.getElementById("canvas3d")) toggle3dOptions();
   else if (ctrl && code === "KeyQ") toggleSaveReminder();
   else if (ctrl && code === "KeyS") saveMap("machine");
   else if (ctrl && code === "KeyC") saveMap("dropbox");
@@ -59,6 +60,11 @@ function handleKeyup(event) {
   else if (key === "#") toggleAddRiver();
   else if (key === "$") createRoute();
   else if (key === "%") toggleAddMarker();
+  else if (alt && code === "KeyB") console.table(pack.burgs);
+  else if (alt && code === "KeyS") console.table(pack.states);
+  else if (alt && code === "KeyC") console.table(pack.cultures);
+  else if (alt && code === "KeyR") console.table(pack.religions);
+  else if (alt && code === "KeyF") console.table(pack.features);
   else if (code === "KeyX") toggleTexture();
   else if (code === "KeyH") toggleHeight();
   else if (code === "KeyB") toggleBiomes();
@@ -75,13 +81,13 @@ function handleKeyup(event) {
   else if (code === "KeyD") toggleBorders();
   else if (code === "KeyR") toggleReligions();
   else if (code === "KeyU") toggleRoutes();
-  else if (code === "KeyT") toggleTemperature();
+  else if (code === "KeyT") toggleTemp();
   else if (code === "KeyN") togglePopulation();
   else if (code === "KeyJ") toggleIce();
-  else if (code === "KeyA") togglePrecipitation();
+  else if (code === "KeyA") togglePrec();
   else if (code === "KeyY") toggleEmblems();
   else if (code === "KeyL") toggleLabels();
-  else if (code === "KeyI") toggleBurgIcons();
+  else if (code === "KeyI") toggleIcons();
   else if (code === "KeyM") toggleMilitary();
   else if (code === "KeyK") toggleMarkers();
   else if (code === "Equal" && !customization) toggleRulers();
@@ -117,21 +123,24 @@ function allowHotkeys() {
 function handleSizeChange(key) {
   let brush = null;
 
-  if (byId("heightmapBrushRadius")?.offsetParent) brush = byId("heightmapBrushRadius");
-  else if (byId("heightmapLinePower")?.offsetParent) brush = byId("heightmapLinePower");
-  else if (byId("biomesBrush")?.offsetParent) brush = byId("biomesBrush");
-  else if (byId("culturesBrush")?.offsetParent) brush = byId("culturesBrush");
-  else if (byId("statesBrush")?.offsetParent) brush = byId("statesBrush");
-  else if (byId("provincesBrush")?.offsetParent) brush = byId("provincesBrush");
-  else if (byId("religionsBrush")?.offsetParent) brush = byId("religionsBrush");
-  else if (byId("zonesBrush")?.offsetParent) brush = byId("zonesBrush");
+  if (document.getElementById("brushRadius")?.offsetParent) brush = document.getElementById("brushRadius");
+  else if (document.getElementById("linePower")?.offsetParent) brush = document.getElementById("linePower");
+  else if (document.getElementById("biomesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("biomesManuallyBrush");
+  else if (document.getElementById("statesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("statesManuallyBrush");
+  else if (document.getElementById("provincesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("provincesManuallyBrush");
+  else if (document.getElementById("culturesManuallyBrush")?.offsetParent)
+    brush = document.getElementById("culturesManuallyBrush");
+  else if (document.getElementById("zonesBrush")?.offsetParent) brush = document.getElementById("zonesBrush");
+  else if (document.getElementById("religionsManuallyBrush")?.offsetParent)
+    brush = document.getElementById("religionsManuallyBrush");
 
   if (brush) {
     const change = key === "-" ? -5 : 5;
-    const min = +brush.getAttribute("min") || 5;
-    const max = +brush.getAttribute("max") || 100;
-    const value = +brush.value + change;
-    brush.value = minmax(value, min, max);
+    const value = minmax(+brush.value + change, +brush.min, +brush.max);
+    brush.value = document.getElementById(brush.id + "Number").value = value;
     return;
   }
 
diff --git a/modules/ui/labels-editor.js b/modules/ui/labels-editor.js
index 8c47ec99..d19de7ae 100644
--- a/modules/ui/labels-editor.js
+++ b/modules/ui/labels-editor.js
@@ -26,32 +26,28 @@ function editLabel() {
   modules.editLabel = true;
 
   // add listeners
-  byId("labelGroupShow").on("click", showGroupSection);
-  byId("labelGroupHide").on("click", hideGroupSection);
-  byId("labelGroupSelect").on("click", changeGroup);
-  byId("labelGroupInput").on("change", createNewGroup);
-  byId("labelGroupNew").on("click", toggleNewGroupInput);
-  byId("labelGroupRemove").on("click", removeLabelsGroup);
+  document.getElementById("labelGroupShow").addEventListener("click", showGroupSection);
+  document.getElementById("labelGroupHide").addEventListener("click", hideGroupSection);
+  document.getElementById("labelGroupSelect").addEventListener("click", changeGroup);
+  document.getElementById("labelGroupInput").addEventListener("change", createNewGroup);
+  document.getElementById("labelGroupNew").addEventListener("click", toggleNewGroupInput);
+  document.getElementById("labelGroupRemove").addEventListener("click", removeLabelsGroup);
 
-  byId("labelTextShow").on("click", showTextSection);
-  byId("labelTextHide").on("click", hideTextSection);
-  byId("labelText").on("input", changeText);
-  byId("labelTextRandom").on("click", generateRandomName);
+  document.getElementById("labelTextShow").addEventListener("click", showTextSection);
+  document.getElementById("labelTextHide").addEventListener("click", hideTextSection);
+  document.getElementById("labelText").addEventListener("input", changeText);
+  document.getElementById("labelTextRandom").addEventListener("click", generateRandomName);
 
-  byId("labelEditStyle").on("click", editGroupStyle);
+  document.getElementById("labelEditStyle").addEventListener("click", editGroupStyle);
 
-  byId("labelSizeShow").on("click", showSizeSection);
-  byId("labelSizeHide").on("click", hideSizeSection);
-  byId("labelStartOffset").on("input", changeStartOffset);
-  byId("labelRelativeSize").on("input", changeRelativeSize);
+  document.getElementById("labelSizeShow").addEventListener("click", showSizeSection);
+  document.getElementById("labelSizeHide").addEventListener("click", hideSizeSection);
+  document.getElementById("labelStartOffset").addEventListener("input", changeStartOffset);
+  document.getElementById("labelRelativeSize").addEventListener("input", changeRelativeSize);
 
-  byId("labelLetterSpacingShow").on("click", showLetterSpacingSection);
-  byId("labelLetterSpacingHide").on("click", hideLetterSpacingSection);
-  byId("labelLetterSpacingSize").on("input", changeLetterSpacingSize);
-
-  byId("labelAlign").on("click", editLabelAlign);
-  byId("labelLegend").on("click", editLabelLegend);
-  byId("labelRemoveSingle").on("click", removeLabel);
+  document.getElementById("labelAlign").addEventListener("click", editLabelAlign);
+  document.getElementById("labelLegend").addEventListener("click", editLabelLegend);
+  document.getElementById("labelRemoveSingle").addEventListener("click", removeLabel);
 
   function showEditorTips() {
     showMainTip();
@@ -66,12 +62,12 @@ function editLabel() {
     const group = text.parentNode.id;
 
     if (group === "states" || group === "burgLabels") {
-      byId("labelGroupShow").style.display = "none";
+      document.getElementById("labelGroupShow").style.display = "none";
       return;
     }
 
     hideGroupSection();
-    const select = byId("labelGroupSelect");
+    const select = document.getElementById("labelGroupSelect");
     select.options.length = 0; // remove all options
 
     labels.selectAll(":scope > g").each(function () {
@@ -82,17 +78,17 @@ function editLabel() {
   }
 
   function updateValues(textPath) {
-    byId("labelText").value = [...textPath.querySelectorAll("tspan")].map(tspan => tspan.textContent).join("|");
-    byId("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
-    byId("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
-    let letterSpacingSize = textPath.getAttribute("letter-spacing") ? textPath.getAttribute("letter-spacing") : 0;
-    byId("labelLetterSpacingSize").value = parseFloat(letterSpacingSize);
+    document.getElementById("labelText").value = [...textPath.querySelectorAll("tspan")]
+      .map(tspan => tspan.textContent)
+      .join("|");
+    document.getElementById("labelStartOffset").value = parseFloat(textPath.getAttribute("startOffset"));
+    document.getElementById("labelRelativeSize").value = parseFloat(textPath.getAttribute("font-size"));
   }
 
   function drawControlPointsAndLine() {
     debug.select("#controlPoints").remove();
     debug.append("g").attr("id", "controlPoints").attr("transform", elSelected.attr("transform"));
-    const path = byId("textPath_" + elSelected.attr("id"));
+    const path = document.getElementById("textPath_" + elSelected.attr("id"));
     debug.select("#controlPoints").append("path").attr("d", path.getAttribute("d")).on("click", addInterimControlPoint);
     const l = path.getTotalLength();
     if (!l) return;
@@ -121,8 +117,8 @@ function editLabel() {
   }
 
   function redrawLabelPath() {
-    const path = byId("textPath_" + elSelected.attr("id"));
-    lineGen.curve(d3.curveNatural);
+    const path = document.getElementById("textPath_" + elSelected.attr("id"));
+    lineGen.curve(d3.curveBundle.beta(1));
     const points = [];
     debug
       .select("#controlPoints")
@@ -192,19 +188,19 @@ function editLabel() {
 
   function showGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    byId("labelGroupSection").style.display = "inline-block";
+    document.getElementById("labelGroupSection").style.display = "inline-block";
   }
 
   function hideGroupSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    byId("labelGroupSection").style.display = "none";
-    byId("labelGroupInput").style.display = "none";
-    byId("labelGroupInput").value = "";
-    byId("labelGroupSelect").style.display = "inline-block";
+    document.getElementById("labelGroupSection").style.display = "none";
+    document.getElementById("labelGroupInput").style.display = "none";
+    document.getElementById("labelGroupInput").value = "";
+    document.getElementById("labelGroupSelect").style.display = "inline-block";
   }
 
   function changeGroup() {
-    byId(this.value).appendChild(elSelected.node());
+    document.getElementById(this.value).appendChild(elSelected.node());
   }
 
   function toggleNewGroupInput() {
@@ -228,7 +224,7 @@ function editLabel() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (byId(group)) {
+    if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -241,22 +237,22 @@ function editLabel() {
     // just rename if only 1 element left
     const oldGroup = elSelected.node().parentNode;
     if (oldGroup !== "states" && oldGroup !== "addedLabels" && oldGroup.childElementCount === 1) {
-      byId("labelGroupSelect").selectedOptions[0].remove();
-      byId("labelGroupSelect").options.add(new Option(group, group, false, true));
+      document.getElementById("labelGroupSelect").selectedOptions[0].remove();
+      document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      byId("labelGroupInput").value = "";
+      document.getElementById("labelGroupInput").value = "";
       return;
     }
 
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    byId("labels").appendChild(newGroup);
+    document.getElementById("labels").appendChild(newGroup);
     newGroup.id = group;
-    byId("labelGroupSelect").options.add(new Option(group, group, false, true));
-    byId(group).appendChild(elSelected.node());
+    document.getElementById("labelGroupSelect").options.add(new Option(group, group, false, true));
+    document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    byId("labelGroupInput").value = "";
+    document.getElementById("labelGroupInput").value = "";
   }
 
   function removeLabelsGroup() {
@@ -279,7 +275,7 @@ function editLabel() {
             .select("#" + group)
             .selectAll("text")
             .each(function () {
-              byId("textPath_" + this.id).remove();
+              document.getElementById("textPath_" + this.id).remove();
               this.remove();
             });
           if (!basic) labels.select("#" + group).remove();
@@ -293,16 +289,16 @@ function editLabel() {
 
   function showTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    byId("labelTextSection").style.display = "inline-block";
+    document.getElementById("labelTextSection").style.display = "inline-block";
   }
 
   function hideTextSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    byId("labelTextSection").style.display = "none";
+    document.getElementById("labelTextSection").style.display = "none";
   }
 
   function changeText() {
-    const input = byId("labelText").value;
+    const input = document.getElementById("labelText").value;
     const el = elSelected.select("textPath").node();
 
     const lines = input.split("|");
@@ -327,7 +323,7 @@ function editLabel() {
       const culture = pack.cells.culture[cell];
       name = Names.getCulture(culture);
     }
-    byId("labelText").value = name;
+    document.getElementById("labelText").value = name;
     changeText();
   }
 
@@ -338,22 +334,12 @@ function editLabel() {
 
   function showSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    byId("labelSizeSection").style.display = "inline-block";
+    document.getElementById("labelSizeSection").style.display = "inline-block";
   }
 
   function hideSizeSection() {
     document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    byId("labelSizeSection").style.display = "none";
-  }
-
-  function showLetterSpacingSection() {
-    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "none"));
-    byId("labelLetterSpacingSection").style.display = "inline-block";
-  }
-
-  function hideLetterSpacingSection() {
-    document.querySelectorAll("#labelEditor > button").forEach(el => (el.style.display = "inline-block"));
-    byId("labelLetterSpacingSection").style.display = "none";
+    document.getElementById("labelSizeSection").style.display = "none";
   }
 
   function changeStartOffset() {
@@ -367,12 +353,6 @@ function editLabel() {
     changeText();
   }
 
-  function changeLetterSpacingSize() {
-    elSelected.select("textPath").attr("letter-spacing", this.value + "px");
-    tip("Label letter-spacing size: " + this.value + "px");
-    changeText();
-  }
-
   function editLabelAlign() {
     const bbox = elSelected.node().getBBox();
     const c = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
diff --git a/modules/ui/lakes-editor.js b/modules/ui/lakes-editor.js
index 55f3fb5b..e4977624 100644
--- a/modules/ui/lakes-editor.js
+++ b/modules/ui/lakes-editor.js
@@ -15,7 +15,7 @@ function editLake() {
   debug.append("g").attr("id", "vertices");
   elSelected = d3.select(node);
   updateLakeValues();
-  selectLakeGroup();
+  selectLakeGroup(node);
   drawLakeVertices();
   viewbox.on("touchmove mousemove", null);
 
@@ -23,15 +23,17 @@ function editLake() {
   modules.editLake = true;
 
   // add listeners
-  byId("lakeName").on("input", changeName);
-  byId("lakeNameCulture").on("click", generateNameCulture);
-  byId("lakeNameRandom").on("click", generateNameRandom);
-  byId("lakeGroup").on("change", changeLakeGroup);
-  byId("lakeGroupAdd").on("click", toggleNewGroupInput);
-  byId("lakeGroupName").on("change", createNewGroup);
-  byId("lakeGroupRemove").on("click", removeLakeGroup);
-  byId("lakeEditStyle").on("click", editGroupStyle);
-  byId("lakeLegend").on("click", editLakeLegend);
+  document.getElementById("lakeName").addEventListener("input", changeName);
+  document.getElementById("lakeNameCulture").addEventListener("click", generateNameCulture);
+  document.getElementById("lakeNameRandom").addEventListener("click", generateNameRandom);
+
+  document.getElementById("lakeGroup").addEventListener("change", changeLakeGroup);
+  document.getElementById("lakeGroupAdd").addEventListener("click", toggleNewGroupInput);
+  document.getElementById("lakeGroupName").addEventListener("change", createNewGroup);
+  document.getElementById("lakeGroupRemove").addEventListener("click", removeLakeGroup);
+
+  document.getElementById("lakeEditStyle").addEventListener("click", editGroupStyle);
+  document.getElementById("lakeLegend").addEventListener("click", editLakeLegend);
 
   function getLake() {
     const lakeId = +elSelected.attr("data-f");
@@ -39,91 +41,85 @@ function editLake() {
   }
 
   function updateLakeValues() {
-    const {cells, vertices, rivers} = pack;
+    const cells = pack.cells;
 
     const l = getLake();
-    byId("lakeName").value = l.name;
-    byId("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
+    document.getElementById("lakeName").value = l.name;
+    document.getElementById("lakeArea").value = si(getArea(l.area)) + " " + getAreaUnit();
 
-    const length = d3.polygonLength(l.vertices.map(v => vertices.p[v]));
-    byId("lakeShoreLength").value = si(length * distanceScale) + " " + distanceUnitInput.value;
+    const length = d3.polygonLength(l.vertices.map(v => pack.vertices.p[v]));
+    document.getElementById("lakeShoreLength").value = si(length * distanceScale) + " " + distanceUnitInput.value;
 
     const lakeCells = Array.from(cells.i.filter(i => cells.f[i] === l.i));
     const heights = lakeCells.map(i => cells.h[i]);
 
-    byId("lakeElevation").value = getHeight(l.height);
-    byId("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
-    byId("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
+    document.getElementById("lakeElevation").value = getHeight(l.height);
+    document.getElementById("lakeAverageDepth").value = getHeight(d3.mean(heights), "abs");
+    document.getElementById("lakeMaxDepth").value = getHeight(d3.min(heights), "abs");
 
-    byId("lakeFlux").value = l.flux;
-    byId("lakeEvaporation").value = l.evaporation;
+    document.getElementById("lakeFlux").value = l.flux;
+    document.getElementById("lakeEvaporation").value = l.evaporation;
 
-    const inlets = l.inlets && l.inlets.map(inlet => rivers.find(river => river.i === inlet)?.name);
-    const outlet = l.outlet ? rivers.find(river => river.i === l.outlet)?.name : "no";
-    byId("lakeInlets").value = inlets ? inlets.length : "no";
-    byId("lakeInlets").title = inlets ? inlets.join(", ") : "";
-    byId("lakeOutlet").value = outlet;
+    const inlets = l.inlets && l.inlets.map(inlet => pack.rivers.find(river => river.i === inlet)?.name);
+    const outlet = l.outlet ? pack.rivers.find(river => river.i === l.outlet)?.name : "no";
+    document.getElementById("lakeInlets").value = inlets ? inlets.length : "no";
+    document.getElementById("lakeInlets").title = inlets ? inlets.join(", ") : "";
+    document.getElementById("lakeOutlet").value = outlet;
   }
 
   function drawLakeVertices() {
-    const vertices = getLake().vertices;
+    const v = getLake().vertices; // lake outer vertices
 
-    const neibCells = unique(vertices.map(v => pack.vertices.c[v]).flat());
+    const c = [...new Set(v.map(v => pack.vertices.c[v]).flat())];
     debug
       .select("#vertices")
       .selectAll("polygon")
-      .data(neibCells)
+      .data(c)
       .enter()
       .append("polygon")
-      .attr("points", getPackPolygon)
+      .attr("points", d => getPackPolygon(d))
       .attr("data-c", d => d);
 
     debug
       .select("#vertices")
       .selectAll("circle")
-      .data(vertices)
+      .data(v)
       .enter()
       .append("circle")
       .attr("cx", d => pack.vertices.p[d][0])
       .attr("cy", d => pack.vertices.p[d][1])
       .attr("r", 0.4)
       .attr("data-v", d => d)
-      .call(d3.drag().on("drag", handleVertexDrag).on("end", handleVertexDragEnd))
+      .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")
+        tip("Drag to move the vertex, please use for fine-tuning only. Edit heightmap to change actual cell heights")
       );
   }
 
-  function handleVertexDrag() {
-    const x = rn(d3.event.x, 2);
-    const y = rn(d3.event.y, 2);
+  function dragVertex() {
+    const x = rn(d3.event.x, 2),
+      y = rn(d3.event.y, 2);
     this.setAttribute("cx", x);
     this.setAttribute("cy", y);
-
-    const vertexId = d3.select(this).datum();
-    pack.vertices.p[vertexId] = [x, y];
-
-    const feature = getLake();
-
-    // update lake path
-    defs.select("#featurePaths > path#feature_" + feature.i).attr("d", getFeaturePath(feature));
-
-    // update area
-    const points = feature.vertices.map(vertex => pack.vertices.p[vertex]);
-    feature.area = Math.abs(d3.polygonArea(points));
-    byId("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
-
-    // update cell
-    debug.select("#vertices").selectAll("polygon").attr("points", getPackPolygon);
+    const v = +this.dataset.v;
+    pack.vertices.p[v] = [x, y];
+    debug
+      .select("#vertices")
+      .selectAll("polygon")
+      .attr("points", d => getPackPolygon(d));
+    redrawLake();
   }
 
-  function handleVertexDragEnd() {
-    if (layerIsOn("toggleStates")) drawStates();
-    if (layerIsOn("toggleProvinces")) drawProvinces();
-    if (layerIsOn("toggleBorders")) drawBorders();
-    if (layerIsOn("toggleBiomes")) drawBiomes();
-    if (layerIsOn("toggleReligions")) drawReligions();
-    if (layerIsOn("toggleCultures")) drawCultures();
+  function redrawLake() {
+    lineGen.curve(d3.curveBasisClosed);
+    const feature = getLake();
+    const points = feature.vertices.map(v => pack.vertices.p[v]);
+    const d = round(lineGen(points));
+    elSelected.attr("d", d);
+    defs.select("mask#land > path#land_" + feature.i).attr("d", d); // update land mask
+
+    feature.area = Math.abs(d3.polygonArea(points));
+    document.getElementById("lakeArea").value = si(getArea(feature.area)) + " " + getAreaUnit();
   }
 
   function changeName() {
@@ -140,18 +136,18 @@ function editLake() {
     lake.name = lakeName.value = Names.getBase(rand(nameBases.length - 1));
   }
 
-  function selectLakeGroup() {
-    const lake = getLake();
-
-    const select = byId("lakeGroup");
+  function selectLakeGroup(node) {
+    const group = node.parentNode.id;
+    const select = document.getElementById("lakeGroup");
     select.options.length = 0; // remove all options
+
     lakes.selectAll("g").each(function () {
-      select.options.add(new Option(this.id, this.id, false, this.id === lake.group));
+      select.options.add(new Option(this.id, this.id, false, this.id === group));
     });
   }
 
   function changeLakeGroup() {
-    byId(this.value).appendChild(elSelected.node());
+    document.getElementById(this.value).appendChild(elSelected.node());
     getLake().group = this.value;
   }
 
@@ -176,7 +172,7 @@ function editLake() {
       .replace(/ /g, "_")
       .replace(/[^\w\s]/gi, "");
 
-    if (byId(group)) {
+    if (document.getElementById(group)) {
       tip("Element with this id already exists. Please provide a unique name", false, "error");
       return;
     }
@@ -190,23 +186,23 @@ function editLake() {
     const oldGroup = elSelected.node().parentNode;
     const basic = ["freshwater", "salt", "sinkhole", "frozen", "lava", "dry"].includes(oldGroup.id);
     if (!basic && oldGroup.childElementCount === 1) {
-      byId("lakeGroup").selectedOptions[0].remove();
-      byId("lakeGroup").options.add(new Option(group, group, false, true));
+      document.getElementById("lakeGroup").selectedOptions[0].remove();
+      document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
       oldGroup.id = group;
       toggleNewGroupInput();
-      byId("lakeGroupName").value = "";
+      document.getElementById("lakeGroupName").value = "";
       return;
     }
 
     // create a new group
     const newGroup = elSelected.node().parentNode.cloneNode(false);
-    byId("lakes").appendChild(newGroup);
+    document.getElementById("lakes").appendChild(newGroup);
     newGroup.id = group;
-    byId("lakeGroup").options.add(new Option(group, group, false, true));
-    byId(group).appendChild(elSelected.node());
+    document.getElementById("lakeGroup").options.add(new Option(group, group, false, true));
+    document.getElementById(group).appendChild(elSelected.node());
 
     toggleNewGroupInput();
-    byId("lakeGroupName").value = "";
+    document.getElementById("lakeGroupName").value = "";
   }
 
   function removeLakeGroup() {
@@ -225,14 +221,14 @@ function editLake() {
       buttons: {
         Remove: function () {
           $(this).dialog("close");
-          const freshwater = byId("freshwater");
-          const groupEl = byId(group);
+          const freshwater = document.getElementById("freshwater");
+          const groupEl = document.getElementById(group);
           while (groupEl.childNodes.length) {
             freshwater.appendChild(groupEl.childNodes[0]);
           }
           groupEl.remove();
-          byId("lakeGroup").selectedOptions[0].remove();
-          byId("lakeGroup").value = "freshwater";
+          document.getElementById("lakeGroup").selectedOptions[0].remove();
+          document.getElementById("lakeGroup").value = "freshwater";
         },
         Cancel: function () {
           $(this).dialog("close");
diff --git a/modules/ui/layers.js b/modules/ui/layers.js
index a1e3b503..0b85aa0c 100644
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@@ -8,7 +8,7 @@ function getDefaultPresets() {
   return {
     political: [
       "toggleBorders",
-      "toggleBurgIcons",
+      "toggleIcons",
       "toggleIce",
       "toggleLabels",
       "toggleRivers",
@@ -19,8 +19,8 @@ function getDefaultPresets() {
     ],
     cultural: [
       "toggleBorders",
-      "toggleBurgIcons",
       "toggleCultures",
+      "toggleIcons",
       "toggleLabels",
       "toggleRivers",
       "toggleRoutes",
@@ -29,7 +29,7 @@ function getDefaultPresets() {
     ],
     religions: [
       "toggleBorders",
-      "toggleBurgIcons",
+      "toggleIcons",
       "toggleLabels",
       "toggleReligions",
       "toggleRivers",
@@ -37,22 +37,15 @@ function getDefaultPresets() {
       "toggleScaleBar",
       "toggleVignette"
     ],
-    provinces: [
-      "toggleBorders",
-      "toggleBurgIcons",
-      "toggleProvinces",
-      "toggleRivers",
-      "toggleScaleBar",
-      "toggleVignette"
-    ],
+    provinces: ["toggleBorders", "toggleIcons", "toggleProvinces", "toggleRivers", "toggleScaleBar", "toggleVignette"],
     biomes: ["toggleBiomes", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
     heightmap: ["toggleHeight", "toggleRivers", "toggleVignette"],
     physical: ["toggleCoordinates", "toggleHeight", "toggleIce", "toggleRivers", "toggleScaleBar", "toggleVignette"],
     poi: [
       "toggleBorders",
-      "toggleBurgIcons",
       "toggleHeight",
       "toggleIce",
+      "toggleIcons",
       "toggleMarkers",
       "toggleRivers",
       "toggleRoutes",
@@ -61,7 +54,7 @@ function getDefaultPresets() {
     ],
     military: [
       "toggleBorders",
-      "toggleBurgIcons",
+      "toggleIcons",
       "toggleLabels",
       "toggleMilitary",
       "toggleRivers",
@@ -72,7 +65,7 @@ function getDefaultPresets() {
     ],
     emblems: [
       "toggleBorders",
-      "toggleBurgIcons",
+      "toggleIcons",
       "toggleIce",
       "toggleEmblems",
       "toggleRivers",
@@ -99,45 +92,33 @@ function restoreCustomPresets() {
 }
 
 // run on map generation
-function applyLayersPreset() {
-  const preset = localStorage.getItem("preset") || byId("layersPreset").value;
-  setLayersPreset(preset);
-
-  const layers = presets[preset]; // layers to be turned on
-  document.querySelectorAll("#mapLayers > li").forEach(el => {
-    const shouldBeOn = layers.includes(el.id);
-    if (shouldBeOn) el.classList.remove("buttonoff");
-    else el.classList.add("buttonoff");
-  });
+function applyPreset() {
+  const preset = localStorage.getItem("preset") || document.getElementById("layersPreset").value;
+  changePreset(preset);
 }
 
-function setLayersPreset(preset) {
-  byId("layersPreset").value = preset;
+// toggle layers on preset change
+function changePreset(preset) {
+  const layers = presets[preset]; // layers to be turned on
+  document
+    .getElementById("mapLayers")
+    .querySelectorAll("li")
+    .forEach(function (e) {
+      if (layers.includes(e.id) && !layerIsOn(e.id)) e.click();
+      else if (!layers.includes(e.id) && layerIsOn(e.id)) e.click();
+    });
+  layersPreset.value = preset;
   localStorage.setItem("preset", preset);
 
   const isDefault = getDefaultPresets()[preset];
-  byId("removePresetButton").style.display = isDefault ? "none" : "inline-block";
-  byId("savePresetButton").style.display = "none";
-}
-
-// toggle layers on manual preset change
-function handleLayersPresetChange(preset) {
-  setLayersPreset(preset);
-
-  const layers = presets[preset]; // layers to be turned on
-  document.querySelectorAll("#mapLayers > li").forEach(el => {
-    const isOn = layerIsOn(el.id);
-    const shouldBeOn = layers.includes(el.id);
-    if (shouldBeOn && !isOn) el.click();
-    if (isOn && !shouldBeOn) el.click();
-  });
-
-  if (byId("canvas3d")) setTimeout(() => ThreeD.update(), 400);
+  removePresetButton.style.display = isDefault ? "none" : "inline-block";
+  savePresetButton.style.display = "none";
+  if (document.getElementById("canvas3d")) setTimeout(ThreeD.update(), 400);
 }
 
 function savePreset() {
   prompt("Please provide a preset name", {default: ""}, preset => {
-    presets[preset] = Array.from(byId("mapLayers").querySelectorAll("li:not(.buttonoff)"))
+    presets[preset] = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
       .map(node => node.id)
       .sort();
     layersPreset.add(new Option(preset, preset, false, true));
@@ -162,18 +143,17 @@ function removePreset() {
 }
 
 function getCurrentPreset() {
-  const layers = Array.from(document.querySelectorAll("#mapLayers > li:not(.buttonoff)"))
+  const layers = Array.from(document.getElementById("mapLayers").querySelectorAll("li:not(.buttonoff)"))
     .map(node => node.id)
     .sort();
+  const defaultPresets = getDefaultPresets();
 
   for (const preset in presets) {
-    if (JSON.stringify(presets[preset].sort()) === JSON.stringify(layers)) {
-      layersPreset.value = preset;
-      const isDefault = getDefaultPresets()[preset];
-      removePresetButton.style.display = isDefault ? "none" : "inline-block";
-      savePresetButton.style.display = "none";
-      return;
-    }
+    if (JSON.stringify(presets[preset]) !== JSON.stringify(layers)) continue;
+    layersPreset.value = preset;
+    removePresetButton.style.display = defaultPresets[preset] ? "none" : "inline-block";
+    savePresetButton.style.display = "none";
+    return;
   }
 
   layersPreset.value = "custom";
@@ -181,37 +161,31 @@ function getCurrentPreset() {
   savePresetButton.style.display = "inline-block";
 }
 
-// run on each map generation
-function drawLayers() {
-  drawFeatures();
+// run on map regeneration
+function restoreLayers() {
   if (layerIsOn("toggleTexture")) drawTexture();
   if (layerIsOn("toggleHeight")) drawHeightmap();
-  if (layerIsOn("toggleBiomes")) drawBiomes();
   if (layerIsOn("toggleCells")) drawCells();
   if (layerIsOn("toggleGrid")) drawGrid();
   if (layerIsOn("toggleCoordinates")) drawCoordinates();
   if (layerIsOn("toggleCompass")) compass.style("display", "block");
-  if (layerIsOn("toggleRivers")) drawRivers();
-  if (layerIsOn("toggleRelief")) drawReliefIcons();
-  if (layerIsOn("toggleReligions")) drawReligions();
-  if (layerIsOn("toggleCultures")) drawCultures();
-  if (layerIsOn("toggleStates")) drawStates();
-  if (layerIsOn("toggleProvinces")) drawProvinces();
-  if (layerIsOn("toggleZones")) drawZones();
-  if (layerIsOn("toggleBorders")) drawBorders();
   if (layerIsOn("toggleRoutes")) drawRoutes();
-  if (layerIsOn("toggleTemperature")) drawTemperature();
+  if (layerIsOn("toggleTemp")) drawTemp();
+  if (layerIsOn("togglePrec")) drawPrec();
   if (layerIsOn("togglePopulation")) drawPopulation();
+  if (layerIsOn("toggleBiomes")) drawBiomes();
+  if (layerIsOn("toggleRelief")) ReliefIcons();
+  if (layerIsOn("toggleCultures")) drawCultures();
+  if (layerIsOn("toggleProvinces")) drawProvinces();
+  if (layerIsOn("toggleReligions")) drawReligions();
   if (layerIsOn("toggleIce")) drawIce();
-  if (layerIsOn("togglePrecipitation")) drawPrecipitation();
   if (layerIsOn("toggleEmblems")) drawEmblems();
-  if (layerIsOn("toggleLabels")) drawLabels();
-  if (layerIsOn("toggleBurgIcons")) drawBurgIcons();
-  if (layerIsOn("toggleMilitary")) drawMilitary();
   if (layerIsOn("toggleMarkers")) drawMarkers();
-  if (layerIsOn("toggleRulers")) rulers.draw();
-  // scale bar
-  // vignette
+
+  // some layers are rendered each time, remove them if they are not on
+  if (!layerIsOn("toggleBorders")) borders.selectAll("path").remove();
+  if (!layerIsOn("toggleStates")) regions.selectAll("path").remove();
+  if (!layerIsOn("toggleRivers")) rivers.selectAll("*").remove();
 }
 
 function toggleHeight(event) {
@@ -229,54 +203,369 @@ function toggleHeight(event) {
   }
 }
 
-function toggleTemperature(event) {
+function drawHeightmap() {
+  TIME && console.time("drawHeightmap");
+
+  const ocean = terrs.select("#oceanHeights");
+  const land = terrs.select("#landHeights");
+
+  ocean.selectAll("*").remove();
+  land.selectAll("*").remove();
+
+  const paths = new Array(101);
+
+  // ocean cells
+  const renderOceanCells = Boolean(+ocean.attr("data-render"));
+  if (renderOceanCells) {
+    const {cells, vertices} = grid;
+    const used = new Uint8Array(cells.i.length);
+
+    const skip = +ocean.attr("skip") + 1 || 1;
+    const relax = +ocean.attr("relax") || 0;
+    lineGen.curve(d3[ocean.attr("curve") || "curveBasisClosed"]);
+
+    let currentLayer = 0;
+    const heights = Array.from(cells.i).sort((a, b) => cells.h[a] - cells.h[b]);
+
+    for (const i of heights) {
+      const h = cells.h[i];
+      if (h > currentLayer) currentLayer += skip;
+      if (h < currentLayer) continue;
+      if (currentLayer >= 20) break;
+      if (used[i]) continue; // already marked
+      const onborder = cells.c[i].some(n => cells.h[n] < h);
+      if (!onborder) continue;
+      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
+      const chain = connectVertices(cells, vertices, vertex, h, used);
+      if (chain.length < 3) continue;
+      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
+      if (!paths[h]) paths[h] = "";
+      paths[h] += round(lineGen(points));
+    }
+  }
+
+  // land cells
+  {
+    const {cells, vertices} = pack;
+    const used = new Uint8Array(cells.i.length);
+
+    const skip = +land.attr("skip") + 1 || 1;
+    const relax = +land.attr("relax") || 0;
+    lineGen.curve(d3[land.attr("curve") || "curveBasisClosed"]);
+
+    let currentLayer = 20;
+    const heights = Array.from(cells.i).sort((a, b) => cells.h[a] - cells.h[b]);
+    for (const i of heights) {
+      const h = cells.h[i];
+      if (h > currentLayer) currentLayer += skip;
+      if (h < currentLayer) continue;
+      if (currentLayer > 100) break; // no layers possible with height > 100
+      if (used[i]) continue; // already marked
+      const onborder = cells.c[i].some(n => cells.h[n] < h);
+      if (!onborder) continue;
+      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] < h));
+      const chain = connectVertices(cells, vertices, vertex, h, used);
+      if (chain.length < 3) continue;
+      const points = simplifyLine(chain, relax).map(v => vertices.p[v]);
+      if (!paths[h]) paths[h] = "";
+      paths[h] += round(lineGen(points));
+    }
+  }
+
+  // render paths
+  for (const height of d3.range(0, 101)) {
+    const group = height < 20 ? ocean : land;
+    const scheme = getColorScheme(group.attr("scheme"));
+
+    if (height === 0 && renderOceanCells) {
+      // draw base ocean layer
+      group
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", graphWidth)
+        .attr("height", graphHeight)
+        .attr("fill", scheme(1));
+    }
+
+    if (height === 20) {
+      // draw base land layer
+      group
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", graphWidth)
+        .attr("height", graphHeight)
+        .attr("fill", scheme(0.8));
+    }
+
+    if (paths[height] && paths[height].length >= 10) {
+      const terracing = group.attr("terracing") / 10 || 0;
+      const color = getColor(height, scheme);
+
+      if (terracing) {
+        group
+          .append("path")
+          .attr("d", paths[height])
+          .attr("transform", "translate(.7,1.4)")
+          .attr("fill", d3.color(color).darker(terracing))
+          .attr("data-height", height);
+      }
+      group.append("path").attr("d", paths[height]).attr("fill", color).attr("data-height", height);
+    }
+  }
+
+  // connect vertices to chain
+  function connectVertices(cells, vertices, start, h, used) {
+    const n = cells.i.length;
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.h[c] === h).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.h[c[0]] < h;
+      const c1 = c[1] >= n || cells.h[c[1]] < h;
+      const c2 = c[2] >= n || cells.h[c[2]] < h;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
+
+  function simplifyLine(chain, simplification) {
+    if (!simplification) return chain;
+    const n = simplification + 1; // filter each nth element
+    return chain.filter((d, i) => i % n === 0);
+  }
+
+  TIME && console.timeEnd("drawHeightmap");
+}
+
+function getColor(value, scheme = getColorScheme("bright")) {
+  return scheme(1 - (value < 20 ? value - 5 : value) / 100);
+}
+
+function toggleTemp(event) {
   if (!temperature.selectAll("*").size()) {
-    turnButtonOn("toggleTemperature");
-    drawTemperature();
+    turnButtonOn("toggleTemp");
+    drawTemp();
     if (event && isCtrlClick(event)) editStyle("temperature");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("temperature");
-    turnButtonOff("toggleTemperature");
+    if (event && isCtrlClick(event)) {
+      editStyle("temperature");
+      return;
+    }
+    turnButtonOff("toggleTemp");
     temperature.selectAll("*").remove();
   }
 }
 
+function drawTemp() {
+  TIME && console.time("drawTemp");
+  temperature.selectAll("*").remove();
+  lineGen.curve(d3.curveBasisClosed);
+  const scheme = d3.scaleSequential(d3.interpolateSpectral);
+  const tMax = +temperatureEquatorOutput.max,
+    tMin = +temperatureEquatorOutput.min,
+    delta = tMax - tMin;
+
+  const cells = grid.cells,
+    vertices = grid.vertices,
+    n = cells.i.length;
+  const used = new Uint8Array(n); // to detect already passed cells
+  const min = d3.min(cells.temp),
+    max = d3.max(cells.temp);
+  const step = Math.max(Math.round(Math.abs(min - max) / 5), 1);
+  const isolines = d3.range(min + step, max, step);
+  const chains = [],
+    labels = []; // store label coordinates
+
+  for (const i of cells.i) {
+    const t = cells.temp[i];
+    if (used[i] || !isolines.includes(t)) continue;
+    const start = findStart(i, t);
+    if (!start) continue;
+    used[i] = 1;
+
+    const chain = connectVertices(start, t); // vertices chain to form a path
+    const relaxed = chain.filter((v, i) => i % 4 === 0 || vertices.c[v].some(c => c >= n));
+    if (relaxed.length < 6) continue;
+    const points = relaxed.map(v => vertices.p[v]);
+    chains.push([t, points]);
+    addLabel(points, t);
+  }
+
+  // min temp isoline covers all graph
+  temperature
+    .append("path")
+    .attr("d", `M0,0 h${graphWidth} v${graphHeight} h${-graphWidth} Z`)
+    .attr("fill", scheme(1 - (min - tMin) / delta))
+    .attr("stroke", "none");
+
+  for (const t of isolines) {
+    const path = chains
+      .filter(c => c[0] === t)
+      .map(c => round(lineGen(c[1])))
+      .join("");
+    if (!path) continue;
+    const fill = scheme(1 - (t - tMin) / delta),
+      stroke = d3.color(fill).darker(0.2);
+    temperature.append("path").attr("d", path).attr("fill", fill).attr("stroke", stroke);
+  }
+
+  const tempLabels = temperature.append("g").attr("id", "tempLabels").attr("fill-opacity", 1);
+  tempLabels
+    .selectAll("text")
+    .data(labels)
+    .enter()
+    .append("text")
+    .attr("x", d => d[0])
+    .attr("y", d => d[1])
+    .text(d => convertTemperature(d[2]));
+
+  // find cell with temp < isotherm and find vertex to start path detection
+  function findStart(i, t) {
+    if (cells.b[i]) return cells.v[i].find(v => vertices.c[v].some(c => c >= n)); // map border cell
+    return cells.v[i][cells.c[i].findIndex(c => cells.temp[c] < t || !cells.temp[c])];
+  }
+
+  function addLabel(points, t) {
+    const c = svgWidth / 2; // map center x coordinate
+    // add label on isoline top center
+    const tc = points[d3.scan(points, (a, b) => a[1] - b[1] + (Math.abs(a[0] - c) - Math.abs(b[0] - c)) / 2)];
+    pushLabel(tc[0], tc[1], t);
+
+    // add label on isoline bottom center
+    if (points.length > 20) {
+      const bc = points[d3.scan(points, (a, b) => b[1] - a[1] + (Math.abs(a[0] - c) - Math.abs(b[0] - c)) / 2)];
+      const dist2 = (tc[1] - bc[1]) ** 2 + (tc[0] - bc[0]) ** 2; // square distance between this and top point
+      if (dist2 > 100) pushLabel(bc[0], bc[1], t);
+    }
+  }
+
+  function pushLabel(x, y, t) {
+    if (x < 20 || x > svgWidth - 20) return;
+    if (y < 20 || y > svgHeight - 20) return;
+    labels.push([x, y, t]);
+  }
+
+  // connect vertices to chain
+  function connectVertices(start, t) {
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.temp[c] === t).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.temp[c[0]] < t;
+      const c1 = c[1] >= n || cells.temp[c[1]] < t;
+      const c2 = c[2] >= n || cells.temp[c[2]] < t;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    chain.push(start);
+    return chain;
+  }
+  TIME && console.timeEnd("drawTemp");
+}
+
 function toggleBiomes(event) {
   if (!biomes.selectAll("path").size()) {
     turnButtonOn("toggleBiomes");
     drawBiomes();
     if (event && isCtrlClick(event)) editStyle("biomes");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("biomes");
+    if (event && isCtrlClick(event)) {
+      editStyle("biomes");
+      return;
+    }
     biomes.selectAll("path").remove();
     turnButtonOff("toggleBiomes");
   }
 }
 
 function drawBiomes() {
-  TIME && console.time("drawBiomes");
+  biomes.selectAll("path").remove();
+  const cells = pack.cells,
+    vertices = pack.vertices,
+    n = cells.i.length;
+  const used = new Uint8Array(cells.i.length);
+  const paths = new Array(biomesData.i.length).fill("");
 
-  const cells = pack.cells;
-  const bodyPaths = new Array(biomesData.i.length - 1);
-  const isolines = getIsolines(pack, cellId => cells.biome[cellId], {fill: true, waterGap: true});
-  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
-    const color = biomesData.color[index];
-    bodyPaths.push(getGappedFillPaths("biome", fill, waterGap, color, index));
+  for (const i of cells.i) {
+    if (!cells.biome[i]) continue; // no need to mark marine biome (liquid water)
+    if (used[i]) continue; // already marked
+    const b = cells.biome[i];
+    const onborder = cells.c[i].some(n => cells.biome[n] !== b);
+    if (!onborder) continue;
+    const edgeVerticle = cells.v[i].find(v => vertices.c[v].some(i => cells.biome[i] !== b));
+    const chain = connectVertices(edgeVerticle, b);
+    if (chain.length < 3) continue;
+    const points = clipPoly(
+      chain.map(v => vertices.p[v]),
+      1
+    );
+    paths[b] += "M" + points.join("L") + "Z";
+  }
+
+  paths.forEach(function (d, i) {
+    if (d.length < 10) return;
+    biomes
+      .append("path")
+      .attr("d", d)
+      .attr("fill", biomesData.color[i])
+      .attr("stroke", biomesData.color[i])
+      .attr("id", "biome" + i);
   });
 
-  byId("biomes").innerHTML = bodyPaths.join("");
-
-  TIME && console.timeEnd("drawBiomes");
+  // connect vertices to chain
+  function connectVertices(start, b) {
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.biome[c] === b).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.biome[c[0]] !== b;
+      const c1 = c[1] >= n || cells.biome[c[1]] !== b;
+      const c2 = c[2] >= n || cells.biome[c[2]] !== b;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
 }
 
-function togglePrecipitation(event) {
+function togglePrec(event) {
   if (!prec.selectAll("circle").size()) {
-    turnButtonOn("togglePrecipitation");
-    drawPrecipitation();
+    turnButtonOn("togglePrec");
+    drawPrec();
     if (event && isCtrlClick(event)) editStyle("prec");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("prec");
-    turnButtonOff("togglePrecipitation");
+    if (event && isCtrlClick(event)) {
+      editStyle("prec");
+      return;
+    }
+    turnButtonOff("togglePrec");
     const hide = d3.transition().duration(1000).ease(d3.easeSinIn);
     prec.selectAll("text").attr("opacity", 1).transition(hide).attr("opacity", 0);
     prec.selectAll("circle").transition(hide).attr("r", 0).remove();
@@ -284,12 +573,11 @@ function togglePrecipitation(event) {
   }
 }
 
-function drawPrecipitation() {
-  TIME && console.time("drawPrecipitation");
-
+function drawPrec() {
   prec.selectAll("circle").remove();
   const {cells, points} = grid;
 
+  prec.style("display", "block");
   const show = d3.transition().duration(800).ease(d3.easeSinIn);
   prec.selectAll("text").attr("opacity", 0).transition(show).attr("opacity", 1);
 
@@ -298,7 +586,6 @@ function drawPrecipitation() {
   const getRadius = prec => rn(Math.sqrt(prec / 4) / cellsNumberModifier, 2);
 
   prec
-    .style("display", "block")
     .selectAll("circle")
     .data(data)
     .enter()
@@ -308,8 +595,6 @@ function drawPrecipitation() {
     .attr("r", 0)
     .transition(show)
     .attr("r", d => getRadius(cells.prec[d]));
-
-  TIME && console.timeEnd("drawPrecipitation");
 }
 
 function togglePopulation(event) {
@@ -318,9 +603,11 @@ function togglePopulation(event) {
     drawPopulation();
     if (event && isCtrlClick(event)) editStyle("population");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("population");
+    if (event && isCtrlClick(event)) {
+      editStyle("population");
+      return;
+    }
     turnButtonOff("togglePopulation");
-
     const isD3data = population.select("line").datum();
     if (!isD3data) {
       // just remove
@@ -345,17 +632,17 @@ function togglePopulation(event) {
   }
 }
 
-function drawPopulation() {
+function drawPopulation(event) {
   population.selectAll("line").remove();
-
-  const {cells, burgs} = pack;
+  const cells = pack.cells,
+    p = cells.p,
+    burgs = pack.burgs;
   const show = d3.transition().duration(2000).ease(d3.easeSinIn);
 
   const rural = Array.from(
     cells.i.filter(i => cells.pop[i] > 0),
-    i => [...cells.p[i], cells.p[i][1] - cells.pop[i] / 5]
+    i => [p[i][0], p[i][1], p[i][1] - cells.pop[i] / 8]
   );
-
   population
     .select("#rural")
     .selectAll("line")
@@ -369,7 +656,7 @@ function drawPopulation() {
     .transition(show)
     .attr("y2", d => d[2]);
 
-  const urban = burgs.filter(b => b.i && !b.removed).map(b => [b.x, b.y, b.y - (b.population / 5) * urbanization]);
+  const urban = burgs.filter(b => b.i && !b.removed).map(b => [b.x, b.y, b.y - (b.population / 8) * urbanization]);
   population
     .select("#urban")
     .selectAll("line")
@@ -391,17 +678,22 @@ function toggleCells(event) {
     drawCells();
     if (event && isCtrlClick(event)) editStyle("cells");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("cells");
+    if (event && isCtrlClick(event)) {
+      editStyle("cells");
+      return;
+    }
     cells.selectAll("path").remove();
     turnButtonOff("toggleCells");
   }
 }
 
 function drawCells() {
-  const cells = customization === 1 ? grid.cells.i : pack.cells.i;
+  cells.selectAll("path").remove();
+  const data = customization === 1 ? grid.cells.i : pack.cells.i;
   const polygon = customization === 1 ? getGridPolygon : getPackPolygon;
-  const paths = Array.from(cells).map(i => "M" + polygon(i));
-  byId("cells").innerHTML = `<path d="${paths.join("")}" />`;
+  let path = "";
+  data.forEach(i => (path += "M" + polygon(i)));
+  cells.append("path").attr("d", path);
 }
 
 function toggleIce(event) {
@@ -411,53 +703,84 @@ function toggleIce(event) {
     if (!ice.selectAll("*").size()) drawIce();
     if (event && isCtrlClick(event)) editStyle("ice");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("ice");
+    if (event && isCtrlClick(event)) {
+      editStyle("ice");
+      return;
+    }
     $("#ice").fadeOut();
     turnButtonOff("toggleIce");
   }
 }
 
 function drawIce() {
-  TIME && console.time("drawIce");
-
-  const {cells, features} = grid;
+  const {cells, vertices} = grid;
   const {temp, h} = cells;
+  const n = cells.i.length;
+
+  const used = new Uint8Array(cells.i.length);
   Math.random = aleaPRNG(seed);
 
-  const ICEBERG_MAX_TEMP = 0;
-  const GLACIER_MAX_TEMP = -8;
-  const minMaxTemp = d3.min(temp);
+  const shieldMin = -8; // max temp to form ice shield (glacier)
+  const icebergMax = 1; // max temp to form an iceberg
 
-  // cold land: draw glaciers
-  {
-    const type = "iceShield";
-    const getType = cellId => (h[cellId] >= 20 && temp[cellId] <= GLACIER_MAX_TEMP ? type : null);
-    const isolines = getIsolines(grid, getType, {polygons: true});
-    isolines[type]?.polygons?.forEach(points => {
-      const clipped = clipPoly(points);
-      ice.append("polygon").attr("points", clipped).attr("type", type);
-    });
+  for (const i of grid.cells.i) {
+    const t = temp[i];
+    if (t > icebergMax) continue; // too warm: no ice
+    if (t > shieldMin && h[i] >= 20) continue; // non-glacier land: no ice
+
+    if (t <= shieldMin) {
+      // very cold: ice shield
+      if (used[i]) continue; // already rendered
+      const onborder = cells.c[i].some(n => temp[n] > shieldMin);
+      if (!onborder) continue; // need to start from onborder cell
+      const vertex = cells.v[i].find(v => vertices.c[v].some(i => temp[i] > shieldMin));
+      const chain = connectVertices(vertex);
+      if (chain.length < 3) continue;
+      const points = clipPoly(chain.map(v => vertices.p[v]));
+      ice.append("polygon").attr("points", points).attr("type", "iceShield");
+      continue;
+    }
+
+    const tNormalized = normalize(t, -8, 2);
+    const randomFactor = t > -5 ? 0.4 + rand() * 1.2 : 1;
+
+    // mildly cold: iceberd
+    if (P(tNormalized ** 0.5 * randomFactor)) continue; // cold: skip some cells
+    if (grid.features[cells.f[i]].type === "lake") continue; // lake: no icebers
+
+    let size = 1 - tNormalized; // iceberg size: 0 = zero size, 1 = full size
+    if (cells.t[i] === -1) size /= 1.3; // coasline: smaller icebers
+    resizePolygon(i, minmax(rn(size * randomFactor, 2), 0.08, 1));
   }
 
-  // cold water: draw icebergs
-  for (const cellId of grid.cells.i) {
-    const t = temp[cellId];
-    if (h[cellId] >= 20) continue; // no icebergs on land
-    if (t > ICEBERG_MAX_TEMP) continue; // too warm: no icebergs
-    if (features[cells.f[cellId]].type === "lake") continue; // no icebers on lakes
-    if (P(0.8)) continue; // skip most of eligible cells
-
-    const randomFactor = 0.8 + rand() * 0.4; // random size factor
-    let baseSize = (1 - normalize(t, minMaxTemp, 1)) * 0.8; // size: 0 = zero size, 1 = full size
-    if (cells.t[cellId] === -1) baseSize /= 1.3; // coasline: smaller icebergs
-    const size = minmax(rn(baseSize * randomFactor, 2), 0.1, 1);
-
-    const [cx, cy] = grid.points[cellId];
-    const points = getGridPolygon(cellId).map(([x, y]) => [rn(lerp(cx, x, size), 2), rn(lerp(cy, y, size), 2)]);
-    ice.append("polygon").attr("points", points).attr("cell", cellId).attr("size", size);
+  function resizePolygon(i, size) {
+    const [cx, cy] = grid.points[i];
+    const points = getGridPolygon(i).map(([x, y]) => [rn(lerp(cx, x, size), 2), rn(lerp(cy, y, size), 2)]);
+    ice.append("polygon").attr("points", points).attr("cell", i).attr("size", size);
   }
 
-  TIME && console.timeEnd("drawIce");
+  // connect vertices to chain
+  function connectVertices(start) {
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = last(chain); // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => temp[c] <= shieldMin).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || temp[c[0]] > shieldMin;
+      const c1 = c[1] >= n || temp[c[1]] > shieldMin;
+      const c2 = c[2] >= n || temp[c[2]] > shieldMin;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
 }
 
 function toggleCultures(event) {
@@ -468,7 +791,10 @@ function toggleCultures(event) {
     drawCultures();
     if (event && isCtrlClick(event)) editStyle("cults");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("cults");
+    if (event && isCtrlClick(event)) {
+      editStyle("cults");
+      return;
+    }
     cults.selectAll("path").remove();
     turnButtonOff("toggleCultures");
   }
@@ -476,17 +802,59 @@ function toggleCultures(event) {
 
 function drawCultures() {
   TIME && console.time("drawCultures");
-  const {cells, cultures} = pack;
 
-  const bodyPaths = new Array(cultures.length - 1);
-  const isolines = getIsolines(pack, cellId => cells.culture[cellId], {fill: true, waterGap: true});
-  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
-    const color = cultures[index].color;
-    bodyPaths.push(getGappedFillPaths("culture", fill, waterGap, color, index));
-  });
+  cults.selectAll("path").remove();
+  const {cells, vertices, cultures} = pack;
+  const n = cells.i.length;
+  const used = new Uint8Array(cells.i.length);
+  const paths = new Array(cultures.length).fill("");
 
-  byId("cults").innerHTML = bodyPaths.join("");
+  for (const i of cells.i) {
+    if (!cells.culture[i]) continue;
+    if (used[i]) continue;
+    used[i] = 1;
+    const c = cells.culture[i];
+    const onborder = cells.c[i].some(n => cells.culture[n] !== c);
+    if (!onborder) continue;
+    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.culture[i] !== c));
+    const chain = connectVertices(vertex, c);
+    if (chain.length < 3) continue;
+    const points = chain.map(v => vertices.p[v]);
+    paths[c] += "M" + points.join("L") + "Z";
+  }
 
+  const data = paths.map((p, i) => [p, i]).filter(d => d[0].length > 10);
+  cults
+    .selectAll("path")
+    .data(data)
+    .enter()
+    .append("path")
+    .attr("d", d => d[0])
+    .attr("fill", d => cultures[d[1]].color)
+    .attr("id", d => "culture" + d[1]);
+
+  // connect vertices to chain
+  function connectVertices(start, t) {
+    const chain = []; // vertices chain to form a path
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain[chain.length - 1]; // previous vertex in chain
+      chain.push(current); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.culture[c] === t).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.culture[c[0]] !== t;
+      const c1 = c[1] >= n || cells.culture[c[1]] !== t;
+      const c2 = c[2] >= n || cells.culture[c[2]] !== t;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+      if (current === chain[chain.length - 1]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
   TIME && console.timeEnd("drawCultures");
 }
 
@@ -497,7 +865,10 @@ function toggleReligions(event) {
     drawReligions();
     if (event && isCtrlClick(event)) editStyle("relig");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("relig");
+    if (event && isCtrlClick(event)) {
+      editStyle("relig");
+      return;
+    }
     relig.selectAll("path").remove();
     turnButtonOff("toggleReligions");
   }
@@ -505,60 +876,263 @@ function toggleReligions(event) {
 
 function drawReligions() {
   TIME && console.time("drawReligions");
-  const {cells, religions} = pack;
 
-  const bodyPaths = new Array(religions.length - 1);
-  const isolines = getIsolines(pack, cellId => cells.religion[cellId], {fill: true, waterGap: true});
-  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
-    const color = religions[index].color;
-    bodyPaths.push(getGappedFillPaths("religion", fill, waterGap, color, index));
-  });
+  relig.selectAll("path").remove();
+  const {cells, vertices, religions} = pack;
+  const n = cells.i.length;
 
-  byId("relig").innerHTML = bodyPaths.join("");
+  const used = new Uint8Array(cells.i.length);
+  const vArray = new Array(religions.length); // store vertices array
+  const body = new Array(religions.length).fill(""); // store path around each religion
+  const gap = new Array(religions.length).fill(""); // store path along water for each religion to fill the gaps
 
+  for (const i of cells.i) {
+    if (!cells.religion[i]) continue;
+    if (used[i]) continue;
+    used[i] = 1;
+    const r = cells.religion[i];
+    const onborder = cells.c[i].filter(n => cells.religion[n] !== r);
+    if (!onborder.length) continue;
+    const borderWith = cells.c[i].map(c => cells.religion[c]).find(n => n !== r);
+    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.religion[i] === borderWith));
+    const chain = connectVertices(vertex, r, borderWith);
+    if (chain.length < 3) continue;
+    const points = chain.map(v => vertices.p[v[0]]);
+    if (!vArray[r]) vArray[r] = [];
+    vArray[r].push(points);
+    body[r] += "M" + points.join("L") + "Z";
+    gap[r] +=
+      "M" +
+      vertices.p[chain[0][0]] +
+      chain.reduce(
+        (r2, v, i, d) =>
+          !i ? r2 : !v[2] ? r2 + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r2 + "M" + vertices.p[v[0]] : r2,
+        ""
+      );
+  }
+
+  const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, religions[i].color]).filter(d => d[0]);
+  relig
+    .selectAll("path")
+    .data(bodyData)
+    .enter()
+    .append("path")
+    .attr("d", d => d[0])
+    .attr("fill", d => d[2])
+    .attr("id", d => "religion" + d[1]);
+  const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, religions[i].color]).filter(d => d[0]);
+  relig
+    .selectAll(".path")
+    .data(gapData)
+    .enter()
+    .append("path")
+    .attr("d", d => d[0])
+    .attr("fill", "none")
+    .attr("stroke", d => d[2])
+    .attr("id", d => "religion-gap" + d[1])
+    .attr("stroke-width", "10px");
+
+  // connect vertices to chain
+  function connectVertices(start, t, religion) {
+    const chain = []; // vertices chain to form a path
+    let land = vertices.c[start].some(c => cells.h[c] >= 20 && cells.religion[c] !== t);
+    function check(i) {
+      religion = cells.religion[i];
+      land = cells.h[i] >= 20;
+    }
+
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain[chain.length - 1] ? chain[chain.length - 1][0] : -1; // previous vertex in chain
+      chain.push([current, religion, land]); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.religion[c] === t).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.religion[c[0]] !== t;
+      const c1 = c[1] >= n || cells.religion[c[1]] !== t;
+      const c2 = c[2] >= n || cells.religion[c[2]] !== t;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) {
+        current = v[0];
+        check(c0 ? c[0] : c[1]);
+      } else if (v[1] !== prev && c1 !== c2) {
+        current = v[1];
+        check(c1 ? c[1] : c[2]);
+      } else if (v[2] !== prev && c0 !== c2) {
+        current = v[2];
+        check(c2 ? c[2] : c[0]);
+      }
+      if (current === chain[chain.length - 1][0]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    return chain;
+  }
   TIME && console.timeEnd("drawReligions");
 }
 
 function toggleStates(event) {
   if (!layerIsOn("toggleStates")) {
     turnButtonOn("toggleStates");
+    regions.style("display", null);
     drawStates();
     if (event && isCtrlClick(event)) editStyle("regions");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("regions");
-    regions.selectAll("path").remove();
+    if (event && isCtrlClick(event)) {
+      editStyle("regions");
+      return;
+    }
+    regions.style("display", "none").selectAll("path").remove();
     turnButtonOff("toggleStates");
   }
 }
 
 function drawStates() {
   TIME && console.time("drawStates");
-  const {cells, states} = pack;
+  regions.selectAll("path").remove();
 
-  const maxLength = states.length - 1;
-  const bodyPaths = new Array(maxLength);
-  const clipPaths = new Array(maxLength);
-  const haloPaths = new Array(maxLength);
+  const {cells, vertices, features} = pack;
+  const states = pack.states;
+  const n = cells.i.length;
 
-  const renderHalo = shapeRendering.value === "geometricPrecision";
-  const isolines = getIsolines(pack, cellId => cells.state[cellId], {fill: true, waterGap: true, halo: renderHalo});
-  Object.entries(isolines).forEach(([index, {fill, waterGap, halo}]) => {
-    const color = states[index].color;
-    bodyPaths.push(getGappedFillPaths("state", fill, waterGap, color, index));
+  const used = new Uint8Array(cells.i.length);
+  const vArray = new Array(states.length); // store vertices array
+  const body = new Array(states.length).fill(""); // path around each state
+  const gap = new Array(states.length).fill(""); // path along water for each state to fill the gaps
+  const halo = new Array(states.length).fill(""); // path around states, but not lakes
 
-    if (renderHalo) {
-      const haloColor = d3.color(color)?.darker().hex() || "#666666";
-      clipPaths.push(/* html */ `<clipPath id="state-clip${index}"><use href="#state${index}"/></clipPath>`);
-      haloPaths.push(
-        /* html */ `<path id="state-border${index}" d="${halo}" clip-path="url(#state-clip${index})" stroke="${haloColor}"/>`
-      );
-    }
+  const getStringPoint = v => vertices.p[v[0]].join(",");
+
+  // define inner-state lakes to omit on border render
+  const innerLakes = features.map(feature => {
+    if (feature.type !== "lake") return false;
+    if (!feature.shoreline) Lakes.getShoreline(feature);
+
+    const states = feature.shoreline.map(i => cells.state[i]);
+    return new Set(states).size > 1 ? false : true;
   });
 
-  byId("statesBody").innerHTML = bodyPaths.join("");
-  byId("statePaths").innerHTML = renderHalo ? clipPaths.join("") : "";
-  byId("statesHalo").innerHTML = renderHalo ? haloPaths.join("") : "";
+  for (const i of cells.i) {
+    if (!cells.state[i] || used[i]) continue;
+    const state = cells.state[i];
 
+    const onborder = cells.c[i].some(n => cells.state[n] !== state);
+    if (!onborder) continue;
+
+    const borderWith = cells.c[i].map(c => cells.state[c]).find(n => n !== state);
+    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.state[i] === borderWith));
+    const chain = connectVertices(vertex, state);
+
+    const noInnerLakes = chain.filter(v => v[1] !== "innerLake");
+    if (noInnerLakes.length < 3) continue;
+
+    // get path around the state
+    if (!vArray[state]) vArray[state] = [];
+    const points = noInnerLakes.map(v => vertices.p[v[0]]);
+    vArray[state].push(points);
+    body[state] += "M" + points.join("L");
+
+    // connect path for halo
+    let discontinued = true;
+    halo[state] += noInnerLakes
+      .map(v => {
+        if (v[1] === "border") {
+          discontinued = true;
+          return "";
+        }
+
+        const operation = discontinued ? "M" : "L";
+        discontinued = false;
+        return `${operation}${getStringPoint(v)}`;
+      })
+      .join("");
+
+    // connect gaps between state and water into a single path
+    discontinued = true;
+    gap[state] += chain
+      .map(v => {
+        if (v[1] === "land") {
+          discontinued = true;
+          return "";
+        }
+
+        const operation = discontinued ? "M" : "L";
+        discontinued = false;
+        return `${operation}${getStringPoint(v)}`;
+      })
+      .join("");
+  }
+
+  // find state visual center
+  vArray.forEach((ar, i) => {
+    const sorted = ar.sort((a, b) => b.length - a.length); // sort by points number
+    states[i].pole = polylabel(sorted, 1.0); // pole of inaccessibility
+  });
+
+  const bodyData = body.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
+  const gapData = gap.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
+
+  const bodyString = bodyData.map(d => `<path id="state${d[1]}" d="${d[0]}" fill="${d[2]}" stroke="none"/>`).join("");
+  const gapString = gapData.map(d => `<path id="state-gap${d[1]}" d="${d[0]}" fill="none" stroke="${d[2]}"/>`).join("");
+  statesBody.html(bodyString + gapString);
+
+  const isOptimized = shapeRendering.value === "optimizeSpeed";
+  if (!isOptimized) {
+    const haloData = halo.map((p, s) => [p.length > 10 ? p : null, s, states[s].color]).filter(d => d[0]);
+
+    const haloString = haloData
+      .map(d => {
+        const stroke = d3.color(d[2]) ? d3.color(d[2]).darker().hex() : "#666666";
+        return `<path id="state-border${d[1]}" d="${d[0]}" clip-path="url(#state-clip${d[1]})" stroke="${stroke}"/>`;
+      })
+      .join("");
+    statesHalo.html(haloString);
+
+    const clipString = bodyData
+      .map(d => `<clipPath id="state-clip${d[1]}"><use href="#state${d[1]}"/></clipPath>`)
+      .join("");
+    defs.select("#statePaths").html(clipString);
+  }
+
+  function connectVertices(start, state) {
+    const chain = []; // vertices chain to form a path
+    const getType = c => {
+      const borderCell = c.find(i => cells.b[i]);
+      if (borderCell) return "border";
+
+      const waterCell = c.find(i => cells.h[i] < 20);
+      if (!waterCell) return "land";
+      if (innerLakes[cells.f[waterCell]]) return "innerLake";
+      return features[cells.f[waterCell]].type;
+    };
+
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain.length ? chain[chain.length - 1][0] : -1; // previous vertex in chain
+
+      const c = vertices.c[current]; // cells adjacent to vertex
+      chain.push([current, getType(c)]); // add current vertex to sequence
+
+      c.filter(c => cells.state[c] === state).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.state[c[0]] !== state;
+      const c1 = c[1] >= n || cells.state[c[1]] !== state;
+      const c2 = c[2] >= n || cells.state[c[2]] !== state;
+
+      const v = vertices.v[current]; // neighboring vertices
+
+      if (v[0] !== prev && c0 !== c1) current = v[0];
+      else if (v[1] !== prev && c1 !== c2) current = v[1];
+      else if (v[2] !== prev && c0 !== c2) current = v[2];
+
+      if (current === prev) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+
+    if (chain.length) chain.push(chain[0]);
+    return chain;
+  }
+
+  invokeActiveZooming();
   TIME && console.timeEnd("drawStates");
 }
 
@@ -568,19 +1142,133 @@ function toggleBorders(event) {
     drawBorders();
     if (event && isCtrlClick(event)) editStyle("borders");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("borders");
+    if (event && isCtrlClick(event)) {
+      editStyle("borders");
+      return;
+    }
     turnButtonOff("toggleBorders");
     borders.selectAll("path").remove();
   }
 }
 
+// draw state and province borders
+function drawBorders() {
+  TIME && console.time("drawBorders");
+  borders.selectAll("path").remove();
+
+  const {cells, vertices} = pack;
+  const n = cells.i.length;
+
+  const sPath = [];
+  const pPath = [];
+
+  const sUsed = new Array(pack.states.length).fill("").map(_ => []);
+  const pUsed = new Array(pack.provinces.length).fill("").map(_ => []);
+
+  for (let i = 0; i < cells.i.length; i++) {
+    if (!cells.state[i]) continue;
+    const p = cells.province[i];
+    const s = cells.state[i];
+
+    // if cell is on province border
+    const provToCell = cells.c[i].find(
+      n => cells.state[n] === s && p > cells.province[n] && pUsed[p][n] !== cells.province[n]
+    );
+
+    if (provToCell) {
+      const provTo = cells.province[provToCell];
+      pUsed[p][provToCell] = provTo;
+      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.province[i] === provTo));
+      const chain = connectVertices(vertex, p, cells.province, provTo, pUsed);
+
+      if (chain.length > 1) {
+        pPath.push("M" + chain.map(c => vertices.p[c]).join(" "));
+        i--;
+        continue;
+      }
+    }
+
+    // if cell is on state border
+    const stateToCell = cells.c[i].find(n => cells.h[n] >= 20 && s > cells.state[n] && sUsed[s][n] !== cells.state[n]);
+    if (stateToCell !== undefined) {
+      const stateTo = cells.state[stateToCell];
+      sUsed[s][stateToCell] = stateTo;
+      const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.h[i] >= 20 && cells.state[i] === stateTo));
+      const chain = connectVertices(vertex, s, cells.state, stateTo, sUsed);
+
+      if (chain.length > 1) {
+        sPath.push("M" + chain.map(c => vertices.p[c]).join(" "));
+        i--;
+        continue;
+      }
+    }
+  }
+
+  stateBorders.append("path").attr("d", sPath.join(" "));
+  provinceBorders.append("path").attr("d", pPath.join(" "));
+
+  // connect vertices to chain
+  function connectVertices(current, f, array, t, used) {
+    let chain = [];
+    const checkCell = c => c >= n || array[c] !== f;
+    const checkVertex = v =>
+      vertices.c[v].some(c => array[c] === f) && vertices.c[v].some(c => array[c] === t && cells.h[c] >= 20);
+
+    // find starting vertex
+    for (let i = 0; i < 1000; i++) {
+      if (i === 999) ERROR && console.error("Find starting vertex: limit is reached", current, f, t);
+      const p = chain[chain.length - 2] || -1; // previous vertex
+      const v = vertices.v[current],
+        c = vertices.c[current];
+
+      const v0 = checkCell(c[0]) !== checkCell(c[1]) && checkVertex(v[0]);
+      const v1 = checkCell(c[1]) !== checkCell(c[2]) && checkVertex(v[1]);
+      const v2 = checkCell(c[0]) !== checkCell(c[2]) && checkVertex(v[2]);
+      if (v0 + v1 + v2 === 1) break;
+      current = v0 && p !== v[0] ? v[0] : v1 && p !== v[1] ? v[1] : v[2];
+
+      if (current === chain[0]) break;
+      if (current === p) return [];
+      chain.push(current);
+    }
+
+    chain = [current]; // vertices chain to form a path
+    // find path
+    for (let i = 0; i < 1000; i++) {
+      if (i === 999) ERROR && console.error("Find path: limit is reached", current, f, t);
+      const p = chain[chain.length - 2] || -1; // previous vertex
+      const v = vertices.v[current],
+        c = vertices.c[current];
+      c.filter(c => array[c] === t).forEach(c => (used[f][c] = t));
+
+      const v0 = checkCell(c[0]) !== checkCell(c[1]) && checkVertex(v[0]);
+      const v1 = checkCell(c[1]) !== checkCell(c[2]) && checkVertex(v[1]);
+      const v2 = checkCell(c[0]) !== checkCell(c[2]) && checkVertex(v[2]);
+      current = v0 && p !== v[0] ? v[0] : v1 && p !== v[1] ? v[1] : v[2];
+
+      if (current === p) break;
+      if (current === chain[chain.length - 1]) break;
+      if (chain.length > 1 && v0 + v1 + v2 < 2) break;
+      chain.push(current);
+      if (current === chain[0]) break;
+    }
+
+    return chain;
+  }
+
+  TIME && console.timeEnd("drawBorders");
+}
+
 function toggleProvinces(event) {
   if (!layerIsOn("toggleProvinces")) {
     turnButtonOn("toggleProvinces");
     drawProvinces();
     if (event && isCtrlClick(event)) editStyle("provs");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("provs");
+    if (event && isCtrlClick(event)) {
+      editStyle("provs");
+      return;
+    }
     provs.selectAll("*").remove();
     turnButtonOff("toggleProvinces");
   }
@@ -588,39 +1276,140 @@ function toggleProvinces(event) {
 
 function drawProvinces() {
   TIME && console.time("drawProvinces");
-  const {cells, provinces} = pack;
+  const labelsOn = provs.attr("data-labels") == 1;
+  provs.selectAll("*").remove();
 
-  const bodyPaths = new Array(provinces.length - 1);
-  const isolines = getIsolines(pack, cellId => cells.province[cellId], {fill: true, waterGap: true});
-  Object.entries(isolines).forEach(([index, {fill, waterGap}]) => {
-    const color = provinces[index].color;
-    bodyPaths.push(getGappedFillPaths("province", fill, waterGap, color, index));
-  });
+  const provinces = pack.provinces;
+  const {body, gap} = getProvincesVertices();
 
-  const labels = provinces
-    .filter(p => p.i && !p.removed)
-    .map(p => {
-      const [x, y] = p.pole || cells.p[p.center];
-      return /* html */ `<text x="${x}" y="${y}" id="provinceLabel${p.i}">${p.name}</text>`;
-    });
+  const g = provs.append("g").attr("id", "provincesBody");
+  const bodyData = body.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
+  g.selectAll("path")
+    .data(bodyData)
+    .enter()
+    .append("path")
+    .attr("d", d => d[0])
+    .attr("fill", d => d[2])
+    .attr("stroke", "none")
+    .attr("id", d => "province" + d[1]);
+  const gapData = gap.map((p, i) => [p.length > 10 ? p : null, i, provinces[i].color]).filter(d => d[0]);
+  g.selectAll(".path")
+    .data(gapData)
+    .enter()
+    .append("path")
+    .attr("d", d => d[0])
+    .attr("fill", "none")
+    .attr("stroke", d => d[2])
+    .attr("id", d => "province-gap" + d[1]);
 
-  byId("provs").innerHTML = /* html */ `
-    <g id='provincesBody'>${bodyPaths.join("")}</g>
-    <g id='provinceLabels'>${labels.join("")}</g>
-  `;
-  byId("provinceLabels").style.display = byId("provs").dataset.labels === "1" ? "block" : "none";
+  const labels = provs.append("g").attr("id", "provinceLabels");
+  labels.style("display", `${labelsOn ? "block" : "none"}`);
+  const labelData = provinces.filter(p => p.i && !p.removed && p.pole);
+  labels
+    .selectAll(".path")
+    .data(labelData)
+    .enter()
+    .append("text")
+    .attr("x", d => d.pole[0])
+    .attr("y", d => d.pole[1])
+    .attr("id", d => "provinceLabel" + d.i)
+    .text(d => d.name);
 
   TIME && console.timeEnd("drawProvinces");
 }
 
+function getProvincesVertices() {
+  const cells = pack.cells,
+    vertices = pack.vertices,
+    provinces = pack.provinces,
+    n = cells.i.length;
+  const used = new Uint8Array(cells.i.length);
+  const vArray = new Array(provinces.length); // store vertices array
+  const body = new Array(provinces.length).fill(""); // store path around each province
+  const gap = new Array(provinces.length).fill(""); // store path along water for each province to fill the gaps
+
+  for (const i of cells.i) {
+    if (!cells.province[i] || used[i]) continue;
+    const p = cells.province[i];
+    const onborder = cells.c[i].some(n => cells.province[n] !== p);
+    if (!onborder) continue;
+
+    const borderWith = cells.c[i].map(c => cells.province[c]).find(n => n !== p);
+    const vertex = cells.v[i].find(v => vertices.c[v].some(i => cells.province[i] === borderWith));
+    const chain = connectVertices(vertex, p, borderWith);
+    if (chain.length < 3) continue;
+    const points = chain.map(v => vertices.p[v[0]]);
+    if (!vArray[p]) vArray[p] = [];
+    vArray[p].push(points);
+    body[p] += "M" + points.join("L");
+    gap[p] +=
+      "M" +
+      vertices.p[chain[0][0]] +
+      chain.reduce(
+        (r, v, i, d) =>
+          !i ? r : !v[2] ? r + "L" + vertices.p[v[0]] : d[i + 1] && !d[i + 1][2] ? r + "M" + vertices.p[v[0]] : r,
+        ""
+      );
+  }
+
+  // find province visual center
+  vArray.forEach((ar, i) => {
+    const sorted = ar.sort((a, b) => b.length - a.length); // sort by points number
+    provinces[i].pole = polylabel(sorted, 1.0); // pole of inaccessibility
+  });
+
+  return {body, gap};
+
+  // connect vertices to chain
+  function connectVertices(start, t, province) {
+    const chain = []; // vertices chain to form a path
+    let land = vertices.c[start].some(c => cells.h[c] >= 20 && cells.province[c] !== t);
+    function check(i) {
+      province = cells.province[i];
+      land = cells.h[i] >= 20;
+    }
+
+    for (let i = 0, current = start; i === 0 || (current !== start && i < 20000); i++) {
+      const prev = chain[chain.length - 1] ? chain[chain.length - 1][0] : -1; // previous vertex in chain
+      chain.push([current, province, land]); // add current vertex to sequence
+      const c = vertices.c[current]; // cells adjacent to vertex
+      c.filter(c => cells.province[c] === t).forEach(c => (used[c] = 1));
+      const c0 = c[0] >= n || cells.province[c[0]] !== t;
+      const c1 = c[1] >= n || cells.province[c[1]] !== t;
+      const c2 = c[2] >= n || cells.province[c[2]] !== t;
+      const v = vertices.v[current]; // neighboring vertices
+      if (v[0] !== prev && c0 !== c1) {
+        current = v[0];
+        check(c0 ? c[0] : c[1]);
+      } else if (v[1] !== prev && c1 !== c2) {
+        current = v[1];
+        check(c1 ? c[1] : c[2]);
+      } else if (v[2] !== prev && c0 !== c2) {
+        current = v[2];
+        check(c2 ? c[2] : c[0]);
+      }
+      if (current === chain[chain.length - 1][0]) {
+        ERROR && console.error("Next vertex is not found");
+        break;
+      }
+    }
+    chain.push([start, province, land]); // add starting vertex to sequence to close the path
+    return chain;
+  }
+}
+
 function toggleGrid(event) {
   if (!gridOverlay.selectAll("*").size()) {
     turnButtonOn("toggleGrid");
     drawGrid();
     calculateFriendlyGridSize();
+
     if (event && isCtrlClick(event)) editStyle("gridOverlay");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("gridOverlay");
+    if (event && isCtrlClick(event)) {
+      editStyle("gridOverlay");
+      return;
+    }
     turnButtonOff("toggleGrid");
     gridOverlay.selectAll("*").remove();
   }
@@ -661,22 +1450,24 @@ function toggleCoordinates(event) {
     drawCoordinates();
     if (event && isCtrlClick(event)) editStyle("coordinates");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("coordinates");
+    if (event && isCtrlClick(event)) {
+      editStyle("coordinates");
+      return;
+    }
     turnButtonOff("toggleCoordinates");
     coordinates.selectAll("*").remove();
   }
 }
 
 function drawCoordinates() {
+  if (!layerIsOn("toggleCoordinates")) return;
   coordinates.selectAll("*").remove(); // remove every time
-
   const steps = [0.5, 1, 2, 5, 10, 15, 30]; // possible steps
   const goal = mapCoordinates.lonT / scale / 10;
   const step = steps.reduce((p, c) => (Math.abs(c - goal) < Math.abs(p - goal) ? c : p));
 
   const desired = +coordinates.attr("data-size"); // desired label size
   coordinates.attr("font-size", Math.max(rn(desired / scale ** 0.8, 2), 0.1)); // actual label size
-
   const graticule = d3
     .geoGraticule()
     .extent([
@@ -690,50 +1481,58 @@ function drawCoordinates() {
   const grid = coordinates.append("g").attr("id", "coordinateGrid");
   const labels = coordinates.append("g").attr("id", "coordinateLabels");
 
-  const point = new DOMPoint(scale + desired + 2, scale + desired / 2);
-  const p = point.matrixTransform(byId("viewbox").getScreenCTM().inverse());
-
+  const p = getViewPoint(scale + desired + 2, scale + desired / 2); // on border point on viexBox
   const data = graticule.lines().map(d => {
-    const isLatitude = d.coordinates[0][1] === d.coordinates[1][1];
-    const coordinate = d.coordinates[0];
-    const position = projection(coordinate); // map coordinates
-    const [x, y] = isLatitude ? [rn(p.x, 2), rn(position[1], 2)] : [rn(position[0], 2), rn(p.y, 2)]; // labels position
-    const value = isLatitude ? coordinate[1] : coordinate[0]; // label
-
-    let text = "";
-    if (!value) {
-      text = value;
-    } else if (Number.isInteger(value)) {
-      if (isLatitude) {
-        text = coordinate[1] < 0 ? -coordinate[1] + "°S" : coordinate[1] + "°N";
-      } else {
-        text = coordinate[0] < 0 ? -coordinate[0] + "°W" : coordinate[0] + "°E";
-      }
-    }
-
-    return {x, y, text};
+    const lat = d.coordinates[0][1] === d.coordinates[1][1]; // check if line is latitude or longitude
+    const c = d.coordinates[0],
+      pos = projection(c); // map coordinates
+    const [x, y] = lat ? [rn(p.x, 2), rn(pos[1], 2)] : [rn(pos[0], 2), rn(p.y, 2)]; // labels position
+    const v = lat ? c[1] : c[0]; // label
+    const text = !v
+      ? v
+      : Number.isInteger(v)
+      ? lat
+        ? c[1] < 0
+          ? -c[1] + "°S"
+          : c[1] + "°N"
+        : c[0] < 0
+        ? -c[0] + "°W"
+        : c[0] + "°E"
+      : "";
+    return {lat, x, y, text};
   });
 
-  const path = round(d3.geoPath(projection)(graticule()));
-  grid.append("path").attr("d", path).attr("vector-effect", "non-scaling-stroke");
+  const d = round(d3.geoPath(projection)(graticule()));
+  grid.append("path").attr("d", d).attr("vector-effect", "non-scaling-stroke");
   labels
     .selectAll("text")
     .data(data)
     .enter()
     .append("text")
-    .attr("text-rendering", "optimizeSpeed")
     .attr("x", d => d.x)
     .attr("y", d => d.y)
     .text(d => d.text);
 }
 
+// conver svg point into viewBox point
+function getViewPoint(x, y) {
+  const view = document.getElementById("viewbox");
+  const svg = document.getElementById("map");
+  const pt = svg.createSVGPoint();
+  (pt.x = x), (pt.y = y);
+  return pt.matrixTransform(view.getScreenCTM().inverse());
+}
+
 function toggleCompass(event) {
   if (!layerIsOn("toggleCompass")) {
     turnButtonOn("toggleCompass");
     $("#compass").fadeIn();
     if (event && isCtrlClick(event)) editStyle("compass");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("compass");
+    if (event && isCtrlClick(event)) {
+      editStyle("compass");
+      return;
+    }
     $("#compass").fadeOut();
     turnButtonOff("toggleCompass");
   }
@@ -742,11 +1541,14 @@ function toggleCompass(event) {
 function toggleRelief(event) {
   if (!layerIsOn("toggleRelief")) {
     turnButtonOn("toggleRelief");
-    if (!terrain.selectAll("*").size()) drawReliefIcons();
+    if (!terrain.selectAll("*").size()) ReliefIcons();
     $("#terrain").fadeIn();
     if (event && isCtrlClick(event)) editStyle("terrain");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("terrain");
+    if (event && isCtrlClick(event)) {
+      editStyle("terrain");
+      return;
+    }
     $("#terrain").fadeOut();
     turnButtonOff("toggleRelief");
   }
@@ -795,6 +1597,9 @@ function drawRivers() {
   TIME && console.time("drawRivers");
   rivers.selectAll("*").remove();
 
+  const {addMeandering, getRiverPath} = Rivers;
+  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+
   const riverPaths = pack.rivers.map(({cells, points, i, widthFactor, sourceWidth}) => {
     if (!cells || cells.length < 2) return;
 
@@ -805,8 +1610,8 @@ function drawRivers() {
       points = undefined;
     }
 
-    const meanderedPoints = Rivers.addMeandering(cells, points);
-    const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
+    const meanderedPoints = addMeandering(cells, points);
+    const path = getRiverPath(meanderedPoints, widthFactor, sourceWidth);
     return `<path id="river${i}" d="${path}"/>`;
   });
   rivers.html(riverPaths.join(""));
@@ -831,8 +1636,7 @@ function drawRoutes() {
   const routePaths = {};
 
   for (const route of pack.routes) {
-    const {i, group, points} = route;
-    if (!points || points.length < 2) continue;
+    const {i, group} = route;
     if (!routePaths[group]) routePaths[group] = [];
     routePaths[group].push(`<path id="route${i}" d="${Routes.getPath(route)}"/>`);
   }
@@ -845,14 +1649,17 @@ function drawRoutes() {
   TIME && console.timeEnd("drawRoutes");
 }
 
-function toggleMilitary(event) {
+function toggleMilitary() {
   if (!layerIsOn("toggleMilitary")) {
     turnButtonOn("toggleMilitary");
-    drawMilitary();
+    $("#armies").fadeIn();
     if (event && isCtrlClick(event)) editStyle("armies");
   } else {
-    if (event && isCtrlClick(event)) return editStyle("armies");
-    armies.selectAll("g").remove();
+    if (event && isCtrlClick(event)) {
+      editStyle("armies");
+      return;
+    }
+    $("#armies").fadeOut();
     turnButtonOff("toggleMilitary");
   }
 }
@@ -869,35 +1676,71 @@ function toggleMarkers(event) {
   }
 }
 
+function drawMarkers() {
+  const rescale = +markers.attr("rescale");
+  const pinned = +markers.attr("pinned");
+
+  const markersData = pinned ? pack.markers.filter(({pinned}) => pinned) : pack.markers;
+  const html = markersData.map(marker => drawMarker(marker, rescale));
+  markers.html(html.join(""));
+}
+
+const getPin = (shape = "bubble", fill = "#fff", stroke = "#000") => {
+  if (shape === "bubble")
+    return `<path d="M6,19 l9,10 L24,19" fill="${stroke}" stroke="none" /><circle cx="15" cy="15" r="10" fill="${fill}" stroke="${stroke}"/>`;
+  if (shape === "pin")
+    return `<path d="m 15,3 c -5.5,0 -9.7,4.09 -9.7,9.3 0,6.8 9.7,17 9.7,17 0,0 9.7,-10.2 9.7,-17 C 24.7,7.09 20.5,3 15,3 Z" fill="${fill}" stroke="${stroke}"/>`;
+  if (shape === "square")
+    return `<path d="m 20,25 -5,4 -5,-4 z" fill="${stroke}"/><path d="M 5,5 H 25 V 25 H 5 Z" fill="${fill}" stroke="${stroke}"/>`;
+  if (shape === "squarish")
+    return `<path d="m 5,5 h 20 v 20 h -6 l -4,4 -4,-4 H 5 Z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "diamond") return `<path d="M 2,15 15,1 28,15 15,29 Z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "hex") return `<path d="M 15,29 4.61,21 V 9 L 15,3 25.4,9 v 12 z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "hexy") return `<path d="M 15,29 6,21 5,8 15,4 25,8 24,21 Z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "shieldy")
+    return `<path d="M 15,29 6,21 5,7 c 0,0 5,-3 10,-3 5,0 10,3 10,3 l -1,14 z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "shield")
+    return `<path d="M 4.6,5.2 H 25 v 6.7 A 20.3,20.4 0 0 1 15,29 20.3,20.4 0 0 1 4.6,11.9 Z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "pentagon") return `<path d="M 4,16 9,4 h 12 l 5,12 -11,13 z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "heptagon")
+    return `<path d="M 15,29 6,22 4,12 10,4 h 10 l 6,8 -2,10 z" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "circle") return `<circle cx="15" cy="15" r="11" fill="${fill}" stroke="${stroke}" />`;
+  if (shape === "no") return "";
+};
+
+function drawMarker(marker, rescale = 1) {
+  const {i, icon, x, y, dx = 50, dy = 50, px = 12, size = 30, pin, fill, stroke} = marker;
+  const id = `marker${i}`;
+  const zoomSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : size;
+  const viewX = rn(x - zoomSize / 2, 1);
+  const viewY = rn(y - zoomSize, 1);
+  const pinHTML = getPin(pin, fill, stroke);
+
+  return `<svg id="${id}" viewbox="0 0 30 30" width="${zoomSize}" height="${zoomSize}" x="${viewX}" y="${viewY}"><g>${pinHTML}</g><text x="${dx}%" y="${dy}%" font-size="${px}px" >${icon}</text></svg>`;
+}
+
 function toggleLabels(event) {
   if (!layerIsOn("toggleLabels")) {
     turnButtonOn("toggleLabels");
-    $("#labels").fadeIn();
-    // don't redraw labels as they are not stored in data yet
-    if (labels.selectAll("text").size() === 0) drawLabels();
+    labels.style("display", null);
+    invokeActiveZooming();
     if (event && isCtrlClick(event)) editStyle("labels");
   } else {
     if (event && isCtrlClick(event)) return editStyle("labels");
     turnButtonOff("toggleLabels");
-    $("#labels").fadeOut();
+    labels.style("display", "none");
   }
 }
 
-function drawLabels() {
-  drawStateLabels();
-  drawBurgLabels();
-  invokeActiveZooming();
-}
-
-function toggleBurgIcons(event) {
-  if (!layerIsOn("toggleBurgIcons")) {
-    turnButtonOn("toggleBurgIcons");
-    drawBurgIcons();
+function toggleIcons(event) {
+  if (!layerIsOn("toggleIcons")) {
+    turnButtonOn("toggleIcons");
+    $("#icons").fadeIn();
     if (event && isCtrlClick(event)) editStyle("burgIcons");
   } else {
     if (event && isCtrlClick(event)) return editStyle("burgIcons");
-    turnButtonOff("toggleBurgIcons");
-    icons.selectAll("circle, use").remove();
+    turnButtonOff("toggleIcons");
+    $("#icons").fadeOut();
   }
 }
 
@@ -927,30 +1770,117 @@ function toggleScaleBar(event) {
   }
 }
 
-function toggleZones(event) {
-  if (!layerIsOn("toggleZones")) {
-    turnButtonOn("toggleZones");
-    drawZones();
-    if (event && isCtrlClick(event)) editStyle("zones");
-  } else {
-    if (event && isCtrlClick(event)) return editStyle("zones");
-    turnButtonOff("toggleZones");
-    zones.selectAll("*").remove();
+function drawScaleBar(scaleBar, scaleLevel) {
+  if (!scaleBar.size() || scaleBar.style("display") === "none") return;
+
+  const unit = distanceUnitInput.value;
+  const size = +scaleBar.attr("data-bar-size");
+
+  const length = (function () {
+    const init = 100;
+    let val = (init * size * distanceScale) / scaleLevel; // bar length in distance unit
+    if (val > 900) val = rn(val, -3); // round to 1000
+    else if (val > 90) val = rn(val, -2); // round to 100
+    else if (val > 9) val = rn(val, -1); // round to 10
+    else val = rn(val); // round to 1
+    const length = (val * scaleLevel) / distanceScale; // actual length in pixels on this scale
+    return length;
+  })();
+
+  scaleBar.select("#scaleBarContent").remove(); // redraw content every time
+  const content = scaleBar.append("g").attr("id", "scaleBarContent");
+
+  const lines = content.append("g");
+  lines
+    .append("line")
+    .attr("x1", 0.5)
+    .attr("y1", 0)
+    .attr("x2", length + size - 0.5)
+    .attr("y2", 0)
+    .attr("stroke-width", size)
+    .attr("stroke", "white");
+  lines
+    .append("line")
+    .attr("x1", 0)
+    .attr("y1", size)
+    .attr("x2", length + size)
+    .attr("y2", size)
+    .attr("stroke-width", size)
+    .attr("stroke", "#3d3d3d");
+  lines
+    .append("line")
+    .attr("x1", 0)
+    .attr("y1", 0)
+    .attr("x2", length + size)
+    .attr("y2", 0)
+    .attr("stroke-width", rn(size * 3, 2))
+    .attr("stroke-dasharray", size + " " + rn(length / 5 - size, 2))
+    .attr("stroke", "#3d3d3d");
+
+  const texts = content.append("g").attr("text-anchor", "middle").attr("font-family", "var(--serif)");
+  texts
+    .selectAll("text")
+    .data(d3.range(0, 6))
+    .enter()
+    .append("text")
+    .attr("x", d => rn((d * length) / 5, 2))
+    .attr("y", 0)
+    .attr("dy", "-.6em")
+    .text(d => rn((((d * length) / 5) * distanceScale) / scaleLevel) + (d < 5 ? "" : " " + unit));
+
+  const label = scaleBar.attr("data-label");
+  if (label) {
+    texts
+      .append("text")
+      .attr("x", (length + 1) / 2)
+      .attr("dy", ".6em")
+      .attr("dominant-baseline", "text-before-edge")
+      .text(label);
+  }
+
+  const scaleBarBack = scaleBar.select("#scaleBarBack");
+  if (scaleBarBack.size()) {
+    const bbox = content.node().getBBox();
+    const paddingTop = +scaleBarBack.attr("data-top") || 0;
+    const paddingLeft = +scaleBarBack.attr("data-left") || 0;
+    const paddingRight = +scaleBarBack.attr("data-right") || 0;
+    const paddingBottom = +scaleBarBack.attr("data-bottom") || 0;
+
+    scaleBar
+      .select("#scaleBarBack")
+      .attr("x", -paddingLeft)
+      .attr("y", -paddingTop)
+      .attr("width", bbox.width + paddingRight)
+      .attr("height", bbox.height + paddingBottom);
   }
 }
 
-function drawZones() {
-  const filterBy = byId("zonesFilterType").value;
-  const isFiltered = filterBy && filterBy !== "all";
-  const visibleZones = pack.zones.filter(
-    ({hidden, cells, type}) => !hidden && cells.length && (!isFiltered || type === filterBy)
-  );
-  zones.html(visibleZones.map(drawZone).join(""));
+// fit ScaleBar to screen size
+function fitScaleBar(scaleBar, fullWidth, fullHeight) {
+  if (!scaleBar.select("rect").size() || scaleBar.style("display") === "none") return;
+
+  const posX = +scaleBar.attr("data-x") || 99;
+  const posY = +scaleBar.attr("data-y") || 99;
+  const bbox = scaleBar.select("rect").node().getBBox();
+
+  const x = rn((fullWidth * posX) / 100 - bbox.width + 10);
+  const y = rn((fullHeight * posY) / 100 - bbox.height + 20);
+  scaleBar.attr("transform", `translate(${x},${y})`);
 }
 
-function drawZone({i, cells, type, color}) {
-  const path = getVertexPath(cells);
-  return `<path id="zone${i}" data-id="${i}" data-type="${type}" d="${path}" fill="${color}" />`;
+function toggleZones(event) {
+  if (!layerIsOn("toggleZones")) {
+    turnButtonOn("toggleZones");
+    $("#zones").fadeIn();
+    if (event && isCtrlClick(event)) editStyle("zones");
+  } else {
+    if (event && isCtrlClick(event)) {
+      editStyle("zones");
+      return;
+    }
+    turnButtonOff("toggleZones");
+    $("#zones").fadeOut();
+  }
 }
 
 function toggleEmblems(event) {
@@ -958,7 +1888,6 @@ function toggleEmblems(event) {
     turnButtonOn("toggleEmblems");
     if (!emblems.selectAll("use").size()) drawEmblems();
     $("#emblems").fadeIn();
-    invokeActiveZooming();
     if (event && isCtrlClick(event)) editStyle("emblems");
   } else {
     if (event && isCtrlClick(event)) return editStyle("emblems");
@@ -967,6 +1896,117 @@ function toggleEmblems(event) {
   }
 }
 
+function drawEmblems() {
+  TIME && console.time("drawEmblems");
+  const {states, provinces, burgs} = pack;
+
+  const validStates = states.filter(s => s.i && !s.removed && s.coa && s.coa.size !== 0);
+  const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && p.coa.size !== 0);
+  const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && b.coa.size !== 0);
+
+  const getStateEmblemsSize = () => {
+    const startSize = minmax((graphHeight + graphWidth) / 40, 10, 100);
+    const statesMod = 1 + validStates.length / 100 - (15 - validStates.length) / 200; // states number modifier
+    const sizeMod = +document.getElementById("emblemsStateSizeInput").value || 1;
+    return rn((startSize / statesMod) * sizeMod); // target size ~50px on 1536x754 map with 15 states
+  };
+
+  const getProvinceEmblemsSize = () => {
+    const startSize = minmax((graphHeight + graphWidth) / 100, 5, 70);
+    const provincesMod = 1 + validProvinces.length / 1000 - (115 - validProvinces.length) / 1000; // states number modifier
+    const sizeMod = +document.getElementById("emblemsProvinceSizeInput").value || 1;
+    return rn((startSize / provincesMod) * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
+  };
+
+  const getBurgEmblemSize = () => {
+    const startSize = minmax((graphHeight + graphWidth) / 185, 2, 50);
+    const burgsMod = 1 + validBurgs.length / 1000 - (450 - validBurgs.length) / 1000; // states number modifier
+    const sizeMod = +document.getElementById("emblemsBurgSizeInput").value || 1;
+    return rn((startSize / burgsMod) * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
+  };
+
+  const sizeBurgs = getBurgEmblemSize();
+  const burgCOAs = validBurgs.map(burg => {
+    const {x, y} = burg;
+    const size = burg.coa.size || 1;
+    const shift = (sizeBurgs * size) / 2;
+    return {type: "burg", i: burg.i, x: burg.coa.x || x, y: burg.coa.y || y, size, shift};
+  });
+
+  const sizeProvinces = getProvinceEmblemsSize();
+  const provinceCOAs = validProvinces.map(province => {
+    if (!province.pole) getProvincesVertices();
+    const [x, y] = province.pole || pack.cells.p[province.center];
+    const size = province.coa.size || 1;
+    const shift = (sizeProvinces * size) / 2;
+    return {type: "province", i: province.i, x: province.coa.x || x, y: province.coa.y || y, size, shift};
+  });
+
+  const sizeStates = getStateEmblemsSize();
+  const stateCOAs = validStates.map(state => {
+    const [x, y] = state.pole || pack.cells.p[state.center];
+    const size = state.coa.size || 1;
+    const shift = (sizeStates * size) / 2;
+    return {type: "state", i: state.i, x: state.coa.x || x, y: state.coa.y || y, size, shift};
+  });
+
+  const nodes = burgCOAs.concat(provinceCOAs).concat(stateCOAs);
+  const simulation = d3
+    .forceSimulation(nodes)
+    .alphaMin(0.6)
+    .alphaDecay(0.2)
+    .velocityDecay(0.6)
+    .force(
+      "collision",
+      d3.forceCollide().radius(d => d.shift)
+    )
+    .stop();
+
+  d3.timeout(function () {
+    const n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay()));
+    for (let i = 0; i < n; ++i) {
+      simulation.tick();
+    }
+
+    const burgNodes = nodes.filter(node => node.type === "burg");
+    const burgString = burgNodes
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
+      .join("");
+    emblems.select("#burgEmblems").attr("font-size", sizeBurgs).html(burgString);
+
+    const provinceNodes = nodes.filter(node => node.type === "province");
+    const provinceString = provinceNodes
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
+      .join("");
+    emblems.select("#provinceEmblems").attr("font-size", sizeProvinces).html(provinceString);
+
+    const stateNodes = nodes.filter(node => node.type === "state");
+    const stateString = stateNodes
+      .map(
+        d =>
+          `<use data-i="${d.i}" x="${rn(d.x - d.shift)}" y="${rn(d.y - d.shift)}" width="${d.size}em" height="${
+            d.size
+          }em"/>`
+      )
+      .join("");
+    emblems.select("#stateEmblems").attr("font-size", sizeStates).html(stateString);
+
+    invokeActiveZooming();
+  });
+
+  TIME && console.timeEnd("drawEmblems");
+}
+
 function toggleVignette(event) {
   if (!layerIsOn("toggleVignette")) {
     turnButtonOn("toggleVignette");
@@ -979,25 +2019,18 @@ function toggleVignette(event) {
   }
 }
 
-function getGappedFillPaths(elementName, fill, waterGap, color, index) {
-  let html = "";
-  if (fill) html += /* html */ `<path d="${fill}" fill="${color}" id="${elementName}${index}" />`;
-  if (waterGap)
-    html += /* html */ `<path d="${waterGap}" fill="none" stroke="${color}" stroke-width="3" id="${elementName}-gap${index}" />`;
-  return html;
-}
-
 function layerIsOn(el) {
-  return byId(el).classList.contains("buttonoff") ? false : true;
+  const buttonoff = document.getElementById(el).classList.contains("buttonoff");
+  return !buttonoff;
 }
 
 function turnButtonOff(el) {
-  byId(el).classList.add("buttonoff");
+  document.getElementById(el).classList.add("buttonoff");
   getCurrentPreset();
 }
 
 function turnButtonOn(el) {
-  byId(el).classList.remove("buttonoff");
+  document.getElementById(el).classList.remove("buttonoff");
   getCurrentPreset();
 }
 
@@ -1028,14 +2061,14 @@ function getLayer(id) {
   if (id === "toggleProvinces") return $("#provs");
   if (id === "toggleBorders") return $("#borders");
   if (id === "toggleRoutes") return $("#routes");
-  if (id === "toggleTemperature") return $("#temperature");
-  if (id === "togglePrecipitation") return $("#prec");
+  if (id === "toggleTemp") return $("#temperature");
+  if (id === "togglePrec") return $("#prec");
   if (id === "togglePopulation") return $("#population");
   if (id === "toggleIce") return $("#ice");
   if (id === "toggleTexture") return $("#texture");
   if (id === "toggleEmblems") return $("#emblems");
   if (id === "toggleLabels") return $("#labels");
-  if (id === "toggleBurgIcons") return $("#icons");
+  if (id === "toggleIcons") return $("#icons");
   if (id === "toggleMarkers") return $("#markers");
   if (id === "toggleRulers") return $("#ruler");
 }
diff --git a/modules/ui/markers-editor.js b/modules/ui/markers-editor.js
index 9f56db9a..26f035fa 100644
--- a/modules/ui/markers-editor.js
+++ b/modules/ui/markers-editor.js
@@ -8,24 +8,25 @@ function editMarker(markerI) {
 
   elSelected = d3.select(element).raise().call(d3.drag().on("start", dragMarker)).classed("draggable", true);
 
-  if (byId("notesEditor").offsetParent) editNotes(element.id, element.id);
+  if (document.getElementById("notesEditor").offsetParent) editNotes(element.id, element.id);
 
   // dom elements
-  const markerType = byId("markerType");
-  const markerIconSelect = byId("markerIconSelect");
-  const markerIconSize = byId("markerIconSize");
-  const markerIconShiftX = byId("markerIconShiftX");
-  const markerIconShiftY = byId("markerIconShiftY");
-  const markerSize = byId("markerSize");
-  const markerPin = byId("markerPin");
-  const markerFill = byId("markerFill");
-  const markerStroke = byId("markerStroke");
+  const markerType = document.getElementById("markerType");
+  const markerIcon = document.getElementById("markerIcon");
+  const markerIconSelect = document.getElementById("markerIconSelect");
+  const markerIconSize = document.getElementById("markerIconSize");
+  const markerIconShiftX = document.getElementById("markerIconShiftX");
+  const markerIconShiftY = document.getElementById("markerIconShiftY");
+  const markerSize = document.getElementById("markerSize");
+  const markerPin = document.getElementById("markerPin");
+  const markerFill = document.getElementById("markerFill");
+  const markerStroke = document.getElementById("markerStroke");
 
-  const markerNotes = byId("markerNotes");
-  const markerLock = byId("markerLock");
-  const addMarker = byId("addMarker");
-  const markerAdd = byId("markerAdd");
-  const markerRemove = byId("markerRemove");
+  const markerNotes = document.getElementById("markerNotes");
+  const markerLock = document.getElementById("markerLock");
+  const addMarker = document.getElementById("addMarker");
+  const markerAdd = document.getElementById("markerAdd");
+  const markerRemove = document.getElementById("markerRemove");
 
   updateInputs();
 
@@ -38,7 +39,8 @@ function editMarker(markerI) {
 
   const listeners = [
     listen(markerType, "change", changeMarkerType),
-    listen(markerIconSelect, "click", changeMarkerIcon),
+    listen(markerIcon, "input", changeMarkerIcon),
+    listen(markerIconSelect, "click", selectMarkerIcon),
     listen(markerIconSize, "input", changeIconSize),
     listen(markerIconShiftX, "input", changeIconShiftX),
     listen(markerIconShiftY, "input", changeIconShiftY),
@@ -59,7 +61,7 @@ function editMarker(markerI) {
       return [element, marker];
     }
 
-    const element = byId(`marker${markerI}`);
+    const element = document.getElementById(`marker${markerI}`);
     const marker = pack.markers.find(({i}) => i === markerI);
     return [element, marker];
   }
@@ -95,20 +97,19 @@ function editMarker(markerI) {
   }
 
   function updateInputs() {
-    byId("markerIcon").innerHTML = marker.icon.startsWith("http") || marker.icon.startsWith("data:image")
-      ? `<img src="${marker.icon}" style="width: 1em; height: 1em;">`
-      : marker.icon;
+    const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000000", fill = "#ffffff", pin = "bubble", lock} = marker;
 
-    markerType.value = marker.type || "";
-    markerIconSize.value = marker.px || 12;
-    markerIconShiftX.value = marker.dx || 50;
-    markerIconShiftY.value = marker.dy || 50;
-    markerSize.value = marker.size || 30;
-    markerPin.value = marker.pin || "bubble";
-    markerFill.value = marker.fill || "#ffffff";
-    markerStroke.value = marker.stroke || "#000000";
+    markerType.value = type;
+    markerIcon.value = icon;
+    markerIconSize.value = px;
+    markerIconShiftX.value = dx;
+    markerIconShiftY.value = dy;
+    markerSize.value = size;
+    markerPin.value = pin;
+    markerFill.value = fill;
+    markerStroke.value = stroke;
 
-    markerLock.className = marker.lock ? "icon-lock" : "icon-lock-open";
+    markerLock.className = lock ? "icon-lock" : "icon-lock-open";
   }
 
   function changeMarkerType() {
@@ -116,12 +117,18 @@ function editMarker(markerI) {
   }
 
   function changeMarkerIcon() {
-    selectIcon(marker.icon, value => {
-      const isExternal = value.startsWith("http") || value.startsWith("data:image");
-      byId("markerIcon").innerHTML = isExternal ? `<img src="${value}" style="width: 1em; height: 1em;">` : value;
+    const icon = this.value;
+    getSameTypeMarkers().forEach(marker => {
+      marker.icon = icon;
+      redrawIcon(marker);
+    });
+  }
 
+  function selectMarkerIcon() {
+    selectIcon(marker.icon, icon => {
+      markerIcon.value = icon;
       getSameTypeMarkers().forEach(marker => {
-        marker.icon = value;
+        marker.icon = icon;
         redrawIcon(marker);
       });
     });
@@ -158,7 +165,7 @@ function editMarker(markerI) {
     getSameTypeMarkers().forEach(marker => {
       marker.size = size;
       const {i, x, y, hidden} = marker;
-      const el = !hidden && byId(`marker${i}`);
+      const el = !hidden && document.getElementById(`marker${i}`);
       if (!el) return;
 
       const zoomedSize = rescale ? Math.max(rn(size / 5 + 24 / scale, 2), 1) : size;
@@ -194,23 +201,12 @@ function editMarker(markerI) {
   }
 
   function redrawIcon({i, hidden, icon, dx = 50, dy = 50, px = 12}) {
-    const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
-
-    const iconText = !hidden && document.querySelector(`#marker${i} > text`);
-    if (iconText) {
-      iconText.innerHTML = isExternal ? "" : icon;
-      iconText.setAttribute("x", dx + "%");
-      iconText.setAttribute("y", dy + "%");
-      iconText.setAttribute("font-size", px + "px");
-    }
-
-    const iconImage = !hidden && document.querySelector(`#marker${i} > image`);
-    if (iconImage) {
-      iconImage.setAttribute("x", dx / 2 + "%");
-      iconImage.setAttribute("y", dy / 2 + "%");
-      iconImage.setAttribute("width", px + "px");
-      iconImage.setAttribute("height", px + "px");
-      iconImage.setAttribute("href", isExternal ? icon : "");
+    const iconElement = !hidden && document.querySelector(`#marker${i} > text`);
+    if (iconElement) {
+      iconElement.innerHTML = icon;
+      iconElement.setAttribute("x", dx + "%");
+      iconElement.setAttribute("y", dy + "%");
+      iconElement.setAttribute("font-size", px + "px");
     }
   }
 
@@ -245,10 +241,10 @@ function editMarker(markerI) {
   }
 
   function deleteMarker() {
-    Markers.deleteMarker(marker.i);
+    Markers.deleteMarker(marker.i)
     element.remove();
     $("#markerEditor").dialog("close");
-    if (byId("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
+    if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
   }
 
   function closeMarkerEditor() {
diff --git a/modules/ui/markers-overview.js b/modules/ui/markers-overview.js
index 02999eb0..af0cc11f 100644
--- a/modules/ui/markers-overview.js
+++ b/modules/ui/markers-overview.js
@@ -69,24 +69,18 @@ function overviewMarkers() {
   function addLines() {
     const lines = pack.markers
       .map(({i, type, icon, pinned, lock}) => {
-        return /* html */ `
-          <div class="states" data-i=${i} data-type="${type}">
-            ${
-              icon.startsWith("http") || icon.startsWith("data:image")
-                ? `<img src="${icon}" data-tip="Marker icon" style="width:1.2em; height:1.2em; vertical-align: middle;">`
-                : `<span data-tip="Marker icon" style="width:1.2em">${icon}</span>`
-            }
-            <div data-tip="Marker type" style="width:10em">${type}</div>
-            <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
-            <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
-            <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
-              pinned ? "" : "inactive"
-            }" pointer"></span>
-            <span style="padding-right:.1em" class="locks pointer ${
-              lock ? "icon-lock" : "icon-lock-open inactive"
-            }" onmouseover="showElementLockTip(event)"></span>
-            <span data-tip="Remove marker" class="icon-trash-empty"></span>
-          </div>`;
+        return `<div class="states" data-i=${i} data-type="${type}">
+        <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
+        <span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
+        <span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
+        <span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
+          pinned ? "" : "inactive"
+        }" pointer"></span>
+        <span style="padding-right:.1em" class="locks pointer ${
+          lock ? "icon-lock" : "icon-lock-open inactive"
+        }" onmouseover="showElementLockTip(event)"></span>
+        <span data-tip="Remove marker" class="icon-trash-empty"></span>
+      </div>`;
       })
       .join("");
 
@@ -214,15 +208,15 @@ function overviewMarkers() {
 
     const body = pack.markers.map(marker => {
       const {i, type, icon, x, y} = marker;
-
-      const note = notes.find(note => note.id === "marker" + i);
+      const id = `marker${i}`;
+      const note = notes.find(note => note.id === id);
       const name = note ? quote(note.name) : "Unknown";
       const legend = note ? quote(note.legend) : "";
 
       const lat = getLatitude(y, 2);
       const lon = getLongitude(x, 2);
 
-      return [i, type, icon, name, legend, x, y, lat, lon].join(",");
+      return [id, type, icon, name, legend, x, y, lat, lon].join(",");
     });
 
     const data = headers + body.join("\n");
diff --git a/modules/ui/measurers.js b/modules/ui/measurers.js
index fbd90603..1f51cd7d 100644
--- a/modules/ui/measurers.js
+++ b/modules/ui/measurers.js
@@ -530,32 +530,3 @@ class Planimeter extends Measurer {
     this.el.select("text").attr("x", c[0]).attr("y", c[1]).text(area);
   }
 }
-
-function createDefaultRuler() {
-  TIME && console.time("createDefaultRuler");
-  const {features, vertices} = pack;
-
-  const areas = features.map(f => (f.land ? f.area || 0 : -Infinity));
-  const largestLand = areas.indexOf(Math.max(...areas));
-  const featureVertices = features[largestLand].vertices;
-
-  const MIN_X = 100;
-  const MAX_X = graphWidth - 100;
-  const MIN_Y = 100;
-  const MAX_Y = graphHeight - 100;
-
-  let leftmostVertex = [graphWidth - MIN_X, graphHeight / 2];
-  let rightmostVertex = [MIN_X, graphHeight / 2];
-
-  for (const vertex of featureVertices) {
-    const [x, y] = vertices.p[vertex];
-    if (y < MIN_Y || y > MAX_Y) continue;
-    if (x < leftmostVertex[0] && x >= MIN_X) leftmostVertex = [x, y];
-    if (x > rightmostVertex[0] && x <= MAX_X) rightmostVertex = [x, y];
-  }
-
-  rulers = new Rulers();
-  rulers.create(Ruler, [leftmostVertex, rightmostVertex]);
-
-  TIME && console.timeEnd("createDefaultRuler");
-}
diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js
index 1a916f7a..2382cb27 100644
--- a/modules/ui/military-overview.js
+++ b/modules/ui/military-overview.js
@@ -284,14 +284,7 @@ function overviewMilitary() {
       if (el.tagName !== "BUTTON") return;
       const type = el.dataset.type;
 
-      if (type === "icon") {
-        return selectIcon(el.textContent, function (value) {
-          el.innerHTML = value.startsWith("http") || value.startsWith("data:image")
-            ? `<img src="${value}" style="width:1.2em;height:1.2em;pointer-events:none;">`
-            : value;
-        });
-      }
-
+      if (type === "icon") return selectIcon(el.textContent, v => (el.textContent = v));
       if (type === "biomes") {
         const {i, name, color} = biomesData;
         const biomesArray = Array(i.length).fill(null);
@@ -336,15 +329,9 @@ function overviewMilitary() {
           ${getLimitText(unit[attr])}
         </button>`;
 
-      row.innerHTML = /* html */ `<td>
-          <button data-type="icon" data-tip="Click to select unit icon">
-            ${
-              icon.startsWith("http") || icon.startsWith("data:image")
-                ? `<img src="${icon}" style="width:1.2em;height:1.2em;pointer-events:none;">`
-                : icon || ""
-            }
-          </button>
-        </td>
+      row.innerHTML = /* html */ `<td><button data-type="icon" data-tip="Click to select unit icon">${
+        icon || " "
+      }</button></td>
         <td><input data-tip="Type unit name. If name is changed for existing unit, old unit will be replaced" value="${name}" /></td>
         <td>${getLimitButton("biomes")}</td>
         <td>${getLimitButton("states")}</td>
@@ -437,11 +424,7 @@ function overviewMilitary() {
         const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] =
           elements.map(el => {
             const {type, value} = el.dataset || {};
-            if (type === "icon") {
-              const value = el.innerHTML.trim();
-              const isImage = value.startsWith("<img");
-              return isImage ? value.match(/src="([^"]*)"/)[1] : value || "⠀";
-            }
+            if (type === "icon") return el.textContent || "⠀";
             if (type) return value ? value.split(",").map(v => parseInt(v)) : null;
             if (el.type === "number") return +el.value || 0;
             if (el.type === "checkbox") return +el.checked || 0;
diff --git a/modules/ui/namesbase-editor.js b/modules/ui/namesbase-editor.js
index ae3fc730..edf472eb 100644
--- a/modules/ui/namesbase-editor.js
+++ b/modules/ui/namesbase-editor.js
@@ -41,7 +41,7 @@ function editNamesbase() {
 
   $("#namesbaseEditor").dialog({
     title: "Namesbase Editor",
-    width: "60vw",
+    width: "auto",
     position: {my: "center", at: "center", of: "svg"}
   });
 
@@ -66,7 +66,7 @@ function editNamesbase() {
   function updateExamples() {
     const base = +document.getElementById("namesbaseSelect").value;
     let examples = "";
-    for (let i = 0; i < 7; i++) {
+    for (let i = 0; i < 10; i++) {
       const example = Names.getBase(base);
       if (example === undefined) {
         examples = "Cannot generate examples. Please verify the data";
@@ -250,7 +250,7 @@ function editNamesbase() {
       const [rawName, min, max, d, m, rawNames] = base.split("|");
       const name = rawName.replace(unsafe, "");
       const names = rawNames.replace(unsafe, "");
-      nameBases.push({name, min: +min, max: +max, d, m: +m, b: names});
+      nameBases.push({name, min, max, d, m, b: names});
     });
 
     createBasesList();
diff --git a/modules/ui/notes-editor.js b/modules/ui/notes-editor.js
index 10f87e16..becf4fa0 100644
--- a/modules/ui/notes-editor.js
+++ b/modules/ui/notes-editor.js
@@ -40,8 +40,8 @@ function editNotes(id, name) {
 
   $("#notesEditor").dialog({
     title: "Notes Editor",
-    width: svgWidth * 0.8,
-    height: svgHeight * 0.75,
+    width: window.innerWidth * 0.8,
+    height: window.innerHeight * 0.75,
     position: {my: "center", at: "center", of: "svg"},
     close: removeEditor
   });
@@ -55,7 +55,6 @@ function editNotes(id, name) {
   byId("notesLegend").addEventListener("blur", updateLegend);
   byId("notesPin").addEventListener("click", toggleNotesPin);
   byId("notesFocus").addEventListener("click", validateHighlightElement);
-  byId("notesGenerateWithAi").addEventListener("click", openAiGenerator);
   byId("notesDownload").addEventListener("click", downloadLegends);
   byId("notesUpload").addEventListener("click", () => legendsToLoad.click());
   byId("legendsToLoad").addEventListener("change", function () {
@@ -144,25 +143,6 @@ function editNotes(id, name) {
     });
   }
 
-  function openAiGenerator() {
-    const note = notes.find(note => note.id === notesSelect.value);
-
-    let prompt = `Respond with description. Use simple dry language. Invent facts, names and details. Split to paragraphs and format to HTML. Remove h tags, remove markdown.`;
-    if (note?.name) prompt += ` Name: ${note.name}.`;
-    if (note?.legend) prompt += ` Data: ${note.legend}`;
-
-    const onApply = result => {
-      notesLegend.innerHTML = result;
-      if (note) {
-        note.legend = result;
-        updateNotesBox(note);
-        if (window.tinymce) tinymce.activeEditor.setContent(note.legend);
-      }
-    };
-
-    generateWithAi(prompt, onApply);
-  }
-
   function downloadLegends() {
     const notesData = JSON.stringify(notes);
     const name = getFileName("Notes") + ".txt";
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 537a6a4e..a35c5815 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -66,18 +66,12 @@ document
       .querySelectorAll(".tabcontent")
       .forEach(e => (e.style.display = "none"));
 
-    if (id === "layersTab") {
-      layersContent.style.display = "block";
-    } else if (id === "styleTab") {
-      styleContent.style.display = "block";
-      selectStyleElement();
-    } else if (id === "optionsTab") {
-      optionsContent.style.display = "block";
-    } else if (id === "toolsTab") {
+    if (id === "layersTab") layersContent.style.display = "block";
+    else if (id === "styleTab") styleContent.style.display = "block";
+    else if (id === "optionsTab") optionsContent.style.display = "block";
+    else if (id === "toolsTab")
       customization === 1 ? (customizationMenu.style.display = "block") : (toolsContent.style.display = "block");
-    } else if (id === "aboutTab") {
-      aboutContent.style.display = "block";
-    }
+    else if (id === "aboutTab") aboutContent.style.display = "block";
   });
 
 // show popup with a list of Patreon supportes (updated manually)
@@ -131,9 +125,9 @@ optionsContent.addEventListener("input", event => {
   if (id === "mapWidthInput" || id === "mapHeightInput") mapSizeInputChange();
   else if (id === "pointsInput") changeCellsDensity(+value);
   else if (id === "culturesSet") changeCultureSet();
-  else if (id === "statesNumber") changeStatesNumber(value);
+  else if (id === "regionsInput" || id === "regionsOutput") changeStatesNumber(value);
   else if (id === "emblemShape") changeEmblemShape(value);
-  else if (id === "tooltipSize") changeTooltipSize(value);
+  else if (id === "tooltipSizeInput" || id === "tooltipSizeOutput") changeTooltipSize(value);
   else if (id === "themeHueInput") changeThemeHue(value);
   else if (id === "themeColorInput") changeDialogsTheme(themeColorInput.value, transparencyInput.value);
   else if (id === "transparencyInput") changeDialogsTheme(themeColorInput.value, value);
@@ -143,12 +137,11 @@ optionsContent.addEventListener("change", event => {
   const {id, value} = event.target;
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed("seed change");
-  else if (id === "uiSize") changeUiSize(+value);
+  else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUiSize(value);
   else if (id === "shapeRendering") setRendering(value);
   else if (id === "yearInput") changeYear();
   else if (id === "eraInput") changeEra();
   else if (id === "stateLabelsModeInput") options.stateLabelsMode = value;
-  else if (id === "azgaarAssistant") toggleAssistant();
 });
 
 optionsContent.addEventListener("click", event => {
@@ -210,16 +203,16 @@ function fitMapToScreen() {
   svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
   svg.attr("width", svgWidth).attr("height", svgHeight);
 
+  const zoomExtent = [
+    [0, 0],
+    [graphWidth, graphHeight]
+  ];
+
   const zoomMin = rn(Math.max(svgWidth / graphWidth, svgHeight / graphHeight), 3);
   zoomExtentMin.value = zoomMin;
   const zoomMax = +zoomExtentMax.value;
 
-  zoom
-    .translateExtent([
-      [0, 0],
-      [graphWidth, graphHeight]
-    ])
-    .scaleExtent([zoomMin, zoomMax]);
+  zoom.translateExtent(zoomExtent).scaleExtent([zoomMin, zoomMax]).scaleTo(svg, zoomMin);
 
   fitScaleBar(scaleBar, svgWidth, svgHeight);
   if (window.fitLegendBox) fitLegendBox();
@@ -251,7 +244,8 @@ const voiceInterval = setInterval(function () {
     select.options.add(new Option(voice.name, i, false));
   });
   if (stored("speakerVoice")) select.value = stored("speakerVoice");
-  else select.value = voices.findIndex(voice => voice.lang === "en-US");
+  // se voice to store
+  else select.value = voices.findIndex(voice => voice.lang === "en-US"); // or to first found English-US
 }, 1000);
 
 function testSpeaker() {
@@ -332,12 +326,16 @@ const cellsDensityMap = {
 
 function changeCellsDensity(value) {
   pointsInput.value = value;
-  const cells = cellsDensityMap[value] || pointsInput.dataset.cells;
+  const cells = cellsDensityMap[value] || 1000;
   pointsInput.dataset.cells = cells;
-  pointsOutputFormatted.value = cells / 1000 + "K";
+  pointsOutputFormatted.value = getCellsDensityValue(cells);
   pointsOutputFormatted.style.color = getCellsDensityColor(cells);
 }
 
+function getCellsDensityValue(cells) {
+  return cells / 1000 + "K";
+}
+
 function getCellsDensityColor(cells) {
   return cells > 50000 ? "#b12117" : cells !== 10000 ? "#dfdf12" : "#053305";
 }
@@ -391,18 +389,18 @@ function changeEmblemShape(emblemShape) {
 }
 
 function changeStatesNumber(value) {
-  byId("statesNumber").style.color = +value ? null : "#b12117";
+  regionsOutput.style.color = +value ? null : "#b12117";
   burgLabels.select("#capitals").attr("data-size", Math.max(rn(6 - value / 20), 3));
   labels.select("#countries").attr("data-size", Math.max(rn(18 - value / 6), 4));
 }
 
 function changeUiSize(value) {
-  if (isNaN(value) || value < 0.5) return;
+  if (isNaN(+value) || +value < 0.5) return;
 
   const max = getUImaxSize();
-  if (value > max) value = max;
+  if (+value > max) value = max;
 
-  uiSize.value = value;
+  uiSizeInput.value = uiSizeOutput.value = value;
   document.getElementsByTagName("body")[0].style.fontSize = rn(value * 10, 2) + "px";
   byId("options").style.width = value * 300 + "px";
 }
@@ -429,7 +427,7 @@ function changeThemeHue(hue) {
 
 // change color and transparency for modal windows
 function changeDialogsTheme(themeColor, transparency) {
-  transparencyInput.value = transparency;
+  transparencyInput.value = transparencyOutput.value = transparency;
   const alpha = (100 - +transparency) / 100;
   const alphaReduced = Math.min(alpha + 0.3, 1);
 
@@ -443,7 +441,6 @@ function changeDialogsTheme(themeColor, transparency) {
   };
 
   const theme = [
-    {name: "--bg-opacity", value: alpha},
     {name: "--bg-main", h, s, l, alpha},
     {name: "--bg-lighter", h, s, l: l + 0.02, alpha},
     {name: "--bg-light", h, s: s - 0.02, l: l + 0.06, alpha},
@@ -456,9 +453,8 @@ function changeDialogsTheme(themeColor, transparency) {
   ];
 
   const sx = document.documentElement.style;
-  theme.forEach(({name, value, h, s, l, alpha}) => {
-    if (value !== undefined) sx.setProperty(name, value);
-    else sx.setProperty(name, getRGBA(h, s, l, alpha));
+  theme.forEach(({name, h, s, l, alpha}) => {
+    sx.setProperty(name, getRGBA(h, s, l, alpha));
   });
 }
 
@@ -493,11 +489,11 @@ function resetLanguage() {
   if (!languageSelect.value) return;
 
   languageSelect.value = "en";
-  languageSelect.handleChange(new Event("change"));
+  languageSelect.dispatchEvent(new Event("change"));
 
   // do once again to actually reset the language
   languageSelect.value = "en";
-  languageSelect.handleChange(new Event("change"));
+  languageSelect.dispatchEvent(new Event("change"));
 }
 
 function changeZoomExtent(value) {
@@ -537,6 +533,7 @@ function applyStoredOptions() {
 
   for (let i = 0; i < localStorage.length; i++) {
     const key = localStorage.key(i);
+
     if (key === "speakerVoice") continue;
 
     const input = byId(key + "Input") || byId(key);
@@ -554,17 +551,17 @@ function applyStoredOptions() {
     if (key.slice(0, 5) === "style") applyOption(stylePreset, key, key.slice(5));
   }
 
-  if (stored("winds")) options.winds = stored("winds").split(",").map(Number);
-  if (stored("temperatureEquator")) options.temperatureEquator = +stored("temperatureEquator");
-  if (stored("temperatureNorthPole")) options.temperatureNorthPole = +stored("temperatureNorthPole");
-  if (stored("temperatureSouthPole")) options.temperatureSouthPole = +stored("temperatureSouthPole");
+  if (stored("winds")) options.winds = localStorage.getItem("winds").split(",").map(Number);
+  if (stored("temperatureEquator")) options.temperatureEquator = +localStorage.getItem("temperatureEquator");
+  if (stored("temperatureNorthPole")) options.temperatureNorthPole = +localStorage.getItem("temperatureNorthPole");
+  if (stored("temperatureSouthPole")) options.temperatureSouthPole = +localStorage.getItem("temperatureSouthPole");
   if (stored("military")) options.military = JSON.parse(stored("military"));
 
   if (stored("tooltipSize")) changeTooltipSize(stored("tooltipSize"));
   if (stored("regions")) changeStatesNumber(stored("regions"));
 
-  uiSize.max = uiSize.max = getUImaxSize();
-  if (stored("uiSize")) changeUiSize(+stored("uiSize"));
+  uiSizeInput.max = uiSizeOutput.max = getUImaxSize();
+  if (stored("uiSize")) changeUiSize(stored("uiSize"));
   else changeUiSize(minmax(rn(mapWidthInput.value / 1280, 1), 1, 2.5));
 
   // search params overwrite stored and default options
@@ -589,15 +586,15 @@ function randomizeOptions() {
   // 'Options' settings
   if (randomize || !locked("points")) changeCellsDensity(4); // reset to default, no need to randomize
   if (randomize || !locked("template")) randomizeHeightmapTemplate();
-  if (randomize || !locked("statesNumber")) statesNumber.value = gauss(18, 5, 2, 30);
-  if (randomize || !locked("provincesRatio")) provincesRatio.value = gauss(20, 10, 20, 100);
+  if (randomize || !locked("regions")) regionsInput.value = regionsOutput.value = gauss(18, 5, 2, 30);
+  if (randomize || !locked("provinces")) provincesInput.value = provincesOutput.value = gauss(20, 10, 20, 100);
   if (randomize || !locked("manors")) {
     manorsInput.value = 1000;
     manorsOutput.value = "auto";
   }
-  if (randomize || !locked("religionsNumber")) religionsNumber.value = gauss(6, 3, 2, 10);
-  if (randomize || !locked("sizeVariety")) sizeVariety.value = gauss(4, 2, 0, 10, 1);
-  if (randomize || !locked("growthRate")) growthRate.value = rn(1 + Math.random(), 1);
+  if (randomize || !locked("religions")) religionsInput.value = religionsOutput.value = gauss(6, 3, 2, 10);
+  if (randomize || !locked("power")) powerInput.value = powerOutput.value = gauss(4, 2, 0, 10, 2);
+  if (randomize || !locked("neutral")) neutralInput.value = neutralOutput.value = rn(1 + Math.random(), 1);
   if (randomize || !locked("cultures")) culturesInput.value = culturesOutput.value = gauss(12, 3, 5, 30);
   if (randomize || !locked("culturesSet")) randomizeCultureSet();
 
@@ -609,7 +606,8 @@ function randomizeOptions() {
 
   // 'Units Editor' settings
   const US = navigator.language === "en-US";
-  if (randomize || !locked("distanceScale")) distanceScale = distanceScaleInput.value = gauss(3, 1, 1, 5);
+  if (randomize || !locked("distanceScale"))
+    distanceScale = distanceScaleOutput.value = distanceScaleInput.value = gauss(3, 1, 1, 5);
   if (!stored("distanceUnit")) distanceUnitInput.value = US ? "mi" : "km";
   if (!stored("heightUnit")) heightUnit.value = US ? "ft" : "m";
   if (!stored("temperatureScale")) temperatureScale.value = US ? "°F" : "°C";
@@ -701,6 +699,12 @@ async function openTemplateSelectionDialog() {
   HeightmapSelectionDialog.open();
 }
 
+// remove all saved data from LocalStorage and reload the page
+function restoreDefaultOptions() {
+  localStorage.clear();
+  location.reload();
+}
+
 // Sticked menu Options listeners
 byId("sticked").addEventListener("click", function (event) {
   const id = event.target.id;
@@ -774,7 +778,7 @@ function showExportPane() {
 }
 
 async function exportToJson(type) {
-  const {exportToJson} = await import("../dynamic/export-json.js?v=1.100.00");
+  const {exportToJson} = await import("../dynamic/export-json.js?v=1.97.08");
   exportToJson(type);
 }
 
diff --git a/modules/ui/provinces-editor.js b/modules/ui/provinces-editor.js
index 69707b95..8ef848e6 100644
--- a/modules/ui/provinces-editor.js
+++ b/modules/ui/provinces-editor.js
@@ -8,7 +8,7 @@ function editProvinces() {
   if (layerIsOn("toggleCultures")) toggleCultures();
 
   provs.selectAll("text").call(d3.drag().on("drag", dragLabel)).classed("draggable", true);
-  const body = byId("provincesBodySection");
+  const body = document.getElementById("provincesBodySection");
   refreshProvincesEditor();
 
   if (modules.editProvinces) return;
@@ -23,22 +23,22 @@ function editProvinces() {
   });
 
   // add listeners
-  byId("provincesEditorRefresh").on("click", refreshProvincesEditor);
-  byId("provincesEditStyle").on("click", () => editStyle("provs"));
-  byId("provincesFilterState").on("change", provincesEditorAddLines);
-  byId("provincesPercentage").on("click", togglePercentageMode);
-  byId("provincesChart").on("click", showChart);
-  byId("provincesToggleLabels").on("click", toggleLabels);
-  byId("provincesExport").on("click", downloadProvincesData);
-  byId("provincesRemoveAll").on("click", removeAllProvinces);
-  byId("provincesManually").on("click", enterProvincesManualAssignent);
-  byId("provincesManuallyApply").on("click", applyProvincesManualAssignent);
-  byId("provincesManuallyCancel").on("click", () => exitProvincesManualAssignment());
-  byId("provincesRelease").on("click", triggerProvincesRelease);
-  byId("provincesAdd").on("click", enterAddProvinceMode);
-  byId("provincesRecolor").on("click", recolorProvinces);
+  document.getElementById("provincesEditorRefresh").addEventListener("click", refreshProvincesEditor);
+  document.getElementById("provincesEditStyle").addEventListener("click", () => editStyle("provs"));
+  document.getElementById("provincesFilterState").addEventListener("change", provincesEditorAddLines);
+  document.getElementById("provincesPercentage").addEventListener("click", togglePercentageMode);
+  document.getElementById("provincesChart").addEventListener("click", showChart);
+  document.getElementById("provincesToggleLabels").addEventListener("click", toggleLabels);
+  document.getElementById("provincesExport").addEventListener("click", downloadProvincesData);
+  document.getElementById("provincesRemoveAll").addEventListener("click", removeAllProvinces);
+  document.getElementById("provincesManually").addEventListener("click", enterProvincesManualAssignent);
+  document.getElementById("provincesManuallyApply").addEventListener("click", applyProvincesManualAssignent);
+  document.getElementById("provincesManuallyCancel").addEventListener("click", () => exitProvincesManualAssignment());
+  document.getElementById("provincesRelease").addEventListener("click", triggerProvincesRelease);
+  document.getElementById("provincesAdd").addEventListener("click", enterAddProvinceMode);
+  document.getElementById("provincesRecolor").addEventListener("click", recolorProvinces);
 
-  body.on("click", function (ev) {
+  body.addEventListener("click", function (ev) {
     if (customization) return;
     const el = ev.target,
       cl = el.classList,
@@ -58,7 +58,7 @@ function editProvinces() {
     else if (cl.contains("icon-lock") || cl.contains("icon-lock-open")) updateLockStatus(p, cl);
   });
 
-  body.on("change", function (ev) {
+  body.addEventListener("change", function (ev) {
     const el = ev.target,
       cl = el.classList,
       line = el.parentNode,
@@ -100,7 +100,7 @@ function editProvinces() {
   }
 
   function updateFilter() {
-    const stateFilter = byId("provincesFilterState");
+    const stateFilter = document.getElementById("provincesFilterState");
     const selectedState = stateFilter.value || 1;
     stateFilter.options.length = 0; // remove all options
     stateFilter.options.add(new Option(`all`, -1, false, selectedState == -1));
@@ -111,7 +111,7 @@ function editProvinces() {
   // add line for each province
   function provincesEditorAddLines() {
     const unit = " " + getAreaUnit();
-    const selectedState = +byId("provincesFilterState").value;
+    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
     body.innerHTML = "";
@@ -194,9 +194,9 @@ function editProvinces() {
     byId("provincesFooterPopulation").dataset.population = totalPopulation;
 
     body.querySelectorAll("div.states").forEach(el => {
-      el.on("click", selectProvinceOnLineClick);
-      el.on("mouseenter", ev => provinceHighlightOn(ev));
-      el.on("mouseleave", ev => provinceHighlightOff(ev));
+      el.addEventListener("click", selectProvinceOnLineClick);
+      el.addEventListener("mouseenter", ev => provinceHighlightOn(ev));
+      el.addEventListener("mouseleave", ev => provinceHighlightOff(ev));
     });
 
     if (body.dataset.type === "percentage") {
@@ -306,7 +306,7 @@ function editProvinces() {
     const {cell: center, culture} = burgs[burgId];
     const color = getRandomColor();
     const coa = province.coa;
-    const coaEl = byId("provinceCOA" + provinceId);
+    const coaEl = document.getElementById("provinceCOA" + provinceId);
     if (coaEl) coaEl.id = "stateCOA" + newStateId;
     emblems.select(`#provinceEmblems > use[data-i='${provinceId}']`).remove();
 
@@ -367,7 +367,10 @@ function editProvinces() {
   function updateStatesPostRelease(oldStates, newStates) {
     const allStates = unique([...oldStates, ...newStates]);
 
-    BurgsAndStates.getPoles();
+    layerIsOn("toggleProvinces") && toggleProvinces();
+    layerIsOn("toggleStates") ? drawStates() : toggleStates();
+    layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
+
     BurgsAndStates.collectStatistics();
     BurgsAndStates.defineStateForms(newStates);
     drawStateLabels(allStates);
@@ -379,10 +382,6 @@ function editProvinces() {
       COArenderer.add("state", stateId, coa, ...pole);
     });
 
-    layerIsOn("toggleProvinces") && toggleProvinces();
-    layerIsOn("toggleStates") ? drawStates() : toggleStates();
-    layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
-
     unfog();
     closeDialogs();
     editStates();
@@ -455,7 +454,6 @@ function editProvinces() {
         p.burgs.forEach(b => (pack.burgs[b].population = population));
       }
 
-      if (layerIsOn("togglePopulation")) drawPopulation();
       refreshProvincesEditor();
     }
   }
@@ -484,7 +482,7 @@ function editProvinces() {
           unfog("focusProvince" + p);
 
           const coaId = "provinceCOA" + p;
-          if (byId(coaId)) byId(coaId).remove();
+          if (document.getElementById(coaId)) document.getElementById(coaId).remove();
           emblems.select(`#provinceEmblems > use[data-i='${p}']`).remove();
 
           pack.provinces[p] = {i: p, removed: true};
@@ -492,7 +490,8 @@ function editProvinces() {
           const g = provs.select("#provincesBody");
           g.select("#province" + p).remove();
           g.select("#province-gap" + p).remove();
-          if (layerIsOn("toggleBorders")) drawBorders();
+          if (!layerIsOn("toggleBorders")) toggleBorders();
+          else drawBorders();
           refreshProvincesEditor();
           $(this).dialog("close");
         },
@@ -505,13 +504,13 @@ function editProvinces() {
 
   function editProvinceName(province) {
     const p = pack.provinces[province];
-    byId("provinceNameEditor").dataset.province = province;
-    byId("provinceNameEditorShort").value = p.name;
+    document.getElementById("provinceNameEditor").dataset.province = province;
+    document.getElementById("provinceNameEditorShort").value = p.name;
     applyOption(provinceNameEditorSelectForm, p.formName);
-    byId("provinceNameEditorFull").value = p.fullName;
+    document.getElementById("provinceNameEditorFull").value = p.fullName;
 
     const cultureId = pack.cells.culture[p.center];
-    byId("provinceCultureDisplay").innerText = pack.cultures[cultureId].name;
+    document.getElementById("provinceCultureDisplay").innerText = pack.cultures[cultureId].name;
 
     $("#provinceNameEditor").dialog({
       resizable: false,
@@ -532,22 +531,22 @@ function editProvinces() {
     modules.editProvinceName = true;
 
     // add listeners
-    byId("provinceNameEditorShortCulture").on("click", regenerateShortNameCulture);
-    byId("provinceNameEditorShortRandom").on("click", regenerateShortNameRandom);
-    byId("provinceNameEditorAddForm").on("click", addCustomForm);
-    byId("provinceNameEditorFullRegenerate").on("click", regenerateFullName);
+    document.getElementById("provinceNameEditorShortCulture").addEventListener("click", regenerateShortNameCulture);
+    document.getElementById("provinceNameEditorShortRandom").addEventListener("click", regenerateShortNameRandom);
+    document.getElementById("provinceNameEditorAddForm").addEventListener("click", addCustomForm);
+    document.getElementById("provinceNameEditorFullRegenerate").addEventListener("click", regenerateFullName);
 
     function regenerateShortNameCulture() {
       const province = +provinceNameEditor.dataset.province;
       const culture = pack.cells.culture[pack.provinces[province].center];
       const name = Names.getState(Names.getCultureShort(culture), culture);
-      byId("provinceNameEditorShort").value = name;
+      document.getElementById("provinceNameEditorShort").value = name;
     }
 
     function regenerateShortNameRandom() {
       const base = rand(nameBases.length - 1);
       const name = Names.getState(Names.getBase(base), undefined, base);
-      byId("provinceNameEditorShort").value = name;
+      document.getElementById("provinceNameEditorShort").value = name;
     }
 
     function addCustomForm() {
@@ -559,9 +558,9 @@ function editProvinces() {
     }
 
     function regenerateFullName() {
-      const short = byId("provinceNameEditorShort").value;
-      const form = byId("provinceNameEditorSelectForm").value;
-      byId("provinceNameEditorFull").value = getFullName();
+      const short = document.getElementById("provinceNameEditorShort").value;
+      const form = document.getElementById("provinceNameEditorSelectForm").value;
+      document.getElementById("provinceNameEditorFull").value = getFullName();
 
       function getFullName() {
         if (!form) return short;
@@ -571,9 +570,9 @@ function editProvinces() {
     }
 
     function applyNameChange(p) {
-      p.name = byId("provinceNameEditorShort").value;
-      p.formName = byId("provinceNameEditorSelectForm").value;
-      p.fullName = byId("provinceNameEditorFull").value;
+      p.name = document.getElementById("provinceNameEditorShort").value;
+      p.formName = document.getElementById("provinceNameEditorSelectForm").value;
+      p.fullName = document.getElementById("provinceNameEditorFull").value;
       provs.select("#provinceLabel" + p.i).text(p.name);
       refreshProvincesEditor();
     }
@@ -629,8 +628,8 @@ function editProvinces() {
       .parentId(d => d.state)(data)
       .sum(d => d.area);
 
-    const width = 300 + 300 * uiSize.value,
-      height = 90 + 90 * uiSize.value;
+    const width = 300 + 300 * uiSizeOutput.value,
+      height = 90 + 90 * uiSizeOutput.value;
     const margin = {top: 10, right: 10, bottom: 0, left: 10};
     const w = width - margin.left - margin.right;
     const h = height - margin.top - margin.bottom;
@@ -652,7 +651,7 @@ function editProvinces() {
       .attr("height", height)
       .attr("font-size", "10px");
     const graph = svg.append("g").attr("transform", `translate(10, 0)`);
-    byId("provincesTreeType").on("change", updateChart);
+    document.getElementById("provincesTreeType").addEventListener("change", updateChart);
 
     treeLayout(root);
 
@@ -689,7 +688,7 @@ function editProvinces() {
 
     function hideInfo(ev) {
       provinceHighlightOff(ev);
-      if (!byId("provinceInfo")) return;
+      if (!document.getElementById("provinceInfo")) return;
       provinceInfo.innerHTML = "&#8205;";
       d3.select(ev.target).select("rect").classed("selected", 0);
     }
@@ -706,7 +705,6 @@ function editProvinces() {
 
     node
       .append("text")
-      .attr("text-rendering", "optimizeSpeed")
       .attr("dx", ".2em")
       .attr("dy", "1em")
       .attr("x", d => d.x0)
@@ -818,7 +816,7 @@ function editProvinces() {
     stateBorders.select("path").attr("stroke", "#000").attr("stroke-width", 1.2);
 
     customization = 11;
-    provs.select("g#provincesBody").append("g").attr("id", "temp").attr("stroke-width", 0.3);
+    provs.select("g#provincesBody").append("g").attr("id", "temp");
     provs
       .select("g#provincesBody")
       .append("g")
@@ -828,7 +826,7 @@ function editProvinces() {
       .attr("stroke-width", 1);
 
     document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "none"));
-    byId("provincesManuallyButtons").style.display = "inline-block";
+    document.getElementById("provincesManuallyButtons").style.display = "inline-block";
 
     provincesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
     provincesHeader.querySelector("div[data-sortby='state']").style.left = "7.7em";
@@ -881,7 +879,7 @@ function editProvinces() {
   }
 
   function dragBrush() {
-    const r = +provincesBrush.value;
+    const r = +provincesManuallyBrush.value;
 
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
@@ -939,7 +937,7 @@ function editProvinces() {
   function moveBrush() {
     showMainTip();
     const point = d3.mouse(this);
-    const radius = +provincesBrush.value;
+    const radius = +provincesManuallyBrush.value;
     moveCircle(point[0], point[1], radius);
   }
 
@@ -952,10 +950,10 @@ function editProvinces() {
         pack.cells.province[i] = +this.dataset.province;
       });
 
-    Provinces.getPoles();
-    if (layerIsOn("toggleBorders")) drawBorders();
-    if (layerIsOn("toggleProvinces")) drawProvinces();
-
+    if (!layerIsOn("toggleBorders")) toggleBorders();
+    else drawBorders();
+    if (!layerIsOn("toggleProvinces")) toggleProvinces();
+    else drawProvinces();
     exitProvincesManualAssignment();
     refreshProvincesEditor();
   }
@@ -972,7 +970,7 @@ function editProvinces() {
     debug.selectAll("path.selected").remove();
 
     document.querySelectorAll("#provincesBottom > *").forEach(el => (el.style.display = "inline-block"));
-    byId("provincesManuallyButtons").style.display = "none";
+    document.getElementById("provincesManuallyButtons").style.display = "none";
 
     provincesEditor.querySelectorAll(".hide:not(.show)").forEach(el => el.classList.remove("hidden"));
     provincesHeader.querySelector("div[data-sortby='state']").style.left = "22em";
@@ -1046,11 +1044,12 @@ function editProvinces() {
       cells.province[c] = province;
     });
 
-    if (layerIsOn("toggleBorders")) drawBorders();
-    if (layerIsOn("toggleProvinces")) drawProvinces();
-
+    if (!layerIsOn("toggleBorders")) toggleBorders();
+    else drawBorders();
+    if (!layerIsOn("toggleProvinces")) toggleProvinces();
+    else drawProvinces();
     collectStatistics();
-    byId("provincesFilterState").value = state;
+    document.getElementById("provincesFilterState").value = state;
     provincesEditorAddLines();
   }
 
@@ -1063,7 +1062,7 @@ function editProvinces() {
   }
 
   function recolorProvinces() {
-    const state = +byId("provincesFilterState").value;
+    const state = +document.getElementById("provincesFilterState").value;
 
     pack.provinces.forEach(p => {
       if (!p || p.removed) return;
@@ -1121,7 +1120,8 @@ function editProvinces() {
           pack.states.forEach(s => (s.provinces = []));
 
           unfog();
-          if (layerIsOn("toggleBorders")) drawBorders();
+          if (!layerIsOn("toggleBorders")) toggleBorders();
+          else drawBorders();
           provs.select("#provincesBody").remove();
           turnButtonOff("toggleProvinces");
 
diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js
index d3144f49..5c38a07a 100644
--- a/modules/ui/regiment-editor.js
+++ b/modules/ui/regiment-editor.js
@@ -24,17 +24,18 @@ function editRegiment(selector) {
   modules.editRegiment = true;
 
   // add listeners
-  byId("regimentNameRestore").addEventListener("click", restoreName);
-  byId("regimentType").addEventListener("click", changeType);
-  byId("regimentName").addEventListener("change", changeName);
-  byId("regimentEmblemChange").addEventListener("click", changeEmblem);
-  byId("regimentAttack").addEventListener("click", toggleAttack);
-  byId("regimentRegenerateLegend").addEventListener("click", regenerateLegend);
-  byId("regimentLegend").addEventListener("click", editLegend);
-  byId("regimentSplit").addEventListener("click", splitRegiment);
-  byId("regimentAdd").addEventListener("click", toggleAdd);
-  byId("regimentAttach").addEventListener("click", toggleAttach);
-  byId("regimentRemove").addEventListener("click", removeRegiment);
+  document.getElementById("regimentNameRestore").addEventListener("click", restoreName);
+  document.getElementById("regimentType").addEventListener("click", changeType);
+  document.getElementById("regimentName").addEventListener("change", changeName);
+  document.getElementById("regimentEmblem").addEventListener("input", changeEmblem);
+  document.getElementById("regimentEmblemSelect").addEventListener("click", selectEmblem);
+  document.getElementById("regimentAttack").addEventListener("click", toggleAttack);
+  document.getElementById("regimentRegenerateLegend").addEventListener("click", regenerateLegend);
+  document.getElementById("regimentLegend").addEventListener("click", editLegend);
+  document.getElementById("regimentSplit").addEventListener("click", splitRegiment);
+  document.getElementById("regimentAdd").addEventListener("click", toggleAdd);
+  document.getElementById("regimentAttach").addEventListener("click", toggleAttach);
+  document.getElementById("regimentRemove").addEventListener("click", removeRegiment);
 
   // get regiment data element
   function getRegiment() {
@@ -42,13 +43,11 @@ function editRegiment(selector) {
   }
 
   function updateRegimentData(regiment) {
-    byId("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
-    byId("regimentName").value = regiment.name;
-    byId("regimentEmblem").innerHTML = regiment.icon.startsWith("http") || regiment.icon.startsWith("data:image")
-      ? `<img src="${regiment.icon}" style="width: 1em; height: 1em;">`
-      : regiment.icon;
+    document.getElementById("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
+    document.getElementById("regimentName").value = regiment.name;
+    document.getElementById("regimentEmblem").value = regiment.icon;
+    const composition = document.getElementById("regimentComposition");
 
-    const composition = byId("regimentComposition");
     composition.innerHTML = options.military
       .map(u => {
         return `<div data-tip="${capitalize(u.name)} number. Input to change">
@@ -127,13 +126,12 @@ function editRegiment(selector) {
   function changeType() {
     const reg = getRegiment();
     reg.n = +!reg.n;
-    byId("regimentType").className = reg.n ? "icon-anchor" : "icon-users";
+    document.getElementById("regimentType").className = reg.n ? "icon-anchor" : "icon-users";
 
     const size = +armies.attr("box-size");
     const baseRect = elSelected.querySelectorAll("rect")[0];
     const iconRect = elSelected.querySelectorAll("rect")[1];
     const icon = elSelected.querySelector(".regimentIcon");
-    const image = elSelected.querySelector(".regimentIcon");
     const x = reg.n ? reg.x - size * 2 : reg.x - size * 3;
     baseRect.setAttribute("x", x);
     baseRect.setAttribute("width", reg.n ? size * 4 : size * 6);
@@ -150,19 +148,19 @@ function editRegiment(selector) {
     const reg = getRegiment(),
       regs = pack.states[elSelected.dataset.state].military;
     const name = Military.getName(reg, regs);
-    elSelected.dataset.name = reg.name = byId("regimentName").value = name;
+    elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name;
+  }
+
+  function selectEmblem() {
+    selectIcon(regimentEmblem.value, v => {
+      regimentEmblem.value = v;
+      changeEmblem();
+    });
   }
 
   function changeEmblem() {
-    const regiment = getRegiment();
-
-    selectIcon(regiment.icon, value => {
-      regiment.icon = value;
-      const isExternal = value.startsWith("http") || value.startsWith("data:image");
-      byId("regimentEmblem").innerHTML = isExternal ? `<img src="${value}" style="width: 1em; height: 1em;">` : value;
-      elSelected.querySelector(".regimentIcon").innerHTML = isExternal ? "" : value;
-      elSelected.querySelector(".regimentImage").setAttribute("href", isExternal ? value : "");
-    });
+    const emblem = document.getElementById("regimentEmblem").value;
+    getRegiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem;
   }
 
   function changeUnit() {
@@ -220,14 +218,14 @@ function editRegiment(selector) {
     newReg.name = Military.getName(newReg, military);
     military.push(newReg);
     Military.generateNote(newReg, pack.states[state]); // add legend
-    drawRegiment(newReg, state); // draw new reg below
+    Military.drawRegiment(newReg, state); // draw new reg below
 
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
   }
 
   function toggleAdd() {
-    byId("regimentAdd").classList.toggle("pressed");
-    if (byId("regimentAdd").classList.contains("pressed")) {
+    document.getElementById("regimentAdd").classList.toggle("pressed");
+    if (document.getElementById("regimentAdd").classList.contains("pressed")) {
       viewbox.style("cursor", "crosshair").on("click", addRegimentOnClick);
       tip("Click on map to create new regiment or fleet", true);
     } else {
@@ -248,14 +246,14 @@ function editRegiment(selector) {
     reg.name = Military.getName(reg, military);
     military.push(reg);
     Military.generateNote(reg, pack.states[state]); // add legend
-    drawRegiment(reg, state);
+    Military.drawRegiment(reg, state);
     if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click();
     toggleAdd();
   }
 
   function toggleAttack() {
-    byId("regimentAttack").classList.toggle("pressed");
-    if (byId("regimentAttack").classList.contains("pressed")) {
+    document.getElementById("regimentAttack").classList.toggle("pressed");
+    if (document.getElementById("regimentAttack").classList.contains("pressed")) {
       viewbox.style("cursor", "crosshair").on("click", attackRegimentOnClick);
       tip("Click on another regiment to initiate battle", true);
       armies.selectAll(":scope > g").classed("draggable", false);
@@ -298,7 +296,7 @@ function editRegiment(selector) {
     (defender.px = defender.x), (defender.py = defender.y);
 
     // move attacker to defender
-    moveRegiment(attacker, defender.x, defender.y - 8);
+    Military.moveRegiment(attacker, defender.x, defender.y - 8);
 
     // draw battle icon
     const attack = d3
@@ -309,7 +307,6 @@ function editRegiment(selector) {
       .on("end", () => new Battle(attacker, defender));
     svg
       .append("text")
-      .attr("text-rendering", "optimizeSpeed")
       .attr("x", window.innerWidth / 2)
       .attr("y", window.innerHeight / 2)
       .text("⚔️")
@@ -327,8 +324,8 @@ function editRegiment(selector) {
   }
 
   function toggleAttach() {
-    byId("regimentAttach").classList.toggle("pressed");
-    if (byId("regimentAttach").classList.contains("pressed")) {
+    document.getElementById("regimentAttach").classList.toggle("pressed");
+    if (document.getElementById("regimentAttach").classList.contains("pressed")) {
       viewbox.style("cursor", "crosshair").on("click", attachRegimentOnClick);
       tip("Click on another regiment to unite both regiments. The current regiment will be removed", true);
       armies.selectAll(":scope > g").classed("draggable", false);
@@ -430,7 +427,6 @@ function editRegiment(selector) {
     const text = this.querySelector("text");
     const iconRect = this.querySelectorAll("rect")[1];
     const icon = this.querySelector(".regimentIcon");
-    const image = this.querySelector(".regimentImage");
 
     const self = elSelected === this;
     const baseLine = viewbox.select("g#regimentBase > line");
@@ -452,8 +448,6 @@ function editRegiment(selector) {
       iconRect.setAttribute("y", y1);
       icon.setAttribute("x", x1 - size);
       icon.setAttribute("y", y);
-      image.setAttribute("x", x1 - h);
-      image.setAttribute("y", y1);
       if (self) {
         baseLine.attr("x2", x).attr("y2", y);
         rotationControl
@@ -485,9 +479,9 @@ function editRegiment(selector) {
     viewbox.selectAll("g#regimentBase").remove();
     armies.selectAll(":scope > g").classed("draggable", false);
     armies.selectAll("g>g").call(d3.drag().on("drag", null));
-    byId("regimentAdd").classList.remove("pressed");
-    byId("regimentAttack").classList.remove("pressed");
-    byId("regimentAttach").classList.remove("pressed");
+    document.getElementById("regimentAdd").classList.remove("pressed");
+    document.getElementById("regimentAttack").classList.remove("pressed");
+    document.getElementById("regimentAttach").classList.remove("pressed");
     restoreDefaultEvents();
     elSelected = null;
   }
diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js
index 63f7d1c9..28f40d18 100644
--- a/modules/ui/regiments-overview.js
+++ b/modules/ui/regiments-overview.js
@@ -67,24 +67,14 @@ function overviewRegiments(state) {
           )
           .join(" ");
 
-        lines += /* html */ `<div class="states" data-id="${r.i}" data-s="${s.i}" data-state="${s.name}" data-name="${
-          r.name
-        }" ${sortData} data-total="${r.a}">
+        lines += /* html */ `<div class="states" data-id="${r.i}" data-s="${s.i}" data-state="${s.name}" data-name="${r.name}" ${sortData} data-total="${r.a}">
           <fill-box data-tip="${s.fullName}" fill="${s.color}" disabled></fill-box>
           <input data-tip="${s.fullName}" style="width:6em" value="${s.name}" readonly />
-          ${
-            r.icon.startsWith("http") || r.icon.startsWith("data:image")
-              ? `<img src="${r.icon}" data-tip="Regiment's emblem" style="width:1.2em; height:1.2em; vertical-align: middle;">`
-              : `<span data-tip="Regiment's emblem" style="width:1em">${r.icon}</span>`
-          }
+          <span data-tip="Regiment's emblem" style="width:1em">${r.icon}</span>
           <input data-tip="Regiment's name" style="width:13em" value="${r.name}" readonly />
           ${lineData}
-          <div data-type="total" data-tip="Total military personnel (not considering crew)" style="font-weight: bold">${
-            r.a
-          }</div>
-          <span data-tip="Edit regiment" onclick="editRegiment('#regiment${s.i}-${
-          r.i
-        }')" class="icon-pencil pointer"></span>
+          <div data-type="total" data-tip="Total military personnel (not considering crew)" style="font-weight: bold">${r.a}</div>
+          <span data-tip="Edit regiment" onclick="editRegiment('#regiment${s.i}-${r.i}')" class="icon-pencil pointer"></span>
         </div>`;
 
         regiments.push(r);
@@ -189,7 +179,7 @@ function overviewRegiments(state) {
     reg.name = Military.getName(reg, military);
     military.push(reg);
     Military.generateNote(reg, pack.states[state]); // add legend
-    drawRegiment(reg, state);
+    Military.drawRegiment(reg, state);
     toggleAdd();
   }
 
diff --git a/modules/ui/rivers-creator.js b/modules/ui/rivers-creator.js
index a88581a5..a8600917 100644
--- a/modules/ui/rivers-creator.js
+++ b/modules/ui/rivers-creator.js
@@ -74,10 +74,13 @@ function createRiver() {
 
   function addRiver() {
     const {rivers, cells} = pack;
+    const {addMeandering, getApproximateLength, getWidth, getOffset, getName, getRiverPath, getBasin, getNextId} =
+      Rivers;
+
     const riverCells = createRiver.cells;
     if (riverCells.length < 2) return tip("Add at least 2 cells", false, "error");
 
-    const riverId = Rivers.getNextId(rivers);
+    const riverId = getNextId(rivers);
     const parent = cells.r[last(riverCells)] || riverId;
 
     riverCells.forEach(cell => {
@@ -86,24 +89,17 @@ function createRiver() {
 
     const source = riverCells[0];
     const mouth = parent === riverId ? last(riverCells) : riverCells[riverCells.length - 2];
-    const sourceWidth = Rivers.getSourceWidth(cells.fl[source]);
+    const sourceWidth = 0.05;
     const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2);
     const widthFactor = 1.2 * defaultWidthFactor;
 
-    const meanderedPoints = Rivers.addMeandering(riverCells);
+    const meanderedPoints = addMeandering(riverCells);
 
     const discharge = cells.fl[mouth]; // m3 in second
-    const length = Rivers.getApproximateLength(meanderedPoints);
-    const width = Rivers.getWidth(
-      Rivers.getOffset({
-        flux: discharge,
-        pointIndex: meanderedPoints.length,
-        widthFactor,
-        startingWidth: sourceWidth
-      })
-    );
-    const name = Rivers.getName(mouth);
-    const basin = Rivers.getBasin(parent);
+    const length = getApproximateLength(meanderedPoints);
+    const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth));
+    const name = getName(mouth);
+    const basin = getBasin(parent);
 
     rivers.push({
       i: riverId,
@@ -122,11 +118,13 @@ function createRiver() {
     });
     const id = "river" + riverId;
 
+    // render river
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
     viewbox
       .select("#rivers")
       .append("path")
       .attr("id", id)
-      .attr("d", Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth));
+      .attr("d", getRiverPath(meanderedPoints, widthFactor, sourceWidth));
 
     editRiver(id);
   }
diff --git a/modules/ui/rivers-editor.js b/modules/ui/rivers-editor.js
index a00d488b..4a061179 100644
--- a/modules/ui/rivers-editor.js
+++ b/modules/ui/rivers-editor.js
@@ -86,16 +86,10 @@ function editRiver(id) {
   }
 
   function updateRiverWidth(river) {
+    const {addMeandering, getWidth, getOffset} = Rivers;
     const {cells, discharge, widthFactor, sourceWidth} = river;
-    const meanderedPoints = Rivers.addMeandering(cells);
-    river.width = Rivers.getWidth(
-      Rivers.getOffset({
-        flux: discharge,
-        pointIndex: meanderedPoints.length,
-        widthFactor,
-        startingWidth: sourceWidth
-      })
-    );
+    const meanderedPoints = addMeandering(cells);
+    river.width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor, sourceWidth));
 
     const width = `${rn(river.width * distanceScale, 3)} ${distanceUnitInput.value}`;
     byId("riverWidth").value = width;
@@ -164,9 +158,11 @@ function editRiver(id) {
     river.points = debug.selectAll("#controlPoints > *").data();
     river.cells = river.points.map(([x, y]) => findCell(x, y));
 
-    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+    const {widthFactor, sourceWidth} = river;
     const meanderedPoints = Rivers.addMeandering(river.cells, river.points);
-    const path = Rivers.getRiverPath(meanderedPoints, river.widthFactor, river.sourceWidth);
+
+    lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+    const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
     elSelected.attr("d", path);
 
     updateRiverLength(river);
diff --git a/modules/ui/route-group-editor.js b/modules/ui/route-group-editor.js
index 8450e299..370058c1 100644
--- a/modules/ui/route-group-editor.js
+++ b/modules/ui/route-group-editor.js
@@ -18,7 +18,7 @@ function editRouteGroups() {
   // add listeners
   byId("routeGroupsEditorAdd").addEventListener("click", addGroup);
   byId("routeGroupsEditorBody").on("click", ev => {
-    const group = ev.target.closest(".states")?.dataset.id;
+    const group = ev.target.parentNode.dataset.id;
     if (ev.target.classList.contains("editStyle")) editStyle("routes", group);
     else if (ev.target.classList.contains("removeGroup")) removeGroup(group);
   });
@@ -72,11 +72,12 @@ function editRouteGroups() {
     confirmationDialog({
       title: "Remove route group",
       message:
-        "Are you sure you want to remove the entire route group? All routes in this group will be removed.<br>This action can't be reverted",
+        "Are you sure you want to remove the entire route group? All routes in this group will be removed. This action can't be reverted.",
       confirm: "Remove",
       onConfirm: () => {
-        pack.routes.filter(r => r.group === group).forEach(Routes.remove);
-        if (!DEFAULT_GROUPS.includes(group)) routes.select(`#${group}`).remove();
+        const routes = pack.routes.filter(r => r.group === group);
+        routes.forEach(r => Routes.remove(r));
+        if (DEFAULT_GROUPS.includes(group)) routes.select(`#${group}`).remove();
         addLines();
       }
     });
diff --git a/modules/ui/routes-creator.js b/modules/ui/routes-creator.js
index 3e2d6620..cd9d853f 100644
--- a/modules/ui/routes-creator.js
+++ b/modules/ui/routes-creator.js
@@ -97,7 +97,7 @@ function createRoute(defaultGroup) {
     const points = createRoute.points;
     if (points.length < 2) return tip("Add at least 2 points", false, "error");
 
-    const routeId = Routes.getNextId();
+    const routeId = Math.max(...pack.routes.map(route => route.i)) + 1;
     const group = byId("routeCreatorGroupSelect").value;
     const feature = pack.cells.f[points[0][2]];
     const route = {points, group, feature, i: routeId};
diff --git a/modules/ui/routes-editor.js b/modules/ui/routes-editor.js
index 5556c812..3a137623 100644
--- a/modules/ui/routes-editor.js
+++ b/modules/ui/routes-editor.js
@@ -174,10 +174,9 @@ function editRoute(id) {
 
   function handleControlPointClick() {
     const controlPoint = d3.select(this);
+
     const point = controlPoint.datum();
     const route = getRoute();
-    if (route.points.length < 3) return; // can't remove or split point if only 2 points in route
-
     const index = route.points.indexOf(point);
 
     const isSplitMode = byId("routeSplit").classList.contains("pressed");
@@ -195,7 +194,7 @@ function editRoute(id) {
 
       // create new route
       const newRoute = {
-        i: Routes.getNextId(),
+        i: Math.max(...pack.routes.map(route => route.i)) + 1,
         group: route.group,
         feature: route.feature,
         name: route.name,
@@ -390,13 +389,20 @@ function editRoute(id) {
   }
 
   function removeRoute() {
-    confirmationDialog({
+    alertMessage.innerHTML = "Are you sure you want to remove the route";
+    $("#alert").dialog({
+      resizable: false,
+      width: "22em",
       title: "Remove route",
-      message: "Are you sure you want to remove the route? <br>This action cannot be reverted",
-      confirm: "Remove",
-      onConfirm: () => {
-        Routes.remove(getRoute());
-        $("#routeEditor").dialog("close");
+      buttons: {
+        Remove: function () {
+          Routes.remove(getRoute());
+          $(this).dialog("close");
+          $("#routeEditor").dialog("close");
+        },
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
diff --git a/modules/ui/routes-overview.js b/modules/ui/routes-overview.js
index cf731068..d9817dc3 100644
--- a/modules/ui/routes-overview.js
+++ b/modules/ui/routes-overview.js
@@ -32,7 +32,6 @@ function overviewRoutes() {
     let lines = "";
 
     for (const route of pack.routes) {
-      if (!route.points || route.points.length < 2) continue;
       route.name = route.name || Routes.generateName(route);
       route.length = route.length || Routes.getLength(route.i);
       const length = rn(route.length * distanceScale) + " " + distanceUnitInput.value;
@@ -59,7 +58,7 @@ function overviewRoutes() {
 
     // update footer
     routesFooterNumber.innerHTML = pack.routes.length;
-    const averageLength = rn(d3.mean(pack.routes.map(r => r.length)) || 0);
+    const averageLength = rn(d3.mean(pack.routes.map(r => r.length)));
     routesFooterLength.innerHTML = averageLength * distanceScale + " " + distanceUnitInput.value;
 
     // add listeners
@@ -93,8 +92,8 @@ function overviewRoutes() {
   }
 
   function zoomToRoute() {
-    const routeId = +this.parentNode.dataset.id;
-    const route = routes.select("#route" + routeId).node();
+    const r = +this.parentNode.dataset.id;
+    const route = routes.select("#route" + r).node();
     highlightElement(route, 3);
   }
 
@@ -112,16 +111,15 @@ function overviewRoutes() {
   }
 
   function openRouteEditor() {
-    const routeId = "route" + this.parentNode.dataset.id;
-    editRoute(routeId);
+    const id = "route" + this.parentNode.dataset.id;
+    editRoute(id);
   }
 
   function toggleLockStatus() {
     const routeId = +this.parentNode.dataset.id;
-    const route = pack.routes.find(route => route.i === routeId);
-    if (!route) return;
-
+    const route = pack.routes[routeId];
     route.lock = !route.lock;
+
     if (this.classList.contains("icon-lock")) {
       this.classList.remove("icon-lock");
       this.classList.add("icon-lock-open");
@@ -146,14 +144,22 @@ function overviewRoutes() {
 
   function triggerRouteRemove() {
     const routeId = +this.parentNode.dataset.id;
-    confirmationDialog({
+
+    alertMessage.innerHTML = `Are you sure you want to remove the route?`;
+    $("#alert").dialog({
+      resizable: false,
+      width: "22em",
       title: "Remove route",
-      message: "Are you sure you want to remove the route? <br>This action cannot be reverted",
-      confirm: "Remove",
-      onConfirm: () => {
-        const route = pack.routes.find(r => r.i === routeId);
-        Routes.remove(route);
-        routesOverviewAddLines();
+      buttons: {
+        Remove: function () {
+          const route = pack.routes.find(r => r.i === routeId);
+          Routes.remove(route);
+          routesOverviewAddLines();
+          $(this).dialog("close");
+        },
+        Cancel: function () {
+          $(this).dialog("close");
+        }
       }
     });
   }
@@ -169,8 +175,8 @@ function overviewRoutes() {
           pack.routes = [];
           routes.selectAll("path").remove();
 
-          routesOverviewAddLines();
           $(this).dialog("close");
+          $("#routesOverview").dialog("close");
         },
         Cancel: function () {
           $(this).dialog("close");
diff --git a/modules/ui/style.js b/modules/ui/style.js
index d8f16ad7..f6e5dd02 100644
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@@ -18,7 +18,7 @@
 }
 
 // store some style inputs as options
-styleElements.on("change", function (ev) {
+styleElements.addEventListener("change", function (ev) {
   if (ev.target.dataset.stored) lock(ev.target.dataset.stored);
 });
 
@@ -70,13 +70,8 @@ function getColorScheme(scheme = "bright") {
   return heightmapColorSchemes[scheme];
 }
 
-function getColor(value, scheme = getColorScheme("bright")) {
-  return scheme(1 - (value < 20 ? value - 5 : value) / 100);
-}
-
 // Toggle style sections on element select
-styleElementSelect.on("change", selectStyleElement);
-
+styleElementSelect.addEventListener("change", selectStyleElement);
 function selectStyleElement() {
   const styleElement = styleElementSelect.value;
   let el = d3.select("#" + styleElement);
@@ -97,7 +92,7 @@ function selectStyleElement() {
   // opacity
   if (!["landmass", "ocean", "regions", "legend"].includes(styleElement)) {
     styleOpacity.style.display = "block";
-    styleOpacityInput.value = el.attr("opacity") || 1;
+    styleOpacityInput.value = styleOpacityOutput.value = el.attr("opacity") || 1;
   }
 
   // filter
@@ -116,41 +111,32 @@ function selectStyleElement() {
   if (
     [
       "armies",
-      "biomes",
+      "routes",
+      "lakes",
       "borders",
+      "cults",
+      "relig",
       "cells",
       "coastline",
-      "coordinates",
-      "cults",
-      "gridOverlay",
+      "prec",
       "ice",
       "icons",
-      "lakes",
-      "prec",
-      "relig",
-      "routes",
-      "zones"
+      "coordinates",
+      "zones",
+      "gridOverlay"
     ].includes(styleElement)
   ) {
     styleStroke.style.display = "block";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke");
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
   }
 
   // stroke dash
   if (
-    [
-      "borders",
-      "cells",
-      "coordinates",
-      "gridOverlay",
-      "legend",
-      "population",
-      "routes",
-      "temperature",
-      "zones"
-    ].includes(styleElement)
+    ["routes", "borders", "temperature", "legend", "population", "coordinates", "zones", "gridOverlay"].includes(
+      styleElement
+    )
   ) {
     styleStrokeDash.style.display = "block";
     styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
@@ -160,17 +146,15 @@ function selectStyleElement() {
   // clipping
   if (
     [
-      "biomes",
       "cells",
-      "compass",
-      "coordinates",
       "gridOverlay",
-      "population",
-      "prec",
-      "routes",
-      "temperature",
+      "coordinates",
+      "compass",
       "terrain",
+      "temperature",
+      "routes",
       "texture",
+      "biomes",
       "zones"
     ].includes(styleElement)
   ) {
@@ -192,9 +176,9 @@ function selectStyleElement() {
     styleHeightmapRenderOcean.checked = +el.attr("data-render");
 
     styleHeightmapScheme.value = el.attr("scheme");
-    styleHeightmapTerracing.value = el.attr("terracing");
-    styleHeightmapSkip.value = el.attr("skip");
-    styleHeightmapSimplification.value = el.attr("relax");
+    styleHeightmapTerracingInput.value = styleHeightmapTerracingOutput.value = el.attr("terracing");
+    styleHeightmapSkipInput.value = styleHeightmapSkipOutput.value = el.attr("skip");
+    styleHeightmapSimplificationInput.value = styleHeightmapSimplificationOutput.value = el.attr("relax");
     styleHeightmapCurve.value = el.attr("curve");
   }
 
@@ -217,13 +201,13 @@ function selectStyleElement() {
     const tr = parseTransform(compass.select("use").attr("transform"));
     styleCompassShiftX.value = tr[0];
     styleCompassShiftY.value = tr[1];
-    styleCompassSizeInput.value = tr[2];
+    styleCompassSizeInput.value = styleCompassSizeOutput.value = tr[2];
   }
 
   if (styleElement === "terrain") {
     styleRelief.style.display = "block";
-    styleReliefSize.value = terrain.attr("size") || 1;
-    styleReliefDensity.value = terrain.attr("density") || 0.4;
+    styleReliefSizeOutput.innerHTML = styleReliefSizeInput.value = terrain.attr("size");
+    styleReliefDensityOutput.innerHTML = styleReliefDensityInput.value = terrain.attr("density");
     styleReliefSet.value = terrain.attr("set");
   }
 
@@ -236,31 +220,30 @@ function selectStyleElement() {
       .select("#urban")
       .attr("stroke");
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
   }
 
   if (styleElement === "regions") {
     styleStates.style.display = "block";
-    styleStatesBodyOpacity.value = statesBody.attr("opacity") || 1;
+    styleStatesBodyOpacity.value = styleStatesBodyOpacityOutput.value = statesBody.attr("opacity") || 1;
     styleStatesBodyFilter.value = statesBody.attr("filter") || "";
-    styleStatesHaloWidth.value = statesHalo.attr("data-width") || 10;
-    styleStatesHaloOpacity.value = statesHalo.attr("opacity") || 1;
-    styleStatesHaloBlur.value = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0;
+    styleStatesHaloWidth.value = styleStatesHaloWidthOutput.value = statesHalo.attr("data-width") || 10;
+    styleStatesHaloOpacity.value = styleStatesHaloOpacityOutput.value = statesHalo.attr("opacity") || 1;
+    const blur = parseFloat(statesHalo.attr("filter")?.match(/blur\(([^)]+)\)/)?.[1]) || 0;
+    styleStatesHaloBlur.value = styleStatesHaloBlurOutput.value = blur;
   }
 
   if (styleElement === "labels") {
     styleFill.style.display = "block";
     styleStroke.style.display = "block";
     styleStrokeWidth.style.display = "block";
-    styleLetterSpacing.style.display = "block";
 
     styleShadow.style.display = "block";
     styleSize.style.display = "block";
     styleVisibility.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#3e3e4b";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3a3a3a";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 0;
-    styleLetterSpacingInput.value = el.attr("letter-spacing") || 0;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0;
     styleShadowInput.value = el.style("text-shadow") || "white 0 0 4px";
 
     styleFont.style.display = "block";
@@ -275,7 +258,7 @@ function selectStyleElement() {
 
     styleFont.style.display = "block";
     styleSelectFont.value = el.attr("font-family");
-    styleFontSize.value = el.attr("font-size");
+    styleFontSize.value = el.attr("data-size");
   }
 
   if (styleElement == "burgIcons") {
@@ -286,7 +269,7 @@ function selectStyleElement() {
     styleRadius.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
     styleStrokeDasharrayInput.value = el.attr("stroke-dasharray") || "";
     styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
     styleRadiusInput.value = el.attr("size") || 1;
@@ -299,7 +282,7 @@ function selectStyleElement() {
     styleIconSize.style.display = "block";
     styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.24;
     styleIconSizeInput.value = el.attr("size") || 2;
   }
 
@@ -309,13 +292,12 @@ function selectStyleElement() {
     styleSize.style.display = "block";
 
     styleLegend.style.display = "block";
-    styleLegendColItems.value = el.attr("data-columns");
-    const legendBox = el.select("#legendBox");
-    styleLegendBack.value = styleLegendBackOutput.value = legendBox.size() ? legendBox.attr("fill") : "#ffffff";
-    styleLegendOpacity.value = legendBox.size() ? legendBox.attr("fill-opacity") : 1;
+    styleLegendColItemsOutput.value = styleLegendColItems.value = el.attr("data-columns");
+    styleLegendBackOutput.value = styleLegendBack.value = el.select("#legendBox").attr("fill");
+    styleLegendOpacityOutput.value = styleLegendOpacity.value = el.select("#legendBox").attr("fill-opacity");
 
     styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#111111";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 0.5;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 0.5;
 
     styleFont.style.display = "block";
     styleSelectFont.value = el.attr("font-family");
@@ -326,17 +308,18 @@ function selectStyleElement() {
     styleOcean.style.display = "block";
     styleOceanFill.value = styleOceanFillOutput.value = oceanLayers.select("#oceanBase").attr("fill");
     styleOceanPattern.value = byId("oceanicPattern")?.getAttribute("href");
-    styleOceanPatternOpacity.value = byId("oceanicPattern").getAttribute("opacity") || 1;
+    styleOceanPatternOpacity.value = styleOceanPatternOpacityOutput.value =
+      byId("oceanicPattern").getAttribute("opacity") || 1;
     outlineLayers.value = oceanLayers.attr("layers");
   }
 
   if (styleElement === "temperature") {
     styleStrokeWidth.style.display = "block";
     styleTemperature.style.display = "block";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || "";
-    styleTemperatureFillOpacityInput.value = el.attr("fill-opacity") || 0.1;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || "";
+    styleTemperatureFillOpacityInput.value = styleTemperatureFillOpacityOutput.value = el.attr("fill-opacity") || 0.1;
     styleTemperatureFillInput.value = styleTemperatureFillOutput.value = el.attr("fill") || "#000";
-    styleTemperatureFontSizeInput.value = el.attr("font-size") || "8px";
+    styleTemperatureFontSizeInput.value = styleTemperatureFontSizeOutput.value = el.attr("font-size") || "8px";
   }
 
   if (styleElement === "coordinates") {
@@ -346,17 +329,14 @@ function selectStyleElement() {
 
   if (styleElement === "armies") {
     styleArmies.style.display = "block";
-    styleArmiesFillOpacity.value = el.attr("fill-opacity");
-    styleArmiesSize.value = el.attr("box-size");
+    styleArmiesFillOpacity.value = styleArmiesFillOpacityOutput.value = el.attr("fill-opacity");
+    styleArmiesSize.value = styleArmiesSizeOutput.value = el.attr("box-size");
   }
 
   if (styleElement === "emblems") {
     styleEmblems.style.display = "block";
     styleStrokeWidth.style.display = "block";
-    styleStrokeWidthInput.value = el.attr("stroke-width") || 1;
-    emblemsStateSizeInput.value = emblems.select("#stateEmblems").attr("data-size") || 1;
-    emblemsProvinceSizeInput.value = emblems.select("#provinceEmblems").attr("data-size") || 1;
-    emblemsBurgSizeInput.value = emblems.select("#burgEmblems").attr("data-size") || 1;
+    styleStrokeWidthInput.value = styleStrokeWidthOutput.value = el.attr("stroke-width") || 1;
   }
 
   // update group options
@@ -392,9 +372,11 @@ function selectStyleElement() {
 
     const scaleBarBack = el.select("#scaleBarBack");
     if (scaleBarBack.size()) {
-      styleScaleBarBackgroundOpacity.value = scaleBarBack.attr("opacity");
-      styleScaleBarBackgroundFill.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill");
-      styleScaleBarBackgroundStroke.value = styleScaleBarBackgroundStrokeOutput.value = scaleBarBack.attr("stroke");
+      styleScaleBarBackgroundOpacityInput.value = styleScaleBarBackgroundOpacityOutput.value =
+        scaleBarBack.attr("opacity");
+      styleScaleBarBackgroundFillInput.value = styleScaleBarBackgroundFillOutput.value = scaleBarBack.attr("fill");
+      styleScaleBarBackgroundStrokeInput.value = styleScaleBarBackgroundStrokeOutput.value =
+        scaleBarBack.attr("stroke");
       styleScaleBarBackgroundStrokeWidth.value = scaleBarBack.attr("stroke-width");
       styleScaleBarBackgroundFilter.value = scaleBarBack.attr("filter");
       styleScaleBarBackgroundPaddingTop.value = scaleBarBack.attr("data-top");
@@ -416,13 +398,13 @@ function selectStyleElement() {
       styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
       styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
       styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
-      styleVignetteBlur.value = digit(maskRect.getAttribute("filter"));
+      styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
     }
   }
 }
 
 // Handle style inputs change
-styleGroupSelect.on("change", selectStyleElement);
+styleGroupSelect.addEventListener("change", selectStyleElement);
 
 function getEl() {
   const el = styleElementSelect.value;
@@ -431,46 +413,44 @@ function getEl() {
   else return svg.select("#" + el).select("#" + g);
 }
 
-styleFillInput.on("input", function () {
+styleFillInput.addEventListener("input", function () {
   styleFillOutput.value = this.value;
   getEl().attr("fill", this.value);
 });
 
-styleStrokeInput.on("input", function () {
+styleStrokeInput.addEventListener("input", function () {
   styleStrokeOutput.value = this.value;
   getEl().attr("stroke", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeWidthInput.on("input", e => {
-  getEl().attr("stroke-width", e.target.value);
+styleStrokeWidthInput.addEventListener("input", function () {
+  styleStrokeWidthOutput.value = this.value;
+  getEl().attr("stroke-width", +this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleLetterSpacingInput.on("input", e => {
-  getEl().attr("letter-spacing", e.target.value);
-});
-
-styleStrokeDasharrayInput.on("input", function () {
+styleStrokeDasharrayInput.addEventListener("input", function () {
   getEl().attr("stroke-dasharray", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleStrokeLinecapInput.on("change", function () {
+styleStrokeLinecapInput.addEventListener("change", function () {
   getEl().attr("stroke-linecap", this.value);
   if (styleElementSelect.value === "gridOverlay" && layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleOpacityInput.on("input", e => {
-  getEl().attr("opacity", e.target.value);
+styleOpacityInput.addEventListener("input", function () {
+  styleOpacityOutput.value = this.value;
+  getEl().attr("opacity", this.value);
 });
 
-styleFilterInput.on("change", function () {
+styleFilterInput.addEventListener("change", function () {
   if (styleGroupSelect.value === "ocean") return oceanLayers.attr("filter", this.value);
   getEl().attr("filter", this.value);
 });
 
-styleTextureInput.on("change", function () {
+styleTextureInput.addEventListener("change", function () {
   changeTexture(this.value);
 });
 
@@ -489,7 +469,7 @@ function updateTextureSelectValue(href) {
   }
 }
 
-styleTextureShiftX.on("input", function () {
+styleTextureShiftX.addEventListener("input", function () {
   texture.attr("data-x", this.value);
   texture
     .select("image")
@@ -497,7 +477,7 @@ styleTextureShiftX.on("input", function () {
     .attr("width", graphWidth - this.valueAsNumber);
 });
 
-styleTextureShiftY.on("input", function () {
+styleTextureShiftY.addEventListener("input", function () {
   texture.attr("data-y", this.value);
   texture
     .select("image")
@@ -505,17 +485,17 @@ styleTextureShiftY.on("input", function () {
     .attr("height", graphHeight - this.valueAsNumber);
 });
 
-styleClippingInput.on("change", function () {
+styleClippingInput.addEventListener("change", function () {
   getEl().attr("mask", this.value);
 });
 
-styleGridType.on("change", function () {
+styleGridType.addEventListener("change", function () {
   getEl().attr("type", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
   calculateFriendlyGridSize();
 });
 
-styleGridScale.on("input", function () {
+styleGridScale.addEventListener("input", function () {
   getEl().attr("scale", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
   calculateFriendlyGridSize();
@@ -527,52 +507,53 @@ function calculateFriendlyGridSize() {
   styleGridSizeFriendly.value = friendly;
 }
 
-styleGridShiftX.on("input", function () {
+styleGridShiftX.addEventListener("input", function () {
   getEl().attr("dx", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleGridShiftY.on("input", function () {
+styleGridShiftY.addEventListener("input", function () {
   getEl().attr("dy", this.value);
   if (layerIsOn("toggleGrid")) drawGrid();
 });
 
-styleRescaleMarkers.on("change", function () {
+styleRescaleMarkers.addEventListener("change", function () {
   markers.attr("rescale", +this.checked);
   invokeActiveZooming();
 });
 
-styleCoastlineAuto.on("change", function () {
+styleCoastlineAuto.addEventListener("change", function () {
   coastline.select("#sea_island").attr("auto-filter", +this.checked);
   styleFilter.style.display = this.checked ? "none" : "block";
   invokeActiveZooming();
 });
 
-styleOceanFill.on("input", function () {
+styleOceanFill.addEventListener("input", function () {
   oceanLayers.select("rect").attr("fill", this.value);
   styleOceanFillOutput.value = this.value;
 });
 
-styleOceanPattern.on("change", function () {
+styleOceanPattern.addEventListener("change", function () {
   byId("oceanicPattern")?.setAttribute("href", this.value);
 });
 
-styleOceanPatternOpacity.on("input", e => {
-  byId("oceanicPattern").setAttribute("opacity", e.target.value);
+styleOceanPatternOpacity.addEventListener("input", function () {
+  byId("oceanicPattern").setAttribute("opacity", this.value);
+  styleOceanPatternOpacityOutput.value = this.value;
 });
 
-outlineLayers.on("change", function () {
+outlineLayers.addEventListener("change", function () {
   oceanLayers.selectAll("path").remove();
   oceanLayers.attr("layers", this.value);
   OceanLayers();
 });
 
-styleHeightmapScheme.on("change", function () {
+styleHeightmapScheme.addEventListener("change", function () {
   getEl().attr("scheme", this.value);
   drawHeightmap();
 });
 
-openCreateHeightmapSchemeButton.on("click", function () {
+openCreateHeightmapSchemeButton.addEventListener("click", function () {
   // start with current scheme
   const scheme = getEl().attr("scheme");
   this.dataset.stops = scheme.startsWith("#")
@@ -691,97 +672,106 @@ openCreateHeightmapSchemeButton.on("click", function () {
   });
 });
 
-styleHeightmapRenderOcean.on("change", e => {
-  const checked = +e.target.checked;
-  getEl().attr("data-render", checked);
+styleHeightmapRenderOcean.addEventListener("change", function () {
+  getEl().attr("data-render", +this.checked);
   drawHeightmap();
 });
 
-styleHeightmapTerracing.on("input", e => {
-  getEl().attr("terracing", e.target.value);
+styleHeightmapTerracingInput.addEventListener("input", function () {
+  getEl().attr("terracing", this.value);
   drawHeightmap();
 });
 
-styleHeightmapSkip.on("input", e => {
-  getEl().attr("skip", e.target.value);
+styleHeightmapSkipInput.addEventListener("input", function () {
+  getEl().attr("skip", this.value);
   drawHeightmap();
 });
 
-styleHeightmapSimplification.on("input", e => {
-  getEl().attr("relax", e.target.value);
+styleHeightmapSimplificationInput.addEventListener("input", function () {
+  getEl().attr("relax", this.value);
   drawHeightmap();
 });
 
-styleHeightmapCurve.on("change", e => {
-  getEl().attr("curve", e.target.value);
+styleHeightmapCurve.addEventListener("change", function () {
+  getEl().attr("curve", this.value);
   drawHeightmap();
 });
 
-styleReliefSet.on("change", e => {
-  terrain.attr("set", e.target.value);
-  drawReliefIcons();
+styleReliefSet.addEventListener("change", function () {
+  terrain.attr("set", this.value);
+  ReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefSize.on("change", e => {
-  terrain.attr("size", e.target.value);
-  drawReliefIcons();
+styleReliefSizeInput.addEventListener("change", function () {
+  terrain.attr("size", this.value);
+  styleReliefSizeOutput.value = this.value;
+  ReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleReliefDensity.on("change", e => {
-  terrain.attr("density", e.target.value);
-  drawReliefIcons();
+styleReliefDensityInput.addEventListener("change", function () {
+  terrain.attr("density", this.value);
+  styleReliefDensityOutput.value = this.value;
+  ReliefIcons();
   if (!layerIsOn("toggleRelief")) toggleRelief();
 });
 
-styleTemperatureFillOpacityInput.on("input", e => {
-  temperature.attr("fill-opacity", e.target.value);
+styleTemperatureFillOpacityInput.addEventListener("input", function () {
+  temperature.attr("fill-opacity", this.value);
+  styleTemperatureFillOpacityOutput.value = this.value;
 });
 
-styleTemperatureFontSizeInput.on("input", e => {
-  temperature.attr("font-size", e.target.value + "px");
+styleTemperatureFontSizeInput.addEventListener("input", function () {
+  temperature.attr("font-size", this.value + "px");
+  styleTemperatureFontSizeOutput.value = this.value + "px";
 });
 
-styleTemperatureFillInput.on("input", e => {
-  temperature.attr("fill", e.target.value);
-  styleTemperatureFillOutput.value = e.target.value;
+styleTemperatureFillInput.addEventListener("input", function () {
+  temperature.attr("fill", this.value);
+  styleTemperatureFillOutput.value = this.value;
 });
 
-stylePopulationRuralStrokeInput.on("input", e => {
-  population.select("#rural").attr("stroke", e.target.value);
-  stylePopulationRuralStrokeOutput.value = e.target.value;
+stylePopulationRuralStrokeInput.addEventListener("input", function () {
+  population.select("#rural").attr("stroke", this.value);
+  stylePopulationRuralStrokeOutput.value = this.value;
 });
 
-stylePopulationUrbanStrokeInput.on("input", e => {
-  population.select("#urban").attr("stroke", e.target.value);
-  stylePopulationUrbanStrokeOutput.value = e.target.value;
+stylePopulationUrbanStrokeInput.addEventListener("input", function () {
+  population.select("#urban").attr("stroke", this.value);
+  stylePopulationUrbanStrokeOutput.value = this.value;
 });
 
-styleCompassSizeInput.on("input", shiftCompass);
-styleCompassShiftX.on("input", shiftCompass);
-styleCompassShiftY.on("input", shiftCompass);
+styleCompassSizeInput.addEventListener("input", function () {
+  styleCompassSizeOutput.value = this.value;
+  shiftCompass();
+});
+
+styleCompassShiftX.addEventListener("input", shiftCompass);
+styleCompassShiftY.addEventListener("input", shiftCompass);
 
 function shiftCompass() {
   const tr = `translate(${styleCompassShiftX.value} ${styleCompassShiftY.value}) scale(${styleCompassSizeInput.value})`;
   compass.select("use").attr("transform", tr);
 }
 
-styleLegendColItems.on("input", e => {
-  legend.select("#legendBox").attr("data-columns", e.target.value);
+styleLegendColItems.addEventListener("input", function () {
+  styleLegendColItemsOutput.value = this.value;
+  legend.select("#legendBox").attr("data-columns", this.value);
   redrawLegend();
 });
 
-styleLegendBack.on("input", e => {
-  styleLegendBackOutput.value = e.target.value;
-  legend.select("#legendBox").attr("fill", e.target.value);
+styleLegendBack.addEventListener("input", function () {
+  styleLegendBackOutput.value = this.value;
+  legend.select("#legendBox").attr("fill", this.value);
 });
 
-styleLegendOpacity.on("input", e => {
-  legend.select("#legendBox").attr("fill-opacity", e.target.value);
+styleLegendOpacity.addEventListener("input", function () {
+  styleLegendOpacityOutput.value = this.value;
+  legend.select("#legendBox").attr("fill-opacity", this.value);
 });
 
-styleSelectFont.on("change", changeFont);
+styleSelectFont.addEventListener("change", changeFont);
 function changeFont() {
   const family = styleSelectFont.value;
   getEl().attr("font-family", family);
@@ -789,11 +779,11 @@ function changeFont() {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
-styleShadowInput.on("input", function () {
+styleShadowInput.addEventListener("input", function () {
   getEl().style("text-shadow", this.value);
 });
 
-styleFontAdd.on("click", function () {
+styleFontAdd.addEventListener("click", function () {
   addFontNameInput.value = "";
   addFontURLInput.value = "";
 
@@ -830,22 +820,22 @@ styleFontAdd.on("click", function () {
   });
 });
 
-addFontMethod.on("change", function () {
+addFontMethod.addEventListener("change", function () {
   addFontURLInput.style.display = this.value === "fontURL" ? "inline" : "none";
 });
 
-styleFontSize.on("change", function () {
+styleFontSize.addEventListener("change", function () {
   changeFontSize(getEl(), +this.value);
 });
 
-styleFontPlus.on("click", function () {
-  const current = +styleFontSize.value || 12;
-  changeFontSize(getEl(), Math.min(current + 1, 999));
+styleFontPlus.addEventListener("click", function () {
+  const size = +getEl().attr("data-size") + 1;
+  changeFontSize(getEl(), Math.min(size, 999));
 });
 
-styleFontMinus.on("click", function () {
-  const current = +styleFontSize.value || 12;
-  changeFontSize(getEl(), Math.max(current - 1, 1));
+styleFontMinus.addEventListener("click", function () {
+  const size = +getEl().attr("data-size") - 1;
+  changeFontSize(getEl(), Math.max(size, 1));
 });
 
 function changeFontSize(el, size) {
@@ -866,16 +856,16 @@ function changeFontSize(el, size) {
   if (styleElementSelect.value === "legend") redrawLegend();
 }
 
-styleRadiusInput.on("change", function () {
+styleRadiusInput.addEventListener("change", function () {
   changeRadius(+this.value);
 });
 
-styleRadiusPlus.on("click", function () {
+styleRadiusPlus.addEventListener("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
   changeRadius(size);
 });
 
-styleRadiusMinus.on("click", function () {
+styleRadiusMinus.addEventListener("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
   changeRadius(size);
 });
@@ -897,16 +887,16 @@ function changeRadius(size, group) {
   changeIconSize(size * 2, g); // change also anchor icons
 }
 
-styleIconSizeInput.on("change", function () {
+styleIconSizeInput.addEventListener("change", function () {
   changeIconSize(+this.value);
 });
 
-styleIconSizePlus.on("click", function () {
+styleIconSizePlus.addEventListener("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 1.1, 2), 0.2);
   changeIconSize(size);
 });
 
-styleIconSizeMinus.on("click", function () {
+styleIconSizeMinus.addEventListener("click", function () {
   const size = Math.max(rn(getEl().attr("size") * 0.9, 2), 0.2);
   changeIconSize(size);
 });
@@ -931,58 +921,49 @@ function changeIconSize(size, group) {
   styleIconSizeInput.value = size;
 }
 
-styleStatesBodyOpacity.on("input", e => {
-  statesBody.attr("opacity", e.target.value);
+styleStatesBodyOpacity.addEventListener("input", function () {
+  styleStatesBodyOpacityOutput.value = this.value;
+  statesBody.attr("opacity", this.value);
 });
 
-styleStatesBodyFilter.on("change", function () {
+styleStatesBodyFilter.addEventListener("change", function () {
   statesBody.attr("filter", this.value);
 });
 
-styleStatesHaloWidth.on("input", e => {
-  const value = e.target.value;
-  statesHalo.attr("data-width", value).attr("stroke-width", value);
+styleStatesHaloWidth.addEventListener("input", function () {
+  styleStatesHaloWidthOutput.value = this.value;
+  statesHalo.attr("data-width", this.value).attr("stroke-width", this.value);
 });
 
-styleStatesHaloOpacity.on("input", e => {
-  statesHalo.attr("opacity", e.target.value);
+styleStatesHaloOpacity.addEventListener("input", function () {
+  styleStatesHaloOpacityOutput.value = this.value;
+  statesHalo.attr("opacity", this.value);
 });
 
-styleStatesHaloBlur.on("input", e => {
-  const value = Number(e.target.value);
-  const blur = value > 0 ? `blur(${value}px)` : null;
+styleStatesHaloBlur.addEventListener("input", function () {
+  styleStatesHaloBlurOutput.value = this.value;
+  const blur = +this.value > 0 ? `blur(${this.value}px)` : null;
   statesHalo.attr("filter", blur);
 });
 
-styleArmiesFillOpacity.on("input", e => {
-  armies.attr("fill-opacity", e.target.value);
+styleArmiesFillOpacity.addEventListener("input", function () {
+  armies.attr("fill-opacity", this.value);
+  styleArmiesFillOpacityOutput.value = this.value;
 });
 
-styleArmiesSize.on("input", e => {
-  const value = Number(e.target.value);
-  armies.attr("box-size", value).attr("font-size", value * 2);
-
+styleArmiesSize.addEventListener("input", function () {
+  armies.attr("box-size", this.value).attr("font-size", this.value * 2);
+  styleArmiesSizeOutput.value = this.value;
   armies.selectAll("g").remove(); // clear armies layer
   pack.states.forEach(s => {
     if (!s.i || s.removed || !s.military.length) return;
-    drawRegiments(s.military, s.i);
+    Military.drawRegiments(s.military, s.i);
   });
 });
 
-emblemsStateSizeInput.on("change", e => {
-  emblems.select("#stateEmblems").attr("data-size", e.target.value);
-  drawEmblems();
-});
-
-emblemsProvinceSizeInput.on("change", e => {
-  emblems.select("#provinceEmblems").attr("data-size", e.target.value);
-  drawEmblems();
-});
-
-emblemsBurgSizeInput.on("change", e => {
-  emblems.select("#burgEmblems").attr("data-size", e.target.value);
-  drawEmblems();
-});
+emblemsStateSizeInput.addEventListener("change", drawEmblems);
+emblemsProvinceSizeInput.addEventListener("change", drawEmblems);
+emblemsBurgSizeInput.addEventListener("change", drawEmblems);
 
 // request a URL to image to be used as a texture
 function textureProvideURL() {
@@ -1034,7 +1015,7 @@ Object.keys(vignettePresets).forEach(preset => {
   styleVignettePreset.options.add(new Option(preset, preset, false, false));
 });
 
-styleVignettePreset.on("change", function () {
+styleVignettePreset.addEventListener("change", function () {
   const attributes = JSON.parse(vignettePresets[this.value]);
 
   for (const selector in attributes) {
@@ -1048,7 +1029,7 @@ styleVignettePreset.on("change", function () {
 
   const vignette = byId("vignette");
   if (vignette) {
-    styleOpacityInput.value = vignette.getAttribute("opacity");
+    styleOpacityInput.value = styleOpacityOutput.value = vignette.getAttribute("opacity");
     styleFillInput.value = styleFillOutput.value = vignette.getAttribute("fill");
     styleFilterInput.value = vignette.getAttribute("filter");
   }
@@ -1062,39 +1043,40 @@ styleVignettePreset.on("change", function () {
     styleVignetteHeight.value = digit(maskRect.getAttribute("height"));
     styleVignetteRx.value = digit(maskRect.getAttribute("rx"));
     styleVignetteRy.value = digit(maskRect.getAttribute("ry"));
-    styleVignetteBlur.value = digit(maskRect.getAttribute("filter"));
+    styleVignetteBlur.value = styleVignetteBlurOutput.value = digit(maskRect.getAttribute("filter"));
   }
 });
 
-styleVignetteX.on("input", e => {
-  byId("vignette-rect")?.setAttribute("x", `${e.target.value}%`);
+styleVignetteX.addEventListener("input", function () {
+  byId("vignette-rect")?.setAttribute("x", `${this.value}%`);
 });
 
-styleVignetteWidth.on("input", e => {
-  byId("vignette-rect")?.setAttribute("width", `${e.target.value}%`);
+styleVignetteWidth.addEventListener("input", function () {
+  byId("vignette-rect")?.setAttribute("width", `${this.value}%`);
 });
 
-styleVignetteY.on("input", e => {
-  byId("vignette-rect")?.setAttribute("y", `${e.target.value}%`);
+styleVignetteY.addEventListener("input", function () {
+  byId("vignette-rect")?.setAttribute("y", `${this.value}%`);
 });
 
-styleVignetteHeight.on("input", e => {
-  byId("vignette-rect")?.setAttribute("height", `${e.target.value}%`);
+styleVignetteHeight.addEventListener("input", function () {
+  byId("vignette-rect")?.setAttribute("height", `${this.value}%`);
 });
 
-styleVignetteRx.on("input", e => {
-  byId("vignette-rect")?.setAttribute("rx", `${e.target.value}%`);
+styleVignetteRx.addEventListener("input", function () {
+  byId("vignette-rect")?.setAttribute("rx", `${this.value}%`);
 });
 
-styleVignetteRy.on("input", e => {
-  byId("vignette-rect")?.setAttribute("ry", `${e.target.value}%`);
+styleVignetteRy.addEventListener("input", function () {
+  byId("vignette-rect")?.setAttribute("ry", `${this.value}%`);
 });
 
-styleVignetteBlur.on("input", e => {
-  byId("vignette-rect")?.setAttribute("filter", `blur(${e.target.value}px)`);
+styleVignetteBlur.addEventListener("input", function () {
+  styleVignetteBlurOutput.value = this.value;
+  byId("vignette-rect")?.setAttribute("filter", `blur(${this.value}px)`);
 });
 
-styleScaleBar.on("input", function (event) {
+styleScaleBar.addEventListener("input", function (event) {
   const scaleBarBack = scaleBar.select("#scaleBarBack");
   if (!scaleBarBack.size()) return;
 
@@ -1105,9 +1087,9 @@ styleScaleBar.on("input", function (event) {
   else if (id === "styleScaleBarPositionX") scaleBar.attr("data-x", value);
   else if (id === "styleScaleBarPositionY") scaleBar.attr("data-y", value);
   else if (id === "styleScaleBarLabel") scaleBar.attr("data-label", value);
-  else if (id === "styleScaleBarBackgroundOpacity") scaleBarBack.attr("opacity", value);
-  else if (id === "styleScaleBarBackgroundFill") scaleBarBack.attr("fill", value);
-  else if (id === "styleScaleBarBackgroundStroke") scaleBarBack.attr("stroke", value);
+  else if (id === "styleScaleBarBackgroundOpacityInput") scaleBarBack.attr("opacity", value);
+  else if (id === "styleScaleBarBackgroundFillInput") scaleBarBack.attr("fill", value);
+  else if (id === "styleScaleBarBackgroundStrokeInput") scaleBarBack.attr("stroke", value);
   else if (id === "styleScaleBarBackgroundStrokeWidth") scaleBarBack.attr("stroke-width", value);
   else if (id === "styleScaleBarBackgroundFilter") scaleBarBack.attr("filter", value);
   else if (id === "styleScaleBarBackgroundPaddingTop") scaleBarBack.attr("data-top", value);
@@ -1174,7 +1156,7 @@ function updateElements() {
 }
 
 // GLOBAL FILTERS
-mapFilters.on("click", applyMapFilter);
+mapFilters.addEventListener("click", applyMapFilter);
 function applyMapFilter(event) {
   if (event.target.tagName !== "BUTTON") return;
   const button = event.target;
diff --git a/modules/ui/style-presets.js b/modules/ui/stylePresets.js
similarity index 95%
rename from modules/ui/style-presets.js
rename to modules/ui/stylePresets.js
index 01626205..adbf5c14 100644
--- a/modules/ui/style-presets.js
+++ b/modules/ui/stylePresets.js
@@ -10,7 +10,6 @@ const systemPresets = [
   "watercolor",
   "clean",
   "atlas",
-  "darkSeas",
   "cyberpunk",
   "night",
   "monochrome"
@@ -64,7 +63,7 @@ async function getStylePreset(desiredPreset) {
 
 async function fetchSystemPreset(preset) {
   try {
-    const res = await fetch(`./styles/${preset}.json?v=${VERSION}`);
+    const res = await fetch(`./styles/${preset}.json?v=${version}`);
     return await res.json();
   } catch (err) {
     throw new Error("Cannot fetch style preset", preset);
@@ -238,9 +237,6 @@ function addStylePreset() {
       ],
       "#ice": ["opacity", "fill", "stroke", "stroke-width", "filter"],
       "#emblems": ["opacity", "stroke-width", "filter"],
-      "#emblems > #stateEmblems": ["data-size"],
-      "#emblems > #provinceEmblems": ["data-size"],
-      "#emblems > #burgEmblems": ["data-size"],
       "#texture": ["opacity", "filter", "mask", "data-x", "data-y", "data-href"],
       "#zones": ["opacity", "stroke", "stroke-width", "stroke-dasharray", "stroke-linecap", "filter", "mask"],
       "#oceanLayers": ["filter", "layers"],
@@ -271,15 +267,7 @@ function addStylePreset() {
         "data-columns"
       ],
       "#legendBox": ["fill", "fill-opacity"],
-      "#burgLabels > #cities": [
-        "opacity",
-        "fill",
-        "text-shadow",
-        "letter-spacing",
-        "data-size",
-        "font-size",
-        "font-family"
-      ],
+      "#burgLabels > #cities": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"],
       "#burgIcons > #cities": [
         "opacity",
         "fill",
@@ -291,15 +279,7 @@ function addStylePreset() {
         "stroke-linecap"
       ],
       "#anchors > #cities": ["opacity", "fill", "size", "stroke", "stroke-width"],
-      "#burgLabels > #towns": [
-        "opacity",
-        "fill",
-        "text-shadow",
-        "letter-spacing",
-        "data-size",
-        "font-size",
-        "font-family"
-      ],
+      "#burgLabels > #towns": ["opacity", "fill", "text-shadow", "data-size", "font-size", "font-family"],
       "#burgIcons > #towns": [
         "opacity",
         "fill",
@@ -317,7 +297,6 @@ function addStylePreset() {
         "stroke",
         "stroke-width",
         "text-shadow",
-        "letter-spacing",
         "data-size",
         "font-size",
         "font-family",
@@ -329,7 +308,6 @@ function addStylePreset() {
         "stroke",
         "stroke-width",
         "text-shadow",
-        "letter-spacing",
         "data-size",
         "font-size",
         "font-family",
diff --git a/modules/ui/submap-tool.js b/modules/ui/submap-tool.js
deleted file mode 100644
index 1c992b7a..00000000
--- a/modules/ui/submap-tool.js
+++ /dev/null
@@ -1,97 +0,0 @@
-"use strict";
-
-function openSubmapTool() {
-  resetInputs();
-
-  $("#submapTool").dialog({
-    title: "Create a submap",
-    resizable: false,
-    width: "32em",
-    position: {my: "center", at: "center", of: "svg"},
-    buttons: {
-      Submap: function () {
-        closeDialogs();
-        generateSubmap();
-      },
-      Cancel: function () {
-        $(this).dialog("close");
-      }
-    }
-  });
-
-  if (modules.openSubmapTool) return;
-  modules.openSubmapTool = true;
-
-  function resetInputs() {
-    updateCellsNumber(byId("pointsInput").value);
-    byId("submapPointsInput").oninput = e => updateCellsNumber(e.target.value);
-
-    function updateCellsNumber(value) {
-      byId("submapPointsInput").value = value;
-      const cells = cellsDensityMap[value];
-      byId("submapPointsInput").dataset.cells = cells;
-      const output = byId("submapPointsFormatted");
-      output.value = cells / 1000 + "K";
-      output.style.color = getCellsDensityColor(cells);
-    }
-  }
-
-  function generateSubmap() {
-    INFO && console.group("generateSubmap");
-
-    const [x0, y0] = [Math.abs(viewX / scale), Math.abs(viewY / scale)]; // top-left corner
-    recalculateMapSize(x0, y0);
-
-    const submapPointsValue = byId("submapPointsInput").value;
-    const globalPointsValue = byId("pointsInput").value;
-    if (submapPointsValue !== globalPointsValue) changeCellsDensity(submapPointsValue);
-
-    const projection = (x, y) => [(x - x0) * scale, (y - y0) * scale];
-    const inverse = (x, y) => [x / scale + x0, y / scale + y0];
-
-    applyGraphSize();
-    fitMapToScreen();
-    resetZoom(0);
-    undraw();
-    Resample.process({projection, inverse, scale});
-
-    if (byId("submapRescaleBurgStyles").checked) rescaleBurgStyles(scale);
-    drawLayers();
-
-    INFO && console.groupEnd("generateSubmap");
-  }
-
-  function recalculateMapSize(x0, y0) {
-    const mapSize = +byId("mapSizeOutput").value;
-    byId("mapSizeOutput").value = byId("mapSizeInput").value = rn(mapSize / scale, 2);
-
-    const latT = mapCoordinates.latT / scale;
-    const latN = getLatitude(y0);
-    const latShift = (90 - latN) / (180 - latT);
-    byId("latitudeOutput").value = byId("latitudeInput").value = rn(latShift * 100, 2);
-
-    const lotT = mapCoordinates.lonT / scale;
-    const lonE = getLongitude(x0 + graphWidth / scale);
-    const lonShift = (180 - lonE) / (360 - lotT);
-    byId("longitudeOutput").value = byId("longitudeInput").value = rn(lonShift * 100, 2);
-
-    distanceScale = distanceScaleInput.value = rn(distanceScale / scale, 2);
-    populationRate = populationRateInput.value = rn(populationRate / scale, 2);
-  }
-
-  function rescaleBurgStyles(scale) {
-    const burgIcons = [...byId("burgIcons").querySelectorAll("g")];
-    for (const group of burgIcons) {
-      const newRadius = rn(minmax(group.getAttribute("size") * scale, 0.2, 10), 2);
-      changeRadius(newRadius, group.id);
-      const strokeWidth = group.attributes["stroke-width"];
-      strokeWidth.value = strokeWidth.value * scale;
-    }
-
-    const burgLabels = [...byId("burgLabels").querySelectorAll("g")];
-    for (const group of burgLabels) {
-      const size = +group.dataset.size;
-      group.dataset.size = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
-    }
-  }
-}
diff --git a/modules/ui/submap.js b/modules/ui/submap.js
new file mode 100644
index 00000000..0341f8af
--- /dev/null
+++ b/modules/ui/submap.js
@@ -0,0 +1,354 @@
+"use strict";
+// UI elements for submap generation
+
+window.UISubmap = (function () {
+  byId("submapPointsInput").addEventListener("input", function () {
+    const output = byId("submapPointsOutputFormatted");
+    const cells = cellsDensityMap[+this.value] || 1000;
+    this.dataset.cells = cells;
+    output.value = getCellsDensityValue(cells);
+    output.style.color = getCellsDensityColor(cells);
+  });
+
+  byId("submapScaleInput").addEventListener("input", function (event) {
+    const exp = Math.pow(1.1, +event.target.value);
+    byId("submapScaleOutput").value = rn(exp, 2);
+  });
+
+  byId("submapAngleInput").addEventListener("input", function (event) {
+    byId("submapAngleOutput").value = event.target.value;
+  });
+
+  const $previewBox = byId("submapPreview");
+  const $scaleInput = byId("submapScaleInput");
+  const $shiftX = byId("submapShiftX");
+  const $shiftY = byId("submapShiftY");
+
+  function openSubmapMenu() {
+    $("#submapOptionsDialog").dialog({
+      title: "Create a submap",
+      resizable: false,
+      position: {my: "center", at: "center", of: "svg"},
+      buttons: {
+        Submap: function () {
+          $(this).dialog("close");
+          generateSubmap();
+        },
+        Cancel: function () {
+          $(this).dialog("close");
+        }
+      }
+    });
+  }
+
+  const getTransformInput = _ => ({
+    angle: (+byId("submapAngleInput").value / 180) * Math.PI,
+    shiftX: +byId("submapShiftX").value,
+    shiftY: +byId("submapShiftY").value,
+    ratio: +byId("submapScaleInput").value,
+    mirrorH: byId("submapMirrorH").checked,
+    mirrorV: byId("submapMirrorV").checked
+  });
+
+  async function openResampleMenu() {
+    resetZoom(0);
+
+    byId("submapAngleInput").value = 0;
+    byId("submapAngleOutput").value = "0";
+    byId("submapScaleOutput").value = 1;
+    byId("submapMirrorH").checked = false;
+    byId("submapMirrorV").checked = false;
+    $scaleInput.value = 0;
+    $shiftX.value = 0;
+    $shiftY.value = 0;
+
+    const w = Math.min(400, window.innerWidth * 0.5);
+    const previewScale = w / graphWidth;
+    const h = graphHeight * previewScale;
+    $previewBox.style.width = w + "px";
+    $previewBox.style.height = h + "px";
+
+    // handle mouse input
+    const dispatchInput = e => e.dispatchEvent(new Event("input", {bubbles: true}));
+
+    // mouse wheel
+    $previewBox.onwheel = e => {
+      $scaleInput.value = $scaleInput.valueAsNumber - Math.sign(e.deltaY);
+      dispatchInput($scaleInput);
+    };
+
+    // mouse drag
+    let mouseIsDown = false,
+      mouseX = 0,
+      mouseY = 0;
+    $previewBox.onmousedown = e => {
+      mouseIsDown = true;
+      mouseX = $shiftX.value - e.clientX / previewScale;
+      mouseY = $shiftY.value - e.clientY / previewScale;
+    };
+    $previewBox.onmouseup = _ => (mouseIsDown = false);
+    $previewBox.onmouseleave = _ => (mouseIsDown = false);
+    $previewBox.onmousemove = e => {
+      if (!mouseIsDown) return;
+      e.preventDefault();
+      $shiftX.value = Math.round(mouseX + e.clientX / previewScale);
+      $shiftY.value = Math.round(mouseY + e.clientY / previewScale);
+      dispatchInput($shiftX);
+      // dispatchInput($shiftY); // not needed X bubbles anyway
+    };
+
+    $("#resampleDialog").dialog({
+      title: "Transform map",
+      resizable: false,
+      position: {my: "center", at: "center", of: "svg"},
+      buttons: {
+        Transform: function () {
+          $(this).dialog("close");
+          resampleCurrentMap();
+        },
+        Cancel: function () {
+          $(this).dialog("close");
+        }
+      }
+    });
+
+    // use double resolution for PNG to get sharper image
+    const $preview = await loadPreview($previewBox, w * 2, h * 2);
+    // could be done with SVG. Faster to load, slower to use.
+    // const $preview = await loadPreviewSVG($previewBox, w, h);
+    $preview.style.position = "absolute";
+    $preview.style.width = w + "px";
+    $preview.style.height = h + "px";
+
+    byId("resampleDialog").oninput = event => {
+      const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
+      const scale = Math.pow(1.1, ratio);
+      const transformStyle = `
+        translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
+        scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
+        rotate(${angle}rad)
+      `;
+
+      $preview.style.transform = transformStyle;
+      $preview.style["transform-origin"] = "center";
+      event.stopPropagation();
+    };
+  }
+
+  async function loadPreview($container, w, h) {
+    const url = await getMapURL("png", {
+      globe: false,
+      noWater: true,
+      fullMap: true,
+      noLabels: true,
+      noScaleBar: true,
+      noIce: true
+    });
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    canvas.width = w;
+    canvas.height = h;
+    const img = new Image();
+    img.src = url;
+    img.onload = function () {
+      ctx.drawImage(img, 0, 0, w, h);
+    };
+    $container.textContent = "";
+    $container.appendChild(canvas);
+    return canvas;
+  }
+
+  // currently unused alternative to PNG version
+  async function loadPreviewSVG($container, w, h) {
+    $container.innerHTML = /*html*/ `
+      <svg id="submapPreviewSVG" viewBox="0 0 ${graphWidth} ${graphHeight}">
+        <rect width="100%" height="100%" fill="${byId("styleOceanFill").value}" />
+        <rect fill="url(#oceanic)" width="100%" height="100%" />
+        <use href="#map"></use>
+      </svg>
+    `;
+    return byId("submapPreviewSVG");
+  }
+
+  // Resample the whole map to different cell resolution or shape
+  const resampleCurrentMap = debounce(function () {
+    WARN && console.warn("Resampling current map");
+    const cellNumId = +byId("submapPointsInput").value;
+    if (!cellsDensityMap[cellNumId]) return console.error("Unknown cell number!");
+
+    const {angle, shiftX, shiftY, ratio, mirrorH, mirrorV} = getTransformInput();
+
+    const [cx, cy] = [graphWidth / 2, graphHeight / 2];
+    const rot = alfa => (x, y) =>
+      [
+        (x - cx) * Math.cos(alfa) - (y - cy) * Math.sin(alfa) + cx,
+        (y - cy) * Math.cos(alfa) + (x - cx) * Math.sin(alfa) + cy
+      ];
+    const shift = (dx, dy) => (x, y) => [x + dx, y + dy];
+    const scale = r => (x, y) => [(x - cx) * r + cx, (y - cy) * r + cy];
+    const flipH = (x, y) => [-x + 2 * cx, y];
+    const flipV = (x, y) => [x, -y + 2 * cy];
+    const app = (f, g) => (x, y) => f(...g(x, y));
+    const id = (x, y) => [x, y];
+
+    let projection = id;
+    let inverse = id;
+
+    if (angle) [projection, inverse] = [rot(angle), rot(-angle)];
+    if (ratio)
+      [projection, inverse] = [
+        app(scale(Math.pow(1.1, ratio)), projection),
+        app(inverse, scale(Math.pow(1.1, -ratio)))
+      ];
+    if (mirrorH) [projection, inverse] = [app(flipH, projection), app(inverse, flipH)];
+    if (mirrorV) [projection, inverse] = [app(flipV, projection), app(inverse, flipV)];
+    if (shiftX || shiftY) {
+      projection = app(shift(shiftX, shiftY), projection);
+      inverse = app(inverse, shift(-shiftX, -shiftY));
+    }
+
+    changeCellsDensity(cellNumId);
+    startResample({
+      lockMarkers: false,
+      lockBurgs: false,
+      depressRivers: false,
+      addLakesInDepressions: false,
+      promoteTowns: false,
+      smoothHeightMap: false,
+      rescaleStyles: false,
+      scale: 1,
+      projection,
+      inverse
+    });
+  }, 1000);
+
+  // Create submap from the current map. Submap limits defined by the current window size (canvas viewport)
+  const generateSubmap = debounce(function () {
+    WARN && console.warn("Resampling current map");
+    closeDialogs("#worldConfigurator, #options3d");
+    const checked = id => Boolean(byId(id).checked);
+
+    // Create projection func from current zoom extents
+    const [[x0, y0], [x1, y1]] = getViewBoxExtent();
+    const origScale = scale;
+
+    const options = {
+      lockMarkers: checked("submapLockMarkers"),
+      lockBurgs: checked("submapLockBurgs"),
+
+      depressRivers: checked("submapDepressRivers"),
+      addLakesInDepressions: checked("submapAddLakeInDepression"),
+      promoteTowns: checked("submapPromoteTowns"),
+      rescaleStyles: checked("submapRescaleStyles"),
+      smoothHeightMap: scale > 2,
+      inverse: (x, y) => [x / origScale + x0, y / origScale + y0],
+      projection: (x, y) => [(x - x0) * origScale, (y - y0) * origScale],
+      scale: origScale
+    };
+
+    // converting map position on the planet
+    const mapSizeOutput = byId("mapSizeOutput");
+    const latitudeOutput = byId("latitudeOutput");
+    const latN = 90 - ((180 - (mapSizeInput.value / 100) * 180) * latitudeOutput.value) / 100;
+    const newLatN = latN - ((y0 / graphHeight) * mapSizeOutput.value * 180) / 100;
+    mapSizeOutput.value /= scale;
+    latitudeOutput.value = ((90 - newLatN) / (180 - (mapSizeOutput.value / 100) * 180)) * 100;
+    byId("mapSizeInput").value = mapSizeOutput.value;
+    byId("latitudeInput").value = latitudeOutput.value;
+
+    // fix scale
+    distanceScale =
+      distanceScaleInput.value =
+      distanceScaleOutput.value =
+        rn((distanceScale = distanceScaleOutput.value / scale), 2);
+
+    populationRateInput.value = populationRateOutput.value = rn(
+      (populationRate = populationRateOutput.value / scale),
+      2
+    );
+
+    customization = 0;
+    startResample(options);
+  }, 1000);
+
+  async function startResample(options) {
+    // Do model changes with Submap.resample then do view changes if needed
+    resetZoom(0);
+    let oldstate = {
+      grid: deepCopy(grid),
+      pack: deepCopy(pack),
+      notes: deepCopy(notes),
+      seed,
+      graphWidth,
+      graphHeight
+    };
+    undraw();
+    try {
+      const oldScale = scale;
+      await Submap.resample(oldstate, options);
+      if (options.promoteTowns) {
+        const groupName = "largetowns";
+        moveAllBurgsToGroup("towns", groupName);
+        changeRadius(rn(oldScale * 0.8, 2), groupName);
+        changeFontSize(svg.select(`#labels #${groupName}`), rn(oldScale * 2, 2));
+        invokeActiveZooming();
+      }
+      if (options.rescaleStyles) changeStyles(oldScale);
+    } catch (error) {
+      showSubmapErrorHandler(error);
+    }
+
+    oldstate = null; // destroy old state to free memory
+
+    restoreLayers();
+    if (ThreeD.options.isOn) ThreeD.redraw();
+    if ($("#worldConfigurator").is(":visible")) editWorld();
+  }
+
+  function changeStyles(scale) {
+    // resize burgIcons
+    const burgIcons = [...byId("burgIcons").querySelectorAll("g")];
+    for (const bi of burgIcons) {
+      const newRadius = rn(minmax(bi.getAttribute("size") * scale, 0.2, 10), 2);
+      changeRadius(newRadius, bi.id);
+      const swAttr = bi.attributes["stroke-width"];
+      swAttr.value = +swAttr.value * scale;
+    }
+
+    // burglabels
+    const burgLabels = [...byId("burgLabels").querySelectorAll("g")];
+    for (const bl of burgLabels) {
+      const size = +bl.dataset["size"];
+      bl.dataset["size"] = Math.max(rn((size + size / scale) / 2, 2), 1) * scale;
+    }
+
+    // emblems
+    const emblemMod = minmax((scale - 1) * 0.3 + 1, 0.5, 5);
+    emblemsStateSizeInput.value = minmax(+emblemsStateSizeInput.value * emblemMod, 0.5, 5);
+    emblemsProvinceSizeInput.value = minmax(+emblemsProvinceSizeInput.value * emblemMod, 0.5, 5);
+    emblemsBurgSizeInput.value = minmax(+emblemsBurgSizeInput.value * emblemMod, 0.5, 5);
+    drawEmblems();
+  }
+
+  function showSubmapErrorHandler(error) {
+    ERROR && console.error(error);
+    clearMainTip();
+
+    alertMessage.innerHTML = /* html */ `Map resampling failed: <br />You may retry after clearing stored data or contact us at discord.
+      <p id="errorBox">${parseError(error)}</p>`;
+    $("#alert").dialog({
+      resizable: false,
+      title: "Resampling error",
+      width: "32em",
+      buttons: {
+        Ok: function () {
+          $(this).dialog("close");
+        }
+      },
+      position: {my: "center", at: "center", of: "svg"}
+    });
+  }
+
+  return {openSubmapMenu, openResampleMenu};
+})();
diff --git a/modules/ui/temperature-graph.js b/modules/ui/temperature-graph.js
index 4d4411f1..c025b700 100644
--- a/modules/ui/temperature-graph.js
+++ b/modules/ui/temperature-graph.js
@@ -47,13 +47,11 @@ function showBurgTemperatureGraph(id) {
 
   // Standard deviation for average temperature for the year from [0, 1] to [min, max]
   const yearSig = lstOut[0] * 62.9466411977018 + 0.28613807855649165;
-
   // Standard deviation for the difference between the minimum and maximum temperatures for the year
   const yearDelTmpSig =
     lstOut[1] * 13.541688670361175 + 0.1414213562373084 > yearSig
       ? yearSig
       : lstOut[1] * 13.541688670361175 + 0.1414213562373084;
-
   // Expected value for the difference between the minimum and maximum temperatures for the year
   const yearDelTmpMu = lstOut[2] * 15.266666666666667 + 0.6416666666666663;
 
@@ -62,7 +60,7 @@ function showBurgTemperatureGraph(id) {
   const minT = burgTemp - Math.max(yearSig + delT, 15);
   const maxT = burgTemp + (burgTemp - minT);
 
-  const chartWidth = Math.max(window.innerWidth / 2, 520);
+  const chartWidth = Math.max(window.innerWidth / 2, 580);
   const chartHeight = 300;
 
   // drawing starting point from top-left (y = 0) of SVG
@@ -109,9 +107,9 @@ function showBurgTemperatureGraph(id) {
   });
 
   drawGraph();
-
   $("#alert").dialog({
-    title: "Average temperature in " + b.name,
+    title: "Annual temperature in " + b.name,
+    width: "auto",
     position: {my: "center", at: "center", of: "svg"}
   });
 
diff --git a/modules/ui/tools.js b/modules/ui/tools.js
index 22c1aec8..65ffb29c 100644
--- a/modules/ui/tools.js
+++ b/modules/ui/tools.js
@@ -3,7 +3,7 @@
 // module to control the Tools options (click to edit, to re-geenerate, tp add)
 
 toolsContent.addEventListener("click", function (event) {
-  if (customization) return tip("Please exit the customization mode first", false, "error");
+  if (customization) return tip("Please exit the customization mode first", false, "warning");
   if (!["BUTTON", "I"].includes(event.target.tagName)) return;
   const button = event.target.id;
 
@@ -70,16 +70,14 @@ toolsContent.addEventListener("click", function (event) {
   else if (button === "addRoute") createRoute();
   else if (button === "addMarker") toggleAddMarker();
   // click to create a new map buttons
-  else if (button === "openSubmapTool") openSubmapTool();
-  else if (button === "openTransformTool") openTransformTool();
+  else if (button === "openSubmapMenu") UISubmap.openSubmapMenu();
+  else if (button === "openResampleMenu") UISubmap.openResampleMenu();
 });
 
 function processFeatureRegeneration(event, button) {
-  if (button === "regenerateStateLabels") {
-    $("#labels").fadeIn();
-    drawStateLabels();
-  } else if (button === "regenerateReliefIcons") {
-    drawReliefIcons();
+  if (button === "regenerateStateLabels") drawStateLabels();
+  else if (button === "regenerateReliefIcons") {
+    ReliefIcons();
     if (!layerIsOn("toggleRelief")) toggleRelief();
   } else if (button === "regenerateRoutes") {
     regenerateRoutes();
@@ -128,14 +126,14 @@ function regenerateRoutes() {
 
 function regenerateRivers() {
   Rivers.generate();
+  Lakes.defineGroup();
   Rivers.specify();
-  Features.specify();
-  if (layerIsOn("toggleRivers")) drawRivers();
+  if (!layerIsOn("toggleRivers")) toggleRivers();
+  else drawRivers();
 }
 
 function recalculatePopulation() {
   rankCells();
-
   pack.burgs.forEach(b => {
     if (!b.i || b.removed || b.lock) return;
     const i = b.cell;
@@ -145,8 +143,6 @@ function recalculatePopulation() {
     if (b.port) b.population = b.population * 1.3; // increase port population
     b.population = rn(b.population * gauss(2, 3, 0.6, 20, 3), 3);
   });
-
-  layerIsOn("togglePopulation") ? drawPopulation() : togglePopulation();
 }
 
 function regenerateStates() {
@@ -156,14 +152,12 @@ function regenerateStates() {
   pack.states = newStates;
   BurgsAndStates.expandStates();
   BurgsAndStates.normalizeStates();
-  BurgsAndStates.getPoles();
   BurgsAndStates.collectStatistics();
   BurgsAndStates.assignColors();
   BurgsAndStates.generateCampaigns();
   BurgsAndStates.generateDiplomacy();
   BurgsAndStates.defineStateForms();
-  Provinces.generate(true);
-  Provinces.getPoles();
+  BurgsAndStates.generateProvinces(true);
 
   layerIsOn("toggleStates") ? drawStates() : toggleStates();
   layerIsOn("toggleBorders") ? drawBorders() : toggleBorders();
@@ -173,16 +167,16 @@ function regenerateStates() {
   Military.generate();
   if (layerIsOn("toggleEmblems")) drawEmblems();
 
-  if (byId("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
-  if (byId("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
-  if (byId("militaryOverviewRefresh")?.offsetParent) militaryOverviewRefresh.click();
+  if (document.getElementById("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
+  if (document.getElementById("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
+  if (document.getElementById("militaryOverviewRefresh")?.offsetParent) militaryOverviewRefresh.click();
 }
 
 function recreateStates() {
   const localSeed = generateSeed();
   Math.random = aleaPRNG(localSeed);
 
-  const statesCount = +byId("statesNumber").value;
+  const statesCount = +regionsOutput.value;
   if (!statesCount) {
     tip(`<i>States Number</i> option value is zero. No counties are generated`, false, "error");
     return null;
@@ -204,7 +198,7 @@ function recreateStates() {
   const lockedStatesIds = lockedStates.map(s => s.i);
   const lockedStatesCapitals = lockedStates.map(s => s.capital);
 
-  if (validStates.length && lockedStates.length === validStates.length) {
+  if (lockedStates.length === validStates.length) {
     tip("Unable to regenerate as all states are locked", false, "error");
     return null;
   }
@@ -323,7 +317,7 @@ function recreateStates() {
       : pack.cultures[culture].type === "Nomadic"
       ? "Generic"
       : pack.cultures[culture].type;
-    const expansionism = rn(Math.random() * byId("sizeVariety").value + 1, 1);
+    const expansionism = rn(Math.random() * powerInput.value + 1, 1);
 
     const cultureType = pack.cultures[culture].type;
     const coa = COA.generate(capital.coa, 0.3, null, cultureType);
@@ -338,11 +332,9 @@ function recreateStates() {
 function regenerateProvinces() {
   unfog();
 
-  Provinces.generate(true, true);
-  Provinces.getPoles();
-
-  if (layerIsOn("toggleBorders")) drawBorders();
-  layerIsOn("toggleProvinces") ? drawProvinces() : toggleProvinces();
+  BurgsAndStates.generateProvinces(true, true);
+  drawBorders();
+  if (layerIsOn("toggleProvinces")) drawProvinces();
 
   // remove emblems
   document.querySelectorAll("[id^=provinceCOA]").forEach(el => el.remove());
@@ -445,18 +437,16 @@ function regenerateBurgs() {
 
   BurgsAndStates.specifyBurgs();
   BurgsAndStates.defineBurgFeatures();
+  BurgsAndStates.drawBurgs();
   regenerateRoutes();
 
-  drawBurgIcons();
-  drawBurgLabels();
-
   // remove emblems
   document.querySelectorAll("[id^=burgCOA]").forEach(el => el.remove());
   emblems.selectAll("use").remove();
   if (layerIsOn("toggleEmblems")) drawEmblems();
 
-  if (byId("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
-  if (byId("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
+  if (document.getElementById("burgsOverviewRefresh")?.offsetParent) burgsOverviewRefresh.click();
+  if (document.getElementById("statesEditorRefresh")?.offsetParent) statesEditorRefresh.click();
 }
 
 function regenerateEmblems() {
@@ -508,13 +498,13 @@ function regenerateEmblems() {
     province.coa.shield = COA.getShield(culture, province.state);
   });
 
-  layerIsOn("toggleEmblems") ? drawEmblems() : toggleEmblems();
+  if (layerIsOn("toggleEmblems")) drawEmblems(); // redrawEmblems
 }
 
 function regenerateReligions() {
   Religions.generate();
-
-  layerIsOn("toggleReligions") ? drawReligions() : toggleReligions();
+  if (!layerIsOn("toggleReligions")) toggleReligions();
+  else drawReligions();
   refreshAllEditors();
 }
 
@@ -523,17 +513,15 @@ function regenerateCultures() {
   Cultures.expand();
   BurgsAndStates.updateCultures();
   Religions.updateCultures();
-
-  layerIsOn("toggleCultures") ? drawCultures() : toggleCultures();
+  if (!layerIsOn("toggleCultures")) toggleCultures();
+  else drawCultures();
   refreshAllEditors();
 }
 
 function regenerateMilitary() {
   Military.generate();
-  if (layerIsOn("toggleMilitary")) drawMilitary();
-  else toggleMilitary();
-
-  if (byId("militaryOverviewRefresh").offsetParent) militaryOverviewRefresh.click();
+  if (!layerIsOn("toggleMilitary")) toggleMilitary();
+  if (document.getElementById("militaryOverviewRefresh").offsetParent) militaryOverviewRefresh.click();
 }
 
 function regenerateIce() {
@@ -546,7 +534,7 @@ function regenerateMarkers() {
   Markers.regenerate();
   turnButtonOn("toggleMarkers");
   drawMarkers();
-  if (byId("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
+  if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
 }
 
 function regenerateZones(event) {
@@ -557,9 +545,10 @@ function regenerateZones(event) {
   else addNumberOfZones(gauss(1, 0.5, 0.6, 5, 2));
 
   function addNumberOfZones(number) {
-    Zones.generate(number);
-    if (byId("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click();
-    if (layerIsOn("toggleZones")) drawZones();
+    zones.selectAll("g").remove(); // remove existing zones
+    addZones(number);
+    if (document.getElementById("zonesEditorRefresh").offsetParent) zonesEditorRefresh.click();
+    if (!layerIsOn("toggleZones")) toggleZones();
   }
 }
 
@@ -570,7 +559,7 @@ function unpressClickToAddButton() {
 }
 
 function toggleAddLabel() {
-  const pressed = byId("addLabel").classList.contains("pressed");
+  const pressed = document.getElementById("addLabel").classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
     return;
@@ -618,10 +607,8 @@ function addLabelOnClick() {
   group.classed("hidden", false);
   group
     .append("text")
-    .attr("text-rendering", "optimizeSpeed")
     .attr("id", id)
     .append("textPath")
-    .attr("text-rendering", "optimizeSpeed")
     .attr("xlink:href", "#textPath_" + id)
     .attr("startOffset", "50%")
     .attr("font-size", "100%")
@@ -640,22 +627,22 @@ function addLabelOnClick() {
 
 function toggleAddBurg() {
   unpressClickToAddButton();
-  byId("addBurgTool").classList.add("pressed");
+  document.getElementById("addBurgTool").classList.add("pressed");
   overviewBurgs();
-  byId("addNewBurg").click();
+  document.getElementById("addNewBurg").click();
 }
 
 function toggleAddRiver() {
-  const pressed = byId("addRiver").classList.contains("pressed");
+  const pressed = document.getElementById("addRiver").classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
-    byId("addNewRiver").classList.remove("pressed");
+    document.getElementById("addNewRiver").classList.remove("pressed");
     return;
   }
 
   addFeature.querySelectorAll("button.pressed").forEach(b => b.classList.remove("pressed"));
   addRiver.classList.add("pressed");
-  byId("addNewRiver").classList.add("pressed");
+  document.getElementById("addNewRiver").classList.add("pressed");
   closeDialogs(".stable");
   viewbox.style("cursor", "crosshair").on("click", addRiverOnClick);
   tip("Click on map to place new river or extend an existing one. Hold Shift to place multiple rivers", true, "warn");
@@ -670,15 +657,28 @@ function addRiverOnClick() {
   if (cells.h[i] < 20) return tip("Cannot create river in water cell", false, "error");
   if (cells.b[i]) return;
 
+  const {
+    alterHeights,
+    resolveDepressions,
+    addMeandering,
+    getRiverPath,
+    getBasin,
+    getName,
+    getType,
+    getWidth,
+    getOffset,
+    getApproximateLength,
+    getNextId
+  } = Rivers;
   const riverCells = [];
-  let riverId = Rivers.getNextId(rivers);
+  let riverId = getNextId(rivers);
   let parent = riverId;
 
   const initialFlux = grid.cells.prec[cells.g[i]];
   cells.fl[i] = initialFlux;
 
-  const h = Rivers.alterHeights();
-  Rivers.resolveDepressions(h);
+  const h = alterHeights();
+  resolveDepressions(h);
 
   while (i) {
     cells.r[i] = riverId;
@@ -728,7 +728,7 @@ function addRiverOnClick() {
     }
 
     // continue old river
-    byId("river" + oldRiverId)?.remove();
+    document.getElementById("river" + oldRiverId)?.remove();
     riverCells.forEach(i => (cells.r[i] = oldRiverId));
     oldRiverCells.forEach(cell => {
       if (h[cell] > h[min]) {
@@ -752,19 +752,11 @@ function addRiverOnClick() {
   const defaultWidthFactor = rn(1 / (pointsInput.dataset.cells / 10000) ** 0.25, 2);
   const widthFactor =
     river?.widthFactor || (!parent || parent === riverId ? defaultWidthFactor * 1.2 : defaultWidthFactor);
-  const sourceWidth = river?.sourceWidth || Rivers.getSourceWidth(cells.fl[source]);
-  const meanderedPoints = Rivers.addMeandering(riverCells);
+  const meanderedPoints = addMeandering(riverCells);
 
   const discharge = cells.fl[mouth]; // m3 in second
-  const length = Rivers.getApproximateLength(meanderedPoints);
-  const width = Rivers.getWidth(
-    Rivers.getOffset({
-      flux: discharge,
-      pointIndex: meanderedPoints.length,
-      widthFactor,
-      startingWidth: sourceWidth
-    })
-  );
+  const length = getApproximateLength(meanderedPoints);
+  const width = getWidth(getOffset(discharge, meanderedPoints.length, widthFactor));
 
   if (river) {
     river.source = source;
@@ -773,9 +765,9 @@ function addRiverOnClick() {
     river.width = width;
     river.cells = riverCells;
   } else {
-    const basin = Rivers.getBasin(parent);
-    const name = Rivers.getName(mouth);
-    const type = Rivers.getType({i: riverId, length, parent});
+    const basin = getBasin(parent);
+    const name = getName(mouth);
+    const type = getType({i: riverId, length, parent});
 
     rivers.push({
       i: riverId,
@@ -785,7 +777,7 @@ function addRiverOnClick() {
       length,
       width,
       widthFactor,
-      sourceWidth,
+      sourceWidth: 0,
       parent,
       cells: riverCells,
       basin,
@@ -795,7 +787,8 @@ function addRiverOnClick() {
   }
 
   // render river
-  const path = Rivers.getRiverPath(meanderedPoints, widthFactor, sourceWidth);
+  lineGen.curve(d3.curveCatmullRom.alpha(0.1));
+  const path = getRiverPath(meanderedPoints, widthFactor);
   const id = "river" + riverId;
   const riversG = viewbox.select("#rivers");
   riversG.append("path").attr("id", id).attr("d", path);
@@ -803,13 +796,13 @@ function addRiverOnClick() {
   if (d3.event.shiftKey === false) {
     Lakes.cleanupLakeData();
     unpressClickToAddButton();
-    byId("addNewRiver").classList.remove("pressed");
+    document.getElementById("addNewRiver").classList.remove("pressed");
     if (addNewRiver.offsetParent) riversOverviewRefresh.click();
   }
 }
 
 function toggleAddMarker() {
-  const pressed = byId("addMarker")?.classList.contains("pressed");
+  const pressed = document.getElementById("addMarker")?.classList.contains("pressed");
   if (pressed) {
     unpressClickToAddButton();
     return;
@@ -837,7 +830,7 @@ function addMarkerOnClick() {
   const isMarkerSelected = markers.length && elSelected?.node()?.parentElement?.id === "markers";
   const selectedMarker = isMarkerSelected ? markers.find(marker => marker.i === +elSelected.attr("id").slice(6)) : null;
 
-  const selectedType = byId("addedMarkerType").value;
+  const selectedType = document.getElementById("addedMarkerType").value;
   const selectedConfig = Markers.getConfig().find(({type}) => type === selectedType);
 
   const baseMarker = selectedMarker || selectedConfig || {icon: "❓"};
@@ -847,13 +840,13 @@ function addMarkerOnClick() {
     selectedConfig.add("marker" + marker.i, cell);
   }
 
-  const markersElement = byId("markers");
+  const markersElement = document.getElementById("markers");
   const rescale = +markersElement.getAttribute("rescale");
   markersElement.insertAdjacentHTML("beforeend", drawMarker(marker, rescale));
 
   if (d3.event.shiftKey === false) {
-    byId("markerAdd").classList.remove("pressed");
-    byId("markersAddFromOverview").classList.remove("pressed");
+    document.getElementById("markerAdd").classList.remove("pressed");
+    document.getElementById("markersAddFromOverview").classList.remove("pressed");
     unpressClickToAddButton();
   }
 }
@@ -862,47 +855,33 @@ function configMarkersGeneration() {
   drawConfigTable();
 
   function drawConfigTable() {
+    const {markers} = pack;
     const config = Markers.getConfig();
-
-    const headers = /* html */ `<thead style='font-weight:bold'><tr>
+    const headers = `<thead style='font-weight:bold'><tr>
       <td data-tip="Marker type name">Type</td>
       <td data-tip="Marker icon">Icon</td>
       <td data-tip="Marker number multiplier">Multiplier</td>
       <td data-tip="Number of markers of that type on the current map">Number</td>
     </tr></thead>`;
-
-    const lines = config.map(({type, icon, multiplier}) => {
-      const isExternal = icon.startsWith("http") || icon.startsWith("data:image");
-
-      return /* html */ `<tr>
-        <td><input class="type" value="${type}" /></td>
+    const lines = config.map(({type, icon, multiplier}, index) => {
+      const inputId = `markerIconInput${index}`;
+      return `<tr>
+        <td><input value="${type}" /></td>
         <td style="position: relative">
-          <img class="image" src="${isExternal ? icon : ""}" ${
-        isExternal ? "" : "hidden"
-      } style="width:1.2em; height:1.2em; vertical-align: middle;">
-          <span class="emoji" style="font-size:1.2em">${isExternal ? "" : icon}</span>
-          <button class="changeIcon icon-pencil"></button>
+          <input id="${inputId}" style="width: 5em" value="${icon}" />
+          <i class="icon-edit pointer" style="position: absolute; margin:.4em 0 0 -1.4em; font-size:.85em"></i>
         </td>
-        <td><input class="multiplier" type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
-        <td style="text-align:center">${pack.markers.filter(marker => marker.type === type).length}</td>
+        <td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
+        <td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
       </tr>`;
     });
-
     const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
     alertMessage.innerHTML = table;
 
-    alertMessage.querySelectorAll("button.changeIcon").forEach(selectIconButton => {
+    alertMessage.querySelectorAll("i").forEach(selectIconButton => {
       selectIconButton.addEventListener("click", function () {
-        const image = this.parentElement.querySelector(".image");
-        const emoji = this.parentElement.querySelector(".emoji");
-        const icon = image.getAttribute("src") || emoji.textContent;
-
-        selectIcon(icon, value => {
-          const isExternal = value.startsWith("http") || value.startsWith("data:image");
-          image.setAttribute("src", isExternal ? value : "");
-          image.hidden = !isExternal;
-          emoji.textContent = isExternal ? "" : value;
-        });
+        const input = this.previousElementSibling;
+        selectIcon(input.value, icon => (input.value = icon));
       });
     });
   }
@@ -910,14 +889,12 @@ function configMarkersGeneration() {
   const applyChanges = () => {
     const rows = alertMessage.querySelectorAll("tbody > tr");
     const rowsData = Array.from(rows).map(row => {
-      const type = row.querySelector(".type").value;
-
-      const image = row.querySelector(".image");
-      const emoji = row.querySelector(".emoji");
-      const icon = image.getAttribute("src") || emoji.textContent;
-
-      const multiplier = parseFloat(row.querySelector(".multiplier").value);
-      return {type, icon, multiplier};
+      const inputs = row.querySelectorAll("input");
+      return {
+        type: inputs[0].value,
+        icon: inputs[1].value,
+        multiplier: parseFloat(inputs[2].value)
+      };
     });
 
     const config = Markers.getConfig();
diff --git a/modules/ui/transform-tool.js b/modules/ui/transform-tool.js
deleted file mode 100644
index 86d5c504..00000000
--- a/modules/ui/transform-tool.js
+++ /dev/null
@@ -1,204 +0,0 @@
-"use strict";
-
-async function openTransformTool() {
-  const width = Math.min(400, window.innerWidth * 0.5);
-  const previewScale = width / graphWidth;
-  const height = graphHeight * previewScale;
-
-  let mouseIsDown = false;
-  let mouseX = 0;
-  let mouseY = 0;
-
-  resetInputs();
-  loadPreview();
-
-  $("#transformTool").dialog({
-    title: "Transform map",
-    resizable: false,
-    position: {my: "center", at: "center", of: "svg"},
-    buttons: {
-      Transform: function () {
-        closeDialogs();
-        transformMap();
-      },
-      Cancel: function () {
-        $(this).dialog("close");
-      }
-    }
-  });
-
-  if (modules.openTransformTool) return;
-  modules.openTransformTool = true;
-
-  // add listeners
-  byId("transformToolBody").on("input", handleInput);
-  byId("transformPreview")
-    .on("mousedown", handleMousedown)
-    .on("mouseup", _ => (mouseIsDown = false))
-    .on("mousemove", handleMousemove)
-    .on("wheel", handleWheel);
-
-  async function loadPreview() {
-    byId("transformPreview").style.width = width + "px";
-    byId("transformPreview").style.height = height + "px";
-
-    const options = {noWater: true, fullMap: true, noLabels: true, noScaleBar: true, noVignette: true, noIce: true};
-    const url = await getMapURL("png", options);
-    const SCALE = 4;
-
-    const img = new Image();
-    img.src = url;
-    img.onload = function () {
-      const $canvas = byId("transformPreviewCanvas");
-      $canvas.style.width = width + "px";
-      $canvas.style.height = height + "px";
-      $canvas.width = width * SCALE;
-      $canvas.height = height * SCALE;
-      $canvas.getContext("2d").drawImage(img, 0, 0, width * SCALE, height * SCALE);
-    };
-  }
-
-  function resetInputs() {
-    byId("transformAngleInput").value = 0;
-    byId("transformAngleOutput").value = "0";
-    byId("transformMirrorH").checked = false;
-    byId("transformMirrorV").checked = false;
-    byId("transformScaleInput").value = 0;
-    byId("transformScaleResult").value = 1;
-    byId("transformShiftX").value = 0;
-    byId("transformShiftY").value = 0;
-    handleInput();
-
-    updateCellsNumber(byId("pointsInput").value);
-    byId("transformPointsInput").oninput = e => updateCellsNumber(e.target.value);
-
-    function updateCellsNumber(value) {
-      byId("transformPointsInput").value = value;
-      const cells = cellsDensityMap[value];
-      byId("transformPointsInput").dataset.cells = cells;
-      const output = byId("transformPointsFormatted");
-      output.value = cells / 1000 + "K";
-      output.style.color = getCellsDensityColor(cells);
-    }
-  }
-
-  function handleInput() {
-    const angle = (+byId("transformAngleInput").value / 180) * Math.PI;
-    const shiftX = +byId("transformShiftX").value;
-    const shiftY = +byId("transformShiftY").value;
-    const mirrorH = byId("transformMirrorH").checked;
-    const mirrorV = byId("transformMirrorV").checked;
-
-    const EXP = 1.0965;
-    const scale = rn(EXP ** +byId("transformScaleInput").value, 2); // [0.1, 10]x
-    byId("transformScaleResult").value = scale;
-
-    byId("transformPreviewCanvas").style.transform = `
-      translate(${shiftX * previewScale}px, ${shiftY * previewScale}px)
-      scale(${mirrorH ? -scale : scale}, ${mirrorV ? -scale : scale})
-      rotate(${angle}rad)
-    `;
-  }
-
-  function handleMousedown(e) {
-    mouseIsDown = true;
-    const shiftX = +byId("transformShiftX").value;
-    const shiftY = +byId("transformShiftY").value;
-    mouseX = shiftX - e.clientX / previewScale;
-    mouseY = shiftY - e.clientY / previewScale;
-  }
-
-  function handleMousemove(e) {
-    if (!mouseIsDown) return;
-    e.preventDefault();
-
-    byId("transformShiftX").value = Math.round(mouseX + e.clientX / previewScale);
-    byId("transformShiftY").value = Math.round(mouseY + e.clientY / previewScale);
-    handleInput();
-  }
-
-  function handleWheel(e) {
-    const $scaleInput = byId("transformScaleInput");
-    $scaleInput.value = $scaleInput.valueAsNumber - Math.sign(e.deltaY);
-    handleInput();
-  }
-
-  function transformMap() {
-    INFO && console.group("transformMap");
-
-    const transformPointsValue = byId("transformPointsInput").value;
-    const globalPointsValue = byId("pointsInput").value;
-    if (transformPointsValue !== globalPointsValue) changeCellsDensity(transformPointsValue);
-
-    const [projection, inverse] = getProjection();
-
-    applyGraphSize();
-    fitMapToScreen();
-    resetZoom(0);
-    undraw();
-    Resample.process({projection, inverse, scale: 1});
-
-    drawLayers();
-
-    INFO && console.groupEnd("transformMap");
-  }
-
-  function getProjection() {
-    const centerX = graphWidth / 2;
-    const centerY = graphHeight / 2;
-    const shiftX = +byId("transformShiftX").value;
-    const shiftY = +byId("transformShiftY").value;
-    const angle = (+byId("transformAngleInput").value / 180) * Math.PI;
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    const scale = +byId("transformScaleResult").value;
-    const mirrorH = byId("transformMirrorH").checked;
-    const mirrorV = byId("transformMirrorV").checked;
-
-    function project(x, y) {
-      // center the point
-      x -= centerX;
-      y -= centerY;
-
-      // apply scale
-      if (scale !== 1) {
-        x *= scale;
-        y *= scale;
-      }
-
-      // apply rotation
-      if (angle) [x, y] = [x * cos - y * sin, x * sin + y * cos];
-
-      // apply mirroring
-      if (mirrorH) x = -x;
-      if (mirrorV) y = -y;
-
-      // uncenter the point and apply shift
-      return [x + centerX + shiftX, y + centerY + shiftY];
-    }
-
-    function inverse(x, y) {
-      // undo shift and center the point
-      x -= centerX + shiftX;
-      y -= centerY + shiftY;
-
-      // undo mirroring
-      if (mirrorV) y = -y;
-      if (mirrorH) x = -x;
-
-      // undo rotation
-      if (angle !== 0) [x, y] = [x * cos + y * sin, -x * sin + y * cos];
-
-      // undo scale
-      if (scale !== 1) {
-        x /= scale;
-        y /= scale;
-      }
-
-      // uncenter the point
-      return [x + centerX, y + centerY];
-    }
-
-    return [project, inverse];
-  }
-}
diff --git a/modules/ui/units-editor.js b/modules/ui/units-editor.js
index aa63e64a..ff911567 100644
--- a/modules/ui/units-editor.js
+++ b/modules/ui/units-editor.js
@@ -17,22 +17,27 @@ function editUnits() {
   };
 
   // add listeners
-  byId("distanceUnitInput").on("change", changeDistanceUnit);
-  byId("distanceScaleInput").on("change", changeDistanceScale);
-  byId("heightUnit").on("change", changeHeightUnit);
-  byId("heightExponentInput").on("input", changeHeightExponent);
-  byId("temperatureScale").on("change", changeTemperatureScale);
+  byId("distanceUnitInput").addEventListener("change", changeDistanceUnit);
+  byId("distanceScaleOutput").addEventListener("input", changeDistanceScale);
+  byId("distanceScaleInput").addEventListener("change", changeDistanceScale);
+  byId("heightUnit").addEventListener("change", changeHeightUnit);
+  byId("heightExponentInput").addEventListener("input", changeHeightExponent);
+  byId("heightExponentOutput").addEventListener("input", changeHeightExponent);
+  byId("temperatureScale").addEventListener("change", changeTemperatureScale);
 
-  byId("populationRateInput").on("change", changePopulationRate);
-  byId("urbanizationInput").on("change", changeUrbanizationRate);
-  byId("urbanDensityInput").on("change", changeUrbanDensity);
+  byId("populationRateOutput").addEventListener("input", changePopulationRate);
+  byId("populationRateInput").addEventListener("change", changePopulationRate);
+  byId("urbanizationOutput").addEventListener("input", changeUrbanizationRate);
+  byId("urbanizationInput").addEventListener("change", changeUrbanizationRate);
+  byId("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
+  byId("urbanDensityInput").addEventListener("change", changeUrbanDensity);
 
-  byId("addLinearRuler").on("click", addRuler);
-  byId("addOpisometer").on("click", toggleOpisometerMode);
-  byId("addRouteOpisometer").on("click", toggleRouteOpisometerMode);
-  byId("addPlanimeter").on("click", togglePlanimeterMode);
-  byId("removeRulers").on("click", removeAllRulers);
-  byId("unitsRestore").on("click", restoreDefaultUnits);
+  byId("addLinearRuler").addEventListener("click", addRuler);
+  byId("addOpisometer").addEventListener("click", toggleOpisometerMode);
+  byId("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
+  byId("addPlanimeter").addEventListener("click", togglePlanimeterMode);
+  byId("removeRulers").addEventListener("click", removeAllRulers);
+  byId("unitsRestore").addEventListener("click", restoreDefaultUnits);
 
   function changeDistanceUnit() {
     if (this.value === "custom_name") {
@@ -66,11 +71,11 @@ function editUnits() {
 
   function changeHeightExponent() {
     calculateTemperatures();
-    if (layerIsOn("toggleTemperature")) drawTemperature();
+    if (layerIsOn("toggleTemp")) drawTemp();
   }
 
   function changeTemperatureScale() {
-    if (layerIsOn("toggleTemperature")) drawTemperature();
+    if (layerIsOn("toggleTemp")) drawTemp();
   }
 
   function changePopulationRate() {
@@ -87,6 +92,7 @@ function editUnits() {
 
   function restoreDefaultUnits() {
     distanceScale = 3;
+    byId("distanceScaleOutput").value = distanceScale;
     byId("distanceScaleInput").value = distanceScale;
     unlock("distanceScale");
 
@@ -104,16 +110,16 @@ function editUnits() {
     calculateFriendlyGridSize();
 
     // height exponent
-    heightExponentInput.value = 1.8;
+    heightExponentInput.value = heightExponentOutput.value = 1.8;
     localStorage.removeItem("heightExponent");
     calculateTemperatures();
 
     renderScaleBar();
 
     // population
-    populationRate = populationRateInput.value = 1000;
-    urbanization = urbanizationInput.value = 1;
-    urbanDensity = urbanDensityInput.value = 10;
+    populationRate = populationRateOutput.value = populationRateInput.value = 1000;
+    urbanization = urbanizationOutput.value = urbanizationInput.value = 1;
+    urbanDensity = urbanDensityOutput.value = urbanDensityInput.value = 10;
     localStorage.removeItem("populationRate");
     localStorage.removeItem("urbanization");
     localStorage.removeItem("urbanDensity");
@@ -121,16 +127,11 @@ function editUnits() {
 
   function addRuler() {
     if (!layerIsOn("toggleRulers")) toggleRulers();
-
-    const width = Math.min(graphWidth, svgWidth);
-    const height = Math.min(graphHeight, svgHeight);
     const pt = byId("map").createSVGPoint();
-    pt.x = width / 2;
-    pt.y = height / 4;
+    (pt.x = graphWidth / 2), (pt.y = graphHeight / 4);
     const p = pt.matrixTransform(viewbox.node().getScreenCTM().inverse());
-
-    const dx = width / 4 / scale;
-    const dy = (rulers.data.length * 40) % (height / 2);
+    const dx = graphWidth / 4 / scale;
+    const dy = (rulers.data.length * 40) % (graphHeight / 2);
     const from = [(p.x - dx) | 0, (p.y + dy) | 0];
     const to = [(p.x + dx) | 0, (p.y + dy) | 0];
     rulers.create(Ruler, [from, to]).draw();
diff --git a/modules/ui/world-configurator.js b/modules/ui/world-configurator.js
index 0b5abab0..67569592 100644
--- a/modules/ui/world-configurator.js
+++ b/modules/ui/world-configurator.js
@@ -15,7 +15,7 @@ function editWorld() {
       pane.insertAdjacentHTML("afterbegin", checkbox);
 
       const button = this.parentElement.querySelector(".ui-dialog-buttonset > button");
-      button.on("mousemove", () => tip("Apply current settings to the map"));
+      button.on("mousemove", () => tip("Apply curreny settings to the map"));
     },
     close: function () {
       $(this).dialog("destroy");
@@ -86,13 +86,13 @@ function editWorld() {
     generatePrecipitation();
     const heights = new Uint8Array(pack.cells.h);
     Rivers.generate();
+    Lakes.defineGroup();
     Rivers.specify();
     pack.cells.h = new Float32Array(heights);
     Biomes.define();
-    Features.specify();
 
-    if (layerIsOn("toggleTemperature")) drawTemperature();
-    if (layerIsOn("togglePrecipitation")) drawPrecipitation();
+    if (layerIsOn("toggleTemp")) drawTemp();
+    if (layerIsOn("togglePrec")) drawPrec();
     if (layerIsOn("toggleBiomes")) drawBiomes();
     if (layerIsOn("toggleCoordinates")) drawCoordinates();
     if (layerIsOn("toggleRivers")) drawRivers();
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index 85888c4e..0e0bc6b6 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -1,7 +1,7 @@
 "use strict";
 
 function editZones() {
-  closeDialogs("#zonesEditor, .stable");
+  closeDialogs();
   if (!layerIsOn("toggleZones")) toggleZones();
   const body = byId("zonesBodySection");
 
@@ -14,6 +14,7 @@ function editZones() {
   $("#zonesEditor").dialog({
     title: "Zones Editor",
     resizable: false,
+    width: fitContent(),
     close: () => exitZonesManualAssignment("close"),
     position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
@@ -30,40 +31,34 @@ function editZones() {
   byId("zonesManuallyCancel").on("click", cancelZonesManualAssignent);
   byId("zonesAdd").on("click", addZonesLayer);
   byId("zonesExport").on("click", downloadZonesData);
-  byId("zonesRemove").on("click", e => e.target.classList.toggle("pressed"));
+  byId("zonesRemove").on("click", toggleEraseMode);
 
   body.on("click", function (ev) {
-    const line = ev.target.closest("div.states");
-    const zone = pack.zones.find(z => z.i === +line.dataset.id);
-    if (!zone) return;
-
-    if (customization) {
-      if (zone.hidden) return;
-      body.querySelector("div.selected").classList.remove("selected");
-      line.classList.add("selected");
-      return;
-    }
-
-    if (ev.target.closest("fill-box")) changeFill(ev.target.closest("fill-box").getAttribute("fill"), zone);
-    else if (ev.target.classList.contains("zonePopulation")) changePopulation(zone);
-    else if (ev.target.classList.contains("zoneRemove")) zoneRemove(zone);
-    else if (ev.target.classList.contains("zoneHide")) toggleVisibility(zone);
-    else if (ev.target.classList.contains("zoneFog")) toggleFog(zone, ev.target.classList);
+    const el = ev.target,
+      cl = el.classList,
+      zone = el.parentNode.dataset.id;
+    if (el.tagName === "FILL-BOX") changeFill(el);
+    else if (cl.contains("culturePopulation")) changePopulation(zone);
+    else if (cl.contains("icon-trash-empty")) zoneRemove(zone);
+    else if (cl.contains("icon-eye")) toggleVisibility(el);
+    else if (cl.contains("icon-pin")) toggleFog(zone, cl);
+    if (customization) selectZone(el);
   });
 
   body.on("input", function (ev) {
-    const line = ev.target.closest("div.states");
-    const zone = pack.zones.find(z => z.i === +line.dataset.id);
-    if (!zone) return;
+    const el = ev.target;
+    const zone = zones.select("#" + el.parentNode.dataset.id);
 
-    if (ev.target.classList.contains("zoneName")) changeDescription(zone, ev.target.value);
-    else if (ev.target.classList.contains("zoneType")) changeType(zone, ev.target.value);
+    if (el.classList.contains("zoneName")) zone.attr("data-description", el.value);
+    else if (el.classList.contains("zoneType")) zone.attr("data-type", el.value);
   });
 
   // update type filter with a list of used types
   function updateFilters() {
+    const zones = Array.from(document.querySelectorAll("#zones > g"));
+    const types = unique(zones.map(zone => zone.dataset.type));
+
     const filterSelect = byId("zonesFilterType");
-    const types = unique(pack.zones.map(zone => zone.type));
     const typeToFilterBy = types.includes(zonesFilterType.value) ? zonesFilterType.value : "all";
 
     filterSelect.innerHTML =
@@ -73,42 +68,47 @@ function editZones() {
 
   // add line for each zone
   function zonesEditorAddLines() {
-    const typeToFilterBy = byId("zonesFilterType").value;
-    const filteredZones =
-      typeToFilterBy === "all" ? pack.zones : pack.zones.filter(zone => zone.type === typeToFilterBy);
+    const unit = " " + getAreaUnit();
 
-    const lines = filteredZones.map(({i, name, type, cells, color, hidden}) => {
-      const area = getArea(d3.sum(cells.map(i => pack.cells.area[i])));
-      const rural = d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate;
+    const typeToFilterBy = byId("zonesFilterType").value;
+    const zones = Array.from(document.querySelectorAll("#zones > g"));
+    const filteredZones = typeToFilterBy === "all" ? zones : zones.filter(zone => zone.dataset.type === typeToFilterBy);
+
+    const lines = filteredZones.map(zoneEl => {
+      const c = zoneEl.dataset.cells ? zoneEl.dataset.cells.split(",").map(c => +c) : [];
+      const description = zoneEl.dataset.description;
+      const type = zoneEl.dataset.type;
+      const fill = zoneEl.getAttribute("fill");
+      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(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
-      const population = rn(rural + urban);
+        d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
+      const population = rural + urban;
       const populationTip = `Total population: ${si(population)}; Rural population: ${si(
         rural
       )}; Urban population: ${si(urban)}. Click to change`;
-      const focused = defs.select("#fog #focusZone" + i).size();
+      const inactive = zoneEl.style.display === "none";
+      const focused = defs.select("#fog #focus" + zoneEl.id).size();
 
-      return /* html */ `<div class="states" data-id="${i}" data-color="${color}" data-description="${name}"
-        data-type="${type}" data-cells=${cells.length} data-area=${area} data-population=${population} style="${
-        hidden && "opacity: 0.5"
-      }">
-        <fill-box fill="${color}"></fill-box>
-        <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${name}" autocorrect="off" spellcheck="false">
+      return `<div class="states" data-id="${zoneEl.id}" data-fill="${fill}" data-description="${description}"
+        data-type="${type}" data-cells=${c.length} data-area=${area} data-population=${population}>
+        <fill-box fill="${fill}"></fill-box>
+        <input data-tip="Zone description. Click and type to change" style="width: 11em" class="zoneName" value="${description}" autocorrect="off" spellcheck="false">
         <input data-tip="Zone type. Click and type to change" class="zoneType" value="${type}">
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
-        <div data-tip="Cells count" class="stateCells hide">${cells.length}</div>
+        <div data-tip="Cells count" class="stateCells hide">${c.length}</div>
         <span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
-        <div data-tip="Zone area" class="biomeArea hide">${si(area) + " " + getAreaUnit()}</div>
+        <div data-tip="Zone area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
-        <div data-tip="${populationTip}" class="zonePopulation hide pointer">${si(population)}</div>
+        <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
         <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
-        <span data-tip="Toggle zone focus" class="zoneFog icon-pin ${focused ? "" : "inactive"} hide ${
-        cells.length ? "" : "placeholder"
+        <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${
+        c.length ? "" : " placeholder"
       }"></span>
-        <span data-tip="Toggle zone visibility" class="zoneHide icon-eye hide ${
-          cells.length ? "" : " placeholder"
-        }"></span>
-        <span data-tip="Remove zone" class="zoneRemove icon-trash-empty hide"></span>
+        <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${
+        c.length ? "" : " placeholder"
+      }"></span>
+        <span data-tip="Remove zone" class="icon-trash-empty hide"></span>
       </div>`;
     });
 
@@ -121,13 +121,14 @@ function editZones() {
       (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 = `${filteredZones.length} of ${pack.zones.length}`;
+    zonesFooterNumber.innerHTML = /* html */ `${filteredZones.length} of ${zones.length}`;
     zonesFooterCells.innerHTML = pack.cells.i.length;
-    zonesFooterArea.innerHTML = si(totalArea) + " " + getAreaUnit();
+    zonesFooterArea.innerHTML = si(totalArea) + unit;
     zonesFooterPopulation.innerHTML = si(totalPop);
 
-    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", zoneHighlightOn));
-    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", zoneHighlightOff));
+    // add listeners
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseenter", ev => zoneHighlightOn(ev)));
+    body.querySelectorAll("div.states").forEach(el => el.on("mouseleave", ev => zoneHighlightOff(ev)));
 
     if (body.dataset.type === "percentage") {
       body.dataset.type = "absolute";
@@ -137,17 +138,25 @@ function editZones() {
   }
 
   function zoneHighlightOn(event) {
-    const zoneId = event.target.dataset.id;
-    zones.select("#zone" + zoneId).style("outline", "1px solid red");
+    const zone = event.target.dataset.id;
+    zones.select("#" + zone).style("outline", "1px solid red");
   }
 
   function zoneHighlightOff(event) {
-    const zoneId = event.target.dataset.id;
-    zones.select("#zone" + zoneId).style("outline", null);
+    const zone = event.target.dataset.id;
+    zones.select("#" + zone).style("outline", null);
   }
 
   function filterZonesByType() {
-    drawZones();
+    const typeToFilterBy = this.value;
+    const zones = Array.from(document.querySelectorAll("#zones > g"));
+
+    for (const zone of zones) {
+      const type = zone.dataset.type;
+      const visible = typeToFilterBy === "all" || type === typeToFilterBy;
+      zone.style.display = visible ? "block" : "none";
+    }
+
     zonesEditorAddLines();
   }
 
@@ -158,24 +167,23 @@ function editZones() {
     axis: "y",
     update: movezone
   });
-
-  function movezone(_ev, ui) {
-    const zone = pack.zones.find(z => z.i === +ui.item[0].dataset.id);
-    const oldIndex = pack.zones.indexOf(zone);
-    const newIndex = ui.item.index();
-    if (oldIndex === newIndex) return;
-
-    pack.zones.splice(oldIndex, 1);
-    pack.zones.splice(newIndex, 0, zone);
-    drawZones();
+  function movezone(ev, ui) {
+    const zone = $("#" + ui.item.attr("data-id"));
+    const prev = $("#" + ui.item.prev().attr("data-id"));
+    if (prev) {
+      zone.insertAfter(prev);
+      return;
+    }
+    const next = $("#" + ui.item.next().attr("data-id"));
+    if (next) zone.insertBefore(next);
   }
 
   function enterZonesManualAssignent() {
     if (!layerIsOn("toggleZones")) toggleZones();
     customization = 10;
-
     document.querySelectorAll("#zonesBottom > *").forEach(el => (el.style.display = "none"));
     byId("zonesManuallyButtons").style.display = "inline-block";
+
     zonesEditor.querySelectorAll(".hide").forEach(el => el.classList.add("hidden"));
     zonesFooter.style.display = "none";
     body.querySelectorAll("div > input, select, svg").forEach(e => (e.style.pointerEvents = "none"));
@@ -189,32 +197,21 @@ function editZones() {
       .on("touchmove mousemove", moveZoneBrush);
 
     body.querySelector("div").classList.add("selected");
+    zones.selectAll("g").each(function () {
+      this.setAttribute("data-init", this.getAttribute("data-cells"));
+    });
+  }
 
-    // draw zones as individual cells
-    zones.selectAll("*").remove();
-
-    const filterBy = byId("zonesFilterType").value;
-    const isFiltered = filterBy && filterBy !== "all";
-    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
-    const data = visibleZones.map(({i, cells, color}) => cells.map(cell => ({cell, zoneId: i, fill: color}))).flat();
-    zones
-      .selectAll("polygon")
-      .data(data, d => `${d.zoneId}-${d.cell}`)
-      .enter()
-      .append("polygon")
-      .attr("points", d => getPackPolygon(d.cell))
-      .attr("fill", d => d.fill)
-      .attr("data-zone", d => d.zoneId)
-      .attr("data-cell", d => d.cell);
+  function selectZone(el) {
+    body.querySelector("div.selected").classList.remove("selected");
+    el.classList.add("selected");
   }
 
   function selectZoneOnMapClick() {
-    if (d3.event.target.parentElement.id !== "zones") return;
-    const zoneId = d3.event.target.dataset.zone;
-    const el = body.querySelector("div[data-id='" + zoneId + "']");
-
-    body.querySelector("div.selected").classList.remove("selected");
-    el.classList.add("selected");
+    if (d3.event.target.parentElement.parentElement.id !== "zones") return;
+    const zone = d3.event.target.parentElement.id;
+    const el = body.querySelector("div[data-id='" + zone + "']");
+    selectZone(el);
   }
 
   function dragZoneBrush() {
@@ -222,41 +219,43 @@ function editZones() {
     const eraseMode = byId("zonesRemove").classList.contains("pressed");
     const landOnly = byId("zonesBrushLandOnly").checked;
 
+    const selected = body.querySelector("div.selected");
+    const zone = zones.select("#" + selected.dataset.id);
+    const base = zone.attr("id") + "_"; // id generic part
+
     d3.event.on("drag", () => {
       if (!d3.event.dx && !d3.event.dy) return;
       const [x, y] = d3.mouse(this);
       moveCircle(x, y, radius);
 
-      let selection = radius > 5 ? findAll(x, y, radius) : [findCell(x, y)];
+      let selection = radius > 5 ? findAll(x, y, radius) : [findCell(x, y, radius)];
       if (landOnly) selection = selection.filter(i => pack.cells.h[i] >= 20);
-      if (!selection.length) return;
+      if (!selection) return;
 
-      const zoneId = +body.querySelector("div.selected")?.dataset.id;
-      const zone = pack.zones.find(z => z.i === zoneId);
-      if (!zone) return;
+      const dataCells = zone.attr("data-cells");
+      let cells = dataCells ? dataCells.split(",").map(i => +i) : [];
 
       if (eraseMode) {
-        const data = zones
-          .selectAll("polygon")
-          .data()
-          .filter(d => !(d.zoneId === zoneId && selection.includes(d.cell)));
-        zones
-          .selectAll("polygon")
-          .data(data, d => `${d.zoneId}-${d.cell}`)
-          .exit()
-          .remove();
+        // remove
+        selection.forEach(i => {
+          const index = cells.indexOf(i);
+          if (index === -1) return;
+          zone.select("polygon#" + base + i).remove();
+          cells.splice(index, 1);
+        });
       } else {
-        const data = selection.map(cell => ({cell, zoneId, fill: zone.color}));
-        zones
-          .selectAll("polygon")
-          .data(data, d => `${d.zoneId}-${d.cell}`)
-          .enter()
-          .append("polygon")
-          .attr("points", d => getPackPolygon(d.cell))
-          .attr("fill", d => d.fill)
-          .attr("data-zone", d => d.zoneId)
-          .attr("data-cell", d => d.cell);
+        // add
+        selection.forEach(i => {
+          if (cells.includes(i)) return;
+          cells.push(i);
+          zone
+            .append("polygon")
+            .attr("points", getPackPolygon(i))
+            .attr("id", base + i);
+        });
       }
+
+      zone.attr("data-cells", cells);
     });
   }
 
@@ -264,29 +263,39 @@ function editZones() {
     showMainTip();
     const point = d3.mouse(this);
     const radius = +zonesBrush.value;
-    moveCircle(...point, radius);
+    moveCircle(point[0], point[1], radius);
   }
 
   function applyZonesManualAssignent() {
-    const data = zones.selectAll("polygon").data();
-    const zoneCells = data.reduce((acc, d) => {
-      if (!acc[d.zoneId]) acc[d.zoneId] = [];
-      acc[d.zoneId].push(d.cell);
-      return acc;
-    }, {});
+    zones.selectAll("g").each(function () {
+      if (this.dataset.cells) return;
+      // all zone cells are removed
+      unfog("focusZone" + this.id);
+      this.style.display = "block";
+    });
 
-    const filterBy = byId("zonesFilterType").value;
-    const isFiltered = filterBy && filterBy !== "all";
-    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
-    visibleZones.forEach(zone => (zone.cells = zoneCells[zone.i] || []));
-
-    drawZones();
     zonesEditorAddLines();
     exitZonesManualAssignment();
   }
 
+  // restore initial zone cells
   function cancelZonesManualAssignent() {
-    drawZones();
+    zones.selectAll("g").each(function () {
+      const zone = d3.select(this);
+      const dataCells = zone.attr("data-init");
+      const cells = dataCells ? dataCells.split(",").map(i => +i) : [];
+      zone.attr("data-cells", cells);
+      zone.selectAll("*").remove();
+      const base = zone.attr("id") + "_"; // id generic part
+      zone
+        .selectAll("*")
+        .data(cells)
+        .enter()
+        .append("polygon")
+        .attr("points", d => getPackPolygon(d))
+        .attr("id", d => base + d);
+    });
+
     exitZonesManualAssignment();
   }
 
@@ -304,49 +313,60 @@ function editZones() {
 
     restoreDefaultEvents();
     clearMainTip();
-
+    zones.selectAll("g").each(function () {
+      this.removeAttribute("data-init");
+    });
     const selected = body.querySelector("div.selected");
     if (selected) selected.classList.remove("selected");
   }
 
-  function changeFill(fill, zone) {
+  function changeFill(el) {
+    const fill = el.getAttribute("fill");
     const callback = newFill => {
-      zone.color = newFill;
-      drawZones();
-      zonesEditorAddLines();
+      el.fill = newFill;
+      byId(el.parentNode.dataset.id).setAttribute("fill", newFill);
     };
 
     openPicker(fill, callback);
   }
 
-  function toggleVisibility(zone) {
-    const isHidden = Boolean(zone.hidden);
-    if (isHidden) delete zone.hidden;
-    else zone.hidden = true;
-
-    drawZones();
-    zonesEditorAddLines();
+  function toggleVisibility(el) {
+    const zone = zones.select("#" + el.parentNode.dataset.id);
+    const inactive = zone.style("display") === "none";
+    inactive ? zone.style("display", "block") : zone.style("display", "none");
+    el.classList.toggle("inactive");
   }
 
-  function toggleFog(zone, cl) {
-    const inactive = cl.contains("inactive");
-    cl.toggle("inactive");
+  function toggleFog(z, cl) {
+    const dataCells = zones.select("#" + z).attr("data-cells");
+    if (!dataCells) return;
 
-    if (inactive) {
-      const path = zones.select("#zone" + zone.i).attr("d");
-      fog("focusZone" + zone.i, path);
-    } else {
-      unfog("focusZone" + zone.i);
-    }
+    const path =
+        "M" +
+        dataCells
+          .split(",")
+          .map(c => getPackPolygon(+c))
+          .join("M") +
+        "Z",
+      id = "focusZone" + z;
+    cl.contains("inactive") ? fog(id, path) : unfog(id);
+    cl.toggle("inactive");
   }
 
   function toggleLegend() {
-    if (legend.selectAll("*").size()) return clearLegend(); // hide legend
+    if (legend.selectAll("*").size()) {
+      clearLegend();
+      return;
+    } // hide legend
+    const data = [];
+
+    zones.selectAll("g").each(function () {
+      const id = this.dataset.id;
+      const description = this.dataset.description;
+      const fill = this.getAttribute("fill");
+      data.push([id, fill, description]);
+    });
 
-    const filterBy = byId("zonesFilterType").value;
-    const isFiltered = filterBy && filterBy !== "all";
-    const visibleZones = pack.zones.filter(zone => !zone.hidden && (!isFiltered || zone.type === filterBy));
-    const data = visibleZones.map(({i, name, color}) => ["zone" + i, color, name]);
     drawLegend("Zones", data);
   }
 
@@ -360,7 +380,8 @@ function editZones() {
       body.querySelectorAll(":scope > div").forEach(function (el) {
         el.querySelector(".stateCells").innerHTML = rn((+el.dataset.cells / totalCells) * 100, 2) + "%";
         el.querySelector(".biomeArea").innerHTML = rn((+el.dataset.area / totalArea) * 100, 2) + "%";
-        el.querySelector(".zonePopulation").innerHTML = rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
+        el.querySelector(".culturePopulation").innerHTML =
+          rn((+el.dataset.population / totalPopulation) * 100, 2) + "%";
       });
     } else {
       body.dataset.type = "absolute";
@@ -369,23 +390,28 @@ function editZones() {
   }
 
   function addZonesLayer() {
-    const zoneId = pack.zones.length ? Math.max(...pack.zones.map(z => z.i)) + 1 : 0;
-    const name = "Unknown zone";
+    const id = getNextId("zone");
+    const description = "Unknown zone";
     const type = "Unknown";
-    const color = "url(#hatch" + (zoneId % 42) + ")";
-    pack.zones.push({i: zoneId, name, type, color, cells: []});
+    const fill = "url(#hatch" + (id.slice(4) % 42) + ")";
+    zones
+      .append("g")
+      .attr("id", id)
+      .attr("data-description", description)
+      .attr("data-type", type)
+      .attr("data-cells", "")
+      .attr("fill", fill);
 
     zonesEditorAddLines();
-    drawZones();
   }
 
   function downloadZonesData() {
     const unit = areaUnit.value === "square" ? distanceUnitInput.value + "2" : areaUnit.value;
-    let data = "Id,Color,Description,Type,Cells,Area " + unit + ",Population\n"; // headers
+    let data = "Id,Fill,Description,Type,Cells,Area " + unit + ",Population\n"; // headers
 
     body.querySelectorAll(":scope > div").forEach(function (el) {
       data += el.dataset.id + ",";
-      data += el.dataset.color + ",";
+      data += el.dataset.fill + ",";
       data += el.dataset.description + ",";
       data += el.dataset.type + ",";
       data += el.dataset.cells + ",";
@@ -397,24 +423,27 @@ function editZones() {
     downloadFile(data, name);
   }
 
-  function changeDescription(zone, value) {
-    zone.name = value;
-    zones.select("#zone" + zone.i).attr("data-description", value);
-  }
-
-  function changeType(zone, value) {
-    zone.type = value;
-    zones.select("#zone" + zone.i).attr("data-type", value);
+  function toggleEraseMode() {
+    this.classList.toggle("pressed");
   }
 
   function changePopulation(zone) {
-    const landCells = zone.cells.filter(i => pack.cells.h[i] >= 20);
-    if (!landCells.length) return tip("Zone does not have any land cells, cannot change population", false, "error");
+    const dataCells = zones.select("#" + zone).attr("data-cells");
+    const cells = dataCells
+      ? dataCells
+          .split(",")
+          .map(i => +i)
+          .filter(i => pack.cells.h[i] >= 20)
+      : [];
+    if (!cells.length) {
+      tip("Zone does not have any land cells, cannot change population", false, "error");
+      return;
+    }
+    const burgs = pack.burgs.filter(b => !b.removed && cells.includes(b.cell));
 
-    const burgs = pack.burgs.filter(b => !b.removed && landCells.includes(b.cell));
-    const rural = rn(d3.sum(landCells.map(i => pack.cells.pop[i])) * populationRate);
+    const rural = rn(d3.sum(cells.map(i => pack.cells.pop[i])) * populationRate);
     const urban = rn(
-      d3.sum(landCells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
+      d3.sum(cells.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization
     );
     const total = rural + urban;
     const l = n => Number(n).toLocaleString();
@@ -456,12 +485,12 @@ function editZones() {
     function applyPopulationChange() {
       const ruralChange = ruralPop.value / rural;
       if (isFinite(ruralChange) && ruralChange !== 1) {
-        landCells.forEach(i => (pack.cells.pop[i] *= ruralChange));
+        cells.forEach(i => (pack.cells.pop[i] *= ruralChange));
       }
       if (!isFinite(ruralChange) && +ruralPop.value > 0) {
         const points = ruralPop.value / populationRate;
-        const pop = rn(points / landCells.length);
-        landCells.forEach(i => (pack.cells.pop[i] = pop));
+        const pop = rn(points / cells.length);
+        cells.forEach(i => (pack.cells.pop[i] = pop));
       }
 
       const urbanChange = urbanPop.value / urban;
@@ -474,22 +503,13 @@ function editZones() {
         burgs.forEach(b => (b.population = population));
       }
 
-      if (layerIsOn("togglePopulation")) drawPopulation();
       zonesEditorAddLines();
     }
   }
 
   function zoneRemove(zone) {
-    confirmationDialog({
-      title: "Remove zone",
-      message: "Are you sure you want to remove the zone? <br>This action cannot be reverted",
-      confirm: "Remove",
-      onConfirm: () => {
-        pack.zones = pack.zones.filter(z => z.i !== zone.i);
-        zones.select("#zone" + zone.i).remove();
-        unfog("focusZone" + zone.i);
-        zonesEditorAddLines();
-      }
-    });
+    zones.select("#" + zone).remove();
+    unfog("focusZone" + zone);
+    zonesEditorAddLines();
   }
 }
diff --git a/modules/zones-generator.js b/modules/zones-generator.js
deleted file mode 100644
index 641a0784..00000000
--- a/modules/zones-generator.js
+++ /dev/null
@@ -1,454 +0,0 @@
-"use strict";
-
-window.Zones = (function () {
-  const config = {
-    invasion: {quantity: 2, generate: addInvasion}, // invasion of enemy lands
-    rebels: {quantity: 1.5, generate: addRebels}, // rebels along a state border
-    proselytism: {quantity: 1.6, generate: addProselytism}, // proselitism of organized religion
-    crusade: {quantity: 1.6, generate: addCrusade}, // crusade on heresy lands
-    disease: {quantity: 1.4, generate: addDisease}, // disease starting in a random city
-    disaster: {quantity: 1, generate: addDisaster}, // disaster starting in a random city
-    eruption: {quantity: 1, generate: addEruption}, // eruption aroung volcano
-    avalanche: {quantity: 0.8, generate: addAvalanche}, // avalanche impacting highland road
-    fault: {quantity: 1, generate: addFault}, // fault line in elevated areas
-    flood: {quantity: 1, generate: addFlood}, // flood on river banks
-    tsunami: {quantity: 1, generate: addTsunami} // tsunami starting near coast
-  };
-
-  const generate = function (globalModifier = 1) {
-    TIME && console.time("generateZones");
-
-    const usedCells = new Uint8Array(pack.cells.i.length);
-    pack.zones = [];
-
-    Object.values(config).forEach(type => {
-      const expectedNumber = type.quantity * globalModifier;
-      let number = gauss(expectedNumber, expectedNumber / 2, 0, 100);
-      while (number--) type.generate(usedCells);
-    });
-
-    TIME && console.timeEnd("generateZones");
-  };
-
-  function addInvasion(usedCells) {
-    const {cells, states} = pack;
-
-    const ongoingConflicts = states
-      .filter(s => s.i && !s.removed && s.campaigns)
-      .map(s => s.campaigns)
-      .flat()
-      .filter(c => !c.end);
-    if (!ongoingConflicts.length) return;
-    const {defender, attacker} = ra(ongoingConflicts);
-
-    const borderCells = cells.i.filter(cellId => {
-      if (usedCells[cellId]) return false;
-      if (cells.state[cellId] !== defender) return false;
-      return cells.c[cellId].some(c => cells.state[c] === attacker);
-    });
-
-    const startCell = ra(borderCells);
-    if (startCell === undefined) return;
-
-    const invasionCells = [];
-    const queue = [startCell];
-    const maxCells = rand(5, 30);
-
-    while (queue.length) {
-      const cellId = P(0.4) ? queue.shift() : queue.pop();
-      invasionCells.push(cellId);
-      if (invasionCells.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId]) return;
-        if (cells.state[neibCellId] !== defender) return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    const subtype = rw({
-      Invasion: 5,
-      Occupation: 4,
-      Conquest: 3,
-      Incursion: 2,
-      Intervention: 2,
-      Assault: 1,
-      Foray: 1,
-      Intrusion: 1,
-      Irruption: 1,
-      Offensive: 1,
-      Pillaging: 1,
-      Plunder: 1,
-      Raid: 1,
-      Skirmishes: 1
-    });
-    const name = getAdjective(states[attacker].name) + " " + subtype;
-
-    pack.zones.push({i: pack.zones.length, name, type: "Invasion", cells: invasionCells, color: "url(#hatch1)"});
-  }
-
-  function addRebels(usedCells) {
-    const {cells, states} = pack;
-
-    const state = ra(states.filter(s => s.i && !s.removed && s.neighbors.some(Boolean)));
-    if (!state) return;
-
-    const neibStateId = ra(state.neighbors.filter(n => n && !states[n].removed));
-    if (!neibStateId) return;
-
-    const cellsArray = [];
-    const queue = [];
-    const borderCellId = cells.i.find(
-      i => cells.state[i] === state.i && cells.c[i].some(c => cells.state[c] === neibStateId)
-    );
-    if (borderCellId) queue.push(borderCellId);
-    const maxCells = rand(10, 30);
-
-    while (queue.length) {
-      const cellId = queue.shift();
-      cellsArray.push(cellId);
-      if (cellsArray.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId]) return;
-        if (cells.state[neibCellId] !== state.i) return;
-        usedCells[neibCellId] = 1;
-        if (neibCellId % 4 !== 0 && !cells.c[neibCellId].some(c => cells.state[c] === neibStateId)) return;
-        queue.push(neibCellId);
-      });
-    }
-
-    const rebels = rw({
-      Rebels: 5,
-      Insurrection: 2,
-      Mutineers: 1,
-      Insurgents: 1,
-      Rebellion: 1,
-      Renegades: 1,
-      Revolters: 1,
-      Revolutionaries: 1,
-      Rioters: 1,
-      Separatists: 1,
-      Secessionists: 1,
-      Conspiracy: 1
-    });
-
-    const name = getAdjective(states[neibStateId].name) + " " + rebels;
-    pack.zones.push({i: pack.zones.length, name, type: "Rebels", cells: cellsArray, color: "url(#hatch3)"});
-  }
-
-  function addProselytism(usedCells) {
-    const {cells, religions} = pack;
-
-    const organizedReligions = religions.filter(r => r.i && !r.removed && r.type === "Organized");
-    const religion = ra(organizedReligions);
-    if (!religion) return;
-
-    const targetBorderCells = cells.i.filter(
-      i =>
-        cells.h[i] < 20 &&
-        cells.pop[i] &&
-        cells.religion[i] !== religion.i &&
-        cells.c[i].some(c => cells.religion[c] === religion.i)
-    );
-    const startCell = ra(targetBorderCells);
-    if (!startCell) return;
-
-    const targetReligionId = cells.religion[startCell];
-    const proselytismCells = [];
-    const queue = [startCell];
-    const maxCells = rand(10, 30);
-
-    while (queue.length) {
-      const cellId = queue.shift();
-      proselytismCells.push(cellId);
-      if (proselytismCells.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId]) return;
-        if (cells.religion[neibCellId] !== targetReligionId) return;
-        if (cells.h[neibCellId] < 20 || !cells.pop[i]) return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    const name = `${getAdjective(religion.name.split(" ")[0])} Proselytism`;
-    pack.zones.push({i: pack.zones.length, name, type: "Proselytism", cells: proselytismCells, color: "url(#hatch6)"});
-  }
-
-  function addCrusade(usedCells) {
-    const {cells, religions} = pack;
-
-    const heresies = religions.filter(r => !r.removed && r.type === "Heresy");
-    if (!heresies.length) return;
-
-    const heresy = ra(heresies);
-    const crusadeCells = cells.i.filter(i => !usedCells[i] && cells.religion[i] === heresy.i);
-    if (!crusadeCells.length) return;
-    crusadeCells.forEach(i => (usedCells[i] = 1));
-
-    const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade";
-    pack.zones.push({
-      i: pack.zones.length,
-      name,
-      type: "Crusade",
-      cells: Array.from(crusadeCells),
-      color: "url(#hatch6)"
-    });
-  }
-
-  function addDisease(usedCells) {
-    const {cells, burgs} = pack;
-
-    const burg = ra(burgs.filter(b => !usedCells[b.cell] && b.i && !b.removed)); // random burg
-    if (!burg) return;
-
-    const cellsArray = [];
-    const cost = [];
-    const maxCells = rand(20, 40);
-
-    const queue = new FlatQueue();
-    queue.push({e: burg.cell, p: 0}, 0);
-
-    while (queue.length) {
-      const next = queue.pop();
-      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
-      usedCells[next.e] = 1;
-
-      cells.c[next.e].forEach(nextCellId => {
-        const c = Routes.getRoute(next.e, nextCellId) ? 5 : 100;
-        const p = next.p + c;
-        if (p > maxCells) return;
-
-        if (!cost[nextCellId] || p < cost[nextCellId]) {
-          cost[nextCellId] = p;
-          queue.push({e: nextCellId, p}, p);
-        }
-      });
-    }
-
-    // prettier-ignore
-    const name = `${(() => {
-      const model = rw({color: 2, animal: 1, adjective: 1});
-      if (model === "color") return ra(["Amber", "Azure", "Black", "Blue", "Brown", "Crimson", "Emerald", "Golden", "Green", "Grey", "Orange", "Pink", "Purple", "Red", "Ruby", "Scarlet", "Silver", "Violet", "White", "Yellow"]);
-      if (model === "animal") return ra(["Ape", "Bear", "Bird", "Boar", "Cat", "Cow", "Deer", "Dog", "Fox", "Goat", "Horse", "Lion", "Pig", "Rat", "Raven", "Sheep", "Spider", "Tiger", "Viper", "Wolf", "Worm", "Wyrm"]);
-      if (model === "adjective") return ra(["Blind", "Bloody", "Brutal", "Burning", "Deadly", "Fatal", "Furious", "Great", "Grim", "Horrible", "Invisible", "Lethal", "Loud", "Mortal", "Savage", "Severe", "Silent", "Unknown", "Venomous", "Vicious"]);
-    })()} ${rw({Fever: 5, Plague: 3, Cough: 3, Flu: 2, Pox: 2, Cholera: 2, Typhoid: 2, Leprosy: 1, Smallpox: 1, Pestilence: 1, Consumption: 1, Malaria: 1, Dropsy: 1})}`;
-
-    pack.zones.push({i: pack.zones.length, name, type: "Disease", cells: cellsArray, color: "url(#hatch12)"});
-  }
-
-  function addDisaster(usedCells) {
-    const {cells, burgs} = pack;
-
-    const burg = ra(burgs.filter(b => !usedCells[b.cell] && b.i && !b.removed));
-    if (!burg) return;
-    usedCells[burg.cell] = 1;
-
-    const cellsArray = [];
-    const cost = [];
-    const maxCells = rand(5, 25);
-
-    const queue = new FlatQueue();
-    queue.push({e: burg.cell, p: 0}, 0);
-
-    while (queue.length) {
-      const next = queue.pop();
-      if (cells.burg[next.e] || cells.pop[next.e]) cellsArray.push(next.e);
-      usedCells[next.e] = 1;
-
-      cells.c[next.e].forEach(function (e) {
-        const c = rand(1, 10);
-        const p = next.p + c;
-        if (p > maxCells) return;
-
-        if (!cost[e] || p < cost[e]) {
-          cost[e] = p;
-          queue.push({e, p}, p);
-        }
-      });
-    }
-
-    const type = rw({
-      Famine: 5,
-      Drought: 3,
-      Earthquake: 3,
-      Dearth: 1,
-      Tornadoes: 1,
-      Wildfires: 1,
-      Storms: 1,
-      Blight: 1
-    });
-    const name = getAdjective(burg.name) + " " + type;
-    pack.zones.push({i: pack.zones.length, name, type: "Disaster", cells: cellsArray, color: "url(#hatch5)"});
-  }
-
-  function addEruption(usedCells) {
-    const {cells, markers} = pack;
-
-    const volcanoe = markers.find(m => m.type === "volcanoes" && !usedCells[m.cell]);
-    if (!volcanoe) return;
-    usedCells[volcanoe.cell] = 1;
-
-    const note = notes.find(n => n.id === "marker" + volcanoe.i);
-    if (note) note.legend = note.legend.replace("Active volcano", "Erupting volcano");
-    const name = note ? note.name.replace(" Volcano", "") + " Eruption" : "Volcano Eruption";
-
-    const cellsArray = [];
-    const queue = [volcanoe.cell];
-    const maxCells = rand(10, 30);
-
-    while (queue.length) {
-      const cellId = P(0.5) ? queue.shift() : queue.pop();
-      cellsArray.push(cellId);
-      if (cellsArray.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId] || cells.h[neibCellId] < 20) return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    pack.zones.push({i: pack.zones.length, name, type: "Eruption", cells: cellsArray, color: "url(#hatch7)"});
-  }
-
-  function addAvalanche(usedCells) {
-    const {cells} = pack;
-
-    const routeCells = cells.i.filter(i => !usedCells[i] && Routes.isConnected(i) && cells.h[i] >= 70);
-    if (!routeCells.length) return;
-
-    const startCell = ra(routeCells);
-    usedCells[startCell] = 1;
-
-    const cellsArray = [];
-    const queue = [startCell];
-    const maxCells = rand(3, 15);
-
-    while (queue.length) {
-      const cellId = P(0.3) ? queue.shift() : queue.pop();
-      cellsArray.push(cellId);
-      if (cellsArray.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId] || cells.h[neibCellId] < 65) return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    const name = getAdjective(Names.getCultureShort(cells.culture[startCell])) + " Avalanche";
-    pack.zones.push({i: pack.zones.length, name, type: "Avalanche", cells: cellsArray, color: "url(#hatch5)"});
-  }
-
-  function addFault(usedCells) {
-    const cells = pack.cells;
-
-    const elevatedCells = cells.i.filter(i => !usedCells[i] && cells.h[i] > 50 && cells.h[i] < 70);
-    if (!elevatedCells.length) return;
-
-    const startCell = ra(elevatedCells);
-    usedCells[startCell] = 1;
-
-    const cellsArray = [];
-    const queue = [startCell];
-    const maxCells = rand(3, 15);
-
-    while (queue.length) {
-      const cellId = queue.pop();
-      if (cells.h[cellId] >= 20) cellsArray.push(cellId);
-      if (cellsArray.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId] || cells.r[neibCellId]) return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    const name = getAdjective(Names.getCultureShort(cells.culture[startCell])) + " Fault";
-    pack.zones.push({i: pack.zones.length, name, type: "Fault", cells: cellsArray, color: "url(#hatch2)"});
-  }
-
-  function addFlood(usedCells) {
-    const cells = pack.cells;
-
-    const fl = cells.fl.filter(Boolean);
-    const meanFlux = d3.mean(fl);
-    const maxFlux = d3.max(fl);
-    const fluxThreshold = (maxFlux - meanFlux) / 2 + meanFlux;
-
-    const bigRiverCells = cells.i.filter(
-      i => !usedCells[i] && cells.h[i] < 50 && cells.r[i] && cells.fl[i] > fluxThreshold && cells.burg[i]
-    );
-    if (!bigRiverCells.length) return;
-
-    const startCell = ra(bigRiverCells);
-    usedCells[startCell] = 1;
-
-    const riverId = cells.r[startCell];
-    const cellsArray = [];
-    const queue = [startCell];
-    const maxCells = rand(5, 30);
-
-    while (queue.length) {
-      const cellId = queue.pop();
-      cellsArray.push(cellId);
-      if (cellsArray.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (
-          usedCells[neibCellId] ||
-          cells.h[neibCellId] < 20 ||
-          cells.r[neibCellId] !== riverId ||
-          cells.h[neibCellId] > 50 ||
-          cells.fl[neibCellId] < meanFlux
-        )
-          return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    const name = getAdjective(pack.burgs[cells.burg[startCell]].name) + " Flood";
-    pack.zones.push({i: pack.zones.length, name, type: "Flood", cells: cellsArray, color: "url(#hatch13)"});
-  }
-
-  function addTsunami(usedCells) {
-    const {cells, features} = pack;
-
-    const coastalCells = cells.i.filter(
-      i => !usedCells[i] && cells.t[i] === -1 && features[cells.f[i]].type !== "lake"
-    );
-    if (!coastalCells.length) return;
-
-    const startCell = ra(coastalCells);
-    usedCells[startCell] = 1;
-
-    const cellsArray = [];
-    const queue = [startCell];
-    const maxCells = rand(10, 30);
-
-    while (queue.length) {
-      const cellId = queue.shift();
-      if (cells.t[cellId] === 1) cellsArray.push(cellId);
-      if (cellsArray.length >= maxCells) break;
-
-      cells.c[cellId].forEach(neibCellId => {
-        if (usedCells[neibCellId]) return;
-        if (cells.t[neibCellId] > 2) return;
-        if (pack.features[cells.f[neibCellId]].type === "lake") return;
-        usedCells[neibCellId] = 1;
-        queue.push(neibCellId);
-      });
-    }
-
-    const name = getAdjective(Names.getCultureShort(cells.culture[startCell])) + " Tsunami";
-    pack.zones.push({i: pack.zones.length, name, type: "Tsunami", cells: cellsArray, color: "url(#hatch13)"});
-  }
-
-  return {generate};
-})();
diff --git a/run_python_server.sh b/run_python_server.sh
deleted file mode 100644
index 7ac82957..00000000
--- a/run_python_server.sh
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/usr/bin/env sh
-if command -v python3 >/dev/null 2>&1; then
-	PYTHON=python3
-elif command -v python >/dev/null 2>&1; then
-	PYTHON=python
-else 
-	echo "Neither 'python' nor 'python3' was found. Please install Python 3 package." >&2
-	exit 1
-fi
-
-chromium http://localhost:8000
-
-$PYTHON -m http.server 8000
diff --git a/styles/ancient.json b/styles/ancient.json
index d57aa524..17d210a5 100644
--- a/styles/ancient.json
+++ b/styles/ancient.json
@@ -258,15 +258,6 @@
     "stroke-width": 0.8,
     "filter": "url(#dropShadow05)"
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.6,
     "filter": "",
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 12,
     "font-size": 12,
     "font-family": "Great Vibes"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Great Vibes"
@@ -386,7 +375,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 22,
     "font-size": 22,
     "font-family": "Great Vibes",
@@ -398,7 +386,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Times New Roman",
diff --git a/styles/atlas.json b/styles/atlas.json
index ef7d7f8a..d8936b65 100644
--- a/styles/atlas.json
+++ b/styles/atlas.json
@@ -258,15 +258,6 @@
     "stroke-width": 1,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Amarante"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Amarante"
@@ -386,7 +375,6 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 21,
     "font-size": 21,
     "font-family": "Amarante",
@@ -398,7 +386,6 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Amarante",
diff --git a/styles/clean.json b/styles/clean.json
index c5aad094..ba6fc3a5 100644
--- a/styles/clean.json
+++ b/styles/clean.json
@@ -260,15 +260,6 @@
     "stroke-width": 1,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,
@@ -319,22 +310,22 @@
     "mask": "url(#land)"
   },
   "#legend": {
-    "data-size": 12,
-    "font-size": 12,
+    "data-size": 12.74,
+    "font-size": 12.74,
     "font-family": "Arial",
     "stroke": "#909090",
-    "stroke-width": 1,
+    "stroke-width": 1.13,
     "stroke-dasharray": 0,
     "stroke-linecap": "round",
-    "data-x": 99,
-    "data-y": 93,
-    "data-columns": 8
+    "data-x": 98.39,
+    "data-y": 12.67,
+    "data-columns": null
   },
+  "#legendBox": {},
   "#burgLabels > #cities": {
     "opacity": 1,
     "fill": "#414141",
     "text-shadow": "white 0 0 4px",
-    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Arial"
@@ -359,8 +350,6 @@
   "#burgLabels > #towns": {
     "opacity": 1,
     "fill": "#414141",
-    "text-shadow": "none",
-    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Arial"
@@ -388,7 +377,6 @@
     "stroke": "#303030",
     "stroke-width": 0,
     "text-shadow": "white 0 0 2px",
-    "letter-spacing": 0,
     "data-size": 10,
     "font-size": 10,
     "font-family": "Arial",
@@ -400,7 +388,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0 0 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Arial",
diff --git a/styles/cyberpunk.json b/styles/cyberpunk.json
index 93f22284..152cd0cd 100644
--- a/styles/cyberpunk.json
+++ b/styles/cyberpunk.json
@@ -256,16 +256,7 @@
   "#emblems": {
     "opacity": 0.75,
     "stroke-width": 0.5,
-    "filter": null
-  },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
+    "filter": ""
   },
   "#texture": {
     "opacity": 0.2,
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Orbitron"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Orbitron"
@@ -386,7 +375,6 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Orbitron",
@@ -398,7 +386,6 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/darkSeas.json b/styles/darkSeas.json
deleted file mode 100644
index 2bc90fa6..00000000
--- a/styles/darkSeas.json
+++ /dev/null
@@ -1,433 +0,0 @@
-{
-  "#map": {
-    "background-color": "#000000",
-    "filter": null,
-    "data-filter": null
-  },
-  "#armies": {
-    "font-size": 8,
-    "box-size": 4,
-    "stroke": "#000",
-    "stroke-width": 0.3,
-    "fill-opacity": 1,
-    "filter": null
-  },
-  "#biomes": {
-    "opacity": 1,
-    "filter": null,
-    "mask": "url(#land)"
-  },
-  "#stateBorders": {
-    "opacity": 1,
-    "stroke": "#000000",
-    "stroke-width": 1.25,
-    "stroke-dasharray": 0,
-    "stroke-linecap": "butt",
-    "filter": null
-  },
-  "#provinceBorders": {
-    "opacity": 0.8,
-    "stroke": "#000000",
-    "stroke-width": 0.5,
-    "stroke-dasharray": 0,
-    "stroke-linecap": "round",
-    "filter": "url(#blurFilter)"
-  },
-  "#cells": {
-    "opacity": null,
-    "stroke": "#808080",
-    "stroke-width": 0.1,
-    "filter": null,
-    "mask": null
-  },
-  "#gridOverlay": {
-    "opacity": 1,
-    "scale": 7.99,
-    "dx": -2,
-    "dy": 3,
-    "type": "square",
-    "stroke": "#000000",
-    "stroke-width": 0.05,
-    "stroke-dasharray": null,
-    "stroke-linecap": null,
-    "transform": null,
-    "filter": null,
-    "mask": null
-  },
-  "#coordinates": {
-    "opacity": 1,
-    "data-size": 12,
-    "font-size": 12,
-    "stroke": "#d4d4d4",
-    "stroke-width": 1,
-    "stroke-dasharray": 5,
-    "stroke-linecap": null,
-    "filter": null,
-    "mask": null
-  },
-  "#compass": {
-    "opacity": 0.8,
-    "transform": null,
-    "filter": null,
-    "mask": "url(#water)",
-    "shape-rendering": "optimizespeed"
-  },
-  "#relig": {
-    "opacity": 0.7,
-    "stroke": "#777777",
-    "stroke-width": 0,
-    "filter": null
-  },
-  "#cults": {
-    "opacity": 0.6,
-    "stroke": "#777777",
-    "stroke-width": 0.5,
-    "stroke-dasharray": null,
-    "stroke-linecap": null,
-    "filter": null
-  },
-  "#landmass": {
-    "opacity": 1,
-    "fill": "#eef6fb",
-    "filter": null
-  },
-  "#markers": {
-    "opacity": null,
-    "rescale": 1,
-    "filter": null
-  },
-  "#prec": {
-    "opacity": null,
-    "stroke": "#000000",
-    "stroke-width": 0.1,
-    "fill": "#003dff",
-    "filter": null
-  },
-  "#population": {
-    "opacity": null,
-    "stroke-width": 1.6,
-    "stroke-dasharray": null,
-    "stroke-linecap": "butt",
-    "filter": null
-  },
-  "#rural": {
-    "stroke": "#0000ff"
-  },
-  "#urban": {
-    "stroke": "#ff0000"
-  },
-  "#freshwater": {
-    "opacity": 1,
-    "fill": "#337379",
-    "stroke": "#236369",
-    "stroke-width": 1,
-    "filter": null
-  },
-  "#salt": {
-    "opacity": 1,
-    "fill": "#409b8a",
-    "stroke": "#388985",
-    "stroke-width": 1,
-    "filter": null
-  },
-  "#sinkhole": {
-    "opacity": 1,
-    "fill": "#5bc9fd",
-    "stroke": "#53a3b0",
-    "stroke-width": 1,
-    "filter": null
-  },
-  "#frozen": {
-    "opacity": 0.95,
-    "fill": "#cdd4e7",
-    "stroke": "#cfe0eb",
-    "stroke-width": 0,
-    "filter": null
-  },
-  "#lava": {
-    "opacity": 0.7,
-    "fill": "#90270d",
-    "stroke": "#f93e0c",
-    "stroke-width": 2,
-    "filter": "url(#crumpled)"
-  },
-  "#dry": {
-    "opacity": 1,
-    "fill": "#c9bfa7",
-    "stroke": "#8e816f",
-    "stroke-width": 1,
-    "filter": null
-  },
-  "#sea_island": {
-    "opacity": 1,
-    "stroke": "#028ac9",
-    "stroke-width": 1,
-    "filter": "",
-    "auto-filter": 0
-  },
-  "#lake_island": {
-    "opacity": 1,
-    "stroke": "#7c8eaf",
-    "stroke-width": 0.35,
-    "filter": null
-  },
-  "#rivers": {
-    "opacity": null,
-    "filter": null,
-    "fill": "#00254c"
-  },
-  "#ruler": {
-    "opacity": null,
-    "filter": null
-  },
-  "#roads": {
-    "opacity": 1,
-    "stroke": "#ff6000",
-    "stroke-width": 1.75,
-    "stroke-dasharray": 0,
-    "stroke-linecap": "butt",
-    "filter": null,
-    "mask": null
-  },
-  "#trails": {
-    "opacity": 1,
-    "stroke": "#ff6000",
-    "stroke-width": 1,
-    "stroke-dasharray": 0,
-    "stroke-linecap": "butt",
-    "filter": null,
-    "mask": null
-  },
-  "#searoutes": {
-    "opacity": 1,
-    "stroke": "#00aeff",
-    "stroke-width": 1,
-    "stroke-dasharray": "2 2",
-    "stroke-linecap": "butt",
-    "filter": null,
-    "mask": null
-  },
-  "#statesBody": {
-    "opacity": 0.5,
-    "filter": null
-  },
-  "#statesHalo": {
-    "opacity": 0,
-    "data-width": 0,
-    "stroke-width": 0,
-    "filter": null
-  },
-  "#provs": {
-    "opacity": 1,
-    "fill": "#000000",
-    "font-size": 10,
-    "font-family": "Georgia",
-    "filter": null
-  },
-  "#temperature": {
-    "opacity": null,
-    "font-size": "8px",
-    "fill": "#000000",
-    "fill-opacity": 0.3,
-    "stroke": null,
-    "stroke-width": 1.8,
-    "stroke-dasharray": null,
-    "stroke-linecap": null,
-    "filter": null
-  },
-  "#ice": {
-    "opacity": 0.8,
-    "fill": "#e8f0f6",
-    "stroke": "#e8f0f6",
-    "stroke-width": 1,
-    "filter": "url(#dropShadow05)"
-  },
-  "#emblems": {
-    "opacity": 1,
-    "stroke-width": 1,
-    "filter": null
-  },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
-  "#texture": {
-    "opacity": 0.2,
-    "filter": null,
-    "mask": "url(#land)",
-    "data-x": 0,
-    "data-y": 0,
-    "data-href": "./images/textures/plaster.jpg"
-  },
-  "#zones": {
-    "opacity": 0.6,
-    "stroke": "#333333",
-    "stroke-width": 0,
-    "stroke-dasharray": null,
-    "stroke-linecap": "butt",
-    "filter": null,
-    "mask": null
-  },
-  "#oceanLayers": {
-    "filter": "",
-    "layers": "none"
-  },
-  "#oceanBase": {
-    "fill": "#00254d"
-  },
-  "#oceanicPattern": {
-    "href": "",
-    "opacity": 1
-  },
-  "#terrs #oceanHeights": {
-    "data-render": 0,
-    "opacity": 1,
-    "scheme": "bright",
-    "terracing": 0,
-    "skip": 0,
-    "relax": 1,
-    "curve": "curveBasisClosed",
-    "filter": null,
-    "mask": null
-  },
-  "#terrs #landHeights": {
-    "opacity": 1,
-    "scheme": "natural",
-    "terracing": 5,
-    "skip": 0,
-    "relax": 1,
-    "curve": "curveBasisClosed",
-    "filter": null,
-    "mask": "url(#land)"
-  },
-  "#legend": {
-    "data-size": 13,
-    "font-size": 13,
-    "font-family": "Georgia",
-    "stroke": "#812929",
-    "stroke-width": 2.5,
-    "stroke-dasharray": "0 4 10 4",
-    "stroke-linecap": "round",
-    "data-x": 99,
-    "data-y": 93,
-    "data-columns": 8
-  },
-  "#burgLabels > #cities": {
-    "opacity": 1,
-    "fill": "#000000",
-    "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
-    "data-size": 7,
-    "font-size": 7,
-    "font-family": "Lugrasimo"
-  },
-  "#burgIcons > #cities": {
-    "opacity": 0.7,
-    "fill": "#000000",
-    "size": 1.75,
-    "stroke": "#000000",
-    "stroke-width": 0,
-    "stroke-dasharray": 0,
-    "stroke-linecap": "butt"
-  },
-  "#anchors > #cities": {
-    "opacity": 1,
-    "fill": "#ffffff",
-    "size": 3.5,
-    "stroke": "#3e3e4b",
-    "stroke-width": 1.2
-  },
-  "#burgLabels > #towns": {
-    "opacity": 1,
-    "fill": "#000000",
-    "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
-    "data-size": 5,
-    "font-size": 5,
-    "font-family": "Lugrasimo"
-  },
-  "#burgIcons > #towns": {
-    "opacity": 0.7,
-    "fill": "#000000",
-    "size": 1.25,
-    "stroke": "#000000",
-    "stroke-width": 0,
-    "stroke-dasharray": 0,
-    "stroke-linecap": "butt"
-  },
-  "#anchors > #towns": {
-    "opacity": 1,
-    "fill": "#ffffff",
-    "size": 2,
-    "stroke": "#3e3e4b",
-    "stroke-width": 1.2
-  },
-  "#labels > #states": {
-    "opacity": 1,
-    "fill": "#000000",
-    "stroke": "#000000",
-    "stroke-width": 0,
-    "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
-    "data-size": 21,
-    "font-size": 21,
-    "font-family": "Eagle Lake",
-    "filter": null
-  },
-  "#labels > #addedLabels": {
-    "opacity": 1,
-    "fill": "#000000",
-    "stroke": "#000000",
-    "stroke-width": 0,
-    "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
-    "data-size": 18,
-    "font-size": 18,
-    "font-family": "Eagle Lake",
-    "filter": null
-  },
-  "#fogging": {
-    "opacity": 0.98,
-    "fill": "#30426f",
-    "filter": null
-  },
-  "#vignette": {
-    "opacity": 0.2,
-    "fill": "#000000",
-    "filter": null
-  },
-  "#vignette-rect": {
-    "x": "0.2%",
-    "y": "0.3%",
-    "width": "99.8%",
-    "height": "99.4%",
-    "rx": "5%",
-    "ry": "5%",
-    "filter": "blur(30px)"
-  },
-  "#scaleBar": {
-    "opacity": 1,
-    "fill": "#f6f6f6",
-    "font-size": 10,
-    "data-bar-size": 2,
-    "data-x": 99,
-    "data-y": 99,
-    "data-label": ""
-  },
-  "#scaleBarBack": {
-    "opacity": 1,
-    "fill": "#00254d",
-    "stroke": "#00151d",
-    "stroke-width": 2,
-    "filter": null,
-    "data-top": 20,
-    "data-right": 15,
-    "data-bottom": 15,
-    "data-left": 10
-  }
-}
diff --git a/styles/default.json b/styles/default.json
index 23b06487..5cf061ba 100644
--- a/styles/default.json
+++ b/styles/default.json
@@ -248,25 +248,16 @@
   },
   "#ice": {
     "opacity": 0.9,
-    "fill": "#f1f8fe",
+    "fill": "#e8f0f6",
     "stroke": "#e8f0f6",
-    "stroke-width": 0.5,
-    "filter": "url(#dropShadow01)"
+    "stroke-width": 1,
+    "filter": "url(#dropShadow05)"
   },
   "#emblems": {
     "opacity": 0.9,
     "stroke-width": 1,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": null,
     "filter": null,
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Almendra SC"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Almendra SC"
@@ -386,7 +375,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 22,
     "font-size": 22,
     "font-family": "Almendra SC",
@@ -398,7 +386,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/gloom.json b/styles/gloom.json
index 19318882..766db87b 100644
--- a/styles/gloom.json
+++ b/styles/gloom.json
@@ -260,15 +260,6 @@
     "stroke-width": 0.5,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.8,
     "filter": null,
@@ -335,7 +326,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0 0 2px",
-    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Underdog"
@@ -360,8 +350,6 @@
   "#burgLabels > #towns": {
     "opacity": 1,
     "fill": "#3e3e4b",
-    "text-shadow": "none",
-    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Underdog"
@@ -389,7 +377,6 @@
     "stroke": "#b5b5b5",
     "stroke-width": 0,
     "text-shadow": "white 0 0 2px",
-    "letter-spacing": 0,
     "data-size": 20,
     "font-size": 20,
     "font-family": "Underdog",
@@ -401,7 +388,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0 0 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Underdog",
diff --git a/styles/light.json b/styles/light.json
index de539872..30748daf 100644
--- a/styles/light.json
+++ b/styles/light.json
@@ -258,15 +258,6 @@
     "stroke-width": 1,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.4,
     "filter": null,
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#3a3a3a",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "IM Fell English"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "IM Fell English"
@@ -386,7 +375,6 @@
     "stroke": "#000000",
     "stroke-width": 0.3,
     "text-shadow": "white 0px 0px 6px",
-    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "IM Fell English",
@@ -398,7 +386,6 @@
     "stroke": "#701b05",
     "stroke-width": 0.1,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 6,
     "font-size": 6,
     "font-family": "IM Fell English",
diff --git a/styles/monochrome.json b/styles/monochrome.json
index 1ee17c43..6af0d6a1 100644
--- a/styles/monochrome.json
+++ b/styles/monochrome.json
@@ -261,15 +261,6 @@
     "stroke-width": 0.5,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#zones": {
     "opacity": 0.6,
     "stroke": "#333333",
@@ -328,7 +319,6 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Courier New"
@@ -354,7 +344,6 @@
     "opacity": 1,
     "fill": "#000000",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Courier New"
@@ -382,7 +371,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Courier New",
@@ -393,8 +381,7 @@
     "fill": "#3e3e4b",
     "stroke": "#3a3a3a",
     "stroke-width": 0,
-    "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
+    "text-shadow": "white 0 0 4px",
     "data-size": 18,
     "font-size": 18,
     "font-family": "Courier New",
diff --git a/styles/night.json b/styles/night.json
index 67a5e799..790cad8d 100644
--- a/styles/night.json
+++ b/styles/night.json
@@ -258,15 +258,6 @@
     "stroke-width": null,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.1,
     "filter": null,
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#dbdbe1",
     "text-shadow": "black 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 8,
     "font-size": 8,
     "font-family": "Courier New"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#ffffff",
     "text-shadow": "black 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 4.28,
     "font-size": 4.28,
     "font-family": "Courier New"
@@ -386,7 +375,6 @@
     "stroke": "#7a83ae",
     "stroke-width": 0.3,
     "text-shadow": "black 0px 0px 0.1px",
-    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "Courier New",
@@ -397,8 +385,7 @@
     "fill": "#3e3e4b",
     "stroke": "#3a3a3a",
     "stroke-width": 0,
-    "text-shadow": "black 0px 0px 4px",
-    "letter-spacing": 0,
+    "text-shadow": "white 0px 0px 4px",
     "data-size": 18,
     "font-size": 18,
     "font-family": "Almendra SC",
diff --git a/styles/pale.json b/styles/pale.json
index 8e839600..3a32ed6d 100644
--- a/styles/pale.json
+++ b/styles/pale.json
@@ -258,15 +258,6 @@
     "stroke-width": 1,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.4,
     "filter": null,
@@ -332,7 +323,6 @@
     "opacity": 0.8,
     "fill": "#3a3a3a",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 7,
     "font-size": 7,
     "font-family": "Arima Madurai"
@@ -358,7 +348,6 @@
     "opacity": 0.8,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 4,
     "font-size": 4,
     "font-family": "Arima Madurai"
@@ -386,7 +375,6 @@
     "stroke": "#000000",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 6px",
-    "letter-spacing": 0,
     "data-size": 14,
     "font-size": 14,
     "font-family": "Arima Madurai",
@@ -398,7 +386,6 @@
     "stroke": "#701b05",
     "stroke-width": 0.1,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 6,
     "font-size": 6,
     "font-family": "Arima Madurai",
diff --git a/styles/watercolor.json b/styles/watercolor.json
index 982c1b49..4386940f 100644
--- a/styles/watercolor.json
+++ b/styles/watercolor.json
@@ -258,15 +258,6 @@
     "stroke-width": 1,
     "filter": null
   },
-  "#emblems > #stateEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #provinceEmblems": {
-    "data-size": 1
-  },
-  "#emblems > #burgEmblems": {
-    "data-size": 1
-  },
   "#texture": {
     "opacity": 0.2,
     "filter": null,
@@ -332,7 +323,6 @@
     "opacity": 1,
     "fill": "#043449",
     "text-shadow": "white 0px 0px 2px",
-    "letter-spacing": 0,
     "data-size": 5,
     "font-size": 5,
     "font-family": "Comfortaa"
@@ -358,7 +348,6 @@
     "opacity": 1,
     "fill": "#3e3e4b",
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 3,
     "font-size": 3,
     "font-family": "Comfortaa"
@@ -386,7 +375,6 @@
     "stroke": "#000000",
     "stroke-width": 0.15,
     "text-shadow": "black 1px 1px 3px",
-    "letter-spacing": 0,
     "data-size": 18,
     "font-size": 18,
     "font-family": "Gloria Hallelujah",
@@ -398,7 +386,6 @@
     "stroke": "#3a3a3a",
     "stroke-width": 0,
     "text-shadow": "white 0px 0px 4px",
-    "letter-spacing": 0,
     "data-size": 16,
     "font-size": 16,
     "font-family": "Comfortaa",
diff --git a/sw.js b/sw.js
index bd0382c6..0b59c217 100644
--- a/sw.js
+++ b/sw.js
@@ -1,7 +1,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/6.2.0/workbox-sw.js");
 
 const {Route, registerRoute} = workbox.routing;
-const {CacheFirst, NetworkFirst, StaleWhileRevalidate} = workbox.strategies;
+const {CacheFirst, NetworkFirst} = workbox.strategies;
 const {CacheableResponsePlugin} = workbox.cacheableResponse;
 const {ExpirationPlugin} = workbox.expiration;
 
@@ -18,11 +18,8 @@ registerRoute(
 
 registerRoute(
   ({request, url}) =>
-    request.destination === "script" &&
-    !url.pathname.endsWith("min.js") &&
-    !url.pathname.includes("versioning.js") &&
-    !url.pathname.includes("google"),
-  new StaleWhileRevalidate({
+    request.destination === "script" && !url.pathname.endsWith("min.js") && !url.pathname.includes("versioning.js"),
+  new CacheFirst({
     cacheName: "fmg-scripts",
     plugins: [
       new CacheableResponsePlugin({statuses: [0, 200]}),
diff --git a/utils/commonUtils.js b/utils/commonUtils.js
index 2be3e36d..910cc95d 100644
--- a/utils/commonUtils.js
+++ b/utils/commonUtils.js
@@ -3,12 +3,6 @@
 
 // clip polygon by graph bbox
 function clipPoly(points, secure = 0) {
-  if (points.length < 2) return points;
-  if (points.some(point => point === undefined)) {
-    ERROR && console.error("Undefined point in clipPoly", points);
-    return points;
-  }
-
   return polygonclip(points, [0, 0, graphWidth, graphHeight], secure);
 }
 
diff --git a/utils/debugUtils.js b/utils/debugUtils.js
index 1859f3ae..b48ff0d6 100644
--- a/utils/debugUtils.js
+++ b/utils/debugUtils.js
@@ -33,7 +33,7 @@ function drawPolygons(data) {
 
 function drawRouteConnections() {
   debug.select("#connections").remove();
-  const routes = debug.append("g").attr("id", "connections").attr("stroke-width", 0.8);
+  const routes = debug.append("g").attr("id", "connections").attr("stroke-width", 0.4);
 
   const points = pack.cells.p;
   const links = pack.cells.routes;
@@ -56,17 +56,3 @@ function drawRouteConnections() {
     }
   }
 }
-
-function drawPoint([x, y], {color = "red", radius = 0.5}) {
-  debug.append("circle").attr("cx", x).attr("cy", y).attr("r", radius).attr("fill", color);
-}
-
-function drawPath(points, {color = "red", width = 0.5}) {
-  const lineGen = d3.line().curve(d3.curveBundle);
-  debug
-    .append("path")
-    .attr("d", round(lineGen(points)))
-    .attr("stroke", color)
-    .attr("stroke-width", width)
-    .attr("fill", "none");
-}
diff --git a/utils/graphUtils.js b/utils/graphUtils.js
index 82577b82..55b9df31 100644
--- a/utils/graphUtils.js
+++ b/utils/graphUtils.js
@@ -241,8 +241,10 @@ void (function addFindAll() {
   };
 
   const tree_filter = function (x, y, radius) {
-    const t = {x, y, x0: this._x0, y0: this._y0, x3: this._x1, y3: this._y1, quads: [], node: this._root};
-    if (t.node) t.quads.push(new Quad(t.node, t.x0, t.y0, t.x3, t.y3));
+    var t = {x, y, x0: this._x0, y0: this._y0, x3: this._x1, y3: this._y1, quads: [], node: this._root};
+    if (t.node) {
+      t.quads.push(new Quad(t.node, t.x0, t.y0, t.x3, t.y3));
+    }
     radiusSearchInit(t, radius);
 
     var i = 0;
diff --git a/utils/languageUtils.js b/utils/languageUtils.js
index 9caa1b6f..87f5d67d 100644
--- a/utils/languageUtils.js
+++ b/utils/languageUtils.js
@@ -135,7 +135,7 @@ const adjectivizationRules = [
   {
     name: "an",
     probability: 0.5,
-    condition: new RegExp("^[a-zA-Z]{0,7}$"),
+    condition: new RegExp("^[a-zA-Z]{0-7}$"),
     action: noun => trimVowels(noun) + "an"
   }
 ];
diff --git a/utils/pathUtils.js b/utils/pathUtils.js
deleted file mode 100644
index deafd678..00000000
--- a/utils/pathUtils.js
+++ /dev/null
@@ -1,235 +0,0 @@
-"use strict";
-
-// get continuous paths (isolines) for all cells at once based on getType(cellId) comparison
-function getIsolines(graph, getType, options = {polygons: false, fill: false, halo: false, waterGap: false}) {
-  const {cells, vertices} = graph;
-  const isolines = {};
-
-  const checkedCells = new Uint8Array(cells.i.length);
-  const addToChecked = cellId => (checkedCells[cellId] = 1);
-  const isChecked = cellId => checkedCells[cellId] === 1;
-
-  for (const cellId of cells.i) {
-    if (isChecked(cellId) || !getType(cellId)) continue;
-    addToChecked(cellId);
-
-    const type = getType(cellId);
-    const ofSameType = cellId => getType(cellId) === type;
-    const ofDifferentType = cellId => getType(cellId) !== type;
-
-    const onborderCell = cells.c[cellId].find(ofDifferentType);
-    if (onborderCell === undefined) continue;
-
-    // check if inner lake. Note there is no shoreline for grid features
-    const feature = graph.features[cells.f[onborderCell]];
-    if (feature.type === "lake" && feature.shoreline?.every(ofSameType)) continue;
-
-    const startingVertex = cells.v[cellId].find(v => vertices.c[v].some(ofDifferentType));
-    if (startingVertex === undefined) throw new Error(`Starting vertex for cell ${cellId} is not found`);
-
-    const vertexChain = connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing: true});
-    if (vertexChain.length < 3) continue;
-
-    addIsoline(type, vertices, vertexChain);
-  }
-
-  return isolines;
-
-  function addIsoline(type, vertices, vertexChain) {
-    if (!isolines[type]) isolines[type] = {};
-
-    if (options.polygons) {
-      if (!isolines[type].polygons) isolines[type].polygons = [];
-      isolines[type].polygons.push(vertexChain.map(vertexId => vertices.p[vertexId]));
-    }
-
-    if (options.fill) {
-      if (!isolines[type].fill) isolines[type].fill = "";
-      isolines[type].fill += getFillPath(vertices, vertexChain);
-    }
-
-    if (options.waterGap) {
-      if (!isolines[type].waterGap) isolines[type].waterGap = "";
-      const isLandVertex = vertexId => vertices.c[vertexId].every(i => cells.h[i] >= 20);
-      isolines[type].waterGap += getBorderPath(vertices, vertexChain, isLandVertex);
-    }
-
-    if (options.halo) {
-      if (!isolines[type].halo) isolines[type].halo = "";
-      const isBorderVertex = vertexId => vertices.c[vertexId].some(i => cells.b[i]);
-      isolines[type].halo += getBorderPath(vertices, vertexChain, isBorderVertex);
-    }
-  }
-}
-
-function getFillPath(vertices, vertexChain) {
-  const points = vertexChain.map(vertexId => vertices.p[vertexId]);
-  const firstPoint = points.shift();
-  return `M${firstPoint} L${points.join(" ")} Z`;
-}
-
-function getBorderPath(vertices, vertexChain, discontinue) {
-  let discontinued = true;
-  let lastOperation = "";
-  const path = vertexChain.map(vertexId => {
-    if (discontinue(vertexId)) {
-      discontinued = true;
-      return "";
-    }
-
-    const operation = discontinued ? "M" : "L";
-    discontinued = false;
-    lastOperation = operation;
-
-    const command = operation === "L" && operation === lastOperation ? "" : operation;
-    return ` ${command}${vertices.p[vertexId]}`;
-  });
-
-  return path.join("").trim();
-}
-
-// get single path for an non-continuous array of cells
-function getVertexPath(cellsArray) {
-  const {cells, vertices} = pack;
-
-  const cellsObj = Object.fromEntries(cellsArray.map(cellId => [cellId, true]));
-  const ofSameType = cellId => cellsObj[cellId];
-  const ofDifferentType = cellId => !cellsObj[cellId];
-
-  const checkedCells = new Uint8Array(cells.c.length);
-  const addToChecked = cellId => (checkedCells[cellId] = 1);
-  const isChecked = cellId => checkedCells[cellId] === 1;
-
-  let path = "";
-
-  for (const cellId of cellsArray) {
-    if (isChecked(cellId)) continue;
-
-    const onborderCell = cells.c[cellId].find(ofDifferentType);
-    if (onborderCell === undefined) continue;
-
-    const feature = pack.features[cells.f[onborderCell]];
-    if (feature.type === "lake" && feature.shoreline) {
-      if (feature.shoreline.every(ofSameType)) continue; // inner lake
-    }
-
-    const startingVertex = cells.v[cellId].find(v => vertices.c[v].some(ofDifferentType));
-    if (startingVertex === undefined) throw new Error(`Starting vertex for cell ${cellId} is not found`);
-
-    const vertexChain = connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing: true});
-    if (vertexChain.length < 3) continue;
-
-    path += getFillPath(vertices, vertexChain);
-  }
-
-  return path;
-}
-
-function getPolesOfInaccessibility(graph, getType) {
-  const isolines = getIsolines(graph, getType, {polygons: true});
-
-  const poles = Object.entries(isolines).map(([id, isoline]) => {
-    const multiPolygon = isoline.polygons.sort((a, b) => b.length - a.length);
-    const [x, y] = polylabel(multiPolygon, 20);
-    return [id, [rn(x), rn(y)]];
-  });
-
-  return Object.fromEntries(poles);
-}
-
-function connectVertices({vertices, startingVertex, ofSameType, addToChecked, closeRing}) {
-  const MAX_ITERATIONS = vertices.c.length;
-  const chain = []; // vertices chain to form a path
-
-  let next = startingVertex;
-  for (let i = 0; i === 0 || next !== startingVertex; i++) {
-    const previous = chain.at(-1);
-    const current = next;
-    chain.push(current);
-
-    const neibCells = vertices.c[current];
-    if (addToChecked) neibCells.filter(ofSameType).forEach(addToChecked);
-
-    const [c1, c2, c3] = neibCells.map(ofSameType);
-    const [v1, v2, v3] = vertices.v[current];
-
-    if (v1 !== previous && c1 !== c2) next = v1;
-    else if (v2 !== previous && c2 !== c3) next = v2;
-    else if (v3 !== previous && c1 !== c3) next = v3;
-
-    if (next >= vertices.c.length) {
-      ERROR && console.error("ConnectVertices: next vertex is out of bounds");
-      break;
-    }
-
-    if (next === current) {
-      ERROR && console.error("ConnectVertices: next vertex is not found");
-      break;
-    }
-
-    if (i === MAX_ITERATIONS) {
-      ERROR && console.error("ConnectVertices: max iterations reached", MAX_ITERATIONS);
-      break;
-    }
-  }
-
-  if (closeRing) chain.push(startingVertex);
-  return chain;
-}
-
-/**
- * Finds the shortest path between two cells using a cost-based pathfinding algorithm.
- * @param {number} start - The ID of the starting cell.
- * @param {(id: number) => boolean} isExit - A function that returns true if the cell is the exit cell.
- * @param {(current: number, next: number) => number} getCost - A function that returns the path cost from current cell to the next cell. Must return `Infinity` for impassable connections.
- * @returns {number[] | null} An array of cell IDs of the path from start to exit, or null if no path is found or start and exit are the same.
- */
-function findPath(start, isExit, getCost) {
-  if (isExit(start)) return null;
-
-  const from = [];
-  const cost = [];
-  const queue = new FlatQueue();
-  queue.push(start, 0);
-
-  while (queue.length) {
-    const currentCost = queue.peekValue();
-    const current = queue.pop();
-
-    for (const next of pack.cells.c[current]) {
-      if (isExit(next)) {
-        from[next] = current;
-        return restorePath(next, start, from);
-      }
-
-      const nextCost = getCost(current, next);
-      if (nextCost === Infinity) continue; // impassable cell
-      const totalCost = currentCost + nextCost;
-
-      if (totalCost >= cost[next]) continue; // has cheaper path
-      from[next] = current;
-      cost[next] = totalCost;
-      queue.push(next, totalCost);
-    }
-  }
-
-  return null;
-}
-
-// supplementary function for findPath
-function restorePath(exit, start, from) {
-  const pathCells = [];
-
-  let current = exit;
-  let prev = exit;
-
-  while (current !== start) {
-    pathCells.push(current);
-    prev = from[current];
-    current = prev;
-  }
-
-  pathCells.push(current);
-
-  return pathCells.reverse();
-}
diff --git a/utils/probabilityUtils.js b/utils/probabilityUtils.js
index db74c85f..b0234251 100644
--- a/utils/probabilityUtils.js
+++ b/utils/probabilityUtils.js
@@ -22,14 +22,7 @@ function each(n) {
   return i => i % n === 0;
 }
 
-/* Random Gaussian number generator
- * @param {number} expected - expected value
- * @param {number} deviation - standard deviation
- * @param {number} min - minimum value
- * @param {number} max - maximum value
- * @param {number} round - round value to n decimals
- * @return {number} random number
- */
+// random number (normal or gaussian distribution)
 function gauss(expected = 100, deviation = 30, min = 0, max = 300, round = 0) {
   return rn(minmax(d3.randomNormal(expected, deviation)(), min, max), round);
 }
diff --git a/utils/shorthands.js b/utils/shorthands.js
index 36e9d09a..043599fc 100644
--- a/utils/shorthands.js
+++ b/utils/shorthands.js
@@ -2,10 +2,8 @@ const byId = document.getElementById.bind(document);
 
 Node.prototype.on = function (name, fn, options) {
   this.addEventListener(name, fn, options);
-  return this;
 };
 
 Node.prototype.off = function (name, fn) {
   this.removeEventListener(name, fn);
-  return this;
 };
diff --git a/utils/stringUtils.js b/utils/stringUtils.js
index 1027ee8f..6325d278 100644
--- a/utils/stringUtils.js
+++ b/utils/stringUtils.js
@@ -56,11 +56,3 @@ JSON.isValid = str => {
   }
   return true;
 };
-
-JSON.safeParse = str => {
-  try {
-    return JSON.parse(str);
-  } catch (e) {
-    return null;
-  }
-};
diff --git a/versioning.js b/versioning.js
index 89c2124b..099068d9 100644
--- a/versioning.js
+++ b/versioning.js
@@ -1,30 +1,21 @@
 "use strict";
-/**
- * Version Control Guidelines
- * --------------------------
- * We use Semantic Versioning: major.minor.patch. Refer to https://semver.org
- * Our .map file format is considered the public API.
- *
- * Update the version MANUALLY on each merge to main:
- * 1. MAJOR version: Incompatible changes that break existing maps
- * 2. MINOR version: Additions or changes that are backward-compatible but may require old .map files to be updated
- * 3. PATCH version: Backward-compatible bug fixes and small features that do not affect the .map file format
- *
- * Example: 1.102.2 -> Major version 1, Minor version 102, Patch version 2
- */
 
-const VERSION = "1.108.13";
-if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format or parsing function");
+// version and caching control
+const version = "1.99.01"; // generator version, update each time
 
 {
-  document.title += " v" + VERSION;
+  document.title += " v" + version;
   const loadingScreenVersion = document.getElementById("versionText");
-  if (loadingScreenVersion) loadingScreenVersion.innerText = `v${VERSION}`;
+  if (loadingScreenVersion) loadingScreenVersion.innerText = `v${version}`;
 
-  const storedVersion = localStorage.getItem("version");
-  if (compareVersions(storedVersion, VERSION, {major: true, minor: true, patch: false}).isOlder) {
-    setTimeout(showUpdateWindow, 6000);
-  }
+  const versionNumber = parseFloat(version);
+  const storedVersion = localStorage.getItem("version") ? parseFloat(localStorage.getItem("version")) : 0;
+
+  const isOutdated = storedVersion !== versionNumber;
+  if (isOutdated) clearCache();
+
+  const showUpdate = storedVersion < versionNumber;
+  if (showUpdate) setTimeout(showUpdateWindow, 6000);
 
   function showUpdateWindow() {
     const changelog = "https://github.com/Azgaar/Fantasy-Map-Generator/wiki/Changelog";
@@ -32,93 +23,58 @@ if (parseMapVersion(VERSION) !== VERSION) alert("versioning.js: Invalid format o
     const discord = "https://discordapp.com/invite/X7E84HU";
     const patreon = "https://www.patreon.com/azgaar";
 
-    alertMessage.innerHTML = /* html */ `The Fantasy Map Generator is updated up to version <strong>${VERSION}</strong>. This version is compatible with <a href="${changelog}" target="_blank">previous versions</a>, loaded save files will be auto-updated.
-      ${storedVersion ? "<span>Click on OK and then reload the page to fetch fresh code.</span>" : ""}
+    alertMessage.innerHTML = /* html */ `The Fantasy Map Generator is updated up to version <strong>${version}</strong>. This version is compatible with <a href="${changelog}" target="_blank">previous versions</a>, loaded save files will be auto-updated.
+      ${storedVersion ? "<span>Reload the page to fetch fresh code.</span>" : ""}
 
       <ul>
         <strong>Latest changes:</strong>
-        <li>Ability to set custom image as Marker or Regiment icon</li>
-        <li>Submap and Transform tools rework</li>
-        <li>Azgaar Bot to answer questions and provide help</li>
-        <li>Labels: ability to set letter spacing</li>
-        <li>Zones performance improvement</li>
-        <li>Notes Editor: on-demand AI text generation</li>
-        <li>New style preset: Dark Seas</li>
-        <li>New routes generation algorithm</li>
+        <li>New routes generatation algorithm</li>
         <li>Routes overview tool</li>
         <li>Configurable longitude</li>
         <li>Preview villages map</li>
         <li>Ability to render ocean heightmap</li>
+        <li>Scale bar styling features</li>
+        <li>Vignette visual layer and vignette styling options</li>
+        <li>Ability to define custom heightmap color scheme</li>
+        <li>New style preset Night and new heightmap color schemes</li>
+        <li>Random encounter markers (integration with <a href="https://deorum.vercel.app/" target="_blank">Deorum</a>)</li>
+        <li>Auto-load of the last saved map is now optional (see <i>Onload behavior</i> in Options)</li>
+        <li>New label placement algorithm for states</li>
+        <li>North and South Poles temperature can be set independently</li>
+        <li>More than 70 new heraldic charges</li>
+        <li>Multi-color heraldic charges support</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>
       <span><i>Thanks for all supporters on <a href="${patreon}" target="_blank">Patreon</a>!</i></span>`;
 
+    const buttons = {
+      Ok: function () {
+        $(this).dialog("close");
+        if (storedVersion) localStorage.clear();
+        localStorage.setItem("version", version);
+      }
+    };
+
+    if (storedVersion) {
+      buttons.Reload = () => {
+        localStorage.clear();
+        localStorage.setItem("version", version);
+        location.reload();
+      };
+    }
+
     $("#alert").dialog({
       resizable: false,
       title: "Fantasy Map Generator update",
       width: "28em",
       position: {my: "center center-4em", at: "center", of: "svg"},
-      buttons: {
-        "Clear cache": () => cleanupData(),
-        "Don't show again": function () {
-          $(this).dialog("close");
-          localStorage.setItem("version", VERSION);
-        }
-      }
+      buttons
     });
   }
-}
 
-async function cleanupData() {
-  await clearCache();
-  localStorage.clear();
-  localStorage.setItem("version", VERSION);
-  localStorage.setItem("disable_click_arrow_tooltip", "true");
-  location.reload();
-}
-
-async function clearCache() {
-  const cacheNames = await caches.keys();
-  return Promise.all(cacheNames.map(cacheName => caches.delete(cacheName)));
-}
-
-function parseMapVersion(version) {
-  let [major, minor, patch] = version.split(".");
-
-  if (patch === undefined) {
-    // e.g. 1.732
-    minor = minor.slice(0, 2);
-    patch = minor.slice(2);
+  async function clearCache() {
+    const cacheNames = await caches.keys();
+    Promise.all(cacheNames.map(cacheName => caches.delete(cacheName)));
   }
-
-  // e.g. 0.7b
-  major = parseInt(major) || 0;
-  minor = parseInt(minor) || 0;
-  patch = parseInt(patch) || 0;
-
-  return `${major}.${minor}.${patch}`;
-}
-
-function isValidVersion(versionString) {
-  if (!versionString) return false;
-  const [major, minor, patch] = versionString.split(".");
-  return !isNaN(major) && !isNaN(minor) && !isNaN(patch);
-}
-
-function compareVersions(version1, version2, options = {major: true, minor: true, patch: true}) {
-  if (!isValidVersion(version1) || !isValidVersion(version2)) return {isEqual: false, isNewer: false, isOlder: false};
-
-  let [major1, minor1, patch1] = version1.split(".").map(Number);
-  let [major2, minor2, patch2] = version2.split(".").map(Number);
-
-  if (!options.major) major1 = major2 = 0;
-  if (!options.minor) minor1 = minor2 = 0;
-  if (!options.patch) patch1 = patch2 = 0;
-
-  const isEqual = major1 === major2 && minor1 === minor2 && patch1 === patch2;
-  const isNewer = major1 > major2 || (major1 === major2 && (minor1 > minor2 || (minor1 === minor2 && patch1 > patch2)));
-  const isOlder = major1 < major2 || (major1 === major2 && (minor1 < minor2 || (minor1 === minor2 && patch1 < patch2)));
-
-  return {isEqual, isNewer, isOlder};
 }