*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{font-family:Georgia,serif;color:#6e4786;background:#fff8ef url('/assets/puzzles/background.png') center/cover no-repeat}.dress{height:100vh;height:100dvh;max-width:1550px;margin:auto;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:5px}.back{align-self:flex-start;color:inherit;text-decoration:none;font-size:clamp(15px,2vw,24px);line-height:1.2}header{flex:none;text-align:center}.emblem{height:clamp(35px,6vh,60px);width:clamp(180px,24vw,290px);object-fit:contain;margin:-4px 0 -7px}h1{font-weight:500;font-size:clamp(27px,5.3vh,57px);margin:0;line-height:1.06}header p{font-size:clamp(13px,2.4vh,24px);margin:5px 0 9px}.workspace{display:grid;grid-template-columns:minmax(150px,21%) minmax(0,1fr) minmax(250px,29%);gap:clamp(12px,1.8vw,25px);width:100%;flex:1;min-height:0;padding:6px 0}.panel{border:2px solid #d4b4df;border-radius:28px;background:linear-gradient(130deg,#f5e9f8ed,#e7d5efdd);padding:clamp(10px,1.5vw,22px);min-height:0;display:flex;flex-direction:column;gap:10px}.characters{background:linear-gradient(130deg,#fce4e6ed,#f8d9e0da);border-color:#edb7cf}h2{font-weight:500;text-align:center;font-size:clamp(21px,2.7vw,34px);margin:0 0 6px;line-height:1.1}h3{font-weight:500;text-align:center;font-size:clamp(18px,2vw,27px);margin:5px 0 0;line-height:1.1}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #8f679f;outline-offset:3px}.character-options{display:flex;flex-direction:column;justify-content:center;gap:16px;flex:1;min-height:0}.character-options button{padding:0;border:2px solid #cfb2dd;background:#fff8ef;border-radius:23px;min-height:0;flex:1;overflow:hidden;display:flex;flex-direction:column;align-items:center}.portrait{display:block;flex:1;min-height:0;width:100%;background:linear-gradient(140deg,#f9eedf,#ecdef0)}svg{display:block;width:100%;height:100%;overflow:hidden}.portrait svg{object-fit:contain}.character-options button>span:last-child{font-size:clamp(17px,2.3vw,27px);padding:4px 16px;line-height:1.1}.character-options button[aria-pressed=true],.costumes button[aria-pressed=true],.accessories button[aria-pressed=true]{outline:2px solid #ecbc58;outline-offset:3px;border-color:#e5b250;background:#fff5de}.stage{min-width:0;min-height:0;position:relative;border:2px solid #dfbfce;border-radius:32px;background:#fff8ee url('/assets/dress-up/room.png') center 63%/210% auto no-repeat;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;container-type:size}.figure{position:relative;width:min(115cqw,100cqh);aspect-ratio:1;flex:none;margin-bottom:2%;max-height:100%;pointer-events:none}#character-art{position:absolute;inset:0}#hat-layer{position:absolute;left:39%;top:-2%;width:27%;height:22%;z-index:2}#hat-layer[data-item=crown]{top:-1%;left:42%;width:24%;height:18%}#hat-layer[data-item=helmet]{top:-1%;left:33%;width:41%;height:39%}#hat-layer[data-item=pirate-hat]{top:0;left:30%;width:47%;height:25%}#hat-layer[data-item=explorer-hat],#hat-layer[data-item=garden-hat]{top:0;left:29%;width:49%;height:24%}.figure[data-character=luke] #hat-layer{transform:translateX(1%)}#prop-layer{position:absolute;left:69%;top:58%;width:27%;height:29%;z-index:3}#prop-layer[data-item=binoculars]{left:66%;top:50%;width:22%;height:25%}#prop-layer[data-item=map]{left:65%;top:56%;width:30%;height:26%}[hidden]{display:none!important}.loading{position:absolute;bottom:10px;left:8%;right:8%;padding:10px;border-radius:15px;background:#fff8efe8;text-align:center;font-size:14px}.costumes{display:flex;flex-direction:column;gap:8px;min-height:0;flex:1}.costumes button{display:flex;align-items:center;justify-content:flex-start;gap:15px;border:1px solid #ba9bcf;border-radius:32px;background:#fcf5fdce;padding:6px 15px;font-size:clamp(17px,2vw,27px);min-height:40px;flex:1;text-align:left;line-height:1.1}.costume-icon{font-size:clamp(23px,2.8vw,36px);width:42px;flex:none;text-align:center;color:#9870ad}.accessories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;flex:none}.accessories button{border:1px solid #baa0cc;border-radius:15px;background:#fff9f2b8;padding:5px;height:clamp(45px,7.5vh,75px);min-width:0}.accessories button svg{pointer-events:none}#clear-accessories{font-size:13px;background:none;border:0;text-decoration:underline;padding:4px;color:#795b89}#clear-accessories:disabled{opacity:.5;cursor:default}footer{text-align:center;flex:none;max-width:100%}#status{font-size:clamp(12px,1.8vh,19px);margin:4px 0 5px;min-height:1.2em}#reset{font:inherit;font-size:clamp(18px,2.6vh,28px);color:#fffaf5;border:1px solid #ac90c6;border-radius:40px;padding:7px 40px;background:linear-gradient(130deg,#cbb3dc,#a98bc6);box-shadow:inset 0 0 9px #eee1f6;cursor:pointer}small{display:block;margin-top:5px;font-size:clamp(11px,1.6vh,17px)}
@media(orientation:portrait){.workspace{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;padding:3px 0}.characters{padding:7px 12px;flex-direction:row;align-items:center;gap:15px;border-radius:19px}.characters h2{font-size:20px;margin:0}.character-options{flex-direction:row;gap:12px;justify-content:center}.character-options button{flex:none;flex-direction:row;width:130px;height:54px;border-radius:15px;overflow:visible}.portrait{width:52px;height:48px;flex:none;border-radius:12px;overflow:hidden}.character-options button>span:last-child{font-size:19px;padding:0 8px}.stage{width:min(100%,760px);justify-self:center;border-radius:24px;background-size:210% auto}.figure{width:min(105cqw,100cqh);margin-bottom:0}.wardrobe{padding:8px 12px;border-radius:20px;gap:6px}.wardrobe h2{font-size:21px;margin:0}.costumes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;flex:none}.costumes button{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:5px 3px;min-height:50px;border-radius:15px;text-align:center;font-size:17px}.costume-icon{font-size:25px;width:auto}.wardrobe h3{font-size:19px;margin:1px 0}.accessories{grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}.accessories button{height:56px;border-radius:12px;padding:4px}#clear-accessories{font-size:12px;padding:2px}header p{margin:4px 0 6px}.emblem{height:45px}h1{font-size:clamp(29px,4.5vw,48px)}.dress{gap:4px}#reset{font-size:20px;padding:6px 32px}#status{font-size:14px;margin:2px 0 5px}}
@media(orientation:portrait) and (max-width:550px){.dress{padding-left:10px;padding-right:10px;padding-top:8px;gap:2px}.back{font-size:14px}h1{font-size:28px}.emblem{height:32px;width:185px}header p{font-size:12px;margin:3px 0}.workspace{gap:6px}.characters{gap:8px;padding:5px 8px}.characters h2{font-size:15px}.character-options{gap:8px}.character-options button{width:96px;height:42px}.portrait{width:39px;height:38px}.character-options button>span:last-child{font-size:16px;padding:0 5px}.wardrobe{padding:6px 8px;gap:4px}.wardrobe h2{font-size:17px}.costumes{gap:5px}.costumes button{font-size:12px;padding:4px 1px;min-height:42px;gap:1px}.costume-icon{font-size:20px}.wardrobe h3{font-size:15px}.accessories{gap:4px}.accessories button{height:38px;padding:2px;border-radius:8px}#clear-accessories{font-size:11px}.figure{width:min(108cqw,100cqh)}#status{font-size:11px}#reset{font-size:17px;padding:5px 28px}small{font-size:10px;margin-top:3px}}
@media(max-height:500px) and (orientation:landscape){.dress{gap:2px;padding:6px 10px}.back{position:absolute;left:12px;top:8px;font-size:14px}.emblem{display:none}h1{font-size:25px}header p{font-size:12px;margin:2px 0}.workspace{grid-template-columns:15% minmax(0,1fr) 31%;gap:9px;padding:3px 0}.panel{padding:7px;gap:5px;border-radius:18px}h2{font-size:19px;margin:0}.character-options{gap:7px}.character-options button>span:last-child{font-size:16px;padding:2px}.costumes{gap:4px}.costumes button{font-size:14px;min-height:26px;padding:2px 8px;gap:7px}.costume-icon{font-size:20px;width:22px}.wardrobe h3{font-size:15px;margin:0}.accessories{gap:4px}.accessories button{height:30px;padding:2px;border-radius:8px}#clear-accessories{font-size:10px;padding:1px}#status{font-size:11px;margin:1px 0 3px}#reset{font-size:16px;padding:4px 27px}small{display:none}.figure{width:min(100cqw,100cqh)}}

.costume-icon{height:40px;display:block}.figure{width:min(110cqw,94cqh)}@media(orientation:portrait){.costume-icon{height:24px}.figure{width:min(105cqw,94cqh)}}@media(max-height:500px) and (orientation:landscape){.costume-icon{height:23px}.figure{width:min(100cqw,94cqh)}}
#hat-layer[data-item=helmet]{top:-4%;height:37%}
[data-accessory="watering-can"] svg,#prop-layer[data-item="watering-can"] svg{clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,12% 65%,0 65%)}#prop-layer[data-item="watering-can"]{top:53%;left:67%}#prop-layer[data-item="watering-can"] svg{transform:scaleX(-1)}
/* Selected accessories can be placed with a finger, mouse, or keyboard. */
#hat-layer,#prop-layer{pointer-events:auto;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;border-radius:10px}#hat-layer svg,#prop-layer svg{pointer-events:none}#hat-layer.moving,#prop-layer.moving{z-index:8;cursor:grabbing;outline:2px dashed #be96ce;outline-offset:3px}#hat-layer:focus-visible,#prop-layer:focus-visible{outline:2px dashed #9464ab;outline-offset:3px}

/* Both accessory slots accept hats or props. */
#hat-layer[data-item=crown],#prop-layer[data-item=crown]{top:-1%;left:42%;width:24%;height:18%}
#hat-layer[data-item=helmet],#prop-layer[data-item=helmet]{top:-4%;left:33%;width:41%;height:37%}
#hat-layer[data-item=pirate-hat],#prop-layer[data-item=pirate-hat]{top:0;left:30%;width:47%;height:25%}
#hat-layer[data-item=explorer-hat],#prop-layer[data-item=explorer-hat],#hat-layer[data-item=garden-hat],#prop-layer[data-item=garden-hat]{top:0;left:29%;width:49%;height:24%}
#hat-layer[data-item=binoculars],#prop-layer[data-item=binoculars]{left:66%;top:50%;width:22%;height:25%}
#hat-layer[data-item=watering-can],#prop-layer[data-item=watering-can]{left:67%;top:53%;width:27%;height:29%}
#hat-layer[data-item=map],#prop-layer[data-item=map]{left:65%;top:56%;width:30%;height:26%}
#hat-layer[data-item=watering-can] svg{clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,12% 65%,0 65%);transform:scaleX(-1)}