/* Cinematic scene and shared modal art direction. All selectors are confined
   to the standalone V3 sanctuary so live Codex and combat screens keep theirs. */
.at-prototype.sanctuary{--san-metal:#dec797;--san-edge:#b8a27350;--san-glass:#0a1724;--at-panel:#0b1926;--at-inset:#07131f;--at-muted:#9dacb9;--at-line:#bfd0df18;--at-gold:#dbc295;--at-radius:2px;--at-gap:18px;--at-padding:22px}
.at-prototype.sanctuary #codex-detail-identity.at-hero-copy{top:19%;width:34%;max-width:520px}
.sanctuary .sanctuary-name-line{margin-bottom:20px}
.sanctuary #at-title{color:#d8cba9;font-size:11px;letter-spacing:.14em}
.sanctuary .at-tags{margin-bottom:24px;color:#d7dce0}
.sanctuary .at-hero.sanctuary-scene{min-height:580px}
.sanctuary .sanctuary-character-wrap{inset:7% 10% 6% 36%}
.sanctuary .sanctuary-shade{background:linear-gradient(90deg,#050d16e8 0%,#07121dbb 24%,#07111b55 42%,transparent 63%,#070e1722 85%,#070e1970 100%),linear-gradient(0deg,#050b14dc 0%,#08111b60 14%,transparent 36%,#050c1920 100%)}
/* Real values + relative, segmented meters. Element colors carry the type. */
.sanctuary #sanctuary-skin-logo{position:absolute;left:42.5%;bottom:3%;width:18%;height:13%;object-fit:contain;object-position:left bottom;z-index:3;pointer-events:none;user-select:none;filter:drop-shadow(0 3px 8px #000c)}
.sanctuary #sanctuary-skin-logo[hidden]{display:none}
@media (max-height:600px) and (orientation:landscape){.sanctuary #sanctuary-skin-logo{bottom:12%;height:12%}}
.sanctuary #sanctuary-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;width:100%;max-width:445px;border:0;padding:0;margin:0 0 26px}
.sanctuary .sanctuary-stat{--stat-color:#c0b092;position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 10px;text-align:left;padding:0 0 11px;border:0;background:transparent;color:var(--stat-color);min-width:0;transition:filter .25s,translate .25s}
.sanctuary .sanctuary-stat--hp{--stat-color:#7bc8a6}.sanctuary .sanctuary-stat--mana{--stat-color:#7dcce5}.sanctuary .sanctuary-stat--attackPower{--stat-color:#e8bb76}.sanctuary .sanctuary-stat--magicPower{--stat-color:#baa3ec}
.sanctuary #sanctuary-stats .sanctuary-stat-icon{grid-row:1/3;color:var(--stat-color);width:40px;height:40px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--stat-color) 30%,transparent))}
.sanctuary-stat-icon svg{width:100%;height:100%}
.sanctuary #sanctuary-stats .sanctuary-stat-copy{display:flex;flex-direction:column;gap:2px}
.sanctuary .sanctuary-stat-copy>span{font-size:10px;color:#b4bdc5;letter-spacing:.02em}
.sanctuary #sanctuary-stats .sanctuary-stat-copy strong{font:23px/1.2 var(--at-serif);color:#eee8d9;text-shadow:0 0 18px color-mix(in srgb,var(--stat-color) 30%,transparent)}
.sanctuary #sanctuary-stats .sanctuary-stat-track{position:absolute;inset:auto 0 0;height:4px;background:#dae5ed1c;mask-image:repeating-linear-gradient(90deg,#000 0,#000 calc(20% - 4px),transparent calc(20% - 4px),transparent 20%)}
.sanctuary-stat-track>i{position:relative;display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--stat-color) 55%,#183142),var(--stat-color));box-shadow:0 0 13px var(--stat-color);overflow:hidden}
.sanctuary-stat-track>i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff9,transparent);width:25%;animation:sanctuary-stat-shine 6s ease-in-out infinite}
.sanctuary-stat:hover{filter:brightness(1.3);translate:0 -2px}
@keyframes sanctuary-stat-shine{0%,30%{transform:translateX(-110%);opacity:0}45%{opacity:.8}70%,100%{transform:translateX(450%);opacity:0}}
.sanctuary .sanctuary-arsenal{margin:0 0 30px}
.sanctuary .sanctuary-arsenal>p{display:none}
.sanctuary #sanctuary-abilities{gap:11px}
.sanctuary .sanctuary-ability{width:70px;height:70px;padding:3px;border:1px solid #d3c09880;box-shadow:inset 0 0 0 1px #050912,0 5px 15px #0008;border-radius:1px;background:#07101bd9;isolation:isolate}
.sanctuary .sanctuary-ability::before{content:'';position:absolute;inset:-4px;border:1px solid #d8c08325;pointer-events:none;clip-path:polygon(0 0,25% 0,25% 3%,3% 3%,3% 25%,0 25%,0 100%,75% 100%,75% 97%,97% 97%,97% 75%,100% 75%,100% 0)}
.sanctuary .sanctuary-ability>span{font-size:10px;right:2px;bottom:1px}
.sanctuary .sanctuary-ability:hover{translate:0 -4px;transform:none;border-color:#f0d9a7;box-shadow:0 0 25px color-mix(in srgb,var(--hero-accent) 40%,transparent),inset 0 0 0 1px #050912}
/* Portrait carousel: enlarged center, recessed neighbors, rarity gems/locks. */
.sanctuary .sanctuary-looks{width:580px;max-width:calc(100vw - var(--scene-edge) - 80px);margin:0;position:relative}
.sanctuary-look-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sanctuary-look-heading p{margin:0;font-size:8px;letter-spacing:.2em;color:#9facb3}
.sanctuary-look-heading>button{padding:0;border:0;background:none;color:#c3b492;font-size:9px}
.sanctuary-skin-carousel{display:flex;align-items:center;gap:7px;min-width:0}
.sanctuary-skin-carousel>button{height:36px;width:24px;padding:0;background:none;border:0;color:#c4ac77;font:30px Georgia,serif;flex-shrink:0}
.sanctuary-skin-carousel>button:disabled{opacity:.2;cursor:default}
#sanctuary-skin-rail{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-items:center;gap:0;flex:1;min-width:0;height:150px;overflow-x:clip;overflow-y:visible}
.sanctuary-skin-portrait[data-position="-1"]{justify-self:end}.sanctuary-skin-portrait[data-position="1"]{justify-self:start}
.sanctuary-skin-portrait{position:relative;flex:none;width:160px;height:102px;padding:2px;border:1px solid #a7b5c640;background:#081524;isolation:isolate;transition:filter .25s,border-color .25s,scale .25s}
.sanctuary-skin-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%;filter:brightness(.68) saturate(.7)}
.sanctuary-skin-portrait.is-current{height:143px;width:200px;margin:0 -1px;border:2px solid #e8cd8c;box-shadow:0 0 0 2px #3a2c14,0 0 24px #d3ae4930;z-index:2}
.sanctuary-skin-portrait.is-current img{filter:none}
.sanctuary-skin-portrait:hover{border-color:#e8cd8c;filter:brightness(1.2)}
.sanctuary-skin-gem{position:absolute;width:9px;height:9px;top:-5px;left:calc(50% - 5px);rotate:45deg;background:linear-gradient(135deg,#e7c680,#805d25);border:1px solid #f2d798;box-shadow:0 0 6px #f2d79866;z-index:3}
.sanctuary-skin-gem--epic{background:linear-gradient(135deg,#e7c2ff,#7d42c1);border-color:#d4a5fc}
.sanctuary-skin-gem--legendary{background:linear-gradient(135deg,#ffdf82,#c77828)}
.sanctuary-skin-gem--upgraded{background:linear-gradient(135deg,#eafcff,#3bbbbd);border-color:#aff1ef}
.sanctuary-skin-lock{position:absolute;inset:auto 0 5px;display:flex;justify-content:center;color:#e0cf9a;filter:drop-shadow(0 2px 4px #000)}
.sanctuary-skin-lock svg{width:20px;height:20px;background:#07101c80;border-radius:50%;padding:2px}
.sanctuary-look-caption{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:7px;min-height:18px}
.sanctuary-look-caption>span{font-size:10px;color:#d7c59e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.sanctuary .sanctuary-art-link{padding:0;font-size:9px;color:#a7b1b6}
/* Five engraved insignia with illuminated tile faces. */
.sanctuary .sanctuary-dock{right:clamp(76px,6vw,116px);top:45%;gap:10px}
.sanctuary .sanctuary-dock button{width:91px;min-height:83px;gap:2px;color:#e0c38c;isolation:isolate;background:linear-gradient(145deg,#1a2e3a99,#081522b0);border:1px solid #d5bd7a45;box-shadow:inset 0 0 0 3px #070f1833,0 6px 22px #0003;transition:border-color .25s,box-shadow .25s,translate .25s}
.sanctuary .sanctuary-dock button::before{content:'';inset:3px;border:1px solid #cdb37e24;clip-path:polygon(0 0,25% 0,25% 1%,1% 1%,1% 25%,0 25%,0 100%,75% 100%,75% 99%,99% 99%,99% 75%,100% 75%,100% 0);background:none;pointer-events:none}
.sanctuary .sanctuary-dock button::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 10%,#e8ca7d28,transparent 66%),linear-gradient(115deg,transparent 30%,#afd8e410 50%,transparent 70%);z-index:-1;opacity:.6;animation:sanctuary-tile-light 9s ease-in-out infinite;pointer-events:none}
.sanctuary .sanctuary-dock button:nth-child(2)::after{animation-delay:-2s}.sanctuary .sanctuary-dock button:nth-child(3)::after{animation-delay:-4s}.sanctuary .sanctuary-dock button:nth-child(4)::after{animation-delay:-6s}
.sanctuary .sanctuary-dock .sanctuary-insignia{width:47px;height:47px;fill:none;stroke:none;filter:drop-shadow(0 2px 2px #0009) drop-shadow(0 0 8px #ead29920)}
.sanctuary .sanctuary-dock span{font-size:9px;letter-spacing:.07em;color:#e4d5b6}
.sanctuary .sanctuary-dock button:hover,.sanctuary .sanctuary-dock button.is-selected{translate:-4px 0;transform:none;border-color:#e7ca87;box-shadow:inset 0 0 26px #c4ad5c20,0 0 24px #e4bf6a36;color:#fff0c8}
.sanctuary .sanctuary-dock button:hover::after{opacity:1}
.sanctuary .sanctuary-progress{position:absolute;right:clamp(76px,6vw,116px);bottom:65px;width:310px;max-width:none;padding:15px 17px;gap:14px;background:linear-gradient(130deg,#0c1b2ae8,#07111ca6);border:1px solid #d1b7784f;box-shadow:inset 0 1px #fff1,0 10px 30px #0005;z-index:3}
.sanctuary-progress-badge{width:52px;height:60px;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 0 12px #cfb06e40)}
.sanctuary .sanctuary-progress-copy strong{font-size:10px}
.sanctuary .sanctuary-bottom{right:clamp(76px,6vw,116px);bottom:23px}
@keyframes sanctuary-tile-light{0%,100%{opacity:.35;filter:hue-rotate(0deg)}50%{opacity:.9;filter:hue-rotate(20deg)}}
/* Shared central chamber: hero identity, engraved trim and a clean content area. */
.sanctuary .sanctuary-backdrop{background:radial-gradient(ellipse,#0610209c,#02050ce8);backdrop-filter:blur(13px) saturate(.6)}
.sanctuary .sanctuary-drawer{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(1180px,calc(100vw - 100px));height:min(830px,calc(100dvh - 62px));max-height:none;padding:0 28px 0;background:radial-gradient(ellipse at 50% 0%,#29445a5c,transparent 48%),linear-gradient(130deg,#102436fa,#071321fc);border:1px solid #cfb67b70;box-shadow:0 0 0 4px #06101bd9,0 0 0 5px #dbc28a20,0 35px 130px #000c,0 0 60px #29435830;animation:sanctuary-chamber-enter .28s ease-out both!important}
.sanctuary .sanctuary-drawer::before,.sanctuary .sanctuary-drawer::after{content:'';position:absolute;width:62px;height:62px;pointer-events:none;z-index:4}
.sanctuary .sanctuary-drawer::before{left:0;top:0;border-left:2px solid #e3ce9a;border-top:2px solid #e3ce9a}
.sanctuary .sanctuary-drawer::after{right:0;bottom:0;border-right:2px solid #e3ce9a;border-bottom:2px solid #e3ce9a}
.sanctuary-modal-top{display:flex;align-items:center;gap:15px;min-height:84px;flex-shrink:0;border-bottom:1px solid #c4ad7730;position:relative}
#sanctuary-modal-emblem{width:53px;height:53px;flex-shrink:0;color:#d4bd87;filter:drop-shadow(0 0 15px #d4bd8728)}
#sanctuary-modal-emblem svg{width:100%;height:100%}
.sanctuary-modal-identity{display:flex;flex-direction:column;gap:5px}
.sanctuary-modal-identity span{font-size:10px;letter-spacing:.15em;color:#a9bbc7;text-transform:uppercase}
.sanctuary-modal-identity strong{font:22px var(--at-serif);letter-spacing:.04em;color:#ece2cc}
.sanctuary .sanctuary-close{margin:0 0 0 auto;align-self:center;border:1px solid #ceba8840;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;padding:0;color:#d5bf8b;background:#07111c66;font-size:14px}
.sanctuary .sanctuary-close:hover{box-shadow:0 0 20px #d9bd7c30;border-color:#d9bd7c}
.at-prototype.sanctuary #codex-tabs.at-tabs{height:47px;min-height:47px;border:0;background:none;margin-top:2px}
.at-prototype.sanctuary #codex-tabs .codex-tab-btn{background:none;padding:11px 17px;color:#b0bfca;font-size:10px;letter-spacing:.08em}
.at-prototype.sanctuary #codex-tabs .codex-tab-btn.is-active{background:linear-gradient(0deg,#d7ba7230,transparent);border-bottom:1px solid #d6b978;color:#ecd39d}
.sanctuary .at-content{padding:22px 1px 28px;scrollbar-color:#aa966457 #071321}
.sanctuary .at-section-heading{border-bottom:1px solid #b5ccdd14;padding:0 0 18px;margin-bottom:23px;align-items:center}
.sanctuary .at-section-heading h2{font-size:24px;color:#eadfc8}
.sanctuary .at-section-heading>div>p{font-size:8px;color:#93a9b7;margin-bottom:7px;letter-spacing:.16em}
.sanctuary .at-section-heading>p{font-size:11px;line-height:1.7;color:#90a4b4}
.at-prototype.sanctuary .sanctuary-single-section #codex-tabs.at-tabs,.sanctuary .sanctuary-single-section .at-section-heading{display:none}
.sanctuary .sanctuary-single-section .at-content{padding-top:25px}
.at-prototype.sanctuary :is(.at-panel,.hextech-panel,.strategy-section,.hm-panel,.ch-panel,.codex-video-card){border-color:#a9bfce22;border-radius:2px;background:linear-gradient(145deg,#162e3f70,#0816228c);box-shadow:inset 0 1px #e0eff905,0 7px 20px #0002}
.at-prototype.sanctuary .at-panel-heading{border-color:#b6c6d516;gap:12px;padding-bottom:16px;margin-bottom:19px}
.at-prototype.sanctuary .at-panel-heading h3{color:#e8dac0;font-size:18px}
.at-prototype.sanctuary .at-panel-heading>i{font-size:18px;opacity:.35}
.at-prototype.sanctuary .gc-bio-text{color:#bbc9d3}
.at-prototype.sanctuary .at-stat-panel .gc-stat{background:#08152180;border-color:#bfd3df14}
.at-prototype.sanctuary .at-button,.sanctuary .at-text-button,.sanctuary .ability-vfx-preview-btn{background:linear-gradient(130deg,#7b654330,#152b3d90);border-color:#cfb37660;color:#e8d5ad;border-radius:1px;box-shadow:inset 0 1px #e4d0a512}
.at-prototype.sanctuary #at-ability-nav button{padding:13px 12px;border-radius:1px;background:linear-gradient(135deg,#142c3d88,#081725);border-color:#bdcfda1c}
.at-prototype.sanctuary #at-ability-nav button[aria-selected="true"]{background:linear-gradient(130deg,#705d352d,#162d3e);border-color:#dfc38688;box-shadow:inset 0 2px #e1c27c55,0 0 20px #dfc38608}
.at-prototype.sanctuary #codex-abilities>.ability-box{background:linear-gradient(120deg,#112637,#071420);border-color:#b8cbd82e;border-radius:2px;overflow:hidden}
.at-prototype.sanctuary #codex-abilities .ability-icon-wrapper{background:radial-gradient(ellipse,color-mix(in srgb,var(--hero-accent) 13%,transparent),transparent 66%),#091522;border-color:#cfb37620}
.at-prototype.sanctuary #codex-abilities .ability-fx-row{background:#07142190;border-color:#a0bfd41c;border-radius:1px}
.sanctuary .at-mechanics{background:#0b1d2c;border-color:#cfb37630;border-radius:2px}
.sanctuary .at-collectible,.sanctuary .at-showcase{border-color:#b5c6d42b;border-radius:2px;background:#0a1724}
.sanctuary .at-collectible:hover,.sanctuary .at-showcase:hover{border-color:#d4b57580;box-shadow:0 0 25px #d4b57515}
/* Match the original Codex gallery: full artwork, family crest and tier/ownership badges. */
.at-prototype.sanctuary .sanctuary-skin-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sanctuary #codex-skins .sanctuary-shop-card{width:100%;aspect-ratio:2/1;cursor:pointer;border-radius:3px;background:#050910}
.sanctuary #codex-skins .sanctuary-shop-card:focus-visible{outline:2px solid var(--csk-accent);outline-offset:3px}
.at-prototype.sanctuary #codex-skins .sanctuary-shop-card .skin-card-motion-toggle{left:16px;right:auto;z-index:8}
.sanctuary .hm-hero{background:radial-gradient(ellipse at 25% 30%,#374d5745,transparent 55%),linear-gradient(130deg,#102a3b,#081521);border-color:#c5b57c45}
.sanctuary .hm-tabs,.sanctuary .hm-mission-card{background:#0b1e2d;border-color:#b5c6d425}
/* Nested popups share the chamber's glass, metal and centered composition. */
.sanctuary :is(.at-art-dialog,.csk-image-modal-stage,.hm-story-modal-card,.hero-purchase-modal-window,.codex-vfx-preview-dialog){border:1px solid #cfb67b70;border-radius:2px;background:radial-gradient(ellipse at 50% 0%,#29445a45,transparent 55%),linear-gradient(130deg,#102436,#071321);box-shadow:0 0 0 3px #06101bd9,0 0 0 4px #dbc28a20,0 35px 100px #000b;color:#ddd8c9}
.at-prototype.sanctuary .at-art-dialog{width:min(1180px,calc(100vw - 70px));max-width:none;max-height:calc(100dvh - 70px);padding:12px;overflow:auto}
.at-prototype.sanctuary .at-art-dialog>img{max-height:calc(100dvh - 190px);border:1px solid #d1bd882a;background:#030a12}
.at-prototype.sanctuary .at-art-dialog>div{padding:18px 18px 7px}
.at-prototype.sanctuary .at-art-dialog h2{font-size:24px;color:#ecdfc6}
.sanctuary .at-art-dialog::backdrop{background:#020710dc;backdrop-filter:blur(13px) saturate(.65)}
.sanctuary .hero-purchase-modal{background:#020710dc;backdrop-filter:blur(13px)}
.sanctuary .hero-purchase-modal-window{--hpm-scale:1;width:min(640px,calc(100vw - 56px));max-height:calc(100dvh - 64px);transform:none!important}
/* Limit the artwork by laptop height so purchase controls stay in view. */
.sanctuary .hero-purchase-modal-window--skin{width:min(720px,calc(100vw - 32px),max(420px,calc(135dvh - 400px)))!important;max-height:calc(100dvh - 32px)!important}
.sanctuary .hero-purchase-modal-window--skin{scrollbar-width:none;-ms-overflow-style:none}
.sanctuary .hero-purchase-modal-window--skin::-webkit-scrollbar{display:none}
.sanctuary .hero-purchase-modal-body{padding:25px 28px;background:transparent}
.sanctuary .hero-purchase-modal-title{font:25px var(--at-serif);color:#ecdfc6}
.sanctuary .hm-story-modal-card{width:min(800px,calc(100vw - 56px));max-height:calc(100dvh - 64px);padding:32px;overflow:auto}
.sanctuary .hm-story-modal-title,.sanctuary #hm-story-modal-title{color:#e9dbc0;font-family:var(--at-serif)}
.sanctuary .hm-story-modal-backdrop,.sanctuary .csk-image-modal-backdrop{background:#020710dc;backdrop-filter:blur(13px)}
.sanctuary .csk-image-modal-stage{width:min(1180px,calc(100vw - 70px));height:min(840px,calc(100dvh - 70px));padding:14px;animation:none}
.sanctuary .csk-image-modal-caption{background:linear-gradient(#091724,#07121d);border-color:#bfa36d35;color:#ecdfc6}
.sanctuary .csk-image-modal-stage:before,.sanctuary .csk-image-modal-stage:after{border-color:#d0b47e75;width:44px;height:44px}
.sanctuary #ability-popup{z-index:10050}
.sanctuary #ability-popup .ability-popup-bg{background:#020710dc;backdrop-filter:blur(13px)}
.at-prototype.sanctuary #ability-popup .ability-popup-window{position:relative;width:min(890px,calc(100vw - 56px));max-height:calc(100dvh - 64px);padding:34px;border:1px solid #cfb67b70;border-radius:2px;background:radial-gradient(ellipse at 10% 0%,#29445a66,transparent 65%),linear-gradient(130deg,#102436,#071321);box-shadow:0 0 0 4px #06101bd9,0 30px 100px #0009}
.sanctuary #sanctuary-ability-close{position:absolute;right:12px;top:12px;width:28px;height:28px;border:1px solid #cfb67b55;border-radius:50%;color:#e3cea6;background:#07111c;font-size:12px}
.sanctuary #ability-popup-name{font:26px var(--at-serif);color:#e6d1aa}
.at-prototype.sanctuary #ability-popup .ability-popup-info h2{color:#e6d1aa;text-shadow:none}
.sanctuary #ability-popup .ability-popup-info>p:not(#ability-popup-desc){display:inline-flex;gap:7px;align-items:center;margin:15px 9px 0 0;padding:8px 12px;border:1px solid #c5ad6e30;background:#06111d66;color:#c4d0d9;font-size:11px}
.at-prototype.sanctuary #ability-popup .ability-popup-window{display:grid;grid-template-columns:150px minmax(0,1fr);gap:25px;text-align:left;align-items:center}
.sanctuary #ability-popup-img{width:138px;height:138px;object-fit:contain;border:1px solid #d3bb824d;padding:4px;background:#06111a;box-shadow:0 0 30px color-mix(in srgb,var(--hero-accent) 18%,transparent)}
.sanctuary .hm-story-modal-card{padding:0;grid-template-columns:180px minmax(0,1fr);overflow:hidden}
.sanctuary .hm-story-modal-rune-wrap{border-color:#d0b47e25;background:radial-gradient(ellipse,color-mix(in srgb,var(--hero-accent) 14%,transparent),transparent 70%),#081622}
.sanctuary .hm-story-modal-content{padding:38px 34px}
.sanctuary .hm-story-modal-kicker,.sanctuary .hm-story-modal-divider{color:#b9a474}
.sanctuary .hm-story-modal-divider i{background:linear-gradient(90deg,#d0b47e70,transparent)}
.sanctuary .codex-vfx-preview-dialog{width:min(1520px,calc(100vw - 60px));height:min(1000px,calc(100dvh - 60px))}
.sanctuary .codex-vfx-preview-head{background:linear-gradient(120deg,#1b354855,#081521);border-color:#cfb67b35;padding:17px 22px}
.sanctuary .codex-vfx-preview-toolbar{background:#0b1c2a;border-color:#cfb67b25}
.sanctuary .codex-vfx-preview-backdrop{background:#020710e0;backdrop-filter:blur(13px)}
.sanctuary .codex-vfx-preview-selected h2{font-family:var(--at-serif);color:#ecdfc6}
.sanctuary .codex-vfx-preview-play{background:linear-gradient(125deg,#aa8b46,#d7b674);color:#0c1620;border-color:#e8cc8d}
.sanctuary .codex-vfx-preview-foot{background:#091825;border-color:#c0a36335}
.sanctuary :is(.at-art-dialog>button,.csk-image-modal-close,.hm-story-modal-close,.hero-purchase-modal-close,.codex-vfx-preview-close){background:#081622d9;border:1px solid #d3bb8255;color:#e8d3a6;border-radius:50%}
@keyframes sanctuary-chamber-enter{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
/* Scale by available height, keeping the portrait row beneath the abilities. */
@media(min-width:901px) and (max-height:900px){
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{top:16%;width:34%}
 .sanctuary .sanctuary-name-line{margin-bottom:17px}.sanctuary .at-tags{margin-bottom:20px}
 .sanctuary #sanctuary-stats{gap:14px 22px;margin-bottom:24px}
 .sanctuary .sanctuary-ability{width:62px;height:62px}.sanctuary .sanctuary-arsenal{margin-bottom:26px}
 .sanctuary .sanctuary-dock button{min-height:76px;width:87px}
 .sanctuary .sanctuary-dock{gap:8px}
}
@media(min-width:901px) and (max-height:720px){
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{top:14%}
 .sanctuary .sanctuary-name-line{margin-bottom:14px}.sanctuary .at-tags{margin-bottom:16px}
 .sanctuary #sanctuary-stats{gap:12px 20px;margin-bottom:22px;max-width:405px}
 .sanctuary .sanctuary-stat{grid-template-columns:33px minmax(0,1fr);gap:0 8px;padding-bottom:9px}
 .sanctuary #sanctuary-stats .sanctuary-stat-icon{width:33px;height:33px}
 .sanctuary #sanctuary-stats .sanctuary-stat-copy strong{font-size:20px}
 .sanctuary .sanctuary-ability{width:55px;height:55px}.sanctuary #sanctuary-abilities{gap:9px}
 .sanctuary .sanctuary-arsenal{margin-bottom:22px}
 #sanctuary-skin-rail{height:123px}.sanctuary-skin-portrait{width:136px;height:87px}.sanctuary-skin-portrait.is-current{width:170px;height:119px}
 .sanctuary .sanctuary-dock button{width:78px;min-height:66px}.sanctuary .sanctuary-dock .sanctuary-insignia{width:40px;height:40px}
 .sanctuary .sanctuary-dock{gap:7px;top:43%}
 .sanctuary .sanctuary-progress{bottom:43px;width:285px;padding:11px 14px}
 .sanctuary-progress-badge{width:43px;height:50px}
 .sanctuary .sanctuary-bottom{bottom:17px}
}
@media(min-width:901px) and (max-width:1200px){
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{width:38%}
 .sanctuary .sanctuary-dock{right:76px}.sanctuary .sanctuary-progress{right:76px;width:260px}
 .sanctuary .sanctuary-ability{width:53px;height:53px}.sanctuary #sanctuary-abilities{gap:8px}
 .sanctuary .sanctuary-dock button{width:72px}
 .sanctuary .at-tags{font-size:10px}
}
@media(max-width:900px){
 .sanctuary .at-hero.sanctuary-scene{min-height:0;padding-bottom:140px}
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{position:relative;top:auto;width:84%;margin:470px 8% 0}
 .sanctuary .sanctuary-character-wrap{top:60px;left:12%;right:8%;height:395px;bottom:auto}
 .sanctuary #sanctuary-stats{max-width:none;gap:20px 24px}
 .sanctuary .sanctuary-ability{width:60px;height:60px}.sanctuary #sanctuary-abilities{gap:10px}
 .sanctuary .sanctuary-looks{width:100%;max-width:100%}
 .sanctuary .sanctuary-progress{position:relative;inset:auto;width:84%;margin:28px 8% 0;max-width:none}
 .sanctuary .sanctuary-dock{position:fixed;inset:auto 0 0;transform:none;gap:0;padding:5px 0 max(5px,env(safe-area-inset-bottom));background:#071321f5}
 .sanctuary .sanctuary-dock button{width:calc(100% / 5 - 4px);min-height:64px;border:1px solid #d5bd7a25;background:linear-gradient(145deg,#19314366,#08152266);box-shadow:none;gap:0}
 .sanctuary .sanctuary-dock .sanctuary-insignia{width:34px;height:34px}
 .sanctuary .sanctuary-dock span{font-size:8px}.sanctuary .sanctuary-dock button:hover{translate:none}
 .sanctuary .sanctuary-dock button::before{display:block}
 .sanctuary .sanctuary-bottom{bottom:95px;right:8%}
 .sanctuary .sanctuary-drawer{inset:50% auto auto 50%;width:calc(100vw - 28px);height:calc(100dvh - 100px);padding:0 18px}
 .sanctuary-modal-top{min-height:74px}.sanctuary-modal-identity strong{font-size:20px}
 .sanctuary .at-section-heading h2{font-size:22px}
 .at-prototype.sanctuary #codex-tabs .codex-tab-btn{padding:10px 13px}
}
@media(max-width:500px){
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{margin-top:445px}
 .sanctuary .sanctuary-ability{width:46px;height:46px}.sanctuary #sanctuary-abilities{gap:9px}
 .sanctuary .sanctuary-character-wrap{height:375px}
 .sanctuary #sanctuary-stats{gap:18px 16px}
 .sanctuary .sanctuary-stat{grid-template-columns:32px minmax(0,1fr);gap:0 7px}
 .sanctuary #sanctuary-stats .sanctuary-stat-icon{width:32px;height:32px}
 .sanctuary #sanctuary-stats .sanctuary-stat-copy strong{font-size:20px}.sanctuary .sanctuary-stat-copy>span{font-size:9px}
 .sanctuary-skin-portrait{width:118px;height:82px}.sanctuary-skin-portrait.is-current{width:152px;height:116px}#sanctuary-skin-rail{height:123px}
 .at-prototype.sanctuary .sanctuary-skin-collection{grid-template-columns:1fr;gap:14px}
 .sanctuary .sanctuary-drawer{width:calc(100vw - 22px);padding:0 12px}
 #sanctuary-modal-emblem{width:39px;height:39px}.sanctuary-modal-top{gap:10px;min-height:68px}
 .sanctuary .at-content{padding-top:16px}.sanctuary .at-section-heading{padding-bottom:15px;margin-bottom:18px}
 .sanctuary .at-section-heading h2{font-size:20px}
 .sanctuary :is(.csk-image-modal-stage,.hm-story-modal-card,.hero-purchase-modal-window,.codex-vfx-preview-dialog){width:calc(100vw - 26px);max-height:calc(100dvh - 36px)}
 .sanctuary .codex-vfx-preview-dialog{height:calc(100dvh - 36px)}
 .at-prototype.sanctuary .at-art-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 36px);padding:7px}
 .at-prototype.sanctuary #ability-popup .ability-popup-window{width:calc(100vw - 26px);padding:25px 20px}
 .sanctuary #ability-popup-name{font-size:22px}.sanctuary .hm-story-modal-card{padding:25px 20px}
 .at-prototype.sanctuary #ability-popup .ability-popup-window{grid-template-columns:1fr;gap:17px}
 .sanctuary #ability-popup-img{width:90px;height:90px}
 .sanctuary .hm-story-modal-card{padding:0;grid-template-columns:1fr}
 .sanctuary .hm-story-modal-rune-wrap{min-height:145px}
 .sanctuary .hm-story-modal-content{padding:25px 22px}
}
.sanctuary-motion-paused .sanctuary-stat-track>i::after,.sanctuary-motion-paused .sanctuary-dock button::after{animation-play-state:paused}
@media(max-width:650px){.at-prototype.sanctuary .sanctuary-skin-collection{grid-template-columns:1fr;gap:14px}}
@media(max-width:360px){.sanctuary-skin-portrait{width:102px}.sanctuary-skin-portrait.is-current{width:136px}.sanctuary-skin-carousel>button{width:19px}.sanctuary-skin-carousel{gap:5px}}
@media(prefers-reduced-motion:reduce){.sanctuary .sanctuary-stat-track>i::after,.sanctuary .sanctuary-dock button::after,.sanctuary .sanctuary-drawer{animation:none!important}.sanctuary .sanctuary-ability,.sanctuary .sanctuary-stat{translate:none}}

/* Reserve the portrait row's vertical space on short laptops. */
@media(min-width:901px) and (max-height:720px){
 .sanctuary .at-toolbar{height:64px}
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{top:8%}
 .sanctuary .sanctuary-name-line{margin-bottom:12px}
 .sanctuary .at-tags{margin-bottom:12px}
 .sanctuary #sanctuary-stats{margin-bottom:18px}
 .sanctuary .sanctuary-arsenal{margin-bottom:16px}
 .sanctuary .sanctuary-looks{width:502px}
 .sanctuary .sanctuary-look-heading{margin-bottom:6px}
 .sanctuary .sanctuary-look-caption{margin-top:5px}
}

/* Keep activation text inside the icon column rather than a narrow vertical gauge. */
.at-prototype.sanctuary #codex-abilities .ability-act-gauge{display:block;left:24px;right:24px;bottom:28px;top:auto;width:auto;height:4px}
.at-prototype.sanctuary #codex-abilities .ability-act-gauge-label{left:auto;right:0;bottom:12px;top:auto;font-size:12px;gap:8px}
.at-prototype.sanctuary #codex-abilities .ability-act-gauge-label small{font-size:10px;color:#aabac7}
.at-prototype.sanctuary #codex-abilities .ability-act-gauge-label strong{font-size:15px;color:#e7d5b1}
@media(max-width:560px){.at-prototype.sanctuary #codex-abilities .ability-icon-wrapper{height:260px;min-height:260px;padding:30px 20px 80px}}
.sanctuary .hm-hero-art{display:none}
#sanctuary-mechanics{display:flex;flex-direction:column;gap:24px;min-width:0}
#sanctuary-mechanics>*{min-width:0;max-width:100%}
.sanctuary .sanctuary-dock button{width:calc(100% / 6 - 4px)}
@media(min-width:901px){
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{width:580px;max-width:calc(100vw - var(--scene-edge) - 180px)}
 .sanctuary #at-title{font-size:12px}
 .sanctuary .at-tags{font-size:13px}
 .sanctuary #sanctuary-stats{max-width:none;gap:18px 28px}
 .sanctuary .sanctuary-stat{grid-template-columns:44px minmax(0,1fr)}
 .sanctuary #sanctuary-stats .sanctuary-stat-icon{width:44px;height:44px}
 .sanctuary .sanctuary-stat-copy>span{font-size:12px}
 .sanctuary #sanctuary-stats .sanctuary-stat-copy strong{font-size:28px}
 .sanctuary #sanctuary-abilities{width:100%;justify-content:space-between;gap:12px}
 .sanctuary .sanctuary-ability{width:78px;height:78px}
 .sanctuary .sanctuary-dock button{width:91px}
}
@media(min-width:901px) and (max-height:900px){
 .sanctuary .sanctuary-ability{width:68px;height:68px}
 .sanctuary #sanctuary-stats .sanctuary-stat-copy strong{font-size:26px}
 .sanctuary .sanctuary-dock button{width:87px;min-height:70px}
 .sanctuary .sanctuary-dock{gap:7px}
}
@media(min-width:901px) and (max-height:720px){
 .at-prototype.sanctuary #codex-detail-identity.at-hero-copy{width:502px}
 .sanctuary #at-title{font-size:11px}
 .sanctuary .at-tags{font-size:12px}
 .sanctuary #sanctuary-stats{gap:12px 24px;margin-bottom:16px}
 .sanctuary .sanctuary-stat{grid-template-columns:38px minmax(0,1fr)}
 .sanctuary #sanctuary-stats .sanctuary-stat-icon{width:38px;height:38px}
 .sanctuary .sanctuary-stat-copy>span{font-size:11px}
 .sanctuary #sanctuary-stats .sanctuary-stat-copy strong{font-size:25px}
 .sanctuary .sanctuary-ability{width:64px;height:64px}
 .sanctuary .sanctuary-dock button{width:78px;min-height:58px}
 .sanctuary .sanctuary-dock{gap:5px}
}