Add image preview under selected word in Match exercise

When user clicks an EN word, the corresponding image (Wikipedia
photo or emoji) appears below the match grid. Emoji shown as
large text (6xl), Wikipedia photos as max-h 160px image.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

studio-v2/app/learn/[unitId]/match/page.tsx

@@ -11,6 +11,7 @@ import { ExerciseLayout } from '@/components/learn/ExerciseLayout'
 interface QAItem {
   id: string; question: string; answer: string
   translations?: Record<string, any>
+  image_url?: string
 }
 
 function getApiBase() { return '' }
@@ -190,6 +191,28 @@ export default function MatchPage() {
             ))}
           </div>
         </div>
+
+        {/* Image preview for selected word */}
+        {selectedLeft && (() => {
+          const item = roundItems.find(i => i.id === selectedLeft)
+          if (!item?.image_url) return null
+          const isEmoji = item.image_url.length <= 4
+          return (
+            <div className={`mt-4 rounded-2xl overflow-hidden flex items-center justify-center ${
+              isDark ? 'bg-white/5' : 'bg-slate-50'
+            }`} style={{ minHeight: isEmoji ? 80 : 120 }}>
+              {isEmoji ? (
+                <span className="text-6xl">{item.image_url}</span>
+              ) : (
+                <img
+                  src={item.image_url}
+                  alt={item.question}
+                  className="max-h-[160px] object-contain rounded-xl"
+                />
+              )}
+            </div>
+          )
+        })()}
       )}
     </ExerciseLayout>
   )