/* Approved loft layout, adapted to pixel art. */
.room-canvas-wrap{top:43%;width:min(100vw,calc((100dvh - 190px)*1.333333),1448px);aspect-ratio:4/3}
.game-shell{background:radial-gradient(ellipse at 50% 45%,#8a5038,#4a2a20)}
.room-name,.room-name svg,.room-name small,.hud-date{color:#f1d5aa;stroke:#f1d5aa}
.game-signature{color:#d5b386}
.room-canvas-wrap canvas{image-rendering:pixelated;filter:none;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 99%,transparent);mask-composite:intersect}
.task-art img{image-rendering:pixelated}
.paper-dialog{border-radius:1px}
.game-hud .tool-button{width:44px;height:44px}
.room-name small{font-size:10px}
.dialogue-dock{width:min(790px,calc(100% - 40px));padding:17px 22px}
.dialogue-dock h1,.dialogue-dock h2{font-size:19px;line-height:1.5}
.dialogue-dock p{font-size:12px;line-height:1.8;color:#786350}
.mission-line{font-size:9px}.next-button{min-height:44px;font-size:12px}
.hotspot{width:66px;height:58px}
.object-hotspot{cursor:grab;touch-action:none}
.room-hotspots{z-index:2}
.room-hotspots .hotspot.object-hotspot{min-width:24px;min-height:24px;max-width:64px;max-height:64px;border:1px solid transparent;border-radius:50%;background:transparent;box-shadow:none;z-index:2}
.room-hotspots .object-hotspot:hover,.room-hotspots .object-hotspot:focus-visible,.room-hotspots .object-hotspot.object-selected{border-color:#fff1c4;background:#fff2c922}
.object-hotspot .sparkle{display:none}
.room-hotspots .object-hotspot .hotspot-name{display:none!important}
.object-hotspot:active,.object-hotspot.dragging{cursor:grabbing}
.object-hotspot.dragging{z-index:5}.object-hotspot .sparkle{top:6px;right:12px}
.hotspot .hotspot-name{max-width:175px;white-space:normal;width:max-content;text-align:center;font-size:11px;line-height:1.5;padding:6px 9px}
.destination-hotspot{width:78px;height:64px;border:2px dashed #e6edcc;background:#afbd7b50;box-shadow:0 0 0 5px #f6f1ce22;border-radius:50%;z-index:4}
.destination-hotspot .sparkle{top:19px;right:27px;font-size:20px}
.destination-hotspot .hotspot-name{opacity:1;top:100%;background:#f9f4dc;border-color:#9eac81;color:#5a6d44}
.destination-locked{background:#a58f7440;border-color:#c9aa86;box-shadow:none}
.destination-locked .hotspot-name{background:#f2e3cd;color:#886b4e;border-color:#b99d7f}
.prepare-button{background:#738465;border-color:#566747;min-width:145px}
.prepare-button:hover{background:#627553}
.chore-hotspot,.board-hotspot,.table-hotspot,.letter-hotspot{border:1px dashed #fff2ceaa;background:#fff0ca16;border-radius:50%}
.table-hotspot .hotspot-name{opacity:1;top:100%}.board-hotspot{width:70px;height:70px}
.object-button{font-size:13px;min-height:48px}.object-button small{font-size:11px}
.help-dialog>p{font-size:13px;color:#786759}
.primary-button,.secondary-button{font-size:13px;min-height:46px}
.quiet-note{font-size:11px!important}.text-button{font-size:11px;min-height:38px}
.entry-dialog{width:min(440px,calc(100% - 32px))}.entry-dialog .player-card{min-height:62px}.player-card>span:first-of-type{font-size:14px}
.paper-dialog{scrollbar-width:thin;scrollbar-color:#bea78e transparent}
.paper-dialog .dialog-close{min-width:44px;min-height:44px;top:1px;right:2px}
.chore-dialog{width:min(500px,calc(100% - 24px));padding:30px 28px 24px;text-align:left}
.chore-dialog h2{margin-bottom:10px}
.chore-dialog .board-intro{font-size:13px;line-height:1.9;color:#8e7668;margin:0}
.chore-dialog .text-button{margin:6px 0;padding-left:0}
.chore-dialog .board-status{font:12px/1.8 var(--body);color:#687657;background:#e9ead4;padding:12px;border-radius:4px;margin:12px 0 14px;min-height:62px}
.chore-row{border-top:1px solid #d9c5aa;padding:14px 0}
.chore-row h3{font:17px/1.5 var(--serif);margin:0;color:#775c69}
.chore-row p{font-size:11px;margin:3px 0 9px;color:#8a7665}
.volunteers{display:flex;gap:7px}
.volunteers button{flex:1;padding:8px 5px;min-height:44px;border:1px solid #c8b39a;border-radius:4px;background:#f6ead5;font-size:12px}
.volunteers button[aria-pressed=true]{background:#dde3c5;color:#536246;border-color:#9ba87c}
.volunteers button:disabled{opacity:.5}.volunteers button[aria-pressed=true]:disabled{opacity:1}
.chore-start{margin-top:9px;padding:8px 13px;width:100%;min-height:44px;color:#fdf4df;background:#8e778c;border:1px solid #766174;border-radius:4px;font-size:12px}
.chore-start:disabled{opacity:.45;background:#b9aa99}
.task-dialog{width:min(430px,calc(100% - 28px))}
.task-dialog #task-person{display:block;padding:0 10px;line-height:1.8;letter-spacing:.6px;font-size:10px}
.task-dialog h2{margin:8px 0}
.task-art{display:grid;place-items:center;width:100%;height:170px;margin:8px 0;background:radial-gradient(ellipse,#dcd8b9a0,transparent 65%)}
.task-art img{max-width:100%;max-height:200px;transition:transform .3s}
.task-laundry.step-1 img{transform:scaleX(.8)}.task-laundry.step-2 img{transform:scale(.65)}.task-laundry.step-3 img{transform:scale(.5)}
.task-art svg{width:150px;height:150px;transition:transform .3s,opacity .3s}
.task-trash.step-2 svg{transform:translateX(25px) scale(.85)}.task-trash.step-3 svg{transform:translateX(50px) scale(.7);opacity:.35}
.dish-art{position:relative;width:160px;height:95px;border-radius:50%;background:#efe8cf;border:8px solid #c7bc9b;box-shadow:inset 0 0 0 3px #fcf6e1,0 12px 0 #c6b28c44;transform:rotate(-12deg)}
.dish-mark{position:absolute;top:23px;left:35px;width:65px;height:30px;border-radius:50%;background:#a88961;opacity:.45}
.dish-bubbles{position:absolute;top:-27px;left:15px;font:48px/1 Georgia;color:#d9e7df;text-shadow:0 1px 1px #779186}
.task-dishes.step-1 .dish-mark,.task-dishes.step-2 .dish-mark,.task-dishes.step-3 .dish-mark{opacity:0}
.task-dishes.step-2 .dish-bubbles,.task-dishes.step-3 .dish-bubbles{display:none}
.task-dishes.step-3 .dish-art{transform:rotate(-25deg) scale(.85)}
.task-dialog #task-description{font:14px/1.8 var(--serif);min-height:50px;margin:4px 0}
.task-dialog #task-progress{margin:6px 0 14px;color:#70805b!important}
.letter-to{font-size:14px;line-height:1.6}.date-ticket small{font-size:9px}.date-ticket strong{font-size:12px}.date-ticket span{font-size:10px}.reply-text{font-size:13px!important}
@media(max-width:700px){
 .hotspot.object-hotspot{width:72px;height:44px}.hotspot.object-hotspot .hotspot-name{font-size:10px}
 .game-hud{top:max(14px,env(safe-area-inset-top));left:14px;right:14px}.game-hud .tool-button{width:42px;height:42px}.room-name small{font-size:8px;max-width:135px}
 .room-canvas-wrap{top:39%;width:min(125vw,calc((100dvh - 210px)*1.333333))}
 .dialogue-dock{bottom:max(26px,env(safe-area-inset-bottom));width:calc(100% - 24px);padding:14px;gap:9px;flex-wrap:wrap}.dialogue-copy{flex-basis:100%}
 .dialogue-dock h1,.dialogue-dock h2{font-size:17px}.dialogue-dock p{font-size:12px;line-height:1.8}.mission-line{font-size:8px}.next-button{max-width:none;width:100%;font-size:12px}
 .object-hotspot{width:52px;height:50px}.destination-hotspot{width:54px;height:48px}.destination-hotspot .sparkle{top:13px;right:15px}.destination-hotspot .hotspot-name{max-width:140px;font-size:10px}
 .chore-hotspot,.board-hotspot,.table-hotspot,.letter-hotspot{width:48px;height:46px}.chore-dialog{padding:28px 20px 20px}.entry-dialog{padding:20px;bottom:max(30px,env(safe-area-inset-bottom))}.entry-dialog .quiet-note{font-size:10px!important}.task-dialog{padding:28px 22px 20px}
}
@media(max-height:550px) and (min-aspect-ratio:1/1){
 .room-canvas-wrap{top:40%;width:min(95vw,calc((100dvh - 100px)*1.333333))}.game-hud{top:9px}.game-hud .tool-button{width:36px;height:36px}
 .dialogue-dock{bottom:9px;padding:9px 14px;width:min(750px,calc(100% - 24px));flex-wrap:nowrap}.dialogue-copy{flex-basis:auto}.dialogue-dock h1,.dialogue-dock h2{font-size:14px}.dialogue-dock p{font-size:10px;line-height:1.6}.next-button{width:auto;max-width:130px;font-size:10px}
 .entry-dialog{width:305px;right:18px;bottom:18px;left:auto;padding:16px}.entry-dialog .player-card{min-height:48px}.task-art{height:110px}.task-art img{max-height:130px}.task-art svg{height:110px}
}
@media(max-height:550px) and (min-aspect-ratio:1/1){.destination-hotspot{width:48px;height:44px}.destination-hotspot .sparkle{top:11px;right:12px}.destination-hotspot .hotspot-name{max-width:110px;font-size:9px}}