/* ============================================================================ */
/* FANTASTIKA LUXURY - PRESTIGE BLACK & GOLD EDITION (FULL SITE) */
/* ============================================================================ */

:root {
    /* --- PALETTE OR SUPRÊME --- */
    --gold-100: #fffbeb;
    --gold-300: #fcd34d;
    --gold-400: #fbbf24;
    --gold-500: #d4af37; /* Or Métallique Standard */
    --gold-600: #b45309; /* Bronze Profond */
    
    /* --- NOIRS --- */
    --void-black: #000000;
    --luxury-black: #050505;
    --panel-bg: rgba(5, 5, 5, 0.75); /* Noir vitré */
    
    /* --- EFFETS --- */
    --gold-glow: 0 0 25px rgba(212, 175, 55, 0.2);
    --gold-border: 1px solid rgba(212, 175, 55, 0.25);
}

/* 1. FOND D'ÉCRAN GLOBAL (Écrase le bleu) */
html, body {
    background: radial-gradient(circle at 50% -20%, #291d00 0%, #050505 40%, #000000 100%) !important;
    background-attachment: fixed !important;
    color: #e5e5e5 !important;
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    min-height: 100vh !important;
}

/* 2. TITRES ET TEXTES (Transforme le blanc/bleu en Or) */
h1, h2, h3, .main-title, .section-title, .text-xl, .font-bold {
    color: var(--gold-100) !important;
}

/* Le titre "Mes Panels de Jeu" et autres gros titres en dégradé Or */
h2, .main-title, .text-2xl, .text-3xl {
    background: linear-gradient(to bottom, #fff 0%, #d4af37 50%, #b45309 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

/* Sous-titres et descriptions */
p, span, .text-gray-400, .text-slate-400 {
    color: #888 !important;
}

/* 3. TOUS LES CADRES / CARTES (Haut et Bas) */
/* On cible large pour attraper les stats du haut ET les jeux du bas */
.pro-panel, 
.card, 
.bg-slate-800, 
.bg-gray-900, 
[class*="bg-slate-"], 
[class*="bg-gray-"] {
    background: var(--panel-bg) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important; /* Bordure Or subtile */
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(20px) !important;
    transition: all 0.3s ease !important;
}

/* Effet au survol des cartes */
.pro-panel:hover, .card:hover, [class*="bg-slate-"]:hover {
    border-color: var(--gold-500) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 20px rgba(212, 175, 55, 0.15) !important;
}

/* 4. LES CARRÉS DE COULEUR DERRIÈRE LES ICÔNES (Haut) */
/* Cible les div qui ont des fonds colorés (bleu, violet, rose) pour les mettre en Or/Noir */
.rounded-lg, .rounded-xl, .rounded-full {
    /* Si c'est un petit conteneur d'icône */
    box-shadow: none !important; 
}

/* On force les petits carrés d'icônes à devenir Or/Noir */
[class*="bg-cyan-"], [class*="bg-blue-"], [class*="bg-purple-"], [class*="bg-pink-"] {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(0,0,0,0.8)) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Les Icones elles-mêmes */
svg, i, .fa, .fas, .far {
    color: var(--gold-300) !important;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

/* 5. TEXTES DE STATUT ("5", "15", "ACTIF", "EN DIRECT") */
.text-cyan-400, .text-blue-400, .text-purple-400, .text-pink-400 {
    color: var(--gold-300) !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
    font-family: 'Orbitron', monospace !important;
}

/* Le point vert "Actif" peut rester vert ou passer en Or selon ton goût. 
   Ici je le passe en Or pour le full theme. */
.text-green-400 {
    color: #4ade80 !important; /* On garde le vert pour "Actif" pour la sémantique, ou met var(--gold-300) */
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.3) !important;
}

/* 6. IMAGES DES JEUX (GTA, Fortnite, Chat...) */
/* On ajoute un cadre doré autour des images si elles en ont pas */
img {
    border-radius: 12px !important;
    transition: transform 0.5s ease !important;
}

/* Assombrir légèrement les images pour qu'elles brillent au survol */
.pro-panel img, .card img {
    filter: brightness(0.8) contrast(1.1) !important;
}

.pro-panel:hover img, .card:hover img {
    filter: brightness(1) contrast(1.2) !important;
    transform: scale(1.02) !important;
}

/* 7. NAVIGATION & BOUTONS */
nav {
    background: rgba(0,0,0,0.9) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
}

button, .btn {
    background: linear-gradient(to bottom, #1a1a1a, #000) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--gold-300) !important;
    text-transform: uppercase !important;
}

button:hover, .btn:hover {
    border-color: var(--gold-500) !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2) !important;
    color: #fff !important;
}

/* 8. SCROLLBAR (Barre de défilement) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: var(--gold-600);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold-500);
}

/* ============================================================================ */
/* LUXURY CUSTOM CURSOR - GLOBAL */
/* ============================================================================ */

#luxuryCursor {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 2px solid var(--gold-500);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 
                inset 0 0 20px rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(5px);
}

#luxuryCursor.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}

#luxuryCursor::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: var(--gold-300);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
}

/* Cacher le curseur par défaut sur TOUS les éléments */
body.custom-cursor-active,
body.custom-cursor-active *,
body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active [role="button"],
body.custom-cursor-active .cursor-pointer,
body.custom-cursor-active .group,
body.custom-cursor-active input,
body.custom-cursor-active textarea,
body.custom-cursor-active select,
body.custom-cursor-active .card,
body.custom-cursor-active .pro-panel,
body.custom-cursor-active .pro-btn {
    cursor: none !important;
}