html {
  width: 100%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  box-sizing: border-box;
}

body {
  display: block;
}

/*
 * Écran board : au moins la hauteur de la fenêtre (projecteur / F11).
 * Si la fenêtre est basse (barre d’adresse, pas plein écran), la page ou l’écran peut défiler.
 */
.board-screen {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grand viewport : comportement « plein écran » sans scroll de page */
@media (min-height: 720px) {
  body {
    height: 100dvh;
    overflow: hidden;
  }

  .board-screen {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
}

#init {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(8px, 2vh, 20px);
}

#init h1 {
  color: blue;
  font-size: 6vw;
  text-align: center;
  width: 70%; /* Le texte prend 70% de la largeur de l'écran */
}

#init #qrcode {
  display: flex;
  justify-content: space-between;
  width: 60%;
  align-items: center;

}

#init #qrcode-div img {
  width: 15vw;

}

#init #qrcode h2{
  color: blue;
  font-size: 4vw;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

#ready {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: clamp(6px, 1.5vh, 16px);
}

#ready h1 {
  color: blue;
  font-size: clamp(1rem, 3vw, 2rem);
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
  flex-shrink: 0;
}
#ready h2 {
  color: black;
  font-size: 2vw;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

#ready h3 {
  color: black;
  font-size: 2vw;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

#readyContent {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  gap: clamp(8px, 2vw, 20px);
  overflow: hidden;
}

#questionnaire {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 1 1 55%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#questionnaireImageContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  max-height: min(22dvh, 200px);
  width: 100%;
}
#questionnaireImage {
  max-height: min(22dvh, 200px);
  max-width: 100%;
  object-fit: contain;
}

#questionnaireName {
  display: flex;
  /*align-items: center;*/
  justify-content: center;
  color: black;
  font-size: 1.5vw;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

#questionnaireRules {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: clamp(6px, 1.5vw, 10px);
  color: red;
  font-size: clamp(0.65rem, 1.4vw, 0.95rem);
  text-align: left;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  line-height: 1.25;
}

#questionnaireRules ul {
  list-style-type: disc;
  padding-left: 20px;
  text-align: left;
  margin: 0; /* Ajouté pour supprimer les marges par défaut */
}


#ready #scoreboard {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: clamp(8px, 2vw, 16px);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 1 1 40%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

h2 {
  color: black;
  font-size: 2vw;
  text-align: center;
  width: 100%;
  margin-bottom: 10px;
}

#scoreboard table {
  width: 100%;
  border-collapse: collapse;
  /*max-height: 5vh; */
  flex-grow: 1; /* Permet à la table de grandir pour occuper l'espace disponible */
}

#scoreboard th, #scoreboard td {
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box; /* Assure que padding est inclus dans les dimensions */
}

#scoreboard th {
  background-color: #f9f9f9;
  color: blue;
  text-align: center;
}

#scoreboard td {
  text-align: left;
}

#scoreboard td.scoreboardPosition, #scoreboard td.scoreboardScore {
  text-align: center; /* Centre les cellules de position et de score */
}

#scoreboardHead {
  height: auto;
}

#scoreboardBody {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  font-size: clamp(0.7rem, 1.5vw, 1rem);
}

#scoreboardHead {
  width: 100%;
  flex-shrink: 0;
}

#scoreboardBody td {
  flex: 1;
  overflow: hidden;
}

.answered { font-weight: bold; }

#scoreboard .scoreboard-row-disconnected {
    opacity: 0.55;
    font-style: italic;
    background-color: #fafafa;
}

#scoreboard .scoreboard-row-disconnected .scoreboardName {
    color: #555;
}

#game {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  padding: clamp(4px, 1vh, 12px);
}

#game #startCountdown {
  flex: 1 1 auto;
  display: none;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 4vw, 48px);
  box-sizing: border-box;
  text-align: center;
  line-height: 1.15;
}

#game h1 {
  color: red;
  font-size: clamp(1.5rem, 6vw, 4rem);
  text-align: center;
  width: 100%;
  flex-shrink: 0;
}

#game h3 {
  color: red;
  font-size: 3vw;
  text-align: center;
  width: 70%; /* Le texte prend 70% de la largeur de l'écran */
}

#gameContent {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  gap: clamp(8px, 2vw, 20px);
  overflow: hidden;
}

#game .question-image {
  display: flex;
  align-self: center;
  justify-content: center;
  flex: 0 1 auto;
  max-width: min(42vw, 420px);
  max-height: min(28dvh, 280px);
  overflow: hidden;
}

#game .question-image-response {
  display: none;
  align-self: center;
  justify-content: center;
  flex: 0 1 auto;
  max-width: min(55vw, 720px);
  max-height: min(32dvh, 360px);
  overflow: hidden;
}
#game .imagePreview {
  display: flex;
  max-width: inherit;
  max-height: inherit;
}

#game .imageResponse {
  display: flex;
  align-self: center;
  max-width: 250px;
  max-height: 250px;
}

