#wardrobe{position:absolute;left:20px;top:24px;width:265px;background:#fff9eced;border:1px solid #fff9;border-radius:22px;padding:18px;color:#35463b;box-shadow:0 10px 36px #32472c15;z-index:50;pointer-events:auto}#wardrobe .wardrobe-heading{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.5px;color:#84917d}#wardrobe h2{font-size:18px;font-weight:650;margin:8px 0 15px}#wardrobe button,#showHair{font:inherit;cursor:pointer;border:0;border-radius:10px;color:inherit;background:#eeeada;padding:8px 11px}#foldHair{font-size:16px!important;background:transparent!important;padding:0 6px!important}#hairChoices{display:grid;grid-template-columns:1fr 1fr;gap:7px}#hairChoices button{display:flex;gap:9px;align-items:center;font-size:11px;text-align:left;background:#f0efdf;border:1px solid transparent;padding:9px 6px}#hairChoices button[aria-pressed=true]{background:#e2ebd5;border-color:#aabf8a}#hairChoices button:last-child{grid-column:span 2;justify-content:center;padding:6px}#hairDetail{font-size:11px;line-height:1.7;color:#7a8372;min-height:39px;margin:12px 0}#wardrobe .wardrobe-tools{display:grid;grid-template-columns:1fr 1fr;gap:6px}#wardrobe .wardrobe-tools button{font-size:11px;padding:9px}#wardrobe small{display:block;font-size:10px;line-height:1.8;color:#989b89;margin-top:12px}.hair-swatch{width:29px;height:30px;position:relative;display:block;flex-shrink:0}.hair-swatch:after{content:'';position:absolute;bottom:1px;left:4px;width:23px;height:19px;border-radius:45%;background:#f6d873}.hair-swatch b{display:block;background:var(--hair);position:absolute;z-index:1;left:6px;top:0;width:21px;height:17px;border-radius:60% 60% 30% 30%;transform:rotate(-12deg)}.hair-swatch.mohawk b{width:9px;height:23px;left:12px;border-radius:60% 60% 10% 10%;transform:rotate(-12deg)}.hair-swatch.sprout b{width:7px;left:14px;box-shadow:-6px 3px var(--hair);transform:rotate(18deg)}.hair-swatch.buns b{height:12px;width:12px;left:1px;box-shadow:19px 0 var(--hair);transform:none}.hair-swatch.none b{display:none}#showHair{position:absolute;left:16px;top:14px;z-index:50;background:#fff9ecb8;color:#435540;font-size:12px}body header .header-right{opacity:.65}#wardrobe[hidden],#showHair[hidden]{display:none!important}@media(max-height:560px){#wardrobe{left:12px;top:12px;width:240px;padding:12px;border-radius:16px}#wardrobe h2{font-size:15px;margin:5px 0 8px}#hairChoices button{padding:5px;font-size:10px}#hairDetail{font-size:10px;line-height:1.4;margin:7px 0;min-height:28px}#wardrobe small{font-size:9px;margin-top:6px;line-height:1.4}#wardrobe .wardrobe-tools button{padding:6px}}
.salon-tabs{display:flex;gap:4px;margin:0 0 11px;padding:3px;background:#eae9d9;border-radius:12px}#wardrobe .salon-tabs button{flex:1;font-size:12px;background:transparent;padding:6px}#wardrobe .salon-tabs button[aria-selected=true]{background:#fffbee;box-shadow:0 2px 5px #3645270c}#wardrobe .salon-tabs small{display:inline;font-size:9px;margin:0 0 0 3px;color:#a38044}.color-mode #hairChoices,.color-mode #hairDetail,.color-mode .wardrobe-tools,.color-mode>small{display:none!important}.color-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:9px}#wardrobe #originalColor{font-size:10px;padding:4px 8px;background:transparent;text-decoration:underline;color:#849075}#colorPresets{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:12px}#wardrobe #colorPresets button{height:26px;padding:0;border:2px solid #ffffff80;border-radius:7px}#wardrobe #colorPresets button[aria-pressed=true]{outline:2px solid #6b815a;outline-offset:2px}.color-picker{position:relative;height:110px;margin:0 1px;touch-action:none}#colorSquare{width:100%;height:100%;border-radius:8px;cursor:crosshair;touch-action:none}#colorCursor{position:absolute;width:12px;height:12px;border:2px solid white;border-radius:50%;box-shadow:0 0 2px #000;transform:translate(-50%,-50%);pointer-events:none}#hueSlider{appearance:none;width:100%;height:12px;padding:0;margin:12px 0;border:0;border-radius:8px;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}#hueSlider::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:#fff;border:2px solid #7d8b72;border-radius:50%;cursor:ew-resize}.color-value{display:flex;gap:8px;align-items:center;font-size:10px;color:#7e8877}#colorSample{width:24px;height:24px;border-radius:7px;border:1px solid #d1d4bf}#colorHex{width:100%;min-width:0;border:1px solid #d9ddce;background:#fff9ed;border-radius:8px;font:12px monospace;padding:6px 8px;color:#35463b}.color-save{display:flex;gap:7px;margin-top:10px}#wardrobe .color-save button{flex:1;font-size:11px}#wardrobe #saveColor{background:#496b49;color:#fff9e9}#wardrobe #saveColor:disabled{opacity:.45}#colorStatus{font-size:10px;min-height:15px;margin:8px 0 0;color:#637957}#wardrobe #colorAccess{font-size:9px;color:#999c8d;margin-top:3px}#colorPanel[hidden]{display:none!important}@media(max-height:560px){#wardrobe.color-mode{width:240px}#wardrobe .salon-tabs{margin-bottom:5px}#wardrobe .salon-tabs button{padding:4px}#colorPresets{gap:5px;margin-bottom:7px}#wardrobe #colorPresets button{height:20px}.color-picker{height:70px}.color-top{margin-bottom:5px;font-size:11px}#hueSlider{margin:8px 0;height:10px}.color-value{gap:5px}#colorHex{padding:4px 6px}.color-save{margin-top:6px}#wardrobe .color-save button{padding:6px}#colorStatus{margin-top:5px;font-size:9px}}
@media(max-height:560px){#wardrobe.color-mode h2{display:none}#wardrobe.color-mode .salon-tabs{margin-top:5px}#wardrobe.color-mode{padding-top:9px;padding-bottom:9px}}

#wardrobe{z-index:110}#showHair{z-index:109}#wardrobeLaunch{position:absolute;right:18px;bottom:14px;z-index:104;border:1px solid #c9d5bb;border-radius:12px;padding:9px 15px;background:#fff9e9dd;color:#486342;font:13px system-ui;cursor:pointer}body header .header-right{opacity:1}

#wardrobeLaunch{position:static;z-index:auto;font:inherit;padding:8px 12px}
.dressing #mobileObjective,.dressing #desktopHint,.dressing #aimHint{visibility:hidden}
/* Dedicated dressing screen: navigation, choices, stage. */
.dressing> :not(#game):not(#wardrobe){visibility:hidden!important;pointer-events:none!important}
#wardrobe{inset:0;width:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(90deg,#f6f3e8f5 0,#f6f3e8de 290px,#f6f3e800 44%);color:#354b3c;overflow:hidden}
#wardrobe .salon-header{position:absolute;left:24px;right:24px;top:20px;display:flex;align-items:center;gap:24px}
#wardrobe #foldHair{font-size:14px!important;background:#fffaf0!important;padding:12px 18px!important;border:1px solid #d7ddca;border-radius:24px;min-height:44px}
#wardrobe .salon-header h1{font:700 24px system-ui;margin:0;color:#36573e;letter-spacing:2px}
#wardrobe .salon-header>span{font-size:12px;color:#6b7d65}
#salonOptions{position:absolute;left:24px;top:100px;width:260px;background:#fffbedf0;border:1px solid #fff;border-radius:24px;padding:18px;box-shadow:0 8px 24px #364b2910}
#wardrobe h2{font-size:16px;margin:0 0 14px}
#hairChoices{gap:10px}#wardrobe #hairChoices button{position:relative;min-height:66px;flex-direction:column;justify-content:center;gap:5px;border-radius:16px;background:#f0efdf;padding:10px 4px;font-size:12px;transition:transform .12s,background .12s}
#wardrobe #hairChoices button:last-child{min-height:42px;flex-direction:row}
#wardrobe #hairChoices button[aria-pressed=true]{border-color:#6d8d58;background:#e0e9ca;box-shadow:inset 0 0 0 1px #6d8d58}
#wardrobe button:active{transform:scale(.97)}#wardrobe button:focus-visible{outline:3px solid #729357;outline-offset:3px}
#wardrobe #hairDetail{min-height:0;margin:14px 0 6px;font-size:12px;line-height:1.6;color:#6a795f}
#wardrobe .salon-autosave{font-size:10px;color:#818b76;margin:0}.color-mode .salon-autosave{display:none}
#wardrobe .salon-stage-controls{position:absolute;left:330px;right:24px;bottom:26px;text-align:center}
#salonWearing{display:inline-block;background:#fffbeddf;padding:7px 15px;border-radius:16px;font-size:12px;margin-bottom:10px;color:#4b6443}
#wardrobe .wardrobe-tools{display:flex;justify-content:center;gap:6px;padding:7px;background:#fffbeded;border:1px solid #fff;border-radius:24px;width:max-content;max-width:100%;margin:auto;box-shadow:0 3px 15px #24331512}
#wardrobe .wardrobe-tools button{min-height:40px;padding:8px 18px;font-size:12px;border-radius:18px;background:transparent}
#wardrobe .wardrobe-tools button[aria-pressed=true]{background:#e0e9ca;color:#35552e}
#wardrobe .color-save button{min-height:38px}#wardrobe #colorAccess{line-height:1.5}
@media(max-height:560px){
 #wardrobe .salon-header{top:10px;left:14px;right:14px;gap:16px}#wardrobe #foldHair{min-height:36px;padding:8px 12px!important;font-size:12px!important}
 #wardrobe .salon-header h1{font-size:18px}#wardrobe .salon-header>span{display:none}
 #salonOptions{left:14px;top:58px;width:220px;padding:12px;border-radius:18px}
 #wardrobe h2{display:none}#hairChoices{gap:6px}#wardrobe #hairChoices button{min-height:62px;font-size:11px;padding:6px 3px}#wardrobe #hairChoices button:last-child{min-height:32px}
 #wardrobe #hairDetail{font-size:10px;margin:8px 0 5px}#wardrobe .salon-autosave{font-size:9px}
 #wardrobe .salon-stage-controls{left:270px;right:14px;bottom:12px}#wardrobe .wardrobe-tools{padding:4px;gap:2px}#wardrobe .wardrobe-tools button{padding:6px 12px;min-height:36px;font-size:11px}
 #salonWearing{margin-bottom:6px;font-size:10px;padding:5px 12px}
 #wardrobe .salon-tabs{margin-bottom:8px}#wardrobe .salon-tabs button{min-height:30px}
 #wardrobe .color-save button{min-height:32px}#wardrobe .color-picker{height:56px}#wardrobe #colorPresets button{height:20px}
}
@media(prefers-reduced-motion:reduce){#wardrobe button{transition:none!important}}
.dressing #toast,.dressing #mobileControls{visibility:hidden!important;pointer-events:none!important}
@media(max-height:390px){#wardrobe .color-picker{height:42px}#salonOptions{top:54px}#wardrobe #colorAccess{font-size:8px}#wardrobe #colorStatus{min-height:12px;margin-top:4px}}

/* Portrait phones use a landscape shell. */
.rotated #wardrobe .salon-header{top:10px;left:14px;right:14px;gap:16px}.rotated #wardrobe #foldHair{min-height:36px;padding:8px 12px!important;font-size:12px!important}.rotated #wardrobe .salon-header h1{font-size:18px}.rotated #wardrobe .salon-header>span{display:none}.rotated #salonOptions{left:14px;top:58px;width:220px;padding:12px;border-radius:18px}.rotated #wardrobe h2{display:none}.rotated #hairChoices{gap:6px}.rotated #wardrobe #hairChoices button{min-height:62px;font-size:11px;padding:6px 3px}.rotated #wardrobe #hairChoices button:last-child{min-height:32px}.rotated #wardrobe #hairDetail{font-size:10px;margin:8px 0 5px}.rotated #wardrobe .salon-autosave{font-size:9px}.rotated #wardrobe .salon-stage-controls{left:270px;right:14px;bottom:12px}.rotated #wardrobe .wardrobe-tools{padding:4px;gap:2px}.rotated #wardrobe .wardrobe-tools button{padding:6px 12px;min-height:36px;font-size:11px}.rotated #salonWearing{margin-bottom:6px;font-size:10px;padding:5px 12px}.rotated #wardrobe .salon-tabs{margin-bottom:8px}.rotated #wardrobe .salon-tabs button{min-height:30px}.rotated #wardrobe .color-save button{min-height:32px}.rotated #wardrobe .color-picker{height:56px}.rotated #wardrobe #colorPresets button{height:20px}

.rotated #wardrobe .color-picker{height:42px}.rotated #salonOptions{top:54px}.rotated #wardrobe #colorAccess{font-size:8px}.rotated #wardrobe #colorStatus{font-size:9px;min-height:12px;margin-top:4px}.rotated #colorPresets{gap:5px;margin-bottom:7px}.rotated #hueSlider{margin:8px 0;height:10px}.rotated #colorHex{padding:4px 6px}.rotated .color-save{margin-top:6px}
#wardrobe .charge-actions{display:flex;justify-content:space-between;gap:8px;margin-top:6px}#wardrobe .charge-actions button{padding:5px 8px;min-height:30px;font-size:11px;background:#eef0df}#wardrobe .charge-delay{font-size:9px;line-height:1.45;margin-top:5px;color:#7c836f}
@media(max-height:560px){#wardrobe .color-mode .color-value{display:none}#wardrobe .color-mode .color-top{display:none}#wardrobe .charge-actions{margin-top:3px}#wardrobe .charge-actions button{min-height:28px;padding:4px 7px}#wardrobe .charge-delay{font-size:9px;margin-top:3px}}
.rotated #wardrobe .color-mode .color-value,.rotated #wardrobe .color-mode .color-top{display:none}.rotated #wardrobe .charge-actions{margin-top:3px}.rotated #wardrobe .charge-actions button{min-height:28px;padding:4px 7px}.rotated #wardrobe .charge-delay{font-size:9px;margin-top:3px}