:root{--navy:#061f35;--blue:#007bc2;--yellow:#ffd43b;--orange:#ff5b2e;--paper:#f6fbff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'Poppins',system-ui,sans-serif;background:#061f35;color:#0b2d46}
button,select{font:inherit}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-5rem;z-index:999;background:#fff;padding:1rem;color:#000}
.skip:focus{top:1rem}
button:focus-visible,select:focus-visible,input:focus-visible{outline:4px solid #16a7ff;outline-offset:3px}
.garage{position:relative;min-height:calc(100vh - 64px);padding:1.5rem;background:url('assets/car/flag.png') center/180px no-repeat,linear-gradient(145deg,#c8f2ff,#f4fbff 52%,#fff0c5);overflow:auto}
.garage__shade{position:fixed;inset:64px 0 0;pointer-events:none;background:radial-gradient(circle at 50% 25%,transparent,rgba(3,33,52,.12))}
.garage__content{position:relative;max-width:1050px;margin:auto;text-align:center}
.kicker{margin:.2rem 0;color:#08749e;font-size:.72rem;font-weight:1000;letter-spacing:.22em}
.garage h1{margin:.1rem;font:1000 clamp(3rem,8vw,6.6rem)/.85 'Poppins',sans-serif;letter-spacing:-.07em;color:#06243b;text-shadow:0 5px 0 #fff}
.garage h1 span{color:#f04b2d}
.tagline{margin:.8rem auto 1.2rem;max-width:650px;font-size:1.05rem;font-weight:800;color:#35596c}
.garage__columns{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;text-align:left}
.panel{margin:0;border:2px solid rgba(4,66,97,.2);border-radius:22px;background:rgba(255,255,255,.9);padding:1rem;box-shadow:0 12px 35px rgba(5,42,67,.14)}
.panel legend{margin:auto;padding:.4rem 1rem;border-radius:999px;background:#062c49;color:#fff;font-weight:1000;font-size:.8rem;letter-spacing:.06em}
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}
.car-choice,.track-choice{border:3px solid #c5d5de;border-radius:16px;background:#fff;color:#0b2d46;cursor:pointer;transition:.15s}
.car-choice:hover,.track-choice:hover{transform:translateY(-2px)}
.car-choice.selected,.track-choice.selected{border-color:#f5a800;box-shadow:0 0 0 4px #ffdf75;background:#fffdf2}
.car-choice{min-height:145px;padding:.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}
.car-choice img{width:94px;height:75px;object-fit:contain}
.car-choice--blue img{filter:hue-rotate(150deg) saturate(1.2)}
.car-choice--gold img{filter:hue-rotate(35deg) saturate(1.25)}
.car-choice strong,.track-choice strong{font-weight:1000}
.car-choice small,.track-choice small{color:#5b7483;font-weight:700;font-size:.72rem}
.tracks{display:grid;gap:.6rem}
.track-choice{min-height:70px;padding:.65rem;display:grid;grid-template-columns:42px 1fr;text-align:left;align-items:center}
.track-choice>span{font-size:1.7rem;grid-row:1/3}
.track-choice small{grid-column:2}
.race-options{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem auto;color:#153d55;font-weight:850}
.race-options label{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.9);border:1px solid #bdd0da;padding:.55rem .8rem;border-radius:999px}
.race-options select{border:0;background:#e8f4fa;border-radius:8px;padding:.35rem}
.toggle input{width:20px;height:20px}
.race-button{display:block;margin:.7rem auto;border:0;border-radius:16px;padding:1rem 2.3rem;background:linear-gradient(135deg,#ef3154,#ff6b2d);color:#fff;font-weight:1000;font-size:1.25rem;letter-spacing:.04em;box-shadow:0 8px 0 #a72534,0 18px 35px rgba(170,35,49,.25);cursor:pointer}
.race-button:active{transform:translateY(5px);box-shadow:0 3px 0 #a72534}
.controls-note{margin:1rem auto 0;color:#456273;font-size:.78rem;font-weight:700}
kbd{background:#fff;border:1px solid #9ab0bc;border-bottom-width:3px;border-radius:5px;padding:.05rem .32rem}
.race{position:fixed;inset:0;z-index:20;background:#163e56;overflow:hidden;touch-action:none}
#raceCanvas{display:block;width:100%;height:100%}
.race:before{content:'';position:fixed;z-index:22;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(2,17,29,.35)}
.hud{position:fixed;z-index:25;left:1rem;right:1rem;top:.75rem;display:flex;align-items:center;justify-content:center;gap:.6rem;pointer-events:none;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.place,.lap,.speed{min-width:92px;padding:.45rem .7rem;border:2px solid rgba(255,255,255,.8);border-radius:14px;background:rgba(3,31,50,.86);text-align:center;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.place span,.lap span,.speed span{display:block;font-size:.54rem;letter-spacing:.14em;font-weight:1000;color:#9ce3ff}
.speed small{display:block;font-size:.5rem;font-weight:900;color:#ffe36a;letter-spacing:.08em}
.place strong,.lap strong,.speed strong{font-size:1.3rem;font-weight:1000}
.place small{font-size:.52rem}
.progress{position:relative;width:min(34vw,400px);height:20px;border:4px solid #fff;border-radius:999px;background:rgba(4,26,40,.72)}
.progress i{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,#22d39b,#ffdf3b,#ff6334)}
.progress__car{position:absolute;left:-8px;top:-18px;font-size:1.35rem;transition:left .2s}
.progress__flag{position:absolute;right:-13px;top:-17px;font-size:1.4rem}
.pause{width:48px;height:48px;border:2px solid #fff;border-radius:50%;background:#062c49;color:#fff;font-weight:1000;pointer-events:auto;cursor:pointer}
.steering{position:fixed;z-index:26;left:0;right:0;bottom:1.1rem;display:flex;justify-content:space-between;padding:0 1rem;pointer-events:none}
.steering button{width:82px;height:82px;border:3px solid #fff;border-radius:50%;background:rgba(255,255,255,.9);color:#056fa9;font-size:2rem;font-weight:1000;box-shadow:0 8px 0 rgba(2,36,57,.45);pointer-events:auto;touch-action:none}
.steering button.pressed{transform:translateY(5px);box-shadow:0 3px 0 rgba(2,36,57,.45);background:#fff3a4}
.gas{position:fixed;z-index:26;right:1rem;bottom:7.7rem;width:82px;height:82px;border:4px solid #fff;border-radius:50%;background:linear-gradient(145deg,#ff742f,#ef3154);color:#fff;font-weight:1000;font-size:.72rem;box-shadow:0 8px 0 rgba(60,10,20,.4);cursor:pointer}
.gas:active,.gas.pressed{transform:translateY(5px);box-shadow:0 3px 0 rgba(60,10,20,.4)}
.drift{position:fixed;z-index:26;left:1rem;bottom:7.7rem;width:82px;height:82px;border:4px solid #fff;border-radius:50%;background:linear-gradient(145deg,#087fc1,#21c7dc);color:#fff;font-weight:1000;font-size:.72rem;box-shadow:0 8px 0 rgba(2,38,60,.45);cursor:pointer;touch-action:none}
.drift:active,.drift.pressed{transform:translateY(5px);box-shadow:0 3px 0 rgba(2,38,60,.45)}
.race.drafting:after{content:'SLIPSTREAM';position:fixed;z-index:24;left:50%;bottom:5.2rem;transform:translateX(-50%);color:#8ff3ff;font-size:.72rem;font-weight:1000;letter-spacing:.18em;text-shadow:0 2px 5px #00263d}
.countdown{position:fixed;z-index:30;inset:0;display:grid;place-items:center;color:#fff;font-size:clamp(6rem,20vw,13rem);font-weight:1000;text-shadow:0 10px 0 #062c49;pointer-events:none}
.checkpoint{position:fixed;z-index:28;left:50%;top:25%;transform:translateX(-50%);padding:.15em .55em;border-radius:999px;background:rgba(4,36,55,.72);color:#fff;font-size:clamp(1.25rem,4.2vw,2.7rem);font-weight:1000;text-shadow:0 4px 0 #062c49;opacity:0;white-space:nowrap}
.checkpoint.show{animation:checkpoint 1.5s ease}
.modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:1rem;background:rgba(2,16,27,.84);backdrop-filter:blur(8px)}
.modal__card{width:min(94vw,480px);max-height:92vh;overflow:auto;padding:1.5rem;border-radius:25px;background:#fff;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.modal__icon{font-size:3.5rem}
.modal h2{margin:.3rem;font:1000 2.1rem/1 'Poppins',sans-serif}
.modal button{display:block;width:100%;margin:.6rem 0;padding:.8rem;border:2px solid #a9bfca;border-radius:999px;background:#fff;color:#0b2d46;font-weight:900;cursor:pointer}
.modal .modal__primary{border:0;background:linear-gradient(135deg,#ef3154,#ff6b2d);color:#fff;font-size:1.05rem}
.finish-place{font-size:3rem;font-weight:1000;color:#ef4d2f}
.results{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0}
.results div{padding:.7rem;border-radius:12px;background:#eaf5fa}
.results small{display:block;color:#577382;font-weight:800}
.results strong{font-size:1.2rem}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.08);box-shadow:0 0 25px #ffe143}}
@keyframes checkpoint{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}20%,70%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0}}
@media(max-width:720px){
  .garage{padding:.8rem}.garage h1{font-size:3.2rem}.tagline{font-size:.85rem}.garage__columns{grid-template-columns:1fr}.panel{padding:.75rem}.car-choice{min-height:112px}.car-choice img{width:68px;height:54px}.car-choice small{font-size:.62rem}.race-options{gap:.4rem;margin:.65rem auto}.race-options label{font-size:.72rem}.controls-note{font-size:.67rem}.hud{top:max(.35rem,env(safe-area-inset-top));left:.35rem;right:.35rem;display:grid;grid-template-columns:auto auto 1fr auto;gap:.22rem}.place,.lap,.speed{min-width:52px;padding:.25rem .28rem}.place strong,.lap strong,.speed strong{font-size:.92rem}.progress{width:auto;min-width:62px;height:14px}.pause{width:38px;height:38px}.steering{bottom:max(.75rem,env(safe-area-inset-bottom));padding:0 .65rem}.steering button{width:66px;height:66px}.gas{right:.7rem;bottom:5.8rem;width:58px;height:58px}.drift{left:.7rem;bottom:5.8rem;width:58px;height:58px}.checkpoint{top:18%;max-width:90vw;text-align:center}
}
@media(max-width:500px) and (orientation:portrait){.hud{grid-template-columns:auto auto 1fr auto}.progress{grid-column:1/5;grid-row:2;width:70vw;justify-self:center}.pause{position:fixed;right:.45rem;top:4.5rem}.race:after{content:'SWIPE OR TAP TO STEER';position:fixed;z-index:23;left:50%;bottom:8rem;transform:translateX(-50%);font-size:.55rem;font-weight:900;letter-spacing:.1em;color:rgba(255,255,255,.72);white-space:nowrap}.race.drafting:after{content:'SLIPSTREAM'}}
@media(max-height:700px) and (min-width:700px){.garage{padding:.5rem}.garage h1{font-size:3.2rem}.tagline{margin:.3rem auto}.car-choice{min-height:100px}.car-choice img{width:65px;height:50px}.race-options{margin:.5rem auto}.controls-note{margin:.5rem auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.city-loop-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}