@import url('./assets/fonts/fonts.css');
*{box-sizing:border-box}body{margin:0;background:#070916;color:#edf2ff;font-family:'Space Grotesk',sans-serif;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%}.grain{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,19,.96),rgba(6,8,19,.65) 42%,transparent 80%)}header{position:fixed;top:30px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center}a{color:white;text-decoration:none;font-size:23px;font-weight:700;letter-spacing:-1px}a span{color:#ccfa63}a small{display:block;font-size:9px;letter-spacing:3px;margin-top:5px;color:#8790a6}.status{font-size:10px;letter-spacing:2px;color:#b8e679}.status span{margin-left:22px;color:#929aad}main{position:absolute;left:5%;top:145px;width:510px;max-height:calc(100dvh - 190px);overflow:auto;scrollbar-width:thin}.eyebrow{color:#ccfa63;font-size:10px;letter-spacing:2px;font-weight:600}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:86px;line-height:.88;letter-spacing:-2px;margin:24px 0}h1 em{font-style:normal;color:#ccfa63}.intro{color:#959eb5;font-size:13px;line-height:1.8;margin-bottom:25px}section{margin:20px 0}.label{font-size:9px;color:#a5aec3;letter-spacing:2px;margin-bottom:10px}.choices{display:flex;gap:8px}button{font:inherit;cursor:pointer;color:inherit}.choices button{flex:1;text-align:left;background:#111526d9;border:1px solid #30364a;padding:12px 10px;border-radius:3px}.choices button.selected{border-color:#ccfa63;background:#b2e15b12}.choices b{font-size:12px;display:block}.choices small{font-size:9px;color:#8a95af;display:block;margin-top:6px}.swatch{height:4px;width:26px;display:block;margin-bottom:10px}.launch{background:#ccfa63;color:#11170b;border:0;padding:17px 20px;font-weight:700;font-size:12px;letter-spacing:1px;width:100%;margin-top:8px}.launch span{float:right}.hint{font-size:8px;letter-spacing:1px;color:#818ba4;margin-top:14px}footer{position:fixed;bottom:24px;left:5%;right:5%;font-size:8px;color:#929cb4;letter-spacing:2px}footer span{float:right}#hud{position:absolute;top:105px;left:5%;right:5%;display:flex;gap:40px;align-items:center}#hud[hidden],#touch[hidden],[hidden]{display:none!important}#hud small{display:block;letter-spacing:2px;font-size:9px;color:#b3bed2}#hud strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:46px}#hud span{font-size:10px;margin-left:6px}meter{width:100px;display:block;margin-top:12px}#pause{margin-left:auto;background:#0b1225aa;border:1px solid #5c657a;padding:10px}#banner{position:absolute;top:40%;width:100%;text-align:center;font-size:44px;font-weight:bold;text-shadow:0 3px 20px #000}#results{position:absolute;top:30%;left:50%;transform:translateX(-50%);background:#080d1feb;border:1px solid #46516a;padding:40px;width:430px;max-width:90%}h2{font-size:42px;margin:20px 0}#resultText{color:#a4aec4;line-height:1.7}#touch{position:fixed;bottom:28px;left:4%;right:4%;display:flex;gap:10px}#touch button{background:#111a30bb;border:1px solid #76809966;padding:20px;touch-action:none;user-select:none}#touch button:nth-child(3){margin-left:auto;color:#ccfa63}button:hover{filter:brightness(1.2)}button:focus-visible{outline:2px solid white;outline-offset:3px}@media(max-height:820px) and (min-width:701px){main{top:115px}h1{font-size:70px;margin:18px 0}section{margin:14px 0}.intro{margin-bottom:16px}}@media(max-width:700px){header{top:20px}.status{display:none}main{top:100px;width:90%;max-height:calc(100dvh - 145px)}h1{font-size:64px}.grain{background:#070916b8}.intro{font-size:12px}footer span{display:none}#hud{gap:15px;top:85px}#hud strong{font-size:30px}#hud small{font-size:7px}#hud span{font-size:8px}meter{width:60px}#touch button{padding:16px 10px;font-size:10px}}
/* The race HUD stays readable over the bright horizon on narrow displays. */
#hud{top:100px;padding:16px 20px;background:linear-gradient(110deg,#070d20b8,#14233c55);border:1px solid #b4d9ec26;border-radius:8px;backdrop-filter:blur(12px);gap:28px;box-shadow:0 12px 40px #0002}#hud strong{text-shadow:0 0 24px #a2dfff44;font-variant-numeric:tabular-nums}#pause{border-radius:4px;font-size:10px;letter-spacing:1px}header{z-index:2}#hud small{color:#a0c4d8}.status{background:#08102088;border:1px solid #6f92a333;border-radius:30px;padding:9px 12px}.choices button{transition:background .2s,border-color .2s,transform .2s}.choices button:hover{transform:translateY(-2px)}.launch{box-shadow:0 0 35px #ccfa6318;border-radius:3px}#banner{font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:8px;font-size:64px}#touch{z-index:3}#touch button{backdrop-filter:blur(10px);border-radius:8px} @media(max-width:700px){#hud{left:4%;right:4%;top:88px;gap:14px;padding:12px}#hud strong{font-size:34px}#hud small{font-size:7px;letter-spacing:1px}#hud span{font-size:7px;margin-left:2px}#pause{padding:10px 8px;font-size:9px}meter{width:48px}.status{display:none}}@media(max-width:420px){#hud{gap:9px}#hud strong{font-size:28px}#hud div:nth-child(3) span{display:block}#hud small{font-size:6px}#pause{font-size:8px;padding:9px 6px}}

canvas:focus{outline:none}.assist{display:flex;gap:12px;align-items:center;margin:16px 0;color:#e7f7d8;font-size:11px;cursor:pointer}.assist input{accent-color:#ccfa63;width:18px;height:18px}.assist small{display:block;color:#95a9ba;font-size:10px;margin-top:4px}.hint{line-height:1.8}#raceInfo{position:fixed;top:210px;left:5%;right:5%;pointer-events:none}.route{display:flex;justify-content:space-between;color:#cef7f3;font-size:10px;letter-spacing:1px;text-shadow:0 2px 5px #000}#progress{width:100%;height:3px;display:block;margin-top:8px;accent-color:#ccfa63}#raceMessage{text-align:center;color:#ccfa63;font-weight:bold;letter-spacing:2px;font-size:17px;height:24px;margin-top:15px;text-shadow:0 2px 8px #000}#driveHint{text-align:center;color:#b6d1dd;font-size:9px;margin-top:4px;text-shadow:0 2px 4px #000}#touch{bottom:12px;gap:8px;align-items:center}#touch button{padding:12px 18px;background:#0c172abb;font-size:11px;border-color:#7cadbf66}#touch button.pressed{background:#ccfa63;color:#102011;box-shadow:0 0 20px #ccfa6344}#banner{pointer-events:none;top:46%;color:#d6ff74;text-shadow:0 0 35px #8abc5477}#results{z-index:5}#again{background:#263249;color:#d6e6f7}#hud{gap:22px}@media(max-width:700px){#raceInfo{top:172px;left:4%;right:4%}.route{font-size:8px;letter-spacing:.4px}#raceMessage{font-size:12px;margin-top:10px}#driveHint{font-size:8px}#touch button{padding:13px 12px}#touch{left:3%;right:3%}}@media(max-height:600px){header{top:12px}header a small{display:none}#hud{top:51px;padding:6px 12px}#hud strong{font-size:25px}#raceInfo{top:113px}#driveHint{display:none}#touch button{padding:8px 12px}#raceMessage{margin-top:5px}main{top:65px;max-height:calc(100dvh - 90px)}footer{bottom:8px}}

/* The road is a full-size invisible steering surface. HUD text lets taps through. */
#hud{pointer-events:none}#pause{pointer-events:auto}#touch{left:auto;right:4%;width:auto;pointer-events:none}#touch button{pointer-events:auto}#touch button:nth-child(3){margin-left:0;color:inherit}canvas{touch-action:none;-webkit-user-select:none;user-select:none}#driveHint{color:#e5fbfa;font-weight:600}#hud{background:linear-gradient(110deg,#070d20c9,#14233c45)}

/* Phone browser safe areas, touch targets and landscape composition. */
html,body{width:100%;height:100%;overscroll-behavior:none}body{min-width:280px}button{-webkit-tap-highlight-color:transparent}header{top:max(18px,env(safe-area-inset-top));left:max(4%,env(safe-area-inset-left));right:max(4%,env(safe-area-inset-right))}main{padding-bottom:20px}#touch{right:max(4%,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}#touch button{min-width:58px;min-height:48px;border-radius:12px;background:#101d35dd;font-size:10px}#pause{min-width:54px;min-height:44px}footer{bottom:max(12px,env(safe-area-inset-bottom))}.assist{min-height:44px}.choices button{min-height:56px}.route{gap:10px}#raceInfo #driveHint{max-width:100%;line-height:1.5}#results{max-height:90dvh;overflow:auto}#results p{font-size:13px}
@media(max-width:600px){
 header a{font-size:20px}header a small{font-size:8px;letter-spacing:2px}#hud{top:77px;left:4%;right:4%;padding:10px;gap:12px;border-radius:12px}#hud strong{font-size:30px}#hud div:nth-child(3) span{display:block}#hud small{letter-spacing:.6px}#hud span{font-size:7px}#hud meter{width:44px}#pause{margin-left:auto;font-size:8px;padding:7px}#raceInfo{top:164px}#raceMessage{font-size:10px;letter-spacing:.8px}#driveHint{font-size:7px}main{top:92px;max-height:calc(100dvh - 125px)}h1{font-size:clamp(48px,11vw,66px)}.intro{font-size:11px;line-height:1.6}.choices button{padding:10px 7px}.choices b{font-size:10px}.choices small{font-size:8px}.hint{font-size:7px}#results{padding:25px}#results h2{font-size:32px}
}
@media(max-width:360px){#hud{gap:7px;padding:8px}#hud strong{font-size:25px}#hud small{font-size:6px}#hud meter{width:34px}#pause{min-width:45px}#raceInfo{top:155px}.choices b{font-size:9px}.choices small{font-size:7px}#touch button{min-width:54px}}
@media(orientation:landscape) and (max-height:500px){
 header{top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left))}header a{font-size:18px}header a small,.status{display:none}#hud{top:8px;left:30%;right:max(12px,env(safe-area-inset-right));gap:12px;padding:5px 10px;border-radius:8px}#hud strong{font-size:25px}#hud small{font-size:6px}#hud span{font-size:6px}#hud div:nth-child(3) span{display:inline}#hud meter{width:45px;margin-top:6px}#pause{min-height:40px;padding:5px;font-size:8px}#raceInfo{top:70px;left:4%;right:4%}#driveHint{display:none}#raceMessage{margin-top:4px;font-size:10px}#touch{bottom:max(8px,env(safe-area-inset-bottom))}#touch button{min-height:44px;padding:8px 14px}#banner{top:40%;font-size:45px}main{top:48px;width:75%;max-height:calc(100dvh - 64px)}main h1{font-size:44px}.intro{margin:10px 0}section{margin:10px 0}footer{display:none}#results{top:8%;transform:translateX(-50%);padding:20px;width:440px}#results h2{font-size:30px;margin:8px 0}#results .launch{padding:12px}
}
@media(max-width:600px) and (orientation:portrait){header{top:calc(18px + env(safe-area-inset-top))}#hud{top:calc(77px + env(safe-area-inset-top))}#raceInfo{top:calc(164px + env(safe-area-inset-top))}main{top:calc(92px + env(safe-area-inset-top));max-height:calc(100dvh - 125px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}
@media(orientation:landscape) and (max-height:500px){#pause{min-height:44px}}

#cars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#cars button{padding:8px;min-width:0}#cars b{font-size:11px}#cars small{font-size:8px}.carThumb{display:block;width:100%;aspect-ratio:1.5;background-image:url('./assets/ev-cars-v1.png');background-size:200% 200%;background-repeat:no-repeat;max-height:100px;margin-bottom:5px}#showroom{margin-top:12px;padding:14px;background:radial-gradient(ellipse at 50% 50%,#29344a99,#080d19dd);border:1px solid #71849e55;border-radius:10px}.showroomHead{display:flex;align-items:center;justify-content:space-between;gap:10px}.showroomHead b{font-size:13px}.showroomHead button{flex-shrink:0;border:1px solid #c6f56477;background:#c6f56415;color:#d8fd8e;border-radius:5px;font-size:9px;padding:10px;min-height:44px}#carPreview{position:static;width:100%;height:auto;max-height:250px;object-fit:contain;display:block}#carDescription{font-size:11px;color:#b6c5d7;line-height:1.6;margin:8px 0}#carTuning{display:block;font-size:9px;color:#ccfa63}#carSource{display:inline-block;font-size:10px;letter-spacing:0;color:#9cdaee;margin-top:10px}.artNote{display:block;color:#8897aa;font-size:8px;line-height:1.5;margin-top:10px}#carDialog{width:min(95vw,1000px);max-height:94dvh;background:radial-gradient(ellipse at center,#283c57,#080d19);color:white;border:1px solid #869bae88;border-radius:14px;padding:22px;overflow:auto}#carDialog::backdrop{background:#02050de8;backdrop-filter:blur(8px)}#carDialog h2{font-size:clamp(18px,3vw,30px);margin:0}#detailPreview{position:static;display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain}#carDialog p{font-size:10px;color:#a4b3c7}main h1{font-size:60px}.intro{margin-bottom:14px} @media(max-width:600px){#cars b{font-size:10px}.carThumb{max-height:none}#carPreview{max-height:210px}.showroomHead b{font-size:11px}#showroom{padding:10px}main h1{font-size:48px}}@media(orientation:landscape) and (max-height:500px){#cars{grid-template-columns:repeat(4,minmax(0,1fr))}#cars b{font-size:9px}#detailPreview{max-height:60dvh}#carDialog{padding:12px}}

.carThumb{width:min(100%,130px);max-height:none;margin:0 auto 5px}

/* Eight-stage tour, accessible music control and route intermission. */
#sound{pointer-events:auto;border:1px solid #b5d4dc55;border-radius:20px;background:#111b31df;padding:10px 12px;font-size:10px;min-height:44px;min-width:94px;color:#d8efbc}
#cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#cities button{position:relative;padding:12px;min-height:66px}#cities b{font-size:12px}#cityDescription{color:#b8c8d8;font-size:12px;line-height:1.6}.routeNote{font-size:10px;color:#9eacc4;line-height:1.6;display:block}.secondary{background:#23374b;color:#e0eef3;border:1px solid #51707c}.volumeLabel{display:flex;gap:15px;align-items:center;font-size:10px;letter-spacing:1px;margin:20px 0}.volumeLabel input{accent-color:#ccfa63;min-height:32px}#stageName{font-size:10px;letter-spacing:1.3px;color:#dcf89c;margin-bottom:7px;text-shadow:0 2px 8px #000}#raceInfo{top:211px}#stageOverlay{position:fixed;inset:0;z-index:4;margin:0;pointer-events:none;background:#071125db;display:grid;place-items:center}#stageOverlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.48}#stageOverlay>div{position:relative;text-align:center;padding:24px;background:#09152dcc;border:1px solid #81b6bd55;border-radius:16px;max-width:90%}#stageOverlay h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(40px,8vw,90px);margin:14px 0;color:#ddff8f}#stageOverlay small{font-size:12px;line-height:1.7}#stageOverlay p{font-size:11px;letter-spacing:2px}#stageOverlay b{font-size:24px}#hud,#touch,header{z-index:5}#results{z-index:6}#time{font-size:36px!important}#hud small{white-space:nowrap}#driveHint{transition:opacity .4s}
@media(max-width:600px){#time{font-size:25px!important}#hud{gap:10px}#raceInfo{top:164px}#stageName{font-size:8px;letter-spacing:.8px}#cities b{font-size:11px}#sound{font-size:8px;padding:8px;min-width:80px}.route{font-size:7px}#raceMessage{font-size:9px}}
@media(max-width:360px){#hud{gap:5px}#time{font-size:21px!important}#hud strong{font-size:24px}#hud meter{width:30px}#pause{min-width:43px}#stageName{font-size:7px}}
@media(orientation:landscape) and (max-height:500px){#sound{position:fixed;left:14px;top:40px;min-height:32px;font-size:8px;padding:4px 10px}#raceInfo{top:73px}#stageName{font-size:8px;margin-bottom:4px}.route{font-size:8px}#time{font-size:23px!important}#stageOverlay h2{font-size:48px}#cities{grid-template-columns:repeat(4,minmax(0,1fr))}}

#lightsStatus{float:right;font-size:8px;letter-spacing:.6px;color:#c6eefc;text-shadow:0 1px 5px #000} @media(max-width:400px){#lightsStatus{font-size:6px;letter-spacing:0}}

/* Standings remain separate from the compact speed HUD on phones. */
#standing{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:4px 0 7px;padding:6px 9px;border:1px solid #ffb79b66;background:#101827df;border-radius:6px;font-size:9px;color:#ffcaab;letter-spacing:.6px}#position{font-size:16px;color:#fff;margin-left:6px;font-variant-numeric:tabular-nums}#standing.qualified{border-color:#ccfa6377;color:#d6ff91}#qualification{font-size:8px}#results{top:22%}
@media(max-width:360px){#standing{font-size:8px;padding:4px 6px}#position{font-size:14px}#qualification{font-size:7px}}
@media(orientation:landscape) and (max-height:500px){#standing{margin:3px 0;padding:3px 7px;max-width:360px}#position{font-size:14px}#results{top:8%}}

#onlinePanel{background:#101b2edb;border:1px solid #5c8a9955;border-radius:10px;padding:14px}#onlinePanel p,#onlinePanel small{font-size:11px;line-height:1.6;color:#b9d1df}#onlineStatus{color:#d6ff8e!important;overflow-wrap:anywhere}.joinRow{display:flex;gap:8px;margin-top:10px}.joinRow input{min-width:0;flex:1;padding:12px;background:#07121f;border:1px solid #618293;color:#fff;font:inherit;text-transform:uppercase;border-radius:5px}.joinRow button{background:#293c51;border:1px solid #608496;border-radius:5px;padding:12px;font-size:11px}button:disabled{opacity:.5;cursor:default}#onlineRace{font-size:9px;color:#80f6ff;letter-spacing:.5px;margin:5px 0;text-shadow:0 2px 5px #000}@media(max-width:600px){#onlineRace{font-size:7px;letter-spacing:0}.joinRow input{font-size:12px}}

/* Keep the original wordmark typeface with the complete domain. */
header a .domain{color:inherit;font-size:.8em;letter-spacing:-.05em}

/* Touch remains the primary input, with thumb-sized actions and an open road. */
header{pointer-events:none}header a,header button{pointer-events:auto}
.controlGuide{border:1px solid #a7d1df30;background:#0d1c2bd9;border-radius:12px;padding:16px}
.controlGuide p{font-size:12px;line-height:1.65;color:#cedde9;margin:8px 0}
.controlGuide small{font-size:10px;line-height:1.6;color:#9cadc1;display:block}
#gamepadStatus{color:#a5b8cc;font-size:11px}#gamepadStatus[data-connected="true"]{color:#ccfa63}
#touch{gap:12px;bottom:calc(14px + env(safe-area-inset-bottom))}
#touch button{min-width:68px;min-height:60px;font-size:11px;font-weight:700;touch-action:none;-webkit-touch-callout:none}
#touch button[data-key="Space"]{border-color:#ccfa6380;color:#ddff9a}
#touch button.pressed{color:#102011}
@media(pointer:coarse){button{touch-action:manipulation}.joinRow input{font-size:16px}#touch button{min-width:72px;min-height:64px}}
@media(orientation:landscape) and (max-height:500px){#touch button{min-height:52px;min-width:68px}#touch{bottom:calc(8px + env(safe-area-inset-bottom))}}