:root{--w:min(100vw,480px);--u:min(var(--w)/100,100dvh/190);--ink:#fff;--top:#10264a;--on:#9db0cc;--off:#566a8c;
  --stage:#1b3a66;--card:#b9c8dc;--ok:#3aa57a;--hud:#e53935;--txt:#10202f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:#10264a;color:var(--ink);font:16px Anton,Impact,'Arial Narrow',sans-serif;letter-spacing:.02em;display:flex;justify-content:center}
button,input,select{font:inherit;letter-spacing:inherit}
.i{width:1em;height:1em;display:block}
#app{width:var(--w);height:100dvh;padding-top:env(safe-area-inset-top);display:flex;flex-direction:column;background:#1b3a66;overflow:hidden}
.bar,.tiles button,#big,#unit,#nd,h3,#answer,.call b,#go,#inst{text-transform:uppercase}
.bar{display:flex;align-items:center;justify-content:center;position:relative;height:calc(var(--u)*10);font-size:calc(var(--u)*6)}
.bar.top{background:var(--top)}.bar.black{background:#10264a;font-size:calc(var(--u)*5.6)}
.bar button{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--ink);font-size:calc(var(--u)*6.4);padding:calc(var(--u)*2) calc(var(--u)*3)}
#prof{left:calc(var(--u)*1)}#cog{right:calc(var(--u)*1)}
.tiles{display:flex}
.tiles button{flex:1;border:0;color:var(--ink);background:var(--off);font-size:calc(var(--u)*15);line-height:1;padding:calc(var(--u)*2.4) 0;transition:background .15s}
.tiles button.on{background:var(--on)}
.linkbar{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2);border:0;background:#10264a;color:var(--ink);height:calc(var(--u)*8);font-size:calc(var(--u)*3.6)}
.linkbar i{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);border-radius:50%;background:#8593a1}.linkbar.ok i{background:var(--ok)}
#stage{flex:1;min-height:0;overflow-y:auto;padding-bottom:calc(var(--u)*3 + env(safe-area-inset-bottom));background:var(--stage);padding:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.card{background:var(--card);border-radius:calc(var(--u)*5);color:var(--txt)}
/* speed */
#speedcard{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;color:#fff;background:#2d5288;border-radius:0}
#big{font-size:min(calc(var(--u)*46),26dvh);line-height:1}
#unit{font-size:calc(var(--u)*11);align-self:flex-end;margin:0 calc(var(--u)*4)}
body[data-vehicle=bike] #speedcard{flex:1 1 0;min-height:calc(var(--u)*26);flex-direction:row;align-items:center;justify-content:center;gap:calc(var(--u)*3);padding:0}
body[data-vehicle=bike] #big{font-size:min(calc(var(--u)*34),17dvh)}body[data-vehicle=bike] #unit{font-size:calc(var(--u)*13);margin:0;align-self:center}
/* map */
#mapcard,#media{display:none}
body[data-mode="1"] #mapcard{display:flex;flex:1;min-height:0;flex-direction:column;gap:calc(var(--u)*2.5);padding:calc(var(--u)*3)}
body[data-mode="1"] #speedcard{display:none}
#next{display:flex;align-items:center;gap:calc(var(--u)*3)}
#arrow{font-size:calc(var(--u)*15);color:var(--hud);width:calc(var(--u)*17)}
#nd{font-size:calc(var(--u)*11);line-height:1}#street{font-size:calc(var(--u)*3.8);opacity:.75;margin-top:calc(var(--u)*1)}
#spd{margin-left:auto;text-align:right;font-size:calc(var(--u)*8);line-height:1}#spd small{display:block;font-size:calc(var(--u)*3);opacity:.7}
#search{display:flex;gap:calc(var(--u)*2)}
#search input{flex:1;min-width:0;border:0;padding:calc(var(--u)*2.8) calc(var(--u)*3);font-size:calc(var(--u)*4);background:rgba(255,255,255,.78);color:var(--txt)}
#search button{border:0;border-radius:calc(var(--u)*3);padding:0 calc(var(--u)*4);background:#25446a;color:#fff;font-size:calc(var(--u)*4.4)}
#mapwrap{position:relative;flex:1;min-height:calc(var(--u)*30)}#map{position:absolute;inset:0}
/* bike media */
body[data-vehicle=bike] #media{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(var(--u)*3)}
body[data-vehicle=bike][data-mode="1"] #media{grid-template-columns:1fr}
.player{padding:calc(var(--u)*3);display:grid;grid-template-columns:calc(var(--u)*20) 1fr;gap:calc(var(--u)*2) calc(var(--u)*3);align-items:center}
.art{width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:calc(var(--u)*3);background:#f3d6bd;color:#20303f;padding:calc(var(--u)*2)}
.meta b{display:block;font-size:calc(var(--u)*4.4)}.meta small{font-size:calc(var(--u)*3);opacity:.7}
.transport{grid-column:1/-1;display:flex;justify-content:space-around}
.transport button{background:none;border:0;font-size:calc(var(--u)*9);color:var(--txt);padding:calc(var(--u)*1) calc(var(--u)*3)}
.vol{grid-column:1/-1;display:flex;align-items:center;gap:calc(var(--u)*2);font-size:calc(var(--u)*5)}.vol input{flex:1;accent-color:#25446a}
body[data-vehicle=bike][data-mode="1"] .art,body[data-vehicle=bike][data-mode="1"] .meta,body[data-vehicle=bike][data-mode="1"] .call{display:none}
body[data-vehicle=bike][data-mode="1"] .player{grid-template-columns:1fr}
.call{padding:calc(var(--u)*3);display:flex;flex-direction:column;gap:calc(var(--u)*2);align-items:stretch;text-align:center}
.call b{font-size:calc(var(--u)*5)}.call small{font-size:calc(var(--u)*3);opacity:.7}
#answer{border:0;border-radius:calc(var(--u)*3);background:#2f7a57;color:#fff;font-size:calc(var(--u)*7);padding:calc(var(--u)*4) 0}
#toast{position:fixed;left:50%;bottom:calc(var(--u)*4);transform:translateX(-50%);background:#000c;color:#fff;padding:calc(var(--u)*2) calc(var(--u)*4);border-radius:999px;font-size:calc(var(--u)*3.6);opacity:0;transition:opacity .2s;pointer-events:none}
#toast.show{opacity:1}
/* sheets */
dialog{border:0;border-radius:calc(var(--u)*5);background:#13294a;color:#fff;width:min(92vw,440px);padding:calc(var(--u)*5)}
dialog::backdrop{background:#000a}
h3{margin:0 0 calc(var(--u)*2);font-size:calc(var(--u)*6);font-weight:400;letter-spacing:.04em}h3 small{font-size:calc(var(--u)*3.6);opacity:.6;margin-left:calc(var(--u)*2)}
.set{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*3);padding:calc(var(--u)*3) 0;border-top:1px solid #ffffff22}
.set.col{flex-direction:column;align-items:flex-start}
.set input[type=range]{flex:1;accent-color:#7fb0ff}.set input[type=checkbox]{width:calc(var(--u)*7);height:calc(var(--u)*7);accent-color:#7fb0ff}
.set input:not([type]),.set select{flex:1;min-width:0;padding:calc(var(--u)*2.6);border-radius:calc(var(--u)*3);border:1px solid #ffffff33;background:#0b1626;color:#fff}
dialog button{background:#25446a;border:0;color:#fff;border-radius:calc(var(--u)*3);padding:calc(var(--u)*2.6) calc(var(--u)*4)}
#places{display:flex;flex-wrap:wrap;gap:calc(var(--u)*2);margin-bottom:calc(var(--u)*2)}#places:empty::after{content:'Tap the star on the map screen to save a destination';opacity:.6;font-size:calc(var(--u)*3.6)}
#places span{display:flex;background:#25446a;border-radius:999px;overflow:hidden}#places span button{border-radius:0;padding:calc(var(--u)*2) calc(var(--u)*3.4)}
#install{display:flex;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*2.4) calc(var(--u)*3);background:#e6edf7;color:#10264a;font-size:calc(var(--u)*3.8)}
#install[hidden]{display:none}
#install span{flex:1}
#install #inst{background:#10264a;color:#fff;border:0;border-radius:calc(var(--u)*3);padding:calc(var(--u)*2) calc(var(--u)*3.4);font-size:calc(var(--u)*4)}
#install #instx{background:none;border:0;color:#10264a;font-size:calc(var(--u)*5);padding:calc(var(--u)*1)}
#places button .i,#search button .i{display:inline-block;vertical-align:-.12em}
#search #save{font-size:calc(var(--u)*5.6);display:flex;align-items:center}
.vol input{min-width:0}.vol span{flex:none;display:flex}
/* one corner style everywhere: square */
*,*::before,*::after{border-radius:0!important}
#searchwrap{position:relative}
#results{position:absolute;left:0;right:0;top:100%;z-index:1100;max-height:calc(var(--u)*80);max-height:min(calc(var(--u)*80),48dvh);overflow-y:auto;background:#f4f7fb;color:var(--txt);border:1px solid #25446a;box-shadow:0 calc(var(--u)*2) calc(var(--u)*5) #0006}
#results[hidden]{display:none}
#results .row{display:flex;align-items:center;gap:calc(var(--u)*2);width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #c9d3df;padding:calc(var(--u)*2.6) calc(var(--u)*3);color:var(--txt)}
#results .row .t{flex:1;min-width:0}#results .row b{display:block;font-weight:400;font-size:calc(var(--u)*4.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#results .row small{display:block;font-size:calc(var(--u)*3.2);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:calc(var(--u)*.6)}
#results .row .d{font-size:calc(var(--u)*3.4);opacity:.75;flex:none}
#results .hd{padding:calc(var(--u)*2) calc(var(--u)*3);font-size:calc(var(--u)*3);opacity:.6;text-transform:uppercase}
#preview{display:flex;align-items:center;gap:calc(var(--u)*2)}#preview[hidden]{display:none}
#preview .pt{flex:1;min-width:0}#preview b{display:block;font-weight:400;font-size:calc(var(--u)*5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#preview small{font-size:calc(var(--u)*3.4);opacity:.75}
#preview button{border:0;color:#fff;padding:calc(var(--u)*3) calc(var(--u)*4);font-size:calc(var(--u)*4.4);text-transform:uppercase;background:#25446a}
#preview #pgo{background:#2f7a57}
#loc{position:absolute;right:calc(var(--u)*2);bottom:calc(var(--u)*2);z-index:500;background:#fff;border:0;color:#25446a;font-size:calc(var(--u)*6.4);padding:calc(var(--u)*2);box-shadow:0 1px 4px #0005}