<?php
// Handle API requests directly in this file
if (isset($_GET['api'])) {
    header('Content-Type: application/json');
    header('Access-Control-Allow-Origin: *');

    // Load WordPress
    $wp_load_path = '/home/u914194240/domains/buymywishes.com/public_html/wp-load.php';
    if (file_exists($wp_load_path)) {
        require_once($wp_load_path);
    } else {
        $paths = ['../../../../../wp-load.php', '../../../../wp-load.php', '../../../wp-load.php'];
        foreach ($paths as $path) {
            if (file_exists(__DIR__ . '/' . $path)) {
                require_once(__DIR__ . '/' . $path);
                break;
            }
        }
    }

    if (!function_exists('wp_get_current_user')) {
        echo json_encode(['success' => false, 'error' => 'WordPress not loaded']);
        exit;
    }

    global $wpdb;
    $timeframe = isset($_GET['timeframe']) ? $_GET['timeframe'] : 'lifetime';

    try {
        if ($_GET['api'] === 'granters') {
            // Top Granters API - query wishes table directly
            $query = "
                SELECT
                    u.ID as user_id,
                    u.display_name as granter_name,
                    COUNT(w.id) as wishes_granted,
                    COALESCE(SUM(w.price_paid), 0) as total_amount_granted,
                    COALESCE(AVG(w.price_paid), 0) as average_grant_amount,
                    1 as level,
                    'Wisher' as title,
                    'default.png' as avatar,
                    (
                        COUNT(w.id) * 10 +
                        COALESCE(SUM(w.price_paid), 0) * 1
                    ) as impact_score
                FROM {$wpdb->users} u
                JOIN {$wpdb->prefix}bmw_wishes w ON u.ID = w.granter_id
                WHERE w.status IN ('granted', 'completed')
                AND w.granter_id IS NOT NULL
                " . ($timeframe === 'this_month' ? "AND w.granted_at >= DATE_FORMAT(NOW(), '%Y-%m-01')" : "") . "
                GROUP BY u.ID, u.display_name
                HAVING wishes_granted > 0
                ORDER BY impact_score DESC, wishes_granted DESC, total_amount_granted DESC
                LIMIT 50
            ";

            $results = $wpdb->get_results($query, ARRAY_A);

            if ($wpdb->last_error) {
                throw new Exception("Database query failed: " . $wpdb->last_error);
            }

            $granters = [];
            foreach ($results as $row) {
                $granters[] = [
                    'rank' => count($granters) + 1,
                    'user_id' => (int)$row['user_id'],
                    'granter_name' => $row['granter_name'],
                    'impact_score' => (int)$row['impact_score'],
                    'wishes_granted' => (int)$row['wishes_granted'],
                    'total_amount_granted' => (float)$row['total_amount_granted'],
                    'average_grant_amount' => round((float)$row['average_grant_amount'], 2),
                    'level' => (int)$row['level'],
                    'title' => $row['title'],
                    'avatar' => $row['avatar'] ?: 'default.png',
                    'is_top_granter' => count($granters) === 0
                ];
            }

            echo json_encode([
                'success' => true,
                'timeframe' => $timeframe,
                'total_granters' => count($granters),
                'granters' => $granters,
                'last_updated' => date('Y-m-d H:i:s')
            ]);

        } elseif ($_GET['api'] === 'coins') {
            // Coin Masters API
            $query = "
                SELECT
                    u.ID as user_id,
                    u.display_name as granter_name,
                    COALESCE(SUM(ct.amount), 0) as total_coins_earned,
                    COUNT(DISTINCT g.id) as total_wishes_granted,
                    ROUND(COALESCE(SUM(ct.amount), 0) / GREATEST(COUNT(DISTINCT g.id), 1), 2) as average_earn,
                    1 as level,
                    'Wisher' as title,
                    'default.png' as avatar
                FROM {$wpdb->users} u
                JOIN {$wpdb->prefix}bmw_coin_transactions ct ON u.ID = ct.user_id
                LEFT JOIN {$wpdb->prefix}bmw_grants g ON u.ID = g.granter_id
                WHERE ct.transaction_type = 'earn'
                " . ($timeframe === 'this_month' ? "AND ct.created_at >= DATE_FORMAT(NOW(), '%Y-%m-01')" : "") . "
                GROUP BY u.ID, u.display_name
                HAVING total_coins_earned > 0
                ORDER BY total_coins_earned DESC
                LIMIT 50
            ";

            $results = $wpdb->get_results($query, ARRAY_A);

            if ($wpdb->last_error) {
                throw new Exception("Database query failed: " . $wpdb->last_error);
            }

            $coin_masters = [];
            foreach ($results as $row) {
                $coin_masters[] = [
                    'rank' => count($coin_masters) + 1,
                    'user_id' => (int)$row['user_id'],
                    'granter_name' => $row['granter_name'],
                    'total_coins_earned' => (float)$row['total_coins_earned'],
                    'average_earn' => round((float)$row['average_earn'], 2),
                    'total_wishes_granted' => (int)$row['total_wishes_granted'],
                    'level' => (int)$row['level'],
                    'title' => $row['title'],
                    'avatar' => $row['avatar'] ?: 'default.png',
                    'is_top_granter' => count($coin_masters) === 0
                ];
            }

            // Get biggest collection
            $biggest_query = "
                SELECT
                    u.display_name as granter_name,
                    ct.description as transaction_description,
                    ct.amount as coin_amount,
                    ct.created_at as collection_date
                FROM {$wpdb->prefix}bmw_coin_transactions ct
                JOIN {$wpdb->users} u ON ct.user_id = u.ID
                WHERE ct.transaction_type = 'earn'
                " . ($timeframe === 'this_month' ? "AND ct.created_at >= DATE_FORMAT(NOW(), '%Y-%m-01')" : "") . "
                ORDER BY ct.amount DESC
                LIMIT 1
            ";
            $biggest_result = $wpdb->get_row($biggest_query, ARRAY_A);

            echo json_encode([
                'success' => true,
                'timeframe' => $timeframe,
                'total_coin_masters' => count($coin_masters),
                'coin_masters' => $coin_masters,
                'biggest_collection' => $biggest_result,
                'category_breakdown' => [],
                'last_updated' => date('Y-m-d H:i:s')
            ]);

        } else {
            echo json_encode(['success' => false, 'error' => 'Unknown API endpoint']);
        }

    } catch (Exception $e) {
        echo json_encode([
            'success' => false,
            'error' => $e->getMessage(),
            'timeframe' => $timeframe
        ]);
    }
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaderboard - BuyMyWishes</title>
    <meta name="description" content="Top granters on BuyMyWishes - See who's making dreams come true">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>B</text></svg>">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">

    <!-- Unified Header -->
    <div class="header-container">
        <div class="header-nav-container">
            <a href="/" class="logo-link">
                <div class="logo">
                    <div class="mark"></div>
                    <div>
                        <h1>BuyMyWishes</h1>
                        <div class="logo-text">Wish. Grant. Share</div>
                    </div>
                </div>
            </a>

            <nav>
                <a href="/submit-wish.html" class="btn fill" id="submitBtn">Make a Wish</a>
                <a href="/public-wishes.html" class="btn fill" id="browseBtn">Browse Wishes</a>
                <div style="width:10px"></div>

                <!-- Login button for non-logged-in users (hidden by default) -->
                <button class="btn fill" id="loginBtn" style="display: none;">Login</button>

                <!-- Coins badge for logged-in users (hidden by default) -->
                <button class="coins-badge" id="coinsBadge" title="Your Coins" style="display: none;">
                    <span class="coins-icon">💰</span>
                    <span class="coins-amount" id="coinsAmount">0</span>
                </button>

                <!-- Diamonds badge for logged-in users (hidden by default) -->
                <button class="diamonds-badge" id="diamondsBadge" title="Your Diamonds" style="display: none;">
                    <span class="diamonds-icon">💎</span>
                    <span class="diamonds-amount" id="diamondsAmount">0</span>
                </button>

                <!-- Profile dropdown for logged-in users (hidden by default) -->
                <div class="profile-dropdown-container" id="profileContainer" style="display: none;">
                    <button class="profile-btn" id="profileBtn">
                        <div class="profile-avatar" id="profileAvatar">👤</div>
                        <span id="profileName">User</span>
                        <span class="dropdown-arrow">▼</span>
                    </button>
                    <div class="profile-dropdown" id="profileDropdown">
                        <div class="profile-info">
                            <div class="profile-name">Display Name: <span id="dropdownDisplayName">User</span></div>
                            <div class="profile-avatar-small" id="dropdownAvatar">👤</div>
                        </div>
                        <div class="divider"></div>
                        <a href="/profile.php" class="profile-link">📊 View Profile</a>
                        <a href="/leaderboard.html" class="profile-link">🏆 Leaderboard</a>
                        <a href="/profile.php#avatars" class="profile-link">🖼️ Change Profile Picture</a>
                        <a href="#" id="settingsBtn" class="profile-link">⚙️ Settings</a>
                        <div class="divider"></div>
                        <a href="#" id="logoutBtn" class="profile-link">🚪 Logout</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <!-- Login Modal -->
    <div class="login-modal" id="loginModal">
        <div class="login-modal-content">
            <button class="close-modal" onclick="hideLoginModal()">&times;</button>
            <div class="login-modal-header">
                <h2 class="login-modal-title">Welcome Back</h2>
                <p class="login-modal-subtitle">Sign in to your BuyMyWishes account</p>
            </div>
            <form class="login-form" id="loginForm">
                <input type="email" class="login-form-input" id="loginEmail" placeholder="Email Address" required>
                <input type="password" class="login-form-input" id="loginPassword" placeholder="Password" required>
                <div class="login-form-actions">
                    <button type="submit" class="login-btn">Sign In</button>
                    <button type="button" class="forgot-password-btn" onclick="showForgotPasswordModal()">Forgot Password?</button>
                </div>
                <div class="login-links">
                    <a href="/wisher-signup.html" class="login-link">Create Wisher Account</a>
                    <a href="/granter-application.html" class="login-link">Apply to be a Granter</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Settings Modal -->
    <div class="settings-modal" id="settingsModal">
        <div class="settings-modal-content">
            <button class="close-modal" onclick="hideSettingsModal()">&times;</button>
            <div class="settings-modal-header">
                <h2 class="settings-modal-title">Settings</h2>
                <p class="settings-modal-subtitle">Customize your experience</p>
            </div>
            <div class="settings-form">
                <div class="form-group">
                    <label for="displayName" class="form-label">Display Name</label>
                    <input type="text" class="settings-input" id="displayName" placeholder="Enter your display name">
                </div>

                <div class="form-group">
                    <div class="form-label">Change Profile Picture</div>
                    <div class="avatar-selection">
                        <div class="avatar-grid" id="avatarGrid">
                            <!-- Avatars will be loaded here -->
                        </div>
                        <div class="avatar-more">
                            <p>For more avatar options, visit your <a href="/profile.php" class="avatar-link">profile page</a> where you can choose from a wider selection or purchase premium avatars.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="settings-buttons">
                <button class="settings-btn secondary" onclick="hideSettingsModal()">Cancel</button>
                <button class="settings-btn">Save Changes</button>
            </div>
        </div>
    </div>

    <style>
    /* Font Styling */
    * {
        font-family: "Didact Gothic", sans-serif !important;
    }

    /* Unified Header Styles */
    .header-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: transparent;
        backdrop-filter: none;
        border-bottom: none;
        padding: 1rem 0;
    }

    .header-nav-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2rem;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .logo .mark {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background: url('https://buymywishes.com/wp-content/uploads/2025/09/bmw-logo-only.jpg') center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #000;
        box-shadow: 0 20px 60px rgba(255, 215, 0, 0.3), inset 0 -4px 14px rgba(0,0,0,0.15);
    }

    .logo h1 {
        font-size: 18px;
        margin: 0;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: #FFD700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
    }

    .logo-text {
        font-size: 0.9rem;
        font-weight: 600;
        color: #FFD700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        letter-spacing: 0.5px;
    }

    .logo-link {
        text-decoration: none;
        color: inherit;
        transition: all 0.3s ease;
    }

    .logo-link:hover .logo h1 {
        color: #FFD700;
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
        transform: scale(1.02);
    }

    nav {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .btn {
        background: transparent;
        border: 2px solid #FFD700;
        color: #FFD700;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        text-align: center;
        min-width: 120px;
    }

    .btn:hover {
        background: #FFD700;
        color: #000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    }

    .btn.fill {
        background: #FFD700;
        color: #000;
    }

    .btn.fill:hover {
        background: #FFD700;
        color: #000;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    }

    .coins-badge {
        background: linear-gradient(135deg, #FFD700, #D4AF37);
        border: none;
        color: #000;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    }

    .coins-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
    }

    .coins-icon {
        font-size: 14px;
    }

    .coins-amount {
        font-size: 14px;
        font-weight: 800;
    }

    .diamonds-badge {
        background: linear-gradient(135deg, #B9F2FF, #87CEEB);
        border: none;
        color: #000;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(185, 242, 255, 0.3);
    }

    .diamonds-badge:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(185, 242, 255, 0.5);
    }

    .diamonds-icon {
        font-size: 14px;
    }

    .diamonds-amount {
        font-size: 14px;
        font-weight: 800;
    }

    .profile-dropdown-container {
        position: relative;
        display: inline-block;
    }

    .profile-btn {
        background: linear-gradient(135deg, #FFD700, #D4AF37);
        border: none;
        color: #000;
        padding: 8px 12px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    }

    .profile-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
    }

    .profile-avatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        background-size: cover;
        background-position: center;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .dropdown-arrow {
        font-size: 12px;
        margin-left: 6px;
        transition: transform 0.3s ease;
        font-weight: bold;
        opacity: 0.8;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .profile-dropdown.active ~ .profile-btn .dropdown-arrow,
    .profile-dropdown-container:has(.profile-dropdown.active) .dropdown-arrow {
        transform: rotate(180deg);
    }

    .profile-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        min-width: 200px;
        z-index: 1000;
        margin-top: 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .profile-dropdown.active {
        display: block;
    }

    .profile-info {
        padding: 16px;
        background: rgba(255, 215, 0, 0.05);
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;
    }

    .profile-name {
        font-size: 12px;
        color: #FFD700;
        font-weight: 600;
    }

    .profile-avatar-small {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        border: 2px solid #FFD700;
    }

    .profile-link {
        display: block;
        padding: 10px 16px;
        color: #FFD700;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .profile-link:hover {
        background: rgba(255, 215, 0, 0.1);
        color: #FFD700;
    }

    .profile-dropdown .divider {
        height: 1px;
        background: rgba(255, 215, 0, 0.3);
        margin: 8px 0;
    }

    /* Login Modal */
    .login-modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
    }

    .login-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-modal-content {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
        border: 2px solid #FFD700;
        border-radius: 16px;
        padding: 40px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        position: relative;
    }

    .login-modal-header {
        margin-bottom: 30px;
    }

    .login-modal-title {
        font-size: 24px;
        font-weight: 700;
        color: #FFD700;
        margin-bottom: 8px;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .login-modal-subtitle {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }

    .login-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .login-form-input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        padding: 12px 16px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .login-form-input:focus {
        outline: none;
        border-color: #FFD700;
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    }

    .login-form-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .login-form-actions {
        display: flex;
        gap: 10px;
        margin-top: 10px;
    }

    .login-btn {
        background: linear-gradient(135deg, #FFD700, #D4AF37);
        border: none;
        color: #000;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        flex: 1;
    }

    .login-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    }

    .forgot-password-btn {
        background: transparent;
        border: 1px solid rgba(255, 215, 0, 0.5);
        color: #FFD700;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .forgot-password-btn:hover {
        background: rgba(255, 215, 0, 0.1);
        border-color: #FFD700;
        transform: translateY(-1px);
    }

    .login-links {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        justify-content: center;
    }

    .login-link {
        color: #FFD700;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        padding: 8px 12px;
        border-radius: 6px;
        border: 1px solid transparent;
    }

    .login-link:hover {
        background: rgba(255, 215, 0, 0.1);
        border-color: rgba(255, 215, 0, 0.3);
        color: #FFD700;
        text-decoration: none;
    }

    .close-modal {
        position: absolute;
        top: 15px;
        right: 15px;
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.7);
        font-size: 24px;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
    }

    .close-modal:hover {
        color: #FFD700;
    }

    /* Settings Modal */
    .settings-modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
    }

    .settings-modal.active {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .settings-modal-content {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
        border: 2px solid #FFD700;
        border-radius: 16px;
        padding: 40px;
        width: 90%;
        max-width: 500px;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
        position: relative;
    }

    .settings-modal-header {
        margin-bottom: 30px;
    }

    .settings-modal-title {
        font-size: 24px;
        font-weight: 700;
        color: #FFD700;
        margin-bottom: 8px;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .settings-modal-subtitle {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }

    .settings-form {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 30px;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .form-label {
        font-weight: 600;
        color: #FFD700;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .settings-input {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        padding: 12px 16px;
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;
        font-family: "Didact Gothic", sans-serif;
    }

    .settings-input:focus {
        outline: none;
        border-color: #FFD700;
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
    }

    .settings-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .avatar-selection {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .avatar-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-bottom: 15px;
    }

    .avatar-option {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 12px;
        padding: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
    }

    .avatar-option:hover {
        background: rgba(255, 215, 0, 0.1);
        border-color: #FFD700;
        transform: translateY(-2px);
    }

    .avatar-option.selected {
        background: rgba(255, 215, 0, 0.2);
        border-color: #FFD700;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    }

    .avatar-preview {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        margin: 0 auto 8px;
        background-size: cover;
        background-position: center;
        border: 2px solid rgba(255, 215, 0, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        background-color: #333;
    }

    .avatar-preview.selected {
        border-color: #FFD700;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .avatar-name {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .avatar-more {
        text-align: left;
    }

    .avatar-more p {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        margin: 0;
    }

    .avatar-link {
        color: #FFD700;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .avatar-link:hover {
        color: #FFD700;
        text-decoration: underline;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .settings-buttons {
        display: flex;
        gap: 10px;
        justify-content: center;
    }

    .settings-btn {
        background: linear-gradient(135deg, #FFD700, #D4AF37);
        border: none;
        color: #000;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .settings-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    }

    .settings-btn.secondary {
        background: transparent;
        border: 1px solid rgba(255, 215, 0, 0.5);
        color: #FFD700;
    }

    .settings-btn.secondary:hover {
        background: rgba(255, 215, 0, 0.1);
    }

    /* Toast Notifications */
    .toast {
        position: fixed;
        top: 100px;
        right: 20px;
        padding: 12px 20px;
        border-radius: 8px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        z-index: 3000;
        animation: slideInToast 0.3s ease-out;
        max-width: 300px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .toast-success {
        background: linear-gradient(135deg, #4CAF50, #45a049);
        border: 1px solid rgba(76, 175, 80, 0.3);
    }

    .toast-error {
        background: linear-gradient(135deg, #f44336, #d32f2f);
        border: 1px solid rgba(244, 67, 54, 0.3);
    }

    .toast-info {
        background: linear-gradient(135deg, #2196F3, #1976D2);
        border: 1px solid rgba(33, 150, 243, 0.3);
    }

    @keyframes slideInToast {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    :root {
        --gold-primary: #D4AF37;
        --gold-accent: #FFD700;
        --gold-light: #B8860B;
        --silver: #C0C0C0;
        --silver-dark: #A8A8A8;
        --platinum: #E5E4E2;
        --diamond: #B9F2FF;
        --obsidian: #1C1C1C;
        --black-rich: #0A0A0A;
        --black-soft: #0F0F0F;
        --gray-dark: #121212;
        --gray-medium: #1E1E1E;
        --gray-light: #2A2A2A;
        --white-pure: #FFFFFF;
        --white-soft: #F8F8F8;
        --accent-blue: #4A90E2;
        --accent-purple: #8A2BE2;
        --accent-emerald: #50C878;
        --accent-red: #FF4444;
        --gradient-luxury: linear-gradient(135deg, #0A0A0A 0%, #1C1C1C 50%, #2D2D2D 100%);
        --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
        --gradient-granter: linear-gradient(135deg, #FFD700 0%, #D4AF37 50%, #B8860B 100%);
        --gradient-elite: linear-gradient(135deg, #1C1C1C 0%, #2D2D2D 25%, #C0C0C0 50%, #D4AF37 75%, #FFD700 100%);
        --gradient-card: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(45, 45, 45, 0.85) 100%);
        --gradient-dark: linear-gradient(135deg, #0A0A0A 0%, #1E1E1E 50%, #121212 100%);
        --gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
        --shadow-luxury: 0 25px 80px rgba(0, 0, 0, 0.6);
        --shadow-gold: 0 0 30px rgba(212, 175, 55, 0.4);
        --shadow-elite: 0 0 50px rgba(212, 175, 55, 0.6);
        --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.3);
        --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        --blur-glass: blur(20px);
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Didact Gothic", sans-serif !important;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: "Didact Gothic", sans-serif !important;
        background: var(--gradient-dark);
        color: var(--white-pure);
        overflow-x: hidden;
        line-height: 1.6;
        min-height: 100vh;
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.12) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(229, 228, 226, 0.08) 0%, transparent 50%),
            radial-gradient(circle at 40% 60%, rgba(185, 242, 255, 0.06) 0%, transparent 50%);
        pointer-events: none;
        z-index: -1;
    }

    /* Floating luxury particles */
    .luxury-particles {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
    }

    .luxury-particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: var(--gold-accent);
        border-radius: 50%;
        opacity: 0.6;
        animation: luxuryFloat 8s ease-in-out infinite;
        box-shadow: 0 0 15px var(--gold-accent);
    }

    .luxury-particle:nth-child(2n) {
        background: var(--platinum);
        box-shadow: 0 0 12px var(--platinum);
        animation-duration: 10s;
    }

    .luxury-particle:nth-child(3n) {
        background: var(--diamond);
        box-shadow: 0 0 10px var(--diamond);
        animation-duration: 12s;
    }

    .luxury-particle:nth-child(4n) {
        background: var(--gold-light);
        box-shadow: 0 0 8px var(--gold-light);
        animation-duration: 14s;
    }

    @keyframes luxuryFloat {
        0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
        25% { transform: translateY(-20px) translateX(10px) rotate(90deg); }
        50% { transform: translateY(-40px) translateX(-10px) rotate(180deg); }
        75% { transform: translateY(-20px) translateX(15px) rotate(270deg); }
    }


    /* Main Content */
    main {
        padding: 5rem 2rem 2rem 2rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .page-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .page-title {
        font-size: 3rem;
        background: linear-gradient(135deg, #FFD700 0%, #D4AF37 50%, #B8860B 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1.5rem;
        text-shadow: 0 0 50px rgba(255, 215, 0, 0.4);
        letter-spacing: -2px;
    }

    .page-subtitle {
        font-size: 1.2rem;
        color: var(--white-soft);
        max-width: 600px;
        margin: 0 auto;
    }

    /* Tab Navigation */
    .tab-navigation {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 2rem;
        flex-wrap: wrap;
    }

    .tab-btn {
        background: rgba(28, 28, 28, 0.8);
        border: 2px solid rgba(212, 175, 55, 0.2);
        color: var(--white-soft);
        padding: 0.75rem 1.5rem;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .tab-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .tab-btn:hover {
        background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(45, 45, 45, 0.85) 100%);
        border-color: rgba(212, 175, 55, 0.5);
        transform: translateY(-8px);
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    }

    .tab-btn:hover::before {
        opacity: 1;
        height: 6px;
    }

    .tab-btn.active {
        background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(45, 45, 45, 0.85) 100%);
        border-color: rgba(212, 175, 55, 0.8);
        color: var(--gold-primary);
        transform: translateY(-8px);
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    }

    .tab-btn.active::before {
        background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
        opacity: 1;
        height: 6px;
    }

    .tab-text {
        position: relative;
        z-index: 1;
    }

    /* Leaderboard Content */
    .leaderboard-content {
        background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(45, 45, 45, 0.85) 100%);
        border: 2px solid rgba(212, 175, 55, 0.2);
        border-radius: 20px;
        padding: 3rem;
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
        position: relative;
        overflow: hidden;
    }

    .leaderboard-content::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        height: 4px;
        background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
        opacity: 0.8;
    }

    .leaderboard-content::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.03) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .leaderboard-content:hover::after {
        opacity: 1;
    }

    .leaderboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    }

    .leaderboard-title {
        font-size: 1.5rem;
        color: var(--gold-primary);
        font-weight: 600;
    }

    .refresh-btn {
        background: linear-gradient(135deg, #FFD700, #D4AF37);
        border: none;
        color: #000;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .refresh-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    }

    /* Leaderboard Items */
    .leaderboard-grid {
        display: grid;
        gap: 1rem;
    }

    .leaderboard-item {
        background: rgba(28, 28, 28, 0.8);
        border: 2px solid rgba(212, 175, 55, 0.2);
        border-radius: 16px;
        padding: 2rem;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .leaderboard-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
        opacity: 0.8;
    }

    .leaderboard-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle, rgba(212, 175, 55, 0.02) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .leaderboard-item:hover {
        background: linear-gradient(145deg, rgba(28, 28, 28, 0.95) 0%, rgba(45, 45, 45, 0.85) 100%);
        border-color: rgba(212, 175, 55, 0.5);
        transform: translateY(-12px);
        box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
    }

    .leaderboard-item:hover::before {
        background: linear-gradient(135deg, #D4AF37 0%, #FFD700 50%, #B8860B 100%);
        opacity: 1;
        height: 6px;
    }

    .leaderboard-item:hover::after {
        opacity: 1;
    }

    .granter-info {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .granter-name {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--white-pure);
        position: relative;
        z-index: 1;
    }

    .granter-tier {
        font-size: 0.9rem;
        color: var(--gold-primary);
        font-weight: 500;
    }

    .stats {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }

    .stat-value {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--white-pure);
    }

    .stat-label {
        font-size: 0.8rem;
        color: var(--white-soft);
    }

    .total-amount {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--gold-primary);
    }

    /* Timeframe Toggle */
    .timeframe-toggle {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .timeframe-btn {
        background: rgba(212, 175, 55, 0.1);
        border: 2px solid rgba(212, 175, 55, 0.3);
        color: var(--white-soft);
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .timeframe-btn:hover {
        background: rgba(212, 175, 55, 0.2);
        border-color: rgba(212, 175, 55, 0.5);
        transform: translateY(-2px);
    }

    .timeframe-btn.active {
        background: linear-gradient(135deg, #FFD700, #D4AF37);
        border-color: #FFD700;
        color: #000;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    }

    /* Leaderboard Table Styles */
    .leaderboard-table-header {
        display: grid;
        grid-template-columns: 60px 2fr 1fr 80px 80px 80px 100px 70px 1fr;
        gap: 1rem;
        padding: 1rem;
        background: rgba(212, 175, 55, 0.1);
        border-bottom: 1px solid rgba(255, 215, 0, 0.2);
        font-weight: 600;
        color: var(--gold-primary);
        text-align: center;
        font-size: 0.9rem;
    }

    .header-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.8rem;
    }

    .leaderboard-table-body {
        min-height: 200px;
    }

    .granter-row {
        display: grid;
        grid-template-columns: 60px 2fr 1fr 80px 80px 80px 100px 70px 1fr;
        gap: 1rem;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 215, 0, 0.1);
        transition: all 0.3s ease;
        position: relative;
    }

    .granter-row:hover {
        background: rgba(255, 215, 0, 0.05);
        transform: translateX(4px);
    }

    .granter-row.rank-1 {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
        border-left: 4px solid #FFD700;
    }

    .granter-row.rank-2 {
        background: linear-gradient(135deg, rgba(192, 192, 192, 0.1) 0%, rgba(169, 169, 169, 0.05) 100%);
        border-left: 4px solid #C0C0C0;
    }

    .granter-row.rank-3 {
        background: linear-gradient(135deg, rgba(205, 127, 50, 0.1) 0%, rgba(184, 134, 11, 0.05) 100%);
        border-left: 4px solid #CD7F32;
    }

    .rank-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 1.1rem;
        position: relative;
    }

    .rank-number {
        position: relative;
        z-index: 1;
    }

    .crown-icon {
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.5rem;
        animation: crownPulse 2s ease-in-out infinite;
        z-index: 2;
    }

    @keyframes crownPulse {
        0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
        50% { transform: translateX(-50%) scale(1.2); opacity: 0.8; }
    }

    .granter-cell {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: relative;
    }

    .granter-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid rgba(255, 215, 0, 0.3);
        object-fit: cover;
        transition: all 0.3s ease;
    }

    .granter-avatar:hover {
        transform: scale(1.1);
        border-color: #FFD700;
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    }

    .granter-info {
        flex: 1;
    }

    .granter-name {
        font-weight: 600;
        color: var(--white-pure);
        margin-bottom: 0.25rem;
        font-size: 1rem;
    }

    .granter-title {
        font-size: 0.8rem;
        color: var(--gold-primary);
        font-weight: 500;
    }

    .impact-cell, .wishes-cell, .coins-cell, .diamonds-cell, .recognitions-cell, .level-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .impact-score {
        color: var(--gold-accent);
        font-size: 1rem;
    }

    .wishes-count {
        color: var(--accent-blue);
    }

    .coins-count {
        color: var(--gold-light);
    }

    .diamonds-count {
        color: var(--diamond);
    }

    .recognitions-count {
        color: var(--accent-purple);
    }

    .level-number {
        color: var(--accent-emerald);
    }

    .title-cell {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 0.8rem;
        color: var(--platinum);
        font-weight: 500;
    }

    /* Additional cell styles for different leaderboard types */
    .player-cell {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-weight: 600;
        color: var(--white-pure);
        font-size: 1rem;
    }

    .current-cell, .best-cell, .total-cell, .time-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--accent-blue);
    }

    .streak-count {
        color: var(--accent-emerald);
    }

    .xp-count {
        color: var(--gold-accent);
    }

    .achievements-count, .challenges-count {
        color: var(--accent-purple);
    }

    /* Granters and Coin Masters specific styles */
    .total-coins-cell, .average-cell, .total-amount-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .total-coins-count, .total-amount-count {
        color: var(--gold-accent);
        font-weight: 700;
    }

    .average-count {
        color: var(--accent-blue);
    }

    .wishes-count {
        color: var(--accent-emerald);
    }

    /* Special Features */
    .special-features {
        margin-top: 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
    }

    /* Pie Chart Styles */
    .pie-chart-container {
        background: rgba(28, 28, 28, 0.8);
        border: 2px solid rgba(212, 175, 55, 0.2);
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        min-width: 300px;
    }

    .pie-chart-container h3 {
        color: var(--gold-primary);
        margin-bottom: 1rem;
        font-size: 1.2rem;
    }

    .pie-chart-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .chart-legend {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--white-soft);
    }

    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 2px;
    }

    /* Biggest Collection Tooltip */
    .biggest-collection-tooltip {
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(184, 134, 11, 0.9));
        border: 2px solid rgba(255, 215, 0, 0.5);
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        min-width: 250px;
        box-shadow: 0 8px 32px rgba(212, 175, 55, 0.4);
    }

    .biggest-collection-content h4 {
        color: var(--white-pure);
        margin-bottom: 1rem;
        font-size: 1.1rem;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }

    .biggest-collection-details {
        color: var(--white-pure);
    }

    .biggest-wish-title {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .biggest-wish-amount {
        font-size: 1.2rem;
        color: var(--gold-accent);
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .biggest-wish-date {
        font-size: 0.8rem;
        color: var(--white-soft);
        opacity: 0.8;
    }

    /* Coin Rain Animation */
    .coin-rain {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 50;
        overflow: hidden;
    }

    .coin {
        position: absolute;
        font-size: 2rem;
        animation: coinFall linear infinite;
        opacity: 0.8;
    }

    .coin:nth-child(1) { animation-duration: 3s; animation-delay: 0s; }
    .coin:nth-child(2) { animation-duration: 4s; animation-delay: 0.5s; }
    .coin:nth-child(3) { animation-duration: 3.5s; animation-delay: 1s; }
    .coin:nth-child(4) { animation-duration: 4.5s; animation-delay: 1.5s; }
    .coin:nth-child(5) { animation-duration: 3.8s; animation-delay: 2s; }
    .coin:nth-child(6) { animation-duration: 4.2s; animation-delay: 2.5s; }
    .coin:nth-child(7) { animation-duration: 3.3s; animation-delay: 3s; }

    @keyframes coinFall {
        0% {
            transform: translateY(-100px) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(100vh) rotate(360deg);
            opacity: 0;
        }
    }

    /* Grid template adjustments for different column counts */
    .leaderboard-content[data-columns="8"] .granter-row,
    .leaderboard-content[data-columns="8"] .leaderboard-table-header {
        grid-template-columns: 60px 2fr 1fr 90px 100px 90px 70px 1fr;
    }

    .leaderboard-content[data-columns="6"] .granter-row,
    .leaderboard-content[data-columns="6"] .leaderboard-table-header {
        grid-template-columns: 60px 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .leaderboard-content[data-columns="4"] .granter-row,
    .leaderboard-content[data-columns="4"] .leaderboard-table-header {
        grid-template-columns: 60px 2fr 1fr 1fr;
    }

    .leaderboard-content[data-columns="5"] .granter-row,
    .leaderboard-content[data-columns="5"] .leaderboard-table-header {
        grid-template-columns: 60px 2fr 1fr 1fr 1fr;
    }

    .leaderboard-content[data-columns="3"] .granter-row,
    .leaderboard-content[data-columns="3"] .leaderboard-table-header {
        grid-template-columns: 60px 2fr 1fr;
    }

    /* Mini Profile Hover */
    .mini-profile-hover {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.95);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 8px;
        padding: 1rem;
        min-width: 250px;
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
        pointer-events: none;
    }

    .mini-profile-hover.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(10px);
    }

    .mini-profile-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 215, 0, 0.2);
    }

    .mini-profile-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 2px solid #FFD700;
        object-fit: cover;
    }

    .mini-profile-name {
        font-weight: 600;
        color: var(--white-pure);
        font-size: 1rem;
    }

    .mini-profile-title {
        font-size: 0.8rem;
        color: var(--gold-primary);
    }

    .mini-profile-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .mini-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mini-stat-value {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--white-pure);
    }

    .mini-stat-label {
        font-size: 0.7rem;
        color: var(--white-soft);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .mini-profile-top-wish {
        background: rgba(255, 215, 0, 0.05);
        border-radius: 6px;
        padding: 0.75rem;
        border-left: 3px solid var(--gold-accent);
    }

    .top-wish-title {
        font-weight: 600;
        color: var(--white-pure);
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
    }

    .top-wish-amount {
        font-size: 0.8rem;
        color: var(--gold-primary);
        font-weight: 500;
    }

    /* Loading State */
    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        color: var(--white-soft);
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 215, 0, 0.2);
        border-top: 3px solid #FFD700;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 1rem;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .loading-state p {
        font-size: 1rem;
        margin: 0;
    }

    /* Empty State */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        color: var(--white-soft);
        text-align: center;
    }

    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .empty-state h3 {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
        color: var(--white-pure);
    }

    .empty-state p {
        font-size: 0.9rem;
        margin: 0;
        max-width: 400px;
    }

    /* Share Button */
    .share-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        background: linear-gradient(135deg, #FFD700, #FFA500);
        border: none;
        border-radius: 50px;
        padding: 15px 25px;
        color: #000;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .share-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
    }

    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    // Unified Header JavaScript
    $(document).ready(function() {
        // Profile dropdown toggle
        $('#profileBtn').click(function(e) {
            e.stopPropagation();
            $('#profileDropdown').toggleClass('active');
        });

        // Close dropdown when clicking outside
        $(document).click(function(e) {
            if (!$(e.target).closest('.profile-dropdown-container').length) {
                $('#profileDropdown').removeClass('active');
            }
        });

        // Settings modal
        $('#settingsBtn').click(function(e) {
            e.preventDefault();
            $('#settingsModal').addClass('active');
            loadSettingsData();
        });

        // Login modal and button
        $('#loginBtn').click(function(e) {
            e.preventDefault();
            $('#loginModal').addClass('active');
        });

        // Coins badge click - redirect to profile shop
        $('#coinsBadge').click(function(e) {
            e.preventDefault();
            window.location.href = '/profile.php#shop';
        });

        // Diamonds badge click - redirect to profile shop
        $('#diamondsBadge').click(function(e) {
            e.preventDefault();
            window.location.href = '/profile.php#shop';
        });

        // Logout functionality
        $('#logoutBtn').click(function(e) {
            e.preventDefault();
            $.ajax({
                url: '/logout.php',
                method: 'POST',
                data: { ajax: '1' },
                success: function(response) {
                    try {
                        const data = typeof response === 'string' ? JSON.parse(response) : response;
                        if (data.success) {
                            $('#profileContainer').hide();
                            $('#loginBtn').show();
                            $('#coinsBadge').hide();
                            $('#diamondsBadge').hide();
                            showToast('Logged out successfully!', 'success');
                        } else {
                            showToast(data.message || 'Logout failed', 'error');
                        }
                    } catch (e) {
                        showToast('Logout failed. Please try again.', 'error');
                    }
                },
                error: function() {
                    showToast('Logout failed. Please try again.', 'error');
                }
            });
        });

        // Login form submission
        $('#loginForm').submit(function(e) {
            e.preventDefault();
            const email = $('#loginEmail').val();
            const password = $('#loginPassword').val();

            $.ajax({
                url: '/login-handler.php',
                method: 'POST',
                data: {
                    log: email,
                    pwd: password,
                    ajax: '1'
                },
                success: function(response) {
                    try {
                        const data = typeof response === 'string' ? JSON.parse(response) : response;
                        if (data.success) {
                            $('#loginModal').removeClass('active');
                            updateLoginUI(data.user);
                            showToast('Login successful!', 'success');
                        } else {
                            showToast(data.message || 'Login failed', 'error');
                        }
                    } catch (e) {
                        showToast('Login failed. Please try again.', 'error');
                    }
                },
                error: function() {
                    showToast('Login failed. Please try again.', 'error');
                }
            });
        });

        // Update login UI
        function updateLoginUI(user) {
            console.log('updateLoginUI called with user:', user);
            $('#profileContainer').show();
            $('#profileName').text(user.display_name || 'User');
            $('#dropdownDisplayName').text(user.display_name || 'User');

            const avatarImage = user.avatar_image || 'default.png';
            $('#profileAvatar').css('background-image', `url('/wp-content/themes/buymywishes/images/avatars/${avatarImage}')`);
            $('#profileAvatar').text('');
            $('#dropdownAvatar').css('background-image', `url('/wp-content/themes/buymywishes/images/avatars/${avatarImage}')`);
            $('#dropdownAvatar').text('');

            $('#coinsBadge').show();
            $('#diamondsBadge').show();
            $('#coinsAmount').text(user.coins || 0);
            $('#diamondsAmount').text(user.diamonds || 0);
            $('#loginBtn').hide();
        }

        // Show toast notification
        function showToast(message, type = 'info') {
            const toast = $(`<div class="toast toast-${type}">${message}</div>`);
            $('body').append(toast);
            setTimeout(() => toast.remove(), 3000);
        }

        // Load user data if logged in (only if not already called from homepage)
        if (typeof window.headerInitialized === 'undefined') {
            loadUserData();
            window.headerInitialized = true;
        }

        function loadUserData() {
            console.log('loadUserData called');
            $.ajax({
                url: '/get-user-data.php',
                success: function(data) {
                    console.log('AJAX success, data:', data);
                    if (data.logged_in) {
                        console.log('User is logged in, calling updateLoginUI');
                        updateLoginUI(data);
                    } else {
                        console.log('User is not logged in');
                        $('#loginBtn').show();
                        $('#profileContainer').hide();
                        $('#coinsBadge').hide();
                        $('#diamondsBadge').hide();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('AJAX error:', xhr, status, error);
                    $('#loginBtn').show();
                    $('#profileContainer').hide();
                    $('#coinsBadge').hide();
                    $('#diamondsBadge').hide();
                }
            });
        }

        // Settings functionality
        let selectedAvatar = '';
        let availableAvatars = [];

        function loadSettingsData() {
            $.ajax({
                url: '/get-user-data.php',
                success: function(data) {
                    if (data.logged_in) {
                        $('#displayName').val(data.display_name || '');
                        selectedAvatar = data.avatar || '';
                        loadAvatars();
                    }
                },
                error: function() {
                    showToast('Failed to load settings data', 'error');
                }
            });
        }

        function loadAvatars() {
            $.ajax({
                url: '/get-avatars.php',
                success: function(response) {
                    if (response.success && response.avatars) {
                        availableAvatars = response.avatars;
                        renderAvatarGrid();
                    } else {
                        loadAvatarsFallback();
                    }
                },
                error: function() {
                    loadAvatarsFallback();
                }
            });
        }

        function loadAvatarsFallback() {
            availableAvatars = [
                { avatar_id: 'avatar_default', avatar_name: 'Default', avatar_image: 'default.png' },
                { avatar_id: 'avatar_shade', avatar_name: 'Shade', avatar_image: 'shade.png' },
                { avatar_id: 'avatar_lumos', avatar_name: 'Lumos', avatar_image: 'lumos.png' },
                { avatar_id: 'avatar_echo', avatar_name: 'Echo', avatar_image: 'echo.png' },
                { avatar_id: 'avatar_nova', avatar_name: 'Nova', avatar_image: 'nova.png' },
                { avatar_id: 'avatar_mystique', avatar_name: 'Mystique', avatar_image: 'mystique.png' },
                { avatar_id: 'avatar_aura', avatar_name: 'Aura', avatar_image: 'aura.png' },
                { avatar_id: 'avatar_phantom', avatar_name: 'Phantom', avatar_image: 'phantom.png' }
            ];
            renderAvatarGrid();
        }

        function renderAvatarGrid() {
            const avatarGrid = $('#avatarGrid');
            avatarGrid.empty();

            if (!availableAvatars || availableAvatars.length === 0) return;

            availableAvatars.forEach(function(avatar) {
                const isSelected = selectedAvatar === avatar.avatar_id;
                const avatarOption = $(`
                    <div class="avatar-option ${isSelected ? 'selected' : ''}" data-avatar="${avatar.avatar_id}">
                        <div class="avatar-preview ${isSelected ? 'selected' : ''}" style="background-image: url('/wp-content/themes/buymywishes/images/avatars/${avatar.avatar_image}')"></div>
                        <span class="avatar-name">${avatar.avatar_name}</span>
                    </div>
                `);
                avatarGrid.append(avatarOption);
            });

            $('.avatar-option').click(function() {
                $('.avatar-option').removeClass('selected');
                $('.avatar-preview').removeClass('selected');
                $(this).addClass('selected');
                $(this).find('.avatar-preview').addClass('selected');
                selectedAvatar = $(this).data('avatar');
            });
        }

        // Save settings
        $('.settings-btn').last().click(function() {
            const displayName = $('#displayName').val();

            $.ajax({
                url: '/update-user-avatar.php',
                method: 'POST',
                data: {
                    display_name: displayName,
                    avatar: selectedAvatar
                },
                success: function(response) {
                    if (response.success) {
                        $('#settingsModal').removeClass('active');
                        $('#profileName').text(displayName || 'User');
                        $('#dropdownDisplayName').text(displayName || 'User');

                        if (selectedAvatar && response.user && response.user.avatar_image) {
                            const avatarImage = response.user.avatar_image;
                            $('#profileAvatar').css('background-image', `url('/wp-content/themes/buymywishes/images/avatars/${avatarImage}')`);
                            $('#profileAvatar').text('');
                            $('#dropdownAvatar').css('background-image', `url('/wp-content/themes/buymywishes/images/avatars/${avatarImage}')`);
                            $('#dropdownAvatar').text('');
                        }

                        showToast('Settings updated successfully!', 'success');
                    } else {
                        showToast(response.message || 'Failed to update settings', 'error');
                    }
                },
                error: function(xhr) {
                    const errorMessage = xhr.responseJSON && xhr.responseJSON.message
                        ? xhr.responseJSON.message
                        : 'Failed to update settings. Please try again.';
                    showToast(errorMessage, 'error');
                }
            });
        });
    });

    // Global modal functions (must be outside document ready for onclick handlers)
    function hideLoginModal() {
        $('#loginModal').removeClass('active');
    }

    function hideSettingsModal() {
        $('#settingsModal').removeClass('active');
    }

    function showForgotPasswordModal() {
        const email = prompt('Please enter your email address for password reset:');
        if (email && email.trim()) {
            $.ajax({
                url: '/wp-login.php?action=lostpassword',
                method: 'POST',
                data: {
                    user_login: email.trim(),
                    wp_submit: 'Get New Password',
                    ajax: '1'
                },
                success: function() {
                    showToast('Password reset email sent! Please check your inbox.', 'success');
                },
                error: function() {
                    showToast('Failed to send reset email. Please try again.', 'error');
                }
            });
        } else if (email !== null) {
            showToast('Please enter a valid email address.', 'error');
        }
    }

    function showToast(message, type = 'info') {
        const toast = $(`<div class="toast toast-${type}">${message}</div>`);
        $('body').append(toast);
        setTimeout(() => toast.remove(), 3000);
    }
    </script>
</head>
<body>
    <!-- Luxury particles background -->
    <div class="luxury-particles" id="luxuryParticles"></div>


    <!-- Main Content -->
    <main>
        <div class="page-header">
            <h1 class="page-title">Leaderboard</h1>
            <p class="page-subtitle">Top granters making dreams come true</p>
        </div>

        <!-- Tab Navigation -->
        <div class="tab-navigation">
            <button class="tab-btn active" data-tab="granters" onclick="switchTabWithEffect('granters')">
                <span class="tab-text">Top Granters</span>
            </button>
            <button class="tab-btn" data-tab="coins" onclick="switchTabWithEffect('coins')">
                <span class="tab-text">Coin Masters</span>
            </button>
            <button class="tab-btn" data-tab="diamonds" onclick="switchTabWithEffect('diamonds')">
                <span class="tab-text">Diamond Lords</span>
            </button>
            <button class="tab-btn" data-tab="login_streaks" onclick="switchTabWithEffect('login_streaks')">
                <span class="tab-text">Login Streaks</span>
            </button>
            <button class="tab-btn" data-tab="xp_levels" onclick="switchTabWithEffect('xp_levels')">
                <span class="tab-text">XP & Levels</span>
            </button>
            <button class="tab-btn" data-tab="achievements" onclick="switchTabWithEffect('achievements')">
                <span class="tab-text">Achievements</span>
            </button>
            <button class="tab-btn" data-tab="challenges" onclick="switchTabWithEffect('challenges')">
                <span class="tab-text">Challenges</span>
            </button>
            <button class="tab-btn" data-tab="fastest_granter" onclick="switchTabWithEffect('fastest_granter')">
                <span class="tab-text">Speedster</span>
            </button>
            <button class="tab-btn" data-tab="rising_star" onclick="switchTabWithEffect('rising_star')">
                <span class="tab-text">Rising Star</span>
            </button>
        </div>

        <!-- Leaderboard Content -->
        <div class="leaderboard-content" id="leaderboardContent">
            <div class="leaderboard-header">
                <h2 class="leaderboard-title" id="leaderboardTitle">Top Granters</h2>
                <div class="timeframe-toggle" id="timeframeToggle">
                    <button class="timeframe-btn active" data-timeframe="lifetime" onclick="switchTimeframe('lifetime')">Lifetime Leaderboard</button>
                    <button class="timeframe-btn" data-timeframe="this_month" onclick="switchTimeframe('this_month')">This Month</button>
                </div>
                <button class="refresh-btn" onclick="loadCurrentLeaderboard()">Refresh</button>
            </div>

            <!-- Dynamic Table Header -->
            <div class="leaderboard-table-header" id="tableHeader">
                <div class="header-cell rank-cell">Rank</div>
                <div class="header-cell granter-cell">Granter</div>
                <div class="header-cell impact-cell">Impact Score</div>
                <div class="header-cell wishes-cell">Wishes Granted</div>
                <div class="header-cell total-amount-cell">Total Amount</div>
                <div class="header-cell average-cell">Avg Grant</div>
                <div class="header-cell level-cell">Level</div>
                <div class="header-cell title-cell">Title</div>
                        </div>

            <!-- Special Features for Coin Masters -->
            <div class="special-features" id="specialFeatures" style="display: none;">
                <!-- Pie Chart Container -->
                <div class="pie-chart-container" id="pieChartContainer" style="display: none;">
                    <h3>Coin Distribution by Category</h3>
                    <div class="pie-chart-wrapper">
                        <canvas id="categoryPieChart" width="200" height="200"></canvas>
                        <div class="chart-legend" id="chartLegend"></div>
                    </div>
                </div>

                <!-- Biggest Collection Tooltip -->
                <div class="biggest-collection-tooltip" id="biggestCollectionTooltip" style="display: none;">
                    <div class="biggest-collection-content">
                        <h4>🏆 Biggest Coin Collection</h4>
                        <div class="biggest-collection-details" id="biggestCollectionDetails">
                            <!-- Content populated by JavaScript -->
                        </div>
                        </div>
                    </div>
                </div>

            <!-- Coin Rain Animation -->
            <div class="coin-rain" id="coinRain" style="display: none;">
                <!-- Coins will be added here by JavaScript -->
                        </div>

            <!-- Dynamic Table Body -->
            <div class="leaderboard-table-body" id="tableBody">
                <!-- Loading state -->
                <div class="loading-state">
                    <div class="loading-spinner"></div>
                    <p>Loading leaderboard...</p>
                </div>
            </div>
        </div>
    </main>

    <!-- Share Button -->
    <button class="share-btn" onclick="generateLeaderboardImage()">
        Share Leaderboard
    </button>

    <!-- LEADERBOARD JAVASCRIPT -->
    <script>
    let currentTimeframe = 'lifetime';
    let currentTab = 'granters';
    let currentMiniProfile = null;

    // Tab configurations for different leaderboard types
    const tabConfigs = {
        'granters': {
            title: 'Top Granters',
            showTimeframe: true,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'granter', label: 'Granter', class: 'granter-cell' },
                { key: 'impact_score', label: 'Impact Score', class: 'impact-cell' },
                { key: 'wishes_granted', label: 'Wishes Granted', class: 'wishes-cell' },
                { key: 'total_amount_granted', label: 'Total Amount', class: 'total-amount-cell' },
                { key: 'average_grant_amount', label: 'Avg Grant', class: 'average-cell' },
                { key: 'level', label: 'Level', class: 'level-cell' },
                { key: 'title', label: 'Title', class: 'title-cell' }
            ],
            apiEndpoint: '?api=granters'
        },
        'coins': {
            title: 'Coin Masters',
            showTimeframe: true,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'granter', label: 'Granter', class: 'granter-cell' },
                { key: 'total_coins_earned', label: 'Total Coins Earned', class: 'total-coins-cell' },
                { key: 'average_earn', label: 'Average Earn', class: 'average-cell' },
                { key: 'level', label: 'Level', class: 'level-cell' },
                { key: 'title', label: 'Title', class: 'title-cell' }
            ],
            apiEndpoint: '?api=coins',
            specialFeatures: {
                coinRain: true,
                pieChart: true,
                biggestTooltip: true
            }
        },
        'diamonds': {
            title: 'Diamond Lords',
            showTimeframe: false,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Player', class: 'player-cell' },
                { key: 'diamonds_earned', label: 'Diamonds Earned', class: 'diamonds-cell' },
                { key: 'current_diamonds', label: 'Current Diamonds', class: 'current-cell' }
            ],
            apiEndpoint: 'diamond-lords-api.php'
        },
        'login_streaks': {
            title: 'Login Streaks',
            showTimeframe: false,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Player', class: 'player-cell' },
                { key: 'current_streak', label: 'Current Streak', class: 'streak-cell' },
                { key: 'best_streak', label: 'Best Streak', class: 'best-cell' },
                { key: 'total_logins', label: 'Total Logins', class: 'total-cell' }
            ],
            apiEndpoint: 'login-streaks-api.php'
        },
        'xp_levels': {
            title: 'XP & Levels',
            showTimeframe: false,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Player', class: 'player-cell' },
                { key: 'total_xp', label: 'Total XP', class: 'xp-cell' },
                { key: 'level', label: 'Level', class: 'level-cell' }
            ],
            apiEndpoint: 'xp-levels-api.php'
        },
        'achievements': {
            title: 'Achievements',
            showTimeframe: true,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Player', class: 'player-cell' },
                { key: 'achievements_completed', label: 'Achievements', class: 'achievements-cell' }
            ],
            apiEndpoint: 'achievements-api.php'
        },
        'challenges': {
            title: 'Challenges',
            showTimeframe: true,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Player', class: 'player-cell' },
                { key: 'challenges_completed', label: 'Completed', class: 'challenges-cell' }
            ],
            apiEndpoint: 'challenges-api.php'
        },
        'fastest_granter': {
            title: 'Speedster',
            showTimeframe: true,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Granter', class: 'granter-cell' },
                { key: 'avg_time', label: 'Avg Grant Time', class: 'time-cell' }
            ],
            apiEndpoint: 'speedster-api.php'
        },
        'rising_star': {
            title: 'Rising Star',
            showTimeframe: false,
            columns: [
                { key: 'rank', label: 'Rank', class: 'rank-cell' },
                { key: 'name', label: 'Player', class: 'player-cell' },
                { key: 'weekly_xp', label: 'Weekly XP', class: 'xp-cell' }
            ],
            apiEndpoint: 'rising-star-api.php'
        }
    };

    // Update leaderboard UI based on current tab
    function updateLeaderboardUI() {
        const config = tabConfigs[currentTab];
        if (!config) return;

        // Update title
        document.getElementById('leaderboardTitle').textContent = config.title;

        // Show/hide timeframe toggle
        const timeframeToggle = document.getElementById('timeframeToggle');
        timeframeToggle.style.display = config.showTimeframe ? 'flex' : 'none';

        // Update container with column count for CSS
        const leaderboardContent = document.getElementById('leaderboardContent');
        leaderboardContent.setAttribute('data-columns', config.columns.length);

        // Update table header
        const tableHeader = document.getElementById('tableHeader');
        tableHeader.innerHTML = config.columns.map(col =>
            `<div class="header-cell ${col.class}">${col.label}</div>`
        ).join('');
    }

    // Tab switching visual effects
    function switchTabWithEffect(tabName) {
        const tabBtn = document.querySelector(`[data-tab="${tabName}"]`);
        if (tabBtn) {
            tabBtn.style.transform = 'scale(1.05)';
            tabBtn.style.boxShadow = '0 0 20px #D4AF37';
            setTimeout(() => {
                tabBtn.style.transform = '';
                tabBtn.style.boxShadow = '';
            }, 300);

            // Update active tab visually
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            tabBtn.classList.add('active');

            // Update current tab and load data
            currentTab = tabName;
            updateLeaderboardUI();
            loadCurrentLeaderboard();
        }
    }

    // Handle special features for Coin Masters
    function handleSpecialFeatures(data) {
        const config = tabConfigs[currentTab];
        const specialFeatures = document.getElementById('specialFeatures');

        if (config.specialFeatures && config.specialFeatures.coinRain) {
            // Show coin rain for top 3
            showCoinRain();
        }

        if (config.specialFeatures && config.specialFeatures.pieChart && data.category_breakdown) {
            // Show pie chart
            showPieChart(data.category_breakdown);
        }

        if (config.specialFeatures && config.specialFeatures.biggestTooltip && data.biggest_collection) {
            // Show biggest collection tooltip
            showBiggestCollection(data.biggest_collection);
        }

        // Show special features container if any features are enabled
        if (config.specialFeatures) {
            specialFeatures.style.display = 'flex';
        } else {
            specialFeatures.style.display = 'none';
        }
    }

    // Coin rain animation for top 3
    function showCoinRain() {
        const coinRain = document.getElementById('coinRain');
        coinRain.style.display = 'block';
        coinRain.innerHTML = '';

        // Create coins for top 3 positions
        const coins = ['💰', '🪙', '💎'];
        for (let i = 0; i < 7; i++) {
            const coin = document.createElement('div');
            coin.className = 'coin';
            coin.textContent = coins[i % coins.length];
            coin.style.left = Math.random() * 100 + '%';
            coinRain.appendChild(coin);
        }

        // Hide after animation
        setTimeout(() => {
            coinRain.style.display = 'none';
        }, 8000);
    }

    // Show pie chart for category breakdown
    function showPieChart(categoryData) {
        const container = document.getElementById('pieChartContainer');
        const legend = document.getElementById('chartLegend');

        if (!categoryData || categoryData.length === 0) {
            container.style.display = 'none';
            return;
        }

        container.style.display = 'block';

        // Create legend
        legend.innerHTML = '';
        const colors = [
            '#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4',
            '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE'
        ];

        categoryData.forEach((category, index) => {
            const legendItem = document.createElement('div');
            legendItem.className = 'legend-item';

            const colorBox = document.createElement('div');
            colorBox.className = 'legend-color';
            colorBox.style.backgroundColor = colors[index % colors.length];

            const label = document.createElement('span');
            label.textContent = `${category.category}: ${formatNumber(category.total_coins)} coins`;

            legendItem.appendChild(colorBox);
            legendItem.appendChild(label);
            legend.appendChild(legendItem);
        });

        // Simple pie chart visualization (you could integrate Chart.js here for a real pie chart)
        // For now, just show the legend
    }

    // Show biggest collection tooltip
    function showBiggestCollection(biggest) {
        const container = document.getElementById('biggestCollectionTooltip');
        const details = document.getElementById('biggestCollectionDetails');

        if (!biggest) {
            container.style.display = 'none';
            return;
        }

        container.style.display = 'block';

        details.innerHTML = `
            <div class="biggest-wish-title">${escapeHtml(biggest.wish_title || 'Unknown Wish')}</div>
            <div class="biggest-wish-amount">${formatNumber(biggest.coin_amount || 0)} 💰</div>
            <div class="biggest-wish-date">Granted by ${escapeHtml(biggest.granter_name || 'Unknown')}</div>
            <div class="biggest-wish-date">${biggest.collection_date ? new Date(biggest.collection_date).toLocaleDateString() : 'Unknown date'}</div>
        `;
    }

    // Switch timeframe for current leaderboard
    function switchTimeframe(timeframe) {
        currentTimeframe = timeframe;

        // Update button states
        document.querySelectorAll('.timeframe-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector(`[data-timeframe="${timeframe}"]`).classList.add('active');

        // Reload data
        loadCurrentLeaderboard();
    }

    // Load current leaderboard data
    function loadCurrentLeaderboard() {
        const config = tabConfigs[currentTab];
        if (!config) return;

        const tableBody = document.getElementById('tableBody');

        // Show loading state
        tableBody.innerHTML = `
            <div class="loading-state">
                <div class="loading-spinner"></div>
                <p>Loading ${config.title.toLowerCase()}...</p>
            </div>
        `;

        // Build API URL with timeframe if supported
        let apiUrl = `/${config.apiEndpoint}`;
        if (config.showTimeframe) {
            apiUrl += `?timeframe=${currentTimeframe}`;
        }

        // Fetch data from API
        fetch(apiUrl)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    renderLeaderboardTable(data);
                } else {
                    showError('Failed to load leaderboard data');
                }
            })
            .catch(error => {
                console.error(`Error loading ${currentTab}:`, error);
                showError('Network error. Please try again.');
            });
    }

    // Render the leaderboard table for any tab
    function renderLeaderboardTable(data) {
        const entries = data.coin_masters || data.granters || data || [];
        const config = tabConfigs[currentTab];
        const tableBody = document.getElementById('tableBody');

        if (!entries || entries.length === 0) {
            let emptyMessage = 'No data found';
            let emptyIcon = '🏆';

            switch (currentTab) {
                case 'granters':
                    emptyMessage = 'No wishes have been granted yet in this timeframe. Be the first to make a difference!';
                    break;
                case 'coins':
                    emptyMessage = 'No coins have been earned yet.';
                    break;
                case 'diamonds':
                    emptyMessage = 'No diamonds have been earned yet.';
                    break;
                case 'login_streaks':
                    emptyMessage = 'No login streaks recorded yet.';
                    break;
                case 'xp_levels':
                    emptyMessage = 'No XP earned yet.';
                    break;
                case 'achievements':
                    emptyMessage = 'No achievements unlocked yet.';
                    break;
                case 'challenges':
                    emptyMessage = 'No challenges completed yet.';
                    break;
                case 'fastest_granter':
                    emptyMessage = 'No grant times recorded yet.';
                    break;
                case 'rising_star':
                    emptyMessage = 'No weekly XP earned yet.';
                    break;
            }

            tableBody.innerHTML = `
                <div class="empty-state">
                    <div class="empty-state-icon">${emptyIcon}</div>
                    <h3>${config.title}</h3>
                    <p>${emptyMessage}</p>
                </div>
            `;
            return;
        }

        const entriesHtml = entries.map((entry, index) => {
            const rank = index + 1;
            const rankClass = rank <= 3 ? `rank-${rank}` : '';
            const showCrown = rank === 1 && currentTab === 'granters';

            let rowHtml = `<div class="granter-row ${rankClass}"`;

            // Add hover functionality for granters tab only
            if (currentTab === 'granters') {
                rowHtml += ` onmouseenter="showMiniProfile(event, ${JSON.stringify(entry).replace(/"/g, '&quot;')})" onmouseleave="hideMiniProfile()"`;
            }

            rowHtml += '>';

            // Add cells based on configuration
            config.columns.forEach(col => {
                let cellContent = '';
                let cellClass = col.class;

                switch (col.key) {
                    case 'rank':
                        cellContent = `
                            ${showCrown ? '<div class="crown-icon">👑</div>' : ''}
                            <span class="rank-number">${rank}</span>
                        `;
                        break;
                    case 'granter':
                        cellContent = `
                            <img src="/wp-content/themes/buymywishes/images/avatars/${entry.avatar || 'default.png'}"
                                 alt="${entry.granter_name}"
                                 class="granter-avatar"
                                 onerror="this.src='/wp-content/themes/buymywishes/images/avatars/default.png'">
                            <div class="granter-info">
                                <div class="granter-name">${escapeHtml(entry.granter_name)}</div>
                                <div class="granter-title">${escapeHtml(entry.title)}</div>
                            </div>
                        `;
                        break;
                    case 'achievements':
                        cellContent = `<span class="achievements-count">${formatNumber(entry.achievements)}</span>`;
                        break;
                    case 'wishes_granted':
                        cellContent = `<span class="wishes-count">${formatNumber(entry.wishes_granted)}</span>`;
                        break;
                    case 'total_amount_granted':
                        cellContent = `<span class="total-amount-count">${formatCurrency(entry.total_amount_granted)}</span>`;
                        break;
                    case 'average_grant_amount':
                        cellContent = `<span class="average-count">${formatCurrency(entry.average_grant_amount)}</span>`;
                        break;
                    case 'total_coins_earned':
                        cellContent = `<span class="total-coins-count">${formatNumber(entry.total_coins_earned)} 💰</span>`;
                        break;
                    case 'average_earn':
                        cellContent = `<span class="average-count">${formatCurrency(entry.average_earn)}</span>`;
                        break;
                    case 'name':
                        cellContent = `<span>${escapeHtml(entry.name || entry.display_name || 'Unknown')}</span>`;
                        break;
                    case 'impact_score':
                        cellContent = `<span class="impact-score">${formatNumber(entry.impact_score)}</span>`;
                        break;
                    case 'level':
                        cellContent = `<span class="level-number">${entry.level}</span>`;
                        break;
                    case 'title':
                        cellContent = `<span>${escapeHtml(entry.title)}</span>`;
                        break;
                    case 'current_streak':
                        cellContent = `<span class="streak-count">${formatNumber(entry.current_streak)}</span>`;
                        break;
                    case 'best_streak':
                        cellContent = `<span class="best-count">${formatNumber(entry.best_streak)}</span>`;
                        break;
                    case 'total_logins':
                        cellContent = `<span class="total-count">${formatNumber(entry.total_logins)}</span>`;
                        break;
                    case 'total_xp':
                        cellContent = `<span class="xp-count">${formatNumber(entry.total_xp)}</span>`;
                        break;
                    case 'achievements_completed':
                        cellContent = `<span class="achievements-count">${formatNumber(entry.achievements_completed)}</span>`;
                        break;
                    case 'challenges_completed':
                        cellContent = `<span class="challenges-count">${formatNumber(entry.challenges_completed)}</span>`;
                        break;
                    case 'avg_time':
                        cellContent = `<span class="time-count">${entry.avg_time}s</span>`;
                        break;
                    case 'weekly_xp':
                        cellContent = `<span class="xp-count">${formatNumber(entry.weekly_xp)}</span>`;
                        break;
                    default:
                        cellContent = `<span>${entry[col.key] || 'N/A'}</span>`;
                }

                rowHtml += `<div class="${cellClass}">${cellContent}</div>`;
            });

            rowHtml += '</div>';
            return rowHtml;
        }).join('');

        tableBody.innerHTML = entriesHtml;

        // Handle special features for this tab
        handleSpecialFeatures(data);
    }

    // Show mini profile on hover
    function showMiniProfile(event, entry) {
        // Remove existing mini profile
        hideMiniProfile();

        const granterCell = event.currentTarget.querySelector('.granter-cell');
        const miniProfile = document.createElement('div');
        miniProfile.className = 'mini-profile-hover';

        let statsHtml = '';

        if (currentTab === 'granters') {
            statsHtml = `
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatNumber(entry.impact_score)}</div>
                    <div class="mini-stat-label">Impact Score</div>
                </div>
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatNumber(entry.wishes_granted)}</div>
                    <div class="mini-stat-label">Wishes Granted</div>
                </div>
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatCurrency(entry.total_amount_granted)}</div>
                    <div class="mini-stat-label">Total Granted</div>
                </div>
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatCurrency(entry.average_grant_amount)}</div>
                    <div class="mini-stat-label">Avg per Wish</div>
                </div>
            `;
        } else if (currentTab === 'coins') {
            statsHtml = `
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatNumber(entry.total_coins_earned)} 💰</div>
                    <div class="mini-stat-label">Total Coins</div>
                </div>
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatCurrency(entry.average_earn)}</div>
                    <div class="mini-stat-label">Avg per Wish</div>
                </div>
                <div class="mini-stat">
                    <div class="mini-stat-value">${formatNumber(entry.total_wishes_granted)}</div>
                    <div class="mini-stat-label">Wishes Granted</div>
                </div>
                <div class="mini-stat">
                    <div class="mini-stat-value">#${entry.rank}</div>
                    <div class="mini-stat-label">Rank</div>
                </div>
            `;
        }

        miniProfile.innerHTML = `
            <div class="mini-profile-header">
                <img src="/wp-content/themes/buymywishes/images/avatars/${entry.avatar}"
                     alt="${entry.granter_name}"
                     class="mini-profile-avatar"
                     onerror="this.src='/wp-content/themes/buymywishes/images/avatars/default.png'">
                <div>
                    <div class="mini-profile-name">${escapeHtml(entry.granter_name)}</div>
                    <div class="mini-profile-title">${escapeHtml(entry.title)}</div>
                </div>
            </div>
            <div class="mini-profile-stats">
                ${statsHtml}
            </div>
        `;

        granterCell.appendChild(miniProfile);

        // Position the mini profile
        setTimeout(() => {
            miniProfile.classList.add('active');
        }, 10);

        currentMiniProfile = miniProfile;
    }

    // Hide mini profile
    function hideMiniProfile() {
        if (currentMiniProfile) {
            currentMiniProfile.remove();
            currentMiniProfile = null;
        }
    }

    // Show error state
    function showError(message) {
        const tableBody = document.getElementById('tableBody');
        tableBody.innerHTML = `
            <div class="empty-state">
                <div class="empty-state-icon">⚠️</div>
                <h3>Error Loading Data</h3>
                <p>${message}</p>
                <button class="refresh-btn" onclick="loadCurrentLeaderboard()" style="margin-top: 1rem;">Try Again</button>
            </div>
        `;
    }

    // Utility functions
    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function formatNumber(num) {
        if (num >= 1000000) {
            return Math.floor(num / 1000000) + 'M';
        } else if (num >= 1000) {
            return Math.floor(num / 1000) + 'K';
        }
        return num.toString();
    }

    function formatCurrency(amount) {
        return new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(amount);
    }

    // Share functionality
    function generateLeaderboardImage() {
        const shareText = encodeURIComponent('Check out the BuyMyWishes Leaderboard!');
        const shareUrl = encodeURIComponent(window.location.href);

        if (navigator.share) {
            navigator.share({
                title: 'BuyMyWishes Leaderboard',
                text: 'Check out the leaderboard!',
                url: window.location.href
            });
        } else {
            const twitterUrl = `https://twitter.com/intent/tweet?text=${shareText}&url=${shareUrl}`;
            window.open(twitterUrl, '_blank', 'width=550,height=400');
        }
    }

    // Initialize luxury particles (visual only)
    function initLuxuryParticles() {
        const container = document.getElementById('luxuryParticles');
        if (!container) return;

        for (let i = 0; i < 50; i++) {
            const particle = document.createElement('div');
            particle.className = 'luxury-particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 20 + 's';
            particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
            container.appendChild(particle);
        }
    }

    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        initLuxuryParticles();

        // Initialize UI for default tab
        updateLeaderboardUI();

        // Load initial data for granters tab (which is active by default)
        if (document.querySelector('[data-tab="granters"].active')) {
            loadCurrentLeaderboard();
        }
    });
    </script>
</body>
</html>