*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111d25;color:#eff5f6;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:#192a32;border:1px solid #64777f;padding:12px 16px;font:700 12px Arial;letter-spacing:1px}button:hover,button:focus-visible{background:#34515f}button:focus-visible,a:focus-visible{outline:3px solid #ffc36b}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#stage{width:1200px;height:700px;position:absolute;left:50%;top:50%;transform-origin:center;overflow:hidden;background:#9bb5c2}#scene,#scene canvas{position:absolute;inset:0;width:100%;height:100%}header{position:absolute;left:30px;right:30px;top:22px;display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:2px}header a{font-weight:800}header span{margin-left:auto;font-size:9px;color:#223b45}.title{position:absolute;left:32px;top:83px;color:#17303a}.title p{font-size:10px;letter-spacing:3px;font-weight:bold}h1{font-size:48px;letter-spacing:-3px;line-height:.95;margin:14px 0}h1 span{display:block;font-weight:300;letter-spacing:12px;font-size:36px;margin-top:8px}aside{position:absolute;right:30px;top:95px;width:233px;color:#18323d;background:#eaf1eeeb;padding:20px;border-top:3px solid #db2039}aside h2{font-size:22px;margin:18px 0 8px}aside p{font-size:13px;line-height:1.6;min-height:62px}aside #best{display:block;font-size:20px;margin-top:8px}.label{font-size:10px;letter-spacing:2px;font-weight:bold}#levels{display:flex;gap:6px;margin-top:12px}#levels button{padding:10px;width:42px;border-color:#9aaeb4;background:transparent;color:#203b45}#levels button[aria-pressed=true]{background:#db2039;color:white;border-color:#db2039}.panel{position:absolute;left:32px;top:270px;width:315px;padding:25px;background:#142731ed;border-top:3px solid #e72443;box-shadow:0 18px 50px #0f222833}.panel h2{font-size:36px;letter-spacing:-1px;line-height:1.06;margin:14px 0}.panel p{font-size:14px;line-height:1.6;color:#c7d7de}.panel button{margin-top:8px}.primary{background:#e82342;border-color:#e82342;color:#fff}.primary:hover{background:#b90c2b}.panel small{display:block;font-size:9px;color:#a6b7bd;line-height:1.5;margin-top:14px}#result{top:225px;width:360px}#result h2{font-size:30px}#telemetry{position:absolute;left:400px;right:295px;top:90px;display:flex;gap:24px;align-items:center;color:#17303a}#telemetry>div>b{font-size:27px;display:block}#telemetry span{font-size:9px;letter-spacing:1px}.tank{width:140px}.tank span{display:flex;justify-content:space-between}progress{width:100%;height:6px;appearance:none;border:0;background:#7f9aa3;margin-top:10px}progress::-webkit-progress-bar{background:#7f9aa3}progress::-webkit-progress-value{background:#d91d3b}footer{position:absolute;left:30px;right:30px;bottom:20px}.keys{display:flex;justify-content:center;gap:22px;font-size:9px;color:#e2ecee;text-shadow:0 1px 4px #000}.keys b{color:white}#touch{display:flex;justify-content:center;gap:9px;margin-top:15px}#touch button{min-width:100px;touch-action:none;user-select:none}#touch button[data-input=boost]{background:#e82342}#touch button.held{background:#e8f6ff;color:#142731}lg-feedback{margin-top:12px}

