/* =====================================================================
   📱 POP-UPS MOBILE - VERSION SÉCURISÉE (NE TOUCHE PAS L'INVENTAIRE)
   ===================================================================== */

@media (max-width: 768px) {
    
    /* ON CIBLE UNIQUEMENT LES POPUPS DE RÉSULTATS */
    #result-duel-overlay, 
    [id*="result-exploration"], 
    [id*="item-result"],
    .duel-popup-mobile {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(5, 5, 15, 0.98) !important;
        z-index: 300000 !important; /* Très haut pour passer devant tout */
        padding: 20px !important;
    }

    /* LA BOITE DE DIALOGUE INTERNE */
    #result-duel-overlay > div,
    [id*="result"] > div {
        width: 100% !important;
        max-width: 310px !important;
        background: #0d0d25 !important;
        border: 2px solid #FFD700 !important;
        border-radius: 20px !important;
        padding: 25px !important;
        text-align: center !important;
        box-shadow: 0 0 50px rgba(0,0,0,1) !important;
    }

    /* ON FORCE L'INVENTAIRE À RESTER NORMAL */
    #inventory, #inventory-container {
        position: relative !important;
        display: block !important;
        background: none !important;
    }

    /* =================================================================
        🍞 TOASTS — POSITIONNEMENT ET EMPILAGE DYNAMIQUE
        
        Sidebar mobile = ~80px en haut.
        Toast rose (.space-toast)  → top: 90px  (Base)
        Toast vert (#questToast)   → top: 155px (Base quête)
        ================================================================= */

    /* --- TOAST ROSE (Générique) --- */
    .space-toast {
        top: 90px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        font-size: 0.85rem !important;
        padding: 12px 18px !important;
        z-index: 310000 !important;
        transition: top 0.4s ease-in-out !important;
    }

    /* 🛡️ LOGIQUE D'EMPILAGE : Si plusieurs toasts sont présents */
    .space-toast ~ .space-toast {
        top: 155px !important;
    }

    .space-toast ~ .space-toast ~ .space-toast {
        top: 220px !important;
    }

    /* --- TOAST VERT (Quêtes) --- */
    /* On assure qu'il commence au palier 2 ou s'adapte à l'empilage */
    .space-toast[style*="#2ecc71"],
    .space-toast[style*="2ecc71"] {
        top: 155px !important;
    }

    /* Si une quête arrive après un autre toast, elle descend d'un cran supplémentaire */
    .space-toast + .space-toast[style*="2ecc71"],
    .space-toast + #questToast {
        top: 155px !important;
    }
    
    .space-toast ~ .space-toast[style*="2ecc71"],
    .space-toast ~ #questToast {
        top: 220px !important;
    }

    #questToast {
        top: 155px !important;
        left: 10px !important;
        right: 10px !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        justify-content: center !important;
        font-size: 0.85rem !important;
        padding: 12px 18px !important;
        z-index: 310001 !important;
        animation: slideDownQuestMobile 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    @keyframes slideDownQuestMobile {
        from { top: -100px; opacity: 0; transform: scale(0.8); }
        to   { top: 155px; opacity: 1; transform: scale(1); }
    }
}

/* =====================================================================
   📱 TRÈS PETIT MOBILE (< 500px)
   ===================================================================== */

@media (max-width: 500px) {

    .space-toast {
        top: 78px !important;
        font-size: 0.78rem !important;
        padding: 10px 14px !important;
    }

    /* Empilage Mini */
    .space-toast ~ .space-toast {
        top: 138px !important;
    }

    .space-toast ~ .space-toast ~ .space-toast {
        top: 198px !important;
    }

    .space-toast[style*="#2ecc71"],
    .space-toast[style*="2ecc71"],
    #questToast {
        top: 138px !important;
    }

    #questToast {
        animation: slideDownQuestMini 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    @keyframes slideDownQuestMini {
        from { top: -100px; opacity: 0; transform: scale(0.8); }
        to   { top: 138px; opacity: 1; transform: scale(1); }
    }
}

/* =====================================================================
   📱 TABLETTE (< 1100px, mais > 768px)
   ===================================================================== */

@media (min-width: 769px) and (max-width: 1100px) {

    .space-toast {
        top: 30px !important;
    }

    /* Empilage Tablette */
    .space-toast ~ .space-toast {
        top: 90px !important;
    }

    .space-toast ~ .space-toast ~ .space-toast {
        top: 150px !important;
    }

    .space-toast[style*="#2ecc71"],
    .space-toast[style*="2ecc71"],
    #questToast {
        top: 90px !important;
    }

    #questToast {
        animation: slideDownQuestTablet 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    @keyframes slideDownQuestTablet {
        from { top: -100px; opacity: 0; transform: translateX(-50%) scale(0.8); }
        to   { top: 90px;  opacity: 1; transform: translateX(-50%) scale(1); }
    }
}