/* Native touch scrolling and read-only shortcuts; no game rules or gestures
   replace browser pinch zoom. Fixed navigation layer 1; alert remains layer 2. */
@media (pointer: coarse), (max-width: 767px) {
  #app input, #app select { font-size: 16px; min-width: 0; }
  #app button { min-height: 44px; }
  #app .card-preview-trigger { min-height: 0; }
}
@media (max-width: 767px), (max-width: 1024px) and (max-height: 500px) {
  html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  main { padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); }
  .masthead { height: auto; min-height: 64px; padding-top: calc(8px + env(safe-area-inset-top,0px)); padding-bottom: 8px; padding-left: max(12px,env(safe-area-inset-left,0px)); padding-right: max(12px,env(safe-area-inset-right,0px)); }
  .game-layout { grid-template-columns: minmax(0,1fr); }
  .game-layout > .sidebar { display: contents; }
  .game-layout > .sidebar > section:first-child { grid-row: 1; }
  .game-layout > section { grid-row: 2; }
  .game-layout section, .hand, .map-viewport { scroll-margin-top: 12px; scroll-margin-bottom: calc(88px + env(safe-area-inset-bottom,0px)); }
  .game-top { flex-wrap: wrap; gap: 8px 12px; }
  .game-top h1 { font-size: 23px; }
  .entry { grid-template-columns: minmax(0,1fr); gap: 24px; margin: 16px auto; }
  .entry-diorama { display: none; }
  .scoreboard { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .score-player, .player-title, .stats > div { min-width: 0; }
  .player-title { gap: 5px; flex-wrap: wrap; }
  .player-title strong { min-width: 0; max-width: 100%; }
  .stats dd { font-size: 15px; overflow-wrap: anywhere; }
  .quarter { overflow-wrap: anywhere; }
  #app .board-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  #app .board-tools button, #app .board-tools a { min-width: 0; min-height: 44px; white-space: normal; text-align: center; justify-content: center; }
  .board-tools > small { grid-column: 1 / -1; }
  .map-viewport { height: clamp(240px,52dvh,440px); min-height: 0; padding: 8px; touch-action: pan-x pan-y pinch-zoom; overscroll-behavior: contain; }
  #app .mini-region { min-height: 44px; }
  .paper, .sidebar .paper { padding: 16px; }
  #app button { white-space: normal; overflow-wrap: anywhere; }
  .mobile-shortcuts { position: fixed; z-index: 1; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); border-top: 1px solid var(--line); background: var(--surface); }
  #app .mobile-shortcuts button { min-height: 44px; padding: 8px 4px; font-size: 14px; }
  #card-art-dialog { max-height: calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); padding: 16px; }
  .card-art-content > button { min-height: 44px; }
  #error { bottom: calc(88px + env(safe-area-inset-bottom,0px)); left: 12px; right: 12px; max-width: none; transform: none; }
}
@media (max-width: 1024px) and (max-height: 500px) {
  .map-viewport { height: 240px; }
  #card-art-dialog .card-art-content > .card-illustration { max-height: 36dvh; }
}