/* Phone fixes. On touch devices mobile-app.css shrinks #ui to the safe area (notch, home bar),
   so full-screen tints inside #ui must be pinned to the viewport instead or they stop short of the edges. */
@media (pointer: coarse) {
  #ui .so-hangar-vignette, #ui .so-pause-scrim, #ui .so-res-scrim, #ui .so-title-scrim { position: fixed; inset: 0; }
  /* No tint layers over the hangar on phones: the blue vignette, the top-bar fade and the blob behind the
     aircraft name all stopped at the safe-area edge and read as stray rectangles. Text keeps its outlines. */
  #ui .so-hangar-vignette { display: none !important; }
  #ui .so-hangar .so-top { background: none !important; }
  #ui .so-hangar .so-lobby-identity { background: none !important; }
  /* Overlay dimming moves to a full-screen layer behind the overlay's content. */
  #ui .so-overlay:not(.so-loading):not(.so-skins) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; isolation: isolate; }
  #ui .so-overlay:not(.so-loading):not(.so-skins)::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(3, 6, 10, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
}

/* The resume-training pill belongs to the hangar home only; it used to float above every panel. */
body:has(#ui .so-overlay.is-active) #tutorial-resume,
body:not(:has(#ui .so-hangar.is-active)) #tutorial-resume,
body:has(#ui .so-hangar.is-active:not(.details-hidden)) #tutorial-resume,
body:has(#ui .so-modal) #tutorial-resume,
body:has(#ui dialog[open]) #tutorial-resume { display: none !important; }

/* Short landscape phones: panel headers ate the whole screen and the tech tree got zero height. */
@media (pointer: coarse) and (max-height: 500px) {
  #tutorial-resume { top: max(8px, env(safe-area-inset-top)) !important; padding: 6px 12px !important; font-size: 12px !important; }

  #ui .so-research-window .so-modal-head { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
  #ui .so-research-window .so-modal-head .so-kicker { display: none; }
  #ui .so-research-window .so-modal-head h1 { font-size: 22px; line-height: 1; }
  #ui .so-research-window .so-aircraft-filters {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; margin-top: 4px; margin-bottom: 4px;
  }
  #ui .so-research-window .so-aircraft-filters::-webkit-scrollbar { display: none; }
  #ui .so-research-window .so-aircraft-filters > button { flex: none; }
  #ui .so-research-window .so-tree-help { display: none; }
  #ui .so-research-window .so-tree-scroll { flex: 1 1 auto; min-height: 0; }
  #ui .so-research-window { padding: 8px 10px; gap: 6px; }
  #ui .so-research-window .so-modal-head { padding: 0; align-items: center; }
  #ui .so-research-window .so-modal-head input { height: 30px; padding-top: 0; padding-bottom: 0; }
  #ui .so-research-window .so-aircraft-filters { margin: 0; }
  #ui .so-research-window .so-aircraft-filters > button { height: 26px; }
  #ui .so-research-window .so-tree-column > h2 { font-size: 14px; padding-top: 6px; padding-bottom: 6px; }
  /* Selected-aircraft card: one compact row instead of three stacked lines. */
  #ui .so-research-window .so-tree-detail { padding: 6px 8px; }
  #ui .so-research-window .so-tree-detail p { display: none; }
  #ui .so-research-window .so-tree-detail b { font-size: 16px; }
  #ui .so-research-window .so-tree-detail small { margin-left: 8px; }
  #ui .so-research-window .so-tree-detail .so-btn { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
}

/* Online panel on short landscape phones and short desktop windows (e.g. a portal's embedded frame):
   a 3-column form with the room actions near the top. */
@media (pointer: coarse) and (max-height: 500px), (min-width: 701px) and (max-height: 700px) {
  #online-panel .online-card {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; align-items: end;
    width: 100%; max-width: none; padding: 10px 12px;
  }
  #online-panel .online-card > * { grid-column: 1 / -1; order: 3; margin: 0; }
  #online-panel .online-card > label { grid-column: auto; font-size: 12px; }
  #online-panel .online-card > label input,
  #online-panel .online-card > label select { height: 34px; min-height: 34px; margin-top: 2px; font-size: 16px; padding-top: 0; padding-bottom: 0; line-height: 32px; }
  #online-panel .online-card > small { display: none; }
  #online-panel .online-card > h1 { order: 0; font-size: 24px; line-height: 1.1; }
  #online-panel .online-card > .online-actions { order: 1; }
  #online-panel .online-card > p:first-of-type,
  #online-panel .online-card > p:nth-of-type(2) { display: none; }
  #online-panel .online-plane-cards button { padding-top: 4px; padding-bottom: 4px; }
  #online-panel .online-plane-cards .aircraft-choice-image { height: 48px; }
}

/* "More" sheet: 4 columns of shorter rows so all 13 entries fit without scrolling. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  #ui .so-phone-menu { padding: 6px 16px 12px; }
  #ui .so-phone-menu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 8px; }
  #ui .so-phone-menu-grid > button { min-height: 40px; height: 40px; }
}

/* All in-game modals (settings, controls, etc.): slimmer header, tabs and footer leave room for content. */
@media (pointer: coarse) and (max-height: 500px) {
  #ui .so-modal { max-height: calc(100% - 12px); }
  #ui .so-modal .so-modal-head { padding: 6px 10px 4px 16px; align-items: center; }
  #ui .so-modal .so-modal-head .so-kicker { display: none; }
  #ui .so-modal .so-modal-head h1 { font-size: 18px; line-height: 1.1; }
  #ui .so-modal .so-tabs--modal { padding-top: 0; }
  #ui .so-modal .so-tabs--modal .so-tab { min-height: 34px; padding-top: 0; padding-bottom: 0; }
  #ui .so-modal .so-modal-body { padding-top: 2px; padding-bottom: 8px; }
  #ui .so-modal .so-modal-foot { padding-top: 6px; padding-bottom: 6px; }
  #ui .so-modal .so-set-row { padding-top: 4px; padding-bottom: 4px; }
}

/* Aircraft sheet (Overview / Loadout / Mission): drop the empty 48px band and sit CLOSE beside the tabs. */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  #ui .so-hangar .so-aircard { padding-top: 0; }
  #ui .so-hangar .so-aircard .so-panel > .so-tabs { padding-right: 84px; }
  #ui .so-hangar:not(.details-hidden) .so-details-toggle { top: 12px; height: 38px; min-height: 38px; }
  #ui .so-hangar .so-aircard select { min-height: 38px; height: 38px; padding-top: 0; padding-bottom: 0; }
}

/* #ui is overflow:hidden, but focus and taps could still scroll it, sliding screens out from under their
   fixed backdrops. clip forbids that scrolling; anything taller must scroll inside its own panel. */
@media (pointer: coarse) { #ui { overflow: clip; } }

/* Pause menu on short phones: it ran ~230px off the bottom. Fit it as a 2-column grid. */
@media (pointer: coarse) and (max-height: 500px) {
  #ui .so-pause .so-pause-l { top: 8px; bottom: 8px; height: auto; overflow-y: auto; justify-content: center; }
  #ui .so-pause .so-pause-l .so-kicker { display: none; }
  #ui .so-pause .so-pause-title { font-size: 34px; line-height: 1; }
  #ui .so-pause .so-pause-meta { margin-top: 4px; }
  #ui .so-pause .so-pause-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
  #ui .so-pause .so-pause-menu .so-mi { min-height: 40px; padding-top: 8px; padding-bottom: 8px; margin: 0; }
}

@media (pointer: coarse) and (max-height: 500px) {
  #ui .so-pause .so-pause-r { left: auto; right: 10px; top: 10px; width: min(250px, calc(100% - 420px)); }
}

/* Tech tree cards about 65% size on phones (held close to the face). Real sizes, not a zoom,
   because the connecting arrows are measured from the cards' on-screen positions. */
@media (pointer: coarse) and (max-height: 500px) {
  #ui .so-research-window .so-tree-canvas { grid-auto-columns: 124px; gap: 34px; padding: 4px 10px 16px; }
  #ui .so-research-window .so-tree-column { gap: 14px; }
  #ui .so-research-window .so-tree-column > h2 { font-size: 12px; padding-top: 4px; padding-bottom: 4px; }
  #ui .so-research-window .so-tree-node { height: 84px; padding: 46px 7px 4px; border-width: 2px; box-shadow: 0 3px #0e2049; }
  #ui .so-research-window .so-tree-node b { font-size: 14px; -webkit-text-stroke-width: 1.5px; }
  #ui .so-research-window .so-tree-node small { font-size: 9px; }
  #ui .so-research-window .so-tree-node em { top: 4px; right: 4px; font-size: 7px; padding: 2px 3px; }
  #ui .so-research-window .so-tree-node.is-selected { outline-width: 2px; outline-offset: 2px; }
  #ui .so-research-window .so-tree-portrait { top: -14px; height: 88px; }
}

/* Respawn picker: keep LAUNCH reachable while the aircraft and loadout lists scroll above it. */
@media (pointer: coarse) and (max-height: 500px) {
  .sh-pick { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  .sh-pick .sh-act { position: sticky; bottom: -1.15em; z-index: 2; margin-left: -1.4em; margin-right: -1.4em;
    padding: 8px 1.4em calc(8px + 1.15em); background: rgba(8, 16, 26, .94); }
}

/* Results screen on short phones: an 84px title collided with the stat cards, which filled the screen. */
@media (pointer: coarse) and (max-height: 500px) {
  #ui .so-results .so-banner { top: 8px; }
  #ui .so-results .so-banner .so-kicker { display: none; }
  #ui .so-results .so-banner-title { font-size: 34px; line-height: 1; }
  #ui .so-results .so-banner-sub { margin-top: 2px; }
  #ui .so-results .so-res-grid { top: 66px; bottom: auto; align-items: start; gap: 8px; }
  #ui .so-results .so-res-card { padding: 8px 10px; height: auto; min-height: 0; }
  #ui .so-results .so-tally-total b { font-size: 22px; }
  #ui .so-results .so-tiles { gap: 4px; }
  #ui .so-results .so-tile { padding: 3px 6px; min-height: 0; }
  #ui .so-results .so-tile b { font-size: 16px; line-height: 1.1; }
  #ui .so-results .so-rp-gain b { font-size: 24px; }
  #ui .so-results .so-res-goal + * , #ui .so-results .so-res-rp p { font-size: 10px; line-height: 1.3; }
}