feat(rithmomachia): add visual board examples to Harmony section

- Added 3 cropped board examples showing each progression type
- Arithmetic: 6, 9, 12 in a row (9 = (6+12)/2)
- Geometric: 4, 8, 16 in a row (8² = 4×16)
- Harmonic: 6, 8, 12 in a row (2×6×12 = 8×(6+12))

- All examples show White pieces in enemy territory (rows 5-8)
- Pieces arranged in horizontal rows to demonstrate line requirement
- Added captions for each progression type
- Updated English and German translations with caption keys

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/arcade-games/rithmomachia/components/PlayingGuideModal.tsx

@@ -1208,6 +1208,26 @@ function CaptureSection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: bo
 
 function HarmonySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: boolean }) {
   const { t } = useTranslation()
+
+  // Example board positions for harmonies (White pieces in Black's territory: rows 5-8)
+  const arithmeticExample: ExamplePiece[] = [
+    { square: 'E6', type: 'C', color: 'W', value: 6 }, // White's 6
+    { square: 'F6', type: 'C', color: 'W', value: 9 }, // White's 9 (middle)
+    { square: 'G6', type: 'T', color: 'W', value: 12 }, // White's 12 (arithmetic: 9 = (6+12)/2)
+  ]
+
+  const geometricExample: ExamplePiece[] = [
+    { square: 'E6', type: 'C', color: 'W', value: 4 }, // White's 4
+    { square: 'F6', type: 'C', color: 'W', value: 8 }, // White's 8 (middle)
+    { square: 'G6', type: 'T', color: 'W', value: 16 }, // White's 16 (geometric: 8² = 4×16 = 64)
+  ]
+
+  const harmonicExample: ExamplePiece[] = [
+    { square: 'E6', type: 'C', color: 'W', value: 6 }, // White's 6
+    { square: 'F6', type: 'C', color: 'W', value: 8 }, // White's 8 (middle)
+    { square: 'G6', type: 'T', color: 'W', value: 12 }, // White's 12 (harmonic: 2×6×12 = 144 = 8×18)
+  ]
+
   return (
     <div data-section="harmony">
       <h3
@@ -1228,6 +1248,7 @@ function HarmonySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: bo
       </p>
 
       <div className={css({ display: 'flex', flexDirection: 'column', gap: '20px' })}>
+        {/* Arithmetic Progression */}
         <div
           className={css({
             p: '16px',
@@ -1244,11 +1265,42 @@ function HarmonySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: bo
           <p className={css({ fontSize: '14px', color: '#166534', mb: '8px' })}>
             {t('guide.harmony.arithmeticDesc', 'Middle value is the average')}
           </p>
-          <p className={css({ fontSize: '13px', color: '#16a34a', fontFamily: 'monospace' })}>
+          <p
+            className={css({
+              fontSize: '13px',
+              color: '#16a34a',
+              fontFamily: 'monospace',
+              mb: '12px',
+            })}
+          >
             {t('guide.harmony.arithmeticExample', 'Example: 6, 9, 12 (because 9 = (6+12)/2)')}
           </p>
+          <div className={css({ display: 'flex', justifyContent: 'center' })}>
+            <RithmomachiaBoard
+              pieces={arithmeticExample}
+              scale={0.4}
+              cropToSquares={['D5', 'H7']}
+              showLabels={true}
+              useNativeAbacusNumbers={useNativeAbacusNumbers}
+            />
+          </div>
+          <p
+            className={css({
+              fontSize: '12px',
+              color: '#166534',
+              mt: '8px',
+              textAlign: 'center',
+              fontStyle: 'italic',
+            })}
+          >
+            {t(
+              'guide.harmony.arithmeticCaption',
+              'White pieces 6, 9, 12 in a row in enemy territory form an arithmetic progression'
+            )}
+          </p>
         </div>
 
+        {/* Geometric Progression */}
         <div
           className={css({
             p: '16px',
@@ -1265,11 +1317,42 @@ function HarmonySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: bo
           <p className={css({ fontSize: '14px', color: '#78350f', mb: '8px' })}>
             {t('guide.harmony.geometricDesc', 'Middle value is geometric mean')}
           </p>
-          <p className={css({ fontSize: '13px', color: '#a16207', fontFamily: 'monospace' })}>
+          <p
+            className={css({
+              fontSize: '13px',
+              color: '#a16207',
+              fontFamily: 'monospace',
+              mb: '12px',
+            })}
+          >
             {t('guide.harmony.geometricExample', 'Example: 4, 8, 16 (because 8² = 4×16)')}
           </p>
+          <div className={css({ display: 'flex', justifyContent: 'center' })}>
+            <RithmomachiaBoard
+              pieces={geometricExample}
+              scale={0.4}
+              cropToSquares={['D5', 'H7']}
+              showLabels={true}
+              useNativeAbacusNumbers={useNativeAbacusNumbers}
+            />
+          </div>
+          <p
+            className={css({
+              fontSize: '12px',
+              color: '#78350f',
+              mt: '8px',
+              textAlign: 'center',
+              fontStyle: 'italic',
+            })}
+          >
+            {t(
+              'guide.harmony.geometricCaption',
+              'White pieces 4, 8, 16 in a row in enemy territory form a geometric progression'
+            )}
+          </p>
         </div>
 
+        {/* Harmonic Progression */}
         <div
           className={css({
             p: '16px',
@@ -1286,9 +1369,39 @@ function HarmonySection({ useNativeAbacusNumbers }: { useNativeAbacusNumbers: bo
           <p className={css({ fontSize: '14px', color: '#1e3a8a', mb: '8px' })}>
             {t('guide.harmony.harmonicDesc', 'Special proportion (formula: 2AB = M(A+B))')}
           </p>
-          <p className={css({ fontSize: '13px', color: '#2563eb', fontFamily: 'monospace' })}>
+          <p
+            className={css({
+              fontSize: '13px',
+              color: '#2563eb',
+              fontFamily: 'monospace',
+              mb: '12px',
+            })}
+          >
             {t('guide.harmony.harmonicExample', 'Example: 6, 8, 12 (because 2×6×12 = 8×(6+12))')}
           </p>
+          <div className={css({ display: 'flex', justifyContent: 'center' })}>
+            <RithmomachiaBoard
+              pieces={harmonicExample}
+              scale={0.4}
+              cropToSquares={['D5', 'H7']}
+              showLabels={true}
+              useNativeAbacusNumbers={useNativeAbacusNumbers}
+            />
+          </div>
+          <p
+            className={css({
+              fontSize: '12px',
+              color: '#1e3a8a',
+              mt: '8px',
+              textAlign: 'center',
+              fontStyle: 'italic',
+            })}
+          >
+            {t(
+              'guide.harmony.harmonicCaption',
+              'White pieces 6, 8, 12 in a row in enemy territory form a harmonic progression'
+            )}
+          </p>
         </div>
       </div>
 

apps/web/src/arcade-games/rithmomachia/i18n/locales/de.json

@@ -81,12 +81,15 @@
       "arithmetic": "Arithmetische Progression",
       "arithmeticDesc": "Mittlerer Wert ist der Durchschnitt",
       "arithmeticExample": "Beispiel: 6, 9, 12 (weil 9 = (6+12)/2)",
+      "arithmeticCaption": "Weiße Steine 6, 9, 12 in einer Reihe im gegnerischen Gebiet bilden eine arithmetische Progression",
       "geometric": "Geometrische Progression",
       "geometricDesc": "Mittlerer Wert ist das geometrische Mittel",
       "geometricExample": "Beispiel: 4, 8, 16 (weil 8² = 4×16)",
+      "geometricCaption": "Weiße Steine 4, 8, 16 in einer Reihe im gegnerischen Gebiet bilden eine geometrische Progression",
       "harmonic": "Harmonische Progression",
       "harmonicDesc": "Spezielle Proportion (Formel: 2AB = M(A+B))",
       "harmonicExample": "Beispiel: 6, 8, 12 (weil 2×6×12 = 8×(6+12))",
+      "harmonicCaption": "Weiße Steine 6, 8, 12 in einer Reihe im gegnerischen Gebiet bilden eine harmonische Progression",
       "rulesTitle": "⚠️ Wichtige Regeln",
       "rule1": "Ihre 3 Steine müssen in einer geraden Linie stehen (Reihe, Spalte oder Diagonale)",
       "rule2": "Alle 3 müssen im gegnerischen Gebiet sein",

apps/web/src/arcade-games/rithmomachia/i18n/locales/en.json

@@ -188,12 +188,15 @@
       "arithmetic": "Arithmetic Progression",
       "arithmeticDesc": "Middle value is the average",
       "arithmeticExample": "Example: 6, 9, 12 (because 9 = (6+12)/2)",
+      "arithmeticCaption": "White pieces 6, 9, 12 in a row in enemy territory form an arithmetic progression",
       "geometric": "Geometric Progression",
       "geometricDesc": "Middle value is geometric mean",
       "geometricExample": "Example: 4, 8, 16 (because 8² = 4×16)",
+      "geometricCaption": "White pieces 4, 8, 16 in a row in enemy territory form a geometric progression",
       "harmonic": "Harmonic Progression",
       "harmonicDesc": "Special proportion (formula: 2AB = M(A+B))",
       "harmonicExample": "Example: 6, 8, 12 (because 2×6×12 = 8×(6+12))",
+      "harmonicCaption": "White pieces 6, 8, 12 in a row in enemy territory form a harmonic progression",
       "rulesTitle": "⚠️ Important Rules",
       "rule1": "Your 3 pieces must be in a straight line (row, column, or diagonal)",
       "rule2": "All 3 must be in enemy territory",