/* Cape directory refinements: rarity-led item-shop presentation without constant wobble. */
.cape-directory-card{--mx:50%;--my:40%;--rx:0deg;--ry:0deg;--cape-rx:0deg;--cape-ry:0deg;min-height:340px;contain:layout paint;content-visibility:auto;contain-intrinsic-size:340px 220px;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0);will-change:transform;overflow:hidden;transition:transform .28s cubic-bezier(.2,.75,.2,1),border-color .24s ease,box-shadow .28s ease,background .28s ease}
.cape-directory-card .texture-body{position:relative;z-index:4;min-height:108px;padding:16px 16px 44px;transform:translateZ(8px);background:linear-gradient(180deg,rgba(10,15,22,.02),rgba(10,15,22,.84) 25%,rgba(10,15,22,.96))}
.cape-directory-card .cape-directory-kicker{display:none!important}
.cape-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cape-card-heading h3{margin:7px 0 0!important;color:#f4f7fb;font-size:15px!important;line-height:1.25;letter-spacing:-.025em}
.cape-card-heading .cape-rarity-pill{flex:0 0 auto;margin-top:3px}
.cape-card-footer{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:end;justify-content:space-between;gap:10px}
.cape-card-footer>span{color:#7d8796;font-size:8px}
.cape-card-star{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:24px;padding:0 8px;border:1px solid rgba(var(--rarity-rgb),.2);border-radius:8px;background:rgba(var(--rarity-rgb),.09);color:#f1f5f9;font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:inset 0 1px rgba(255,255,255,.04)}
.cape-directory-card .texture-meta,.cape-directory-card .texture-body>p,.cape-directory-card .cape-star-count{display:none!important}

/* Fortnite-like rarity stage. Each card gets a colored display bay instead of a flat dark tile. */
.cape-directory-card .cape-art{position:relative;overflow:hidden;transform-style:preserve-3d;isolation:isolate;background:linear-gradient(150deg,rgba(var(--rarity-rgb),.38),rgba(var(--rarity-rgb),.12) 46%,rgba(7,11,18,.94) 100%)}
.cape-directory-card.rarity-uncommon .cape-art{background:linear-gradient(150deg,rgba(63,185,80,.4),rgba(63,185,80,.11) 48%,#080d13 100%)}
.cape-directory-card.rarity-rare .cape-art{background:linear-gradient(150deg,rgba(56,139,253,.46),rgba(56,139,253,.13) 48%,#080d15 100%)}
.cape-directory-card.rarity-epic .cape-art{background:linear-gradient(150deg,rgba(163,113,247,.46),rgba(163,113,247,.14) 48%,#0b0914 100%)}
.cape-directory-card.rarity-legendary .cape-art{background:linear-gradient(150deg,rgba(240,136,62,.5),rgba(240,136,62,.14) 48%,#140d08 100%)}
.cape-directory-card.rarity-mythic .cape-art{background:linear-gradient(150deg,rgba(248,81,73,.52),rgba(210,153,34,.18) 40%,rgba(123,76,209,.16) 66%,#12090d 100%)}
.cape-directory-card .cape-art::before{content:"";position:absolute;z-index:1;inset:-30%;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.2),rgba(var(--rarity-rgb),.16) 20%,transparent 52%);opacity:.28;transition:opacity .24s ease}
.cape-directory-card .cape-art::after{content:"";position:absolute;z-index:4;left:50%;bottom:17px;width:82px;height:9px;transform:translateX(-50%) scaleX(.92);border-radius:50%;background:rgba(0,0,0,.42);filter:blur(6px);opacity:.42;pointer-events:none;transition:transform .28s cubic-bezier(.2,.75,.2,1),opacity .28s ease}
.cape-directory-card .directory-cape-face{z-index:3;transform-origin:50% 88%;transform:translateZ(24px) rotateX(var(--cape-rx)) rotateY(var(--cape-ry)) translateY(0) scale(1);will-change:transform,filter;filter:drop-shadow(0 18px 20px rgba(0,0,0,.32));transition:transform .3s cubic-bezier(.18,.82,.2,1),filter .25s ease}
.cape-directory-card .directory-cape-face::after{display:none!important}
.cape-directory-card .cape-rarity-aura{background:radial-gradient(circle at var(--mx) var(--my),rgba(var(--rarity-rgb),.34),rgba(var(--rarity-rgb),.09) 38%,transparent 72%);filter:blur(20px);opacity:.34;animation:none!important;transition:opacity .25s ease}
.cape-directory-card .cape-rarity-border{animation:none!important;opacity:.28;transition:opacity .25s ease}

/* Item-shop foil glint only while interacting. */
.cape-directory-card::before{content:"";position:absolute;z-index:6;inset:-35%;pointer-events:none;background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.02) 43%,rgba(255,255,255,.17) 49%,rgba(255,255,255,.035) 55%,transparent 62%);transform:translateX(-65%) rotate(5deg);opacity:0}
.cape-directory-card::after{content:"";position:absolute;z-index:5;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.07),transparent 24%);opacity:0;transition:opacity .2s ease}
.cape-directory-card:hover,.cape-directory-card:focus-visible{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px) scale(1.008);border-color:rgba(var(--rarity-rgb),.35);box-shadow:0 22px 48px rgba(0,0,0,.34),0 0 34px rgba(var(--rarity-rgb),.11),inset 0 1px rgba(255,255,255,.04)}
.cape-directory-card:hover::before,.cape-directory-card:focus-visible::before{opacity:1;animation:capeFoil .78s cubic-bezier(.18,.72,.2,1) 1}
.cape-directory-card:hover::after,.cape-directory-card:focus-visible::after{opacity:1}
.cape-directory-card:hover .directory-cape-face,.cape-directory-card:focus-visible .directory-cape-face{transform:translateZ(34px) rotateX(var(--cape-rx)) rotateY(var(--cape-ry)) translateY(-6px) scale(1.035);filter:drop-shadow(0 24px 24px rgba(0,0,0,.36)) brightness(1.07) saturate(1.05)}
.cape-directory-card:hover .cape-art::before,.cape-directory-card:focus-visible .cape-art::before{opacity:.9}
.cape-directory-card:hover .cape-art::after,.cape-directory-card:focus-visible .cape-art::after{transform:translateX(-50%) scaleX(1.12);opacity:.55}
.cape-directory-card:hover .cape-rarity-aura,.cape-directory-card:focus-visible .cape-rarity-aura{opacity:.72}
.cape-directory-card:hover .cape-rarity-border,.cape-directory-card:focus-visible .cape-rarity-border{opacity:.62}
@keyframes capeFoil{0%{transform:translateX(-65%) rotate(5deg)}100%{transform:translateX(65%) rotate(5deg)}}

/* Mythic gets a richer static treatment but still no looping movement. */
.cape-directory-card.rarity-mythic{box-shadow:inset 0 0 0 1px rgba(248,81,73,.06)}
.cape-directory-card.rarity-mythic .cape-rarity-pill{background:linear-gradient(90deg,rgba(248,81,73,.16),rgba(210,153,34,.14),rgba(163,113,247,.16));border-color:rgba(248,181,73,.26)}

.cape-detail-labels>span{display:none!important}
.cape-detail-copy h2{margin-top:0!important}
.cape-detail .cape-star-count{display:inline-flex;margin-top:10px;padding:7px 10px;border:1px solid rgba(var(--rarity-rgb),.18);border-radius:9px;background:rgba(var(--rarity-rgb),.06);color:#effbfc;font-weight:900}
.cape-wearer-head small{letter-spacing:.13em}

@media(hover:none),(pointer:coarse){
  .cape-directory-card{transform:none!important;will-change:auto}
  .cape-directory-card:hover{transform:translateY(-2px)!important}
  .cape-directory-card .directory-cape-face{transform:none!important;will-change:auto}
  .cape-directory-card:hover .directory-cape-face{transform:translateY(-2px) scale(1.01)!important}
  .cape-directory-card::before,.cape-directory-card::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cape-directory-card,.cape-directory-card .directory-cape-face,.cape-directory-card .cape-art::after,.cape-directory-card::before,.cape-directory-card::after,.cape-directory-card .cape-rarity-aura,.cape-directory-card .cape-rarity-border{transition:none!important;animation:none!important;transform:none!important}
}