<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>CV111 VIP - Full Page (Images 1 to 7 Complete Integration)</title>

    <!-- ✅ Speed Boost: গুরুত্বপূর্ণ External Domain-এর সাথে আগেভাগে Connection তৈরি -->
    <link rel="preconnect" href="https://cdn.tailwindcss.com">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Tailwind CSS CDN (✅ defer সরানো হলো — এটা Runtime-এ CSS
         Generate করে, তাই Defer দিলে পুরো HTML Parse শেষ না হওয়া
         পর্যন্ত কোনো Style-ই কাজ করত না, ফলে প্রথমে সাদা/Unstyled
         দেখাতো, তারপর হঠাৎ পুরো ডিজাইন এসে পড়তো — এখন এই সমস্যা নেই) -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- ✅ Font Awesome — Non-blocking ভাবে লোড (preload + swap trick) -->
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"></noscript>

    <!-- ✅ Google Font — Non-blocking ভাবে লোড -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap"></noscript>

    <!-- ✅ পুরো Theme CSS আলাদা ফাইলে (আগে ৪টা <style> ব্লকে ছিল) -->
    <link rel="stylesheet" href="/css/theme.css">
</head>
<body class="max-w-md mx-auto min-h-screen relative pb-28 border-x border-teal-900/50 shadow-2xl">

    <script src="/js/01-zoom-prevent.js" defer></script>

    <!-- Top App Download Banner -->
    <div class="bg-[#021717] px-3 py-1.5 flex items-center justify-between border-b border-teal-900/40">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-gradient-to-tr from-amber-600 to-yellow-400 rounded-full flex items-center justify-center p-0.5 shadow-md">
                <div class="w-full h-full bg-[#032e2e] rounded-full flex items-center justify-center border border-yellow-300">
                    <span class="text-[7px] font-black text-amber-400 leading-none text-center">TK<br>999</span>
                </div>
            </div>
            <div>
                <p class="text-[11px] font-bold text-amber-400 tracking-wider">APP UP TO ৳999 &gt;&gt;&gt;</p>
                <div class="flex text-amber-400 text-[9px] gap-0.5">
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                    <i class="fa-solid fa-star"></i>
                </div>
            </div>
        </div>
        <div class="flex items-center gap-2">
            <button class="bg-gradient-to-r from-amber-400 to-yellow-400 text-black font-extrabold text-[11px] px-3 py-1 rounded-md shadow">
                Download
            </button>
            <i class="fa-solid fa-xmark text-gray-400 text-sm cursor-pointer ml-1"></i>
        </div>
    </div>

    <!-- Main Navigation Header -->
    <div class="bg-[#032424] px-3 py-2 flex items-center justify-between border-b border-teal-800/40 sticky top-10 z-40">
        <div class="flex items-center gap-2">
            <i class="fa-solid fa-bars-staggered text-lg text-white cursor-pointer" onclick="toggleSideMenu()"></i>
            <div class="flex items-center gap-1.5 font-extrabold text-lg tracking-wide">
                <span class="brand-shine">CV111</span>
            </div>
        </div>
        
        <div class="flex items-center gap-1.5">
            <!-- ✅ Login না করা থাকলে, Login/Register Button দেখাবে -->
            <div id="loggedOutButtons" class="hidden items-center gap-2">
                <a href="/newlogin.php" class="text-gray-300 text-xs font-bold px-2 py-1">Login</a>
                <a href="/newregister.php" class="bg-gradient-to-r from-amber-400 to-yellow-400 text-teal-950 text-xs font-black px-3 py-1 rounded-full">Register</a>
            </div>

            <div class="w-7 h-7 rounded-full border border-amber-400/80 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&q=80" class="w-full h-full object-cover" alt="User">
            </div>
            <a href="/newdeposit_panel.php" id="loggedInBadge" class="hidden bg-[#011717] px-2 py-0.5 rounded-full items-center gap-1.5 border border-teal-800">
                <span id="balanceBadge" class="text-emerald-400 font-bold text-[11px]">৳ 0.00</span>
                <i class="fa-solid fa-rotate-right text-[10px] text-teal-400 cursor-pointer" onclick="event.preventDefault(); event.stopPropagation(); loadBalance();"></i>
            </a>
        </div>
    </div>

    <!-- Announcement Bar -->
    <div class="bg-[#021c1c] px-3 py-1 flex items-center gap-2 text-xs border-b border-teal-900/60">
        <span class="text-amber-500 text-sm"><i class="fa-solid fa-bullhorn"></i></span>
        <marquee class="text-amber-400 text-[11px] font-medium" scrollamount="4">
            🎉 🎉 🎉 CV111-এ স্বাগতম! সেরা Gaming Experience এখন আপনার হাতের মুঠোয়!
        </marquee>
    </div>

    <!-- ==================== IMAGE 1: HERO & CATEGORIES ==================== -->

    <!-- ✅ Hero Banner Slider (GetBannerList.php থেকে Dynamic) -->
    <div class="p-2.5">
        <div class="relative rounded-2xl overflow-hidden border border-teal-700/60 h-40 shadow-lg bg-[#021c1c]">
            <div id="bannerContainer" class="relative w-full h-full">
                <div class="absolute inset-0 flex items-center justify-center text-gray-500 text-xs">Banner লোড হচ্ছে...</div>
            </div>
            <!-- Carousel Dots -->
            <div id="bannerDots" class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-1 z-10"></div>
        </div>
    </div>

    <!-- ✅ Recent Winners Live Ticker (GetAllGameList.php-এর awardRecordList থেকে) -->
    <div class="mx-2.5 mb-3 bg-[#021c1c] border border-teal-900/60 rounded-lg py-1.5 overflow-hidden flex items-center gap-2 px-2">
        <i class="fa-solid fa-trophy text-amber-400 text-xs flex-shrink-0"></i>
        <div class="overflow-hidden flex-1">
            <div id="winnersTicker" class="flex items-center gap-2 whitespace-nowrap" style="animation: scrollTicker 25s linear infinite;">
                <span class="text-gray-500 text-[11px]">লোড হচ্ছে...</span>
            </div>
        </div>
    </div>

    <script src="/js/00-gamelist-cache.js" defer></script>
    <script src="/js/02-winners-ticker.js" defer></script>

    <script src="/js/03-banner-slider.js" defer></script>

    <!-- Deposit & Withdraw Buttons -->
    <div class="px-2.5 grid grid-cols-2 gap-2.5 mb-3">
        <a href="/newdeposit_panel.php" onclick="return requireLogin(event)" class="bg-[#042d2d] border border-teal-700/60 text-amber-300 font-bold py-3.5 rounded-2xl flex items-center justify-center gap-2.5 shadow-inner active:scale-95 transition-transform">
            <i class="fa-solid fa-wallet text-amber-400 text-xl"></i>
            <span class="text-lg font-extrabold">Deposit</span>
        </a>
        <a href="/newwithdraw_premium.php" onclick="return requireLogin(event)" class="bg-[#042d2d] border border-teal-700/60 text-amber-300 font-bold py-3.5 rounded-2xl flex items-center justify-center gap-2.5 shadow-inner active:scale-95 transition-transform">
            <i class="fa-solid fa-money-bill-transfer text-amber-400 text-xl"></i>
            <span class="text-lg font-extrabold">Withdraw</span>
        </a>
    </div>

    <!-- Category Filter Tabs -->
    <div class="px-2.5 grid grid-cols-3 gap-2.5 mb-4">
        <button id="topTabHot" onclick="switchTopTab('hot')" class="bg-[#053d3d] text-cyan-300 px-2 py-3 rounded-2xl flex items-center justify-center gap-2 text-base font-extrabold border border-teal-600">
            <i class="fa-solid fa-fire text-teal-300 text-lg"></i> HOT GAMES
        </button>
        <button id="topTabFav" onclick="switchTopTab('favorites')" class="bg-[#022828] text-gray-300 px-2 py-3 rounded-2xl flex items-center justify-center gap-2 text-base font-bold border border-teal-900/60 whitespace-nowrap">
            <i class="fa-solid fa-folder text-teal-400 text-lg"></i> FAVORITES
        </button>
        <button id="topTabSlots" onclick="switchTopTab('slots')" class="bg-[#022828] text-gray-300 px-2 py-3 rounded-2xl flex items-center justify-center gap-2 text-base font-bold border border-teal-900/60 whitespace-nowrap">
            <i class="fa-solid fa-cubes text-teal-400 text-lg"></i> SLOTS
        </button>
    </div>

    <!-- Hot Games Section Header -->
    <div class="px-2.5 flex items-center justify-between mb-3">
        <h3 class="text-cyan-400 font-black text-2xl tracking-wide uppercase" id="topSectionTitle">HOT GAMES</h3>
        <div class="flex items-center gap-2">
            <a href="/newcategorygames.php?category=popular&title=Hot%20Games" id="topSectionSeeAll" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>


    <!-- ==================== IMAGE 2: JACKPOT & SLOTS ==================== -->

    <!-- Top Tab Content Grid (HOT GAMES / FAVORITES / SLOTS — রিয়েল ডাটা) -->
    <div class="px-2.5 grid grid-cols-3 gap-2 mb-4" id="hotGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-28 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-28 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-28 skeleton-shimmer"></div>
    </div>

    <!-- JACKPOT BANNER SECTION -->
    <div class="px-2.5 mb-4">
        <div class="relative rounded-2xl bg-gradient-to-b from-teal-900/90 to-[#021f1f] border-2 border-amber-500/50 py-6 px-3 shadow-2xl text-center overflow-hidden" style="box-shadow: 0 0 30px rgba(251,191,36,.15), 0 15px 35px rgba(0,0,0,.5);">
            <img src="https://files.catbox.moe/torn7n.png" alt="Jackpot" class="absolute inset-0 w-full h-full object-cover opacity-25 pointer-events-none">
            <div class="absolute -top-1 left-4 text-red-500 text-3xl opacity-80 rotate-12">
                <i class="fa-solid fa-plane"></i>
            </div>

            <div class="relative z-10">
                <img src="https://files.catbox.moe/bq77tc.png" alt="Jackpot" class="h-10 mx-auto mb-1">

                <div class="flex justify-center items-center gap-1 mt-4 mb-1 flex-wrap" id="jackpotCounter">
                    <span class="jackpot-digit">1</span>
                    <span class="jackpot-digit">2</span>
                    <span class="jackpot-digit">3</span>
                    <span class="text-amber-400 font-black text-lg mx-0.5">,</span>
                    <span class="jackpot-digit">3</span>
                    <span class="jackpot-digit">8</span>
                    <span class="jackpot-digit">5</span>
                    <span class="text-amber-400 font-black text-lg mx-0.5">,</span>
                    <span class="jackpot-digit">9</span>
                    <span class="jackpot-digit">5</span>
                    <span class="jackpot-digit">2</span>
                    <span class="text-amber-400 font-black text-lg mx-0.5">.</span>
                    <span class="jackpot-digit">8</span>
                    <span class="jackpot-digit">1</span>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/04-jackpot-counter.js" defer></script>

    <!-- Jackpot Games Grid (রিয়েল ডাটা — GetAllGameList.php থেকে) -->
    <div class="px-2.5 grid grid-cols-3 gap-2 mb-5" id="jackpotGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-32 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-32 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-32 skeleton-shimmer"></div>
    </div>

    <!-- SLOTS Section Header -->
    <div class="px-2.5 flex items-center justify-between mb-2">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">SLOTS</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newslots.php" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <!-- Slots Games Grid (রিয়েল ডাটা — data file থেকে) -->
    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="slotsGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-32 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-32 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-32 skeleton-shimmer"></div>
    </div>


    <!-- ==================== IMAGE 3: LIVE CASINO & SPORTS ==================== -->

    <!-- LIVE CASINO Section -->
    <div class="px-2.5 flex items-center justify-between mb-2 mt-4">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">LIVE CASINO</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newcategorygames.php?category=video&title=Live%20Casino" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="liveCasinoGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
    </div>

    <!-- SPORTS Section -->
    <div class="px-2.5 flex items-center justify-between mb-2">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">SPORTS</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newcategorygames.php?category=sport&title=Sports" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="sportsGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
    </div>


    <!-- ==================== IMAGE 4 & 5: E-SPORTS, POKER & FISH ==================== -->

    <!-- E-SPORTS Section -->
    <div class="px-2.5 flex items-center justify-between mb-2">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">E-SPORTS</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newcategorygames.php?source=json&file=esports.json&title=E-Sports" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="esportsGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
    </div>

    <!-- POKER Section -->
    <div class="px-2.5 flex items-center justify-between mb-2">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">POKER</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newcategorygames.php?source=json&file=poker.json&title=Poker" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="pokerGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
    </div>

    <!-- FISH Section -->
    <div class="px-2.5 flex items-center justify-between mb-2">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">FISH</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newcategorygames.php?category=fish&title=Fish" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="fishGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
    </div>


    <!-- ==================== IMAGE 6 & 7: LOTTERY, PARTNER & FOOTER ==================== -->

    <!-- LOTTERY Section Header -->
    <div class="px-2.5 flex items-center justify-between mb-2">
        <h3 class="text-cyan-400 font-black text-xl tracking-wide uppercase">LOTTERY</h3>
        <div class="flex items-center gap-1.5">
            <a href="/newcategorygames.php?source=json&file=lottery.json&title=Lottery" class="text-emerald-400 text-sm font-bold bg-[#022828] px-4 py-2 rounded-xl border border-teal-800">See All</a>
        </div>
    </div>

    <!-- Lottery Games Grid (রিয়েল ডাটা — lottery.json থেকে) -->
    <div class="px-2.5 grid grid-cols-3 gap-2 mb-6" id="lotteryGamesGrid">
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
        <div class="rounded-xl overflow-hidden bg-[#022828] h-36 skeleton-shimmer"></div>
    </div>

    <!-- PARTNER & Live Chat Buttons -->
    <div class="px-2.5 grid grid-cols-2 gap-3 mb-6">
        <a href="/newreferral.php" class="partner-btn py-3 rounded-xl flex items-center justify-center text-amber-400 font-black text-sm tracking-widest shadow-lg italic">
            PARTNER
        </a>
        <a href="/chatbot_widget.html" class="partner-btn py-3 rounded-xl flex items-center justify-center gap-2 text-amber-400 font-bold text-sm shadow-lg">
            <span class="w-6 h-6 bg-amber-400 text-teal-950 rounded-full flex items-center justify-center text-xs">
                <i class="fa-solid fa-comment-dots"></i>
            </span>
            <span>Live Chat</span>
        </a>
    </div>

    <!-- Game Center Tag Filters with IMAGE 7 FLOATING GIFT WIDGET -->
    <div class="px-2.5 mb-6 relative">
        <h4 class="text-amber-400 font-extrabold text-xs mb-2">Game Center</h4>
        <div class="flex flex-wrap gap-1.5 items-center pr-10">
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">Slots</span>
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">Live Casino</span>
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">Sports</span>
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">E-sports</span>
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">Poker</span>
            <button class="w-6 h-6 bg-orange-500 rounded-full text-white text-[10px] flex items-center justify-center shadow"><i class="fa-solid fa-chevron-down"></i></button>
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">Fish</span>
            <span class="bg-[#023333] border border-teal-700/60 text-emerald-300 text-[10px] font-semibold px-2.5 py-1 rounded-md">Lottery</span>
        </div>

        <!-- IMAGE 7 Floating Gift Box Widget (Absolute Positioned over Game Center) -->
        <div class="absolute right-1 top-0 cursor-pointer animate-bounce">
            <div class="w-10 h-11 bg-gradient-to-tr from-purple-600 via-pink-500 to-amber-300 rounded-lg p-0.5 shadow-xl border border-yellow-200 flex flex-col items-center justify-center">
                <i class="fa-solid fa-gift text-white text-lg"></i>
                <span class="text-[7px] font-black text-yellow-200 uppercase leading-none mt-0.5">Bonus</span>
            </div>
            <span class="absolute -top-1 -right-1 w-3.5 h-3.5 bg-gray-600 text-white text-[8px] rounded-full flex items-center justify-center"><i class="fa-solid fa-xmark"></i></span>
        </div>
    </div>

    <!-- Footer Copyright & License Text -->
    <div class="px-3 mb-6 flex gap-3 items-start border-t border-teal-900/60 pt-4">
        <!-- Logo -->
        <div class="w-14 h-14 bg-gradient-to-tr from-amber-600 to-yellow-400 rounded-full flex items-center justify-center p-0.5 shrink-0 shadow-lg">
            <div class="w-full h-full bg-[#032e2e] rounded-full flex items-center justify-center border border-yellow-300">
                <span class="text-[9px] font-black text-amber-400 leading-none text-center">TK<br>999</span>
            </div>
        </div>

        <!-- License Info Text -->
        <div class="text-[8px] text-gray-400 leading-tight space-y-2">
            <p>
                CV111 website is operated by company, under license number GLH-OCCHKTW0708172022 issued to it and regulated by Gaming Services Provider N.V., authorized by the Government of Curaçao under license number 365/JAZ.
            </p>
            <!-- Social Bar inside Footer -->
            <div class="flex items-center gap-2 pt-1">
                <a href="https://www.facebook.com/share/1By9fX4FNj/" target="_blank" class="w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white text-[10px]"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="https://www.instagram.com/" target="_blank" class="w-6 h-6 bg-pink-600 rounded-full flex items-center justify-center text-white text-[10px]"><i class="fa-brands fa-instagram"></i></a>
                <a href="https://t.me/CV111updates" target="_blank" class="w-6 h-6 bg-sky-500 rounded-full flex items-center justify-center text-white text-[10px]"><i class="fa-paper-plane"></i></a>
                <a href="https://whatsapp.com/channel/0029Vb8evJ9AO7RBmKZbqU1E" target="_blank" class="w-6 h-6 bg-emerald-500 rounded-full flex items-center justify-center text-white text-[10px]"><i class="fa-brands fa-whatsapp"></i></a>
                <span class="w-6 h-6 bg-red-600/20 border border-red-500 rounded-full flex items-center justify-center text-red-500 text-[8px] font-black">18+</span>
            </div>
        </div>
    </div>

    <!-- Game Providers Logos Grid -->
    <div class="px-3 border-t border-teal-900/60 pt-3 pb-8">
        <div class="grid grid-cols-4 gap-y-3 gap-x-2 text-center items-center">
            <div class="provider-logo text-amber-400 font-extrabold text-sm">JILI</div>
            <div class="provider-logo text-white font-extrabold text-xs">SPRIBE</div>
            <div class="provider-logo text-gray-200 font-black text-[10px]">PG SOFT</div>
            <div class="provider-logo text-cyan-400 font-extrabold text-xs">BNG</div>
            <div class="provider-logo text-red-400 font-black text-xs">FC FA CHAI</div>
            <div class="provider-logo text-blue-300 font-medium text-[9px]">Microgaming</div>
            <div class="provider-logo text-yellow-500 font-bold text-xs">JDB</div>
            <div class="provider-logo text-red-500 font-bold text-[9px]">SMARTSOFT</div>
            <div class="provider-logo text-blue-400 font-medium text-[9px]">PLAYSTAR</div>
            <div class="provider-logo text-emerald-400 font-bold text-[8px]">askmeslot</div>
            <div class="provider-logo text-orange-400 font-bold text-[9px]">AMIGO GAMING</div>
            <div class="provider-logo text-purple-400 font-extrabold text-xs">VA</div>
            <div class="provider-logo text-gray-300 font-bold text-[8px]">FIRST PERSON</div>
            <div class="provider-logo text-red-500 font-black text-[9px]">FASTSPIN</div>
            <div class="provider-logo text-blue-300 font-bold text-[9px]">EVOPLAY</div>
            <div class="provider-logo text-white font-black text-[8px]">HACKSAW GAMING</div>
            <div class="provider-logo text-teal-300 font-extrabold text-[9px]">NAGA GAMES</div>
            <div class="provider-logo text-amber-300 font-extrabold text-[9px]">MAHA GAMING</div>
            <div class="provider-logo text-emerald-300 font-bold text-[8px]">GEMINI</div>
            <div class="provider-logo text-cyan-300 font-bold text-[8px]">AVATARUX</div>
            <div class="provider-logo text-yellow-400 font-black text-[9px]">YELLOW BAT</div>
            <div class="provider-logo text-amber-500 font-black text-[9px]">BT GAMING</div>
            <div class="provider-logo text-red-400 font-bold text-[8px]">BALSON GAMES</div>
            <div class="provider-logo text-indigo-300 font-bold text-[8px]">AMEBA</div>
        </div>
    </div>

    <!-- ✅ Real Games Loader — এখন ১১টা আলাদা .js ফাইলে বিভক্ত -->
    <script src="/js/05-favorites.js" defer></script>
    <script src="/js/06-game-card-renderer.js" defer></script>
    <script src="/js/07-game-loader-basic.js" defer></script>
    <script src="/js/08-game-loader-categories.js" defer></script>
    <script src="/js/09-game-loader-casino.js" defer></script>
    <script src="/js/10-slots-keywords.js" defer></script>
    <script src="/js/11-game-loader-slots.js" defer></script>
    <script src="/js/21-json-file-loader.js" defer></script>
    <script src="/js/12-tab-switcher.js" defer></script>
    <script src="/js/13-game-launcher.js" defer></script>
    <script src="/js/14-jackpot-slider.js" defer></script>
    <script src="/js/15-home-init.js" defer></script>

    <!-- Floating Quick Action Buttons (Right Side Bar) -->
    <div class="fixed right-2 bottom-24 flex flex-col items-end gap-2.5 z-40">
        <a href="https://whatsapp.com/channel/0029Vb8evJ9AO7RBmKZbqU1E" target="_blank" class="w-14 h-14 rounded-full flex items-center justify-center text-white text-2xl shadow-lg border-2 border-white/20" style="background: linear-gradient(145deg, #34d399, #059669); box-shadow: 0 6px 16px rgba(16,185,129,.5);"><i class="fa-brands fa-whatsapp"></i></a>
        <a href="https://www.facebook.com/share/1By9fX4FNj/" target="_blank" class="w-14 h-14 rounded-full flex items-center justify-center text-white text-2xl shadow-lg border-2 border-white/20" style="background: linear-gradient(145deg, #60a5fa, #1d4ed8); box-shadow: 0 6px 16px rgba(37,99,235,.5);"><i class="fa-brands fa-facebook-f"></i></a>
        <a href="https://t.me/CV111updates" target="_blank" class="w-14 h-14 rounded-full flex items-center justify-center text-white text-2xl shadow-lg border-2 border-white/20" style="background: linear-gradient(145deg, #7dd3fc, #0284c7); box-shadow: 0 6px 16px rgba(2,132,199,.5);"><i class="fa-solid fa-paper-plane"></i></a>
        <a href="/chatbot_widget.html" class="w-14 h-14 rounded-full flex items-center justify-center text-white text-2xl shadow-lg border-2 border-white/20" style="background: linear-gradient(145deg, #fbbf24, #d97706); box-shadow: 0 6px 16px rgba(217,119,6,.5);"><i class="fa-solid fa-headset"></i></a>
    </div>

    <!-- Bottom Mobile Menu Bar -->
    <div class="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-md bg-[#021a1a] border-t border-teal-800/80 px-2 pt-2 pb-1.5 flex justify-around items-end z-50">
        <a href="/newhome.php" class="flex flex-col items-center gap-1 text-amber-400 py-1 flex-1">
            <div class="w-11 h-11 rounded-2xl flex items-center justify-center" style="background: linear-gradient(145deg, rgba(251,191,36,.25), rgba(251,191,36,.06)); border: 1px solid rgba(251,191,36,.35);">
                <i class="fa-solid fa-house text-xl"></i>
            </div>
            <span class="text-[11px] font-bold">Home</span>
        </a>
        <a href="/newpromotions.php" class="flex flex-col items-center gap-1 text-gray-300 py-1 flex-1">
            <div class="w-11 h-11 rounded-2xl flex items-center justify-center bg-[#022828] border border-teal-900/60">
                <i class="fa-solid fa-rectangle-ad text-xl"></i>
            </div>
            <span class="text-[11px] font-semibold">Promotion</span>
        </a>
        <div class="relative -top-4 flex-1 flex justify-center">
            <a href="/newreferral.php" class="w-16 h-16 text-teal-950 rounded-full flex flex-col items-center justify-center gap-0.5 shadow-lg border-4 border-[#021a1a]" style="background: linear-gradient(145deg, #5eead4, #14b8a6); box-shadow: 0 8px 20px rgba(20,184,166,.5);">
                <i class="fa-solid fa-share-nodes text-xl"></i>
                <span class="text-[10px] font-black leading-none">Invite</span>
            </a>
        </div>
        <a href="/newrewardcenter.php" class="flex flex-col items-center gap-1 text-gray-300 py-1 flex-1">
            <div class="w-11 h-11 rounded-2xl flex items-center justify-center bg-[#022828] border border-teal-900/60">
                <i class="fa-solid fa-award text-xl"></i>
            </div>
            <span class="text-[11px] font-semibold">Reward</span>
        </a>
        <a href="/newprofile.php" class="flex flex-col items-center gap-1 text-gray-300 py-1 flex-1">
            <div class="w-11 h-11 rounded-2xl flex items-center justify-center bg-[#022828] border border-teal-900/60">
                <i class="fa-solid fa-gem text-xl"></i>
            </div>
            <span class="text-[11px] font-semibold">Member</span>
        </a>
    </div>

    <!-- ✅ App Download Modal (Website এ ঢোকার পরপরই দেখাবে) -->
    <div id="appDownloadModal" class="fixed inset-0 z-[200] flex items-center justify-center px-4" style="background: rgba(0,0,0,.6); display:none;">
        <div style="position:relative; width:100%; max-width:400px; background:linear-gradient(160deg,#043434,#021c1c); border:1px solid #0d7474; border-radius:16px; padding:22px 18px; box-shadow:0 15px 40px rgba(0,0,0,.5); text-align:center;">
            <div onclick="closeAppDownloadModal(); showOfferModal();" style="position:absolute; top:12px; right:12px; width:28px; height:28px; background:rgba(255,255,255,.08); border-radius:50%; color:#fff; font-size:18px; line-height:28px; text-align:center; cursor:pointer;">&times;</div>

            <div style="display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px;">
                <div style="width:56px; height:56px; border-radius:50%; background:radial-gradient(circle,#013627 0%,#081721 100%); border:2px solid #fbbf24; display:flex; align-items:center; justify-content:center;">
                    <div class="brand-shine" style="font-weight:900; font-size:11px; text-align:center; line-height:1.1;">CV111</div>
                </div>
                <div style="color:#fbbf24; font-size:19px; font-weight:800;">APP ডাউনলোড করুন</div>
            </div>

            <div style="height:1px; background:rgba(13,116,116,.5); margin:14px 0 18px;"></div>

            <a href="javascript:void(0)" onclick="closeAppDownloadModal(); showOfferModal();" style="color:#4dd8d8; font-size:15px; font-weight:700; text-decoration:underline; display:inline-block; margin-bottom:20px;">Browser-এই থাকতে চাই</a>

            <div style="display:flex; gap:12px; justify-content:center; align-items:center;">
                <div style="position:relative; flex:1;">
                    <div style="position:absolute; top:-16px; left:50%; transform:translateX(-50%); background:#ef4444; color:#fff; font-size:10px; padding:3px 10px; border-radius:12px; white-space:nowrap; font-weight:700;">আরও সুবিধা!</div>
                    <a href="/downloads/CV111.apk" style="width:100%; height:46px; border-radius:12px; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; background:linear-gradient(180deg,#fbbf24,#d97706); color:#012222;">
                        <i class="fa-solid fa-download"></i> APP
                    </a>
                </div>
                <div style="flex:1;">
                    <a href="javascript:void(0)" onclick="closeAppDownloadModal(); showOfferModal();" style="width:100%; height:46px; border-radius:12px; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; background:transparent; color:#4dd8d8; border:1.5px solid #0d7474;">
                        <i class="fa-brands fa-chrome"></i> Browser-এ চালাও
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- ✅ Offer Modal (App Download Modal বন্ধ হওয়ার পর দেখাবে, ছবি আসে offer.json থেকে) -->
    <div id="offerModal" class="fixed inset-0 z-[200] flex items-center justify-center px-4" style="background: rgba(0,0,0,.6); display:none;">
        <div style="position:relative; width:100%; max-width:400px; background:#003c40; border:1px solid #0d7474; border-radius:16px; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,.5);">
            <div onclick="closeOfferModal()" style="position:absolute; top:10px; right:10px; width:28px; height:28px; background:rgba(0,0,0,.4); border-radius:50%; color:#fff; font-size:18px; line-height:28px; text-align:center; cursor:pointer; z-index:5;">&times;</div>
            <div id="offerModalBody"></div>
        </div>
    </div>

    <script src="/js/16-app-download-modal.js" defer></script>
    <script src="/js/22-offer-modal.js" defer></script>

    <!-- ✅ Side Menu Overlay (হ্যামবার্গার বাটনে ক্লিক করলে চালু হয়) -->
    <div id="sideMenuOverlay" class="fixed inset-0 bg-black/60 z-[60]" style="display:none;" onclick="toggleSideMenu()"></div>

    <div id="sideMenuPanel" class="fixed top-0 left-0 h-full w-[270px] bg-[#0b4843] shadow-2xl z-[70] p-3 overflow-y-auto transition-transform duration-300" style="transform: translateX(-100%);">
        <div class="flex items-center justify-between mb-3 px-1">
            <span class="text-emerald-300 font-extrabold text-base">Menu</span>
            <i class="fa-solid fa-xmark text-white text-lg cursor-pointer" onclick="toggleSideMenu()"></i>
        </div>

        <div class="grid grid-cols-2 gap-2">
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=popular&title=Hot%20Games'">
                <i class="fa-solid fa-fire menu-icon-orange"></i>
                <span>Hot Games</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newreferral.php'">
                <i class="fa-solid fa-user-group menu-icon-cyan"></i>
                <span>Invite friends</span>
            </div>
            <div class="menu-card" onclick="goToFavoritesTab()">
                <i class="fa-solid fa-folder-open menu-icon-orange"></i>
                <span>Favorites</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newpromotions.php'">
                <i class="fa-solid fa-gift menu-icon-gold"></i>
                <span>Promotion</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newslots.php'">
                <i class="fa-solid fa-gamepad menu-icon-orange"></i>
                <span>Slots</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newrewardcenter.php'">
                <i class="fa-solid fa-award menu-icon-gold"></i>
                <span>Reward Center</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=video&title=Live%20Casino'">
                <i class="fa-solid fa-poker-chip menu-icon-orange"></i>
                <span>Live Casino</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newrebate.php'">
                <i class="fa-solid fa-credit-card menu-icon-gold"></i>
                <span>Manual rebate</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=sport&title=Sports'">
                <i class="fa-solid fa-baseball-bat-ball menu-icon-orange"></i>
                <span>Sports</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newvip.php'">
                <i class="fa-solid fa-gem menu-icon-gold"></i>
                <span>VIP</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=flash&title=E-Sports'">
                <i class="fa-solid fa-headset menu-icon-orange"></i>
                <span>E-sports</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newmission.php'">
                <i class="fa-solid fa-bullseye menu-icon-gold"></i>
                <span>Mission</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=chess&title=Poker'">
                <i class="fa-solid fa-dice menu-icon-orange"></i>
                <span>Poker</span>
            </div>
            <div class="menu-card" onclick="sideMenuComingSoon()">
                <i class="fa-solid fa-globe menu-icon-flag"></i>
                <span>Language</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=fish&title=Fish'">
                <i class="fa-solid fa-fish-fins menu-icon-orange"></i>
                <span>Fish</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/downloads/CV111.apk'">
                <i class="fa-solid fa-cloud-arrow-down menu-icon-green"></i>
                <span>APP Download</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/newcategorygames.php?category=lottery&title=Lottery'">
                <i class="fa-solid fa-ticket menu-icon-orange"></i>
                <span>Lottery</span>
            </div>
            <div class="menu-card" onclick="window.location.href='/chatbot_widget.html'">
                <i class="fa-solid fa-headset menu-icon-green"></i>
                <span>Customer Service</span>
            </div>
        </div>
    </div>

    <script src="/js/17-side-menu.js" defer></script>

    <div id="sideMenuToast" style="display:none; position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#032424; border:1px solid #0d7474; color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; z-index:99;">
        শীঘ্রই আসছে!
    </div>

    <!-- ✅ Deposit/Withdraw + Balance Login System (আপনার সাইটের auth token দিয়ে) -->
    <script src="/js/18-auth-utils.js" defer></script>
    <script src="/js/19-md5.js" defer></script>
    <script src="/js/20-balance-loader.js" defer></script>

</body>
</html>