:root { --gold: #D4AF37; --white: #ffffff; }
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(104, 62, 0, 0.9) 100%), 
                        url('../assets/images/3kbest/1 (8).JPG');
            background-size: cover; background-position: center;
            font-family: 'Poppins', sans-serif; color: var(--white);
            height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;
        }

        .main-container {
            width: 90vw; height: 85vh; background: rgba(0, 0, 0, 0.4);
            border-radius: 20px; 
            position: relative; 
            padding: 10px;
            backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex; align-items: center; z-index: 10;
        }

        .movie-content { flex: 1; z-index: 10; max-width: 500px; }
        .movie-title { font-family: 'Oswald', sans-serif; font-size: 3.5rem; color: var(--gold); margin-bottom: 10px; }
        
        /* Toggle Login/Register */
        .auth-toggle { display: flex; gap: 20px; margin-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .tab-btn { background: none; border: none; color: rgba(255,255,255,0.5); padding: 10px 0; cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
        .tab-btn.active { color: var(--gold); border-bottom: 2px solid var(--gold); }

        .custom-card-game { background: rgba(0,0,0,0.5); padding: 25px; border-radius: 15px; border: 1px solid var(--gold); }
        .game-input { width: 100%; 
            padding: 12px; margin:
             8px 0; background:
              rgba(255,255,255,0.1);
               border: 1px solid var(--gold);
                color: white;
                 border-radius: 8px;
                  outline: none; }
        

                 .game-input::placeholder {
  color: #ffffff; /* Remplacez par votre couleur */
  opacity: 1;    /* Important pour Firefox qui baisse l'opacité par défaut */
} 
        .gender-select { display: flex; gap: 10px; margin: 10px 0; }
        .gender-btn { flex: 1; padding: 10px; border: 1px solid white; background: none; color: white; border-radius: 8px; cursor: pointer; font-size: 0.8rem; }
        .gender-btn.selected { background: var(--gold); color: black; border-color: var(--gold); font-weight: bold; }

        .btn-submit { background: var(--white); color: black; border: none; padding: 15px; border-radius: 30px; font-weight: bold; cursor: pointer; width: 100%; margin-top: 15px; transition: 0.3s; }
        .btn-submit:hover { background: var(--gold); transform: scale(1.02); }

        .image-container { position: absolute; right: 0; bottom: 0; height: 100%; width: 50%; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; }
        .img-portrait-side { height: 100%; object-fit: contain; mask-image: linear-gradient(to left, black 60%, transparent); -webkit-mask-image: linear-gradient(to left, black 60%, transparent); }

        #form-new { display: block; }
        #form-retry { display: none; }

        /* --- GESTION DE LA RESPONSIVITÉ MOBILE --- */
@media (max-width: 768px) {
    body {
        overflow-y: auto; /* Autoriser le défilement si le contenu dépasse */
        height: auto;
        min-height: 100vh;
        padding: 20px 0;
    }

    .img-portrait-side {
        display: none !important;
    }
    .main-container {
        width: 95vw;
        height: auto;
        min-height: 90vh;
        flex-direction: column; /* On empile tout verticalement */
         padding: 6px !important;
        justify-content: flex-start;
    }

    .movie-content {
        width: 100%;
        max-width: 100%;
        margin-top: 20px;
    }

    .movie-title {
        font-size: 2.2rem; /* Titre plus petit sur mobile */
        text-align: center;
    }

    .auth-toggle {
        justify-content: center;
        gap: 30px;
    }

    .custom-card-game {
        padding: 15px;
    }

    .gender-select {
        flex-wrap: wrap; /* Les boutons Homme/Femme peuvent passer à la ligne si besoin */
    }
     .game-input::placeholder {
  color: #ffffff; /* Remplacez par votre couleur */
  opacity: 1;    /* Important pour Firefox qui baisse l'opacité par défaut */
} 

    /* Gestion de l'image sur mobile */
    .image-container {
        position: fixed; /* L'image reste fixe en fond */
        width: 100%;
        height: 100%;
        opacity: 0.3; /* On réduit l'opacité pour que le texte reste lisible */
        z-index: -1;
    }

    .img-portrait-side {
        display: none;

    }

    .btn-submit {
        padding: 12px;
        font-size: 1rem;
    }
}