const Icon = ({ name, size = 18, className = "" }) => {
    const icons = {
        Lightbulb: <path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A5 5 0 0 0 8 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5M9 18h6M10 22h4" />,
        Shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />,
        Heart: <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />,
        Clock: <React.Fragment><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></React.Fragment>,
        Trophy: <React.Fragment><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></React.Fragment>,
        User: <React.Fragment><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></React.Fragment>,
        Zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
        Play: <polygon points="5 3 19 12 5 21 5 3"/>,
        Plus: <React.Fragment><line x1="12" x2="12" y1="5" y2="19"/><line x1="5" x2="19" y1="12" y2="12"/></React.Fragment>,
        LogIn: <React.Fragment><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" x2="3" y1="12" y2="12"/></React.Fragment>,
        CheckCircle2: <React.Fragment><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></React.Fragment>,
        ZapOff: <React.Fragment><polyline points="12.41 6.75 13 2 10.57 4.92"/><polyline points="18.57 12.91 21 10 15.66 10"/><polyline points="8 8 3 14 12 14 11 22 16 16"/><line x1="2" x2="22" y1="2" y2="22"/></React.Fragment>,
        Ghost: <React.Fragment><path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"/></React.Fragment>,
        Eraser: <React.Fragment><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></React.Fragment>,
        RotateCcw: <React.Fragment><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><polyline points="3 3 3 8 8 8"/></React.Fragment>,
        Activity: <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>,
        Radio: <React.Fragment><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/><path d="M7.76 7.76a6 6 0 0 0 0 8.49"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14"/></React.Fragment>,
        Settings: <React.Fragment><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></React.Fragment>,
        MessageSquare: <React.Fragment><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></React.Fragment>,
        SendHorizontal: <React.Fragment><path d="m3 3 3 9-3 9 19-9Z"/><path d="M6 12h16"/></React.Fragment>,
        X: <React.Fragment><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></React.Fragment>,
        Delete: <React.Fragment><path d="M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z"/><path d="M18 9l-6 6"/><path d="M12 9l6 6"/></React.Fragment>
    };

    return (
        <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
            {icons[name] || null}
        </svg>
    );
};

const Keyboard = ({ rows, onKeyInput }) => {
    return (
        <div className="mt-6 w-full max-w-md mx-auto space-y-2 px-2">
            {rows.map((row, i) => (
                <div key={i} className="flex justify-center gap-1">
                    {row.map((k) => (
                        <button key={k} onClick={() => onKeyInput(k)} className={`keyboard-key rounded-md text-[10px] md:text-sm font-black flex items-center justify-center h-10 md:h-12 shadow-sm ${k.length > 1 ? 'px-3 bg-slate-700 min-w-[50px]' : 'w-8 md:w-10 bg-slate-800 border border-slate-700'}`}>
                            {k === 'BACKSPACE' ? <Icon name="Delete" size={16} /> : k}
                        </button>
                    ))}
                </div>
            ))}
        </div>
    );
};

const AvatarBubble = ({ imageUrl, initials, borderClass = 'border-slate-500', sizeClass = 'w-10 h-10 md:w-12 md:h-12', textSizeClass = 'text-xs' }) => {
    if (imageUrl) {
        return (
            <img
                src={imageUrl}
                alt="avatar"
                className={`${sizeClass} rounded-full border-2 ${borderClass} object-cover bg-slate-900 shadow-lg`}
            />
        );
    }
    return (
        <div className={`${sizeClass} rounded-full border-2 ${borderClass} flex items-center justify-center bg-slate-900 shadow-lg font-black ${textSizeClass} text-slate-200`}>
            {(initials || '??').slice(0, 2).toUpperCase()}
        </div>
    );
};

const HPBar = ({ value, fillClass, trackClass }) => {
    const safeValue = Math.max(0, Math.min(100, value ?? 0));
    return <progress className={`hp-bar ${fillClass}`} max="100" value={safeValue} />;
};

