/* ROA MOBILE V2 — LOCKED R39 MAP PRESENTATION */
.roa-v2-map-controls, .roa-v2-detail-dialog { display:none; }

@media screen and (max-width:900px) {
  body.map-page, body.map-page.galaxy-bg,
  body.map-page main.container {
    background:#0B1018 !important;
    background-image:none !important;
    overflow-x:hidden !important;
  }

  body.map-page.galaxy-bg::before,
  body.map-page.galaxy-bg::after {
    display:none !important;
  }

  body.map-page .roa-map-command-center {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:8px 10px 110px !important;
    border:0 !important;
    background:#0B1018 !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  body.map-page .roa-map-stage {
    order:1 !important;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:#0B1018 !important;
    background-image:none !important;
    overflow:visible !important;
  }

  body.map-page .world-map-panel,
  body.map-page .roa-map-shell {
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
    margin:0 !important;
    padding:0 !important;
    background:#0B1018 !important;
    background-image:none !important;
    border:1px solid #394B5B !important;
    border-radius:10px !important;
    box-shadow:none !important;
    overflow:hidden !important;
  }

  body.map-page .roa-world-map-image {
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    opacity:1 !important;
    filter:none !important;
  }

  body.map-page .roa-map-status-strip {
    display:none !important;
  }

  body.map-page .roa-realm-navigator {
    display:none !important;
  }

  body.map-page .roa-v2-map-controls {
    display:grid !important;
    order:2 !important;
    gap:12px;
    min-width:0;
  }

  body.map-page .roa-v2-detail-button {
    display:block;
    width:100%;
    min-height:48px;
    padding:12px;
    border:1px solid #B99A62;
    border-radius:9px;
    background:#30253E;
    color:#F4DEAB;
    font:700 15px system-ui,sans-serif;
  }

  body.map-page .roa-v2-realm-picker {
    padding:13px;
    background:#131C27;
    border:1px solid #394B5B;
    border-radius:10px;
  }

  body.map-page .roa-v2-realm-picker label {
    display:block;
    margin-bottom:8px;
    color:#E8D5AA;
    font:700 14px system-ui,sans-serif;
  }

  body.map-page .roa-v2-realm-picker select {
    box-sizing:border-box;
    width:100%;
    min-height:46px;
    padding:10px;
    border:1px solid #9B8054;
    border-radius:8px;
    background:#1B2633;
    color:#F1E7D7;
    font:14px system-ui,sans-serif;
  }

  body.map-page .roa-map-context {
    order:3 !important;
    box-sizing:border-box;
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    padding:13px !important;
    background:#131C27 !important;
    background-image:none !important;
    border:1px solid #394B5B !important;
    border-radius:10px !important;
    box-shadow:none !important;
  }

  body.map-page .roa-map-context .region-card {
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:12px !important;
    overflow-wrap:anywhere;
    background:#101823 !important;
    border-color:#394B5B !important;
  }

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

  body.map-page .region-meta-grid > * {
    min-width:0;
    padding:9px;
    overflow-wrap:anywhere;
  }

  body.map-page .roa-v2-detail-dialog[open] {
    display:flex !important;
    flex-direction:column;
    position:fixed;
    box-sizing:border-box;
    inset:calc(env(safe-area-inset-top) + 8px) 8px
          calc(env(safe-area-inset-bottom) + 8px);
    width:calc(100% - 16px);
    max-width:700px;
    max-height:calc(100dvh - 16px);
    margin:auto;
    padding:12px;
    background:#0B1018;
    color:#F1E7D7;
    border:1px solid #394B5B;
    border-radius:12px;
    z-index:4000;
  }

  body.map-page .roa-v2-detail-dialog::backdrop {
    background:rgba(0,0,0,.88);
  }

  body.map-page .roa-v2-detail-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:10px;
  }

  body.map-page .roa-v2-detail-heading button {
    min-height:44px;
    padding:8px 14px;
    background:#30253E;
    color:#F4DEAB;
    border:1px solid #B99A62;
    border-radius:8px;
  }

  body.map-page .roa-v2-detail-scroll {
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    border:1px solid #394B5B;
    border-radius:8px;
    overscroll-behavior:contain;
  }

  body.map-page .roa-v2-detail-scroll img {
    display:block;
    width:1000px;
    max-width:none;
    height:auto;
  }
}



/* R78 — Locked R39 mobile Map correction.
   No desktop changes, no gameplay changes. */
