/* ==========================================================================
   Realms of Arkovia Fantasy UI System
   Shared shell, asset-pack frames, responsive workspaces, and page layouts.
   Loaded after the legacy stylesheet so the application logic can remain intact.
   ========================================================================== */

:root {
  --roa-ink: #050506;
  --roa-ink-2: #0b090d;
  --roa-surface: rgba(12, 10, 14, 0.96);
  --roa-surface-soft: rgba(20, 15, 24, 0.92);
  --roa-surface-deep: rgba(4, 4, 6, 0.96);
  --roa-gold: #d8b86b;
  --roa-gold-bright: #f2d58a;
  --roa-bronze: #80613a;
  --roa-purple: #9a35d5;
  --roa-purple-bright: #d273ff;
  --roa-purple-deep: #3e145a;
  --roa-green: #7ebc72;
  --roa-red: #d25f57;
  --roa-blue: #59a6d4;
  --roa-text: #e9e2d4;
  --roa-muted: #a59a88;
  --roa-line: rgba(216, 184, 107, 0.28);
  --roa-header-h: 96px;
  --roa-dock-h: 82px;
  --roa-frame-panel: url('/roa-ui/frames/panel-wide.png');
  --roa-frame-button: url('/roa-ui/frames/button-wide.png');
  --roa-frame-button-plain: url('/roa-ui/frames/button-plain.png');
  --roa-frame-button-active: url('/roa-ui/frames/button-active.png');
  --roa-frame-divider: url('/roa-ui/frames/divider-wide.png');
  --roa-title-font: "Cinzel", "Trajan Pro", Georgia, serif;
  --roa-body-font: Inter, "Segoe UI", Arial, sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
}

body.galaxy-bg,
body.loadout-page.galaxy-bg {
  margin: 0;
  overflow: hidden;
  color: var(--roa-text);
  font-family: var(--roa-body-font);
  background:
    linear-gradient(180deg, rgba(2, 2, 4, 0.72), rgba(3, 2, 5, 0.94)),
    url('/roa-ui/backgrounds/realm-vista.webp') center / cover fixed no-repeat;
}

body.galaxy-bg::before,
body.loadout-page.galaxy-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    radial-gradient(circle at 52% -12%, rgba(157, 54, 208, 0.22), transparent 42%),
    radial-gradient(circle at 18% 90%, rgba(88, 36, 120, 0.18), transparent 35%),
    linear-gradient(90deg, rgba(0,0,0,.52), transparent 20%, transparent 80%, rgba(0,0,0,.52));
  mask-image: none;
}

body.galaxy-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.94);
}

.container,
.container.narrow,
.marketplace-page-container,
.crafting-container,
.roa-old-loadout-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: calc(var(--roa-header-h) + 14px) 18px calc(var(--roa-dock-h) + 16px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--roa-purple) rgba(0,0,0,.45);
  scrollbar-width: thin;
}

/* Defeat legacy page-specific max-width rules so the game shell uses the full viewport. */
body.galaxy-bg main.container,
body.galaxy-bg main.container.narrow {
  width: 100%;
  max-width: none;
  margin: 0;
}

.map-page .container {
  overflow: hidden;
  padding: calc(var(--roa-header-h) + 10px) 12px calc(var(--roa-dock-h) + 10px);
}

.container::-webkit-scrollbar,
.roa-scroll::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.region-grid::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.container::-webkit-scrollbar-thumb,
.roa-scroll::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.region-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--roa-purple-deep), var(--roa-purple));
  border: 1px solid rgba(216,184,107,.35);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Persistent shell
   -------------------------------------------------------------------------- */

.roa-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(600px, 1fr) minmax(430px, 470px);
  align-items: stretch;
  height: var(--roa-header-h);
  padding: 6px 12px;
  border-bottom: 1px solid rgba(216, 184, 107, 0.35);
  background:
    linear-gradient(180deg, rgba(10, 9, 11, .99), rgba(4, 4, 5, .98)),
    url('/roa-ui/backgrounds/arcane-hall.webp') center 44% / cover no-repeat;
  box-shadow: 0 12px 35px rgba(0,0,0,.82), inset 0 -2px 0 rgba(117,45,152,.28);
}

.roa-topbar::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -17px;
  height: 38px;
  pointer-events: none;
  background: var(--roa-frame-divider) center / 100% 100% no-repeat;
  opacity: .92;
}

.roa-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 4px 18px 4px 6px;
  color: var(--roa-gold-bright);
  text-decoration: none;
  border-right: 1px solid rgba(216,184,107,.24);
}

.roa-brand-emblem {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  filter: drop-shadow(0 0 12px rgba(176, 51, 230, .74));
}

.roa-brand-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.roa-brand-copy {
  display: grid;
  line-height: .9;
  font-family: var(--roa-title-font);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-shadow: 0 2px 3px #000, 0 0 12px rgba(216,184,107,.2);
}

.roa-brand-copy small {
  color: #b9a472;
  font-size: clamp(.7rem, .85vw, .94rem);
  letter-spacing: .32em;
}

.roa-brand-copy strong {
  font-size: clamp(1.55rem, 2.05vw, 2.45rem);
  font-weight: 500;
}

.roa-primary-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  overflow: visible;
}

.roa-nav-item {
  position: relative;
  display: flex;
  flex: 1 1 80px;
  min-width: 72px;
  max-width: 126px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 7px 8px;
  color: #d7c292;
  text-decoration: none;
  font-family: var(--roa-title-font);
  font-size: .73rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  border-left: 1px solid rgba(216,184,107,.12);
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.roa-nav-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: saturate(.55) brightness(.92) sepia(.25);
  transition: filter .18s ease, transform .18s ease;
}

.roa-nav-item:hover,
.roa-nav-item.is-active,
.roa-nav-group.is-active > .roa-nav-item {
  color: var(--roa-gold-bright);
  background: radial-gradient(circle at center 35%, rgba(139,42,184,.38), transparent 68%);
}

.roa-nav-item:hover img,
.roa-nav-item.is-active img,
.roa-nav-group.is-active > .roa-nav-item img {
  filter: saturate(1.2) brightness(1.2) drop-shadow(0 0 8px rgba(190,65,244,.75));
  transform: translateY(-1px);
}

.roa-nav-item.is-active::after,
.roa-nav-group.is-active > .roa-nav-item::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--roa-purple-bright), transparent);
  box-shadow: 0 0 10px var(--roa-purple);
}

.roa-nav-group {
  position: relative;
  display: flex;
  flex: 1 1 80px;
  max-width: 126px;
}

.roa-nav-group > .roa-nav-item {
  width: 100%;
  max-width: none;
}

.roa-nav-menu {
  position: absolute;
  top: calc(100% - 5px);
  left: 50%;
  z-index: 40;
  display: none;
  width: 190px;
  padding: 14px;
  transform: translateX(-50%);
  border: 18px solid transparent;
  border-image: var(--roa-frame-panel) 55 fill / 18px / 0 stretch;
  background: rgba(5,4,7,.98);
  box-shadow: 0 20px 34px rgba(0,0,0,.7);
}

.roa-nav-group:hover .roa-nav-menu,
.roa-nav-group:focus-within .roa-nav-menu {
  display: grid;
}

.roa-nav-menu a {
  padding: 9px 10px;
  color: var(--roa-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,184,107,.14);
}

.roa-nav-menu a:hover { color: var(--roa-gold-bright); }

.roa-player-hud {
  display: grid;
  grid-template-columns: minmax(138px, 1fr) minmax(118px, max-content) minmax(68px, max-content) 44px;
  align-items: center;
  justify-content: stretch;
  min-width: 0;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(216,184,107,.24);
}

.roa-player-identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  margin-right: 0;
  overflow: hidden;
}

.roa-player-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--roa-gold);
  box-shadow: 0 0 0 3px rgba(93,30,125,.72), 0 0 17px rgba(155,51,205,.65);
}

.roa-avatar-fallback { display: grid; place-items: center; background: #1d1026; }

.roa-player-copy {
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.roa-player-copy strong {
  overflow: hidden;
  color: var(--roa-gold-bright);
  font-family: var(--roa-title-font);
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roa-player-copy small {
  max-width: 135px;
  overflow: hidden;
  color: var(--roa-muted);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roa-hud-resource {
  display: grid;
  grid-template-columns: 28px max-content;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 7px;
  overflow: hidden;
  border-left: 1px solid rgba(216,184,107,.13);
}

.roa-hud-resource--nkfe { min-width: 118px; }
.roa-hud-resource--keys { min-width: 68px; }

.roa-hud-resource img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.roa-hud-resource span { display: grid; min-width: 0; }
.roa-hud-resource strong { display: block; color: #eee6d8; font-size: .75rem; line-height: 1.05; white-space: nowrap; }
.roa-hud-resource small { display: block; color: var(--roa-muted); font-size: .52rem; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }

.roa-icon-button,
.roa-account-trigger {
  display: grid;
  place-items: center;
  width: 42px !important;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0 !important;
  color: var(--roa-gold-bright);
  appearance: none;
  border: 1px solid rgba(216,184,107,.45) !important;
  border-image: none !important;
  border-radius: 4px !important;
  background: radial-gradient(circle, rgba(85,30,105,.44), rgba(7,6,9,.96)) !important;
  box-shadow: inset 0 0 12px rgba(120,48,155,.24), 0 0 5px rgba(0,0,0,.75) !important;
  overflow: hidden;
}

.roa-account-trigger > img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(167,59,215,.5));
}

.roa-account-menu { position: relative; }
.roa-account-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 50;
  display: none;
  width: 245px;
  gap: 6px;
  padding: 20px;
  border: 18px solid transparent;
  border-image: var(--roa-frame-panel) 55 fill / 18px / 0 stretch;
  background: rgba(5,4,7,.98);
}
.roa-account-menu:hover .roa-account-dropdown,
.roa-account-menu:focus-within .roa-account-dropdown { display: grid; }
.roa-account-dropdown strong { color: var(--roa-gold-bright); }
.roa-account-dropdown span { color: var(--roa-muted); font-size: .75rem; overflow-wrap: anywhere; }
.roa-account-dropdown a,
.roa-menu-action { color: var(--roa-text); text-decoration: none; background: none !important; box-shadow: none !important; border: 0 !important; padding: 7px 0 !important; min-height: 0 !important; justify-content: flex-start !important; }
.roa-account-dropdown a:hover,
.roa-menu-action:hover { color: var(--roa-gold-bright); transform: none; }
.roa-account-dropdown form { margin: 0; max-width: none; }

.roa-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px 25px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  border: 15px solid transparent;
  border-image: var(--roa-frame-button-active) 38 88 fill / 15px 28px / 0 stretch;
  text-shadow: 0 1px 3px #000;
}

.roa-bottom-dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 990;
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(240px, 1.35fr);
  align-items: stretch;
  height: var(--roa-dock-h);
  padding: 8px 14px 6px;
  border-top: 1px solid rgba(216,184,107,.35);
  background: linear-gradient(180deg, rgba(8,7,9,.98), rgba(2,2,3,.995));
  box-shadow: 0 -12px 30px rgba(0,0,0,.72), inset 0 2px 0 rgba(113,42,150,.2);
}

