feat: Add statistics tracking and fix clipboard API

- Add personal statistics with badges for each attempt count
- Track solved puzzles per attempt (1-6) and failed attempts
- Display statistics after game completion
- Fix clipboard API issue with fallback method
- Add footer with attribution

components/Game.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState } from 'react';
 import AudioPlayer from './AudioPlayer';
 import GuessInput from './GuessInput';
+import Statistics from './Statistics';
 import { useGameState } from '../lib/gameState';
 
 interface GameProps {
@@ -16,7 +17,7 @@ interface GameProps {
 const UNLOCK_STEPS = [2, 4, 7, 11, 16, 30];
 
 export default function Game({ dailyPuzzle }: GameProps) {
-    const { gameState, addGuess } = useGameState();
+    const { gameState, statistics, addGuess } = useGameState();
     const [hasWon, setHasWon] = useState(false);
     const [hasLost, setHasLost] = useState(false);
     const [shareText, setShareText] = useState('Share Result');
@@ -68,10 +69,25 @@ export default function Game({ dailyPuzzle }: GameProps) {
         const speaker = hasWon ? '🔉' : '🔇';
         const text = `Hördle #${dailyPuzzle.id}\n\n${speaker}${emojiGrid}\n\n#Hördle #Music\n\nhttps://hoerdle.elpatron.me`;
 
-        navigator.clipboard.writeText(text).then(() => {
+        // Fallback method for copying to clipboard
+        const textarea = document.createElement('textarea');
+        textarea.value = text;
+        textarea.style.position = 'fixed';
+        textarea.style.opacity = '0';
+        document.body.appendChild(textarea);
+        textarea.select();
+
+        try {
+            document.execCommand('copy');
             setShareText('Copied!');
             setTimeout(() => setShareText('Share Result'), 2000);
-        });
+        } catch (err) {
+            console.error('Failed to copy:', err);
+            setShareText('Copy failed');
+            setTimeout(() => setShareText('Share Result'), 2000);
+        } finally {
+            document.body.removeChild(textarea);
+        }
     };
 
     return (
@@ -123,6 +139,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
                     <div className="message-box success">
                         <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>You won!</h2>
                         <p>Come back tomorrow for a new song.</p>
+                        {statistics && <Statistics statistics={statistics} />}
                         <button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
                             {shareText}
                         </button>
@@ -133,6 +150,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
                     <div className="message-box failure">
                         <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>Game Over</h2>
                         <p>The song was hidden.</p>
+                        {statistics && <Statistics statistics={statistics} />}
                         <button onClick={handleShare} className="btn-primary" style={{ marginTop: '1rem' }}>
                             {shareText}
                         </button>

components/Statistics.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Statistics as StatsType } from '../lib/gameState';
+
+interface StatisticsProps {
+    statistics: StatsType;
+}
+
+const BADGES = {
+    1: '🏆', // Gold trophy
+    2: '🥈', // Silver medal
+    3: '🥉', // Bronze medal
+    4: '⭐', // Star
+    5: '✨', // Sparkles
+    6: '💫', // Dizzy
+    failed: '❌', // Cross mark
+};
+
+export default function Statistics({ statistics }: StatisticsProps) {
+    const total =
+        statistics.solvedIn1 +
+        statistics.solvedIn2 +
+        statistics.solvedIn3 +
+        statistics.solvedIn4 +
+        statistics.solvedIn5 +
+        statistics.solvedIn6 +
+        statistics.failed;
+
+    const stats = [
+        { attempts: 1, count: statistics.solvedIn1, badge: BADGES[1] },
+        { attempts: 2, count: statistics.solvedIn2, badge: BADGES[2] },
+        { attempts: 3, count: statistics.solvedIn3, badge: BADGES[3] },
+        { attempts: 4, count: statistics.solvedIn4, badge: BADGES[4] },
+        { attempts: 5, count: statistics.solvedIn5, badge: BADGES[5] },
+        { attempts: 6, count: statistics.solvedIn6, badge: BADGES[6] },
+        { attempts: 'Failed', count: statistics.failed, badge: BADGES.failed },
+    ];
+
+    return (
+        <div className="statistics-container">
+            <h3 className="statistics-title">Your Statistics</h3>
+            <p className="statistics-total">Total puzzles: {total}</p>
+            <div className="statistics-grid">
+                {stats.map((stat, index) => (
+                    <div key={index} className="stat-item">
+                        <div className="stat-badge">{stat.badge}</div>
+                        <div className="stat-label">
+                            {typeof stat.attempts === 'number' ? `${stat.attempts} try` : stat.attempts}
+                        </div>
+                        <div className="stat-count">{stat.count}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}