:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f1f4ec;background:#121a1c}*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{display:block;width:100vw;height:100dvh}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid #dbfaad;outline-offset:4px}header{position:absolute;left:30px;right:30px;top:23px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.identity{display:flex;align-items:center;gap:13px;font-size:11px;font-weight:500;letter-spacing:2px;text-shadow:0 1px 4px #0008}.identity b{font-weight:800}.identity small{display:block;font:9px monospace;letter-spacing:2px;margin-top:7px;color:#c4d0ca}.identity i{font-style:normal;color:#b9e6a3;margin:0 4px}.logo{font:bold 22px Arial;letter-spacing:-3px;border:1px solid #d4e8d366;padding:8px 10px;border-radius:5px;background:#14222755}.logo span{color:#d4ed9e;font-size:20px;margin:0 2px}.actions{display:flex;gap:17px;align-items:center;pointer-events:auto}.actions>span{font:10px monospace;color:#c4d4cb}.actions button{border:1px solid #dae5dc40;color:#eff5ec;background:#152321b8;border-radius:7px;padding:10px 13px;display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1px;backdrop-filter:blur(8px)}.actions button>span{font-size:18px}.actions kbd{font-size:8px;opacity:.6}.pace{position:absolute;top:102px;left:50%;transform:translateX(-50%);display:flex;gap:16px;align-items:center;background:#122023cc;border:1px solid #c6e4cc20;padding:13px 24px 13px 15px;border-radius:10px;box-shadow:0 6px 30px #0002;min-width:240px;pointer-events:none}.paceIcon{font-size:42px;line-height:1;color:#deedb3}.pace small{font:8px monospace;letter-spacing:2px;color:#adc3b6}.pace strong{display:block;font-size:18px;font-weight:600;margin:5px 0}.pace div>span{display:block;font:10px monospace;color:#c0ccc2}.stage{position:absolute;left:30px;top:106px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;width:198px;padding:14px;background:#132321a6;border-radius:8px;backdrop-filter:blur(8px)}.stage small{display:block;font:8px monospace;letter-spacing:1px;color:#c2d0c4;margin-bottom:7px}.stage strong{font:16px monospace}.stage em{font-size:9px;font-style:normal;color:#afbcaf}.divider{height:27px;width:1px;background:#d4dfd52b}.progress{width:100%;height:2px;background:#bdd4b72e}.progress span{display:block;width:0;height:100%;background:#d9efab}.hint{position:absolute;top:205px;left:50%;transform:translateX(-50%);font:11px monospace;color:#fff4cc;text-shadow:0 1px 4px #000;background:#15221f99;border-radius:5px;padding:8px 13px;opacity:0;transition:opacity .15s}.hint.visible{opacity:1}footer{position:absolute;bottom:0;left:0;right:0;min-height:43px;background:#10191de6;border-top:1px solid #e0eddf18;display:flex;align-items:center;justify-content:center;gap:34px;padding:8px 20px}.keygroup{display:flex;gap:5px;align-items:center}.keygroup span{font:8px monospace;letter-spacing:1px;color:#b4c1ba;margin:0 10px 0 3px}kbd{font:9px monospace;border:1px solid #c7dbc02e;background:#b4c4ba0b;border-radius:3px;padding:4px 6px;color:#e4eddf;white-space:nowrap}#fullscreen{color:#d3e2d3;background:none;border:0;font-size:23px;margin-left:12px}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#101c22f5 0%,#101c22e8 34%,#101c2290 70%,#101c2240);display:flex;align-items:center;padding:6vh 7vw;backdrop-filter:blur(3px)}.panel{width:min(600px,100%)}.eyebrow{font:10px monospace;letter-spacing:3px;color:#d4e9a9}h1{font-size:clamp(36px,5.7vw,79px);line-height:1.05;letter-spacing:-3px;margin:23px 0}h1 em{color:#d6ecac;font-style:normal}p{font-size:14px;line-height:1.75;color:#b8c8c4;max-width:460px}.routeinfo{display:flex;gap:32px;margin:25px 0;padding:20px 0;border-top:1px solid #c6dcc41a;border-bottom:1px solid #c6dcc41a}.routeinfo small{font:8px monospace;letter-spacing:1px;color:#8fa69e;display:block;margin-bottom:9px}.routeinfo b{font-size:12px;font-weight:500}.options{display:flex;gap:14px;margin:20px 0 24px}.options label{font:8px monospace;letter-spacing:1px;color:#a5b9af;flex:1}.options select{display:block;width:100%;margin-top:8px;background:#263a3b;color:#f0f5e9;border:1px solid #bfd6bc30;padding:12px;border-radius:5px;font-size:12px}.buttons{display:flex;gap:10px}.primary{border:0;background:#d7edaf;color:#142224;font-size:11px;letter-spacing:1px;font-weight:bold;padding:17px 25px;border-radius:5px;min-width:205px;display:flex;justify-content:space-between;gap:25px}.primary:hover{background:#e5f7c8}.primary span{font-size:17px}.secondary{border:1px solid #bed4b74a;background:#293d3c;color:#e7efdf;font-size:10px;border-radius:5px;padding:10px 18px}.settings{display:flex;align-items:center;gap:24px;margin-top:23px}.settings button{background:none;border:0;color:#becdc4;font:10px monospace;padding:0}.settings span{font:8px monospace;letter-spacing:1px;color:#8aa298}.menuControls{border-top:1px solid #d0dec21a;margin-top:28px;padding-top:18px;display:flex;gap:14px;flex-wrap:wrap;color:#a7bbb1;font-size:10px}.menuControls span{display:flex;gap:6px;align-items:center}.hidden{display:none!important}.touch{position:absolute;left:15px;right:15px;bottom:55px;display:none;justify-content:space-between}.touch div{display:flex;gap:7px}.touch button{border:1px solid #d5e6cd50;background:#18282899;color:#eff3df;padding:17px;border-radius:8px;touch-action:none;user-select:none;font-size:10px}@media(pointer:coarse){.touch{display:flex}footer{gap:8px}.keygroup span{font-size:7px;margin-right:3px}.keygroup kbd{padding:2px 3px;font-size:7px}}@media(max-width:750px){header{left:15px;right:15px;top:14px}.identity{font-size:9px}.identity small{font-size:7px}.actions>span{display:none}.actions kbd{display:none}.stage{top:78px;left:15px;width:160px;gap:10px}.stage strong{font-size:12px}.pace{top:78px;left:auto;right:15px;transform:none;min-width:0;padding:10px;gap:9px}.pace strong{font-size:12px}.paceIcon{font-size:28px}.pace div>span{font-size:8px}.hint{top:170px}.overlay{padding:25px;overflow:auto}.panel{margin:auto 0}.routeinfo{gap:24px;padding:13px 0;margin:18px 0}.routeinfo b{font-size:10px}h1{margin:17px 0;letter-spacing:-1.5px}p{font-size:12px}.menuControls{margin-top:16px;gap:8px}footer{gap:12px}.keygroup span{margin-right:4px}.keygroup kbd{font-size:7px;padding:3px}footer .keygroup:first-child kbd:nth-child(2),footer .keygroup:first-child kbd:nth-child(5){display:none}}@media(max-height:650px){.overlay{padding:25px 6vw}h1{font-size:40px;margin:15px 0}.panel p{font-size:12px}.routeinfo{margin:14px 0;padding:12px 0}.options{margin:12px 0}.settings{margin-top:15px}.menuControls{margin-top:15px}.pace{top:85px}}

