/* The game is a screen, not a scrolling document. Parent help can scroll inside
   its own dialog; the play surface never pans, bounces or pulls to refresh. */
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.app {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  padding-left: max(23px, env(safe-area-inset-left));
  padding-right: max(23px, env(safe-area-inset-right));
}
.topbar, footer { min-width: 0; }
main { min-width: 0; min-height: 0; overflow: hidden; }
.game, .welcome, .finish { touch-action: none; }
.game {
  height: 100%;
  max-height: 840px;
  min-height: 0;
  display: grid;
  grid-template-rows: 42px auto minmax(0, 1fr) 28px;
  gap: clamp(8px, 1.8dvh, 18px);
  padding: 10px 7px 2px;
}
.game-top { position: static; }
.question-block { margin: 0; }
.question-block h1 { font-size: clamp(24px, 6.7vw, 44px); }
.question-block .eyebrow { margin-bottom: 8px; }
.listen { min-height: 40px; margin-top: 12px; }
.choices {
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2dvh, 18px);
}
.color-choice {
  width: 100%;
  height: 100%;
  min-height: 0;
  touch-action: none;
}
.color-choice .face { pointer-events: none; }
.shape-choice { color: #315c45; }
.shape-choice .shape {
  width: min(64%, 140px);
  height: min(70%, 140px);
  fill: currentColor;
  pointer-events: none;
}
.game-menu { display: flex; justify-content: center; gap: 14px; width: min(100%, 530px); }
.game-menu .primary { flex: 1; width: 50%; min-width: 0; gap: 10px; margin: 0; padding: 18px 22px; }
.game-menu .secondary-game { color: #315c45; background: #e2e8d7; box-shadow: 0 5px 0 #c4cfb5; }
.game-menu .secondary-game:active { box-shadow: 0 1px 0 #c4cfb5; }
.feedback { height: auto; margin: 0; align-self: center; }
footer { padding-top: 4px; }
.welcome {
  height: 100%;
  min-height: 0;
  max-height: 780px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2dvh, 26px) 0 8px;
}
.welcome > :not(.color-garden) { flex-shrink: 0; }
.welcome h1 { font-size: clamp(32px, 6.4dvh, 58px); }
.welcome .eyebrow { margin-bottom: 12px; }
.welcome .lead { margin-top: 12px; }
.color-garden {
  position: relative;
  flex: 1 1 220px;
  min-height: 70px;
  max-height: 235px;
  width: min(350px, 100%);
  height: auto;
  margin: 10px auto;
  transform: none;
}
.friend-blue { left: 4%; bottom: 12%; width: 33%; height: 63%; }
.friend-yellow { left: 28%; top: 4%; width: auto; height: 70%; aspect-ratio: 1; }
.friend-red { right: 2%; bottom: 12%; width: 33%; height: 55%; }
.garden-shadow { left: 7%; width: 86%; bottom: 5%; }
.welcome .primary { min-width: min(255px, 100%); }
.welcome .quiet { margin-top: 12px; }
.little-note { margin-top: 14px; }
.finish { max-height: 100%; padding: 12px 0; }
dialog { overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.update-controls { border-top: 1px solid #dfe3d4; margin-top: 20px; padding-top: 2px; }
.update-controls .text-button { display: inline-block; line-height: 1.5; text-decoration: underline; }
@media (min-width: 900px) {
  .app { padding-left: 48px; padding-right: 48px; }
}
@media (max-height: 700px) {
  .game { gap: 8px; padding-top: 4px; }
  .question-block .eyebrow { display: none; }
  .listen { margin-top: 8px; }
  .welcome .lead { font-size: 13px; }
  .welcome .little-note { display: none; }
  .welcome .primary { padding-top: 16px; padding-bottom: 16px; }
  .finish-star { font-size: 70px; margin-bottom: 16px; }
  .finish .eyebrow { margin-bottom: 10px; }
  .finish h1 { font-size: 32px; }
  .finish .lead { margin-top: 10px; }
  .finish-dots { margin: 20px 0 25px; }
  .finish .text-button { margin-top: 12px; }
}
@media (max-width: 540px) {
  .game-menu { gap: 12px; }
  .game-menu .primary { font-size: 16px; padding: 17px 16px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .app { padding-top: max(6px, env(safe-area-inset-top)); }
  .topbar { min-height: 36px; }
  .topbar .icon-button { width: 36px; height: 36px; }
  .game {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr) 20px;
    gap: 8px;
    padding-top: 2px;
  }
  .game-top { position: absolute; inset: 3px 7px auto; pointer-events: none; }
  .game-top .back-button { pointer-events: auto; }
  .progress { display: none; }
  .question-block { margin: 0; padding: 0 50px; }
  .question-block h1 { font-size: 26px; }
  .listen { min-height: 34px; padding: 6px 12px; margin-top: 5px; }
  .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .color-choice { height: 100%; min-height: 0; }
  .feedback { font-size: 11px; }
  .welcome { position: relative; display: flex; min-height: 0; padding: 4px 50% 4px 0; }
  .welcome h1 { font-size: clamp(25px, 8dvh, 35px); }
  .welcome .eyebrow { font-size: 8px; margin-bottom: 6px; }
  .welcome .lead { margin-top: 8px; }
  .welcome .primary { min-width: 200px; padding: 13px 19px; margin-top: 16px; }
  .welcome .game-menu { gap: 10px; margin-top: 14px; }
  .welcome .game-menu .primary { min-width: 0; font-size: 13px; padding: 12px; margin-top: 0; }
  .color-garden { position: absolute; top: 5%; right: 0; width: 45%; height: 90%; max-height: 230px; margin: 0; }
  .welcome .quiet, .welcome .little-note { display: none; }
  .finish { padding: 0; }
  .finish-star { font-size: 48px; margin-bottom: 4px; }
  .finish .eyebrow { font-size: 8px; margin-bottom: 5px; }
  .finish h1 { font-size: 28px; }
  .finish .lead { margin-top: 6px; font-size: 13px; }
  .finish-dots { margin: 10px 0 16px; }
  .finish-dots i { height: 12px; width: 12px; }
  .finish .primary { padding: 10px 20px; }
  .finish .text-button { margin-top: 4px; padding: 8px 0; }
  footer, footer .text-button { font-size: 8px; }
}

/* Letter recognition uses the same neutral tile for every answer. */
.letter-choice { color: #315c45; background: #ececde; }
.letter-glyph { font-family: system-ui, sans-serif; font-size: clamp(70px, 17dvh, 142px); font-weight: 700; font-style: normal; line-height: 1; pointer-events: none; }
.game-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 650px); gap: 12px; }
.welcome .game-menu .primary { width: 100%; min-width: 0; margin: 0; gap: 8px; padding: 17px 20px; }
.game-menu .letters-game { color: #624b7b; background: #eae1f1; box-shadow: 0 5px 0 #d0bfdf; }
.game-menu .letters-game:active { box-shadow: 0 1px 0 #d0bfdf; }
@media (max-width: 600px) and (orientation: portrait) {
  .game-menu { grid-template-columns: 1fr; width: min(100%, 320px); gap: 10px; }
  .welcome .game-menu .primary { min-height: 52px; padding: 11px 21px; font-size: 16px; }
  .color-garden { min-height: 50px; }
}
@media (max-height: 600px) and (orientation: portrait) {
  .welcome h1 { font-size: 30px; }
  .welcome .eyebrow { margin-bottom: 6px; }
  .welcome .lead { margin-top: 6px; }
  .welcome .game-menu .primary { min-height: 48px; padding: 9px 20px; }
  .game-menu { gap: 8px; }
  .welcome .quiet { margin-top: 8px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .welcome .game-menu { margin-top: 12px; gap: 8px; }
  .welcome .game-menu .primary { font-size: 12px; padding: 12px 10px; gap: 5px; }
  .welcome .game-menu .primary span { font-size: 18px; }
  .letter-glyph { font-size: clamp(60px, 22dvh, 106px); }
}
@media (orientation: landscape) and (max-height: 550px) and (max-width: 700px) {
  .welcome .game-menu .primary { min-height: 44px; }
  .welcome .game-menu .primary span { display: none; }
}