/* Saga Ninja V3 — arquivo de cacada, runas e recompensas em uma unica tela. */
.xp-saga-overlay {
  padding: 12px !important;
  background:
    radial-gradient(circle at 50% 4%, rgba(153, 105, 37, .25), transparent 36%),
    rgba(1, 4, 5, .95) !important;
}

.xp-saga-window.nrmt-ui-frame-safe {
  width: min(1460px, calc(100vw - 24px)) !important;
  height: min(900px, calc(100vh - 24px)) !important;
  padding: 18px !important;
  border-radius: 0 !important;
  background: #05090a !important;
}

.xp-saga-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(199, 149, 69, .34);
  background: #070b0d;
}

.xp-saga-head.xp-saga-hero,
.xp-saga-window.nrmt-ui-frame-safe > .xp-saga-content > .xp-saga-head.xp-saga-hero {
  position: relative;
  min-height: 140px;
  height: 140px;
  flex: 0 0 140px !important;
  align-items: flex-end;
  padding: 20px 76px 18px 30px !important;
  overflow: hidden;
  border: 0 !important;
  border-bottom: 1px solid rgba(213, 165, 76, .58) !important;
  background:
    linear-gradient(90deg, rgba(3, 7, 8, .94) 0%, rgba(3, 7, 8, .72) 35%, rgba(3, 7, 8, .12) 67%, rgba(3, 7, 8, .38) 100%),
    linear-gradient(0deg, rgba(3, 6, 7, .76), transparent 64%),
    url('/assets/images/saga-archive-keyart-v1.png?v=1') 50% 52% / cover no-repeat !important;
  box-shadow: inset 0 0 42px #000, inset 0 -22px 34px rgba(0, 0, 0, .72);
}

.xp-saga-head.xp-saga-hero::before,
.xp-saga-head.xp-saga-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.xp-saga-head.xp-saga-hero::before {
  inset: 7px;
  border: 1px solid rgba(210, 163, 74, .35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .72);
}

