:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}html,body{height:100%;height:100dvh;overscroll-behavior:none}body{position:fixed;inset:0;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}#world{touch-action:none}#camera-panel{position:absolute;right:30px;top:105px;padding:17px;width:265px;z-index:6}#camera-panel[hidden]{display:none}.camera-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.camera-heading strong{font-size:16px}.camera-heading button{min-width:44px;min-height:44px;padding:5px}.camera-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:7px;margin:10px 0;font-size:14px}.camera-field input{grid-column:1/-1;width:100%;height:30px;accent-color:#cf3830;touch-action:pan-x}.camera-field output{color:#647970;font-size:13px}.camera-actions{display:flex;gap:8px}.camera-actions button{flex:1;font-size:14px;min-height:44px}.camera-hint{font-size:12px;color:#5e776a;line-height:1.6;margin:10px 0 0}.touch{pointer-events:none}.touch button{pointer-events:auto;min-height:56px;min-width:62px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch .held{background:#b9d9c4!important;box-shadow:inset 0 0 0 2px #4c8166;transform:translateY(1px)}.touch-group{display:flex;gap:8px;align-items:flex-end}.touch .pedals{margin-left:auto}.touch button:nth-child(3){margin-left:0}.touch .accelerator{background:#2d6658;color:white;height:82px}.touch .brake{background:#b94337;color:white;height:68px}.touch .reverse{font-size:13px;min-width:48px}.mobile-tip{display:none}#paused{z-index:20;padding:16px}#paused>.panel{max-height:90dvh;overflow:auto}#loading{z-index:30}#map-panel.expanded{z-index:8}#camera-panel input:focus-visible{outline:2px solid #ce3c31}#camera-panel button:focus-visible{outline:2px solid #ce3c31}
@media(any-pointer:coarse),(max-width:900px){
 header{top:calc(8px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));gap:8px}.brand small,.tag{display:none}header .brand{padding:7px 9px;gap:8px}.brand strong{font-size:17px;letter-spacing:1px}.logo{font-size:15px;padding:7px}.logo span{font-size:10px}.topactions button{min-height:44px;min-width:44px;padding:9px;font-size:12px}.topactions #sound{display:block}.help{display:none}
 .route{top:calc(80px + var(--safe-top));left:calc(12px + var(--safe-left));width:185px;padding:12px}.route .eyebrow,.destination,.route-line{display:none}.route .next{margin:0;padding:0;border:0}.next strong{font-size:18px;margin-top:2px}.next>span{display:block;float:none;margin-top:2px;font-size:12px}.stats{margin-top:8px;gap:20px}.stats b{font-size:18px}.stats small{font-size:11px}.stats>div:last-child{display:none}
 .map{top:calc(80px + var(--safe-top));right:calc(12px + var(--safe-right));bottom:auto;width:170px;padding:10px}.map canvas{height:125px}.map .location-picker,.map .source-link,.map .mapcaption span{display:none}.map .eyebrow{font-size:12px}.map .eyebrow button{min-height:44px;font-size:12px}.mapcaption{font-size:12px}.mapcaption b{font-size:12px}.map.expanded{top:calc(72px + var(--safe-top));bottom:calc(165px + var(--safe-bottom));right:calc(12px + var(--safe-right));width:min(550px,calc(100vw - 24px - var(--safe-left) - var(--safe-right)));max-height:none}.map.expanded .location-picker{display:flex}.map.expanded .source-link{display:block}.map.expanded .location-picker select{flex:1;min-height:44px;width:150px;font-size:16px}.map.expanded .location-picker button{min-height:44px;min-width:85px}.map.expanded canvas{min-height:80px}
 footer{bottom:calc(106px + var(--safe-bottom));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));gap:8px;align-items:stretch}.drive{min-width:98px;padding:9px 12px;gap:12px}.speed b{font-size:30px}.speed span{font-size:10px}.gear strong{font-size:21px}.gear small,.limit{display:none}.doors{flex:0 1 320px;padding:4px;gap:0}.doors button{min-width:0;min-height:52px;flex:1;font-size:13px;padding:8px;justify-content:center}.doors kbd,.doors i{display:none}.doors small{font-size:11px;margin-top:3px}.utility{display:flex;flex-direction:row;gap:6px;font-size:12px}.utility button{padding:8px;min-height:44px;min-width:54px}.touch{display:flex;position:absolute;bottom:calc(12px + var(--safe-bottom));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));align-items:flex-end;gap:8px;z-index:4}.touch .steering button{font-size:22px;width:70px;height:70px;border-radius:16px;background:#f8fcf1eb}.touch .pedals button{border-radius:14px}.touch .pedals .reverse{background:#e9eeE5e8}.mobile-tip{display:block;position:absolute;left:50%;bottom:calc(19px + var(--safe-bottom));transform:translateX(-50%);font-size:11px;color:#244538;pointer-events:none}
 #notice{bottom:calc(180px + var(--safe-bottom));max-width:70%;font-size:12px;padding:9px 14px}.panel{backdrop-filter:none;-webkit-backdrop-filter:none}#camera-panel{top:calc(70px + var(--safe-top));right:calc(12px + var(--safe-right));width:280px;max-height:calc(100dvh - 95px - var(--safe-top) - var(--safe-bottom));overflow-y:auto}#camera-panel .camera-field input{height:36px}
}
@media(max-width:600px) and (orientation:portrait){header .brand strong{font-size:15px}.brand{gap:6px}.logo{font-size:13px}.topactions{gap:2px}.topactions button{font-size:11px;padding:7px}.route{width:145px}.map{width:145px}.map canvas{height:106px}.map .eyebrow{font-size:11px}.map .eyebrow button{font-size:11px;padding:4px}.utility{position:absolute;right:0;bottom:calc(100% + 10px)}.utility button{font-size:12px;min-width:70px}.doors{flex:1}.drive{min-width:85px;padding:8px;gap:8px}.doors button{font-size:12px}.touch .steering{gap:6px}.touch .steering button{width:58px;min-width:58px;height:66px}.touch .pedals{gap:6px}.touch .pedals button{min-width:54px;font-size:14px}.touch .pedals .reverse{min-width:42px;font-size:12px}.mobile-tip{display:none}#notice{bottom:calc(215px + var(--safe-bottom));max-width:90%;width:max-content}#camera-panel{width:min(290px,calc(100vw - 24px))}.map.expanded{bottom:calc(175px + var(--safe-bottom))}}
@media(orientation:landscape) and (max-height:600px){
 header .brand strong{font-size:15px}.brand .logo{display:none}header .brand{padding:8px}.topactions{padding:0}.topactions button{min-height:36px}.route{top:calc(58px + var(--safe-top));width:150px;padding:8px}.route .stats{display:none}.route .next small{font-size:10px}.route .next strong{font-size:15px}.route .next>span{font-size:11px}.map{top:calc(55px + var(--safe-top));width:145px;padding:7px}.map canvas{height:80px}.map .eyebrow button{min-height:32px}.map .eyebrow{font-size:10px}.mapcaption{display:none}footer{bottom:calc(12px + var(--safe-bottom));left:50%;right:auto;transform:translateX(-50%);width:auto;gap:5px}.drive{min-width:77px;padding:7px;gap:8px}.speed b{font-size:26px}.doors{flex:none}.doors button{min-width:72px;font-size:11px;min-height:48px;padding:5px}.utility{position:absolute;left:0;right:0;bottom:calc(100% + 6px);justify-content:center}.utility button{min-height:36px;min-width:85px;padding:5px}.touch{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));bottom:calc(12px + var(--safe-bottom))}.touch .steering button{width:58px;height:58px;min-width:58px}.touch .pedals button{min-width:54px}.touch .pedals .accelerator{height:66px}.touch .pedals .brake{height:58px}.touch .pedals .reverse{min-width:42px;min-height:44px;height:44px}.mobile-tip{display:none}#notice{bottom:calc(122px + var(--safe-bottom));padding:7px 12px;font-size:11px;max-width:50%}.map.expanded{top:calc(50px + var(--safe-top));bottom:calc(104px + var(--safe-bottom));width:min(480px,65vw)}#camera-panel{top:calc(48px + var(--safe-top));max-height:calc(100dvh - 58px - var(--safe-top) - var(--safe-bottom));padding:10px;width:260px}.camera-heading{margin:0}.camera-field{margin:3px 0}.camera-field input{height:22px!important}.camera-hint{margin:5px 0;font-size:11px}.camera-actions button{min-height:36px}}
