Feat: Add visual feedback to bonus year question

components/Game.tsx

@@ -426,6 +426,7 @@ function ScoreDisplay({ score, breakdown }: { score: number, breakdown: Array<{
 
 function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number, onGuess: (year: number) => void, onSkip: () => void }) {
     const [options, setOptions] = useState<number[]>([]);
+    const [feedback, setFeedback] = useState<{ show: boolean, correct: boolean, guessedYear?: number }>({ show: false, correct: false });
 
     useEffect(() => {
         const currentYear = new Date().getFullYear();
@@ -454,6 +455,24 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
         setOptions(Array.from(allOptions).sort((a, b) => a - b));
     }, [correctYear]);
 
+    const handleGuess = (year: number) => {
+        const correct = year === correctYear;
+        setFeedback({ show: true, correct, guessedYear: year });
+
+        // Close modal after showing feedback
+        setTimeout(() => {
+            onGuess(year);
+        }, 2500);
+    };
+
+    const handleSkip = () => {
+        setFeedback({ show: true, correct: false });
+
+        setTimeout(() => {
+            onSkip();
+        }, 2000);
+    };
+
     return (
         <div style={{
             position: 'fixed',
@@ -477,6 +496,8 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                 textAlign: 'center',
                 boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
             }}>
+                {!feedback.show ? (
+                    <>
                         <h3 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '0.5rem', color: '#1f2937' }}>Bonus Round!</h3>
                         <p style={{ marginBottom: '1.5rem', color: '#4b5563' }}>Guess the release year for <strong style={{ color: '#10b981' }}>+10 points</strong>!</p>
 
@@ -489,7 +510,7 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                             {options.map(year => (
                                 <button
                                     key={year}
-                            onClick={() => onGuess(year)}
+                                    onClick={() => handleGuess(year)}
                                     style={{
                                         padding: '0.75rem',
                                         background: '#f3f4f6',
@@ -510,7 +531,7 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                         </div>
 
                         <button
-                    onClick={onSkip}
+                            onClick={handleSkip}
                             style={{
                                 background: 'none',
                                 border: 'none',
@@ -522,6 +543,34 @@ function YearGuessModal({ correctYear, onGuess, onSkip }: { correctYear: number,
                         >
                             Skip Bonus
                         </button>
+                    </>
+                ) : (
+                    <div style={{ padding: '2rem 0' }}>
+                        {feedback.guessedYear ? (
+                            feedback.correct ? (
+                                <>
+                                    <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>🎉</div>
+                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: '#10b981', marginBottom: '0.5rem' }}>Correct!</h3>
+                                    <p style={{ fontSize: '1.2rem', color: '#4b5563' }}>Released in {correctYear}</p>
+                                    <p style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#10b981', marginTop: '1rem' }}>+10 Points!</p>
+                                </>
+                            ) : (
+                                <>
+                                    <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>😕</div>
+                                    <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ef4444', marginBottom: '0.5rem' }}>Not quite!</h3>
+                                    <p style={{ fontSize: '1.2rem', color: '#4b5563' }}>You guessed {feedback.guessedYear}</p>
+                                    <p style={{ fontSize: '1.2rem', color: '#4b5563', marginTop: '0.5rem' }}>Actually released in <strong>{correctYear}</strong></p>
+                                </>
+                            )
+                        ) : (
+                            <>
+                                <div style={{ fontSize: '4rem', marginBottom: '1rem' }}>⏭️</div>
+                                <h3 style={{ fontSize: '2rem', fontWeight: 'bold', color: '#6b7280', marginBottom: '0.5rem' }}>Skipped</h3>
+                                <p style={{ fontSize: '1.2rem', color: '#4b5563' }}>Released in {correctYear}</p>
+                            </>
+                        )}
+                    </div>
+                )}
             </div>
         </div>
     );