@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;900&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #E63984; /* Couleur de secours */
    background: radial-gradient(ellipse at center top, /* VOTRE DÉGRADÉ RADIAL */
        #FF69B4,
        #E63984,
        #B32B8A,
        #5C1F8B
    );
    background-color: #6E1473; /* Fallback */
    margin: 0;
    color: white;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

.background-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; 
    overflow: hidden;
}

/* Styles pour les transitions douces des écrans */
.ecran {
    opacity: 0;
    visibility: hidden;
    display: flex; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; 
    box-sizing: border-box;
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s;
    z-index: 1; 
}

.ecran.actif {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease-in-out;
    z-index: 10; 
}

#ecran-bienvenue,
#ecran-victoire,
#ecran-perdu {
    background-color: rgba(0, 0, 0, 0.35); 
    backdrop-filter: blur(4px);          
    z-index: 20; 
}
/* Fin des styles pour les transitions */

.ecran-contenu { 
    background-color: rgba(190, 64, 137, 0.85); 
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 450px;
    width: 90%;
    text-align: center;
}

.ecran-logo {
    max-width: 100px;
    margin-bottom: 20px;
}

#ecran-bienvenue .ecran-contenu h1,
.game-container header h1 {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5em;
    margin: 0 auto 5px auto;
    font-weight: 700;  
    letter-spacing: 1px;
    color: #fff;  
    text-transform: uppercase;  
}

#ecran-bienvenue .ecran-contenu h2.main-title-highlight,
.game-container header h2.main-title-highlight {
    font-family: 'Corinthia', cursive;
    font-size: 3em;
    margin: 0 auto 15px auto;
    font-weight: 700; 
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); 
}

.ecran-texte-intro {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.1em;
    margin: 15px 0 25px;
    line-height: 1.6;
}

#formulaire-leads-placeholder {
    margin: 20px 0;
    padding: 15px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 10px;
    font-style: italic;
}

.bouton-ecran {
    background-color: #ffdd00;
    color: #d62876;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    margin-top: 15px;
    box-shadow: 0 4px 0px #cca300;
    transition: all 0.1s ease;
    text-transform: uppercase;
}
.bouton-ecran:active {
    box-shadow: 0 1px 0px #cca300;
    transform: translateY(3px);
}
.bouton-ecran + .bouton-ecran {
    margin-left: 10px;
}

.titre-ecran-resultat { 
    font-family: 'Corinthia', cursive; 
    font-size: 3.5em; 
    margin-bottom: 10px;
    text-shadow: 0 0 8px rgba(255,255,255,0.7);
}
.titre-ecran-resultat.gagnant { color: #ffdd00; }
.titre-ecran-resultat.perdant { color: #f0f0f0; }

.texte-ecran-resultat {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2em;
    margin-bottom: 20px;
}
.placeholder-animation-victoire, .placeholder-animation-perdu {
    font-size: 2.5em;
    margin-bottom: 20px;
}

#ecran-jeu.actif { 
    /* z-index: 10; */
}

.game-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;  
}

.game-container {
    background-color: rgba(190, 64, 137, 0.6);
    padding: 25px;
    border-radius: 20px; 
    width: 100%;  
    max-width: 400px; 
    box-sizing: border-box;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

/* VOS STYLES D'ORIGINE POUR LE CADRE DE LA MACHINE À SOUS 100% CSS */
.slot-machine-frame { 
    background-color: #dd1a7c;
    border-radius: 30px;
    padding: 15px;
    margin: 20px auto;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.3);
    border: 4px solid #f7b2d2;
}

.slot-machine { 
    display: flex;
    justify-content: space-around; /* Espacera les .reel */
    align-items: center;
    background-color: #ad1460; 
    padding: 10px;            
    border-radius: 20px;      
}
/* FIN DES STYLES D'ORIGINE DU CADRE */


