#exercise {
  max-width: 900px;
  touch-action: manipulation;
}

#finalBoard .title {
  display: flex;
  align-items: center;
  justify-content: center;
}

#finalBoard .title img {
  height: 1.7em;
  margin-right: 5px;
}

.instructions {
  background-color: white;
  border-radius: 6px;
  padding: 15px;
  min-width: 500px;
  display: inline-block;
  margin: 20px 0;
}

@media screen and (max-width: 500px) {
  .instructions {
    min-width: 100%;
  }
}

#playGround {
  margin: 0 5px;
}

#finalBoard .illustration {
  max-width: 100%;
  margin-bottom: 25px;
}

/*********************** WORDS ***********************/
:root {
  --word-font-size: 24px;
  /* 1.1 * font size + 2 * padding + 2 * border, rounded up */
  --word-height: 35px;
  --word-margin: 1px;
}

#plan {
  position: relative;

  width: 100%;
  overflow: hidden;

  margin: 10px 0;

  background-color: white;
  background-size: cover;
  cursor: crosshair;

  border: 1px solid var(--gray);
  border-radius: 3px;
  box-shadow: 0 0 32px 0 rgba(0,0,0,.1);

  height: calc(10 * (var(--word-height) + var(--word-margin)) + 3 * var(--word-margin));
}

#mistakes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#plan .word {
  position: absolute;
  user-select: none;

  right: 100%;
  transform: translateX(0);
  will-change: transform;
}

.word {
  white-space: nowrap;
  display: flex;
  align-items: center;

  font-size: var(--word-font-size);
  height: var(--word-height);
  background-color: white;
  border: 1px solid var(--lightGrayHover);
  border-radius: 3px;
  padding: 3px;
  line-height: 1.1;
}

@media screen and (max-width: 600px) {
  #plan {
    height: calc(100vh - 100px);
    max-height: 550px;
  }

  #plan .word {
    right: unset;
    bottom: 100%;
  }
}

.word.correct {
  background-color: var(--faintGreen);
  border-color: var(--green);
}

#plan .word.correct {
  animation: var(--animation-pulse);
}

.word.wrong {
  background-color: var(--faintRed);
  border-color: var(--red);
}

#plan .word.wrong {
  animation: var(--animation-shake);
}

@media screen and (pointer: coarse) {
  #plan .word::before {
    content: '';
    position: absolute;
    inset: -20px 0 0;
  }
}

/*********************** TOOLBAR ***********************/
#toolbar {
  display: flex;
  align-items: flex-end;
  margin: 10px 0;
}

#remaining, #lives {
  flex: 1 1 0;
}

#remaining {
  font-size: 22px;
  text-align: left;
  line-height: 1.1;
}

#lives {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
}

#lives img {
  height: 50px;
}

#lives img.removed {
  opacity: 0;
  transform: scale(2);
  transition-duration: 250ms;
  transition-property: opacity, transform;
}

#speed-up {
  flex: 1 0 auto;
  max-width: 150px;
  justify-content: center; /* TODO should not be necessary */
}