@media(orientation:portrait){header span{display:none}header a{margin-right:auto}.title{top:85px}h1{font-size:44px}aside{top:90px;width:250px}aside p{min-height:0}#telemetry{left:32px;right:auto;top:265px;gap:16px}#intro,#result,#paused{top:auto;bottom:140px;width:440px;left:32px}.panel h2{font-size:32px}.panel p{font-size:16px}.panel small{font-size:12px}.keys{display:none}#touch{gap:8px}#touch button{min-width:0;flex:1;padding:25px 8px;font-size:15px}footer{bottom:32px}#result .label{font-size:12px}}

/* The full-screen stage uses its own result feedback; suppress the below-page strip. */
body > div > lg-play-next{display:none}
/* Warm test-site UI: quiet panels keep attention on the redesigned car. */
header a{color:#19313c}header button{border-radius:4px}.title p{letter-spacing:2px}aside{background:rgba(239,239,225,.9);border-top-color:#a87543;box-shadow:0 8px 25px #1c343319;border-radius:0 0 8px 8px}.panel{background:rgba(18,35,43,.94);border-top-color:#c49b69;border-radius:0 0 10px 10px}.primary,#levels button[aria-pressed=true],#touch button[data-input=boost]{background:#c99c64;border-color:#c99c64;color:#152730}.primary:hover{background:#e2b77d}progress::-webkit-progress-value{background:#8e633b}#touch button{border-radius:5px;background:#1d3239eb}.keys{background:#172b34bb;padding:9px 12px;border-radius:5px;width:fit-content;margin:0 auto}#telemetry{background:#e8ede6bf;padding:12px 16px;border-radius:6px;top:84px;left:390px;right:280px}#telemetry>div>b{font-variant-numeric:tabular-nums}@media(orientation:portrait){#telemetry{top:265px;left:32px;right:auto}.keys{display:none}}

#levels{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}#levels button{width:auto;padding:9px 5px}aside h2{margin-top:13px}#course-size{display:block;font-size:9px;letter-spacing:1px}#route{position:absolute;top:175px;left:390px;display:flex;flex-direction:column;gap:5px;color:#213d47;font-size:12px;letter-spacing:1px;background:#eef0e4dd;padding:10px 14px;border-radius:5px}#route span{font-size:10px}.danger{color:#ba1730!important}#telemetry>div>b{font-size:24px}#impact{white-space:nowrap}aside p{min-height:0}@media(orientation:portrait){#route{top:343px;left:32px;font-size:12px;padding:8px 12px}aside{top:80px}aside p{font-size:12px}#telemetry{top:265px}.panel p{font-size:15px}}

#touch button{min-width:82px;padding:12px 10px}.keys{gap:14px}@media(orientation:portrait){#touch{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}#touch button{min-width:0;font-size:11px;padding:24px 3px}.panel p{font-size:14px}}

#garage-open{position:absolute;right:30px;top:480px;background:#c99c64;color:#142731}#garage{z-index:20;left:300px;top:125px;width:600px;box-shadow:0 0 0 1500px #0b1924cc}#garage h2{margin:8px 0}#garage p{font-size:13px;margin:10px 0}.upgrade-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #45606a}.upgrade-row small{margin-top:6px;font-size:11px}.upgrade-row button{min-width:112px}button:disabled{opacity:.4;cursor:default}@media(orientation:portrait){#garage{left:30px;top:260px;width:640px}#garage-open{top:390px;right:30px}}

#garage{background:#142731}

#levels{grid-template-columns:repeat(6,1fr)}#levels button{font-size:10px;padding:9px 2px}

#controller-open{font-size:10px;letter-spacing:.5px}#controller-help{z-index:30;left:260px;top:60px;width:680px;max-height:580px;overflow-y:auto;background:#142731;box-shadow:0 0 0 1500px #0b1924cc}#controller-help h2{font-size:28px;margin:8px 0}#controller-help ol{padding-left:20px;font-size:13px;line-height:1.5}#controller-help li{margin:8px 0}#controller-status{color:#f6c780;font-weight:bold}.controller-map{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;line-height:1.4;padding:14px 0;border-top:1px solid #47606a;border-bottom:1px solid #47606a}.controller-map b{color:#f6c780}#controller-help .controller-tip{font-size:12px;line-height:1.5}#controller-help .controller-sources{font-size:11px}#controller-help a{text-decoration:underline}@media(orientation:portrait){#controller-help{left:30px;top:170px;width:640px;max-height:720px}#controller-help ol{font-size:16px}.controller-map{font-size:14px}#controller-open{font-size:11px}}

/* Hide course menus while driving; Home, Pause and Retry remain available. */
.run-playing #stage>aside,.run-playing #stage>.title,.run-playing #garage-open,.run-playing header>span,.run-playing #controller-open{display:none!important}
.run-playing header{justify-content:flex-end}
.using-controller #touch{display:none!important}
.using-controller footer .keys{display:flex;flex-wrap:wrap;gap:12px 18px;font-size:12px;padding:14px 18px;max-width:100%}
@media(orientation:portrait){.using-controller footer .keys{display:grid;grid-template-columns:repeat(2,1fr);font-size:15px;gap:14px 24px}}

#result[data-outcome="pass"] #result-title{color:#a5edbb;font-size:64px;letter-spacing:.08em}
#result[data-outcome="fail"] #result-title{color:#ff9684;font-size:64px;letter-spacing:.08em}
body.run-playing #next-gap{max-width:100%}

#sound{font-size:10px;padding:0 12px;white-space:nowrap}

.controller-focus{outline:3px solid #ffc36b!important;outline-offset:3px;background:#34515f!important}
#garage{max-height:calc(100% - 150px);overflow-y:auto}

.controller-menu-tip{display:none}.using-controller .controller-menu-tip{display:block}
@media(orientation:portrait){#garage{max-height:710px}}

#levels{grid-template-columns:repeat(7,1fr)}aside{max-height:360px;overflow-y:auto}#challenge-status{max-width:340px;font-size:11px;line-height:1.5;border-top:1px solid #a8b9ae;padding-top:6px}#challenge-status .complete{color:#24623c}#route{max-width:370px}#result{max-height:400px;overflow-y:auto}@media(orientation:portrait){aside{max-height:290px}#result{max-height:440px}#challenge-status{max-width:320px}}

.run-ended .title{display:none}#result{top:165px;max-height:455px}#result-detail{font-size:13px;line-height:1.45}#result[data-outcome] #result-title{font-size:56px;margin:10px 0}#sound{min-height:38px}@media(orientation:portrait){#result{top:auto;max-height:510px}#intro,#result,#paused{bottom:180px}.using-controller #intro,.using-controller #result,.using-controller #paused{bottom:205px}}
#intro{top:235px;width:360px}#intro p{font-size:13px;line-height:1.45}@media(orientation:portrait){#intro{top:auto;width:440px}#intro p{font-size:15px}}
/* Keep the selected course briefing visible as the campaign grows. */
#levels{max-height:160px;overflow-y:auto;scroll-padding:5px}#levels button{min-height:38px}aside h2{margin-top:12px}@media(orientation:portrait){#levels{max-height:110px}}

#home-link{position:relative;z-index:40;display:inline-flex;align-items:center;min-height:40px;padding:10px 12px;border:1px solid #64777f;border-radius:4px;background:#192a32;color:#eff5f6;white-space:nowrap;letter-spacing:1px}.run-playing #home-link{margin-right:auto}#home-link:hover{background:#34515f}@media(orientation:portrait){#home-link{font-size:10px;letter-spacing:.4px;padding:10px 8px}}

/* Show one control guide for the active input device. */
@media(hover:hover) and (pointer:fine){#touch{display:none!important}footer .keys{display:flex;flex-wrap:wrap}}
@media(hover:none),(pointer:coarse){body:not(.using-controller) footer .keys{display:none}}