feat(ui): add countdown timer to next daily puzzle

components/Game.tsx

@@ -31,6 +31,25 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
     const [shareText, setShareText] = useState('🔗 Share');
     const [lastAction, setLastAction] = useState<'GUESS' | 'SKIP' | null>(null);
     const [isProcessingGuess, setIsProcessingGuess] = useState(false);
+    const [timeUntilNext, setTimeUntilNext] = useState('');
+
+    useEffect(() => {
+        const updateCountdown = () => {
+            const now = new Date();
+            const tomorrow = new Date(now);
+            tomorrow.setHours(24, 0, 0, 0);
+            const diff = tomorrow.getTime() - now.getTime();
+
+            const hours = Math.floor(diff / (1000 * 60 * 60));
+            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+            setTimeUntilNext(`${hours}h ${minutes}m`);
+        };
+
+        updateCountdown();
+        const interval = setInterval(updateCountdown, 1000); // Update every second to be accurate
+        return () => clearInterval(interval);
+    }, []);
 
     useEffect(() => {
         if (gameState && dailyPuzzle) {
@@ -160,6 +179,9 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
         <div className="container">
             <header className="header">
                 <h1 className="title">Hördle #{dailyPuzzle.id}{genre ? ` / ${genre}` : ''}</h1>
+                <div style={{ fontSize: '0.9rem', color: '#666', marginTop: '-0.5rem', marginBottom: '1rem' }}>
+                    Next puzzle in: {timeUntilNext}
+                </div>
             </header>
 
             <main className="game-board">