Smooth Ambidexterity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Tempel des Schreckens</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore-compat.js"></script>
    <style>
        body { background-color: #0f172a; color: #f8fafc; overflow: hidden; touch-action: manipulation; font-family: 'Inter', sans-serif; }
        .card-container { perspective: 1000px; }
        .card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; }
        .flipped .card-inner { transform: rotateY(180deg); }
        .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.1); }
        .card-back { background: linear-gradient(135deg, #1e293b, #0f172a); background-image: radial-gradient(circle at center, #334155 1px, transparent 1px); background-size: 10px 10px; }
        .card-front { transform: rotateY(180deg); }
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        .custom-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
        .custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }
        @keyframes pulse-gold { 0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); } 50% { box-shadow: 0 0 20px 10px rgba(234, 179, 8, 0.2); } }
        .gold-glow { animation: pulse-gold 2s infinite; }
        
        @keyframes heartbeat {
            0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 100, 100, 0.5); }
            20% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 50, 50, 0.9); }
            40% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 100, 100, 0.5); }
            60% { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 50, 50, 0.9); }
            100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 100, 100, 0.5); }
        }
        .anim-heartbeat { animation: heartbeat 0.5s infinite; border-radius: 0.5rem; z-index: 50; }
        
        #root { height: 100vh; width: 100vw; display: flex; flex-direction: column; }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        // INJECTED CONFIG
        const firebaseConfig = window.parent.__FIREBASE_CONFIG || {
            apiKey: "AIzaSyAm8Ho-QWHM8ZMSmTx7CCbyRpuVdsGZtso",
            authDomain: "cabo-dda9b.firebaseapp.com",
            projectId: "cabo-dda9b",
            storageBucket: "cabo-dda9b.firebasestorage.app",
            messagingSenderId: "84209971314",
            appId: "1:84209971314:web:059b85a4c1ca7df574d2eb"
        };
        const appId = 'tempel-v1';

if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);
        const auth = firebase.auth();
        const db = firebase.firestore();

// Simple Audio Engine
        const playSound = (type) => {
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            if (!ctx) return;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.connect(gain);
            gain.connect(ctx.destination);
            if (type === 'gold') {
                osc.type = 'sine';
                osc.frequency.setValueAtTime(800, ctx.currentTime);
                osc.frequency.exponentialRampToValueAtTime(1400, ctx.currentTime + 0.1);
                gain.gain.setValueAtTime(0.5, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
                osc.start(); osc.stop(ctx.currentTime + 0.5);
            } else if (type === 'trap') {
                osc.type = 'sawtooth';
                osc.frequency.setValueAtTime(120, ctx.currentTime);
                osc.frequency.exponentialRampToValueAtTime(40, ctx.currentTime + 0.3);
                gain.gain.setValueAtTime(0.8, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.4);
                osc.start(); osc.stop(ctx.currentTime + 0.4);
            } else if (type === 'flip') {
                osc.type = 'triangle';
                osc.frequency.setValueAtTime(300, ctx.currentTime);
                gain.gain.setValueAtTime(0.2, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
                osc.start(); osc.stop(ctx.currentTime + 0.1);
            }
        };

useEffect(() => {
                const initAuth = async () => { await auth.signInAnonymously(); };
                const unsub = auth.onAuthStateChanged(u => { if (u) setUser(u); else initAuth(); });
                return unsub;
            }, []);

useEffect(() => {
                if (!user || !roomCode || view !== 'GAME') return;
                const docRef = db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(roomCode.toUpperCase());
                return docRef.onSnapshot(doc => {
                    if (doc.exists) {
                        const data = doc.data();
                        if (!data.players.find(p => p.id === playerId)) {
                            setError("You have left the room.");
                            setView('LANDING');
                            setGameData(null);
                            setRoomCode('');
                        } else {
                            setGameData(data);
                        }
                    } else { 
                        setError("Room closed or not found"); 
                        setView('LANDING'); 
                    }
                });
            }, [user, roomCode, view, playerId]);

const leaveRoomRef = useRef();
            const leaveRoom = async () => {
                if (roomCode && playerId) {
                    const code = roomCode.toUpperCase();
                    const docRef = db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(code);
                    try {
                        await db.runTransaction(async (t) => {
                            const doc = await t.get(docRef);
                            if (!doc.exists) return;
                            const data = doc.data();
                            const leavingPlayerIndex = data.players.findIndex(p => p.id === playerId);
                            if (leavingPlayerIndex === -1) return;

let newPlayers = data.players.filter(p => p.id !== playerId);
                            if (newPlayers.length > 0) {
                                if (leavingPlayerIndex === 0 && newPlayers.length > 1) {
                                    const newHostIndex = Math.floor(Math.random() * newPlayers.length);
                                    const temp = newPlayers[0];
                                    newPlayers[0] = newPlayers[newHostIndex];
                                    newPlayers[newHostIndex] = temp;
                                }

t.update(docRef, { 
                                    players: newPlayers,
                                    turnIndex: newTurnIndex,
                                    logs: [...data.logs, `${playerName || 'A player'} left the game.`]
                                });
                            }
                        });
                    } catch (e) { console.error(e); }
                }
                setRoomCode(''); setView('LANDING'); setGameData(null);
            };

useEffect(() => { leaveRoomRef.current = leaveRoom; });
            useEffect(() => {
                const handleBeforeUnload = () => { if (leaveRoomRef.current) leaveRoomRef.current(); };
                window.addEventListener('beforeunload', handleBeforeUnload);
                return () => window.removeEventListener('beforeunload', handleBeforeUnload);
            }, []);

if (nextCode) {
                        const newDocRef = db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(nextCode);
                        await db.runTransaction(async (t) => {
                            const newDoc = await t.get(newDocRef);
                            if (!newDoc.exists) {
                                const initial = { 
                                    code: nextCode, 
                                    gameState: 'LOBBY', 
                                    keyMode: gameData.keyMode || 'VOTE',
                                    lastGoldFinder: null,
                                    suspenseCard: null,
                                    players: [{ id: playerId, name: playerName, role: null, hand: [], isReady: false, isReadyToStart: false, claims: {gold:0, trap:0} }], 
                                    turnIndex: 0, 
                                    round: 1, 
                                    actionsThisRound: 0, 
                                    goldFound: 0, 
                                    trapsFound: 0, 
                                    totalGold: 0, 
                                    totalTraps: 0, 
                                    votes: {}, 
                                    logs: [`${playerName} created the rematch room.`] 
                                };
                                t.set(newDocRef, initial);
                            } else {
                                const newData = newDoc.data();
                                if (!newData.players.find(p => p.id === playerId)) {
                                    t.update(newDocRef, { 
                                        players: [...newData.players, { id: playerId, name: playerName, role: null, hand: [], isReady: false, isReadyToStart: false, claims: {gold:0, trap:0} }], 
                                        logs: [...newData.logs, `${playerName} joined the rematch.`] 
                                    });
                                }
                            }
                        });
                        setRoomCode(nextCode);
                    }
                } catch (e) { console.error(e); }
            };

