/* --- EFFET 3D ET CONTENEURS --- */
.perspective-1000 {
    perspective: 1000px;
}
.preserve-3d {
    transform-style: preserve-3d;
}
.backface-hidden {
    backface-visibility: hidden;
}

/* --- LE CONTENEUR DU BOOSTER (Taille réelle sur la page) --- */
.booster-container {
    perspective: 1000px;
    display: inline-block;
    transform-style: preserve-3d;
    position: relative; 
    padding: 10px;      
}

/* --- LA HITBOX INVISIBLE DE DÉTECTION ÉLARGIE --- */
.booster-hitbox {
    position: absolute;
    top: -50px;
    bottom: -50px;
    left: -50px;
    right: -50px;
    z-index: 10;        
    cursor: pointer;
}

/* --- L'IMAGE DU BOOSTER --- */
.booster-pack-asset {
    width: 180px;         
    height: 340px;        
    object-fit: fill;     
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    pointer-events: none; 
    transition: box-shadow 0.3s ease; 
}

.booster-pack-asset:hover {
    box-shadow: 0 50px 50px rgba(0, 0, 0, 0.7);
}


/* --- ANIMATION VIBRATION BOOSTER --- */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(0px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(2px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(0deg); }
}
.booster-shake {
    animation: shake 0.5s infinite;
}

/* --- ROTATION DES CARTES (FLIP) --- */
.rotate-y-180 {
    transform: rotateY(180deg);
}

/* --- HALOS DE RARETÉ OFFICIELS HAUTE PUISSANCE --- */
.glow-common {
    box-shadow: 0 0 20px 4px rgba(107, 53, 17, 0.6), 0 0 40px 15px rgba(107, 53, 17, 0.3);
}
.glow-uncommon {
    box-shadow: 0 0 25px 6px rgba(200, 200, 200, 0.7), 0 0 50px 20px rgba(150, 150, 150, 0.3);
}
.glow-rare {
    box-shadow: 0 0 35px 8px rgba(205, 187, 59, 0.9), 0 0 70px 25px rgba(205, 187, 59, 0.4);
}
.glow-legendary {
    box-shadow: 0 0 45px 12px rgba(58, 175, 222, 1), 0 0 90px 35px rgba(58, 175, 222, 0.5);
}
.glow-special {
    box-shadow: 0 0 30px 6px rgba(255, 255, 255, 0.6), 0 0 60px 20px rgba(168, 85, 247, 0.4);
}

/* --- LE REVEAL MODAL (Plein écran, fond flouté) --- */
.reveal-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(3, 7, 18, 0.95) !important; 
    backdrop-filter: blur(10px) !important;             
    z-index: 50 !important;                            
    display: none; 
    flex-direction: column !important;                 
    align-items: center !important;                    
    justify-content: center !important;                
}

/* --- CONTENEUR CENTRAL DE LA CARTE --- */
.reveal-card-stage {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.card-metadata-panel {
    width: 100% !important;
    margin-top: 1.5rem !important;
    text-align: center !important;
}

/* --- OVERLAY HYPERESPACE --- */
.hyperspace-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #030712 !important;
    z-index: 100 !important; 
    pointer-events: none !important;
    display: none; 
    opacity: 0;
    transition: opacity 0.3s ease-in-out !important; 
}

#hyperspace-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* --- STRUCTURE 3D ULTRA-STABLE --- */
.reveal-card-item {
    perspective: 1200px !important; 
}

/* C'est ce conteneur global qui va TOURNER. Tout ce qui est dedans tourne avec ! */
.card-3d-container {
    position: relative !important;
    transform-style: preserve-3d !important;
    display: inline-block !important;
    will-change: transform !important;
}

.card-reveal-asset {
    display: block !important;
    pointer-events: none !important; /* L'image ignore la souris */
}

/* LA HITBOX PARFAITE : Collée à plat sur le conteneur 3D, elle tourne AVEC lui */
.card-hitbox {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 40 !important;
    cursor: pointer !important;
}