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>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AHTS Ship Simulator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: 'Inter', sans-serif; overflow: hidden; background-color: #f8fafc; margin: 0; }
        
        /* Standard Horizontal Slider Styles */
        input[type=range] {
            -webkit-appearance: none;
            background: transparent;
            outline: none;
        }

/* Track with 0% center tick mark */
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px;
            /* Draws a dark vertical line exactly at 50% */
            background: linear-gradient(90deg, transparent 49%, #475569 49%, #475569 51%, transparent 51%), #cbd5e1;
            border-radius: 4px;
            border: 1px solid #94a3b8;
        }
        input[type=range]::-moz-range-track {
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, transparent 49%, #475569 49%, #475569 51%, transparent 51%), #cbd5e1;
            border-radius: 4px;
            border: 1px solid #94a3b8;
        }

/* Thumb */
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #38bdf8;
            cursor: pointer;
            margin-top: -7px; /* Offset to center on track */
            box-shadow: 0 0 5px rgba(56, 189, 248, 0.4);
            border: 2px solid #0284c7;
            position: relative;
            z-index: 10;
        }
        input[type=range]::-moz-range-thumb {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #38bdf8;
            cursor: pointer;
            box-shadow: 0 0 5px rgba(56, 189, 248, 0.4);
            border: 2px solid #0284c7;
            position: relative;
            z-index: 10;
        }

/* Custom wrapper for perfect vertical sliders */
        .v-slider-wrapper {
            position: relative;
            width: 30px; 
            height: 160px;
        }
        .v-slider-rotated {
            position: absolute;
            width: 160px;  /* Matches wrapper height */
            height: 30px; /* Matches wrapper width */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            z-index: 5;
        }

.ctrl-label {
            font-family: monospace;
            font-weight: bold;
            color: #0369a1;
            pointer-events: none;
            text-align: center;
            z-index: 20;
            background: rgba(255,255,255,0.7);
            padding: 0 4px;
            border-radius: 4px;
        }

