body.ride-sim-open{overflow:hidden}
.ride-playback .replay-toolbar #replay-play,.ride-playback .replay-toolbar #replay-simulator{flex:1 1 0;min-width:0}
#replay-simulator{border:1px solid #ffc471;background:linear-gradient(120deg,#ffbc65,#ffe6b6);color:#142434;font-weight:800;border-radius:12px;min-height:64px;font-size:16px;box-shadow:0 0 22px #ffbc6525}
#replay-simulator:disabled{opacity:.4;cursor:not-allowed}
#ride-simulator{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#09131e;color:#fff;font-family:system-ui,sans-serif}
#ride-simulator::backdrop{background:#070c12}
#sim-map{position:absolute;inset:0}
#ride-simulator:not([data-view="rider"]) #sim-map canvas{cursor:grab;touch-action:none}
#ride-simulator #sim-map canvas.sim-camera-dragging{cursor:grabbing}
#sim-map canvas:focus-visible{outline:2px solid #37e6d4;outline-offset:-3px}
.sim-top{position:absolute;z-index:3;left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));right:72px;display:flex;align-items:center;gap:12px;pointer-events:none}
.sim-top>*{pointer-events:auto}
.sim-title{display:flex;flex-direction:column;text-shadow:0 2px 5px #000;min-width:120px}
.sim-title b{font-size:12px;letter-spacing:.16em;color:#9effed}
.sim-title span{font-size:14px}
#ride-simulator button,#ride-simulator select{touch-action:manipulation;min-height:42px;border:1px solid #ffffff36;background:#10202fe8;border-radius:9px;color:#e9f8ff;padding:7px 12px;font-size:14px}
#ride-simulator button:focus-visible,#ride-simulator select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sim-views{display:flex;gap:4px}
#ride-simulator #sim-camera-reset{white-space:nowrap;padding-inline:8px}
#ride-simulator .sim-views [aria-pressed="true"]{background:#00d5c3;color:#06232b;border-color:#8cfff0}
#ride-simulator #sim-close{position:absolute;z-index:5;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:46px;height:46px;padding:8px;background:#10202fe8}
#sim-close img{width:100%;height:100%;object-fit:contain}
#sim-message{position:absolute;z-index:4;left:50%;top:30%;transform:translateX(-50%);padding:16px 20px;background:#0c1929ed;border:1px solid #56718a;border-radius:12px;max-width:90%;text-align:center}
#sim-message[hidden]{display:none}
#sim-retry{margin-left:10px}
.sim-coverage{position:absolute;z-index:2;top:75px;left:16px;font-size:12px;background:#10202fc9;border-radius:5px;padding:4px 8px;max-width:calc(100% - 32px)}
.sim-coverage:empty{display:none}
.sim-instruments{position:absolute;z-index:2;bottom:115px;left:50%;transform:translateX(-50%);width:min(560px,80vw);background:linear-gradient(#172432ed,#070e16f5);border:2px solid #637b88;border-radius:18px 18px 32px 32px;padding:12px 22px 8px;box-shadow:0 8px 24px #0009,0 0 0 5px #050a1090;pointer-events:none;font-variant-numeric:tabular-nums}
.sim-rpm-track{height:7px;background:#ffffff18;overflow:hidden;border-radius:3px;margin-bottom:6px}
.sim-rpm-track i{display:block;height:100%;width:0;background:#1ce2d4;transition:width .12s linear}
.sim-dials{display:grid;grid-template-columns:1fr .8fr 1fr;align-items:center;text-align:center}
.sim-dials>div{display:flex;flex-direction:column;gap:0}
.sim-dials strong{font-size:clamp(28px,4vw,52px);line-height:1.1;font-weight:800;letter-spacing:-.04em;color:#f3fbff}
.sim-dials span{font-size:11px;color:#acbdca}
.sim-dials .sim-voltage strong{font-size:26px;color:#4decd9}
.sim-dials .sim-rpm strong{color:#ffc97b}
#sim-sensor-note{display:block;text-align:center;color:#a1b2bd;font-size:10px;margin-top:5px}
#ride-simulator[data-rpm="warm"] .sim-instruments{border-color:#ffc74d;box-shadow:0 0 25px #ffbf3659}
#ride-simulator[data-rpm="hot"] .sim-instruments{border-color:#ff5b60;box-shadow:0 0 28px #ff3c506b}
#ride-simulator[data-view="rider"] .sim-instruments::before,#ride-simulator[data-view="rider"] .sim-instruments::after{content:"";position:absolute;top:60%;height:16px;width:80px;background:linear-gradient(#70828c,#14212a);border:2px solid #071018;border-radius:10px;z-index:-1}
#ride-simulator[data-view="rider"] .sim-instruments::before{left:-75px;transform:rotate(-12deg)}
#ride-simulator[data-view="rider"] .sim-instruments::after{right:-75px;transform:rotate(12deg)}
.sim-controls{position:absolute;z-index:3;bottom:0;left:0;right:0;padding:10px max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom));background:linear-gradient(#07131de3,#07131d);border-top:1px solid #5d849259}
#sim-timeline{display:block;width:100%;accent-color:#37e6d4;margin:0 0 8px;cursor:pointer}
.sim-control-row{display:flex;align-items:center;gap:14px}
#ride-simulator #sim-play{background:#00d5c3;color:#052c33;min-width:95px;font-weight:800}
#sim-time{font-size:14px;font-variant-numeric:tabular-nums}
#sim-trip{font-size:12px;color:#9fb9c9;flex:1}


@media(max-width:650px){.sim-top{gap:8px;flex-wrap:wrap;right:66px;left:10px;top:10px}.sim-title{flex:1;min-width:90px}.sim-title b{font-size:10px}.sim-title span{font-size:12px}.sim-views{order:3;width:100%}#ride-simulator .sim-views button{flex:1;min-width:0;white-space:nowrap;font-size:12px;padding:6px 4px}.sim-coverage{top:113px;left:10px;font-size:10px}.sim-instruments{width:82vw;padding:9px 12px 7px;bottom:125px}.sim-dials strong{font-size:32px}.sim-dials .sim-voltage strong{font-size:23px}.sim-control-row{gap:8px;flex-wrap:wrap}#sim-time{font-size:12px}#sim-trip{display:none}.sim-control-row label{margin-left:auto}#replay-simulator{font-size:14px;min-height:54px}}
@media(max-height:500px){.sim-instruments{bottom:102px;width:380px;padding:6px 14px}.sim-dials strong{font-size:32px}.sim-top{top:8px}.sim-title{display:none}.sim-coverage{top:60px}.sim-controls{padding-top:5px}#sim-sensor-note{font-size:9px}}

@media(min-width:900px){#ride-simulator:not([data-view="rider"]) .sim-instruments{left:20px;transform:none;width:380px;padding:10px 18px}#ride-simulator:not([data-view="rider"]) .sim-dials strong{font-size:38px}#ride-simulator:not([data-view="rider"]) .sim-voltage strong{font-size:26px}}

#ride-simulator #sim-markings[aria-pressed="true"]{border-color:#efc34f;color:#ffe3a0}
@media(max-width:650px){.sim-top .sim-title{min-width:70px}.sim-top .sim-light-label select{width:95px;font-size:12px;padding:6px}.sim-top #sim-markings{width:102px;font-size:11px;padding:5px}.sim-top .sim-title span{font-size:11px}}
@media(max-width:650px){#ride-simulator[data-view="rider"] .sim-instruments::before,#ride-simulator[data-view="rider"] .sim-instruments::after{display:none}}

@media(max-width:650px){
 .sim-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 .sim-top .sim-title{display:none}
 .sim-top .sim-views{grid-column:1/-1;order:0}
 #ride-simulator .sim-top label select{width:100%;font-size:12px;padding:6px}
 #ride-simulator .sim-top #sim-markings{width:100%;font-size:11px}
 .sim-coverage{top:160px}
}

#sim-minimap{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:116px;z-index:3;width:220px;border:2px solid #8da6a5;border-radius:12px;overflow:hidden;background:#10202fe8;box-shadow:0 4px 18px #0008}
#sim-minimap-map{width:100%;height:170px}
#ride-simulator #sim-minimap-toggle{display:block;width:100%;min-height:30px;padding:3px 8px;border:0;border-radius:0;text-align:left;font-size:12px}
.sim-minimap-north{position:absolute;top:38px;left:8px;font-size:11px;color:#fff;text-shadow:0 1px 3px #000;pointer-events:none}
.sim-minimap-arrow{width:20px;height:24px;background:#fff8b5;clip-path:polygon(50% 0,100% 100%,50% 75%,0 100%);filter:drop-shadow(0 1px 2px #000)}
#sim-minimap.collapsed{width:100px}
#sim-minimap.collapsed #sim-minimap-map,#sim-minimap.collapsed .sim-minimap-north{display:none}
#sim-minimap .maplibregl-ctrl-attrib{font-size:8px;line-height:12px}
@media(min-width:900px){#ride-simulator:not([data-view="rider"]) .sim-instruments{left:260px}}
@media(max-width:899px){#sim-minimap{width:150px;bottom:255px;left:10px}#sim-minimap-map{height:115px}}
@media(max-height:500px){#sim-minimap{width:145px;bottom:108px}#sim-minimap-map{height:100px}.sim-instruments{width:330px}}

#sim-events{position:relative;height:24px;margin:0 8px}
#sim-events:empty{display:none}
#ride-simulator #sim-events button{position:absolute;top:0;transform:translateX(-50%);padding:0 3px;min-height:24px;min-width:20px;border:0;background:transparent;color:#ffc97b;font-size:13px}
#ride-simulator #sim-events button[data-type="stop"]{color:#67dfff;top:7px;font-size:10px}
#ride-simulator #sim-events button:hover,#ride-simulator #sim-events button:focus-visible{z-index:1;background:#142432}
#sim-event-select{max-width:260px;text-overflow:ellipsis}
#ride-simulator #sim-lean[aria-pressed="true"]{color:#8cfff0;border-color:#37e6d4}
.sim-control-row{flex-wrap:wrap}
.sim-instruments{bottom:calc(var(--sim-footer-height,100px) + 16px)}
#sim-minimap{bottom:calc(var(--sim-footer-height,100px) + 16px)}

@media(max-width:899px) and (min-height:501px){#sim-minimap{bottom:calc(var(--sim-footer-height,100px) + 160px)}}
@media(max-width:650px){#sim-event-select{max-width:145px}.sim-control-row label{margin-left:0}#sim-time{flex:1}#ride-simulator #sim-lean{font-size:12px;padding:6px}.sim-controls{padding-top:5px}}

/* Keep source credits available without a strip across the minimap and timeline. */
#sim-map .maplibregl-ctrl-bottom-right{bottom:calc(var(--sim-footer-height,100px) + 6px);right:6px;max-width:calc(100% - 24px)}
#sim-map .maplibregl-ctrl-attrib{font-size:11px;line-height:1.5}
#sim-map .maplibregl-ctrl-attrib-inner{max-width:min(420px,calc(100vw - 80px));max-height:140px;overflow:auto;overflow-wrap:anywhere}