.dress{display:grid;grid-gap:16px;gap:16px;align-items:start}@media (min-width:960px){.dress{grid-template-columns:minmax(0,520px) minmax(0,1fr)}.dress__stagewrap{position:-webkit-sticky;position:sticky;top:84px}}.dress__stagewrap{padding:12px;border:2px solid var(--cyan);border-radius:10px;background:var(--panel);box-shadow:0 0 14px rgba(61,232,255,.22),inset 0 0 20px rgba(61,232,255,.05);min-width:0}.dress__stage{position:relative;width:100%;max-width:600px;aspect-ratio:1;margin:0 auto;overflow:hidden;border:1px solid rgba(61,232,255,.3);border-radius:8px;background:radial-gradient(ellipse at 50% 80%,rgba(255,61,154,.16),transparent 60%),#0b0724}.dress__stage:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none;z-index:1}.dress__stage:after{content:"";position:absolute;left:50%;top:75%;width:30%;height:6%;border-radius:50%;background:radial-gradient(rgba(61,232,255,.45),transparent 70%)}.dress__stage[data-turn]{cursor:-webkit-grab;cursor:grab;touch-action:pan-y;-moz-user-select:none;user-select:none;-webkit-user-select:none}.dress__stage[data-turn]:active{cursor:-webkit-grabbing;cursor:grabbing}.dress__stage[data-turn]:focus-visible{outline:2px solid var(--cyan,#3de8ff);outline-offset:2px}.dress__stage[data-scene=grass]{background:#8fc0dc url(/images/dress-up/bg-grass.webp) var(--zx,50%) var(--zy,60%) /calc(100% * var(--zoom, 1)) no-repeat}.dress__stage[data-scene=prontera]{background:#c9b9a2 url(/images/dress-up/bg-prontera.webp) var(--zx,50%) var(--zy,60%) /calc(100% * var(--zoom, 1)) no-repeat}.dress__stage[data-scene=studio]{background:linear-gradient(135deg,#fde7f3,#e6f0ff 55%,#e9fbf2)}.dress__stage[data-scene=studio]:after{background:radial-gradient(rgba(170,150,220,.6),transparent 70%)}.dress__stage[data-scene=grass]:before,.dress__stage[data-scene=prontera]:before,.dress__stage[data-scene=studio]:before{opacity:.15}.dress__stage[data-scene=grass]:after,.dress__stage[data-scene=prontera]:after{display:none}.dress__canvas{transform:scale(var(--zoom,1));transform-origin:var(--zx,50%) var(--zy,60%)}.dress__stage:after{left:calc(var(--zx, 50%) + (50% - var(--zx, 50%)) * var(--zoom, 1));top:calc(var(--zy, 60%) + (75% - var(--zy, 60%)) * var(--zoom, 1));transform:translate(-50%,-50%) scale(var(--zoom,1))}.dress__zoom{position:absolute;z-index:4;top:8px;right:8px;display:flex;flex-direction:column;gap:6px}.dress__zoom button{min-width:40px;min-height:40px;border:1px solid rgba(61,232,255,.5);border-radius:8px;background:rgba(11,7,36,.75);color:var(--cyan);font:700 20px/1 var(--font-sarabun),sans-serif;cursor:pointer}.dress__zoom button:disabled{opacity:.35;cursor:default}.dress__note,.dress__zoom .dress__zoomreset{font-size:13px}.dress__note{margin:6px 0 0;color:var(--dim)}.dress__scenes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:8px}.dress__scenelabel{color:var(--dim);font-size:13px;margin-right:2px}.dress__hint{margin:6px 0 0;text-align:center;color:var(--dim);font-size:13px}.dress__canvas{position:relative;z-index:2;display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.dress__msg{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:8px 14px;border-radius:8px;background:rgba(11,7,36,.85);color:var(--dim);font-size:15px;white-space:nowrap}.dress__msg--err{border:1px solid var(--pink);color:var(--pink);text-shadow:0 0 8px rgba(255,61,154,.5)}.dress__picker{min-width:0;border:1px solid var(--hair);border-radius:10px;background:var(--panel);padding:10px}.dress__tabs{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;gap:6px;margin-bottom:10px}.dress__tab{min-height:42px;border:1px solid var(--hair);border-radius:8px;background:none;color:var(--dim);font:600 15px var(--font-sarabun),sans-serif;cursor:pointer}.dress__tab[aria-selected=true]{background:var(--cyan);border-color:var(--cyan);color:#071020;box-shadow:0 0 10px var(--cyan)}.dress__dice:focus-visible,.dress__job:focus-visible,.dress__more:focus-visible,.dress__padbtn:focus-visible,.dress__slottab:focus-visible,.dress__tab:focus-visible,.dress__tile:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}.dress__tabbody{display:grid;grid-gap:10px;gap:10px;min-width:0}.dress__dice{min-height:44px;border:2px solid var(--yellow);border-radius:10px;background:rgba(255,229,61,.08);color:var(--yellow);font:700 16px var(--font-sarabun),sans-serif;cursor:pointer;text-shadow:0 0 8px rgba(255,229,61,.45)}.dress__dice:hover{background:rgba(255,229,61,.16)}.dress__slots{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:6px;gap:6px}.dress__slottab{display:grid;justify-items:center;grid-gap:2px;gap:2px;padding:6px 2px;border:1px solid var(--hair);border-radius:10px;background:#0d0926;color:var(--dim);font:400 13px var(--font-sarabun),sans-serif;cursor:pointer}.dress__slottab[aria-selected=true]{border-color:var(--cyan);color:var(--text);box-shadow:0 0 8px rgba(61,232,255,.5)}.dress__slotpic{display:grid;place-items:center;width:44px;height:44px}.dress__plus{color:var(--faint);font-size:22px}.dress__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));grid-gap:6px;gap:6px}.dress__grid--hair{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.dress__tile{position:relative;aspect-ratio:1;padding:4px;border:1px solid var(--hair);border-radius:8px;background:#0d0926;cursor:pointer}.dress__tile:hover{border-color:var(--cyan)}.dress__tile[aria-pressed=true]{border:2px solid var(--yellow);box-shadow:0 0 10px rgba(255,229,61,.6)}.dress__tile[aria-pressed=true]:after{content:"✓";position:absolute;right:3px;top:0;color:var(--yellow);font-weight:700;font-size:13px}.dress__tile[data-undrawn]{opacity:.35}.dress__pic{display:block;width:100%;height:100%;background-repeat:no-repeat;image-rendering:pixelated}.dress__nopic{display:grid;place-items:center;width:100%;height:100%;color:var(--faint)}.dress__find{position:relative;z-index:5}.dress__find .msug__sprite .dress__nopic,.dress__find .msug__sprite .dress__pic{width:48px;height:48px}.dress__ms{position:absolute;left:2px;bottom:1px;padding:0 3px;border-radius:3px;background:rgba(0,0,0,.65);color:var(--cyan);font-size:10px;line-height:1.4}.dress__more{min-height:40px;border:1px dashed var(--cyan);border-radius:8px;background:none;color:var(--cyan);font:600 14px var(--font-sarabun),sans-serif;cursor:pointer}.dress__namebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:44px;margin:0;padding:6px 6px 6px 10px;border:1px dashed rgba(61,232,255,.35);border-radius:8px;color:var(--dim);font-size:14px}.dress__namebar>span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.dress__namebar b{color:var(--text)}.dress__none{padding:1px 6px;border:1px solid var(--pink);border-radius:4px;color:var(--pink);font-size:11.5px;white-space:nowrap}.dress__x{flex:none;min-height:32px;padding:0 12px;border:1px solid var(--hair);border-radius:6px;background:none;color:var(--dim);font:400 13px var(--font-sarabun),sans-serif;cursor:pointer}.dress__x:hover{border-color:var(--pink);color:var(--pink)}.dress__sec{min-width:0}.dress__h{margin:0 0 6px;font:700 12px/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--cyan)}.dress__jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));grid-gap:6px;gap:6px}.dress__job{display:grid;justify-items:center;grid-gap:2px;gap:2px;padding:4px 2px 6px;border:1px solid var(--hair);border-radius:8px;background:#0d0926;color:var(--dim);font:400 12px/1.2 var(--font-sarabun),sans-serif;cursor:pointer}.dress__job[aria-pressed=true]{border:2px solid var(--yellow);color:var(--text);box-shadow:0 0 10px rgba(255,229,61,.5)}.dress__jobpic{width:44px;height:52px;object-fit:contain;image-rendering:pixelated}.dress__jobpic--none{display:grid;place-items:center;color:var(--faint);font:700 20px ui-monospace,monospace}.dress__jobname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dress__poses{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));grid-gap:6px;gap:6px}.dress__pair{display:flex;flex-wrap:wrap;gap:16px}.dress__pad{display:grid;grid-template-columns:repeat(3,44px);grid-gap:4px;gap:4px}.dress__padbtn{height:44px;border:1px solid var(--hair);border-radius:8px;background:#0d0926;color:var(--yellow);font-size:20px;cursor:pointer}.dress__padbtn[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:#160c00}.dress__padmid{display:grid;place-items:center;color:var(--faint);font-size:12px}.dress__chips{display:flex;flex-wrap:wrap;gap:6px}.dress__chip{cursor:pointer;min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--hair);border-radius:6px;background:transparent;color:var(--dim);font:400 13.5px var(--font-sarabun),sans-serif}.dress__chip:hover:not(:disabled){border-color:var(--cyan);color:var(--text)}.dress__chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.dress__chip[aria-pressed=true]{color:#0b0b1a;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 8px var(--cyan)}.dress__chip--sex[aria-pressed=true]{background:#ff3db8;border-color:#ff3db8;box-shadow:0 0 8px #ff3db8}.dress__chip:disabled{opacity:.35;cursor:not-allowed}.dress__msg--err{display:grid;justify-items:center;grid-gap:8px;gap:8px}.dress__msg--err p{margin:0}.dress__msg--err .dress__chip{color:var(--text);border-color:var(--pink)}.dress__chip--pill{min-height:34px;border-radius:999px}.dress__chip--pill[aria-pressed=true]{background:rgba(255,61,154,.25);border-color:var(--pink);color:#fff;box-shadow:none}.dress__chips--col{flex-direction:column;align-items:stretch}.dress__poses .dress__chip{justify-content:center}@media (max-width:959px){.dress__stagewrap{position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:6px}.dress__stagewrap>.cfit__label{display:none}.dress__stage{max-width:min(600px,34vh)}}