/* A transparent fitting stage with a compact controls card on the right. */
#wardrobe.arena-wardrobe{background:linear-gradient(90deg,transparent 20%,#20382d18 70%);justify-content:flex-end;pointer-events:none;gap:12px}
#wardrobe .wardrobe-card{pointer-events:auto;width:340px;max-height:100%;padding:16px 18px;margin-right:10px;border-radius:16px;box-shadow:0 6px 28px #193b2920;overflow:auto;touch-action:pan-y}
#wardrobe header{gap:10px;margin-bottom:8px;padding-right:0}#wardrobe h2{font-size:21px;margin:0}#wardrobe button{box-shadow:none;min-height:34px;padding:5px 10px;font-size:12px}#wardrobe header .icon{height:34px;width:34px;padding:0;font-size:24px}
.wardrobe-preview-label{position:absolute;left:calc(22px + var(--safe-left));top:calc(18px + var(--safe-top));display:grid;gap:5px;color:#fff9e6;text-shadow:0 1px 5px #20382d55}.wardrobe-preview-label b{font-size:18px}.wardrobe-preview-label span{font-size:10px;opacity:.7}
.wardrobe-target{display:flex;gap:5px}.wardrobe-target button{flex:1}.wardrobe-role{display:block;font-size:9px;color:#798875;margin:5px 0 8px}.wardrobe-styles{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.wardrobe-styles button:first-child{grid-column:span 2}
#wardrobe [aria-pressed=true]{background:#dcebdc;border-color:#5b8c6b80;color:#245e46}.wardrobe-color-heading{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px}.wardrobe-swatches{display:flex;gap:6px;margin:7px 0}#wardrobe .wardrobe-swatches button{padding:0;width:27px;height:27px;min-height:27px;border:2px solid #fff;background:var(--swatch);border-radius:50%}#wardrobe .wardrobe-swatches [aria-pressed=true]{outline:2px solid #496c54;outline-offset:1px}
.wardrobe-custom{display:flex;gap:8px;align-items:center}.wardrobe-custom label{font-size:11px;display:flex;align-items:center;gap:7px}.wardrobe-custom input[type=color]{width:35px;height:28px;border:0;padding:0;background:none}.wardrobe-custom input[data-w=hex]{min-width:0;width:100px;font:12px monospace;padding:6px;border:1px solid #73827450;border-radius:6px;color:#385242;background:#fff9}
#wardrobe [data-w=status]{font-size:10px;line-height:1.4;min-height:28px;margin:8px 0 3px;color:#647660}.wardrobe-actions{display:flex;gap:6px}.wardrobe-actions button{flex:1}.wardrobe-access{display:flex;gap:5px;justify-content:space-between;align-items:center;margin-top:5px;font-size:9px;color:#83917a}#wardrobe .wardrobe-access button{font-size:9px;min-height:26px;padding:2px;background:transparent;white-space:nowrap}
.short-screen #wardrobe .wardrobe-card{width:310px;padding:9px 12px;margin-right:0}.short-screen #wardrobe h2{font-size:18px}.short-screen #wardrobe header{margin-bottom:4px}.short-screen #wardrobe button{min-height:29px;padding:3px 8px}.short-screen .wardrobe-role{margin:3px 0 4px}.short-screen .wardrobe-styles{gap:3px}.short-screen .wardrobe-color-heading{margin-top:4px}.short-screen .wardrobe-swatches{margin:5px 0}.short-screen #wardrobe [data-w=status]{margin:4px 0;min-height:14px;font-size:9px}.short-screen .wardrobe-access{margin-top:3px}
/* Shared compact grid leaves the left half of the scene visible on phones. */
#wardrobe .wardrobe-card{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:5px;width:380px}
#wardrobe header{grid-column:1;grid-row:1;margin:0}#wardrobe .wardrobe-target{grid-column:2;grid-row:1;align-items:center}
#wardrobe .wardrobe-role{grid-column:1/-1;grid-row:2;margin:0}
#wardrobe .wardrobe-styles{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(5,1fr)}#wardrobe .wardrobe-styles button:first-child{grid-column:auto}#wardrobe .wardrobe-styles button{padding:3px 1px;font-size:11px}
#wardrobe .wardrobe-color-heading{grid-column:1;grid-row:4;margin:0}#wardrobe .wardrobe-custom{grid-column:2;grid-row:4;gap:4px;justify-content:flex-end}.wardrobe-custom label{font-size:0}.wardrobe-custom input[data-w=hex]{width:81px}
#wardrobe .wardrobe-swatches{grid-column:1/-1;grid-row:5;margin:2px 0;justify-content:space-between}
#wardrobe [data-w=status]{grid-column:1/-1;grid-row:6;margin:0;min-height:28px}
#wardrobe .wardrobe-actions{grid-column:1/-1;grid-row:7}#wardrobe .wardrobe-access{grid-column:1/-1;grid-row:8;margin:0}
.short-screen #wardrobe .wardrobe-card{width:340px;row-gap:3px}.short-screen #wardrobe [data-w=status]{min-height:24px;margin:0}.short-screen #wardrobe header{margin:0}.short-screen #wardrobe .wardrobe-styles button{font-size:10px;padding:2px 0}.short-screen #wardrobe h2{font-size:16px}