.transit-map-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,260px);gap:18px;align-items:stretch;color:#293f43}
.transit-map-card{min-width:0;padding:12px;background:#f4e7c6;border:2px solid #ba9360;box-shadow:4px 4px 0 #132c2c66}
.transit-map-viewport{position:relative;width:100%;aspect-ratio:1586/992;overflow:hidden;background:#f4e7c6}
.transit-map-scroller{width:100%;height:100%;overflow:hidden}
.transit-map-canvas{position:relative;width:100%;height:100%;aspect-ratio:1586/992}
.transit-map-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill}
.transit-stop[data-stop-id="richmond"] .stop-label{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.transit-stop-layer{position:absolute;inset:0}
.transit-stop{position:absolute;display:block;width:24px;height:24px;min-width:0;padding:0;border:0;background:transparent;color:#293f43;transform:translate(-50%,-50%);z-index:1;transition:filter .12s,transform .12s;white-space:nowrap}
.transit-stop:hover:not(:disabled){background:transparent;transform:translate(-50%,-50%);filter:brightness(1.06);z-index:4}
.transit-stop:focus-visible{outline:3px solid #efc77d;outline-offset:3px;z-index:5}
.stop-marker{position:absolute;left:50%;top:50%;width:18px;height:18px;border:3px solid #293f43;background:#efc77d;box-shadow:0 0 0 3px #f4e7c6,0 0 0 5px #293f43;transform:translate(-50%,-50%) rotate(45deg)}
.transit-stop.is-future .stop-marker{background:#f4e7c6;border-style:dashed;border-color:#718379;box-shadow:0 0 0 3px #f4e7c6,0 0 0 5px #718379}
.transit-stop.is-current .stop-marker{background:#efc77d;box-shadow:0 0 0 3px #f4e7c6,0 0 0 6px #293f43,0 0 0 9px #efc77d}
.transit-stop.is-selected .stop-marker{width:22px;height:22px;background:#46716c;border-color:#293f43;box-shadow:0 0 0 4px #f4e7c6,0 0 0 7px #293f43}
.stop-label{position:absolute;left:50%;top:calc(100% + 7px);display:flex;flex-direction:column;gap:2px;width:max-content;max-width:145px;padding:4px 7px;border:1px solid #ba9360;background:#fff7e4;color:#293f43;text-align:left;box-shadow:2px 2px 0 #293f4338;transform:translateX(-50%);white-space:normal}
.stop-name{font:700 12px/1.12 system-ui,sans-serif}
.stop-game{font:600 10px/1.15 system-ui,sans-serif;color:#46665b}
.transit-stop.is-selected .stop-label{background:#293f43;color:#f4e7c6;border-color:#efc77d;z-index:4}
.transit-stop.is-selected .stop-game{color:#d4e0cd}
.current-tag{position:absolute;top:-22px;left:50%;padding:2px 4px;background:#293f43;color:#f4e7c6;font:700 8px/1 system-ui,sans-serif;letter-spacing:.7px;transform:translateX(-50%)}
.transit-stop[data-stop-id="richmond"] .current-tag{top:calc(100% + 12px)}
.transit-stop[data-stop-id="hill"] .stop-label{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.transit-stop[data-stop-id="kensington"] .stop-label{left:auto;right:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.transit-stop[data-stop-id="camden"] .stop-label{top:auto;bottom:calc(100% + 7px);left:calc(100% + 9px);transform:none}
.transit-stop[data-stop-id="bloomsbury"] .stop-label{top:auto;bottom:calc(100% + 7px);left:calc(100% + 9px);right:auto;transform:none}
.transit-stop[data-stop-id="home"] .stop-label{left:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.transit-stop[data-stop-id="westminster"] .stop-label{left:auto;right:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.transit-stop[data-stop-id="southbank"] .stop-label{left:auto;right:calc(100% + 9px);top:50%;transform:translateY(-50%)}
.transit-stop[data-stop-id="tower-bridge"] .stop-label{left:50%;right:auto;top:calc(100% + 12px);bottom:auto;transform:translateX(-50%);max-width:120px}
.transit-stop[data-stop-id="canary"] .stop-label{left:auto;right:calc(100% + 9px);top:50%;bottom:auto;transform:translateY(-50%);max-width:128px}
.transit-map-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:10px 4px 0;color:#46615b;font:12px/1.2 system-ui,sans-serif}
.transit-map-legend span{display:flex;align-items:center;gap:6px}
.legend-dot{width:11px;height:11px;display:inline-block;border:2px solid #293f43;border-radius:0;transform:rotate(45deg)}
.playable-dot{background:#efc77d}.current-dot{background:#46716c}.future-dot{background:#f4e7c6;border-style:dashed;border-color:#718379}
.transit-destination{display:flex;flex-direction:column;min-height:100%;padding:16px;background:#203b3b;border:2px solid #ba9360;color:#f4e7c6;box-shadow:4px 4px 0 #132c2c66}
.transit-map-kicker{margin:0 0 8px;color:#efc77d;font:700 10px/1.4 system-ui,sans-serif;letter-spacing:1.2px}
.transit-destination h3{font:normal 25px/1.1 Georgia,serif;color:#f4e7c6;margin:0 0 6px}
.transit-map-subtitle{margin:0;color:#efc77d;font-size:14px}
.transit-map-description{margin:15px 0;font-size:14px;line-height:1.45;color:#f1e5c7}
.transit-map-description[data-map-games]{font-size:12px;line-height:1.55;margin:8px 0 14px}
.transit-map-status{margin:auto 0 12px;padding-top:12px;border-top:1px solid #718379;color:#d1dac5;font:13px/1.4 system-ui,sans-serif}
.transit-map-actions{display:flex;gap:8px}
.transit-map-actions button{flex:1;min-height:42px;padding:8px;border:2px solid #ba9360;border-radius:2px;font:700 13px system-ui,sans-serif}
.transit-map-actions .transit-cancel{background:#294746;color:#f4e7c6}
.transit-map-actions .transit-travel{background:#efc77d;color:#293f43}
.transit-map-actions button:disabled{opacity:.58}
.transit-map-actions button:focus-visible{outline:3px solid #efc77d;outline-offset:3px}
.transit-map-hint{margin:11px 0 0;color:#c2d0bd;font:12px/1.4 system-ui,sans-serif}
.transit-map-scroll-hint{display:none;margin:8px 2px 0;color:#46615b;font:12px/1.4 system-ui,sans-serif}
@media(max-width:1000px){.transit-map-shell{grid-template-columns:1fr}.transit-destination{min-height:0}.transit-map-status{margin-top:4px}}
@media(max-width:760px){.transit-map-viewport{aspect-ratio:auto}.transit-map-scroller{height:498px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-color:#718379 #e5d4ad;scrollbar-width:auto}.transit-map-canvas{width:796px;height:498px;aspect-ratio:auto}.transit-map-scroll-hint{display:block}}
@media(max-width:530px){.transit-map-card{padding:6px}.stop-marker{width:15px;height:15px;border-width:2px}.transit-stop.is-selected .stop-marker{width:19px;height:19px}.transit-map-legend{font-size:11px;gap:6px 10px}}