/* Final mobile safety layer. Keep this stylesheet last in the cascade. */

@media (max-width: 900px), (pointer: coarse) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    overscroll-behavior: none;
  }

  button,
  a,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  #bottomActionBar .action-btn,
  #bottomActionBar .action-btn.has-nav-icon,
  .landing-nav-link,
  .landing-brand,
  .landing-language-toggle,
  .landing-discord-link,
  .landing-header-play,
  .landing-dialog-head button,
  .auth-portal-close,
  .chat-translate-btn,
  .boss-invite-head button,
  #bossInviteForm input,
  #bossInviteForm button,
  #bossInviteFriends > button,
  #bossRaidInvitations button,
  #equipmentUpgradeClose,
  .stat-upgrade-confirm-close,
  .pvp-close,
  .pvp-formation-panel > header button,
  .pvp-formation-order-actions button,
  .pvp-formation-add-actions button,
  .pvp-formation-panel > footer button,
  #laboratoryResultClose,
  #personalWarehouseClose,
  .item-grinder-header > button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #bottomActionBar .action-btn,
  #bottomActionBar .action-btn.has-nav-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .landing-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 9px !important;
    font-size: 7px !important;
  }

  .landing-brand {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .landing-language-toggle,
  .landing-discord-link {
    width: 44px !important;
    height: 44px !important;
  }

  .landing-header-play {
    min-width: 76px !important;
    padding: 0 10px !important;
    font-size: 7px !important;
  }

  .auth-portal-close,
  .landing-dialog-head button {
    width: 44px !important;
    height: 44px !important;
  }

  .auth-portal .toggle-password {
    top: 24px;
    right: 4px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
  }

  .auth-portal .switch-text a,
  .auth-portal .terms a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .chat-translate-btn {
    height: 44px !important;
    min-width: 92px !important;
    padding: 0 12px;
    font-size: 11px;
  }

  #bossInviteForm {
    grid-template-columns: minmax(0, 1fr) minmax(84px, auto);
  }

  #bossInviteForm input,
  #bossInviteForm button,
  #bossRaidInvitations button {
    height: 44px !important;
  }

  #bossInviteFriends > button {
    padding: 10px 8px;
  }

  .pvp-rival-toolbar button,
  .pvp-formation-add-actions button,
  .pvp-formation-panel > footer button {
    min-height: 44px !important;
  }

  .pvp-formation-order-actions {
    gap: 7px;
  }

  .pvp-formation-order-actions button {
    width: 44px !important;
    height: 44px !important;
  }

  .pvp-zone-side .pvp-zone-identity small,
  .pvp-zone-side .pvp-zone-team-state > span,
  .pvp-zone-health > span {
    font-size: 7px !important;
    line-height: 1.2;
  }

  .pvp-zone-side .pvp-zone-identity strong,
  .pvp-zone-side .pvp-zone-team-state b,
  .pvp-zone-health > span b,
  .pvp-zone-clock b {
    font-size: 8px !important;
    line-height: 1.2;
  }

  .pvp-zone-health > div {
    height: 6px !important;
  }

  .equipment-upgrade-overlay,
  .pvp-hud-overlay,
  #laboratoryResultOverlay,
  .item-grinder-overlay,
  .personal-warehouse-overlay {
    overscroll-behavior: contain;
  }

  .equipment-upgrade-panel,
  .pvp-command-center,
  .laboratory-result-card,
  .item-grinder-panel,
  .personal-warehouse-panel {
    max-width: 100%;
    max-height: 100dvh;
  }

  .personal-warehouse-actions button {
    min-height: 48px !important;
  }

  #tradeRequestActions button,
  #tradeFooterActions button,
  #tradeUpdateOfferBtn,
  .trade-inline-action,
  #tradeHudClose {
    min-height: 44px !important;
  }

  #tradeMoneyInput,
  #tradeCrystalsInput,
  .trade-item-quantity {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .trade-item-option {
    min-height: 52px !important;
    grid-template-columns: 36px minmax(0, 1fr) 78px !important;
    gap: 8px !important;
    padding: 5px 7px !important;
  }

  .trade-item-option-icon,
  .trade-item-option-icon img {
    width: 34px !important;
    height: 34px !important;
  }

  .trade-sluma-selected-mark {
    width: 24px !important;
    height: 24px !important;
  }

  #tradeSlumaTooltip {
    width: min(340px, calc(100dvw - 16px)) !important;
    max-height: min(72dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .personal-warehouse-search,
  .personal-warehouse-quantity input {
    min-height: 44px;
  }

  .inventory-grid,
  .storage-grid,
  #slumadexGrid,
  #marketBrowseGrid,
  #laboratorySlumaGrid,
  .personal-warehouse-grid,
  .personal-warehouse-inventory {
    contain: layout paint style;
  }

  :where(button, [role="button"]):hover {
    transform: none;
  }
}

@media (max-width: 520px) {
  .landing-page {
    --landing-header-height: 140px;
  }

  .landing-header {
    min-height: 104px !important;
    grid-template-rows: 48px 48px !important;
  }

  .landing-nav {
    min-height: 48px;
  }

  .auth-portal {
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .auth-stage {
    padding: 56px 0 24px;
  }

  .auth-portal .auth-card {
    width: min(450px, calc(100vw - 24px));
  }

  #hudCreature,
  .deployed-hud-card {
    width: min(188px, calc(50dvw - 9px)) !important;
    min-height: 52px !important;
  }

  #hudCreature > .compact-hud-skills {
    width: 100% !important;
  }

  #deployedMiniHudStack {
    width: min(188px, calc(50dvw - 9px));
  }

  #enemyHudStack,
  #enemyHud,
  .enemy-hud-extra {
    width: min(176px, calc(48dvw - 8px)) !important;
  }

  #enemyHud,
  .enemy-hud-extra {
    min-height: 52px !important;
  }

  #hudCreatureName,
  .deployed-hud-name,
  #enemyName,
  #enemyName2,
  #enemyName3 {
    font-size: 7px !important;
    line-height: 1.25 !important;
  }

  #hudNameLevel,
  .deployed-hud-name-level,
  #hudStatusLabel,
  .deployed-hud-status-label {
    font-size: 6.5px !important;
  }

  #hudHpBarWrap,
  #hudExpBarWrap,
  .deployed-hud-hp-wrap,
  .deployed-hud-exp-wrap,
  #enemyHpBarWrap,
  .enemy-hud-extra-hp-wrap {
    height: 10px !important;
  }

  #hudHpText,
  #hudExpText,
  .deployed-hud-hp-text,
  .deployed-hud-exp-text,
  #enemyHpText,
  #enemyHpText2,
  #enemyHpText3 {
    font-size: 6px !important;
  }

  #tradeAvailableSlumas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .trade-sluma-option {
    min-height: 108px;
    padding: 8px 6px !important;
  }

  #tradeAssetPanels {
    min-height: 260px !important;
    max-height: 46dvh !important;
  }

  #tradeOffersPane {
    min-height: 360px !important;
  }

  #tradeHudFooter {
    position: sticky !important;
    bottom: 0;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  body.landing-active {
    overflow-y: auto !important;
  }

  .landing-page {
    --landing-header-height: 66px;
  }

  .landing-header {
    min-height: 66px !important;
    padding: 6px 10px !important;
  }

  .landing-nav-link {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  .auth-portal {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 54px max(12px, env(safe-area-inset-bottom, 0px));
  }

  .auth-stage {
    min-height: auto;
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 12px 0 20px;
  }

  .auth-portal .auth-card {
    width: min(450px, calc(100vw - 120px));
    padding: 16px 20px 18px;
  }

  .auth-portal .logo {
    margin-bottom: 10px;
  }

  .auth-portal .logo-icon {
    height: 28px;
    margin-bottom: 5px;
  }

  .auth-portal .logo h1 {
    font-size: 13px;
    line-height: 1.35;
  }

  .auth-portal .subtitle {
    font-size: 9px;
  }

  .auth-portal .input-group {
    margin-bottom: 8px;
  }

  .auth-portal .input-group input {
    height: 44px;
  }

  .auth-portal .switch-text,
  .auth-portal .terms {
    margin: 9px 0 0;
  }

  .auth-portal-close {
    top: max(8px, env(safe-area-inset-top, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
  }

  .pvp-zone-hud {
    top: max(4px, env(safe-area-inset-top, 0px));
  }

  .pvp-command-header,
  .personal-warehouse-header,
  .item-grinder-header {
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

html[data-graphics-quality="low"] :where(
  .pvp-hud-overlay,
  .equipment-upgrade-overlay,
  .item-grinder-overlay,
  .personal-warehouse-overlay,
  .landing-dialog-overlay,
  .auth-portal
) {
  backdrop-filter: none !important;
}