/* ============================================================
   SahaX unified landscape UI system
   - Mobile/tablet landscape first
   - The premium main menu is intentionally excluded
   - One viewport-fixed page back control is provided by client.js
   ============================================================ */

:root {
  --sx-safe-top: env(safe-area-inset-top, 0px);
  --sx-safe-right: env(safe-area-inset-right, 0px);
  --sx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sx-safe-left: env(safe-area-inset-left, 0px);
  --sx-touch-target: 48px;
  --sx-page-edge: clamp(6px, 1.25vmin, 16px);
  --sx-page-pad-x: clamp(14px, 2.4vw, 34px);
  --sx-page-pad-y: clamp(12px, 2.2vh, 24px);
  --sx-page-gap: clamp(10px, 1.8vmin, 20px);
  --sx-floating-back-w: 48px;
  --sx-floating-back-h: 48px;
}

html,
body.sx-unified-ui {
  width: 100%;
  min-width: 0;
  min-height: 100%;
}

body.sx-unified-ui {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The flow owns the viewport; every non-main page owns its own scroll. */
body.sx-unified-ui #flow {
  position: fixed !important;
  inset: 0 !important;
  width: var(--app-vw, 100vw) !important;
  height: var(--app-vh, 100dvh) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.sx-unified-ui #flow > section.flow-card:not(#screenMainMenu) {
  position: fixed !important;
  top: max(var(--sx-page-edge), var(--sx-safe-top)) !important;
  right: max(var(--sx-page-edge), var(--sx-safe-right)) !important;
  bottom: max(var(--sx-page-edge), var(--sx-safe-bottom)) !important;
  left: max(var(--sx-page-edge), var(--sx-safe-left)) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--sx-page-pad-y) var(--sx-page-pad-x) !important;
  padding-top: max(var(--sx-page-pad-y), calc(var(--sx-safe-top) + 8px)) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scroll-padding-top: calc(var(--sx-floating-back-h) + 18px);
  -webkit-overflow-scrolling: touch;
}

body.sx-unified-ui #flow > section.flow-card.hidden {
  display: none !important;
}

/* Main menu remains visually and structurally untouched. */
body.sx-unified-ui[data-screen="main"] #sxGlobalBackButton,
body.sx-unified-ui[data-screen="login"] #sxGlobalBackButton,
body.sx-unified-ui[data-screen="game"] #sxGlobalBackButton,
body.sx-unified-ui.sx-modal-open #sxGlobalBackButton {
  display: none !important;
}

/* Original page buttons remain the behavior source, but not a second visual exit. */
body.sx-unified-ui #flow section:not(#screenMainMenu) .sx-page-back-source,
body.sx-unified-ui #flow section:not(#screenMainMenu) .sx-page-back-duplicate {
  display: none !important;
}

#sxGlobalBackButton {
  position: fixed !important;
  z-index: 90000 !important;
  top: max(10px, calc(var(--sx-safe-top) + 8px)) !important;
  right: max(10px, calc(var(--sx-safe-right) + 8px)) !important;
  width: var(--sx-floating-back-w) !important;
  min-width: var(--sx-floating-back-w) !important;
  max-width: calc(100vw - var(--sx-safe-left) - var(--sx-safe-right) - 20px) !important;
  height: var(--sx-floating-back-h) !important;
  min-height: var(--sx-floating-back-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 1px solid rgba(148, 180, 229, 0.42) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(38, 54, 86, 0.97), rgba(20, 30, 51, 0.98)) !important;
  color: #f8fbff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  font-family: "Rajdhani", "Outfit", sans-serif !important;
  font-size: clamp(15px, 2.2vmin, 18px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.35px !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#sxGlobalBackButton .button-icon-content {
  gap: 0 !important;
}

#sxGlobalBackButton .button-icon-content > span:last-child {
  display: none !important;
}

#sxGlobalBackButton:active {
  transform: scale(0.97) !important;
  filter: brightness(1.12);
}

#sxGlobalBackButton .btn-icon {
  width: 19px !important;
  height: 19px !important;
  flex: 0 0 19px !important;
}

#sxGlobalBackButton[hidden],
#sxGlobalModalCloseButton[hidden] {
  display: none !important;
}

