diff --git a/docs/battle-map-terrain-atlas-pipeline.md b/docs/battle-map-terrain-atlas-pipeline.md
index 7ad10a2..cea923c 100644
--- a/docs/battle-map-terrain-atlas-pipeline.md
+++ b/docs/battle-map-terrain-atlas-pipeline.md
@@ -2,7 +2,7 @@
 
 ## Scope
 
-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.
+The first twenty-five 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
 
@@ -37,6 +37,11 @@ python scripts/generate-handpaint-map-sample.py --map seventeenth --webp-quality
 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
+python scripts/generate-handpaint-map-sample.py --map twenty-first --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-second --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-third --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-fourth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-fifth --webp-quality 90
 ```
 
 ## Current Assets
@@ -61,6 +66,11 @@ python scripts/generate-handpaint-map-sample.py --map twentieth --webp-quality 9
 - `src/assets/images/battle/eighteenth-battle-map.webp`
 - `src/assets/images/battle/nineteenth-battle-map.webp`
 - `src/assets/images/battle/twentieth-battle-map.webp`
+- `src/assets/images/battle/twenty-first-battle-map.webp`
+- `src/assets/images/battle/twenty-second-battle-map.webp`
+- `src/assets/images/battle/twenty-third-battle-map.webp`
+- `src/assets/images/battle/twenty-fourth-battle-map.webp`
+- `src/assets/images/battle/twenty-fifth-battle-map.webp`
 
 ## QA Outputs
 
@@ -102,5 +112,15 @@ python scripts/generate-handpaint-map-sample.py --map twentieth --webp-quality 9
 - `docs/nineteenth-battle-map-handpaint-preview.png`
 - `docs/twentieth-battle-map-handpaint-before-after.png`
 - `docs/twentieth-battle-map-handpaint-preview.png`
+- `docs/twenty-first-battle-map-handpaint-before-after.png`
+- `docs/twenty-first-battle-map-handpaint-preview.png`
+- `docs/twenty-second-battle-map-handpaint-before-after.png`
+- `docs/twenty-second-battle-map-handpaint-preview.png`
+- `docs/twenty-third-battle-map-handpaint-before-after.png`
+- `docs/twenty-third-battle-map-handpaint-preview.png`
+- `docs/twenty-fourth-battle-map-handpaint-before-after.png`
+- `docs/twenty-fourth-battle-map-handpaint-preview.png`
+- `docs/twenty-fifth-battle-map-handpaint-before-after.png`
+- `docs/twenty-fifth-battle-map-handpaint-preview.png`
 
 Browser screenshots are saved per verification run after build/deploy.
diff --git a/docs/twenty-fifth-battle-map-handpaint-before-after.png b/docs/twenty-fifth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..37dc72d
Binary files /dev/null and b/docs/twenty-fifth-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-fifth-battle-map-handpaint-preview.png b/docs/twenty-fifth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..c63e21d
Binary files /dev/null and b/docs/twenty-fifth-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-first-battle-map-handpaint-before-after.png b/docs/twenty-first-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..64820bd
Binary files /dev/null and b/docs/twenty-first-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-first-battle-map-handpaint-preview.png b/docs/twenty-first-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..a49cda4
Binary files /dev/null and b/docs/twenty-first-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-fourth-battle-map-handpaint-before-after.png b/docs/twenty-fourth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..ee53310
Binary files /dev/null and b/docs/twenty-fourth-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-fourth-battle-map-handpaint-preview.png b/docs/twenty-fourth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..e5e9a25
Binary files /dev/null and b/docs/twenty-fourth-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-second-battle-map-handpaint-before-after.png b/docs/twenty-second-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..8c53d49
Binary files /dev/null and b/docs/twenty-second-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-second-battle-map-handpaint-preview.png b/docs/twenty-second-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..d3d0b89
Binary files /dev/null and b/docs/twenty-second-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-third-battle-map-handpaint-before-after.png b/docs/twenty-third-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..0b5cf47
Binary files /dev/null and b/docs/twenty-third-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-third-battle-map-handpaint-preview.png b/docs/twenty-third-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..a1ec35a
Binary files /dev/null and b/docs/twenty-third-battle-map-handpaint-preview.png differ
diff --git a/scripts/generate-handpaint-map-sample.py b/scripts/generate-handpaint-map-sample.py
index 4c12c3c..3a84fff 100644
--- a/scripts/generate-handpaint-map-sample.py
+++ b/scripts/generate-handpaint-map-sample.py
@@ -199,6 +199,51 @@ MAP_CONFIGS = {
         "before": BATTLE_IMAGE_DIR / "twentieth-battle-map.svg",
         "seed": 240894,
     },
+    "twenty-first": {
+        "slug": "twenty-first-battle-map",
+        "terrain_export": "twentyFirstBattleMap",
+        "units_export": "twentyFirstBattleUnits",
+        "ally_positions_export": "twentyFirstBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-first-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-first-battle-map.svg",
+        "seed": 240904,
+    },
+    "twenty-second": {
+        "slug": "twenty-second-battle-map",
+        "terrain_export": "twentySecondBattleMap",
+        "units_export": "twentySecondBattleUnits",
+        "ally_positions_export": "twentySecondBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-second-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-second-battle-map.svg",
+        "seed": 240914,
+    },
+    "twenty-third": {
+        "slug": "twenty-third-battle-map",
+        "terrain_export": "twentyThirdBattleMap",
+        "units_export": "twentyThirdBattleUnits",
+        "ally_positions_export": "twentyThirdBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-third-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-third-battle-map.svg",
+        "seed": 240924,
+    },
+    "twenty-fourth": {
+        "slug": "twenty-fourth-battle-map",
+        "terrain_export": "twentyFourthBattleMap",
+        "units_export": "twentyFourthBattleUnits",
+        "ally_positions_export": "twentyFourthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-fourth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-fourth-battle-map.svg",
+        "seed": 240934,
+    },
+    "twenty-fifth": {
+        "slug": "twenty-fifth-battle-map",
+        "terrain_export": "twentyFifthBattleMap",
+        "units_export": "twentyFifthBattleUnits",
+        "ally_positions_export": "twentyFifthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-fifth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-fifth-battle-map.svg",
+        "seed": 240944,
+    },
 }
 
 
diff --git a/src/assets/images/battle/twenty-fifth-battle-map.svg b/src/assets/images/battle/twenty-fifth-battle-map.svg
deleted file mode 100644
index d96bcbd..0000000
--- a/src/assets/images/battle/twenty-fifth-battle-map.svg
+++ /dev/null
@@ -1,85 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 3400" role="img" aria-label="Wuling mountain road tactical battlefield">
-  <defs>
-    <linearGradient id="ground" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#8a7440"/>
-      <stop offset="0.45" stop-color="#a28b55"/>
-      <stop offset="1" stop-color="#6f6b3f"/>
-    </linearGradient>
-    <linearGradient id="ridge" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#4e5533"/>
-      <stop offset="1" stop-color="#1f261d"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#9ad1df"/>
-      <stop offset="0.55" stop-color="#3b7e91"/>
-      <stop offset="1" stop-color="#1d4458"/>
-    </linearGradient>
-    <pattern id="grain" width="90" height="90" patternUnits="userSpaceOnUse">
-      <path d="M10 20h18M54 28h23M30 66h32M6 82h16" stroke="#392f1f" stroke-width="5" opacity=".2"/>
-      <path d="M70 8h12M42 40h14M76 72h9" stroke="#d1bd7a" stroke-width="4" opacity=".24"/>
-    </pattern>
-    <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
-      <path d="M100 0H0v100" fill="none" stroke="#14100b" stroke-width="6" opacity=".2"/>
-    </pattern>
-    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="18" dy="28" stdDeviation="14" flood-color="#12100b" flood-opacity=".32"/>
-    </filter>
-  </defs>
-
-  <rect width="5000" height="3400" fill="url(#ground)"/>
-  <rect width="5000" height="3400" fill="url(#grain)" opacity=".82"/>
-
-  <path d="M0 0 C360 210 550 560 470 1000 C390 1450 150 1850 270 2430 C340 2760 190 3050 0 3340 Z" fill="url(#ridge)" opacity=".86"/>
-  <path d="M1410 260 C1840 50 2380 120 2790 520 C3010 750 2990 1030 2740 1260 C2450 1530 2260 1730 2320 2040 C1820 2070 1450 1840 1270 1460 C1090 1080 1140 560 1410 260 Z" fill="url(#ridge)" opacity=".78"/>
-  <path d="M3520 0 C4040 40 4660 210 5000 580 L5000 1060 C4640 980 4200 1010 3890 760 C3640 560 3480 290 3520 0 Z" fill="url(#ridge)" opacity=".83"/>
-  <path d="M3960 1760 C4420 1680 4770 1880 5000 2200 L5000 3400 L3600 3400 C3480 2930 3610 2100 3960 1760 Z" fill="url(#ridge)" opacity=".82"/>
-
-  <path d="M905 -80 C1055 420 975 860 900 1260 C820 1690 920 1990 1070 2290" fill="none" stroke="url(#river)" stroke-width="132" opacity=".9"/>
-  <path d="M3370 80 C3420 520 3330 930 3380 1350 C3410 1600 3530 1770 3670 1970" fill="none" stroke="url(#river)" stroke-width="126" opacity=".9"/>
-  <path d="M2760 3400 C2700 3120 2780 2920 2920 2730 C3060 2530 3140 2320 3100 2060" fill="none" stroke="url(#river)" stroke-width="116" opacity=".9"/>
-  <path d="M905 -80 C1055 420 975 860 900 1260 C820 1690 920 1990 1070 2290" fill="none" stroke="#d8f1f2" stroke-width="20" opacity=".36"/>
-  <path d="M3370 80 C3420 520 3330 930 3380 1350 C3410 1600 3530 1770 3670 1970" fill="none" stroke="#d8f1f2" stroke-width="18" opacity=".34"/>
-
-  <path d="M260 2920 C780 2870 1120 2760 1350 2430 C1590 2080 1900 2110 2240 2180 C2620 2260 2880 2550 3220 2540 C3650 2530 3840 2180 4140 1880 C4370 1650 4610 1520 4820 1420" fill="none" stroke="#b8904f" stroke-width="152" opacity=".78" stroke-linecap="round" filter="url(#softShadow)"/>
-  <path d="M260 2920 C780 2870 1120 2760 1350 2430 C1590 2080 1900 2110 2240 2180 C2620 2260 2880 2550 3220 2540 C3650 2530 3840 2180 4140 1880 C4370 1650 4610 1520 4820 1420" fill="none" stroke="#d5bd75" stroke-width="58" opacity=".5" stroke-linecap="round"/>
-  <path d="M1180 2360 C1450 2150 1590 1890 1640 1600 C1690 1320 1810 1120 2140 960 C2450 810 2700 680 2870 420" fill="none" stroke="#a98245" stroke-width="96" opacity=".55" stroke-linecap="round"/>
-
-  <g opacity=".9">
-    <ellipse cx="1650" cy="1960" rx="180" ry="105" fill="#6c7d39"/>
-    <rect x="1585" y="1885" width="120" height="100" fill="#8a5d2a"/>
-    <path d="M1560 1885 L1645 1815 L1730 1885 Z" fill="#d48b32"/>
-    <rect x="1780" y="1905" width="92" height="78" fill="#87602e"/>
-    <path d="M1764 1905 L1826 1848 L1890 1905 Z" fill="#e1a046"/>
-  </g>
-  <g opacity=".9">
-    <ellipse cx="2915" cy="2630" rx="200" ry="120" fill="#71813e"/>
-    <rect x="2835" y="2550" width="132" height="106" fill="#8a5d2a"/>
-    <path d="M2812 2550 L2900 2472 L2992 2550 Z" fill="#d48b32"/>
-    <rect x="3028" y="2575" width="96" height="82" fill="#87602e"/>
-    <path d="M3012 2575 L3076 2518 L3142 2575 Z" fill="#e1a046"/>
-  </g>
-  <g opacity=".88">
-    <ellipse cx="3810" cy="2450" rx="170" ry="100" fill="#6a7a38"/>
-    <rect x="3740" y="2378" width="118" height="96" fill="#865a2c"/>
-    <path d="M3718 2378 L3800 2308 L3882 2378 Z" fill="#d99634"/>
-  </g>
-
-  <g filter="url(#softShadow)">
-    <rect x="4270" y="1160" width="420" height="360" rx="18" fill="#5c563c"/>
-    <rect x="4330" y="1220" width="300" height="230" fill="#8a7242"/>
-    <rect x="4385" y="1270" width="80" height="180" fill="#343528"/>
-    <rect x="4518" y="1270" width="80" height="180" fill="#343528"/>
-    <path d="M4230 1160 L4480 970 L4730 1160 Z" fill="#98723a"/>
-    <path d="M4330 1220 L4480 1090 L4630 1220 Z" fill="#cc8b3c"/>
-  </g>
-
-  <g fill="#2f4b2a" opacity=".8">
-    <circle cx="600" cy="520" r="92"/><circle cx="760" cy="770" r="78"/><circle cx="460" cy="1210" r="86"/>
-    <circle cx="1780" cy="670" r="84"/><circle cx="2040" cy="920" r="96"/><circle cx="2280" cy="1240" r="76"/>
-    <circle cx="2420" cy="1580" r="94"/><circle cx="2850" cy="1470" r="80"/><circle cx="4260" cy="2500" r="104"/>
-    <circle cx="4540" cy="2840" r="98"/><circle cx="3920" cy="3000" r="88"/>
-  </g>
-
-  <rect width="5000" height="3400" fill="url(#grid)"/>
-  <rect x="18" y="18" width="4964" height="3364" fill="none" stroke="#2b2012" stroke-width="18" opacity=".58"/>
-</svg>
diff --git a/src/assets/images/battle/twenty-fifth-battle-map.webp b/src/assets/images/battle/twenty-fifth-battle-map.webp
new file mode 100644
index 0000000..ea2a421
Binary files /dev/null and b/src/assets/images/battle/twenty-fifth-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-first-battle-map.svg b/src/assets/images/battle/twenty-first-battle-map.svg
deleted file mode 100644
index 44d78f2..0000000
--- a/src/assets/images/battle/twenty-first-battle-map.svg
+++ /dev/null
@@ -1,94 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="4200" height="3000" viewBox="0 0 4200 3000">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="5" seed="21"/>
-      <feColorMatrix type="saturate" values="0.5"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#b7a76b"/>
-      <stop offset="0.5" stop-color="#807c52"/>
-      <stop offset="1" stop-color="#526b58"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" x2="1">
-      <stop offset="0" stop-color="#102742"/>
-      <stop offset="0.48" stop-color="#2a7797"/>
-      <stop offset="1" stop-color="#0e263c"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" x2="1">
-      <stop offset="0" stop-color="#e0c783"/>
-      <stop offset="0.55" stop-color="#a9814b"/>
-      <stop offset="1" stop-color="#75613c"/>
-    </linearGradient>
-    <linearGradient id="dock" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#736349"/>
-      <stop offset="1" stop-color="#384755"/>
-    </linearGradient>
-    <radialGradient id="lamp" cx="0.5" cy="0.5" r="0.55">
-      <stop offset="0" stop-color="#f2c76f" stop-opacity="0.64"/>
-      <stop offset="0.45" stop-color="#c7692f" stop-opacity="0.36"/>
-      <stop offset="1" stop-color="#1c1711" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="4200" height="3000" fill="url(#plain)"/>
-  <g filter="url(#grain)" opacity="0.48">
-    <rect width="4200" height="3000" fill="#887f58"/>
-  </g>
-  <path d="M2050 -180 C1940 420 2140 850 2020 1310 C1900 1770 2100 2310 1980 3180" fill="none" stroke="url(#river)" stroke-width="280" opacity="0.96"/>
-  <path d="M2860 -130 C2790 330 2950 790 2860 1190 C2790 1510 2890 1690 2800 1750" fill="none" stroke="url(#river)" stroke-width="220" opacity="0.9"/>
-  <path d="M2480 2180 C2380 2460 2520 2740 2400 3180" fill="none" stroke="url(#river)" stroke-width="210" opacity="0.86"/>
-  <path d="M270 2420 C780 2420 1150 2440 1510 2390 C1840 2340 2050 2130 2400 2120 C2860 2110 3180 1830 3820 1770" fill="none" stroke="url(#road)" stroke-width="200" stroke-linecap="round" opacity="0.78"/>
-  <path d="M620 2560 C980 2410 1300 2260 1620 2110 C1960 1950 2280 2020 2620 1930 C2990 1840 3320 1700 3620 1420" fill="none" stroke="#b98f57" stroke-width="118" stroke-linecap="round" opacity="0.6"/>
-  <path d="M3500 1590 C3610 1810 3600 2240 3500 2460" fill="none" stroke="url(#road)" stroke-width="136" stroke-linecap="round" opacity="0.64"/>
-  <g opacity="0.9">
-    <path d="M540 900 C920 770 1320 930 1590 1190 C1350 1460 870 1390 590 1260 C490 1140 470 1010 540 900Z" fill="#2f5c3f"/>
-    <path d="M1600 2320 C1870 2150 2190 2270 2290 2520 C2050 2810 1700 2790 1480 2580Z" fill="#31613f"/>
-    <path d="M60 70 C460 20 850 140 1040 400 C740 590 310 560 50 340Z" fill="#315d3f"/>
-    <path d="M3150 80 C3540 20 3920 130 4200 430 L4200 930 C3810 970 3420 800 3180 580Z" fill="#2f593a"/>
-  </g>
-  <g opacity="0.74">
-    <ellipse cx="1420" cy="390" rx="460" ry="210" fill="#60583d"/>
-    <ellipse cx="3060" cy="2660" rx="590" ry="230" fill="#625d40"/>
-    <ellipse cx="3660" cy="540" rx="460" ry="200" fill="#645a3d"/>
-  </g>
-  <g opacity="0.9">
-    <rect x="40" y="2320" width="420" height="560" rx="26" fill="#596b61"/>
-    <rect x="500" y="2530" width="390" height="330" rx="24" fill="#647058" opacity="0.86"/>
-    <path d="M90 2420 L230 2300 L370 2420Z" fill="#c68b3b"/>
-    <path d="M560 2600 L700 2490 L840 2600Z" fill="#c68b3b"/>
-    <rect x="3500" y="1580" width="600" height="770" rx="24" fill="url(#dock)"/>
-    <path d="M3560 1640 L4040 1640 L4040 2290 L3560 2290Z" fill="none" stroke="#d7b56b" stroke-width="18" opacity="0.52"/>
-    <path d="M3280 1810 H4080" stroke="#8f6d42" stroke-width="88" opacity="0.84"/>
-    <path d="M3400 1930 H4140" stroke="#76593a" stroke-width="50" opacity="0.88"/>
-  </g>
-  <g opacity="0.67">
-    <rect x="1950" y="2050" width="360" height="120" rx="18" fill="#74684d"/>
-    <path d="M1950 2110 H2310" stroke="#e6d093" stroke-width="18" opacity="0.56"/>
-    <rect x="2730" y="1720" width="320" height="110" rx="18" fill="#74684d"/>
-    <path d="M2730 1775 H3050" stroke="#e6d093" stroke-width="16" opacity="0.5"/>
-    <rect x="2390" y="2240" width="260" height="105" rx="18" fill="#74684d"/>
-  </g>
-  <g opacity="0.65">
-    <circle cx="1280" cy="2340" r="120" fill="url(#lamp)"/>
-    <circle cx="2100" cy="2090" r="120" fill="url(#lamp)"/>
-    <circle cx="2910" cy="1740" r="135" fill="url(#lamp)"/>
-    <circle cx="3620" cy="1660" r="125" fill="url(#lamp)"/>
-  </g>
-  <g opacity="0.2" fill="#e9d79a">
-    <circle cx="650" cy="2400" r="17"/>
-    <circle cx="760" cy="2440" r="14"/>
-    <circle cx="860" cy="2390" r="16"/>
-    <circle cx="1480" cy="2260" r="15"/>
-    <circle cx="1600" cy="2210" r="13"/>
-    <circle cx="3360" cy="1820" r="16"/>
-    <circle cx="3500" cy="1780" r="13"/>
-  </g>
-  <g opacity="0.2">
-    <path d="M0 0H4200V3000H0Z" fill="none" stroke="#f2d386" stroke-width="28"/>
-    <path d="M150 150H4050V2850H150Z" fill="none" stroke="#111820" stroke-width="7"/>
-  </g>
-  <g opacity="0.13" stroke="#121a18" stroke-width="8">
-    <path d="M0 500H4200M0 1000H4200M0 1500H4200M0 2000H4200M0 2500H4200"/>
-    <path d="M500 0V3000M1000 0V3000M1500 0V3000M2000 0V3000M2500 0V3000M3000 0V3000M3500 0V3000M4000 0V3000"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-first-battle-map.webp b/src/assets/images/battle/twenty-first-battle-map.webp
new file mode 100644
index 0000000..9fbdafe
Binary files /dev/null and b/src/assets/images/battle/twenty-first-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-fourth-battle-map.svg b/src/assets/images/battle/twenty-fourth-battle-map.svg
deleted file mode 100644
index ca557cc..0000000
--- a/src/assets/images/battle/twenty-fourth-battle-map.svg
+++ /dev/null
@@ -1,86 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="4800" height="3200" viewBox="0 0 4800 3200">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="5" seed="24"/>
-      <feColorMatrix type="saturate" values="0.62"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#a99d5d"/>
-      <stop offset="0.5" stop-color="#77895e"/>
-      <stop offset="1" stop-color="#516a4b"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" x2="1">
-      <stop offset="0" stop-color="#84613b"/>
-      <stop offset="0.5" stop-color="#c7a967"/>
-      <stop offset="1" stop-color="#755333"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#17324b"/>
-      <stop offset="0.48" stop-color="#327b91"/>
-      <stop offset="1" stop-color="#10283e"/>
-    </linearGradient>
-    <pattern id="grass" width="128" height="128" patternUnits="userSpaceOnUse">
-      <rect width="128" height="128" fill="url(#plain)"/>
-      <path d="M16 88 L44 66 M68 102 L104 76 M20 34 L48 20 M90 40 L120 22" stroke="#2a472a" stroke-opacity="0.34" stroke-width="8"/>
-      <circle cx="31" cy="107" r="8" fill="#c0b56b" opacity="0.36"/>
-      <circle cx="92" cy="28" r="7" fill="#334f2e" opacity="0.38"/>
-    </pattern>
-    <pattern id="waves" width="172" height="96" patternUnits="userSpaceOnUse">
-      <path d="M0 42 C42 18 83 72 128 44 C146 34 158 32 172 38" fill="none" stroke="#c8f2f2" stroke-opacity="0.22" stroke-width="9"/>
-      <path d="M0 82 C38 58 84 108 130 82 C148 72 160 68 172 72" fill="none" stroke="#0b314b" stroke-opacity="0.34" stroke-width="10"/>
-    </pattern>
-    <radialGradient id="forest" cx="50%" cy="50%" r="62%">
-      <stop offset="0" stop-color="#596c35"/>
-      <stop offset="0.6" stop-color="#263c25"/>
-      <stop offset="1" stop-color="#132417"/>
-    </radialGradient>
-    <radialGradient id="hill" cx="50%" cy="45%" r="60%">
-      <stop offset="0" stop-color="#aca16a"/>
-      <stop offset="0.56" stop-color="#68703d"/>
-      <stop offset="1" stop-color="#313b25"/>
-    </radialGradient>
-  </defs>
-  <rect width="4800" height="3200" fill="#151714"/>
-  <rect width="4800" height="3200" fill="url(#grass)" filter="url(#grain)"/>
-  <path d="M2170 -100 C2360 500 2300 980 2200 1430 C2100 1900 2220 2490 2070 3300 L2335 3300 C2460 2540 2360 1990 2460 1500 C2570 980 2560 470 2380 -100 Z" fill="url(#river)"/>
-  <path d="M3170 -80 C3340 420 3370 890 3270 1280 C3175 1650 3250 1970 3360 2230 L3535 2230 C3430 1780 3560 1390 3490 1040 C3420 620 3500 260 3370 -80 Z" fill="url(#river)"/>
-  <path d="M2740 2470 C2890 2730 2940 2960 2880 3300 L3070 3300 C3160 2900 3050 2630 2920 2470 Z" fill="url(#river)"/>
-  <path d="M2170 -100 C2360 500 2300 980 2200 1430 C2100 1900 2220 2490 2070 3300 L2335 3300 C2460 2540 2360 1990 2460 1500 C2570 980 2560 470 2380 -100 Z" fill="url(#waves)" opacity="0.74"/>
-  <path d="M3170 -80 C3340 420 3370 890 3270 1280 C3175 1650 3250 1970 3360 2230 L3535 2230 C3430 1780 3560 1390 3490 1040 C3420 620 3500 260 3370 -80 Z" fill="url(#waves)" opacity="0.7"/>
-  <path d="M340 2440 C760 2420 1310 2490 1800 2340 C2300 2190 2670 2020 3220 1880 C3650 1770 4090 1770 4420 1810" fill="none" stroke="url(#road)" stroke-width="152" stroke-linecap="round"/>
-  <path d="M910 2580 C1190 2310 1480 2110 1920 2050 C2340 1990 2690 1830 3010 1680" fill="none" stroke="#704d2d" stroke-opacity="0.34" stroke-width="48" stroke-dasharray="90 78"/>
-  <path d="M4200 1480 L4210 2470" stroke="url(#road)" stroke-width="126" stroke-linecap="round"/>
-  <g opacity="0.92">
-    <path d="M270 820 C620 580 1010 520 1460 610 C1520 920 1370 1260 1030 1440 C680 1390 420 1180 270 820 Z" fill="url(#forest)"/>
-    <path d="M380 70 C760 20 1070 100 1280 320 C1080 610 720 760 270 700 C110 440 150 230 380 70 Z" fill="url(#forest)"/>
-    <path d="M3290 130 C3720 10 4230 95 4620 310 C4440 640 4080 810 3650 760 C3380 640 3280 410 3290 130 Z" fill="url(#forest)"/>
-    <path d="M1580 2540 C1900 2440 2180 2570 2350 2860 C2140 3130 1800 3200 1500 3060 C1410 2840 1450 2660 1580 2540 Z" fill="url(#forest)"/>
-  </g>
-  <g opacity="0.9">
-    <ellipse cx="1540" cy="470" rx="560" ry="260" fill="url(#hill)"/>
-    <ellipse cx="3700" cy="2820" rx="650" ry="320" fill="url(#hill)"/>
-    <ellipse cx="4240" cy="610" rx="450" ry="245" fill="url(#hill)"/>
-    <path d="M80 0 C180 500 160 990 0 1550 L0 0 Z" fill="#303329"/>
-    <path d="M4700 0 C4600 420 4640 800 4800 1220 L4800 0 Z" fill="#303329"/>
-    <path d="M4660 2440 C4700 2790 4740 3020 4800 3200 L4800 2440 Z" fill="#303329"/>
-  </g>
-  <g opacity="0.94">
-    <rect x="100" y="2400" width="630" height="520" rx="20" fill="#304436" stroke="#d8bc72" stroke-width="20"/>
-    <path d="M190 2610 L390 2470 L590 2610 Z" fill="#daa23f"/>
-    <rect x="230" y="2610" width="320" height="195" fill="#708548"/>
-    <rect x="1410" y="2210" width="360" height="280" fill="#6a5a3b" stroke="#e3c778" stroke-width="16"/>
-    <path d="M1410 2210 L1590 2080 L1770 2210" fill="#d39b36"/>
-    <rect x="2700" y="1660" width="370" height="270" fill="#5d7043" stroke="#dfc171" stroke-width="16"/>
-    <path d="M2700 1660 L2885 1530 L3070 1660" fill="#c98b34"/>
-    <rect x="3530" y="1250" width="330" height="250" fill="#596a41" stroke="#dabe72" stroke-width="16"/>
-    <path d="M3530 1250 L3695 1130 L3860 1250" fill="#d29a37"/>
-    <path d="M4000 1450 L4680 1450 L4680 2290 L4000 2290 Z" fill="#283337" stroke="#c9a052" stroke-width="34"/>
-    <path d="M4110 1590 L4560 1590 M4110 1760 L4560 1760 M4110 1930 L4560 1930 M4110 2100 L4560 2100" stroke="#775630" stroke-width="40"/>
-    <path d="M4040 1400 L4340 1280 L4680 1410" fill="#8d6f41"/>
-  </g>
-  <g opacity="0.14">
-    <path d="M0 0 H4800 M0 100 H4800 M0 200 H4800 M0 300 H4800 M0 400 H4800 M0 500 H4800 M0 600 H4800 M0 700 H4800 M0 800 H4800 M0 900 H4800 M0 1000 H4800 M0 1100 H4800 M0 1200 H4800 M0 1300 H4800 M0 1400 H4800 M0 1500 H4800 M0 1600 H4800 M0 1700 H4800 M0 1800 H4800 M0 1900 H4800 M0 2000 H4800 M0 2100 H4800 M0 2200 H4800 M0 2300 H4800 M0 2400 H4800 M0 2500 H4800 M0 2600 H4800 M0 2700 H4800 M0 2800 H4800 M0 2900 H4800 M0 3000 H4800 M0 3100 H4800" stroke="#0c0f10" stroke-width="3"/>
-    <path d="M0 0 V3200 M100 0 V3200 M200 0 V3200 M300 0 V3200 M400 0 V3200 M500 0 V3200 M600 0 V3200 M700 0 V3200 M800 0 V3200 M900 0 V3200 M1000 0 V3200 M1100 0 V3200 M1200 0 V3200 M1300 0 V3200 M1400 0 V3200 M1500 0 V3200 M1600 0 V3200 M1700 0 V3200 M1800 0 V3200 M1900 0 V3200 M2000 0 V3200 M2100 0 V3200 M2200 0 V3200 M2300 0 V3200 M2400 0 V3200 M2500 0 V3200 M2600 0 V3200 M2700 0 V3200 M2800 0 V3200 M2900 0 V3200 M3000 0 V3200 M3100 0 V3200 M3200 0 V3200 M3300 0 V3200 M3400 0 V3200 M3500 0 V3200 M3600 0 V3200 M3700 0 V3200 M3800 0 V3200 M3900 0 V3200 M4000 0 V3200 M4100 0 V3200 M4200 0 V3200 M4300 0 V3200 M4400 0 V3200 M4500 0 V3200 M4600 0 V3200 M4700 0 V3200" stroke="#0c0f10" stroke-width="3"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-fourth-battle-map.webp b/src/assets/images/battle/twenty-fourth-battle-map.webp
new file mode 100644
index 0000000..3c0a1d2
Binary files /dev/null and b/src/assets/images/battle/twenty-fourth-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-second-battle-map.svg b/src/assets/images/battle/twenty-second-battle-map.svg
deleted file mode 100644
index 277800b..0000000
--- a/src/assets/images/battle/twenty-second-battle-map.svg
+++ /dev/null
@@ -1,80 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="4400" height="3000" viewBox="0 0 4400 3000">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.011" numOctaves="5" seed="22"/>
-      <feColorMatrix type="saturate" values="0.55"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="river" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#08182c"/>
-      <stop offset="0.45" stop-color="#1f6688"/>
-      <stop offset="1" stop-color="#081525"/>
-    </linearGradient>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#9f9862"/>
-      <stop offset="0.55" stop-color="#6e7750"/>
-      <stop offset="1" stop-color="#4e654d"/>
-    </linearGradient>
-    <linearGradient id="deck" x1="0" x2="1">
-      <stop offset="0" stop-color="#d3b36c"/>
-      <stop offset="0.45" stop-color="#8b6236"/>
-      <stop offset="1" stop-color="#46311f"/>
-    </linearGradient>
-    <radialGradient id="fire" cx="45%" cy="50%" r="55%">
-      <stop offset="0" stop-color="#fff3a7"/>
-      <stop offset="0.35" stop-color="#ff9b2c"/>
-      <stop offset="0.72" stop-color="#ba2e18"/>
-      <stop offset="1" stop-color="#371010"/>
-    </radialGradient>
-    <pattern id="waves" width="160" height="96" patternUnits="userSpaceOnUse">
-      <path d="M0 48 C38 18 82 78 122 48 C140 36 150 34 160 38" fill="none" stroke="#b6e7ef" stroke-opacity="0.22" stroke-width="9"/>
-      <path d="M0 84 C42 56 82 112 126 82 C142 70 154 68 160 72" fill="none" stroke="#0d304b" stroke-opacity="0.34" stroke-width="10"/>
-    </pattern>
-    <pattern id="grass" width="120" height="120" patternUnits="userSpaceOnUse">
-      <rect width="120" height="120" fill="url(#plain)"/>
-      <path d="M18 80 L40 62 M58 93 L83 71 M12 31 L35 20 M92 42 L114 24" stroke="#253d29" stroke-opacity="0.34" stroke-width="8"/>
-      <circle cx="24" cy="98" r="8" fill="#b0a75e" opacity="0.42"/>
-      <circle cx="78" cy="28" r="7" fill="#334726" opacity="0.38"/>
-    </pattern>
-  </defs>
-  <rect width="4400" height="3000" fill="#121515"/>
-  <rect x="0" y="0" width="4400" height="3000" fill="url(#grass)" filter="url(#grain)"/>
-  <path d="M1780 -80 C2050 520 1990 1080 1850 1520 C1730 1900 1775 2380 1540 3100 L3180 3100 C3020 2380 3230 1980 3140 1540 C3035 1030 3140 520 2940 -80 Z" fill="url(#river)"/>
-  <path d="M1780 -80 C2050 520 1990 1080 1850 1520 C1730 1900 1775 2380 1540 3100 L3180 3100 C3020 2380 3230 1980 3140 1540 C3035 1030 3140 520 2940 -80 Z" fill="url(#waves)" opacity="0.82"/>
-  <path d="M0 2180 C520 2100 880 2140 1260 1980 C1550 1860 1700 1880 1960 2020" fill="none" stroke="#a88045" stroke-width="190" stroke-linecap="round"/>
-  <path d="M1220 2050 C1620 1940 1960 1810 2320 1680 C2780 1510 3210 1430 4000 1420" fill="none" stroke="#c29c56" stroke-width="135" stroke-linecap="round"/>
-  <path d="M3050 1440 L4100 1430" stroke="#6a3f25" stroke-width="210" stroke-linecap="round"/>
-  <path d="M3050 1440 L4100 1430" stroke="url(#deck)" stroke-width="160" stroke-linecap="round"/>
-  <path d="M3500 1020 C3820 930 4210 965 4400 1060 L4400 1890 C4130 1960 3820 1900 3500 1760 Z" fill="#4c3a2b" opacity="0.72"/>
-  <path d="M3440 1120 C3740 1050 4060 1080 4310 1160 L4310 1730 C4000 1810 3720 1740 3440 1640 Z" fill="#283337" opacity="0.64"/>
-  <g opacity="0.96">
-    <ellipse cx="2600" cy="2130" rx="260" ry="86" fill="#69421f"/>
-    <ellipse cx="2920" cy="1970" rx="300" ry="92" fill="#6f4722"/>
-    <ellipse cx="3160" cy="1690" rx="320" ry="98" fill="#755024"/>
-    <path d="M2380 2105 L2810 1955 L3210 1650" fill="none" stroke="#d1bd74" stroke-width="26" stroke-dasharray="60 42"/>
-    <path d="M2510 2045 C2730 1900 3000 1780 3310 1660" fill="none" stroke="#ffcf6a" stroke-width="18" stroke-opacity="0.7"/>
-  </g>
-  <g opacity="0.9">
-    <ellipse cx="3035" cy="1940" rx="210" ry="150" fill="url(#fire)"/>
-    <ellipse cx="3265" cy="1685" rx="250" ry="180" fill="url(#fire)"/>
-    <ellipse cx="3620" cy="1430" rx="310" ry="220" fill="url(#fire)"/>
-    <path d="M2930 1870 C3020 1690 3130 1700 3190 1510 C3240 1690 3440 1720 3370 1960 C3210 1880 3110 2010 2930 1870 Z" fill="#fff0a8" opacity="0.55"/>
-  </g>
-  <g opacity="0.88">
-    <path d="M480 940 C780 650 1200 480 1720 520 C1540 710 1440 880 1390 1120 C1050 1060 750 1120 480 940 Z" fill="#283b26"/>
-    <path d="M3600 150 C3920 30 4220 80 4400 180 L4400 840 C4160 690 3860 650 3570 760 C3660 540 3640 350 3600 150 Z" fill="#354326"/>
-    <path d="M3280 2260 C3600 2220 3980 2320 4400 2550 L4400 3000 L3320 3000 C3440 2740 3370 2490 3280 2260 Z" fill="#2f3b25"/>
-  </g>
-  <g opacity="0.9">
-    <rect x="90" y="2175" width="520" height="520" rx="22" fill="#2c3b31" stroke="#d2b46c" stroke-width="18"/>
-    <rect x="160" y="2248" width="360" height="120" fill="#b07a35"/>
-    <rect x="185" y="2390" width="300" height="230" fill="#587145"/>
-    <path d="M185 2390 L335 2290 L485 2390" fill="#d7a541"/>
-    <path d="M3680 1040 L4240 1040 L4240 1790 L3680 1790 Z" fill="none" stroke="#c79f52" stroke-width="30"/>
-    <path d="M3770 1160 L4150 1160 M3770 1320 L4150 1320 M3770 1480 L4150 1480 M3770 1640 L4150 1640" stroke="#71512d" stroke-width="36"/>
-  </g>
-  <g opacity="0.16">
-    <path d="M0 0 H4400 M0 100 H4400 M0 200 H4400 M0 300 H4400 M0 400 H4400 M0 500 H4400 M0 600 H4400 M0 700 H4400 M0 800 H4400 M0 900 H4400 M0 1000 H4400 M0 1100 H4400 M0 1200 H4400 M0 1300 H4400 M0 1400 H4400 M0 1500 H4400 M0 1600 H4400 M0 1700 H4400 M0 1800 H4400 M0 1900 H4400 M0 2000 H4400 M0 2100 H4400 M0 2200 H4400 M0 2300 H4400 M0 2400 H4400 M0 2500 H4400 M0 2600 H4400 M0 2700 H4400 M0 2800 H4400 M0 2900 H4400" stroke="#0c0f10" stroke-width="3"/>
-    <path d="M0 0 V3000 M100 0 V3000 M200 0 V3000 M300 0 V3000 M400 0 V3000 M500 0 V3000 M600 0 V3000 M700 0 V3000 M800 0 V3000 M900 0 V3000 M1000 0 V3000 M1100 0 V3000 M1200 0 V3000 M1300 0 V3000 M1400 0 V3000 M1500 0 V3000 M1600 0 V3000 M1700 0 V3000 M1800 0 V3000 M1900 0 V3000 M2000 0 V3000 M2100 0 V3000 M2200 0 V3000 M2300 0 V3000 M2400 0 V3000 M2500 0 V3000 M2600 0 V3000 M2700 0 V3000 M2800 0 V3000 M2900 0 V3000 M3000 0 V3000 M3100 0 V3000 M3200 0 V3000 M3300 0 V3000 M3400 0 V3000 M3500 0 V3000 M3600 0 V3000 M3700 0 V3000 M3800 0 V3000 M3900 0 V3000 M4000 0 V3000 M4100 0 V3000 M4200 0 V3000 M4300 0 V3000" stroke="#0c0f10" stroke-width="3"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-second-battle-map.webp b/src/assets/images/battle/twenty-second-battle-map.webp
new file mode 100644
index 0000000..7238195
Binary files /dev/null and b/src/assets/images/battle/twenty-second-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-third-battle-map.svg b/src/assets/images/battle/twenty-third-battle-map.svg
deleted file mode 100644
index 2e57ac6..0000000
--- a/src/assets/images/battle/twenty-third-battle-map.svg
+++ /dev/null
@@ -1,86 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="4600" height="3200" viewBox="0 0 4600 3200">
-  <defs>
-    <filter id="grain">
-      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="5" seed="23"/>
-      <feColorMatrix type="saturate" values="0.6"/>
-      <feBlend mode="multiply" in2="SourceGraphic"/>
-    </filter>
-    <linearGradient id="plain" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#aaa05f"/>
-      <stop offset="0.55" stop-color="#76845a"/>
-      <stop offset="1" stop-color="#526949"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" x2="1" y1="0" y2="1">
-      <stop offset="0" stop-color="#142a40"/>
-      <stop offset="0.45" stop-color="#2b7591"/>
-      <stop offset="1" stop-color="#102238"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" x2="1">
-      <stop offset="0" stop-color="#987042"/>
-      <stop offset="0.5" stop-color="#c7aa67"/>
-      <stop offset="1" stop-color="#74512e"/>
-    </linearGradient>
-    <pattern id="grass" width="130" height="130" patternUnits="userSpaceOnUse">
-      <rect width="130" height="130" fill="url(#plain)"/>
-      <path d="M18 92 L44 70 M70 104 L104 78 M24 34 L48 20 M94 38 L122 22" stroke="#2a4628" stroke-opacity="0.35" stroke-width="8"/>
-      <circle cx="28" cy="110" r="8" fill="#b7ad66" opacity="0.38"/>
-      <circle cx="92" cy="28" r="7" fill="#344e2c" opacity="0.4"/>
-    </pattern>
-    <pattern id="waves" width="170" height="96" patternUnits="userSpaceOnUse">
-      <path d="M0 42 C42 18 83 72 128 44 C145 34 156 32 170 38" fill="none" stroke="#c3edf1" stroke-opacity="0.23" stroke-width="9"/>
-      <path d="M0 82 C38 58 84 108 130 82 C148 72 158 68 170 72" fill="none" stroke="#0b314b" stroke-opacity="0.34" stroke-width="10"/>
-    </pattern>
-    <radialGradient id="hill" cx="50%" cy="45%" r="60%">
-      <stop offset="0" stop-color="#9f9867"/>
-      <stop offset="0.55" stop-color="#626938"/>
-      <stop offset="1" stop-color="#303a24"/>
-    </radialGradient>
-    <radialGradient id="forest" cx="50%" cy="50%" r="62%">
-      <stop offset="0" stop-color="#536834"/>
-      <stop offset="0.58" stop-color="#243b25"/>
-      <stop offset="1" stop-color="#142417"/>
-    </radialGradient>
-  </defs>
-  <rect width="4600" height="3200" fill="#151714"/>
-  <rect width="4600" height="3200" fill="url(#grass)" filter="url(#grain)"/>
-  <path d="M1980 -100 C2140 520 2120 1150 2010 1590 C1900 2060 2060 2540 1940 3300 L2200 3300 C2310 2580 2160 2110 2260 1660 C2380 1120 2370 510 2180 -100 Z" fill="url(#river)"/>
-  <path d="M2870 -80 C3040 510 3060 930 2970 1320 C2880 1700 2940 1980 3040 2130 L3210 2130 C3120 1740 3240 1390 3180 1050 C3120 640 3190 300 3060 -80 Z" fill="url(#river)"/>
-  <path d="M2460 2380 C2600 2680 2670 2920 2630 3300 L2810 3300 C2890 2880 2810 2600 2660 2380 Z" fill="url(#river)"/>
-  <path d="M1980 -100 C2140 520 2120 1150 2010 1590 C1900 2060 2060 2540 1940 3300 L2200 3300 C2310 2580 2160 2110 2260 1660 C2380 1120 2370 510 2180 -100 Z" fill="url(#waves)" opacity="0.75"/>
-  <path d="M2870 -80 C3040 510 3060 930 2970 1320 C2880 1700 2940 1980 3040 2130 L3210 2130 C3120 1740 3240 1390 3180 1050 C3120 640 3190 300 3060 -80 Z" fill="url(#waves)" opacity="0.72"/>
-  <path d="M290 2510 C700 2480 1260 2520 1690 2370 C2160 2210 2510 2020 3040 1880 C3460 1768 3880 1760 4210 1790" fill="none" stroke="url(#road)" stroke-width="150" stroke-linecap="round"/>
-  <path d="M900 2550 C1180 2300 1430 2100 1840 2040 C2260 1980 2590 1850 2860 1720" fill="none" stroke="#6f4c2c" stroke-opacity="0.34" stroke-width="48" stroke-dasharray="90 80"/>
-  <path d="M3800 1450 L3820 2390" stroke="url(#road)" stroke-width="125" stroke-linecap="round"/>
-  <g opacity="0.92">
-    <path d="M250 920 C580 650 960 540 1430 570 C1500 900 1380 1260 1070 1460 C720 1430 430 1220 250 920 Z" fill="url(#forest)"/>
-    <path d="M380 90 C760 30 1020 90 1210 310 C1020 590 690 720 260 690 C130 420 160 240 380 90 Z" fill="url(#forest)"/>
-    <path d="M3180 180 C3580 30 4090 80 4460 260 C4300 600 3970 780 3560 770 C3290 660 3180 430 3180 180 Z" fill="url(#forest)"/>
-    <path d="M1570 2540 C1870 2440 2110 2560 2280 2840 C2100 3110 1780 3190 1510 3060 C1420 2840 1450 2670 1570 2540 Z" fill="url(#forest)"/>
-  </g>
-  <g opacity="0.9">
-    <ellipse cx="1410" cy="470" rx="510" ry="260" fill="url(#hill)"/>
-    <ellipse cx="3630" cy="2790" rx="620" ry="330" fill="url(#hill)"/>
-    <ellipse cx="4150" cy="590" rx="420" ry="250" fill="url(#hill)"/>
-    <path d="M80 0 C180 500 160 980 0 1550 L0 0 Z" fill="#2f3327"/>
-    <path d="M4510 0 C4420 420 4450 800 4600 1220 L4600 0 Z" fill="#2f3327"/>
-    <path d="M4470 2440 C4500 2790 4540 3020 4600 3200 L4600 2440 Z" fill="#2f3327"/>
-  </g>
-  <g opacity="0.94">
-    <rect x="90" y="2430" width="590" height="520" rx="20" fill="#2f4234" stroke="#d7bb72" stroke-width="20"/>
-    <path d="M170 2630 L350 2490 L530 2630 Z" fill="#d9a13d"/>
-    <rect x="205" y="2630" width="300" height="190" fill="#6f8348"/>
-    <rect x="1210" y="2300" width="330" height="270" fill="#695738" stroke="#e2c575" stroke-width="16"/>
-    <path d="M1210 2300 L1375 2180 L1540 2300" fill="#d59b34"/>
-    <rect x="2460" y="1780" width="350" height="260" fill="#5f6f43" stroke="#dfc171" stroke-width="16"/>
-    <path d="M2460 1780 L2635 1655 L2810 1780" fill="#c98932"/>
-    <rect x="3360" y="1490" width="310" height="260" fill="#596840" stroke="#d9bd72" stroke-width="16"/>
-    <path d="M3360 1490 L3515 1380 L3670 1490" fill="#d19637"/>
-    <path d="M3820 1370 L4500 1370 L4500 2230 L3820 2230 Z" fill="#263236" stroke="#c89f53" stroke-width="32"/>
-    <path d="M3930 1510 L4390 1510 M3930 1680 L4390 1680 M3930 1850 L4390 1850 M3930 2020 L4390 2020" stroke="#775630" stroke-width="40"/>
-    <path d="M3860 1325 L4140 1210 L4500 1340" fill="#8c6c3f"/>
-  </g>
-  <g opacity="0.14">
-    <path d="M0 0 H4600 M0 100 H4600 M0 200 H4600 M0 300 H4600 M0 400 H4600 M0 500 H4600 M0 600 H4600 M0 700 H4600 M0 800 H4600 M0 900 H4600 M0 1000 H4600 M0 1100 H4600 M0 1200 H4600 M0 1300 H4600 M0 1400 H4600 M0 1500 H4600 M0 1600 H4600 M0 1700 H4600 M0 1800 H4600 M0 1900 H4600 M0 2000 H4600 M0 2100 H4600 M0 2200 H4600 M0 2300 H4600 M0 2400 H4600 M0 2500 H4600 M0 2600 H4600 M0 2700 H4600 M0 2800 H4600 M0 2900 H4600 M0 3000 H4600 M0 3100 H4600" stroke="#0c0f10" stroke-width="3"/>
-    <path d="M0 0 V3200 M100 0 V3200 M200 0 V3200 M300 0 V3200 M400 0 V3200 M500 0 V3200 M600 0 V3200 M700 0 V3200 M800 0 V3200 M900 0 V3200 M1000 0 V3200 M1100 0 V3200 M1200 0 V3200 M1300 0 V3200 M1400 0 V3200 M1500 0 V3200 M1600 0 V3200 M1700 0 V3200 M1800 0 V3200 M1900 0 V3200 M2000 0 V3200 M2100 0 V3200 M2200 0 V3200 M2300 0 V3200 M2400 0 V3200 M2500 0 V3200 M2600 0 V3200 M2700 0 V3200 M2800 0 V3200 M2900 0 V3200 M3000 0 V3200 M3100 0 V3200 M3200 0 V3200 M3300 0 V3200 M3400 0 V3200 M3500 0 V3200 M3600 0 V3200 M3700 0 V3200 M3800 0 V3200 M3900 0 V3200 M4000 0 V3200 M4100 0 V3200 M4200 0 V3200 M4300 0 V3200 M4400 0 V3200 M4500 0 V3200" stroke="#0c0f10" stroke-width="3"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-third-battle-map.webp b/src/assets/images/battle/twenty-third-battle-map.webp
new file mode 100644
index 0000000..b21c213
Binary files /dev/null and b/src/assets/images/battle/twenty-third-battle-map.webp differ
diff --git a/src/game/data/battleMapAssets.ts b/src/game/data/battleMapAssets.ts
index 1ba5c11..996ec42 100644
--- a/src/game/data/battleMapAssets.ts
+++ b/src/game/data/battleMapAssets.ts
@@ -55,14 +55,14 @@ import thirtyThirdBattleMapUrl from '../../assets/images/battle/thirty-third-bat
 import thirdBattleMapUrl from '../../assets/images/battle/third-battle-map.webp';
 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';
-import twentyFourthBattleMapUrl from '../../assets/images/battle/twenty-fourth-battle-map.svg';
+import twentyFifthBattleMapUrl from '../../assets/images/battle/twenty-fifth-battle-map.webp';
+import twentyFirstBattleMapUrl from '../../assets/images/battle/twenty-first-battle-map.webp';
+import twentyFourthBattleMapUrl from '../../assets/images/battle/twenty-fourth-battle-map.webp';
 import twentyNinthBattleMapUrl from '../../assets/images/battle/twenty-ninth-battle-map.svg';
-import twentySecondBattleMapUrl from '../../assets/images/battle/twenty-second-battle-map.svg';
+import twentySecondBattleMapUrl from '../../assets/images/battle/twenty-second-battle-map.webp';
 import twentySeventhBattleMapUrl from '../../assets/images/battle/twenty-seventh-battle-map.svg';
 import twentySixthBattleMapUrl from '../../assets/images/battle/twenty-sixth-battle-map.svg';
-import twentyThirdBattleMapUrl from '../../assets/images/battle/twenty-third-battle-map.svg';
+import twentyThirdBattleMapUrl from '../../assets/images/battle/twenty-third-battle-map.webp';
 import twelfthBattleMapUrl from '../../assets/images/battle/twelfth-battle-map.webp';
 
 export const battleMapAssets: Record<string, string> = {