:root{--disp:"Michroma", "Eurostile", sans-serif;--body:"Saira Condensed", "Arial Narrow", sans-serif;--amber:#ffae1a;--accent:#ffae1a;--vh:100dvh;--edge:calc(18px + env(safe-area-inset-bottom,0px));--shadow:0 1px 2px #000000d9, 0 0 14px #0000008c}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:var(--vh);overscroll-behavior:none;background:#000;overflow:hidden}body{font-family:var(--body);color:#fff;-webkit-user-select:none;user-select:none;cursor:crosshair}canvas{display:block}body>canvas{position:fixed;top:0;left:0}#hud{width:100%;height:var(--vh);pointer-events:none;text-shadow:var(--shadow);display:none;position:fixed;top:0;left:0}.label{font-family:var(--body);letter-spacing:.22em;text-transform:uppercase;color:#ffffffb8;font-size:12px;font-weight:600}.big{font-family:var(--disp);font-size:26px;line-height:1.15}.tl{position:absolute;top:22px;left:24px}.tl .sub{font-family:var(--disp);letter-spacing:.18em;color:var(--accent);font-size:13px}.tr{text-align:right;position:absolute;top:22px;right:24px}#score{font-family:var(--disp);font-size:34px;line-height:1.15}#dash{left:50%;bottom:calc(var(--edge) - 10px);width:760px;height:274px;transform:translateX(-50%) scale(calc(var(--s,1) * .82));transform-origin:bottom;text-shadow:none;background:radial-gradient(52% 62% at 50% 100%,#0000009e 0%,#00000059 55%,#0000 100%);position:absolute}#cluster{position:absolute;top:0;left:0}#mapBox{right:24px;bottom:var(--edge);width:200px;height:200px;transform:scale(var(--s,1));transform-origin:100% 100%;background:radial-gradient(circle,#0a0e14c7 0%,#06080ce0 100%);border:1px solid #96b4d259;border-radius:50%;position:absolute;overflow:hidden;box-shadow:0 0 0 4px #00000059,0 10px 30px #00000080}#minimap{display:block}#combo{text-align:center;opacity:0;transition:opacity .2s;position:absolute;top:19%;left:50%;transform:translate(-50%)}#combo.on{opacity:1}#comboPts{font-family:var(--disp);color:var(--amber);text-shadow:0 2px #000000b3,0 0 26px #ff8c008c;font-size:52px;line-height:1}#comboMult{font-family:var(--disp);letter-spacing:.12em;color:#2fe6ff;text-shadow:0 0 12px #2fe6ff99, var(--shadow);margin-top:10px;font-size:16px}#comboTag{font-family:var(--disp);letter-spacing:.2em;color:#ff3346;opacity:0;text-shadow:0 0 14px #ff3346b3, var(--shadow);margin-top:6px;font-size:13px;transition:opacity .15s}#comboTag.on{opacity:1;animation:.5s ease-in-out infinite alternate pulse}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.08)}}#flash{font-family:var(--disp);letter-spacing:.05em;color:var(--amber);opacity:0;white-space:nowrap;text-align:center;text-shadow:0 0 20px #ffae1a99, var(--shadow);font-size:24px;position:absolute;top:33%;left:50%;transform:translate(-50%)}#flash.red{color:#ff3346;text-shadow:0 0 20px #ff334699, var(--shadow)}#flash small{font-family:var(--body);letter-spacing:.22em;color:#fff;margin-top:6px;font-size:17px;font-weight:700;display:block}#flash.show{animation:2.2s ease-out forwards flash}@keyframes flash{0%{opacity:0;transform:translate(-50%,10px)scale(.9)}12%{opacity:1;transform:translate(-50%)scale(1.04)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-24px)scale(1)}}@media (width<=760px){#mapBox{display:none}}body.touch{cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}body.touch canvas{touch-action:none}body.touch .tl{top:calc(12px + env(safe-area-inset-top,0px));left:calc(18px + env(safe-area-inset-left,0px))}body.touch .tr{top:calc(12px + env(safe-area-inset-top,0px));right:calc(18px + env(safe-area-inset-right,0px))}body.touch #mapBox{top:calc(40px + env(safe-area-inset-top,0px));bottom:auto;left:calc(18px + env(safe-area-inset-left,0px));transform:scale(calc(var(--ts,1) * .55));transform-origin:0 0;display:block;right:auto}body.touch #dash{bottom:calc(env(safe-area-inset-bottom,0px) - 6px)}#touch{z-index:5;pointer-events:none;touch-action:none;font-family:var(--disp);color:#fff;display:none;position:fixed;inset:0}body.touch.driving #touch{display:block}#touch .pad,#touch .tbtn,#steerZone{pointer-events:auto;touch-action:none}#steerZone{width:46%;position:absolute;top:22%;bottom:0;left:0}#steerZone .stick{left:calc(110px * var(--ts) + env(safe-area-inset-left,0px));top:calc(100% - 92px * var(--ts) - env(safe-area-inset-bottom,0px));width:200px;height:64px;transform:translate(-50%, -50%) scale(var(--ts,1));opacity:.45;background:#00000052;border:1.5px solid #ffffff59;border-radius:32px;transition:opacity .15s;position:absolute}#steerZone .stick.on{opacity:1;transition:none}#steerZone .knob{background:radial-gradient(circle at 40% 35%,#ffffffe6,#c8d2e18c);border-radius:50%;width:58px;height:58px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 2px 10px #00000080}#touch{--pr:calc(16px + env(safe-area-inset-right,0px));--pb:calc(14px + env(safe-area-inset-bottom,0px));--u:calc(var(--ts,1) * 1px)}#touch .pad{font-size:calc(11 * var(--u));letter-spacing:.18em;border-radius:calc(14 * var(--u));text-shadow:var(--shadow);background:#0000004d;border:1.5px solid #ffffff73;place-items:center;transition:transform 60ms,background 60ms;display:grid;position:absolute}#touch .pad.on{transform:scale(.95)}#touch .gas{right:var(--pr);bottom:var(--pb);width:calc(88 * var(--u));height:calc(150 * var(--u));border-color:#46e678bf}#touch .gas.on{background:#32c86473}#touch .brake{right:calc(var(--pr) + 100 * var(--u));bottom:var(--pb);width:calc(88 * var(--u));height:calc(104 * var(--u));border-color:#ff4655cc}#touch .brake.on{background:#ff334673}#touch .hand{right:calc(var(--pr) + 100 * var(--u));bottom:calc(var(--pb) + 116 * var(--u));width:calc(88 * var(--u));height:calc(62 * var(--u));border-color:#ffae1ad9}#touch .hand.on{background:#ffae1a80}#touch .tbtn{min-width:46px;height:40px;font-family:var(--disp);letter-spacing:.12em;color:#fff;background:#00000059;border:1px solid #fff6;border-radius:20px;place-items:center;padding:0 12px;font-size:12px;display:grid;position:absolute}#touch .tbtn:active{background:#ffae1a99}#touch .tbar{top:calc(10px + env(safe-area-inset-top,0px));gap:10px;display:flex;position:absolute;left:50%;transform:translate(-50%)}#touch .tbar .tbtn{position:static}#touch .tbtn[data-act=respawn]{font-family:var(--body);letter-spacing:0;font-size:22px}#touch .shift{width:calc(41 * var(--u));min-width:0;height:calc(44 * var(--u));bottom:calc(var(--pb) + 162 * var(--u));border-radius:calc(10 * var(--u));font-size:20px;display:none}#touch .shift.up{right:var(--pr)}#touch .shift.down{right:calc(var(--pr) + 47 * var(--u))}body.manual #touch .shift{display:grid}body.touch #flash{font-size:calc(15px * var(--ts,1));white-space:normal;width:max-content;max-width:62vw}body.touch #flash small{font-size:calc(11px * var(--ts,1));letter-spacing:.16em;margin-top:4px}body.touch #combo{top:calc(54px + env(safe-area-inset-top,0px))}body.touch #comboPts{font-size:calc(32px * var(--ts,1))}body.touch #comboMult{font-size:calc(12px * var(--ts,1));margin-top:6px}body.touch #comboTag{font-size:calc(10px * var(--ts,1))}.fsbtn{display:none!important}body.touch.fs-api:not(.fs):not(.standalone) #touch .fsbtn{display:grid!important}body.touch:not(.fs):not(.standalone) #start .menu-fs{display:flex!important}.menu-fs{top:calc(14px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));font-family:var(--disp);letter-spacing:.18em;color:#fff;cursor:pointer;background:#0006;border:1px solid #ffffff73;border-radius:20px;align-items:center;gap:8px;padding:9px 14px;font-size:10px;position:fixed}#installHint{z-index:40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#040508b3;justify-content:center;align-items:center;padding:16px;display:none;position:fixed;inset:0}#installHint.on{display:flex}#installHint .help-box{max-width:460px;font-size:15px;line-height:1.4}#installHint .t{font-family:var(--disp);letter-spacing:.24em;color:var(--amber);font-size:16px}#installHint ol{gap:6px;margin:10px 0 0 20px;display:grid}#installHint svg{vertical-align:-3px}#rotate{z-index:50;text-align:center;background:#05060a;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:32px;display:none;position:fixed;inset:0}@media (orientation:portrait){body.touch #rotate{display:flex}}#rotate .t{font-family:var(--disp);letter-spacing:.24em;color:var(--amber);font-size:18px}#rotate .sub{font-family:var(--body);letter-spacing:.16em;text-transform:uppercase;color:#ffffffb3;font-size:14px;font-weight:600}#rotate .phone{border:3px solid #fff;border-radius:9px;width:46px;height:80px;animation:2.2s ease-in-out infinite turn;position:relative}#rotate .phone:after{content:"";background:#fff;border-radius:2px;width:12px;height:3px;margin-left:-6px;position:absolute;bottom:5px;left:50%}@keyframes turn{0%,20%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}to{transform:rotate(0)}}#paused{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#05050cb8;flex-wrap:wrap;justify-content:center;align-items:center;gap:64px;padding:32px;display:none;position:fixed;inset:0;overflow-y:auto}.pause-col{flex-direction:column;gap:14px;display:flex}#paused .t,#help .t{font-family:var(--disp);letter-spacing:.3em;margin-bottom:10px;font-size:22px}#paused .t.small{letter-spacing:.3em;color:var(--amber);margin-bottom:4px;font-size:14px}.keys{font-family:var(--body);letter-spacing:.04em;grid-template-columns:auto 1fr;align-items:center;gap:9px 18px;font-size:15px;display:grid}.keys span{color:#ffffffc7}.k{justify-content:flex-end;gap:5px;display:flex}.k i{min-width:30px;height:26px;font-style:normal;font-family:var(--body);letter-spacing:.08em;color:#fff;background:#ffffff0a;border:1px solid #96b4d259;border-radius:3px;place-items:center;padding:0 8px;font-size:12px;font-weight:700;display:grid}#help{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#04050899;justify-content:center;align-items:center;padding:24px;display:none;position:fixed;inset:0}#help.on{display:flex}.help-box{background:#080b10eb;border:1px solid #96b4d233;gap:18px;max-height:100%;padding:28px 32px;display:grid;overflow-y:auto}.help-box .btn{justify-self:start}.btn{font-family:var(--disp);letter-spacing:.22em;color:#fff;cursor:pointer;background:0 0;border:1px solid #fff9;min-width:240px;padding:14px 30px;font-size:12px}.btn:hover{background:var(--amber);color:#000;border-color:var(--amber)}#start{cursor:default;background:linear-gradient(90deg,#040508eb 0%,#040508b8 34%,#04050800 62%),linear-gradient(#04050800 70%,#04050899 100%);padding:32px 6vw 48px;display:flex;position:fixed;inset:0;overflow-y:auto}.menu{gap:16px;width:min(460px,100%);margin:auto 0;display:grid}#start .eyebrow{font-family:var(--body);letter-spacing:.42em;color:#ff3346;font-size:13px;font-weight:700}#start h1{font-family:var(--disp);letter-spacing:.04em;text-shadow:0 4px 30px #0009;font-size:clamp(42px,min(5.6vw,9vh),84px);font-weight:400;line-height:.92}#start h1 span{color:var(--amber);display:block}#tracks{gap:6px;display:grid}.card{cursor:pointer;text-align:left;color:#fff;font-family:var(--body);background:#ffffff08;border:1px solid #ffffff14;border-left:3px solid #0000;grid-template-columns:34px 1fr auto;align-items:baseline;gap:3px 12px;padding:10px 16px;transition:background .15s,border-color .15s,transform .15s;display:grid;position:relative}.card:hover,.card.active{border-color:#ffffff2e;border-left-color:var(--accent);background:#ffffff14;transform:translate(6px)}.card .num{font-family:var(--disp);color:#ffffff80;font-size:11px}.card .name{font-family:var(--disp);letter-spacing:.04em;font-size:15px}.card .best{letter-spacing:.14em;color:#ffffff8c;font-size:12px;font-weight:600}.card .kind{letter-spacing:.22em;color:#ffcf6a;grid-column:2/4;font-size:12px;font-weight:600}.card .desc{color:#ffffffbf;grid-column:2/4;font-size:14px;line-height:1.35;display:none}.card.active .desc{display:block}.actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.actions .btn{min-width:0;padding:14px 18px}.actions .btn.primary{grid-column:1/-1}.btn.primary{color:#ff3346;letter-spacing:.3em;border-color:#ff3346;padding:16px 40px;font-size:14px}.btn.primary:hover{color:#120204;background:#ff3346;border-color:#ff3346;box-shadow:0 0 32px #ff334680}#start .loading{font-family:var(--body);letter-spacing:.3em;color:var(--amber);min-height:16px;font-size:13px;font-weight:600}.copyright{font-family:var(--body);letter-spacing:.24em;color:#fff9;text-shadow:var(--shadow);text-transform:uppercase;font-size:12px;font-weight:600;position:fixed;bottom:18px;right:24px}@media (height<=820px){.menu{gap:12px}}@media (height<=520px){#start{padding:calc(14px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 14px calc(20px + env(safe-area-inset-left,0px))}.menu{gap:8px;width:min(420px,100%)}#start .eyebrow{font-size:11px}#start h1{font-size:30px}#start h1 span{margin-left:.3em;display:inline}.card{gap:1px 12px;padding:6px 12px}.card .name{font-size:13px}.card .kind{font-size:11px}.card.active .desc{display:none}.actions{grid-template-columns:1.4fr 1fr 1fr;gap:8px}.actions .btn,.actions .btn.primary{letter-spacing:.14em;grid-column:auto;padding:12px 8px;font-size:11px}.copyright{bottom:calc(8px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));font-size:10px}#paused{align-items:flex-start;gap:28px;padding:18px}.btn{min-width:200px;padding:12px 24px}.keys{gap:6px 14px;font-size:14px}.help-box{gap:12px;padding:18px 22px}}@media (height<=520px) and (width<=720px){.copyright{display:none}}@media (hover:none){.card:hover:not(.active){background:#ffffff08;border-color:#ffffff14 #ffffff14 #ffffff14 #0000;transform:none}.btn:hover{color:#fff;background:0 0;border-color:#fff9}.btn.primary:hover{color:#ff3346;box-shadow:none;border-color:#ff3346}}
