List incorrect reason as well

App.tsx

@@ -48,7 +48,8 @@ function App() {
     hasAnswered,
     lastPointsEarned,
     nextQuestion,
-    currentCorrectShape
+    currentCorrectShape,
+    selectedOption
   } = useGame();
 
   const currentQ = quiz?.questions[currentQuestionIndex];
@@ -121,6 +122,7 @@ function App() {
                 newScore={0} 
                 streak={0} 
                 correctOption={correctOpt}
+                selectedOption={selectedOption}
                 role={role}
             />
         ) : null}

components/RevealScreen.tsx

@@ -11,6 +11,7 @@ interface RevealScreenProps {
   newScore: number;
   streak: number;
   correctOption: AnswerOption;
+  selectedOption?: AnswerOption | null;
   role: GameRole;
 }
 
@@ -20,6 +21,7 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
   newScore,
   streak,
   correctOption,
+  selectedOption,
   role
 }) => {
   const isHost = role === 'HOST';
@@ -161,6 +163,14 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
                 transition={{ delay: 0.5, type: 'spring' }}
                 className="bg-black/30 backdrop-blur-md p-6 pb-12"
              >
+                {selectedOption && selectedOption.reason && (
+                  <div className="mb-4 pb-4 border-b border-white/20">
+                    <p className="text-center text-sm font-bold uppercase tracking-widest mb-2 opacity-70">Why your answer was wrong</p>
+                    <p className="text-center text-sm opacity-90 max-w-md mx-auto">
+                      {selectedOption.reason}
+                    </p>
+                  </div>
+                )}
                 <p className="text-center text-sm font-bold uppercase tracking-widest mb-4 opacity-70">The correct answer was</p>
                 <div className="flex flex-col items-center gap-3">
                     <div className="flex items-center gap-4">

hooks/useGame.ts

@@ -16,6 +16,7 @@ export const useGame = () => {
   const [gamePin, setGamePin] = useState<string | null>(null);
   const [currentCorrectShape, setCurrentCorrectShape] = useState<string | null>(null);
   const [lastPointsEarned, setLastPointsEarned] = useState<number | null>(null);
+  const [selectedOption, setSelectedOption] = useState<AnswerOption | null>(null);
   
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const peerRef = useRef<Peer | null>(null);
@@ -173,6 +174,7 @@ export const useGame = () => {
     setGameState('QUESTION');
     setHasAnswered(false);
     setLastPointsEarned(null);
+    setSelectedOption(null);
     setTimeLeft(QUESTION_TIME);
     setPlayers(prev => prev.map(p => ({ ...p, lastAnswerCorrect: null })));
 
@@ -275,6 +277,7 @@ export const useGame = () => {
         setGameState('QUESTION');
         setHasAnswered(false);
         setLastPointsEarned(null);
+        setSelectedOption(null);
         setCurrentQuestionIndex(data.payload.currentQuestionIndex);
         setTimeLeft(data.payload.timeLimit);
         setCurrentCorrectShape(data.payload.correctShape);
@@ -320,8 +323,9 @@ export const useGame = () => {
     setHasAnswered(true);
 
     if (role === 'HOST') {
-        const isCorrect = arg as boolean;
-        // Use Ref for time to be consistent with handleHostData logic
+        const option = arg as AnswerOption;
+        const isCorrect = option.isCorrect;
+        setSelectedOption(option);
         const points = isCorrect ? Math.round(POINTS_PER_QUESTION * (timeLeftRef.current / QUESTION_TIME)) : 0;
         setLastPointsEarned(points);
         
@@ -331,6 +335,7 @@ export const useGame = () => {
         }));
     } else {
         const option = arg as AnswerOption;
+        setSelectedOption(option);
         const isCorrect = option.shape === currentCorrectShape;
         hostConnectionRef.current?.send({ type: 'ANSWER', payload: { playerId: peerRef.current?.id, isCorrect } });
     }
@@ -350,7 +355,7 @@ export const useGame = () => {
   }, []);
 
   return {
-    role, gameState, quiz, players, currentQuestionIndex, timeLeft, error, gamePin, hasAnswered, lastPointsEarned, currentCorrectShape,
+    role, gameState, quiz, players, currentQuestionIndex, timeLeft, error, gamePin, hasAnswered, lastPointsEarned, currentCorrectShape, selectedOption,
     startQuizGen, startManualCreation, finalizeManualQuiz, joinGame, startGame: startHostGame, handleAnswer, nextQuestion
   };
 };