.wash-scene{container-type:inline-size;position:relative;isolation:isolate;overflow:hidden;background:#443025 url('assets/chores-sink-v1.png') center/100% 100% no-repeat;user-select:none}
.wash-tiles,.wash-sink,.wash-faucet{display:none}
.wash-water{display:none;position:absolute;left:57%;top:35%;width:5%;height:36%;background:repeating-linear-gradient(90deg,#f7e8c388 0 3px,#b2cbc399 3px 6px);z-index:4;pointer-events:none;animation:wash-flow .35s linear infinite}.is-running .wash-water{display:block}
.wash-scene button{font-family:var(--body);-webkit-tap-highlight-color:transparent}
.wash-tap{position:absolute;left:40.5%;top:24.5%;width:9%;height:19%;min-width:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;touch-action:none;z-index:5;cursor:pointer}.wash-tap>span{position:absolute;right:-1px;top:5%;color:#fff1c4;font:19px var(--pixel);text-shadow:1px 1px #654022;pointer-events:none}.wash-tap:hover,.wash-tap[aria-pressed=true]{background:#fff1bd18}.wash-tap[aria-pressed=true]>span{opacity:0}
.wash-rack{position:absolute;left:74%;top:45%;width:23%;height:39%;border:2px solid transparent;border-radius:0;background:transparent;padding:0}.wash-rack span{position:absolute;left:-5%;top:100%;width:110%;padding-top:3px;color:#ffedcc;font-size:8px;font-weight:600;letter-spacing:.6px;text-shadow:1px 1px #342016}.wash-rack.is-ready{outline:2px dashed #fff1bd;outline-offset:3px;background:#ffefb914}
.wash-bowl{position:absolute;left:45%;top:60%;width:44%;height:60%;transform:translate(-50%,-50%);border:0;background:none;touch-action:none;padding:0}.wash-bowl:disabled,.wash-rack:disabled{opacity:1;cursor:default}.wash-bowl-inside{display:none}
.wash-foam{position:absolute;inset:27% 17%;background:radial-gradient(circle at 25% 30%,#fff5df 0 5px,transparent 6px),radial-gradient(circle at 65% 40%,#fff5df 0 8px,transparent 9px),radial-gradient(circle at 45% 70%,#fff5df 0 6px,transparent 7px),radial-gradient(circle at 75% 75%,#fff5df 0 4px,transparent 5px);pointer-events:none}
.wash-spot{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);border:0;background:none;padding:0;z-index:2;touch-action:manipulation}.wash-spot:before{content:'';position:absolute;left:50%;top:50%;width:clamp(8px,3.5cqw,24px);height:clamp(8px,3.5cqw,24px);transform:translate(-50%,-50%);background:#7b4b2b;opacity:var(--dirt,1);clip-path:polygon(20% 0,75% 0,75% 20%,100% 20%,100% 75%,70% 75%,70% 100%,15% 100%,15% 75%,0 75%,0 25%,20% 25%);pointer-events:none}
.wash-sponge{position:absolute;left:16%;top:81%;width:76px;height:65px;transform:translate(-50%,-50%);border:0;background:none;cursor:grab;touch-action:none;z-index:6;padding:0}.wash-sponge:active,.wash-scene[data-step="2"] .wash-bowl:active{cursor:grabbing}
.wash-tool-label{position:absolute;left:4%;top:91%;width:25%;text-align:center;color:#ffedcc;font-size:8px;font-weight:600;letter-spacing:.6px;text-shadow:1px 1px #342016}.wash-scene:not([data-step="0"]) .wash-tool-label{display:none}
.wash-scene[data-step="2"] .wash-bowl{cursor:grab}.wash-bowl[aria-pressed=true]{outline:2px dashed #fff1bd;outline-offset:-10px}
.wash-glint{position:absolute;left:45%;top:39%;font:32px var(--pixel);color:#fff4cd;pointer-events:none;display:none}.wash-scene[data-step="2"] .wash-glint{display:block}.wash-scene[data-step="3"] .wash-bowl{left:85%;top:65%;width:25%;height:27%;transform:translate(-50%,-50%);z-index:3}.wash-scene[data-step="3"] .wash-glint{left:85%;top:43%;display:block;z-index:4}
.wash-scene button:focus-visible{outline:3px solid #fff1bd;outline-offset:2px}.wash-meter{overflow:hidden}.wash-meter>span{display:block;height:100%;transition:width .12s linear}.is-washing #task-description{display:none}.wash-scene [hidden]{display:none!important}
@keyframes wash-flow{to{background-position:0 12px;opacity:.8}}
@media(max-width:400px){.wash-sponge{width:62px;height:52px}.wash-rack span,.wash-tool-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.wash-water{animation:none}.wash-meter>span{transition:none}}

.wash-scene[data-step="3"] .sprite-bowl{background-image:url('assets/bowl-inverted-v1.png');background-size:contain;background-position:center}
