Add Phases 3.2-4.3: STT, stories, syllables, gamification

Phase 3.2 — MicrophoneInput.tsx: Browser Web Speech API for
speech-to-text recognition (EN+DE), integrated for pronunciation practice.

Phase 4.1 — Story Generator: LLM-powered mini-stories using vocabulary
words, with highlighted vocab in HTML output. Backend endpoint
POST /learning-units/{id}/generate-story + frontend /learn/[unitId]/story.

Phase 4.2 — SyllableBow.tsx: SVG arc component for syllable visualization
under words, clickable for per-syllable TTS.

Phase 4.3 — Gamification system:
- CoinAnimation.tsx: Floating coin rewards with accumulator
- CrownBadge.tsx: Crown/medal display for milestones
- ProgressRing.tsx: Circular progress indicator
- progress_api.py: Backend tracking coins, crowns, streaks per unit

Also adds "Geschichte" exercise type button to UnitCard.

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

studio-v2/components/gamification/CrownBadge.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import React from 'react'
+
+interface CrownBadgeProps {
+  crowns: number
+  size?: 'sm' | 'md' | 'lg'
+  showLabel?: boolean
+}
+
+export function CrownBadge({ crowns, size = 'md', showLabel = true }: CrownBadgeProps) {
+  const sizeClasses = {
+    sm: 'text-base',
+    md: 'text-xl',
+    lg: 'text-3xl',
+  }
+
+  const isGold = crowns >= 3
+  const isSilver = crowns >= 1
+
+  return (
+    <div className="inline-flex items-center gap-1.5">
+      <span className={`${sizeClasses[size]} ${isGold ? 'animate-pulse' : ''}`}>
+        {isGold ? '👑' : isSilver ? '🥈' : '⭐'}
+      </span>
+      {showLabel && (
+        <span className={`font-bold tabular-nums ${
+          isGold ? 'text-yellow-400' : isSilver ? 'text-slate-300' : 'text-white/50'
+        } ${size === 'sm' ? 'text-xs' : size === 'md' ? 'text-sm' : 'text-base'}`}>
+          {crowns}
+        </span>
+      )}
+    </div>
+  )
+}