/* Pictures stay next to their words on phones and larger screens. */
.letterPicture {
  display: inline-block;
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
  border-radius: 18px;
  background: #fff url('letter-picture-atlas.png') no-repeat;
  background-size: 300% 200%;
}

.extraAnswers button.weatherAnswer,
.extraAnswers button.shapeAnswer {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 14px;
  min-height: 116px;
  padding: 12px 16px;
  text-align: left;
  line-height: 1.25;
}

.shapeAnswerPicture {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #fff;
}
.shapeAnswerPicture svg { display: block; width: 100%; height: 100%; }

.weatherAnswerPicture {
  display: block;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background-color: #fff;
  background-image: url('weather-answer-atlas.png');
  background-size: 400% 500%;
  background-repeat: no-repeat;
}

/* Correct/try-again feedback must not change the color being taught. */
.extraAnswers button.rainbowAnswer,
.extraAnswers button.rainbowAnswer.correct,
.extraAnswers button.rainbowAnswer.wrong {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 18px 24px;
  background: var(--answer-color);
  color: var(--answer-ink);
  text-align: left;
  font-size: 26px;
  line-height: 1.3;
}

.extraAnswers button.weatherAnswer:disabled,
.extraAnswers button.shapeAnswer:disabled,
.extraAnswers button.feelingsAnswer:disabled,
.extraAnswers button.rainbowAnswer:disabled {
  opacity: 1;
}

.extraAnswers button.feelingsAnswer {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 100px;
  padding: 12px 16px;
  text-align: left;
  line-height: 1.3;
}
.feelingsFace {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #fff;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 52px;
  line-height: 1;
}
.gameInstructions {
  background: #ffffffdc;
  color: #203252;
  border-radius: 16px;
  padding: 13px 16px;
  font-size: 17px;
  line-height: 1.5;
  text-align: left;
}

.gameAnswerStatus {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #17324c;
  font-size: 23px;
  line-height: 1;
  visibility: hidden;
}

.correct > .gameAnswerStatus,
.wrong > .gameAnswerStatus { visibility: visible; }
.correct > .gameAnswerStatus::after { content: '\2713'; }
.wrong > .gameAnswerStatus::after { content: '\21bb'; }

.extraAnswers button.weatherAnswer:focus-visible,
.extraAnswers button.shapeAnswer:focus-visible,
.extraAnswers button.rainbowAnswer:focus-visible {
  outline: 3px solid #17324c;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

@media (max-width: 380px) {
  .extraAnswers button.feelingsAnswer {
    grid-template-columns: 58px minmax(0, 1fr) 26px;
    gap: 9px;
    padding: 10px;
    font-size: 20px;
  }
  .feelingsFace { width: 58px; height: 58px; font-size: 43px; }
  .extraAnswers button.weatherAnswer {
    grid-template-columns: 70px minmax(0, 1fr) 30px;
    gap: 10px;
    padding: 10px;
    min-height: 94px;
    font-size: 20px;
  }
  .weatherAnswerPicture { width: 70px; height: 70px; }
}