body.map-page {
  --sleek-bg:#070810; --sleek-panel:rgba(10,11,22,.97); --sleek-line:rgba(147,91,218,.28);
  --sleek-violet:#a93cff; --sleek-violet2:#c957ff; --sleek-gold:#e8cf8d; --sleek-muted:#9b95ad;
  --sleek-ready:#53e2b2; background:linear-gradient(180deg,#090a13,#070810)!important;
}
.map-page .container{width:100%!important;max-width:none!important;padding-left:16px!important;padding-right:16px!important}
.map-page .map-hero{display:none!important}
.map-page .roa-topbar{background:linear-gradient(180deg,rgba(10,11,20,.99),rgba(8,9,17,.98))!important;border-bottom:1px solid rgba(148,85,226,.18)!important;box-shadow:0 12px 34px rgba(0,0,0,.42)!important}
.map-page .roa-nav-item{border:0!important;border-radius:10px!important;background:transparent!important;color:#b7b1c5!important}
.map-page .roa-nav-item.is-active,.map-page .roa-nav-group.is-active>.roa-nav-item{color:#fff!important;background:radial-gradient(circle at 50% 28%,rgba(171,53,255,.18),transparent 62%)!important;box-shadow:inset 0 -2px 0 var(--sleek-violet2)!important}
.map-page .roa-player-copy{display:none!important}
.map-page .roa-hud-resource{border:0!important;background:transparent!important;box-shadow:none!important}

@media (min-width:1121px){
  .map-page .roa-map-command-center{display:grid!important;grid-template-columns:minmax(250px,.21fr) minmax(620px,1fr) minmax(300px,.26fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:14px!important;height:calc(100dvh - var(--roa-header-h,96px) - var(--roa-dock-h,82px) - 18px)!important;padding:12px 0 6px!important;overflow:hidden!important}
  .map-page .roa-map-stage{display:contents!important}
  .map-page .world-map-panel{grid-column:2!important;grid-row:1!important;margin:0!important;padding:8px!important;border:1px solid rgba(161,76,231,.42)!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(14,14,27,.96),rgba(8,9,17,.98))!important;box-shadow:0 18px 50px rgba(0,0,0,.4)!important;overflow:hidden!important}
  .map-page .roa-map-shell{width:100%!important;height:100%!important;min-height:0!important;border:0!important;border-radius:12px!important;background:#05060c!important;box-shadow:none!important;overflow:hidden!important}
  .map-page .roa-world-map-image{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;filter:saturate(1.02) contrast(1.02) brightness(.97)!important}
  .map-page .roa-map-status-strip{display:none!important}
}

.map-page .roa-realm-navigator{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;padding:16px 12px 12px!important;border:1px solid var(--sleek-line)!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(12,13,25,.98),rgba(8,9,17,.98))!important;box-shadow:0 18px 48px rgba(0,0,0,.35)!important}
.map-page .roa-realm-navigator h2{margin:0!important;color:#f0dbe5!important;font-family:Georgia,serif!important;font-size:1.55rem!important;line-height:1!important;letter-spacing:.04em!important;text-transform:uppercase!important}
.map-page .roa-realm-navigator h2:after{content:"Select a realm to explore";display:block;margin-top:7px;color:var(--sleek-muted);font:500 .75rem/1.2 system-ui,sans-serif;letter-spacing:0;text-transform:none}
.map-page .roa-realm-list{display:grid!important;grid-auto-rows:minmax(66px,auto)!important;gap:8px!important;margin-top:13px!important;padding:0 2px 2px 0!important;overflow-y:auto!important;scrollbar-width:thin}
.map-page .roa-realm-button[data-region="wilds-of-arkovia"],.map-page .roa-realm-button[data-region="dungeon-gate"]{display:none!important}
.map-page .roa-realm-button{display:grid!important;grid-template-columns:76px 32px minmax(0,1fr) 18px!important;align-items:center!important;gap:8px!important;min-height:66px!important;width:100%!important;padding:6px 8px!important;border:1px solid rgba(130,119,159,.18)!important;border-radius:10px!important;color:#f3effb!important;background:linear-gradient(90deg,rgba(22,22,38,.96),rgba(11,12,23,.98))!important;box-shadow:none!important;overflow:hidden!important;text-align:left!important}
.map-page .roa-realm-button:hover{border-color:rgba(180,84,244,.44)!important}.map-page .roa-realm-button.is-active{border-color:rgba(202,79,255,.88)!important;background:linear-gradient(90deg,rgba(68,23,92,.96),rgba(23,15,42,.98))!important;box-shadow:0 0 18px rgba(173,48,255,.18)!important}
.map-page .roa-realm-button:before{content:"";display:block;grid-column:1;width:76px;height:52px;border-radius:8px;background-image:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.2)),url("/roa-world-map-final.png");background-repeat:no-repeat;background-size:520px auto;border:1px solid rgba(170,148,203,.18)}
.map-page .roa-realm-button[data-region="arcane-convergence"]:before{background-position:20% 8%}.map-page .roa-realm-button[data-region="verdant-trial"]:before{background-position:7% 34%}.map-page .roa-realm-button[data-region="destruction-crucible"]:before{background-position:9% 65%}.map-page .roa-realm-button[data-region="dragonbone-crucible"]:before{background-position:31% 91%}.map-page .roa-realm-button[data-region="obsidian-gate-trial"]:before{background-position:79% 8%}.map-page .roa-realm-button[data-region="sunken-archive-challenge"]:before{background-position:95% 38%}.map-page .roa-realm-button[data-region="catacomb-ascension"]:before{background-position:93% 65%}.map-page .roa-realm-button[data-region="ancient-key-trial"]:before{background-position:76% 93%}
.map-page .roa-realm-marker{grid-column:2!important;width:32px!important;min-width:32px!important;height:32px!important;display:grid!important;place-items:center!important;border:1px solid rgba(223,192,107,.42)!important;border-radius:999px!important;background:rgba(17,14,29,.94)!important;color:var(--sleek-gold)!important;box-shadow:none!important}.map-page .roa-realm-number{color:#fff4ce!important;font-size:.86rem!important;font-weight:800!important}.map-page .roa-realm-label{grid-column:3!important;min-width:0!important}.map-page .roa-realm-label strong{display:block!important;color:#f2edf8!important;font:700 .92rem/1.02 Georgia,serif!important;white-space:normal!important}.map-page .roa-realm-label small{display:block!important;margin-top:4px!important;color:#9d96ad!important;font-size:0!important}.map-page .roa-realm-label small:before{content:"Special Dungeon";font-size:.69rem}.map-page .roa-realm-status-icon{display:none!important}.map-page .roa-realm-button:after{content:"›";grid-column:4;color:#bbb1cb;font-size:1.25rem;text-align:center}
.map-page .roa-realm-summary{display:grid!important;grid-template-columns:1fr 1fr!important;margin-top:10px!important;padding-top:10px!important;border-top:1px solid rgba(146,126,178,.12)!important}.map-page .roa-realm-summary>span{padding:5px 10px!important;border:0!important;background:transparent!important}.map-page .roa-realm-summary small{color:#8f899e!important;font-size:.62rem!important;text-transform:uppercase!important}.map-page .roa-realm-summary strong{margin-top:3px!important;color:#f2d98f!important;font-size:.82rem!important}

.map-page .roa-map-context{display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;gap:10px!important;padding:8px!important;border:1px solid var(--sleek-line)!important;border-radius:16px!important;background:linear-gradient(180deg,rgba(12,13,25,.98),rgba(8,9,17,.98))!important;box-shadow:0 18px 48px rgba(0,0,0,.35)!important;overflow:hidden!important}.map-page #roa-selected-realm-title{display:none!important}.map-page .roa-map-context .region-grid{display:block!important;margin:0!important;overflow-y:auto!important;scrollbar-width:thin}.map-page .roa-map-context .region-empty-state{display:none!important}.map-page .roa-map-context .region-card{display:grid!important;gap:12px!important;margin:0!important;padding:0 14px 16px!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important}.map-page .roa-map-context .region-card[hidden],.map-page .roa-map-context .region-card.is-hidden{display:none!important}
.map-page .roa-map-context .region-card:before{content:"";display:block;width:calc(100% + 28px);height:142px;margin-left:-14px;margin-right:-14px;border-radius:10px 10px 4px 4px;border-bottom:1px solid rgba(151,76,211,.2);background-image:linear-gradient(180deg,rgba(5,6,12,.03),rgba(7,8,16,.3)),url("/roa-world-map-final.png");background-size:720px auto;background-repeat:no-repeat;box-shadow:inset 0 -28px 36px rgba(4,5,10,.42)}
.map-page .roa-map-context .theme-wilds:before{background-position:50% 47%}.map-page .roa-map-context .theme-dungeon:before{background-position:50% 69%}.map-page .roa-map-context .theme-arcane:before{background-position:24% 6%}.map-page .roa-map-context .theme-verdant:before{background-position:10% 36%}.map-page .roa-map-context .theme-destruction:before{background-position:10% 66%}.map-page .roa-map-context .theme-dragonbone:before{background-position:31% 92%}.map-page .roa-map-context .theme-obsidian:before{background-position:79% 8%}.map-page .roa-map-context .theme-archive:before{background-position:94% 39%}.map-page .roa-map-context .theme-catacomb:before{background-position:91% 67%}.map-page .roa-map-context .theme-ancient:before{background-position:77% 91%}
.map-page .roa-map-context .region-card-header{align-items:flex-start!important;gap:10px!important}.map-page .roa-map-context .region-card-header .eyebrow{margin:0 0 5px!important;color:#9f83bc!important;font-size:.62rem!important}.map-page .roa-map-context .region-icon{display:none!important}.map-page .roa-map-context .region-card-header h2{margin:0!important;color:#f7f0df!important;font:700 1.55rem/1.03 Georgia,serif!important;letter-spacing:.025em!important;text-transform:uppercase!important}.map-page .roa-map-context .readiness-badge{padding:6px 10px!important;border-radius:7px!important;font-size:.64rem!important;background:rgba(35,15,51,.64)!important}.map-page .roa-map-context .region-description{color:#c6c0cf!important;font-size:.82rem!important;line-height:1.45!important}
.map-page .roa-map-context .region-meta-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}.map-page .roa-map-context .region-meta-grid span{display:grid!important;gap:4px!important;min-height:56px!important;align-content:center!important;padding:9px 10px!important;border:1px solid rgba(154,137,184,.14)!important;border-radius:9px!important;background:rgba(11,12,23,.76)!important;color:#f4eff8!important;font-size:.8rem!important}.map-page .roa-map-context .region-meta-grid strong{color:#8e869d!important;font-size:.58rem!important;text-transform:uppercase!important}
.map-page .roa-map-context .region-cooldown-list,.map-page .roa-map-context .command-tag-list,.map-page .roa-map-context .command-hint-list,.map-page .roa-map-context .map-special-dungeon-section .section-heading,.map-page .roa-map-context .btn-discord{display:none!important}.map-page .roa-map-context .map-special-dungeon-section,.map-page .roa-map-context .activity-launcher,.map-page .roa-map-context .multi-command-launcher,.map-page .roa-map-context .mission-action-forms,.map-page .roa-map-context .mission-launch-form{display:block!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important}.map-page .roa-map-context .mission-launch-button,.map-page .roa-map-context .storybook-primary-action{width:100%!important;min-height:44px!important;border:1px solid rgba(200,73,255,.78)!important;border-radius:9px!important;color:#fff!important;background:linear-gradient(180deg,#a93cff,#771ac2)!important;box-shadow:0 8px 22px rgba(104,28,160,.24)!important;font-size:.78rem!important;font-weight:800!important}
.map-page .roa-map-context .region-detail-columns{display:block!important;margin:0!important}.map-page .roa-map-context .region-detail-columns>div:nth-child(2){display:none!important}.map-page .roa-map-context .region-detail-columns h3{margin:0 0 8px!important;color:#8d859c!important;font-size:.58rem!important;text-transform:uppercase!important}.map-page .roa-map-context .region-detail-columns ul{display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important;padding:0!important;list-style:none!important}.map-page .roa-map-context .region-detail-columns li{margin:0!important;padding:5px 9px!important;border:1px solid rgba(169,65,234,.28)!important;border-radius:999px!important;color:#caa3e8!important;background:rgba(64,18,87,.22)!important;font-size:.62rem!important}
.map-page .roa-map-quick-actions{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}.map-page .roa-map-quick-action{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto 14px!important;align-items:center!important;gap:9px!important;width:100%!important;min-height:48px!important;padding:6px 10px!important;border:1px solid rgba(118,107,147,.28)!important;border-radius:9px!important;color:#f4f0f8!important;background:linear-gradient(90deg,rgba(18,19,33,.96),rgba(11,12,23,.98))!important;text-align:left!important}.map-page .roa-map-quick-action:hover,.map-page .roa-map-quick-action.is-active{border-color:rgba(190,66,255,.72)!important;background:linear-gradient(90deg,rgba(61,19,84,.94),rgba(24,14,40,.98))!important}.map-page .roa-map-quick-action img{width:30px!important;height:30px!important;object-fit:contain!important}.map-page .roa-map-quick-action strong{display:block!important;color:#f0ebf5!important;font-size:.76rem!important}.map-page .roa-map-quick-action small{display:block!important;margin-top:3px!important;color:#8d879a!important;font-size:.58rem!important}.map-page .roa-map-quick-action b{color:var(--sleek-ready)!important;font-size:.64rem!important;white-space:nowrap!important}.map-page .roa-map-quick-action.is-cooldown b{color:#e8ca82!important}.map-page .roa-map-quick-action i{color:#c6bed0!important;font-size:1rem!important;font-style:normal!important}
.map-page .roa-bottom-dock{border-top:1px solid rgba(147,91,218,.16)!important;background:linear-gradient(180deg,rgba(7,8,15,.98),rgba(5,6,11,.99))!important;box-shadow:0 -12px 32px rgba(0,0,0,.32)!important}
@media(max-width:1280px) and (min-width:1121px){.map-page .roa-map-command-center{grid-template-columns:minmax(220px,.20fr) minmax(560px,1fr) minmax(270px,.25fr)!important;gap:10px!important}.map-page .roa-realm-button{grid-template-columns:58px 28px minmax(0,1fr) 14px!important;gap:6px!important}.map-page .roa-realm-button:before{width:58px!important;height:48px!important;background-size:470px auto!important}.map-page .roa-realm-label strong{font-size:.78rem!important}.map-page .roa-map-context .region-card:before{height:118px!important}}
@media(max-width:1120px){.map-page .roa-realm-button:before{content:none!important}.map-page .roa-realm-button{grid-template-columns:32px minmax(0,1fr) 18px!important}.map-page .roa-realm-marker{grid-column:1!important}.map-page .roa-realm-label{grid-column:2!important}.map-page .roa-realm-button:after{grid-column:3!important}.map-page .roa-realm-button[data-region="wilds-of-arkovia"],.map-page .roa-realm-button[data-region="dungeon-gate"]{display:grid!important}.map-page .roa-map-context .region-card:before{height:180px!important;background-size:cover!important;background-position:center!important}}

/* ROA-MAP-NO-MAGENTA-V4 START */

/* =========================================================
   MAP PAGE FINAL CLEAN DARK OVERRIDES
   Goal:
   - no magenta / pink anywhere on the Map HUD
   - dark landing-style page background
   - no gold selection box on map
   - cleaner action cards / buttons on the right panel
   ========================================================= */

body.map-page {
  background:
    radial-gradient(circle at 18% 12%, rgba(113, 136, 154, 0.10) 0%, rgba(113, 136, 154, 0.03) 16%, transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(59, 73, 92, 0.18) 0%, rgba(59, 73, 92, 0.05) 20%, transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(16, 23, 32, 0.45) 0%, transparent 40%),
    linear-gradient(180deg, rgba(3, 6, 10, 0.98) 0%, rgba(6, 10, 15, 0.985) 36%, rgba(4, 7, 11, 0.99) 100%) !important;
  background-color: #05080d !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
  background-attachment: fixed !important;
  color: #eae3d6 !important;
}

body.map-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.28)),
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.34) 100%);
  z-index: 0;
}

body.map-page .container {
  position: relative;
  z-index: 1;
}

/* Remove purple/magenta tone from topbar + dock */
body.map-page .roa-topbar,
body.map-page .roa-bottom-dock {
  background: linear-gradient(180deg, rgba(7, 10, 15, 0.98), rgba(3, 5, 8, 0.99)) !important;
  border-color: rgba(156, 168, 181, 0.14) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

body.map-page .roa-brand-emblem,
body.map-page .roa-player-avatar,
body.map-page .roa-hud-resource,
body.map-page .roa-account-trigger {
  box-shadow:
    0 0 0 1px rgba(156, 168, 181, 0.16),
    0 0 10px rgba(90, 103, 120, 0.12) !important;
}

body.map-page .roa-nav-item,
body.map-page .roa-bottom-dock > a,
body.map-page .roa-player-copy small,
body.map-page .roa-hud-resource small,
body.map-page .roa-settings-glyph {
  color: rgba(217, 209, 194, 0.72) !important;
}

body.map-page .roa-nav-item.is-active,
body.map-page .roa-nav-item:hover,
body.map-page .roa-bottom-dock > a.is-active,
body.map-page .roa-bottom-dock > a:hover {
  color: #f1e7d5 !important;
  background: radial-gradient(circle, rgba(132, 145, 160, 0.12), transparent 72%) !important;
  opacity: 1 !important;
}

body.map-page .roa-nav-item.is-active img,
body.map-page .roa-nav-item:hover img,
body.map-page .roa-bottom-dock > a.is-active img,
body.map-page .roa-bottom-dock > a:hover img {
  filter:
    saturate(0.92)
    brightness(1.04)
    drop-shadow(0 0 4px rgba(160, 171, 182, 0.22)) !important;
  opacity: 1 !important;
}

body.map-page .roa-nav-item.is-active::after,
body.map-page .roa-bottom-dock > a.is-active::before {
  background: linear-gradient(90deg, transparent, rgba(173, 182, 193, 0.82), transparent) !important;
  box-shadow: 0 0 6px rgba(140, 151, 163, 0.18) !important;
}

body.map-page .roa-world-progress i {
  background: linear-gradient(90deg, rgba(165, 174, 185, 0.76) 42%, rgba(255,255,255,0.04) 42%) !important;
  border-color: rgba(165, 174, 185, 0.18) !important;
  box-shadow: none !important;
}

/* Main page panels */
body.map-page .map-hero,
body.map-page .roa-realm-navigator,
body.map-page .world-map-panel,
body.map-page .roa-map-status-strip,
body.map-page .roa-map-context,
body.map-page .area-card,
body.map-page .mission-status-card,
body.map-page .panel,
body.map-page .mission-history-item,
body.map-page .empty-state,
body.map-page .command-hint,
body.map-page .tag-list span,
body.map-page .region-cooldown {
  background: linear-gradient(180deg, rgba(11, 15, 22, 0.96), rgba(6, 9, 14, 0.97)) !important;
  border-color: rgba(145, 156, 168, 0.14) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
  color: #e7dfd1 !important;
}

body.map-page .map-hero h1,
body.map-page .roa-map-context h2,
body.map-page .region-card h2,
body.map-page .region-card h3,
body.map-page .section-heading h2,
body.map-page .roa-realm-navigator h2 {
  color: #f1e8d8 !important;
}

body.map-page .eyebrow,
body.map-page .muted,
body.map-page .region-description,
body.map-page .section-heading p,
body.map-page .roa-realm-label small,
body.map-page .command-hint span,
body.map-page .mission-history-meta span,
body.map-page .mission-history-meta small {
  color: rgba(214, 206, 191, 0.72) !important;
}

/* Left realm list */
body.map-page .roa-realm-button {
  background: linear-gradient(180deg, rgba(14, 19, 27, 0.98), rgba(8, 12, 18, 0.98)) !important;
  border: 1px solid rgba(145, 156, 168, 0.12) !important;
  box-shadow: none !important;
}

body.map-page .roa-realm-button:hover,
body.map-page .roa-realm-button.is-active {
  background: linear-gradient(180deg, rgba(19, 26, 35, 0.99), rgba(10, 14, 20, 0.99)) !important;
  border-color: rgba(167, 178, 189, 0.28) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}

body.map-page .roa-realm-number {
  color: #efe6d5 !important;
  border-color: rgba(167, 178, 189, 0.24) !important;
  box-shadow: none !important;
}

body.map-page .roa-realm-status-icon {
  filter: saturate(0.82) brightness(0.92) !important;
}

/* Map frame */
body.map-page .roa-map-shell,
body.map-page .world-map-panel {
  background: linear-gradient(180deg, rgba(5, 8, 12, 0.94), rgba(3, 5, 8, 0.96)) !important;
  border-color: rgba(128, 141, 155, 0.14) !important;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.015) !important;
}

/* Remove all selection box overlays on the actual world map */
body.map-page .map-hotspot,
body.map-page .map-hotspot.active,
body.map-page .map-hotspot.is-active,
body.map-page .map-hotspot[aria-pressed="true"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ready badges */
body.map-page .readiness-badge,
body.map-page .mission-status-card strong,
body.map-page .region-cooldown strong {
  color: #d8e4d7 !important;
}

body.map-page .readiness-badge.ready,
body.map-page .mission-status-card.ready strong,
body.map-page .region-cooldown.ready strong {
  color: #91d7a1 !important;
}

/* Right side action cards + activity shortcuts */
body.map-page .roa-map-activity-shortcuts,
body.map-page .roa-map-activity-shortcuts > *,
body.map-page .roa-map-activity-shortcuts a,
body.map-page .roa-map-activity-shortcuts button,
body.map-page .roa-map-activity-shortcuts .button,
body.map-page .roa-map-context .button,
body.map-page .roa-map-context .mission-launch-button,
body.map-page .roa-map-context .mission-action-forms .mission-launch-form,
body.map-page .roa-map-context .mission-action-forms .mission-launch-button {
  border-radius: 16px !important;
}

body.map-page .roa-map-activity-shortcuts > *,
body.map-page .roa-map-context .mission-action-forms .mission-launch-form,
body.map-page .roa-map-context .button,
body.map-page .roa-map-context .mission-launch-button {
  background: linear-gradient(180deg, rgba(16, 21, 29, 0.98), rgba(9, 12, 18, 0.99)) !important;
  border: 1px solid rgba(145, 156, 168, 0.16) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.02) !important;
  color: #ece4d8 !important;
}

body.map-page .roa-map-activity-shortcuts a:hover,
body.map-page .roa-map-activity-shortcuts button:hover,
body.map-page .roa-map-activity-shortcuts .button:hover,
body.map-page .roa-map-context .button:hover,
body.map-page .roa-map-context .mission-launch-button:hover {
  background: linear-gradient(180deg, rgba(24, 31, 41, 0.99), rgba(12, 16, 23, 0.99)) !important;
  border-color: rgba(176, 186, 196, 0.28) !important;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
  color: #fff6e8 !important;
}

body.map-page .roa-map-activity-shortcuts strong,
body.map-page .roa-map-context .mission-launch-button strong,
body.map-page .roa-map-context .button strong {
  color: #f2eadc !important;
}

body.map-page .roa-map-activity-shortcuts small,
body.map-page .roa-map-context .mission-launch-button small,
body.map-page .roa-map-context .button small {
  color: rgba(214, 206, 191, 0.72) !important;
}

body.map-page .roa-map-context .btn-discord,
body.map-page .roa-map-context .gold-outline,
body.map-page .roa-map-context .storybook-primary-action {
  background: linear-gradient(180deg, rgba(18, 24, 32, 0.98), rgba(9, 12, 18, 0.99)) !important;
  border: 1px solid rgba(145, 156, 168, 0.18) !important;
  color: #ece4d8 !important;
}

/* Force out residual pink glows on map page */
body.map-page .map-hero,
body.map-page .roa-realm-navigator,
body.map-page .world-map-panel,
body.map-page .roa-map-context,
body.map-page .roa-map-status-strip,
body.map-page .mission-status-card,
body.map-page .area-card,
body.map-page .button,
body.map-page .mission-launch-button,
body.map-page .roa-nav-item,
body.map-page .roa-bottom-dock > a,
body.map-page .roa-account-trigger {
  text-shadow: none !important;
  filter: none !important;
}

/* ROA-MAP-NO-MAGENTA-V4 END */

/* ROA-MAP-SHELL-DARK-V5 START */

/* =========================================================
   TARGETED FIX:
   1) Replace the purple/magenta HUD shell behind the map and side panels
   2) Remove magenta glow from the active Map tab in the top nav
   ========================================================= */

/* The actual HUD shell area behind the panels */
body.loadout-page.galaxy-bg.map-page,
body.map-page,
body.map-page main.container,
body.map-page .container {
  background:
    linear-gradient(180deg, rgba(6, 9, 14, 0.98) 0%, rgba(8, 12, 18, 0.985) 38%, rgba(5, 8, 13, 0.99) 100%) !important;
  background-color: #070b11 !important;
  background-image: none !important;
}

/* Kill cloudy/purple decorative layers sitting behind the HUD */
body.map-page::before,
body.map-page::after,
body.map-page .container::before,
body.map-page .container::after,
body.map-page main.container::before,
body.map-page main.container::after {
  background:
    radial-gradient(circle at 18% 14%, rgba(129, 145, 160, 0.08) 0%, rgba(129, 145, 160, 0.02) 18%, transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(78, 90, 104, 0.10) 0%, rgba(78, 90, 104, 0.03) 20%, transparent 38%),
    linear-gradient(180deg, rgba(5, 8, 13, 0.92), rgba(6, 9, 14, 0.95)) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* If the old galaxy background is coming from a nested shell, neutralize it */
body.map-page .galaxy-bg,
body.map-page [class*="galaxy"],
body.map-page [class*="nebula"] {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Keep the central workspace shell dark and clean */
body.map-page .map-shell,
body.map-page .map-layout,
body.map-page .map-grid,
body.map-page .map-workspace,
body.map-page .map-page-shell,
body.map-page .map-page-layout,
body.map-page .roa-map-layout,
body.map-page .roa-map-shell-wrap,
body.map-page .roa-map-status-strip,
body.map-page .roa-map-context,
body.map-page .world-map-panel,
body.map-page .roa-realm-navigator {
  box-shadow: none !important;
}

/* ACTIVE MAP TAB — remove magenta glow */
body.map-page .roa-nav-item.is-active,
body.map-page .roa-nav-item[href="/map"].is-active,
body.map-page .roa-nav-item[href="/map"]:hover,
body.map-page .roa-nav-item.is-active:hover {
  background:
    linear-gradient(180deg, rgba(18, 24, 32, 0.92), rgba(10, 14, 20, 0.96)) !important;
  color: #f0e7d8 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 8px 14px rgba(0,0,0,0.18) !important;
}

body.map-page .roa-nav-item.is-active::after,
body.map-page .roa-nav-item[href="/map"].is-active::after {
  background: linear-gradient(90deg, transparent, rgba(181, 190, 198, 0.72), transparent) !important;
  box-shadow: none !important;
  height: 2px !important;
}

body.map-page .roa-nav-item.is-active img,
body.map-page .roa-nav-item[href="/map"].is-active img {
  filter:
    saturate(0.88)
    brightness(1.02)
    drop-shadow(0 0 3px rgba(175, 185, 194, 0.18)) !important;
}

/* Remove any purple halo from the Map tab area specifically */
body.map-page .roa-nav-item.is-active,
body.map-page .roa-nav-item[href="/map"].is-active,
body.map-page .roa-nav-item[href="/map"] {
  text-shadow: none !important;
}

/* ROA-MAP-SHELL-DARK-V5 END */

/* ROA-MAP-ACCOUNT-SLEEK-V6 START */

/* =========================================================
   ACCOUNT / SETTINGS CONTROL
   Remove final magenta / purple legacy styling
   ========================================================= */

/* Top-right account/settings button */
body.map-page .roa-account-trigger {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;

  border: 1px solid rgba(166, 177, 188, 0.26) !important;
  border-image: none !important;
  border-radius: 50% !important;

  background:
    linear-gradient(
      180deg,
      rgba(23, 29, 37, 0.98),
      rgba(9, 13, 19, 0.99)
    ) !important;

  background-image: none !important;

  color: #e9e2d5 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 8px 16px rgba(0,0,0,0.30) !important;

  filter: none !important;
  text-shadow: none !important;
}

body.map-page .roa-account-trigger:hover,
body.map-page .roa-account-trigger:focus-visible {
  border-color: rgba(196, 204, 212, 0.42) !important;

  background:
    linear-gradient(
      180deg,
      rgba(31, 39, 49, 0.99),
      rgba(13, 18, 25, 0.99)
    ) !important;

  background-image: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 20px rgba(0,0,0,0.34),
    0 0 0 1px rgba(161, 174, 187, 0.08) !important;

  filter: none !important;
}

body.map-page .roa-settings-glyph {
  color: #e9e2d5 !important;
  text-shadow: none !important;
  filter: none !important;
}


/* =========================================================
   ACCOUNT DROPDOWN
   ========================================================= */

body.map-page .roa-account-dropdown {
  background:
    linear-gradient(
      180deg,
      rgba(15, 20, 27, 0.995),
      rgba(7, 10, 15, 0.995)
    ) !important;

  background-image: none !important;

  border: 1px solid rgba(143, 155, 167, 0.20) !important;
  border-image: none !important;
  border-radius: 14px !important;

  box-shadow:
    0 24px 50px rgba(0,0,0,0.56),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;

  color: #e9e2d5 !important;

  filter: none !important;
}


/* Player identity in dropdown */
body.map-page .roa-account-dropdown > strong {
  color: #f0e7d8 !important;
  text-shadow: none !important;
}

body.map-page .roa-account-dropdown > span {
  color: rgba(209, 201, 188, 0.70) !important;
}

body.map-page .roa-settings-section-label {
  color: rgba(176, 186, 195, 0.68) !important;

  border-color: rgba(140, 151, 163, 0.12) !important;

  text-shadow: none !important;
}


/* =========================================================
   UTILITY BUTTONS
   ========================================================= */

body.map-page .roa-settings-utility-trigger,
body.map-page .roa-music-trigger,
body.map-page .roa-help-trigger {
  background:
    linear-gradient(
      180deg,
      rgba(20, 26, 34, 0.96),
      rgba(11, 15, 21, 0.98)
    ) !important;

  background-image: none !important;

  border: 1px solid rgba(143, 155, 167, 0.16) !important;
  border-image: none !important;
  border-radius: 10px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 6px 12px rgba(0,0,0,0.18) !important;

  color: #e8e0d2 !important;

  filter: none !important;
}

body.map-page .roa-settings-utility-trigger:hover,
body.map-page .roa-settings-utility-trigger:focus-visible,
body.map-page .roa-music-trigger:hover,
body.map-page .roa-help-trigger:hover {
  background:
    linear-gradient(
      180deg,
      rgba(29, 36, 45, 0.98),
      rgba(14, 19, 26, 0.99)
    ) !important;

  background-image: none !important;

  border-color: rgba(183, 192, 201, 0.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 16px rgba(0,0,0,0.24) !important;

  filter: none !important;
}

body.map-page .roa-settings-utility-copy strong {
  color: #eee6d8 !important;
}

body.map-page .roa-settings-utility-copy small {
  color: rgba(201, 194, 181, 0.64) !important;
}

body.map-page .roa-help-trigger img {
  filter:
    grayscale(0.25)
    saturate(0.65)
    brightness(1.04) !important;
}


/* =========================================================
   ACCOUNT LINK + LOGOUT
   ========================================================= */

body.map-page .roa-account-dropdown > a {
  color: #e6ded0 !important;

  background: transparent !important;
  background-image: none !important;

  border-radius: 8px !important;

  text-shadow: none !important;
}

body.map-page .roa-account-dropdown > a:hover {
  color: #ffffff !important;

  background: rgba(145, 157, 169, 0.10) !important;
}


/* Kill old bright magenta Logout button */
body.map-page .roa-account-dropdown .roa-menu-action,
body.map-page .roa-account-dropdown .logout-form button {
  background:
    linear-gradient(
      180deg,
      rgba(31, 37, 45, 0.98),
      rgba(15, 20, 27, 0.99)
    ) !important;

  background-image: none !important;

  border: 1px solid rgba(151, 162, 173, 0.22) !important;
  border-image: none !important;
  border-radius: 9px !important;

  color: #eee6d8 !important;

  box-shadow: none !important;

  text-shadow: none !important;
  filter: none !important;
}

body.map-page .roa-account-dropdown .roa-menu-action:hover,
body.map-page .roa-account-dropdown .logout-form button:hover {
  background:
    linear-gradient(
      180deg,
      rgba(42, 49, 58, 0.99),
      rgba(20, 26, 34, 0.99)
    ) !important;

  border-color: rgba(192, 200, 208, 0.34) !important;

  color: #ffffff !important;

  box-shadow:
    0 8px 14px rgba(0,0,0,0.20) !important;
}


/* Remove purple legacy separators / framing inside dropdown */
body.map-page .roa-account-dropdown *,
body.map-page .roa-settings-utility,
body.map-page .roa-account-menu {
  border-image: none !important;
}


/* Soundtrack popup if opened from this menu */
body.map-page .roa-music-panel,
body.map-page .roa-help-panel {
  background:
    linear-gradient(
      180deg,
      rgba(14, 19, 26, 0.995),
      rgba(7, 10, 15, 0.995)
    ) !important;

  background-image: none !important;

  border: 1px solid rgba(145, 157, 169, 0.20) !important;
  border-image: none !important;

  box-shadow:
    0 24px 50px rgba(0,0,0,0.58) !important;

  color: #e9e2d5 !important;
}


/* ROA-MAP-ACCOUNT-SLEEK-V6 END */

/* ROA-MAP-FIELD-GUIDE-V7 START */

/* =========================================================
   FIELD GUIDE / SETTINGS INTERACTION FIX

   - hide the underlying Account dropdown while Guide is open
   - replace legacy purple framed Guide
   - remove magenta active tabs
   - remove browser-blue focus ring from Settings control
   ========================================================= */


/* ---------------------------------------------------------
   SETTINGS BUTTON FOCUS STATE
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-trigger:focus,
body.loadout-page.map-page
.roa-account-trigger:focus-visible {
  outline: 1px solid rgba(174, 185, 196, 0.40) !important;
  outline-offset: 2px !important;

  border-color: rgba(174, 185, 196, 0.34) !important;

  background:
    linear-gradient(
      180deg,
      rgba(27, 34, 43, 0.99),
      rgba(11, 15, 21, 0.99)
    ) !important;

  background-image: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 8px 18px rgba(0,0,0,0.30) !important;

  filter: none !important;
}


/* ---------------------------------------------------------
   WHEN FIELD GUIDE IS OPEN

   IMPORTANT:
   Keep the Account dropdown's physical box intact.

   The Help script uses hover/focus state from this DOM tree.
   Collapsing the parent to 0x0 caused pointerleave ->
   close -> reopen -> close flickering.

   Normal menu contents are therefore made invisible while
   retaining their layout footprint.
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown:has(.roa-help-panel:not([hidden])) {
  overflow: visible !important;

  opacity: 1 !important;

  background: transparent !important;
  background-image: none !important;

  border-color: transparent !important;
  border-image: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Keep normal Account rows in layout but invisible */
body.loadout-page.map-page
.roa-account-dropdown:has(.roa-help-panel:not([hidden]))
> :not(.roa-help) {
  visibility: hidden !important;
  pointer-events: none !important;
}


/*
   Keep the Help wrapper at its normal size.
   Hide only its launcher while the fixed Guide is open.
*/
body.loadout-page.map-page
.roa-account-dropdown:has(.roa-help-panel:not([hidden]))
> .roa-help {
  position: static !important;

  display: block !important;

  width: 100% !important;
  height: auto !important;

  overflow: visible !important;
}


body.loadout-page.map-page
.roa-account-dropdown:has(.roa-help-panel:not([hidden]))
> .roa-help
> .roa-help-trigger {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* The actual fixed Guide remains fully visible */
body.loadout-page.map-page
.roa-account-dropdown:has(.roa-help-panel:not([hidden]))
.roa-help-panel {
  visibility: visible !important;
  pointer-events: auto !important;
}


/* ---------------------------------------------------------
   FIELD GUIDE MAIN WINDOW
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
.roa-help-panel {
  position: fixed !important;

  top: calc(var(--roa-header-h, 88px) + 18px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;

  z-index: 5000 !important;

  display: grid !important;

  width: min(760px, calc(100vw - 64px)) !important;
  max-height:
    calc(100vh - var(--roa-header-h, 88px) - 42px) !important;

  gap: 16px !important;

  padding: 20px !important;

  overflow: hidden !important;

  color: #e8e1d5 !important;

  border: 1px solid rgba(145, 157, 169, 0.22) !important;
  border-image: none !important;
  border-radius: 16px !important;

  background:
    linear-gradient(
      180deg,
      rgba(14, 19, 26, 0.995),
      rgba(6, 9, 14, 0.998)
    ) !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(14, 19, 26, 0.995),
      rgba(6, 9, 14, 0.998)
    ) !important;

  box-shadow:
    0 30px 70px rgba(0,0,0,0.72),
    inset 0 1px 0 rgba(255,255,255,0.025) !important;

  filter: none !important;

  transform: translateX(-50%) !important;
}


/* Preserve actual hidden state */
body.loadout-page.map-page
.roa-account-dropdown
.roa-help-panel[hidden] {
  display: none !important;
}


/* ---------------------------------------------------------
   GUIDE HEADER
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-help-header {
  display: grid !important;

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

  gap: 14px !important;

  align-items: start !important;

  padding: 0 0 14px !important;

  border-bottom:
    1px solid rgba(145, 157, 169, 0.16) !important;
}


body.loadout-page.map-page
.roa-help-heading {
  gap: 4px !important;
}


body.loadout-page.map-page
.roa-help-heading small,
body.loadout-page.map-page
.roa-help-context-label,
body.loadout-page.map-page
.roa-help-safety {
  color: rgba(182, 191, 200, 0.66) !important;

  font-size: 0.59rem !important;
  font-weight: 700 !important;

  letter-spacing: 0.10em !important;

  text-shadow: none !important;
}


body.loadout-page.map-page
.roa-help-heading strong {
  color: #efe7d9 !important;

  font-size: 1.08rem !important;

  text-shadow: none !important;
}


body.loadout-page.map-page
.roa-help-context-label b {
  color: #d9e0e5 !important;
}


/* ---------------------------------------------------------
   CLOSE BUTTON
   Override legacy body.loadout-page !important rules
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-close {
  display: grid !important;

  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;

  padding: 0 !important;

  place-items: center !important;

  color: #d9e0e5 !important;

  font-size: 1rem !important;

  border: 1px solid rgba(151, 162, 173, 0.20) !important;
  border-image: none !important;
  border-radius: 9px !important;

  background:
    linear-gradient(
      180deg,
      rgba(25, 32, 41, 0.98),
      rgba(10, 14, 20, 0.99)
    ) !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(25, 32, 41, 0.98),
      rgba(10, 14, 20, 0.99)
    ) !important;

  box-shadow: none !important;

  text-shadow: none !important;

  transform: none !important;
  filter: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-close:hover,
body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-close:focus-visible {
  color: #ffffff !important;

  border-color: rgba(190, 199, 207, 0.36) !important;

  background:
    linear-gradient(
      180deg,
      rgba(37, 45, 55, 0.99),
      rgba(15, 20, 27, 0.99)
    ) !important;

  outline: none !important;

  filter: none !important;
}


/* ---------------------------------------------------------
   GUIDE LAYOUT
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-help-layout {
  display: grid !important;

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

  gap: 18px !important;

  min-height: 0 !important;
}


body.loadout-page.map-page
.roa-help-topics {
  display: grid !important;

  align-content: start !important;

  gap: 7px !important;

  min-height: 0 !important;

  padding: 0 4px 0 0 !important;

  overflow-y: auto !important;
}


/* ---------------------------------------------------------
   GUIDE TOPIC BUTTONS
   Beat the legacy !important cascade explicitly
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic {
  min-height: 40px !important;

  padding: 9px 11px !important;

  color: rgba(211, 205, 194, 0.72) !important;

  font-size: 0.65rem !important;
  font-weight: 700 !important;

  line-height: 1.2 !important;

  text-align: left !important;

  border: 1px solid rgba(142, 154, 166, 0.14) !important;
  border-image: none !important;
  border-radius: 9px !important;

  background:
    linear-gradient(
      180deg,
      rgba(17, 22, 30, 0.98),
      rgba(9, 13, 18, 0.99)
    ) !important;

  background-image:
    linear-gradient(
      180deg,
      rgba(17, 22, 30, 0.98),
      rgba(9, 13, 18, 0.99)
    ) !important;

  box-shadow: none !important;

  text-shadow: none !important;

  transform: none !important;
  filter: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic:hover,
body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic:focus-visible {
  color: #f0e9dd !important;

  border-color: rgba(174, 184, 194, 0.28) !important;

  background:
    linear-gradient(
      180deg,
      rgba(25, 32, 41, 0.99),
      rgba(12, 17, 23, 0.99)
    ) !important;

  outline: none !important;

  box-shadow: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic.is-active {
  color: #ffffff !important;

  border-color: rgba(181, 191, 200, 0.32) !important;

  background:
    linear-gradient(
      180deg,
      rgba(29, 37, 47, 0.99),
      rgba(14, 19, 26, 0.99)
    ) !important;

  box-shadow:
    inset 3px 0 0 rgba(173, 184, 194, 0.72) !important;
}


/* ---------------------------------------------------------
   CONTENT SIDE
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-help-content-shell {
  min-width: 0 !important;
  min-height: 0 !important;

  padding: 4px 6px 4px 2px !important;

  overflow-y: auto !important;
}


body.loadout-page.map-page
.roa-help-content {
  gap: 12px !important;
}


body.loadout-page.map-page
.roa-help-content h3 {
  color: #f0e8da !important;

  font-size: 1.05rem !important;

  text-shadow: none !important;
}


body.loadout-page.map-page
.roa-help-content p {
  color: rgba(214, 207, 195, 0.76) !important;

  font-size: 0.74rem !important;

  line-height: 1.55 !important;
}


body.loadout-page.map-page
.roa-help-content li {
  color: rgba(224, 218, 207, 0.82) !important;

  font-size: 0.71rem !important;

  line-height: 1.48 !important;
}


body.loadout-page.map-page
.roa-help-content li::before {
  color: rgba(167, 179, 190, 0.80) !important;
}


/* ---------------------------------------------------------
   FOOTER / SAFETY STRIP
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-help-safety {
  padding-top: 13px !important;

  border-top:
    1px solid rgba(145, 157, 169, 0.14) !important;

  color: rgba(179, 189, 198, 0.62) !important;

  line-height: 1.5 !important;
}


/* Ensure no purple frame image remains anywhere in the Guide */
body.loadout-page.map-page
.roa-help-panel,
body.loadout-page.map-page
.roa-help-panel *,
body.loadout-page.map-page
.roa-help-topic,
body.loadout-page.map-page
.roa-help-close {
  border-image: none !important;
}


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

@media (max-width: 760px) {

  body.loadout-page.map-page
  .roa-account-dropdown
  .roa-help-panel {
    top: calc(var(--roa-header-h, 72px) + 10px) !important;

    width: calc(100vw - 20px) !important;

    max-height:
      calc(100vh - var(--roa-header-h, 72px) - 22px) !important;

    padding: 14px !important;
  }

  body.loadout-page.map-page
  .roa-help-layout {
    grid-template-columns: 1fr !important;
  }

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

    overflow: visible !important;
  }

  body.loadout-page.map-page
  .roa-account-dropdown
  button.roa-help-topic {
    text-align: center !important;
  }
}


/* ROA-MAP-FIELD-GUIDE-V7 END */

/* ROA-MAP-OPAQUE-UTILITIES-V8 START */

/* =========================================================
   FULLY OPAQUE SETTINGS / SOUNDTRACK / FIELD GUIDE

   No transparency.
   No purple/magenta surfaces.
   No old fantasy-frame border-image.
   ========================================================= */


/* ---------------------------------------------------------
   ACCOUNT / SETTINGS DROPDOWN
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-menu
.roa-account-dropdown {
  opacity: 1 !important;

  background-color: #090e14 !important;

  background-image:
    linear-gradient(
      180deg,
      #111821 0%,
      #0b1017 46%,
      #070b10 100%
    ) !important;

  border: 1px solid #28323d !important;
  border-image: none !important;
  border-radius: 14px !important;

  box-shadow:
    0 24px 50px rgba(0, 0, 0, 0.78),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  filter: none !important;

  isolation: isolate !important;
}


/* Explicit opaque backing layer */
body.loadout-page.map-page
.roa-account-menu
.roa-account-dropdown::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: -1 !important;

  border-radius: inherit !important;

  background: #090e14 !important;

  opacity: 1 !important;

  pointer-events: none !important;
}


/* ---------------------------------------------------------
   SOUNDTRACK / FIELD GUIDE LAUNCHER ROWS
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
.roa-settings-utility-trigger,
body.loadout-page.map-page
.roa-account-dropdown
.roa-music-trigger,
body.loadout-page.map-page
.roa-account-dropdown
.roa-help-trigger {
  opacity: 1 !important;

  background-color: #101720 !important;

  background-image:
    linear-gradient(
      180deg,
      #151e28 0%,
      #0c1219 100%
    ) !important;

  border: 1px solid #2a3541 !important;
  border-image: none !important;
  border-radius: 9px !important;

  color: #e8e1d5 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 5px 12px rgba(0,0,0,0.28) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  filter: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
.roa-settings-utility-trigger:hover,
body.loadout-page.map-page
.roa-account-dropdown
.roa-settings-utility-trigger:focus-visible,
body.loadout-page.map-page
.roa-account-dropdown
.roa-settings-utility-trigger[aria-expanded="true"] {
  background-color: #17212c !important;

  background-image:
    linear-gradient(
      180deg,
      #1d2834 0%,
      #101720 100%
    ) !important;

  border-color: #465361 !important;

  color: #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 7px 16px rgba(0,0,0,0.34) !important;

  outline: none !important;
  filter: none !important;
}


/* Remove purple status dot */
body.loadout-page.map-page
.roa-account-dropdown
.roa-music-trigger::after {
  border-color: #56616c !important;
  background: #58636e !important;
  box-shadow: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
.roa-music-trigger.is-playing::after {
  background: #8fa49c !important;
  box-shadow: 0 0 6px rgba(143,164,156,0.32) !important;
}


/* ---------------------------------------------------------
   SOUNDTRACK PANEL
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
.roa-music-panel {
  opacity: 1 !important;

  color: #e7dfd2 !important;

  background-color: #080d13 !important;

  background-image:
    linear-gradient(
      180deg,
      #121922 0%,
      #0a1017 48%,
      #070b10 100%
    ) !important;

  border: 1px solid #293540 !important;
  border-image: none !important;
  border-radius: 14px !important;

  box-shadow:
    0 28px 64px rgba(0,0,0,0.80),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  filter: none !important;

  isolation: isolate !important;
}


body.loadout-page.map-page
.roa-account-dropdown
.roa-music-panel::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: -1 !important;

  border-radius: inherit !important;

  background: #080d13 !important;

  opacity: 1 !important;

  pointer-events: none !important;
}


body.loadout-page.map-page
.roa-music-heading {
  border-bottom-color: #28323c !important;
}


body.loadout-page.map-page
.roa-music-heading small,
body.loadout-page.map-page
.roa-music-status,
body.loadout-page.map-page
.roa-music-position,
body.loadout-page.map-page
.roa-music-volume {
  color: #9ea8b1 !important;
}


body.loadout-page.map-page
.roa-music-heading strong {
  color: #eee6d8 !important;
}


/* Music controls */
body.loadout-page.map-page
.roa-account-dropdown
button.roa-music-control {
  opacity: 1 !important;

  color: #ddd6cb !important;

  background-color: #111821 !important;

  background-image:
    linear-gradient(
      180deg,
      #18212b 0%,
      #0d131a 100%
    ) !important;

  border: 1px solid #303b46 !important;
  border-image: none !important;
  border-radius: 8px !important;

  box-shadow: none !important;

  filter: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
button.roa-music-control:hover,
body.loadout-page.map-page
.roa-account-dropdown
button.roa-music-control:focus-visible {
  color: #ffffff !important;

  background-color: #1a242f !important;

  background-image:
    linear-gradient(
      180deg,
      #202c38 0%,
      #121922 100%
    ) !important;

  border-color: #52606d !important;

  outline: none !important;
  filter: none !important;
}


body.loadout-page.map-page
.roa-music-volume input {
  accent-color: #83939f !important;
}


/* ---------------------------------------------------------
   FIELD GUIDE PANEL
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
.roa-help-panel {
  opacity: 1 !important;

  color: #e8e1d5 !important;

  background-color: #080d13 !important;

  background-image:
    linear-gradient(
      180deg,
      #121922 0%,
      #0a1017 48%,
      #070b10 100%
    ) !important;

  border: 1px solid #293540 !important;
  border-image: none !important;
  border-radius: 16px !important;

  box-shadow:
    0 30px 70px rgba(0,0,0,0.82),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  filter: none !important;

  isolation: isolate !important;
}


/* True solid backing behind Guide */
body.loadout-page.map-page
.roa-account-dropdown
.roa-help-panel::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: -1 !important;

  border-radius: inherit !important;

  background: #080d13 !important;

  opacity: 1 !important;

  pointer-events: none !important;
}


/* ---------------------------------------------------------
   GUIDE TOPIC BUTTONS
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic {
  opacity: 1 !important;

  color: #cbd2d8 !important;

  background-color: #111821 !important;

  background-image:
    linear-gradient(
      180deg,
      #171f29 0%,
      #0d131a 100%
    ) !important;

  border: 1px solid #2b3641 !important;
  border-image: none !important;
  border-radius: 8px !important;

  box-shadow: none !important;

  filter: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic:hover,
body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic:focus-visible {
  color: #ffffff !important;

  background-color: #1a242e !important;

  background-image:
    linear-gradient(
      180deg,
      #202b37 0%,
      #121922 100%
    ) !important;

  border-color: #4d5b68 !important;

  outline: none !important;

  box-shadow: none !important;
}


body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-topic.is-active {
  color: #ffffff !important;

  background-color: #202b36 !important;

  background-image:
    linear-gradient(
      180deg,
      #26323e 0%,
      #151d26 100%
    ) !important;

  border-color: #65727e !important;

  box-shadow:
    inset 3px 0 0 #a8b2bb !important;
}


/* ---------------------------------------------------------
   GUIDE CLOSE BUTTON
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown
button.roa-help-close {
  opacity: 1 !important;

  color: #dce2e7 !important;

  background-color: #111821 !important;

  background-image:
    linear-gradient(
      180deg,
      #18212b 0%,
      #0d131a 100%
    ) !important;

  border: 1px solid #303b46 !important;
  border-image: none !important;
  border-radius: 8px !important;

  box-shadow: none !important;

  filter: none !important;
}


/* ---------------------------------------------------------
   UTILITY TEXT
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-settings-utility-copy strong {
  color: #ebe4d9 !important;
}


body.loadout-page.map-page
.roa-settings-utility-copy small {
  color: #9da7af !important;
}


body.loadout-page.map-page
.roa-help-trigger img {
  opacity: 0.88 !important;

  filter:
    grayscale(0.20)
    saturate(0.35)
    brightness(1.08) !important;
}


/* ---------------------------------------------------------
   HARD TRANSPARENCY LOCK
   --------------------------------------------------------- */

body.loadout-page.map-page
.roa-account-dropdown,
body.loadout-page.map-page
.roa-account-dropdown
.roa-settings-utility-trigger,
body.loadout-page.map-page
.roa-account-dropdown
.roa-music-panel,
body.loadout-page.map-page
.roa-account-dropdown
.roa-help-panel,
body.loadout-page.map-page
.roa-account-dropdown
.roa-help-topic,
body.loadout-page.map-page
.roa-account-dropdown
.roa-music-control {
  opacity: 1 !important;

  mix-blend-mode: normal !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ROA-MAP-OPAQUE-UTILITIES-V8 END */

/* ROA-MAP-SCROLLBARS-V9 START */

/* =========================================================
   MAP HUD SCROLLBARS
   Dark / steel only — zero purple or magenta
   ========================================================= */

/* Firefox */
body.map-page,
body.map-page * {
  scrollbar-width: thin !important;
  scrollbar-color: #596673 #090d12 !important;
}


/* Chrome / Edge / Safari */
body.map-page::-webkit-scrollbar,
body.map-page *::-webkit-scrollbar {
  width: 9px !important;
  height: 9px !important;
}


body.map-page::-webkit-scrollbar-track,
body.map-page *::-webkit-scrollbar-track {
  background: #090d12 !important;

  border-radius: 8px !important;

  box-shadow:
    inset 0 0 0 1px rgba(130, 143, 156, 0.08) !important;
}


body.map-page::-webkit-scrollbar-thumb,
body.map-page *::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      #677583 0%,
      #4a5662 100%
    ) !important;

  border: 2px solid #090d12 !important;
  border-radius: 8px !important;

  box-shadow: none !important;
}


body.map-page::-webkit-scrollbar-thumb:hover,
body.map-page *::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      #85929d 0%,
      #606e7a 100%
    ) !important;

  box-shadow: none !important;
}


body.map-page::-webkit-scrollbar-corner,
body.map-page *::-webkit-scrollbar-corner {
  background: #090d12 !important;
}


/*
   Explicit locks for the HUD regions we know scroll.
*/
body.map-page .roa-realm-list,
body.map-page .roa-map-context,
body.map-page .roa-account-dropdown,
body.map-page .roa-help-topics,
body.map-page .roa-help-content-shell,
body.map-page .roa-help-panel,
body.map-page .roa-music-panel {
  scrollbar-color: #596673 #090d12 !important;
}


/* ROA-MAP-SCROLLBARS-V9 END */