:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:#0b151d;color:#e8f2f5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 10% 0,#183743 0,transparent 45%),#0b151d}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #b9e6ff;outline-offset:3px}button:disabled{opacity:.5}.app{max-width:780px;margin:auto;padding:22px 28px calc(18px + env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid #26343e}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;font-size:11px;letter-spacing:2px;font-weight:650}.brandmark{width:30px;height:34px;display:grid;place-items:center;border:1px solid #598295;border-radius:8px;color:#b0d9ee;font-size:24px}.brand small{display:block;font-size:8px;font-weight:400;letter-spacing:1px;color:#7e98a5;margin-top:5px}.nav{display:flex;gap:8px}.nav button{background:#1b2b35;border:1px solid #31434f;border-radius:7px;padding:8px 10px;font-size:11px}.heading{display:flex;align-items:center;justify-content:space-between;padding:24px 0 16px}.eyebrow{color:#83a4b4;font-size:10px;letter-spacing:2px}h1{font-size:30px;letter-spacing:3px;margin:8px 0 0;font-weight:550}h1 span{font-size:10px;color:#6f91a4;letter-spacing:2px;display:inline-block;margin-left:14px}h2{font-size:27px;line-height:1.5;font-weight:550;letter-spacing:1px;margin:15px 0}.outline{border:1px solid #375260;background:#142631;border-radius:8px;padding:10px 14px;font-size:12px}.hud{display:grid;grid-template-columns:1.2fr 1fr 1fr;background:#152731;border:1px solid #2b424e;border-radius:12px;padding:17px 20px;margin-bottom:16px;gap:16px}.hud>div+div{border-left:1px solid #2d434d;padding-left:20px}.hud span{display:block;font-size:10px;color:#8fa8b5;letter-spacing:1px}.hud b{font-size:29px;display:block;font-weight:450;font-variant-numeric:tabular-nums;margin-top:7px}.hud small{font-size:10px;margin-left:5px;color:#789aa9}.batterybar{height:3px;margin-top:8px;width:75%;background:#30434b;border-radius:4px;overflow:hidden}.batterybar i,.progress i{display:block;background:#b6e59c;height:100%;width:100%;transition:width .15s}.viewport{height:510px;position:relative;border-radius:15px;overflow:hidden;background:#203440;border:1px solid #3d5766}canvas{display:block;width:100%;height:100%;touch-action:none}.roadhead,.roadfooter{position:absolute;left:18px;right:18px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;pointer-events:none;text-shadow:0 1px 3px #000}.roadhead{top:17px}.roadfooter{bottom:17px;color:#b1c5cc}.progress{position:absolute;top:41px;left:18px;right:18px;height:2px;background:#dbeaf51f}.progress i{width:0;background:#b0d9ee}.driveState{position:absolute;top:64px;left:50%;transform:translateX(-50%);background:#10202dc9;border:1px solid #426274;border-radius:24px;font-size:10px;padding:6px 12px;color:#b9d3df;pointer-events:none}.overlay{position:absolute;inset:0;background:linear-gradient(#10202bd9,#0b1725ed);display:flex;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px)}[hidden]{display:none!important}.panel{max-width:420px;width:100%;text-align:center}.panel p{font-size:12px;line-height:1.9;color:#9fb8c6}.panel>small{font-size:10px;display:block;color:#7095a7;margin-top:13px}.primary{background:#bae1f4;color:#123144;border-radius:9px;padding:14px 24px;font-weight:600;width:100%;margin-top:14px;box-shadow:0 4px 20px #9fdbf014}.routes{display:flex;gap:8px;margin-top:24px}.routes button{flex:1;padding:12px 4px;background:#162e3b;border:1px solid #345261;border-radius:9px;font-size:11px;line-height:1.7;color:#9eb8c7}.routes button.selected{border-color:#bee3f7;background:#2b4b5f;color:#e4f4ff}.routes small{display:block;font-size:9px;opacity:.7}.resultScore b{font-size:62px;font-weight:450;display:block;color:#c9e9fa;line-height:1.2}.resultScore span{font-size:11px;color:#819dab}.row{display:flex;justify-content:center;gap:8px;margin-top:12px}.controls{display:grid;grid-template-columns:1.25fr 1fr 1.3fr;gap:12px;margin-top:15px}.controls button{height:69px;border-radius:12px;background:#19313f;border:1px solid #355464;touch-action:none;user-select:none;-webkit-user-select:none}.steer{display:flex;gap:8px}.steer button{flex:1;font-size:24px}.controls span{font-size:16px;font-weight:550;letter-spacing:2px}.controls small{display:block;font-size:9px;margin-top:5px;letter-spacing:1px;color:#8eb3c6}#accelerate{background:#b9dff3;color:#193a4a;border-color:#c7edff}#accelerate small{color:#4b7185}#brake{border-color:#5b745e}#brake small{color:#9dc594}.controls button.held{filter:brightness(1.3);transform:translateY(1px)}footer{margin-top:19px;text-align:center;font-size:9px;line-height:1.8;color:#688492}footer span{display:block}dialog{background:#132a39;color:#ddecf3;border:1px solid #47697c;border-radius:16px;max-width:450px;width:calc(100% - 32px);padding:30px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#020b12bc}.close{float:right;background:none;font-size:24px}dialog h2{font-size:23px}dialog p,dialog li{font-size:13px;line-height:1.9;color:#a5c0cd}dialog a{color:#d0e9f8}dialog img{max-width:100%;border-radius:8px}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#c5e6f4;color:#173849;font-size:12px;border-radius:9px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}#toast.show{opacity:1}@media(max-width:600px){.app{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}header{padding-bottom:15px}.brand{font-size:9px;letter-spacing:1px}.brand small{font-size:7px}.nav button{padding:7px 8px;font-size:10px}.heading{padding:18px 0 13px}h1{font-size:24px}h1 span{font-size:8px;margin-left:9px}.hud{padding:12px 14px;gap:10px;margin-bottom:12px}.hud>div+div{padding-left:12px}.hud b{font-size:24px}.hud span{font-size:9px}.viewport{height:clamp(330px,52dvh,510px)}.controls{gap:8px;margin-top:12px}.controls button{height:61px}.panel h2{font-size:24px}.overlay{padding:20px}.routes{margin-top:16px}footer{margin-top:12px}.roadhead,.roadfooter{left:12px;right:12px;font-size:9px}}@media(max-height:730px) and (max-width:600px){.heading{padding:12px 0}header{padding-bottom:10px}.hud{padding:9px 12px}.hud b{font-size:21px}.viewport{height:43dvh;min-height:290px}.panel h2{margin:7px 0;font-size:22px}.panel p{margin:7px 0}.routes{margin-top:10px}.primary{padding:11px;margin-top:10px}.panel>small{margin-top:7px}}
/* Drive 02: wide chase view, tactile controls, restrained instrument panel. */
.app{max-width:1120px}.viewport{height:clamp(450px,62vh,720px);background:#8fafba}#game{position:absolute;inset:0}.overlay{background:linear-gradient(110deg,#071925e8,#0c253ca6);backdrop-filter:blur(2px)}.panel{max-width:460px}.roadhead,.roadfooter{text-shadow:0 1px 4px #000,0 0 12px #000}.driveState{top:62px;background:#0b2239a8}.telemetry{position:absolute;bottom:54px;left:20px;display:flex;flex-direction:column;gap:5px;padding:12px 16px;background:#0c243bc4;border:1px solid #aec8d129;border-radius:12px;pointer-events:none;min-width:145px}.telemetry b{font-size:22px;font-weight:450;font-variant-numeric:tabular-nums}.telemetry span{color:#b4ced9;font-size:11px}.telemetry small{font-size:10px;color:#abc3cc}#minimap{position:absolute;right:18px;bottom:53px;width:92px;height:92px;background:#0c243bbd;border-radius:12px;border:1px solid #aec8d129;pointer-events:none}.modes{display:flex;gap:8px;justify-content:center;margin:18px 0 0}.modes button{border:1px solid #385c71;background:#112d42;border-radius:30px;padding:9px 16px;color:#96b6c9;font-size:11px}.modes .selected{background:#d5e7ed;color:#16364d;border-color:#d5e7ed}.controls{grid-template-columns:1.45fr .8fr 1fr;max-width:750px;margin:16px auto 0}.controls button{height:88px}.steer{align-items:center}.steer button{height:75px}.wheelwrap{width:70px;display:grid;place-items:center;color:#9cb8c9}#wheel{width:56px;height:56px}.controls #accelerate{position:relative;overflow:hidden;color:#193a4a;background:#b9dff3}.controls #accelerate span,.controls #accelerate small{position:relative;z-index:1}.controls #accelerate i{position:absolute;bottom:0;left:0;right:0;background:#719db875;pointer-events:none}.controls #accelerate em{position:absolute;top:6px;right:8px;font-size:9px;font-style:normal;color:#355e75}.controls #brake{background:#24343e;border-color:#526a75}#brake small{color:#9eb5c2}.hud{max-width:none;margin:0 0 14px;background:#14232e}.hud b{font-size:31px}.heading{padding:19px 0 15px}#resultStats{white-space:pre-line}.panel>small{line-height:1.6}.routes{margin-top:15px}canvas:focus{outline:none}
@media(max-width:600px){.app{padding:12px 12px calc(12px + env(safe-area-inset-bottom))}.brand{font-size:8px}.nav{gap:5px}.nav button{padding:6px 7px}.brandmark{width:25px;height:29px}.heading{padding:12px 0}h1{font-size:23px}.eyebrow{font-size:8px;letter-spacing:1px}.hud{padding:10px 12px}.hud b{font-size:24px}.viewport{height:clamp(360px,56dvh,640px)}.overlay{padding:20px 16px}.panel h2{font-size:26px}.modes{margin-top:12px}.modes button{padding:8px 12px;font-size:10px}.telemetry{left:12px;bottom:46px;min-width:120px;padding:9px 12px}.telemetry b{font-size:18px}.telemetry small{font-size:8px}#minimap{right:12px;bottom:46px;width:72px;height:72px}.controls{grid-template-columns:1.4fr .8fr 1fr;gap:7px;margin-top:11px}.controls button{height:76px}.steer{gap:4px}.steer button{height:65px;font-size:21px}.wheelwrap{width:46px}#wheel{width:43px;height:43px}.controls span{font-size:14px;letter-spacing:1px}.controls small{font-size:8px;letter-spacing:0}footer{font-size:8px}.roadhead{font-size:8px}.panel p{font-size:11px}.resultScore b{font-size:52px}.row{gap:5px}.row .outline{padding:8px 10px}}
@media(max-height:750px) and (max-width:600px){.viewport{height:48dvh;min-height:330px}.panel h2{font-size:23px}.panel .eyebrow{font-size:8px}.modes{margin-top:9px}.routes{margin-top:10px}.controls button{height:65px}.steer button{height:58px}.panel p{margin:7px 0}}
@media(orientation:landscape) and (max-height:550px){.app{max-width:none;padding:8px 12px}header,.heading,.hud,footer{display:none}.viewport{height:calc(100dvh - 16px);min-height:0}.controls{position:fixed;bottom:25px;left:27px;right:27px;max-width:none;pointer-events:none;grid-template-columns:180px 80px 95px;justify-content:space-between;z-index:2}.controls button{pointer-events:auto;background:#153044c9!important;border-color:#a0b9c865;color:#dfedf5!important}.controls button.held{background:#a3cce1bb!important}.controls small{color:#a9c5d5!important}.telemetry{bottom:auto;top:54px}.roadfooter{bottom:105px}#minimap{top:55px;bottom:auto}.overlay{z-index:3;padding:15px}.panel h2{font-size:23px;margin:6px}.panel p{margin:6px}.modes,.routes{margin-top:9px}.primary{padding:10px;margin-top:9px}.panel>small{margin-top:6px}}
#hitFlash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px #e1634400;z-index:1}#hitFlash.flash{animation:impact .55s ease-out}@keyframes impact{0%{box-shadow:inset 0 0 130px #e1634488}100%{box-shadow:inset 0 0 100px #e1634400}}
/* Garage 03: five models, actual family trim names, paint shown on 3D surfaces. */
#garageDialog{width:min(970px,calc(100% - 24px));max-width:970px;max-height:94dvh;overflow:auto;padding:23px;border-color:#637e8c}.garage-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.garage-head h2{margin:6px 0 0;font-size:23px}.garage-head .close{float:none}.garage-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}.garage-preview{min-height:340px;position:relative;background:#0e1a24;border-radius:13px;overflow:hidden;border:1px solid #3b5566}.garage-preview canvas{height:340px;width:100%;touch-action:none;cursor:grab}.garage-preview>span{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;color:#9ab6c6;font-size:10px;pointer-events:none}.garage-preview #doorToggle{position:absolute;top:12px;left:12px;background:#163447cc;font-size:10px}.garage-options{min-width:0}.model-buttons,.trim-buttons,.paint-tabs{display:flex;gap:6px;flex-wrap:wrap}.model-buttons button,.trim-buttons button,.paint-tabs button{border:1px solid #466272;background:#182f40;padding:8px 10px;border-radius:7px;color:#a7c1d0;font-size:11px}.model-buttons button.selected,.trim-buttons button.selected,.paint-tabs button.selected{color:#183649;background:#c4e3f1;border-color:#c4e3f1}.garage-options p{font-size:11px;line-height:1.6;margin:9px 0;color:#8ea9b9}#trimNote{min-height:30px}.trim-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:8px 0}.trim-stats div{background:#102430;border:1px solid #3b5566;border-radius:8px;padding:8px 6px;text-align:center}.trim-stats b{display:block;font-size:17px;color:#d6edf8;font-weight:600}.trim-stats small{display:block;font-size:9px;color:#8ea9b9;margin-top:2px}.trim-stats-note{grid-column:1/-1;background:none!important;border:0!important;text-align:left!important;padding:0!important;font-size:9px;line-height:1.6;color:#718f9f}.paint-tabs{margin-top:16px}.paint-tabs button{padding:6px 9px;font-size:10px}.paint-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.swatch{height:57px;border:1px solid #557080;border-radius:8px;position:relative;overflow:hidden;background:var(--paint);min-width:0}.swatch span{position:absolute;bottom:0;left:0;right:0;background:#0a182acf;padding:4px 1px;color:#e4f0f8;font-size:9px}.swatch.selected{outline:2px solid #c9eaff;outline-offset:2px}.swatch.neon{background:repeating-linear-gradient(115deg,#17354d 0 8px,#38e5ed 9px 11px,#17354d 12px 19px)}.swatch.nebula{background:radial-gradient(ellipse at 30% 30%,#a391dc,#3a396f 55%,#6099d0)}.swatch.holo{background:linear-gradient(130deg,#f5b2cb,#9cd8bd,#80b6ed,#d2aadf)}.swatch.candy{background:repeating-linear-gradient(45deg,#f0a5c1 0 12px,#e9c76e 13px 24px,#8acacf 25px 38px)}.swatch.comic{background:repeating-linear-gradient(135deg,#eac24c 0 13px,#293648 14px 17px)}.swatch.cloud{background:radial-gradient(ellipse at 30% 10%,#eef7f5 0 20%,transparent 25%),radial-gradient(ellipse at 75% 35%,#f6ffff 0 19%,#7cc7e7 25%)}.swatch.football{background:repeating-conic-gradient(#263039 0 25%,#eceee6 0 50%) 0/22px 22px}.swatch.royal{background:linear-gradient(100deg,#eae7df 0 40%,#b49b4d 42% 48%,#eae7df 50%)}.swatch.pitch{background:repeating-linear-gradient(90deg,#287d60 0 15px,#c3d5b9 16px 18px)}.swatch.basketball{background:radial-gradient(ellipse at 50% 35%,transparent 35%,#252019 37% 42%,transparent 44%),linear-gradient(90deg,#c76b26 45%,#28221a 48% 52%,#c76b26 55%)}.swatch.court{background:repeating-linear-gradient(110deg,#5d3887 0 20px,#dfbc51 22px 26px)}.swatch.street{background:repeating-linear-gradient(135deg,#293348 0 10px,#d97c4e 12px 15px,#293348 18px 24px)}#paintNote{font-size:9px;color:#718f9f;line-height:1.7;display:block}.garage-bottom{margin-top:18px;display:flex;align-items:center;gap:20px;justify-content:space-between}.garage-bottom span{font-size:10px;color:#7895a5;max-width:480px;line-height:1.7}.garage-bottom .primary{width:auto;min-width:180px;margin:0}.garage-entry{display:block;width:100%;border:1px solid #5a8095;background:#18364ada;color:#c4e0ed;border-radius:9px;padding:11px 8px;margin-top:15px;font-size:11px;line-height:1.5}.trafficHint{position:absolute;top:95px;left:12px;right:12px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;text-shadow:0 1px 6px #000;pointer-events:none}.trafficHint span{background:#172d3aa6;padding:5px 7px;border-radius:5px}#oncomingLabel{color:#e6c483}#forwardLabel{color:#b9e0cd}header .nav{gap:5px}
@media(max-width:600px){#garageDialog{padding:16px;max-height:94dvh}.garage-layout{grid-template-columns:1fr;gap:14px}.garage-preview{min-height:215px}.garage-preview canvas{height:215px}.garage-head{margin-bottom:10px}.garage-head h2{font-size:20px}.garage-head .eyebrow{font-size:8px}.model-buttons{gap:5px}.model-buttons button{flex:1;padding:8px 6px;font-size:10px}.trim-buttons button{padding:8px;font-size:10px}.garage-options p{margin:7px 0}.paint-tabs{margin-top:10px;flex-wrap:nowrap}.paint-tabs button{flex:1;padding:6px 4px}.paint-swatches{grid-template-columns:repeat(4,1fr)}.garage-bottom{display:block;margin-top:14px}.garage-bottom span{display:block;font-size:9px;margin-bottom:10px}.garage-bottom .primary{width:100%;padding:12px}.nav button{font-size:9px;padding:6px}.brand small{display:none}.garage-entry{margin-top:9px;padding:9px 6px;font-size:10px}.panel h2{font-size:24px}.panel p{font-size:10px}.panel .eyebrow{font-size:8px}.modes{margin-top:9px}.routes{margin-top:9px}.primary{padding:11px;margin-top:10px}}
@media(orientation:landscape) and (max-height:550px){.garage-layout{grid-template-columns:1fr 1fr}.garage-preview canvas{height:260px}.garage-preview{min-height:260px}.garage-bottom{display:flex}.garage-bottom .primary{width:auto}.panel h2{font-size:21px}.garage-entry{padding:7px;margin-top:7px}.trafficHint{top:58px;left:185px;right:105px}}
.overlay .panel{max-height:100%;overflow-y:auto;scrollbar-width:thin;padding:5px 2px;overscroll-behavior:contain}