/* Phone layouts keep content in normal flow, including with enlarged text. */
@media (max-width: 700px), (max-width: 1000px) and (max-height: 500px) and (pointer: coarse) {
  .home { display:flex; flex-direction:column; height:auto; min-height:100svh; overflow:visible; }
  .home header { order:0; padding:20px 16px; }
  .home nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1; }
  .home nav a,.home nav button { padding:8px; text-align:center; }
  .home .scene { position:relative; inset:auto; order:1; width:100%; height:auto; min-height:0; aspect-ratio:2/1; z-index:0; }
  .home .scene img { object-fit:contain; animation:none; }
  .home .shade { display:none; }
  .home .welcome-copy { position:relative; inset:auto; order:2; padding:32px 16px; }
  .home .welcome-copy h1 { font-size:clamp(48px,14vw,72px); }
  .home footer { position:relative; inset:auto; order:3; margin-top:auto; padding:16px 20px max(24px,env(safe-area-inset-bottom)); flex-direction:column; align-items:flex-start; }
  .home .playback-controls { justify-content:flex-start; }
  .home .playback-controls select { max-width:100%; }
  dialog { overflow:auto; overscroll-behavior:contain; }
  select,input,textarea { font-size:16px!important; }
  body:has(.reader) header { flex-direction:column; gap:8px; }
  body:has(.reader) nav { justify-content:flex-start; }
  body:has(.reader) nav a { display:inline-flex; align-items:center; min-height:44px; }
  .reader .book { flex-direction:column; gap:12px; }
  .reader .page { width:100%; }
  .reader .page::after { display:none; }
  .reader .controls { flex-wrap:wrap; }
  .reader .controls p { order:3; width:100%; font-size:14px; }
  .paint-tools .swatch { width:44px; min-height:44px; }
  #colourDialog .colour-heading { position:sticky; top:-14px; background:#102c22; z-index:2; padding:10px 0; }
  #closeColour { flex-shrink:0; }
}
.forest-map-viewport { display:contents; }
.forest-touch-controls { display:none; }
@media (max-width: 700px), (max-height: 500px) and (pointer:coarse) {
  #stageForest { display:block; top:140px; bottom:var(--forest-panel-height,130px); height:auto; overflow-y:auto; overflow-x:hidden; padding:0 0 24px; scroll-padding:16px; }
  .forest-map-viewport { display:block; position:relative; width:100%; overflow-x:auto; overflow-y:hidden; touch-action:pan-x pan-y; overscroll-behavior-x:contain; }
  .forest-map-viewport .forest-frame { max-width:none; max-height:none; transform:none; }
  .forest-touch-controls { display:block; position:relative; padding:16px; color:#fff8e7; }
  .forest-touch-controls p { line-height:1.5; margin:0 0 12px; }
  .forest-touch-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .forest-touch-buttons button { min-height:48px; padding:10px; border:1px solid #a88f5b; border-radius:8px; background:#102c22; color:#fff8e7; font:16px Georgia,serif; cursor:pointer; }
  .forest-touch-buttons button:focus-visible { outline:3px solid #f5ce7e; outline-offset:2px; }
  .animal-intro-panel { position:fixed; bottom:0; width:100%; max-height:min(180px,40dvh); overflow-y:auto; pointer-events:auto; overscroll-behavior:contain; padding:8px 12px max(12px,env(safe-area-inset-bottom)); background:#081b15f5; }
  .animal-intro-panel p { font-size:16px; }
  body:has(.forest-frame) .site-music-controls { top:78px; left:12px; right:auto; }
  body:has(.forest-frame) .site-music-controls select { max-width:170px; }
  .enter-button { width:max-content; max-width:calc(100% - 32px); padding:16px 24px; }
  #donkeyHotspot { left:32%!important; }
  .intro-video { object-fit:contain; }
}
@media (min-width:701px) and (max-height:500px) and (pointer:coarse) {
  #stageForest { top:90px; }
  body:has(.forest-frame) .site-music-controls { top:20px; left:auto; right:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .enter-button { animation:none; opacity:1; }
}