/* Compact lesson text while keeping answer buttons easy to tap. */
#app :is(.hudPrompt, .discoveryPrompt, .question, .foundationPanel h3, .skillPanel h3),
body[data-page="gameQuiz"] #app .extraPrompt,
body:is([data-page="count"], [data-page="match"]) #app .panel .name {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: normal;
  word-spacing: normal;
  margin: 8px 0;
}
body[data-page="gameQuiz"] #app .extraPrompt {
  padding: 6px 2px;
  overflow-wrap: break-word;
}
#app .hudPrompt {
  padding: 14px 12px;
  margin: 10px auto;
}
#app .storyText { font-size: 18px; line-height: 1.4; }
#app :is(.hudOptions, .extraAnswers, .discoveryAnswers, .storyChoices,
  .skillAnswers, .foundationAnswers, .matchOptions, .soundChoices) {
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
}
#app :is(.hudOption, .extraAnswers > button, .discoveryAnswers > button,
  .storyChoices > button, .skillAnswers > button, .foundationAnswers > button,
  .matchOptions > button, .soundChoices > button) {
  font-size: 18px;
  line-height: 1.3;
  padding: 10px 12px;
  min-height: 48px;
}
#app .extraAnswers > button.weatherAnswer,
#app .extraAnswers > button.shapeAnswer {
  grid-template-columns: 64px minmax(0, 1fr) 26px;
  gap: 10px;
  min-height: 84px;
  padding: 8px 10px;
}
#app .weatherAnswerPicture { width: 64px; height: 64px; }
#app .extraAnswers > button.feelingsAnswer {
  grid-template-columns: 56px minmax(0, 1fr) 26px;
  gap: 10px;
  min-height: 76px;
  padding: 8px 10px;
}
#app .feelingsFace { width: 56px; height: 56px; font-size: 42px; }
#app .extraAnswers > button.rainbowAnswer {
  grid-template-columns: minmax(0, 1fr) 26px;
  min-height: 56px;
  padding: 10px 14px;
}
#app .gameAnswerStatus { width: 26px; height: 26px; font-size: 20px; }
#app :is(.hudQuest, .panel):has(.hudPrompt, .extraPrompt, .discoveryPrompt,
  .question, .skillAnswers, .foundationAnswers, .colorAnswers, .matchOptions, .soundChoices) {
  padding: 16px 12px;
}
#app :is(.hudQuest, .panel) .listen {
  margin: 8px auto;
  padding: 10px 14px;
  min-height: 44px;
}
#app .gameInstructions {
  font-size: 16px;
  line-height: 1.35;
  padding: 10px 12px;
  margin: 8px 0;
}
#app :is(.hudQuest, .panel) .score { margin: 6px 0 10px; }
#app :is(.hudQuest, .panel) .feedback { margin: 8px 0; font-size: 17px; }
#app :is(.hudQuest, .panel) .feedback:empty { margin: 0; }

/* Long words such as CATERPILLAR stay inside narrow phone screens. */
#app .letterChoices { flex-wrap: wrap; gap: 6px; }
#app .letterChoices button { min-width: 44px; min-height: 48px; font-size: 26px; }
#app .buildSlots { gap: 5px; }
#app .buildSlots span { min-width: 24px; width: 24px; min-height: 42px; font-size: 23px; }