/* Legendary Journey: the standalone V3 progression experience. */
.at-prototype.sanctuary #sanctuary-drawer[data-category="heroMastery"] {
  inset: 0; max-width: none; padding: 0 clamp(16px, 3vw, 80px);
  border: 0; box-shadow: none; background: #061323; isolation: isolate;
}
.sanctuary #sanctuary-drawer[data-category="heroMastery"]::before,
.sanctuary #sanctuary-drawer[data-category="heroMastery"]::after { display: none; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] .sanctuary-modal-top { min-height: clamp(64px, 7dvh, 90px); border-bottom-color: #abc8df28; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] .sanctuary-modal-identity strong { color: #f4e3bc; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #at-content {
  padding: clamp(20px, 2vw, 48px) 0 40px; scrollbar-width: none; scrollbar-gutter: auto;
}
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #at-content::-webkit-scrollbar { display: none; }
.journey-scene { display: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
[data-category="heroMastery"]>.journey-scene { display: block; }
.sanctuary .journey-scene>img {
  width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: .35;
  animation: journey-landscape 26s ease-in-out infinite alternate !important;
}
.journey-scene-veil { position: absolute; inset: 0; background: linear-gradient(90deg, #031322f5, #06182ae6 35%, #08162999), linear-gradient(0deg, #041020, transparent 85%); }
.sanctuary .journey-scene-light {
  position: absolute; inset: -30%; background: radial-gradient(ellipse at 20% 20%, color-mix(in srgb, var(--journey-accent) 22%, transparent), transparent 48%);
  mix-blend-mode: screen; animation: journey-light 13s ease-in-out infinite alternate !important;
}
.journey-scene-dust { position: absolute; inset: 0; overflow: hidden; }
.sanctuary .journey-scene-dust i {
  position: absolute; left: calc(12% + var(--i) * 17%); bottom: -5%; width: 3px; height: 3px; border-radius: 50%;
  background: #e0f4ed; box-shadow: 0 0 14px var(--journey-accent); opacity: 0;
  animation: journey-dust calc(16s + var(--i) * 3s) linear infinite !important; animation-delay: calc(var(--i) * -4s) !important;
}
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap {
  max-width: 2560px; margin: 0 auto; padding: 0; width: 100%;
  font-family: Montserrat, 'Segoe UI', sans-serif;
}
.journey-root {
  display: grid; grid-template-columns: clamp(180px, 13vw, 280px) minmax(0, 1fr);
  gap: clamp(24px, 2.4vw, 64px); align-items: start;
  --hm-level-color: var(--journey-accent); --journey-gold: #edcf96;
  color: #e1edf6; font-size: var(--san-body);
}
.journey-main, .journey-view { min-width: 0; }
.journey-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.journey-nav-hero { display: grid; justify-items: center; gap: 10px; padding: 20px 6px 28px; border-bottom: 1px solid #a6c6de30; margin-bottom: 16px; }
.journey-nav-hero>img { width: clamp(76px, 6vw, 128px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid #edd39a; padding: 4px; background: #08182d; box-shadow: 0 0 28px #b9d9e01c; }
.journey-nav-hero>strong { font: clamp(22px, 1.6vw, 36px)/1.2 var(--at-serif); color: #f1d7a7; text-align: center; overflow-wrap: anywhere; }
.journey-nav-hero>span { font-size: 12px; letter-spacing: .12em; color: #a7bacd; text-align: center; }
.journey-nav>[role="tab"] {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 15px 12px;
  background: transparent; border: 1px solid transparent; border-left: 2px solid #9dbcd228;
  color: #b9cadb; text-align: left; font-family: Montserrat, sans-serif; font-size: var(--san-control); transition: background .2s, border-color .2s, color .2s;
}
.journey-nav>[role="tab"]>svg { width: 42px; height: 42px; flex-shrink: 0; }
.journey-nav>[role="tab"]>span { display: flex; flex-direction: column; gap: 3px; }
.journey-nav>[role="tab"] small { font-size: 11px; letter-spacing: .12em; opacity: .65; }
.journey-nav>[role="tab"][aria-selected="true"] {
  color: #f5e7c8; border-color: #c6dace28; border-left-color: var(--journey-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--journey-accent) 19%, transparent), #0a203443);
  box-shadow: inset 16px 0 30px -24px var(--journey-accent);
}
.journey-nav>[role="tab"]:hover { border-left-color: #f3d49a; background-color: #b4d4ef0b; color: #fff0d1; }
.journey-ready-count { min-width: 25px; min-height: 25px; display: grid; place-items: center; margin-left: auto; background: #e3c283; color: #082131; border-radius: 50%; font-size: 13px; }
.journey-nav-foot { display: flex; align-items: center; gap: 12px; padding: 24px 8px; border-top: 1px solid #9abed02b; margin-top: 18px; color: #9eb6c7; font-size: 12px; letter-spacing: .05em; }
.journey-nav-foot img { width: 48px; height: 56px; object-fit: contain; }
.journey-nav-foot span { display: grid; gap: 4px; }
.journey-nav-foot strong { font-size: var(--san-control); color: #e2e9de; font-weight: 500; }

.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-kicker { display: block; color: var(--journey-accent); font: 600 var(--san-label)/1.5 Montserrat, sans-serif; letter-spacing: .1em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(p, .hm-mission-desc, .hm-secret-story-text, .hm-relic-info, .hm-relic-stat-row, .hm-relic-locked-msg, .hm-relic-hint) { font-family: Montserrat, sans-serif; font-size: var(--san-body); line-height: 1.75; color: #c9dce9; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(button, .hm-level-name, .hm-points) { font-family: Montserrat, sans-serif; }
.journey-overview-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 560px; padding: clamp(24px, 2.2vw, 52px); border-bottom: 1px solid #cdd4af3b; background: linear-gradient(120deg, #0b26364d, #07182b10); }
.journey-overview-copy { position: relative; z-index: 2; width: 58%; max-width: 840px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-overview-copy>h2 { font: clamp(40px, 3.5vw, 88px)/1.1 var(--at-serif); color: #f7e9cd; margin: 12px 0; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-hero-title { margin: 0 0 30px; color: #d2d6d4; font-style: italic; }
.journey-hero-portrait { position: absolute; z-index: 0; inset: 0 -3% 0 36%; mask-image: linear-gradient(90deg, transparent, #000 38%); }
.journey-hero-portrait>img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 30%; }
.journey-hero-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #061323, transparent 50%, #06132333); }
.journey-hero-portrait>span { position: absolute; z-index: 1; right: 9%; bottom: 28px; display: flex; align-items: center; gap: 12px; color: #efe5c9; font-size: var(--san-label); text-shadow: 0 2px 8px #000; }
.journey-hero-portrait i { display: block; width: 4px; height: 4px; background: #efdaa8; transform: rotate(45deg); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-header-left { display: flex; flex-direction: row; align-items: center; gap: 32px; padding: 15px 10px; margin-bottom: 24px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-emblem-frame { position: relative; width: clamp(110px, 10vw, 190px); height: auto; aspect-ratio: 1; flex: 0 0 clamp(110px, 10vw, 190px); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-emblem-frame::before {
  inset: -8px; border: 0; border-radius: 50%; transform: none; box-shadow: none;
  background: conic-gradient(from 210deg, var(--journey-accent) var(--journey-progress), #b6dce51a 0);
  mask-image: radial-gradient(transparent 66%, #000 67%, #000 69%, transparent 70%);
}
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-emblem-frame::after { inset: -18px; border: 1px solid #b5d1cb26; border-radius: 50%; transform: none; box-shadow: 0 0 30px color-mix(in srgb, var(--journey-accent) 12%, transparent); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-emblem { width: 85%; height: 85%; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--journey-accent) 45%, transparent)); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-emblem-frame>span { right: 0; bottom: 0; width: 36px; height: 36px; font: 500 18px Montserrat, sans-serif; border-color: var(--journey-accent); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-level-name { font-size: clamp(22px, 1.7vw, 42px); line-height: 1.3; color: #ebf5ec; font-weight: 500; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-eyebrow { color: var(--journey-accent); font-size: var(--san-label); line-height: 1.5; letter-spacing: .06em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-hero-name { display: none; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-header-right { width: 100%; min-width: 0; max-width: 680px; padding: 20px 0; background: none; border: 0; backdrop-filter: none; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-points-row { align-items: center; gap: 16px; flex-wrap: wrap; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-points-label { color: #b1cad8; font-size: var(--san-label); letter-spacing: .06em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-points { margin-top: 6px; font-size: clamp(32px, 2.5vw, 60px); line-height: 1.15; font-weight: 500; font-variant-numeric: tabular-nums; color: #f3e6c4; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-points small { font: 500 var(--san-control) Montserrat, sans-serif; color: var(--journey-accent); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-next-level { font-size: var(--san-label); line-height: 1.5; color: #bcd3df; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-next-level strong { font-size: clamp(24px, 1.7vw, 38px); color: var(--journey-accent); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-progress-track { height: 5px; border: 0; background: #b3d7e11c; overflow: visible; margin-top: 20px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-progress-fill { box-shadow: 0 0 18px color-mix(in srgb, var(--journey-accent) 55%, transparent); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-progress-shine { display: none; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-progress-caption { margin-top: 10px; font-size: var(--san-label); color: #99b5c8; }
.journey-overview-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 18px; }
.journey-overview-actions>span { font-size: var(--san-label); color: #bed2df; }
.journey-primary { min-height: 52px; padding: 15px 24px; background: linear-gradient(110deg, #eedbb0, #b69358); border: 1px solid #edd398; color: #0a2230; font-size: var(--san-control); font-weight: 600; box-shadow: 0 8px 28px #c0a1581c; }
.journey-primary span { margin-left: 18px; }
.journey-primary:hover { filter: brightness(1.12); }
.journey-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 34px 0 24px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-section-heading :is(h2,h3) { font: clamp(26px, 2vw, 46px)/1.25 var(--at-serif); margin: 10px 0 0; color: #f1e0bd; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-section-heading p { max-width: 760px; margin: 16px 0 0; color: #bad0df; }
.journey-section-heading>span { flex-shrink: 0; color: #9bb7c8; font-size: var(--san-label); }
.journey-section-heading>.journey-counter { display: grid; justify-items: center; min-width: 110px; padding-left: 24px; border-left: 1px solid #b1d1cf35; font-size: 44px; color: #e7d4a8; }
.journey-counter small { font-size: var(--san-label); line-height: 1.5; color: #b9d0df; }

/* Rank banners: explore the real milestones without changing earned progress. */
.journey-ranks { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: clamp(12px, 1vw, 24px); padding: 8px 2px 20px; overflow-x: auto; scrollbar-width: none; }
.journey-ranks::-webkit-scrollbar { display: none; }
.journey-rank { position: relative; isolation: isolate; min-height: clamp(300px, 30vw, 430px); min-width: 0; padding: 24px 14px 20px; overflow: hidden; border: 1px solid #91b8d03b; background: #0c233b; text-align: center; transition: transform .25s, border-color .25s, box-shadow .25s; }
.journey-rank-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% 25%; opacity: .4; filter: saturate(.7); transition: transform .5s, opacity .4s; }
.journey-rank::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #051225 0%, #06172bea 25%, color-mix(in srgb, var(--rank-color) 10%, transparent) 100%); }
.journey-rank::after { content: ''; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--rank-color) 15%, transparent); pointer-events: none; }
.journey-rank.is-reached .journey-rank-art { opacity: .8; filter: none; }
.journey-rank[aria-pressed="true"] { border-color: var(--rank-color); box-shadow: 0 0 22px color-mix(in srgb, var(--rank-color) 20%, transparent); }
.journey-rank:hover { transform: translateY(-5px); border-color: #efdda4; }
.journey-rank:hover .journey-rank-art { transform: scale(1.06); }
.journey-rank-state { position: relative; z-index: 2; display: inline-block; padding: 5px 8px; border-bottom: 1px solid #c4dcd244; font-size: var(--san-label); color: #a8c0d0; }
.journey-rank.is-current .journey-rank-state { color: #f7e7bd; border-color: #efdba0; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-step { flex-direction: column; justify-content: flex-end; min-height: 260px; gap: 24px; padding-top: 50px; color: #a4bccc; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-node { width: 100px; height: 100px; flex: 0 0 100px; border: 0; background: radial-gradient(circle, color-mix(in srgb, var(--rank-color) 18%, transparent), transparent 70%); box-shadow: none; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-node img { width: 96px; height: 96px; filter: grayscale(.7) brightness(.7); opacity: .8; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-step.is-reached .hm-path-node img { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rank-color) 40%, transparent)); opacity: 1; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-copy { display: flex; flex-direction: column; gap: 10px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-copy strong { font: 500 var(--san-control)/1.4 Montserrat, sans-serif; white-space: normal; overflow: visible; color: #e0e7e5; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-path-copy small { color: var(--rank-color); font-size: var(--san-label); }
.journey-rank-preview { display: flex; align-items: center; gap: 20px; padding: 22px 26px; border: 1px solid color-mix(in srgb, var(--rank-color) 30%, transparent); background: linear-gradient(110deg, color-mix(in srgb, var(--rank-color) 10%, #07182a), #08182bb8); }
.journey-rank-preview>img { width: 70px; height: 80px; object-fit: contain; }
.journey-rank-preview>div { flex: 1; min-width: 0; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-rank-preview h3 { font: 500 var(--san-body)/1.4 Montserrat, sans-serif; margin: 7px 0; color: #eceddf; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-rank-preview p { font-size: var(--san-label); margin: 0; }
.journey-rank-preview>button { min-height: 48px; border: 1px solid #cdb77e69; background: #0b2034; color: #e8d6b2; padding: 12px 16px; font-size: var(--san-label); }
.journey-discover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
.journey-discover>button { display: flex; align-items: center; gap: 18px; padding: 24px; border: 1px solid #a9c5d72e; background: linear-gradient(110deg, #183447a8, #0b1930b3); color: #cfdfed; text-align: left; }
.journey-discover svg { width: 56px; height: 56px; color: #dbc591; flex-shrink: 0; }
.journey-discover span { display: grid; gap: 8px; }
.journey-discover small { font-size: 12px; color: #98b8c9; letter-spacing: .07em; }
.journey-discover strong { font-size: var(--san-control); font-weight: 500; }
.journey-discover b { margin-left: auto; color: #e7d7ae; }
.journey-discover>button:hover { border-color: #d9c58d; background-color: #c4daef0a; }

/* Quests become actionable, filtered challenge cards. */
.journey-mission-filters { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 28px; }
.journey-mission-filters button { display: flex; align-items: center; gap: 14px; padding: 12px 18px; min-height: 48px; border: 1px solid #a9cadb29; background: #0a2035; color: #b7cfde; font-size: var(--san-control); }
.journey-mission-filters button span { min-width: 24px; font-size: var(--san-label); color: #8fbece; }
.journey-mission-filters button[aria-pressed="true"] { color: #f5e8cd; border-color: #b1dbd478; background: color-mix(in srgb, var(--journey-accent) 13%, #071c2d); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); gap: 22px; padding: 0; background: none; border: 0; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-card { min-height: 330px; padding: clamp(20px, 1.6vw, 36px); background: linear-gradient(145deg, #17364be8, #071627f5); border: 1px solid #9fc7d43b; border-top: 2px solid #92c6d170; border-radius: 2px; box-shadow: 0 14px 30px #0003; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-card.is-completed { border-color: #dfcb879e; background: radial-gradient(ellipse at 80% 0, #d0af4921, transparent 70%), linear-gradient(145deg, #233c42, #081b2a); box-shadow: inset 0 0 30px #d0b56e08, 0 12px 26px #0003; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-card.is-claimed { opacity: .75; filter: none; border-top-color: #70c9b7; }
.journey-mission-emblem { display: flex; align-items: center; justify-content: space-between; color: #c0d9df; margin-bottom: 18px; }
.journey-mission-emblem svg { width: 52px; height: 52px; }
.journey-mission-emblem>span { font: 24px var(--at-serif); opacity: .5; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-kicker { font-size: var(--san-label); color: #90b8ce; letter-spacing: .08em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-state { font-size: var(--san-label); color: #b6d6e3; padding: 5px 8px; border-color: #8fc8d343; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .is-completed .hm-mission-state { color: #f2dca2; border-color: #e3c57f66; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-title { margin-top: 18px; font-size: clamp(19px, 1.1vw, 26px); line-height: 1.4; color: #f3ead6; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-desc { margin-top: 12px; flex: 1; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-meta { margin: 24px 0 14px; gap: 14px; flex-wrap: wrap; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(.hm-mission-progress-value, .hm-mission-reward) { font-size: var(--san-body); color: #d7e8ed; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-reward { color: #e8cc8d; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(.hm-mission-reward small, .hm-mission-progress-value small) { font-size: var(--san-label); color: #a4bfd0; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-progress-track { height: 5px; border-radius: 0; background: #b6d4e21c; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(.hm-mission-claim-btn, .hm-relic-upgrade-btn) { min-height: 52px; padding: 14px 20px; margin-top: 22px; font-size: var(--san-control); letter-spacing: .025em; line-height: 1.5; background: linear-gradient(120deg, #efddb4, #b99957); border-color: #e7cc93; color: #102332; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-mission-claimed-label { padding: 12px; margin-top: 20px; color: #a5ded0; font-size: var(--san-label); border-top: 1px solid #93bdb52b; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-empty { display: none; }
.journey-missions-empty, .journey-empty { padding: 48px 24px; border: 1px solid #95c9d634; background: #0b2438a8; text-align: center; }

/* Personal relic: a large floating specimen, with the actual upgrade controls. */
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-box { display: grid; grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(24px, 3vw, 80px); min-height: 540px; padding: clamp(24px, 3vw, 72px); background: radial-gradient(ellipse at 20% 50%, #598fb522, transparent 60%), linear-gradient(140deg, #112d42d9, #071528f5); border: 1px solid #b2c8cc3b; text-align: left; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-aura { display: none; }
.journey-relic-shrine { position: relative; display: grid; place-items: center; width: 100%; min-height: 380px; isolation: isolate; }
.journey-relic-shrine::before { content: ''; position: absolute; width: 90%; aspect-ratio: 1; max-width: 400px; border: 1px solid #a5cce247; border-radius: 50%; box-shadow: 0 0 0 18px #9ecbe207, 0 0 0 19px #9ecbe220, inset 0 0 60px #95c8e315; }
.journey-relic-shrine::after { content: ''; position: absolute; bottom: 1%; width: 75%; height: 13%; background: radial-gradient(ellipse, #6cb5da55, transparent 70%); transform: perspective(200px) rotateX(30deg); }
.journey-relic-orbit { position: absolute; inset: 12%; border: 1px solid #e9d39666; border-radius: 50%; transform: rotate(-22deg) scaleY(.62); pointer-events: none; }
.journey-relic-shrine.is-active { --relic-color: #c8a0ff; --relic-glow: #b77bff33; }
.journey-relic-shrine.is-active::before { border-color: color-mix(in srgb, var(--relic-color) 32%, transparent); box-shadow: 0 0 0 13px color-mix(in srgb, var(--relic-color) 4%, transparent), 0 0 0 14px color-mix(in srgb, var(--relic-color) 14%, transparent), inset 0 0 65px var(--relic-glow); }
.journey-relic-shrine.is-active::after { background: radial-gradient(ellipse, var(--relic-glow), transparent 70%); }
.journey-relic-shrine.is-active>.journey-relic-orbit { display: none; }
.journey-relic-vfx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.journey-relic-upgrade-status { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; min-height: 52px; display: grid; place-content: center; gap: 5px; text-align: center; pointer-events: none; opacity: 0; }
.journey-relic-upgrade-status small { color: #f6e2ac; font: 700 10px/1.4 Montserrat, sans-serif; letter-spacing: .18em; }
.journey-relic-upgrade-status strong { color: #fff3d0; font: 26px/1.2 var(--at-serif, serif); text-shadow: 0 0 24px var(--relic-color); }
.journey-relic-shrine[data-upgrading]>.journey-relic-upgrade-status { opacity: 1; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-img { width: min(80%, 300px); height: 300px; margin: 0; grid-row: auto; filter: drop-shadow(0 0 28px #9ac9e66b); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-relic-shrine.is-active>.hm-relic-img { filter: drop-shadow(0 0 22px var(--relic-glow)); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-img.is-locked { filter: saturate(.5) brightness(.8) drop-shadow(0 0 22px #97bde03b); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-info { grid-column: auto; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-overline { color: var(--journey-accent); font-size: var(--san-label); letter-spacing: .1em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-name { font: clamp(28px, 2vw, 48px)/1.3 var(--at-serif); color: #f1e2bc; margin: 12px 0 24px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-progress-label { color: #b8dbec; font-size: var(--san-control); letter-spacing: .02em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-stats { margin-top: 24px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-stat-row { padding: 16px 0; flex-wrap: wrap; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-stat-label { color: #abc5d7; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-stat-value { color: #f0e1b7; font-variant-numeric: tabular-nums; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-stat-next { color: #9bdfc5; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-charm-row { justify-content: flex-start; margin-top: 24px; font-size: var(--san-body); color: #d2e3ed; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-charm-row img { width: 36px; height: 36px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-upgrade-btn:disabled { background: #a5c2d110; color: #a3bbcc; border-color: #abc4d12e; box-shadow: none; cursor: not-allowed; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-maxed-label { padding: 20px 0; color: #edda9a; font-size: var(--san-control); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-relic-note { font-size: var(--san-label); margin-top: 18px; color: #c3bda8; }

/* Chronicle portals preserve the existing unlock rules and reading dialog. */
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; background: none; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story { display: flex; flex-direction: column; align-items: center; min-height: 520px; padding: 36px 26px; gap: 26px; border: 1px solid color-mix(in srgb, var(--story-accent) 45%, transparent); background: #091a2e; text-align: center; isolation: isolate; }
.journey-story-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .24; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, #061126 0%, #061126bd 65%, color-mix(in srgb, var(--story-accent) 20%, transparent)); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story.is-unlocked { box-shadow: inset 0 0 40px color-mix(in srgb, var(--story-accent) 8%, transparent); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-rune-wrap { position: relative; width: 120px; height: 140px; flex: 0 0 140px; display: grid; place-items: center; margin-top: 28px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-rune { width: 100px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 24px var(--story-accent)); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .is-locked .hm-secret-story-rune { filter: grayscale(.8) brightness(.65); }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-index { top: -30px; bottom: auto; right: auto; color: var(--story-accent); font-size: 18px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-body { flex: 1; gap: 18px; align-items: center; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-title { font: clamp(24px, 1.5vw, 34px)/1.3 var(--at-serif); text-transform: none; color: #eddec5; letter-spacing: .02em; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-text { -webkit-line-clamp: 3; line-height: 1.7; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-req { font-size: var(--san-label); color: #b6cbdf; margin-top: 10px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-state { position: absolute; top: 16px; right: 18px; color: var(--story-accent); font-size: 22px; }
.sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-open-label { position: static; padding: 12px 24px; color: #efdcb4; border: 1px solid #cfb67d70; background: #14304a90; font-size: var(--san-label); letter-spacing: .05em; }
.journey-story-lock { display: grid; justify-items: center; gap: 6px; font-size: var(--san-label); color: #9bb7cb; }
.journey-story-lock svg { width: 32px; height: 32px; }
.sanctuary #hm-story-modal[data-journey-reader] .hm-story-modal-card { width: min(1320px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr); border-color: #c7b5818c; background: #08172b; }
.sanctuary #hm-story-modal[data-journey-reader] .hm-story-modal-rune-wrap { background-image: linear-gradient(#0a1b3099, #091326e8), var(--journey-story-art); background-size: cover; background-position: 65% center; border-color: #b4cbd02e; }
.sanctuary #hm-story-modal[data-journey-reader] .hm-story-modal-content { padding: clamp(24px, 3vw, 64px); }
.sanctuary #hm-story-modal[data-journey-reader] .hm-story-modal-content p { font-family: Montserrat, sans-serif; font-size: var(--san-body); line-height: 1.9; color: #dae7ef; }

@keyframes journey-landscape { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1%); } }
@keyframes journey-light { from { transform: translate3d(-3%, -1%, 0); opacity: .35; } to { transform: translate3d(4%, 3%, 0); opacity: .8; } }
@keyframes journey-dust { 0% { transform: translateY(0); opacity: 0; } 20%, 70% { opacity: .5; } 100% { transform: translateY(-70vh); opacity: 0; } }
@keyframes journey-emblem-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes journey-view-reveal { from { opacity: .45; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes journey-relic-forge { 0% { transform: translateY(0) scale(1); } 18% { transform: translateY(-10px) scale(.92); } 36% { transform: translateY(-14px) scale(1.09); } 62% { transform: translateY(-8px) scale(1.025); } 100% { transform: translateY(0) scale(1); } }
@keyframes journey-relic-upgrade-label { 0% { opacity: 0; transform: translateY(10px); } 20%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(.hm-emblem, .hm-relic-img) { animation: journey-emblem-float 7s ease-in-out infinite !important; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-relic-shrine[data-upgrading="true"]>.hm-relic-img { animation: journey-relic-forge 1.3s ease-in-out both !important; }
  .sanctuary:not(.sanctuary-motion-paused) .journey-relic-shrine[data-upgrading="true"]>.journey-relic-upgrade-status { animation: journey-relic-upgrade-label 2.5s ease both !important; }
  .sanctuary:not(.sanctuary-motion-paused) #sanctuary-drawer[data-category="heroMastery"] .journey-view:not([hidden]) { animation: journey-view-reveal .35s ease-out both !important; }
}
.sanctuary.sanctuary-motion-paused .journey-scene * { animation-play-state: paused !important; }
.sanctuary.sanctuary-motion-paused #sanctuary-drawer[data-category="heroMastery"] #hm-wrap :is(.hm-emblem, .hm-relic-img) { animation-play-state: paused !important; }
@media (max-height: 500px) and (orientation: landscape) {
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] .journey-relic-shrine.is-active { min-height: calc(100dvh - 100px); }
  .journey-relic-shrine.is-active::before { max-width: clamp(170px, calc(100dvh - 135px), 260px); }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .journey-relic-shrine.is-active>.hm-relic-img { width: min(70%, 205px); height: clamp(130px, calc(100dvh - 195px), 205px); }
  .journey-relic-upgrade-status { min-height: 42px; gap: 3px; }
  .journey-relic-upgrade-status small { font-size: 9px; }
  .journey-relic-upgrade-status strong { font-size: 22px; }
}
@container sanctuary-panel (max-width: 85rem) {
  .journey-root { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
  .journey-overview-copy { width: 72%; }
  .journey-hero-portrait { left: 43%; opacity: .75; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-stories { grid-template-columns: minmax(0, 1fr); }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story { min-height: 0; flex-direction: row; text-align: left; align-items: center; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-body { align-items: flex-start; }
}
@container sanctuary-panel (max-width: 62rem) {
  .journey-root { display: block; }
  .journey-nav { position: static; flex-direction: row; gap: 8px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
  .journey-nav-hero, .journey-nav-foot { display: none; }
  .journey-nav>[role="tab"] { width: auto; flex: 1 0 154px; min-height: 68px; padding: 10px; border-left: 0; border-bottom: 2px solid #9dbcd228; }
  .journey-nav>[role="tab"][aria-selected="true"] { border-left: 0; border-bottom-color: var(--journey-accent); }
  .journey-nav>[role="tab"]>svg { width: 32px; height: 32px; }
  .journey-overview-copy { width: 80%; }
  .journey-overview-hero { padding: 24px; }
  .journey-hero-portrait { left: 25%; opacity: .4; }
  .journey-discover { grid-template-columns: minmax(0, 1fr); }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-relic-box { grid-template-columns: minmax(0, 1fr); }
  .journey-relic-shrine { min-height: 320px; }
}
@media (max-width: 600px) {
  .at-prototype.sanctuary #sanctuary-drawer[data-category="heroMastery"] { padding-inline: 12px; }
  .journey-overview-copy { width: 100%; }
  .journey-overview-hero { padding: 24px 16px; min-height: 0; }
  .journey-hero-portrait { left: 0; opacity: .2; }
  .journey-hero-portrait>span { display: none; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-header-left { gap: 24px; padding-inline: 6px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-emblem-frame { width: 96px; flex-basis: 96px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-level-name { font-size: 23px; }
  .journey-section-heading { align-items: flex-start; flex-wrap: wrap; gap: 16px; }
  .journey-section-heading>.journey-counter { min-width: 0; font-size: 32px; padding-left: 16px; }
  .journey-rank-preview { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .journey-rank-preview>img { width: 44px; height: 56px; }
  .journey-rank-preview>button { width: 100%; }
  .journey-discover>button { padding: 18px; }
  .journey-mission-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-mission-filters button { justify-content: space-between; padding: 12px; font-size: 14px; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story { flex-direction: column; padding: 28px 20px; text-align: center; }
  .sanctuary #sanctuary-drawer[data-category="heroMastery"] #hm-wrap .hm-secret-story-body { align-items: center; }
  .sanctuary #hm-story-modal[data-journey-reader] .hm-story-modal-card { grid-template-columns: minmax(0, 1fr); }
  .sanctuary #hm-story-modal[data-journey-reader] .hm-story-modal-rune-wrap { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .at-prototype.sanctuary .journey-scene * { animation: none !important; }
  .journey-scene-dust { display: none; }
  .journey-rank:hover, .journey-rank:hover .journey-rank-art { transform: none; }
}