/* Three city atlases: each contains sixteen independent two-storey buildings. */
.building[data-city]:not([data-city='legacy']) .building-art{background-size:400% 400%;background-position:var(--art-x) var(--art-y)}
.building[data-city='harbor'] .building-art{background-image:url('assets/buildings-harbor-v3.png')}
.building[data-city='jiangnan'] .building-art{background-image:url('assets/buildings-jiangnan-v3.png')}
.building[data-city='neon'] .building-art{background-image:url('assets/buildings-neon-v3.png')}
.building[data-city]:not([data-city='legacy']) .building-name{top:var(--sign-y,58%);transform:translateY(-50%);left:12%;width:66%;color:#fffbe2;text-shadow:0 1px 2px #342314,0 -1px #342314;font-size:clamp(9px,1.2vw,17px);line-height:1.4;white-space:nowrap}
.building[data-city='jiangnan'] .building-name{color:#ffeec4}
.building[data-city='neon'] .building-name{color:#eefaff;text-shadow:0 1px 3px #021325,0 0 4px #02265a}
.building[data-city]:not([data-city='legacy']) .building-actors{bottom:calc(104% - var(--sign-y,58%));left:15%;width:59%}
.building[data-city]:not([data-city='legacy']) .building-number{left:9%;bottom:8%}
.building[data-city]:not([data-city='legacy']) .building-stars{top:77%;left:16%;width:62%;font-size:10px}
.modal-body .building[data-city]:not([data-city='legacy']) .building-name{font-size:7px;line-height:1.4}
.city-backdrop{position:absolute;inset:0;background-size:cover;background-position:center bottom;transition:filter 1s}
.sky .distant-city,.sky .sea,.sky .distant-hills,.sky .cloud{display:none}
.sky .sun{opacity:.9;top:19%;left:76%;width:70px;height:70px;box-shadow:0 0 45px #fff7a575}
.night .city-backdrop{filter:brightness(.32) saturate(.8) hue-rotate(8deg)}
.night .sky .stars{z-index:1;pointer-events:none}
.city-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.city-ambient i{position:absolute;left:20%;top:35%;opacity:.75;animation:ambient-drift 40s linear infinite}
.city-ambient i:nth-child(2){left:55%;top:28%;animation-delay:-12s}.city-ambient i:nth-child(3){left:74%;top:39%;animation-delay:-20s}.city-ambient i:nth-child(4){left:45%;top:50%;animation-delay:-30s}.city-ambient i:nth-child(5){left:84%;top:53%;animation-delay:-8s}
[data-city='harbor'] .city-ambient i{width:16px;height:7px;border-top:2px solid #567282;border-radius:50%;rotate:8deg}
[data-city='harbor'] .city-ambient i:after{content:'';position:absolute;left:13px;top:-2px;width:15px;height:7px;border-top:2px solid #567282;border-radius:50%;rotate:-16deg}
[data-city='jiangnan'] .city-ambient{background:linear-gradient(transparent 50%,#d3e3dd50 73%,transparent)}
[data-city='jiangnan'] .city-ambient i{height:6px;width:9px;border-radius:70% 20%;background:#f3c4ce;animation:petal-drift 22s linear infinite}
[data-city='neon'] .city-ambient i{height:4px;width:4px;border-radius:50%;background:#bcdfff;box-shadow:0 0 10px 3px #aadfff;animation:city-spark 4s ease-in-out infinite alternate}
[data-city='jiangnan'] .back-fence{border-color:#526658;background:repeating-linear-gradient(90deg,#5d7463 0 5px,transparent 5px 25px),linear-gradient(transparent 8px,#81988b 8px 12px,transparent 12px 40px,#556658 40px)}
[data-city='jiangnan'] .sidewalk{background:repeating-linear-gradient(90deg,#a7b0a8 0 41px,#7e8983 41px 44px);border-top-color:#d6ded7}
[data-city='neon'] .back-fence{border-color:#344b70;background:repeating-linear-gradient(90deg,#798fa8 0 3px,transparent 3px 20px),linear-gradient(transparent 10px,#acbdd3 10px 13px,transparent 13px 40px,#667d9b 40px)}
[data-city='neon'] .sidewalk{border-top-color:#d2ddf0;background:repeating-linear-gradient(90deg,#a0aabd 0 35px,#728499 35px 38px)}
[data-city='neon'].night .building-art{filter:drop-shadow(3px 6px 3px #050c2460) brightness(.96) saturate(1.3)}
.person,.person.paused{animation:none;rotate:none;translate:none}
.person .resident-sprite{overflow:visible;transition:scale .12s;transform-origin:50% 50%;scale:1 1}
.person.facing-left .resident-sprite{scale:-1 1}
.limb{transform-box:view-box}
.leg-left{transform-origin:34px 100px}.leg-right{transform-origin:51px 100px}.arm-left{transform-origin:28px 81px}.arm-right{transform-origin:58px 81px}
.walking .leg-left,.walking .leg-right{animation:step-leg var(--gait-time,.7s) linear infinite;animation-delay:var(--gait-delay,0s)}
.walking .leg-right{animation-name:step-leg-opposite}
.walking .arm-left,.walking .arm-right{animation:swing-arm var(--gait-time,.7s) ease-in-out infinite;animation-delay:var(--gait-delay,0s)}
.walking .arm-right{animation-name:swing-arm-opposite}
.walking .actor-body{animation:walking-bob calc(var(--gait-time,.7s)/2) ease-in-out infinite;animation-delay:var(--gait-delay,0s)}
.paused .limb,.paused .actor-body{animation:none;transform:none}
.shopping-bubble{display:none;position:absolute;top:-20px;left:20px;background:#fff7da;border:2px solid #83a3a5;border-radius:8px;box-shadow:0 2px #37505a50; padding:2px}
.shopping-bubble .icon{height:22px;width:22px}.shopping .shopping-bubble{display:block}
.dock{max-width:1000px;gap:7px}.dock>button{min-width:105px}.dock>button.city-dock{min-width:105px}.city-dock small{font-size:9px}
.city-story{border:1px solid #8fb3b4;background:linear-gradient(#f4f9eb,#e0ece1);padding:18px;border-radius:7px;margin-bottom:22px}
.story-guide{display:flex;align-items:center;gap:16px;padding-bottom:16px}.story-guide>svg{flex:0 0 64px;height:96px;width:64px}.story-guide h2{font-size:17px;margin:5px 0;color:#28576a}.story-guide small{color:#788677}.story-guide p{color:#62767b;font-size:12px;line-height:1.7;margin:0}
.story-task{display:flex;gap:12px;align-items:center;border-top:1px solid #bdcec1;padding:14px 0}.story-task>div{flex:1}.story-task h3{font-size:13px;color:#305d6b;margin:0 0 4px}.story-task p{font-size:11px;color:#617a7d;margin:0 0 6px;line-height:1.7}.story-task small{font-size:10px;color:#9a762f}.task-number{border:2px solid #a5c8bd;background:#f8fff1;color:#5f8478;border-radius:50%;height:29px;width:29px;flex:0 0 29px;display:grid;place-items:center;font-weight:bold}.story-task.current .task-number{background:#f7d66b;border-color:#c29541;color:#77542b}.story-task.done{opacity:.7}.story-task.locked{opacity:.6}.story-metrics{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.story-metrics>span{font-size:10px;background:#d9e8dc;border-radius:3px;padding:4px 6px;color:#517079}.story-metrics b{color:#117e89}.task-done{font-size:11px;color:#538876}.story-task .task-wait{color:#88958b}
.city-map{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.city-card{border:2px solid #9db9b7;border-radius:8px;overflow:hidden;background:#f6faed}.city-picture{height:170px;background-size:cover;background-position:center;position:relative}.city-picture>span{position:absolute;left:12px;top:10px;font-size:28px;font-weight:bold;color:#fff;text-shadow:0 2px 3px #305671}.city-picture>b{position:absolute;bottom:10px;right:10px;font-size:10px;background:#edf7d8e8;color:#34546b;padding:5px 9px;border-radius:4px}.city-card.locked .city-picture{filter:saturate(.6)}.city-card-body{padding:14px}.city-card h2{color:#285e73;margin:5px 0;font-size:19px}.city-card small{color:#6a8a8b;font-size:10px}.city-card p{color:#758586;font-size:11px;line-height:1.7;margin:8px 0}.city-card .btn{font-size:10px;padding:8px;margin-top:6px}.current-city-label{display:inline-block;font-size:10px;color:#278293;padding:10px 4px}.chapter-complete{margin-top:20px;text-align:center;padding:20px;background:#fff0b2;border:1px solid #d2ab61;border-radius:7px}.chapter-complete h2{font-size:18px;color:#82602c}.chapter-complete p{font-size:12px;color:#8b754a;line-height:1.8}
.city-preview-banner{height:230px;border-radius:6px;background-size:cover;background-position:center 60%;position:relative;margin-bottom:14px;overflow:hidden}.city-preview-banner>div{position:absolute;inset:auto 0 0;background:linear-gradient(transparent,#203e61d9);padding:35px 20px 14px;color:#fff}.city-preview-banner h2{margin:5px 0}.city-preview-banner small,.city-preview-banner p{font-size:12px;margin:0}.city-preview-banner +p{line-height:1.8}
.lookbook{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.look-card{position:relative;background:linear-gradient(#f8fae9,#dcebe0);border:1px solid #a8c1b9;border-radius:6px;padding:12px 5px 8px;color:#3e6475;display:flex;flex-direction:column;align-items:center;gap:7px}.look-card>svg{height:116px;width:80px}.look-card b{font-size:11px}.look-card small{position:absolute;right:5px;top:5px;color:#889c92;font-size:9px}.look-card:hover,.look-card.selected{border:2px solid #daaf49;box-shadow:0 0 0 2px #fae5a0}.lookbook-link{margin-bottom:9px}.story-letter{text-align:center;padding:25px 15px}.story-letter>svg{height:160px;width:108px;display:block;margin:0 auto 10px}.story-letter small{color:#74978e}.story-letter h2{color:#35617b;font-size:20px}.story-letter p{font-size:14px;line-height:2;color:#698088;max-width:470px;margin:16px auto 24px}.street-upgrade{display:flex;gap:16px;align-items:center;border:1px solid #b0c3b7;border-radius:6px;background:#e6efd9;padding:15px;margin-bottom:15px}.street-upgrade>div{flex:1}.street-upgrade b{font-size:13px;color:#2b6074}.street-upgrade small{display:block;font-size:11px;color:#748373;margin-top:6px}
@keyframes step-leg{0%,100%{transform:rotate(-12deg) translateY(0)}25%{transform:rotate(0) translateY(-3px)}50%{transform:rotate(13deg) translateY(0)}75%{transform:rotate(0) translateY(0)}}
@keyframes step-leg-opposite{0%,100%{transform:rotate(13deg) translateY(0)}25%{transform:rotate(0) translateY(0)}50%{transform:rotate(-12deg) translateY(0)}75%{transform:rotate(0) translateY(-3px)}}
@keyframes swing-arm{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}@keyframes swing-arm-opposite{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes walking-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes ambient-drift{from{transform:translateX(-80px)}to{transform:translateX(250px)}}@keyframes petal-drift{from{transform:translate(-150px,-120px) rotate(0)}to{transform:translate(150px,220px) rotate(360deg)}}@keyframes city-spark{from{opacity:.1}to{opacity:.7}}
@media(max-width:1100px){.dock>button,.dock>button.city-dock{min-width:87px}.dock{gap:5px}}
@media(max-width:799px){.dock>button.city-dock{min-width:0}.dock{gap:4px}.city-dock small{display:none}.dock>button>b{font-size:9px}.city-map{grid-template-columns:1fr}.city-card{display:grid;grid-template-columns:110px 1fr}.city-picture{height:100%;min-height:177px}.city-picture>b{left:7px;right:7px;text-align:center;font-size:9px}.city-card-body{padding:12px}.city-card h2{font-size:17px}.city-card .btn{padding:7px}.lookbook{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.look-card>svg{width:55px;height:81px}.look-card b{font-size:9px}.city-story{padding:12px}.story-guide{gap:9px}.story-guide h2{font-size:14px}.story-guide p{font-size:10px}.story-guide>svg{flex-basis:46px;height:70px;width:46px}.story-task{gap:8px;flex-wrap:wrap}.story-task>div{min-width:180px}.story-task .btn{margin-left:39px;font-size:10px}.task-number{flex-basis:25px;width:25px;height:25px;font-size:11px}.story-task h3{font-size:12px}.story-task p{font-size:10px}.task-wait,.task-done{margin-left:39px}.street-upgrade{flex-direction:column;align-items:flex-start;gap:10px}.building[data-city]:not([data-city='legacy']) .building-name{font-size:13px}.modal-body .building[data-city]:not([data-city='legacy']) .building-name{font-size:6px}.sky .sun{top:26%;width:55px;height:55px}.city-backdrop{background-position:48% bottom}}
@media(max-height:450px) and (orientation:landscape){.city-map{grid-template-columns:repeat(3,minmax(0,1fr))}.city-card{display:block}.city-picture{height:110px;min-height:110px}.city-card-body{padding:9px}.city-card h2{font-size:16px}.lookbook{grid-template-columns:repeat(6,minmax(0,1fr))}.look-card>svg{height:86px;width:59px}.building[data-city]:not([data-city='legacy']) .building-name{font-size:8px}.building[data-city]:not([data-city='legacy']) .building-stars{font-size:6px}.dock>button.city-dock{min-width:0}.bottom-panel{left:65px;right:65px}.sky .sun{top:20%;height:40px;width:40px}}
@media(prefers-reduced-motion:reduce){.person .limb,.person .actor-body,.city-ambient i{animation:none!important}.person .resident-sprite,.city-backdrop{transition:none}}