html,body{margin:0;height:100%;overflow:hidden;background:#111;font-family:monospace}canvas{display:block}#hud{position:fixed;top:12px;left:16px;color:#fff;font-size:18px;text-shadow:0 0 4px #000;line-height:1.5}#mini{position:fixed;right:12px;bottom:12px;width:240px;height:280px;pointer-events:none}#cmp{position:fixed;left:16px;top:190px;width:270px;background:#0e0e16eb;border-radius:4px;color:#fff;font-family:sans-serif;overflow:hidden}#cmp .r1{display:flex;align-items:center;gap:10px;padding:6px 10px 0 0}#cmp .r1 b{background:#1fa83a;width:30px;height:30px;line-height:30px;text-align:center;font-size:18px}#cmp .nm{flex:1;font-weight:700;font-size:20px;letter-spacing:1px;border-left:2px solid #fff;padding-left:10px}#cmp .tyre{width:18px;height:18px;line-height:18px;text-align:center;font-style:normal;font-size:12px;font-weight:700;border:3px solid #e10600;border-radius:50%}#cmp .r2{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 6px 40px}#cmpDelta{font-size:30px;font-weight:700;color:#ffd400}#cmp .ref{text-align:right;line-height:1.15}#cmp .ref small{display:block;font-size:12px;color:#bbb;letter-spacing:1px}#cmp .ref b{font-size:20px}#cmp .bars{display:flex;gap:3px;background:#111;padding:0 0 4px}#cmp .bars>div{flex:1;text-align:center}#cmp .bars i{display:block;height:5px;background:#4a4a55}#cmp .bars small{font-size:11px;font-weight:700;color:#999}#laps{position:fixed;left:16px;top:312px;color:#fff;font:13px/1.5 monospace;text-shadow:0 0 4px #000;pointer-events:none}#laps b{color:#ffd400;letter-spacing:1px}#toast{position:fixed;top:18%;left:50%;transform:translate(-50%);color:#fff;font-size:24px;font-weight:700;text-shadow:0 0 6px #000;opacity:0;transition:opacity .3s;pointer-events:none}#batt{position:fixed;left:calc(50% + 120px);bottom:26px;width:180px;color:#fff;text-shadow:0 0 6px #000;font-size:12px}#batt .bb{height:14px;background:#0000008c;border:2px solid #fff;border-radius:3px;overflow:hidden;margin:2px 0}#batt i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1fa83a,#7dff5a)}#batt b{font-size:18px}#batt.on i{background:linear-gradient(90deg,#ff9500,#ffe600);box-shadow:0 0 10px #ffb400}#batt.on{color:#ffd400}#batt.low i{background:#e10600}#speedo{position:fixed;left:50%;bottom:20px;transform:translate(-50%);width:200px;text-align:center;color:#fff;text-shadow:0 0 6px #000}#kmh{font-size:56px;font-weight:700;line-height:1}#speedo .u{font-size:13px;opacity:.8;margin-bottom:6px}#bar{height:8px;background:#00000073;border-radius:4px;overflow:hidden}#bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2ecc40,#ffdc00,#ff2020)}#pause{display:none;position:fixed;inset:0;background:#0009;align-items:center;justify-content:center;color:#fff;text-align:center}#pause.on{display:flex}#pause .box{max-height:94vh;overflow-y:auto;padding:0 20px}#tune{text-align:left;width:340px;margin:0 auto 6px}#tune h2{font-size:13px;letter-spacing:2px;color:#ffd400;margin:10px 0 2px}#tune label{display:flex;justify-content:space-between;font-size:12px;margin-top:6px}#pause .sel{outline:3px solid #ffd400;outline-offset:2px}#tune select{width:100%;margin-top:2px;font:inherit;font-size:12px;background:#222;color:#fff;border:1px solid #555;padding:4px}#tune input[type=checkbox]{display:inline;width:auto;margin:0}#tune input{display:block;width:100%;margin:2px 0 0}#pause h1{margin:0 0 16px;letter-spacing:6px}#pause button{display:block;width:220px;margin:8px auto;padding:10px;font:inherit;font-size:16px;cursor:pointer;border:0;border-radius:6px;background:#d40000;color:#fff}#pause button:hover{background:#ff2020}#pause p{font-size:13px;color:#ccc;margin-top:18px;line-height:1.6}#help{position:fixed;bottom:12px;left:16px;color:#ccc;font-size:13px}#touch,#rotate{display:none}body.touch{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body.touch #touch{display:block}body.touch #help{display:none}.tb{position:fixed;z-index:5;display:flex;align-items:center;justify-content:center;color:#fff;font:700 15px sans-serif;letter-spacing:1px;border-radius:18px;border:2px solid rgba(255,255,255,.55);background:#14141e73;text-shadow:0 0 4px #000;touch-action:none;-webkit-user-select:none;user-select:none}.tb.on{background:#ffffff59;transform:scale(.96)}.tb small{display:block;font-size:10px;opacity:.8;font-weight:400}#tLeft,#tRight{bottom:calc(14px + env(safe-area-inset-bottom));width:92px;height:92px;font-size:40px}#tLeft{left:calc(14px + env(safe-area-inset-left))}#tRight{left:calc(124px + env(safe-area-inset-left))}#tGas{right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:104px;height:170px;background:#1eaa3c73;border-color:#7dff5a}#tBrake{right:calc(134px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));width:96px;height:100px;background:#dc141473;border-color:#ff6a5a}#tBoost{right:calc(134px + env(safe-area-inset-right));bottom:calc(124px + env(safe-area-inset-bottom));width:96px;height:56px;background:#fa06;border-color:#ffd400}#tBoost.on{background:#ffc800bf}.ts{top:calc(8px + env(safe-area-inset-top));width:52px;height:40px;border-radius:10px;font-size:13px}#tPause{right:calc(10px + env(safe-area-inset-right))}#tCam{right:calc(70px + env(safe-area-inset-right))}#tMap{right:calc(130px + env(safe-area-inset-right))}#tReset{right:calc(190px + env(safe-area-inset-right))}#tTilt{right:calc(370px + env(safe-area-inset-right))}#tTilt.act{background:#ffd40099;color:#111;text-shadow:none}#tiltBar{display:none;position:fixed;z-index:5;left:calc(24px + env(safe-area-inset-left));bottom:calc(40px + env(safe-area-inset-bottom));width:170px;height:12px;border-radius:6px;background:#14141e80;border:2px solid rgba(255,255,255,.55);pointer-events:none}#tiltBar:before{content:"";position:absolute;left:50%;top:-4px;width:2px;height:16px;background:#fff}#tiltDot{position:absolute;top:-3px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#ffd400}body.tilt #tiltBar{display:block}body.tilt #tLeft,body.tilt #tRight{display:none}body.touch #batt{left:auto;right:calc(240px + env(safe-area-inset-right));bottom:auto;top:calc(8px + env(safe-area-inset-top));width:120px}body.touch #batt small{display:none}body.touch #batt b{font-size:13px}body.touch #speedo{bottom:10px;width:150px}body.touch #kmh{font-size:38px}body.touch #speedo .u{font-size:10px}body.touch #hud{top:6px;left:10px;font-size:13px;line-height:1.25}body.touch #cmp{transform:scale(.7);transform-origin:top left;left:8px;top:96px}body.touch #laps{display:none}body.touch #mini{width:96px;height:112px;right:auto;left:calc(50% + 90px);bottom:8px;opacity:.85}body.touch #toast{font-size:18px;top:12%}body.touch #pause button{padding:8px;margin:5px auto}body.touch #pause h1{margin:6px 0}#ed{display:none;position:fixed;inset:0;z-index:20;pointer-events:none;font-family:sans-serif;color:#fff}body.editing #ed{display:block}body.editing #hud,body.editing #batt,body.editing #speedo,body.editing #cmp,body.editing #laps,body.editing #mini,body.editing #help,body.editing #touch{display:none!important}#ed button{font:700 12px sans-serif;padding:7px 10px;min-height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:#14141ec7;color:#fff;cursor:pointer}#ed button.act{background:#d40000;border-color:#ff6a5a}#edTop{position:absolute;top:calc(6px + env(safe-area-inset-top));left:calc(6px + env(safe-area-inset-left));right:calc(6px + env(safe-area-inset-right));display:flex;gap:4px;pointer-events:auto}#edTop .sp{flex:1}#edPanel{position:absolute;left:calc(6px + env(safe-area-inset-left));right:calc(6px + env(safe-area-inset-right));bottom:calc(6px + env(safe-area-inset-bottom));pointer-events:auto;background:#0e0e16d1;border-radius:10px;padding:6px;font-size:12px}#edPanel>div{display:none;flex-wrap:wrap;gap:4px;align-items:center}#edPanel>div.on{display:flex}#edPanel label{display:flex;align-items:center;gap:6px}#edPanel input[type=range]{width:110px}#edMsg{position:absolute;top:calc(52px + env(safe-area-inset-top));left:50%;transform:translate(-50%);background:#0009;padding:4px 10px;border-radius:6px;font-size:12px;text-align:center;pointer-events:none;max-width:80%}#rotate{position:fixed;inset:0;z-index:99;background:#111;color:#fff;text-align:center;align-items:center;justify-content:center;flex-direction:column;font:20px sans-serif}#rotate div{font-size:64px}@media(orientation:portrait){body.touch #rotate{display:flex}}