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/App.tsx

@@ -7,6 +7,8 @@ import LeaderboardPage from './pages/LeaderboardPage';
 import ProfilePage from './pages/ProfilePage';
 import AdminPage from './pages/AdminPage';
 import BottomNav from './components/BottomNav';
+import Toast from './components/Toast';
+import { useRankChange } from './hooks/useRankChange';
 import styles from './App.module.css';
 
 const IS_DEV = import.meta.env.DEV || import.meta.env.VITE_TEST_MODE === 'true';
@@ -28,6 +30,7 @@ function getInitialTheme(): Theme {
 
 export default function App() {
   const [theme, setTheme] = useState<Theme>(getInitialTheme);
+  const { message: rankMsg, dismiss: dismissRank } = useRankChange();
   const [devUser, setDevUser] = useState(1);
   const [devMatches, setDevMatches] = useState<any[]>([]);
   const [refreshKey, setRefreshKey] = useState(0);
@@ -115,6 +118,7 @@ export default function App() {
         </Routes>
       </main>
 
+      {rankMsg && <Toast message={rankMsg} onDismiss={dismissRank} />}
       <BottomNav />
 
       {IS_DEV && DevPanel && (