*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#0b3d6b;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}.hide{display:none!important}
#loading{position:fixed;inset:0;background:radial-gradient(#1a74c4,#0b3d6b);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50}#loading .lt{font:900 34px -apple-system,Helvetica,Arial,sans-serif;letter-spacing:2px}#loading .ls{margin-top:14px;opacity:.85;max-width:86vw;text-align:center}#loading button{margin-top:16px;border:0;border-radius:12px;padding:12px 26px;font-size:18px;font-weight:800;background:#fff;color:#0b5fa8}
.modal{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;background:rgba(5,25,50,.45);z-index:30;padding:12px;padding-top:max(12px,env(safe-area-inset-top));overflow:auto}
.card{margin:auto;background:#fff;color:#10243d;border-radius:18px;max-width:520px;width:100%;padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.45);max-height:94dvh;overflow:auto;touch-action:pan-y;text-align:center;border-top:7px solid #1479d4}
.logo{display:inline-block;color:#0b5fa8;font:800 12px -apple-system,Helvetica,sans-serif;letter-spacing:2px;border:2px solid #1479d4;border-radius:20px;padding:4px 12px}
h1{margin:8px 0 8px;font:900 30px -apple-system,Helvetica,Arial,sans-serif;color:#0b2b4d}.sub{color:#334;font-size:15px;line-height:1.4;margin:10px 0 6px}
.keys{font-size:12px;color:#667;margin:6px 0}.touch .nt{display:none}body:not(.touch) .tt{display:none}
.go,.sec{display:block;width:100%;border:0;border-radius:14px;padding:15px;font-size:19px;font-weight:800;margin-top:8px;cursor:pointer}.go{background:#1479d4;color:#fff;box-shadow:0 4px 0 #0b4f8f}.go.alt{background:#2fb35a;box-shadow:0 4px 0 #1d7a3b;font-size:17px}.go:disabled{opacity:.45}.sec{background:#eef1f5;color:#334}
.job{display:flex;gap:10px;align-items:center;text-align:left;width:100%;border:2px solid #d6e4f2;background:#f6faff;border-radius:14px;padding:10px 12px;margin-top:8px;cursor:pointer;color:#10243d;font-size:14px}.job .ji{font-size:30px}.job b{display:block;font-size:16px}.job em{font-style:normal;color:#1d7a3b;font-weight:800}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud button{pointer-events:auto}
#top{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);display:flex;align-items:flex-start;gap:8px;justify-content:space-between}
#stats{display:flex;gap:5px;flex-wrap:wrap}.st{background:rgba(11,43,77,.78);border:2px solid #1479d4;border-radius:10px;padding:4px 8px;font:800 15px ui-monospace,Menlo,monospace;white-space:nowrap}.st span{margin-right:4px}#clockBox.warn{border-color:#f5a623;color:#ffd27a}#clockBox.over{border-color:#e53935;color:#ff8a80;animation:bl 1s infinite}@keyframes bl{50%{opacity:.6}}
#btns{display:flex;gap:6px}#btns button{width:44px;height:44px;border-radius:12px;border:2px solid #1479d4;background:rgba(11,43,77,.8);font-size:20px;cursor:pointer;color:#fff;padding:0}
#mis{position:absolute;top:calc(env(safe-area-inset-top) + 58px);left:calc(env(safe-area-inset-left) + 8px);background:rgba(11,43,77,.8);border-radius:22px;padding:5px 12px 5px 6px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;max-width:calc(100vw - 150px)}
#mis.hide{display:none}#marrow{display:inline-flex;flex:none;width:30px;height:30px;border-radius:50%;background:#ffcc33;color:#10243d;align-items:center;justify-content:center;font-size:18px;font-weight:900}#mtext{overflow:hidden;text-overflow:ellipsis;line-height:1.2}
#where{position:absolute;top:calc(env(safe-area-inset-top) + 122px);left:calc(env(safe-area-inset-left) + 10px);font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 3px #000;max-width:55vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mini{position:absolute;top:calc(env(safe-area-inset-top) + 58px);right:calc(env(safe-area-inset-right) + 8px);border-radius:50%;border:3px solid #1479d4;background:#4e7d3a;width:112px;height:112px;pointer-events:auto;cursor:pointer}
#toast{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 178px);transform:translateX(-50%);background:rgba(11,43,77,.9);padding:9px 14px;border-radius:12px;font-size:15px;font-weight:700;opacity:0;transition:opacity .3s;max-width:86vw;text-align:center;border:2px solid #1479d4}#toast.on{opacity:1}#toast.bad{border-color:#e53935;background:rgba(90,15,15,.9)}#toast.good{border-color:#2fb35a;background:rgba(12,70,35,.92)}
#bUse{position:absolute;right:calc(env(safe-area-inset-right) + 14px);bottom:calc(env(safe-area-inset-bottom) + 100px);background:#1479d4;color:#fff;border:3px solid #fff;border-radius:18px;padding:12px 16px;font-size:17px;font-weight:900;box-shadow:0 4px 0 #0b4f8f,0 6px 20px rgba(0,0,0,.4);display:none;min-width:150px;min-height:58px;cursor:pointer;touch-action:none}#bUse.on{display:block;animation:pu 1.2s infinite}#bUse.dim{background:#6b7f95;box-shadow:0 4px 0 #46566a;animation:none}@keyframes pu{50%{transform:scale(1.05)}}
#pad{position:absolute;inset:0;pointer-events:none}
#padL,#padR{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 14px);display:flex;gap:10px}
#padL{left:calc(env(safe-area-inset-left) + 14px);flex-direction:column;bottom:calc(env(safe-area-inset-bottom) + 10px)}
#padR{right:calc(env(safe-area-inset-right) + 14px);flex-direction:row}
#hud .ar{pointer-events:auto;width:76px;height:76px;border-radius:20px;border:3px solid rgba(255,255,255,.9);background:rgba(20,121,212,.45);color:#fff;font-size:34px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;touch-action:none;-webkit-touch-callout:none;box-shadow:0 3px 10px rgba(0,0,0,.3)}
#hud .ar.on{background:rgba(255,204,51,.85);color:#10243d}
#speedo{position:absolute;left:calc(env(safe-area-inset-left) + 104px);bottom:calc(env(safe-area-inset-bottom) + 14px);background:rgba(11,43,77,.7);border-radius:12px;padding:4px 10px;text-align:center;line-height:1}#speedo b{display:block;font:900 24px ui-monospace,Menlo,monospace}#speedo span{font-size:10px;opacity:.8}
#bigmap{position:fixed;inset:0;background:rgba(5,20,40,.92);z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}#bigc{max-width:100%;max-height:calc(100% - 90px);border-radius:12px;background:#6d6a64}#mapleg{font-size:13px;margin:6px 0}#bigmap .sec{max-width:300px;margin-top:4px}
#rcB{font-size:16px;line-height:1.6;text-align:left;background:#f4f8fc;border-radius:12px;padding:10px 14px;margin:8px 0}#rcB .r{display:flex;justify-content:space-between}#rcB .tot{font-weight:900;border-top:2px solid #d6e4f2;margin-top:4px;padding-top:4px}
@media (max-height:500px){#hud .ar{width:66px;height:66px;font-size:28px}#padL{flex-direction:row;gap:10px}#speedo{left:calc(env(safe-area-inset-left) + 14px);bottom:calc(env(safe-area-inset-bottom) + 88px)}#bUse{bottom:calc(env(safe-area-inset-bottom) + 88px);min-height:52px;padding:9px 14px}#mini{width:88px;height:88px;top:calc(env(safe-area-inset-top) + 56px)}#mis{top:calc(env(safe-area-inset-top) + 56px);max-width:52vw;font-size:13px}#top{right:calc(env(safe-area-inset-right) + 8px)}#where{top:calc(env(safe-area-inset-top) + 98px)}#toast{top:calc(env(safe-area-inset-top) + 120px)}h1{font-size:24px}.go{padding:11px}}
@media (min-width:900px){#hud .ar{width:84px;height:84px}#mini{width:160px;height:160px}#mis{left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 10px);max-width:46vw}#where{top:calc(env(safe-area-inset-top) + 60px)}#speedo{left:calc(env(safe-area-inset-left) + 112px)}}

@media (max-width:440px){.st{font-size:13px;padding:3px 6px}#stats{flex-wrap:nowrap;gap:4px}#btns button{width:38px;height:38px}}

@media (max-height:480px){.card{padding:10px 14px;max-height:calc(100dvh - 16px)}.card h1{font-size:22px;margin:4px 0}.modal{padding:6px;align-items:center}#rcB{font-size:13px;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;padding:6px 10px;margin:4px 0}#rcB div,#rcB tr{line-height:1.3}.card .logo{margin:0}}

/* v10: bike speed selector */
#bSpd{position:absolute;left:calc(env(safe-area-inset-left) + 104px);bottom:calc(env(safe-area-inset-bottom) + 64px);min-width:96px;min-height:44px;border-radius:12px;border:2px solid #1479d4;background:rgba(11,43,77,.8);color:#fff;padding:3px 10px;cursor:pointer;line-height:1.05;text-align:center;touch-action:none;pointer-events:auto}
#bSpd small{display:block;font-size:9px;font-weight:800;letter-spacing:1.5px;opacity:.75}#bSpd b{display:block;font-size:15px;font-weight:900;white-space:nowrap}
#bSpd.s1{border-color:#6ec6ff;box-shadow:0 0 0 2px rgba(110,198,255,.35)}#bSpd.s2{border-color:#fff;background:rgba(20,121,212,.92);box-shadow:0 0 12px rgba(110,198,255,.8)}
@media (max-height:500px){#bSpd{left:calc(env(safe-area-inset-left) + 14px);bottom:calc(env(safe-area-inset-bottom) + 136px)}}
@media (min-width:900px){#bSpd{left:calc(env(safe-area-inset-left) + 112px);bottom:calc(env(safe-area-inset-bottom) + 70px)}}