/* Active-hero ability sanctuary. */
/* The full-screen skills panel completely covers the profile scene. Stop its
   particles and pseudo-element animations instead of rendering them underneath
   a blurred backdrop on every scroll frame. State selectors restore the scene
   on close, category changes and progression-tab changes. */
.sanctuary.sanctuary-panel-open:has(#sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"]:not([hidden])) #sanctuary-scene {
  visibility: hidden;
}
.sanctuary.sanctuary-panel-open:has(#sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"]:not([hidden])) :is(#sanctuary-scene, #sanctuary-scene *),
.sanctuary.sanctuary-panel-open:has(#sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"]:not([hidden])) :is(#sanctuary-scene, #sanctuary-scene *)::before,
.sanctuary.sanctuary-panel-open:has(#sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"]:not([hidden])) :is(#sanctuary-scene, #sanctuary-scene *)::after {
  animation-play-state: paused !important;
}
.sanctuary.sanctuary-panel-open:has(#sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"]:not([hidden])) #sanctuary-backdrop {
  backdrop-filter: none;
}
.sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] {
  --as-gold: #e8c681;
  background: #061424;
  padding-inline: clamp(20px, 2.5vw, 64px);
}
.sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] > .journey-scene {
  background-image: linear-gradient(90deg, #020e20a8, transparent 25%, transparent 85%, #05132625), var(--ability-sanctuary-background);
  background-size: cover;
  background-position: center;
}
.is-ability-sanctuary[data-category="heroMastery"] > .journey-scene > * { display: none; }
.sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] .sanctuary-modal-top {
  min-height: 80px; border-bottom: 1px solid #d6ad6052;
  background: linear-gradient(90deg, #041326b8, transparent 75%);
}
.sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] .sanctuary-close {
  border: 1px solid #d8ae65; border-radius: 50%; background: #051628b8; color: #ffe0a0;
}
.sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] #at-content {
  padding: 8px 0 20px;
}
.is-ability-sanctuary[data-category="heroMastery"] .journey-nav { isolation: isolate; }
.is-ability-sanctuary[data-category="heroMastery"] .journey-nav::before {
  content: ''; position: absolute; z-index: -1; inset: -32px -18px -32px -6vw;
  background: linear-gradient(160deg, #163440fa, #071a2bf8 60%, #061525fa);
  pointer-events: none;
}
/* The horizontal navigation must contain its opaque decorative backdrop. */
@container sanctuary-panel (max-width: 62rem) {
  .is-ability-sanctuary[data-category="heroMastery"] .journey-nav { position: relative; }
}
.is-ability-sanctuary[data-category="heroMastery"] .journey-main { min-width: 0; }
.is-ability-sanctuary[data-category="heroMastery"] .journey-view-skills { padding: 0; }
.ability-sanctuary {
  position: relative; width: min(100%, 1200px); margin: 0 auto; padding: 0 16px;
  color: #f6edda; font-family: Montserrat, 'Segoe UI', sans-serif;
}
.as-hero { position: relative; display: flex; align-items: center; flex-direction: column; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-eyebrow {
  margin: 3px 0 2px; font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: #edcf92; text-shadow: 0 2px 8px #000;
}
.as-hero-orb { position: relative; width: clamp(310px, 31vw, 380px); aspect-ratio: 1; isolation: isolate; }
.as-orbit-ornament { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px #dba34780); pointer-events: none; }
.as-portrait { position: absolute; inset: 5.6%; border-radius: 50%; overflow: hidden; background: #07192d; box-shadow: 0 0 25px #1dbddc35, 0 0 50px #e6ba5c24; }
.sanctuary .as-portrait > img { width: 100%; height: 100%; object-fit: cover; object-position: 51% 31%; }
.as-portrait-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #03172c 1%, #04192df7 13%, #06172d6e 31%, transparent 52%); }
.as-hero-title { position: absolute; z-index: 4; top: 65%; left: 0; width: 100%; text-align: center; text-shadow: 0 2px 10px #000; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-hero-title h2 {
  margin: 0; font: 400 clamp(40px, 3.8vw, 60px)/1 var(--at-serif, Georgia, serif);
  text-transform: uppercase; letter-spacing: .075em; color: #fff4df;
}
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-hero-title p { margin: 8px 0 0; color: #f0e0c4; font: 400 clamp(16px, 1.4vw, 22px)/1.2 var(--at-serif, Georgia, serif); letter-spacing: .065em; }
.as-title-rule { display: flex; align-items: center; gap: 10px; width: 48%; height: 20px; margin: 4px auto 0; }
.as-title-rule::before, .as-title-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #e2bd76); }
.as-title-rule::after { transform: scaleX(-1); }
.as-title-rule span { color: #e2bd76; font-size: 18px; line-height: 1; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-intro { margin: -5px 0 0; max-width: 340px; text-align: center; font-size: 13px; line-height: 1.65; color: #e3e8e7; text-shadow: 0 2px 6px #000; }
.as-help-toggle {
  position: absolute; right: 0; top: 14px; width: 40px; height: 40px; border: 1px solid #d6b16c;
  border-radius: 50%; color: #ffdf9b; background: #05162ac7; font: 24px Georgia, serif; cursor: pointer;
}
.as-help-panel { position: absolute; right: 0; top: 64px; z-index: 10; width: min(360px, 100%); padding: 22px; border: 1px solid #c99d51; background: #06182df5; box-shadow: 0 15px 50px #0008; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-help-panel strong { font: 22px var(--at-serif, Georgia, serif); color: #f5dba6; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-help-panel p { font-size: 13px; line-height: 1.7; margin: 12px 0 0; color: #c5d5df; }
.as-help-panel ol { list-style: none; margin: 12px 0; padding: 0; }
.as-help-panel li { padding: 7px 0; font-size: 13px; border-bottom: 1px solid #d8bd7e24; }
.as-help-panel li span { display: inline-block; width: 30px; color: #f3d79c; }
.as-abilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; margin: 58px auto 0; max-width: 1060px; }
.as-card { position: relative; min-width: 0; text-align: center; border: 1px solid #c99d56; background: linear-gradient(155deg, #14304aee, #031426f5 45%, #051426f5); box-shadow: 0 12px 35px #0008, inset 0 0 28px #020e20; }
.as-card::before, .as-card::after { content: ''; position: absolute; pointer-events: none; }
.as-card::before { inset: 5px; border: 1px solid #ae7e3f75; clip-path: polygon(0 0, 35% 0, 35% 1%, 65% 1%, 65% 0, 100% 0, 100% 100%, 0 100%); }
.as-card::after { inset: -4px; border: 1px solid #d9ad6266; clip-path: polygon(0 0, 18px 0, 18px 2px, 2px 2px, 2px 18px, 0 18px, 0 0, 100% 0, 100% 18px, calc(100% - 2px) 18px, calc(100% - 2px) 2px, calc(100% - 18px) 2px, calc(100% - 18px) 0, 100% 0, 100% 100%, calc(100% - 18px) 100%, calc(100% - 18px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 18px), 100% calc(100% - 18px), 100% 100%, 0 100%, 0 calc(100% - 18px), 2px calc(100% - 18px), 2px calc(100% - 2px), 18px calc(100% - 2px), 18px 100%, 0 100%); }
.as-ability-orb { position: relative; z-index: 2; width: 116px; aspect-ratio: 1; margin: -53px auto 0; }
.as-card-ornament { position: absolute; z-index: 2; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); filter: drop-shadow(0 0 5px #eeab3880); }
.sanctuary .as-ability-orb > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; border-radius: 50%; border: 2px solid #7bd8f1; box-shadow: 0 0 12px var(--ability-light), inset 0 0 10px var(--ability-light); }
.as-ability-number { position: absolute; z-index: 3; bottom: -4px; left: 50%; display: grid; place-items: center; width: 29px; height: 29px; transform: translateX(-50%); border: 1px solid #e6bd77; border-radius: 50%; background: #07182c; color: #f4dca4; font-size: 14px; }
.as-card-body { position: relative; z-index: 1; padding: 10px 17px 12px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-kicker { margin: 0; font-size: 9px; letter-spacing: .14em; color: #d8bb86; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card h3 { display: grid; place-items: center; min-height: 36px; margin: 5px -5px; font: 400 20px/1.15 var(--at-serif, Georgia, serif); color: #fff0d4; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-description { margin: 0; min-height: 44px; font-size: 12px; line-height: 1.55; color: #cbdbe5; }
.as-stages { display: flex; justify-content: center; gap: 11px; margin: 10px 0 13px; }
.as-stages > button { width: 25px; height: 25px; padding: 0; transform: rotate(45deg); background: #081b30; border: 1px solid #7e775d; color: #a9b7c2; cursor: pointer; transition: background .15s, box-shadow .15s; }
.as-stages > button > span { display: block; transform: rotate(-45deg); font: 12px Georgia, serif; }
.as-stages > button[aria-pressed="true"] { color: #ffe4a5; border-color: #ffda8a; background: #805d2f; box-shadow: 0 0 12px #f3bf5e60, inset 0 0 7px #d9aa4f44; }
.as-stages > button:hover { border-color: #ffe5aa; background: #765829; }
.as-stages > button:focus-visible, .as-help-toggle:focus-visible { outline: 2px solid #b4f7ff; outline-offset: 5px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-stage-transition { display: flex; justify-content: center; align-items: center; gap: 15px; margin: 5px 0 8px; font-size: 16px; color: #f0e7d6; }
.as-stat-changes { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: var(--as-stat-height, 78px); margin: 0 0 7px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-stat-change {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; column-gap: 4px;
  margin: 0; font-size: 10.5px; line-height: 1.35; color: #c4d4de; text-align: center;
}
.as-stat-before, .as-stat-change strong { white-space: nowrap; }
.as-stat-change strong { color: #91ece5; font-weight: 600; }
.as-stat-arrow { color: #e4c17d; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-stat-note { margin: 3px 0 0; color: #b9c9d4; font-size: 9px; line-height: 1.35; text-align: center; }
.as-stage-transition b { color: #e8c47a; font-size: 17px; }
.as-stage-transition strong { color: #91ece5; font-weight: 600; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-requirement { display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 35px; margin: 0; padding-top: 9px; border-top: 1px solid #e6bb732e; color: #c3cfd6; font-size: 11px; line-height: 1.5; }
.as-requirement > svg { width: 14px; height: 14px; flex: 0 0 14px; color: #dfc38d; }
.as-requirement strong { font-weight: 500; color: #f2dfb5; white-space: nowrap; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-price { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px -5px 8px; color: #b3edee; }
.as-price > img { width: 29px; height: 29px; object-fit: contain; }
.as-price > strong { font-size: 20px; font-weight: 600; white-space: nowrap; }
.as-price > span { font-size: 9px; color: #c1d8e4; }
.as-upgrade { display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; min-height: 41px; padding: 9px 6px; border: 1px solid #ffdf96; background: linear-gradient(#ffe3a2, #e4b66a 48%, #c88c3f); color: #30200d; opacity: 1; font: 600 15px var(--at-serif, Georgia, serif); letter-spacing: .04em; text-transform: uppercase; cursor: default; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px); }
.as-upgrade span { font-size: 11px; color: #70431c; }
.as-footer { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 24px 0 0; padding-bottom: 10px; font-size: 11px; color: #dfd6bd; text-shadow: 0 2px 4px #000; text-align: center; }
.as-footer > span { color: #f3cc82; font-size: 24px; }

/* Long real ability names need a consistent title area above the stage selectors. */
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .ability-sanctuary:not([data-hero-id="94"]) .as-card h3 {
  min-height: 60px; font-size: clamp(16px, 1.2vw, 20px); overflow-wrap: anywhere;
}
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .ability-sanctuary:not([data-hero-id="94"]) .as-card-description {
  min-height: 56px;
}

@media (min-width: 1001px) and (max-height: 850px) {
  .sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] .sanctuary-modal-top { min-height: 58px; padding-block: 4px; }
  .as-hero-orb { width: 240px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-hero-title h2 { font-size: 37px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-hero-title p { font-size: 15px; margin-top: 5px; }
  .as-title-rule { margin-top: 0; }
  .as-abilities { margin-top: 36px; }
  .as-ability-orb { width: 84px; margin-top: -38px; }
  .as-card-body { padding-block: 8px 12px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card h3 { min-height: 32px; font-size: 19px; margin-bottom: 5px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-description { min-height: 44px; font-size: 11px; }
  .as-stages { margin-block: 12px 14px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-kicker { display: none; }
  .as-footer { margin-top: 12px; }
}

@media (min-width: 1500px) and (min-height: 950px) {
  .as-hero-orb { width: min(32dvh, 370px); }
  .as-abilities { margin-top: 65px; gap: 22px; }
  .as-card-body { padding: 10px 21px 14px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-description { font-size: 13px; min-height: 44px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card h3 { font-size: 22px; }
}
@media (max-width: 1200px) {
  .ability-sanctuary { padding-inline: 6px; }
  .as-abilities { gap: 10px; }
  .as-card-body { padding-inline: 10px; }
  .as-stages { gap: 9px; }
  .as-stages > button { width: 22px; height: 22px; }
}
@media (max-width: 1000px) {
  .as-hero-orb { width: clamp(280px, 42vw, 390px); }
  .as-abilities { max-width: 850px; }
}
@media (max-width: 680px) {
  .sanctuary #sanctuary-drawer[data-category="heroMastery"].is-ability-sanctuary[data-category="heroMastery"] { padding-inline: 12px; }
  .sanctuary #sanctuary-drawer.is-ability-sanctuary[data-category="heroMastery"] .sanctuary-modal-top { min-height: 64px; }
  .as-hero-orb { width: 310px; max-width: 94%; }
  .as-hero-title { top: 65%; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-eyebrow { margin-top: 12px; font-size: 9px; letter-spacing: .2em; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-intro { font-size: 11px; }
  .as-help-toggle { top: 12px; right: 0; width: 32px; height: 32px; font-size: 20px; }
  .as-abilities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 68px 14px; margin-top: 65px; }
  .as-ability-orb { width: 102px; margin-top: -47px; }
  .as-card-body { padding: 13px 11px 14px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card h3 { font-size: 20px; min-height: 47px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-description { font-size: 12px; min-height: 75px; }
  .as-stages { gap: 9px; }
  .as-stages > button { width: 22px; height: 22px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-requirement { font-size: 10px; }
  .as-price > span { display: none; }
  .as-price > strong { font-size: 20px; }
  .as-footer { font-size: 10px; margin-top: 22px; gap: 10px; }
}
@media (max-width: 360px) {
  .as-abilities { grid-template-columns: minmax(0, 1fr); padding-inline: 28px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-card-description { min-height: 0; }
}

.as-upgrade:not(:disabled) { cursor:pointer; filter:drop-shadow(0 0 8px #efc36544); }
.as-upgrade:disabled { filter:saturate(.4); opacity:.65; }
.as-owned-level {color:#a5e8d9;text-align:center;font-size:11px;margin:8px 0;}
.as-upgrade-message {min-height:30px;text-align:center;font-size:11px;color:#e7d7b5;line-height:1.4;margin:8px 0 0;}
.as-stages button.is-owned {box-shadow:inset 0 0 0 2px #a5e8d9;}
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-owned-level { font-size:10px; line-height:1.3; margin:4px 0 7px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .as-upgrade-message { font-size:10px; line-height:1.4; min-height:28px; margin:6px 0 0; }