/* Driving gets the space; details belong in the town menus. */
.topbar{top:max(16px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));align-items:center}
.brand-symbol{width:40px;height:40px;font-size:1.5rem;border-radius:12px}
.brand .wordmark{max-width:140px;font-size:.9rem;line-height:1.15;letter-spacing:.03em}
.round-button,.menu-button{height:44px;min-width:44px;background:#fffcf4f0;box-shadow:0 4px 16px #12363a20}
.menu-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;border-radius:24px;font-weight:700;font-size:.85rem}
.road-chip{top:max(22px,env(safe-area-inset-top));font-size:.8rem;max-width:calc(100vw - 530px);overflow:hidden;text-overflow:ellipsis;display:block;text-align:center}
.bottom-bar{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));justify-content:center}
.action-dock{padding:5px;border-radius:28px;width:auto;gap:3px}
.dock-button{min-height:44px;border-radius:22px;padding:10px 18px;font-size:.85rem}
.minimap-wrap{display:none;position:fixed;left:20px;bottom:20px;top:auto;right:auto;width:164px;border-width:3px;border-radius:13px}
.has-route .minimap-wrap{display:block}
.minimap-wrap canvas{width:158px;height:112px;border-radius:9px}
.map-credit{font-size:9px;line-height:18px}
.bottom-bar>.speedometer{position:absolute;bottom:9px;right:0;gap:4px;margin:0;background:#173d43b8;padding:7px 11px;border-radius:20px;text-shadow:none}
.speedometer strong{font-size:1.15rem;letter-spacing:0;font-variant-numeric:tabular-nums}
.speedometer span{font-size:.6rem}
.drive-stats{position:fixed;top:82px;right:28px;display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #ffffff85;border-radius:999px;background:#fffcf4e8;color:#173d43;box-shadow:0 4px 16px #12363a20;font-size:.72rem;font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap}
.drive-stats strong{font-size:.82rem;font-weight:800}
.drive-stats i{font-style:normal;color:#927c51}
body:not(.playing) .drive-stats{display:none}
.route-banner,.interaction{position:fixed;top:78px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:330px;max-width:calc(100vw - 32px);min-width:0;padding:12px 14px;border-radius:16px;gap:10px;box-shadow:0 6px 24px #163f3c20}
.route-banner{background:#173d43ef;color:#fff9e8;align-items:center}
.route-banner>div{min-width:0;flex:1}
.route-banner strong,.interaction .info strong{display:block;font-size:.9rem;line-height:1.3;white-space:normal}
.route-banner small{font-size:.75rem;line-height:1.4;margin-top:3px;color:#f0ead8}
.route-banner .route-trail{color:#efc567;font-size:.7rem}
.route-banner #cancel-route{width:44px;height:44px;flex:none;display:grid;place-items:center;font-size:1.3rem;border-radius:50%;background:#ffffff12;color:#fff}
.has-nearby #route-slot{visibility:visible}
.has-nearby .route-banner{top:128px}
.interaction{background:#fffcf4f5;align-items:center;flex-direction:row}
.interaction .place-icon{display:none}
.interaction .info{min-width:0;flex:1}
.interaction .info p{font-size:.75rem;margin-top:3px;line-height:1.3}
.interaction .btn{min-height:44px;padding:10px 14px;font-size:.8rem}
.viewing-landmark .interaction{opacity:1;pointer-events:auto}
#notifications{top:auto;bottom:calc(87px + env(safe-area-inset-bottom));width:min(440px,calc(100vw - 32px))}
.toast{padding:11px 16px;font-size:.82rem}
body:not(.playing) .road-chip,body:not(.playing) #route-slot,body:not(.playing) #interaction-slot{display:none}
.menu-progress{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;background:#eaf0e4;border-radius:14px;margin-bottom:20px;font-size:.85rem}
.menu-progress strong{color:#79551d}
.town-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}
.town-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:22px;text-align:left;border:1px solid #d8e0d1;border-radius:14px;background:#f7f7ed;min-height:110px}
.town-menu button:hover,.trail-card:has(button:hover){border-color:#3f7f6d;background:#eef3e8}
.town-menu strong{font-family:'Outfit',sans-serif;font-size:1.25rem}
.town-menu span{color:#567166;font-size:.85rem;line-height:1.4}
.next-stop{padding:24px;border-radius:18px;background:#173d43;color:#fff9e8;margin-bottom:27px}
.next-stop .step-label{color:#edc46f}
.next-stop h3{font-size:1.65rem;margin:7px 0}
.next-stop p{font-size:.875rem;line-height:1.5;color:#e2e8d7;margin-bottom:17px}
.next-stop .btn{margin-top:10px}
.section-label{margin-bottom:13px}
.trail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.trail-card{display:flex;flex-direction:column;align-items:flex-start;border:1px solid #d8e0d1;background:#f5f6eb;padding:19px;border-radius:16px;min-width:0}
.trail-icon{font-size:1.8rem;color:#287b68;margin-bottom:13px}
.trail-card h3{font-size:1.12rem;line-height:1.25;margin-bottom:9px}
.trail-card p{font-size:.82rem;color:#566f62;line-height:1.5;margin-bottom:20px;flex:1}
.trail-progress{font-size:.75rem;font-weight:700;color:#56705e;margin-bottom:10px}
.trail-card .btn{font-size:.78rem;padding:11px;width:100%;white-space:normal}
.explore-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.trail-finished{padding:16px;border-radius:12px;background:#e2f0dd;color:#246951;font-weight:700;line-height:1.5;margin:20px 0}
.completion-progress{font-size:.85rem;color:#5b7569;margin:18px 0}
.place-source{display:inline-block;margin-top:24px;color:#337568;font-size:.85rem}
.stick-help{display:none}
#mobile-controls{bottom:calc(84px + env(safe-area-inset-bottom))}
#mobile-controls .drive-brake{margin-bottom:16px}
@media(max-width:1050px){.brand .wordmark{display:none}.road-chip{max-width:calc(100vw - 300px)}.route-banner,.interaction{top:78px}}
@media(max-width:760px),(pointer:coarse),(any-pointer:coarse){
 .brand .wordmark{display:none}.topbar{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
 .top-actions{gap:8px}.road-chip{top:calc(68px + env(safe-area-inset-top));max-width:calc(100vw - 32px);font-size:.76rem;padding:7px 12px}
 .bottom-bar{bottom:calc(16px + env(safe-area-inset-bottom))}.bottom-bar>.speedometer{display:none}
 .drive-stats{top:calc(105px + env(safe-area-inset-top));left:16px;right:auto;padding:6px 9px;font-size:.67rem}
 .has-route .drive-stats{top:calc(188px + env(safe-area-inset-top))}
 .has-nearby .drive-stats{top:calc(230px + env(safe-area-inset-top))}
 .minimap-wrap{left:auto;right:16px;top:calc(111px + env(safe-area-inset-top));bottom:auto;width:130px}
 .minimap-wrap canvas{width:124px;height:88px}.map-credit{font-size:8px;letter-spacing:-.2px}
 .route-banner,.interaction{top:calc(111px + env(safe-area-inset-top));left:16px;right:auto;bottom:auto;transform:none;width:calc(100vw - 174px);max-width:300px;padding:11px;gap:6px}
 .has-nearby .route-banner{top:calc(230px + env(safe-area-inset-top));left:auto;right:16px;width:min(300px,calc(100vw - 174px))}
 .route-banner{align-items:flex-start}.route-banner>span{display:none}.route-banner #cancel-route{margin:-4px -5px 0 0;width:32px;height:44px}
 .route-banner strong,.interaction .info strong{font-size:.8rem}.route-banner small,.route-banner .route-trail{font-size:.68rem}
 .interaction{flex-direction:column;align-items:stretch}.interaction .btn{width:100%;font-size:.8rem}.interaction .info p{font-size:.7rem}
 .interaction .desktop-key{display:none}.dock-button{padding:10px 16px;font-size:.82rem}
 #notifications{top:auto;bottom:calc(262px + env(safe-area-inset-bottom));width:calc(100vw - 32px)}
 .trail-grid{grid-template-columns:1fr}.trail-card{display:grid;grid-template-columns:40px 1fr;gap:5px 12px;padding:17px}.trail-icon{grid-row:1/4;margin:0}.trail-card h3,.trail-card p{margin:0}.trail-card .trail-progress{grid-column:2;margin:5px 0}.trail-card .btn{grid-column:2;margin-top:5px;max-width:230px}
 .town-menu{grid-template-columns:1fr}.town-menu button{padding:17px;min-height:84px;gap:6px}.menu-progress{font-size:.76rem;gap:6px;padding:14px 10px}
 .next-stop{padding:20px}.next-stop h3{font-size:1.4rem}.explore-links>.btn{width:100%}
}
@media(max-height:550px) and (orientation:landscape){
 .drive-stats,.has-route .drive-stats,.has-nearby .drive-stats{top:180px;left:16px;right:auto}
 .road-chip{display:block;top:18px;max-width:calc(100vw - 360px)}
 .route-banner,.interaction{top:76px;left:50%;right:auto;transform:translateX(-50%);width:290px;max-width:calc(100vw - 330px);flex-direction:row;align-items:center;padding:10px 12px}
 .has-nearby .route-banner{top:160px;left:auto;right:16px;transform:none}
 .interaction .btn{width:auto}.route-banner .route-trail{display:none}
 .minimap-wrap{top:76px;width:120px}.minimap-wrap canvas{width:114px;height:78px}
 #mobile-controls{bottom:calc(80px + env(safe-area-inset-bottom))}#mobile-controls .drive-brake{margin-bottom:0}
 #notifications{bottom:calc(77px + env(safe-area-inset-bottom));width:min(340px,calc(100vw - 310px))}
}
@media(max-height:400px) and (orientation:landscape){.has-route .minimap-wrap{display:none}}
#panel-title:focus{outline:none}
.map-boundary-notice{position:fixed;top:78px;left:50%;transform:translateX(-50%);width:360px;max-width:calc(100vw - 32px);padding:13px 18px;border:1px solid #b9e1dc99;border-radius:16px;background:#173d43ef;color:#fff9e8;box-shadow:0 6px 24px #163f3c20;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;z-index:6;text-align:center}
.map-boundary-notice strong{display:block;font-size:.9rem;line-height:1.35}
.map-boundary-notice span{display:block;margin-top:4px;font-size:.77rem;line-height:1.4;color:#e1efdf}
.map-boundary-notice[data-phase="approach"],.map-boundary-notice[data-phase="limit"]{opacity:1;visibility:visible}
.at-map-boundary #route-slot,.at-map-boundary #interaction-slot{visibility:hidden}
body:not(.playing) .map-boundary-notice,body:has(dialog[open]) .map-boundary-notice{opacity:0;visibility:hidden}
@media(max-width:760px),(pointer:coarse),(any-pointer:coarse){.map-boundary-notice{top:calc(111px + env(safe-area-inset-top));width:calc(100vw - 32px);max-width:400px}.at-map-boundary .minimap-wrap{visibility:hidden}}
@media(max-height:550px) and (orientation:landscape){.map-boundary-notice{top:76px;width:290px;max-width:calc(100vw - 300px);padding:10px 12px}.map-boundary-notice strong{font-size:.8rem}.map-boundary-notice span{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.map-boundary-notice{transition:none}}