@media screen and (max-width:900px) {

  body.map-page .roa-map-command-center {
    gap:10px !important;
    padding-top:0 !important;
    background:#0B1018 !important;
    background-image:none !important;
  }

  body.map-page .roa-map-stage {
    display:block !important;
    flex:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    gap:0 !important;
    background:#0B1018 !important;
    background-image:none !important;
  }

  body.map-page .roa-map-stage .world-map-panel,
  body.map-page .roa-map-stage .roa-map-shell {
    display:block !important;
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    padding:0 !important;
    margin:0 !important;
    background:#0B1018 !important;
    background-image:none !important;
  }

  body.map-page .roa-map-stage .roa-world-map-image {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  body.map-page .roa-map-status-strip {
    display:none !important;
  }

  body.map-page .roa-v2-map-controls {
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
  }

  body.map-page #roa-v2-detail-open,
  body.map-page button.roa-v2-detail-button {
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:12px 14px !important;
    border:1px solid #B99A62 !important;
    border-image:none !important;
    border-radius:9px !important;
    background:#30253E !important;
    background-color:#30253E !important;
    background-image:none !important;
    color:#F4DEAB !important;
    -webkit-text-fill-color:#F4DEAB !important;
    font:700 15px/1.3 system-ui,sans-serif !important;
    text-shadow:none !important;
    box-shadow:none !important;
    filter:none !important;
    opacity:1 !important;
  }

  body.map-page .roa-v2-realm-picker {
    background:#131C27 !important;
    background-image:none !important;
    border-color:#394B5B !important;
    box-shadow:none !important;
  }

  body.map-page .roa-v2-realm-picker select {
    background:#1B2633 !important;
    background-image:none !important;
    border-color:#9B8054 !important;
    color:#F1E7D7 !important;
  }

  body.map-page .roa-map-context {
    background:#131C27 !important;
    background-image:none !important;
    border-color:#394B5B !important;
    box-shadow:none !important;
  }

  body.map-page .roa-map-context .region-card {
    background:#101823 !important;
    background-image:none !important;
    border-color:#394B5B !important;
  }
}



/* ===================================================
   ROA MOBILE V2 — R79 COLOR LOCK
   No purple or magenta UI chrome.
   Preserve the ORIGINAL world artwork.
   Mobile Map only, <=900px.
   =================================================== */

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

  html body.map-page,
  html body.map-page.galaxy-bg,
  html body.map-page main.container,
  html body.map-page .roa-map-command-center {
    background:#0B1018 !important;
    background-image:none !important;
  }

  html body.map-page .roa-map-stage,
  html body.map-page .world-map-panel,
  html body.map-page .roa-map-shell {
    background:#0B1018 !important;
    background-image:none !important;
    border-color:#394B5B !important;
    border-image:none !important;
    box-shadow:none !important;
  }

  /* The original world image keeps its exact colors. */
  html body.map-page img.roa-world-map-image,
  html body.map-page .roa-v2-detail-scroll img {
    filter:none !important;
    opacity:1 !important;
  }

  /* Selected realm, information, cooldowns and rewards. */
  html body.map-page .roa-v2-realm-picker,
  html body.map-page .roa-map-context,
  html body.map-page .region-grid,
  html body.map-page .region-card,
  html body.map-page .region-card-header,
  html body.map-page .region-meta-grid > *,
  html body.map-page .region-cooldown-list > *,
  html body.map-page .map-special-dungeon-section,
  html body.map-page .map-story-dungeon-section,
  html body.map-page .activity-launcher,
  html body.map-page .mission-action-forms,
  html body.map-page .region-empty-state {
    background:#131C27 !important;
    background-image:none !important;
    border-color:#394B5B !important;
    border-image:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }

  html body.map-page .region-card::before,
  html body.map-page .region-card::after,
  html body.map-page .roa-map-context::before,
  html body.map-page .roa-map-context::after {
    background:none !important;
    background-image:none !important;
    border-color:#394B5B !important;
    box-shadow:none !important;
  }

  /* Empty state and readiness/status labels. */
  html body.map-page .readiness-badge,
  html body.map-page .region-icon,
  html body.map-page .region-card .eyebrow,
  html body.map-page .region-card .tag-list > *,
  html body.map-page .region-card .command-tag-list > * {
    background-color:#1B2633 !important;
    background-image:none !important;
    border-color:#394B5B !important;
    border-image:none !important;
    color:#E8D5AA !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }

  /* All Map buttons and links styled as buttons. */
  html body.map-page .roa-v2-detail-button,
  html body.map-page #roa-v2-detail-open,
  html body.map-page #roa-v2-detail-close,
  html body.map-page .roa-v2-detail-dialog button,
  html body.map-page .roa-map-context .button,
  html body.map-page .roa-map-context button,
  html body.map-page .mission-launch-button,
  html body.map-page .storybook-primary-action {
    background:#243342 !important;
    background-color:#243342 !important;
    background-image:none !important;
    border:1px solid #B99A62 !important;
    border-image:none !important;
    color:#E8D5AA !important;
    -webkit-text-fill-color:#E8D5AA !important;
    box-shadow:none !important;
    text-shadow:none !important;
    filter:none !important;
  }

  html body.map-page .roa-v2-detail-button:hover,
  html body.map-page .roa-v2-detail-dialog button:hover,
  html body.map-page .roa-map-context .button:hover {
    background:#304356 !important;
    background-image:none !important;
  }

  /* Realm picker: original options and selection preserved. */
  html body.map-page #roa-v2-realm-picker {
    background:#1B2633 !important;
    background-image:none !important;
    border:1px solid #9B8054 !important;
    border-image:none !important;
    color:#F1E7D7 !important;
    box-shadow:none !important;
  }

  /* Detailed map: no violet modal, border or glow. */
  html body.map-page .roa-v2-detail-dialog,
  html body.map-page .roa-v2-detail-dialog[open],
  html body.map-page .roa-v2-detail-heading,
  html body.map-page .roa-v2-detail-scroll {
    background:#0B1018 !important;
    background-image:none !important;
    border-color:#394B5B !important;
    border-image:none !important;
    box-shadow:none !important;
  }

  html body.map-page .roa-v2-detail-dialog::backdrop {
    background:rgba(0,0,0,.88) !important;
  }

  html body.map-page .roa-v2-detail-dialog p {
    color:#B9C5D2 !important;
  }

  /* Focus state uses gold, never magenta. */
  html body.map-page button:focus-visible,
  html body.map-page select:focus-visible,
  html body.map-page a:focus-visible {
    outline:2px solid #D9B876 !important;
    outline-offset:2px !important;
    box-shadow:none !important;
  }
}