body[data-page=wardrobe]{background:#0d0d0d;color:#f4f4f4}
body[data-page=wardrobe] .portal-main{max-width:none}
body[data-page=wardrobe] #public-collections,body[data-page=wardrobe] #wardrobe-slots{display:none}
body[data-page=wardrobe] .wardrobe-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(340px,1.1fr);gap:20px;align-items:start}
body[data-page=wardrobe] .wardrobe-layout>.panel:first-child{grid-column:2;grid-row:1;position:sticky;top:20px;background:radial-gradient(ellipse at 50% 75%,#373737,#131313 70%);border:1px solid #3a3a3a;border-radius:18px}
body[data-page=wardrobe] .wardrobe-layout>.panel:nth-child(2){grid-column:1;grid-row:1;background:#161616;border:1px solid #3a3a3a;border-radius:18px}
body[data-page=wardrobe] #outfit-viewer{height:580px;max-height:65vh}
.wardrobe-categories{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}.wardrobe-categories button{border:1px solid #444444;background:#212121;color:#c9c9c9;padding:10px 12px;border-radius:9px;cursor:pointer}
.wardrobe-categories button[aria-pressed=true]{background:#f2f2f0;border-color:#ffffff;color:#0b0b0c}
#owned-wardrobe-room>input{width:100%;padding:13px;background:#121212;border:1px solid #464646;color:white;border-radius:9px;margin-bottom:18px}
.wardrobe-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px}.wardrobe-item{overflow:hidden;display:flex;flex-direction:column;text-align:left;border:1px solid #424242;border-radius:11px;background:#1d1d1d;color:#f5f5f5;padding:0;cursor:pointer;min-width:0}
/* Square art edge to edge: the img carries width/height="320", so height:auto lets aspect-ratio square it (no letterbox). */
.wardrobe-item img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#101010}.wardrobe-item strong{padding:9px 10px 3px;font-size:13px;line-height:1.2;overflow-wrap:anywhere}.wardrobe-item span{padding:0 10px 11px;font-size:11px;line-height:1.35;color:#cbcbcb;margin-top:auto}
.wardrobe-item[aria-pressed=true]{outline:2px solid #f2f2f0;background:#313131}.wardrobe-item:disabled{opacity:.55;cursor:not-allowed}
/* Rarity framing: tone colour on the border, a bottom bar and a soft glow behind the artwork. */
.wardrobe-item{--tone:var(--rarity-common);position:relative;border-color:color-mix(in srgb,var(--tone) 40%,#424242);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.wardrobe-item[data-tone=uncommon]{--tone:var(--rarity-uncommon)}.wardrobe-item[data-tone=rare]{--tone:var(--rarity-rare)}.wardrobe-item[data-tone=very-rare]{--tone:var(--rarity-very-rare)}.wardrobe-item[data-tone=epic]{--tone:var(--rarity-epic)}.wardrobe-item[data-tone=legendary]{--tone:var(--rarity-legendary)}.wardrobe-item[data-tone=mythic]{--tone:var(--rarity-mythic)}.wardrobe-item[data-tone=super-rare]{--tone:var(--rarity-super-rare)}
.wardrobe-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--tone)}
.wardrobe-item img{background:radial-gradient(70% 70% at 50% 60%,color-mix(in srgb,var(--tone) 22%,#101010),#101010)}
.wardrobe-item:not(:disabled):hover{transform:translateY(-3px);border-color:var(--tone);box-shadow:0 10px 28px color-mix(in srgb,var(--tone) 28%,transparent)}
.wardrobe-item[aria-pressed=true]{outline-color:var(--tone);box-shadow:0 0 0 1px var(--tone),0 0 24px color-mix(in srgb,var(--tone) 35%,transparent)}
@media (prefers-reduced-motion:no-preference){.wardrobe-item-pop{animation:wardrobe-item-pop .5s cubic-bezier(.2,1.6,.4,1)}@keyframes wardrobe-item-pop{0%{transform:scale(.94)}45%{transform:scale(1.05)}100%{transform:none}}}
@media (prefers-reduced-motion:reduce){.wardrobe-item{transition:none}.wardrobe-item:not(:disabled):hover{transform:none}}
body[data-page=wardrobe] .button.filled{background:#f2f2f0;border-color:#f2f2f0;color:#0b0b0c}
/* Download image instead: a real 44px secondary button, not a small text link. */
#download-look{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:10px 0 0;padding:10px 18px;border:1px solid #444444;border-radius:9px;background:rgba(255,255,255,.03);color:#e6e6e3;font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
#download-look:hover{border-color:#f2f2f0;color:#fff}#download-look:disabled{opacity:.5;cursor:wait}
#download-look:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.wardrobe-item:focus-visible,.wardrobe-categories button:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
@media(max-width:1000px){.wardrobe-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1050px){body[data-page=wardrobe] .wardrobe-layout{display:flex;flex-direction:column}body[data-page=wardrobe] .wardrobe-layout>.panel{width:100%;min-width:0;position:static!important}.wardrobe-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Phones: two cards a row, so the square art stays big enough to read (three made 90px thumbnails under long text). */
@media(max-width:600px){.wardrobe-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Pose picker: sits between Save equipment and Share my look; previews on the character, saves to the profile. */
.wardrobe-pose{margin:16px 0 14px;padding:14px;border:1px solid #3a3a3a;border-radius:14px;background:#151515}
.wardrobe-pose .eyebrow{margin:0 0 2px;font-size:11px;letter-spacing:.14em;color:#bcbcbc}
.wardrobe-pose h2{margin:0 0 12px;font-size:18px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:#f4f4f4}
.wardrobe-pose-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.wardrobe-pose-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;min-width:44px;padding:9px 6px;border:1px solid #444444;border-radius:11px;background:#212121;color:#c9c9c9;font:600 11px/1.2 'Inter',system-ui,sans-serif;letter-spacing:.03em;text-transform:uppercase;text-align:center;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease}
.wardrobe-pose-option svg{display:block;color:#bcbcbc;transition:color .18s ease}
.wardrobe-pose-option:not(:disabled):hover{transform:translateY(-2px);border-color:#f2f2f0;color:#f4f4f4;box-shadow:0 8px 22px rgba(154,154,154,.18)}
.wardrobe-pose-option[aria-pressed=true]{background:#313131;border-color:#f2f2f0;color:#fff;box-shadow:0 0 0 1px #f2f2f0,0 0 22px rgba(154,154,154,.35)}
.wardrobe-pose-option[aria-pressed=true] svg{color:#fff}
.wardrobe-pose-option:disabled{opacity:.5;cursor:not-allowed}
.wardrobe-pose-option:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
/* Shop poses (pose-picker.js): an owned one is a pose button with a spark; a locked one links to its Shop card. */
.wardrobe-pose-option.is-shop-pose svg{color:#f2f2f0}
.wardrobe-pose-option.is-locked{border-style:dashed;background:#181818;color:#9d9d9d;text-decoration:none}
.wardrobe-pose-option.is-locked svg{color:#8a8a8a}
.wardrobe-pose-option.is-locked small{font:700 9px/1.1 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:#d8d8d8}
.wardrobe-pose-option.is-locked:hover{transform:translateY(-2px);border-color:#f2f2f0;color:#f4f4f4}
.wardrobe-pose-status{margin:12px 0 0;font-size:12px;line-height:1.5;color:#cbcbcb;min-height:1.5em}
.wardrobe-pose-status[data-state=saved]{color:#8ee0a8}.wardrobe-pose-status[data-state=error]{color:#ffb4c0}
@media (prefers-reduced-motion:reduce){.wardrobe-pose-option{transition:none}.wardrobe-pose-option:not(:disabled):hover{transform:none}}
@media(max-width:420px){.wardrobe-pose-option{padding:9px 4px;font-size:10px;letter-spacing:.02em}}

/* Wardrobe hero: same pattern as Shop and Inventory (eyebrow, big bold h1, lede, actions). */
body[data-page=wardrobe] .wardrobe-hero{position:relative;display:grid;gap:14px;margin:0 0 18px;padding:22px 18px 18px;overflow:hidden;border:1px solid #3a3a3a;border-radius:18px;background:radial-gradient(90% 70% at 0% 0%,rgba(154,154,154,.22),transparent 60%),linear-gradient(180deg,#1c1c1c,#131313)}
.wardrobe-hero-copy{display:grid;gap:12px;min-width:0}
body[data-page=wardrobe] .wardrobe-hero .eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;color:#bcbcbc}
body[data-page=wardrobe] .wardrobe-hero h1{margin:0;font-size:clamp(44px,13vw,84px);font-weight:800;line-height:.88;letter-spacing:-.05em;text-transform:uppercase}
.wardrobe-hero-lede{margin:0;max-width:52ch;color:#d6d6d3;font-size:15px;line-height:1.55}
.wardrobe-hero-note{margin:0;max-width:62ch;color:#a1a1a1;font-size:13px;line-height:1.5}
.wardrobe-hero-note b{color:#f4f4f2;font-weight:700}
.wardrobe-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
body[data-page=wardrobe] .wardrobe-hero-actions .button{flex:1 1 auto;min-height:44px;padding:12px 14px;font-size:11px;font-weight:700;letter-spacing:.08em}
body[data-page=wardrobe] .wardrobe-items-panel h2{font-size:22px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
/* Phones: a sticky jump bar reaches the item list without scrolling past the 3D viewer. */
.wardrobe-jump{display:none}
@media(max-width:1050px){
.wardrobe-jump{position:sticky;top:0;z-index:5;display:flex;gap:8px;margin:0 0 14px;padding:8px 0;background:#0d0d0d;border-bottom:1px solid #2c2d30}
.wardrobe-jump a{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border:1px solid #3a3a3a;border-radius:999px;background:#161616;color:#f4f4f2;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.wardrobe-jump a:first-child{background:#f2f2f0;border-color:#f2f2f0;color:#0b0b0c}
.wardrobe-jump a:focus-visible{outline:3px solid #ffffff;outline-offset:2px}
body[data-page=wardrobe] :is(#wardrobe-items,#wardrobe-look,#wardrobe-pose){scroll-margin-top:72px}
body[data-page=wardrobe] #outfit-viewer{height:52vh;min-height:300px}
}
@media(min-width:1051px){body[data-page=wardrobe] .wardrobe-hero{padding:32px 32px 26px}body[data-page=wardrobe] .wardrobe-hero h1{font-size:clamp(64px,6vw,88px)}}
/* Stage colour the 3D viewer paints behind the character (asset-viewer.js reads --viewer-bg). */
body[data-page=wardrobe] #outfit-viewer{--viewer-bg:#1d1d1d}
/* Market resale link under a resellable card (monochrome, 44px). */
.wardrobe-item-cell{display:flex;flex-direction:column;gap:6px;min-width:0}.wardrobe-item-cell>.wardrobe-item{flex:1}.wardrobe-item-sell{display:flex;align-items:center;justify-content:center;min-height:44px;padding:4px 8px;line-height:1.2;text-align:center;border:1px solid #424242;border-radius:8px;color:#f2f2f0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}.wardrobe-item-sell:hover{border-color:#f2f2f0}.wardrobe-item-sell:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
/* Pet panel: the pose picker's card with a Show pet switch (44px) and the partner credit. */
.wardrobe-pet[hidden]{display:none}
.wardrobe-pet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px}
.wardrobe-pet-head>div{min-width:0}.wardrobe-pet .wardrobe-pet-head h2{margin:0}
.wardrobe-pet-head .eyebrow{overflow-wrap:anywhere}
.wardrobe-pet-toggle{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;padding:8px 14px 8px 10px;border:1px solid #444444;border-radius:999px;background:#212121;color:#e6e6e3;font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.wardrobe-pet-switch{position:relative;flex:none;width:34px;height:20px;border:1px solid #5a5a5a;border-radius:999px;background:#333333;transition:background .18s ease,border-color .18s ease}
.wardrobe-pet-switch::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#bcbcbc;transition:transform .18s ease,background .18s ease}
.wardrobe-pet-toggle[aria-checked=true] .wardrobe-pet-switch{background:#f2f2f0;border-color:#f2f2f0}
.wardrobe-pet-toggle[aria-checked=true] .wardrobe-pet-switch::after{transform:translateX(14px);background:#0b0b0c}
.wardrobe-pet-toggle:hover{border-color:#f2f2f0;color:#ffffff}
.wardrobe-pet-toggle:focus-visible{outline:3px solid #ffffff;outline-offset:3px}
.wardrobe-pet-credit{margin:8px 0 0;font-size:11px;line-height:1.5;color:#9a9a9a}
.wardrobe-pet-credit a{color:#e6e6e3;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.wardrobe-pet-credit a:hover{color:#ffffff}.wardrobe-pet-credit a:focus-visible{outline:3px solid #ffffff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.wardrobe-pet-switch,.wardrobe-pet-switch::after{transition:none}}
/* Hat x mask fit (HAT-SLOT/PLAN.md §5c): a clashing card is greyed with its reason, an armed card (first tap refused) shows the swap it offers; the notices are their own live regions under the journey line. */
/* A clashing card stays at full strength (it can still be tapped: refuse, then swap) and is marked by a dashed grey
   frame and a "Swap" tag; only cards that cannot be equipped at all (Model pending) are dimmed. */
.wardrobe-item[data-clash=true]{border-style:dashed;border-color:#8a8a8a}.wardrobe-item[data-clash=true] span{color:#e6e6e3}
.wardrobe-item[data-clash=true]::before{content:'Swap';position:absolute;top:8px;left:8px;z-index:1;padding:3px 8px;border:1px solid #8a8a8a;border-radius:999px;background:rgba(12,12,12,.88);color:#e6e6e3;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.wardrobe-item[data-fit=armed]{outline:2px dashed #f2f2f0;outline-offset:-2px}.wardrobe-item[data-fit=armed] span{color:#ffffff;font-weight:700}
.wardrobe-item[data-fit=armed]::before{content:'Tap again';border-color:#f2f2f0;background:#f2f2f0;color:#0b0b0c}
.wardrobe-fit-notice,.wardrobe-social-circle{margin:6px 0 0;font-size:13px;line-height:1.5;color:#e6e6e3}.wardrobe-fit-notice[hidden],.wardrobe-social-circle[hidden]{display:none}
/* The fit notice dock: zero height in the layout (nothing moves when it shows), held near the bottom of the window while
   the item cards are on screen, so the reason is in view where the tap happened. The pill hangs below the dock: pinned,
   it ends just above the window's bottom edge; at rest after the last row it covers the space under the cards, never
   the cards themselves. */
.wardrobe-fit-dock{position:sticky;bottom:96px;z-index:5;height:0;margin:0}.wardrobe-fit-dock[hidden]{display:none}
.wardrobe-fit-pill{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:max-content;max-width:min(560px,100%);box-sizing:border-box;display:flex;align-items:center;gap:4px;padding:6px 4px 6px 16px;border:1px solid #5a5a5a;border-radius:14px;background:rgba(12,12,12,.95);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.wardrobe-fit-pill .wardrobe-fit-notice{margin:0;color:#f2f2f0}
.wardrobe-fit-dismiss{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:none;color:#cbcbcb;font-size:20px;line-height:1;cursor:pointer}.wardrobe-fit-dismiss:hover{color:#ffffff}.wardrobe-fit-dismiss:focus-visible{outline:3px solid #ffffff;outline-offset:-3px}
.wardrobe-social-circle{color:#bcbcbc}
#wardrobe-slots select option:disabled{color:#8a8a8a}