/* Local Chinatown environment study — pending user approval. */
.city-scene{position:fixed;bottom:0;left:50%;width:100vw;aspect-ratio:3/2;transform:translateX(-50%);pointer-events:none;z-index:0;overflow:hidden}
.city-art{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;opacity:.72}
.city-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#211a1920 0%,#211a1920 28%,#211a1977 48%,#211a1955 70%,#211a1900 100%)}
header{background:#211a1990}footer{background:transparent;color:#eee0c5;text-shadow:0 1px 3px #211a19}
.copy,.desktop-icon>span,.controls{text-shadow:0 1px 3px #211a19,0 0 10px #211a19}
.webshop-icon{background:#211a19aa;border-color:#9d343588}.desktop-icon:hover{background:#211a19cc}
.bridge-train{position:absolute;top:29.5%;left:-25%;width:46.6667%;z-index:1;opacity:.85;display:none}
.bridge-train img{display:block;width:100%;height:auto}
.bridge-train.passing{display:block;animation:bridge-crossing 17.77s linear forwards}
@keyframes bridge-crossing{from{left:-48.6667%}to{left:105%}}
@media(prefers-reduced-motion:reduce){.bridge-train.passing{display:none;animation:none}}

/* Preserve square pixels and building proportions on narrow screens. */
@media(max-aspect-ratio:3/2){.city-scene{bottom:0}.scene{margin-top:-30px}}

.bridge-train img{image-rendering:pixelated}.bridge-train.preview{display:block;left:10%;animation:none}

.sidewalk-people{position:absolute;inset:0;z-index:2;pointer-events:none}.pedestrian{position:absolute;top:82.8%;width:3.3%;height:auto;image-rendering:pixelated;animation:sidewalk-walk var(--duration) linear infinite;animation-delay:var(--delay);left:var(--start)}.pedestrian.with-cart{width:5.4%;top:82.4%}.pedestrian.reverse{transform:scaleX(-1);animation-direction:reverse}.pedestrian svg{display:block;width:100%;height:auto}.pedestrian .step-a{animation:footstep .7s steps(2,end) infinite}.pedestrian .step-b{animation:footstep .7s steps(2,end) infinite reverse}@keyframes sidewalk-walk{from{left:-8%}to{left:106%}}@keyframes footstep{from{transform:translateY(0)}to{transform:translateY(-1px)}}@media(prefers-reduced-motion:reduce){.pedestrian{animation:none;left:var(--rest)}.pedestrian .step-a,.pedestrian .step-b{animation:none}}

.fruitstand{position:absolute;left:7%;top:80%;width:9.5%;z-index:3;pointer-events:none}.fruitstand svg{display:block;width:100%;height:auto;image-rendering:pixelated}.vendor-hand{animation:sort-fruit 6s steps(2,end) infinite}.vendor-body{animation:vendor-shift 9s steps(2,end) infinite}@keyframes sort-fruit{0%,60%,100%{transform:translate(0,0)}65%,75%{transform:translate(-2px,1px)}80%,85%{transform:translate(-1px,0)}}@keyframes vendor-shift{0%,70%,100%{transform:translateX(0)}75%,85%{transform:translateX(1px)}}@media(prefers-reduced-motion:reduce){.vendor-hand,.vendor-body{animation:none}}

/* Day/night ambience follows New York's clock, with local review overrides. */
body{background:var(--sky-color,#211a19);transition:background-color 15s linear}.time-sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--sky-color,#211a19);transition:background-color 15s linear}.city-scene{z-index:1}.city-art{mix-blend-mode:normal}.city-scene:after{opacity:.3;transition:opacity 5s}.sky-stars{position:absolute;inset:0;opacity:var(--night-opacity,1);transition:opacity 5s}.tiny-star{position:absolute;width:2px;height:2px;background:#eee0c5}.cross-star{position:absolute;width:3px;height:9px;background:#eee0c5}.cross-star:after{content:'';position:absolute;left:-3px;top:3px;width:9px;height:3px;background:#eee0c5}.sky-sun,.sky-moon{position:absolute;top:14%;right:12%;width:38px;height:38px;clip-path:polygon(25% 0,75% 0,75% 10%,90% 10%,90% 25%,100% 25%,100% 75%,90% 75%,90% 90%,75% 90%,75% 100%,25% 100%,25% 90%,10% 90%,10% 75%,0 75%,0 25%,10% 25%,10% 10%,25% 10%)}.sky-sun{background:#efd596;box-shadow:0 0 20px #efd59660}.sky-moon{background:#eee0c5}.sky-moon:after{content:'';position:absolute;left:15px;top:-7px;width:32px;height:34px;background:var(--sky-color);clip-path:inherit}.pixel-cloud{position:absolute;width:90px;height:28px;background:#f5f0e7;clip-path:polygon(0 40%,15% 40%,15% 20%,30% 20%,30% 0,60% 0,60% 20%,80% 20%,80% 40%,100% 40%,100% 100%,0 100%);opacity:.8}.cloud-one{top:22%;left:9%}.cloud-two{top:10%;left:48%;width:65px;height:20px}.sky-sun,.sky-moon,.pixel-cloud{opacity:0;transition:opacity 5s}[data-sky=day] .sky-sun,[data-sky=day] .pixel-cloud{opacity:1}[data-sky=dawn] .sky-sun,[data-sky=dusk] .sky-sun{opacity:.7}[data-sky=night] .sky-moon{opacity:1}[data-sky=day]{color:#211a19}[data-sky=day] .copy,[data-sky=dawn] .copy{color:#211a19;text-shadow:none}[data-sky=day] .desktop-icon,[data-sky=day] .control{color:#211a19;text-shadow:none}[data-sky=day] .desktop-icon>span{text-shadow:none}[data-sky=day] .webshop-icon{background:#eee0c5dd}[data-sky=day] .webshop-icon>span,[data-sky=day] .webshop-icon small{color:#211a19}[data-sky=day] .controls button{color:#211a19;border-color:#211a1955}header,main,footer{z-index:2}.sky-picker{font:10px 'Courier New',monospace;color:inherit}.sky-picker select{font:10px 'Courier New',monospace;color:inherit;background:transparent;border:1px solid #8d7a6b;padding:4px;max-width:130px}.sky-picker option{background:#eee0c5;color:#211a19}@media(prefers-reduced-motion:reduce){body,.time-sky,.sky-stars,.sky-sun,.sky-moon,.pixel-cloud,.city-scene:after{transition:none}}

[data-sky-preview=true],[data-sky-preview=true] .time-sky,[data-sky-preview=true] .sky-stars,[data-sky-preview=true] .sky-sun,[data-sky-preview=true] .sky-moon,[data-sky-preview=true] .pixel-cloud{transition:none}[data-sky=day] footer{color:#211a19;text-shadow:none}

/* Native pixel bridge avoids the raster cutout's soft sky edges. */
.city-art{clip-path:inset(50% 0 0 0)}.bridge-art{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}.city-scene:after{clip-path:inset(50% 0 0 0)}.bridge-train{opacity:1}.bridge-train.passing img{animation:train-rumble .28s steps(2,end) infinite}@keyframes train-rumble{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}@media(prefers-reduced-motion:reduce){.bridge-train.passing img{animation:none}}

@media(max-width:600px){.controls{flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%;padding:0 12px}.controls button.control{min-height:44px;padding:10px}.sky-picker{display:flex;align-items:center;gap:8px}.sky-picker select{min-height:44px}.tag{min-height:44px;min-width:60px}.entry-icons{margin-top:12px}}

/* The train runs behind the bridge towers, cables and deck. */
.bridge-art{z-index:2}.bridge-train{z-index:1}.sidewalk-people{z-index:3}.fruitstand{z-index:4}