@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--pink:#ff568f;--mint:#8bf5dc;--white:#fff0e7}*{box-sizing:border-box}body{margin:0;background:#180d29;color:var(--white);font-family:'Space Grotesk',Arial,sans-serif;overflow:hidden}canvas{position:fixed;inset:0;width:100%;height:100%}.grain{pointer-events:none;position:fixed;inset:0;z-index:2;background:repeating-linear-gradient(0deg,transparent 0 3px,#130c1b12 3px 4px);box-shadow:inset 0 0 180px #10091d77}header{position:absolute;z-index:4;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:30px 42px;border-bottom:1px solid #fff2}.brand{color:inherit;text-decoration:none;font-size:20px;font-weight:700;letter-spacing:3px;display:flex;align-items:center;gap:13px}.brand-icon{color:var(--pink);font-style:italic;font-size:30px;letter-spacing:-6px;margin-right:8px}.edition{font-size:9px;font-weight:400;letter-spacing:1.8px;border-left:1px solid #fff4;padding-left:20px;margin-left:10px;color:#c3abc4}.topright{display:flex;gap:15px;align-items:center;font-size:10px;letter-spacing:1.5px}.live-dot{width:5px;height:5px;background:var(--mint);box-shadow:0 0 10px var(--mint);border-radius:50%}button{cursor:pointer;font-family:inherit;color:inherit}header button{background:#20163166;border:1px solid #fff3;padding:10px 13px;font-size:10px;letter-spacing:1px}main{position:absolute;top:23%;left:6%;z-index:3}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:600;color:var(--mint);display:flex;align-items:center;gap:10px}.eyebrow span{height:1px;width:28px;background:var(--mint)}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(60px,7.2vw,112px);line-height:.88;letter-spacing:-1px;margin:26px 0 24px;font-weight:900}h1 em{color:var(--pink);font-style:italic}main p{font-size:13px;line-height:1.85;color:#d0b9d0}.tags{display:flex;gap:8px;margin:23px 0 26px}.tags span{font-size:8px;letter-spacing:1.7px;border:1px solid #b69cb14d;padding:7px 9px}.start{display:flex;justify-content:space-between;align-items:center;gap:45px;background:var(--mint);border:0;color:#17162b;padding:19px 22px;font-weight:700;font-size:12px;letter-spacing:1px;min-width:268px;box-shadow:5px 5px 0 #8bf5dc22;transition:transform .2s,background .2s}.start:hover{background:#b9ffed;transform:translateY(-3px)}.start span{font-size:22px;line-height:15px}.hint{font-size:8px;letter-spacing:1.5px;color:#ba9fb8;margin-top:17px}.hint span{margin:0 7px;color:var(--pink)}.record{margin-top:32px;display:grid;grid-template-columns:auto auto;gap:8px 20px;width:268px;border-top:1px solid #fff2;padding-top:17px}.record span,.record small{font-size:8px;letter-spacing:1.5px;color:#b79fb7}.record strong{font-size:14px;color:var(--pink);text-align:right}.record small{grid-column:1/3;font-size:7px}#scene-label{position:absolute;right:5%;bottom:125px;z-index:3;display:flex;flex-direction:column;gap:9px;text-align:right}#scene-label span{font-size:8px;letter-spacing:3px;color:var(--mint)}#scene-label strong{font-size:23px;letter-spacing:3px;font-weight:500}#scene-label small{font-size:8px;letter-spacing:2px;color:#c7aabe}footer{position:absolute;z-index:4;bottom:0;width:100%;padding:23px 40px;display:flex;justify-content:space-between;background:linear-gradient(transparent,#140d25cc);border-top:1px solid #fff2}.controls{display:flex;gap:22px}.controls>span{font-size:8px;color:#c7b6cb;letter-spacing:1px;display:flex;gap:5px;align-items:center}kbd{font-family:inherit;border:1px solid #ffffff40;border-bottom-width:2px;border-radius:3px;min-width:21px;padding:4px;text-align:center;font-size:9px;color:#fff0e7}.footer-right{font-size:8px;letter-spacing:2px;display:flex;align-items:center;gap:18px;color:#c8afbd}.footer-right span{color:var(--pink);font-size:20px}.hidden{display:none!important}#hud{position:absolute;inset:0;pointer-events:none;z-index:3}.race-info{position:absolute;top:130px;left:45px;width:340px}.race-info label{font-size:11px;letter-spacing:2px;display:flex;justify-content:space-between}.race-info label span{font-size:8px;color:var(--mint)}.progress{height:3px;background:#fff2;margin:17px 0}.progress i{display:block;height:100%;background:var(--pink);width:0}.race-numbers{display:flex;justify-content:space-between}.race-numbers div{display:flex;flex-direction:column;gap:9px}.race-numbers small{font-size:8px;letter-spacing:2px;color:#c7afc7}.race-numbers strong{font-weight:500;font-size:24px}.race-numbers b{font-size:10px;font-weight:400;color:#b69db2}.speed{position:absolute;right:50px;bottom:120px;width:230px}.speed>div:first-child{display:flex;align-items:baseline;gap:10px}.speed strong{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-size:100px;font-weight:700;line-height:1}.speed span{font-size:10px;letter-spacing:2px;color:var(--mint)}.nitro-label{font-size:8px;letter-spacing:2px;margin:18px 0 10px;display:flex;justify-content:space-between}.nitro-label span{font-size:8px}.boost{background:#fff2;height:5px;transform:skew(-20deg)}.boost i{display:block;background:var(--mint);height:100%;width:100%;box-shadow:0 0 12px #8bf5dc88}#message{position:absolute;top:36%;left:0;width:100%;text-align:center;pointer-events:none;font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-size:80px;z-index:5;color:var(--mint);text-shadow:0 0 30px #73ebd277}#modal{position:absolute;inset:0;background:#110c22b8;backdrop-filter:blur(9px);z-index:7;display:flex;justify-content:center;align-items:center}.modal-card{text-align:center;background:#1c132b;border:1px solid #e495ad44;padding:45px 55px;min-width:360px}.modal-card .eyebrow{justify-content:center}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-size:70px;margin:20px 0 10px}.modal-card p{color:#c4a8bf;font-size:12px;margin-bottom:30px;line-height:1.8}.modal-card button{width:100%}.secondary{border:1px solid #fff3;background:transparent;padding:14px;margin-top:17px;font-size:10px;letter-spacing:2px}#touch{display:none}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:4px}@media(max-width:800px){header{padding:18px 22px}.edition,.topright>.live-dot,.footer-right{display:none}.topright{font-size:0;gap:7px}.brand{font-size:15px;letter-spacing:2px}.brand-icon{font-size:25px}main{top:22%;left:6%}h1{font-size:75px}.controls{gap:10px}.controls>span{font-size:7px}footer{padding:17px 20px}#scene-label{bottom:100px;right:6%}#scene-label strong{font-size:16px}.record{margin-top:24px}.race-info{left:22px;top:100px;width:300px}.speed{right:25px;bottom:120px;width:170px}.speed strong{font-size:75px}}@media(pointer:coarse){footer{display:none}#touch{position:absolute;bottom:22px;left:5%;width:90%;display:flex;gap:12px;z-index:5}#touch button{border:1px solid #8bf5dc88;background:#15142d99;border-radius:7px;padding:18px;font-weight:bold;touch-action:none}#touch button:nth-child(3){margin-left:auto}#scene-label{bottom:110px}}@media(max-height:650px){main{top:20%}h1{font-size:70px;margin:20px 0}main p{font-size:11px}.record{display:none}.tags{margin:15px 0}.hint{margin-top:12px}}
/* Softer film treatment: bloom lives in the renderer, UI stays crisp. */
.grain{background:repeating-linear-gradient(0deg,transparent 0 4px,#36213a07 4px 5px);box-shadow:inset 0 0 160px #26173635}
#scene-label strong{text-shadow:0 0 25px #ff9bd766}
#menu::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#1a102b66,transparent 55%)}
.mode-select{display:flex;gap:8px;margin:0 0 20px;max-width:390px}.mode-choice{background:#21162d99;border:1px solid #d8b7d144;padding:12px 14px;text-align:left;display:flex;flex-direction:column;gap:7px;flex:1}.mode-choice strong{font-size:10px;letter-spacing:1px;white-space:nowrap}.mode-choice small{font-size:7px;letter-spacing:1px;color:#c5abc4;white-space:nowrap}.mode-choice.selected{border-color:var(--mint);background:#8bf5dc18}.mode-choice.selected strong{color:var(--mint)}main{top:19%}.record{margin-top:22px}.tags{margin:18px 0}#circuit-ui{pointer-events:none;position:absolute;inset:0;z-index:3}.map-card{position:absolute;left:42px;bottom:105px;width:205px;padding:16px;background:#171329b0;border:1px solid #8bf5dc33;backdrop-filter:blur(5px)}.map-card>div{font-size:8px;letter-spacing:1.3px;display:flex;justify-content:space-between;color:var(--mint)}.map-card svg{display:block;width:160px;height:145px;margin:12px auto}.map-card small{font-size:6px;letter-spacing:.7px;color:#c2aabd}.drift-readout{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);text-align:center;min-width:280px}.drift-readout>span{font-size:8px;letter-spacing:2px;color:var(--mint)}.drift-readout strong{font-family:'Barlow Condensed',Impact,sans-serif;font-style:italic;font-size:48px;display:block;margin:5px 0;color:var(--pink)}.drift-readout b{font-family:'Space Grotesk',sans-serif;font-size:12px;font-style:normal;color:var(--mint)}.drift-readout small{font-size:7px;letter-spacing:1px;color:#c9afc5}.race-info label #race-title{color:var(--white);font-size:11px}.race-info{width:410px}.race-numbers strong{font-size:22px}@media(max-width:800px){main{top:17%}.map-card{left:15px;bottom:110px;width:145px;padding:10px}.map-card svg{width:120px;height:110px}.map-card small{display:none}.map-card>div{font-size:6px}.drift-readout{bottom:100px;min-width:200px}.drift-readout small{display:none}.drift-readout strong{font-size:35px}.race-info{width:350px}.mode-choice{padding:10px}.mode-choice strong{font-size:9px}.mode-choice small{font-size:6px}.mode-select{max-width:330px}}@media(max-height:740px){.record{display:none}.mode-select{margin-bottom:15px}.tags{display:none}main{top:20%}h1{font-size:70px;margin:18px 0}main p{margin:10px 0 16px}}@media(max-width:500px){.drift-readout{bottom:260px}.map-card{bottom:110px}.race-info{width:calc(100% - 40px)}.race-numbers strong{font-size:18px}}

#online-panel{position:absolute;right:5%;top:22%;width:290px;padding:24px;background:#171329e6;border:1px solid #8bf5dc44;z-index:4}#online-panel h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:29px;letter-spacing:1px;margin:12px 0}#online-panel p{font-size:10px;line-height:1.7;color:#cbb7cb}#online-panel label{display:block;font-size:8px;letter-spacing:1.4px;color:var(--mint);margin:16px 0 7px}#online-panel input{width:100%;padding:11px;background:#30203f;border:1px solid #a78ca34d;color:var(--white);font:11px 'Space Grotesk',sans-serif}#online-panel .start{min-width:0;width:100%;margin:20px 0 14px;font-size:10px;padding:15px}#online-panel small{display:block;font-size:8px;line-height:1.6;margin:8px 0;color:#c8afc5}.start:disabled{opacity:.5;cursor:default}#online-board{position:absolute;right:35px;top:120px;min-width:225px;max-width:300px;padding:17px;background:#171329c9;border:1px solid #8bf5dc44;z-index:4}#online-board>div{display:flex;gap:20px;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--mint)}#online-scores{padding-left:18px;margin:14px 0}#online-scores li{font-size:10px;padding:5px 0}#online-scores b{float:right;margin-left:20px;color:var(--pink)}#online-leave{background:transparent;border:1px solid #c8afc544;font-size:8px;padding:8px;color:#ceb8cd;letter-spacing:1px}.driver-label{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%);background:#151425b9;border:1px solid #9cf4dd66;padding:5px 9px;font-size:10px;color:var(--mint);white-space:nowrap}@media(max-width:800px){#online-panel{right:3%;width:230px;padding:15px;top:23%}#online-panel p,#online-panel small:last-child{display:none}#online-board{top:100px;right:15px;min-width:160px;padding:10px}}@media(max-width:600px){#online-panel{top:auto;bottom:95px;right:5%;width:90%;padding:12px}#online-panel .eyebrow,#online-panel h3,#online-panel label{display:none}#online-panel input{width:48%;display:inline-block}#online-panel .start{margin:8px 0;padding:10px}#online-panel small{margin:4px 0}main{top:16%}.record,.hint{display:none}#online-board{top:250px}#online-panel~#scene-label{display:none}}

/* Keep the larger car clear of the drift readout and preserve HUD contrast. */
.drift-readout{bottom:auto;top:43%}.race-info{background:#171329b8;border:1px solid #b8dace25;padding:14px 16px;backdrop-filter:blur(4px)}

/* Transient race feedback stays clear of the driving line. */
#message.lap-notice{top:108px;font-size:clamp(28px,4vw,54px);line-height:1.1}
.drift-readout{top:auto;bottom:88px;min-width:240px}.drift-readout strong{font-size:40px;margin:2px 0}
@media(max-width:800px){#message.lap-notice{top:74px;font-size:24px}.drift-readout{top:auto;bottom:80px;min-width:180px}.drift-readout strong{font-size:32px}}
@media(pointer:coarse){.drift-readout{bottom:112px}}

#graphics-panel{position:absolute;z-index:8;right:40px;top:90px;width:245px;padding:20px;background:#171329f2;border:1px solid #8bf5dc55;box-shadow:0 15px 35px #090c2155}#graphics-panel h3{margin:0 0 15px;font-size:12px;letter-spacing:2px}.time-options{display:flex;gap:10px}.time-options button{flex:1;padding:12px 8px;border:1px solid #c3b0ce55;background:#30203c;font-size:11px;letter-spacing:1px}.time-options button[aria-pressed=true]{color:var(--mint);border-color:var(--mint);background:#8bf5dc18}#graphics-panel small{display:block;margin-top:15px;font-size:9px;line-height:1.7;color:#c1b3ce}@media(max-width:800px){#graphics-panel{top:75px;right:15px}.topright #graphics{font-size:9px;padding:10px 8px}}

@media(max-width:500px){header{padding-left:15px;padding-right:15px}.brand{font-size:12px;letter-spacing:1px;gap:7px}.brand-icon{font-size:20px}.topright button,.topright #graphics{font-size:8px;padding:8px 7px}}
/* Restrained tape texture; it sits behind the readable HUD. */
.grain{background:none}
#film-overlay{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:calc(var(--film-strength,1.5)*.09);mix-blend-mode:soft-light;background-repeat:repeat;background-size:128px 128px}
#film-overlay::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 3px,#0008 3px 4px)}
#graphics-panel .film-label{display:flex;justify-content:space-between;align-items:center;margin:19px 0 9px;font-size:9px;letter-spacing:1.5px;color:#c6b9ce}

#film-toggle{padding:9px 12px;background:#30203c;border:1px solid #c3b0ce55;color:var(--white);font-size:10px;letter-spacing:1px}#film-toggle[aria-pressed=true]{color:var(--mint);border-color:var(--mint);background:#8bf5dc18}

.car-picker{max-width:390px;margin:0 0 18px}.car-picker label{display:block;font-size:8px;letter-spacing:2px;color:var(--mint);margin-bottom:8px}.car-picker select{width:100%;padding:12px 14px;background:#251b36;border:1px solid #8bf5dc77;color:var(--white);font:12px 'Space Grotesk',sans-serif}.car-picker>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.car-picker small{font-size:7px;letter-spacing:.5px;color:#c5b1cb}.car-picker button{border:0;background:none;color:var(--mint);font-size:7px;white-space:nowrap;padding:4px 0;cursor:pointer}#credits-modal{position:fixed;inset:0;z-index:12;background:#090b1cce;display:grid;place-items:center;padding:22px}.credits-card{position:relative;max-width:600px;max-height:85vh;overflow:auto;padding:36px;background:#20172f;border:1px solid #8bf5dc77;box-shadow:0 20px 80px #0008}.credits-card h2{font-size:36px;margin:0 0 25px}.credits-card p{font-size:13px;line-height:1.9;margin:20px 0}.credits-card a{color:var(--mint)}.credits-card small{display:block;font-size:10px;line-height:1.8;color:#c5b1cb}#credits-close{position:absolute;right:12px;top:9px;background:none;border:0;color:var(--white);font-size:28px;cursor:pointer}#credits-modal.hidden{display:none}@media(min-width:801px){main{top:16%}h1{font-size:clamp(64px,6.8vw,105px);margin:18px 0}.record{display:none}}@media(max-height:800px){main{top:15%}main h1{font-size:64px;margin:14px 0}main p{margin:9px 0 14px}.tags{display:none}.mode-select{margin-bottom:14px}.car-picker{margin-bottom:12px}}@media(max-width:800px){.car-picker{max-width:330px}}@media(max-width:600px){main{top:12%}main h1{font-size:48px}main p{font-size:10px}.mode-choice{padding:8px}.car-picker select{padding:9px}.car-picker{margin-bottom:9px}main .start{padding:13px}.credits-card{padding:25px}.credits-card h2{font-size:28px}}@media(max-height:620px) and (min-width:601px){main{top:15%;max-height:72vh;overflow-y:auto;padding-right:14px}main h1{font-size:45px}main p,.tags{display:none}}

.credits-card h3{font-size:13px;letter-spacing:2px;color:var(--mint);margin:28px 0 12px}

#radio-panel{position:absolute;z-index:4;right:40px;top:108px;width:290px;padding:14px 18px;background:#171329dc;border:1px solid #8bf5dc44;pointer-events:none}#radio-panel>span:first-child{font-size:7px;letter-spacing:1.5px;color:var(--mint)}#radio-panel strong{display:block;font-size:18px;line-height:1.3;margin:7px 0 3px;color:var(--white)}#radio-artist{display:block;font-size:10px;color:#d9c7df}#radio-album{display:block;font-size:8px;color:#b6a8c4;margin-top:5px}.radio-on #online-board{top:245px}#radio-panel.hidden{display:none}@media(max-width:800px){#radio-panel{top:78px;right:15px;width:230px;padding:12px}#radio-panel strong{font-size:15px}.radio-on #online-board{top:210px}.topright{gap:6px}.topright>span{display:none}}@media(max-width:500px){header{gap:6px}.brand .edition{display:none}.topright button,.topright #graphics{padding:7px 5px;font-size:7px}.brand{font-size:10px;letter-spacing:.5px}.brand-icon{font-size:16px}#radio-panel{top:65px;right:12px;width:200px;padding:10px 12px}.radio-on #online-board{top:205px}}
/* Stack radio above the menu's online card, including short desktop windows. */
.radio-on #online-panel{top:max(235px,22%)}
@media(max-height:740px) and (min-width:601px){.radio-on #online-panel p,.radio-on #online-panel small:last-child{display:none}.radio-on #online-panel{padding:16px;top:230px}}
@media(max-width:600px){.radio-on #online-panel{top:auto}}

/* A dedicated garage keeps the driving menu compact and the preview visible. */
#customize-open{color:var(--mint)}
.garage-open #menu,.garage-open #online-panel,.garage-open #scene-label{visibility:hidden}
#garage-panel{position:fixed;z-index:7;left:5%;top:110px;width:330px;max-height:calc(100dvh - 190px);overflow-y:auto;padding:25px;background:#171329ee;border:1px solid #8bf5dc55;box-shadow:0 20px 60px #080b2455}
#garage-panel h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:36px;margin:14px 0 6px}#garage-panel p{font-size:12px;color:#c8b8cf;margin-bottom:24px}
#garage-panel label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.5px;margin:18px 0 10px}
#garage-panel input[type=color]{width:48px;height:28px;padding:0;border:1px solid #fff5;background:transparent;cursor:pointer}
.paint-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}.paint-swatches button{height:26px;border:1px solid #ffffff40;background:var(--swatch);border-radius:3px}.paint-swatches button[aria-pressed=true]{outline:2px solid var(--mint);outline-offset:2px}
#garage-panel select{width:100%;padding:12px;background:#30203c;color:var(--white);border:1px solid #fff4;font:inherit;font-size:12px}
#garage-panel small{display:block;color:#b9abc6;font-size:10px;line-height:1.7;margin:14px 0}#garage-panel .start,#garage-panel .secondary{width:100%;margin-top:10px}#garage-panel .start{padding:15px}#garage-panel .secondary{font-size:10px}
@media(max-width:600px){#garage-panel{left:12px;top:80px;width:270px;padding:18px;max-height:calc(100dvh - 150px)}#garage-panel h2{font-size:28px}.paint-swatches{gap:5px}}

#customize-open:disabled{opacity:.45;cursor:wait}