#sxGlobalModalCloseButton {
  position: fixed !important;
  z-index: 2147483000 !important;
  top: max(10px, calc(var(--sx-safe-top) + 8px)) !important;
  right: max(10px, calc(var(--sx-safe-right) + 8px)) !important;
  width: var(--sx-touch-target) !important;
  min-width: var(--sx-touch-target) !important;
  max-width: var(--sx-touch-target) !important;
  height: var(--sx-touch-target) !important;
  min-height: var(--sx-touch-target) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(248, 113, 113, 0.55) !important;
  border-radius: 12px !important;
  background: rgba(31, 41, 63, 0.97) !important;
  color: #fb7185 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
  font: 800 30px/1 "Inter", sans-serif !important;
  writing-mode: horizontal-tb !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#sxGlobalModalCloseButton:active {
  transform: scale(0.94) !important;
  filter: brightness(1.15);
}

body.sx-unified-ui .sx-modal-close-source {
  display: none !important;
}

/* Touch and readable typography contract outside the game and main menu. */
body.sx-unified-ui #flow > section:not(#screenMainMenu) button,
body.sx-unified-ui #flow > section:not(#screenMainMenu) .btn,
body.sx-unified-ui .confirm-modal button,
body.sx-unified-ui .mobile-popup button,
body.sx-unified-ui .team-lobby-overlay button {
  min-height: var(--sx-touch-target) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.sx-unified-ui #flow > section:not(#screenMainMenu) button,
body.sx-unified-ui #flow > section:not(#screenMainMenu) button *,
body.sx-unified-ui .confirm-modal button,
body.sx-unified-ui .mobile-popup button,
body.sx-unified-ui .team-lobby-overlay button {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body.sx-unified-ui #flow > section:not(#screenMainMenu) input,
body.sx-unified-ui #flow > section:not(#screenMainMenu) select,
body.sx-unified-ui #flow > section:not(#screenMainMenu) textarea,
body.sx-unified-ui .confirm-modal input,
body.sx-unified-ui .confirm-modal select,
body.sx-unified-ui .confirm-modal textarea {
  min-height: var(--sx-touch-target) !important;
  box-sizing: border-box !important;
  font-size: max(16px, 1rem) !important;
}

body.sx-unified-ui #flow > section:not(#screenMainMenu) > h1,
body.sx-unified-ui #flow > section:not(#screenMainMenu) > h2,
body.sx-unified-ui #flow > section:not(#screenMainMenu) > .flow-heading {
  max-width: calc(100% - var(--sx-floating-back-w) - 24px) !important;
  margin-top: 0 !important;
  margin-bottom: var(--sx-page-gap) !important;
  min-height: var(--sx-floating-back-h);
  display: flex;
  align-items: center;
}

/* Generic landscape grids: fill width without becoming a cramped single column. */
body.sx-unified-ui #flow > section:not(#screenMainMenu) :is(
  .quick-play-grid,
  .ranked-choice-grid,
  .play-option-grid,
  .room-settings-choice-grid,
  .ai-bot-choice-grid,
  .profile-stat-grid,
  .inventory-grid,
  .market-grid
) {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: var(--sx-page-gap) !important;
}

body.sx-unified-ui #screenQuickPlay .quick-play-grid,
body.sx-unified-ui #screenRankedChoice .quick-play-grid,
body.sx-unified-ui #screenRankedChoice .ranked-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

body.sx-unified-ui #screenPlaySetup .play-setup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  align-items: start !important;
  gap: var(--sx-page-gap) !important;
}

body.sx-unified-ui #screenPlaySetup #playRoomNameSection,
body.sx-unified-ui #screenPlaySetup #playRoomPasswordSection {
  grid-column: auto !important;
  grid-row: auto !important;
  order: -10 !important;
  min-width: 0 !important;
}

body.sx-unified-ui #screenPlaySetup .play-section,
body.sx-unified-ui #screenPlaySetup .play-actions,
body.sx-unified-ui #screenQuickPlay .mode-card,
body.sx-unified-ui #screenRankedChoice .mode-card {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Auth screen: real horizontal composition, never a letter-by-letter divider. */
body.sx-unified-ui #screenLogin {
  display: grid !important;
  grid-template-columns: minmax(245px, 0.9fr) 42px minmax(280px, 1.1fr) !important;
  grid-template-rows: auto auto auto auto minmax(220px, 1fr) !important;
  column-gap: clamp(12px, 2.5vw, 34px) !important;
  row-gap: clamp(6px, 1.2vh, 12px) !important;
  align-content: center !important;
}

