html,body,#app{width:100%;height:100%;margin:0}body{font-family:Arial,sans-serif;overflow:hidden}#app{position:relative}#renderCanvas{touch-action:none;width:100vw;max-width:100%;height:100vh;max-height:100%;display:block}#hud{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;z-index:10;background:linear-gradient(#0f1a30cc 0%,#080e1ebd 100%);border:1px solid #ffffff47;border-radius:12px;min-width:190px;padding:14px;position:absolute;top:16px;left:16px;box-shadow:0 10px 24px #0000004d}#hudTitle{letter-spacing:.08em;margin-bottom:8px;font-size:18px;font-weight:700}#hud>div{margin-bottom:8px}#hud,#hud *,#joystick,#joystick *{-webkit-user-select:none;user-select:none}#carInfo{color:#fff;background:#ffffff1f;border:1px solid #ffffff59;border-radius:10px;margin-bottom:5px;padding:8px;font-size:14px}.buttonGroup{gap:12px;margin:5px;display:flex}.buttonGroup .btn{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff59;border-radius:10px;justify-content:center;align-items:center;width:46px;height:40px;font-size:22px;transition:background-color .2s;display:flex}.buttonGroup .btnTitle{-webkit-user-select:none;user-select:none;align-items:center;font-size:12px;display:flex}#cameraInfo{margin:10px;font-size:14px}.hudGroup{background:#ffffff14;border:1px solid #ffffff40;border-radius:10px;margin:8px 0;padding:8px}.hudGroupTitle{letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:700}.gearButtons{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;display:grid}.gearBtn{min-width:0;font-weight:700;width:100%!important;height:32px!important;font-size:14px!important}.gearBtn.active{box-shadow:0 0 12px #7dffbe4d;background:#78ebaa5c!important;border-color:#9bffc4d9!important}#gearInfo{margin-top:6px;font-size:13px}#gearHintInfo{color:#fffc;margin-top:2px;font-size:11px}#yInfo.height-ok{color:#b8ffd1}#yInfo.height-warning{color:#ff9a9a;text-shadow:0 0 10px #ff787873;font-weight:700}#toggleCameraLight{justify-content:center;align-items:center;width:46px;height:40px;padding:0;font-size:22px;line-height:1;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s;display:inline-flex}#toggleCameraLight.light-on{color:#ffe27a;text-shadow:0 0 10px #ffe382a6;background:#ffd74038;border-color:#ffe27ab3;box-shadow:0 0 16px #ffd7404d}#toggleCameraLight.light-on:hover{background:#ffd74052;transform:translateY(-1px)}#toggleCameraLight.light-off{color:#b9c0cf;text-shadow:none;background:#5a606e3d;border-color:#96a0b480;box-shadow:0 0 10px #78829624}#toggleCameraLight.light-off:hover{background:#6e768652;transform:translateY(-1px)}#toggleEngine{justify-content:center;align-items:center;width:46px;height:40px;padding:0;font-size:22px;line-height:1;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s;display:inline-flex}#toggleEngine.engine-on{color:#7aff7a;text-shadow:0 0 10px #82ff82a6;background:#40ff4038;border-color:#7aff7ab3;box-shadow:0 0 16px #40ff404d}#toggleEngine.engine-on:hover{background:#40ff4052;transform:translateY(-1px)}#toggleEngine.engine-off{color:#cfb9b9;text-shadow:none;background:#6e5a5a3d;border-color:#b4969680;box-shadow:0 0 10px #96787824}#toggleEngine.engine-off:hover{background:#866e6e52;transform:translateY(-1px)}#joystick{touch-action:none;z-index:1000;flex-direction:column;align-items:center;width:160px;height:160px;display:flex;position:absolute;bottom:40px;right:40px}#joystick-label{color:#ffffffb3;-webkit-user-select:none;user-select:none;margin-bottom:4px;font-size:16px}#joystick-base{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;background:#fff3;border:3px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:background-color .2s;display:flex;position:absolute;box-shadow:0 4px 16px #0003}#joystick-base:hover{background:#ffffff40;border-color:#ffffff80}#joystick-handle{background:#ffffffe6;border:3px solid #fff;border-radius:50%;width:50px;height:50px;transition:transform .1s;position:relative;box-shadow:0 4px 12px #0006}#pwaUpdateBanner{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;opacity:0;pointer-events:none;z-index:1200;background:#080e1ed6;border:1px solid #ffffff59;border-radius:12px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;transition:opacity .2s,transform .2s;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%,12px);box-shadow:0 8px 24px #00000059}#pwaUpdateBanner.visible{opacity:1;pointer-events:auto;transform:translate(-50%)}#pwaUpdateText{font-size:13px;line-height:1.2}#pwaUpdateButton{color:#e8fff2;cursor:pointer;background:#78ebaa57;border:1px solid #9bffc4d9;border-radius:9px;padding:6px 10px;font-size:13px;font-weight:700}#pwaUpdateButton:disabled{cursor:default;opacity:.7}#pwaUpdateLaterButton{color:#fff;cursor:pointer;background:#ffffff1f;border:1px solid #ffffff59;border-radius:9px;padding:6px 10px;font-size:13px}@media (width<=768px){#renderCanvas{width:100vw;height:100vh}#hud{padding:10px;top:12px;left:12px}#joystick{width:140px;height:140px;bottom:30px;right:30px}#joystick-handle{width:45px;height:45px}#pwaUpdateBanner{width:max-content;max-width:calc(100vw - 24px)}}