/* Phone layer of the browser edition (operator #10887 / #10888): page behaviour on touch screens, safe-area insets,
   the flight thumb keys (mobile/touch.js) and the portrait / landscape menu fixes.
   Sources: assets/tuning/mobile.json ui.safe_area_margin_px 12 (aura_jcs safe_area.rs: every menu screen inside the
   system bars and cutout, the HUD on the full window) and touch.screen_margin_px 24. Sizes in design px use --u
   (ui/kit.js), which on a phone landscape window equals the game's phone scale (menu_scale_factor 1.5 over the
   device pixel ratio). */
:root {
  --safe-t: max(env(safe-area-inset-top, 0px), 12px);
  --safe-r: max(env(safe-area-inset-right, 0px), 12px);
  --safe-b: max(env(safe-area-inset-bottom, 0px), 12px);
  --safe-l: max(env(safe-area-inset-left, 0px), 12px);
  /* Thumb key: at least 48 CSS px (Android touch target), larger on big screens. */
  --thumb: max(48px, calc(120 * var(--u)));
}

/* No page scroll, bounce, text selection, tap flash or double-tap / pinch zoom anywhere on the game. */
html, body { overscroll-behavior: none; height: 100%; height: 100dvh; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body.is-touch { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#game { touch-action: none; }
body.is-touch .layer { height: 100dvh; }

/* Error card: top of the screen inside the safe area, compact, never over the bottom keys (Back / FLY); tap closes. */
.errors { left: var(--safe-l); right: var(--safe-r); top: var(--safe-t); bottom: auto; max-height: 30vh; }
body.is-touch .errors { font-size: 12px; }

/* FULLSCREEN key: hidden where the Fullscreen API does not exist (iOS Safari, some in-app browsers). */
body.no-fullscreen #shell .shell-fs { display: none; }
body.is-touch #shell { --shell-edge: max(var(--safe-t), var(--safe-r)); }

/* ── flight thumb keys (mobile/touch.js) ── */
.touch { position: fixed; inset: 0; z-index: 9; pointer-events: none; font-family: 'Russo One', var(--av-font, sans-serif); }
.touch-group { position: absolute; display: flex; gap: 10px; pointer-events: none; }
.touch-tr { right: var(--safe-r); top: var(--safe-t); flex-direction: row-reverse; }
.touch-bl { left: var(--safe-l); bottom: var(--safe-b); flex-direction: column-reverse; }
/* Weapons on the right edge, centred low: the game HUD's flight computer owns the bottom-right corner. */
.touch-br { right: var(--safe-r); top: 50%; transform: translateY(-35%); flex-direction: column-reverse; align-items: flex-end; }
.touch-key {
  pointer-events: auto; touch-action: none; margin: 0; padding: 0 12px; min-width: var(--thumb); height: var(--thumb);
  box-sizing: border-box; border: 0 solid transparent; color: #f6f6f6; font: inherit; font-size: max(13px, calc(26 * var(--u)));
  letter-spacing: .04em; background: rgba(5, 8, 10, .35);
  border-image: url('assets/ui/menu_v2/key.png') 44 fill / 22px / 0 stretch;
  opacity: .82;
}
.touch-key.is-down { border-image-source: url('assets/ui/menu_v2/key_pressed.png'); opacity: 1; color: #00eef2; }
.touch-gun { min-width: calc(var(--thumb) * 1.6); height: calc(var(--thumb) * 1.35); color: #ffc905; }
.touch-missile { color: #ff4d4d; }
.touch-boost { color: #00f07a; height: calc(var(--thumb) * 1.35); }
.touch-pause { min-width: var(--thumb); }
.touch-recentre { font-size: max(11px, calc(20 * var(--u))); height: calc(var(--thumb) * .8); min-width: 0; }
/* Portrait: keys sit lower and smaller so the centre stays free for the trackpad and the aim. */
body.gm-portrait .touch-key { --thumb: max(48px, calc(150 * var(--u))); }

/* ── HUD on a phone: the full window, flight scale (mobile.json ui.flight_scale_factor, hud_full_window) ── */
body.is-touch #hud { padding-top: var(--safe-t); }

/* ── menus inside the safe area (mobile.json ui.safe_area_margin_px) ── */
body.is-touch #settings.gm { padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); box-sizing: border-box; }

/* Hangar, portrait: the glass column fills the lower part of the screen (the jet preview keeps the top third), its
   panel unit --hu follows the column width (menu.css), rows never shorter than a 44 px touch target, Back / FLY
   reachable at the bottom inside the safe area. */
body.gm-portrait #menu .gm-hangar-col { height: auto; max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 34vh);
  bottom: var(--safe-b); left: var(--safe-l); right: var(--safe-r); width: auto;
  --hu: calc((100vw - var(--safe-l) - var(--safe-r)) / 500); --hg-row-min: max(44px, calc(56 * var(--hu))); }
body.gm-portrait #menu .gm-hangar-page { flex: 1 1 auto; }
body.is-touch #menu .gm-hangar-row { min-height: max(44px, var(--hg-row-min)); }
body.is-touch #menu .gm-hangar-actions { min-height: 52px; }
/* Portrait card: compact (tighter padding and lines, no Mach / load chips) so all six rows fit without scrolling. */
body.gm-portrait #menu .gm-hangar-gauge { grid-template-columns: calc(96 * var(--hu)) minmax(0, 1fr) calc(120 * var(--hu)); }
body.gm-portrait #menu .gm-hangar-spec { padding: 8px 12px; gap: 6px; }
body.gm-portrait #menu .gm-hangar-spec-body { gap: 4px; }
body.gm-portrait #menu .gm-hangar-chips { display: none; }
body.gm-portrait #menu .gm-softkeys { padding-bottom: 8px; }
body.gm-portrait #menu .gm-hangar-col { gap: 8px; padding: 12px; }

/* Hangar, phone landscape: the column fills the safe height on the left with a floored panel unit; rows share it and
   the performance card yields (menu.css max-height rule). */
body.is-touch:not(.gm-portrait) #menu .gm-hangar-col { top: var(--safe-t); bottom: var(--safe-b); height: auto; max-height: none;
  left: var(--safe-l); --hu: max(var(--u), .5px); --hg-row-min: 44px; gap: 6px; padding: 8px 10px; }
body.is-touch:not(.gm-portrait) #menu .gm-softkeys { padding-bottom: 6px; }

/* Settings page: scrolls inside the safe area on short landscape screens. */
body.is-touch #settings.gm { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
body.is-touch .gm-page-col { max-width: 100%; }

/* Touch settings rows (Gyro aim, sensitivity) reuse the settings row kit; the value text sits between the arrows. */
.gm-gyro-value { min-width: calc(110 * var(--u)); text-align: center; }