function CoinClicker({ t, lang, userProfile, formatMoney, onBalanceUpdate, onBackToLobby, Icons, API_URL, token })
{
    const config = window.GAME_CONFIG?.coinClicker || {};
    const baseClickValue = config.BASE_CLICK_VALUE || 100;
    const comboTimeoutMs = config.COMBO_TIMEOUT_MS || 1200;
    const maxComboMultiplier = config.MAX_COMBO_MULTIPLIER || 5;
    const frenzyRequiredClicks = config.FRENZY_REQUIRED_CLICKS || 40;
    const frenzyDurationSec = config.FRENZY_DURATION_SEC || 10;
    const frenzyMultiplier = config.FRENZY_MULTIPLIER || 10;
    const upgradesConfig = config.UPGRADES || [];

    const isDebtor = userProfile?.isDebtor || (userProfile?.totalWealth < 0 && userProfile?.username?.toLowerCase() !== 'admin');
    const userUpgrades = userProfile?.clickerUpgrades || {};

    const [sessionEarned, setSessionEarned] = React.useState(0);
    const [sessionClicks, setSessionClicks] = React.useState(0);
    const [comboCount, setComboCount] = React.useState(0);
    const [comboMultiplier, setComboMultiplier] = React.useState(1);
    const [isFrenzy, setIsFrenzy] = React.useState(false);
    const [isFrenzyEnding, setIsFrenzyEnding] = React.useState(false);
    const [frenzyTimeLeft, setFrenzyTimeLeft] = React.useState(0);
    const [isCoinPressed, setIsCoinPressed] = React.useState(false);
    const [floatingTexts, setFloatingTexts] = React.useState([]);
    const [particles, setParticles] = React.useState([]);
    const [cooldownSparks, setCooldownSparks] = React.useState([]);
    const [isClaiming, setIsClaiming] = React.useState(false);
    const [activeTab, setActiveTab] = React.useState('game');

    const lastClickTimeRef = React.useRef(Date.now());
    const comboTimerRef = React.useRef(null);
    const frenzyIntervalRef = React.useRef(null);
    const audioContextRef = React.useRef(null);

    const calculateClickPower = () =>
    {
        let power = baseClickValue;
        upgradesConfig.forEach(u =>
        {
            const level = userUpgrades[u.id] || 0;
            if (level > 0 && u.clickBonus)
            {
                power += level * u.clickBonus;
            }
        });
        return power;
    };

    const calculateCps = () =>
    {
        let cps = 0;
        upgradesConfig.forEach(u =>
        {
            const level = userUpgrades[u.id] || 0;
            if (level > 0 && u.cpsBonus)
            {
                cps += level * u.cpsBonus;
            }
        });
        return cps;
    };

    const clickPower = calculateClickPower();
    const passiveCps = calculateCps();

    const playSound = (type) =>
    {
        try
        {
            if (!audioContextRef.current)
            {
                const AudioContextClass = window.AudioContext || window.webkitAudioContext;
                if (AudioContextClass)
                {
                    audioContextRef.current = new AudioContextClass();
                }
            }
            const ctx = audioContextRef.current;
            if (!ctx) return;
            if (ctx.state === 'suspended')
            {
                ctx.resume();
            }

            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.connect(gain);
            gain.connect(ctx.destination);

            const now = ctx.currentTime;

            if (type === 'click')
            {
                osc.type = 'triangle';
                const freq = 587.33 + (comboMultiplier * 40);
                osc.frequency.setValueAtTime(freq, now);
                osc.frequency.exponentialRampToValueAtTime(freq * 1.5, now + 0.08);
                gain.gain.setValueAtTime(0.12, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.08);
                osc.start(now);
                osc.stop(now + 0.08);
            }
            else if (type === 'frenzy')
            {
                osc.type = 'sawtooth';
                osc.frequency.setValueAtTime(440, now);
                osc.frequency.exponentialRampToValueAtTime(880, now + 0.3);
                gain.gain.setValueAtTime(0.2, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.4);
                osc.start(now);
                osc.stop(now + 0.4);
            }
            else if (type === 'frenzy_warning')
            {
                osc.type = 'sine';
                osc.frequency.setValueAtTime(880, now);
                osc.frequency.exponentialRampToValueAtTime(1100, now + 0.1);
                gain.gain.setValueAtTime(0.12, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.12);
                osc.start(now);
                osc.stop(now + 0.12);
            }
            else if (type === 'frenzy_end')
            {
                osc.type = 'sawtooth';
                osc.frequency.setValueAtTime(620, now);
                osc.frequency.exponentialRampToValueAtTime(110, now + 0.55);
                gain.gain.setValueAtTime(0.22, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.6);
                osc.start(now);
                osc.stop(now + 0.6);
            }
            else if (type === 'claim')
            {
                osc.type = 'sine';
                osc.frequency.setValueAtTime(523.25, now);
                osc.frequency.setValueAtTime(659.25, now + 0.1);
                osc.frequency.setValueAtTime(783.99, now + 0.2);
                gain.gain.setValueAtTime(0.15, now);
                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);
                osc.start(now);
                osc.stop(now + 0.35);
            }
        }
        catch (e)
        {
            // Audio context not allowed or failed
        }
    };

    const triggerFrenzyEndEffect = () =>
    {
        playSound('frenzy_end');
        setIsFrenzyEnding(true);

        const burstCount = 24;
        const newBurst = Array.from({ length: burstCount }).map((_, i) =>
        {
            const angle = (i / burstCount) * Math.PI * 2 + (Math.random() * 0.4 - 0.2);
            const speed = 75 + Math.random() * 95;
            return {
                id: 'cooldown_' + Date.now() + '_' + i,
                vx: Math.cos(angle) * speed,
                vy: Math.sin(angle) * speed,
                color: i % 3 === 0 ? '#f59e0b' : (i % 3 === 1 ? '#ef4444' : '#38bdf8'),
                size: 5 + Math.floor(Math.random() * 5)
            };
        });
        setCooldownSparks(newBurst);

        setTimeout(() =>
        {
            setIsFrenzyEnding(false);
            setCooldownSparks([]);
        }, 1800);
    };

    // Passive CPS Loop
    React.useEffect(() =>
    {
        if (passiveCps <= 0) return;

        const interval = setInterval(() =>
        {
            const multiplier = isFrenzy ? frenzyMultiplier : 1;
            const earnedThisTick = Math.round((passiveCps / 5) * multiplier);
            if (earnedThisTick > 0)
            {
                setSessionEarned(prev => prev + earnedThisTick);
            }
        }, 200);

        return () => clearInterval(interval);
    }, [passiveCps, isFrenzy, frenzyMultiplier]);

    // Frenzy Countdown
    React.useEffect(() =>
    {
        if (isFrenzy && frenzyTimeLeft > 0)
        {
            frenzyIntervalRef.current = setInterval(() =>
            {
                setFrenzyTimeLeft(prev =>
                {
                    if (prev <= 1)
                    {
                        clearInterval(frenzyIntervalRef.current);
                        setIsFrenzy(false);
                        setComboMultiplier(1);
                        setComboCount(0);
                        triggerFrenzyEndEffect();
                        return 0;
                    }
                    if (prev <= 4 && prev > 1)
                    {
                        playSound('frenzy_warning');
                    }
                    return prev - 1;
                });
            }, 1000);
        }

        return () =>
        {
            if (frenzyIntervalRef.current)
            {
                clearInterval(frenzyIntervalRef.current);
            }
        };
    }, [isFrenzy, frenzyTimeLeft]);

    // Combo Decay
    const checkComboDecay = () =>
    {
        if (comboTimerRef.current)
        {
            clearTimeout(comboTimerRef.current);
        }

        comboTimerRef.current = setTimeout(() =>
        {
            if (!isFrenzy)
            {
                setComboCount(0);
                setComboMultiplier(1);
            }
        }, comboTimeoutMs);
    };

    const handleCoinClick = (e) =>
    {
        lastClickTimeRef.current = Date.now();
        playSound('click');

        setIsCoinPressed(true);
        setTimeout(() => setIsCoinPressed(false), 90);

        let currentMultiplier = comboMultiplier;

        if (isFrenzy)
        {
            currentMultiplier = frenzyMultiplier;
        }
        else
        {
            const newCombo = comboCount + 1;
            setComboCount(newCombo);

            if (newCombo >= frenzyRequiredClicks)
            {
                setIsFrenzy(true);
                setFrenzyTimeLeft(frenzyDurationSec);
                currentMultiplier = frenzyMultiplier;
                setComboMultiplier(frenzyMultiplier);
                playSound('frenzy');
            }
            else
            {
                const calculatedMultiplier = Math.min(
                    maxComboMultiplier,
                    1 + Math.floor(newCombo / 8) * 0.5
                );
                currentMultiplier = calculatedMultiplier;
                setComboMultiplier(calculatedMultiplier);
                checkComboDecay();
            }
        }

        const earned = Math.round(clickPower * currentMultiplier);
        setSessionEarned(prev => prev + earned);
        setSessionClicks(prev => prev + 1);

        // Spawn Floating Text & Particles
        const rect = e.currentTarget.getBoundingClientRect();
        const clickX = e.clientX ? (e.clientX - rect.left) : (rect.width / 2);
        const clickY = e.clientY ? (e.clientY - rect.top) : (rect.height / 2);

        const newId = Date.now() + Math.random();
        setFloatingTexts(prev => [
            ...prev.slice(-12),
            {
                id: newId,
                text: `+${formatMoney(earned)}`,
                x: clickX,
                y: clickY,
                isFrenzy: isFrenzy || currentMultiplier >= 3
            }
        ]);

        const newSparks = Array.from({ length: 4 }).map((_, i) => ({
            id: newId + '_' + i,
            x: clickX,
            y: clickY,
            vx: (Math.random() - 0.5) * 60,
            vy: (Math.random() - 0.7) * 70,
            color: isFrenzy ? '#f59e0b' : '#38bdf8'
        }));

        setParticles(prev => [...prev.slice(-20), ...newSparks]);

        setTimeout(() =>
        {
            setFloatingTexts(prev => prev.filter(item => item.id !== newId));
            setParticles(prev => prev.filter(item => !item.id.startsWith(String(newId))));
        }, 800);
    };

    const handleClaimToWallet = async () =>
    {
        if (sessionEarned <= 0 && sessionClicks <= 0) return;
        if (isClaiming) return;

        setIsClaiming(true);
        try
        {
            const res = await fetch(`${API_URL}/api/clicker/claim`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify({
                    earnedAmount: sessionEarned,
                    clicks: sessionClicks
                })
            });

            const json = await res.json();
            if (json.success)
            {
                playSound('claim');
                setSessionEarned(0);
                setSessionClicks(0);
                if (onBalanceUpdate && json.user)
                {
                    onBalanceUpdate(json.user, json.houseBank);
                }
            }
            else
            {
                alert(json.error || t.serverError);
            }
        }
        catch (err)
        {
            alert(t.serverError);
        }
        finally
        {
            setIsClaiming(false);
        }
    };

    const handleBuyUpgrade = async (upgradeId) =>
    {
        try
        {
            const res = await fetch(`${API_URL}/api/clicker/upgrade`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify({ upgradeId })
            });

            const json = await res.json();
            if (json.success)
            {
                playSound('claim');
                if (onBalanceUpdate && json.user)
                {
                    onBalanceUpdate(json.user);
                }
            }
            else
            {
                alert(json.error || t.serverError);
            }
        }
        catch (err)
        {
            alert(t.serverError);
        }
    };

    const currentTotalWealth = (userProfile?.totalWealth || 0) + sessionEarned;
    const projectedDebt = Math.min(0, currentTotalWealth);
    const isProjectedDebtor = projectedDebt < 0 && userProfile?.username?.toLowerCase() !== 'admin';

    return (
        <div className="w-full max-w-5xl mx-auto px-4 py-4 animate-in fade-in zoom-in-95 duration-500 flex flex-col items-center">

            {/* TOP NAVIGATION & BALANCE HEADER */}
            <div className="w-full bg-slate-900/80 border border-amber-500/20 backdrop-blur-xl rounded-3xl p-5 mb-6 shadow-2xl flex flex-wrap items-center justify-between gap-4">
                <div className="flex items-center gap-4">
                    <button
                        onClick={onBackToLobby}
                        className="px-4 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white rounded-2xl font-bold text-xs uppercase tracking-wider flex items-center gap-2 border border-white/5 shadow-lg active:scale-95 transition-all"
                    >
                        <Icons.XCircle size={18} />
                        {t.mainMenu || (lang === 'TR' ? 'Lobi' : 'Lobby')}
                    </button>
                    <div>
                        <h2 className="text-xl font-black text-white flex items-center gap-2">
                            <span className="text-amber-400">⚡</span>
                            {t.coinClickerTitle || (lang === 'TR' ? 'Para Madencisi' : 'Coin Clicker')}
                        </h2>
                        <p className="text-xs text-slate-400 font-medium">{t.coinClickerSubtitle || (lang === 'TR' ? 'Tıkla Kazan • Servetini Sıfırdan İnşa Et' : 'Tap to Earn • Build Fortune')}</p>
                    </div>
                </div>

                {/* CURRENT WEALTH & DEBT STATUS */}
                <div className="flex items-center gap-3">
                    <div className="bg-slate-950/70 border border-white/5 rounded-2xl px-4 py-2 text-right">
                        <p className="text-[10px] font-black uppercase tracking-wider text-slate-400">
                            {isDebtor ? (lang === 'TR' ? 'Kalan Borç' : 'Current Debt') : t.totalWealth}
                        </p>
                        <p className={`text-lg font-black ${isProjectedDebtor ? 'text-rose-500' : 'text-emerald-400'}`}>
                            {formatMoney(currentTotalWealth)}
                        </p>
                    </div>

                    {/* CLAIM BUTTON */}
                    <button
                        onClick={handleClaimToWallet}
                        disabled={sessionEarned <= 0 || isClaiming}
                        className="px-5 py-3 bg-gradient-to-r from-emerald-600 to-teal-500 hover:from-emerald-500 hover:to-teal-400 text-white rounded-2xl font-black text-xs uppercase tracking-widest shadow-xl shadow-emerald-600/30 flex items-center gap-2 active:scale-95 transition-all disabled:opacity-40 disabled:grayscale"
                    >
                        <Icons.Download size={18} />
                        {isClaiming ? t.loading : (t.bankToWallet || (lang === 'TR' ? 'KASAYA AKTAR' : 'CLAIM CASH'))}
                    </button>
                </div>
            </div>

            {/* TAB SELECTOR */}
            <div className="w-full flex items-center justify-center gap-3 mb-6">
                <button
                    onClick={() => setActiveTab('game')}
                    className={`px-6 py-2.5 rounded-2xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2 ${activeTab === 'game' ? 'bg-amber-500 text-slate-950 shadow-lg shadow-amber-500/30 scale-105' : 'bg-slate-900/60 text-slate-400 hover:text-white border border-white/5'}`}
                >
                    <Icons.Zap size={16} />
                    {t.tapToEarn || (lang === 'TR' ? 'TIKLA KAZAN' : 'TAP TO EARN')}
                </button>
                <button
                    onClick={() => setActiveTab('upgrades')}
                    className={`px-6 py-2.5 rounded-2xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2 ${activeTab === 'upgrades' ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-600/30 scale-105' : 'bg-slate-900/60 text-slate-400 hover:text-white border border-white/5'}`}
                >
                    <Icons.Pickaxe size={16} />
                    {t.upgrades || (lang === 'TR' ? 'YÜKSELTMLER' : 'UPGRADES')}
                </button>
            </div>

            {/* MAIN GAME VIEW */}
            {activeTab === 'game' && (
                <div className="w-full grid grid-cols-1 lg:grid-cols-3 gap-6">

                    {/* STATS PANEL (LEFT) */}
                    <div className="bg-slate-900/70 border border-white/5 rounded-3xl p-6 flex flex-col justify-between shadow-2xl backdrop-blur-md">
                        <div>
                            <h4 className="text-xs font-black text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2">
                                <Icons.TrendingUp size={16} className="text-amber-400" />
                                {lang === 'TR' ? 'ÜRETİM DEĞERLERİ' : 'PRODUCTION STATS'}
                            </h4>

                            <div className="space-y-4">
                                <div className="bg-slate-950/60 border border-white/5 rounded-2xl p-4">
                                    <div className="flex justify-between items-center mb-1">
                                        <span className="text-xs text-slate-400 font-bold">{t.clickPower || 'Click Power'}</span>
                                        <span className="text-amber-400 font-black text-sm">+{formatMoney(clickPower)}</span>
                                    </div>
                                    <p className="text-[10px] text-slate-500">{lang === 'TR' ? 'Her tıklama başına baz kazanç' : 'Base earnings per tap'}</p>
                                </div>

                                <div className="bg-slate-950/60 border border-white/5 rounded-2xl p-4">
                                    <div className="flex justify-between items-center mb-1">
                                        <span className="text-xs text-slate-400 font-bold">{t.passiveCps || 'Passive CPS'}</span>
                                        <span className="text-teal-400 font-black text-sm">+{formatMoney(passiveCps)}/s</span>
                                    </div>
                                    <p className="text-[10px] text-slate-500">{lang === 'TR' ? 'Saniyede otomatik üretilen para' : 'Auto generated per second'}</p>
                                </div>

                                <div className="bg-slate-950/60 border border-white/5 rounded-2xl p-4">
                                    <div className="flex justify-between items-center mb-1">
                                        <span className="text-xs text-slate-400 font-bold">{t.sessionEarnings || 'Session Pot'}</span>
                                        <span className="text-emerald-400 font-black text-base">+{formatMoney(sessionEarned)}</span>
                                    </div>
                                    <p className="text-[10px] text-slate-500">{lang === 'TR' ? 'Kasaya aktarılmayı bekleyen bakiye' : 'Pending transfer to bank'}</p>
                                </div>
                            </div>
                        </div>

                        {/* HELPFUL TIP */}
                        <div className="mt-6 p-4 rounded-2xl bg-amber-500/10 border border-amber-500/20 text-amber-300/80 text-[11px] font-medium leading-relaxed">
                            💡 {t.clickerTip || (lang === 'TR' ? 'Hızlı tıklayarak Frenzy modunu tetikleyin ve 10x kazanç sağlayın!' : 'Tap rapidly to trigger Frenzy and gain 10x multiplier!')}
                        </div>
                    </div>

                    {/* CENTER CLICKER INTERACTION (MIDDLE) */}
                    <div className="bg-slate-900/90 border border-amber-500/30 rounded-3xl p-8 flex flex-col items-center justify-between shadow-2xl backdrop-blur-xl relative overflow-hidden min-h-[440px]">

                        {/* FRENZY GLOW OVERLAY */}
                        {isFrenzy && (
                            <div className="absolute inset-0 bg-gradient-to-b from-amber-500/20 via-rose-500/10 to-transparent pointer-events-none animate-pulse"></div>
                        )}

                        {/* COMBO & FRENZY BAR */}
                        <div className="w-full relative z-10">
                            <div className="flex justify-between items-center mb-2">
                                <div className="flex items-center gap-2">
                                    <Icons.Flame
                                        size={18}
                                        className={
                                            isFrenzy
                                                ? (frenzyTimeLeft <= 3 ? 'text-rose-500 frenzy-urgency' : 'text-amber-400 animate-bounce')
                                                : 'text-rose-500'
                                        }
                                    />
                                    <span className="text-xs font-black uppercase tracking-wider text-white">
                                        {isFrenzy ? (t.frenzyMode || '⚡ FRENZY ACTIVE!') : `${t.comboStreak || 'Combo'}: ${comboMultiplier}x`}
                                    </span>
                                </div>
                                <span className={`text-xs font-black transition-all ${isFrenzy && frenzyTimeLeft <= 3 ? 'text-rose-400 frenzy-urgency scale-125' : 'text-amber-400'}`}>
                                    {isFrenzy ? `${frenzyTimeLeft}s` : `${comboCount}/${frenzyRequiredClicks}`}
                                </span>
                            </div>

                            <div className="w-full h-3 bg-slate-950 rounded-full overflow-hidden border border-white/10 relative">
                                <div
                                    className={`h-full transition-all duration-150 rounded-full ${isFrenzy ? (frenzyTimeLeft <= 3 ? 'bg-gradient-to-r from-rose-600 via-amber-400 to-rose-500 animate-pulse shadow-lg shadow-rose-500/70' : 'bg-gradient-to-r from-amber-400 via-rose-500 to-yellow-300 animate-pulse shadow-lg shadow-amber-500/50') : 'bg-gradient-to-r from-rose-600 to-amber-500'}`}
                                    style={{
                                        width: isFrenzy
                                            ? `${(frenzyTimeLeft / frenzyDurationSec) * 100}%`
                                            : `${Math.min(100, (comboCount / frenzyRequiredClicks) * 100)}%`
                                    }}
                                ></div>
                            </div>
                        </div>

                        {/* THE BIG COIN BUTTON */}
                        <div className="relative my-auto flex items-center justify-center select-none">
                            {/* FRENZY END SHOCKWAVE */}
                            {isFrenzyEnding && (
                                <div className="frenzy-shockwave-ring"></div>
                            )}

                            {/* FRENZY ENDING BANNER */}
                            {isFrenzyEnding && (
                                <div className="frenzy-ending-banner flex flex-col items-center">
                                    <div className="bg-gradient-to-r from-slate-950 via-slate-900 to-slate-950 border border-amber-500/60 backdrop-blur-xl px-5 py-2.5 rounded-2xl shadow-2xl flex items-center gap-3">
                                        <span className="text-xl animate-spin">⚡</span>
                                        <div className="text-center">
                                            <p className="text-xs md:text-sm font-black text-amber-300 tracking-wider uppercase drop-shadow-md">
                                                {t.frenzyEnded || (lang === 'TR' ? '🔥 FRENZY TAMAMLANDI!' : '🔥 FRENZY FINISHED!')}
                                            </p>
                                            <p className="text-[10px] text-slate-400 font-semibold">
                                                {lang === 'TR' ? 'Madenci soğudu • Normal moda dönüldü' : 'Miner cooled down • Normal mode active'}
                                            </p>
                                        </div>
                                        <span className="text-xl animate-bounce">💨</span>
                                    </div>
                                </div>
                            )}

                            {/* COOLDOWN BURST SPARKS */}
                            {cooldownSparks.map((spark) => (
                                <div
                                    key={spark.id}
                                    className="absolute rounded-full pointer-events-none z-30 animate-in fade-in zoom-in duration-700"
                                    style={{
                                        left: `calc(50% + ${spark.vx}px)`,
                                        top: `calc(50% + ${spark.vy}px)`,
                                        width: `${spark.size}px`,
                                        height: `${spark.size}px`,
                                        backgroundColor: spark.color,
                                        boxShadow: `0 0 14px ${spark.color}`,
                                        transform: 'translate(-50%, -50%)',
                                        transition: 'all 0.9s cubic-bezier(0.1, 0.9, 0.2, 1)',
                                        opacity: 0.85
                                    }}
                                />
                            ))}

                            {/* FLOATING TEXTS */}
                            {floatingTexts.map((item) => (
                                <div
                                    key={item.id}
                                    className="absolute font-black pointer-events-none animate-in fade-in slide-in-from-bottom-6 duration-700 text-xl md:text-2xl drop-shadow-md z-30"
                                    style={{
                                        left: item.x,
                                        top: item.y - 40,
                                        transform: 'translate(-50%, -50%)',
                                        color: item.isFrenzy ? '#f59e0b' : '#34d399'
                                    }}
                                >
                                    {item.text}
                                </div>
                            ))}

                            {/* PARTICLES */}
                            {particles.map((p) => (
                                <div
                                    key={p.id}
                                    className="absolute w-2.5 h-2.5 rounded-full pointer-events-none z-20"
                                    style={{
                                        left: p.x + p.vx,
                                        top: p.y + p.vy,
                                        backgroundColor: p.color,
                                        boxShadow: `0 0 10px ${p.color}`,
                                        opacity: 0.8,
                                        transition: 'all 0.6s ease-out'
                                    }}
                                ></div>
                            ))}

                            {/* 3D COIN ELEMENT */}
                            <button
                                onClick={handleCoinClick}
                                className={`w-48 h-48 md:w-56 md:h-56 rounded-full relative cursor-pointer focus:outline-none transition-all duration-100 flex items-center justify-center shadow-2xl ${isCoinPressed ? 'scale-90 shadow-amber-500/50' : 'scale-100 hover:scale-105 shadow-amber-500/30'} ${isFrenzy ? 'ring-8 ring-amber-400/50 ring-offset-4 ring-offset-slate-950 animate-pulse' : ''} ${isFrenzyEnding ? 'frenzy-coin-vent' : ''}`}
                                style={{
                                    background: isFrenzy
                                        ? 'radial-gradient(circle at 35% 35%, #fef08a, #eab308, #b45309, #78350f)'
                                        : 'radial-gradient(circle at 35% 35%, #fde047, #ca8a04, #854d0e, #451a03)',
                                    border: '6px solid rgba(254, 240, 138, 0.6)',
                                    boxShadow: isFrenzy
                                        ? '0 0 50px rgba(245, 158, 11, 0.7), inset 0 0 20px rgba(255,255,255,0.6)'
                                        : '0 20px 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(255,255,255,0.4)'
                                }}
                            >
                                <div className="w-36 h-36 md:w-44 md:h-44 rounded-full border-2 border-dashed border-amber-200/50 flex flex-col items-center justify-center text-center">
                                    <span className="text-4xl md:text-5xl mb-1 filter drop-shadow-lg">
                                        {isFrenzy ? '🔥' : '🪙'}
                                    </span>
                                    <span className="text-white font-black text-sm md:text-base tracking-widest uppercase drop-shadow-md">
                                        {isFrenzy ? '10X FRENZY' : 'TAP!'}
                                    </span>
                                </div>
                            </button>
                        </div>

                        {/* SESSION CLICKS BADGE */}
                        <div className="relative z-10 flex items-center gap-3 bg-slate-950/80 border border-white/5 rounded-2xl px-5 py-2">
                            <Icons.Activity size={16} className="text-amber-400" />
                            <span className="text-xs text-slate-400 font-bold">
                                {t.totalClicks || 'Clicks'}: <strong className="text-white">{sessionClicks}</strong>
                            </span>
                        </div>
                    </div>

                    {/* FAST UPGRADE PREVIEW (RIGHT) */}
                    <div className="bg-slate-900/70 border border-white/5 rounded-3xl p-6 flex flex-col shadow-2xl backdrop-blur-md">
                        <div className="flex justify-between items-center mb-4">
                            <h4 className="text-xs font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
                                <Icons.Pickaxe size={16} className="text-indigo-400" />
                                {t.upgrades || 'Upgrades'}
                            </h4>
                            <button
                                onClick={() => setActiveTab('upgrades')}
                                className="text-[11px] text-indigo-400 hover:text-indigo-300 font-bold underline"
                            >
                                {lang === 'TR' ? 'Tümünü Gör' : 'View All'}
                            </button>
                        </div>

                        <div className="space-y-3 flex-1 overflow-y-auto max-h-[340px] pr-1 custom-scrollbar">
                            {upgradesConfig.slice(0, 3).map((item) =>
                            {
                                const level = userUpgrades[item.id] || 0;
                                const cost = Math.floor(item.baseCost * Math.pow(item.costMultiplier, level));
                                const canAfford = (userProfile?.totalWealth || 0) >= cost || userProfile?.username?.toLowerCase() === 'admin';

                                return (
                                    <div
                                        key={item.id}
                                        className="bg-slate-950/60 border border-white/5 rounded-2xl p-3 flex items-center justify-between gap-3 hover:border-indigo-500/30 transition-all"
                                    >
                                        <div className="flex items-center gap-3">
                                            <div className="w-10 h-10 rounded-xl bg-slate-900 border border-white/10 flex items-center justify-center text-xl">
                                                {item.icon}
                                            </div>
                                            <div>
                                                <h5 className="text-xs font-black text-white m-0">
                                                    {lang === 'TR' ? item.nameTr : item.name}
                                                </h5>
                                                <p className="text-[10px] text-slate-400 m-0">
                                                    {lang === 'TR' ? item.descTr : item.desc}
                                                </p>
                                                <span className="text-[9px] font-black text-indigo-400 uppercase">
                                                    {t.owned || 'Lvl'}: {level}
                                                </span>
                                            </div>
                                        </div>

                                        <button
                                            onClick={() => handleBuyUpgrade(item.id)}
                                            disabled={!canAfford}
                                            className="px-3 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-500 text-white font-black text-[11px] disabled:opacity-40 disabled:grayscale transition-all flex-shrink-0 shadow-md"
                                        >
                                            {formatMoney(cost)}
                                        </button>
                                    </div>
                                );
                            })}
                        </div>
                    </div>

                </div>
            )}

            {/* UPGRADES DETAILED VIEW */}
            {activeTab === 'upgrades' && (
                <div className="w-full bg-slate-900/80 border border-white/5 rounded-3xl p-6 md:p-8 shadow-2xl backdrop-blur-xl">
                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8 border-b border-white/5 pb-6">
                        <div>
                            <h3 className="text-2xl font-black text-white flex items-center gap-3">
                                <Icons.Pickaxe size={24} className="text-indigo-400" />
                                {t.upgrades || (lang === 'TR' ? 'Madenci Yükseltmeleri' : 'Mining Upgrades')}
                            </h3>
                            <p className="text-xs text-slate-400 mt-1">
                                {lang === 'TR' ? 'Kazandığınız servetle tıklama gücünüzü ve saniyelik pasif gelirinizi artırın.' : 'Upgrade click power and passive CPS with your wealth.'}
                            </p>
                        </div>

                        <div className="bg-slate-950/70 border border-white/10 rounded-2xl px-5 py-3 text-right">
                            <span className="text-[10px] font-black text-slate-400 uppercase tracking-wider">{t.totalWealth}</span>
                            <p className="text-lg font-black text-amber-400">{formatMoney(userProfile?.totalWealth || 0)}</p>
                        </div>
                    </div>

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {upgradesConfig.map((item) =>
                        {
                            const level = userUpgrades[item.id] || 0;
                            const cost = Math.floor(item.baseCost * Math.pow(item.costMultiplier, level));
                            const canAfford = (userProfile?.totalWealth || 0) >= cost || userProfile?.username?.toLowerCase() === 'admin';

                            return (
                                <div
                                    key={item.id}
                                    className="bg-slate-950/60 border border-white/5 rounded-2xl p-5 flex flex-col justify-between gap-4 hover:border-indigo-500/30 transition-all"
                                >
                                    <div className="flex items-start gap-4">
                                        <div className="w-14 h-14 rounded-2xl bg-slate-900 border border-white/10 flex items-center justify-center text-3xl shadow-inner flex-shrink-0">
                                            {item.icon}
                                        </div>
                                        <div className="flex-1">
                                            <div className="flex justify-between items-center">
                                                <h4 className="text-sm font-black text-white">
                                                    {lang === 'TR' ? item.nameTr : item.name}
                                                </h4>
                                                <span className="px-2.5 py-1 rounded-lg bg-indigo-500/20 text-indigo-400 font-black text-[10px] uppercase border border-indigo-500/20">
                                                    {t.owned || 'Level'} {level}
                                                </span>
                                            </div>
                                            <p className="text-xs text-slate-400 mt-1">
                                                {lang === 'TR' ? item.descTr : item.desc}
                                            </p>
                                        </div>
                                    </div>

                                    <div className="flex justify-between items-center pt-3 border-t border-white/5">
                                        <div>
                                            <span className="text-[10px] text-slate-500 font-bold uppercase">{lang === 'TR' ? 'Yükseltme Bedeli' : 'Cost'}</span>
                                            <p className="text-sm font-black text-amber-400">{formatMoney(cost)}</p>
                                        </div>
                                        <button
                                            onClick={() => handleBuyUpgrade(item.id)}
                                            disabled={!canAfford}
                                            className="px-6 py-2.5 rounded-xl bg-gradient-to-r from-indigo-600 to-indigo-500 hover:from-indigo-500 hover:to-indigo-400 text-white font-black text-xs uppercase tracking-wider shadow-lg shadow-indigo-600/30 disabled:opacity-40 disabled:grayscale active:scale-95 transition-all"
                                        >
                                            {t.buyUpgrade || (lang === 'TR' ? 'SATIN AL' : 'BUY')}
                                        </button>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            )}

        </div>
    );
}

window.CoinClicker = CoinClicker;