const handleCardClick = async (targetPlayerId, cardId, cardType) => {
                if (gameData.gameState !== 'PLAYING') return;
                const myTurn = gameData.players[gameData.turnIndex].id === playerId;
                if (!myTurn || targetPlayerId === playerId || gameData.suspenseCard) return;

playSound('flip');
                
                const code = roomCode.toUpperCase();
                await db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(code).update({
                    suspenseCard: { targetPlayerId, cardId }
                });

setTimeout(async () => {
                    if (cardType === 'GOLD') playSound('gold');
                    if (cardType === 'TRAP') {
                        playSound('trap');
                        setTrapFlash(true);
                        setTimeout(() => setTrapFlash(false), 500);
                    }
                    
                    await db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(code).update({
                        suspenseCard: null
                    });
                    
                    flipCard(targetPlayerId, cardId);
                }, 1000);
            };

if (view === 'LANDING') return (
                <div className="flex-1 flex flex-col items-center justify-center p-6 bg-slate-900">
                    <div className="w-full max-w-md bg-slate-800 p-8 rounded-2xl shadow-2xl border border-slate-700">
                        <h1 className="text-4xl font-black text-center mb-2 tracking-tighter text-yellow-500">TEMPEL</h1>
                        <p className="text-center text-slate-400 mb-8 font-medium">DES SCHRECKENS</p>
                        <div className="space-y-4">
                            <input className="w-full p-4 rounded-xl bg-slate-900 border border-slate-700 focus:ring-2 focus:ring-yellow-500 outline-none transition-all" placeholder="Display Name" value={playerName} onChange={e => setPlayerName(e.target.value)} />
                            <div className="flex gap-2">
                                <input className="flex-1 p-4 rounded-xl bg-slate-900 border border-slate-700 uppercase font-mono tracking-widest outline-none" placeholder="CODE" value={roomCode} maxLength={4} onChange={e => setRoomCode(e.target.value.toUpperCase())} />
                                <button onClick={joinRoom} className="bg-slate-700 hover:bg-slate-600 px-6 rounded-xl font-bold transition-colors">JOIN</button>
                            </div>
                            <button onClick={createRoom} className="w-full bg-yellow-600 hover:bg-yellow-500 text-slate-900 p-4 rounded-xl font-black transition-all transform active:scale-95">CREATE NEW TEMPLE</button>
                            {error && <p className="text-red-400 text-sm text-center font-medium">{error}</p>}
                        </div>
                    </div>
                </div>
            );
            
            if (!gameData) return <div className="h-screen flex items-center justify-center bg-slate-900">Entering Temple...</div>;
            
            const me = gameData.players.find(p => p.id === playerId);
            const isMyTurn = gameData.players[gameData.turnIndex]?.id === playerId;
            const myTurnName = gameData.players[gameData.turnIndex]?.name;
            
            let bgAtmosphere = 'bg-slate-950';
            if (gameData.round === 2) bgAtmosphere = 'bg-slate-900 shadow-[inset_0_0_100px_rgba(0,0,0,0.5)]';
            if (gameData.round === 3) bgAtmosphere = 'bg-slate-900 shadow-[inset_0_0_150px_rgba(100,20,20,0.2)]';
            if (gameData.round === 4) bgAtmosphere = 'bg-red-950 shadow-[inset_0_0_200px_rgba(255,0,0,0.15)]';