.roa-bottom-dock > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 12px;
  color: #cdbb91;
  text-decoration: none;
  border-left: 1px solid rgba(216,184,107,.13);
  transition: color .18s ease, background .18s ease;
}

.roa-bottom-dock > a:hover {
  color: var(--roa-gold-bright);
  background: radial-gradient(circle, rgba(122,42,161,.22), transparent 70%);
}

.roa-bottom-dock img { width: 40px; height: 40px; object-fit: contain; }
.roa-bottom-dock span { display: grid; min-width: 0; }
.roa-bottom-dock strong { font-family: var(--roa-title-font); font-size: .84rem; text-transform: uppercase; }
.roa-bottom-dock small { color: var(--roa-muted); font-size: .64rem; }
.roa-world-progress i {
  display: block;
  width: 100%;
  height: 6px;
  margin-top: 5px;
  border: 1px solid rgba(216,184,107,.35);
  background: linear-gradient(90deg, var(--roa-purple) 42%, rgba(255,255,255,.06) 42%);
  box-shadow: 0 0 8px rgba(150,43,202,.4);
}

/* --------------------------------------------------------------------------
   Shared typography, panels, controls, status, tables
   -------------------------------------------------------------------------- */

h1, h2, h3, h4,
.roa-title,
.section-heading h2 {
  font-family: var(--roa-title-font);
  color: var(--roa-gold-bright);
  text-shadow: 0 2px 3px rgba(0,0,0,.9);
}

h1 { font-size: clamp(1.7rem, 2.2vw, 2.65rem); }
h2 { font-size: clamp(1.12rem, 1.25vw, 1.45rem); }
h3 { font-size: clamp(.94rem, 1.05vw, 1.15rem); }

p, li, td, th, label, input, select, button, .button { font-size: .84rem; }

.eyebrow {
  color: #b59b60;
  font-family: var(--roa-title-font);
  font-size: .65rem;
  letter-spacing: .18em;
}

.muted { color: var(--roa-muted) !important; }

.hero,
.hero-market,
.map-hero,
.loadout-hero,
.crafting-hero,
.market-intel-hero,
.leaderboard-hero,
.season-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  margin: 0 0 12px;
  padding: 10px 24px 10px 30px;
  border: 16px solid transparent;
  border-image: url('/roa-ui/frames/button-plain.png') 35 86 fill / 16px 34px / 0 stretch;
  border-radius: 0;
  background: rgba(7,6,8,.82);
  box-shadow: 0 12px 30px rgba(0,0,0,.42);
}

.hero::before,
.market-intel-hero::before,
.leaderboard-hero::before,
.season-hero::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: url('/roa-ui/icons/gem.png') center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(165,54,220,.7));
}

.hero > .eyebrow,
.hero > p:not(.eyebrow):not(.muted),
.hero > .muted,
.hero .auth-cta-copy { display: none; }
.hero h1 { margin: 0; }
.hero .hero-login { margin-left: auto; }

.panel,
.market-intel-section,
.crafting-section,
.profile-hero-shell,
.hall-of-legends-section {
  position: relative;
  margin: 0 0 12px;
  padding: 18px 20px;
  color: var(--roa-text);
  border: 20px solid transparent;
  border-image: var(--roa-frame-panel) 58 fill / 20px / 0 stretch;
  border-radius: 0;
  background: rgba(7,6,8,.88);
  box-shadow: 0 13px 28px rgba(0,0,0,.45), inset 0 0 28px rgba(57,20,74,.16);
}

.section-heading {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(216,184,107,.18);
}
.section-heading h2 { margin: 0; }
.section-heading .eyebrow { margin-bottom: 4px; }

.button,
button:not(.roa-icon-button):not(.account-trigger):not(.link-button):not(.roa-realm-button):not(.map-hotspot),
input[type="submit"] {
  position: relative;
  min-height: 42px;
  padding: 7px 18px;
  color: var(--roa-gold-bright);
  font-family: var(--roa-title-font);
  font-weight: 700;
  letter-spacing: .035em;
  text-decoration: none;
  text-shadow: 0 1px 3px #000;
  border: 14px solid transparent;
  border-image: var(--roa-frame-button-active) 39 88 fill / 14px 26px / 0 stretch;
  border-radius: 0;
  background: rgba(62,20,82,.72);
  box-shadow: 0 5px 13px rgba(0,0,0,.42), 0 0 12px rgba(149,48,196,.16);
  transition: filter .16s ease, transform .16s ease;
}

.button.secondary,
.button.gold-outline,
button.secondary,
button.gold-outline,
.button-secondary {
  color: #d8c69e;
  border-image-source: var(--roa-frame-button);
  background: rgba(9,8,10,.86);
}

.button:hover,
button:not(:disabled):hover {
  color: #fff4ca;
  transform: translateY(-1px);
  filter: brightness(1.15) drop-shadow(0 0 8px rgba(174,58,225,.4));
}

button:disabled,
.button[aria-disabled="true"] { opacity: .42; cursor: not-allowed; filter: grayscale(.6); }

input,
select,
textarea {
  min-height: 39px;
  padding: 8px 10px;
  color: var(--roa-text);
  border: 1px solid rgba(216,184,107,.34);
  border-radius: 2px;
  background: rgba(2,2,4,.88);
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}

input:focus,
select:focus,
textarea:focus {
  outline: 1px solid var(--roa-purple-bright);
  box-shadow: 0 0 0 2px rgba(146,47,193,.18), inset 0 0 12px rgba(0,0,0,.7);
}

.alert,
.warning {
  position: relative;
  z-index: 50;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 2px;
  backdrop-filter: blur(8px);
}

.alert-success { background: rgba(43,88,52,.85); border: 1px solid rgba(126,188,114,.55); color: #d9f2d3; }
.alert-error { background: rgba(100,35,35,.86); border: 1px solid rgba(210,95,87,.58); color: #ffd7d2; }
.warning { background: rgba(88,64,25,.78); border: 1px solid rgba(216,184,107,.46); color: #f0d79c; }

.stats-grid,
.season-stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.stat-card,
.portfolio-card,
.season-stat-card,
.mission-status-card {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(216,184,107,.25);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(14,11,16,.95), rgba(4,4,6,.95));
  box-shadow: inset 0 0 15px rgba(74,24,97,.16);
}

.stat-card span,
.portfolio-card span,
.season-stat-card span,
.mission-status-card span {
  color: var(--roa-muted);
  font-size: .61rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stat-card strong,
.portfolio-card strong,
.season-stat-card strong,
.mission-status-card strong {
  display: block;
  margin-top: 3px;
  color: var(--roa-gold-bright);
  font-size: .94rem;
}

.status-pill,
.side,
.activity-pill,
.movement-label,
.readiness-badge,
.tier-badge,
.category-badge,
.market-state-badge {
  border-radius: 2px;
  border: 1px solid currentColor;
  background: rgba(0,0,0,.36);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.table-wrap {
  max-height: min(52vh, 560px);
  overflow: auto;
  border: 1px solid rgba(216,184,107,.22);
  background: rgba(2,2,4,.7);
}

table { min-width: 760px; background: transparent; }
th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--roa-gold-bright);
  background: rgba(9,7,11,.98);
  border-bottom: 1px solid rgba(216,184,107,.35);
}
td { color: #ddd5c7; }
tr:hover td { background: rgba(101,32,131,.12); }
th, td { padding: 9px 10px; border-bottom-color: rgba(216,184,107,.12); }

.empty-state {
  padding: 18px;
  color: var(--roa-muted);
  border: 1px dashed rgba(216,184,107,.24);
  background: rgba(0,0,0,.28);
}

.back-link { color: var(--roa-gold); }

/* --------------------------------------------------------------------------
   World Map command center
   -------------------------------------------------------------------------- */

.map-page .map-hero { display: none; }
.map-page .alert { position: fixed; top: calc(var(--roa-header-h) + 12px); left: 50%; z-index: 1200; width: min(680px, 90vw); transform: translateX(-50%); }

.roa-map-command-center {
  display: grid;
  grid-template-columns: minmax(210px, 16.5vw) minmax(0, 1fr) minmax(270px, 20vw);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
}

.roa-realm-navigator,
.roa-map-context {
  min-height: 0;
  padding: 16px;
  border: 18px solid transparent;
  border-image: var(--roa-frame-panel) 58 fill / 18px / 0 stretch;
  background: rgba(5,4,7,.94);
  overflow: hidden;
}

.roa-realm-navigator {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.roa-realm-navigator h2,
.roa-map-context h2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roa-realm-list {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
}

.roa-realm-button {
  appearance: none;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  min-height: 56px;
  gap: 8px;
  padding: 2px 9px 2px 6px;
  color: #d8c9a8;
  text-align: left;
  border: 12px solid transparent !important;
  border-image: var(--roa-frame-button-plain) 32 58 fill / 12px 20px / 0 stretch !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none;
  cursor: pointer;
}

.roa-realm-button:hover,
.roa-realm-button:focus-visible,
.roa-realm-button.is-active {
  color: #fff0c5;
  border-image-source: var(--roa-frame-button-active) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: brightness(1.08) drop-shadow(0 0 7px rgba(185,69,232,.46));
  transform: none;
}

.roa-realm-button:focus-visible {
  outline: 1px solid var(--roa-purple-bright);
  outline-offset: -4px;
}

.roa-realm-marker {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
}

.roa-realm-marker > img {
  width: 29px;
  height: 29px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(173,62,222,.62));
}

.roa-realm-number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--roa-gold-bright);
  font-family: var(--roa-title-font);
  font-size: .78rem;
  border-radius: 50%;
  border: 1px solid rgba(216,184,107,.65);
  background: radial-gradient(circle, #28122f 0%, #080609 72%);
  box-shadow: inset 0 0 8px rgba(159,56,203,.28), 0 0 5px rgba(0,0,0,.85);
}

.roa-realm-label { display: grid; min-width: 0; gap: 1px; }
.roa-realm-label strong { color: inherit; font-family: var(--roa-title-font); font-size: .7rem; line-height: 1.08; white-space: normal; }
.roa-realm-label small { color: var(--roa-muted); font-size: .54rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.roa-realm-status-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: .82;
  filter: drop-shadow(0 0 4px rgba(162,57,210,.54));
}

.roa-realm-summary {
  display: grid;
  grid-template-columns: minmax(88px, .75fr) minmax(0, 1.25fr);
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(216,184,107,.16);
}

.roa-realm-summary > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(216,184,107,.13);
  background: rgba(0,0,0,.26);
}

.roa-realm-summary small {
  color: var(--roa-muted);
  font-size: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roa-realm-summary strong {
  overflow: hidden;
  color: var(--roa-gold-bright);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roa-map-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 62px;
  min-width: 0;
  min-height: 0;
  gap: 8px;
}

.map-page .world-map-panel {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 5px;
  border: 12px solid transparent;
  border-image: var(--roa-frame-panel) 58 fill / 12px / 0 stretch;
  overflow: hidden;
  background: #050506;
}

.map-page .world-map-panel > .section-heading { display: none; }

.roa-map-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #020203;
}

.roa-world-map-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.map-page .map-hotspot {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);

  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: transparent !important;
  filter: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  outline: 0 !important;
  overflow: visible !important;
  text-indent: -9999px;
  text-shadow: none !important;
  display: block !important;
  transform: none !important;
  cursor: pointer;
}

