@font-face{font-family:Montserrat;src:url(/race/fonts/montserrat-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(/race/fonts/montserrat-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(/race/fonts/montserrat-700.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(/race/fonts/montserrat-900.woff2) format("woff2");font-weight:800 900;font-style:normal;font-display:swap}
:root{--bg:#1B1D26;--ink:#fafaf9;--mute:#a8a29e;--dim:#8b8d98;--soft:#d6d3d1;--line:#ffffff26;--hair:#ffffff1a;--box:#ffffff33;--violet:#573EFF;--pink:#FF6AD3;--lilac:#b4a8ff;--blue:#38bdf8;--green:#4ade80;--faster:#c084fc;--red:#f43f5e}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body.noscroll{overflow:hidden}
main{max-width:560px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px 0}
.closed{text-align:center;padding-top:30vh}
h1{font-size:26px;font-weight:800;margin:4px 0 10px}
h1.center{text-align:center;margin-top:48px}
.sub{color:var(--mute);text-align:center;margin:0 0 20px;font-weight:600}
#pinform{display:flex;gap:10px;justify-content:center}
#pin{font:inherit;font-size:30px;letter-spacing:12px;text-align:center;width:180px;padding:8px 12px;border:1px solid var(--box);border-radius:4px;background:transparent;color:var(--ink)}
.note{color:var(--dim);font-size:13px;text-align:center;min-height:1.2em;margin:10px 0}
.note.err{color:var(--pink)}
.banner{border-radius:4px;padding:12px 14px;margin:0 0 12px;font-size:15px;border:1px solid var(--hair);background:#ffffff0d}
.banner.warn{border-color:var(--pink)}
.banner.big{font-size:20px;font-weight:700;padding:28px 18px;text-align:center}
.banner small{display:block;font-size:14px;font-weight:500;color:var(--mute);margin-top:8px}
.top{display:flex;justify-content:space-between;align-items:center;white-space:nowrap;gap:12px}
.livechip{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:var(--red);margin-right:6px}
.watching{font-size:12px;font-weight:700;color:var(--mute)}
.mapwrap{position:relative;height:170px;border-radius:4px;overflow:hidden;background:#15161d}
#map{position:absolute;inset:0;background:#15161d}
.leaflet-container{background:#15161d;font-family:inherit}
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.6)}
.leaflet-control-attribution{background:#000a!important;color:var(--dim)!important;font-size:9px}
.leaflet-control-attribution a{color:var(--mute)!important}
.mapopen{position:absolute;right:8px;bottom:8px;z-index:500;background:#000a;color:var(--ink);border:0;border-radius:4px;padding:4px 8px;font:inherit;font-size:11px;font-weight:700;min-height:0}
.fulltop,.fullstats,.zoom{display:none}
.mapwrap.full{position:fixed;inset:0;height:auto;border-radius:0;z-index:1000}
.mapwrap.full .mapopen{display:none}
.mapwrap.full .fulltop,.mapwrap.full .fullstats,.mapwrap.full .zoom{display:flex}
.fulltop{position:absolute;z-index:600;top:calc(12px + env(safe-area-inset-top));left:16px;right:16px;justify-content:space-between;align-items:center}
.chip{background:#000b;color:var(--ink);border:0;border-radius:4px;padding:7px 10px;font:inherit;font-size:13px;font-weight:800;min-height:0;display:inline-flex;align-items:center}
.zoom{position:absolute;z-index:600;right:16px;top:44%;flex-direction:column;gap:6px}
.zoom .chip{width:36px;height:36px;justify-content:center;font-size:20px;padding:0}
.follow{position:absolute;z-index:600;right:16px;bottom:calc(120px + env(safe-area-inset-bottom))}
.fullstats{position:absolute;z-index:600;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));background:#000c;border-radius:4px;padding:10px 12px;flex-direction:column}
.fullstats .stats{margin:0;gap:8px}
.legend{display:flex;gap:10px;font-size:11px;font-weight:700;margin-top:6px}
.lp{color:var(--violet)}.ls{color:var(--pink)}.lf{color:var(--faster)}
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:10px 0 12px}
.stats .l{font-size:11px;font-weight:600;color:var(--mute)}
.stats .v{font-size:19px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.stats .fin{color:var(--pink)}
.feed{border-top:1px solid var(--line);padding:10px 0 2px}
h2{font-size:15px;font-weight:700;margin:0 0 8px}
.next{border:1px solid var(--violet);border-radius:4px;padding:8px 10px;margin-bottom:6px;display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}
#nextdetail{color:var(--pink);white-space:nowrap}
ol{list-style:none;margin:0;padding:0}
.rows li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--hair)}
.rows .bar{width:3px;border-radius:1px;flex:none;background:var(--mute)}
.rows .k-message .bar{background:var(--lilac)}.rows .k-milestone .bar,.rows .k-finish .bar{background:var(--pink)}
.rows .k-aid .bar{background:var(--blue)}.rows .k-fuel .bar{background:var(--green)}.rows .k-pace .bar{background:var(--violet)}
.rows .rb{flex:1;min-width:0}
.rows .rc{font-size:11px;font-weight:700;color:var(--mute)}
.rows .rt{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.rows .k-milestone .rt,.rows .k-finish .rt{color:var(--pink)}
.rows .rs{font-size:12px;color:var(--soft)}
.st-played{color:var(--green)}.st-sent{color:var(--dim)}.st-waiting{color:var(--pink)}
.msgbox{position:sticky;bottom:0;z-index:700;background:var(--bg);margin:10px -16px 0;padding:8px 16px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.msgbox .note{margin:4px 0 0;min-height:0}
input[type=text]{display:block;width:100%;font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--box);border-radius:4px;background:transparent;color:var(--ink)}
input::placeholder{color:var(--dim)}
.sendrow{display:flex;gap:8px;margin-top:6px}
.sendrow input{flex:1;min-width:0}
button{font:inherit;font-size:15px;border:1px solid var(--box);background:transparent;color:var(--ink);border-radius:4px;padding:8px 14px;min-height:40px}
button[type=submit]{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:800}
button:disabled{opacity:.45}
.hint{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--dim);margin-top:4px}
.count{font-variant-numeric:tabular-nums;white-space:nowrap}
.foot{color:var(--dim);font-size:12px;text-align:center;margin-top:12px}
.hide{display:none!important}