/* STYLES POUR LES ROULEAUX AVEC EFFET STRIP (translateY) */
.reel { 
    width: 80px;  /* Largeur de la fenêtre du rouleau */
    height: 120px; /* Hauteur de la fenêtre du rouleau (sera IMAGE_HEIGHT en JS) */
    background-color: white;  /* Fond visible si problème ou si images plus petites */
    border: 2px solid #7c3f98; /* Votre bordure d'origine */
    /* margin: 0 4px; */ /* Le space-around sur .slot-machine s'en charge */
    overflow: hidden;   /* INDISPENSABLE pour l'effet de défilement et l'arrondi */
    border-radius: 10px; /* Votre arrondi d'origine */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2); /* Votre ombre interne d'origine */
    position: relative; /* Contexte pour le .reel-strip si besoin (non critique ici) */
}

.reel-strip {
    width: 100%; /* Prend la largeur du .reel parent */
    /* La position (translateY) et la transition seront gérées par JavaScript et CSS lors du spin */
}

.reel-strip img { 
    display: block; /* Empile bien les images et permet width/height corrects */
    width: 100%;    /* L'image prendra toute la largeur du .reel-strip (et donc du .reel) */
    height: 120px;   /* HAUTEUR D'UNE IMAGE INDIVIDUELLE (doit être IMAGE_HEIGHT en JS) */
    object-fit: contain; /* Affiche l'image entière (avec son fond dégradé) sans la déformer.
                            Si l'image a un ratio différent de 80x120, 'contain' la centrera
                            et ajoutera des bandes (transparentes si l'image l'est, ou de la couleur de fond
                            de l'image si elle en a un). */
}
/* FIN DES STYLES POUR LES ROULEAUX AVEC EFFET STRIP */


.info-essais {
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    margin-top: 15px; 
    margin-bottom: 10px;
    font-weight: 600;
}

#playButton {
    background-color: #ffdd00;
    color: #d62876;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.6em;
    font-weight: 700;
    padding: 15px 35px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    margin: 10px 0;
    box-shadow: 0 6px 0px #cca300, 0 8px 15px rgba(0,0,0,0.3);
    transition: all 0.1s ease;
    text-transform: uppercase;
}
#playButton:disabled {
    background-color: #aaa;
    color: #777;
    box-shadow: 0 6px 0px #888;
    cursor: not-allowed;
}
#playButton:active:not(:disabled) {
    box-shadow: 0 2px 0px #cca300, 0 4px 8px rgba(0,0,0,0.3);
    transform: translateY(4px);
}

.promo-text p {
    margin: 5px 0;
    font-weight: bold;
    font-size: 1em;
}
.promo-text p:last-child {
    font-size: 1.2em;
    color: #ffdd00;
}

footer {
    margin-top: 20px;
}
#madoraLogo {
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
}

#resultMessage {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: bold;
    min-height: 25px;
}

/* Styles pour les ÉTOILES */
@keyframes twinkle {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(0.6); opacity: 0.2; }
}
.star {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: twinkle 4s infinite ease-in-out;
}
/* ... (vos définitions de .star1 à .star12) ... */
.star1 { top: 10%; left: 15%; width: 3px; height: 3px; animation-delay: 0s; }
.star2 { top: 20%; left: 80%; width: 5px; height: 5px; animation-delay: -0.7s; }
.star3 { top: 75%; left: 10%; width: 2px; height: 2px; animation-delay: -1.2s; }
.star4 { top: 85%; left: 70%; width: 4px; height: 4px; animation-delay: -2.5s; }
.star5 { top: 40%; left: 45%; width: 3px; height: 3px; animation-delay: -3.1s; }
.star6 { top: 5%;  left: 50%; width: 2px; height: 2px; animation-delay: -0.3s; }
.star7 { top: 55%; left: 90%; width: 4px; height: 4px; animation-delay: -1.8s; }
.star8 { top: 90%; left: 30%; width: 3px; height: 3px; animation-delay: -3.5s; }
.star9 { top: 15%; left: 35%; width: 2px; height: 2px; animation-delay: -1.5s; }
.star10 { top: 60%; left: 55%; width: 4px; height: 4px; animation-delay: -2.2s; }
.star11 { top: 30%; left: 5%; width: 3px; height: 3px; animation-delay: -0.9s; }
.star12 { top: 90%; left: 85%; width: 2px; height: 2px; animation-delay: -3.8s; }