const { useState, useEffect, useRef, useCallback } = React;
const { motion, AnimatePresence } = window.Motion || window.framerMotion || {
    motion: { div: 'div', button: 'button', span: 'span', p: 'p', h2: 'h2', h3: 'h3' },
    AnimatePresence: ({ children }) => <>{children}</>
};

// Web Audio API Sound Synthesizer for Zeus / Dede Olympus effects
const DedeSoundEngine = {
    _ctx: null,
    _muted: false,

    _init()
    {
        if (!DedeSoundEngine._ctx && typeof window !== 'undefined')
        {
            const AudioCtx = window.AudioContext || window.webkitAudioContext;
            if (AudioCtx)
            {
                DedeSoundEngine._ctx = new AudioCtx();
            }
        }
        if (DedeSoundEngine._ctx && DedeSoundEngine._ctx.state === 'suspended')
        {
            DedeSoundEngine._ctx.resume();
        }
    },

    setMuted(muted)
    {
        DedeSoundEngine._muted = muted;
    },

    playSpinWhoosh()
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            const osc = DedeSoundEngine._ctx.createOscillator();
            const gain = DedeSoundEngine._ctx.createGain();
            osc.type = 'sine';
            osc.frequency.setValueAtTime(320, now);
            osc.frequency.exponentialRampToValueAtTime(110, now + 0.18);
            gain.gain.setValueAtTime(0.18, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.18);
            osc.connect(gain);
            gain.connect(DedeSoundEngine._ctx.destination);
            osc.start(now);
            osc.stop(now + 0.18);
        }
        catch (e) { }
    },

    playColStop(colIdx = 0)
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            const osc = DedeSoundEngine._ctx.createOscillator();
            const gain = DedeSoundEngine._ctx.createGain();
            osc.type = 'triangle';
            const baseFreq = 220 + colIdx * 35;
            osc.frequency.setValueAtTime(baseFreq, now);
            osc.frequency.exponentialRampToValueAtTime(80, now + 0.08);
            gain.gain.setValueAtTime(0.2, now);
            gain.gain.exponentialRampToValueAtTime(0.01, now + 0.08);
            osc.connect(gain);
            gain.connect(DedeSoundEngine._ctx.destination);
            osc.start(now);
            osc.stop(now + 0.08);
        }
        catch (e) { }
    },

    playTumbleTick()
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            const osc = DedeSoundEngine._ctx.createOscillator();
            const gain = DedeSoundEngine._ctx.createGain();
            osc.type = 'triangle';
            osc.frequency.setValueAtTime(520 + Math.random() * 120, now);
            osc.frequency.exponentialRampToValueAtTime(200, now + 0.06);
            gain.gain.setValueAtTime(0.15, now);
            gain.gain.exponentialRampToValueAtTime(0.005, now + 0.06);
            osc.connect(gain);
            gain.connect(DedeSoundEngine._ctx.destination);
            osc.start(now);
            osc.stop(now + 0.06);
        }
        catch (e) { }
    },

    playExplosion()
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            const osc = DedeSoundEngine._ctx.createOscillator();
            const gain = DedeSoundEngine._ctx.createGain();
            osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(320, now);
            osc.frequency.exponentialRampToValueAtTime(60, now + 0.25);
            gain.gain.setValueAtTime(0.3, now);
            gain.gain.exponentialRampToValueAtTime(0.005, now + 0.25);
            osc.connect(gain);
            gain.connect(DedeSoundEngine._ctx.destination);
            osc.start(now);
            osc.stop(now + 0.25);
        }
        catch (e) { }
    },

    playThunder()
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            // Lightning zap crackle
            const osc1 = DedeSoundEngine._ctx.createOscillator();
            const gain1 = DedeSoundEngine._ctx.createGain();
            osc1.type = 'sawtooth';
            osc1.frequency.setValueAtTime(980, now);
            osc1.frequency.exponentialRampToValueAtTime(80, now + 0.45);
            gain1.gain.setValueAtTime(0.35, now);
            gain1.gain.exponentialRampToValueAtTime(0.01, now + 0.45);
            osc1.connect(gain1);
            gain1.connect(DedeSoundEngine._ctx.destination);
            osc1.start(now);
            osc1.stop(now + 0.45);

            // Sub bass boom
            const osc2 = DedeSoundEngine._ctx.createOscillator();
            const gain2 = DedeSoundEngine._ctx.createGain();
            osc2.type = 'sine';
            osc2.frequency.setValueAtTime(140, now);
            osc2.frequency.exponentialRampToValueAtTime(30, now + 0.6);
            gain2.gain.setValueAtTime(0.4, now);
            gain2.gain.exponentialRampToValueAtTime(0.001, now + 0.6);
            osc2.connect(gain2);
            gain2.connect(DedeSoundEngine._ctx.destination);
            osc2.start(now);
            osc2.stop(now + 0.6);
        }
        catch (e) { }
    },

    playMultiplierOrb()
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            const notes = [659.25, 830.61, 987.77, 1318.51];
            notes.forEach((freq, i) =>
            {
                const osc = DedeSoundEngine._ctx.createOscillator();
                const gain = DedeSoundEngine._ctx.createGain();
                osc.type = 'sine';
                osc.frequency.setValueAtTime(freq, now + i * 0.07);
                gain.gain.setValueAtTime(0.2, now + i * 0.07);
                gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.07 + 0.3);
                osc.connect(gain);
                gain.connect(DedeSoundEngine._ctx.destination);
                osc.start(now + i * 0.07);
                osc.stop(now + i * 0.07 + 0.3);
            });
        }
        catch (e) { }
    },

    playWinFanfare(isBigWin = false)
    {
        if (DedeSoundEngine._muted) return;
        try
        {
            DedeSoundEngine._init();
            if (!DedeSoundEngine._ctx) return;
            const now = DedeSoundEngine._ctx.currentTime;
            const notes = isBigWin
                ? [523.25, 659.25, 783.99, 1046.50, 1318.51, 1567.98, 2093.00]
                : [587.33, 739.99, 880.00, 1174.66];

            notes.forEach((freq, i) =>
            {
                const osc = DedeSoundEngine._ctx.createOscillator();
                const gain = DedeSoundEngine._ctx.createGain();
                osc.type = 'triangle';
                osc.frequency.setValueAtTime(freq, now + i * 0.08);
                gain.gain.setValueAtTime(0.22, now + i * 0.08);
                gain.gain.exponentialRampToValueAtTime(0.001, now + i * 0.08 + 0.4);
                osc.connect(gain);
                gain.connect(DedeSoundEngine._ctx.destination);
                osc.start(now + i * 0.08);
                osc.stop(now + i * 0.08 + 0.4);
            });
        }
        catch (e) { }
    }
};

const SYMBOL_CONFIG = {
    crown: {
        name: 'Taç',
        icon: '👑',
        badge: 'TAÇ',
        bg: 'from-amber-500/30 via-yellow-500/20 to-amber-950/50',
        border: 'border-amber-400/60',
        glow: 'shadow-amber-500/40',
        text: 'text-amber-300'
    },
    hourglass: {
        name: 'Kum Saati',
        icon: '⏳',
        badge: 'KUM SAATİ',
        bg: 'from-orange-500/30 via-amber-600/20 to-orange-950/50',
        border: 'border-orange-400/60',
        glow: 'shadow-orange-500/40',
        text: 'text-orange-300'
    },
    ring: {
        name: 'Yüzük',
        icon: '💍',
        badge: 'YÜZÜK',
        bg: 'from-pink-500/30 via-rose-500/20 to-pink-950/50',
        border: 'border-pink-400/60',
        glow: 'shadow-pink-500/40',
        text: 'text-pink-300'
    },
    chalice: {
        name: 'Kadeh',
        icon: '🏆',
        badge: 'KADEH',
        bg: 'from-sky-500/30 via-blue-500/20 to-sky-950/50',
        border: 'border-sky-400/60',
        glow: 'shadow-sky-500/40',
        text: 'text-sky-300'
    },
    redGem: {
        name: 'Ares Yakutu',
        icon: '💎',
        badge: 'YAKUT',
        bg: 'from-red-500/30 via-rose-600/20 to-red-950/50',
        border: 'border-red-500/60',
        glow: 'shadow-red-500/40',
        text: 'text-red-300'
    },
    purpleGem: {
        name: 'Ametist',
        icon: '🔮',
        badge: 'AMETİST',
        bg: 'from-purple-500/30 via-fuchsia-600/20 to-purple-950/50',
        border: 'border-purple-500/60',
        glow: 'shadow-purple-500/40',
        text: 'text-purple-300'
    },
    yellowGem: {
        name: 'Topaz',
        icon: '⭐',
        badge: 'TOPAZ',
        bg: 'from-yellow-400/30 via-amber-500/20 to-yellow-950/50',
        border: 'border-yellow-400/60',
        glow: 'shadow-yellow-400/40',
        text: 'text-yellow-300'
    },
    greenGem: {
        name: 'Zümrüt',
        icon: '🟢',
        badge: 'ZÜMRÜT',
        bg: 'from-emerald-500/30 via-teal-600/20 to-emerald-950/50',
        border: 'border-emerald-400/60',
        glow: 'shadow-emerald-500/40',
        text: 'text-emerald-300'
    },
    blueGem: {
        name: 'Safir',
        icon: '🔷',
        badge: 'SAFİR',
        bg: 'from-cyan-500/30 via-blue-600/20 to-cyan-950/50',
        border: 'border-cyan-400/60',
        glow: 'shadow-cyan-500/40',
        text: 'text-cyan-300'
    },
    scatter: {
        name: 'Dede (Scatter)',
        icon: '⚡',
        badge: 'SCATTER',
        bg: 'from-yellow-300/40 via-amber-500/30 to-purple-900/60',
        border: 'border-yellow-300 ring-2 ring-yellow-400/80',
        glow: 'shadow-yellow-400/70',
        text: 'text-yellow-200 font-black'
    }
};

