```react
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { X, Play, Trophy, ChevronRight, RotateCcw, MonitorPlay, Eye, Volume2 } from 'lucide-react';

// --- MOTOR DE AUDIO AVANZADO (Estilo TV) ---
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

const playDing = () => {
  if (audioCtx.state === 'suspended') audioCtx.resume();
  const osc = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();
  
  osc.type = 'sine';
  osc.frequency.setValueAtTime(880, audioCtx.currentTime); // Nota A5 (Campana)
  osc.frequency.exponentialRampToValueAtTime(440, audioCtx.currentTime + 0.5);
  
  gainNode.gain.setValueAtTime(0.5, audioCtx.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
  
  osc.connect(gainNode);
  gainNode.connect(audioCtx.destination);
  
  osc.start();
  osc.stop(audioCtx.currentTime + 1);
};

const playBuzz = () => {
  if (audioCtx.state === 'suspended') audioCtx.resume();
  
  const osc1 = audioCtx.createOscillator();
  const osc2 = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();
  
  osc1.type = 'sawtooth';
  osc2.type = 'square';
  
  osc1.frequency.setValueAtTime(150, audioCtx.currentTime);
  osc2.frequency.setValueAtTime(155, audioCtx.currentTime); 
  
  gainNode.gain.setValueAtTime(0.4, audioCtx.currentTime);
  gainNode.gain.setValueAtTime(0.4, audioCtx.currentTime + 0.5);
  gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.8);
  
  osc1.connect(gainNode);
  osc2.connect(gainNode);
  gainNode.connect(audioCtx.destination);
  
  osc1.start();
  osc2.start();
  osc1.stop(audioCtx.currentTime + 0.8);
  osc2.stop(audioCtx.currentTime + 0.8);
};

// --- FUNCIONES DE AYUDA ---
const normalizeString = (str) => {
  return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").trim();
};

// --- DATOS DEL JUEGO ---
const QUESTIONS = [
  {
    question: "Menciona algo que la gente pierde a menudo.",
    answers: [
      { text: "LAS LLAVES", points: 42, match: ["llaves", "llave"] },
      { text: "EL CELULAR", points: 25, match: ["celular", "telefono", "movil", "cel"] },
      { text: "LA CARTERA", points: 15, match: ["cartera", "billetera", "dinero", "monedero"] },
      { text: "EL CONTROL REMOTO", points: 10, match: ["control", "control remoto", "tele"] },
      { text: "LA PACIENCIA", points: 5, match: ["paciencia", "cabeza", "calma"] },
      { text: "LOS LENTES", points: 3, match: ["lentes", "gafas", "anteojos"] }
    ]
  },
  {
    question: "¿Qué le pones a los tacos?",
    answers: [
      { text: "SALSA", points: 45, match: ["salsa", "salsas", "picante"] },
      { text: "LIMÓN", points: 28, match: ["limon", "limones"] },
      { text: "CILANTRO Y CEBOLLA", points: 15, match: ["cilantro", "cebolla", "verdura"] },
      { text: "GUACAMOLE", points: 8, match: ["guacamole", "aguacate"] },
      { text: "SAL", points: 4, match: ["sal"] }
    ]
  },
  {
    question: "Una excusa para no ir a trabajar.",
    answers: [
      { text: "ESTOY ENFERMO", points: 40, match: ["enfermo", "salud", "me siento mal", "gripe"] },
      { text: "FALLECIMIENTO", points: 20, match: ["murio", "fallecimiento", "velorio", "familiar"] },
      { text: "TRÁFICO / CHOQUE", points: 15, match: ["trafico", "choque", "accidente", "carro"] },
      { text: "PROBLEMA EN CASA", points: 12, match: ["fuga", "tuberia", "casa", "gas"] },
      { text: "NO SONÓ LA ALARMA", points: 8, match: ["alarma", "dormido"] },
      { text: "TEMA DE HIJOS", points: 5, match: ["hijo", "hijos", "escuela"] }
    ]
  },
  {
    question: "Menciona algo que haces cuando no puedes dormir.",
    answers: [
      { text: "VER EL CELULAR", points: 35, match: ["celular", "redes sociales", "telefono", "facebook", "tiktok"] },
      { text: "VER LA TELE", points: 28, match: ["tele", "television", "series", "netflix"] },
      { text: "LEER", points: 18, match: ["leer", "libro", "lectura"] },
      { text: "TOMAR AGUA / LECHE", points: 10, match: ["agua", "leche", "tomar", "beber"] },
      { text: "DAR VUELTAS", points: 6, match: ["vueltas", "dar vueltas", "pensar"] },
      { text: "CONTAR OVEJAS", points: 3, match: ["ovejas", "contar"] }
    ]
  }
];

export default function App() {
  const [gameState, setGameState] = useState('setup'); 
  const [teams, setTeams] = useState({
    team1: { name: 'Familia 1', score: 0 },
    team2: { name: 'Familia 2', score: 0 }
  });
  
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [revealedAnswers, setRevealedAnswers] = useState([]); 
  const [roundPoints, setRoundPoints] = useState(0);
  const [strikes, setStrikes] = useState(0);
  const [guess, setGuess] = useState("");
  
  const [showStrikeGraphic, setShowStrikeGraphic] = useState(0);

  const currentQuestion = QUESTIONS[currentQuestionIndex];
  const inputRef = useRef(null);

  const initAudio = () => {
    if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }
  };

  const handleStartGame = (e) => {
    e.preventDefault();
    initAudio();
    const t1Name = e.target.team1.value || 'Familia 1';
    const t2Name = e.target.team2.value || 'Familia 2';
    setTeams({
      team1: { name: t1Name.toUpperCase(), score: 0 },
      team2: { name: t2Name.toUpperCase(), score: 0 }
    });
    setGameState('playing');
    resetRound();
  };

  const resetRound = () => {
    setRevealedAnswers([]);
    setRoundPoints(0);
    setStrikes(0);
    setGuess("");
    setShowStrikeGraphic(0);
    if(inputRef.current) inputRef.current.focus();
  };

  const handleRevealAnswer = (index, isManualReveal = false) => {
    if (!revealedAnswers.includes(index)) {
      playDing();
      const newRevealed = [...revealedAnswers, index];
      setRevealedAnswers(newRevealed);
      
      if (!isManualReveal) {
        setRoundPoints(prev => prev + currentQuestion.answers[index].points);
      }
    }
  };

  const triggerStrikeGraphic = (currentStrikeCount) => {
    setShowStrikeGraphic(currentStrikeCount);
    setTimeout(() => {
      setShowStrikeGraphic(0);
      if(inputRef.current) inputRef.current.focus();
    }, 2000); 
  };

  const handleStrike = () => {
    playBuzz();
    setGuess("");
    const newStrikes = strikes + 1;
    if (newStrikes <= 3) {
      setStrikes(newStrikes);
      triggerStrikeGraphic(newStrikes);
    } else {
      triggerStrikeGraphic(3);
    }
  };

  const handleGuessSubmit = (e) => {
    e.preventDefault();
    if (!guess.trim()) return;

    const normalizedGuess = normalizeString(guess);
    let foundIndex = -1;

    for (let i = 0; i < currentQuestion.answers.length; i++) {
      const ans = currentQuestion.answers[i];
      if (ans.match.includes(normalizedGuess) || 
          normalizeString(ans.text) === normalizedGuess ||
          (normalizedGuess.length >= 4 && normalizeString(ans.text).includes(normalizedGuess))) {
        foundIndex = i;
        break;
      }
    }

    if (foundIndex !== -1) {
      if (!revealedAnswers.includes(foundIndex)) {
        handleRevealAnswer(foundIndex);
      }
    } else {
      handleStrike();
    }
    setGuess(""); 
  };

  const awardPointsToTeam = (teamKey) => {
    setTeams(prev => ({
      ...prev,
      [teamKey]: { ...prev[teamKey], score: prev[teamKey].score + roundPoints }
    }));
    setRoundPoints(0); 
  };

  const handleNextQuestion = () => {
    if (currentQuestionIndex < QUESTIONS.length - 1) {
      setCurrentQuestionIndex(prev => prev + 1);
      resetRound();
    } else {
      setGameState('winner');
    }
  };

  const handleRestart = () => {
    setGameState('setup');
    setCurrentQuestionIndex(0);
    resetRound();
  };

  // --- RENDERIZADO DE PANTALLAS ---

  const renderSetup = () => (
    <div className="h-screen bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-800 via-blue-950 to-black flex flex-col items-center justify-center p-4 text-white font-sans overflow-hidden">
      <div className="bg-black/50 p-8 rounded-[2rem] shadow-[0_0_50px_rgba(30,58,138,0.8)] border-4 border-yellow-500 w-full max-w-3xl text-center backdrop-blur-sm">
        <h1 className="text-5xl md:text-6xl font-black mb-2 text-transparent bg-clip-text bg-gradient-to-b from-yellow-200 via-yellow-400 to-yellow-600 uppercase tracking-widest drop-shadow-[0_5px_5px_rgba(0,0,0,1)]">
          100 Mexicanos<br/>Dijeron
        </h1>
        <p className="text-xl text-blue-300 mb-8 font-bold tracking-widest">VERSIÓN DE TELEVISIÓN</p>
        
        <form onSubmit={handleStartGame} className="space-y-6">
          <div className="grid grid-cols-2 gap-8">
            <div className="space-y-2">
              <label className="block text-xl font-black text-yellow-400 uppercase drop-shadow-md">Familia 1</label>
              <input 
                name="team1" 
                type="text" 
                placeholder="PÉREZ" 
                className="w-full text-2xl md:text-3xl p-3 rounded-full bg-blue-900/60 border-4 border-blue-400 text-center text-white uppercase focus:outline-none focus:border-yellow-400 focus:bg-blue-800 transition-all shadow-inner font-bold"
                autoComplete="off"
              />
            </div>
            <div className="space-y-2">
              <label className="block text-xl font-black text-yellow-400 uppercase drop-shadow-md">Familia 2</label>
              <input 
                name="team2" 
                type="text" 
                placeholder="GARCÍA" 
                className="w-full text-2xl md:text-3xl p-3 rounded-full bg-blue-900/60 border-4 border-blue-400 text-center text-white uppercase focus:outline-none focus:border-yellow-400 focus:bg-blue-800 transition-all shadow-inner font-bold"
                autoComplete="off"
              />
            </div>
          </div>
          
          <button 
            type="submit" 
            className="mt-6 bg-gradient-to-b from-yellow-300 via-yellow-500 to-yellow-600 hover:from-yellow-200 hover:via-yellow-400 hover:to-yellow-500 text-black font-black text-2xl py-4 px-12 rounded-full shadow-[0_10px_30px_rgba(250,204,21,0.5)] transform hover:scale-105 transition-all flex items-center justify-center mx-auto gap-3 border-4 border-yellow-200"
          >
            <MonitorPlay size={32} fill="currentColor" />
            ¡COMENZAR EL SHOW!
          </button>
        </form>
      </div>
    </div>
  );

  const renderGame = () => {
    // Preparar el tablero para siempre tener 8 casillas
    const boardAnswers = [...currentQuestion.answers];
    while (boardAnswers.length < 8) {
      boardAnswers.push(null);
    }

    return (
      <div className="h-screen bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900 via-gray-900 to-black flex flex-col font-sans overflow-hidden select-none">
        
        {/* --- HEADER / SCOREBOARD --- */}
        <header className="flex justify-between items-center px-8 py-3 bg-gradient-to-b from-black/80 to-black/20 relative z-10 shrink-0">
          
          {/* TEAM 1 */}
          <div className="flex flex-col items-center bg-gradient-to-b from-blue-800 to-blue-950 p-2 rounded-lg border-2 border-yellow-500 shadow-[0_0_15px_rgba(234,179,8,0.3)] min-w-[160px] md:min-w-[200px]">
            <h2 className="text-lg md:text-xl font-black text-white uppercase tracking-wider drop-shadow-md">{teams.team1.name}</h2>
            <div className="text-3xl md:text-5xl font-black text-yellow-400 drop-shadow-[0_2px_5px_rgba(0,0,0,1)] mt-1">
              {teams.team1.score}
            </div>
          </div>

          {/* BANK / CENTER */}
          <div className="flex flex-col items-center flex-1">
             <div className="bg-gradient-to-b from-blue-700 to-blue-900 border-4 border-yellow-400 rounded-full px-8 py-2 shadow-[0_0_30px_rgba(59,130,246,0.6)] flex items-center justify-center min-w-[140px] md:min-w-[180px]">
              <span className="text-4xl md:text-5xl font-black text-white drop-shadow-[0_4px_4px_rgba(0,0,0,0.8)]">{roundPoints}</span>
            </div>
          </div>

          {/* TEAM 2 */}
          <div className="flex flex-col items-center bg-gradient-to-b from-blue-800 to-blue-950 p-2 rounded-lg border-2 border-yellow-500 shadow-[0_0_15px_rgba(234,179,8,0.3)] min-w-[160px] md:min-w-[200px]">
            <h2 className="text-lg md:text-xl font-black text-white uppercase tracking-wider drop-shadow-md">{teams.team2.name}</h2>
            <div className="text-3xl md:text-5xl font-black text-yellow-400 drop-shadow-[0_2px_5px_rgba(0,0,0,1)] mt-1">
              {teams.team2.score}
            </div>
          </div>
        </header>

        {/* --- MAIN STAGE (PREGUNTA + TABLERO) --- */}
        <main className="flex-1 flex flex-col items-center justify-center p-2 md:p-4 relative z-0">
          
          {/* BANNER DE LA PREGUNTA */}
          <div className="w-full max-w-5xl bg-blue-950/90 border-[3px] border-yellow-500 rounded-2xl p-3 md:p-4 mb-3 md:mb-5 text-center shadow-[0_10px_20px_rgba(0,0,0,0.6)] z-10 flex items-center justify-center">
            <h2 className="text-2xl md:text-4xl font-black text-white uppercase tracking-wide drop-shadow-[0_2px_2px_rgba(0,0,0,1)]">
              {currentQuestion.question}
            </h2>
          </div>

          {/* EL TABLERO CLÁSICO */}
          <div className="bg-gradient-to-br from-blue-900 to-black p-3 md:p-5 rounded-[1.5rem] md:rounded-[2rem] border-[6px] md:border-[8px] border-yellow-500 shadow-[0_0_40px_rgba(0,0,0,0.8)] w-full max-w-5xl flex flex-col">
            
            <div className="grid grid-cols-2 gap-x-3 gap-y-2 md:gap-y-3 relative">
              {/* Línea divisoria central estética */}
              <div className="absolute left-1/2 top-0 bottom-0 w-1.5 bg-blue-950/50 transform -translate-x-1/2 rounded-full z-0"></div>

              {boardAnswers.map((answer, index) => {
                const isRevealed = revealedAnswers.includes(index);
                
                // Si la casilla no tiene respuesta (es de relleno)
                if (!answer) {
                  return (
                    <div key={`empty-${index}`} className="h-[56px] md:h-[68px] rounded-full bg-blue-950/30 border-2 border-blue-900/50 z-10 relative"></div>
                  );
                }

                // Casillas reales
                return (
                  <div 
                    key={index}
                    className="relative h-[56px] md:h-[68px] w-full rounded-full perspective-1000 z-10"
                    style={{ perspective: '1200px' }}
                  >
                    <div 
                      className="w-full h-full relative transition-transform duration-[600ms] ease-out shadow-[0_8px_15px_rgba(0,0,0,0.5)] rounded-full"
                      style={{ 
                        transformStyle: 'preserve-3d', 
                        transform: isRevealed ? 'rotateX(180deg)' : 'rotateX(0deg)' 
                      }}
                    >
                      {/* FRENTE (Oculto) */}
                      <div 
                        className="absolute w-full h-full bg-gradient-to-b from-blue-600 to-blue-900 border-[3px] border-blue-300 rounded-full flex items-center justify-center backface-hidden"
                        style={{ backfaceVisibility: 'hidden' }}
                      >
                        <div className="w-14 h-10 md:w-16 md:h-12 bg-gradient-to-b from-blue-800 to-blue-950 rounded-[2rem] flex items-center justify-center shadow-[inset_0_5px_10px_rgba(0,0,0,0.6)] border-2 border-blue-700">
                           <span className="text-xl md:text-3xl font-black text-blue-200">{index + 1}</span>
                        </div>
                      </div>

                      {/* RESPALDO (Revelado) */}
                      <div 
                        className="absolute w-full h-full bg-gradient-to-b from-blue-950 to-black border-[3px] border-blue-400 rounded-full flex items-center justify-between pl-6 pr-1 shadow-inner backface-hidden overflow-hidden"
                        style={{ backfaceVisibility: 'hidden', transform: 'rotateX(180deg)' }}
                      >
                        <span className="text-lg md:text-2xl lg:text-3xl font-black text-white uppercase truncate tracking-wide flex-1 drop-shadow-md">
                          {answer.text}
                        </span>
                        <div className="h-[90%] aspect-square flex items-center justify-center bg-gradient-to-b from-blue-600 to-blue-800 rounded-full border-[2px] border-blue-300 shadow-inner ml-2">
                          <span className="text-xl md:text-3xl font-black text-yellow-400 drop-shadow-[0_2px_2px_rgba(0,0,0,1)]">
                            {answer.points}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </main>

        {/* --- GRÁFICO DE STRIKES (CRUCES GIGANTES) --- */}
        {showStrikeGraphic > 0 && (
          <div className="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
            <div className="flex gap-4 animate-in zoom-in duration-100 ease-out">
              {Array.from({ length: showStrikeGraphic }).map((_, i) => (
                <div key={i} className="relative">
                  <X 
                    size={250} 
                    className="text-red-600 absolute inset-0 filter drop-shadow-[0_0_30px_rgba(255,0,0,1)] z-10 translate-y-2 translate-x-2 opacity-50" 
                    strokeWidth={4} 
                  />
                  <X 
                    size={250} 
                    className="text-red-600 relative z-20" 
                    style={{ filter: 'drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px black)' }}
                    strokeWidth={4} 
                  />
                </div>
              ))}
            </div>
          </div>
        )}

        {/* --- PANEL DE PRESENTADOR (Abajo) --- */}
        <footer className="bg-gray-950 border-t-2 border-blue-900 p-2 md:p-4 relative z-40 shadow-[0_-10px_20px_rgba(0,0,0,0.5)] shrink-0">
          <div className="max-w-6xl mx-auto flex flex-col gap-3">
            
            {/* Barra de escritura principal */}
            <form onSubmit={handleGuessSubmit} className="w-full">
              <div className="flex bg-black rounded-full border-2 border-blue-500 focus-within:border-yellow-400 transition-colors shadow-inner overflow-hidden">
                <input 
                  ref={inputRef}
                  type="text" 
                  value={guess}
                  onChange={(e) => setGuess(e.target.value)}
                  placeholder="ESCRIBE LA RESPUESTA Y PRESIONA ENTER..."
                  className="w-full bg-transparent text-white px-6 py-2 md:py-3 outline-none font-bold text-base md:text-xl uppercase"
                  autoComplete="off"
                />
                <button type="submit" className="bg-blue-600 hover:bg-blue-500 text-white px-6 md:px-10 font-black uppercase text-sm md:text-lg tracking-wider transition-colors">
                  Revelar
                </button>
              </div>
            </form>

            {/* Controles manuales */}
            <div className="flex justify-between items-center gap-2">
              
              {/* Botón Error */}
              <button 
                onClick={handleStrike}
                className="bg-red-700 hover:bg-red-600 border-2 border-red-400 text-white font-black text-sm md:text-lg py-2 px-4 md:px-8 rounded-xl flex items-center gap-2 shadow-[0_0_10px_rgba(220,38,38,0.5)] transform hover:scale-105 transition-all"
              >
                <X strokeWidth={4} size={24} /> ¡STRIKE!
              </button>

              {/* Asignar Puntos */}
              <div className="flex items-center bg-gray-900 rounded-xl p-1 border border-gray-700">
                <span className="text-gray-400 font-bold px-3 uppercase text-xs md:text-sm hidden sm:block">Dar Banco:</span>
                <button 
                  onClick={() => awardPointsToTeam('team1')}
                  disabled={roundPoints === 0}
                  className="bg-blue-900 hover:bg-blue-700 disabled:opacity-30 disabled:hover:bg-blue-900 text-white font-black text-xs md:text-sm py-2 px-3 md:px-6 rounded-lg transition-colors border border-blue-500 mx-0.5 truncate max-w-[120px]"
                >
                  {teams.team1.name}
                </button>
                <button 
                  onClick={() => awardPointsToTeam('team2')}
                  disabled={roundPoints === 0}
                  className="bg-blue-900 hover:bg-blue-700 disabled:opacity-30 disabled:hover:bg-blue-900 text-white font-black text-xs md:text-sm py-2 px-3 md:px-6 rounded-lg transition-colors border border-blue-500 mx-0.5 truncate max-w-[120px]"
                >
                  {teams.team2.name}
                </button>
              </div>

               {/* Revelar manual (Ojos) */}
               <div className="flex gap-1">
                 {currentQuestion.answers.map((ans, i) => !revealedAnswers.includes(i) && (
                    <button
                      key={`manual-${i}`}
                      onClick={() => handleRevealAnswer(i, true)}
                      title="Revelar sin dar puntos"
                      className="bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white border border-gray-600 rounded-lg p-2 flex items-center justify-center transition-colors"
                    >
                      <Eye size={18} /> <span className="ml-1 font-bold text-xs md:text-sm">{i+1}</span>
                    </button>
                 ))}
               </div>

              {/* Siguiente Pregunta */}
              <button 
                onClick={handleNextQuestion}
                className="bg-green-600 hover:bg-green-500 border-2 border-green-400 text-white font-black text-sm md:text-lg py-2 px-4 md:px-8 rounded-xl flex items-center gap-1 md:gap-2 shadow-[0_0_10px_rgba(22,163,74,0.5)] transform hover:scale-105 transition-all ml-auto"
              >
                <span className="hidden md:inline">{currentQuestionIndex < QUESTIONS.length - 1 ? 'SIGUIENTE RONDA' : 'VER GANADOR'}</span>
                <span className="md:hidden">{currentQuestionIndex < QUESTIONS.length - 1 ? 'SIGUIENTE' : 'GANADOR'}</span>
                <ChevronRight strokeWidth={4} size={24} />
              </button>
            </div>
          </div>
        </footer>
      </div>
    );
  };

  const renderWinner = () => {
    const winner = teams.team1.score > teams.team2.score ? teams.team1 : 
                   teams.team2.score > teams.team1.score ? teams.team2 : 
                   { name: '¡EMPATE!', score: teams.team1.score };

    return (
      <div className="h-screen bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-blue-900 via-black to-black flex flex-col items-center justify-center p-4 text-white font-sans text-center overflow-hidden">
        <div className="bg-gradient-to-b from-yellow-600 to-yellow-900 p-10 md:p-12 rounded-[3rem] border-8 border-yellow-400 shadow-[0_0_80px_rgba(250,204,21,0.5)] w-full max-w-3xl relative overflow-hidden">
          
          <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-30 mix-blend-overlay"></div>
          
          <div className="relative z-10">
            <Trophy size={100} className="text-yellow-200 mx-auto mb-4 drop-shadow-[0_0_20px_rgba(255,255,255,0.8)]" />
            <h2 className="text-2xl md:text-3xl text-yellow-200 font-black mb-2 uppercase tracking-widest drop-shadow-md">Familia Ganadora</h2>
            <h1 className="text-5xl md:text-7xl font-black text-white mb-4 uppercase drop-shadow-[0_5px_10px_rgba(0,0,0,0.8)]">
              {winner.name}
            </h1>
            <div className="text-4xl md:text-5xl font-black text-black bg-yellow-400 inline-block px-8 py-3 rounded-full shadow-inner mb-8 border-4 border-yellow-200">
              {winner.score} PTS
            </div>
            
            <button 
              onClick={handleRestart}
              className="bg-black hover:bg-gray-900 text-yellow-400 border-4 border-yellow-400 font-black text-xl md:text-2xl py-3 px-8 rounded-full transition-all flex items-center justify-center mx-auto gap-3 hover:scale-105"
            >
              <RotateCcw size={28} strokeWidth={3}/> JUGAR DE NUEVO
            </button>
          </div>
        </div>
      </div>
    );
  };

  if (gameState === 'setup') return renderSetup();
  if (gameState === 'playing') return renderGame();
  if (gameState === 'winner') return renderWinner();
}


```


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>