@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Barlow:wght@400;500;600;700;800&display=swap');
:root{--bg:#101617;--panel:#1a2224;--muted:#8c9a9c;--line:#303a3c;--yellow:#e5ff52;--cyan:#26d5dd;--pink:#ee438c}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eff4ef;font:14px Barlow,Arial,sans-serif}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit;font-weight:800;letter-spacing:1px;font-size:12px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:3px;margin-top:5px}.mark{font:italic 900 39px 'Barlow Condensed',Arial;letter-spacing:-4px;border-bottom:4px solid var(--yellow);line-height:37px;padding-right:5px}.mark span{color:var(--yellow)}.edition{color:#94a0a2;letter-spacing:3px;font-size:10px}.edition b{color:var(--yellow);margin-left:12px}.quiet{border:0;background:none;color:#bdc7c8;font-size:12px}main{max-width:1700px;margin:auto;padding:28px 4vw 0}.titlebar{display:flex;align-items:center;gap:55px;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--muted)}.eyebrow i,.live{display:inline-block;width:6px;height:6px;background:var(--yellow);border-radius:50%;margin-right:7px}h1{font:900 clamp(46px,5vw,78px)/1 'Barlow Condensed',Impact,sans-serif;margin:7px 0 0;letter-spacing:-1px}h1 em{color:var(--yellow);font-style:italic}.tagline{color:var(--muted);line-height:1.6;border-left:1px solid var(--line);padding-left:25px}.tagline strong{color:#ddd}.trackinfo{margin-left:auto;text-align:right}.trackinfo b{font:700 34px 'Barlow Condensed',sans-serif}.trackinfo small{font-size:19px;color:var(--muted)}.trackinfo span{display:block;font-size:9px;letter-spacing:2px;margin-top:5px;color:var(--muted)}.game{border:1px solid #3c4749;background:#20292b;box-shadow:0 20px 70px #0004}.hud{height:66px;display:flex;align-items:center;padding:0 24px;gap:36px;background:#182022}.hud>div:not(.session){min-width:95px}.hud small{font-size:9px;letter-spacing:1.5px;color:var(--muted);display:block;margin-bottom:4px}.hud b{font-variant-numeric:tabular-nums;font-size:20px}.hud .session{margin-right:auto;display:flex;gap:9px;align-items:center}.session b{font-size:10px;letter-spacing:1px}.session span{width:7px;height:7px;background:var(--yellow);border-radius:50%}.hud .speed{display:flex;align-items:baseline;gap:5px;min-width:60px}.speed b{color:var(--yellow);font-size:26px}.stage{position:relative;background:#3c4545;aspect-ratio:2.35;overflow:hidden}#track{width:100%;height:100%;display:block;touch-action:none}.tracklabel{position:absolute;top:10px;left:20px;font-weight:800;font-style:italic;font-size:11px;letter-spacing:1px;color:#e5ff5277;pointer-events:none}.tracklabel span{font-size:8px;margin-left:5px;color:#a7b8b877}.cornerlabel{position:absolute;bottom:8px;right:14px;font-size:8px;font-weight:bold;letter-spacing:1.8px;color:#ced6ce88}.cornerlabel span{padding:0 7px}.welcome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#0b1519b5;backdrop-filter:blur(2px)}.welcome .eyebrow{color:var(--yellow)}.welcome h2{font:800 42px 'Barlow Condensed',sans-serif;margin:9px 0}.welcome p{color:#c7d1d1;text-align:center;line-height:1.5;margin:0 0 20px}.welcome small{font-size:8px;letter-spacing:1.7px;color:#a2b2b4;margin-top:15px}.primary{display:flex;align-items:center;justify-content:space-between;gap:30px;background:var(--yellow);border:0;padding:16px 20px;color:#151b0a;font-size:11px;font-weight:800;letter-spacing:1px;transition:background .15s}.primary:hover{background:#f0ff95}.primary span{font-size:19px;line-height:12px}.trackfooter{height:44px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.muted{color:var(--muted)}.legend{font-size:9px;letter-spacing:1px}.legend i{display:inline-block;background:var(--cyan);width:8px;height:8px;margin-right:6px}.legend span{color:var(--muted);margin-left:22px;font-size:10px;letter-spacing:0}.garage{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr;gap:18px;margin:25px 0 18px;align-items:stretch}.garageheading{padding-top:15px}.garageheading h2{font:700 28px 'Barlow Condensed',sans-serif;margin:9px 0}.garageheading p{font-size:10px;color:var(--muted)}.carcard{position:relative;text-align:left;padding:0 15px 12px;background:#192123;border:1px solid var(--line);color:inherit;overflow:hidden;transition:.2s}.carcard:hover{background:#212c2e}.carcard.selected{border-color:var(--cyan);background:linear-gradient(125deg,#1e3335,#1a2325)}.carcard canvas{display:block;width:100%;height:80px;object-fit:contain}.carcard>div{display:flex;justify-content:space-between;align-items:center}.carcard small{font-size:8px;letter-spacing:1px;color:var(--muted);display:block}.carcard b{display:block;font:700 21px 'Barlow Condensed',sans-serif;margin-top:3px}.swatch{width:13px;height:13px;transform:skew(-15deg)}.cyan{background:var(--cyan)}.pink{background:var(--pink)}.selectmark{font-size:8px;letter-spacing:1px;display:block;margin-top:9px;color:var(--muted)}.selected .selectmark{color:var(--cyan)}.startpanel{padding:8px 0 0 8px}.startpanel label{font-size:9px;letter-spacing:1.7px;color:var(--muted);display:block;margin-bottom:11px}.startpanel select{width:100%;background:#202a2c;color:#fff;border:1px solid var(--line);padding:10px;font-size:12px;margin-bottom:9px}.startpanel .primary{width:100%}.utility{display:flex;gap:20px;margin-top:12px}.utility button{border:0;background:none;color:var(--muted);font-size:10px;padding:0}.bottom{padding:18px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.bottom kbd{padding:3px 5px;border:1px solid #3b4546;border-radius:3px;font-size:9px;margin:0 2px 0 8px;color:#d5dddd}.bottom kbd:first-child{margin-left:0}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0;color:#748386;font-size:8px;letter-spacing:2px}footer b{color:var(--yellow);margin:0 8px}.banner{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font:800 54px 'Barlow Condensed',sans-serif;color:var(--yellow);background:#111b21e8;padding:10px 28px;text-align:center;white-space:nowrap;pointer-events:none}.banner small{display:block;font:12px Barlow,Arial;color:white;margin-top:8px;white-space:normal}[hidden]{display:none!important}dialog{max-width:530px;background:#1c2628;color:#ecf0ee;border:1px solid #5b6e70;padding:35px;line-height:1.7}dialog::backdrop{background:#000b}dialog h2{font:700 36px 'Barlow Condensed',sans-serif}dialog p{font-size:13px}.close{position:absolute;right:14px;top:8px;font-size:25px;border:0;background:none;color:white}.touch{display:none;gap:9px;margin-bottom:15px}.touch button{background:#293638;color:#fff;border:1px solid #4a5a5c;padding:18px 22px;border-radius:5px;touch-action:none;user-select:none}.touch button:last-child{background:var(--yellow);color:#141b0f}.touch div{flex:1}.game:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#101617}.game:fullscreen .stage{max-height:calc(100vh - 110px);width:100%;aspect-ratio:2.35}.game:fullscreen .hud,.game:fullscreen .trackfooter{flex-shrink:0}@media(pointer:coarse){.touch{display:flex}}@media(max-width:900px){.garage{grid-template-columns:1fr 1fr 1.2fr}.garageheading{display:none}.tagline{display:none}.hud{gap:20px}.hud .session{max-width:160px}.bottom{gap:15px;line-height:2}.bottom>span:last-child{min-width:130px}.stage{aspect-ratio:2.15}.legend span{display:none}}@media(max-width:600px){header{height:65px}.edition{display:none}main{padding-top:20px}.titlebar{margin-bottom:17px}.trackinfo b{font-size:26px}.trackinfo span{font-size:7px}.hud{height:55px;padding:0 10px;gap:12px}.hud .session{display:none}.hud>div:not(.session){min-width:60px;flex:1}.hud b{font-size:16px}.hud small{font-size:7px}.welcome h2{font-size:25px}.welcome p{display:none}.welcome .primary{margin-top:15px;padding:12px}.welcome small{display:none}.stage{aspect-ratio:2.15;min-height:170px}.tracklabel{display:none}.garage{grid-template-columns:1fr 1fr;gap:12px}.startpanel{grid-column:1/-1;padding:0}.startpanel .utility{justify-content:center}.trackfooter .muted{display:none}.trackfooter{padding:0 9px}.bottom{display:none}.touch{display:flex;margin-top:12px}.touch button{padding:16px 13px;font-size:11px}footer{letter-spacing:1px;font-size:7px}.banner{font-size:30px}.cornerlabel{display:none}}
/* V0.3 collection garage */
.garage{display:block;margin-top:30px}.garageintro{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.garageintro h2{font:800 37px 'Barlow Condensed',Arial;margin:8px 0}.garageintro p{font-size:11px;color:var(--muted);margin:0}.catalogbadge{display:flex;align-items:center;gap:14px}.catalogbadge b{font:800 52px 'Barlow Condensed';color:var(--yellow)}.catalogbadge span{font-size:9px;color:var(--muted);letter-spacing:1px;line-height:1.6}.garagecontrols{display:flex;align-items:center;gap:20px;margin-bottom:17px}.filters{display:flex;background:#1a2426;padding:4px;gap:4px}.filters button{border:0;background:transparent;padding:10px 16px;color:var(--muted);font-size:11px;font-weight:700}.filters button.active{background:var(--yellow);color:#131b11}.searchbox{display:flex;gap:10px;align-items:center;background:#1a2426;border:1px solid var(--line);padding:10px 13px;max-width:310px;flex:1}.searchbox span{font-size:20px;color:var(--muted);line-height:15px}.searchbox input{border:0;outline:0;background:none;min-width:0;width:100%;color:white;font:12px Barlow,Arial}.searchbox:focus-within{border-color:var(--yellow)}#carcount{margin-left:auto;color:var(--muted);font-size:10px}.garagebody{display:grid;grid-template-columns:1fr 280px;gap:25px;align-items:start}.cargrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.carcard{min-height:163px;padding:0 12px 12px}.carcard canvas{height:85px}.carcard b{font-size:20px;line-height:1.1}.carcard small{font-size:7px;letter-spacing:.5px}.carcard .swatch{flex-shrink:0}.carcard.selected{border-color:var(--car-color,var(--cyan));background:linear-gradient(135deg,#2c3a3d,#172224)}.carcard.selected .selectmark{color:var(--car-color,var(--cyan))}.catalogarea .pagination{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding:8px 0}.pagination button{background:transparent;color:#cdd7d5;border:1px solid var(--line);padding:8px 13px;font-size:10px}.pagination button:disabled{opacity:.3;cursor:default}.pagination span{font-size:10px;letter-spacing:1px;color:var(--muted)}.startpanel{background:#192224;padding:20px;border:1px solid var(--line);position:sticky;top:15px}.startpanel canvas{width:100%;height:110px;object-fit:contain}.startpanel h3{font:700 29px 'Barlow Condensed';margin:0 0 8px}.startpanel p{color:var(--muted);font-size:11px;line-height:1.5}.selectedmeta{font-size:9px;letter-spacing:1px;color:var(--yellow);border-bottom:1px solid var(--line);padding:5px 0 20px;margin-bottom:20px}.startpanel .modehint{margin:0 0 15px;font-size:10px}.startpanel .selectionhint{margin:17px 0 0;font-size:9px}.rosterfoot{font-size:9px;color:var(--muted);line-height:1.6;padding-top:7px}.raceboard{border:1px solid var(--line);border-top:0;background:#172123;display:flex;align-items:center;padding:12px 18px;gap:20px}.boardtitle{font-size:10px;color:var(--yellow);font-weight:800}.boardtitle span{display:block;font-size:8px;color:var(--muted);letter-spacing:1px;margin-top:4px}.raceboard ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:0;width:100%}.raceboard li{border-left:2px solid var(--race-color);padding-left:8px;min-width:0}.raceboard li strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.raceboard li small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.raceboard li.player strong{color:var(--yellow)}@media(max-width:1150px){.cargrid{grid-template-columns:repeat(3,minmax(0,1fr))}.garagebody{grid-template-columns:1fr 250px}.raceboard ol{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:800px){.garagebody{grid-template-columns:1fr 220px;gap:15px}.cargrid{grid-template-columns:repeat(2,minmax(0,1fr))}.startpanel{padding:15px}.catalogbadge{display:none}.garagecontrols{flex-wrap:wrap;gap:10px}.searchbox{max-width:none}.garageintro h2{font-size:30px}}@media(max-width:600px){.garagebody{display:flex;flex-direction:column}.startpanel{order:-1;position:static;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5px 15px}.startpanel>canvas{grid-row:2/5;height:100px}.startpanel>.eyebrow,.startpanel>.primary,.startpanel>.utility,.startpanel>.selectionhint{grid-column:1/-1}.startpanel h3{font-size:23px}.selectedmeta{border:0;padding:0;margin:0;font-size:8px}.startpanel label{grid-column:1/-1;margin:10px 0 5px}.startpanel select,.startpanel .modehint{grid-column:1/-1}.startpanel .modehint{margin:0 0 5px}.startpanel .utility{margin:10px 0}.startpanel .selectionhint{margin:0;text-align:center}.catalogarea{width:100%}.carcard{min-height:165px}.garagecontrols .searchbox{flex-basis:100%;order:3}.garageintro h2{font-size:30px}.garageintro p{font-size:10px;line-height:1.5}.raceboard{display:block;padding:12px}.boardtitle{margin-bottom:12px}.boardtitle span{display:inline;margin-left:10px}.raceboard ol{gap:14px 8px}.filters button{padding:9px 13px}.carcard b{font-size:21px}}

@media(max-width:600px){.hud{gap:8px}.hud>div:not(.session){min-width:0}.hud b{font-size:14px}.hud small{font-size:6px;letter-spacing:.6px}.hud .speed{min-width:0;gap:3px}}

.startpanel select:disabled{opacity:.45;cursor:not-allowed}@media(max-width:600px){#difficultyhint{grid-column:1/-1}}

.raceresult{display:flex;align-items:center;gap:35px;padding:20px 24px;background:#26322b;border-top:1px solid #596e3e}.raceresult small{display:block;font-size:9px;color:#acbba9;letter-spacing:1.4px;margin-bottom:7px}.raceresult b{font:700 27px 'Barlow Condensed',Arial;color:var(--yellow);font-variant-numeric:tabular-nums}.raceresult p{margin:0 0 0 auto;color:var(--muted);font-size:10px;line-height:1.6}.game:fullscreen:has(.raceresult:not([hidden])) .stage{max-height:calc(100vh - 210px)}@media(max-width:600px){.raceresult{gap:12px;flex-wrap:wrap;padding:15px}.raceresult>div{flex:1}.raceresult small{font-size:7px;letter-spacing:.5px}.raceresult b{font-size:20px}.raceresult p{flex-basis:100%;margin:0;font-size:9px}}