.routeMap{position:absolute;right:28px;top:224px;width:200px;background:#142222e8;border:5px solid #303d3b;outline:1px solid #c8dcc237;border-radius:12px;box-shadow:0 8px 22px #0004;pointer-events:none}.mapHeading{padding:11px 11px 4px;display:flex;flex-direction:column;gap:5px}.mapHeading span{font:8px monospace;letter-spacing:2px;color:#d7e9a9}.mapHeading b{font:8px monospace;color:#94aea0;font-weight:normal}.routeMap canvas{width:100%;height:155px;display:block}.mapLegend{display:flex;gap:7px;padding:0 12px 10px;font:8px monospace;color:#b3c3b9;align-items:center}.mapLegend i{width:6px;height:6px;border-radius:50%;background:#e2f2b8}.mapLegend span{margin-left:auto;color:#b4cfec}.lapTimes{position:absolute;top:211px;left:30px;display:flex;gap:22px;padding:11px 14px;background:#142322ae;border-radius:7px;min-width:198px}.lapTimes small{font:8px monospace;color:#a9c1b2;display:block;letter-spacing:1px;margin-bottom:6px}.lapTimes strong{font:13px monospace;color:#e4eed4}@media(max-width:750px){.routeMap{right:15px;top:194px;width:145px}.routeMap canvas{height:110px}.mapHeading{padding:7px 8px 0}.mapHeading span,.mapHeading b,.mapLegend{font-size:7px}.mapLegend{padding:0 7px 7px}.lapTimes{left:15px;top:166px;min-width:160px;gap:17px;padding:9px 11px}.lapTimes small{font-size:7px}.lapTimes strong{font-size:11px}.hint{top:150px}}@media(max-height:620px){.routeMap{top:155px;width:150px}.routeMap canvas{height:105px}.lapTimes{top:190px}.stage{top:94px}}

#world,#game{position:absolute;inset:0;width:100vw;height:100dvh}#world{z-index:0}#game{z-index:1;pointer-events:none}header,.pace,.stage,.routeMap,.lapTimes,.hint,footer,.touch{z-index:2}.overlay{z-index:3}.pace.urgent{border-color:#ebd49b99;background:#342d20e6}.pace.urgent .paceIcon{color:#ffe2a0}.pace.urgent strong{font-size:23px;color:#fff1d2}.pace.urgent div>span{color:#f3dfb5;font-weight:bold}.pace.urgent div>span,.pace.urgent strong{letter-spacing:.3px}@media(max-width:750px){.pace.urgent strong{font-size:16px}}
/* Garage: a showroom and a compact, scrollable configuration panel. */
.garage{position:fixed;inset:0;z-index:8;background:#101e21;display:flex;flex-direction:column;padding:24px 32px 25px;overflow:hidden}.garageHeader{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid #cfe3cd1c;flex:none}.garageHeader .eyebrow{font-size:9px;letter-spacing:2.5px}.garage h2{font-size:33px;letter-spacing:-1px;font-weight:500;margin:9px 0 0}.garageBack{background:#1f3233;color:#e2ecde;border:1px solid #bcd3b735;border-radius:5px;padding:12px 18px;font:10px monospace;letter-spacing:1px}.garageLayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(325px,415px);flex:1;min-height:0;gap:30px;padding-top:23px}.garageShowroom{background:#1d3130;border:1px solid #cbe3c91a;border-radius:13px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:0}.modelLabel{position:absolute;left:25px;top:25px;pointer-events:none;z-index:1}.modelLabel span{font:9px monospace;letter-spacing:2px;text-transform:uppercase;color:#c3d7c1}.modelLabel h3{font-size:28px;font-weight:500;letter-spacing:-.7px;margin:9px 0}.garage #carPreview{position:relative;display:block;width:100%;height:auto;flex:1;min-height:230px;touch-action:none;cursor:grab}.garage #carPreview:active{cursor:grabbing}.garageView{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 20px;background:#1b2f2f;border-top:1px solid #bad4b71a}.garageView>span{font:8px monospace;letter-spacing:1px;color:#9cb6a6}.garageView div{display:flex;gap:5px}.garageView button{font:8px monospace;letter-spacing:.6px;color:#cbd8cb;padding:9px 10px;background:#2a3e3d;border:1px solid #c6dbbc24;border-radius:4px}.garageNote{padding:13px 20px 15px;background:#172a2b;color:#a4bbac;font-size:10px;line-height:1.6}.garageOptions{overflow:auto;min-height:0;padding:0 9px 0 0;scrollbar-color:#496957 #142425;scrollbar-width:thin}.garageSection{padding:0 0 21px;margin:0 0 21px;border-bottom:1px solid #c7dec11c}.sectionLabel{display:block;font:9px monospace;letter-spacing:2px;color:#c4dca9;margin:0 0 13px}.bodyChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bodyChoices button{text-align:left;background:#1d3233;border:1px solid #b7ceb527;color:#d9e6d7;border-radius:6px;padding:13px 12px}.bodyChoices button[aria-pressed=true]{border-color:#d6edaf;background:#2a423b;box-shadow:inset 0 0 0 1px #d6edaf}.bodyChoices b{font-size:12px;font-weight:500;display:block;margin-bottom:6px}.bodyChoices span{font:8px monospace;color:#a6bcae}.paintSwatches{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.paintSwatches button{background:var(--paint);border:2px solid #ffffff15;border-radius:50%;width:26px;height:26px;position:relative;flex-shrink:0}.paintSwatches button[aria-pressed=true]{outline:2px solid #e0efb8;outline-offset:3px}.paintSwatches button[aria-pressed=true]::after{content:'✓';font-size:12px;color:#fff;text-shadow:0 1px 3px #000}.paintSwatches>span{font:9px monospace;color:#c2d3bf}.customColor{position:relative;display:block;width:27px;height:27px;overflow:hidden;flex-shrink:0;border:1px solid #afc9ab55;border-radius:50%;cursor:pointer}.customColor input{position:absolute;opacity:0;inset:-10px;width:50px;height:50px;cursor:pointer}.customColor span{display:block;width:100%;height:100%;text-align:center;line-height:25px;pointer-events:none;font-size:18px;color:#d9ebc2}.garageGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px 10px}.garageGrid label{display:block;color:#9bb4a4;font-size:10px}.garageGrid select,.garageGrid input[type=color]{display:block;width:100%;margin-top:7px;background:#233a3b;color:#e0ead8;border:1px solid #bad2b42b;border-radius:5px;padding:11px 9px;font-size:11px;height:39px}.garageGrid input[type=color]{padding:4px;cursor:pointer}.garageSaveBar{position:sticky;bottom:0;background:#101e21ed;padding:14px 0 1px;backdrop-filter:blur(10px)}.garageSaveBar>span{display:block;font:9px monospace;color:#9ab39f;margin-bottom:13px}.garageSaveBar>div{display:flex;justify-content:space-between;gap:10px}.garageSaveBar button:not(.primary){color:#aabfae;background:#203534;border:1px solid #b9d2b02b;padding:10px 15px;border-radius:4px;font:9px monospace}.garageSaveBar .primary{min-width:0;display:block;padding:14px 21px;font-size:10px}.buttons{flex-wrap:wrap}.actions button#garageTop{padding:13px 12px}.garage .primary:hover{background:#e6f6ca}@media(max-width:950px){.garage{padding:18px}.garageLayout{gap:18px;grid-template-columns:minmax(0,1fr) 315px}.garageView{flex-wrap:wrap;padding:10px}.modelLabel{left:18px;top:18px}.modelLabel h3{font-size:23px}.garageNote{padding:12px}.garageGrid{gap:10px 8px}}@media(max-width:700px){.garage{overflow:auto;display:block;padding:18px 15px}.garageHeader{padding-bottom:15px}.garage h2{font-size:27px}.garageLayout{display:flex;flex-direction:column;padding-top:16px;gap:22px}.garageShowroom{height:350px;flex:none}.garage #carPreview{min-height:180px}.garageOptions{overflow:visible;padding:0}.modelLabel h3{font-size:22px}.garageSaveBar{bottom:-18px;margin:0 -1px;padding:13px 1px 18px}.garageGrid label{font-size:11px}.garageGrid select{font-size:12px}.garageView{padding:8px 12px}.garageNote{font-size:9px}.actions{gap:7px}.actions button#garageTop{padding:12px 9px}.actions>span{display:none}.identity .logo{display:none}}@media(max-height:620px) and (min-width:701px){.garage{padding:15px 22px}.garageHeader{padding-bottom:13px}.garage h2{font-size:25px;margin-top:5px}.garageLayout{padding-top:15px}.garageView>span{display:none}}
.chaseHud{position:absolute;z-index:2;right:30px;bottom:65px;padding:18px 22px;background:#132321dc;border:1px solid #d8e7c936;border-radius:9px;color:#dce8d7;min-width:190px}.chaseHud>small{font:8px monospace;letter-spacing:1px;color:#a8c0aa}.chaseHud>div{display:flex;align-items:baseline;gap:9px;margin:6px 0}.chaseHud b{font:38px monospace;color:#dcf0b4}.chaseHud div span{font:10px monospace}.settings{flex-wrap:wrap;gap:10px 20px}#yourCarLabel{color:#c9ddb6}.settings span#best{font-size:8px}
@media(max-width:700px){.chaseHud{right:15px;bottom:75px;padding:12px 16px;min-width:160px}.chaseHud b{font-size:30px}header .actions #garageTop{font-size:8px}}
.performancePanel{margin-top:15px;padding:13px;border:1px solid #c6dcb92b;border-radius:6px;background:#233a32}.performancePanel>small{font:8px monospace;letter-spacing:.8px;color:#b9d498}.performancePanel p{font-size:10px;line-height:1.5;margin:8px 0;color:#c8d9c4}.performancePanel #vehicleWeakness{color:#d3c4a0}.performanceStats{display:grid;grid-template-columns:1fr 1fr;gap:9px 14px;padding:7px 0}.performanceStats label{display:flex;justify-content:space-between;gap:8px;font:9px monospace;color:#b6cbb8;align-items:center}.performanceStats label>span{width:55%;height:4px;background:#102522;border-radius:3px;overflow:hidden}.performanceStats i{height:100%;display:block;background:#d8eab1}.performancePanel #wheelEffect{font-size:9px;color:#acc6a9}.biomeBadge{width:100%;display:flex;justify-content:space-between;gap:7px;align-items:center}.biomeBadge b{font:8px monospace;letter-spacing:.4px;color:#d4e5b3}.biomeBadge small{font-size:7px;margin:0;color:#b7caba}.stage{width:215px}.lapTimes{top:239px;min-width:215px}.biomeLegend{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:0 12px 11px;font:8px monospace;color:#b5c9b8}.biomeLegend strong{grid-column:1/-1;font-weight:normal;color:#eed28c;margin-top:3px}.routeMap{width:215px}.routeMap canvas{height:175px}.options{flex-wrap:wrap}.options label{min-width:150px}.options select{font-size:11px}.bodyChoices button:last-child{grid-column:1/-1}.settings{margin-top:15px}@media(max-width:750px){.stage{width:172px}.lapTimes{top:194px;min-width:172px}.routeMap{width:153px}.routeMap canvas{height:125px}.biomeLegend{font-size:7px;gap:4px;padding:0 7px 8px}.biomeBadge b{font-size:7px}.hint{top:154px}.options label{min-width:125px}}@media(max-height:650px){.options{gap:10px;margin:10px 0}.options label{min-width:130px}.routeinfo{margin:10px 0;padding:10px 0}.panel .settings{margin-top:12px}}
.mapTools{display:flex;padding:0 10px 9px;pointer-events:auto}.mapTools button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:38px;font:9px monospace;letter-spacing:.6px;padding:7px 9px;background:#344b36;color:#e7f3ca;border:1px solid #bed49b80;border-radius:5px;touch-action:manipulation}.mapTools button:hover{background:#435e40;border-color:#d7edaf}.mapTools button>span{font-size:19px;line-height:1}.mapTools button b{font:inherit}.mapTools kbd{font-size:8px;padding:3px 5px}@media(max-width:750px){.mapTools{padding:0 6px 7px}.mapTools button{font-size:8px;gap:5px;padding:7px 6px}.mapTools button>span{font-size:16px}}
.powerHud{position:absolute;z-index:2;right:30px;bottom:65px;width:190px;padding:12px 15px;background:#132321dd;border:1px solid #c7dcbd2b;border-radius:7px}.powerHud .engineReadout{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}.powerHud b{font:27px monospace;color:#e4efc9}.powerHud span{font:9px monospace;color:#b8cfb9}.powerHud small{display:block;font:7px monospace;letter-spacing:.5px;color:#adbfac}.powerHud small strong{float:right;font-weight:normal;color:#e5efcd}.throttleTrack{height:4px;border-radius:2px;background:#426052;margin:7px 0 9px;overflow:hidden}.throttleTrack i{display:block;height:100%;width:0;background:#dcecb0}.powerHud.exteriorPower{right:248px}.powerHud.spinning{border-color:#d8bb70}.powerHud.spinning #tractionNote{color:#efcf8f}#setupTopSpeed{font:11px monospace;color:#e0edb7;margin:11px 0}.performancePanel #vehicleStrength{margin-top:4px}@media(max-width:750px){.powerHud{right:15px;bottom:65px;width:160px;padding:10px 12px}.powerHud.exteriorPower{right:185px}.powerHud b{font-size:17px}.powerHud small{font-size:6px}.powerHud span{font-size:7px}}@media(pointer:coarse){.powerHud{bottom:126px}.powerHud.exteriorPower{bottom:126px}}

.powerHud .transmissionLabel{font-size:7px;letter-spacing:1px;color:#b9cead;margin-bottom:5px}.powerHud .engineReadout{margin-bottom:4px}.rpmTrack{height:4px;background:#426052;border-radius:2px;margin-bottom:10px;overflow:hidden}.rpmTrack i{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,#dcecb0 65%,#efbc78 95%)}.powerHud.shifting{border-color:#e2edb1}.powerHud.shifting #gearDisplay{color:#fff3bd}.powerHud.shifting #tractionNote{color:#fff3bd}

#fullscreen{display:inline-flex;align-items:center;gap:6px}#fullscreen kbd{font-size:9px;letter-spacing:0}
