.city{aspect-ratio:16/10;border:var(--px) solid var(--c-border-strong);border-radius:var(--radius);width:100%;box-shadow:var(--shadow-panel);background:linear-gradient(var(--c-sky-top), var(--c-sky-bottom));isolation:isolate;position:relative;overflow:hidden;container-type:inline-size}.city__sky{background:radial-gradient(38% 26% at 84% 12%,#f3ae584d,#0000 70%),radial-gradient(64% 44% at 18% 8%,#7fafe229,#0000 72%),radial-gradient(150% 72% at 50% 102%,#783a0052,#0000 60%);background:radial-gradient(38% 26% at 84% 12%,lab(76.5943% 19.8977 53.4593/.3),#0000 70%),radial-gradient(64% 44% at 18% 8%,lab(69.6052% -6.73747 -30.9505/.16),#0000 72%),radial-gradient(150% 72% at 50% 102%,lab(32.1083% 26.234 46.7769/.32),#0000 60%);position:absolute;inset:0}.backdrop{z-index:1;opacity:.78;filter:saturate(.85)brightness(.92);width:100%;height:60%;position:absolute;top:3%;left:0;right:0;-webkit-mask-image:linear-gradient(#000 0% 30%,#0000 70%);mask-image:linear-gradient(#000 0% 30%,#0000 70%)}.city__ground{z-index:2;background:linear-gradient(#22273f, var(--c-street));border-top:var(--px) solid #595884b3;position:absolute;inset:66% 0 0;box-shadow:inset 0 2px #857db94d;box-shadow:inset 0 2px lab(54.8698% 13.5854 -30.7492/.3)}@supports (color:lab(0% 0 0)){.city__ground{background:linear-gradient(lab(16.0589% 3.6059 -16.229), var(--c-street));border-top:var(--px) solid lab(38.9166% 8.89565 -24.5656/.7)}}.city__ground:before{content:"";background:radial-gradient(130% 95% at 50% 0,#a96b0047,#0000 72%);background:radial-gradient(130% 95% at 50% 0,lab(50.9739% 21.5737 61.4532/.28),#0000 72%);position:absolute;inset:0 0 46%}.city__ground:after{content:"";transform-origin:bottom;background:repeating-linear-gradient(90deg,#c1c1de29 0 1.6cqw,#0000 1.6cqw 4cqw);background:repeating-linear-gradient(90deg,lab(78.7531% 4.1205 -14.3974/.16) 0 1.6cqw,#0000 1.6cqw 4cqw);position:absolute;inset:18% 41% 6%;transform:perspective(22cqw)rotateX(46deg)}.lamp{z-index:3;background:#2c2d38;background:lab(18.629% 1.60295 -7.29785);width:.8cqw;height:20%;position:absolute;bottom:0;transform:translate(-50%)}.lamp:before{content:"";background:radial-gradient(circle, var(--window-on) 0%, #f8ca6540 45%, transparent 70%);border-radius:50%;width:3cqw;height:3cqw;position:absolute;top:-1.4cqw;left:50%;transform:translate(-50%);box-shadow:0 0 4cqw #f8ca6580;box-shadow:0 0 4cqw lab(83.9953% 8.65266 55.9522/.5)}@supports (color:lab(0% 0 0)){.lamp:before{background:radial-gradient(circle, var(--window-on) 0%, lab(83.9953% 8.65266 55.9522/.25) 45%, transparent 70%)}}.lamp:after{content:"";mix-blend-mode:screen;background:radial-gradient(#f8ca6552,#0000 70%);background:radial-gradient(lab(83.9953% 8.65266 55.9522/.32),#0000 70%);border-radius:50%;width:13cqw;height:4cqw;position:absolute;bottom:-1cqw;left:50%;transform:translate(-50%)}.city__fireflies{z-index:3;pointer-events:none;position:absolute;inset:0}.firefly{background:#bff18b;background:lab(89.8904% -28.9831 43.6315);border-radius:50%;width:1cqw;height:1cqw;animation:5s ease-in-out infinite firefly;position:absolute;box-shadow:0 0 2cqw #b4ec76cc;box-shadow:0 0 2cqw lab(87.7466% -32.7697 50.8665/.8)}.city__vignette{z-index:6;pointer-events:none;background:radial-gradient(120% 100% at 50% 38%,#0000 55%,#0101088c 100%);background:radial-gradient(120% 100% at 50% 38%,#0000 55%,lab(.397734% .778802 -2.61774/.55) 100%);position:absolute;inset:0}.city__gate{width:18%;z-index:var(--z-base);background:linear-gradient(90deg, transparent, var(--state-away-glow) 50%, #6a44006b), linear-gradient(90deg, transparent 36%, #dc932e29);border-left:2px dashed var(--state-away);position:absolute;top:5%;bottom:4%;right:0;overflow:hidden}@supports (color:lab(0% 0 0)){.city__gate{background:linear-gradient(90deg, transparent, var(--state-away-glow) 50%, lab(32.5691% 14.2899 50.4234/.42)), linear-gradient(90deg, transparent 36%, lab(67.2417% 22.388 60.9729/.16))}}.city__gate:before,.city__gate:after{content:"";background:linear-gradient(var(--state-away), #a76c12);width:1.4cqw;box-shadow:0 0 2cqw var(--state-away-glow);position:absolute;top:8%;bottom:6%}@supports (color:lab(0% 0 0)){.city__gate:before,.city__gate:after{background:linear-gradient(var(--state-away), lab(51.0228% 19.4982 53.8305))}}.city__gate:before{left:26%}.city__gate:after{right:22%}.gate__arch{background:var(--state-away);height:2.4cqw;box-shadow:0 0 2cqw var(--state-away-glow), 0 .6cqw 0 #00000040;position:absolute;top:8%;left:18%;right:14%}@supports (color:lab(0% 0 0)){.gate__arch{box-shadow:0 0 2cqw var(--state-away-glow), 0 .6cqw 0 lab(0% 0 0/.25)}}.gate__arch:before{content:"";background:#ff716b;background:lab(65.5311% 62.9738 37.1879);border-radius:50%;width:1.6cqw;height:1.6cqw;animation:1.4s steps(2,end) infinite blink;position:absolute;top:-2.4cqw;left:50%;transform:translate(-50%);box-shadow:0 0 2.4cqw #ff716bd9;box-shadow:0 0 2.4cqw lab(65.5311% 62.9738 37.1879/.85)}.gate__arch:after{content:"";background:var(--state-away);opacity:.8;height:1.4cqw;position:absolute;top:3.2cqw;left:-7%;right:-7%}.city__gate-label{text-align:center;font-family:var(--font-pixel);color:#ffd793;color:lab(88.5297% 8.57595 40.5639);text-shadow:0 1px #000000b3;text-shadow:0 1px lab(0% 0 0/.7);font-size:2.1cqw;position:absolute;top:15%;left:0;right:0}.group-halo{aspect-ratio:1;z-index:4;animation:halo-pulse 3.2s var(--ease-out-expo) infinite;pointer-events:none;background:radial-gradient(circle,#62c37a3d 0%,#62c37a0d 46%,#0000 70%);background:radial-gradient(circle,lab(71.6219% -42.0726 27.5213/.24) 0%,lab(71.6219% -42.0726 27.5213/.05) 46%,#0000 70%);border:2px dotted #7cdf8161;border:2px dotted lab(81.0824% -44.8341 36.7078/.38);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.group-halo:before{content:"";background:repeating-conic-gradient(#ff9e9629 0% 25%,#ded0ac1f 0% 50%) 0 0/3cqw 3cqw;background:repeating-conic-gradient(lab(75.5496% 40.4957 22.6041/.16) 0% 25%,lab(83.9766% .620544 19.6686/.12) 0% 50%) 0 0/3cqw 3cqw;border-radius:10%;width:52%;height:30%;position:absolute;bottom:16%;left:50%;transform:translate(-50%)perspective(40cqw)rotateX(60deg)}.group-halo:after{content:"";background:linear-gradient(#ffe47c, var(--state-away) 55%, #ff6450);width:2.2cqw;height:3cqw;box-shadow:0 0 3cqw var(--state-away-glow);border-radius:46% 46% 38% 38%;animation:.6s ease-in-out infinite flame-flicker;position:absolute;top:50%;left:50%;transform:translate(-50%,-55%)}@supports (color:lab(0% 0 0)){.group-halo:after{background:linear-gradient(lab(91.2582% .413507 54.9117), var(--state-away) 55%, lab(63.3267% 61.5741 45.4137))}}.sprite{transition:left var(--dur-walk) var(--ease-out-expo), top var(--dur-walk) var(--ease-out-expo);width:16cqw;z-index:var(--z-base);cursor:default;flex-direction:column;align-items:center;display:flex;position:absolute;transform:translate(-50%,-50%)}.sprite[data-state=live],.sprite[data-state=away]{z-index:var(--z-sprite);cursor:pointer}.sprite:hover,.sprite:focus-within{z-index:50}.sprite__char{width:10cqw;animation:2.4s ease-in-out infinite bob;animation-delay:var(--bob-delay);transition:transform var(--dur-fast) var(--ease-out-expo);filter:drop-shadow(0 .5cqw #00000040);filter:drop-shadow(0 .5cqw lab(0% 0 0/.25));place-items:center;display:grid;position:relative}.sprite[data-state=live]:active .sprite__char,.sprite[data-state=away]:active .sprite__char{transform:scale(.92)}.sprite__base{width:9cqw;height:3cqw;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:-1cqw}.sprite[data-state=live] .sprite__base{box-shadow:0 0 3cqw var(--state-live-glow);background:radial-gradient(#59de6599 0%,#00000052 72%);background:radial-gradient(lab(79.1989% -56.1797 47.1817/.6) 0%,lab(0% 0 0/.32) 72%)}.sprite[data-state=live] .avatar{filter:drop-shadow(0 0 1.2cqw var(--state-live-glow))}.sprite[data-state=away] .sprite__base{box-shadow:0 0 2.6cqw var(--state-away-glow);background:radial-gradient(#ffb3338c 0%,#00000052 72%);background:radial-gradient(lab(78.9668% 21.4103 72.2375/.55) 0%,lab(0% 0 0/.32) 72%)}.sprite__nametag{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:#0f101fd9;background:lab(5.03444% 2.4611 -9.88059/.85);margin-top:.4cqw;padding:.2cqw 1cqw;font-size:2.4cqw}.sprite[data-state=offline]{opacity:.5;transform:translate(-50%,-50%)scale(.78)}.sprite[data-state=offline] .sprite__char{filter:grayscale(.85)brightness(.65);animation:none}.sprite[data-state=offline] .sprite__base{animation:none}.sprite__zzz{font-family:var(--font-pixel);color:var(--c-text-faint);font-size:2.4cqw;animation:2.6s ease-in-out infinite float-up;position:absolute;top:-1.6cqw;right:-1cqw}.chip{pointer-events:none;font-family:var(--font-pixel);border-radius:var(--radius-pill);border:1px solid var(--c-border);white-space:nowrap;background:#0b0c1aeb;background:lab(3.50838% 2.05448 -8.45253/.92);align-items:center;gap:.6cqw;margin-top:.4cqw;padding:.4cqw 1cqw;font-size:2cqw;line-height:1;display:inline-flex}.chip__dot{border-radius:50%;width:1.4cqw;height:1.4cqw}.chip--live{color:var(--state-live);border-color:#3b723e99;border-color:lab(43.224% -28.0264 22.9933/.6)}.chip--live .chip__dot{background:var(--state-live);box-shadow:0 0 6px var(--state-live-glow);animation:1.4s steps(2,end) infinite blink}.chip--away{color:var(--state-away);border-color:#93682399;border-color:lab(47.7219% 13.0865 43.8762/.6)}.chip--away .chip__dot{background:var(--state-away)}.bubble{transform:translateX(-50%) translateX(var(--bub-shift,0cqw));background:var(--c-surface-raised);border:2px solid var(--c-border-strong);border-radius:var(--radius);width:26cqw;box-shadow:var(--shadow-bubble);z-index:35;opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease-out-expo);padding:1cqw 1.2cqw;position:absolute;bottom:calc(100% - 2cqw);left:50%}.sprite:hover .bubble,.sprite:focus-within .bubble{opacity:1;visibility:visible}.bubble--below{top:calc(100% - 2cqw);bottom:auto}.bubble:after{content:"";transform:translateX(-50%) translateX(calc(-1 * var(--bub-shift,0cqw)));border-left:1.2cqw solid #0000;border-right:1.2cqw solid #0000;border-top:1.2cqw solid var(--c-border-strong);position:absolute;top:100%;left:50%}.bubble--below:after{border-top:none;border-bottom:1.2cqw solid var(--c-border-strong);top:auto;bottom:100%}.bubble__title{font-family:var(--font-body);color:var(--c-text);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:2.1cqw;line-height:1.3;display:-webkit-box;overflow:hidden}.bubble__meta{color:var(--c-text-dim);flex-wrap:wrap;gap:.4cqw 1cqw;margin-top:.6cqw;font-size:1.8cqw;display:flex}.bubble__viewers{color:var(--state-live)}.bubble__with{color:var(--c-cyan)}.banner{transform:translate(-50%, calc(-100% - 2cqw)) translateX(var(--bub-shift,0cqw));text-align:center;border-radius:var(--radius);width:32cqw;box-shadow:var(--shadow-bubble);z-index:var(--z-overlay);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);padding:.7cqw 1.2cqw;position:absolute}.banner--below{transform:translate(-50%, 2cqw) translateX(var(--bub-shift,0cqw))}.banner__title{font-family:var(--font-body);color:var(--c-text);white-space:nowrap;text-overflow:ellipsis;font-size:2cqw;line-height:1.2;overflow:hidden}.banner__meta{font-family:var(--font-pixel);color:#9ceead;color:lab(87.6328% -35.8398 23.2112);white-space:nowrap;justify-content:center;align-items:center;gap:.6cqw;margin-top:.3cqw;font-size:1.7cqw;display:inline-flex}.banner__faces{letter-spacing:-.1em;font-size:2cqw}.banner__dot{background:var(--state-live);width:1.3cqw;height:1.3cqw;box-shadow:0 0 6px var(--state-live-glow);border-radius:50%}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-1cqw)}}@keyframes base-pulse{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.85;transform:scaleX(.82)}}@keyframes twinkle{0%,to{opacity:.85}50%{opacity:.45}}@keyframes float-up{0%{opacity:0;transform:translateY(0)}40%{opacity:1}to{opacity:0;transform:translateY(-2cqw)}}@keyframes halo-pulse{0%,to{opacity:.9;transform:translate(-50%,-50%)scale(1)}50%{opacity:.7;transform:translate(-50%,-50%)scale(1.04)}}@keyframes firefly{0%,to{opacity:.15;transform:translate(0)}25%{opacity:1}50%{opacity:.7;transform:translate(2cqw,-2.5cqw)}75%{opacity:1}}@keyframes flame-flicker{0%,to{opacity:.92;transform:translate(-50%,-55%)scaleY(1)rotate(-2deg)}50%{opacity:1;transform:translate(-50%,-58%)scaleY(1.18)rotate(2deg)}}.win-flicker{animation:3s steps(2,end) infinite blink}.star-twinkle{animation:3.2s ease-in-out infinite twinkle}@container (max-width:560px){.city{aspect-ratio:2/3}.sprite{width:19cqw}.sprite__char{width:11.5cqw}.sprite__base{width:9.5cqw;height:3cqw}.sprite__nametag{font-size:2.8cqw}.chip{font-size:2.4cqw}.chip__dot{width:1.8cqw;height:1.8cqw}.city__gate-label{font-size:2.6cqw}.bubble{width:42cqw}.bubble__title{font-size:3.2cqw}.bubble__meta{font-size:2.8cqw}.banner{width:50cqw;padding:.6cqw 1cqw}.banner__title{font-size:2.9cqw}.banner__meta{font-size:2.3cqw}.banner__faces{font-size:2.6cqw}}