:root{color-scheme:dark;--ink:#ecf7ff;--muted:#8190aa;--cyan:#69e8ff;--pink:#ff668f;--violet:#ac7dff;--lime:#b9ffca;--night:#070b16;--glass:rgba(9,16,31,.74);--line:rgba(169,194,229,.19);--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
html,body{position:fixed;inset:0;width:100%;height:100%;height:100dvh;margin:0;overflow:hidden;overscroll-behavior:none;background:#060913;color:var(--ink);touch-action:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body,input,button{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
#app,#world,#speed-lines,.screen,.screen-noise,.vignette{position:absolute;inset:0;width:100%;height:100%}
#world{display:block;background:linear-gradient(180deg,#090e21 0%,#172445 49%,#090d17 100%)}
#speed-lines,.screen-noise,.vignette{pointer-events:none}
#speed-lines{z-index:2;mix-blend-mode:screen;opacity:.92}
.screen-noise{z-index:3;opacity:.075;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(151,192,235,.2) 4px);mix-blend-mode:screen}
.vignette{z-index:3;background:radial-gradient(ellipse at 52% 46%,transparent 36%,rgba(4,6,16,.25) 75%,rgba(3,5,13,.69) 100%)}
.screen{z-index:5;padding:calc(30px + var(--safe-t)) calc(45px + var(--safe-r)) calc(28px + var(--safe-b)) calc(45px + var(--safe-l))}
.is-hidden{display:none!important}
.eyebrow,.hud-label,.loading-kicker,.machine-class{color:var(--cyan);font-size:10px;font-weight:680;letter-spacing:.19em;line-height:1.5}
.status-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:status-pulse 1.6s infinite}
@keyframes status-pulse{50%{opacity:.4;transform:scale(.8)}}
.loading-screen{z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 41%,#121c35 0%,#070b16 58%,#04060d 100%)}
.loading-inner{width:min(430px,82vw)}
.loading-kicker{margin-bottom:16px;color:#a8b6cb}
.loading-logo{font-size:clamp(45px,9vw,76px);font-weight:860;letter-spacing:-.08em;line-height:1}
.loading-logo span,.main-logo span{color:var(--cyan)}
.loading-rule{position:relative;height:2px;margin-top:30px;background:rgba(255,255,255,.14);overflow:hidden}
.loading-rule span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 12px var(--cyan);transition:width .16s linear}
.loading-meta{display:flex;justify-content:space-between;margin-top:11px;color:var(--muted);font-size:9px;font-weight:650;letter-spacing:.14em}
.loading-tip{margin-top:27px;color:#a9b5c7;font-size:12px}
.title-screen{display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(90deg,rgba(4,7,15,.82) 0%,rgba(5,8,18,.39) 44%,transparent 81%)}
.title-top,.title-footer{display:flex;justify-content:space-between;gap:18px;color:#b2bdd0;font-size:9px;font-weight:650;letter-spacing:.16em}
.title-block{width:min(530px,63vw);margin-top:-15px}
.main-logo{margin:12px 0 0;font-size:clamp(76px,12vw,142px);font-weight:900;letter-spacing:-.092em;line-height:.81;text-shadow:0 0 45px rgba(105,232,255,.13)}
.logo-break{display:none}
.tagline{margin:17px 0 31px;color:#d9e4f2;font-size:11px;font-weight:650;letter-spacing:.28em}
.title-actions,.result-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.button{position:relative;min-height:43px;padding:0 17px;border:1px solid rgba(160,183,221,.24);border-radius:2px;background:rgba(13,21,38,.59);font-size:10px;font-weight:760;letter-spacing:.11em;white-space:nowrap;transition:background .16s,border-color .16s,transform .16s}
.button:active{transform:scale(.965)}
.button-primary{border-color:rgba(105,232,255,.72);background:rgba(29,116,141,.29);box-shadow:inset 0 0 24px rgba(105,232,255,.09),0 0 25px rgba(61,169,194,.09)}
.button-primary:hover{background:rgba(35,145,174,.39)}
.button-primary span{margin-left:13px;color:var(--cyan)}
.button-ghost:hover{border-color:rgba(196,215,248,.55);background:rgba(26,37,61,.76)}
.select-screen{background:linear-gradient(90deg,rgba(5,8,16,.82) 0%,rgba(5,8,16,.56) 34%,transparent 78%)}
.panel-header,.modal-card header{display:flex;align-items:center;justify-content:space-between}
.panel-header h2,.modal-card h2{margin:5px 0 0;font-size:clamp(18px,3vw,28px);font-weight:760;letter-spacing:-.025em}
.icon-button{width:39px;height:39px;border:1px solid var(--line);background:rgba(8,13,25,.56);font-size:20px}
.selection-content{position:absolute;right:calc(45px + var(--safe-r));bottom:calc(32px + var(--safe-b));left:calc(45px + var(--safe-l))}
.machine-copy{width:min(415px,42vw);margin-bottom:21px}
.machine-copy h3{margin:4px 0 7px;font-size:clamp(27px,5vw,49px);font-weight:830;letter-spacing:-.065em;line-height:1}
.machine-copy p{min-height:32px;margin:0 0 14px;color:#c1cad9;font-size:11px;line-height:1.55}
.machine-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.stat-row{display:grid;grid-template-columns:75px 1fr;align-items:center;gap:7px;color:#b2bed0;font-size:8px;font-weight:680;letter-spacing:.09em}
.stat-bar{height:3px;background:rgba(255,255,255,.14)}
.stat-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 8px rgba(105,232,255,.36)}
.selection-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px}
.machine-options{display:flex;gap:8px}
.machine-option{width:71px;height:43px;border:1px solid rgba(193,206,228,.24);background:rgba(11,17,31,.62);color:#afbed3;font-size:9px;font-weight:730;letter-spacing:.1em}
.machine-option.active{border-color:var(--cyan);background:rgba(43,128,149,.24);color:#f3fbff}
.course-badge{position:absolute;top:calc(34px + var(--safe-t));right:calc(105px + var(--safe-r));display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:#bac6d9;font-size:8px;letter-spacing:.11em}
.course-badge strong{color:#edf8ff;font-size:14px;letter-spacing:.08em}
.hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.hud-top{position:absolute;top:calc(22px + var(--safe-t));right:calc(29px + var(--safe-r));left:calc(29px + var(--safe-l));display:flex;align-items:flex-start;justify-content:space-between}
.position-display,.lap-display,.speed-display,.boost-panel{filter:drop-shadow(0 2px 5px rgba(0,0,0,.82))}
.position-display{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;width:130px}
.position-display .hud-label,.lap-display .hud-label,.speed-display .hud-label{flex-basis:100%;display:block}
.position-display>strong{font-size:clamp(37px,6.2vw,68px);font-weight:860;letter-spacing:-.095em;line-height:.91}
.position-total{color:#c9d5e4;font-size:14px}
.lap-display{text-align:center}
.lap-display strong{display:block;margin:2px 0 1px;font-size:26px;line-height:1}
.lap-display strong span{color:#b9c5d7;font-size:13px}
.hud-time{color:#d6e4f4;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.09em}
.pause-button{width:34px;height:34px;border:1px solid rgba(215,229,246,.25);background:rgba(9,15,28,.58);font-size:17px;pointer-events:auto}
.hud-bottom{position:absolute;right:calc(27px + var(--safe-r));bottom:calc(105px + var(--safe-b));left:calc(27px + var(--safe-l));display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}
.boost-panel{width:min(230px,32vw)}
.boost-track{height:7px;margin:7px 0 4px;padding:1px;border:1px solid rgba(158,224,245,.55);background:rgba(7,13,25,.71)}
.boost-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#69e8ff,#91ffec);box-shadow:0 0 11px rgba(105,232,255,.8);transition:width .09s linear}
#boost-percent{color:#d8eaff;font-size:9px;font-variant-numeric:tabular-nums}
.speed-display{text-align:right}
.speed-display strong{display:block;font-size:clamp(39px,7.4vw,82px);font-weight:830;font-variant-numeric:tabular-nums;letter-spacing:-.09em;line-height:.85}
.speed-unit{color:#c9eaff;font-size:10px;font-weight:700;letter-spacing:.2em}
.race-progress{position:absolute;right:0;bottom:0;left:0;height:2px;background:rgba(210,230,248,.12)}
.race-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 10px var(--cyan)}
.sector-message{position:absolute;top:29%;left:50%;color:var(--cyan);font-size:12px;font-weight:720;letter-spacing:.31em;opacity:0;text-align:center;text-shadow:0 0 15px var(--cyan);transform:translate(-50%,-50%);transition:opacity .23s}
.sector-message.visible{opacity:1}
.countdown{position:absolute;top:44%;left:50%;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%)}
.countdown span{font-size:clamp(84px,19vw,188px);font-weight:870;letter-spacing:-.09em;line-height:.93;text-shadow:0 0 35px rgba(105,232,255,.45)}
.countdown small{margin-top:8px;color:#cde6fa;font-size:9px;font-weight:700;letter-spacing:.25em}
.countdown.pulse span{animation:countdown-pop .49s cubic-bezier(.12,.64,.23,1)}
@keyframes countdown-pop{from{opacity:.25;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}
.touch-controls{position:absolute;right:calc(17px + var(--safe-r));bottom:calc(17px + var(--safe-b));left:calc(17px + var(--safe-l));z-index:7;display:flex;justify-content:space-between;pointer-events:none}
.steering-controls,.action-controls{display:flex;align-items:flex-end;gap:10px;pointer-events:auto}
.control-button{height:64px;border:1px solid rgba(180,207,237,.36);border-radius:5px;background:rgba(10,18,32,.59);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);font-weight:760;touch-action:none}
.control-button.held{border-color:var(--cyan);background:rgba(51,156,181,.45);box-shadow:0 0 23px rgba(84,220,247,.28)}
.control-steer{width:76px;font-size:22px}
.control-brake{width:64px;height:45px;color:#d1dbea;font-size:9px;letter-spacing:.05em}
.control-boost{width:87px;color:var(--cyan);font-size:11px;letter-spacing:.09em}
.control-boost.held{color:white;background:rgba(34,158,181,.65)}
.results-screen{display:flex;align-items:center;justify-content:center;background:rgba(4,8,16,.69);overflow:hidden}
.results-inner{position:relative;z-index:1;width:min(665px,92vw)}
.result-glow{position:absolute;top:50%;left:50%;width:760px;height:500px;background:radial-gradient(ellipse,rgba(53,176,192,.16),transparent 68%);transform:translate(-50%,-50%)}
.result-glow.winner{background:radial-gradient(ellipse,rgba(255,203,114,.26),rgba(77,161,232,.09) 48%,transparent 71%)}
.result-heading{display:flex;align-items:center;gap:24px;margin:15px 0 28px}
.result-heading>span{font-size:clamp(75px,14vw,126px);font-weight:890;letter-spacing:-.115em;line-height:.8}
.result-heading div{display:flex;flex-direction:column;gap:5px}
.result-heading div strong{font-size:clamp(15px,3vw,26px);letter-spacing:.055em}
.result-heading div small{color:#b7c5d8;font-size:9px;letter-spacing:.15em}
.result-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.result-stats div{display:flex;flex-direction:column;gap:6px}
.result-stats div span{color:#a3b3c8;font-size:8px;font-weight:680;letter-spacing:.1em}
.result-stats div strong{font-size:clamp(10px,1.6vw,15px);font-variant-numeric:tabular-nums}
.result-actions{margin-top:23px}
.modal{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:rgba(3,6,12,.76);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-card{width:min(660px,91vw);max-height:min(88dvh,530px);padding:25px;border:1px solid rgba(150,192,234,.26);background:linear-gradient(145deg,rgba(16,27,47,.95),rgba(7,12,23,.97));box-shadow:0 23px 90px rgba(0,0,0,.55);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.modal-content{margin-top:22px}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.help-item{padding:12px;border:1px solid rgba(180,207,232,.13);background:rgba(13,23,39,.45)}
.help-item strong{display:block;color:var(--cyan);font-size:11px;letter-spacing:.09em}
.help-item p{margin:7px 0 0;color:#cad4e1;font-size:10px;line-height:1.65}
.help-note{margin:16px 0 0;color:#b6c6d8;font-size:10px;line-height:1.7}
.settings-row{display:grid;grid-template-columns:1fr minmax(170px,1fr);align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid rgba(173,199,231,.11)}
.settings-row label,.settings-row>span{font-size:10px;font-weight:690;letter-spacing:.08em}
.setting-options{display:flex;justify-content:flex-end;gap:6px}
.setting-option{min-width:50px;min-height:31px;padding:0 8px;border:1px solid rgba(168,188,221,.24);background:rgba(11,18,31,.55);color:#bdcbdb;font-size:8px;font-weight:730}
.setting-option.active{border-color:var(--cyan);background:rgba(39,141,158,.26);color:#ecfbff}
.settings-range{width:100%;accent-color:#76ecff}
.pause-actions{display:grid;gap:9px}
.pause-actions .button{text-align:left}
.orientation-screen,.error-screen{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,#15213d,#070b15 66%) }
.orientation-screen{flex-direction:column;gap:12px}
.orientation-screen strong{margin-top:18px;font-size:18px;letter-spacing:.12em}
.orientation-screen span{color:#c6d3e5;font-size:12px}
.orientation-screen small{margin-top:14px;color:var(--cyan);font-size:11px}
.rotate-device{width:44px;height:71px;border:2px solid #9ecce7;border-radius:8px;animation:rotate-device 2.3s ease-in-out infinite}
@keyframes rotate-device{0%,20%{transform:rotate(0)}60%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}
.error-screen>div{width:min(440px,86vw)}
.error-screen h2{font-size:26px}
.error-screen p{color:#c3cfdd;line-height:1.7}
.boosting .speed-display strong{color:#b4f5ff;text-shadow:0 0 16px rgba(105,232,255,.55)}
.boosting .vignette{background:radial-gradient(ellipse at 52% 45%,transparent 37%,rgba(18,67,99,.17) 78%,rgba(8,34,62,.45) 100%)}
.impact .vignette{background:radial-gradient(ellipse at center,transparent 42%,rgba(255,104,117,.31) 100%)}
@media (hover:hover) and (pointer:fine){.touch-controls{opacity:.74}.control-button{height:54px}.control-steer{width:64px}.control-boost{width:76px}.control-brake{height:39px}.hud-bottom{bottom:calc(89px + var(--safe-b))}}
@media (max-height:520px){.screen{padding:calc(15px + var(--safe-t)) calc(25px + var(--safe-r)) calc(14px + var(--safe-b)) calc(25px + var(--safe-l))}.title-top,.title-footer{font-size:8px}.main-logo{font-size:clamp(66px,12vw,102px)}.tagline{margin:11px 0 19px}.title-block{margin-top:0}.button{min-height:36px;padding:0 12px;font-size:9px}.panel-header h2{font-size:20px}.selection-content{right:calc(25px + var(--safe-r));bottom:calc(14px + var(--safe-b));left:calc(25px + var(--safe-l))}.machine-copy{margin-bottom:12px}.machine-copy h3{font-size:31px}.machine-copy p{min-height:0;margin-bottom:9px;font-size:10px}.machine-stats{gap:5px 12px}.machine-option{height:35px}.course-badge{top:calc(19px + var(--safe-t));right:calc(77px + var(--safe-r))}.hud-top{top:calc(10px + var(--safe-t));right:calc(16px + var(--safe-r));left:calc(16px + var(--safe-l))}.hud-bottom{right:calc(17px + var(--safe-r));bottom:calc(85px + var(--safe-b));left:calc(17px + var(--safe-l))}.position-display>strong{font-size:45px}.speed-display strong{font-size:58px}.touch-controls{right:calc(12px + var(--safe-r));bottom:calc(10px + var(--safe-b));left:calc(12px + var(--safe-l))}.control-button{height:55px}.control-steer{width:65px}.control-boost{width:79px}.control-brake{height:40px}.modal-card{padding:16px}.modal-content{margin-top:14px}.settings-row{padding:8px 0}.result-heading{margin:9px 0 16px}.result-stats{padding:11px 0}.result-actions{margin-top:14px}}
@media (max-width:650px){.title-block{width:85vw}.title-top span:last-child,.title-footer span:first-child,.course-badge{display:none}.main-logo{font-size:clamp(61px,15vw,98px)}.title-actions{gap:7px}.selection-bottom{align-items:flex-end}.machine-copy{width:min(370px,75vw)}.machine-option{width:55px}.launch-button{padding:0 9px}.result-stats{grid-template-columns:1fr 1fr;gap:12px}.help-grid{gap:9px}.help-item{padding:9px}.settings-row{grid-template-columns:1fr minmax(145px,1.2fr)}.boost-panel{width:35vw}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}