.city-canvas{border:var(--px) solid var(--c-border-strong);border-radius:var(--radius);width:100%;height:clamp(460px,68vh,780px);box-shadow:var(--shadow-panel);touch-action:none;cursor:grab;isolation:isolate;background:#080612;position:relative;overflow:hidden}.city-canvas:active{cursor:grabbing}.city-canvas canvas{width:100%;height:100%;display:block}.city-canvas__hint{z-index:2;pointer-events:none;font-family:var(--font-pixel);color:var(--c-text-dim);border-radius:var(--radius-pill);border:1px solid var(--c-border);background:#02020c99;background:lab(.813072% 1.0451 -3.76478/.6);margin:0;padding:4px 10px;font-size:11px;position:absolute;bottom:10px;right:12px}.city-tip{z-index:3;pointer-events:none;border:1px solid color-mix(in oklab, var(--c-cyan) 55%, transparent);border-radius:var(--radius);max-width:220px;box-shadow:var(--shadow-bubble);color:var(--c-text);background:#040411f2;background:lab(1.44105% 1.34648 -5.12162/.95);flex-direction:column;gap:2px;padding:7px 10px;font-size:12px;line-height:1.3;display:flex;position:absolute;transform:translate(-50%,-100%)}.city-tip b{color:color-mix(in oklab, var(--c-cyan) 60%, white);font-size:12px}.city-tip span{-webkit-line-clamp:2;color:var(--c-text-dim);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.city-tip em{color:var(--state-live);font-style:normal}.city-legend{z-index:3;pointer-events:none;font-family:var(--font-pixel);gap:6px;display:flex;position:absolute;top:12px;left:12px}.city-legend__item{letter-spacing:.02em;color:var(--c-text);border:1px solid var(--c-border);border-radius:var(--radius-pill);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#03030ed1;background:lab(1.09777% 1.19141 -4.41697/.82);align-items:center;gap:5px;padding:3px 9px;font-size:11px;font-weight:700;display:inline-flex}.city-legend__item i{border-radius:50%;width:7px;height:7px;box-shadow:0 0 6px}.worldview{border:var(--px) solid var(--c-border-strong);border-radius:var(--radius);width:100%;height:clamp(440px,66vh,760px);box-shadow:var(--shadow-panel);cursor:grab;touch-action:none;isolation:isolate;--walk:2.6s;background:radial-gradient(130% 130% at 50% 32%,#0a071f,#000106);background:radial-gradient(130% 130% at 50% 32%,lab(2.67466% 4.77843 -13.6933),lab(.262108% .505261 -2.1946));position:relative;overflow:hidden}.worldview:active{cursor:grabbing}.worldview:focus-visible{outline:3px solid var(--c-accent);outline-offset:-3px}.world{will-change:transform;position:absolute;top:0;left:0}.world__ground{background-color:#010105;background-color:lab(.269602% .479892 -1.63794);image-rendering:pixelated;filter:brightness(.82)saturate(.88);background-color:oklch(7% .02 275);background-image:radial-gradient(135% 110% at 50% 42%,#0000 52%,#000001b3 100%),linear-gradient(#01010552,#01010552),url(/map/cityfull.png);background-image:radial-gradient(135% 110% at 50% 42%,#0000 52%,lab(.0501633% .0847206 -.334239/.7) 100%),linear-gradient(lab(.269602% .479892 -1.63794/.32),lab(.269602% .479892 -1.63794/.32)),url(/map/cityfull.png);background-repeat:no-repeat;background-size:100% 100%,100% 100%,100% 100%;position:absolute;inset:0}.zone__plaza{pointer-events:none;z-index:0;background:radial-gradient(58% 54% at 50% 52%,#000103f0 0%,#000103e6 42%,#0000 78%);background:radial-gradient(58% 54% at 50% 52%,lab(.173697% .229642 -.957119/.94) 0%,lab(.173697% .229642 -.957119/.9) 42%,#0000 78%);position:absolute;inset:0}.zone{position:absolute}.zone__label{border-radius:var(--radius-pill);border:1px solid color-mix(in oklab, var(--accent) 75%, transparent);font-family:var(--font-pixel);color:color-mix(in oklab, var(--accent) 45%, #d0f7f9);text-shadow:0 0 7px color-mix(in oklab, var(--accent) 70%, transparent);box-shadow:0 0 11px color-mix(in oklab, var(--accent) 28%, transparent);white-space:nowrap;z-index:4;background:#03020cbd;background:lab(.808128% 1.20418 -3.65264/.74);align-items:center;gap:8px;padding:5px 11px;font-size:15px;display:inline-flex;position:absolute;top:8px;left:50%;transform:translate(-50%)}@supports (color:lab(0% 0 0)){.zone__label{color:color-mix(in oklab, var(--accent) 45%, lab(94.5964% -12.6377 -5.27374))}}.zone__emoji{font-size:18px}.zone__count{color:var(--c-text);background:color-mix(in oklab, var(--accent) 65%, #161616);border-radius:var(--radius-pill);padding:1px 8px;font-size:12px}@supports (color:lab(0% 0 0)){.zone__count{background:color-mix(in oklab, var(--accent) 65%, lab(7.22637% -.0000149012 0))}}.zone__landmark{pointer-events:none;width:38%;max-width:158px;height:auto;filter:drop-shadow(0 8px 11px #000000ad) drop-shadow(0 0 16px color-mix(in oklab, var(--accent) 55%, transparent));z-index:3;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}@supports (color:lab(0% 0 0)){.zone__landmark{filter:drop-shadow(0 8px 11px lab(0% 0 0/.68)) drop-shadow(0 0 16px color-mix(in oklab, var(--accent) 55%, transparent))}}.zone--plaza .zone__landmark{width:46%;max-width:188px}.zone--gate .zone__landmark{width:44%;max-width:150px}.zone--plaza:after{content:"";pointer-events:none;background:radial-gradient(#2fb5d852,#0000 72%);background:radial-gradient(lab(68.1219% -27.5397 -28.3166/.32),#0000 72%);border-radius:50%;width:150px;height:60px;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)}.wchar{transition:left var(--walk) ease-in-out, top var(--walk) ease-in-out;z-index:5;cursor:default;flex-direction:column;align-items:center;width:64px;display:flex;position:absolute;transform:translate(-50%,-50%)}.wchar[data-state=live],.wchar[data-state=away]{z-index:8;cursor:pointer}.wchar:hover{z-index:20}.wchar__char .member-sprite{transform-origin:50% 82%;transform:scale(1.5)}.wchar__char{width:42px;animation:2.4s ease-in-out infinite bob;animation-delay:var(--bob-delay);filter:drop-shadow(0 2px #00000047);filter:drop-shadow(0 2px lab(0% 0 0/.28));position:relative}.wchar[data-state=live] .wchar__char{filter:drop-shadow(0 0 6px var(--state-live-glow)) drop-shadow(0 2px 0 #00000047)}@supports (color:lab(0% 0 0)){.wchar[data-state=live] .wchar__char{filter:drop-shadow(0 0 6px var(--state-live-glow)) drop-shadow(0 2px 0 lab(0% 0 0/.28))}}.wchar[data-state=live]:active .wchar__char,.wchar[data-state=away]:active .wchar__char{transform:scale(.92)}.wchar__zzz{font-size:13px;animation:3s ease-in-out infinite float-up;position:absolute;top:-10px;right:-8px}.wchar__base{width:38px;height:13px;animation:2.4s ease-in-out infinite base-pulse;animation-delay:var(--bob-delay);background:radial-gradient(#0000006b,#0000 72%);background:radial-gradient(lab(0% 0 0/.42),#0000 72%);border-radius:50%;margin-top:-5px}.wchar[data-state=live] .wchar__base{box-shadow:0 0 14px var(--state-live-glow);background:radial-gradient(#59de658c,#00000052 72%);background:radial-gradient(lab(79.1989% -56.1797 47.1817/.55),lab(0% 0 0/.32) 72%)}.wchar[data-state=away] .wchar__base{box-shadow:0 0 12px var(--state-away-glow);background:radial-gradient(#ffb33380,#00000052 72%);background:radial-gradient(lab(78.9668% 21.4103 72.2375/.5),lab(0% 0 0/.32) 72%)}.wchar[data-state=offline]{opacity:.72}.wchar[data-state=offline] .wchar__char{filter:grayscale(.7)brightness(.78);animation:none}.wchar[data-state=offline] .wchar__base{background:radial-gradient(#776a9080,#0000 75%);background:radial-gradient(lab(47.0577% 11.3677 -19.063/.5),#0000 75%);width:44px;height:16px;animation:none}.wchar__name{pointer-events:none;font-family:var(--font-pixel);color:var(--c-text);border-radius:var(--radius-sm);border:1px solid var(--c-border);white-space:nowrap;background:#0b0c1adb;background:lab(3.50838% 2.05448 -8.45253/.86);margin-top:3px;padding:1px 7px;font-size:11px}.wchip{pointer-events:none;font-family:var(--font-pixel);border-radius:var(--radius-pill);border:1px solid var(--c-border);white-space:nowrap;background:#070815eb;background:lab(2.32504% 1.68294 -6.68826/.92);align-items:center;gap:4px;margin-top:3px;padding:2px 7px;font-size:10px;line-height:1;display:inline-flex}.wchip__dot{border-radius:50%;width:6px;height:6px}.wchip--live{color:var(--state-live);border-color:#3b723e99;border-color:lab(43.224% -28.0264 22.9933/.6)}.wchip--live .wchip__dot{background:var(--state-live);box-shadow:0 0 5px var(--state-live-glow);animation:1.4s steps(2,end) infinite blink}.wchip--away{color:var(--state-away);border-color:#93682399;border-color:lab(47.7219% 13.0865 43.8762/.6)}.wchip--away .wchip__dot{background:var(--state-away)}.wbubble{background:var(--c-surface-raised);border:2px solid var(--c-border-strong);border-radius:var(--radius);width:184px;box-shadow:var(--shadow-bubble);opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease-out-expo);z-index:30;padding:7px 9px;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)}.wchar:hover .wbubble{opacity:1;visibility:visible}.wbubble:after{content:"";border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--c-border-strong);position:absolute;top:100%;left:50%;transform:translate(-50%)}.wbubble__title{color:var(--c-text);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;line-height:1.3;display:-webkit-box;overflow:hidden}.wbubble__meta{color:var(--c-text-dim);flex-wrap:wrap;gap:2px 8px;margin-top:4px;font-size:11px;display:flex}.wbubble__viewers{color:var(--state-live)}.wbubble__with{color:var(--c-cyan)}.wbanner{border-radius:var(--radius);max-width:230px;box-shadow:var(--shadow-bubble);color:var(--c-text);white-space:nowrap;z-index:25;background:#002112f2;background:lab(10.1773% -16.2444 6.38532/.95);border:2px solid #439458b3;border:2px solid lab(55.1223% -36.1121 23.6764/.7);align-items:center;gap:6px;padding:5px 10px;font-size:12px;display:inline-flex;position:absolute;transform:translate(-50%,calc(-100% - 30px))}.wbanner__faces{letter-spacing:-1px;font-size:13px}.wbanner__title{text-overflow:ellipsis;max-width:130px;overflow:hidden}.wbanner__meta{font-family:var(--font-pixel);color:#9ceead;color:lab(87.6328% -35.8398 23.2112);align-items:center;gap:4px;font-size:11px;display:inline-flex}.wbanner__dot{background:var(--state-live);width:6px;height:6px;box-shadow:0 0 5px var(--state-live-glow);border-radius:50%}.worldview__vignette{z-index:40;pointer-events:none;background:radial-gradient(120% 100% at 50% 45%,#0000 60%,#01010880 100%);background:radial-gradient(120% 100% at 50% 45%,#0000 60%,lab(.397734% .778802 -2.61774/.5) 100%);position:absolute;inset:0}.worldview__hint{z-index:41;pointer-events:none;font-family:var(--font-pixel);color:var(--c-text-dim);border-radius:var(--radius-pill);border:1px solid var(--c-border);background:#070815b3;background:lab(2.32504% 1.68294 -6.68826/.7);padding:4px 10px;font-size:11px;position:absolute;bottom:10px;right:12px}@media (min-width:1280px){.city-canvas{height:clamp(520px,40vw,760px)}}
.city-stage{position:relative}.city-loader{z-index:30;border-radius:var(--radius);opacity:1;transition:opacity .6s var(--ease-out-expo);background:radial-gradient(125% 95% at 50% 8%,#2a1747 0%,#130b28 46%,#080612 100%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.city-loader[data-done=true]{opacity:0;pointer-events:none}.city-loader__stars{opacity:.6;background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 78% 16%,#ffd9ec 50%,#0000 51%),radial-gradient(1px 1px at 34% 60%,#cfe9ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 64% 30%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 88% 44%,#ffd9ec 50%,#0000 51%),radial-gradient(1px 1px at 20% 40%,#cfe9ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 50% 18%,#fff 50%,#0000 51%),radial-gradient(1px 1px at 6% 70%,#cfe9ff 50%,#0000 51%),radial-gradient(1.5px 1.5px at 94% 64%,#fff 50%,#0000 51%);animation:3.2s steps(2,jump-none) infinite alternate cl-twinkle;position:absolute;inset:0}.city-loader__skyline{opacity:.5;width:100%;height:clamp(70px,22%,150px);position:absolute;bottom:0;left:0;right:0}.city-loader__skyline rect{fill:#0b0818;stroke:var(--c-accent);stroke-width:.6px;paint-order:stroke}.city-loader__crt{pointer-events:none;mix-blend-mode:multiply;opacity:.5;background:repeating-linear-gradient(0deg,#0003 0 1px,#0000 1px 3px);position:absolute;inset:0}.city-loader__inner{z-index:2;align-items:center;gap:var(--space-4);text-align:center;flex-direction:column;width:min(440px,82%);display:flex;position:relative}.city-loader__eyebrow{font-family:var(--font-pixel);font-size:var(--text-sm);letter-spacing:.45em;color:var(--c-cyan);text-shadow:0 0 8px var(--c-cyan);margin:0;padding-left:.45em}.city-loader__title{font-family:var(--font-pixel);letter-spacing:.14em;color:#fff;text-shadow:0 0 6px var(--c-accent), 0 0 18px var(--c-accent-glow), 0 0 42px var(--c-accent-glow);animation:cl-pulse 2.4s var(--ease-out-expo) infinite alternate;margin:0;padding-left:.14em;font-size:clamp(2.6rem,9vw,4.2rem);line-height:.9}.city-loader__bar{width:100%;height:16px;margin-top:var(--space-2);border:var(--px) solid var(--c-border-strong);border-radius:var(--radius-pill);background:repeating-linear-gradient(90deg,#ffffff0d 0 7px,#0000 7px 12px),#140e22;position:relative;overflow:hidden;box-shadow:inset 0 1px 3px #00000080}.city-loader__fill{width:100%;box-shadow:0 0 14px var(--c-accent-glow);position:absolute;inset:0 auto 0 0;-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 8px,#0000 8px 10px);mask-image:repeating-linear-gradient(90deg,#000 0 8px,#0000 8px 10px)}.city-loader__fill:before{content:"";transform:scaleX(var(--p,.03));transform-origin:0;background:linear-gradient(90deg, var(--c-accent-soft), var(--c-accent) 55%, var(--c-cyan));transition:transform .24s var(--ease-out-expo);position:absolute;inset:0}.city-loader__scan{background:linear-gradient(90deg,#0000 35%,#ffffff8c 50%,#0000 65%);width:45%;animation:1.4s linear infinite cl-sweep;position:absolute;top:0;bottom:0;left:0;transform:translate(-100%)}.city-loader__status{width:100%;font-family:var(--font-pixel);font-size:var(--text-sm);justify-content:space-between;align-items:baseline;margin:0;display:flex}.city-loader__phase{color:var(--c-text-dim)}.city-loader__pct{color:var(--c-accent);text-shadow:0 0 10px var(--c-accent-glow);font-variant-numeric:tabular-nums;font-weight:700}@keyframes cl-sweep{0%{transform:translate(-100%)}to{transform:translate(320%)}}@keyframes cl-twinkle{0%{opacity:.35}to{opacity:.7}}@keyframes cl-pulse{0%{text-shadow:0 0 6px var(--c-accent), 0 0 14px var(--c-accent-glow)}to{text-shadow:0 0 10px var(--c-accent), 0 0 28px var(--c-accent-glow), 0 0 56px var(--c-accent-glow)}}@media (prefers-reduced-motion:reduce){.city-loader{transition:opacity .2s linear}.city-loader__stars,.city-loader__title{animation:none}.city-loader__scan{display:none}.city-loader__fill:before{transition:none}}