.wash-dialog{width:min(480px,calc(100vw - 24px));padding:18px;max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box}
.wash-dialog h2{font-size:21px;margin:0 0 8px}.wash-dialog p{font-size:14px;line-height:1.4;min-height:40px;margin:8px 0}
.wash-scene{position:relative;height:280px;overflow:hidden;touch-action:none;user-select:none;background:repeating-linear-gradient(0deg,transparent 0 47px,#08799c 48px 50px),repeating-linear-gradient(90deg,#00accb 0 47px,#08799c 48px 50px);border:3px solid #123d61;border-radius:14px;isolation:isolate}
.wash-scene:before{content:'';position:absolute;inset:65% 7% 4%;border:5px solid #123d61;border-radius:15px 15px 45px 45px;background:#fff;box-shadow:inset 0 -16px #32c8e9}
.wash-cat{position:absolute;left:15%;top:16%;width:70%;height:76%;background-size:400% 100%;background-position:0 0;image-rendering:pixelated;background-repeat:no-repeat}
.wash-patches{position:absolute;inset:0;pointer-events:none}.wash-patches span{position:absolute;width:16%;height:18%;transform:translate(-50%,-50%);background:rgb(0 102 210 / calc(var(--wet)*.40));border-radius:50%;filter:drop-shadow(0 3px 0 rgb(0 91 180 / calc(var(--wet)*.5)))}
.wash-patches span:after{content:'';position:absolute;inset:-12%;opacity:var(--foam);background:radial-gradient(circle at 28% 38%,white 0 26%,transparent 28%),radial-gradient(circle at 68% 40%,#e5faff 0 32%,transparent 34%),radial-gradient(circle at 50% 70%,white 0 35%,transparent 37%);filter:drop-shadow(0 2px 0 #0797bd)}
.wash-tool{position:absolute;left:50%;top:25%;width:66px;height:66px;transform:translate(-50%,-50%);background:#ffce1b;border:3px solid #123d61;border-radius:18px;z-index:3;touch-action:none;padding:4px;cursor:grab;font-size:38px;line-height:1;overflow:visible}
.wash-tool:active{cursor:grabbing}.wash-tool-icon{pointer-events:none}.wash-tool svg{display:none;width:50px;height:50px;pointer-events:none}
.wash-scene[data-stage="4"] .wash-tool svg{display:block}
.wash-jets{position:absolute;left:5%;top:90%;width:90%;height:100px;pointer-events:none;opacity:0;transform-origin:top;background:repeating-linear-gradient(90deg,transparent 0 9px,#7de8ff 10px 13px,transparent 14px 20px);mask-image:repeating-linear-gradient(0deg,#000 0 9px,transparent 10px 18px);clip-path:polygon(23% 0,77% 0,100% 100%,0 100%)}
.washing[data-stage="0"] .wash-jets,.washing[data-stage="3"] .wash-jets{opacity:.85;animation:shower-flow .3s linear infinite}
.washing[data-stage="4"] .wash-jets{opacity:.8;background:repeating-linear-gradient(90deg,transparent 0 14px,#ffdf79 15px 18px,transparent 19px 24px);height:60px;animation:shower-flow .4s linear infinite}
.wash-progress-row{display:flex;gap:12px;align-items:center;margin:12px 0}.wash-progress-row progress{width:100%;height:18px;accent-color:#008d58}.wash-dialog>button{width:100%;min-height:48px;margin-top:8px}.wash-key-hint{font-size:11px!important;color:#526778;min-height:0!important}
@keyframes shower-flow{to{mask-position:0 18px}}
@media(max-width:380px),(max-height:650px){.wash-scene{height:220px}.wash-dialog{padding:12px}.wash-dialog h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){.wash-jets{animation:none!important}}
.wash-tool:active{transform:translate(-50%,-50%)}
.wash-progress-row output{min-width:48px;white-space:nowrap;text-align:right}
.wash-scene[data-stage="4"] .wash-tool svg{transform:rotate(90deg)}

/* The tool itself is the drag target, with no button tile around it. */
.wash-tool,.wash-tool:hover,.wash-tool:active{background:transparent!important;border:0;border-radius:0;box-shadow:none;padding:0;width:76px;height:76px;min-height:76px}
.wash-tool-icon{display:block;width:100%;height:100%}.wash-tool-icon img{width:100%;height:100%;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(2px 3px 0 #123d6140)}
.wash-scene[data-stage="4"] .wash-tool svg,.wash-tool svg{display:none}
.wash-scene[data-stage="4"] .wash-tool-icon img{transform:rotate(90deg)}

.wash-patches span:before{content:'';position:absolute;inset:18%;background:#775025;opacity:var(--dirt);border-radius:30% 60% 20% 45%;box-shadow:4px 3px #a77133,-3px -2px #5a351e}
.washing[data-stage="2"] .wash-tool-icon{animation:brush-scrub .18s ease-in-out infinite alternate}
.wash-scene[data-stage="2"] .wash-patches span:after{filter:drop-shadow(0 3px #0797bd)}
@keyframes brush-scrub{to{translate:5px 0;rotate:6deg}}
@media(prefers-reduced-motion:reduce){.wash-tool-icon{animation:none!important}}.reduced .wash-tool-icon{animation:none!important}
.wash-patches span:before{inset:30%;box-shadow:2px 1px #a77133,-2px -1px #5a351e}