<?php require 'config.php';
$ip = $_SERVER['REMOTE_ADDR'];
$endpoint = 'page.leaderboard'; // ganti nama sesuai file
if (!checkRateLimitApi($pdo, $ip, $endpoint, 120, 60)) {
    http_response_code(429);
    die('<div style="text-align:center;padding:50px;"><h1>429 Too Many Requests</h1><p>Terlalu banyak permintaan. Silakan coba lagi setelah 1 menit.</p></div>');
} ?>

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>Leaderboard Piala Dunia 2026 - Black & Gold Edition</title>
    <meta name="csrf-token" content="<?php echo $_SESSION['csrf_token'] ?? ''; ?>">
    <link
        href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800;900&family=Inter:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'], display: ['Cinzel', 'serif'] },
                    colors: {
                        gold: { 50: '#fdfbe8', 100: '#fbf5c4', 200: '#f7e68a', 300: '#f0cc48', 400: '#e8b11c', 500: '#d4af37', 600: '#b48c26', 700: '#8f6a1f', 800: '#72521d', 900: '#5e431c', 950: '#37230b' }
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #060605;
            color: #e2e8f0;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 2rem;
            transition: all 0.3s;
        }

        .glass-card:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(255, 255, 255, 0.1);
        }

        /* Navbar link styles (tanpa @apply) */
        .nav-link {
            position: relative;
            padding: 0.5rem 1rem;
            transition: all 0.3s;
            color: #64748b;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 9px;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background-color: #f59e0b;
            transition: all 0.3s;
            border-radius: 9999px;
        }

        .nav-link:hover {
            color: rgba(255, 255, 255, 0.8);
            transform: scale(1.05);
        }

        .nav-link.active {
            color: #f59e0b;
        }

        .nav-link.active::after {
            width: 50%;
            background-color: #f59e0b;
        }

        .mobile-menu-overlay {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .menu-indicator {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 12px;
            height: 12px;
            background-color: #00df82;
            border-radius: 50%;
            border: 2px solid #030610;
            animation: pulseGreen 1s infinite;
            z-index: 15;
        }

        @keyframes pulseGreen {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(0, 223, 130, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(0, 223, 130, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(0, 223, 130, 0);
            }
        }

        .user-info-side {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin-right: 12px;
        }

        .user-info-side .username {
            font-size: 10px;
            font-weight: 800;
            color: white;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .user-info-side .stats {
            display: flex;
            gap: 12px;
            font-size: 8px;
            font-weight: 700;
            margin-top: 2px;
        }

        .user-info-side .stats span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .avatar-clickable {
            cursor: pointer;
        }

        .claim-badge {
            background: linear-gradient(135deg, #00df82, #00b368);
            border-radius: 40px;
            padding: 2px 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 12px rgba(0, 223, 130, 0.6);
            animation: pulseGreen 1.2s infinite ease-in-out;
            transition: all 0.2s;
            white-space: nowrap;
        }

        .claim-badge-text {
            font-size: 6px;
            font-weight: 800;
            color: #030610;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .promo-animate {
            animation: promoPulse 1.5s infinite ease-in-out;
        }

        @keyframes promoPulse {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
            }

            70% {
                transform: scale(1.03);
                box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
            }

            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
            }
        }

        /* Animasi existing */
        @keyframes floatIn {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .podium-item {
            animation: floatIn 0.6s ease forwards;
        }

        .podium-item:nth-child(1) {
            animation-delay: 0.1s;
        }

        .podium-item:nth-child(2) {
            animation-delay: 0.2s;
        }

        .podium-item:nth-child(3) {
            animation-delay: 0.3s;
        }

        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
            }

            70% {
                box-shadow: 0 0 0 18px rgba(212, 175, 55, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
            }
        }

        .glow-champion {
            animation: glowPulse 2s infinite;
        }

        @keyframes prizeBounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-6px);
            }
        }

        .prize-badge {
            animation: prizeBounce 1.5s ease infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(20, 15, 5, 0.95));
            padding: 20px 15px;
            border-radius: 24px;
            backdrop-filter: blur(8px);
            border: 2px solid rgba(255, 215, 0, 0.6);
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
            transition: all 0.2s ease;
            flex: 1;
            min-width: 130px;
        }

        .prize-badge:hover {
            transform: scale(1.05);
            border-color: #ffd700;
            box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
        }

        .prize-badge img {
            width: 100%;
            max-width: 120px;
            height: auto;
            object-fit: contain;
            border-radius: 16px;
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
        }

        .prize-badge-champion img {
            max-width: 140px;
        }

        .prize-badge span {
            font-size: 1rem;
            font-weight: 800;
            color: #ffd700;
            text-align: center;
            line-height: 1.2;
            margin-top: 6px;
            text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
        }

        .prize-badge-champion span {
            font-size: 1.15rem;
        }

        .prizes-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            margin-top: 15px;
            width: 100%;
        }

        @media (max-width: 640px) {
            .prize-badge {
                padding: 12px 10px;
                min-width: 100px;
                gap: 8px;
            }

            .prize-badge img {
                max-width: 80px;
            }

            .prize-badge-champion img {
                max-width: 100px;
            }

            .prize-badge span {
                font-size: 0.75rem;
            }

            .prizes-container {
                gap: 12px;
            }
        }

        .runnerup-prize {
            background: rgba(0, 0, 0, 0.4);
            padding: 6px 12px;
            border-radius: 40px;
            display: inline-block;
        }

        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: #1e293b;
            backdrop-filter: blur(12px);
            border: 1px solid #f59e0b;
            border-radius: 2rem;
            padding: 0.75rem 1.5rem;
            color: white;
            z-index: 1000;
            font-weight: bold;
        }

        /* Background stadium effect (sama seperti index) */
        @keyframes pulseSpotlight {
            0% {
                opacity: 0.1;
                transform: scale(1);
            }

            100% {
                opacity: 0.25;
                transform: scale(1.05);
            }
        }

        @keyframes floatBall1 {
            0% {
                transform: translateY(0) rotate(0deg) scale(0.95);
            }

            50% {
                transform: translateY(-25px) rotate(180deg) scale(1.05);
            }

            100% {
                transform: translateY(0) rotate(360deg) scale(0.95);
            }
        }

        @keyframes floatBall2 {
            0% {
                transform: translateY(0) rotate(360deg) scale(1);
            }

            50% {
                transform: translateY(30px) rotate(180deg) scale(0.9);
            }

            100% {
                transform: translateY(0) rotate(0deg) scale(1);
            }
        }

        @keyframes pingStar {
            0% {
                opacity: 0.4;
                transform: scale(1);
            }

            70% {
                opacity: 0;
                transform: scale(3);
            }

            100% {
                opacity: 0;
                transform: scale(3);
            }
        }

        .bg-stadium-spotlight {
            animation: pulseSpotlight 6s infinite alternate;
        }

        .float-ball-1 {
            animation: floatBall1 12s infinite ease-in-out;
        }

        .float-ball-2 {
            animation: floatBall2 16s infinite ease-in-out;
        }

        .ping-star {
            animation: pingStar 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
    </style>
</head>

<body class="min-h-screen relative overflow-x-hidden font-sans pb-16 selection:bg-gold-500 selection:text-black">

    <!-- ========== BACKGROUND BARU (Stadium, Grid, Floating Balls) - SAMA SEPERTI INDEX ========== -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
        <div
            class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#00df82] rounded-full blur-[140px] opacity-15 bg-stadium-spotlight">
        </div>
        <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-[#0052ff] rounded-full blur-[160px] opacity-15 bg-stadium-spotlight"
            style="animation-delay: -2s; animation-direction: alternate-reverse;"></div>
        <div class="absolute top-[30%] right-[10%] w-[40%] h-[40%] bg-[#ff2d55] rounded-full blur-[150px] opacity-[0.08] bg-stadium-spotlight"
            style="animation-duration: 8s; animation-delay: -4s;"></div>
        <div class="absolute bottom-[20%] left-[5%] w-[45%] h-[45%] bg-[#ffcc00] rounded-full blur-[130px] opacity-[0.06] bg-stadium-spotlight"
            style="animation-duration: 10s; animation-direction: alternate-reverse;"></div>
        <div class="absolute inset-0 opacity-[0.035]"
            style="background-image: linear-gradient(to right, rgba(255,255,255,0.15) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 45px 45px;">
        </div>
        <div class="absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-center items-center opacity-[0.03]">
            <div class="w-[400px] h-[400px] border-4 border-white rounded-full flex justify-center items-center">
                <div class="w-[12px] h-[12px] bg-white rounded-full"></div>
            </div>
            <div class="absolute left-0 right-0 h-[4px] bg-white"></div>
            <div class="absolute top-0 w-[80%] h-[200px] border-b-4 border-x-4 border-white opacity-50 rounded-b-xl">
            </div>
            <div class="absolute bottom-0 w-[80%] h-[200px] border-t-4 border-x-4 border-white opacity-50 rounded-t-xl">
            </div>
        </div>
        <div
            class="absolute top-1/4 left-10 w-1 h-32 bg-gradient-to-b from-transparent via-amber-500/20 to-transparent blur-sm animate-pulse">
        </div>
        <div class="absolute bottom-1/4 right-10 w-1 h-40 bg-gradient-to-b from-transparent via-[#00df82]/20 to-transparent blur-sm animate-pulse"
            style="animation-delay: 2.5s;"></div>
        <div class="absolute bottom-16 left-[8%] w-16 h-16 opacity-[0.2] float-ball-1">
            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="text-[#00df82] stroke-current stroke-2 w-full h-full">
                <circle cx="50" cy="50" r="45" />
                <path d="M50 5 L35 30 L15 35 L5 50 L15 65 L35 70 L50 95 L65 70 L85 65 L95 50 L85 35 L65 30 Z" />
                <path d="M50 30 L40 45 L50 58 L60 45 Z" />
                <path d="M35 30 L40 45" />
                <path d="M65 30 L60 45" />
                <path d="M15 35 L40 45" />
                <path d="M85 35 L60 45" />
                <path d="M15 65 L50 58" />
                <path d="M85 65 L50 58" />
            </svg>
        </div>
        <div class="absolute top-20 right-[10%] w-24 h-24 opacity-[0.15] float-ball-2">
            <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"
                class="text-[#ffcc00] stroke-current stroke-2 w-full h-full">
                <ellipse cx="50" cy="50" rx="45" ry="30" />
                <ellipse cx="50" cy="50" rx="35" ry="20" />
                <line x1="50" y1="5" x2="50" y2="20" />
                <line x1="50" y1="80" x2="50" y2="95" />
                <line x1="5" y1="50" x2="15" y2="50" />
                <line x1="85" y1="50" x2="95" y2="50" />
                <path d="M15 35 L35 50" />
                <path d="M85 35 L65 50" />
                <path d="M15 65 L35 50" />
                <path d="M85 65 L65 50" />
            </svg>
        </div>
        <div class="absolute top-[15%] left-[45%] w-[3px] h-[3px] bg-white rounded-full opacity-40 ping-star"></div>
        <div class="absolute bottom-[35%] right-[30%] w-[4px] h-[4px] bg-[#00df82] rounded-full opacity-50 animate-ping"
            style="animation-duration: 3s;"></div>
        <div class="absolute top-[60%] left-[20%] w-[3px] h-[3px] bg-[#ff2d55] rounded-full opacity-30 animate-pulse">
        </div>
    </div>

    <!-- Background effect lama (tetap dipertahankan) -->
    <div class="fixed inset-0 bg-mesh pointer-events-none opacity-50"></div>
    <div
        class="fixed top-[-10%] left-[-10%] w-[40%] h-[40%] bg-worldcup-green/5 rounded-full blur-[120px] animate-glow pointer-events-none">
    </div>
    <div class="fixed bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-worldcup-blue/5 rounded-full blur-[150px] animate-glow pointer-events-none"
        style="animation-delay: -4s"></div>
    <div
        class="fixed top-1/4 left-10 w-1 h-24 bg-gradient-to-b from-transparent via-amber-500/20 to-transparent blur-sm animate-pulse pointer-events-none">
    </div>
    <div class="fixed bottom-1/4 right-10 w-1 h-32 bg-gradient-to-b from-transparent via-worldcup-green/20 to-transparent blur-sm animate-pulse pointer-events-none"
        style="animation-delay: 2s"></div>
    <div
        class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80vw] h-[80vh] border border-white/[0.02] rounded-full pointer-events-none">
    </div>
    <div
        class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vw] h-[60vh] border border-white/[0.015] rounded-full pointer-events-none">
    </div>

    <!-- ==================== NAVBAR (SAMA PERSIS DENGAN INDEX.PHP) ==================== -->
    <nav class="sticky top-0 z-50 px-4 pt-4">
        <div
            class="max-w-7xl mx-auto glass-card rounded-[40px] px-5 sm:px-10 h-24 flex items-center justify-between border-white/[0.03]">
            <div class="flex items-center gap-4 cursor-pointer group" onclick="window.location.href='index.php'">
                <div class="relative flex items-center gap-2">
                    <img src="fifa-world-cup-2026-logo-white.png" alt="FIFA World Cup 2026"
                        class="h-12 w-auto object-contain drop-shadow-lg">
                    <div class="flex flex-col">
                        <span class="text-xs font-black text-white tracking-[0.3em] uppercase leading-none">Piala
                            Dunia</span>
                        <span
                            class="text-lg font-display font-black text-amber-500 tracking-tighter leading-none">2026</span>
                    </div>
                </div>
            </div>
            <div class="hidden lg:flex items-center gap-2 bg-black/20 p-2 rounded-[24px] border border-white/5">
                <button onclick="window.location.href='promosi.php'"
                    class="promo-animate bg-amber-500 text-black px-4 py-2 rounded-full text-[9px] font-black uppercase tracking-widest hover:bg-amber-400 transition-all shadow-md">🎉
                    PROMOSI</button>
                <button onclick="window.location.href='index.php'" class="nav-link">Klasemen</button>
                <button onclick="window.location.href='index.php?view=schedule'" class="nav-link">Jadwal</button>
                <button onclick="window.location.href='predict.php'" class="nav-link">Prediksi</button>
                <button onclick="window.location.href='index.php?view=knockout'" class="nav-link">Penyisihan</button>
                <button onclick="window.location.href='index.php?view=teams'" class="nav-link">Tim</button>
                <button onclick="window.location.href='leaderboard.php'" class="nav-link active">Peringkat</button>
                <button onclick="window.location.href='profile.php'" class="nav-link">Profil</button>
                <?php if (isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1): ?>
                    <a href="admin_panel.php" class="nav-link text-rose-500/70 hover:text-rose-500">Admin</a>
                <?php endif; ?>
            </div>
            <div class="flex items-center gap-4">
                <?php if (isset($_SESSION['username'])): ?>
                    <div class="user-dropdown relative">
                        <div class="flex items-center cursor-pointer">
                            <div class="user-info-side hidden sm:flex">
                                <div class="username"><?php echo htmlspecialchars($_SESSION['username']); ?></div>
                                <div class="stats">
                                    <span class="text-amber-500">🎫 <span id="ticket-count-side">0</span></span>
                                    <span class="text-worldcup-green">⭐ <span id="points-count-side">0</span></span>
                                </div>
                            </div>
                            <div class="relative">
                                <div onclick="event.stopPropagation(); window.location.href='profile.php'"
                                    class="w-10 h-10 sm:w-12 sm:h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center group overflow-hidden relative avatar-clickable">
                                    <div
                                        class="absolute inset-0 bg-amber-500 translate-y-full group-hover:translate-y-0 transition-transform duration-500">
                                    </div>
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-slate-400 group-hover:text-black relative z-10"
                                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                                    </svg>
                                </div>
                                <div id="claim-badge" class="claim-badge hidden cursor-pointer absolute -top-2 -right-2"
                                    onclick="event.stopPropagation(); window.location.href='profile.php'">
                                    <span class="claim-badge-text">KLAIM</span>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php else: ?>
                    <button onclick="window.location.href='index.php?showAuth=1'"
                        class="bg-white text-black px-4 sm:px-6 py-2 sm:py-3 rounded-[20px] text-[9px] sm:text-[10px] font-black uppercase tracking-widest hover:bg-amber-500 hover:scale-105 transition-all shadow-[0_20px_40px_rgba(255,255,255,0.05)]">MASUK</button>
                <?php endif; ?>
                <button id="mobile-menu-btn"
                    class="lg:hidden p-2 rounded-xl bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-all relative">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <div class="menu-indicator"></div>
                </button>
            </div>
        </div>

        <!-- Mobile Menu Drawer -->
        <div id="mobile-menu" class="fixed inset-0 z-50 lg:hidden mobile-menu-overlay invisible opacity-0">
            <div class="absolute inset-0 bg-black/80 backdrop-blur-md" onclick="toggleMobileMenu()"></div>
            <div
                class="absolute right-0 top-0 h-full w-64 glass-card rounded-l-[40px] p-6 transform translate-x-full transition-transform duration-300">
                <div class="flex justify-end mb-8">
                    <button onclick="toggleMobileMenu()" class="p-2 rounded-full bg-white/10 text-white"><svg
                            class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg></button>
                </div>
                <div class="flex flex-col gap-4">
                    <button onclick="window.location.href='promosi.php'; toggleMobileMenu();"
                        class="promo-animate text-left px-4 py-3 rounded-2xl bg-amber-500/20 border border-amber-500/50 text-amber-400 font-black transition-all flex items-center gap-2">🎉
                        Promosi</button>
                    <button onclick="window.location.href='index.php'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Klasemen</button>
                    <button onclick="window.location.href='index.php?view=schedule'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Jadwal</button>
                    <button onclick="window.location.href='predict.php'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Prediksi</button>
                    <button onclick="window.location.href='index.php?view=knockout'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Penyisihan</button>
                    <button onclick="window.location.href='index.php?view=teams'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Tim</button>
                    <button onclick="window.location.href='leaderboard.php'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Peringkat</button>
                    <button onclick="window.location.href='profile.php'; toggleMobileMenu();"
                        class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all">Profil</button>
                    <?php if (isset($_SESSION['is_admin']) && $_SESSION['is_admin'] == 1): ?>
                        <a href="admin_panel.php" onclick="toggleMobileMenu();"
                            class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all text-rose-500">Admin</a>
                    <?php endif; ?>
                    <?php if (isset($_SESSION['username'])): ?>
                        <a href="auth.php?action=logout"
                            class="text-left px-4 py-3 rounded-2xl hover:bg-white/5 transition-all text-red-400">🚪
                            Logout</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </nav>

    <!-- Konten Leaderboard (seperti sebelumnya) -->
    <div class="max-w-5xl mx-auto px-4 pt-10 z-10 relative">
        <div class="text-center max-w-xl mx-auto mb-12">
            <span
                class="inline-flex items-center gap-1.5 px-3.5 py-1 bg-gold-950/30 border border-gold-500/20 text-gold-400 text-xs rounded-full mb-3 shadow-md font-medium">✦
                Tiga Kasta Teratas Mendapatkan Hadiah Eksklusif</span>
            <p class="text-xs sm:text-sm text-zinc-400 leading-relaxed font-sans">Selamat datang di papan peringkat.</p>
        </div>

        <section class="mb-14">
            <div class="text-center mb-8">
                <span
                    class="font-display text-[10px] tracking-[0.2em] text-gold-500/80 font-bold uppercase block">Peringkat
                    PREDIKSI</span>
                <div class="w-16 h-[1.5px] bg-gradient-to-r from-transparent via-gold-500 to-transparent mx-auto mt-2">
                </div>
            </div>
            <div id="podium-container" class="grid grid-cols-1 md:grid-cols-3 gap-6 items-end max-w-4xl mx-auto">
                <div class="text-center py-10 text-slate-400 col-span-3">Memuat data leaderboard...</div>
            </div>
        </section>

        <section>
            <div class="flex items-center justify-between mb-4 px-1">
                <h2
                    class="font-display text-xs sm:text-sm tracking-wider text-gold-400 font-bold uppercase flex items-center gap-2">
                    Daftar Runner-Up (Peringkat 4 - 10)</h2>
                <span id="total-count" class="text-[10px] text-zinc-500 font-mono uppercase">TOTAL TERDATA: 10
                    USER</span>
            </div>
            <div class="bg-[#0b0a09]/95 border border-gold-950/35 rounded-2xl overflow-hidden shadow-2xl">
                <div
                    class="hidden md:grid grid-cols-12 gap-4 px-6 py-4.5 border-b border-gold-950/15 text-[10px] font-mono tracking-widest text-gold-600 uppercase font-black">
                    <div class="col-span-1 text-center">No</div>
                    <div class="col-span-4 pl-4 text-left">ID Penebak / User</div>
                    <div class="col-span-2 text-right">Skor (Pts)</div>
                    <div class="col-span-5 pl-8">Hadiah Yang Diterima</div>
                </div>
                <div id="runnerup-container" class="divide-y divide-gold-950/10">
                    <div class="text-center py-8 text-zinc-400">Memuat data...</div>
                </div>
            </div>
        </section>

        <div class="text-center mt-8"><button id="refresh-btn"
                class="text-xs text-gold-400 border border-gold-500/30 px-4 py-2 rounded-full hover:bg-gold-500/10 transition">🔄
                Refresh Data</button></div>
    </div>

    <!-- Footer (sama seperti index) -->
    <footer
        class="border-t border-white/10 mt-16 py-8 text-center text-slate-500 text-[9px] font-black uppercase tracking-wider relative z-10">
        <p>FIFA World Cup 2026 © All Rights Reserved. Promo hanya berlaku sesuai syarat dan ketentuan.</p>
    </footer>

    <!-- Toast container (opsional) -->
    <div id="toast-container"
        class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] w-auto max-w-[90vw] pointer-events-none"></div>

    <script>
        // Fungsi untuk toggle mobile menu (sama seperti index)
        function toggleMobileMenu() {
            const menu = document.getElementById('mobile-menu');
            const drawer = menu?.querySelector('.absolute.right-0');
            if (!menu) return;
            if (menu.classList.contains('invisible')) {
                menu.classList.remove('invisible', 'opacity-0');
                menu.classList.add('visible', 'opacity-100');
                drawer?.classList.remove('translate-x-full');
            } else {
                menu.classList.add('invisible', 'opacity-0');
                menu.classList.remove('visible', 'opacity-100');
                drawer?.classList.add('translate-x-full');
            }
        }
        document.getElementById('mobile-menu-btn')?.addEventListener('click', toggleMobileMenu);

        // Fungsi fetch user info (untuk update tiket/poin di navbar)
        async function fetchUserInfo() {
            try {
                const res = await fetch('api.php?action=get_user_info');
                if (res.ok) {
                    const user = await res.json();
                    const ticketSide = document.getElementById('ticket-count-side');
                    const pointsSide = document.getElementById('points-count-side');
                    if (ticketSide) ticketSide.innerText = user.tickets;
                    if (pointsSide) pointsSide.innerText = user.available_points || 0;
                    const badge = document.getElementById('claim-badge');
                    if (badge && user.last_daily_claim) {
                        const today = new Date().toLocaleDateString('en-CA');
                        const sudahKlaim = (user.last_daily_claim === today);
                        if (!sudahKlaim) badge.classList.remove('hidden');
                        else badge.classList.add('hidden');
                    }
                }
            } catch (e) { }
        }

        // Reward images
        const jerseyImg = 'https://i.postimg.cc/4xcNmwYR/Gemini-Generated-Image-t7vk7bt7vk7bt7vk.png';
        const ballImg = 'https://i.postimg.cc/DyXKg0nc/official-football-worldcup-2026.png';
        const voucher1jtImg = 'https://i.postimg.cc/wMRn04KV/voucher-1000k.png';
        const voucher500kImg = 'https://i.postimg.cc/vHfZm31v/voucher-500k.png';
        const iphoneImg = 'https://i.postimg.cc/wB7G2bdY/Gemini-Generated-Image-24cjcx24cjcx24cj.png';
        const cashImg = 'https://i.postimg.cc/j5vnjvLz/Gemini-Generated-Image-m7w910m7w910m7w9.png';

        function getPrizeHtml(rank, isChampion = false) {
            const prizeClass = isChampion ? 'prize-badge prize-badge-champion' : 'prize-badge';
            if (rank === 1) {
                return `<div class="prizes-container"><div class="${prizeClass}"><img src="${iphoneImg}" alt="iPhone"><span>iPhone</span></div><div class="${prizeClass}"><img src="${jerseyImg}" alt="Jersey"><span>Jersey</span></div><div class="${prizeClass}"><img src="${cashImg}" alt="Cash"><span>Cash 2 Juta</span></div><div class="${prizeClass}"><img src="${voucher1jtImg}" alt="Saldo"><span>Saldo 1 Juta</span></div></div>`;
            } else if (rank === 2) {
                return `<div class="prizes-container"><div class="${prizeClass}"><img src="${jerseyImg}" alt="Jersey"><span>Jersey Premium</span></div><div class="${prizeClass}"><img src="${ballImg}" alt="Bola"><span>Bola Official</span></div><div class="${prizeClass}"><img src="${cashImg}" alt="Cash"><span>Cash 1 Juta</span></div><div class="${prizeClass}"><img src="${voucher500kImg}" alt="Voucher"><span>Voucher Makan 500k</span></div></div>`;
            } else if (rank === 3) {
                return `<div class="prizes-container"><div class="${prizeClass}"><img src="${jerseyImg}" alt="Jersey"><span>Jersey Official</span></div><div class="${prizeClass}"><img src="${ballImg}" alt="Bola"><span>Bola Premium</span></div><div class="${prizeClass}"><img src="${voucher1jtImg}" alt="Saldo"><span>Saldo 750k</span></div><div class="${prizeClass}"><span class="text-2xl">🍽️</span><span>Voucher Makan 300k</span></div></div>`;
            }
            return '';
        }

        function getRunnerUpPrizeText(rank) {
            const prizes = {
                4: '👕 Jersey Bola + 💳 Saldo 500k + 🍽️ Voucher Makan 200k',
                5: '⚽ Bola Premium + 💰 Cash 300k + 🍽️ Voucher Makan 150k',
                6: '👕 Jersey Bola + 💳 Saldo 250k',
                7: '⚽ Bola Official + 💳 Saldo 200k',
                8: '🍽️ Voucher Makan 150k + 💳 Saldo 150k',
                9: '🍽️ Voucher Makan 100k + 💳 Saldo 100k',
                10: '💳 Saldo 100k'
            };
            return prizes[rank] || '💳 Saldo 25k';
        }

        async function loadLeaderboard() {
            try {
                const res = await fetch('api.php?action=get_leaderboard');
                const data = await res.json();
                if (!data.length) {
                    document.getElementById('podium-container').innerHTML = '<div class="text-center py-10 text-slate-400 col-span-3">Belum ada data peringkat.</div>';
                    document.getElementById('runnerup-container').innerHTML = '<div class="text-center py-8 text-zinc-400">Belum ada data peringkat.</div>';
                    document.getElementById('total-count').innerText = 'TOTAL TERDATA: 0 USER';
                    return;
                }

                const top1 = data[0] || null;
                const top2 = data[1] || null;
                const top3 = data[2] || null;
                const runnersUp = data.slice(3, 10);

                let podiumHtml = '';

                if (top2) {
                    podiumHtml += `<div class="podium-item order-2 md:order-1 bg-[#0d0c0b] border border-zinc-500/35 rounded-2xl p-6 relative flex flex-col items-center hover:border-gold-500/40 transition-all duration-300 shadow-[0_4px_20px_rgba(0,0,0,0.4)]"><div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-zinc-400 to-zinc-600 px-4 py-1 text-black font-mono text-[9px] font-black tracking-widest rounded-full uppercase flex items-center gap-1">RANK 02</div><div class="w-14 h-14 rounded-full bg-gradient-to-br from-zinc-500 via-zinc-600 to-zinc-800 flex items-center justify-center mb-4 mt-2 border border-zinc-500/30 shadow-md"><span class="font-display font-black text-xl text-zinc-100">#2</span></div><div class="text-center mb-3"><span class="text-[9px] text-zinc-500 font-mono block uppercase">ID PENEBAK</span><h3 class="font-display font-bold text-gray-200 text-base line-clamp-1">${escapeHtml(top2.name)}</h3></div><div class="bg-zinc-950 rounded-xl px-4 py-2 border border-zinc-900 w-full text-center mb-4"><span class="text-[8px] text-zinc-500 block uppercase font-mono">Skor Prediksi Akurat</span><span class="text-zinc-200 font-mono text-base font-black">${formatNumber(top2.points)} <span class="text-[9px] text-zinc-500 font-normal">Pts</span></span></div><div class="bg-[#121110] rounded-xl p-5 border border-amber-950/30 text-center w-full">${getPrizeHtml(2, false)}</div></div>`;
                } else { podiumHtml += `<div class="bg-slate-900/40 rounded-2xl p-6 text-center text-slate-500">Belum ada juara 2</div>`; }

                if (top1) {
                    podiumHtml += `<div class="podium-item order-1 md:order-2 bg-[#0c0c0a] border-2 border-gold-500 rounded-2xl p-7 relative flex flex-col items-center hover:border-gold-400 transition-all duration-300 shadow-[0_0_35px_rgba(212,175,55,0.25)] glow-champion"><div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-gold-300 via-gold-500 to-amber-600 px-5 py-1.5 text-black font-display text-[10px] font-black tracking-widest rounded-full uppercase flex items-center gap-1">👑 PERINGKAT 01</div><div class="text-center mt-2 mb-2 text-gold-400"><svg class="w-9 h-9 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg></div><div class="w-18 h-18 rounded-full bg-gradient-to-br from-gold-300 via-gold-500 to-amber-600 flex items-center justify-center mb-4 border border-gold-450 shadow-[0_0_20px_rgba(212,175,55,0.4)]"><span class="font-display font-black text-2xl text-black">#1</span></div><div class="text-center mb-3"><span class="text-[9px] text-gold-550 font-mono block uppercase tracking-wider font-bold">RAJA PENEBAK</span><h3 class="font-display font-black text-gold-200 text-lg sm:text-xl tracking-wide gold-text-glow">${escapeHtml(top1.name)}</h3></div><div class="bg-gradient-to-b from-[#1b1915] to-black rounded-xl px-4 py-2 border border-gold-500/25 w-full text-center mb-4"><span class="text-[8px] text-gold-500 block uppercase tracking-widest font-mono">Skor Prediksi Akurat</span><span class="text-gold-300 font-mono text-xl font-black">${formatNumber(top1.points)} <span class="text-xs font-normal text-zinc-500">Pts</span></span></div><div class="bg-gradient-to-r from-gold-950/50 to-amber-950/50 rounded-xl p-5 border-2 border-gold-500/60 shadow-lg text-center w-full">${getPrizeHtml(1, true)}</div></div>`;
                } else { podiumHtml += `<div class="bg-slate-900/40 rounded-2xl p-6 text-center text-slate-500">Belum ada juara 1</div>`; }

                if (top3) {
                    podiumHtml += `<div class="podium-item order-3 md:order-3 bg-[#0d0c0b] border border-amber-900/30 rounded-2xl p-6 relative flex flex-col items-center hover:border-gold-500/40 transition-all duration-300 shadow-[0_4px_20px_rgba(0,0,0,0.4)]"><div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-amber-600 to-amber-800 px-4 py-1 text-gold-100 font-mono text-[9px] font-black tracking-widest rounded-full uppercase flex items-center gap-1">RANK 03</div><div class="w-14 h-14 rounded-full bg-gradient-to-br from-amber-600 to-amber-850 flex items-center justify-center mb-4 mt-2 border border-amber-700/35 shadow-md"><span class="font-display font-black text-xl text-amber-100">#3</span></div><div class="text-center mb-3"><span class="text-[9px] text-zinc-500 font-mono block uppercase">ID PENEBAK</span><h3 class="font-display font-bold text-gray-200 text-base line-clamp-1">${escapeHtml(top3.name)}</h3></div><div class="bg-zinc-950 rounded-xl px-4 py-2 border border-zinc-900 w-full text-center mb-4"><span class="text-[8px] text-zinc-500 block uppercase font-mono">Skor Prediksi Akurat</span><span class="text-amber-400 font-mono text-base font-black">${formatNumber(top3.points)} <span class="text-[9px] text-zinc-500 font-normal">Pts</span></span></div><div class="bg-[#121110] rounded-xl p-5 border border-amber-950/30 text-center w-full">${getPrizeHtml(3, false)}</div></div>`;
                } else { podiumHtml += `<div class="bg-slate-900/40 rounded-2xl p-6 text-center text-slate-500">Belum ada juara 3</div>`; }

                document.getElementById('podium-container').innerHTML = podiumHtml;

                let runnerHtml = '';
                if (runnersUp.length === 0) {
                    runnerHtml = '<div class="text-center py-8 text-zinc-400">Belum ada data untuk peringkat 4-10.</div>';
                } else {
                    runnersUp.forEach((user, idx) => {
                        const rank = idx + 4;
                        const prizeText = getRunnerUpPrizeText(rank);
                        runnerHtml += `<div class="grid grid-cols-1 md:grid-cols-12 gap-4 px-6 py-4 items-center hover:bg-gold-950/[0.08] transition-colors"><div class="col-span-1 flex justify-start md:justify-center items-center gap-3"><span class="md:hidden text-[9px] text-zinc-500 font-mono">RANK</span><span class="w-7 h-7 rounded-lg bg-[#14120e] border border-gold-950/60 flex items-center justify-center font-mono text-xs font-bold text-zinc-400">${rank}</span></div><div class="col-span-1 md:col-span-4 flex items-center gap-3"><div class="w-7 h-7 rounded-full bg-[#13110e] border border-gold-950/50 flex items-center justify-center shrink-0"><span class="font-mono text-[10px] text-gold-500 font-bold">@</span></div><div><span class="md:hidden text-[8px] text-zinc-500 font-mono block uppercase">ID Penebak</span><span class="font-bold text-gray-200 text-xs font-display tracking-wide truncate block">${escapeHtml(user.name)}</span></div></div><div class="col-span-1 md:col-span-2 text-left md:text-right"><span class="md:hidden text-[8px] text-zinc-500 font-mono block uppercase">Skor Akurat</span><span class="text-gold-400 font-bold font-mono text-sm">${formatNumber(user.points)} <span class="text-[10px] font-normal text-zinc-500">Pts</span></span></div><div class="col-span-1 md:col-span-5 pl-0 md:pl-8 flex items-center gap-2"><span class="text-gold-500 text-sm">🏆</span><span class="text-zinc-300 text-xs font-medium runnerup-prize">${prizeText}</span></div></div>`;
                    });
                }
                document.getElementById('runnerup-container').innerHTML = runnerHtml;
                document.getElementById('total-count').innerText = `TOTAL TERDATA: ${data.length} USER`;
            } catch (err) {
                console.error(err);
                document.getElementById('podium-container').innerHTML = '<div class="text-center py-10 text-red-400 col-span-3">Gagal memuat data leaderboard.</div>';
                document.getElementById('runnerup-container').innerHTML = '<div class="text-center py-8 text-red-400">Gagal memuat data.</div>';
            }
        }

        function formatNumber(num) { return new Intl.NumberFormat('id-ID').format(num); }
        function escapeHtml(str) { if (!str) return ''; return str.replace(/[&<>]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[m])); }

        document.getElementById('refresh-btn')?.addEventListener('click', loadLeaderboard);
        fetchUserInfo();
        loadLeaderboard();
    </script>
</body>

</html>