@import url("./phase19.css");

/* VEYDRIS 17.5 — single owner for desktop shell, component geometry and focus UX. */
:root {
  --vey-nav-width: 172px;
  --vey-context-width: 190px;
  --vey-topbar-height: 64px;
  --vey-utility-height: 38px;
  --vey-strip-height: 29px;
  --vey-gap: 8px;
  --vey-panel: #0d0e13;
  --vey-panel-raised: #14131a;
  --vey-panel-soft: #111116e8;
  --vey-line: #443827;
  --vey-line-bright: #755b35;
  --vey-text: #ece3d5;
  --vey-muted: #a79d8e;
  --vey-gold: #d7a84f;
  --vey-violet: #9b78c2;
  --vey-cyan: #72c7cd;
  --vey-danger: #b34a55;
  --vey-radius: 2px;
  --vey-fast: 180ms;
  --vey-space-xs: 4px;
  --vey-space-s: 8px;
  --vey-space-m: 12px;
  --vey-space-l: 18px;
  --vey-type-screen: clamp(30px, 3vw, 46px);
  --vey-type-entity: clamp(22px, 2.2vw, 34px);
  --vey-type-section: 17px;
  --vey-type-stat: 18px;
  --vey-type-body: 12px;
  --vey-type-caption: 9px;
  --layer-content: 0;
  --layer-card: 10;
  --layer-focus: 20;
  --layer-tooltip: 50;
  --layer-drawer: 70;
  --layer-modal: 90;
  --layer-toast: 100;
  --layer-mobile-nav: 110;
}

html,
body {
  width: 100%;
  min-width: 0;
}

body {
  padding: 0;
  color: var(--vey-text);
  background: #050609;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #f0c56f;
  outline-offset: 2px;
}

.button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #625039;
  border-radius: var(--vey-radius);
  color: var(--vey-text);
  background: linear-gradient(180deg, #2a241d, #151316);
  box-shadow: inset 0 0 0 1px #08090c;
  font:
    750 12px Manrope,
    sans-serif;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  transition:
    border-color var(--vey-fast),
    background var(--vey-fast),
    color var(--vey-fast),
    transform var(--vey-fast);
}

