/*
 * UI-MISSION-001
 * Explore Flow Command Center
 *
 * Page-scoped presentation only. Mission routes, payloads, cooldowns,
 * encounter generation, and resolution remain Bot-authoritative.
 */

.roa-explore-command-center {
  position: relative;
  isolation: isolate;
  min-height: min(
    760px,
    calc(
      100vh
      - var(--roa-header-h, 82px)
      - var(--roa-dock-h, 66px)
      - 24px
    )
  );
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid rgba(218, 174, 82, 0.68);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(18, 14, 11, 0.97), rgba(7, 8, 11, 0.98)),
    radial-gradient(circle at 20% 0%, rgba(102, 70, 28, 0.34), transparent 46%);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.56),
    inset 0 0 0 1px rgba(255, 230, 170, 0.06);
  color: #f4ead2;
  scroll-margin-top: calc(var(--roa-header-h, 82px) + 12px);
}

.roa-explore-command-center::before,
.roa-explore-command-center::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.roa-explore-command-center::before {
  inset: 0;
  opacity: 0.36;
  background:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.roa-explore-command-center::after {
  inset: auto -12% -48% 28%;
  height: 78%;
  border-radius: 50%;
  background: rgba(123, 79, 24, 0.13);
  filter: blur(42px);
}

.roa-explore-command-center--encounter {
  border-color: rgba(190, 112, 66, 0.68);
  background:
    linear-gradient(180deg, rgba(20, 12, 10, 0.98), rgba(7, 8, 11, 0.99)),
    radial-gradient(circle at 78% 0%, rgba(114, 40, 27, 0.32), transparent 48%);
}

.roa-explore-command-header {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(260px, 0.8fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 118px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(218, 174, 82, 0.31);
  background:
    linear-gradient(180deg, rgba(48, 36, 24, 0.9), rgba(18, 14, 11, 0.72));
}

.roa-explore-command-title {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.roa-explore-command-title > div {
  min-width: 0;
}

.roa-explore-command-title .eyebrow,
.roa-explore-panel-heading .eyebrow,
.roa-explore-briefing-copy .eyebrow,
.roa-explore-encounter-identity .eyebrow {
  margin: 0 0 3px;
  color: #d8ae57;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.roa-explore-command-title h2,
.roa-explore-panel-heading h3,
.roa-explore-briefing-copy h3,
.roa-explore-encounter-identity h3 {
  margin: 0;
  color: #fff4d5;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

.roa-explore-command-title h2 {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.roa-explore-command-title p:last-child {
  max-width: 560px;
  margin: 5px 0 0;
  color: #bcb19e;
  font-size: 0.82rem;
  line-height: 1.42;
}

.roa-explore-command-emblem {
  position: relative;
  display: grid;
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(224, 182, 88, 0.7);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 222, 137, 0.23), transparent 58%),
    linear-gradient(145deg, #4f371d, #18110c);
  box-shadow:
    inset 0 0 20px rgba(224, 179, 81, 0.13),
    0 8px 24px rgba(0, 0, 0, 0.34);
}

.roa-explore-command-emblem.is-danger {
  border-color: rgba(210, 117, 73, 0.72);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 140, 94, 0.22), transparent 58%),
    linear-gradient(145deg, #53271d, #180d0b);
}

.roa-explore-command-emblem img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.52));
}

.roa-explore-stage-track {
  display: grid;
  grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto;
  align-items: center;
  width: 100%;
}

.roa-explore-stage-track span {
  display: grid;
  gap: 4px;
  justify-items: center;
  color: #817666;
}

.roa-explore-stage-track span b {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(153, 137, 109, 0.34);
  border-radius: 50%;
  background: #141310;
  color: #887d6b;
  font-size: 0.72rem;
}

.roa-explore-stage-track span small {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roa-explore-stage-track i {
  height: 1px;
  margin: 0 7px 18px;
  background: rgba(157, 139, 105, 0.28);
}

.roa-explore-stage-track span.is-active,
.roa-explore-stage-track span.is-complete {
  color: #efd794;
}

.roa-explore-stage-track span.is-active b,
.roa-explore-stage-track span.is-complete b {
  border-color: #d5a947;
  background: linear-gradient(145deg, #6f4c1d, #2b1c0c);
  color: #fff1c1;
  box-shadow: 0 0 18px rgba(206, 157, 52, 0.24);
}

.roa-explore-stage-track i.is-complete {
  background: linear-gradient(90deg, #a87528, #d5ad55);
}

.roa-explore-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.roa-explore-command-metrics article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(218, 174, 82, 0.24);
  border-radius: 10px;
  background: rgba(8, 9, 11, 0.48);
}

.roa-explore-command-metrics span,
.roa-explore-command-metrics strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roa-explore-command-metrics span {
  margin-bottom: 3px;
  color: #948a7b;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roa-explore-command-metrics strong {
  color: #f0d79b;
  font-size: 0.78rem;
}

.roa-explore-command-metrics strong.is-ready {
  color: #9ed49e;
}

.roa-explore-command-metrics strong.is-cooldown,
.roa-explore-command-metrics strong.is-danger {
  color: #e09a77;
}

.roa-explore-command-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 0.74fr) minmax(0, 1.7fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.roa-explore-briefing-panel,
.roa-explore-selection-panel,
.roa-explore-encounter-dossier,
.roa-explore-approach-panel {
  min-width: 0;
  border: 1px solid rgba(218, 174, 82, 0.27);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(29, 23, 17, 0.9), rgba(10, 10, 11, 0.92));
  box-shadow: inset 0 0 28px rgba(255, 210, 115, 0.025);
}

.roa-explore-briefing-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

.roa-explore-briefing-art {
  position: relative;
  display: grid;
  min-height: 170px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(219, 174, 79, 0.25);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 46%, rgba(213, 170, 68, 0.2), transparent 30%),
    linear-gradient(160deg, rgba(54, 41, 23, 0.9), rgba(12, 13, 15, 0.98));
}

.roa-explore-briefing-art::before,
.roa-explore-briefing-art::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(218, 174, 82, 0.22);
  border-radius: 50%;
}

