/*
 * ROA-PRODUCTION-LAYOUT-STABILIZATION-V1
 *
 * Production safety layer for the fixed HUD shell.
 *
 * The original command-center pages used 100dvh grids, hidden body overflow,
 * compressed minmax(0, 1fr) tracks, and a fixed bottom dock simultaneously.
 * At common desktop viewport heights, content was forced behind the dock or
 * clipped inside undersized tracks. This layer makes the document scroll the
 * final authority while preserving the fixed top HUD and bottom dock.
 */

/* Shared HUD viewport contract ------------------------------------------ */

html {
  min-height: 100%;
  overflow-x: hidden;
}

/*
 * Only the six production pages confirmed by visual evidence participate in
 * this stabilization contract. Other fixed-HUD pages keep their existing
 * page-scoped viewport behavior.
 */
:is(
  body.map-page,
  body.profile-page,
  body.roa-loadout-page,
  body.roa-crafting-page,
  body.roa-marketplace-page,
  body.roa-account-command-page
) {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

:is(
  body.map-page,
  body.profile-page,
  body.roa-loadout-page,
  body.roa-crafting-page,
  body.roa-marketplace-page,
  body.roa-account-command-page
) > main.container,
:is(
  body.map-page,
  body.profile-page,
  body.roa-loadout-page,
  body.roa-crafting-page,
  body.roa-marketplace-page,
  body.roa-account-command-page
) main.container {
  height: auto !important;
  min-height: 100dvh !important;
  padding-bottom:
    calc(var(--roa-dock-h, 64px) + 22px) !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.roa-bottom-dock {
  contain: layout paint;
}

/* Map ------------------------------------------------------------------- */

.map-page .container {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.map-page .roa-map-stage {
  grid-template-rows: minmax(560px, auto) auto !important;
  min-height: 640px;
  overflow: visible;
}

.map-page .world-map-panel {
  min-height: 560px;
}

.map-page .roa-map-shell {
  min-height: 540px;
}

.map-page .mission-status-panel.roa-map-status-strip {
  min-height: 62px;
  overflow: visible;
}

.map-page .encounter-showcase-panel {
  inset:
    calc(var(--roa-header-h, 88px) + 18px)
    max(18px, 14vw)
    auto !important;
  width: auto;
  height: auto !important;
  max-height:
    calc(
      100dvh
      - var(--roa-header-h, 88px)
      - var(--roa-dock-h, 64px)
      - 36px
    );
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Adventurer profile ---------------------------------------------------- */

.profile-page .container.adventurer-page-shell {
  grid-template-rows: auto auto !important;
  height: auto !important;
  overflow: visible !important;
}

.profile-page .adventurer-command-center {
  grid-template-rows: auto auto !important;
  min-height: 0;
}

.profile-page .adventurer-primary-grid {
  min-height: 350px;
}

.profile-page .adventurer-tab-deck {
  min-height: 320px;
}

.profile-page .adventurer-panel,
.profile-page .adventurer-tab-panel.is-active {
  overflow: visible;
}

.profile-page .adventurer-activity-score-grid span,
.profile-page .adventurer-prestige-strip span,
.profile-page .adventurer-prestige-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Loadout --------------------------------------------------------------- */

.roa-loadout-page .roa-loadout-command-shell {
  grid-template-rows: auto auto auto !important;
  height: auto !important;
  overflow: visible !important;
}

.roa-loadout-page .roa-loadout-command-workspace {
  min-height: 620px;
  overflow: visible !important;
}

.roa-loadout-page .roa-loadout-equipment-panel,
.roa-loadout-page .roa-loadout-inventory-panel {
  min-height: 590px;
}

.roa-loadout-page .roa-loadout-equipment-board {
  min-height: 410px;
}

.roa-loadout-page .roa-loadout-slot-label {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: clamp(0.48rem, 0.56vw, 0.58rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

.roa-loadout-page .roa-loadout-slot-card > strong,
.roa-loadout-page .roa-loadout-slot-card > small {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Crafting -------------------------------------------------------------- */

.roa-crafting-page .roa-crafting-command-shell {
  grid-template-rows: auto auto auto auto !important;
  height: auto !important;
  overflow: visible !important;
}

.roa-crafting-page .roa-crafting-material-pouch {
  min-height: 140px !important;
  overflow: visible !important;
}

.roa-crafting-page .roa-crafting-material-grid {
  min-height: 76px;
  grid-auto-rows: minmax(34px, auto);
}

.roa-crafting-page .roa-crafting-workspace {
  min-height: 590px;
  overflow: visible !important;
}

.roa-crafting-page .roa-crafting-codex,
.roa-crafting-page .roa-crafting-detail-panel {
  min-height: 560px;
}

/* Marketplace ----------------------------------------------------------- */

body.roa-marketplace-page .roa-marketplace-command-shell {
  grid-template-rows: auto auto auto auto !important;
  height: auto !important;
  overflow: visible !important;
}

body.roa-marketplace-page .roa-marketplace-workspace {
  min-height: 650px;
  overflow: visible !important;
}

body.roa-marketplace-page .roa-marketplace-catalog {
  min-height: 630px;
  overflow: visible !important;
}

body.roa-marketplace-page .roa-marketplace-catalog-scroll {
  min-height: 520px;
  overflow-y: auto;
}

body.roa-marketplace-page .roa-marketplace-right-rail {
  grid-template-rows: auto auto !important;
  min-height: 630px;
  overflow: visible !important;
}

body.roa-marketplace-page .roa-marketplace-trade-desk {
  min-height: 430px;
  overflow: visible !important;
}

body.roa-marketplace-page .roa-marketplace-pulse {
  min-height: 190px;
}

/* Account --------------------------------------------------------------- */

body.roa-account-command-page .roa-account-command-shell {
  grid-template-rows: auto auto auto !important;
  height: auto !important;
  overflow: visible !important;
}

body.roa-account-command-page .roa-account-command-workspace {
  min-height: 650px;
  overflow: visible !important;
}

body.roa-account-command-page .roa-account-identity-panel {
  grid-template-rows: auto auto auto auto auto !important;
  min-height: 630px;
  overflow: visible !important;
}

body.roa-account-command-page .roa-account-vault-panel {
  min-height: 630px;
  overflow: visible !important;
}

body.roa-account-command-page .roa-account-status-list {
  min-height: max-content;
}

body.roa-account-command-page .roa-account-identity-actions {
  position: static;
  align-self: end;
}

/* Compact desktop heights ---------------------------------------------- */

@media (max-height: 860px) and (min-width: 1121px) {
  :is(
    body.map-page,
    body.profile-page,
    body.roa-loadout-page,
    body.roa-crafting-page,
    body.roa-marketplace-page,
    body.roa-account-command-page
  ) > main.container,
  :is(
    body.map-page,
    body.profile-page,
    body.roa-loadout-page,
    body.roa-crafting-page,
    body.roa-marketplace-page,
    body.roa-account-command-page
  ) main.container {
    padding-bottom:
      calc(var(--roa-dock-h, 64px) + 20px) !important;
  }

  .roa-crafting-page .roa-crafting-command-shell,
  .roa-loadout-page .roa-loadout-command-shell,
  body.roa-marketplace-page .roa-marketplace-command-shell,
  body.roa-account-command-page .roa-account-command-shell {
    grid-template-rows: auto auto auto auto !important;
  }

  .roa-crafting-page .roa-crafting-material-pouch {
    min-height: 140px !important;
  }

  .roa-loadout-page .roa-loadout-command-workspace {
    min-height: 600px;
  }
}

/* Responsive fallback --------------------------------------------------- */

@media (max-width: 1120px) {
  .map-page .roa-map-stage,
  .profile-page .adventurer-command-center,
  .roa-loadout-page .roa-loadout-command-workspace,
  .roa-crafting-page .roa-crafting-workspace,
  body.roa-marketplace-page .roa-marketplace-workspace,
  body.roa-account-command-page .roa-account-command-workspace {
    min-height: 0;
  }

  .map-page .world-map-panel,
  .map-page .roa-map-shell,
  .profile-page .adventurer-primary-grid,
  .profile-page .adventurer-tab-deck,
  .roa-loadout-page .roa-loadout-equipment-panel,
  .roa-loadout-page .roa-loadout-inventory-panel,
  .roa-crafting-page .roa-crafting-codex,
  .roa-crafting-page .roa-crafting-detail-panel,
  body.roa-marketplace-page .roa-marketplace-catalog,
  body.roa-marketplace-page .roa-marketplace-right-rail,
  body.roa-account-command-page .roa-account-identity-panel,
  body.roa-account-command-page .roa-account-vault-panel {
    min-height: 0;
  }
}


/* ==========================================================================
   ROA-MAP-FIXED-VIEWPORT-CORRECTION-V3

   Map-only exception to the V1 document-scrolling layer.

   The World Map remains a one-screen command-center HUD. The realm list and
   region details keep their existing internal scrolling behavior.
   ========================================================================== */

body.map-page {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.map-page > main.container,
body.map-page main.container {
  height: 100dvh !important;
  min-height: 0 !important;
  padding-bottom:
    calc(var(--roa-dock-h, 82px) + 10px) !important;
  overflow: hidden !important;
}

.map-page .roa-map-command-center {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.map-page .roa-map-stage {
  grid-template-rows:
    minmax(0, 1fr)
    62px !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.map-page .world-map-panel {
  min-height: 0 !important;
  overflow: hidden !important;
}

.map-page .roa-map-shell {
  min-height: 0 !important;
  overflow: hidden !important;
}

.map-page .mission-status-panel.roa-map-status-strip {
  min-height: 0 !important;
  overflow: hidden !important;
}

.map-page .roa-realm-navigator,
.map-page .roa-map-context {
  min-height: 0 !important;
  overflow: hidden !important;
}

.map-page .roa-realm-list,
.map-page .region-grid {
  min-height: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}

/*
 * Mission-result and rare-discovery overlays remain bounded between
 * the fixed top HUD and fixed bottom dock. Only their content may scroll.
 */
.map-page .encounter-showcase-panel {
  inset:
    calc(var(--roa-header-h, 96px) + 18px)
    max(18px, 14vw)
    calc(var(--roa-dock-h, 82px) + 18px)
    !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* ROA-PROFILE-FIXED-VIEWPORT-CORRECTION-V4
 *
 * Desktop-only Adventurer Profile correction.
 *
 * Desktop Profile becomes one three-column command workspace:
 *
 *   1. Adventurer Identity / NFT showcase
 *   2. Combat Readout / Power & Activity Scores
 *   3. Profile tab workspace
 *
 * Mission Control / Readiness remains in the template and data contract but
 * is intentionally hidden from the desktop Profile because mission readiness
 * is already presented on the World Map.
 *
 * Tablet and mobile Profile behavior remains governed by the existing
 * responsive Adventurer rules.
 *
 * The approved World Map layout is not modified by this block.
 */
@media (min-width: 1121px) {
  body.profile-page {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  body.profile-page > main.container,
  body.profile-page main.container.adventurer-page-shell {
    height: 100dvh !important;
    min-height: 0 !important;
    padding-bottom:
      calc(var(--roa-dock-h, 64px) + 16px) !important;
    overflow: hidden !important;
  }

  .profile-page .container.adventurer-page-shell {
    display: grid !important;
    grid-template-rows:
      auto minmax(0, 1fr) !important;
    gap: 8px;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * The former primary-grid wrapper becomes layout-transparent so its
   * Identity and Power panels can participate directly in the same grid as
   * the tab deck.
   */
  .profile-page .adventurer-command-center {
    display: grid !important;
    grid-template-columns:
      minmax(290px, 0.29fr)
      minmax(340px, 0.34fr)
      minmax(380px, 0.37fr) !important;
    grid-template-rows:
      minmax(0, 1fr) !important;
    gap: 8px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .profile-page .adventurer-primary-grid {
    display: contents !important;
  }

  /*
   * COLUMN 1 — Adventurer / NFT showcase.
   */
  .profile-page .adventurer-identity-panel {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows:
      minmax(220px, 1fr)
      auto
      auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .profile-page .adventurer-portrait {
    min-height: 220px !important;
  }

  .profile-page .adventurer-portrait > img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  /*
   * COLUMN 2 — Combat Readout.
   *
   * This panel now owns the full command-center height, eliminating the
   * footer clipping that occurred when it shared vertical space with the
   * tab deck.
   */
  .profile-page .adventurer-power-panel {
    grid-column: 2;
    grid-row: 1;
    display: grid !important;
    grid-template-rows:
      auto
      clamp(132px, 18dvh, 170px)
      minmax(92px, 1fr)
      auto !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Compact the two headline power cards. Their job is to establish the
   * primary numbers, not consume most of the column height.
   */
  .profile-page .adventurer-power-banner {
    min-height: 0 !important;
    gap: 7px !important;
  }

  .profile-page .adventurer-power-banner article {
    grid-template-columns:
      44px minmax(0, 1fr) !important;
    align-content: center !important;
    gap: 0 8px !important;
    min-height: 0 !important;
    padding: 9px 11px !important;
  }

  .profile-page .adventurer-power-banner img {
    width: 42px !important;
    height: 42px !important;
  }

  .profile-page .adventurer-power-banner strong {
    font-size:
      clamp(1.45rem, 1.8vw, 1.9rem) !important;
  }

  /*
   * Five activity scores become a 3 + 2 information grid instead of five
   * compressed cells on one line.
   *
   * Six logical columns allow:
   *   row 1: 2 + 2 + 2
   *   row 2: 3 + 3
   */
  .profile-page .adventurer-activity-score-grid {
    display: grid !important;
    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows:
      repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    gap: 6px !important;
  }

  .profile-page .adventurer-activity-score-grid article {
    grid-column: span 2;
    grid-template-columns:
      30px minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 7px 9px !important;
  }

  .profile-page
    .adventurer-activity-score-grid
    article:nth-child(4),
  .profile-page
    .adventurer-activity-score-grid
    article:nth-child(5) {
    grid-column: span 3;
  }

  .profile-page .adventurer-activity-score-grid img {
    width: 28px !important;
    height: 28px !important;
  }

  .profile-page .adventurer-activity-score-grid span {
    overflow: visible !important;
    font-size: 0.56rem !important;
    line-height: 1.08 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .profile-page .adventurer-activity-score-grid strong {
    overflow: visible !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
    text-overflow: clip !important;
  }

  /*
   * Season / prestige values become four readable cards instead of one
   * extremely compressed four-cell strip.
   */
  .profile-page .adventurer-prestige-strip {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:
      repeat(2, minmax(40px, auto)) !important;
    gap: 6px !important;
  }

  .profile-page .adventurer-prestige-strip > span {
    min-width: 0 !important;
    padding: 7px 9px !important;
    border:
      1px solid rgba(216, 184, 107, 0.14) !important;
    background: rgba(0, 0, 0, 0.24) !important;
  }

  .profile-page .adventurer-prestige-strip small {
    overflow: visible !important;
    font-size: 0.56rem !important;
    line-height: 1.08 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  .profile-page .adventurer-prestige-strip strong {
    overflow: visible !important;
    font-size: 0.82rem !important;
    line-height: 1.08 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /*
   * Mission readiness is intentionally removed from the DESKTOP Profile
   * presentation only. The markup, values, cooldown logic and mobile layout
   * remain untouched.
   */
  .profile-page .adventurer-readiness-panel {
    display: none !important;
  }

  /*
   * COLUMN 3 — Active Profile tab workspace.
   */
  .profile-page .adventurer-tab-deck {
    grid-column: 3;
    grid-row: 1;
    display: grid !important;
    grid-template-rows:
      auto minmax(0, 1fr) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Five tabs fit the narrower information column as a compact 3 + 2 deck.
   */
  .profile-page .adventurer-tabs {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .profile-page .adventurer-tab {
    min-width: 0 !important;
    width: 100% !important;
  }

  .profile-page .adventurer-tab:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .profile-page .adventurer-tab-panel,
  .profile-page .adventurer-tab-panel.is-active {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Overview cards stack vertically inside the right-hand workspace and
   * scroll internally when necessary.
   */
  .profile-page .adventurer-overview-grid {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-right: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
  }

  /*
   * Overview cards must size from their actual content.
   * The right-side workspace scrolls; individual cards must never clip
   * their campaign, activity, or material values.
   */
  .profile-page .adventurer-overview-card {
    display: grid !important;
    grid-template-rows:
      auto auto !important;
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
  }

  .profile-page
    .adventurer-overview-card
    .adventurer-detail-list {
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
  }

  .profile-page .adventurer-weekly-grid {
    grid-auto-rows:
      minmax(42px, auto) !important;
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
  }

  .profile-page .adventurer-material-preview {
    grid-auto-rows:
      minmax(42px, auto) !important;
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
  }

  /*
   * Progression also becomes a single-column information stream.
   */
  .profile-page .adventurer-progression-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
    align-content: start !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .profile-page .adventurer-progression-card--wide {
    grid-column: auto !important;
  }

  .profile-page .adventurer-progression-card > div {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .profile-page
    .adventurer-progression-card
    .adventurer-material-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  /*
   * Achievement categories use the full right-column width.
   */
  .profile-page .adventurer-achievement-list {
    grid-template-columns:
      minmax(0, 1fr) !important;
    align-content: start !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /*
   * Titles keep the controls above the scrollable title collection instead
   * of trying to render two narrow side-by-side columns.
   */
  .profile-page .adventurer-title-workspace {
    grid-template-columns:
      minmax(0, 1fr) !important;
    grid-template-rows:
      auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .profile-page .adventurer-title-control {
    min-height: 0 !important;
    overflow: visible !important;
  }

  .profile-page .adventurer-title-list {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  .profile-page .adventurer-journal-list {
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}

/* ==========================================================================
   ROA-MAP-MOBILE-RESPONSIVE-CORRECTION-V5

   Mobile/tablet-only World Map correction.

   Desktop World Map V3 remains authoritative above 1120px.

   Mobile presentation order:
     1. World Map
     2. Realm selector
     3. Mission readiness
     4. Selected realm details

   Mission logic, realm data, hotspot coordinates, routes, cooldown behavior,
   shared navigation, and desktop geometry remain unchanged.
   ========================================================================== */

@media (max-width: 1120px) {
  /*
   * Release the desktop V3 fixed-viewport contract on narrow viewports.
   * Mobile uses normal document scrolling while the fixed HUD padding remains.
   */
  body.map-page {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.map-page > main.container,
  body.map-page main.container {
    height: auto !important;
    min-height: 100dvh !important;
    padding:
      calc(var(--roa-header-h, 96px) + 10px)
      8px
      calc(var(--roa-dock-h, 82px) + 18px)
      !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /*
   * The command center becomes a vertical mobile flow.
   *
   * display: contents on the map-stage promotes the actual map and readiness
   * strip into the command-center grid so the Realm selector can sit between
   * them without altering map.ejs.
   */
  .map-page .roa-map-command-center {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "world-map"
      "realm-nav"
      "readiness"
      "realm-context" !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .map-page .roa-map-stage {
    display: contents !important;
  }

  /*
   * WORLD MAP
   *
   * Preserve a useful map canvas instead of allowing the desktop grid to
   * squeeze it into a narrow horizontal strip.
   */
  .map-page .world-map-panel {
    grid-area: world-map;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px !important;
    overflow: hidden !important;
  }

  .map-page .roa-map-shell {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    overflow: hidden !important;
  }

  .map-page .roa-world-map-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    object-fit: contain !important;
  }

  /*
   * REALM SELECTOR
   *
   * Replace the tall desktop navigator with a compact horizontal rail.
   */
  .map-page .roa-realm-navigator {
    grid-area: realm-nav;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 7px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  .map-page .roa-realm-navigator h2 {
    margin: 0 !important;
    text-align: left !important;
    font-size: 0.82rem !important;
  }

  .map-page .roa-realm-list {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding:
      0
      2px
      5px
      0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .map-page .roa-realm-button {
    flex:
      0 0
      clamp(188px, 54vw, 250px) !important;
    width: auto !important;
    min-width: 188px !important;
    min-height: 54px !important;
    scroll-snap-align: start;
  }

  /*
   * Keep the currently selected realm visible at the front of the
   * horizontally scrolling mobile realm rail.
   */
  .map-page .roa-realm-button.is-active,
  .map-page .roa-realm-button[aria-pressed="true"] {
    order: -1;
  }

  .map-page .roa-realm-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-top: 6px !important;
  }

  /*
   * MISSION READINESS
   *
   * Four desktop status cards become a readable 2x2 mobile matrix.
   */
  .map-page .mission-status-panel.roa-map-status-strip {
    grid-area: readiness;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .map-page .mission-status-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    gap: 6px !important;
  }

  .map-page .mission-status-card {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 7px 9px !important;
    overflow: hidden !important;
  }

  .map-page .mission-status-card strong {
    overflow: visible !important;
    font-size: 0.7rem !important;
    line-height: 1.15 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  /*
   * SELECTED REALM
   *
   * Details are allowed to size naturally and participate in page scrolling.
   */
  .map-page .roa-map-context {
    grid-area: realm-context;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .map-page .roa-map-context > h2 {
    margin:
      0
      0
      9px !important;
  }

  .map-page .region-grid {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .map-page .region-card {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .map-page .region-meta-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .map-page .region-detail-columns {
    grid-template-columns:
      minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .map-page .mission-action-forms {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .map-page .mission-launch-form,
  .map-page .mission-launch-button {
    width: 100% !important;
    max-width: none !important;
  }

  /*
   * Mission-result overlays remain modal and bounded to the mobile viewport.
   */
  .map-page .encounter-showcase-panel {
    position: fixed !important;
    inset:
      calc(var(--roa-header-h, 96px) + 8px)
      8px
      calc(var(--roa-dock-h, 82px) + 8px)
      !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 600px) {
  .map-page .world-map-panel {
    border-width: 8px !important;
  }

  .map-page .roa-realm-button {
    flex-basis:
      clamp(190px, 76vw, 245px) !important;
  }

  .map-page .roa-map-context {
    padding: 10px !important;
  }

  .map-page .region-meta-grid {
    gap: 5px !important;
  }

  .map-page .region-meta-grid span {
    min-width: 0 !important;
    overflow-wrap: anywhere;
  }
}

/* ROA-MAP-MOBILE-RESPONSIVE-CORRECTION-V5-END */

/* ==========================================================================
   ROA-LOADOUT-RESPONSIVE-CORRECTION-V6

   Responsive Loadout workspace redesign.

   Goals:
   - restore a contained one-screen desktop command workspace;
   - reduce oversized header/activity chrome;
   - keep Hero visually dominant without wasting the equipment board;
   - present the other six equipment slots as compact readable gear tiles;
   - give Owned RoA NFT inventory more useful screen area;
   - use normal document flow and touch-friendly controls on mobile/tablet.

   Loadout routes, NFT inventory data, slot staging, save behavior, activity
   locks, mode behavior, Battle Power, backend validation, shared navigation,
   Map, Profile, and Crafting remain unchanged.
   ========================================================================== */


/* --------------------------------------------------------------------------
   DESKTOP / LAPTOP
   -------------------------------------------------------------------------- */

@media (min-width: 1121px) {

  body.roa-loadout-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .roa-loadout-page .roa-loadout-command-shell {
    display: grid !important;
    grid-template-rows:
      70px
      64px
      minmax(0, 1fr) !important;
    gap: 8px !important;

    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;

    padding:
      calc(var(--roa-header-h, 96px) + 8px)
      12px
      calc(var(--roa-dock-h, 82px) + 8px)
      !important;

    overflow: hidden !important;
  }


  /* COMMAND HEADER ------------------------------------------------------- */

  .roa-loadout-page .roa-loadout-command-header {
    display: grid !important;

    grid-template-columns:
      minmax(250px, 0.82fr)
      minmax(410px, 1.16fr)
      auto !important;

    align-items: center !important;

    width: 100% !important;
    height: 70px !important;
    min-height: 0 !important;

    gap: 8px !important;
    padding: 5px 10px !important;

    border-width: 12px !important;
    overflow: hidden !important;
  }

  .roa-loadout-page .roa-loadout-command-title {
    gap: 8px !important;
  }

  .roa-loadout-page .roa-loadout-command-title > img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .roa-loadout-page .roa-loadout-command-title h1 {
    font-size: 1.28rem !important;
    line-height: 1 !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title
  p:not(.eyebrow),

  .roa-loadout-page
  .roa-loadout-command-title
  small {
    display: none !important;
  }

  .roa-loadout-page .roa-loadout-command-metrics {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics
  article {
    min-height: 42px !important;
    padding: 4px 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics
  span {
    font-size: 0.52rem !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics
  strong {
    font-size: 0.78rem !important;
  }

  .roa-loadout-page
  .roa-loadout-command-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-mode-form {
    display: flex !important;
    gap: 5px !important;
  }

  .roa-loadout-page .roa-loadout-theme-button,
  .roa-loadout-page button.roa-loadout-theme-button,
  .roa-loadout-page a.roa-loadout-theme-button {
    min-width: 88px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 0.64rem !important;
  }


  /* ACTIVITY SELECTOR ---------------------------------------------------- */

  body.roa-loadout-page
  .roa-loadout-activity-tabs {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 7px !important;

    width: 100% !important;
    height: 64px !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      30px
      minmax(0, 1fr)
      50px !important;

    grid-template-rows:
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;

    width: 100% !important;
    height: 64px !important;
    min-height: 0 !important;

    gap: 0 6px !important;
    padding: 6px 10px !important;

    overflow: hidden !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > img {
    position: static !important;

    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 28px !important;
    height: 28px !important;

    transform: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: grid !important;

    width: auto !important;
    min-width: 0 !important;

    gap: 1px !important;

    transform: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span strong {
    overflow: hidden !important;

    font-size: 0.72rem !important;
    line-height: 1.05 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span small {
    overflow: hidden !important;

    font-size: 0.52rem !important;
    line-height: 1.05 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i {
    position: static !important;

    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    display: grid !important;

    width: auto !important;
    min-width: 0 !important;

    align-content: center !important;
    justify-items: end !important;

    overflow: visible !important;

    text-align: right !important;

    transform: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i b {
    font-size: 0.92rem !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i small {
    font-size: 0.45rem !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > em {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 2 !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;

    overflow: hidden !important;

    font-size: 0.49rem !important;
    line-height: 1 !important;

    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /* MAIN WORKSPACE ------------------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-command-workspace {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1.12fr)
      minmax(440px, 1fr) !important;

    gap: 10px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;
  }

  .roa-loadout-page
  .roa-loadout-equipment-panel,

  .roa-loadout-page
  .roa-loadout-inventory-panel {
    height: auto !important;
    min-height: 0 !important;

    border-width: 14px !important;

    overflow: hidden !important;
  }

  .roa-loadout-page
  .roa-loadout-equipment-panel {
    display: grid !important;

    grid-template-rows:
      auto
      minmax(0, 1fr)
      auto !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-panel {
    display: grid !important;

    grid-template-rows:
      auto
      auto
      minmax(0, 1fr)
      auto !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-panel-heading {
    min-height: 46px !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }

  .roa-loadout-page
  .roa-loadout-panel-heading h2 {
    font-size: 0.94rem !important;
  }

  .roa-loadout-page
  .roa-loadout-panel-heading
  p:not(.eyebrow) {
    font-size: 0.58rem !important;
  }


  /* EQUIPMENT BOARD ------------------------------------------------------ */

  .roa-loadout-page
  .roa-loadout-equipment-board {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(3, minmax(0, 1fr)) !important;

    grid-template-areas:
      "hero hero helm shoulder"
      "hero hero weapon armor"
      "hero hero familiar accessory"
      !important;

    gap: 6px !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 2px !important;

    overflow: hidden !important;
  }

  .roa-loadout-page
  button.roa-loadout-slot-card {
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) {
    display: grid !important;

    grid-template-columns:
      minmax(54px, 38%)
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      minmax(0, 1fr) !important;

    grid-template-areas:
      "slot-art slot-label"
      "slot-art slot-name" !important;

    column-gap: 7px !important;
    row-gap: 2px !important;

    padding: 6px 7px !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  )
  .roa-loadout-slot-label {
    align-self: end !important;

    justify-content: flex-start !important;

    font-size: 0.57rem !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) > strong {
    align-self: start !important;

    font-size: 0.66rem !important;
    line-height: 1.15 !important;

    text-align: left !important;

    white-space: normal !important;

    -webkit-line-clamp: 2 !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card[data-loadout-slot="hero"] {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      22px
      minmax(0, 1fr)
      20px
      17px !important;

    grid-template-areas:
      "slot-label"
      "slot-art"
      "slot-name"
      "slot-meta" !important;

    padding: 8px !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card[data-loadout-slot="hero"]
  .roa-loadout-slot-art img {
    width: 100% !important;
    height: 100% !important;

    max-width: 230px !important;
    max-height: 250px !important;

    object-fit: contain !important;
  }


  /* EQUIPMENT ACTIONS ---------------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-action-bar {
    display: grid !important;

    grid-template-columns:
      auto
      auto
      minmax(190px, 1fr)
      auto !important;

    gap: 5px !important;

    min-height: 38px !important;

    padding-top: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-action-bar
  .roa-loadout-theme-button {
    min-height: 34px !important;
  }


  /* INVENTORY ------------------------------------------------------------ */

  .roa-loadout-page
  .roa-loadout-slot-tabs {
    min-height: 34px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  .roa-loadout-page
  .roa-loadout-slot-tabs button {
    min-width: 72px !important;
    min-height: 32px !important;

    padding: 4px 7px !important;

    font-size: 0.58rem !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-scroll {
    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

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

    align-content: start !important;

    gap: 6px !important;
  }

  body.roa-loadout-page
  button.roa-loadout-inventory-card,

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

    min-height: 116px !important;

    gap: 5px 7px !important;

    padding: 7px !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-art > img {
    max-height: 96px !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-copy strong {
    font-size: 0.68rem !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-copy small {
    font-size: 0.51rem !important;
  }

  .roa-loadout-page
  .roa-loadout-stat-grid > span {
    padding: 3px 2px !important;
    font-size: 0.46rem !important;
  }

  .roa-loadout-page
  .roa-loadout-stat-grid strong {
    font-size: 0.57rem !important;
  }

}


/* --------------------------------------------------------------------------
   MOBILE / TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {

  body.roa-loadout-page {
    height: auto !important;
    min-height: 100dvh !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .roa-loadout-page
  .roa-loadout-command-shell {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto
      auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100dvh !important;

    gap: 8px !important;

    padding:
      calc(var(--roa-header-h, 96px) + 8px)
      8px
      calc(var(--roa-dock-h, 82px) + 20px)
      !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;
  }


  /* MOBILE COMMAND HEADER ----------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-command-header {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    align-items: stretch !important;

    gap: 8px !important;

    padding: 9px !important;

    border-width: 12px !important;

    overflow: visible !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title > img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title h1 {
    font-size: 1.18rem !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title
  p:not(.eyebrow),

  .roa-loadout-page
  .roa-loadout-command-title
  small {
    display: none !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics
  article {
    min-height: 46px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-actions {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-mode-form {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-actions
  > a {
    width: 100% !important;
  }


  /* MOBILE ACTIVITY RAIL ------------------------------------------------- */

  body.roa-loadout-page
  .roa-loadout-activity-tabs {
    display: flex !important;

    align-items: stretch !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 6px !important;

    padding:
      0
      2px
      5px
      0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x proximity;

    -webkit-overflow-scrolling: touch;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      28px
      minmax(0, 1fr)
      42px !important;

    grid-template-rows:
      minmax(0, 1fr)
      auto !important;

    flex:
      0 0
      clamp(190px, 62vw, 245px) !important;

    width: auto !important;
    height: 58px !important;
    min-width: 190px !important;
    min-height: 58px !important;

    gap: 0 5px !important;

    padding: 6px 9px !important;

    overflow: hidden !important;

    scroll-snap-align: start;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab.is-active,

  body.roa-loadout-page
  .roa-loadout-activity-tab[aria-current="page"] {
    order: -1;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > img {
    position: static !important;

    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 26px !important;
    height: 26px !important;

    transform: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: grid !important;

    width: auto !important;
    min-width: 0 !important;

    transform: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span strong {
    font-size: 0.68rem !important;
    line-height: 1.05 !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span small {
    overflow: hidden !important;

    font-size: 0.49rem !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i {
    position: static !important;

    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    display: grid !important;

    width: auto !important;

    align-content: center !important;
    justify-items: end !important;

    transform: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i b {
    font-size: 0.84rem !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i small {
    font-size: 0.42rem !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > em {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 2 !important;

    width: auto !important;

    overflow: hidden !important;

    font-size: 0.46rem !important;

    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /* MOBILE WORKSPACE ----------------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-command-workspace {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 8px !important;

    overflow: visible !important;
  }

  .roa-loadout-page
  .roa-loadout-equipment-panel,

  .roa-loadout-page
  .roa-loadout-inventory-panel {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    border-width: 12px !important;

    overflow: visible !important;
  }

  .roa-loadout-page
  .roa-loadout-equipment-panel {
    display: grid !important;

    grid-template-rows:
      auto
      auto
      auto !important;

    gap: 7px !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-panel {
    display: grid !important;

    grid-template-rows:
      auto
      auto
      auto
      auto !important;

    gap: 7px !important;
  }

  .roa-loadout-page
  .roa-loadout-panel-heading {
    align-items: flex-start !important;

    flex-wrap: wrap !important;

    min-height: 0 !important;
  }

  .roa-loadout-page
  .roa-loadout-panel-heading h2 {
    overflow: visible !important;

    white-space: normal !important;
  }

  .roa-loadout-page
  .roa-loadout-panel-heading
  p:not(.eyebrow) {
    overflow: visible !important;

    white-space: normal !important;
  }


  /* MOBILE EQUIPMENT BOARD ---------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-equipment-board {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      auto !important;

    grid-template-areas:
      "hero hero"
      "helm shoulder"
      "weapon armor"
      "familiar accessory"
      !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    gap: 6px !important;

    padding: 2px !important;

    overflow: visible !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card[data-loadout-slot="hero"] {
    min-height: 270px !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      22px
      minmax(190px, 1fr)
      auto
      auto !important;

    grid-template-areas:
      "slot-label"
      "slot-art"
      "slot-name"
      "slot-meta" !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) {
    display: grid !important;

    grid-template-columns:
      minmax(54px, 38%)
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      minmax(0, 1fr) !important;

    grid-template-areas:
      "slot-art slot-label"
      "slot-art slot-name" !important;

    min-height: 118px !important;

    column-gap: 6px !important;

    padding: 6px !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  )
  .roa-loadout-slot-label {
    justify-content: flex-start !important;

    font-size: 0.59rem !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) > strong {
    font-size: 0.68rem !important;

    text-align: left !important;

    white-space: normal !important;
  }


  /* MOBILE ACTIONS ------------------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-action-bar {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-action-bar
  form {
    width: 100% !important;
  }

  .roa-loadout-page
  .roa-loadout-save-form {
    grid-column: 1 / -1 !important;
  }

  .roa-loadout-page
  .roa-loadout-action-bar
  .roa-loadout-theme-button {
    width: 100% !important;
  }


  /* MOBILE INVENTORY ----------------------------------------------------- */

  .roa-loadout-page
  .roa-loadout-slot-tabs {
    display: flex !important;

    gap: 4px !important;

    width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
  }

  .roa-loadout-page
  .roa-loadout-slot-tabs button {
    flex: 0 0 auto !important;

    min-width: 82px !important;
  }

  .roa-loadout-page
  .roa-loadout-inventory-scroll {
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }

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

    gap: 6px !important;
  }

  body.roa-loadout-page
  button.roa-loadout-inventory-card,

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

    min-height: 128px !important;

    padding: 7px !important;
  }

}


/* --------------------------------------------------------------------------
   PHONE
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

  .roa-loadout-page
  .roa-loadout-command-shell {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-header {
    padding: 8px !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab {
    flex-basis:
      clamp(188px, 76vw, 236px) !important;
  }

  .roa-loadout-page
  .roa-loadout-equipment-board {
    gap: 5px !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card[data-loadout-slot="hero"] {
    min-height: 250px !important;
  }

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

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

    min-height: 108px !important;

    padding: 5px !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  )
  .roa-loadout-slot-label {
    font-size: 0.54rem !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) > strong {
    font-size: 0.62rem !important;
  }

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

  .roa-loadout-page
  .roa-loadout-save-form {
    grid-column: auto !important;
  }

  .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:
      92px
      minmax(0, 1fr) !important;

    min-height: 132px !important;
  }

}




/* --------------------------------------------------------------------------
   ROA-LOADOUT-MOBILE-CONTAINMENT-REFINEMENT-V6-1

   Phone/tablet containment refinement only.

   Desktop V6 geometry above 1120px remains unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {

  .roa-loadout-page .roa-loadout-command-shell,
  .roa-loadout-page .roa-loadout-command-header,
  .roa-loadout-page .roa-loadout-command-workspace,
  .roa-loadout-page .roa-loadout-equipment-panel,
  .roa-loadout-page .roa-loadout-inventory-panel,
  .roa-loadout-page .roa-loadout-equipment-board,
  .roa-loadout-page .roa-loadout-action-bar,
  .roa-loadout-page .roa-loadout-command-title,
  .roa-loadout-page .roa-loadout-command-metrics,
  .roa-loadout-page .roa-loadout-command-actions,
  .roa-loadout-page .roa-loadout-mode-form {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /*
   * Prevent legacy minimum button widths from forcing the
   * command header beyond the phone viewport.
   */
  .roa-loadout-page .roa-loadout-command-actions
  .roa-loadout-theme-button,
  .roa-loadout-page .roa-loadout-mode-form
  .roa-loadout-theme-button,
  .roa-loadout-page .roa-loadout-command-actions > a {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Metrics must remain completely inside the command frame.
   */
  .roa-loadout-page .roa-loadout-command-metrics {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .roa-loadout-page .roa-loadout-command-metrics article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .roa-loadout-page .roa-loadout-command-metrics span,
  .roa-loadout-page .roa-loadout-command-metrics strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /*
   * Selected-activity information becomes a stacked heading
   * followed by two equal status cells.
   */
  .roa-loadout-page
  .roa-loadout-equipment-panel
  > .roa-loadout-panel-heading {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roa-loadout-page .roa-loadout-selected-status {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;

    justify-content: stretch !important;
  }

  .roa-loadout-page .roa-loadout-selected-status span {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;

    text-align: center !important;
    white-space: normal !important;
  }

  /*
   * Every equipment card participates in the two-column
   * mobile grid without introducing intrinsic overflow.
   */
  .roa-loadout-page .roa-loadout-slot-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  )
  .roa-loadout-slot-label,
  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) > strong {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /*
   * Inventory must never widen the document.
   */
  .roa-loadout-page .roa-loadout-slot-tabs,
  .roa-loadout-page .roa-loadout-inventory-scroll,
  .roa-loadout-page .roa-loadout-inventory-grid,
  .roa-loadout-page .roa-loadout-inventory-card {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roa-loadout-page .roa-loadout-inventory-scroll {
    width: 100% !important;
  }

  /*
   * Keep horizontal scrolling only where intentional:
   * activity selector and inventory category selector.
   */
  .roa-loadout-page .roa-loadout-command-shell,
  .roa-loadout-page .roa-loadout-command-header,
  .roa-loadout-page .roa-loadout-command-workspace,
  .roa-loadout-page .roa-loadout-equipment-panel,
  .roa-loadout-page .roa-loadout-inventory-panel {
    overflow-x: hidden !important;
  }

  body.roa-loadout-page .roa-loadout-activity-tabs,
  .roa-loadout-page .roa-loadout-slot-tabs {
    overflow-x: auto !important;
  }
}


@media (max-width: 600px) {

  /*
   * A phone does not need a desktop-sized Hero presentation.
   * Keep it prominent but expose the secondary equipment sooner.
   */
  body.roa-loadout-page
  button.roa-loadout-slot-card[data-loadout-slot="hero"] {
    min-height: 215px !important;

    grid-template-rows:
      20px
      minmax(145px, 1fr)
      auto
      auto !important;
  }

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

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

    min-height: 100px !important;
  }

  /*
   * Slightly tighter command metrics on phones.
   */
  .roa-loadout-page .roa-loadout-command-metrics article {
    min-height: 42px !important;
    padding: 4px !important;
  }

  .roa-loadout-page .roa-loadout-command-metrics span {
    font-size: 0.55rem !important;
  }

  .roa-loadout-page .roa-loadout-command-metrics strong {
    font-size: 0.8rem !important;
  }

  /*
   * Keep all action controls inside the phone width.
   */
  .roa-loadout-page .roa-loadout-action-bar,
  .roa-loadout-page .roa-loadout-action-bar form,
  .roa-loadout-page .roa-loadout-action-bar button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Phone inventory remains one card per row.
   */
  .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:
      82px
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
  }
}




/* --------------------------------------------------------------------------
   ROA-LOADOUT-MOBILE-HIERARCHY-REFINEMENT-V6-2

   Phone-only hierarchy and containment correction.

   Desktop V6 above 600px is unchanged by this refinement.
   Loadout routes, NFT staging, save behavior, activity logic, backend state,
   shared navigation, Map, Profile, and Crafting remain unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

  /*
   * HARD VIEWPORT CONTRACT
   *
   * The Loadout page itself must never become wider than the phone.
   */
  body.roa-loadout-page {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    margin: 0 !important;

    overflow-x: hidden !important;
  }

  body.roa-loadout-page
  main.container.roa-loadout-command-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding-left: 6px !important;
    padding-right: 6px !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }

  body.roa-loadout-page
  .roa-loadout-command-shell * {
    box-sizing: border-box;
  }


  /*
   * COMMAND HEADER
   *
   * Row 1: title
   * Row 2: 2x2 metrics
   * Row 3: Manual / Auto Best
   * Row 4: Return to Map
   */
  .roa-loadout-page
  .roa-loadout-command-header {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto
      auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 7px !important;

    padding: 8px !important;

    overflow: hidden !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roa-loadout-page
  .roa-loadout-command-title h1 {
    overflow: hidden !important;

    font-size: 1.12rem !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * 2 x 2 metric matrix.
   */
  .roa-loadout-page
  .roa-loadout-command-metrics {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(2, auto) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 43px !important;

    padding: 4px 3px !important;

    overflow: hidden !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics span {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;

    font-size: 0.52rem !important;

    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .roa-loadout-page
  .roa-loadout-command-metrics strong {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;

    font-size: 0.79rem !important;

    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * Manual / Auto Best remain side-by-side.
   * Return to Map occupies its own full-width row.
   */
  .roa-loadout-page
  .roa-loadout-command-actions {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-mode-form {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-mode-form
  .roa-loadout-theme-button,
  .roa-loadout-page
  .roa-loadout-command-actions
  > a.roa-loadout-theme-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 36px !important;
  }


  /*
   * ACTIVITY SELECTOR
   *
   * Replace the horizontal rail with a contained 2 x 2 phone grid.
   */
  body.roa-loadout-page
  .roa-loadout-activity-tabs {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(2, auto) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;

    padding: 0 !important;

    overflow: hidden !important;

    scroll-snap-type: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      24px
      minmax(0, 1fr)
      36px !important;

    grid-template-rows:
      auto
      auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: 68px !important;
    min-height: 68px !important;

    flex: none !important;

    gap: 0 4px !important;

    padding: 6px 7px !important;

    overflow: hidden !important;

    scroll-snap-align: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab.is-active,
  body.roa-loadout-page
  .roa-loadout-activity-tab[aria-current="page"] {
    order: 0 !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 22px !important;
    height: 22px !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > span strong {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;

    font-size: 0.61rem !important;
    line-height: 1.05 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /*
   * Hide the desktop helper sentence on phones.
   * The activity name itself is sufficient at this size.
   */
  body.roa-loadout-page
  .roa-loadout-activity-tab > span small {
    display: none !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    width: 100% !important;
    min-width: 0 !important;

    justify-items: end !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i b {
    font-size: 0.74rem !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > i small {
    font-size: 0.37rem !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab > em {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    font-size: 0.42rem !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /*
   * SELECTED ACTIVITY
   *
   * Heading first, then a clean two-cell status row.
   */
  .roa-loadout-page
  .roa-loadout-equipment-panel
  > .roa-loadout-panel-heading {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 6px !important;
  }

  .roa-loadout-page
  .roa-loadout-selected-status {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-selected-status span {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    padding: 5px !important;

    text-align: center !important;
  }


  /*
   * MAIN MOBILE WORKSPACE
   *
   * Equipment then Inventory, never side-by-side.
   */
  .roa-loadout-page
  .roa-loadout-command-workspace {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    grid-template-rows:
      auto
      auto !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 8px !important;

    overflow: visible !important;
  }

  .roa-loadout-page
  .roa-loadout-equipment-panel,
  .roa-loadout-page
  .roa-loadout-inventory-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
  }


  /*
   * HERO + SIX GEAR TILES
   */
  .roa-loadout-page
  .roa-loadout-equipment-board {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
      "hero hero"
      "helm shoulder"
      "weapon armor"
      "familiar accessory"
      !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;

    overflow: hidden !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card[data-loadout-slot="hero"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    min-height: 205px !important;

    grid-template-rows:
      20px
      minmax(135px, 1fr)
      auto
      auto !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
      minmax(40px, 34%)
      minmax(0, 1fr) !important;

    min-height: 96px !important;

    padding: 5px !important;
  }

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

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  )
  .roa-loadout-slot-label {
    font-size: 0.51rem !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card:not(
    [data-loadout-slot="hero"]
  ) > strong {
    font-size: 0.59rem !important;
    line-height: 1.12 !important;
  }


  /*
   * EQUIPMENT ACTIONS
   *
   * One control per row on the phone.
   */
  .roa-loadout-page
  .roa-loadout-action-bar {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
  }

  .roa-loadout-page
  .roa-loadout-action-bar form,
  .roa-loadout-page
  .roa-loadout-action-bar button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * INVENTORY
   *
   * Inventory follows Equipment and uses one NFT per row.
   */
  .roa-loadout-page
  .roa-loadout-inventory-panel,
  .roa-loadout-page
  .roa-loadout-inventory-scroll,
  .roa-loadout-page
  .roa-loadout-inventory-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roa-loadout-page
  .roa-loadout-slot-tabs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

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

    gap: 6px !important;
  }

  body.roa-loadout-page
  button.roa-loadout-inventory-card,
  body.roa-loadout-page
  article.roa-loadout-inventory-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
      82px
      minmax(0, 1fr) !important;
  }


  /*
   * EQUIPPED / CANDIDATE COMPARISON
   *
   * Keep this final panel contained as well.
   */
  .roa-loadout-page
  .roa-loadout-comparison {
    grid-template-columns:
      minmax(0, 1fr)
      18px
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;

    overflow: hidden !important;
  }

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

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .roa-loadout-page
  .roa-loadout-comparison
  > div {
    min-width: 0 !important;
  }

}

/* ROA-LOADOUT-MOBILE-HIERARCHY-REFINEMENT-V6-2-END */




/* --------------------------------------------------------------------------
   ROA-LOADOUT-PHONE-WIDTH-CORRECTION-V6-3

   Corrects the phone-width scrollbar trap introduced by 100vw.

   The Loadout hierarchy established by V6.2 is unchanged:
   - 2x2 command metrics
   - 2x2 activity selector
   - Hero + 2x3 gear board
   - one-column inventory

   Desktop and tablet geometry are unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

  /*
   * IMPORTANT:
   *
   * Do not use 100vw for a vertically scrolling document.
   * Desktop browsers can include scrollbar width in vw,
   * making the page wider than its usable layout viewport.
   */
  body.roa-loadout-page {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    overflow-x: hidden !important;
  }

  body.roa-loadout-page
  main.container.roa-loadout-command-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 6px !important;
    padding-right: 6px !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
  }


  /*
   * Every direct Loadout section must derive its width from
   * the shell content box, never from viewport units.
   */
  body.roa-loadout-page
  .roa-loadout-command-shell
  > .roa-loadout-command-header,

  body.roa-loadout-page
  .roa-loadout-command-shell
  > .roa-loadout-activity-tabs,

  body.roa-loadout-page
  .roa-loadout-command-shell
  > .roa-loadout-command-workspace {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * Command header containment.
   */
  .roa-loadout-page
  .roa-loadout-command-header,

  .roa-loadout-page
  .roa-loadout-command-title,

  .roa-loadout-page
  .roa-loadout-command-metrics,

  .roa-loadout-page
  .roa-loadout-command-actions,

  .roa-loadout-page
  .roa-loadout-mode-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

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

  .roa-loadout-page
  .roa-loadout-command-metrics article {
    min-width: 0 !important;
    max-width: 100% !important;
  }

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


  /*
   * Activity cards remain V6.2's 2x2 grid, but every cell
   * is explicitly constrained to the available content box.
   */
  body.roa-loadout-page
  .roa-loadout-activity-tabs {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  body.roa-loadout-page
  .roa-loadout-activity-tab {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * Selected Activity panel and both status cells.
   */
  .roa-loadout-page
  .roa-loadout-command-workspace,

  .roa-loadout-page
  .roa-loadout-equipment-panel,

  .roa-loadout-page
  .roa-loadout-inventory-panel,

  .roa-loadout-page
  .roa-loadout-panel-heading,

  .roa-loadout-page
  .roa-loadout-selected-status,

  .roa-loadout-page
  .roa-loadout-equipment-board {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

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

  .roa-loadout-page
  .roa-loadout-selected-status span {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }


  /*
   * Equipment board retains the approved mobile hierarchy.
   */
  .roa-loadout-page
  .roa-loadout-equipment-board {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
  }

  body.roa-loadout-page
  button.roa-loadout-slot-card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * Actions and Inventory must also derive from the parent
   * width and may not widen the document.
   */
  .roa-loadout-page
  .roa-loadout-action-bar,

  .roa-loadout-page
  .roa-loadout-action-bar form,

  .roa-loadout-page
  .roa-loadout-inventory-scroll,

  .roa-loadout-page
  .roa-loadout-inventory-grid,

  .roa-loadout-page
  .roa-loadout-comparison {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

  body.roa-loadout-page
  button.roa-loadout-inventory-card,

  body.roa-loadout-page
  article.roa-loadout-inventory-card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;
  }

}

/* ROA-LOADOUT-PHONE-WIDTH-CORRECTION-V6-3-END */


/* ROA-LOADOUT-RESPONSIVE-CORRECTION-V6-END */
/* ==========================================================================
   ROA-LOADOUT-SELECTOR-SCORE-INTEGRITY-V6-4

   Production visual checkpoint correction:
   - simplify each activity selector to Activity / Slots / Score;
   - remove redundant helper copy from the selector itself;
   - replace the center-obstructing active artwork with a clean highlighted
     plain frame;
   - retain the existing four-loadout navigation and game styling.

   No workspace, inventory, equipment, Map, Profile, Crafting, route,
   lock, cooldown, or NFT-selection behavior is changed here.
   ========================================================================== */


/* Active selector: keep the frame readable instead of placing the
   large button-active ornament through the selector content. */
body.roa-loadout-page
.roa-loadout-activity-tab.is-active,

body.roa-loadout-page
.roa-loadout-activity-tab[aria-current="page"] {
  background-color: rgba(30, 12, 39, 0.72) !important;

  background-image:
    url('/roa-ui/frames/button-plain.png') !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;

  box-shadow:
    inset 0 0 0 1px rgba(216, 130, 255, 0.48),
    inset 0 0 18px rgba(121, 36, 160, 0.20),
    0 0 10px rgba(185, 69, 232, 0.48) !important;

  filter:
    brightness(1.12)
    drop-shadow(0 0 6px rgba(185, 69, 232, 0.42))
    !important;
}


/* Slot count is actionable information, so give it a readable floor. */
body.roa-loadout-page
.roa-loadout-activity-tab > em {
  color: #d8c9a8 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}


/* --------------------------------------------------------------------------
   DESKTOP SELECTOR
   -------------------------------------------------------------------------- */

@media (min-width: 1121px) {

  body.roa-loadout-page
  .roa-loadout-activity-tabs {
    height: 64px !important;
    min-height: 64px !important;
    gap: 7px !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab {
    display: grid !important;

    grid-template-columns:
      30px
      minmax(0, 1fr)
      68px !important;

    grid-template-rows:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    align-items: center !important;

    width: 100% !important;
    height: 64px !important;
    min-width: 0 !important;
    min-height: 64px !important;

    column-gap: 7px !important;
    row-gap: 0 !important;

    padding: 6px 12px !important;

    overflow: hidden !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab > img {
    position: static !important;

    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    width: 28px !important;
    height: 28px !important;

    align-self: center !important;

    transform: none !important;
  }


  /* Activity name only. The descriptive hint is already repeated
     in the Selected Activity panel immediately below. */
  body.roa-loadout-page
  .roa-loadout-activity-tab > span {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    align-self: end !important;

    overflow: hidden !important;

    transform: none !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab > span strong {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;

    font-size: 0.74rem !important;
    line-height: 1.05 !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab > span small {
    display: none !important;
  }


  /* Slot count sits directly under the activity name. */
  body.roa-loadout-page
  .roa-loadout-activity-tab > em {
    position: static !important;

    grid-column: 2 !important;
    grid-row: 2 !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    align-self: start !important;

    overflow: hidden !important;

    font-size: 0.55rem !important;
    line-height: 1.1 !important;

    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /* Score gets its own protected right-side stack. */
  body.roa-loadout-page
  .roa-loadout-activity-tab > i {
    position: static !important;

    grid-column: 3 !important;
    grid-row: 1 / 3 !important;

    display: grid !important;

    width: 100% !important;
    min-width: 0 !important;

    align-content: center !important;
    justify-items: center !important;

    overflow: visible !important;

    font-style: normal !important;
    text-align: center !important;

    transform: none !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab > i b {
    display: block !important;

    font-size: 1rem !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab > i small {
    display: block !important;

    font-size: 0.47rem !important;
    line-height: 1 !important;

    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;
  }

}


/* --------------------------------------------------------------------------
   PHONE
   Preserve the approved V6.2 2x2 hierarchy while making the slot count
   easier to read.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {

  body.roa-loadout-page
  .roa-loadout-activity-tab > em {
    font-size: 0.43rem !important;
    line-height: 1.05 !important;

    text-align: left !important;

    white-space: nowrap !important;
  }


  body.roa-loadout-page
  .roa-loadout-activity-tab > i {
    overflow: visible !important;
  }

}

/* ROA-LOADOUT-SELECTOR-SCORE-INTEGRITY-V6-4-END */