:root{color-scheme:dark;--yellow:#ffd02f;--panel:rgba(11,23,18,.82);--line:rgba(255,255,255,.16)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#0b1712;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body{display:flex;justify-content:center}button{font:inherit;color:inherit}.app{width:100%;max-width:560px;min-height:100svh;background:#0b1712}
.map-shell{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;background:#294d33;isolation:isolate;touch-action:manipulation}
.map-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.route-layer{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
#routePath{fill:none;stroke:transparent;stroke-width:2}
.track-bed{fill:none;stroke:#735832;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;opacity:.96}
.rail{fill:none;stroke:#27231f;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
#sleepers rect{fill:#4d3826;stroke:#211812;stroke-width:.7}
.train-set{position:absolute;inset:0;z-index:7;pointer-events:none}
.vehicle{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.car-body{position:absolute;left:0;top:0;width:54px;height:20px;border-radius:6px 8px 8px 6px;background:linear-gradient(#ffe254 0 45%,#f2bd18 46% 100%);border:1.5px solid #583a16;box-shadow:0 3px 5px rgba(0,0,0,.42);transform-origin:50% 50%;overflow:hidden}
.locomotive .car-body{border-radius:9px 6px 6px 9px;background:linear-gradient(#ffdf37 0 44%,#f0b817 45% 100%)}
.car-windows{position:absolute;left:8px;right:5px;top:3px;height:6px;border-radius:2px;background:repeating-linear-gradient(90deg,#173a46 0 6px,#e1aa21 6px 8px)}
.cab-window{position:absolute;left:3px;top:3px;width:9px;height:7px;border-radius:4px 2px 2px 4px;background:#17333d;z-index:2;border:1px solid #9b6c17}
.stripe{position:absolute;left:0;right:0;bottom:3px;height:3px;background:#a84622}
.bogie{position:absolute;left:0;top:0;width:16px;height:9px;margin-left:-8px;margin-top:-4.5px;border-radius:3px;background:#2a241f;border:1px solid #17130f;will-change:transform;transform-origin:50% 50%;z-index:-1}
.bogie i{position:absolute;width:4px;height:4px;border-radius:50%;background:#181513;border:1px solid #8b6a3d}
.bogie i:nth-child(1){left:-2px;top:-2px}.bogie i:nth-child(2){left:-2px;bottom:-2px}.bogie i:nth-child(3){right:-2px;top:-2px}.bogie i:nth-child(4){right:-2px;bottom:-2px}
.hud{position:absolute;z-index:12;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.status-hud{top:max(10px,env(safe-area-inset-top));left:10px;right:10px;border-radius:17px;padding:10px 10px 10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:opacity .22s ease,transform .22s ease;opacity:1;transform:translateY(0)}
.status-hud.is-hidden{opacity:0;transform:translateY(-12px);pointer-events:none}
.status-hud div{min-width:0}.status-hud strong{display:block;font-size:clamp(13px,3.5vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eyebrow{display:block;color:var(--yellow);font-size:9px;font-weight:900;letter-spacing:.12em;margin-bottom:2px}
.round-button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.24);font-size:17px;font-weight:900;flex:none}
.progress-hud{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));border-radius:16px;padding:9px 11px}.route-copy{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px}.route-copy span,.route-copy b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}.route-copy b{color:#fff}.progress-track{height:6px;margin-top:7px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffb820,#ffe263);border-radius:inherit}
@media (max-width:420px){.car-body{transform:scale(.88)}.bogie{transform-origin:50% 50%}}
@media (min-width:561px){body{padding:16px 0}.map-shell{border-radius:26px;box-shadow:0 24px 90px rgba(0,0,0,.45)}}