diff --git a/docs/battle-map-terrain-atlas-pipeline.md b/docs/battle-map-terrain-atlas-pipeline.md
index 9d6bde7..7ad10a2 100644
--- a/docs/battle-map-terrain-atlas-pipeline.md
+++ b/docs/battle-map-terrain-atlas-pipeline.md
@@ -2,7 +2,7 @@
 
 ## Scope
 
-The first fifteen campaign battles now use the same hand-painted tactical map pipeline. The renderer still reads the original scenario tile coordinates and battle logic; only the map texture asset changes from flat/vector map art to low-contrast raster terrain.
+The first twenty campaign battles now use the same hand-painted tactical map pipeline. The renderer still reads the original scenario tile coordinates and battle logic; only the map texture asset changes from flat/vector map art to low-contrast raster terrain.
 
 ## Art Direction
 
@@ -32,6 +32,11 @@ python scripts/generate-handpaint-map-sample.py --map twelfth --webp-quality 90
 python scripts/generate-handpaint-map-sample.py --map thirteenth --webp-quality 90
 python scripts/generate-handpaint-map-sample.py --map fourteenth --webp-quality 90
 python scripts/generate-handpaint-map-sample.py --map fifteenth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map sixteenth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map seventeenth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map eighteenth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map nineteenth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twentieth --webp-quality 90
 ```
 
 ## Current Assets
@@ -51,6 +56,11 @@ python scripts/generate-handpaint-map-sample.py --map fifteenth --webp-quality 9
 - `src/assets/images/battle/thirteenth-battle-map.webp`
 - `src/assets/images/battle/fourteenth-battle-map.webp`
 - `src/assets/images/battle/fifteenth-battle-map.webp`
+- `src/assets/images/battle/sixteenth-battle-map.webp`
+- `src/assets/images/battle/seventeenth-battle-map.webp`
+- `src/assets/images/battle/eighteenth-battle-map.webp`
+- `src/assets/images/battle/nineteenth-battle-map.webp`
+- `src/assets/images/battle/twentieth-battle-map.webp`
 
 ## QA Outputs
 
@@ -82,5 +92,15 @@ python scripts/generate-handpaint-map-sample.py --map fifteenth --webp-quality 9
 - `docs/fourteenth-battle-map-handpaint-preview.png`
 - `docs/fifteenth-battle-map-handpaint-before-after.png`
 - `docs/fifteenth-battle-map-handpaint-preview.png`
+- `docs/sixteenth-battle-map-handpaint-before-after.png`
+- `docs/sixteenth-battle-map-handpaint-preview.png`
+- `docs/seventeenth-battle-map-handpaint-before-after.png`
+- `docs/seventeenth-battle-map-handpaint-preview.png`
+- `docs/eighteenth-battle-map-handpaint-before-after.png`
+- `docs/eighteenth-battle-map-handpaint-preview.png`
+- `docs/nineteenth-battle-map-handpaint-before-after.png`
+- `docs/nineteenth-battle-map-handpaint-preview.png`
+- `docs/twentieth-battle-map-handpaint-before-after.png`
+- `docs/twentieth-battle-map-handpaint-preview.png`
 
 Browser screenshots are saved per verification run after build/deploy.
diff --git a/docs/eighteenth-battle-map-handpaint-before-after.png b/docs/eighteenth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..3196676
Binary files /dev/null and b/docs/eighteenth-battle-map-handpaint-before-after.png differ
diff --git a/docs/eighteenth-battle-map-handpaint-preview.png b/docs/eighteenth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..7c6af3a
Binary files /dev/null and b/docs/eighteenth-battle-map-handpaint-preview.png differ
diff --git a/docs/nineteenth-battle-map-handpaint-before-after.png b/docs/nineteenth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..b967842
Binary files /dev/null and b/docs/nineteenth-battle-map-handpaint-before-after.png differ
diff --git a/docs/nineteenth-battle-map-handpaint-preview.png b/docs/nineteenth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..694141d
Binary files /dev/null and b/docs/nineteenth-battle-map-handpaint-preview.png differ
diff --git a/docs/seventeenth-battle-map-handpaint-before-after.png b/docs/seventeenth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..559d7aa
Binary files /dev/null and b/docs/seventeenth-battle-map-handpaint-before-after.png differ
diff --git a/docs/seventeenth-battle-map-handpaint-preview.png b/docs/seventeenth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..c8f3b2b
Binary files /dev/null and b/docs/seventeenth-battle-map-handpaint-preview.png differ
diff --git a/docs/sixteenth-battle-map-handpaint-before-after.png b/docs/sixteenth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..87c1851
Binary files /dev/null and b/docs/sixteenth-battle-map-handpaint-before-after.png differ
diff --git a/docs/sixteenth-battle-map-handpaint-preview.png b/docs/sixteenth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..577072d
Binary files /dev/null and b/docs/sixteenth-battle-map-handpaint-preview.png differ
diff --git a/docs/twentieth-battle-map-handpaint-before-after.png b/docs/twentieth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..56df291
Binary files /dev/null and b/docs/twentieth-battle-map-handpaint-before-after.png differ
diff --git a/docs/twentieth-battle-map-handpaint-preview.png b/docs/twentieth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..43eb11f
Binary files /dev/null and b/docs/twentieth-battle-map-handpaint-preview.png differ
diff --git a/scripts/generate-handpaint-map-sample.py b/scripts/generate-handpaint-map-sample.py
index 1ce90ce..4c12c3c 100644
--- a/scripts/generate-handpaint-map-sample.py
+++ b/scripts/generate-handpaint-map-sample.py
@@ -154,6 +154,51 @@ MAP_CONFIGS = {
         "before": BATTLE_IMAGE_DIR / "fifteenth-battle-map.svg",
         "seed": 240844,
     },
+    "sixteenth": {
+        "slug": "sixteenth-battle-map",
+        "terrain_export": "sixteenthBattleMap",
+        "units_export": "sixteenthBattleUnits",
+        "ally_positions_export": "sixteenthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "sixteenth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "sixteenth-battle-map.svg",
+        "seed": 240854,
+    },
+    "seventeenth": {
+        "slug": "seventeenth-battle-map",
+        "terrain_export": "seventeenthBattleMap",
+        "units_export": "seventeenthBattleUnits",
+        "ally_positions_export": "seventeenthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "seventeenth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "seventeenth-battle-map.svg",
+        "seed": 240864,
+    },
+    "eighteenth": {
+        "slug": "eighteenth-battle-map",
+        "terrain_export": "eighteenthBattleMap",
+        "units_export": "eighteenthBattleUnits",
+        "ally_positions_export": "eighteenthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "eighteenth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "eighteenth-battle-map.svg",
+        "seed": 240874,
+    },
+    "nineteenth": {
+        "slug": "nineteenth-battle-map",
+        "terrain_export": "nineteenthBattleMap",
+        "units_export": "nineteenthBattleUnits",
+        "ally_positions_export": "nineteenthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "nineteenth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "nineteenth-battle-map.svg",
+        "seed": 240884,
+    },
+    "twentieth": {
+        "slug": "twentieth-battle-map",
+        "terrain_export": "twentiethBattleMap",
+        "units_export": "twentiethBattleUnits",
+        "ally_positions_export": "twentiethBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twentieth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twentieth-battle-map.svg",
+        "seed": 240894,
+    },
 }
 
 
diff --git a/src/assets/images/battle/eighteenth-battle-map.svg b/src/assets/images/battle/eighteenth-battle-map.svg
deleted file mode 100644
index de447bd..0000000
--- a/src/assets/images/battle/eighteenth-battle-map.svg
+++ /dev/null
@@ -1,69 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="3600" height="2600" viewBox="0 0 3600 2600">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.018" numOctaves="4" seed="18"/>
-      <feColorMatrix type="saturate" values="0.42"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#a88f55"/>
-      <stop offset="1" stop-color="#6f6d3f"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" x2="1">
-      <stop offset="0" stop-color="#203a52"/>
-      <stop offset="0.55" stop-color="#2d6a7d"/>
-      <stop offset="1" stop-color="#1b344c"/>
-    </linearGradient>
-    <linearGradient id="fire" x1="0" x2="1">
-      <stop offset="0" stop-color="#65321f" stop-opacity="0.35"/>
-      <stop offset="0.5" stop-color="#d88432" stop-opacity="0.45"/>
-      <stop offset="1" stop-color="#f2c66d" stop-opacity="0.22"/>
-    </linearGradient>
-  </defs>
-  <rect width="3600" height="2600" fill="url(#plain)"/>
-  <g filter="url(#grain)" opacity="0.55">
-    <rect width="3600" height="2600" fill="#8a7b4d"/>
-  </g>
-  <path d="M1840 -120 C1720 430 1830 790 1760 1190 C1700 1540 1780 1880 1690 2500" fill="none" stroke="url(#river)" stroke-width="230" opacity="0.94"/>
-  <path d="M2750 260 C2680 680 2820 1010 2720 1420 C2640 1780 2730 2100 2630 2660" fill="none" stroke="url(#river)" stroke-width="210" opacity="0.9"/>
-  <path d="M170 1830 C700 1830 1030 1760 1450 1810 C1860 1860 2210 1510 2910 1510 C3200 1510 3390 1570 3520 1720" fill="none" stroke="#d4bf78" stroke-width="210" stroke-linecap="round" opacity="0.72"/>
-  <path d="M520 2060 C880 1970 1050 1760 1370 1600 C1650 1450 1970 1340 2260 1350 C2580 1360 2930 1430 3280 1340" fill="none" stroke="#b79b5a" stroke-width="118" stroke-linecap="round" opacity="0.62"/>
-  <g opacity="0.92">
-    <path d="M610 780 C960 700 1360 840 1650 1080 C1370 1280 1030 1250 720 1130 C610 1030 560 900 610 780Z" fill="#2f5432"/>
-    <path d="M2050 1650 C2370 1510 2850 1580 3100 1900 C2800 2100 2340 2140 2040 1940Z" fill="#2f5432"/>
-    <path d="M90 70 C420 20 760 130 930 360 C660 510 280 520 60 340Z" fill="#2f5432"/>
-    <path d="M2500 120 C2880 60 3350 140 3600 410 L3600 760 C3240 840 2850 780 2550 560Z" fill="#2f5432"/>
-  </g>
-  <g opacity="0.66">
-    <ellipse cx="1190" cy="360" rx="430" ry="210" fill="#59543b"/>
-    <ellipse cx="1780" cy="2380" rx="520" ry="230" fill="#59543b"/>
-    <ellipse cx="3250" cy="380" rx="380" ry="180" fill="#59543b"/>
-  </g>
-  <g opacity="0.88">
-    <rect x="40" y="1640" width="310" height="600" rx="28" fill="#76633d"/>
-    <rect x="3120" y="1220" width="440" height="620" rx="24" fill="#5a5541"/>
-    <path d="M3150 1280 L3560 1280 L3560 1830 L3150 1830Z" fill="none" stroke="#d7b56b" stroke-width="18" opacity="0.55"/>
-  </g>
-  <g opacity="0.62">
-    <rect x="920" y="1810" width="260" height="210" rx="18" fill="#8b6c3c"/>
-    <path d="M910 1815 L1050 1680 L1200 1815Z" fill="#c58a3a"/>
-    <rect x="2440" y="1330" width="260" height="210" rx="18" fill="#806237"/>
-    <path d="M2430 1335 L2570 1200 L2720 1335Z" fill="#c58a3a"/>
-  </g>
-  <g opacity="0.82">
-    <path d="M950 1500 C1240 1390 1500 1400 1750 1530 L1740 1690 C1480 1600 1210 1600 970 1700Z" fill="url(#fire)"/>
-    <path d="M2210 1500 C2450 1390 2710 1410 2940 1530 L2930 1690 C2660 1600 2440 1610 2220 1720Z" fill="url(#fire)"/>
-    <circle cx="1180" cy="1540" r="28" fill="#df7a32" opacity="0.75"/>
-    <circle cx="1410" cy="1530" r="18" fill="#f0c45f" opacity="0.65"/>
-    <circle cx="2510" cy="1510" r="25" fill="#df7a32" opacity="0.74"/>
-    <circle cx="2780" cy="1538" r="18" fill="#f0c45f" opacity="0.62"/>
-  </g>
-  <g opacity="0.24">
-    <path d="M0 0H3600V2600H0Z" fill="none" stroke="#f2d386" stroke-width="26"/>
-    <path d="M140 140H3460V2460H140Z" fill="none" stroke="#111820" stroke-width="7"/>
-  </g>
-  <g opacity="0.18" stroke="#121a18" stroke-width="8">
-    <path d="M0 500H3600M0 1000H3600M0 1500H3600M0 2000H3600"/>
-    <path d="M500 0V2600M1000 0V2600M1500 0V2600M2000 0V2600M2500 0V2600M3000 0V2600"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/eighteenth-battle-map.webp b/src/assets/images/battle/eighteenth-battle-map.webp
new file mode 100644
index 0000000..7ece4c1
Binary files /dev/null and b/src/assets/images/battle/eighteenth-battle-map.webp differ
diff --git a/src/assets/images/battle/nineteenth-battle-map.svg b/src/assets/images/battle/nineteenth-battle-map.svg
deleted file mode 100644
index 5780372..0000000
--- a/src/assets/images/battle/nineteenth-battle-map.svg
+++ /dev/null
@@ -1,95 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="3800" height="2800" viewBox="0 0 3800 2800">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.014" numOctaves="5" seed="19"/>
-      <feColorMatrix type="saturate" values="0.46"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#b7a163"/>
-      <stop offset="0.52" stop-color="#847748"/>
-      <stop offset="1" stop-color="#5f6944"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" x2="1">
-      <stop offset="0" stop-color="#17314d"/>
-      <stop offset="0.5" stop-color="#2c738f"/>
-      <stop offset="1" stop-color="#152c45"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" x2="1">
-      <stop offset="0" stop-color="#d8c17a"/>
-      <stop offset="0.55" stop-color="#a88550"/>
-      <stop offset="1" stop-color="#78603c"/>
-    </linearGradient>
-    <linearGradient id="camp" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#6f7254"/>
-      <stop offset="1" stop-color="#3f5360"/>
-    </linearGradient>
-    <radialGradient id="torch" cx="0.5" cy="0.5" r="0.55">
-      <stop offset="0" stop-color="#f1c66b" stop-opacity="0.7"/>
-      <stop offset="0.42" stop-color="#d66f2e" stop-opacity="0.44"/>
-      <stop offset="1" stop-color="#251a12" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="3800" height="2800" fill="url(#plain)"/>
-  <g filter="url(#grain)" opacity="0.5">
-    <rect width="3800" height="2800" fill="#8e7f52"/>
-  </g>
-  <path d="M1550 -160 C1470 330 1600 670 1530 1010 C1460 1330 1510 1540 1460 1780" fill="none" stroke="url(#river)" stroke-width="230" opacity="0.95"/>
-  <path d="M2380 650 C2310 1040 2470 1410 2380 1780 C2310 2110 2390 2460 2300 2960" fill="none" stroke="url(#river)" stroke-width="220" opacity="0.94"/>
-  <path d="M280 2220 C720 2200 1080 2210 1400 2190 C1680 2180 1830 1920 2270 1900 C2630 1880 3000 1750 3500 1710" fill="none" stroke="url(#road)" stroke-width="190" stroke-linecap="round" opacity="0.76"/>
-  <path d="M520 2470 C820 2320 1020 2160 1320 2050 C1670 1920 2040 1890 2380 1830 C2700 1780 3020 1680 3330 1440" fill="none" stroke="#b99055" stroke-width="112" stroke-linecap="round" opacity="0.62"/>
-  <path d="M3050 1300 C3150 1500 3150 1900 3060 2140" fill="none" stroke="url(#road)" stroke-width="130" stroke-linecap="round" opacity="0.62"/>
-  <g opacity="0.9">
-    <path d="M520 820 C860 720 1220 860 1460 1110 C1230 1340 810 1290 560 1160 C470 1050 460 930 520 820Z" fill="#2e5639"/>
-    <path d="M1660 2020 C1910 1900 2240 2020 2340 2280 C2140 2530 1760 2570 1520 2380Z" fill="#2f5d39"/>
-    <path d="M60 60 C420 10 780 120 960 370 C680 550 300 530 50 330Z" fill="#315d3e"/>
-    <path d="M2650 90 C3020 20 3510 120 3800 410 L3800 880 C3440 920 3040 770 2700 560Z" fill="#2d5637"/>
-  </g>
-  <g opacity="0.72">
-    <ellipse cx="1180" cy="380" rx="390" ry="190" fill="#5d553b"/>
-    <ellipse cx="2850" cy="2500" rx="520" ry="210" fill="#615b3e"/>
-    <ellipse cx="3270" cy="520" rx="450" ry="190" fill="#60563a"/>
-  </g>
-  <g opacity="0.9">
-    <rect x="40" y="2120" width="360" height="560" rx="26" fill="url(#camp)"/>
-    <rect x="420" y="2320" width="360" height="330" rx="24" fill="url(#camp)" opacity="0.86"/>
-    <path d="M80 2220 L210 2110 L340 2220Z" fill="#c58b3b"/>
-    <path d="M480 2390 L610 2290 L740 2390Z" fill="#c58b3b"/>
-    <rect x="3020" y="1360" width="600" height="720" rx="24" fill="#5a5541"/>
-    <path d="M3080 1410 L3580 1410 L3580 2030 L3080 2030Z" fill="none" stroke="#d7b56b" stroke-width="18" opacity="0.52"/>
-  </g>
-  <g opacity="0.75">
-    <rect x="820" y="2030" width="260" height="210" rx="18" fill="#8b6c3c"/>
-    <path d="M810 2035 L950 1900 L1100 2035Z" fill="#c58a3a"/>
-    <rect x="2020" y="1730" width="270" height="220" rx="18" fill="#806237"/>
-    <path d="M2010 1735 L2150 1600 L2310 1735Z" fill="#c58a3a"/>
-  </g>
-  <g opacity="0.58">
-    <rect x="1450" y="1740" width="270" height="120" rx="18" fill="#73664a"/>
-    <rect x="2260" y="1880" width="260" height="120" rx="18" fill="#73664a"/>
-    <path d="M1450 1790 H1720 M2260 1940 H2520" stroke="#e6d093" stroke-width="18" opacity="0.55"/>
-  </g>
-  <g opacity="0.64">
-    <circle cx="1150" cy="2150" r="120" fill="url(#torch)"/>
-    <circle cx="1820" cy="1900" r="110" fill="url(#torch)"/>
-    <circle cx="2780" cy="1700" r="130" fill="url(#torch)"/>
-    <circle cx="3300" cy="1550" r="105" fill="url(#torch)"/>
-  </g>
-  <g opacity="0.22" fill="#e7d59a">
-    <circle cx="650" cy="2190" r="18"/>
-    <circle cx="720" cy="2220" r="14"/>
-    <circle cx="780" cy="2185" r="16"/>
-    <circle cx="1260" cy="2100" r="16"/>
-    <circle cx="1350" cy="2070" r="14"/>
-    <circle cx="1880" cy="1900" r="15"/>
-    <circle cx="1970" cy="1870" r="13"/>
-  </g>
-  <g opacity="0.2">
-    <path d="M0 0H3800V2800H0Z" fill="none" stroke="#f2d386" stroke-width="28"/>
-    <path d="M150 150H3650V2650H150Z" fill="none" stroke="#111820" stroke-width="7"/>
-  </g>
-  <g opacity="0.14" stroke="#121a18" stroke-width="8">
-    <path d="M0 500H3800M0 1000H3800M0 1500H3800M0 2000H3800M0 2500H3800"/>
-    <path d="M500 0V2800M1000 0V2800M1500 0V2800M2000 0V2800M2500 0V2800M3000 0V2800M3500 0V2800"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/nineteenth-battle-map.webp b/src/assets/images/battle/nineteenth-battle-map.webp
new file mode 100644
index 0000000..e154e52
Binary files /dev/null and b/src/assets/images/battle/nineteenth-battle-map.webp differ
diff --git a/src/assets/images/battle/seventeenth-battle-map.svg b/src/assets/images/battle/seventeenth-battle-map.svg
deleted file mode 100644
index 33792ea..0000000
--- a/src/assets/images/battle/seventeenth-battle-map.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="3400" height="2600" viewBox="0 0 3400 2600">
-  <defs>
-    <linearGradient id="ground" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#66704c"/>
-      <stop offset=".42" stop-color="#a98f5a"/>
-      <stop offset="1" stop-color="#566947"/>
-    </linearGradient>
-    <linearGradient id="stream" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#668fa0"/>
-      <stop offset=".5" stop-color="#3f7185"/>
-      <stop offset="1" stop-color="#7ca9ad"/>
-    </linearGradient>
-    <pattern id="soil" width="84" height="84" patternUnits="userSpaceOnUse">
-      <path d="M12 24h30M50 32h20M18 62h36" stroke="#282316" stroke-width="5" opacity=".13" fill="none"/>
-      <path d="M20 12l10 9M62 52l9 9M8 72l16-8" stroke="#e7d09a" stroke-width="4" opacity=".1" fill="none"/>
-    </pattern>
-  </defs>
-  <rect width="3400" height="2600" fill="url(#ground)"/>
-  <rect width="3400" height="2600" fill="url(#soil)" opacity=".62"/>
-
-  <g opacity=".54">
-    <rect x="1780" y="360" width="210" height="2020" rx="104" fill="url(#stream)"/>
-    <path d="M1882 430V2300" stroke="#c4e4dc" stroke-width="16" opacity=".18" fill="none"/>
-    <path d="M1710 1050C1830 1120 1980 1120 2080 1040" stroke="#1d4650" stroke-width="20" opacity=".14" fill="none"/>
-  </g>
-
-  <g opacity=".92">
-    <path d="M180 2110H1110C1320 2110 1360 1810 1630 1770C1950 1720 2150 1850 2390 1620C2590 1430 2820 1320 3230 1320" stroke="#d2ba78" stroke-width="74" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-    <path d="M620 1940C960 1620 1110 1380 1410 1220C1650 1090 1870 1190 2100 1080C2380 950 2700 890 3110 900" stroke="#c2aa6d" stroke-width="62" stroke-linecap="round" stroke-linejoin="round" opacity=".84" fill="none"/>
-    <path d="M2920 1000V1840" stroke="#c2aa6d" stroke-width="58" stroke-linecap="round" opacity=".74" fill="none"/>
-    <path d="M180 2110H1110C1320 2110 1360 1810 1630 1770C1950 1720 2150 1850 2390 1620C2590 1430 2820 1320 3230 1320" stroke="#5f452c" stroke-width="11" stroke-dasharray="46 52" opacity=".2" fill="none"/>
-    <path d="M620 1940C960 1620 1110 1380 1410 1220C1650 1090 1870 1190 2100 1080C2380 950 2700 890 3110 900" stroke="#5f452c" stroke-width="9" stroke-dasharray="40 46" opacity=".18" fill="none"/>
-  </g>
-
-  <g opacity=".55">
-    <ellipse cx="430" cy="360" rx="290" ry="165" fill="#607b4d"/>
-    <ellipse cx="760" cy="560" rx="320" ry="170" fill="#6f8956"/>
-    <ellipse cx="620" cy="1260" rx="330" ry="180" fill="#5f7a4b"/>
-    <ellipse cx="1040" cy="1370" rx="300" ry="158" fill="#71895a"/>
-    <ellipse cx="2440" cy="1960" rx="330" ry="170" fill="#6a8353"/>
-    <ellipse cx="2850" cy="2190" rx="310" ry="162" fill="#647d4f"/>
-    <ellipse cx="2790" cy="460" rx="310" ry="160" fill="#708957"/>
-  </g>
-
-  <g opacity=".32">
-    <ellipse cx="1120" cy="420" rx="285" ry="154" fill="#918a63"/>
-    <ellipse cx="1900" cy="2260" rx="285" ry="154" fill="#968b60"/>
-    <ellipse cx="3090" cy="340" rx="260" ry="140" fill="#94895f"/>
-  </g>
-
-  <g opacity=".82">
-    <ellipse cx="2520" cy="1180" rx="150" ry="82" fill="#806238"/>
-    <rect x="2414" y="1122" width="212" height="126" fill="#ad8c50"/>
-    <path d="M2414 1122L2520 1048L2626 1122Z" fill="#61462d"/>
-    <rect x="2488" y="1170" width="66" height="78" fill="#35281e"/>
-    <path d="M2320 1288C2480 1360 2650 1340 2800 1278" stroke="#26321f" stroke-width="16" opacity=".17" fill="none"/>
-  </g>
-
-  <g opacity=".76">
-    <rect x="2880" y="930" width="410" height="66" fill="#88714c"/>
-    <rect x="2880" y="1588" width="410" height="66" fill="#7d6746"/>
-    <rect x="2850" y="980" width="66" height="638" fill="#6f5d42"/>
-    <rect x="3260" y="980" width="66" height="638" fill="#6f5d42"/>
-    <path d="M2900 966H3270" stroke="#dbc283" stroke-width="9" opacity=".32" fill="none"/>
-    <path d="M2900 1622H3270" stroke="#dbc283" stroke-width="9" opacity=".26" fill="none"/>
-  </g>
-
-  <g opacity=".44">
-    <path d="M1180 250C950 390 900 620 990 800" stroke="#27321f" stroke-width="18" opacity=".16" fill="none"/>
-    <path d="M2120 1840C2320 1950 2600 1990 2920 1880" stroke="#27321f" stroke-width="18" opacity=".15" fill="none"/>
-  </g>
-
-  <g opacity=".42">
-    <path d="M0 0H3400V2600H0Z" fill="none" stroke="#ead6a2" stroke-width="22"/>
-    <path d="M108 98H3292V2498H108Z" fill="none" stroke="#3a2c1b" stroke-width="12"/>
-  </g>
-  <rect width="3400" height="2600" fill="#101015" opacity=".035"/>
-</svg>
diff --git a/src/assets/images/battle/seventeenth-battle-map.webp b/src/assets/images/battle/seventeenth-battle-map.webp
new file mode 100644
index 0000000..83bcc5a
Binary files /dev/null and b/src/assets/images/battle/seventeenth-battle-map.webp differ
diff --git a/src/assets/images/battle/sixteenth-battle-map.svg b/src/assets/images/battle/sixteenth-battle-map.svg
deleted file mode 100644
index 06475dd..0000000
--- a/src/assets/images/battle/sixteenth-battle-map.svg
+++ /dev/null
@@ -1,89 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="3400" height="2600" viewBox="0 0 3400 2600">
-  <defs>
-    <linearGradient id="earth" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#77744f"/>
-      <stop offset=".44" stop-color="#b69b63"/>
-      <stop offset="1" stop-color="#687653"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#5e91a8"/>
-      <stop offset=".52" stop-color="#3f768f"/>
-      <stop offset="1" stop-color="#6da0ae"/>
-    </linearGradient>
-    <pattern id="grain" width="80" height="80" patternUnits="userSpaceOnUse">
-      <path d="M10 24h24M46 18h22M16 58h34" stroke="#2b2618" stroke-width="5" opacity=".12" fill="none"/>
-      <path d="M18 12l10 8M58 48l9 9M7 67l14-7" stroke="#ead79b" stroke-width="4" opacity=".12" fill="none"/>
-    </pattern>
-  </defs>
-  <rect width="3400" height="2600" fill="url(#earth)"/>
-  <rect width="3400" height="2600" fill="url(#grain)" opacity=".62"/>
-
-  <g opacity=".52">
-    <rect x="1580" y="180" width="250" height="2240" rx="122" fill="url(#river)"/>
-    <rect x="2480" y="360" width="230" height="1760" rx="110" fill="url(#river)"/>
-    <path d="M1704 260V2310" stroke="#bce0dc" stroke-width="18" opacity=".2" fill="none"/>
-    <path d="M2592 430V2030" stroke="#bce0dc" stroke-width="16" opacity=".18" fill="none"/>
-    <path d="M1538 920C1650 980 1780 1000 1870 940" stroke="#1d4650" stroke-width="20" opacity=".15" fill="none"/>
-    <path d="M2440 1440C2560 1500 2690 1510 2770 1450" stroke="#1d4650" stroke-width="18" opacity=".14" fill="none"/>
-  </g>
-
-  <g opacity=".92">
-    <path d="M180 2010H1110C1300 2010 1430 1780 1610 1630C1820 1450 2140 1600 2360 1500C2640 1370 2840 1190 3230 1190" stroke="#cfb87c" stroke-width="78" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-    <path d="M670 1880C1000 1600 1180 1370 1450 1230C1710 1090 1990 1250 2280 1130C2560 1020 2830 900 3190 890" stroke="#c5aa6f" stroke-width="66" stroke-linecap="round" stroke-linejoin="round" opacity=".86" fill="none"/>
-    <path d="M3010 990V1850" stroke="#c5aa6f" stroke-width="64" stroke-linecap="round" opacity=".8" fill="none"/>
-    <path d="M180 2010H1110C1300 2010 1430 1780 1610 1630C1820 1450 2140 1600 2360 1500C2640 1370 2840 1190 3230 1190" stroke="#6d4e30" stroke-width="12" stroke-dasharray="48 54" opacity=".2" fill="none"/>
-    <path d="M670 1880C1000 1600 1180 1370 1450 1230C1710 1090 1990 1250 2280 1130C2560 1020 2830 900 3190 890" stroke="#6d4e30" stroke-width="10" stroke-dasharray="42 48" opacity=".18" fill="none"/>
-  </g>
-
-  <g opacity=".5">
-    <ellipse cx="470" cy="350" rx="255" ry="145" fill="#6f8752"/>
-    <ellipse cx="800" cy="560" rx="285" ry="150" fill="#778f59"/>
-    <ellipse cx="650" cy="1280" rx="300" ry="156" fill="#708854"/>
-    <ellipse cx="1020" cy="1380" rx="250" ry="132" fill="#758d56"/>
-    <ellipse cx="520" cy="1765" rx="250" ry="126" fill="#6b8350"/>
-    <ellipse cx="2810" cy="2145" rx="300" ry="154" fill="#768c56"/>
-    <ellipse cx="3080" cy="2290" rx="250" ry="130" fill="#6f8550"/>
-  </g>
-
-  <g opacity=".3">
-    <ellipse cx="1010" cy="350" rx="250" ry="136" fill="#9d9364"/>
-    <ellipse cx="2050" cy="2220" rx="255" ry="142" fill="#9d9364"/>
-    <ellipse cx="3090" cy="320" rx="250" ry="140" fill="#9a9164"/>
-    <ellipse cx="1180" cy="540" rx="190" ry="100" fill="#8f875f"/>
-  </g>
-
-  <g opacity=".78">
-    <rect x="2890" y="850" width="470" height="72" fill="#91794f"/>
-    <rect x="2890" y="1670" width="470" height="72" fill="#846d49"/>
-    <rect x="2860" y="910" width="72" height="780" fill="#746044"/>
-    <rect x="3320" y="910" width="72" height="780" fill="#746044"/>
-    <rect x="2990" y="1120" width="250" height="310" rx="16" fill="#aa8a56"/>
-    <rect x="3056" y="1230" width="116" height="150" fill="#463626" opacity=".62"/>
-    <path d="M2918 890H3340" stroke="#dbc283" stroke-width="10" opacity=".34" fill="none"/>
-    <path d="M2918 1708H3340" stroke="#dbc283" stroke-width="10" opacity=".26" fill="none"/>
-    <path d="M2990 1108L3115 1018L3240 1108" fill="#60472d"/>
-  </g>
-
-  <g opacity=".82">
-    <ellipse cx="1320" cy="1840" rx="150" ry="86" fill="#816137"/>
-    <rect x="1220" y="1778" width="200" height="120" fill="#a9894e"/>
-    <path d="M1220 1778L1320 1704L1420 1778Z" fill="#6d4e31"/>
-    <rect x="1288" y="1820" width="64" height="78" fill="#35281e"/>
-    <ellipse cx="2200" cy="1040" rx="128" ry="76" fill="#806238"/>
-    <rect x="2114" y="988" width="172" height="104" fill="#a8864b"/>
-    <path d="M2114 988L2200 930L2286 988Z" fill="#67492f"/>
-    <rect x="2174" y="1025" width="54" height="66" fill="#392a1d"/>
-  </g>
-
-  <g opacity=".44">
-    <path d="M1240 270C1020 370 930 560 980 770" stroke="#27321f" stroke-width="18" opacity=".18" fill="none"/>
-    <path d="M2260 1900C2460 1990 2700 2010 2920 1920" stroke="#27321f" stroke-width="18" opacity=".16" fill="none"/>
-    <path d="M1460 1160C1600 1260 1740 1290 1900 1200" stroke="#28321f" stroke-width="16" opacity=".12" fill="none"/>
-  </g>
-
-  <g opacity=".42">
-    <path d="M0 0H3400V2600H0Z" fill="none" stroke="#ead6a2" stroke-width="22"/>
-    <path d="M108 98H3292V2498H108Z" fill="none" stroke="#3a2c1b" stroke-width="12"/>
-  </g>
-  <rect width="3400" height="2600" fill="#101015" opacity=".035"/>
-</svg>
diff --git a/src/assets/images/battle/sixteenth-battle-map.webp b/src/assets/images/battle/sixteenth-battle-map.webp
new file mode 100644
index 0000000..c71f90f
Binary files /dev/null and b/src/assets/images/battle/sixteenth-battle-map.webp differ
diff --git a/src/assets/images/battle/twentieth-battle-map.svg b/src/assets/images/battle/twentieth-battle-map.svg
deleted file mode 100644
index 9f7e0fa..0000000
--- a/src/assets/images/battle/twentieth-battle-map.svg
+++ /dev/null
@@ -1,98 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="4000" height="2800" viewBox="0 0 4000 2800">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.013" numOctaves="5" seed="20"/>
-      <feColorMatrix type="saturate" values="0.48"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#b6a365"/>
-      <stop offset="0.5" stop-color="#837b4d"/>
-      <stop offset="1" stop-color="#526b55"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" x2="1">
-      <stop offset="0" stop-color="#132b48"/>
-      <stop offset="0.46" stop-color="#2a7894"/>
-      <stop offset="1" stop-color="#102a42"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" x2="1">
-      <stop offset="0" stop-color="#dac27b"/>
-      <stop offset="0.55" stop-color="#a67e4a"/>
-      <stop offset="1" stop-color="#716039"/>
-    </linearGradient>
-    <linearGradient id="dock" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#6d5e43"/>
-      <stop offset="1" stop-color="#3e4650"/>
-    </linearGradient>
-    <radialGradient id="lamp" cx="0.5" cy="0.5" r="0.55">
-      <stop offset="0" stop-color="#f0c56c" stop-opacity="0.66"/>
-      <stop offset="0.45" stop-color="#c9692d" stop-opacity="0.38"/>
-      <stop offset="1" stop-color="#1e1710" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="4000" height="2800" fill="url(#plain)"/>
-  <g filter="url(#grain)" opacity="0.48">
-    <rect width="4000" height="2800" fill="#8a7f55"/>
-  </g>
-  <path d="M2220 -160 C2110 360 2280 760 2180 1160 C2090 1550 2240 2050 2150 2960" fill="none" stroke="url(#river)" stroke-width="250" opacity="0.95"/>
-  <path d="M2860 -120 C2780 260 2910 640 2830 1020 C2760 1340 2870 1500 2780 1600" fill="none" stroke="url(#river)" stroke-width="210" opacity="0.88"/>
-  <path d="M260 2220 C760 2210 1100 2220 1460 2180 C1770 2140 1990 2000 2320 2000 C2720 2000 3030 1760 3600 1680" fill="none" stroke="url(#road)" stroke-width="190" stroke-linecap="round" opacity="0.76"/>
-  <path d="M560 2370 C960 2240 1260 2100 1560 1970 C1880 1830 2180 1900 2480 1840 C2800 1780 3120 1660 3420 1410" fill="none" stroke="#b78c54" stroke-width="112" stroke-linecap="round" opacity="0.58"/>
-  <path d="M3370 1390 C3470 1600 3470 2020 3380 2230" fill="none" stroke="url(#road)" stroke-width="130" stroke-linecap="round" opacity="0.63"/>
-  <g opacity="0.9">
-    <path d="M540 820 C900 710 1280 850 1540 1100 C1310 1350 850 1300 580 1160 C480 1040 470 930 540 820Z" fill="#2f5a3d"/>
-    <path d="M1580 2120 C1850 1980 2170 2090 2260 2340 C2040 2600 1690 2600 1470 2400Z" fill="#315f3c"/>
-    <path d="M70 70 C450 20 820 130 990 380 C710 560 300 530 50 330Z" fill="#315b3f"/>
-    <path d="M2980 80 C3370 20 3740 120 4000 410 L4000 900 C3620 940 3240 770 3020 560Z" fill="#2e5738"/>
-  </g>
-  <g opacity="0.74">
-    <ellipse cx="1320" cy="380" rx="430" ry="200" fill="#5d573c"/>
-    <ellipse cx="2920" cy="2480" rx="560" ry="220" fill="#625b3e"/>
-    <ellipse cx="3490" cy="520" rx="430" ry="190" fill="#63583b"/>
-  </g>
-  <g opacity="0.9">
-    <rect x="40" y="2120" width="360" height="560" rx="26" fill="#566a60"/>
-    <rect x="420" y="2320" width="360" height="330" rx="24" fill="#5d6c58" opacity="0.86"/>
-    <path d="M80 2220 L210 2110 L340 2220Z" fill="#c58b3b"/>
-    <path d="M480 2390 L610 2290 L740 2390Z" fill="#c58b3b"/>
-    <rect x="3400" y="1400" width="520" height="740" rx="24" fill="url(#dock)"/>
-    <path d="M3460 1460 L3880 1460 L3880 2080 L3460 2080Z" fill="none" stroke="#d7b56b" stroke-width="18" opacity="0.52"/>
-    <path d="M3300 1720 H3920" stroke="#8f6d42" stroke-width="80" opacity="0.82"/>
-    <path d="M3440 1810 H3970" stroke="#7b5d3b" stroke-width="46" opacity="0.88"/>
-  </g>
-  <g opacity="0.74">
-    <rect x="1320" y="1830" width="310" height="210" rx="18" fill="#8b6c3c"/>
-    <path d="M1310 1835 L1480 1690 L1650 1835Z" fill="#c58a3a"/>
-    <rect x="2920" y="1510" width="280" height="220" rx="18" fill="#806237"/>
-    <path d="M2910 1515 L3060 1370 L3230 1515Z" fill="#c58a3a"/>
-  </g>
-  <g opacity="0.62">
-    <rect x="2100" y="1930" width="320" height="118" rx="18" fill="#74684d"/>
-    <path d="M2100 1990 H2420" stroke="#e6d093" stroke-width="18" opacity="0.56"/>
-    <rect x="2760" y="1550" width="280" height="110" rx="18" fill="#74684d"/>
-    <path d="M2760 1605 H3040" stroke="#e6d093" stroke-width="16" opacity="0.5"/>
-  </g>
-  <g opacity="0.66">
-    <circle cx="1250" cy="2140" r="120" fill="url(#lamp)"/>
-    <circle cx="2040" cy="1920" r="115" fill="url(#lamp)"/>
-    <circle cx="2880" cy="1660" r="130" fill="url(#lamp)"/>
-    <circle cx="3520" cy="1560" r="120" fill="url(#lamp)"/>
-  </g>
-  <g opacity="0.24" fill="#e9d79a">
-    <circle cx="660" cy="2200" r="17"/>
-    <circle cx="720" cy="2230" r="14"/>
-    <circle cx="820" cy="2190" r="16"/>
-    <circle cx="1440" cy="2070" r="15"/>
-    <circle cx="1540" cy="2030" r="13"/>
-    <circle cx="3380" cy="1730" r="16"/>
-    <circle cx="3480" cy="1690" r="13"/>
-  </g>
-  <g opacity="0.2">
-    <path d="M0 0H4000V2800H0Z" fill="none" stroke="#f2d386" stroke-width="28"/>
-    <path d="M150 150H3850V2650H150Z" fill="none" stroke="#111820" stroke-width="7"/>
-  </g>
-  <g opacity="0.13" stroke="#121a18" stroke-width="8">
-    <path d="M0 500H4000M0 1000H4000M0 1500H4000M0 2000H4000M0 2500H4000"/>
-    <path d="M500 0V2800M1000 0V2800M1500 0V2800M2000 0V2800M2500 0V2800M3000 0V2800M3500 0V2800"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twentieth-battle-map.webp b/src/assets/images/battle/twentieth-battle-map.webp
new file mode 100644
index 0000000..1487633
Binary files /dev/null and b/src/assets/images/battle/twentieth-battle-map.webp differ
diff --git a/src/game/data/battleMapAssets.ts b/src/game/data/battleMapAssets.ts
index a59dc7e..1ba5c11 100644
--- a/src/game/data/battleMapAssets.ts
+++ b/src/game/data/battleMapAssets.ts
@@ -1,5 +1,5 @@
 import eighthBattleMapUrl from '../../assets/images/battle/eighth-battle-map.webp';
-import eighteenthBattleMapUrl from '../../assets/images/battle/eighteenth-battle-map.svg';
+import eighteenthBattleMapUrl from '../../assets/images/battle/eighteenth-battle-map.webp';
 import eleventhBattleMapUrl from '../../assets/images/battle/eleventh-battle-map.webp';
 import fiftiethBattleMapUrl from '../../assets/images/battle/fiftieth-battle-map.svg';
 import fiftyFirstBattleMapUrl from '../../assets/images/battle/fifty-first-battle-map.svg';
@@ -33,12 +33,12 @@ import fortySixthBattleMapUrl from '../../assets/images/battle/forty-sixth-battl
 import fortyThirdBattleMapUrl from '../../assets/images/battle/forty-third-battle-map.svg';
 import fourteenthBattleMapUrl from '../../assets/images/battle/fourteenth-battle-map.webp';
 import fourthBattleMapUrl from '../../assets/images/battle/fourth-battle-map.webp';
-import nineteenthBattleMapUrl from '../../assets/images/battle/nineteenth-battle-map.svg';
+import nineteenthBattleMapUrl from '../../assets/images/battle/nineteenth-battle-map.webp';
 import ninthBattleMapUrl from '../../assets/images/battle/ninth-battle-map.webp';
 import secondBattleMapUrl from '../../assets/images/battle/second-battle-map.webp';
 import seventhBattleMapUrl from '../../assets/images/battle/seventh-battle-map.webp';
-import seventeenthBattleMapUrl from '../../assets/images/battle/seventeenth-battle-map.svg';
-import sixteenthBattleMapUrl from '../../assets/images/battle/sixteenth-battle-map.svg';
+import seventeenthBattleMapUrl from '../../assets/images/battle/seventeenth-battle-map.webp';
+import sixteenthBattleMapUrl from '../../assets/images/battle/sixteenth-battle-map.webp';
 import sixthBattleMapUrl from '../../assets/images/battle/sixth-battle-map.webp';
 import tenthBattleMapUrl from '../../assets/images/battle/tenth-battle-map.webp';
 import thirteenthBattleMapUrl from '../../assets/images/battle/thirteenth-battle-map.webp';
@@ -53,7 +53,7 @@ import thirtySeventhBattleMapUrl from '../../assets/images/battle/thirty-seventh
 import thirtySixthBattleMapUrl from '../../assets/images/battle/thirty-sixth-battle-map.svg';
 import thirtyThirdBattleMapUrl from '../../assets/images/battle/thirty-third-battle-map.svg';
 import thirdBattleMapUrl from '../../assets/images/battle/third-battle-map.webp';
-import twentiethBattleMapUrl from '../../assets/images/battle/twentieth-battle-map.svg';
+import twentiethBattleMapUrl from '../../assets/images/battle/twentieth-battle-map.webp';
 import twentyEighthBattleMapUrl from '../../assets/images/battle/twenty-eighth-battle-map.svg';
 import twentyFifthBattleMapUrl from '../../assets/images/battle/twenty-fifth-battle-map.svg';
 import twentyFirstBattleMapUrl from '../../assets/images/battle/twenty-first-battle-map.svg';