diff --git a/docs/battle-map-terrain-atlas-pipeline.md b/docs/battle-map-terrain-atlas-pipeline.md
index cea923c..e57c59a 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-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.
+The first thirty 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
 
@@ -42,6 +42,11 @@ python scripts/generate-handpaint-map-sample.py --map twenty-second --webp-quali
 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
+python scripts/generate-handpaint-map-sample.py --map twenty-sixth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-seventh --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-eighth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map twenty-ninth --webp-quality 90
+python scripts/generate-handpaint-map-sample.py --map thirtieth --webp-quality 90
 ```
 
 ## Current Assets
@@ -71,6 +76,11 @@ python scripts/generate-handpaint-map-sample.py --map twenty-fifth --webp-qualit
 - `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`
+- `src/assets/images/battle/twenty-sixth-battle-map.webp`
+- `src/assets/images/battle/twenty-seventh-battle-map.webp`
+- `src/assets/images/battle/twenty-eighth-battle-map.webp`
+- `src/assets/images/battle/twenty-ninth-battle-map.webp`
+- `src/assets/images/battle/thirtieth-battle-map.webp`
 
 ## QA Outputs
 
@@ -122,5 +132,15 @@ python scripts/generate-handpaint-map-sample.py --map twenty-fifth --webp-qualit
 - `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`
+- `docs/twenty-sixth-battle-map-handpaint-before-after.png`
+- `docs/twenty-sixth-battle-map-handpaint-preview.png`
+- `docs/twenty-seventh-battle-map-handpaint-before-after.png`
+- `docs/twenty-seventh-battle-map-handpaint-preview.png`
+- `docs/twenty-eighth-battle-map-handpaint-before-after.png`
+- `docs/twenty-eighth-battle-map-handpaint-preview.png`
+- `docs/twenty-ninth-battle-map-handpaint-before-after.png`
+- `docs/twenty-ninth-battle-map-handpaint-preview.png`
+- `docs/thirtieth-battle-map-handpaint-before-after.png`
+- `docs/thirtieth-battle-map-handpaint-preview.png`
 
 Browser screenshots are saved per verification run after build/deploy.
diff --git a/docs/thirtieth-battle-map-handpaint-before-after.png b/docs/thirtieth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..e33bc98
Binary files /dev/null and b/docs/thirtieth-battle-map-handpaint-before-after.png differ
diff --git a/docs/thirtieth-battle-map-handpaint-preview.png b/docs/thirtieth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..c25a341
Binary files /dev/null and b/docs/thirtieth-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-eighth-battle-map-handpaint-before-after.png b/docs/twenty-eighth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..a014eb1
Binary files /dev/null and b/docs/twenty-eighth-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-eighth-battle-map-handpaint-preview.png b/docs/twenty-eighth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..c26011c
Binary files /dev/null and b/docs/twenty-eighth-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-ninth-battle-map-handpaint-before-after.png b/docs/twenty-ninth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..dbf1e2c
Binary files /dev/null and b/docs/twenty-ninth-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-ninth-battle-map-handpaint-preview.png b/docs/twenty-ninth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..490bca6
Binary files /dev/null and b/docs/twenty-ninth-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-seventh-battle-map-handpaint-before-after.png b/docs/twenty-seventh-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..0cbc2ae
Binary files /dev/null and b/docs/twenty-seventh-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-seventh-battle-map-handpaint-preview.png b/docs/twenty-seventh-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..5c6d230
Binary files /dev/null and b/docs/twenty-seventh-battle-map-handpaint-preview.png differ
diff --git a/docs/twenty-sixth-battle-map-handpaint-before-after.png b/docs/twenty-sixth-battle-map-handpaint-before-after.png
new file mode 100644
index 0000000..6e67b6e
Binary files /dev/null and b/docs/twenty-sixth-battle-map-handpaint-before-after.png differ
diff --git a/docs/twenty-sixth-battle-map-handpaint-preview.png b/docs/twenty-sixth-battle-map-handpaint-preview.png
new file mode 100644
index 0000000..60e69a2
Binary files /dev/null and b/docs/twenty-sixth-battle-map-handpaint-preview.png differ
diff --git a/scripts/generate-handpaint-map-sample.py b/scripts/generate-handpaint-map-sample.py
index 3a84fff..bf6b5b6 100644
--- a/scripts/generate-handpaint-map-sample.py
+++ b/scripts/generate-handpaint-map-sample.py
@@ -244,6 +244,51 @@ MAP_CONFIGS = {
         "before": BATTLE_IMAGE_DIR / "twenty-fifth-battle-map.svg",
         "seed": 240944,
     },
+    "twenty-sixth": {
+        "slug": "twenty-sixth-battle-map",
+        "terrain_export": "twentySixthBattleMap",
+        "units_export": "twentySixthBattleUnits",
+        "ally_positions_export": "twentySixthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-sixth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-sixth-battle-map.svg",
+        "seed": 240954,
+    },
+    "twenty-seventh": {
+        "slug": "twenty-seventh-battle-map",
+        "terrain_export": "twentySeventhBattleMap",
+        "units_export": "twentySeventhBattleUnits",
+        "ally_positions_export": "twentySeventhBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-seventh-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-seventh-battle-map.svg",
+        "seed": 240964,
+    },
+    "twenty-eighth": {
+        "slug": "twenty-eighth-battle-map",
+        "terrain_export": "twentyEighthBattleMap",
+        "units_export": "twentyEighthBattleUnits",
+        "ally_positions_export": "twentyEighthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-eighth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-eighth-battle-map.svg",
+        "seed": 240974,
+    },
+    "twenty-ninth": {
+        "slug": "twenty-ninth-battle-map",
+        "terrain_export": "twentyNinthBattleMap",
+        "units_export": "twentyNinthBattleUnits",
+        "ally_positions_export": "twentyNinthBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "twenty-ninth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "twenty-ninth-battle-map.svg",
+        "seed": 240984,
+    },
+    "thirtieth": {
+        "slug": "thirtieth-battle-map",
+        "terrain_export": "thirtiethBattleMap",
+        "units_export": "thirtiethBattleUnits",
+        "ally_positions_export": "thirtiethBattleAllyPositions",
+        "out": BATTLE_IMAGE_DIR / "thirtieth-battle-map.webp",
+        "before": BATTLE_IMAGE_DIR / "thirtieth-battle-map.svg",
+        "seed": 240994,
+    },
 }
 
 
diff --git a/src/assets/images/battle/thirtieth-battle-map.svg b/src/assets/images/battle/thirtieth-battle-map.svg
deleted file mode 100644
index fb7a9b8..0000000
--- a/src/assets/images/battle/thirtieth-battle-map.svg
+++ /dev/null
@@ -1,122 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="6000" height="4200" viewBox="0 0 6000 4200">
-  <defs>
-    <filter id="grain" x="-5%" y="-5%" width="110%" height="110%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.024" numOctaves="4" seed="30" result="noise"/>
-      <feColorMatrix type="saturate" values="0.5"/>
-      <feBlend in="SourceGraphic" in2="noise" mode="multiply"/>
-    </filter>
-    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="18" stdDeviation="12" flood-color="#1a1009" flood-opacity="0.48"/>
-    </filter>
-    <linearGradient id="plain" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#6d6f49"/>
-      <stop offset="0.5" stop-color="#a08758"/>
-      <stop offset="1" stop-color="#596743"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#8b653f"/>
-      <stop offset="0.5" stop-color="#d0b06f"/>
-      <stop offset="1" stop-color="#75563a"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="#213a55"/>
-      <stop offset="0.5" stop-color="#6d9fb2"/>
-      <stop offset="1" stop-color="#1e354c"/>
-    </linearGradient>
-    <linearGradient id="mountain" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#5a5134"/>
-      <stop offset="0.58" stop-color="#30341f"/>
-      <stop offset="1" stop-color="#141912"/>
-    </linearGradient>
-    <pattern id="scrub" width="240" height="190" patternUnits="userSpaceOnUse">
-      <path d="M-60 155 C25 110 84 90 160 38 M34 205 C104 150 165 128 260 76" fill="none" stroke="#dec384" stroke-width="12" stroke-opacity="0.15"/>
-      <circle cx="48" cy="60" r="8" fill="#38582f" opacity="0.2"/>
-      <circle cx="164" cy="126" r="7" fill="#31522b" opacity="0.18"/>
-    </pattern>
-  </defs>
-
-  <rect width="6000" height="4200" fill="url(#plain)"/>
-  <rect width="6000" height="4200" fill="url(#scrub)" opacity="0.82" filter="url(#grain)"/>
-
-  <g opacity="0.55">
-    <path d="M0 0 L920 0 C690 410 650 920 790 1390 C940 1930 820 2590 600 3300 C480 3680 500 3960 650 4200 L0 4200Z" fill="#101711"/>
-    <path d="M6000 0 L5250 0 C5010 410 5050 820 5350 1140 C5690 1505 5815 1970 5630 2480 C5470 2920 5530 3560 5800 4200 L6000 4200Z" fill="#101711"/>
-    <path d="M4600 0 C4490 350 4620 675 4910 955 L5040 0Z" fill="#101711"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M1205 0 C1175 420 1250 890 1325 1280 C1410 1820 1350 2440 1220 3150" fill="none" stroke="#1b3147" stroke-width="260" stroke-linecap="round"/>
-    <path d="M1235 0 C1210 425 1280 900 1355 1285 C1435 1815 1370 2425 1245 3140" fill="none" stroke="url(#river)" stroke-width="196" stroke-linecap="round"/>
-    <path d="M1310 100 C1290 545 1375 910 1425 1290 C1480 1770 1425 2320 1325 2850" fill="none" stroke="#a9d6df" stroke-width="22" stroke-linecap="round" opacity="0.5"/>
-
-    <path d="M3220 290 C3330 960 3260 1640 3220 2650" fill="none" stroke="#1b3147" stroke-width="254" stroke-linecap="round"/>
-    <path d="M3250 300 C3355 960 3290 1640 3255 2635" fill="none" stroke="url(#river)" stroke-width="184" stroke-linecap="round"/>
-    <path d="M3320 420 C3375 1030 3325 1620 3290 2430" fill="none" stroke="#a9d6df" stroke-width="20" stroke-linecap="round" opacity="0.48"/>
-
-    <path d="M4190 3180 C4165 3540 4220 3870 4230 4200" fill="none" stroke="#1b3147" stroke-width="235" stroke-linecap="round"/>
-    <path d="M4220 3190 C4200 3550 4250 3880 4255 4200" fill="none" stroke="url(#river)" stroke-width="172" stroke-linecap="round"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M310 760 C690 280 1160 90 1660 70 C1950 55 2200 80 2480 165 C2100 560 1820 950 1580 1400 C1240 1190 890 1185 630 1320 C470 1400 335 1180 310 760Z" fill="url(#mountain)"/>
-    <path d="M2030 90 C2460 -50 2840 50 3190 430 C2950 760 2790 1080 2705 1440 C2350 1185 2020 1090 1660 1220 C1695 795 1825 395 2030 90Z" fill="url(#mountain)"/>
-    <path d="M3360 255 C3890 70 4370 260 4770 870 C4440 1105 4240 1470 4130 1860 C3820 1600 3440 1500 3095 1675 C3135 1180 3240 665 3360 255Z" fill="url(#mountain)"/>
-    <path d="M2360 3500 C2780 3160 3310 3190 3710 3460 C3480 3680 3365 3920 3320 4200 L2240 4200 C2250 3920 2290 3685 2360 3500Z" fill="url(#mountain)"/>
-    <path d="M4320 2880 C4825 2650 5380 2800 5740 3230 C5450 3500 5290 3840 5230 4200 L4330 4200 C4495 3730 4475 3310 4320 2880Z" fill="url(#mountain)"/>
-  </g>
-
-  <g opacity="0.98">
-    <path d="M450 3745 C1050 3500 1550 3450 2090 3130 C2590 2835 2990 2650 3650 2570 C4240 2500 4630 2120 5220 1805 C5470 1670 5700 1680 5860 1790" fill="none" stroke="#4c3422" stroke-width="360" stroke-linecap="round" stroke-linejoin="round" opacity="0.43"/>
-    <path d="M470 3705 C1080 3470 1570 3410 2095 3075 C2625 2740 3035 2590 3640 2510 C4200 2440 4580 2085 5185 1760 C5450 1625 5700 1625 5870 1735" fill="none" stroke="url(#road)" stroke-width="228" stroke-linecap="round" stroke-linejoin="round" filter="url(#grain)"/>
-    <path d="M790 3770 C1480 3525 1910 3390 2470 3010 C2890 2725 3230 2625 3670 2620" fill="none" stroke="#f0d99c" stroke-width="34" stroke-linecap="round" stroke-opacity="0.42"/>
-    <path d="M2860 2780 C3200 2470 3420 2290 3530 1950" fill="none" stroke="#3a261a" stroke-width="68" stroke-linecap="round" opacity="0.28"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M4790 1230 L5650 1230 L5780 1390 L5780 2490 L4710 2490 L4710 1390Z" fill="#69573e" stroke="#211812" stroke-width="38"/>
-    <path d="M4915 1390 L5570 1390 L5670 1505 L5670 2350 L4825 2350 L4825 1505Z" fill="#96784b" stroke="#2b1b12" stroke-width="25"/>
-    <path d="M5100 1750 L5345 1750 L5345 2350 L5100 2350Z" fill="#241b14"/>
-    <path d="M4730 1210 L4630 1360 L4710 1390 L5780 1390 L5855 1300 L5650 1230Z" fill="#363026"/>
-    <path d="M4960 1150 L5110 1055 L5260 1150 L5260 1310 L4960 1310Z" fill="#444034" stroke="#211912" stroke-width="22"/>
-    <path d="M5375 1165 L5495 1090 L5615 1165 L5615 1310 L5375 1310Z" fill="#444034" stroke="#211912" stroke-width="22"/>
-  </g>
-
-  <g opacity="0.76">
-    <circle cx="760" cy="1900" r="250" fill="#2c512a"/>
-    <circle cx="1120" cy="1660" r="270" fill="#335e32"/>
-    <circle cx="1510" cy="2020" r="310" fill="#294d27"/>
-    <circle cx="2020" cy="1510" r="280" fill="#31572e"/>
-    <circle cx="2400" cy="1830" r="310" fill="#294a26"/>
-    <circle cx="2870" cy="2320" r="278" fill="#355f32"/>
-    <circle cx="3580" cy="3440" r="315" fill="#315c31"/>
-    <circle cx="4130" cy="3560" r="360" fill="#294c2a"/>
-    <circle cx="4850" cy="3080" r="340" fill="#31582f"/>
-    <circle cx="5460" cy="3500" r="370" fill="#294b27"/>
-  </g>
-
-  <g opacity="0.96">
-    <g transform="translate(1810 3295)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#746640" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-      <path d="M35 262 C110 294 178 294 250 262" fill="none" stroke="#25301c" stroke-width="20"/>
-    </g>
-    <g transform="translate(3560 2700) scale(0.9)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#716241" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-    </g>
-    <g transform="translate(4320 2040) scale(0.86)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#746340" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-    </g>
-  </g>
-
-  <g opacity="0.28">
-    <path d="M0 3480 C530 3260 910 3275 1330 3400" fill="none" stroke="#ead49c" stroke-width="28"/>
-    <path d="M3700 1650 C4160 1380 4590 1260 5080 1280" fill="none" stroke="#ead49c" stroke-width="24"/>
-    <path d="M1480 3260 C1990 3130 2480 2880 2970 2530" fill="none" stroke="#49321e" stroke-width="18"/>
-    <path d="M3300 2100 C3540 1850 3860 1710 4200 1660" fill="none" stroke="#ead49c" stroke-width="18"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/thirtieth-battle-map.webp b/src/assets/images/battle/thirtieth-battle-map.webp
new file mode 100644
index 0000000..e012c14
Binary files /dev/null and b/src/assets/images/battle/thirtieth-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-eighth-battle-map.svg b/src/assets/images/battle/twenty-eighth-battle-map.svg
deleted file mode 100644
index 87ae462..0000000
--- a/src/assets/images/battle/twenty-eighth-battle-map.svg
+++ /dev/null
@@ -1,121 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="5600" height="3800" viewBox="0 0 5600 3800">
-  <defs>
-    <filter id="grain" x="-5%" y="-5%" width="110%" height="110%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.028" numOctaves="4" seed="28" result="noise"/>
-      <feColorMatrix type="saturate" values="0.44"/>
-      <feBlend in="SourceGraphic" in2="noise" mode="multiply"/>
-    </filter>
-    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="16" stdDeviation="10" flood-color="#1d130c" flood-opacity="0.42"/>
-    </filter>
-    <linearGradient id="plain" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#7d784f"/>
-      <stop offset="0.48" stop-color="#a38d5d"/>
-      <stop offset="1" stop-color="#666d4c"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#b9915d"/>
-      <stop offset="0.5" stop-color="#d7bf82"/>
-      <stop offset="1" stop-color="#896f48"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="#263f58"/>
-      <stop offset="0.5" stop-color="#5d8da7"/>
-      <stop offset="1" stop-color="#243c54"/>
-    </linearGradient>
-    <linearGradient id="mountain" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#555234"/>
-      <stop offset="0.58" stop-color="#2f3421"/>
-      <stop offset="1" stop-color="#151912"/>
-    </linearGradient>
-    <pattern id="scrub" width="220" height="180" patternUnits="userSpaceOnUse">
-      <path d="M-50 150 C20 105 80 90 150 42 M30 194 C96 145 152 126 245 78" fill="none" stroke="#d4bd82" stroke-width="11" stroke-opacity="0.18"/>
-      <circle cx="44" cy="58" r="8" fill="#405f32" opacity="0.2"/>
-      <circle cx="150" cy="122" r="7" fill="#405f32" opacity="0.18"/>
-    </pattern>
-  </defs>
-
-  <rect width="5600" height="3800" fill="url(#plain)"/>
-  <rect width="5600" height="3800" fill="url(#scrub)" opacity="0.82" filter="url(#grain)"/>
-
-  <g opacity="0.48">
-    <path d="M0 0 L1050 0 C835 360 760 770 860 1230 C965 1710 900 2265 690 2860 C570 3200 560 3500 690 3800 L0 3800Z" fill="#111711"/>
-    <path d="M5600 0 L4920 0 C4685 380 4695 735 4970 1030 C5295 1380 5450 1820 5290 2280 C5150 2670 5165 3260 5390 3800 L5600 3800Z" fill="#111711"/>
-    <path d="M4450 0 C4380 280 4490 585 4750 820 L4860 0Z" fill="#111711"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M1190 0 C1160 360 1225 780 1270 1140 C1330 1635 1300 2200 1195 2710" fill="none" stroke="#1c3148" stroke-width="255" stroke-linecap="round"/>
-    <path d="M1215 0 C1190 360 1250 785 1300 1145 C1360 1632 1328 2190 1220 2700" fill="none" stroke="url(#river)" stroke-width="192" stroke-linecap="round"/>
-    <path d="M1285 70 C1270 455 1335 800 1380 1165 C1430 1580 1400 2050 1320 2460" fill="none" stroke="#9bcbdc" stroke-width="22" stroke-linecap="round" opacity="0.5"/>
-
-    <path d="M3010 260 C3100 825 3070 1395 3025 2290" fill="none" stroke="#1c3148" stroke-width="245" stroke-linecap="round"/>
-    <path d="M3040 265 C3120 835 3090 1395 3060 2280" fill="none" stroke="url(#river)" stroke-width="180" stroke-linecap="round"/>
-    <path d="M3105 360 C3150 870 3135 1370 3100 2100" fill="none" stroke="#9fd0df" stroke-width="20" stroke-linecap="round" opacity="0.48"/>
-
-    <path d="M3855 2860 C3845 3180 3890 3480 3890 3800" fill="none" stroke="#1c3148" stroke-width="235" stroke-linecap="round"/>
-    <path d="M3885 2870 C3870 3190 3910 3485 3915 3800" fill="none" stroke="url(#river)" stroke-width="170" stroke-linecap="round"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M420 760 C720 310 1100 130 1530 70 C1740 38 1900 35 2140 90 C1810 430 1550 750 1360 1180 C1145 1090 910 1070 690 1160 C560 1215 455 1105 420 760Z" fill="url(#mountain)"/>
-    <path d="M1970 130 C2310 5 2640 80 2920 380 C2720 650 2590 900 2530 1210 C2235 1020 1950 945 1630 1060 C1660 735 1775 410 1970 130Z" fill="url(#mountain)"/>
-    <path d="M3160 320 C3650 135 4085 245 4450 780 C4185 1005 4030 1295 3925 1640 C3650 1430 3310 1365 2990 1495 C3030 1070 3080 660 3160 320Z" fill="url(#mountain)"/>
-    <path d="M2320 3190 C2695 2920 3140 2940 3480 3160 C3290 3380 3195 3560 3150 3800 L2210 3800 C2220 3570 2250 3375 2320 3190Z" fill="url(#mountain)"/>
-    <path d="M4200 2580 C4630 2415 5120 2530 5460 2930 C5215 3165 5055 3470 5010 3800 L4230 3800 C4350 3390 4330 2990 4200 2580Z" fill="url(#mountain)"/>
-  </g>
-
-  <g opacity="0.96">
-    <path d="M450 3340 C1020 3190 1390 3230 1900 2980 C2355 2755 2700 2580 3370 2520 C3920 2470 4300 2130 4890 1740 C5090 1605 5280 1580 5430 1650" fill="none" stroke="#5b3f2e" stroke-width="330" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
-    <path d="M455 3315 C1035 3175 1425 3180 1920 2940 C2395 2710 2740 2508 3360 2465 C3890 2428 4265 2100 4855 1700 C5070 1550 5280 1525 5440 1600" fill="none" stroke="url(#road)" stroke-width="220" stroke-linecap="round" stroke-linejoin="round" filter="url(#grain)"/>
-    <path d="M760 3360 C1425 3205 1790 3150 2320 2820 C2740 2558 3065 2450 3475 2450" fill="none" stroke="#f0daa1" stroke-width="34" stroke-linecap="round" stroke-opacity="0.42"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M4560 1250 L5305 1250 L5430 1395 L5430 2190 L4495 2190 L4495 1395Z" fill="#69583f" stroke="#221912" stroke-width="36"/>
-    <path d="M4670 1380 L5245 1380 L5330 1475 L5330 2095 L4590 2095 L4590 1475Z" fill="#997d50" stroke="#2d1d13" stroke-width="24"/>
-    <path d="M4840 1610 L5060 1610 L5060 2095 L4840 2095Z" fill="#251c15"/>
-    <path d="M4520 1235 L4435 1370 L4495 1395 L5430 1395 L5505 1315 L5305 1250Z" fill="#373027"/>
-    <path d="M4715 1175 L4845 1090 L4975 1175 L4975 1300 L4715 1300Z" fill="#454034" stroke="#211912" stroke-width="22"/>
-    <path d="M5100 1195 L5205 1130 L5310 1195 L5310 1300 L5100 1300Z" fill="#454034" stroke="#211912" stroke-width="22"/>
-    <path d="M4470 2205 C4750 2305 5080 2305 5380 2205" fill="none" stroke="#3c2c1c" stroke-width="42" stroke-linecap="round"/>
-  </g>
-
-  <g opacity="0.74">
-    <circle cx="790" cy="1760" r="220" fill="#294f28"/>
-    <circle cx="1110" cy="1540" r="250" fill="#345c31"/>
-    <circle cx="1450" cy="1810" r="275" fill="#2c4f28"/>
-    <circle cx="1920" cy="1320" r="250" fill="#31572e"/>
-    <circle cx="2320" cy="1580" r="285" fill="#294a26"/>
-    <circle cx="2740" cy="2030" r="250" fill="#355f32"/>
-    <circle cx="3460" cy="3060" r="285" fill="#315c31"/>
-    <circle cx="3990" cy="3190" r="330" fill="#294c2a"/>
-    <circle cx="4630" cy="2740" r="300" fill="#31582f"/>
-    <circle cx="5190" cy="3160" r="330" fill="#294b27"/>
-  </g>
-
-  <g opacity="0.95">
-    <g transform="translate(1720 2840)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#746640" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-      <path d="M35 262 C110 294 178 294 250 262" fill="none" stroke="#25301c" stroke-width="20"/>
-    </g>
-    <g transform="translate(3200 2400) scale(0.92)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#716241" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-    </g>
-    <g transform="translate(3890 1800) scale(0.86)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#746340" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-    </g>
-  </g>
-
-  <g opacity="0.24">
-    <path d="M0 3060 C460 2925 780 2910 1180 3020" fill="none" stroke="#ead49c" stroke-width="28"/>
-    <path d="M3520 1550 C3900 1300 4270 1190 4680 1200" fill="none" stroke="#ead49c" stroke-width="24"/>
-    <path d="M1440 2860 C1900 2790 2380 2590 2820 2320" fill="none" stroke="#49321e" stroke-width="18"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-eighth-battle-map.webp b/src/assets/images/battle/twenty-eighth-battle-map.webp
new file mode 100644
index 0000000..da16b85
Binary files /dev/null and b/src/assets/images/battle/twenty-eighth-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-ninth-battle-map.svg b/src/assets/images/battle/twenty-ninth-battle-map.svg
deleted file mode 100644
index 9104673..0000000
--- a/src/assets/images/battle/twenty-ninth-battle-map.svg
+++ /dev/null
@@ -1,121 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="5800" height="4000" viewBox="0 0 5800 4000">
-  <defs>
-    <filter id="grain" x="-5%" y="-5%" width="110%" height="110%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.025" numOctaves="4" seed="29" result="noise"/>
-      <feColorMatrix type="saturate" values="0.48"/>
-      <feBlend in="SourceGraphic" in2="noise" mode="multiply"/>
-    </filter>
-    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="18" stdDeviation="12" flood-color="#1b110a" flood-opacity="0.44"/>
-    </filter>
-    <linearGradient id="plain" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#77714a"/>
-      <stop offset="0.46" stop-color="#a38c5b"/>
-      <stop offset="1" stop-color="#5f6846"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#987041"/>
-      <stop offset="0.5" stop-color="#d4b879"/>
-      <stop offset="1" stop-color="#7d5f3d"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="#233c58"/>
-      <stop offset="0.5" stop-color="#6fa3b7"/>
-      <stop offset="1" stop-color="#1f384f"/>
-    </linearGradient>
-    <linearGradient id="mountain" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#565035"/>
-      <stop offset="0.58" stop-color="#2f3421"/>
-      <stop offset="1" stop-color="#151a12"/>
-    </linearGradient>
-    <pattern id="scrub" width="240" height="190" patternUnits="userSpaceOnUse">
-      <path d="M-60 155 C25 110 84 90 160 38 M34 205 C104 150 165 128 260 76" fill="none" stroke="#e0c58a" stroke-width="12" stroke-opacity="0.16"/>
-      <circle cx="48" cy="60" r="8" fill="#3c5c31" opacity="0.2"/>
-      <circle cx="164" cy="126" r="7" fill="#38572f" opacity="0.18"/>
-    </pattern>
-  </defs>
-
-  <rect width="5800" height="4000" fill="url(#plain)"/>
-  <rect width="5800" height="4000" fill="url(#scrub)" opacity="0.78" filter="url(#grain)"/>
-
-  <g opacity="0.5">
-    <path d="M0 0 L940 0 C730 390 650 830 760 1320 C885 1885 800 2435 590 3090 C470 3460 480 3740 620 4000 L0 4000Z" fill="#111811"/>
-    <path d="M5800 0 L5140 0 C4890 390 4910 790 5200 1100 C5530 1455 5665 1895 5500 2380 C5355 2800 5410 3375 5660 4000 L5800 4000Z" fill="#111811"/>
-    <path d="M4550 0 C4460 320 4570 620 4840 900 L4965 0Z" fill="#111811"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M1210 0 C1180 390 1240 835 1300 1210 C1370 1710 1320 2290 1205 2940" fill="none" stroke="#1b3147" stroke-width="260" stroke-linecap="round"/>
-    <path d="M1240 0 C1210 392 1270 842 1330 1215 C1390 1710 1345 2282 1230 2930" fill="none" stroke="url(#river)" stroke-width="194" stroke-linecap="round"/>
-    <path d="M1305 90 C1286 505 1365 850 1405 1210 C1458 1650 1415 2170 1320 2660" fill="none" stroke="#a6d4df" stroke-width="22" stroke-linecap="round" opacity="0.5"/>
-
-    <path d="M3130 270 C3245 900 3175 1520 3135 2500" fill="none" stroke="#1b3147" stroke-width="250" stroke-linecap="round"/>
-    <path d="M3160 275 C3265 895 3200 1525 3170 2490" fill="none" stroke="url(#river)" stroke-width="184" stroke-linecap="round"/>
-    <path d="M3226 390 C3285 980 3235 1520 3205 2280" fill="none" stroke="#a6d4df" stroke-width="20" stroke-linecap="round" opacity="0.5"/>
-
-    <path d="M3960 3030 C3935 3370 3990 3680 4000 4000" fill="none" stroke="#1b3147" stroke-width="235" stroke-linecap="round"/>
-    <path d="M3990 3045 C3970 3380 4020 3688 4025 4000" fill="none" stroke="url(#river)" stroke-width="172" stroke-linecap="round"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M360 780 C720 310 1150 120 1600 70 C1870 40 2090 45 2340 125 C1995 500 1730 850 1510 1280 C1220 1120 910 1115 670 1230 C505 1308 390 1135 360 780Z" fill="url(#mountain)"/>
-    <path d="M2040 120 C2420 -20 2750 70 3040 392 C2840 690 2700 975 2640 1300 C2310 1080 1995 1000 1665 1120 C1690 760 1810 400 2040 120Z" fill="url(#mountain)"/>
-    <path d="M3290 280 C3800 105 4260 270 4635 835 C4350 1065 4175 1385 4070 1750 C3770 1510 3415 1425 3085 1585 C3115 1135 3195 660 3290 280Z" fill="url(#mountain)"/>
-    <path d="M2380 3330 C2750 3040 3220 3050 3605 3295 C3388 3500 3285 3725 3240 4000 L2245 4000 C2260 3740 2300 3510 2380 3330Z" fill="url(#mountain)"/>
-    <path d="M4240 2720 C4730 2510 5240 2645 5580 3040 C5310 3295 5155 3620 5100 4000 L4250 4000 C4400 3560 4385 3135 4240 2720Z" fill="url(#mountain)"/>
-  </g>
-
-  <g opacity="0.98">
-    <path d="M460 3560 C1060 3350 1540 3320 2040 3020 C2520 2730 2910 2560 3550 2500 C4090 2450 4470 2090 5065 1760 C5280 1640 5500 1625 5650 1715" fill="none" stroke="#553924" stroke-width="350" stroke-linecap="round" stroke-linejoin="round" opacity="0.4"/>
-    <path d="M470 3530 C1075 3330 1565 3280 2050 2975 C2545 2670 2945 2495 3540 2445 C4050 2400 4430 2052 5030 1715 C5262 1580 5500 1565 5660 1660" fill="none" stroke="url(#road)" stroke-width="226" stroke-linecap="round" stroke-linejoin="round" filter="url(#grain)"/>
-    <path d="M820 3570 C1480 3365 1910 3265 2450 2910 C2850 2645 3190 2538 3610 2535" fill="none" stroke="#f0dba2" stroke-width="34" stroke-linecap="round" stroke-opacity="0.42"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M4630 1190 L5480 1190 L5610 1345 L5610 2380 L4550 2380 L4550 1345Z" fill="#6c5940" stroke="#221812" stroke-width="38"/>
-    <path d="M4755 1340 L5400 1340 L5500 1450 L5500 2250 L4665 2250 L4665 1450Z" fill="#9b7c4d" stroke="#2c1c13" stroke-width="25"/>
-    <path d="M4935 1680 L5175 1680 L5175 2250 L4935 2250Z" fill="#241b14"/>
-    <path d="M4570 1175 L4475 1320 L4550 1345 L5610 1345 L5685 1260 L5480 1190Z" fill="#373027"/>
-    <path d="M4790 1110 L4935 1020 L5080 1110 L5080 1265 L4790 1265Z" fill="#454034" stroke="#211912" stroke-width="22"/>
-    <path d="M5200 1125 L5320 1055 L5440 1125 L5440 1265 L5200 1265Z" fill="#454034" stroke="#211912" stroke-width="22"/>
-    <path d="M4550 2395 C4870 2510 5230 2510 5580 2395" fill="none" stroke="#3c2c1c" stroke-width="44" stroke-linecap="round"/>
-  </g>
-
-  <g opacity="0.74">
-    <circle cx="790" cy="1780" r="245" fill="#2c532a"/>
-    <circle cx="1135" cy="1535" r="265" fill="#345e32"/>
-    <circle cx="1480" cy="1890" r="292" fill="#2b4f28"/>
-    <circle cx="1970" cy="1430" r="272" fill="#31572e"/>
-    <circle cx="2350" cy="1710" r="300" fill="#294a26"/>
-    <circle cx="2820" cy="2190" r="268" fill="#355f32"/>
-    <circle cx="3500" cy="3260" r="308" fill="#315c31"/>
-    <circle cx="4040" cy="3370" r="350" fill="#294c2a"/>
-    <circle cx="4750" cy="2920" r="330" fill="#31582f"/>
-    <circle cx="5350" cy="3330" r="360" fill="#294b27"/>
-  </g>
-
-  <g opacity="0.96">
-    <g transform="translate(1830 3070)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#746640" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-      <path d="M35 262 C110 294 178 294 250 262" fill="none" stroke="#25301c" stroke-width="20"/>
-    </g>
-    <g transform="translate(3335 2520) scale(0.92)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#716241" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-    </g>
-    <g transform="translate(4070 1920) scale(0.88)">
-      <path d="M0 88 L138 0 L276 88 L250 255 L28 255Z" fill="#746340" stroke="#2b2015" stroke-width="18"/>
-      <path d="M42 95 L138 35 L234 95 L214 136 L138 88 L62 136Z" fill="#ce8428"/>
-      <rect x="98" y="136" width="82" height="116" fill="#2d2116"/>
-    </g>
-  </g>
-
-  <g opacity="0.25">
-    <path d="M0 3260 C500 3090 850 3100 1250 3210" fill="none" stroke="#ead49c" stroke-width="28"/>
-    <path d="M3600 1570 C4050 1320 4450 1210 4900 1220" fill="none" stroke="#ead49c" stroke-width="24"/>
-    <path d="M1500 3050 C1950 2940 2420 2720 2880 2410" fill="none" stroke="#49321e" stroke-width="18"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-ninth-battle-map.webp b/src/assets/images/battle/twenty-ninth-battle-map.webp
new file mode 100644
index 0000000..c86768a
Binary files /dev/null and b/src/assets/images/battle/twenty-ninth-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-seventh-battle-map.svg b/src/assets/images/battle/twenty-seventh-battle-map.svg
deleted file mode 100644
index d936170..0000000
--- a/src/assets/images/battle/twenty-seventh-battle-map.svg
+++ /dev/null
@@ -1,120 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="5400" height="3600" viewBox="0 0 5400 3600">
-  <defs>
-    <filter id="grain" x="-5%" y="-5%" width="110%" height="110%">
-      <feTurbulence type="fractalNoise" baseFrequency="0.032" numOctaves="4" seed="27" result="noise"/>
-      <feColorMatrix type="saturate" values="0.42"/>
-      <feBlend in="SourceGraphic" in2="noise" mode="multiply"/>
-    </filter>
-    <filter id="ink" x="-10%" y="-10%" width="120%" height="120%">
-      <feDropShadow dx="0" dy="14" stdDeviation="9" flood-color="#21150d" flood-opacity="0.38"/>
-    </filter>
-    <linearGradient id="plain" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#877f55"/>
-      <stop offset="0.48" stop-color="#a49060"/>
-      <stop offset="1" stop-color="#6d704e"/>
-    </linearGradient>
-    <linearGradient id="road" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#b79b68"/>
-      <stop offset="0.52" stop-color="#d3ba81"/>
-      <stop offset="1" stop-color="#92784e"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="#355a78"/>
-      <stop offset="0.48" stop-color="#5f8faa"/>
-      <stop offset="1" stop-color="#2d4b67"/>
-    </linearGradient>
-    <linearGradient id="mountain" x1="0" y1="0" x2="0" y2="1">
-      <stop offset="0" stop-color="#4a4a2e"/>
-      <stop offset="0.55" stop-color="#2e321f"/>
-      <stop offset="1" stop-color="#171b14"/>
-    </linearGradient>
-    <pattern id="fieldHatch" width="180" height="180" patternUnits="userSpaceOnUse">
-      <path d="M-40 135 C30 92 78 88 150 40 M0 190 C70 148 126 138 205 82" fill="none" stroke="#cbb077" stroke-width="10" stroke-opacity="0.18"/>
-      <circle cx="38" cy="54" r="7" fill="#4c6438" opacity="0.2"/>
-      <circle cx="126" cy="122" r="6" fill="#4c6438" opacity="0.16"/>
-    </pattern>
-  </defs>
-
-  <rect width="5400" height="3600" fill="url(#plain)"/>
-  <rect width="5400" height="3600" fill="url(#fieldHatch)" opacity="0.8" filter="url(#grain)"/>
-
-  <g opacity="0.42">
-    <path d="M70 1380 C510 980 720 440 1110 80 L1180 0 L0 0 L0 2920 C88 2500 160 1970 70 1380Z" fill="#111814"/>
-    <path d="M5220 2080 C4970 2480 4860 3090 5180 3600 L5400 3600 L5400 0 L4720 0 C4480 360 4540 780 4870 1040 C5150 1260 5380 1640 5220 2080Z" fill="#121812"/>
-    <path d="M4260 0 C4210 290 4380 535 4620 790 L4695 0Z" fill="#111814"/>
-  </g>
-
-  <g filter="url(#ink)">
-    <path d="M1205 0 C1170 310 1215 690 1280 1040 C1355 1440 1280 1985 1190 2520" fill="none" stroke="#22384e" stroke-width="240" stroke-linecap="round"/>
-    <path d="M1225 0 C1198 315 1248 705 1308 1040 C1388 1455 1304 1988 1215 2515" fill="none" stroke="url(#river)" stroke-width="185" stroke-linecap="round"/>
-    <path d="M1288 80 C1274 420 1342 786 1395 1090 C1458 1452 1388 1890 1325 2310" fill="none" stroke="#91c5d7" stroke-width="22" stroke-linecap="round" opacity="0.52"/>
-
-    <path d="M2920 420 C2985 880 2980 1330 2920 2080" fill="none" stroke="#22384e" stroke-width="220" stroke-linecap="round"/>
-    <path d="M2948 430 C3008 885 3000 1330 2955 2070" fill="none" stroke="url(#river)" stroke-width="165" stroke-linecap="round"/>
-    <path d="M3006 500 C3042 900 3036 1290 3000 1905" fill="none" stroke="#9ccfe0" stroke-width="19" stroke-linecap="round" opacity="0.48"/>
-
-    <path d="M3650 2520 C3640 2860 3675 3240 3665 3600" fill="none" stroke="#22384e" stroke-width="220" stroke-linecap="round"/>
-    <path d="M3675 2530 C3668 2865 3700 3245 3692 3600" fill="none" stroke="url(#river)" stroke-width="160" stroke-linecap="round"/>
-  </g>
-
-  <g opacity="0.95">
-    <path d="M450 3140 C980 3020 1325 3040 1795 2860 C2260 2685 2550 2505 3210 2460 C3710 2425 4185 2105 4710 1640 C4910 1465 5055 1445 5200 1510" fill="none" stroke="#604633" stroke-width="310" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
-    <path d="M455 3120 C1015 3008 1360 3012 1815 2825 C2300 2626 2585 2440 3190 2405 C3684 2378 4140 2070 4668 1596 C4880 1405 5055 1380 5215 1458" fill="none" stroke="url(#road)" stroke-width="210" stroke-linecap="round" stroke-linejoin="round" filter="url(#grain)"/>
-    <path d="M700 3160 C1340 3020 1710 2990 2240 2660 C2650 2405 2955 2298 3348 2300" fill="none" stroke="#ecd59d" stroke-width="32" stroke-linecap="round" stroke-opacity="0.42"/>
-  </g>
-
-  <g filter="url(#ink)">
-    <path d="M380 720 C680 370 1010 240 1370 140 C1590 82 1765 38 2060 52 C1740 390 1480 690 1290 1120 C1055 1040 835 1000 620 1095 C495 1150 410 1060 380 720Z" fill="url(#mountain)"/>
-    <path d="M1980 120 C2290 0 2590 80 2850 360 C2670 610 2540 825 2480 1110 C2200 960 1925 885 1635 980 C1668 690 1780 390 1980 120Z" fill="url(#mountain)"/>
-    <path d="M3130 420 C3600 170 4020 255 4350 760 C4110 980 3970 1250 3870 1540 C3615 1360 3315 1310 2990 1420 C3028 1020 3085 675 3130 420Z" fill="url(#mountain)"/>
-    <path d="M2300 3060 C2630 2840 3080 2840 3400 3040 C3240 3230 3150 3410 3090 3600 L2220 3600 C2215 3445 2240 3260 2300 3060Z" fill="url(#mountain)"/>
-    <path d="M4150 2470 C4560 2320 4985 2400 5330 2790 C5090 3020 4945 3290 4890 3600 L4190 3600 C4300 3250 4275 2860 4150 2470Z" fill="url(#mountain)"/>
-  </g>
-
-  <g opacity="0.94">
-    <g transform="translate(1750 2680)">
-      <path d="M0 85 L130 0 L260 85 L238 245 L26 245Z" fill="#736640" stroke="#2c2116" stroke-width="18"/>
-      <path d="M40 92 L130 32 L220 92 L205 128 L130 84 L55 128Z" fill="#d18a29"/>
-      <rect x="92" y="130" width="76" height="112" fill="#2f2116"/>
-      <path d="M30 250 C100 285 170 285 240 250" fill="none" stroke="#26321c" stroke-width="20"/>
-    </g>
-    <g transform="translate(3180 2200) scale(0.92)">
-      <path d="M0 85 L130 0 L260 85 L238 245 L26 245Z" fill="#716241" stroke="#2c2116" stroke-width="18"/>
-      <path d="M40 92 L130 32 L220 92 L205 128 L130 84 L55 128Z" fill="#d18a29"/>
-      <rect x="92" y="130" width="76" height="112" fill="#2f2116"/>
-    </g>
-    <g transform="translate(3820 1600) scale(0.86)">
-      <path d="M0 85 L130 0 L260 85 L238 245 L26 245Z" fill="#746340" stroke="#2c2116" stroke-width="18"/>
-      <path d="M40 92 L130 32 L220 92 L205 128 L130 84 L55 128Z" fill="#d18a29"/>
-      <rect x="92" y="130" width="76" height="112" fill="#2f2116"/>
-    </g>
-  </g>
-
-  <g filter="url(#ink)">
-    <path d="M4470 1200 L5140 1200 L5260 1325 L5260 2015 L4420 2015 L4420 1325Z" fill="#6e5e43" stroke="#241b14" stroke-width="32"/>
-    <path d="M4580 1320 L5085 1320 L5170 1400 L5170 1930 L4510 1930 L4510 1400Z" fill="#9a8155" stroke="#302014" stroke-width="22"/>
-    <path d="M4740 1535 L4930 1535 L4930 1930 L4740 1930Z" fill="#292017"/>
-    <path d="M4460 1185 L4380 1295 L4420 1325 L5260 1325 L5330 1250 L5140 1200Z" fill="#3a3429"/>
-    <path d="M4650 1120 L4770 1050 L4890 1120 L4890 1235 L4650 1235Z" fill="#4c4638" stroke="#241b14" stroke-width="20"/>
-    <path d="M4970 1135 L5070 1080 L5170 1135 L5170 1235 L4970 1235Z" fill="#4c4638" stroke="#241b14" stroke-width="20"/>
-  </g>
-
-  <g opacity="0.75">
-    <circle cx="820" cy="1690" r="190" fill="#2e5129"/>
-    <circle cx="1050" cy="1505" r="230" fill="#274b26"/>
-    <circle cx="1370" cy="1710" r="260" fill="#355d31"/>
-    <circle cx="1890" cy="1280" r="230" fill="#31562e"/>
-    <circle cx="2220" cy="1500" r="260" fill="#294b27"/>
-    <circle cx="2670" cy="1900" r="220" fill="#30582f"/>
-    <circle cx="3370" cy="2950" r="260" fill="#315c31"/>
-    <circle cx="3920" cy="3040" r="300" fill="#294c2b"/>
-    <circle cx="4520" cy="2620" r="270" fill="#31582f"/>
-    <circle cx="5000" cy="3010" r="300" fill="#294b27"/>
-  </g>
-
-  <g opacity="0.22">
-    <path d="M0 2900 C420 2810 760 2780 1160 2880" fill="none" stroke="#e8d19a" stroke-width="28"/>
-    <path d="M3550 1450 C3920 1230 4260 1100 4620 1120" fill="none" stroke="#e8d19a" stroke-width="24"/>
-    <path d="M1450 2680 C1910 2600 2350 2440 2770 2180" fill="none" stroke="#4a341f" stroke-width="18"/>
-  </g>
-</svg>
diff --git a/src/assets/images/battle/twenty-seventh-battle-map.webp b/src/assets/images/battle/twenty-seventh-battle-map.webp
new file mode 100644
index 0000000..c039f29
Binary files /dev/null and b/src/assets/images/battle/twenty-seventh-battle-map.webp differ
diff --git a/src/assets/images/battle/twenty-sixth-battle-map.svg b/src/assets/images/battle/twenty-sixth-battle-map.svg
deleted file mode 100644
index 512fc56..0000000
--- a/src/assets/images/battle/twenty-sixth-battle-map.svg
+++ /dev/null
@@ -1,74 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5200 3400" role="img" aria-label="Changsha veteran audience tactical battlefield">
-  <defs>
-    <linearGradient id="field" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#8d7a45"/>
-      <stop offset="0.42" stop-color="#aa955c"/>
-      <stop offset="1" stop-color="#736c43"/>
-    </linearGradient>
-    <linearGradient id="wall" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#8e7b55"/>
-      <stop offset="1" stop-color="#3d3829"/>
-    </linearGradient>
-    <linearGradient id="river" x1="0" y1="0" x2="1" y2="1">
-      <stop offset="0" stop-color="#9bd7e0"/>
-      <stop offset="0.55" stop-color="#407f8e"/>
-      <stop offset="1" stop-color="#1f4658"/>
-    </linearGradient>
-    <pattern id="dust" width="96" height="96" patternUnits="userSpaceOnUse">
-      <path d="M12 22h22M58 31h26M28 68h36M8 84h18" stroke="#40331f" stroke-width="5" opacity=".18"/>
-      <path d="M74 11h14M44 43h16M78 75h10" stroke="#dec582" stroke-width="4" opacity=".22"/>
-    </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="shadow" x="-20%" y="-20%" width="140%" height="140%">
-      <feDropShadow dx="18" dy="26" stdDeviation="13" flood-color="#12100b" flood-opacity=".34"/>
-    </filter>
-  </defs>
-
-  <rect width="5200" height="3400" fill="url(#field)"/>
-  <rect width="5200" height="3400" fill="url(#dust)" opacity=".86"/>
-
-  <path d="M0 0 C360 210 520 470 470 820 C420 1180 220 1510 280 1940 C330 2320 190 2790 0 3190 Z" fill="#34422d" opacity=".78"/>
-  <path d="M2020 80 C2450 -20 2960 80 3240 370 C3040 720 2720 900 2280 880 C1940 860 1730 620 1710 340 C1710 210 1830 120 2020 80 Z" fill="#415033" opacity=".76"/>
-  <path d="M3560 2380 C4020 2250 4660 2320 5200 2690 L5200 3400 L3600 3400 C3440 3040 3380 2600 3560 2380 Z" fill="#38472e" opacity=".78"/>
-
-  <path d="M1120 -60 C1260 420 1160 820 1080 1230 C1000 1640 1100 1940 1240 2360" fill="none" stroke="url(#river)" stroke-width="130" opacity=".9"/>
-  <path d="M3360 3400 C3330 3100 3410 2880 3560 2660 C3700 2440 3760 2220 3700 2000" fill="none" stroke="url(#river)" stroke-width="118" opacity=".88"/>
-  <path d="M1120 -60 C1260 420 1160 820 1080 1230 C1000 1640 1100 1940 1240 2360" fill="none" stroke="#d9f1ef" stroke-width="18" opacity=".35"/>
-
-  <path d="M260 2840 C820 2800 1280 2740 1710 2520 C2130 2300 2490 2420 2910 2290 C3330 2160 3520 1870 3860 1720 C4170 1580 4490 1600 4890 1510" fill="none" stroke="#b28b4a" stroke-width="150" opacity=".78" stroke-linecap="round" filter="url(#shadow)"/>
-  <path d="M260 2840 C820 2800 1280 2740 1710 2520 C2130 2300 2490 2420 2910 2290 C3330 2160 3520 1870 3860 1720 C4170 1580 4490 1600 4890 1510" fill="none" stroke="#dbc27a" stroke-width="56" opacity=".48" stroke-linecap="round"/>
-  <path d="M1540 2300 C1850 2050 2040 1780 2210 1430 C2390 1070 2680 750 3030 520" fill="none" stroke="#a68043" stroke-width="92" opacity=".48" stroke-linecap="round"/>
-
-  <g opacity=".92">
-    <ellipse cx="1620" cy="2240" rx="190" ry="112" fill="#6f7e3a"/>
-    <rect x="1545" y="2165" width="126" height="104" fill="#8d5d2d"/>
-    <path d="M1522 2165 L1608 2092 L1698 2165 Z" fill="#d99235"/>
-    <rect x="1742" y="2190" width="98" height="82" fill="#8b6130"/>
-    <path d="M1728 2190 L1792 2132 L1858 2190 Z" fill="#e1a249"/>
-  </g>
-  <g opacity=".9">
-    <ellipse cx="3060" cy="2050" rx="180" ry="106" fill="#738441"/>
-    <rect x="2990" y="1978" width="120" height="96" fill="#865a2c"/>
-    <path d="M2968 1978 L3050 1908 L3132 1978 Z" fill="#d99634"/>
-  </g>
-
-  <g filter="url(#shadow)">
-    <path d="M4060 910 L4950 960 L5010 1960 L4040 2030 Z" fill="url(#wall)" opacity=".96"/>
-    <path d="M4200 1080 L4760 1115 L4810 1780 L4200 1830 Z" fill="#7b623b"/>
-    <path d="M4210 1080 L4480 875 L4770 1115 Z" fill="#b97935"/>
-    <rect x="4290" y="1220" width="96" height="270" fill="#28281f"/>
-    <rect x="4580" y="1230" width="92" height="260" fill="#28281f"/>
-    <path d="M3960 1430 C4180 1370 4410 1400 4620 1490 C4750 1545 4900 1565 5060 1520" fill="none" stroke="#c9ad68" stroke-width="36" opacity=".7"/>
-  </g>
-
-  <g fill="#2f4b2a" opacity=".78">
-    <circle cx="530" cy="610" r="88"/><circle cx="740" cy="940" r="76"/><circle cx="540" cy="1450" r="92"/>
-    <circle cx="1940" cy="940" r="82"/><circle cx="2260" cy="1160" r="90"/><circle cx="2760" cy="1420" r="84"/>
-    <circle cx="3920" cy="2640" r="106"/><circle cx="4380" cy="2860" r="96"/><circle cx="4780" cy="3080" r="84"/>
-  </g>
-
-  <rect width="5200" height="3400" fill="url(#grid)"/>
-  <rect x="18" y="18" width="5164" height="3364" fill="none" stroke="#2b2012" stroke-width="18" opacity=".58"/>
-</svg>
diff --git a/src/assets/images/battle/twenty-sixth-battle-map.webp b/src/assets/images/battle/twenty-sixth-battle-map.webp
new file mode 100644
index 0000000..c908037
Binary files /dev/null and b/src/assets/images/battle/twenty-sixth-battle-map.webp differ
diff --git a/src/game/data/battleMapAssets.ts b/src/game/data/battleMapAssets.ts
index 996ec42..b33a0e3 100644
--- a/src/game/data/battleMapAssets.ts
+++ b/src/game/data/battleMapAssets.ts
@@ -42,7 +42,7 @@ import sixteenthBattleMapUrl from '../../assets/images/battle/sixteenth-battle-m
 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';
-import thirtiethBattleMapUrl from '../../assets/images/battle/thirtieth-battle-map.svg';
+import thirtiethBattleMapUrl from '../../assets/images/battle/thirtieth-battle-map.webp';
 import thirtyEighthBattleMapUrl from '../../assets/images/battle/thirty-eighth-battle-map.svg';
 import thirtyFifthBattleMapUrl from '../../assets/images/battle/thirty-fifth-battle-map.svg';
 import thirtyFirstBattleMapUrl from '../../assets/images/battle/thirty-first-battle-map.svg';
@@ -54,14 +54,14 @@ import thirtySixthBattleMapUrl from '../../assets/images/battle/thirty-sixth-bat
 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.webp';
-import twentyEighthBattleMapUrl from '../../assets/images/battle/twenty-eighth-battle-map.svg';
+import twentyEighthBattleMapUrl from '../../assets/images/battle/twenty-eighth-battle-map.webp';
 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 twentyNinthBattleMapUrl from '../../assets/images/battle/twenty-ninth-battle-map.webp';
 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 twentySeventhBattleMapUrl from '../../assets/images/battle/twenty-seventh-battle-map.webp';
+import twentySixthBattleMapUrl from '../../assets/images/battle/twenty-sixth-battle-map.webp';
 import twentyThirdBattleMapUrl from '../../assets/images/battle/twenty-third-battle-map.webp';
 import twelfthBattleMapUrl from '../../assets/images/battle/twelfth-battle-map.webp';