#gameQuestions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: white;
  padding: clamp(8px, 1.5vw, 16px);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#game #scoreboard {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: min(42%, 520px);
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.questions {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(6px, 1.2vw, 14px);
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.questions header{
  color: black;
  font-size: 1.2vw;
  text-align: center;
  width: 100%; /* Le texte prend 70% de la largeur de l'écran */
}

.responses {
  margin-top: clamp(4px, 1vh, 12px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.responses ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: clamp(4px, 0.8vh, 8px);
  overflow: hidden;
}
.responses li {
  flex: 1 1 0;
  min-height: 0;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1vw, 10px);
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: clamp(0.85rem, 2vw, 1.5rem);
  overflow: hidden;
}

/* Réponses en colonne par défaut */
#answerList, #questionAnswersList {
  display: flex;
  flex-direction: column; /* Par défaut en colonne */
  list-style-type: none;
  margin-top : 20px;
}

#answerList li, #questionAnswersList li {
  flex: 1 1 0;
  min-height: 0;
  text-align: center;
  padding: clamp(4px, 1vw, 10px);
  margin: 0;
  background-color: #f0f0f0;
  border-radius: 5px;
  max-height: none;
  overflow: hidden;
}

/* Classe inline, avec une spécificité plus élevée pour garantir le bon fonctionnement */
#answerList.inline, #questionAnswersList.inline {
  flex-direction: row !important;
  justify-content: space-around;
}

.correct {
  background-color: #d4edda !important; /* Couleur de fond pour les réponses correctes */
  color: #155724 !important; /* Couleur du texte pour les réponses correctes */
}
.incorrect {
  background-color: #f8d7da !important; /* Couleur de fond pour les réponses incorrectes */
  color: #721c24 !important; /* Couleur du texte pour les réponses incorrectes */
}

.previous-question-banner {
  display: none;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: 2px solid #ff9800;
  color: #5d4037;
  font-size: clamp(1rem, 2.2vw, 1.75rem);
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(255, 152, 0, 0.25);
}

#questions.previous-question-preview {
  outline: 3px solid rgba(255, 152, 0, 0.45);
  outline-offset: 4px;
  border-radius: 12px;
}

.board-timer-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 5px;
}

.board-pause-pill {
  display: none;
  align-self: center;
  padding: 0.35rem 1rem;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: #fd7e14;
  color: #fff;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.board-pause-pill.board-pause-pill--visible {
  display: inline-block;
}

#gameQuestions.game-questions--paused .board-timer-row .progress-container {
  opacity: 0.65;
  box-shadow: inset 0 0 0 2px rgba(253, 126, 20, 0.55);
}

.progress-container {
  background-color: #e0e0e0;
  border-radius: 25px;
  overflow: hidden;
  flex: 1;
  width: 100%;
}

.progress-bar {
  height: 30px;
  width: 0;
  background-color: #76c7c0;
  /* Largeur pilotée en rAF (~60 fps) : pas de transition sur width (évite l’effet « marches »). */
  transition: background-color 0.35s ease;
  will-change: width;
}

.progress-bar.progress-bar--paused {
  background-color: #94a3b8;
  transition: background-color 0.35s ease, width 0s;
}

.progress-bar.warning {
  background-color: #ffcc00; /* Couleur jaune pour avertissement */
}

.progress-bar.warning.progress-bar--paused {
  background-color: #c9a227;
}

.progress-bar.danger {
  background-color: #ff0000; /* Couleur rouge pour danger */
}

.progress-bar.danger.progress-bar--paused {
  background-color: #b85c5c;
}

    /*-------------*/
    /*   BUZZER    */
    /*-------------*/

#game .buzzer-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  padding: clamp(8px, 1.5vw, 16px);
  overflow: hidden;
  /*background-color: #f7f7f7;*/
  border-radius: 8px;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
  text-align: center;
}

#game .buzzer-container h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

#game .buzzer-list {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vh, 10px);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#game .buzzer-list-item {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background-color: #e8e8e8;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-size: 1.2rem;
  transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}

#game .buzzer-position {
  font-weight: bold;
  color: #007BFF;
  font-size : 1.5em;
}

#game .buzzer-player-name {
  color: #333;
  font-size : 2em;
}

#game .buzzer-transition {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 1;
}

/* Styles pour un joueur accepté */
#game .buzzer-accepted {
  background-color: #28a745 !important; /* Vert */
  font-weight: bold;
  opacity : 1;
}

/* Styles pour un joueur rejeté */
#game .buzzer-rejected {
  background-color: #dc3545 !important; /* Rouge */
  font-weight: bold;
  opacity : 1;
}

#game .buzzer-accepted .buzzer-player-name {
  color : #ffffff;
}

#game .buzzer-rejected .buzzer-player-name {
  color : #ffffff;
}

/* Effet de disparition */
#game .buzzer-fade-out {
  opacity: 0 !important;
  /*transform: translateY(-10px);*/
}

/* Classe d'apparition */
#game .buzzer-fade-in {
  opacity: 0;
  animation: fadeIn 150ms forwards;
}

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

