/* Touch controls own only the canvas. Menus and long case studies keep native scrolling. */
#city-stage,#room{touch-action:auto}#city-canvas,#room-canvas{touch-action:none}
.destination-panel,.panel-content,.arrival-card{touch-action:pan-y pinch-zoom;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.city-page dialog[open]{display:flex;flex-direction:column}.city-page .panel-top{flex:none}.city-page .panel-content{flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden}
#city-loading a{font-size:13px;color:#527e95;margin:16px;padding:12px;text-align:center;text-underline-offset:4px}
@media(pointer:coarse){
 button,a,summary{-webkit-tap-highlight-color:transparent}
 .fps-pad{display:grid;width:158px;height:158px;padding:8px;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px;user-select:none;-webkit-user-select:none}
 .fps-pad button{width:44px;height:44px;min-width:44px;min-height:44px;font-size:23px}
 .city-header nav button,.city-header nav a,.view-controls button,.control-help summary,.surface-pill,.walking-status button,.interior-toolbar button,.building-label,.arrival-actions button,.drawer-links a,.drawer-links button,.destination,.guide-questions button,.secondary-button,.primary{min-height:44px}
 .city-page .panel-top button,.welcome-close,.drawer-heading button{min-width:44px;min-height:44px}
 .control-help summary{width:44px;height:44px}
 .building-label{font-size:12px!important;max-width:calc(100vw - 40px);white-space:normal;text-align:center}
 .drawer-links a,.drawer-links button{display:flex;align-items:center;font-size:13px}
 .city-page .guide-depth p,.city-page .guide-depth ol,.city-page .guide-depth ul{font-size:14px;line-height:1.85}.city-page .guide-depth summary{min-height:52px;font-size:14px}.guide-depth summary small{font-size:10px;white-space:normal;text-align:right;max-width:85px}
 .destination-panel,.city-page dialog,.welcome-card,.arrival-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fbfcf9fa}
 .studio .fps-pad{bottom:calc(76px + env(safe-area-inset-bottom));left:calc(16px + env(safe-area-inset-left))}
}
@media(max-width:650px){
 .city-page{height:100vh;height:100dvh}.city-main{height:100vh;height:100dvh}
 .city-header{height:calc(84px + env(safe-area-inset-top));padding:calc(12px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 12px calc(14px + env(safe-area-inset-left));gap:8px}
 .city-brand{min-width:0;gap:7px}.city-brand strong{font-size:16px!important;white-space:nowrap}.city-brand small{font-size:6px!important}.city-header nav{flex-shrink:0;padding:2px}.city-header nav #destinations-toggle{padding:10px 9px}.city-header nav .primary{padding:9px 10px}
 .island-topline{top:calc(93px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right))}
 .walking-status{top:calc(146px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));flex-wrap:wrap}.walking-status span{max-width:none;min-width:90px;flex:1}.walking-status button{font-size:10px}
 .welcome-card{left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));max-height:calc(100dvh - 175px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;touch-action:pan-y pinch-zoom}.welcome-close{top:5px;right:6px}
 .destination-panel{inset:calc(143px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));width:auto;max-width:none;padding:20px}.drawer-heading{position:sticky;top:-20px;background:#fbfcf9fa;z-index:1;margin:-2px -3px 18px;padding:4px 3px}.destination-panel .destination-intro{margin-bottom:12px}.drawer-links{gap:5px 12px}
 .fps-pad{left:calc(16px + env(safe-area-inset-left));bottom:calc(82px + env(safe-area-inset-bottom))}.city-page:has(.arrival-card:not([hidden])) .fps-pad{bottom:calc(252px + env(safe-area-inset-bottom))}
 .arrival-card{right:calc(16px + env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));width:calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:355px;max-height:164px;padding:13px 16px;overflow:auto}.arrival-card h2{font-size:21px;margin:5px 0}.arrival-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:6px 0;font-size:12px}.arrival-actions{margin-top:9px;gap:8px}.arrival-actions button{flex:1}
 .view-controls{left:calc(16px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom))}.island-footnote{display:none}.control-help>div{max-width:calc(100vw - 32px);min-width:220px}
 .interior-toolbar{inset:calc(143px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) auto calc(16px + env(safe-area-inset-left));padding:7px;gap:5px;flex-wrap:wrap}.interior-toolbar #exit-interior{flex:1}.interior-toolbar #previous-guides,.interior-toolbar #next-guides{min-width:44px}.interior-toolbar #guide-page{order:4;flex-basis:100%;text-align:center;font-size:11px;padding:2px 0}
 .city-page dialog{inset:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));margin:0;width:calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:none}.city-page .panel-top{padding:9px 15px}.city-page .panel-top>p{font-size:12px;line-height:1.5;max-width:calc(100% - 54px)}.city-page .panel-content{padding:24px 20px 32px}.city-page .guide-questions{display:grid;grid-template-columns:1fr;gap:7px}.city-page .guide-questions button{font-size:12px;text-align:left;padding:12px}.city-page .panel-content h2{font-size:32px;overflow-wrap:anywhere}
}
@media(max-width:380px){.city-brand .brand-symbol{display:none}.city-brand small{letter-spacing:.2px}.city-header nav #destinations-toggle{font-size:10px}.welcome-card h1{font-size:36px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:520px){
 .city-header{height:64px;padding:8px calc(16px + env(safe-area-inset-right)) 8px calc(16px + env(safe-area-inset-left));gap:10px}.city-brand small{display:none}.city-header #profile-button,.city-header #projects-button,.city-header #stack-button{display:none}.city-header nav{padding:2px}.city-brand strong{font-size:19px!important}
 .island-topline{top:69px;left:calc(16px + env(safe-area-inset-left));right:calc(16px + env(safe-area-inset-right))}.location-pill{padding:10px}.surface-pill{padding:10px 14px}
 .welcome-card{top:76px;bottom:16px;right:calc(16px + env(safe-area-inset-right));left:auto;transform:none;width:min(355px,50vw);max-height:none;padding:22px 26px;overflow:auto}.welcome-card h1{font-size:35px}.welcome-eyebrow{margin-bottom:12px}.welcome-copy{font-size:12px;margin:14px 0}.welcome-meta{padding:10px 0}.welcome-cta{padding:12px}
 .fps-pad,.city-page:has(.arrival-card:not([hidden])) .fps-pad{bottom:calc(16px + env(safe-area-inset-bottom));left:calc(16px + env(safe-area-inset-left))}.view-controls{left:calc(187px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom))}.island-footnote{display:none}
 .arrival-card{right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));max-width:300px;width:38vw;max-height:150px;overflow:auto;padding:12px 16px}.arrival-card h2{font-size:19px}.arrival-card p{display:none}.arrival-actions{margin-top:10px;gap:6px}.arrival-actions button{padding:10px!important;font-size:10px!important}
 .destination-panel{top:72px;bottom:12px;left:calc(16px + env(safe-area-inset-left));width:340px;max-width:calc(100vw - 32px);overflow:auto}.walking-status{top:118px;left:calc(16px + env(safe-area-inset-left));right:auto;max-width:440px}
 .interior-toolbar{top:118px;left:calc(16px + env(safe-area-inset-left));right:auto;max-width:550px;flex-wrap:nowrap}.interior-toolbar #guide-page{order:0;flex-basis:auto;white-space:nowrap}.city-page .panel-content{padding-top:20px}
}
@supports(padding:max(0px)){.resume-page{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}

.joystick{touch-action:none;--stick-x:0px;--stick-y:0px;cursor:grab}.joystick:active{cursor:grabbing}.joystick-base{position:relative;grid-column:1/-1;grid-row:1/-1;width:100%;height:100%;border-radius:50%;border:1px solid #a4becf55;background:radial-gradient(circle at center,#b6d0dd38 0 18%,transparent 19% 52%,#f6fafb30 53%);pointer-events:none}.joystick-thumb{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#97b7caad;border:1px solid #7b9fb39c;box-shadow:0 4px 12px #244e6120;transform:translate(-50%,-50%) translate(var(--stick-x),var(--stick-y));will-change:transform}.joystick.pressed .joystick-thumb{background:#739eb9cd;border-color:#537e99}.joystick-caption{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:8px Arial,sans-serif;letter-spacing:.14em;color:#6d8a9b}.inside-building .joystick-thumb{background:#b9b7a9cc;border-color:#85897a}
/* Keep the thumb control stationary when contextual cards appear. */
.studio #room{touch-action:auto}
@media(pointer:coarse) and (orientation:portrait) and (max-width:650px){
 .fps-pad,.city-page:has(.arrival-card:not([hidden])) .fps-pad{bottom:calc(82px + env(safe-area-inset-bottom))}
 .arrival-card{width:calc(100vw - 196px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:220px;max-height:200px;padding:12px;bottom:calc(82px + env(safe-area-inset-bottom))}.arrival-card h2{font-size:18px;overflow-wrap:anywhere}.arrival-card p{display:none}.arrival-card small{font-size:8px;letter-spacing:.6px}.arrival-actions{flex-direction:column;align-items:stretch;gap:6px}.arrival-actions button{width:100%;min-height:44px;padding:9px!important}
}