body {
  background-color: #008080;
  margin: 0;
  padding: 0;
}

.grille-ligne {
  display: flex;
}

.grille-ligne + .grille-ligne {
  margin-top: 8px;
}

.grille-lettre {
  width: 36px;
  height: 48px;
  line-height: 48px;
  font-size: 24px;
  color: white;
  text-align: center;
  font-weight: bold;
  border: rgb(50, 76, 157) 2px solid;
  background: linear-gradient(0deg,rgb(4, 99, 233) 0%, rgb(0, 43, 174) 50%, rgba(255, 255, 255, 1) 100%);
  border-radius: 4px;
}

.fenetre-jeu {
  margin: 32px auto;
}

.popup {
  margin: 32px;
  display: none;
  position: fixed;
  top: 32px;
  left: 0;
  z-index: 1000;
}

#input-area {
  max-width: 100%;
  width: calc(100% - 20px);
  max-width: 500px;
}

.input-ligne {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
}

.input-ligne + .input-ligne {
  margin-top: 5px;
}

.input-lettre {
  font-size: 18px;
  border: 1px solid white;
  border-radius: 5px;
  user-select: none;
  flex-grow: 1;
  flex-shrink: 0;
  height: 45px;
  line-height: 48px;
  font-size: 24px;
  color: white;
  text-align: center;
  font-weight: bold;
  border: rgb(50, 76, 157) 2px solid;
  background: linear-gradient(0deg,rgb(4, 99, 233) 0%, rgb(0, 43, 174) 50%, rgba(255, 255, 255, 1) 100%);
  border-radius: 4px;
}

.input-lettre.input-lettre-vide {
  border: 0;
  background: 0;
  flex-grow: 2;
}

.input-lettre.input-lettre-entree {
  flex-grow: 2;
}

.input-lettre:hover,
.input-lettre:active {
  cursor: pointer;
}

.input-lettre.input-lettre-vide:hover,
.input-lettre.input-lettre-vide:active {
  cursor: initial;
}

.rouge {
  border: #be0000 2px solid;
  background: linear-gradient(0deg,rgba(255, 0, 0, 1) 0%, rgba(204, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 100%);
}

.jaune {
  color: black;
  border: #bea800 2px solid;
  background: linear-gradient(0deg,rgb(255, 255, 0) 0%, rgb(210, 182, 0) 50%, rgba(255, 255, 255, 1) 100%);
  animation: jauneClignotant 2s step-end infinite;
  animation-delay: calc(-1s * var(--time-offset, 0));
}

@keyframes jauneClignotant {
  50% {
    background: linear-gradient(0deg,rgb(186, 152, 0) 0%, rgb(123, 88, 0) 50%, rgba(255, 255, 255, 1) 100%);
  }
  /* 100% {
    background: yellow;
    background: linear-gradient(0deg,rgb(186, 152, 0) 0%, rgb(123, 88, 0) 50%, rgba(255, 255, 255, 1) 100%);
  } */
}

.bleu {
  border: rgb(50, 76, 157) 2px solid;
  background: linear-gradient(0deg,rgb(4, 99, 233) 0%, rgb(0, 43, 174) 50%, rgba(255, 255, 255, 1) 100%);
}

.gris {
  border: #565656 2px solid;
  background: linear-gradient(0deg,rgb(100, 100, 100) 0%, rgb(52, 52, 52) 50%, rgba(255, 255, 255, 1) 100%);
}