@font-face{font-family:"Press Start 2P";src:url(/fonts/PressStart2P.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Silkscreen;src:url(/fonts/Silkscreen.woff2) format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:dark;--stone-outline: #05070b;--stone-shadow: #1b212b;--stone-edge: #39424f;--stone-face: #262d38;--stone-face-hi: #313a47;--stone-hi: #f7f1e3;--ink: #f7f1e3;--panel-fill: #171c24;--panel-fill-2: #101419;--text: #e4e7ee;--muted: #97a0af;--danger: #e05c58;--brand-peach: #f2b544;--brand-ink: #1a1204;--sky-top: #1b2430;--sky-bottom: #0d1219;--font-head: "Press Start 2P", ui-monospace, SFMono-Regular, Menlo, monospace;--font-body: "Silkscreen", ui-monospace, SFMono-Regular, Menlo, monospace}
html,body{margin:0;height:100%;background:linear-gradient(#161c24,#0b0e13);color:var(--text);font-family:var(--font-body);image-rendering:pixelated}
.city-enter,.city-mic,.city-edit-char,.city-travel-toggle,.city-travel-room,.city-x-btn,.city-zoom-btn,.city-friends-toggle,.city-friend-mini,.city-travel-create,.city-template,.city-audio-toggle,.city-hud-menu,.city-wallet-wrong{font-family:var(--font-head);font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.02em;color:var(--ink);background-color:var(--stone-face);background-image:url(/ui/stone-speckle.png);background-repeat:repeat;image-rendering:pixelated;border:2px solid var(--stone-edge);border-top-color:var(--stone-hi);border-left-color:var(--stone-hi);border-right-color:var(--stone-shadow);border-bottom-color:var(--stone-shadow);border-radius:4px;padding:9px 14px;cursor:pointer;box-shadow:0 0 0 2px var(--stone-outline),0 4px 0 0 var(--stone-shadow),0 4px 0 2px var(--stone-outline);transition:transform 70ms ease-out,background-color 90ms ease-out}
.city-enter:hover:not(:disabled),.city-mic:hover:not(:disabled),.city-edit-char:hover,.city-travel-toggle:hover,.city-travel-room:hover:not(:disabled),.city-x-btn:hover,.city-zoom-btn:hover,.city-friends-toggle:hover,.city-friend-mini:hover:not(:disabled),.city-travel-create:hover,.city-template:hover,.city-audio-toggle:hover,.city-hud-menu:hover,.city-wallet-wrong{color:var(--brand-ink, #2b1a0d);background-color:var(--brand-peach)}
.city-enter:active:not(:disabled),.city-mic:active:not(:disabled),.city-edit-char:active,.city-travel-toggle:active,.city-travel-room:active:not(:disabled),.city-x-btn:active,.city-zoom-btn:active,.city-friends-toggle:active,.city-friend-mini:active:not(:disabled),.city-travel-create:active,.city-template:active,.city-template.selected,.city-audio-toggle:active,.city-hud-menu:active,.city-hud-menu.open,.city-wallet-wrong:active,.city-mic.live,.city-travel-room.current{border-top-color:var(--stone-shadow);border-left-color:var(--stone-shadow);border-right-color:var(--stone-hi);border-bottom-color:var(--stone-hi);background-color:var(--stone-edge);box-shadow:0 0 0 2px var(--stone-outline);transform:translateY(3px) scale(.96)}
.city-enter:disabled,.city-mic:disabled,.city-travel-room:disabled,.city-friend-mini:disabled,.city-wallet-wrong:disabled{filter:grayscale(.7) brightness(.82);box-shadow:0 0 0 2px var(--stone-outline);cursor:default}
@keyframes city-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes city-panel-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.city-start{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));background:linear-gradient(var(--sky-top),var(--sky-bottom))}
.city-start-clouds{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}
.city-cloud{position:absolute;background:radial-gradient(closest-side,#ffffffeb,#fff0);border-radius:50%;will-change:transform}
.city-cloud.c1{width:240px;height:96px;top:12%;animation:city-drift 41s linear infinite}
.city-cloud.c2{width:160px;height:70px;top:30%;opacity:.8;animation:city-drift 33s linear -8s infinite}
.city-cloud.c3{width:300px;height:120px;top:62%;opacity:.7;animation:city-drift 52s linear -20s infinite}
.city-cloud.c4{width:130px;height:58px;top:78%;opacity:.6;animation:city-drift 29s linear -14s infinite}
@keyframes city-drift{0%{transform:translate(-320px)}to{transform:translate(105vw)}}
.city-start-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.city-start-logo{width:clamp(96px,18vh,150px);height:clamp(96px,18vh,150px);image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(1,10,17,.18));animation:city-bob 3.2s ease-in-out infinite}
.city-start-word{margin:0;font-family:var(--font-head);font-size:clamp(30px,7vw,44px);letter-spacing:.04em;text-transform:uppercase;color:var(--stone-hi);text-shadow:2px 2px 0 var(--stone-outline),-2px 2px 0 var(--stone-outline),2px -2px 0 var(--stone-outline),-2px -2px 0 var(--stone-outline),4px 5px 0 var(--brand-ink)}
.city-start-slogan{margin:0;font-family:var(--font-head);font-size:clamp(10px,2.4vw,13px);letter-spacing:.06em;color:var(--brand-ink);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.city-start-online{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;font-family:var(--font-body);font-size:12px;color:var(--text);background-color:var(--panel-fill);border:2px solid var(--stone-outline);border-radius:999px;box-shadow:0 2px #010a1159}
.city-start-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 #4ade8099;animation:city-pulse 1.8s ease-out infinite}
@keyframes city-pulse{0%{box-shadow:0 0 #4ade8099}to{box-shadow:0 0 0 8px #4ade8000}}
.city-start-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.city-start-hint{margin:2px 0 0;max-width:340px;font-family:var(--font-body);font-size:12px;line-height:1.6;color:#1b3346}
.city-start-spectate{margin-top:10px;font-family:var(--font-body);font-size:13px;color:#1b3346;text-decoration:none;border-bottom:2px dotted rgba(27,51,70,.5);padding-bottom:1px}
.city-start-spectate:hover{color:var(--brand-ink);border-bottom-color:var(--brand-ink)}
.city-start-links{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));z-index:1;display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:10px;text-transform:uppercase}
.city-start-links a{color:var(--brand-ink);text-decoration:none;padding:4px 8px;border:2px solid transparent;border-radius:4px}
.city-start-links a:hover{border-color:var(--stone-outline);background:#ffffff59}
.city-start-sep{color:var(--brand-ink);opacity:.5}
@media(max-width:560px){.city-start-main{gap:7px}.city-start-logo{width:96px;height:96px}}
.city-docs{position:relative;min-height:100%;overflow-y:auto;background:linear-gradient(var(--sky-top),var(--sky-bottom)) fixed;font-family:var(--font-body);color:var(--text)}
.city-docs-clouds{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;opacity:.85}
.city-docs-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--panel-fill);border-bottom:3px solid var(--stone-outline);box-shadow:0 3px #010a1180}
.city-docs-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.city-docs-brand img{width:34px;height:34px;image-rendering:pixelated}
.city-docs-brand span{font-family:var(--font-head);font-size:14px;color:var(--stone-hi);text-shadow:2px 2px 0 var(--stone-outline)}
.city-docs-brand em{color:var(--brand-peach);font-style:normal}
.city-docs-back{font-family:var(--font-head);font-size:9px;text-transform:uppercase;color:var(--stone-hi);text-decoration:none;padding:7px 10px;background:var(--panel-fill-2);border:2px solid var(--stone-edge);border-top-color:var(--stone-hi);border-left-color:var(--stone-hi);border-right-color:var(--stone-shadow);border-bottom-color:var(--stone-shadow);border-radius:4px}
.city-docs-back:hover{background:var(--stone-shadow)}
.city-docs-body{position:relative;z-index:1;display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;max-width:1000px;margin:0 auto;padding:20px 16px 60px}
.city-docs-nav{position:sticky;top:74px;align-self:start;display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 96px);overflow-y:auto;padding:10px;background:var(--panel-fill);border:3px solid var(--stone-edge);border-top-color:var(--stone-hi);border-left-color:var(--stone-hi);border-right-color:var(--stone-shadow);border-bottom-color:var(--stone-shadow);border-radius:6px;box-shadow:0 0 0 2px var(--stone-outline),0 4px #010a1173}
.city-docs-navlink{font-family:var(--font-body);font-size:13px;color:var(--muted);text-decoration:none;padding:6px 9px;border-radius:4px;border:2px solid transparent}
.city-docs-navlink:hover{color:var(--text);background:var(--panel-fill-2)}
.city-docs-navlink.active{color:var(--stone-outline);background:var(--brand-peach);border-color:var(--stone-outline)}
.city-docs-content{display:flex;flex-direction:column;gap:16px;min-width:0}
.city-docs-section{scroll-margin-top:84px;padding:16px 18px;background:var(--panel-fill);border:3px solid var(--stone-edge);border-top-color:var(--stone-hi);border-left-color:var(--stone-hi);border-right-color:var(--stone-shadow);border-bottom-color:var(--stone-shadow);border-radius:6px;box-shadow:0 0 0 2px var(--stone-outline),0 4px #010a1173}
.city-docs-h2{margin:0 0 12px;font-family:var(--font-head);font-size:15px;color:var(--brand-peach);text-shadow:2px 2px 0 var(--stone-outline);padding-bottom:10px;border-bottom:2px solid var(--stone-edge)}
.city-docs-h3{margin:16px 0 6px;font-family:var(--font-head);font-size:11px;line-height:1.5;color:var(--stone-hi)}
.city-docs-p{margin:0 0 10px;font-size:14px;line-height:1.7;color:var(--text)}
.city-docs-p strong,.city-docs-ul strong,.city-docs-note strong{color:var(--stone-hi)}
.city-docs-ul{margin:0 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.city-docs-ul li{font-size:14px;line-height:1.6}
.city-docs-ul li::marker{color:var(--brand-peach)}
.city-docs-note{margin:10px 0;padding:11px 13px;font-size:13.5px;line-height:1.6;background:#fecdaa1a;border-left:4px solid var(--brand-peach);border-radius:4px}
.city-docs-code{display:block;margin:8px 0;padding:9px 11px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;text-transform:none;word-break:break-all;-webkit-user-select:all;user-select:all;color:var(--brand-ink);background:var(--panel-fill-2, rgba(0, 0, 0, .18));border:1px solid var(--stone-outline);border-radius:4px}
.city-docs-placeholder{margin:10px 0;padding:10px 12px;font-size:13px;line-height:1.55;color:var(--muted);background:var(--panel-fill-2);border:2px dashed var(--stone-edge);border-radius:5px}
.city-docs-ph-label{display:inline-block;margin-right:8px;padding:2px 7px;font-family:var(--font-head);font-size:8px;text-transform:uppercase;color:var(--stone-outline);background:var(--brand-peach);border-radius:3px}
.city-docs-link{display:inline-block;margin:4px 0;font-family:var(--font-head);font-size:9px;text-transform:uppercase;color:var(--stone-outline);background:var(--stone-face);text-decoration:none;padding:8px 12px;border:2px solid var(--stone-edge);border-top-color:var(--stone-hi);border-left-color:var(--stone-hi);border-right-color:var(--stone-shadow);border-bottom-color:var(--stone-shadow);border-radius:4px;box-shadow:0 0 0 2px var(--stone-outline),0 3px 0 0 var(--stone-shadow)}
.city-docs-link:hover{background:var(--stone-face-hi)}
.city-docs-footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 0 6px;font-family:var(--font-head);font-size:10px;text-transform:uppercase}
.city-docs-footer a{color:var(--stone-hi);text-decoration:none;text-shadow:1px 1px 0 var(--stone-outline)}
.city-docs-footer a:hover{color:var(--brand-peach)}
@media(max-width:900px){.city-docs-body{grid-template-columns:1fr;gap:12px}.city-docs-nav{top:62px;flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden;gap:6px;padding:8px}.city-docs-navlink{white-space:nowrap;flex:0 0 auto;font-size:12px}}
@media(max-width:560px){.city-docs-section{padding:13px 14px}.city-docs-h2,.city-docs-p,.city-docs-ul li{font-size:13px}.city-docs-back{font-size:8px;padding:6px 8px}}