/*
 * Each destination owns an explicit marker anchor and size.
 * These values affect only the visible selection marker.
 * The approved click-target coordinates remain unchanged.
 */
.map-hotspot.arcane {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.verdant {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.destruction {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.dragonbone {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.obsidian {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.archive {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.catacomb {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.ancient {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(30px, 2.7vw, 44px);
}

.map-hotspot.wilds {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(36px, 3.2vw, 52px);
}

.map-hotspot.dungeon {
  --roa-selection-x: 50%;
  --roa-selection-y: 50%;
  --roa-selection-size: clamp(28px, 2.5vw, 42px);
}

.map-page .map-hotspot:hover,
.map-page .map-hotspot:focus-visible,
.map-page .map-hotspot.active,
.map-page .map-hotspot.is-active {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-image: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  outline: none !important;
  transform: none !important;
}

/*
 * Legacy/global button decoration must never paint the large hit rectangle.
 * The ::after pseudo-element below is the only visible Map selection effect.
 */
.map-hotspot::before,
.map-hotspot:hover::before,
.map-hotspot:focus-visible::before,
.map-hotspot.active::before,
.map-hotspot.is-active::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.map-hotspot::after {
  content: "";
  position: absolute;
  inset: auto !important;
  left: var(--roa-selection-x);
  top: var(--roa-selection-y);
  width: var(--roa-selection-size);
  height: var(--roa-selection-size);
  transform: translate(-50%, -50%) scale(0.88);
  border: 1px solid rgba(221, 141, 255, 0.82);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(184, 77, 229, 0.16) 0 35%,
      rgba(128, 40, 171, 0.08) 52%,
      transparent 72%
    );
  box-shadow:
    0 0 0 1px rgba(216, 184, 107, 0.32),
    0 0 10px rgba(187, 63, 239, 0.78),
    inset 0 0 9px rgba(203, 112, 241, 0.24);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.map-hotspot:hover::after,
.map-hotspot:focus-visible::after,
.map-hotspot.is-active::after,
.map-hotspot.active::after {
  inset: auto !important;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.map-page .mission-status-panel.roa-map-status-strip {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.map-page .roa-map-status-strip > .section-heading { display: none; }
.map-page .mission-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  gap: 7px;
}
.map-page .mission-status-card { min-height: 0; padding: 7px 10px; overflow: hidden; }
.map-page .mission-status-card strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.map-page .mission-status-card.ready { border-color: rgba(126,188,114,.35); }
.map-page .mission-status-card.cooldown { border-color: rgba(216,184,107,.32); }

.roa-map-context {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.map-page .region-grid {
  display: block;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
}

.map-page .region-empty-state { margin-top: 14px; }
.map-page .region-card {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.map-page .region-card-header { display: grid; gap: 7px; }
.map-page .region-card-header h2 { font-size: 1.18rem; margin-bottom: 4px; }
.map-page .region-description { color: #c9c0b2; line-height: 1.46; font-size: .76rem; }
.map-page .region-meta-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.map-page .region-meta-grid span { padding: 7px; border: 1px solid rgba(216,184,107,.16); background: rgba(0,0,0,.25); font-size: .65rem; }
.map-page .region-meta-grid strong { display: block; color: var(--roa-muted); font-size: .52rem; text-transform: uppercase; }
.map-page .region-cooldown-list { display: grid; gap: 5px; margin: 8px 0; }
.map-page .region-cooldown { padding: 7px; font-size: .65rem; }
.map-page .command-tag-list,
.map-page .command-hint-list,
.map-page .btn-discord { display: none; }
.map-page .map-special-dungeon-section,
.map-page .map-story-dungeon-section,
.map-page .region-detail-columns,
.map-page .region-card > .mission-status-panel {
  margin-top: 9px;
  padding: 10px;
  border: 1px solid rgba(216,184,107,.18);
  background: rgba(0,0,0,.24);
}
.map-page .map-special-dungeon-section .section-heading { display: none; }
.map-page .mission-action-forms { display: grid; gap: 6px; }
.map-page .mission-action-forms form { max-width: none; }
.map-page .mission-launch-button { width: 100%; }
.map-page .map-story-dungeon-section { display: grid; gap: 8px; }
.map-page .map-story-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.map-page .region-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.map-page .region-detail-columns h3 { font-size: .75rem; }
.map-page .region-detail-columns ul { margin: 0; padding-left: 16px; font-size: .65rem; }

.map-page .map-stat-grid,
.map-page .map-saga-progress-panel,
.map-page .recent-missions-panel { display: none; }

.map-page .encounter-showcase-panel {
  position: fixed;
  inset: calc(var(--roa-header-h) + 26px) max(20px, 16vw) calc(var(--roa-dock-h) + 22px);
  z-index: 1250;
  margin: 0;
  overflow-y: auto;
  background: rgba(5,4,7,.98);
  box-shadow: 0 30px 90px rgba(0,0,0,.9);
}

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

.marketplace-page-container {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
}
.marketplace-page-container .hero { margin: 0; }
.marketplace-page-container > .stats-grid { margin: 0; }

.roa-market-workbench {
  display: grid;
  grid-template-columns: minmax(185px, 14vw) minmax(0, 1fr) minmax(260px, 21vw);
  min-height: 520px;
  height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 164px);
  gap: 10px;
}

.roa-market-sidebar,
.roa-market-catalog,
.roa-trade-desk {
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.roa-market-sidebar { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; }
.roa-market-filter-list { display: grid; gap: 6px; }
.roa-market-filter-list button { width: 100%; min-height: 38px; }
.roa-market-mini-stats { display: grid; gap: 6px; overflow-y: auto; }
.roa-market-mini-stats span { display: flex; justify-content: space-between; gap: 8px; padding: 8px; border-bottom: 1px solid rgba(216,184,107,.13); font-size: .7rem; }

.roa-market-catalog { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.roa-material-scroll { min-height: 0; overflow-y: auto; padding-right: 4px; }
.marketplace-material-grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.marketplace-material-card {
  gap: 7px;
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(216,184,107,.22);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(18,13,21,.96), rgba(4,4,6,.96));
  cursor: pointer;
}
.marketplace-material-card:hover,
.marketplace-material-card.is-selected { border-color: rgba(194,88,238,.7); box-shadow: inset 0 0 20px rgba(122,37,159,.22), 0 0 10px rgba(151,45,199,.18); }
.marketplace-card-title { gap: 8px; }
.marketplace-card-title h3 { font-size: .83rem; }
.marketplace-material-card .resource-icon { width: 36px; height: 36px; font-size: 1.15rem; border-radius: 2px; }
.marketplace-price-block .price { font-size: .94rem; }
.marketplace-used-for,
.marketplace-activity-row,
.marketplace-summary-list span:nth-child(n+4),
.marketplace-card-actions { display: none !important; }
.marketplace-summary-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 4px; }
.marketplace-summary-list span { padding: 5px; font-size: .56rem; }
.marketplace-owned-row { font-size: .65rem; }

.roa-trade-desk { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; }
.roa-trade-selected-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto; font-size: 2rem; border: 1px solid rgba(216,184,107,.28); background: rgba(0,0,0,.35); }
.roa-trade-desk h2 { text-align: center; margin: 0; }
.roa-trade-price { text-align: center; color: var(--roa-gold-bright); font-size: 1.15rem; font-weight: 800; }
.roa-trade-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.roa-trade-metrics span { padding: 7px; text-align: center; border: 1px solid rgba(216,184,107,.15); font-size: .65rem; }
.roa-trade-actions { display: grid; gap: 6px; align-content: end; }
.roa-trade-actions .button { width: 100%; }

.roa-market-activity-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 120px; overflow: hidden; }
.roa-market-activity-strip .panel { margin: 0; padding: 10px; overflow-y: auto; }
.roa-market-activity-strip .section-heading { margin-bottom: 5px; padding-bottom: 4px; }
.roa-market-activity-strip .activity-item,
.roa-market-activity-strip .transaction-row { padding: 5px; font-size: .62rem; }

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

.crafting-container {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr);
  gap: 8px;
}
.crafting-container .crafting-hero { margin: 0; }
.roa-crafting-workbench {
  display: grid;
  grid-template-columns: minmax(190px, 15vw) minmax(0, 1fr) minmax(300px, 24vw);
  min-height: 0;
  height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 105px);
  gap: 10px;
}
.roa-crafting-sidebar,
.roa-recipe-catalog,
.roa-recipe-detail { min-height: 0; margin: 0; overflow: hidden; }
.roa-crafting-sidebar { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 8px; }
.roa-crafting-tabs { display: grid; gap: 6px; }
.roa-crafting-tabs button { width: 100%; }
.crafting-owned-grid { display: grid; grid-template-columns: 1fr; gap: 4px; min-height: 0; overflow-y: auto; }
.crafting-owned-grid span { display: flex; justify-content: space-between; padding: 6px 8px; font-size: .63rem; border-bottom: 1px solid rgba(216,184,107,.12); }
.roa-recipe-catalog { display: grid; grid-template-rows: auto minmax(0,1fr); }
.roa-recipe-scroll { min-height: 0; overflow-y: auto; padding-right: 4px; }
.recipe-grid { grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 8px; }
.recipe-card { display: grid; grid-template-columns: 52px 1fr; gap: 9px; padding: 11px; min-height: 130px; border-radius: 2px; background: linear-gradient(180deg, rgba(18,13,21,.96), rgba(4,4,6,.96)); cursor: pointer; }
.recipe-card:hover,
.recipe-card.is-selected { border-color: rgba(194,88,238,.7); box-shadow: inset 0 0 20px rgba(122,37,159,.22); }
.recipe-card .recipe-icon { width: 52px; height: 62px; }
.recipe-card .recipe-body h2 { font-size: .76rem; }
.recipe-card .recipe-body > p,
.recipe-card .effect-rune,
.recipe-card h3,
.recipe-card .recipe-costs,
.recipe-card form,
.recipe-card > .recipe-body > button,
.recipe-card .login-trade { display: none; }
.recipe-meta-row { gap: 4px; }
.roa-recipe-detail { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; gap: 8px; overflow-y: auto; }
.roa-recipe-detail-art { display: grid; place-items: center; height: 130px; }
.roa-recipe-detail-art img { max-width: 120px; max-height: 120px; object-fit: contain; }
.roa-recipe-costs { display: grid; gap: 5px; }
.cost-pill { padding: 7px; border-radius: 2px; font-size: .64rem; }

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

.roa-old-loadout-shell { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 8px; }
.roa-old-loadout-shell .loadout-hero { margin: 0; }
.roa-loadout-workbench {
  display: grid;
  grid-template-columns: minmax(215px, 17vw) minmax(0, 1fr) minmax(300px, 25vw);
  height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 172px);
  min-height: 520px;
  gap: 10px;
}
.roa-loadout-presets,
.roa-loadout-editor,
.roa-loadout-inventory { min-height: 0; margin: 0; overflow: hidden; }
.roa-loadout-presets { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 8px; }
.roa-loadout-preset-list { display: grid; gap: 7px; overflow-y: auto; }
.roa-loadout-preset-button { width: 100%; text-align: left; }
.roa-loadout-editor { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.roa-equipped-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-areas: ". hero ." "weapon armor helm" "shoulder familiar accessory"; gap: 9px; align-content: center; min-height: 0; }
.roa-equipped-slot { display: grid; place-items: center; min-height: 118px; padding: 9px; text-align: center; border: 1px solid rgba(216,184,107,.23); background: rgba(0,0,0,.34); }
.roa-equipped-slot[data-slot="hero"] { grid-area: hero; }
.roa-equipped-slot[data-slot="weapon"] { grid-area: weapon; }
.roa-equipped-slot[data-slot="armor"] { grid-area: armor; }
.roa-equipped-slot[data-slot="helm"] { grid-area: helm; }
.roa-equipped-slot[data-slot="shoulder"] { grid-area: shoulder; }
.roa-equipped-slot[data-slot="familiar"] { grid-area: familiar; }
.roa-equipped-slot[data-slot="accessory"] { grid-area: accessory; }
.roa-equipped-slot img { width: 62px; height: 72px; object-fit: contain; }
.roa-equipped-slot strong { font-size: .7rem; }
.roa-equipped-slot small { color: var(--roa-muted); font-size: .56rem; }
.roa-loadout-inventory { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 7px; }
.roa-slot-tabs { display: flex; gap: 4px; overflow-x: auto; }
.roa-slot-tabs button { min-width: 76px; padding-inline: 8px; }
.roa-inventory-scroll { min-height: 0; overflow-y: auto; }
.inventory-card-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 7px; }
.nft-inventory-card { padding: 8px; min-height: 0; }
.nft-inventory-card .nft-card-art { height: 100px; }
.nft-inventory-card .nft-card-body > p,
.nft-inventory-card details,
.nft-inventory-card .activity-tag-row { display: none; }
.nft-inventory-card h4 { font-size: .7rem; }
.inline-stats { grid-template-columns: repeat(3,1fr); font-size: .52rem; }

/* --------------------------------------------------------------------------
   Season, rankings, profile, account, orders, market intel
   -------------------------------------------------------------------------- */

.season-page .container,
.leaderboards-page .container,
.profile-page .container,
.market-intel-page .container,
.roa-account-page .container,
.roa-orders-page .container {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 8px;
}

.roa-season-workspace { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.75fr); grid-template-rows: minmax(0,1fr) minmax(180px,.42fr); gap: 10px; min-height: 560px; height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 95px); }
.roa-season-boss { grid-row: 1 / 3; margin: 0; overflow: auto; }
.roa-season-standing,
.roa-season-feed { margin: 0; overflow: auto; }
.season-two-column { gap: 10px; }
.season-boss-panel { min-height: 0; }

.roa-rankings-workspace { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,24vw); gap: 10px; min-height: 560px; height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 95px); }
.roa-rankings-main,
.roa-hall-sidebar { min-height: 0; margin: 0; overflow: hidden; }
.roa-ranking-tabs { display: flex; gap: 5px; overflow-x: auto; margin-bottom: 8px; }
.roa-ranking-tabs button { white-space: nowrap; }
.roa-ranking-scroll { height: calc(100% - 56px); overflow-y: auto; }
.leaderboard-section-list .leaderboard-panel { display: none; }
.leaderboard-section-list .leaderboard-panel.is-active { display: block; margin: 0; }
.hall-card-grid { grid-template-columns: 1fr; gap: 7px; }
.hall-card { min-height: 0; padding: 9px; }

