feat: Punkte-Reveal with confetti animation

Shows animated reveal overlay for unseen match results.
Exact match (3pts) triggers confetti explosion.
Each reveal shown only once (localStorage tracking).

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

frontend/src/components/ConfettiReveal.module.css

@@ -0,0 +1,91 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  animation: fadeIn 0.3s ease;
+}
+
+.card {
+  background: var(--surface-mid);
+  border-radius: var(--radius-lg);
+  padding: 32px 24px;
+  text-align: center;
+  max-width: 320px;
+  width: 90%;
+  animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.result {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 8px;
+}
+
+.tipLine {
+  font-size: 0.95rem;
+  color: var(--text-secondary);
+  margin-bottom: 16px;
+}
+
+.badge {
+  display: inline-block;
+  padding: 8px 20px;
+  border-radius: 20px;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.badgeExact {
+  background: linear-gradient(135deg, var(--gold), #FFD700);
+  color: #1a1a1a;
+  animation: shimmer 2s ease-in-out;
+}
+
+.badgeTendency {
+  background: var(--success);
+  color: #1a1a1a;
+}
+
+.badgeWrong {
+  background: var(--text-muted);
+  color: var(--bg-deep);
+}
+
+.label {
+  font-size: 1rem;
+  color: var(--text-primary);
+  margin-bottom: 20px;
+}
+
+.dismissBtn {
+  background: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 10px 32px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.8); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes shimmer {
+  0% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+  50% { box-shadow: 0 0 20px rgba(254, 174, 50, 0.6); }
+  100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+}

frontend/src/components/ConfettiReveal.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+import confetti from 'canvas-confetti';
+import { Match } from '../api/client';
+import styles from './ConfettiReveal.module.css';
+
+interface Props {
+  match: Match;
+  onDismiss: () => void;
+}
+
+export default function ConfettiReveal({ match, onDismiss }: Props) {
+  const didFire = useRef(false);
+  const tip = match.userTip!;
+  const points = tip.points!;
+
+  useEffect(() => {
+    if (points === 3 && !didFire.current) {
+      didFire.current = true;
+      confetti({ particleCount: 120, spread: 80, origin: { y: 0.6 } });
+    }
+  }, [points]);
+
+  const resultLabel = points === 3 ? 'EXAKT! 🎉' : points === 1 ? 'Richtige Tendenz! 👏' : 'Knapp daneben... 😅';
+  const badgeClass = points === 3 ? styles.badgeExact : points === 1 ? styles.badgeTendency : styles.badgeWrong;
+
+  return (
+    <div className={styles.overlay} onClick={onDismiss}>
+      <div className={styles.card} onClick={e => e.stopPropagation()}>
+        <div className={styles.result}>
+          {match.homeTeam.shortName} {match.score.home}:{match.score.away} {match.awayTeam.shortName}
+        </div>
+        <div className={styles.tipLine}>
+          Dein Tipp: {tip.home}:{tip.away}
+        </div>
+        <div className={`${styles.badge} ${badgeClass}`}>
+          {points} {points === 1 ? 'Punkt' : 'Punkte'}
+        </div>
+        <div className={styles.label}>{resultLabel}</div>
+        <button className={styles.dismissBtn} onClick={onDismiss}>Weiter</button>
+      </div>
+    </div>
+  );
+}

frontend/src/hooks/useRevealQueue.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { Match } from '../api/client';
+
+const SEEN_KEY = 'tippspiel_seen_results';
+
+function getSeenIds(): Set<number> {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(SEEN_KEY) || '[]'));
+  } catch { return new Set(); }
+}
+
+function markSeen(matchId: number) {
+  const seen = getSeenIds();
+  seen.add(matchId);
+  localStorage.setItem(SEEN_KEY, JSON.stringify([...seen]));
+}
+
+export function useRevealQueue(matches: Match[]) {
+  const [queue, setQueue] = useState<Match[]>([]);
+
+  useEffect(() => {
+    const seen = getSeenIds();
+    const unseen = matches.filter(
+      m => m.status === 'FINISHED' && m.userTip && m.userTip.points !== null && !seen.has(m.id)
+    );
+    setQueue(unseen);
+  }, [matches]);
+
+  function dismissCurrent() {
+    if (queue.length === 0) return;
+    markSeen(queue[0].id);
+    setQueue(q => q.slice(1));
+  }
+
+  return { current: queue[0] || null, remaining: queue.length, dismissCurrent };
+}

frontend/src/pages/MatchesPage.tsx

@@ -2,6 +2,8 @@ import { useState, useEffect, useCallback } from 'react';
 import { api, Match } from '../api/client';
 import MatchCard from '../components/MatchCard';
 import TipModal from '../components/TipModal';
+import { useRevealQueue } from '../hooks/useRevealQueue';
+import ConfettiReveal from '../components/ConfettiReveal';
 import styles from './MatchesPage.module.css';
 
 type Section = {
@@ -101,6 +103,8 @@ export default function MatchesPage() {
     });
   }
 
+  const { current: revealMatch, dismissCurrent } = useRevealQueue(allMatches);
+
   const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
   const sections = groupIntoSections(filteredMatches);
 
@@ -110,6 +114,10 @@ export default function MatchesPage() {
 
   return (
     <div className={styles.page}>
+      {revealMatch && (
+        <ConfettiReveal match={revealMatch} onDismiss={dismissCurrent} />
+      )}
+
       {/* Header Stats */}
       <div className={styles.statsRow}>
         <div className={`card ${styles.statCard}`}>