Checkpoint: Fix role shuffling bug and improve mission reveal flow

client/src/components/MissionReveal.tsx

@@ -3,42 +3,59 @@ import { useEffect } from 'react';
 
 interface MissionRevealProps {
     votes: boolean[];
+    onFinished?: () => void;
 }
 
-export default function MissionReveal({ votes }: MissionRevealProps) {
-    // Auto-avanzar después de mostrar todas las cartas
+export default function MissionReveal({ votes, onFinished }: MissionRevealProps) {
+    // Timer de seguridad: 10 segundos y avanza
     useEffect(() => {
         const timer = setTimeout(() => {
-            // El servidor avanzará automáticamente
-            // Este timer es solo para dar tiempo a ver las cartas
-        }, 3000 + votes.length * 300); // 3s base + 300ms por carta
-        
+            if (onFinished) onFinished();
+        }, 10000);
+
         return () => clearTimeout(timer);
-    }, [votes.length]);
+    }, [onFinished]);
 
     return (
         <motion.div
-            className="fixed inset-0 flex flex-col items-center justify-center bg-black/90 z-50"
+            className="fixed inset-0 flex flex-col items-center justify-center bg-black/95 z-50 pointer-events-auto"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
         >
-            <h2 className="text-4xl font-bold text-white mb-8">Resultados de la Misión</h2>
-            <div className="flex gap-4 justify-center mb-8">
+            <h2 className="text-5xl font-bold text-white mb-12 uppercase tracking-widest drop-shadow-lg">
+                Resultado de Misión
+            </h2>
+
+            <div className="flex gap-8 justify-center mb-12 flex-wrap max-w-[90vw]">
                 {votes.map((vote, idx) => (
                     <motion.div
                         key={idx}
-                        className={`w - 24 h - 32 rounded - lg flex items - center justify - center text - 5xl font - bold text - white ${
-    vote ? 'bg-blue-600' : 'bg-red-600'
-} `}
-                        initial={{ scale: 0, rotate: -180 }}
-                        animate={{ scale: 1, rotate: 0 }}
-                        transition={{ delay: idx * 0.3 }}
+                        className={`w-48 h-72 rounded-xl flex items-center justify-center text-7xl font-bold text-white shadow-2xl border-4 ${vote
+                                ? 'bg-gradient-to-br from-blue-600 to-blue-900 border-blue-400 shadow-blue-500/50'
+                                : 'bg-gradient-to-br from-red-600 to-red-900 border-red-400 shadow-red-500/50'
+                            }`}
+                        initial={{ scale: 0, rotateY: 180 }}
+                        animate={{ scale: 1, rotateY: 0 }}
+                        transition={{
+                            delay: idx * 0.8, // Más lento para drama
+                            type: "spring",
+                            stiffness: 200,
+                            damping: 20
+                        }}
                     >
                         {vote ? '✓' : '✗'}
                     </motion.div>
                 ))}
             </div>
-            <p className="text-white text-xl">Procesando resultado...</p>
+
+            <motion.div
+                className="text-white text-xl font-mono mt-8"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: votes.length * 0.8 + 1 }}
+            >
+                <span className="animate-pulse">Analizando resultado estratégico...</span>
+            </motion.div>
         </motion.div>
     );
 }