/* App Store / Google Play only. Mobile browsers and PWAs keep the web layout.
   data-platform is set before first paint by shell-init, and in standalone
   game frames by native-app.js using the same FlightQApp user-agent token. */
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) {
  overscroll-behavior-y: none;
}

/* Flyover is part of a scrolling page. Looking around must be explicit so a
   swipe toward the guess field doesn't get captured by decorative motion. */
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .window-wrap:has([data-native-map-control]) {
  position: relative;
}
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .porthole[data-native-map-mode="scroll"] {
  touch-action: pan-y pinch-zoom;
}
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-native-map-control] {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 8;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: 600 14px/1.2 system-ui, sans-serif;
  touch-action: manipulation;
}

/* Keep user-controlled pinch zoom. Prevent focus zoom by sizing the editable
   text itself. Target game-search fields so larger display inputs keep
   their intended typography; #guessInput covers AirportQ and Flyover. */
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) :is(
  input[role="combobox"], #guessInput
) {
  font-size: max(16px, 1rem) !important;
}

html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-native-game-extra],
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) body:has(:is([data-native-game-extra], [data-native-game-viewport])) [data-global-footer] {
  display: none !important;
}

/* A keyboard can leave less than the web layout's 500px minimum. Fit the
   visible area instead of making a second scrollable page around the frame. */
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) main:has(> [data-native-game-viewport]) {
  min-height: 0;
}
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-native-game-viewport] {
  height: var(--native-visible-height, 100dvh);
  min-height: 0;
}
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-native-game-viewport="archive"] {
  height: max(200px, calc(var(--native-visible-height, 100dvh) - 4rem - env(safe-area-inset-top, 0px)));
}

/* Long instructions must remain readable and dismissible on short screens. */
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [aria-labelledby="cityq-how-to-play-title"] > div {
  max-height: calc(var(--native-visible-height, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [aria-labelledby="cityq-how-to-play-title"] button {
  min-height: 44px;
  background: var(--cq-text);
  color: var(--cq-bg);
}

@media (max-width: 900px) {
  /* Native apps are ad-free. AirportQ's web controls reserve 9rem for the
     bottom ad; reclaim it so typing doesn't push clues into the header. */
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) body:not(.is-solved) .game-panel .controls {
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) body:not(.is-solved) .game-panel .clue-panel {
    bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) :is(.guess-entry, .guess-form button) {
    min-height: 44px;
    height: auto;
  }

  /* Keep CityQ's search at the keyboard edge. Suggestions grow upward and
     scroll inside a bounded list; the grid remains independently reachable. */
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light .cq-search {
    position: fixed;
    z-index: 50;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--native-keyboard-inset, 0px) + max(12px, env(safe-area-inset-bottom, 0px)));
    display: flex;
    flex-direction: column;
    max-height: calc(var(--native-visible-height, 100dvh) - env(safe-area-inset-top, 0px) - 24px);
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light .cq-search-head {
    flex-shrink: 0;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light .cq-search-list {
    order: -1;
    max-height: min(240px, calc(var(--native-visible-height, 100dvh) * 0.4)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light :is(.cq-search-head input, .cq-search-close) {
    min-height: 44px;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light .cq-search-head input {
    min-width: 0;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light .cq-search-close {
    min-width: 44px;
    flex-shrink: 0;
    font-size: 13px;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) .cityq-light .cq-search-row {
    min-height: 44px;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-web-search-close] {
    display: none;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-native-search-close] {
    display: inline;
  }
}

/* Wide, short phones use RailPass's desktop side panel. Its fixed journey
   details can consume the entire clipped panel. Let the whole panel scroll
   as one region so every departure and expanded stop remains reachable. */
@media (min-width: 721px) and (max-height: 500px) {
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-game-navigation="railpass-game"] #panel {
    height: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-game-navigation="railpass-game"] #panel > * {
    flex-shrink: 0;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-game-navigation="railpass-game"] #board {
    flex: none;
  }
  html:is([data-platform="capacitor-ios"], [data-platform="capacitor-android"]) [data-game-navigation="railpass-game"] #departures {
    overflow-y: visible;
    flex: none;
  }
}