/* v1.10.0 · Living City. Effects stay inside the transformed map and never receive input.
   The runtime enables motion only while the city is visible and permits fewer effects
   in economy mode. No per-frame layout, shadows or filters are animated. */
#mapWorld .living-canopy,
#mapWorld .living-fountain,
#mapWorld .living-ripple,
#mapWorld .living-commerce,
#mapWorld .living-mill-sails,
#mapWorld .living-workshop-wheel,
#mapWorld .living-window {pointer-events:none}
#mapWorld .living-canopy {transform-box:fill-box;transform-origin:50% 100%}
#mapWorld .living-ripple {transform-box:fill-box;transform-origin:center}
#mapWorld .living-mill-sails,
#mapWorld .living-workshop-wheel {transform-box:fill-box;transform-origin:center}
.living-window {opacity:var(--window-opacity,0);pointer-events:none}
html[data-living-motion="on"] #mapWorld .plot.occupied svg .living-window {
 opacity:var(--window-opacity,0);transition:opacity 4s ease;
}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"] .living-canopy {
 animation:living-tree-sway 6.5s ease-in-out infinite alternate;
}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"]:nth-child(2n) .living-canopy {animation-delay:-3.1s;animation-duration:7.8s}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"] .living-ripple {animation:living-water-ring 3.5s ease-in-out infinite}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"] .living-fountain {animation:living-water-flow 2.4s ease-in-out infinite alternate}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"] .living-commerce {animation:living-shop-warmth 8s ease-in-out infinite alternate}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"] .living-mill-sails {animation:living-machine-turn 17s linear infinite}
html[data-living-motion="on"] #mapWorld .plot[data-living-visible="true"] .living-workshop-wheel {animation:living-machine-turn 12s linear infinite}
html[data-living-quality="eco"] #mapWorld .living-canopy,
html[data-living-quality="eco"] #mapWorld .living-commerce,
html[data-living-quality="eco"] #mapWorld .living-ripple {animation:none!important}
html[data-living-quality="eco"] #mapWorld .living-mill-sails,
html[data-living-quality="eco"] #mapWorld .living-workshop-wheel {animation-duration:24s!important}
/* Superseded by cars whose routes are checked against the actual map. */
#mapWorld .street > .car {display:none!important;animation:none!important}
html[data-living-quality="off"] .showcase-car,
html[data-living-quality="off"] .showcase-walker,
html[data-living-quality="off"] .quick-person,
html[data-living-quality="off"] .quick-art .building-miniature,
html[data-living-quality="off"] .preview-art,
html[data-living-quality="off"] .preview-glow {animation-play-state:paused!important}
@keyframes living-tree-sway {from{transform:rotate(-.8deg)}to{transform:rotate(1deg)}}
@keyframes living-water-ring {0%,100%{transform:scale(.82);opacity:.4}50%{transform:scale(1.12);opacity:.7}}
@keyframes living-water-flow {from{opacity:.7}to{opacity:1}}
@keyframes living-shop-warmth {from{opacity:.84}to{opacity:1}}
@keyframes living-machine-turn {to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
 #mapWorld .living-canopy,#mapWorld .living-ripple,#mapWorld .living-fountain,
 #mapWorld .living-commerce,#mapWorld .living-mill-sails,#mapWorld .living-workshop-wheel {animation:none!important}
 .showcase-car,.showcase-walker,.quick-person,.quick-art .building-miniature,.preview-art,.preview-glow {animation:none!important}
}
/* Viewport-sized Canvas remains a child of mapWorld, so all gestures and zoom apply. */
#mapWorld > .living-city-layer{position:absolute;z-index:3;pointer-events:none!important;touch-action:none;contain:strict}
.living-settings{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 18px 12px;color:#35564b;font-size:12px}
.living-settings label{font-weight:800}
.living-settings select{font:inherit;font-size:16px;color:#294f43;background:#faf6e8;border:1px solid #a7baa4;border-radius:9px;min-height:44px;padding:8px 26px 8px 10px}
.living-settings small{color:#526958;font-size:11px}
@media(max-width:700px){.living-settings{margin-inline:12px;gap:5px 10px}.living-settings small{flex-basis:100%}}
/* Existing wonders and preview inhabitants obey the same decorative-motion budget. */
html:not([data-living-motion="on"]) #mapWorld .wonder-spin,
html:not([data-living-motion="on"]) #mapWorld .wonder-float,
html:not([data-living-motion="on"]) #mapWorld .wonder-pulse,
#mapWorld .plot:not([data-living-visible="true"]) .wonder-spin,
#mapWorld .plot:not([data-living-visible="true"]) .wonder-float,
#mapWorld .plot:not([data-living-visible="true"]) .wonder-pulse,
html[data-living-quality="off"] .wonder-spin,
html[data-living-quality="off"] .wonder-float,
html[data-living-quality="off"] .wonder-pulse {animation-play-state:paused!important}
/* Generic game canvases have a mobile max-height; the world layer must keep its
   exact world-coordinate rectangle or the browser would rescale/letterbox agents. */
#mapWorld > canvas.living-city-layer{max-width:none!important;max-height:none!important;object-fit:fill!important;cursor:inherit}