body.sx-unified-ui #screenLogin > h2,
body.sx-unified-ui #screenLogin > p {
  grid-column: 1 / -1 !important;
  justify-self: center;
  min-height: 0 !important;
  margin: 0 !important;
}

body.sx-unified-ui #screenLogin > h2 { grid-row: 1 !important; }
body.sx-unified-ui #screenLogin > p { grid-row: 2 !important; }

body.sx-unified-ui #screenLogin > .auth-tabs,
body.sx-unified-ui #screenLogin > .auth-error,
body.sx-unified-ui #screenLogin > .auth-error + .auth-form {
  grid-column: 1 !important;
}

body.sx-unified-ui #screenLogin > .auth-tabs { grid-row: 3 !important; }
body.sx-unified-ui #screenLogin > .auth-error { grid-row: 4 !important; }
body.sx-unified-ui #screenLogin > .auth-error + .auth-form {
  grid-row: 5 !important;
  align-self: center !important;
  justify-content: center !important;
}

body.sx-unified-ui #screenLogin > .auth-divider {
  grid-column: 2 !important;
  grid-row: 3 / 6 !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 100% !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

body.sx-unified-ui #screenLogin > .auth-form:last-of-type {
  grid-column: 3 !important;
  grid-row: 3 / 6 !important;
  align-self: center !important;
}

body.sx-unified-ui #screenLogin .auth-form {
  width: 100% !important;
  min-width: 0 !important;
}

html body.sx-unified-ui #flow > #screenLogin.flow-card > .auth-divider {
  width: 42px !important;
  min-width: 42px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

body.sx-unified-ui #screenLogin .auth-tabs,
body.sx-unified-ui #screenLogin .auth-form,
body.sx-unified-ui #screenLogin .auth-form > * {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Full-width data screens keep their content balanced instead of hugging one side. */
body.sx-unified-ui :is(
  #screenMultiplayer,
  #screenSpectator,
  #screenProfile,
  #screenTeam,
  #screenInventory,
  #screenMarket,
  #screenLiveOps,
  #screenFriends,
  #screenLeaderboard,
  #screenPublicProfile,
  #screenSocialHub,
  #screenRankedSoloHub,
  #screenRankedTeamHub
) > :is(.stack, .screen-body, .profile-body, .team-body, .inventory-body, .market-body, .liveops-body, .social-hub-body, .leaderboard-body, .flow-list) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Landscape modal contract. Modal content may scroll; the close control does not. */
body.sx-unified-ui .confirm-modal,
body.sx-unified-ui .mobile-popup,
body.sx-unified-ui .replay-export-modal,
body.sx-unified-ui .team-training-card-picker-modal {
  padding:
    max(8px, var(--sx-safe-top))
    max(8px, var(--sx-safe-right))
    max(8px, var(--sx-safe-bottom))
    max(8px, var(--sx-safe-left)) !important;
  box-sizing: border-box !important;
}

body.sx-unified-ui .confirm-modal > .confirm-card,
body.sx-unified-ui .mobile-popup > *,
body.sx-unified-ui .team-training-card-picker-modal > *,
body.sx-unified-ui #replayExportModal .replay-export-card {
  width: min(90vw, 1120px) !important;
  min-width: 0 !important;
  max-width: 1120px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(var(--app-vh, 100dvh) - var(--sx-safe-top) - var(--sx-safe-bottom) - 16px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.sx-unified-ui .confirm-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  min-height: 52px !important;
  padding-right: 58px !important;
  background: inherit;
}

body.sx-unified-ui :is(
  #matchDetailClose,
  #vipPrivilegesClose,
  #dailyLoginPopupClose,
  #onlinePlayersClose,
  #cosmeticPreviewClose,
  #scrollAcceptCloseBtn,
  #replayExportModalClose,
  .team-training-card-picker-close
) {
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  width: var(--sx-touch-target) !important;
  min-width: var(--sx-touch-target) !important;
  height: var(--sx-touch-target) !important;
  min-height: var(--sx-touch-target) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 12px !important;
  z-index: 6 !important;
}

