@import url('./turn-signals.css');
@import url('./fonts.css');
:root{color-scheme:dark;--bg:#111315;--panel:#202326;--ink:#f0eee7;--muted:#909492;--accent:#f14c40;--line:#ffffff19;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #ffc376;outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line);position:relative;z-index:3;background:#121416}.brand{font-size:31px;font-weight:800;letter-spacing:-1.7px;display:flex;align-items:center;gap:9px}.brand-dot{color:var(--accent);margin-left:-9px}.brand-mark{display:grid;place-items:center;width:32px;height:35px;background:var(--accent);font-size:30px;border-radius:9px;transform:skew(-9deg);line-height:1}nav{display:flex;height:100%;gap:36px;margin-left:90px}.nav{background:none;color:var(--muted);font-size:14px;border-bottom:2px solid transparent;padding:0 2px}.nav.active{color:var(--ink);border-color:var(--accent)}.header-right{display:flex;align-items:center;gap:28px}.preview{font-size:10px;letter-spacing:1.5px;color:#a6aca7;display:flex;gap:8px;align-items:center}i{font-style:normal}.preview i,footer i{height:5px;width:5px;display:inline-block;border-radius:50%;background:#b2c49d}.icon-button{background:none;color:#afb4b1;font-size:21px;display:flex;gap:9px;align-items:center}.icon-button span{font-size:12px}#stage{height:calc(100svh - 133px);min-height:710px;position:relative;isolation:isolate;overflow:hidden}#world,.vignette,.screen{position:absolute;inset:0}#world canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:40%;left:50%;transform:translateX(-50%);color:#aaa;font-size:14px}.vignette{pointer-events:none;background:linear-gradient(90deg,#111315ef 0%,#11131599 28%,transparent 58%),linear-gradient(0deg,#111315 0%,transparent 30%);z-index:1}.screen{z-index:2;pointer-events:none}.screen button,.screen a{pointer-events:auto}.garage-copy{position:absolute;top:7.5%;left:5%;width:360px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:2px;color:#b0b5b1;display:flex;align-items:center;gap:10px}.eyebrow>span{display:inline-block;width:20px;height:2px;background:var(--accent)}h1{font-size:clamp(56px,5vw,78px);line-height:.99;letter-spacing:-4px;margin:28px 0 22px;font-weight:800}h1 em{font-weight:750;color:#c8c7bf}em{font-style:italic}.intro{font-size:15px;line-height:1.7;color:#a9ada9}.mode-tabs{display:flex;gap:24px;margin-top:33px;border-bottom:1px solid var(--line)}.mode-tabs button{background:none;padding:12px 0;font-size:13px;color:#9b9e98;border-bottom:2px solid transparent}.mode-tabs button.selected{color:#f5f1e6;border-color:var(--accent)}.mission{display:flex;gap:16px;align-items:center;padding:20px 0}.mission-number{font:italic 27px Arial;color:#6e736f}.mission h2{font-size:16px;margin:0 0 7px}.mission p{font-size:11px;color:#9b9e98;margin:0}.mission-arrow{margin-left:auto;color:#afb2aa}.primary{background:var(--accent);padding:16px 24px;border-radius:3px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:25px;transition:background .2s,transform .2s}.primary:hover{background:#ff6054;transform:translateY(-1px)}#start{width:100%;font-size:16px}.start-hint{font-size:11px;color:#828780;display:flex;gap:6px;margin-top:14px}.car-caption{position:absolute;top:6.5%;right:6%;text-align:right}.car-caption>span{font-size:10px;letter-spacing:2.8px;color:#c6c9c1}.car-caption h2{font-size:46px;letter-spacing:-1.8px;margin:10px 0 15px}.car-caption h2 em{font-weight:400;color:#aaa}.car-specs{display:flex;gap:19px;align-items:center;font-size:10px;color:#a0a49e}.car-specs strong{font-size:20px;color:#e1e2da;font-weight:500;margin-right:4px}.car-specs span:last-child{font-size:8px;max-width:105px;line-height:1.6;letter-spacing:1px;text-align:left}.paint-row{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:22px}.paint-row>span{font-size:9px;letter-spacing:1.5px;margin-right:8px;color:#90968f}.swatch{width:17px;height:17px;border-radius:50%;background:var(--paint);padding:0}.swatch.selected{outline:1px solid #d1d4ca;outline-offset:4px}.garage-floor-label{position:absolute;right:13%;bottom:27%;font-size:9px;letter-spacing:4px;color:#767c76}.garage-floor-label span{display:block;text-align:center;font-size:8px;letter-spacing:3px;margin-top:8px;color:#4f5751}.garage-bottom{position:absolute;bottom:25px;left:5%;right:5%;display:flex;align-items:center;gap:28px}.garage-label{width:170px;flex-shrink:0}.garage-label .eyebrow{font-size:9px;letter-spacing:2px}.garage-label p{font-size:14px;color:#c1c4ba}.car-cards{display:flex;flex:1;gap:10px;max-width:800px}.car-card{position:relative;display:flex;align-items:center;gap:10px;flex:1;min-width:0;height:114px;background:#202426ba;border:1px solid #ffffff13;border-radius:4px;text-align:left;padding:9px 13px 9px 0;overflow:hidden;transition:background .2s}.car-card.selected{border-color:#b86659;background:#3629258c}.car-card:hover{background:#3a3f3b}.car-card img{width:46%;height:90px;object-fit:contain;mix-blend-mode:lighten}.car-card strong{display:block;font-size:12px;white-space:nowrap}.car-card small{font-size:7px;letter-spacing:1px;color:#9a9f97;display:block;margin-top:9px;white-space:nowrap}.car-card b{position:absolute;top:9px;right:9px;font-size:10px;color:#ce7465}.garage-note{font-size:10px;line-height:1.8;color:#848980;margin-left:auto}footer{height:45px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:10px;color:#7b827b;background:#111315}footer>span{font-size:9px;letter-spacing:1.5px;display:flex;align-items:center;gap:9px}footer a{font-size:11px}.route-panel{position:absolute;top:32px;left:35px;background:#10191ddb;backdrop-filter:blur(10px);border:1px solid #ffffff20;padding:20px 24px;min-width:270px;border-radius:5px}.route-panel h2{font-size:25px;margin:10px 0 18px;letter-spacing:-.8px}.route-panel .eyebrow{font-size:9px;color:#c2c8c6;margin:0}.route-panel>span{font-size:11px;color:#bdc4bd}.route-progress{height:3px;background:#ffffff26;margin-bottom:12px}.route-progress i{display:block;width:0;height:100%;background:var(--accent);transition:width .3s}.drive-actions{position:absolute;right:32px;top:32px;display:flex;gap:8px}.glass-button{background:#111b20d9;backdrop-filter:blur(8px);padding:12px 17px;border:1px solid #ffffff20;border-radius:4px;font-size:12px}.glass-button span{font-size:9px;margin-left:12px;color:#a9b5b1;border:1px solid #ffffff40;padding:3px}.drive-prompt{position:absolute;top:23%;left:50%;transform:translateX(-50%);background:#111b20de;border:1px solid #ffffff20;border-radius:30px;padding:13px 22px;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:12px}.drive-prompt i{width:6px;height:6px;border-radius:50%;background:#f5aa72}.minimap{position:absolute;bottom:36px;left:36px;width:155px;background:#10191de0;border:1px solid #ffffff25;padding:12px;border-radius:7px;text-align:center}.minimap svg{width:100%}.minimap>span{font-size:8px;letter-spacing:2px;color:#a6b1a5}.speedometer{position:absolute;bottom:40px;right:42px;width:190px}.speedometer>div:not(.rpm){display:flex;align-items:center;gap:13px}.speedometer strong{font-size:76px;letter-spacing:-5px;font-style:italic;font-weight:600;line-height:1.2;text-shadow:0 3px 20px #0009}.speedometer span{font-size:10px;max-width:18px;color:#d1d9d3;line-height:1.6}.speedometer b{font:italic 32px Arial;color:#ff8a72;margin-left:auto}.speedometer p{font-size:8px;letter-spacing:2px;color:#d1d5ce}.rpm{height:5px;background:#ffffff33;transform:skew(-20deg);overflow:hidden}.rpm i{display:block;height:100%;background:var(--accent);width:0}.question-panel{position:absolute;z-index:4;bottom:30px;left:50%;transform:translateX(-50%);width:min(790px,90%);padding:24px 30px;background:#171d20f5;border:1px solid #6e777277;border-radius:9px;box-shadow:0 30px 100px #0008;max-height:77%;overflow:auto;backdrop-filter:blur(20px)}.question-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.question-heading .eyebrow{font-size:10px;color:#b6c1b5}.question-badge{font-size:8px;letter-spacing:1.5px;color:#a5b9a0;padding:5px 7px;border:1px solid #536d5340;border-radius:2px}.question-body{display:flex;gap:26px}.sign-frame{width:105px;flex-shrink:0;padding:10px}.sign-frame img{width:100%;height:110px;object-fit:contain}.question-content{flex:1;min-width:0}.question-content h2{font-size:22px;margin:0 0 18px;letter-spacing:-.5px}#answers{display:grid;gap:8px}.answer{display:flex;align-items:center;gap:12px;text-align:left;background:#ffffff08;border:1px solid #ffffff24;padding:12px;border-radius:4px;font-size:13px;line-height:1.4}.answer:hover:not(:disabled){background:#ffffff18;border-color:#aaa}.answer .key{border:1px solid #ffffff30;color:#a7afa7;border-radius:3px;min-width:23px;height:24px;display:grid;place-items:center;font-size:10px}.answer.correct{background:#294c32;border-color:#71b487;color:#edfff0}.answer.wrong{background:#512d2d;border-color:#8c4841;color:#f7d3ce}.answer.selected.wrong{border:2px solid #f07868}.answer.correct .key{color:#cef0d2}#feedback h3{font-size:18px;color:#9ed7a8;margin-bottom:8px}#feedback p{font-size:13px;line-height:1.6;color:#c1c9c0}details{font-size:12px;color:#c3ccc0;margin:17px 0}summary{cursor:pointer}details p{font-size:12px!important}.feedback-footer{display:flex;justify-content:space-between;align-items:center;gap:10px}.feedback-footer a{font-size:10px;color:#9ea99c}.feedback-footer button{font-size:12px;padding:12px 18px}.overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#070c12b8;backdrop-filter:blur(14px);padding:24px}.modal{width:min(580px,100%);max-height:95%;overflow:auto;padding:38px;border:1px solid #ffffff26;border-radius:10px;background:#1c2326;box-shadow:0 25px 100px #0006}.modal h2{font-size:36px;margin:12px 0 20px;letter-spacing:-1.3px}.modal p{font-size:14px;line-height:1.6;color:#b7c0b6}.modal .primary{width:100%;margin-top:23px}.secondary{border:1px solid #ffffff33;background:none;border-radius:3px;width:100%;padding:13px;margin-top:10px;font-size:13px}.stats{display:flex;gap:25px;margin:26px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;padding:22px 0}.stats strong{font-size:33px;display:block}.stats span{font-size:11px;color:#a3afa3}.review-signs{display:flex;gap:8px;flex-wrap:wrap}.review-signs img{width:40px;height:44px;object-fit:contain}.history-row{display:flex;gap:16px;justify-content:space-between;border-top:1px solid #ffffff20;padding:14px 0;font-size:13px;color:#c4cbbd}.history-row small{display:block;color:#8c978c;font-size:10px;margin-top:7px}.keyboard-help{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:10px;color:#d1d8d0;white-space:nowrap}#touch-controls{position:absolute;bottom:120px;left:20px;right:20px;display:flex;gap:10px}#touch-controls button{touch-action:none;user-select:none;width:58px;height:55px;background:#17262bc9;border:1px solid #ffffff55;border-radius:8px;font-weight:700}#touch-controls button:nth-child(3){margin-left:auto}#touch-controls button:last-child{background:#ac453ccc}body.playing .vignette{background:linear-gradient(0deg,#06101875,transparent 35%),linear-gradient(180deg,#07121944,transparent 25%)}#notice{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:10;background:#202b2a;padding:12px 20px;font-size:13px;border-radius:4px;display:none}#notice.visible{display:block}
@media(min-width:1500px){.garage-copy{top:10%;width:405px}.garage-bottom{bottom:40px}.car-card{height:130px}}@media(max-width:1150px){.garage-note{display:none}.garage-label{width:140px}.garage-copy{width:310px}h1{font-size:64px}.garage-bottom{gap:20px}.car-card img{width:43%}.car-caption{right:4%}.car-caption h2{font-size:39px}.car-specs span:last-child{display:none}.garage-floor-label{right:10%}nav{margin-left:0}}@media(max-width:760px){header{height:66px;padding:0 20px}.brand{font-size:26px}.brand-mark{width:28px;height:30px;font-size:26px}.preview{display:none}.header-right{gap:0}.icon-button span{display:none}nav{gap:18px}.nav{font-size:12px}#stage{height:auto;min-height:1000px}.garage-copy{top:30px;left:24px;width:calc(100% - 48px)}.garage-copy h1{font-size:54px;margin-top:20px;letter-spacing:-2.7px}.garage-copy .intro{font-size:13px;margin:0}.garage-copy .eyebrow{font-size:9px}.mode-tabs{margin-top:290px}.car-caption{top:263px;right:26px}.car-caption>span{font-size:8px}.car-caption h2{font-size:31px;margin:8px 0}.car-specs{gap:12px}.car-specs strong{font-size:15px}.car-specs span{font-size:9px}.paint-row{margin-top:14px}.paint-row>span{display:none}.swatch{height:15px;width:15px}.vignette{background:linear-gradient(180deg,#111315 0%,#111315cc 24%,transparent 33%,transparent 52%,#111315 62%)}.garage-floor-label{display:none}.garage-bottom{bottom:23px;left:24px;right:24px;display:block}.garage-label{width:100%;display:flex;align-items:center;justify-content:space-between}.garage-label p{font-size:12px}.garage-label .eyebrow{font-size:9px}.car-cards{gap:7px}.car-card{height:127px;display:flex;flex-direction:column;gap:0;padding:0 6px 10px;text-align:center}.car-card img{width:100%;height:78px}.car-card strong{font-size:11px}.car-card small{font-size:6px;margin-top:6px}.car-card b{top:6px;right:6px}.mission{padding:17px 0}.mission h2{font-size:15px}.start-hint{font-size:10px}footer{height:48px;padding:0 20px}footer>span{display:none}footer p{font-size:9px}body.playing #stage{height:calc(100svh - 66px);min-height:590px}body.playing footer{display:none}.route-panel{top:18px;left:16px;min-width:205px;padding:14px}.route-panel h2{font-size:19px;margin:8px 0 12px}.route-panel>span{font-size:10px}.route-panel .eyebrow{font-size:8px}.drive-actions{top:18px;right:14px;flex-direction:column;gap:5px}.glass-button{font-size:10px;padding:11px}.glass-button span{display:none}.drive-prompt{top:170px;max-width:90%;white-space:normal;width:max-content;font-size:11px;padding:10px 15px}.speedometer{right:23px;bottom:24px;width:148px}.speedometer strong{font-size:57px}.speedometer b{font-size:25px}.speedometer p{font-size:6px}.minimap{width:112px;left:20px;bottom:23px;padding:8px}.minimap>span{font-size:6px}.question-panel{bottom:15px;width:94%;padding:19px 17px;max-height:75%}.question-body{gap:10px}.sign-frame{width:54px;padding:0}.sign-frame img{height:65px}.question-content h2{font-size:19px}.question-heading .eyebrow{font-size:9px}.question-badge{font-size:7px}.answer{font-size:12px;padding:10px;gap:8px}.feedback-footer{flex-wrap:wrap}.feedback-footer button{width:100%;justify-content:center}#feedback h3{font-size:16px}#feedback p{font-size:12px}.keyboard-help{display:none}.modal{padding:27px}.modal h2{font-size:30px}.stats{gap:22px}.stats strong{font-size:27px}body.question-open .speedometer,body.question-open .minimap{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(min-width:761px) and (max-width:1150px){.garage-copy{top:6%;width:310px}.garage-copy h1{font-size:52px;letter-spacing:-2.7px}.garage-copy h1 em{white-space:nowrap}.garage-copy .mode-tabs{margin-top:22px}.garage-bottom{bottom:20px;gap:14px}.garage-label{width:145px}.car-card{height:100px}.garage-copy .intro{font-size:14px}}

.mode-tabs{gap:17px}.mode-tabs button{font-size:12px}#time-choice{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px;margin:0 0 14px;pointer-events:auto}#drive-time{pointer-events:auto;max-width:185px;background:#273237;color:#eee;border:1px solid #ffffff40;padding:8px;font:11px Arial;border-radius:3px}.traffic-fault #world:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 90px 25px #f23d3655;border:5px solid #eb4d46;pointer-events:none;z-index:1}#notice{max-width:85%}@media(max-width:760px){.mode-tabs{gap:13px}.mode-tabs button{font-size:11px}}

.handling-label{font-size:11px;letter-spacing:1px;color:#afc3b7;margin:8px 0 0}@media(max-width:760px){.handling-label{font-size:9px}}

/* The expanded collection stays in a keyboard-accessible horizontal garage. */
.car-cards{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 2px 12px;scrollbar-color:#78867b #182022;min-width:0;display:flex}.car-card{flex:0 0 250px;scroll-snap-align:start}.car-cards[aria-busy="true"]{opacity:.65}.garage-label p{line-height:1.5}.car-card:focus-visible{outline:2px solid #efb07a;outline-offset:-3px}@media(max-width:760px){.car-card{flex-basis:145px}.car-cards{padding-bottom:12px}}

.fleet-link{font-size:10px;color:#c3d0c8;text-underline-offset:4px}.garage-label{flex-shrink:0}@media(max-width:760px){.fleet-link{display:none}}

#touch-controls [data-drive="brake"]{font-size:9px;line-height:1.4;padding:4px}

#car-loading{font-size:12px;color:#efba70;letter-spacing:.06em}

#training-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}#training-choice[hidden]{display:none}#training-choice label{display:grid;gap:6px;font:9px Arial;letter-spacing:1px;color:#adbdbf}#training-choice select{width:100%;min-width:0;padding:9px 6px;background:#223038;border:1px solid #ffffff25;border-radius:6px;color:#ecede5;font:12px Arial;letter-spacing:0}#training-choice p{grid-column:1/-1;font-size:11px;color:#a9b5b8;margin:0;line-height:1.5}@media(max-width:760px){#training-choice{grid-template-columns:1fr 1fr}#training-choice label:last-of-type{grid-column:1/-1}}

#training-choice{pointer-events:auto}body:not(.playing) #app[data-training="true"] #stage{min-height:850px}#app[data-training="true"] .garage-copy{top:4%}#app[data-training="true"] .garage-copy h1{font-size:54px;margin:20px 0 16px}#app[data-training="true"] .mode-tabs{margin-top:18px}#training-choice select:focus-visible{outline:2px solid #ffc376;outline-offset:2px}

#touch-controls [data-drive="handbrake"]{font-size:9px;padding:3px}