@import"https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;800;900&family=DM+Sans:wght@400;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#fff;background:#082b35}*{box-sizing:border-box}body{margin:0;overflow:hidden}#world{position:fixed;inset:0;width:100%;height:100%}button,select{font:inherit}button{cursor:pointer;border:0;color:inherit}button:focus-visible,select:focus-visible{outline:3px solid #ffcc46;outline-offset:4px}[hidden]{display:none!important}.overlay{position:fixed;inset:0;display:flex;align-items:center;padding:3vw;background:linear-gradient(90deg,rgba(3,25,34,.96),rgba(3,25,34,.78) 38%,transparent 85%)}.card{width:520px;max-width:100%;padding:24px}.eyebrow{font-size:11px;letter-spacing:3px;color:#5ce3d0;font-weight:700}h1{font:900 clamp(65px,7.5vw,112px)/.84 "Barlow Condensed",Impact,sans-serif;letter-spacing:-3px;margin:22px 0 12px;transform:skew(-5deg)}h1 em{color:#ffcd46;font-style:normal}.subtitle{font-weight:700;letter-spacing:6px;font-size:12px}p{font-size:14px;line-height:1.7;color:#b7ccd0}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:23px 0 16px}.car-choice{background:#ffffff0b;border:1px solid #ffffff22;text-align:left;padding:12px 9px;border-radius:5px}.car-choice.active{border-color:#ffcd46;background:#ffcd4615}.car-choice b{display:block;font-size:12px}.car-choice small{font-size:10px;color:#adc2c8}.car-icon{font-size:26px;display:block;margin-bottom:8px}.options{display:flex;gap:12px;margin-bottom:18px}.options label{font-size:9px;letter-spacing:1px;color:#83a7ac;flex:1}select{width:100%;background:#153c46;border:1px solid #ffffff20;color:#fff;padding:10px 5px;margin-top:6px;font-size:11px}.primary{background:#ffcd46;color:#102d35;padding:17px 20px;width:100%;font-weight:900;border-radius:3px;letter-spacing:2px}.primary span{float:right}.instructions{font-size:10px;line-height:1.8;color:#97b3bb;margin-top:16px}.quiet{background:transparent;font-size:11px;color:#a9c5c9;padding:12px 0}.stamp{position:absolute;right:40px;bottom:35px;transform:rotate(-8deg);border:2px solid #fff8;padding:14px;font:800 16px Barlow Condensed;letter-spacing:3px;color:#fffc}.brand{position:absolute;top:25px;left:28px;font:900 32px Barlow Condensed;color:#ffcd46}.brand span{display:block;font:700 9px DM Sans;letter-spacing:2px}.stats{position:absolute;top:24px;left:50%;transform:translate(-50%);display:flex;gap:35px;background:#082b35bb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 26px;border-radius:6px}.stats small{display:block;font-size:9px;letter-spacing:2px;color:#a6c6c8}.stats b{font:800 28px Barlow Condensed}#pause{position:absolute;right:25px;top:25px;background:#082b35bb;padding:12px;border-radius:50%}.speed{position:absolute;bottom:32px;right:30px;text-align:right}.speed>b{font:900 70px Barlow Condensed;text-shadow:0 2px 10px #082b35}.speed>span{font-size:11px;margin-left:5px}.boost{height:7px;width:170px;background:#082b3588;margin:6px 0}.boost i{display:block;height:100%;background:#5ce3d0;width:100%}.speed small{font-size:9px;letter-spacing:1px}#map{position:absolute;bottom:25px;left:20px;background:#082b35aa;border-radius:10px}#callout{position:absolute;top:110px;width:100%;text-align:center;font-weight:700;font-size:17px;text-shadow:0 2px 5px #082b35}#countdown{position:absolute;top:35%;width:100%;text-align:center;font:900 110px Barlow Condensed;color:#ffcd46;text-shadow:0 4px 0 #082b35}#touch{display:none;position:absolute;bottom:12px;left:0;right:0;justify-content:center;gap:10px}#touch button{touch-action:none;-webkit-user-select:none;user-select:none;background:#082b35bb;border:1px solid #ffffff44;border-radius:12px;padding:20px 22px;font-weight:800}.compact{background:#082b35ee;border:1px solid #ffffff22;border-radius:12px;margin:auto;width:400px}.compact h2{font:800 60px Barlow Condensed;margin:15px 0}.secondary{width:100%;padding:14px;background:#1b4c58;margin-top:10px}.compact .quiet{width:100%}@media(pointer:coarse){#touch{display:flex}.speed{bottom:100px}#map{bottom:105px}}@media(max-width:600px){.overlay{padding:10px;background:#082b35d9}.card{padding:16px;margin:auto}.stamp{display:none}h1{font-size:72px;margin-top:16px}.choices{margin-top:15px}.stats{gap:18px;padding:10px 15px;top:14px}.stats b{font-size:23px}.brand{left:12px;top:15px;font-size:24px}.brand span{display:none}#pause{right:12px;top:16px}#map{width:120px;height:87px}.speed>b{font-size:48px}.speed{right:15px}.instructions{font-size:9px}#touch button{padding:18px 16px;font-size:11px}}#touch{display:flex;bottom:max(15px,env(safe-area-inset-bottom));padding:0 14px;gap:8px;justify-content:space-between}#touch button{min-height:64px;min-width:58px;flex:1;max-width:100px;padding:14px 8px;background:#153d49e8;border:2px solid #5ce3d0;border-radius:18px;box-shadow:0 5px #041e29;font-size:12px}#touch button[data-key=Space]{border-color:#ffcd46}#touch button[data-key=ShiftLeft]{background:#ffcd46;color:#102d35;border-color:#ffe598}#item{background:#855ce1!important;border-color:#c7a6ff!important;font-size:10px!important}.speed,#map{bottom:108px}body{touch-action:none}.stats{gap:18px}.primary{border-radius:16px;box-shadow:0 5px #bf8c1d}.car-choice{border-radius:12px}.overlay{overflow-y:auto;touch-action:pan-y}@media(min-width:700px){.card{width:480px}.stats{top:16px}#touch{max-width:620px;left:50%;transform:translate(-50%)}.stamp:after{content:" • MADE FOR MOBILE"}}@media(max-height:650px){.overlay{align-items:flex-start}.card{padding:12px}h1{font-size:56px;margin:14px 0 8px}.choices{margin:12px 0}.car-icon{font-size:20px;margin-bottom:3px}p{margin:9px 0;font-size:12px}.options{margin-bottom:12px}.instructions{margin-top:10px}.stamp{display:none}}#menu{background:linear-gradient(90deg,#031922f2,#031922cc 34%,#03192214 80%),url(/art/durban-dash-key-art.jpg) center/cover no-repeat}.car-choice{background:#164956d9;border:2px solid #4e7f85}.car-choice.active{background:#84662899;border-color:#ffcd46}.brand{filter:drop-shadow(0 3px 0 #173541)}#touch button:active{transform:translateY(3px);box-shadow:0 2px #041e29;filter:brightness(1.3)}@media(max-width:600px){#menu{background:linear-gradient(0deg,#031922 5%,#031922df 55%,#03192233),url(/art/durban-dash-key-art.jpg) 64% center/cover no-repeat}.card{background:#052b3555;border-radius:24px}.car-choice b{font-size:11px}.stats{gap:12px}#callout{font-size:13px;padding:0 15px}}.stats b{white-space:nowrap}@media(max-width:600px){.stats{padding:10px 12px;gap:14px}.stats b{font-size:21px}.stats small{font-size:8px;letter-spacing:1px}}#touch{display:block;position:fixed;left:0;right:0;bottom:max(14px,env(safe-area-inset-bottom));width:100%;height:132px;max-width:none;transform:none;padding:0;pointer-events:none;z-index:5}#stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:0;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle,#1438459c 0 40%,#061e329c 41% 68%,#fff2 69% 71%,#14384588 72%);border:1px solid #c0f5f34d;box-shadow:inset 0 2px 14px #031c2d77,0 4px 20px #03232d33;touch-action:none;pointer-events:auto;-webkit-user-select:none;user-select:none;display:grid;place-items:center}#stick-knob{width:57px;height:57px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#8ce2d4,#32988e 60%,#236477);border:2px solid #c5f4eaa6;box-shadow:0 5px 9px #03192199,inset 0 2px 3px #e7fff977;pointer-events:none;will-change:transform}#stick small{position:absolute;bottom:8px;font-size:8px;letter-spacing:2px;color:#d7f8ef99;pointer-events:none}.stick-ring{position:absolute;width:92px;height:92px;border:1px dashed #bdeee93d;border-radius:50%;pointer-events:none}#actions{position:absolute;bottom:3px;right:max(16px,env(safe-area-inset-right));width:174px;height:130px;pointer-events:none}#touch #actions button{position:absolute;width:64px;height:64px;min-width:0;min-height:0;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:50%;padding:3px;border:2px solid #fff8;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:0 5px #03283999,inset 0 2px 4px #fff6;background:#286477ed;color:#fff;font-size:9px;letter-spacing:.8px}#actions button strong{font-size:24px;line-height:26px}#actions button span{font-size:8px;font-weight:800}#touch #actions [data-action=boost]{right:0;bottom:8px;width:78px;height:78px;background:linear-gradient(#ffe584,#f4b834);color:#183b4c;border-color:#ffedaf}#touch #actions [data-action=brake]{left:0;bottom:0;background:linear-gradient(#e58b83,#b55269)}#touch #actions [data-action=jump]{left:41px;top:0;background:linear-gradient(#70d8c6,#348c9f)}#touch #actions button.pressed{transform:translateY(3px) scale(.96);filter:brightness(1.25);box-shadow:0 2px #03283999}.speed{bottom:165px;right:18px}.speed>b{font-size:45px}.boost{width:112px}.speed small{font-size:7px}#map{top:105px;bottom:auto;left:12px;width:90px;height:65px;opacity:.75}#callout{top:180px;font-size:12px}#countdown{font-size:90px}@media(max-width:360px){#stick{width:110px;height:110px;left:12px}#actions{right:10px;transform:scale(.9);transform-origin:bottom right}.stats{gap:9px;padding:9px}.speed{bottom:152px}}@media(orientation:landscape)and (max-height:500px){#touch{bottom:12px}#stick{width:112px;height:112px}#map{top:80px;width:78px;height:56px}.speed{bottom:154px}.stats{top:10px}.speed>b{font-size:34px}#callout{top:82px;left:25%;width:50%}}#cars{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#ffcd4688 #ffffff11;padding:3px 2px 10px;margin:14px 0 8px;touch-action:pan-x}.car-choice{flex:0 0 143px;scroll-snap-align:start;padding:4px 8px 10px;min-height:132px}.car-choice img{width:100%;height:77px;object-fit:contain;display:block}.car-choice small{display:block;font-size:9px}.car-choice small:first-of-type{letter-spacing:2px;color:#80dbd0;font-size:8px}.car-choice b{font-size:12px;margin:3px 0}.paint-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}.paint-row>span{font-size:8px;letter-spacing:1px;color:#9ac2c6;white-space:nowrap}#paints{display:flex;gap:8px;flex-wrap:wrap}.paint{width:23px;height:23px;border-radius:50%;background:var(--paint);border:2px solid #ffffff44;box-shadow:inset 0 2px 2px #fff6}.paint.active{outline:2px solid #fff1c1;outline-offset:3px}.boosting:after{content:"";position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 65px #44eeda55;background:repeating-conic-gradient(from 0deg at 50% 45%,transparent 0deg 19deg,#b5ffef13 19deg 19.4deg,transparent 19.4deg 35deg);z-index:0}.boosting .speed>b{color:#a8fff0}.drifting #stick{border-color:#ffcf55;box-shadow:0 0 24px #ffd24b44}#hud>div,#hud>button,#hud>canvas{z-index:2}@media(max-width:600px){#menu .card{padding-top:16px}h1{font-size:66px}.car-choice{flex-basis:136px}.paint-row{gap:10px}#paints{gap:7px}.paint{width:21px;height:21px}.instructions{font-size:9px}}#garage-specs{font-size:10px;letter-spacing:.6px;color:#b4d4d2;margin:0 0 12px}#record{font-size:9px;letter-spacing:1.4px;color:#8dddd2;margin:0 0 10px}.result-row{display:flex;justify-content:space-between;padding:8px 6px;font-size:12px;border-bottom:1px solid #ffffff15;color:#b9d3d4}.result-row.yours{color:#ffdb68;background:#ffdb6810}.result-row b{font-variant-numeric:tabular-nums}.lap-splits{display:flex;justify-content:space-between;gap:5px;margin:12px 0;font-size:10px}.lap-splits span{padding:8px 5px;background:#ffffff08;border-radius:5px}.lap-splits .best-lap{color:#6fe5d0}#results{margin-bottom:18px}.compact{max-height:90dvh;overflow-y:auto;touch-action:pan-y}@media(max-height:760px){#menu h1{font-size:52px;margin-top:12px}#menu p{font-size:12px;margin:9px 0}#menu .car-choice{min-height:115px}#menu .car-choice img{height:62px}}#stick.reversing{border-color:#ffb67b;box-shadow:0 0 24px #ffb36355}#stick.reversing #stick-knob{background:radial-gradient(circle at 35% 25%,#ffdb9c,#d78b48 65%,#885a36)}#stick small{font-size:7px;letter-spacing:1px}.instructions{line-height:1.65}#modal{z-index:30}#menu{z-index:20}#menu.district-menu{display:block;padding:0;background:radial-gradient(ellipse at 50% 15%,#245f8b,#112c51 65%,#111c3d);color:#fff;overflow-y:auto;overflow-x:hidden;touch-action:pan-y}#menu.district-menu:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-conic-gradient(#ffffff03 0% 25%,transparent 0% 50%) 0 0/40px 40px;opacity:.6}#menu[data-screen=title]{background:linear-gradient(0deg,#102746 4%,#102746c9 48%,#10274633),url(/art/durban-dash-key-art.jpg) 62% center/cover no-repeat}.menu-top{position:relative;z-index:1;height:57px;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:10px}.mini-logo{font:900 19px Barlow Condensed,Impact,sans-serif;letter-spacing:-.3px;transform:skew(-7deg);color:#fff}.mini-logo em{color:#ffdc54;font-style:normal}.sound-toggle{background:#061d3b66;border:1px solid #ffffff22;border-radius:30px;padding:9px 12px;font-size:9px;font-weight:800;letter-spacing:.6px}.round-nav{border-radius:50%;width:34px;height:34px;font-size:30px;line-height:20px;background:#fff;color:#204565}.menu-screen{position:relative;z-index:1;width:min(100%,660px);margin:0 auto;padding:12px 22px 26px;animation:screen-in .2s ease-out}.menu-screen h2{font:900 32px/.98 Barlow Condensed,Impact,sans-serif;margin:7px 0 13px;letter-spacing:-.2px}.step-label{font-size:10px;font-weight:800;letter-spacing:2px;color:#7bdded}.title-screen{min-height:calc(100dvh - 57px);display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}.title-badge{font-size:9px;letter-spacing:2px;color:#b5f1e9;font-weight:800}.title-screen h1{font:900 clamp(76px,20vw,130px)/.8 "Barlow Condensed",Impact,sans-serif;margin:24px 0 15px;letter-spacing:-2px;transform:skew(-8deg);text-shadow:0 5px 0 #133259,0 8px 0 #fff2}.title-screen h1 em{color:#ffdc54}.title-line{font-size:12px;font-weight:900;letter-spacing:4px}.title-screen p{font-size:16px;color:#d5e5f3;line-height:1.6;margin:22px 0 32px}.race-cta{width:100%;border-radius:15px;padding:17px 18px;background:linear-gradient(#ffe782,#ffd047);color:#17324d;box-shadow:0 5px #b48130,0 9px 20px #06132455;font-weight:900;font-size:13px;letter-spacing:1.6px;transition:transform .12s}.race-cta span{float:right;font-size:20px;line-height:17px}.race-cta:active{transform:translateY(3px);box-shadow:0 2px #b48130}.title-foot{font-size:9px;letter-spacing:1.8px;color:#b7d6e4;margin-top:25px;text-align:center}.garage-stage{height:198px;position:relative;text-align:center;border-radius:22px;overflow:hidden;background:radial-gradient(ellipse at 50% 80%,#72cfde55,transparent 60%);margin-bottom:8px}.stage-ring{position:absolute;width:240px;height:70px;border-radius:50%;border:3px solid #b2efff88;box-shadow:0 0 0 14px #69b2c51a,0 0 0 29px #69b2c50a;bottom:47px;left:50%;transform:translate(-50%)}#garage-hero{position:relative;display:block;object-fit:contain;width:270px;height:150px;margin:-6px auto 0;filter:drop-shadow(0 15px 9px #031c3766);animation:car-hover 3s ease-in-out infinite}#hero-name{font:900 28px Barlow Condensed;position:relative;margin-top:-4px;color:#fff}#garage-specs{font-size:9px;color:#99dce2;margin:3px 0 0;letter-spacing:.6px}#menu #cars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;overflow:visible;margin:0 0 15px;padding:0;touch-action:pan-y}#menu .car-choice{min-width:0;min-height:95px;border:2px solid #ffffff24;background:linear-gradient(#27547b,#203f64);padding:3px 3px 7px;border-radius:11px;text-align:center;box-shadow:0 3px #091a37;transition:transform .15s}#menu .car-choice.active{border-color:#ffe16d;background:linear-gradient(#5b6682,#495472);transform:translateY(-2px);box-shadow:0 3px #bb903c,0 0 15px #ffdc5422}#menu .car-choice img{height:47px;width:100%;object-fit:contain}#menu .car-choice small:first-of-type{font-size:6px;letter-spacing:1.2px;color:#a2e5ef}#menu .car-choice b{font-size:9px;line-height:1.05;margin:4px 0 0;font-weight:800}#menu .car-choice small:last-child{display:none}#menu .paint-row{justify-content:center;gap:10px;margin:12px 0 18px}#menu .paint-row>span{font-size:8px;color:#93c6d5}#menu #paints{gap:8px}#menu .paint{height:24px;width:24px;border:2px solid #ffffff66}#course-cards{display:grid;gap:11px}.course-card{position:relative;height:124px;overflow:hidden;border-radius:17px;border:3px solid #ffffff30;background:#184268;text-align:left;padding:0;box-shadow:0 4px #071a37;isolation:isolate}.course-card.selected{border-color:#ffdb55;box-shadow:0 4px #b88933,0 0 20px #ffdb5520}.course-art{position:absolute;inset:0;background-image:linear-gradient(90deg,#0a244b66,#0a244b00),url(/art/district-courses.jpg);background-size:auto,300% 100%;background-position:center,var(--panel) center;z-index:-2}.course-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061e45ee,transparent 95%);z-index:-1}.course-copy{position:absolute;left:14px;bottom:13px;right:85px}.course-copy small{font-size:8px;font-weight:800;letter-spacing:1.2px;color:var(--course-color)}.course-copy strong{display:block;font:900 29px/.95 Barlow Condensed;margin:4px 0}.course-copy span{font-size:10px;color:#e2edf8}.course-route{position:absolute;right:10px;bottom:10px;width:73px;height:61px;opacity:.9}.course-route svg{width:100%;height:100%;overflow:visible}.course-route path{fill:none;stroke:var(--course-color);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 2px 2px #0b1638)}.course-check{position:absolute;top:8px;right:9px;background:#ffde61;color:#153e5b;width:21px;height:21px;border-radius:50%;font-size:13px;text-align:center;padding-top:2px;font-style:normal;display:none}.selected .course-check{display:block}.weather-row{display:flex;align-items:center;gap:9px;margin:19px 0 12px}.weather-row>span{font-size:8px;letter-spacing:1px;color:#9cbdd3;margin-right:auto}.weather-row button{padding:9px 13px;border-radius:20px;background:#ffffff10;font-size:10px;font-weight:800;border:1px solid #ffffff30}.weather-row button.selected{background:#effaff;color:#24576b;border-color:#fff}#course-description{font-size:11px;line-height:1.5;color:#abc9dc;min-height:33px;margin-bottom:8px}#menu #record{font-size:8px;color:#ffe28a;margin-bottom:13px}.course-screen .instructions{text-align:center;margin-top:15px;font-size:8px;color:#98bad1}#modal{background:linear-gradient(#07182bbc,#132446e8);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#modal .compact{background:linear-gradient(#234d76,#172b50);border:2px solid #7cbcca55;border-radius:24px;box-shadow:0 16px 50px #0005}#modal h2{color:#ffdb58;text-shadow:0 4px 0 #0d274a}.result-row.yours{background:#ffdc5420;border-radius:8px}.brand{font-style:italic}.stats{border:1px solid #ffffff33;border-radius:14px;box-shadow:0 4px #0c284f55}@keyframes screen-in{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}@keyframes car-hover{50%{transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.menu-screen,#garage-hero{animation:none}}@media(max-height:740px){.menu-top{height:49px}.menu-screen{padding-top:7px}.menu-screen h2{font-size:27px;margin-bottom:9px}.garage-stage{height:165px}#garage-hero{height:125px}#hero-name{font-size:25px}.stage-ring{bottom:42px}#menu .car-choice{min-height:83px}#menu .car-choice img{height:38px}.course-card{height:105px}.course-copy strong{font-size:25px}.weather-row{margin-top:14px}.title-screen{min-height:calc(100dvh - 49px)}}@media(min-width:700px){.menu-screen{width:640px}.garage-stage{height:230px}#garage-hero{height:180px;width:340px}#menu .car-choice{min-height:116px}#menu .car-choice img{height:72px}.course-card{height:145px}.title-screen h1{font-size:140px}.menu-top{padding:12px 30px}}