feat: zustandsbasierte Match-Cards (open/tipped/live/finished/missed)

Each card state has distinct visual treatment:
- Open: standard with countdown timer when <1h
- Tipped: green accent with tip display
- Live: pulsing red dot
- Finished: points badge (gold/green/gray)
- Missed: grayed out

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

frontend/src/components/MatchCard.module.css

@@ -341,3 +341,121 @@
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
+
+/* ── State-based card variants ──────────────────────────────────── */
+
+.card_open { /* default — no extra styling needed */ }
+
+.card_tipped {
+  border-left: 3px solid var(--success);
+}
+
+.card_live {
+  border-left: 3px solid var(--error);
+}
+
+.card_finished { /* glow classes already applied via JS */ }
+
+.card_missed {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+/* Live pulsing dot */
+.liveDot {
+  width: 8px;
+  height: 8px;
+  background: var(--error);
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+  vertical-align: middle;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Score + live tip stacked */
+.scoreStack {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.liveTipCompare {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+}
+
+/* Points badge */
+.pointsBadge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 0.8rem;
+  font-weight: 700;
+}
+
+.pointsBadge_exact {
+  background: linear-gradient(135deg, var(--gold), #FFD700);
+  color: #1a1a1a;
+  animation: shimmer 2s ease-in-out;
+}
+
+.pointsBadge_tendency {
+  background: var(--success);
+  color: #1a1a1a;
+}
+
+.pointsBadge_wrong {
+  background: var(--text-muted);
+  color: var(--bg-deep);
+}
+
+/* Missed label */
+.missedLabel {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/* Countdown (replaces badge when < 60 min) */
+.countdown {
+  color: var(--error);
+  font-weight: 700;
+  font-size: 0.8rem;
+}
+
+.countdownUrgent {
+  animation: pulse 0.8s ease-in-out infinite;
+}
+
+/* Tipped state: checkmark + score inline */
+.tipDisplay_score {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Change button for tipped state */
+.changeBtn {
+  background: none;
+  border: none;
+  color: var(--primary);
+  cursor: pointer;
+  font-size: 0.8rem;
+  text-decoration: underline;
+  padding: 0;
+}
+
+.changeBtn:hover {
+  color: var(--primary);
+  opacity: 0.75;
+}
+
+@keyframes shimmer {
+  0%   { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+  50%  { box-shadow: 0 0 16px rgba(254, 174, 50, 0.5); }
+  100% { box-shadow: 0 0 0 rgba(254, 174, 50, 0); }
+}