/* Dedicated native-app exit confirmation. */
#appExitConfirmModal .confirm-card,
#unsavedChangesModal .confirm-card {
  width: min(88vw, 520px) !important;
  padding: clamp(18px, 3vmin, 30px) !important;
  text-align: center;
}

#appExitConfirmModal .sx-exit-actions,
#unsavedChangesModal .sx-exit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

/* Compact landscape phones: preserve horizontal structure and reduce decoration. */
@media (orientation: landscape) and (max-height: 430px) {
  :root {
    --sx-page-edge: 5px;
    --sx-page-pad-x: clamp(10px, 2vw, 18px);
    --sx-page-pad-y: 9px;
    --sx-page-gap: 8px;
    --sx-floating-back-w: 48px;
    --sx-floating-back-h: 48px;
  }

  body.sx-unified-ui #flow > section.flow-card:not(#screenMainMenu) {
    border-radius: 12px !important;
  }

  body.sx-unified-ui #flow > section:not(#screenMainMenu) > h1,
  body.sx-unified-ui #flow > section:not(#screenMainMenu) > h2 {
    font-size: clamp(20px, 4.5vh, 28px) !important;
    line-height: 1.05 !important;
  }

  body.sx-unified-ui #screenLogin > p {
    display: none !important;
  }

  body.sx-unified-ui #screenLogin {
    grid-template-rows: auto 0 auto auto minmax(220px, 1fr) !important;
    align-content: start !important;
  }

  body.sx-unified-ui #screenLogin > .auth-divider,
  body.sx-unified-ui #screenLogin > .auth-form:last-of-type {
    grid-row: 3 / 6 !important;
  }

  body.sx-unified-ui #screenQuickPlay .quick-play-grid,
  body.sx-unified-ui #screenRankedChoice .quick-play-grid,
  body.sx-unified-ui #screenRankedChoice .ranked-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-choice,
  body.sx-unified-ui #screenPlaySetup .play-section,
  body.sx-unified-ui #screenQuickPlay .mode-card,
  body.sx-unified-ui #screenRankedChoice .mode-card {
    padding: 10px !important;
  }

  body.sx-unified-ui .confirm-modal > .confirm-card,
  body.sx-unified-ui .mobile-popup > *,
  body.sx-unified-ui .team-training-card-picker-modal > *,
  body.sx-unified-ui #replayExportModal .replay-export-card {
    width: calc(100vw - var(--sx-safe-left) - var(--sx-safe-right) - 12px) !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--sx-safe-top) - var(--sx-safe-bottom) - 12px) !important;
    border-radius: 12px !important;
  }
}

