/* The atelier: static architectural art with one small, slow-moving mirror ornament. */
body.hex-screen-ui #hub-dialog[open][data-tab=cosmetics]{background:#181329 url('art/wardrobe-sanctum.svg') center/cover!important;color:#f7e8c9}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics]>.hub-heading{background:linear-gradient(90deg,#21172df5,#352340ed,#21172df5)!important;border-bottom:1px solid #c3a57888;box-shadow:0 4px 20px #0c081b66}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-title{font-family:Georgia,serif!important;font-weight:700;letter-spacing:.01em;color:#ffe5b3;text-shadow:0 2px #130b21}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] #hub-content{background:none!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-preview{background:radial-gradient(ellipse at 50% 40%,#8364ad35,transparent 65%),linear-gradient(#221a38dd,#1b172de8)!important;border:1px solid #b89a69!important;border-bottom:5px solid #63506c!important;box-shadow:inset 0 0 0 5px #2b213b,inset 0 0 0 6px #ba9b6a44,0 12px 32px #09071366!important;border-radius:100px 100px 22px 22px!important;padding-top:34px!important;isolation:isolate}
.wardrobe-mirror{position:absolute;inset:6px 8px 28px;pointer-events:none;z-index:0;background:url('art/wardrobe-mirror.svg') center/100% 100% no-repeat}
.wardrobe-mirror-orbit{position:absolute;left:50%;top:45%;width:74%;aspect-ratio:1;border:1px dashed #c7a3ef38;border-radius:50%;transform:translate(-50%,-50%);animation:wardrobe-orbit 70s linear infinite}
.wardrobe-mirror-orbit:before,.wardrobe-mirror-orbit:after{content:'✧';position:absolute;color:#e8d0a0;font:22px Georgia,serif;top:9%;left:12%}.wardrobe-mirror-orbit:after{top:auto;left:auto;bottom:9%;right:12%;color:#c4b0ec}
body #hub-dialog[data-tab=cosmetics] .fitting-preview>h2{font-family:Georgia,serif!important;color:#f4ddb5;text-align:center;letter-spacing:.03em}
body #hub-dialog[data-tab=cosmetics] .fitting-status{justify-self:center;font:700 12px 'Trebuchet MS',sans-serif;color:#f5e6be;border:1px solid #c7b78c66;border-radius:20px;background:#263331b3;padding:5px 14px;text-align:center;height:fit-content}
body #hub-dialog[data-tab=cosmetics] .fitting-wizard{position:relative;z-index:1}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button{background:linear-gradient(#514066,#2e2440)!important;border:1px solid #ae9277!important;border-bottom:4px solid #20172e!important;border-radius:20px 20px 8px 8px!important;box-shadow:inset 0 0 0 3px #e7cca50b!important;color:#edddfa!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button[aria-pressed=true]{background:linear-gradient(#947245,#513c37)!important;border-color:#f2d79d!important;color:#fff0c9!important;box-shadow:inset 0 0 0 3px #f6dc9330,0 0 18px #dfb77018!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] .collection-filters{padding:3px;background:#140f23a8;border:1px solid #a487ac44;border-radius:13px}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] .collection-filters button{border:0!important;border-radius:9px!important;box-shadow:none!important;background:transparent!important;color:#cebfdb!important}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] .collection-filters button[aria-pressed=true]{background:#675078!important;color:#fff0d2!important;box-shadow:inset 0 0 0 1px #d3b6dd55!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-cards article.cosmetic-expand-card{background:radial-gradient(ellipse at 50% 32%,color-mix(in srgb,var(--rarity,#bda0de) 12%,transparent),transparent 66%),linear-gradient(145deg,#392a4f,#20192f)!important;border:1px solid color-mix(in srgb,var(--rarity,#bda0de) 55%,#65546e)!important;border-bottom:4px solid #594567!important;box-shadow:inset 0 0 0 4px #20172b,inset 0 0 0 5px #bc97d52e,0 5px 10px #0b091d44!important;border-radius:48px 48px 15px 15px!important;transition:border-color .18s,background .18s}
body #hub-dialog[data-tab=cosmetics] .cosmetic-expand-card:before{content:'✦';position:absolute;inset:auto 14px 11px auto;font:12px Georgia;color:#d1b481;pointer-events:none;opacity:.65}
body.hex-screen-ui #hub-dialog[data-tab=cosmetics] .fitting-room .wardrobe-cards article.fitting-selected{border-color:#dfd29b!important;box-shadow:inset 0 0 0 4px #30243c,inset 0 0 0 5px #eadca188,0 0 18px #eadca11c!important}
body #hub-dialog[data-tab=cosmetics] .wardrobe-cards .wardrobe-art{background:none!important}
body #hub-dialog[data-tab=cosmetics] .cosmetic-expand-card h3{font-family:Georgia,serif!important;color:#ffe9c2!important;text-align:center}
body #hub-dialog[data-tab=cosmetics] .cosmetic-expand-hint{color:#d4b4ed!important;letter-spacing:.02em;font-weight:700}
body #hub-dialog[data-tab=cosmetics] .fitting-ownership{border-color:#baa47b88;background:#231b31ed;color:#decee7;top:13px;left:14px;border-radius:20px;font-size:11px}
body #hub-dialog[data-tab=cosmetics] .fitting-ownership[data-state=equipped]{background:#4b4238;color:#fdeec3;border-color:#dbc998}
body #hub-dialog[data-tab=cosmetics] .cosmetic-expanded{background:linear-gradient(125deg,#352542f5,#21172ff8)!important;border:1px solid #d4b17a!important;box-shadow:inset 0 0 0 5px #3f2e50,0 20px 80px #0a061bd9!important;border-radius:28px!important}
body #hub-dialog[data-tab=cosmetics] .cosmetic-expanded h3{font-family:Georgia,serif!important;color:#ffe3b1!important}
body #hub-dialog[data-tab=cosmetics] .cosmetic-scroll-cue{color:#c3afdb;font-size:12px}
@keyframes wardrobe-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
#hub-dialog:not([open]) .wardrobe-mirror-orbit{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.wardrobe-mirror-orbit{animation:none}}
@media(max-height:500px){
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-preview{border-radius:50px 50px 16px 16px!important;padding-top:20px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-cards article.cosmetic-expand-card{border-radius:28px 28px 12px 12px!important}
 .wardrobe-mirror{inset:4px 4px 14px}.wardrobe-mirror-orbit:before,.wardrobe-mirror-orbit:after{font-size:14px}
 body #hub-dialog[data-tab=cosmetics] .fitting-status{font-size:11px;padding:3px 9px}
 body #hub-dialog[data-tab=cosmetics] .fitting-ownership{top:6px;left:9px;font-size:10px;padding:3px 6px}
}

@media(max-height:500px){.wardrobe-mirror{inset:28px 4px 14px}}

/* Five categories remain visible together on desktop and landscape phones. */
body #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs,
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs{
 display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
 gap:5px!important;overflow:visible!important;min-width:0!important;
}
body #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button,
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button{
 min-width:0!important;width:100%!important;flex:none!important;flex-direction:column!important;
 padding:5px 2px!important;gap:3px!important;
}
body #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button strong,
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button strong{
 font-size:clamp(10px,1.1vw,15px)!important;white-space:nowrap!important;line-height:1.15!important;
}
@media(max-width:1000px), (max-height:550px){
 body #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button,
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button{height:54px!important;min-height:54px!important;}
 body #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button img,
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button img{display:block!important;width:22px!important;height:22px!important;flex:none!important;}
 body #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button strong,
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-tabs button strong{font-size:clamp(9px,1.35vw,12px)!important;}
}

/* Full-width category navigation leaves room for readable labels. */
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room{grid-template-rows:auto minmax(0,1fr)!important;row-gap:14px!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs{grid-column:1/-1;grid-row:1;gap:10px!important;padding:0 0 4px!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.fitting-preview{grid-column:1;grid-row:2}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.fitting-collection{grid-column:2;grid-row:2}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button{height:76px!important;min-height:76px!important;padding:10px 12px!important;gap:8px!important;flex-direction:row!important;border-radius:14px!important;border-bottom-width:3px!important;transition:background .15s,border-color .15s}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button img{display:block!important;width:34px!important;height:34px!important;flex:none!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button strong{font-size:15px!important;line-height:1.2!important;white-space:nowrap!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button:hover{filter:brightness(1.12)}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button:focus-visible{outline:3px solid #e9ce91!important;outline-offset:2px!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button[aria-pressed=true]{border-bottom-color:#e8c777!important;box-shadow:inset 0 -4px #9865c5,inset 0 -6px #eed29b,inset 0 0 0 1px #f2d79d!important}
@media(max-width:1050px){
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs{gap:8px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button{flex-direction:column!important;height:74px!important;min-height:74px!important;padding:7px 4px!important;gap:5px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button strong{font-size:13px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button img{width:28px!important;height:28px!important}
}
@media(max-height:550px){
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room{row-gap:8px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs{gap:7px!important;padding-bottom:2px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button{height:58px!important;min-height:58px!important;padding:5px 3px!important;gap:3px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button img{width:24px!important;height:24px!important}
 body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button strong{font-size:12px!important}
}
@media(max-width:550px){body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs{gap:4px!important}body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.wardrobe-tabs button strong{font-size:10px!important}}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room>.fitting-preview{height:100%!important;max-height:100%!important;align-self:stretch!important;box-sizing:border-box}

/* Academy actions: centered beneath the mirror, including compact layouts. */
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:center!important;gap:8px!important;width:100%!important;margin-inline:auto!important;flex:none!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions button{flex:0 1 240px!important;max-width:100%!important;text-align:center!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions button[hidden]{display:none!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions [data-preview-action=celebrate]{display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;background:linear-gradient(155deg,#70518b,#382445)!important;color:#ffe8b3!important;border:1px solid #d6b779!important;border-bottom:3px solid #9a7545!important;border-radius:13px!important;box-shadow:inset 0 0 0 3px #e9c98b12,0 3px 8px #100b1f55!important;font-family:Georgia,serif!important;font-weight:700!important;letter-spacing:.035em!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions [data-preview-action=celebrate]::before,body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions [data-preview-action=celebrate]::after{content:'✦';color:#e6c482;font-size:12px}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions [data-preview-action=celebrate]:hover{background:linear-gradient(155deg,#836199,#493055)!important;border-color:#f4dca1!important}
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .fitting-actions [data-preview-action=celebrate]:focus-visible{outline:3px solid #e9ce91!important;outline-offset:3px!important}
/* Keep the card opaque even if a future rarity supplies an invalid accent. */
body.hex-screen-ui.hex-desktop-screens #hub-dialog[data-tab=cosmetics] #hub-content .fitting-room .wardrobe-cards article.cosmetic-expand-card{background-color:#292039!important}