/* City challenge layer; retain the original paper-and-road visual language. */
body[data-mode="city"] .intro{padding:24px 0 22px}
body[data-mode="city"] .intro h1{font-size:32px;margin-top:8px}
body[data-mode="city"] .eyebrow{letter-spacing:.8px}
.city-route{margin:0 0 24px;padding:15px 0 17px;border-block:1px solid var(--line)}
.city-route-heading{display:flex;justify-content:space-between;font-size:11px;color:#627361;margin-bottom:14px}
#cityProgress{font-variant-numeric:tabular-nums;color:var(--green);font-weight:600}
.city-stations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative}
.city-stations::before{content:"";position:absolute;top:12px;left:12px;right:12px;height:2px;background:#d8dfcf;z-index:-1}
.city-station{background:var(--paper);text-align:left;padding:0 8px 0 0;min-width:0}
.city-station .station-number{display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;border-radius:50%;background:#e0e6d8;color:#556d55;font-size:11px;font-weight:600;border:2px solid var(--paper)}
.city-station[aria-current="step"] .station-number{background:var(--green);color:white;outline:2px solid #94ac8d}
.city-station strong{font-size:11px;font-weight:500;margin-left:5px;white-space:nowrap}
.city-station small{display:block;font-size:10px;color:#65755f;margin:7px 0 0 32px;letter-spacing:2px}
.city-station:disabled{opacity:.48}.city-station:disabled small{letter-spacing:0;color:#7b8274}
.city-station:not(:disabled):hover strong{text-decoration:underline;text-underline-offset:3px}
.city-event{display:flex;align-items:center;gap:13px;min-height:63px;padding:12px 17px;background:#e8ecd9;border-left:3px solid #819769;margin-bottom:10px;border-radius:0 9px 9px 0}
.city-event-mark{font-size:26px;color:#6a8054;min-width:24px;text-align:center}
.city-event strong{font-size:12px;font-weight:600}.city-event p{font-size:11px;color:#6e7a60;line-height:1.65;margin-top:4px}
.city-forecast{display:flex;gap:7px;margin-bottom:14px}
.forecast-stop{flex:1;min-width:0;padding:8px 10px;border:1px solid #dfe3d6;border-radius:7px;font-size:10px;color:#7a8371;line-height:1.7}
.forecast-stop.current{border-color:#7b9574;background:#f9fbf1;color:#37593e}.forecast-stop.done{border-color:#becdb4}
.forecast-stop b{display:block;font-size:11px;font-weight:500}.forecast-stop span{white-space:nowrap}.forecast-stop small{display:block;font-size:9px}
.city-card{background:#fffdf7;border:1px solid #c9d2be;border-radius:16px;padding:22px;order:0;box-shadow:0 4px 12px #314a3410}
.city-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#748268}
.city-link{background:none;color:#708166;font-size:10px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.city-card h2{font-size:22px;line-height:1.4;margin:12px 0 7px;letter-spacing:.3px}
.city-brief{font-size:11px;line-height:1.85;color:#72816a}
.city-target{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding:10px 0;border-block:1px solid #e2e6d9;font-size:10px;color:#748169}
.city-target strong{font-size:17px;font-weight:600;color:var(--green);margin-left:5px}.city-target b{font-size:11px;font-weight:500;color:#7a713d}
.city-budget{display:flex;gap:10px;align-items:center;margin:17px 0 12px;font-size:11px;color:#65755d}.city-budget>strong{margin-left:auto;font-variant-numeric:tabular-nums;color:#48633f;font-size:12px}
#cityBudgetTokens{display:flex;gap:4px}.budget-token{display:inline-block;width:15px;height:15px;border:1px solid #b79b55;border-radius:50%;background:#edcf83;box-shadow:inset 0 0 0 3px #f7e7b3}.budget-token.spent{background:#e3e6da;border-color:#d0d7c5;box-shadow:none}
.city-tool{padding:11px 0;border-top:1px solid #e6e9dc;display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center}
.city-tool h3{font-size:12px;font-weight:600;margin:0}.city-tool h3 span{font-size:10px;color:#8a7444;font-weight:400;margin-left:5px}.city-tool p{font-size:10px;color:#7e8973;line-height:1.7;margin-top:4px}.city-tool small{font-size:9px;color:#607653;display:block;margin-top:3px}
.tool-stepper{display:flex;align-items:center;gap:7px}.tool-stepper button{width:28px;height:28px;background:#eaf0e2;border:1px solid #bfcdb3;border-radius:6px;color:#416537;font-size:17px}.tool-stepper button:disabled{opacity:.35}.tool-stepper output{font-size:12px;font-variant-numeric:tabular-nums;min-width:10px;text-align:center}
.city-no-tools{font-size:11px;line-height:1.85;padding:10px 0;color:#778669}
.city-gate-row{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #e2e6d8;padding:13px 0 0;margin-top:4px}
.city-gate-row strong{font-size:12px;font-weight:500}.city-gate-row small{display:block;font-size:10px;color:#7d8872;line-height:1.6;margin-top:4px}
.city-card .primary-button{margin-top:18px;font-size:12px}.city-card .primary-button:focus-visible{outline-offset:3px}
.city-hint{margin-top:13px;padding-top:0;border-top:0}.city-hint summary{font-size:10px;color:#7d896f}.city-hint p{font-size:11px;line-height:1.8;color:#77876b;margin-top:8px}
.city-save-notice{font-size:9px;color:#8e9780;line-height:1.7;margin-top:12px}
.city-wave-result{padding:13px;background:#eaf1e1;border:1px solid #d1dfc4;border-radius:9px;margin-top:15px;color:#47663c;font-size:11px;line-height:1.8}
.city-wave-result.failed{background:#faede2;border-color:#e8ccb4;color:#97643d}
.city-wave-result strong{display:block;font-size:14px;margin-bottom:4px}.city-wave-result p{font-size:10px;margin-top:5px}
.city-final{margin-top:15px;border-top:1px solid #e3e7d9;padding-top:13px}.city-stars{font-size:34px;letter-spacing:7px;color:#c18a25;line-height:1.2}.city-final h3{font-size:16px;margin:10px 0 12px;font-weight:600}
.city-star-rules{font-size:10px;line-height:2;color:#6f7b61}.city-star-rules .earned{color:#355f3d}.city-final table{border-collapse:collapse;width:100%;font-size:10px;margin-top:12px;text-align:left;font-variant-numeric:tabular-nums}.city-final caption{font-size:10px;color:#7c886e;text-align:left;margin-bottom:6px}.city-final th{font-weight:400;color:#849076;padding:5px 0}.city-final td{border-top:1px solid #e6eadf;padding:7px 0}.city-final td:nth-child(n+2),.city-final th:nth-child(n+2){text-align:right}.city-final tr.failed td{color:#a16b44}.city-final>p{font-size:10px;line-height:1.8;color:#6d7f5e;margin-top:11px}
body[data-mode="city"] .commute-card{order:1;padding:19px 22px}
body[data-mode="city"] .commute-value{margin:12px 0 8px}
body[data-mode="city"] .commute-value strong{font-size:46px}
body[data-mode="city"] .history-wrap{height:44px}
body[data-mode="city"] .field-note{order:2}
body[data-mode="city"] .map-panel{border-top:3px solid #82996e}
body[data-mode="city"] .network path.improved{stroke:#55876c;stroke-width:30px}
body[data-mode="city"] .road-shoulders path.enhanced{stroke:#ddbb6c;stroke-width:44px}
body[data-mode="city"] .map-panel.planning .history-wrap{visibility:hidden}
body[data-mode="city"] .commute-card.planning .history-wrap{visibility:hidden}
.city-help{background:#e8eedf;border-radius:9px;padding:13px;margin:15px 0}.city-help p{font-size:11px;line-height:1.8}
@media(min-width:1000px){body[data-mode="city"] .game-layout{grid-template-columns:minmax(0,1fr) 350px}}
@media(max-width:1100px){.city-station strong{font-size:10px}.city-station .station-number{width:22px;height:22px}.city-station small{margin-left:27px}.city-stations{gap:5px}.mode-tabs button{padding-inline:16px}}
@media(max-width:900px){body[data-mode="city"] .control-column{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}.city-card{grid-row:1 / span 2}.city-brief{font-size:12px}.city-route{margin-bottom:18px}.city-station strong{display:block;margin:7px 0 0;white-space:normal}.city-station small{margin-left:0}.city-stations::before{top:10px}.city-card{padding:20px}.city-event{margin-bottom:8px}}
@media(max-width:580px){body[data-mode="city"] .intro h1{font-size:25px}.city-stations{grid-template-columns:repeat(3,1fr);gap:16px 8px}.city-stations::before{display:none}.city-station strong{display:inline;margin-left:4px}.city-station small{margin:5px 0 0 28px}.city-route-heading{font-size:10px}.city-route{padding-block:13px}.city-forecast{gap:5px}.forecast-stop{padding:7px;font-size:9px}.forecast-stop b{font-size:10px}.forecast-stop small{font-size:8px}.city-event{padding:10px 12px;gap:9px}.city-event p{font-size:10px}body[data-mode="city"] .control-column{grid-template-columns:1fr}.city-card{grid-row:auto}.city-card h2{font-size:22px}.mode-tabs button{padding-inline:10px}.city-save-notice{font-size:10px}}

/* Continuous commute: road semantics and functional, interruptible motion. */
:root{--ease-feedback:cubic-bezier(.23,1,.32,1)}
.road-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0 0 20px;margin-bottom:4px}
.road-context>div{position:relative;padding-left:28px}.road-context strong{font-size:11px;font-weight:600;color:#506652}.road-context p{font-size:10px;line-height:1.8;color:#7b8773;margin-top:5px}
.road-swatch{position:absolute;left:0;top:5px;width:18px;border-radius:3px;background:#627987}.road-swatch.avenue{height:8px}.road-swatch.narrow{height:4px;top:7px;background:#8f8468}.road-swatch.connector{height:3px;top:8px;background:#a193bd}
.roads .avenue{stroke:#677b86;stroke-width:32px}.roads .narrow{stroke-width:18px}.roads .connector{stroke-width:16px}
.road-shoulders .avenue{stroke-width:44px}.road-shoulders .narrow{stroke-width:29px}.road-shoulders .connector{stroke-width:25px}
body[data-mode="city"] .network .avenue.improved{stroke-width:35px;stroke:#587c88}
body[data-mode="city"] .network .narrow.improved{stroke-width:23px}
body[data-mode="city"] .road-shoulders .avenue.enhanced{stroke-width:48px}
body[data-mode="city"] .road-shoulders .narrow.enhanced{stroke-width:36px}
.roads .draining-road{stroke:#9b97b4;stroke-width:16px;opacity:.7}
.road-kind{font-size:10px;font-weight:500;fill:#6f7e68;text-anchor:middle}
.route-meter i{transform-origin:left center;transition:transform 120ms linear}
.switch i{transition:transform 180ms var(--ease-feedback)}.switch[aria-checked="true"] i{left:3px;transform:translateX(18px)}
.city-forecast{display:block;padding:13px 16px 11px;border:1px solid #d8e1ce;background:#f9faf2;border-radius:10px}
.live-forecast-heading{display:flex;justify-content:space-between;gap:10px;color:#617659;font-size:10px}.live-forecast-heading strong{font-size:11px;font-weight:500}
.city-forecast svg{display:block;width:100%;height:66px;margin-top:8px;overflow:visible}.live-forecast-line{fill:none;stroke:#6d9476;stroke-width:2}.live-forecast-area{fill:#dbe7d880}
#liveTimeCursor{transition:transform 100ms linear}#liveTimeCursor line{stroke:#bd8359;stroke-width:1.5;stroke-dasharray:3 3}#liveTimeCursor circle{fill:#bd8359}
.live-forecast-labels{display:flex;justify-content:space-between;font-size:9px;color:#829176;gap:10px;margin-top:4px}.city-forecast>p{font-size:9px;color:#8c977f;margin-top:7px}
.live-coverage{margin:14px 0 17px}.live-coverage>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#697b5f}.live-coverage strong{font-size:16px;font-weight:600;color:#41663c;font-variant-numeric:tabular-nums}.live-coverage>p{font-size:9px;color:#8b967d;margin-top:7px;line-height:1.7}
.live-progress-track{height:5px;background:#e6eadc;border-radius:4px;overflow:hidden;margin-top:9px}.live-progress-track i{display:block;height:100%;width:100%;background:#82a176;transform-origin:left center;transform:scaleX(0);transition:transform 100ms linear}
.live-construction{padding:10px 12px;background:#f6efd9;border-radius:7px;margin-top:12px}.live-construction p{font-size:10px;color:#8f7541}.live-construction .live-progress-track i{background:#c8a15e}
.city-wave-result{font-size:10px;line-height:1.8}.city-target{flex-wrap:wrap}.city-card .city-brief{min-height:0}
@media(max-width:900px){.road-context{gap:12px}.road-context strong{font-size:10px}.road-context p{font-size:9px}.road-context>div{padding-left:24px}}
@media(max-width:580px){.road-context{grid-template-columns:1fr;gap:9px;padding-bottom:17px}.road-context>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}.road-context p{margin:0}.road-context strong{font-size:10px}.road-context .road-swatch{top:4px}.road-context .road-swatch.narrow,.road-context .road-swatch.connector{top:6px}.city-forecast svg{height:58px}.live-forecast-labels{font-size:8px}}
@media(prefers-reduced-motion:reduce){#cars{opacity:0}#liveTimeCursor,.live-progress-track i,.route-meter i,.switch i{transition:none}}
.live-event-notes{display:flex;gap:9px;margin-top:10px}.live-event-note{flex:1;min-width:0;border-top:1px solid #d8e3cf;padding-top:8px;font-size:9px;line-height:1.8;color:#73866a}.live-event-note b,.live-event-note span,.live-event-note small{display:block}.live-event-note b{font-size:10px;font-weight:500;color:#526f50}.live-event-note small{font-size:9px}.live-event-note strong{display:block;font-size:9px;color:#9a6f36;font-weight:600}.live-event-note.mandatory{border-top-color:#c5a66b}
@media(max-width:580px){.live-event-notes{gap:7px}.live-event-note{font-size:8px}.live-event-note b{font-size:9px}.live-event-note small,.live-event-note strong{font-size:8px}}