.roa-profile-workspace { display: grid; grid-template-columns: minmax(250px,20vw) minmax(0,1fr) minmax(270px,22vw); gap: 10px; min-height: 560px; height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 95px); }
.roa-profile-identity,
.roa-profile-center,
.roa-profile-side { min-height: 0; margin: 0; overflow-y: auto; }
.profile-two-column,
.profile-progression-grid { display: block; }
.profile-two-column > .panel,
.profile-progression-grid > .panel { margin-bottom: 8px; }

.roa-account-workspace { display: grid; grid-template-columns: minmax(280px,23vw) minmax(0,1fr); gap: 10px; min-height: 540px; height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 95px); }
.roa-account-summary,
.roa-account-holdings { min-height: 0; margin: 0; overflow-y: auto; }
.roa-account-tabs { display: flex; gap: 5px; margin-bottom: 8px; }
.roa-account-tab-panel { display: none; }
.roa-account-tab-panel.is-active { display: block; }

.roa-orders-workspace,
.roa-intel-workspace { min-height: 540px; height: calc(100dvh - var(--roa-header-h) - var(--roa-dock-h) - 95px); }
.roa-orders-workspace { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 8px; }
.roa-orders-table { margin: 0; min-height: 0; overflow: hidden; }
.roa-orders-table .table-wrap { max-height: 100%; height: 100%; }
.roa-intel-workspace { display: grid; grid-template-columns: minmax(210px,16vw) minmax(0,1fr) minmax(280px,22vw); gap: 10px; }
.roa-intel-materials,
.roa-intel-chart,
.roa-intel-detail { min-height: 0; margin: 0; overflow-y: auto; }
.market-intel-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 7px; }
.market-intel-card { padding: 9px; }

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

@media (max-width: 1450px) {
  :root { --roa-header-h: 88px; --roa-dock-h: 74px; }
  .roa-topbar { grid-template-columns: 220px minmax(560px,1fr) 330px; }
  .roa-brand-emblem { width: 64px; height: 64px; flex-basis: 64px; }
  .roa-nav-item { min-width: 66px; font-size: .64rem; }
  .roa-nav-item img { width: 36px; height: 36px; }
  .roa-player-copy { display: none; }
  .roa-player-hud { grid-template-columns: 58px minmax(106px,max-content) minmax(62px,max-content) 42px; gap: 4px; }
  .roa-hud-resource { min-width: 0; padding-inline: 4px; }
  .roa-hud-resource--nkfe { min-width: 106px; }
  .roa-hud-resource--keys { min-width: 62px; }
  .roa-bottom-dock strong { font-size: .72rem; }
  .roa-bottom-dock small { display: none; }
}

@media (max-width: 1120px) {
  body.galaxy-bg,
  body.loadout-page.galaxy-bg { overflow: auto; }
  .container,
  .container.narrow,
  .marketplace-page-container,
  .crafting-container,
  .roa-old-loadout-shell,
  .map-page .container { height: auto; min-height: 100dvh; overflow: visible; padding: 84px 10px 82px; }
  .roa-topbar { height: 76px; grid-template-columns: 180px minmax(0,1fr) auto; }
  .roa-brand-emblem { width: 48px; height: 48px; flex-basis: 48px; }
  .roa-brand-copy strong { font-size: 1.45rem; }
  .roa-primary-nav { overflow-x: auto; justify-content: flex-start; }
  .roa-nav-item { min-width: 68px; }
  .roa-player-hud { display: flex; justify-content: flex-end; }
  .roa-player-hud .roa-hud-resource { display: none; }
  .roa-map-command-center,
  .roa-market-workbench,
  .roa-crafting-workbench,
  .roa-loadout-workbench,
  .roa-season-workspace,
  .roa-rankings-workspace,
  .roa-profile-workspace,
  .roa-account-workspace,
  .roa-intel-workspace { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; }
  .roa-map-stage { min-height: 600px; }
  .roa-realm-navigator { max-height: 300px; }
  .roa-map-context { max-height: none; }
  .roa-bottom-dock { height: 70px; grid-template-columns: repeat(5,1fr); }
  .roa-bottom-dock img { width: 30px; height: 30px; }
  .roa-bottom-dock span { display: none; }
}

@media (max-width: 680px) {
  :root { --roa-header-h: 66px; --roa-dock-h: 62px; }
  .roa-topbar { height: 66px; grid-template-columns: 60px minmax(0,1fr) auto; padding: 4px; }
  .roa-brand { padding: 0; border: 0; }
  .roa-brand-copy { display: none; }
  .roa-brand-emblem { width: 54px; height: 54px; flex-basis: 54px; }
  .roa-primary-nav { scrollbar-width: none; }
  .roa-nav-item { min-width: 58px; padding: 3px; font-size: .52rem; }
  .roa-nav-item img { width: 30px; height: 30px; }
  .roa-player-identity { display: none; }
  .roa-login-button { padding: 4px 10px; font-size: .65rem; }
  .hero { min-height: 54px; padding: 7px 12px; }
  .hero::before { width: 32px; height: 32px; flex-basis: 32px; }
  .hero h1 { font-size: 1.35rem; }
  .stats-grid,
  .season-stat-strip { grid-template-columns: repeat(2,1fr); }
  .panel { padding: 12px; border-width: 14px; }
  .roa-map-stage { min-height: 450px; }
  .map-page .mission-status-grid { grid-template-columns: repeat(2,1fr); }
  .roa-bottom-dock { padding-inline: 4px; }
}

/* ==========================================================================
   Full-screen player pages: headings, tabs, profile, season, rankings,
   orders, market intelligence, account, and trade tickets
   ========================================================================== */

.roa-page-heading {
  justify-content: space-between;
  min-height: 72px;
  padding-block: 8px;
  overflow: visible;
}

.roa-page-heading > div:first-of-type {
  min-width: 0;
}

.roa-page-heading h1,
.roa-page-heading h2,
.roa-page-heading p {
  margin: 0;
}

.roa-page-heading p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 3px;
  color: var(--roa-muted);
  font-size: .75rem;
}

.roa-heading-actions,
.roa-heading-status-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  margin-left: auto;
}

.roa-heading-actions .button,
.roa-heading-status-row .button {
  min-height: 38px;
  white-space: nowrap;
}

