/* A fitted 3D dressing room with a tactile, horizontally scrolling wardrobe. */
#dress-screen{--dress-ink:#4a6265;position:fixed;inset:0;z-index:1;background:#f1e4d9;color:var(--dress-ink);padding:calc(var(--floating-nav-height,76px) + 10px) 20px 16px;box-sizing:border-box;overflow:hidden}
#dress-screen[hidden]{display:none!important}
.dress-layout{height:100%;max-width:1600px;margin:auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(340px,.8fr);gap:20px}
.dress-stage{position:relative;min-height:0;border-radius:32px;overflow:hidden;background:#e9d4ca;box-shadow:0 5px 0 #cdb9a733,inset 0 0 0 2px #fff9}
#dress-canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px}
.dress-stage-heading{position:absolute;left:22px;right:22px;top:20px;pointer-events:none;display:flex;justify-content:space-between;align-items:start;gap:12px}
.dress-stage-heading h1{font-size:clamp(22px,2.7vw,36px);margin:0;color:#435f5e!important;line-height:1.1;text-shadow:0 1px #fff9}
.dress-kicker{display:block;font-size:10px;font-weight:900;letter-spacing:2px;color:#6d8b80;margin-bottom:5px}
.dress-stage-heading label{pointer-events:auto;font-size:11px;font-weight:800;background:#fff8edec;padding:7px 10px;border:2px solid #fff;border-radius:16px;display:grid;gap:3px}
#dress-animal{min-height:38px;max-width:125px;border:0;background:transparent;color:#426461;font:inherit;font-size:15px}
.dress-turn{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;white-space:nowrap;padding:6px 10px;border:2px solid #fff8;border-radius:24px;background:#fff7ebde;box-shadow:0 3px 12px #6e514a15}
.dress-turn button{width:44px;height:44px;min-width:44px;border:0;border-radius:50%;font-size:22px;color:#587f77;background:#dcebe1;cursor:pointer}
.dress-turn span{display:grid;text-align:center;font-size:10px;gap:2px}.dress-turn strong{font-size:14px}
.dress-wardrobe{align-self:center;min-height:0;max-height:100%;overflow:auto;overscroll-behavior:contain;padding:24px;border-radius:30px;background:#fffaf1;box-shadow:0 5px 0 #bfa98e26;border:2px solid #fff}
.dress-wardrobe h2{font-size:26px;margin:0;color:#4f6c67}.dress-wardrobe p{margin:8px 0 16px;line-height:1.5;font-size:13px}
.dress-mode{display:flex;border-radius:16px;background:#eaece1;padding:4px;gap:4px;margin-bottom:18px}
.dress-mode button{flex:1;min-height:44px;padding:8px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:12px;font-weight:900;color:#6c7c71;cursor:pointer}.dress-mode button[aria-pressed=true]{background:#fff;box-shadow:0 2px 5px #6e745d20;color:#3c7068}
.dress-challenge{padding:12px;margin-bottom:16px;border:1px solid #d9e4dc;border-radius:18px;background:#edf3eb}.dress-challenge[hidden]{display:none}.dress-challenge-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.dress-challenge-heading strong{font-size:13px}.dress-challenge-heading button{font:inherit;font-size:11px;min-height:44px;border:1px solid #c1d2c9;border-radius:12px;background:#fff9;color:#55796b;padding:6px 10px;cursor:pointer}
#dress-reference{display:flex;gap:5px;justify-content:center}#dress-reference img{width:23%;max-height:88px;object-fit:contain;background:#fffc;border:2px solid transparent;border-radius:14px}#dress-reference img.matched{border-color:#79ab93;background:#dcebdc}
.dress-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:12px}.dress-tabs button{position:relative;padding:10px 4px;min-height:48px;font:inherit;font-size:11px;font-weight:900;border:2px solid #ede1ce;background:#f5edde;color:#857663;border-radius:14px;cursor:pointer}.dress-tabs button[aria-selected=true]{background:#d8e9e4;border-color:#83b0a4;color:#396b60}.dress-tabs button[data-filled=true]:after{content:'✓';display:block;position:absolute;top:-7px;right:-2px;line-height:18px;width:18px;background:#6a9d85;color:#fff;border-radius:50%;font-size:11px}
.dress-rail-hint{font-size:10px;text-align:right;color:#889486;margin-bottom:4px}
#dress-items{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:7px 3px 14px;touch-action:pan-x;scrollbar-color:#a1c0ae #edf2e8;scrollbar-width:thin}
.dress-piece{flex:0 0 132px;min-height:162px;scroll-snap-align:start;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid #eadfcd;border-radius:20px;background:linear-gradient(145deg,#fff,#f5eddf);color:#536d67;padding:8px;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}.dress-piece img{width:114px;height:112px;object-fit:contain;pointer-events:none}.dress-piece span{font-size:11px;line-height:1.3;font-weight:800;min-height:28px}.dress-piece[aria-pressed=true]{border-color:#78a996;background:#e8f3e9;box-shadow:0 3px 0 #87ad9844}.dress-piece[aria-pressed=true]:after{content:'✓';position:absolute;top:8px;right:8px;background:#6a9d85;color:white;border-radius:50%;width:21px;line-height:21px}
.dress-finish{display:flex;align-items:center;gap:12px;margin-top:12px}.dress-finish>span{font-size:14px;font-weight:900;white-space:nowrap;color:#879580}.dress-finish button{flex:1;min-height:50px;padding:12px 16px;border:2px solid #fff;border-radius:17px;background:#83ad9c;color:#fff;font:inherit;font-size:13px;font-weight:900;box-shadow:0 4px 0 #527d6c;cursor:pointer}.dress-finish button:disabled{background:#e5e8dc;color:#9ca28e;box-shadow:0 3px 0 #c9cbbd;cursor:default}
.dress-error{position:absolute;inset:0;background:#f3e8ddf5;display:grid;place-content:center;text-align:center;padding:30px;z-index:5}.dress-error[hidden]{display:none}.dress-error button{min-height:48px;border:2px solid white;background:#a6c5b6;border-radius:15px;font:inherit;color:#3a5b50;padding:10px 20px}
#home-dress .tile-picture{background:#e7d5c6;overflow:hidden}#home-dress .tile-picture img{width:100%;height:100%;object-fit:cover}
@media(max-width:950px) and (min-height:600px){#dress-screen{padding-left:12px;padding-right:12px}.dress-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:12px}.dress-wardrobe{padding:14px 18px;border-radius:24px;max-height:45vh}.dress-wardrobe h2{font-size:19px}.dress-wardrobe>p{font-size:12px;margin:4px 0 8px}.dress-mode{margin-bottom:10px}.dress-tabs{margin-bottom:5px}.dress-piece{flex-basis:130px;min-height:124px}.dress-piece img{height:79px;width:100px}.dress-finish{margin-top:4px}.dress-challenge{padding:7px 10px;margin-bottom:8px}#dress-reference img{height:52px;width:70px}.dress-challenge-heading{float:left;width:45%;min-height:52px}.dress-challenge-heading strong{font-size:11px}.dress-challenge-heading button{font-size:10px;padding:4px}.dress-stage-heading{left:16px;right:16px;top:14px}.dress-turn{bottom:10px}}
@media(max-width:600px) and (min-height:600px){#dress-screen{padding:calc(var(--floating-nav-height,70px) + 5px) 8px 8px}.dress-layout{gap:8px}.dress-wardrobe{padding:10px 12px;max-height:44vh}.dress-wardrobe h2{display:none}.dress-mode{margin-bottom:6px}.dress-mode button{min-height:40px}.dress-wardrobe>p{font-size:10px;min-height:15px;margin:2px 0 5px}.dress-tabs button{min-height:44px;font-size:10px}.dress-piece{flex-basis:105px;min-height:108px;padding:5px}.dress-piece img{height:65px;width:90px}.dress-piece span{font-size:10px}.dress-rail-hint{display:none}#dress-items{padding-bottom:6px;gap:7px}.dress-finish button{min-height:44px;font-size:12px}.dress-stage-heading h1{font-size:20px;max-width:150px}.dress-kicker{font-size:8px}.dress-stage-heading label{font-size:9px;padding:4px 7px}#dress-animal{font-size:12px;min-height:34px;max-width:90px}.dress-turn{gap:8px;padding:2px 7px;bottom:8px}.dress-turn button{height:40px;width:40px}.dress-challenge-heading{width:40%;display:grid;gap:0}.dress-challenge-heading button{min-height:28px}#dress-reference img{width:24%;height:45px}.dress-challenge{margin-bottom:6px}}
@media(max-height:599px){#dress-screen{padding:calc(var(--floating-nav-height,60px) + 4px) 10px 8px}.dress-layout{grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:10px}.dress-wardrobe{padding:12px}.dress-wardrobe h2{display:none}.dress-mode{margin-bottom:6px}.dress-mode button{min-height:40px}.dress-stage-heading{left:12px;right:12px;top:12px}.dress-stage-heading h1{font-size:20px}.dress-kicker{display:none}.dress-stage-heading label{padding:2px 6px;font-size:9px}#dress-animal{min-height:36px;font-size:12px}.dress-tabs{margin-bottom:3px}.dress-piece{min-height:105px;flex-basis:100px}.dress-piece img{height:65px;width:80px}.dress-wardrobe>p{font-size:11px;margin:4px 0 6px}.dress-turn{bottom:7px}.dress-finish{margin-top:4px}.dress-challenge{margin-bottom:6px;padding:5px}#dress-reference img{height:40px}.dress-rail-hint{display:none}}
@media(prefers-reduced-motion:reduce){.dress-piece{transition:none}}
/* On small screens keep the boots and lower outfit visible between the turn buttons. */
@media(max-width:600px) and (min-height:600px){
 #dress-screen .dress-stage-heading h1{font-size:19px!important;line-height:1.15}
 .dress-turn{width:calc(100% - 30px);justify-content:space-between;background:none;border:0;box-shadow:none;pointer-events:none}
 .dress-turn button{pointer-events:auto;background:#edf5e9ed;border:2px solid #fff}
 .dress-turn span{display:none}
 .dress-wardrobe{box-sizing:border-box}
}
#dress-screen button,#dress-screen select{touch-action:manipulation}
.dress-rail-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:3px 0;color:#748b7e;font-size:11px;font-weight:800}
.dress-rail-tools button{height:44px;width:44px;min-width:44px;border:1px solid #d7ddcb;background:#f0f4e8;color:#557b69;border-radius:14px;font:inherit;font-size:26px;cursor:pointer}
#dress-screen .dress-piece{touch-action:pan-x;user-select:none;-webkit-user-select:none;box-shadow:0 3px 0 #b8a38620}
#dress-screen .dress-piece img{pointer-events:auto;touch-action:none;cursor:grab;-webkit-user-drag:none}
#dress-screen .dress-piece.is-dragging{opacity:.38;border-style:dashed}
.dress-drag-ghost{position:fixed;left:0;top:0;width:116px;height:116px;pointer-events:none;z-index:5000;filter:drop-shadow(0 12px 9px #3d51484a);will-change:transform}
.dress-drag-ghost img{width:100%;height:100%;object-fit:contain;transform:rotate(-7deg) scale(1.15)}
.dress-drag-ghost.is-over img{transform:rotate(0) scale(1.22)}
.dress-drag-ghost[hidden],.dress-drop-halo[hidden]{display:none}
.dress-drop-halo{position:absolute;pointer-events:none;z-index:1;border:3px dashed #f9efce;border-radius:45%;box-sizing:border-box;background:#ffffff12;box-shadow:0 0 22px #fff8cf50,inset 0 0 22px #fff6;transition:background .12s}
.dress-drop-halo.is-over{border-color:#b8efd0;background:#c4f5d520;box-shadow:0 0 24px #98d6b477,inset 0 0 28px #d9f6ce44}
.dress-stage-heading,.dress-turn{z-index:2}
.dress-wardrobe{background:linear-gradient(135deg,#fffdf7,#f7efdf);box-shadow:0 7px 0 #bea88e25,0 12px 28px #715b4910}
.dress-piece{background:radial-gradient(ellipse at 50% 20%,#fffdf7 20%,#f2e8d6 100%)}
@media(max-width:600px),(max-height:599px){.dress-rail-tools{font-size:10px;margin:0}.dress-rail-tools button{height:36px;min-width:44px;width:44px}.dress-wardrobe>p{min-height:0}.dress-rail-tools span{text-align:center}.dress-drop-halo{border-width:2px}.dress-drag-ghost{width:100px;height:100px}}
@media(prefers-reduced-motion:reduce){.dress-drop-halo{transition:none}}

@media(max-width:600px) and (min-height:600px){#dress-screen[data-mode=match] .dress-wardrobe{max-height:53vh}.dress-finish{position:sticky;bottom:0;background:#fbf5e9;padding-top:4px;z-index:2}}
/* Big picture tabs and a clear four-choice page, like the coloring tool cabinet. */
#dress-screen .dress-layout{grid-template-columns:minmax(0,1.2fr) minmax(420px,.9fr)}
#dress-screen .dress-wardrobe{padding:20px;max-height:100%;box-sizing:border-box}
#dress-screen .dress-wardrobe h2{font-size:24px;display:block;margin:0 0 6px}
#dress-screen .dress-wardrobe>p{font-size:14px;min-height:38px;margin:0 0 10px;line-height:1.4}
#dress-screen .dress-mode{margin-bottom:12px}
#dress-screen .dress-mode button{font-size:15px;min-height:52px}
.dress-closet{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px}
#dress-screen .dress-tabs{display:flex;flex-direction:column;gap:8px;margin:0}
#dress-screen .dress-tabs button{flex:1;min-height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px;font-size:14px;border-radius:18px 7px 7px 18px;border-width:3px;box-shadow:0 3px 0 #b5a38833}
#dress-screen .dress-tabs button img{width:46px;height:43px;object-fit:contain;pointer-events:none}
#dress-screen .dress-tabs button[aria-selected=true]{background:#cce9dd;border-color:#69a98f;transform:translateX(3px);color:#2f6253}
.dress-choice-area{min-width:0;display:flex;flex-direction:column;gap:8px}
#dress-screen .dress-rail-tools{margin:0;order:2;font-size:13px;gap:6px}
#dress-screen .dress-rail-tools button{width:60px;min-width:60px;height:50px;border:2px solid #b9d4c2;border-radius:16px;font-size:32px;background:#e5f0df;box-shadow:0 3px 0 #abc5ac}
#dress-screen #dress-items{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:calc((100% - 10px)/2);height:252px;gap:10px;padding:3px 0 9px;scroll-snap-type:x mandatory}
#dress-screen .dress-piece{min-height:0;min-width:0;width:auto;padding:5px;gap:3px;border-width:3px;border-radius:18px}
#dress-screen .dress-piece img{width:100%;height:86px;min-height:0;object-fit:contain}
#dress-screen .dress-piece span{font-size:12px;line-height:1.2;min-height:28px}
#dress-screen .dress-finish{position:static;padding:0;margin-top:14px;justify-content:center;background:none;gap:10px}
#dress-done{font-size:13px;font-weight:800;color:#6f8c78}
#dress-screen .dress-challenge{margin-bottom:10px}
.dress-runway-caption{display:none;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;min-width:220px;max-width:90%;text-align:center;padding:12px 22px;border-radius:24px;background:#fff6e9eb;border:3px solid #fff9;box-shadow:0 5px 0 #a3866222;color:#54776b;pointer-events:none}
.dress-runway-caption span{display:block;font-size:12px;letter-spacing:3px;font-weight:900;color:#ba985a}.dress-runway-caption strong{display:block;font-size:26px;margin:3px 0}.dress-runway-caption small{font-size:13px}
#dress-screen[data-complete=true] .dress-layout{grid-template-columns:1fr;grid-template-rows:1fr}
#dress-screen[data-complete=true] .dress-wardrobe,#dress-screen[data-complete=true] .dress-turn,#dress-screen[data-complete=true] .dress-stage-heading label{display:none}
#dress-screen[data-complete=true] .dress-runway-caption{display:block}
@media(max-width:950px) and (min-height:600px){
 #dress-screen .dress-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px}
 #dress-screen .dress-wardrobe{padding:12px 16px;max-height:none}
 #dress-screen .dress-wardrobe h2{display:none}
 #dress-screen .dress-wardrobe>p{font-size:13px;min-height:19px;margin-bottom:6px}
 #dress-screen .dress-mode{margin-bottom:9px}#dress-screen .dress-mode button{min-height:44px;font-size:14px}
 #dress-screen .dress-tabs button{min-height:54px;font-size:12px;gap:0}
 #dress-screen .dress-tabs button img{height:31px;width:40px}
 #dress-screen #dress-items{height:206px;grid-auto-columns:calc((100% - 20px)/3)}
 #dress-screen .dress-piece img{height:61px}
 #dress-screen .dress-rail-tools button{height:44px}
 #dress-screen .dress-finish{margin-top:7px}
}
@media(max-width:600px) and (min-height:600px){
 #dress-screen .dress-wardrobe{padding:10px 10px 8px}
 .dress-closet{grid-template-columns:67px minmax(0,1fr);gap:8px}
 #dress-screen .dress-tabs{gap:6px}
 #dress-screen .dress-tabs button{min-height:55px;font-size:12px;border-width:2px}
 #dress-screen #dress-items{height:200px;grid-auto-columns:calc((100% - 8px)/2);gap:8px}
 #dress-screen .dress-piece{padding:3px;border-width:2px;border-radius:14px}
 #dress-screen .dress-piece span{font-size:11px;min-height:26px}
 #dress-screen .dress-rail-tools{font-size:11px}
 #dress-screen .dress-rail-tools button{min-width:52px;width:52px;height:44px}
 #dress-screen .dress-challenge-heading{float:none;width:auto;display:flex;min-height:0}
 #dress-screen #dress-reference img{height:35px;width:23%}
 #dress-screen .dress-challenge-heading button{min-height:32px}
 #dress-screen .dress-challenge{padding:4px 8px;margin-bottom:6px}
 #dress-screen .dress-mode{margin-bottom:6px}
 #dress-screen .dress-mode button{font-size:13px;min-height:42px}
 #dress-screen .dress-wardrobe>p{font-size:11px;min-height:15px;margin-bottom:5px}
 .dress-runway-caption{bottom:14px;min-width:190px;padding:9px 15px}.dress-runway-caption strong{font-size:22px}
}
@media(max-height:599px){
 #dress-screen .dress-layout{grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:8px}
 #dress-screen .dress-wardrobe{padding:10px}
 #dress-screen .dress-wardrobe h2{display:none}
 #dress-screen .dress-wardrobe>p{font-size:12px;min-height:0;margin-bottom:5px}
 #dress-screen .dress-mode{margin-bottom:6px}#dress-screen .dress-mode button{min-height:44px;font-size:13px}
 .dress-closet{grid-template-columns:64px minmax(0,1fr);gap:8px}
 #dress-screen .dress-tabs{gap:5px}#dress-screen .dress-tabs button{min-height:48px;font-size:11px;padding:2px}#dress-screen .dress-tabs button img{width:30px;height:26px}
 #dress-screen #dress-items{height:170px;gap:6px;grid-auto-columns:calc((100% - 6px)/2)}#dress-screen .dress-piece img{height:45px}#dress-screen .dress-piece span{font-size:10px;min-height:24px}
 #dress-screen .dress-rail-tools button{height:44px;min-width:50px;width:50px}#dress-screen .dress-rail-tools{font-size:11px}
 #dress-screen .dress-finish{margin-top:6px}
}

#dress-screen .dress-tabs button{overflow:hidden}#dress-screen .dress-tabs button img{transform:scale(1.3)}

@media(max-width:600px) and (min-height:600px){#dress-screen #dress-reference img{height:48px}}