.city-main{--city-gap:24px;width:min(1600px,calc(100% - 64px));margin:0 auto;padding:calc(var(--public-shell-header-h,56px) + var(--city-gap)) 0 var(--city-gap)}.city-viewport{isolation:isolate;position:relative;width:100%;height:calc(100svh - var(--public-shell-header-h,56px) - 2 * var(--city-gap));min-height:360px;overflow:hidden;contain:layout paint;background:#14282e;color:#f0f7f3;color-scheme:dark;border:1px solid var(--line, #ffffff24)}.city-viewport [hidden]{display:none!important}.city-viewport button,.city-viewport select{font:inherit;font-size:13px;color:inherit;min-height:44px;border:1px solid #dbece53b;background:#152923e8;border-radius:4px;padding:8px 12px;cursor:pointer;touch-action:manipulation}.city-viewport button:hover{background:#2a4137}.city-viewport :is(button,select,canvas):focus-visible{outline:2px solid #d6ff73;outline-offset:-3px}.city-viewport #world,.city-viewport #city-poster{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}.city-viewport #world{touch-action:pan-y;opacity:0}.city-viewport.is-ready #world{opacity:1}.city-viewport.is-ready #city-poster{display:none}.city-viewport #toolbar{position:absolute;inset:16px 18px auto;display:flex;justify-content:flex-end;align-items:center;gap:12px}.city-settings{display:flex;gap:6px}.city-entry{position:absolute;left:24px;bottom:66px;width:365px;max-width:calc(100% - 48px);max-height:calc(100% - 145px);overflow:auto;overscroll-behavior:contain;background:#10251ef2;border:1px solid #d6ff7342;padding:24px}.city-entry h1{font-size:26px;font-weight:500;margin:0 0 12px}.city-entry #loading{color:#d1dfd6;font-size:13px;line-height:1.8;margin:0 0 16px}.city-entry #enter{width:100%;display:flex;justify-content:space-between;background:#d6ff73;color:#142410;font-weight:600}.city-entry #enter:disabled{opacity:.6;cursor:wait}.city-entry #hint{font-size:12px;line-height:1.9;color:#afc3b7;margin:18px 0 0}.city-entry #progress{height:2px;background:#c3ecd122;margin-bottom:16px}.city-entry #progress span{display:block;width:0;height:100%;background:#d6ff73}.city-viewport #city-hud{position:absolute;inset:auto 18px 12px;display:flex;align-items:center;gap:12px;font:11px/1.5 var(--font-mono,monospace);text-shadow:0 1px 4px #000}.city-viewport #fps{margin-left:auto}.city-viewport #crosshair{display:none;position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#fff;border-radius:50%;box-shadow:0 0 0 1px #16302388;pointer-events:none}.city-viewport.walking #crosshair{display:block}.city-viewport.walking :is(.city-entry,#toolbar){display:none}.city-viewport #mobile-controls{display:none;touch-action:none}.city-viewport #touch-pause{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;font-size:20px;line-height:1}.city-viewport.walking[data-input="touch"] #mobile-controls{display:block}.city-viewport #joystick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:80px;width:112px;height:112px;border:1px solid #fff8;border-radius:50%;background:#122c2560;touch-action:none}.city-viewport #joystick span{position:absolute;left:34px;top:34px;width:42px;height:42px;border:1px solid #e4ffee99;background:#d7f7e459;border-radius:50%;pointer-events:none}.city-touch-actions{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:80px;display:grid;grid-template-columns:52px 52px;gap:10px}.city-touch-actions button{min-height:50px;touch-action:none;background:#132f28b0;padding:6px}.city-touch-actions #touch-mode{grid-column:span 2;font-size:12px}.city-viewport #sprint{position:absolute;left:54px;bottom:205px;touch-action:none;background:#132f28b0}.city-viewport[data-flight="false"] :is(#up,#down){display:none}.city-viewport[data-flight="true"] #jump{display:none}.city-viewport[data-flight="false"] #jump{grid-column:span 2}.city-viewport #error{position:absolute;inset:80px 24px auto;background:#352720f5;color:#f8e7d4;padding:20px;border:1px solid #e7b278;line-height:1.8;font-size:14px}.city-viewport:fullscreen,.city-viewport.is-expanded{border:0;width:100%;height:100dvh;max-height:none}.city-viewport.is-expanded{position:fixed;inset:0;z-index:10000}.city-expanded{overflow:hidden}.city-viewport:fullscreen #city-hud,.city-viewport.is-expanded #city-hud{bottom:max(12px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
html[data-theme=light] .city-viewport :is(button,select){color:#20373d;background:#f4f0e5ed;border-color:#33495366}html[data-theme=light] .city-entry{background:#f5f0e7f5;color:#1e3038;border-color:#52656c66}html[data-theme=light] .city-entry :is(#hint,#loading){color:#445763}html[data-theme=light] .city-entry #enter{background:#266a81;color:#fff}html[data-theme=light] .city-viewport #city-hud{color:#fff}
@media(max-width:900px){.city-main{--city-gap:16px;width:calc(100% - 32px)}}
@media(max-width:560px){.city-main{--city-gap:12px;width:calc(100% - 24px)}.city-viewport #toolbar{inset:10px 10px auto;display:block}.city-settings{gap:4px}.city-settings select{padding:5px 6px;min-width:0;flex:1;font-size:12px}.city-entry{left:16px;bottom:68px;max-width:calc(100% - 32px);padding:20px}.city-viewport #city-hud{inset:auto 10px 10px;gap:8px}.city-viewport #fps{display:none}.city-viewport #fullscreen{margin-left:auto}.city-viewport #mode{font-family:inherit;font-size:12px}.city-viewport #joystick{left:18px}.city-viewport #sprint{left:48px}.city-touch-actions{right:16px}}
@media(max-height:540px) and (orientation:landscape){.city-main{--city-gap:8px}.city-viewport{min-height:280px}.city-viewport:fullscreen,.city-viewport.is-expanded{min-height:0}.city-entry{left:18px;bottom:62px;padding:16px;width:420px;max-height:calc(100% - 128px)}.city-entry h1{font-size:20px;margin-bottom:8px}.city-entry #hint{margin-top:10px}.city-viewport #joystick{bottom:65px;width:100px;height:100px}.city-viewport #joystick span{left:28px;top:28px}.city-viewport #sprint{bottom:176px;left:48px}.city-touch-actions{bottom:65px;gap:6px}}
@media(prefers-reduced-motion:reduce){.city-viewport *{transition:none!important}}

.city-viewport.walking #world{touch-action:none}

@media(max-width:560px){.city-settings{display:grid;grid-template-columns:1fr 1fr}.city-entry{max-height:calc(100% - 190px)}}