.roa-explore-briefing-art::before {
  width: 116px;
  height: 116px;
}

.roa-explore-briefing-art::after {
  width: 150px;
  height: 150px;
}

.roa-explore-briefing-art img {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter:
    sepia(0.45)
    saturate(1.35)
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.62));
}

.roa-explore-briefing-copy p:last-child {
  margin: 8px 0 0;
  color: #aaa091;
  font-size: 0.82rem;
  line-height: 1.55;
}

.roa-explore-cooldown-notice,
.roa-explore-ready-notice,
.roa-explore-active-consumable {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 11px;
  border: 1px solid rgba(205, 119, 76, 0.4);
  border-radius: 11px;
  background: rgba(74, 31, 20, 0.28);
}

.roa-explore-ready-notice {
  border-color: rgba(107, 174, 110, 0.38);
  background: rgba(34, 76, 39, 0.23);
}

.roa-explore-cooldown-notice img,
.roa-explore-ready-notice img,
.roa-explore-active-consumable img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.roa-explore-cooldown-notice div,
.roa-explore-ready-notice div,
.roa-explore-active-consumable div {
  min-width: 0;
}

.roa-explore-cooldown-notice small,
.roa-explore-cooldown-notice strong,
.roa-explore-cooldown-notice span,
.roa-explore-ready-notice small,
.roa-explore-ready-notice strong,
.roa-explore-ready-notice span,
.roa-explore-active-consumable small,
.roa-explore-active-consumable strong,
.roa-explore-active-consumable span {
  display: block;
}

.roa-explore-cooldown-notice small,
.roa-explore-ready-notice small,
.roa-explore-active-consumable small {
  color: #9c8f7d;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.roa-explore-cooldown-notice strong {
  color: #efa47e;
}

.roa-explore-ready-notice strong,
.roa-explore-active-consumable strong {
  color: #d8c18a;
}

.roa-explore-cooldown-notice span,
.roa-explore-ready-notice span,
.roa-explore-active-consumable span {
  margin-top: 2px;
  color: #a99d8c;
  font-size: 0.7rem;
}

.roa-explore-protocol {
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.roa-explore-protocol span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #9d9283;
  font-size: 0.72rem;
}

.roa-explore-protocol b {
  display: grid;
  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid rgba(217, 173, 80, 0.34);
  border-radius: 50%;
  color: #d4ae5c;
  font-size: 0.62rem;
}

.roa-explore-selection-panel,
.roa-explore-approach-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.roa-explore-panel-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(218, 174, 82, 0.22);
  background: rgba(35, 27, 19, 0.54);
}

.roa-explore-panel-heading > span {
  color: #978c7c;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roa-explore-preflight-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.roa-explore-consumable-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 0;
  max-height: 430px;
  padding: 14px;
  overflow: auto;
  scrollbar-color: #8d6527 rgba(0, 0, 0, 0.25);
  scrollbar-width: thin;
}

.roa-explore-consumable-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 112px;
  padding: 12px;
  cursor: pointer;
  border: 1px solid rgba(157, 137, 105, 0.3);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(34, 30, 24, 0.84), rgba(12, 12, 13, 0.92));
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.roa-explore-consumable-card:hover {
  border-color: rgba(218, 174, 82, 0.62);
  transform: translateY(-1px);
}

.roa-explore-consumable-card:has(input:checked) {
  border-color: #d7ab4f;
  background:
    linear-gradient(145deg, rgba(83, 61, 28, 0.72), rgba(23, 17, 12, 0.96));
  box-shadow:
    inset 0 0 24px rgba(222, 173, 68, 0.09),
    0 0 0 1px rgba(220, 174, 72, 0.12);
}

.roa-explore-consumable-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.roa-explore-consumable-selector {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid #746b5c;
  border-radius: 50%;
  background: #0d0e0f;
}

.roa-explore-consumable-card:has(input:checked)
.roa-explore-consumable-selector {
  border-color: #e0b65d;
  box-shadow: inset 0 0 0 4px #24190c;
  background: #dfb45b;
}

.roa-explore-consumable-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(216, 172, 79, 0.29);
  border-radius: 10px;
  background: rgba(9, 10, 11, 0.55);
  color: #e3bd6a;
  font-size: 1.6rem;
}

.roa-explore-consumable-icon img {
  width: 29px;
  height: 29px;
  object-fit: contain;
}

.roa-explore-consumable-copy {
  min-width: 0;
}

.roa-explore-consumable-copy strong,
.roa-explore-consumable-copy small,
.roa-explore-consumable-copy em {
  display: block;
}

.roa-explore-consumable-copy strong {
  color: #f1dfb6;
  font-size: 0.87rem;
}