@media(orientation:landscape) and (max-height:600px) and (max-width:740px){.touch .steering button{width:48px;min-width:48px}.touch .pedals .reverse{position:absolute;right:0;bottom:74px}.touch .pedals button{min-width:48px}.doors button{min-width:61px}.drive{min-width:69px}.gear{display:none}}

/* Native dialog traps focus and stays above the driving controls on all devices. */
#quick-travel-open{background:#285e4f;color:#fff}
#quick-travel{width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));overflow:auto;border:1px solid #dae3d8;border-radius:18px;background:#f6faf2;color:#203d33;padding:22px;box-shadow:0 20px 70px #132c3360}
#quick-travel::backdrop{background:#102d3a88;backdrop-filter:blur(4px)}
.travel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.travel-heading h2{font-size:20px;margin:0}.travel-heading button{min-width:44px;min-height:44px}
#quick-travel p{font-size:14px;line-height:1.7;color:#5f7469;margin:10px 0 16px}
#travel-stops{display:grid;grid-template-columns:1fr 1fr;gap:10px}#travel-stops button{min-height:64px;text-align:left;background:#e5eee1;padding:12px;font-size:16px;font-weight:600}#travel-stops button:hover{background:#d3e6ce}#travel-stops button small{display:block;margin-top:5px;font-size:11px;font-weight:400;color:#5c7869}
#quick-travel #travel-message:empty{display:none}#quick-travel #travel-message{color:#aa382c;margin:12px 0}#quick-travel>small{display:block;margin-top:15px;font-size:12px;color:#637b6b}
@media(orientation:landscape) and (max-height:600px){#quick-travel{padding:14px;width:min(530px,calc(100vw - 40px))}#travel-stops{grid-template-columns:repeat(3,1fr);gap:8px}#travel-stops button{min-height:54px;padding:9px}#quick-travel p{margin:6px 0 10px;font-size:12px}}