.joy-container { touch-action: none; }
        
        /* Canvas overlay styling */
        .glass-panel {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(203, 213, 225, 0.8);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="h-screen w-screen relative text-slate-800">

<canvas id="sim-canvas" class="absolute inset-0 w-full h-full z-0 block"></canvas>
        
    <div class="absolute top-4 left-4 glass-panel p-4 rounded-lg z-10 w-56 font-mono text-sm border-t-2 border-t-sky-500 pointer-events-none">
        <div class="text-slate-500 font-bold mb-3 border-b border-slate-300 pb-2 text-xs tracking-widest uppercase">Dynamics</div>
        <div class="flex justify-between mb-1"><span>X POS:</span> <span id="tel-x" class="text-sky-700 font-bold">0.0 m</span></div>
        <div class="flex justify-between mb-1"><span>Y POS:</span> <span id="tel-y" class="text-sky-700 font-bold">0.0 m</span></div>
        <div class="flex justify-between mb-1"><span>HDG:</span> <span id="tel-hdg" class="text-emerald-700 font-bold">0.0°</span></div>
        <div class="flex justify-between mb-1 mt-3 border-t border-slate-300 pt-2"><span>SOG:</span> <span id="tel-sog" class="text-amber-600 font-bold">0.0 kn</span></div>
        <div class="flex justify-between"><span>ROT:</span> <span id="tel-rot" class="text-orange-600 font-bold">0.0°/m</span></div>
    </div>
        
    <div class="absolute top-4 right-4 glass-panel p-4 rounded-lg z-20 w-[420px]">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-base font-black tracking-widest text-slate-800 uppercase">Operator Desk</h1>
            
            <div class="flex items-center gap-2 bg-white px-3 py-1.5 rounded border border-slate-300 shadow-sm">
                <span class="text-[10px] font-bold text-slate-500 tracking-wider">SIM SPEED</span>
                <input type="range" id="ctrl-sim-speed" min="1" max="5" value="1" step="1" class="w-16">
                <span id="lbl-sim-speed" class="text-sky-600 font-mono text-xs font-bold w-4 text-right">1x</span>
            </div>
        </div>

<div class="flex rounded-md overflow-hidden border border-slate-300 shadow-sm">
            <button id="tab-simulator" class="flex-1 py-2 bg-slate-300 text-slate-800 font-bold text-xs uppercase tracking-wider transition-colors">Simulator</button>
            <button id="tab-chair" class="flex-1 py-2 bg-white text-slate-500 hover:bg-slate-50 hover:text-slate-800 font-bold text-xs uppercase tracking-wider transition-colors">Chair Controls</button>
        </div>

<button id="btn-reset" class="w-full mt-4 p-2 bg-red-100 hover:bg-red-200 text-red-700 font-black text-xs uppercase tracking-[0.2em] transition-colors border border-red-300 rounded shadow-sm">
            Emergency All Stop
        </button>
    </div>

<div class="absolute top-[26%] left-1/2 transform -translate-x-1/2 flex flex-col items-center">
                <div class="text-[9px] text-slate-600 font-bold mb-1 tracking-wider uppercase bg-white/80 px-2 rounded">Azimuth</div>
                <div class="joy-container w-16 h-16 rounded-full border border-slate-400 bg-slate-100 cursor-crosshair shadow-inner relative">
                    <div class="joy-knob absolute w-4 h-4 bg-red-500 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none z-10 shadow-md"></div>
                    <div class="absolute top-0 bottom-0 left-1/2 w-px bg-slate-300 pointer-events-none"></div>
                    <div class="absolute left-0 right-0 top-1/2 h-px bg-slate-300 pointer-events-none"></div>
                </div>
            </div>

<div id="panel-chair-left" class="hidden absolute bottom-6 left-6 glass-panel rounded-xl p-6 z-10 flex gap-6 items-end transition-opacity shadow-2xl">
        <div class="flex flex-col gap-6 w-40">
            <div class="bg-white border border-slate-300 rounded-lg p-4 flex flex-col items-center shadow-md">
                <div class="text-[10px] text-slate-500 font-bold mb-3 tracking-widest text-center">BOW TUNNEL</div>
                <span class="ctrl-label in-bt-lbl text-[12px] mb-2">0%</span>
                <input type="range" class="in-bt w-full" min="-100" max="100" value="0">
            </div>
            <div class="bg-white border border-slate-300 rounded-lg p-4 flex flex-col items-center shadow-md">
                <div class="text-[10px] text-slate-500 font-bold mb-3 tracking-widest text-center">STERN TUNNEL</div>
                <span class="ctrl-label in-st-lbl text-[12px] mb-2">0%</span>
                <input type="range" class="in-st w-full" min="-100" max="100" value="0">
            </div>
        </div>

<div class="bg-white border border-slate-300 rounded-lg p-6 flex flex-col items-center shadow-md h-full justify-center w-48">
            <div class="text-[11px] text-slate-500 font-bold mb-6 tracking-widest text-center">BOW AZIMUTH</div>
            <div class="joy-container w-32 h-32 rounded-full border border-slate-300 bg-slate-50 cursor-crosshair shadow-inner relative">
                <div class="absolute inset-[25%] rounded-full border border-slate-300/60 pointer-events-none"></div>
                <div class="absolute inset-[50%] rounded-full border border-slate-300/40 pointer-events-none"></div>
                <div class="absolute top-0 bottom-0 left-1/2 w-px bg-slate-200 pointer-events-none"></div>
                <div class="absolute left-0 right-0 top-1/2 h-px bg-slate-200 pointer-events-none"></div>
                
                <div class="joy-knob absolute w-6 h-6 bg-red-500 rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none z-10 shadow-md border border-red-400"></div>
            </div>
        </div>
    </div>

<div id="panel-chair-right" class="hidden absolute bottom-6 right-6 glass-panel rounded-xl p-6 z-10 flex gap-6 items-end transition-opacity shadow-2xl">
        <div class="bg-white border border-slate-300 rounded-lg p-4 flex flex-col items-center shadow-md w-32">
            <div class="text-[10px] text-slate-500 font-bold mb-2 tracking-widest text-center">PORT MAIN</div>
            <span class="ctrl-label in-port-pwr-lbl text-[11px] mb-4">0%</span>
            <div class="v-slider-wrapper mb-4">
                <input type="range" class="in-port-pwr v-slider-rotated" min="-100" max="100" value="0">
            </div>
            <div class="w-full h-px bg-slate-200 my-3"></div>
            <div class="text-[9px] text-slate-500 font-bold mb-3 tracking-widest">PORT RUDDER</div>
            <input type="range" class="in-port-rud w-full" min="-45" max="45" value="0">
            <span class="ctrl-label in-port-rud-lbl text-[10px] mt-2 text-emerald-600">0°</span>
        </div>

<div class="bg-white border border-slate-300 rounded-lg p-4 flex flex-col items-center shadow-md w-32">
            <div class="text-[10px] text-slate-500 font-bold mb-2 tracking-widest text-center">STBD MAIN</div>
            <span class="ctrl-label in-stbd-pwr-lbl text-[11px] mb-4">0%</span>
            <div class="v-slider-wrapper mb-4">
                <input type="range" class="in-stbd-pwr v-slider-rotated" min="-100" max="100" value="0">
            </div>
            <div class="w-full h-px bg-slate-200 my-3"></div>
            <div class="text-[9px] text-slate-500 font-bold mb-3 tracking-widest">STBD RUDDER</div>
            <input type="range" class="in-stbd-rud w-full" min="-45" max="45" value="0">
            <span class="ctrl-label in-stbd-rud-lbl text-[10px] mt-2 text-emerald-600">0°</span>
        </div>
    </div>

// Forces (Max output in Newtons)
        const F_MAIN_MAX = 500000;  // 500kN per shaft
        const F_TUN_MAX = 150000;   // 150kN per tunnel
        const F_AZI_MAX = 200000;   // 200kN azimuth

// Drag Coefficients
        // Surge & Sway (Lateral/Forward) remains perfectly heavy
        const DRAG_SURGE_QUAD = 120000; 
        const DRAG_SURGE_LIN = 40000;   
        const DRAG_SWAY_QUAD = 800000;  
        const DRAG_SWAY_LIN = 150000;   
        
        // Yaw (Rotational) Drag drastically reduced so the vessel can spin much faster on its axis
        const DRAG_YAW_QUAD = 1.2e10;   // Lowered to allow higher max ROT
        const DRAG_YAW_LIN = 3.0e8;     // Lowered to allow higher max ROT

// Position from Center of Gravity (Local Ship Coordinates)
        const P_BOW = 30;     
        const P_STERN = -35;  
        const P_AZI = 25;     
        const P_MAIN_Y = 4;

// --- State Objects ---
        const vessel = {
            x: 0, y: 0, heading: 0, 
            u: 0, v: 0, r: 0,       
            track: []               
        };

const prop = {
            bowTunnel: { cmd: 0, fb: 0, rate: 8 },
            sternTunnel: { cmd: 0, fb: 0, rate: 8 },
            azimuth: { cmdPwr: 0, fbPwr: 0, cmdAng: 0, fbAng: 0, ratePwr: 8, rateAng: 0.5 }, 
            portShaft: { cmd: 0, fb: 0, rate: 5 },
            stbdShaft: { cmd: 0, fb: 0, rate: 5 },
            portRudder: { cmd: 0, fb: 0, rate: 2 },
            stbdRudder: { cmd: 0, fb: 0, rate: 2 }
        };

const simForces = {
            bt: {x: 0, y: 0}, st: {x: 0, y: 0}, azi: {x: 0, y: 0},
            port: {x: 0, y: 0}, stbd: {x: 0, y: 0}
        };

let simSpeed = 1;
        let lastTime = 0;
        let breadcrumbTimer = 0;

// --- UI Binding Logic ---
        function bindSyncSlider(baseClass, targetObj, targetProp, isAngle=false) {
            const inputs = document.querySelectorAll(`.${baseClass}`);
            const labels = document.querySelectorAll(`.${baseClass}-lbl`);
            
            inputs.forEach(input => {
                input.addEventListener('input', (e) => {
                    let val = parseFloat(e.target.value);
                    const max = parseFloat(e.target.max);
                    
                    // Snap to 0 if within 5% of max value
                    if (Math.abs(val) <= max * 0.05) {
                        val = 0;
                    }
                    
                    e.target.value = val; // Force UI thumb snap
                    targetObj[targetProp] = val;
                    
                    // Sync all sibling inputs & labels
                    inputs.forEach(other => { if (other !== input) other.value = val; });
                    labels.forEach(lbl => { lbl.innerText = val + (isAngle ? '°' : '%'); });
                });
            });
        }

bindSyncSlider('in-bt', prop.bowTunnel, 'cmd');
        bindSyncSlider('in-st', prop.sternTunnel, 'cmd');
        bindSyncSlider('in-port-pwr', prop.portShaft, 'cmd');
        bindSyncSlider('in-stbd-pwr', prop.stbdShaft, 'cmd');
        bindSyncSlider('in-port-rud', prop.portRudder, 'cmd', true);
        bindSyncSlider('in-stbd-rud', prop.stbdRudder, 'cmd', true);

// Simulation Speed
        document.getElementById('ctrl-sim-speed').addEventListener('input', (e) => {
            simSpeed = parseInt(e.target.value);
            document.getElementById('lbl-sim-speed').innerText = simSpeed + 'x';
        });

// Tabs Toggle Logic
        const tabSim = document.getElementById('tab-simulator');
        const tabChair = document.getElementById('tab-chair');
        const panelMimic = document.getElementById('panel-mimic');
        const panelChairLeft = document.getElementById('panel-chair-left');
        const panelChairRight = document.getElementById('panel-chair-right');

tabSim.addEventListener('click', () => {
            panelMimic.classList.remove('hidden');
            panelChairLeft.classList.add('hidden');
            panelChairRight.classList.add('hidden');
            
            tabSim.classList.replace('bg-white', 'bg-slate-300');
            tabSim.classList.replace('text-slate-500', 'text-slate-800');
            tabChair.classList.replace('bg-slate-300', 'bg-white');
            tabChair.classList.replace('text-slate-800', 'text-slate-500');
        });

tabChair.addEventListener('click', () => {
            panelChairLeft.classList.remove('hidden');
            panelChairRight.classList.remove('hidden');
            panelMimic.classList.add('hidden');
            
            tabChair.classList.replace('bg-white', 'bg-slate-300');
            tabChair.classList.replace('text-slate-500', 'text-slate-800');
            tabSim.classList.replace('bg-slate-300', 'bg-white');
            tabSim.classList.replace('text-slate-800', 'text-slate-500');
        });

// --- Azimuth Joystick Logic ---
        const joyContainers = document.querySelectorAll('.joy-container');
        const joyKnobs = document.querySelectorAll('.joy-knob');
        let activeJoyIndex = -1;

joyContainers.forEach((container, idx) => {
            container.addEventListener('pointerdown', (e) => {
                activeJoyIndex = idx;
                container.setPointerCapture(e.pointerId);
                updateJoystick(e, container);
            });
            container.addEventListener('pointermove', (e) => {
                if (activeJoyIndex === idx) updateJoystick(e, container);
            });
            container.addEventListener('pointerup', (e) => {
                activeJoyIndex = -1;
                container.releasePointerCapture(e.pointerId);
            });
        });

function updateJoystick(e, container) {
            const rect = container.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            let dx = e.clientX - centerX; 
            let dy = e.clientY - centerY; 
            
            const maxDist = rect.width / 2;
            let dist = Math.sqrt(dx*dx + dy*dy);
            
            if (dist > maxDist) {
                dx = (dx / dist) * maxDist;
                dy = (dy / dist) * maxDist;
                dist = maxDist;
            }

let shipCmdX = -dy; 
            let shipCmdY = dx;
            
            let pwr = (dist / maxDist) * 100;
            
            // Apply 5% snap to joystick power
            if (pwr <= 5) {
                pwr = 0;
                dx = 0;
                dy = 0;
            }

prop.azimuth.cmdPwr = pwr;
            prop.azimuth.cmdAng = Math.atan2(shipCmdY, shipCmdX);

// Update UI
            const percentX = ((dx + maxDist) / rect.width) * 100;
            const percentY = ((dy + maxDist) / rect.height) * 100;

joyKnobs.forEach(knob => {
                knob.style.left = `${percentX}%`;
                knob.style.top = `${percentY}%`;
            });
        }

// Global Reset
        document.getElementById('btn-reset').addEventListener('click', () => {
            vessel.x = 0; vessel.y = 0; vessel.heading = 0;
            vessel.u = 0; vessel.v = 0; vessel.r = 0;
            vessel.track = [];
            
            const baseClasses = ['in-bt', 'in-st', 'in-port-pwr', 'in-stbd-pwr', 'in-port-rud', 'in-stbd-rud'];
            baseClasses.forEach(cls => {
                document.querySelectorAll(`.${cls}`).forEach(el => {
                    el.value = 0;
                    el.dispatchEvent(new Event('input')); 
                });
            });

prop.azimuth.cmdPwr = 0; prop.azimuth.cmdAng = 0;
            joyKnobs.forEach(knob => {
                knob.style.left = '50%'; knob.style.top = '50%';
            });
        });

// --- Physics Engine ---
        function updateFeedback(obj, propName, dt, rate) {
            const cmd = obj[`cmd${propName}`];
            let fb = obj[`fb${propName}`];
            const diff = cmd - fb;
            const step = rate * dt;
            if (Math.abs(diff) <= step) obj[`fb${propName}`] = cmd;
            else obj[`fb${propName}`] += Math.sign(diff) * step;
        }

function updatePhysics(dt) {
            updateFeedback(prop.bowTunnel, '', dt, prop.bowTunnel.rate);
            updateFeedback(prop.sternTunnel, '', dt, prop.sternTunnel.rate);
            updateFeedback(prop.portShaft, '', dt, prop.portShaft.rate);
            updateFeedback(prop.stbdShaft, '', dt, prop.stbdShaft.rate);
            updateFeedback(prop.portRudder, '', dt, prop.portRudder.rate);
            updateFeedback(prop.stbdRudder, '', dt, prop.stbdRudder.rate);
            
            updateFeedback(prop.azimuth, 'Pwr', dt, prop.azimuth.ratePwr);
            
            let angDiff = prop.azimuth.cmdAng - prop.azimuth.fbAng;
            while (angDiff > Math.PI) angDiff -= 2 * Math.PI;
            while (angDiff < -Math.PI) angDiff += 2 * Math.PI;
            
            const angStep = prop.azimuth.rateAng * dt;
            if (Math.abs(angDiff) <= angStep) prop.azimuth.fbAng = prop.azimuth.cmdAng;
            else prop.azimuth.fbAng += Math.sign(angDiff) * angStep;

let totalFx = 0;
            let totalFy = 0;
            let totalMz = 0;

function applyForce(rx, ry, fx, fy, simCacheObj) {
                totalFx += fx;
                totalFy += fy;
                totalMz += (rx * fy) - (ry * fx); 
                simCacheObj.x = fx; 
                simCacheObj.y = fy;
            }

const f_bt = (prop.bowTunnel.fb / 100) * F_TUN_MAX;
            applyForce(P_BOW, 0, 0, f_bt, simForces.bt);

const f_st = (prop.sternTunnel.fb / 100) * F_TUN_MAX;
            applyForce(P_STERN, 0, 0, f_st, simForces.st);

const pwr_azi = (prop.azimuth.fbPwr / 100) * F_AZI_MAX;
            const f_azi_x = pwr_azi * Math.cos(prop.azimuth.fbAng);
            const f_azi_y = pwr_azi * Math.sin(prop.azimuth.fbAng);
            applyForce(P_AZI, 0, f_azi_x, f_azi_y, simForces.azi);

const pwr_port = (prop.portShaft.fb / 100) * F_MAIN_MAX;
            const rud_port_rad = prop.portRudder.fb * Math.PI / 180;
            const f_port_x = pwr_port * Math.cos(rud_port_rad);
            const f_port_y = -pwr_port * Math.sin(rud_port_rad); 
            applyForce(P_STERN, -P_MAIN_Y, f_port_x, f_port_y, simForces.port);

const pwr_stbd = (prop.stbdShaft.fb / 100) * F_MAIN_MAX;
            const rud_stbd_rad = prop.stbdRudder.fb * Math.PI / 180;
            const f_stbd_x = pwr_stbd * Math.cos(rud_stbd_rad);
            const f_stbd_y = -pwr_stbd * Math.sin(rud_stbd_rad);
            applyForce(P_STERN, P_MAIN_Y, f_stbd_x, f_stbd_y, simForces.stbd);

const drag_x = -(DRAG_SURGE_LIN * vessel.u + DRAG_SURGE_QUAD * vessel.u * Math.abs(vessel.u));
            const drag_y = -(DRAG_SWAY_LIN * vessel.v + DRAG_SWAY_QUAD * vessel.v * Math.abs(vessel.v));
            const drag_r = -(DRAG_YAW_LIN * vessel.r + DRAG_YAW_QUAD * vessel.r * Math.abs(vessel.r));

totalFx += drag_x;
            totalFy += drag_y;
            totalMz += drag_r;

vessel.u += (totalFx / MASS) * dt;
            vessel.v += (totalFy / MASS) * dt;
            vessel.r += (totalMz / IZ) * dt;

const hdg = vessel.heading;
            vessel.x += (vessel.u * Math.sin(hdg) + vessel.v * Math.cos(hdg)) * dt;
            vessel.y += (vessel.u * Math.cos(hdg) - vessel.v * Math.sin(hdg)) * dt;
            vessel.heading += vessel.r * dt;

if (vessel.heading < 0) vessel.heading += 2 * Math.PI;
            if (vessel.heading >= 2 * Math.PI) vessel.heading -= 2 * Math.PI;

breadcrumbTimer += dt;
            if (breadcrumbTimer > 5) {
                vessel.track.push({ x: vessel.x, y: vessel.y });
                if (vessel.track.length > 200) vessel.track.shift();
                breadcrumbTimer = 0;
            }
        }

// --- Canvas Rendering ---
        const canvas = document.getElementById('sim-canvas');
        const ctx = canvas.getContext('2d');

function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

function drawForceVector(shipLocalX, shipLocalY, forceX, forceY, color) {
            const cvsStartX = shipLocalY;
            const cvsStartY = -shipLocalX;
            const cvsForceX = -forceY;
            const cvsForceY = forceX;

const mag = Math.sqrt(cvsForceX*cvsForceX + cvsForceY*cvsForceY);
            if (mag < 100) return;

const scale = 0.00004; 
            const lenX = cvsForceX * scale;
            const lenY = cvsForceY * scale;

ctx.save();
            ctx.translate(cvsStartX, cvsStartY);

ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(lenX, lenY);
            ctx.strokeStyle = color;
            ctx.lineWidth = 0.6; 
            ctx.stroke();

const angle = Math.atan2(lenY, lenX);
            ctx.translate(lenX, lenY);
            ctx.rotate(angle);
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(-5, -1.5); 
            ctx.lineTo(-5, 1.5);
            ctx.fillStyle = color;
            ctx.fill();

ctx.restore();
        }

function drawVessel(scale) {
            ctx.save();
            ctx.scale(scale, scale);

ctx.strokeStyle = '#475569';
            ctx.lineWidth = 1.5;
            ctx.beginPath();
            ctx.moveTo(0, -L/2); 
            ctx.bezierCurveTo(W/2, -L/2+10, W/2, 0, W/2, L/2); 
            ctx.lineTo(-W/2, L/2); 
            ctx.bezierCurveTo(-W/2, 0, -W/2, -L/2+10, 0, -L/2); 
            ctx.stroke();
            
            ctx.beginPath(); ctx.arc(0, -P_AZI, 1.5, 0, Math.PI*2); ctx.fillStyle='#ef4444'; ctx.fill();
            
            const drawRudder = (x, y, angleDeg) => {
                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(-angleDeg * Math.PI / 180);
                ctx.fillStyle = '#34d399';
                ctx.fillRect(-0.5, 0, 1, 6); 
                ctx.restore();
            };
            drawRudder(-P_MAIN_Y, L/2, prop.portRudder.fb);
            drawRudder(P_MAIN_Y, L/2, prop.stbdRudder.fb);

drawForceVector(P_BOW, 0, simForces.bt.x, simForces.bt.y, '#0284c7'); 
            drawForceVector(P_STERN, 0, simForces.st.x, simForces.st.y, '#0284c7');
            drawForceVector(P_AZI, 0, simForces.azi.x, simForces.azi.y, '#ef4444'); 
            
            drawForceVector(P_STERN, -P_MAIN_Y, simForces.port.x, simForces.port.y, '#10b981');
            drawForceVector(P_STERN, P_MAIN_Y, simForces.stbd.x, simForces.stbd.y, '#10b981');

ctx.restore();
        }

function updateTelemetry() {
            document.getElementById('tel-x').innerText = vessel.x.toFixed(1) + ' m';
            document.getElementById('tel-y').innerText = vessel.y.toFixed(1) + ' m';
            document.getElementById('tel-hdg').innerText = (vessel.heading * 180 / Math.PI).toFixed(1) + '°';
            
            const speedKnots = Math.sqrt(vessel.u*vessel.u + vessel.v*vessel.v) * 1.94384;
            document.getElementById('tel-sog').innerText = speedKnots.toFixed(1) + ' kn';
            
            const rot = vessel.r * (180 / Math.PI) * 60;
            document.getElementById('tel-rot').innerText = rot.toFixed(1) + '°/m';
        }

function draw(time) {
            if (!lastTime) lastTime = time;
            const dt = Math.min((time - lastTime) / 1000, 0.1) * simSpeed; 
            lastTime = time;

updatePhysics(dt);
            updateTelemetry();

ctx.fillStyle = '#b0c4de'; 
            ctx.fillRect(0, 0, canvas.width, canvas.height);

const cx = canvas.width / 2;
            const cy = canvas.height / 2;
            const scale = 2.5;

ctx.save();
            ctx.translate(cx, cy);
            ctx.translate(-vessel.x * scale, vessel.y * scale);

ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.lineWidth = 1;
            const gridSize = 50 * scale; 
            const viewRadius = Math.max(canvas.width, canvas.height) * 1.5;
            
            const startX = Math.floor((vessel.x * scale - viewRadius) / gridSize) * gridSize;
            const endX = Math.ceil((vessel.x * scale + viewRadius) / gridSize) * gridSize;
            const startY = Math.floor((-vessel.y * scale - viewRadius) / gridSize) * gridSize;
            const endY = Math.ceil((-vessel.y * scale + viewRadius) / gridSize) * gridSize;

ctx.beginPath();
            for (let x = startX; x <= endX; x += gridSize) {
                ctx.moveTo(x, startY); ctx.lineTo(x, endY);
            }
            for (let y = startY; y <= endY; y += gridSize) {
                ctx.moveTo(startX, y); ctx.lineTo(endX, y);
            }
            ctx.stroke();

if (vessel.track.length > 0) {
                ctx.strokeStyle = '#334155'; 
                ctx.lineWidth = 1.0; 
                ctx.beginPath();
                ctx.moveTo(vessel.track[0].x * scale, -vessel.track[0].y * scale);
                for (let i = 1; i < vessel.track.length; i++) {
                    ctx.lineTo(vessel.track[i].x * scale, -vessel.track[i].y * scale);
                }
                ctx.lineTo(vessel.x * scale, -vessel.y * scale);
                ctx.stroke();
            }

ctx.restore();

ctx.save();
            ctx.translate(cx, cy);
            ctx.rotate(vessel.heading);
            drawVessel(scale);
            ctx.restore();

requestAnimationFrame(draw);
        }

requestAnimationFrame(draw);
    </script>
</body>
</html>