/* Space 2047 HD Edition v5.40.0 — mobile HUD fit and safe spacing. */

@media (max-width: 760px), (pointer: coarse) {
  /* Give Menu and Options their own top row. The mission strip sits below
     them rather than passing underneath either large button. */
  #s2047-mwo-hud {
    top: max(112px, calc(env(safe-area-inset-top) + 112px)) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    transform: translateX(-50%) !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    z-index: 2147482900 !important;
  }

  #s2047-mwo-hud .s2047-mwo-focus {
    min-width: 0 !important;
    padding: 8px 10px !important;
  }

  #s2047-mwo-hud .s2047-mwo-focus strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Keep the three lower controls in one non-overlapping row:
     movement pad | map | labelled actions. */
  #s2047-mobile-dpad-v51234 {
    left: max(6px, env(safe-area-inset-left)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  #s2047-mobile-dpad-v51234 .s2047-dpad {
    width: 142px !important;
    height: 142px !important;
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 22px !important;
  }

  #s2047-mobile-dpad-v51234 .s2047-dpad-button {
    font-size: 23px !important;
    border-radius: 11px !important;
  }

  #s2047-mobile-labelled-actions {
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: min(190px, 46vw) !important;
    gap: 6px !important;
  }

  #s2047-mobile-labelled-actions .s2047-labelled-action {
    min-height: 43px !important;
    padding: 6px 7px !important;
    gap: 6px !important;
    border-radius: 15px !important;
    font-size: 11.5px !important;
  }

  #s2047-mobile-labelled-actions .s2047-labelled-action b {
    flex-basis: 25px !important;
    width: 25px !important;
    height: 25px !important;
    font-size: 16px !important;
  }

  #s2047-minimap-wrap,
  .s2047-minimap-wrap {
    top: auto !important;
    right: calc(max(6px, env(safe-area-inset-right)) + min(190px, 46vw) + 6px) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: 52px !important;
    padding: 4px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  #s2047-minimap-wrap canvas,
  .s2047-minimap-wrap canvas {
    width: 42px !important;
    height: 88px !important;
    border-radius: 8px !important;
  }

  #s2047-minimap-wrap span,
  .s2047-minimap-wrap span {
    padding-top: 3px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: .03em !important;
    white-space: normal !important;
  }

  /* Lift transient notices above the entire lower control row. */
  .s2047-mwo-toast,
  .s2047-iuo-toast {
    bottom: calc(max(166px, env(safe-area-inset-bottom) + 166px) + (var(--s2047-notice-index, 0) * 66px)) !important;
    max-width: calc(100vw - 18px) !important;
  }
}

@media (max-width: 390px) {
  #s2047-mobile-dpad-v51234 .s2047-dpad {
    width: 132px !important;
    height: 132px !important;
  }

  #s2047-mobile-labelled-actions {
    width: min(178px, 45.5vw) !important;
  }

  #s2047-minimap-wrap,
  .s2047-minimap-wrap {
    right: calc(max(5px, env(safe-area-inset-right)) + min(178px, 45.5vw) + 5px) !important;
    width: 46px !important;
  }

  #s2047-minimap-wrap canvas,
  .s2047-minimap-wrap canvas {
    width: 36px !important;
    height: 78px !important;
  }
}

@media (max-height: 690px) and (max-width: 760px) {
  #s2047-mwo-hud {
    top: max(100px, calc(env(safe-area-inset-top) + 100px)) !important;
  }
}