*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.pill{background:rgba(10,10,14,.62);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px;font-weight:800;font-size:12px;letter-spacing:.06em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill.gold{background:linear-gradient(#ffd36b,#d99a1c);color:#2a1500;border-color:#fff3}
#hud{position:fixed;inset:0;pointer-events:none}
#hud button,#hud #steerZone,#map{pointer-events:auto}
#topbar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 10px) 0 calc(env(safe-area-inset-left) + 10px)}
.topright{margin-left:auto;display:flex;gap:6px}
#modeInfo{font-weight:800;font-size:14px;text-shadow:0 2px 6px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#map{position:absolute;left:calc(env(safe-area-inset-left) + 10px);top:calc(env(safe-area-inset-top) + 50px);width:118px;height:118px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#0008;box-shadow:0 4px 14px #0008}
#gauge{position:absolute;right:calc(env(safe-area-inset-right) + 12px);top:calc(env(safe-area-inset-top) + 50px);text-align:right;text-shadow:0 2px 8px #000}
#spd{font-size:44px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;font-style:italic}
#spdu{font-size:11px;font-weight:800;letter-spacing:.2em;opacity:.8}
#gear{display:inline-block;margin-top:4px;font-weight:900;font-size:14px;background:#c4121a;border-radius:6px;padding:1px 8px}
#psiWrap{margin:6px 0 2px auto;width:110px;height:7px;border-radius:4px;background:#fff3;overflow:hidden}
#psiBar{height:100%;width:50%;background:linear-gradient(90deg,#4fc3ff,#fff);transition:width .1s}
#psi{font-size:10px;font-weight:800;letter-spacing:.12em;opacity:.9}
#prompt{position:absolute;left:50%;top:calc(env(safe-area-inset-top) + 58px);transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:#000a;border:1px solid #ffd36b88;border-radius:14px;padding:8px 10px 8px 14px;font-weight:700;font-size:14px;max-width:86vw}
#banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-size:clamp(34px,9vw,84px);font-weight:900;font-style:italic;letter-spacing:.02em;text-shadow:0 4px 22px #000,0 0 30px #c4121a;text-align:center;white-space:nowrap}
#banner small{display:block;font-size:.32em;font-style:normal;letter-spacing:.08em}
#toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 190px);transform:translateX(-50%);background:#000b;border-radius:10px;padding:8px 14px;font-weight:700;font-size:14px;text-align:center;max-width:80vw}
#touch{position:absolute;inset:0}
#steerZone{position:absolute;left:0;bottom:0;width:42%;height:52%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(env(safe-area-inset-bottom) + 14px)}
#wheelIcon{width:112px;height:112px;border-radius:50%;border:9px solid rgba(255,255,255,.82);position:relative;box-shadow:0 0 0 2px #0006,inset 0 0 0 2px #0006;background:radial-gradient(circle,#fff 0 13px,transparent 14px)}
#wheelIcon:before{content:"";position:absolute;left:4px;right:4px;top:44px;height:9px;background:rgba(255,255,255,.82);border-radius:4px}
#wheelIcon:after{content:"";position:absolute;left:43px;width:9px;top:50px;bottom:4px;background:rgba(255,255,255,.82);border-radius:4px}
#steerZone .lbl{font-size:10px;font-weight:800;letter-spacing:.14em;opacity:.65;margin-top:6px;text-shadow:0 1px 4px #000}
#pedals{position:absolute;right:calc(env(safe-area-inset-right) + 10px);bottom:calc(env(safe-area-inset-bottom) + 12px);display:flex;gap:8px;align-items:flex-end}
.pbtn{width:74px;height:74px;border-radius:16px;background:rgba(20,20,26,.6);border:2px solid rgba(255,255,255,.3);font-weight:900;font-size:13px;line-height:1.1;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pbtn small{font-size:9px;opacity:.7}
.pbtn.gas{width:84px;height:118px;background:linear-gradient(#2fd36b,#0e8a3a);border-color:#bfffd5aa}
#tBrake{height:96px;background:linear-gradient(#ff4b4b,#a3121a)}
.pbtn.on,.abtn.on{filter:brightness(1.5);transform:scale(.95)}
#air{position:absolute;right:calc(env(safe-area-inset-right) + 10px);bottom:calc(env(safe-area-inset-bottom) + 142px);display:grid;grid-template-columns:repeat(4,58px);gap:6px}
.abtn{height:46px;border-radius:12px;background:rgba(20,40,70,.62);border:2px solid rgba(120,200,255,.5);font-weight:900;font-size:10px;line-height:1.05;letter-spacing:.04em}
.abtn.red{background:rgba(110,10,14,.7);border-color:#ff7a7a99}
@media (orientation:portrait){
  #steerZone{width:50%;height:40%}
  #air{grid-template-columns:repeat(2,58px);bottom:calc(env(safe-area-inset-bottom) + 142px)}
  #toast{bottom:calc(env(safe-area-inset-bottom) + 260px)}
  #banner{top:30%}
  #map{width:96px;height:96px}
  #spd{font-size:36px}
}
@media (max-height:420px){
  #wheelIcon{width:92px;height:92px}
  #wheelIcon:before{top:34px}#wheelIcon:after{left:33px;top:40px}
  .pbtn{width:66px;height:62px}.pbtn.gas{height:100px;width:76px}#tBrake{height:80px}
  #air{bottom:calc(env(safe-area-inset-bottom) + 118px);grid-template-columns:repeat(4,54px)}
  .abtn{height:40px}
  #map{width:92px;height:92px}
}
#title{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:10}
#titleBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
#titleInner{position:relative;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%}
#logo{width:min(620px,86vw);max-height:42vh;object-fit:contain;filter:drop-shadow(0 8px 24px #000)}
#loadTxt{font-weight:700;opacity:.85;text-shadow:0 2px 6px #000}
.big{font-size:20px;font-weight:900;letter-spacing:.08em;padding:16px 34px;border-radius:16px;background:linear-gradient(#ff3b3b,#a10c14);box-shadow:0 8px 30px #c4121a88,inset 0 1px 0 #fff6;border:2px solid #ffd36b}
#titleHint{max-width:520px;font-size:14px;line-height:1.4;text-shadow:0 2px 6px #000;opacity:.92}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,94vw);max-height:88vh;overflow:auto;background:rgba(12,12,16,.92);border:1px solid #ffffff22;border-radius:18px;padding:14px 16px 18px;z-index:20;box-shadow:0 20px 60px #000c;touch-action:pan-y}
.phead{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:18px;letter-spacing:.08em;margin-bottom:10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.mbtn{text-align:left;background:linear-gradient(#26262e,#16161b);border:1px solid #ffffff1c;border-radius:12px;padding:12px}
.mbtn b{display:block;font-size:14px;letter-spacing:.05em}.mbtn span{font-size:11px;opacity:.7}
.mbtn:active{border-color:#ffd36b}
.helpcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;font-size:13px;line-height:1.4}
.helpcols h3{margin:4px 0 6px;color:#ffd36b;font-size:13px;letter-spacing:.1em}
.helpcols p{margin:0 0 6px}
.gsec{margin:10px 0}
.gsec h4{margin:0 0 6px;font-size:12px;letter-spacing:.14em;color:#ffd36b}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{background:#22222a;border:2px solid #ffffff1c;border-radius:10px;padding:8px 10px;font-weight:700;font-size:12px;display:flex;align-items:center;gap:6px}
.opt.sel{border-color:#ffd36b;background:#3a2c10}
.sw{width:18px;height:18px;border-radius:50%;border:1px solid #fff6;display:inline-block}
table.lb{width:100%;border-collapse:collapse;font-size:13px}
table.lb td{padding:5px 4px;border-bottom:1px solid #ffffff12}
table.lb tr.mine td{color:#ffd36b;font-weight:800}
table.lb a{color:#8fd0ff}

#garage{left:auto;right:calc(env(safe-area-inset-right) + 10px);transform:translateY(-50%);width:min(440px,50vw)}
@media (orientation:portrait){
  #garage{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;max-height:56vh;border-radius:18px 18px 0 0}
}