/* Direct manipulation on authored photographs. The complete photo and its
   coordinates travel together; narrow screens pan the workbench without cropping. */
.chore-workspace-wrap { max-width:100%; overflow:auto hidden; border:1px solid var(--line); border-radius:12px; overscroll-behavior-x:contain; background:#162126; scrollbar-width:thin; }
.chore-workspace { position:relative; isolation:isolate; width:100%; min-width:600px; aspect-ratio:3 / 2; overflow:hidden; background:#172021; }
.chore-workspace-photo { display:block; width:100%; height:100%; aspect-ratio:3 / 2; object-fit:fill; pointer-events:none; }
.chore-spatial { min-width:0; max-width:100%; }
.chore-spatial button { font:inherit; }
.chore-spatial button:focus-visible { outline:3px solid #fff7ce; outline-offset:3px; }
.chore-spatial-hint { margin:10px 0 5px; color:#d0ddd6; font-size:13px; line-height:1.5; }
.chore-instructions { padding:6px 0!important; min-height:0!important; border:0!important; background:transparent!important; }
.chore-instructions h3 { font-size:16px; margin:3px 0; }
.chore-instructions p { margin:3px 0; font-size:13px; }
.chore-button-controls { margin-top:10px; border-top:1px solid var(--line); padding-top:9px; }
.chore-button-controls summary { cursor:pointer; font-size:12px; color:var(--muted); min-height:32px; }
.chore-button-controls-body { display:grid; gap:10px; padding:8px 0; }
.chore-button-controls button { min-height:44px; }
.chore-object-photo { display:block; width:100%; aspect-ratio:1; background-size:300% 300%; background-repeat:no-repeat; border-radius:9px; flex-shrink:0; }
.chore-held-object, .chore-world-target, .chore-fabric-handle, .chore-surface-tool, .chore-weed-grip, .chore-debris-pile, .chore-sweep-next, .chore-world-tension, .chore-work-patch { position:absolute; transform:translate(-50%,-50%); touch-action:none; }
.chore-held-object { width:104px; min-height:104px; padding:0; border:0; background:transparent; color:#fff; z-index:4; cursor:grab; filter:drop-shadow(0 10px 8px #080d1488); }
.chore-held-object .chore-object-photo { border:2px solid #ddd9c288; border-radius:30%; }
.chore-object-label { display:block; font-size:11px; background:#12282ae8; padding:4px 6px; border-radius:6px; margin-top:3px; pointer-events:none; }
.chore-held-object.is-held { cursor:grabbing; z-index:20; scale:1.08; }
.chore-held-object.is-selected { filter:drop-shadow(0 0 9px #ebffc9); }
.chore-world-target { border:1px solid #e3e9d499; border-radius:7px; background:#17282bea; color:#f7faf0; padding:7px 9px; min-width:58px; max-width:120px; min-height:44px; font-size:12px!important; line-height:1.2; z-index:3; box-shadow:0 3px 12px #0005; cursor:pointer; }
.chore-storage-target::after { content:''; width:8px; height:8px; border-radius:50%; background:#e5e8ca; position:absolute; left:calc(50% - 4px); bottom:-12px; box-shadow:0 1px 3px #0009; }
.chore-world-target:hover,.chore-world-target.is-near { background:#486657; box-shadow:0 0 0 3px #dcf3c88c; }
.chore-world-target:disabled { opacity:.5; cursor:default; }
.chore-world-action { max-width:150px; }
.chore-object-grime { position:absolute; inset:8%; background:url('../assets/chores/grime.webp') center/contain no-repeat; pointer-events:none; opacity:.82; }
.chore-fold-garment { width:160px; min-height:150px; translate:var(--fabric-x,0) var(--fabric-y,0); perspective:500px; }
.chore-fold-garment .chore-object-photo { border:0; border-radius:15%; transform-origin:center; transition:transform .16s; }
.chore-fold-garment[data-fold-motion="left"] .chore-object-photo { transform:rotateY(55deg) scaleX(.7); }
.chore-fold-garment[data-fold-motion="right"] .chore-object-photo { transform:rotateY(-55deg) scaleX(.7); }
.chore-fold-garment[data-fold-motion="up"] .chore-object-photo { transform:rotateX(60deg) scaleY(.7); }
.chore-fold-garment[data-fold-motion="press"] .chore-object-photo { transform:scale(.9); }
.chore-fabric-handle { border:1px dashed #fbefc3; border-radius:8px; padding:6px 8px; min-height:40px; max-width:100px; font-size:11px!important; background:#192826d9; color:#fffce8; cursor:grab; z-index:5; }
.chore-fabric-handle:hover { background:#4c6150; }
.chore-spatial #cards.chore-sock-pile { position:absolute; inset:26% 11% 22% 8%; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; align-content:center; }
.chore-sock-pile .chore-sock-card { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:82px; padding:2px; border:0; background:transparent; color:#fff; font-size:10px; transform:rotate(var(--sock-rotate)); filter:drop-shadow(2px 4px 3px #0005); touch-action:none; cursor:grab; }
.chore-sock-pile .chore-object-photo { width:63px; border-radius:25%; }
.chore-sock-pile .chore-sock-card.active { outline:2px solid #eeedc2; }
.chore-sock-pile .chore-sock-card.done { opacity:.35; scale:.8; }
.chore-sock-pile .chore-sock-card.is-held { z-index:20; }
.chore-sock-lost { max-width:100px; }
.chore-tool-tray { position:absolute; left:7%; right:7%; bottom:3%; display:flex; justify-content:center; gap:6px; z-index:6; }
.chore-world-tool { display:flex; flex-direction:column; align-items:center; gap:3px; width:72px; min-height:76px; padding:5px; border:1px solid #e3e7d466; border-radius:8px; background:#132526e6; color:#fcfcf0; font-size:11px!important; line-height:1.1; touch-action:none; cursor:grab; }
.chore-world-tool .chore-object-photo { width:42px; }
.chore-world-tool.is-selected { border:2px solid #f5e9b3; box-shadow:0 0 10px #f7ebba66; background:#52604cec; }
.chore-work-patch { border:1px dashed #fff2b7bb; background:transparent; border-radius:45%; z-index:3; cursor:crosshair; }
.chore-work-patch .chore-object-grime { translate:var(--work-shift,0) 0; }
.chore-work-patch[data-tool="rinse"],.chore-work-patch[data-tool="soak"] { background:#9ee1f936; }
.chore-work-patch[data-tool="dry"] { background:#edeae422; }
.chore-workspace-surface .chore-photo-surface { position:absolute; inset:28% 9% 8%; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:1fr; padding:0; gap:0; border:0; border-radius:0; background:transparent; touch-action:none; }
.chore-photo-surface .chore-dirt { position:relative; min-height:40px; min-width:0; padding:0; border:0; border-radius:0; background:transparent; opacity:.94; transition:opacity .12s; cursor:crosshair; }
.chore-photo-surface .chore-dirt::before { content:''; position:absolute; inset:4%; pointer-events:none; background:url('../assets/chores/grime.webp') center/contain no-repeat; transform:rotate(19deg); }
.chore-photo-surface .chore-dirt:nth-child(3n)::before { transform:rotate(117deg) scale(.9); }
.chore-photo-surface .chore-dirt:nth-child(4n)::before { transform:rotate(243deg) scale(1.15); }
.chore-photo-surface .chore-dirt:nth-child(5n)::before { transform:rotate(305deg) scale(.8); }
.chore-photo-surface .chore-dirt.faint { opacity:.32; }
.chore-photo-surface .chore-dirt.clean { opacity:0; }
.chore-photo-surface .chore-dirt:focus-visible { opacity:1; outline:3px solid #f0e8b8; outline-offset:-3px; }
[data-chore-game="car_wash"] .chore-photo-surface { inset:15% 6% 8%; }
.chore-surface-tool { width:70px; border:1px solid #e4e8cc88; border-radius:9px; padding:4px; background:#1a2a25e8; color:#fff; font-size:11px!important; z-index:5; cursor:grab; }
.chore-working-cursor { position:absolute; transform:translate(-50%,-50%); width:48px; pointer-events:none; opacity:0; z-index:9; rotate:-20deg; filter:drop-shadow(0 4px 3px #0006); }
.chore-working-cursor.is-visible { opacity:1; }
.chore-coverage-ground { position:absolute; inset:35% 12% 20%; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(5,1fr); gap:0; transform:perspective(700px) rotateX(10deg); touch-action:none; cursor:crosshair; }
[data-chore-game="vacuum_downstairs"] .chore-coverage-ground { inset:34% 15% 18%; }
.chore-ground-patch { border:1px solid #e9e9ba24; background:repeating-linear-gradient(0deg,#41402e4d 0 4px,#76684844 4px 6px); min-width:0; padding:0; cursor:crosshair; transition:background .15s; touch-action:none; }
.chore-ground-patch.is-clean { background:#bdd7a514; border-color:transparent; box-shadow:inset 0 3px 8px #d6e7ce28; }
.chore-ground-patch.is-obstacle { border:1px dashed #f4cf7977; background:#3e332477; }
.chore-ground-patch.is-obstacle::after { content:'×'; color:#fae7a5; font-size:20px; }
.chore-ground-patch.is-inactive { visibility:hidden; }
.chore-coverage-ground.is-paused { filter:grayscale(.5); cursor:not-allowed; }
.chore-machine-cursor { position:absolute; width:66px; height:38px; border:3px solid #929797; border-radius:11px 11px 5px 5px; background:linear-gradient(#5a6060,#242927); color:#f5f2df; font-size:10px; display:grid; place-items:center; transform:translate(-50%,-50%); pointer-events:none; opacity:0; z-index:8; box-shadow:0 6px 4px #0007; }
.chore-machine-cursor.is-visible { opacity:1; }
.chore-debris-pile { width:72px; height:63px; border:0; background:transparent; z-index:5; cursor:grab; }
.chore-debris-pile .chore-object-grime { inset:0; opacity:.95; filter:sepia(.7); }
[data-chore-game="leaf_rake"] .chore-debris-pile .chore-object-grime { filter:sepia(1) saturate(3) hue-rotate(345deg); }
.chore-sweep-next { min-width:56px; min-height:42px; max-width:70px; border:1px dashed #eaf0c099; border-radius:50%; background:#71826442; color:#ffffec; font-size:10px!important; z-index:4; }
.chore-weed-grip { min-width:74px; min-height:52px; border:2px solid #e3e4b5; border-radius:40%; color:#fffdec; background:#263c21c9; z-index:5; cursor:grab; }
.chore-world-tension { width:200px; height:24px!important; z-index:5; background:#172c23ed!important; box-shadow:0 3px 8px #0007; }
.chore-world-tension .safe { background:#98cf91; }
@media(max-width:600px) {
 .chore-workspace-wrap::after { content:'Swipe the image sideways to reach the whole work area'; display:block; position:sticky; left:0; width:100%; padding:5px 8px; box-sizing:border-box; background:#162a2a; color:#b6c9c1; font-size:10px; }
 .chore-spatial-hint { font-size:12px; }
 .chore-button-controls-body .chore-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(prefers-reduced-motion:reduce) { .chore-object-photo,.chore-ground-patch,.chore-dirt { transition:none!important; } }

[data-chore-game="dishwasher"] .chore-workspace { aspect-ratio:16 / 9; }
/* The moving machine head and leaf pile are cropped from the same photographed
   workspace, keeping their materials consistent with the scene under the tool. */
[data-chore-game="lawn_strip"] .chore-machine-cursor { width:96px; height:76px; border:0; border-radius:24%; color:transparent; background:url('../assets/chores/lawn.webp') 51% 93% / 390% auto no-repeat; clip-path:polygon(17% 22%,82% 22%,98% 82%,87% 100%,7% 100%,0 77%); }
[data-chore-game="vacuum_downstairs"] .chore-machine-cursor { width:82px; height:62px; border:0; border-radius:10px; color:transparent; background:url('../assets/chores/vacuum.webp') 48% 85% / 620% auto no-repeat; }
[data-chore-game="leaf_rake"] .chore-debris-pile { border-radius:46%; background:url('../assets/chores/leaves.webp') 81% 64% / 380% auto no-repeat; box-shadow:0 3px 5px #17201666; }
[data-chore-game="leaf_rake"] .chore-debris-pile .chore-object-grime { opacity:.15; }

/* Guided coverage cleaning: the active tool and every remaining patch are visible. */
.chore-clean-instruction { padding:10px 12px; border-left:3px solid #c9dca0; background:#213733; color:#edf5dc; line-height:1.5; }
.chore-clean-controls { margin:10px 0; }
.chore-clean-controls button { min-height:44px; width:100%; }
.chore-clean-area { position:absolute; inset:27% 13% 23%; display:grid; gap:0; touch-action:none; cursor:crosshair; border:1px dashed #f3e3ac; border-radius:8px; overflow:hidden; }
.chore-baseboard-scene .chore-clean-area { inset:46% 9% 28%; }
.chore-pan-scene .chore-clean-area { inset:32% 24% 28%; border-radius:40%; }
.chore-clean-area.is-blocked { opacity:.25; pointer-events:none; }
.chore-clean-patch { position:relative; padding:0; min-width:0; border:1px solid #f1e8c033; background:transparent; touch-action:none; }
.chore-clean-patch::before { content:''; position:absolute; inset:4%; pointer-events:none; background:url('../assets/chores/grime.webp') center/contain no-repeat; opacity:var(--dirt,.7); }
.chore-clean-patch:nth-child(3n)::before { rotate:37deg; }
.chore-clean-patch.is-worked::before { opacity:0; }
.chore-clean-patch.is-worked { background:#99d2ad22; border-color:transparent; }
.chore-clean-area[data-clean-phase='dry'] .chore-clean-patch::before,
.chore-clean-area[data-clean-phase='rinse'] .chore-clean-patch::before { background:#a0d8f477; border-radius:45%; }
.chore-clean-area[data-clean-phase='soap'] .chore-clean-patch::before,
.chore-clean-area[data-clean-phase='spray'] .chore-clean-patch::before { background:#f1df7955; }
.chore-clean-tool { position:absolute; bottom:3%; left:calc(50% - 44px); width:88px; padding:5px; border:2px solid #e0e7bd; border-radius:10px; background:#19362e; color:#fff8dc; touch-action:none; cursor:grab; font-size:12px!important; }
.chore-clean-tool .chore-object-photo { width:52px; margin:auto; pointer-events:none; }
.chore-clean-cursor { position:absolute; width:48px; pointer-events:none; transform:translate(-50%,-50%); z-index:9; opacity:0; }
.chore-clean-cursor.is-visible { opacity:1; }
.chore-cleaning-scene { min-width:0; aspect-ratio:3 / 2; }
@media(max-width:600px) { .chore-cleaning-scene { min-width:0; min-height:270px; } .chore-cleaning-scene .chore-workspace-photo { position:absolute; inset:0; object-fit:cover; } .chore-clean-tool { width:74px; left:calc(50% - 37px); font-size:11px!important; } .chore-clean-tool .chore-object-photo { width:38px; } }

.chore-clean-patch.is-worked { pointer-events:none; }