@font-face{font-family:Orbitron;src:url(./Orbitron-DbOLnAFv.ttf) format("truetype");font-weight:400 900;font-display:swap}:root{--hf-bg-veil: rgba(5, 3, 12, .86);--hf-panel: rgba(8, 12, 30, .72);--hf-panel-thin: rgba(8, 12, 30, .38);--hf-panel-on: rgba(41, 211, 255, .14);--hf-line: rgba(130, 170, 220, .4);--hf-ink: #eaf6ff;--hf-muted: #8fa9c4;--hf-cyan: #29d3ff;--hf-cyan-soft: #9ff3ff;--hf-pink: #ff2bd6;--hf-pink-soft: #ff8ae6;--hf-gold: #ffc94a;--hf-green: #7dffb0;--hf-red: #ff6b6b;--hf-font-ui: "Orbitron", system-ui, sans-serif;--hf-font-text: system-ui, -apple-system, "Malgun Gothic", sans-serif;--hf-text-xs: 10px;--hf-text-s: 12px;--hf-text-m: 15px;--hf-track: .08em;--hf-space-1: 4px;--hf-space-2: 8px;--hf-space-3: 12px;--hf-space-4: 16px;--hf-space-6: 24px;--hf-hit-s: clamp(48px, 13vh, 64px);--hf-hit-m: clamp(56px, 17vh, 88px);--hf-hit-l: clamp(72px, 24vh, 124px);--hf-cut: 10px;--hf-border: 1.5px;--hf-press-ms: 80ms;--hf-fade-ms: .16s;--hf-z-controls: 5;--hf-z-veil: 10;--hf-edge-l: calc(var(--hf-space-4) + env(safe-area-inset-left, 0px));--hf-edge-r: calc(var(--hf-space-4) + env(safe-area-inset-right, 0px));--hf-edge-b: calc(var(--hf-space-4) + env(safe-area-inset-bottom, 0px));--hf-edge-t: calc(var(--hf-space-2) + env(safe-area-inset-top, 0px));--hf-shape: polygon(var(--hf-cut) 0, 100% 0, 100% calc(100% - var(--hf-cut)), calc(100% - var(--hf-cut)) 100%, 0 100%, 0 var(--hf-cut));--hf-in: calc(var(--hf-border) * .414);--hf-ring: polygon(evenodd, var(--hf-cut) 0, 100% 0, 100% calc(100% - var(--hf-cut)), calc(100% - var(--hf-cut)) 100%, 0 100%, 0 var(--hf-cut), var(--hf-cut) 0, calc(var(--hf-cut) + var(--hf-in)) var(--hf-border), var(--hf-border) calc(var(--hf-cut) + var(--hf-in)), var(--hf-border) calc(100% - var(--hf-border)), calc(100% - var(--hf-cut) - var(--hf-in)) calc(100% - var(--hf-border)), calc(100% - var(--hf-border)) calc(100% - var(--hf-cut) - var(--hf-in)), calc(100% - var(--hf-border)) var(--hf-border), calc(var(--hf-cut) + var(--hf-in)) var(--hf-border))}html.hf-touch,html.hf-touch body,html.hf-touch canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#hf-pad{position:fixed;inset:0;z-index:var(--hf-z-controls);pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--hf-fade-ms) ease-out,visibility 0s linear var(--hf-fade-ms)}#hf-pad.on{opacity:1;visibility:visible;transition:opacity var(--hf-fade-ms) ease-out}#hf-pad.on .hf-slot:not([hidden]){pointer-events:auto}.hf-slot{position:absolute;touch-action:none;--k: var(--hf-cyan-soft)}.hf-slot.s{width:var(--hf-hit-s);height:var(--hf-hit-s)}.hf-slot.m{width:var(--hf-hit-m);height:var(--hf-hit-m)}.hf-slot.l{width:var(--hf-hit-l);height:var(--hf-hit-l)}.hf-slot.glow.on{filter:drop-shadow(0 0 var(--hf-space-2) var(--k))}.hf-b{--c: var(--hf-line);--f: var(--hf-panel-thin);position:absolute;inset:0;clip-path:var(--hf-shape);background:var(--f);transition:transform var(--hf-press-ms) ease-out}.hf-b:before{content:"";position:absolute;inset:0;clip-path:var(--hf-ring);background:var(--c)}.hf-slot.on .hf-b{--f: var(--hf-panel-on);--c: var(--k);transform:scale(.94)}.hf-slot.ready .hf-b{--c: var(--k)}.hf-name,.hf-sub{position:absolute;left:0;right:0;font:700 var(--hf-text-s) / 1 var(--hf-font-ui);letter-spacing:var(--hf-track);text-align:center;color:var(--n, var(--hf-ink))}.hf-name{bottom:var(--hf-space-2)}.hf-slot.s .hf-name{bottom:auto;top:50%;transform:translateY(-50%);font-size:var(--hf-text-xs)}.hf-sub{bottom:calc(var(--hf-space-2) + var(--hf-text-s) + var(--hf-space-1));font-size:var(--hf-text-xs);color:var(--hf-muted)}.hf-drift{--k: var(--hf-pink);--n: var(--hf-pink-soft)}.hf-nitro{--k: var(--hf-pink-soft);--n: var(--hf-pink-soft)}.hf-brake{--k: var(--hf-red)}.hf-item{--k: var(--hf-green);--n: var(--hf-green)}.hf-gas{--k: var(--hf-gold);--n: var(--hf-gold)}.hf-quit{--k: var(--hf-red)}.hf-pause{--k: var(--hf-cyan)}.hf-drift,.hf-gas{right:var(--hf-edge-r);bottom:var(--hf-edge-b)}.hf-nitro{right:calc(var(--hf-edge-r) + (var(--hf-hit-l) - var(--hf-hit-m)) / 2);bottom:calc(var(--hf-edge-b) + var(--hf-hit-l) + var(--hf-space-2))}.hf-brake{right:calc(var(--hf-edge-r) + var(--hf-hit-l) + var(--hf-space-2));bottom:var(--hf-edge-b)}.hf-item{right:calc(var(--hf-edge-r) + var(--hf-hit-l) + var(--hf-space-2));bottom:calc(var(--hf-edge-b) + var(--hf-hit-m) + var(--hf-space-2))}.hf-spin{right:calc(var(--hf-edge-r) + var(--hf-hit-l) + var(--hf-hit-m) + var(--hf-space-2) * 2);bottom:var(--hf-edge-b)}.hf-zone{left:0;bottom:0;width:46vw;height:72vh}.hf-steer{--d: calc(var(--hf-hit-l) * 1.45);left:var(--hf-edge-l);bottom:var(--hf-edge-b);width:var(--d);height:var(--d);--k: var(--hf-cyan);pointer-events:none}#hf-pad.on .hf-steer:not([hidden]){pointer-events:auto}.hf-steer.held{bottom:auto}.hf-ring{position:absolute;inset:0;border-radius:50%;background:var(--hf-panel-thin);border:var(--hf-border) solid var(--hf-line);transition:border-color var(--hf-press-ms) ease-out,background var(--hf-press-ms) ease-out}.hf-steer.held .hf-ring{background:var(--hf-panel-on);border-color:var(--hf-cyan-soft)}.hf-ring svg{position:absolute;top:50%;width:22%;height:22%;transform:translateY(-50%);stroke:var(--hf-muted);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.hf-ring svg:first-child{left:6%}.hf-ring svg:last-child{right:6%}.hf-knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:#29d3ff47;border:var(--hf-border) solid var(--hf-cyan);box-shadow:0 0 var(--hf-space-2) #29d3ff73}.hf-steer.on .hf-knob{background:#29d3ff80}.hf-steerL,.hf-steerR{bottom:var(--hf-edge-b);--k: var(--hf-cyan)}.hf-steerL{left:var(--hf-edge-l)}.hf-steerR{right:var(--hf-edge-r)}.hf-slot>svg{position:absolute;left:50%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);stroke:var(--n, var(--hf-cyan-soft));fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.hf-slot.on>svg{stroke:var(--hf-ink)}.hf-driftL,.hf-driftR{--k: var(--hf-pink);--n: var(--hf-pink-soft);bottom:calc(var(--hf-edge-b) + var(--hf-hit-l) + var(--hf-space-2))}.hf-driftL{left:var(--hf-edge-l)}.hf-driftR{right:var(--hf-edge-r)}.hf-driftL>svg,.hf-driftR>svg{top:34%;width:34%;height:34%}#hf-pad.split .hf-nitro{right:calc(var(--hf-edge-r) + var(--hf-hit-m) + var(--hf-space-2));bottom:calc(var(--hf-edge-b) + var(--hf-hit-l) + var(--hf-space-2))}#hf-pad.split .hf-brake{right:auto;left:calc(var(--hf-edge-l) + var(--hf-hit-m) + var(--hf-space-2));bottom:calc(var(--hf-edge-b) + var(--hf-hit-l) + var(--hf-space-2))}#hf-pad.split .hf-item{right:calc(var(--hf-edge-r) + var(--hf-hit-l) + var(--hf-space-2));bottom:var(--hf-edge-b)}#hf-pad.split .hf-spin{right:auto;left:calc(var(--hf-edge-l) + var(--hf-hit-l) + var(--hf-space-2));bottom:var(--hf-edge-b)}.hf-cam{right:calc(50% + var(--hf-lap-w, 180px) / 2 + var(--hf-space-2));top:var(--hf-edge-t)}.hf-quit,.hf-pause{left:calc(50% + var(--hf-lap-w, 180px) / 2 + var(--hf-space-2));top:var(--hf-edge-t)}#hf-turn{position:fixed;inset:0;z-index:var(--hf-z-veil);display:none;align-items:center;justify-content:center;padding:var(--hf-space-6);background:var(--hf-bg-veil);color:var(--hf-ink);font:var(--hf-text-m) / 1.6 var(--hf-font-text);text-align:center}#hf-turn.on{display:flex}#hf-turn svg{display:block;margin:0 auto var(--hf-space-3);width:56px;height:56px;stroke:var(--hf-cyan);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}#hf-turn b{font-family:var(--hf-font-ui);letter-spacing:var(--hf-track);color:var(--hf-cyan)}#hf-turn p{margin:0}#hf-turn .hint{color:var(--hf-muted)}#hf-turn button{position:relative;margin-top:var(--hf-space-4);padding:var(--hf-space-2) var(--hf-space-6);min-height:48px;border:0;border-radius:0;clip-path:var(--hf-shape);background:var(--hf-panel);color:var(--hf-cyan);font:700 var(--hf-text-m) / 1 var(--hf-font-text)}#hf-turn button:before{content:"";position:absolute;inset:0;clip-path:var(--hf-ring);background:var(--hf-cyan)}#hf-turn button:active{background:var(--hf-panel-on)}#hf-turn button:focus-visible{outline:var(--hf-border) solid var(--hf-cyan-soft);outline-offset:calc(var(--hf-space-1) * -2)}@media(prefers-reduced-motion:reduce){.hf-b,#hf-pad,#hf-pad.on{transition:none}.hf-slot.on .hf-b{transform:none}}
