*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;background:#0b0f1a;color:#fff;font-family:"Segoe UI",Tahoma,system-ui,sans-serif}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.scr{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:2.2vh;padding:2vh 4vw;overflow:auto;text-align:center;background:linear-gradient(#0b0f1a88,#0b0f1acc)}
.scr.on{display:flex}
h1{font-size:min(11vh,64px);font-weight:900;font-style:italic;color:#ffc83d;text-shadow:0 4px 0 #8a5d00,0 0 30px #ffc83d88}
h2{font-size:5vh;text-shadow:0 2px 8px #000}p{max-width:60ch;line-height:1.7}
button{font:inherit;font-weight:700;font-size:max(2.8vh,15px);padding:1.4vh 3vw;min-width:26vw;border-radius:14px;color:#fff;cursor:pointer;background:linear-gradient(#3b4a7a,#26314f);border:2px solid #5b6fa8;box-shadow:0 4px 0 #141b30;transition:transform .08s,filter .15s}
button:active,button.dn{transform:translateY(3px);box-shadow:0 1px 0 #141b30;filter:brightness(1.3)}
button.p{background:linear-gradient(#ffd45e,#f0a800);color:#1a1200;border-color:#fff3b0;box-shadow:0 4px 0 #8a5d00}
button:disabled{opacity:.45}
@media(hover:hover){button:hover:not(:disabled){filter:brightness(1.2)}}
.row{display:flex;gap:2vw;flex-wrap:wrap;justify-content:center}
#mapbox{width:min(80vw,130vh);background:#0009;border-radius:18px;padding:1vh}.m{font-size:3vh;color:#ffc83d;font-weight:800}
.card{background:#141c36dd;border:2px solid #34446f;border-radius:14px;padding:1.5vh 2vw;display:flex;flex-direction:column;gap:1vh;align-items:center;min-width:16vw}
.card i{width:9vw;height:5vh;border-radius:8px}
#hud{background:none;pointer-events:none;justify-content:flex-start;align-items:stretch;padding:1.5vh 2vw}
.top{display:flex;gap:2vw;align-items:center;pointer-events:auto}
.chip{background:#0009;border-radius:12px;padding:1vh 1.5vw;display:flex;gap:1vw;align-items:center;font-size:3vh}
#route{flex:1;background:#0009;border-radius:12px;padding:1vh 2vw;font-size:2.6vh;display:flex;flex-direction:column;gap:.8vh}
.top b{display:block;height:1.4vh;background:#fff3;border-radius:9px;overflow:hidden}.chip b{width:16vw}
.top b i{display:block;height:100%;background:#3ddc84;width:100%}#pi{background:#ffc83d!important;width:0}
.top button{min-width:0;padding:1vh 2vw}
#msg{position:fixed;top:13vh;left:0;right:0;text-align:center;font-size:4vh;font-weight:800;color:#ffb347;text-shadow:0 2px 8px #000}
#spd{position:fixed;bottom:3vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;font-weight:900;text-shadow:0 0 14px #000}
#sp{font-size:9vh;line-height:1;color:#ffc83d}#spd small{font-size:2.4vh;opacity:.8}
#kh{display:none;position:fixed;bottom:.6vh;left:0;right:0;text-align:center;font-size:2vh;opacity:.7}
.ctl{position:fixed;bottom:3vh;display:flex;gap:2vw;pointer-events:auto}
#wh{position:fixed;left:3vw;bottom:3vh;width:27vh;height:27vh;pointer-events:auto;filter:drop-shadow(0 4px 8px #000a)}#wh svg{width:100%;height:100%;pointer-events:none}
.ctl .pedal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5vh;min-width:0;padding:0;width:12vh;height:21vh;border-radius:2.2vh;background:repeating-linear-gradient(#444 0 1vh,#2a2a2a 1vh 2vh);border:2px solid #888;color:#fff;font-size:5vh}
.pedal small{font-size:2.2vh}.ctl .rev{height:15vh;width:10vh;align-self:flex-end}.ctl .gas{background:repeating-linear-gradient(#2f7a4a 0 1vh,#245f3a 1vh 2vh)}
@media(pointer:fine){#wh{width:20vh;height:20vh}.ctl .pedal{width:9vh;height:15vh;font-size:3.5vh}.ctl .rev{height:11vh;width:8vh}#kh{display:block}}
#fs{position:fixed;top:1.5vh;inset-inline-end:2vw;min-width:0;padding:.8vh 1.6vw;z-index:50;font-size:3vh}
body.play #fs{display:none}
#rot{display:none;position:fixed;inset:0;z-index:99;background:#0b0f1a;align-items:center;justify-content:center;font-size:4vw;text-align:center;padding:5vw}
@media (orientation:portrait) and (pointer:coarse){#rot{display:flex}}