.roa-explore-consumable-copy small {
  margin-top: 2px;
  color: #9b907f;
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.roa-explore-consumable-copy em {
  margin-top: 5px;
  color: #aaa091;
  font-size: 0.67rem;
  font-style: normal;
  line-height: 1.35;
}

.roa-explore-consumable-copy em.is-effect {
  color: #d4b86f;
}

.roa-explore-consumable-quantity {
  align-self: start;
  padding: 4px 7px;
  border: 1px solid rgba(215, 171, 77, 0.3);
  border-radius: 999px;
  color: #c6aa6b;
  font-size: 0.58rem;
  white-space: nowrap;
}

.roa-explore-empty-loadout,
.roa-explore-empty-approaches {
  display: flex;
  gap: 11px;
  align-items: center;
  margin: 0 14px 14px;
  padding: 12px;
  border: 1px solid rgba(178, 142, 73, 0.27);
  border-radius: 10px;
  background: rgba(42, 33, 21, 0.38);
}

.roa-explore-empty-loadout img,
.roa-explore-empty-approaches img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.roa-explore-empty-loadout strong,
.roa-explore-empty-loadout small,
.roa-explore-empty-approaches strong,
.roa-explore-empty-approaches small {
  display: block;
}

.roa-explore-empty-loadout strong,
.roa-explore-empty-approaches strong {
  color: #dbc084;
}

.roa-explore-empty-loadout small,
.roa-explore-empty-approaches small {
  margin-top: 2px;
  color: #9f9586;
}

.roa-explore-command-actions,
.roa-explore-encounter-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 13px 14px;
  border-top: 1px solid rgba(218, 174, 82, 0.22);
  background: rgba(8, 9, 10, 0.5);
}

.roa-explore-primary-action,
.roa-explore-secondary-action {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 9px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.roa-explore-primary-action {
  cursor: pointer;
  border: 1px solid #e0b75d;
  background:
    linear-gradient(180deg, #765323, #36220d);
  color: #fff0be;
  box-shadow:
    inset 0 1px rgba(255, 238, 184, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.3);
}

.roa-explore-primary-action:hover:not(:disabled) {
  border-color: #f1cf79;
  background:
    linear-gradient(180deg, #8a6228, #432a0f);
}

.roa-explore-primary-action:disabled {
  cursor: wait;
  opacity: 0.68;
}

.roa-explore-secondary-action {
  border: 1px solid rgba(184, 156, 104, 0.42);
  background: #171513;
  color: #bcae94;
}

.roa-explore-secondary-action:hover {
  border-color: rgba(218, 174, 82, 0.72);
  color: #ead49d;
}

.roa-explore-encounter-workspace {
  display: grid;
  grid-template-columns: minmax(310px, 0.84fr) minmax(0, 1.55fr);
  gap: 14px;
  min-height: 0;
  padding: 14px;
}

.roa-explore-encounter-dossier {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.roa-explore-encounter-art {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-bottom: 1px solid rgba(218, 174, 82, 0.24);
  background:
    radial-gradient(circle at 50% 20%, rgba(142, 73, 39, 0.24), transparent 48%),
    #0a0a0c;
}

.roa-explore-encounter-art > img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}

.roa-explore-encounter-art::after {
  position: absolute;
  inset: 44% 0 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(7, 7, 9, 0.96));
}

.roa-explore-encounter-fallback {
  display: grid;
  min-height: 280px;
  place-items: center;
}

.roa-explore-encounter-fallback img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  opacity: 0.72;
}

.roa-explore-encounter-status {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  padding: 5px 9px;
  border: 1px solid rgba(226, 141, 92, 0.54);
  border-radius: 999px;
  background: rgba(41, 16, 12, 0.82);
  color: #eda47d;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.roa-explore-encounter-identity {
  padding: 15px;
}

.roa-explore-encounter-identity h3 {
  font-size: 1.45rem;
}

.roa-explore-encounter-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.roa-explore-encounter-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(193, 143, 77, 0.3);
  border-radius: 999px;
  background: rgba(47, 28, 17, 0.58);
  color: #cbb17b;
  font-size: 0.61rem;
}

.roa-explore-flavor-text {
  margin: 11px 0 0;
  color: #b4a797;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.55;
}

.roa-explore-active-consumable {
  margin: auto 15px 15px;
  border-color: rgba(215, 171, 77, 0.34);
  background: rgba(60, 43, 20, 0.3);
}

.roa-explore-active-consumable.is-none {
  border-color: rgba(178, 147, 92, 0.26);
  background: rgba(48, 38, 23, 0.26);
}

.roa-explore-approach-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 0;
  max-height: 492px;
  padding: 14px;
  overflow: auto;
  scrollbar-color: #8d6527 rgba(0, 0, 0, 0.25);
  scrollbar-width: thin;
}

.roa-explore-action-form {
  min-width: 0;
}

.roa-explore-approach-action {
  display: grid;
  width: 100%;
  min-height: 118px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  cursor: pointer;
  border: 1px solid rgba(173, 143, 91, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(36, 29, 22, 0.88), rgba(11, 11, 13, 0.94));
  color: inherit;
  text-align: left;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.roa-explore-approach-action:hover:not(:disabled) {
  border-color: rgba(222, 176, 82, 0.74);
  background:
    linear-gradient(145deg, rgba(70, 50, 24, 0.82), rgba(19, 14, 12, 0.97));
  box-shadow: inset 0 0 26px rgba(216, 167, 66, 0.07);
  transform: translateY(-1px);
}

.roa-explore-approach-action:disabled {
  cursor: wait;
  opacity: 0.66;
}

.roa-explore-approach-number {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(215, 171, 77, 0.4);
  border-radius: 9px;
  background: rgba(13, 13, 14, 0.65);
  color: #d8ae57;
  font-size: 0.67rem;
  font-weight: 800;
}

.roa-explore-approach-copy {
  min-width: 0;
}

.roa-explore-approach-copy strong,
.roa-explore-approach-copy small {
  display: block;
}

.roa-explore-approach-copy strong {
  color: #f0dfb8;
  font-size: 0.86rem;
  line-height: 1.3;
}

.roa-explore-approach-copy small {
  margin-top: 6px;
  color: #a79c8d;
  font-size: 0.68rem;
  line-height: 1.42;
}

.roa-explore-approach-arrow {
  color: #d2a850;
  font-family: Georgia, serif;
  font-size: 1.8rem;
}

.roa-explore-encounter-footer {
  justify-content: space-between;
}

.roa-explore-encounter-footer > span {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #9f9484;
  font-size: 0.68rem;
}

.roa-explore-encounter-footer > span img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

@media (max-width: 1280px) {
  .roa-explore-command-header {
    grid-template-columns: minmax(300px, 1.2fr) minmax(250px, 0.8fr);
  }

  .roa-explore-command-metrics {
    grid-column: 1 / -1;
  }

  .roa-explore-command-center {
    min-height: auto;
  }
}

@media (max-width: 980px) {
  .roa-explore-command-workspace,
  .roa-explore-encounter-workspace {
    grid-template-columns: 1fr;
  }

  .roa-explore-briefing-panel {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
  }

  .roa-explore-briefing-art {
    grid-row: span 3;
    min-height: 190px;
  }

  .roa-explore-protocol {
    margin-top: 0;
  }

  .roa-explore-encounter-dossier {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1fr);
  }

  .roa-explore-encounter-art {
    grid-row: span 2;
    border-right: 1px solid rgba(218, 174, 82, 0.24);
    border-bottom: 0;
  }

  .roa-explore-active-consumable {
    margin: 0 15px 15px;
  }
}