/* Narrow landscape phones still stay horizontal. Never reuse portrait stacking. */
@media (orientation: landscape) and (max-width: 720px) {
  body.sx-unified-ui #screenPlaySetup .play-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-section.sx-layout-visible {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-actions {
    align-self: end !important;
    min-height: var(--sx-touch-target) !important;
    height: var(--sx-touch-target) !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-actions > button:not(.sx-page-back-source) {
    height: var(--sx-touch-target) !important;
    min-height: var(--sx-touch-target) !important;
  }

  body.sx-unified-ui #screenQuickPlay .quick-play-grid,
  body.sx-unified-ui #screenRankedChoice .quick-play-grid,
  body.sx-unified-ui #screenRankedChoice .ranked-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet landscape: use the full display while keeping readable density. */
@media (orientation: landscape) and (min-width: 1024px) and (min-height: 560px) {
  :root {
    --sx-page-pad-x: clamp(24px, 3vw, 48px);
    --sx-page-pad-y: clamp(18px, 2.8vh, 34px);
    --sx-page-gap: clamp(14px, 1.7vw, 26px);
    --sx-floating-back-w: 48px;
  }

  body.sx-unified-ui #screenPlaySetup .play-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: min(52vh, 530px) !important;
    align-items: stretch !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-section.sx-layout-visible {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-section.sx-layout-visible > .play-option-grid {
    width: 100% !important;
    align-content: center !important;
    grid-auto-rows: minmax(58px, 72px) !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-actions {
    grid-column: 1 / -1 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-self: center !important;
    width: min(520px, 48%) !important;
    height: 64px !important;
    min-height: 64px !important;
    align-self: start !important;
  }

  body.sx-unified-ui #screenPlaySetup .play-actions > button:not(.sx-page-back-source) {
    height: 64px !important;
    min-height: 64px !important;
  }

  body.sx-unified-ui :is(#screenPlaySetup,#screenQuickPlay,#screenRankedChoice,#screenName,#screenServerSelect) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-content: stretch !important;
  }

  body.sx-unified-ui #screenQuickPlay .mode-card,
  body.sx-unified-ui #screenRankedChoice .mode-card {
    min-height: min(38vh, 360px) !important;
  }
}

/* Portrait fallback remains available by user choice. */
@media (orientation: portrait) {
  body.sx-unified-ui #flow > section.flow-card:not(#screenMainMenu) {
    top: max(8px, var(--sx-safe-top)) !important;
    right: max(8px, var(--sx-safe-right)) !important;
    bottom: max(8px, var(--sx-safe-bottom)) !important;
    left: max(8px, var(--sx-safe-left)) !important;
  }

  body.sx-unified-ui #screenLogin,
  body.sx-unified-ui #screenPlaySetup .play-setup-grid,
  body.sx-unified-ui #screenQuickPlay .quick-play-grid,
  body.sx-unified-ui #screenRankedChoice .quick-play-grid,
  body.sx-unified-ui #screenRankedChoice .ranked-choice-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.sx-unified-ui #screenLogin > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.sx-unified-ui #screenLogin > .auth-divider {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
  }
}

/* Keyboard-open contract shared by every editable page. */
body.sx-unified-ui.sx-keyboard-open #flow > section.flow-card:not(#screenMainMenu) {
  bottom: max(4px, var(--sx-safe-bottom)) !important;
  padding-top: 8px !important;
  scroll-padding-bottom: 24px;
}