.roa-heading-status-row > span {
  display: grid;
  min-width: 105px;
  padding: 6px 10px;
  border-left: 1px solid rgba(216,184,107,.24);
}

.roa-heading-status-row > span small {
  color: var(--roa-muted);
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.roa-heading-status-row > span strong {
  color: var(--roa-gold-bright);
  font-family: var(--roa-title-font);
  font-size: .75rem;
}

.roa-search-control {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 220px;
  padding: 3px 8px;
  border: 1px solid rgba(216,184,107,.28);
  background: rgba(2,2,4,.78);
}

.roa-search-control img {
  width: 25px;
  height: 25px;
  object-fit: contain;
}

.roa-search-control input {
  width: 100%;
  min-height: 32px;
  padding: 5px 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.roa-workspace-tabs,
.roa-filter-tabs {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}

.roa-workspace-tabs button,
.roa-filter-tabs button,
.roa-account-tabs button,
.roa-ranking-tabs button {
  min-height: 36px;
  padding: 4px 12px;
  color: #bea978;
  white-space: nowrap;
  border-image-source: var(--roa-frame-button);
  background: rgba(6,5,8,.9);
}

.roa-workspace-tabs button.is-active,
.roa-filter-tabs button.is-active,
.roa-account-tabs button.is-active,
.roa-ranking-tabs button.is-active {
  color: #fff0bd;
  border-image-source: var(--roa-frame-button-active);
  background: rgba(73,20,98,.74);
  filter: drop-shadow(0 0 7px rgba(164,52,217,.32));
}

.roa-floating-alert {
  position: fixed;
  top: calc(var(--roa-header-h) + 12px);
  left: 50%;
  z-index: 1400;
  width: min(680px, calc(100vw - 30px));
  transform: translateX(-50%);
  box-shadow: 0 12px 34px rgba(0,0,0,.76);
}

.season-page .container,
.leaderboards-page .container,
.profile-page .container,
.market-intel-page .container,
.roa-account-page .container,
.roa-orders-page .container,
.roa-trade-page .container {
  overflow: hidden;
}

.roa-season-workspace,
.roa-rankings-workspace,
.roa-profile-workspace,
.roa-account-workspace,
.roa-orders-workspace,
.roa-intel-workspace,
.roa-trade-workspace {
  height: 100%;
  min-height: 0;
}

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

.roa-profile-workspace {
  grid-template-columns: minmax(245px, 19vw) minmax(0, 1fr) minmax(260px, 21vw);
}

.roa-profile-identity,
.roa-profile-center,
.roa-profile-side {
  padding: 14px;
}

.roa-profile-identity {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roa-profile-portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 174px;
  max-height: 220px;
  overflow: hidden;
  border: 1px solid rgba(216,184,107,.35);
  background:
    radial-gradient(circle at 50% 76%, rgba(139,43,182,.28), transparent 48%),
    url('/roa-ui/backgrounds/violet-catacombs.webp') center / cover no-repeat;
  box-shadow: inset 0 0 32px rgba(0,0,0,.76), 0 0 15px rgba(133,43,177,.18);
}

.roa-profile-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 14px solid transparent;
  border-image: url('/roa-ui/frames/card-square.png') 48 fill / 14px / 0 stretch;
}

.roa-profile-portrait img {
  width: 100%;
  height: 100%;
  max-height: 210px;
  object-fit: contain;
}

.roa-profile-portrait.is-empty img {
  width: 92px;
  height: 92px;
  opacity: .72;
}

.roa-profile-nameplate {
  display: grid;
  text-align: center;
}

.roa-profile-nameplate h2 { margin: 0; }
.roa-profile-nameplate > strong { color: #d6cbb6; font-size: .75rem; }
.roa-profile-nameplate code {
  margin-top: 5px;
  color: #9d8e77;
  font-size: .61rem;
  overflow-wrap: anywhere;
}

.roa-profile-nameplate .profile-active-title {
  width: fit-content;
  max-width: 100%;
  margin: 6px auto 0;
  padding: 4px 10px;
  color: var(--roa-purple-bright);
  border: 1px solid rgba(178,75,224,.4);
  background: rgba(75,24,96,.38);
  font-family: var(--roa-title-font);
  font-size: .67rem;
}

.roa-profile-primary-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.roa-profile-primary-stats article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  padding: 7px;
  border: 1px solid rgba(216,184,107,.2);
  background: rgba(0,0,0,.31);
}

.roa-profile-primary-stats img {
  grid-row: 1 / 3;
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.roa-profile-primary-stats span { color: var(--roa-muted); font-size: .53rem; text-transform: uppercase; }
.roa-profile-primary-stats strong { color: var(--roa-gold-bright); font-size: .74rem; }

.roa-profile-title-control {
  min-height: 0;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(216,184,107,.16);
}

.roa-profile-title-control .section-heading { margin-bottom: 7px; }
.roa-profile-title-control form { display: grid; gap: 5px; }
.roa-profile-title-control .inline-form { margin-top: 5px; }
.roa-profile-title-control button { width: 100%; min-height: 36px; }

.roa-profile-center {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.roa-profile-tab-panel {
  display: none;
  min-height: 0;
  overflow: hidden;
}

.roa-profile-tab-panel.is-active { display: block; height: 100%; }

.roa-profile-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  height: 100%;
  overflow-y: auto;
  padding-right: 3px;
}

.roa-profile-stat-group {
  min-height: 0;
  padding: 10px;
  border: 1px solid rgba(216,184,107,.2);
  background: linear-gradient(180deg, rgba(17,13,19,.92), rgba(3,3,5,.78));
}

.roa-profile-stat-group header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(216,184,107,.15);
}

.roa-profile-stat-group header img { width: 28px; height: 28px; object-fit: contain; }
.roa-profile-stat-group h3 { margin: 0; font-size: .82rem; }
.roa-profile-stat-group > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.roa-profile-stat-group span { display: grid; padding: 5px 6px; background: rgba(0,0,0,.26); }
.roa-profile-stat-group small { color: var(--roa-muted); font-size: .52rem; }
.roa-profile-stat-group strong { color: #ded3be; font-size: .7rem; }

.roa-achievement-summary-bar {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(216,184,107,.2);
  background: rgba(0,0,0,.28);
}

.roa-achievement-summary-bar > div {
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(216,184,107,.26);
  background: rgba(0,0,0,.72);
}
.roa-achievement-summary-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5c187a, var(--roa-purple-bright)); }
.roa-achievement-summary-bar span { color: var(--roa-muted); font-size: .67rem; }
.roa-achievement-summary-bar strong { color: var(--roa-gold-bright); }

.roa-profile-tab-panel .achievement-category-list,
.roa-profile-tab-panel .profile-adventure-list,
.roa-profile-tab-panel .profile-title-list {
  max-height: calc(100% - 50px);
  overflow-y: auto;
  padding-right: 4px;
}

.roa-profile-tab-panel .achievement-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 7px;
}

.roa-profile-tab-panel .achievement-card {
  padding: 9px;
  min-height: 0;
}

.roa-profile-tab-panel .achievement-card p { margin: 5px 0; font-size: .68rem; }

.profile-adventure-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 9px;
  border-bottom: 1px solid rgba(216,184,107,.14);
  background: rgba(0,0,0,.24);
}
.profile-adventure-list article > img { width: 36px; height: 36px; object-fit: contain; }
.profile-adventure-list h3,
.profile-adventure-list p { margin: 0; }
.profile-adventure-list time { color: var(--roa-muted); font-size: .58rem; white-space: nowrap; }

.profile-title-list { display: grid; gap: 6px; }
.profile-title-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(216,184,107,.18);
  background: rgba(0,0,0,.27);
}
.profile-title-card.active { border-color: rgba(190,76,237,.55); background: rgba(79,25,102,.32); }
.profile-title-card img { width: 40px; height: 40px; object-fit: contain; }
.profile-title-card h3 { margin: 0; font-size: .78rem; }
.profile-title-card small { color: var(--roa-muted); font-size: .58rem; }

.roa-profile-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.roa-profile-side-section {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(216,184,107,.16);
}
.roa-profile-side-section:last-child { border-bottom: 0; }
.roa-profile-side .section-heading { margin-bottom: 7px; padding-bottom: 5px; }

.profile-cooldown-list { display: grid; gap: 5px; }
.profile-cooldown-list article {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(216,184,107,.18);
  background: rgba(0,0,0,.29);
}
.profile-cooldown-list article.ready { border-color: rgba(126,188,114,.3); }
.profile-cooldown-list article.cooldown { border-color: rgba(210,95,87,.28); }
.profile-cooldown-list img { width: 28px; height: 28px; object-fit: contain; }
.profile-cooldown-list span { font-size: .68rem; }
.profile-cooldown-list strong { color: var(--roa-gold-bright); font-size: .66rem; }

.profile-key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 5px;
}
.profile-key-card {
  display: grid;
  grid-template-columns: 25px minmax(0,1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 39px;
  padding: 5px 6px;
  border: 1px solid rgba(216,184,107,.16);
  background: rgba(0,0,0,.26);
}
.profile-key-card.unlocked { border-color: rgba(168,65,215,.36); }
.profile-key-card.locked { opacity: .58; }
.profile-key-card img { width: 24px; height: 24px; object-fit: contain; }
.profile-key-card span { font-size: .55rem; }
.profile-key-card strong { color: var(--roa-gold-bright); font-size: .66rem; }

.profile-progression-list { display: grid; gap: 4px; }
.profile-progression-list > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  background: rgba(0,0,0,.25);
}
.profile-progression-list small { color: var(--roa-muted); font-size: .56rem; }
.profile-progression-list strong { font-size: .64rem; text-align: right; }
.roa-season-mini .button { width: 100%; margin-top: 7px; min-height: 35px; }

/* Season command center ---------------------------------------------------- */

.roa-season-workspace {
  grid-template-columns: minmax(0, 1.55fr) minmax(285px, .68fr);
  grid-template-rows: minmax(0, 1fr) minmax(200px, .52fr);
}

.roa-season-boss,
.roa-season-standing,
.roa-season-feed {
  padding: 14px;
}

.roa-season-boss {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 9px;
  overflow: hidden;
}

