feat: rank change toast + streak milestone icons

Toast notification on rank change (up/down).
Streak display with milestones: 🔥 at 3, 🔥🔥 at 10, ⚡ at 20.

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

frontend/src/components/Toast.module.css

@@ -0,0 +1,25 @@
+.toast {
+  position: fixed;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: color-mix(in srgb, var(--surface-high) 95%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  color: var(--text-primary);
+  padding: 12px 20px;
+  border-radius: var(--radius-md);
+  font-size: 0.9rem;
+  font-weight: 500;
+  z-index: 300;
+  cursor: pointer;
+  animation: slideDown 0.3s ease;
+  border: 1px solid rgba(75, 183, 248, 0.15);
+  max-width: 90%;
+  text-align: center;
+}
+
+@keyframes slideDown {
+  from { transform: translateX(-50%) translateY(-100%); opacity: 0; }
+  to { transform: translateX(-50%) translateY(0); opacity: 1; }
+}

frontend/src/components/Toast.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import styles from './Toast.module.css';
+
+interface Props {
+  message: string;
+  onDismiss: () => void;
+  duration?: number;
+}
+
+export default function Toast({ message, onDismiss, duration = 5000 }: Props) {
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, duration);
+    return () => clearTimeout(timer);
+  }, [onDismiss, duration]);
+
+  return (
+    <div className={styles.toast} onClick={onDismiss}>
+      {message}
+    </div>
+  );
+}