body.sx-unified-ui.sx-keyboard-open #flow > section:not(#screenMainMenu) > h1,
body.sx-unified-ui.sx-keyboard-open #flow > section:not(#screenMainMenu) > h2,
body.sx-unified-ui.sx-keyboard-open #flow > section:not(#screenMainMenu) > p {
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Ranked hubs: one landscape viewport, no page or hub scrolling. */
@media (orientation: landscape) {
  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub):not(.hidden) {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: stretch !important;
    gap: clamp(6px, 1.3vh, 12px) !important;
    overflow: hidden !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) > h2 {
    width: 100% !important;
    min-height: 40px !important;
    max-width: calc(100% - var(--sx-floating-back-w) - 18px) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(17px, 4.5vh, 28px) !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) > .ranked-season-info-bar {
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    box-sizing: border-box !important;
    gap: 10px !important;
    overflow: hidden !important;
    font-size: clamp(9px, 2.3vh, 12px) !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) > .ranked-season-info-bar .ranked-play-btn {
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: clamp(9px, 2.15vh, 11px) !important;
    white-space: nowrap !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) > .ranked-hub-container {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .ranked-dashboard-layout {
    grid-template-columns: minmax(168px, 30%) minmax(0, 1fr) !important;
    gap: clamp(8px, 1.4vw, 18px) !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .player-license-card,
  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .mode-portal-wrapper,
  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card {
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .player-license-card {
    padding: clamp(7px, 1.5vh, 14px) !important;
    border-radius: clamp(10px, 2vh, 16px) !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .mode-portal-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: clamp(7px, 1vw, 14px) !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card {
    padding: clamp(8px, 1.7vh, 16px) clamp(9px, 1.3vw, 16px) !important;
    border-radius: clamp(10px, 2vh, 16px) !important;
    justify-content: space-between !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-header {
    flex: 0 0 auto !important;
    min-height: 30px !important;
    margin: 0 0 4px !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-body h3 {
    margin: 0 0 4px !important;
    font-size: clamp(13px, 3.1vh, 20px) !important;
    line-height: 1.08 !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-subtitle {
    margin: 0 0 5px !important;
    font-size: clamp(8px, 1.9vh, 11px) !important;
    line-height: 1.15 !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 4 !important;
    overflow: hidden !important;
    font-size: clamp(8px, 1.9vh, 11px) !important;
    line-height: 1.28 !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-footer {
    flex: 0 0 auto !important;
    display: block !important;
    min-width: 0 !important;
    margin: 6px 0 0 !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-footer > div:first-child {
    display: none !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .portal-card-footer > div:last-child,
  body.sx-unified-ui #screenRankedTeamHub .portal-card-footer > div:last-child {
    display: grid !important;
    width: 100% !important;
    gap: 5px !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .portal-card-footer > div:last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.sx-unified-ui #screenRankedTeamHub .portal-card-footer > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-footer .skewed-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 5px 7px !important;
    font-size: clamp(8px, 1.8vh, 10px) !important;
    white-space: nowrap !important;
  }

  /* Solo license: retain every data field in a compact vertical dashboard. */
  body.sx-unified-ui #screenRankedSoloHub .player-license-card {
    justify-content: space-between !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-badge-container {
    width: clamp(58px, 20vh, 112px) !important;
    height: clamp(58px, 20vh, 112px) !important;
    margin: 0 !important;
    flex: 0 1 auto !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-tier-title {
    margin: 0 !important;
    font-size: clamp(12px, 2.8vh, 18px) !important;
    line-height: 1 !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-tier-title + div {
    display: none !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-stars-container {
    min-height: 12px !important;
    margin: 0 !important;
    gap: 3px !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-star {
    font-size: clamp(10px, 2.5vh, 16px) !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-bars-container {
    gap: 4px !important;
    margin: 0 !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-bar-wrapper {
    gap: 2px !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-bar-header {
    font-size: clamp(7px, 1.7vh, 10px) !important;
    line-height: 1 !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-progress-bg {
    height: clamp(5px, 1.2vh, 8px) !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-stat-box {
    min-width: 0 !important;
    padding: 3px 1px !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-stat-num {
    font-size: clamp(9px, 2vh, 12px) !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-stat-lbl {
    font-size: clamp(6px, 1.35vh, 8px) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere !important;
  }

  /* Team license: points and both museum categories remain visible. */
  body.sx-unified-ui #screenRankedTeamHub .player-license-card {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamClubName {
    flex: 0 0 auto !important;
    margin: 0 0 5px !important;
    font-size: clamp(12px, 2.7vh, 18px) !important;
    line-height: 1.05 !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamClubName + div {
    flex: 0 0 auto !important;
    margin: 0 0 5px !important;
    padding: 6px !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamClubName + div > div {
    margin-bottom: 2px !important;
    font-size: clamp(8px, 1.8vh, 11px) !important;
  }

  body.sx-unified-ui #screenRankedTeamHub .player-license-card > h4 {
    flex: 0 0 auto !important;
    margin: 0 0 4px !important;
    padding: 0 0 3px !important;
    font-size: clamp(9px, 2vh, 12px) !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamMuseumContainer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    gap: 4px !important;
    font-size: clamp(8px, 1.7vh, 10px) !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamMuseumContainer > div {
    gap: 4px !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamMuseumContainer > div > div {
    padding: 5px !important;
  }

  body.sx-unified-ui #screenRankedTeamHub #rankedTeamMuseumContainer .museum-detail-toggle-btn {
    min-height: 48px !important;
    height: 48px !important;
    padding: 3px 5px !important;
  }
}

/* Very short phones: descriptions yield space to the actions, never to scrolling. */
@media (orientation: landscape) and (max-height: 360px) {
  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) > h2 {
    min-height: 34px !important;
    font-size: clamp(15px, 4.4vh, 18px) !important;
  }

  body.sx-unified-ui :is(#screenRankedSoloHub, #screenRankedTeamHub) .portal-card-desc {
    display: none !important;
  }

  body.sx-unified-ui #screenRankedSoloHub .ranked-badge-container {
    width: clamp(48px, 17vh, 62px) !important;
    height: clamp(48px, 17vh, 62px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sxGlobalBackButton,
  body.sx-unified-ui #flow > section:not(#screenMainMenu) * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}