return (
                <div className="flex-1 flex overflow-hidden">
                    <div className="w-64 bg-slate-900 border-r border-slate-800 flex flex-col p-4 shadow-xl z-20">
                        <div className="mb-6">
                            <h2 className="text-xs font-black text-slate-500 uppercase tracking-widest mb-4">Temple Status</h2>
                            <div className="space-y-3">
                                <div className="bg-slate-800/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center"><span className="text-sm">Round</span><span className="font-bold text-lg">{gameData.round}/4</span></div>
                                <div className="bg-slate-800/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center"><span className="text-sm">Gold</span><span className="font-bold text-lg text-yellow-500">{gameData.goldFound}/{gameData.totalGold}</span></div>
                                <div className="bg-slate-800/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center"><span className="text-sm">Traps</span><span className="font-bold text-lg text-red-500">{gameData.trapsFound}/{gameData.totalTraps}</span></div>
                                <div className="bg-slate-800/50 p-3 rounded-lg border border-slate-700 flex justify-between items-center"><span className="text-sm">Moves</span><span className="font-bold text-lg text-slate-300">{(gameData.players.length - gameData.actionsThisRound)}</span></div>
                            </div>
                        </div>
                        <div className="bg-slate-950 p-4 rounded-xl border border-yellow-900/30 mb-4">
                            <div className="text-[10px] uppercase text-slate-500 font-bold mb-1">Your Identity</div>
                            <div className={`text-xl font-black ${me?.role === 'ADVENTURER' ? 'text-blue-400' : 'text-red-400'}`}>{me?.role || 'SPECTATOR'}</div>
                            <div className="text-[10px] text-slate-600 mt-2 italic leading-tight">{me?.role === 'ADVENTURER' ? 'Find the gold cards.' : 'Lure them into traps!'}</div>
                        </div>
                        <div className="flex-1 flex flex-col min-h-0"><h2 className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2">Temple Logs</h2><div className="flex-1 overflow-y-auto custom-scroll text-[11px] space-y-2 pr-2">{gameData.logs.slice().reverse().map((log, i) => (<div key={i} className="p-2 bg-slate-800/30 rounded border-l-2 border-slate-600 text-slate-300 leading-tight">{log}</div>))}</div></div>
                        <button onClick={leaveRoom} className="mt-4 text-xs text-slate-500 hover:text-white transition-colors">Exit Room</button>
                    </div>
                    <div className={`flex-1 flex flex-col relative transition-all duration-1000 ${bgAtmosphere}`}>
                        {trapFlash && <div className="absolute inset-0 bg-red-600/60 z-[100] pointer-events-none transition-colors duration-300" style={{ mixBlendMode: 'overlay' }} />}

<div className="p-4 bg-slate-900/50 border-b border-slate-800 flex justify-between items-center z-10">
                            <div><span className="text-xs text-slate-500 font-bold mr-2 uppercase">ROOM CODE</span><span className="font-mono font-bold text-yellow-500 text-lg">{gameData.code}</span></div>
                            <div className="text-center">{(gameData.gameState === 'PLAYING' || gameData.gameState === 'PEEKING' || gameData.gameState === 'ROUND_TRANSITION' || gameData.gameState === 'GAME_ENDING' || gameData.gameState === 'VOTING') && (
                                <div className="px-4 py-1 rounded-full bg-slate-800 border border-slate-700 text-xs font-bold">
                                    <span className="text-slate-400 mr-2 uppercase tracking-widest">
                                        {gameData.gameState === 'PEEKING' ? 'Preparing Round...' : 
                                         gameData.gameState === 'ROUND_TRANSITION' ? 'End of Round' : 
                                         gameData.gameState === 'GAME_ENDING' ? 'Game Over' : 
                                         gameData.gameState === 'VOTING' ? 'Voting' : 'Key Holder:'}
                                    </span>
                                    <span className="text-yellow-400">
                                        {(gameData.gameState === 'PLAYING' || gameData.gameState === 'GAME_ENDING' || gameData.gameState === 'ROUND_TRANSITION') ? (isMyTurn ? 'YOU' : myTurnName) : ''}
                                    </span>
                                </div>
                            )}</div>
                            <div className="flex items-center gap-4"><span className="text-xs text-slate-500 uppercase font-bold">{gameData.players.length} Players</span></div>
                        </div>
                        <div className="flex-1 overflow-y-auto p-8 flex flex-col items-center relative z-10">
                            {gameData.gameState === 'LOBBY' && (
                                <div className="max-w-md w-full text-center space-y-8 mt-10">
                                    <h2 className="text-3xl font-black text-slate-200">The Gathering</h2>
                                    <div className="grid grid-cols-2 gap-4">{gameData.players.map(p => (<div key={p.id} className="p-4 bg-slate-900 rounded-xl border border-slate-800 flex items-center gap-3"><div className="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-xs font-bold">{p.name[0]}</div><span className="font-bold">{p.name} {p.id === playerId ? '(You)' : ''}</span></div>))}</div>
                                    
                                    {gameData.players[0] && gameData.players[0].id === playerId && (
                                        <div className="flex items-center justify-between bg-slate-800 p-4 rounded-xl border border-slate-700 text-left">
                                            <div>
                                                <div className="font-bold text-slate-200">Key Assignment</div>
                                                <div className="text-xs text-slate-400">Round 2+ key holder rule</div>
                                            </div>
                                            <div className="flex bg-slate-900 rounded-lg p-1 border border-slate-700">
                                                <button onClick={() => db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(roomCode).update({ keyMode: 'VOTE' })} className={`px-3 py-2 rounded-md text-xs font-bold transition-all ${gameData.keyMode === 'VOTE' ? 'bg-yellow-500 text-slate-900' : 'text-slate-400 hover:text-white'}`}>VOTE</button>
                                                <button onClick={() => db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(roomCode).update({ keyMode: 'LAST_GOLD' })} className={`px-3 py-2 rounded-md text-xs font-bold transition-all ${gameData.keyMode === 'LAST_GOLD' ? 'bg-yellow-500 text-slate-900' : 'text-slate-400 hover:text-white'}`}>LAST GOLD</button>
                                            </div>
                                        </div>
                                    )}
                                    {gameData.players[0] && gameData.players[0].id !== playerId && (
                                        <div className="text-center text-sm text-slate-500 bg-slate-900 p-3 rounded-xl border border-slate-800">
                                            Round 2+ Key Mode: <span className="font-bold text-slate-300">{gameData.keyMode === 'VOTE' ? 'Vote Every Round' : 'Last Gold Gets Key'}</span>
                                        </div>
                                    )}

{gameData.players[0] && gameData.players[0].id === playerId && (<button onClick={startGame} disabled={gameData.players.length < 3} className="w-full bg-green-600 hover:bg-green-500 disabled:opacity-30 disabled:cursor-not-allowed text-white p-5 rounded-2xl font-black text-xl transition-all shadow-lg">UNSEAL THE TEMPLE</button>)}
                                    <p className="text-slate-500 text-sm italic">Need 3-8 players to start.</p>
                                </div>
                            )}
                            {(gameData.gameState === 'PLAYING' || gameData.gameState === 'PEEKING' || gameData.gameState === 'ROUND_TRANSITION' || gameData.gameState === 'GAME_ENDING' || gameData.gameState === 'VOTING') && (
                                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-10 w-full max-w-6xl pb-20">
                                    {gameData.players.map(p => {
                                        const isCurrentPlayerTurn = gameData.players[gameData.turnIndex]?.id === p.id;
                                        return (
                                            <div key={p.id} className={`p-6 rounded-2xl transition-all relative ${isCurrentPlayerTurn && (gameData.gameState === 'PLAYING' || gameData.gameState === 'GAME_ENDING' || gameData.gameState === 'ROUND_TRANSITION') ? 'bg-slate-800 ring-2 ring-yellow-500 shadow-[0_0_30px_rgba(234,179,8,0.15)]' : 'bg-slate-900 border border-slate-800'}`}>
                                                <div className="flex justify-between items-start mb-6 gap-2">
                                                    <div className="flex items-center gap-3">
                                                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center font-black shrink-0 ${isCurrentPlayerTurn && (gameData.gameState === 'PLAYING' || gameData.gameState === 'GAME_ENDING' || gameData.gameState === 'ROUND_TRANSITION') ? 'bg-yellow-500 text-slate-900' : 'bg-slate-800 text-slate-400'}`}>{p.name[0]}</div>
                                                        <div className="min-w-0">
                                                            <div className="font-black text-sm flex items-center gap-2 truncate">
                                                                {p.name} {p.id === playerId ? '(You)' : ''}
                                                                {isCurrentPlayerTurn && (gameData.gameState === 'PLAYING' || gameData.gameState === 'GAME_ENDING' || gameData.gameState === 'ROUND_TRANSITION') && (
                                                                    <div className="text-yellow-500 animate-pulse flex items-center justify-center shrink-0" title="Has the Key">
                                                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{filter: 'drop-shadow(0 0 5px rgba(234,179,8,0.8))'}}><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>
                                                                    </div>
                                                                )}
                                                                {gameData.gameState === 'PEEKING' && p.isReadyToStart && (<div className="text-green-500 font-black text-[10px] uppercase tracking-wider shrink-0">Ready</div>)}
                                                            </div>
                                                            <div className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">{p.hand.filter(c=>!c.flipped).length} Cards Left</div>
                                                        </div>
                                                    </div>
                                                    
                                                    {/* Built-in Claims UI in top right */}
                                                    {(gameData.gameState === 'PLAYING' || gameData.gameState === 'PEEKING') && (
                                                        <div className="flex flex-col gap-1 items-end shrink-0">
                                                            <div className="flex items-center bg-slate-800 rounded overflow-hidden border border-slate-700 shadow-sm h-6">
                                                                <span className="px-2 py-0.5 bg-slate-900 text-yellow-500 font-black text-[10px] min-w-[32px] text-center">💰 {p.claims?.gold || 0}</span>
                                                                {p.id === playerId && (
                                                                    <div className="flex text-slate-400 h-full">
                                                                        <button className="px-2 hover:bg-slate-700 hover:text-white border-l border-slate-700 font-bold transition-colors text-[10px] flex items-center" onClick={(e) => { e.stopPropagation(); updateClaim('gold', -1); }}>-</button>
                                                                        <button className="px-2 hover:bg-slate-700 hover:text-white border-l border-slate-700 font-bold transition-colors text-[10px] flex items-center" onClick={(e) => { e.stopPropagation(); updateClaim('gold', 1); }}>+</button>
                                                                    </div>
                                                                )}
                                                            </div>
                                                            <div className="flex items-center bg-slate-800 rounded overflow-hidden border border-slate-700 shadow-sm h-6">
                                                                <span className="px-2 py-0.5 bg-slate-900 text-red-500 font-black text-[10px] min-w-[32px] text-center">🔥 {p.claims?.trap || 0}</span>
                                                                {p.id === playerId && (
                                                                    <div className="flex text-slate-400 h-full">
                                                                        <button className="px-2 hover:bg-slate-700 hover:text-white border-l border-slate-700 font-bold transition-colors text-[10px] flex items-center" onClick={(e) => { e.stopPropagation(); updateClaim('trap', -1); }}>-</button>
                                                                        <button className="px-2 hover:bg-slate-700 hover:text-white border-l border-slate-700 font-bold transition-colors text-[10px] flex items-center" onClick={(e) => { e.stopPropagation(); updateClaim('trap', 1); }}>+</button>
                                                                    </div>
                                                                )}
                                                            </div>
                                                        </div>
                                                    )}
                                                </div>
                                                <div className="flex flex-wrap gap-4 justify-center">
                                                    {p.hand.map(card => {
                                                        const showCard = card.flipped || (gameData.gameState === 'PEEKING' && p.id === playerId);
                                                        const isSuspense = gameData.suspenseCard && gameData.suspenseCard.targetPlayerId === p.id && gameData.suspenseCard.cardId === card.id;
                                                        const canFlip = !card.flipped && isMyTurn && p.id !== playerId && gameData.gameState === 'PLAYING' && !gameData.suspenseCard;
                                                        
                                                        return (
                                                            <div key={card.id} className={`card-container w-16 h-24 ${showCard ? 'flipped' : ''} ${isSuspense ? 'anim-heartbeat' : ''} ${canFlip ? 'cursor-pointer hover:scale-110 hover:ring-2 hover:ring-yellow-500 rounded-lg' : ''}`} onClick={() => canFlip && handleCardClick(p.id, card.id, card.type)}>
                                                                <div className="card-inner">
                                                                    <div className="card-back shadow-lg group"><span className="text-[8px] text-slate-600 font-bold tracking-widest group-hover:text-yellow-500/50">SEALED</span></div>
                                                                    <div className={`card-front shadow-xl flex flex-col items-center justify-center ${CARD_TYPES[card.type].color} ${CARD_TYPES[card.type].textColor}`}>
                                                                        <span className="text-[10px] font-black">{CARD_TYPES[card.type].label.split(' ')[0]}</span>
                                                                        <span className="text-[8px] font-black mt-1">{CARD_TYPES[card.type].label.split(' ')[1]}</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        );
                                                    })}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}

{gameData.gameState === 'VOTING' && (
                                <div className="absolute inset-0 bg-slate-950/90 z-50 flex flex-col items-center justify-center p-8 backdrop-blur-md">
                                    <h2 className="text-4xl font-black mb-4 tracking-tighter text-yellow-500">Vote for Key Holder</h2>
                                    <p className="text-slate-400 mb-10 text-xl font-medium">Who should start Round {gameData.round} with the key?</p>
                                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
                                        {gameData.players.map(p => {
                                            const myVote = gameData.votes && gameData.votes[playerId] === p.id;
                                            return (
                                                <button 
                                                    key={p.id} 
                                                    onClick={() => castVote(p.id)}
                                                    className={`p-6 rounded-xl border text-center transition-all ${myVote ? 'bg-yellow-500 text-slate-900 border-yellow-400 shadow-[0_0_15px_rgba(234,179,8,0.5)]' : 'bg-slate-900 text-slate-200 border-slate-700 hover:border-yellow-500/50 hover:bg-slate-800'}`}
                                                >
                                                    <div className="font-black text-lg">{p.name}</div>
                                                    {myVote && <div className="text-xs mt-2 font-bold opacity-75">Your Choice</div>}
                                                </button>
                                            )
                                        })}
                                    </div>
                                    <div className="text-slate-500 text-sm font-bold bg-slate-900 px-6 py-3 rounded-full border border-slate-800">
                                        {gameData.votes ? Object.keys(gameData.votes).length : 0} / {gameData.players.length} players have voted
                                    </div>
                                </div>
                            )}

{gameData.gameState === 'FINISHED' && (
                                <div className="absolute inset-0 bg-slate-950/95 z-50 flex flex-col items-center justify-center p-8 backdrop-blur-md overflow-y-auto">
                                    <div className={`text-6xl font-black mb-2 tracking-tighter drop-shadow-lg ${gameData.winner === 'ADVENTURERS' ? 'text-blue-500' : 'text-red-500'}`}>{gameData.winner} WIN</div>
                                    <p className="text-slate-400 mb-10 text-xl font-medium">The Temple has decided its fate.</p>
                                    
                                    <div className="grid grid-cols-1 md:grid-cols-2 gap-10 w-full max-w-4xl mb-10">
                                        <div className="bg-blue-900/20 p-6 rounded-2xl border border-blue-900/50 shadow-[0_0_30px_rgba(59,130,246,0.1)]">
                                            <h3 className="text-blue-400 font-black text-xl mb-4 text-center tracking-widest">ADVENTURERS</h3>
                                            <div className="flex flex-col gap-3">
                                                {gameData.players.filter(p => p.role === 'ADVENTURER').map(p => (
                                                    <div key={p.id} className="text-slate-200 font-bold text-center bg-slate-900/50 p-3 rounded-lg border border-slate-800">{p.name}</div>
                                                ))}
                                            </div>
                                        </div>
                                        <div className="bg-red-900/20 p-6 rounded-2xl border border-red-900/50 shadow-[0_0_30px_rgba(239,68,68,0.1)]">
                                            <h3 className="text-red-500 font-black text-xl mb-4 text-center tracking-widest">GUARDIANS</h3>
                                            <div className="flex flex-col gap-3">
                                                {gameData.players.filter(p => p.role === 'GUARDIAN').map(p => (
                                                    <div key={p.id} className="text-slate-200 font-bold text-center bg-slate-900/50 p-3 rounded-lg border border-slate-800">{p.name}</div>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                    
                                    {gameData.rematchCode && <div className="mb-6 text-green-400 font-bold animate-pulse text-lg bg-green-900/30 px-6 py-2 rounded-full border border-green-800">A rematch has been started!</div>}
                                    
                                    <div className="flex gap-4">
                                        <button onClick={handleRematch} className="bg-yellow-500 hover:bg-yellow-400 text-slate-950 px-8 py-4 rounded-2xl font-black transition-all shadow-xl">{gameData.rematchCode ? 'JOIN REMATCH' : 'REMATCH'}</button>
                                        <button onClick={leaveRoom} className="bg-slate-700 hover:bg-slate-600 text-white px-8 py-4 rounded-2xl font-black transition-all shadow-xl">LEAVE ROOM</button>
                                    </div>
                                </div>
                            )}
                        </div>
                        {gameData.gameState === 'PEEKING' && (<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 flex flex-col items-center gap-2 z-50"><div className="bg-slate-800/90 backdrop-blur px-6 py-2 rounded-full border border-slate-700 text-xs text-slate-300 shadow-xl">Memorize your cards! They will be shuffled when you start.</div>{!me?.isReadyToStart ? (<button onClick={setPeekReady} className="px-10 py-4 bg-yellow-500 text-slate-950 rounded-2xl font-black shadow-2xl hover:bg-yellow-400 transition-all transform active:scale-95 mt-2">{gameData.round === 1 || gameData.keyMode === 'VOTE' || !gameData.lastGoldFinder ? 'SHUFFLE & GO TO VOTING' : 'SHUFFLE & START ROUND'}</button>) : (<div className="px-10 py-4 bg-slate-700 text-slate-400 rounded-2xl font-black mt-2">WAITING FOR OTHERS...</div>)}</div>)}
                        {gameData.gameState === 'ROUND_TRANSITION' && (<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 px-8 py-4 bg-slate-800 border border-slate-700 text-yellow-400 rounded-2xl font-black shadow-2xl z-50">⌛ ROUND OVER — SHUFFLING IN 3 SECONDS...</div>)}
                        {gameData.gameState === 'GAME_ENDING' && (<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 px-8 py-4 bg-slate-800 border border-slate-700 text-yellow-400 rounded-2xl font-black shadow-2xl z-50">⌛ GAME OVER — REVEALING FATE IN 3 SECONDS...</div>)}
                    </div>
                </div>
            );
        };
        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Cabo - Realtime Multiplayer</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-app-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-auth-compat.js"></script>
    <script src="https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore-compat.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: { 'cabo-green': '#1b4d3e', 'cabo-felt': '#256550', 'card-back': '#b91c1c' },
                    animation: { 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite' }
                }
            }
        }
    </script>
    <style>
        body { background-color: #1b4d3e; color: white; overflow: hidden; touch-action: manipulation; }
        .card-container { perspective: 1000px; }
        .card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; }
        .card-front, .card-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); }
        .card-back { background: repeating-linear-gradient(45deg, #991b1b, #991b1b 10px, #b91c1c 10px, #b91c1c 20px); border: 2px solid white; }
        .card-front { background-color: white; color: black; transform: rotateY(180deg); }
        .flipped .card-inner { transform: rotateY(180deg); }
        #root { height: 100vh; width: 100vw; display: flex; flex-direction: column; }
        .suit-red { color: #dc2626; }
        .suit-black { color: #000000; }
        .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
        .custom-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        // INJECTED CONFIG
        const firebaseConfig = window.parent.__FIREBASE_CONFIG || {
            apiKey: "AIzaSyAm8Ho-QWHM8ZMSmTx7CCbyRpuVdsGZtso",
            authDomain: "cabo-dda9b.firebaseapp.com",
            projectId: "cabo-dda9b",
            storageBucket: "cabo-dda9b.firebasestorage.app",
            messagingSenderId: "84209971314",
            appId: "1:84209971314:web:059b85a4c1ca7df574d2eb",
            measurementId: "G-GQG7K006KE"
        };
        const appId = 'default-cabo-app';

if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }
        const auth = firebase.auth();
        const db = firebase.firestore();

const { useState, useEffect, useRef } = React;
        const FlyingCard = ({ startRect, endRect, card, duration, onComplete, faceUp }) => {
            const [style, setStyle] = useState({ position: 'fixed', top: startRect.top, left: startRect.left, transition: `top ${duration}ms ease-in-out, left ${duration}ms ease-in-out, transform ${duration}ms ease-in-out`, zIndex: 9999, pointerEvents: 'none', transform: 'scale(1)', opacity: 1 });
            useEffect(() => {
                requestAnimationFrame(() => { setStyle(prev => ({ ...prev, top: endRect.top, left: endRect.left, transform: 'scale(1.05)' })); });
                const timer = setTimeout(onComplete, duration);
                return () => clearTimeout(timer);
            }, []);
            return (<div style={style} className="w-16 h-24 sm:w-20 sm:h-28"><div className="card-inner shadow-2xl w-full h-full"><div className="card-back rounded-lg" style={{ backfaceVisibility: faceUp ? 'hidden' : 'visible', zIndex: faceUp ? 0 : 2 }}><span className="text-white text-xs font-bold opacity-50">CABO</span></div><div className="card-front rounded-lg flex flex-col justify-between p-1 bg-white" style={{ transform: faceUp ? 'none' : 'rotateY(180deg)', zIndex: faceUp ? 2 : 0 }}><div className={`text-left font-bold leading-none ${['♥','♦'].includes(card.suit) ? 'text-red-600' : 'text-black'}`}>{card.rank}</div><div className={`text-center text-2xl ${['♥','♦'].includes(card.suit) ? 'text-red-600' : 'text-black'}`}>{card.suit}</div><div className={`text-right font-bold leading-none ${['♥','♦'].includes(card.suit) ? 'text-red-600' : 'text-black'} rotate-180`}>{card.rank}</div></div></div></div>);
        };
        const AnimationsLayer = ({ lastAction, setHiddenSlotIds, playerId }) => {
            const [flyers, setFlyers] = useState([]);
            const lastProcessedRef = useRef(0);
            useEffect(() => {
                if (!lastAction || !lastAction.moves) return;
                if (lastAction.timestamp <= lastProcessedRef.current) return;
                lastProcessedRef.current = lastAction.timestamp;
                const newFlyers = [];
                const idsToHide = [];
                lastAction.moves.forEach((move, i) => {
                    const fromEl = document.getElementById(move.from);
                    const toEl = document.getElementById(move.to);
                    if (fromEl && toEl) {
                        const startRect = fromEl.getBoundingClientRect();
                        const endRect = toEl.getBoundingClientRect();
                        const id = Date.now() + i;
                        const duration = lastAction.isSlap ? 500 : 1000;
                        let showFace = true;
                        if (typeof move.faceUp !== 'undefined') { showFace = move.faceUp; }
                        newFlyers.push({ id, startRect, endRect, card: move.card, duration, toId: move.to, faceUp: showFace });
                        idsToHide.push(move.to);
                    }
                });
                if (newFlyers.length > 0) { setFlyers(prev => [...prev, ...newFlyers]); setHiddenSlotIds(prev => [...prev, ...idsToHide]); }
            }, [lastAction]);
            const removeFlyer = (id, toId) => { setFlyers(prev => prev.filter(f => f.id !== id)); setHiddenSlotIds(prev => prev.filter(hid => hid !== toId)); };
            return (<>{flyers.map(f => (<FlyingCard key={f.id} startRect={f.startRect} endRect={f.endRect} card={f.card} duration={f.duration} faceUp={f.faceUp} onComplete={() => removeFlyer(f.id, f.toId)} />))}</>);
        };
        const Card = ({ id, card, faceUp, onClick, onContextMenu, isSelected, isSelectable, small = false, isPeekable, isEmpty, isHidden, isPeekingAt, className = "m-1" }) => {
            const isEmptySlot = isEmpty || !card;
            const handleContextMenu = (e) => { e.preventDefault(); if (!isHidden && onContextMenu) { onContextMenu(card); } };
            if (isEmptySlot && !isSelectable) { return <div id={id} className={`${small ? 'w-10 h-14' : 'w-16 h-24 sm:w-20 sm:h-28'} border-2 border-white border-opacity-10 rounded-lg ${className}`}></div>; }
            const isRed = card?.suit === '♥' || card?.suit === '♦';
            const baseClass = `card-container cursor-pointer select-none ${className} ${small ? 'w-10 h-14' : 'w-16 h-24 sm:w-20 sm:h-28'}`;
            const selectionClass = isSelected ? 'ring-2 ring-white ring-opacity-60' : '';
            const opacityClass = isHidden ? 'opacity-0' : (isSelectable || isPeekable ? 'opacity-100 hover:scale-105' : 'opacity-100');
            const peekClass = isPeekable ? 'ring-2 ring-green-400 animate-pulse' : '';
            const content = isEmptySlot ? (<div className="w-full h-full rounded-lg border-2 border-dashed border-white border-opacity-30 bg-black bg-opacity-20 flex items-center justify-center"><span className="text-xs text-gray-500">Empty</span></div>) : (<div className="card-inner shadow-lg rounded-lg"><div className="card-back rounded-lg"><span className="text-white text-xs font-bold opacity-50">CABO</span>{isPeekingAt && !faceUp && (<div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg"><div className="text-2xl">👁️</div></div>)}</div><div className="card-front rounded-lg flex flex-col justify-between p-1 bg-white"><div className={`text-left font-bold leading-none ${isRed ? 'text-red-600' : 'text-black'}`}>{card.rank}</div><div className={`card-symbol ${small ? 'text-sm' : 'text-2xl'} ${isRed ? 'text-red-600' : 'text-black'}`}>{card.suit}</div><div className={`text-right font-bold leading-none ${isRed ? 'text-red-600' : 'text-black'} rotate-180`}>{card.rank}</div></div></div>);
            return (<div id={id} className={`${baseClass} ${selectionClass} ${opacityClass} ${peekClass} ${faceUp ? 'flipped' : ''}`} onClick={() => !isHidden && (isSelectable || isPeekable || onClick) && onClick && onClick(card)} onContextMenu={handleContextMenu}>{content}</div>);
        };

useEffect(() => {
                const initAuth = async () => { await auth.signInAnonymously(); };
                const unsubscribe = auth.onAuthStateChanged((u) => { if (u) { setUser(u); setView('LOBBY'); } else { initAuth(); } });
                return () => unsubscribe();
            }, []);
            useEffect(() => {
                if (view !== 'GAME') return;
                const handleBeforeUnload = () => { leaveLobby(); };
                window.addEventListener('beforeunload', handleBeforeUnload);
                return () => { window.removeEventListener('beforeunload', handleBeforeUnload); leaveLobby(); };
            }, [view, roomCode]);
            useEffect(() => {
                if (!user || !roomCode || view !== 'GAME') return;
                const docRef = db.collection('artifacts').doc(appId).collection('public').doc('data').collection('lobbies').doc(roomCode.toUpperCase());
                const unsubscribe = docRef.onSnapshot((doc) => {
                    if (doc.exists) { const data = doc.data(); setGameData(data); if (data.settings) setSettings(data.settings); } else { setError("Room closed or does not exist."); setView('LOBBY'); }
                }, (err) => { console.error("Firestore error:", err); setError("Connection lost."); });
                return () => unsubscribe();
            }, [user, roomCode, view]);

if (!user) return <div className="h-screen flex items-center justify-center text-white">Loading Auth...</div>;
            if (view === 'LOBBY') { return ( <div className="h-screen flex items-center justify-center bg-cabo-green p-4 gap-8"> <div className="bg-black bg-opacity-30 p-6 rounded-lg text-white w-64 h-96 overflow-y-auto hidden sm:block"> <h2 className="text-xl font-bold mb-4 border-b pb-2">Game Settings</h2> <div className="mb-4"> <label className="block text-xs uppercase mb-1">Decks</label> <input type="number" min="1" max="3" className="w-full p-2 rounded text-black" value={settings.deckCount} onChange={e => setSettings({...settings, deckCount: parseInt(e.target.value)})} /> </div> <div className="mb-4"> <label className="block text-xs uppercase mb-1">Joker Val</label> <input type="number" className="w-full p-2 rounded text-black" value={settings.jokerValue} onChange={e => setSettings({...settings, jokerValue: e.target.value})} /> </div> <div className="mb-4"> <label className="block text-xs uppercase mb-1">Red King Val</label> <input type="number" className="w-full p-2 rounded text-black" value={settings.redKingValue} onChange={e => setSettings({...settings, redKingValue: e.target.value})} /> </div> </div> <div className="flex flex-col items-center"> <h1 className="text-6xl font-bold mb-8 text-yellow-400 font-mono tracking-tighter">CABO</h1> <div className="bg-white text-gray-800 p-6 rounded-lg shadow-xl w-full max-w-sm"> <input className="w-full p-3 mb-4 border-2 border-gray-300 rounded focus:border-cabo-green outline-none" placeholder="Your Name" value={playerName} onChange={e => setPlayerName(e.target.value)} /> <div className="flex gap-2 mb-4"> <input className="flex-1 p-3 border-2 border-gray-300 rounded uppercase font-mono" placeholder="Room Code" value={roomCode} onChange={e => setRoomCode(e.target.value)} maxLength={4} /> <button onClick={joinLobby} className="bg-blue-600 text-white px-6 rounded font-bold hover:bg-blue-700">JOIN</button> </div> <button onClick={createLobby} className="w-full bg-cabo-green text-white p-3 rounded font-bold hover:bg-cabo-felt mt-2">CREATE ROOM</button> {error && <p className="text-red-500 text-center mt-4 text-sm font-bold">{error}</p>} </div> </div> </div> ); }
            if (!gameData) return <div className="h-screen flex items-center justify-center">Loading Game...</div>;
            const myPlayer = getMyPlayer();
            const myTurn = isMyTurn();
            const phase = gameData.turnState;
            const leaderboardData = [ ...gameData.players, ...(gameData.leaderboardHistory || []).filter(h => !gameData.players.find(p => p.id === h.id)) ];
            const deckCount = gameData.deck.length;
            const showDeckCount = deckCount <= 5;
            const deckEmpty = deckCount === 0;

return (
                <div className="h-screen flex flex-row bg-cabo-green select-none overflow-hidden">
                    <AnimationsLayer lastAction={gameData.lastAction} setHiddenSlotIds={setHiddenSlotIds} playerId={playerId} />
                    <div className="w-48 bg-black bg-opacity-40 border-r border-gray-700 flex flex-col hidden sm:flex text-white p-2">
                        <div className="text-center font-bold border-b border-gray-600 pb-2 mb-2 text-yellow-400">LEADERBOARD</div>
                        <div className="mb-4">
                            <div className="text-xs font-bold text-gray-400 uppercase mb-1">Total Points</div>
                            {leaderboardData.slice().sort((a,b) => (a.totalScore||0) - (b.totalScore||0)).map(p => (<div key={p.id} className={`flex justify-between text-sm mb-1 ${!gameData.players.find(ap=>ap.id===p.id) ? 'opacity-50 italic' : ''}`}><span>{p.name}</span><span className="font-mono">{p.totalScore || 0}</span></div>))}
                        </div>
                        <div>
                            <div className="text-xs font-bold text-gray-400 uppercase mb-1">Wins</div>
                            {leaderboardData.slice().sort((a,b) => (b.wins||0) - (a.wins||0)).map(p => (<div key={p.id} className={`flex justify-between text-sm mb-1 ${!gameData.players.find(ap=>ap.id===p.id) ? 'opacity-50 italic' : ''}`}><span>{p.name}</span><span className="font-mono text-yellow-300">{p.wins || 0}</span></div>))}
                        </div>
                    </div>
                    <div className="flex-1 flex flex-col relative h-full">
                        <div className="flex justify-between items-center p-2 bg-black bg-opacity-20 text-xs sm:text-sm">
                            <div className="font-mono text-yellow-400">ROOM: {gameData.roomCode}</div>
                            <div className="text-gray-200"> {gameData.gameState === 'LOBBY' ? 'Waiting...' : gameData.gameState === 'INITIAL_PEEK' ? 'Initial Peek Phase' : `Turn: ${gameData.players[gameData.turnIndex].name}`} </div>
                            <div className="flex gap-2"><button onClick={() => setShowHelp(true)} className="text-yellow-400 hover:text-white font-bold border border-yellow-400 rounded px-2">Rules</button><button onClick={() => { leaveLobby(); setView('LOBBY'); }} className="text-red-300 hover:text-white">Exit</button></div>
                        </div>
                        {notification && ( <div className="absolute top-12 left-1/2 transform -translate-x-1/2 bg-yellow-500 text-black px-4 py-2 rounded-full shadow-lg z-50 font-bold animate-bounce"> {notification} </div> )}
                        <div className="flex-1 flex flex-wrap justify-center items-start content-start p-2 gap-4 overflow-y-auto">
                            {gameData.players.map((p, pIdx) => {
                                if (p.id === playerId) return null;
                                return (
                                    <div key={p.id} className={`flex flex-col items-center bg-black bg-opacity-10 rounded p-2 transition-all duration-700 ${p.waitingForNextRound ? 'opacity-50 grayscale' : ''} ${gameData.turnIndex === pIdx && gameData.gameState === 'PLAYING' ? 'border-2 border-yellow-400' : ''}`}>
                                        <div className="grid grid-rows-2 grid-flow-col gap-1">
                                            {p.hand.map((card, cIdx) => ( <Card key={cIdx} id={`slot-${p.id}-${cIdx}`} card={card} isEmpty={!card} faceUp={gameData.gameState === 'ROUND_OVER' || (card && localRevealed[card.id])} small={true} isSelectable={true} isHidden={hiddenSlotIds.includes(`slot-${p.id}-${cIdx}`)} isPeekingAt={gameData.publicPeek && gameData.publicPeek.targetPlayerId === p.id && gameData.publicPeek.cardIndex === cIdx} isSelected={(selectedCard?.ownerId === p.id && selectedCard?.index === cIdx)} onClick={() => handleCardClick(card, p.id, cIdx)} onContextMenu={() => handleCardSlap(card, p.id, cIdx)} /> ))}
                                        </div>
                                        <div className="text-xs mt-1 font-bold text-gray-300"> {p.name} {p.id === gameData.caboCaller && <span className="ml-1 text-yellow-400">⚠ CABO</span>} {p.waitingForNextRound && <span className="block text-xs text-yellow-500">(Spectating)</span>}</div>
                                    </div>
                                );
                            })}
                        </div>
                        <div className="grid grid-cols-3 gap-8 w-full max-w-md mx-auto my-2 h-32 sm:h-40">
                            <div className="flex justify-center items-start pt-8">
                                {!deckEmpty && (
                                    <div id="slot-DECK" className={`relative w-full h-full flex justify-center items-center ${myTurn && phase === 'WAITING_FOR_DRAW' && gameData.gameState === 'PLAYING' ? 'cursor-pointer animate-pulse-slow' : 'opacity-80'}`} onClick={() => drawCard('DECK')}>
                                        <div className="w-16 h-24 sm:w-20 sm:h-28 m-0 bg-red-900 rounded-lg border-2 border-white flex items-center justify-center shadow-xl"> <div className="w-12 h-20 border border-white border-dashed opacity-30 rounded"></div> </div>
                                        {showDeckCount && <span className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-3xl font-bold text-white drop-shadow-md z-10 pointer-events-none">{deckCount}</span>}
                                        <span className="absolute -bottom-5 w-full text-center text-xs font-bold text-gray-300">DRAW</span>
                                    </div>
                                )}
                            </div>
                            <div className="flex justify-center items-start relative pt-8">
                                <div id="slot-ACTIVE" className="relative w-16 h-24 sm:w-20 sm:h-28 m-0 flex justify-center items-center"> {gameData.pendingCard && ( <div className="z-10 transform scale-110"> <Card card={gameData.pendingCard} faceUp={myTurn || gameData.pendingCard.source === 'DISCARD'} isSelectable={false} isHidden={hiddenSlotIds.includes('slot-ACTIVE')} className="m-0" /> </div> )} </div>
                            </div>
                            <div className="flex justify-center items-start pt-8">
                                <div id="slot-DISCARD" className={`relative w-full h-full flex justify-center items-center ${myTurn && phase === 'WAITING_FOR_DRAW' && gameData.gameState === 'PLAYING' ? 'cursor-pointer' : ''}`} onClick={() => drawCard('DISCARD')}> {gameData.discardPile.length > 0 ? ( <Card card={gameData.discardPile[gameData.discardPile.length - 1]} faceUp={true} isSelectable={false} isHidden={hiddenSlotIds.includes('slot-DISCARD')} className="m-0" /> ) : ( <div className="w-16 h-24 border-2 border-white border-opacity-20 rounded-lg m-0"></div> )} <span className="absolute -bottom-5 w-full text-center text-xs font-bold text-gray-300">DISCARD</span> </div>
                            </div>
                        </div>
                        <div className="flex flex-col items-center justify-end pb-2 bg-gradient-to-t from-black via-transparent to-transparent pt-2">
                            {gameData.gameState === 'LOBBY' && ( <div className="mb-4 flex flex-col items-center"> <p className="mb-2 text-lg">Waiting for players... ({gameData.players.length}/6)</p> {!myPlayer.isReady ? ( <button onClick={toggleReady} className="bg-yellow-500 text-black px-8 py-3 rounded-lg font-bold shadow-lg animate-bounce">READY UP</button> ) : ( <button onClick={toggleReady} className="bg-gray-500 text-white px-8 py-2 rounded-lg font-bold">CANCEL READY</button> )} </div> )}
                            {gameData.gameState === 'INITIAL_PEEK' && ( <div className="mb-4 flex flex-col items-center gap-2"> <p>Peek your BOTTOM cards (Odd Indices). When done, click Ready.</p> <div className="flex gap-4"> {myPlayer.peekedIndices.length >= 2 && !myPlayer.isReady && ( <button onClick={setInitialPeekReady} className="bg-green-500 text-white px-8 py-3 rounded-lg font-bold shadow-lg animate-bounce">I'M READY TO PLAY</button> )} {myPlayer.isReady && <span className="text-green-400 font-bold">Waiting for others...</span>} </div> </div> )}
                            {gameData.gameState === 'ROUND_OVER' && ( <div className="mb-4"> <button onClick={startGameRound} className="bg-yellow-400 text-black px-6 py-2 rounded font-bold shadow-lg">NEXT ROUND</button> </div> )}
                            {gameData.gameState !== 'LOBBY' && (
                                <div className={`flex flex-col items-center w-full max-w-full overflow-x-auto hand-scroll rounded p-2 ${myTurn && gameData.gameState === 'PLAYING' ? 'border-2 border-yellow-400 bg-white bg-opacity-5' : ''}`}>
                                    <div className="h-8 mb-2 flex items-center gap-4"> {interactionMode === 'WAITING_PEEK' && <span className="text-yellow-400 animate-pulse font-bold">Peeking... (Wait 3s)</span>} {gameData.gameState === 'ROUND_ENDING' && <span className="text-red-400 animate-pulse font-bold">Round Ending... Last Chance to Slap! (8s)</span>} </div> <div className="grid grid-rows-2 grid-flow-col gap-2 sm:gap-4 px-4 pb-2"> {myPlayer.hand.map((card, idx) => ( <Card key={idx} id={`slot-${playerId}-${idx}`} card={card} isEmpty={!card} faceUp={gameData.gameState === 'ROUND_OVER' || (card && localRevealed[card.id])} isSelected={selectedCard?.ownerId === playerId && selectedCard?.index === idx} isPeekable={gameData.gameState === 'INITIAL_PEEK' && idx % 2 !== 0 && !myPlayer.peekedIndices.includes(idx)} isSelectable={true} isHidden={hiddenSlotIds.includes(`slot-${playerId}-${idx}`)} isPeekingAt={gameData.publicPeek && gameData.publicPeek.targetPlayerId === playerId && gameData.publicPeek.cardIndex === cIdx} onClick={() => handleCardClick(card, playerId, idx)} onContextMenu={() => handleCardSlap(card, playerId, idx)} /> ))} </div> <div className="text-sm mt-2 font-bold text-yellow-400"> {myPlayer.name} {myPlayer.waitingForNextRound && "(Spectating)"} </div>
                                </div>
                            )}
                        </div>
                        <div className="absolute bottom-6 right-6 flex flex-col gap-2 z-50 items-end">
                            {myTurn && phase === 'DECIDING_KEEP_DISCARD' && ( <div className="flex gap-2 mb-2"> <button onClick={() => handleDecision('KEEP')} className="bg-blue-600 text-white px-6 py-3 rounded-lg font-bold shadow-lg border-2 border-white hover:bg-blue-700">KEEP</button> <button onClick={() => handleDecision('DISCARD')} className="bg-red-600 text-white px-6 py-3 rounded-lg font-bold shadow-lg border-2 border-white hover:bg-red-700">DISCARD</button> </div> )}
                            {myTurn && (interactionMode === 'SWAP_INIT' || interactionMode === 'SWAP_SELECT_TARGET') && ( <button onClick={() => { setInteractionMode('NONE'); finishTurn({ logs: [...gameData.logs, `${getPlayerName(playerId)} skipped swap.`] }); }} className="bg-gray-600 text-white px-6 py-3 rounded-lg font-bold shadow-lg border-2 border-white hover:bg-gray-700">SKIP SWAP</button> )}
                            {myTurn && phase === 'WAITING_FOR_DRAW' && !gameData.caboCaller && gameData.gameState === 'PLAYING' && ( <button onClick={callCabo} className="bg-pink-600 text-white px-6 py-3 rounded-lg font-bold shadow-lg border-2 border-white hover:bg-pink-700">CALL CABO</button> )}
                        </div>
                    </div>
                    {showHelp && ( <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-80 p-4" onClick={() => setShowHelp(false)}> <div className="bg-cabo-felt border-2 border-yellow-400 rounded-lg p-6 max-w-lg w-full max-h-[90vh] overflow-y-auto text-white shadow-2xl relative" onClick={e => e.stopPropagation()}> <button className="absolute top-2 right-2 text-gray-400 hover:text-white text-xl" onClick={() => setShowHelp(false)}>✕</button> <h2 className="text-2xl font-bold text-yellow-400 mb-4 text-center border-b border-gray-600 pb-2">How to Play Cabo</h2> <div className="space-y-4 text-sm"> <section> <h3 className="font-bold text-yellow-200">Objective</h3> <p>Have the lowest total score when the round ends.</p> </section> <section> <h3 className="font-bold text-yellow-200">Turn Actions</h3> <ul className="list-disc pl-5 space-y-1"> <li><strong>Draw from Deck:</strong> Keep (swap with one of yours) or Discard immediately. If you discard a power card, the power activates.</li> <li><strong>Draw from Discard:</strong> You MUST swap it with one of your cards. The swapped card goes to discard face up.</li> </ul> </section> <section> <h3 className="font-bold text-yellow-200">Card Powers (On Discard)</h3> <ul className="list-disc pl-5 space-y-1"> <li><strong>7 & 8:</strong> Peek one of your own cards.</li> <li><strong>9 & 10:</strong> Peek ANY card (yours or opponent's).</li> <li><strong>J & Q:</strong> Swap ANY two cards on the table.</li> <li><strong>Black Kings (♠/♣):</strong> Look at 2 cards, then Swap 2 cards.</li> </ul> </section> <section> <h3 className="font-bold text-yellow-200">Slapping</h3> <p>Right-click any card to slap it! If it matches the top discard card, it's discarded. If you're wrong, you take a penalty card.</p> </section> <section> <h3 className="font-bold text-yellow-200">Calling Cabo</h3> <p>If you think you have the lowest score, call CABO. Everyone else gets one more turn. Lowest score wins (0 pts). If caller isn't lowest, they get +10 penalty.</p> </section> </div> <button className="w-full mt-6 bg-yellow-500 text-black font-bold py-2 rounded hover:bg-yellow-400" onClick={() => setShowHelp(false)}>Close</button> </div> </div> )}
                    <div className="w-64 bg-black bg-opacity-40 border-l border-gray-700 flex flex-col hidden sm:flex"> <div className="p-2 border-b border-gray-600 font-bold text-center">GAME LOG</div> <div className="flex-1 overflow-y-auto p-2 text-xs font-mono custom-scroll"> {gameData.logs.slice().reverse().map((log, i) => ( <div key={i} className="mb-1 border-b border-gray-600 border-opacity-30 pb-1">{log}</div> ))} </div> <div className="p-4 bg-cabo-felt border-t border-gray-600"> <h3 className="font-bold mb-2 text-yellow-400 text-center">INSTRUCTIONS</h3> <div className="text-xs space-y-2"> {gameData.gameState === 'INITIAL_PEEK' && <p>Click your bottom 2 cards to peek. Then click Ready.</p>} {myTurn && interactionMode === 'NONE' && <p>Draw a card from Deck or Discard.</p>} {myTurn && interactionMode === 'PEEK_OWN' && <p>Click YOUR card to reveal (3s).</p>} {myTurn && interactionMode === 'PEEK_ANY' && <p>Click ANY card (Yours or Opponent) to reveal (3s).</p>} {myTurn && interactionMode === 'KING_PEEK_ANY' && <p>King Power: Peek at ANY 2 cards. Then Swap.</p>} {myTurn && interactionMode === 'SWAP_INIT' && <p>Select FIRST card to swap (Any card).</p>} {myTurn && interactionMode === 'SWAP_SELECT_TARGET' && <p>Select SECOND card to swap with.</p>} {interactionMode === 'SLAP_GIVE_CARD' && <p className="text-red-400 font-bold">Slap Success! Select one of your cards to give to opponent.</p>} {interactionMode === 'SWAP_OWN_WITH_DRAWN' && <p className="text-blue-400 font-bold">Select a slot (card or empty) to place the drawn card.</p>} {gameData.gameState === 'PLAYING' && <p className="opacity-50 mt-2 border-t pt-2">Tip: Right-click any card to SLAP match with discard!</p>} </div> </div> </div>
                </div>
            );
        };
        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>