.xp-saga-head.xp-saga-hero::after {
  left: 28px;
  bottom: 13px;
  width: 245px;
  height: 1px;
  background: linear-gradient(90deg, #d8a749, transparent);
}

.xp-saga-hero-copy,
.xp-saga-hero-actions,
.xp-saga-head.xp-saga-hero > [data-xp-close] {
  position: relative;
  z-index: 1;
}

.xp-saga-hero-copy {
  align-self: center;
  max-width: 540px;
  margin-right: auto !important;
  text-shadow: 0 2px 4px #000, 0 0 14px #000;
}

.xp-saga-hero-copy small {
  color: #dcb862 !important;
  font-size: 8px !important;
  letter-spacing: .18em !important;
}

.xp-saga-hero-copy h1 {
  margin: 7px 0 4px !important;
  color: #f2d388 !important;
  font: italic 900 34px/1 NinjaTitle, Georgia, serif !important;
  letter-spacing: .05em !important;
}

.xp-saga-hero-copy p {
  margin: 0;
  color: #aeb9b8;
  font-size: 10px;
}

.xp-saga-hero-actions {
  display: flex;
  flex-direction: row !important;
  align-items: stretch;
  gap: 7px;
}

.xp-saga-hero-actions > span {
  min-width: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(200, 153, 65, .4);
  background: rgba(3, 7, 8, .86);
  text-align: center;
  box-shadow: inset 0 0 12px #000;
}

.xp-saga-hero-actions > span small {
  color: #748180 !important;
  font-size: 6px !important;
  letter-spacing: .12em !important;
}

.xp-saga-hero-actions > span b {
  margin-top: 4px;
  color: #e7c069;
  font-size: 14px;
}

.xp-saga-hero-actions [data-saga-claim-all] {
  min-width: 176px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 16px 8px 43px;
  border: 1px solid #d2a24a;
  border-radius: 0;
  background:
    radial-gradient(circle at 23px 50%, rgba(112, 210, 235, .68) 0 3px, rgba(46, 137, 163, .28) 4px 12px, transparent 13px),
    linear-gradient(180deg, rgba(96, 67, 17, .96), rgba(47, 31, 8, .98));
  color: #ffe09a;
  cursor: pointer;
  box-shadow: inset 0 0 13px #000, 0 0 13px rgba(212, 159, 55, .13);
}

.xp-saga-hero-actions [data-saga-claim-all] strong { font-size: 9px; letter-spacing: .08em; }
.xp-saga-hero-actions [data-saga-claim-all] small { margin-top: 3px; color: #c5ab72 !important; font-size: 6px !important; }
.xp-saga-hero-actions [data-saga-claim-all]:not(:disabled):hover { filter: brightness(1.2); transform: translateY(-1px); }
.xp-saga-hero-actions [data-saga-claim-all]:disabled { border-color: #42494a; background: rgba(8, 13, 14, .88); color: #697373; cursor: default; }

.xp-saga-head.xp-saga-hero > [data-xp-close] {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 38px !important;
  height: 38px !important;
}

.xp-saga-command {
  min-height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 17px !important;
  border: 0 !important;
  border-bottom: 1px solid #293335 !important;
  background: linear-gradient(90deg, #111719, #080d0f 72%) !important;
}

.xp-saga-command > div { display: flex; align-items: center; gap: 15px; }
.xp-saga-command b { color: #d9b45f !important; font-size: 9px; letter-spacing: .08em; }
.xp-saga-command span { color: #7f8b8b !important; font-size: 8px; }
.xp-saga-command > strong { display: flex; align-items: center; gap: 7px; color: #7fd0e4; font-size: 8px; }
.xp-saga-command > strong i { width: 7px; height: 7px; border-radius: 50%; background: #75d7ee; box-shadow: 0 0 10px #75d7ee; }

.xp-saga-layout {
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 450px !important;
  border: 0 !important;
  background: #070b0d !important;
}

.xp-saga-layout > main {
  min-width: 0;
  padding: 12px 12px 10px !important;
  border-right: 1px solid rgba(199, 149, 69, .24) !important;
  background:
    radial-gradient(circle at 45% 15%, rgba(55, 113, 126, .07), transparent 32%),
    #090e10 !important;
}

.xp-saga-search {
  height: 38px !important;
  margin-bottom: 10px !important;
}

.xp-saga-search input,
.xp-saga-search button {
  border-radius: 0 !important;
  border-color: #344043 !important;
  background: #060a0c !important;
}

.xp-saga-search input { padding-left: 14px !important; color: #d9e0df !important; }
.xp-saga-search button { color: #778282 !important; letter-spacing: .06em; }
.xp-saga-search button.is-active { border-color: #a77c35 !important; color: #edc870 !important; box-shadow: inset 3px 0 #cf9a42 !important; }

.xp-saga-grid {
  height: calc(100% - 48px) !important;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)) !important;
  gap: 9px !important;
  padding: 1px 7px 12px 1px !important;
  scrollbar-color: #9a7030 #101719;
}

.xp-saga-card,
.xp-saga-card.nrmt-ui-ornate-card {
  position: relative;
  min-height: 158px !important;
  padding: 14px 8px 10px !important;
  overflow: hidden;
  border: 1px solid #303a3c !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(55, 104, 114, .17), transparent 40%),
    linear-gradient(180deg, #11191b, #090d0f) !important;
  box-shadow: inset 0 0 17px #000 !important;
  transition: border-color .15s, transform .15s, filter .15s;
}

.xp-saga-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(209, 162, 74, .1);
  pointer-events: none;
}

.xp-saga-card:hover { transform: translateY(-2px); border-color: #8c6a32 !important; filter: brightness(1.08); }
.xp-saga-card img { width: 66px !important; height: 74px !important; margin-top: 2px; filter: drop-shadow(0 8px 6px #000); }
.xp-saga-card b { z-index: 1; color: #e2d2ad !important; font: 800 9px/1.2 NinjaTitle, Georgia, serif !important; }
.xp-saga-card > i { z-index: 1; width: 84% !important; height: 4px !important; background: #1e292b !important; }
.xp-saga-card > i u { background: linear-gradient(90deg, #9e6a24, #d9af50, #75bfd3) !important; }
.xp-saga-card > span:not(.xp-saga-card__rank) { z-index: 1; color: #768181 !important; font-size: 6px !important; }
.xp-saga-card > span strong { color: #dcb65f; }
.xp-saga-card__rank { position: absolute; z-index: 2; top: 8px; left: 9px; color: #758283 !important; font-size: 6px !important; font-weight: 800; }
.xp-saga-card.is-selected { border-color: #78bfd2 !important; box-shadow: inset 3px 0 #78bfd2, inset 0 0 20px #000, 0 0 15px rgba(89, 178, 204, .2) !important; }
.xp-saga-card.is-complete { border-color: rgba(107, 177, 121, .48) !important; }
.xp-saga-card.is-ready > em { z-index: 3; top: 7px !important; right: 6px !important; padding: 4px 5px !important; border: 1px solid #e4bd6a !important; border-radius: 0 !important; background: #65420e !important; color: #ffe4a1 !important; }

.xp-saga-layout > aside {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px !important;
  overflow: auto !important;
  border-left: 0 !important;
  background:
    radial-gradient(circle at 52% 12%, rgba(98, 70, 127, .16), transparent 27%),
    linear-gradient(180deg, #101719, #070b0d 74%) !important;
}

.xp-saga-layout > aside > [data-saga-detail] { flex: 0 0 auto; }
.xp-saga-detail { padding: 7px; border: 1px solid #303b3e; background: rgba(4, 8, 9, .72); text-align: left !important; }
.xp-saga-detail-top { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 10px; }
.xp-saga-detail-portrait { width: 72px !important; height: 78px !important; margin: 0 !important; }
.xp-saga-detail-portrait img { width: 62px !important; height: 70px !important; }
.xp-saga-detail-top small { color: #c29547; font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.xp-saga-detail h2 { margin: 5px 0 3px !important; color: #edd9aa !important; font-size: 20px !important; }
.xp-saga-detail-top p { margin: 0; color: #7d8989; font-size: 7px; }

.xp-saga-enemy-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 5px; }
.xp-saga-enemy-stats span { padding: 4px; border: 1px solid #293335; background: #090e10; text-align: center; }
.xp-saga-enemy-stats small,
.xp-saga-enemy-stats b { display: block; }
.xp-saga-enemy-stats small { color: #697474; font-size: 5px; }
.xp-saga-enemy-stats b { margin-top: 3px; color: #d7b25d; font-size: 8px; }

.xp-saga-detail-progress { margin: 5px 0 !important; padding: 4px 7px !important; }
.xp-stage-list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 4px !important; margin-top: 0 !important; }
.xp-stage-list article { min-height: 46px !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 3px 2px !important; border-radius: 0 !important; text-align: center; }
.xp-stage-list article b { color: #d8c18e; font-size: 9px !important; }
.xp-stage-list article span { margin: 2px 0 4px; font-size: 5px !important; }
.xp-stage-list article button { width: 100%; height: 17px !important; padding: 0 2px; border-radius: 0 !important; font-size: 5px !important; }
.xp-stage-list article.is-collected { border-color: rgba(93, 157, 112, .42) !important; opacity: .72; }
.xp-stage-list article.is-claimable { border-color: #d1a34c !important; box-shadow: 0 0 9px rgba(210, 162, 73, .17); }

.xp-saga-runes { border: 1px solid #303b3e; background: rgba(4, 8, 9, .78); }
.xp-saga-runes > header { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; border-bottom: 1px solid #2a3436; background: linear-gradient(90deg, #121a1c, #080d0f); }
.xp-saga-runes > header small { color: #77bfd1; font-size: 5px; font-weight: 800; letter-spacing: .14em; }
.xp-saga-runes > header h3 { margin: 2px 0 0; color: #d9bd7e; font: 800 10px NinjaTitle, Georgia, serif; }
.xp-saga-runes > header > b { color: #75cde3; font-size: 11px; }
.xp-saga-runes > header > b span { color: #697575; font-size: 5px; }

.xp-runes {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  padding: 5px !important;
  overflow: visible !important;
}

.xp-runes article,
.xp-runes article.nrmt-ui-ornate-card {
  min-height: 46px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 7px;
  padding: 4px !important;
  border: 1px solid #2b3638 !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, #11181a, #090e10) !important;
  text-align: left !important;
}

.xp-runes article > i { width: 33px !important; height: 33px !important; display: grid; place-items: center; margin: 0 !important; border: 1px solid #47717b; border-radius: 50% !important; background: radial-gradient(circle, rgba(105, 207, 230, .2), #0a1315 67%) !important; color: #7bd2e6 !important; box-shadow: inset 0 0 12px #000, 0 0 8px rgba(89, 190, 214, .13); }
.xp-runes article.tone-ember > i { border-color: #90672c; color: #e4ac4c !important; background: radial-gradient(circle, rgba(218, 143, 43, .2), #160f08 67%) !important; }
.xp-runes article.tone-jade > i { border-color: #46755a; color: #78d597 !important; background: radial-gradient(circle, rgba(89, 196, 123, .18), #09140d 67%) !important; }
.xp-runes article > i span { font: 900 10px/1 Arial, sans-serif; }
.xp-runes article > div { min-width: 0; }
.xp-runes h3 { margin: 0 0 2px !important; color: #dcc17f !important; font-size: 9px !important; }
.xp-runes p { height: auto !important; margin: 0 !important; color: #788384 !important; font-size: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-runes article > div > b { display: block; margin-top: 4px; color: #aeb7b6; font-size: 6px; }
.xp-runes article > div > u { display: block; height: 3px; margin-top: 3px; background: #20292b; text-decoration: none; }
.xp-runes article > div > u span { display: block; height: 100%; background: linear-gradient(90deg, #a87428, #77c9df); }
.xp-runes button { width: 52px !important; height: 27px !important; border: 1px solid #a87b34 !important; border-radius: 0 !important; background: linear-gradient(#6b4b17, #342207) !important; color: #f0cf80 !important; font-size: 6px !important; }
.xp-runes button:disabled { border-color: #30393a !important; background: #161d1f !important; color: #596363 !important; }

@media (max-width: 1120px) {
  .xp-saga-layout { grid-template-columns: minmax(0, 1fr) 390px !important; }
  .xp-saga-hero-copy { max-width: 420px; }
  .xp-saga-hero-actions > span { display: none; }
}

@media (max-width: 900px) {
  .xp-saga-window.nrmt-ui-frame-safe { padding: 12px !important; }
  .xp-saga-head.xp-saga-hero { min-height: 126px; height: 126px; flex-basis: 126px !important; padding: 18px 58px 17px 20px !important; }
  .xp-saga-hero-copy h1 { font-size: 27px !important; }
  .xp-saga-hero-copy p { display: none; }
  .xp-saga-hero-actions [data-saga-claim-all] { min-width: 150px; }
  .xp-saga-layout { display: block !important; overflow: auto; }
  .xp-saga-layout > main { min-height: 480px; border-right: 0 !important; }
  .xp-saga-layout > aside { display: flex !important; min-height: 540px; }
  .xp-saga-grid { height: 420px !important; }
}

@media (max-width: 620px) {
  .xp-saga-overlay { padding: 0 !important; }
  .xp-saga-window.nrmt-ui-frame-safe { width: 100vw !important; height: 100vh !important; padding: 8px !important; }
  .xp-saga-head.xp-saga-hero { min-height: 132px; height: 132px; flex-basis: 132px !important; align-items: flex-start; padding: 18px 48px 12px 16px !important; }
  .xp-saga-hero-copy small { font-size: 6px !important; }
  .xp-saga-hero-copy h1 { font-size: 24px !important; }
  .xp-saga-hero-actions { position: absolute; left: 16px; bottom: 12px; }
  .xp-saga-hero-actions [data-saga-claim-all] { min-width: 160px; height: 38px; }
  .xp-saga-command > div span { display: none; }
  .xp-saga-search { height: auto !important; flex-wrap: wrap; }
  .xp-saga-search input { flex-basis: 100%; height: 34px; }
  .xp-saga-search button { height: 30px; flex: 1; }
  .xp-saga-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: 420px !important; }
  .xp-saga-layout > aside { padding: 8px !important; }
  .xp-saga-detail-top { grid-template-columns: 78px 1fr; }
  .xp-saga-detail-portrait { width: 78px !important; }
  .xp-stage-list article b { font-size: 7px !important; }
}