/* Keep the map and its transport together in both reading and visual order. */
.adventure-shell{grid-template-areas:"map story" "playback playback"}
.map-pane{grid-area:map}
.playback{grid-area:playback;min-width:0}
.story-panel{grid-area:story}
.preview-note-short{display:none}
.map-topline .icon-button{width:44px;height:44px;flex-shrink:0}
.timeline-ticks button{border-radius:8px}
.timeline-ticks button.is-current{color:var(--green);background:#e8eddf}

/* The range has a generous touch target around its narrow illustrated track. */
#time-slider{height:32px;min-height:32px;padding:0;margin:0;background:transparent;touch-action:pan-y}
#time-slider::-webkit-slider-runnable-track{height:5px;border-radius:10px;background:linear-gradient(to right,var(--coral) var(--progress,0%),#e5e6d9 var(--progress,0%))}
#time-slider::-webkit-slider-thumb{margin-top:-7px}
#time-slider::-moz-range-track{height:5px;border-radius:10px;background:linear-gradient(to right,var(--coral) var(--progress,0%),#e5e6d9 var(--progress,0%))}

/* Native dialog supplies focus containment; viewport units work on iOS Safari. */
body.route-open{position:fixed;left:0;right:0;overflow:hidden;overscroll-behavior:none}
.route-modal{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px);background:#edf1e5;color:var(--ink);overflow:hidden;overscroll-behavior:contain}
.route-modal[open]{display:flex;flex-direction:column}
.route-modal::backdrop{background:var(--paper)}
.route-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;padding:9px 16px;background:var(--paper);border-bottom:1px solid #d9dfd0}
.route-modal-header .eyebrow{font-size:8px;letter-spacing:1.4px}
.route-modal-header h2{font-size:23px;letter-spacing:-.7px;margin:1px 0 0}
.route-modal-actions{display:flex;align-items:center;gap:12px}
.route-modal-actions .text-button{font-size:11px;min-height:44px;white-space:nowrap}
.route-modal-actions .icon-button{width:44px;height:44px;font-size:28px;flex-shrink:0}
#route-stage{display:flex;flex:1;min-height:0;min-width:0}
.route-modal .adventure-shell{flex:1;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"map" "playback";border:0;border-radius:0;box-shadow:none}
.route-modal .story-panel,.route-modal #map-zoom,.route-modal .map-bottom{display:none}
.route-modal .map-pane{min-height:0;overflow:hidden;border:0}
.route-modal .map-topline{position:static;min-height:31px;flex-shrink:0;padding:6px 12px 0;justify-content:center}
.route-modal .legend{font-size:9px;padding:5px 12px}
.route-modal #map-container{min-height:0;width:100%;height:100%;flex:1;overflow:hidden}
.route-modal #map-container>svg{width:100%;height:100%;max-height:none;padding:0;overflow:hidden;object-fit:contain}
.route-modal .playback{padding:10px max(16px,calc((100% - 600px)/2)) calc(8px + env(safe-area-inset-bottom,0px));background:var(--white);border-radius:22px 22px 0 0;box-shadow:0 -4px 18px #3d543508;z-index:1}
.route-modal .playback-top{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.route-modal .clock{justify-content:space-between;gap:7px;flex-wrap:nowrap}
.route-modal .clock .live-dot{display:none}
.route-modal .clock>span:nth-child(2){font-size:24px;line-height:1.2}
.route-modal .clock small{display:block;font-size:8px;letter-spacing:1px;margin:0}
.route-modal .playback-buttons{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);gap:8px;margin:0}
.route-modal .playback-buttons .button{height:44px;min-height:44px;font-size:12px;padding:8px 12px;margin:0;gap:9px;transform:none}
.route-modal .playback-buttons .icon-button,.route-modal .speed{height:44px;width:44px;font-size:23px}
.route-modal .speed{font-size:12px;border:1px solid var(--line);border-radius:50%}
.route-modal .mute-music svg{width:19px;height:19px}
.route-modal .scrubber{padding:0;margin:0}
.route-modal .timeline-ticks{height:44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:0 0 7px}
.route-modal .timeline-ticks button{position:static;transform:none!important;left:auto!important;min-width:0;min-height:44px;font-size:9px;text-align:center!important;padding:3px 0;line-height:1.5}
.route-modal .timeline-ticks button strong{font-size:9px}
.route-modal .timeline-ticks button:before{display:none}
.route-modal .character-status{grid-template-columns:1fr;gap:2px;padding:5px 9px;border-radius:10px}
.route-modal .character-status>div{gap:7px;min-height:23px}
.route-modal .character-status strong{font-size:11px;line-height:1.3;display:block}
.route-modal .character-status strong>span{display:inline}
.route-modal .character-status p{display:none}
.route-modal .status-avatar,.route-modal .status-avatar svg{width:23px!important;height:23px!important}
.route-modal .simulation-note{font-size:9px;line-height:1.4;margin:6px 0 0}
.route-modal .preview-note-full{display:none}
.route-modal .preview-note-short{display:inline}

@media(max-width:800px){
 .adventure-shell{grid-template-areas:"map" "playback" "story"}
 .story-panel{border-top:1px solid var(--line)}
 .map-topline{position:static;padding:8px 12px 0;min-height:52px}
 .legend{font-size:9px;padding:8px 10px;gap:12px}
 .legend i{width:16px}
 #map-container{height:clamp(240px,46svh,380px);flex:none}
 #map-container>svg{height:100%;max-height:none;padding-top:0}
 .map-bottom{display:none}
 .playback{padding:12px 14px;background:var(--white)}
 .playback-top{display:flex;flex-direction:column;align-items:stretch;gap:7px}
 .clock{justify-content:space-between;gap:7px;flex-wrap:nowrap}
 .clock .live-dot{display:none}
 .clock>span:nth-child(2){font-size:24px;line-height:1.2}
 .clock small{display:block;font-size:8px;letter-spacing:1px;margin:0}
 .playback-buttons{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,44px);gap:8px;margin:0}
 .playback-buttons .button{height:44px;min-height:44px;font-size:12px;padding:8px 12px;gap:9px;transform:none}
 .playback-buttons .icon-button,.speed{height:44px;width:44px;font-size:23px}
 .speed{font-size:12px;border:1px solid var(--line);border-radius:50%}
 .playback-buttons .mute-music{height:44px;width:44px}
 .mute-music svg{width:19px;height:19px}
 .scrubber{padding:0;margin:0}
 .timeline-ticks{height:44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin:0 0 7px}
 .timeline-ticks button{position:static;transform:none!important;left:auto!important;min-width:0;min-height:44px;font-size:9px;text-align:center!important;padding:3px 0;line-height:1.5}
 .timeline-ticks button strong{font-size:9px}
 .timeline-ticks button:before{display:none}
 .character-status{grid-template-columns:1fr;gap:2px;padding:5px 9px;border-radius:10px}
 .character-status>div{gap:7px;min-height:23px}
 .character-status strong{font-size:11px;line-height:1.3;display:block}
 .character-status strong>span{display:inline}
 .character-status p{display:none}
 .status-avatar,.status-avatar svg{width:23px!important;height:23px!important}
 .simulation-note{font-size:9px;line-height:1.4;margin-top:6px}
 .preview-note-full{display:none}
 .preview-note-short{display:inline}
 .stop-tabs button{min-height:44px}
 .share-button{min-height:44px!important}
}

@media(max-width:540px){
 .hero{padding:24px 0 20px;position:relative}
 .hero h1{font-size:38px;margin:12px 0 18px}
 .hero-art{height:175px;max-width:300px;margin-top:15px}
 .hero-note{display:none}
 .hero-blob{inset:10px 8px 10px}
 .hero-caption{bottom:-3px;font-size:7px}
 .hero-ground{bottom:22px}
 #hero-runner{bottom:15px}
 #hero-crew{bottom:17px}
 .hero-actions{width:100%;gap:8px;margin-top:17px}
 .hero-actions .button{min-height:48px;font-size:13px;padding-inline:20px}
 .hero-actions .text-button{min-height:44px;font-size:11px}
 .route-modal-header{padding:7px 12px}
 .route-modal-header h2{font-size:21px}
 .route-modal-actions{gap:6px}
 .route-modal-actions .text-button{font-size:10px}
 .route-modal .playback{padding-inline:12px}
 .section-heading>p{font-size:12px}
 .stop-card-actions{flex-wrap:wrap;gap:8px 16px}
 .stop-card-actions a,.stop-card-actions button{min-height:44px;display:inline-flex;align-items:center}
}

/* Landscape phones: the city and controls share a row, with no clipped map. */
@media(min-width:480px) and (max-height:600px) and (orientation:landscape){
 .route-modal .adventure-shell{grid-template-columns:minmax(0,1fr) minmax(300px,38%);grid-template-rows:minmax(0,1fr);grid-template-areas:"map playback"}
 .route-modal .playback{padding:10px 12px calc(8px + env(safe-area-inset-bottom,0px));border-radius:0;border-top:0;border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
 .route-modal .map-topline{min-height:26px;padding-top:3px}
 .route-modal .legend{font-size:8px;padding:3px 8px}
 .route-modal-header{padding-block:4px}
}

@media(max-height:650px) and (max-width:599px){
 .route-modal .character-status{display:none}
 .route-modal-header{padding-block:4px}
 .route-modal .playback{padding-top:7px}
}

@media print{.route-modal{display:none!important}}

/* Portrait phones get a north-up map; only its viewport changes, never its
   geography. The SVG uses xMidYMid meet, so no screen shape can stretch it. */
@media(max-width:800px) and (orientation:portrait){
 #map-container[data-layout="geographic"]{height:clamp(470px,75svh,720px);background:#d4e7e2}
 .route-modal #map-container[data-layout="geographic"]{height:100%;flex:1;min-height:0}
 #map-container[data-layout="geographic"]>svg{width:100%;height:100%;padding:0;max-height:none;overflow:hidden}
 .map-camera-controls:not([hidden]){display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:8px;padding:3px 12px 7px;background:#edf1e5}
 .map-camera-controls>span{font-size:10px;color:#71846c;white-space:nowrap}
 .map-camera-buttons{display:flex;gap:3px;padding:3px;background:#e2e8d9;border-radius:12px}
 .map-camera-buttons button{border:0;min-height:44px;padding:7px 13px;border-radius:9px;color:#6e7d64;background:none;font-family:inherit;font-size:11px;font-weight:750;line-height:1.2;white-space:nowrap}
 .map-camera-buttons button[aria-pressed="true"]{background:#fffcf2;color:#426340;box-shadow:0 1px 3px #48643a15}
 .map-camera-buttons button:focus-visible{outline:2px solid #426340;outline-offset:1px}
 .route-modal .map-topline{min-height:27px;padding-top:3px}
 .route-modal .legend{font-size:8px;padding:4px 10px;border:0;background:transparent}
 .route-modal-header{padding-block:5px}
 .route-modal-header .eyebrow{display:none}
 .route-modal-header h2{font-size:20px}
 .route-modal .playback{padding-top:8px}
 .route-modal .playback-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}
 .route-modal .clock{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
 .route-modal .clock>span:nth-child(2){font-size:23px}
 .route-modal .clock small{font-size:8px;letter-spacing:.5px}
 .route-modal .playback-buttons{display:flex;gap:6px}
 .route-modal .playback-buttons .button{width:44px;min-width:44px;padding:0;border-radius:50%;font-size:18px}
 .route-modal #play-label{display:none}
 .route-modal .character-status{gap:0;padding:4px 8px}
 .route-modal .character-status>div{min-height:21px}
 .route-modal .simulation-note{font-size:8px;margin-top:4px}
 .route-modal .timeline-ticks{margin-bottom:4px}
}

@media(max-width:360px) and (orientation:portrait){
 .route-modal .clock>span:nth-child(2){font-size:20px}
 .route-modal .playback-buttons{gap:4px}
}

.map-attribution{display:none;flex-shrink:0;font:9px/1.4 Arial,sans-serif;color:#6e857a;padding:3px 10px;text-align:right;background:#d4e7e2}
@media(max-width:800px) and (orientation:portrait){.map-attribution{display:block}}