window.DotRace = function DotRace({
    t,
    lang,
    userProfile,
    formatMoney,
    onBalanceUpdate,
    onBackToLobby,
    setShowDebtPanel
})
{
    const Icons = window.Icons;
    const motion = window.Motion?.motion || window.Motion || { div: 'div', p: 'p', span: 'span', button: 'button', h2: 'h2', h3: 'h3' };
    const AnimatePresence = window.Motion?.AnimatePresence || (({ children }) => <>{children}</>);

    const [socket, setSocket] = React.useState(null);
    const [connected, setConnected] = React.useState(false);
    const [rooms, setRooms] = React.useState([]);
    const [currentRoom, setCurrentRoom] = React.useState(null);
    const [view, setView] = React.useState('lobby'); // 'lobby', 'room', 'racing', 'result'
    const [selectedHorseId, setSelectedHorseId] = React.useState(null);
    const [countdown, setCountdown] = React.useState(null);
    const [raceState, setRaceState] = React.useState(null);
    const [raceResult, setRaceResult] = React.useState(null);
    const [errorMessage, setErrorMessage] = React.useState('');
    const [newRoomName, setNewRoomName] = React.useState('');
    const [showCreateModal, setShowCreateModal] = React.useState(false);
    const [hoveredTooltip, setHoveredTooltip] = React.useState(null);
    const [inputRoomCode, setInputRoomCode] = React.useState('');
    const [copiedCode, setCopiedCode] = React.useState(false);
    const [soundEnabled, setSoundEnabled] = React.useState(() =>
    {
        return localStorage.getItem('lucky_dotrace_sound') !== 'false';
    });

    const audioCtxRef = React.useRef(null);
    const soundIntervalRef = React.useRef(null);

    const token = localStorage.getItem('luck_token');
    const myUsername = userProfile?.username || '';
    const userBalance = userProfile?.totalWealth || 0;
    const isBrokeOrDebtor = userBalance <= 0 || userProfile?.isDebtor;

    // Debt & Bet Limits:
    // - Balance <= 0: Remaining credit up to -$10,000 limit (e.g. -$10k -> 0, -$5k -> 5k, $0 -> 10k)
    // - 0 < Balance < 10k: Capped at 10,000
    // - Balance >= 10k: Total balance
    const maxAllowedBet = userBalance <= 0
        ? Math.max(0, 10000 + userBalance)
        : (userBalance < 10000 ? 10000 : userBalance);

    const [betAmount, setBetAmount] = React.useState(() =>
    {
        return Math.min(maxAllowedBet, 10000);
    });

    React.useEffect(() =>
    {
        if (maxAllowedBet === 0)
        {
            setBetAmount(0);
        }
        else if (betAmount > maxAllowedBet || betAmount === 0)
        {
            setBetAmount(Math.min(maxAllowedBet, 10000));
        }
    }, [maxAllowedBet]);

    const wsUrl = React.useMemo(() =>
    {
        const api = window.API_URL || (
            window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' || window.location.hostname === ''
                ? 'http://localhost:3001'
                : 'https://api.tmn-studio.cloud'
        );
        return api.replace(/^http/, 'ws');
    }, []);

    // ──────────────────────────────────────────────────────────────────────────
    // WEB AUDIO API SYNTHESIZER (ZERO EXTERNAL ASSET DEPENDENCY)
    // ──────────────────────────────────────────────────────────────────────────
    const getAudioContext = React.useCallback(() =>
    {
        if (!audioCtxRef.current)
        {
            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
            if (AudioContextClass)
            {
                audioCtxRef.current = new AudioContextClass();
            }
        }
        if (audioCtxRef.current && audioCtxRef.current.state === 'suspended')
        {
            audioCtxRef.current.resume();
        }
        return audioCtxRef.current;
    }, []);

    const playStartBeep = React.useCallback(() =>
    {
        if (!soundEnabled) return;
        try
        {
            const ctx = getAudioContext();
            if (!ctx) return;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(440, ctx.currentTime);
            osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.35);
            gain.gain.setValueAtTime(0.15, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start();
            osc.stop(ctx.currentTime + 0.35);
        }
        catch (e) {}
    }, [soundEnabled, getAudioContext]);

    const playHeartbeat = React.useCallback(() =>
    {
        if (!soundEnabled) return;
        try
        {
            const ctx = getAudioContext();
            if (!ctx) return;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(55, ctx.currentTime);
            osc.frequency.exponentialRampToValueAtTime(35, ctx.currentTime + 0.18);
            gain.gain.setValueAtTime(0.3, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.18);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start();
            osc.stop(ctx.currentTime + 0.18);
        }
        catch (e) {}
    }, [soundEnabled, getAudioContext]);

    const playVictoryFanfare = React.useCallback(() =>
    {
        if (!soundEnabled) return;
        try
        {
            const ctx = getAudioContext();
            if (!ctx) return;
            const notes = [523.25, 659.25, 783.99, 1046.50];
            notes.forEach((freq, i) =>
            {
                const osc = ctx.createOscillator();
                const gain = ctx.createGain();
                osc.type = 'triangle';
                osc.frequency.setValueAtTime(freq, ctx.currentTime + i * 0.12);
                gain.gain.setValueAtTime(0.2, ctx.currentTime + i * 0.12);
                gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i * 0.12 + 0.4);
                osc.connect(gain);
                gain.connect(ctx.destination);
                osc.start(ctx.currentTime + i * 0.12);
                osc.stop(ctx.currentTime + i * 0.12 + 0.4);
            });
        }
        catch (e) {}
    }, [soundEnabled, getAudioContext]);

    const playTurboSound = React.useCallback(() =>
    {
        if (!soundEnabled) return;
        try
        {
            const ctx = getAudioContext();
            if (!ctx) return;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(220, ctx.currentTime);
            osc.frequency.exponentialRampToValueAtTime(780, ctx.currentTime + 0.28);
            gain.gain.setValueAtTime(0.12, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.32);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start();
            osc.stop(ctx.currentTime + 0.32);
        }
        catch (e) {}
    }, [soundEnabled, getAudioContext]);

    const playSlingshotSound = React.useCallback(() =>
    {
        if (!soundEnabled) return;
        try
        {
            const ctx = getAudioContext();
            if (!ctx) return;
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(400, ctx.currentTime);
            osc.frequency.exponentialRampToValueAtTime(950, ctx.currentTime + 0.22);
            gain.gain.setValueAtTime(0.15, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.24);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start();
            osc.stop(ctx.currentTime + 0.24);
        }
        catch (e) {}
    }, [soundEnabled, getAudioContext]);

    const toggleSound = () =>
    {
        setSoundEnabled((prev) =>
        {
            const next = !prev;
            localStorage.setItem('lucky_dotrace_sound', String(next));
            if (next)
            {
                getAudioContext();
            }
            return next;
        });
    };

    // Heartbeat during final sprint - calibrated faster for high adrenaline 45s derby
    React.useEffect(() =>
    {
        if (view === 'racing' && raceState?.phase === 'sprint' && soundEnabled)
        {
            const interval = setInterval(() =>
            {
                playHeartbeat();
            }, 380);
            soundIntervalRef.current = interval;
            return () => clearInterval(interval);
        }
        else
        {
            if (soundIntervalRef.current)
            {
                clearInterval(soundIntervalRef.current);
                soundIntervalRef.current = null;
            }
        }
    }, [view, raceState?.phase, soundEnabled, playHeartbeat]);

    // Trigger audio on turbo / slingshot events
    const prevActionStateRef = React.useRef({ turbo: false, slingshot: false });
    React.useEffect(() =>
    {
        if (view === 'racing' && raceState?.dots && soundEnabled)
        {
            const hasTurbo = raceState.dots.some((d) => d.isTurbo);
            const hasSlingshot = raceState.dots.some((d) => d.isSlingshot);

            if (hasTurbo && !prevActionStateRef.current.turbo)
            {
                playTurboSound();
            }
            if (hasSlingshot && !prevActionStateRef.current.slingshot)
            {
                playSlingshotSound();
            }

            prevActionStateRef.current = { turbo: hasTurbo, slingshot: hasSlingshot };
        }
    }, [view, raceState?.dots, soundEnabled, playTurboSound, playSlingshotSound]);

    // WebSocket lifecycle with auto-reconnect
    React.useEffect(() =>
    {
        let ws = null;
        let retryTimer = null;
        let isMounted = true;

        const connect = () =>
        {
            if (!isMounted) return;
            try
            {
                ws = new WebSocket(wsUrl);

                ws.onopen = () =>
                {
                    if (!isMounted) return;
                    setConnected(true);
                    setSocket(ws);
                    ws.send(JSON.stringify({
                        action: 'GET_ROOMS',
                        token: token,
                        payload: { username: myUsername, totalWealth: userBalance }
                    }));
                };

                ws.onmessage = (event) =>
                {
                    if (!isMounted) return;
                    try
                    {
                        const msg = JSON.parse(event.data);
                        handleSocketEvent(msg);
                    }
                    catch (e)
                    {
                        console.error('Socket message parse error', e);
                    }
                };

                ws.onclose = () =>
                {
                    if (!isMounted) return;
                    setConnected(false);
                    setSocket(null);
                    retryTimer = setTimeout(connect, 2500);
                };

                ws.onerror = (err) =>
                {
                    if (!isMounted) return;
                    console.error('WebSocket error:', err);
                    setConnected(false);
                    try { ws.close(); } catch (e) {}
                };
            }
            catch (e)
            {
                console.error('WS Connection error:', e);
                retryTimer = setTimeout(connect, 2500);
            }
        };

        connect();

        return () =>
        {
            isMounted = false;
            if (retryTimer) clearTimeout(retryTimer);
            if (ws) ws.close();
            if (soundIntervalRef.current) clearInterval(soundIntervalRef.current);
        };
    }, [wsUrl, token, myUsername]);

    const handleSocketEvent = (msg) =>
    {
        switch (msg.type)
        {
            case 'ROOMS_LIST':
                setRooms(msg.rooms || []);
                break;

            case 'ROOM_STATE_UPDATE':
                setCurrentRoom(msg.room);
                if (msg.room.status === 'waiting')
                {
                    setView('room');
                    setCountdown(null);
                    setRaceState(null);
                    setRaceResult(null);
                }
                break;

            case 'COUNTDOWN_STARTED':
            case 'COUNTDOWN_TICK':
                setCountdown(msg.countdown);
                if (msg.countdown === 1)
                {
                    playStartBeep();
                }
                break;

            case 'RACE_STARTED':
                setCountdown(null);
                setView('racing');
                setRaceState(msg.raceState);
                if (msg.players)
                {
                    setCurrentRoom((prev) => (prev ? { ...prev, players: msg.players } : prev));
                }
                playStartBeep();
                break;

            case 'RACE_TICK':
                setRaceState(msg.raceState);
                break;

            case 'RACE_FINISHED':
                setRaceResult(msg);
                setView('result');
                if (onBalanceUpdate && msg.payouts)
                {
                    const myPayout = msg.payouts.find((p) => p.username === myUsername);
                    if (myPayout && myPayout.newBalance !== undefined)
                    {
                        onBalanceUpdate(myPayout.newBalance);
                    }
                    if (myPayout?.isWinner || (myPayout?.isRunnerUp && myPayout?.profit > 0))
                    {
                        playVictoryFanfare();
                    }
                }
                break;

            case 'ERROR':
                setErrorMessage(localizeDotRaceError(msg.message));
                setTimeout(() => setErrorMessage(''), 4500);
                break;

            default:
                break;
        }
    };

    const localizeDotRaceError = (errMsg) =>
    {
        if (!errMsg) return '';
        const lower = String(errMsg).toLowerCase();
        if (lower.includes('unauthorized') || lower.includes('yetkiniz yok'))
        {
            return lang === 'TR' ? 'Bu işlem için yetkiniz yok!' : 'Unauthorized!';
        }
        if (lower.includes('must place bet before ready') || lower.includes('hazır olmadan önce'))
        {
            return lang === 'TR' ? 'Hazır olmadan önce bahis yapmalısınız!' : 'Must place bet before ready!';
        }
        if (lower.includes('need at least 2 players') || lower.includes('en az 2 oyuncu'))
        {
            return lang === 'TR' ? 'Başlamak için en az 2 oyuncu gerekiyor!' : 'Need at least 2 players to start!';
        }
        if (lower.includes('lobi kodu') || lower.includes('room not found') || lower.includes('invalid room'))
        {
            return lang === 'TR' ? 'Geçersiz veya bulunamayan lobi kodu!' : 'Invalid or room not found!';
        }
        if (lower.includes('oda dolu') || lower.includes('room is full'))
        {
            return lang === 'TR' ? 'Oda dolu!' : 'Room is full!';
        }
        if (lower.includes('yarış devam ediyor') || lower.includes('race is already in progress'))
        {
            return lang === 'TR' ? 'Yarış devam ediyor!' : 'Race is already in progress!';
        }
        if (lower.includes('insufficient balance') || lower.includes('yetersiz bakiye'))
        {
            return t.insufficientBalance || (lang === 'TR' ? 'Yetersiz bakiye!' : 'Insufficient balance!');
        }
        return errMsg;
    };

    const sendAction = (action, payload = {}) =>
    {
        if (socket && socket.readyState === WebSocket.OPEN)
        {
            socket.send(JSON.stringify({
                action,
                payload: {
                    ...payload,
                    username: myUsername,
                    totalWealth: userBalance
                },
                token
            }));
        }
        else
        {
            setErrorMessage(t.serverError || (lang === 'TR' ? 'Sitemiz tehlike altında saklanın' : 'Our site is in danger, take cover!'));
            setTimeout(() => setErrorMessage(''), 4500);
        }
    };

    const handleCreateRoom = () =>
    {
        sendAction('CREATE_ROOM', { name: newRoomName });
        setShowCreateModal(false);
        setNewRoomName('');
    };

    const handleJoinRoom = (roomId) =>
    {
        sendAction('JOIN_ROOM', { roomId });
    };

    const handleLeaveRoom = () =>
    {
        sendAction('LEAVE_ROOM');
        setCurrentRoom(null);
        setView('lobby');
        setSelectedHorseId(null);
    };

    const handlePlaceBet = (horseId) =>
    {
        setSelectedHorseId(horseId);
        sendAction('PLACE_BET', { horseId, amount: betAmount });
    };

    const handleBetAmountChange = (newAmount) =>
    {
        if (maxAllowedBet <= 0)
        {
            setBetAmount(0);
            return;
        }
        const clamped = Math.max(1, Math.min(maxAllowedBet, newAmount || 0));
        setBetAmount(clamped);
        if (selectedHorseId)
        {
            sendAction('PLACE_BET', { horseId: selectedHorseId, amount: clamped });
        }
    };

    const handleToggleReady = () =>
    {
        const me = currentRoom?.players?.find((p) => p.username === myUsername);
        if (!me) return;

        if (maxAllowedBet <= 0)
        {
            setErrorMessage(lang === 'TR' ? 'Borç limitinize (-$10.000) ulaştınız, bahis oynayamazsınız!' : 'Maximum debt limit reached (-$10,000), cannot bet!');
            setTimeout(() => setErrorMessage(''), 3500);
            return;
        }

        if (!me.bet && !me.isReady)
        {
            setErrorMessage(t.placeBetFirst || (lang === 'TR' ? 'Lütfen önce bir ata bahis yapın!' : 'Please place a bet on a horse first!'));
            setTimeout(() => setErrorMessage(''), 3500);
            return;
        }

        sendAction('TOGGLE_READY', { isReady: !me.isReady });
    };

    const handleAddBot = () =>
    {
        sendAction('ADD_BOT');
    };

    const handleRemoveBot = (botId) =>
    {
        sendAction('REMOVE_BOT', { botId });
    };

    const handleNextRace = () =>
    {
        sendAction('NEXT_RACE');
    };

    const myPlayer = currentRoom?.players?.find((p) => p.username === myUsername);
    const isHost = myPlayer?.isHost;
    const selectedContender = currentRoom?.contenders?.find((c) => c.id === (myPlayer?.bet?.horseId || selectedHorseId));

    const renderAgeBadge = (age, ageCategory) =>
    {
        if (ageCategory === 'young')
        {
            return (
                <span
                    className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-black bg-amber-500/20 text-amber-300 border border-amber-500/30 cursor-help"
                    onMouseEnter={() => setHoveredTooltip(`young_${age}`)}
                    onMouseLeave={() => setHoveredTooltip(null)}
                >
                    <Icons.AlertTriangle size={12} />
                    {age} {lang === 'TR' ? 'Yaş (Acemi)' : 'Yo (Rookie)'}
                </span>
            );
        }
        if (ageCategory === 'old')
        {
            return (
                <span
                    className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-black bg-rose-500/20 text-rose-300 border border-rose-500/30 cursor-help"
                    onMouseEnter={() => setHoveredTooltip(`old_${age}`)}
                    onMouseLeave={() => setHoveredTooltip(null)}
                >
                    <Icons.Watch size={12} />
                    {age} {lang === 'TR' ? 'Yaş (Yaşlı)' : 'Yo (Veteran)'}
                </span>
            );
        }
        return (
            <span
                className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-[11px] font-black bg-emerald-500/20 text-emerald-300 border border-emerald-500/30 cursor-help"
                onMouseEnter={() => setHoveredTooltip(`prime_${age}`)}
                onMouseLeave={() => setHoveredTooltip(null)}
            >
                <Icons.Star size={12} />
                {age} {lang === 'TR' ? 'Yaş (Zirve)' : 'Yo (Prime)'}
            </span>
        );
    };

    // Format milliseconds to MM:SS
    const formatDuration = (ms) =>
    {
        const totalSec = Math.max(0, Math.floor(ms / 1000));
        const minutes = Math.floor(totalSec / 60);
        const seconds = totalSec % 60;
        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    };

    // ──────────────────────────────────────────────────────────────────────────
    // 1. LOBBY VIEW (ROOMS BROWSER)
    // ──────────────────────────────────────────────────────────────────────────
    if (view === 'lobby')
    {
        return (
            <div className="w-full max-w-6xl mx-auto px-4 py-6 animate-in fade-in duration-500">
                {/* TOP BAR */}
                <div className="flex flex-wrap items-center justify-between gap-4 mb-8 bg-slate-900/70 border border-white/10 p-6 rounded-3xl backdrop-blur-xl shadow-2xl">
                    <div className="flex items-center gap-4">
                        <button
                            onClick={onBackToLobby}
                            className="p-3 bg-slate-800/80 hover:bg-slate-700 text-slate-300 hover:text-white rounded-2xl transition-all hover:scale-105 active:scale-95"
                            title={t.mainMenu || 'Menü'}
                        >
                            <Icons.LogOut size={20} className="rotate-180" />
                        </button>
                        <div>
                            <h2 className="text-3xl font-black text-white tracking-tight flex items-center gap-3">
                                <span className="p-2 bg-gradient-to-br from-rose-500 via-orange-500 to-amber-500 rounded-2xl shadow-lg shadow-rose-500/30">
                                    <Icons.Flag size={24} className="text-white" />
                                </span>
                                {t.dotRaceTitle || 'Nokta Yarışı'}
                                <span className="text-xs px-2.5 py-1 bg-amber-500/20 border border-amber-500/40 text-amber-300 rounded-xl font-bold tracking-wider">
                                    45s TURBO DERBY
                                </span>
                            </h2>
                            <p className="text-xs text-slate-400 font-medium mt-1">
                                {t.raceDurationNotice || '45 Saniyelik Turbo Derby • 1000 Metre Canlı Çekişme'}
                            </p>
                        </div>
                    </div>

                    <div className="flex flex-wrap items-center gap-3">
                        {/* SOUND TOGGLE */}
                        <button
                            onClick={toggleSound}
                            className={`px-3.5 py-2 rounded-2xl border text-xs font-bold transition-all flex items-center gap-1.5 ${soundEnabled ? 'bg-indigo-600/20 text-indigo-300 border-indigo-500/30' : 'bg-slate-800 text-slate-500 border-white/5'}`}
                            title={soundEnabled ? (t.soundOn || 'Ses Açık') : (t.soundOff || 'Ses Kapalı')}
                        >
                            {soundEnabled ? <Icons.Volume2 size={16} /> : <Icons.VolumeX size={16} />}
                            <span className="hidden sm:inline">{soundEnabled ? (t.soundOn || 'Ses Açık') : (t.soundOff || 'Ses Kapalı')}</span>
                        </button>

                        {/* JOIN WITH CODE INPUT */}
                        <div className="flex items-center gap-1.5 bg-slate-950/80 border border-white/10 p-1.5 rounded-2xl">
                            <input
                                type="text"
                                value={inputRoomCode}
                                onChange={(e) => setInputRoomCode(e.target.value.toUpperCase())}
                                onKeyDown={(e) => { if (e.key === 'Enter' && inputRoomCode.trim()) handleJoinRoom(inputRoomCode.trim()); }}
                                placeholder={t.enterRoomCode || "Lobi Kodu..."}
                                maxLength={8}
                                className="bg-transparent px-3 py-1 text-xs text-white uppercase font-mono font-bold tracking-widest focus:outline-none w-32 placeholder:text-slate-600 placeholder:normal-case placeholder:font-normal"
                            />
                            <button
                                onClick={() => { if (inputRoomCode.trim()) handleJoinRoom(inputRoomCode.trim()); }}
                                disabled={!inputRoomCode.trim()}
                                className="px-3.5 py-2 bg-slate-800 hover:bg-slate-700 disabled:opacity-40 text-indigo-300 font-bold text-xs rounded-xl transition-all border border-indigo-500/20 active:scale-95 flex items-center gap-1"
                            >
                                <Icons.Play size={12} />
                                {t.joinWithCode || "Katıl"}
                            </button>
                        </div>

                        <div className="flex items-center gap-2 bg-slate-950/60 px-4 py-2 rounded-2xl border border-white/5">
                            <div className={`w-2.5 h-2.5 rounded-full ${connected ? 'bg-emerald-400 animate-pulse' : 'bg-rose-500'}`}></div>
                            <span className="text-xs font-bold text-slate-400">
                                {connected ? (lang === 'TR' ? 'Canlı Sunucu' : 'Live Server') : (lang === 'TR' ? 'Bağlanıyor...' : 'Connecting...')}
                            </span>
                        </div>

                        <button
                            onClick={() => setShowCreateModal(true)}
                            className="px-6 py-3.5 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-black text-sm uppercase tracking-wider rounded-2xl transition-all shadow-xl shadow-indigo-600/30 hover:scale-105 active:scale-95 flex items-center gap-2"
                        >
                            <Icons.Plus size={18} />
                            {t.createRoom || 'Oda Aç'}
                        </button>
                    </div>
                </div>

                {/* BROKE / OVERDRAFT NOTIFICATION BANNER */}
                {isBrokeOrDebtor && (
                    <div className="mb-6 p-4 bg-amber-500/10 border border-amber-500/30 rounded-2xl flex flex-wrap items-center justify-between gap-3 backdrop-blur-md">
                        <div className="flex items-center gap-3">
                            <div className="p-2 bg-amber-500/20 text-amber-300 rounded-xl">
                                <Icons.CreditCard size={20} />
                            </div>
                            <div>
                                <h4 className="text-xs font-black text-amber-300 uppercase tracking-wider">
                                    {t.overdraftBadge || 'Avans Bahis Modu Aktif'}
                                </h4>
                                <p className="text-xs text-slate-300 font-medium mt-0.5">
                                    {t.overdraftBetNotice || 'Bakiyeniz $0 veya eksi olsa bile maksimum 10.000 $ bahis yapabilirsiniz. Kayıpta borcunuz artar.'}
                                </p>
                            </div>
                        </div>
                        <div className="flex items-center gap-2 shrink-0 ml-auto">
                            {setShowDebtPanel && (userBalance < 0 || userProfile?.isDebtor) && (
                                <button
                                    onClick={() => setShowDebtPanel(true)}
                                    className="px-3.5 py-1.5 bg-rose-600 hover:bg-rose-500 text-white rounded-xl text-xs font-black transition-all flex items-center gap-1.5 shadow-lg shadow-rose-600/30 active:scale-95"
                                >
                                    <Icons.Hammer size={14} />
                                    {t.debtorJobsTitle || (lang === 'TR' ? 'Borçtan Çıkış (Günlük İş)' : 'Escape Debt')}
                                </button>
                            )}
                            <span className="px-3 py-1 bg-amber-500/20 text-amber-400 border border-amber-500/40 rounded-xl text-xs font-black">
                                Max: $10.000
                            </span>
                        </div>
                    </div>
                )}

                {/* ERROR BANNER */}
                {errorMessage && (
                    <div className="mb-6 p-4 bg-rose-500/20 border border-rose-500/30 text-rose-300 rounded-2xl flex items-center gap-3 animate-shake">
                        <Icons.AlertTriangle size={20} />
                        <span className="text-sm font-bold">{errorMessage}</span>
                    </div>
                )}

                {/* ROOMS GRID */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {rooms.length === 0 ? (
                        <div className="col-span-full py-16 text-center bg-slate-900/40 border border-dashed border-white/10 rounded-3xl">
                            <Icons.Users size={48} className="mx-auto text-slate-600 mb-4" />
                            <h3 className="text-lg font-bold text-slate-300 mb-2">
                                {lang === 'TR' ? 'Henüz aktif yarış odası yok' : 'No active race rooms yet'}
                            </h3>
                            <p className="text-sm text-slate-500 mb-6">
                                {lang === 'TR' ? 'İlk odayı kurarak 45 saniyelik turbo derbiyi başlatın veya arkadaşınızın kodunu girin!' : 'Create the first room or enter a friend\'s code for the 45s turbo derby!'}
                            </p>
                            <button
                                onClick={() => setShowCreateModal(true)}
                                className="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-2xl transition-all shadow-lg"
                            >
                                {t.createRoom || 'Yeni Oda Aç'}
                            </button>
                        </div>
                    ) : (
                        rooms.map((room) => (
                            <div
                                key={room.id}
                                className="bg-slate-900/70 border border-white/10 hover:border-indigo-500/40 rounded-3xl p-6 transition-all hover:scale-[1.02] flex flex-col justify-between backdrop-blur-md shadow-xl group"
                            >
                                <div>
                                    <div className="flex items-center justify-between gap-2 mb-2">
                                        <h3 className="font-black text-xl text-white group-hover:text-indigo-400 transition-colors truncate">
                                            {room.name}
                                        </h3>
                                        <span className={`px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider ${room.status === 'waiting' ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-amber-500/20 text-amber-400 border border-amber-500/30'}`}>
                                            {room.status === 'waiting' ? (lang === 'TR' ? 'Lobi' : 'Lobby') : (lang === 'TR' ? 'Yarışta' : 'In Race')}
                                        </span>
                                    </div>

                                    {/* ROOM CODE BADGE */}
                                    <div className="flex items-center gap-2 mb-4">
                                        <span className="px-2.5 py-0.5 bg-slate-950/80 border border-indigo-500/30 rounded-lg text-[10px] font-mono font-black text-indigo-300 tracking-wider">
                                            #{room.code || room.id}
                                        </span>
                                    </div>

                                    <p className="text-xs text-slate-400 flex items-center gap-2 mb-4">
                                        <Icons.User size={14} className="text-slate-500" />
                                        {t.roomHost || 'Kurucu'}: <span className="text-slate-200 font-bold">{room.host}</span>
                                    </p>
                                    <div className="flex items-center gap-2 text-xs text-slate-300 font-bold bg-slate-950/60 p-3 rounded-2xl border border-white/5 mb-6">
                                        <Icons.Users size={16} className="text-indigo-400" />
                                        <span>{t.playersInRoom || 'Oyuncular'}:</span>
                                        <span className="text-indigo-300 font-black ml-auto">{room.playerCount} / {room.maxPlayers}</span>
                                    </div>
                                </div>

                                <button
                                    onClick={() => handleJoinRoom(room.id)}
                                    disabled={room.status !== 'waiting' || room.playerCount >= room.maxPlayers}
                                    className={`w-full py-3.5 rounded-2xl font-black text-sm uppercase tracking-wider transition-all flex items-center justify-center gap-2 ${room.status === 'waiting' && room.playerCount < room.maxPlayers ? 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white shadow-lg shadow-indigo-600/30 active:scale-95' : 'bg-slate-800 text-slate-600 cursor-not-allowed'}`}
                                >
                                    <Icons.Play size={16} />
                                    {t.joinRoom || 'Odaya Katıl'}
                                </button>
                            </div>
                        ))
                    )}
                </div>

                {/* CREATE ROOM MODAL */}
                {showCreateModal && (
                    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md p-4 animate-in fade-in duration-200">
                        <div className="bg-slate-900 border border-white/10 rounded-3xl p-8 max-w-md w-full shadow-2xl relative">
                            <h3 className="text-2xl font-black text-white mb-2">{t.createRoom || 'Yeni Oda Aç'}</h3>
                            <p className="text-xs text-slate-400 mb-6">
                                {lang === 'TR' ? '45 saniyelik turbo yarış arenasını kurun ve arkadaşlarınızı davet edin.' : 'Choose a room name and invite players for the 45s turbo derby.'}
                            </p>

                            <input
                                type="text"
                                value={newRoomName}
                                onChange={(e) => setNewRoomName(e.target.value)}
                                placeholder={`${myUsername}'s Grand Derby`}
                                className="w-full bg-slate-950/80 border border-white/10 rounded-2xl px-5 py-4 text-white placeholder:text-slate-600 focus:outline-none focus:border-indigo-500 mb-6 text-sm"
                            />

                            <div className="flex gap-3">
                                <button
                                    onClick={() => setShowCreateModal(false)}
                                    className="flex-1 py-3.5 bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold rounded-2xl transition-all text-sm"
                                >
                                    {t.close || 'İptal'}
                                </button>
                                <button
                                    onClick={handleCreateRoom}
                                    className="flex-1 py-3.5 bg-indigo-600 hover:bg-indigo-500 text-white font-black rounded-2xl transition-all shadow-lg shadow-indigo-600/30 text-sm uppercase tracking-wider"
                                >
                                    {t.createRoom || 'Oluştur'}
                                </button>
                            </div>
                        </div>
                    </div>
                )}
            </div>
        );
    }

    // ──────────────────────────────────────────────────────────────────────────
    // 2. ROOM & BETTING VIEW
    // ──────────────────────────────────────────────────────────────────────────
    if (view === 'room' && currentRoom)
    {
        const totalPlayers = currentRoom.players?.length || 0;
        const readyCount = currentRoom.players?.filter((p) => p.isReady).length || 0;
        const isReady = myPlayer?.isReady;

        return (
            <div className="w-full max-w-6xl mx-auto px-4 py-6 animate-in fade-in duration-500">
                {/* ROOM HEADER */}
                <div className="bg-slate-900/70 border border-white/10 p-6 rounded-3xl backdrop-blur-xl mb-6 flex flex-wrap items-center justify-between gap-4 shadow-2xl">
                    <div className="flex items-center gap-4">
                        <button
                            onClick={handleLeaveRoom}
                            className="p-3 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white rounded-2xl transition-all hover:scale-105 active:scale-95"
                            title={t.leaveRoom || 'Ayrıl'}
                        >
                            <Icons.LogOut size={20} className="rotate-180" />
                        </button>
                        <div>
                            <div className="flex items-center gap-3">
                                <h2 className="text-2xl font-black text-white">{currentRoom.name}</h2>
                                <span className="px-3 py-1 bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 rounded-full text-xs font-bold">
                                    {totalPlayers} / {currentRoom.maxPlayers || 8} {t.playersInRoom || 'Oyuncu'}
                                </span>
                                <span className="px-2.5 py-0.5 bg-amber-500/20 border border-amber-500/40 text-amber-300 rounded-lg text-[10px] font-black uppercase">
                                    45s Turbo Derby
                                </span>
                            </div>
                            <p className="text-xs text-slate-400 mt-1">
                                {t.minPlayersNotice || 'Yarış için en az 2 oyuncunun hazır olması gerekir.'}
                            </p>
                        </div>
                    </div>

                    <div className="flex flex-wrap items-center gap-3">
                        {/* SOUND TOGGLE */}
                        <button
                            onClick={toggleSound}
                            className={`p-2.5 rounded-2xl border text-xs font-bold transition-all ${soundEnabled ? 'bg-indigo-600/20 text-indigo-300 border-indigo-500/30' : 'bg-slate-800 text-slate-500 border-white/5'}`}
                            title={soundEnabled ? (t.soundOn || 'Ses Açık') : (t.soundOff || 'Ses Kapalı')}
                        >
                            {soundEnabled ? <Icons.Volume2 size={16} /> : <Icons.VolumeX size={16} />}
                        </button>

                        {/* LOBBY CODE BADGE WITH COPY */}
                        <div className="flex items-center gap-2 bg-slate-950/80 border border-indigo-500/30 px-3.5 py-2 rounded-2xl shadow-lg shadow-indigo-500/10">
                            <div className="text-left">
                                <span className="text-[9px] text-slate-400 font-bold uppercase tracking-widest block">{t.roomCode || 'Lobi Kodu'}</span>
                                <span className="text-sm font-mono font-black text-indigo-300 tracking-widest">{currentRoom.code || currentRoom.id}</span>
                            </div>
                            <button
                                onClick={() =>
                                {
                                    const code = currentRoom.code || currentRoom.id;
                                    navigator.clipboard.writeText(code);
                                    setCopiedCode(true);
                                    setTimeout(() => setCopiedCode(false), 2000);
                                }}
                                className={`p-2 rounded-xl border transition-all ${copiedCode ? 'bg-emerald-500/20 text-emerald-300 border-emerald-500/30 scale-105' : 'bg-slate-800 hover:bg-slate-700 text-slate-300 border-white/10 hover:text-white active:scale-95'}`}
                                title={copiedCode ? (t.codeCopied || 'Kopyalandı!') : (t.copyCode || 'Kodu Kopyala')}
                            >
                                {copiedCode ? <Icons.Check size={14} className="text-emerald-400" /> : <Icons.Copy size={14} />}
                            </button>
                        </div>

                        {/* INVITE BUTTON */}
                        <button
                            onClick={() =>
                            {
                                const code = currentRoom.code || currentRoom.id;
                                const inviteText = `Lucky Game 45s Turbo Nokta Yarışı Lobisi! Katılma Kodu: ${code}`;
                                navigator.clipboard.writeText(inviteText);
                                setCopiedCode(true);
                                setTimeout(() => setCopiedCode(false), 2000);
                            }}
                            className="px-3.5 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-xs font-bold rounded-2xl border border-white/10 transition-all flex items-center gap-2 active:scale-95"
                            title={t.inviteFriends || 'Arkadaşlarını Davet Et'}
                        >
                            <Icons.Share2 size={14} className="text-indigo-400" />
                            <span className="hidden sm:inline">{copiedCode ? (t.codeCopied || 'Kopyalandı!') : (t.inviteFriends || 'Davet Et')}</span>
                        </button>

                        {isHost && totalPlayers < (currentRoom.maxPlayers || 8) && (
                            <button
                                onClick={handleAddBot}
                                className="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-purple-300 font-bold text-xs rounded-2xl transition-all flex items-center gap-2 border border-purple-500/20 active:scale-95"
                            >
                                <Icons.Bot size={15} />
                                {t.addBot || '+ Bot Ekle'}
                            </button>
                        )}
                        <div className="px-4 py-2 bg-slate-950/80 rounded-2xl border border-white/10 text-right">
                            <span className="text-[9px] text-slate-400 uppercase font-black tracking-wider block">{t.balance || 'Bakiye'}</span>
                            <span className={`text-xs font-black ${userBalance < 0 ? 'text-rose-400' : 'text-amber-400'}`}>
                                {formatMoney(userBalance)}
                            </span>
                        </div>
                    </div>
                </div>

                {/* COUNTDOWN OVERLAY */}
                {countdown !== null && (
                    <div className="mb-6 p-6 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white text-center rounded-3xl shadow-2xl shadow-purple-600/40 animate-pulse">
                        <p className="text-xs font-black uppercase tracking-[0.3em] mb-1">{t.raceStartingIn?.replace('{sec}', countdown) || `Yarış Başlıyor: ${countdown}s`}</p>
                        <h2 className="text-6xl font-black mb-3">{countdown}</h2>
                        <div className="flex items-center justify-center gap-2 flex-wrap max-w-2xl mx-auto pt-2 border-t border-white/20">
                            {currentRoom.players?.filter((p) => p.bet).map((p) => (
                                <span
                                    key={p.id}
                                    className="px-2.5 py-1 bg-black/30 backdrop-blur-md rounded-xl text-xs font-bold flex items-center gap-1.5 border border-white/10 shadow-sm"
                                >
                                    {p.isBot ? <Icons.Bot size={12} className="text-purple-300" /> : <Icons.User size={12} className="text-indigo-200" />}
                                    <span>{p.username === myUsername ? (lang === 'TR' ? 'Sen' : 'You') : p.username}:</span>
                                    <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: p.bet.color }}></span>
                                    <span className="font-black text-amber-200">{lang === 'TR' ? p.bet.horseNameTr : p.bet.horseName}</span>
                                    <span className="text-amber-300 font-mono text-[10px]">({formatMoney(p.bet.amount)})</span>
                                </span>
                            ))}
                        </div>
                    </div>
                )}

                {/* BROKE / OVERDRAFT NOTIFICATION BANNER */}
                {isBrokeOrDebtor && (
                    <div className="mb-6 p-4 bg-amber-500/10 border border-amber-500/30 rounded-2xl flex items-center justify-between gap-3 backdrop-blur-md">
                        <div className="flex items-center gap-3">
                            <div className="p-2 bg-amber-500/20 text-amber-300 rounded-xl">
                                <Icons.CreditCard size={20} />
                            </div>
                            <div>
                                <h4 className="text-xs font-black text-amber-300 uppercase tracking-wider">
                                    {t.overdraftBadge || 'Avans Bahsi (Max: 10.000 $)'}
                                </h4>
                                <p className="text-xs text-slate-300 font-medium mt-0.5">
                                    {t.overdraftBetNotice || 'Bakiyeniz $0 veya eksi olsa bile maksimum 10.000 $ bahis yapabilirsiniz. Kayıpta borcunuz artar.'}
                                </p>
                            </div>
                        </div>
                        <span className="px-3 py-1 bg-amber-500/20 text-amber-400 border border-amber-500/40 rounded-xl text-xs font-black shrink-0">
                            Limit: $10.000
                        </span>
                    </div>
                )}

                {/* ERROR BANNER */}
                {errorMessage && (
                    <div className="mb-6 p-4 bg-rose-500/20 border border-rose-500/30 text-rose-300 rounded-2xl flex items-center gap-3 animate-shake">
                        <Icons.AlertTriangle size={20} />
                        <span className="text-sm font-bold">{errorMessage}</span>
                    </div>
                )}

                {/* MAIN CONTENT GRID: CONTENDERS & BETTING PANEL */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                    {/* CONTENDERS (8 AT) LIST */}
                    <div className="lg:col-span-2 flex flex-col gap-3">
                        <div className="flex items-center justify-between mb-2">
                            <h3 className="text-lg font-black text-white flex items-center gap-2">
                                <Icons.Flag size={18} className="text-rose-400" />
                                {t.chooseHorse || 'Bahis Yapılacak Atı Seçin'}
                            </h3>
                            <span className="text-xs text-slate-400 italic">
                                {t.noBreedAdvantage || 'Irk ve İsim kozmetiktir, statları inceleyin.'}
                            </span>
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                            {currentRoom.contenders?.map((contender) =>
                            {
                                const isSelected = selectedContender?.id === contender.id;
                                const ageCat = contender.stats?.ageCategory;
                                const age = contender.stats?.age;

                                return (
                                    <div
                                        key={contender.id}
                                        onClick={() => !isReady && handlePlaceBet(contender.id)}
                                        className={`relative p-4 rounded-2xl border transition-all cursor-pointer ${isSelected ? 'bg-indigo-950/70 border-indigo-400 shadow-xl shadow-indigo-500/20 scale-[1.01]' : 'bg-slate-900/60 border-white/5 hover:border-white/20 hover:bg-slate-900/90'}`}
                                    >
                                        {/* COLOR ACCENT */}
                                        <div
                                            className="absolute top-3 right-3 w-4 h-4 rounded-full shadow-lg"
                                            style={{ backgroundColor: contender.color, boxShadow: `0 0 12px ${contender.color}` }}
                                        ></div>

                                        <div className="flex items-center gap-2.5 mb-2">
                                            <span className="w-6 h-6 rounded-lg bg-slate-800 text-white font-black text-xs flex items-center justify-center border border-white/10">
                                                {contender.lane}
                                            </span>
                                            <div>
                                                <h4 className="font-black text-sm text-white tracking-tight leading-tight">
                                                    {lang === 'TR' ? contender.nameTr : contender.name}
                                                </h4>
                                                <span className="text-[10px] text-slate-400">
                                                    {lang === 'TR' ? contender.breedTr : contender.breed}
                                                </span>
                                            </div>
                                        </div>

                                        {/* STATS BARS */}
                                        <div className="space-y-1.5 my-3 bg-slate-950/40 p-2.5 rounded-xl border border-white/5">
                                            {/* SPEED */}
                                            <div className="flex items-center justify-between text-[10px]">
                                                <span className="text-slate-400 flex items-center gap-1 font-bold">
                                                    <Icons.Zap size={10} className="text-amber-400" /> {t.speed || 'Hız'}
                                                </span>
                                                <div className="flex items-center gap-2 w-28">
                                                    <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                                                        <div className="h-full bg-amber-400 rounded-full" style={{ width: `${contender.stats.speed}%` }}></div>
                                                    </div>
                                                    <span className="text-white font-black w-5 text-right">{contender.stats.speed}</span>
                                                </div>
                                            </div>

                                            {/* STAMINA */}
                                            <div className="flex items-center justify-between text-[10px]">
                                                <span className="text-slate-400 flex items-center gap-1 font-bold">
                                                    <Icons.ShieldCheck size={10} className="text-emerald-400" /> {t.stamina || 'Dayanıklılık'}
                                                </span>
                                                <div className="flex items-center gap-2 w-28">
                                                    <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                                                        <div className="h-full bg-emerald-400 rounded-full" style={{ width: `${contender.stats.stamina}%` }}></div>
                                                    </div>
                                                    <span className="text-white font-black w-5 text-right">{contender.stats.stamina}</span>
                                                </div>
                                            </div>

                                            {/* POWER */}
                                            <div className="flex items-center justify-between text-[10px]">
                                                <span className="text-slate-400 flex items-center gap-1 font-bold">
                                                    <Icons.Flame size={10} className="text-rose-400" /> {t.power || 'Güç'}
                                                </span>
                                                <div className="flex items-center gap-2 w-28">
                                                    <div className="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
                                                        <div className="h-full bg-rose-400 rounded-full" style={{ width: `${contender.stats.power}%` }}></div>
                                                    </div>
                                                    <span className="text-white font-black w-5 text-right">{contender.stats.power}</span>
                                                </div>
                                            </div>
                                        </div>

                                        {/* FOOTER: AGE & ODDS */}
                                        <div className="flex items-center justify-between mt-2 pt-2 border-t border-white/5">
                                            {renderAgeBadge(age, ageCat)}
                                            <span className="px-3 py-1 bg-amber-500/20 text-amber-300 font-black text-xs rounded-xl border border-amber-500/30">
                                                {contender.odds}x
                                            </span>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>

                    {/* RIGHT COLUMN: BETTING CONTROL & PLAYERS LIST */}
                    <div className="flex flex-col gap-6">
                        {/* BET CONTROLLER */}
                        <div className="bg-slate-900/80 border border-white/10 p-6 rounded-3xl backdrop-blur-xl shadow-xl flex flex-col justify-between">
                            <div>
                                <h3 className="text-lg font-black text-white mb-4 flex items-center gap-2">
                                    <Icons.DollarSign size={20} className="text-amber-400" />
                                    {t.betAmount || 'Bahis Tutarı'}
                                </h3>

                                {/* SELECTED HORSE SUMMARY */}
                                {selectedContender ? (
                                    <div className="p-4 bg-slate-950/60 border border-white/10 rounded-2xl mb-5 flex items-center justify-between">
                                        <div className="flex items-center gap-3">
                                            <div
                                                className="w-5 h-5 rounded-full"
                                                style={{ backgroundColor: selectedContender.color }}
                                            ></div>
                                            <div>
                                                <h5 className="font-black text-sm text-white">
                                                    {lang === 'TR' ? selectedContender.nameTr : selectedContender.name}
                                                </h5>
                                                <span className="text-[10px] text-slate-400">
                                                    {selectedContender.odds}x {t.odds || 'Oran'}
                                                </span>
                                            </div>
                                        </div>
                                        <div className="text-right space-y-0.5">
                                            <div>
                                                <span className="text-[9px] text-slate-400 uppercase font-black">1. {t.potentialWin || 'Olası Kazanç'}: </span>
                                                <span className="text-xs font-black text-emerald-400">
                                                    {formatMoney(Math.round(betAmount * selectedContender.odds))}
                                                </span>
                                            </div>
                                            <div>
                                                <span className="text-[9px] text-amber-400 uppercase font-black">🥈 2. {lang === 'TR' ? 'Kazanç (1/2)' : 'Win (1/2)'}: </span>
                                                <span className="text-xs font-black text-amber-300">
                                                    {formatMoney(Math.round(betAmount * (selectedContender.odds / 2)))}
                                                </span>
                                            </div>
                                            <div>
                                                <span className="text-[9px] text-orange-400 uppercase font-black">🥉 3. {lang === 'TR' ? 'Amorti' : 'Refund'}: </span>
                                                <span className="text-xs font-black text-slate-300">
                                                    {formatMoney(betAmount)}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="p-4 bg-slate-950/40 border border-dashed border-white/10 rounded-2xl mb-5 text-center text-xs text-slate-500">
                                        {t.selectDot || 'Lütfen soldan bir at seçin'}
                                    </div>
                                )}

                                {/* BET AMOUNT INPUT & CHIPS */}
                                <div className="space-y-3 mb-6">
                                    <div className="relative">
                                        <input
                                            type="number"
                                            disabled={isReady || maxAllowedBet <= 0}
                                            value={betAmount}
                                            onChange={(e) => handleBetAmountChange(Number(e.target.value))}
                                            className="w-full bg-slate-950/80 border border-white/10 rounded-2xl pl-4 pr-8 py-3.5 text-white font-black text-lg focus:outline-none focus:border-amber-500 disabled:opacity-50"
                                        />
                                        <span className="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-slate-500">$</span>
                                    </div>

                                    {/* QUICK BET CHIPS */}
                                    <div className="grid grid-cols-5 gap-1.5">
                                        {[
                                            { value: 5000, label: '5k' },
                                            { value: 10000, label: '10k' },
                                            { value: 50000, label: '50k' },
                                            { value: 100000, label: '100k' },
                                            { value: 1000000, label: '1M' }
                                        ].map((preset) =>
                                        {
                                            const isAffordable = maxAllowedBet > 0 && preset.value <= maxAllowedBet;
                                            const isSelected = betAmount === preset.value;
                                            return (
                                                <button
                                                    key={preset.value}
                                                    disabled={isReady || !isAffordable}
                                                    onClick={() => handleBetAmountChange(preset.value)}
                                                    className={`py-2 text-[11px] font-black rounded-xl border transition-all ${
                                                        isSelected
                                                            ? 'bg-amber-500 text-black border-amber-400 font-black shadow-md shadow-amber-500/20'
                                                            : isAffordable
                                                            ? 'bg-slate-800/80 text-slate-300 border-white/5 hover:bg-slate-700 hover:text-white'
                                                            : 'bg-slate-900/40 text-slate-600 border-transparent cursor-not-allowed opacity-35'
                                                    }`}
                                                >
                                                    {preset.label}
                                                </button>
                                            );
                                        })}
                                    </div>

                                    {maxAllowedBet <= 0 && (
                                        <div className="p-2.5 bg-rose-500/10 border border-rose-500/30 rounded-xl text-center">
                                            <p className="text-[11px] font-bold text-rose-400">
                                                {lang === 'TR' ? 'Borç limitine (-$10.000) ulaştınız. Bahis yapamazsınız!' : 'Maximum debt limit (-$10,000) reached. Cannot bet!'}
                                            </p>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* READY TOGGLE BUTTON */}
                            <button
                                onClick={handleToggleReady}
                                disabled={!selectedContender || maxAllowedBet <= 0}
                                className={`w-full py-4 rounded-2xl font-black text-sm uppercase tracking-widest transition-all shadow-xl flex items-center justify-center gap-2 ${
                                    isReady
                                        ? 'bg-rose-600 hover:bg-rose-500 text-white shadow-rose-600/30 active:scale-95'
                                        : selectedContender && maxAllowedBet > 0
                                        ? 'bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-500 hover:to-teal-400 text-white shadow-emerald-600/30 active:scale-95'
                                        : 'bg-slate-800 text-slate-600 cursor-not-allowed'
                                }`}
                            >
                                {isReady ? (
                                    <>
                                        <Icons.XCircle size={18} />
                                        {t.cancelReady || 'HAZIRLIĞI İPTAL ET'}
                                    </>
                                ) : (
                                    <>
                                        <Icons.CheckCircle size={18} />
                                        {t.setReady || 'HAZIR OL (READY)'}
                                    </>
                                )}
                            </button>
                        </div>

                        {/* PLAYERS IN ROOM LIST */}
                        <div className="bg-slate-900/60 border border-white/10 p-5 rounded-3xl backdrop-blur-xl">
                            <h4 className="font-black text-xs text-slate-400 uppercase tracking-wider mb-3 flex items-center gap-2">
                                <Icons.Users size={14} />
                                {t.playersInRoom || 'Oyuncular'} ({readyCount}/{totalPlayers} {t.ready || 'Hazır'})
                            </h4>

                            <div className="space-y-2 max-h-56 overflow-y-auto pr-1">
                                {currentRoom.players?.map((p) => (
                                    <div
                                        key={p.id}
                                        className="p-3 bg-slate-950/60 border border-white/5 rounded-2xl flex items-center justify-between gap-3 text-xs"
                                    >
                                        <div className="flex items-center gap-2.5 truncate">
                                            <div className="w-7 h-7 rounded-xl bg-slate-800 text-white font-bold flex items-center justify-center border border-white/10 text-[10px]">
                                                {p.isBot ? <Icons.Bot size={14} className="text-purple-400" /> : p.username.charAt(0).toUpperCase()}
                                            </div>
                                            <div className="truncate">
                                                <div className="flex items-center gap-1.5 font-bold text-white truncate">
                                                    <span className="truncate">{p.username}</span>
                                                    {p.isHost && <Icons.Crown size={12} className="text-amber-400 shrink-0" />}
                                                </div>
                                                <span className="text-[10px] text-slate-500">
                                                    {p.bet ? `${lang === 'TR' ? p.bet.horseNameTr : p.bet.horseName} (${formatMoney(p.bet.amount)})` : (t.noBet || 'Bahis Yok')}
                                                </span>
                                            </div>
                                        </div>

                                        <div className="flex items-center gap-2 shrink-0">
                                            {isHost && p.isBot && (
                                                <button
                                                    onClick={() => handleRemoveBot(p.id)}
                                                    className="text-rose-400 hover:text-rose-300 p-1"
                                                    title={t.removeBot || 'Botu Çıkar'}
                                                >
                                                    <Icons.XCircle size={14} />
                                                </button>
                                            )}
                                            <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase ${p.isReady ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-slate-800 text-slate-500'}`}>
                                                {p.isReady ? (t.ready || 'Hazır') : (t.notReady || 'Bekliyor')}
                                            </span>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    // ──────────────────────────────────────────────────────────────────────────
    // 3. LIVE RACING VIEW (45s 8-LANE TRACK, DYNAMIC HUD & TURBO EFFECTS)
    // ──────────────────────────────────────────────────────────────────────────
    if (view === 'racing' && raceState)
    {
        const totalDistance = raceState.totalDistance || currentRoom?.trackDistance || 1000;
        const targetDurationMs = raceState.targetDurationMs || 45000;
        const elapsedMs = raceState.elapsedMs || 0;
        const dots = raceState.dots || [];
        const sortedDots = [...dots].sort((a, b) => (a.rank || 0) - (b.rank || 0));
        const leader = sortedDots[0];
        const tension = raceState.tension || 25;

        const allRoomPlayers = currentRoom?.players || [];
        const playerBetsByHorseId = {};
        allRoomPlayers.forEach((p) =>
        {
            if (p.bet && p.bet.horseId !== undefined && p.bet.horseId !== null)
            {
                if (!playerBetsByHorseId[p.bet.horseId])
                {
                    playerBetsByHorseId[p.bet.horseId] = [];
                }
                playerBetsByHorseId[p.bet.horseId].push(p);
            }
        });

        return (
            <div className="w-full max-w-6xl mx-auto px-4 py-6 animate-in fade-in duration-300">
                {/* LIVE RACE HEADER & TENSION HUD */}
                <div className="bg-slate-900/80 border border-white/10 p-5 rounded-3xl backdrop-blur-xl mb-6 shadow-2xl space-y-4">
                    <div className="flex flex-wrap items-center justify-between gap-4">
                        <div className="flex items-center gap-3">
                            <span className="w-3.5 h-3.5 rounded-full bg-rose-500 animate-ping"></span>
                            <div>
                                <h2 className="text-xl font-black text-white tracking-wider uppercase flex items-center gap-2">
                                    <Icons.Flag size={20} className="text-rose-400" />
                                    {t.liveRace || 'CANLI YARIŞ (45s)'}
                                </h2>
                                <div className="flex items-center gap-2 mt-0.5">
                                    <span className="px-2.5 py-0.5 bg-indigo-500/20 text-indigo-300 border border-indigo-500/30 rounded-lg text-[10px] font-black uppercase">
                                        {lang === 'TR' ? raceState.phaseNameTr : raceState.phaseNameEn}
                                    </span>
                                </div>
                            </div>
                        </div>

                        {/* TIME & DISTANCE GAUGES */}
                        <div className="flex items-center gap-4">
                            {/* SOUND TOGGLE */}
                            <button
                                onClick={toggleSound}
                                className={`p-2.5 rounded-2xl border text-xs font-bold transition-all ${soundEnabled ? 'bg-indigo-600/20 text-indigo-300 border-indigo-500/30' : 'bg-slate-800 text-slate-500 border-white/5'}`}
                                title={soundEnabled ? (t.soundOn || 'Ses Açık') : (t.soundOff || 'Ses Kapalı')}
                            >
                                {soundEnabled ? <Icons.Volume2 size={16} /> : <Icons.VolumeX size={16} />}
                            </button>

                            {/* DURATION HUD */}
                            <div className="px-4 py-2 bg-slate-950/80 border border-white/10 rounded-2xl text-center">
                                <span className="text-[9px] text-slate-400 font-bold uppercase tracking-wider block">{t.elapsedTime || 'Süre'}</span>
                                <span className="text-sm font-mono font-black text-amber-400">
                                    {formatDuration(elapsedMs)} <span className="text-[10px] text-slate-500 font-normal">/ 00:45</span>
                                </span>
                            </div>

                            {/* DISTANCE HUD */}
                            <div className="px-4 py-2 bg-slate-950/80 border border-white/10 rounded-2xl text-right">
                                <span className="text-[9px] text-slate-400 font-bold uppercase tracking-wider block">{t.distance || 'Mesafe'}</span>
                                <span className="text-sm font-mono font-black text-white">{leader?.distance || 0}m / {totalDistance}m</span>
                            </div>
                        </div>
                    </div>

                    {/* LIVE COMMENTARY BAR */}
                    <div className="p-3 bg-slate-950/80 rounded-2xl border border-white/10 flex items-center gap-3">
                        <span className="p-1.5 bg-rose-500/20 text-rose-400 rounded-lg shrink-0 animate-pulse">
                            <Icons.Radio size={16} />
                        </span>
                        <p className="text-xs sm:text-sm font-bold text-amber-300 truncate">
                            {lang === 'TR' ? (raceState.commentaryTr || raceState.commentary) : (raceState.commentaryEn || raceState.commentary)}
                        </p>
                    </div>

                    {/* TENSION / ADRENALINE BAR */}
                    <div className="flex items-center gap-3 pt-1">
                        <span className="text-[10px] font-black uppercase tracking-wider text-slate-400 shrink-0 flex items-center gap-1">
                            <Icons.Activity size={12} className="text-rose-400" />
                            {t.tensionLevel || 'Adrenalin'}: {tension}%
                        </span>
                        <div className="flex-1 h-2 bg-slate-950 rounded-full overflow-hidden border border-white/5">
                            <div
                                className="h-full transition-all duration-300 rounded-full bg-gradient-to-r from-indigo-500 via-amber-500 to-rose-500"
                                style={{ width: `${tension}%` }}
                            ></div>
                        </div>
                    </div>
                </div>

                {/* TRACK & HUD CONTAINER */}
                <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
                    {/* 8-LANE RACE TRACK CANVAS/SVG CONTAINER */}
                    <div className="lg:col-span-3 bg-slate-950/90 border border-white/10 rounded-3xl p-6 relative overflow-hidden shadow-2xl backdrop-blur-md">
                        {/* DISTANCE MARKERS BACKGROUND */}
                        <div className="absolute inset-0 flex justify-between px-16 pointer-events-none opacity-20">
                            {[0, 25, 50, 75, 100].map((pct) => (
                                <div key={pct} className="h-full border-r border-dashed border-white/40 relative">
                                    <span className="absolute bottom-2 -translate-x-1/2 text-[9px] font-black text-white">
                                        {Math.round((pct / 100) * totalDistance)}m
                                    </span>
                                </div>
                            ))}
                        </div>

                        {/* FINISH LINE BANNER */}
                        <div className="absolute right-8 top-0 bottom-0 w-3.5 bg-gradient-to-b from-amber-400 via-white to-amber-400 opacity-90 shadow-[0_0_25px_rgba(245,158,11,0.7)] flex items-center justify-center z-10">
                            <span className="text-[9px] font-black text-black -rotate-90 whitespace-nowrap">
                                {t.finishLine || 'FİNİŞ'}
                            </span>
                        </div>

                        {/* 8 LANES */}
                        <div className="space-y-3 relative z-10 py-2">
                            {dots.map((dot) =>
                            {
                                const isMyHorse = selectedContender?.id === dot.id;
                                const progressPct = Math.min(100, Math.max(0, dot.progress * 100));
                                const horsePlayers = playerBetsByHorseId[dot.id] || [];

                                return (
                                    <div
                                        key={dot.id}
                                        className={`relative min-h-[3.75rem] py-2 rounded-2xl flex items-center px-3 border transition-all ${isMyHorse ? 'bg-indigo-950/60 border-indigo-400 shadow-xl shadow-indigo-500/20 ring-1 ring-indigo-400/50' : 'bg-slate-900/40 border-white/5'}`}
                                    >
                                        {/* LANE IDENTIFIER, SPEED & BETTORS */}
                                        <div className="w-28 sm:w-36 flex flex-col justify-center gap-0.5 shrink-0 z-20">
                                            <div className="flex items-center gap-2">
                                                <span className="w-6 h-6 rounded-lg bg-slate-800 text-white font-black text-[11px] flex items-center justify-center border border-white/10 shadow shrink-0">
                                                    {dot.lane}
                                                </span>
                                                <div className="truncate">
                                                    <span className="text-xs font-black text-slate-200 block leading-tight truncate">
                                                        #{dot.rank} {lang === 'TR' ? dot.nameTr : dot.name}
                                                    </span>
                                                    <span className="text-[9px] font-mono text-slate-400 block leading-tight">
                                                        {dot.kmh || Math.round(dot.velocity * 3.6)} km/s
                                                    </span>
                                                </div>
                                            </div>

                                            {/* BETTOR BADGES ON THIS LANE */}
                                            {horsePlayers.length > 0 && (
                                                <div className="flex items-center gap-1 flex-wrap mt-0.5">
                                                    {horsePlayers.map((p) => (
                                                        <span
                                                            key={p.id}
                                                            className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[8px] font-black border transition-all ${
                                                                p.username === myUsername
                                                                    ? 'bg-emerald-500/20 text-emerald-300 border-emerald-500/40 shadow-sm'
                                                                    : p.isBot
                                                                        ? 'bg-purple-950/60 text-purple-300 border-purple-700/30'
                                                                        : 'bg-indigo-950/60 text-indigo-200 border-indigo-500/30'
                                                            }`}
                                                            title={`${p.username}: ${formatMoney(p.bet.amount)}`}
                                                        >
                                                            {p.isBot ? <Icons.Bot size={9} className="shrink-0" /> : <Icons.User size={9} className="shrink-0" />}
                                                            <span className="truncate max-w-[48px]">{p.username === myUsername ? (lang === 'TR' ? 'Sen' : 'You') : p.username}</span>
                                                            <span className="text-amber-400 font-mono">{formatMoney(p.bet.amount)}</span>
                                                        </span>
                                                    ))}
                                                </div>
                                            )}
                                        </div>

                                        {/* RUNNER TRACK AREA */}
                                        <div className="relative flex-1 h-full flex items-center ml-2 mr-10 min-h-[2.5rem]">
                                            {/* DOT / RUNNER CONTAINER */}
                                            <div
                                                className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 transition-[left] duration-100 ease-linear flex items-center justify-center pointer-events-none"
                                                style={{ left: `${progressPct}%` }}
                                            >
                                                {/* SPEED TRAIL (POSITIONED ABSOLUTELY BEHIND THE DOT) */}
                                                <div
                                                    className={`absolute right-3 top-1/2 -translate-y-1/2 h-4 rounded-full blur-xs transition-all duration-300 pointer-events-none ${
                                                        dot.isTurbo
                                                            ? 'w-28 opacity-95 bg-gradient-to-r from-transparent via-amber-400 to-rose-600 animate-pulse'
                                                            : dot.isSlingshot
                                                                ? 'w-24 opacity-90 bg-gradient-to-r from-transparent via-cyan-400 to-indigo-500'
                                                                : dot.isSprinting
                                                                    ? 'w-20 opacity-80 bg-gradient-to-r from-transparent via-amber-500 to-rose-500'
                                                                    : dot.isDrafting
                                                                        ? 'w-16 opacity-70 bg-gradient-to-r from-transparent via-cyan-400 to-blue-500'
                                                                        : 'w-10 opacity-30'
                                                    }`}
                                                    style={{
                                                        background: !dot.isTurbo && !dot.isSlingshot && !dot.isSprinting && !dot.isDrafting ? `linear-gradient(to right, transparent, ${dot.color})` : undefined
                                                    }}
                                                ></div>

                                                {/* THE DOT */}
                                                <div
                                                    className={`w-8 h-8 rounded-full flex items-center justify-center shadow-2xl border-2 border-white relative transition-transform duration-300 ${
                                                        dot.isTurbo
                                                            ? 'scale-135 animate-bounce ring-4 ring-amber-400'
                                                            : dot.isSlingshot
                                                                ? 'scale-125 ring-2 ring-cyan-400'
                                                                : dot.isSprinting
                                                                    ? 'scale-125 animate-pulse'
                                                                    : dot.isDrafting
                                                                        ? 'scale-110'
                                                                        : ''
                                                    }`}
                                                    style={{
                                                        backgroundColor: dot.color,
                                                        boxShadow: dot.isTurbo
                                                            ? `0 0 24px #f59e0b, 0 0 48px #ef4444`
                                                            : dot.isSlingshot
                                                                ? `0 0 20px #06b6d4, 0 0 40px #3b82f6`
                                                                : `0 0 16px ${dot.color}, 0 0 32px ${dot.color}`
                                                    }}
                                                >
                                                    <span className="text-[10px] font-black text-white drop-shadow">
                                                        {dot.lane}
                                                    </span>

                                                    {/* ACTION TAGS */}
                                                    {dot.isTurbo && (
                                                        <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-amber-200 bg-gradient-to-r from-amber-600 to-rose-600 px-2 py-0.5 rounded border border-amber-300 whitespace-nowrap shadow-xl animate-bounce">
                                                            🚀 TURBO!
                                                        </span>
                                                    )}
                                                    {dot.isSlingshot && !dot.isTurbo && (
                                                        <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-cyan-200 bg-gradient-to-r from-cyan-600 to-blue-600 px-2 py-0.5 rounded border border-cyan-300 whitespace-nowrap shadow-xl animate-pulse">
                                                            ⚡ SAPAN!
                                                        </span>
                                                    )}
                                                    {dot.isSprinting && !dot.isTurbo && !dot.isSlingshot && (
                                                        <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-amber-300 bg-amber-950/90 px-1.5 py-0.5 rounded border border-amber-400 whitespace-nowrap shadow-lg animate-bounce">
                                                            🔥 SPRINT
                                                        </span>
                                                    )}
                                                    {dot.isDrafting && !dot.isTurbo && !dot.isSlingshot && !dot.isSprinting && (
                                                        <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-cyan-300 bg-cyan-950/90 px-1.5 py-0.5 rounded border border-cyan-400 whitespace-nowrap shadow">
                                                            ⚡ RÜZGAR TÜNELİ
                                                        </span>
                                                    )}
                                                    {dot.isSurging && !dot.isTurbo && !dot.isSlingshot && !dot.isSprinting && !dot.isDrafting && (
                                                        <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-purple-300 bg-purple-950/90 px-1.5 py-0.5 rounded border border-purple-400 whitespace-nowrap shadow">
                                                            🚀 ŞAHLANMA
                                                        </span>
                                                    )}
                                                    {dot.isFatigued && (
                                                        <span className="absolute -top-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-rose-300 bg-rose-950/90 px-1.5 py-0.5 rounded border border-rose-400 whitespace-nowrap shadow">
                                                            ⚠️ Yorgun
                                                        </span>
                                                    )}
                                                    {isMyHorse && (
                                                        <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-emerald-300 bg-emerald-950/90 px-1.5 py-0.5 rounded border border-emerald-400 whitespace-nowrap shadow z-20">
                                                            ★ SENİN ATIN
                                                        </span>
                                                    )}
                                                    {!isMyHorse && horsePlayers.length > 0 && (
                                                        <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[8px] font-black text-slate-200 bg-slate-950/90 px-1.5 py-0.5 rounded border border-white/20 whitespace-nowrap shadow z-20 flex items-center gap-1">
                                                            <Icons.Users size={8} />
                                                            {horsePlayers.map((p) => (p.username === myUsername ? (lang === 'TR' ? 'Sen' : 'You') : p.username)).join(', ')}
                                                        </span>
                                                    )}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>

                    {/* LIVE RANKINGS & LOBBY BETS HUD */}
                    <div className="space-y-6">
                        {/* LIVE RANKINGS LEADERBOARD */}
                        <div className="bg-slate-900/80 border border-white/10 rounded-3xl p-5 backdrop-blur-xl shadow-xl flex flex-col justify-between">
                            <div>
                                <h3 className="font-black text-sm text-white mb-4 flex items-center justify-between">
                                    <span className="flex items-center gap-2">
                                        <Icons.Trophy size={16} className="text-amber-400" />
                                        {t.liveRankings || 'Canlı Sıralama'}
                                    </span>
                                    <span className="text-[10px] text-slate-400 font-mono font-bold">
                                        Fark (m / s)
                                    </span>
                                </h3>

                                <div className="space-y-2">
                                    {sortedDots.map((dot, index) =>
                                    {
                                        const isMyHorse = selectedContender?.id === dot.id;
                                        const medal = index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `${index + 1}.`;
                                        const horsePlayers = playerBetsByHorseId[dot.id] || [];

                                        return (
                                            <div
                                                key={dot.id}
                                                className={`p-2.5 rounded-2xl border transition-all ${isMyHorse ? 'bg-indigo-600/30 border-indigo-400 shadow-md shadow-indigo-500/20' : 'bg-slate-950/60 border-white/5'}`}
                                            >
                                                <div className="flex items-center justify-between">
                                                    <div className="flex items-center gap-2.5 truncate">
                                                        <span className="w-5 text-center font-black text-xs text-slate-300">{medal}</span>
                                                        <div
                                                            className="w-3.5 h-3.5 rounded-full shrink-0"
                                                            style={{ backgroundColor: dot.color }}
                                                        ></div>
                                                        <span className="font-bold text-xs text-white truncate">
                                                            {lang === 'TR' ? dot.nameTr : dot.name}
                                                        </span>
                                                    </div>

                                                    <div className="text-right shrink-0 font-mono">
                                                        <span className="text-[11px] font-black text-slate-300 block">
                                                            {Math.round(dot.distance)}m
                                                        </span>
                                                        {dot.gapMeters > 0 && (
                                                            <span className="text-[9px] text-slate-500 block">
                                                                +{dot.gapMeters}m (+{dot.gapSeconds}s)
                                                            </span>
                                                        )}
                                                    </div>
                                                </div>

                                                {/* WHO BET ON THIS HORSE BADGES */}
                                                {horsePlayers.length > 0 && (
                                                    <div className="mt-2 pt-1.5 border-t border-white/5 flex items-center gap-1 flex-wrap">
                                                        {horsePlayers.map((p) => (
                                                            <span
                                                                key={p.id}
                                                                className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[8px] font-bold ${
                                                                    p.username === myUsername
                                                                        ? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/30'
                                                                        : p.isBot
                                                                            ? 'bg-purple-950/60 text-purple-300 border border-purple-800/40'
                                                                            : 'bg-slate-900 text-slate-300 border border-white/10'
                                                                }`}
                                                            >
                                                                {p.isBot ? <Icons.Bot size={8} /> : <Icons.User size={8} />}
                                                                <span className="truncate max-w-[55px]">{p.username === myUsername ? (lang === 'TR' ? 'Sen' : 'You') : p.username}</span>
                                                                <span className="text-amber-400 font-mono">{formatMoney(p.bet.amount)}</span>
                                                            </span>
                                                        ))}
                                                    </div>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                            </div>

                            {/* YOUR BET MINI CARD */}
                            {selectedContender && (
                                <div className="mt-4 pt-4 border-t border-white/10 flex items-center justify-between bg-slate-950/80 p-3 rounded-2xl">
                                    <div>
                                        <span className="text-[9px] text-slate-400 font-bold uppercase block">{t.yourBet || 'Senin Bahsin'}</span>
                                        <span className="text-xs font-black text-white">{lang === 'TR' ? selectedContender.nameTr : selectedContender.name}</span>
                                    </div>
                                    <span className="text-xs font-black text-amber-400">{formatMoney(myPlayer?.bet?.amount || betAmount)}</span>
                                </div>
                            )}
                        </div>

                        {/* LOBBY BETS & LIVE STATUS CARD */}
                        <div className="bg-slate-900/80 border border-white/10 rounded-3xl p-5 backdrop-blur-xl shadow-xl space-y-3">
                            <div className="flex items-center justify-between border-b border-white/10 pb-2">
                                <h4 className="font-black text-xs text-slate-300 uppercase tracking-wider flex items-center gap-2">
                                    <Icons.Users size={14} className="text-indigo-400" />
                                    {t.allLobbyBetsTitle || 'LOBİ BAHİSLERİ'} ({allRoomPlayers.length})
                                </h4>
                                <span className="text-[9px] text-slate-500 font-mono font-bold">
                                    {t.currentRank || 'Anlık Sıra'}
                                </span>
                            </div>

                            <div className="space-y-2 max-h-64 overflow-y-auto pr-1">
                                {allRoomPlayers.map((p) =>
                                {
                                    const isMe = p.username === myUsername;
                                    const bet = p.bet;
                                    const horseDot = dots.find((d) => d.id === bet?.horseId);
                                    const liveRank = horseDot?.rank;
                                    const rankMedal = liveRank === 1 ? '🥇 1.' : liveRank === 2 ? '🥈 2.' : liveRank === 3 ? '🥉 3.' : liveRank ? `${liveRank}.` : '-';
                                    const rankColor = liveRank === 1
                                        ? 'text-amber-400 bg-amber-500/10 border-amber-500/30'
                                        : liveRank === 2
                                            ? 'text-slate-200 bg-slate-500/10 border-slate-400/30'
                                            : liveRank === 3
                                                ? 'text-orange-300 bg-orange-500/10 border-orange-500/30'
                                                : 'text-slate-400 bg-slate-950/60 border-white/5';

                                    return (
                                        <div
                                            key={p.id}
                                            className={`p-2.5 rounded-2xl border flex items-center justify-between gap-2 text-xs transition-all ${
                                                isMe
                                                    ? 'bg-indigo-950/50 border-indigo-500/40 shadow-sm'
                                                    : 'bg-slate-950/60 border-white/5'
                                            }`}
                                        >
                                            <div className="flex items-center gap-2 truncate">
                                                <div className={`w-6 h-6 rounded-xl flex items-center justify-center font-bold text-[10px] shrink-0 border ${
                                                    p.isBot
                                                        ? 'bg-purple-900/40 border-purple-600/30 text-purple-300'
                                                        : isMe
                                                            ? 'bg-emerald-900/40 border-emerald-500/40 text-emerald-300'
                                                            : 'bg-slate-800 border-white/10 text-white'
                                                }`}>
                                                    {p.isBot ? <Icons.Bot size={12} /> : p.username.charAt(0).toUpperCase()}
                                                </div>
                                                <div className="truncate">
                                                    <div className="flex items-center gap-1 font-bold text-white truncate text-[11px]">
                                                        <span className="truncate">{p.username}</span>
                                                        {isMe && (
                                                            <span className="px-1 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded text-[8px] font-black uppercase">
                                                                {lang === 'TR' ? 'Sen' : 'You'}
                                                            </span>
                                                        )}
                                                        {p.isHost && <Icons.Crown size={10} className="text-amber-400 shrink-0" />}
                                                    </div>
                                                    {bet ? (
                                                        <div className="flex items-center gap-1.5 text-[10px] text-slate-400">
                                                            <span
                                                                className="w-2 h-2 rounded-full shrink-0"
                                                                style={{ backgroundColor: bet.color }}
                                                            ></span>
                                                            <span className="truncate font-semibold text-slate-200">
                                                                {lang === 'TR' ? bet.horseNameTr : bet.horseName}
                                                            </span>
                                                            <span className="text-amber-400 font-mono font-bold">
                                                                ({formatMoney(bet.amount)})
                                                            </span>
                                                        </div>
                                                    ) : (
                                                        <span className="text-[10px] text-slate-500">{t.noBet || 'Bahis Yok'}</span>
                                                    )}
                                                </div>
                                            </div>

                                            {/* LIVE RANK BADGE */}
                                            {bet && (
                                                <div className="text-right shrink-0">
                                                    <span className={`px-2 py-0.5 rounded-lg border font-mono font-black text-[10px] ${rankColor}`}>
                                                        {rankMedal}
                                                    </span>
                                                </div>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    // ──────────────────────────────────────────────────────────────────────────
    // 4. RACE RESULTS & PODIUM VIEW
    // ──────────────────────────────────────────────────────────────────────────
    if (view === 'result' && raceResult)
    {
        const winner = raceResult.winner;
        const podium = raceResult.podium || [];
        const myPayout = raceResult.payouts?.find((p) => p.username === myUsername);
        const isWin = myPayout?.isWinner;
        const isRunnerUp = myPayout?.isRunnerUp;
        const isThirdPlace = myPayout?.isThirdPlace;
        const isProfitable = myPayout && myPayout.profit > 0;

        const bannerBgClass = isWin
            ? 'bg-gradient-to-b from-emerald-950/80 via-slate-900 to-slate-950 border-emerald-500/40 shadow-emerald-500/20'
            : isRunnerUp
                ? 'bg-gradient-to-b from-amber-950/80 via-slate-900 to-slate-950 border-amber-500/40 shadow-amber-500/20'
                : isThirdPlace
                    ? 'bg-gradient-to-b from-orange-950/80 via-slate-900 to-slate-950 border-orange-500/40 shadow-orange-500/20'
                    : 'bg-gradient-to-b from-rose-950/80 via-slate-900 to-slate-950 border-rose-500/40 shadow-rose-500/20';

        const bannerTitle = isWin
            ? (t.youWon || 'TEBRİKLER, KAZANDINIZ!')
            : isRunnerUp
                ? (t.secondPlaceWon || '🥈 2. SIRA TESELLİ KAZANCI! (Oranın Yarısı)')
                : isThirdPlace
                    ? (t.thirdPlaceAmorti || '🥉 3. SIRA AMORTİ! (Bahis İade Edildi)')
                    : (t.youLost || 'BU SEFER OLMADI');

        return (
            <div className="w-full max-w-4xl mx-auto px-4 py-8 animate-in zoom-in-95 duration-500">
                {/* WIN / LOSS BANNER */}
                <div className={`p-8 rounded-3xl border text-center shadow-2xl backdrop-blur-xl mb-8 relative overflow-hidden ${bannerBgClass}`}>
                    <div className="w-20 h-20 mx-auto rounded-3xl flex items-center justify-center mb-4 shadow-2xl" style={{ backgroundColor: winner?.color }}>
                        <Icons.Trophy size={40} className="text-white drop-shadow" />
                    </div>

                    <p className="text-xs font-black uppercase tracking-[0.3em] text-slate-400 mb-1">{t.raceWinner || 'YARIŞIN ŞAMPİYONU'}</p>
                    <h2 className="text-4xl font-black text-white mb-4">
                        {lang === 'TR' ? winner?.nameTr : winner?.name}
                    </h2>

                    {myPayout && (
                        <div className="inline-block px-6 py-3 rounded-2xl bg-slate-950/80 border border-white/10 mb-2">
                            <span className="text-xs font-bold text-slate-400 block mb-1">
                                {bannerTitle}
                            </span>
                            <span className={`text-2xl font-black ${isWin ? 'text-emerald-400' : isRunnerUp ? (isProfitable ? 'text-amber-400' : 'text-slate-300') : isThirdPlace ? 'text-cyan-300' : 'text-rose-400'}`}>
                                {isThirdPlace
                                    ? `+${formatMoney(myPayout.betAmount)} (${lang === 'TR' ? 'İade' : 'Refund'})`
                                    : myPayout.profit >= 0
                                        ? `+${formatMoney(myPayout.profit)}`
                                        : `-${formatMoney(Math.abs(myPayout.profit))}`}
                            </span>
                        </div>
                    )}
                </div>

                {/* PODIUM 1, 2, 3 */}
                <div className="grid grid-cols-3 gap-4 mb-8">
                    {podium.map((p, idx) => (
                        <div
                            key={p.horseId}
                            className={`p-6 rounded-3xl border text-center backdrop-blur-md shadow-xl ${idx === 0 ? 'bg-amber-500/10 border-amber-500/30' : idx === 1 ? 'bg-slate-800/40 border-slate-400/30' : 'bg-orange-800/20 border-orange-600/30'}`}
                        >
                            <span className="text-3xl mb-2 block">{idx === 0 ? '🥇' : idx === 1 ? '🥈' : '🥉'}</span>
                            <div className="w-4 h-4 rounded-full mx-auto mb-2" style={{ backgroundColor: p.color }}></div>
                            <h4 className="font-black text-sm text-white">{lang === 'TR' ? p.nameTr : p.name}</h4>
                            <span className="text-[11px] text-slate-400 font-bold">{idx + 1}. {lang === 'TR' ? 'Sıra' : 'Place'}</span>
                        </div>
                    ))}
                </div>

                {/* ALL LOBBY PLAYER RESULTS & PAYOUTS TABLE */}
                {raceResult.payouts && raceResult.payouts.length > 0 && (
                    <div className="bg-slate-900/80 border border-white/10 p-5 rounded-3xl backdrop-blur-xl mb-8 shadow-xl">
                        <h4 className="font-black text-xs text-slate-300 uppercase tracking-wider mb-4 flex items-center gap-2">
                            <Icons.Users size={16} className="text-indigo-400" />
                            {t.allPlayerResults || 'Tüm Oyuncu Sonuçları & Kazançlar'}
                        </h4>

                        <div className="space-y-2 max-h-72 overflow-y-auto pr-1">
                            {raceResult.payouts.map((p) =>
                            {
                                const isMe = p.username === myUsername;
                                const isWinner = p.isWinner;
                                const isRunnerUp = p.isRunnerUp;
                                const isThirdPlace = p.isThirdPlace;
                                const isProfitable = p.profit > 0;
                                const rankMedal = p.rank === 1 ? '🥇 1.' : p.rank === 2 ? '🥈 2.' : p.rank === 3 ? '🥉 3.' : `${p.rank}.`;

                                return (
                                    <div
                                        key={p.username}
                                        className={`p-3 rounded-2xl border flex items-center justify-between gap-3 text-xs transition-all ${
                                            isMe
                                                ? isWinner
                                                    ? 'bg-emerald-950/40 border-emerald-500/40 shadow-md'
                                                    : 'bg-indigo-950/40 border-indigo-500/40'
                                                : 'bg-slate-950/60 border-white/5'
                                        }`}
                                    >
                                        <div className="flex items-center gap-2.5 truncate">
                                            <div className={`w-7 h-7 rounded-xl flex items-center justify-center font-bold text-[10px] shrink-0 border ${
                                                p.isBot
                                                    ? 'bg-purple-900/40 border-purple-600/30 text-purple-300'
                                                    : isMe
                                                        ? 'bg-emerald-900/40 border-emerald-500/40 text-emerald-300'
                                                        : 'bg-slate-800 border-white/10 text-white'
                                            }`}>
                                                {p.isBot ? <Icons.Bot size={14} /> : p.username.charAt(0).toUpperCase()}
                                            </div>
                                            <div className="truncate">
                                                <div className="flex items-center gap-1.5 font-bold text-white truncate">
                                                    <span className="truncate">{p.username}</span>
                                                    {isMe && (
                                                        <span className="px-1.5 py-0.5 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded text-[8px] font-black uppercase">
                                                            {lang === 'TR' ? 'Sen' : 'You'}
                                                        </span>
                                                    )}
                                                </div>
                                                <div className="flex items-center gap-1.5 text-[10px] text-slate-400 mt-0.5">
                                                    <span className="text-slate-300 font-semibold">{lang === 'TR' ? p.horseNameTr : p.horseName}</span>
                                                    <span className="text-slate-500 font-mono">({rankMedal} {lang === 'TR' ? 'Sıra' : 'Place'})</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="text-right shrink-0">
                                            <span className="text-[10px] text-slate-400 block font-mono">
                                                {t.betAmount || 'Bahis'}: {formatMoney(p.betAmount)} ({p.odds}x)
                                            </span>
                                            <span className={`text-xs font-black font-mono ${
                                                isWinner
                                                    ? 'text-emerald-400'
                                                    : isRunnerUp && isProfitable
                                                        ? 'text-amber-400'
                                                        : isThirdPlace
                                                            ? 'text-cyan-300'
                                                            : 'text-rose-400'
                                            }`}>
                                                {isThirdPlace
                                                    ? `+${formatMoney(p.betAmount)} (${lang === 'TR' ? 'İade' : 'Refund'})`
                                                    : p.profit >= 0
                                                        ? `+${formatMoney(p.profit)}`
                                                        : `-${formatMoney(Math.abs(p.profit))}`}
                                            </span>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                )}

                {/* ACTION BUTTONS */}
                <div className="flex flex-wrap gap-4">
                    <button
                        onClick={handleLeaveRoom}
                        className="flex-1 min-w-[140px] py-4 bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold rounded-2xl transition-all uppercase tracking-wider text-sm"
                    >
                        {t.returnLobby || 'Lobiye Dön'}
                    </button>

                    {setShowDebtPanel && (userBalance < 0 || userProfile?.isDebtor || (myPayout && myPayout.newBalance < 0)) && (
                        <button
                            onClick={() => setShowDebtPanel(true)}
                            className="flex-1 min-w-[200px] py-4 bg-gradient-to-r from-rose-600 to-amber-600 hover:from-rose-500 hover:to-amber-500 text-white font-black rounded-2xl transition-all shadow-xl shadow-rose-600/30 uppercase tracking-wider text-sm flex items-center justify-center gap-2 active:scale-95"
                        >
                            <Icons.Hammer size={18} />
                            {t.debtorJobsTitle || (lang === 'TR' ? 'Borçtan Çıkış (Günlük İş)' : 'Escape Debt')}
                        </button>
                    )}

                    {isHost ? (
                        <button
                            onClick={handleNextRace}
                            className="flex-1 min-w-[140px] py-4 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500 text-white font-black rounded-2xl transition-all shadow-xl shadow-indigo-600/30 uppercase tracking-wider text-sm"
                        >
                            {t.nextRace || 'Yeni Yarışa Geç'}
                        </button>
                    ) : (
                        <div className="flex-1 min-w-[140px] py-4 bg-slate-900 border border-white/10 text-center rounded-2xl text-xs text-slate-400 flex items-center justify-center font-bold">
                            {lang === 'TR' ? 'Kurucunun yeni yarışı başlatması bekleniyor...' : 'Waiting for host to start next round...'}
                        </div>
                    )}
                </div>
            </div>
        );
    }

    return null;
};