:root{--ink:#102431;--gold:#d9bc83;--paper:#f2e9d7}
#drive-steering:after,#walk-joystick:after{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:9px system-ui;color:#f2e9d7;pointer-events:none}#drive-steering:after{content:'STEER'}#walk-joystick{position:relative}#walk-joystick:after{content:'MOVE'}
.touch-pad{display:none}.eye-height{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:8px}.eye-height input{width:110px;min-height:32px}#audio-toggle{display:none}body.compact-controls #audio-toggle{display:block;position:fixed;right:max(12px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));min-height:44px;z-index:18;background:#102431ed;color:#f2e9d7;border:1px solid #d9bc8366;padding:9px 14px}.booting #audio-toggle{display:none!important}
body.compact-controls .touch-pad{display:flex;width:112px;height:112px;align-items:center;justify-content:center;border-radius:50%;background:#102431aa;border:2px solid #d9bc8399;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 0 24px #0004}body.compact-controls .touch-pad span{width:46px;height:46px;background:#d9bc83c9;border-radius:50%;pointer-events:none;box-shadow:0 3px 12px #0004}
body.compact-controls.driving #drive-panel{position:fixed!important;inset:0!important;width:auto!important;padding:0!important;border:0;background:none;pointer-events:none}body.compact-controls #drive-panel>*{pointer-events:auto}body.compact-controls #drive-panel small{display:none}body.compact-controls #drive-state{position:absolute;top:12px;left:12px;background:#102431c9;border-radius:6px;padding:8px;font-size:11px;max-width:55vw}body.compact-controls #drive-steering{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:70px}body.compact-controls #drive-panel .drive-grid{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:70px;display:grid;grid-template-columns:repeat(3,64px);gap:8px;margin:0}body.compact-controls #drive-panel .drive-grid button{min-height:64px;border:1px solid #d9bc8366;background:#102431df;font-size:11px;font-weight:600;user-select:none;-webkit-user-select:none}body.compact-controls #drive-panel [data-drive="KeyA"],body.compact-controls #drive-panel [data-drive="KeyD"]{display:none}body.compact-controls #drive-panel [data-drive="KeyW"]{grid-column:3;grid-row:1;background:#245b4bed}body.compact-controls #drive-panel [data-drive="Space"]{grid-column:2;grid-row:1;background:#7c3535ed}body.compact-controls #drive-panel [data-drive="KeyS"]{grid-column:1;grid-row:1}body.compact-controls #drive-reset{position:absolute;right:0;bottom:-57px;transform:translateX(-125px);min-height:44px!important;width:90px}
body.compact-controls #walk-panel{width:150px!important;background:none;border:0;padding:6px!important}body.compact-controls #walk-panel .walk-grid{display:none}body.compact-controls #walk-state{font-size:10px;background:#102431c9;padding:5px;border-radius:5px}body.compact-controls #walk-panel .eye-height{background:#102431c9;padding:4px;font-size:9px}body.compact-controls #walk-panel .eye-height input{width:75px}body.compact-controls #walk-joystick{margin:8px auto}body.compact-controls.walking #walk-panel{bottom:55px!important}
@media(pointer:coarse) and (orientation:portrait){body.compact-controls #drive-panel .drive-grid{grid-template-columns:repeat(3,52px);gap:5px;bottom:80px}body.compact-controls #drive-steering{width:100px;height:100px;bottom:80px}}
#controls-toggle{display:none}.compact-controls #controls-toggle{display:block;position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:20;min-height:44px;padding:10px 18px;background:#102431ed;color:#f2e9d7;border:1px solid #d9bc8366;box-shadow:0 4px 20px #0003}
body.compact-controls nav{display:none!important;position:fixed;left:auto;right:max(12px,env(safe-area-inset-right));bottom:calc(64px + env(safe-area-inset-bottom));transform:none;width:min(440px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-width:none;max-height:calc(100dvh - 85px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:10px;z-index:19;border-radius:12px}
body.compact-controls.controls-open nav{display:flex!important}body.compact-controls nav>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}body.compact-controls nav button{min-height:44px;white-space:normal;font-size:11px;padding:6px}body.compact-controls nav input[type=range]{width:100%!important;min-height:44px}body.compact-controls nav .sound-options{grid-column:1/-1}body.compact-controls nav .sound-options summary{min-height:44px;padding:13px}body.compact-controls nav .sound-options-list{position:static;width:100%;max-height:none;grid-template-columns:1fr 1fr;gap:2px;padding:6px}body.compact-controls .sound-options-list label{min-height:44px}
body.compact-controls #walk-panel,body.compact-controls #drive-panel{bottom:max(10px,env(safe-area-inset-bottom))!important;z-index:10}body.compact-controls.controls-open #walk-panel,body.compact-controls.controls-open #drive-panel{display:none}body.compact-controls #help{display:none}body.compact-controls header{padding:5px 9px!important;top:max(8px,env(safe-area-inset-top))!important;left:max(12px,env(safe-area-inset-left))!important}body.compact-controls .brand img.brand-wordmark{width:165px;height:31px}body.compact-controls #about-city{display:none}body.compact-controls #tour-panel{top:65px!important;right:max(12px,env(safe-area-inset-right))!important;max-width:calc(100vw - 24px);padding:7px 10px!important}body.compact-controls .tour-actions button{min-height:44px}
#drive-panel{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:135px;width:250px;padding:12px;background:#102431ed;color:#f2e9d7;border:1px solid #d9bc8355;border-radius:10px}#drive-panel[hidden]{display:none}.drive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:8px 0}.drive-grid button{background:#ffffff15;color:#f2e9d7;min-height:44px;touch-action:none;padding:6px}#drive-panel small{font-size:10px;color:#bbc9ca}.driving header,.driving #help,.driving #about-city{display:none}.driving canvas{touch-action:none}@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){#drive-panel{bottom:100px;width:230px;padding:7px}#drive-panel small{display:none}}@media(max-width:650px) and (orientation:portrait){#drive-panel{bottom:195px}}
header{background:linear-gradient(135deg,#142a37e8,#102431c9)!important;border:1px solid #d9bc8338!important;box-shadow:0 12px 40px #05131c20;border-radius:3px!important;padding:12px 20px!important;pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;padding:0!important;color:var(--paper)!important}.brand:hover{background:none;transform:none}.brand img{width:42px;height:49px}.brand h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:23px!important;letter-spacing:.22em;margin:0;text-transform:uppercase}.brand h1 span{letter-spacing:.1em}
#splash{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 43%,#234251 0%,#142d3b 35%,#0b1d29 78%);color:var(--paper);display:grid;place-items:center;overflow:hidden;transition:opacity .8s ease,visibility .8s ease}
#splash[hidden]{display:none}.ready #splash{opacity:0;visibility:hidden;pointer-events:none}.splash-content{text-align:center;position:relative;padding:30px;max-width:650px}.splash-mark{width:90px;height:90px;margin-bottom:24px;filter:drop-shadow(0 0 22px #d9bc8322);animation:arrive 1.8s ease both}.splash-title{font:400 clamp(32px,7vw,62px) Georgia,serif;letter-spacing:.23em;text-indent:.23em;margin:0 0 20px;color:var(--paper)}.splash-copy{font:13px/1.9 system-ui;letter-spacing:.06em;color:#bbc9ca;margin:0 auto;max-width:390px}.loading-rule{height:1px;background:#d9bc8325;width:180px;margin:34px auto 16px;overflow:hidden}.loading-rule:after{content:'';display:block;background:linear-gradient(90deg,transparent,var(--gold),transparent);width:70%;height:1px;animation:loading-sweep 2.3s ease-in-out infinite}#loading-label{font:11px/1.6 system-ui;color:#c7ceca;min-height:36px;margin:0;letter-spacing:.05em}#retry{color:var(--paper);border:1px solid #d9bc8355;padding:9px 18px;margin-top:8px}#retry[hidden]{display:none}.load-failed .loading-rule:after{animation:none}
.splash-rings{position:absolute;width:1100px;height:1100px;border:1px solid #d9bc8309;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.splash-rings:before,.splash-rings:after{content:'';position:absolute;inset:100px;border:1px solid #d9bc830d;border-radius:50%}.splash-rings:after{inset:200px}
.booting nav,.booting header,.booting #help{visibility:hidden}.booting>canvas{opacity:0}#about-city{position:absolute;right:22px;top:95px;z-index:4;color:var(--paper);font-size:11px}#about-city summary{cursor:pointer;text-align:right;opacity:.8}#about-city .about-copy{max-width:290px;background:#102431ed;border:1px solid #d9bc8335;padding:18px;margin-top:8px;border-radius:5px;line-height:1.8}#about-city h2{font:21px Georgia,serif;font-weight:400;margin:0 0 12px}.about-copy p{margin:0 0 10px}.walking #about-city{display:none}.no-script{position:fixed;z-index:110;inset:0;background:#102431;color:#f2e9d7;display:grid;place-content:center;text-align:center;padding:30px;font:18px/1.8 Georgia,serif}
@keyframes loading-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(160%)}}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){.brand h1{font-size:18px!important}.brand img{width:31px;height:39px}.brand{gap:9px}header{padding:9px 13px!important}.splash-copy{font-size:12px}#about-city{right:18px;top:85px}}@media(prefers-reduced-motion:reduce){#splash{transition:none}.splash-mark,.loading-rule:after{animation:none!important}.loading-rule:after{width:100%}}
.brand img.brand-wordmark{width:260px;height:48px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:650px){.brand img.brand-wordmark{width:210px;height:39px}}
.splash-mark{animation:none}.booting #about-city,.booting #status{visibility:hidden}
#rotate-phone{background:#102431;color:#f2e9d7;border:1px solid #d9bc8366;border-radius:12px;padding:28px;max-width:min(360px,90vw);text-align:center;box-shadow:0 20px 80px #0008}#rotate-phone::backdrop{background:#07121cf2}#rotate-phone h2{font:26px Georgia,serif;font-weight:400}#rotate-phone p{font:13px/1.7 system-ui;color:#c7ceca}#rotate-phone button{display:block;width:100%;min-height:44px;margin:8px 0;color:#f2e9d7;border:1px solid #d9bc8344}#rotate-phone #enter-landscape{background:#d9bc83;color:#102431}#rotate-note:empty{display:none}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
 header{top:max(8px,env(safe-area-inset-top))!important;left:max(12px,env(safe-area-inset-left))!important;padding:5px 10px!important}.brand img.brand-wordmark{width:165px;height:31px}#about-city,#help{display:none}
 nav{bottom:max(5px,env(safe-area-inset-bottom));padding:4px 7px;max-width:calc(100vw - 2 * max(12px,env(safe-area-inset-left)));gap:0}nav button,nav a{min-height:36px;padding:6px 8px}nav>div{gap:0}
 #tour-panel{top:max(8px,env(safe-area-inset-top))!important;right:max(12px,env(safe-area-inset-right))!important;padding:7px 10px!important;font-size:11px!important}.tour-actions{margin-top:3px!important}.tour-actions button{min-height:36px}
 #walk-panel{left:max(10px,env(safe-area-inset-left))!important;bottom:100px!important;width:205px!important;padding:6px!important}#walk-state{font-size:9px!important}.walk-grid{margin-top:3px!important;gap:3px!important}.walk-grid button{min-height:36px!important;padding:5px!important}
 .sound-options-list{max-height:calc(100dvh - 110px);overflow:auto}
}