/* Walk-cycle sprite atlas: 4 columns per row, three residents per sheet. */
.actor-layer{z-index:4;pointer-events:none}
.actor.sprite-actor{width:88px;height:88px;position:absolute;pointer-events:auto;cursor:pointer;filter:drop-shadow(2px 5px 2px #18252a6b);animation:none;translate:none;transform:translate(calc(-50% + var(--roam,0px)), -100%);transition:transform 3.5s linear;will-change:transform;z-index:5}
.actor.sprite-actor:hover{z-index:9;filter:drop-shadow(0 0 8px #f2c981)}
.sprite-art{display:block;position:absolute;inset:0;background-repeat:no-repeat;background-size:400% 300%;background-position-x:0%;background-position-y:var(--row,0%);image-rendering:auto;transform:scaleX(var(--face,1));transition:none}
.sprite-actor.walking .sprite-art{animation:sprite-walk .7s steps(3,end) infinite}
.sprite-actor.idle .sprite-art{background-position-x:0%}
.sprite-actor .actor-name{font-size:10px;opacity:0;bottom:87px;padding:4px 8px;background:#132830e8;border:1px solid #c99b61;color:#ffebc6}
.sprite-actor:hover .actor-name,.sprite-actor.selected .actor-name{opacity:1}
.speech-pop{position:absolute;left:42px;bottom:84px;min-width:125px;max-width:200px;padding:9px 11px;background:#fff9e5;color:#302a25;border:2px solid #544636;border-radius:13px;box-shadow:2px 3px 0 #26303562;font:700 12px/1.35 'DM Sans',sans-serif;text-align:left;pointer-events:none;z-index:20;animation:bubble-in .22s ease-out}
.sprite-actor:nth-child(even) .speech-pop{left:auto;right:40px;transform-origin:right bottom}
.speech-pop:after{content:'';position:absolute;bottom:-11px;left:20px;border:5px solid transparent;border-top-color:#544636}
.sprite-actor:nth-child(even) .speech-pop:after{left:auto;right:20px}
@keyframes bubble-in{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
.sprite-actor:after,.sprite-actor .actor-inner{display:none}
.actor.sprite-actor.paused .sprite-art{animation-play-state:paused!important}
@keyframes sprite-walk{from{background-position-x:0%}to{background-position-x:100%}}
.scene-hint{background:#172329a9;bottom:4%}
@media(max-width:850px){.actor.sprite-actor{scale:1;width:66px;height:66px}.sprite-actor .actor-name{bottom:65px}}