html,body{height:100%;overscroll-behavior:none}#world{height:100dvh}#rotatePrompt{display:none}#joystick{position:relative;width:124px;height:124px;border-radius:50%;background:#172725b8;border:2px solid #ffe1b060;touch-action:none;user-select:none;box-shadow:inset 0 0 0 25px #ffffff06}#stickKnob{position:absolute;left:calc(50% - 24px);top:calc(50% - 24px);width:48px;height:48px;border-radius:50%;background:#efbe77;border:2px solid #ffe1b0;box-shadow:0 4px 14px #0006;pointer-events:none}#fullscreen{display:none}
@media(any-pointer:coarse){
  #fullscreen{display:block}footer{display:none}
  header{top:max(10px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));align-items:center}.brand{font-size:20px}.brand small{font-size:7px}.top{gap:5px}.top .live{display:none}.top button{padding:10px 8px;font-size:8px}
  #touch{display:flex;position:fixed;inset:auto max(22px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));width:auto;padding:0;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:5}#touch>*{pointer-events:auto}#touch #touchAction{flex:none;width:78px;height:78px;border-radius:50%;padding:0;background:#172725df;border:2px solid #ffe1b060;touch-action:none;user-select:none;font-weight:bold;font-size:11px}
  #interact{bottom:max(108px,calc(env(safe-area-inset-bottom) + 100px));left:auto;right:max(18px,env(safe-area-inset-right));transform:none;padding:12px;font-size:10px;max-width:200px}
  #mapbox{left:max(18px,env(safe-area-inset-left));top:60px;bottom:auto;width:110px;padding:5px}#map{width:98px;height:89px}#mapbox .eyebrow{font-size:6px}.mapfoot{font-size:7px}
  #dash{right:max(18px,env(safe-area-inset-right));top:60px;bottom:auto;width:110px;padding:9px}.speed strong{font-size:36px;letter-spacing:-2px}.speed span{font-size:7px}.speed{gap:8px}.vehicle{font-size:8px}.vehicle small{font-size:6px}.dashfoot{display:none}
  .panel{top:60px;left:50%;transform:translateX(-50%);width:360px;max-width:80vw;padding:18px;max-height:calc(100dvh - 75px);overflow:auto}.panel h1{font-size:28px;margin:10px 0}.panel p{font-size:11px;margin:8px 0}.ride-buttons{display:none}.hint{font-size:0}.hint:after{content:'Drag the stick to move · Drag the world to look';font-size:9px}
  body:has(#intro:not(.hidden)) #touch,body:has(#paused:not(.hidden)) #touch{display:none}
  #toast{top:58px;width:auto;max-width:60%;font-size:10px;padding:8px 12px;text-align:center}
  #mapbox.expanded{top:50%;bottom:auto;left:50%;width:min(60vw,350px);transform:translate(-50%,-50%);z-index:6}#mapbox.expanded #map{width:100%;height:auto;max-height:65dvh}
}
@media(any-pointer:coarse) and (orientation:portrait){
  #rotatePrompt{position:fixed;inset:0;z-index:20;background:#182623f5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center}#rotatePrompt .primary{max-width:300px}.rotate-icon{font-size:70px;color:#efbe77}#rotatePrompt p{max-width:310px}#rotatePrompt h2{margin:15px 0 0}#screenHint{font-size:11px}
}

@media(any-pointer:coarse){#characterActions{display:flex;align-items:center;gap:10px}#touch #characterActions button{flex:none;width:46px;height:46px;border-radius:50%;padding:10px;background:#172725df;color:#efbe77;border:1px solid #ffe1b080;touch-action:none;user-select:none}#characterActions svg{width:100%;height:100%;pointer-events:none}#touch #characterActions button[hidden]{display:none}#touch #characterActions button:active{background:#efbe77;color:#172725}#interact{bottom:max(82px,calc(env(safe-area-inset-bottom) + 74px))}}

#driveArrows{display:none}
#rotatePrompt button{margin-top:12px;min-height:44px}
@media(any-pointer:coarse){
 body[data-mode="drive"] #joystick{display:none}
 body[data-mode="drive"] #driveArrows{display:flex;position:absolute;left:0;right:0;bottom:0;justify-content:space-between;pointer-events:none}
 #driveArrows>div{display:flex;gap:10px;pointer-events:auto}
 #touch #driveArrows button{width:54px;height:54px;padding:0;flex:none;background:#172725e8;border:1px solid #efbe7790;color:#efbe77;border-radius:14px;font-size:19px;touch-action:none}
 #touch #driveArrows button:active{background:#efbe77;color:#172725}
 body[data-mode="drive"] #characterActions{position:absolute;right:132px;bottom:4px}
}