@media (max-width: 720px) {
  .roa-explore-command-center {
    margin: 10px 0;
    border-radius: 13px;
    scroll-margin-top: calc(var(--roa-header-h, 64px) + 8px);
  }

  .roa-explore-command-header {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
  }

  .roa-explore-command-emblem {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .roa-explore-command-emblem img {
    width: 32px;
    height: 32px;
  }

  .roa-explore-command-metrics {
    grid-template-columns: 1fr;
  }

  .roa-explore-stage-track {
    max-width: 390px;
    margin-inline: auto;
  }

  .roa-explore-command-workspace,
  .roa-explore-encounter-workspace {
    padding: 9px;
  }

  .roa-explore-briefing-panel,
  .roa-explore-encounter-dossier {
    display: flex;
  }

  .roa-explore-briefing-art {
    min-height: 150px;
  }

  .roa-explore-consumable-grid,
  .roa-explore-approach-grid {
    grid-template-columns: 1fr;
    max-height: none;
    overflow: visible;
  }

  .roa-explore-encounter-art {
    min-height: 240px;
    border-right: 0;
    border-bottom: 1px solid rgba(218, 174, 82, 0.24);
  }

  .roa-explore-encounter-art > img,
  .roa-explore-encounter-fallback {
    min-height: 240px;
  }

  .roa-explore-command-actions,
  .roa-explore-encounter-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .roa-explore-primary-action,
  .roa-explore-secondary-action {
    width: 100%;
  }

  .roa-explore-encounter-footer > span {
    justify-content: center;
    text-align: center;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .roa-explore-command-header {
    min-height: 102px;
    padding-block: 12px;
  }

  .roa-explore-briefing-art {
    min-height: 132px;
  }

  .roa-explore-consumable-grid {
    max-height: 340px;
  }

  .roa-explore-encounter-art,
  .roa-explore-encounter-art > img,
  .roa-explore-encounter-fallback {
    min-height: 220px;
  }

  .roa-explore-approach-grid {
    max-height: 372px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .roa-explore-consumable-card,
  .roa-explore-approach-action {
    transition: none;
  }

  .roa-explore-consumable-card:hover,
  .roa-explore-approach-action:hover:not(:disabled) {
    transform: none;
  }
}


/*
 * UI-MISSION-001A
 * Explore Preflight Visual Corrections
 *
 * Screenshot-driven presentation correction only.
 * No mission, cooldown, consumable, encounter, reward, or route changes.
 */

/* Prevent global magenta button and eyebrow rules from leaking into Explore. */
.roa-explore-command-center .eyebrow,
.roa-explore-command-center
.roa-explore-command-title .eyebrow,
.roa-explore-command-center
.roa-explore-panel-heading .eyebrow,
.roa-explore-command-center
.roa-explore-briefing-copy .eyebrow,
.roa-explore-command-center
.roa-explore-encounter-identity .eyebrow {
  color: #d8ae57 !important;
  text-shadow: none !important;
}

.roa-explore-command-center
.roa-explore-primary-action,
.roa-explore-command-center
button.roa-explore-primary-action {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #e0b75d !important;
  background:
    linear-gradient(180deg, #765323, #36220d) !important;
  background-color: #4a3013 !important;
  background-image:
    linear-gradient(180deg, #765323, #36220d) !important;
  color: #fff0be !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px rgba(255, 238, 184, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.roa-explore-command-center
.roa-explore-primary-action:hover:not(:disabled),
.roa-explore-command-center
button.roa-explore-primary-action:hover:not(:disabled) {
  border-color: #f1cf79 !important;
  background:
    linear-gradient(180deg, #8a6228, #432a0f) !important;
  background-color: #573714 !important;
  background-image:
    linear-gradient(180deg, #8a6228, #432a0f) !important;
  color: #fff4cf !important;
}

.roa-explore-command-center
.roa-explore-primary-action::before,
.roa-explore-command-center
.roa-explore-primary-action::after {
  display: none !important;
  content: none !important;
}

.roa-explore-command-center
.roa-explore-active-consumable {
  border-color: rgba(215, 171, 77, 0.34);
  background: rgba(60, 43, 20, 0.3);
}

/* Allow metric labels to display fully instead of truncating. */
.roa-explore-command-center
.roa-explore-command-metrics span {
  min-height: 1.3em;
  overflow: visible;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

/* Keep the action footer visually separate and above the fixed dock. */
.roa-explore-command-center
.roa-explore-command-actions,
.roa-explore-command-center
.roa-explore-encounter-footer {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  background: rgba(8, 9, 10, 0.96);
  box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.22);
}

/* Give the default option enough width for readable copy and badge text. */
.roa-explore-command-center
.roa-explore-consumable-card.is-default {
  grid-column: 1 / -1;
  grid-template-columns:
    auto
    46px
    minmax(220px, 1fr)
    max-content;
  min-height: 88px;
}

.roa-explore-command-center
.roa-explore-consumable-card.is-default
.roa-explore-consumable-copy {
  padding-right: 8px;
}

.roa-explore-command-center
.roa-explore-consumable-card.is-default
.roa-explore-consumable-copy strong {
  font-size: 0.94rem;
}

.roa-explore-command-center
.roa-explore-consumable-card.is-default
.roa-explore-consumable-quantity {
  align-self: center;
}

/*
 * Desktop game-shell correction:
 * fit the active flow between the persistent top navigation and bottom dock.
 */
@media (min-width: 981px) {
  .roa-explore-command-center {
    display: flex;
    height:
      calc(
        100dvh
        - var(--roa-header-h, 82px)
        - var(--roa-dock-h, 66px)
        - 24px
      );
    min-height: 560px;
    max-height: 720px;
    flex-direction: column;
    margin:
      10px
      0
      calc(var(--roa-dock-h, 66px) + 12px);
    overflow: hidden;
    scroll-margin-bottom:
      calc(var(--roa-dock-h, 66px) + 12px);
  }

  .roa-explore-command-header {
    grid-template-columns:
      minmax(260px, 1.1fr)
      minmax(220px, 0.72fr)
      minmax(390px, 1.12fr);
    gap: 12px;
    min-height: 94px;
    padding: 12px 16px;
  }

  .roa-explore-command-emblem {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }

  .roa-explore-command-emblem img {
    width: 33px;
    height: 33px;
  }

  .roa-explore-command-title h2 {
    font-size: clamp(1.35rem, 1.8vw, 1.8rem);
  }

  .roa-explore-command-title p:last-child {
    margin-top: 3px;
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .roa-explore-command-metrics article {
    padding: 8px 9px;
  }

  .roa-explore-command-workspace,
  .roa-explore-encounter-workspace {
    flex: 1 1 auto;
    gap: 10px;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
  }

  .roa-explore-command-workspace {
    grid-template-columns:
      minmax(220px, 0.58fr)
      minmax(0, 1.85fr);
  }

  .roa-explore-briefing-panel {
    gap: 9px;
    min-height: 0;
    padding: 11px;
    overflow: auto;
  }

  .roa-explore-briefing-art {
    min-height: 104px;
  }

  .roa-explore-briefing-art::before {
    width: 74px;
    height: 74px;
  }

  .roa-explore-briefing-art::after {
    width: 96px;
    height: 96px;
  }

  .roa-explore-briefing-art img {
    width: 50px;
    height: 50px;
  }

  .roa-explore-briefing-copy p:last-child {
    margin-top: 5px;
    font-size: 0.73rem;
    line-height: 1.38;
  }

  .roa-explore-cooldown-notice,
  .roa-explore-ready-notice,
  .roa-explore-active-consumable {
    gap: 8px;
    padding: 8px;
  }

  .roa-explore-cooldown-notice img,
  .roa-explore-ready-notice img,
  .roa-explore-active-consumable img {
    width: 25px;
    height: 25px;
  }

  .roa-explore-protocol {
    gap: 4px;
    margin-top: 0;
  }

  .roa-explore-protocol span {
    gap: 6px;
    font-size: 0.65rem;
  }

  .roa-explore-protocol b {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
  }

  .roa-explore-panel-heading {
    flex: 0 0 auto;
    padding: 10px 13px;
  }

  .roa-explore-preflight-form {
    min-height: 0;
    overflow: hidden;
  }

  .roa-explore-consumable-grid {
    grid-template-columns:
      repeat(2, minmax(280px, 1fr));
    gap: 8px;
    max-height: none;
    padding: 10px;
    overflow: auto;
  }

  .roa-explore-consumable-card {
    min-height: 94px;
    padding: 10px;
  }

  .roa-explore-empty-loadout {
    flex: 0 0 auto;
    margin: 0 10px 8px;
    padding: 9px 11px;
  }

  .roa-explore-command-actions {
    padding: 9px 10px;
  }

  .roa-explore-primary-action,
  .roa-explore-secondary-action {
    min-height: 38px;
    padding: 8px 16px;
  }
}

/* Compact desktop-height safety for laptop and browser-toolbar viewports. */
@media (max-height: 780px) and (min-width: 981px) {
  .roa-explore-command-center {
    height:
      calc(
        100dvh
        - var(--roa-header-h, 82px)
        - var(--roa-dock-h, 66px)
        - 16px
      );
    min-height: 500px;
    max-height: 640px;
    margin-top: 6px;
  }

  .roa-explore-command-header {
    min-height: 82px;
    padding-block: 9px;
  }

  .roa-explore-briefing-art {
    min-height: 82px;
  }

  .roa-explore-briefing-copy p:last-child {
    font-size: 0.68rem;
  }

  .roa-explore-consumable-card {
    min-height: 82px;
  }

  .roa-explore-command-actions {
    padding-block: 7px;
  }
}

/* Preserve readable stacking on narrow layouts. */
@media (max-width: 720px) {
  .roa-explore-command-center {
    margin-bottom:
      calc(var(--roa-dock-h, 66px) + 14px);
  }

  .roa-explore-command-center
  .roa-explore-consumable-card.is-default {
    grid-template-columns:
      auto
      42px
      minmax(0, 1fr);
  }

  .roa-explore-command-center
  .roa-explore-consumable-card.is-default
  .roa-explore-consumable-quantity {
    grid-column: 2 / -1;
    justify-self: start;
  }
}


/*
 * UI-MISSION-001B
 * Explore Flow Visual Corrections
 *
 * Screenshot-driven presentation correction only.
 * Routes, payloads, cooldowns, encounters, rewards, and Bot logic
 * remain unchanged.
 */

/* ---------------------------------------------------------------
 * Preflight: neutralize global form width restrictions.
 * --------------------------------------------------------------- */

body.map-page
.roa-explore-command-center--preflight
form.mission-launch-form.roa-explore-preflight-form {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.map-page
.roa-explore-command-center--preflight
.roa-explore-selection-panel,
body.map-page
.roa-explore-command-center--preflight
.roa-explore-consumable-grid,
body.map-page
.roa-explore-command-center--preflight
.roa-explore-empty-loadout,
body.map-page
.roa-explore-command-center--preflight
.roa-explore-command-actions {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

body.map-page
.roa-explore-command-center--preflight
.roa-explore-consumable-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
}

body.map-page
.roa-explore-command-center--preflight
.roa-explore-consumable-card.is-default {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  grid-template-columns:
    auto
    46px
    minmax(0, 1fr)
    max-content !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.map-page
.roa-explore-command-center--preflight
.roa-explore-consumable-card.is-default
.roa-explore-consumable-copy {
  min-width: 0 !important;
  padding-right: 12px;
}

body.map-page
.roa-explore-command-center--preflight
.roa-explore-consumable-card.is-default
.roa-explore-consumable-quantity {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  align-self: center !important;
  justify-self: end !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* ---------------------------------------------------------------
 * Encounter: prevent generic mission banners from competing with
 * the new command-center header. The EJS condition is authoritative;
 * this is a defensive presentation fallback.
 * --------------------------------------------------------------- */

body.map-page:has(
  .roa-explore-command-center[data-explore-flow="preflight"]
)
.mission-result-banner,
body.map-page:has(
  .roa-explore-command-center[data-explore-flow="encounter"]
)
.mission-result-banner {
  display: none !important;
}

/* ---------------------------------------------------------------
 * Encounter: override every global magenta button treatment.
 * --------------------------------------------------------------- */

body.map-page
.roa-explore-command-center--encounter
form.mission-launch-form.roa-explore-action-form {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.map-page
.roa-explore-command-center--encounter
form.mission-launch-form.roa-explore-action-form
> button.roa-explore-approach-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 104px !important;
  height: 100% !important;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: stretch !important;
  padding: 13px !important;
  cursor: pointer !important;
  overflow: visible !important;
  border:
    1px solid rgba(218, 174, 82, 0.56) !important;
  border-radius: 12px !important;
  border-image: none !important;
  outline: none !important;
  background:
    linear-gradient(
      145deg,
      rgba(61, 45, 24, 0.96),
      rgba(13, 12, 12, 0.98)
    ) !important;
  background-color: #17130f !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(61, 45, 24, 0.96),
      rgba(13, 12, 12, 0.98)
    ) !important;
  color: #f0dfb8 !important;
  font: inherit !important;
  text-align: left !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  mask-image: none !important;
  box-shadow:
    inset 0 0 24px rgba(222, 173, 68, 0.05),
    0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body.map-page
.roa-explore-command-center--encounter
form.mission-launch-form.roa-explore-action-form
> button.roa-explore-approach-action:hover:not(:disabled) {
  border-color: #e6bc62 !important;
  background:
    linear-gradient(
      145deg,
      rgba(91, 65, 29, 0.98),
      rgba(23, 16, 12, 0.99)
    ) !important;
  background-color: #2e2010 !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(91, 65, 29, 0.98),
      rgba(23, 16, 12, 0.99)
    ) !important;
  color: #fff1c4 !important;
  filter: none !important;
  box-shadow:
    inset 0 0 28px rgba(224, 177, 76, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-1px) !important;
}

body.map-page
.roa-explore-command-center--encounter
form.mission-launch-form.roa-explore-action-form
> button.roa-explore-approach-action:focus-visible {
  outline:
    2px solid rgba(239, 202, 113, 0.9) !important;
  outline-offset: 2px !important;
}

body.map-page
.roa-explore-command-center--encounter
form.mission-launch-form.roa-explore-action-form
> button.roa-explore-approach-action:disabled {
  cursor: wait !important;
  border-color:
    rgba(171, 142, 87, 0.42) !important;
  background:
    linear-gradient(
      145deg,
      rgba(45, 38, 29, 0.94),
      rgba(14, 14, 15, 0.98)
    ) !important;
  background-color: #171513 !important;
  background-image:
    linear-gradient(
      145deg,
      rgba(45, 38, 29, 0.94),
      rgba(14, 14, 15, 0.98)
    ) !important;
  color: #b8aa8f !important;
  filter: none !important;
  opacity: 0.68 !important;
  transform: none !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-action::before,
body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-action::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-action
.roa-explore-approach-number {
  border-color:
    rgba(224, 183, 93, 0.58) !important;
  background:
    linear-gradient(
      145deg,
      #4c3417,
      #17110c
    ) !important;
  color: #f0ca72 !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 0 12px rgba(224, 183, 93, 0.07) !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-action
.roa-explore-approach-copy strong {
  color: #f3dfb2 !important;
  text-shadow: none !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-action
.roa-explore-approach-copy small {
  color: #b5a690 !important;
  text-shadow: none !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-action
.roa-explore-approach-arrow {
  color: #d9ad50 !important;
  text-shadow: none !important;
}

/* ---------------------------------------------------------------
 * Encounter: keep the decision panel content-sized so the footer
 * follows the choices instead of leaving a large empty void.
 * --------------------------------------------------------------- */

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-panel {
  align-self: start !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-approach-grid {
  flex: 0 0 auto !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(104px, auto);
  align-content: start !important;
  max-height: none !important;
  overflow: visible !important;
}

body.map-page
.roa-explore-command-center--encounter
.roa-explore-encounter-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/* Compact desktop-height support. */
@media (max-height: 780px) and (min-width: 981px) {
  body.map-page
  .roa-explore-command-center--encounter
  form.mission-launch-form.roa-explore-action-form
  > button.roa-explore-approach-action {
    min-height: 86px !important;
    padding: 10px 12px !important;
  }

  body.map-page
  .roa-explore-command-center--encounter
  .roa-explore-approach-grid {
    grid-auto-rows: minmax(86px, auto);
  }
}

/* Narrow screens remain stacked and scrollable. */
@media (max-width: 720px) {
  body.map-page
  .roa-explore-command-center--preflight
  .roa-explore-consumable-grid,
  body.map-page
  .roa-explore-command-center--encounter
  .roa-explore-approach-grid {
    grid-template-columns: 1fr !important;
  }

  body.map-page
  .roa-explore-command-center--encounter
  .roa-explore-approach-panel {
    align-self: stretch !important;
    width: 100% !important;
  }

  body.map-page
  .roa-explore-command-center--encounter
  .roa-explore-approach-grid {
    grid-auto-rows: auto;
    overflow: visible !important;
  }

  body.map-page
  .roa-explore-command-center--encounter
  form.mission-launch-form.roa-explore-action-form
  > button.roa-explore-approach-action {
    min-height: 92px !important;
    height: auto !important;
  }
}


/*
 * UI-MISSION-001C
 * Explore Navigation and Result Lifecycle
 *
 * Marketplace presentation state only.
 * No Bot cancellation, resolution, reward, cooldown, database,
 * or bridge-client changes.
 */

.roa-explore-return-form {
  display: inline-flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

button.roa-explore-secondary-action,
.roa-explore-return-form
button.roa-explore-secondary-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: auto !important;
  min-width: 132px !important;
  max-width: none !important;
  cursor: pointer !important;
  border:
    1px solid rgba(194, 153, 76, 0.52) !important;
  border-radius: 10px !important;
  border-image: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(38, 31, 23, 0.98),
      rgba(15, 14, 13, 0.99)
    ) !important;
  background-color: #181512 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(38, 31, 23, 0.98),
      rgba(15, 14, 13, 0.99)
    ) !important;
  color: #d8c79f !important;
  font: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  box-shadow:
    inset 0 1px rgba(255, 236, 181, 0.05),
    0 5px 14px rgba(0, 0, 0, 0.2) !important;
}

button.roa-explore-secondary-action:hover,
.roa-explore-return-form
button.roa-explore-secondary-action:hover {
  border-color:
    rgba(226, 185, 96, 0.76) !important;
  background:
    linear-gradient(
      180deg,
      rgba(58, 43, 25, 0.99),
      rgba(23, 18, 13, 0.99)
    ) !important;
  background-color: #251c12 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(58, 43, 25, 0.99),
      rgba(23, 18, 13, 0.99)
    ) !important;
  color: #f1dfb2 !important;
  filter: none !important;
}

button.roa-explore-secondary-action::before,
button.roa-explore-secondary-action::after,
.roa-explore-return-form
button.roa-explore-secondary-action::before,
.roa-explore-return-form
button.roa-explore-secondary-action::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mission-result-lifecycle {
  position: relative;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.mission-result-lifecycle.is-dismissing {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
}

button.mission-result-dismiss {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  z-index: 8 !important;
  top: 10px !important;
  right: 10px !important;
  display: grid !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  border:
    1px solid rgba(216, 174, 87, 0.58) !important;
  border-radius: 8px !important;
  border-image: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(61, 44, 24, 0.98),
      rgba(22, 16, 12, 0.99)
    ) !important;
  background-color: #24190f !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(61, 44, 24, 0.98),
      rgba(22, 16, 12, 0.99)
    ) !important;
  color: #f2d992 !important;
  font-family: Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  box-shadow:
    inset 0 1px rgba(255, 237, 180, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.26) !important;
}

button.mission-result-dismiss:hover,
button.mission-result-dismiss:focus-visible {
  border-color: #e5bd65 !important;
  color: #fff0bc !important;
  outline: none !important;
}

button.mission-result-dismiss::before,
button.mission-result-dismiss::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

.mission-result-banner.mission-result-lifecycle {
  padding-right: 56px;
}

#mission-result-card.mission-result-lifecycle {
  padding-top: 52px;
}

@media (max-width: 720px) {
  .roa-explore-return-form,
  button.roa-explore-secondary-action,
  .roa-explore-return-form
  button.roa-explore-secondary-action {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-result-lifecycle {
    transition: none;
  }
}


/*
 * UI-MISSION-001D
 * Cooldown Enforcement and Reliable Result Dismissal
 *
 * Attribute-scoped Map controls intentionally neutralize the shared
 * purple button frame before applying the locked obsidian-gold skin.
 */

body.map-page
button[type="submit"].roa-explore-secondary-action[data-explore-return] {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  min-width: 150px !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  border:
    1px solid rgba(207, 167, 85, 0.66) !important;
  border-radius: 9px !important;
  border-image: none !important;
  background:
    linear-gradient(
      180deg,
      #332719,
      #12100e
    ) !important;
  background-color: #17130f !important;
  background-image:
    linear-gradient(
      180deg,
      #332719,
      #12100e
    ) !important;
  color: #e3d1a5 !important;
  font-family: var(--roa-title-font) !important;
  font-size: 0.73rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.045em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  filter: none !important;
  clip-path: none !important;
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  box-shadow:
    inset 0 1px rgba(255, 235, 177, 0.07),
    0 5px 14px rgba(0, 0, 0, 0.3) !important;
  transform: none !important;
}

body.map-page
button[type="submit"].roa-explore-secondary-action[data-explore-return]:hover {
  border-color: #e4ba63 !important;
  background:
    linear-gradient(
      180deg,
      #49351d,
      #1c1510
    ) !important;
  background-color: #251a11 !important;
  background-image:
    linear-gradient(
      180deg,
      #49351d,
      #1c1510
    ) !important;
  color: #fff0bd !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

body.map-page
button[type="submit"].roa-explore-secondary-action[data-explore-return]::before,
body.map-page
button[type="submit"].roa-explore-secondary-action[data-explore-return]::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.map-page
button[type="button"].mission-result-dismiss[data-mission-result-dismiss] {
  all: unset !important;
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 12 !important;
  top: 10px !important;
  right: 10px !important;
  display: grid !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  border:
    1px solid rgba(218, 177, 88, 0.72) !important;
  border-radius: 8px !important;
  border-image: none !important;
  background:
    linear-gradient(
      180deg,
      #3d2b17,
      #17100c
    ) !important;
  background-color: #22170f !important;
  background-image:
    linear-gradient(
      180deg,
      #3d2b17,
      #17100c
    ) !important;
  color: #f1d57f !important;
  font-family: Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
  filter: none !important;
  clip-path: none !important;
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  box-shadow:
    inset 0 1px rgba(255, 238, 185, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.34) !important;
  transform: none !important;
}

body.map-page
button[type="button"].mission-result-dismiss[data-mission-result-dismiss]:hover,
body.map-page
button[type="button"].mission-result-dismiss[data-mission-result-dismiss]:focus-visible {
  border-color: #efc96f !important;
  background:
    linear-gradient(
      180deg,
      #59401f,
      #21160e
    ) !important;
  background-color: #2b1d11 !important;
  background-image:
    linear-gradient(
      180deg,
      #59401f,
      #21160e
    ) !important;
  color: #fff0b6 !important;
  outline: 2px solid rgba(239, 201, 111, 0.36) !important;
  outline-offset: 2px !important;
  filter: none !important;
}

body.map-page
button[type="button"].mission-result-dismiss[data-mission-result-dismiss]::before,
body.map-page
button[type="button"].mission-result-dismiss[data-mission-result-dismiss]::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.map-page
button.mission-launch-button[data-explore-map-cooldown="true"],
body.map-page
button.roa-explore-primary-action[data-explore-preflight-cooldown="true"] {
  all: unset !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  min-width: 178px !important;
  min-height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 18px !important;
  cursor: not-allowed !important;
  border:
    1px solid rgba(139, 112, 67, 0.46) !important;
  border-radius: 9px !important;
  border-image: none !important;
  background:
    linear-gradient(
      180deg,
      #2b2720,
      #11100f
    ) !important;
  background-color: #171513 !important;
  background-image:
    linear-gradient(
      180deg,
      #2b2720,
      #11100f
    ) !important;
  color: #a99a7d !important;
  font-family: var(--roa-title-font) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  opacity: 0.68 !important;
  filter: grayscale(0.45) !important;
  clip-path: none !important;
  mask: none !important;
  mask-image: none !important;
  -webkit-mask: none !important;
  -webkit-mask-image: none !important;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 4px 12px rgba(0, 0, 0, 0.24) !important;
  transform: none !important;
}

body.map-page
button.mission-launch-button[data-explore-map-cooldown="true"]::before,
body.map-page
button.mission-launch-button[data-explore-map-cooldown="true"]::after,
body.map-page
button.roa-explore-primary-action[data-explore-preflight-cooldown="true"]::before,
body.map-page
button.roa-explore-primary-action[data-explore-preflight-cooldown="true"]::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.map-page .mission-launch-cooldown {
  display: block;
  margin-top: 7px;
  color: #c8a96a;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.35;
  text-align: center;
}

@keyframes roaMapResultAutoDismiss {
  0%,
  96% {
    max-height: 2400px;
    margin-top: 0;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    visibility: visible;
    opacity: 1;
  }

  99% {
    max-height: 2400px;
    visibility: visible;
    opacity: 0;
  }

  100% {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
}

body.map-page
[data-mission-result-card][data-dismiss-after-ms="15000"] {
  animation:
    roaMapResultAutoDismiss
    15.3s
    linear
    forwards !important;
}

body.map-page
[data-mission-result-card].is-dismissing {
  animation: none !important;
}

body.map-page
.mission-result-banner.mission-result-lifecycle.is-dismissing {
  transform:
    translateX(-50%)
    translateY(-8px) !important;
}

@media (max-width: 720px) {
  body.map-page
  button[type="submit"].roa-explore-secondary-action[data-explore-return],
  body.map-page
  button.roa-explore-primary-action[data-explore-preflight-cooldown="true"] {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.map-page
  [data-mission-result-card][data-dismiss-after-ms="15000"] {
    animation-timing-function: steps(1, end) !important;
  }
}


/* UI-MISSION-001 compact map cooldown lock */
body.loadout-page
  .region-card
  button.mission-launch-button[data-explore-map-cooldown="true"] {
  min-height: 38px !important;
  padding: 7px 11px !important;
  color: #a99e89 !important;
  font-family: var(--roa-title-font) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  border: 9px solid transparent !important;
  border-image: var(--roa-frame-button-plain) 55 fill / 9px / 0 stretch !important;
  border-radius: 0 !important;
  background: linear-gradient(145deg, rgba(24,20,25,.96), rgba(8,7,10,.99)) !important;
  box-shadow: inset 0 0 12px rgba(96,74,101,.1) !important;
  text-shadow: none !important;
  transform: none !important;
  opacity: .76 !important;
}

body.loadout-page
  .region-card
  .mission-launch-cooldown[data-explore-map-cooldown-label] {
  display: block !important;
  margin-top: 6px !important;
  color: #d6bd7e !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: center !important;
}