/* V3 appearance library. The artwork has its own stage; controls sit on a quiet surface. */
.at-prototype.sanctuary #sanctuary-drawer[data-category="skins"] {
  inset:0; width:auto; height:auto; max-width:none; margin:0; padding:0; border:0; box-shadow:none;
  isolation:isolate; background:#09131e; --wardrobe-gutter:clamp(20px,3.5vw,80px); --wardrobe-header:88px;
  font-family:Montserrat,'Segoe UI',sans-serif;
}
.sanctuary #sanctuary-drawer[data-category="skins"]::before,
.sanctuary #sanctuary-drawer[data-category="skins"]::after { display:none; }
.sanctuary #sanctuary-drawer[data-category="skins"] .sanctuary-modal-top {
  position:absolute; inset:0 var(--wardrobe-gutter) auto; z-index:5; height:var(--wardrobe-header); min-height:0;
  margin:0; padding:12px 0; border:0; pointer-events:none;
}
.sanctuary #sanctuary-drawer[data-category="skins"] .sanctuary-modal-identity strong { font-size:28px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #sanctuary-modal-emblem { width:44px; height:44px; }
.sanctuary #sanctuary-drawer[data-category="skins"] .sanctuary-close { pointer-events:auto; align-self:center; margin:0 0 0 auto; }
.sanctuary #sanctuary-drawer[data-category="skins"] :is(#codex-tabs,.at-section-heading) { display:none; }
.sanctuary #sanctuary-drawer[data-category="skins"] #at-content {
  position:relative; flex:1; width:100%; height:100%; min-height:0; padding:0; overflow:hidden; scrollbar-gutter:auto;
}
.sanctuary #sanctuary-drawer[data-category="skins"] :is(#codex-tab-skins,#codex-skins) { width:100%; height:100%; max-width:none; margin:0; padding:0; overflow:hidden; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins { display:block; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins [hidden] { display:none!important; }
.wardrobe-root { display:flex; flex-direction:column; position:relative; isolation:isolate; width:100%; height:100%; padding:var(--wardrobe-header) var(--wardrobe-gutter) 0; background:#09131e; color:#dce4ea; }
.wardrobe-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins :is(button,input,select,p,small,span,strong,label,figcaption,a) { font-family:Montserrat,'Segoe UI',sans-serif; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins :is(button,input,select,a):focus-visible { outline:2px solid #e1c894; outline-offset:3px; }
.wardrobe-root button,.wardrobe-root input,.wardrobe-root select,.wardrobe-root a { touch-action:manipulation; }
.wardrobe-root button:disabled { opacity:.5; cursor:default; }
.wardrobe-view-controls { display:flex; align-items:center; justify-content:space-between; flex:0 0 60px; gap:24px; width:100%; max-width:2200px; margin:0 auto; border-bottom:1px solid #a4b9c11f; }
.wardrobe-view-list { display:flex; align-self:stretch; gap:28px; min-width:0; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-view-list button {
  display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 0; border:0; border-bottom:2px solid transparent;
  background:none; border-radius:0; color:#9baebc; font-size:15px; font-weight:500; white-space:nowrap; cursor:pointer;
}
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-view-list button[aria-pressed="true"] { border-bottom-color:#dbc496; color:#f1dfba; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-view-list small { color:#7e94a4; font-size:12px; font-weight:400; }
.wardrobe-utilities { display:flex; align-items:center; gap:24px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-album a { display:flex; align-items:center; min-height:44px; padding:0; background:none; border:0; color:#b2c0c9; font-size:13px; text-decoration:none; white-space:nowrap; }
.wardrobe-hero-nav { display:flex; gap:6px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-hero-nav button { width:40px; min-height:40px; padding:0; border:1px solid #9bb4c12e; border-radius:4px; background:none; color:#b9c7d0; font:26px/1 Georgia,serif; cursor:pointer; }
#wardrobe-gallery { display:grid; grid-template-columns:clamp(300px,23vw,390px) minmax(0,1fr); gap:clamp(24px,3vw,64px); flex:1; min-height:0; width:100%; max-width:2200px; margin:0 auto; padding:28px 0; }
.wardrobe-library { display:flex; flex-direction:column; min-width:0; min-height:0; }
.wardrobe-library-tools { flex:0 0 auto; }
.wardrobe-search { display:block; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-search input { width:100%; min-width:0; min-height:44px; padding:10px 14px; border:1px solid #9bb3c12e; border-radius:5px; background:#0e1d2b; color:#e4ebef; font-size:14px; }
.wardrobe-search input::placeholder { color:#8196a7; }
.wardrobe-library-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0 10px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins [data-wardrobe-count] { color:#91a4b3; font-size:12px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-filter select { min-height:36px; max-width:150px; padding:6px 22px 6px 8px; border:0; border-radius:4px; background:#0e1d2b; color:#becbd4; font-size:12px; cursor:pointer; }
.wardrobe-rail { display:flex; position:relative; flex-direction:column; flex:1; min-height:0; gap:6px; padding:4px; margin:0 -4px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#64798760 transparent; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-rail > button {
  display:grid; grid-template-columns:96px minmax(0,1fr) 14px; align-items:center; flex:0 0 auto; gap:12px; width:100%; min-height:82px;
  padding:10px; border:1px solid transparent; border-radius:5px; background:none; color:#c4d0d8; text-align:left; cursor:pointer;
}
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-rail > button:hover { background:#132332; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-rail > button[aria-pressed="true"] { border-color:#d5be875c; background:#d5be8710; }
.wardrobe-list-art {
  --wardrobe-frame-paint:linear-gradient(135deg,#52697c,#c4d3dc,#647b8d);
  --wardrobe-frame-glow:#8aa4ba55;
  display:block; position:relative; isolation:isolate; width:96px; height:58px; padding:2px;
  border:2px solid transparent; border-radius:3px;
  background:linear-gradient(#050c13,#050c13) padding-box,var(--wardrobe-frame-paint) border-box;
  background-size:100% 100%,240% 240%; background-position:center,35% 50%;
  box-shadow:0 0 7px var(--wardrobe-frame-glow),inset 0 0 0 1px #ffffff28;
}
.wardrobe-list-art > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:1px; }
[data-wardrobe-frame="epic"] .wardrobe-list-art { --wardrobe-frame-paint:linear-gradient(135deg,#8750c8,#d8b3ff,#9d5de4); --wardrobe-frame-glow:#ae6aff55; }
[data-wardrobe-frame="legendary"] .wardrobe-list-art { --wardrobe-frame-paint:linear-gradient(135deg,#ad7b2e,#f2d781,#fff4bd,#d9aa45,#ad7b2e); --wardrobe-frame-glow:#f0c45255; }
[data-wardrobe-frame="mythic"] .wardrobe-list-art { --wardrobe-frame-paint:linear-gradient(115deg,#3d63dd,#6dbbff,#c8fcff,#5480ee,#a2dcff,#4169e5); --wardrobe-frame-glow:#62baff70; }
[data-wardrobe-frame="ultra"] .wardrobe-list-art { --wardrobe-frame-paint:repeating-linear-gradient(115deg,#f067c6 0%,#ffb2e4 10%,#e6ebf4 20%,#a0dbff 30%,#65b7f5 40%,#f067c6 50%); --wardrobe-frame-glow:#e394ea88; }
[data-wardrobe-frame="vip"] .wardrobe-list-art { --wardrobe-frame-paint:repeating-linear-gradient(115deg,#9d6418 0%,#edb936 10%,#fff0a6 20%,#d99d25 30%,#ffde70 40%,#9d6418 50%); --wardrobe-frame-glow:#f6c34799; }
[data-wardrobe-frame="special"] .wardrobe-list-art { --wardrobe-frame-paint:repeating-linear-gradient(115deg,#ff7dcd 0%,#bba1ff 8%,#7ebdff 16%,#9affdf 24%,#fff8af 32%,#ffc183 40%,#ff7dcd 48%); --wardrobe-frame-glow:#e2a1ff88; }
[data-wardrobe-frame="upgraded"] .wardrobe-list-art { --wardrobe-frame-paint:linear-gradient(115deg,#fff,#d7b0ff,#833be4,#fff,#c67dff,#eee0ff,#9951e8,#fff); --wardrobe-frame-glow:#cf9bff88; }
/* The travelling highlight is masked to the rim, leaving the art untouched. */
.wardrobe-list-art::before {
  content:''; position:absolute; z-index:2; inset:-2px; padding:2px; border-radius:4px; opacity:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,#fff4 43%,#fff 50%,#fff4 57%,transparent 65%);
  background-size:300% 100%; background-position:140% 0;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude;
}
/* Every tier, including original artwork, has the same centered faceted gem. */
.wardrobe-list-art::after {
  content:''; position:absolute; z-index:3; bottom:-6px; left:calc(50% - 5px); width:10px; height:10px; rotate:45deg;
  border:1px solid #f0f6ffb3; border-radius:1px; pointer-events:none;
  background:linear-gradient(135deg,#fff9 0 26%,transparent 27% 49%,#07101c88 50% 73%,#fff2 74%),var(--wardrobe-frame-paint);
  background-size:100% 100%,240% 240%; background-position:center,35% 50%;
  box-shadow:0 1px 3px #000b,0 0 7px var(--wardrobe-frame-glow);
}
.sanctuary #codex-skins :is([data-wardrobe-frame="ultra"],[data-wardrobe-frame="vip"],[data-wardrobe-frame="special"],[data-wardrobe-frame="upgraded"]) .wardrobe-list-art { animation:wardrobe-frame-prism 5s ease-in-out infinite alternate; }
.sanctuary #codex-skins :is([data-wardrobe-frame="ultra"],[data-wardrobe-frame="vip"],[data-wardrobe-frame="special"],[data-wardrobe-frame="upgraded"]) .wardrobe-list-art::before { opacity:1; animation:wardrobe-frame-shine 4s ease-in-out infinite; }
.sanctuary #codex-skins :is([data-wardrobe-frame="ultra"],[data-wardrobe-frame="vip"],[data-wardrobe-frame="special"],[data-wardrobe-frame="upgraded"]) .wardrobe-list-art::after { animation:wardrobe-gem-glint 4s ease-in-out infinite; }
[data-wardrobe-frame="ultra"] .wardrobe-list-art::before { background-image:linear-gradient(110deg,transparent 46%,#fff6 49%,#fff 50%,#fff6 51%,transparent 54%); }
[data-wardrobe-frame="vip"] .wardrobe-list-art::before { background-image:linear-gradient(110deg,transparent 43%,#fff0a666 48%,#fff4bd 50%,#fff0a666 52%,transparent 57%); }
@keyframes wardrobe-frame-prism { from { background-position:center,0% 15%; } to { background-position:center,100% 85%; } }
@keyframes wardrobe-frame-shine { 0%,15% { background-position:140% 0; } 70%,100% { background-position:-40% 0; } }
@keyframes wardrobe-gem-glint { 0%,100% { background-position:center,0% 15%; filter:brightness(1); } 50% { background-position:center,100% 85%; filter:brightness(1.5); } }
.sanctuary.sanctuary-motion-paused #codex-skins [data-wardrobe-frame] .wardrobe-list-art,.sanctuary.sanctuary-motion-paused #codex-skins [data-wardrobe-frame] .wardrobe-list-art::before,.sanctuary.sanctuary-motion-paused #codex-skins [data-wardrobe-frame] .wardrobe-list-art::after { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  .sanctuary #codex-skins .wardrobe-root .wardrobe-list-art,.sanctuary #codex-skins .wardrobe-root .wardrobe-list-art::before,.sanctuary #codex-skins .wardrobe-root .wardrobe-list-art::after { animation:none; }
  .sanctuary #codex-skins .wardrobe-root .wardrobe-list-art::before { opacity:0; }
}
.wardrobe-list-copy { display:flex; flex-direction:column; gap:6px; min-width:0; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-list-copy strong { color:#e2e7e9; font-size:14px; line-height:1.4; font-weight:500; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-list-copy small { color:#899eae; font-size:11px; line-height:1.5; letter-spacing:0; }
.wardrobe-selection-mark { visibility:hidden; color:#dec795; font-size:13px; }
.wardrobe-rail > button[aria-pressed="true"] .wardrobe-selection-mark { visibility:visible; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins p.wardrobe-collection-info { flex:0 0 auto; margin:16px 0 0; padding-top:14px; border-top:1px solid #9bb3c11a; color:#71899b; font-size:12px; line-height:1.5; }
.wardrobe-preview { display:flex; position:relative; flex-direction:column; min-width:0; min-height:0; }
.wardrobe-stage { position:relative; flex:1; min-height:0; overflow:hidden; border:1px solid #9cb5c321; border-radius:6px; background:#050c13; pointer-events:none; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-stage > .skin-card { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; aspect-ratio:auto; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; pointer-events:none; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-stage > .skin-card::before,
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-stage > .skin-card::after,
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-stage > .skin-card > :not(.skin-card-art):not(.skin-card-motion) { display:none!important; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-stage > .skin-card > :is(.skin-card-art,.skin-card-motion) { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; aspect-ratio:auto; filter:none; transform:none; animation:none!important; }
/* The full right pane is artwork. Only its family logo and acquisition controls overlay it. */
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-detail { position:absolute; inset:0; padding:0; border:0; background:none; pointer-events:none; }
.wardrobe-brand { position:absolute; left:28px; bottom:28px; width:clamp(160px,24%,320px); max-width:calc(100% - 56px); }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-brand > .skin-family-logo { width:100%; height:auto; max-height:160px; object-fit:contain; object-position:left bottom; margin:0; transform:none; filter:drop-shadow(0 3px 5px #000) drop-shadow(0 0 16px #000c); }
.wardrobe-actions { position:absolute; right:24px; bottom:24px; max-width:calc(65% - 24px); padding:14px 16px; border:1px solid #e2d2b52b; border-radius:5px; background:#06111cdc; pointer-events:auto; }
.wardrobe-action-row { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:20px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-action-row .skin-card-price-row { display:flex; align-items:center; width:auto; margin:0; padding:0; border:0; background:none; }
.wardrobe-action-row .skin-card-price-row > span { display:none; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-action-row strong { display:flex; align-items:center; gap:7px; color:#dbd4e7; font-size:20px; font-weight:500; }
.wardrobe-action-row img { width:22px; height:22px; object-fit:contain; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins button.wardrobe-primary,.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins [data-wardrobe-reset] { min-height:44px; padding:11px 20px; border:1px solid #d7bf88; border-radius:4px; background:#d7bf88; color:#14212a; font-size:14px; font-weight:600; line-height:1.5; cursor:pointer; }
.wardrobe-image-tools { position:absolute; top:16px; right:16px; display:flex; gap:8px; pointer-events:auto; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-image-tools button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #c0cbd54d; border-radius:4px; background:#06111ccc; color:#e2e8ec; font:24px/1 'Segoe UI',sans-serif; cursor:pointer; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-image-tools button:hover { background:#152b3dec; border-color:#dec795; }
.wardrobe-empty { display:grid; place-content:center; flex:1; gap:16px; text-align:center; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-empty h3 { margin:0; color:#e6ddcb; font:28px var(--at-serif); }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-empty p { margin:0; color:#8ea6b7; font-size:14px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .wardrobe-action-error { position:absolute; bottom:112px; right:24px; max-width:80%; margin:0; padding:10px 14px; background:#06111ced; color:#efabae; font-size:13px; }
.wardrobe-assets { flex:1; min-height:0; width:100%; max-width:2200px; margin:0 auto; padding:28px 0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#64798760 transparent; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-assets { margin:0; padding:0; border:0; background:none; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-assets > header { margin-bottom:24px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-assets h3 { color:#e4d9c1; font:26px var(--at-serif); }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-assets header p { color:#93a9b9; font-size:14px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-assets-row { grid-template-columns:160px minmax(0,1fr); gap:24px; padding:24px 0; border-color:#9cb6c220; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-assets-row h4 { color:#c8d4dc; font-size:15px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-asset { background:#0d1c29; border:1px solid #91aab624; border-radius:5px; }
.sanctuary #sanctuary-drawer[data-category="skins"] #codex-skins .csk-asset figcaption { font-size:13px; color:#9db1c0; }
.wardrobe-assets-empty { padding:32px 0; color:#92a8b7; }