feat: tip confirmation animation with haptic feedback

Success overlay with animated checkmark and 'Dein Tipp ist drin! 🎯'
message. Haptic vibration on mobile. Auto-closes after 1.2s.

- Add showSuccess state to TipModal
- Trigger vibration feedback on successful submit
- Display success overlay with popIn animation for checkmark
- Auto-close modal after success animation completes
- Add CSS animations (fadeIn, popIn) to TipModal.module.css

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

frontend/src/components/TipModal.tsx

@@ -21,6 +21,7 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
   const [home, setHome] = useState(existing?.home ?? 0);
   const [away, setAway] = useState(existing?.away ?? 0);
   const [saving, setSaving] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   const tendency = getTendency(home, away);
@@ -38,7 +39,13 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
     setError(null);
     try {
       await api.submitTip(match.id, home, away);
-      onSaved(match.id, home, away);
+      setShowSuccess(true);
+      if (navigator.vibrate) navigator.vibrate(50); // haptic feedback
+      setTimeout(() => {
+        setShowSuccess(false);
+        onSaved(match.id, home, away);
+        onClose();
+      }, 1200);
     } catch (e) {
       setError((e as Error).message);
       setSaving(false);
@@ -99,6 +106,13 @@ export default function TipModal({ match, onClose, onSaved }: Props) {
 
         {error && <div className={styles.error}>{error}</div>}
 
+        {showSuccess && (
+          <div className={styles.successOverlay}>
+            <div className={styles.successCheck}>✓</div>
+            <div className={styles.successText}>Dein Tipp ist drin! 🎯</div>
+          </div>
+        )}
+
         {/* CTA */}
         <button
           className={`btn-primary ${styles.saveBtn}`}