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/app/learn/[unitId]/story/page.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { useTheme } from '@/lib/ThemeContext'
+import { AudioButton } from '@/components/learn/AudioButton'
+
+function getBackendUrl() {
+  if (typeof window === 'undefined') return 'http://localhost:8001'
+  const { hostname, protocol } = window.location
+  if (hostname === 'localhost') return 'http://localhost:8001'
+  return `${protocol}//${hostname}:8001`
+}
+
+function getKlausurApiUrl() {
+  if (typeof window === 'undefined') return 'http://localhost:8086'
+  const { hostname, protocol } = window.location
+  if (hostname === 'localhost') return 'http://localhost:8086'
+  return `${protocol}//${hostname}/klausur-api`
+}
+
+export default function StoryPage() {
+  const { unitId } = useParams<{ unitId: string }>()
+  const router = useRouter()
+  const { isDark } = useTheme()
+
+  const [story, setStory] = useState<{ story_html: string; story_text: string; vocab_used: string[]; language: string } | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [language, setLanguage] = useState<'en' | 'de'>('en')
+
+  const glassCard = isDark
+    ? 'bg-white/10 backdrop-blur-xl border border-white/10'
+    : 'bg-white/80 backdrop-blur-xl border border-black/5'
+
+  const generateStory = async () => {
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      // First get the QA data to extract vocabulary
+      const qaResp = await fetch(`${getBackendUrl()}/api/learning-units/${unitId}/qa`)
+      let vocabulary: { english: string; german: string }[] = []
+
+      if (qaResp.ok) {
+        const qaData = await qaResp.json()
+        // Convert QA items to vocabulary format
+        vocabulary = (qaData.qa_items || []).map((item: any) => ({
+          english: item.question,
+          german: item.answer,
+        }))
+      }
+
+      if (vocabulary.length === 0) {
+        setError('Keine Vokabeln gefunden.')
+        setIsLoading(false)
+        return
+      }
+
+      // Generate story
+      const resp = await fetch(`${getBackendUrl()}/api/learning-units/${unitId}/generate-story`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ vocabulary, language, grade_level: '5-8' }),
+      })
+
+      if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+      const data = await resp.json()
+      setStory(data)
+    } catch (err: any) {
+      setError(err.message)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div className={`min-h-screen flex flex-col ${isDark ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800' : 'bg-gradient-to-br from-slate-100 via-amber-50 to-orange-100'}`}>
+      {/* Header */}
+      <div className={`${glassCard} border-0 border-b`}>
+        <div className="max-w-2xl mx-auto px-6 py-4 flex items-center justify-between">
+          <button
+            onClick={() => router.push('/learn')}
+            className={`flex items-center gap-2 text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-900'}`}
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Zurueck
+          </button>
+          <h1 className={`text-lg font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
+            Minigeschichte
+          </h1>
+          <button
+            onClick={() => setLanguage((l) => l === 'en' ? 'de' : 'en')}
+            className={`text-xs px-3 py-1.5 rounded-lg ${isDark ? 'bg-white/10 text-white/70' : 'bg-slate-100 text-slate-600'}`}
+          >
+            {language === 'en' ? 'Englisch' : 'Deutsch'}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 flex items-center justify-center px-6 py-8">
+        <div className="w-full max-w-lg space-y-6">
+          {story ? (
+            <>
+              {/* Story Card */}
+              <div className={`${glassCard} rounded-3xl p-8`}>
+                <div className="flex items-center justify-between mb-4">
+                  <span className={`text-xs font-medium uppercase ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                    {story.language === 'en' ? 'English Story' : 'Deutsche Geschichte'}
+                  </span>
+                  <AudioButton text={story.story_text} lang={story.language as 'en' | 'de'} isDark={isDark} size="md" />
+                </div>
+                <div
+                  className={`text-lg leading-relaxed ${isDark ? 'text-white/90' : 'text-slate-800'}`}
+                  dangerouslySetInnerHTML={{ __html: story.story_html }}
+                />
+                <style>{`
+                  .vocab-highlight {
+                    background: ${isDark ? 'rgba(96, 165, 250, 0.3)' : 'rgba(59, 130, 246, 0.15)'};
+                    color: ${isDark ? '#93c5fd' : '#1d4ed8'};
+                    padding: 1px 4px;
+                    border-radius: 4px;
+                    font-weight: 600;
+                  }
+                `}</style>
+              </div>
+
+              {/* Vocab used */}
+              <div className={`text-center text-sm ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
+                Vokabeln verwendet: {story.vocab_used.length} / {story.vocab_used.length > 0 ? story.vocab_used.join(', ') : '-'}
+              </div>
+
+              {/* New Story Button */}
+              <button
+                onClick={generateStory}
+                disabled={isLoading}
+                className="w-full py-3 rounded-xl bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium hover:shadow-lg transition-all"
+              >
+                Neue Geschichte generieren
+              </button>
+            </>
+          ) : (
+            <div className={`${glassCard} rounded-3xl p-10 text-center`}>
+              <div className="text-5xl mb-4">📖</div>
+              <h2 className={`text-xl font-bold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
+                Minigeschichte
+              </h2>
+              <p className={`text-sm mb-6 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
+                Die KI schreibt eine kurze Geschichte mit deinen Vokabeln.
+                Die Vokabelwoerter werden farbig hervorgehoben.
+              </p>
+
+              {error && (
+                <p className={`text-sm mb-4 ${isDark ? 'text-red-300' : 'text-red-600'}`}>{error}</p>
+              )}
+
+              <button
+                onClick={generateStory}
+                disabled={isLoading}
+                className={`w-full py-4 rounded-xl font-medium transition-all ${
+                  isLoading
+                    ? (isDark ? 'bg-white/5 text-white/30' : 'bg-slate-100 text-slate-400')
+                    : 'bg-gradient-to-r from-amber-500 to-orange-500 text-white hover:shadow-lg hover:shadow-orange-500/25'
+                }`}
+              >
+                {isLoading ? (
+                  <span className="flex items-center justify-center gap-3">
+                    <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                    Geschichte wird geschrieben...
+                  </span>
+                ) : (
+                  'Geschichte generieren'
+                )}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}