.city-play { gap: 16px; }
.dispatch-nav { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.dispatch-nav label { font-weight:800; }
.dispatch-nav select { flex:1; min-width:150px; }
.city-play select { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px; min-height:44px; padding:8px 10px; font:800 15px Nunito,sans-serif; }
.city-play button:focus-visible,.city-play input:focus-visible,.city-play select:focus-visible,.timeline-scroll:focus-visible { outline:3px solid var(--aqua-deep); outline-offset:3px; }
#freeBtn[aria-pressed="true"] { background:var(--violet-soft); border-color:var(--violet); }
.dispatch-controls { display:flex; flex-wrap:wrap; gap:12px; }
.interval-control { flex:1 1 240px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:12px 16px; border-left:5px solid var(--aqua); background:#edf9fa; border-radius:12px; }
.interval-control.b { border-color:var(--coral); background:#fff1f4; }
.interval-control small { width:100%; color:var(--muted); }
.interval-control select:disabled { opacity:1; color:var(--ink); background:#f4f4f4; }
.city-scene { border:1px solid #c8e6d2; border-radius:20px; overflow:hidden; background:linear-gradient(#e6f7fb 0 95px,#e8f3e9 95px); }
.city-sky { display:flex; align-items:flex-end; gap:14px; height:90px; padding:10px 8%; overflow:hidden; color:#9abbb5; }
.city-sky span { font:900 76px/1 sans-serif; color:#b7cecb; }
.city-sky span:nth-child(2n) { font-size:56px; color:#c7c4db; }
.city-station { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; padding:12px 18px; background:#ffffffdb; border-block:1px solid #c8e6d2; }
.city-station strong { font:900 12px Nunito,sans-serif; letter-spacing:.06em; }
.city-station span { font-size:14px; }
.city-scene.together .city-station { background:#fff0b6; }
.vehicle-lane { padding:12px 18px 16px; }
.lane-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; margin-bottom:8px; font-size:13px; }
.lane-caption strong { color:#20798b; }
.vehicle-lane.b .lane-caption strong { color:#a74765; }
.road { position:relative; height:55px; margin-right:84px; border-bottom:3px dashed #a6b7b3; }
.bus { color:#61becb; position:absolute; width:80px; top:0; transition:left .25s linear; }
.vehicle-lane.b .bus { color:#e18da6; }
.bus svg { display:block; width:100%; }
.bus.departing { filter:drop-shadow(0 0 5px #ffe08c); }
.time-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.time-controls .start { min-height:44px; }
.time-controls label { display:flex; align-items:center; gap:8px; margin-left:auto; }
.time-scrub { display:block; background:#f6f5f8; border-radius:12px; padding:12px 16px; }
.time-scrub>span { display:flex; justify-content:space-between; font-weight:800; }
.time-scrub input { display:block; width:100%; margin:12px 0 0; min-height:28px; accent-color:var(--aqua-deep); }
.timetable { min-width:0; }
.timetable-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.timetable h2 { font:900 20px Nunito,sans-serif; margin:0; }
.timetable-heading>span,#timelineHint { font-size:13px; color:var(--muted); }
#timelineHint { margin:8px 0; }
.timeline-scroll { overflow-x:auto; padding:6px 3px 12px; border:1px solid var(--line); border-radius:12px; background:#fafaf8; }
#timeline { display:flex; gap:4px; width:max-content; padding:2px 5px; }
.minute { display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 44px; width:44px; min-height:115px; background:#fff; border:1px solid #e0e2df; color:var(--muted); border-radius:8px; padding:8px 2px; }
.minute.observed { color:var(--ink); background:#f1f7f3; }
.minute.current { outline:2px solid #8178bd; outline-offset:-2px; }
.departure { width:15px; height:15px; border:1px dashed #c3c7c6; border-radius:50%; }
.departure.a.on { background:var(--aqua); border:2px solid #227c89; }
.departure.b.on { background:var(--coral); border:2px solid #9b4261; }
.minute.common { background:#fff2c2; border-color:#d5a642; }
.flag { visibility:hidden; height:16px; line-height:16px; font-size:18px; }
.minute.flagged .flag { visibility:visible; color:#5b509b; }
.minute.confirmed { box-shadow:inset 0 0 0 2px #46a06d; }
.discovery-log:empty { display:none; }
.discovery-log { background:var(--green-soft); color:#245d3e; border-radius:12px; padding:14px; font-weight:700; }
.city-play .bottom { align-items:stretch; }
.city-play .feedback { min-width:0; }
@media(max-width:620px){.city-play{padding:12px 10px 20px}.dispatch-nav label{width:100%}.time-controls>*{flex:1 1 120px}.time-controls label{margin-left:0}.city-station{padding:10px}.vehicle-lane{padding:10px}.city-play .bottom{flex-direction:column}.city-play .next{width:100%}.city-sky{height:66px}.city-scene{background:linear-gradient(#e6f7fb 0 66px,#e8f3e9 66px)}}
@media(prefers-reduced-motion:reduce){.bus{transition:none}}
.city-sky { padding:0; }
.city-sky svg { width:100%; height:100%; display:block; }