const LobbyView = ({
    user,
    authLoading,
    authError,
    authForm,
    setAuthForm,
    onAuthSignIn,
    onAuthRegister,
    onAuthVerify,
    onAuthGuest,
    onAuthSignOut,
    otpPending,
    profileLoading,
    profileStats,
    profileSaveState,
    onSaveProfile,
    playerName,
    setPlayerName,
    playerAvatar,
    setPlayerAvatar,
    playerAvatarImageUrl,
    onAvatarImageFileSelect,
    gameMode,
    setGameMode,
    botOpponentEnabled,
    setBotOpponentEnabled,
    lobbyMaxPlayers,
    setLobbyMaxPlayers,
    maxOnlinePlayers,
    battleRounds,
    setBattleRounds,
    hardCapEnabled,
    setHardCapEnabled,
    checkWordEnabled,
    setCheckWordEnabled,
    initLocalGame,
    createLobby,
    lobbyStatus,
    joinLobby,
    lobbyCode,
    lobbyError,
    waitingPlayers,
    waitingPlayerLimit,
    leaderboardRows,
    leaderboardLoading,
    leaderboardError,
    liveOverlaySettings,
    onLiveOverlaySettingsChange,
    onOpenLiveOverlay,
    onCloseLiveOverlay,
    liveOverlayStatus,
}) => {
    const players = Array.isArray(waitingPlayers) ? waitingPlayers : [];
    const waitingSlots = Math.max(0, (waitingPlayerLimit || 2) - players.length);

    const getInitials = (name) => {
        if (!name) return '??';
        const clean = String(name).trim();
        if (!clean) return '??';
        return clean.slice(0, 2).toUpperCase();
    };

    const accountLabel = user?.isAnonymous ? 'Guest Account' : 'Registered Account';
    const overlay = liveOverlaySettings || {};

    return (
        <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-slate-900 to-black text-white">
            <div className="max-w-2xl w-full space-y-8 text-center animate-in fade-in zoom-in duration-700">
                <h1 className="text-5xl md:text-7xl font-black italic tracking-tighter uppercase"><span className="text-cyan-400 neon-text-cyan">Wordle</span> <span className="text-pink-500 neon-text-pink">Battle</span></h1>
                <div className="glass p-6 md:p-8 rounded-3xl shadow-2xl space-y-6">
                    <div className="rounded-2xl border border-slate-700 bg-slate-900/60 p-4 text-left space-y-3">
                        <div className="flex items-center justify-between gap-3">
                            <div>
                                <p className="text-[10px] uppercase tracking-widest font-black text-cyan-300">Account</p>
                                <p className="text-xs text-slate-300">{accountLabel}</p>
                            </div>
                            <button onClick={onAuthSignOut} disabled={!user || authLoading} className="text-xs px-3 py-2 rounded-lg border border-slate-600 hover:border-pink-400 disabled:opacity-50 disabled:cursor-not-allowed">
                                Sign Out
                            </button>
                        </div>

                        <div className="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto_auto_auto] gap-2">
                            <input
                                type="tel"
                                value={authForm?.phoneNumber || ''}
                                onChange={(e) => setAuthForm((prev) => ({ ...prev, phoneNumber: e.target.value }))}
                                placeholder="+15551234567"
                                className="bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-sm focus:border-cyan-400 outline-none"
                            />
                            <input
                                type="text"
                                value={authForm?.otpCode || ''}
                                onChange={(e) => setAuthForm((prev) => ({ ...prev, otpCode: e.target.value.replace(/[^0-9]/g, '').slice(0, 6) }))}
                                placeholder="sms code"
                                className="bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-sm focus:border-cyan-400 outline-none"
                            />
                            <button onClick={onAuthSignIn} disabled={authLoading} className="px-3 py-2 rounded-xl border border-cyan-500/60 text-xs font-black uppercase tracking-wider hover:bg-cyan-500/20 disabled:opacity-50">
                                SMS Sign In
                            </button>
                            <button onClick={onAuthRegister} disabled={authLoading || !user?.isAnonymous} className="px-3 py-2 rounded-xl border border-pink-500/60 text-xs font-black uppercase tracking-wider hover:bg-pink-500/20 disabled:opacity-50">
                                {user?.isAnonymous ? 'Upgrade' : 'Linked'}
                            </button>
                            <button onClick={otpPending ? onAuthVerify : onAuthGuest} disabled={authLoading} className="px-3 py-2 rounded-xl border border-slate-500/60 text-xs font-black uppercase tracking-wider hover:bg-slate-700/40 disabled:opacity-50">
                                {otpPending ? 'Verify' : 'Guest'}
                            </button>
                        </div>
                        <div id="recaptcha-container" className="min-h-[1px]" aria-hidden="true"></div>

                        {(authError || profileSaveState?.message) && (
                            <p className={`text-xs ${authError ? 'text-red-300' : 'text-emerald-300'}`}>{authError || profileSaveState?.message}</p>
                        )}
                    </div>

                    <div className="text-left">
                        <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-2 block">Pilot Handle</label>
                        <input type="text" value={playerName} onChange={(e) => setPlayerName(e.target.value.toUpperCase())} placeholder="ENTER CALLSIGN" title="Pilot Handle" aria-label="Pilot Handle" className="w-full bg-slate-800 border-2 border-slate-700 rounded-2xl px-6 py-4 text-xl md:text-2xl font-black focus:border-cyan-400 outline-none transition-all uppercase" />
                    </div>
                    <div className="grid grid-cols-[96px_1fr_auto] gap-2 items-center text-left">
                        <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Avatar</label>
                        <input
                            type="text"
                            value={playerAvatar}
                            onChange={(e) => setPlayerAvatar(e.target.value.toUpperCase().slice(0, 2))}
                            placeholder="AN"
                            title="Avatar"
                            aria-label="Avatar"
                            className="bg-slate-800 border-2 border-slate-700 rounded-xl px-4 py-2 text-sm font-black focus:border-cyan-400 outline-none uppercase"
                        />
                        <button onClick={onSaveProfile} disabled={profileSaveState?.saving || profileLoading} className="px-3 py-2 rounded-xl border border-cyan-500/60 text-xs font-black uppercase tracking-wider hover:bg-cyan-500/20 disabled:opacity-50">
                            {profileSaveState?.saving ? 'Saving' : 'Save'}
                        </button>
                    </div>
                    <div className="grid grid-cols-[96px_1fr_auto] gap-2 items-center text-left">
                        <label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Avatar Image</label>
                        <input
                            type="file"
                            accept="image/*"
                            onChange={(e) => onAvatarImageFileSelect?.(e.target.files?.[0] || null)}
                            className="bg-slate-800 border-2 border-slate-700 rounded-xl px-3 py-2 text-xs text-slate-300 file:mr-2 file:rounded-lg file:border-0 file:bg-cyan-500/20 file:px-2 file:py-1 file:text-cyan-200 file:font-black"
                        />
                        {playerAvatarImageUrl ? (
                            <img
                                src={playerAvatarImageUrl}
                                alt="Profile avatar"
                                className="w-10 h-10 rounded-full border border-cyan-400/60 object-cover bg-slate-900"
                            />
                        ) : (
                            <div className="w-10 h-10 rounded-full border border-slate-600 bg-slate-900 flex items-center justify-center text-[10px] font-black text-slate-300">{getInitials(playerAvatar)}</div>
                        )}
                    </div>
                    <div className="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs">
                        <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-500 uppercase text-[9px]">Ranked W</p><p className="font-black text-emerald-300">{profileStats?.wins || 0}</p></div>
                        <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-500 uppercase text-[9px]">Ranked L</p><p className="font-black text-rose-300">{profileStats?.losses || 0}</p></div>
                        <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-500 uppercase text-[9px]">Ranked M</p><p className="font-black text-cyan-300">{profileStats?.matches || 0}</p></div>
                        <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-500 uppercase text-[9px]">Solo W</p><p className="font-black text-emerald-300">{profileStats?.localWins || 0}</p></div>
                        <div className="rounded-xl border border-slate-800 bg-slate-900/60 p-2"><p className="text-slate-500 uppercase text-[9px]">Solo L</p><p className="font-black text-rose-300">{profileStats?.localLosses || 0}</p></div>
                    </div>
                    <div className="grid grid-cols-3 gap-2">
                        {['battle', 'all-out', 'time-attack'].map((m) => (
                            <button key={m} onClick={() => setGameMode(m)} className={`p-3 rounded-xl border-2 transition-all text-[10px] font-bold uppercase ${gameMode === m ? 'border-pink-500 bg-pink-500/10' : 'border-slate-800 opacity-60'}`}>{m.replace('-', ' ')}</button>
                        ))}
                    </div>
                    {gameMode === 'battle' && (
                        <div className="flex gap-2">
                            {[1, 3, 5].map((r) => (
                                <button key={r} onClick={() => setBattleRounds(r)} className={`flex-1 py-3 rounded-xl border-2 font-black transition-all ${battleRounds === r ? 'border-cyan-400 bg-cyan-400/20 text-white shadow-[0_0_10px_rgba(34,211,238,0.3)]' : 'border-slate-800 text-slate-500'}`}>{r} Rounds</button>
                            ))}
                        </div>
                    )}
                    <div className="space-y-2 text-left">
                        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Guess Rule</p>
                        <div className="grid grid-cols-2 gap-2">
                            <button
                                onClick={() => setHardCapEnabled(false)}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${!hardCapEnabled ? 'border-cyan-400 bg-cyan-400/20 text-white shadow-[0_0_10px_rgba(34,211,238,0.3)]' : 'border-slate-800 text-slate-500'}`}
                            >
                                Rolling
                            </button>
                            <button
                                onClick={() => setHardCapEnabled(true)}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${hardCapEnabled ? 'border-pink-500 bg-pink-500/10 text-white' : 'border-slate-800 text-slate-500'}`}
                            >
                                Hard Cap 6
                            </button>
                        </div>
                    </div>
                    <div className="space-y-2 text-left">
                        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Word Check</p>
                        <div className="grid grid-cols-2 gap-2">
                            <button
                                onClick={() => setCheckWordEnabled(true)}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${checkWordEnabled ? 'border-cyan-400 bg-cyan-400/20 text-white shadow-[0_0_10px_rgba(34,211,238,0.3)]' : 'border-slate-800 text-slate-500'}`}
                            >
                                Enabled
                            </button>
                            <button
                                onClick={() => setCheckWordEnabled(false)}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${!checkWordEnabled ? 'border-pink-500 bg-pink-500/10 text-white' : 'border-slate-800 text-slate-500'}`}
                            >
                                Off
                            </button>
                        </div>
                    </div>
                    <div className="space-y-2 text-left">
                        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Solo Opponent</p>
                        <div className="grid grid-cols-2 gap-2">
                            <button
                                onClick={() => setBotOpponentEnabled(true)}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${botOpponentEnabled ? 'border-cyan-400 bg-cyan-400/20 text-white shadow-[0_0_10px_rgba(34,211,238,0.3)]' : 'border-slate-800 text-slate-500'}`}
                            >
                                Bot On
                            </button>
                            <button
                                onClick={() => setBotOpponentEnabled(false)}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${!botOpponentEnabled ? 'border-pink-500 bg-pink-500/10 text-white' : 'border-slate-800 text-slate-500'}`}
                            >
                                No Bot
                            </button>
                        </div>
                    </div>
                    <div className="space-y-2 text-left rounded-2xl border border-emerald-500/30 bg-emerald-950/20 p-3">
                        <div className="flex items-center justify-between gap-2">
                            <p className="text-[10px] font-black text-emerald-300 uppercase tracking-widest">Live Overlay</p>
                            <span className={`text-[9px] font-black uppercase tracking-widest ${liveOverlayStatus?.isOpen ? 'text-emerald-300' : 'text-slate-500'}`}>
                                {liveOverlayStatus?.isOpen ? 'Window Open' : 'Window Closed'}
                            </span>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                            <button
                                onClick={() => onLiveOverlaySettingsChange?.({ enabled: true })}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${overlay.enabled ? 'border-emerald-400 bg-emerald-400/20 text-white shadow-[0_0_10px_rgba(74,222,128,0.3)]' : 'border-slate-800 text-slate-500'}`}
                            >
                                Enabled
                            </button>
                            <button
                                onClick={() => onLiveOverlaySettingsChange?.({ enabled: false })}
                                className={`py-3 rounded-xl border-2 font-black transition-all ${!overlay.enabled ? 'border-pink-500 bg-pink-500/10 text-white' : 'border-slate-800 text-slate-500'}`}
                            >
                                Off
                            </button>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                            <button
                                onClick={onOpenLiveOverlay}
                                disabled={!overlay.enabled}
                                className="py-2 rounded-xl border border-emerald-400/70 text-xs font-black uppercase tracking-wider hover:bg-emerald-500/20 disabled:opacity-40"
                            >
                                Open Overlay
                            </button>
                            <button
                                onClick={onCloseLiveOverlay}
                                className="py-2 rounded-xl border border-slate-600 text-xs font-black uppercase tracking-wider hover:bg-slate-700/40"
                            >
                                Close Overlay
                            </button>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                            <div>
                                <label className="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-1 block">Ticker Text</label>
                                <input
                                    type="text"
                                    maxLength={120}
                                    value={overlay.tickerText || ''}
                                    onChange={(e) => onLiveOverlaySettingsChange?.({ tickerText: e.target.value })}
                                    placeholder="LIVE WORDLE BATTLE"
                                    className="w-full bg-slate-800 border border-slate-700 rounded-xl px-3 py-2 text-xs focus:border-emerald-400 outline-none"
                                />
                            </div>
                            <div>
                                <label className="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-1 block">Text Scale</label>
                                <input
                                    type="range"
                                    min="80"
                                    max="170"
                                    step="5"
                                    value={overlay.textScale || 100}
                                    onChange={(e) => onLiveOverlaySettingsChange?.({ textScale: parseInt(e.target.value, 10) })}
                                    className="w-full accent-emerald-400"
                                />
                            </div>
                        </div>
                        <div className="grid grid-cols-2 gap-2">
                            <div>
                                <label className="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-1 block">Ticker Speed</label>
                                <input
                                    type="range"
                                    min="8"
                                    max="40"
                                    step="1"
                                    value={overlay.tickerSpeedSec || 18}
                                    onChange={(e) => onLiveOverlaySettingsChange?.({ tickerSpeedSec: parseInt(e.target.value, 10) })}
                                    className="w-full accent-cyan-400"
                                />
                            </div>
                            <div className="space-y-1">
                                <label className="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-1 block">Ticker Position</label>
                                <div className="grid grid-cols-2 gap-1">
                                    <button
                                        onClick={() => onLiveOverlaySettingsChange?.({ tickerPosition: 'bottom' })}
                                        className={`py-1 rounded-lg border text-[10px] font-black uppercase ${overlay.tickerPosition !== 'top' ? 'border-emerald-500/70 text-emerald-300 bg-emerald-500/10' : 'border-slate-700 text-slate-500'}`}
                                    >
                                        Bottom
                                    </button>
                                    <button
                                        onClick={() => onLiveOverlaySettingsChange?.({ tickerPosition: 'top' })}
                                        className={`py-1 rounded-lg border text-[10px] font-black uppercase ${overlay.tickerPosition === 'top' ? 'border-emerald-500/70 text-emerald-300 bg-emerald-500/10' : 'border-slate-700 text-slate-500'}`}
                                    >
                                        Top
                                    </button>
                                </div>
                            </div>
                        </div>
                        {!!liveOverlayStatus?.error && (
                            <p className="text-[10px] text-red-300">{liveOverlayStatus.error}</p>
                        )}
                    </div>
                    <div className="space-y-2 text-left">
                        <p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Online Lobby Size</p>
                        <div className="grid grid-cols-3 gap-2">
                            {Array.from({ length: Math.max(0, (maxOnlinePlayers || 4) - 1) }, (_, idx) => idx + 2).map((count) => (
                                <button key={count} onClick={() => setLobbyMaxPlayers(count)} className={`py-3 rounded-xl border-2 font-black transition-all ${lobbyMaxPlayers === count ? 'border-pink-500 bg-pink-500/10 text-white' : 'border-slate-800 text-slate-500'}`}>
                                    {count}P
                                </button>
                            ))}
                        </div>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        <button onClick={initLocalGame} className="bg-white text-black font-black py-4 md:py-5 rounded-2xl uppercase tracking-widest hover:bg-cyan-400 transition-all flex items-center justify-center gap-2"><Icon name="Play" fill="currentColor" /> Solo Arena</button>
                        <button onClick={createLobby} disabled={lobbyStatus !== 'idle'} className="bg-slate-800 text-white font-black py-4 md:py-5 rounded-2xl border-2 border-slate-700 uppercase tracking-widest hover:border-pink-500 transition-all flex items-center justify-center gap-2">
                            {lobbyStatus === 'creating' && <span className="animate-pulse flex items-center gap-2"><Icon name="Radio" className="animate-spin" size={16} /> Creating...</span>}
                            {lobbyStatus === 'waiting' && <span className="animate-pulse">Waiting for Pilot...</span>}
                            {lobbyStatus === 'idle' && <><Icon name="Plus" /> Create Lobby</>}
                        </button>
                    </div>
                    <div className="relative pt-4 border-t border-slate-800 flex gap-2">
                        <input placeholder="ENTER CODE..." className="flex-1 bg-slate-800 border-2 border-slate-700 rounded-xl px-4 py-3 font-mono text-center uppercase focus:border-pink-500 outline-none" id="join-code" />
                        <button onClick={() => joinLobby(document.getElementById('join-code').value)} title="Join Lobby" aria-label="Join Lobby" className="bg-pink-600 px-6 rounded-xl hover:bg-pink-500 transition-colors"><Icon name="LogIn" /></button>
                    </div>
                    {(lobbyStatus === 'creating' || lobbyStatus === 'waiting') && (
                        <div className="glass p-6 rounded-2xl border-cyan-500/50 animate-in slide-in-from-top-4 text-center space-y-3">
                            {lobbyStatus === 'creating' && (
                                <>
                                    <p className="text-[10px] text-cyan-400 font-black tracking-widest uppercase mb-1">Initializing Sync Link...</p>
                                    <p className="text-3xl font-mono font-black text-white tracking-[0.2em]">{lobbyCode}</p>
                                    <div className="flex justify-center gap-2">
                                        <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
                                        <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse pulse-delay-1"></div>
                                        <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse pulse-delay-2"></div>
                                    </div>
                                </>
                            )}
                            {lobbyStatus === 'waiting' && (
                                <>
                                    <p className="text-[10px] text-cyan-400 font-black tracking-widest uppercase mb-1">Sync Link Established</p>
                                    <p className="text-4xl font-mono font-black text-white tracking-[0.2em]">{lobbyCode}</p>
                                    <p className="text-xs text-slate-400">Share this code and wait for all pilots. {players.length}/{waitingPlayerLimit || 2} connected.</p>
                                    <div className="mt-3 grid grid-cols-2 gap-2 text-left">
                                        {players.map((player) => (
                                            <div key={player.roleKey || player.name} className="rounded-xl border border-cyan-500/30 bg-slate-900/70 px-3 py-2 flex items-center gap-2">
                                                <div className="w-7 h-7 rounded-full border border-cyan-400/60 bg-slate-800 flex items-center justify-center text-[10px] font-black text-cyan-300">{getInitials(player.avatar || player.name)}</div>
                                                <div className="min-w-0">
                                                    <p className="text-[10px] uppercase tracking-widest text-cyan-200 truncate">{player.name || 'ANON'}</p>
                                                    <p className="text-[9px] text-slate-500">{(player.roleKey || '').toUpperCase()}</p>
                                                </div>
                                            </div>
                                        ))}
                                        {Array.from({ length: waitingSlots }).map((_, idx) => (
                                            <div key={`slot-${idx}`} className="rounded-xl border border-dashed border-slate-700 bg-slate-900/40 px-3 py-2 flex items-center justify-center text-[10px] uppercase tracking-widest text-slate-500">
                                                Waiting...
                                            </div>
                                        ))}
                                    </div>
                                </>
                            )}
                        </div>
                    )}
                    {lobbyError && (
                        <div className="rounded-xl border border-red-500/60 bg-red-950/40 p-3 text-left">
                            <p className="text-[10px] uppercase tracking-widest font-black text-red-300">Lobby Error</p>
                            <p className="text-sm text-red-100">{lobbyError}</p>
                        </div>
                    )}
                    <div className="rounded-2xl border border-cyan-500/30 bg-slate-950/60 p-4 text-left space-y-3">
                        <div className="flex items-center justify-between">
                            <p className="text-[10px] uppercase tracking-widest font-black text-cyan-300">Top Pilots</p>
                            <p className="text-[10px] text-slate-500 uppercase">Wins</p>
                        </div>
                        {leaderboardLoading && <p className="text-sm text-slate-400">Syncing leaderboard...</p>}
                        {leaderboardError && <p className="text-sm text-red-300">{leaderboardError}</p>}
                        {!leaderboardLoading && !leaderboardError && leaderboardRows.length === 0 && (
                            <p className="text-sm text-slate-500">No records yet. First win gets the crown.</p>
                        )}
                        {!leaderboardLoading && !leaderboardError && leaderboardRows.length > 0 && (
                            <div className="max-h-48 overflow-y-auto rounded-xl border border-slate-800">
                                {leaderboardRows.map((row) => (
                                    <div key={row.uid} className="grid grid-cols-[2rem_1fr_3rem_3rem] items-center gap-2 px-3 py-2 border-b border-slate-800 last:border-b-0 text-sm">
                                        <span className="text-cyan-300 font-black">#{row.rank}</span>
                                        <span className="truncate font-bold text-white flex items-center gap-2"><span className="w-6 h-6 rounded-full border border-slate-500 bg-slate-800 flex items-center justify-center text-[9px] font-black text-slate-200 shrink-0">{getInitials(row.avatar || row.name)}</span>{row.name}</span>
                                        <span className="text-green-400 text-right font-black">{row.wins}</span>
                                        <span className="text-pink-400 text-right font-black">{row.losses}</span>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

const BattleView = ({
    playerName,
    playerUid,
    playerPoints,
    isOnline,
    lobbyCode,
    opponentName,
    opponents,
    enemyHp,
    battleRounds,
    enemySolvedCount,
    enemyBoard,
    enemyResults,
    wordLength,
    getTileColor,
    powerUps,
    usePowerUp,
    countdown,
    damageEffect,
    playerSolvedCount,
    playerHp,
    celebration,
    playerBoard,
    playerResults,
    playerCurrentGuess,
    invalidGuessPulse,
    keyboardRows,
    handleKeyInput,
    isPaused,
    setIsPaused,
    initLocalGame,
    exitToLobby,
    showDebug,
    setShowDebug,
    cpuParams,
    setCpuParams,
    gameState,
    battleWords,
    solvedHistory,
    playerRole,
    rematchState,
    endMatchStep,
    setEndMatchStep,
    revealedWords,
    onToggleWordReveal,
    onAcceptRematch,
    onDeclineRematch,
    isRematchSubmitting,
    pendingDebuffId,
    onSelectDebuffTarget,
    onCancelDebuffTarget,
    chatMessages,
    onSendChat,
    playerAvatarImageUrl,
    opponentAvatarImageUrls,
}) => {
    const matchWords = (battleWords || []).slice(0, battleRounds);
    const primaryOpponent = opponents?.[0] || null;
    const myAccepted = Boolean(rematchState?.acceptedBy?.[playerRole]);
    const readyCount = Object.keys(rematchState?.acceptedBy || {}).length;
    const participantCount = isOnline ? Math.max(2, (opponents?.length || 0) + 1) : 1;
    const bothAccepted = readyCount >= participantCount;
    const extraOpponents = (opponents || []).slice(1);

    const getActiveDebuffs = (debuffs) => {
        if (!debuffs) return [];
        const now = Date.now();
        const active = [];
        if (debuffs.glitch > now) active.push({ id: 'glitch', label: 'GLITCH' });
        if (debuffs.ink > now) active.push({ id: 'ink', label: 'INK' });
        if (debuffs.short > now) active.push({ id: 'short', label: 'SHORT' });
        return active;
    };

    const primaryDebuffs = getActiveDebuffs(primaryOpponent?.debuffs);
    const hasTargetingMode = Boolean(pendingDebuffId);
    const targetableClass = hasTargetingMode ? 'relative z-[145] ring-4 ring-cyan-300/95 shadow-[0_0_40px_rgba(34,211,238,0.95)] bg-cyan-500/10 animate-pulse cursor-crosshair' : '';
    const dimmedClass = hasTargetingMode ? 'opacity-45' : '';
    const [chatDraft, setChatDraft] = React.useState('');
    const [isChatHistoryOpen, setIsChatHistoryOpen] = React.useState(false);
    const [isMobileChatOverlayOpen, setIsMobileChatOverlayOpen] = React.useState(false);
    const [visibleLatestChatMessageId, setVisibleLatestChatMessageId] = React.useState(null);
    const mobileChatInputRef = React.useRef(null);

    const sortedChatMessages = Array.isArray(chatMessages)
        ? [...chatMessages].sort((a, b) => (a?.createdAt || 0) - (b?.createdAt || 0))
        : [];
    const latestChatMessage = sortedChatMessages[sortedChatMessages.length - 1] || null;
    const latestChatMessageId = latestChatMessage
        ? (latestChatMessage.id || `${latestChatMessage.senderUid || 'anon'}-${latestChatMessage.createdAt || 0}`)
        : null;
    const latestSenderRole = latestChatMessage?.senderRole || null;
    const resolveMessageIsPlayer = (message) => {
        if (!message) return false;
        if (playerUid && message.senderUid && message.senderUid === playerUid) return true;
        return Boolean(message.senderRole && message.senderRole === playerRole);
    };
    const resolveMessageSenderName = (message) => {
        if (!message) return 'ANON';
        if (resolveMessageIsPlayer(message)) return playerName || message.senderName || 'ANON';

        const byRole = (opponents || []).find((opponent) => opponent.roleKey && opponent.roleKey === message.senderRole);
        if (byRole?.name) return byRole.name;

        const byUid = (opponents || []).find((opponent) => opponent.uid && opponent.uid === message.senderUid);
        if (byUid?.name) return byUid.name;

        return message.senderName || 'ANON';
    };
    const resolveMessageAvatarImageUrl = (message) => {
        if (!message) return '';
        if (resolveMessageIsPlayer(message)) return playerAvatarImageUrl || '';

        if (message.senderUid && opponentAvatarImageUrls?.[message.senderUid]) {
            return opponentAvatarImageUrls[message.senderUid];
        }

        const byRole = (opponents || []).find((opponent) => opponent.roleKey && opponent.roleKey === message.senderRole);
        if (byRole?.uid && opponentAvatarImageUrls?.[byRole.uid]) {
            return opponentAvatarImageUrls[byRole.uid];
        }

        return '';
    };
    const latestIsPlayer = resolveMessageIsPlayer(latestChatMessage);
    const latestIsPrimaryOpponent = Boolean(latestChatMessage && (
        (primaryOpponent?.roleKey && latestSenderRole === primaryOpponent.roleKey)
        || (primaryOpponent?.uid && latestChatMessage.senderUid && latestChatMessage.senderUid === primaryOpponent.uid)
    ));
    const shouldShowLatestChatBadge = Boolean(latestChatMessage && visibleLatestChatMessageId && latestChatMessageId === visibleLatestChatMessageId);
    const chatDisabled = !isOnline;

    React.useEffect(() => {
        if (!latestChatMessageId) {
            setVisibleLatestChatMessageId(null);
            return;
        }

        setVisibleLatestChatMessageId(latestChatMessageId);
        const timeoutId = setTimeout(() => {
            setVisibleLatestChatMessageId((currentId) => (currentId === latestChatMessageId ? null : currentId));
        }, 4500);

        return () => clearTimeout(timeoutId);
    }, [latestChatMessageId]);

    React.useEffect(() => {
        if (!isMobileChatOverlayOpen) return;
        const raf = requestAnimationFrame(() => {
            if (!mobileChatInputRef.current) return;
            mobileChatInputRef.current.focus({ preventScroll: true });
            mobileChatInputRef.current.select();
        });
        return () => cancelAnimationFrame(raf);
    }, [isMobileChatOverlayOpen]);

    const chatTimestamp = (value) => {
        if (!value) return '';
        const date = new Date(value);
        if (Number.isNaN(date.getTime())) return '';
        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    };

    const submitChat = async () => {
        if (!onSendChat || chatDisabled) return;
        const text = chatDraft.trim();
        if (!text) return;
        const sent = await onSendChat(text);
        if (sent) {
            setChatDraft('');
            setIsMobileChatOverlayOpen(false);
        }
    };

    const renderChatBadge = (message, tone = 'player', anchored = true) => {
        if (!message) return null;
        const avatar = (message.avatar || '??').slice(0, 2).toUpperCase();
        const sender = resolveMessageSenderName(message);
        const avatarImageUrl = resolveMessageAvatarImageUrl(message);
        const placementClass = anchored
            ? 'absolute -top-14 left-2 right-2 z-40'
            : 'relative z-30';
        return (
            <div className={`${placementClass} rounded-xl border px-3 py-2 text-left shadow-2xl ${tone === 'player' ? 'border-cyan-400/60 bg-slate-950/95' : 'border-pink-400/60 bg-slate-950/95'}`}>
                <div className="flex items-center gap-2 min-w-0">
                    <AvatarBubble
                        imageUrl={avatarImageUrl}
                        initials={avatar}
                        borderClass={tone === 'player' ? 'border-cyan-300' : 'border-pink-300'}
                        sizeClass="w-7 h-7"
                        textSizeClass="text-[10px]"
                    />
                    <div className="min-w-0 flex-1">
                        <div className="flex items-center justify-between gap-2">
                            <p className={`text-[10px] uppercase tracking-widest font-black truncate ${tone === 'player' ? 'text-cyan-200' : 'text-pink-200'}`}>{sender}</p>
                            <p className="text-[9px] text-slate-500 shrink-0">{chatTimestamp(message.createdAt)}</p>
                        </div>
                        <p className="text-xs text-white truncate">{message.text}</p>
                    </div>
                </div>
            </div>
        );
    };

    const getRoundWinnerLabel = (roundIndex) => {
        const winner = solvedHistory?.[roundIndex];
        if (!winner) return 'No Solve';
        if (winner === 'player') return 'You';
        if (winner === 'enemy') return opponentName;
        if (winner === playerRole) return 'You';
        return opponents?.find((opponent) => opponent.roleKey === winner)?.name || opponentName;
    };

    const isWordVisible = (roundIndex) => {
        if (roundIndex < playerSolvedCount) return true;
        return Boolean(revealedWords?.[roundIndex]);
    };

    return (
        <div className="min-h-screen text-white font-sans overflow-hidden flex flex-col p-2 md:p-8 relative">
            {hasTargetingMode && (
                <div className="fixed inset-0 z-[130] bg-black/72 backdrop-blur-[2px] pointer-events-none" />
            )}
            <div className="flex justify-between items-center mb-2 md:mb-6 z-10 p-2 glass rounded-2xl md:bg-transparent md:border-none">
                <div className="flex items-center gap-2 md:gap-4">
                    <AvatarBubble imageUrl={playerAvatarImageUrl} initials={playerName} borderClass="border-cyan-400" />
                    <div><h2 className="text-[10px] md:text-xs text-gray-400 font-bold uppercase">{playerName}</h2><div className="text-yellow-400 font-black text-xs md:text-sm">{playerPoints} PTS</div></div>
                </div>
                <div className="text-center flex-1 max-w-md mx-4">
                    <h1 className="text-xl md:text-2xl font-black italic uppercase leading-none mb-1 group-hover:text-cyan-400 transition-colors"><span className="text-cyan-400">Wordle</span> <span className="text-pink-500">Arena</span></h1>
                    <p className="text-[8px] text-slate-600 font-mono tracking-widest uppercase hidden md:block">{isOnline ? `Sync Active: ${lobbyCode}` : 'Esc for Tactical Menu'}</p>
                    <div className="hidden md:flex items-center gap-2 mt-2">
                        <input
                            type="text"
                            value={chatDraft}
                            onChange={(e) => setChatDraft(e.target.value)}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                    e.preventDefault();
                                    submitChat();
                                }
                            }}
                            disabled={chatDisabled}
                            maxLength={140}
                            placeholder={chatDisabled ? 'Chat available in online lobbies' : 'Send chat...'}
                            className="flex-1 bg-slate-900/90 border border-slate-700 rounded-lg px-2 py-1 text-xs text-white outline-none focus:border-cyan-400 disabled:opacity-50"
                        />
                        <button type="button" onClick={submitChat} disabled={chatDisabled || !chatDraft.trim()} className="px-2 py-1 rounded-lg border border-cyan-500/60 text-cyan-200 disabled:opacity-40">
                            <Icon name="SendHorizontal" size={14} />
                        </button>
                        <button type="button" onClick={() => setIsChatHistoryOpen((prev) => !prev)} disabled={chatDisabled} className="px-2 py-1 rounded-lg border border-slate-600 text-slate-200 disabled:opacity-40">
                            <Icon name="MessageSquare" size={14} />
                        </button>
                    </div>
                </div>
                <div className="flex items-center gap-2 md:gap-4 text-right">
                    <div className="hidden md:block">
                        <h2 className="text-xs text-gray-400 font-bold uppercase">{opponentName}</h2>
                        <div className="text-pink-500 font-black text-sm">{enemyHp}%</div>
                        {isOnline && extraOpponents.length > 0 && <div className="text-[9px] text-slate-500 uppercase">+{extraOpponents.length} more</div>}
                    </div>
                    <button type="button" onClick={() => setIsMobileChatOverlayOpen((prev) => !prev)} disabled={chatDisabled} className="md:hidden w-8 h-8 rounded-full border border-cyan-400/70 bg-slate-900/80 flex items-center justify-center disabled:opacity-40" title="Open chat" aria-label="Open chat">
                        <Icon name="MessageSquare" size={14} className="text-cyan-200" />
                    </button>
                    <button type="button" onClick={() => setIsChatHistoryOpen((prev) => !prev)} disabled={chatDisabled} className="md:hidden w-8 h-8 rounded-full border border-slate-500/70 bg-slate-900/80 flex items-center justify-center disabled:opacity-40" title="Open chat history" aria-label="Open chat history">
                        <Icon name="Clock" size={14} className="text-slate-200" />
                    </button>
                    <button type="button" onClick={() => setIsPaused(true)} className="w-8 h-8 md:w-10 md:h-10 rounded-full border border-slate-600 bg-slate-900/80 flex items-center justify-center" title="Open menu" aria-label="Open menu">
                        <Icon name="Settings" size={14} className="text-slate-200" />
                    </button>
                    <AvatarBubble imageUrl={opponentAvatarImageUrls?.[primaryOpponent?.uid] || ''} initials={opponentName} borderClass="border-pink-500" />
                </div>
            </div>

            <div className="flex flex-col lg:flex-row gap-4 md:gap-8 justify-center items-center md:items-stretch flex-1 relative z-10">
                <div className="md:hidden absolute top-16 right-2 w-28 z-20 opponent-mini space-y-2">
                    <button
                        type="button"
                        onClick={() => hasTargetingMode && primaryOpponent?.roleKey && onSelectDebuffTarget(primaryOpponent.roleKey)}
                        className={`glass p-2 rounded-xl border-red-500/50 w-full text-left ${targetableClass}`}
                    >
                        {hasTargetingMode && <div className="absolute -inset-1 rounded-xl border border-cyan-200/80 shadow-[0_0_24px_rgba(125,211,252,0.95)] pointer-events-none" />}
                        {hasTargetingMode && <div className="text-[7px] font-black uppercase tracking-widest text-cyan-300 text-center mb-1">Tap To Target</div>}
                        <div className="text-[8px] font-black text-red-400 uppercase truncate mb-1 text-center bg-red-950/30 rounded py-0.5">{opponentName}</div>
                        <div className="text-[7px] font-black text-amber-300 text-center mb-1">{primaryOpponent?.points ?? 0} PTS</div>
                        <div className="flex gap-1 justify-center mb-1">
                            {[...Array(battleRounds)].map((_, i) => (
                                <div key={i} className={`tally-dot w-2 h-2 ${i < enemySolvedCount ? 'bg-green-500 shadow-sm' : 'bg-slate-800'}`} />
                            ))}
                        </div>
                        <div className="hp-track h-1 mb-1 bg-red-500"><HPBar value={enemyHp} fillClass="hp-fill-red-soft" /></div>
                        {primaryDebuffs.length > 0 && (
                            <div className="flex flex-wrap gap-1 mb-1">
                                {primaryDebuffs.map((debuff) => (
                                    <span key={debuff.id} className="text-[7px] uppercase font-black px-1 py-0.5 rounded bg-pink-900/70 border border-pink-400/50 text-pink-200">{debuff.label}</span>
                                ))}
                            </div>
                        )}
                        <div className="relative grid grid-rows-6 gap-0.5 opacity-50">
                            {hasTargetingMode && <div className="absolute top-1 left-1/2 -translate-x-1/2 z-10 px-1.5 py-0.5 rounded bg-black/80 border border-cyan-300/80 text-[7px] font-black uppercase tracking-widest text-cyan-200">{opponentName}</div>}
                            {enemyBoard.map((row, i) => (
                                <div key={i} className={`flex gap-0.5 ${i === enemyResults.length ? 'bg-pink-500/10 rounded-sm' : ''}`}>
                                    {Array(wordLength).fill(null).map((_, j) => (
                                        <div key={j} className={`w-3.5 h-3.5 rounded-sm border ${getTileColor(enemyResults[i] ? enemyResults[i][j] : 'empty')}`} />
                                    ))}
                                </div>
                            ))}
                        </div>
                    </button>

                    {extraOpponents.map((opponent) => {
                        const activeDebuffs = getActiveDebuffs(opponent.debuffs);
                        return (
                            <button
                                key={opponent.roleKey}
                                type="button"
                                onClick={() => hasTargetingMode && onSelectDebuffTarget(opponent.roleKey)}
                                className={`glass p-2 rounded-xl border-red-500/50 w-full text-left ${targetableClass}`}
                            >
                                {hasTargetingMode && <div className="absolute -inset-1 rounded-xl border border-cyan-200/80 shadow-[0_0_22px_rgba(125,211,252,0.95)] pointer-events-none" />}
                                {hasTargetingMode && <div className="text-[7px] font-black uppercase tracking-widest text-cyan-300 text-center mb-1">Tap To Target</div>}
                                <div className="text-[8px] font-black text-red-400 uppercase truncate mb-1 text-center bg-red-950/30 rounded py-0.5">{opponent.name}</div>
                                <div className="text-[7px] font-black text-amber-300 text-center mb-1">{opponent.points ?? 0} PTS</div>
                                <div className="flex gap-1 justify-center mb-1">
                                    {[...Array(battleRounds)].map((_, idx) => (
                                        <div key={idx} className={`tally-dot w-2 h-2 ${idx < opponent.solved ? 'bg-green-500 shadow-sm' : 'bg-slate-800'}`} />
                                    ))}
                                </div>
                                <div className="hp-track h-1 mb-1 bg-red-500"><HPBar value={opponent.hp} fillClass="hp-fill-red-soft" /></div>
                                {activeDebuffs.length > 0 && (
                                    <div className="flex flex-wrap gap-1 mb-1">
                                        {activeDebuffs.map((debuff) => (
                                            <span key={debuff.id} className="text-[7px] uppercase font-black px-1 py-0.5 rounded bg-pink-900/70 border border-pink-400/50 text-pink-200">{debuff.label}</span>
                                        ))}
                                    </div>
                                )}
                                <div className="relative grid grid-rows-6 gap-0.5 opacity-50">
                                    {hasTargetingMode && <div className="absolute top-1 left-1/2 -translate-x-1/2 z-10 px-1.5 py-0.5 rounded bg-black/80 border border-cyan-300/80 text-[7px] font-black uppercase tracking-widest text-cyan-200">{opponent.name}</div>}
                                    {(opponent.board || Array(6).fill('')).map((row, rowIdx) => (
                                        <div key={rowIdx} className={`flex gap-0.5 ${rowIdx === (opponent.results || []).length ? 'bg-pink-500/10 rounded-sm' : ''}`}>
                                            {Array(wordLength).fill(null).map((_, tileIdx) => (
                                                <div key={tileIdx} className={`w-3.5 h-3.5 rounded-sm border ${getTileColor(opponent.results?.[rowIdx] ? opponent.results[rowIdx][tileIdx] : 'empty')}`} />
                                            ))}
                                        </div>
                                    ))}
                                </div>
                            </button>
                        );
                    })}
                </div>

                <div className={`lg:w-48 flex flex-col gap-4 hidden md:flex ${dimmedClass}`}>
                    <div className="glass p-4 rounded-xl shadow-xl">
                        <h3 className="text-[9px] font-black text-gray-500 uppercase tracking-widest mb-4 text-center italic">Hardware</h3>
                        <div className="grid grid-cols-2 lg:grid-cols-1 gap-2">
                            {powerUps.map((p) => (
                                <button key={p.id} onClick={() => usePowerUp(p.id)} disabled={playerPoints < p.cost || countdown || hasTargetingMode} className={`group relative flex flex-col items-center p-2 rounded-lg border-2 transition-all ${playerPoints >= p.cost && !countdown && !hasTargetingMode ? 'border-slate-700 bg-slate-800 hover:border-cyan-400' : 'opacity-20 cursor-not-allowed'}`}>
                                    <Icon name={p.icon} className={p.color} size={18} />
                                    <span className="text-[8px] mt-1 font-black uppercase">{p.name}</span>
                                    <div className="absolute -top-1 -right-1 bg-pink-600 text-[6px] px-1 rounded-full">{p.cost}</div>
                                </button>
                            ))}
                        </div>
                    </div>
                </div>

                <div className={`flex-1 flex flex-col items-center justify-center perspective-1000 w-full max-w-sm md:max-w-none ${dimmedClass}`}>
                    <div className="md:hidden w-full mb-2 px-1">
                        {shouldShowLatestChatBadge && renderChatBadge(latestChatMessage, latestIsPlayer ? 'player' : 'opponent', false)}
                    </div>
                    <div className={`relative flex flex-col transition-all duration-500 tilt-player ${damageEffect === 'player' ? 'animate-shake' : ''}`}>
                        <div className="hidden md:block">
                            {shouldShowLatestChatBadge && latestIsPlayer && renderChatBadge(latestChatMessage, 'player')}
                        </div>
                        <div className="flex gap-2 mb-2 md:mb-3 justify-center">
                            {[...Array(battleRounds)].map((_, i) => (
                                <div key={i} className={`tally-dot w-3 h-3 md:w-4 md:h-4 ${i < playerSolvedCount ? 'bg-green-500 shadow-[0_0_15px_rgba(34,197,94,1)] scale-110' : 'bg-slate-800 border border-slate-700'}`} />
                            ))}
                        </div>
                        <div className="bg-green-900/20 border border-green-500/50 rounded-t-xl p-2 md:p-3 flex justify-between items-center">
                            <span className="text-[8px] md:text-[10px] font-bold text-green-400 uppercase tracking-widest">Hull Integrity</span>
                            <span className="text-[10px] md:text-xs font-mono font-bold text-green-400">{playerHp}%</span>
                        </div>
                        <div className="bg-slate-900 border-x border-b border-green-500/50 p-2 md:p-4 rounded-b-xl shadow-2xl relative">
                            {celebration === 'player' && <div className="absolute inset-0 bg-green-500/20 backdrop-blur-sm z-30 flex items-center justify-center border-4 border-green-400 rounded-lg animate-in zoom-in duration-300"><div className="text-4xl md:text-6xl font-black text-white italic animate-pulse uppercase">Wordle!</div></div>}
                            {celebration === 'failed' && <div className="absolute inset-0 bg-amber-500/20 backdrop-blur-sm z-30 flex items-center justify-center border-4 border-amber-300 rounded-lg animate-in zoom-in duration-300"><div className="text-4xl md:text-6xl font-black text-white italic animate-pulse uppercase">Failed</div></div>}
                            <div className="hp-track hp-track-bordered w-full h-1 md:h-1.5 mb-4 md:mb-6">
                                <HPBar value={playerHp} fillClass="hp-fill-green" />
                            </div>
                            <div className="grid grid-rows-6 gap-1.5 md:gap-2">
                                {playerBoard.map((row, i) => (
                                    <div key={`${i}-${i === playerResults.length ? invalidGuessPulse : 0}`} className={`flex gap-1.5 md:gap-2 p-0.5 rounded transition-all ${i === playerResults.length && !countdown ? 'bg-cyan-500/5 border border-cyan-500/10' : ''} ${i === playerResults.length && invalidGuessPulse > 0 ? 'animate-invalid-guess' : ''}`}>
                                        {Array(wordLength).fill(null).map((_, j) => (
                                            <div key={j} className={`w-12 h-12 md:w-14 md:h-14 border-2 flex items-center justify-center text-2xl font-black rounded transition-all duration-500 ${getTileColor(playerResults[i] ? playerResults[i][j] : (i === playerResults.length ? 'empty' : 'absent'))}`}>
                                                {i === playerResults.length ? playerCurrentGuess[j] : row[j]}
                                            </div>
                                        ))}
                                    </div>
                                ))}
                            </div>
                        </div>
                        <Keyboard rows={keyboardRows} onKeyInput={handleKeyInput} />
                    </div>
                </div>

                <div className="hidden md:flex flex-col items-center justify-center perspective-1000 gap-4">
                    <button
                        type="button"
                        onClick={() => hasTargetingMode && primaryOpponent?.roleKey && onSelectDebuffTarget(primaryOpponent.roleKey)}
                        className={`relative flex flex-col transition-all duration-500 tilt-opponent ${damageEffect === 'enemy' ? 'animate-shake' : ''} ${targetableClass} rounded-3xl`}
                        
                    >
                        {shouldShowLatestChatBadge && latestIsPrimaryOpponent && renderChatBadge(latestChatMessage, 'opponent')}
                        {hasTargetingMode && <div className="absolute -inset-2 rounded-3xl border border-cyan-200/80 shadow-[0_0_36px_rgba(125,211,252,0.95)] pointer-events-none" />}
                        {hasTargetingMode && <div className="text-[9px] font-black uppercase tracking-widest text-cyan-300 mb-1">Tap To Target</div>}
                        <div className="flex flex-col items-center mb-1 gap-1">
                            <AvatarBubble imageUrl={opponentAvatarImageUrls?.[primaryOpponent?.uid] || ''} initials={opponentName} borderClass="border-pink-500/70" sizeClass="w-9 h-9" textSizeClass="text-[10px]" />
                            <span className="text-[10px] font-black text-red-500 uppercase tracking-widest">{opponentName}</span>
                        </div>
                        <div className="text-center mb-2"><span className="text-[11px] font-black text-amber-300 uppercase tracking-widest">{primaryOpponent?.points ?? 0} PTS</span></div>
                        <div className="flex gap-2 mb-3 justify-center">
                            {[...Array(battleRounds)].map((_, i) => (
                                <div key={i} className={`tally-dot w-4 h-4 ${i < enemySolvedCount ? 'bg-green-500 shadow-[0_0_15px_rgba(34,197,94,1)] scale-110' : 'bg-slate-800'}`} />
                            ))}
                        </div>
                        <div className="bg-slate-900 border-2 border-red-500/30 p-4 rounded-3xl relative shadow-2xl">
                            {celebration === 'enemy' && <div className="absolute inset-0 bg-red-500/20 backdrop-blur-sm z-30 flex items-center justify-center border-4 border-red-400 rounded-lg animate-in zoom-in duration-300"><div className="text-6xl font-black text-white italic animate-pulse uppercase">Wordle!</div></div>}
                            {hasTargetingMode && <div className="absolute top-2 left-1/2 -translate-x-1/2 z-20 px-2 py-1 rounded bg-black/80 border border-cyan-300/80 text-[9px] font-black uppercase tracking-widest text-cyan-200">{opponentName}</div>}
                            {primaryDebuffs.length > 0 && (
                                <div className="absolute top-2 left-2 z-20 flex gap-1">
                                    {primaryDebuffs.map((debuff) => (
                                        <span key={debuff.id} className="text-[9px] uppercase font-black px-1.5 py-0.5 rounded bg-pink-900/80 border border-pink-400/50 text-pink-100">{debuff.label}</span>
                                    ))}
                                </div>
                            )}
                            <div className="hp-track hp-track-bordered w-full h-1.5 mb-6"><HPBar value={enemyHp} fillClass="hp-fill-red" /></div>
                            <div className="grid grid-rows-6 gap-2">
                                {enemyBoard.map((row, i) => (
                                    <div key={i} className={`flex gap-2 rounded transition-all ${i === enemyResults.length ? 'bg-pink-500/10' : ''}`}>
                                        {Array(wordLength).fill(null).map((_, j) => (
                                            <div key={j} className={`w-14 h-14 border-2 flex items-center justify-center rounded transition-all duration-500 ${enemyResults[i] ? 'animate-flip' : ''} ${getTileColor(enemyResults[i] ? enemyResults[i][j] : 'empty')}`}>
                                                {enemyResults[i] && enemyResults[i][j] === 'correct' && <Icon name="CheckCircle2" size={16} className="text-white/20" />}
                                            </div>
                                        ))}
                                    </div>
                                ))}
                            </div>
                        </div>
                    </button>

                    {isOnline && extraOpponents.length > 0 && (
                        <div className="w-full max-w-[21rem] glass p-4 rounded-2xl shadow-xl space-y-3">
                            <h3 className="text-[9px] font-black text-gray-500 uppercase tracking-widest text-center italic">Opponents</h3>
                            {extraOpponents.map((opponent) => (
                                <button
                                    key={opponent.roleKey}
                                    type="button"
                                    onClick={() => hasTargetingMode && onSelectDebuffTarget(opponent.roleKey)}
                                    className={`relative w-full rounded-xl border border-slate-700 bg-slate-900/70 p-3 space-y-2 text-left ${targetableClass}`}
                                >
                                    {shouldShowLatestChatBadge && latestSenderRole === opponent.roleKey && renderChatBadge(latestChatMessage, 'opponent')}
                                    {hasTargetingMode && <div className="absolute -inset-1 rounded-xl border border-cyan-200/80 shadow-[0_0_24px_rgba(125,211,252,0.95)] pointer-events-none" />}
                                    {hasTargetingMode && <div className="text-[8px] font-black uppercase tracking-widest text-cyan-300 text-center">Tap To Target</div>}
                                    <div className="flex items-center justify-between gap-2">
                                        <div className="min-w-0 flex items-center gap-2">
                                            <AvatarBubble imageUrl={opponentAvatarImageUrls?.[opponent.uid] || ''} initials={opponent.avatar || opponent.name} borderClass="border-pink-500/70" sizeClass="w-6 h-6" textSizeClass="text-[9px]" />
                                            <span className="text-[10px] font-black uppercase text-pink-300 truncate">{opponent.name}</span>
                                        </div>
                                        <span className="text-[10px] font-mono text-slate-400">{opponent.hp}%</span>
                                    </div>
                                    <div className="text-[9px] font-black text-amber-300">{opponent.points ?? 0} PTS</div>
                                    <div className="hp-track h-1 rounded-full"><HPBar value={opponent.hp} fillClass="hp-fill-pink" /></div>
                                    {getActiveDebuffs(opponent.debuffs).length > 0 && (
                                        <div className="flex gap-1 flex-wrap">
                                            {getActiveDebuffs(opponent.debuffs).map((debuff) => (
                                                <span key={debuff.id} className="text-[8px] uppercase font-black px-1 py-0.5 rounded bg-pink-900/70 border border-pink-400/50 text-pink-200">{debuff.label}</span>
                                            ))}
                                        </div>
                                    )}
                                    <div className="flex gap-1">
                                        {[...Array(battleRounds)].map((_, idx) => (
                                            <div key={idx} className={`tally-dot w-2 h-2 ${idx < opponent.solved ? 'bg-green-500' : 'bg-slate-800'}`} />
                                        ))}
                                    </div>
                                    <div className="relative grid grid-rows-6 gap-0.5 opacity-70">
                                        {hasTargetingMode && <div className="absolute top-1 left-1/2 -translate-x-1/2 z-10 px-1.5 py-0.5 rounded bg-black/80 border border-cyan-300/80 text-[8px] font-black uppercase tracking-widest text-cyan-200">{opponent.name}</div>}
                                        {(opponent.board || Array(6).fill('')).map((row, rowIdx) => (
                                            <div key={rowIdx} className={`flex gap-0.5 ${rowIdx === (opponent.results || []).length ? 'bg-pink-500/10 rounded-sm' : ''}`}>
                                                {Array(wordLength).fill(null).map((_, tileIdx) => (
                                                    <div key={tileIdx} className={`w-3 h-3 rounded-[2px] border ${getTileColor(opponent.results?.[rowIdx] ? opponent.results[rowIdx][tileIdx] : 'empty')}`} />
                                                ))}
                                            </div>
                                        ))}
                                    </div>
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            </div>

            {hasTargetingMode && (
                <div className="fixed bottom-3 left-1/2 -translate-x-1/2 z-[140] rounded-xl border border-cyan-400/70 bg-slate-900/95 px-4 py-2 flex items-center gap-3">
                    <p className="text-[10px] uppercase tracking-widest font-black text-cyan-300">Select target for {pendingDebuffId} by tapping an opponent card</p>
                    <button onClick={onCancelDebuffTarget} className="text-[10px] uppercase font-black text-white/70 hover:text-white">Cancel</button>
                </div>
            )}

            {isMobileChatOverlayOpen && (
                <div className="md:hidden fixed top-20 left-3 right-3 z-[180] glass rounded-2xl border border-cyan-500/60 p-3 space-y-2">
                    <div className="flex items-center justify-between">
                        <p className="text-[10px] uppercase tracking-widest font-black text-cyan-300">Lobby Chat</p>
                        <button type="button" onClick={() => setIsMobileChatOverlayOpen(false)} className="text-[10px] uppercase text-white/70">Close</button>
                    </div>
                    <div className="flex items-center gap-2">
                        <input
                            ref={mobileChatInputRef}
                            type="text"
                            value={chatDraft}
                            onChange={(e) => setChatDraft(e.target.value)}
                            onKeyDown={(e) => {
                                if (e.key === 'Enter') {
                                    e.preventDefault();
                                    submitChat();
                                }
                            }}
                            disabled={chatDisabled}
                            maxLength={140}
                            placeholder={chatDisabled ? 'Chat available in online lobbies' : 'Type message...'}
                            className="flex-1 bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-base outline-none focus:border-cyan-400 disabled:opacity-50"
                            style={{ fontSize: '16px' }}
                        />
                        <button type="button" onClick={submitChat} disabled={chatDisabled || !chatDraft.trim()} className="w-10 h-10 rounded-lg border border-cyan-500/70 flex items-center justify-center text-cyan-200 disabled:opacity-40">
                            <Icon name="SendHorizontal" size={16} />
                        </button>
                    </div>
                </div>
            )}

            {isChatHistoryOpen && (
                <div className="fixed right-3 md:right-8 top-20 z-[190] w-[min(92vw,22rem)] glass rounded-2xl border border-slate-600 shadow-2xl">
                    <div className="px-4 py-3 border-b border-slate-700 flex items-center justify-between">
                        <p className="text-[10px] uppercase tracking-widest font-black text-cyan-300">Chat History</p>
                        <button type="button" onClick={() => setIsChatHistoryOpen(false)} className="text-[10px] uppercase text-white/70">Close</button>
                    </div>
                    <div className="max-h-64 overflow-y-auto p-3 space-y-2">
                        {sortedChatMessages.length === 0 && <p className="text-sm text-slate-500">No messages yet.</p>}
                        {sortedChatMessages.map((message) => (
                            <div key={message.id || `${message.senderUid || 'anon'}-${message.createdAt || 0}`} className="rounded-xl border border-slate-700 bg-slate-900/70 px-3 py-2">
                                <div className="flex items-center justify-between gap-2 mb-1">
                                    <div className="flex items-center gap-2 min-w-0">
                                        <AvatarBubble
                                            imageUrl={resolveMessageAvatarImageUrl(message)}
                                            initials={(message.avatar || '??').slice(0, 2).toUpperCase()}
                                            borderClass="border-slate-500"
                                            sizeClass="w-6 h-6"
                                            textSizeClass="text-[9px]"
                                        />
                                        <p className="text-[10px] uppercase tracking-widest font-black text-slate-300 truncate">{resolveMessageSenderName(message)}</p>
                                    </div>
                                    <p className="text-[9px] text-slate-500 shrink-0">{chatTimestamp(message.createdAt)}</p>
                                </div>
                                <p className="text-sm text-white break-words">{message.text}</p>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {isPaused && (
                <div className="fixed inset-0 z-[150] flex items-center justify-center bg-slate-950/80 backdrop-blur-xl p-4">
                    <div className="glass p-8 rounded-3xl max-w-lg w-full space-y-6">
                        <h2 className="text-3xl font-black italic uppercase text-cyan-400">Tactical Pause</h2>
                        <div className="space-y-4">
                            <button onClick={initLocalGame} className="w-full flex items-center justify-center gap-3 bg-white text-black font-black py-4 rounded-xl hover:bg-cyan-400 transition-all uppercase tracking-widest shadow-xl"><Icon name="RotateCcw" /> Restart Match</button>
                            <button onClick={exitToLobby} className="w-full flex items-center justify-center gap-3 bg-slate-800 text-white font-black py-4 rounded-xl hover:bg-red-500 transition-all uppercase tracking-widest shadow-xl"><Icon name="Trophy" /> Exit to Lobby</button>
                            {!isOnline && <button onClick={() => setShowDebug(!showDebug)} className="w-full text-slate-500 hover:text-cyan-400 transition-colors font-black text-[10px] py-2 flex items-center justify-center gap-2 uppercase tracking-widest"><Icon name="Settings" size={12} /> {showDebug ? "Hide" : "Show"} Debug Console</button>}
                        </div>
                        {showDebug && !isOnline && (
                            <div className="bg-black/50 border border-slate-800 p-6 rounded-2xl space-y-4 animate-in slide-in-from-top-2">
                                <h3 className="text-xs font-black uppercase text-pink-500 italic mb-2">CPU Logic Override</h3>
                                <div><label className="text-[8px] font-mono text-slate-500 block mb-1 uppercase tracking-widest text-center">Delay (ms): {cpuParams.speed}</label>
                                <input type="range" min="1000" max="8000" step="500" title="CPU Delay" aria-label="CPU Delay" value={cpuParams.speed} onChange={(e) => setCpuParams({...cpuParams, speed: parseInt(e.target.value)})} className="w-full accent-cyan-400" /></div>
                                <div><label className="text-[8px] font-mono text-slate-500 block mb-1 uppercase tracking-widest text-center">Accuracy: {(cpuParams.accuracy * 100).toFixed(0)}%</label>
                                <input type="range" min="0" max="1" step="0.05" title="CPU Accuracy" aria-label="CPU Accuracy" value={cpuParams.accuracy} onChange={(e) => setCpuParams({...cpuParams, accuracy: parseFloat(e.target.value)})} className="w-full accent-pink-500" /></div>
                            </div>
                        )}
                        <button onClick={() => setIsPaused(false)} className="w-full text-white/50 hover:text-white uppercase font-black text-xs">Resume Engagement</button>
                    </div>
                </div>
            )}

            {(gameState === 'won' || gameState === 'lost') && !celebration && (
                <div className="fixed inset-0 bg-black/95 backdrop-blur-2xl flex items-center justify-center z-[200] p-4 text-center">
                    <div className="glass p-5 md:p-8 rounded-3xl max-w-lg w-full animate-in zoom-in duration-500 space-y-5">
                        <Icon name="Trophy" className={`mx-auto w-16 h-16 ${gameState === 'won' ? 'text-cyan-400' : 'text-slate-700'}`} />
                        <h2 className="text-3xl md:text-5xl font-black italic text-white uppercase tracking-tighter">{gameState === 'won' ? 'Dominion' : 'Fractured'}</h2>

                        {endMatchStep === 'reveal' && (
                            <div className="space-y-4">
                                <p className="text-xs uppercase tracking-widest text-cyan-300 font-black">Match Intel</p>
                                <div className="max-h-[38vh] md:max-h-[44vh] overflow-y-auto space-y-2 text-left pr-1">
                                    {matchWords.map((word, idx) => {
                                        const visible = isWordVisible(idx);
                                        return (
                                            <div key={`${word}-${idx}`} className="rounded-xl border border-slate-700 bg-slate-900/60 p-3 flex items-center justify-between gap-3">
                                                <div>
                                                    <p className="text-[10px] uppercase tracking-widest text-slate-400">Round {idx + 1}</p>
                                                    <p className="text-lg font-black tracking-[0.2em] text-white">{visible ? word : '?????'}</p>
                                                </div>
                                                <div className="text-right">
                                                    <p className="text-[10px] uppercase tracking-widest text-slate-500">First Solve</p>
                                                    <p className="text-sm font-bold text-pink-300">{getRoundWinnerLabel(idx)}</p>
                                                    {!visible && (
                                                        <button onClick={() => onToggleWordReveal(idx)} className="mt-2 text-[10px] uppercase tracking-widest font-black text-cyan-300 hover:text-white">
                                                            Reveal
                                                        </button>
                                                    )}
                                                </div>
                                            </div>
                                        );
                                    })}
                                </div>
                                <button onClick={() => setEndMatchStep('actions')} className="w-full bg-cyan-500 text-black font-black py-3 rounded-xl uppercase hover:bg-white transition-all active:scale-95 flex items-center justify-center gap-2">
                                    Continue
                                </button>
                            </div>
                        )}

                        {endMatchStep === 'actions' && (
                            <div className="space-y-3">
                                {!isOnline && (
                                    <button onClick={initLocalGame} className="w-full bg-cyan-500 text-black font-black py-4 rounded-xl uppercase hover:bg-white transition-all active:scale-95 flex items-center justify-center gap-2">
                                        <Icon name="RotateCcw" size={18} /> Restart Match
                                    </button>
                                )}

                                {isOnline && (
                                    <button onClick={onAcceptRematch} disabled={Boolean(myAccepted) || isRematchSubmitting} className="w-full bg-cyan-500 text-black font-black py-4 rounded-xl uppercase hover:bg-white transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                                        <Icon name="RotateCcw" size={18} /> {myAccepted ? 'Rematch Requested' : 'Accept Rematch'}
                                    </button>
                                )}

                                {isOnline && (
                                    <div className="rounded-xl border border-slate-700 bg-slate-900/50 p-3 text-left">
                                        <p className="text-[10px] uppercase tracking-widest text-slate-500">Rematch Status</p>
                                        <p className="text-sm text-cyan-300">{readyCount} / {participantCount} pilots ready</p>
                                        {bothAccepted && <p className="text-xs text-green-400 mt-1">All pilots locked in. Resetting arena...</p>}
                                    </div>
                                )}

                                <button onClick={isOnline ? onDeclineRematch : exitToLobby} className="w-full bg-slate-800 text-white font-black py-4 rounded-xl uppercase hover:bg-cyan-400 transition-all active:scale-95 flex items-center justify-center gap-2">
                                    <Icon name="X" size={18} /> Exit to Lobby
                                </button>

                                <button onClick={() => setEndMatchStep('reveal')} className="w-full text-white/70 hover:text-white uppercase font-black text-xs py-2">
                                    Back to Match Intel
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            )}

            {countdown && <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/40 backdrop-blur-md animate-in fade-in"><div className="text-[8rem] md:text-[12rem] font-black italic text-cyan-400 drop-shadow-[0_0_50px_rgba(34,211,238,0.8)] animate-bounce select-none">{countdown}</div></div>}
        </div>
    );
};

window.AppComponents = {
    Icon,
    Keyboard,
    LobbyView,
    BattleView,
};