@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;
opacity: 1;

}

.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 */
opacity: 0;
transition: opacity 0.5s ease-in-out; /* Animation fluide */
}
.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: 24px 24px;
position: relative;
margin-top: 60px;
}
                    
.background {
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: 40px;
height: 40px;
border-radius: 50%;
border: 2.5px solid white;
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
object-fit: cover;
}
.username {
color: #fffa;
position: relative;
margin-left: 48px;
margin-top: 0px;
margin-right: 6px;
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: 52px;
margin-right: 1px;
margin-top: 2px;
font-family: 'ClashDisplay-Bold', Arial, sans-serif;
font-size: 18px;

/* 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: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 0 0 32px 32px;
  padding: 0;
  text-align: center;
  color: #000;
  box-shadow:
    inset 0 -6px 12px rgba(255, 255, 255, 0.4),  /* bas uniquement */
    inset 6px 0 12px rgba(255, 255, 255, 0.2),   /* gauche */
    inset -6px 0 12px rgba(255, 255, 255, 0.2);  /* droite */
}

                            
.answer {
background-color: transparent;
border: 1.5px 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: 1.5px solid #000;
}
.answer.incorrect {
background-color: rgb(247, 150, 150);
color: rgb(221, 47, 47);
border: 1.5px 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;
    top: 10px; /* Distance depuis le haut */
    right: 10px; /* Ajoute un espace de 10px depuis le bord droit */
    font-size: 17px;
    font-family: 'ClashDisplay-Bold', Arial, sans-serif;
    color: #000;
    background-color: white;  /* Fond blanc */
    border-radius: 50%;  /* Pour un cercle parfait */
    width: 40px;  /* Largeur fixe */
    height: 40px;  /* Hauteur fixe */
    display: flex;  /* Utiliser flexbox pour centrer */
    align-items: center;  /* Centrer le texte verticalement */
    justify-content: center;  /* Centrer le texte horizontalement */
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1);  /* Ombre douce */
    text-align: center;
    z-index: 1000; /* Toujours au-dessus */
}


.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;
    }
}