.button[disabled] {
  opacity: 0.5;
  color: #a9a196;
  border-color: #45403a;
  background: linear-gradient(180deg, #242329, #151519);
  box-shadow: none;
  cursor: not-allowed;
}

.button:hover:not([disabled]) {
  border-color: #ac8449;
  transform: translateY(-1px);
}

.button.primary {
  border-color: #bd8a3f;
  color: #171009;
  background: linear-gradient(180deg, #efc86f, #ac712d);
  box-shadow:
    inset 0 0 0 1px #71491d,
    0 0 18px #b6782930;
}

.button.ghost,
.button.metal {
  border-color: #4a4544;
  color: #d5ccbe;
  background: linear-gradient(180deg, #242329, #111216);
}

.button.danger {
  border-color: #783a42;
  color: #ffd7d6;
  background: linear-gradient(180deg, #4b2329, #211216);
}

.profile-xp,
.profile-xp > span {
  pointer-events: none;
}

.card,
.profile-panel,
.location-panel,
.forge-panel,
.rift-inspect {
  position: relative;
  z-index: var(--layer-card);
  border-radius: var(--vey-radius);
}

#view {
  position: relative;
  z-index: var(--layer-content);
}

.game-tooltip {
  z-index: var(--layer-tooltip);
}

.game-tooltip.is-inspect-drawer,
.game-tooltip.is-bottom-sheet,
.vey-more-panel,
.advanced-stats,
.power-details-panel {
  z-index: var(--layer-drawer);
}

.auth-layer,
.dialog-layer,
.fantasy-dialog-layer,
.capacity-dialog-layer,
.phase151-dialog-layer,
.collection-reveal {
  z-index: var(--layer-modal);
}

.toast {
  z-index: var(--layer-toast);
}

.mobile-dock {
  z-index: var(--layer-mobile-nav);
}

.app-shell {
  min-width: 0;
}

.sidebar {
  background:
    linear-gradient(90deg, #ffffff05, transparent 12%, transparent 88%, #0008),
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px),
    #0a0b0f;
}

.brand {
  min-height: 56px;
  gap: 8px;
}

.brand small {
  color: #8c8478;
  letter-spacing: 0.14em;
}

#nav {
  display: grid;
  gap: 3px;
}

.nav-item {
  min-width: 0;
  min-height: 44px;
  border-radius: var(--vey-radius);
}

.nav-item > span {
  color: #a78955;
  font-size: 17px;
}

.nav-item.active {
  border-color: #705532;
  box-shadow: inset 3px 0 #e1b45f;
}

.topbar {
  min-width: 0;
}

.global-hero,
.resources,
.header-mission {
  min-width: 0;
}

.global-hero__identity b,
.header-mission b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource {
  min-width: 62px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
}

.objective-bar {
  color: var(--vey-text);
}

.objective-copy {
  min-width: 0;
}

.objective-copy small,
.context-resources small,
.location-stat small,
.material-chip small {
  font:
    600 8px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-navigation,
.context-resources {
  scrollbar-width: none;
}

.section-navigation::-webkit-scrollbar,
.context-resources::-webkit-scrollbar,
.vey-tabs::-webkit-scrollbar {
  display: none;
}

.section-navigation button,
.vey-tabs button {
  min-height: 34px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #91887c;
  background: transparent;
  font:
    700 9px "DM Mono",
    monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-navigation button.active,
.vey-tabs button.active {
  border-bottom-color: #d3a34c;
  color: #f0d799;
}

.context-resources {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.context-resources > span {
  min-width: 84px;
  padding: 5px 10px;
  border-left: 1px solid #3c3226;
  text-align: center;
}

.context-resources b {
  margin-left: 5px;
  color: #e6bf6d;
}

#view {
  position: relative;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
}

#view.view-enter {
  animation: vey-view-enter var(--vey-fast) ease both;
}

@keyframes vey-view-enter {
  from {
    opacity: 0.45;
  }
}

.world-feed {
  height: var(--vey-strip-height);
  min-height: var(--vey-strip-height);
  background: #08090d;
  border-top: 1px solid #4b3923;
}

/* Shared focus navigation */
.vey-focus-nav {
  position: relative;
  z-index: var(--layer-focus);
  display: grid;
  grid-template-columns:
    minmax(110px, 0.72fr) minmax(190px, 1.2fr) minmax(110px, 0.72fr)
    auto;
  gap: 6px;
  align-items: stretch;
  min-height: 42px;
  margin: 5px 0;
}

.vey-focus-nav button,
.vey-focus-nav .focus-current {
  position: relative;
  min-width: 0;
  min-height: 42px;
  padding: 6px 11px;
  overflow: hidden;
  border: 1px solid #514433;
  border-radius: var(--vey-radius);
  color: #cfc4b4;
  background: linear-gradient(145deg, #17151a, #0b0c10);
}

.vey-focus-nav button {
  cursor: pointer;
}

.vey-focus-nav button::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid #b3884f;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0.85;
}

.vey-focus-nav .previous {
  padding-left: 36px;
  text-align: left;
}

.vey-focus-nav .previous::before {
  left: 11px;
  border-width: 0 0 2px 2px;
}

.vey-focus-nav .next {
  padding-right: 36px;
  text-align: right;
}

.vey-focus-nav .next::before {
  right: 11px;
  border-width: 2px 2px 0 0;
}

.vey-focus-nav .focus-current {
  border-color: #795b91;
  background:
    radial-gradient(circle at 50% 120%, #72498b48, transparent 58%), #121117;
  text-align: center;
}

.vey-focus-nav small,
.vey-focus-nav b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vey-focus-nav small {
  color: #988c7c;
  font:
    700 var(--vey-type-caption) "DM Mono",
    monospace;
  letter-spacing: 0.1em;
}

.vey-focus-nav b {
  margin-top: 2px;
  font-size: 13px;
}

.vey-focus-nav .focus-view-all {
  min-width: 88px;
  text-align: center;
  border-color: #625077;
}

.vey-focus-nav .focus-view-all::before {
  display: none;
}

.vey-focus-track:not(.vey-view-all) {
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
}

.vey-focus-track:not(.vey-view-all) > :not(.vey-focus-current) {
  display: none;
}

.vey-focus-track:not(.vey-view-all) > .vey-focus-current {
  position: relative;
  z-index: var(--layer-card);
  width: 100%;
  max-width: none;
  opacity: 1;
  transform: none;
  border-color: #916ab0;
  box-shadow: 0 0 24px #72458f2b;
}

.vey-focus-track > .vey-focus-previous,
.vey-focus-track > .vey-focus-current,
.vey-focus-track > .vey-focus-next {
  transition:
    opacity var(--vey-fast),
    transform var(--vey-fast),
    border-color var(--vey-fast);
}

.vey-focus-track.vey-view-all {
  max-height: min(58vh, 590px);
  overflow: auto;
  padding-right: 4px;
}

/* Shared tabs */
.vey-tabs {
  position: relative;
  z-index: 10;
  display: flex;
  gap: 2px;
  min-height: 36px;
  margin: 6px 0;
  overflow: auto;
  border-bottom: 1px solid #332a21;
  background: #090a0e;
}

.vey-tabs > button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #938b7e;
  background: transparent;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vey-tabs > button.active,
.vey-tabs > button[aria-selected="true"] {
  border-bottom-color: #d0a653;
  color: #ead7ad;
  background: linear-gradient(180deg, transparent, #b9832d15);
}

.guild-section-tabs {
  width: 100%;
  margin: 0;
}

.boss-hunt-identity > p {
  margin: 5px 0;
  color: #b5aa9c;
  font-size: 9px;
}

.collection-journal.vey-tabbed > .collection-section:not(.vey-tab-active),
.collection-journal.vey-tabbed > .unique-collection:not(.vey-tab-active),
.vey-liveops > :not(.vey-liveops-tabs):not(.vey-liveops-active) {
  display: none;
}

.collection-journal.vey-tabbed > .vey-tab-active {
  min-height: 0;
  height: calc(100vh - 260px);
  overflow: auto;
}

/* Shared side drawer / mobile sheet host */
.vey-more-panel {
  position: fixed;
  z-index: var(--layer-drawer);
  top: 8px;
  right: 8px;
  bottom: calc(var(--vey-strip-height) + 8px);
  width: min(430px, calc(100vw - 20px));
  padding: 14px;
  overflow: auto;
  border: 1px solid #765b38;
  border-radius: var(--vey-radius);
  background: linear-gradient(150deg, #18151b, #090a0e 72%);
  box-shadow:
    0 24px 80px #000d,
    inset 0 0 0 1px #ffffff08;
}

.vey-more-panel[hidden] {
  display: none;
}

.vey-more-panel > header {
  position: sticky;
  top: -14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 2px;
  border-bottom: 1px solid #ffffff12;
  background: #111116f2;
}

.vey-more-panel h2 {
  margin: 2px 0;
  font:
    700 25px "Playfair Display",
    serif;
}

.vey-more-panel header small,
.vey-more-panel h3 {
  color: #c49a58;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.vey-more-panel section {
  padding: 11px 0;
  border-bottom: 1px solid #ffffff0d;
}

.vey-more-panel section > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.vey-more-panel section button {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #514435;
  color: #d9d0c2;
  background: #0d0e13;
  text-align: left;
  font:
    700 10px Manrope,
    sans-serif;
  text-transform: uppercase;
}

.vey-sheet-close {
  width: 42px;
  height: 42px;
  border: 1px solid #685538;
  color: #eadcc8;
  background: #171419;
  font-size: 22px;
}

/* Consistent compact screen surfaces */
.location-screen,
.content,
.inventory-page,
.forge-page,
.collection-journal,
.public-profile,
.combat-screen,
.character-screen {
  max-width: none;
}

.location-heading,
.view-title,
.collection-heading {
  border-radius: var(--vey-radius);
}

.location-heading h1,
.view-title h1,
.collection-heading h1 {
  margin-block: 2px 5px;
  font-size: var(--vey-type-screen);
}

.location-heading p,
.view-title p,
.collection-heading p {
  margin-block: 3px;
  color: #b8afa2;
  font-size: var(--vey-type-body);
  line-height: 1.45;
}

.progress,
.objective-progress,
.journey-progress {
  height: 8px;
  border-radius: 1px;
  background: #17171d;
}

/* Boss Hunt joins the shared focus component. */
.boss-hunt-grid.vey-focus-track:not(.vey-view-all) {
  min-height: 0;
}

.boss-hunt-grid.vey-focus-track:not(.vey-view-all) > .boss-hunt-card {
  min-height: 0;
  height: 100%;
}

.boss-hunt-grid.vey-focus-track:not(.vey-view-all) > .vey-focus-current {
  background-position: center 20%;
}

/* Advanced shard inspection */
.rift-mod-row {
  position: relative;
}

.rift-mod-meta {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
}

body.shift-inspect .rift-mod-meta,
.rift-inspect.show-advanced .rift-mod-meta {
  display: grid;
}

.rift-mod-meta span {
  padding: 4px 5px;
  border: 1px solid #3d3343;
  color: #b7a8bf;
  background: #09090e;
  font:
    700 8px "DM Mono",
    monospace;
  text-align: center;
}

.rift-advanced-toggle {
  display: none;
  width: 100%;
  margin-top: 7px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }

  #view.view-enter,
  .vey-focus-track > * {
    animation: none;
    transition: none;
  }
}
/* Eternal Ascension — Citadel Reborn shell and reward experience. */
:root {
  --reborn-bg: #070807;
  --reborn-panel: #10110f;
  --reborn-panel-2: #171813;
  --reborn-line: rgba(206, 165, 91, 0.22);
  --reborn-line-hot: rgba(238, 190, 101, 0.62);
  --reborn-gold: #d7aa59;
  --reborn-ivory: #eee5d6;
  --reborn-muted: #9e978b;
  --reborn-green: #82b694;
  --reborn-red: #bd6670;
  --vey-nav-width: 212px;
  --vey-topbar-height: 74px;
  --vey-utility-height: 42px;
}

body {
  background:
    radial-gradient(circle at 74% 0%, rgba(110, 83, 42, 0.11), transparent 31%),
    linear-gradient(135deg, #090a09, #050605 72%);
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.22;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0 23px,
    rgba(255, 255, 255, 0.012) 24px 25px
  );
  pointer-events: none;
}

.sidebar {
  padding: 15px 11px 12px;
  border-right: 1px solid var(--reborn-line);
  background:
    radial-gradient(
      circle at 20% 8%,
      rgba(181, 134, 65, 0.12),
      transparent 27%
    ),
    linear-gradient(180deg, #11120f, #080907 72%);
  box-shadow: 16px 0 50px rgba(0, 0, 0, 0.24);
}

.brand {
  margin: 0 5px 15px;
  padding: 4px 8px 19px;
  border-bottom: 1px solid var(--reborn-line);
}

.brand-mark {
  color: #e3b35a;
  text-shadow: 0 0 20px rgba(224, 171, 79, 0.55);
}
.brand b {
  color: var(--reborn-ivory);
  letter-spacing: 0.16em;
}
.brand small {
  color: #8e816d;
}

#nav {
  gap: 6px;
}

.nav-item {
  min-height: 51px;
  padding: 8px 10px;
  border: 1px solid transparent;
  color: #9e998f;
  background: transparent;
}

.nav-item > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(180, 145, 83, 0.16);
  background: rgba(255, 255, 255, 0.018);
  color: #b89961;
}

.nav-item b {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-item small {
  display: block;
  margin-left: auto;
  color: #6f6b63;
  font-size: 7px;
}

.nav-item:hover {
  border-color: rgba(206, 165, 91, 0.24);
  color: #e6ddcd;
  background: rgba(186, 139, 65, 0.06);
}

.nav-item.active {
  border-color: rgba(210, 165, 84, 0.38);
  color: #f2e7d2;
  background: linear-gradient(
    90deg,
    rgba(174, 120, 47, 0.18),
    rgba(174, 120, 47, 0.025)
  );
  box-shadow:
    inset 3px 0 #d7a958,
    0 8px 24px rgba(0, 0, 0, 0.16);
}

.nav-item.active > span {
  border-color: rgba(225, 176, 88, 0.46);
  color: #f0c875;
}
.sidebar-bottom {
  border-top: 1px solid var(--reborn-line);
  color: #817b71;
}

.topbar {
  border-bottom: 1px solid var(--reborn-line);
  background: linear-gradient(
    180deg,
    rgba(20, 21, 18, 0.98),
    rgba(10, 11, 10, 0.96)
  );
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.global-hero {
  border: 0;
  border-right: 1px solid var(--reborn-line);
  background: transparent;
}

.global-hero__portrait {
  border-color: #735c36;
  box-shadow:
    0 0 0 3px #090a08,
    0 0 20px rgba(198, 151, 74, 0.15);
}
.global-hero__identity small {
  color: #aa8750;
}
.global-hero__identity b {
  color: #f0e8dc;
}
.global-hero__identity em,
.global-hero__xptext {
  color: #8c887f;
}
.global-hero__xp {
  background: #25221c;
}
.global-hero__xp span {
  background: linear-gradient(90deg, #85612e, #e0b35c);
}
.global-hero__power small {
  color: #81786a;
}
.global-hero__power b {
  color: #e9b95d;
}

.resources {
  gap: 7px;
}

.player-vital,
.resource {
  min-width: 70px;
  height: 40px;
  padding: 5px 9px;
  display: grid;
  align-content: center;
  border: 1px solid rgba(183, 150, 91, 0.19);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.026),
    rgba(0, 0, 0, 0.1)
  );
  text-align: center;
}

.player-vital small {
  color: #80796d;
  font: 600 7px "DM Mono";
  letter-spacing: 0.08em;
}
.player-vital b {
  color: #c98488;
  font: 700 11px "DM Mono";
}
.resource-art {
  width: 15px;
  height: 15px;
}

.header-icon,
.settings {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(194, 159, 95, 0.25);
  border-radius: 2px;
  color: #c7b38f;
  background: rgba(255, 255, 255, 0.025);
  font-size: 18px;
  cursor: pointer;
}

.header-icon:hover,
.settings:hover {
  border-color: var(--reborn-line-hot);
  color: #f0c873;
  background: rgba(210, 162, 79, 0.09);
}

.notification-button > i {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border: 2px solid #10110f;
  border-radius: 10px;
  color: #170d08;
  background: #db9f4c;
  font: 800 8px "DM Mono";
}

.notification-panel {
  position: fixed;
  z-index: 120;
  top: 68px;
  right: 12px;
  width: min(390px, calc(100vw - 24px));
  max-height: min(570px, calc(100dvh - 94px));
  overflow: auto;
  border: 1px solid #775d34;
  background: linear-gradient(145deg, #1a1914, #0b0c0a 75%);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.72);
}

.notification-panel[hidden] {
  display: none;
}
.notification-panel > header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px;
  border-bottom: 1px solid var(--reborn-line);
  background: rgba(16, 17, 14, 0.96);
}
.notification-panel header small {
  color: #b48b4c;
  font: 700 8px "DM Mono";
  letter-spacing: 0.16em;
}
.notification-panel h2 {
  margin: 2px 0 0;
  color: #eee4d4;
  font: 700 22px "Playfair Display";
}
.notification-panel header button {
  width: 34px;
  height: 34px;
  border: 1px solid #54442e;
  color: #d5c8b4;
  background: #11120f;
  font-size: 20px;
}

.notification-entry {
  width: 100%;
  min-height: 76px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #ddd5c7;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.notification-entry:hover {
  background: rgba(209, 164, 83, 0.07);
}
.notification-entry > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #5b4930;
  color: #d5a756;
  background: #13140f;
  font-style: normal;
}
.notification-entry span {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.notification-entry b {
  font-size: 11px;
}
.notification-entry small {
  color: #918b81;
  font-size: 9px;
  line-height: 1.4;
}
.notification-entry em {
  color: #a98954;
  font: 700 7px "DM Mono";
  font-style: normal;
}

.section-navigation {
  border-color: rgba(184, 143, 74, 0.17);
  background: #080907;
}
.section-navigation button {
  padding-inline: 14px;
}
.section-navigation button.active {
  color: #ebcb8d;
  border-bottom-color: #d2a14e;
  background: linear-gradient(180deg, transparent, rgba(189, 137, 58, 0.08));
}

.toast {
  top: 88px;
  right: 18px;
  bottom: auto;
  max-width: min(390px, calc(100vw - 36px));
  padding: 13px 16px 13px 42px;
  transform: translateX(calc(100% + 30px));
  border: 1px solid #80643a;
  border-radius: 2px;
  color: #efe4d2;
  background: #171712;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
}

.toast::before {
  position: absolute;
  left: 15px;
  content: "✦";
  color: #dfad56;
}
.toast.show {
  transform: translateX(0);
}

/* Missions: information remains visible without a giant illustration swallowing the screen. */
body[data-view="missions"] .phase135-missions {
  padding: 10px 14px 18px;
}
body[data-view="missions"] .tavern-heading {
  min-height: 86px !important;
  border: 1px solid var(--reborn-line);
  background-position: center 40%;
}
body[data-view="missions"] .quest-givers.phase17-focus-track {
  height: calc(100% - 98px);
}
body[data-view="missions"] .mission-focus-card {
  grid-template-columns: minmax(170px, 28%) minmax(0, 1fr) !important;
  border-color: rgba(190, 151, 83, 0.27);
  background: linear-gradient(120deg, #14140f, #0b0c0a);
}

body[data-view="missions"] .mission-focus-art {
  min-height: 0;
  max-height: none;
  overflow: hidden;
}
body[data-view="missions"] .mission-portrait {
  min-height: 0;
  height: 100%;
  background-size: cover;
  background-position: center 24%;
}
body[data-view="missions"] .mission-focus-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 45%, #10110e 100%),
    linear-gradient(0deg, rgba(7, 8, 7, 0.78), transparent 45%);
}
body[data-view="missions"] .mission-giver-identity {
  z-index: 2;
}
body[data-view="missions"] .mission-focus-content {
  padding: 13px 16px !important;
  overflow: auto;
}
body[data-view="missions"] .mission-focus-content header h2 {
  margin: 3px 0;
  font-size: clamp(22px, 2.2vw, 32px);
}
body[data-view="missions"] .mission-values {
  margin: 9px 0;
}
body[data-view="missions"] .mission-drop-preview {
  margin-top: 8px;
}

body[data-view="missions"] .mission-journey {
  min-height: 0;
  height: 100%;
  grid-template-rows: auto minmax(180px, 1fr) auto;
  border: 1px solid var(--reborn-line);
}

body[data-view="missions"] .mission-journey > header {
  padding: 14px 20px 8px;
}
body[data-view="missions"] .mission-journey > header h1 {
  font-size: clamp(27px, 3vw, 39px);
}
body[data-view="missions"] .mission-traveler {
  width: 145px;
  height: 105px;
}
body[data-view="missions"] .mission-journey.has-mount .mission-traveler {
  width: 108px;
  height: 108px;
}
body[data-view="missions"] .mission-journey > footer {
  padding: 10px 20px 14px;
}

body[data-view="missions"] .mission-complete {
  min-height: 0;
  height: 100%;
  padding: 20px;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body[data-view="missions"] .mission-complete > header h1 {
  font-size: clamp(29px, 3.3vw, 43px);
}
body[data-view="missions"] .mission-loot-result {
  min-height: 0;
  overflow: auto;
}

/* Combat reward chest: rewards stay unknown until the player opens it. */
.enemy-spoils {
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(140px, 0.65fr) minmax(210px, 1fr) minmax(
      150px,
      0.7fr
    );
  gap: 18px;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(213, 168, 84, 0.3);
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(205, 151, 56, 0.17),
      transparent 33%
    ),
    linear-gradient(145deg, #15150f, #090a08);
}

.spoils-source {
  display: grid;
  gap: 7px;
}
.spoils-source small,
.harvest-preview > small {
  color: #a9854d;
  font: 700 8px "DM Mono";
  letter-spacing: 0.14em;
}
.spoils-source b {
  color: #eee1ce;
  font: 700 24px "Playfair Display";
}
.spoils-source span {
  color: #8d877c;
  font-size: 9px;
}

.spoils-chest {
  min-height: 220px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 0;
  color: #e9d6b5;
  background: transparent;
  cursor: pointer;
}

.spoils-chest i {
  position: relative;
  width: 132px;
  height: 92px;
  display: block;
  border: 3px solid #8c6730;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(#59401f 0 28%, #302111 29% 100%);
  box-shadow:
    inset 0 0 0 5px #171008,
    0 22px 35px #000b,
    0 0 35px rgba(211, 158, 69, 0.16);
  transition:
    transform 0.2s,
    filter 0.2s;
}

.spoils-chest i::before {
  position: absolute;
  top: 33px;
  left: 50%;
  width: 25px;
  height: 30px;
  content: "";
  transform: translateX(-50%);
  border: 3px solid #c69b4c;
  background: #33200e;
}
.spoils-chest i::after {
  position: absolute;
  top: 21px;
  left: -5px;
  right: -5px;
  height: 8px;
  content: "";
  background: linear-gradient(90deg, #6c4d25, #d1a552, #6c4d25);
}
.spoils-chest:hover i {
  transform: translateY(-5px) scale(1.035);
  filter: brightness(1.2);
}
.spoils-chest b {
  font: 800 12px Manrope;
  letter-spacing: 0.13em;
}
.spoils-chest small {
  color: #8f877a;
  font-size: 8px;
}

.harvest-preview {
  display: grid;
  grid-template-columns: repeat(3, 32px);
  gap: 7px;
}
.harvest-preview > small,
.harvest-preview em {
  grid-column: 1/-1;
}
.harvest-preview span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px dashed #5a4b35;
  color: #756b5d;
  background: #0a0b09;
  font: 700 12px "DM Mono";
}
.harvest-preview em {
  color: #78736b;
  font-size: 8px;
  line-height: 1.5;
  font-style: normal;
}

.harvest-reveal {
  margin: 9px 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid rgba(132, 171, 116, 0.2);
  background: rgba(64, 85, 54, 0.09);
}
.harvest-reveal small {
  width: 100%;
  color: #87ad79;
  font: 700 8px "DM Mono";
  letter-spacing: 0.11em;
}
.harvest-reveal span {
  padding: 5px 8px;
  border: 1px solid rgba(130, 177, 112, 0.25);
  color: #afc6a7;
  background: #11170f;
  font-size: 8px;
}
.harvest-reveal em {
  width: 100%;
  color: #777f71;
  font-size: 7px;
  font-style: normal;
}
.harvest-reveal span b {
  display: inline;
  color: #d4e2cf;
  font-size: 9px;
}
.harvest-reveal span em {
  display: block;
  width: auto;
  margin-top: 2px;
  color: #718369;
}

.combat-rewards {
  scrollbar-color: #74582f #0c0d0a;
}
.combat-finished .combat-rewards {
  border-color: rgba(210, 166, 83, 0.3);
}

@media (min-width: 901px) {
  .topbar {
    grid-template-columns: minmax(290px, 1fr) minmax(150px, 260px) auto;
    padding: 0 13px;
  }
  .global-hero {
    height: 60px;
    grid-template-columns: 48px minmax(0, 1fr) 94px;
  }
  .global-hero__portrait {
    width: 46px;
    height: 46px;
  }
  .world-feed {
    border-color: rgba(197, 151, 74, 0.28);
    background: #080906;
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  :root {
    --vey-nav-width: 176px;
  }
  .nav-item small,
  .player-vital {
    display: none;
  }
  .resource {
    min-width: 54px;
  }
}

@media (max-width: 900px) {
  :root {
    --vey-topbar-height: 62px;
  }
  .topbar {
    min-height: 62px;
    height: 62px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .header-icon.notification-button {
    display: grid;
    width: 36px;
    height: 36px;
  }
  .player-vital,
  .resource.energy {
    display: none;
  }
  .settings {
    display: grid;
    width: 36px;
    height: 36px;
  }
  .resources {
    align-items: center;
  }
  .resource {
    min-width: 38px;
    height: 36px;
    padding: 4px;
  }
  .notification-panel {
    top: 58px;
    right: 7px;
    width: calc(100vw - 14px);
  }
  .toast {
    top: 70px;
    right: 8px;
    max-width: calc(100vw - 16px);
  }
  body[data-view="missions"] .phase135-missions {
    padding: 7px 7px 86px;
  }
  body[data-view="missions"] .mission-focus-card {
    grid-template-columns: 1fr !important;
  }
  body[data-view="missions"] .mission-focus-art {
    height: 128px;
    min-height: 128px;
  }
  body[data-view="missions"] .mission-portrait {
    background-position: center 20%;
  }
  body[data-view="missions"] .mission-focus-content {
    padding: 10px !important;
  }
  body[data-view="missions"] .mission-traveler {
    width: 112px;
    height: 82px;
  }
  .enemy-spoils {
    min-height: 360px;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 13px;
    text-align: center;
  }
  .spoils-source {
    justify-items: center;
  }
  .spoils-chest {
    min-height: 185px;
  }
  .harvest-preview {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spoils-chest i {
    transition: none;
  }
}
/* Adventure Core */
.expedition-screen {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(9px, 1vw, 16px);
  color: #e9eef7;
  background:
    radial-gradient(
      circle at 55% -10%,
      rgba(48, 88, 101, 0.2),
      transparent 38%
    ),
    #070b12;
}
.expedition-screen,
.expedition-screen * {
  box-sizing: border-box;
}
.expedition-screen button:focus-visible {
  outline: 2px solid #8fe4d4;
  outline-offset: 2px;
}
.adventure-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 38px minmax(0, 1fr);
  gap: 8px;
}
.adventure-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 150px));
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid #2a3540;
}
.adventure-tabs button {
  min-width: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #83919e;
  background: transparent;
  font:
    700 10px "DM Mono",
    monospace;
  letter-spacing: 0.11em;
}
.adventure-tabs button.active {
  border-bottom-color: #81d8ca;
  color: #eefaf7;
  background: linear-gradient(180deg, transparent, rgba(84, 185, 169, 0.12));
}
.adventure-screen > .adventure-tabs {
  grid-column: 1;
  grid-row: 1;
}
.adventure-screen > .adventure-explore,
.adventure-screen > .adventure-quests,
.adventure-screen > .adventure-bosses {
  grid-column: 1;
  grid-row: 2;
}
.adventure-explore,
.adventure-bosses,
.adventure-quests {
  min-width: 0;
  min-height: 0;
}
.adventure-explore {
  position: relative;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) auto;
  gap: 8px;
}
.adventure-explore > .adventure-focus-nav {
  grid-column: 1;
  grid-row: 1;
}
.adventure-explore > .adventure-region-focus {
  grid-column: 1;
  grid-row: 2;
}
.adventure-explore > .adventure-expedition-dock {
  grid-column: 1;
  grid-row: 3;
}
.adventure-focus-nav {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(90px, 1fr) minmax(220px, 2fr) minmax(90px, 1fr)
    auto;
  align-items: stretch;
  border: 1px solid #263442;
  background: linear-gradient(90deg, #090f17, #111923, #090f17);
}
.adventure-rune {
  min-width: 0;
  border: 0;
  color: #9aabb8;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  font:
    700 9px "DM Mono",
    monospace;
  letter-spacing: 0.1em;
}
.adventure-rune.next {
  justify-content: flex-end;
}
.adventure-rune i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid #77cabe;
  transform: rotate(45deg);
  background: #102321;
}
.adventure-focus-title {
  min-width: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.adventure-focus-title small {
  color: #6ebdb2;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.12em;
}
.adventure-focus-title b {
  overflow: hidden;
  color: #f2f5f7;
  font:
    700 clamp(14px, 1.4vw, 20px) "Playfair Display",
    serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-all-regions {
  align-self: center;
  min-height: 30px;
  margin: 0 7px;
  padding: 5px 10px;
}
.adventure-region-focus {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  border: 1px solid #2c3947;
  background: #090e15;
  box-shadow: inset 0 0 0 1px rgba(201, 166, 94, 0.06);
}
.adventure-region-artwork {
  position: absolute;
  z-index: -1;
  inset: 0;
  min-width: 0;
  min-height: 100%;
  background:
    linear-gradient(90deg, rgba(3, 7, 11, 0.12), rgba(3, 7, 11, 0.56) 100%),
    linear-gradient(0deg, rgba(4, 8, 13, 0.52), transparent 62%),
    var(--region-art) center/cover no-repeat;
  transform: scale(1.01);
}
.adventure-region-info {
  position: absolute;
  z-index: 1;
  inset: 13px 13px 13px auto;
  width: min(380px, 42%);
  min-width: 0;
  min-height: 0;
  padding: clamp(10px, 1vw, 16px);
  display: grid;
  grid-template-rows: auto auto minmax(44px, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  border: 1px solid rgba(119, 151, 159, 0.42);
  background: linear-gradient(
    145deg,
    rgba(8, 14, 21, 0.8),
    rgba(5, 10, 16, 0.91)
  );
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px) saturate(0.84);
}
.adventure-region-info > header,
.adventure-expedition-dock > header,
.adventure-quests > header,
.expedition-loot-bag > header,
.expedition-total-loot > header,
.expedition-feed > header {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.adventure-region-info > header span {
  min-width: 0;
}
.adventure-region-info > header small,
.adventure-region-info > section > small,
.adventure-expedition-dock header small {
  color: #75c8bc;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.12em;
}
.adventure-region-info h1 {
  margin: 2px 0 0;
  overflow: hidden;
  font:
    700 clamp(22px, 2vw, 34px) "Playfair Display",
    serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-region-info > header > b {
  flex: 0 0 auto;
  color: #76958f;
  font:
    700 8px "DM Mono",
    monospace;
}
.region-core-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.region-core-stats span {
  padding: 6px 8px;
  border: 1px solid rgba(83, 111, 124, 0.46);
  background: rgba(5, 11, 17, 0.54);
}
.region-core-stats small,
.adventure-expedition-dock dt,
.expedition-region-panel dt,
.adventure-boss-copy dt {
  display: block;
  color: #758898;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
}
.region-core-stats b {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}
.adventure-mystery-copy {
  align-self: center;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8899a6;
  font-size: 11px;
  line-height: 1.45;
}
.adventure-mystery-copy i {
  flex: 0 0 auto;
  color: #c99d4c;
  font-style: normal;
}
.adventure-boss-status {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(99, 118, 132, 0.48);
  background: rgba(5, 10, 16, 0.62);
}
.adventure-boss-status.discovered {
  border-color: #8f7541;
  background: linear-gradient(
    100deg,
    rgba(115, 82, 29, 0.3),
    rgba(5, 10, 16, 0.7)
  );
}
.adventure-boss-status span {
  min-width: 0;
  display: grid;
}
.adventure-boss-status small {
  color: #b9954e;
  font:
    700 8px "DM Mono",
    monospace;
}
.adventure-boss-status b,
.adventure-boss-status em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-boss-status b {
  font-size: 12px;
}
.adventure-boss-status em {
  color: #8898a5;
  font-size: 9px;
}
.adventure-boss-status .button {
  flex: 0 0 auto;
  min-height: 29px;
  padding: 4px 8px;
  font-size: 8px;
}
.adventure-expedition-dock {
  min-width: 0;
  display: grid;
  grid-template-columns: 120px minmax(320px, 1fr) minmax(260px, 0.75fr) minmax(
      160px,
      0.42fr
    );
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #2c3b48;
  background: linear-gradient(100deg, #101923, #090e15);
}
.adventure-expedition-dock h2 {
  margin: 2px 0 0;
  font:
    700 17px "Playfair Display",
    serif;
}
.adventure-expedition-dock > header > b {
  display: none;
}
.expedition-duration-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.expedition-duration {
  min-width: 0;
  min-height: 58px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 0 4px;
  border: 1px solid #344351;
  background: #090f17;
  color: #dbe5ef;
  text-align: left;
  overflow: hidden;
}
.expedition-duration b {
  grid-row: 1 / 3;
  align-self: center;
  color: #fff;
  font-size: 22px;
}
.expedition-duration small {
  color: #76cdbf;
  font:
    700 8px "DM Mono",
    monospace;
  white-space: nowrap;
}
.expedition-duration em {
  color: #7f8d9d;
  font:
    700 8px "DM Mono",
    monospace;
  white-space: nowrap;
}
.expedition-duration.selected {
  border-color: #79d8c8;
  background: linear-gradient(145deg, #173832, #0d1820);
  box-shadow: inset 0 0 15px rgba(91, 211, 190, 0.12);
}
.adventure-expedition-dock dl,
.expedition-region-panel dl,
.adventure-boss-copy dl {
  min-width: 0;
  display: grid;
  gap: 5px;
  margin: 0;
}
.adventure-expedition-dock dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.adventure-expedition-dock dl div,
.expedition-region-panel dl div,
.adventure-boss-copy dl div {
  min-width: 0;
  padding: 6px;
  border: 1px solid #202e39;
  background: #080d14;
}
.adventure-expedition-dock dd,
.expedition-region-panel dd,
.adventure-boss-copy dd {
  margin: 2px 0 0;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 10px;
  font-weight: 700;
}
.adventure-expedition-dock dd {
  white-space: nowrap;
}
.expedition-start {
  width: 100%;
  min-width: 0;
  min-height: 42px;
}
.adventure-region-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 5, 9, 0.82);
  backdrop-filter: blur(5px);
}
.adventure-region-dialog {
  width: min(920px, 100%);
  max-height: 100%;
  min-width: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid #5f755f;
  background: #090e15;
  box-shadow: 0 20px 70px #000;
}
.adventure-region-dialog > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}
.adventure-region-dialog h2 {
  margin: 2px 0 0;
}
.adventure-region-dialog > header > button {
  width: 34px;
  height: 34px;
  border: 1px solid #3c4b57;
  background: #0d151e;
  color: #fff;
  font-size: 20px;
}
.adventure-region-dialog > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.adventure-region-option {
  min-width: 0;
  min-height: 72px;
  padding: 5px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  border: 1px solid #283642;
  background: #0b1119;
  color: #dce6ec;
  text-align: left;
}
.adventure-region-option.selected {
  border-color: #72cabe;
  background: #11231f;
}
.adventure-region-option.locked {
  opacity: 0.55;
}
.adventure-region-option > i {
  align-self: stretch;
  background:
    linear-gradient(90deg, transparent, #0b1119),
    var(--region-thumb) center/cover;
}
.adventure-region-option span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.adventure-region-option small,
.adventure-region-option em {
  font:
    700 8px "DM Mono",
    monospace;
}
.adventure-region-option small {
  color: #6f8794;
}
.adventure-region-option b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-region-option em {
  color: #78b7ad;
}
.adventure-region-option u {
  color: #66747e;
  text-decoration: none;
  text-align: center;
}
.adventure-region-option u.discovered {
  color: #d1ab5d;
}
.adventure-quests {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 36px minmax(0, 1fr);
  gap: 8px;
}
.adventure-quests > header {
  padding: 4px 2px;
}
.adventure-quests h1 {
  margin: 2px 0 0;
  font:
    700 clamp(24px, 2.2vw, 36px) "Playfair Display",
    serif;
}
.adventure-quests > header > span {
  color: #7acabe;
  font:
    700 9px "DM Mono",
    monospace;
}
.adventure-questgivers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.adventure-questgiver {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid #273541;
  background: #0a1018;
}
.adventure-questgiver img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid #445563;
  object-fit: cover;
}
.adventure-questgiver span {
  min-width: 0;
  display: grid;
}
.adventure-questgiver b,
.adventure-questgiver small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-questgiver small {
  color: #8494a0;
  font-size: 9px;
}
.adventure-quest-filters {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #2a3540;
}
.adventure-quest-filters button {
  border: 0;
  border-bottom: 2px solid transparent;
  color: #82919d;
  background: transparent;
  font:
    700 9px "DM Mono",
    monospace;
}
.adventure-quest-filters button.active {
  border-bottom-color: #77d0c2;
  color: #fff;
}
.adventure-quest-scroll {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
}
.adventure-quest-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 8px;
  align-items: start;
}
.adventure-quest-card {
  min-width: 0;
  min-height: 248px;
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 7px;
  border: 1px solid #2c3945;
  background: linear-gradient(145deg, #101821, #080d13);
}
.adventure-quest-art {
  position: relative;
  min-width: 0;
  height: 76px;
  overflow: hidden;
  border: 1px solid #31414e;
  background:
    linear-gradient(0deg, rgba(5, 9, 14, 0.92), transparent 70%),
    var(--quest-art) center 35% / cover no-repeat;
}
.adventure-quest-art span {
  position: absolute;
  left: 8px;
  bottom: 6px;
  color: #a6ded5;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
}
.adventure-quest-card.active {
  border-color: #4a8f85;
}
.adventure-quest-card.ready {
  border-color: #b99852;
}
.adventure-quest-card.complete {
  opacity: 0.72;
}
.adventure-quest-card > header {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 26px;
  gap: 8px;
  align-items: center;
}
.adventure-quest-card > header img {
  width: 38px;
  height: 38px;
  border: 1px solid #425462;
  object-fit: cover;
}
.adventure-quest-card > header span {
  min-width: 0;
}
.adventure-quest-card h3 {
  margin: 1px 0 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-quest-card header small,
.quest-region,
.adventure-quest-card footer small {
  color: #798c99;
  font:
    700 8px "DM Mono",
    monospace;
}
.quest-inspect {
  width: 25px;
  height: 25px;
  border: 1px solid #41515e;
  border-radius: 50%;
  background: #0d151e;
  color: #b9c8d1;
}
.quest-region {
  color: #75c7bb;
}
.adventure-quest-card ul {
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}
.adventure-quest-card li span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 10px;
}
.adventure-quest-card li em {
  flex: 0 0 auto;
  color: #8798a4;
}
.adventure-quest-card li > i {
  height: 3px;
  display: block;
  overflow: hidden;
  background: #1a2731;
}
.adventure-quest-card li > i > u {
  height: 100%;
  display: block;
  background: #66bbae;
}
.quest-category-label {
  justify-self: start;
  padding: 3px 6px;
  border: 2px double #59c8bd;
  color: #8ff0df;
  background: #102b2b;
  font:
    700 8px "DM Mono",
    monospace;
  letter-spacing: 0.08em;
}
.adventure-quest-card footer {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 8px;
}
.adventure-quest-card footer > span {
  min-width: 0;
  display: grid;
}
.adventure-quest-card footer b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adventure-quest-card footer .button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 8px;
}
.adventure-bosses {
  height: 100%;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  gap: 8px;
}
.adventure-bosses .adventure-focus-nav {
  grid-template-columns: minmax(90px, 1fr) minmax(220px, 2fr) minmax(90px, 1fr);
}
.adventure-boss-focus {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.75fr);
  overflow: hidden;
  border: 1px solid #443c32;
  background: #090d13;
}
.adventure-boss-art {
  min-width: 0;
  min-height: 300px;
  background:
    linear-gradient(90deg, transparent 55%, #090d13 100%),
    linear-gradient(0deg, rgba(5, 7, 11, 0.45), transparent),
    var(--boss-art) center/cover;
}
.adventure-boss-focus.undiscovered .adventure-boss-art {
  filter: grayscale(1) brightness(0.28);
}
.adventure-boss-focus.undiscovered .adventure-boss-art i {
  width: 150px;
  height: 210px;
  display: block;
  margin: 12% auto 0;
  background: #020407;
  clip-path: polygon(
    50% 0,
    70% 17%,
    76% 43%,
    100% 100%,
    0 100%,
    24% 43%,
    30% 17%
  );
}
.adventure-boss-copy {
  min-width: 0;
  align-self: center;
  padding: clamp(18px, 2.3vw, 38px);
}
.adventure-boss-copy h1 {
  margin: 5px 0 8px;
  font:
    700 clamp(30px, 3.4vw, 52px) "Playfair Display",
    serif;
}
.adventure-boss-copy p {
  color: #9aa8b2;
  line-height: 1.5;
}
.adventure-boss-copy dl {
  grid-template-columns: 1fr 1fr;
  margin: 15px 0;
}
.adventure-boss-copy dl div:first-child,
.adventure-boss-copy dl div:nth-child(2),
.adventure-boss-copy dl div:last-child {
  grid-column: 1 / -1;
}
.adventure-boss-copy dd {
  font-size: 11px;
  line-height: 1.35;
}
.adventure-boss-cta {
  width: 100%;
  min-height: 44px;
}
.boss-requirement {
  display: block;
  margin-top: 7px;
  color: #9a8b77;
  text-align: center;
}
.expedition-active-header {
  min-width: 0;
  min-height: 100px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #293746;
  background:
    linear-gradient(
      90deg,
      rgba(5, 9, 15, 0.96),
      rgba(5, 9, 15, 0.62),
      rgba(5, 9, 15, 0.88)
    ),
    var(--region-art) center/cover;
}
.expedition-active-header h1,
.expedition-report-header h1 {
  margin: 2px 0;
  font:
    700 clamp(26px, 2.6vw, 42px) "Playfair Display",
    serif;
}
.expedition-active-header p,
.expedition-report-header p {
  margin: 3px 0 0;
  color: #96a5b1;
}
.expedition-clock {
  text-align: right;
}
.expedition-clock b {
  display: block;
  color: #8be0d2;
  font-size: 25px;
}
.expedition-clock small {
  color: #9aa9b8;
  font-size: 9px;
}
.expedition-progress {
  height: 4px;
  background: #111b25;
}
.expedition-progress i {
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #3a8d82, #a0eadc);
}
.adventure-screen.active {
  grid-template-rows: 38px auto auto minmax(0, 1fr) auto;
}
.adventure-screen.active > .expedition-active-header {
  grid-column: 1;
  grid-row: 2;
}
.adventure-screen.active > .expedition-journey {
  grid-column: 1;
  grid-row: 3;
}
.adventure-screen.active > .adventure-active-grid {
  grid-column: 1;
  grid-row: 4;
}
.adventure-screen.active > .expedition-loot-bag {
  grid-column: 1;
  grid-row: 5;
}
.adventure-active-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
  gap: 8px;
}
.expedition-region-panel,
.expedition-feed,
.expedition-loot-bag,
.expedition-total-loot {
  min-width: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid #263545;
  background: linear-gradient(
    145deg,
    rgba(17, 25, 37, 0.97),
    rgba(8, 13, 20, 0.98)
  );
}
.expedition-region-art {
  height: calc(100% - 72px);
  min-height: 105px;
  border: 1px solid #354455;
  background:
    linear-gradient(0deg, rgba(7, 11, 18, 0.3), transparent),
    var(--region-art) center/cover;
}
.expedition-region-panel dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 7px;
}
.expedition-feed {
  display: flex;
  flex-direction: column;
}
.expedition-feed h2,
.expedition-loot-bag h2,
.expedition-total-loot h2 {
  margin: 2px 0 0;
  font-size: 16px;
}
.expedition-feed ol {
  min-height: 0;
  margin: 7px 0 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
}
.expedition-event {
  min-width: 0;
  display: grid;
  grid-template-columns: 43px 26px minmax(0, 1fr);
  gap: 7px;
  padding: 7px 3px;
  border-top: 1px solid #202d39;
}
.expedition-event time {
  color: #738494;
  font-size: 9px;
}
.expedition-event span {
  min-width: 0;
  display: grid;
}
.expedition-event b,
.expedition-event small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expedition-event small {
  margin-top: 2px;
  color: #94a4b3;
  font-size: 9px;
}
.expedition-event.boss-discovery {
  border: 1px solid #b28e43;
  background: rgba(154, 118, 45, 0.12);
}
.expedition-event-icon {
  position: relative;
  width: 19px;
  height: 19px;
  border: 1px solid #58837d;
  transform: rotate(45deg);
  background: #10211f;
}
.expedition-event-icon:after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #8dd7cc;
}
.expedition-event-icon.event-enemy_encounter,
.expedition-event-icon.event-elite_encounter {
  border-radius: 50%;
  transform: none;
  border-color: #9a5656;
  background: #2b1418;
}
.expedition-event-icon.event-chest_found {
  transform: none;
  border-color: #b99b55;
  background: linear-gradient(#5c4824 48%, #1a1510 49%);
}
.expedition-event-icon.event-boss_discovered {
  border-color: #d6aa52;
  background: #39290f;
}
.expedition-event-icon.event-shard_found {
  border-color: #956ed0;
  background: #28183e;
}
.expedition-event-icon.event-quest_event {
  border-color: #52c9bd;
  background: #123a38;
}
.expedition-loot-bag {
  max-height: 155px;
  overflow: hidden;
}
.expedition-loot-bag > header > b {
  min-width: 0;
  overflow: hidden;
  color: #81919d;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expedition-loot-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 5px;
  margin-top: 7px;
  overflow-y: auto;
  overflow-x: hidden;
}
.expedition-loot-bag .expedition-loot-grid {
  max-height: 77px;
}
.expedition-loot-slot {
  position: relative;
  min-width: 0;
  min-height: 68px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #334354;
  background: #09111a;
  color: #dce6ed;
  text-align: center;
}
.expedition-loot-slot > i {
  width: 35px;
  height: 35px;
  display: block;
  background: var(--loot-art) center/contain no-repeat;
}
.expedition-loot-slot > b {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 2px 3px;
  background: #071018;
  font-size: 9px;
}
.expedition-loot-slot small {
  width: 100%;
  overflow: hidden;
  font-size: 8px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expedition-loot-slot.quest-item {
  border: 2px double #59c8bd;
  background: linear-gradient(135deg, #12332f, #111820);
}
.expedition-loot-slot.quest-item > i {
  width: 30px;
  height: 35px;
  background: linear-gradient(135deg, #c7aa6b, #77603a);
  clip-path: polygon(12% 0, 88% 0, 100% 20%, 90% 100%, 10% 100%, 0 20%);
}
.expedition-loot-slot.shard {
  border-color: #936dcc;
}
.expedition-loot-slot.crystal {
  border-color: #5ab7d6;
}
.expedition-loot-bag footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
.expedition-loot-bag footer span {
  display: none;
}
.adventure-screen.report {
  grid-template-rows: 38px auto auto auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.adventure-screen.report > .expedition-report-header {
  grid-column: 1;
  grid-row: 2;
}
.adventure-screen.report > .expedition-journey {
  grid-column: 1;
  grid-row: 3;
}
.adventure-screen.report > .expedition-report-stats {
  grid-column: 1;
  grid-row: 4;
}
.adventure-screen.report > .expedition-report-quests {
  grid-column: 1;
  grid-row: 5;
}
.adventure-screen.report > .expedition-total-loot {
  grid-column: 1;
  grid-row: 6;
}
.adventure-screen.report > .expedition-report-actions {
  grid-column: 1;
  grid-row: 7;
}
.expedition-report-header {
  padding: 12px;
  border: 1px solid #997d43;
  background:
    radial-gradient(circle at 50% 0, rgba(199, 165, 88, 0.2), transparent 58%),
    #0c121b;
  text-align: center;
}
.expedition-report-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}
.expedition-report-stats span {
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid #2c3b4a;
  background: #0c131d;
  text-align: center;
}
.expedition-report-stats small {
  display: block;
  color: #8495a5;
  font-size: 7px;
}
.expedition-report-stats b {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.expedition-report-quests {
  min-width: 0;
  padding: 8px;
  border: 1px solid #31534f;
  background: #0a1517;
}
.expedition-report-quests h2 {
  margin: 2px 0 6px;
  font-size: 13px;
}
.expedition-report-quests > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 5px;
}
.expedition-report-quests article {
  min-width: 0;
  padding: 5px;
  display: grid;
  gap: 2px;
  border: 1px solid #31514e;
  background: #091512;
}
.expedition-report-quests article span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  color: #a8bab8;
  font-size: 9px;
}
.expedition-total-loot {
  overflow-y: auto;
  overflow-x: hidden;
}
.expedition-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@media (min-width: 901px) and (max-width: 1500px) {
  .adventure-expedition-dock {
    grid-template-columns: 105px minmax(280px, 1fr) minmax(235px, 0.72fr);
  }
  .adventure-expedition-dock .expedition-start {
    grid-column: 1 / -1;
    min-height: 34px;
  }
  .adventure-region-focus {
    min-height: 0;
  }
  .adventure-region-info {
    width: min(355px, 44%);
  }
  .adventure-region-info {
    padding: 9px;
    gap: 5px;
  }
  .adventure-region-artwork {
    min-height: 100%;
  }
}
@media (min-width: 901px) and (max-height: 760px) {
  .adventure-screen {
    gap: 5px;
  }
  .adventure-explore {
    grid-template-rows: 40px minmax(0, 1fr) auto;
    gap: 5px;
  }
  .adventure-focus-nav,
  .adventure-bosses {
    grid-template-rows: 40px minmax(0, 1fr);
  }
  .adventure-region-artwork {
    min-height: 100%;
  }
  .adventure-region-info {
    grid-template-rows: auto auto minmax(38px, 1fr) auto;
  }
  .adventure-expedition-dock {
    padding: 5px;
  }
  .expedition-duration {
    min-height: 51px;
  }
  .expedition-active-header {
    min-height: 82px;
    padding-block: 9px;
  }
}
@media (min-width: 901px) and (max-height: 850px) {
  .adventure-boss-copy {
    padding: 14px 18px;
  }
  .adventure-boss-copy h1 {
    margin-block: 3px 5px;
    font-size: clamp(30px, 3vw, 40px);
  }
  .adventure-boss-copy p {
    margin-block: 5px;
    font-size: 11px;
  }
  .adventure-boss-copy dl {
    gap: 3px;
    margin-block: 7px;
  }
  .adventure-boss-copy dl div {
    padding: 4px 6px;
  }
  .adventure-boss-copy dd {
    font-size: 10px;
  }
  .adventure-boss-cta {
    min-height: 36px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .expedition-screen * {
    animation: none;
    transition: none;
  }
}