/* Compact clothing groups; existing face, hair and accessory controls are untouched. */
.wardrobe-picker{width:100%;max-width:480px;min-width:0;margin:0 0 18px}
.wardrobe-slot{min-width:0;border-bottom:1px solid #e6dac9}
.wardrobe-summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 2px;cursor:pointer;list-style:none}
.wardrobe-summary::-webkit-details-marker{display:none}
.wardrobe-summary::after{content:'+';flex:0 0 16px;text-align:center;color:#614e40;font-size:18px}
.wardrobe-slot[open]>.wardrobe-summary::after{content:'−'}
.wardrobe-slot-label{font-size:12px;font-weight:700;color:#3d504b;flex:0 0 64px}
.wardrobe-selected{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;flex:1;color:#614e40;font-size:12px}
.wardrobe-selected>span{overflow-wrap:anywhere}
.wardrobe-selected svg{display:block;width:34px;height:34px;flex:0 0 34px}
.wardrobe-item-fieldset{min-inline-size:0;margin:0;padding:0 0 12px;border:0}
.wardrobe-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:6px}
.wardrobe-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:78px;width:100%;padding:6px 3px;border:1px solid #e6dac9;border-radius:10px;background:#fffdf7;color:#614e40;font:inherit;font-size:10px;line-height:1.2;cursor:pointer}
.wardrobe-choice svg{display:block;width:42px;height:42px;flex:0 0 42px}
.wardrobe-choice>span{text-align:center;overflow-wrap:anywhere;max-width:100%}
.wardrobe-choice:hover{background:#f1e8d9}
.wardrobe-choice.selected{background:#e3eee0;box-shadow:inset 0 0 0 1px #366b59;border-color:#366b59}
.wardrobe-colour-picker{margin:0 0 14px;min-inline-size:0}
.wardrobe-colour-picker legend{margin-bottom:8px}
.wardrobe-picker .wardrobe-swatches .swatch{width:44px;height:44px;flex:0 0 44px;cursor:pointer}
.wardrobe-summary:focus-visible,.wardrobe-choice:focus-visible,.wardrobe-swatches .swatch:focus-visible{outline:3px solid #366b59;outline-offset:3px}
.wardrobe-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wardrobe-icon-fallback{display:grid;place-items:center;width:34px;height:34px;font-size:26px}
@media(max-width:360px){.wardrobe-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.wardrobe-summary{gap:6px}.wardrobe-slot-label{flex-basis:54px}}
@media(prefers-reduced-motion:reduce){.wardrobe-picker *{transition:none!important;animation:none!important}}

/* Body choices are free preview controls, outside the four clothes groups. */
.wardrobe-body-picker{min-inline-size:0;padding:0;margin:0 0 16px;border:0}
.wardrobe-body-picker legend{padding:0;margin-bottom:8px;font-size:12px;font-weight:700;color:#3d504b}
.wardrobe-body-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}
.wardrobe-body-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:68px;padding:5px 2px;border:1px solid #e6dac9;border-radius:10px;background:#fffdf7;color:#614e40;font:inherit;font-size:10px;cursor:pointer}
.wardrobe-body-choice svg{width:28px;height:32px;fill:#a3b79d;stroke:#614e40;stroke-width:1.2;stroke-linejoin:round}
.wardrobe-body-choice:hover{background:#f1e8d9}
.wardrobe-body-choice.selected{background:#e3eee0;box-shadow:inset 0 0 0 1px #366b59;border-color:#366b59}
.wardrobe-body-choice:focus-visible{outline:3px solid #366b59;outline-offset:3px}
/* A preview has its own fixed frame. Opening clothes never centres it in a taller form. */
.avatar-editor{align-items:start}
.avatar-editor>.avatar-showcase{position:sticky;top:16px;align-self:start;height:390px;min-height:0;z-index:1}
#signup-customization .customization-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:24px}
#signup-customization .custom-controls{contain:layout paint;max-height:clamp(240px,calc(100dvh - 148px),640px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scroll-padding:12px;padding:4px 3px}
#signup-preview{position:sticky;top:8px;align-self:start;z-index:1;width:100%;height:112px;border-radius:14px}
@media(max-width:900px){
  .avatar-editor{grid-template-columns:minmax(0,1fr);gap:12px}
  .avatar-editor>.avatar-showcase{top:8px;height:128px;flex-direction:row;gap:20px;padding:8px 16px}
  .avatar-editor .avatar-preview.large{width:94px;height:112px;border-radius:18px;box-shadow:none;flex-shrink:0}
  .avatar-editor .avatar-preview.large .player-avatar{transform:scale(1.4)}
  .avatar-editor .showcase-rays{width:140px;height:140px;left:0}
  .avatar-editor .profile-tag{margin:0;font-size:12px;overflow-wrap:anywhere;max-width:120px}
  /* Scroll controls, not the preview. Keep room for native 44px choices at 320px. */
  .avatar-editor>.avatar-settings{contain:layout paint;max-height:clamp(240px,calc(100dvh - 320px),640px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;padding:16px;scroll-padding:12px}
  .avatar-settings .color-picker{margin:18px 0}
}
@media(max-width:600px){
  #signup-customization .customization-row{gap:24px}
  #signup-preview{top:8px;width:100%;height:112px;border-radius:14px}
  #signup-customization .custom-controls{contain:layout paint;max-height:clamp(240px,calc(100dvh - 148px),640px);overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;scroll-padding:12px;padding:4px 3px}
  #signup-customization .wardrobe-body-choices{grid-template-columns:repeat(3,minmax(44px,1fr))}
}
@media(max-width:360px){.avatar-settings .wardrobe-body-choices{grid-template-columns:repeat(3,minmax(44px,1fr))}}