 
        @import url('./css/clash-display.css');
body {
    margin: 0;
    font-family: 'ClashDisplay-Bold', Arial, sans-serif;
    background: linear-gradient(135deg, #ff007a, #E32929, #ff007a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Ajuste la hauteur minimale pour l'extension */
    position: relative;
}

.container {
    
    width: calc(100% - 40px);
    max-width: 600px;
    display: flex;
    flex-direction: column;
    margin-top: 20px; /* Réduction pour éviter de couper le bouton */
    overflow-y: auto; /* Permet le défilement si nécessaire */
}
        .back {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 18px;
            color: #fffa;
            text-decoration: none;
            font-family: 'ClashDisplay-SemiBold', Arial, sans-serif;
            z-index: 1; /* Ensures back button is always on top */
                                opacity: 0.8;
        }
                                
        .black-view {
            border-radius: 32px 32px 0 0;
            padding: 16px 8px;
            position: relative;
            margin-top: 60px;
        }
                                
        .background {
          background-color: <?php echo htmlspecialchars($_SESSION['Create_Riddle_HexColor']) ?? '#000F'; ?>;
          border-radius: 32px 32px 0 0;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -5;
          transition: background-color 1s ease; /* Transition fluide pour le changement de couleur */
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 4.5px solid white;
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            object-fit: cover;
        }
        .username {
            color: #fffa;
            position: relative;
            margin-left: 75px;
            margin-top: 8px;
            margin-right: 8px;
            font-family: 'ClashDisplay-SemiBold', Arial, sans-serif;
            font-size: 18px;
            white-space: normal; /* Retour à la ligne automatique */
             word-wrap: break-word; /* Gérer les mots trop longs */
             overflow-wrap: break-word; /* S'assure que les longues chaînes sont cassées */
        }
        .question {
            position: relative;
            margin-left: 80px;
            margin-right: 8px;
            margin-top: 5px;
            font-family: 'ClashDisplay-Bold', Arial, sans-serif;
            font-size: 22px;
            
            /* Gestion des retours à la ligne */
            white-space: normal; /* Permet le retour à la ligne */
            word-wrap: break-word; /* Coupe les mots trop longs */
            overflow-wrap: break-word; /* Alternative pour une meilleure compatibilité */
            
            /* Justification et césure */
            text-align: left; /* Justifie le texte à gauche (peut être 'justify' si besoin) */
            hyphens: auto; /* Ajoute un '-' pour les mots coupés */
            
            /* Espacement entre les lignes */
            line-height: 1.2; /* Définit l'interligne, similaire à lineSpacing */
            
            /* Optionnel : Ajuster l'espacement des lettres si besoin */
            letter-spacing: 0px;
        }

        .white-view {
            background-color: #fff;
            border-radius: 0 0 32px 32px;
            padding: 0;
            text-align: center;
            color: #000;
        }
        .answer {
            background-color: #fff;
            border: 2px solid #000;
            height: 45px;
            margin: 18px 16px;
            border-radius: 24px;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
            font-family: 'ClashDisplay-SemiBold', Arial, sans-serif;
            font-size: 16px;
        }
                                
            .lottie-container {
              position: absolute; /* Keep this line */
              top: 50%; /* Add this line */
              left: 50%; /* Add this line */
              transform: translate(-50%, -50%); /* Add this line */
              width: 70%; /* Adjust width as desired */
              height: 70%; /* Adjust height as desired */
              pointer-events: none; /* Keep this line */
              z-index: 1; /* Keep this line */
              display: none; /* Keep this line */
            }

                                
        .answer.correct {
            background-color: rgb(200, 255, 196);
            color: rgb(31, 180, 20);
            border: 2px solid #000;
        }
        .answer.incorrect {
            background-color: rgb(247, 150, 150);
            color: rgb(221, 47, 47);
            border: 2px solid #000;
        }
        .answer.disabled {
            pointer-events: none;
        }
        .answer.correct::after {
            content: ' ';
            margin-left: 5px;
            font-size: 12px;
        }
        .answer.incorrect::after {
            content: ' ';
            margin-left: 5px;
            font-size: 12px;
        }
                                
        /* Riddle Counter */
        .riddle-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .riddle-counter {
           
            font-family: 'ClashDisplay-Bold', Arial, sans-serif;
            font-size: 20.5px;
            opacity: 1;
            transition: opacity 0.3s ease;
            text-align: center;
        }

        .button-container {
            display: flex;
            justify-content: center;
            width: 100%;
        }

        .button {
            background: #000;
            color: white;
            font-size: 22px;
            width: 100%;
            padding: 15px;
            border-radius: 36px;
            height: 72px;
            border: none;
            cursor: pointer;
            margin-top: 20px;
            font-family: 'ClashDisplay-SemiBold', Arial, sans-serif;
            margin-bottom: 20px;
            animation: shakeVertical 0.5s infinite; /* Animation appliquée ici */
        }
        .notification {
              position: absolute;
              top: 10px; /* Initially hidden above the viewport */
              left: 20px;
              right: 20px;
              font-size: 22px;
              font-family: 'ClashDisplay-Bold', Arial, sans-serif;
              padding: 20px 10px; /* Padding adjustments */
              border-radius: 10px;
              transition: opacity 0.5s ease, transform 0.5s ease;
              opacity: 0;
              z-index: 3;
              text-align: center;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              transform: translateY(-100%);
            }

            .countdownTimer {
                position: absolute;
                margin-top: 0px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 26px;
                font-family: 'ClashDisplay-Bold', Arial, sans-serif;
                color: #000;
                background-color: white;  /* Fond blanc */
                border-radius: 50%;  /* Pour créer un cercle parfait */
                width: 80px;  /* Largeur fixe du cercle */
                height: 80px;  /* Hauteur fixe du cercle */
                display: flex;  /* Utiliser flexbox pour centrer le texte */
                align-items: center;  /* Centrer le texte verticalement */
                justify-content: center;  /* Centrer le texte horizontalement */
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Ombre douce pour ressortir */
                text-align: center;  /* Centrer le texte */
            }


            .notification.show {
              opacity: 1;
              transform: translateY(0); /* Animate to visible position */
            }
              .notification.correct {
                  background-color: rgb(200, 255, 196);
                  color: rgb(31, 180, 20);
              }

              .notification.incorrect {
                  background-color: rgb(247, 150, 150);
                  color: rgb(221, 47, 47);
              }
                                
            .notification.anonymous {
                background-color: rgb(255, 255, 255);
                color: rgb(0, 0, 0);
            }
                                
            .notification.hide {
                opacity: 0;
                transform: translateY(-100%);
                transition: opacity 0.5s ease, transform 0.5s ease;
            }
                                
            /* Animation de vibration */
            @keyframes shakeVertical {
              0% { transform: translateY(-5px); }
              25% { transform: translateY(5px); }
              50% { transform: translateY(-5px); }
              75% { transform: translateY(5px); }
              100% { transform: translateY(0); }
            }

            .transition-text {
                box-sizing: border-box;
                background: #ffff;
                margin-top: 5px;
                padding: 20px 10px; /* Padding adjustments */
                border-radius: 0px;
                font-size: 26px;
                text-decoration: underline;
                font-family: 'ClashDisplay-Bold', Arial, sans-serif; /* ClashDisplay-SemiBold */
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 20px;
                align-items: center; /* Alignement vertical */
                color: #000; /* Couleur du texte */
                cursor: pointer; /* Indicateur de clic */
                transition: color 0.3s ease; /* Transition pour l'effet au survol */
            }


            /* Effet au survol */
            .transition-text:hover {
                color: #000; /* Couleur plus foncée au survol */
            }
                                
            .fade-in {
                animation: fadeIn 1s ease-in forwards;
            }

            .fade-out {
                animation: fadeOut 1s ease-out forwards;
            }

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

            @keyframes fadeOut {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }



                                
                                
    