body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    background: url('images/fond.png') no-repeat center center fixed;
    background-size: cover;
}

/* Loader */
#loader {
    position: fixed;
    inset: 0;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.loader-bar-container {
    width: 200px;
    height: 10px;
    background: #eee;
    border-radius: 5px;
    overflow: hidden;
}

#loader-progress {
    width: 0%;
    height: 100%;
    background: #ff0000;
    transition: width 0.3s;
}

/* Booster Animation */
.hidden { display: none !important; }

#game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.booster-anim {
    animation: zoomIn 1s ease-out forwards;
    text-align: center;
    cursor: pointer;
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#open-text {
    color: white;
    margin-top: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: fadeIn 0.5s 1.2s forwards;
    opacity: 0;
}

@keyframes fadeIn { to { opacity: 1; } }

/* Cartes */
.card {
    position: absolute;
    width: 280px;
    max-width: 80vw;
    transition: transform 0.5s ease, opacity 0.5s ease;
    touch-action: none; /* Empêche le scroll pendant le swipe */
}

/* Galerie finale */
#final-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    overflow-y: auto;
    height: 100vh;
    width: 100%;
}

#final-gallery img {
    width: 250px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}