/* Round A — keep every round on one screen.

   1) "How to play" is a modal dialog but inherited position:absolute, so opening it from a
      scrolled menu placed its header above the screen (iPad landscape: top=-171px). Pin it to the viewport. */
html body #howto-dialog[open]{position:fixed}

/* 2) Short-landscape tablets (iPad 1180×820, 1024×768, 1210×834).
   A whole round must fit one screen: no mid-game scrolling, so Safari's toolbar never
   collapses during play. Uses the small viewport (svh) so it still fits with the toolbar shown.
   Phones (height < 600) and every portrait layout are untouched. */
@media (orientation:landscape) and (min-width:900px) and (min-height:600px) and (max-height:950px){

 /* Training family: ฝึกจำ, ทบทวน, จับคู่, ยิงจับเวลา, ไม่สิ้นสุด, ท้าทาย, ฟังแล้วล่า */
 html body:is(.practice-pilot,.training-pilot) .gameplay-shell{
  height:100vh;height:100svh;min-height:0;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  gap:10px;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(8px + env(safe-area-inset-bottom));
  overflow:hidden}
 html body.game-world:is(.practice-pilot,.training-pilot) .question{min-height:0;padding:10px 48px 88px}
 /* the orb is smaller here: keep the word + Pinyin inside the sphere, clear of the platform */
 html body.game-world.practice-pilot .question #prompt{font-size:min(64px,8svh);line-height:1.1}
 html body:is(.practice-pilot,.training-pilot) .gameplay-shell #field{min-height:0}
 html body:is(.practice-pilot,.training-pilot) .gameplay-shell .bottom{min-height:28px}
 /* Matching keeps its taller board; the prompt row shrinks instead */
 html body.training-pilot .gameplay-shell[data-training-mode="match"]{grid-template-rows:auto auto minmax(0,1fr) auto auto}
 html body.training-pilot #match-left,html body.training-pilot #match-right{grid-template-rows:repeat(4,minmax(64px,1fr));gap:10px}

 /* Word Bubbles */
 html body.game-world .arena.bubble-mode{
  height:100vh;height:100svh;min-height:0;
  grid-template-rows:auto auto auto minmax(0,1fr) auto auto auto;gap:8px;overflow:hidden}
 html body.game-world .arena.bubble-mode #field,
 html body.game-world .arena.bubble-mode #targets{min-height:0}

 /* Chinese Adventure (in a round): shorter answer rows, and keep the panel clear of the map art */
 html body.adventure-playing .adventure-play{max-width:480px;margin-top:12px;margin-bottom:0}
 /* the language strip only needs the right corner here, so it never covers Pause/Exit */
 html body.adventure-playing .adventure-support{left:auto;background:none;box-shadow:none}
 html body.adventure-playing .adventure-play #targets{grid-template-rows:repeat(2,minmax(96px,clamp(96px,calc(50svh - 290px),150px)))}
 html body.game-world.adventure-playing .adventure-play #targets .target{min-height:96px;height:100%}
}

/* 3) Older/smaller iPads in landscape (1024×768): give the orb room by trimming answer buttons 130→100px (still well above 44px touch size) */
@media (orientation:landscape) and (min-width:900px) and (min-height:600px) and (max-height:800px){
 html body.game-world:is(.practice-pilot,.training-pilot) .arena:not(.bubble-mode) #targets{grid-auto-rows:minmax(100px,1fr);gap:10px}
 html body.game-world:is(.practice-pilot,.training-pilot) #targets .target:not(.word-bubble){min-height:100px;padding-top:12px;padding-bottom:12px}
}