/* ==============================================
   GESTION CENTRALISÉE DES Z-INDEX ET POSITIONS
   ============================================== */

/* Hiérarchie des z-index (du plus bas au plus haut):
   - Background/Stars: 0
   - Content: 1-99
   - Navigation: 100
   - HUD Éléments: 1000-1999
   - Boutons flottants: 9000-9999
   - Modals: 10000-19999
   - Notifications critiques: 100000+
   - Notifications toast: 999999
*/

/* ==================== NAVIGATION ==================== */
.nav-bar {
    z-index: 100 !important;
}

/* ==================== HUD SYSTÈME ==================== */
/* Organisation spatiale des HUDs pour éviter les superpositions */

/* HUD Principal - Coins & XP (en haut à droite) */
[class*="coins-display"],
[class*="xp-display"],
.economy-hud,
.xp-hud {
    position: fixed !important;
    top: 80px !important; /* Sous la nav-bar */
    right: 20px !important;
    z-index: 1500 !important;
}

/* Event Banner (en haut, centré) */
[class*="event-banner"],
.event-active-banner {
    position: fixed !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1400 !important;
}

/* Streak Display (en haut à gauche) */
[class*="streak-display"],
.streak-hud {
    position: fixed !important;
    top: 80px !important;
    left: 20px !important;
    z-index: 1300 !important;
}

/* Favorites Button (sur les cartes de jeux) */
[class*="favorite-btn"],
.favorites-star {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1200 !important;
}

/* Stats/Progress Widgets (côté gauche) */
[class*="stats-widget"],
.stats-display {
    position: fixed !important;
    left: 20px !important;
    bottom: 100px !important;
    z-index: 1100 !important;
}

/* ==================== BOUTONS FLOTTANTS ==================== */
/* Bouton Fullscreen */
.fullscreen-btn {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important;
}

/* Bouton Auto-XP */
[class*="auto-xp-btn"],
.auto-xp-toggle {
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    z-index: 9998 !important;
}

/* Bouton Universal Score Tracker */
[class*="score-tracker-btn"],
.universal-score-btn {
    position: fixed !important;
    bottom: 170px !important;
    right: 30px !important;
    z-index: 9997 !important;
}

/* ==================== MODALS ==================== */
/* Overlay de modal (fond sombre) */
[class*="modal-overlay"],
[style*="rgba(0,0,0,0.9)"][style*="position: fixed"] {
    z-index: 10000 !important;
}

/* Contenu des modals */
.modal-content,
[class*="modal"][class*="content"],
.settings-panel,
.leaderboard-panel,
.shop-panel,
.achievement-panel,
.challenge-panel,
.stats-panel,
.social-panel,
.customization-panel {
    z-index: 10001 !important;
}

/* ==================== NOTIFICATIONS ==================== */
/* Notifications de level up / achievement unlock */
[class*="level-up"],
[class*="achievement-unlock"],
.level-notification,
.achievement-notification {
    z-index: 100000 !important;
}

/* Badge unlock notifications */
[class*="badge-unlock"],
.badge-notification {
    z-index: 100001 !important;
}

/* Event notifications */
[class*="event-notification"] {
    z-index: 100002 !important;
}

/* Toast notifications (le plus haut) */
.notification-container,
[class*="toast"],
.notification-toast {
    position: fixed !important;
    top: 100px !important;
    right: 20px !important;
    z-index: 999999 !important;
    max-width: 400px !important;
}

/* ==================== FOOTER ==================== */
.main-footer {
    position: relative !important;
    z-index: 50 !important;
    margin-top: 100px !important; /* Espace pour les HUDs flottants */
}

/* ==================== RESPONSIVE ADJUSTMENTS ==================== */
@media (max-width: 768px) {
    /* Sur mobile, stack les HUDs verticalement */
    [class*="coins-display"],
    [class*="xp-display"] {
        top: 70px !important;
        right: 10px !important;
        font-size: 0.9rem !important;
    }
    
    [class*="streak-display"] {
        top: 130px !important;
        left: 10px !important;
    }
    
    [class*="event-banner"] {
        top: 70px !important;
        font-size: 0.85rem !important;
        max-width: 80% !important;
    }
    
    /* Boutons flottants plus petits */
    .fullscreen-btn,
    [class*="auto-xp-btn"],
    [class*="score-tracker-btn"] {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.2rem !important;
    }
    
    /* Notifications moins larges */
    .notification-container {
        max-width: 90% !important;
        right: 5% !important;
    }
}

/* ==================== ANTI-OVERLAP UTILITIES ==================== */
/* Classe pour espacer le contenu du haut */
.has-top-hud {
    padding-top: 80px !important;
}

/* Classe pour espacer le contenu du bas */
.has-bottom-hud {
    padding-bottom: 150px !important;
}

/* Empêcher les HUDs de bloquer les clics sur le contenu */
[class*="-hud"],
[class*="-display"]:not(button) {
    pointer-events: none !important;
}

/* Mais garder les clics sur les boutons dans les HUDs */
[class*="-hud"] button,
[class*="-hud"] a,
[class*="-display"] button,
[class*="-display"] a {
    pointer-events: auto !important;
}

/* ==================== ANIMATIONS FLUIDES ==================== */
/* Transition douce pour tous les éléments fixed */
[style*="position: fixed"] {
    transition: top 0.3s ease, right 0.3s ease, left 0.3s ease, bottom 0.3s ease, transform 0.3s ease !important;
}

/* ==================== DEBUG MODE (décommenter pour voir les zones) ==================== */
/*
[class*="-hud"],
[class*="-display"],
.modal-overlay,
.notification-container {
    outline: 2px solid red !important;
    background: rgba(255,0,0,0.1) !important;
}
*/