Fix: Correct percentage (%) placement in Persian UI (RTL handling) (#2501)

## Description:

Fixes incorrect RTL rendering where the percentage symbol (%) appeared
before the label in Persian (fa-IR).
The UI now correctly displays values as `20%`.

**Changes:**
- Updated `controlpanel.ts` to fix percentage position.
- 16 additions, 7 deletions.

**Testing:**
1. Switch UI language to Persian (fa-IR).
2. Open control panel with percentage display.
3. Confirm `%` appears after numeric value.
4. Verified no changes in LTR languages.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

nobodyiran

src/client/graphics/layers/ControlPanel.ts

@@ -190,13 +190,22 @@ export class ControlPanel extends LitElement implements Layer {
         </div>
 
         <div class="relative mb-0 sm:mb-4">
-          <label class="block text-white mb-1" translate="no"
-            >${translateText("control_panel.attack_ratio")}:
-            ${(this.attackRatio * 100).toFixed(0)}%
-            (${renderTroops(
-              (this.game?.myPlayer()?.troops() ?? 0) * this.attackRatio,
-            )})</label
-          >
+          <label class="block text-white mb-1">
+            ${translateText("control_panel.attack_ratio")}:
+            <span
+              class="inline-flex items-center gap-1"
+              dir="ltr"
+              style="unicode-bidi: isolate;"
+              translate="no"
+            >
+              <span>${(this.attackRatio * 100).toFixed(0)}%</span>
+              <span>
+                (${renderTroops(
+                  (this.game?.myPlayer()?.troops() ?? 0) * this.attackRatio,
+                )})
+              </span>
+            </span>
+          </label>
           <div class="relative h-8">
             <!-- Background track -->
             <div