.roa-season-boss-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 28%);
  gap: 12px;
  min-height: 165px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(216,184,107,.25);
  background:
    linear-gradient(90deg, rgba(3,3,5,.96) 0%, rgba(9,6,12,.84) 58%, rgba(4,3,6,.35)),
    url('/roa-ui/backgrounds/violet-catacombs.webp') center / cover no-repeat;
}
.roa-season-boss-copy h2 { margin: 0 0 4px; font-size: 1.55rem; }
.roa-season-boss-copy h3 { margin: 6px 0 3px; }
.roa-season-boss-copy p { margin: 4px 0; color: #c0b6a4; font-size: .72rem; line-height: 1.4; }
.season-story-badge { display: inline-block; padding: 4px 8px; color: #e3c985; border: 1px solid rgba(216,184,107,.35); background: rgba(0,0,0,.42); font-size: .58rem; }
.season-hero-villain { display: flex; gap: 8px; align-items: center; }
.season-hero-villain span { color: var(--roa-muted); text-transform: uppercase; font-size: .55rem; }

.roa-season-boss-art {
  display: grid;
  place-items: end center;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.roa-season-boss-art img { max-width: 100%; max-height: 190px; object-fit: contain; filter: drop-shadow(0 8px 14px #000); }

.roa-boss-health-block { padding: 8px 10px; border: 1px solid rgba(216,184,107,.2); background: rgba(0,0,0,.32); }
.roa-boss-health-block .boss-hp-readout { display: flex; justify-content: space-between; align-items: baseline; }
.roa-boss-health-block .boss-hp-readout span { color: var(--roa-muted); font-size: .6rem; text-transform: uppercase; }
.roa-boss-health-block .boss-hp-readout strong { color: var(--roa-gold-bright); font-size: 1.12rem; }
.boss-progress-track { height: 12px; margin: 6px 0; overflow: hidden; border: 1px solid rgba(216,184,107,.36); background: rgba(0,0,0,.75); }
.boss-progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #4f126c, #a82ee2, #de78ff); box-shadow: 0 0 12px rgba(183,55,235,.6); }
.boss-progress-meta { display: flex; justify-content: space-between; color: var(--roa-muted); font-size: .62rem; }
.boss-progress-meta strong { color: #d9c89f; }

.roa-season-metadata {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.roa-season-metadata span { display: grid; padding: 6px 8px; border: 1px solid rgba(216,184,107,.16); background: rgba(0,0,0,.27); }
.roa-season-metadata small { color: var(--roa-muted); font-size: .52rem; text-transform: uppercase; }
.roa-season-metadata strong { color: #d6cbb3; font-size: .64rem; }

.roa-season-rankings-block {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  min-height: 0;
  overflow: hidden;
}
.roa-season-rank-panel { display: none; min-height: 0; overflow-y: auto; margin-top: 6px; }
.roa-season-rank-panel.is-active { display: block; }
.season-rank-list { display: grid; gap: 4px; }
.season-rank-list article {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(216,184,107,.13);
  background: rgba(0,0,0,.24);
}
.season-rank-list article > span { color: var(--roa-gold); font-family: var(--roa-title-font); }
.season-rank-list strong { font-size: .68rem; }
.season-rank-list em { color: var(--roa-gold-bright); font-style: normal; font-size: .68rem; }

.roa-season-standing,
.roa-season-feed { overflow: hidden; }
.roa-season-standing .section-heading,
.roa-season-feed .section-heading { display: flex; justify-content: space-between; align-items: center; }
.roa-season-standing .section-heading img,
.roa-season-feed .section-heading img { width: 38px; height: 38px; object-fit: contain; }
.roa-season-player-rank { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-bottom: 8px; }
.roa-season-player-rank span { display: grid; place-items: center; min-height: 78px; border: 1px solid rgba(216,184,107,.25); background: radial-gradient(circle, rgba(100,31,130,.29), rgba(0,0,0,.38)); }
.roa-season-player-rank small { color: var(--roa-muted); font-size: .55rem; text-transform: uppercase; }
.roa-season-player-rank strong { color: var(--roa-gold-bright); font-family: var(--roa-title-font); font-size: 1.35rem; }
.season-standing-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.season-standing-grid > span { display: grid; padding: 7px; border: 1px solid rgba(216,184,107,.15); background: rgba(0,0,0,.26); color: var(--roa-muted); font-size: .56rem; }
.season-standing-grid strong { color: #d8cdb9; font-size: .68rem; }
.season-standing-grid .roa-season-title { grid-column: 1 / -1; }
.roa-season-standing > .button { width: 100%; margin-top: 8px; }

.roa-season-feed { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 7px; }
.roa-season-feed-panel { display: none; min-height: 0; overflow-y: auto; }
.roa-season-feed-panel.is-active { display: block; }
.season-event-list { display: grid; gap: 4px; }
.season-event-list article {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  gap: 7px;
  align-items: center;
  padding: 6px;
  border-bottom: 1px solid rgba(216,184,107,.13);
  background: rgba(0,0,0,.24);
}
.season-event-list img { width: 28px; height: 28px; object-fit: contain; }
.season-event-list div { display: grid; }
.season-event-list strong { font-size: .64rem; }
.season-event-list span,
.season-event-list time { color: var(--roa-muted); font-size: .53rem; }
.season-event-list time { white-space: nowrap; }

/* Rankings ----------------------------------------------------------------- */

.roa-rankings-main {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  padding: 14px;
}

.roa-ranking-scroll { height: auto; min-height: 0; padding-right: 4px; }
.leaderboard-section-list .leaderboard-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.leaderboard-section-list .leaderboard-panel.is-active { display: block; height: 100%; }

.roa-leaderboard-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: end;
  gap: 8px;
  margin-bottom: 9px;
}
.roa-leaderboard-podium article {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: 8px;
  text-align: center;
  border: 1px solid rgba(216,184,107,.24);
  background: linear-gradient(180deg, rgba(38,27,13,.37), rgba(0,0,0,.38));
}
.roa-leaderboard-podium article.place-1 { min-height: 126px; border-color: rgba(241,201,92,.52); background: radial-gradient(circle at 50% 22%, rgba(185,133,28,.28), rgba(0,0,0,.42)); }
.roa-leaderboard-podium img { width: 35px; height: 35px; object-fit: contain; }
.roa-leaderboard-podium span { color: var(--roa-gold); font-family: var(--roa-title-font); font-size: .72rem; }
.roa-leaderboard-podium strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.roa-leaderboard-podium em { color: var(--roa-gold-bright); font-style: normal; font-size: .9rem; font-weight: 700; }
.roa-leaderboard-podium small { color: var(--roa-muted); font-size: .5rem; }

.leaderboard-row-list { display: grid; gap: 4px; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) minmax(115px,.22fr) minmax(115px,.22fr);
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(216,184,107,.13);
  background: rgba(0,0,0,.27);
}
.leaderboard-row:hover { border-color: rgba(180,64,226,.35); background: rgba(79,24,102,.23); }
.leaderboard-rank { color: var(--roa-gold); font-family: var(--roa-title-font); font-weight: 700; }
.leaderboard-player { min-width: 0; }
.leaderboard-player > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.leaderboard-player > div { display: flex; gap: 5px; align-items: center; color: var(--roa-muted); font-size: .52rem; }
.leaderboard-stat,
.leaderboard-secondary { display: grid; text-align: right; }
.leaderboard-stat strong,
.leaderboard-secondary strong { color: var(--roa-gold-bright); font-size: .7rem; }
.leaderboard-stat span,
.leaderboard-secondary span { color: var(--roa-muted); font-size: .5rem; }
.active-title-pill { padding: 2px 5px; color: var(--roa-purple-bright); border: 1px solid rgba(176,68,221,.32); }

.roa-hall-sidebar { display: grid; grid-template-rows: auto minmax(0,1fr); padding: 14px; }
.roa-hall-sidebar .section-heading { display: flex; justify-content: space-between; align-items: center; }
.roa-hall-sidebar .section-heading img { width: 42px; height: 42px; object-fit: contain; }
.roa-hall-sidebar .hall-card-grid { min-height: 0; overflow-y: auto; }
.hall-legend-card {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  min-height: 88px;
  padding: 8px;
  border: 1px solid rgba(216,184,107,.19);
  background: rgba(0,0,0,.28);
}
.hall-legend-card.crowned { border-color: rgba(216,184,107,.35); background: linear-gradient(90deg, rgba(83,51,12,.2), rgba(0,0,0,.3)); }
.hall-legend-card > img { width: 45px; height: 45px; object-fit: contain; }
.hall-legend-card > div { display: grid; min-width: 0; }
.hall-legend-card h3 { margin: 1px 0 4px; font-size: .68rem; }
.hall-legend-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.hall-legend-card small,
.hall-legend-card span { color: var(--roa-muted); font-size: .52rem; }
.hall-legend-card b { color: var(--roa-gold-bright); font-size: .7rem; }

/* My Orders ---------------------------------------------------------------- */

.roa-orders-page .container {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 8px;
}

.roa-orders-workspace {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 8px;
}

.roa-orders-toolbar {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 14px solid transparent;
  border-image: url('/roa-ui/frames/button-plain.png') 35 86 fill / 14px 28px / 0 stretch;
  background: rgba(6,5,8,.88);
}

.roa-orders-summary { display: grid; grid-template-columns: repeat(5, minmax(100px,1fr)); gap: 5px; }
.roa-orders-summary article {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 5px;
  padding: 5px 7px;
  border-left: 1px solid rgba(216,184,107,.17);
}
.roa-orders-summary img { grid-row: 1 / 3; width: 27px; height: 27px; object-fit: contain; }
.roa-orders-summary span { color: var(--roa-muted); font-size: .5rem; text-transform: uppercase; }
.roa-orders-summary strong { color: var(--roa-gold-bright); font-size: .76rem; }
.roa-orders-controls { display: flex; align-items: center; gap: 7px; }
.roa-orders-controls .roa-search-control { min-width: 210px; }
.roa-orders-table { display: grid; grid-template-rows: minmax(0,1fr); padding: 12px; }
.roa-orders-table .table-wrap { height: 100%; max-height: none; }
.roa-order-table { min-width: 980px; }
.roa-order-material { display: flex; gap: 7px; align-items: center; }
.roa-order-material b { display: grid; place-items: center; width: 28px; height: 28px; font-size: 1.1rem; }
.roa-order-cancel { min-height: 34px; padding: 3px 9px; font-size: .58rem; }
.roa-orders-empty { display: grid; place-items: center; align-content: center; height: 100%; text-align: center; }
.roa-orders-empty img { width: 75px; height: 75px; object-fit: contain; }
.roa-orders-empty h2,
.roa-orders-empty p { margin: 4px; }
.roa-table-empty-filter,
.roa-holdings-empty-filter { padding: 18px; text-align: center; color: var(--roa-muted); }

/* Market intelligence ------------------------------------------------------ */

.roa-intel-workspace {
  grid-template-columns: minmax(210px, 17vw) minmax(0,1fr) minmax(270px, 22vw);
}
.roa-intel-materials,
.roa-intel-chart,
.roa-intel-detail { padding: 13px; overflow: hidden; }
.roa-intel-materials { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 7px; }
.roa-intel-materials .section-heading,
.roa-intel-detail .section-heading { display: flex; justify-content: space-between; align-items: center; }
.roa-intel-materials .section-heading img,
.roa-intel-detail .section-heading img { width: 38px; height: 38px; object-fit: contain; }
.roa-intel-materials .roa-search-control { min-width: 0; width: 100%; }
.roa-intel-material-list { display: grid; align-content: start; gap: 5px; overflow-y: auto; }
.roa-intel-material-button {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 7px;
  width: 100%;
  min-height: 60px;
  padding: 7px;
  text-align: left;
  color: #d4c9b4;
  border: 1px solid rgba(216,184,107,.17);
  background: rgba(0,0,0,.29);
}
.roa-intel-material-button:hover,
.roa-intel-material-button.is-active { border-color: rgba(190,72,235,.5); background: linear-gradient(90deg, rgba(94,27,123,.42), rgba(0,0,0,.3)); }
.roa-intel-material-button > img { grid-row: 1 / 3; width: 33px; height: 33px; object-fit: contain; }
.roa-intel-material-button span { display: grid; min-width: 0; }
.roa-intel-material-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--roa-title-font); font-size: .63rem; }
.roa-intel-material-button small { overflow: hidden; color: var(--roa-muted); text-overflow: ellipsis; white-space: nowrap; font-size: .49rem; }
.roa-intel-material-button em { color: var(--roa-gold); font-style: normal; font-size: .53rem; }

.roa-intel-chart {
  display: grid;
  grid-template-rows: auto auto auto minmax(0,1fr);
  gap: 8px;
}
.roa-intel-selected-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 7px; border-bottom: 1px solid rgba(216,184,107,.18); }
.roa-intel-selected-header h2 { margin: 0 0 5px; font-size: 1.35rem; }
.roa-intel-price { display: grid; text-align: right; }
.roa-intel-price small { color: var(--roa-muted); font-size: .54rem; text-transform: uppercase; }
.roa-intel-price strong { color: var(--roa-gold-bright); font-size: 1rem; }
.roa-intel-price span { color: #b29aa9; font-size: .58rem; }
.roa-market-balance-chart { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(216,184,107,.17); background: rgba(0,0,0,.29); }
.roa-market-bar-row { display: grid; grid-template-columns: 120px minmax(0,1fr) 68px; align-items: center; gap: 8px; }
.roa-market-bar-row > span { color: var(--roa-muted); font-size: .58rem; }
.roa-market-bar-row > div { height: 10px; border: 1px solid rgba(216,184,107,.22); background: rgba(0,0,0,.7); }
.roa-market-bar-row i { display: block; height: 100%; background: linear-gradient(90deg, #42115b, #a736db); box-shadow: 0 0 7px rgba(169,52,218,.45); transition: width .22s ease; }
.roa-market-bar-row strong { color: #d8cdb8; text-align: right; font-size: .65rem; }
.roa-intel-stat-ribbon { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
.roa-intel-stat-ribbon span { display: grid; padding: 6px; border: 1px solid rgba(216,184,107,.15); background: rgba(0,0,0,.26); }
.roa-intel-stat-ribbon small { color: var(--roa-muted); font-size: .5rem; text-transform: uppercase; }
.roa-intel-stat-ribbon strong { color: var(--roa-gold-bright); font-size: .66rem; }
.roa-intel-ledger { display: grid; grid-template-rows: auto minmax(0,1fr); min-height: 0; overflow: hidden; }
.roa-intel-ledger-panel { display: none; min-height: 0; overflow: hidden; margin-top: 6px; }
.roa-intel-ledger-panel.is-active { display: block; height: calc(100% - 6px); }
.roa-intel-ledger-panel .table-wrap { height: 100%; max-height: none; }
.roa-intel-ledger-panel table { min-width: 760px; }

.roa-intel-detail { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.roa-intel-overview-cards { display: grid; gap: 5px; }
.roa-intel-overview-cards article { display: grid; padding: 7px 8px; border: 1px solid rgba(216,184,107,.16); background: rgba(0,0,0,.27); }
.roa-intel-overview-cards small { color: var(--roa-muted); font-size: .5rem; text-transform: uppercase; }
.roa-intel-overview-cards strong { color: #d6cbb5; font-size: .65rem; }
.roa-intel-detail-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.roa-intel-detail-stats span { display: grid; padding: 7px; border: 1px solid rgba(216,184,107,.15); background: rgba(0,0,0,.24); }
.roa-intel-detail-stats small { color: var(--roa-muted); font-size: .49rem; text-transform: uppercase; }
.roa-intel-detail-stats strong { color: var(--roa-gold-bright); font-size: .61rem; }
.roa-intel-actions { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.roa-intel-actions .button { display: grid; place-items: center; min-height: 36px; padding: 4px 8px; font-size: .63rem; }
.roa-intel-filter-form { display: grid; gap: 5px; margin-top: auto; }
.roa-intel-filter-form .section-heading { margin-bottom: 0; }
.roa-intel-filter-form label { color: var(--roa-muted); font-size: .55rem; }
.roa-intel-filter-form button,
.roa-intel-filter-form .button { width: 100%; min-height: 35px; }

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

.roa-account-workspace { grid-template-columns: minmax(285px, 24vw) minmax(0,1fr); }
.roa-account-summary,
.roa-account-holdings { padding: 14px; overflow: hidden; }
.roa-account-summary { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.roa-account-identity { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(216,184,107,.18); }
.roa-account-avatar { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 72px; border: 2px solid rgba(216,184,107,.45); border-radius: 50%; object-fit: cover; background: rgba(72,24,94,.55); }
.roa-account-identity h2 { margin: 0; font-size: 1.1rem; }
.roa-account-identity span { color: var(--roa-muted); font-size: .62rem; }
.roa-wallet-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 9px; border: 1px solid rgba(216,184,107,.24); background: rgba(0,0,0,.32); }
.roa-wallet-card code { display: block; color: #dccda9; overflow-wrap: anywhere; font-size: .66rem; }
.roa-wallet-card .roa-icon-button { width: 36px; height: 36px; }
.roa-account-value-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.roa-account-value-grid article { display: grid; grid-template-columns: 31px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 0 6px; padding: 7px; border: 1px solid rgba(216,184,107,.17); background: rgba(0,0,0,.27); }
.roa-account-value-grid article.total { grid-column: 1 / -1; border-color: rgba(178,72,222,.38); background: rgba(72,23,94,.28); }
.roa-account-value-grid img { grid-row: 1 / 3; width: 30px; height: 30px; object-fit: contain; }
.roa-account-value-grid span { color: var(--roa-muted); font-size: .49rem; text-transform: uppercase; }
.roa-account-value-grid strong { color: var(--roa-gold-bright); font-size: .66rem; }
.roa-account-actions { display: grid; gap: 5px; margin-top: auto; }
.roa-account-actions .button,
.roa-account-actions button { width: 100%; min-height: 36px; }
.roa-account-empty-state { display: grid; place-items: center; align-content: center; min-height: 260px; text-align: center; }
.roa-account-empty-state > img { width: 86px; height: 86px; object-fit: contain; }
.roa-account-empty-state h2,
.roa-account-empty-state p { margin: 4px; }
.roa-dev-account-form { display: grid; gap: 6px; }

.roa-account-holdings { display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 7px; }
.roa-account-holdings-header { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(216,184,107,.18); }
.roa-account-holdings-header h2,
.roa-account-holdings-header p { margin: 0; }
.roa-account-tabs { display: flex; gap: 5px; overflow-x: auto; }
.roa-account-tabs button { display: flex; align-items: center; gap: 5px; }
.roa-account-tabs button span { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: .55rem; }
.roa-account-tab-panel { min-height: 0; overflow: hidden; }
.roa-account-tab-panel.is-active { display: block; height: 100%; }
.roa-holdings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); align-content: start; gap: 7px; height: 100%; overflow-y: auto; padding-right: 3px; }
.roa-holding-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 69px; padding: 8px; border: 1px solid rgba(216,184,107,.18); background: rgba(0,0,0,.29); }
.roa-holding-card:hover { border-color: rgba(178,68,222,.38); background: rgba(72,23,94,.22); }
.roa-holding-card .roa-holding-icon { display: grid; place-items: center; width: 40px; height: 40px; font-size: 1.35rem; border: 1px solid rgba(216,184,107,.2); background: rgba(0,0,0,.33); }
.roa-holding-card > div { display: grid; min-width: 0; }
.roa-holding-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.roa-holding-card small { color: var(--roa-muted); font-size: .53rem; }
.roa-holding-card > b { color: var(--roa-gold-bright); font-size: .82rem; }
.roa-holding-card.empty { opacity: .55; }

/* Buy and sell trade workspaces ------------------------------------------- */

.roa-trade-page .container {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 8px;
}
.roa-trade-workspace {
  display: grid;
  grid-template-columns: minmax(235px, 19vw) minmax(0,1fr) minmax(245px, 20vw);
  gap: 10px;
}
.roa-trade-workspace > .panel { min-height: 0; margin: 0; padding: 14px; overflow: hidden; }
.roa-trade-material-summary { display: flex; flex-direction: column; gap: 8px; overflow-y: auto !important; text-align: center; }
.roa-trade-material-icon { display: grid; place-items: center; min-height: 130px; border: 1px solid rgba(216,184,107,.24); background: radial-gradient(circle, rgba(115,36,151,.32), rgba(0,0,0,.43)); }
.roa-trade-material-icon span { font-size: 4.2rem; filter: drop-shadow(0 0 13px rgba(179,63,229,.43)); }
.roa-trade-material-summary h2,
.roa-trade-material-summary p { margin: 0; }
.roa-trade-region { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--roa-muted); font-size: .64rem; }
.roa-trade-region img { width: 23px; height: 23px; object-fit: contain; }
.roa-trade-price-card { display: grid; padding: 10px; border: 1px solid rgba(216,184,107,.28); background: rgba(0,0,0,.33); }
.roa-trade-price-card small,
.roa-trade-price-card span { color: var(--roa-muted); font-size: .53rem; text-transform: uppercase; }
.roa-trade-price-card strong { color: var(--roa-gold-bright); font-size: 1rem; }
.roa-trade-market-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; }
.roa-trade-market-stats span { display: grid; padding: 7px; border: 1px solid rgba(216,184,107,.15); background: rgba(0,0,0,.25); }
.roa-trade-market-stats small { color: var(--roa-muted); font-size: .49rem; text-transform: uppercase; }
.roa-trade-market-stats strong { color: #d8ccb6; font-size: .66rem; }
.roa-trader-identity { display: flex; align-items: center; gap: 7px; padding: 7px; text-align: left; border: 1px solid rgba(216,184,107,.16); background: rgba(0,0,0,.26); }
.roa-trader-identity img { width: 34px; height: 34px; object-fit: contain; }
.roa-trader-identity div { display: grid; min-width: 0; }
.roa-trader-identity small { color: var(--roa-muted); font-size: .5rem; }
.roa-trader-identity strong { font-size: .64rem; }
.roa-trader-identity code { overflow: hidden; color: #a99b84; text-overflow: ellipsis; font-size: .53rem; }
.roa-trade-material-summary > .button { margin-top: auto; }

.roa-trade-orderbook,
.roa-trade-ticket { display: grid; grid-template-rows: auto minmax(0,1fr); }
.roa-trade-orderbook .section-heading,
.roa-trade-ticket .section-heading { display: flex; justify-content: space-between; align-items: center; }
.roa-trade-orderbook .section-heading img,
.roa-trade-ticket .section-heading img { width: 40px; height: 40px; object-fit: contain; }
.roa-listing-ledger { display: grid; align-content: start; gap: 7px; min-height: 0; overflow-y: auto; padding-right: 3px; }
.roa-buy-listing { display: grid; grid-template-columns: minmax(150px,1.25fr) repeat(3,minmax(95px,.68fr)) minmax(150px,1fr); align-items: end; gap: 7px; padding: 9px; border: 1px solid rgba(216,184,107,.18); background: rgba(0,0,0,.29); }
.roa-buy-listing > div { display: grid; }
.roa-buy-listing small { color: var(--roa-muted); font-size: .49rem; text-transform: uppercase; }
.roa-buy-listing strong { color: #dbcfae; font-size: .66rem; }
.roa-buy-listing-seller { display: flex !important; flex-direction: row; align-items: center; gap: 6px; }
.roa-buy-listing-seller img { width: 31px; height: 31px; object-fit: contain; }
.roa-buy-listing-seller span { display: grid; }
.roa-buy-listing-form { display: grid; grid-template-columns: minmax(65px,1fr) auto; gap: 4px; align-items: end; }
.roa-buy-listing-form label { grid-column: 1 / -1; color: var(--roa-muted); font-size: .49rem; }
.roa-buy-listing-form input { min-height: 34px; }
.roa-buy-listing-form button { min-height: 34px; padding: 3px 10px; }
.roa-trade-empty { display: grid; place-items: center; align-content: center; height: 100%; text-align: center; }
.roa-trade-empty img { width: 82px; height: 82px; object-fit: contain; }
.roa-trade-empty h3,
.roa-trade-empty p { margin: 4px; }

.roa-primary-trade-form { display: grid; align-content: center; gap: 7px; width: min(520px, 100%); height: 100%; margin: 0 auto; }
.roa-primary-trade-form > img { width: 88px; height: 88px; margin: 0 auto; object-fit: contain; }
.roa-primary-trade-form > div { text-align: center; }
.roa-primary-trade-form h3,
.roa-primary-trade-form p { margin: 3px; }
.roa-primary-trade-form p { color: var(--roa-muted); }
.roa-primary-trade-form button { width: 100%; margin-top: 5px; }
.roa-listing-estimates { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 5px 0; }
.roa-listing-estimates span { display: grid; padding: 9px; border: 1px solid rgba(216,184,107,.18); background: rgba(0,0,0,.28); }
.roa-listing-estimates span.net { border-color: rgba(163,61,209,.4); background: rgba(69,21,91,.29); }
.roa-listing-estimates small { color: var(--roa-muted); font-size: .5rem; text-transform: uppercase; }
.roa-listing-estimates strong { color: var(--roa-gold-bright); font-size: .69rem; }

.roa-trade-help { display: flex; flex-direction: column; gap: 8px; overflow-y: auto !important; }
.roa-trade-help .section-heading { display: flex; align-items: center; justify-content: space-between; }
.roa-trade-help .section-heading img { width: 38px; height: 38px; object-fit: contain; }
.roa-rule-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.roa-rule-list li { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(216,184,107,.15); background: rgba(0,0,0,.26); }
.roa-rule-list img { width: 29px; height: 29px; object-fit: contain; }
.roa-rule-list span { color: #c1b6a3; font-size: .62rem; line-height: 1.35; }
.roa-trade-help > .button { width: 100%; margin-top: auto; }

/* Loadout completion styles ------------------------------------------------ */

.roa-loadout-preset-card {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(216,184,107,.17);
  background: rgba(0,0,0,.28);
}
.roa-loadout-preset-card.is-active { border-color: rgba(183,69,231,.48); background: rgba(74,23,97,.28); }
.roa-preset-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; }
.roa-preset-actions .button,
.roa-preset-actions button { min-height: 33px; padding: 3px 7px; font-size: .55rem; }
.roa-loadout-save-form { display: grid; gap: 6px; padding-top: 7px; border-top: 1px solid rgba(216,184,107,.17); }
.roa-loadout-select-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; }
.roa-loadout-select-grid label { display: grid; gap: 2px; color: var(--roa-muted); font-size: .52rem; }
.roa-loadout-select-grid select { width: 100%; min-width: 0; }
.roa-slot-inventory-panel { display: none; min-height: 0; }
.roa-slot-inventory-panel.is-active { display: block; height: 100%; }

/* Desktop compaction ------------------------------------------------------- */

@media (max-height: 880px) and (min-width: 1121px) {
  :root { --roa-header-h: 82px; --roa-dock-h: 68px; }
  .roa-brand-emblem { width: 60px; height: 60px; flex-basis: 60px; }
  .roa-nav-item img { width: 34px; height: 34px; }
  .roa-bottom-dock img { width: 31px; height: 31px; }
  .roa-bottom-dock small { display: none; }
  .roa-page-heading { min-height: 58px; }
  .roa-profile-portrait { min-height: 132px; max-height: 155px; }
  .roa-profile-portrait img { max-height: 148px; }
  .roa-season-boss-stage { min-height: 128px; }
  .roa-season-boss-art img { max-height: 145px; }
  .roa-leaderboard-podium article { min-height: 86px; }
  .roa-leaderboard-podium article.place-1 { min-height: 101px; }
}

@media (max-width: 1380px) and (min-width: 1121px) {
  .roa-page-heading p:not(.eyebrow) { display: none; }
  .roa-heading-status-row > span { min-width: 88px; padding-inline: 6px; }
  .roa-profile-workspace { grid-template-columns: 230px minmax(0,1fr) 245px; }
  .roa-profile-overview-grid { grid-template-columns: 1fr; }
  .roa-season-workspace { grid-template-columns: minmax(0,1.45fr) 280px; }
  .roa-rankings-workspace { grid-template-columns: minmax(0,1fr) 270px; }
  .roa-intel-workspace { grid-template-columns: 210px minmax(0,1fr) 260px; }
  .roa-account-workspace { grid-template-columns: 270px minmax(0,1fr); }
  .roa-trade-workspace { grid-template-columns: 225px minmax(0,1fr) 235px; }
  .roa-buy-listing { grid-template-columns: minmax(125px,1fr) repeat(2,minmax(78px,.58fr)) minmax(130px,.9fr); }
  .roa-buy-listing > div:nth-of-type(4) { display: none; }
  .roa-orders-controls .roa-search-control { display: none; }
}

@media (max-width: 1120px) {
  .roa-page-heading { flex-wrap: wrap; }
  .roa-heading-actions,
  .roa-heading-status-row { width: 100%; justify-content: flex-start; overflow-x: auto; margin: 5px 0 0; }
  .season-page .container,
  .leaderboards-page .container,
  .profile-page .container,
  .market-intel-page .container,
  .roa-account-page .container,
  .roa-orders-page .container,
  .roa-trade-page .container { overflow: visible; }
  .roa-profile-workspace,
  .roa-season-workspace,
  .roa-rankings-workspace,
  .roa-account-workspace,
  .roa-intel-workspace,
  .roa-trade-workspace { height: auto; }
  .roa-profile-center { min-height: 620px; }
  .roa-season-boss { min-height: 720px; }
  .roa-rankings-main { min-height: 720px; }
  .roa-account-holdings { min-height: 560px; }
  .roa-intel-chart { min-height: 650px; }
  .roa-trade-orderbook,
  .roa-trade-ticket { min-height: 540px; }
  .roa-orders-toolbar { grid-template-columns: 1fr; }
  .roa-orders-controls { justify-content: space-between; }
}

@media (max-width: 720px) {
  .roa-heading-actions .button { flex: 1; text-align: center; }
  .roa-search-control { min-width: 0; width: 100%; }
  .roa-profile-primary-stats,
  .profile-key-grid,
  .roa-account-value-grid,
  .roa-season-player-rank,
  .season-standing-grid,
  .roa-intel-detail-stats,
  .roa-listing-estimates { grid-template-columns: 1fr; }
  .roa-profile-overview-grid,
  .roa-season-metadata,
  .roa-intel-stat-ribbon { grid-template-columns: repeat(2,1fr); }
  .roa-season-boss-stage { grid-template-columns: 1fr; }
  .roa-season-boss-art { display: none; }
  .roa-leaderboard-podium { grid-template-columns: 1fr; align-items: stretch; }
  .roa-leaderboard-podium article,
  .roa-leaderboard-podium article.place-1 { min-height: 80px; }
  .leaderboard-row { grid-template-columns: 38px minmax(0,1fr) 90px; }
  .leaderboard-secondary { display: none; }
  .roa-orders-summary { grid-template-columns: repeat(2,1fr); }
  .roa-orders-controls { align-items: stretch; flex-direction: column; }
  .roa-market-bar-row { grid-template-columns: 92px minmax(0,1fr) 54px; }
  .roa-account-holdings-header { align-items: stretch; flex-direction: column; }
  .roa-holdings-grid { grid-template-columns: 1fr; }
  .roa-buy-listing { grid-template-columns: 1fr 1fr; }
  .roa-buy-listing-seller,
  .roa-buy-listing-form { grid-column: 1 / -1; }
}

/* UI-STORY-001: Shared Special Dungeon context-panel repair
   Presentation only. Story state, keys, cooldowns, routes, rewards,
   combat, session progression, and RoA Bot authority remain unchanged. */

.map-page .roa-map-context .region-card {
  min-width: 0;
  overflow-x: hidden;
}

.map-page .roa-map-context .region-card > * {
  min-width: 0;
}

.map-page .roa-map-context .map-story-dungeon-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.map-page .roa-map-context .map-story-dungeon-section > div:first-child {
  min-width: 0;
}

.map-page .roa-map-context .map-story-dungeon-section h3,
.map-page .roa-map-context .map-story-dungeon-section p {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.map-page .roa-map-context .map-story-dungeon-section h3 {
  margin: 3px 0 7px;
  line-height: 1.18;
}

.map-page .roa-map-context .map-story-dungeon-section p {
  margin: 5px 0;
  line-height: 1.42;
}

.map-page .roa-map-context .map-story-actions {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 2px;
}

.map-page .roa-map-context .map-story-actions .button,
.map-page .roa-map-context .map-story-actions button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding-left: 10px;
  padding-right: 10px;
  white-space: normal;
  line-height: 1.15;
}

@media (max-width: 520px) {
  .map-page .roa-map-context .map-story-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}