:root{--cyan:#3cf0ff;--pink:#ff3ec8;--amber:#ffb52e;--text:#e8f3ff;--dim:#8aa0c0;--panel:#060a1cb8;--hud-font:"Orbitron", "Segoe UI", system-ui, sans-serif;--body-font:"Rajdhani", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--text);font-family:var(--body-font);-webkit-user-select:none;user-select:none;background:#02030a;margin:0;overflow:hidden}#game{width:100%;height:100%;display:block;position:fixed;inset:0}.hidden{display:none!important}kbd{font-family:var(--hud-font);opacity:.7;border:1px solid;border-radius:4px;margin-left:6px;padding:1px 5px;font-size:.7em}.screen{text-align:center;background:radial-gradient(#04061459,#02030ad9);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:fixed;inset:0}h1{font-family:var(--hud-font);letter-spacing:.08em;color:#fff;text-shadow:0 0 18px var(--cyan), 0 0 40px #3cf0ff80;margin:0;font-size:clamp(48px,9vw,120px);font-weight:900}h1 span{color:var(--pink);text-shadow:0 0 18px var(--pink), 0 0 40px #ff3ec880;margin-left:.2em}h2{font-family:var(--hud-font);letter-spacing:.1em;text-shadow:0 0 14px var(--cyan);margin:0;font-size:clamp(28px,4vw,48px)}.prompt{font-family:var(--hud-font);letter-spacing:.08em;color:var(--cyan);font-size:20px}.blink{animation:1.6s ease-in-out infinite blink}@keyframes blink{50%{opacity:.35}}.buttons{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}button{font-family:var(--hud-font);letter-spacing:.06em;color:var(--text);cursor:pointer;background:#14285080;border:1px solid #3cf0ff80;border-radius:6px;padding:10px 20px;font-size:15px;transition:background .15s,box-shadow .15s}button:hover{background:#3cf0ff2e;box-shadow:0 0 16px #3cf0ff66}.devices{font-family:var(--body-font);color:var(--dim);background:var(--panel);white-space:pre-wrap;border-radius:8px;max-width:720px;margin:0;padding:10px 16px;font-size:15px}.help{color:var(--dim);font-size:16px;line-height:1.6}.help b{color:var(--text);font-weight:600}.hint{color:var(--amber);font-size:14px}#calib .step{font-family:var(--hud-font);color:var(--amber);text-shadow:0 0 12px #ffb52e99;font-size:clamp(24px,3.5vw,40px)}#calib .detail{color:var(--dim);min-height:1.4em;font-size:20px}#calib .live{font-family:var(--hud-font);color:var(--cyan);min-height:1.4em;font-size:14px}.progress{background:#ffffff1a;border-radius:4px;width:min(420px,80vw);height:8px;overflow:hidden}.progress>div{background:linear-gradient(90deg, var(--cyan), var(--pink));width:0;height:100%;transition:width 80ms linear}.settings-grid{text-align:left;background:var(--panel);border-radius:10px;grid-template-columns:240px 260px;align-items:center;gap:8px 18px;padding:18px 22px;font-size:17px;display:grid}.settings-grid small{color:var(--dim);grid-column:1/-1;margin-top:-4px;font-size:14px}.settings-grid output{color:var(--cyan);font-family:var(--hud-font);margin-left:6px;font-size:13px}.settings-grid select{font:inherit;color:var(--text);background:#0b1430;border:1px solid #3cf0ff66;border-radius:4px;padding:4px 8px}input[type=range]{accent-color:var(--cyan);width:100%}.live-input{gap:6px;width:min(520px,90vw);display:grid}.li-row{text-align:left;grid-template-columns:60px 1fr;align-items:center;gap:10px;display:grid}.li-bar{background:#ffffff14;border-radius:6px;height:12px;position:relative;overflow:hidden}.li-bar.center:before{content:"";background:#ffffff4d;width:1px;position:absolute;top:0;bottom:0;left:50%}.li-bar .fill{width:0;height:100%}.li-bar .knob{background:var(--cyan);width:10px;box-shadow:0 0 8px var(--cyan);border-radius:5px;margin-left:-5px;position:absolute;top:0;bottom:0}.fill.gas{background:linear-gradient(90deg,#2dff9c,#b5ff3b)}.fill.brake{background:linear-gradient(90deg,#ff3b6b,#ff8a3b)}.lamp{background:#ffffff1a;border-radius:50%;width:18px;height:18px}.lamp.on{background:var(--amber);box-shadow:0 0 12px var(--amber)}#results-table{border-collapse:collapse;background:var(--panel);border-radius:10px;min-width:min(560px,92vw);font-size:20px;overflow:hidden}#results-table td{text-align:left;padding:8px 18px}#results-table tr:nth-child(odd){background:#ffffff08}#results-table tr.me{color:var(--cyan);font-weight:600}#results-table td:first-child{font-family:var(--hud-font);font-size:16px}#results-table .dim{color:var(--dim);font-size:16px}.dot{vertical-align:middle;border-radius:50%;width:10px;height:10px;margin-right:10px;display:inline-block}#hud{pointer-events:none;font-family:var(--hud-font);position:fixed;inset:0}.label{letter-spacing:.2em;color:var(--dim);font-size:12px}.hud-tl{gap:28px;display:flex;position:absolute;top:22px;left:26px}.hud-tl .stat{flex-direction:column;display:flex}.hud-tl .big{text-shadow:0 0 10px #3cf0ff99;font-size:38px;font-weight:700}.hud-tr{text-align:right;font-size:20px;position:absolute;top:22px;right:26px}.hud-tr .row{justify-content:flex-end;align-items:baseline;gap:14px;display:flex}.hud-tr .label{text-align:right;width:48px}.hud-br{text-align:right;position:absolute;bottom:26px;right:30px}#hud-speed{text-shadow:0 0 16px #3cf0ffb3;font-variant-numeric:tabular-nums;font-size:72px;font-weight:900;line-height:1}.boostbar{background:#ffffff1a;border-radius:5px;width:240px;height:10px;margin:14px 0 4px auto;overflow:hidden}#hud-boost{background:linear-gradient(90deg, var(--amber), #ffe36b);height:100%;transition:width .1s linear}#hud-boost.active{background:linear-gradient(90deg, var(--pink), var(--cyan));box-shadow:0 0 12px var(--pink)}.hud-bl{position:absolute;bottom:20px;left:20px}#minimap{background:#0408188c;border:1px solid #3cf0ff40;border-radius:50%}#inputviz{opacity:.75;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}#inputviz .steer{background:#ffffff1f;border-radius:4px;width:200px;height:8px;margin-bottom:4px;position:relative}#inputviz .steer:before{content:"";background:#fff6;width:1px;position:absolute;top:-3px;bottom:-3px;left:50%}#inputviz .knob{background:var(--cyan);width:12px;height:12px;box-shadow:0 0 8px var(--cyan);border-radius:50%;margin-left:-6px;position:absolute;top:-2px}#inputviz .pedal{background:#ffffff1f;border-radius:3px;width:10px;height:46px;position:relative;overflow:hidden}#inputviz .pedal .fill{height:0;position:absolute;bottom:0;left:0;right:0}#inputviz .fill.gas{background:linear-gradient(#b5ff3b,#2dff9c)}#inputviz .fill.brake{background:linear-gradient(#ff8a3b,#ff3b6b)}#countdown{text-align:center;color:#fff;text-shadow:0 0 30px var(--pink), 0 0 60px var(--cyan);font-size:clamp(80px,14vw,180px);font-weight:900;position:absolute;top:34%;left:0;right:0}#message{text-align:center;color:var(--amber);text-shadow:0 0 14px #ffb52eb3;font-size:clamp(22px,3vw,36px);font-weight:700;position:absolute;top:22%;left:0;right:0}.pop{animation:.45s cubic-bezier(.2,1.6,.4,1) pop}@keyframes pop{0%{opacity:0;transform:scale(1.8)}to{opacity:1;transform:scale(1)}}#settings{justify-content:safe center;overflow-y:auto}.ffb-panel{background:var(--panel);border-radius:10px;flex-direction:column;align-items:center;gap:10px;width:min(560px,92vw);padding:14px 22px;display:flex}.ffb-panel .settings-grid{background:0 0;grid-template-columns:220px 220px;padding:0}.ffb-head{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:14px;font-size:18px;display:flex}.ffb-status{color:var(--amber);font-size:16px}.ffb-details{color:var(--dim);white-space:pre-wrap;text-align:left;margin:0;font-size:12px}.ffb-details:empty{display:none}input[type=checkbox]{accent-color:var(--cyan);justify-self:start;width:18px;height:18px}.li-bar .knob.ffb{background:var(--pink);box-shadow:0 0 8px var(--pink)}body:not(.touch) .touch-only,body.touch .wheel-only{display:none!important}body.touch kbd,body.no-hid .ffb-panel{display:none}html,body{touch-action:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.screen{touch-action:pan-y;justify-content:safe center;overflow-y:auto}button{touch-action:manipulation}#touch{pointer-events:none;z-index:5;position:fixed;inset:0}.tcluster{bottom:calc(16px + env(safe-area-inset-bottom));align-items:flex-end;gap:12px;display:flex;position:absolute}.tleft{left:calc(16px + env(safe-area-inset-left))}.tright{right:calc(16px + env(safe-area-inset-right))}.tbtn{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:92px;height:92px;font-family:var(--hud-font);letter-spacing:.06em;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#14285a47;border:2px solid #3cf0ff8c;border-radius:24px;padding:0;font-size:14px;font-weight:700;transition:transform 50ms,background 50ms}.tbtn.on{background:#3cf0ff59;transform:scale(.94)}.tbtn.steer{font-size:30px}.tbtn.brake{border-color:#ff466eb3}.tbtn.brake.on{background:#ff466e66}.tbtn.boost{border-color:#ff3ec8bf;height:120px}.tbtn.boost.on{background:#ff3ec873}.tbtn.gas{border-color:#2dff9cb3;height:120px}.tbtn.gas.on{background:#2dff9c59}.tbtn.pause{top:calc(8px + env(safe-area-inset-top));border-radius:12px;width:54px;height:40px;font-size:14px;position:absolute;left:50%;transform:translate(-50%)}.tbtn.pause.on{transform:translate(-50%)scale(.94)}#touch.tilt .steer,#touch.tilt .brake-r,#touch:not(.tilt) .brake-l,#touch.auto .gas,#rotate{display:none}@media (orientation:portrait){body.touch #rotate{z-index:50;font-family:var(--hud-font);text-align:center;background:#02030a;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;font-size:18px;display:flex;position:fixed;inset:0}.rotate-icon{font-size:64px;animation:2s ease-in-out infinite rot}@keyframes rot{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}}body.touch #inputviz{display:none}body.touch .hud-tl{top:calc(10px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));gap:18px}body.touch .hud-tr{top:calc(10px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));font-size:14px}body.touch .hud-tl .big{font-size:26px}body.touch .hud-br{left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));text-align:center;transform:translate(-50%)}body.touch #hud-speed{font-size:40px}body.touch .boostbar{width:160px;margin:6px auto 2px}body.touch .hud-bl{bottom:auto;top:calc(70px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}body.touch #minimap{width:100px;height:100px}body.touch .label{font-size:10px}@media (height<=500px){h1{font-size:44px}h2{font-size:26px}.screen{gap:10px;padding:12px 16px}.prompt{font-size:15px}button{padding:8px 14px;font-size:13px}.help{font-size:14px}.settings-grid{grid-template-columns:minmax(150px,220px) minmax(150px,240px);padding:10px 16px;font-size:15px}#results-table{font-size:15px}#results-table td{padding:4px 12px}#countdown{font-size:90px}}
