.city-stage{--sky-top:#86c8f7;--sky-mid:#bfd4e9;--sky-bottom:#809fbd;position:relative;isolation:isolate;overflow:hidden;height:clamp(460px,calc(100svh - var(--city-offset, 130px) - 72px),1080px);background:linear-gradient(180deg,var(--sky-top),var(--sky-mid) 55%,var(--sky-bottom));transition:background 1.2s ease;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;container-type:size}@media (min-width:768px){.city-stage{height:clamp(520px,calc(100svh - var(--city-offset, 150px)),1080px)}}.city-stage[data-zoomed]{touch-action:none}.city-stage[data-dragging]{cursor:grabbing}.city-world{position:absolute;left:50%;top:50%;width:min(100cqw,150cqh);aspect-ratio:3/2;translate:-50% -50%;transform-origin:0 0;transform:translate(var(--tx,0),var(--ty,0)) scale(var(--z,1));container-type:inline-size;will-change:transform}.city-world--top{z-index:4}.city-stage[data-flying] .city-world{transition:transform .95s cubic-bezier(.7,0,.2,1)}.city-stage[data-settle] .city-world{transition:transform .35s ease-out}.city-img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect;filter:saturate(calc(1 - var(--gloom, 0) * 1.1)) brightness(calc(1 - var(--gloom, 0) * .75));transition:filter 1s ease}.city-img--next{animation:city-fade-in 1.4s ease both}@keyframes city-fade-in{0%{opacity:0}}.city-hot{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.city-hot polygon{fill:transparent;stroke:transparent;stroke-width:5;stroke-linejoin:round;cursor:pointer;transition:fill .2s ease,stroke .2s ease}.city-hot polygon:hover,.city-hot polygon[data-active]{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.95);filter:drop-shadow(0 0 10px rgba(255,255,255,.85))}.city-pin{position:absolute;z-index:2;transform:translate(-50%,-100%) scale(var(--pin-scale,1));transform-origin:50% 100%;flex-direction:column;text-decoration:none;transition:filter .2s ease}.city-pin,.city-pin__plate{display:flex;align-items:center}.city-pin__plate{gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:#ffffff;color:#14171c;box-shadow:0 3px 0 rgba(10,30,60,.18),0 10px 22px -8px rgba(10,30,60,.55);white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}.city-pin__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;background:var(--district);color:var(--district-fg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35);overflow:hidden}.city-pin__icon img{width:34px;height:34px;object-fit:contain}.city-pin__text{display:flex;flex-direction:column;line-height:1.05}.city-pin__name{font-family:var(--font-game),var(--font-sans);font-size:17px;font-weight:700}.city-pin__role{font-size:11px;font-weight:700;color:#5c636b}.city-pin__live{margin-left:4px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;color:var(--district-fg);background:var(--district)}.city-pin__stem{width:14px;height:14px;margin-top:-7px;background:#ffffff;transform:rotate(45deg);border-radius:2px;box-shadow:3px 3px 6px -2px rgba(10,30,60,.35)}.city-pin__dot{width:12px;height:12px;margin-top:4px;border-radius:999px;background:var(--district);border:2px solid #ffffff;box-shadow:0 0 0 4px color-mix(in srgb,var(--district) 35%,transparent);animation:city-ping 2.2s ease-out infinite}@keyframes city-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--district) 55%,transparent)}to{box-shadow:0 0 0 14px transparent}}.city-pin:focus-visible .city-pin__plate,.city-pin:hover .city-pin__plate,.city-pin[data-active] .city-pin__plate{transform:translateY(-4px);box-shadow:0 6px 0 rgba(10,30,60,.16),0 16px 28px -8px rgba(10,30,60,.6)}.city-pin:focus-visible{outline:none}@media (max-width:767px){.city-pin__plate{gap:6px;padding:3px 10px 3px 3px}.city-pin__icon{width:28px;height:28px}.city-pin__icon img{width:26px;height:26px}.city-pin__name{font-size:13px}.city-pin__role{display:none}.city-pin__live{padding:2px 6px;font-size:10px}.city-pin__stem{width:10px;height:10px;margin-top:-5px}}.city-pin:focus-visible .city-pin__plate{outline:3px solid var(--district);outline-offset:3px}.city-billboard{position:absolute;display:flex;align-items:center;justify-content:center;padding:3px;overflow:hidden;font-size:.42cqw;line-height:1.25;font-weight:700;color:#ffffff;text-align:center;background:linear-gradient(180deg,#13223d,#0a1426);pointer-events:none}.city-billboard__brand,.city-billboard__news{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .4s ease}.city-billboard__brand{background:radial-gradient(circle at 50% 42%,#ffffff 0 55%,#efece6);box-shadow:inset 0 0 0 .12cqw rgba(0,0,0,.35)}.city-billboard__brand img{width:90%;height:auto}.city-billboard__news{padding:3px;opacity:0}.city-stage[data-near] .city-billboard__brand{opacity:0}.city-stage[data-near] .city-billboard__news{opacity:.94}.city-stage[data-phase=night] .city-billboard{box-shadow:0 0 1.4cqw rgba(255,244,220,.55)}.city-hud{position:absolute;inset:0;z-index:5;pointer-events:none}.city-hud>*{pointer-events:auto}.city-control{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#ffffff;color:#14171c;box-shadow:0 4px 0 rgba(10,30,60,.2),0 10px 20px -10px rgba(10,30,60,.6);transition:transform .12s ease,box-shadow .12s ease}@media (max-width:767px){.city-control{width:44px;height:44px;border-radius:12px}}.city-control:hover{transform:translateY(-1px)}.city-control:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(10,30,60,.2)}.town-headline-swap{animation:town-headline-in .5s ease both}.city-scroll-cue{animation:city-bounce 1.8s ease-in-out infinite}@keyframes city-bounce{50%{transform:translateY(5px)}}.city-veil{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 0,rgba(255,255,255,.95) 70%);opacity:0;transition:opacity .35s ease .6s}.city-stage[data-flying] .city-veil{opacity:1}.city-weather{inset:0;z-index:3;pointer-events:none;overflow:hidden;--town-rain-ink:rgba(232,240,255,0.5)}.city-weather,.city-weather>*{position:absolute}.city-gloom{inset:0;background:rgba(38,50,76,calc(var(--gloom, 0) * .9));mix-blend-mode:multiply}.city-tint[data-tint=cold]{inset:0;background:linear-gradient(180deg,rgba(150,190,255,.18),rgba(210,230,255,.34));mix-blend-mode:soft-light}.city-tint[data-tint=hot]{inset:0;background:radial-gradient(ellipse at 50% 0,rgba(255,170,60,.35),rgba(255,140,40,.12) 60%,transparent);mix-blend-mode:soft-light}.city-mist{left:-10%;right:-10%;bottom:-5%;height:45%;background:linear-gradient(0deg,rgba(235,244,255,.55),transparent);filter:blur(8px)}.city-cloud-track{left:0;width:100%;height:0;transform:translateX(var(--x0,0));animation:town-drift var(--dur,140s) linear var(--delay,0s) infinite}.city-cloud{aspect-ratio:2.2;transform:translateX(-100%);opacity:var(--o,.9);background:radial-gradient(34% 58% at 30% 62%,var(--cloud,#ffffff) 0 52%,transparent 72%),radial-gradient(30% 62% at 54% 44%,var(--cloud,#ffffff) 0 52%,transparent 72%),radial-gradient(30% 50% at 76% 62%,var(--cloud,#ffffff) 0 52%,transparent 72%);filter:blur(5px)}.city-cloud,.city-cloud-shadow{position:absolute;left:0;top:0;width:var(--w,26vw)}.city-cloud-shadow{aspect-ratio:2.6;transform:translate(-80%,190%);background:radial-gradient(closest-side,rgba(15,25,45,.28),transparent);mix-blend-mode:multiply}[data-phase=night] .city-cloud-shadow{display:none}.city-hero{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:#bfd4e9}@media (min-width:640px){.city-hero{aspect-ratio:21/9}}@media (min-width:1024px){.city-hero{aspect-ratio:16/5;max-height:480px}}.city-hero__img{filter:saturate(calc(1 - var(--gloom, 0) * 1.1)) brightness(calc(1 - var(--gloom, 0) * .75))}.city-wind{width:22vw;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);opacity:0;animation:city-wind var(--dur,5s) linear var(--delay,0s) infinite}@keyframes city-wind{0%{opacity:0;transform:translate(30vw,-8vh) rotate(-12deg)}15%,70%{opacity:.8}to{opacity:0;transform:translate(-40vw,14vh) rotate(-12deg)}}.city-stage[data-paused] *,.city-stage[data-paused] :after,.city-stage[data-paused] :before{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){.city-stage *,.city-stage :after,.city-stage :before{animation:none!important}.city-world[data-flying],.city-world[data-settle]{transition:none}.city-wind{opacity:.6}}.citizen-bob{animation:citizen-bob 2.4s ease-in-out infinite}@keyframes citizen-bob{50%{transform:translateY(-4px)}}@media (prefers-reduced-motion:reduce){.citizen-bob{animation:none}}