const MULTIPLIER_COLORS = {
    green: 'from-emerald-400 to-teal-500 border-emerald-300 text-white shadow-emerald-500/80',
    blue: 'from-sky-400 to-blue-600 border-sky-300 text-white shadow-sky-500/80',
    purple: 'from-purple-500 to-fuchsia-600 border-purple-300 text-white shadow-purple-500/80',
    gold: 'from-amber-400 via-yellow-300 to-rose-500 border-yellow-200 text-black font-black shadow-amber-400/90'
};

function Dede({ t, lang, userProfile, formatMoney, setShowDebtPanel, onBalanceUpdate, onBackToLobby })
{
    const Icons = window.Icons || {};
    const isDebtor = userProfile?.isDebtor || (userProfile?.totalWealth < 0 && userProfile?.username?.toLowerCase() !== 'admin');
    const isAppAdmin = userProfile?.username?.toLowerCase() === 'admin';

    const minBet = window.GAME_CONFIG?.dede?.MIN_BET ?? 100;
    const maxBet = window.GAME_CONFIG?.dede?.MAX_BET ?? 1000000;
    const defaultBet = window.GAME_CONFIG?.dede?.DEFAULT_BET ?? 1000;
    const maxOverdraftBet = window.GAME_CONFIG?.dede?.MAX_OVERDRAFT_BET ?? 1000;
    const betPresets = window.GAME_CONFIG?.dede?.BET_PRESETS ?? [100, 500, 1000, 5000, 10000, 50000, 100000, 250000, 500000, 1000000];

    const [bet, setBet] = useState(defaultBet);
    const [anteBet, setAnteBet] = useState(false);
    const [isSpinning, setIsSpinning] = useState(false);
    const [soundMuted, setSoundMuted] = useState(false);
    const [turboMode, setTurboMode] = useState(false);

    // Staggered column state & key tracking for physics drops (6 cols)
    const [colStates, setColStates] = useState(['idle', 'idle', 'idle', 'idle', 'idle', 'idle']);
    const [colKeys, setColKeys] = useState([0, 0, 0, 0, 0, 0]);

    // Round phase & clear status indicator
    // 'idle' | 'spinning' | 'tumbling' | 'zeus_strike' | 'round_win' | 'round_nowin'
    const [roundPhase, setRoundPhase] = useState('idle');
    const [statusBannerText, setStatusBannerText] = useState({ title: 'HAZIR - SPIN BUTONUNA BASIN', desc: '6x5 Izgara • Aynı sembolden 8+ bulunca patlar!', type: 'idle' });

    // Auto spin state
    const [autoSpinsRemaining, setAutoSpinsRemaining] = useState(0);
    const [showAutoModal, setShowAutoModal] = useState(false);

    // 6x5 Grid State (6 columns x 5 rows)
    const [grid, setGrid] = useState(() =>
    {
        const defaultSyms = ['crown', 'redGem', 'ring', 'chalice', 'hourglass', 'purpleGem', 'yellowGem', 'greenGem', 'blueGem'];
        return Array(6).fill(null).map(() => Array(5).fill(null).map(() => defaultSyms[Math.floor(Math.random() * defaultSyms.length)]));
    });

    const [explodingCoords, setExplodingCoords] = useState([]);
    const [activeMultipliers, setActiveMultipliers] = useState([]);
    const [currentSpinWin, setCurrentSpinWin] = useState(0);
    const [appliedMultiplier, setAppliedMultiplier] = useState(1);
    const [activeWinGroupTag, setActiveWinGroupTag] = useState(null);

    // Zeus Animations & dialogue
    const [zeusState, setZeusState] = useState('idle');
    const [zeusDialogue, setZeusDialogue] = useState('Olimpos seni bekliyor!');
    const [screenFlash, setScreenFlash] = useState(false);

    // Free Spins Feature state
    const [inFreeSpins, setInFreeSpins] = useState(false);
    const [freeSpinsTotal, setFreeSpinsTotal] = useState(15);
    const [freeSpinsLeft, setFreeSpinsLeft] = useState(0);
    const [globalMultiplier, setGlobalMultiplier] = useState(0);
    const [cumulativeBonusWin, setCumulativeBonusWin] = useState(0);
    const [showBonusIntroModal, setShowBonusIntroModal] = useState(false);
    const [showBonusSummaryModal, setShowBonusSummaryModal] = useState(false);
    const [bonusSummaryData, setBonusSummaryData] = useState(null);

    // Modals
    const [showPaytable, setShowPaytable] = useState(false);
    const [showBonusBuyModal, setShowBonusBuyModal] = useState(false);
    const [bigWinOverlay, setBigWinOverlay] = useState(null);

    const spinAbortRef = useRef(false);
    const introModalResolveRef = useRef(null);

    const handleStartFreeSpins = () =>
    {
        setShowBonusIntroModal(false);
        if (introModalResolveRef.current)
        {
            introModalResolveRef.current();
            introModalResolveRef.current = null;
        }
    };

    const totalSpinCost = anteBet ? Math.round(bet * 1.25) : bet;

    useEffect(() =>
    {
        DedeSoundEngine.setMuted(soundMuted);
    }, [soundMuted]);

    const sleep = (ms) => new Promise(resolve => setTimeout(resolve, turboMode ? ms * 0.35 : ms));

    const handleBetChange = (newBet) =>
    {
        if (isSpinning || inFreeSpins) return;
        const clamped = Math.max(minBet, Math.min(maxBet, newBet));
        setBet(clamped);
    };

    const handleBetAdjustment = (direction, isCtrl = false) =>
    {
        if (isSpinning || inFreeSpins) return;

        let delta = 250;
        if (isCtrl)
        {
            // %10 of active bet
            delta = Math.max(10, Math.round(bet * 0.10));
        }
        else
        {
            if (bet < 1000) delta = 100;
            else if (bet < 5000) delta = 500;
            else if (bet < 25000) delta = 2500;
            else if (bet < 100000) delta = 10000;
            else delta = 50000;
        }

        const newBet = direction === 'inc' ? bet + delta : bet - delta;
        handleBetChange(newBet);
    };

    const triggerZeusStrike = (orb) =>
    {
        setZeusState('strike');
        setScreenFlash(true);
        DedeSoundEngine.playThunder();
        setTimeout(() => setScreenFlash(false), 500);

        const lines = [
            `Şimşek çaktı! ${orb.value}x Çarpan!`,
            `Dede'den hediye: ${orb.value}x!`,
            `Kaderin parlıyor: ${orb.value}x Çarpan!`,
            `Olimpos'un Gücü: ${orb.value}x!`
        ];
        setZeusDialogue(lines[Math.floor(Math.random() * lines.length)]);

        setTimeout(() =>
        {
            setZeusState('idle');
        }, 850);
    };

    const animateGridLanding = async (targetGrid) =>
    {
        setColStates(['spinning', 'spinning', 'spinning', 'spinning', 'spinning', 'spinning']);
        setColKeys(prev => prev.map(k => k + 1));
        DedeSoundEngine.playSpinWhoosh();

        for (let c = 0; c < 6; c++)
        {
            await sleep(turboMode ? 55 : 110);
            setGrid(prev =>
            {
                const nextGrid = [...prev];
                nextGrid[c] = targetGrid[c];
                return nextGrid;
            });
            setColStates(prev =>
            {
                const nextStates = [...prev];
                nextStates[c] = 'landing';
                return nextStates;
            });
            setColKeys(prev =>
            {
                const nextKeys = [...prev];
                nextKeys[c] += 1;
                return nextKeys;
            });
            DedeSoundEngine.playColStop(c);
        }

        await sleep(turboMode ? 140 : 250);
    };

    const animateTumbleSequence = async (tumbles, spinMultipliers) =>
    {
        let runningWin = 0;
        const collectedMultipliers = [];

        for (let i = 0; i < tumbles.length; i++)
        {
            const tumble = tumbles[i];
            setRoundPhase('tumbling');

            // 1. Highlight winning positions & create payout tag
            const winPositions = [];
            let winNames = [];
            const affectedCols = new Set();
            tumble.winningGroups.forEach(g =>
            {
                const symConfig = SYMBOL_CONFIG[g.symbol];
                winNames.push(`${g.count}x ${symConfig?.badge || g.symbol}`);
                g.positions.forEach(p =>
                {
                    winPositions.push(`${p.col},${p.row}`);
                    affectedCols.add(p.col);
                });
            });
            setExplodingCoords(winPositions);

            runningWin += tumble.winAmount;
            setCurrentSpinWin(runningWin);

            // Escalating tumble excitement titles
            let tumbleTitle = `💥 TAKLA #${i + 1} - KAZANÇ: ${formatMoney(tumble.winAmount)}`;
            if (i === 1) tumbleTitle = `⚡ TAKLA #${i + 1} - ZİNCİRLEME KAZANÇ: ${formatMoney(tumble.winAmount)}`;
            else if (i === 2 || i === 3) tumbleTitle = `🔥 TAKLA #${i + 1}! OLİMPOS ALEV ALDI: ${formatMoney(tumble.winAmount)}`;
            else if (i >= 4 && i < 7) tumbleTitle = `🌟 TAKLA #${i + 1}! EFSANEVİ ZİNCİRLEME PATLAMA: ${formatMoney(tumble.winAmount)}`;
            else if (i >= 7) tumbleTitle = `👑 İLAHİ TAKLA #${i + 1}! DEDE ÇILDIRDI: ${formatMoney(tumble.winAmount)}`;

            setStatusBannerText({
                title: tumbleTitle,
                desc: `${winNames.join(', ')} patlıyor!`,
                type: 'tumble'
            });

            DedeSoundEngine.playExplosion();
            await sleep(turboMode ? 350 : 600);

            // 2. If Zeus strike occurs at this tumble
            if (tumble.zeusStrike)
            {
                setRoundPhase('zeus_strike');
                setStatusBannerText({
                    title: `⚡ DEDE ŞİMŞEK ÇAKTI! +${tumble.zeusStrike.value}x ÇARPAN!`,
                    desc: 'İlahi güç kazancı katlamak için ızgaraya indi!',
                    type: 'zeus'
                });
                triggerZeusStrike(tumble.zeusStrike);
                collectedMultipliers.push(tumble.zeusStrike);
                setActiveMultipliers([...collectedMultipliers]);
                DedeSoundEngine.playMultiplierOrb();
                await sleep(turboMode ? 400 : 750);
            }

            // 3. Clear exploding coords & tumble drop new grid
            setExplodingCoords([]);
            setGrid(tumble.gridAfter);
            setColStates(prev =>
            {
                const nextStates = [...prev];
                affectedCols.forEach(c =>
                {
                    nextStates[c] = 'tumble';
                });
                return nextStates;
            });
            setColKeys(prev =>
            {
                const nextKeys = [...prev];
                affectedCols.forEach(c =>
                {
                    nextKeys[c] += 1;
                });
                return nextKeys;
            });

            DedeSoundEngine.playTumbleTick();
            await sleep(turboMode ? 240 : 400);
        }

        // Synchronize with exact spin multipliers list
        if (spinMultipliers && spinMultipliers.length > 0)
        {
            setActiveMultipliers(spinMultipliers);
        }
    };

    const executeSpin = async () =>
    {
        if (isSpinning || inFreeSpins) return;

        // Debtor check
        if (!isAppAdmin && isDebtor && totalSpinCost > maxOverdraftBet)
        {
            setShowDebtPanel(true);
            return;
        }

        // Wealth check
        if (!isAppAdmin && !isDebtor && (userProfile?.totalWealth || 0) < totalSpinCost)
        {
            setZeusDialogue('Yetersiz bakiye! Bahsi düşür evlat.');
            setStatusBannerText({
                title: '⚠️ YETERSİZ BAKİYE',
                desc: 'Lütfen bahis miktarını düşürün veya bakiye yükleyin.',
                type: 'error'
            });
            return;
        }

        setIsSpinning(true);
        setRoundPhase('spinning');
        setCurrentSpinWin(0);
        setAppliedMultiplier(1);
        setActiveMultipliers([]);
        setExplodingCoords([]);
        setBigWinOverlay(null);
        setStatusBannerText({
            title: '🟡 MAKARALAR DÖNÜYOR...',
            desc: 'Olimpos sembolleri dökülüyor...',
            type: 'spinning'
        });

        // Start column streaming animation
        setColStates(['spinning', 'spinning', 'spinning', 'spinning', 'spinning', 'spinning']);
        setColKeys(prev => prev.map(k => k + 1));
        DedeSoundEngine.playSpinWhoosh();

        try
        {
            const token = localStorage.getItem('luck_token');
            const res = await fetch(`${window.API_URL}/api/dede/spin`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify({
                    bet: bet,
                    anteBet: anteBet
                })
            });

            const data = await res.json();
            if (!data.success)
            {
                setZeusDialogue(data.error || 'Spin hatası!');
                setStatusBannerText({
                    title: '⚠️ HATA OLUŞTU',
                    desc: data.error || 'İşlem gerçekleştirilemedi.',
                    type: 'error'
                });
                setColStates(['idle', 'idle', 'idle', 'idle', 'idle', 'idle']);
                setIsSpinning(false);
                setRoundPhase('idle');
                return;
            }

            const spinRes = data.spinResult;

            // Staggered column landings
            for (let c = 0; c < 6; c++)
            {
                await sleep(turboMode ? 55 : 110);
                setGrid(prev =>
                {
                    const nextGrid = [...prev];
                    nextGrid[c] = spinRes.initialGrid[c];
                    return nextGrid;
                });
                setColStates(prev =>
                {
                    const next = [...prev];
                    next[c] = 'landing';
                    return next;
                });
                setColKeys(prev =>
                {
                    const next = [...prev];
                    next[c] += 1;
                    return next;
                });
                DedeSoundEngine.playColStop(c);
            }

            await sleep(turboMode ? 140 : 250);

            // Animate tumbles
            if (spinRes.tumbles && spinRes.tumbles.length > 0)
            {
                await animateTumbleSequence(spinRes.tumbles, spinRes.spinMultipliers);
            }

            // If multiplier applies
            if (spinRes.spinMultiplierSum > 0 && spinRes.totalBaseWin > 0)
            {
                setAppliedMultiplier(spinRes.finalAppliedMultiplier);
                DedeSoundEngine.playMultiplierOrb();
                setStatusBannerText({
                    title: `⚡ ÇARPAN UYGULANIYOR: ${spinRes.totalBaseWin} x ${spinRes.finalAppliedMultiplier}x!`,
                    desc: `Toplam Kazanç: ${formatMoney(spinRes.totalWin)}`,
                    type: 'zeus'
                });
                await sleep(650);
            }

            setCurrentSpinWin(spinRes.totalWin);

            // Update user balance & house bank
            if (data.user && onBalanceUpdate)
            {
                onBalanceUpdate(data.user, data.houseBank);
            }

            // Final status banner update - Crystal clear round ended feedback
            if (spinRes.totalWin > 0)
            {
                setRoundPhase('round_win');
                setStatusBannerText({
                    title: `✅ TUR BİTTİ - KAZANÇ: ${formatMoney(spinRes.totalWin)}`,
                    desc: spinRes.spinMultiplierSum > 0 ? `x${spinRes.spinMultiplierSum} Çarpan ile katlandı! Yeni tur için 'SPIN'e basın.` : 'Tebrikler! Yeni tur için hazır.',
                    type: 'win'
                });

                if (spinRes.totalWin >= bet * 20)
                {
                    DedeSoundEngine.playWinFanfare(true);
                    setBigWinOverlay({
                        amount: spinRes.totalWin,
                        multiplier: (spinRes.totalWin / bet).toFixed(1),
                        title: spinRes.totalWin >= bet * 100 ? 'SENSATIONAL WIN!' : spinRes.totalWin >= bet * 50 ? 'MEGA WIN!' : 'SUPER WIN!'
                    });
                }
                else
                {
                    DedeSoundEngine.playWinFanfare(false);
                    setZeusDialogue(`Tebrikler! ${formatMoney(spinRes.totalWin)} kazandın!`);
                }
            }
            else
            {
                setRoundPhase('round_nowin');

                // Near-miss suspense teasers
                if (spinRes.nearMissScatter)
                {
                    setStatusBannerText({
                        title: `⚡ AZ KALSIN FREESPIN GELİYORDU! (3 SCATTER)`,
                        desc: "1 Dede Scatter daha gelseydi 15 Freespin açılacaktı! Şansın çok yakın!",
                        type: 'zeus'
                    });
                    setZeusDialogue('⚡ 1 Scatter daha olsaydı 15 Freespin geliyordu! Kapılar aralandı!');
                }
                else if (spinRes.nearMissHighSymbol)
                {
                    const symName = SYMBOL_CONFIG[spinRes.nearMissHighSymbol.symbol]?.badge || 'Taç';
                    setStatusBannerText({
                        title: `👑 7 EŞLEŞME! AZ KALSIN PATLIYORDU!`,
                        desc: `Sadece 1 ${symName} daha gelseydi dev kazanç patlayacaktı!`,
                        type: 'zeus'
                    });
                    setZeusDialogue(`👑 Kıl payı kaçtı! 1 ${symName} daha olsa dev kazanç geliyordu!`);
                }
                else if (spinRes.nearMissMultiplier)
                {
                    setStatusBannerText({
                        title: `⚡ DEDE ŞİMŞEK HAZIRLIYOR!`,
                        desc: "Az kalsın ilahi çarpan iniyordu! Bir dahaki spine hazır ol!",
                        type: 'zeus'
                    });
                    setZeusDialogue('⚡ Şimşeğim hazır, az kalsın x50 iniyordu!');
                }
                else
                {
                    setStatusBannerText({
                        title: `⚪ TUR BİTTİ - KAZANÇ YOK ($0)`,
                        desc: "Şansınızı tekrar deneyin! Yeni spin atmak için 'SPIN'e basın.",
                        type: 'nowin'
                    });
                    const idleLines = ['Bir dahaki sefere!', 'Olimpos sabır ister.', 'Şimşek yakında çakacak!'];
                    setZeusDialogue(idleLines[Math.floor(Math.random() * idleLines.length)]);
                }
            }

            // Check if Free Spins were triggered
            if (data.freeSpinsFeature)
            {
                await sleep(1000);
                await triggerFreeSpinsFeature(data.freeSpinsFeature, data.user, data.houseBank);
                return;
            }
        }
        catch (err)
        {
            console.error('Dede spin error:', err);
            setZeusDialogue('Bağlantı hatası!');
            setStatusBannerText({
                title: '⚠️ SUNUCU HATASI',
                desc: 'Lütfen bağlantınızı kontrol edip tekrar deneyin.',
                type: 'error'
            });
        }
        finally
        {
            setColStates(prev => prev.map(s => s === 'spinning' ? 'idle' : s));
            if (!inFreeSpins && !showBonusIntroModal)
            {
                setIsSpinning(false);
            }
        }
    };

    const triggerFreeSpinsFeature = async (featureData, finalUser, finalHouseBank, initialWin = 0) =>
    {
        setInFreeSpins(true);
        setIsSpinning(true);
        setRoundPhase('bonus_intro');
        const startSpins = featureData.initialSpins || 15;
        let currentTotalSpins = startSpins;
        setFreeSpinsTotal(startSpins);
        setFreeSpinsLeft(startSpins);
        setGlobalMultiplier(0);
        setCumulativeBonusWin(initialWin);

        setShowBonusIntroModal(true);
        DedeSoundEngine.playWinFanfare(true);

        // Wait until user confirms or closes the intro popup
        await new Promise((resolve) =>
        {
            introModalResolveRef.current = resolve;
        });

        await sleep(350);

        for (let s = 0; s < featureData.spins.length; s++)
        {
            if (spinAbortRef.current) break;

            const spinItem = featureData.spins[s];
            setRoundPhase('spinning');
            setZeusDialogue(`Freespin ${spinItem.spinNumber} / ${currentTotalSpins}`);
            setStatusBannerText({
                title: `🔮 FREESPIN ${spinItem.spinNumber} / ${currentTotalSpins}`,
                desc: `Mevcut Toplam Çarpan: ${spinItem.globalMultiplierAfter}x`,
                type: 'spinning'
            });
            setActiveMultipliers([]);
            setExplodingCoords([]);

            await animateGridLanding(spinItem.spinResult.initialGrid);

            if (spinItem.spinResult.tumbles && spinItem.spinResult.tumbles.length > 0)
            {
                await animateTumbleSequence(spinItem.spinResult.tumbles, spinItem.spinResult.spinMultipliers);
            }

            setGlobalMultiplier(spinItem.globalMultiplierAfter);
            setCumulativeBonusWin(initialWin + spinItem.cumulativeBonusWin);

            if (spinItem.extraSpinsAwarded > 0)
            {
                currentTotalSpins += spinItem.extraSpinsAwarded;
                setFreeSpinsTotal(currentTotalSpins);
                setFreeSpinsLeft(spinItem.remainingSpinsAfter);
                triggerZeusStrike({ value: spinItem.extraSpinsAwarded });
                setZeusDialogue(`⚡ +${spinItem.extraSpinsAwarded} EKSTRA FREESPIN!`);
                setStatusBannerText({
                    title: `⚡ +${spinItem.extraSpinsAwarded} EKSTRA FREESPIN KAZANILDI!`,
                    desc: `3+ Scatter geldi! Toplam Tur: ${currentTotalSpins}`,
                    type: 'zeus'
                });
                DedeSoundEngine.playThunder();
                await sleep(1400);
            }
            else
            {
                setFreeSpinsLeft(spinItem.remainingSpinsAfter);
            }

            await sleep(turboMode ? 250 : 650);
        }

        const totalBonusWinAll = initialWin + featureData.totalBonusWin;

        // Finalize Bonus
        setInFreeSpins(false);
        setIsSpinning(false);
        setRoundPhase('round_win');
        setStatusBannerText({
            title: `🏆 BONUS BİTTİ - TOPLAM: ${formatMoney(totalBonusWinAll)}`,
            desc: `Ulaşılan Toplam Çarpan: ${featureData.finalGlobalMultiplier}x`,
            type: 'win'
        });

        setBonusSummaryData({
            totalWin: totalBonusWinAll,
            spinsPlayed: featureData.totalSpinsPlayed,
            finalMultiplier: featureData.finalGlobalMultiplier
        });
        setShowBonusSummaryModal(true);
        DedeSoundEngine.playWinFanfare(true);

        if (finalUser && onBalanceUpdate)
        {
            onBalanceUpdate(finalUser, finalHouseBank);
        }
    };

    const executeBonusBuy = async () =>
    {
        const bonusCost = bet * 100;
        if (!isAppAdmin && (userProfile?.totalWealth || 0) < bonusCost)
        {
            setZeusDialogue('Bonus Satın Almak için bakiye yetersiz!');
            setShowBonusBuyModal(false);
            return;
        }

        // Deduct upfront locally so header balance reflects purchase immediately
        if (!isAppAdmin && onBalanceUpdate && userProfile)
        {
            onBalanceUpdate({
                ...userProfile,
                totalWealth: userProfile.totalWealth - bonusCost
            });
        }

        setShowBonusBuyModal(false);
        setIsSpinning(true);
        setRoundPhase('spinning');
        setCurrentSpinWin(0);
        setAppliedMultiplier(1);
        setActiveMultipliers([]);
        setExplodingCoords([]);

        setStatusBannerText({
            title: '⚡ 15 FREESPIN BAŞLATILIYOR...',
            desc: 'Dede 4 Scatter ile bonusu açıyor!',
            type: 'zeus'
        });

        try
        {
            const token = localStorage.getItem('luck_token');
            const res = await fetch(`${window.API_URL}/api/dede/buy-bonus`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify({ bet: bet })
            });

            const data = await res.json();
            if (!data.success)
            {
                // Refund local balance on error
                if (!isAppAdmin && onBalanceUpdate && userProfile)
                {
                    onBalanceUpdate(userProfile);
                }
                setZeusDialogue(data.error || 'Bonus alımı başarısız!');
                setIsSpinning(false);
                setRoundPhase('idle');
                return;
            }

            // Animate trigger spin (guaranteed 4 scatters)
            await animateGridLanding(data.triggerSpin.initialGrid);
            DedeSoundEngine.playThunder();
            setScreenFlash(true);
            setTimeout(() =>
            {
                setScreenFlash(false);
            }, 500);
            await sleep(800);

            // Run Free Spins Feature with trigger spin scatter win included
            await triggerFreeSpinsFeature(data.freeSpinsFeature, data.user, data.houseBank, data.triggerSpin?.totalWin || 0);
        }
        catch (err)
        {
            console.error('Bonus buy error:', err);
            // Refund local balance on network error
            if (!isAppAdmin && onBalanceUpdate && userProfile)
            {
                onBalanceUpdate(userProfile);
            }
            setZeusDialogue('Bonus alım hatası!');
        }
        finally
        {
            setColStates(prev => prev.map(s => s === 'spinning' ? 'idle' : s));
            if (!inFreeSpins && !showBonusIntroModal)
            {
                setIsSpinning(false);
            }
        }
    };

    // Auto-spin handler
    useEffect(() =>
    {
        let timer;
        if (autoSpinsRemaining > 0 && !isSpinning && !inFreeSpins && !showBonusSummaryModal && !showBonusIntroModal)
        {
            timer = setTimeout(() =>
            {
                setAutoSpinsRemaining(prev => prev - 1);
                executeSpin();
            }, 600);
        }
        return () => clearTimeout(timer);
    }, [autoSpinsRemaining, isSpinning, inFreeSpins, showBonusSummaryModal, showBonusIntroModal]);

    const bonusBuyCost = bet * 100;

    return (
        <div className="w-full max-w-7xl mx-auto px-2 md:px-4 py-4 animate-in fade-in duration-500 select-none">

            {/* SCREEN FLASH OVERLAY */}
            {screenFlash && (
                <div className="fixed inset-0 z-50 pointer-events-none bg-yellow-300/30 thunder-screen-flash backdrop-blur-[2px]"></div>
            )}

            {/* TOP HEADER */}
            <div className="flex flex-wrap items-center justify-between gap-4 mb-4 bg-slate-950/80 border border-amber-500/20 p-4 rounded-3xl backdrop-blur-md shadow-2xl">
                <div className="flex items-center gap-3">
                    <button
                        onClick={onBackToLobby}
                        disabled={isSpinning || inFreeSpins}
                        className="px-4 py-2.5 bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-300 rounded-2xl text-xs font-black uppercase tracking-wider flex items-center gap-2 transition-all hover:scale-105"
                    >
                        <Icons.ChevronDown className="rotate-90" size={16} />
                        {t.returnLobby || 'Lobiye Dön'}
                    </button>

                    <div className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-500/10 to-purple-500/10 border border-amber-500/30 rounded-2xl">
                        <Icons.Zeus size={22} className="text-yellow-400 animate-pulse" />
                        <div>
                            <h1 className="text-base font-black tracking-tight text-white uppercase italic leading-none">DEDE</h1>
                            <span className="text-[10px] text-amber-400 font-bold uppercase tracking-widest">Gates of Olympus</span>
                        </div>
                    </div>
                </div>

                {/* BALANCE & STATUS */}
                <div className="flex items-center gap-3">
                    <div className="text-right">
                        <span className="text-[10px] uppercase font-bold text-slate-400 tracking-widest block">{t.balance || 'Bakiye'}</span>
                        <span className={`text-lg font-black tracking-tight ${userProfile?.totalWealth < 0 ? 'text-rose-400 debtor-name' : 'text-emerald-400'}`}>
                            {isAppAdmin ? '$∞' : formatMoney(userProfile?.totalWealth || 0)}
                        </span>
                    </div>

                    <button
                        onClick={() => setShowPaytable(true)}
                        className="p-2.5 bg-slate-900 hover:bg-amber-500/20 border border-slate-700 text-amber-400 rounded-2xl transition-all"
                        title="Ödeme Tablosu & Kurallar"
                    >
                        <Icons.Info size={20} />
                    </button>

                    <button
                        onClick={() => setSoundMuted(!soundMuted)}
                        className="p-2.5 bg-slate-900 hover:bg-slate-800 border border-slate-700 text-slate-300 rounded-2xl transition-all"
                    >
                        {soundMuted ? <Icons.VolumeX size={20} className="text-rose-400" /> : <Icons.Volume2 size={20} className="text-emerald-400" />}
                    </button>
                </div>
            </div>

            {/* MAIN ARENA */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start">

                {/* LEFT SIDE PANEL (ANTE BET & BONUS BUY) */}
                <div className="lg:col-span-3 flex flex-col gap-4">

                    {/* ANTE BET / ÇİFT ŞANS */}
                    <div className={`p-5 rounded-3xl border transition-all ${anteBet ? 'bg-gradient-to-br from-emerald-950/60 to-slate-900/90 border-emerald-500 shadow-xl shadow-emerald-500/20' : 'bg-slate-950/70 border-slate-800'}`}>
                        <div className="flex items-center justify-between mb-3">
                            <span className="text-xs font-black uppercase tracking-wider text-emerald-400 flex items-center gap-2">
                                <Icons.Sparkles size={16} />
                                {lang === 'TR' ? 'Şans Çiftleme' : 'Ante Bet (2x Chance)'}
                            </span>
                            <button
                                onClick={() => { if (!isSpinning && !inFreeSpins) setAnteBet(!anteBet); }}
                                className={`w-12 h-6 rounded-full transition-all flex items-center px-1 ${anteBet ? 'bg-emerald-500 justify-end' : 'bg-slate-800 justify-start'}`}
                            >
                                <div className="w-4 h-4 rounded-full bg-white shadow-md"></div>
                            </button>
                        </div>
                        <p className="text-[11px] text-slate-400 italic mb-2">
                            {lang === 'TR'
                                ? 'Bahse %25 eklenir, Dede Scatter ve Freespin şansı 2 katına çıkar!'
                                : '+25% bet cost, doubles chance to hit Scatters and Free Spins!'}
                        </p>
                        <div className="text-[11px] font-black text-slate-300">
                            {lang === 'TR' ? 'Spin Maliyeti: ' : 'Spin Cost: '}
                            <span className="text-emerald-400 font-black">{formatMoney(totalSpinCost)}</span>
                        </div>
                    </div>

                    {/* BONUS SATIN AL (BONUS BUY) */}
                    <button
                        onClick={() => { if (!isSpinning && !inFreeSpins) setShowBonusBuyModal(true); }}
                        disabled={isSpinning || inFreeSpins || isDebtor}
                        className="relative group p-5 rounded-3xl bg-gradient-to-br from-amber-500 via-amber-600 to-yellow-600 border-2 border-yellow-300 text-slate-950 shadow-2xl shadow-amber-500/30 hover:scale-[1.02] active:scale-95 transition-all text-left overflow-hidden disabled:opacity-50 disabled:grayscale"
                    >
                        <div className="absolute -top-10 -right-10 w-28 h-28 bg-white/20 rounded-full blur-xl group-hover:scale-150 transition-all"></div>
                        <div className="flex items-center justify-between mb-1">
                            <span className="text-xs font-black uppercase tracking-widest text-slate-950 flex items-center gap-1.5">
                                <Icons.Zap size={18} />
                                {lang === 'TR' ? 'BONUS SATIN AL' : 'BUY FREE SPINS'}
                            </span>
                            <span className="text-[10px] font-black px-2 py-0.5 bg-black text-yellow-300 rounded-lg uppercase">100x</span>
                        </div>
                        <p className="text-[11px] font-bold text-slate-900/80 mb-2">15 Freespin & Kümülatif Çarpanlar</p>
                        <div className="text-base font-black tracking-tight text-slate-950">
                            {formatMoney(bonusBuyCost)}
                        </div>
                    </button>

                    {/* FREESPIN ACTIVE BOX (WHEN IN BONUS) */}
                    {inFreeSpins && (
                        <div className="p-5 rounded-3xl bg-gradient-to-br from-purple-950 via-indigo-950 to-slate-950 border-2 border-purple-400 shadow-2xl shadow-purple-500/30 animate-pulse">
                            <div className="flex items-center justify-between mb-2">
                                <span className="text-xs font-black uppercase tracking-widest text-purple-300">FREESPIN MODU</span>
                                <span className="px-2.5 py-1 bg-purple-500 text-white font-black text-xs rounded-xl">
                                    Kalan: {freeSpinsLeft} / {freeSpinsTotal}
                                </span>
                            </div>

                            <div className="my-3 p-3 bg-black/40 border border-purple-500/30 rounded-2xl text-center">
                                <span className="text-[10px] font-bold text-purple-300 uppercase tracking-wider block">TOPLAM ÇARPAN</span>
                                <span className="text-3xl font-black text-yellow-300 tracking-tight drop-shadow-[0_0_12px_rgba(253,224,71,0.8)]">
                                    {globalMultiplier}x
                                </span>
                            </div>

                            <div className="text-center">
                                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">TOPLAM BONUS KAZANCI</span>
                                <span className="text-xl font-black text-emerald-400">{formatMoney(cumulativeBonusWin)}</span>
                            </div>
                        </div>
                    )}

                    {/* MULTIPLIERS WON IN CURRENT SPIN */}
                    <div className="p-4 rounded-3xl bg-slate-950/70 border border-slate-800">
                        <span className="text-[10px] font-black uppercase tracking-widest text-slate-400 flex items-center gap-1.5 mb-2">
                            <Icons.Orb size={14} className="text-yellow-400" />
                            {lang === 'TR' ? 'Aktif Çarpanlar' : 'Active Multipliers'}
                        </span>
                        {activeMultipliers.length === 0 ? (
                            <p className="text-xs text-slate-500 italic">{lang === 'TR' ? 'Henüz çarpan inmedi.' : 'No multipliers yet.'}</p>
                        ) : (
                            <div className="flex flex-wrap gap-1.5">
                                {activeMultipliers.map((m, idx) => (
                                    <span
                                        key={idx}
                                        className={`px-3 py-1 rounded-xl text-xs font-black italic border shadow-md orb-pulsing bg-gradient-to-r ${MULTIPLIER_COLORS[m.tier] || MULTIPLIER_COLORS.green}`}
                                    >
                                        x{m.value}
                                    </span>
                                ))}
                            </div>
                        )}
                    </div>
                </div>

                {/* CENTER (6x5 GRID ARENA & PROMINENT STATUS BAR) */}
                <div className="lg:col-span-6 relative">

                    {/* PROMINENT ROUND STATUS BANNER */}
                    <div className={`mb-3 p-3.5 rounded-2xl border backdrop-blur-md shadow-xl transition-all duration-300 flex items-center gap-3 ${statusBannerText.type === 'win'
                        ? 'bg-emerald-950/70 border-emerald-500/60 shadow-emerald-500/20'
                        : statusBannerText.type === 'nowin'
                            ? 'bg-slate-900/80 border-slate-700/60 text-slate-300'
                            : statusBannerText.type === 'tumble' || statusBannerText.type === 'zeus'
                                ? 'bg-amber-950/70 border-amber-400 shadow-amber-500/30'
                                : statusBannerText.type === 'spinning'
                                    ? 'bg-yellow-950/60 border-yellow-500/40'
                                    : 'bg-slate-950/70 border-amber-500/30'
                        }`}>
                        <div className={`w-10 h-10 rounded-xl flex items-center justify-center text-lg flex-shrink-0 ${statusBannerText.type === 'win'
                            ? 'bg-emerald-500 text-slate-950'
                            : statusBannerText.type === 'nowin'
                                ? 'bg-slate-800 text-slate-400'
                                : statusBannerText.type === 'tumble' || statusBannerText.type === 'zeus'
                                    ? 'bg-amber-500 text-slate-950 animate-bounce'
                                    : 'bg-slate-800 text-yellow-400'
                            }`}>
                            {statusBannerText.type === 'win' ? '🏆' : statusBannerText.type === 'nowin' ? '⚪' : statusBannerText.type === 'spinning' ? '⚡' : '🔥'}
                        </div>
                        <div className="flex-1 overflow-hidden">
                            <div className={`text-xs md:text-sm font-black uppercase tracking-tight truncate ${statusBannerText.type === 'win'
                                ? 'text-emerald-300'
                                : statusBannerText.type === 'nowin'
                                    ? 'text-slate-300'
                                    : statusBannerText.type === 'tumble' || statusBannerText.type === 'zeus'
                                        ? 'text-amber-300'
                                        : 'text-white'
                                }`}>
                                {statusBannerText.title}
                            </div>
                            <div className="text-[11px] text-slate-400 font-medium truncate">
                                {statusBannerText.desc}
                            </div>
                        </div>
                    </div>

                    {/* 6x5 GRID ARENA */}
                    <div className={`p-3 md:p-4 rounded-[2.5rem] bg-gradient-to-b from-slate-900/95 via-slate-950 to-slate-950 border-2 border-amber-500/40 shadow-2xl backdrop-blur-xl relative overflow-hidden ${roundPhase === 'round_win' ? 'round-finished-aura' : ''}`}>

                        {/* OLYMPUS GOLDEN PILLAR ACCENTS */}
                        <div className="absolute top-0 left-0 w-full h-1 gold-shimmer-border"></div>
                        <div className="absolute bottom-0 left-0 w-full h-1 gold-shimmer-border"></div>

                        {/* 6x5 GRID */}
                        <div className="grid grid-cols-6 gap-1.5 md:gap-2 overflow-hidden relative">
                            {grid.map((col, colIdx) =>
                            {
                                const animState = colStates[colIdx] || 'idle';
                                const animKey = colKeys[colIdx] || 0;

                                let animClass = '';
                                if (animState === 'spinning')
                                {
                                    animClass = 'dede-col-spinning';
                                }
                                else if (animState === 'landing')
                                {
                                    animClass = 'dede-col-landing';
                                }
                                else if (animState === 'tumble')
                                {
                                    animClass = 'dede-col-tumble';
                                }

                                return (
                                    <div
                                        key={`${colIdx}-${animKey}`}
                                        className={`flex flex-col gap-1.5 md:gap-2 ${animClass}`}
                                    >
                                        {col.map((symId, rowIdx) =>
                                        {
                                            const coordKey = `${colIdx},${rowIdx}`;
                                            const isExploding = explodingCoords.includes(coordKey);
                                            const cellMultiplier = activeMultipliers.find(m => m.col === colIdx && m.row === rowIdx);

                                            // If cell has a multiplier orb on it, render pure bold text badge (x50, x3, x100)
                                            if (cellMultiplier)
                                            {
                                                return (
                                                    <div
                                                        key={rowIdx}
                                                        className={`relative aspect-square rounded-2xl flex flex-col items-center justify-center transition-all overflow-hidden multiplier-orb-active border-2 shadow-2xl ${
                                                            cellMultiplier.tier === 'gold'
                                                                ? 'bg-gradient-to-br from-amber-400 via-yellow-300 to-rose-500 border-yellow-200 text-black shadow-amber-400/90'
                                                                : cellMultiplier.tier === 'purple'
                                                                    ? 'bg-gradient-to-br from-purple-600 via-fuchsia-600 to-indigo-800 border-purple-300 text-white shadow-purple-500/80'
                                                                    : cellMultiplier.tier === 'blue'
                                                                        ? 'bg-gradient-to-br from-sky-500 via-blue-600 to-indigo-700 border-sky-300 text-white shadow-sky-500/80'
                                                                        : 'bg-gradient-to-br from-emerald-500 via-teal-600 to-green-800 border-emerald-300 text-white shadow-emerald-500/80'
                                                        }`}
                                                    >
                                                        <span className="text-2xl md:text-3xl font-black italic tracking-tighter drop-shadow-md">
                                                            x{cellMultiplier.value}
                                                        </span>
                                                        <span className="text-[8px] font-black uppercase tracking-widest px-1.5 py-0.5 bg-black/50 text-yellow-300 rounded mt-0.5">
                                                            ÇARPAN
                                                        </span>
                                                    </div>
                                                );
                                            }

                                            const symData = SYMBOL_CONFIG[symId] || SYMBOL_CONFIG.blueGem;
                                            const isScatter = symId === 'scatter';

                                            return (
                                                <div
                                                    key={rowIdx}
                                                    className={`relative aspect-square rounded-2xl flex items-center justify-center transition-all overflow-hidden ${isExploding
                                                        ? 'winning-highlight bg-amber-400/20 border-2 border-yellow-300 z-20'
                                                        : `bg-gradient-to-b ${symData.bg} border ${symData.border} hover:scale-105 shadow-md`
                                                        }`}
                                                >
                                                    {/* SYMBOL ICON / AVATAR - MONEY PAYING SYMBOL (CLEAN & CENTERED) */}
                                                    <div className={`text-4xl md:text-5xl filter select-none transition-transform ${isScatter ? 'animate-bounce drop-shadow-[0_0_18px_rgba(250,204,21,1)] scale-110' : 'drop-shadow-md'}`}>
                                                        {symData.icon}
                                                    </div>

                                                    {/* WINNING EXPLODE OVERLAY */}
                                                    {isExploding && (
                                                        <div className="absolute inset-0 bg-yellow-400/30 animate-ping pointer-events-none rounded-2xl"></div>
                                                    )}
                                                </div>
                                            );
                                        })}
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>

                {/* RIGHT SIDE PANEL (ZEUS STAGE & STATS) */}
                <div className="lg:col-span-3 flex flex-col gap-4">

                    {/* ZEUS CHARACTER STAGE */}
                    <div className="p-5 rounded-3xl bg-gradient-to-b from-indigo-950/40 to-slate-950/80 border border-amber-500/30 text-center relative overflow-hidden shadow-2xl">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-amber-500/10 rounded-full blur-2xl pointer-events-none"></div>

                        {/* ZEUS AVATAR */}
                        <div className={`w-28 h-28 mx-auto my-2 rounded-full bg-gradient-to-br from-amber-400 via-yellow-500 to-purple-600 p-1 shadow-2xl shadow-yellow-500/30 flex items-center justify-center ${zeusState === 'strike' ? 'zeus-striking' : 'zeus-floating'}`}>
                            <div className="w-full h-full rounded-full bg-slate-950 flex items-center justify-center text-5xl">
                                ⚡🧔🏼‍♂️
                            </div>
                        </div>

                        <h3 className="text-lg font-black text-white uppercase italic tracking-tight">DEDE (ZEUS)</h3>
                        <div className="mt-2 p-3 bg-black/50 border border-amber-500/20 rounded-2xl">
                            <p className="text-xs text-amber-300 font-bold italic">"{zeusDialogue}"</p>
                        </div>
                    </div>

                    {/* CURRENT SPIN WIN DISPLAY */}
                    <div className={`p-5 rounded-3xl border text-center transition-all ${roundPhase === 'round_win' ? 'bg-emerald-950/40 border-emerald-500 shadow-xl shadow-emerald-500/20' : 'bg-slate-950/80 border-slate-800'}`}>
                        <span className="text-[10px] font-black uppercase tracking-widest text-slate-400 block mb-1">
                            {lang === 'TR' ? 'TUR KAZANCI' : 'SPIN WIN'}
                        </span>
                        <div className="text-3xl font-black text-emerald-400 tracking-tight">
                            {formatMoney(currentSpinWin)}
                        </div>
                        {appliedMultiplier > 1 && (
                            <span className="inline-block mt-2 px-3 py-1 bg-yellow-400/10 border border-yellow-400/30 text-yellow-300 text-xs font-black rounded-xl">
                                x{appliedMultiplier} Çarpan Uygulandı!
                            </span>
                        )}
                    </div>
                </div>
            </div>

            {/* BOTTOM CONTROL BAR */}
            <div className="mt-4 bg-slate-950/90 border border-slate-800 p-4 rounded-3xl backdrop-blur-md shadow-2xl flex flex-wrap items-center justify-between gap-4">

                {/* BET ADJUSTMENT */}
                <div className="flex items-center gap-2">
                    <button
                        onClick={(e) => handleBetAdjustment('dec', e.ctrlKey)}
                        disabled={isSpinning || inFreeSpins}
                        className="w-10 h-10 rounded-2xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-white font-black text-lg transition-all active:scale-95 flex items-center justify-center select-none"
                        title="Tıkla: Azalt | Ctrl + Tıkla: %10 Azalt"
                    >
                        -
                    </button>

                    <div className="px-4 py-2 bg-slate-900 border border-slate-700 rounded-2xl text-center min-w-[120px]" title="Ctrl tuşuna basarak + veya - ile %10 değiştirebilirsiniz">
                        <span className="text-[9px] uppercase font-bold text-slate-400 tracking-widest block">{t.bet || 'Bahis'}</span>
                        <span className="text-base font-black text-white">{formatMoney(bet)}</span>
                    </div>

                    <button
                        onClick={(e) => handleBetAdjustment('inc', e.ctrlKey)}
                        disabled={isSpinning || inFreeSpins}
                        className="w-10 h-10 rounded-2xl bg-slate-900 hover:bg-slate-800 border border-slate-700 text-white font-black text-lg transition-all active:scale-95 flex items-center justify-center select-none"
                        title="Tıkla: Artır | Ctrl + Tıkla: %10 Artır"
                    >
                        +
                    </button>
                </div>

                {/* QUICK BET PRESETS - WIDER INTERVALS & SPACING */}
                <div className="hidden md:flex items-center gap-2 md:gap-3 overflow-x-auto py-1.5 scrollbar-thin">
                    {betPresets.map((preset) => (
                        <button
                            key={preset}
                            onClick={() => handleBetChange(preset)}
                            disabled={isSpinning || inFreeSpins}
                            className={`px-3.5 py-2 rounded-xl text-xs font-bold whitespace-nowrap transition-all hover:scale-105 active:scale-95 ${bet === preset
                                ? 'bg-amber-500 text-slate-950 font-black shadow-lg shadow-amber-500/20'
                                : 'bg-slate-900 text-slate-400 hover:text-white border border-slate-800 hover:border-slate-700'
                                }`}
                        >
                            {formatMoney(preset)}
                        </button>
                    ))}
                </div>

                {/* SPINS & TURBO CONTROLS */}
                <div className="flex items-center gap-3">
                    <button
                        onClick={() => setTurboMode(!turboMode)}
                        className={`px-3.5 py-3 rounded-2xl border text-xs font-black uppercase tracking-wider flex items-center gap-1.5 transition-all ${turboMode
                            ? 'bg-amber-500/20 border-amber-500 text-amber-300'
                            : 'bg-slate-900 border-slate-800 text-slate-400 hover:text-white'
                            }`}
                        title="Hızlı Çevirme (Turbo)"
                    >
                        <Icons.Zap size={16} />
                        {turboMode ? 'TURBO ON' : 'TURBO'}
                    </button>

                    {autoSpinsRemaining > 0 ? (
                        <button
                            onClick={() => setAutoSpinsRemaining(0)}
                            className="px-4 py-3 rounded-2xl bg-rose-600 hover:bg-rose-500 text-white font-black text-xs uppercase tracking-wider shadow-lg shadow-rose-600/30"
                        >
                            DURDUR ({autoSpinsRemaining})
                        </button>
                    ) : (
                        <button
                            onClick={() => setShowAutoModal(true)}
                            disabled={isSpinning || inFreeSpins}
                            className="px-3.5 py-3 rounded-2xl bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-300 font-black text-xs uppercase tracking-wider flex items-center gap-1.5"
                        >
                            <Icons.Repeat size={16} />
                            {t.autoSpin || 'Otomatik'}
                        </button>
                    )}

                    {/* BIG SPIN BUTTON WITH STATUS GLOW */}
                    <button
                        onClick={executeSpin}
                        disabled={isSpinning || inFreeSpins}
                        className={`px-8 py-3.5 rounded-2xl font-black text-sm uppercase tracking-widest shadow-2xl transition-all flex items-center gap-2 ${isSpinning
                            ? 'bg-slate-800 text-slate-500 cursor-not-allowed opacity-70'
                            : 'bg-gradient-to-r from-amber-400 via-amber-500 to-yellow-500 hover:from-amber-300 hover:to-yellow-400 text-slate-950 shadow-amber-500/40 hover:scale-105 active:scale-95 animate-pulse'
                            }`}
                    >
                        <Icons.Play size={18} />
                        {isSpinning ? (t.spinning || 'DÖNÜYOR...') : (t.spin || 'ÇEVİR')}
                    </button>
                </div>
            </div>

            {/* BONUS BUY CONFIRMATION MODAL */}
            {showBonusBuyModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/85 backdrop-blur-md animate-in fade-in">
                    <div className="w-full max-w-md p-6 bg-slate-900 border-2 border-amber-500 rounded-3xl shadow-2xl text-center">
                        <div className="w-16 h-16 mx-auto mb-3 rounded-2xl bg-amber-500/20 border border-amber-500 flex items-center justify-center text-3xl">
                            ⚡
                        </div>
                        <h3 className="text-xl font-black text-white uppercase italic mb-1">BONUS SATIN AL</h3>
                        <p className="text-xs text-amber-300 font-bold mb-4">15 Freespin & Kümülatif Çarpanlar</p>

                        <div className="bg-slate-950/70 border border-slate-800 rounded-2xl p-4 mb-4 text-left space-y-2 text-xs">
                            <div className="flex justify-between">
                                <span className="text-slate-400 font-bold">Taban Bahis:</span>
                                <span className="text-white font-black">{formatMoney(bet)}</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-slate-400 font-bold">Satın Alma Maliyeti (100x):</span>
                                <span className="text-amber-400 font-black">{formatMoney(bonusBuyCost)}</span>
                            </div>
                            <div className="border-t border-slate-800 pt-2 flex justify-between">
                                <span className="text-slate-400 font-bold">Mevcut Bakiyeniz:</span>
                                <span className="text-slate-200 font-black">{isAppAdmin ? '$∞' : formatMoney(userProfile?.totalWealth || 0)}</span>
                            </div>
                            {!isAppAdmin && (
                                <div className="flex justify-between">
                                    <span className="text-slate-400 font-bold">İşlem Sonrası Kalan:</span>
                                    <span className={`font-black ${(userProfile?.totalWealth || 0) - bonusBuyCost < 0 ? 'text-rose-400' : 'text-emerald-400'}`}>
                                        {formatMoney((userProfile?.totalWealth || 0) - bonusBuyCost)}
                                    </span>
                                </div>
                            )}
                        </div>

                        {(!isAppAdmin && (userProfile?.totalWealth || 0) < bonusBuyCost) && (
                            <p className="text-xs text-rose-400 font-bold mb-3">
                                ⚠️ Bu bonusu satın almak için bakiyeniz yetersiz. Lütfen bahsi düşürün.
                            </p>
                        )}

                        <div className="flex gap-3">
                            <button
                                onClick={() => setShowBonusBuyModal(false)}
                                className="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold rounded-2xl text-xs uppercase transition-all"
                            >
                                İptal
                            </button>
                            <button
                                onClick={executeBonusBuy}
                                disabled={!isAppAdmin && (userProfile?.totalWealth || 0) < bonusBuyCost}
                                className="flex-1 py-3 bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-slate-950 font-black rounded-2xl text-xs uppercase shadow-lg shadow-amber-500/30 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
                            >
                                Satın Al
                            </button>
                        </div>
                    </div>
                </div>
            )}

            {/* FREESPIN INTRO MODAL */}
            {showBonusIntroModal && (
                <div 
                    className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in zoom-in-90 cursor-pointer"
                    onClick={handleStartFreeSpins}
                >
                    <div 
                        className="w-full max-w-lg p-8 bg-gradient-to-b from-purple-950 via-slate-900 to-slate-950 border-2 border-yellow-400 rounded-[3rem] text-center shadow-2xl"
                        onClick={(e) => e.stopPropagation()}
                    >
                        <div className="text-6xl mb-4 animate-bounce">⚡👑⚡</div>
                        <h2 className="text-4xl font-black text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 via-amber-400 to-yellow-200 uppercase tracking-tighter mb-2">
                            TEBRİKLER!
                        </h2>
                        <p className="text-lg font-black text-purple-300 uppercase tracking-widest mb-2">
                            {freeSpinsTotal || 15} SERBEST DÖNDÜRME KAZANDINIZ!
                        </p>
                        <p className="text-xs text-slate-400 italic mb-6">
                            Freespin boyunca çarpanlar havuzda birikir ve tüm kazançlara kümülatif olarak uygulanır!
                        </p>

                        <button
                            onClick={handleStartFreeSpins}
                            className="w-full py-4 bg-gradient-to-r from-amber-400 via-yellow-400 to-amber-500 hover:from-amber-300 hover:to-yellow-300 text-slate-950 font-black text-base uppercase tracking-widest rounded-2xl shadow-xl shadow-amber-500/30 hover:scale-105 active:scale-95 transition-all"
                        >
                            BAŞLAT
                        </button>
                    </div>
                </div>
            )}

            {/* FREESPIN SUMMARY MODAL */}
            {showBonusSummaryModal && bonusSummaryData && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in zoom-in-90">
                    <div className="w-full max-w-lg p-8 bg-gradient-to-b from-slate-900 to-slate-950 border-2 border-emerald-500 rounded-[3rem] text-center shadow-2xl">
                        <div className="text-5xl mb-3">🏆✨</div>
                        <h2 className="text-3xl font-black text-white uppercase tracking-tighter mb-1">
                            BONUS TAMAMLANDI!
                        </h2>
                        <div className="my-6 p-5 bg-black/60 border border-emerald-500/30 rounded-3xl">
                            <span className="text-xs font-bold text-slate-400 uppercase tracking-widest block mb-1">TOPLAM KAZANÇ</span>
                            <span className="text-4xl font-black text-emerald-400 tracking-tight">
                                {formatMoney(bonusSummaryData.totalWin)}
                            </span>
                            <div className="mt-3 flex justify-center gap-4 text-xs font-bold text-slate-300">
                                <span>Oynanan: {bonusSummaryData.spinsPlayed} Spin</span>
                                <span>•</span>
                                <span>Ulaşılan Çarpan: {bonusSummaryData.finalMultiplier}x</span>
                            </div>
                        </div>
                        <button
                            onClick={() => setShowBonusSummaryModal(false)}
                            className="w-full py-4 bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-black text-sm uppercase tracking-widest rounded-2xl shadow-xl shadow-emerald-500/30 hover:scale-105 transition-all"
                        >
                            Devam Et
                        </button>
                    </div>
                </div>
            )}

            {/* BIG WIN OVERLAY */}
            {bigWinOverlay && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in zoom-in-95 pointer-events-auto" onClick={() => setBigWinOverlay(null)}>
                    <div className="w-full max-w-md p-8 bg-gradient-to-b from-amber-500/20 via-slate-900 to-slate-950 border-2 border-yellow-300 rounded-[3rem] text-center shadow-2xl cursor-pointer">
                        <div className="text-5xl mb-2 animate-bounce">🔥👑🔥</div>
                        <h2 className="text-3xl font-black text-yellow-300 uppercase tracking-tighter mb-1 animate-pulse">
                            {bigWinOverlay.title}
                        </h2>
                        <div className="text-4xl font-black text-emerald-400 tracking-tight my-4">
                            {formatMoney(bigWinOverlay.amount)}
                        </div>
                        <span className="text-xs text-amber-300 font-bold tracking-widest uppercase">
                            Bahsin {bigWinOverlay.multiplier} Katı!
                        </span>
                        <p className="text-[10px] text-slate-500 mt-4">Devam etmek için ekrana dokunun</p>
                    </div>
                </div>
            )}

            {/* AUTO SPIN MODAL */}
            {showAutoModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in">
                    <div className="w-full max-w-sm p-6 bg-slate-900 border border-slate-700 rounded-3xl text-center shadow-2xl">
                        <h3 className="text-lg font-black text-white uppercase mb-4">Otomatik Döndürme</h3>
                        <div className="grid grid-cols-2 gap-3 mb-6">
                            {[10, 20, 50, 100].map(count => (
                                <button
                                    key={count}
                                    onClick={() =>
                                    {
                                        setAutoSpinsRemaining(count);
                                        setShowAutoModal(false);
                                    }}
                                    className="py-3 bg-slate-800 hover:bg-amber-500 hover:text-slate-950 text-white font-black text-sm rounded-2xl transition-all"
                                >
                                    {count} Spin
                                </button>
                            ))}
                        </div>
                        <button
                            onClick={() => setShowAutoModal(false)}
                            className="w-full py-2.5 bg-slate-800 text-slate-400 text-xs font-bold rounded-xl"
                        >
                            İptal
                        </button>
                    </div>
                </div>
            )}

            {/* PAYTABLE & RULES MODAL */}
            {showPaytable && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/90 backdrop-blur-xl animate-in fade-in">
                    <div className="w-full max-w-2xl max-h-[85vh] overflow-y-auto p-6 bg-slate-900 border border-amber-500/40 rounded-3xl shadow-2xl custom-scrollbar">
                        <div className="flex items-center justify-between mb-6 pb-3 border-b border-slate-800">
                            <h2 className="text-xl font-black text-white uppercase italic flex items-center gap-2">
                                <Icons.Zeus size={24} className="text-yellow-400" />
                                Dede Kuralları & Ödeme Tablosu
                            </h2>
                            <button
                                onClick={() => setShowPaytable(false)}
                                className="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl"
                            >
                                <Icons.XCircle size={20} />
                            </button>
                        </div>

                        {/* RULES SUMMARY */}
                        <div className="space-y-4 text-xs text-slate-300 mb-6">
                            <div className="p-4 bg-slate-950/60 rounded-2xl border border-slate-800">
                                <h4 className="font-black text-amber-400 uppercase mb-1">⚡ Her Yerde Öder (Scatter Pays)</h4>
                                <p className="leading-relaxed">
                                    Ödeme çizgisi yoktur! Aynı sembolden ekranda en az 8 adet bulunması kazanmak için yeterlidir.
                                </p>
                            </div>
                            <div className="p-4 bg-slate-950/60 rounded-2xl border border-slate-800">
                                <h4 className="font-black text-amber-400 uppercase mb-1">🔄 Takla (Tumble / Cascade)</h4>
                                <p className="leading-relaxed">
                                    Kazanan semboller patlar, kalanlar aşağı düşer ve boşluklara yukarıdan yeni semboller dökülür. Kazanç sürdükçe takla devam eder.
                                </p>
                            </div>
                            <div className="p-4 bg-slate-950/60 rounded-2xl border border-slate-800">
                                <h4 className="font-black text-amber-400 uppercase mb-1">💥 Dede Çarpan Küreleri (2x - 500x)</h4>
                                <p className="leading-relaxed">
                                    Dede rastgele şimşek çakarak ekrana 2x ila 500x arası çarpan küreleri fırlatır. Taklalar bittiğinde o turun toplam kazancı tüm çarpanların toplamı ile çarpılır!
                                </p>
                            </div>
                            <div className="p-4 bg-amber-500/10 rounded-2xl border border-amber-500/30">
                                <h4 className="font-black text-amber-400 uppercase mb-1">🏆 Maksimum Kazanç Limiti (5.000x)</h4>
                                <p className="leading-relaxed text-amber-200/90">
                                    Tek bir turda veya Freespin turunda ulaşılabilecek maksimum kazanç bahis miktarının 5.000 katıdır. Bu sınıra ulaşıldığında tur anında maksimum kazançla tamamlanır.
                                </p>
                            </div>
                        </div>

                        {/* PAYTABLE GRID */}
                        <h3 className="text-sm font-black text-white uppercase mb-3">Sembol Değerleri (Bahis Katsayısı)</h3>
                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">👑</div>
                                <span className="font-black text-white block">Taç</span>
                                <span className="text-[10px] text-amber-400 font-bold block">8-9: 10x | 10-11: 25x | 12+: 50x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">⏳</div>
                                <span className="font-black text-white block">Kum Saati</span>
                                <span className="text-[10px] text-amber-400 font-bold block">8-9: 2.5x | 10-11: 10x | 12+: 25x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">💍</div>
                                <span className="font-black text-white block">Yüzük</span>
                                <span className="text-[10px] text-amber-400 font-bold block">8-9: 2.0x | 10-11: 5.0x | 12+: 15x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">🏆</div>
                                <span className="font-black text-white block">Kadeh</span>
                                <span className="text-[10px] text-amber-400 font-bold block">8-9: 1.5x | 10-11: 2.0x | 12+: 12x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">💎</div>
                                <span className="font-black text-white block">Yakut</span>
                                <span className="text-[10px] text-slate-300 font-bold block">8-9: 1.0x | 10-11: 1.5x | 12+: 10x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">🔮</div>
                                <span className="font-black text-white block">Ametist</span>
                                <span className="text-[10px] text-slate-300 font-bold block">8-9: 0.8x | 10-11: 1.2x | 12+: 8.0x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">⭐</div>
                                <span className="font-black text-white block">Topaz</span>
                                <span className="text-[10px] text-slate-400 block">8-9: 0.5x | 10-11: 1.0x | 12+: 5.0x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">🟢</div>
                                <span className="font-black text-white block">Zümrüt</span>
                                <span className="text-[10px] text-slate-400 block">8-9: 0.4x | 10-11: 0.9x | 12+: 4.0x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-slate-800 rounded-2xl text-center">
                                <div className="text-3xl mb-1">🔷</div>
                                <span className="font-black text-white block">Safir</span>
                                <span className="text-[10px] text-slate-400 block">8-9: 0.25x | 10-11: 0.75x | 12+: 2.0x</span>
                            </div>
                            <div className="p-3 bg-slate-950/60 border border-amber-500/30 rounded-2xl text-center col-span-2 sm:col-span-3">
                                <div className="text-3xl mb-1">⚡</div>
                                <span className="font-black text-yellow-400 block">Dede Scatter</span>
                                <span className="text-[10px] text-yellow-300 font-bold block">4 Scatter: 3x + 15 Freespin | 5 Scatter: 5x | 6 Scatter: 100x</span>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}

window.Dede = Dede;