/*
 * Realms of Arkovia — Mobile V2 R159 production polish
 *
 * Presentation-only correction layer.
 * No gameplay, wallet, custody, marketplace, database, or economy behavior.
 */

@media screen and (max-width: 900px) {

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /*
   * MAP
   *
   * Mobile V2 already supplies the map preview, realm chooser,
   * detailed-map flow and mobile detail dialog. The legacy desktop
   * context column must not remain as an empty full-height panel.
   */

  body.map-page .roa-map-context {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 12px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.map-page .roa-map-context:empty {
    display: none !important;
    margin: 0 !important;
  }

  body.map-page .roa-map-command-center,
  body.map-page .map-workspace,
  body.map-page .roa-map-shell {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.map-page .roa-v2-map-controls {
    margin-bottom: 12px !important;
  }

  /*
   * GAME VAULT
   *
   * custody.ejs uses the standard shared RoA navigation.
   * R159 removes the orphaned prototype navigation stylesheet,
   * allowing the production shared header/dock to remain visible.
   */

  body.roa-custody-page .roa-custody-command-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.roa-custody-page .roa-custody-command-metrics > article {
    min-width: 0 !important;
  }

  body.roa-custody-page .roa-custody-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.roa-custody-page .roa-custody-workspace,
  body.roa-custody-page .roa-custody-panel,
  body.roa-custody-page .roa-custody-list {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /*
   * LOADOUT
   *
   * Mobile equipment must be a readable list, not a compressed
   * two-column desktop board. NFT names stay horizontal.
   */

  body.roa-loadout-page .roa-loadout-equipment-board {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"]) {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 14px !important;
    row-gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 132px !important;
    height: auto !important;
    max-height: none !important;
    padding: 12px !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    .roa-loadout-slot-art {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 96px !important;
    min-width: 96px !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    align-self: start !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    .roa-loadout-slot-art img {
    width: 100% !important;
    max-width: 96px !important;
    height: 108px !important;
    max-height: 108px !important;
    object-fit: contain !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    .roa-loadout-slot-label {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    > strong {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    > small {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card > strong,
  body.roa-loadout-page
    button.roa-loadout-slot-card > small,
  body.roa-loadout-page
    .roa-loadout-slot-label,
  body.roa-loadout-page
    .roa-loadout-slot-label *,
  body.roa-loadout-page
    .roa-loadout-inventory-copy,
  body.roa-loadout-page
    .roa-loadout-inventory-copy strong,
  body.roa-loadout-page
    .roa-loadout-inventory-copy small {
    min-width: 0 !important;
    max-width: 100% !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
    line-height: 1.3 !important;
  }

  body.roa-loadout-page .roa-loadout-inventory-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.roa-loadout-page
    button.roa-loadout-inventory-card,
  body.roa-loadout-page
    article.roa-loadout-inventory-card {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 128px !important;
  }

  body.roa-loadout-page
    .roa-loadout-inventory-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.roa-loadout-page
    .roa-loadout-inventory-card .roa-loadout-stat-grid,
  body.roa-loadout-page
    .roa-loadout-inventory-card [class*="stat"] {
    min-width: 0 !important;
  }

  body.roa-loadout-page .roa-loadout-inventory-art {
    width: 96px !important;
    min-width: 96px !important;
  }

  body.roa-loadout-page .roa-loadout-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /*
   * ADVENTURER
   */

  body.profile-page .adventurer-page-shell,
  body.profile-page .adventurer-command-center,
  body.profile-page .adventurer-primary-grid,
  body.profile-page .adventurer-tab-deck,
  body.profile-page .adventurer-tab-panel.is-active {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.profile-page .adventurer-tab-panel.is-active {
    overflow: visible !important;
  }

  body.profile-page .adventurer-tabs {
    max-width: 100% !important;
  }

  /*
   * MARKETPLACE + MARKET INTEL
   *
   * Desktop command-center minimum heights are not appropriate
   * when the page is in document-flow mobile mode.
   */

  body.roa-marketplace-family-page .roa-marketplace-command-shell,
  body.roa-marketplace-family-page .roa-marketplace-command-center,
  body.roa-marketplace-family-page .roa-marketplace-workspace,
  body.roa-marketplace-family-page .roa-trade-workspace,
  body.roa-marketplace-family-page .roa-trade-ticket,
  body.roa-marketplace-family-page .roa-marketplace-catalog,
  body.roa-marketplace-family-page .roa-marketplace-pulse-panel,
  body.roa-marketplace-family-page .roa-intel-workspace,
  body.roa-marketplace-family-page .roa-intel-chart {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.roa-marketplace-family-page .roa-marketplace-workspace,
  body.roa-marketplace-family-page .roa-trade-workspace,
  body.roa-marketplace-family-page .roa-intel-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.roa-marketplace-family-page .roa-marketplace-catalog,
  body.roa-marketplace-family-page .roa-marketplace-pulse-panel,
  body.roa-marketplace-family-page .roa-intel-chart {
    overflow: visible !important;
  }

  body.roa-marketplace-family-page table {
    max-width: none;
  }
}

@media screen and (max-width: 600px) {

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"]) {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    .roa-loadout-slot-art {
    width: 88px !important;
    min-width: 88px !important;
  }

  body.roa-loadout-page
    button.roa-loadout-slot-card:not([data-loadout-slot="hero"])
    .roa-loadout-slot-art img {
    max-width: 88px !important;
  }

  body.roa-loadout-page
    button.roa-loadout-inventory-card,
  body.roa-loadout-page
    article.roa-loadout-inventory-card {
    grid-template-columns: 88px minmax(0, 1fr) !important;
  }

  body.roa-loadout-page .roa-loadout-inventory-art {
    width: 88px !important;
    min-width: 88px !important;
  }
}

/* R161 exact mobile corrections */
@media screen and (max-width: 900px) {

  /*
   * MAP
   * Preserve selected realm details, but remove the oversized
   * decorative media/spacer that was consuming the phone viewport.
   */
  html body.map-page .roa-map-context {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-rows: auto !important;
    overflow: visible !important;
  }

  html body.map-page .roa-map-context::before,
  html body.map-page .roa-map-context::after {
    content: none !important;
    display: none !important;
  }

  html body.map-page
    .roa-map-context
    .region-card::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body.map-page
    .roa-map-context
    .region-card {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 14px !important;
  }

  /*
   * VAULT
   * Locked R134 design: the two counters remain side by side.
   */
  html body.r134-vault-summary.roa-custody-page
    header.roa-custody-command-header
    > div.roa-custody-command-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  html body.r134-vault-summary.roa-custody-page
    header.roa-custody-command-header
    > div.roa-custody-command-metrics
    > article {
    grid-column: auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /*
   * LOADOUT GEN1
   * Gen1 progression and G1 attribute grid belong in the content
   * column, not beneath the NFT artwork.
   */
  body.roa-loadout-page
    .roa-loadout-inventory-card
    > .roa-loadout-inventory-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  body.roa-loadout-page
    .roa-loadout-inventory-card
    > .roa-loadout-inventory-copy
    > .roa-loadout-inventory-copy[data-gen1-progression] {
    display: block !important;
    grid-column: auto !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  body.roa-loadout-page
    .roa-loadout-inventory-card
    > .roa-loadout-stat-grid[data-gen1-stats] {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
  }

  body.roa-loadout-page
    .roa-loadout-inventory-card
    > .roa-loadout-stat-grid[data-gen1-stats]
    > span {
    min-width: 0 !important;
    padding: 5px 2px !important;
    font-size: 0.62rem !important;
    line-height: 1.1 !important;
    text-align: center !important;
  }

  body.roa-loadout-page
    .roa-loadout-inventory-card
    > .roa-loadout-stat-grid:not([data-gen1-stats]) {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }
}

@media screen and (max-width: 600px) {

  body.roa-loadout-page
    .roa-loadout-inventory-card
    > .roa-loadout-stat-grid[data-gen1-stats] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  html body.r134-vault-summary.roa-custody-page
    header.roa-custody-command-header
    > div.roa-custody-command-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}