/* Classe pour la surbrillance scintillante */
#game .buzzer-highlight {
  animation: scintillement 1s infinite alternate;
}

/* Animation de scintillement */
@keyframes scintillement {
  0% {
      background-color: #ffc107; /* Jaune clair */
      transform: scale(1);
      box-shadow: 0 0 10px rgba(255, 193, 7, 0.2);
  }
  100% {
      background-color: #ffe607; /* Jaune vif */
      transform: scale(1.02);
      box-shadow: 0 0 20px rgba(255, 235, 59, 0.4);
  }
}

/* Rendre le texte blanc pour une meilleure lisibilité */
#game .buzzer-highlight .buzzer-player-name {
  color: #fff;
}

#game .buzzer-answer-container{
  display: flex;
  flex-direction: column;
  padding: 50px;
  width: 100%;
  box-sizing: border-box; /* Assure que padding est inclus dans les dimensions */
}

#game .buzzer-answer-container h2{
  color: blue;
  font-size: 2vw;
  text-align: center;
  width: 100%; /* Le texte prend 70% de la largeur de l'écran */
}

#game .buzzer-answer-container{
  color: green;
  font-size: 4vw;
  text-align: center;
  width: 100%; /* Le texte prend 70% de la largeur de l'écran */
}


    /*-------------*/
    /* LEADERBOARD */
    /*-------------*/

#leaderboard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(8px, 2vh, 20px);
  box-sizing: border-box;
  background: #fafafa;
  overflow-x: hidden;
  overflow-y: auto;
}

.leaderboard__header {
  flex: 0 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(12px, 3vh, 28px);
  padding-top: clamp(4px, 1vh, 12px);
}

#leaderboard h1 {
  color: red;
  font-size: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  margin: 0;
  line-height: 1.2;
}

#leaderboard h2 {
  color: blue;
  font-size: 3vw;
  text-align: center;
  width: 70%;
}

#leaderboard h3 {
  color: red;
  font-size: 3vw;
  text-align: center;
  width: 70%;
}

.leaderboard__podiums {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 3vw, 40px);
  width: 100%;
  max-width: min(960px, 100%);
  margin: 0 auto clamp(8px, 2vh, 16px);
  padding: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.leaderboard__podium {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  opacity: 0;
  transition: opacity 500ms ease-in-out;
}

.leaderboard__podium.is-visible {
  opacity: 1;
}

.leaderboard__podium-rank {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  line-height: 1;
}

.leaderboard__podium-base {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: clamp(100px, 18vw, 150px);
  width: clamp(100px, 18vw, 150px);
  height: 0;
  color: #fff;
  background: #ececec;
  border-radius: 5px;
  overflow: hidden;
  transition: height 1000ms ease-in-out, opacity 500ms ease-in-out;
}

.leaderboard__podium-base.is-expanding {
  opacity: 1;
}

.leaderboard__podium-base--first {
  background: linear-gradient(to bottom, #BD4F6C 0%, #9e3b55 100%);
}

.leaderboard__podium-base--second {
  background: linear-gradient(to bottom, #F0CF65 0%, #ebc137 100%);
}

.leaderboard__podium-base--third {
  background: linear-gradient(to bottom, #5E9EAD 0%, #49828f 100%);
}

.leaderboard__podium-number {
  text-align: center;
  font-size: 1.2rem;
  margin-top: 10px;
  min-height: 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.leaderboard__podium-number small {
  display: block;
  font-size: 150%;
  color: blue;
  line-height: 1.5;
  text-transform: uppercase;
}

.bump {
  animation: bump 500ms ease-in-out;
}

@keyframes bump {
  50% {
      transform: scale(1.1);
  }
  60% {
      transform: scale(1);
  }
}

.button-container {
  text-align: center;
  margin-top: 20px;
}

.show-podiums-btn {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}

.show-podiums-btn:hover {
  background-color: #0056b3;
}

#leaderboard .other-scores {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  margin: clamp(4px, 1vh, 12px) auto 0;
  overflow: hidden;
  border-radius: 5px;
  background: #fafafa;
  transition: background 500ms ease-in-out, color 500ms ease-in-out;
}

#leaderboard .other-scores:empty {
  flex: 0 0 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.other-score {
  background: #ececec;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  flex: 1 1 calc(25% - 20px);
  text-align: center;
  font-size: 1rem;
  transition: transform 300ms ease-in-out, opacity 500ms ease-in-out;
  box-sizing: border-box;
  opacity: 0;
}

.other-score.is-visible {
  opacity: 1;
}

.other-score.other-score--disconnected.is-visible {
  opacity: 0.88;
}

.leaderboard__podium--disconnected .leaderboard__podium-base {
  filter: grayscale(0.35);
  opacity: 0.88;
}

.leaderboard__podium--disconnected .leaderboard__podium-number {
  font-style: italic;
  color: #555;
}

.other-score--disconnected {
  font-style: italic;
  border: 1px dashed #aaa;
}

@media (max-width: 1200px) {
  .other-score {
      flex: 1 1 calc(50% - 20px);
  }
}