/* style.css */
:root{color-scheme:dark;--accent:#54e8cf;--glow:rgba(84,232,207,.42);--panel:#101519;--line:rgba(255,255,255,.1);font-family:Inter,"SF Pro Display",ui-sans-serif,system-ui,-apple-system,sans-serif;background:#070a0c;color:#f5f8f7}
*{box-sizing:border-box}
body{margin:0;overflow:hidden;background:#070a0c}
button,input,a{font:inherit}
button,a{color:inherit}
.icon{display:block;flex:0 0 auto}
.hidden{opacity:0!important;pointer-events:none!important}
#app{position:relative;width:100vw;height:100vh;min-height:600px;overflow:hidden;background:#080b0e;isolation:isolate}
#app:after{content:"";position:absolute;z-index:1;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,7,9,.8),transparent 30%,transparent 70%,rgba(4,7,9,.8)),linear-gradient(0deg,rgba(5,8,10,.92),transparent 42%,rgba(5,8,10,.35))}
canvas{position:absolute;z-index:0;width:100%;height:100%;top:0;right:0;bottom:0;left:0}
.ambient-orb{position:absolute;z-index:1;left:50%;top:48%;width:34vw;height:34vw;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 67%);filter:blur(35px);opacity:.42}
.topbar{position:absolute;z-index:5;top:0;left:0;right:0;height:48px;padding:0 var(--s5);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--card-line);background:linear-gradient(180deg,rgba(5,8,10,.82),rgba(5,8,10,.08))}
/* Chrome 79 renders flex `gap` as zero: horizontal rows use margins with an
   explicit right-to-left mirror. Grid `gap` is supported and stays. */
.brand{display:flex;align-items:center}
.brand>*+*{margin-left:var(--s4)}
[dir="rtl"] .brand>*+*{margin-left:0;margin-right:var(--s4)}
.sound-icon,.dock-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--ctl-line);background:var(--ctl-bg);border-radius:var(--ctl-r);color:var(--text-2)}
.control-dock small{font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);font-weight:var(--w-med)}
.panel small{font-size:var(--t-small);color:var(--text-3)}
.session-pill{display:flex;align-items:center;min-height:32px;padding:0 var(--s4);border:1px solid var(--card-line);background:rgba(14,19,22,.72);border-radius:100px;font-size:var(--t-small);letter-spacing:0}
.session-pill>*+*{margin-left:var(--s3)}
[dir="rtl"] .session-pill>*+*{margin-left:0;margin-right:var(--s3)}
.session-pill i{width:var(--s2);height:var(--s2);background:#56e3b3;border-radius:50%;box-shadow:0 0 9px #56e3b3}
.session-pill span{font-weight:var(--w-med)}
.session-pill em{font-style:normal;color:var(--text-3);text-transform:none;letter-spacing:0}
.icon-btn{justify-self:end;display:grid;place-items:center;border:1px solid var(--ctl-line);background:var(--ctl-bg);border-radius:var(--ctl-r);height:var(--ctl-h-min);width:var(--ctl-h-min);cursor:pointer;transition:.2s}
.icon-btn:hover{border-color:rgba(255,255,255,.25);background:var(--card-bg-raise)}
.route-ribbon{position:absolute;z-index:4;top:56px;left:var(--s5);display:flex;align-items:center}
.route-ribbon>*+*{margin-left:var(--s4)}
[dir="rtl"] .route-ribbon>*+*{margin-left:0;margin-right:var(--s4)}
/* Identity exception: real road signage keeps its own proportions and its 8 px legend. */
.speed-sign{width:60px;height:68px;background:#f5f5ee;border:3px solid #171a1c;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);color:#111;text-align:center;padding-top:5px;transition:.25s}
.speed-sign small{display:block;font-size:8px;font-weight:var(--w-strong);line-height:.9}
.speed-sign strong{display:block;font-size:var(--n-lg);line-height:1.02;letter-spacing:var(--ls-tight)}
.route-copy{display:flex;flex-direction:column}
.eyebrow{font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:var(--text-2);font-weight:var(--w-med)}
.turn-card small,.section-label{font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-2);font-weight:var(--w-med)}
.route-copy>strong{font-size:var(--t-title);margin:var(--s1) 0 0}
.route-copy>small{font-size:var(--t-small);color:var(--text-3)}
.turn-card{position:absolute;z-index:5;right:var(--s5);top:116px;width:300px;padding:var(--card-pad);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);display:grid;grid-template-columns:40px 1fr 18px;gap:var(--s4);align-items:center;box-shadow:var(--float-shadow);transition:.25s}
.turn-symbol{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--ctl-r);background:var(--ctl-bg);font-size:var(--t-head);color:var(--text-1)}
.turn-card div:nth-child(2){display:grid;gap:var(--s1)}
.turn-card strong{font-size:var(--t-ctl)}
.turn-card span{font-size:var(--t-small);color:var(--text-3)}
.vehicle-stage{position:absolute;z-index:3;left:50%;top:46%;width:250px;height:320px;transform:translate(-50%,-50%);display:grid;place-items:center}
.vehicle-halo{position:absolute;width:180px;height:280px;border-radius:50%;background:radial-gradient(ellipse,var(--glow),transparent 68%);filter:blur(22px);opacity:.48}
.car{position:relative;width:108px;height:215px;transform-origin:center;filter:drop-shadow(0 20px 20px #000);will-change:transform}
.car img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:42px;mix-blend-mode:screen}
.tail{position:absolute;bottom:15px;width:16px;height:3px;border-radius:5px;background:#ff5145;box-shadow:0 0 12px #ff5145}
.tail.left{left:17px}
.tail.right{right:17px}
.drive-readout{position:absolute;z-index:5;left:var(--s5);right:var(--s5);bottom:100px;display:grid;grid-template-columns:132px minmax(200px,1fr) 110px;gap:var(--s5);align-items:center}
.speed{display:flex;align-items:baseline}
.speed>*+*{margin-left:var(--s3)}
[dir="rtl"] .speed>*+*{margin-left:0;margin-right:var(--s3)}
.speed strong{font-variant-numeric:tabular-nums;font-size:var(--n-hud);font-weight:var(--w-strong);line-height:1;letter-spacing:var(--ls-tight)}
.speed>span,.gear>span{font-size:var(--t-micro);color:var(--text-2);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.engine-meter{max-width:600px;justify-self:center;width:100%}
.meter-label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--s1)}
.meter-label span{font-size:var(--t-micro);color:var(--text-2);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:var(--w-med)}
.meter-label strong{font-size:var(--n-sm);font-weight:var(--w-strong);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.meter{height:4px;background:rgba(255,255,255,.09);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#4ae6c8,var(--accent),#fff);box-shadow:0 0 16px var(--glow);transition:width .08s}
/* The five tick numbers repeat the RPM readout above them. */
.meter-scale{display:none}
.gear{text-align:center}
.gear>div{justify-content:center}
.control-dock{position:absolute;z-index:6;bottom:var(--s7);left:50%;transform:translateX(-50%);width:min(760px,calc(100vw - 68px));height:var(--ctl-h-lg);padding:0 var(--s4);display:grid;grid-template-columns:1.4fr 1px 1.2fr 1px .65fr;align-items:center;gap:var(--s4);background:var(--glass-strong);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:var(--float-shadow)}
.divider{height:var(--s7);background:rgba(255,255,255,.09)}
.sound-btn{height:100%;display:flex;align-items:center;padding:0;background:none;border:0;text-align:start;cursor:pointer}
.sound-btn>*+*{margin-left:var(--s4)}
[dir="rtl"] .sound-btn>*+*{margin-left:0;margin-right:var(--s4)}
.sound-btn>.audio-bars{margin-left:auto}
[dir="rtl"] .sound-btn>.audio-bars{margin-left:0;margin-right:auto}
.sound-btn>div{display:grid;gap:var(--s1)}
.sound-btn strong{font-size:var(--t-ctl);font-weight:var(--w-med);letter-spacing:0}
.sound-btn.active .sound-icon{background:var(--accent);color:#07100e;box-shadow:0 0 22px var(--glow)}
.audio-bars{height:20px;display:flex;align-items:center}
.audio-bars b{display:block;width:2px;height:var(--s2);border-radius:2px;background:var(--accent)}
.audio-bars b+b{margin-left:var(--s1)}
.sound-btn.active .audio-bars b{animation:levels .65s ease-in-out infinite alternate}
.sound-btn.active .audio-bars b:nth-child(2){animation-delay:-.25s}
.sound-btn.active .audio-bars b:nth-child(3){animation-delay:-.45s}
@keyframes levels{to{height:18px}}
.destination,.battery{display:flex;align-items:center}
.battery{justify-content:center}
.destination>*+*,.battery>*+*{margin-left:var(--s4)}
[dir="rtl"] .destination>*+*,[dir="rtl"] .battery>*+*{margin-left:0;margin-right:var(--s4)}
.destination>div{display:grid;gap:var(--s1)}
.destination strong{display:flex;align-items:center;font-size:var(--t-ctl)}
.destination strong>*+*{margin-left:var(--s3)}
[dir="rtl"] .destination strong>*+*{margin-left:0;margin-right:var(--s3)}
.destination strong i{width:3px;height:3px;background:#59656b;border-radius:50%}
.battery svg{color:#62dab3}
.battery>div{display:grid;gap:var(--s1)}
.battery strong{font-size:var(--t-ctl)}
/* Legal line: the only 10 px exception on the drive screen. */
.disclaimer{position:absolute;z-index:7;bottom:var(--s1);left:50%;transform:translateX(-50%);display:flex;align-items:center;white-space:nowrap;color:var(--text-3);font-size:var(--t-micro,10px);letter-spacing:0}
.disclaimer .icon{margin-right:var(--s2)}
[dir="rtl"] .disclaimer .icon{margin-right:0;margin-left:var(--s2)}
/* Identity exception: the stale-data warning keeps its amber alarm colour. */
.stale{position:absolute;z-index:10;top:92px;left:50%;transform:translateX(-50%);background:#4f2922;color:#ffb6a4;padding:var(--row-pad);border-radius:var(--ctl-r);font-size:var(--t-small);font-weight:var(--w-med);transition:.2s}
.scrim{position:fixed;z-index:19;top:0;right:0;bottom:0;left:0;background:var(--scrim);opacity:0;pointer-events:none;transition:.35s}
.scrim.visible{opacity:1;pointer-events:auto}
.panel{position:fixed;z-index:20;top:0;right:0;width:min(560px,100vw);height:100vh;padding:var(--s6);background:#0d1215;border-left:1px solid var(--card-line);transform:translateX(102%);transition:transform .38s cubic-bezier(.22,.8,.25,1);overflow:auto}
.panel.open{transform:none}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:var(--s5);border-bottom:1px solid var(--card-line)}
.panel-kicker{display:flex;align-items:center;color:var(--text-2);font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;font-weight:var(--w-med)}
.panel-kicker .icon{margin-right:var(--s2)}
[dir="rtl"] .panel-kicker .icon{margin-right:0;margin-left:var(--s2)}
.panel h1{margin:var(--s1) 0 0;font-size:var(--t-head);font-weight:var(--w-med);letter-spacing:var(--ls-tight)}
.panel-head p{margin:0;color:var(--text-3);font-size:var(--t-body)}
.setting-section{padding:var(--s6) 0;border-bottom:1px solid var(--card-line)}
.section-label{display:flex;justify-content:space-between;margin-bottom:var(--s4)}
.section-label small{color:var(--text-3)}
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.profile{position:relative;display:flex;align-items:center;min-height:var(--ctl-h-tile);padding:var(--card-pad);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r);text-align:start;cursor:pointer;transition:.2s}
.profile>*+*{margin-left:var(--s4)}
[dir="rtl"] .profile>*+*{margin-left:0;margin-right:var(--s4)}
.profile:hover{background:var(--card-bg-raise)}
.profile.active{border-color:var(--sel-line);background:var(--sel-bg);box-shadow:none}
.profile-orb{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border-radius:var(--ctl-r);background:hsl(var(--profile-hue) 75% 50% / .13);color:hsl(var(--profile-hue) 85% 65%)}
.profile>span:nth-child(2){display:grid;gap:var(--s1)}
.profile strong{font-size:var(--t-ctl)}
.profile small{font-size:var(--t-small)}
.profile>i{position:absolute;right:var(--s3);top:var(--s2);font-style:normal;font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:var(--sel-line)}
.toggles{display:grid;gap:var(--s3);margin-top:var(--s5)}
.toggles label{display:flex;justify-content:space-between;align-items:center;min-height:var(--ctl-h);padding:var(--row-pad);background:var(--ctl-bg);border-radius:var(--ctl-r)}
.toggles label>span{display:grid;gap:var(--s1)}
.toggles strong{font-size:var(--t-ctl)}
.toggles input{width:36px;height:20px;accent-color:var(--sel-line)}
.privacy{display:flex;margin-top:var(--s6);padding:var(--card-pad);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r);color:var(--text-2)}
.privacy>*+*{margin-left:var(--s4)}
[dir="rtl"] .privacy>*+*{margin-left:0;margin-right:var(--s4)}
.privacy div{display:grid;gap:var(--s1)}
.privacy strong{font-size:var(--t-ctl);color:var(--text-1)}
.privacy p{margin:0;color:var(--text-3);font-size:var(--t-small)}
.tesla-connect{margin-top:var(--s4);display:flex;align-items:center;justify-content:space-between;min-height:var(--ctl-h-lg);padding:0 var(--s5);background:#edf1ee;color:#0b0f11;border-radius:var(--ctl-r);text-decoration:none;font-size:var(--t-ctl);font-weight:var(--w-strong)}
.tesla-connect span{display:flex;align-items:center}
.tesla-connect span .icon{margin-right:var(--s3)}
[dir="rtl"] .tesla-connect span .icon{margin-right:0;margin-left:var(--s3)}
@media(max-width:850px){.topbar{padding:0 var(--s4)}.session-pill em{display:none}.route-ribbon{left:var(--s4)}.turn-card{right:var(--s4)}.drive-readout{left:var(--s4);right:var(--s4);grid-template-columns:120px 1fr 104px;gap:var(--s4)}.control-dock{width:calc(100vw - 40px)}.car{width:88px;height:176px}}
@media(max-height:700px){#app{min-height:500px}.vehicle-stage{top:43%;transform:translate(-50%,-50%) scale(.78)}.drive-readout{bottom:88px}.control-dock{bottom:var(--s6)}.setting-section{padding:var(--s5) 0}.profiles{gap:var(--s2)}}
/* DRIWE brand assets */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.brand-logo{display:block;width:88px;height:auto;color:inherit}
@media(max-width:600px){.brand-logo{width:72px}}
/* ODbL attribution shown whenever OpenStreetMap road data is on screen. */
.route-attribution{display:block;margin-top:var(--s1);font-size:var(--t-small);letter-spacing:0;opacity:.55}

/* customization.css */
:root{--car-color:#45d8c4}
.speed-sign{position:relative}
.speed-sign.near-limit{border-color:#dfaa35;box-shadow:0 0 0 2px rgba(223,170,53,.28),0 10px 35px rgba(223,170,53,.22)}
.speed-sign.over-limit{color:#fff;background:#e34232;border-color:#ff988c;animation:limit-pulse 1.35s ease-in-out infinite}
.speed-sign.over-limit:after{content:attr(data-over) " " attr(data-unit);position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);min-width:56px;padding:4px 6px;border-radius:6px;background:#e34232;color:#fff;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;white-space:nowrap;box-shadow:0 7px 18px rgba(227,66,50,.3)}
@keyframes limit-pulse{50%{box-shadow:0 0 0 5px rgba(227,66,50,.18),0 0 28px rgba(227,66,50,.42)}}
.car img{position:relative;z-index:1}
.car-tint{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;background:var(--car-color);opacity:.72;mix-blend-mode:color;-webkit-mask-image:url('/assets/road-synth-car.png');mask-image:url('/assets/road-synth-car.png');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
.tail{z-index:3}
.car-colors{display:flex;align-items:center;flex-wrap:wrap}
.car-colors>*{margin:0 var(--s3) var(--s3) 0}
[dir="rtl"] .car-colors>*{margin:0 0 var(--s3) var(--s3)}
.car-colors>button,.custom-color{position:relative;width:48px;height:48px;border:1px solid var(--ctl-line);border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 3px #101519;transition:transform .18s,border-color .18s}
.car-colors>button:hover,.car-colors>button.selected{transform:scale(1.12);border-color:#fff}
.car-colors>button.selected:after{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border:1px solid var(--accent);border-radius:50%}
.custom-color{display:grid;place-items:center;overflow:hidden;background:conic-gradient(#f33,#fc3,#3d7,#3cf,#74f,#f4b,#f33);color:white;font-size:15px;font-weight:400}
.custom-color input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}
.custom-color span{position:relative;z-index:1;text-shadow:0 1px 4px #000;pointer-events:none}
@media(prefers-reduced-motion:reduce){.speed-sign.over-limit{animation:none}}
.profiles{grid-template-columns:1fr;border:0;padding:0;margin:0;min-width:0}
.profile-catalog{display:grid;gap:var(--s4);border:0;padding:0;margin:0;min-width:0}.profile-group{display:grid;gap:var(--s3)}.profile-group h3{margin:0;color:#78858b;font-size:var(--t-micro,10px);letter-spacing:.06em;font-weight:700}.profile-group+.profile-group{padding-top:var(--s4);border-top:1px solid var(--card-line)}
.profile{min-height:62px}
.profile>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.profile:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.profiles.switching .profile.active{cursor:progress}
.profile-spinner{display:block;width:12px;height:12px;border:2px solid rgba(84,232,207,.28);border-top-color:var(--accent);border-radius:50%;animation:profile-spin .65s linear infinite}
@keyframes profile-spin{to{transform:rotate(360deg)}}
.profile-orb{font-size:15px}
.profile small{letter-spacing:0;text-transform:none;line-height:1.25}
.sound-btn.error .sound-icon{color:#ff7868;border-color:rgba(255,120,104,.55)}
.sound-btn.error small{color:#ff7868}
.environments{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.environments button{display:flex;align-items:center;min-height:var(--ctl-h-tile);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#fff;text-align:left;cursor:pointer;transition:.18s}
.environments button:hover{background:#192126}
.environments button.active{border-color:var(--sel-line);background:var(--sel-bg)}
.environments>button>i{margin-right:var(--s3)}
[dir="rtl"] .environments>button>i{margin-right:0;margin-left:var(--s3)}
.environments i{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;color:#07100e;font-style:normal;font-weight:700;font-size:15px}
.environments span{display:grid}
.environments strong{font-size:11px}
.environments small{font-size:11px;letter-spacing:0;text-transform:none;line-height:1.25}
.vehicle-stage{display:none}
.drive-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.drive-side button{padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#fff;text-align:left;cursor:pointer}.drive-side button.active{border-color:var(--sel-line);background:var(--sel-bg)}.drive-side strong,.drive-side small{display:block}.drive-side strong{font-size:11px}.drive-side small{margin-top:4px;font-size:11px;letter-spacing:0;text-transform:none}
.gear>div{display:flex;justify-content:flex-end;align-items:center}
.gear>div>*+*{margin-left:var(--s2)}.gear button{display:none;width:29px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(15,20,23,.85);color:#fff;font-size:15px;cursor:pointer}.gear.manual button{display:grid;place-items:center}.gear.manual strong{font-size:20px;min-width:42px;text-align:center}
.drive-side button:disabled{opacity:.38;cursor:not-allowed}
.country-list{display:grid;gap:var(--s3)}.country-list details{border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);overflow:hidden}.country-list summary{display:flex;align-items:center;padding:var(--row-pad);cursor:pointer;list-style:none}.country-list summary>*+*{margin-left:var(--s3)}[dir="rtl"] .country-list summary>*+*{margin-left:0;margin-right:var(--s3)}.country-list summary::-webkit-details-marker{display:none}.country-list summary>i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#08100e;font-style:normal;font-weight:700}.country-list summary>span{display:grid;flex:1;min-width:0}.country-list summary strong{font-size:11px}.country-list summary small{font-size:11px;letter-spacing:0;text-transform:none}.country-list summary>b{color:#718087}.region-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:0 var(--s3) var(--s3)}.region-grid button{min-height:var(--ctl-h);padding:var(--row-pad);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#fff;text-align:left;cursor:pointer}.region-grid button.active{border-color:var(--sel-line);background:var(--sel-bg)}.region-grid strong,.region-grid small{display:block}.region-grid strong{font-size:11px}.region-grid small{margin-top:3px;font-size:11px;color:#748087}
.nitro-btn{position:absolute;z-index:8;right:34px;bottom:126px;width:86px;height:58px;display:grid;place-items:center;border:1px solid rgba(105,208,255,.45);border-radius:14px;background:linear-gradient(145deg,rgba(21,49,63,.92),rgba(10,18,23,.92));color:#8be4ff;box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer}.nitro-btn strong{font-size:15px;font-style:italic}.nitro-btn small{font-size:var(--t-micro,10px);letter-spacing:.06em}.nitro-btn:disabled{opacity:.55}
/* One expanding exhaust shockwave, behind the HUD. Only transform and opacity
   animate; the bounded layer does not filter the scene or capture touches. */
#app.nitro-active::before{
 content:"";position:absolute;z-index:2;left:50%;top:59%;
 width:62vw;max-width:480px;height:20vh;max-height:150px;
 pointer-events:none;border:3px solid rgba(111,218,255,.65);border-radius:50%;
 background:radial-gradient(ellipse at center,rgba(57,167,236,.28),rgba(66,196,248,.12) 42%,transparent 67%);
 opacity:0;transform:translate(-50%,-50%) scale(.16,.45);
 animation:nitro-blast .85s cubic-bezier(.12,.58,.28,1) 1;
}
#app.nitro-active .nitro-btn{opacity:1;border-color:#81d9f6;background:#173c49;color:#c6f1ff}
@keyframes nitro-blast{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.16,.45)}
 18%{opacity:.8}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1,1)}
}
html[data-reduced-effects="true"] #app.nitro-active::before{content:none;animation:none}
@media(prefers-reduced-motion:reduce){#app.nitro-active::before{content:none;animation:none}}

.horn-btn{position:absolute;z-index:8;right:130px;bottom:126px;width:76px;height:58px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);border-radius:14px;background:linear-gradient(145deg,rgba(30,35,38,.94),rgba(10,15,18,.94));color:#eef6f5;box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer}.horn-btn strong{display:grid;place-items:center}.horn-btn small{font-size:var(--t-micro,10px);letter-spacing:.06em}.horn-btn:hover,.horn-btn:focus-visible{border-color:var(--accent);color:var(--accent)}.horn-btn:active{transform:scale(.96)}.horn-btn:disabled{opacity:.55}
.horn-control{display:contents}.horn-control select{position:absolute;z-index:9;right:130px;bottom:190px;width:190px;min-height:var(--ctl-h-min);padding:0 24px 0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:#11191de8;color:#dfe9e8;font-family:inherit;font-weight:600;font-size:var(--t-micro,10px);line-height:1.2;letter-spacing:0;cursor:pointer}.horn-control select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.horn-choice-icon{position:absolute;top:5px;right:7px;font-size:15px;line-height:1}.horn-btn strong .icon{opacity:.82}
@media(max-width:850px){.nitro-btn{right:20px;bottom:112px}.horn-btn{right:116px;bottom:112px}.horn-control select{right:116px;bottom:176px}}
.visual-choices{grid-template-columns:1fr 1fr}.visual-choices button{min-height:var(--ctl-h-tile);display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;align-items:center;text-align:left;padding:var(--card-pad)}.visual-choices button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.055);font-size:20px}.visual-choices button>strong{align-self:end}.visual-choices button>small{align-self:start;color:#6f7d84;font-size:11px;letter-spacing:0}.visual-choices button.active>span{background:var(--sel-bg);color:var(--sel-line)}html[data-visual-mode="2d"] #app:after{background:linear-gradient(90deg,rgba(4,7,9,.34),transparent 30%,transparent 70%,rgba(4,7,9,.34)),linear-gradient(0deg,rgba(5,8,10,.72),transparent 33%,rgba(5,8,10,.05))}html[data-visual-mode="2d"] .cinema-title,html[data-visual-mode="2d"] .world-reel,html[data-visual-mode="2d"] .scene-status,html[data-visual-mode="2d"] .drive-dynamics{opacity:0;pointer-events:none}html[data-visual-mode="2d"] .speed{position:fixed;z-index:8;left:50%;top:35%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px;text-shadow:0 4px 22px rgba(0,0,0,.5)}html[data-visual-mode="2d"] .speed strong{font-size:clamp(86px,10vw,148px);font-weight:600;line-height:.8;letter-spacing:-.02em}html[data-visual-mode="2d"] .speed>span{padding:0;font-size:13px;color:rgba(255,255,255,.72);letter-spacing:0;text-transform:lowercase}html[data-visual-mode="2d"] .engine-meter{opacity:.42}html[data-visual-mode="2d"] .route-ribbon{opacity:.58;transform:scale(.86);transform-origin:left top}html[data-visual-mode="2d"] .turn-card{opacity:.72}
/* DRIWE audio/profile loaders */
.engine-loader{vertical-align:middle;margin-right:var(--s3);width:22px;height:16px;object-fit:contain;animation:driwe-eq .65s ease-in-out infinite alternate}
.profile-loader{display:block;width:64px;height:8px;object-fit:cover;object-position:left}
@keyframes driwe-eq{to{transform:scaleY(.58);opacity:.62}}
@media(prefers-reduced-motion:reduce){.engine-loader{animation:none}}
/* Horn choice belongs in Drive Studio; the driving HUD stays one-tap. */
.horn-picker{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.horn-preview-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--ctl-r);background:var(--ctl-bg);font-size:var(--t-head)}.horn-picker label{display:grid;gap:var(--s1);min-width:0}.horn-picker label>small{color:#718087;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.horn-studio-select{width:100%;height:var(--ctl-h);padding:0 30px 0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#edf4f2;font-size:var(--t-ctl);font-weight:var(--w-med)}.horn-picker>button{height:var(--ctl-h);padding:0 var(--s4);border:1px solid var(--sel-line);border-radius:var(--ctl-r);background:var(--sel-bg);color:var(--sel-line);font-size:var(--t-ctl);font-weight:var(--w-med);cursor:pointer}.horn-picker>button:disabled{opacity:.45}.horn-upgrade{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--ctl-h-min);margin-top:var(--s3);padding:var(--row-pad);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:transparent;color:#87959a;font-size:var(--t-ctl);cursor:pointer}.horn-upgrade b{color:var(--accent);font-size:var(--t-micro,10px);letter-spacing:.06em}@media(max-width:460px){.horn-picker{grid-template-columns:42px 1fr}.horn-preview-icon{width:42px;height:42px}.horn-picker>button{grid-column:1/-1}}

/* design-system.css */
/* Automotive HMI refinement: high contrast, stable zones, large targets.
   This block owns the Drive and Shop half of the Driwe design system; the
   Racing surfaces declare the same token names on .race-display. Seven type
   steps, three weights, three tracks, one 4/6/8/12/16/20/24 spacing scale,
   one card, one control. car-density.css lifts the type steps one notch for
   html[data-tesla="true"], where the screen sits at arm's length. */
:root{
 --glass:rgba(9,14,18,.82);--glass-strong:rgba(10,15,18,.94);--hairline:rgba(224,241,244,.14);--text-1:#f6faf9;--text-2:#aab7bc;--text-3:#77868d;
 --t-micro:10px;--t-small:11px;--t-body:12px;--t-ctl:13px;--t-title:15px;--t-head:20px;--t-display:26px;
 --n-sm:20px;--n-lg:24px;--n-hud:40px;
 --w-body:400;--w-med:600;--w-strong:700;
 --ls-caps:.06em;--ls-tight:-.02em;
 --s1:4px;--s2:6px;--s3:8px;--s4:12px;--s5:16px;--s6:20px;--s7:24px;
 --card-bg:#12191d;--card-bg-raise:#172126;--card-line:rgba(224,241,244,.12);--ctl-bg:#151d21;--ctl-line:rgba(224,241,244,.12);
 --card-r:12px;--ctl-r:10px;--card-pad:12px;--row-pad:8px 12px;
 --float-shadow:0 10px 28px rgba(0,0,0,.28);--dialog-shadow:0 18px 50px rgba(0,0,0,.45);--scrim:rgba(4,9,11,.8);
 --sel-line:var(--design-lime,#b3ed59);--sel-bg:rgba(179,237,89,.08);--focus:#b3ed59;
 --ctl-h-min:48px;--ctl-h:50px;--ctl-h-lg:52px;--ctl-h-tile:56px
}
#app:after{background:linear-gradient(90deg,rgba(2,5,7,.55),transparent 24%,transparent 76%,rgba(2,5,7,.55)),linear-gradient(0deg,rgba(3,6,8,.8),transparent 38%,rgba(3,6,8,.18))}
/* The 48 px floor has to out-rank the older decorative sheets. */
.topbar>button.icon-btn,.topbar .top-actions>button.account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min);border-radius:var(--ctl-r)}
/* The ribbon is a card and follows the bar: 48 px of chrome plus one step. */
.route-ribbon{top:56px;left:var(--s5);min-width:0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--glass);box-shadow:var(--float-shadow)}
/* Wide screens centre the cluster over the road instead of spanning it. */
.drive-readout{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100vw - 360px))}
.control-dock{width:min(760px,calc(100vw - 330px))}
.engine-meter{max-width:none}
.nitro-btn{right:var(--s5);bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
.horn-btn{right:120px;bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
.nitro-btn strong{font-size:var(--t-title)}
.nitro-btn small,.horn-btn small{font-size:var(--t-micro)}
.panel{width:min(560px,100vw);padding:0 var(--s6) var(--s6)}
.panel-head{position:sticky;z-index:3;top:0;margin:0 -4px;padding:var(--s6) var(--s1) var(--s5);background:linear-gradient(#0a0f12 82%,transparent)}
.panel-head .icon-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
.profile,.environments button,.country-list summary,.drive-side button{min-height:var(--ctl-h-tile);padding:var(--card-pad)}
.profile-orb,.environments i,.country-list summary>i{width:40px;height:40px}
.environments strong,.country-list summary strong,.region-grid strong{font-size:var(--t-ctl)}
.environments small,.country-list summary small,.region-grid small{font-size:var(--t-small);color:var(--text-3);line-height:1.35}
.region-grid button{min-height:var(--ctl-h);padding:var(--row-pad)}
.region-grid .route-stops{margin-top:var(--s1);color:var(--text-2);font-size:var(--t-small);line-height:1.45;overflow-wrap:anywhere}
/* A literal focus colour: the car's Chromium has no color-mix(). */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:1100px){.drive-readout{width:calc(100vw - 260px);grid-template-columns:120px 1fr 104px}.control-dock{width:calc(100vw - 210px)}}
@media(max-height:760px){.panel{padding:0 var(--s5) var(--s5)}.panel-head{padding:var(--s5) var(--s1) var(--s4)}}

/* design-nav.css */
/* Settings tabs: one sticky row of five, parked under the sticky panel head. */
.panel-nav {
  position: sticky;
  z-index: 4;
  top: 96px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
  margin: 0 -4px;
  padding: var(--s3) var(--s1) var(--s4);
  background: linear-gradient(#0a0f12 78%, transparent);
}

.panel-nav button {
  min-height: var(--ctl-h-tile);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s1);
  padding: var(--row-pad);
  border: 1px solid var(--ctl-line);
  border-radius: var(--ctl-r);
  background: var(--ctl-bg);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.panel-nav button:hover { border-color: var(--sel-line); color: var(--text-1); background: var(--card-bg-raise); }
.panel-nav button.active { border-color: var(--sel-line); background: var(--sel-bg); color: var(--text-1); }
/* Five tabs across one row: long translations wrap rather than widen the row. */
.panel-nav button > span { font-size: var(--t-ctl); font-weight: var(--w-med); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.setting-section { scroll-margin-top: 172px; }

@media (max-height: 760px) {
  .panel-nav { top: 88px; }
  .panel-nav button { min-height: var(--ctl-h); }
  .setting-section { scroll-margin-top: 158px; }
}

/* traffic-controls.css */
/* Settings choice grids: one control style for traffic, lanes, time and season. */
.setting-subtitle { display:flex; align-items:baseline; justify-content:space-between; margin:var(--s1) 0 var(--s3); }
.setting-subtitle > small { margin-left:var(--s4); }
[dir="rtl"] .setting-subtitle > small { margin-left:0; margin-right:var(--s4); }
.setting-subtitle + .choice-grid { margin-bottom:var(--s6); }
.setting-subtitle strong { color:var(--text-1); font-size:var(--t-ctl); font-weight:var(--w-med); }
.setting-subtitle small { color:var(--text-3); font-size:var(--t-small); letter-spacing:0; text-align:end; }
.choice-grid { display:grid; gap:var(--s3); }
.traffic-choices { grid-template-columns:repeat(5,1fr); }
.lane-choices { grid-template-columns:repeat(4,1fr); }
.choice-grid button { min-height:var(--ctl-h); padding:var(--row-pad); border:1px solid var(--ctl-line); border-radius:var(--ctl-r); background:var(--ctl-bg); color:var(--text-2); cursor:pointer; }
.choice-grid button:hover { border-color:var(--sel-line); color:var(--text-1); }
.choice-grid button.active { border-color:var(--sel-line); background:var(--sel-bg); color:var(--text-1); box-shadow:none; }
.time-choices { grid-template-columns:repeat(3,1fr); }
.time-choices button { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:var(--ctl-h-tile); text-align:center; }
.time-choices button > * + * { margin-top:var(--s1); }
.time-choices button span { font-size:var(--t-head); line-height:1; }
.time-choices button strong { overflow-wrap:anywhere; }
.season-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.season-choices button strong { overflow-wrap:anywhere; }
.setting-hint { margin:var(--s4) 0 0; color:var(--text-3); font-size:var(--t-small); line-height:1.5; }
@media(max-width:430px){.traffic-choices{grid-template-columns:repeat(3,1fr)}.lane-choices{grid-template-columns:repeat(2,1fr)}}
/* The parked-and-ready note is a plain card; only its shield carries colour. */
.safety-note { display:flex; margin-bottom:var(--s5); padding:var(--card-pad); border:1px solid var(--card-line); border-radius:var(--card-r); background:var(--card-bg); color:var(--text-2); }
.safety-note > * + * { margin-left:var(--s4); }
[dir="rtl"] .safety-note > * + * { margin-left:0; margin-right:var(--s4); }
.safety-note > svg { flex:0 0 auto; margin-top:2px; color:var(--sel-line); }
.safety-note strong { display:block; color:var(--text-1); font-size:var(--t-ctl); font-weight:var(--w-med); }
.safety-note p { margin:var(--s1) 0 0; color:var(--text-3); font-size:var(--t-small); line-height:1.5; }

/* commerce.css */
.top-actions{justify-self:end;display:flex;align-items:center}.top-actions .icon-btn{justify-self:auto}.purchase-cta{min-height:var(--ctl-h-min);padding:0 var(--s5);border:1px solid var(--accent);border-radius:var(--ctl-r);background:var(--accent);color:#06100d;font-size:var(--t-ctl);font-weight:var(--w-strong);cursor:pointer}.account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min);border:1px solid var(--card-line);border-radius:50%;background:#131a1e;color:var(--text-1);font-weight:700;cursor:pointer}
.locked{position:relative;opacity:.68}.locked:after{content:'⌁';position:absolute;top:6px;right:7px;color:#f4ca70;font-size:11px}.lock-tag{position:absolute;right:var(--s3);bottom:var(--s2);padding:2px var(--s1);border-radius:var(--s1);background:#463a20;color:#ffd879;font-size:var(--t-micro,10px);letter-spacing:.06em}.car-colors .locked{outline:2px solid rgba(255,205,105,.32);outline-offset:2px}
.free-tag{position:absolute;right:var(--s3);bottom:var(--s2);padding:2px var(--s1);border-radius:var(--s1);background:rgba(65,211,163,.13);color:#65e1b5;font-size:var(--t-micro,10px);letter-spacing:.06em}
.commerce-layer{position:fixed;z-index:80;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--s5);background:var(--scrim);animation:commerce-in .22s ease-out}.commerce-modal{position:relative;width:min(510px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow);animation:commerce-rise .32s cubic-bezier(.2,.8,.2,1)}.commerce-close{position:absolute;right:var(--s4);top:var(--s4);width:var(--ctl-h-lg);height:var(--ctl-h-lg);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);font-size:var(--t-head);cursor:pointer}.commerce-mark,.success-orb{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s4);border-radius:var(--ctl-r);background:var(--accent);color:#07100d}.commerce-kicker{margin:0 0 var(--s1);color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.commerce-modal h2{margin:0;font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight)}.commerce-copy{margin:var(--s3) 0 var(--s5);color:var(--text-2);font-size:var(--t-body);line-height:1.55}.login-form{display:grid;gap:var(--s3)}.login-form label{font-size:var(--t-small);font-weight:var(--w-med);color:var(--text-2)}.login-form input{width:100%;height:var(--ctl-h-lg);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);outline:none}.login-form input:focus{border-color:var(--sel-line)}.login-form button,.checkout-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--ctl-h-lg);margin-top:var(--s1);padding:0 var(--s5);border:0;border-radius:var(--ctl-r);background:var(--accent);color:#06100d;font-size:var(--t-ctl);font-weight:var(--w-strong);cursor:pointer}.commerce-legal{display:flex;align-items:center;margin:var(--s4) 0 0;color:var(--text-3);font-size:var(--t-small)}.commerce-legal>svg{margin-right:var(--s2)}[dir="rtl"] .commerce-legal>svg{margin-right:0;margin-left:var(--s2)}.plan-grid{display:grid;gap:var(--s3)}.plan-grid>button{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-content:space-between;align-items:center;gap:var(--s5);min-height:var(--ctl-h-tile);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:var(--text-1);text-align:left;cursor:pointer}.plan-grid>button.selected{border-color:var(--sel-line);background:var(--sel-bg)}.plan-grid span{display:grid}.plan-grid span small{color:var(--text-3);font-size:11px}.plan-grid b{white-space:nowrap;font-size:15px}.plan-grid b small{display:block;color:var(--text-3);font-size:11px;text-align:right}.text-action{display:block;min-height:var(--ctl-h-min);margin:var(--s4) auto 0;border:0;background:none;color:var(--text-2);font-size:var(--t-ctl);cursor:pointer}.success-orb{border-radius:50%;font-size:20px}@keyframes commerce-in{from{opacity:0}}@keyframes commerce-rise{from{opacity:0;transform:translateY(18px) scale(.98)}}
@media(max-height:760px){.commerce-modal{padding:var(--s5)}}
@media(max-width:700px){.purchase-cta{display:none}}
.mix-control{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s4);margin:var(--s4) 0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.mix-control>span{display:grid}.mix-control strong{font-size:11px}.mix-control small{font-size:11px!important;letter-spacing:0!important;color:var(--text-3)}.mix-control output{align-self:center;color:var(--text-2);font-size:11px;font-variant-numeric:tabular-nums}.mix-control input{grid-column:1/-1;width:100%;accent-color:var(--accent)}.mix-control.engine-priority{border-color:var(--sel-line);background:var(--sel-bg)}.mix-note{display:flex;align-items:flex-start;margin:var(--s3) 0 var(--s5);color:var(--text-3);font-size:11px;line-height:1.45}.mix-note svg{color:var(--accent);flex:0 0 auto;margin-right:var(--s3)}[dir="rtl"] .mix-note svg{margin-right:0;margin-left:var(--s3)}
.checkout-btn:disabled{opacity:.58;cursor:wait}.checkout-error{margin:10px 0 0;padding:10px 12px;border:1px solid rgba(255,130,105,.25);border-radius:10px;background:rgba(108,38,28,.18);color:#ffb7a8;font-size:11px;line-height:1.4}
.mix-control input[type=range]{grid-column:1/-1;width:100%;height:var(--ctl-h-min);margin:var(--s1) 0 0;accent-color:var(--accent);cursor:pointer;touch-action:pan-x;-webkit-appearance:none;appearance:none;background:transparent}.mix-control input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:#263238}.mix-control input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9px;border:3px solid #07100d;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 18px var(--glow);-webkit-appearance:none}.mix-control input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:#263238}.mix-control input[type=range]::-moz-range-thumb{width:22px;height:22px;border:3px solid #07100d;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 18px var(--glow)}

/* Analytics consent sits beside the terms line but stays visually its own
   choice: GDPR art. 7(2) wants a bundled consent request clearly distinguishable
   from the other matters it is presented with. Unticked by default, and DNT or
   Global Privacy Control still override whatever is chosen here. */
.commerce-consent{display:flex;align-items:flex-start;margin:var(--s4) 0 0;cursor:pointer;color:var(--text-2);font-size:11px;line-height:1.4;text-align:left}
.commerce-consent input{flex:0 0 auto;width:20px;height:20px;margin:1px var(--s3) 0 0;accent-color:var(--accent);cursor:pointer}
.commerce-consent small{display:block;margin-top:2px;color:var(--text-3);font-size:11px}
.commerce-consent+.commerce-legal{margin-top:var(--s4)}
[dir="rtl"] .commerce-consent input{margin:1px 0 0 var(--s3)}

/* The analytics ask. Stays until answered either way, so it is deliberately
   dismissible only by choosing: closing it would be neither consent nor refusal.
   Anchored bottom-centre so it never covers the drive HUD's top bar. */
.cookie-consent{position:fixed;left:50%;bottom:var(--s5);transform:translateX(-50%);z-index:70;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4);
 width:min(660px,calc(100vw - 32px));padding:var(--card-pad);box-sizing:border-box;
 background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);
 box-shadow:var(--float-shadow);color:var(--text-2);font-size:var(--t-small);line-height:1.45}
.cookie-consent-copy strong{display:block;margin-bottom:var(--s1);color:var(--text-1);font-size:var(--t-body)}
.cookie-consent-copy p{margin:0}
.cookie-consent-copy a{color:var(--accent)}
.cookie-consent-actions{display:grid;grid-auto-flow:column;gap:var(--s3)}
.cookie-consent-actions button{min-height:var(--ctl-h-min);min-width:104px;padding:0 var(--s5);border-radius:var(--ctl-r);cursor:pointer;font-size:var(--t-ctl);font-weight:var(--w-med)}
.cookie-decline{background:transparent;border:1px solid var(--line);color:var(--text-2)}
.cookie-accept{background:var(--accent);border:1px solid var(--accent);color:#06231f}
/* Short car screens: stack so the buttons keep their full touch target. */
@media(max-height:800px){.cookie-consent{gap:var(--s4);padding:var(--card-pad);bottom:var(--s3)}}
@media(max-width:700px){.cookie-consent{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:var(--s4)}
 .cookie-consent-actions button{flex:1}}

/* drive-selector.css */
/* The gear column: a native select showing the current letter, with the
   manual paddles underneath. The old .prnd button grid is gone from the
   markup, so only the select and the paddles are styled here. */
.drive-selector{position:relative;align-self:center;min-width:96px;text-align:start}
.drive-label{display:block;margin-bottom:var(--s1);color:var(--text-2);font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.gear select.compact-drive{display:block;width:100%;min-width:0;min-height:var(--ctl-h);padding:0 var(--s3);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);font-family:inherit;font-size:var(--n-sm);font-weight:var(--w-strong);letter-spacing:var(--ls-tight);text-align:center;cursor:pointer}
.manual-gear{display:flex;justify-content:center;align-items:center;margin-top:var(--s3)}
.manual-gear>*+*{margin-left:var(--s2)}
[dir="rtl"] .manual-gear>*+*{margin-left:0;margin-right:var(--s2)}
.manual-gear.concealed{visibility:hidden;height:0;margin:0}
.gear .manual-gear button{display:none}
.gear.manual .manual-gear button{display:grid;place-items:center;width:var(--ctl-h-min);height:var(--ctl-h-min);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);font-size:var(--t-head)}
.manual-gear>span{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:var(--s1);min-width:46px}
.manual-gear>span small{color:var(--text-2);font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.manual-gear strong{min-width:18px;color:var(--text-1);font-size:var(--n-sm);font-weight:var(--w-strong);text-align:center}
/* Identity exception: the drive warning keeps its amber alarm colour. */
.drive-message{position:absolute;z-index:4;right:0;top:76px;width:230px;padding:var(--row-pad);border:1px solid rgba(255,190,95,.32);border-radius:var(--ctl-r);background:#241e13;color:#ffd489;box-shadow:var(--float-shadow);font-size:var(--t-small);line-height:1.4;letter-spacing:0;text-align:start}
@media(max-width:620px){.drive-message{right:0;width:min(230px,calc(100vw - 28px))}}

/* competitive.css */
.drive-dynamics {
  position: absolute;
  z-index: 5;
  right: 35px;
  top: 185px;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--s4);
  padding: var(--row-pad);
  border: 1px solid var(--card-line);
  border-radius: var(--card-r);
  background: var(--glass);
}
.drive-dynamics div { display: grid; min-width: 74px; }
.drive-dynamics small { font-size: var(--t-micro,10px); letter-spacing:.06em; color: #758188; }
.drive-dynamics strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.drive-dynamics > i { width: 1px; height: 25px; background: var(--line); }

/* Drive Cinema art direction: the world is the product, the HUD is supporting cast. */
.cinema-grain{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E")}
.launch-loader{position:absolute;z-index:70;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(84,232,207,.13),transparent 32%),linear-gradient(145deg,#070b0e,#030506 72%);opacity:1;visibility:visible;transition:opacity .7s ease,visibility 0s linear 0s}.launch-loader.ready{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s linear .7s}.loader-aura{position:absolute;left:50%;top:48%;width:min(640px,80vw);height:min(640px,80vw);transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(84,232,207,.16);box-shadow:inset 0 0 110px rgba(84,232,207,.05),0 0 90px rgba(84,232,207,.05);animation:loader-breathe 2.6s ease-in-out infinite}.loader-road{position:absolute;left:50%;bottom:-10%;width:min(560px,72vw);height:58%;transform:translateX(-50%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);background:linear-gradient(90deg,transparent 48.8%,rgba(255,255,255,.16) 49%,rgba(255,255,255,.16) 51%,transparent 51.2%),linear-gradient(#11181c,#080c0e);opacity:.48}.loader-road:before,.loader-road:after{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(transparent,var(--accent));box-shadow:0 0 16px var(--accent)}.loader-road:before{left:1%}.loader-road:after{right:1%}.loader-road i{position:absolute;left:0;width:100%;height:1px;background:rgba(255,255,255,.09);animation:loader-road 1.4s linear infinite}.loader-road i:nth-child(2){animation-delay:-.46s}.loader-road i:nth-child(3){animation-delay:-.92s}.loader-console{position:relative;z-index:2;display:grid;justify-items:center;width:min(410px,calc(100vw - 48px));padding:32px 34px 28px;border:1px solid rgba(255,255,255,.12);border-radius:25px;background:linear-gradient(145deg,rgba(17,25,29,.92),rgba(7,12,15,.88));box-shadow:0 34px 100px rgba(0,0,0,.58);backdrop-filter:blur(24px)}.loader-mark{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--s5);border:1px solid rgba(84,232,207,.55);border-radius:var(--card-r);background:#18292b;color:var(--accent);box-shadow:none}.loader-console p{margin:0 0 8px;color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.loader-console h1{margin:0;font-size:var(--t-display);font-weight:600;letter-spacing:-.02em}.loader-wave{height:36px;margin:var(--s7) 0 var(--s5);display:flex;align-items:center}.loader-wave>i+i{margin-left:var(--s1)}.loader-wave i{display:block;width:3px;height:8px;border-radius:3px;background:var(--accent);box-shadow:0 0 9px var(--glow);animation:loader-wave .8s ease-in-out infinite alternate}.loader-wave i:nth-child(3n){animation-delay:-.55s}.loader-wave i:nth-child(3n+1){animation-delay:-.25s}.loader-wave i:nth-child(3n+2){animation-delay:-.08s}.loader-track{width:100%;height:3px;overflow:hidden;border-radius:5px;background:rgba(255,255,255,.08)}.loader-track i{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);animation:loader-progress 1.35s cubic-bezier(.45,0,.55,1) infinite}.loader-console small{margin-top:13px;color:#74838a;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.loader-version{position:absolute;bottom:26px;color:#536168;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}@keyframes loader-wave{to{height:32px;opacity:.45}}@keyframes loader-progress{from{transform:translateX(-110%)}to{transform:translateX(250%)}}@keyframes loader-road{from{top:0;opacity:0}35%{opacity:1}to{top:100%;opacity:0}}@keyframes loader-breathe{50%{transform:translate(-50%,-50%) scale(1.055);opacity:.62}}
.cinema-title{position:absolute;z-index:4;left:50%;top:102px;transform:translateX(-50%);width:min(520px,42vw);text-align:center;pointer-events:none;text-shadow:0 3px 24px rgba(0,0,0,.8)}
.cinema-title span{display:inline-flex;align-items:center;color:var(--world-accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.cinema-title span:before,.cinema-title span:after{content:"";width:28px;height:1px;background:currentColor;opacity:.55}.cinema-title span:before{margin-right:var(--s3)}.cinema-title span:after{margin-left:var(--s3)}
.cinema-title h1{margin:var(--s3) 0 var(--s1);color:#f7fbfa;font-size:var(--t-display);font-weight:var(--w-body);letter-spacing:var(--ls-tight);line-height:26px}.cinema-title p{margin:0;color:rgba(228,239,239,.68);font-size:var(--t-micro,10px);letter-spacing:.06em}
.world-reel{position:absolute;z-index:6;left:30px;top:50%;width:225px;display:grid;gap:var(--s3);transform:translateY(-44%)}
.world-reel button{position:relative;display:grid;grid-template-columns:21px 34px minmax(0,1fr);align-items:center;gap:var(--s3);min-height:var(--ctl-h-tile);padding:var(--row-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:linear-gradient(100deg,rgba(8,13,16,.82),rgba(8,13,16,.5));color:#eef5f4;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.world-reel button:hover{transform:translateX(4px);border-color:rgba(255,255,255,.24)}.world-reel button.active{border-color:var(--world-accent);background:var(--sel-bg);box-shadow:none}
.world-reel b{color:#6f7c81;font-size:var(--t-micro,10px);letter-spacing:.06em}.world-reel i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#07100e;font-size:15px;font-style:normal;font-weight:700}.world-reel span{display:grid;min-width:0}.world-reel strong{font-size:11px}.world-reel small{overflow:hidden;color:#7f8d92;font-size:11px;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap}.world-reel .all-worlds{margin-top:3px;border-style:dashed}.world-reel .all-worlds i{background:rgba(255,255,255,.07);color:#dbe5e4}
.billing-toggle{display:grid;grid-template-columns:1fr 1fr;gap:var(--s1);margin:0 0 var(--s4);padding:var(--s1);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.billing-toggle button{min-height:var(--ctl-h-min);border:0;border-radius:var(--ctl-r);background:transparent;color:var(--text-3);font-size:var(--t-ctl);font-weight:var(--w-med);cursor:pointer}.billing-toggle button.active{background:#172126;color:var(--text-1);box-shadow:0 6px 16px rgba(0,0,0,.2)}.billing-toggle b{margin-left:var(--s1);padding:2px var(--s1);border-radius:var(--s1);background:rgba(85,231,208,.12);color:var(--accent);font-size:var(--t-micro,10px);letter-spacing:.06em}

html[data-hud="true"] .scene-status,
html[data-hud="true"] .turn-card,
html[data-hud="true"] .drive-dynamics,
html[data-hud="true"] .vehicle-stage,
html[data-hud="true"] .engine-meter,
html[data-hud="true"] .nitro-btn,
html[data-hud="true"] .horn-btn,
html[data-hud="true"] .purchase-cta,
html[data-hud="true"] .account-btn { opacity: 0 !important; pointer-events: none !important; }
html[data-hud="true"] .cinema-title,
html[data-hud="true"] .world-reel,
html[data-hud="true"] .topbar { background: transparent; border-color: transparent; }
html[data-hud="true"] .drive-readout { grid-template-columns: 1fr 110px; }
html[data-hud="true"] .speed strong { text-shadow: 0 0 35px rgba(0,0,0,.8); }

@media (max-width: 850px) {
  .drive-dynamics { right: 20px; top: 165px; transform: scale(.88); transform-origin: right top; }
  .world-reel{display:none}.cinema-title{top:92px;width:62vw}.cinema-title p{display:none}.cinema-title h1{font-size:20px}
}

@media (max-width: 1100px){.world-reel{width:190px}.world-reel button{grid-template-columns:31px 1fr}.world-reel button>b{display:none}.cinema-title{top:94px}}
@media (max-height: 720px){.cinema-title{top:73px}.cinema-title h1{font-size:20px}.world-reel{top:47%;transform:translateY(-42%) scale(.88);transform-origin:left center}}
@media (prefers-reduced-motion:reduce){.world-reel button{transition:none}.cinema-grain{display:none}.loader-aura,.loader-road i,.loader-wave i,.loader-track i{animation:none}.loader-track i{width:100%;opacity:.7}}
/* DRIWE launch identity */
.loader-logo{display:block;width:168px;height:auto;margin-bottom:12px;border-radius:7px}
.loader-brand-stage{position:relative;width:112px;height:82px;margin:0 0 10px;display:grid;place-items:center}
.loader-sound-pulse{position:absolute;width:112px;height:112px;animation:driwe-pulse 1.45s ease-in-out infinite}
.loader-w-draw{position:relative;width:70px;height:42px;filter:drop-shadow(0 0 12px rgba(163,230,53,.28));animation:driwe-mark 1.35s ease-in-out infinite}
@keyframes driwe-pulse{50%{transform:scale(1.08);opacity:.48}}
@keyframes driwe-mark{50%{transform:scale(.94);opacity:.72}}
@media(prefers-reduced-motion:reduce){.loader-sound-pulse,.loader-w-draw{animation:none}}

/* auth-flow.css */
.pairing-card { display: grid; justify-items: center; gap: var(--s4); padding: var(--card-pad); border: 1px solid var(--card-line); border-radius: var(--card-r); background: #eef3ef; color: #07100d; }
.pairing-card > strong { letter-spacing:.06em; font-size: 13px; }
.pairing-card > small { max-width: 300px; color: #52605a; font-size: 11px; line-height: 1.45; text-align: center; }
.pairing-qr { display: grid; grid-template-columns: repeat(9, 8px); grid-auto-rows: 8px; gap: 2px; padding: var(--card-pad); border-radius: var(--ctl-r); background: white; }
.pairing-qr i { display: block; border-radius: 1px; background: transparent; }
.pairing-qr i.on { background: #08110e; }
.pairing-alternative { margin-top: var(--s5); color: var(--accent); }
.google-login { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--ctl-h-lg); border: 1px solid var(--card-line); border-radius: var(--ctl-r); background: #f3f5f4; color: #17201c; font-weight:700; cursor: pointer; }
.google-login b { display: grid; place-items: center; margin-right: var(--s3); width: 24px; height: 24px; border-radius: 50%; background: white; color: #4285f4; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.login-divider { display: flex; align-items: center; margin: var(--s5) 0; color: var(--text-3); font-size: var(--t-micro); letter-spacing: var(--ls-caps); }
.login-divider>*+* { margin-left: var(--s3); }
[dir="rtl"] .google-login b { margin-right: 0; margin-left: var(--s3); }
.login-divider::before,.login-divider::after { content: ''; height: 1px; flex: 1; background: var(--hairline); }
.login-links { display: flex; justify-content: space-between; margin-top: var(--s4); }
.login-links button { min-height: var(--ctl-h-min); border: 0; padding: 0 var(--s2); background: none; color: var(--text-2); font-size: var(--t-ctl); cursor: pointer; }
.login-notice { margin: var(--s4) 0 0; padding: var(--row-pad); border: 1px solid var(--sel-line); border-radius: var(--ctl-r); background: var(--sel-bg); color: var(--text-2); font-size: var(--t-small); line-height: 1.45; }

/* 2d-mode.css */
html[data-visual-mode="2d"] .cinema-title,
html[data-visual-mode="2d"] .world-reel,
html[data-visual-mode="2d"] .drive-dynamics{opacity:1;pointer-events:auto}
html[data-visual-mode="2d"] .speed{position:static;z-index:auto;left:auto;top:auto;transform:none;display:flex;justify-items:initial;text-shadow:none}
html[data-visual-mode="2d"] .speed strong{font-size:var(--n-hud);font-weight:var(--w-strong);line-height:1;letter-spacing:var(--ls-tight)}
html[data-visual-mode="2d"] .speed>span{padding-bottom:0;font-size:var(--t-micro);color:var(--text-2);letter-spacing:var(--ls-caps);text-transform:uppercase}
html[data-visual-mode="2d"] .engine-meter{opacity:1}
html[data-visual-mode="2d"] .route-ribbon{opacity:1;transform:none}
html[data-visual-mode="2d"] .turn-card{opacity:1}

/* Driving state: retain glanceable road, maneuver and vehicle information. */
html[data-moving="true"] .cinema-title,html[data-moving="true"] .world-reel,html[data-moving="true"] .purchase-cta{opacity:0;pointer-events:none;transform:translateY(-8px)}
html[data-moving="true"] .drive-dynamics{opacity:.72}
html[data-moving="true"] .route-ribbon,html[data-moving="true"] .turn-card,html[data-moving="true"] .drive-readout,html[data-moving="true"] .control-dock{opacity:1}

@media(prefers-reduced-motion:reduce){html[data-moving="true"] .cinema-title,html[data-moving="true"] .world-reel{transition:none}}

/* ux-refresh.css */
/* 2026 cockpit refresh: quieter hierarchy, safer targets, responsive controls. */
:root {
  --surface-0: #06090b;
  --surface-1: rgba(12, 18, 21, .78);
  --surface-2: rgba(17, 24, 28, .94);
  --stroke: rgba(232, 244, 244, .12);
  --stroke-strong: rgba(232, 244, 244, .21);
  --muted: #91a0a6;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

button.tesla-connect{width:100%;border:0;cursor:pointer}
.tesla-connect.connected{color:var(--accent);background:rgba(84,232,207,.14);border:1px solid rgba(84,232,207,.32)}
.tesla-connect.connected small{color:inherit}
.tesla-quick-connect{display:none;align-items:center;min-height:var(--ctl-h-min);padding:0 var(--s4);border:1px solid rgba(84,232,207,.5);border-radius:var(--ctl-r);background:rgba(84,232,207,.12);color:var(--accent);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.tesla-quick-connect:hover,.tesla-quick-connect:focus-visible{background:rgba(84,232,207,.22);border-color:var(--accent);transform:translateY(-1px)}
html[data-tesla="true"] .tesla-quick-connect{display:flex}
.tesla-quick-connect>*+*{margin-left:var(--s2)}
[dir="rtl"] .tesla-quick-connect>*+*{margin-left:0;margin-right:var(--s2)}
.setup-gate{position:fixed;z-index:75;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:var(--s5);background:var(--scrim)}
.setup-gate>section{width:min(540px,100%);padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow)}
.setup-gate p{margin:0 0 8px;color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.setup-gate h2{margin:0 0 var(--s4);font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight)}.setup-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg-raise)}.setup-step>svg{color:var(--accent)}.setup-step div{display:grid;gap:4px}.setup-step strong{font-size:13px}.setup-step small{color:var(--text-3);font-size:11px;line-height:1.4}.setup-step button,.setup-step a,.setup-upgrade{min-height:var(--ctl-h-lg);padding:0 var(--s4);border:0;border-radius:var(--ctl-r);background:var(--accent);color:#06100d;font-size:var(--t-ctl);font-weight:var(--w-strong);text-decoration:none;display:grid;place-items:center;cursor:pointer}.setup-step button:disabled{opacity:.55}.setup-upgrade{width:100%;margin-top:12px}
.setup-step+.setup-step{margin-top:var(--s3)}.setup-step.complete{grid-template-columns:auto 1fr;border-color:rgba(84,232,207,.35);background:rgba(84,232,207,.08)}.setup-check{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#06100d;font-weight:700}.setup-step.complete small{color:var(--accent)}
.setup-brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}.setup-brand svg{display:block;width:96px;height:auto}.setup-brand span{padding:7px 10px;border:1px solid rgba(84,232,207,.3);border-radius:999px;background:rgba(84,232,207,.08);color:var(--accent);font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em}.setup-copy{display:none}.setup-privacy{display:flex;align-items:flex-start;margin-top:var(--s4);color:var(--text-3);font-size:var(--t-small);line-height:1.45}.setup-privacy>svg{margin-right:var(--s3)}[dir="rtl"] .setup-privacy>svg{margin-right:0;margin-left:var(--s3)}.setup-privacy svg{flex:0 0 auto;color:var(--accent)}
@media(max-height:760px){.setup-gate>section{padding:var(--s5)}}
@media(max-width:600px){.setup-brand svg{width:80px}.setup-step{grid-template-columns:auto 1fr}.setup-step button,.setup-step a{grid-column:1/-1;width:100%}}

button { -webkit-tap-highlight-color: transparent; }
button:not(:disabled) { cursor: pointer; }
html { overscroll-behavior: none; }
body { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
input { user-select: auto; -webkit-user-select: auto; }
html, body { width: 100%; height: 100%; overflow: hidden; }
#app {
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100vh);
  min-height: 0;
  background: var(--surface-0);
}
#app:after {
  background:
    linear-gradient(90deg, rgba(3, 6, 8, .54), transparent 25%, transparent 75%, rgba(3, 6, 8, .54)),
    linear-gradient(0deg, rgba(3, 6, 8, .9), transparent 38%, rgba(3, 6, 8, .2));
}

/* A floating command bar keeps global actions distinct from drive content. */
.topbar {
  top: 14px;
  left: 18px;
  right: 18px;
  height: 64px;
  padding: 0 10px 0 16px;
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(10, 15, 18, .9), rgba(10, 15, 18, .68));
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
  backdrop-filter: blur(24px) saturate(1.2);
}
.brand-mark { width: 38px; height: 38px; border-radius: 11px; }
.brand strong { font-size: 11px; letter-spacing:.06em; }
.brand small { font-size: 11px; }
.session-pill { min-height: 34px; background: rgba(255,255,255,.035); }
.top-actions>*+* { margin-left: var(--s2); }
[dir="rtl"] .top-actions>*+* { margin-left: 0; margin-right: var(--s2); }
.purchase-cta { min-height: var(--ctl-h-min); padding: 0 var(--s5); border-radius: var(--ctl-r); }
.topbar .icon-btn, .account-btn { width: var(--ctl-h-min); height: var(--ctl-h-min); border-radius: var(--ctl-r); }

.route-ribbon {
  top: 96px;
  left: 20px;
  width: min(340px, calc(100vw - 40px));
  min-width: 292px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: var(--surface-1);
}
.speed-sign { width: 58px; height: 62px; border-width: 2px; border-radius: 9px; }
.speed-sign strong { font-size: 20px; }
.route-copy>strong { font-size: 15px; }
.route-copy { min-width: 0; flex: 1; }
.route-copy>strong, .route-copy>small, .route-copy>.eyebrow {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-copy>small { color: var(--muted); }

/* Route ribbon, compact: the road is the headline, the status is a footnote,
   and the sign is the market's own — a rectangular SPEED LIMIT plate for mph,
   a red-ringed roundel for km/h. With no known limit the sign leaves entirely
   so the ribbon shrinks to the road name. */
.route-ribbon {
  top: 92px;
  width: max-content;
  min-width: 0;
  max-width: min(360px, calc(100vw - 40px));
  padding: 7px 14px 7px 7px;
  border-radius: 14px;
}
.route-copy { justify-content: center; }
.route-copy>*+* { margin-top: var(--s1); }
.route-copy>strong { margin: 0; font-size: 15px; line-height: 1.15; letter-spacing:-.02em; font-weight:700; }
.route-copy>strong.route-road--none { color: var(--muted); font-size: 11px; font-weight:700; letter-spacing:.06em; text-transform: uppercase; }
.route-copy>small { font-size: 11px; line-height: 1.2; letter-spacing:0; }
.speed-sign { width: 50px; height: 54px; padding-top: 4px; border-width: 2px; border-radius: 8px; }
.speed-sign small { font-size: 6.5px; line-height: 1; letter-spacing:0; }
.speed-sign strong { font-size: 20px; line-height: 1.05; }
.speed-sign.hidden, .route-copy>small.hidden { display: none; }
.speed-sign.over-limit:after { top: calc(100% + 6px); min-width: 0; padding: 3px 6px; font-size: 11px; }
.speed-sign[data-metric="true"] {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 5px solid #d3262e;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #f5f5ee, 0 10px 30px rgba(0,0,0,.35);
}
.speed-sign[data-metric="true"] small { display: none; }
.speed-sign[data-metric="true"] strong { font-size: 20px; letter-spacing:-.02em; }
.speed-sign[data-metric="true"].near-limit { border-color: #d3262e; box-shadow: 0 0 0 1.5px #f5f5ee, 0 0 0 4px rgba(223,170,53,.4), 0 10px 35px rgba(223,170,53,.22); }
.speed-sign[data-metric="true"].over-limit { border-color: #ff988c; }

.cinema-title { top: 104px; }
.cinema-title h1 { font-weight:400; }
.world-reel { left: 20px; width: 212px; gap: 6px; }
.world-reel button {
  min-height: 56px;
  border-color: var(--stroke);
  background: linear-gradient(100deg, rgba(9, 14, 17, .88), rgba(9, 14, 17, .6));
}
.world-reel button:focus-visible { transform: translateX(4px); }
.world-reel small { color: var(--muted); }

.scene-status { top: 96px; right: 20px; min-width: 188px; padding: 9px 12px; }
.render-mode-badge { top: 96px; right: 220px; }
.drive-dynamics { top: 163px; right: 20px; }
.turn-card { top: 222px; right: 20px; }

/* Primary telemetry is one stable scan zone above the utility dock. */
.drive-readout {
  bottom: 112px;
  width: min(760px, calc(100vw - 520px));
  min-height: 88px;
  padding: 14px 18px;
  grid-template-columns: 146px minmax(180px, 1fr) 196px;
  gap: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(13, 20, 24, .94), rgba(8, 13, 16, .78));
}
.speed strong { font-size: var(--n-hud); font-weight: var(--w-strong); }
.speed>span { font-size: 11px; }
.meter-label { margin-bottom: 7px; }
.meter-label strong { font-size: 20px; }
.gear strong { font-size: 20px; }

.control-dock {
  bottom: 22px;
  width: min(760px, calc(100vw - 520px));
  height: 76px;
  border-radius: 20px;
  background: rgba(10, 15, 18, .94);
}
.sound-btn { border-radius: 14px; }
.sound-btn:focus-visible { outline-offset: -2px; }
.nitro-btn { right: 20px; bottom: 22px; height: 76px; border-radius: 18px; }
.horn-btn { right: 138px; bottom: 22px; height: 76px; border-radius: 18px; }
.horn-control select { right: 138px; bottom: 104px; }
.disclaimer { bottom: 7px; opacity: .8; }

/* The studio reads as a product workspace, with predictable sections. */
.scrim { background: rgba(1, 3, 4, .78); backdrop-filter: none; }
.panel {
  width: min(520px, 100vw);
  padding: 0 var(--s6) var(--s6);
  border-left-color: var(--stroke);
  background: linear-gradient(145deg, #0b1013, #080c0e);
  box-shadow: -32px 0 90px rgba(0,0,0,.45);
  overscroll-behavior: contain;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}
/* The head is one row: the title and the close control. The kicker repeats
   the title and the subtitle repeats the tabs, so both go. */
.panel-head { padding: var(--s2) 0; }
.panel-kicker, .panel-head p { display: none; }
.panel h1 { margin: 0; font-size: var(--t-head); line-height: 20px; font-weight: var(--w-med); letter-spacing: var(--ls-tight); }
.panel-head .icon-btn { width: var(--ctl-h-min); height: var(--ctl-h-min); }
.panel-nav { grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.panel-nav button { min-height: var(--ctl-h); background: var(--ctl-bg); }
.panel-nav button:active { transform: scale(.98); }
.setting-section {
  padding: var(--s5) 0;
}
.profile, .environments button, .choice-grid button, .drive-side button,
.vehicle-style-grid button, .toggles label, .country-list summary {
  border-color: var(--stroke);
  background-color: rgba(255,255,255,.035);
}
.profile:hover, .environments button:hover, .choice-grid button:hover,
.drive-side button:hover, .vehicle-style-grid button:hover {
  border-color: var(--stroke-strong);
  background-color: rgba(255,255,255,.06);
}
.profile, .environments button, .choice-grid button, .drive-side button,
.vehicle-style-grid button { transition: transform .18s var(--ease-out), border-color .18s, background .18s; }
.profile:active, .environments button:active, .choice-grid button:active,
.drive-side button:active, .vehicle-style-grid button:active { transform: scale(.985); }

@media (max-width: 1180px) {
  .world-reel { width: 184px; }
  .world-reel button { grid-template-columns: 34px 1fr; }
  .world-reel button>b { display: none; }
  .drive-readout, .control-dock { width: calc(100vw - 430px); }
  .render-mode-badge { display: none; }
}

@media (max-width: 850px) {
  #app { min-height: 520px; }
  .topbar { top: 10px; left: 10px; right: 10px; height: 58px; padding-left: 12px; }
  .brand small, .session-pill em { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .session-pill { padding-left: 12px; padding-right: 12px; }
  .route-ribbon { top: 82px; left: 12px; min-width: 0; transform: none; }
  .route-copy>small { display: none; }
  .scene-status, .drive-dynamics, .turn-card { right: 12px; }
  .cinema-title { top: 88px; }
  .drive-readout {
    left: 12px;
    right: 12px;
    bottom: 96px;
    width: auto;
    min-height: 76px;
    transform: none;
    grid-template-columns: 128px minmax(120px, 1fr) 196px;
    gap: 14px;
    padding: 11px 14px;
  }
  .control-dock { bottom: 14px; width: calc(100vw - 24px); height: 70px; }
  .nitro-btn { right: 12px; bottom: 96px; height: 58px; }
  .horn-btn { right: 108px; bottom: 96px; height: 58px; }
  .horn-control select { right: 108px; bottom: 160px; }
}

@media (max-width: 620px) {
  .panel .experience-entry{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .topbar { grid-template-columns: 1fr auto; }
  .session-pill, .purchase-cta, .topbar .icon-btn[aria-label*="full screen"] { display: none; }
  .brand strong { font-size: 11px; }
  .top-actions { justify-self: end; }
  .route-ribbon { padding: 7px 10px 7px 7px; }
  .speed-sign { width: 48px; height: 52px; }
  .speed-sign small { font-size: 6px; }
  .speed-sign strong { font-size: 20px; }
  .route-copy>strong { max-width: 150px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .cinema-title { top: 154px; width: calc(100vw - 32px); }
  .cinema-title h1 { font-size: 20px; }
  .scene-status, .drive-dynamics, .world-reel, .render-mode-badge { display: none; }
  .vehicle-stage { top: 47%; transform: translate(-50%,-50%) scale(.82); }
  .drive-readout { grid-template-columns: 1fr auto; }
  .engine-meter { display: none; }
  .gear { min-width: 92px; }
  .control-dock { grid-template-columns: 1fr; padding: 0 10px; }
  .control-dock .divider, .destination, .battery { display: none; }
  .sound-btn { padding-left: 4px; padding-right: 4px; }
  .nitro-btn, .horn-btn, .horn-control select, .disclaimer { display: none; }
  .panel { padding: 0 var(--s5) var(--s5); }
  .panel-nav { top: 105px; margin-left: -2px; margin-right: -2px; overflow-x: auto; }
  .panel-nav button { min-width: 76px; min-height: var(--ctl-h); }
  .profiles { grid-template-columns: 1fr; }
  .setting-section { padding: var(--s5) 0; scroll-margin-top: 178px; }
}

@media (max-height: 680px) and (min-width: 621px) {
  .topbar { top: 8px; height: 54px; }
  .route-ribbon { top: 74px; }
  .cinema-title { top: 76px; }
  .drive-readout { bottom: 88px; min-height: 70px; padding-top: 8px; padding-bottom: 8px; }
  .control-dock { bottom: 14px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .scrim, .profile, .environments button, .choice-grid button,
  .drive-side button, .vehicle-style-grid button { transition-duration: .01ms !important; }
}

/* Tesla center display: touch-first, landscape, readable at arm's length. */
@media (pointer: coarse) and (min-width: 900px) {
  .topbar {
    top: max(12px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    height: 72px;
    padding-left: 18px;
  }
  .brand-mark { width: 44px; height: 44px; }
  .brand strong { font-size: 12px; }
  .session-pill { min-height: 42px; font-size: 11px; }
  .purchase-cta { min-height: var(--ctl-h-lg); padding: 0 var(--s6); font-size: var(--t-ctl); }
  .topbar .icon-btn, .account-btn { width: 50px; height: 50px; }

  .route-ribbon { top: 100px; min-width: 310px; }
  .world-reel { width: 226px; }
  .world-reel button { min-height: 62px; padding: 9px 11px; }
  .world-reel strong { font-size: 11px; }
  .world-reel small { font-size: 11px; }
  .world-reel button:hover { transform: none; }
  .scene-status { top: 100px; }
  .drive-dynamics { top: 170px; }
  .render-mode-badge { top: 100px; }

  .drive-readout { bottom: 120px; min-height: 96px; }
  .control-dock { bottom: 24px; height: 84px; }
  .sound-btn { min-height: 58px; padding-left: 4px; padding-right: 4px; }
  .sound-icon, .dock-icon { width: 48px; height: 48px; }
  .nitro-btn { bottom: 24px; height: 84px; min-width: 104px; }
  .prnd button, .manual-gear button { min-width: var(--ctl-h-min); min-height: var(--ctl-h-min); }

  .scrim { transition-duration: .16s; }
  .panel {
    width: min(520px, 100vw);
    padding-left: var(--s6);
    padding-right: var(--s6);
    transition-duration: .2s;
    box-shadow: -18px 0 52px rgba(0,0,0,.38);
  }
  .panel.open { transform: translateZ(0); }
  .panel.open ~ * { animation-play-state: paused !important; }
  .panel *, .panel-head, .panel-nav { backdrop-filter: none !important; }
  .panel:not(.open) { visibility: hidden; transition: transform .2s var(--ease-out), visibility 0s linear .2s; }
  .panel.open { visibility: visible; transition: transform .2s var(--ease-out); }
  .panel-nav button { min-height: var(--ctl-h); }
  .panel-nav button>small { font-size: var(--t-small); }
  .environments button { min-height: var(--ctl-h-tile); }
  .choice-grid button, .drive-side button, .vehicle-style-grid button, .toggles label { min-height: var(--ctl-h-lg); }
  .toggles input[type="checkbox"] { width: 44px; height: 26px; }
  .car-colors button, .custom-color { min-width: var(--ctl-h-lg); min-height: var(--ctl-h-lg); }
  input[type="range"] { height: var(--ctl-h-min); }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  .tesla-connect { min-height: var(--ctl-h-lg); }
  .commerce-close { width: var(--ctl-h-lg); height: var(--ctl-h-lg); }
  .billing-toggle button, .login-form button, .google-login, .plan-card button { min-height: var(--ctl-h-lg); }
}

/* Common Tesla browser viewport: retain usable road area at 1280x720. */
@media (pointer: coarse) and (min-width: 900px) and (max-height: 760px) {
  .topbar { height: 62px; }
  .topbar .icon-btn, .account-btn { width: var(--ctl-h-min); height: var(--ctl-h-min); }
  .route-ribbon { top: 86px; }
  .scene-status, .render-mode-badge { top: 86px; }
  .drive-dynamics { top: 150px; }
  .cinema-title { top: 91px; }
  .world-reel { top: 47%; transform: translateY(-42%); }
  .world-reel button { min-height: 56px; }
  .drive-readout { bottom: 105px; min-height: 82px; }
  .control-dock { bottom: 20px; height: 74px; }
  .nitro-btn, .horn-btn { bottom: 20px; height: 74px; }
  .horn-control select { bottom: 100px; }
}

/* Tesla Chromium does not consistently expose a coarse pointer. The runtime
   marker makes the cockpit rules deterministic on the center display. */
html[data-tesla="true"], html[data-tesla="true"] body {
  width: 100%;
  height: var(--app-height, 100vh);
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-tesla="true"] #app,
html[data-tesla="true"] .panel,
html[data-tesla="true"] .commerce-layer { height: var(--app-height, 100vh); }
html[data-tesla="true"] button,
html[data-tesla="true"] label,
html[data-tesla="true"] summary,
html[data-tesla="true"] select { touch-action: manipulation; }
html[data-tesla="true"] .topbar {
  top: 12px; left: 16px; right: 16px; height: 68px;
  backdrop-filter: none; background: rgba(8,13,16,.96);
}
html[data-tesla="true"] .topbar .icon-btn,
html[data-tesla="true"] .account-btn { width: 50px; height: 50px; }
html[data-tesla="true"] .topbar .icon-btn[aria-label*="full screen"] { display: none; }
html[data-tesla="true"] .purchase-cta { min-height: 48px; }
html[data-tesla="true"] .sound-btn,
html[data-tesla="true"] .world-reel button { min-height: 58px; }
html[data-tesla="true"] .prnd button,
html[data-tesla="true"] .manual-gear button { min-width:var(--ctl-h-min); min-height:var(--ctl-h-min); }
html[data-tesla="true"] .horn-control select {
  right: 138px; bottom: 106px; width: 240px; min-height: 52px;
  padding: 10px 38px 10px 14px; border-radius: 14px;
  border-color: rgba(255,255,255,.32); background-color: rgba(8,13,16,.98);
  font-size: 15px; font-weight:700; box-shadow: 0 8px 24px rgba(0,0,0,.42);
}
html[data-tesla="true"] .horn-btn { width: 96px; }
html[data-tesla="true"] .horn-choice-icon { top: 7px; right: 8px; font-size: 15px; }
html[data-tesla="true"] .panel {
  width: min(520px, 100vw); padding-left: var(--s6); padding-right: var(--s6);
  background: #090e11; transition-duration: .18s;
  scrollbar-width: thin; scrollbar-color: var(--accent) #11191d;
}
html[data-tesla="true"] .panel-head,
html[data-tesla="true"] .panel-nav { backdrop-filter: none; background-color: #090e11; }
html[data-tesla="true"] .panel-nav button { min-height: var(--ctl-h); }
html[data-tesla="true"] .environments button,
html[data-tesla="true"] .choice-grid button,
html[data-tesla="true"] .drive-side button,
html[data-tesla="true"] .vehicle-style-grid button,
html[data-tesla="true"] .toggles label { min-height: var(--ctl-h-lg); }
html[data-tesla="true"] input[type="range"] { min-height: 48px; }
html[data-tesla="true"] .commerce-modal {
  max-height: calc(var(--app-height, 100vh) - 28px);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html[data-tesla="true"] .scrim,
html[data-tesla="true"] .commerce-layer { backdrop-filter: none; }
html[data-tesla="true"] * { -webkit-tap-highlight-color: transparent; }

/* Engine picker: recording-unavailable notice (see App.jsx profile fallback) */
.section-label small.sound-notice{color:#ffb15b}

/* Language picker (Drive Studio) */
.language-control{display:flex;align-items:center}
.language-control>*+*{margin-left:var(--s3)}
[dir="rtl"] .language-control>*+*{margin-left:0;margin-right:var(--s3)}
.language-select{flex:1;min-width:0;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.06);color:inherit;border:1px solid var(--line);border-radius:12px;padding:12px 40px 12px 14px;font:inherit;font-size:15px;font-weight:700;letter-spacing:0;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.language-select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[dir="rtl"] .language-select{padding:12px 14px 12px 40px;background-position:20px 55%,14px 55%}

/* Right-to-left scripts (Hebrew, Arabic): `dir="rtl"` on <html> mirrors the
   layout the way the car's own UI does — panels, nav and HUD read from the
   right. Speed, RPM, distances and form fields keep left-to-right flow so
   numbers and addresses never reverse. */
[dir="rtl"] .panel,[dir="rtl"] .commerce-modal,[dir="rtl"] .cinema-title,[dir="rtl"] .disclaimer,[dir="rtl"] .drive-message,[dir="rtl"] .shop-page,[dir="rtl"] .welcome-page,[dir="rtl"] .information-page,[dir="rtl"] .setup-gate>section,[dir="rtl"] .cookie-settings-dialog{direction:rtl;text-align:start}
[dir="rtl"] .speed,[dir="rtl"] .drive-readout .engine-meter,[dir="rtl"] .drive-dynamics,[dir="rtl"] .route-ribbon,[dir="rtl"] .control-dock .destination strong,[dir="rtl"] .meter-scale{direction:ltr}
[dir="rtl"] .login-form input,[dir="rtl"] .pairing-card strong,[dir="rtl"] .home-price,[dir="rtl"] .shop-login input,[dir="rtl"] .phone-check-code{direction:ltr;text-align:start}

/* Five sections in the Drive Studio nav (Language joined Sound/Worlds/Vehicle/Gearbox) */
.panel-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.panel-nav button{min-width:0}

/* Engine picker: the radio input is the first child, so the old
   `span:nth-child(2)` rule styled the orb and left name + description inline.
   Target the text column directly. */
.profile>span:not(.profile-orb){display:grid;min-width:0}
/* Twenty engines in one column is 1676 px of scrolling. Two columns of dense
   rows, each naming its engine; the character line lives on the card that
   plays it, not in the list. */
.profiles{grid-template-columns:1fr 1fr;gap:var(--s3)}
.profile{min-height:var(--ctl-h-min);padding:var(--row-pad);padding-right:38px;border-radius:var(--ctl-r)}
.profile-orb{width:32px;height:32px;font-size:var(--t-small)}
.profile strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile small{display:none}
.profile>i{top:50%;right:var(--s3);margin-top:-7px;font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.lock-tag,.free-tag{top:50%;bottom:auto;right:var(--s3);margin-top:-9px;font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.profile-group{gap:var(--s3)}
.profile-group h3{font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.profile-group+.profile-group{padding-top:var(--s4)}
@media(max-width:479px){.profiles{grid-template-columns:1fr}}

/* Gear names are longer than "Drive" in most languages (ドライブ, Marche
   avant, Estacionar): let the selector grow to its label instead of clipping. */
.drive-mode-select select{width:auto;min-width:112px;max-width:180px;text-overflow:ellipsis}

/* Tesla's older Chromium build can paint a native select popup with a light
   surface even when the page uses `color-scheme: dark`, making inherited text
   effectively disappear. Give both the closed control and every option an
   explicit, high-contrast palette and a car-sized touch target. */
html[data-tesla="true"] .language-control{
  position:relative;
  z-index:2;
  width:100%;
  min-height:58px;
}
html[data-tesla="true"] .language-select{
  display:block;
  width:100%;
  min-height:58px;
  opacity:1;
  visibility:visible;
  color:#f5f8f7;
  background-color:#11191d;
  border-color:rgba(255,255,255,.3);
  color-scheme:dark;
}
html[data-tesla="true"] .language-select option{
  color:#f5f8f7;
  background:#11191d;
}

/* Keep the two driving effects in one vertical control rail. Reserving the
   same rail beside the readout prevents the upper button covering the gear. */
html[data-tesla="true"] .nitro-btn,
html[data-tesla="true"] .horn-btn{
  right:20px;
  width:96px;
  height:74px;
}
html[data-tesla="true"] .nitro-btn{bottom:20px}
html[data-tesla="true"] .horn-btn{bottom:102px}
html[data-tesla="true"] .drive-readout{right:132px}

/* The Tesla browser does not consistently advertise a coarse pointer. Apply
   compact geometry from its marker too, so 1280x720 cannot miss these rules. */
@media (min-width:900px) and (max-height:760px) {
  html[data-tesla="true"] .topbar{top:8px;height:62px}
  html[data-tesla="true"] .topbar .icon-btn,
  html[data-tesla="true"] .account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
  html[data-tesla="true"] .route-ribbon,
  html[data-tesla="true"] .scene-status,
  html[data-tesla="true"] .render-mode-badge{top:82px}
  html[data-tesla="true"] .drive-dynamics{top:146px}
  html[data-tesla="true"] .cinema-title{top:86px}
  html[data-tesla="true"] .world-reel{top:47%;transform:translateY(-42%) scale(.88);transform-origin:left center}
  html[data-tesla="true"] .world-reel button{min-height:54px}
  html[data-tesla="true"] .drive-readout{bottom:96px;min-height:76px;padding-top:8px;padding-bottom:8px}
  html[data-tesla="true"] .control-dock{bottom:14px;height:72px}
  html[data-tesla="true"] .nitro-btn,
  html[data-tesla="true"] .horn-btn{height:70px}
  html[data-tesla="true"] .nitro-btn{bottom:14px}
  html[data-tesla="true"] .horn-btn{bottom:92px}
  html[data-tesla="true"] .horn-control select{bottom:168px}
  html[data-tesla="true"] .panel{padding-top:0;padding-bottom:24px}
  html[data-tesla="true"] .panel-head{padding-top:18px}
  html[data-tesla="true"] .setting-section{padding-top:var(--s4);padding-bottom:var(--s4)}
}

/* The meter follows the active profile's redline; its final band is the
   caution/redline zone. Silent visualization has no fictitious RPM. */
.meter i{background:linear-gradient(90deg,#4ae6c8 0%,var(--accent) 72%,#ffd166 88%,#ff5145 100%)}
.engine-meter.silent{opacity:.35}
.engine-meter.silent .meter i{width:0!important}

/* At the minimum supported browser height, secondary scene information gives
   way before primary sound and drive controls shrink or overlap. */
@media (max-height:620px) {
  html[data-tesla="true"] .cinema-title,
  html[data-tesla="true"] .world-reel,
  html[data-tesla="true"] .scene-status,
  html[data-tesla="true"] .drive-dynamics,
  html[data-tesla="true"] .render-mode-badge,
  html[data-tesla="true"] .turn-card,
  html[data-tesla="true"] .disclaimer{display:none}
  html[data-tesla="true"] .drive-readout{left:16px;right:126px;width:auto;transform:none;bottom:86px;min-height:66px}
  html[data-tesla="true"] .control-dock{left:16px;width:calc(100vw - 142px);transform:none;bottom:10px;height:66px}
  html[data-tesla="true"] .nitro-btn,
  html[data-tesla="true"] .horn-btn{right:14px;width:96px;height:62px}
  html[data-tesla="true"] .nitro-btn{bottom:10px}
  html[data-tesla="true"] .horn-btn{bottom:80px}
}

/* Legacy Model S/X browsers can expose a tall portrait viewport. This is a
   first-class layout, not a rotate-screen placeholder: telemetry, sound and
   both effect controls remain reachable while decorative scene UI collapses. */
@media (orientation:portrait) and (max-width:850px) {
  html[data-tesla="true"] .topbar{top:8px;left:8px;right:8px;height:58px;padding-left:12px;padding-right:12px;grid-template-columns:1fr auto}
  html[data-tesla="true"] .brand small,
  html[data-tesla="true"] .session-pill,
  html[data-tesla="true"] .purchase-cta,
  html[data-tesla="true"] .topbar .icon-btn[aria-label*="full screen"]{display:none}
  html[data-tesla="true"] .top-actions{justify-self:end}
  html[data-tesla="true"] .route-ribbon{top:78px;left:12px;right:12px;min-width:0;width:max-content;max-width:calc(100vw - 24px);transform:none}
  html[data-tesla="true"] .route-copy>small{display:none}
  html[data-tesla="true"] .cinema-title,
  html[data-tesla="true"] .world-reel,
  html[data-tesla="true"] .scene-status,
  html[data-tesla="true"] .drive-dynamics,
  html[data-tesla="true"] .render-mode-badge,
  html[data-tesla="true"] .turn-card,
  html[data-tesla="true"] .disclaimer{display:none}
  html[data-tesla="true"] .vehicle-stage{top:43%;transform:translate(-50%,-50%) scale(.88)}
  html[data-tesla="true"] .drive-readout{left:12px;right:12px;width:auto;bottom:174px;transform:none;grid-template-columns:1fr auto;min-height:76px;padding:11px 14px}
  html[data-tesla="true"] .engine-meter{display:none}
  html[data-tesla="true"] .gear{min-width:104px}
  html[data-tesla="true"] .control-dock{display:grid;left:12px;bottom:12px;width:calc(100vw - 24px);height:70px;transform:none;grid-template-columns:1fr;padding-left:10px;padding-right:10px}
  html[data-tesla="true"] .control-dock .divider,
  html[data-tesla="true"] .destination,
  html[data-tesla="true"] .battery{display:none}
  html[data-tesla="true"] .horn-btn,
  html[data-tesla="true"] .nitro-btn{display:grid;bottom:92px;width:96px;height:66px}
  html[data-tesla="true"] .nitro-btn{right:12px}
  html[data-tesla="true"] .horn-btn{right:116px}
  html[data-tesla="true"] .horn-control select{right:116px;bottom:164px;max-width:calc(100vw - 128px)}
  html[data-tesla="true"] .panel{width:100vw;max-width:none;padding-left:var(--s5);padding-right:var(--s5)}
}

/* Real pairing/hand-off QR: white quiet zone so the car screen scans reliably. */
.pairing-qr.real{grid-template-columns:none;grid-auto-rows:auto;width:260px;max-width:100%;height:260px;background:#fff;border-radius:10px;padding:12px;display:grid}
.pairing-qr.real svg{width:100%;height:100%;display:block}

/* The drive selector shows the current letter; its native menu exposes the other modes. */
.gear.drive-selector { min-width: 76px; }
.gear .compact-drive { display: block; width: 76px; min-width: 76px; min-height: 56px; padding: 8px 14px; border: 1px solid rgba(84,232,207,.58); border-radius: 12px; background: #17302d; color: var(--accent); font-family: inherit; font-size: 20px; font-weight:700; cursor: pointer; }
.gear .compact-drive:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html[data-tesla="true"] .gear .compact-drive { min-height: 60px; }

/* Clear entry points and optional purchases. */
.experience-switch{color:var(--accent,#45d8c4);font-size:13px;text-decoration:none;padding:12px;white-space:nowrap}
.experience-card{display:grid;gap:var(--s3);border:1px solid var(--card-line);border-radius:var(--card-r);padding:var(--card-pad);margin:var(--s4) 0;text-decoration:none;color:inherit;background:#ffffff06}
.experience-card:hover,.experience-card:focus-visible{border-color:#45d8c4;background:#45d8c410}
.experience-card strong{font-size:20px}.experience-card span{color:#b1bac3;line-height:1.5}
.purchase-section-title{font-size:13px;margin:22px 0 12px}.purchase-addons{margin:var(--s5) 0;border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line);padding:var(--s4) 0}.purchase-addons summary{cursor:pointer;font-weight:600;padding:8px 0}.purchase-addons .commerce-copy{margin-top:12px}
.purchase-total{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);font-size:var(--t-ctl);margin:var(--s6) 0}.purchase-total strong{white-space:nowrap}
@media(max-width:600px){.experience-switch{font-size:var(--t-small);padding:var(--s3) var(--s1)}.top-actions>*+*{margin-left:var(--s1)}[dir="rtl"] .top-actions>*+*{margin-left:0;margin-right:var(--s1)}}

@media(max-width:700px){html[data-tesla="true"] .topbar .purchase-cta{display:inline-flex;align-items:center;padding-left:8px;padding-right:8px;font-size:var(--t-small);min-height:var(--ctl-h-min)}.topbar .brand-logo{max-width:72px}.topbar .experience-switch{font-size:var(--t-small);padding-left:4px;padding-right:4px}}

/* Subscription selection and focused settings. */
.panel [hidden]{display:none!important}
.panel .settings-tabs{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);background:#101719;padding:var(--s2) 0;margin-bottom:var(--s3)}
.panel .settings-tabs button{min-height:var(--ctl-h);padding:0 var(--s2);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);color:#b5bdc2;background:var(--ctl-bg);font:inherit;font-size:var(--t-ctl);letter-spacing:0}
.panel .settings-tabs button.active{background:var(--sel-line);border-color:var(--sel-line);color:#15200c;font-weight:var(--w-med)}
.settings-subscription{margin-top:16px}.subscription-summary{padding:20px;border:1px solid #ffffff26;border-radius:16px;background:#ffffff05;margin:18px 0}.subscription-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);font-size:var(--t-title)}.subscription-heading>span{color:#a6b1b8;font-size:13px}.subscription-summary p{color:#a6b1b8;font-size:13px;line-height:1.5}.subscription-summary ul{list-style:none;margin:16px 0;padding:0}.subscription-summary li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--card-line);font-size:var(--t-ctl)}.subscription-summary li small{display:block;font-size:11px;color:#a6b1b8;margin-top:5px}.subscription-summary li b{font-size:11px;color:var(--accent)}.subscription-link{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:var(--ctl-h-min);padding:var(--s4) 0 0;border:0;border-top:1px solid var(--card-line);background:none;color:var(--accent);font-weight:700;cursor:pointer}
.purchase-modal{width:min(650px,100%)}.purchase-modal .commerce-copy{margin-bottom:18px}.subscription-options,.addon-options{border:0;padding:0;margin:var(--s5) 0;min-width:0;display:grid;gap:var(--s3)}.subscription-options legend,.addon-options legend{font-size:var(--t-title);font-weight:var(--w-med);margin-bottom:var(--s4)}.addon-options legend small{font-weight:400;color:#a6b1b8;margin-left:8px}
.subscription-option,.addon-option{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:var(--s4);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);cursor:pointer;min-height:var(--ctl-h-tile)}.subscription-option.selected,.addon-option.selected{border-color:var(--sel-line);background:var(--sel-bg)}.subscription-option input,.addon-option input{width:20px;height:20px;margin:0;accent-color:var(--accent)}.subscription-option strong,.addon-option strong{font-size:15px}.subscription-option small,.addon-option small{display:block;margin-top:5px;font-size:12px;color:#a6b1b8;line-height:1.45}.subscription-option>b,.addon-option>b{font-size:15px;text-align:right;white-space:nowrap}.subscription-option>b small,.addon-option>b small{font-weight:400;font-size:11px}.recommendation{display:block;margin:7px 0;color:var(--accent);font-size:11px;font-style:normal;font-weight:600}.addon-option.included{cursor:default;background:#101719}.addon-option.included>b{font-size:11px;color:#a6b1b8}.subscription-option:focus-within,.addon-option:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.order-summary{border-top:1px solid #ffffff26;padding-top:16px}.order-summary h3{font-size:15px;margin:0 0 14px}.order-summary>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);font-size:var(--t-ctl);margin:var(--s3) 0}.order-summary .order-total{font-size:15px;padding-top:14px;border-top:1px solid #ffffff20}.order-summary p,.purchase-reassurance{font-size:11px;line-height:1.5;color:#a6b1b8}.purchase-footer{position:sticky;bottom:-38px;background:#101719;padding:14px 0 20px;margin-bottom:-20px}.purchase-reassurance{text-align:center;margin-bottom:0}
@media(max-width:600px){.subscription-option,.addon-option{padding:12px;gap:9px;grid-template-columns:20px minmax(0,1fr) auto}.subscription-option strong,.addon-option strong{font-size:13px}.subscription-option small,.addon-option small{font-size:11px}.subscription-option>b,.addon-option>b{font-size:13px}.addon-option.included>b{max-width:68px;white-space:normal}.purchase-footer{bottom:-30px}.panel .settings-tabs button{font-size:11px;padding:10px 8px}}

/* Shared line icons retain visible text and native selection controls. */
.panel .settings-tabs button{display:grid;justify-items:center;align-content:center;gap:var(--s1)}
.panel .experience-entry{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0}
.product-name{display:inline-flex;align-items:center;min-width:0}
.product-name>.icon{margin-right:var(--s3)}
[dir="rtl"] .product-name>.icon{margin-right:0;margin-left:var(--s3)}
.product-name .icon{flex-shrink:0;color:var(--accent)}
.subscription-heading>.product-name{display:inline-flex}
.purchase-reassurance .icon{display:inline-block;vertical-align:middle;margin-right:4px}
@media(max-width:600px){.product-name>.icon{margin-right:var(--s2);width:16px;height:16px}}
.panel .settings-tabs button>span{font:inherit;color:inherit;line-height:1.2}

.demo-driving{position:fixed;z-index:9;left:20px;bottom:20px;display:grid;gap:8px}
.demo-driving button{min-height:48px;padding:10px 16px;border:1px solid #607877;border-radius:14px;background:rgba(8,18,23,.94);color:#eefafa;font-weight:700;cursor:pointer}
.demo-driving button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.demo-touch-controls{display:flex}
.demo-touch-controls>*+*{margin-left:var(--s3)}
.demo-touch-controls button{min-width:64px;touch-action:none;user-select:none;-webkit-user-select:none;display:grid;place-items:center;gap:4px}
.demo-touch-controls span{font-size:20px}.demo-touch-controls small{font-size:11px}
.demo-driving button:active{background:#28524e}.demo-driving button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:760px){.demo-driving{left:12px;bottom:calc(100px + env(safe-area-inset-bottom));gap:var(--s2)}.demo-touch-controls>*+*{margin-left:var(--s2)}.demo-touch-controls button{min-width:58px;padding:var(--s3)}}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .purchase-reassurance .icon{margin-right:0;margin-left:4px}

/* product-polish.css */
/* Driving notices sit above the readout, clear of the gear and sound controls.
   Use normal flow so simultaneous warnings and translated text cannot overlap. */
/* A warning the driver has to read while the vehicle is moving has a 16px
   floor — the same floor every other control on this screen keeps, and the one
   test/e2e/tesla.spec.js asserts. This rule carries !important because it is
   undoing the compact per-screen sizing that the rest of the chrome wants, so
   the floor has to be stated here rather than inherited. */
.drive-notices{position:absolute;z-index:10;left:0;right:0;bottom:calc(100% + 12px);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.drive-notices .drive-message,.drive-notices .stale{position:static;transform:none;width:100%;max-width:560px;min-width:0;margin:0;padding:14px 18px;border:1px solid #b48143;border-radius:12px;background:#241e13;color:#ffe0a8!important;box-shadow:0 6px 24px #0006;font-size:16px!important;font-weight:600;line-height:1.5;letter-spacing:normal!important;text-align:start;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
.drive-notices .stale{border-color:#c67c68;background:#3b211d;color:#ffd3c7!important}
.drive-notices .stale.hidden{display:none}
.drive-notices .drive-message + .stale:not(.hidden){margin-top:8px}
.panel .section-label.has-sound-notice{flex-wrap:wrap}
.panel .section-label small.sound-notice{display:block;flex:0 0 100%;min-width:0;margin-top:10px;padding:12px 14px;border:1px solid #b48143;border-radius:10px;background:#241e13;color:#ffe0a8;font-size:16px;line-height:1.5;letter-spacing:normal;text-align:start;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
.login-notice,.checkout-error{min-width:0;padding:12px 14px;border:1px solid #b48143;border-radius:10px;background:#241e13;color:#ffe0a8;font-size:15px;line-height:1.5;letter-spacing:normal;white-space:normal;overflow-wrap:break-word;overflow-wrap:anywhere}
@media(max-height:620px){.drive-notices{bottom:calc(100% + 8px)}.drive-notices .drive-message,.drive-notices .stale{padding:10px 14px}}

/* Keep speed advice beside its sign, within the existing route ribbon. */
.route-ribbon .speed-sign{flex-shrink:0}
.route-ribbon .route-copy{min-width:0}
.route-ribbon .speed-warning{max-width:250px;margin-top:5px;padding:5px 0 0;border-top:1px solid #b4814366;color:#ffe0a8;font-size:12px;line-height:1.35;text-align:start;overflow-wrap:anywhere}
[dir="rtl"] .route-ribbon .speed-warning{direction:rtl}
.speed-warning strong,.speed-warning span{display:block}
.speed-warning strong{font-size:12px;font-weight:700}
.speed-warning span{margin-top:3px;font-size:11px;color:#d5c8b4}
.route-ribbon .speed-warning.hidden{display:none}
.route-ribbon .speed-warning.over-limit{border-color:#ff988c66;color:#ffb6a4}
.speed-sign.over-limit{animation:overspeed-glow 1.5s ease-in-out infinite}
@keyframes overspeed-glow{50%{box-shadow:0 0 0 5px #ff988c,0 0 24px #e34232}}
html[data-reduced-effects="true"] .speed-sign.over-limit{animation:none}
@media(prefers-reduced-motion:reduce){.speed-sign.over-limit{animation:none}}

/* Reserve a footer for the existing translated entertainment notice, including
   compact and portrait Tesla browsers whose earlier rules hide it. */
html[data-tesla="true"] .disclaimer{display:flex;left:12px;right:12px;bottom:3px;transform:none;justify-content:center;min-height:28px;white-space:normal;overflow-wrap:anywhere;text-align:center;font-size:11px;line-height:1.3;letter-spacing:0;color:#b9c3c7;opacity:1}
html[data-tesla="true"] .control-dock,
html[data-tesla="true"] .drive-readout,
html[data-tesla="true"] .horn-btn,
html[data-tesla="true"] .nitro-btn{margin-bottom:36px}

/* A lightweight finish: solid surfaces, quiet hierarchy, native touch controls. */
:root{--ui-paper:#f1eee7;--ui-muted:#aeb5b7;--ui-stroke:rgba(227,225,214,.14);--ui-raised:#182023;--ui-base:#101719}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}

/* The entry page is immediately usable, before any WebGL or audio is loaded. */
.welcome-page{height:100vh;min-height:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);overflow:auto;background:#101719;color:var(--ui-paper)}
.welcome-visual{position:relative;min-height:640px;overflow:hidden;background:#232b2a}
.welcome-art{position:absolute;width:100%;height:100%;top:0;right:0;bottom:0;left:0;object-fit:cover}
.welcome-visual:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(8,14,15,.65),transparent 65%,rgba(8,14,15,.4));pointer-events:none}
.welcome-brand{position:absolute;top:var(--s6);left:var(--s6);z-index:1;display:flex;align-items:center;min-height:48px}
.welcome-brand{text-decoration:none;color:#f1eee7}
/* The language control, beside Sign in. A <details> disclosure rather than a
   scripted menu: the list is links, so the server resolves the language and
   sets the cookie, and it works before the bundle arrives — which is the
   whole point on a car browser that drops sessions. */
.welcome-language>summary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h-min);min-width:var(--ctl-h-min);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:30px;background:#0d1417cc;color:#dfe6dd;font-size:var(--t-ctl);cursor:pointer;list-style:none}
.welcome-language>summary::-webkit-details-marker{display:none}
.welcome-language>summary>.icon{margin-right:var(--s2)}
[dir=rtl] .welcome-language>summary>.icon{margin-right:0;margin-left:var(--s2)}
.welcome-language[open]>summary,.welcome-language>summary:hover{border-color:#a3e635;color:#c9ee8f}
.welcome-language>ul{position:absolute;top:calc(100% + 6px);right:0;z-index:4;margin:0;padding:var(--s2);max-height:min(60vh,340px);overflow-y:auto;list-style:none;border:1px solid var(--card-line);border-radius:var(--card-r);background:#0d1417f2}
[dir=rtl] .welcome-language>ul{right:auto;left:0}
.welcome-language li{margin:0}
.locale-flag{flex:0 0 auto;border-radius:2px;box-shadow:0 0 0 1px #ffffff26}
.welcome-language li>a>.locale-flag{margin-right:var(--s3)}
[dir=rtl] .welcome-language li>a>.locale-flag{margin-right:0;margin-left:var(--s3)}
.welcome-language>summary>.locale-flag{margin-right:var(--s2)}
[dir=rtl] .welcome-language>summary>.locale-flag{margin-right:0;margin-left:var(--s2)}
.welcome-language li>a{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);border-radius:8px;color:#cfd8ce;text-decoration:none;font-size:var(--t-ctl);white-space:nowrap}
.welcome-language li>a:hover,.welcome-language li>a:focus-visible{background:#24301b;color:#c4ed82}
.welcome-language li>a[aria-current]{color:#a3e635}
.welcome-corner{position:absolute;top:var(--s6);right:var(--s6);z-index:3;display:flex;align-items:center}
.welcome-corner>*+*{margin-left:var(--s4)}
[dir=rtl] .welcome-corner>*+*{margin-left:0;margin-right:var(--s4)}
.welcome-corner>.welcome-signin{position:static;top:auto;right:auto}
.welcome-corner>.welcome-language{position:relative;top:auto;right:auto}
.welcome-signin{position:absolute;top:var(--s6);right:var(--s6);z-index:2;display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border:1px solid rgba(241,238,231,.28);border-radius:999px;background:rgba(16,18,20,.38);color:#f1eee7;font-size:13px;font-weight:600;letter-spacing:0;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.welcome-signin:hover,.welcome-signin:focus-visible{border-color:#a3e635;color:#a3e635}
.welcome-art-lane{animation:welcome-lane 2s linear infinite}
@keyframes welcome-lane{to{stroke-dashoffset:-54}}
@media(prefers-reduced-motion:reduce){.welcome-art-lane{animation:none}}
html[data-reduced-effects="true"] .welcome-art-lane{animation:none}
.welcome-editorial{position:relative;z-index:1;padding:150px 48px 0}
.welcome-editorial>p,.welcome-eyebrow{font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;color:#efab83}
.welcome-editorial h1{font-size:var(--t-display);line-height:26px;letter-spacing:var(--ls-tight);font-weight:var(--w-med);margin:var(--s4) 0}
.welcome-editorial>span{display:block;max-width:290px;font-size:15px;line-height:1.65;color:#d4d4c9}
.welcome-scene-note{position:absolute;z-index:1;bottom:34px;left:48px;font-size:11px;letter-spacing:0;display:flex;align-items:center;color:#ddd7c9}
.status-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#f4a879}
.welcome-content{padding:var(--s7) var(--s7);align-self:center;max-width:640px;width:100%;margin:auto}
.welcome-intro h2{font-size:var(--t-head);line-height:1.18;letter-spacing:var(--ls-tight);font-weight:var(--w-med);margin:var(--s3) 0 var(--s4);max-width:410px}
.welcome-intro>p{color:var(--ui-muted);font-size:var(--t-body);line-height:1.6;margin:0 0 var(--s6)}
.welcome-choices{display:grid;gap:var(--s4)}
.welcome-page .experience-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s4);margin:0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);transition:background .16s,border-color .16s;text-decoration:none}
.welcome-page .experience-card:hover{background:#20292b;border-color:#c38d68}
.entry-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--ctl-r);background:#253033;color:#e3c9b0!important}
.welcome-page .entry-overline{display:block;font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;color:#a4afb0}
.welcome-page .experience-card strong{display:block;font-size:var(--t-head);font-weight:var(--w-med);letter-spacing:var(--ls-tight);margin-top:var(--s1)}
.welcome-page .experience-card p{font-size:var(--t-body);line-height:1.6;color:#b5bec0;margin:var(--s2) 0 var(--s4)}
.welcome-page .entry-action{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-ctl);font-weight:var(--w-med);color:#f4c49d;min-height:var(--s7)}
.welcome-page .drive-entry{border-color:#b57955;background:#282723}
.welcome-page .drive-entry .entry-icon{background:#3d3026;color:#ffbc8c!important}
.welcome-footnote{display:flex;align-items:flex-start;margin:var(--s5) 0 0;color:#acb6b8}
.welcome-footnote .icon{margin-top:3px;color:#c5b19b}
.welcome-footnote p{margin:0;font-size:var(--t-small);line-height:1.5}.welcome-footnote p span{color:#808e92}

/* A single restrained animation, with no pretend progress percentage. */
.launch-loader.refined-loader{position:absolute;z-index:90;background:#101719;opacity:1;transition:opacity .3s ease,visibility 0s;display:flex;align-items:center;justify-content:center}
.launch-loader.refined-loader.ready{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
.launch-wordmark{position:absolute;top:36px;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between}
.launch-wordmark svg{width:96px;height:auto;color:#f5f7f8}.launch-wordmark>span{font-size:var(--t-micro,10px);letter-spacing:.06em;color:#99a5a8}
.launch-center{width:560px;max-width:calc(100% - 48px);text-align:center}
.launch-emblem{position:relative;width:144px;height:144px;margin:0 auto 26px;color:#f5b687}
.launch-emblem>svg{width:100%;height:100%}.launch-orbit{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid transparent;border-top-color:#f5b687;border-radius:50%;animation:launch-orbit 2.4s linear infinite}
.launch-eyebrow{font-size:var(--t-micro,10px);color:#af947e;font-weight:700;letter-spacing:.06em}.launch-center h1{font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:#f1eee7;margin:18px 0 12px}
.launch-description{font-size:13px;color:#aeb5b7;line-height:1.6}.launch-progress{height:3px;width:200px;margin:32px auto;background:#2b3437;border-radius:4px;overflow:hidden}.launch-progress>span{display:block;height:100%;width:65%;background:#efad7a;border-radius:4px;animation:launch-sweep 1.8s ease-in-out infinite}
.launch-note{position:absolute;bottom:30px;margin:0;display:flex;align-items:center;color:#89969a;font-size:12px}
.launch-recovery{display:flex;flex-direction:column;align-items:center;margin-top:24px}.launch-recovery button{display:flex;align-items:center;min-height:52px;padding:0 22px;border:0;border-radius:12px;background:#efad7a;color:#192022;font-weight:700}.launch-recovery a{color:#b4bdbd;font-size:var(--t-ctl);min-height:var(--ctl-h-min);display:flex;align-items:center}
@keyframes launch-orbit{to{transform:rotate(360deg)}}
@keyframes launch-sweep{0%{transform:translateX(-110%)}100%{transform:translateX(160%)}}
.launch-loader.ready *{animation:none!important}

/* Consistent cockpit, settings and commerce surfaces. */
html[data-tesla="true"] .topbar{border:1px solid var(--ui-stroke);border-radius:18px;background:#101719;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.topbar .purchase-cta{background:#edaa7d;color:#1b211f;border-color:#edaa7d;font-weight:700}
.topbar .icon-btn,.account-btn{background:#1a2326;border:1px solid #344044;color:#dce1dd}
.experience-switch{color:#c4cdcb}.session-pill{border-color:#39413e;background:#1b2424}.session-pill em{color:#acb8b6}
.route-ribbon,.control-dock,.drive-readout,.turn-card{border-color:var(--ui-stroke);box-shadow:0 10px 28px rgba(0,0,0,.15)}
.control-dock{background:rgba(16,23,25,.96)}.control-dock .sound-btn strong{letter-spacing:0}.control-dock small{color:#adb8b9;letter-spacing:.06em}
.route-copy>.route-road{font-weight:600}.drive-readout .speed>strong{font-weight:600;letter-spacing:-.02em}
html[data-tesla="true"] .panel{background:#101719;padding-top:26px;box-shadow:-20px 0 48px rgba(0,0,0,.25)}
html[data-tesla="true"] .panel-head,html[data-tesla="true"] .panel .settings-tabs{background:#101719}
.panel-head{border-bottom:1px solid var(--card-line);padding-bottom:var(--s2)}.panel-head h1{font-weight:600;letter-spacing:-.02em}.panel-head p{color:#adb8ba;font-size:13px;letter-spacing:0}
.panel .settings-tabs{gap:var(--s2);padding:var(--s2) 0}.panel .settings-tabs button{border-color:var(--ctl-line);background:var(--ctl-bg);color:#b9c2c3;border-radius:var(--ctl-r);min-height:var(--ctl-h)}
.panel .settings-tabs button.active{background:#e7ae84;border-color:#e7ae84;color:#192122}
/* The rule between sections is separation enough: no 24 px margin on top of it. */
.panel .setting-section{border-bottom:1px solid var(--card-line);padding-bottom:var(--s5);margin-bottom:0}
.panel .section-label{font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:#d5b59a}.panel .section-label small{color:#a8b4b7;font-size:11px;letter-spacing:0}
.panel .profile,.panel .environments button,.panel .choice-grid button,.panel .drive-side button,.mix-control,.country-list details,.subscription-summary{background:var(--card-bg);border-color:var(--card-line);border-radius:var(--card-r)}
.panel .profile small,.panel .environments small,.panel .setting-hint{color:#aab6b8;letter-spacing:0;line-height:1.5}
.panel .profile.active{background:var(--sel-bg);border-color:var(--sel-line)}.panel .profile-orb{box-shadow:none}.panel .profile-group h3{color:#aab6b8;letter-spacing:var(--ls-caps);font-size:var(--t-micro)}
html[data-tesla="true"] .commerce-layer{background:rgba(4,9,11,.8)}
.commerce-modal{background:var(--card-bg);border-color:var(--card-line);border-radius:var(--card-r);box-shadow:var(--dialog-shadow)}
.commerce-modal h2{font-weight:var(--w-med);letter-spacing:var(--ls-tight);line-height:20px;padding-right:var(--s7)}[dir="rtl"] .commerce-modal h2{padding-right:0;padding-left:var(--s7)}.commerce-copy{color:#b0bdc0;font-size:13px}.commerce-kicker{color:#d5b59a}
.commerce-close{background:var(--ctl-bg);border-color:var(--ctl-line)}.checkout-btn,.login-form button[type=submit]{background:#efad7a;color:#182020;min-height:var(--ctl-h-lg);letter-spacing:0}
.subscription-option,.addon-option{background:var(--card-bg);border-color:var(--card-line)}.subscription-option.selected,.addon-option.selected{background:var(--sel-bg);border-color:var(--sel-line)}.recommendation,.product-name .icon{color:#e9b58b}.addon-option.included{background:#141e21}.subscription-option small,.addon-option small{color:#b0bdc0}
.purchase-footer{background:#10191c;border-top:1px solid #303d40}.order-summary p,.purchase-reassurance{color:#a8b6b9}.billing-toggle{background:#0c1416;border:1px solid #303c40}.billing-toggle button.active{background:#263134;color:#f0eee8}
.setup-gate{background:var(--scrim)}.setup-gate>section{background:var(--card-bg);border-color:var(--card-line);box-shadow:var(--dialog-shadow)}.setup-brand span{color:#e3b896;background:#2a2922;border-color:#69513e}

/* Old Tesla Chromium: no backdrop blur, mask effects or layout animation. */
html[data-tesla="true"] .route-ribbon,html[data-tesla="true"] .control-dock,html[data-tesla="true"] .drive-readout,html[data-tesla="true"] .turn-card,html[data-tesla="true"] .setup-gate{backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-tesla="true"] .cinema-grain,html[data-tesla="true"] .ambient-orb{display:none}
html[data-tesla="true"] .welcome-page{height:var(--app-height,100vh)}
html[data-tesla="true"] .welcome-content{padding-top:var(--s6);padding-bottom:var(--s6)}
html[data-tesla="true"] .welcome-page a,html[data-tesla="true"] .text-action{min-height:48px}
@media(min-width:901px) and (max-height:720px){.welcome-visual{min-height:600px}.welcome-content{padding:24px 36px}.welcome-editorial{padding-top:130px}.welcome-editorial h1{font-size:20px}.welcome-intro h2{font-size:20px}.welcome-intro>p{margin-bottom:20px}.welcome-page .experience-card{padding:18px}.welcome-footnote{margin-top:18px}}
@media(max-width:900px){.welcome-content{padding:36px 28px}.welcome-editorial{padding:140px 30px 0}.welcome-editorial h1{font-size:20px}.welcome-brand{left:30px}.welcome-corner{right:30px}.welcome-scene-note{left:30px}.welcome-intro h2{font-size:20px}.welcome-page .experience-card{padding:20px;gap:12px;grid-template-columns:40px minmax(0,1fr)}.entry-icon{width:40px;height:40px}.welcome-page .experience-card strong{font-size:20px}}
@media(max-width:640px){.welcome-page{display:block}.welcome-visual{min-height:300px;height:300px}.welcome-art{object-position:center 45%;height:540px;top:-120px}.welcome-editorial{padding:100px 26px 0}.welcome-editorial h1{font-size:20px;margin:12px 0}.welcome-editorial>p{font-size:11px}.welcome-brand{top:20px;left:26px}.welcome-brand svg{width:124px}.welcome-corner{top:var(--s4);right:var(--s4)}.welcome-signin{min-height:var(--ctl-h-min);padding:0 var(--s4);font-size:var(--t-ctl)}.welcome-content,html[data-tesla="true"] .welcome-content{padding:28px 22px 36px}.welcome-intro h2{font-size:20px;max-width:300px;margin:12px 0}.welcome-eyebrow{font-size:11px}.welcome-page .experience-card{border-radius:var(--card-r);padding:var(--card-pad)}.welcome-footnote{margin-top:22px}.launch-wordmark{top:24px;left:24px;right:24px}.launch-center h1{font-size:20px}.launch-emblem{width:116px;height:116px}.launch-note{font-size:11px;bottom:24px}.commerce-modal{border-radius:var(--card-r)}.panel .settings-tabs button{font-size:var(--t-small);padding-left:var(--s2);padding-right:var(--s2)}.panel .section-label{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.launch-orbit,.launch-progress>span{animation:none}.launch-progress>span{width:100%;opacity:.6}.refined-loader,.refined-loader.ready,.welcome-page .experience-card{transition:none!important}.commerce-layer,.commerce-modal{animation:none}}
html[data-tesla="true"] .panel .settings-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2)}
html[data-tesla="true"] .panel .settings-tabs button{padding-left:var(--s1);padding-right:var(--s1)}
@media(max-width:640px){html[data-tesla="true"] .panel .settings-tabs button{font-size:var(--t-small)}}

.launch-wordmark svg{display:block}
/* The loader uses the supplied DRIWE W path, drawn in the brand color. */
.launch-emblem.brand-loader{width:148px;height:auto;margin-bottom:28px;color:#a3e635}
.brand-loader svg{display:block;width:148px;height:96px;overflow:visible}
.brand-loader path{stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.logo-trace-base{opacity:.13}.logo-trace{stroke-dasharray:100 100;animation:brand-draw 2.6s ease-in-out infinite}
.loading-brand-name{display:block;margin-top:20px;color:#e9eee6;font-size:15px;font-weight:700;letter-spacing:.06em;padding-left:.3em}
.brand-loader.stopped .logo-trace{animation:none;stroke-dashoffset:0}
@keyframes brand-draw{0%,12%{stroke-dashoffset:100;opacity:.5}58%,78%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-100;opacity:.5}}
@media(prefers-reduced-motion:reduce){.brand-loader .logo-trace{animation:none;stroke-dashoffset:0}}
/* Scrollable product information, sharing the checkout price catalog. */
.welcome-page{display:block;scroll-behavior:smooth}
.welcome-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:var(--app-height,100vh)}
/* The short-screen treatment of the hero lives in public/app-density.css,
   with the rest of the responsive layer. It used to live here and it deleted
   the sub-headline, the intro paragraph and all three card descriptions below
   760 px of height — which is the car. See that sheet for why they stayed. */
.welcome-intro-nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.welcome-intro-nav>a{display:inline-flex;align-items:center;font-size:var(--t-ctl);color:#e4b58e;text-decoration:none;min-height:var(--ctl-h-min)}
.home-details{max-width:1180px;padding:var(--s7) var(--s7);margin:auto;scroll-margin-top:var(--s6)}
.home-section-heading{max-width:640px;margin-bottom:30px}.home-section-heading h2{font-size:20px;font-weight:600;line-height:1.16;letter-spacing:-.02em;margin:14px 0}.home-section-heading p,.home-features p{font-size:13px;line-height:1.7;color:#aeb9ba}
.home-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.home-features article>.icon{color:#dfad85}.home-features h3{font-size:15px;font-weight:600;margin:18px 0 8px}.home-features p{margin:0}
.home-pricing{border-top:1px solid #303a3b}.home-billing{max-width:340px;margin-bottom:28px}.home-billing button{min-height:48px}
.home-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px}.home-plan{display:flex;flex-direction:column;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.home-plan.recommended{border-color:#bd8b63;background:#242721}.home-plan>.icon,.home-plan-top>.icon{color:#e5b48b}.home-plan-top{display:flex;justify-content:space-between;align-items:center}.home-plan-top>span{font-size:11px;color:#e5b48b;padding:7px 10px;border:1px solid #65543c;border-radius:30px}.home-plan h3{font-size:20px;margin:22px 0 14px;font-weight:600}.home-price{font-size:var(--n-lg);letter-spacing:var(--ls-tight);font-weight:var(--w-body)}.home-price span{font-size:12px;font-weight:400;letter-spacing:0;color:#aeb9ba}.home-plan p{font-size:13px;line-height:1.6;color:#b3bdbd;min-height:62px}.home-plan ul{padding:0;margin:12px 0 26px;list-style:none;flex:1}.home-plan li{position:relative;padding:8px 0 8px 17px;font-size:12px;line-height:1.5;color:#c6cfca}.home-plan li:before{content:'✓';position:absolute;left:0;color:#d8b895;font-size:11px}
.home-plan-link{display:flex;align-items:center;justify-content:space-between;min-height:var(--ctl-h);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);color:#e6c3a4;text-decoration:none;font-size:var(--t-ctl);font-weight:var(--w-med)}.recommended .home-plan-link,.home-final-cta .home-plan-link{background:#e6ac7f;color:#172022;border-color:#e6ac7f}.home-plan-link:hover{border-color:#e6ac7f;background:#2e352e}.recommended .home-plan-link:hover,.home-final-cta .home-plan-link:hover{background:#f1be96;color:#172022}
.home-billing-note{margin:20px 0 44px;color:#a4afb2;font-size:12px;line-height:1.6}.home-addons-heading h3{font-size:20px;font-weight:600;margin:0 0 10px}.home-addons-heading p{font-size:13px;color:#aeb9ba;margin-bottom:24px}.home-addon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.home-addon{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:start;gap:var(--s4);padding:var(--card-pad);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);color:inherit;text-decoration:none}.home-addon>.icon{color:#dcb18d;margin-top:2px}.home-addon strong{font-size:13px}.home-addon p{color:#aeb9ba;font-size:12px;line-height:1.6;margin:8px 0 12px}.home-addon span{color:#ecc19b;font-size:12px}.home-addon:hover{border-color:#ba8f69}
.home-faq{border-top:1px solid #303a3b}.home-faq details{border-bottom:1px solid #303a3b;padding:6px 0}.home-faq summary{display:flex;align-items:center;justify-content:space-between;list-style:none}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary>.icon{flex:0 0 auto;margin-left:var(--s4);color:#9fca63;transition:transform .16s}
[dir=rtl] .home-faq summary>.icon{margin-left:0;margin-right:var(--s4);transform:rotate(180deg)}
.home-faq details[open]>summary>.icon{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.home-faq summary>.icon{transition:none}}
.home-faq summary{padding:var(--s4) var(--s2);font-size:var(--t-title);line-height:1.5;min-height:var(--ctl-h-min);cursor:pointer;color:#d6ded8}.home-faq details p{max-width:700px;margin:0 6px 20px;color:#aeb9ba;font-size:13px;line-height:1.7}.home-final-cta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s7);padding:var(--s6);background:var(--card-bg);border-radius:var(--card-r)}.home-final-cta h3{font-weight:600;font-size:20px;margin:0 0 10px}.home-final-cta p{color:#aeb9ba;font-size:13px;margin:0}.home-final-cta>a{min-width:180px}
.home-footer{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:28px 48px 40px;color:#a2adb0;font-size:11px}.home-footer>span{font-weight:700;letter-spacing:.06em;color:#dce4db}.home-footer a{color:#e2b48e;display:flex;align-items:center;min-height:48px}
@media(max-width:900px){.home-details{padding:48px 28px}.home-plan{padding:20px}.home-price{font-size:20px}.home-plan-grid{gap:12px}.home-section-heading h2{font-size:20px}}
@media(max-width:640px){.welcome-hero{display:block;min-height:0}.home-details{padding:40px 22px}.home-plan-grid,.home-features,.home-addon-grid{grid-template-columns:1fr}.home-features{gap:26px}.home-plan p{min-height:0}.home-final-cta{align-items:stretch;flex-direction:column;padding:22px}.home-footer{padding:20px 22px;flex-wrap:wrap}.home-footer p{order:3;width:100%;margin:0 0 14px}.home-section-heading h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.welcome-page{scroll-behavior:auto}}

/* Homepage follows the unchanged DRIWE logo: graphite, white and lime. */
.welcome-page{--accent:#a3e635;--ui-paper:#f4f5f2;--ui-muted:#a9b0a8;background:#101214;color:#f4f5f2}
.welcome-brand{top:30px;left:34px}
.welcome-corner{top:30px;right:34px}
.welcome-brand svg{display:block;width:150px;height:auto}
.home-footer-brand img{display:block;width:142px;height:auto;filter:none;mix-blend-mode:normal}
.home-footer-brand{text-decoration:none}
.welcome-visual{background:#101214}
.welcome-visual:after{background:linear-gradient(180deg,rgba(16,18,20,.8),transparent 65%,rgba(16,18,20,.35))}
.welcome-page .welcome-eyebrow,.welcome-page .welcome-editorial>p,.welcome-page .welcome-intro-nav>a,.welcome-page .entry-action,.welcome-page .welcome-footnote .icon,.welcome-page .home-features article>.icon,.welcome-page .home-plan>.icon,.welcome-page .home-plan-top>.icon,.welcome-page .home-addon>.icon,.welcome-page .home-addon span,.welcome-page .home-footer a{color:#a3e635}
.welcome-page .welcome-editorial>span,.welcome-page .welcome-scene-note{color:#d5ded0}
.welcome-page .status-dot{background:#a3e635}
.welcome-page .experience-card,.welcome-page .home-plan,.welcome-page .home-addon{background:#191e1c;border-color:#354033}
.welcome-page .entry-icon{background:#283222;color:#c8ef94!important}
.welcome-page .drive-entry,.welcome-page .home-plan.recommended{background:#20291b;border-color:#759f3d}
.welcome-page .drive-entry .entry-icon{background:#334323;color:#a3e635!important}
.welcome-page .experience-card:hover,.welcome-page .home-addon:hover{background:#242d20;border-color:#a3e635}
.welcome-page .home-plan-top>span{background:#2d3b22;color:#c8ef94;border-color:#566d38}
.welcome-page .home-plan li:before{color:#a3e635}
.welcome-page .home-plan-link{color:#d3edb4;border-color:#586b43}
.welcome-page .recommended .home-plan-link,.welcome-page .home-final-cta .home-plan-link{background:#a3e635;border-color:#a3e635;color:#15200c}
.welcome-page .home-plan-link:hover{background:#2b3922;border-color:#a3e635}
.welcome-page .recommended .home-plan-link:hover,.welcome-page .home-final-cta .home-plan-link:hover{background:#bbf367;color:#15200c}
.welcome-page .home-final-cta{background:#1e281b}
.welcome-page .home-billing{background:#151a15;border-color:#354033}
.welcome-page .home-billing button.active{background:#2d3b23;color:#f4f5f2}
.welcome-page .home-billing b{color:#d3f5a7;background:#3b5029}
.welcome-page .home-pricing,.welcome-page .home-faq,.welcome-page .home-faq details{border-color:#303a2d}
.welcome-page a:focus-visible,.welcome-page button:focus-visible,.welcome-page summary:focus-visible{outline-color:#a3e635}
html[data-tesla="true"] .welcome-page a:focus{outline-color:#a3e635}
@media(max-width:900px){.welcome-brand{left:16px}.welcome-corner{right:16px}}
@media(max-width:640px){.welcome-brand{top:14px;left:12px}.welcome-brand svg{width:124px}.welcome-corner{top:14px;right:12px}}

/* Peraly company footer, with the original Driwe brand artwork. */
/* The invitation to follow: its own row, so it reads as an invitation rather
   than a fifth column of links. One target, comfortably over the touch floor. */
.footer-social{display:flex;align-items:center;margin:0 0 var(--s5);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:inherit;text-decoration:none;min-height:var(--ctl-h-min)}
.footer-social:hover,.footer-social:focus-visible{border-color:#a3e635}
.footer-social>.icon:first-child{flex:0 0 auto;color:#a3e635}
.footer-social>span{flex:1 1 auto;min-width:0;margin:0 var(--s4)}
.footer-social strong{display:block;font-size:var(--t-ctl);font-weight:var(--w-med);color:#e8efe4}
.footer-social small{display:block;margin-top:2px;font-size:var(--t-small);line-height:1.5;color:#a5b0a3}
.footer-social>.icon:last-child{flex:0 0 auto;color:#a3e635}
.site-footer{max-width:1180px;margin:auto;padding:var(--s6) var(--s7) var(--s5);border-top:1px solid var(--card-line);color:#acb4aa}
.footer-navigation{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:var(--s5);align-items:start;padding-bottom:var(--s5)}
.footer-original-logo{display:block;width:120px}.footer-original-logo svg{display:block;width:100%;height:auto}
.footer-navigation nav{display:flex;flex-direction:column;align-items:flex-start}.footer-navigation h3{font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#f4f5f2;margin:0 0 var(--s1)}
.footer-navigation nav>a,.footer-link-pending,.footer-navigation nav>button{display:flex;align-items:center;min-height:var(--ctl-h-min);padding:0;font-size:var(--t-ctl);line-height:1.35;text-align:start;letter-spacing:0;color:#acb4aa;text-decoration:none;background:none;border:0}
.footer-navigation nav>a:hover,.footer-navigation nav>button:hover{color:#a3e635}.footer-link-pending{cursor:default}
.footer-company-details{display:flex;justify-content:space-between;border-top:1px solid var(--card-line);padding-top:var(--s4)}.footer-company-details p{font-size:var(--t-small);line-height:1.45;margin:0}.footer-trademark-notice{max-width:420px}
.cookie-settings-dialog{width:480px;max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);overflow:auto;padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#f4f5f2;box-shadow:var(--dialog-shadow)}.cookie-settings-dialog::backdrop{background:var(--scrim)}.cookie-settings-dialog h2{font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight);margin:0 0 var(--s4);font-weight:var(--w-med)}.cookie-settings-dialog h3{font-size:13px;margin:0}.cookie-settings-dialog p{font-size:13px;line-height:1.7;color:#adb8a8}.cookie-settings-dialog section{border-top:1px solid var(--card-line);padding:var(--s4) 0 var(--s1)}.cookie-category{display:flex;align-items:center;justify-content:space-between}.cookie-category span{font-size:11px;color:#b7e879}.cookie-settings-dialog form>button{margin-top:var(--s4);min-height:var(--ctl-h-lg);width:100%;border:0;border-radius:var(--ctl-r);background:#a3e635;color:#15200c;font-weight:700}
@media(max-height:760px){.cookie-settings-dialog{padding:var(--s5)}}
@media(max-width:700px){.site-footer{padding:var(--s5)}.footer-navigation{grid-template-columns:1fr 1fr;gap:16px 26px}.footer-original-logo{grid-column:1/-1;width:156px}.footer-navigation nav:last-child{grid-column:1/-1}.footer-company-details{display:grid;gap:var(--s4)}.footer-desktop-break{display:none}}
/* Car viewport support applies to every customer-facing page and dialog. */
html[data-tesla="true"] .welcome-page{height:var(--app-height,100vh);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html[data-tesla="true"] .welcome-hero{min-height:var(--app-height,100vh)}
html[data-tesla="true"] .home-billing button,html[data-tesla="true"] .home-plan-link,html[data-tesla="true"] .home-faq summary{min-height:var(--ctl-h-lg)}
html[data-tesla="true"] .commerce-layer{padding:14px;box-sizing:border-box;overflow:hidden}
html[data-tesla="true"] .commerce-modal{width:560px;max-width:100%;max-height:calc(var(--app-height,100vh) - 28px);overflow-x:hidden;overflow-y:auto;scroll-padding-top:var(--s7);scroll-padding-bottom:110px}
html[data-tesla="true"] .commerce-modal.purchase-modal{width:650px}
html[data-tesla="true"] .commerce-close{width:48px;height:48px;min-width:48px;min-height:48px}
html[data-tesla="true"] .login-form input{font-size:15px;min-height:56px}
html[data-tesla="true"] .subscription-option,html[data-tesla="true"] .addon-option{min-height:76px}
html[data-tesla="true"] .subscription-option input,html[data-tesla="true"] .addon-option input{width:22px;height:22px}
html[data-tesla="true"] .purchase-footer{padding-top:12px}
html[data-tesla="true"] .panel{height:var(--app-height,100vh);overflow-x:hidden;overflow-y:auto;box-sizing:border-box;scroll-padding-bottom:32px}
html[data-tesla="true"] .cookie-settings-dialog{box-sizing:border-box;width:520px;max-width:calc(100vw - 32px);max-height:calc(var(--app-height,100vh) - 32px);overflow:auto}
@media(max-height:650px) and (min-width:901px){html[data-tesla="true"] .welcome-visual{min-height:var(--app-height,100vh)}html[data-tesla="true"] .welcome-content{padding:24px 28px}.welcome-editorial{padding-top:120px}.welcome-editorial h1{font-size:20px}.welcome-intro h2{font-size:20px}.welcome-page .experience-card{padding:16px}.welcome-page .experience-card p{margin:8px 0 12px}.welcome-footnote{margin-top:16px}html[data-tesla="true"] .commerce-modal{padding:24px}html[data-tesla="true"] .purchase-footer{bottom:-24px}html[data-tesla="true"] .launch-emblem.brand-loader{width:112px;margin-bottom:16px}.brand-loader svg{max-width:100%}.launch-center h1{font-size:20px}.launch-wordmark{top:20px}.launch-note{bottom:18px}}
@media(orientation:portrait) and (max-width:900px){html[data-tesla="true"] .welcome-hero{display:block;min-height:0}html[data-tesla="true"] .welcome-visual{height:300px;min-height:300px}html[data-tesla="true"] .welcome-editorial{padding:104px 30px 0}html[data-tesla="true"] .welcome-editorial h1{font-size:20px;margin:14px 0}html[data-tesla="true"] .welcome-brand{top:20px;left:16px}html[data-tesla="true"] .welcome-content{max-width:680px;padding:32px 28px}html[data-tesla="true"] .home-plan-grid{grid-template-columns:1fr}html[data-tesla="true"] .home-plan p{min-height:0}html[data-tesla="true"] .footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-tesla="true"] .footer-original-logo{grid-column:1/-1}html[data-tesla="true"] .panel{width:100%;max-width:none;padding-left:var(--s5);padding-right:var(--s5)}}
@media(max-width:600px){html[data-tesla="true"] .welcome-content{padding:28px 22px}html[data-tesla="true"] .footer-navigation{gap:16px}html[data-tesla="true"] .home-addon-grid{grid-template-columns:1fr}}
html[data-tesla="true"] .commerce-layer{grid-template-columns:minmax(0,1fr)}
html[data-tesla="true"] .commerce-modal{width:calc(100vw - 28px);max-width:560px;min-width:0;box-sizing:border-box}
html[data-tesla="true"] .commerce-modal.purchase-modal{width:calc(100vw - 28px);max-width:650px}
/* Readable company and policy pages across Tesla landscape and portrait views. */
.information-page{height:var(--app-height,100vh);overflow:auto;background:#101214;color:#f4f5f2}
.information-header{max-width:1180px;display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s7);margin:auto;border-bottom:1px solid var(--card-line)}
.information-header svg{display:block;width:140px;height:auto}.information-header>a:last-child{display:flex;align-items:center;min-height:52px;color:#b9e986;font-size:13px;text-decoration:none}
.information-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--s7);max-width:1180px;padding:var(--s7);margin:auto}
.information-sidebar{align-self:start;position:sticky;top:24px}.information-sidebar>span{font-size:11px;letter-spacing:.06em;color:#a6b09f;text-transform:uppercase}.information-sidebar nav{display:grid;gap:4px;margin:16px 0 24px}.information-sidebar nav>a,.information-support{display:flex;align-items:center;min-height:var(--ctl-h-lg);padding:var(--row-pad);border-radius:var(--ctl-r);color:#b5bfb0;text-decoration:none;font-size:13px;line-height:1.5}.information-sidebar nav>a[aria-current=page]{background:var(--sel-bg);color:#d4f5b0}.information-support{justify-content:space-between;border-top:1px solid var(--card-line);border-radius:0;padding-left:0;padding-right:0;color:#a3e635}
.information-article{max-width:760px;min-width:0;user-select:text;-webkit-user-select:text}.information-article h1{font-size:var(--t-display);line-height:1.15;letter-spacing:var(--ls-tight);font-weight:var(--w-med);margin:var(--s4) 0}.information-intro{font-size:15px!important;color:#b9c4b2!important}.information-article .policy-revision{font-size:12px;color:#8f9e86;margin:20px 0 30px}.information-article p{font-size:15px;line-height:1.85;color:#bcc5b8;margin:14px 0;overflow-wrap:break-word}.information-article a{color:#b8ec80;text-underline-offset:4px}.information-article section{padding:var(--s6) 0;border-top:1px solid var(--card-line);scroll-margin-top:var(--s7)}.information-article h2{font-size:20px;line-height:1.4;font-weight:600;margin:0 0 16px}.information-contents{display:grid;gap:var(--s1);margin:var(--s6) 0;padding:var(--card-pad);background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r)}.information-contents a{display:flex;align-items:center;min-height:48px;font-size:13px;line-height:1.5;text-decoration:none}.policy-related{display:flex;flex-wrap:wrap;padding:24px 0;border-top:1px solid #303a2d}.policy-related a{display:flex;align-items:center;min-height:48px;font-size:13px}.purchase-policies{font-size:11px;line-height:1.8;color:#aeb9ba;margin-top:20px}.purchase-policies a{color:#bde791;text-underline-offset:3px}
@media(max-width:900px){.information-header{padding:20px 28px}.information-layout{padding:32px 28px;gap:28px;grid-template-columns:190px minmax(0,1fr)}.information-article h1{font-size:20px}}
@media(orientation:portrait) and (max-width:900px){.information-layout{display:block}.information-sidebar{position:static;margin-bottom:30px}.information-sidebar nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.information-sidebar nav>a{border:1px solid #303a2d}.information-support{display:none}.information-article{max-width:none}}
@media(max-width:600px){.information-header{padding:var(--s4) var(--s5)}.information-header svg{width:110px}.information-header>a:last-child{font-size:12px}.information-layout{padding:28px 22px}.information-article h1{font-size:20px}.information-article h2{font-size:20px}.information-article p{font-size:15px}.information-contents{padding:14px}}

/* Clear product disclosures without a blocking setup step. */
.home-subscription-benefits{display:flex;align-items:flex-start;padding:24px;margin:28px 0;border:1px solid #39432e;border-radius:16px;background:#192017;color:#c4ed82}
.home-subscription-benefits>svg{flex-shrink:0}.home-subscription-benefits h3{margin:0 0 8px;color:#f0f2eb;font-size:20px}
.home-subscription-benefits p,.home-data-note{margin:0;color:#b3b8b0;font-size:15px;line-height:1.65}.home-data-note{margin-top:20px;max-width:960px}
.purchase-details{margin:18px 0;color:#bcc4c8;font-size:13px;line-height:1.65}.purchase-details summary{min-height:48px;display:list-item;align-content:center;cursor:pointer;color:#e4ebde}.purchase-details p{margin:8px 0 16px}.subscription-summary a{color:#c4ed82}
.welcome-footnote p{line-height:1.55}.welcome-footnote p span{display:inline-block;max-width:480px}

/* Homepage feature catalog and setup guide; static content keeps entry light. */
.home-section-nav{display:flex;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:20px 48px;border-bottom:1px solid #2b3228}
.home-section-nav a>.icon{margin-right:var(--s2);color:#9fca63}
[dir=rtl] .home-section-nav a>.icon{margin-right:0;margin-left:var(--s2)}
.home-section-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border:1px solid #343d2d;border-radius:24px;color:#d6ddce;text-decoration:none;font-size:13px}
.home-section-nav a:hover,.home-section-nav a:focus-visible{background:#24301b;color:#c4ed82}
.home-feature-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-feature-catalog article{display:flex;flex-direction:column;min-width:0;padding:26px;border:1px solid #30362e;border-radius:18px;background:#171b18}
.home-feature-catalog .icon{color:#a3e635}.home-feature-catalog h3,.home-steps h3{font-size:20px;line-height:1.3;margin:20px 0 10px;font-weight:600}
.home-feature-catalog p,.home-steps p{color:#b3b8b0;font-size:15px;line-height:1.7;margin:0 0 22px}
.home-feature-availability{margin-top:auto;border-top:1px solid #30362e;padding-top:16px;font-size:13px;line-height:1.6;color:#c4d4b3}
.home-feature-actions{display:flex;flex-wrap:wrap;align-items:center;margin-top:24px}.home-feature-actions>a{display:inline-flex;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none}.home-feature-actions .home-plan-link{width:auto;padding:12px 20px}
.home-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0}.home-steps li{min-width:0;border-top:1px solid #3e4c32;padding-top:22px}.home-step-number{font-size:20px;letter-spacing:-.02em;color:#a3e635}.home-steps a{display:inline-flex;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none}.home-step-note{display:block;color:#899480;font-size:13px;line-height:1.6;padding:12px 0}
@media(max-width:1000px){.home-feature-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.home-section-nav{padding:20px 28px}}
@media(max-width:640px){.home-feature-catalog,.home-steps{grid-template-columns:1fr}.home-feature-catalog article{padding:22px}.home-section-nav{padding:16px 22px}.home-section-nav a{padding:0 14px}}

/* Pricing: full billed amounts first, then verifiable annual savings. */
.home-plan-saving{display:flex;flex-direction:column;margin:16px 0 4px;padding:14px 0;border-top:1px solid #394332;border-bottom:1px solid #394332;font-size:13px;line-height:1.55;color:#b8c2af}
.home-plan-saving strong{align-self:flex-start;color:#c5f28b;font-size:15px}.home-plan-saving.monthly{min-height:96px;justify-content:center}
.home-plan-common{display:flex;align-items:flex-start;margin-top:24px;color:#b8c7aa}.home-plan-common>.icon{flex-shrink:0;margin-top:3px}.home-plan-common p{margin:0;font-size:13px;line-height:1.7}
.home-billing-note a{color:#c4ed82;text-underline-offset:3px}.home-addon-saving{display:block;margin-top:9px;color:#c4ed82;font-size:12px;line-height:1.6}
.home-plan-top{align-items:flex-start}.home-plan-top>.icon{flex-shrink:0}.home-plan-top>span{line-height:1.5;text-align:center}.home-plan li{font-size:13px}.home-plan p{font-size:13px}

.purchase-inclusions{display:flex;align-items:flex-start;margin:20px 0;padding:18px;border:1px solid #526c38;border-radius:14px;background:#1d2818;color:#c4ed82}.purchase-inclusions>.icon{flex-shrink:0}.purchase-inclusions strong{font-size:15px}.purchase-inclusions p{font-size:13px;line-height:1.65;color:#c0cbb6;margin:8px 0 0}.purchase-inclusions .subscription-link{min-height:48px}.order-summary .order-covered{color:#c4ed82}
/* Dedicated storefront: one scroll surface, grouped choices and a visible review. */
.shop-page{display:block!important;height:var(--app-height,100vh);overflow:auto;background:#101412;color:#e9eee4;scroll-padding:24px;box-sizing:border-box}
.shop-page *{box-sizing:border-box}.shop-header{max-width:1280px;margin:auto;padding:var(--s4) var(--s7);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--card-line)}.shop-header svg.brand-logo{width:130px;display:block}.shop-header nav{display:flex;flex-wrap:wrap}.shop-header a{display:inline-flex;align-items:center;min-height:48px;color:#c4ed82;text-decoration:none;font-size:13px}
.shop-shell{max-width:1280px;margin:auto;padding:var(--s7)}.shop-heading{margin-bottom:var(--s6)}.shop-heading h1{font-size:var(--t-display);line-height:26px;letter-spacing:var(--ls-tight);margin:var(--s2) 0}.shop-heading>p{color:#aeb9a5;line-height:1.65}/* The three steps are worth showing once they are true. They were hidden
   because they never advanced: step two said "Sign in" to someone who already
   had a session, and step three never lit at all. Shop.jsx now derives the
   state, so the list is visible again and each step carries its own. */
.shop-progress{display:flex;flex-wrap:wrap;margin:var(--s5) 0 0;padding:0;list-style:none}
.shop-progress li{display:inline-flex;align-items:center;min-height:44px;margin:0 var(--s5) var(--s2) 0;color:#8f9e86;font-size:12px;line-height:1.4}
.shop-progress li b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;margin-right:var(--s3);border:1px solid #3b4a33;border-radius:50%;background:#161e14;color:#8f9e86;font-size:11px;font-weight:700}
.shop-progress li[data-state="current"]{color:#e9eee4}
.shop-progress li[data-state="current"] b{border-color:var(--sel-line);background:var(--sel-bg);color:#c4ed82}
.shop-progress li[data-state="done"]{color:#c4ed82}
.shop-progress li[data-state="done"] b{border-color:#526c38;background:#1d2818;color:#c4ed82}
[dir="rtl"] .shop-progress li{margin:0 0 var(--s2) var(--s5)}
[dir="rtl"] .shop-progress li b{margin-right:0;margin-left:var(--s3)}

/* The header carries the brand and the language on one side and every action
   on the other. Both sides shrink: the actions are ToolbarButtons, so they
   drop to short labels and then to icons with the density attribute, and the
   account chip gives up the address before it gives up the word. */
.shop-brand{display:flex;align-items:center;min-width:0}
.shop-brand>a{min-width:0}
.shop-brand>a+.race-language{margin-left:var(--s5)}
[dir="rtl"] .shop-brand>a+.race-language{margin-left:0;margin-right:var(--s5)}
.shop-header-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;min-width:0}
.shop-header .ui-tool{border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#c4ed82;text-decoration:none;cursor:pointer}
.shop-header .ui-tool--secondary{border-color:var(--sel-line);background:var(--sel-bg)}
.shop-header .shop-return-action{background:#a3e635;border-color:#a3e635;color:#172013}
.shop-account{display:inline-flex;align-items:center;min-width:0;max-width:100%;min-height:var(--ctl-h-min);padding:0 var(--s4);border:1px solid #526c38;border-radius:var(--ctl-r);background:#1d2818;color:#c4ed82;font-size:var(--t-ctl)}
.shop-account>.icon{flex:none}
.shop-account b{flex:none;margin-left:var(--s3);font-weight:var(--w-med)}
.shop-account small{min-width:0;margin-left:var(--s3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b6c8a6}
[dir="rtl"] .shop-account b,[dir="rtl"] .shop-account small{margin-left:0;margin-right:var(--s3)}

/* What the page is not selling. Racing, the Arcade and everything earned on
   track are free, and a pricing page that never says so reads as if they are
   not. */
.shop-earned{display:flex;align-items:flex-start;margin:0 0 var(--s6);padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.shop-earned>.icon{flex:none;color:#c4ed82}
.shop-earned strong{display:block;font-size:15px;color:#e9eee4}
.shop-earned p{margin:8px 0 0;font-size:13px;line-height:1.65;color:#aab69f}
.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s7);align-items:start}.purchase-selection{min-width:0}.purchase-review{min-width:0}.shop-layout>.purchase-review{position:sticky;top:var(--s6);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r);padding:var(--card-pad)}.shop-layout .commerce-kicker{display:none}.shop-layout h2{font-size:20px;margin-top:0}.shop-layout .commerce-copy{line-height:1.65;margin-bottom:22px}.shop-layout fieldset{min-width:0}.shop-layout .order-summary{margin:0;border:0;padding:0;background:none}.shop-layout .order-summary>div{gap:20px;align-items:start}.shop-layout .order-summary>div>span:last-child{flex-shrink:0}.shop-layout .purchase-footer{position:static!important;margin:0;padding:18px 0 0;background:none}.shop-layout .checkout-btn{width:100%;min-height:var(--ctl-h-lg);white-space:normal;background:#a3e635;color:#172013;border-radius:var(--ctl-r);border:0;padding:0 var(--s4);font-weight:var(--w-strong)}.shop-layout .purchase-policies{font-size:12px;line-height:1.7}.shop-layout .purchase-policies a{color:#c4ed82}.shop-layout .subscription-option,.shop-layout .addon-option{background:var(--card-bg);border-color:var(--card-line)}.shop-layout .selected{border-color:var(--sel-line);background:var(--sel-bg)}.shop-layout .product-name .icon{color:#b4e875}.shop-layout .billing-toggle{max-width:350px}.shop-layout .billing-toggle button{min-height:48px}
.addon-group-tabs{display:flex;flex-wrap:wrap;margin:18px 0}.addon-group-tabs button{display:inline-flex;align-items:center;min-height:var(--ctl-h-min);padding:0 var(--s4);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#c1ccb6;cursor:pointer;font-size:var(--t-ctl)}.addon-group-tabs button[aria-selected="true"]{color:#c4ed82;background:var(--sel-bg);border-color:var(--sel-line)}.addon-group-heading h3{font-size:20px;margin:22px 0 8px}.addon-group-heading p{font-size:13px;line-height:1.65;color:#aab69f;margin:0 0 18px}.addon-group-products{display:grid;gap:10px}.addon-group-products .addon-option{margin:0;min-width:0}.addon-options [hidden]{display:none!important}.addon-option>span{min-width:0}.addon-option>b{max-width:120px}.addon-option .product-name{line-height:1.4}
.shop-login{max-width:520px;padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}.shop-login>.icon{display:block;color:#a3e635;margin:16px 0}.shop-login p{color:#b8c3ae;line-height:1.65}.shop-login input{width:100%;min-height:52px}.shop-login button{min-height:48px}.shop-login .text-action{color:#c4ed82}.shop-return{padding:var(--card-pad);background:var(--sel-bg);border:1px solid var(--sel-line);border-radius:var(--card-r);margin-bottom:var(--s6)}.shop-return p{line-height:1.7;color:#bbc9ae}.shop-return a,.shop-return button{display:inline-flex;align-items:center;min-height:48px;padding:12px;margin-right:12px;color:#c4ed82;border:1px solid #526c38;background:transparent;border-radius:10px;text-decoration:none}.home-addon-categories .home-addon{min-height:150px}.home-addon-categories strong{font-size:15px}
@media(max-width:1000px){.shop-layout{grid-template-columns:minmax(0,1fr) 290px;gap:20px}.shop-shell{padding:28px}.shop-header{padding:16px 28px}.shop-layout>.purchase-review{padding:18px}}
@media(max-width:760px){.shop-layout{grid-template-columns:1fr}.shop-layout>.purchase-review{position:static}.shop-shell{padding:24px 20px}.shop-header{padding:14px 20px;flex-wrap:wrap}.shop-heading h1{font-size:20px}.shop-layout .addon-option{grid-template-columns:22px minmax(0,1fr) auto}.shop-layout .addon-option>b{max-width:88px;font-size:13px}}
@media(max-height:650px){.shop-layout>.purchase-review{position:static}}

.shop-product-section{margin:24px 0}.shop-product-section h4{font-size:15px;font-weight:600;color:#d2e3c3;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid #34442b}.garage-starters,.group-footnote{display:flex;flex-direction:column;padding:18px;border:1px solid #34442b;border-radius:12px;background:#172016;color:#b8c9a8;font-size:13px;line-height:1.7}.garage-starters strong,.group-footnote strong{color:#c4ed82}

.category-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;min-height:22px;padding:2px 5px;border-radius:20px;background:#b5e876;color:#14200b;font-size:12px;font-weight:700}.order-summary .order-remove{display:block;min-height:var(--ctl-h-min);padding:var(--s3) 0;border:0;background:none;color:#afc894;font-size:12px;text-decoration:underline;cursor:pointer;text-align:start}
.phone-checkout-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:16px;border:0;border-radius:12px;background:#a3e635;color:#172013;font-size:15px;font-weight:700;cursor:pointer}.phone-checkout-note{font-size:12px;line-height:1.6;color:#b7c6ac;text-align:center;margin:10px 0 18px}.shop-layout .phone-checkout-btn~.checkout-btn{background:transparent;color:#c4ed82;border:1px solid #526c38}.shop-header button{font:inherit;min-height:48px;color:#c4ed82;background:none;border:0;cursor:pointer}.phone-handoff{padding:var(--s6);border:1px solid var(--card-line);background:var(--card-bg);border-radius:var(--card-r)}.phone-handoff-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}.phone-handoff h2{font-size:20px;line-height:1.2;margin:16px 0}.phone-handoff p,.phone-handoff li{font-size:15px;line-height:1.7;color:#b8c6ad}.phone-handoff ol{padding-left:22px}.phone-handoff li{padding:8px 0}.phone-handoff .text-action{min-height:48px;color:#c4ed82}.phone-code-card{text-align:center}.phone-qr{background:#fff;padding:22px;border-radius:16px;max-width:280px;margin:auto}.phone-qr svg{width:100%;height:auto;display:block}.phone-check-code{display:block;letter-spacing:var(--ls-caps);color:#c4ed82;font-size:var(--n-lg);margin:var(--s4) 0 var(--s3)}.phone-code-card small{display:block;color:#a9b99b}.phone-code-card a{display:flex;align-items:center;justify-content:center;min-height:48px;color:#c4ed82;font-size:13px;margin-top:8px}.phone-code-card button{min-height:48px;padding:12px 20px;border-radius:10px;background:#a3e635;border:0;color:#14200b;font-weight:700}
@media(max-width:760px){.phone-handoff-layout{grid-template-columns:1fr;gap:24px}.phone-handoff{padding:22px}.phone-handoff h2{font-size:20px}.phone-code-card{grid-row:1}.phone-qr{max-width:240px}}

.pro-offer{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid #4d6634}.pro-offer>.icon{color:#b7ee72}.pro-offer h3{font-size:15px;line-height:1.4;color:#d9f5b4;margin:10px 0}.pro-offer p{font-size:13px;line-height:1.65;color:#bccbb0}.pro-offer .pro-offer-terms{font-size:12px}.pro-offer .subscription-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;border:1px solid #88b748;border-radius:10px;background:#263b19;color:#c4ed82;padding:12px;cursor:pointer}

.shop-layout>.purchase-review.has-pro-offer{position:static}
.shop-layout .checkout-error .subscription-link{display:flex;align-items:center;min-width:48px;min-height:48px;width:100%;margin-top:8px;padding:12px 0;white-space:normal;text-align:left;line-height:1.5}

.billing-management{margin:0 0 32px;padding:24px;border:1px solid #405333;border-radius:18px;background:#172014}.billing-management>p,.billing-note,.billing-current p{color:#b3c3a5;font-size:13px;line-height:1.65}.billing-management h2{font-size:20px}.billing-management button,.billing-management select{min-height:48px;padding:12px 16px;border:1px solid #56743d;border-radius:10px;background:#23341a;color:#d1edb9;cursor:pointer;font:inherit}.billing-management button:disabled{opacity:.5;cursor:default}.billing-management a{color:#c4ed82}.billing-subscription{margin-top:24px;padding-top:24px;border-top:1px solid #3c4e30}.billing-current{display:flex;justify-content:space-between;align-items:start}.billing-current h3{margin:0;font-size:20px}.billing-current button{flex-shrink:0}.billing-change-fields{display:flex;flex-wrap:wrap;align-items:end;margin:18px 0}.billing-change-fields label{display:flex;flex-direction:column;font-size:13px}.billing-change-fields select{max-width:100%}.billing-change-fields .billing-metrics{flex-direction:row;align-items:center;min-height:48px}.billing-metrics input{width:22px;height:22px;accent-color:#a3e635}.billing-preview{border:1px solid #8ab65a;border-radius:14px;padding:20px;margin-top:20px;background:#24341b}.billing-preview p{font-size:13px;line-height:1.65}.billing-preview button{margin:8px 10px 0 0}.billing-subscription .text-action{margin-left:0;margin-right:0}.billing-preview h4{font-size:15px;margin-top:0}@media(max-width:760px){.billing-management{padding:18px}.billing-current{flex-direction:column}.billing-change-fields{display:grid;grid-template-columns:1fr}.billing-current button{max-width:100%}}

.purchase-promo{margin:18px 0;border:1px solid #3d5032;border-radius:12px;background:#151e13;overflow:hidden}.purchase-promo summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 14px;cursor:pointer;color:#d9edc2;font-size:13px;font-weight:600;list-style:none}.purchase-promo summary::-webkit-details-marker{display:none}.purchase-promo summary>span{display:flex;align-items:center}.purchase-promo summary small{font-size:12px;font-weight:400;color:#b3c4a1}.purchase-promo summary small:after{content:' +';font-size:15px}.purchase-promo[open] summary small:after{content:' −'}.purchase-promo summary:focus-visible{outline:2px solid #b5e876;outline-offset:-3px}.purchase-promo>div{padding:0 14px 12px}.purchase-promo p{margin:0 0 10px;color:#bac7b0;font-size:13px;line-height:1.6}.purchase-promo p:last-child{margin-bottom:0}

.signin-logo{display:block;width:120px;max-width:100%;height:auto;margin:0 0 22px}.signin-alternative{margin-top:24px;padding-top:18px;border-top:1px solid #34412c}.signin-alternative p{margin:0 0 10px}.signin-alternative small{display:block;margin-top:10px;color:#b7c3ae;font-size:13px;line-height:1.5}.signin-switch{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:16px;padding:12px 16px;border:1px solid #7ba54f;border-radius:12px;background:#1c2915;color:#d7efba;font:inherit;font-size:15px;font-weight:600;cursor:pointer;touch-action:manipulation}.signin-switch:focus{outline:2px solid #b5e876;outline-offset:3px}.signin-switch:disabled{opacity:.55;cursor:wait}

.session-notice{margin:16px 0;padding:14px 18px;border:1px solid #697345;border-radius:12px;background:#232b18;color:#e2edc6;font-size:13px;line-height:1.5}.drive-session-notice{position:fixed;z-index:85;top:12px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:650px;box-sizing:border-box}

/* Subscription management is reachable from account, settings and shop. */
.subscription-manage-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:12px;margin:16px 0;border:1px solid #88b748;border-radius:10px;color:#d1edb9;background:#23341a;text-decoration:none;font-size:13px;line-height:1.5}
.subscription-manage-link .icon{flex-shrink:0;margin-left:12px}
.billing-management .billing-downgrade-action,.billing-management .billing-cancel-action{display:block;width:100%;min-height:48px;text-align:left;margin-top:16px;white-space:normal}
.billing-management .billing-cancel-action{border-color:#ac8075;color:#f2cbc2;background:#30221e}
.billing-management:focus-visible,.subscription-manage-link:focus-visible{outline:2px solid #c4ed82;outline-offset:4px}

/* The free browser self-check, and its receipt, back on the shop page. Sized
   from the spacing and control tokens rather than the literals it carried
   before, so it follows the density the rest of the page is on. */
.shop-browser-check{margin:var(--s6,20px) 0;padding:var(--card-pad,18px);border:1px solid #526c38;border-radius:var(--card-r,14px);background:#1d2818;color:#d1edb9}
.shop-browser-check p{font-size:var(--t-body,13px);line-height:1.6;color:#c0cbb6}
.shop-browser-check a{display:inline-flex;align-items:center;min-height:var(--ctl-h-min,48px);padding:var(--s4,12px);color:#d1edb9;border:1px solid #88b748;border-radius:var(--ctl-r,10px)}
.billing-account-deletion{margin-top:24px;padding-top:24px;border-top:1px solid #3c4e30}.billing-account-deletion h3{margin:0 0 10px;font-size:15px}.billing-account-deletion p{color:#b3c3a5;font-size:13px;line-height:1.65}



.analytics-choice{display:flex;align-items:center;min-height:48px;cursor:pointer}.analytics-choice input{width:24px;height:24px;flex:none}

/* Guide pages end with one call to action, styled like the site button. */
.information-cta{margin:28px 0 8px}
.information-cta .primary{display:inline-block;min-height:44px;padding:12px 20px;border-radius:12px;text-decoration:none;font-size:15px}

/* The car's Chromium has no flex gap, so every flex row on these pages spaces
   itself with margins, mirrored for right-to-left. Grid rows keep their gap. */
.welcome-page .icon:first-child,.shop-page .icon:first-child,.information-page .icon:first-child,
.launch-note>.icon:first-child,.purchase-inclusions>.icon:first-child,.purchase-promo summary>span>.icon:first-child{margin-right:var(--s3)}
.welcome-page .icon:last-child,.shop-page .icon:last-child,.information-page .icon:last-child{margin-left:var(--s3)}
[dir="rtl"] .welcome-page .icon:first-child,[dir="rtl"] .shop-page .icon:first-child,[dir="rtl"] .information-page .icon:first-child,
[dir="rtl"] .launch-note>.icon:first-child,[dir="rtl"] .purchase-inclusions>.icon:first-child{margin-right:0;margin-left:var(--s3)}
[dir="rtl"] .welcome-page .icon:last-child,[dir="rtl"] .shop-page .icon:last-child,[dir="rtl"] .information-page .icon:last-child{margin-left:0;margin-right:var(--s3)}
.status-dot{margin-right:var(--s3)}
[dir="rtl"] .status-dot{margin-right:0;margin-left:var(--s3)}
.home-plan-top>*+*,.signin-switch>*+*,.purchase-promo summary>span>*+*{margin-left:var(--s3)}
.welcome-intro-nav>*+*,.phone-checkout-btn>*+*,.pro-offer .subscription-link>*+*,.purchase-promo summary>*+*,.launch-recovery button>*+*{margin-left:var(--s4)}
.information-header>*+*,.shop-header>*+*,.cookie-category>*+*,.home-subscription-benefits>svg+*{margin-left:var(--s5)}
.footer-company-details>*+*,.home-final-cta>*+*,.home-footer>*+*,.billing-current>*+*{margin-left:var(--s6)}
[dir="rtl"] .home-plan-top>*+*,[dir="rtl"] .signin-switch>*+*,[dir="rtl"] .purchase-promo summary>span>*+*{margin-left:0;margin-right:var(--s3)}
[dir="rtl"] .welcome-intro-nav>*+*,[dir="rtl"] .phone-checkout-btn>*+*,[dir="rtl"] .pro-offer .subscription-link>*+*,
[dir="rtl"] .purchase-promo summary>*+*,[dir="rtl"] .launch-recovery button>*+*{margin-left:0;margin-right:var(--s4)}
[dir="rtl"] .information-header>*+*,[dir="rtl"] .shop-header>*+*,[dir="rtl"] .cookie-category>*+*,[dir="rtl"] .home-subscription-benefits>svg+*{margin-left:0;margin-right:var(--s5)}
[dir="rtl"] .footer-company-details>*+*,[dir="rtl"] .home-final-cta>*+*,[dir="rtl"] .home-footer>*+*,[dir="rtl"] .billing-current>*+*{margin-left:0;margin-right:var(--s6)}
.garage-starters>*+*,.group-footnote>*+*,.billing-change-fields label>*+*{margin-top:var(--s3)}
.home-plan-saving>*+*{margin-top:var(--s2)}
.launch-recovery>*+*{margin-top:var(--s6)}
.home-section-nav>a,.addon-group-tabs>button,.policy-related>a{margin:0 var(--s3) var(--s3) 0}
.shop-header nav>*,.home-feature-actions>*,.billing-change-fields>*{margin:0 var(--s5) var(--s3) 0}
[dir="rtl"] .home-section-nav>a,[dir="rtl"] .addon-group-tabs>button,[dir="rtl"] .policy-related>a{margin:0 0 var(--s3) var(--s3)}
[dir="rtl"] .shop-header nav>*,[dir="rtl"] .home-feature-actions>*,[dir="rtl"] .billing-change-fields>*{margin:0 0 var(--s3) var(--s5)}
html[data-tesla="true"] .disclaimer>*{margin-right:var(--s2)}
.analytics-choice>input{margin-right:var(--s4)}
[dir="rtl"] .analytics-choice>input{margin-right:0;margin-left:var(--s4)}

/* responsive.css */
/* Shared viewport sizing also applies before the driving runtime starts. */
:root{--app-height:100vh}
@supports(height:100dvh){:root{--app-height:100dvh}}
#app{min-height:0;height:var(--app-height,100vh)}
.welcome-page,.shop-page,.information-page{height:var(--app-height,100vh);min-height:0;overflow-y:auto}
.panel,html[data-tesla="true"] .panel{max-width:100vw;height:var(--app-height,100vh);overflow-y:auto;overscroll-behavior:contain}
.commerce-layer{max-height:var(--app-height,100vh);overflow-y:auto}
.commerce-modal,.cookie-settings-dialog{max-height:calc(var(--app-height,100vh) - 28px);overscroll-behavior:contain}
.setup-gate{overflow-y:auto;max-height:var(--app-height,100vh)}
.setup-gate>section{min-width:0;max-width:100%;margin:auto}
.panel .settings-tabs button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.panel .section-label{flex-wrap:wrap}
.panel .section-label>*{min-width:0;overflow-wrap:anywhere}
.panel .section-label{flex-wrap:wrap}
.login-form input,.login-form button,.shop-header nav,.shop-progress,.subscription-heading{min-width:0}
.shop-progress,.shop-header nav,.subscription-heading{flex-wrap:wrap}
.login-form label,.order-summary>div,.subscription-summary,.billing-management{overflow-wrap:anywhere}
.phone-handoff-layout>*{min-width:0}

@media(max-width:850px){
  .topbar,html[data-tesla="true"] .topbar{grid-template-columns:minmax(0,1fr) auto}
  .topbar .session-pill{display:none}
  .topbar .brand{min-width:0}
}
@media(max-width:480px){
  .panel,html[data-tesla="true"] .panel{width:100%;padding-left:var(--s5);padding-right:var(--s5)}
  .panel .settings-tabs,html[data-tesla="true"] .panel .settings-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .panel .settings-tabs button,html[data-tesla="true"] .panel .settings-tabs button{min-height:54px;font-size:12px;padding:8px 4px}
  .panel .settings-tabs button span{max-width:100%}
  .commerce-modal,html[data-tesla="true"] .commerce-modal{padding:var(--s5)}
  .commerce-modal h2{font-size:var(--t-head);padding-right:var(--s7);overflow-wrap:anywhere}
  .subscription-option,.addon-option,.shop-layout .addon-option{grid-template-columns:22px minmax(0,1fr)}
  .subscription-option>b,.addon-option>b{grid-column:2;text-align:start;white-space:normal}
  .shop-shell{padding-left:var(--s5);padding-right:var(--s5)}
  .shop-login,.phone-handoff{padding:18px}
  .topbar .experience-switch{max-width:72px;white-space:normal;text-align:center}
  .topbar .brand-logo{width:52px;max-width:100%}
}
/* Small viewports carry the brand icon, not the wordmark. A 60–110px lockup
   crowds a phone toolbar that also has to hold the language button and the
   action row, and a cropped wordmark is neither readable nor recognisable. The
   W mark is the same glyph as the favicon and home-screen icon, so it is what
   a phone already knows the product by. Both images are in the DOM with the
   same accessible name; only the visible one is announced. The selectors carry
   the tag so they outrank the per-surface sizing (`.shop-header svg`,
   the density layer) without an !important. */
svg.brand-icon{display:none;width:37px;height:22px;max-width:none;flex:none}
/* Only where the compact W is actually mounted beside the wordmark — the
   toolbars and the shop header. A wordmark standing alone (welcome hero,
   information header, footer) has nothing to swap to and stays. */
@media(max-width:700px){
  .topbar .brand svg.brand-logo,.shop-brand svg.brand-logo{display:none}
  .topbar .brand svg.brand-icon,.shop-brand svg.brand-icon{display:block;width:37px;height:22px}
}
html[data-phone="true"] .topbar .brand svg.brand-logo,html[data-phone="true"] .shop-brand svg.brand-logo{display:none}
html[data-phone="true"] .topbar .brand svg.brand-icon,html[data-phone="true"] .shop-brand svg.brand-icon{display:block;width:37px;height:22px}
@media(max-width:700px){
  .information-layout{display:block}
  .information-sidebar{position:static;margin-bottom:24px}
  .information-sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  .phone-handoff-layout{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* Short landscape windows must fit the real viewport, including browser chrome.
   Keep the controls usable while secondary scene decoration gives way. */
@media(max-height:500px) and (orientation:landscape){
  .topbar svg.brand-logo{display:none}
  .topbar svg.brand-icon{display:block;width:33px;height:20px}
  .topbar,html[data-tesla="true"] .topbar{top:8px;left:12px;right:12px;height:54px;padding:0 10px}
  .topbar .icon-btn,html[data-tesla="true"] .topbar .icon-btn,
  .account-btn,html[data-tesla="true"] .account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
  .route-ribbon,html[data-tesla="true"] .route-ribbon{top:70px;left:12px;min-width:0;max-width:calc(100vw - 150px);transform:none}
  .cinema-title,.world-reel,.scene-status,.drive-dynamics,.render-mode-badge,.turn-card{display:none}
  .drive-readout,html[data-tesla="true"] .drive-readout{left:12px;right:124px;bottom:86px;min-height:72px;padding:var(--row-pad);grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);transform:none}
  .engine-meter{display:none}
  .drive-readout .speed strong,html[data-tesla="true"] .drive-readout .speed strong{font-size:20px}
  .control-dock,html[data-tesla="true"] .control-dock{left:12px;bottom:10px;width:calc(100vw - 136px);height:64px;transform:none;grid-template-columns:minmax(0,1fr)}
  .control-dock .divider,.control-dock .destination,.control-dock .battery{display:none}
  .horn-btn,html[data-tesla="true"] .horn-btn,.nitro-btn,html[data-tesla="true"] .nitro-btn{display:grid;right:12px;width:96px;height:62px}
  .horn-btn,html[data-tesla="true"] .horn-btn{bottom:80px}
  .nitro-btn,html[data-tesla="true"] .nitro-btn{bottom:10px}
  .panel,html[data-tesla="true"] .panel{padding-top:12px}
  .panel-head{padding-top:0;padding-bottom:12px}
  .panel .settings-tabs,html[data-tesla="true"] .panel .settings-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:var(--s2) 0;margin-bottom:var(--s3)}
  .panel .settings-tabs>button+button{margin-left:var(--s2)}
  [dir="rtl"] .panel .settings-tabs>button+button{margin-left:0;margin-right:var(--s2)}
  .panel .settings-tabs button,html[data-tesla="true"] .panel .settings-tabs button{flex:0 0 auto;min-width:86px;min-height:var(--ctl-h-min);padding:var(--row-pad);font-size:var(--t-ctl)}
  .purchase-footer{position:static;margin-bottom:0}
  .setup-gate{padding:12px;place-items:start center}
}

/* Keep runtime-owned metric nodes mounted while React owns access prompts. */
.metrics-locked > :not(.metrics-placeholder){display:none!important}
.metrics-placeholder{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:var(--ctl-h-min);max-width:100%;padding:5px 10px;border:1px solid #45d8c44d;border-radius:10px;background:#45d8c410;color:#d5f9f3;text-align:start;cursor:pointer;white-space:normal}
.metrics-placeholder small{font-size:var(--t-small);line-height:1.2;color:var(--text-2)}
.metrics-placeholder strong{font-size:var(--t-ctl);line-height:1.25;font-weight:var(--w-med)}
.metrics-placeholder:hover{background:#45d8c426}
.metrics-placeholder:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.route-ribbon.metrics-locked{min-width:0;transform:none}
.destination.metrics-locked,.battery.metrics-locked{min-width:0}
.control-dock .metrics-placeholder{width:100%}

/* Locked previews: muted sample metrics beneath a crisp unlock action. */
.metrics-preview{position:relative;isolation:isolate;overflow:hidden;min-height:var(--ctl-h-tile);padding:var(--row-pad);gap:7px;border-color:rgba(131,219,199,.22);background:linear-gradient(115deg,#162a29 0%,#112020 58%,#172e2c 100%);box-shadow:inset 0 1px 0 rgba(214,255,245,.05);transition:border-color .18s ease,background .18s ease}
.metrics-preview:hover{border-color:rgba(131,219,199,.6);background:linear-gradient(115deg,#1c3733,#142825)}
/* Label and tag share one grid row, so a long label (or a long translation
   of PREVIEW) ellipsises instead of printing on top of its neighbour. */
.metrics-preview{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:var(--s2);row-gap:7px}
.metrics-preview-label{grid-column:1;grid-row:1;position:relative;z-index:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-micro,10px);font-weight:600;line-height:1.1;letter-spacing:.06em;text-transform:uppercase;color:#c2d3d0}
.metrics-preview-tag{grid-column:2;grid-row:1;position:relative;right:auto;top:auto;z-index:1;justify-self:end;align-self:center;white-space:nowrap;font-size:var(--t-micro,10px);line-height:1;letter-spacing:.06em;color:#839d97}
.metrics-preview .metrics-unlock{grid-column:1/-1;grid-row:2;justify-self:start}
.metrics-preview-art{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.22;color:#b2e8d9;-webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 75%);mask-image:linear-gradient(90deg,transparent 10%,#000 75%)}
.metrics-preview-art>svg{width:100%;height:100%}.preview-streets{stroke:#9fc0b8;stroke-width:1}.preview-route{stroke:#71f2c9;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.metrics-preview-art circle{fill:#baffeb;stroke:#71f2c9;stroke-width:4}
.preview-number{position:absolute;right:var(--s3);top:19px;font-size:20px;font-weight:600;line-height:1;letter-spacing:-.02em;white-space:nowrap}.preview-number>span{font-size:12px;letter-spacing:0}.preview-distance{position:absolute;right:var(--s3);bottom:var(--s1);font-size:11px;letter-spacing:0}
.preview-battery{position:absolute;right:var(--s3);bottom:var(--s1);display:flex}.preview-battery i{width:5px;height:3px;background:currentColor;border-radius:1px}.preview-battery i+i{margin-left:2px}.preview-battery i:nth-last-child(-n+3){opacity:.2}
.metrics-unlock{position:relative;z-index:1;display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--s7);padding:var(--s1) var(--s3);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:rgba(29,56,46,.92);color:#dcf9e6;font-size:11px;font-weight:600;line-height:1;box-shadow:0 2px 6px #0002}
.metrics-preview--map{width:230px;min-height:64px}.metrics-preview--map .metrics-preview-art{opacity:.35}
/* The narrow battery tile keeps label + value + action; the PREVIEW badge is
   redundant beside the lock pill and the bar repeats the number. */
.metrics-preview--battery .metrics-preview-tag,.metrics-preview--battery .preview-battery{display:none}
.metrics-preview--battery .metrics-preview-label{font-size:11px}
.metrics-preview--battery .preview-number{top:var(--s3);font-size:15px}
.metrics-preview--battery .metrics-unlock{padding-left:var(--s1);padding-right:var(--s1)}
@media(max-width:600px){.metrics-preview--map{width:190px;min-height:58px}
 /* The narrow map tile gives its label the whole row: the lock pill under it
    already says the metrics are a preview, so the badge only cost letters. */
 .metrics-preview--map .metrics-preview-tag{display:none}}
@media(prefers-reduced-motion:reduce){.metrics-preview{transition:none}}

/* Demo inputs occupy their own area above the instruments. */
.demo-mode .demo-driving{top:180px;bottom:auto;left:20px;max-width:calc(100vw - 40px)}
.demo-driving-active .world-reel{visibility:hidden;pointer-events:none}
@media(max-width:760px){
  .demo-mode .demo-driving{top:156px;left:12px;max-width:calc(100vw - 24px);gap:6px}
  .demo-mode .demo-driving>button{min-height:var(--ctl-h-min);padding:var(--row-pad)}
  .demo-mode .demo-touch-controls button{min-width:48px;min-height:48px;padding:6px 10px}
  .demo-mode .demo-touch-controls span{font-size:20px;line-height:20px}
}
@media(max-height:650px) and (max-width:760px){
  .demo-mode .route-ribbon{display:none}
  .demo-mode .demo-driving{top:78px}
}
@media(max-height:500px) and (orientation:landscape){
  .demo-mode .route-ribbon{display:none}
  .demo-mode .demo-driving{top:70px;left:12px;right:124px;max-width:none;display:flex;align-items:stretch}
  .demo-mode .demo-driving>*+*{margin-left:var(--s3)}
  .demo-mode .demo-driving>button{min-width:0;min-height:48px;max-width:150px;padding:6px 10px;font-size:11px}
  .demo-mode .demo-touch-controls{min-width:0}
  .demo-mode .demo-touch-controls button{min-width:48px;min-height:48px;padding:4px 8px}
  .demo-mode .demo-touch-controls span{font-size:15px;line-height:18px}
  .demo-mode .demo-touch-controls small{font-size:11px}
}
@media(max-height:500px){
  #app.demo-mode .drive-readout{min-height:72px;padding-top:var(--s2);padding-bottom:var(--s2)}
  #app.demo-mode .drive-readout .speed strong{font-size:20px}
  #app.demo-mode .gear .compact-drive{min-height:var(--ctl-h-min);padding-top:var(--s1);padding-bottom:var(--s1);font-size:var(--n-sm)}
  #app.demo-mode .drive-label{display:none}
}

/* art-direction.css */
/* Driwe: graphite surfaces, electric lime, and a clear instrument hierarchy.
   Presentation only; responsive layouts and driving visibility stay intact. */
:root {
  --design-ink: #0c1012;
  --design-panel: #141a1d;
  --design-raised: #1b2326;
  --design-line: #303a3e;
  --design-copy: #eef2ed;
  --design-muted: #a9b5b8;
  --design-lime: #b3ed59;
  --ui-paper: var(--design-copy);
  --ui-muted: var(--design-muted);
  --ui-stroke: rgba(206,222,225,.15);
}
body { -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.welcome-page,.shop-page,.information-page { background: var(--design-ink); color: var(--design-copy); }

/* The road illustration and generous type establish the product's mood. */
.welcome-visual { background: #121c20; }
.welcome-visual:after { background: linear-gradient(180deg,#081116b8,transparent 64%,#08111666); }
.welcome-editorial h1 { font-weight: var(--w-med); line-height: 26px; letter-spacing: var(--ls-tight); max-width: 610px; }
.welcome-editorial>span { max-width: 320px; line-height: 1.8; }
.welcome-page .welcome-editorial>p,
.welcome-page .welcome-eyebrow { color: var(--design-lime); letter-spacing:.06em; font-weight:700; }
.welcome-scene-note { padding: var(--row-pad); border: 1px solid var(--card-line); border-radius: 99px; background: #0c151bb3; }
.welcome-intro h2 { font-weight:600; letter-spacing:-.02em; }
.welcome-intro>p { line-height: 1.75; color: var(--design-muted); }
.welcome-page .experience-card { border-color: var(--card-line); background: var(--card-bg); border-radius: var(--card-r); padding: var(--card-pad); box-shadow: none; }
.welcome-page .experience-card strong { font-weight:600; letter-spacing:-.02em; }
.welcome-page .experience-card p { color: #b5c0c2; }
.welcome-page .entry-icon { background: #242f29; color: var(--design-lime)!important; border: 1px solid var(--card-line); border-radius: 50%; }
.welcome-page .drive-entry { background: linear-gradient(120deg,#202a22,#151e1e); border-color: #76924c; }
.welcome-page .drive-entry .entry-icon { background: var(--design-lime); color: #1c2813!important; }
.welcome-page .entry-action { color: var(--design-lime); padding-top: var(--s3); border-top: 1px solid var(--card-line); }
.welcome-page .entry-overline { color: #a4b0b3; letter-spacing:.06em; }
.welcome-page .welcome-footnote p { color: #b6c0bf; }
.welcome-page .welcome-footnote p span { color: #92a1a4; }
.home-section-nav { background: #111719; border-color: var(--design-line); }
.home-section-nav a { color: #c1cbcc; border-radius: 8px; }
.home-section-heading h2 { font-weight:600; letter-spacing:-.02em; }
.home-section-heading p { color: var(--design-muted); line-height: 1.8; max-width: 650px; }
.welcome-page .home-plan,
.welcome-page .home-addon,
.home-features article,
.home-steps li { background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--card-r); box-shadow: none; }
.welcome-page .home-plan.recommended { background: linear-gradient(150deg,#263023,#141c1c); border-color: #819f50; }
.home-features article,.home-steps li { padding: var(--card-pad); }
.home-price { font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.home-price span { letter-spacing: 0; }
.home-plan h3,.home-features h3,.home-steps h3 { letter-spacing:-.02em; font-weight:600; }
.home-plan p,.home-features p,.home-steps p { color: var(--design-muted); line-height: 1.75; }
.welcome-page .home-plan-link { min-height: var(--ctl-h); border-color: var(--ctl-line); border-radius: var(--ctl-r); }
.welcome-page .recommended .home-plan-link,
.welcome-page .home-final-cta .home-plan-link { background: var(--design-lime); border-color: var(--design-lime); }
.welcome-page .home-final-cta { background: var(--card-bg-raise); border: 1px solid var(--card-line); border-radius: var(--card-r); }
.welcome-page .home-faq details { border-color: var(--design-line); }
.home-faq summary { padding-top: var(--s4); padding-bottom: var(--s4); font-weight: var(--w-med); }
.home-faq details[open] summary { color: var(--design-lime); }
.home-faq details p { max-width: 800px; color: #b3c0c3; line-height: 1.85; }

/* A quiet cockpit: the scene provides color, instruments provide contrast. */
.topbar,html[data-tesla="true"] .topbar { background: #11181bf2; border-color: #ffffff21; box-shadow: 0 8px 28px #00000024; }
.topbar .purchase-cta { background: var(--design-lime); color: #17200f; border-color: var(--design-lime); border-radius: 11px; }
.topbar .icon-btn,.account-btn { background: #20292d; color: #e1e9e7; border-color: #384348; }
.session-pill { background: #1c2526; border-color: #36423e; }
.session-pill em { color: #acbcb6; }
.route-ribbon,.control-dock,.drive-readout,.turn-card { background: #10181bed; border-color: var(--card-line); box-shadow: var(--float-shadow); }
.drive-readout .speed>strong { font-weight:400; font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.meter-label strong { font-variant-numeric: tabular-nums; font-weight:600; }
.control-dock small,.meter-label span,.meter-scale { color: #a7b6ba; }
.control-dock .sound-icon { border-radius: 12px; background: #25332b; color: var(--design-lime); }
.compact-drive { background: #1d2928; border-color: #556940; color: var(--design-lime); }
.horn-btn,.nitro-btn { background: #172024; border-color: #354347; box-shadow: 0 8px 24px #0002; }
.demo-driving>button { background: #19231eeF; color: var(--design-lime); border-color: #657b48; font-size: 13px; }
.demo-driving>button[aria-pressed="true"] { background: var(--design-lime); color: #17200f; }
.demo-touch-controls button { background: #172125f5; border-color: #536164; }
.demo-touch-controls small { color: #c0cccd; }

/* Settings use the same surfaces and selection language as the shop. */
.panel,html[data-tesla="true"] .panel { background: #11181b; }
.panel-head,html[data-tesla="true"] .panel-head,
.panel .settings-tabs,html[data-tesla="true"] .panel .settings-tabs { background: #11181b; }
.panel-head h1 { font-weight:600; letter-spacing:-.02em; }
.panel-head p { color: var(--design-muted); }
.panel .settings-tabs button { background: var(--ctl-bg); border-color: var(--ctl-line); color: #bac7c9; border-radius: var(--ctl-r); }
.panel .settings-tabs button.active { background: var(--sel-line); border-color: var(--sel-line); color: #182210; box-shadow: none; }
.panel .section-label { color: #dbe5e3; letter-spacing:.06em; }
.panel .section-label small { color: #a3b4b9; }
.panel .profile,.panel .environments button,.panel .choice-grid button,
.panel .drive-side button,.mix-control,.country-list details { background: var(--card-bg); border-color: var(--card-line); }
.panel .profile.active,.panel .environments button.active,
.panel .choice-grid button.active,.panel .drive-side button.active { background: var(--sel-bg); border-color: var(--sel-line); box-shadow: none; }
.panel .profile small,.panel .environments small,.panel .setting-hint { color: #acbabd; }

.shop-header,.information-header { border-color: var(--design-line); }
.shop-shell>h1,.shop-heading h1 { font-weight:600; letter-spacing:-.02em; }
.subscription-option,.addon-option,.shop-layout .subscription-option,.shop-layout .addon-option,.subscription-summary,
.shop-layout .purchase-review,.shop-login,.commerce-modal,.cookie-settings-dialog { background: var(--card-bg); border-color: var(--card-line); border-radius: var(--card-r); }
.subscription-option.selected,.addon-option.selected,.shop-layout .subscription-option.selected,.shop-layout .addon-option.selected { background: var(--sel-bg); border-color: var(--sel-line); }
.checkout-btn,.shop-layout .checkout-btn,.login-form button[type=submit] { background: var(--design-lime); color: #17200f; border-radius: var(--ctl-r); }
.purchase-footer { background: #111a1d; border-color: #344146; }
.billing-toggle,.welcome-page .home-billing { background: var(--card-bg); border-color: var(--card-line); border-radius: var(--card-r); padding: var(--s1); }
.billing-toggle button.active,.welcome-page .home-billing button.active { background: var(--sel-bg); color: #eaf5df; border-radius: var(--ctl-r); }
.commerce-copy,.subscription-option small,.addon-option small { color: #b4c1c4; }
.commerce-kicker,.recommendation { color: var(--design-lime); }
.login-form input { background: var(--ctl-bg); border-color: var(--ctl-line); border-radius: var(--ctl-r); color: var(--design-copy); }
.information-article h1 { font-weight:600; letter-spacing:-.02em; }
.information-article p { line-height: 1.85; }
.information-contents { border-color: var(--card-line); background: var(--card-bg); border-radius: var(--card-r); }
.site-footer { border-color: #303b3f; }
.footer-company-details { border-color: #303b3f; }
.footer-navigation nav>a,.footer-navigation nav>button { color: #adbbbe; }
.launch-loader.refined-loader { background: #101719; }
.launch-eyebrow { color: var(--design-lime); }
.launch-progress>span { background: var(--design-lime); }

@media(hover:hover) {
  .welcome-page .experience-card:hover { background: #202b2b; border-color: #9bb975; }
  .home-section-nav a:hover { background: #25302a; color: var(--design-lime); }
  .panel .profile:hover,.panel .choice-grid button:hover { border-color: #72817a; }
  .topbar .icon-btn:hover,.account-btn:hover { background: #2b383c; }
  .checkout-btn:hover,.topbar .purchase-cta:hover { background: #c4f67c; }
}
@media(min-width:1100px) and (min-height:650px) {
  .welcome-content { padding: 64px 56px; }
  .welcome-editorial { padding-top: 170px; }
  .welcome-editorial h1 { font-size: var(--t-display); }
  .home-details { padding-top: var(--s7); padding-bottom: var(--s7); }
}
@media(max-width:640px) {
  .welcome-page .experience-card { padding: var(--card-pad); }


  .home-faq summary { padding-top: var(--s4); padding-bottom: var(--s4); }
}
@media(prefers-reduced-motion:reduce) {
  .welcome-page .experience-card,.home-plan-link,.topbar button { transition: none; }
}

/* product-experience.css */
/* Product discovery uses existing scrolling panels, keeping the cockpit clear. */
.welcome-page .demo-entry{background:linear-gradient(120deg,#263523,#151e1e);border-color:#9bc363}
.welcome-page .demo-entry .entry-icon{background:var(--design-lime);color:#17200f!important}
.welcome-page .drive-entry{background:#151c1f;border-color:#354348}
.welcome-page .drive-entry .entry-icon{background:#242f29;color:var(--design-lime)!important}
.resume-drive{margin:0 0 16px;display:flex;justify-content:space-between;background:#243420;color:#dbefcc}
.home-demo .home-plan-link{display:flex;justify-content:space-between;margin-top:18px}
.plan-exclusion{color:#d3e3bf!important;font-size:13px;line-height:1.6}
.collection-browser{margin:24px 0;border:1px solid #38474b;border-radius:14px;padding:0 16px}
.collection-browser>summary{min-height:54px;padding:16px 0;cursor:pointer;font-weight:600;color:#dfebd5}
.experience-entry{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.experience-entry button,.experience-library button,.compatibility-actions button,.compatibility-steps button{min-height:48px;padding:10px 14px;border:1px solid #536646;border-radius:10px;background:#202e24;color:#e4efd9;font-size:13px}
.experience-library{padding:20px 0;border-bottom:1px solid #374247}
.experience-library h3{font-size:20px;margin:16px 0 10px}
.experience-library p,.experience-library small{font-size:13px;line-height:1.6;color:#b3c2c3}
.experience-presets{display:grid;gap:10px}
.experience-presets button{text-align:start;display:grid;gap:6px}
.experience-presets strong{font-size:15px}
.favorite-save{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}
.favorite-save input{min-width:0;min-height:48px;background:#101a1e;border:1px solid #526267;border-radius:10px;padding:10px;color:white}
.favorite-list{list-style:none;padding:0;display:grid;gap:8px}
.favorite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.favorite-list button{overflow-wrap:anywhere;text-align:start}
.compatibility-steps{padding:0;list-style:none;display:grid;gap:16px}
.compatibility-steps li{border:1px solid #3b4d4e;border-radius:12px;padding:16px}
.compatibility-steps strong{display:block;margin-bottom:10px}
.compatibility-steps p{font-size:13px;line-height:1.6;color:#b4c4c6}
.compatibility-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.compatibility-actions button:last-child{grid-column:1/-1}
.compatibility-steps button[aria-pressed=true]{background:#b3ed59;color:#15200e}
.upgrade-item-preview{display:grid;place-items:center;gap:16px;min-height:130px;padding:20px;border-radius:16px;background:#223027;color:#c7ef99}
.preview-price{font-size:20px;font-variant-numeric:tabular-nums}
.commerce-modal .subscription-link{min-height:48px;margin-top:10px}
.home-compatibility>p{color:#9faeb1;line-height:1.6;font-size:13px;margin-top:18px}
@media(max-width:480px){.favorite-save{grid-template-columns:1fr}.collection-browser{padding-left:var(--s3);padding-right:var(--s3)}}
.experience-library small{letter-spacing:normal;font-weight:400}
/* Entertainment tools share the settings panel and its scroll area. */
.tuning-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:16px 0}
.tuning-control small{display:block;color:#aabdc1;font-size:12px;margin-top:4px}
.tuning-control input{grid-column:1/-1;width:100%;min-height:48px}
.garage-actions{display:flex;flex-wrap:wrap}
.garage-actions button,.showcase-tools button,.sound-preview button{min-height:48px;padding:10px 14px}
.favorite-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.favorite-list button{min-width:48px;min-height:48px;overflow-wrap:anywhere}
.shared-setup{border:1px solid #536164;border-radius:12px;padding:12px;margin:16px 0}
.shared-setup input{width:100%;min-height:48px;margin:8px 0}
.setup-qr{max-width:220px;background:white;margin:12px auto;padding:8px}
.setup-qr svg{display:block;width:100%;height:auto}
.addon-product{min-width:0}.addon-product>.addon-option{height:auto;min-height:0}
.sound-preview{padding:4px 0 12px}.sound-preview small{display:block}
html[data-lightweight="true"] #road,html[data-lightweight="true"] #road2d{visibility:hidden!important}
html[data-lightweight="true"] .world-reel{visibility:hidden;pointer-events:none}
html[data-lightweight="true"] #app{background:#101a20}
@media(max-width:480px){.favorite-list li{grid-template-columns:1fr 1fr}.favorite-list li>button:first-child{grid-column:1/-1}}
/* A simulated drive must keep its shop entry reachable as the demo speeds up. */
html[data-moving="true"] .demo-mode .purchase-cta{opacity:1;pointer-events:auto;transform:none}


.showcase-tools button{background:#1b2529;border:1px solid #536164;border-radius:10px;color:#edf4f4}
.showcase-tools button+button{margin-left:8px}
.showcase-tools button[aria-pressed="true"]{background:#b3ed59;color:#15200e;border-color:#b3ed59}


/* Settings polish: flags, readable cards, and a quick-settings row. */
.quick-settings{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0}
.quick-settings button{display:grid;place-items:center;align-content:center;gap:var(--s1);min-height:var(--ctl-h-tile);padding:0 var(--s2);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-2,#aab7bc);font:inherit;cursor:pointer}
.quick-settings button svg{width:20px;height:20px}
.quick-settings button small{font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase}
.quick-settings button b{font-size:var(--t-small);font-weight:var(--w-med);color:var(--text-1)}
.quick-settings button[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel-bg);color:var(--sel-line)}
.quick-settings button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.country-list summary>i.country-flag{width:38px;height:34px;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#0f171b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.country-flag .flag{display:block;width:100%;height:100%}
.country-list summary strong{font-size:13px;letter-spacing:0}
.country-list summary small{font-size:11px;letter-spacing:0;text-transform:none;color:#9fb0b6}
.country-list summary>b{font-size:11px;font-weight:600;padding:4px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#cfe0e6}
.region-grid button strong{font-size:12px;letter-spacing:0}
.region-grid button small{font-size:11px;letter-spacing:0;text-transform:none;line-height:1.35;color:#9fb0b6}
.region-grid .route-stops{font-size:11px;letter-spacing:0}
.environments strong{font-size:12px;letter-spacing:0}
.environments small{font-size:11px;letter-spacing:0;line-height:1.3;color:#9fb0b6}
/* Account button: a round avatar with the initial, a person icon when signed out. */
.account-btn{border-radius:50%;font-weight:700;font-size:15px;letter-spacing:0;background:linear-gradient(145deg,#1b262c,#0f1519);color:#eaf6f2;box-shadow:inset 0 0 0 1.5px rgba(108,227,196,.55),0 4px 14px rgba(0,0,0,.25)}
.account-btn .icon{width:18px;height:18px;opacity:.9}
/* Pedals carry icons; the label stays for screen readers. */
.demo-touch-controls button .icon{width:22px;height:22px}

/* Daily-drive layer: one-tap resume, bookmark nudge, trip summary, trip log. */
/* A card, not a wall: it sits in the free band under the ribbon and left of
   the navigation card (which hugs the right edge at 320 px wide), clear of the
   demo controls on the left, so every other control stays tappable; any other
   action, or twelve seconds, dismisses it. */
.resume-gate{position:absolute;z-index:60;top:160px;left:74px;right:calc(320px + 28px);display:flex;justify-content:flex-end;pointer-events:none}
.resume-gate>section{pointer-events:auto;width:min(340px,100%);padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow);text-align:center}
@media (max-width:559px){.resume-gate{top:140px;left:12px;right:12px}}
@media (max-height:760px){.resume-gate>section,.trip-card>section{padding:var(--s5)}}
@media (max-height:500px){.resume-gate{top:126px}.resume-gate .resume-setup{margin:0 0 var(--s3)}}
.resume-gate .commerce-kicker{margin:0 0 6px}
.resume-gate h2{margin:0 0 var(--s2);font-size:var(--t-head);line-height:20px;font-weight:var(--w-med);letter-spacing:var(--ls-tight)}
.resume-gate .resume-setup{margin:0 0 var(--s4);color:#9fb0b5;font-size:var(--t-body)}
.resume-gate .checkout-btn{width:100%;min-height:var(--ctl-h-lg);font-size:var(--t-ctl);display:inline-flex;align-items:center;justify-content:center}
.resume-gate .subscription-link{margin-top:6px;width:100%;justify-content:center}
.bookmark-nudge{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);z-index:65;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--s3);align-items:center;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--float-shadow)}
.bookmark-nudge strong{display:block;font-size:13px}.bookmark-nudge p{margin:2px 0 0;font-size:12px;color:#9fb0b5}
.bookmark-nudge button{min-height:var(--ctl-h-min);padding:0 var(--s4);border-radius:var(--ctl-r);border:1px solid var(--ctl-line);background:transparent;color:#e6edf3;font-size:13px}
.bookmark-nudge button.primary{background:var(--ui-lime,#b7ee72);color:#0b1408;border-color:transparent;font-weight:600}
.trip-card{position:absolute;top:0;right:0;bottom:0;left:0;z-index:62;display:grid;place-items:center;padding:var(--s5);background:var(--scrim)}
.trip-card>section{width:min(560px,100%);padding:var(--s6);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--dialog-shadow)}
.trip-card h2{margin:0 0 var(--s1);font-size:var(--t-head);line-height:20px;font-weight:var(--w-med);letter-spacing:var(--ls-tight)}
.trip-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s3);margin:var(--s4) 0}
.trip-stats div{padding:var(--card-pad);border-radius:var(--card-r);background:var(--card-bg-raise)}
.trip-stats small{display:block;font-size:var(--t-micro,10px);letter-spacing:.06em;text-transform:uppercase;color:#8fa0a5}
.trip-stats strong{display:block;margin-top:var(--s1);font-size:var(--n-sm);font-weight:var(--w-body);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.trip-stats strong em{font-style:normal;font-size:13px;color:#9fb0b5;margin-left:4px}
.trip-card .trip-note{margin:0 0 12px;font-size:13px;color:#9fb0b5}
.trip-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.trip-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);padding:var(--row-pad);border-radius:var(--ctl-r);background:var(--card-bg-raise);font-size:var(--t-ctl)}
.trip-list li small{color:#8fa0a5}
.trip-toggles label{display:flex;justify-content:space-between;align-items:center;min-height:48px}


/* Motion source tag, drive of the day, chapter line. */
.motion-tag{margin-left:8px;padding:2px 7px;border-radius:999px;font-size:var(--t-micro,10px);letter-spacing:.06em;text-transform:uppercase;color:#9fb0b5;border:1px solid #2f3d42;white-space:nowrap}
.motion-tag[data-source="pedal"]{color:#0b1408;background:var(--ui-lime,#b7ee72);border-color:transparent}
.motion-tag[data-source="tesla"]{color:var(--ui-teal,#45d8c4);border-color:#2b5c56}
.today-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--card-pad);border-radius:var(--card-r);background:var(--card-bg);border:1px solid var(--card-line)}
.today-card strong{display:block;font-size:15px}.today-card span{font-size:12px;color:#9fb0b5}
.today-card button{min-height:var(--ctl-h-min);padding:0 var(--s5);border-radius:var(--ctl-r);border:1px solid var(--ctl-line);background:transparent;color:#e6edf3;font-size:13px}
.today-card button.primary{background:var(--ui-lime,#b7ee72);color:#0b1408;border-color:transparent;font-weight:600}
.resume-gate .today-line{display:grid;width:100%;margin:10px 0 0;padding:8px 12px;border-radius:12px;border:1px solid #2d3a3e;background:#141d20;color:#e6edf3;text-align:start;min-height:48px;cursor:pointer}
.resume-gate .today-line small{font-size:var(--t-micro,10px);letter-spacing:.06em;color:var(--ui-lime,#b7ee72)}.resume-gate .today-line span{font-size:13px}
.trip-chapter{margin:0 0 8px;font-size:13px;color:var(--ui-lime,#b7ee72)}

/* Passenger mode (Cybercab): no driver controls, no overspeed nag. */
html[data-passenger="true"] .drive-selector,html[data-passenger="true"] .speed-warning{display:none}
.passenger-badge{margin-left:8px;padding:2px 8px;border-radius:999px;font-size:var(--t-micro,10px);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#0b1408;background:var(--ui-lime,#b7ee72)}
.seat-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.seat-choices button{display:grid;justify-items:center;gap:6px;min-height:64px;font-size:12px}

/* Sound trials: the countdown beside the sound tile, and the try button in the preview. */
.trial-pill{display:inline-flex;align-items:center;margin-left:10px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:0;color:#0b1408;background:var(--ui-lime,#b7ee72);white-space:nowrap;font-variant-numeric:tabular-nums}
.trial-btn{margin-top:10px;background:transparent;border:1px solid var(--ui-lime,#b7ee72);color:var(--ui-lime,#b7ee72)}
.trial-used{margin:10px 0 0;font-size:13px;color:#9fb0b5}
@media (max-height:800px){.trial-pill{font-size:11px;padding:3px 8px}}
/* Long subtitles in the newer sections wrap on narrow screens instead of widening the studio (320 px phones). */
[data-section="seat"] .section-label small,[data-section="trips"] .section-label small,[data-section="today"] .section-label small,[data-section="response"] .section-label small{white-space:normal;line-height:1.35}

/* RAW comparisons stay touchable and wrap at the car's compact width. */
.sound-preview{display:flex;flex-wrap:wrap}
.sound-preview small{flex-basis:100%}
.raw-v12-offer{padding:12px;border:1px solid var(--line, #444);border-radius:12px;margin-bottom:12px;min-width:0}
.raw-v12-offer h4,.raw-v12-offer p{margin:0 0 8px}
.raw-v12-offer .subscription-link,.raw-metrics-offer .subscription-link{min-width:48px;min-height:48px;white-space:normal}

.sound-preview button{display:inline-flex;align-items:center;justify-content:center}
.sound-preview button>.icon{flex:0 0 auto;margin-right:var(--s2)}
[dir=rtl] .sound-preview button>.icon{margin-right:0;margin-left:var(--s2)}
.billing-toggle button{display:inline-flex;align-items:center;justify-content:center}
.billing-toggle button>b{white-space:nowrap}
.billing-toggle button>.icon{flex:0 0 auto;margin-right:var(--s2)}
[dir=rtl] .billing-toggle button>.icon{margin-right:0;margin-left:var(--s2)}
.home-halloween-cta>.icon:first-child{margin-right:var(--s2)}
.home-halloween-cta>.icon:last-child{margin-left:var(--s2)}
.sound-preview button{background:#1a2427;color:#eef1ef;border:1px solid #46504b;border-radius:10px;font:inherit;max-width:100%;white-space:normal}
.sound-preview button[aria-pressed="true"]{border-color:#b9ef53;color:#b9ef53}
.sound-preview button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* RAW landing cards prioritize the compact Tesla browser. */
.home-raw-grid{gap:16px}
.home-raw-card{display:flex;flex-direction:column;min-width:0}
.home-raw-card .sound-preview{margin-top:16px}
.home-raw-price{margin-top:auto;padding:12px 0 16px;font-size:15px}
.home-raw-price strong{font-size:20px}
.home-raw-price span{color:#aeb9ba}
.home-raw-card .home-plan-link{margin-top:0}
.home-raw-metrics-link{max-width:640px;margin-top:20px}
@media (min-width:641px) and (max-width:1000px){.home-raw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-raw-card:last-child{grid-column:1/-1}}



.showcase-demo-link{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:var(--ui-lime,#b3ed59);text-decoration:underline}

.showcase-confirm{grid-column:1/-1;padding:12px;border:1px solid #b3ed59;border-radius:10px}.showcase-confirm>div{display:flex;flex-wrap:wrap;margin-top:10px}.showcase-confirm button{min-height:48px;white-space:normal}.showcase-confirm button+button{margin-left:0}

/* Showcase uses the existing upper 60% canvas; only this lower tray scrolls. */
.showcase-panel{position:fixed;z-index:40;left:0;right:0;bottom:0;box-sizing:border-box;height:40vh;max-height:40vh;display:flex;flex-direction:column;overflow:hidden;padding:12px 20px;background:#10171b;border-top:1px solid #3d4c54;box-shadow:0 -8px 28px #0002}
.showcase-header{display:flex;align-items:center;justify-content:space-between;flex:none;width:100%;max-width:1200px;margin:0 auto 10px;min-height:48px}
.showcase-heading{display:flex;align-items:center;min-width:0}
.showcase-mark{margin-right:12px}
.showcase-heading>div{min-width:0}
.showcase-mark{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border:1px solid #415149;border-radius:12px;background:#1c2924;color:#b3ed8b}
.showcase-panel .showcase-heading h3{margin:0;font-size:15px;line-height:1.3;letter-spacing:-.02em;font-weight:600;color:#f1f6f4}
.showcase-heading p{margin:4px 0 0;font-size:11px;line-height:1.2;color:#95a5ab;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.showcase-panel .showcase-close{display:flex;align-items:center;justify-content:center;flex:none;min-width:48px;min-height:48px;padding:0 14px;margin:0;border:1px solid #3b4a52;border-radius:10px;background:#192329;color:#ecf2f3;font-size:12px;font-weight:600}
.showcase-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:8px;scrollbar-width:thin}
.showcase-deck{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,1fr);gap:20px;align-items:start;width:100%;max-width:1200px;margin:0 auto;padding:2px 2px 8px;box-sizing:border-box}
.showcase-appearance{min-width:0}
.showcase-customization{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 12px}
.showcase-customization label{display:grid;gap:6px;min-width:0}
.showcase-customization label>span{color:#a6b4b9;font-size:11px;line-height:1.2;font-weight:600}
.showcase-customization select{box-sizing:border-box;width:100%;min-width:48px;min-height:48px;padding:10px 12px;border:1px solid #3b4a52;border-radius:10px;background:#1a252b;color:#eff5f6;font:inherit;font-size:13px}
.showcase-paint-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;color:#a6b4b9;font-size:var(--t-micro,10px);line-height:1.2;letter-spacing:.06em}
.showcase-paint-heading output{font-size:11px;font-variant-numeric:tabular-nums;color:#788d97;letter-spacing:0}
.showcase-colors{display:flex;align-items:center;flex-wrap:wrap;padding:2px}
.showcase-panel .showcase-colors button{position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;min-height:48px;flex:none;padding:0;margin:0 6px 6px 0;border:2px solid transparent;border-radius:50%;background:transparent;color:#fff;outline:none;text-shadow:none}
.showcase-color-fill{position:absolute;top:var(--s1);right:var(--s1);bottom:var(--s1);left:var(--s1);border:1px solid var(--card-line);border-radius:50%;background:var(--swatch-color)}
.showcase-color-symbol{position:relative;display:flex;align-items:center;justify-content:center;z-index:1;font-size:13px;font-weight:700}
.showcase-panel .showcase-colors button[aria-pressed="true"]{border-color:#c2eeaa;background:#c2eeaa12}
.showcase-colors button[aria-pressed="true"] .showcase-color-symbol{width:22px;height:22px;border-radius:50%;background:#13201b;color:#e0ffc8}
.showcase-panel .showcase-colors button:disabled{opacity:.45;cursor:not-allowed}
.showcase-colors button:disabled .showcase-color-symbol{width:22px;height:22px;border-radius:50%;background:#10171bc9}
.showcase-custom-color{margin:0 6px 6px 0;position:relative;display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 10px;border:1px dashed #587078;border-radius:10px;color:#bfccd0;font-size:11px;box-sizing:border-box;cursor:pointer}
.showcase-custom-color input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;min-height:var(--ctl-h-min);opacity:0;cursor:pointer}
.showcase-audio{min-width:0;padding:12px;border:1px solid #334249;border-radius:12px;background:#172227}
.showcase-panel .showcase-sound{display:flex;align-items:center;width:100%;min-width:48px;min-height:48px;padding:8px 10px;margin:0;border:1px solid #a6dc85;border-radius:9px;background:#b7e799;color:#172217;text-align:start}
.showcase-sound>span:first-of-type{flex:1;min-width:0}
.showcase-sound small{display:block;font-size:11px;font-weight:600;line-height:1.2;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showcase-sound strong{display:block;font-size:12px;line-height:1.5;font-weight:600}
.showcase-panel .showcase-sound.is-ready{background:#233c2d;border-color:#5e8661;color:#d0efbd}
.showcase-panel .showcase-sound:disabled{opacity:.65}
.showcase-rev-control{display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:10px;color:#b6c5ca;font-size:11px}
.showcase-rev-control output{color:#eef6f7;font-size:20px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.showcase-rev-control output small{font-size:11px;margin-left:3px;color:#8fa6ad}
.showcase-rev-control input{grid-column:1/-1;box-sizing:border-box;width:100%;min-width:48px;height:48px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.showcase-rev-control input::-webkit-slider-runnable-track{height:5px;border-radius:4px;background:linear-gradient(to right,#b7e799 var(--showcase-rev),#394c54 var(--showcase-rev))}
.showcase-rev-control input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9.5px;border:3px solid #1b2a28;border-radius:50%;background:#c8f1ae;box-shadow:0 0 0 1px #789d73}
.showcase-rev-control input::-moz-range-track{height:5px;border-radius:4px;background:#394c54}
.showcase-rev-control input::-moz-range-progress{height:5px;background:#b7e799}
.showcase-rev-control input::-moz-range-thumb{width:22px;height:22px;border:2px solid #1b2a28;border-radius:50%;background:#c8f1ae}
.showcase-audio .showcase-sound-notice{margin:0;min-height:14px;color:#9fb3ba;font-size:11px;line-height:1.4}
.showcase-panel button:focus,.showcase-panel select:focus,.showcase-panel input:focus{outline:3px solid var(--focus);outline-offset:2px}
.showcase-custom-color:focus-within{outline:3px solid var(--focus);outline-offset:2px}
@media(max-width:620px){.showcase-panel{padding:var(--row-pad)}.showcase-deck{grid-template-columns:minmax(0,1fr);gap:var(--s4)}.showcase-mark{display:none}.showcase-panel .showcase-heading h3{font-size:15px}.showcase-panel .showcase-close{padding:0;width:48px}.showcase-close>span{display:none}.showcase-customization{gap:8px}.showcase-custom-color>span{display:none}}
@media(min-width:621px) and (max-height:600px){.showcase-panel{padding:8px 16px}.showcase-header{margin-bottom:6px}.showcase-deck{gap:16px}.showcase-audio{padding:8px}.showcase-customization{margin-bottom:8px}.showcase-heading p{margin-top:2px}}

.showcase-close>svg{margin-left:var(--s3)}
.garage-actions>*,.sound-preview>*,.showcase-confirm>div>*{margin:0 var(--s3) var(--s3) 0}
[dir="rtl"] .garage-actions>*,[dir="rtl"] .sound-preview>*,[dir="rtl"] .showcase-confirm>div>*{margin:0 0 var(--s3) var(--s3)}
.showcase-header>*+*,.showcase-heading>*+*,.showcase-paint-heading>*+*,.first-drive-coach .coach-head>*+*,.first-drive-coach .coach-actions>*+*{margin-left:var(--s4)}
.trip-toggles label>*+*{margin-left:var(--s4)}
.showcase-panel .showcase-sound>*+*{margin-left:var(--s3)}
.showcase-panel .showcase-close,.showcase-panel .showcase-sound,.showcase-custom-color{gap:0}
.showcase-sound>svg,.showcase-custom-color>svg{margin-right:8px}
@media(max-width:620px){.showcase-close>svg,.showcase-custom-color>svg{margin-left:0;margin-right:0}}

/* First-drive coach: one anchored card at a time, never modal. Hidden while a
   real car moves; the demo drives itself, so there it stays visible. */
.first-drive-coach{position:fixed;z-index:66;width:min(320px,calc(100vw - 32px));padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:var(--ui-paper,#f1eee7);box-shadow:var(--float-shadow);animation:coach-in .2s ease}
.first-drive-coach:before{content:"";position:absolute;left:var(--coach-arrow,32px);top:-8px;width:14px;height:14px;background:var(--card-bg);border:1px solid var(--card-line);border-width:1px 0 0 1px;transform:rotate(45deg)}
.first-drive-coach[data-place="above"]:before{top:auto;bottom:-8px;transform:rotate(225deg)}
.first-drive-coach .coach-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.first-drive-coach .commerce-kicker{margin:0}
.first-drive-coach .coach-step{font-size:11px;letter-spacing:.06em;color:var(--ui-muted,#aeb5b7)}
.first-drive-coach h2{margin:0 0 var(--s1);font-size:var(--t-title);font-weight:var(--w-med);line-height:1.2}
.first-drive-coach p{margin:0 0 var(--s4);font-size:var(--t-body);line-height:1.5;color:#b0bdc0}
.first-drive-coach .coach-actions{display:flex;align-items:center;justify-content:space-between}
.first-drive-coach .coach-actions .checkout-btn{min-height:var(--ctl-h-min);margin:0;padding:0 var(--s6);font-size:var(--t-ctl);display:inline-flex;align-items:center}
.first-drive-coach .coach-actions .text-action{min-height:var(--ctl-h-min);padding:0 var(--s3);white-space:nowrap}
.coach-target{outline:3px solid var(--focus)!important;outline-offset:2px;border-radius:var(--card-r)}
html[data-moving="true"] #app:not(.demo-mode) .first-drive-coach{opacity:0;pointer-events:none}
html[data-moving="true"] #app:not(.demo-mode) .coach-target{outline:none!important}
/* Phone-landscape heights leave no room beside the demo controls. */
@media(max-height:440px){.first-drive-coach{display:none}.coach-target{outline:none!important}}
@keyframes coach-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.first-drive-coach{animation:none}}

@media(max-width:620px){.showcase-customization{grid-template-columns:repeat(2,minmax(0,1fr))}.showcase-customization label:last-child{grid-column:1/-1}}

/* Car editor: one appearance task at a time, with no extra rendering context. */
.car-editor{margin:var(--s4) 0;color:#e8eff1;min-width:0;border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);overflow:hidden}
.editor-summary{display:grid;grid-template-columns:minmax(0,1fr) 130px;align-items:center;padding:16px 16px 8px}
.editor-eyebrow{font-size:var(--t-micro,10px);font-weight:700;letter-spacing:.06em;color:#9eb7ae}
.car-editor .editor-summary h2{margin:5px 0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#f2f6f4}
.car-editor .editor-summary p{margin:0;font-size:11px;color:#a6b6bd;line-height:1.5}
.editor-car-outline{display:block;width:100%;max-width:160px;height:60px}
.editor-preview{padding:0 12px 12px}.editor-preview .showcase-tools{padding:0;border:0}.editor-preview .showcase-tools>p:empty{display:none}
.editor-preview .showcase-tools .editor-preview-button{width:100%;min-height:48px;display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;padding:8px 12px;margin:0;border:1px solid #405249;border-radius:10px;background:#1b2b25;color:#d5ebd7;text-align:left;font-size:12px;font-weight:600}
.editor-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0 8px;border-top:1px solid #2b383f;border-bottom:1px solid #2b383f;background:#10181c}
.car-editor .editor-tabs button{min-width:0;min-height:48px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#9caeb7;font-size:12px;font-weight:600;cursor:pointer;padding:8px 4px}
.car-editor .editor-tabs button[aria-selected="true"]{border-bottom-color:#b7dd9f;color:#d9eecf;background:#1b2724}
.editor-content{padding:12px}.car-editor .editor-hint{margin:0 0 12px;color:#adbbc2;font-size:12px;line-height:1.5}
.editor-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.car-editor .editor-option{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;min-height:var(--ctl-h-tile);padding:var(--row-pad);column-gap:var(--s3);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:#dfe9eb;text-align:left;cursor:pointer;min-width:0}
.car-editor .editor-option.is-selected{border-color:var(--sel-line);background:var(--sel-bg);box-shadow:none}
.editor-option-label{font-size:12px;font-weight:600;line-height:1.25;overflow-wrap:break-word}.editor-option-state{display:flex;align-items:center;color:#a0b0b9;font-size:11px;line-height:1.3}.editor-option-state svg{margin-right:4px}.editor-option.is-selected .editor-option-state{color:#cee8bc}
.editor-option>.editor-car-outline{grid-column:1/-1;height:42px;justify-self:center;margin-bottom:6px}.editor-bodies .editor-option{grid-template-columns:1fr;padding:8px 12px;min-height:98px}.editor-bodies .editor-option-label,.editor-bodies .editor-option-state{justify-content:center;text-align:center}
.editor-wheel,.editor-finish{grid-row:1/3;width:42px;height:42px}.editor-finish{border-radius:50%;background:linear-gradient(140deg,#ffffffaa,transparent 42%,#0008),var(--editor-color);border:1px solid #ffffff30;box-shadow:inset 0 0 8px #0004}.editor-finish.finish-matte{background:var(--editor-color);box-shadow:inset -7px -7px 14px #0005}.editor-finish.finish-satin{background:linear-gradient(120deg,#fff4,transparent 65%),var(--editor-color)}.editor-finish.finish-brushed{background:repeating-linear-gradient(0deg,#fff2 0 1px,transparent 1px 3px),linear-gradient(120deg,#fff5,#0006),var(--editor-color)}.editor-finish.finish-pearl{background:linear-gradient(135deg,#f0c9e7aa,#caefffaa 35%,transparent 60%,#0006),var(--editor-color)}
.car-editor h3{margin:16px 0 10px;font-size:12px;color:#dbe5e8;letter-spacing:0;text-transform:none}.editor-field-heading{display:flex;align-items:center;justify-content:space-between}.editor-field-heading h3{margin-top:0}.editor-field-heading output{font-size:11px;color:#9bafb9}
.car-editor .editor-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:10px}
html[data-tesla="true"] .car-editor .editor-swatches>button,.car-editor .editor-swatches>button{position:relative;display:grid;place-items:center;width:100%;min-width:48px;height:48px;min-height:48px;margin:0;padding:6px;border:1px solid #39484f;border-radius:9px;background:#182329;box-shadow:none;transform:none;cursor:pointer}
.car-editor .editor-swatches>button>span{display:block;width:28px;height:28px;border-radius:50%;background:var(--editor-color);border:1px solid #ffffff40}.car-editor .editor-swatches>button[aria-pressed="true"]{border-color:var(--sel-line);background:var(--sel-bg)}.editor-swatches b,.editor-swatches svg{position:absolute;right:3px;bottom:3px;color:#fff;background:#142018;border-radius:3px;font-size:11px;padding:1px}
.editor-custom-color,.car-editor .editor-upgrade{display:flex;justify-content:space-between;align-items:center;min-height:48px;width:100%;padding:0 10px;border:1px solid #35464d;border-radius:9px;background:#19242a;color:#c6d6dd;font-size:12px;box-sizing:border-box}.editor-custom-color input{width:56px;height:48px;background:transparent;border:0;cursor:pointer}.editor-upgrade span{margin-left:8px;font-size:11px;color:#bad39f}
.editor-more{margin-top:10px}.editor-more summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;font-size:12px;cursor:pointer;color:#c0cfd5}.editor-more summary::-webkit-details-marker{display:none}.editor-more[open] summary>svg{transform:rotate(90deg)}.editor-more .editor-hint{margin:12px 0 0}
.car-editor .editor-pro-note{display:flex;align-items:center;margin:14px 0 0;font-size:11px;line-height:1.5;color:#b4c6ac}.editor-pro-note svg{flex:none;margin-right:8px}
.editor-builds{display:grid;gap:10px}.car-editor .editor-builds button{display:grid;grid-template-columns:92px minmax(0,1fr) 16px;column-gap:12px;align-items:center;min-height:100px;width:100%;padding:12px;border:1px solid #3c4c52;border-radius:12px;background:#1c282e;text-align:left;color:#e3ecee;cursor:pointer}.editor-builds strong,.editor-builds small,.editor-builds b{display:block}.editor-builds strong{font-size:13px}.editor-builds small{font-size:11px;color:#a6b8c0;margin-top:6px;line-height:1.4}.editor-builds b{color:#b4d5a1;font-size:11px;margin-top:8px}
.editor-footer{display:flex;align-items:center;padding:12px;border-top:1px solid #2b383f;font-size:11px;line-height:1.4;color:#9bafa6}.editor-saved-dot{width:5px;height:5px;border-radius:50%;background:#aec698;flex:none;margin-right:7px}
.car-editor button:focus-visible,.car-editor summary:focus-visible,.car-editor input:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
@media(max-width:380px){.editor-summary{grid-template-columns:minmax(0,1fr) 86px;padding:12px}.car-editor .editor-summary h2{font-size:20px}.car-editor .editor-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-options{gap:6px}.car-editor .editor-option{padding:8px;column-gap:6px;grid-template-columns:34px minmax(0,1fr)}.editor-wheel,.editor-finish{width:34px;height:34px}.editor-bodies .editor-option{grid-template-columns:1fr}.car-editor .editor-builds button{grid-template-columns:66px minmax(0,1fr) 16px;column-gap:8px}}
.editor-select{display:grid;gap:7px;margin:14px 0 10px;font-size:12px;color:#ccdbdf}.editor-select select{width:100%;min-width:48px;min-height:48px;padding:8px 10px;border:1px solid #43565e;border-radius:9px;background:#1b282e;color:#e3ecee;font:inherit}.editor-select select:disabled{opacity:.6}
.editor-footer>span:nth-child(2){flex:1}.car-editor .editor-footer button{min-width:56px;min-height:48px;margin-left:8px;padding:8px;border:1px solid #43564a;border-radius:8px;background:#243029;color:#d0e6c4;font-size:12px;cursor:pointer}
.editor-preview .setting-section.showcase-tools{display:block;padding:0;margin:0;border:0;background:transparent;border-radius:0}
.editor-preview .setting-section.showcase-tools>button{grid-column:auto;grid-row:auto;white-space:normal}
/* One fixed settings header is enough while editing: stacked sticky navigation
   can obscure the editor's tabs on tall browser viewports. */
.panel.car-editor-panel .panel-nav{position:static}
.car-editor button,.car-editor select,.car-editor input,.car-editor summary{scroll-margin-top:90px;scroll-margin-bottom:12px}

/* Racing on the landing page. The counts come from the catalogue, so they are
   rendered rather than written, and the strip has to hold four numbers of
   varying width without reflowing the section. */
.home-racing-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 28px;padding:0;list-style:none;text-align:center}
.home-racing-stats li{padding:16px 8px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.home-racing-stats strong{display:block;font-size:var(--n-sm);line-height:1.1;letter-spacing:var(--ls-tight)}
.home-racing-stats span{display:block;margin-top:4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.home-racing-steps{margin-top:28px}
/* The strip between the hero and the page body: the objections that stop a
   first visit, answered before the page asks for anything. auto-fit, because
   the racing item is only there when /race exists. */
.home-proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;max-width:1180px;margin:0 auto;padding:20px 48px;list-style:none}
.home-proof li{display:flex;align-items:flex-start;padding:14px 16px;border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.home-proof>li>.icon{flex:0 0 auto;margin-top:1px;color:#a3e635}
.home-proof li>div{margin-left:12px;min-width:0}
[dir=rtl] .home-proof li>div{margin-left:0;margin-right:12px}
.home-proof strong{display:block;font-size:13px;font-weight:600;color:#e4ebe2}
.home-proof span{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:#aeb9ba}
@media(max-width:900px){.home-proof{padding:16px 28px}}

/* The same three answers again where they decide a purchase rather than a
   visit: beside the price, not 600 px below it in the billing small print. */
.home-assurance{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;margin:28px 0 4px;padding:0;list-style:none}
.home-assurance li{display:flex;align-items:flex-start;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.home-assurance>li>.icon{flex:0 0 auto;margin-top:2px;color:#e5b48b}
.home-assurance li>div{margin-left:14px;min-width:0}
[dir=rtl] .home-assurance li>div{margin-left:0;margin-right:14px}
.home-assurance strong{display:block;font-size:14px;font-weight:600;color:#e4ebe2}
.home-assurance p{margin:6px 0 0;font-size:12px;line-height:1.6;color:#aeb9ba}

/* Four arguments for the road-and-charger loop read as a square, not as a row
   of three with one stranded underneath it. */
.home-loop .home-features{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.home-loop .home-features{grid-template-columns:minmax(0,1fr)}}

.home-racing-access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.home-racing-access article{padding:20px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.03)}
.home-racing-access h3{margin:10px 0 8px;font-size:15px}
.home-racing-access p{margin:0;font-size:13px;line-height:1.55;opacity:.82}
.home-racing-access .home-plan-link{margin-top:14px}
@media(max-width:900px){.home-racing-access{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){
 .home-racing-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-racing-stats strong{font-size:20px}
}

/* The road-and-charger pitch under the demo. Two calls to action sit side by
   side here, so the row wraps rather than squeezing on a narrow screen. */
.home-loop .home-feature-actions{display:flex;flex-wrap:wrap}
.home-loop .home-feature-actions>*{margin:0 14px 10px 0}
.home-loop-note{margin:18px 0 0;font-size:13px;line-height:1.6;opacity:.72}

/* Racing on the first screen. It sits between the demo, which asks nothing of
   anyone, and setting up a real drive: the same accent as the demo card so the
   two free doors read as a pair. */
.welcome-page .experience-card.race-entry-card .entry-icon{color:var(--race-lime,#54e8cf)}
.welcome-page .experience-card.race-entry-card .entry-action{color:var(--race-lime,#54e8cf)}

/* The open League season on the home page: one line, the season's colour. */
.home-racing-stats .home-racing-season{grid-column:1/-1;flex-basis:100%;text-align:left}
.home-racing-stats .home-racing-season strong{font-size:var(--n-sm)}
.home-racing-stats .home-racing-season[data-season="halloween"] strong{color:#f8af65}

/* Halloween on the home page: one dark band while the season is open. Fog,
   a moon and three bats are CSS and one inline path each — no assets, no
   animation heavier than a slow drift, and nothing without the season. */
.home-halloween{position:relative;overflow:hidden;margin:0 0 28px;padding:28px 26px 26px;border-radius:22px;color:#f3ecff;background:radial-gradient(120% 90% at 20% 110%,#2a1436 0,#140f22 48%,#0b0f1a 100%);border:1px solid #4a2a63;isolation:isolate}
.home-halloween-moon{position:absolute;right:8%;top:-34px;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff4d0 0,#f3e2b0 40%,#d8c48e 70%,rgba(216,196,142,0) 72%);box-shadow:0 0 60px 18px rgba(255,232,170,.22);opacity:.92;z-index:0}
.home-halloween-fog{position:absolute;top:auto;right:0;bottom:0;left:0;height:46%;background:linear-gradient(180deg,rgba(38,49,69,0) 0,rgba(38,49,69,.55) 60%,rgba(38,49,69,.8) 100%);z-index:0;pointer-events:none}
.home-halloween-bat{position:absolute;width:38px;height:14px;color:#0a0a12;opacity:.9;z-index:1;animation:home-bat-drift 9s ease-in-out infinite}
.home-halloween-bat-0{left:14%;top:18%}.home-halloween-bat-1{left:22%;top:30%;width:28px;animation-delay:-3s}.home-halloween-bat-2{right:26%;top:14%;width:30px;animation-delay:-6s}
@keyframes home-bat-drift{0%,100%{transform:translate(0,0) scaleY(1)}25%{transform:translate(9px,-6px) scaleY(.7)}50%{transform:translate(0,-10px) scaleY(1)}75%{transform:translate(-8px,-4px) scaleY(.75)}}
@media (prefers-reduced-motion:reduce){.home-halloween-bat{animation:none}}
.home-halloween-copy{position:relative;z-index:2;max-width:720px}
.home-halloween .welcome-eyebrow{color:#ffb15c}
.home-halloween h2{margin:var(--s3) 0;font-size:var(--t-head);line-height:20px;letter-spacing:var(--ls-tight);color:#fff}
.home-halloween p{margin:0 0 12px;color:#d9cfec;line-height:1.5}
.home-halloween-ladder{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 16px;padding:0;list-style:none;counter-reset:tier}
.home-halloween-ladder li{padding:10px 8px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,177,92,.28);text-align:center}
.home-halloween-ladder li strong{display:block;color:#ffb15c;font-size:var(--t-ctl);letter-spacing:0}
.home-halloween-ladder li span{display:block;margin-top:3px;font-size:12px;color:#cdbfe6}
.home-halloween-field,.home-halloween-prize{font-size:13px}
/* `.welcome-button` had no definition in any stylesheet, so the season's only
   call to action rendered as an underlined link with a stray orange block
   behind it: 48 px tall, zero padding, the label sitting outside its own
   background. It is the page's primary button shape, named here once. */
.welcome-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s6,20px);border:1px solid transparent;border-radius:var(--ctl-r,12px);font-size:var(--t-ctl,14px);font-weight:var(--w-med,600);line-height:1.2;text-align:center;text-decoration:none;background:#e6ac7f;color:#172022}
.welcome-button:hover,.welcome-button:focus-visible{background:#f1be96;color:#172022}
.home-halloween-cta{margin-top:14px;background:#ff982e;color:#1a0f05;border-color:#ffb15c}
.home-halloween-cta:hover{background:#ffb15c}
.race-entry-card.is-halloween{border-color:#ff982e;box-shadow:0 0 0 1px rgba(255,152,46,.35),0 12px 40px rgba(255,152,46,.12)}
.race-entry-card.is-halloween .entry-icon{color:#ff982e}
@media (max-width:760px){.home-halloween{padding:22px 18px 20px}.home-halloween h2{font-size:20px}.home-halloween-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}.home-halloween-ladder li:last-child{grid-column:1/-1}.home-halloween-moon{right:-20px;top:-40px;width:92px;height:92px}}
.home-halloween-skeleton{position:absolute;right:16%;bottom:8px;width:44px;height:106px;color:#e9e2cf;opacity:.85;z-index:1;transform:rotate(-6deg)}
@media (max-width:760px){.home-halloween-skeleton{right:6px;width:34px;height:82px}}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .showcase-tools button+button{margin-left:0;margin-right:8px}
[dir=rtl] .trip-stats strong em{margin-left:0;margin-right:4px}
[dir=rtl] /* Motion source tag,[dir=rtl] drive of the day,[dir=rtl] chapter line. */
.motion-tag{margin-left:0;margin-right:8px}
[dir=rtl] .passenger-badge{margin-left:0;margin-right:8px}
[dir=rtl] /* Sound trials: the countdown beside the sound tile,[dir=rtl] and the try button in the preview. */
.trial-pill{margin-left:0;margin-right:10px}
[dir=rtl] .showcase-confirm button+button{margin-left:0;margin-right:0}
[dir=rtl] .showcase-mark{margin-right:0;margin-left:12px}
[dir=rtl] .showcase-rev-control output small{margin-left:0;margin-right:3px}
[dir=rtl] .showcase-close>svg{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .showcase-header>*+*,[dir=rtl] .showcase-heading>*+*,[dir=rtl] .showcase-paint-heading>*+*,[dir=rtl] .first-drive-coach .coach-head>*+*,[dir=rtl] .first-drive-coach .coach-actions>*+*{margin-left:0;margin-right:var(--s4)}
[dir=rtl] .trip-toggles label>*+*{margin-left:0;margin-right:var(--s4)}
[dir=rtl] .showcase-panel .showcase-sound>*+*{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .showcase-sound>svg,[dir=rtl] .showcase-custom-color>svg{margin-right:0;margin-left:8px}
[dir=rtl] .editor-option-state svg{margin-right:0;margin-left:4px}
[dir=rtl] .editor-upgrade span{margin-left:0;margin-right:8px}
[dir=rtl] .editor-pro-note svg{margin-right:0;margin-left:8px}
[dir=rtl] .editor-saved-dot{margin-right:0;margin-left:7px}
[dir=rtl] .car-editor .editor-footer button{margin-left:0;margin-right:8px}

/* navigation.css */
/* Route card: a glance surface for the car, not a document. Tokens come from
   design-system.css. The outer bounds per viewport were tuned against
   test/e2e/navigation-layout.spec.js and navigation-compact.spec.js; change
   them with those suites running. */
/* The heading stays put and the content scrolls beneath it, so no control ever sits half under the heading. */
.navigation-map{position:absolute;z-index:8;right:24px;top:190px;width:320px;max-height:calc(100% - 330px);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--hairline,#34434b);border-radius:18px;background:var(--glass-strong,rgba(10,15,18,.94));color:var(--text-1,#f6faf9);box-shadow:0 14px 40px rgba(0,0,0,.4);font-size:13px;line-height:1.35;scrollbar-width:thin}
.navigation-map button{cursor:pointer;color:inherit;background:transparent;border:0;font:inherit;min-width:48px;min-height:48px}
.navigation-map button:focus{outline:3px solid var(--focus);outline-offset:-3px}

/* Heading: the title, or the next maneuver while collapsed. */
#navigation-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.navigation-heading{position:relative;flex-shrink:0;z-index:3;display:flex;align-items:center;width:100%;min-height:48px;padding:6px 10px 6px 14px;text-align:left;background:#0f1a20;border-bottom:1px solid var(--hairline,#34434b)}
.navigation-heading[aria-expanded="false"]{border-bottom:0}
.navigation-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2,#aab7bc);white-space:nowrap}
.navigation-toggle-label{margin-left:auto;flex-shrink:0;padding:6px 10px;border:1px solid var(--hairline,#34434b);border-radius:999px;font-size:12px;font-weight:600;color:var(--text-2,#aab7bc)}
.navigation-heading[aria-expanded="false"] .navigation-toggle-label{padding:2px 10px 4px;font-size:20px;line-height:1}
.navigation-peek{display:flex;flex:1;align-items:center;min-width:0;color:var(--text-1,#f6faf9)}
.navigation-peek .maneuver-icon{flex-shrink:0;color:#6ce3c4}
.navigation-peek b{font-size:15px;font-weight:700;white-space:nowrap}
.navigation-peek>span{font-size:12px;color:var(--text-2,#aab7bc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigation-has-peek .navigation-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.navigation-approaching .navigation-peek b{color:#6ce3c4}

/* Status and warnings. */
.navigation-map p{margin:10px 14px;line-height:1.5;color:var(--text-2,#aab7bc)}
.navigation-status{display:flex;align-items:center;padding:8px 10px;border:1px dashed var(--hairline,#34434b);border-radius:10px;font-size:13px}
.navigation-status::before{content:'';flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#6ce3c4;box-shadow:0 0 0 3px rgba(108,227,196,.18)}

/* Locked and not-yet-connected states. */
.navigation-locked{padding:6px}
.navigation-locked button{display:flex;align-items:center;width:100%;padding:8px 10px;border-radius:12px;text-align:left}
.navigation-locked-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#16262b;color:#6ce3c4}
.navigation-locked span{display:grid;gap:3px;min-width:0}
.navigation-locked small{font-size:11px;color:var(--text-2,#aab7bc)}
.navigation-locked strong{font-size:13px;color:#6ce3c4}

/* Guidance: the one block a driver reads in a glance. */
.navigation-guidance{display:grid;gap:5px;padding:8px 14px 8px}
.navigation-maneuver-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#75dfba}
.navigation-next{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:start}
.navigation-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--hairline,#34434b);border-radius:12px;background:#16262b;color:#eaf6f3}
.navigation-next-text{display:grid;gap:2px;min-width:0}
.navigation-distance{display:flex;flex-wrap:wrap;align-items:center;font-size:20px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:#fff}
.navigation-exit-badge{padding:3px 7px;border-radius:6px;background:#6ce3c4;color:#072922;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.navigation-instruction{font-size:15px;line-height:1.3;color:var(--text-1,#f6faf9);overflow-wrap:anywhere}
.navigation-exit{font-size:12px;color:var(--text-2,#aab7bc);overflow-wrap:anywhere}
.navigation-progress{height:4px;overflow:hidden;border-radius:2px;background:#22313a}
.navigation-progress i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#3fb8a0,#6ce3c4);transition:width .6s linear}
.navigation-approaching{border-color:rgba(108,227,196,.45)}
.navigation-approaching .navigation-icon{background:#6ce3c4;border-color:#6ce3c4;color:#072922}
.navigation-approaching .navigation-distance{color:#6ce3c4}
.navigation-arrived .navigation-distance{font-size:20px}
.navigation-lanes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(30px,1fr);gap:4px;max-width:100%;margin-top:2px}
.navigation-lanes span{display:flex;align-items:center;justify-content:center;height:32px;padding:0 4px;border:1px solid transparent;border-radius:8px;background:#121c21;color:#4d5b62}
.navigation-lanes .valid{border-color:rgba(255,255,255,.55);color:#fff}
.navigation-lanes .active{border-color:#6ce3c4;background:#6ce3c4;color:#072922}

/* Trip line and destination row with the view toggle. */
.navigation-trip{display:flex;flex-wrap:wrap;align-items:baseline;padding:6px 14px 8px;border-top:1px solid var(--hairline,#34434b)}
.navigation-trip span{display:flex;align-items:baseline;white-space:nowrap}
.navigation-trip strong{font-size:15px;font-weight:700;color:#fff}
.navigation-trip small{font-size:11px;color:var(--text-2,#aab7bc)}
/* The view toggle floats over the map's corner so the destination line keeps its full width. */
.navigation-caption{position:relative;z-index:1;display:flex;justify-content:flex-end;margin:-54px 6px 6px 0;pointer-events:none}
.navigation-caption button{pointer-events:auto;background:#0f1a20f2}
.navigation-destination{display:flex;align-items:center;min-width:0;max-width:100%;font-size:12px;color:var(--text-2,#aab7bc)}
.navigation-destination .maneuver-icon{flex-shrink:0;color:#6ce3c4}
.navigation-destination>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navigation-view{flex-shrink:0;padding:0 12px;border:1px solid var(--hairline,#34434b);border-radius:999px;font-size:12px;font-weight:600;color:var(--text-1,#f6faf9)}
.navigation-view[aria-pressed="true"]{border-color:#6ce3c4;background:#16262b;color:#6ce3c4}

/* Map and its credit. The map is a button: tap to enlarge at street-name zoom. */
.navigation-drawing-button{display:block;width:100%;padding:0;border:0;border-radius:0;background:none;text-align:left}
.navigation-drawing-button:focus{outline:none}
.navigation-drawing-button:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
.navigation-drawing{display:block;width:100%;height:150px;background:#14232d}
.navigation-mapmode .navigation-drawing{height:220px}
.navigation-mapmode .navigation-instruction,.navigation-mapmode .navigation-exit,.navigation-mapmode .navigation-lanes,.navigation-mapmode .navigation-upcoming,.navigation-mapmode .navigation-progress{display:none}
.navigation-mapmode .navigation-guidance{padding-bottom:6px}
.navigation-attribution{padding:4px 10px;font-size:11px;color:var(--text-3,#77868d);background:#0d151b}
.navigation-attribution a{color:var(--text-2,#aab7bc)}

/* Then: the two maneuvers after the next one. */
.navigation-upcoming{padding:8px 14px 4px;border-top:1px solid var(--hairline,#34434b)}
.navigation-upcoming>small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2,#aab7bc)}
.navigation-upcoming ol{display:grid;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.navigation-upcoming li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;min-height:32px}
.navigation-upcoming li div{display:grid;gap:1px;overflow-wrap:anywhere}
.navigation-upcoming li span{font-size:13px;color:var(--text-1,#f6faf9)}
.navigation-upcoming li strong{font-size:12px;color:#75dfba}
.navigation-step-arrow{display:flex;align-items:center;justify-content:center;color:var(--text-2,#aab7bc)}
.navigation-map .navigation-note{margin:6px 14px 10px;font-size:11px;color:var(--text-3,#77868d)}
.navigation-heading>*+*:not(.navigation-toggle-label),.navigation-locked button>*+*{margin-left:var(--s3)}
.navigation-peek>*+*,.navigation-status>*+*,.navigation-distance>*+*,.navigation-destination>*+*,.navigation-trip span>*+*{margin-left:var(--s2)}
.navigation-trip>*{margin-right:var(--s5)}
.navigation-lanes span>*+*{margin-left:1px}
@media(prefers-reduced-motion:reduce){.navigation-progress i{transition:none}}

/* Car bounds. The drive page always carries data-tesla; these keep the card
   above the instruments at every viewport in test/e2e/tesla-viewports.js. */
html[data-tesla="true"] .navigation-map{top:230px;right:16px;width:320px;max-height:calc(100vh - 506px);backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-height:850px){html[data-tesla="true"] .navigation-map{top:94px;max-height:calc(100vh - 370px)}}
@media(max-height:740px){html[data-tesla="true"] .navigation-map{top:82px;max-height:calc(100vh - 322px)}}
@media(max-height:620px){html[data-tesla="true"] .navigation-map{top:82px;max-height:calc(100vh - 312px)}}
@media(max-width:850px) and (min-height:741px){html[data-tesla="true"] .navigation-map{top:82px;max-height:calc(100vh - 406px)}}

/* Tight heights (every landscape car size): guidance first at full width, then
   the map beside the trip line; the "Then" list scrolls under the sticky heading. */
@media(max-height:850px),(max-width:850px){
 html[data-tesla="true"] #navigation-content{display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-areas:"status status" "guidance guidance" "drawing trip" "view trip" "attribution upcoming" "warning warning" "note note";align-content:start}
 html[data-tesla="true"] .navigation-mapmode #navigation-content{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status status" "guidance guidance" "drawing drawing" "trip view" "attribution attribution" "warning warning" "note note"}
 html[data-tesla="true"] .navigation-status{grid-area:status}
 html[data-tesla="true"] .navigation-guidance{grid-area:guidance}
 html[data-tesla="true"] .navigation-map-frame{grid-area:drawing}
 html[data-tesla="true"] .navigation-drawing-button{align-self:stretch;height:100%;min-height:84px;max-height:118px}
 html[data-tesla="true"] .navigation-drawing{height:100%;min-height:84px}
 html[data-tesla="true"] .navigation-mapmode .navigation-drawing-button{max-height:none;height:auto}
 html[data-tesla="true"] .navigation-mapmode .navigation-drawing{height:200px}
 html[data-tesla="true"] .navigation-caption{grid-area:view;margin:0;padding:0;justify-content:stretch;background:#0d151b}
 html[data-tesla="true"] .navigation-caption button{width:100%;border-radius:0;border-width:0 0 1px;background:transparent}
 html[data-tesla="true"] .navigation-mapmode .navigation-caption{background:transparent;padding-right:6px}
 html[data-tesla="true"] .navigation-mapmode .navigation-caption button{width:auto;border-radius:999px;border-width:1px;padding:0 12px}
 html[data-tesla="true"] .navigation-trip{grid-area:trip;flex-direction:column;align-items:flex-start;padding:var(--row-pad);border-top:0}
 html[data-tesla="true"] .navigation-trip .navigation-destination{margin-top:2px}
 html[data-tesla="true"] .navigation-attribution{grid-area:attribution}
 html[data-tesla="true"] .navigation-upcoming{grid-area:upcoming;padding-top:4px;border-top:0}
 html[data-tesla="true"] .navigation-warning{grid-area:warning}
 html[data-tesla="true"] .navigation-note{grid-area:note}
}

/* Small windows: a compact pill that opens as a bounded dialog. */
.navigation-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:17;background:#0009}
html[data-tesla="true"] .navigation-compact:not(.navigation-modal){top:78px;right:12px;width:180px;max-width:calc((100vw - 36px)/2);max-height:none}
html[data-tesla="true"] .navigation-compact:not(.navigation-modal) .navigation-peek>span{display:none}
html[data-tesla="true"] .navigation-modal{position:fixed;z-index:18;top:12px;right:12px;bottom:12px;left:12px;width:auto;max-width:640px;max-height:calc(var(--app-height,100vh) - 24px);margin:auto;background:#10191f;font-size:13px}
html[data-tesla="true"] .navigation-modal #navigation-content{display:block}
html[data-tesla="true"] .navigation-modal .navigation-distance{font-size:20px}
html[data-tesla="true"] .navigation-modal .navigation-instruction{font-size:15px}
html[data-tesla="true"] .navigation-modal .navigation-drawing{height:240px}
html[data-tesla="true"] .navigation-modal .navigation-mapmode .navigation-drawing,html[data-tesla="true"] .navigation-modal.navigation-mapmode .navigation-drawing{height:320px}
html[data-tesla="true"] .navigation-modal .navigation-caption{margin-top:-60px;margin-right:12px}
html[data-tesla="true"] .navigation-modal .navigation-lanes{grid-auto-columns:minmax(40px,1fr);gap:var(--s2)}
html[data-tesla="true"] .navigation-modal .navigation-lanes span{height:44px}
html[data-tesla="true"] .navigation-modal .navigation-upcoming li span{font-size:15px}
@media(max-height:500px) and (orientation:landscape){html[data-tesla="true"] .navigation-compact:not(.navigation-modal){top:70px}}

/* Map upgrade: controls over the map (48 px, at the edges so the map stays tappable), typed destinations, marks and scale. */
.navigation-map-frame{position:relative;min-width:0}
.navigation-map-frame .navigation-drawing-button{height:100%}
.navigation-map-controls{position:absolute;top:8px;right:8px;display:grid;gap:6px;z-index:2}
.navigation-map-controls button,.navigation-orient{min-width:48px;min-height:48px;padding:0;border-radius:12px;border:1px solid #34434b;background:#0f1a20f2;color:#f6faf9;font-size:20px;font-weight:600;display:grid;place-items:center;line-height:1}
.navigation-map-controls button:disabled{opacity:.4}
.navigation-orient{position:absolute;left:8px;bottom:8px;z-index:2;font-size:11px;font-weight:600;letter-spacing:0;padding:0 10px}
.navigation-orient[aria-pressed="true"]{border-color:#6ce3c4;color:#6ce3c4}
.navigation-clear{width:100%;min-height:48px;margin:0 0 8px;padding:0 12px;border-radius:12px;border:1px solid #34434b;background:#141d20;color:#f6faf9;font-size:13px;text-align:start}
.navigation-scale text{font-size:11px;fill:#dbe7ee;font-family:-apple-system,system-ui,sans-serif}
.navigation-mark text{font-family:-apple-system,system-ui,sans-serif}
@keyframes navigation-pulse{0%{r:8;opacity:.9}100%{r:18;opacity:0}}
.navigation-next-ring{animation:navigation-pulse 1.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.navigation-next-ring{animation:none;opacity:.6}}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .navigation-heading>*+*:not(.navigation-toggle-label),[dir=rtl] .navigation-locked button>*+*{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .navigation-peek>*+*,[dir=rtl] .navigation-status>*+*,[dir=rtl] .navigation-distance>*+*,[dir=rtl] .navigation-destination>*+*,[dir=rtl] .navigation-trip span>*+*{margin-left:0;margin-right:var(--s2)}
[dir=rtl] .navigation-trip>*{margin-right:0;margin-left:var(--s5)}
[dir=rtl] .navigation-lanes span>*+*{margin-left:0;margin-right:1px}

/* clean-ui.css */
/* Clean UI pass (9 Sep 2026, retuned 13 Sep): one surface language across the
   cockpit and the settings panel. One card, one control, one green - the panel
   borrows the design lime instead of keeping a second one of its own. Loaded
   before car-density.css. */
:root{--ui-lime:var(--design-lime,#b3ed59);--ui-teal:#6ce3c4;--ui-hair:var(--card-line)}
.panel-kicker .icon{color:var(--sel-line)}
.panel-head h1{letter-spacing:var(--ls-tight)}
.experience-entry button{min-height:var(--ctl-h);border-radius:var(--ctl-r);border-color:var(--ctl-line);background:var(--ctl-bg);color:var(--text-1);font-size:var(--t-ctl);font-weight:var(--w-med)}
.experience-entry button:hover{border-color:var(--sel-line)}
.horn-picker{border-radius:var(--card-r);border-color:var(--card-line)}
.horn-preview-icon{display:grid;place-items:center;width:var(--ctl-h-min);height:var(--ctl-h-min);border-radius:var(--ctl-r);background:#16262b;color:var(--ui-teal);font-size:0}
.horn-picker>button{min-height:var(--ctl-h);padding:0 var(--s5);border:1px solid var(--sel-line);border-radius:var(--ctl-r);background:transparent;color:var(--sel-line);font-size:var(--t-ctl);font-weight:var(--w-strong);letter-spacing:var(--ls-caps);text-transform:uppercase}
.horn-picker>button:hover{background:var(--sel-bg)}
.horn-btn .horn-choice-icon{top:var(--s2);right:var(--s3);color:var(--ui-teal);opacity:.9}
.environments button,.region-grid button,.country-list details,.experience-presets button,.favorite-list li,.visual-choices button{border-radius:var(--card-r);border-color:var(--card-line)}
.environments button.active,.region-grid button.active{border-color:var(--sel-line);background:var(--sel-bg)}
.lock-tag{border-radius:999px;font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;padding:var(--s1) var(--s2)}
.region-grid button.locked,.environments button.locked{opacity:.78}
.subscription-link,.text-action{color:var(--sel-line)}
.subscription-link{min-height:var(--ctl-h-min);display:inline-flex;align-items:center}
.subscription-link .icon{margin-right:var(--s2)}
[dir="rtl"] .subscription-link .icon{margin-right:0;margin-left:var(--s2)}
.icon-btn,.account-btn{border-color:var(--ctl-line)}
.speed,.drive-readout strong,.control-dock strong,.navigation-distance,.navigation-trip strong{font-variant-numeric:tabular-nums}

/* Settings sections: an icon tile anchors every eyebrow; one choice-button
   style for side, time, visual, units, transmission and traffic. */
.section-label{position:relative;display:flex;align-items:center;margin-bottom:var(--s4)}
.section-label>span{flex:1;min-width:0;font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-1)}
.section-label>small{margin-left:var(--s4);white-space:nowrap;color:var(--text-3);font-size:var(--t-small);letter-spacing:0;text-transform:none}
[dir="rtl"] .section-label>small{margin-left:0;margin-right:var(--s4)}
.visual-choices button>span .icon{color:var(--text-2)}
.visual-choices button.active>span .icon{color:var(--sel-line)}
.setting-section[data-section]>.section-label::before{content:'';flex-shrink:0;width:28px;height:28px;margin-right:var(--s4);border-radius:9px;background:var(--sel-bg)}
[dir="rtl"] .setting-section[data-section]>.section-label::before{margin-right:0;margin-left:var(--s4)}
.setting-section[data-section]>.section-label::after{content:'';position:absolute;left:5px;top:50%;width:18px;height:18px;margin-top:-9px;background-color:var(--sel-line);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:18px 18px;mask-size:18px 18px}
[dir="rtl"] .setting-section[data-section]>.section-label::after{left:auto;right:5px}
.setting-section[data-section="sound"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2010v4h3l8%204V6l-8%204H4zm3%204%201%205h3l-1-4m8-5c1%201%201%203%200%204m2-7c3%203%203%207%200%2010'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2010v4h3l8%204V6l-8%204H4zm3%204%201%205h3l-1-4m8-5c1%201%201%203%200%204m2-7c3%203%203%207%200%2010'/></svg>")}
.setting-section[data-section="engine"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M7%207h9l3%203h3v7h-4l-2%203H7l-3-3V9h3V7zm1-4h7M11%203v4M1%2011v5'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M7%207h9l3%203h3v7h-4l-2%203H7l-3-3V9h3V7zm1-4h7M11%203v4M1%2011v5'/></svg>")}
.setting-section[data-section="worlds"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200M3%2012h18M12%203c-4%204-4%2014%200%2018%204-4%204-14%200-18'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200M3%2012h18M12%203c-4%204-4%2014%200%2018%204-4%204-14%200-18'/></svg>")}
.setting-section[data-section="visual"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%204h18v16H3zM3%2016l5-6%204%205%203-3%206%207M16%208h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%204h18v16H3zM3%2016l5-6%204%205%203-3%206%207M16%208h.01'/></svg>")}
.setting-section[data-section="season"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019C5%209%2011%205%2020%205c0%209-4%2015-14%2015M5%2019l7-7'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019C5%209%2011%205%2020%205c0%209-4%2015-14%2015M5%2019l7-7'/></svg>")}
.setting-section[data-section="time"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%204v2M12%2018v2M4%2012h2M18%2012h2M6.3%206.3l1.4%201.4M16.3%2016.3l1.4%201.4M6.3%2017.7l1.4-1.4M16.3%207.7l1.4-1.4M12%208.4a3.6%203.6%200%201%200%200%207.2%203.6%203.6%200%200%200%200-7.2z'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%204v2M12%2018v2M4%2012h2M18%2012h2M6.3%206.3l1.4%201.4M16.3%2016.3l1.4%201.4M6.3%2017.7l1.4-1.4M16.3%207.7l1.4-1.4M12%208.4a3.6%203.6%200%201%200%200%207.2%203.6%203.6%200%200%200%200-7.2z'/></svg>")}
.setting-section[data-section="country"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205l6-2%206%202%206-2v16l-6%202-6-2-6%202V5zm6-2v16m6-14v16'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M3%205l6-2%206%202%206-2v16l-6%202-6-2-6%202V5zm6-2v16m6-14v16'/></svg>")}
.setting-section[data-section="vehicle"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019c5%200%204-7%209-7h5m-3-3l3%203-3%203M5%205h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%2019c5%200%204-7%209-7h5m-3-3l3%203-3%203M5%205h.01'/></svg>")}
.setting-section[data-section="traffic"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>")}
.setting-section[data-section="gearbox"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%207h10M18%207h2M4%2017h2M10%2017h10M14%205v4M6%2015v4'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%207h10M18%207h2M4%2017h2M10%2017h10M14%205v4M6%2015v4'/></svg>")}
.setting-section[data-section="units"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2015a8%208%200%201%201%2016%200M12%2015l4-5M12%2015h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M4%2015a8%208%200%201%201%2016%200M12%2015l4-5M12%2015h.01'/></svg>")}
.setting-section[data-section="car"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M5%208l2-4h10l2%204M3%209h18v9H3zM5%2018v3m14-3v3M6%2013h2m8%200h2'/></svg>")}
.setting-section[data-section="color"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018h1a2%202%200%200%200%200-4h-1a2%202%200%200%201%200-4h3a5%205%200%200%200%200-10zM8%209h.01M12%206.5h.01M16%209h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018h1a2%202%200%200%200%200-4h-1a2%202%200%200%201%200-4h3a5%205%200%200%200%200-10zM8%209h.01M12%206.5h.01M16%209h.01'/></svg>")}
.setting-section[data-section="safety"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203l7%203v5c0%204.6-2.8%208-7%2010-4.2-2-7-5.4-7-10V6l7-3z'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203l7%203v5c0%204.6-2.8%208-7%2010-4.2-2-7-5.4-7-10V6l7-3z'/></svg>")}
.setting-section[data-section="language"]>.section-label::after{-webkit-mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18zM3%2012h18M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018'/></svg>");mask-image:url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M12%203a9%209%200%201%200%200%2018%209%209%200%200%200%200-18zM3%2012h18M12%203c3%203%203%2015%200%2018M12%203c-3%203-3%2015%200%2018'/></svg>")}
.setting-section{padding:var(--s6) 0;border-bottom:1px solid var(--card-line)}
.setting-section:last-of-type{border-bottom:0}
.choice-grid button,.drive-side button,.toggles label{min-height:var(--ctl-h);padding:var(--row-pad);border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:var(--ctl-bg);color:var(--text-1);text-align:start}
.choice-grid button strong,.drive-side button strong{font-size:var(--t-ctl);font-weight:var(--w-med);letter-spacing:0;text-transform:none}
.choice-grid button small,.drive-side button small{font-size:var(--t-small);letter-spacing:0;text-transform:none;color:var(--text-3)}
.choice-grid button.active,.drive-side button.active,.toggles label.active{border-color:var(--sel-line);background:var(--sel-bg);color:var(--text-1)}
.choice-grid button.active strong,.drive-side button.active strong{color:var(--sel-line)}
.drive-side{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.drive-side button{display:grid;gap:var(--s1)}
.setting-subtitle strong{font-size:var(--t-ctl)}
.setting-subtitle small{font-size:var(--t-small);color:var(--text-3)}
/* Parked showcase: a card row instead of a paragraph. */
.setting-section.showcase-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1) var(--s4);align-items:center;padding:var(--card-pad);margin:0 0 var(--s2);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg)}
.setting-section.showcase-tools h3{grid-column:1;margin:0;font-size:var(--t-title);font-weight:var(--w-med)}
.setting-section.showcase-tools p{grid-column:1;margin:0;font-size:var(--t-small);line-height:1.4;color:var(--text-3)}
.setting-section.showcase-tools>button{grid-column:2;grid-row:1/3;min-height:var(--ctl-h);padding:0 var(--s4);border:1px solid var(--sel-line);border-radius:var(--ctl-r);background:transparent;color:var(--sel-line);font-size:var(--t-ctl);font-weight:var(--w-med);white-space:nowrap}
.setting-section.showcase-tools>button:disabled{opacity:.5}
/* Season choices carry an icon each. */
.season-choices button{display:flex;align-items:center;justify-content:flex-start}
.season-choices button>*+*{margin-left:var(--s3)}
[dir="rtl"] .season-choices button>*+*{margin-left:0;margin-right:var(--s3)}
.season-choices button .icon{flex-shrink:0;color:var(--ui-teal)}
.season-choices button.active .icon{color:var(--sel-line)}
/* Settings touch fixes (QA 10 Sep): the horn collection select was 36 px; anything scrolled into view lands below the fixed heading. */
.horn-studio-select{min-height:var(--ctl-h);padding:0 var(--s4);font-size:var(--t-ctl);border-radius:var(--ctl-r)}
html[data-tesla="true"] .panel{scroll-padding-top:130px}
/* Language switch in the top bar: a small globe pill next to the brand, opening the 23 languages. */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h-min);min-width:var(--ctl-h-min);padding:0 var(--s4);border-radius:var(--ctl-r);border:1px solid var(--ctl-line);background:transparent;color:var(--text-1);font-size:var(--t-ctl);font-weight:var(--w-med);letter-spacing:0;cursor:pointer}
.lang-btn>*+*{margin-left:var(--s2)}
[dir="rtl"] .lang-btn>*+*{margin-left:0;margin-right:var(--s2)}
.lang-btn[aria-expanded="true"]{border-color:var(--sel-line);color:var(--sel-line)}
.lang-menu{position:fixed;z-index:260;width:240px;max-height:min(60vh,440px);overflow:auto;margin:0;padding:var(--s2);list-style:none;background:var(--card-bg);border:1px solid var(--card-line);border-radius:var(--card-r);box-shadow:var(--dialog-shadow)}
.lang-menu button{width:100%;min-height:var(--ctl-h);padding:0 var(--s4);border:0;border-radius:var(--ctl-r);background:transparent;color:var(--text-1);font-size:var(--t-ctl);text-align:start;cursor:pointer}
.lang-menu button[aria-selected="true"]{background:var(--sel-bg);color:var(--sel-line);font-weight:var(--w-med)}
@media (max-width:640px){.lang-btn span{display:none}.lang-btn{padding:0 var(--s4)}}

/* racing.css */
html.race-document{overflow:auto;height:auto;min-height:100%}html.race-document body.race-body{height:auto;overflow:visible}
body.race-body{overflow:hidden;background:#0d1216}body.race-body #root{min-height:0}

/* ===== Racing design tokens =====
   One declaration for every racing surface. Declared on .race-app as well as
   .race-display so the phone controller root resolves them too. The car keeps
   every box and raises the five lower type steps for reading distance; card
   padding tightens instead, because the car screen is the short one.
   HUD geometry is four customs, not eleven literals: bar (top instrument row),
   gut (edge inset), dock (footer), inset (the floor floating instruments sit
   above, clearing the pedal band). --hud-foot/--hud-instr-bottom/--pedal-h/
   --pedal-bottom are aliases for sheets written against the audit's names. */
.race-app,.race-display{
 /* Fixed steps first: an engine without CSS math keeps a readable scale. */
 --t-micro:10px;--t-small:11px;--t-body:12px;--t-ctl:13px;--t-title:15px;--t-head:20px;--t-display:26px;
 --n-sm:20px;--n-lg:24px;--n-hud:40px;--n-count:72px;
 /* Then the same scale in proportion to the screen. vmin is the honest basis:
    it follows the short side, so a phone in the hand, the car's landscape
    screen and a desktop window each get type sized to what they actually are
    rather than to a breakpoint someone guessed. Every step keeps a floor that
    stays legible and a ceiling that stops a large monitor shouting. */
 --t-micro:clamp(10px,1.55vmin,13px);--t-small:clamp(11px,1.75vmin,14px);--t-body:clamp(12px,1.95vmin,16px);
 --t-ctl:clamp(13px,2.1vmin,17px);--t-title:clamp(15px,2.5vmin,20px);--t-head:clamp(19px,3.1vmin,26px);--t-display:clamp(24px,4vmin,34px);
 --n-sm:clamp(18px,2.9vmin,24px);--n-lg:clamp(22px,3.5vmin,30px);--n-hud:clamp(32px,5.6vmin,48px);--n-count:clamp(56px,9vmin,84px);
 --w-body:400;--w-med:600;--w-strong:700;
 --ls-caps:.06em;--ls-tight:-.02em;
 --s1:4px;--s2:6px;--s3:8px;--s4:12px;--s5:16px;--s6:20px;--s7:24px;
 --card-bg:#0e1a23e8;--card-bg-raise:#16242de8;--card-line:#3c5560;--ctl-bg:#14242c;--ctl-line:#2b3f48;
 --card-r:12px;--ctl-r:10px;--card-pad:12px;--row-pad:8px 12px;
 --card-shadow:none;--float-shadow:0 8px 24px #05121c59;--dialog-shadow:0 10px 30px #00000066;--scrim:rgba(4,9,11,.8);
 --sel-line:#54e8cf;--sel-bg:#1c3a38;--sel-ink:#e8fff8;--focus:#54e8cf;
 --ctl-h-min:48px;--ctl-h:50px;--ctl-h-lg:52px;--ctl-h-tile:56px;
 /* Touch targets grow with the screen but never drop below the 48px floor the
    layout tests and a gloved thumb both need. */
 --ctl-h:clamp(50px,7.4vmin,60px);--ctl-h-lg:clamp(52px,7.8vmin,64px);--ctl-h-tile:clamp(56px,8.6vmin,70px);
 --hud-bar:64px;--hud-gut:16px;--hud-dock:52px;--hud-inset:128px;
 /* The instrument floor sits above the pedals, so it has to follow them: the
    pedal height grows with the screen, and a fixed floor let the nitro readout
    land on the steering controls on a large display. */
 --hud-inset:calc(var(--hud-dock) + var(--s3) + var(--ctl-h-tile) + var(--s4));
 --hud-foot:var(--hud-dock);--hud-instr-bottom:var(--hud-inset);--pedal-h:var(--ctl-h-tile);--pedal-bottom:calc(var(--hud-dock) + var(--s3))}
/* The car is read at arm's length, so its steps start higher — but as a raised
   floor on the same curve, not as flat pixels. Written flat, this one rule
   outranked every proportional definition above and in app-density.css (it is
   the only selector here that carries an attribute as well as the class), so
   the racing screen typeset itself at the car's split-view size on every screen
   it was ever shown at: 14px controls at 880x670 and the same 14px at
   1920x1200. The floors below reproduce today's sizes exactly at the two
   viewports the car actually reports (vmin 6.7 and 7.2), so nothing a driver
   sees now changes; only the larger panels finally grow. */
html[data-tesla="true"] .race-app,html[data-tesla="true"] .race-display{
 --t-micro:clamp(11px,1.53vmin,14px);--t-small:clamp(12px,1.67vmin,15px);--t-body:clamp(13px,1.81vmin,17px);
 --t-ctl:clamp(14px,1.95vmin,18px);--t-title:clamp(16px,2.22vmin,21px);--card-pad:clamp(8px,1.2vmin,12px)}

/* Racing shares Drive’s scene stack; Tesla compatibility overrides remain last. */
.race-app{--race-lime:#54e8cf;--race-coin:#f4c95d;--race-coin-dim:#8a6f2e;--race-coin-ink:#2a1f06;--race-ink:#f5f7f8;--race-muted:#9fb0b6;--race-line:#20282e;color:var(--race-ink);background:#070a0c;min-height:0;padding:0 var(--s7) var(--s5);box-sizing:border-box;overflow-x:hidden;color-scheme:dark}
.race-app *{box-sizing:border-box}.race-app button,.race-app input,.race-app select,.race-app a{font:inherit}
.race-app button,.race-app select,.race-app input{min-height:var(--ctl-h-min);border:1px solid #20282e;border-radius:var(--ctl-r);color:var(--race-ink);background:#fff;padding:var(--s3) var(--s4)}
.race-app button,.race-app a{touch-action:manipulation}.race-app button{cursor:pointer;font-weight:var(--w-med)}
.race-app button:hover,.race-app a:hover{filter:brightness(.96)}.race-app button:disabled{opacity:.5;cursor:not-allowed}
.race-app :focus{outline:3px solid var(--focus);outline-offset:2px}.race-app :focus:not(:focus-visible){outline:none}.race-app :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.race-app a{color:inherit;text-decoration:none;min-height:var(--ctl-h-min);display:inline-flex;align-items:center}
.race-app h1,.race-app h2,.race-app p{margin:0}
.race-app h1{font-size:var(--t-display);line-height:1.1;letter-spacing:var(--ls-tight)}
.race-app h2{font-size:var(--t-head);line-height:1.2;letter-spacing:var(--ls-tight)}
.race-app p{line-height:1.5}
.race-app label{display:grid;gap:var(--s3);font-size:var(--t-ctl);font-weight:var(--w-med)}
.race-app select,.race-app input{width:100%;min-width:0}
.race-app canvas{position:static;display:block;width:100%;height:100%}
/* Explicit margins, never flex gap: the car's Chrome 79 renders gap as zero. */
.race-header{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20282e;margin-bottom:var(--s6)}
.race-header>*+*{margin-left:var(--s4)}
.race-brand{font-size:var(--t-head)!important;font-weight:var(--w-strong);letter-spacing:var(--ls-tight);white-space:nowrap}
.race-brand>*+*{margin-left:var(--s4)}
.race-brand span{font-size:var(--t-micro);letter-spacing:var(--ls-caps);font-weight:var(--w-med);border-left:1px solid #b2c0b4;padding-left:var(--s4)}
.race-header nav{display:flex;align-items:center;font-size:var(--t-ctl)}.race-header nav>*+*{margin-left:var(--s5)}
.race-header nav button{background:transparent;border:0;padding:0 var(--s4)}
.race-eyebrow{display:block;font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);color:var(--race-muted);margin-bottom:var(--s3)}
.race-primary{background:var(--race-ink)!important;color:#eefaec!important;border:0!important;display:inline-flex;justify-content:center;align-items:center;padding:0 var(--s6);border-radius:var(--ctl-r);font-weight:var(--w-strong);min-height:var(--ctl-h-lg);max-width:100%;white-space:normal;text-align:center}
.race-primary:hover{background:#29423c!important}
.race-muted{color:var(--race-muted);font-size:var(--t-body);line-height:1.5}
.race-notice{display:flex;justify-content:space-between;align-items:center;padding:0 var(--s4);margin-bottom:var(--s4);background:#0d1216;border:1px solid #20282e;border-radius:var(--card-r);font-size:var(--t-body)}
.race-notice>*+*{margin-left:var(--s4)}
.race-notice button{border:0;background:transparent;flex:0 0 var(--ctl-h-min);font-size:var(--t-head)}
.race-entry{display:grid;grid-template-columns:1.3fr 1fr;min-height:460px;border-radius:var(--card-r);overflow:hidden;background:#fff}
.race-entry-caption{position:absolute;left:var(--s7);top:var(--s7);color:#effcdb}
.race-entry-caption .race-eyebrow{color:#c9e6cb}
.race-entry-caption h2{font-size:clamp(26px,4vw,56px);letter-spacing:var(--ls-tight);line-height:1.04;margin-bottom:var(--s5)}
.race-entry-caption>span:last-child{font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.race-login{padding:var(--s7);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:var(--s5)}
.race-login h1{font-size:var(--t-display)}
.race-login form{display:grid;gap:var(--s4)}
.race-page-footer{display:flex;align-items:center;justify-content:flex-end;font-size:var(--t-small);color:var(--race-muted);margin-top:var(--s4)}
.race-page-footer>*+*{margin-left:var(--s6)}
.race-page-footer>span{margin-right:auto}
.race-garage{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:var(--s7);max-width:1500px;margin:auto}
.race-loadout{display:grid;grid-template-columns:1fr 1.3fr .85fr;gap:var(--s4);margin-top:var(--s5)}
.race-loadout select{font-size:var(--t-ctl)}
.race-car-traits{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--s5);font-size:var(--t-small);line-height:1.5;margin-top:var(--s4);color:#586a61}
.race-car-traits b{color:#f5f7f8;display:block;margin-bottom:var(--s1)}
.race-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.race-track{display:grid;justify-items:start;text-align:left;gap:var(--s3);padding:var(--s4)!important;min-height:98px!important;border-radius:var(--ctl-r)!important;background:#0d1216!important}
.race-track span{font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:#667a71}
.race-track strong{font-size:var(--t-ctl);line-height:1.2}
.race-track small{font-size:var(--t-small);color:#587361}
.race-track.selected,.race-modes .selected{background:#141b20!important;border:1px solid #52734c!important}
.race-modes{display:grid;gap:var(--s3)}
.race-modes button{display:grid;justify-items:start;text-align:left;gap:var(--s1);padding:var(--s4);min-height:var(--ctl-h-tile)}
.race-modes button strong{font-size:var(--t-ctl)}
.race-modes button small{font-size:var(--t-small);font-weight:var(--w-body);line-height:1.5;color:#52695d}
.race-check{display:flex!important;flex-direction:row;align-items:center;min-height:var(--ctl-h-min);font-size:var(--t-body)!important;cursor:pointer}
.race-check input{width:21px;min-height:21px;height:21px;flex-shrink:0;accent-color:#345a3d;margin:0 var(--s4) 0 0}
.race-analytics{border-top:1px solid #20282e;padding-top:var(--s4)}
.race-join{display:grid;gap:var(--s3);padding-top:var(--s4);border-top:1px solid #20282e}
.race-offer{background:#fff;border:1px solid #20282e;border-radius:var(--card-r);padding:var(--s6);display:flex;align-items:center;margin-top:var(--s6)}
.race-offer>*+*{margin-left:var(--s5)}
.race-offer>div{flex:1}.race-offer p{font-size:var(--t-body);margin:var(--s3) 0}.race-offer a{font-size:var(--t-ctl)}.race-offer .sound-preview{margin-top:var(--s4)}
.race-play{display:flex;flex-direction:column;min-height:0;height:100%}
.race-play-top{display:flex;justify-content:space-between;align-items:center;padding:0 0 var(--s4)}
.race-play-top>*+*{margin-left:var(--s4)}
.race-play-top h1{font-size:var(--t-head)}
.race-play-top .race-eyebrow{margin-bottom:var(--s1)}
.race-live-stats{display:flex;align-items:center}
.race-live-stats>*+*{margin-left:var(--s5)}
.race-live-stats>span{display:flex;flex-direction:column;min-width:35px}
.race-live-stats>span>*+*{margin-top:var(--s1)}
.race-live-stats small{font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.race-live-stats b{font-size:var(--n-sm);font-weight:var(--w-strong);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.race-stage-view{position:relative;min-height:0;flex:1;border-radius:var(--card-r);overflow:hidden;background:#18343d}
.race-speed{position:absolute;right:var(--hud-gut);bottom:var(--hud-inset);display:flex;flex-direction:column;color:#e9f7e0;text-align:right;pointer-events:none}
.race-speed strong{font-size:var(--n-hud);font-weight:var(--w-strong);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;line-height:1}
.race-speed span{font-size:var(--t-micro);letter-spacing:var(--ls-caps)}
.race-progress{position:absolute;top:0;left:0;right:0;height:var(--s1);background:#314546}
.race-progress>div{height:100%;background:var(--race-lime);transition:width .15s linear}
.race-play-footer{display:flex;align-items:center;padding:var(--s4) 0 0}
.race-play-footer>*+*{margin-left:var(--s4)}
.race-play-footer>span{margin-right:auto;min-width:0;font-size:var(--t-ctl);font-weight:var(--w-med)}
.race-play-footer small{display:block;font-size:var(--t-small);font-weight:var(--w-body);margin-top:var(--s1);color:#52685c}
.race-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:var(--s5)}
.race-dialog{background:var(--card-bg);border:1px solid var(--card-line);box-shadow:var(--dialog-shadow);max-width:420px;width:100%;padding:var(--s5);border-radius:var(--card-r);display:flex;flex-direction:column;margin:auto 0}
.race-dialog>*+*{margin-top:var(--s4)}
.race-dialog>.race-eyebrow{margin:0}
.race-dialog p{font-size:var(--t-body);color:#526254}.race-dialog a{font-size:var(--t-ctl)}.race-dialog h2{font-size:var(--t-head);letter-spacing:var(--ls-tight)}
.race-pair{display:flex;flex-direction:column;align-items:center;font-size:var(--t-body)}.race-pair>*+*{margin-top:var(--s3)}
.race-qr{background:white;padding:var(--s3);border-radius:var(--ctl-r);width:150px;height:150px}
.race-qr svg{width:100%;height:100%}
.race-room-details{display:flex;flex-direction:column;padding:var(--card-pad);background:#141b20;font-size:var(--t-body);border-radius:var(--card-r)}
.race-room-details>*+*{margin-top:var(--s2)}
.race-room-details strong{font-size:var(--n-sm);letter-spacing:var(--ls-caps)}
.race-touch-controls{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) 0;flex-shrink:0;touch-action:none}
.race-touch-controls>*+*{margin-left:var(--s7)}
.race-steering,.race-pedals{display:flex;flex:1}.race-pedals{justify-content:flex-end}
.race-steering>*+*,.race-pedals>*+*{margin-left:var(--s4)}
.race-held{touch-action:none!important;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:100%;max-width:150px;height:var(--ctl-h-tile)}
.race-held:active{background:#141b20}
.race-brake{background:#141b20!important}
.race-throttle{background:#141b20!important}
.race-objective{position:absolute;top:var(--s5);left:var(--s5);max-width:calc(100% - var(--s5) * 2);padding:var(--row-pad);border-radius:var(--card-r);background:#132d33;color:#e8f3d7;font-size:var(--t-body);pointer-events:none}
.race-standings{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);font-size:var(--t-body)}
.race-phone{padding:0 var(--s5) var(--s7);min-height:100vh}
.race-phone .race-header{margin-bottom:var(--s5)}
.race-phone .race-login{padding:var(--s7) var(--s2)}
.race-connection{font-size:var(--t-body);max-width:130px;text-align:right}
.race-phone-status{display:flex;align-items:center;justify-content:space-between}
.race-phone-status>div{display:flex;flex-direction:column}
.race-phone-status>div>*+*{margin-top:var(--s1)}
.race-phone-status small{font-size:var(--t-micro);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#5a6c58}
.race-phone-status strong{font-size:var(--n-hud);letter-spacing:var(--ls-tight)}
.race-phone-status strong span{font-size:var(--t-title);font-weight:var(--w-body);letter-spacing:0}
.race-phone-method{margin:var(--s5) 0;max-width:400px}
.race-phone .race-touch-controls{flex-wrap:wrap}
.race-phone .race-touch-controls>*+*{margin-left:var(--s6)}
.race-phone .race-steering,.race-phone .race-pedals{min-width:220px;justify-content:space-between}
.race-phone .race-held{height:145px;max-width:none;flex:1}
.race-phone>.race-muted{margin:var(--s4) 0 var(--s6)}
.race-phone>a{margin-left:var(--s5);font-size:var(--t-body)}
.race-phone-pending{padding:var(--card-pad);background:#141b20;border-radius:var(--card-r);margin-top:var(--s4)!important}
.race-phone-pad{padding:var(--s7) var(--s4)}
.race-phone-pad p{margin-top:var(--s4)}
/* Horizontal margins mirror in right-to-left locales. */
[dir=rtl] .race-header>*+*,[dir=rtl] .race-brand>*+*,[dir=rtl] .race-notice>*+*,[dir=rtl] .race-play-top>*+*,[dir=rtl] .race-play-footer>*+*,[dir=rtl] .race-steering>*+*,[dir=rtl] .race-pedals>*+*{margin-left:0;margin-right:var(--s4)}
[dir=rtl] .race-header nav>*+*,[dir=rtl] .race-live-stats>*+*,[dir=rtl] .race-offer>*+*,[dir=rtl] .race-display .race-page-footer>*+*{margin-left:0;margin-right:var(--s5)}
[dir=rtl] .race-page-footer>*+*,[dir=rtl] .race-phone .race-touch-controls>*+*{margin-left:0;margin-right:var(--s6)}
[dir=rtl] .race-touch-controls>*+*{margin-left:0;margin-right:var(--s7)}
[dir=rtl] .race-brand span{border-left:0;border-right:1px solid #b2c0b4;padding-left:0;padding-right:var(--s4)}
[dir=rtl] .race-check input{margin:0 0 0 var(--s4)}
[dir=rtl] .race-page-footer>span{margin-right:0;margin-left:auto}
[dir=rtl] .race-play-footer>span{margin-right:0;margin-left:auto}

@media(max-height:800px){.race-app{padding:0 var(--s5) var(--s4)}.race-header{height:58px;margin-bottom:var(--s4)}.race-garage{grid-template-columns:minmax(0,1fr) 240px;gap:var(--s5)}.race-entry{min-height:440px}.race-login{padding:var(--s7)}}
@media(max-width:700px){.race-header nav>*+*{margin-left:var(--s4)}[dir=rtl] .race-header nav>*+*{margin-right:var(--s4)}.race-garage{grid-template-columns:1fr}.race-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}.race-modes button{padding:var(--s4) var(--s3)}.race-modes button small{display:none}.race-loadout{grid-template-columns:1fr 1fr}.race-loadout>label:last-child{grid-column:1/-1}.race-offer{flex-direction:column;align-items:stretch}.race-entry{grid-template-columns:1fr}.race-page-footer{flex-wrap:wrap}.race-page-footer>span{width:100%}.race-touch-controls>*+*{margin-left:var(--s4)}.race-steering>*+*,.race-pedals>*+*{margin-left:var(--s2)}[dir=rtl] .race-touch-controls>*+*{margin-right:var(--s4)}[dir=rtl] .race-steering>*+*,[dir=rtl] .race-pedals>*+*{margin-right:var(--s2)}.race-phone .race-touch-controls{flex-direction:column}.race-phone .race-steering,.race-phone .race-pedals{width:100%}.race-phone .race-held{height:130px}}
@media(max-height:500px){.race-phone .race-header{height:50px;margin-bottom:var(--s3)}.race-phone .race-phone-status strong{font-size:var(--n-lg)}.race-phone .race-phone-method{margin:var(--s3) 0}.race-phone .race-touch-controls{flex-direction:row;flex-wrap:nowrap;padding:0}.race-phone .race-held{height:85px}.race-phone .race-phone-status{position:absolute;right:20px;top:58px}.race-phone .race-phone-method{max-width:42%}.race-phone .race-steering,.race-phone .race-pedals{min-width:0}.race-header{height:50px;margin-bottom:var(--s3)}}

/* The road is the screen, as in Drive. Menus and instruments sit within it.
   Grid spacing and explicit margins preserve Chrome 79 support. */
.race-display{padding:0 var(--s5) 0;background:#0d1216;--race-lime:#45d8c4;--race-ink:#152329;--race-muted:#566b74}
.race-display .race-page-footer{height:var(--ctl-h-min);margin:0;flex-wrap:nowrap;font-size:var(--t-small)}
.race-display .race-page-footer>span{width:auto}
.race-display .race-page-footer>*+*{margin-left:var(--s5)}
/* The racing screen gives its page footer band back to the road; the same two
   links stay one tap away on the home screen, which has room for them. */
html[data-tesla="true"] .race-display:not(.race-home) .race-page-footer{display:none}
html[data-tesla="true"] .race-display:not(.race-home){padding-bottom:0}
.race-garage,.race-display .race-play{display:block;position:relative;width:100%;max-width:none;height:100%;min-height:0;margin:0;border:1px solid var(--card-line);border-radius:var(--card-r);overflow:hidden;background:#192b36}
.race-garage>canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.race-stage-menu{position:absolute;left:14px;top:14px;bottom:14px;width:330px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:var(--card-r);background:#0d1216;box-shadow:var(--float-shadow)}
.race-menu-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1);padding:var(--s2);background:#141b20;flex-shrink:0;border-bottom:1px solid #20282e}
.race-menu-tabs button{padding:var(--s3) var(--s1);font-size:var(--t-ctl);border-color:transparent;background:transparent}
.race-menu-tabs button[aria-pressed=true]{background:#fff;border-color:#20282e}
.race-menu-content{min-height:0;overflow-y:auto;overflow-x:hidden;flex:1;overscroll-behavior:contain;scrollbar-width:thin}
.race-menu-page{padding:var(--s4);display:grid;gap:var(--s4)}
.race-menu-heading h2{font-size:var(--t-head);letter-spacing:var(--ls-tight)}
.race-menu-heading .race-eyebrow{margin-bottom:var(--s2)}
.race-menu-heading p{margin-top:var(--s3)}
.race-menu-page .race-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.race-menu-page .race-modes button{min-height:var(--ctl-h);padding:var(--s2);display:block;text-align:center}
.race-menu-page .race-modes strong{font-size:var(--t-small);line-height:1.3}
.race-menu-page .race-modes .selected,.race-menu-page .race-track.selected{border:1px solid var(--sel-line)!important;background:#141b20!important}
.race-menu-page label{font-size:var(--t-ctl);gap:var(--s1)}
.race-menu-page select{font-size:var(--t-ctl);padding:0 var(--s4)}
.race-menu-page .race-loadout{margin:0;grid-template-columns:1fr 1fr;gap:var(--s4)}
.race-menu-page .race-loadout>label:first-child{grid-column:1/-1}
.race-menu-page .race-loadout>label:last-child{grid-column:auto}
.race-menu-page .race-car-traits{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:var(--s4);margin:0;font-size:var(--t-small)}
.race-menu-page .race-car-traits b{color:#f5f7f8}
.race-car-stats{display:grid;gap:var(--s3);font-size:var(--t-small);color:#44616c}
.race-car-stats>div{display:grid;grid-template-columns:60px 1fr 53px;gap:var(--s3);align-items:center}
.race-car-stats b{text-align:right;font-weight:var(--w-med);font-variant-numeric:tabular-nums}
.race-car-stats i{display:block;height:var(--s1);border-radius:2px;background:#141b20}.race-car-stats i>i{background:#378f83}
.race-menu-page .race-tracks{grid-template-columns:1fr 1fr;gap:var(--s3)}
.race-menu-page .race-track{min-height:92px!important;padding:var(--s4)!important;background:#fff!important;gap:var(--s1)}
.race-menu-page .race-track strong{font-size:var(--t-body)}
.race-menu-page .race-analytics{padding-top:var(--s4);border-color:#20282e}
.race-garage .race-offer{position:absolute;z-index:8;top:14px;bottom:14px;left:14px;width:330px;margin:0;display:block;overflow-y:auto;padding:var(--s6);background:#0d1216;box-shadow:var(--float-shadow)}
.race-garage .race-offer>div{margin-bottom:var(--s4)}.race-garage .race-offer>a,.race-garage .race-offer>button{display:flex;width:100%;margin-top:var(--s3)}
.race-display>.race-notice{position:absolute;z-index:20;left:var(--s7);right:var(--s7);top:calc(var(--hud-bar) + var(--s2));max-width:700px;margin:0;box-shadow:var(--float-shadow)}
.race-display .race-stage-view{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:0}

/* ===== Gameplay HUD =====
   Every offset below is derived from --hud-bar/--hud-gut/--hud-dock/--hud-inset
   so an instrument can never land on a control. */
.race-display .race-play-top{position:absolute;z-index:3;top:0;left:0;right:0;height:var(--hud-bar);padding:0 var(--hud-gut);background:#142733ed;color:#eaf3f7;border-bottom:1px solid #52718070}
.race-play-top .race-eyebrow{color:#a4c6d3}
.race-display .race-play-top h1{font-size:var(--t-head);letter-spacing:var(--ls-tight)}
.race-display .race-play button:not(.race-primary):not(.race-held){background:#0d1216;color:#f5f7f8;border-color:#afc5cb}
.race-display .race-progress{top:calc(var(--hud-bar) - var(--s1));z-index:3}
.race-display .race-objective{top:calc(var(--hud-bar) + var(--s4));left:var(--hud-gut);max-width:calc(100% - var(--hud-gut) * 2);border:1px solid var(--card-line);background:var(--card-bg);box-shadow:var(--float-shadow);color:#e7f6f5}
/* 88px clears the tallest instrument card (the nitro meter) plus one gutter. */
.race-display .race-play .race-objective{max-height:calc(100% - var(--hud-bar) - var(--hud-inset) - 88px);overflow:hidden}
.race-link-state{display:inline-block;margin-right:var(--s4);font-size:var(--t-micro);letter-spacing:var(--ls-caps);color:#f5c789}.race-link-state.connected{color:#77e1c5}
.race-display .race-speed{padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--float-shadow)}
.race-display .race-speed span{margin-top:var(--s1)}
.race-display .race-play-footer{position:absolute;z-index:3;bottom:0;left:0;right:0;height:var(--hud-dock);padding:0 var(--hud-gut);background:#142733f5;color:#e6f3f6;border-top:1px solid #456171}
.race-display .race-play-footer small{color:#a1bac5}
.race-display .race-play>.race-touch-controls{position:absolute;z-index:3;left:var(--hud-gut);right:var(--hud-gut);bottom:var(--pedal-bottom);padding:0}
.race-display .race-play>.race-touch-controls .race-steering,.race-display .race-play>.race-touch-controls .race-pedals{flex:0 1 220px}
.race-display .race-play .race-held{height:var(--pedal-h);padding-top:0;padding-bottom:0;border:1px solid var(--ctl-line);border-radius:var(--ctl-r);background:#0d1216ed;color:#f5f7f8;box-shadow:var(--float-shadow)}
.race-display .race-play .race-overlay{top:calc(var(--hud-bar) + var(--s3));bottom:calc(var(--hud-dock) + var(--s3));left:0;right:0;z-index:4;justify-content:flex-start;padding:var(--s4) var(--s5);overflow:hidden}
.race-display .race-dialog{max-width:365px;max-height:100%;flex-shrink:0;margin:auto 0}
.race-display .race-dialog p{color:#4b626e;line-height:1.45}
.race-display .race-room-details{background:#141b20}
.race-display[data-reduced-motion=true] .race-progress>div{transition:none}
/* The car layer must read HUD heights from the customs above: a literal height
   in a later sheet moves the dock out from under the instruments. */
html[data-tesla="true"] .race-display .race-play>.race-play-top{height:var(--hud-bar);padding:0 var(--hud-gut)}
/* The dock carries three controls, not 880px of opaque bar: it hugs the side
   the controls sit on and gives the rest of the width back to the road. */
html[data-tesla="true"] .race-display .race-play>.race-play-footer{height:var(--hud-dock);padding:0 var(--hud-gut);left:auto;width:auto;max-width:calc(100% - var(--hud-gut) * 2);border-top:0;border-radius:var(--card-r) 0 0 0}
html[dir="rtl"][data-tesla="true"] .race-display .race-play>.race-play-footer{left:0;right:auto;border-radius:0 var(--card-r) 0 0}

@media(min-height:761px){.race-dialog{padding:var(--s6)}}
@media(max-height:650px){.race-menu-page{padding:var(--s4);gap:var(--s3)}.race-menu-page .race-modes button{min-height:var(--ctl-h-min)}.race-menu-page .race-menu-heading>.race-eyebrow{display:none}}
@media(min-width:1200px){.race-stage-menu{width:360px;left:22px;top:22px;bottom:22px}.race-menu-page{padding:var(--s6);gap:var(--s5)}.race-garage .race-offer{width:360px;left:22px;top:22px;bottom:22px}}
@media(max-width:700px){.race-display{padding:0 var(--s4)}.race-stage-menu{left:12px;right:12px;top:auto;bottom:12px;width:auto;height:56%;max-height:525px}.race-menu-page{padding:var(--s4)}.race-garage .race-offer{left:12px;right:12px;top:12px;bottom:12px;width:auto}.race-display .race-play-footer>span{max-width:150px}.race-display .race-play>.race-touch-controls .race-steering,.race-display .race-play>.race-touch-controls .race-pedals{flex-basis:42%}.race-display .race-dialog{max-width:365px}.race-display .race-page-footer>*+*{margin-left:var(--s4)}[dir=rtl] .race-display .race-page-footer>*+*{margin-right:var(--s4)}}
@media(max-width:450px){.race-stage-menu{height:65%}.race-display .race-page-footer>span{display:none}.race-display .race-live-stats>span:nth-child(2){display:none}}

/* The drive shell inside the race page: the page already pads its gutters, so
   the shared topbar aligns with the content below it instead of double-padding. */
.race-app .topbar{padding-left:0;padding-right:0;color:var(--race-muted)}
.race-app .topbar .brand-logo{height:22px;width:auto}
.race-app .session-pill em{color:var(--race-lime)}

/* racing-entry.css */
/* Race entry follows Drive's cockpit: the scene is the page, with a compact
   dock and optional setup panel. Grid gaps and physical offsets work in 79.
   Type, weight, spacing, card, control and focus come from the shared tokens
   on .race-display; the literal after each var is the base value, so the
   lobby still renders if the token layer is not loaded. */
.race-display.race-home{position:relative;width:100%;height:100vh;height:var(--app-height,100dvh);min-height:0;padding:0;overflow:hidden;background:#090f13;color:#f5f8f9;--race-ink:#f5f8f9;--race-muted:#a8bac1;--race-lime:#54e8cf}
.race-home .ambient-orb,.race-home .cinema-grain{display:none}
.race-home .topbar{position:absolute;top:0;left:0;right:0;z-index:10;height:64px;padding:0 var(--s7,24px);background:#0b1218ed;border-bottom:1px solid var(--card-line,#ffffff1f)}
.race-home .topbar .brand a{display:flex;align-items:center;min-height:var(--ctl-h-min,48px)}
.race-home .topbar .brand-logo{width:76px}
html.race-document .race-home .topbar .account-btn{width:var(--ctl-h-min,48px);height:var(--ctl-h-min,48px);min-width:var(--ctl-h-min,48px);padding:0;background:#1a2b30;color:#d9fff2;border-color:#497b73}
.race-home .topbar .experience-switch,.race-home .topbar .purchase-cta{min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px);padding:0 var(--s4,12px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);display:flex;align-items:center;justify-content:center}
.race-home .topbar .experience-switch .icon{margin-right:var(--s3,8px)}
[dir=rtl] .race-home .topbar .experience-switch .icon{margin-right:0;margin-left:var(--s3,8px)}
.race-home .topbar .session-pill{color:#b5d0d4;border:1px solid var(--ctl-line,#4c62693d);min-height:32px;font-size:var(--t-small,11px)}
.race-home .topbar .session-pill em{color:#8ea9b1}
.race-home .race-garage,.race-home .race-entry{display:block;position:relative;width:100%;height:100%;min-height:0;margin:0;border:0;border-radius:0;overflow:hidden;background:#172b35}
.race-home .race-garage>canvas,.race-home .race-entry>canvas{position:absolute;left:0;top:0;width:100%;height:100%}
.race-home .race-garage:after,.race-home .race-entry:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(0deg,#050c15cc,transparent 40%,#0a192544);pointer-events:none}
/* The page footer keeps the lobby's last 26px. A 48px target here would sit
   inside .race-launch-dock, which is a fixed anchor: see the surface report. */
.race-home .race-page-footer{position:absolute;bottom:0;left:var(--s7,24px);right:var(--s7,24px);height:26px;z-index:8;margin:0;color:#acc3ca;font-size:var(--t-small,11px);gap:0;pointer-events:none}
.race-home .race-page-footer>span{font-size:var(--t-small,11px)}
.race-home .race-page-footer a{min-height:44px;min-width:var(--ctl-h-min,48px);justify-content:center;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);pointer-events:auto}
.race-home .race-eyebrow{color:#9bb9c4;font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);margin-bottom:var(--s2,6px)}
.race-home .race-muted{color:#9fb5c0;font-size:var(--t-small,11px)}
.race-home button,.race-home select,.race-home input{background:var(--ctl-bg,#18272e);border-color:var(--ctl-line,#3a4d55);color:#f0f6f8;border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-home button{min-width:var(--ctl-h-min,48px)}
.race-home button:disabled{opacity:.55}
.race-home button:hover{filter:none;background:#25393f}
.race-home .race-primary{background:#54e8cf!important;color:#07231d!important;border:1px solid #78eedb!important;font-size:var(--t-ctl,13px);font-weight:var(--w-strong,700)}
.race-home .race-primary:hover{background:#78eedb!important}
.race-home :focus{outline:3px solid var(--focus,#72e8d0);outline-offset:2px}
.race-home .race-check{color:#ccdce2;font-size:var(--t-ctl,13px)!important;font-weight:var(--w-body,400)}
.race-home .race-check input{accent-color:#54e8cf}

/* The course and the challenge: two cards over the scene, one card recipe. */
.race-home-route{position:absolute;z-index:2;left:var(--s7,24px);top:88px;display:flex;align-items:center;max-width:400px;padding:var(--card-pad,12px);background:var(--card-bg,#0e1a23ed);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px)}
.race-home-route-icon{width:var(--ctl-h-min,48px);height:var(--ctl-h-min,48px);display:grid;place-items:center;flex-shrink:0;margin-right:var(--s4,12px);border-radius:var(--ctl-r,10px);background:#233e40;color:#8bf2d8}
[dir=rtl] .race-home-route-icon{margin-right:0;margin-left:var(--s4,12px)}
.race-home-route .race-eyebrow{margin-bottom:var(--s1,4px);text-transform:uppercase}
.race-home-route h1{font-size:var(--t-display,26px);font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em);line-height:1.15}
.race-home-route p{margin-top:var(--s1,4px);font-size:var(--t-small,11px);color:#9fb9c6}
.race-home-challenge{position:absolute;z-index:2;right:var(--s7,24px);top:148px;max-width:260px;padding:var(--card-pad,12px);background:var(--card-bg,#0e1a23ed);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);color:#dfeff5}
.race-home-challenge .race-eyebrow{text-transform:uppercase;margin-bottom:var(--s1,4px)}
.race-home-challenge>strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-home-challenge p{margin-top:var(--s2,6px);font-size:var(--t-small,11px);line-height:1.45;color:#bbd1d9}

/* The hard-coded 0 KM/H - PREVIEW with its LEVEL/STAGE twin said nothing the
   course card and the Race panel do not already say. Hidden until the element
   leaves RaceApp.jsx; see the surface report for the exact line. */
.race-home-readout{display:none}

/* The dock is the next action and never moves; only its skin is the system's. */
.race-launch-dock{position:absolute;z-index:5;bottom:31px;left:var(--s7,24px);right:var(--s7,24px);max-width:1000px;margin:auto;background:var(--card-bg,#0b141af5);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);box-shadow:var(--float-shadow,0 12px 36px #00000045);padding:var(--s3,8px) var(--s4,12px)}
/* The two right-hand toggles are sized to their own labels, not to a number.
   Pinned at 140px the label box came to about 84px after the padding, the icon
   and its margin — a hair under "Multiplayer", which then broke mid-word into
   "Multiplay / er". "Race options" escaped only because it has a space to wrap
   at. A fixed width cannot be right in 24 languages (German "Mehrspieler",
   Turkish "Çok oyunculu"), so the labels take what they need and the car and
   course buttons give it up: their text already ellipsizes cleanly. */
.race-launch-choices{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content max-content;gap:var(--s3,8px);padding-bottom:var(--s3,8px);border-bottom:1px solid var(--card-line,#ffffff1f)}
.race-home .race-launch-choices button{display:flex;align-items:center;min-height:var(--ctl-h,50px);padding:var(--s3,8px) var(--s4,12px);background:transparent;border:1px solid transparent;border-radius:var(--ctl-r,10px);text-align:left;min-width:0}
.race-home .race-launch-choices button:hover{background:#203039;border-color:var(--ctl-line,#344b54)}
.race-launch-choices .icon{flex-shrink:0;margin-right:var(--s4,12px);color:#76d9c8}
[dir=rtl] .race-launch-choices .icon{margin-right:0;margin-left:var(--s4,12px)}
.race-dock-choice>span{display:grid;gap:var(--s1,4px);min-width:0}
.race-dock-choice small{font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);color:#9cb5c0}
.race-dock-choice strong{font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f1f8fa}
.race-home .race-launch-choices .race-options-toggle{justify-content:center;background:var(--ctl-bg,#24373d);color:#d4f3ec;border-color:var(--ctl-line,#425b61)}
.race-home .race-options-toggle[aria-expanded=true]{border-color:var(--sel-line,#83d5bc);color:#b9efdc}
.race-launch-action{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:var(--s4,12px);align-items:center;padding-top:var(--s3,8px)}
.race-launch-action .race-check{min-height:var(--ctl-h,50px)}
.race-launch-action .race-primary{width:100%;min-height:var(--ctl-h-lg,52px)}

/* One panel geometry for every tab: 8px under the bar, 8px over the dock's
   choices row, and the tab strip carrying the close button so no tab pays for
   a second copy of the heading its own page already shows. */
.race-home .race-stage-menu{position:absolute;z-index:6;left:auto;right:var(--s7,24px);top:72px;bottom:107px;width:350px;height:auto;max-height:none;background:var(--card-bg,#0d171e);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);box-shadow:var(--float-shadow,0 12px 34px #06121e66);display:flex;flex-direction:column}
.race-options-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s3,8px) var(--s4,12px);flex-shrink:0}
.race-options-head .race-eyebrow{margin:0 0 var(--s1,4px)}
.race-options-head h2{font-size:var(--t-head,20px);font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em)}
.race-home .race-options-head button{width:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px);display:grid;place-items:center;padding:0;background:var(--ctl-bg,#22323a);border-color:var(--ctl-line,#38515b)}
/* The strip fits as many tabs per row as the panel can hold, and wraps the
   rest. Six fixed columns at the 48px touch floor need 308px, and the floating
   close button reserves 60px more — about 374px of panel. But app-density.css
   clamps this panel to 300-320px at 600-880px viewports, so the sixth tab ran
   out past the panel edge and under the close button, which then swallowed
   every tap on Display. The floor cannot give (48px is the touch minimum) and
   the panel width is not ours, so the row count is what adapts. */
.race-home .race-menu-tabs{padding:var(--s2,6px);background:transparent;border-bottom:1px solid var(--card-line,#ffffff1f);grid-template-columns:repeat(auto-fit,minmax(var(--ctl-h-min,48px),1fr));gap:var(--s1,4px)}
.race-home .race-menu-tabs button{padding:var(--s3,8px) var(--s1,4px);color:#9fb9c5;background:transparent;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);min-height:var(--ctl-h,50px)}
.race-home .race-menu-tabs button[aria-pressed=true]{color:#dcfff0;background:var(--sel-bg,#263b3d);border-color:var(--sel-line,#4e897a);box-shadow:none}
.race-home .race-menu-page{padding:var(--card-pad,12px);gap:var(--s3,8px)}
.race-home .race-menu-heading h2,.race-home .race-menu-heading h3{font-size:var(--t-head,20px);font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em)}
.race-home .race-menu-heading .race-eyebrow{display:none}
.race-home .race-modes button{background:var(--ctl-bg,#1a2a33);color:#e0f0f4}
.race-home .race-modes .selected{background:var(--sel-bg,#294039)!important;border:1px solid var(--sel-line,#91bb87)!important;color:#e6f8da}
.race-home .race-stage-description,.race-home .race-car-traits,.race-home .race-car-stats{color:#adc2ca;font-size:var(--t-small,11px)}
.race-home .race-car-traits b{color:#dff6f0;font-weight:var(--w-med,600)}
.race-home .race-car-stats i{background:#2c4148}.race-home .race-car-stats i>i{background:#67c9b5}
.race-home .race-menu-page .race-track{background:var(--ctl-bg,#1b2c35)!important;color:#e6f6f7}
.race-home .race-menu-page .race-track.selected{background:var(--sel-bg,#263e35)!important;border:1px solid var(--sel-line,#91bb87)!important}
.race-home .race-track span,.race-home .race-track small{color:#a5c4c8}

/* Signed out: one display headline, one card, one action. */
.race-entry-course{display:flex!important;align-items:center;margin-top:var(--s5,16px);color:#b2e5dc;font-size:var(--t-small,11px)!important;letter-spacing:0!important}
.race-entry-course .icon{margin-right:var(--s3,8px)}
[dir=rtl] .race-entry-course .icon,[dir=rtl] .race-entry-season .icon{margin-right:0;margin-left:var(--s3,8px)}
.race-home .race-entry>.race-login{position:absolute;z-index:4;right:var(--s7,24px);top:72px;bottom:auto;max-height:calc(100% - 120px);width:340px;padding:var(--s5,16px);border-radius:var(--card-r,12px);border:1px solid var(--card-line,#ffffff1f);background:var(--card-bg,#0c171feb);box-shadow:var(--float-shadow,0 12px 35px #05152255);overflow-y:auto;overscroll-behavior:contain;display:block}
.race-home .race-login>.race-eyebrow{color:#adcf9b;margin-bottom:var(--s4,12px)}
.race-home .race-login h1{font-size:var(--t-head,20px);letter-spacing:var(--ls-tight,-.02em);font-weight:var(--w-med,600);line-height:1.2}
.race-home .race-login>p{margin-top:var(--s4,12px);font-size:var(--t-body,12px);color:#adc3d0;line-height:1.5}
.race-home .race-login form{margin-top:var(--s5,16px);gap:var(--s3,8px)}
.race-home .race-login label{color:#c8dce4;font-size:var(--t-body,12px);font-weight:var(--w-med,600);line-height:1.45;overflow-wrap:break-word;overflow-wrap:anywhere}
.race-home .race-login input{min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#1a2d37);border-color:var(--ctl-line,#4d6976);font-size:var(--t-ctl,13px);font-weight:var(--w-body,400)}
.race-home .race-login input:focus{border-color:#8ad8c1}
.race-home .race-login .race-primary{margin-top:var(--s1,4px);min-height:var(--ctl-h-lg,52px)}
.race-home .race-login>.race-muted{border-top:1px solid var(--card-line,#ffffff1f);padding-top:var(--s4,12px);margin-top:var(--s5,16px);font-size:var(--t-small,11px);line-height:1.5}
.race-home .race-login>button{margin-top:var(--s3,8px);width:100%;min-height:var(--ctl-h,50px)}
.race-home .race-login>.race-login-notice{padding:var(--s3,8px) var(--s4,12px);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--ctl-r,10px);background:#26383f;color:#e5eff3;font-size:var(--t-small,11px)}
.race-entry-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4,12px);width:100%;padding-top:var(--s4,12px);border-top:1px solid var(--card-line,#ffffff1f)}
.race-entry-controls>span{display:grid;justify-items:start;gap:var(--s2,6px);color:#8de1d0}
.race-entry-controls b{font-size:var(--t-body,12px);font-weight:var(--w-med,600);color:#e0eff6;line-height:1.3}
.race-entry-controls small{font-size:var(--t-small,11px);line-height:1.4;color:#aac3cf}

/* One offer per screen, in the panel's own frame. */
.race-home .race-garage .race-offer{z-index:7;left:auto;right:var(--s7,24px);top:72px;bottom:176px;width:350px;padding:var(--card-pad,12px);background:var(--card-bg,#111e25);color:#e3f4f6;border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);box-shadow:var(--float-shadow,0 12px 34px #06121e66)}
.race-home .race-offer p{color:#b0cbd4;font-size:var(--t-body,12px)}

/* A message never takes a control away from a driver. The band is kept out of
   the top-right column, where the tour invitation and the panel's own close
   button live, and out of the panel itself while it is open; only the two
   cards it does cover — passive text — step down for it. */
.race-home>.race-notice{top:72px;left:var(--s7,24px);right:auto;z-index:12;color:#ffe9c2;border-color:#927047;background:#332e23;border-radius:var(--card-r,12px);font-size:var(--t-body,12px)}
[dir=rtl] .race-home>.race-notice{left:auto;right:var(--s7,24px)}
.race-home>.race-notice>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.race-home .race-notice button{background:transparent;min-height:var(--ctl-h,50px)}
@media(min-width:701px){
 .race-home>.race-notice{max-width:calc(100% - 392px)}
 .race-home.has-setup-footer>.race-notice{max-width:calc(100% - 576px)}
 .race-home>.race-notice~.race-garage .race-home-route,
 .race-home>.race-notice~.race-entry .race-entry-pitch{top:152px}
}

@media(min-width:1200px){.race-home>.race-notice{max-width:660px}.race-home .race-entry>.race-login{width:380px;right:5%;top:15%;bottom:auto;max-height:70%}.race-home-route{top:92px}}
@media(max-height:650px) and (min-width:701px){.race-home .race-entry>.race-login{max-height:calc(100% - 112px);width:340px}.race-entry-controls small{display:none}.race-home .race-menu-page{padding:var(--s3,8px)}.race-home-route{top:82px}.race-home-challenge{top:142px}}
@media(max-width:700px){.race-home .topbar{height:58px;padding:0 var(--s5,16px)}.race-home .topbar .brand-logo{width:60px}.race-home .topbar .session-pill{padding:0 var(--s3,8px);font-size:var(--t-micro,10px)}.race-home .topbar .session-pill em{display:none}.race-home .topbar .experience-switch,.race-home .topbar .purchase-cta{padding:0 var(--s3,8px)}.race-home .topbar .experience-switch .icon{display:none}.race-home>.race-notice{left:var(--s5,16px);right:var(--s5,16px);max-width:none}.race-home .race-entry-course{margin-top:var(--s4,12px)}.race-home .race-entry>.race-login{left:var(--s5,16px);right:var(--s5,16px);top:auto;bottom:48px;max-height:calc(100% - 88px);width:auto}.race-home .race-entry-controls{display:none}.race-home-route{left:var(--s5,16px);right:var(--s5,16px);top:80px;max-width:none;width:max-content;max-width:calc(100% - 32px)}.race-home-route h1{font-size:var(--t-head,20px)}.race-home-challenge{left:19px;right:19px;top:190px;max-width:none}.race-launch-dock{left:var(--s4,12px);right:var(--s4,12px);padding:var(--s3,8px)}.race-launch-choices{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content;gap:var(--s1,4px)}.race-launch-choices .icon{margin-right:var(--s3,8px);width:18px}[dir=rtl] .race-launch-choices .icon{margin-right:0;margin-left:var(--s3,8px)}.race-home .race-launch-choices button{padding:var(--s2,6px) var(--s3,8px)}.race-options-toggle .icon,.race-online-toggle .icon{display:none}.race-launch-action{grid-template-columns:minmax(0,1fr) 145px;gap:var(--s3,8px)}.race-home .race-stage-menu{top:70px;right:var(--s4,12px);left:var(--s4,12px);bottom:107px;width:auto;height:auto;max-height:none}.race-home .race-garage .race-offer{top:70px;right:var(--s4,12px);left:var(--s4,12px);bottom:176px;width:auto;height:auto;max-height:none}.race-home .race-page-footer{left:var(--s5,16px);right:var(--s5,16px)}.race-home .race-menu-page .race-tracks{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Below 700px the wordmark gives way to the W mark (public/responsive.css), and
   that glyph is about 40px wide: the row is tall enough but the target is not
   wide enough for the 44px touch floor, which `responsive-shell` reads off the
   link itself. Pad the link out instead of scaling the mark up, so the brand
   still reads as a brand and stays tappable in the car. */
@media(max-width:700px){.race-display .topbar .brand a{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ctl-h-min,48px)}}
@media(max-width:430px){.race-home .topbar .session-pill{display:none}.race-home .topbar .brand-logo{width:56px}.race-home .race-entry>.race-login{top:auto;padding:var(--s4,12px)}.race-home .race-login>.race-eyebrow{margin-bottom:var(--s3,8px)}.race-home .race-launch-choices .race-dock-choice>.icon{display:none}.race-launch-choices{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content}.race-home .race-page-footer>span{display:none}}

/* One canvas survives authentication and every room transition. Scene loading
   and context recovery do not replace its DOM node or allocate another context. */
.race-display{position:relative;min-height:0;height:100vh;height:var(--app-height,100dvh);overflow:hidden}
.race-display>canvas.race-world-canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
html.race-document .race-display .topbar .account-btn{background:#1a2b30;color:#d9fff2;border-color:#497b73}
.race-display .topbar .purchase-cta{background:#54e8cf;color:#07231d}
.race-home .race-garage,.race-home .race-entry{background:transparent}
.race-display:not(.race-home){padding:64px 0 26px;--race-ink:#edf5f7;--race-muted:#aec4cd;color:#edf5f7}
.race-display:not(.race-home) .race-play{height:100%;min-height:0;border:0;border-radius:0;background:transparent}
.race-display:not(.race-home) .race-stage-view{background:transparent}
.race-display:not(.race-home) .race-page-footer{position:absolute;bottom:0;left:18px;right:18px;height:26px;color:#a0bbc5}
.race-display:not(.race-home) .race-page-footer a{min-height:44px}
.race-display:not(.race-home) .topbar{position:absolute;top:0;left:0;right:0;height:64px;z-index:10;background:#0a141cec}
.race-display:not(.race-home) .race-dialog{color:#f1f8fa;background:var(--card-bg,#101e26);border-color:var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);box-shadow:var(--dialog-shadow,0 12px 36px #05121a80)}
.race-display:not(.race-home) .race-dialog p{color:#b6cbd4}
.race-display:not(.race-home) .race-dialog .race-primary{background:#54e8cf!important;color:#07231d!important}
.race-display:not(.race-home) .race-dialog select{background-color:var(--ctl-bg,#253941);color:#f0f8fa;border-color:var(--ctl-line,#526d76)}
.race-scene-status{position:absolute;z-index:9;left:var(--s7,24px);top:45%;max-width:340px;padding:var(--card-pad,12px);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);background:var(--card-bg,#102331ec);color:#e3f4fa;font-size:var(--t-body,12px);line-height:1.5;box-shadow:var(--float-shadow,0 12px 34px #06121e66)}
.race-scene-status.scene-loading{display:flex;align-items:center;flex-wrap:wrap}
.race-scene-status h2{font-size:var(--t-title,15px);font-weight:var(--w-med,600);margin:var(--s3,8px) 0 var(--s2,6px)}
.race-scene-status p{font-size:var(--t-body,12px);color:#bbd2dc;margin-bottom:var(--s3,8px)}
.race-display .race-scene-status button,.race-display .race-scene-status a{min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);margin-top:var(--s3,8px);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#29424c);color:#e4f6f4;border:1px solid var(--ctl-line,#547581);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-scene-status a{margin-left:var(--s3,8px)}
[dir=rtl] .race-scene-status a{margin-left:0;margin-right:var(--s3,8px)}
@media(max-width:700px){.race-scene-status{left:var(--s5,16px);right:var(--s5,16px);top:22%;max-width:none}.race-scene-status.scene-loading{top:32%}}

/* The bar is a row of the shell (see public/app-density.css), so nothing here
   reserves its height any more: padding-top on the shell counted it twice and
   pushed the road down by a whole bar. Only the floating panels still need to
   be told where the bar ends, and they read it from --shell-header. */
@media(max-height:800px) and (min-height:501px){
}
.race-app.race-display .topbar .account-btn{min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px)}
.race-display .race-play-top>div:first-child{min-width:0;flex:1}
.race-display .race-play-top h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-display .race-live-stats{flex-shrink:0}
.race-home-route>div:last-child{min-width:0}
.race-home-route h1{overflow-wrap:break-word}
html[data-tesla="true"] .race-display .topbar .purchase-cta{min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px)}

/* Six sections fit one row. Core race choices come before optional details;
   the existing launch dock always retains the next action. */
.race-home .race-setup-page{gap:var(--s3,8px)}
.race-home .race-launch-choices .race-online-toggle{justify-content:center;background:#17362d;border-color:#467a67;color:#bdf2d9}
/* Never break the word. The column above is sized to it, so there is nothing
   to gain from shattering it and a legible label to lose. */
.race-home .race-online-toggle span,.race-home .race-options-toggle span{min-width:0;overflow-wrap:normal;word-break:keep-all;white-space:nowrap;hyphens:none}
.race-home .race-online-page .race-menu-heading h2{font-size:var(--t-head,20px)}
.race-home .race-online-host{min-height:var(--ctl-h,50px);justify-content:center;background:#203f33;color:#c4f1d6;border:1px solid #466d59}
.race-online-page .race-join{margin:var(--s3,8px)}
@media(max-width:700px){.race-home .race-launch-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1,4px)}.race-home .race-online-toggle>.icon{display:none}}
.race-setup-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3,8px)}
.race-setup-fields.has-visibility{grid-template-columns:repeat(3,minmax(0,1fr))}
.race-setup-fields .race-field-label{display:flex;align-items:center}
.race-setup-fields .race-field-label>.icon{margin-right:var(--s2,6px);flex-shrink:0}
[dir=rtl] .race-setup-fields .race-field-label>.icon{margin-right:0;margin-left:var(--s2,6px)}
@media(max-width:540px){.race-setup-fields.has-visibility{grid-template-columns:repeat(2,minmax(0,1fr))}.race-setup-fields.has-visibility>label:last-child{grid-column:1/-1}}
.race-setup-summary{font-size:var(--t-small,11px);color:#aac5cc;line-height:1.45}
.race-setup-summary strong{display:block;color:#b8e6d8;font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);margin-top:var(--s1,4px)}
.race-more{min-width:0;margin:0;padding:0;border:1px solid var(--card-line,#ffffff1f);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#11232a);color:#cde2e5}
.race-more>summary{min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h,50px);display:flex;align-items:center;cursor:pointer;padding:var(--s3,8px) var(--s4,12px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);touch-action:manipulation;list-style:none}
.race-more>summary::-webkit-details-marker{display:none}
.race-more>summary>.icon{margin-right:var(--s3,8px);flex-shrink:0}
[dir=rtl] .race-more>summary>.icon{margin-right:0;margin-left:var(--s3,8px)}
.race-more>summary::after{content:'+';margin-left:auto;padding-left:var(--s3,8px);font-size:var(--t-head,20px);color:#75dbc4}
[dir=rtl] .race-more>summary::after{margin-left:0;margin-right:auto;padding-left:0;padding-right:var(--s3,8px)}
.race-more[open]>summary::after{content:'−'}
.race-more>label,.race-more>.race-muted,.race-more>.race-daily{margin:var(--s4,12px)}
.race-more>.race-scenario-brief,.race-more>.race-item-brief{margin:var(--s3,8px)}
/* Every panel is the same width, so a tab never resizes the frame it sits in,
   and the course card stops where that panel starts however long a name is. */
@media(min-width:701px){
 .race-home .race-stage-menu{width:520px;max-width:calc(100% - 48px)}
 .race-home-route{max-width:312px}
}
@media(min-width:541px){
 .race-home .race-options-head{position:absolute;right:var(--s2,6px);top:var(--s2,6px);z-index:1;padding:0}
 .race-home .race-options-head>div{display:none}
 .race-home .race-menu-tabs{padding:var(--s2,6px) 60px var(--s2,6px) var(--s2,6px)}
 [dir=rtl] .race-home .race-options-head{right:auto;left:var(--s2,6px)}
 [dir=rtl] .race-home .race-menu-tabs{padding-right:var(--s2,6px);padding-left:60px}
}
@media(max-height:800px){
 .race-home .race-setup-page .race-modes button{display:flex;align-items:center;justify-content:center;min-height:var(--ctl-h,50px);flex-direction:row}
 .race-home .race-setup-page .race-modes button>.icon{margin:0 var(--s2,6px) 0 0;width:17px}
 [dir=rtl] .race-home .race-setup-page .race-modes button>.icon{margin:0 0 0 var(--s2,6px)}
 .race-home .race-setup-page .race-modes strong{font-size:var(--t-ctl,13px)}
}
/* auto-fit above already wraps to three (or fewer) here; a fixed count would
   only re-introduce the overflow it was written to avoid. */

/* Settings and their commit action form one panel. The footer never scrolls
   out of reach while browsing stages, room visibility or controller options. */
.race-home.has-setup-footer .race-launch-choices{padding-bottom:0;border-bottom:0}
.race-options-launch{flex-shrink:0;padding:var(--s3,8px) var(--s4,12px);border-top:1px solid var(--card-line,#ffffff1f);background:var(--card-bg-raise,#11231f)}
.race-options-launch .race-launch-action{padding:0;grid-template-columns:minmax(0,1fr) minmax(140px,.85fr);gap:var(--s3,8px)}
.race-options-launch .race-launch-action .race-check{font-size:var(--t-ctl,13px);line-height:1.4}
.race-options-launch .race-primary{padding:0 var(--s4,12px);min-height:var(--ctl-h-lg,52px)}
@media(max-width:540px){.race-options-launch .race-launch-action{grid-template-columns:minmax(0,1fr) 140px}}

/* Catalogue retries remain reachable without replacing a live scene. */
.race-display .race-catalogue-notice{flex-wrap:wrap;gap:0}
.race-display .race-catalogue-notice>*+*{margin-left:var(--s4,12px)}
[dir=rtl] .race-display .race-catalogue-notice>*+*{margin-left:0;margin-right:var(--s4,12px)}
.race-display .race-catalogue-notice>span{flex:1 1 200px;line-height:1.4}
.race-display .race-catalogue-retry{display:flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);border:1px solid #927047;border-radius:var(--ctl-r,10px)}
.race-display .race-catalogue-retry>.icon{margin-right:var(--s3,8px)}
[dir=rtl] .race-display .race-catalogue-retry>.icon{margin-right:0;margin-left:var(--s3,8px)}
/* The season that is on, under the course chip; its colour is the season's. */
.race-entry-season{display:flex!important;align-items:center;margin-top:var(--s3,8px);color:#ffb15c;font-size:var(--t-small,11px)!important;letter-spacing:0!important}
.race-entry-season .icon{margin-right:var(--s3,8px)}
.race-entry-season[data-season="stormbreak"]{color:#e7c854}.race-entry-season[data-season="frostfire"]{color:#9ddff5}.race-entry-season[data-season="world_championship"]{color:#b2e5dc}

/* racing-hero.css */
/* ===========================================================================
   The signed-out racing home page — the rotating pitch and its proof.
   ---------------------------------------------------------------------------
   Loaded after racing-entry.css, which still owns the shell, the sign-in card
   and the topbar. What moved here is the left half of that screen.

   It used to be three blocks positioned independently over the scene: a
   caption pinned to a top offset, a ways-to-play row pinned to a bottom one,
   and four media queries re-pinning both. Three anchors cannot agree about a
   viewport neither of them measures — at 768 wide the caption's right edge
   crossed under the sign-in card — so all three now sit in one column,
   `.race-entry-pitch`, and the column is the only thing with coordinates.

   Chrome 79 is the floor: no :has(), no container queries, no flex gap. The
   column is a grid, which has had gap since 66.
   =========================================================================== */

/* --- The column ---------------------------------------------------------- */
/* Its right edge stops clear of the sign-in card at every width, because the
   card's own width is what the offset is made of rather than a guess. */
.race-home .race-entry-pitch{
 position:absolute;z-index:3;
 left:var(--s7,24px);right:388px;top:80px;bottom:44px;
 display:grid;align-content:center;justify-items:start;
 gap:var(--s5,16px);
 max-width:620px;
 color:#f1f9fa;
}
/* No RTL mirror for the column: racing-entry.css pins the sign-in card to the
   right at every direction, so a mirrored column would land underneath it.
   Only the type inside the column flips, which is what [dir] already does. */

/* The scene is a photograph and the pitch is type on top of it, so the type
   carries its own legibility: a scrim that is dense where the words are and
   gone by mid-screen, added to the bottom lift racing-entry.css already sets
   rather than replacing it. */
.race-home .race-entry:after{
 background:linear-gradient(90deg,#03090ff2,#03090fb3 30%,transparent 62%),
            linear-gradient(0deg,#050c15cc,transparent 40%,#0a192544);
}
[dir=rtl] .race-home .race-entry:after{
 background:linear-gradient(270deg,#03090ff2,#03090fb3 30%,transparent 62%),
            linear-gradient(0deg,#050c15cc,transparent 40%,#0a192544);
}

/* --- The rotating pitch --------------------------------------------------- */
/* Every slide occupies the same grid cell, so the stage is as tall as the
   tallest of them and nothing below it moves when the pitch changes. A hero
   that resizes the page under a reader is the thing carousels are disliked
   for, and it is a layout problem, not a timing one. */
.race-entry-hero{display:grid;justify-items:start;gap:var(--s4,12px);width:100%;min-width:0}
.race-hero-stage{display:grid;width:100%;min-width:0}
.race-hero-slide{
 grid-area:1/1;display:grid;justify-items:start;align-content:start;gap:var(--s3,8px);
 min-width:0;
 padding-left:var(--s4,12px);
 border-left:2px solid var(--hero-tone,#54e8cf);
 opacity:0;visibility:hidden;transform:translateY(8px);
 transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}
[dir=rtl] .race-hero-slide{padding-left:0;padding-right:var(--s4,12px);border-left:0;border-right:2px solid var(--hero-tone,#54e8cf)}
.race-hero-slide[data-active="true"]{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

/* One accent per pitch. The season borrows the colours the season already has
   elsewhere on the site, so a visitor who saw the home page recognises it. */
.race-hero-slide[data-tone="mint"]{--hero-tone:#54e8cf}
.race-hero-slide[data-tone="amber"]{--hero-tone:#ffb15c}
.race-hero-slide[data-tone="sky"]{--hero-tone:#7cc7ff}
.race-hero-slide[data-tone="season"]{--hero-tone:#b2e5dc}
.race-hero-slide[data-tone="halloween"]{--hero-tone:#ff9a3c}
.race-hero-slide[data-tone="stormbreak"]{--hero-tone:#e7c854}
.race-hero-slide[data-tone="frostfire"]{--hero-tone:#9ddff5}
.race-hero-slide[data-tone="world_championship"]{--hero-tone:#b2e5dc}

.race-hero-eyebrow{
 display:flex;align-items:center;
 color:var(--hero-tone,#54e8cf);
 font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);
 text-transform:uppercase;line-height:1.3;
}
.race-hero-eyebrow .icon{flex-shrink:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-hero-eyebrow .icon{margin-right:0;margin-left:var(--s2,6px)}

.race-hero-title{
 font-size:var(--t-display,26px);font-weight:var(--w-med,600);
 line-height:1.12;letter-spacing:var(--ls-tight,-.02em);
 margin:0;overflow-wrap:break-word;
}
.race-hero-lead{color:#f4fbfc}
/* The payoff line takes the accent. background-clip:text degrades to the flat
   colour set before it on an engine that will not paint it. */
.race-hero-accent{
 color:var(--hero-tone,#54e8cf);
 background-image:linear-gradient(92deg,var(--hero-tone,#54e8cf),#ffffff);
 -webkit-background-clip:text;background-clip:text;
 -webkit-text-fill-color:transparent;
}
.race-hero-copy{
 font-size:var(--t-body,12px);line-height:1.5;color:#c8dde6;
 max-width:46ch;margin:0;
}

/* The chip under each pitch: one fact, in the pitch's own colour. */
.race-hero-chip,.race-home .race-entry-course,.race-home .race-entry-season{
 display:flex!important;align-items:center;
 min-height:30px;padding:0 var(--s3,8px);margin:0!important;
 border:1px solid var(--card-line,#ffffff1f);border-radius:999px;
 background:#0b161de0;
 color:var(--hero-tone,#8bf2d8);
 font-size:var(--t-small,11px)!important;font-weight:var(--w-med,600);letter-spacing:0!important;
}
.race-hero-chip .icon,.race-home .race-entry-course .icon,.race-home .race-entry-season .icon{flex-shrink:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-hero-chip .icon,[dir=rtl] .race-home .race-entry-course .icon,[dir=rtl] .race-home .race-entry-season .icon{margin-right:0;margin-left:var(--s2,6px)}

/* --- Choosing a pitch ----------------------------------------------------- */
/* The dot is 10px and its button is 48, because the target a thumb needs and
   the mark an eye reads are different sizes. No progress animation rides on
   the active one: this page is compositing a 3D scene on the same thread, and
   `data-rotating` is there so a future affordance can tell the two states
   apart without asking the component again. */
.race-hero-dots{display:flex;align-items:center;margin-left:calc(var(--s4,12px) - 9px)}
[dir=rtl] .race-hero-dots{margin-left:0;margin-right:calc(var(--s4,12px) - 9px)}
.race-home .race-hero-dot{
 display:grid;place-items:center;
 width:var(--ctl-h-min,48px);min-width:var(--ctl-h-min,48px);height:var(--ctl-h-min,48px);
 padding:0;background:transparent;border:1px solid transparent;border-radius:var(--ctl-r,10px);
}
.race-home .race-hero-dot:hover{background:#17272ecc}
.race-hero-dot>i{
 display:block;width:10px;height:10px;border-radius:999px;
 background:#6f8d99;
 transition:width .3s ease,background-color .3s ease;
}
.race-hero-dot[data-active="true"]>i{width:26px;background:#54e8cf}

/* --- The proof ------------------------------------------------------------ */
/* These numbers do not rotate. Whatever the pitch is arguing, the size of the
   thing and its price are the two facts a decision rests on, so they hold
   still underneath it. The catalogue counts are real: see HERO_STATS. */
.race-entry-proof{
 display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:var(--s5,16px);
 align-items:end;margin:0;padding:var(--s4,12px) 0 0;list-style:none;
 border-top:1px solid var(--card-line,#ffffff1f);width:100%;
}
.race-entry-proof>li{display:grid;justify-items:start;gap:2px;min-width:0}
.race-entry-proof strong{
 font-size:var(--n-sm,20px);font-weight:var(--w-med,600);color:#f2fbfc;
 line-height:1;letter-spacing:var(--ls-tight,-.02em);
 font-variant-numeric:tabular-nums;
}
.race-entry-proof span{font-size:var(--t-small,11px);color:#9db6c1;line-height:1.3}
.race-proof-free strong{color:#54e8cf}

/* --- Ways to play --------------------------------------------------------- */
/* Kept from the old screen and now the last row of the column rather than a
   block pinned to the bottom of the viewport. */
.race-entry-controls{width:100%}

/* --- Width and height ----------------------------------------------------- */
/* A wide screen gives the column the page's own margin and a wider measure;
   the sign-in card grows to 380 there, so the offset grows with it. */
@media(min-width:1200px){
 .race-home .race-entry-pitch{left:5%;right:calc(5% + 404px);top:15%;bottom:15%;max-width:640px}
}

/* Short landscape — the car with its browser chrome open, a phone on its side.
   The pitch keeps its headline and loses the row that is only reassurance. */
@media(max-height:650px) and (min-width:701px){
 .race-home .race-entry-pitch{top:72px;bottom:40px;gap:var(--s4,12px)}
 .race-home .race-entry-proof{padding-top:var(--s3,8px)}
 .race-home .race-hero-copy{max-width:52ch}
}
@media(max-height:560px) and (min-width:701px){
 .race-home .race-entry-controls{display:none}
 .race-home .race-entry-proof{display:none}
}
/* A phone on its side, 390 tall. Headline, chip and dots, and nothing else. */
@media(max-height:440px) and (min-width:701px){
 .race-home .race-entry-proof{display:none}
 .race-home .race-hero-copy{display:none}
}

/* Portrait and narrow. The sign-in card takes the lower half of the screen
   here, so the column ends above it — and the proof row, which is the widest
   thing in the column, is the first to go. */
@media(max-width:700px){
 .race-home .race-entry-pitch{
  left:var(--s5,16px);right:var(--s5,16px);top:70px;bottom:calc(56% + var(--s5,16px));
  max-width:none;gap:var(--s3,8px);
 }
 .race-home .race-entry-proof{display:none}
 .race-home .race-hero-copy{max-width:56ch}
 .race-home .race-hero-slide{padding-left:var(--s3,8px)}
 [dir=rtl] .race-home .race-hero-slide{padding-left:0;padding-right:var(--s3,8px)}
}
@media(max-width:430px){
 .race-home .race-entry-pitch{top:64px;bottom:calc(58% + var(--s4,12px))}
 .race-home .race-hero-copy{font-size:var(--t-small,11px)}
}

/* The setting is a request to stop things moving, not to hide them: the
   component has already stopped advancing on its own, so the transition that
   is left has nothing to animate between. */
@media(prefers-reduced-motion:reduce){
 .race-hero-slide{transition:none}
 .race-hero-dot>i{transition:none}
}

/* --- The engines ---------------------------------------------------------
   The one claim on this page that does not have to be believed: the V8, V10
   and V12 are the recordings the product ships, and a visitor can press one
   before signing in. It sits between the proof row and the ways to play,
   because it is proof you can hear. */
.race-engine-sampler{display:grid;justify-items:start;gap:var(--s2,6px);width:100%;padding-top:var(--s4,12px);border-top:1px solid var(--card-line,#ffffff1f)}
.race-engine-sampler .race-hero-eyebrow{--hero-tone:#9fd8ff}
.race-engine-row{display:flex;align-items:center}
.race-engine-row>*+*{margin-left:var(--s3,8px)}
[dir=rtl] .race-engine-row>*+*{margin-left:0;margin-right:var(--s3,8px)}
.race-home .race-engine-button{
 display:flex;align-items:center;justify-content:center;
 min-width:76px;min-height:var(--ctl-h-min,48px);padding:0 var(--s4,12px);
 background:var(--ctl-bg,#16262e);border:1px solid var(--ctl-line,#38525c);border-radius:var(--ctl-r,10px);
 color:#dcf1f6;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);
}
.race-home .race-engine-button:hover{background:#21353d;border-color:#4b6b77}
/* Playing is a state, not a decoration: the button that started the sound is
   the button that stops it, so it has to be obvious which one that is. */
.race-home .race-engine-button[data-state="playing"]{background:#123b39;border-color:#54e8cf;color:#b7fced}
.race-home .race-engine-button[data-state="loading"]{opacity:.7}
.race-engine-button>.icon{flex-shrink:0;margin-right:var(--s2,6px);color:#7fe0cd}
[dir=rtl] .race-engine-button>.icon{margin-right:0;margin-left:var(--s2,6px)}
.race-engine-button>b{font-weight:var(--w-strong,700);letter-spacing:var(--ls-tight,-.02em)}
.race-engine-note{font-size:var(--t-small,11px);color:#9db6c1;line-height:1.35}

/* Short screens drop the reassurance row before they drop the engines. */
@media(max-height:650px) and (min-width:701px){
 .race-engine-sampler{padding-top:var(--s3,8px)}
 .race-engine-note{display:none}
}
@media(max-width:700px){.race-engine-note{display:none}}


/* --- What the season is wearing ------------------------------------------
   The season's League liveries and the ones it put in the garage, in the
   place a chip would otherwise sit. Kept to about a chip's height on purpose:
   every pitch shares one grid cell, so anything that makes this row taller
   makes the stage taller and pushes the proof row down for all five. */
.race-livery-strip{display:flex;align-items:center;min-width:0;max-width:100%}
.race-livery-cars{display:flex;align-items:center;flex-shrink:0}
.race-livery-cars>*+*{margin-left:-9px}
[dir=rtl] .race-livery-cars>*+*{margin-left:0;margin-right:-9px}
/* Overlapped like a hand of cards, so five fit where three would, and each one
   still reads: the ring is what separates a dark livery from its neighbour. */
.race-livery-swatch{
 flex:none;border-radius:4px;
 background:#0c161ccc;
 box-shadow:0 0 0 1.5px #0b1319, 0 1px 3px #00000059;
}
.race-livery-strip>small{
 margin-left:var(--s3,8px);min-width:0;
 font-size:var(--t-small,11px);font-weight:var(--w-med,600);line-height:1.3;
 color:var(--hero-tone,#8bf2d8);
}
[dir=rtl] .race-livery-strip>small{margin-left:0;margin-right:var(--s4,12px)}
@media(max-width:700px){.race-livery-strip{flex-wrap:wrap}.race-livery-strip>small{margin-left:0;flex-basis:100%;margin-top:var(--s2,6px)}}
/* The season pitch's label is the season element — it carries the class and
   data-season the chip used to, so the server-rendered page still names the
   open season. Inside a strip it is a line of text, not a pill, so the chip
   recipe above is undone here rather than skipped with a second class (the
   SSR check reads the class attribute exactly). */
.race-livery-strip>.race-entry-season{
 min-height:0;padding:0;border:0;border-radius:0;background:none;
 margin-left:var(--s3,8px)!important;
 font-weight:var(--w-med,600);line-height:1.3;
}
[dir=rtl] .race-livery-strip>.race-entry-season{margin-left:0!important;margin-right:var(--s3,8px)!important}
@media(max-width:700px){.race-livery-strip>.race-entry-season{margin-left:0!important;margin-right:0!important;flex-basis:100%;margin-top:var(--s2,6px)!important}}

/* --- Phones ---------------------------------------------------------------
   racing-entry.css stacks the pitch above the sign-in card under 700px. That
   is right for a phone held upright and wrong for one on its side: at 667x375
   the stack gives the pitch 79px of column and the engine buttons end up under
   the card. Width alone cannot tell those two apart, so the rules below split
   on orientation, and the height rules that follow are not gated on width at
   all — a short screen is short whoever is holding it. */
@media (max-width: 700px) and (orientation: landscape) {
 /* Side by side, like the wide layout, with a card sized for 375px of height. */
 .race-home .race-entry-pitch{
  left:var(--s5,16px);right:292px;top:calc(var(--shell-header,64px) + var(--s2,6px));bottom:var(--s4,12px);
  max-width:none;align-content:center;gap:var(--s3,8px);
 }
 .race-home .race-entry>.race-login{left:auto;right:var(--s5,16px);top:auto;bottom:var(--s2,6px);max-height:calc(100% - 12px);width:268px}
 .race-home .race-entry-proof,.race-home .race-entry-controls{display:none}
 .race-livery-strip{flex-wrap:nowrap}
 .race-livery-strip>small,.race-livery-strip>.race-entry-season{flex-basis:auto;margin-top:0!important;margin-left:var(--s3,8px)!important}
 [dir=rtl] .race-livery-strip>small,[dir=rtl] .race-livery-strip>.race-entry-season{margin-left:0!important;margin-right:var(--s3,8px)!important}
}

/* Upright: racing-entry.css gives the card the lower 56% (58% under 430px),
   which is more than its form needs and left the pitch column too short — the
   engine buttons ran under the card. An even split fits both, and the card
   scrolls if a translation makes it taller. */
@media (max-width: 700px) and (orientation: portrait) {
 .race-home .race-entry>.race-login{top:auto}
 .race-home .race-entry-pitch{bottom:calc(50% + var(--s3,8px))}
 .race-engine-sampler{padding-top:var(--s3,8px)}
}
/* Still not tall enough for everything: the argument goes before the engines
   do, because the engines are the thing a visitor can actually press. */
@media (max-width: 700px) and (orientation: portrait) and (max-height: 820px) {
 .race-home .race-hero-copy{display:none}
}
@media (max-width: 700px) and (orientation: portrait) and (max-height: 680px) {
 .race-home .race-hero-slide>.race-hero-chip,
 .race-home .race-hero-slide>.race-entry-course,
 .race-home .race-hero-slide>.race-livery-strip{display:none!important}
}
/* Very short in either orientation: the headline and the engines, nothing else. */
@media (max-height: 440px) {
 .race-home .race-entry-proof{display:none}
 .race-home .race-hero-copy{display:none}
}
@media (max-height: 380px) {
 .race-home .race-engine-sampler{display:none}
}

/* Wide but very short — a phone on its side, a half-height browser window.
   The pitch column already sheds its proof row and its copy here; the card
   sheds the same two kinds of thing, so its heading, its field and its two
   actions always fit the band rather than hiding behind an inner scroll. */
@media(max-height:560px) and (min-width:701px){
 /* Descriptive copy sheds here; feedback never does. `>p` also caught the
    sign-in notice, which is a paragraph, so on a short landscape screen — a
    phone on its side, a half-height window, the car at 960x540 — a wrong code
    produced no message at all: you typed, tapped, and nothing happened. */
 .race-home .race-login>p:not([role="status"]),
 .race-home .race-login>.race-muted{display:none}
}
/* Shorter still: the overline goes too, and the card tightens to its padding
   floor, so both actions stay whole rather than half-drawn. */
@media(max-height:440px) and (min-width:701px){
 .race-home .race-login>.race-eyebrow{display:none}
 .race-home .race-entry>.race-login{padding:var(--s3,8px) var(--s4,12px)}
 .race-home .race-login form{margin-top:var(--s3,8px)}
 .race-home .race-login>button{margin-top:var(--s2,6px)}
}

/* --- Under 700px the entry is a page, not a fitted stage ------------------ */
/* Two absolutely positioned panes sharing a band that neither of them
   measures is what put the sign-in action behind an invisible inner scroll
   and floated the card over the engine buttons. Below 700px the pitch and the
   card stack in normal flow and the section itself scrolls, so the card is
   always whole and nothing overlaps. Static positioning makes every inset
   above inert, so only the sizing needs unwinding here. */
@media(max-width:700px){
 .race-home .race-entry{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .race-home .race-entry-pitch,
 .race-home .race-entry>.race-login,
 html[data-tesla="true"] .race-home .race-entry>.race-login{
  position:static;width:auto;max-width:none;max-height:none;transform:none;
 }
 .race-home .race-entry-pitch{
  align-content:start;
  padding:calc(var(--shell-header,64px) + var(--s4,12px)) var(--s5,16px) 0;
 }
 .race-home .race-entry>.race-login,
 html[data-tesla="true"] .race-home .race-entry>.race-login{margin:var(--s5,16px)}
 /* The scrim is sized to the scrollport, so it must not scroll away from the
    type it exists to keep legible. */
 .race-home .race-entry:after{display:none}
 .race-home .race-entry{background:linear-gradient(180deg,#03090ff2,#050c15e0)}
}

/* --- Very wide screens ---------------------------------------------------- */
/* The pitch and the card are anchored to opposite edges by percentage, so a
   2560 screen pulled them ~1300px apart: the argument marooned on one side,
   the action on the other, and the footer's line stranded from its own links.
   Past 1600 the three are centred in a band of their own rather than tracking
   the viewport, which keeps the reading distance the same on any monitor. */
@media(min-width:1600px){
 .race-home .race-entry-pitch{left:calc(50% - 700px);right:auto;width:640px;max-width:640px}
 .race-home .race-entry>.race-login{right:calc(50% - 700px)}
 .race-home .race-page-footer{left:calc(50% - 700px);right:calc(50% - 700px)}
}

/* racing-ui.css */
/* Racing controls use Drive's icon family and dark surfaces at the car's CSS
   viewport. Flex gap is zero on Chrome 79: rows space with margins plus an
   explicit [dir=rtl] mirror. */
.race-app button,.race-app input,.race-app select{background:var(--ctl-bg,#142129);color:#edf6f6;border-color:var(--ctl-line,#40545b);border-radius:var(--ctl-r,10px)}
/* A dropdown is a control, and it has to look like the controls it sits beside.
   Only the language picker was ever given the app's own chrome; every other
   select kept the platform's — its own arrow, its own metrics, its own idea of
   a background — so a row of buttons and a row of selects never matched. The
   open list still belongs to the operating system, which is correct; the closed
   control is ours. The chevron is drawn in two gradients rather than an SVG so
   it inherits the text colour and costs no request (Chrome 79 has no mask). */
.race-app select{
 appearance:none;-webkit-appearance:none;-moz-appearance:none;
 min-height:var(--ctl-h-min,48px);
 padding:var(--s2,6px) calc(var(--s5,16px) + 14px) var(--s2,6px) var(--s4,12px);
 border-width:1px;border-style:solid;font:inherit;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);
 line-height:1.3;text-overflow:ellipsis;cursor:pointer;
 background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
 background-position:calc(100% - 18px) 55%,calc(100% - 12px) 55%;
 background-size:6px 6px;background-repeat:no-repeat}
[dir=rtl] .race-app select{
 padding:var(--s2,6px) var(--s4,12px) var(--s2,6px) calc(var(--s5,16px) + 14px);
 background-position:18px 55%,12px 55%;
 background-image:linear-gradient(135deg,currentColor 50%,transparent 50%),linear-gradient(45deg,transparent 50%,currentColor 50%)}
/* The native list is the platform's, so tell it which palette to draw. */
.race-app select option{background:var(--ctl-bg,#142129);color:#edf6f6}
.race-app select:disabled{opacity:.5;cursor:not-allowed}
.race-app select:focus-visible{outline:2px solid var(--focus,#54e8cf);outline-offset:2px}
/* A multi-line select is a list, not a dropdown: it keeps no chevron. */
.race-app select[multiple],.race-app select[size]:not([size="1"]){background-image:none;padding:var(--s2,6px) var(--s4,12px)}
.race-app button .icon,.race-app a .icon{flex-shrink:0;pointer-events:none}
.race-app .race-icon-action{display:inline-flex;align-items:center;justify-content:center;min-height:var(--ctl-h-lg,52px)}
.race-icon-action>.icon+span{margin-left:var(--s3,8px)}
[dir=rtl] .race-icon-action>.icon+span{margin-left:0;margin-right:var(--s3,8px)}
.race-display .top-actions .race-action-sounds{min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#40545b);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);background:var(--ctl-bg,#142129);color:#bdced3}
.race-app .race-action-sounds[aria-pressed="true"]{border-color:var(--sel-line,#54e8cf);color:#82efd9}
.race-field-label{display:flex;align-items:center;min-height:18px;color:#bdced3;font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-field-label>.icon{margin-right:var(--s3,8px);color:#76cdbc}
[dir=rtl] .race-field-label>.icon{margin-right:0;margin-left:var(--s3,8px)}
.race-home .race-menu-tabs button{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:var(--ctl-h,50px);padding:var(--s3,8px) var(--s1,4px)}
.race-menu-tabs button>.icon{margin-bottom:var(--s1,4px)}
.race-home .race-modes button{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:var(--ctl-h-tile,56px)}
.race-modes button>.icon{margin-bottom:var(--s1,4px);color:#76cdbc}
.race-track-region,.race-track-access{display:flex;align-items:center}
.race-track-region>.icon,.race-track-access>.icon{margin-right:var(--s2,6px);color:#84cec2}
[dir=rtl] .race-track-region>.icon,[dir=rtl] .race-track-access>.icon{margin-right:0;margin-left:var(--s2,6px)}
.race-display .race-live-stats button{padding:0 var(--s4,12px)}
.race-display .race-play-footer .race-icon-action{padding:0 var(--s4,12px)}
.race-app .race-held{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:var(--t-ctl,13px)!important;font-weight:var(--w-strong,700);letter-spacing:0}
.race-held>.icon{margin-bottom:var(--s3,8px)}
.race-app .race-throttle{background:#54e8cf!important;color:#082d25!important;border-color:#74ebd5!important}
.race-app .race-brake{background:#312325!important;color:#f3d4cd!important;border-color:#80554f!important}
.race-app .race-held:active:not(:disabled){box-shadow:inset 0 0 0 3px #ffffff55}
.race-display .ambient-orb,.race-display .cinema-grain{pointer-events:none}

/* Pairing uses a compact side-by-side dialog so Confirm stays above the fold. */
/* The pairing card is one of the lobby's side-column cards (racing-results.css);
   this only gives the dialog holding it room for two columns. */
.race-display .race-dialog.race-pair-dialog{max-width:720px;margin:auto}
.race-display .race-pair{display:block;width:100%;padding:var(--card-pad,12px);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);background:var(--card-bg,#0b161c);color:#e6f4f1;font-size:var(--t-body,12px)}
.race-pair h3{margin:0;font-size:var(--t-title,15px);font-weight:var(--w-med,600);letter-spacing:0}
.race-pair .race-pair-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,6px);list-style:none;padding:0 0 var(--s4,12px);margin:0 0 var(--s4,12px);border-bottom:1px solid var(--card-line,#ffffff1f)}
.race-pair-steps li{display:flex;align-items:center;justify-content:center;font-size:var(--t-small,11px);color:#8a9fa5}
.race-pair-steps li>.icon{margin-right:var(--s2,6px);flex-shrink:0}
[dir=rtl] .race-pair-steps li>.icon{margin-right:0;margin-left:var(--s2,6px)}
.race-pair-steps li.active{color:#70e6cd}
.race-pair-scan,.race-pair-match,.race-pair-confirmed{display:flex;flex-direction:column;align-items:center;text-align:center}
.race-pair-scan>*+*,.race-pair-match>*+*,.race-pair-confirmed>*+*{margin-top:var(--s4,12px)}
.race-pair .race-pair-symbol{width:var(--ctl-h-tile,56px);height:var(--ctl-h-tile,56px);display:grid;place-items:center;border-radius:var(--card-r,12px);background:#183a35;color:#79ecd2}
.race-display .race-pair p{color:#adc6ca;font-size:var(--t-body,12px);line-height:1.5;max-width:280px}
.race-display .race-pair .race-qr{width:144px;height:144px;padding:var(--s3,8px);background:#fff;border-radius:var(--ctl-r,10px);flex-shrink:0}
.race-pair .race-match-code{font-size:var(--n-lg,24px);font-weight:var(--w-body,400);line-height:1.3;letter-spacing:var(--ls-tight,-.02em);font-variant-numeric:tabular-nums;color:#8df0d9;padding:var(--s4,12px) 0}
.race-display .race-pair button,.race-display .race-pair a{font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);min-height:var(--ctl-h,50px);width:100%;text-align:center;padding:0 var(--s4,12px);border-radius:var(--ctl-r,10px)}
.race-display .race-pair .race-primary{background:#54e8cf!important;color:#082d25!important;border-color:#6ee7d2!important}
.race-display .race-play .race-pair .race-pair-replace{background:transparent;border-color:var(--ctl-line,#334d54);color:#adc6ca}
.race-pair-confirmed>strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600);line-height:1.4;color:#83ecd4}
.race-pair-link-warning{display:flex;flex-wrap:wrap;align-items:center;padding:var(--card-pad,12px);background:#352d21;color:#f1d5a2;border:1px solid #927047;border-radius:var(--card-r,12px);line-height:1.4;margin-bottom:var(--s4,12px)}
.race-pair-link-warning>.icon{margin-right:var(--s3,8px)}
[dir=rtl] .race-pair-link-warning>.icon{margin-right:0;margin-left:var(--s3,8px)}
.race-pair-link-warning button{margin-top:var(--s3,8px)}
@media(max-height:650px) and (min-width:701px){
 .race-display .race-dialog.race-pair-dialog{padding:var(--s5,16px);column-gap:var(--s5,16px);row-gap:var(--s3,8px)}
 .race-display .race-pair{padding:var(--s3,8px)}
 .race-pair .race-pair-steps{margin-bottom:var(--s3,8px);padding-bottom:var(--s3,8px)}
 .race-display .race-pair .race-qr{width:120px;height:120px}
 .race-pair-scan>*+*,.race-pair-match>*+*,.race-pair-confirmed>*+*{margin-top:var(--s3,8px)}
 .race-pair .race-pair-symbol{width:var(--ctl-h-min,48px);height:var(--ctl-h-min,48px)}
}
@media(max-width:700px){
 .race-display .top-actions .race-action-sounds{width:var(--ctl-h-min,48px);padding:0}
 .race-display .top-actions .race-action-sounds>span{display:none}
 .race-display .race-dialog.race-pair-dialog{max-width:400px}
 .race-display .race-live-stats button .icon{display:none}
 .race-display .race-live-stats button .icon+span{margin-left:0}
 .race-display .race-play-footer .race-icon-action{padding:0 var(--s3,8px)}
 .race-display .race-play-footer .race-icon-action>.icon{width:16px;height:16px}
 .race-display .race-play-footer .race-icon-action>.icon+span{margin-left:var(--s2,6px)}
 [dir=rtl] .race-display .race-play-footer .race-icon-action>.icon+span{margin-left:0;margin-right:var(--s2,6px)}
}

/* The analytics ask on the racing document.
   Docked to the bottom centre it lands exactly on the pedal and the item
   button, so on a car screen the first race is unplayable until the banner is
   answered — and a driver reaching for the throttle hits "Accept" instead.
   On the race document it sits top-centre, clear of every control, and only
   the banner itself takes pointer events. */
.race-body .cookie-consent{
 top:var(--s4,12px);bottom:auto;max-width:min(640px,calc(100% - 24px));
 padding:var(--card-pad,12px);z-index:60;pointer-events:auto
}
.race-body .cookie-consent-copy p,.race-body .cookie-consent-copy strong{font-size:var(--t-small,11px);line-height:1.45}
@media(max-height:800px){
 .race-body .cookie-consent{top:var(--s3,8px)}
}

/* Notices float over the racing screen, which means they float over controls.
   A notice about a failed catalogue was landing on the menu tabs and, being a
   real box, swallowing every click on them — the screen looked responsive and
   simply was not. The box no longer takes pointer events; only the things
   inside it that are meant to be pressed do. Same rule as the analytics banner
   over the pedal: a message must never take a control away from a driver. */
.race-display>.race-notice{pointer-events:none}
.race-display>.race-notice button,
.race-display>.race-notice a{pointer-events:auto}
/* Keep it compact so it clears the tab row rather than merely passing clicks
   through to something the driver cannot see. */
.race-display>.race-notice{padding-top:var(--s3,8px);padding-bottom:var(--s3,8px)}
@media(max-height:800px){
 .race-display>.race-notice{font-size:var(--t-body,12px)}
}

/* Coins from the lobby: the one place a paired phone can take the bill. */
.race-lobby-wallet{margin:var(--s3,8px) 0 var(--s4,12px);display:flex;flex-direction:column;gap:0}
.race-lobby-wallet>*+*{margin-top:var(--s3,8px)}
.race-lobby-wallet .race-menu-page{max-height:46vh;overflow:auto}
.race-result-board-note{margin:var(--s1,4px) 0;font-size:var(--t-small,11px);opacity:.8}

/* racing-profile.css */
/* Racing identity: the first-run name gate, the driver panel and the boards.
   Chrome 79 is the car's engine, so: gap is used only on grid (flex gap is
   Chrome 84), and offsets are written out rather than using inset (Chrome 87).
   Type, spacing, cards and control heights come from the tokens on
   .race-display; the literal fallbacks are the value the system specifies. */

/* The gate covers the garage until a name exists. The topbar is a sibling
   outside it, so signing out, Drive and Shop stay reachable: it blocks racing,
   not the app. */
.race-garage{position:relative}
.race-profile-gate{position:absolute;left:0;right:0;top:0;bottom:0;z-index:11;display:grid;place-items:center;padding:var(--s5,16px);background:var(--scrim,rgba(4,9,11,.8))}
.race-profile-card{width:min(560px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5,16px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#101c22);box-shadow:var(--dialog-shadow,0 12px 32px rgba(4,9,11,.6))}
@media(min-height:761px){.race-profile-card{padding:var(--s6,20px)}}

.race-profile{display:grid;gap:var(--s4,12px);text-align:left}
.race-profile h2{margin:0;font-size:var(--t-head,20px);line-height:1.1;font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em)}
.race-profile-copy{margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-body,12px);line-height:1.45}
.race-profile-current{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3,8px);align-items:center;margin:0;font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-profile-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3,8px);align-items:start;margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-small,11px);line-height:1.4}
.race-field-label{display:block;margin-bottom:var(--s2,6px);color:var(--race-muted,#9fb0b6);font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase}

/* The Driver tab paints its own heading above this section, so the component's
   eyebrow and preamble say it a second time. The heading itself is kept as the
   section's accessible name (aria-labelledby) without taking a line. */
.race-profile-inline>.race-eyebrow,.race-profile-inline>.race-profile-copy{display:none}
.race-profile-inline>h2{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Suggestions: one tap claims a name, which is the whole point of them. */
.race-suggestion-row{display:flex;flex-wrap:wrap}
.race-suggestion-row>*{margin:0 var(--s2,6px) var(--s2,6px) 0}
[dir=rtl] .race-suggestion-row>*{margin:0 0 var(--s2,6px) var(--s2,6px)}
.race-suggestion{min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#18272e);color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-suggestion:hover:not(:disabled){border-color:var(--sel-line,#54e8cf)}
.race-suggestion:disabled{opacity:.5;cursor:default}

.race-name-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3,8px);align-items:end}
.race-name-form label{grid-column:1/-1;color:var(--race-muted,#9fb0b6);font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase}
.race-name-form input{min-height:var(--ctl-h,50px);width:100%;padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#18272e);color:inherit;font-size:var(--t-title,15px)}
.race-name-form input[aria-invalid]{border-color:#f0846c}
.race-name-form button{min-height:var(--ctl-h-lg,52px);min-width:48px;padding:0 var(--s5,16px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--ctl-r,10px);background:var(--sel-line,#54e8cf);color:#06231f;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-strong,700)}
.race-name-form button:disabled{opacity:.45;cursor:default}
.race-name-hint{margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-small,11px);line-height:1.4}
.race-name-hint.error{color:#f0846c}
.race-profile-edit{justify-self:start;min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:transparent;color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}

/* In the driver panel the lock badge on a tile and its title already say what
   Studio Pro sells; the paragraph under the grid says it a third time. */
.race-profile-inline .race-icons>.race-profile-note{display:none}

/* Emblems. A locked one is shown, not hidden: it is what Studio Pro is selling.
   The drawn emblem is the identity and its name is already on the control's
   title, so the grid is one band of 48px targets instead of five rows of
   captions — 347px of panel down to 204px. */
.race-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:var(--s1,4px)}
.race-icon{position:relative;min-height:var(--ctl-h-min,48px);min-width:48px;display:grid;place-items:center;padding:0;border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#18272e);color:inherit;cursor:pointer}
.race-icon small{display:none}
.race-icon-glyph{display:grid;place-items:center;line-height:0;color:var(--race-ink,#f5f7f8)}
.race-icon.locked .race-icon-glyph{color:var(--race-muted,#9fb0b6)}
.race-icon.selected .race-icon-glyph{color:var(--sel-line,#54e8cf)}
.race-profile-current .race-glyph{color:var(--sel-line,#54e8cf)}
.topbar .account-btn .race-glyph{display:block}
.race-icon.selected{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#12282b)}
.race-icon.locked{opacity:.55}
.race-icon-lock{position:absolute;top:var(--s1,4px);right:var(--s1,4px);line-height:0;color:var(--race-muted,#9fb0b6)}
[dir=rtl] .race-icon-lock{right:auto;left:var(--s1,4px)}
.race-icon:disabled{cursor:default}

@media(max-width:700px){
 .race-name-form{grid-template-columns:minmax(0,1fr)}
}

/* Where you race. The time-zone suggestion is an offer, styled as a prompt
   rather than a confirmation, because nothing is stored until it is taken.
   The panel heading names this block, so its own label is dropped. */
.race-location{display:grid;gap:var(--s3,8px)}
.race-location>.race-field-label{display:none}
.race-location label{color:var(--race-muted,#9fb0b6);font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase}
.race-location select{min-height:var(--ctl-h,50px);width:100%;padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#18272e);color:inherit;font-size:var(--t-ctl,13px)}
.race-location-hint{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3,8px);align-items:center;margin:0;padding:var(--row-pad,8px 12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--card-r,12px);background:var(--sel-bg,#12282b);font-size:var(--t-body,12px)}
.race-location-hint button{min-height:var(--ctl-h,50px);min-width:48px;padding:0 var(--s4,12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--ctl-r,10px);background:var(--sel-line,#54e8cf);color:#06231f;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-strong,700)}
.race-location-hint button:disabled{opacity:.5;cursor:default}
@media(max-width:700px){.race-location-hint{grid-template-columns:auto minmax(0,1fr)}.race-location-hint button{grid-column:1/-1}}

/* Signing out is deliberate: a labelled control in the driver panel, never the
   avatar in the topbar, which reads as "my profile" and used to sign you out. */
.race-signout{display:grid;gap:var(--s3,8px);padding-top:var(--s4,12px);border-top:1px solid var(--card-line,#2a3d45)}
.race-signout span{overflow:hidden;color:var(--race-muted,#9fb0b6);font-size:var(--t-small,11px);text-overflow:ellipsis;white-space:nowrap}
.race-signout button{justify-self:start;min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:transparent;color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}

/* Phone sign-in. Typing an address and a six-digit code on a vehicle keyboard
   is the slowest part of reaching a race, so scanning leads. */
.race-scan{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4,12px);align-items:center;padding:var(--card-pad,12px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#101c22)}
.race-scan-qr{display:grid;place-items:center;width:148px;height:148px;padding:var(--s3,8px);border-radius:var(--ctl-r,10px);background:#fff}
.race-scan-qr svg{width:100%;height:100%;display:block}
.race-scan-placeholder{display:block;width:100%;height:100%;border-radius:var(--ctl-r,10px);background:repeating-linear-gradient(45deg,#e6ecee,#e6ecee 6px,#f7fafa 6px,#f7fafa 12px)}
.race-scan-copy strong{display:block;margin-bottom:var(--s1,4px);font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-scan-copy p{margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-body,12px);line-height:1.45}
.race-scan-code{margin-top:var(--s2,6px)!important}
.race-scan-code b{color:var(--sel-line,#54e8cf);letter-spacing:var(--ls-caps,.06em)}
.race-scan-switch{grid-column:1/-1;justify-self:start;min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:transparent;color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
/* The code still has to scan from a phone at arm's length, so it keeps its
   size rather than following the type scale down. */
@media(max-height:760px){.race-scan-qr{width:116px;height:116px}}
@media(max-width:700px){.race-scan{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}}

/* Leaderboards. The gap to the place above is the line that sends a driver back
   to the start, so it is given its own emphasis rather than buried in a table. */
.race-board{display:grid;gap:var(--s3,8px)}
.race-board-scopes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1,4px)}
.race-board-scopes button{min-height:var(--ctl-h,50px);display:grid;grid-auto-flow:column;gap:var(--s2,6px);place-items:center;padding:0 var(--s3,8px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#18272e);color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-board-scopes button[aria-pressed="true"]{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#12282b);color:var(--sel-ink,#e8fff8)}
.race-board-context{margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase}
.race-board-list{display:grid;gap:var(--s1,4px);margin:0;padding:0;list-style:none}
/* The 48px controls in a row (report, and the name that opens a card) set its
   height, so the row carries side padding only: vertical padding would push
   every row past the floor for nothing. */
.race-board-list li{display:grid;grid-template-columns:24px auto minmax(0,1fr) auto auto;gap:var(--s3,8px);align-items:center;min-height:var(--ctl-h-min,48px);padding:0 var(--s4,12px);border:1px solid transparent;border-radius:var(--ctl-r,10px);background:var(--card-bg,#101c22);font-size:var(--t-body,12px)}

/* Reporting a row. The control is a full 48x48 target, which sets the row
   height: a board is read, not scanned at speed, and a mis-tap here accuses
   someone. The compact in-race board omits it entirely. */
.race-board-report{min-width:48px;min-height:var(--ctl-h-min,48px);display:grid;place-items:center;border:1px solid transparent;border-radius:var(--ctl-r,10px);background:transparent;color:var(--race-muted,#9fb0b6);cursor:pointer}
.race-board-report:hover,.race-board-report:focus-visible{border-color:var(--ctl-line,#35505a);color:var(--race-ink,#f5f7f8)}
.race-board-reporting{display:grid;gap:var(--s3,8px);padding:var(--card-pad,12px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#101c22)}
.race-board-reporting p{margin:0;font-size:var(--t-body,12px)}
.race-board-reasons{display:flex;flex-wrap:wrap}
.race-board-reasons>*{margin:0 var(--s2,6px) var(--s2,6px) 0}
[dir=rtl] .race-board-reasons>*{margin:0 0 var(--s2,6px) var(--s2,6px)}
.race-board-reasons button{min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#18272e);color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-board-reasons button:hover{border-color:var(--sel-line,#54e8cf)}
.race-board-report-cancel{justify-self:start;min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border:1px solid transparent;border-radius:var(--ctl-r,10px);background:transparent;color:var(--race-muted,#9fb0b6);cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-board-reported{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3,8px);align-items:center;margin:0;padding:var(--row-pad,8px 12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--card-r,12px);background:var(--sel-bg,#12282b);color:var(--sel-line,#54e8cf);font-size:var(--t-body,12px)}
.race-board-reported button{min-height:var(--ctl-h-min,48px);padding:0 var(--s4,12px);border:1px solid var(--ctl-line,#35505a);border-radius:var(--ctl-r,10px);background:transparent;color:inherit;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-board-list li.you{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#12282b)}
.race-board-position{color:var(--race-muted,#9fb0b6);font-size:var(--t-small,11px);text-align:right}
.race-board-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-board-name.anonymous{color:var(--race-muted,#9fb0b6)}
.race-board-name b{color:var(--sel-line,#54e8cf);font-weight:var(--w-med,600)}
.race-board-value{font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight,-.02em)}
.race-board-gap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2,6px);align-items:center;margin:0;padding:var(--row-pad,8px 12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--ctl-r,10px);background:var(--sel-bg,#12282b);font-size:var(--t-body,12px)}
.race-board-gap strong{color:var(--sel-line,#54e8cf);font-weight:var(--w-med,600)}
.race-board-empty{display:grid;justify-items:center;gap:var(--s3,8px);margin:0;padding:var(--s4,12px);color:var(--race-muted,#9fb0b6);font-size:var(--t-body,12px);text-align:center}
.race-board-empty button{min-height:var(--ctl-h-lg,52px);padding:0 var(--s4,12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--ctl-r,10px);background:var(--sel-line,#54e8cf);color:#06231f;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-strong,700)}
.race-board-compact .race-board-context{display:none}

/* Today's challenge: the one offer on this screen. */
.race-daily{display:grid;gap:var(--s3,8px);padding:var(--card-pad,12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--card-r,12px);background:var(--sel-bg,#12282b)}
.race-daily-head{display:grid;gap:var(--s1,4px)}
.race-daily-head strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-daily-head small{display:grid;grid-auto-flow:column;justify-content:start;gap:var(--s1,4px);align-items:center;color:var(--race-muted,#9fb0b6);font-size:var(--t-small,11px)}
.race-daily-copy{margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-small,11px);line-height:1.4}
.race-daily-best,.race-daily-mine{display:grid;grid-auto-flow:column;justify-content:start;gap:var(--s2,6px);align-items:center;margin:0;font-size:var(--t-body,12px)}
.race-daily-mine{color:var(--race-muted,#9fb0b6)}
.race-daily-go{min-height:var(--ctl-h-lg,52px);padding:0 var(--s4,12px);border:1px solid var(--sel-line,#54e8cf);border-radius:var(--ctl-r,10px);background:var(--sel-line,#54e8cf);color:#06231f;cursor:pointer;font-size:var(--t-ctl,13px);font-weight:var(--w-strong,700)}

/* racing-phone.css */
/* The phone is a touch controller, using Drive's ink, teal and clear icons.
   Grid spacing preserves the Chrome 79 baseline without depending on flex gap. */
.race-app.race-phone{--phone-accent:#51d7bd;--phone-ink:#f1f6f5;--phone-muted:#94a9ad;--phone-border:#25373e;background:#081217;color:var(--phone-ink);padding:0 16px 16px;min-height:100vh;width:var(--app-width,100%);box-sizing:border-box;max-width:none;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
.race-app.race-phone>*{max-width:760px;margin-left:auto;margin-right:auto}
.race-app.race-phone button,.race-app.race-phone select{background-color:#14242b;color:var(--phone-ink);border:1px solid var(--phone-border);border-radius:12px;min-height:48px}
.race-app.race-phone button{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;line-height:1.25;padding:10px 14px}
.race-app.race-phone button>.icon{flex-shrink:0;margin-right:8px}
.race-app.race-phone button:disabled{opacity:.43;cursor:default}
.race-app.race-phone :focus-visible{outline:3px solid #70e7cf;outline-offset:3px}
.race-app.race-phone .race-header{position:static;height:64px;margin-bottom:0;border-bottom:1px solid #203039;display:flex;gap:0}
.race-app.race-phone .race-brand{font-size:20px!important;letter-spacing:-.6px;min-height:48px}
.race-app.race-phone .race-brand span{font-size:8px;letter-spacing:1.5px;color:#9cb4b8;padding-left:9px;margin-left:9px;border-color:#38505a}
.race-app.race-phone .race-connection{display:grid;grid-template-columns:15px minmax(0,1fr);align-items:center;column-gap:6px;max-width:148px;margin-left:12px;font-size:var(--t-micro,10px);line-height:1.35;color:#a6babf;text-align:right}
.race-app.race-phone .race-connection.is-connected{color:var(--phone-accent)}
.race-app.race-phone .race-connection .icon{justify-self:end}
.race-phone-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;padding:14px 0;margin-top:0;margin-bottom:0;font-size:var(--t-micro,10px);color:#81989e;letter-spacing:.5px}
.race-phone-steps li{display:grid;grid-template-columns:21px auto;align-items:center;column-gap:7px;justify-content:center}
.race-phone-steps li>span{display:flex;align-items:center;justify-content:center;border:1px solid #32474e;width:21px;height:21px;border-radius:50%;font-size:var(--t-micro,10px);font-variant-numeric:tabular-nums}
.race-phone-steps .is-current{color:#d8f7ee;font-weight:700}
.race-phone-steps .is-current>span{background:#1d584f;border-color:#51d7bd;color:#a3f3db}
.race-phone-steps .is-complete{color:#81beaf}
.race-phone-steps .is-complete>span{background:#153b35;border-color:#29594e;color:#74d9bd}
.race-phone-alert{display:grid;grid-template-columns:18px minmax(0,1fr) 48px;align-items:center;column-gap:10px;background:#26231c;border:1px solid #66533b;border-radius:12px;padding:7px 7px 7px 13px;margin-bottom:12px;color:#f1d4ae}
.race-phone-alert p{font-size:12px;line-height:1.45}
.race-app.race-phone .race-phone-alert button{border:0;background:transparent;padding:0;min-width:48px;color:#e8cbaa}
.race-app.race-phone .race-phone-alert button>.icon{margin-right:0}
.race-app.race-phone .race-login.race-phone-setup{display:flex;flex-direction:column;align-items:stretch;padding:28px 24px;background:#102028;border:1px solid #263c44;border-radius:20px;gap:0;max-width:480px;margin-top:10px}
.race-phone-emblem{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:24px;background:#16433d;border:1px solid #2d6e60;color:#78e2c8;margin-bottom:26px}
.race-app.race-phone .race-eyebrow{color:#8bcabb;font-size:9px;letter-spacing:1.7px;margin-bottom:8px}
.race-app.race-phone .race-phone-setup h1{font-size:30px;line-height:1.12;letter-spacing:-.8px;margin-bottom:14px;color:#f1f6f5}
.race-phone-setup>p{font-size:13px;line-height:1.65;color:#abc0c5;margin-bottom:22px}
.race-app.race-phone .race-primary{background:#55d4b9!important;border:1px solid #62e2c6!important;color:#082b25!important;min-height:54px}
.race-app.race-phone .race-primary:hover{background:#69e0c5!important}
.race-phone-setup-note{display:grid;grid-template-columns:20px minmax(0,1fr) 48px;column-gap:12px;align-items:center;border-top:1px solid #293e45;padding-top:20px;margin-top:24px;color:#bad1d4;font-size:12px;line-height:1.5}
.race-phone-setup-note .icon{color:#5bcdb5}
.race-phone-setup-note small{display:block;color:#849fa5;font-size:11px;margin-top:3px}
.race-app.race-phone .race-phone-pending{padding:20px;background:#122830;border:1px solid #2f5057;border-radius:16px;margin-top:0!important;margin-bottom:16px}
.race-phone-pending-heading{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:center;margin-bottom:14px}
.race-phone-pending-heading>.icon{color:#67d9c2}
.race-app.race-phone .race-phone-pending h1{font-size:20px;letter-spacing:-.35px;line-height:1.3}
.race-app.race-phone .race-phone-pending .race-eyebrow{margin-bottom:5px}
.race-phone-pending>p{font-size:12px;line-height:1.5;color:#b3cbd0}
.race-phone-code{display:block;text-align:center;border:1px solid #31575d;background:#0b1d23;border-radius:10px;padding:18px 8px;margin:14px 0;font-size:32px;font-weight:750;letter-spacing:3px;font-variant-numeric:tabular-nums;color:#bcf8e5}
.race-phone-link-state{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;column-gap:8px;color:#8eb8b5;font-size:var(--t-micro,10px);margin-top:14px}
.race-app.race-phone .race-phone-retry{width:100%;margin-top:13px}
.race-phone-session{display:grid;grid-template-columns:minmax(0,1fr);row-gap:12px}
.race-app.race-phone .race-phone-status{position:static;display:flex;align-items:center;justify-content:space-between;min-height:74px;padding:3px 0;gap:0}
.race-app.race-phone .race-phone-status>div{display:block}
.race-app.race-phone .race-phone-status small{color:#9cb4b9;font-size:var(--t-micro,10px);letter-spacing:.8px;font-weight:600;text-transform:none}
.race-app.race-phone .race-phone-status strong{font-size:48px;line-height:1.1;letter-spacing:-1.8px;font-weight:650;color:#effaf5;font-variant-numeric:tabular-nums;display:flex;align-items:baseline}
.race-app.race-phone .race-phone-status strong span{font-size:11px;font-weight:500;color:#849fa5;letter-spacing:0;margin-left:8px}
.race-app.race-phone .race-phone-status>button{min-width:96px;background:#20393e;border-color:#35575b;color:#bfe5dc;margin-left:14px}
.race-app.race-phone .race-phone-method{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:8px;align-items:center;margin:0;max-width:none;font-size:11px;color:#91acb2}
.race-app.race-phone .race-phone-method select{font-size:12px;padding-top:10px;padding-bottom:10px;min-width:0;width:100%;height:48px}
.race-phone-input-settings{display:grid;grid-template-columns:minmax(0,1fr) 48px;column-gap:8px;align-items:center;min-width:0}
.race-app.race-phone .race-action-sounds{width:48px;height:48px;min-width:48px;padding:0;color:#9fbfc3}
.race-app.race-phone .race-action-sounds>.icon{margin:0}
.race-app.race-phone .race-action-sounds[aria-pressed=true]{background:#1b463e;border-color:#397a66;color:#8de1c6}
.race-app.race-phone .race-touch-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:0;min-width:0;touch-action:none}
.race-app.race-phone .race-steering,.race-app.race-phone .race-pedals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;width:100%;margin:0;padding:0}
.race-app.race-phone .race-steering>*+*,.race-app.race-phone .race-pedals>*+*{margin-left:0}
.race-app.race-phone .race-held{width:100%;min-width:0;max-width:none;height:132px;border:1px solid #385761;background:#18313a;color:#d1e4e7;border-radius:18px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);font-size:22px!important;padding:12px}
.race-app.race-phone .race-held>.icon{margin-right:0}
.race-app.race-phone .race-held:active:not(:disabled){background:#244d57;transform:translateY(1px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.race-app.race-phone .race-brake{background:#352e31!important;border-color:#664c52;color:#edb9b6;font-size:15px!important}
.race-app.race-phone .race-throttle{background:#51d2b6!important;border-color:#69e0c7;color:#08382e;font-size:19px!important}
.race-app.race-phone .race-throttle:active:not(:disabled){background:#79ebcc!important}
.race-app.race-phone .race-held:disabled{opacity:.3;box-shadow:none}
.race-app.race-phone .race-phone-pad{padding:30px 20px;min-height:228px;border:1px solid #35515b;border-radius:16px;background:#142b33;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.race-phone-pad>.icon{color:#65d0b8;margin-bottom:14px}
.race-app.race-phone .race-phone-pad h2{font-size:19px;line-height:1.35;letter-spacing:-.3px;color:#dcedeb}
.race-app.race-phone .race-phone-pad p{font-size:12px;line-height:1.6;color:#98b6bd;margin-top:10px;max-width:310px}
.race-phone-pad.is-disabled{opacity:.55}
.race-phone-instruction{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:8px;align-items:center;font-size:11px;line-height:1.4;color:#90adb3;margin:0}
.race-phone-instruction>.icon{color:#76b6aa}
.race-phone-storage-note{font-size:11px;line-height:1.5;color:#b6beb0;border-left:2px solid #6c7760;padding:3px 0 3px 10px;margin-top:14px;margin-bottom:0}
.race-phone-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;box-sizing:border-box;padding-top:14px;margin-top:14px;border-top:1px solid #20373e}
.race-app.race-phone .race-phone-actions button{font-size:12px;padding:10px 9px;color:#a7c3c8;background:#101f26}
.race-phone-actions .race-phone-repair{grid-column:1/-1}
@media(min-width:500px) and (min-height:700px){.race-app.race-phone{padding-left:28px;padding-right:28px}.race-phone-session{row-gap:16px}.race-app.race-phone .race-held{height:146px}.race-app.race-phone .race-header{height:72px}.race-phone-steps{padding-top:18px;padding-bottom:18px}}
@media(max-height:740px){.race-app.race-phone .race-header{height:56px}.race-phone-steps{padding:10px 0}.race-app.race-phone .race-held{height:106px}.race-app.race-phone .race-phone-status{min-height:62px}.race-app.race-phone .race-phone-status strong{font-size:42px}.race-phone-session{row-gap:10px}.race-phone-actions{padding-top:10px;margin-top:10px}.race-app.race-phone .race-phone-pad{min-height:192px}}
@media(max-height:600px){.race-app.race-phone{padding:0 12px 10px}.race-app.race-phone .race-header{height:50px}.race-phone-steps{padding:7px 0;font-size:9px}.race-app.race-phone .race-phone-status{min-height:54px}.race-app.race-phone .race-phone-status strong{font-size:36px}.race-phone-session{row-gap:8px}.race-app.race-phone .race-touch-controls,.race-app.race-phone .race-steering,.race-app.race-phone .race-pedals{gap:8px}.race-app.race-phone .race-held{height:80px;border-radius:14px}.race-phone-instruction{font-size:var(--t-micro,10px)}.race-phone-actions{margin-top:8px;padding-top:8px}.race-app.race-phone .race-phone-actions button{font-size:11px}.race-app.race-phone .race-login.race-phone-setup{padding:22px 20px;margin-top:4px}.race-phone-emblem{width:64px;height:64px;margin-bottom:20px}.race-app.race-phone .race-phone-setup h1{font-size:27px}.race-app.race-phone .race-phone-pad{min-height:168px}}
@media(max-width:350px){.race-app.race-phone .race-brand{font-size:18px!important}.race-app.race-phone .race-brand span{font-size:7px;letter-spacing:1px;padding-left:7px;margin-left:7px}.race-app.race-phone .race-connection{max-width:120px;font-size:9px;margin-left:8px}.race-app.race-phone .race-phone-method select{font-size:11px;padding-left:9px}.race-phone-code{font-size:29px;letter-spacing:2px}}
@media(min-width:650px) and (max-height:500px){.race-app.race-phone{padding:0 18px 10px}.race-app.race-phone .race-header{height:50px;margin-bottom:10px}.race-phone-ready .race-phone-steps{display:none}.race-phone-session{grid-template-columns:minmax(0,1fr) 260px;column-gap:20px;row-gap:10px}.race-app.race-phone .race-phone-status{grid-column:1;grid-row:1;min-height:48px;padding:0}.race-app.race-phone .race-phone-method{grid-column:2;grid-row:1;grid-template-columns:33px minmax(0,1fr)}.race-app.race-phone .race-touch-controls{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.race-app.race-phone .race-held{height:112px}.race-phone-instruction{grid-column:1/-1;justify-self:center;font-size:11px}.race-app.race-phone.race-phone-ready[data-phone-controls=true]{position:relative}.race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-session{padding-bottom:58px}.race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions{position:fixed;right:18px;bottom:8px;z-index:1;display:grid;grid-template-columns:repeat(2,48px);column-gap:8px;width:104px;max-width:none!important;padding:0;margin:0;border:0}.race-app.race-phone.race-phone-ready[data-phone-controls=true][data-control-sides=swapped] .race-phone-actions{right:auto;left:18px}.race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions button{width:48px;height:48px;padding:0}.race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions button>.icon{margin:0}.race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.race-app.race-phone .race-phone-pad{grid-column:1/-1;min-height:112px;padding:10px 20px;display:grid;grid-template-columns:45px minmax(0,1fr);column-gap:12px;text-align:left}.race-phone-pad>.icon{grid-column:1;grid-row:1/3;margin:0}.race-app.race-phone .race-phone-pad h2,.race-app.race-phone .race-phone-pad p{grid-column:2;max-width:none;margin:0}.race-app.race-phone .race-login.race-phone-setup{max-width:650px;display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:22px;padding:20px}.race-phone-setup .race-phone-emblem{grid-row:1/5;width:76px;height:76px;margin:0;align-self:center}.race-phone-setup>.race-eyebrow,.race-phone-setup>h1,.race-phone-setup>p,.race-phone-setup>.race-primary{grid-column:2}.race-app.race-phone .race-phone-setup h1{font-size:25px;margin-bottom:8px}.race-phone-setup>p{font-size:12px;line-height:1.5;margin-bottom:14px}.race-phone-setup-note{grid-column:1/-1;padding-top:12px;margin-top:16px}.race-app.race-phone .race-phone-pending{max-width:650px;padding:16px}.race-phone-code{padding:10px;margin:10px 0}.race-phone-pending-heading{margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){.race-app.race-phone .race-held:active:not(:disabled){transform:none}}

/* Analog thumb steering and independent pedals keep both hands in one area. */
.race-app.race-phone .race-joystick-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(96px,.57fr);column-gap:16px;min-width:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.race-joystick-steering{display:flex;flex-direction:column;justify-content:center;min-width:0;align-items:center}
.race-joystick-zone{position:relative;width:100%;height:216px;max-width:280px;border:1px solid #304b52;border-radius:26px;background:radial-gradient(ellipse at center,#1a343b 0,#10252c 62%,#0c1d24 100%);touch-action:none;cursor:grab;outline-offset:3px;overflow:hidden}
.race-joystick-zone:focus{outline:2px solid #73dbc5}
.race-joystick-zone.is-held{cursor:grabbing;border-color:#49877b}
.race-joystick-ring{position:absolute;left:50%;top:50%;width:132px;height:132px;max-width:84%;border:1px solid #32545b;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 14px rgba(45,77,81,.12),inset 0 0 0 13px rgba(10,28,33,.3);pointer-events:none}
.race-joystick-axis{position:absolute;left:20px;right:20px;top:50%;height:1px;background:#3c646b;pointer-events:none}
.race-joystick-left,.race-joystick-right{position:absolute;top:50%;transform:translateY(-50%);display:flex;color:#73989c;pointer-events:none}
.race-joystick-left{left:11px}.race-joystick-right{right:11px}
.race-joystick-knob{position:absolute;left:50%;top:50%;display:flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;background:linear-gradient(150deg,#305f61,#1c3d43);border:2px solid #65cdb6;box-shadow:0 5px 0 #071a20,inset 0 1px 0 #91c6bd;color:#b5f1dd;pointer-events:none;will-change:transform}
.race-joystick-zone.is-held .race-joystick-knob{background:linear-gradient(150deg,#397b71,#23544f);border-color:#9df2d8;color:#e6fff4}
.race-joystick-caption{position:absolute;left:0;right:0;bottom:15px;text-align:center;font-size:9px;font-weight:700;letter-spacing:2.2px;color:#a6c7c8;pointer-events:none}
.race-joystick-hint{font-size:var(--t-micro,10px);color:#819fa6;line-height:1.3;margin-top:8px;text-align:center}
.race-joystick-steering.is-disabled{opacity:.35}.race-joystick-zone[aria-disabled=true]{cursor:default}
.race-joystick-pedals{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr;row-gap:12px;min-width:0;padding-bottom:21px}
.race-app.race-phone .race-joystick-pedal{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:72px;padding:12px 8px;border-radius:20px;font-size:17px;letter-spacing:1px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.race-app.race-phone .race-joystick-pedal>.icon{margin:0 0 7px}
.race-app.race-phone .race-joystick-throttle{background:#53d6b9;border-color:#7ce9cd;color:#0b392e}
.race-app.race-phone .race-joystick-throttle.is-held{background:#91f2d2;border-color:#b6ffe5;box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.race-app.race-phone .race-joystick-brake{background:#352c30;border-color:#665055;color:#eebfb9;font-size:12px;letter-spacing:1.2px}
.race-app.race-phone .race-joystick-brake.is-held{background:#62484b;color:#ffe4db}
.race-app.race-phone .race-joystick-pedal:disabled{opacity:.3;box-shadow:none}
@media(max-height:740px){.race-joystick-zone{height:194px}.race-app.race-phone .race-joystick-controls{column-gap:12px}.race-joystick-pedals{row-gap:10px}}
@media(max-height:600px){.race-joystick-zone{height:176px;border-radius:22px}.race-joystick-ring{width:120px;height:120px}.race-joystick-pedals{row-gap:8px}.race-app.race-phone .race-joystick-pedal{border-radius:16px;padding:10px 8px}.race-joystick-caption{bottom:12px}}
@media(min-width:500px) and (min-height:700px){.race-app.race-phone .race-joystick-controls{max-width:560px;justify-self:center;width:100%;column-gap:26px}.race-joystick-zone{height:264px}.race-joystick-ring{width:176px;height:176px}.race-joystick-knob{width:76px;height:76px}}
@media(min-width:650px) and (max-height:500px){.race-app.race-phone .race-joystick-controls{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px;max-width:670px;justify-self:center;width:100%}.race-joystick-zone{height:170px;max-width:310px}.race-joystick-hint{display:none}.race-joystick-pedals{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr;column-gap:14px;padding:0}.race-app.race-phone .race-joystick-pedal{min-height:170px;font-size:22px}.race-app.race-phone .race-joystick-brake{font-size:14px}.race-app.race-phone .race-joystick-pedal>.icon{width:34px;height:34px;margin-bottom:10px}}
@media(min-width:650px) and (max-height:500px){.race-phone-input-settings{grid-column:2;grid-row:1}.race-app.race-phone .race-phone-input-settings .race-phone-method{grid-column:auto;grid-row:auto;grid-template-columns:33px minmax(0,1fr)}}

/* A thumb stick and three distinct action buttons form one handheld layout. */
.race-phone-link-summary{display:grid;justify-items:end;row-gap:2px;min-width:0;max-width:190px;margin-left:10px}
.race-app.race-phone .race-phone-link-summary .race-connection{margin-left:0;max-width:none}
.race-app.race-phone .race-phone-link-summary .race-link-quality{text-align:left}
.race-app.race-phone .race-phone-input-settings{grid-template-columns:minmax(0,1fr) 48px 48px}
.race-app.race-phone .race-phone-swap{width:48px;height:48px;min-width:48px;padding:0;color:#a4c2c7}
.race-app.race-phone .race-phone-swap>.icon{margin:0}
.race-app.race-phone .race-phone-swap[aria-pressed=true]{background:#1b463e;border-color:#397a66;color:#8de1c6}
.race-app.race-phone .race-joystick-controls{grid-template-columns:minmax(0,1fr) minmax(104px,.62fr)}
.race-app.race-phone .race-joystick-controls.is-swapped{grid-template-columns:minmax(104px,.62fr) minmax(0,1fr)}
.race-joystick-controls.is-swapped .race-joystick-steering{grid-column:2;grid-row:1}
.race-joystick-controls.is-swapped .race-joystick-pedals{grid-column:1;grid-row:1}
.race-app.race-phone .has-nitro .race-joystick-pedals{--pedal-main:82px;--pedal-small:56px;--pedal-gap:10px;grid-template-columns:repeat(2,var(--pedal-small));grid-template-rows:var(--pedal-main) var(--pedal-small);column-gap:var(--pedal-gap);row-gap:var(--pedal-gap);justify-content:center;align-self:center;justify-self:center;padding:0;margin-bottom:21px;width:100%}
.race-app.race-phone .has-nitro .race-joystick-pedal{flex-direction:column;width:var(--pedal-small);height:var(--pedal-small);min-width:48px;min-height:48px;padding:4px;border-radius:50%;font-size:9px;line-height:1.1;letter-spacing:.5px;border-width:2px;box-shadow:0 4px 0 #061116,inset 0 2px 0 rgba(255,255,255,.06)}
.race-app.race-phone .has-nitro .race-joystick-pedal>.icon{width:20px;height:20px;margin:0 0 3px}
.race-app.race-phone .has-nitro .race-joystick-throttle{grid-column:1/-1;grid-row:1;justify-self:center;width:var(--pedal-main);height:var(--pedal-main);font-size:20px;letter-spacing:1.4px}
.race-app.race-phone .has-nitro .race-joystick-throttle>.icon{width:30px;height:30px;margin-bottom:5px}
.race-app.race-phone .has-nitro .race-joystick-brake{grid-column:1;grid-row:2;background:#3c292f;border-color:#88545f;color:#fac5cb}
.race-app.race-phone .has-nitro .race-joystick-brake.is-held{background:#794552;border-color:#d48898;color:#ffe1e6}
.race-app.race-phone .has-nitro .race-joystick-nitro{grid-column:2;grid-row:2;background:#1a3349;border-color:#527c9c;color:#bde8fc}
.race-app.race-phone .has-nitro .race-joystick-nitro.is-held,.race-app.race-phone .has-nitro .race-joystick-nitro.is-boosting{background:#285f78;border-color:#8cddf6;color:#e0fbff;box-shadow:0 2px 0 #061116,inset 0 1px 0 #84d4ef}
.race-app.race-phone .has-nitro .race-joystick-throttle.is-held{box-shadow:0 2px 0 #061116,inset 0 1px 0 #c0ffe9}
.race-app.race-phone .has-nitro .race-joystick-pedal:disabled{box-shadow:none}
@media(max-width:350px){.race-app.race-phone .race-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.2}.race-app.race-phone .race-brand span{border:0;padding:0;margin:3px 0 0;font-size:7px;letter-spacing:1.6px}.race-app.race-phone .race-phone-link-summary .race-connection{font-size:8px}.race-app.race-phone .has-nitro .race-joystick-pedals{--pedal-main:76px;--pedal-small:48px;--pedal-gap:8px}.race-app.race-phone .has-nitro .race-joystick-pedal{font-size:8px}.race-app.race-phone .has-nitro .race-joystick-throttle{font-size:19px}.race-app.race-phone .has-nitro .race-joystick-pedal>.icon{width:18px;height:18px;margin-bottom:2px}.race-app.race-phone .has-nitro .race-joystick-throttle>.icon{width:27px;height:27px;margin-bottom:4px}}
@media(max-width:430px){.race-app.race-phone .race-phone-method{grid-template-columns:minmax(0,1fr)}.race-app.race-phone .race-phone-method>.race-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media(min-width:500px) and (min-height:700px){.race-app.race-phone .has-nitro .race-joystick-pedals{--pedal-main:104px;--pedal-small:76px;--pedal-gap:14px}.race-app.race-phone .has-nitro .race-joystick-pedal{font-size:11px}.race-app.race-phone .has-nitro .race-joystick-pedal>.icon{width:26px;height:26px;margin-bottom:5px}.race-app.race-phone .has-nitro .race-joystick-throttle{font-size:24px}.race-app.race-phone .has-nitro .race-joystick-throttle>.icon{width:36px;height:36px}}
@media(min-width:650px) and (max-height:500px){.race-app.race-phone .race-joystick-controls,.race-app.race-phone .race-joystick-controls.is-swapped{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;column-gap:44px}.race-app.race-phone .has-nitro .race-joystick-pedals{--pedal-main:94px;--pedal-small:72px;--pedal-gap:10px;margin-bottom:0}.race-app.race-phone .has-nitro .race-joystick-pedal{font-size:11px}.race-app.race-phone .has-nitro .race-joystick-pedal>.icon{width:25px;height:25px;margin-bottom:5px}.race-app.race-phone .has-nitro .race-joystick-throttle{font-size:23px}.race-app.race-phone .has-nitro .race-joystick-throttle>.icon{width:33px;height:33px}.race-app.race-phone .has-nitro .race-joystick-zone{height:176px;border-radius:34px}.race-app.race-phone .race-phone-input-settings .race-phone-method{grid-template-columns:minmax(0,1fr)}.race-app.race-phone .race-phone-input-settings .race-phone-method>.race-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

@media(min-width:650px) and (max-height:500px){.race-app.race-phone .race-phone-actions{padding-top:6px;margin-top:6px}}

/* Orientation is a preference; the layout always uses the real phone viewport. */
.race-app.race-phone .race-phone-input-settings{grid-template-columns:minmax(0,1fr) 48px 48px 48px}
.race-app.race-phone .race-phone-orientation{display:flex;flex-direction:column;width:48px;height:48px;min-width:48px;padding:3px;color:#a4c2c7}
.race-app.race-phone .race-phone-orientation>.icon{margin:0 0 2px}
.race-phone-orientation>span{font-size:7px;letter-spacing:.7px;line-height:1.1}
.race-app.race-phone[data-orientation-mode=landscape] .race-phone-orientation>.icon{transform:rotate(90deg)}
.race-app.race-phone .race-phone-layout-backdrop{position:fixed;inset:0;top:0;right:0;bottom:0;left:0;z-index:1500;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,10,14,.92);max-width:none;margin:0}
.race-phone-layout-dialog{width:100%;max-width:420px;max-height:100%;overflow:auto;padding:20px;border:1px solid #36565e;border-radius:20px;background:#10242c;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.race-phone-layout-dialog>header{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;column-gap:12px;margin-bottom:18px}
.race-app.race-phone .race-phone-layout-dialog h2{font-size:24px;line-height:1.2;letter-spacing:-.6px}
.race-app.race-phone .race-phone-layout-dialog>header button{width:48px;height:48px;padding:0}
.race-app.race-phone .race-phone-layout-dialog>header button>.icon{margin:0}
.race-phone-layout-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:8px}
.race-app.race-phone .race-phone-layout-options button{display:flex;flex-direction:column;min-height:86px;padding:12px 4px;font-size:11px;color:#aac4ca}
.race-app.race-phone .race-phone-layout-options button>.icon{margin:0 0 9px}
.race-app.race-phone .race-phone-layout-options button:last-child>.icon{transform:rotate(90deg)}
.race-app.race-phone .race-phone-layout-options button[aria-pressed=true]{border-color:#55caae;background:#1c5147;color:#b4f7de}
.race-phone-layout-dialog>p{font-size:12px;line-height:1.55;color:#c1d5d8;margin-top:18px}
.race-phone-layout-dialog>small{display:block;font-size:var(--t-micro,10px);line-height:1.5;color:#839fa7;margin-top:9px}
.race-phone-driving-modes{border:0;border-top:1px solid #36565e;margin:18px 0 0;padding:12px 0 0;min-width:0}
.race-phone-driving-modes legend{font-size:12px;font-weight:600;padding-right:10px;color:#d2e6e3}
.race-phone-driving-modes>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px}
.race-app.race-phone .race-phone-driving-modes button{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:6px;row-gap:6px;min-height:86px;padding:10px;text-align:left}
.race-phone-driving-modes button>.icon{margin:0!important}.race-phone-driving-modes button>strong{font-size:12px}
.race-phone-driving-modes button>small{grid-column:1/-1;font-size:var(--t-micro,10px);font-weight:400;line-height:1.5;color:#a9c3c3}
.race-app.race-phone .race-phone-driving-modes button[aria-pressed=true]{border-color:#55caae;background:#1c5147;color:#b4f7de}
.race-joystick-controls[data-driving-mode=easy] .race-joystick-zone{border-color:#397c70}
.race-phone-results{padding:22px;border:1px solid #2e514f;background:#10272b;border-radius:18px}
.race-phone-result-heading{display:grid;grid-template-columns:30px minmax(0,1fr) 48px;align-items:center;column-gap:12px}
.race-phone-result-heading>.icon{color:#8ce2c8}
.race-app.race-phone .race-phone-result-heading .race-eyebrow{font-size:8px;letter-spacing:1px}
.race-app.race-phone .race-phone-result-heading h1{font-size:24px;line-height:1.2;letter-spacing:-.6px}
.race-phone-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;margin:24px 0;padding:18px 0;border-top:1px solid #294c4e;border-bottom:1px solid #294c4e}
.race-phone-result-stats dt{font-size:var(--t-micro,10px);color:#99b8bd;margin-bottom:5px}
.race-phone-result-stats dd{margin:0;font-size:25px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}
.race-phone-countdown{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;align-items:center;color:#82ddc4}
.race-phone-countdown>div{display:flex;align-items:center;justify-content:space-between}
.race-phone-countdown strong{font-size:12px;font-weight:550;margin-right:12px}
.race-phone-countdown [role=timer]{font-size:28px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.race-phone-results>p{font-size:12px;line-height:1.65;color:#a6c1c5;margin-top:16px}
@media(max-width:350px){.race-app.race-phone .race-phone-method select{font-size:var(--t-micro,10px);padding-left:8px;padding-right:4px}.race-phone-results{padding:16px}.race-phone-result-heading{column-gap:8px}.race-app.race-phone .race-phone-result-heading h1{font-size:20px}.race-phone-result-stats{column-gap:8px;margin:18px 0;padding:14px 0}.race-phone-result-stats dd{font-size:22px}.race-phone-countdown strong{font-size:var(--t-micro,10px)}}
@media(min-width:650px) and (max-height:500px){.race-phone-session{grid-template-columns:minmax(0,1fr) 300px;column-gap:16px}.race-app.race-phone .race-phone-method select{font-size:11px;padding:8px}.race-phone-results{max-width:700px;padding:16px 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:14px}.race-phone-result-heading{grid-column:1;grid-row:1}.race-phone-result-stats{grid-column:2;grid-row:1/3;margin:0;align-self:center;padding:16px 0}.race-phone-countdown{grid-column:1;grid-row:2}.race-phone-results>p{grid-column:1/-1;margin:0}.race-app.race-phone .race-phone-result-heading h1{font-size:22px}.race-app.race-phone .race-phone-result-heading .race-eyebrow{font-size:7px}}
/* Smaller phones held sideways need one compact row per control group. */
@media(min-width:480px) and (max-width:649px) and (max-height:500px){
 .race-app.race-phone{padding:0 12px 8px}.race-app.race-phone .race-header{height:50px;margin-bottom:6px}.race-phone-ready .race-phone-steps{display:none}
 .race-phone-session{grid-template-columns:minmax(0,1fr);row-gap:6px}
 .race-app.race-phone .race-phone-status{grid-column:1;grid-row:1;min-height:48px;padding:0;align-items:center}
 .race-app.race-phone .race-phone-status>div{display:grid;grid-template-columns:auto minmax(0,154px);column-gap:16px;min-width:0;flex:1}
 .race-phone-status>div>small{grid-column:1;grid-row:1}.race-phone-status>div>strong{grid-column:1;grid-row:2}
 .race-app.race-phone .race-phone-status .race-nitro{grid-column:2;grid-row:1/3;align-self:center;width:154px;margin-top:0}
 .race-app.race-phone .race-phone-status .race-nitro-caption{font-size:7px}.race-app.race-phone .race-phone-status>button{height:48px;min-width:86px}
 .race-app.race-phone .race-joystick-controls,.race-app.race-phone .race-joystick-controls.is-swapped{grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;max-width:none;width:100%}
 .race-app.race-phone .has-nitro .race-joystick-zone{height:136px;max-width:270px;border-radius:28px}.race-joystick-ring{width:100px;height:100px}.race-joystick-caption{bottom:8px;font-size:8px}.race-joystick-hint{display:none}
 .race-app.race-phone .has-nitro .race-joystick-pedals{--pedal-main:70px;--pedal-small:56px;--pedal-gap:8px;margin-bottom:0}
 .race-app.race-phone .has-nitro .race-joystick-throttle{font-size:18px}.race-app.race-phone .has-nitro .race-joystick-throttle>.icon{width:25px;height:25px;margin-bottom:3px}
 .race-app.race-phone .race-phone-input-settings{grid-column:1;grid-row:3;max-width:420px;width:100%;justify-self:center}.race-app.race-phone .race-phone-method{grid-template-columns:minmax(0,1fr)}.race-app.race-phone .race-phone-method>.race-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .race-phone-instruction{display:none}.race-phone-actions{max-width:420px!important;padding-top:6px;margin-top:6px}.race-app.race-phone .race-phone-pad{grid-column:1;grid-row:2;min-height:136px;padding:12px}
 .race-phone-results{padding:14px 18px}.race-phone-result-stats{margin:12px 0;padding:10px 0}.race-phone-results>p{font-size:11px;line-height:1.45;margin-top:10px}.race-phone-countdown [role=timer]{font-size:24px}
}
@media(max-height:360px){.race-phone-layout-dialog{padding:14px 18px}.race-phone-layout-dialog>header{margin-bottom:12px}.race-app.race-phone .race-phone-layout-options button{min-height:70px}.race-phone-layout-dialog>p{margin-top:12px}}

/* The brand icon and one thumb-action group make the phone a handheld
   controller. A phone is always the small viewport, so it carries the W mark
   rather than the wordmark, the same swap the app's toolbars make under 700px. */
.race-app.race-phone .race-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex-shrink:0;width:112px;line-height:1}
.race-app.race-phone .race-brand>.race-phone-wordmark{display:block;width:auto;height:27px;flex-shrink:0;padding:0;margin:0;border:0}
.race-phone-wordmark>svg{display:block;width:auto;height:27px}
.race-app.race-phone .race-brand>.race-phone-brand-label{border:0;padding:0;margin:4px 0 0;font-size:7px;letter-spacing:1.5px;color:#9cb4b8}
.race-phone-ready .race-phone-steps{display:none}
.race-phone-ready .race-phone-session{margin-top:8px}
.race-app.race-phone .race-phone-session .race-phone-status{align-items:center}
.race-app.race-phone .race-phone-session .race-phone-status>div{display:grid;grid-template-columns:minmax(65px,.65fr) minmax(0,1fr);column-gap:8px;align-items:center}
.race-app.race-phone .race-phone-session .race-phone-status>div>small{grid-column:1;grid-row:1;line-height:1.2}
.race-app.race-phone .race-phone-session .race-phone-status>div>strong{grid-column:1;grid-row:2}
.race-app.race-phone .race-phone-session .race-phone-status .race-nitro{grid-column:2;grid-row:1/3;width:160px;max-width:100%;margin:0}
.race-app.race-phone .race-joystick-controls.is-gamepad{--gamepad-action:52px;--gamepad-gap:8px;--gamepad-stick:176px;grid-template-columns:minmax(0,1fr) calc(var(--gamepad-action)*3 + var(--gamepad-gap)*2);column-gap:16px;align-items:center;max-width:560px;width:100%;justify-self:center}
.race-app.race-phone .race-joystick-controls.is-gamepad.is-swapped{grid-template-columns:calc(var(--gamepad-action)*3 + var(--gamepad-gap)*2) minmax(0,1fr)}
.race-app.race-phone .is-gamepad .race-joystick-zone{height:var(--gamepad-stick);max-width:240px;border-radius:50%;border:2px solid #355d62;background:radial-gradient(ellipse at center,#1d3940 0,#13282f 59%,#0c1b21 60%,#142b33 72%,#0b1920 100%);box-shadow:inset 0 2px 0 #41646a,0 5px 0 #051016}
.race-app.race-phone .is-gamepad .race-joystick-zone.is-held{border-color:#6ad6ba;box-shadow:inset 0 2px 0 #4b9485,0 3px 0 #051016}
.race-app.race-phone .is-gamepad .race-joystick-ring{width:112px;height:112px;max-width:84%;box-shadow:0 0 0 10px rgba(45,77,81,.12),inset 0 0 0 10px rgba(10,28,33,.3)}
.race-app.race-phone .is-gamepad .race-joystick-knob{width:62px;height:62px;border-width:3px;box-shadow:0 5px 0 #071a20,inset 0 2px 0 #91c6bd}
.race-app.race-phone .is-gamepad .race-joystick-caption{bottom:16px;font-size:8px;letter-spacing:1px}
.race-app.race-phone .is-gamepad .race-joystick-hint{display:none}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals{--pedal-small:var(--gamepad-action);--pedal-gap:var(--gamepad-gap);grid-template-columns:repeat(3,var(--gamepad-action));grid-template-rows:repeat(3,var(--gamepad-action));gap:var(--gamepad-gap);width:auto;padding:0;margin:0;align-self:center;background:radial-gradient(ellipse at center,#1b343b 0,#10242c 57%,transparent 58%)}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>button{width:var(--gamepad-action);height:var(--gamepad-action);min-width:48px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px;border-radius:50%;border-width:2px;font-size:8px;line-height:1.1;letter-spacing:.4px;touch-action:none;box-shadow:0 4px 0 #061116,inset 0 2px 0 rgba(255,255,255,.08)}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>button>.icon{width:20px;height:20px;margin:0 0 3px}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-throttle{grid-column:3;grid-row:2;font-size:13px;letter-spacing:1px}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-brake{grid-column:2;grid-row:3}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-nitro{grid-column:2;grid-row:1}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-item-button{grid-column:1;grid-row:2}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-horn{grid-column:2;grid-row:2;background:#1e3239;border-color:#57727c;color:#bfd4d8}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-horn:active:not(:disabled){background:#365560;border-color:#9dbdc7;color:#edf8fa;box-shadow:0 2px 0 #061116}
.race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>button:disabled{opacity:.48;box-shadow:none}
@media(max-width:350px){
 .race-app.race-phone .race-joystick-controls.is-gamepad{--gamepad-action:48px;--gamepad-stick:160px;column-gap:12px}
 .race-app.race-phone .is-gamepad .race-joystick-ring{width:98px;height:98px}
 .race-app.race-phone .is-gamepad .race-joystick-caption{font-size:7px;letter-spacing:.6px;bottom:12px}
 .race-app.race-phone .race-phone-session .race-phone-status strong{font-size:32px;letter-spacing:-1px}
 .race-app.race-phone .race-phone-session .race-phone-status strong span{font-size:9px;margin-left:4px}
}
@media(min-width:500px) and (min-height:700px){
 .race-app.race-phone .race-joystick-controls.is-gamepad{--gamepad-action:72px;--gamepad-gap:12px;--gamepad-stick:248px;column-gap:24px}
 .race-app.race-phone .is-gamepad .race-joystick-ring{width:170px;height:170px}
 .race-app.race-phone .is-gamepad .race-joystick-knob{width:76px;height:76px}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>button{font-size:var(--t-micro,10px)}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>button>.icon{width:26px;height:26px;margin-bottom:5px}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-throttle{font-size:17px}
}
@media(min-width:480px) and (max-height:500px){
 .race-phone-ready .race-phone-session{margin-top:0}
 .race-app.race-phone .race-joystick-controls.is-gamepad,.race-app.race-phone .race-joystick-controls.is-gamepad.is-swapped{--gamepad-action:64px;--gamepad-gap:10px;--gamepad-stick:160px;grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;column-gap:32px}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals{grid-template-rows:repeat(2,var(--gamepad-action));background:linear-gradient(135deg,#10242c,#172f36);border-radius:32px}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-item-button{grid-column:1;grid-row:1}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-nitro{grid-column:2;grid-row:1}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-horn{grid-column:3;grid-row:1}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-brake{grid-column:1;grid-row:2}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>.race-joystick-throttle{grid-column:2/4;grid-row:2;width:calc(var(--gamepad-action)*2 + var(--gamepad-gap));border-radius:36px;font-size:16px}
 .race-app.race-phone .race-joystick-controls.is-gamepad .race-joystick-pedals>button>.icon{width:23px;height:23px}
}
@media(min-width:480px) and (max-width:649px) and (max-height:500px){
 .race-app.race-phone .race-joystick-controls.is-gamepad,.race-app.race-phone .race-joystick-controls.is-gamepad.is-swapped{--gamepad-action:52px;--gamepad-gap:8px;--gamepad-stick:128px;column-gap:24px}
 .race-app.race-phone .is-gamepad .race-joystick-zone{max-width:224px}
 .race-app.race-phone .is-gamepad .race-joystick-ring{width:96px;height:96px}
 .race-app.race-phone .is-gamepad .race-joystick-caption{bottom:9px;font-size:7px}
 .race-app.race-phone.race-phone-ready[data-phone-controls=true]{position:relative}
 .race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-input-settings{width:calc(100% - 120px);max-width:none;justify-self:start}
 .race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions{position:absolute;right:12px;bottom:8px;grid-template-columns:repeat(2,48px);column-gap:8px;width:104px;padding:0;margin:0;border:0}
 .race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions button{width:48px;height:48px;padding:0}
 .race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions button>.icon{margin:0}
 .race-app.race-phone.race-phone-ready[data-phone-controls=true] .race-phone-actions button>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* A phone camera is pointed at this panel, so it says who it belongs to before
   anyone taps anything. */
.race-pair-mark{display:block;margin:0 auto 10px;height:20px;width:auto;opacity:.85}

/* Easy driving needs two thumbs: the stick owns GO, leaving the other thumb
   free for powers. Manual mode keeps its separate pedal layout. */
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy]{--easy-action:64px;grid-template-columns:minmax(0,1fr) calc(var(--easy-action)*2 + var(--gamepad-gap))}
.race-phone-layout-dialog>header{position:sticky;top:0;z-index:2;background:#10242c;padding-bottom:8px}
.race-app.race-phone .race-phone-actions{grid-template-columns:1fr}
.race-app.race-phone .race-phone-connection-dialog>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;width:100%;margin-top:10px}
.race-phone-connection-dialog .race-link-quality{justify-content:flex-start;margin:12px 0}
.race-practice-progress{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;margin:14px 0;list-style:none}
.race-practice-progress>li{display:flex;align-items:center;gap:6px;font-size:11px;color:#97b1b6}
.race-practice-progress>li[data-complete=true]{color:#77e4c7}
.race-practice-progress .icon{flex-shrink:0}
.race-app.race-phone .race-phone-connection-dialog .race-joystick-controls.is-gamepad[data-driving-mode=easy]{--easy-action:48px;--gamepad-gap:8px;--gamepad-stick:142px;grid-template-columns:minmax(0,1fr) 104px;column-gap:10px;width:100%;margin:14px 0;max-width:none}
.race-app.race-phone .race-phone-connection-dialog .race-joystick-zone{max-width:210px}
.race-app.race-phone .race-phone-connection-dialog .race-joystick-ring{width:96px;height:96px}
.race-app.race-phone .race-phone-connection-dialog .race-joystick-knob{width:52px;height:52px}
.race-app.race-phone .race-phone-connection-dialog .race-joystick-caption{font-size:7px;bottom:10px}
.race-controller-link{display:flex;flex-direction:column;gap:5px;width:100%;font-size:11px}
.race-controller-link input{width:100%;min-height:48px;font-size:12px;direction:ltr}
.race-controller-link small{color:#b9d5c9;overflow-wrap:anywhere}
.race-pair .race-pair-device-link{font-size:11px;color:#a1bdb7}
.race-app.race-phone .race-joystick-controls.is-gamepad.is-swapped[data-driving-mode=easy]{grid-template-columns:calc(var(--easy-action)*2 + var(--gamepad-gap)) minmax(0,1fr)}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-pedals{grid-template-columns:repeat(2,var(--easy-action));grid-template-rows:repeat(2,var(--easy-action));background:none}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-pedals>button{width:var(--easy-action);height:var(--easy-action);border-radius:18px;font-size:9px;letter-spacing:0}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-nitro{grid-column:1;grid-row:1}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-item-button{grid-column:2;grid-row:1}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-brake{grid-column:1;grid-row:2}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-horn{grid-column:2;grid-row:2}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy]:not(.has-items) .race-joystick-nitro{grid-column:1/3;width:100%}
.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-caption{letter-spacing:0;max-width:74%;margin:auto;line-height:1.1}
@media(min-height:501px){.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy] .race-joystick-hint{display:block;max-width:180px}}
@media(max-width:350px){.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy]{--easy-action:56px}}
@media(min-width:500px) and (min-height:700px){.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy]{--easy-action:80px}}
@media(min-width:480px) and (max-height:500px){
 .race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy],.race-app.race-phone .race-joystick-controls.is-gamepad.is-swapped[data-driving-mode=easy]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:480px) and (max-width:649px) and (max-height:500px){.race-app.race-phone .race-joystick-controls.is-gamepad[data-driving-mode=easy]{--easy-action:56px}}
@media(max-height:800px){.race-pair-mark{margin-bottom:7px;height:17px}}

/* racing-audio.css */
/* Music belongs to the persistent racing screen, outside its WebGL lifecycle. */
/* One "Audio" control in the bar opens the drawer that holds the master
   switch, the music and the action cues. The trigger reads the master state
   (teal when the race is audible) and carries the music dot, so the bar still
   answers "can I hear it?" without opening anything. */
.race-display .race-audio-drawer{position:relative;flex-shrink:0}
.race-display .top-actions .race-audio-trigger{min-height:48px;min-width:48px;padding:8px 11px;border:1px solid #40545b;border-radius:10px;background:#142129;color:#bdced3;font-size:12px;white-space:nowrap}
.race-audio-trigger i{width:5px;height:5px;border-radius:50%;background:#597177;margin-left:7px}
.race-display .top-actions .race-audio-trigger.is-on{color:#83efd8;border-color:#4c9d8d}
.race-display .top-actions .race-audio-trigger[data-audio-state=retry]{color:#f2c98a;border-color:#8a7040}
.race-audio-trigger.is-playing i{background:#6bedd0}
/* The master switch is the drawer's first row: the whole race in one tap. */
.race-display .race-audio-panel .race-master-audio{width:100%;min-height:48px;margin:0 0 12px;padding:10px 12px;border:1px solid #40545b;border-radius:10px;background:#142129;color:#c2d8da;font-size:13px;font-weight:600}
.race-display .race-audio-panel .race-master-audio.is-on{color:#83efd8;border-color:#4c9d8d}
.race-display .race-background-panel{position:fixed;z-index:75;top:72px;right:18px;width:340px;max-width:calc(100vw - 24px);max-height:calc(100vh - 88px);overflow-y:auto;overscroll-behavior:contain;padding:16px;background:#0d1b22;border:1px solid #42616b;border-radius:16px;box-shadow:0 14px 36px #0008;color:#e8f4f2;text-align:left;font-size:12px;line-height:1.5}
.race-background-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.race-background-heading .race-eyebrow{display:block;margin:0;color:#8bcaba;font-size:9px;letter-spacing:1.4px}
.race-display .race-background-heading h2{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.3px;margin:3px 0 0}
.race-display .race-background-heading button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;min-width:48px;padding:0;border:1px solid #37515a;background:#162a32;border-radius:10px;color:#c2d8da}
.race-background-description{margin:0 0 12px;color:#98b6bc;font-size:12px}
.race-display .race-background-field{display:block;font-size:12px;margin:12px 0;color:#c2d8da}
.race-background-field>span{display:flex;align-items:center}
.race-background-field>span>output{margin-left:auto}
[dir=rtl] .race-background-field>span>output{margin-left:0;margin-right:auto}
.race-background-field output{font-variant-numeric:tabular-nums;color:#8de5ce;margin-left:8px}
.race-display .race-background-field select{width:100%;min-width:0;margin-top:6px}
.race-display .race-background-field input[type=range]{display:block;width:100%;height:48px;min-height:48px;padding:0;margin:0;accent-color:#64e4c8;cursor:pointer;background:transparent;border:0;box-shadow:none}
.race-display .race-background-check{display:flex;align-items:center;min-height:48px;margin:4px 0 12px;padding:8px 11px;border:1px solid #35525b;border-radius:10px;background:#152a32;color:#bfd7da;font-size:12px;cursor:pointer}
.race-display .race-background-check input{width:20px;height:20px;min-height:20px;margin:0 10px 0 0;accent-color:#64e4c8}
.race-display .race-background-play{width:100%;min-height:48px;padding:10px;background:#54e8cf!important;color:#072e25!important;border:1px solid #77ecd5!important;border-radius:10px;font-size:13px}
.race-background-status{margin:10px 0 0;min-height:18px;color:#a8cecd;font-size:11px}
.race-background-note{display:block;margin:8px 0 0;font-size:var(--t-micro,10px);color:#7f9da5;line-height:1.5}
.race-display .race-background-mute{width:100%;min-height:48px;margin-top:10px;border:1px solid #40545b;background:#142129;color:#c2d8da;font-size:12px}
@media(max-height:600px){.race-display .race-background-panel{padding:12px;top:68px;max-height:calc(100vh - 80px)}.race-background-description{margin-bottom:8px}.race-display .race-background-field{margin:8px 0}.race-display .race-background-check{margin-bottom:8px}.race-background-note{margin-top:6px}}
/* A phone measures the drawer from the visible viewport, under the notch. */
html[data-phone="true"] .race-display .race-background-panel{top:calc(60px + env(safe-area-inset-top,0px));right:max(12px,env(safe-area-inset-right,0px));max-height:calc(var(--app-height,100vh) - 72px - env(safe-area-inset-top,0px))}
@media(max-width:700px){.race-display .top-actions .race-audio-trigger{width:48px;padding:0}.race-audio-trigger>span,.race-audio-trigger>i{display:none}.race-display .race-background-panel{right:12px}}
@media(max-width:420px){.race-display .topbar .brand{display:none}.race-display .topbar .top-actions{width:100%;justify-content:space-between;gap:0}}

/* racing-nitro.css */
/* One compact meter accompanies earned boost. The phone uses the same readout
   in normal document flow; the driving display places it above touch controls. */
.race-nitro{width:220px;max-width:240px;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);color:#c5e3ec;pointer-events:none}
.race-nitro-label{display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:var(--s3);align-items:center;font-size:var(--t-micro);font-weight:var(--w-med);letter-spacing:var(--ls-caps);line-height:1.2}
.race-nitro-label>.icon{color:#91d4ee;width:16px;height:16px}
.race-nitro-label strong{font-size:var(--t-title);font-weight:var(--w-med);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums;color:#d3eff8}
.race-nitro-meter{height:var(--s2);border-radius:3px;overflow:hidden;background:#29414e;margin-top:var(--s2)}
.race-nitro-meter>i{display:block;height:100%;width:0;background:#79cbea;border-radius:3px}
.race-nitro-caption{display:block;min-height:var(--s5);max-width:100%;margin-top:var(--s2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-small);line-height:1.3;letter-spacing:0;color:#91b1bd}
.race-nitro.is-active{border-color:#89d9f2;background:#174252}
.race-nitro.is-active .race-nitro-meter>i{background:#b2efff}
.race-nitro-caption[role=status]{color:#b6eddd}
.race-display .race-stage-view>.race-nitro{position:absolute;left:var(--hud-gut);bottom:var(--hud-inset);z-index:2;box-shadow:var(--float-shadow)}
.race-display .race-play .race-held.race-nitro-control{min-width:48px;background:#193749;border-color:#527e94;color:#c4ebfa}
.race-display .race-play .race-held.race-nitro-control.is-held,.race-display .race-play .race-held.race-nitro-control.is-boosting{background:#2a657f;border-color:#9be4fa;color:#edfbff}
.race-display .race-touch-controls.has-nitro .race-pedals{flex-basis:252px}
.race-display .race-touch-controls.has-nitro .race-pedals>.race-held{min-width:48px}
.race-app.race-phone .race-phone-status .race-nitro{position:static;width:160px;max-width:100%;padding:0;margin-top:var(--s2);border:0;border-radius:0;background:transparent}
.race-app.race-phone .race-phone-status .race-nitro-label{grid-template-columns:12px minmax(0,1fr) auto;column-gap:var(--s1)}
.race-app.race-phone .race-phone-status .race-nitro-label>.icon{width:12px;height:12px}
.race-app.race-phone .race-phone-status .race-nitro-label strong{display:block;font-size:var(--t-small);line-height:1;letter-spacing:0;color:#c5e9f5}
.race-app.race-phone .race-phone-status .race-nitro-meter{height:var(--s1);margin-top:var(--s1)}
.race-app.race-phone .race-phone-status .race-nitro-caption{min-height:var(--s4);margin-top:var(--s1);line-height:1.2;font-weight:var(--w-body);text-transform:none;color:#8daebc}
.race-app.race-phone .race-phone-status .race-nitro-caption[role=status]{color:#a8dfca}
@media(max-width:700px){.race-display .race-stage-view>.race-nitro{width:170px}}
@media(max-height:600px){.race-app.race-phone .race-phone-status .race-nitro,.race-app.race-phone .race-phone-status .race-nitro-caption{margin-top:var(--s1)}}
@media(min-width:650px) and (max-height:500px){.race-app.race-phone .race-phone-status{align-items:flex-start}.race-app.race-phone .race-phone-status>button{margin-top:var(--s1)}.race-app.race-phone .race-phone-status>div{display:grid;grid-template-columns:auto minmax(0,154px);column-gap:var(--s5);align-items:center;min-width:0;flex:1}.race-app.race-phone .race-phone-status>div>small{grid-column:1;grid-row:1}.race-app.race-phone .race-phone-status>div>strong{grid-column:1;grid-row:2}.race-app.race-phone .race-phone-status .race-nitro{grid-column:2;grid-row:1/3;width:154px;margin:0}}

/* racing-scenarios.css */
/* Course rhythm and optional goals share the existing compact, dark HUD. */
.race-display .race-scenario-guidance{max-width:410px}
.race-display .race-sector-live{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;column-gap:var(--s2);row-gap:var(--s1);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--card-line);font-size:var(--t-small);color:#d1ebe5;line-height:1.3}
.race-sector-live>.icon{color:#54e8cf}
.race-sector-live>strong{font-weight:var(--w-med)}
.race-sector-live>span{font-variant-numeric:tabular-nums;color:#a9c8c7;white-space:nowrap}
.race-sector-live>p{grid-column:2/-1;margin:0;color:#bbd4d2}
.race-sector-live>small{grid-column:2/-1;color:#8eadae}
.race-display .race-scenario-live,.race-display .race-track-live{display:grid;grid-template-columns:14px auto minmax(0,1fr);align-items:center;column-gap:var(--s2);row-gap:var(--s1);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--card-line);color:#b8d4dc;font-size:var(--t-small);line-height:1.3}
.race-scenario-live>.icon,.race-track-live>.icon{color:#86c7dd}
.race-scenario-live>strong,.race-track-live>strong{font-weight:var(--w-med)}
.race-scenario-live>span,.race-track-live>span{text-align:right;font-variant-numeric:tabular-nums}
.race-scenario-live>small{grid-column:2/-1}
.race-scenario-live[data-status=achieved]>.icon,.race-scenario-live[data-status=achieved]>small,.race-track-live[data-status=achieved]>.icon{color:#7ce5bd}
.race-scenario-live[data-status=missed]>small{color:#ddb397}
.race-display .race-scenario-brief{padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg-raise);color:#b4cdd7;font-size:var(--t-body);line-height:1.5;margin:var(--s4) 0}
.race-scenario-brief p{margin:0}
.race-scenario-brief strong{color:#d2e9ef}
.race-scenario-brief>p>span{display:block;font-size:var(--t-small);color:#8fb5bd}
.race-sector-plan{list-style:none;padding:0;margin:var(--s4) 0}
.race-sector-plan>li{display:grid;grid-template-columns:17px minmax(0,1fr);column-gap:var(--s3);align-items:start;margin:var(--s3) 0}
.race-sector-plan .icon{margin-top:2px;color:#54e8cf}
.race-sector-plan strong{display:block;font-size:var(--t-body)}
.race-sector-plan span{display:block;font-size:var(--t-small);color:#9bbbc1}
.race-scenario-brief .race-track-brief{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:var(--s3);align-items:start}
.race-track-brief>.icon{margin-top:2px;color:#a1d5ba}
.race-track-brief small{display:block;font-size:var(--t-small);color:#8fb5bd;margin-top:var(--s1)}
.race-scenario-result,.race-track-result{display:grid;grid-template-columns:21px minmax(0,1fr);column-gap:var(--s4);align-items:center;padding:var(--card-pad);background:var(--card-bg-raise);border:1px solid var(--card-line);border-radius:var(--card-r);text-align:left}
.race-track-result{margin-top:var(--s3)}
.race-recap{margin-top:var(--s3);text-align:start;font-size:var(--t-body);line-height:1.5;color:#b3cdc5}
.race-recap strong{color:#e1f3ea}.race-recap p{margin:var(--s1) 0 0}
.race-scenario-result>.icon,.race-track-result[data-status=achieved]>.icon{color:#85dbbf}
.race-track-result>.icon{color:#98b5bd}
.race-scenario-result strong,.race-track-result strong{display:block;font-size:var(--t-title);color:#d9efe6}
.race-scenario-result span,.race-track-result span{display:block;font-size:var(--t-small);line-height:1.5;color:#a7c8c9;margin-top:var(--s1)}
/* Reduced browser heights reserve the band above the pedals for earned nitro.
   Retain current/next sectors and both goal counters; the full driving prompt
   and mastery reward explanation remain in the briefing and pause screen. */
@media(max-height:600px){.race-display .race-scenario-live,.race-display .race-track-live,.race-display .race-sector-live{margin-top:var(--s1);padding-top:var(--s1);row-gap:var(--s1)}.race-display .race-sector-live>p,.race-display .race-scenario-live>small{display:none}.race-display .race-scenario-brief{padding:var(--s3);margin:var(--s3) 0}}
@media(max-width:450px){.race-display .race-scenario-live,.race-display .race-track-live{grid-template-columns:14px minmax(0,1fr)}.race-scenario-live>span,.race-track-live>span{grid-column:2;text-align:left}}

/* racing-results.css */
/* Results keep the next action reachable in the car's compact browser.
   Chrome 79: grid gap only; tokens with literal fallbacks. */
.race-display .race-dialog.race-results-dialog{max-height:100%;min-height:0;overflow:hidden}
.race-results-dialog>.race-eyebrow,.race-results-dialog>h2{flex-shrink:0}
.race-results{display:flex;flex-direction:column;min-height:0;width:100%;flex:1 1 auto}
/* The body is the only part that may scroll, and it must be allowed to shrink:
   without flex:1 and min-height:0 it sized itself to its content, the dialog
   clipped the overflow, and the actions below it painted over the last line. */
.race-result-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:var(--s1,4px)}
.race-result-body>*+*{margin-top:var(--s3,8px)}
.race-result-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s4,12px)}
.race-result-stats span{display:flex;flex-direction:column}
.race-result-stats small{font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);color:#aabcc4}
.race-result-stats strong{font-size:var(--n-lg,24px);font-weight:var(--w-strong,700);line-height:1.2;letter-spacing:var(--ls-tight,-.02em);color:#fff;font-variant-numeric:tabular-nums}
.race-results .race-result-save,.race-results .race-result-best,.race-results .race-pairing-time,.race-results .race-result-wait{font-size:var(--t-small,11px);line-height:1.4}
.race-results .race-result-save{color:#b9eddf}
.race-results .race-result-best strong{color:#fff;margin-left:var(--s1,4px);font-weight:var(--w-med,600)}
[dir=rtl] .race-results .race-result-best strong{margin-left:0;margin-right:var(--s1,4px)}
.race-results .race-pairing-time{color:#d5e9ed;font-variant-numeric:tabular-nums}
.race-result-actions{flex-shrink:0;padding-top:var(--s4,12px)}
.race-result-actions>button{width:100%;margin-bottom:var(--s3,8px)}
.race-result-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3,8px)}
.race-result-secondary>button:only-child{grid-column:1/-1}
/* Labels here wrap in several languages, so these keep vertical padding. */
.race-results .race-result-actions button{min-height:var(--ctl-h,50px);padding:var(--s2,6px) var(--s4,12px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);white-space:normal}
.race-results .race-result-actions .race-primary{min-height:var(--ctl-h-lg,52px);font-weight:var(--w-strong,700)}
.race-ready-guide strong{display:block;color:#edf7f8;font-weight:var(--w-med,600);margin-bottom:var(--s1,4px);font-size:var(--t-body,12px)}
.race-ready-guide span{font-size:var(--t-body,12px);line-height:1.4}

/* A single lobby body scrolls; its title and its action row stay put. */
.race-display .race-dialog:not(.race-results-dialog){display:flex;flex-direction:column;max-height:100%;min-height:0;overflow:hidden}
.race-display .race-dialog:not(.race-results-dialog)>.race-eyebrow,.race-display .race-dialog:not(.race-results-dialog)>h2,.race-display .race-dialog>.race-lobby-actions{flex-shrink:0}
.race-display .race-lobby-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 var(--s1,4px) var(--s1,4px) 0}
.race-lobby-body>*+*{margin-top:var(--s3,8px)}
.race-display .race-lobby-body .race-chat-messages{max-height:none;overflow:visible}
/* Inside that body, two named columns: what you set up on the left, who is on
   the grid (and the phone that steers) on the right. They are wrappers rather
   than auto-placed children because a grid row is only as short as its tallest
   cell, and the roster is far taller than the garage toggle beside it. */
.race-lobby-main>*+*,.race-lobby-side>*+*{margin-top:var(--s3,8px)}
.race-lobby-main,.race-lobby-side{min-width:0}
/* Change car and Coins share one row; whichever panel opens takes the width. */
.race-lobby-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3,8px)}
.race-lobby-quick.is-open{grid-template-columns:minmax(0,1fr);row-gap:var(--s3,8px)}
.race-lobby-quick>*{min-width:0;margin:0}
.race-lobby-quick>*:only-child{grid-column:1/-1}
.race-lobby-quick .race-icon-action{width:100%;justify-content:center}
/* Start (the host) or I'm ready (everyone else) beside Return to garage. Both
   sit below the scroller, so the action the lobby is asking for is never the
   thing you have to go looking for. */
.race-lobby-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3,8px);padding-top:var(--s3,8px)}
.race-lobby-actions>*{width:100%;margin:0}
.race-lobby-actions>*:only-child{grid-column:1/-1}
/* Opening the garage or the coins panel makes this dialog that panel: its own
   title says so, and "Ready when you are." above a car editor is a heading for
   a screen you are no longer on. Giving its ~55px back is most of a car card. */
.race-display .race-lobby-dialog.is-open>.race-eyebrow,.race-display .race-lobby-dialog.is-open>h2{display:none}
/* The split needs a dialog wide enough for it, not merely a wide screen: the
   old rule split at a 701px viewport while the dialog was still a 340px column,
   which left the labels in the narrow half breaking one letter per line. The
   breakpoint now matches the width app-density.css gives the lobby dialog. */
@media(min-width:840px) and (orientation:landscape){
 .race-display .race-lobby-dialog .race-lobby-body.has-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s4,12px);align-items:start}
 .race-display .race-lobby-dialog .race-lobby-body.has-side>.race-lobby-main{grid-column:1}
 .race-display .race-lobby-dialog .race-lobby-body.has-side>.race-lobby-side{grid-column:2;margin-top:0}
 /* Picking a car is a full-width job; the grid waits below it. */
 .race-display .race-lobby-dialog .race-lobby-body.has-side.is-open{grid-template-columns:minmax(0,1fr)}
 .race-display .race-lobby-dialog .race-lobby-body.has-side.is-open>.race-lobby-side{grid-column:1;margin-top:var(--s3,8px)}
 /* With that width the garage's choices read as rows — label beside control —
    rather than a stacked caption and control for every one of them, which is
    what made a short list of choices three screens of scrolling. */
 .race-lobby-garage-page .race-garage-editor>label,
 .race-lobby-garage-page .race-garage-audio>label{grid-template-columns:minmax(0,150px) minmax(0,1fr);align-items:center}
}

/* The mark on the finish card. This is the screen someone photographs to show
   a time, so it leaves with the brand on it. */
.race-result-mark{display:block;margin:0 auto var(--s3,8px);height:20px;width:auto;opacity:.85}
/* After a race: the next unlocked course, one tap away. */
.race-course-nudge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4,12px);align-items:center;margin:var(--s3,8px) 0;padding:var(--card-pad,12px);border:1px solid var(--card-line,#234a4a);border-radius:var(--card-r,12px);background:var(--card-bg,#0f1b1e);color:#d6f3ee}
.race-course-nudge>div{min-width:0;display:flex;flex-direction:column}
.race-course-nudge small{font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase;color:#8fc9bf}
.race-course-nudge strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-course-nudge button{min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border-radius:var(--ctl-r,10px);border:1px solid var(--sel-line,#2f6f66);background:var(--sel-bg,#123a38);color:#c9fff4;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}

/* The damage report: what the race cost the car, against the race that did it.
   Only the parts that actually moved are listed, so a clean run says nothing
   rather than printing five zeroes. */
.race-damage-report{margin-top:var(--s3,8px);padding:var(--card-pad,12px);border:1px solid var(--card-line,#234a4a);border-radius:var(--card-r,12px);background:var(--card-bg,#0f1b1e)}
.race-damage-report h4{display:flex;align-items:center;margin:0 0 var(--s2,6px);color:#edf7f8;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-damage-report h4>.icon{margin-right:var(--s2,6px);color:#76cdbc}
[dir=rtl] .race-damage-report h4>.icon{margin-right:0;margin-left:var(--s2,6px)}
.race-damage-report h4>small{margin-left:auto;color:#a9bdc7;font-size:var(--t-micro,10px);font-weight:var(--w-body,400);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase}
.race-damage-report dl{margin:0}
.race-damage-report dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:var(--s3,8px);padding:var(--s1,4px) 0;border-top:1px solid #2a373e}
.race-damage-report dl>div:first-child{border-top:0}
.race-damage-report dt{color:#cfe1e6;font-size:var(--t-small,11px)}
.race-damage-report dd{margin:0;display:flex;align-items:baseline;color:#a9bdc7;font-size:var(--t-small,11px)}
.race-damage-report dd>b{margin-left:var(--s2,6px);color:#ffb4a4;font-variant-numeric:tabular-nums}
[dir=rtl] .race-damage-report dd>b{margin-left:0;margin-right:var(--s2,6px)}
.race-damage-report .needs-repair dt,.race-damage-report .needs-repair dd{color:#ffb4a4}

/* The season a board belongs to. A version bump is a season ending, not a
   board being deleted — the row says which rules these times were set under
   and whether it is still being added to. */
.race-board-season{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin:0 0 var(--s2);color:#9fb3bb;font-size:var(--t-small)}
.race-board-season strong{color:#eaf6f2;font-weight:var(--w-med)}
.race-board-season[data-live="true"]>.icon{color:#a3e635}
.race-board-season[data-live="false"]{color:#8a9aa2}
.race-board-season span{padding:1px var(--s2);border:1px solid #ffffff1f;border-radius:999px;font-size:var(--t-micro)}
.race-board-season[data-live="true"] span{border-color:#a3e63566;color:#cdf0a6}

/* racing-connection.css */
/* Phone-only connection readout. Numeric ping never displaces a control. */
.race-app.race-phone .race-link-quality{display:grid;grid-template-columns:17px minmax(0,1fr);column-gap:var(--s3);align-items:center;min-width:0;max-width:190px;color:#91b0ba;line-height:1.25}
.race-link-quality>.icon{flex-shrink:0}
.race-app.race-phone .race-link-quality strong{display:block;font-size:var(--t-body);line-height:1.3;font-weight:var(--w-med);letter-spacing:0;color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.race-app.race-phone .race-link-quality small{display:block;font-size:var(--t-small);line-height:1.35;font-weight:var(--w-body);letter-spacing:0;color:#91a9b0;white-space:nowrap}
.race-app.race-phone .race-link-quality[data-quality=good]{color:#78dec0}
.race-app.race-phone .race-link-quality[data-quality=fair]{color:#e4cb8d}
.race-app.race-phone .race-link-quality[data-quality=slow],.race-app.race-phone .race-link-quality[data-quality=stale]{color:#e9ad91}
@media(max-width:350px){.race-app.race-phone .race-link-quality{column-gap:var(--s1)}}
/* Recovery stays reachable when an ended socket cannot accept game commands. */
.race-recovery{flex-shrink:0;padding:var(--s4) 0}
.race-recovery p{font-size:var(--t-body);line-height:1.4;margin:0 0 var(--s3)}
.race-recovery button{min-height:var(--ctl-h-lg);min-width:var(--ctl-h-min);width:100%}
.race-recovery button+button{margin-top:var(--s3)}

/* racing-circuit.css */
/* The circuit map: where you are in the lap, and who is actually ahead.
   Sits opposite the live standings so the two never fight for the same corner
   of the screen. Chrome 79: no flex gap, no :has(), tokens with literals. */
/* Below the objective pill, which owns the top-left corner: the map is a place
   to glance at, not something to put over the only line that says how much time
   is left. Its own top follows the HUD bar the same way that pill does. */
.race-circuit-map{position:absolute;left:var(--hud-gut,16px);top:calc(var(--hud-bar,64px) + 62px);z-index:2;width:132px;max-width:32%;padding:var(--s2,6px);border:1px solid #344852;border-radius:var(--card-r,12px);background:#101c24ed;pointer-events:none}
[dir=rtl] .race-circuit-map{left:auto;right:var(--hud-gut,16px)}
.race-circuit-map svg{display:block;width:100%;height:auto}
.race-circuit-lap{display:flex;align-items:baseline;color:#b6cbd2;font-size:var(--t-micro,10px);letter-spacing:var(--ls-caps,.06em);margin-bottom:var(--s1,4px)}
.race-circuit-lap>b{margin-left:var(--s2,6px);color:#edf7f8;font-size:var(--n-sm,20px);font-weight:var(--w-strong,700);line-height:1;font-variant-numeric:tabular-nums}
.race-circuit-lap>small{margin-left:var(--s1,4px);font-size:var(--t-micro,10px)}
[dir=rtl] .race-circuit-lap>b{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-circuit-lap>small{margin-left:0;margin-right:var(--s1,4px)}
/* The road is drawn twice: a wide dark casing, then the racing surface on top,
   which is what makes a crossing read as a bridge rather than a smudge. */
.race-circuit-road{fill:none;stroke:#0b141a;stroke-width:9;stroke-linejoin:round}
.race-circuit-line{fill:none;stroke:#44606c;stroke-width:5.5;stroke-linejoin:round}
.race-circuit-start{fill:#f5f7f8}
.race-circuit-car{fill:#9fb5ae;stroke:#0b141a;stroke-width:1.1}
.race-circuit-car.is-bot{opacity:.75}
.race-circuit-car.is-you{fill:#54e8cf;stroke:#07231d;stroke-width:1.4}
/* On the car's split view the standings already own the right; the map keeps
   its own side and shrinks rather than crowding the speed readout. */
html[data-density="compact"] .race-circuit-map{width:112px;top:calc(var(--hud-bar,64px) + 56px)}
html[data-density="ultra"] .race-circuit-map{width:92px;top:calc(var(--hud-bar,64px) + 44px);padding:var(--s1,4px)}
html[data-density="ultra"] .race-circuit-lap>b{font-size:var(--t-title,16px)}

/* The circuit, drawn, where you choose it. A course name and a lap count cannot
   tell you whether a loop is fast and sweeping or a chain of hairpins, and that
   is the thing that decides which car to bring. Chrome 79: grid gap only. */
.race-circuit-preview{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s4,12px);align-items:center;padding:var(--card-pad,12px);border:1px solid var(--card-line,#234a4a);border-radius:var(--card-r,12px);background:var(--card-bg,#0f1b1e)}
.race-circuit-preview>svg{display:block;width:76px;height:76px}
.race-circuit-preview.is-compact>svg{width:46px;height:46px}
.race-circuit-preview>div{min-width:0}
.race-circuit-preview strong{display:block;color:#edf7f8;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.25}
.race-circuit-figures{display:flex;flex-wrap:wrap;align-items:baseline;margin-top:var(--s1,4px);color:#a9bdc7;font-size:var(--t-small,11px)}
.race-circuit-figures>b{color:#54e8cf;font-variant-numeric:tabular-nums}
.race-circuit-figures>span{margin-left:var(--s3,8px)}
[dir=rtl] .race-circuit-figures>span{margin-left:0;margin-right:var(--s3,8px)}
.race-circuit-level{display:flex;align-items:center;margin-top:var(--s2,6px);color:#bdced3;font-size:var(--t-micro,10px);line-height:1.35}
.race-circuit-level>.icon{margin-right:var(--s2,6px);color:#76cdbc;flex-shrink:0}
[dir=rtl] .race-circuit-level>.icon{margin-right:0;margin-left:var(--s2,6px)}
/* The thumbnail on a course card in the browser. */
.race-track>.race-circuit-thumb{display:block;width:100%;height:auto;max-height:64px;margin-top:var(--s2,6px)}
/* Beside the challenge card on the garage screen, where the setup panel has no
   room for it: the options sheet is three rows of mode buttons tall on the
   car's split view, and a preview under the fold is a preview nobody sees. */
.race-home-challenge>.race-circuit-preview{margin-top:var(--s3,8px);background:none;border:0;padding:0;column-gap:var(--s3,8px)}
.race-home-challenge>.race-circuit-preview strong{font-size:var(--t-small,11px)}

/* The circuit tour, in the shape the Arcade tour already taught: where you have
   been, what is next, one button that takes you there. */
.race-circuit-journey{padding:var(--card-pad,12px);border:1px solid var(--card-line,#234a4a);border-radius:var(--card-r,12px);background:var(--card-bg,#0f1b1e)}
.race-circuit-journey>p{margin:var(--s2,6px) 0 0;color:#a9bdc7;font-size:var(--t-small,11px);line-height:1.45}
.race-circuit-places{list-style:none;margin:var(--s3,8px) 0 0;padding:0}
.race-circuit-places>li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s3,8px);padding:var(--s1,4px) 0;border-top:1px solid #2a373e}
.race-circuit-places>li:first-child{border-top:0}
.race-circuit-places strong{display:block;color:#edf7f8;font-size:var(--t-small,11px);font-weight:var(--w-med,600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-circuit-places small{display:block;color:#8fa6b0;font-size:var(--t-micro,10px)}
.race-circuit-places>li>b{color:#a9bdc7;font-size:var(--t-micro,10px);font-variant-numeric:tabular-nums}
.race-circuit-places>li.is-done>b{color:#6ff0cd}
.race-circuit-glyph{display:block;width:26px;height:26px;flex-shrink:0}
.race-circuit-glyph .race-circuit-line{stroke-width:9}

/* racing-multiplayer.css */
/* Bounded four-driver HUD; no blur, animated panels or extra graphics canvas. */
.race-roster .race-room-share{display:flex;align-items:center;justify-content:space-between}
.race-roster .race-room-share small{display:block;font-size:var(--t-micro,10px);letter-spacing:.1em;color:#a8bec8}
.race-roster .race-room-share strong{font-size:var(--n-sm,20px);letter-spacing:.1em;color:#edf7f8;user-select:all}
.race-roster .race-room-share button{display:inline-flex;align-items:center;justify-content:center;min-width:70px;min-height:48px;background:#19332f;color:#baf6e8;border-color:#386159;font-size:var(--t-small,11px);padding:var(--s3,8px)}
.race-roster ul{padding:0;margin:var(--s3,8px) 0 0;list-style:none}
.race-roster li{padding:var(--s2,6px) 0;border-top:1px solid #2a373e}
.race-driver{display:flex;align-items:center;min-width:0;color:#edf7f8}
.race-driver>.race-glyph{flex-shrink:0}
.race-driver-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-body,12px);font-weight:650}
.race-driver>small{font-size:var(--t-micro,10px);flex-shrink:0;color:#90ddd0;font-weight:600}
.race-driver-detail{display:block;font-size:var(--t-micro,10px);color:#a9bdc7;line-height:1.45;margin-top:var(--s1,4px)}
.race-roster .race-roster-hint,.race-display .race-roster p{font-size:var(--t-micro,10px);line-height:1.4;color:#b1c7cf}
.race-display .race-roster p{margin-top:var(--s2,6px)}
.race-display .race-stage-view>.race-live-board{position:absolute;right:18px;top:84px;z-index:2;width:208px;max-width:calc(100% - 24px);padding:8px;border:1px solid #344852;border-radius:8px;background:#101c24ed;pointer-events:none}
.race-live-board-title{display:flex;align-items:center;justify-content:space-between;color:#b6cbd2;font-size:8px;letter-spacing:.6px}
.race-live-board-title>span{display:inline-flex;align-items:center}
.race-live-board ol{list-style:none;margin:7px 0 0;padding:0}
.race-live-board li{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:5px;padding:4px;border-top:1px solid #273942;font-size:11px;line-height:1.35}
.race-live-board li>b{color:#adc0c9;grid-row:1/3}
.race-live-board li.is-you{background:#1e3e39;border-radius:3px}
.race-live-driver{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#edf7f8}
.race-live-driver small{font-size:8px;color:#8ed7c6}
.race-live-gap{grid-column:2;font-size:9px;color:#a7bfc9}
.race-display .has-multiplayer .race-objective{max-width:calc(100% - 260px)}
.race-final-board h3{display:flex;align-items:center;font-size:13px;color:#ebf7f7;margin:0 0 8px}
.race-display .race-final-board .race-winner{color:#a3ecd4;font-size:11px;margin-bottom:8px;overflow-wrap:anywhere}
.race-final-board .race-standings{display:block}
.race-final-board .race-standings li{display:grid;grid-template-columns:27px minmax(0,1fr) auto;column-gap:7px;align-items:center;padding:8px 4px;border-top:1px solid #2a373e}
.race-final-board li.is-you{background:#142f2b;border-radius:4px}
.race-finish-place{font-size:11px;color:#9be3ce}
.race-finish-time{font-size:12px;text-align:right;font-variant-numeric:tabular-nums;color:#ecf5f8}
.race-finish-time small{display:block;font-size:9px;color:#a8bcc5;margin-top:3px}
.race-nameplates{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.race-nameplates[hidden]{display:none}
.race-pad-release-hint{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:8px 12px;background:#172f32;border:1px solid #527f79;border-radius:7px;color:#d1f3e8;font-size:12px;text-align:center;pointer-events:none;z-index:3}
.race-display .race-play>.race-touch-controls .race-steering{flex:0 1 200px;min-width:104px}
.race-display .race-play>.race-touch-controls .race-pedals{flex:0 1 290px;min-width:216px}
.race-display .race-play>.race-touch-controls .race-held{min-width:48px;flex:1 1 0;padding-left:4px;padding-right:4px}
.race-display .race-play>.race-touch-controls .race-steering>*+*,.race-display .race-play>.race-touch-controls .race-pedals>*+*{margin-left:8px}
.race-display .race-play .race-horn-control{background:#24352f;border-color:#50776a;color:#bfe9cf;font-size:11px!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
.race-app.race-phone .race-phone-status>div{min-width:0;flex:1}
.race-app.race-phone .race-phone-status>button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 56px;min-width:48px;min-height:48px;margin-left:8px;padding:6px;font-size:var(--t-micro,10px)}
.race-app.race-phone .race-phone-status>.race-phone-horn{background:#243a33;border-color:#476e60;color:#c4edd8}
.race-nameplates>[data-player-id]{position:absolute;left:0;top:0;visibility:hidden;will-change:transform;max-width:150px}
.race-nameplates>[data-player-id]>span{display:block;transform:translate(-50%,-100%);padding:4px 7px;max-width:150px;border:1px solid #5faba2;border-radius:5px;background:#0c1a22ec;color:#d7fff4;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.race-display .race-stage-view>.race-live-board{width:176px;right:12px;top:148px}.race-display .has-multiplayer .race-objective{max-width:calc(100% - 24px)}.race-live-board li{font-size:var(--t-micro,10px)}.race-live-gap{font-size:8px}}
@media(max-height:600px) and (min-width:701px){.race-display .race-stage-view>.race-live-board{width:192px;padding:6px}.race-live-board li{padding:3px}.race-live-board ol{margin-top:4px}}
@media(min-width:650px) and (max-height:500px){.race-app.race-phone .race-phone-status>div{grid-template-columns:auto minmax(0,1fr);column-gap:10px}.race-app.race-phone .race-phone-status .race-nitro{max-width:100%;width:140px}.race-app.race-phone .race-phone-status>button{min-width:48px}}

/* Chrome 79 has no flex gap; explicit sibling margins keep these controls legible. */
.race-room-share>button{margin-left:10px}
.race-room-share button>span,.race-driver>*+*{margin-left:6px}
.race-live-board-title>span+span{margin-left:5px}
.race-live-board-title>span>.icon{margin-right:4px}
.race-final-board h3>.icon{margin-right:7px}

/* Reserve two independent columns for goals and a full four-racer grid.
   Portrait display widths have enough room for both; stacking these absolute
   panels lets longer sector guidance cover the leading racers. */
@media(min-width:541px) and (max-width:700px){
 .race-display .race-stage-view>.race-live-board{top:84px}
 .race-display .has-multiplayer .race-objective{left:14px;max-width:calc(100% - 220px)}
}
@media(max-height:600px) and (min-width:701px){
 .race-display .has-touch .race-live-board li{font-size:var(--t-micro,10px);padding:2px 3px}
}
/* The garage inside the lobby: the same panel as before a race, scrolling with the lobby body. */
.race-lobby-garage{display:flex;flex-direction:column}
.race-lobby-garage>*+*{margin-top:var(--s3,8px)}
.race-lobby-garage>button{align-self:flex-start}
.race-lobby-garage-page{padding:0;border:1px solid #20282e;border-radius:var(--card-r,12px);background:#0d1216}
.race-lobby-garage-page .race-garage-preview{display:none}

/* Confirmation in the lobby: who is still choosing, and your own answer. */
.race-driver-ready{display:inline-flex;align-items:center;font-size:var(--t-small,11px);letter-spacing:.06em;text-transform:uppercase;color:#9fb5ae;white-space:nowrap}
.race-driver-ready>.icon{margin-right:var(--s1,4px)}
[dir=rtl] .race-driver-ready>.icon{margin-right:0;margin-left:var(--s1,4px)}
.race-driver-ready.is-ready{color:#6ff0cd}
.race-confirm-ready{display:flex;align-items:center;justify-content:center;width:100%;min-height:max(48px,var(--ctl-h-lg,52px));border-radius:var(--ctl-r,10px)}
.race-confirm-ready.is-ready{background:#14302a;color:#9ff3dc;box-shadow:inset 0 0 0 1px #2f6b5c}
html[data-tesla="true"] .race-driver-ready{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-confirm-ready{font-size:var(--t-ctl,14px)}

/* racing-gamepad.css */
/* Connection help belongs to the options/lobby flow, never over driving input. */
.race-gamepad-status{min-width:0;padding:11px 12px;border:1px solid #28423f;border-radius:12px;background:#0b1719;color:#dcefeb}
.race-gamepad-heading{display:flex;align-items:center;min-width:0;color:#a9c0c0}
.race-gamepad-status[data-playable=true] .race-gamepad-heading{color:#54e8cf}
.race-gamepad-heading>.icon{flex:0 0 auto}
.race-gamepad-heading>div{min-width:0}
.race-gamepad-heading h3{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere;margin:0}
.race-gamepad-heading small{display:block;font-size:11px;line-height:1.45;color:#a9c0c0;overflow-wrap:anywhere}
.race-gamepad-status p{margin:7px 0 0;font-size:12px;line-height:1.5;color:#a9c0c0}
.race-gamepad-status .race-gamepad-refresh{margin-top:9px;min-width:48px;min-height:48px;width:100%;justify-content:center}
.race-gamepad-status.is-compact{padding:8px 10px}
.race-gamepad-status.is-compact p{font-size:11px}
@media(max-height:670px) and (min-width:701px){.race-gamepad-status{padding:8px 10px}.race-gamepad-status p{font-size:11px}}

.race-gamepad-heading>div{margin-left:9px}
.race-gamepad-refresh>span{margin-left:7px}
.race-app.race-phone .race-phone-gamepad>.race-gamepad-status{grid-column:1/-1;width:100%;text-align:left}
.race-gamepad-input-check{margin-top:8px;border-top:1px solid #35534f}
.race-gamepad-input-check>summary{display:flex;align-items:center;gap:8px;min-height:48px;font-size:12px;cursor:pointer}
.race-gamepad-input-check dl{display:grid;gap:8px;margin:10px 0}
.race-gamepad-input-check dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,1fr);gap:8px;font-size:11px}
.race-gamepad-input-check dd{margin:0;text-align:end}.race-gamepad-input-check meter{display:block;width:100%;height:8px}
.race-gamepad-test-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.race-gamepad-test-buttons>span{display:flex;align-items:center;gap:5px;padding:7px;border:1px solid #35534f;border-radius:8px;font-size:var(--t-micro,10px);overflow-wrap:anywhere}
.race-gamepad-test-buttons>span[data-active=true]{color:#a9ffdd;border-color:#54e8cf;background:#193b32}
.race-gamepad-test-buttons b{margin-left:auto}.race-gamepad-test-buttons .icon{flex-shrink:0}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .race-gamepad-test-buttons b{margin-left:0;margin-right:auto}

/* racing-garage.css */
/* Design-system tokens are declared on .race-display in racing.css; the literal
   fallbacks keep the garage legible if a page loads before they land. Grid,
   never flex `gap`: flex gap renders as zero spacing on the car's Chrome 79. */
.race-garage-editor section,.race-garage-editor fieldset{min-width:0}
.race-garage-card{padding:var(--card-pad,12px);border:1px solid var(--card-line,#35524f);border-radius:var(--card-r,12px);background:var(--card-bg,#142724);box-shadow:none}
.race-garage-car-title{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s3,8px);color:#b2ecdf}
.race-garage-car-title>div{min-width:0}
.race-garage-car-title strong{display:block;color:#effbf8;font-size:var(--t-title,15px);font-weight:var(--w-med,600);line-height:1.25}
.race-garage-car-title small{display:block;color:#a8c5bd;font-size:var(--t-small,11px);line-height:1.4;margin-top:var(--s1,4px)}
.race-showcase-views{display:grid;grid-template-columns:repeat(4,minmax(48px,1fr));gap:var(--s2,6px);margin-top:var(--s4,12px)}
.race-showcase-views button{min-width:48px;min-height:var(--ctl-h,50px);padding:0 var(--s2,6px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);border-radius:var(--ctl-r,10px);display:flex;align-items:center;justify-content:center;background:var(--ctl-bg,#1b3032);color:#d7eee7;border-color:var(--ctl-line,#405c58)}
.race-showcase-views button>.icon{margin-right:var(--s1,4px);flex-shrink:0}
[dir=rtl] .race-showcase-views button>.icon{margin-right:0;margin-left:var(--s1,4px)}
.race-showcase-views button[aria-pressed=true]{border-color:var(--sel-line,#69d6b9);background:var(--sel-bg,#2a4b41);color:#d3ffe9}
.race-garage-editor .race-inspect-car,.race-garage-editor .race-engine-preview,.race-garage-editor .race-restore-appearance{width:100%;min-height:var(--ctl-h-lg,52px);justify-content:center;font-size:var(--t-ctl,13px);margin-top:var(--s3,8px)}
.race-garage-audio{padding:var(--card-pad,12px);border:1px solid var(--card-line,#354650);border-radius:var(--card-r,12px);background:var(--card-bg,#101d25);box-shadow:none}
/* The sound label sits beside its select, as the pinned Car select does: it
   puts the second choice of the garage on the first screen instead of below it. */
.race-garage-audio>label{grid-template-columns:minmax(0,auto) minmax(140px,1fr);align-items:center}
/* The status line only ever repeated the preview button's own label. */
.race-garage-audio>p{display:none}
/* The horn keys are printed on the controller card and the nitro rule is in
   the race HUD: two paragraphs of the car section say it a second time. */
.race-garage-editor[data-race-garage-section=car]>p.race-muted{display:none}
.race-home .race-upgrade-parts{padding:var(--card-pad,12px);margin:0;border:1px solid var(--card-line,#3b4d57);border-radius:var(--card-r,12px);display:grid;gap:var(--s4,12px)}
.race-upgrade-parts legend{font-size:var(--t-title,15px);font-weight:var(--w-med,600);color:#d2eade;padding:0 var(--s1,4px)}
.race-upgrade-parts legend>.icon{vertical-align:middle;margin-right:var(--s2,6px)}
/* The first repeats the identical line RaceCosmetics prints above it; the
   second explains paint layouts the Paint layout select already names. */
.race-upgrade-parts>p{display:none}
.race-paint-heading{display:flex;align-items:center;justify-content:space-between;font-size:var(--t-title,15px);font-weight:var(--w-med,600);color:#d5e5e8}
.race-paint-heading output{font-size:var(--t-small,11px);font-weight:var(--w-body,400);color:#a7c1c5}
.race-paint-options{display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));gap:var(--s3,8px)}
.race-paint-options button{min-height:48px;min-width:48px;position:relative;padding:var(--s2,6px);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#192a32);border-color:var(--ctl-line,#46605c);overflow:hidden}
.race-paint-options button[aria-pressed=true]{border-color:var(--sel-line,#84edce);background:var(--sel-bg,#254237)}
.race-paint-swatch{display:block;height:32px;border-radius:var(--s1,4px);background:var(--race-paint)}
.race-paint-symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;background:#12202bd9;border-radius:50%;width:24px;height:24px;display:grid;place-items:center}.race-paint-symbol:empty{display:none}
.race-custom-paint{grid-template-columns:1fr 60px;align-items:center}
.race-custom-paint input{height:var(--ctl-h,50px);min-width:48px;padding:var(--s1,4px);border-radius:var(--ctl-r,10px)}
.race-home .race-showcase-tools{position:absolute;z-index:3;left:24px;bottom:183px;max-width:calc(100% - 48px);width:300px;padding:var(--card-pad,12px);border:1px solid var(--card-line,#466b63);border-radius:var(--card-r,12px);background:#11221fed;box-shadow:var(--float-shadow,0 8px 24px #04131866)}
.race-showcase-tools>strong{display:block;font-size:var(--t-title,15px);font-weight:var(--w-med,600);color:#ecfaf5}
.race-showcase-tools>.race-showcase-views{margin-top:var(--s3,8px)}
.race-home.is-showroom .race-home-challenge,.race-home.is-showroom .race-home-readout{display:none}
.race-home.is-showroom .race-home-route{max-width:calc(100% - 440px)}
.race-home.is-showroom .race-home-route>div>p{font-size:var(--t-small,11px)}
@media(max-width:700px){.race-home.is-showroom .race-home-route{max-width:calc(100% - 32px)}.race-home .race-showcase-tools{left:16px;right:16px;width:auto;max-width:none;bottom:179px}}
@media(max-height:650px) and (min-width:701px){.race-home .race-showcase-tools{bottom:181px}}

/* Leave the car visible above the scrollable garage on tall phone screens. */
@media(max-width:700px) and (min-height:780px){.race-home.is-showroom .race-stage-menu{top:44%}}

.race-paint-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3,8px)}
.race-paint-presets button{display:flex;align-items:center;min-height:var(--ctl-h-tile,56px);min-width:48px;padding:var(--s3,8px) var(--s4,12px);text-align:left;border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#192a32);border-color:var(--ctl-line,#46605c);font-size:var(--t-ctl,13px)}
.race-paint-presets button[aria-pressed=true]{border-color:var(--sel-line,#84edce);background:var(--sel-bg,#254237)}
.race-paint-presets .race-dual-swatch{width:28px;height:36px;flex-shrink:0;margin-right:var(--s3,8px);border-radius:var(--s2,6px);border:1px solid #b9cbc55c}
[dir=rtl] .race-paint-presets .race-dual-swatch{margin-right:0;margin-left:var(--s3,8px)}
.race-paint-presets button>span:nth-child(2){min-width:0;line-height:1.3;overflow-wrap:break-word}
/* The scheme and its price are already in the select above and the lock icon. */
.race-paint-presets small{display:none}
.race-paint-presets button>.icon{flex-shrink:0;margin-left:var(--s1,4px)}
.race-garage-editor .race-swap-paint{min-height:var(--ctl-h-lg,52px);font-size:var(--t-ctl,13px);justify-content:center}

/* Buying coins from the wallet. The phone already connected as the controller
   is a better place to enter card details than a screen built for maps, so the
   handoff leads and the on-screen shop links stay as the fallback. */
.race-wallet-handoff{display:grid;gap:var(--s3,8px);margin:0 0 var(--s5,16px);padding:var(--card-pad,12px);border:1px solid var(--race-lime,#54e8cf);border-radius:var(--card-r,12px);background:var(--card-bg,#12282b)}
.race-wallet-handoff button{justify-self:start}
.race-wallet-handoff p{margin:0;color:var(--race-muted,#9fb0b6);font-size:var(--t-body,12px);line-height:1.45}

.race-garage-sync{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3,8px);align-items:center;margin-bottom:var(--s4,12px);padding:var(--row-pad,8px 12px);border:1px solid var(--card-line,#34414c);border-radius:var(--card-r,12px);background:var(--card-bg,#101c25);font-size:var(--t-body,12px)}
.race-garage-sync>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2,6px);align-items:center;color:#b3c8d4}
.race-garage-sync>button{grid-column:2}
.race-garage-sync>p{grid-column:1/-1;margin:0;font-size:var(--t-body,12px);line-height:1.4}
.race-garage-sync button,.race-basic-recovery button{min-width:48px;min-height:var(--ctl-h,50px);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,auto);align-items:center;justify-content:center;gap:var(--s2,6px)}
.race-basic-recovery{padding:var(--card-pad,12px);border:1px solid var(--card-line,#397866);background:var(--card-bg,#152a27);border-radius:var(--card-r,12px);display:grid;gap:var(--s3,8px)}
.race-basic-recovery p{font-size:var(--t-body,12px);line-height:1.4}

/* racing-social.css */
/* Rooms, chat and friends. Chrome 79 is the car: grid gap only, physical
   offsets rather than inset, and system tokens with literal fallbacks. */
.race-social-heading{display:flex;align-items:center;justify-content:space-between}
.race-social-heading h3{display:flex;align-items:center;margin:0;font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-social-heading h3>.icon{margin-right:var(--s2,6px)}
.race-social-heading button{display:flex;align-items:center;justify-content:center;min-height:var(--ctl-h-min,48px);min-width:48px;padding:0 var(--s4,12px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-social-heading button>.icon{margin-right:var(--s2,6px)}
.race-public-rooms,.race-room-chat{padding:var(--card-pad,12px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#101e24);color:#e0eee9;min-width:0}
.race-public-rooms>p{margin:var(--s2,6px) 0;font-size:var(--t-small,11px);line-height:1.4}
.race-public-rooms ul{list-style:none;padding:0;margin:0}
.race-public-rooms li{display:flex;align-items:center;justify-content:space-between;padding:var(--s1,4px) 0;border-top:1px solid var(--card-line,#2a3d45)}
.race-public-rooms li>div{min-width:0;margin-right:var(--s3,8px)}
.race-public-rooms li strong,.race-public-rooms li span,.race-public-rooms li small{display:block;font-size:var(--t-body,12px);line-height:1.4;overflow-wrap:break-word}
.race-public-rooms li strong{font-weight:var(--w-med,600)}
.race-public-rooms li small{font-size:var(--t-small,11px);color:#a3bdb5}
.race-public-rooms li button{min-width:65px;min-height:var(--ctl-h,50px);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-public-rooms li button>.icon{margin-right:var(--s1,4px)}
.race-chat-messages{max-height:136px;overflow-y:auto;overscroll-behavior:contain;padding:var(--s2,6px) 0}
.race-chat-messages p{display:block;margin:var(--s1,4px) 0;padding:var(--s2,6px) var(--s3,8px);background:var(--ctl-bg,#18272e);border-radius:var(--ctl-r,10px)}
.race-chat-messages strong{display:block;font-size:var(--t-small,11px);font-weight:var(--w-med,600);color:#8ce1c6}
.race-chat-messages span{display:block;font-size:var(--t-body,12px);color:#e6f7f0;line-height:1.4}
.race-chat-templates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2,6px)}
.race-chat-templates button{min-width:48px;min-height:var(--ctl-h,50px);padding:var(--s3,8px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.25}
.race-chat-hint{font-size:var(--t-small,11px)!important;line-height:1.4;margin:var(--s3,8px) 0 0!important;color:#aec8bd!important}
.race-kick-player{min-width:48px;min-height:var(--ctl-h-min,48px);padding:0 var(--s3,8px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);justify-self:end;grid-column:2;grid-row:1 / span 2}
.race-roster li.has-moderation{display:grid;column-gap:var(--s3,8px);align-items:center;grid-template-columns:minmax(0,1fr) auto}
.race-roster li.has-moderation>.race-driver-detail{grid-column:1}

/* Friends is a paged overlay, not another scrolling column in the cockpit. */
.race-app .race-friends-trigger{position:relative;min-width:48px;min-height:var(--ctl-h-min,48px);display:flex;align-items:center;justify-content:center;background:var(--ctl-bg,#14242b);color:#c9eee6;border-color:var(--ctl-line,#35534f);padding:0 var(--s4,12px)}
.race-friends-trigger>span{margin-left:var(--s2,6px)}
.race-friends-trigger>b{position:absolute;right:1px;top:1px;min-width:16px;line-height:16px;font-size:var(--t-micro,10px);font-weight:var(--w-med,600);text-align:center;background:var(--sel-line,#54e8cf);color:#081614;border-radius:8px}
.race-friends-backdrop{position:fixed;z-index:40;top:0;right:0;bottom:0;left:0;background:var(--scrim,rgba(4,9,11,.8));display:flex;align-items:center;justify-content:center;padding:var(--s5,16px)}
.race-app .race-friends-panel{width:540px;max-width:100%;max-height:calc(100vh - 32px);display:flex;flex-direction:column;background:var(--card-bg,#0d1a20);color:#e8f6f2;border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);box-shadow:var(--dialog-shadow,0 12px 32px rgba(4,9,11,.6));overflow:hidden}
.race-friends-panel button{min-width:48px;min-height:var(--ctl-h-min,48px);background:var(--ctl-bg,#193039);color:#d9eee9;border:1px solid var(--ctl-line,#3c5c5c);border-radius:var(--ctl-r,10px);padding:0 var(--s4,12px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);display:inline-flex;align-items:center;justify-content:center}
.race-friends-heading{display:flex;align-items:center;justify-content:space-between;padding:var(--s3,8px) var(--s4,12px);border-bottom:1px solid var(--card-line,#2a3d45);flex-shrink:0}
.race-friends-heading>div{display:flex;align-items:center;min-width:0}
.race-friends-heading>div>.icon{margin-right:var(--s3,8px);color:var(--sel-line,#54e8cf)}
.race-app .race-friends-heading h2{font-size:var(--t-head,20px);font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em)}
.race-friends-heading>button{padding:0}
.race-friends-status{min-height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4,12px);color:#a6c5c7;font-size:var(--t-small,11px);flex-shrink:0}
.race-friends-status i{display:inline-block;width:7px;height:7px;background:#9caeb4;border-radius:50%;margin-right:var(--s2,6px)}
.race-friends-status i[data-online=true]{background:var(--sel-line,#54e8cf)}
.race-friends-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,6px);padding:var(--s2,6px) var(--s4,12px);flex-shrink:0}
.race-friends-tabs button[aria-pressed=true]{background:var(--sel-bg,#254841);border-color:var(--sel-line,#54e8cf);color:var(--sel-ink,#e8fff8)}
.race-friends-tabs small{margin-left:var(--s2,6px);font-size:var(--t-small,11px);color:#b3cfd0}
.race-friends-body{padding:var(--s2,6px) var(--s4,12px);overflow-y:auto;overscroll-behavior:contain;min-height:0}
.race-add-friend>label{font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase;margin:0 0 var(--s1,4px)}
.race-add-friend>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3,8px)}
.race-friends-panel .race-add-friend input{background:var(--ctl-bg,#142830);color:#ecf8f5;border-color:var(--ctl-line,#4b666c);border-radius:var(--ctl-r,10px);min-height:var(--ctl-h,50px);font-size:var(--t-ctl,13px)}
.race-add-friend button>.icon{margin-right:var(--s2,6px)}
.race-app .race-friends-guide{font-size:var(--t-small,11px);color:#adc7c9;line-height:1.4;margin:var(--s3,8px) 0}
.race-app .race-friends-empty{color:#bad5d6;padding:var(--s5,16px) var(--s3,8px);font-size:var(--t-body,12px);text-align:center}
.race-friends-panel .race-friends-park{min-height:var(--ctl-h-min,48px);font-size:var(--t-ctl,13px);margin:0}
.race-friends-list{list-style:none;margin:0;padding:0}
.race-friends-list>li{display:flex;align-items:center;justify-content:space-between;padding:var(--s1,4px) 0;border-top:1px solid var(--card-line,#2a3d45)}
.race-friend-driver{min-width:0;display:flex;align-items:center;margin-right:var(--s3,8px);flex:1}
.race-friend-driver>svg{flex-shrink:0;margin-right:var(--s3,8px)}
.race-friend-driver>div{min-width:0}
.race-friend-driver strong{display:block;color:#e2f4ef;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-friend-driver span{display:block;color:#9ebabf;font-size:var(--t-small,11px);line-height:1.35;overflow-wrap:break-word}
.race-friend-actions{display:flex;align-items:center;flex-shrink:0}
.race-friend-actions>*+*{margin-left:var(--s2,6px)}
[dir=rtl] .race-friend-actions>*+*{margin-left:0;margin-right:var(--s2,6px)}
.race-friend-actions>small{font-size:var(--t-small,11px);color:#a7c3c6;max-width:40px}
.race-friend-actions button>.icon{flex-shrink:0}
.race-friend-actions .race-friend-join>.icon{margin-right:var(--s1,4px)}
.race-friends-panel .race-friend-join{background:var(--sel-bg,#25483f);border-color:var(--sel-line,#54e8cf)}
.race-friends-footer{padding:var(--s2,6px) var(--s4,12px);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--card-line,#2a3d45);flex-shrink:0}
.race-app .race-friends-footer>p{font-size:var(--t-small,11px);line-height:1.4;color:#bdd5d5;max-width:320px;margin-right:var(--s4,12px)}
.race-friends-pages{display:flex;align-items:center;flex-shrink:0}
.race-friends-pages>span{font-size:var(--t-small,11px);min-width:48px;text-align:center}
@media(max-width:1100px){.race-friends-trigger>span{display:none}.race-app .race-friends-trigger{width:48px;padding:0;flex-shrink:0}}
@media(max-width:540px){.race-friends-backdrop{padding:var(--s3,8px)}.race-app .race-friends-panel{max-height:calc(100vh - 16px)}.race-friends-heading{padding:var(--s2,6px) var(--s3,8px)}.race-friends-body{padding:var(--s2,6px) var(--s3,8px)}.race-friend-driver>svg{display:none}.race-friend-actions>*+*{margin-left:var(--s1,4px)}[dir=rtl] .race-friend-actions>*+*{margin-left:0;margin-right:var(--s1,4px)}.race-friend-actions button{padding:0 var(--s3,8px)}.race-friends-footer{padding:var(--s2,6px) var(--s3,8px)}.race-friends-tabs{padding:var(--s2,6px) var(--s3,8px)}.race-friend-actions>small{max-width:32px}.race-friend-actions .race-friend-join>.icon{display:none}.race-add-friend button>.icon{display:none}}
@media(max-height:600px){.race-friends-heading{padding-top:var(--s1,4px);padding-bottom:var(--s1,4px)}.race-friends-tabs{padding-top:var(--s1,4px);padding-bottom:var(--s1,4px)}.race-app .race-friends-guide{margin:var(--s1,4px) 0}.race-friends-footer{padding-top:var(--s1,4px);padding-bottom:var(--s1,4px)}}

/* A racer's card: opened from any name, closed by tap outside or Escape. */
.race-player-card-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:var(--s5,16px);background:var(--scrim,rgba(4,9,11,.8))}
.race-player-card{width:min(440px,100%);padding:var(--s5,16px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#0f1a1d);color:#e6f7f3;box-shadow:var(--dialog-shadow,0 12px 32px rgba(4,9,11,.6))}
.race-player-card header{display:flex;align-items:center;margin-bottom:var(--s4,12px)}
.race-player-card header>*+*{margin-left:var(--s4,12px)}
[dir=rtl] .race-player-card header>*+*{margin-left:0;margin-right:var(--s4,12px)}
.race-player-card header>div{flex:1;min-width:0;display:flex;flex-direction:column}
.race-player-card header strong{font-size:var(--t-head,20px);font-weight:var(--w-med,600);line-height:1.1;letter-spacing:var(--ls-tight,-.02em)}
.race-player-card header small{font-size:var(--t-small,11px);color:#9fd2c8;margin-top:var(--s1,4px)}
.race-player-card header button{width:48px;height:48px;min-height:var(--ctl-h-min,48px);padding:0;border-radius:var(--ctl-r,10px);border:1px solid var(--ctl-line,#35505a);background:var(--ctl-bg,#132226);color:#d6f3ee}
.race-player-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2,6px)}
.race-player-stats li{display:flex;flex-direction:column;padding:var(--row-pad,8px 12px);border-radius:var(--ctl-r,10px);background:var(--card-bg-raise,#122024);border:1px solid var(--card-line,#2a3d45)}
.race-player-stats small{font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);color:#8fc9bf}
.race-player-stats strong{font-size:var(--n-sm,20px);font-weight:var(--w-body,400);line-height:1.1;letter-spacing:var(--ls-tight,-.02em);font-variant-numeric:tabular-nums;margin:var(--s1,4px) 0}
.race-player-stats span{font-size:var(--t-small,11px);color:#b6d9d2}
.race-player-card-actions{display:flex;align-items:center;margin-top:var(--s4,12px)}
.race-player-card-actions>*+*{margin-left:var(--s3,8px)}
[dir=rtl] .race-player-card-actions>*+*{margin-left:0;margin-right:var(--s3,8px)}
.race-player-card-actions button{min-height:var(--ctl-h-lg,52px);padding:0 var(--s5,16px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-strong,700);display:inline-flex;align-items:center}
.race-player-card-actions button>.icon{margin-right:var(--s2,6px)}
.race-player-card-friend{display:inline-flex;align-items:center;font-size:var(--t-ctl,13px);color:#9fd2c8}
.race-player-card-friend>.icon{margin-right:var(--s2,6px)}
/* A name that opens a racer card is a button, so it would otherwise arrive
   wearing the app's default white control chrome. It reads as the name it is,
   and keeps the 48px target. */
.race-board-name.is-link,.race-driver-name.is-link{min-height:var(--ctl-h-min,48px);padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer;text-decoration:underline dotted #5a8f88;text-underline-offset:3px}
/* Inside the race screen every button is handed the play controls' chrome
   (racing.css: `.race-display .race-play button:not(.race-primary)`), which
   outranked the rule above and drew a bordered box around exactly those names
   that open a racer card while every other name stayed plain text. Matching
   that rule's weight puts the name back to being a name. */
.race-display .race-play button.race-board-name.is-link,.race-display .race-play button.race-driver-name.is-link{background:transparent;border-color:transparent;color:inherit}

/* Right-to-left: the icon-before-label margins above are physical, so mirror
   them rather than leaving a label glued to its icon. */
[dir=rtl] .race-social-heading h3>.icon,[dir=rtl] .race-social-heading button>.icon,[dir=rtl] .race-add-friend button>.icon,[dir=rtl] .race-friends-status i,[dir=rtl] .race-player-card-actions button>.icon,[dir=rtl] .race-player-card-friend>.icon{margin-right:0;margin-left:var(--s2,6px)}
[dir=rtl] .race-public-rooms li button>.icon,[dir=rtl] .race-friend-actions .race-friend-join>.icon{margin-right:0;margin-left:var(--s1,4px)}
[dir=rtl] .race-friends-heading>div>.icon,[dir=rtl] .race-friend-driver>svg,[dir=rtl] .race-public-rooms li>div,[dir=rtl] .race-friend-driver{margin-right:0;margin-left:var(--s3,8px)}
[dir=rtl] .race-app .race-friends-footer>p{margin-right:0;margin-left:var(--s4,12px)}
[dir=rtl] .race-friends-trigger>span,[dir=rtl] .race-friends-tabs small{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-friends-trigger>b{right:auto;left:1px}

/* Friends arriving. Sits under the toolbar on the right, above the garage
   content and below every dialog; never shown during a race. Each row is a
   single 48 px touch target plus a dismiss, so it stays reachable in the car. */
.race-friend-arrivals{position:absolute;top:calc(var(--s10,64px) + var(--s3));right:var(--s3);z-index:15;display:flex;flex-direction:column;gap:var(--s2);max-width:min(340px,70vw);pointer-events:none}
.race-friend-arrival{display:flex;gap:var(--s2);align-items:center;min-height:48px;padding:var(--s2) var(--s2) var(--s2) var(--s3);border:1px solid #ffffff26;border-radius:var(--r3,14px);background:#0d1216f2;box-shadow:0 8px 24px #00000059;pointer-events:auto;animation:race-friend-arrival .3s ease-out}
.race-friend-arrival[data-joinable="true"]{border-color:#a3e63566}
.race-friend-arrival-icon{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;background:#ffffff14;color:#cfe3ea}
.race-friend-arrival>div{flex:1 1 auto;min-width:0}
.race-friend-arrival strong{display:block;overflow:hidden;color:#f5f7f8;font-size:var(--t-body);font-weight:var(--w-bold);text-overflow:ellipsis;white-space:nowrap}
.race-friend-arrival span{display:block;color:#93a4ac;font-size:var(--t-small)}
.race-friend-arrival button{display:flex;gap:4px;flex:0 0 auto;justify-content:center;align-items:center;min-width:48px;min-height:40px;padding:0 var(--s2);border:1px solid #ffffff2e;border-radius:999px;background:#ffffff0f;color:#eaf6f2;font-size:var(--t-small);font-weight:var(--w-med);cursor:pointer}
.race-friend-arrival[data-joinable="true"] button:first-of-type{border-color:#a3e63588;color:#eaffd0}
.race-friend-arrival .race-friend-arrival-close{min-width:40px;border-color:transparent;background:none;color:#8a9aa2}
@keyframes race-friend-arrival{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.race-friend-arrival{animation:none}}

/* Watching a friend. The banner sits on the racer's screen below every control
   and takes no pointer events; the panel is an ordinary dialog. Sized for the
   880×670 car viewport first: the phrase buttons wrap and stay 44 px tall. */
.race-display .race-play .race-reactions{position:absolute;top:22%;left:50%;z-index:2;display:flex;flex-direction:column;gap:var(--s1);align-items:center;pointer-events:none;transform:translateX(-50%)}
.race-reaction-watching{display:inline-flex;gap:6px;align-items:center;padding:3px var(--s3);border-radius:999px;background:#0d1216cc;color:#9fb3bb;font-size:var(--t-small)}
.race-reaction-watching b{display:inline-flex;gap:4px;margin-left:4px}
.race-reaction-watching i{padding:0 5px;border-radius:999px;font-style:normal;font-variant-numeric:tabular-nums}
.race-reaction-watching i[data-kind="cheer"]{background:#2b4a1e;color:#cdf0a6}
.race-reaction-watching i[data-kind="boo"]{background:#4a2f1e;color:#f6d0a6}
.race-reaction-banner{display:inline-flex;gap:var(--s2);align-items:center;max-width:min(420px,72vw);padding:var(--s2) var(--s4);border:1px solid #ffffff33;border-radius:999px;background:#0d1216e8;color:#f5f7f8;white-space:nowrap;animation:race-reaction-in 3.5s ease-out forwards}
.race-reaction-banner strong{color:#9fd3e6;font-weight:var(--w-bold)}
.race-reaction-banner span{overflow:hidden;text-overflow:ellipsis}
.race-reaction-banner[data-kind="cheer"]{border-color:#a3e63588;color:#eaffd0}
.race-reaction-banner[data-kind="boo"]{border-color:#f2b56988;color:#ffe9cc}
.race-reaction-banner[data-kind="note"]{border-color:#72c8f288;color:#dcf1ff}
@keyframes race-reaction-in{0%{opacity:0;transform:translateY(8px) scale(.94)}8%{opacity:1;transform:translateY(0) scale(1.02)}16%{transform:translateY(0) scale(1)}86%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.race-reaction-banner{animation:race-reaction-hold 3.5s linear forwards}}
@keyframes race-reaction-hold{0%,92%{opacity:1}100%{opacity:0}}

.race-spectate{display:flex;flex-direction:column;gap:var(--s3);max-width:min(560px,94vw);max-height:90vh;overflow:auto}
.race-spectate>header{display:flex;gap:var(--s3);justify-content:space-between;align-items:center}
.race-spectate-title{display:flex;gap:var(--s2);align-items:center;min-width:0}
.race-spectate-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-spectate-title span{color:#8fa3ab;font-size:var(--t-small)}
.race-spectate>header button{display:flex;flex:0 0 auto;justify-content:center;align-items:center;width:48px;height:48px;border:1px solid #ffffff26;border-radius:50%;background:none;color:#cfe3ea;cursor:pointer}
.race-spectate-notice{margin:0;color:#f2d69a;font-size:var(--t-small)}
.race-spectate-readouts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.race-spectate-readouts span{display:flex;flex-direction:column;gap:2px;padding:var(--s2);border:1px solid #ffffff1a;border-radius:var(--r2,10px);background:#ffffff0a;text-align:center}
.race-spectate-readouts small{color:#8fa3ab;font-size:var(--t-micro);letter-spacing:.06em}
.race-spectate-readouts b{color:#f5f7f8;font-size:var(--t-title);font-variant-numeric:tabular-nums}
.race-spectate-standings{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.race-spectate-standings li{display:flex;gap:var(--s2);align-items:center;padding:6px var(--s2);border-radius:var(--r2,10px);font-size:var(--t-small)}
.race-spectate-standings li.is-watched{background:#ffffff12}
.race-spectate-standings li>span{width:22px;color:#8fa3ab;font-variant-numeric:tabular-nums}
.race-spectate-standings li>strong{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-spectate-standings li>b{color:#9fb3bb;font-variant-numeric:tabular-nums}
.race-reaction-bar{display:flex;flex-direction:column;gap:var(--s2)}
.race-reaction-group{display:flex;flex-wrap:wrap;gap:var(--s2)}
.race-reaction-group button{display:inline-flex;gap:6px;align-items:center;min-height:44px;padding:0 var(--s3);border:1px solid #ffffff26;border-radius:999px;background:#ffffff0d;color:#e8f2f5;font-size:var(--t-small);cursor:pointer}
.race-reaction-group button:disabled{opacity:.45;cursor:default}
.race-reaction-group[data-kind="cheer"] button{border-color:#a3e63566;color:#eaffd0}
.race-reaction-group[data-kind="boo"] button{border-color:#f2b56966;color:#ffe9cc}
.race-reaction-group[data-kind="note"] button{border-color:#72c8f266;color:#dcf1ff}
.race-reaction-bar p{margin:0;color:#8fa3ab;font-size:var(--t-micro)}
.race-spectate-footer p{margin:0;color:#8fa3ab;font-size:var(--t-micro)}
.race-friend-watch{display:inline-flex;gap:4px;align-items:center}
@media (max-height:700px){.race-spectate-readouts b{font-size:var(--t-ctl)}.race-reaction-group button{min-height:40px}}

/* racing-share.css */
/* Sharing a win. Sits inside the results card, so it borrows the results
   surface rather than inventing one: card radii, hairlines and the mint that
   already means "this is yours". Chrome 79 is the car — grid gap only, and a
   literal fallback before every token. */
.race-share{display:grid;gap:8px;gap:var(--s3,8px);margin:12px 0 0;margin:var(--s4,12px) 0 0;padding:12px;padding:var(--card-pad,12px);border:1px solid #2b3f48;border:1px solid var(--ctl-line,#2b3f48);border-radius:12px;border-radius:var(--card-r,12px);background:#101b21}
.race-share-card{display:grid;gap:8px;gap:var(--s3,8px)}
.race-share-head{display:grid;gap:2px}
.race-share-head strong{font-size:15px;font-size:var(--t-title,15px);font-weight:600;font-weight:var(--w-med,600);letter-spacing:-.02em;letter-spacing:var(--ls-tight,-.02em)}
.race-share-head small{font-size:11px;font-size:var(--t-small,11px);color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
.race-share-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;gap:var(--s2,6px);margin:0}
@media (min-width:640px){.race-share-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.race-share-stats>div{display:grid;gap:1px;padding:8px 10px;border:1px solid #20282e;border:1px solid var(--race-line,#20282e);border-radius:10px;border-radius:var(--ctl-r,10px);background:#14242c;background:var(--ctl-bg,#14242c)}
.race-share-stats dt{font-size:10px;font-size:var(--t-micro,10px);font-weight:600;font-weight:var(--w-med,600);letter-spacing:.06em;letter-spacing:var(--ls-caps,.06em);text-transform:uppercase;color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
.race-share-stats dd{margin:0;font-size:20px;font-size:var(--n-sm,20px);font-weight:700;font-weight:var(--w-strong,700);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.race-share-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;gap:var(--s3,8px)}
@media (min-width:520px){.race-share-actions{grid-template-columns:minmax(0,1fr) auto}}
.race-share-actions button{min-height:48px;min-height:var(--ctl-h-min,48px)}
.race-share-earned{display:flex;align-items:center;margin:0;min-height:48px;min-height:var(--ctl-h-min,48px);font-size:13px;font-size:var(--t-ctl,13px);font-weight:600;font-weight:var(--w-med,600);color:#54e8cf;color:var(--race-lime,#54e8cf)}
.race-share-earned>.icon{margin-right:6px;margin-right:var(--s2,6px)}
.race-share-handoff{display:grid;gap:8px;gap:var(--s3,8px);justify-items:center;padding:12px;padding:var(--card-pad,12px);border:1px solid #20282e;border:1px solid var(--race-line,#20282e);border-radius:10px;border-radius:var(--ctl-r,10px)}
.race-share-handoff .race-qr{width:132px;height:132px;padding:8px;border-radius:10px;background:#f5f8f9}
.race-share-handoff .race-qr svg{display:block;width:100%;height:100%}
.race-share-handoff p{margin:0;font-size:11px;font-size:var(--t-small,11px);line-height:1.45;text-align:center;color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
.race-share-notice{margin:0;font-size:11px;font-size:var(--t-small,11px);color:#54e8cf;color:var(--race-lime,#54e8cf)}
.race-share-note{margin:0;font-size:10px;font-size:var(--t-micro,10px);line-height:1.45;color:#9fb0b6;color:var(--race-muted,#9fb0b6)}

/* racing-journey.css */
/* The tour as a road. One horizontal scroller — the page never scrolls
   sideways, this does — with the connecting line drawn behind the nodes.
   Chrome 79 is the car: grid gap only on the row, physical offsets, and a
   literal fallback before every token. */
.race-journey-map{display:grid;gap:8px;gap:var(--s3,8px);padding:12px;padding:var(--card-pad,12px);border:1px solid #2b3f48;border:1px solid var(--ctl-line,#2b3f48);border-radius:12px;border-radius:var(--card-r,12px);background:#101b21;--journey-ink:#54e8cf;--journey-ink:var(--race-lime,#54e8cf)}
.race-journey-map.theme-circuit{--journey-ink:#7cc7ff}
.race-journey-map.theme-league{--journey-ink:#ffb15c}
.race-journey-head{display:flex;align-items:center}
.race-journey-head>.icon{margin-right:8px;margin-right:var(--s3,8px);color:#54e8cf;color:var(--journey-ink,#54e8cf)}
.race-journey-head strong{flex:1 1 auto;font-size:15px;font-size:var(--t-title,15px);font-weight:600;font-weight:var(--w-med,600)}
.race-journey-count{font-size:12px;font-size:var(--t-body,12px);color:#9fb0b6;color:var(--race-muted,#9fb0b6);font-variant-numeric:tabular-nums}
/* The road itself. The line sits behind the nodes and stops at the last one. */
.race-journey-road{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:126px;gap:10px;gap:var(--s3,8px);margin:0;padding:6px 2px 10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;list-style:none;scroll-snap-type:x proximity}
.race-journey-road::before{content:"";position:absolute;left:0;right:0;top:34px;height:2px;background:#2b3f48;background:var(--ctl-line,#2b3f48)}
.race-journey-stop{position:relative;scroll-snap-align:center}
.race-journey-node{display:grid;justify-items:center;gap:3px;width:100%;padding:0 6px 8px;border:0;background:none;color:#f5f8f9;color:var(--race-ink,#f5f8f9);font:inherit;text-align:center}
.race-journey-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:4px;border-radius:50%;border:2px solid #2b3f48;border:2px solid var(--ctl-line,#2b3f48);background:#14242c;background:var(--ctl-bg,#14242c);color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
.race-journey-name{font-size:12px;font-size:var(--t-body,12px);font-weight:600;font-weight:var(--w-med,600);line-height:1.25}
.race-journey-detail,.race-journey-blocker{font-size:10px;font-size:var(--t-micro,10px);line-height:1.3;color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
.race-journey-tally{font-size:10px;font-size:var(--t-micro,10px);color:#9fb0b6;color:var(--race-muted,#9fb0b6);font-variant-numeric:tabular-nums}
/* Behind you: filled. Under you: ringed, and the only stop that is scaled up.
   Ahead: outlined. Shut: dimmed, and carrying the way in. */
.race-journey-stop.is-done .race-journey-mark{border-color:#54e8cf;border-color:var(--journey-ink,#54e8cf);background:#1c3a38;background:var(--sel-bg,#1c3a38);color:#54e8cf;color:var(--journey-ink,#54e8cf)}
.race-journey-stop.is-current .race-journey-mark{width:52px;height:52px;margin-bottom:0;border-color:#54e8cf;border-color:var(--journey-ink,#54e8cf);background:#0d1216;color:#54e8cf;color:var(--journey-ink,#54e8cf);box-shadow:0 0 0 4px #54e8cf22}
.race-journey-stop.is-current .race-journey-name{color:#f5f8f9;color:var(--race-ink,#f5f8f9)}
.race-journey-stop.is-locked{opacity:.62}
.race-journey-stop.is-locked .race-journey-blocker{color:#ffb15c}
.race-journey-node:disabled{cursor:default}
.race-journey-node:not(:disabled):hover .race-journey-mark,.race-journey-node:focus-visible .race-journey-mark{border-color:#54e8cf;border-color:var(--journey-ink,#54e8cf)}
.race-journey-note{margin:0;font-size:10px;font-size:var(--t-micro,10px);line-height:1.45;color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
/* A short screen gets a shorter road rather than a scrollbar over the dock. */
@media (max-height:600px){.race-journey-road{grid-auto-columns:112px;padding-bottom:6px}.race-journey-mark{width:38px;height:38px}.race-journey-stop.is-current .race-journey-mark{width:44px;height:44px}.race-journey-road::before{top:30px}}

/* ===== "What now", said once. The dock already carries the controls; this is
   the one line above them that names whatever is actually in the way, and it
   says nothing at all when nothing is. ===== */
.race-next-hint{display:flex;align-items:baseline;margin:0 0 6px;margin:0 0 var(--s2,6px);padding:0 2px;border:0;background:none;font-size:12px;font-size:var(--t-body,12px);line-height:1.4}
.race-next-hint>.icon{flex:0 0 auto;margin-right:8px;margin-right:var(--s3,8px);color:#54e8cf;color:var(--race-lime,#54e8cf)}
.race-next-hint strong{font-weight:600;font-weight:var(--w-med,600);color:#f5f8f9;color:var(--race-ink,#f5f8f9)}
.race-next-hint span{margin-left:8px;margin-left:var(--s3,8px);color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
/* The tyre advice is the one hint that does something, so it is a button. It
   keeps the row's shape and gains a target big enough to hit on a touchscreen. */
button.race-next-hint{width:100%;text-align:start;font:inherit;cursor:pointer;min-height:44px;min-height:var(--ctl-h-min,44px);align-items:center;padding:0 4px;padding:0 var(--s1,4px);border-radius:8px;border-radius:var(--ctl-r,8px)}
button.race-next-hint:hover,button.race-next-hint:focus-visible{background:#ffffff0f}
button.race-next-hint>.icon:last-child{margin-left:auto;flex:0 0 auto;color:#9fb0b6;color:var(--race-muted,#9fb0b6)}
/* Blocked is amber because it is a stop, not a suggestion. */
.race-next-hint.is-blocked strong{color:#ffb15c}
.race-next-hint.is-blocked>.icon{color:#ffb15c}
[dir="rtl"] .race-next-hint>.icon{margin-right:0;margin-left:var(--s3,8px)}
[dir="rtl"] .race-next-hint span{margin-left:0;margin-right:var(--s3,8px)}

/* ===== Motion, and the switch that turns it off.
   The stop you are standing on is the only thing on the road that moves, and
   it moves slowly — it is a "you are here", not an alarm. Everything else
   transitions only on hover, so the road is still while it is being read. ===== */
.race-journey-node,.race-journey-mark{transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.race-journey-stop.is-current .race-journey-mark{animation:race-journey-here 2.6s ease-in-out infinite}
@keyframes race-journey-here{
 0%,100%{box-shadow:0 0 0 4px rgba(84,232,207,.13)}
 50%{box-shadow:0 0 0 7px rgba(84,232,207,.05)}
}
.race-journey-node:not(:disabled):active .race-journey-mark{transform:scale(.94)}
/* The product's own reduced-motion switch, and the platform's. */
.race-display[data-reduced-motion="true"] .race-journey-stop.is-current .race-journey-mark{animation:none}
.race-display[data-reduced-motion="true"] .race-journey-node,
.race-display[data-reduced-motion="true"] .race-journey-mark{transition:none}
@media (prefers-reduced-motion: reduce){
 .race-journey-stop.is-current .race-journey-mark{animation:none}
 .race-journey-node,.race-journey-mark{transition:none}
 .race-next-hint{transition:none}
}

/* racing-countdown.css */
.race-countdown{position:absolute;z-index:9;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:170px;padding:var(--s4) var(--s7);border:1px solid #6ccab4;border-radius:var(--card-r);background:#0d201fe8;box-shadow:var(--float-shadow);color:#ebfff6;pointer-events:none;text-align:center}
.race-countdown-label{font-size:var(--t-small);line-height:1.4;letter-spacing:var(--ls-caps);text-transform:uppercase;max-width:240px;color:#afddcb}
.race-countdown-number{font-size:var(--n-count);line-height:1;font-weight:var(--w-strong);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}
.race-countdown.is-go{border-color:#a6ff98;background:#193b28eb;color:#b6ff99}

/* racing-items.css */
.race-item-button{display:flex;align-items:center;justify-content:center;min-width:64px;min-height:var(--ctl-h);padding:0 var(--s4);border:1px solid #648277;border-radius:var(--ctl-r);background:#17322d;color:#b9e7d9;font-size:var(--t-ctl);touch-action:manipulation}
.race-item-button>.icon{flex-shrink:0;margin-right:var(--s3)}.race-item-button.is-ready{background:#29452e;border-color:#b7d28a;color:#e4f6c7}
/* Inventory sits left of the standings column; the 156px keeps it clear of the
   board, which owns its own width in racing-multiplayer.css. */
.race-items{display:flex;align-items:center;position:absolute;right:156px;bottom:var(--hud-inset);z-index:2;max-width:245px;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg);box-shadow:var(--float-shadow);color:#d4eddf}
.race-items>div{margin-left:var(--s3);min-width:0}
.race-items strong{display:block;font-size:var(--t-ctl);line-height:1.4}
.race-items span{display:block;font-size:var(--t-small);line-height:1.4}
.race-items>div>span{color:#9db7ac;margin-top:var(--s1)}
.race-item-brief{display:flex;align-items:flex-start;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--card-r);background:var(--card-bg-raise);font-size:var(--t-body);line-height:1.5;color:#b5d3c4;margin:var(--s4) 0}
.race-item-brief>.icon{flex-shrink:0;margin-right:var(--s3);margin-top:var(--s1)}
.race-item-brief strong{display:block;color:#e0f0e5;margin-bottom:var(--s1)}
.race-app.race-phone .has-items .race-joystick-pedals{grid-template-rows:var(--pedal-small) var(--pedal-small)}
.race-app.race-phone .has-items .race-joystick-throttle{grid-column:2;grid-row:1;width:var(--pedal-small);height:var(--pedal-small);font-size:var(--t-title)}
.race-app.race-phone .has-items .race-joystick-throttle>.icon{width:22px;height:22px;margin-bottom:var(--s1)}
.race-app.race-phone .has-items .race-item-button{grid-column:1;grid-row:1;width:var(--pedal-small);height:var(--pedal-small);min-width:48px;min-height:48px;flex-direction:column;padding:var(--s1);border-radius:50%;font-size:var(--t-micro)}
.race-app.race-phone .has-items .race-item-button>.icon{width:20px;height:20px;margin:0 0 var(--s1)}.race-phone-gamepad>.race-item-button{margin:var(--s4) auto 0}
@media(max-width:1100px){.race-items{max-width:112px;flex-direction:column;align-items:stretch;padding:var(--s2)}.race-items>div{margin:var(--s1) 0 0;text-align:center}.race-items>div>span.race-item-key{display:none}.race-items strong{font-size:var(--t-small)}}
@media(max-width:700px){.race-items{right:146px;padding:var(--s2)}.race-item-button{min-width:56px;padding:0 var(--s3)}.race-item-button>.icon{margin-right:var(--s1)}}
@media(max-height:600px){.race-items>div>span.race-item-key{display:none}}
@media(max-height:600px) and (min-width:701px){.race-display .has-touch .race-live-gap{display:none}.race-display .has-touch .race-live-board li>b{grid-row:1}}

/* Inventory lives beside the speedometer. On a shallow vehicle viewport its
   text can grow independently to the left of the standings, never above it. */
.race-display .race-items{min-width:0}
.race-display .race-items>.race-item-button{flex-shrink:0;min-width:64px}
.race-display .race-items>div{overflow-wrap:break-word}
.race-display .race-items .race-item-hint{color:#c3e8d9}
.race-app .race-item-button.is-ready[data-item-kind="pulse"]{background:#302743;border-color:#aa8be0;color:#e7d9ff}
.race-app .race-item-button.is-ready[data-item-kind="mine"]{background:#3b2b19;border-color:#d5a159;color:#ffdfab}
.race-app .race-item-button.is-ready[data-item-kind="shield"]{background:#173344;border-color:#73b7df;color:#d3efff}
.race-app .race-item-button.is-ready[data-item-kind="turbo"]{background:#153c34;border-color:#62cdb0;color:#b8f5df}
.race-app .race-item-button.is-ready[data-item-kind="smoke"]{background:#273637;border-color:#a5bfbc;color:#dcf0eb}
.race-app .race-item-button.is-ready[data-item-kind="flash"]{background:#3c331c;border-color:#d9bb69;color:#fff0c3}
.race-app .race-item-button.is-ready[data-item-kind="stun"]{background:#15343d;border-color:#6cd5e6;color:#c6f6ff}
@media(max-height:600px) and (min-width:701px){
 .race-display .race-items{right:222px;max-width:160px}
}

/* Calm, bounded guidance keeps the road visible during combat. */
.race-items[data-threat] .race-item-hint{color:#ffd297}
.race-items[data-threat="missile"] .race-item-hint{color:#ff8a70;animation:race-missile-warning .6s steps(2,jump-none) infinite}
@keyframes race-missile-warning{from{opacity:1}to{opacity:.55}}
[data-reduced-motion="true"] .race-items[data-threat="missile"] .race-item-hint{animation:none}
.race-item-target-shield{display:flex;align-items:center;color:#91d7f6;font-size:var(--t-small)}
.race-item-target-shield>.icon{margin-right:var(--s1)}
.race-app .race-effect-badges,.race-display .race-items .race-effect-badges{display:flex;flex-wrap:wrap;align-items:center;margin:0 0 var(--s1)}
.race-app .race-effect-badges>*{margin:0 var(--s1) var(--s1) 0}
.race-app .race-effect-badge{display:inline-flex;align-items:center;max-width:100%;padding:var(--s1);border:1px solid #689799;border-radius:var(--ctl-r);background:#183034;color:#d2f4ef;font-size:var(--t-small);line-height:1.3}
.race-app .race-effect-badge>*+*{margin-left:var(--s1)}
.race-app .race-effect-badge>.icon{flex-shrink:0;margin:0}.race-app .race-effect-badge>span{font-size:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.race-app .race-effect-badge>b{font-size:inherit;white-space:nowrap;font-variant-numeric:tabular-nums}
.race-app .race-effect-badge.effect-stun,.race-app .race-effect-badge.effect-flash,.race-app .race-effect-badge.effect-slow,.race-app .race-effect-badge.effect-impact{background:#342d1b;border-color:#a38e58;color:#ffe5ae}
.race-app .race-effect-badge.effect-shield,.race-app .race-effect-badge.effect-turbo{background:#193929;border-color:#648f76;color:#c8f9d7}
/* Damage is the car itself rather than something being done to it: red, so it
   is not mistaken for a rival's power wearing off in a second or two. */
.race-app .race-effect-badge.effect-damage{background:#3a1f1c;border-color:#c07a62;color:#ffd9c4}
.race-phone-instruction .race-effect-badges{justify-content:center;margin-bottom:0}
[dir=rtl] .race-items>div{margin-left:0;margin-right:var(--s3)}
[dir=rtl] .race-item-button>.icon,[dir=rtl] .race-item-brief>.icon,[dir=rtl] .race-item-target-shield>.icon{margin-right:0;margin-left:var(--s3)}
[dir=rtl] .race-app .race-effect-badges>*{margin:0 0 var(--s1) var(--s1)}
[dir=rtl] .race-app .race-effect-badge>*+*{margin-left:0;margin-right:var(--s1)}

/* Lock missile: the widget turns amber while a rival is held in the lock cone.
   The reticle is a calm ring; reduced motion keeps it still. */
.race-app .race-item-button.is-ready[data-item-kind="missile"]{background:#3d2618;border-color:#ff8c5a;color:#ffd9c4}
.race-items[data-lock="true"]{border-color:#ff8c5a}.race-items[data-lock="true"] .race-item-hint,.race-display .race-items[data-lock="true"] .race-item-hint{color:#ffb38a}
.race-item-reticle{display:inline-block;width:11px;height:11px;margin:0 var(--s1) -1px 0;border:2px solid #ff8c5a;border-radius:50%;box-shadow:0 0 0 2px #ff8c5a33;animation:race-item-reticle .9s ease-in-out infinite alternate}
@keyframes race-item-reticle{from{transform:scale(.85);opacity:.7}to{transform:scale(1.1);opacity:1}}
.race-display[data-reduced-motion="true"] .race-item-reticle{animation:none}
@media(prefers-reduced-motion:reduce){.race-item-reticle{animation:none}}

/* racing-effects.css */
/* Screen-space impact feedback for the race display. One short layer per
   confirmed event, every animation under 700 ms. It never takes pointer
   events and sits below the HUD (z-index 2-3), pause overlays (4), the
   countdown (9) and notices (20), so no control is ever covered. */
.race-display .race-play>.race-screen-fx{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;justify-content:center;align-items:flex-start;padding-top:28%;overflow:hidden;pointer-events:none;contain:strict}
.race-screen-fx::before,.race-screen-fx::after{content:"";position:absolute;pointer-events:none;opacity:0}
.race-screen-fx::before{top:0;right:0;bottom:0;left:0}
.race-screen-fx-toast{display:inline-block;max-width:70%;padding:var(--s2) var(--s4);border:1px solid #ffffff44;border-radius:999px;background:#0d1216d9;color:#f5f7f8;font-size:var(--t-title);font-weight:var(--w-med);letter-spacing:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:race-fx-toast .7s ease-out forwards}
@keyframes race-fx-toast{0%{opacity:0;transform:translateY(6px) scale(.9)}15%{opacity:1;transform:translateY(0) scale(1.04)}70%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-6px) scale(.98)}}

/* Blast: orange edge vignette plus a 3 px shake of this layer only. */
.race-screen-fx[data-fx="blast"]{animation:race-fx-shake .35s linear}
.race-screen-fx[data-fx="blast"]::before{animation:race-fx-blast .6s ease-out forwards}
.race-screen-fx[data-fx="blast"] .race-screen-fx-toast{border-color:#ff8c5a;color:#ffd9c4}
@keyframes race-fx-blast{0%{opacity:1;box-shadow:inset 0 0 90px 28px #ff7a3acc}100%{opacity:0;box-shadow:inset 0 0 40px 0 #ff7a3a00}}
@keyframes race-fx-shake{0%,100%{transform:translate(0,0)}20%{transform:translate(3px,-2px)}40%{transform:translate(-3px,2px)}60%{transform:translate(2px,3px)}80%{transform:translate(-2px,-3px)}}

/* Stun: blue flicker. */
.race-screen-fx[data-fx="stun"]::before{background:#6ad4ff;animation:race-fx-stun .4s steps(1,end) forwards}
.race-screen-fx[data-fx="stun"] .race-screen-fx-toast{border-color:#6cd5e6;color:#c6f6ff}
@keyframes race-fx-stun{0%{opacity:.35}25%{opacity:.08}50%{opacity:.3}75%{opacity:.06}100%{opacity:0}}

/* Smoke: grey haze that thickens then lifts. */
.race-screen-fx[data-fx="smoke"]::before{background:radial-gradient(circle at 50% 60%,#9aa7ad00 20%,#7d8a90cc 100%);animation:race-fx-smoke .7s ease-in-out forwards}
.race-screen-fx[data-fx="smoke"] .race-screen-fx-toast{border-color:#a5bfbc;color:#dcf0eb}
@keyframes race-fx-smoke{0%{opacity:0}35%{opacity:.75}100%{opacity:0}}

/* Flash: white pulse. */
.race-screen-fx[data-fx="flash"]::before{background:#fff;animation:race-fx-flash .5s ease-out forwards}
.race-screen-fx[data-fx="flash"] .race-screen-fx-toast{border-color:#f2d69a;color:#fff0c3}
@keyframes race-fx-flash{0%{opacity:.8}100%{opacity:0}}

/* Blocked: cyan ring expanding from the centre. */
.race-screen-fx[data-fx="blocked"]::after{left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border:3px solid #62e6ff;border-radius:50%;box-shadow:0 0 18px #62e6ff88;animation:race-fx-ring .6s ease-out forwards}
.race-screen-fx[data-fx="blocked"] .race-screen-fx-toast{border-color:#73b7df;color:#d3efff}
@keyframes race-fx-ring{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(7)}}

/* Hit: red edge for an authored hurdle. */
.race-screen-fx[data-fx="hit"]::before{animation:race-fx-hit .5s ease-out forwards}
.race-screen-fx[data-fx="hit"] .race-screen-fx-toast{border-color:#ff6b6b;color:#ffd0d0}
@keyframes race-fx-hit{0%{opacity:1;box-shadow:inset 0 0 70px 20px #ff3b3bb0}100%{opacity:0;box-shadow:inset 0 0 30px 0 #ff3b3b00}}

/* Landed: the attacker sees a calm amber glow at the top edge and the toast. */
.race-screen-fx[data-fx="landed"]::before{background:linear-gradient(#ffb36a66,#ffb36a00 30%);animation:race-fx-landed .6s ease-out forwards}
.race-screen-fx[data-fx="landed"] .race-screen-fx-toast{border-color:#efb764;color:#ffdfab}
.race-screen-fx[data-fx="landed"][data-item="missile"] .race-screen-fx-toast{border-color:#ff8c5a;color:#ffd9c4}
@keyframes race-fx-landed{0%{opacity:1}100%{opacity:0}}

/* Calmer variants: no shake, no flicker, shorter and dimmer. */
.race-display[data-reduced-motion="true"] .race-play>.race-screen-fx,.race-display[data-reduced-motion="true"] .race-screen-fx::before,.race-display[data-reduced-motion="true"] .race-screen-fx::after{animation-duration:.3s;animation-timing-function:ease-out}
.race-display[data-reduced-motion="true"] .race-screen-fx[data-fx="blast"]{animation:none}
.race-display[data-reduced-motion="true"] .race-screen-fx[data-fx="stun"]::before,.race-display[data-reduced-motion="true"] .race-screen-fx[data-fx="flash"]::before{animation-name:race-fx-calm}
.race-display[data-reduced-motion="true"] .race-screen-fx[data-fx="blocked"]::after{animation-name:race-fx-calm;transform:scale(3)}
.race-display[data-reduced-motion="true"] .race-screen-fx-toast{animation:race-fx-calm-toast .4s ease-out forwards}
@keyframes race-fx-calm{0%{opacity:.25}100%{opacity:0}}
@keyframes race-fx-calm-toast{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
 .race-display .race-play>.race-screen-fx,.race-screen-fx::before,.race-screen-fx::after{animation-duration:.3s;animation-timing-function:ease-out}
 .race-screen-fx[data-fx="blast"]{animation:none}
 .race-screen-fx[data-fx="stun"]::before,.race-screen-fx[data-fx="flash"]::before{animation-name:race-fx-calm}
 .race-screen-fx[data-fx="blocked"]::after{animation-name:race-fx-calm;transform:scale(3)}
 .race-screen-fx-toast{animation:race-fx-calm-toast .4s ease-out forwards}
}

/* Lap, checkpoint and car-condition notices. Sits above the screen-space
   impact layer and below the HUD, and never covers a control: it is centred
   in the upper third, where the existing effect toast is not. Decorative —
   every number it shows is also on a permanent readout. */
.race-display .race-play .race-progress-notice{position:absolute;top:14%;left:50%;z-index:2;display:flex;gap:var(--s2);align-items:center;padding:var(--s2) var(--s4);border:1px solid #ffffff33;border-radius:999px;background:#0d1216e0;color:#f5f7f8;white-space:nowrap;pointer-events:none;transform:translateX(-50%);animation:race-progress-notice 2.2s ease-out forwards}
.race-progress-notice strong{font-size:var(--t-title);font-weight:var(--w-bold);letter-spacing:.06em}
.race-progress-notice b{padding-left:var(--s2);border-left:1px solid #ffffff2e;color:#b9c6cc;font-size:var(--t-body);font-weight:var(--w-med)}
.race-progress-notice[data-notice="lap"]{border-color:#a3e63588;color:#eaffd0}
.race-progress-notice[data-best="true"] b{color:#a3e635}
.race-progress-notice[data-notice="checkpoint"]{border-color:#72f2dc66}
.race-progress-notice[data-notice="contact"]{border-color:#ffb56088;color:#ffe6c8}
.race-progress-notice[data-notice="damage"]{border-color:#ff8c5a99;color:#ffd9c4}
.race-progress-notice[data-level="critical"]{border-color:#ff6b6b;color:#ffd0d0}
@keyframes race-progress-notice{0%{opacity:0;transform:translateX(-50%) translateY(-8px) scale(.94)}10%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.03)}20%{transform:translateX(-50%) translateY(0) scale(1)}82%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.race-display .race-play .race-progress-notice{animation:race-progress-fade 2.2s linear forwards}}
@keyframes race-progress-fade{0%,90%{opacity:1}100%{opacity:0}}

/* A whole-screen warning frame leaves the road and every touch target live. */
.race-display .race-play>.race-disaster-alert{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;border:5px solid #f4b45d99;box-shadow:inset 0 0 44px #ef93382b}
.race-disaster-message{position:absolute;top:26%;left:50%;transform:translateX(-50%);width:32vw;max-width:340px;padding:10px 12px;background:#15212bef;border:1px solid #e9b673;border-radius:10px;text-align:center;color:#fff0d5;line-height:1.35}
.race-disaster-message strong{display:block;font-size:15px;letter-spacing:.05em}
.race-disaster-message span{display:block;font-size:12px;margin-top:4px}
.race-display .race-play>.race-disaster-alert[data-disaster="blizzard"]{border-color:#c8edff99;box-shadow:inset 0 0 44px #d8f5ff22}
.race-display .race-play>.race-disaster-alert[data-disaster="meteor"]{border-color:#ff845c99}
.race-display .race-play>.race-fuel-meter{position:absolute;left:50%;bottom:106px;transform:translateX(-50%);width:180px;padding:7px 10px;background:#122229ee;border:1px solid #70d6bc66;border-radius:8px;z-index:2;pointer-events:none;color:#e7fff7;font-size:12px;line-height:1.4}
.race-fuel-meter span{display:flex;justify-content:space-between}.race-fuel-meter>i{display:block;height:4px;background:#6ce0bd;margin-top:4px}.race-fuel-meter[data-low="true"]{border-color:#ffb05e;color:#ffe1b8}.race-fuel-meter[data-low="true"]>i{background:#ffb05e}
@media(max-width:650px){.race-disaster-message{top:31%;width:44vw;padding:7px}.race-disaster-message strong{font-size:12px}.race-disaster-message span{font-size:11px}.race-display .race-play>.race-fuel-meter{width:146px;bottom:112px}}
@media(max-height:540px){.race-disaster-message{top:22%;padding:6px}.race-display .race-play>.race-fuel-meter{bottom:88px;padding:4px 8px}}
.race-fuel-rescue{width:100%;padding:12px;border:1px solid #e7b270;border-radius:10px;background:#302719}.race-fuel-rescue strong{display:block}.race-fuel-rescue p{margin:6px 0 10px}.race-fuel-rescue button{min-height:48px;margin:0 8px 8px 0;padding:10px 16px}
.race-display .race-play.has-touch>.race-fuel-meter{bottom:156px;bottom:calc(var(--hud-thumb-band,132px) + 24px)}

/* Brief incident edges reuse the existing noninteractive overlay. */
.race-screen-fx[data-fx="spin"]::before{border:3px solid #ffc46b;animation:race-fx-smoke .65s ease-out forwards}
.race-screen-fx[data-fx="spin"] .race-screen-fx-toast{border-color:#ffc46b;color:#ffe3b5}
.race-screen-fx[data-item="meteor"]::before{animation:race-fx-blast .6s ease-out forwards}
.race-screen-fx[data-item="tornado"]::before,.race-screen-fx[data-item="hurricane"]::before{border:3px solid #9dd8ea;animation:race-fx-smoke .6s ease-out forwards}
.race-display[data-reduced-motion="true"] .race-screen-fx[data-fx="spin"]::before,.race-display[data-reduced-motion="true"] .race-screen-fx[data-item="meteor"]::before,.race-display[data-reduced-motion="true"] .race-screen-fx[data-item="tornado"]::before,.race-display[data-reduced-motion="true"] .race-screen-fx[data-item="hurricane"]::before{animation:race-fx-calm .3s ease-out forwards}
@media(prefers-reduced-motion:reduce){.race-screen-fx[data-fx="spin"]::before,.race-screen-fx[data-item="meteor"]::before,.race-screen-fx[data-item="tornado"]::before,.race-screen-fx[data-item="hurricane"]::before{animation:race-fx-calm .3s ease-out forwards}}

/* racing-courses.css */
/* The course browser. Tokens come from .race-display in racing.css; the tracks
   grid must fit without scrolling, so the tiles carry name, region and access
   and nothing else. Grid everywhere: flex `gap` is zero on the car. */
.race-course-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4,12px)}
.race-course-tools{display:grid;grid-template-columns:minmax(110px,1fr) auto minmax(150px,1.25fr);gap:var(--s3,8px);align-items:center}
.race-course-tools .race-check{font-size:var(--t-ctl,13px)!important;line-height:1.25}
.race-course-count{margin:0;font-size:var(--t-small,11px);color:#a1c7bb;white-space:nowrap}
.race-course-pager{display:grid;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);gap:var(--s3,8px);align-items:center}
.race-course-pager>span{font-size:var(--t-small,11px);color:#b4d3cc;white-space:nowrap}
.race-course-pager button{display:flex;justify-content:center;align-items:center;min-width:48px;min-height:var(--ctl-h,50px);padding:0}
.race-course-pager button>.icon{flex-shrink:0}
.race-course-pager button:first-child>.icon{transform:rotate(180deg)}
.race-home .race-course-browser{padding:var(--card-pad,12px);gap:var(--s2,6px)}
/* Hidden for months: the page heading repeats the tab, the access note repeats
   each tile's own access line, and the detail line repeats the filters. */
.race-course-browser>.race-menu-heading,.race-course-access-note,.race-course-browser .race-course-detail{display:none}
.race-home .race-course-browser .race-tracks{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,6px)}
.race-home .race-course-browser .race-track{display:grid;align-content:center;justify-items:start;min-height:64px!important;min-width:48px;padding:var(--s1,4px) var(--s3,8px)!important;gap:var(--s1,4px)}
/* Grid gap owns the spacing; the shared column margins would double it. */
.race-home .race-course-browser .race-track>*+*{margin-top:0}
.race-home .race-course-browser .race-track strong{font-size:var(--t-small,11px);font-weight:var(--w-med,600);line-height:1.2;overflow-wrap:break-word}
.race-course-browser .race-track-region,.race-course-browser .race-track-access{font-size:var(--t-small,11px);line-height:1.2}
.race-course-browser .race-track-region>.icon{display:none}
/* Selection is a colour, not a second pixel: a 2px border shifts the grid. */
.race-home .race-course-browser .race-track.selected{border:1px solid var(--sel-line,#268d84)!important;background:var(--sel-bg,#141b20)!important}
@media(max-width:540px){
 .race-course-tools{grid-template-columns:minmax(0,1fr) auto}
 .race-course-tools .race-course-count{grid-column:2;grid-row:1}
 .race-course-tools .race-course-pager{grid-column:1/-1}
 .race-home .race-course-browser .race-tracks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* racing-tour.css */
/* Optional help sits in the open preview area; launch controls retain their
   existing space. No extra renderer, blurred backdrop or page scroll.
   Physical offsets with an explicit [dir=rtl] mirror: the logical margin and
   padding properties are not in the car's Chrome 79. */
.race-tour-entry{position:absolute;z-index:6;left:50%;bottom:260px;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;grid-gap:var(--s3,8px);width:440px;max-width:calc(100% - 32px);padding:var(--s3,8px) var(--s4,12px);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);background:var(--card-bg,#101f25f5);color:#e9f8f2;box-sizing:border-box}
.race-tour-entry>strong{font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.4;min-width:0}
.race-tour-entry button,.race-tour-panel button{min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);box-sizing:border-box;border:1px solid var(--ctl-line,#47685f);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#1a3033);color:#e2f5ed;font:inherit;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.35;cursor:pointer;touch-action:manipulation}
.race-tour-entry .race-tour-start,.race-tour-panel .race-tour-next{background:#54e8cf;color:#07231d;border-color:#78eedb;font-weight:var(--w-strong,700)}
.race-tour-entry.is-replay{display:block;width:auto;padding:0;border:0;background:transparent;box-shadow:none}
.race-tour-help{display:flex;align-items:center;justify-content:center}
.race-tour-help>.icon{flex-shrink:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-tour-help>.icon{margin-right:0;margin-left:var(--s3,8px)}
.race-home.is-showroom .race-tour-entry{bottom:310px}
.race-tour-backdrop{position:fixed;z-index:65;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--s4,12px);box-sizing:border-box;background:var(--scrim,rgba(4,9,11,.8));color:#e9f8f2}
.race-tour-panel{display:flex;flex-direction:column;width:500px;max-width:100%;max-height:calc(100vh - 24px);overflow:hidden;background:var(--card-bg,#0d1b21);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);box-shadow:var(--dialog-shadow,0 10px 36px #0007);color:#e9f8f2;box-sizing:border-box;font-family:inherit}
.race-tour-heading{display:flex;align-items:center;justify-content:space-between;padding:var(--s3,8px) var(--s5,16px);border-bottom:1px solid var(--card-line,#ffffff1f);flex-shrink:0}
.race-tour-heading h2{margin:0;font-size:var(--t-title,15px);line-height:1.3;font-weight:var(--w-med,600);min-width:0;padding-right:var(--s4,12px)}
[dir=rtl] .race-tour-heading h2{padding-right:0;padding-left:var(--s4,12px)}
.race-tour-heading>button{padding:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.race-tour-body{padding:var(--s6,20px);min-height:0;overflow-y:auto;overscroll-behavior:contain}
.race-tour-progress{margin:0 0 var(--s4,12px);color:#a5c9c4;font-size:var(--t-small,11px);line-height:1.4}
.race-tour-step-heading{display:grid;grid-template-columns:56px minmax(0,1fr);grid-gap:var(--s4,12px);align-items:center}
.race-tour-symbol{width:var(--ctl-h-tile,56px);height:var(--ctl-h-tile,56px);border-radius:var(--card-r,12px);display:flex;align-items:center;justify-content:center;background:#1a3838;color:#70e8ce}
.race-tour-step-heading h3{margin:0;font-size:var(--t-head,20px);line-height:1.25;font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em);overflow-wrap:break-word}
.race-tour-copy{margin:var(--s5,16px) 0;font-size:var(--t-body,12px);line-height:1.5;color:#dfefe9}
.race-tour-tip{display:flex;align-items:flex-start;margin:0;padding:var(--card-pad,12px);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--ctl-r,10px);background:#142d2a;color:#b8e2d5;font-size:var(--t-body,12px);line-height:1.5}
.race-tour-tip>.icon{flex-shrink:0;margin-right:var(--s3,8px);margin-top:1px}
[dir=rtl] .race-tour-tip>.icon{margin-right:0;margin-left:var(--s3,8px)}
.race-tour-dots{display:flex;justify-content:center;margin-top:var(--s5,16px)}
.race-tour-dots i{display:block;width:8px;height:8px;border-radius:50%;margin:0 var(--s1,4px);background:#365550}
.race-tour-dots i.is-current{background:#54e8cf}
.race-tour-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:var(--s3,8px);padding:var(--s4,12px) var(--s5,16px);border-top:1px solid var(--card-line,#ffffff1f);flex-shrink:0}
.race-tour-panel button:disabled{opacity:.45;cursor:default}
.race-tour-panel :focus,.race-tour-entry button:focus{outline:3px solid var(--focus,#8bf2d8);outline-offset:2px}
.race-tour-step-heading h3:focus{outline-offset:4px}
@media(max-height:760px){.race-tour-body{padding:var(--s5,16px)}.race-tour-heading,.race-tour-actions{padding:var(--s3,8px) var(--s5,16px)}.race-tour-copy{margin:var(--s4,12px) 0}.race-tour-dots{margin-top:var(--s4,12px)}}
@media(max-width:540px){.race-tour-entry{grid-template-columns:1fr 1fr;width:310px}.race-tour-entry>strong{grid-column:1 / -1;text-align:center}.race-tour-entry.is-replay{width:auto}.race-tour-backdrop{padding:var(--s3,8px)}.race-tour-panel{max-height:calc(100vh - 16px)}.race-tour-body{padding:var(--s4,12px)}.race-tour-heading,.race-tour-actions{padding:var(--s3,8px) var(--s4,12px)}.race-tour-panel button{padding:0 var(--s3,8px)}}

/* A stable corner entry, and a walkthrough that points at the actual UI. */
.race-home .race-tour-entry,.race-home.is-showroom .race-tour-entry{left:auto;right:var(--s7,24px);top:78px;bottom:auto;transform:none;width:auto;max-width:calc(100% - 48px);display:block;padding:0;border:0;background:transparent}
.race-tour-backdrop.is-anchored{display:block;padding:0;background:transparent}
.race-tour-spotlight{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
.race-tour-spotlight>i{position:absolute;background:var(--scrim,rgba(4,9,11,.8))}
.race-tour-spotlight>b{position:absolute;box-sizing:border-box;outline:3px solid var(--focus,#54e8cf);outline-offset:3px;border-radius:var(--ctl-r,10px)}
.race-tour-backdrop.is-anchored .race-tour-panel{position:absolute;box-shadow:var(--dialog-shadow,0 6px 20px #0008)}
.race-tour-backdrop.is-anchored .race-tour-step-heading{grid-template-columns:36px minmax(0,1fr);grid-gap:var(--s3,8px)}
.race-tour-backdrop.is-anchored .race-tour-symbol{width:36px;height:36px}
.race-tour-backdrop.is-anchored .race-tour-symbol>.icon{width:24px;height:24px}
.race-tour-backdrop.is-anchored .race-tour-body{padding:var(--s4,12px)}
.race-tour-backdrop.is-anchored .race-tour-copy{margin:var(--s4,12px) 0}
.race-tour-backdrop.is-anchored .race-tour-tip{padding:var(--s3,8px)}
.race-tour-backdrop.is-anchored .race-tour-dots{margin-top:var(--s4,12px)}
.race-tour-backdrop.is-anchored .race-tour-actions{padding:var(--s3,8px);grid-gap:var(--s2,6px)}
@media(max-width:700px){.race-home .race-tour-entry,.race-home.is-showroom .race-tour-entry{right:var(--s5,16px);top:182px;max-width:calc(100% - 32px)}.race-home .race-home-challenge{top:250px}}

/* racing-pro.css */
/* The Pro preview is portalled to <body>, outside .race-display, so the racing
   token set never reaches it: colours stay literal here on purpose. Type,
   spacing and control sizes read the shared tokens with literal fallbacks. */
.race-pro-discovery-trigger{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3,8px);width:100%;min-height:var(--ctl-h-lg,52px);padding:0 var(--s4,12px);border:1px solid #416958;border-radius:var(--ctl-r,10px);background:#122923;color:#a3ebd7;font:inherit;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);text-align:left;cursor:pointer}
.race-pro-discovery-trigger>.icon{flex-shrink:0}
/* Racing's focus colour, rebound here because the portal sits outside
   .race-display and would otherwise take Drive's lime ring from :root. */
.race-pro-backdrop{--focus:#54e8cf;position:fixed;z-index:70;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:var(--s4,12px);background:var(--scrim,rgba(4,9,11,.8));color:#e9f8f2;box-sizing:border-box}
.race-pro-panel{display:flex;flex-direction:column;width:460px;max-width:100%;max-height:calc(100vh - 24px);border:1px solid #406558;border-radius:var(--card-r,12px);background:#0d1b21;box-shadow:var(--dialog-shadow,0 16px 40px #020b0fcc);overflow:hidden;font-family:inherit}
.race-pro-panel header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s4,12px);padding:var(--s5,16px);border-bottom:1px solid #294039;flex-shrink:0}
.race-pro-panel h2{margin:0;font-size:var(--t-head,20px);font-weight:var(--w-med,600);letter-spacing:var(--ls-tight,-.02em);line-height:1.2}
.race-pro-panel button,.race-pro-panel select,.race-pro-panel a{box-sizing:border-box;min-height:var(--ctl-h,50px);min-width:48px;padding:0 var(--s4,12px);border:1px solid #466358;border-radius:var(--ctl-r,10px);background:#182e29;color:#edf7f2;font:inherit;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);text-decoration:none;cursor:pointer}
.race-pro-panel header button{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:var(--ctl-h-lg,52px);min-height:var(--ctl-h-lg,52px);padding:0}
.race-pro-body{min-height:0;overflow-y:auto;padding:var(--s5,16px);font-size:var(--t-body,12px);line-height:1.5;overscroll-behavior:contain}
.race-pro-body p{margin:0 0 var(--s4,12px)}
.race-pro-body label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--s3,8px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-pro-body .sound-preview{margin:var(--s4,12px) 0}
.race-pro-price strong{font-size:var(--n-lg,24px);font-weight:var(--w-body,400);letter-spacing:var(--ls-tight,-.02em)}
.race-pro-note{color:#a9cbbd;font-size:var(--t-small,11px)}
.race-pro-panel footer{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3,8px);padding:var(--s5,16px);border-top:1px solid #294039;flex-shrink:0}
.race-pro-panel footer>a,.race-pro-panel footer>button{display:flex;align-items:center;justify-content:center;text-align:center}
.race-pro-panel .race-pro-subscribe{background:#54e8cf;color:#05241c;font-weight:var(--w-strong,700);border-color:#75efce}
.race-pro-panel :focus,.race-pro-discovery-trigger:focus{outline:3px solid var(--focus,#54e8cf);outline-offset:2px}
/* One dialog: 16px of padding on the car's short screens, 20px above them. */
@media(min-height:761px){.race-pro-panel header,.race-pro-body,.race-pro-panel footer{padding:var(--s6,20px)}}

/* racing-arcade.css */
/* Arcade equipment, the coin wallet, rewards and the once-a-day summary. They
   sit inside the existing setup panel and its fixed footer.
   Chrome 79 is the car, so flex gap is out: rows space their children with
   physical margins with an explicit [dir=rtl] mirror the way the rest of this
   sheet already does, and everything else uses grid gap. Type, spacing, cards
   and control heights come from the tokens on .race-display. */
.race-arcade-journey{padding:var(--card-pad,12px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#0d191c);color:#e4f2ef}
.race-arcade-title,.race-arcade-next,.race-conditions{display:flex;align-items:center;flex-wrap:wrap}
.race-arcade-title>*+*,.race-arcade-next>*+*,.race-conditions>*+*{margin-left:var(--s3,8px)}
.race-arcade-title>b{margin-left:auto;color:var(--sel-line,#54e8cf);font-size:var(--t-body,12px)}
.race-arcade-journey p{margin:var(--s3,8px) 0;font-size:var(--t-body,12px);line-height:1.45}
.race-arcade-journey small{display:block;color:#adbfba;font-size:var(--t-small,11px);line-height:1.4}
.race-arcade-next{justify-content:space-between;margin:var(--s3,8px) 0}
.race-arcade-next>span{font-size:var(--t-body,12px);flex:1 1 180px}
.race-arcade-next button{display:flex;align-items:center;min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-arcade-earned{display:flex;align-items:center;color:var(--sel-line,#54e8cf);font-size:var(--t-small,11px)}
.race-arcade-earned>*+*{margin-left:var(--s2,6px)}
.race-arcade-journey.is-compact{padding:var(--s3,8px)}
.race-arcade-league ol{margin:var(--s4,12px) 0;padding:0;list-style:none}
.race-arcade-league li{display:flex;justify-content:space-between;padding:var(--s3,8px) 0;border-bottom:1px solid var(--card-line,#ffffff18);font-size:var(--t-body,12px);overflow-wrap:anywhere}
.race-arcade-league li>*+*{margin-left:var(--s3,8px)}
.race-arcade-league li.is-self{color:var(--sel-line,#54e8cf)}
.race-conditions{font-size:var(--t-body,12px);margin:var(--s3,8px) 0;color:#b7d5ce}
.race-conditions span{margin-left:auto}
/* The fitted compound disagrees with the weather: amber, and the cost of it
   on its own line so the number is never mistaken for the condition name. */
.race-conditions.needs-tyres{color:#f2d69a}
.race-conditions[data-tyres="penalty"]{color:#ffb99a}
.race-conditions b{flex:1 0 100%;margin-left:0;padding-top:2px;color:#c9a98a}

.race-arcade-garage summary>b{margin-left:auto;color:var(--sel-line,#54e8cf);font-size:var(--t-body,12px)}
.race-equipment-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,6px);margin:var(--s4,12px) 0}
.race-equipment-tabs button{min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);padding:var(--s2,6px) var(--s3,8px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.25;white-space:normal;word-break:normal;overflow-wrap:anywhere}
.race-tyre-grid button{min-height:var(--ctl-h-tile,56px);border-radius:var(--ctl-r,10px);padding:var(--row-pad,8px 12px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);white-space:normal;overflow-wrap:anywhere}
.race-equipment-tabs button[aria-pressed=true],.race-tyre-grid button[aria-pressed=true]{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#15352e);color:var(--sel-ink,#e8fff8)}
.race-equipment-levels{display:flex;align-items:center;justify-content:space-between}
.race-equipment-levels>*+*{margin-left:var(--s4,12px)}
.race-equipment-levels>strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-equipment-levels label{min-width:130px}
.race-equipment-stats{margin:var(--s3,8px) 0}
.race-equipment-stats>div{display:flex;justify-content:space-between;padding:var(--s1,4px) 0;border-bottom:1px solid var(--card-line,#ffffff14)}
.race-equipment-stats>div>*+*{margin-left:var(--s4,12px)}
.race-equipment-stats dd{margin:0;font-variant-numeric:tabular-nums}
.race-equipment-stats b{color:var(--sel-line,#54e8cf);font-weight:var(--w-med,600)}
.race-tyre-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3,8px)}
.race-tyre-grid button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.race-tyre-grid button>*+*{margin-top:var(--s1,4px)}
.race-tyre-grid span{font-size:var(--t-small,11px);color:#bfd2cb}
@media(max-width:420px){.race-arcade-title>b{margin-left:0}.race-equipment-levels{align-items:stretch;flex-direction:column}.race-equipment-levels>*+*{margin-left:0;margin-top:var(--s3,8px)}.race-equipment-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.race-course-unlock{display:flex;align-items:center;flex-wrap:wrap;padding:var(--card-pad,12px);background:var(--card-bg,#0d191c);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);margin:var(--s3,8px) 0}
.race-course-unlock>*+*{margin-left:var(--s3,8px)}
.race-course-unlock>strong{flex:1 1 200px;font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-course-unlock>button{min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-course-unlock>small{flex:1 0 100%;margin:var(--s1,4px) 0 0;color:#b8c8c4;font-size:var(--t-small,11px)}

/* Keep the upgrade comparison in one compact card with native touch selects. */
.race-arcade-garage .race-upgrade-heading{margin-bottom:var(--s1,4px)}
.race-arcade-garage .race-upgrade-heading>*+*{margin-left:var(--s3,8px)}
.race-upgrade-part-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border:1px solid var(--card-line,#2a3d45);border-radius:var(--ctl-r,10px);background:var(--card-bg-raise,#163c36);color:#87f5df}
.race-upgrade-title{display:flex;flex-direction:column;min-width:0}
.race-upgrade-title>*+*{margin-top:var(--s1,4px)}
.race-upgrade-title strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600);line-height:1.25}
.race-upgrade-title small{font-size:var(--t-small,11px);color:#b7c8c4;overflow-wrap:anywhere}
.race-arcade-garage .race-upgrade-wallet{padding:var(--s1,4px) var(--s3,8px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--ctl-r,10px);background:var(--card-bg-raise,#112923);font-size:var(--t-body,12px);line-height:1.2;text-align:end;max-width:42%;overflow-wrap:anywhere}
.race-upgrade-comparison{padding:var(--card-pad,12px);border:1px solid var(--card-line,#2a3d45);border-radius:var(--card-r,12px);background:var(--card-bg,#10221f);margin-top:var(--s3,8px)}
.race-upgrade-comparison .race-equipment-levels{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);align-items:center;gap:var(--s3,8px)}
.race-upgrade-comparison .race-equipment-levels>*+*{margin-left:0}
.race-upgrade-comparison .race-equipment-levels>label{min-width:0;gap:var(--s1,4px);font-size:var(--t-small,11px);color:#b9cec8}
.race-upgrade-comparison .race-equipment-levels>label select{font-size:var(--t-ctl,13px);min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px)}
.race-upgrade-comparison .race-equipment-levels>.icon{color:#7cad9e;margin-top:var(--s5,16px)}
.race-upgrade-next{display:flex;flex-direction:column;justify-content:center;min-width:0}
.race-upgrade-next>*+*{margin-top:var(--s1,4px)}
.race-upgrade-next small{font-size:var(--t-small,11px);color:#b9cec8;line-height:1.25}
.race-upgrade-next strong{color:#8bf2d9;font-size:var(--t-title,15px);font-weight:var(--w-med,600);line-height:1.2}
.race-upgrade-stats>div{align-items:center;padding:var(--s1,4px) 0}
.race-upgrade-stats dt{font-size:var(--t-body,12px);flex:1;min-width:0}
.race-upgrade-stats dd{display:flex;flex-direction:column;flex:1.2;min-width:0;text-align:end;font-size:var(--t-body,12px)}
.race-upgrade-stats dd>*+*{margin-top:var(--s1,4px)}
.race-upgrade-stats dd>span:first-child{white-space:nowrap}
.race-upgrade-stat-bar{display:block;height:4px;position:relative;border-radius:2px;overflow:hidden;background:#ffffff1a}
.race-upgrade-stat-bar>i{position:absolute;top:0;bottom:0;left:0;border-radius:2px}
[dir=rtl] .race-upgrade-stat-bar>i{left:auto;right:0}
.race-upgrade-stat-gain{background:var(--sel-line,#54e8cf)}
.race-upgrade-stat-current{background:#89aba1}
.race-upgrade-purchase{display:flex;align-items:stretch}
.race-upgrade-purchase>*+*{margin-left:var(--s2,6px)}
.race-upgrade-purchase>button{min-height:var(--ctl-h,50px);min-width:48px;border-radius:var(--ctl-r,10px);line-height:1.25;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);padding:var(--s2,6px) var(--s3,8px)}
.race-upgrade-purchase>.race-primary{display:flex;align-items:center;justify-content:center;flex:1;min-height:var(--ctl-h-lg,52px);font-weight:var(--w-strong,700)}
.race-upgrade-purchase>.race-primary>.icon{flex-shrink:0;margin-right:var(--s2,6px)}
.race-upgrade-purchase>button:not(.race-primary){flex:0 1 85px}
.race-cosmetic-grid .race-cosmetic-tile{padding:var(--row-pad,8px 12px);overflow:hidden}
.race-cosmetic-grid .race-cosmetic-tile>*+*{margin-top:var(--s1,4px)}
.race-cosmetic-swatch{display:flex;align-items:center;justify-content:center;width:100%;height:34px;position:relative;border-radius:var(--ctl-r,10px);box-shadow:inset 0 0 0 1px #ffffff2e;color:#e8fffa}
.race-cosmetic-swatch:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(160deg,#ffffff26,transparent 48%,#00000022)}
.race-cosmetic-swatch>i{position:absolute;right:var(--s1,4px);top:var(--s1,4px);display:grid;place-items:center;border-radius:50%;background:#0b201b;color:#bdffeb;padding:var(--s1,4px)}
.race-cosmetic-swatch>i:empty{display:none}
.race-cosmetic-tile>strong{font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.2}
.race-cosmetic-grid .race-cosmetic-price{font-size:var(--t-small,11px);color:#b5efd9}
.race-cosmetic-tile[aria-pressed=true]{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#15352e)}

.race-garage-sections{display:flex;flex-wrap:wrap;margin:var(--s4,12px) 0}
.race-garage-sections button{flex:1 1 90px;min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);padding:var(--s2,6px);line-height:1.25;margin:0 var(--s2,6px) var(--s2,6px) 0}
[dir=rtl] .race-garage-sections button{margin:0 0 var(--s2,6px) var(--s2,6px)}
.race-garage-sections button[aria-pressed=true]{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#15352e);color:var(--sel-ink,#e8fff8)}
.race-equipment-heading{display:flex;align-items:center;padding:var(--s3,8px) 0}
.race-equipment-heading>*+*{margin-left:var(--s3,8px)}
.race-equipment-heading>b{margin-left:auto;color:var(--sel-line,#54e8cf);font-size:var(--t-body,12px)}
.race-arcade-garage.is-embedded{padding:0;border:0;background:none}
.race-repair-warning{padding:var(--row-pad,8px 12px);background:#322716;border:1px solid #e7b25c70;border-radius:var(--ctl-r,10px);color:#ffd591;font-size:var(--t-body,12px);line-height:1.4}
/* The one offer on the results card: what to change before the next race. */
.race-upgrade-advice{display:flex;align-items:flex-start;flex-wrap:wrap;padding:var(--card-pad,12px);margin:var(--s3,8px) 0;border:1px solid var(--sel-line,#54e8cf);border-radius:var(--card-r,12px);background:var(--sel-bg,#10201f);color:#dfeee9}
.race-upgrade-advice>*+*{margin-left:var(--s3,8px)}
.race-upgrade-advice>svg{color:var(--sel-line,#54e8cf);flex-shrink:0}
.race-upgrade-advice>div{flex:1;min-width:150px}
.race-upgrade-advice strong,.race-upgrade-advice small{display:block}
.race-upgrade-advice strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600);margin:var(--s1,4px) 0}
.race-upgrade-advice small{font-size:var(--t-small,11px);color:#b9d4cc}
.race-upgrade-advice p{font-size:var(--t-body,12px);line-height:1.4;margin:var(--s1,4px) 0}
.race-upgrade-advice button{display:flex;align-items:center;justify-content:center;min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);flex:1 0 100%;margin:var(--s3,8px) 0 0;white-space:normal}
.race-upgrade-advice button>.icon{margin-left:var(--s2,6px)}
.race-rewards summary>span{min-width:0}
.race-rewards summary>b{color:var(--sel-line,#54e8cf);margin-left:auto;flex-shrink:0;font-size:var(--t-body,12px)}
.race-signin-reward{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.race-signin-reward>*+*{margin-left:var(--s3,8px)}
.race-signin-reward>span{display:flex;flex-direction:column;flex:1 1 120px;min-width:0}
.race-signin-reward>span>*+*{margin-top:var(--s1,4px)}
.race-signin-reward strong{font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-signin-reward small{color:#bacac4;font-size:var(--t-small,11px)}
.race-signin-reward button{min-width:48px;min-height:var(--ctl-h,50px);max-width:100%;display:flex;align-items:center;justify-content:center;white-space:normal;flex:1 1 150px;border-radius:var(--ctl-r,10px);padding:var(--s2,6px) var(--s4,12px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);line-height:1.25}
.race-signin-reward button>.icon{margin-right:var(--s2,6px)}
.race-reward-earned{display:flex;align-items:center;color:#a6f5d9;font-size:var(--t-small,11px);line-height:1.4}
.race-reward-earned>*+*{margin-left:var(--s2,6px)}
.race-reward-earned:empty{margin:0}
.race-reward-group{margin:var(--s4,12px) 0}
.race-reward-group>strong{font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-reward-goal{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:var(--s3,8px) 0;font-size:var(--t-body,12px)}
.race-reward-goal>*+*{margin-left:var(--s2,6px)}
.race-reward-goal>span{flex:1 1 170px}
.race-reward-goal small{display:block;color:#b8d2c9;font-size:var(--t-small,11px)}
.race-reward-goal>b{display:flex;align-items:center;color:var(--sel-line,#54e8cf);font-weight:var(--w-med,600)}
.race-reward-goal>b>*+*{margin-left:var(--s1,4px)}
.race-reward-goal>b small{font-size:var(--t-small,11px);font-weight:var(--w-body,400)}
.race-reward-goal progress{appearance:none;border:0;border-radius:2px;background:#263c38;accent-color:#54e8cf;width:100%;height:4px;margin:var(--s1,4px) 0 0}
.race-reward-goal progress::-webkit-progress-bar{background:#263c38;border-radius:2px}
.race-reward-goal progress::-webkit-progress-value{background:#54e8cf;border-radius:2px}
.race-reward-goal.is-earned progress{opacity:.6}

.race-garage-editor>.race-menu-heading{display:none}
.race-equipment-heading{padding:0;font-size:var(--t-ctl,13px)}
.race-equipment-select{display:block}
.race-equipment-select select{min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px)}
.race-arcade-garage.is-embedded>.race-muted{margin:var(--s1,4px) 0;font-size:var(--t-body,12px)}
.race-showcase-tools.is-setup{display:none}
@media(min-width:701px){
 .race-home.is-showroom.has-setup-footer .race-garage-editor>.race-garage-card{display:none}
 /* The car picker stays visible while the garage list scrolls under it. It
    used to do that by pinning itself to the viewport at a measured 194 px,
    which was the old floating bar's height plus the panel's head — so when the
    bar became a row of the shell the picker landed on the section tabs and
    swallowed every tap on them. Sticky inside its own scroll region needs no
    number at all. Sticky was no better: it then covered the body and paint
    controls as the list scrolled under it. It is simply a row of the list. */
 .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type{width:100%;max-width:100%;background:#0d171eee;border:1px solid var(--card-line,#8fb2bc4a);border-radius:var(--card-r,12px);padding:var(--row-pad,8px 12px);display:grid;align-content:center}
 .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type>*+*{margin-left:var(--s3,8px)}
 .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type>.race-field-label{margin:0;flex-shrink:0}
 .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type>select{flex:1;min-width:0;margin:0}
 .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup{display:flex;align-items:center;bottom:112px;left:24px;width:360px;max-width:calc(100% - 432px);padding:var(--s2,6px)}
 .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup>*+*{margin-left:var(--s2,6px)}
 [dir=rtl] .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup>*+*{margin-left:0;margin-right:var(--s2,6px)}
 .race-showcase-tools.is-setup>strong{display:none}
 .race-showcase-tools.is-setup>.race-showcase-views{flex:1;min-width:0;margin:0}
 .race-studio-inspect{height:var(--ctl-h-min,48px);min-width:48px;padding:var(--s2,6px)}
 .race-garage-sections{margin:0 0 var(--s3,8px)}
 .race-garage-editor[data-race-garage-section=upgrades]{gap:var(--s1,4px)}
}
@media(max-height:650px) and (min-width:701px){.race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type{top:160px}}

.race-app .race-car-condition{display:flex;align-items:center;width:100%;min-height:var(--ctl-h-tile,56px);padding:var(--row-pad,8px 12px);border:1px solid var(--card-line,#456d64);border-radius:var(--ctl-r,10px);background:var(--card-bg,#142a25);text-align:start}
.race-app .race-car-condition>*+*{margin-left:var(--s3,8px)}
.race-car-condition>span{flex:1;min-width:0}
.race-car-condition strong,.race-car-condition small{display:block}
.race-car-condition strong{font-size:var(--t-body,12px);font-weight:var(--w-med,600);color:#d6fff1}
.race-car-condition small{margin-top:var(--s1,4px);font-size:var(--t-small,11px);color:#b8cec5;line-height:1.3}
.race-car-condition>span>i{display:block;margin-top:var(--s1,4px);height:4px;border-radius:2px;background:#ffffff20;overflow:hidden}
.race-car-condition>span>i>i{display:block;height:100%;background:var(--sel-line,#54e8cf)}
.race-car-condition>.icon{color:#8ef0d5;flex-shrink:0}
.race-app .race-car-condition.needs-repair{border-color:#bc904b;background:#342c1f}
.race-car-condition.needs-repair>span>i>i{background:#ffc768}
.race-wallet-balance{display:flex;align-items:center;padding:var(--card-pad,12px);border:1px solid var(--card-line,#2a3d45);background:var(--card-bg,#102b25);border-radius:var(--card-r,12px);color:#a2f4da}
.race-wallet-balance>*+*{margin-left:var(--s4,12px)}
.race-wallet-balance small,.race-wallet-balance strong{display:block}
.race-wallet-balance small{font-size:var(--t-small,11px);color:#b0cbc1}
.race-wallet-balance strong{font-size:var(--n-lg,24px);font-weight:var(--w-body,400);letter-spacing:var(--ls-tight,-.02em);margin-top:var(--s1,4px);overflow-wrap:anywhere}
.race-wallet-balance>div{min-width:0}
.race-wallet-packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3,8px)}
.race-app .race-wallet-packs>a{display:flex;flex-direction:column;align-items:flex-start;padding:var(--row-pad,8px 12px);min-height:var(--ctl-h-tile,56px);border:1px solid var(--ctl-line,#4e776b);border-radius:var(--ctl-r,10px);background:var(--ctl-bg,#142923);line-height:1.3;white-space:normal}
.race-app .race-wallet-packs>a>*+*{margin-top:var(--s1,4px)}
.race-wallet-packs strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-wallet-packs span{font-size:var(--t-small,11px);color:#c0d8ce}
.race-wallet-packs small{display:flex;align-items:center;font-size:var(--t-small,11px);color:#8ceacf}
.race-wallet-packs small>*+*{margin-left:var(--s2,6px)}
.race-wallet-packs>.icon{color:var(--sel-line,#54e8cf)}
.race-wallet-shop{font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-wallet-shop>*+*{margin-left:var(--s3,8px)}
.race-wallet-shop>.icon:last-child{margin-left:auto}

.race-maintenance-parts dt{display:flex;align-items:center;font-size:var(--t-body,12px)}
.race-maintenance-parts dt>*+*{margin-left:var(--s2,6px)}
.race-maintenance-parts dt>.icon{color:#88ceba;flex-shrink:0}
.race-maintenance-parts dd{display:flex;flex-direction:column;font-size:var(--t-body,12px);min-width:100px}
.race-maintenance-parts dd>*+*{margin-top:var(--s1,4px)}
.race-maintenance-parts progress{height:4px;width:100%;appearance:none;border:0;background:#243f34;border-radius:2px;accent-color:#54e8cf}
.race-maintenance-parts progress::-webkit-progress-bar{background:#243f34;border-radius:2px}
.race-maintenance-parts progress::-webkit-progress-value{background:#54e8cf;border-radius:2px}
.race-maintenance-parts .needs-repair{color:#ffd296}
.race-maintenance-parts .needs-repair progress{accent-color:#ffc768}
.race-maintenance-parts .needs-repair progress::-webkit-progress-value{background:#ffc768}

.race-arcade-garage>.race-primary{display:flex;align-items:center;justify-content:center;min-height:var(--ctl-h-lg,52px)}
.race-arcade-garage>.race-primary>*+*{margin-left:var(--s2,6px)}
.race-equipment-tabs.race-cosmetic-tabs{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.race-cosmetic-tabs>button{min-width:48px;min-height:var(--ctl-h,50px);white-space:normal;line-height:1.2}
.race-cosmetic-tile[data-reward-only=true]{border-color:#755484}
.race-cosmetic-tile[data-reward-only=true]:disabled{opacity:.78}
.race-cosmetic-earned{font-size:var(--t-small,11px);line-height:1.25;color:#d8b9eb}
.race-wallet-tabs,.race-reward-periods{display:grid;gap:var(--s2,6px);grid-template-columns:repeat(3,minmax(0,1fr));margin:var(--s3,8px) 0}
.race-reward-periods{grid-template-columns:repeat(2,minmax(0,1fr))}
.race-wallet-tabs>button,.race-reward-periods>button{min-width:48px;min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);padding:var(--s2,6px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);white-space:normal}
.race-wallet-tabs>button[aria-pressed=true],.race-reward-periods>button[aria-pressed=true]{background:var(--sel-bg,#153b32);border-color:var(--sel-line,#54e8cf);color:var(--sel-ink,#e8fff8)}
.race-wallet-page .race-wallet-balance{padding:var(--row-pad,8px 12px)}
.race-wallet-page .race-rewards.is-embedded{margin:0;padding:0;border:0;background:none}
.race-rewards.is-embedded .race-reward-group{margin:var(--s3,8px) 0}
.race-wallet-buy{margin:var(--s3,8px) 0}
.race-wallet-buy>summary{min-height:var(--ctl-h,50px)}
.race-wallet-buy .race-wallet-packs{margin:var(--s3,8px) 0}
.race-wallet-buy .race-wallet-packs>a>.icon{display:none}
.race-wallet-history-heading{display:flex;align-items:center;justify-content:space-between}
.race-wallet-history-heading>*+*{margin-left:var(--s3,8px)}
.race-wallet-history-heading>strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600)}
.race-wallet-history-heading>button{display:grid;place-items:center;min-width:48px;min-height:var(--ctl-h-min,48px);border-radius:var(--ctl-r,10px);padding:0 var(--s3,8px)}
.race-wallet-history-list{list-style:none;margin:0;padding:0}
.race-wallet-history-list>li{display:flex;justify-content:space-between;align-items:center;min-height:var(--ctl-h-tile,56px);padding:var(--s3,8px) 0;border-bottom:1px solid var(--card-line,#42625780)}
.race-wallet-history-list>li>*+*{margin-left:var(--s3,8px)}
.race-wallet-history-list>li>div{display:flex;flex-direction:column;min-width:0}
.race-wallet-history-list>li>div>*+*{margin-top:var(--s1,4px)}
.race-wallet-history-list strong{font-size:var(--t-body,12px);font-weight:var(--w-med,600);line-height:1.25;overflow-wrap:anywhere}
.race-wallet-history-list time,.race-wallet-history-list small{font-size:var(--t-small,11px);line-height:1.2;color:#b4cac3}
.race-wallet-movement{text-align:end;flex-shrink:0;max-width:52%}
.race-wallet-movement.is-credit>strong{color:#88e6be}
.race-wallet-movement.is-debit>strong{color:#ffd0a8}
.race-wallet-history-pages{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s2,6px);margin-top:var(--s3,8px)}
.race-wallet-history-pages>button{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);padding:var(--s2,6px);white-space:normal;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-wallet-history-pages>button>*+*{margin-left:var(--s1,4px)}
.race-wallet-history-pages>span{font-size:var(--t-body,12px)}
.race-wallet-history-error{font-size:var(--t-body,12px);color:#ffd0a8;line-height:1.4}
.race-wallet-history-error>button{min-height:var(--ctl-h-min,48px);min-width:48px;border-radius:var(--ctl-r,10px);padding:0 var(--s3,8px);margin-left:var(--s2,6px)}
/* A seasonal paint says so on its tile, in the season's colour. */
.race-cosmetic-tile .race-cosmetic-season{display:block;font-style:normal;font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase;color:#ffb15c}
.race-cosmetic-motif{font-style:normal;font-size:20px;line-height:1;filter:drop-shadow(0 1px 2px #00000066)}

/* The first arrival of the day: daily and weekly tasks at a glance. It floats
   over the canvas, so it is the one layer here that carries a shadow. */
.race-day-start{position:absolute;z-index:9;left:24px;top:236px;width:min(420px,calc(100% - 48px));max-height:calc(100% - 236px - 168px);overflow:auto;overscroll-behavior:contain;padding:var(--card-pad,12px);border:1px solid var(--card-line,#3c5560);border-radius:var(--card-r,12px);background:var(--card-bg,#0e1a23f2);box-shadow:var(--float-shadow,0 8px 24px rgba(4,9,11,.45));color:#e6f7f3}
.race-day-start header{display:flex;align-items:flex-start;margin-bottom:var(--s3,8px)}
.race-day-start header>span{flex:1;min-width:0;display:flex;flex-direction:column}
.race-day-start header strong{font-size:var(--t-title,15px);font-weight:var(--w-med,600);line-height:1.2}
.race-day-start header small{margin-top:var(--s1,4px);font-size:var(--t-small,11px);color:#9fd2c8}
.race-day-start header button{width:48px;height:48px;min-height:var(--ctl-h-min,48px);padding:0;border-radius:var(--ctl-r,10px);border:1px solid var(--ctl-line,#2f4b4d);background:var(--ctl-bg,#132226);color:#d6f3ee}
.race-day-start-periods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3,8px)}
.race-day-start article{min-width:0;padding:var(--s3,8px);border:1px solid var(--card-line,#2a4149);border-radius:var(--ctl-r,10px);background:var(--card-bg-raise,#101c22)}
.race-day-start h4{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--s2,6px);font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase;color:#9fd2c8}
.race-day-start h4 b{font-size:var(--t-small,11px);color:var(--sel-line,#54e8cf);letter-spacing:0;text-transform:none}
.race-day-start-track{height:4px;border-radius:2px;background:#20333a;overflow:hidden}
.race-day-start-track i{display:block;height:100%;background:var(--sel-line,#54e8cf)}
.race-day-start ul{list-style:none;margin:var(--s2,6px) 0 0;padding:0}
.race-day-start li{display:flex;align-items:center;padding:var(--s1,4px) 0;font-size:var(--t-body,12px);color:#cfe8e3}
.race-day-start li>.icon{flex-shrink:0;margin-right:var(--s2,6px)}
.race-day-start li>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.race-day-start li>b{margin-left:var(--s2,6px);font-size:var(--t-small,11px);font-weight:var(--w-med,600);color:#9fd2c8}
.race-day-start li.is-done{color:#8fe8d3}
.race-day-start li.is-done>.icon{color:var(--sel-line,#54e8cf)}
.race-day-start footer{display:flex;margin-top:var(--s3,8px)}
.race-day-start footer>*+*{margin-left:var(--s3,8px)}
.race-day-start footer button{flex:1;min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-day-start footer .race-primary{min-height:var(--ctl-h-lg,52px);font-weight:var(--w-strong,700)}
.race-day-start footer button>.icon{margin-right:var(--s2,6px)}
/* Chrome 79 has no logical properties: mirror the physical margins for RTL. */
[dir=rtl] .race-arcade-title>*+*,[dir=rtl] .race-arcade-next>*+*,[dir=rtl] .race-conditions>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-arcade-title>b{margin-left:0;margin-right:auto}
[dir=rtl] .race-arcade-earned>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-arcade-league li>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-conditions span{margin-left:0;margin-right:auto}
[dir=rtl] .race-arcade-garage summary>b{margin-left:0;margin-right:auto}
[dir=rtl] .race-equipment-levels>*+*{margin-left:0;margin-right:var(--s4,12px)}
[dir=rtl] .race-equipment-stats>div>*+*{margin-left:0;margin-right:var(--s4,12px)}
[dir=rtl] @media(max-width:420px){margin-left:0;margin-right:0}
[dir=rtl] .race-equipment-levels>*+*{margin-left:0;margin-right:0}
[dir=rtl] .race-course-unlock>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-arcade-garage .race-upgrade-heading>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-upgrade-comparison .race-equipment-levels>*+*{margin-left:0;margin-right:0}
[dir=rtl] .race-upgrade-purchase>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-equipment-heading>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-equipment-heading>b{margin-left:0;margin-right:auto}
[dir=rtl] .race-upgrade-advice>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-upgrade-advice button>.icon{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-rewards summary>b{margin-left:0;margin-right:auto}
[dir=rtl] .race-signin-reward>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-reward-earned>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-reward-goal>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-reward-goal>b>*+*{margin-left:0;margin-right:var(--s1,4px)}
[dir=rtl] .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-app .race-car-condition>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-wallet-balance>*+*{margin-left:0;margin-right:var(--s4,12px)}
[dir=rtl] .race-wallet-packs small>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-wallet-shop>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-wallet-shop>.icon:last-child{margin-left:0;margin-right:auto}
[dir=rtl] .race-maintenance-parts dt>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-arcade-garage>.race-primary>*+*{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-wallet-history-heading>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-wallet-history-list>li>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-wallet-history-pages>button>*+*{margin-left:0;margin-right:var(--s1,4px)}
[dir=rtl] .race-wallet-history-error>button{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-day-start li>b{margin-left:0;margin-right:var(--s2,6px)}
[dir=rtl] .race-day-start footer>*+*{margin-left:0;margin-right:var(--s3,8px)}
[dir=rtl] .race-upgrade-purchase>.race-primary>.icon{margin-right:0;margin-left:var(--s2,6px)}
[dir=rtl] .race-signin-reward button>.icon{margin-right:0;margin-left:var(--s2,6px)}
[dir=rtl] .race-day-start li>.icon{margin-right:0;margin-left:var(--s2,6px)}
[dir=rtl] .race-day-start footer button>.icon{margin-right:0;margin-left:var(--s2,6px)}

.race-attachment-details{font-size:var(--t-body,12px);line-height:1.45;overflow-wrap:anywhere}
.race-attachment-details p{margin:var(--s3,8px) 0}

/* racing-coins.css */
/* Coin feedback. The overlay is fixed, never takes pointer events and sits
   below notices (z-index 20) so it can never cover a control. Every animation
   finishes inside 1.1 s, and reduced motion keeps the count-up while dropping
   the flight. Loaded after racing-arcade so it can tint the wallet counter. */
.race-coin-fx{position:fixed;inset:0;z-index:18;pointer-events:none;overflow:hidden;contain:strict}
.race-coin-burst{position:absolute;width:0;height:0}
.race-coin-burst>i{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
 background:radial-gradient(circle at 34% 28%,#fff3bd 8%,#ffd34d 46%,#d4922a 100%);
 box-shadow:0 0 0 1px #7a5310aa,0 2px 5px #0006;opacity:0;
 animation:race-coin-fly .92s cubic-bezier(.34,.62,.26,1) var(--coin-delay,0ms) forwards}
.race-coin-burst>i::after{content:"";position:absolute;left:5px;top:3.5px;width:6px;height:9px;border-radius:2px;
 background:linear-gradient(180deg,#8a5f16,#c58c22);opacity:.75}
.race-coin-burst>b{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;
 padding:3px 11px;border-radius:999px;border:1px solid #ffd97a66;background:#10181bea;
 color:#ffdf92;font-size:14px;font-weight:800;letter-spacing:.4px;
 animation:race-coin-label 1.05s ease-out forwards}
.race-coin-burst[data-kind=spend]>i{background:radial-gradient(circle at 34% 28%,#e7f2f5 8%,#9fb6c2 46%,#5d7481 100%)}
.race-coin-burst[data-kind=spend]>b{border-color:#9fc9d666;color:#cfe6ef}

@keyframes race-coin-fly{
 0%{opacity:0;transform:translate(0,0) scale(.35)}
 14%{opacity:1;transform:translate(var(--coin-sx,0),var(--coin-sy,-40px)) scale(1.12)}
 100%{opacity:0;transform:translate(var(--coin-tx,0),var(--coin-ty,0)) scale(.45)}
}
@keyframes race-coin-label{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.82)}
 18%{opacity:1;transform:translate(-50%,-160%) scale(1.06)}
 72%{opacity:1;transform:translate(-50%,-230%) scale(1)}
 100%{opacity:0;transform:translate(-50%,-320%) scale(.96)}
}

/* The counter the coins land on acknowledges the hit. */
[data-coin-pulse]{animation:race-coin-hit .62s ease-out}
[data-coin-pulse=earn]{box-shadow:0 0 0 2px #ffd34d99,0 0 18px #ffc83d55}
[data-coin-pulse=spend]{box-shadow:0 0 0 2px #9fc9d688}
[data-coin-pulse=earn]>b{color:#ffdf92}
@keyframes race-coin-hit{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
.race-coin-tally{font-variant-numeric:tabular-nums}

/* A purchased tile confirms itself where the driver is already looking. */
.race-cosmetic-tile[data-coin-bought=true],.race-tyre-grid button[data-coin-bought=true]{animation:race-coin-bought .7s ease-out}
@keyframes race-coin-bought{0%{box-shadow:inset 0 0 0 1px #54e8cf,0 0 0 0 #54e8cf88}45%{box-shadow:inset 0 0 0 2px #8ef7e2,0 0 0 8px #54e8cf00}100%{box-shadow:inset 0 0 0 1px #54e8cf}}

.race-display[data-reduced-motion="true"] .race-coin-burst>i{display:none}
.race-display[data-reduced-motion="true"] .race-coin-burst>b{animation-duration:.5s}
[data-reduced-motion="true"] [data-coin-pulse]{animation:none}
@media(prefers-reduced-motion:reduce){
 .race-coin-burst>i{display:none}
 .race-coin-burst>b{animation:race-coin-label .6s ease-out forwards}
 [data-coin-pulse]{animation:none}
}

/* The car screen is further away: bigger coins, bigger label. */
html[data-tesla="true"] .race-coin-burst>i{width:20px;height:20px;margin:-10px 0 0 -10px}
html[data-tesla="true"] .race-coin-burst>b{font-size:17px;padding:4px 14px}

/* The earned-customization ladder, shown with the rewards it sits beside. */
.race-drive-unlocks{margin-top:14px;padding:12px;border:1px solid #2b4842;border-radius:12px;background:#0e1a1899}
.race-drive-unlocks>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.race-drive-unlocks>header span{display:flex;align-items:center;gap:7px;color:#d8fff4}
.race-drive-unlocks>header b{font-size:12px;color:#8fd8c6;white-space:nowrap}
.race-drive-unlocks>p{margin:0 0 10px}
.race-drive-unlocks ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.race-drive-unlocks li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;background:#132320}
.race-drive-unlocks li>span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:#e6fff8;min-width:0}
.race-drive-unlocks li>span small{font-size:11px;color:#8fb5ac}
.race-drive-unlocks li>b{display:flex;align-items:center;gap:4px;font-size:12px;color:#b5efd9;white-space:nowrap}
.race-drive-unlocks li>progress{grid-column:1/-1;width:100%;height:4px}
.race-drive-unlocks li.is-earned{background:#14302a}
.race-drive-unlocks li.is-earned>b{color:#6ff0cd}
html[data-tesla="true"] .race-drive-unlocks li>span{font-size:15px}
html[data-tesla="true"] .race-drive-unlocks li>span small{font-size:13px}

/* Artwork worn over the paint: packs, motorsport designs and the flag picker. */
.race-artwork{display:grid;gap:12px}
.race-artwork-clear{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:9px}
.race-artwork-pack{padding:10px;border:1px solid #2b4842;border-radius:11px;background:#0e1a1899;display:grid;gap:9px}
.race-artwork-pack>header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.race-artwork-pack>header span{display:flex;align-items:baseline;gap:8px;color:#e6fff8}
.race-artwork-pack>header em{font-style:normal;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#6ff0cd}
.race-artwork-pack>header button{display:inline-flex;align-items:center;gap:6px;min-height:40px;white-space:nowrap}
.race-artwork-glyph{font-size:22px;line-height:1.1}
.race-artwork-search{display:flex;align-items:center;gap:7px;padding:4px 10px;border:1px solid #2f4f49;border-radius:9px;background:#0b1614}
.race-artwork-search input{flex:1;min-width:0;min-height:38px;border:0;background:transparent;color:#e6fff8;font:inherit}
.race-artwork-search input:focus{outline:none}
.race-artwork-flags{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:7px;max-height:320px;overflow:auto}
.race-artwork-flags button{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 8px;border-radius:8px;text-align:left}
.race-artwork-flags button>span{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.race-artwork-flags button>i{position:absolute;right:4px;top:4px;display:grid;place-items:center;border-radius:50%;background:#0b201b;color:#bdffeb;padding:2px}
.race-artwork-flags button[aria-pressed=true]{box-shadow:inset 0 0 0 1px #54e8cf}
.race-flag-swatch{flex-shrink:0;border-radius:2px}
html[data-tesla="true"] .race-artwork-flags{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:380px}
html[data-tesla="true"] .race-artwork-flags button{min-height:52px}
html[data-tesla="true"] .race-artwork-flags button>span{font-size:14px}
html[data-tesla="true"] .race-artwork-glyph{font-size:26px}

/* A part that trades something away reads as a trade, not as a silent loss. */
.race-upgrade-stats dd[data-loss=true] b{color:#ffb15c}
.race-upgrade-stats dd[data-loss=true] .race-upgrade-stat-gain{background:#8a5a2c}

/* Drive's artwork picker: a glyph per design, dimmed until it is earned. */
.editor-artwork-glyph{display:grid;place-items:center;width:100%;height:38px;font-size:24px;line-height:1}
.editor-artwork-glyph.is-locked{opacity:.45;filter:grayscale(1)}
.editor-artwork .editor-option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor-artwork-earned{margin:0 0 8px;font-size:13px;opacity:.8}
.editor-artwork-earned[data-pending]{opacity:.55}
/* Racing is where all of this artwork comes from and it costs nothing to play,
   so the invitation sits above the grid rather than inside the collapsed list
   of designs the driver cannot use yet. */
.editor-race-promo{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:12px 14px;
 border:1px solid #ffffff1f;border-radius:12px;background:linear-gradient(135deg,#1d6b5c33,#12161a66)}
.editor-race-promo>svg{flex:none;margin-top:2px;opacity:.9}
.editor-race-promo strong{display:block;font-size:14px}
.editor-race-promo p{margin:4px 0 0;font-size:13px;opacity:.78;line-height:1.45}
.editor-race-cta{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:7px 12px;
 border-radius:999px;background:#2ad0ae;color:#06201b;font-size:13px;font-weight:600;text-decoration:none}
.editor-race-cta:hover{background:#4fe0c2}
[dir=rtl] .editor-race-cta>svg{transform:scaleX(-1)}
html[data-tesla="true"] .editor-race-promo p{font-size:14px}
html[data-tesla="true"] .editor-artwork-glyph{height:46px;font-size:28px}

/* ===== Currency is gold, not mint. Mint means selected, live, yours; a coin
   balance is none of those, and reading a number as state is how a wallet
   gets mistaken for a status pill. These tint the static coin surfaces to the
   same gold the burst above already flies in. ===== */
.race-display .topbar .race-wallet-trigger{border-color:#8a6f2e;border-color:var(--race-coin-dim,#8a6f2e);color:#f4c95d;color:var(--race-coin,#f4c95d)}
.race-display .topbar .race-wallet-trigger>.icon{color:#f4c95d;color:var(--race-coin,#f4c95d)}
.race-wallet-balance>.icon,.race-wallet-balance b{color:#f4c95d;color:var(--race-coin,#f4c95d)}
.race-reward-earned,.race-reward-earned>.icon{color:#f4c95d;color:var(--race-coin,#f4c95d)}
.race-result-receipt b,.race-share-earned,.race-share-earned>.icon{color:#f4c95d;color:var(--race-coin,#f4c95d)}
.race-coin-price,.race-arcade-earned b{color:#f4c95d;color:var(--race-coin,#f4c95d)}
/* A coin price on a button keeps the button's own ink: gold on mint is mud. */
.race-primary .race-coin-price,.race-primary b{color:inherit}

.race-season-pass{min-width:0;padding:12px 0}
.race-season-pass h3 small{display:block;font-size:12px}
.race-season-pass p{line-height:1.5;overflow-wrap:break-word}
.race-season-pass button,.race-privacy-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:8px 12px}
.race-season-pass button{margin:4px 8px 4px 0}
.race-season-pass ol{list-style:none;margin:12px 0;padding:0}
.race-season-pass li{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.race-season-pass li span{grid-column:1;overflow-wrap:break-word}
.race-season-pass li small{grid-column:2;grid-row:1 / 3;align-self:center;padding-inline-start:8px}
.race-season-pass li[data-claimed]{opacity:.7}

/* racing-league.css */
/* Seasonal League remains inside Drive's dark shell. No extra blur or canvas.
   Chrome 79: grid gap only, no flex gap; tokens with literal fallbacks. */
.race-app[data-league-theme="halloween"]{--race-accent:#f8af65}
.race-app[data-league-theme="stormbreak"]{--race-accent:#dfc77b}
.race-app[data-league-theme="frostfire"]{--race-accent:#8edcf4}
.race-league{min-width:0;display:grid;gap:var(--s3,8px);color:#e5eef2}
.race-league-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3,8px);align-items:center;min-width:0}
.race-league-heading>.icon{color:var(--race-accent,#54e8cf)}
.race-league-heading>div{min-width:0}
.race-league-heading h2{font-size:var(--t-title,15px);font-weight:var(--w-med,600);line-height:1.2}
.race-league-heading small,.race-league-heading p{font-size:var(--t-small,11px);color:#aac0cc}
.race-league-heading button{min-width:48px;min-height:var(--ctl-h-min,48px);padding:0 var(--s3,8px);border-radius:var(--ctl-r,10px)}
.race-league-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2,6px)}
.race-league-stats>span{padding:var(--s3,8px);border:1px solid var(--card-line,#34414c);background:var(--card-bg,#101c25);border-radius:var(--ctl-r,10px);display:grid;gap:var(--s1,4px)}
.race-league-stats small{font-size:var(--t-micro,10px);font-weight:var(--w-med,600);letter-spacing:var(--ls-caps,.06em);text-transform:uppercase;color:#adc3cf}
.race-league-stats b{font-size:var(--n-sm,20px);font-weight:var(--w-body,400);letter-spacing:var(--ls-tight,-.02em);font-variant-numeric:tabular-nums}
.race-league-tabs{display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));gap:var(--s1,4px)}
.race-league-tabs button{display:grid;grid-auto-flow:column;place-items:center;gap:var(--s2,6px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);padding:0 var(--s2,6px);min-height:var(--ctl-h,50px);border-radius:var(--ctl-r,10px)}
.race-league-tabs button[aria-pressed="true"]{border-color:var(--race-accent,#54e8cf);background:var(--sel-bg,#23333e);color:var(--sel-ink,#e8fff8)}
.race-app .race-league-rule{font-size:var(--t-small,11px);color:#b3c8d4;line-height:1.4}
.race-league-races{display:grid;gap:var(--s1,4px);padding:0;margin:0;list-style:none}
.race-league-races li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3,8px);align-items:center;border:1px solid var(--card-line,#30414b);border-radius:var(--ctl-r,10px);padding:var(--row-pad,8px 12px);background:var(--card-bg,#101a23)}
.race-league-races li>div{display:grid;gap:var(--s1,4px);min-width:0}
.race-league-races strong{font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-league-races span,.race-league-races small{font-size:var(--t-small,11px);color:#b3c8d4}
.race-league-races li[data-state="next"]{border-color:var(--race-accent,#54e8cf);background:var(--sel-bg,#253039)}
.race-league-races li[data-state="resolved"]>.icon{color:#7be4b5}
.race-league-pagination{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-body,12px)}
.race-league-pagination button{min-width:48px;min-height:var(--ctl-h-min,48px);padding:0 var(--s3,8px);border-radius:var(--ctl-r,10px)}
.race-league-confirm{display:flex;flex-wrap:wrap;padding-top:var(--s3,8px)}
.race-league-confirm>*{margin:0 var(--s2,6px) var(--s2,6px) 0}
[dir=rtl] .race-league-confirm>*{margin:0 0 var(--s2,6px) var(--s2,6px)}
.race-league-confirm strong{flex-basis:100%;font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-league-confirm button{min-height:var(--ctl-h,50px);padding:0 var(--s4,12px);border-radius:var(--ctl-r,10px);font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-league-table{padding:0;margin:0;list-style:none;display:grid;gap:var(--s1,4px)}
.race-league-table li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3,8px);align-items:center;padding:var(--row-pad,8px 12px);background:var(--card-bg,#13212b);border:1px solid transparent;border-radius:var(--ctl-r,10px);font-size:var(--t-body,12px)}
.race-league-table li>span{display:grid;gap:var(--s1,4px);min-width:0}
.race-league-table small{font-size:var(--t-small,11px);color:#b2c5cf}
.race-league-table .is-self{border-color:var(--sel-line,#54e8cf);background:var(--sel-bg,#12282b)}
.race-league-rewards{width:100%;border-collapse:collapse;font-size:var(--t-body,12px);text-align:start}
.race-league-rewards th,.race-league-rewards td{border-bottom:1px solid var(--card-line,#31414b);padding:var(--s3,8px) var(--s1,4px);text-align:start}
.race-league-rewards th{font-weight:var(--w-med,600)}
.race-league-rewards td>span{display:block;font-size:var(--t-small,11px)}
.race-league-rewards .icon{vertical-align:middle;margin-right:var(--s1,4px);color:#f7cb7b}
.race-league-challenge{display:grid;gap:var(--s1,4px)}
.race-league-challenge strong{display:flex;align-items:center;font-size:var(--t-body,12px);font-weight:var(--w-med,600)}
.race-league-challenge strong>.icon{margin-right:var(--s2,6px)}
[dir=rtl] .race-league-challenge strong>.icon{margin-right:0;margin-left:var(--s2,6px)}
.race-league-challenge p{font-size:var(--t-small,11px);line-height:1.4}
.race-league-challenge>div{display:flex;flex-wrap:wrap;font-size:var(--t-small,11px)}
.race-league-challenge>div>span{padding:var(--s1,4px) var(--s2,6px);margin:0 var(--s2,6px) var(--s1,4px) 0;background:var(--card-bg,#142630);border:1px solid var(--card-line,#36515e);border-radius:var(--ctl-r,10px)}
[dir=rtl] .race-league-challenge>div>span{margin:0 0 var(--s1,4px) var(--s2,6px)}
.race-league-challenge.live p{display:none}
.race-league-challenge.live{margin-top:var(--s2,6px);padding:var(--s3,8px);background:#0a131bdc;border:1px solid var(--card-line,#30434f);border-radius:var(--ctl-r,10px)}
/* A plain card: the offer on this screen is the upgrade advice, not the receipt. */
.race-result-receipt{display:flex;flex-wrap:wrap;padding:var(--row-pad,8px 12px);background:var(--card-bg,#152a27);border:1px solid var(--card-line,#2a3d45);border-radius:var(--ctl-r,10px);font-size:var(--t-body,12px)}
.race-result-receipt>span{display:flex;align-items:center;margin:0 var(--s3,8px) var(--s1,4px) 0}
[dir=rtl] .race-result-receipt>span{margin:0 0 var(--s1,4px) var(--s3,8px)}
.race-result-receipt>span>.icon{margin-right:var(--s1,4px)}
[dir=rtl] .race-result-receipt>span>.icon{margin-right:0;margin-left:var(--s1,4px)}
.race-home .race-modes{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:500px){.race-home .race-modes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The tier and field for each race: part of the challenge, shown with it. */
.race-league-races li div em{display:block;font-style:normal;font-size:var(--t-small,11px);opacity:.78}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] .race-league-rewards .icon{margin-right:0;margin-left:var(--s1,4px)}

/* racing-i18n.css */
/* Language selection never reloads the race or changes physical steering.
   Flex gap is zero on the car's Chrome 79, so every row here spaces itself
   with an explicit margin and an [dir=rtl] mirror. */
.race-language{position:relative;flex:none;min-width:var(--ctl-h-min,48px)}
.race-language-control{position:relative;display:flex;align-items:center;justify-content:center;min-width:var(--ctl-h,50px);min-height:var(--ctl-h,50px);padding:0 var(--s3,8px);border:1px solid var(--ctl-line,#294249);border-radius:var(--ctl-r,10px);color:#c6ddd9;font-size:var(--t-ctl,13px);font-weight:var(--w-med,600)}
.race-language-control>.icon+span{margin-left:var(--s2,6px)}
[dir=rtl] .race-language-control>.icon+span{margin-left:0;margin-right:var(--s2,6px)}
/* The invisible select is the touch target; the styled chip behind it is only
   the picture. `width/height:100%` resolve against the chip's padding box, so a
   48px chip with a 1px border hands the target 46px — under the floor on both
   axes once the bar is short. Both are floored here, and the 1px of overflow on
   a transparent control costs nothing. */
.race-language-control select{position:absolute;top:0;left:0;width:100%;height:100%;min-width:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px);opacity:0;cursor:pointer}
.race-language-control:focus-within{outline:3px solid var(--focus,#54e8cf);outline-offset:2px}
.race-language.is-disabled .race-language-control{opacity:.5}
.race-language-error{position:absolute;left:0;top:56px;width:220px;padding:var(--card-pad,12px);border:1px solid var(--card-line,#ffffff1f);border-radius:var(--card-r,12px);background:var(--card-bg,#0c181e);box-shadow:var(--float-shadow,0 12px 34px #06121e66);color:#f0e2c4;z-index:95;font-size:var(--t-body,12px)}
[dir=rtl] .race-language-error{left:auto;right:0}
.race-app .race-touch-controls,.race-app .race-joystick-controls{direction:ltr}
.race-app .race-code,.race-app .race-pair-code,.race-app .race-speed,.race-app .race-nitro-charge{direction:ltr;unicode-bidi:isolate}
.race-app .race-icon-action>span{min-width:0;overflow-wrap:break-word;overflow-wrap:anywhere}
@media(max-width:960px){.race-display .brand-logo{max-width:56px}.race-language-control{padding:0 var(--s1,4px)}.race-language-control>.icon{display:none}
 .race-display .brand{gap:0}
 .race-display .brand>*+*{margin-left:var(--s2,6px)}
 [dir=rtl] .race-display .brand>*+*{margin-left:0;margin-right:var(--s2,6px)}
}
/* Compact actions must fit before translating their labels. Keep the same
   icon targets in the garage and live shell, independent of user-agent. */
@media(max-width:960px){
 .race-display .topbar .top-actions{gap:0;flex:none}
 .race-display .topbar .top-actions>*+*{margin-left:var(--s2,6px)}
 [dir=rtl] .race-display .topbar .top-actions>*+*{margin-left:0;margin-right:var(--s2,6px)}
 .race-display .topbar .top-actions>button,.race-display .topbar .top-actions>a,.race-display .topbar .race-audio-trigger{width:var(--ctl-h-min,48px);min-width:var(--ctl-h-min,48px);height:var(--ctl-h-min,48px);min-height:var(--ctl-h-min,48px);padding:0;flex:none;justify-content:center;white-space:nowrap}
 .race-display .topbar .top-actions>button>span,.race-display .topbar .top-actions>a>span,.race-display .topbar .race-audio-trigger>span,.race-display .topbar .race-audio-trigger>i{display:none}
 .race-display .topbar .top-actions>.experience-switch>.icon{display:block;margin:0}
 .race-display .topbar .session-pill em{display:none}
}

/* Keep the wallet amount visible even when compact actions hide their labels. */
.race-display .topbar .top-actions>.race-wallet-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:auto;min-width:56px;max-width:90px;min-height:var(--ctl-h-min,48px);padding:var(--s1,4px) var(--s2,6px);background:#183c31;border:1px solid #518f7d;border-radius:var(--ctl-r,10px);color:#baffdf}
.race-wallet-trigger>b{font-size:var(--n-sm,20px);font-weight:var(--w-body,400);letter-spacing:var(--ls-tight,-.02em);line-height:1.1;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* --- The picker is a <label>, and that was the bug ------------------------
   `.race-app label{display:grid}` in racing.css is (0,1,1); the flex rule at
   the top of this sheet is (0,1,0), so the generic label rule won and the mark
   and the code stacked, filling the bar from its top edge to its bottom one.
   Naming the control with the app class settles the cascade rather than
   reaching for !important, and the row below never touches the bar's edges
   because its height is the smaller of the touch floor and the bar itself. */
.race-app.race-display .race-language .race-language-control,
.race-app .race-language-control,.race-display .race-language-control{
 display:flex;align-items:center;justify-content:center;
 width:auto;min-width:var(--ctl-h-min,48px);
 /* Never taller than the bar it sits in, never under the touch floor while
    the bar has room for it. */
 height:min(var(--ctl-h-min,48px),var(--shell-header,64px));
 min-height:0;
 padding:0 var(--s3,8px);gap:0;
}
/* A flag is texture, not the label: the native language name in the list is
   what identifies a language, so this is sized to be recognised at a glance
   and no more. The hairline keeps white flags off a dark bar. */
.race-language-control>.language-flag{flex:none;border-radius:2px;box-shadow:0 0 0 1px #ffffff33}
.race-language-code{font-size:var(--t-ctl,13px);font-weight:var(--w-med,600);letter-spacing:.04em;line-height:1;white-space:nowrap}
.race-language-control>.language-flag+.race-language-code{margin-left:var(--s2,6px)}
[dir=rtl] .race-language-control>.language-flag+.race-language-code{margin-left:0;margin-right:var(--s2,6px)}
/* Shortest screens keep the flag and drop the code: two marks for one choice
   is the first thing to give up when the bar is 46px tall. */
html[data-density="ultra"] .race-language-control>.language-flag+.race-language-code{display:none}
html[data-density="ultra"] .race-language-control{padding:0 var(--s2,6px)}

/* --- Narrow top bar ------------------------------------------------------- */
/* The language chip lives inside .brand, but the bar's first track was
   minmax(0,1fr): under 430px it resolved to 42px against a 66px chip, which
   then printed straight over the audio button. The brand track is sized by
   its content instead, and the actions take what is left and scroll rather
   than shrinking below the 48px touch floor or landing on their neighbour.
   Three classes, so it also outranks the [data-tesla] rule in responsive.css. */
@media(max-width:700px){
 .race-app.race-display .topbar{grid-template-columns:auto minmax(0,1fr);column-gap:var(--s2,6px)}
 /* Place both tracks explicitly: .session-pill is still a grid item at zero
    width, so auto-placement pushed the actions into an implicit third column
    that no track constrained, and the group overflowed back over the brand. */
 .race-app.race-display .topbar .brand{min-width:0;flex:none;grid-column:1;grid-row:1}
 .race-app.race-display .topbar .session-pill{display:none}
 .race-app.race-display .topbar .top-actions{grid-column:2;grid-row:1;justify-self:stretch}
 /* Right-aligned by an auto margin, not justify-content:flex-end — on an
    overflowing scroll container that pushes the first buttons out past the
    start edge, where no scrolling can reach them and the brand already is. */
 .race-app.race-display .topbar .top-actions{
  min-width:0;justify-content:flex-start;flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
 }
 .race-app.race-display .topbar .top-actions>:first-child{margin-left:auto}
 [dir=rtl] .race-app.race-display .topbar .top-actions>:first-child{margin-left:0;margin-right:auto}
 .race-app.race-display .topbar .top-actions::-webkit-scrollbar{display:none}
}
/* Smallest phones: the flag alone carries the language, so the code goes. */
@media(max-width:430px){
 .race-app.race-display .topbar .race-language-code{display:none}
 .race-app.race-display .topbar .brand-logo{width:48px}
}

/* Under 430px the action strip is always wider than its track, so the last
   action sits past the edge. It scrolls, but nothing said so — a soft edge is
   the only affordance a toolbar can carry without spending a row on arrows.
   Mask is paint only: the button under the fade stays tappable. */
@media(max-width:430px){
 .race-app.race-display .topbar .top-actions{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 22px),transparent);
 }
 [dir=rtl] .race-app.race-display .topbar .top-actions{
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 22px),transparent);
 }
}

/* racing-mobile.css */
/* Racing in the hand. Everything here is scoped to a document the server
   marked as a phone, so the car (never data-phone) and the desktop keep the
   layouts the matrix locks. Sizes come from the visible viewport and every
   fixed edge respects the safe area. */
html[data-phone="true"] .race-display,html[data-phone="true"] .race-display.race-home{height:var(--app-height,100vh);min-height:0}
html[data-phone="true"] .race-app{padding:0}
html[data-phone="true"],html[data-phone="true"] body.race-body{overscroll-behavior:none}
html[data-phone="true"] .race-display .topbar{padding-top:env(safe-area-inset-top,0px);padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));box-sizing:content-box}
html[data-phone="true"] .race-launch-dock{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
html[data-phone="true"] .race-display .race-play-footer{height:auto;min-height:56px;padding:6px max(14px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
html[data-phone="true"] .race-display .race-play>.race-touch-controls{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(72px + env(safe-area-inset-bottom,0px))}
html[data-phone="true"] .race-display .race-play{touch-action:none}
/* The control groups sit at the corners; the box between them must not catch a tap meant for the footer. */
html[data-phone="true"] .race-display .race-play>.race-touch-controls,html[data-phone="true"] .race-display .race-play>.race-joystick-controls{pointer-events:none}
html[data-phone="true"] .race-display .race-play>.race-touch-controls>*,html[data-phone="true"] .race-display .race-play>.race-joystick-controls>*{pointer-events:auto}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls{position:absolute;z-index:3;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(72px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end}
html[data-phone="true"] .race-touch-layout{display:grid;gap:10px;margin:0 0 14px;padding:12px;border:1px solid #2b3d46;border-radius:12px}
html[data-phone="true"] .race-touch-layout legend{display:flex;align-items:center;gap:8px;padding:0 6px}
html[data-phone="true"] .race-touch-layout .race-check{display:flex;align-items:center;gap:10px;min-height:44px}
html[data-phone="true"] .race-display .race-play .race-held{min-width:60px;min-height:60px}
/* Turn it sideways: the hint sits over the race until the phone does. */
.race-rotate-hint{display:none;position:absolute;z-index:6;left:50%;top:44%;transform:translate(-50%,-50%);align-items:center;gap:10px;padding:12px 16px;border-radius:14px;background:#0b141af0;color:#e6f3f6;border:1px solid #839fa345;font-weight:600;pointer-events:none;white-space:nowrap}
html[data-phone="true"][data-orientation] .race-rotate-hint,html[data-phone="true"] main[data-orientation="portrait"] .race-rotate-hint{display:flex}
/* Portrait: the options panel is a sheet from the bottom; the dock one row. */
@media (orientation:portrait){
 html[data-phone="true"] .race-stage-menu{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;max-height:min(74%,calc(var(--app-height,100vh) - 88px));border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
 html[data-phone="true"] .race-launch-dock{flex-wrap:nowrap}
}
/* Compact chrome for a screen held in the hand: 44px targets, smaller glyphs. */
html[data-phone="true"] .race-display .topbar .top-actions button,html[data-phone="true"] .race-display .topbar .top-actions a{width:44px;height:44px;min-height:44px;padding:0}
html[data-phone="true"] .race-display .topbar .top-actions svg,html[data-phone="true"] .race-display .race-play-footer button svg,html[data-phone="true"] .race-launch-dock svg{width:17px;height:17px}
html[data-phone="true"] .race-display .race-icon-action,html[data-phone="true"] .race-launch-dock button{min-height:44px}
html[data-phone="true"] .race-home-readout strong{font-size:22px}
html[data-phone="true"] .race-display .race-play-footer{font-size:.86em}
/* Landscape is the phone's racing orientation: one thin strip on top, the
   steering under the left thumb, the pedals under the right, and the footer's
   two actions in the free middle of the bottom edge — never under a thumb. */
@media (orientation:landscape) and (max-height:500px){
 html[data-phone="true"] .race-home .topbar,html[data-phone="true"] .race-display:not(.race-home) .topbar{height:44px}
 html[data-phone="true"] .race-display:not(.race-home){padding:calc(44px + env(safe-area-inset-top,0px)) 0 0}
 html[data-phone="true"] .race-display .race-play>.race-touch-controls,html[data-phone="true"] .race-display .race-play>.race-joystick-controls{left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));justify-content:space-between}
 html[data-phone="true"] .race-display .race-play .race-held{min-width:56px;min-height:56px}
 html[data-phone="true"] .race-display .race-play-footer{left:50%;right:auto;width:auto;max-width:44%;transform:translateX(-50%);min-height:44px;height:auto;padding:2px 10px calc(2px + env(safe-area-inset-bottom,0px));border-radius:12px 12px 0 0;gap:6px}
 html[data-phone="true"] .race-display .race-play-footer button{min-height:44px;padding:0 10px}
 html[data-phone="true"] .race-display .race-play-footer span small{display:none}
 html[data-phone="true"] .race-rotate-hint{display:none}
}

/* The joystick in the race, not the phone-controller page: the stick gets a
   real column under the left thumb, the pedals keep theirs under the right. */
html[data-phone="true"] .race-display .race-play>.race-joystick-controls>.race-joystick-steering{flex:0 0 auto;width:min(44vw,300px)}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-zone{height:150px;max-width:none}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-hint{display:none}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-pedals{padding-bottom:0;row-gap:8px;grid-template-columns:repeat(2,minmax(72px,1fr))}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-pedal{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:56px;padding:6px 8px;border-radius:16px;font-size:13px;letter-spacing:1px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-pedal>.icon{margin:0 0 4px}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-throttle{background:#53d6b9;border-color:#7ce9cd;color:#0b392e}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-throttle.is-held{background:#91f2d2;border-color:#b6ffe5}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-brake{background:#352c30;border-color:#665055;color:#eebfb9}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-brake.is-held{background:#62484b;color:#ffe4db}
html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-pedal:disabled{opacity:.3;box-shadow:none}
@media (orientation:landscape) and (max-height:500px){
 html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-zone{height:138px;border-radius:20px}
 html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-ring{width:104px;height:104px}
 html[data-phone="true"] .race-display .race-play>.race-joystick-controls .race-joystick-knob{width:58px;height:58px}
}

/* While a phone is racing, only the race is on screen: the road, the stick and
   two pedals, time and position, and Pause — which is also the way out (the
   pause sheet has Return to garage). Everything else waits for the finish. */
html[data-phone="true"] .race-display.is-handheld-race .topbar,
html[data-phone="true"] .race-display.is-handheld-race .race-page-footer,
html[data-phone="true"] .race-display.is-handheld-race .race-play-footer,
html[data-phone="true"] .race-display.is-handheld-race .race-objective,
html[data-phone="true"] .race-display.is-handheld-race .race-nitro-caption,
html[data-phone="true"] .race-display.is-handheld-race .race-progress,
html[data-phone="true"] .race-display.is-handheld-race .race-joystick-caption,
html[data-phone="true"] .race-display.is-handheld-race .race-play-top .race-eyebrow{display:none}
html[data-phone="true"] .race-display.is-handheld-race{padding:env(safe-area-inset-top,0px) 0 0}
html[data-phone="true"] .race-display.is-handheld-race .race-play-top{padding:4px max(10px,env(safe-area-inset-right,0px)) 4px max(10px,env(safe-area-inset-left,0px));font-size:.82em;min-height:0}
html[data-phone="true"] .race-display.is-handheld-race .race-play-top h1{font-size:15px;line-height:1.2}
html[data-phone="true"] .race-display.is-handheld-race .race-play-top .race-live-stats strong{font-size:16px}
html[data-phone="true"] .race-display.is-handheld-race .race-nitro{width:150px;padding:5px 10px;font-size:.78em;border-radius:10px}
html[data-phone="true"] .race-display.is-handheld-race .race-live-board{max-width:160px;font-size:.76em;padding:4px 8px}
html[data-phone="true"] .race-display.is-handheld-race .race-speed{transform:scale(.62);transform-origin:top right}
html[data-phone="true"] .race-display.is-handheld-race .race-items{transform:scale(.72);transform-origin:top right}
html[data-phone="true"] .race-display.is-handheld-race .race-play>.race-joystick-controls .race-joystick-pedals{grid-template-rows:1fr}
html[data-phone="true"] .race-display.is-handheld-race .race-play>.race-joystick-controls,html[data-phone="true"] .race-display.is-handheld-race .race-play>.race-touch-controls{bottom:calc(10px + env(safe-area-inset-bottom,0px))}
/* Specific enough to beat the pedal styling above: no horn while a phone races. */
html[data-phone="true"] .race-display.is-handheld-race .race-play>.race-joystick-controls .race-joystick-pedal.race-joystick-horn{display:none}

/* ===== A phone top bar must fit whatever the account holds. A four-figure coin
   balance and a long car name used to push the row past the screen edge, which
   clipped the wallet, the profile button and everything the dock showed. The
   row now shrinks instead of overflowing, and the widest thing in it is the
   coin count, capped and truncated rather than allowed to grow. ===== */
html[data-phone="true"] .race-display .topbar{max-width:100%;overflow:hidden}
html[data-phone="true"] .race-display .topbar>*{min-width:0}
html[data-phone="true"] .race-display .topbar .top-actions{min-width:0;flex-shrink:1;flex-wrap:nowrap;overflow:hidden}
html[data-phone="true"] .race-display .topbar .top-actions>*{flex-shrink:0}
html[data-phone="true"] .race-display .topbar .race-wallet-trigger{width:auto;min-width:44px;max-width:78px;padding:0 6px;overflow:hidden}
html[data-phone="true"] .race-display .topbar .race-wallet-trigger>b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
/* The Drive link is the first thing to go: the footer already carries it. */
@media(max-width:430px){
 html[data-phone="true"] .race-display .topbar .top-actions .experience-switch{display:none}
}
/* The lobby footer keeps its place at the bottom edge; the dock sits clear of
   it rather than across it. Both stay where the layout puts them. */
html[data-phone="true"] .race-display.race-home .race-page-footer{height:24px;font-size:var(--t-micro,10px)}
html[data-phone="true"] .race-display.race-home .race-launch-dock{bottom:30px}
html[data-phone="true"] .race-display.race-home .race-home-readout{display:none}
/* Dock labels read as words, not broken syllables. */
html[data-phone="true"] .race-launch-choices button,html[data-phone="true"] .race-launch-action button{word-break:normal;overflow-wrap:normal;hyphens:manual}
html[data-phone="true"] .race-launch-choices{grid-template-columns:repeat(2,minmax(0,1fr))}

/* racing-car.css */
/* Car density for the racing screens. Applied only on the car's screen
   (html[data-tesla="true"], set by public/car-screen.js or the user agent),
   after racing-mobile.css and before car-density.css: larger type and icons,
   52px targets, panels that use the height under the 54px top bar with one
   wide-scrollbar scroll container each, and less explanatory copy. Built from
   a per-area audit at 880x670 (TESLA_VIEWPORTS[0]).

   The whole sheet is gated on min-height:661px, the car's own screen and
   taller. Shorter split views keep the base design, which is already compact
   enough for the height it has; enlarging type there would push content out
   of the panels instead of making it readable. */
@media(min-height:661px){
/* ===== Boards, Driver, Tracks and Display tab pages of the lobby options panel (.race-stage-menu[ ===== */
/* --- Shared panel geometry (also relevant to the options-panel rules;
       identical values are safe to duplicate). Topbar is 54px in this range. --- */
@media(max-height:800px){
 html[data-tesla="true"] .race-home .race-stage-menu{top:62px}
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu{bottom:105px}
}
/* Boards, Driver and Display get the width and collapsed head that Race and
   Tracks already have, so every page owns ~373px of the 670px screen. */
@media(min-width:861px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="board"],
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="profile"],
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="display"]{width:490px;max-width:calc(100% - 48px)}
 html[data-tesla="true"] .race-stage-menu[data-menu="board"] .race-options-head,
 html[data-tesla="true"] .race-stage-menu[data-menu="profile"] .race-options-head,
 html[data-tesla="true"] .race-stage-menu[data-menu="display"] .race-options-head{position:absolute;right:6px;top:6px;z-index:1;padding:0}
 html[data-tesla="true"] .race-stage-menu[data-menu="board"] .race-options-head>div,
 html[data-tesla="true"] .race-stage-menu[data-menu="profile"] .race-options-head>div,
 html[data-tesla="true"] .race-stage-menu[data-menu="display"] .race-options-head>div{display:none}
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="board"] .race-menu-tabs,
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="profile"] .race-menu-tabs,
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="display"] .race-menu-tabs{padding:6px 60px 6px 6px}
}

/* --- One scroll container per panel, with a scrollbar a finger can find. --- */
html[data-tesla="true"] .race-menu-content,
html[data-tesla="true"] .race-friends-body,
html[data-tesla="true"] .race-profile-card,
html[data-tesla="true"] .race-display .race-lobby-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:#5a7680 #0b141a}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar,
html[data-tesla="true"] .race-profile-card::-webkit-scrollbar,
html[data-tesla="true"] .race-display .race-lobby-body::-webkit-scrollbar{width:14px}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar-track,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar-track,
html[data-tesla="true"] .race-profile-card::-webkit-scrollbar-track,
html[data-tesla="true"] .race-display .race-lobby-body::-webkit-scrollbar-track{background:#0b141a;border-left:1px solid #26383f}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-profile-card::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-display .race-lobby-body::-webkit-scrollbar-thumb{background:#5a7680;border:3px solid #0b141a;border-radius:8px;min-height:56px}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-profile-card::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-display .race-lobby-body::-webkit-scrollbar-thumb:active{background:#7fd9c8}
/* The chat never scrolls on its own: the lobby body is the scroller. */
html[data-tesla="true"] .race-chat-messages{max-height:none;overflow:visible}

/* --- Shared page typography and form controls (all four pages) --- */
html[data-tesla="true"] .race-home .race-menu-page{padding:14px 14px 18px;gap:14px}
html[data-tesla="true"] .race-home .race-menu-heading h2,
html[data-tesla="true"] .race-home .race-menu-heading h3{margin:0;font-size:22px;line-height:1.2;font-weight:500;letter-spacing:-.3px}
html[data-tesla="true"] .race-menu-page .race-eyebrow,
html[data-tesla="true"] .race-profile>.race-eyebrow,
html[data-tesla="true"] .race-profile-card .race-eyebrow{font-size:12px;letter-spacing:1.4px}
html[data-tesla="true"] .race-menu-page label{font-size:15px;gap:6px}
html[data-tesla="true"] .race-menu-page select,
html[data-tesla="true"] .race-menu-page input{min-height:52px;font-size:16px;padding-top:8px;padding-bottom:8px}
html[data-tesla="true"] .race-home .race-menu-page .race-muted,
html[data-tesla="true"] .race-public-rooms .race-muted,
html[data-tesla="true"] .race-room-chat .race-muted{font-size:13px;line-height:1.45}
html[data-tesla="true"] .race-field-label{font-size:12px;min-height:22px;letter-spacing:.08em}
html[data-tesla="true"] .race-field-label>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-home .race-check{min-height:52px;font-size:15px!important;line-height:1.3}
html[data-tesla="true"] .race-home .race-check input{width:26px;height:26px;min-height:26px;margin:0 12px 0 0}
html[dir="rtl"][data-tesla="true"] .race-home .race-check input{margin:0 0 0 12px}
html[data-tesla="true"] .race-more>summary{min-height:52px;font-size:15px;padding:8px 12px}
html[data-tesla="true"] .race-more>summary>.icon{width:22px;height:22px;margin-right:10px}
html[data-tesla="true"] .race-more>summary::after{font-size:24px}

/* --- Boards --- */
html[data-tesla="true"] .race-board{gap:12px}
html[data-tesla="true"] .race-board-scopes{gap:12px}
html[data-tesla="true"] .race-board-scopes button{min-height:52px;gap:8px;padding:0 10px;font-size:15px}
html[data-tesla="true"] .race-board-scopes button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-board-context{font-size:12px}
html[data-tesla="true"] .race-board-list{gap:8px}
html[data-tesla="true"] .race-board-list li{grid-template-columns:30px auto minmax(0,1fr) auto auto;gap:10px;min-height:56px;padding:6px 10px;font-size:15px}
html[data-tesla="true"] .race-board-list li>.race-glyph{width:28px;height:28px}
html[data-tesla="true"] .race-board-position{font-size:14px}
html[data-tesla="true"] .race-board-report{min-width:52px;min-height:52px}
html[data-tesla="true"] .race-board-report>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-board-reporting{gap:12px;padding:14px}
html[data-tesla="true"] .race-board-reporting p{font-size:15px}
html[data-tesla="true"] .race-board-reasons>*{margin:0 12px 12px 0}
html[data-tesla="true"] .race-board-reasons button,
html[data-tesla="true"] .race-board-report-cancel,
html[data-tesla="true"] .race-board-reported button,
html[data-tesla="true"] .race-board-empty button{min-height:52px;padding:0 18px;font-size:15px}
html[data-tesla="true"] .race-board-reported,
html[data-tesla="true"] .race-board-gap,
html[data-tesla="true"] .race-board-empty{gap:10px;font-size:15px}
html[data-tesla="true"] .race-board-gap{padding:10px 14px}
html[data-tesla="true"] .race-board-gap>.icon,
html[data-tesla="true"] .race-board-reported>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-board-empty>.icon{width:28px;height:28px}

/* --- Seasonal league (Boards in league mode, journey in Tracks) --- */
html[data-tesla="true"] .race-league{gap:12px}
html[data-tesla="true"] .race-league-heading>.icon{width:28px;height:28px;margin-right:10px}
html[data-tesla="true"] .race-league-heading h2{font-size:20px}
html[data-tesla="true"] .race-league-heading small,
html[data-tesla="true"] .race-league-heading p{font-size:12px}
html[data-tesla="true"] .race-league-heading button{min-width:52px;min-height:52px;margin-left:10px}
html[data-tesla="true"] .race-league-heading button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-league-stats{gap:10px}
html[data-tesla="true"] .race-league-stats>span{padding:8px 10px}
html[data-tesla="true"] .race-league-stats small{font-size:12px}
html[data-tesla="true"] .race-league-stats b{font-size:22px}
html[data-tesla="true"] .race-league-tabs{gap:12px}
html[data-tesla="true"] .race-league-tabs button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-league-tabs button>.icon{width:22px;height:22px;margin-right:6px}
html[data-tesla="true"] .race-league-rule{font-size:13px}
html[data-tesla="true"] .race-league-races{gap:8px}
html[data-tesla="true"] .race-league-races li{min-height:60px;padding:8px 10px}
html[data-tesla="true"] .race-league-races li>.icon{width:24px;height:24px;margin-right:10px}
html[data-tesla="true"] .race-league-races strong{font-size:15px}
html[data-tesla="true"] .race-league-races span,
html[data-tesla="true"] .race-league-races small,
html[data-tesla="true"] .race-league-races li div em{font-size:12px}
html[data-tesla="true"] .race-league-pagination{font-size:15px}
html[data-tesla="true"] .race-league-pagination button{min-width:52px;min-height:52px}
html[data-tesla="true"] .race-league-pagination button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-league-confirm{gap:12px}
html[data-tesla="true"] .race-league-confirm button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-league-table{gap:8px}
html[data-tesla="true"] .race-league-table li{min-height:56px;padding:10px;font-size:15px}
html[data-tesla="true"] .race-league-table small{font-size:12px}
html[data-tesla="true"] .race-league-rewards{table-layout:fixed;width:100%;font-size:15px}
html[data-tesla="true"] .race-league-rewards th,
html[data-tesla="true"] .race-league-rewards td{padding:12px 6px;overflow-wrap:anywhere}
html[data-tesla="true"] .race-league-rewards td>span{font-size:13px}
html[data-tesla="true"] .race-league-rewards .icon{width:18px;height:18px}
html[data-tesla="true"] .race-league-challenge strong{font-size:15px}
html[data-tesla="true"] .race-league-challenge strong>.icon{width:22px;height:22px;margin-right:6px}
html[data-tesla="true"] .race-league-challenge p,
html[data-tesla="true"] .race-league-challenge>div{font-size:13px}

/* --- Driver: identity, emblems, location, sign-out (tab page and gate) --- */
html[data-tesla="true"] .race-profile-gate{padding:12px}
html[data-tesla="true"] .race-profile-card{width:min(640px,100%);padding:18px 20px}
html[data-tesla="true"] .race-profile{gap:14px}
html[data-tesla="true"] .race-profile h2{font-size:22px}
html[data-tesla="true"] .race-profile-copy{font-size:15px;line-height:1.5}
html[data-tesla="true"] .race-profile-current{gap:12px;font-size:17px}
html[data-tesla="true"] .race-profile-current>.race-glyph{width:34px;height:34px}
html[data-tesla="true"] .race-profile-note{gap:8px;font-size:13px;line-height:1.45}
html[data-tesla="true"] .race-profile-note>.icon{width:18px;height:18px}
html[data-tesla="true"] .race-suggestion-row>*{margin:0 12px 12px 0}
html[data-tesla="true"] .race-suggestion{min-height:52px;padding:0 18px;font-size:15px}
html[data-tesla="true"] .race-name-form{gap:12px}
html[data-tesla="true"] .race-name-form label{font-size:12px}
html[data-tesla="true"] .race-name-form input{min-height:52px;padding:0 14px;font-size:16px}
html[data-tesla="true"] .race-name-form button{min-height:52px;min-width:52px;padding:0 18px;font-size:15px}
html[data-tesla="true"] .race-name-hint{font-size:13px}
html[data-tesla="true"] .race-profile-edit,
html[data-tesla="true"] .race-signout button{min-height:52px;padding:0 18px;font-size:15px}
html[data-tesla="true"] .race-icon-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px}
html[data-tesla="true"] .race-icon{min-height:76px;gap:4px;padding:8px 4px}
html[data-tesla="true"] .race-icon .race-glyph{width:30px;height:30px}
html[data-tesla="true"] .race-icon small{font-size:12px;line-height:1.2}
html[data-tesla="true"] .race-icon-lock{top:5px;right:5px}
html[data-tesla="true"] .race-icon-lock>.icon{width:14px;height:14px}
html[data-tesla="true"] .race-location{gap:12px}
html[data-tesla="true"] .race-location label{font-size:12px}
html[data-tesla="true"] .race-location select{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-location-hint{gap:12px;padding:10px 14px;font-size:15px}
html[data-tesla="true"] .race-location-hint>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-location-hint button{min-height:52px;padding:0 18px;font-size:15px}
html[data-tesla="true"] .race-signout{gap:12px;padding-top:16px}
html[data-tesla="true"] .race-signout span{font-size:13px}

/* --- Display: touch layout fieldset (unstyled in the car today) and toggles --- */
html[data-tesla="true"] .race-touch-layout{display:grid;gap:12px;min-width:0;margin:0;padding:12px 12px 14px;border:1px solid #2b3d46;border-radius:12px}
html[data-tesla="true"] .race-touch-layout legend{display:flex;align-items:center;padding:0 6px;font-size:15px;font-weight:600}
html[data-tesla="true"] .race-touch-layout legend>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-touch-layout .race-check{min-height:52px}
html[data-tesla="true"] .race-menu-page .race-analytics{padding-top:14px}

/* --- Tracks: course browser (520px panel; 3 cards a row; 6 a page) --- */
html[data-tesla="true"] .race-home .race-course-browser{padding:12px;gap:10px}
html[data-tesla="true"] .race-course-filters{gap:12px}
html[data-tesla="true"] .race-course-tools{grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
html[data-tesla="true"] .race-course-tools .race-check{min-height:52px;font-size:13px!important;line-height:1.25}
html[data-tesla="true"] .race-course-tools .race-course-count{font-size:13px}
html[data-tesla="true"] .race-course-pager{grid-template-columns:52px auto 52px;gap:8px}
html[data-tesla="true"] .race-course-pager>span{font-size:13px}
html[data-tesla="true"] .race-course-pager button{min-width:52px;min-height:52px;padding:0;font-size:15px}
html[data-tesla="true"] .race-course-pager button>.icon,
html[data-tesla="true"] .race-course-pager button:first-child>.icon{width:22px;height:22px;margin:0}
html[data-tesla="true"] .race-home .race-course-browser .race-tracks{gap:10px}
html[data-tesla="true"] .race-home .race-course-browser .race-track{min-height:76px!important;padding:8px 10px!important;gap:3px}
html[data-tesla="true"] .race-home .race-course-browser .race-track strong{font-size:14px;line-height:1.25}
html[data-tesla="true"] .race-course-browser .race-track-region{font-size:12px;line-height:1.2;letter-spacing:.2px}
html[data-tesla="true"] .race-course-browser .race-track-access{font-size:12px;line-height:1.2}
html[data-tesla="true"] .race-track-access>.icon{width:16px;height:16px}
html[data-tesla="true"] .race-course-unlock{gap:10px;padding:12px}
html[data-tesla="true"] .race-course-unlock>strong{font-size:15px}
html[data-tesla="true"] .race-course-unlock>button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-course-unlock>small{font-size:13px}

/* --- Friends overlay --- */
html[data-tesla="true"] .race-friends-trigger>b{min-width:18px;line-height:18px;font-size:11px;border-radius:9px}
html[data-tesla="true"] .race-friends-backdrop{padding:12px}
html[data-tesla="true"] .race-app .race-friends-panel{width:580px;max-height:calc(100vh - 20px)}
html[data-tesla="true"] .race-friends-panel button{min-width:52px;min-height:52px;padding:8px 14px;font-size:15px}
html[data-tesla="true"] .race-friends-panel button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-friends-heading{padding:8px 12px}
html[data-tesla="true"] .race-friends-heading>div>.icon{width:26px;height:26px;margin-right:10px}
html[data-tesla="true"] .race-app .race-friends-heading h2{font-size:22px}
html[data-tesla="true"] .race-friends-heading>button{padding:0}
html[data-tesla="true"] .race-friends-heading>button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-friends-status{min-height:30px;padding:2px 14px;font-size:13px}
html[data-tesla="true"] .race-friends-status i{width:9px;height:9px;margin-right:8px}
html[data-tesla="true"] .race-friends-tabs{gap:12px;padding:6px 12px 8px}
html[data-tesla="true"] .race-friends-tabs small{margin-left:8px;font-size:13px}
html[data-tesla="true"] .race-friends-body{padding:6px 14px 10px}
html[data-tesla="true"] .race-add-friend>label{margin:0 0 6px;font-size:13px}
html[data-tesla="true"] .race-add-friend>div{gap:12px}
html[data-tesla="true"] .race-friends-panel .race-add-friend input{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-add-friend button>.icon{margin-right:8px}
html[data-tesla="true"] .race-app .race-friends-guide{margin:10px 0;font-size:13px;line-height:1.45}
html[data-tesla="true"] .race-app .race-friends-empty{padding:20px 8px;font-size:15px}
html[data-tesla="true"] .race-friends-panel .race-friends-park{min-height:52px;font-size:15px!important}
html[data-tesla="true"] .race-friends-list>li{min-height:76px;padding:8px 0}
html[data-tesla="true"] .race-friend-driver>svg{width:32px;height:32px;margin-right:10px}
html[data-tesla="true"] .race-friend-driver strong{font-size:16px}
html[data-tesla="true"] .race-friend-driver span{font-size:13px}
html[data-tesla="true"] .race-friend-actions>*+*{margin-left:12px}
html[data-tesla="true"] .race-friend-actions>small{max-width:56px;font-size:12px;line-height:1.25}
html[data-tesla="true"] .race-friend-actions .race-friend-join>.icon{margin-right:6px}
html[data-tesla="true"] .race-friends-footer{padding:8px 14px 12px}
html[data-tesla="true"] .race-app .race-friends-footer>p{max-width:340px;font-size:13px}
html[data-tesla="true"] .race-friends-pages>span{min-width:52px;font-size:15px}
html[data-tesla="true"] .race-friends-pages button>.icon{width:24px;height:24px}

/* --- Quick chat, public rooms, moderation --- */
html[data-tesla="true"] .race-social-heading h3{font-size:17px}
html[data-tesla="true"] .race-social-heading h3>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-social-heading button{min-height:52px;min-width:52px;padding:8px 12px;font-size:14px}
html[data-tesla="true"] .race-social-heading button>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-public-rooms,
html[data-tesla="true"] .race-room-chat{padding:14px}
html[data-tesla="true"] .race-public-rooms>p{margin:10px 0;font-size:13px}
html[data-tesla="true"] .race-public-rooms li{min-height:64px;padding:12px 0}
html[data-tesla="true"] .race-public-rooms li>div{margin-right:12px}
html[data-tesla="true"] .race-public-rooms li strong{font-size:15px}
html[data-tesla="true"] .race-public-rooms li span{font-size:13px}
html[data-tesla="true"] .race-public-rooms li small{font-size:12px}
html[data-tesla="true"] .race-public-rooms li button{min-width:88px;min-height:52px;font-size:15px}
html[data-tesla="true"] .race-public-rooms li button>.icon{width:22px;height:22px;margin-right:6px}
html[data-tesla="true"] .race-chat-messages{padding:8px 0}
html[data-tesla="true"] .race-chat-messages p{margin:6px 0;padding:8px 10px}
html[data-tesla="true"] .race-chat-messages strong{font-size:12px}
html[data-tesla="true"] .race-chat-messages span{font-size:15px}
html[data-tesla="true"] .race-chat-templates{gap:12px}
html[data-tesla="true"] .race-chat-templates button{min-height:52px;padding:8px 10px;font-size:14px;line-height:1.35}
html[data-tesla="true"] .race-chat-hint{margin-top:10px!important;font-size:12px!important}
html[data-tesla="true"] .race-kick-player{min-width:52px;min-height:52px;font-size:14px}
html[data-tesla="true"] .race-bot-note{padding:10px 12px;font-size:13px}


/* ===== Wallet / coins page (options panel + lobby), coin packs, rewards & daily challenge, Studio ===== */
/* ---- One scroll container per panel, a scrollbar a finger can find ---- */
html[data-tesla="true"] .race-menu-content,
html[data-tesla="true"] .race-lobby-body,
html[data-tesla="true"] .race-pro-body{
 scrollbar-width:auto; /* 'thin' switches ::-webkit-scrollbar off in Chromium ≥121; never set scrollbar-color here */
 overscroll-behavior:contain;
 touch-action:pan-y;
 -webkit-overflow-scrolling:touch
}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar,
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar{width:14px;height:14px}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar-track,
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar-track,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-track{background:#0b1418;border-left:1px solid #22333b}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-thumb{background:#4f6f79;border:3px solid #0b1418;border-radius:8px;min-height:56px}
html[data-tesla="true"] .race-menu-content::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-thumb:active{background:#6fd3c2}
html[data-tesla="true"] .race-display .race-lobby-body{padding-right:6px}

/* The lobby wallet no longer scrolls inside the already-scrolling lobby body. */
html[data-tesla="true"] .race-lobby-wallet .race-menu-page{max-height:none;overflow:visible;padding:0}
html[data-tesla="true"] .race-lobby-wallet>*+*{margin-top:10px}
html[data-tesla="true"] .race-lobby-wallet>.race-icon-action{min-height:52px;font-size:16px;justify-content:center}
html[data-tesla="true"] .race-lobby-wallet>.race-icon-action>.icon{width:22px;height:22px}

/* ---- The wallet panel uses the height under the 54px car top bar ---- */
@media(max-height:800px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="wallet"]{top:62px}
}
@media(min-width:861px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="wallet"]{width:490px;max-width:calc(100% - 48px)}
}
@media(min-width:541px){
 /* Same head collapse the Race and Tracks menus already use; the balance card carries the title. */
 html[data-tesla="true"] .race-stage-menu[data-menu="wallet"] .race-options-head{position:absolute;right:6px;top:6px;z-index:1;padding:0}
 html[data-tesla="true"] .race-stage-menu[data-menu="wallet"] .race-options-head>div{display:none}
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="wallet"] .race-menu-tabs{padding:6px 60px 6px 6px}
}
html[data-tesla="true"] .race-options-launch .race-icon-action{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-options-launch .race-icon-action>.icon{width:22px;height:22px}

/* ---- Wallet: balance, tabs, notes ---- */
html[data-tesla="true"] .race-wallet-page{gap:14px}
html[data-tesla="true"] .race-wallet-page .race-wallet-balance{padding:10px 14px}
html[data-tesla="true"] .race-wallet-balance>.icon{width:32px;height:32px}
html[data-tesla="true"] .race-wallet-balance small{font-size:13px}
html[data-tesla="true"] .race-wallet-page .race-wallet-balance strong{font-size:24px}
html[data-tesla="true"] .race-repair-warning{font-size:15px;line-height:1.4;padding:10px 12px}
html[data-tesla="true"] .race-wallet-tabs,html[data-tesla="true"] .race-reward-periods{gap:12px;margin:4px 0}
html[data-tesla="true"] .race-wallet-tabs>button,html[data-tesla="true"] .race-reward-periods>button{min-height:52px;padding:6px 8px;font-size:16px}
/* Pressed tab must also win inside the lobby dialog (.race-display .race-play button:not(...) is 0,4,1). */
html[data-tesla="true"] .race-app .race-wallet-page .race-wallet-tabs>button[aria-pressed="true"],
html[data-tesla="true"] .race-app .race-wallet-page .race-reward-periods>button[aria-pressed="true"]{background:#153b32;border-color:#54e8cf;color:#baffdf}
html[data-tesla="true"] .race-wallet-page .race-muted,html[data-tesla="true"] .race-rewards .race-muted{font-size:13px;line-height:1.5}
html[data-tesla="true"] .race-wallet-trigger>b{font-size:13px}
html[data-tesla="true"] .race-wallet-trigger>.icon{width:22px;height:22px}

/* ---- Details/summary rows (Buy coins, Daily rewards, Today’s challenge, Track briefing) ---- */
html[data-tesla="true"] .race-more>summary{min-height:52px;padding:8px 12px;font-size:15px}
html[data-tesla="true"] .race-more>summary>.icon{width:22px;height:22px;margin-right:10px}
html[data-tesla="true"] .race-more>summary::after{font-size:26px}
html[data-tesla="true"] .race-more>label,html[data-tesla="true"] .race-more>.race-muted,html[data-tesla="true"] .race-more>.race-daily{margin:12px}
html[data-tesla="true"] .race-more>.race-item-brief{margin:10px}
html[data-tesla="true"] .race-rewards summary>b{font-size:14px}
html[data-tesla="true"] .race-rewards:not(.is-embedded)>.race-reward-periods,
html[data-tesla="true"] .race-rewards:not(.is-embedded)>.race-signin-reward,
html[data-tesla="true"] .race-rewards:not(.is-embedded)>.race-reward-earned,
html[data-tesla="true"] .race-rewards:not(.is-embedded)>.race-reward-group{margin-left:10px;margin-right:10px}

/* ---- Buy coins: the JSX renders <button>; the base sheet styles >a. ---- */
html[data-tesla="true"] .race-wallet-buy{margin:4px 0}
html[data-tesla="true"] .race-wallet-buy>.race-wallet-error{margin:0 10px;font-size:15px;line-height:1.4}
html[data-tesla="true"] .race-wallet-buy .race-wallet-packs{margin:10px;gap:12px}
html[data-tesla="true"] .race-app .race-wallet-page .race-wallet-packs>button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-height:118px;padding:12px;border:1px solid #4e776b;border-radius:12px;background:#142923;color:#edf6f6;line-height:1.3;white-space:normal;font-weight:600}
html[data-tesla="true"] .race-app .race-wallet-page .race-wallet-packs>button>*+*{margin-top:4px}
html[data-tesla="true"] .race-app .race-wallet-page .race-wallet-packs>button>.icon{display:none}
html[data-tesla="true"] .race-app .race-wallet-page .race-wallet-packs>button:disabled{opacity:.55}
html[data-tesla="true"] .race-wallet-packs strong{font-size:17px}
html[data-tesla="true"] .race-wallet-packs span{font-size:14px}
html[data-tesla="true"] .race-wallet-packs small{font-size:14px;margin-top:auto;padding-top:6px}
html[data-tesla="true"] .race-wallet-packs small>.icon{width:22px;height:22px;margin-left:6px}
html[data-tesla="true"] .race-wallet-handoff{margin:10px;padding:12px}
html[data-tesla="true"] .race-wallet-handoff p{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-wallet-handoff .race-icon-action{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-wallet-handoff .race-icon-action>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-wallet-shop{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-wallet-shop>.icon{width:22px;height:22px}

/* ---- Rewards (embedded in the wallet, and as the Daily rewards details in Race setup) ---- */
html[data-tesla="true"] .race-signin-reward>span{font-size:16px}
html[data-tesla="true"] .race-signin-reward small{font-size:13px}
html[data-tesla="true"] .race-signin-reward button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-signin-reward button>.icon{width:22px;height:22px;margin-right:6px}
html[data-tesla="true"] .race-reward-earned{font-size:14px}
html[data-tesla="true"] .race-reward-earned>.icon{width:22px;height:22px;margin-right:6px}
html[data-tesla="true"] .race-reward-group>strong{font-size:15px}
html[data-tesla="true"] .race-reward-goal{font-size:15px;margin:10px 0}
html[data-tesla="true"] .race-reward-goal small,html[data-tesla="true"] .race-reward-goal>b small{font-size:13px}
html[data-tesla="true"] .race-reward-goal>b>.icon{width:22px;height:22px;margin-right:4px}
html[data-tesla="true"] .race-reward-goal progress{height:8px}

/* ---- Coin history ---- */
html[data-tesla="true"] .race-wallet-history-heading>strong{font-size:16px}
html[data-tesla="true"] .race-wallet-history-heading>button{min-width:52px;min-height:52px}
html[data-tesla="true"] .race-wallet-history-heading>button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-wallet-history p[role="status"]{font-size:15px}
html[data-tesla="true"] .race-wallet-history-list>li{min-height:60px;padding:8px 0}
html[data-tesla="true"] .race-wallet-history-list strong{font-size:15px}
html[data-tesla="true"] .race-wallet-history-list time,html[data-tesla="true"] .race-wallet-history-list small{font-size:13px}
html[data-tesla="true"] .race-wallet-history-pages{gap:12px;margin-top:10px}
html[data-tesla="true"] .race-wallet-history-pages>button{min-height:52px;padding:6px 8px;font-size:15px}
html[data-tesla="true"] .race-wallet-history-pages>button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-wallet-history-pages>button>.icon+span,html[data-tesla="true"] .race-wallet-history-pages>button>span+.icon{margin-left:6px}
html[data-tesla="true"] .race-wallet-history-pages>span{font-size:14px}
html[data-tesla="true"] .race-wallet-history-error{font-size:15px}
html[data-tesla="true"] .race-wallet-history-error>button{min-height:52px;font-size:15px}

/* ---- Today’s challenge ---- */
html[data-tesla="true"] .race-daily{padding:12px;gap:10px}
html[data-tesla="true"] .race-daily-head strong{font-size:16px}
html[data-tesla="true"] .race-daily-head small{font-size:13px;gap:6px}
html[data-tesla="true"] .race-daily-head small>.icon{width:18px;height:18px}
html[data-tesla="true"] .race-daily-copy{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-daily-best,html[data-tesla="true"] .race-daily-mine{font-size:14px}
html[data-tesla="true"] .race-daily-best>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-daily-best>.race-glyph{width:26px;height:26px}
html[data-tesla="true"] .race-daily-go{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-board-empty{font-size:14px}
html[data-tesla="true"] .race-board-empty button{min-height:52px;font-size:15px}

/* ---- Studio Pro discovery ---- */
html[data-tesla="true"] .race-pro-discovery-trigger{min-height:52px;padding:10px 14px;font-size:16px}
html[data-tesla="true"] .race-pro-discovery-trigger>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-pro-discovery-trigger>.icon+span{margin-left:10px}
html[data-tesla="true"] .race-pro-discovery-trigger>span{flex:1;min-width:0;text-align:left;margin-right:8px}
html[data-tesla="true"] .race-pro-panel{width:490px}
html[data-tesla="true"] .race-pro-panel h2{font-size:24px}
html[data-tesla="true"] .race-pro-panel button,html[data-tesla="true"] .race-pro-panel select,html[data-tesla="true"] .race-pro-panel a{min-height:52px;min-width:52px;font-size:16px}
html[data-tesla="true"] .race-pro-panel header button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-pro-body{font-size:16px;line-height:1.5}
html[data-tesla="true"] .race-pro-body label{font-size:16px}
html[data-tesla="true"] .race-pro-body select{max-width:60%}
html[data-tesla="true"] .race-pro-body .sound-preview{margin:12px 0 4px}
html[data-tesla="true"] .race-pro-body .sound-preview button{min-height:52px;font-size:15px;margin:0 8px 8px 0}
html[data-tesla="true"] .race-pro-price strong{font-size:28px}
html[data-tesla="true"] .race-pro-note{font-size:14px}
html[data-tesla="true"] .race-pro-panel footer{gap:8px}


/* ---- Items: in-race inventory, badges and the briefing ---- */
html[data-tesla="true"] .race-item-button{min-width:72px;min-height:52px;padding:8px 10px;font-size:13px}
html[data-tesla="true"] .race-display .race-items>.race-item-button{min-width:72px;min-height:52px}
html[data-tesla="true"] .race-items strong{font-size:13px;line-height:1.35}
html[data-tesla="true"] .race-item-target-shield{font-size:13px}
html[data-tesla="true"] .race-item-target-shield>.icon{width:18px;height:18px;margin-right:4px}
html[data-tesla="true"] .race-app .race-effect-badge{font-size:12px;padding:3px 6px;margin:0 4px 4px 0}
html[data-tesla="true"] .race-app .race-effect-badge>.icon{width:18px;height:18px;margin-right:4px}
@media(min-width:701px) and (max-width:1100px){
 html[data-tesla="true"] .race-display .race-items{max-width:170px;padding:8px}
}
html[data-tesla="true"] .race-item-brief{font-size:14px;line-height:1.5;padding:12px}
html[data-tesla="true"] .race-item-brief>.icon{width:22px;height:22px;margin-right:10px;margin-top:1px}
html[data-tesla="true"] .race-item-brief strong{margin-bottom:4px}

/* ---- Nitro meter and the Nitro pedal label ---- */
@media(min-width:861px){
 html[data-tesla="true"] .race-display .race-stage-view>.race-nitro{width:260px;max-width:260px;padding:10px 14px}
}
html[data-tesla="true"] .race-nitro-label{grid-template-columns:22px minmax(0,1fr) auto;column-gap:8px;font-size:12px;letter-spacing:1.2px}
html[data-tesla="true"] .race-nitro-label>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-nitro-label strong{font-size:16px}
html[data-tesla="true"] .race-nitro-meter{height:7px;margin-top:8px}
html[data-tesla="true"] .race-nitro-caption{min-height:17px;margin-top:7px;font-size:13px;line-height:1.3;letter-spacing:.2px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html[data-tesla="true"] .race-display .race-play .race-held.race-nitro-control{font-size:13px!important}


/* ===== Race options panel (aside#race-options-panel.race-stage-menu[data-menu="race"]) in the lob ===== */
/* 1. Geometry: from the 54px car topbar down to the launch dock, one wider column. */
@media(max-height:800px){
 html[data-tesla="true"] .race-home .race-stage-menu,
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu{top:62px;bottom:105px}
}
@media (min-width:701px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="race"],
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="tracks"]{width:490px;max-width:calc(100% - 48px)}
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="race"] .race-menu-tabs,
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="tracks"] .race-menu-tabs{padding:6px 64px 6px 6px}
}

/* 2. One scroll container with a wide, always-visible scrollbar. The lobby page itself never scrolls. */
html[data-tesla="true"] .race-home .race-stage-menu{display:flex;flex-direction:column;overflow:hidden}
html[data-tesla="true"] .race-home .race-menu-content{
 flex:1 1 auto;min-height:0;
 overflow-x:hidden;overflow-y:scroll;
 overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
 /* racing.css sets scrollbar-width:thin; Chrome ignores ::-webkit-scrollbar unless both are auto. */
 scrollbar-width:auto;
}
html[data-tesla="true"] .race-home .race-menu-content::-webkit-scrollbar{width:14px}
html[data-tesla="true"] .race-home .race-menu-content::-webkit-scrollbar-track{background:#0a1319;border-left:1px solid #22353d}
html[data-tesla="true"] .race-home .race-menu-content::-webkit-scrollbar-thumb{background:#4e7481;border:3px solid #0a1319;border-radius:8px;min-height:56px}
html[data-tesla="true"] .race-home .race-menu-content::-webkit-scrollbar-thumb:hover,
html[data-tesla="true"] .race-home .race-menu-content::-webkit-scrollbar-thumb:active{background:#7fb2bf}
@media(min-height:501px){html[data-tesla="true"].race-document,
html[data-tesla="true"].race-document body.race-body{overflow:hidden;overscroll-behavior:none}}

/* 3. Tab strip: 52px tabs, 12px labels, 22px glyphs, 10px gaps, 52px close. */
html[data-tesla="true"] .race-home .race-menu-tabs{gap:10px}
html[data-tesla="true"] .race-home .race-menu-tabs button{min-height:52px;padding:5px 2px;font-size:12px;line-height:1.2}
html[data-tesla="true"] .race-home .race-menu-tabs button>.icon{width:22px;height:22px;margin-bottom:3px}
html[data-tesla="true"] .race-home .race-options-head button{width:52px;height:52px;min-height:52px}
html[data-tesla="true"] .race-home .race-options-head button .icon{width:22px;height:22px}

/* 4. Page rhythm and body copy. */
html[data-tesla="true"] .race-home .race-menu-page{padding:16px;gap:14px}
html[data-tesla="true"] .race-home .race-setup-page{gap:14px}
html[data-tesla="true"] .race-home .race-menu-content .race-muted{font-size:14px;line-height:1.45}

/* 5. Mode chips: four in a row, 52px, 13px labels that may wrap, 22px glyphs, 12px gaps. */
html[data-tesla="true"] .race-home .race-menu-page .race-modes{gap:12px}
html[data-tesla="true"] .race-home .race-setup-page .race-modes button{display:flex;flex-direction:row;align-items:center;justify-content:center;min-height:52px;padding:6px 8px}
html[data-tesla="true"] .race-home .race-setup-page .race-modes button>.icon{width:22px;height:22px;margin:0 8px 0 0}
html[data-tesla="true"] .race-home .race-setup-page .race-modes strong{font-size:13px;line-height:1.2;min-width:0;overflow-wrap:break-word}

/* 6. Fields: 14px labels (the Controller label drops its 10px uppercase), 16px selects at 52px. */
html[data-tesla="true"] .race-home .race-menu-page label{font-size:14px;gap:6px;line-height:1.3}
html[data-tesla="true"] .race-home .race-setup-fields{gap:12px}
html[data-tesla="true"] .race-home .race-setup-fields .race-field-label{font-size:14px;min-height:22px;text-transform:none;letter-spacing:0}
html[data-tesla="true"] .race-home .race-setup-fields .race-field-label>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-home .race-menu-page select{font-size:16px;min-height:52px;padding-top:10px;padding-bottom:10px;line-height:1.3}
html[data-tesla="true"] .race-home .race-setup-summary{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-home .race-setup-summary strong{font-size:13px;margin-top:6px}

/* 7. Disclosure rows (details.race-more): 52px summaries, 15px, 22px glyphs, content inset 12px. */
html[data-tesla="true"] .race-home .race-more>summary{min-height:52px;padding:10px 12px;font-size:15px;line-height:1.3}
html[data-tesla="true"] .race-home .race-more>summary>.icon{width:22px;height:22px;margin-right:10px}
html[data-tesla="true"] .race-home .race-more>summary::after{font-size:26px;line-height:1;padding-left:10px}
html[data-tesla="true"] .race-home .race-more>label,
html[data-tesla="true"] .race-home .race-more>.race-muted,
html[data-tesla="true"] .race-home .race-more>.race-daily,
html[data-tesla="true"] .race-home .race-more>.race-join,
html[data-tesla="true"] .race-home .race-more>.race-public-rooms{margin:12px}
html[data-tesla="true"] .race-home .race-more>p{margin:12px;font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-home .race-more>.race-scenario-brief,
html[data-tesla="true"] .race-home .race-more>.race-item-brief,
html[data-tesla="true"] .race-home .race-more>.race-conditions{margin:10px}

/* 8. Arcade world tour card and the Monthly league details. */
html[data-tesla="true"] .race-home .race-arcade-journey{padding:14px}
html[data-tesla="true"] .race-home .race-arcade-title>strong{font-size:17px}
html[data-tesla="true"] .race-home .race-arcade-title>b{font-size:14px}
html[data-tesla="true"] .race-home .race-arcade-title>.icon,
html[data-tesla="true"] .race-home .race-arcade-earned>.icon,
html[data-tesla="true"] .race-home .race-conditions>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-arcade-journey p{font-size:15px;line-height:1.45;margin:10px 0}
html[data-tesla="true"] .race-home .race-arcade-journey small{font-size:13px;line-height:1.45}
html[data-tesla="true"] .race-home .race-arcade-next{margin:10px 0}
html[data-tesla="true"] .race-home .race-arcade-next>span{font-size:15px;line-height:1.4}
html[data-tesla="true"] .race-home .race-arcade-next button{min-height:52px;font-size:15px;padding:10px 16px;gap:10px}
html[data-tesla="true"] .race-home .race-arcade-next button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-conditions{font-size:14px}
html[data-tesla="true"] .race-home .race-arcade-league ol{margin:12px}
html[data-tesla="true"] .race-home .race-arcade-league li{font-size:15px;padding:12px 0}
html[data-tesla="true"] .race-home .race-arcade-league>button{margin:0 12px 12px;min-height:52px;font-size:15px}

/* 9. Daily / weekly rewards (details.race-more.race-rewards). Margins are scoped to the details
      variant so the embedded copy in the wallet tab keeps its own inset. */
html[data-tesla="true"] .race-home .race-rewards summary>b{font-size:14px}
html[data-tesla="true"] .race-home .race-more.race-rewards .race-reward-periods{margin:12px}
html[data-tesla="true"] .race-home .race-more.race-rewards .race-signin-reward,
html[data-tesla="true"] .race-home .race-more.race-rewards .race-reward-earned,
html[data-tesla="true"] .race-home .race-more.race-rewards .race-reward-group{margin:8px 12px}
html[data-tesla="true"] .race-home .race-reward-periods{gap:12px}
html[data-tesla="true"] .race-home .race-reward-periods>button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-signin-reward{gap:10px}
html[data-tesla="true"] .race-home .race-signin-reward strong{font-size:15px}
html[data-tesla="true"] .race-home .race-signin-reward small{font-size:14px;line-height:1.4}
html[data-tesla="true"] .race-home .race-signin-reward button{min-height:52px;font-size:15px;padding:10px 12px}
html[data-tesla="true"] .race-home .race-signin-reward button>.icon,
html[data-tesla="true"] .race-home .race-reward-earned>.icon,
html[data-tesla="true"] .race-home .race-reward-goal>b>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-reward-earned{font-size:14px}
html[data-tesla="true"] .race-home .race-reward-group>strong{font-size:15px}
html[data-tesla="true"] .race-home .race-reward-goal{font-size:15px;margin:10px 0}
html[data-tesla="true"] .race-home .race-reward-goal small,
html[data-tesla="true"] .race-home .race-reward-goal>b small{font-size:13px}
html[data-tesla="true"] .race-home .race-reward-goal progress{height:8px}

/* 10. Today's shared challenge (details > .race-daily). */
html[data-tesla="true"] .race-home .race-daily{padding:14px;gap:9px}
html[data-tesla="true"] .race-home .race-daily .race-eyebrow{font-size:12px;letter-spacing:1.2px}
html[data-tesla="true"] .race-home .race-daily-head strong{font-size:16px}
html[data-tesla="true"] .race-home .race-daily-head small{font-size:13px}
html[data-tesla="true"] .race-home .race-daily-head small>svg{width:16px;height:16px}
html[data-tesla="true"] .race-home .race-daily-copy{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-home .race-daily-best,
html[data-tesla="true"] .race-home .race-daily-mine{font-size:15px}
html[data-tesla="true"] .race-home .race-daily-best>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-daily-go{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-daily .race-board-empty{font-size:14px}

/* 11. Track briefing & items (details.race-briefing). */
html[data-tesla="true"] .race-home .race-scenario-brief{font-size:14px;line-height:1.45;padding:12px 14px}
html[data-tesla="true"] .race-home .race-scenario-brief>p>span{font-size:13px}
html[data-tesla="true"] .race-home .race-sector-plan>li{grid-template-columns:22px minmax(0,1fr);column-gap:10px;margin:12px 0}
html[data-tesla="true"] .race-home .race-sector-plan .icon,
html[data-tesla="true"] .race-home .race-track-brief>.icon,
html[data-tesla="true"] .race-home .race-item-brief>.icon{width:22px;height:22px;margin-top:0}
html[data-tesla="true"] .race-home .race-sector-plan strong{font-size:14px}
html[data-tesla="true"] .race-home .race-sector-plan span{font-size:13px;line-height:1.4}
html[data-tesla="true"] .race-home .race-scenario-brief .race-track-brief{grid-template-columns:22px minmax(0,1fr);column-gap:10px}
html[data-tesla="true"] .race-home .race-track-brief small{font-size:13px}
html[data-tesla="true"] .race-home .race-item-brief{font-size:14px;line-height:1.45;padding:12px}

/* 12. Controller status (Controller = Gamepad), including the max-height:670px rule in racing-gamepad.css. */
html[data-tesla="true"] .race-home .race-gamepad-status{padding:12px 14px}
html[data-tesla="true"] .race-home .race-gamepad-heading>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-home .race-gamepad-heading h3{font-size:15px}
html[data-tesla="true"] .race-home .race-gamepad-heading small{font-size:13px}
html[data-tesla="true"] .race-home .race-gamepad-status p{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-home .race-gamepad-refresh{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-gamepad-refresh>.icon,
html[data-tesla="true"] .race-home .race-gamepad-input-check>summary>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-gamepad-input-check>summary{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-gamepad-input-check dl>div{font-size:13px}
html[data-tesla="true"] .race-home .race-gamepad-test-buttons>span{font-size:13px;padding:9px}

/* 13. Online League (mode = league). */
html[data-tesla="true"] .race-home .race-league{gap:12px}
html[data-tesla="true"] .race-home .race-league-heading>.icon{width:28px;height:28px}
html[data-tesla="true"] .race-home .race-league-heading h2{font-size:19px}
html[data-tesla="true"] .race-home .race-league-heading small,
html[data-tesla="true"] .race-home .race-league-heading p{font-size:13px;line-height:1.35}
html[data-tesla="true"] .race-home .race-league-heading button{min-width:52px;min-height:52px}
html[data-tesla="true"] .race-home .race-league-heading button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-league-stats{gap:10px}
html[data-tesla="true"] .race-home .race-league-stats>span{padding:9px 10px;gap:4px}
html[data-tesla="true"] .race-home .race-league-stats small{font-size:13px}
html[data-tesla="true"] .race-home .race-league-stats b{font-size:20px}
html[data-tesla="true"] .race-home .race-league-tabs{gap:12px}
html[data-tesla="true"] .race-home .race-league-tabs button{min-height:52px;font-size:14px;gap:8px;padding:6px 8px}
html[data-tesla="true"] .race-home .race-league-tabs button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-league-rule{font-size:14px}
html[data-tesla="true"] .race-home .race-league-races{gap:8px}
html[data-tesla="true"] .race-home .race-league-races li{min-height:56px;padding:10px;gap:12px}
html[data-tesla="true"] .race-home .race-league-races li>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-league-races li>div{gap:4px}
html[data-tesla="true"] .race-home .race-league-races strong{font-size:15px}
html[data-tesla="true"] .race-home .race-league-races span,
html[data-tesla="true"] .race-home .race-league-races small,
html[data-tesla="true"] .race-home .race-league-races li div em{font-size:13px}
html[data-tesla="true"] .race-home .race-league-pagination{font-size:15px}
html[data-tesla="true"] .race-home .race-league-pagination button{min-width:52px;min-height:52px}
html[data-tesla="true"] .race-home .race-league-pagination button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-league-confirm{gap:12px}
html[data-tesla="true"] .race-home .race-league-confirm strong{font-size:15px}
html[data-tesla="true"] .race-home .race-league-confirm button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-league-table{gap:6px}
html[data-tesla="true"] .race-home .race-league-table li{font-size:15px;padding:10px 12px;gap:12px}
html[data-tesla="true"] .race-home .race-league-table small{font-size:13px}
html[data-tesla="true"] .race-home .race-league>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-league>button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-league-rewards{font-size:14px}
html[data-tesla="true"] .race-home .race-league-rewards th,
html[data-tesla="true"] .race-home .race-league-rewards td{padding:10px 6px}
html[data-tesla="true"] .race-home .race-league-rewards td>span{font-size:13px}
html[data-tesla="true"] .race-home .race-league-rewards .icon{width:18px;height:18px;margin-right:4px}
html[data-tesla="true"] .race-home .race-league-challenge strong>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-league-choice small{font-size:14px}

/* 14. Find multiplayer races (rooms + join form, mode = multiplayer). */
html[data-tesla="true"] .race-home .race-social-heading h3{font-size:16px}
html[data-tesla="true"] .race-home .race-social-heading h3>.icon,
html[data-tesla="true"] .race-home .race-social-heading button>.icon,
html[data-tesla="true"] .race-home .race-public-rooms li button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-social-heading button{min-height:52px;font-size:14px}
html[data-tesla="true"] .race-home .race-public-rooms>p{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-home .race-public-rooms li strong,
html[data-tesla="true"] .race-home .race-public-rooms li span{font-size:14px}
html[data-tesla="true"] .race-home .race-public-rooms li small{font-size:13px}
html[data-tesla="true"] .race-home .race-public-rooms li button{min-height:52px;font-size:14px}
html[data-tesla="true"] .race-home .race-bot-note{font-size:14px}
html[data-tesla="true"] .race-home .race-join input,
html[data-tesla="true"] .race-home .race-join button{min-height:52px;font-size:16px}

/* 15. Launch footer inside the panel — shared with the launch-dock area; only the height budget
       (8 + 52 + 8 + 1 = 69px) is assumed by the geometry above. */
html[data-tesla="true"] .race-home .race-options-launch{padding:8px 12px}
html[data-tesla="true"] .race-home .race-options-launch .race-launch-action{gap:12px}
html[data-tesla="true"] .race-home .race-options-launch .race-check{font-size:14px!important;line-height:1.35;min-height:52px}
html[data-tesla="true"] .race-home .race-options-launch .race-check input{width:26px;height:26px;min-height:26px;margin:0 12px 0 0}
html[data-tesla="true"] .race-home .race-options-launch .race-primary{min-height:52px;font-size:15px;padding:8px 12px}
html[data-tesla="true"] .race-home .race-options-launch .race-icon-action{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-options-launch .race-icon-action>.icon{width:22px;height:22px}


/* ===== Garage pages in the race lobby: car & sound choices (Car / Engine sound / Horn selects, en ===== */
@media(max-height:800px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="garage"],
 html[data-tesla="true"] .race-home .race-garage .race-offer{top:62px}
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu[data-menu="garage"],
 html[data-tesla="true"] .race-home.has-setup-footer .race-garage .race-offer{bottom:105px}
 html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-options-head{padding:5px 8px 5px 16px}
 html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-options-head .race-eyebrow{display:none}
 html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-options-head h2{font-size:20px;line-height:1.2}
}
/* A wider garage column where the left side (fixed Car select 300px, showcase
   tools 360px) still has room: 880-24-400-24 leaves 432px. Not at 768 wide. */
@media (min-width:860px) and (max-height:800px) and (min-height:501px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="garage"],
 html[data-tesla="true"] .race-home .race-garage .race-offer{width:400px}
 html[data-tesla="true"] .race-home.is-showroom .race-home-route{max-width:calc(100% - 490px)}
 html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type,
 html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup{max-width:calc(100vw - 482px)}
}


html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-menu-content,
html[data-tesla="true"] .race-garage .race-offer,
html[data-tesla="true"] .race-pro-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:auto;-webkit-overflow-scrolling:touch}
html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-menu-content::-webkit-scrollbar,
html[data-tesla="true"] .race-garage .race-offer::-webkit-scrollbar,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar{width:14px}
html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-menu-content::-webkit-scrollbar-track,
html[data-tesla="true"] .race-garage .race-offer::-webkit-scrollbar-track,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-track{background:#0b141a;border-left:1px solid #22343c}
html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-menu-content::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-garage .race-offer::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-thumb{background:#4f6f7b;border-radius:8px;border:3px solid #0b141a;min-height:56px}
html[data-tesla="true"] .race-stage-menu[data-menu="garage"] .race-menu-content::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-garage .race-offer::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-thumb:active{background:#6fd6c2}

/* ---- 3. The garage page: spacing, labels, selects, body copy, actions ---- */
html[data-tesla="true"] .race-home .race-menu-page.race-garage-editor{padding:12px 14px 16px;gap:14px}
html[data-tesla="true"] .race-garage-editor[data-race-garage-section=upgrades]{gap:10px}
html[data-tesla="true"] .race-garage-editor label{font-size:14px;gap:8px}
html[data-tesla="true"] .race-garage-editor .race-field-label{display:flex;align-items:center;min-height:24px;margin:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#bdced3}
html[data-tesla="true"] .race-garage-editor .race-field-label>.icon{width:22px;height:22px;margin-right:8px;flex-shrink:0}
html[data-tesla="true"] .race-garage-editor select{min-height:52px;padding-top:10px;padding-bottom:10px;font-size:15px;line-height:1.3}
html[data-tesla="true"] .race-equipment-select select{margin-top:6px}
html[data-tesla="true"] .race-upgrade-comparison .race-equipment-levels>label{font-size:13px;gap:4px}
html[data-tesla="true"] .race-upgrade-comparison .race-equipment-levels>label select{min-height:52px;padding-top:10px;padding-bottom:10px;font-size:15px}
html[data-tesla="true"] .race-garage-editor .race-muted,
html[data-tesla="true"] .race-arcade-garage.is-embedded>.race-muted{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-garage-editor .race-icon-action{min-height:56px;font-size:15px}
html[data-tesla="true"] .race-garage-editor .race-icon-action>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-garage-editor .race-icon-action>.icon+span{margin-left:10px}

/* Account sync strip: it sits in .race-menu-content outside .race-menu-page. */
html[data-tesla="true"] .race-stage-menu .race-garage-sync{margin:12px 14px 0;padding:10px;gap:10px;font-size:14px}
html[data-tesla="true"] .race-garage-sync>span{gap:8px}
html[data-tesla="true"] .race-garage-sync p,
html[data-tesla="true"] .race-basic-recovery p{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-garage-sync button,
html[data-tesla="true"] .race-basic-recovery button{min-height:52px;padding:8px 14px;font-size:15px;gap:8px}
html[data-tesla="true"] .race-garage-sync .icon,
html[data-tesla="true"] .race-basic-recovery button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-basic-recovery{gap:10px;padding:12px}

/* ---- 4. Car & sound ---- */
html[data-tesla="true"] .race-garage-card{padding:14px}
html[data-tesla="true"] .race-garage-car-title>.icon{width:28px;height:28px}
html[data-tesla="true"] .race-garage-car-title strong{font-size:18px}
html[data-tesla="true"] .race-garage-car-title small{font-size:13px}
html[data-tesla="true"] .race-showcase-views{gap:10px}
html[data-tesla="true"] .race-showcase-views button{min-height:52px;padding:6px 8px!important;font-size:15px!important;line-height:1.2;white-space:normal}
html[data-tesla="true"] .race-showcase-views button>.icon{width:24px;height:24px;margin-right:6px}
html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup{padding:8px;gap:10px}
html[data-tesla="true"] .race-showcase-tools.is-setup>.race-showcase-views{gap:8px}
html[data-tesla="true"] .race-studio-inspect{height:52px;min-width:52px}
html[data-tesla="true"] .race-studio-inspect>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-app .race-car-condition{min-height:72px;padding:10px 12px;gap:12px}
html[data-tesla="true"] .race-car-condition strong{font-size:16px}
html[data-tesla="true"] .race-car-condition small{font-size:13px;margin-top:5px}
html[data-tesla="true"] .race-car-condition>span>i{height:6px;margin-top:8px}
html[data-tesla="true"] .race-car-condition>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-car-condition>.icon:last-child{width:22px;height:22px}
html[data-tesla="true"] .race-garage-audio{padding:14px}
html[data-tesla="true"] .race-garage-audio>p{font-size:14px;margin-top:10px}
html[data-tesla="true"] .race-garage-editor .race-engine-preview{margin-top:10px}
html[data-tesla="true"] .race-menu-page .race-car-traits{font-size:13px;gap:12px}
html[data-tesla="true"] .race-car-stats{font-size:13px;gap:10px}
html[data-tesla="true"] .race-car-stats>div{grid-template-columns:88px 1fr 66px;gap:8px}
html[data-tesla="true"] .race-car-stats i{height:6px;border-radius:3px}
html[data-tesla="true"] .race-pro-discovery-trigger{min-height:56px;padding:10px 14px;font-size:15px}
html[data-tesla="true"] .race-pro-discovery-trigger>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-pro-discovery-trigger>.icon:last-child{width:20px;height:20px}
/* The Studio Pro dialog it opens. */
html[data-tesla="true"] .race-pro-panel h2{font-size:24px}
html[data-tesla="true"] .race-pro-body{font-size:15px;padding:14px 16px}
html[data-tesla="true"] .race-pro-note{font-size:14px}
html[data-tesla="true"] .race-pro-panel button,
html[data-tesla="true"] .race-pro-panel select,
html[data-tesla="true"] .race-pro-panel a{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-pro-panel footer{gap:10px}
html[data-tesla="true"] .race-pro-panel header button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-pro-body .sound-preview{gap:12px}

/* ---- 5. Section tabs and cosmetics category tabs ---- */
html[data-tesla="true"] .race-equipment-tabs{gap:12px;margin:12px 0}
html[data-tesla="true"] .race-equipment-tabs button,
html[data-tesla="true"] .race-cosmetic-tabs>button{min-height:56px;padding:6px 8px;font-size:15px;line-height:1.2}
html[data-tesla="true"] .race-garage-sections{gap:12px;margin:0}
html[data-tesla="true"] .race-garage-sections button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:6px 8px;font-size:14px;line-height:1.25}
html[data-tesla="true"] .race-garage-sections button>.icon{width:22px;height:22px;margin-bottom:4px}

/* ---- 6. Arcade upgrades ---- */
html[data-tesla="true"] .race-equipment-heading{font-size:15px;gap:10px}
html[data-tesla="true"] .race-equipment-heading>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-equipment-heading>b{font-size:14px}
html[data-tesla="true"] .race-upgrade-part-icon{width:48px;height:48px;flex-basis:48px}
html[data-tesla="true"] .race-upgrade-part-icon>.icon{width:28px;height:28px}
html[data-tesla="true"] .race-upgrade-title strong{font-size:16px}
html[data-tesla="true"] .race-upgrade-title small{font-size:13px}
html[data-tesla="true"] .race-arcade-garage .race-upgrade-wallet{font-size:14px;padding:6px 9px}
html[data-tesla="true"] .race-repair-warning{font-size:15px;padding:10px}
html[data-tesla="true"] .race-upgrade-comparison{padding:10px 12px}
html[data-tesla="true"] .race-upgrade-comparison .race-equipment-levels{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:10px}
html[data-tesla="true"] .race-upgrade-comparison .race-equipment-levels>.icon{width:24px;height:24px;margin-top:20px}
html[data-tesla="true"] .race-upgrade-next small{font-size:13px}
html[data-tesla="true"] .race-upgrade-next strong{font-size:19px}
html[data-tesla="true"] .race-upgrade-stats>div{padding:7px 0;gap:10px}
html[data-tesla="true"] .race-upgrade-stats dt,
html[data-tesla="true"] .race-upgrade-stats dd{font-size:15px}
html[data-tesla="true"] .race-upgrade-stat-bar{height:7px}
html[data-tesla="true"] .race-upgrade-purchase{gap:12px;margin-top:4px}
html[data-tesla="true"] .race-upgrade-purchase>button{min-height:56px;padding:8px 12px;font-size:15px}
html[data-tesla="true"] .race-upgrade-purchase>button:not(.race-primary){flex:0 1 108px}
html[data-tesla="true"] .race-upgrade-purchase>.race-primary>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-arcade-earned{font-size:14px;gap:8px}
html[data-tesla="true"] .race-arcade-earned>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-conditions{font-size:14px;gap:8px}
html[data-tesla="true"] .race-conditions>.icon{width:20px;height:20px}
html[data-tesla="true"] .race-tyre-grid{gap:12px}
html[data-tesla="true"] .race-tyre-grid button{min-height:56px;padding:10px;gap:6px}
html[data-tesla="true"] .race-tyre-grid strong{font-size:16px;line-height:1.25}
html[data-tesla="true"] .race-tyre-grid span{font-size:14px;line-height:1.3}
html[data-tesla="true"] .race-equipment-stats>div{padding:8px 0;gap:12px}
html[data-tesla="true"] .race-maintenance-parts dt,
html[data-tesla="true"] .race-maintenance-parts dd{font-size:15px}
html[data-tesla="true"] .race-maintenance-parts dt{gap:8px}
html[data-tesla="true"] .race-maintenance-parts dt>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-maintenance-parts dd{gap:6px;min-width:120px}
html[data-tesla="true"] .race-maintenance-parts progress{height:8px}
html[data-tesla="true"] .race-arcade-garage>.race-primary{min-height:56px;font-size:15px;gap:8px}
html[data-tesla="true"] .race-arcade-garage>.race-primary>.icon{width:22px;height:22px}

/* ---- 7. Race cosmetics grid ---- */
html[data-tesla="true"] .race-cosmetic-grid .race-cosmetic-tile{gap:6px;padding:10px}
html[data-tesla="true"] .race-cosmetic-swatch{height:44px;border-radius:8px}
html[data-tesla="true"] .race-cosmetic-swatch>.icon{width:28px;height:28px}
html[data-tesla="true"] .race-cosmetic-motif{font-size:26px}
html[data-tesla="true"] .race-cosmetic-swatch>i{right:4px;top:4px;padding:3px}
html[data-tesla="true"] .race-cosmetic-swatch>i .icon{width:18px;height:18px}
html[data-tesla="true"] .race-cosmetic-grid .race-cosmetic-tile>strong{font-size:15px;line-height:1.25}
html[data-tesla="true"] .race-cosmetic-grid .race-cosmetic-price{font-size:14px}
html[data-tesla="true"] .race-cosmetic-grid .race-cosmetic-earned{font-size:13px}
html[data-tesla="true"] .race-cosmetic-tile .race-cosmetic-season{font-size:12px;letter-spacing:1px}

/* ---- 8. Car upgrades fieldset: paint presets, swatches, custom paint ---- */
html[data-tesla="true"] .race-home .race-upgrade-parts{padding:14px;gap:14px}
html[data-tesla="true"] .race-upgrade-parts legend{font-size:16px;padding:0 6px}
html[data-tesla="true"] .race-upgrade-parts legend>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-upgrade-parts>p{font-size:14px}
html[data-tesla="true"] .race-paint-heading{font-size:15px}
html[data-tesla="true"] .race-paint-heading output{font-size:13px}
html[data-tesla="true"] .race-paint-presets{gap:12px}
html[data-tesla="true"] .race-paint-presets button{min-height:64px;padding:8px!important;font-size:14px!important;line-height:1.3}
html[data-tesla="true"] .race-paint-presets .race-dual-swatch{width:34px;height:44px;margin-right:9px}
html[data-tesla="true"] .race-paint-presets small{font-size:12px;margin-top:3px}
html[data-tesla="true"] .race-paint-presets button>.icon{width:20px;height:20px;margin-left:4px}
html[data-tesla="true"] .race-paint-options{gap:12px}
html[data-tesla="true"] .race-paint-options button{min-height:56px}
html[data-tesla="true"] .race-paint-swatch{height:40px;border-radius:6px}
html[data-tesla="true"] .race-paint-symbol{width:30px;height:30px}
html[data-tesla="true"] .race-paint-symbol .icon{width:20px;height:20px}
html[data-tesla="true"] .race-custom-paint{grid-template-columns:1fr 76px!important;gap:10px}
html[data-tesla="true"] .race-custom-paint input{height:56px;min-height:56px;min-width:56px;padding:4px!important;border-radius:10px}

/* ---- 9. The offer card (.race-offer) ---- */
html[data-tesla="true"] .race-garage .race-offer{padding:16px 16px 18px}
html[data-tesla="true"] .race-garage .race-offer>div{margin-bottom:14px}
html[data-tesla="true"] .race-offer .race-eyebrow{font-size:12px;letter-spacing:1.4px;margin-bottom:8px}
html[data-tesla="true"] .race-offer h2{font-size:24px;line-height:1.2}
html[data-tesla="true"] .race-home .race-offer p{font-size:15px;line-height:1.45;margin:10px 0}
html[data-tesla="true"] .race-offer>div>strong{display:block;font-size:18px;margin:4px 0 6px}
html[data-tesla="true"] .race-offer .sound-preview{gap:12px;margin-top:12px}
html[data-tesla="true"] .race-offer .sound-preview button{min-height:52px;padding:10px 14px;font-size:15px;line-height:1.3;flex:1 1 140px}
html[data-tesla="true"] .race-offer .sound-preview small{font-size:13px}
html[data-tesla="true"] .race-garage .race-offer>a,
html[data-tesla="true"] .race-garage .race-offer>button{min-height:56px;margin-top:12px;padding:10px 16px;font-size:15px;line-height:1.3;justify-content:center;align-items:center;text-align:center}


/* ===== Lobby (garage screen, .race-display.race-home) and its top bar: course card (.race-home-ro ===== */
/* 1. No page-level scrolling in the lobby: the screen is the scroller's parent, never the page. */
@media(min-height:501px){html[data-tesla="true"].race-document{overflow:hidden;overscroll-behavior:none}
html[data-tesla="true"] body.race-body{overflow:hidden;overscroll-behavior:none}}
html[data-tesla="true"] .race-display.race-home{overflow:hidden;overscroll-behavior:contain}

/* 2. Top bar: 62 px bar, 52 px targets, 12 px gaps, 24 px glyphs. */
/* The bar is a row of the shell now; its height comes from --shell-header. */
html[data-tesla="true"] .race-display.race-home .topbar{padding:0 14px}
html[data-tesla="true"] .race-display .topbar .brand{gap:0}
html[data-tesla="true"] .race-display .topbar .brand>*+*{margin-left:10px}
html[data-tesla="true"] .race-display .topbar .brand a{min-height:52px}

html[data-tesla="true"] .race-display .race-language{min-width:52px}
html[data-tesla="true"] .race-display .race-language-control{min-width:52px;min-height:52px;padding:0 10px;font-size:15px;font-weight:700;letter-spacing:.04em}
html[data-tesla="true"] .race-display .race-language-control select{min-height:52px}
html[data-tesla="true"] .race-display .race-language-error{top:58px;font-size:14px;line-height:1.4}
html[data-tesla="true"] .race-home .topbar .session-pill{min-height:36px;padding:0 14px;font-size:12px;letter-spacing:.1em}
html[data-tesla="true"] .race-display .topbar .session-pill em{display:inline}
html[data-tesla="true"] .race-display .topbar .top-actions{gap:12px}
html[data-tesla="true"] .race-display .topbar .top-actions>.account-btn{width:52px;min-width:52px;height:52px;min-height:52px;padding:0;border-radius:12px}
html[data-tesla="true"] .race-display .topbar .top-actions>.race-wallet-trigger{width:auto;min-width:60px;max-width:110px;min-height:52px;padding:4px 8px}
html[data-tesla="true"] .race-display .topbar .top-actions .icon{width:24px;height:24px}
html[data-tesla="true"] .race-display .topbar .top-actions>.race-wallet-trigger>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-display .topbar .race-wallet-trigger>b{font-size:13px}
html[data-tesla="true"] .race-display .topbar .account-btn{font-size:17px}
html[data-tesla="true"] .race-display .topbar .account-btn .race-glyph{width:26px;height:26px}
html[data-tesla="true"] .race-display .race-friends-trigger>b{min-width:20px;line-height:20px;font-size:12px;border-radius:10px;right:-2px;top:-2px}

/* 3. Cards under the bar: readable eyebrows (12 px), body 15 px, headings a step up. */
html[data-tesla="true"] .race-home .race-eyebrow{font-size:12px;letter-spacing:1.2px}
html[data-tesla="true"] .race-home-route{top:96px;padding:14px 18px 14px 14px;max-width:420px}
html[data-tesla="true"] .race-home-route-icon{width:52px;height:52px;margin-right:14px}
html[data-tesla="true"] .race-home-route-icon .icon{width:26px;height:26px}
html[data-tesla="true"] .race-home-route .race-eyebrow{font-size:12px;letter-spacing:1.2px;margin-bottom:5px}
html[data-tesla="true"] .race-home-route h1{font-size:24px;line-height:1.2}
html[data-tesla="true"] .race-home-route p{margin-top:5px;font-size:15px;line-height:1.4}
html[data-tesla="true"] .race-home.is-showroom .race-home-route>div>p{font-size:14px}
html[data-tesla="true"] .race-home .race-tour-entry{top:86px;right:24px}
html[data-tesla="true"] .race-tour-entry button{min-height:52px;padding:8px 14px;font-size:15px}
html[data-tesla="true"] .race-tour-help>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-home-challenge{top:156px;max-width:320px;padding:8px 0 8px 18px}
html[data-tesla="true"] .race-home-challenge .race-eyebrow{font-size:12px;letter-spacing:1.2px}
html[data-tesla="true"] .race-home-challenge>strong{font-size:19px}
html[data-tesla="true"] .race-home-challenge p{max-width:none;font-size:15px;line-height:1.45}
html[data-tesla="true"] .race-league-challenge strong{font-size:16px}
html[data-tesla="true"] .race-league-challenge p{font-size:14px}
html[data-tesla="true"] .race-league-challenge>div{font-size:13px}
html[data-tesla="true"] .race-home-readout{bottom:195px}
html[data-tesla="true"] .race-home-readout small{font-size:12px;letter-spacing:1.2px}

/* 4. Launch dock: 52 px rows, 12 px gaps, 24 px glyphs, 15-17 px labels.
   Height 6+52+5+1+5+52+6 = 127 px, bottom 56 → top edge 487 at 670. */
html[data-tesla="true"] .race-launch-dock{bottom:56px;padding:6px 12px}
html[data-tesla="true"] .race-launch-choices{gap:12px;padding-bottom:5px}
html[data-tesla="true"] .race-home .race-launch-choices{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content max-content;gap:12px}
html[data-tesla="true"] .race-home .race-launch-choices button{min-height:52px;padding:5px 10px}
html[data-tesla="true"] .race-launch-choices .icon{width:24px;height:24px;margin-right:12px}
html[data-tesla="true"] .race-dock-choice small{font-size:12px;letter-spacing:.8px}
html[data-tesla="true"] .race-dock-choice strong{font-size:16px}
html[data-tesla="true"] .race-home .race-launch-choices .race-online-toggle,
html[data-tesla="true"] .race-home .race-launch-choices .race-options-toggle{font-size:15px;padding:5px 8px}
html[data-tesla="true"] .race-home .race-launch-choices .race-online-toggle>.icon,
html[data-tesla="true"] .race-home .race-launch-choices .race-options-toggle>.icon{margin-right:8px}
html[data-tesla="true"] .race-launch-action{grid-template-columns:minmax(0,1fr) 240px;gap:12px;padding-top:5px}
html[data-tesla="true"] .race-home .race-check{min-height:52px;font-size:15px!important;line-height:1.35}
html[data-tesla="true"] .race-home .race-check input{width:26px;height:26px;min-height:26px;margin:0 12px 0 0}
html[data-tesla="true"] .race-launch-action button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-launch-action .race-primary,
html[data-tesla="true"] .race-home .race-primary{min-height:52px;padding:10px 16px;font-size:17px}
/* The same launch action inside the options panel footer (350 px wide): one step smaller so "Create private room" fits one line. */
html[data-tesla="true"] .race-options-launch{padding:8px 12px}
html[data-tesla="true"] .race-options-launch .race-launch-action{grid-template-columns:minmax(0,1fr) minmax(170px,.85fr);gap:10px}
html[data-tesla="true"] .race-options-launch .race-launch-action .race-check{font-size:14px!important;line-height:1.35}
html[data-tesla="true"] .race-options-launch .race-primary{min-height:52px;padding:8px 10px;font-size:15px}
html[data-tesla="true"] .race-options-launch>button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-options-launch .icon{width:22px;height:22px}

/* 5. Footer: a 52 px strip whose links are real targets. */
html[data-tesla="true"] .race-home .race-page-footer{height:52px;left:24px;right:24px;font-size:13px}
html[data-tesla="true"] .race-home .race-page-footer>span{font-size:13px}
html[data-tesla="true"] .race-home .race-page-footer a{min-height:52px;min-width:64px;padding:0 10px;font-size:13px;border-radius:10px}
html[data-tesla="true"] .race-display .race-page-footer>*+*{margin-left:16px}

/* 6. Panels that hang from the bar and must clear the taller dock/footer
   (their inner layout belongs to the panel sheet; only the frame is set here). */
html[data-tesla="true"] .race-home .race-stage-menu{top:86px}
html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu{bottom:132px}
html[data-tesla="true"] .race-home .race-garage .race-offer{top:86px;bottom:195px}
html[data-tesla="true"] .race-home .race-showcase-tools{bottom:195px}
html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup{bottom:132px}
html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-garage-editor>label:first-of-type{top:212px}
html[data-tesla="true"] .race-home>.race-notice{top:86px;font-size:14px}
html[data-tesla="true"] .race-home .race-notice button{flex-basis:52px;min-height:52px}
html[data-tesla="true"] .race-scene-status{font-size:15px}
html[data-tesla="true"] .race-scene-status h2{font-size:21px}
html[data-tesla="true"] .race-scene-status p{font-size:15px}
html[data-tesla="true"] .race-display .race-scene-status button,
html[data-tesla="true"] .race-display .race-scene-status a{min-height:52px;font-size:15px}

/* 7. One scroll container each, with a scrollbar a finger can find. The lobby wallet page
   stops being a scroller inside the panel's scroller. */
html[data-tesla="true"] .race-lobby-wallet .race-menu-page{max-height:none;overflow:visible}
html[data-tesla="true"] .race-home .race-garage .race-offer,
html[data-tesla="true"] .race-home .race-entry>.race-login,
html[data-tesla="true"] .race-tour-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:#6f8f97 #0e181e}
html[data-tesla="true"] .race-home .race-garage .race-offer::-webkit-scrollbar,
html[data-tesla="true"] .race-home .race-entry>.race-login::-webkit-scrollbar,
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar{width:14px}
html[data-tesla="true"] .race-home .race-garage .race-offer::-webkit-scrollbar-track,
html[data-tesla="true"] .race-home .race-entry>.race-login::-webkit-scrollbar-track,
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar-track{background:#0e181e;border-left:1px solid #2a3b43}
html[data-tesla="true"] .race-home .race-garage .race-offer::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-home .race-entry>.race-login::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar-thumb{background:#6f8f97;border-radius:7px;border:3px solid #0e181e;min-height:48px}

/* 8. Racing guide dialog (portal under <body>, so still under html[data-tesla]). */
html[data-tesla="true"] .race-tour-panel button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-tour-heading h2{font-size:21px}
html[data-tesla="true"] .race-tour-progress{font-size:13px}
html[data-tesla="true"] .race-tour-copy{font-size:16px}
html[data-tesla="true"] .race-tour-tip{font-size:14px}
html[data-tesla="true"] .race-tour-tip>.icon{width:20px;height:20px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored .race-tour-heading h2{font-size:18px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored h3{font-size:20px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored .race-tour-copy{font-size:15px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored .race-tour-tip{font-size:13px;padding:10px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored .race-tour-panel button{min-height:52px;padding:8px 10px;font-size:15px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored .race-tour-symbol{width:44px;height:44px}
html[data-tesla="true"] .race-tour-backdrop.is-anchored .race-tour-step-heading{grid-template-columns:44px minmax(0,1fr)}

/* 9. Signed-out entry on the same screen. */
html[data-tesla="true"] .race-home .race-entry-caption{top:96px}
html[data-tesla="true"] .race-home .race-entry-caption .race-eyebrow{font-size:12px}
html[data-tesla="true"] .race-home .race-entry-caption p{font-size:15px;max-width:300px}
html[data-tesla="true"] .race-entry-course,
html[data-tesla="true"] .race-entry-season{font-size:14px!important}
html[data-tesla="true"] .race-entry-course .icon,
html[data-tesla="true"] .race-entry-season .icon{width:22px;height:22px}
html[data-tesla="true"] .race-home .race-entry>.race-login{top:86px;bottom:auto;max-height:calc(100% - 146px);width:350px;padding:20px}
html[data-tesla="true"] .race-home .race-login>.race-eyebrow{font-size:12px}
html[data-tesla="true"] .race-home .race-login>p{font-size:15px}
html[data-tesla="true"] .race-home .race-login label{font-size:14px}
html[data-tesla="true"] .race-home .race-login input{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-home .race-login .race-primary{min-height:52px}
html[data-tesla="true"] .race-home .race-login>.race-muted{font-size:13px}
html[data-tesla="true"] .race-home .race-login>button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-home .race-login>.race-login-notice{font-size:14px}
html[data-tesla="true"] .race-home .race-entry-controls{bottom:60px;right:398px}
html[data-tesla="true"] .race-entry-controls b{font-size:14px}
html[data-tesla="true"] .race-entry-controls small{display:block;font-size:12px}
html[data-tesla="true"] .race-entry-controls .icon{width:24px;height:24px}

/* 10. Short entries of the matrix (960x540, 1024x600, 1280x600/640): same targets,
   a smaller readout and a two-line stage description so nothing stacks. */
@media(max-height:650px){
 html[data-tesla="true"] .race-home-readout strong{font-size:44px;letter-spacing:-2px}
 html[data-tesla="true"] .race-home-stage strong{font-size:30px;letter-spacing:-1px}
 html[data-tesla="true"] .race-home-readout>span{gap:6px}
 html[data-tesla="true"] .race-home-challenge p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px}
 html[data-tesla="true"] .race-home-route p{font-size:14px}
 html[data-tesla="true"] .race-home .race-entry-caption{top:86px}
 html[data-tesla="true"] .race-home .race-entry-caption p{font-size:14px}
 html[data-tesla="true"] .race-home .race-entry>.race-login{padding:16px}
 html[data-tesla="true"] .race-home .race-entry-controls{bottom:60px}
}

/* 11. Narrow entries (600x900): four equal dock cells, 8 px gaps, cards stacked lower. */
@media(max-width:700px){
 html[data-tesla="true"] .race-display .topbar .top-actions{gap:8px}
 html[data-tesla="true"] .race-home .race-launch-choices{grid-template-columns:minmax(0,1fr) minmax(0,1fr) max-content max-content;gap:8px}
 html[data-tesla="true"] .race-home .race-launch-choices button{padding:5px 8px}
 html[data-tesla="true"] .race-launch-choices .icon{margin-right:8px}
 html[data-tesla="true"] .race-dock-choice strong{font-size:15px}
 html[data-tesla="true"] .race-dock-choice small{font-size:11px;letter-spacing:.5px}
 html[data-tesla="true"] .race-home .race-launch-choices .race-online-toggle,
 html[data-tesla="true"] .race-home .race-launch-choices .race-options-toggle{font-size:14px}
 html[data-tesla="true"] .race-launch-action{grid-template-columns:minmax(0,1fr) 180px;gap:10px}
 html[data-tesla="true"] .race-launch-action .race-check{font-size:14px!important}
 html[data-tesla="true"] .race-launch-action .race-primary{padding:8px 10px;font-size:15px}
 html[data-tesla="true"] .race-home .race-tour-entry{top:214px;right:16px}
 html[data-tesla="true"] .race-home .race-home-challenge{top:278px;max-width:none;padding:2px 0 2px 12px}
 html[data-tesla="true"] .race-home .race-page-footer{left:15px;right:15px}
 /* Card positioning under 700px belongs to the flow layout in racing-hero.css. */
}


/* ===== In-race screen: .race-play top bar (stage eyebrow, track h1, TIME/SCORE/RINGS numbers, Pau ===== */
/* 1. Top bar: same 72px box, larger numbers inside it, 52px Pause. */
html[data-tesla="true"] .race-display .race-play-top{padding:9px 18px}
html[data-tesla="true"] .race-display .race-play-top .race-eyebrow{font-size:12px;letter-spacing:1.4px;margin-bottom:3px}
html[data-tesla="true"] .race-display .race-play-top h1{font-size:22px;line-height:1.15}
html[data-tesla="true"] .race-display .race-live-stats small{font-size:12px;letter-spacing:.8px;line-height:1.2}
html[data-tesla="true"] .race-display .race-live-stats b{font-size:26px;line-height:1.15}
html[data-tesla="true"] .race-display .race-live-stats>span{min-width:48px}
html[data-tesla="true"] .race-display .race-live-stats>*+*{margin-left:22px}
html[data-tesla="true"] .race-display .race-play-top .race-icon-action{min-height:52px;padding:8px 16px;font-size:15px}
html[data-tesla="true"] .race-display .race-play-top .race-icon-action>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-display .race-play .race-icon-action>.icon+span{margin-left:10px}
html[data-tesla="true"] .race-display .race-progress{height:5px}

/* 2. Footer: 72px, 52px buttons, engine name and controller readable. */
html[data-tesla="true"] .race-display .race-play-footer{height:72px;padding:9px 18px}
html[data-tesla="true"] .race-display .race-play-footer>span{font-size:15px}
html[data-tesla="true"] .race-display .race-play-footer small{font-size:12px;letter-spacing:.6px;margin-top:3px}
html[data-tesla="true"] .race-display .race-play-footer .race-icon-action{min-height:52px;padding:8px 16px;font-size:15px}
html[data-tesla="true"] .race-display .race-play-footer .race-icon-action>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-display .race-play-footer>*+*{margin-left:12px}
html[data-tesla="true"] .race-pad-release-hint{bottom:84px;padding:10px 14px;font-size:15px}

/* 3. HUD instruments: positions unchanged, type larger. The objective is capped
   so it can never reach the nitro meter below it (84px top + 176px bottom + 82px meter + 8px). */
html[data-tesla="true"] .race-display .race-speed{padding:12px 14px}
html[data-tesla="true"] .race-display .race-speed strong{font-size:44px}
html[data-tesla="true"] .race-display .race-speed span{font-size:12px;letter-spacing:.8px;margin-top:4px}
html[data-tesla="true"] .race-display .race-objective{padding:10px 12px;font-size:13px;line-height:1.4;max-width:calc(100% - 36px);overflow:hidden}
html[data-tesla="true"] .race-display .has-multiplayer .race-objective{max-width:calc(100% - 290px)}
html[data-tesla="true"] .race-display .race-play .race-objective{max-height:calc(100% - 258px)}
html[data-tesla="true"] .race-display .has-touch .race-objective{max-height:calc(100% - 350px)}
html[data-tesla="true"] .race-link-state{font-size:12px;letter-spacing:.8px}
html[data-tesla="true"] .race-display .race-scenario-guidance{max-width:440px}
html[data-tesla="true"] .race-display .race-sector-live{grid-template-columns:20px minmax(0,1fr) auto;column-gap:8px;margin-top:8px;padding-top:8px;font-size:13px}
html[data-tesla="true"] .race-sector-live>span{font-size:12px}
html[data-tesla="true"] .race-sector-live>p{font-size:13px}
html[data-tesla="true"] .race-sector-live>small,html[data-tesla="true"] .race-scenario-live>small{font-size:12px}
html[data-tesla="true"] .race-display .race-scenario-live,html[data-tesla="true"] .race-display .race-track-live{grid-template-columns:20px auto minmax(0,1fr);column-gap:8px;margin-top:8px;padding-top:8px;font-size:13px}
html[data-tesla="true"] .race-sector-live>.icon,html[data-tesla="true"] .race-scenario-live>.icon,html[data-tesla="true"] .race-track-live>.icon{width:20px;height:20px}
html[data-tesla="true"] .race-league-challenge.live{padding:10px}
html[data-tesla="true"] .race-league-challenge.live strong{font-size:14px}
html[data-tesla="true"] .race-league-challenge.live>div{font-size:13px}
html[data-tesla="true"] .race-league-challenge strong>.icon{width:22px;height:22px}

html[data-tesla="true"] .race-nitro{width:232px;max-width:232px;padding:10px 12px}
html[data-tesla="true"] .race-nitro-label{grid-template-columns:22px minmax(0,1fr) auto;column-gap:8px;font-size:12px;letter-spacing:1.2px}
html[data-tesla="true"] .race-nitro-label>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-nitro-label strong{font-size:16px}
html[data-tesla="true"] .race-nitro-meter{height:8px;border-radius:4px}
html[data-tesla="true"] .race-nitro-caption{min-height:16px;font-size:12px;letter-spacing:.2px}

html[data-tesla="true"] .race-display .race-stage-view>.race-live-board{width:232px;padding:10px}
html[data-tesla="true"] .race-live-board-title{font-size:12px;letter-spacing:.8px}
html[data-tesla="true"] .race-live-board-title>span>.icon{width:18px;height:18px;margin-right:6px}
html[data-tesla="true"] .race-live-board-title>span+span>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-live-board ol{margin-top:6px}
html[data-tesla="true"] .race-live-board li{grid-template-columns:22px minmax(0,1fr);column-gap:6px;padding:5px 4px;font-size:13px}
html[data-tesla="true"] .race-live-driver small{font-size:11px}
html[data-tesla="true"] .race-live-gap{font-size:12px}
html[data-tesla="true"] .race-nameplates>[data-player-id],html[data-tesla="true"] .race-nameplates>[data-player-id]>span{max-width:180px}
html[data-tesla="true"] .race-nameplates>[data-player-id]>span{font-size:14px;padding:5px 8px}

/* Inventory moves left of the standings column (board 232px + 18px + 12px gap) so the two never share x. */
html[data-tesla="true"] .race-display .race-items{right:262px;padding:8px}
html[data-tesla="true"] .race-display .race-items>.race-item-button{min-height:52px;font-size:14px}
html[data-tesla="true"] .race-items strong,html[data-tesla="true"] .race-items span,html[data-tesla="true"] .race-items>div>span{font-size:12px}
html[data-tesla="true"] .race-app .race-effect-badge{font-size:12px;padding:3px 6px}
html[data-tesla="true"] .race-item-target-shield{font-size:12px}

/* 4. Countdown */
html[data-tesla="true"] .race-countdown{min-width:220px;padding:16px 32px}
html[data-tesla="true"] .race-countdown-label{font-size:15px;letter-spacing:1.6px;max-width:320px}

/* 5. Pause / lobby dialog: fills the overlay (top bar to footer), one scroller
   (.race-lobby-body), and one action row at its foot.

   Every size here is a token, not a literal. This block used to set 24px
   headings and 15px body copy whatever the screen was, so the same lobby read
   identically at 880x670 and at 1920x1200 — the car's split view and its
   full-width panel are not the same screen and must not be typeset as one.
   The --t-* steps carry the curve (app-density.css), --ctl-h-lg the control
   height, --s*/--card-pad the rhythm; the floors keep the arm's-length read at
   the compact sizes the car actually reports, which is why nothing shifts
   there and only the larger panels grow. Touch targets stay absolute: 48px is
   a fact about thumbs, not about screens. */
html[data-tesla="true"] .race-display .race-play .race-overlay{bottom:73px;padding:var(--s2,6px) var(--s5,16px);overflow:hidden}
html[data-tesla="true"] .race-display .race-dialog{max-width:460px;height:100%;max-height:100%;padding:var(--s4,12px) var(--s5,16px);margin:0}
html[data-tesla="true"] .race-display .race-dialog.race-pair-dialog{max-width:720px;margin:0 auto}
html[data-tesla="true"] .race-display .race-dialog:not(.race-results-dialog){position:relative}
html[data-tesla="true"] .race-display .race-dialog>.race-eyebrow{font-size:var(--t-micro,11px);letter-spacing:1.6px}
html[data-tesla="true"] .race-display .race-dialog h2{font-size:var(--t-head,20px);line-height:1.2}
html[data-tesla="true"] .race-display .race-dialog p{font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-display .race-dialog a{font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-display .race-lobby-body{flex:1 1 auto;padding:0 8px 4px 0}
html[data-tesla="true"] .race-lobby-body>*+*{margin-top:var(--s4,12px)}
html[data-tesla="true"] .race-display .race-dialog button{min-height:max(48px,var(--ctl-h-lg,52px));font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-display .race-dialog select{min-height:max(48px,var(--ctl-h-lg,52px));padding-top:var(--s3,8px);padding-bottom:var(--s3,8px);font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-display .race-dialog .race-icon-action>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-display .race-dialog>.race-lobby-actions>*{min-height:max(48px,var(--ctl-h-lg,52px));padding:10px 14px;font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-display .race-lobby-body .race-ready-guide strong{font-size:var(--t-ctl,14px);margin-bottom:6px}
html[data-tesla="true"] .race-display .race-lobby-body .race-ready-guide span{font-size:var(--t-ctl,14px);line-height:1.45}
html[data-tesla="true"] .race-display .race-lobby-body label{font-size:var(--t-ctl,14px);gap:8px}
html[data-tesla="true"] .race-display .race-lobby-body .race-field-label{min-height:24px}
html[data-tesla="true"] .race-display .race-lobby-body .race-field-label>.icon{width:22px;height:22px;margin-right:8px}
html[data-tesla="true"] .race-lobby-wallet .race-menu-page,html[data-tesla="true"] .race-lobby-garage-page .race-menu-content{max-height:none;overflow:visible}
html[data-tesla="true"] .race-dialog .race-more>summary{min-height:max(48px,var(--ctl-h-lg,52px));padding:10px 12px;font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-dialog .race-more>summary>.icon{width:22px;height:22px;margin-right:10px}
html[data-tesla="true"] .race-dialog .race-more>summary::after{font-size:var(--t-head,20px)}
html[data-tesla="true"] .race-dialog .race-scenario-brief{padding:var(--s3,8px) var(--s4,12px);font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-display .race-dialog .race-scenario-brief p{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-scenario-brief>p>span{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-sector-plan>li{grid-template-columns:calc(22 * var(--ui-scale,1px)) minmax(0,1fr);column-gap:10px;margin:10px 0}
html[data-tesla="true"] .race-dialog .race-sector-plan .icon,html[data-tesla="true"] .race-dialog .race-track-brief>.icon,html[data-tesla="true"] .race-dialog .race-item-brief>.icon{width:22px;height:22px;margin-top:0}
html[data-tesla="true"] .race-dialog .race-sector-plan strong,html[data-tesla="true"] .race-dialog .race-sector-plan span{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-scenario-brief .race-track-brief{grid-template-columns:calc(22 * var(--ui-scale,1px)) minmax(0,1fr);column-gap:10px}
html[data-tesla="true"] .race-dialog .race-track-brief small{font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-dialog .race-conditions{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-item-brief{padding:var(--card-pad,12px);font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-league-challenge strong{font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-dialog .race-league-challenge p,html[data-tesla="true"] .race-dialog .race-league-challenge>div{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-arcade-earned{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-room-details{padding:var(--card-pad,12px);font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-roster .race-room-share small{font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-dialog .race-roster .race-room-share strong{font-size:var(--n-sm,20px)}
html[data-tesla="true"] .race-dialog .race-roster .race-room-share button{min-height:max(48px,var(--ctl-h-lg,52px));min-width:84px;padding:8px 12px;font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-roster .race-room-share button>.icon,html[data-tesla="true"] .race-dialog .race-social-heading .icon{width:22px;height:22px}
html[data-tesla="true"] .race-dialog .race-roster li{padding:var(--s3,8px) 0}
html[data-tesla="true"] .race-dialog .race-driver-name{font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-dialog .race-driver>small{font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-dialog .race-driver-detail{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-roster .race-roster-hint,html[data-tesla="true"] .race-display .race-dialog .race-roster p{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-kick-player{min-height:max(48px,var(--ctl-h-lg,52px));padding:6px 12px;font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-social-heading h3{font-size:var(--t-title,16px)}
html[data-tesla="true"] .race-dialog .race-social-heading button{min-height:max(48px,var(--ctl-h-lg,52px));padding:8px 12px;font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-chat-messages{max-height:none;overflow:visible}
html[data-tesla="true"] .race-dialog .race-chat-messages strong{font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-dialog .race-chat-messages span{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-chat-templates{gap:10px}
html[data-tesla="true"] .race-dialog .race-chat-templates button{min-height:max(48px,var(--ctl-h-lg,52px));padding:8px 10px;font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-chat-hint{font-size:var(--t-micro,11px)!important}
html[data-tesla="true"] .race-dialog .race-gamepad-status{padding:var(--s3,8px) var(--s4,12px)}
html[data-tesla="true"] .race-dialog .race-gamepad-heading>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-dialog .race-gamepad-heading h3{font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-dialog .race-gamepad-heading small{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-gamepad-status p,html[data-tesla="true"] .race-dialog .race-gamepad-status.is-compact p{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-gamepad-refresh{min-height:max(48px,var(--ctl-h-lg,52px))}
html[data-tesla="true"] .race-dialog .race-gamepad-input-check>summary{min-height:max(48px,var(--ctl-h-lg,52px));font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-dialog .race-gamepad-input-check>summary>.icon,html[data-tesla="true"] .race-dialog .race-gamepad-refresh>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-dialog .race-gamepad-input-check dl>div{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-dialog .race-gamepad-test-buttons>span{padding:8px;font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-dialog .race-recovery p{font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-dialog .race-recovery button{min-height:max(48px,var(--ctl-h-lg,52px));margin-bottom:8px}
html[data-tesla="true"] .race-display .race-pair{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-pair h3{font-size:var(--t-title,16px)}
html[data-tesla="true"] .race-pair-steps li{font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-pair-steps li>.icon{width:20px;height:20px}
html[data-tesla="true"] .race-display .race-pair p{font-size:var(--t-body,13px);max-width:320px}
html[data-tesla="true"] .race-display .race-pair button,html[data-tesla="true"] .race-display .race-pair a{min-height:max(48px,var(--ctl-h-lg,52px));font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-pair-confirmed>strong{font-size:var(--t-title,16px)}
html[data-tesla="true"] .race-pair .race-match-code{font-size:32px}
html[data-tesla="true"] .race-controller-link{font-size:var(--t-small,12px)}
html[data-tesla="true"] .race-controller-link input{min-height:max(48px,var(--ctl-h-lg,52px));font-size:var(--t-ctl,14px)}
html[data-tesla="true"] .race-pair .race-pair-device-link{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-pair-link-warning{font-size:var(--t-body,13px)}

/* 6. Results: same full-height dialog, .race-result-body is the only scroller. */
html[data-tesla="true"] .race-results{flex:1 1 auto;min-height:0}
html[data-tesla="true"] .race-result-body{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding-right:8px}
html[data-tesla="true"] .race-result-body>*+*{margin-top:12px}
html[data-tesla="true"] .race-result-mark{height:22px;margin-bottom:10px}
html[data-tesla="true"] .race-result-stats{column-gap:14px}
html[data-tesla="true"] .race-result-stats small{font-size:12px}
html[data-tesla="true"] .race-result-stats strong{font-size:28px}
html[data-tesla="true"] .race-results .race-result-save,html[data-tesla="true"] .race-results .race-result-best,html[data-tesla="true"] .race-results .race-pairing-time,html[data-tesla="true"] .race-results .race-result-wait{font-size:14px;line-height:1.45}
html[data-tesla="true"] .race-result-board-note{font-size:14px}
html[data-tesla="true"] .race-result-actions{padding-top:12px}
html[data-tesla="true"] .race-result-actions>button{margin-bottom:10px}
html[data-tesla="true"] .race-result-secondary{column-gap:12px}
html[data-tesla="true"] .race-results .race-result-actions button{min-height:52px;padding:10px;font-size:15px}
html[data-tesla="true"] .race-dialog .race-scenario-result,html[data-tesla="true"] .race-dialog .race-track-result{grid-template-columns:22px minmax(0,1fr);column-gap:12px}
html[data-tesla="true"] .race-dialog .race-scenario-result>.icon,html[data-tesla="true"] .race-dialog .race-track-result>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-dialog .race-scenario-result strong,html[data-tesla="true"] .race-dialog .race-track-result strong{font-size:15px}
html[data-tesla="true"] .race-dialog .race-scenario-result span,html[data-tesla="true"] .race-dialog .race-track-result span{font-size:13px}
html[data-tesla="true"] .race-dialog .race-recap{font-size:14px}
html[data-tesla="true"] .race-dialog .race-result-receipt{padding:10px;font-size:14px}
html[data-tesla="true"] .race-dialog .race-result-receipt .icon{width:20px;height:20px}
html[data-tesla="true"] .race-dialog .race-upgrade-advice strong{font-size:16px}
html[data-tesla="true"] .race-dialog .race-upgrade-advice small{font-size:13px}
html[data-tesla="true"] .race-dialog .race-upgrade-advice p{font-size:14px}
html[data-tesla="true"] .race-dialog .race-upgrade-advice button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-dialog .race-course-nudge small{font-size:12px}
html[data-tesla="true"] .race-dialog .race-course-nudge strong{font-size:16px}
html[data-tesla="true"] .race-dialog .race-course-nudge button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-dialog .race-repair-warning{font-size:15px}
html[data-tesla="true"] .race-dialog .race-final-board h3{font-size:16px}
html[data-tesla="true"] .race-dialog .race-final-board h3>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-display .race-final-board .race-winner{font-size:14px}
html[data-tesla="true"] .race-dialog .race-final-board .race-standings li{grid-template-columns:34px minmax(0,1fr) auto;column-gap:8px;padding:9px 4px}
html[data-tesla="true"] .race-dialog .race-finish-place{font-size:14px}
html[data-tesla="true"] .race-dialog .race-finish-time{font-size:15px}
html[data-tesla="true"] .race-dialog .race-finish-time small{font-size:12px}
html[data-tesla="true"] .race-dialog .race-pro-discovery-trigger{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-dialog .race-pro-discovery-trigger>.icon:first-child{width:22px;height:22px}
html[data-tesla="true"] .race-dialog .race-board-scopes button{min-height:52px;font-size:14px}
html[data-tesla="true"] .race-dialog .race-board-list li{padding:8px 10px;font-size:14px}
html[data-tesla="true"] .race-dialog .race-board-position{font-size:13px}
html[data-tesla="true"] .race-dialog .race-board-empty{font-size:14px}
html[data-tesla="true"] .race-dialog .race-board-empty button{min-height:52px;font-size:14px}

/* 7. The two scrollers: wide classic scrollbars (no scrollbar-color here — Chrome 121+
   ignores ::-webkit-scrollbar once scrollbar-color is set), contained, vertical pan only. */
html[data-tesla="true"] .race-lobby-body,html[data-tesla="true"] .race-result-body{scrollbar-width:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar,html[data-tesla="true"] .race-result-body::-webkit-scrollbar{width:14px}
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar-track,html[data-tesla="true"] .race-result-body::-webkit-scrollbar-track{background:#16262e;border-radius:7px}
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar-thumb,html[data-tesla="true"] .race-result-body::-webkit-scrollbar-thumb{background:#6f8f9a;border-radius:7px;border:3px solid #16262e;min-height:48px}
html[data-tesla="true"] .race-lobby-body::-webkit-scrollbar-thumb:active,html[data-tesla="true"] .race-result-body::-webkit-scrollbar-thumb:active{background:#8fb3bf}

/* 8. Shallow car viewports (1280x640, 1280x600, 1024x600, 960x540): same type floor (12px),
   fewer HUD rows so the objective column, the standings and the speed never meet. */
@media (max-height:650px){
 html[data-tesla="true"] .race-display .race-objective{padding:8px 10px;font-size:12px}
 html[data-tesla="true"] .race-display .race-sector-live,html[data-tesla="true"] .race-display .race-scenario-live,html[data-tesla="true"] .race-display .race-track-live{margin-top:4px;padding-top:4px;font-size:12px;row-gap:2px}
 html[data-tesla="true"] .race-display .race-sector-live{grid-template-columns:18px minmax(0,1fr) auto}
 html[data-tesla="true"] .race-display .race-scenario-live,html[data-tesla="true"] .race-display .race-track-live{grid-template-columns:18px auto minmax(0,1fr)}
 html[data-tesla="true"] .race-display .race-sector-live>p,html[data-tesla="true"] .race-display .race-sector-live>small,html[data-tesla="true"] .race-display .race-scenario-live>small{display:none}
 html[data-tesla="true"] .race-sector-live>.icon,html[data-tesla="true"] .race-scenario-live>.icon,html[data-tesla="true"] .race-track-live>.icon{width:18px;height:18px}
 html[data-tesla="true"] .race-display .race-play .race-objective{max-height:calc(100% - 244px)}
 html[data-tesla="true"] .race-display .has-touch .race-objective{max-height:calc(100% - 336px)}
 html[data-tesla="true"] .race-nitro{padding:8px 12px}
 html[data-tesla="true"] .race-nitro-label{grid-template-columns:18px minmax(0,1fr) auto}
 html[data-tesla="true"] .race-nitro-label>.icon{width:18px;height:18px}
 html[data-tesla="true"] .race-nitro-label strong{font-size:14px}
 html[data-tesla="true"] .race-nitro-meter{height:6px;margin-top:5px}
 html[data-tesla="true"] .race-nitro-caption{margin-top:5px}
 html[data-tesla="true"] .race-display .race-speed{padding:8px 12px}
 html[data-tesla="true"] .race-display .race-speed strong{font-size:36px}
 html[data-tesla="true"] .race-display .race-stage-view>.race-live-board{width:220px;padding:6px 8px}
 html[data-tesla="true"] .race-live-board-title>span>.icon{width:16px;height:16px}
 html[data-tesla="true"] .race-live-board-title>span+span>.icon{width:18px;height:18px}
 html[data-tesla="true"] .race-live-board ol{margin-top:4px}
 html[data-tesla="true"] .race-live-board li,html[data-tesla="true"] .race-display .has-touch .race-live-board li{padding:2px 3px;font-size:12px}
 html[data-tesla="true"] .race-display .race-items{right:250px}
 html[data-tesla="true"] .race-countdown{padding:10px 24px}
 html[data-tesla="true"] .race-countdown-label{font-size:13px}
 html[data-tesla="true"] .race-display .race-dialog{padding:10px 14px}
 html[data-tesla="true"] .race-display .race-dialog h2{font-size:20px}
 html[data-tesla="true"] .race-result-stats strong{font-size:24px}
 html[data-tesla="true"] .race-result-actions{padding-top:8px}
 html[data-tesla="true"] .race-result-actions>button{margin-bottom:8px}
}


/* ===== Racing guide (tour) dialog, background audio panel + topbar audio triggers, language selec ===== */
/* ---- 1. One visible, wide scrollbar per panel; no page rubber-banding ---- */
html[data-tesla="true"].race-document,html[data-tesla="true"] body.race-body{overscroll-behavior:none}
html[data-tesla="true"] .race-tour-body,
html[data-tesla="true"] .race-display .race-background-panel,
html[data-tesla="true"] .race-friends-body,
html[data-tesla="true"] .race-pro-body{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:auto;scrollbar-gutter:stable}
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar,
html[data-tesla="true"] .race-display .race-background-panel::-webkit-scrollbar,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar{width:14px;height:14px}
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar-track,
html[data-tesla="true"] .race-display .race-background-panel::-webkit-scrollbar-track,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar-track,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-track{background:#0a1418;border-radius:7px}
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-display .race-background-panel::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar-thumb,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-thumb{background:#4d6f75;border-radius:7px;border:3px solid #0a1418;min-height:48px}
html[data-tesla="true"] .race-tour-body::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-display .race-background-panel::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-friends-body::-webkit-scrollbar-thumb:active,
html[data-tesla="true"] .race-pro-body::-webkit-scrollbar-thumb:active{background:#79a3a8}


html[data-tesla="true"] .race-tour-entry button,
html[data-tesla="true"] .race-tour-backdrop .race-tour-panel button{min-width:52px;min-height:52px;padding:8px 14px;font-size:15px;line-height:1.3;border-radius:10px}
html[data-tesla="true"] .race-tour-help>.icon{width:22px;height:22px;margin-right:10px}
html[data-tesla="true"] .race-tour-backdrop{padding:10px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-panel{width:490px;max-height:calc(100vh - 20px);border-radius:14px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-heading{padding:6px 10px 6px 14px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-heading h2{font-size:20px;line-height:1.25}
html[data-tesla="true"] .race-tour-backdrop .race-tour-heading>button{width:52px;height:52px;min-width:52px;padding:0}
html[data-tesla="true"] .race-tour-backdrop .race-tour-heading>button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-body{padding:10px 14px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-progress{font-size:13px;line-height:1.4;margin-bottom:8px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-step-heading{grid-template-columns:44px minmax(0,1fr);grid-gap:10px;gap:10px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-symbol{width:44px;height:44px;border-radius:10px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-symbol>.icon{width:26px;height:26px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-step-heading h3{font-size:20px;line-height:1.25}
html[data-tesla="true"] .race-tour-backdrop .race-tour-copy{font-size:15px;line-height:1.5;margin:10px 0}
html[data-tesla="true"] .race-tour-backdrop .race-tour-tip{font-size:13px;line-height:1.45;padding:8px 10px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-tip>.icon{width:22px;height:22px;margin-right:8px;margin-top:0}
html[data-tesla="true"] .race-tour-backdrop .race-tour-dots{margin-top:8px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-dots i{width:10px;height:10px;margin:0 4px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-actions{grid-gap:12px;gap:12px;padding:8px 10px}
html[data-tesla="true"] .race-tour-backdrop .race-tour-actions button{padding:8px 6px;overflow-wrap:anywhere;hyphens:auto}

/* ---- 3. Race audio: the topbar trigger + the drawer ----
   (The topbar owner sets the 52px box of every .top-actions button; the icon
   size here only makes sure the Audio trigger reads at 24px.) */

html[data-tesla="true"] .race-display .topbar .race-audio-trigger>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-display .race-background-panel{right:14px;width:420px;max-width:calc(100vw - 24px);padding:14px 16px;font-size:15px;line-height:1.5;border-radius:14px;text-align:start}
html[data-tesla="true"] .race-background-heading{margin-bottom:6px}
html[data-tesla="true"] .race-background-heading .race-eyebrow{font-size:12px;letter-spacing:1.2px;margin:0}
html[data-tesla="true"] .race-display .race-background-heading h2{font-size:22px;line-height:1.25;margin-top:2px}
html[data-tesla="true"] .race-display .race-background-heading button{width:52px;height:52px;min-width:52px;min-height:52px;padding:0;border-radius:12px}
html[data-tesla="true"] .race-display .race-background-heading button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-background-description{font-size:15px;line-height:1.45;margin:0 0 10px}
html[data-tesla="true"] .race-display .race-background-field{font-size:15px;margin:10px 0}
html[data-tesla="true"] .race-background-field output{font-size:15px;margin-left:8px}
html[data-tesla="true"] .race-display .race-background-field select{min-height:52px;font-size:16px}
html[data-tesla="true"] .race-display .race-background-field input[type=range]{height:52px;min-height:52px;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
html[data-tesla="true"] .race-display .race-background-field input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:#2b4650}
html[data-tesla="true"] .race-display .race-background-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#64e4c8;border:3px solid #0d1b22;box-shadow:0 0 0 1px #64e4c8}
html[data-tesla="true"] .race-display .race-background-check{min-height:52px;margin:4px 0 10px;padding:8px 12px;font-size:15px;border-radius:12px}
html[data-tesla="true"] .race-display .race-background-check input{width:26px;height:26px;min-height:26px;margin:0;margin-right:12px}
html[data-tesla="true"] .race-display .race-background-play{min-height:52px;padding:10px 14px;font-size:16px;border-radius:12px}
html[data-tesla="true"] .race-display .race-background-play>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-background-status{font-size:14px;line-height:1.45;min-height:20px;margin:8px 0 0}
html[data-tesla="true"] .race-display .race-background-panel .race-action-sounds{display:flex;width:100%;min-height:52px;margin-top:8px;padding:10px 14px;font-size:15px;border-radius:12px}
html[data-tesla="true"] .race-display .race-background-panel .race-action-sounds>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-display .race-background-mute{min-height:52px;margin-top:8px;padding:10px 14px;font-size:15px;border-radius:12px}
html[data-tesla="true"] .race-display .race-background-mute>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-background-note{font-size:13px;line-height:1.45;margin-top:6px}

/* ---- 4. Language select in the topbar ---- */
html[data-tesla="true"] .race-language{min-width:56px}
html[data-tesla="true"] .race-language-control{min-width:56px;min-height:52px;padding:0 10px;gap:8px;font-size:15px;font-weight:600;letter-spacing:.4px;border-radius:12px}
html[data-tesla="true"] .race-language-control>.icon{display:block;width:22px;height:22px;flex-shrink:0}
html[data-tesla="true"] .race-language-control select{min-height:52px}
html[data-tesla="true"] .race-language-error{top:58px;width:280px;padding:12px;font-size:14px;line-height:1.4;border-radius:10px}
@media(max-width:700px){
 html[data-tesla="true"] .race-language-control>.icon{display:none}
 html[data-tesla="true"] .race-language-control{padding:0 8px}
}

/* ---- 5. Notices over the screen (pointer-events stay on the buttons only) ---- */
html[data-tesla="true"] .race-display>.race-notice{max-width:760px;padding:8px 10px 8px 16px;gap:12px;font-size:15px;line-height:1.4;border-radius:10px}
html[data-tesla="true"] .race-display>.race-notice>span{min-width:0}
html[data-tesla="true"] .race-display>.race-notice button{flex:0 0 52px;width:52px;min-width:52px;height:52px;min-height:52px;padding:0;display:flex;align-items:center;justify-content:center}
html[data-tesla="true"] .race-display>.race-notice button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-display>.race-notice .race-catalogue-retry{flex:0 0 auto;width:auto;height:auto;min-height:52px;padding:8px 16px;font-size:15px;border-radius:10px}
html[data-tesla="true"] .race-display>.race-notice .race-catalogue-retry>.icon{width:22px;height:22px}

/* ---- 6. 3D scene status / alert ---- */
html[data-tesla="true"] .race-scene-status{left:14px;max-width:440px;padding:14px 16px;font-size:15px;line-height:1.5;border-radius:12px}
html[data-tesla="true"] .race-scene-status>.icon{width:28px;height:28px}
html[data-tesla="true"] .race-scene-status h2{font-size:22px;line-height:1.2;margin:8px 0 6px}
html[data-tesla="true"] .race-scene-status p{font-size:15px;line-height:1.45;margin-bottom:8px}
html[data-tesla="true"] .race-display .race-scene-status button,
html[data-tesla="true"] .race-display .race-scene-status a{min-height:52px;min-width:52px;padding:8px 16px;font-size:15px;border-radius:10px}
html[data-tesla="true"] .race-scene-status a{margin-left:0;margin-left:12px}

/* ---- 7. Analytics consent banner on the race document ---- */
html[data-tesla="true"] .race-body .cookie-consent{padding:10px 14px;gap:12px;font-size:13px;line-height:1.45}
html[data-tesla="true"] .race-body .cookie-consent-copy p{font-size:13px;line-height:1.45}
html[data-tesla="true"] .race-body .cookie-consent-copy strong{font-size:14px;margin-bottom:4px}
html[data-tesla="true"] .race-body .cookie-consent-actions{gap:12px}
html[data-tesla="true"] .race-body .cookie-consent-actions button{min-height:52px;min-width:120px;padding:0 18px;font-size:15px}

/* ---- 8. Recovery inside the race dialog, gamepad release toast ---- */
html[data-tesla="true"] .race-recovery p{font-size:15px;line-height:1.45;margin-bottom:10px}
html[data-tesla="true"] .race-recovery button{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-recovery button+button{margin-top:10px}
html[data-tesla="true"] .race-recovery button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-pad-release-hint{padding:10px 16px;font-size:15px;line-height:1.4;border-radius:10px}

/* ---- 9. Friends dialog ---- */
html[data-tesla="true"] .race-friends-backdrop{padding:10px}
html[data-tesla="true"] .race-app .race-friends-panel{width:720px;max-height:calc(100vh - 20px)}
html[data-tesla="true"] .race-friends-panel button{min-width:52px;min-height:52px;padding:8px 12px;font-size:15px;border-radius:10px}
html[data-tesla="true"] .race-friends-panel button>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-friends-heading{padding:6px 10px 6px 14px}
html[data-tesla="true"] .race-friends-heading>div>.icon{width:24px;height:24px;margin-right:10px}
html[data-tesla="true"] .race-app .race-friends-heading h2{font-size:22px;line-height:1.2}
html[data-tesla="true"] .race-friends-heading>button{width:52px;padding:0}
html[data-tesla="true"] .race-friends-heading>button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-friends-status{min-height:30px;padding:2px 14px;font-size:13px}
html[data-tesla="true"] .race-friends-status i{width:9px;height:9px;margin-right:8px}
html[data-tesla="true"] .race-friends-tabs{gap:12px;padding:6px 14px}
html[data-tesla="true"] .race-friends-tabs small{margin-left:8px;font-size:13px}
html[data-tesla="true"] .race-friends-body{padding:6px 14px}
html[data-tesla="true"] .race-add-friend>label{font-size:14px;margin:0 0 6px}
html[data-tesla="true"] .race-add-friend>div{gap:12px}
html[data-tesla="true"] .race-friends-panel .race-add-friend input{min-height:52px;padding:10px 12px;font-size:16px;border-radius:10px}
html[data-tesla="true"] .race-app .race-friends-guide{font-size:14px;line-height:1.45;margin:10px 0}
html[data-tesla="true"] .race-app .race-friends-empty{font-size:15px}
html[data-tesla="true"] .race-friends-panel .race-friends-park{min-height:52px;font-size:15px}
html[data-tesla="true"] .race-friends-list>li{min-height:72px;padding:8px 0}
html[data-tesla="true"] .race-friend-driver strong{font-size:16px}
html[data-tesla="true"] .race-friend-driver span{font-size:13px;line-height:1.4}
html[data-tesla="true"] .race-friend-actions>*+*{margin-left:12px}
html[data-tesla="true"] .race-friend-actions>small{font-size:12px;line-height:1.3;max-width:56px}
html[data-tesla="true"] .race-friends-footer{padding:8px 14px 10px}
html[data-tesla="true"] .race-app .race-friends-footer>p{font-size:13px;line-height:1.4;max-width:380px}
html[data-tesla="true"] .race-friends-pages>span{font-size:14px;min-width:52px}
html[data-tesla="true"] .race-friends-pages>*+*{margin-left:12px}
html[data-tesla="true"] .race-friends-trigger>b{min-width:18px;line-height:18px;font-size:11px;border-radius:9px}

/* ---- 10. Studio Pro dialog and its trigger ---- */
html[data-tesla="true"] .race-pro-discovery-trigger{min-height:52px;padding:10px 14px;font-size:15px;border-radius:12px}
html[data-tesla="true"] .race-pro-discovery-trigger>.icon{width:22px;height:22px}
html[data-tesla="true"] .race-pro-backdrop{padding:10px}
html[data-tesla="true"] .race-pro-panel{width:540px;max-height:calc(100vh - 20px)}
html[data-tesla="true"] .race-pro-panel header{padding:6px 10px 6px 14px}
html[data-tesla="true"] .race-pro-panel h2{font-size:22px;line-height:1.2}
html[data-tesla="true"] .race-pro-panel button,
html[data-tesla="true"] .race-pro-panel select{min-height:52px;min-width:52px;font-size:15px;border-radius:10px}
html[data-tesla="true"] .race-pro-panel a{min-height:52px;min-width:52px;padding:10px 14px;font-size:15px;border-radius:10px}
html[data-tesla="true"] .race-pro-panel .icon{width:22px;height:22px}
html[data-tesla="true"] .race-pro-panel header button{width:52px;padding:0}
html[data-tesla="true"] .race-pro-panel header button>.icon{width:24px;height:24px}
html[data-tesla="true"] .race-pro-body{padding:12px 16px;font-size:15px;line-height:1.5}
html[data-tesla="true"] .race-pro-body label{gap:12px}
html[data-tesla="true"] .race-pro-note{font-size:13px}
html[data-tesla="true"] .race-pro-panel footer{gap:12px;padding:10px 14px}

/* ---- 11. Offsets that assume the 54px car topbar (same media as
   racing-entry.css:135 / car-density.css:7). Elsewhere (768x1024, 600x900
   with a 64px topbar) the base offsets stay. ---- */
@media(max-height:800px){
 html[data-tesla="true"] .race-display .race-background-panel{top:62px;right:14px;max-height:calc(100vh - 74px)}
 html[data-tesla="true"] .race-home .race-tour-entry,
 html[data-tesla="true"] .race-home.is-showroom .race-tour-entry{top:64px;right:16px}
 html[data-tesla="true"] .race-display>.race-notice{top:62px}
}

/* ===== Less to read on the car: explanations that a first visit and the guide already cover ===== */
html[data-tesla="true"] .race-item-brief,
html[data-tesla="true"] .race-roster-hint,
html[data-tesla="true"] .race-scenario-brief,
html[data-tesla="true"] .race-profile-note,
html[data-tesla="true"] .race-pro-note,
html[data-tesla="true"] .race-chat-hint,
html[data-tesla="true"] .race-location-hint,
html[data-tesla="true"] .race-phone-setup-note,
html[data-tesla="true"] .race-phone-storage-note,
html[data-tesla="true"] .race-stage-menu .race-menu-content>p.race-muted,
html[data-tesla="true"] .race-garage-foot{display:none}
html[data-tesla="true"] .race-landing-choice small{display:none}

/* ===== Consistency across every panel: the same top under the 54px bar and the same bottom, 8px clear of the launch dock's choices row, whichever tab is open. ===== */
@media(max-height:800px){
 html[data-tesla="true"] .race-home .race-stage-menu,
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu,
 html[data-tesla="true"] .race-home .race-garage .race-offer,
 html[data-tesla="true"] .race-home.has-setup-footer .race-garage .race-offer{top:62px;bottom:140px}
}
/* Mode chips: two per row so "Online multiplayer" never breaks inside a word. */
html[data-tesla="true"] .race-home .race-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-tesla="true"] .race-home .race-modes strong{overflow-wrap:normal;word-break:normal;hyphens:manual;font-size:14px}

/* ===== Final geometry, outranking every per-tab rule above ([data-menu] carries the extra weight):
   the same top under the 54px bar for every panel, 8px clear of the launch dock's choices row
   (dock top 552px at 670 tall), and the course grid, which must fit six cards without a scroll,
   allowed to reach a few pixels over the dock's top edge. ===== */
@media(max-height:800px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu],
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu[data-menu],
 html[data-tesla="true"] .race-home.is-showroom .race-stage-menu[data-menu],
 html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-stage-menu[data-menu],
 html[data-tesla="true"] .race-home .race-garage .race-offer,
 html[data-tesla="true"] .race-home.has-setup-footer .race-garage .race-offer,
 html[data-tesla="true"] .race-home.is-showroom .race-garage .race-offer{top:62px;bottom:126px}
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu="tracks"],
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu[data-menu="tracks"],
 html[data-tesla="true"] .race-home.is-showroom .race-stage-menu[data-menu="tracks"],
 html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-stage-menu[data-menu="tracks"]{bottom:112px}
}
/* ===== Short split views (540–600px tall): the car's own screen is 670, so these keep the
   base compactness where height is scarce — one row of mode chips, and the course grid
   and tab strip at their base sizes, so the core setup and six-or-three cards need no scroll. ===== */


/* ===== 601-660px tall (1280x640 and the like): the panel keeps the enlarged type but the
   base bottom, so the course grid and the core setup still fit without a scroll. ===== */


/* =========================================================================
   Compactness. Everything above makes the car's screen readable; this last
   block takes back the space that readability spent, so more fits without
   scrolling: smaller paddings and gaps, a shorter launch dock and readout,
   and rows that sit closer together. Type and touch targets are untouched.
   ========================================================================= */

/* Panels: the page inside a tab, its rows, and the course grid. */
html[data-tesla="true"] .race-home .race-menu-page{padding:10px 10px 12px;gap:8px}
html[data-tesla="true"] .race-home .race-setup-page{gap:8px}
html[data-tesla="true"] .race-home .race-menu-page>*+*{margin-top:0}
html[data-tesla="true"] .race-home .race-menu-heading{margin-bottom:2px}
html[data-tesla="true"] .race-home .race-menu-heading h3{font-size:19px}
html[data-tesla="true"] .race-home .race-menu-heading .race-eyebrow{margin-bottom:2px}
html[data-tesla="true"] .race-home .race-menu-page label{gap:4px}
html[data-tesla="true"] .race-home .race-course-browser{padding:8px;gap:6px}
html[data-tesla="true"] .race-home .race-course-browser .race-tracks{gap:6px}
html[data-tesla="true"] .race-home .race-course-filters{gap:8px}
html[data-tesla="true"] .race-home .race-course-tools{gap:8px}
html[data-tesla="true"] .race-home .race-modes{gap:8px}
html[data-tesla="true"] .race-home .race-more{margin-top:0}
html[data-tesla="true"] .race-home .race-more>summary{min-height:52px;padding:6px 12px}
html[data-tesla="true"] .race-home .race-stage-menu[data-menu] .race-menu-tabs{padding:5px 72px 5px 5px;gap:4px}
html[data-tesla="true"] .race-home .race-stage-menu .race-options-head:not([style]){padding:6px 8px 6px 14px}
html[data-tesla="true"] .race-home .race-options-launch{padding:6px 10px}

/* The lobby: a shorter dock and readout give the scene and the cards the room back. */
html[data-tesla="true"] .race-home .race-launch-dock{bottom:24px;padding:7px 12px}
html[data-tesla="true"] .race-home .race-launch-choices{gap:8px;padding-bottom:6px}
html[data-tesla="true"] .race-home .race-launch-action{gap:12px;padding-top:6px}
html[data-tesla="true"] .race-home .race-home-route{top:88px;padding:11px 14px 11px 11px}
html[data-tesla="true"] .race-home .race-home-route h1{font-size:22px}
html[data-tesla="true"] .race-home .race-home-route p{margin-top:3px}
html[data-tesla="true"] .race-home .race-home-route .race-eyebrow{margin-bottom:3px}
html[data-tesla="true"] .race-home .race-home-challenge{padding:11px 14px}
html[data-tesla="true"] .race-home .race-home-readout{bottom:152px}
html[data-tesla="true"] .race-home .race-home-readout>span{gap:4px}
html[data-tesla="true"] .race-home .race-home-readout strong{font-size:52px}
html[data-tesla="true"] .race-home .race-home-readout .race-home-stage{gap:3px}
html[data-tesla="true"] .race-home .race-home-readout .race-home-stage strong{font-size:34px}
html[data-tesla="true"] .race-home .race-page-footer{height:22px}
html[data-tesla="true"] .race-home .race-page-footer a{min-height:44px}

/* Dialogs and the race screen: the same tightening where content stacks. */
html[data-tesla="true"] .race-display .race-dialog{padding:14px}
html[data-tesla="true"] .race-display .race-lobby-body>*+*{margin-top:8px}
html[data-tesla="true"] .race-display .race-result-body>*+*{margin-top:8px}
html[data-tesla="true"] .race-display .race-play-top{padding:7px 16px}
html[data-tesla="true"] .race-display .race-play-footer{height:64px;padding:7px 16px}
html[data-tesla="true"] .race-display .race-tour-body{padding:12px 16px}
html[data-tesla="true"] .race-player-card{padding:14px}
html[data-tesla="true"] .race-player-stats li{padding:8px 10px}
html[data-tesla="true"] .race-player-stats{gap:6px}
}
/* Chrome 79 (the car) has no logical properties: physical values, mirrored for RTL. */
[dir=rtl] html[data-tesla="true"] .race-home .race-league-rewards .icon{margin-right:0;margin-left:4px}
[dir=rtl] html[data-tesla="true"] .race-tour-help>.icon{margin-right:0;margin-left:10px}
[dir=rtl] html[data-tesla="true"] .race-tour-backdrop .race-tour-tip>.icon{margin-right:0;margin-left:8px}
[dir=rtl] html[data-tesla="true"] .race-background-field output{margin-left:0;margin-right:8px}
[dir=rtl] html[data-tesla="true"] .race-display .race-background-check input{margin-right:0;margin-left:12px}
[dir=rtl] html[data-tesla="true"] .race-scene-status a{margin-left:0;margin-right:12px}
[dir=rtl] html[data-tesla="true"] .race-friends-heading>div>.icon{margin-right:0;margin-left:10px}
[dir=rtl] html[data-tesla="true"] .race-friends-status i{margin-right:0;margin-left:8px}
[dir=rtl] html[data-tesla="true"] .race-friends-tabs small{margin-left:0;margin-right:8px}

/* ===== The showcase tools sit above the launch dock, not under it. The dock
   was compacted above (bottom 24px), so the tools clear its full height.
   Measured at 880x670 and 768x1024: dock top edge 128px from the bottom. ===== */
@media(min-height:661px) and (min-width:701px){
 html[data-tesla="true"] .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup,
 html[data-tesla="true"] .race-home .race-showcase-tools{bottom:140px}
}

/* ===== Below 861px wide the car-view tools (336px at the left edge) and a
   wide options panel cannot both fit, and the panel's parked checkbox ends up
   over the view buttons. The panel keeps its base width there; above it the
   panel is 490px, which still leaves the tools their room. ===== */
@media(min-height:661px) and (max-width:860px){
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu],
 html[data-tesla="true"] .race-home.has-setup-footer .race-stage-menu[data-menu],
 html[data-tesla="true"] .race-home.is-showroom .race-stage-menu[data-menu]{width:350px}
 /* Six tabs and a floating close button do not fit one 350px row, so the head
    takes its own row (as the base sheet does on a phone) and the tabs wrap. */
 html[data-tesla="true"] .race-home .race-stage-menu .race-options-head{position:static;padding:6px 8px 6px 14px}
 html[data-tesla="true"] .race-home .race-stage-menu .race-options-head>div{display:block}
 html[data-tesla="true"] .race-home .race-stage-menu[data-menu] .race-menu-tabs{padding:5px;grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== The lobby, at the density of a control panel rather than a title card.
   This is the busiest screen in racing — the grid, the garage, the coins, the
   briefing and the driving guide all want the same column — and it was set in
   display type: a 24px heading, 15px body copy and 12px between every block,
   at every resolution. Measured on the guest's side of a public room at
   880x670 that put 1280px of content in a 319px scroller and left "I'm ready
   to race" about 560px below the fold. Everything below steps down one rung of
   the shared type scale from the pause card, so it still answers the screen:
   at the car's split view these land where the old literals were, and on a
   full-width panel they grow with everything else. ===== */
html[data-tesla="true"] .race-display .race-lobby-dialog{max-width:820px;padding:var(--s3,8px) var(--s4,12px)}
html[data-tesla="true"] .race-display .race-lobby-dialog>.race-eyebrow{font-size:var(--t-micro,11px);letter-spacing:.12em}
html[data-tesla="true"] .race-display .race-lobby-dialog h2{font-size:var(--t-title,16px);line-height:1.2}
html[data-tesla="true"] .race-lobby-main>*+*,html[data-tesla="true"] .race-lobby-side>*+*{margin-top:var(--s3,8px)}
html[data-tesla="true"] .race-display .race-lobby-dialog .race-ready-guide strong{font-size:var(--t-body,13px);margin-bottom:var(--s1,4px)}
html[data-tesla="true"] .race-display .race-lobby-dialog .race-ready-guide span{font-size:var(--t-small,12px);line-height:1.45}
/* The roster answers "who is ready", so it gives back padding, not type. */
html[data-tesla="true"] .race-lobby-dialog .race-room-details{padding:var(--s3,8px)}
html[data-tesla="true"] .race-lobby-dialog .race-roster li{padding:var(--s2,6px) 0}
html[data-tesla="true"] .race-lobby-dialog .race-driver-name{font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-lobby-dialog .race-driver-detail{font-size:var(--t-micro,11px)}
html[data-tesla="true"] .race-lobby-dialog .race-roster .race-roster-hint,html[data-tesla="true"] .race-display .race-lobby-dialog .race-roster p{font-size:var(--t-micro,11px)}
/* Quick chat is company, not an instrument: it keeps its touch targets and
   gives back the space between them. */
html[data-tesla="true"] .race-lobby-dialog .race-chat-templates{gap:var(--s2,6px)}
html[data-tesla="true"] .race-lobby-dialog .race-chat-messages span{font-size:var(--t-small,12px)}
/* Both lobby toggles on one row, and the panel either opens is not a peephole:
   the garage gets the dialog's full width (racing-results.css) and as much of
   its height as the pinned heading and action row leave. */
html[data-tesla="true"] .race-lobby-quick .race-icon-action{min-height:48px;font-size:var(--t-body,13px)}
html[data-tesla="true"] .race-lobby-wallet{margin:0}

/* racing-hud-zones.css */
/* The HUD as two bands and two rails.
 *
 * The instruments grew up one at a time, each absolutely positioned against
 * whichever edge suited it: the objective top-left, nitro bottom-left, the
 * standings top-right, the item slot and the speed both bottom-right. Every
 * one is correct on its own, and together they close in from four directions
 * at once — so at 880x670, the viewport the car actually reports, the road
 * survives as whatever shape is left over rather than as a rectangle anyone
 * chose.
 *
 * This lays the stage view out as three columns instead: a left rail, a centre
 * that is deliberately empty, and a right rail. The instruments become grid
 * items in the rails, in reading order, and the centre is the road — wide
 * enough at every density that the countdown, the lap notice and the screen
 * toasts always have somewhere to land.
 *
 * Loaded after every sheet that positions an instrument and before the density
 * sheets, so `html[data-density]` still has the last word on size. Phones are
 * excluded outright: racing-mobile.css already solves a screen held in two
 * hands, and it solves it differently.
 *
 * Chrome 79 is the car: grid `gap` is supported and used, flex gap is not.
 */
.race-app, .race-display {
 --hud-rail-left: 288px;
 --hud-rail-right: 240px;
}
html[data-density="compact"] .race-app, html[data-density="compact"] .race-display { --hud-rail-left: 232px; --hud-rail-right: 184px }
html[data-density="ultra"]   .race-app, html[data-density="ultra"]   .race-display { --hud-rail-left: 168px; --hud-rail-right: 152px }

html:not([data-phone="true"]) .race-display .race-stage-view {
 display: grid;
 grid-template-columns: var(--hud-rail-left, 288px) minmax(0, 1fr) var(--hud-rail-right, 240px);
 /* The middle row is the flexible one. With `auto auto 1fr` the second row
    was squeezed and the item slot overflowed it, landing on the speed
    readout below — 64px of overlap at 880x670. */
 grid-template-rows: minmax(0, 1fr);
 gap: var(--s3, 8px);
 /* The top band overlaps this box, so the first row clears it rather than
    hiding underneath it — the objective used to be invisible at 880x670. */
 padding: calc(var(--hud-bar, 52px) + var(--s3, 8px)) var(--s4, 12px) var(--s4, 12px);
 align-items: start;
}

/* ── the rails are elements, so they stack themselves ───────────────
 * Placing six instruments into grid rows meant the row heights were decided
 * by whichever column happened to be tallest, and the item slot kept landing
 * on the speed readout. Two rails, each a flex column, is what the design was
 * always describing — and it cannot overlap itself. */
html:not([data-phone="true"]) .race-display .race-stage-view > .race-hud-rail {
 display: flex;
 flex-direction: column;
 min-height: 0;
 min-width: 0;
}
html:not([data-phone="true"]) .race-display .race-stage-view > .race-hud-rail-left { grid-column: 1; grid-row: 1 / -1 }
html:not([data-phone="true"]) .race-display .race-stage-view > .race-hud-rail-right { grid-column: 3; grid-row: 1 / -1; align-items: stretch }
html:not([data-phone="true"]) .race-display .race-hud-rail > * + * { margin-top: var(--s3, 8px) }
/* Each instrument stops being absolutely positioned and simply stacks. */
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-objective,
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-circuit,
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-nitro,
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-live-board,
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-items,
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-speed {
 position: static;
 width: 100%;
 max-width: none;
 margin-left: 0;
 margin-right: 0;
}
/* Nitro and speed sit at the foot of their rail; everything else at the head. */
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-nitro,
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-speed { margin-top: auto }
html:not([data-phone="true"]) .race-display .race-hud-rail > .race-speed { align-items: flex-end; text-align: right }

/* ── the centre is the road, and nothing is allowed to sit in it ─────── */
/* The progress hairline stays pinned across the top of the stage: it is one
   pixel band, not an instrument, and it belongs to the whole width. */
html:not([data-phone="true"]) .race-display .race-stage-view > .race-progress {
 position: absolute; top: 0; left: 0; right: 0; grid-column: 1 / -1; grid-row: 1;
}

/* A short screen keeps the rails and gives back the padding, never the road. */
@media (max-height: 620px) {
 /* The shorthand used to reset padding-top too, so at 1280x600 the rails
    started under the time/score band and the standings lost their first row. */
 html:not([data-phone="true"]) .race-display .race-stage-view { padding: calc(var(--hud-bar, 52px) + var(--s2, 6px)) var(--s3, 8px) var(--s3, 8px); gap: var(--s2, 6px) }
}
/* Narrower than this and two rails plus a usable road do not fit, so the right
   rail folds under the left and the road keeps the full width beneath them. */
@media (max-width: 720px) {
 html:not([data-phone="true"]) .race-display .race-stage-view {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 }
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-hud-rail-right { grid-column: 2 }
 html:not([data-phone="true"]) .race-display .race-hud-rail > .race-circuit { display: none }
}

/* ===== A direction is a direction, not a character. The arrow used to live
   inside the translated string, so Arabic and Hebrew read right-to-left and
   were then pointed left-to-right by a glyph no translator could turn. It is
   an icon now, and in an RTL document it is mirrored like every other
   directional mark. ===== */
[dir="rtl"] .race-primary > .icon,
[dir="rtl"] .race-app .race-primary > .icon { transform: scaleX(-1) }
.race-primary > .icon { margin-left: var(--s2, 6px) }
[dir="rtl"] .race-primary > .icon { margin-left: 0; margin-right: var(--s2, 6px) }

/* ── the rails have to end above the thumbs ───────────────────────────
 * With screen controls the driving buttons are absolutely positioned over the
 * bottom of the play area, while the rails' last row runs to the floor of the
 * stage — so nitro ended up underneath LEFT and RIGHT, and the speed readout
 * underneath the pedals. The stage keeps its full height (the road still
 * fills it) and reserves the controls' band, so the instruments stop where
 * the thumbs begin.
 *
 * `--hud-thumb-band` is the room the controls take: a tile plus the padding
 * either side of it. Ultra gives back the padding, never the aim point.
 */
/* Measured at 880x670: the driving row runs 552-610 and the dock 618-670, so
   the furniture along the bottom is 118px. The band is that plus a gap. */
.race-app, .race-display { --hud-thumb-band: 132px }
html[data-density="compact"] .race-app, html[data-density="compact"] .race-display { --hud-thumb-band: 126px }
html[data-density="ultra"] .race-app, html[data-density="ultra"] .race-display { --hud-thumb-band: 112px }

html:not([data-phone="true"]) .race-display .race-play.has-touch .race-stage-view,
html[data-tesla="true"] .race-display .race-play.has-touch .race-stage-view {
 padding-bottom: 132px;
 padding-bottom: var(--hud-thumb-band, 132px);
}

/* racing-select.css */
/* Dropdowns.
 *
 * The racing surface is full of native selects, and a native select in the car
 * is the weakest control on the screen: a hairline box, the platform's own
 * small arrow, and a value set in the same weight as the label above it. At
 * arm's length you cannot tell at a glance which one is focused, which one
 * holds your choice, or that the box is a control at all.
 *
 * This keeps the native select — its popup is the one part that is genuinely
 * better than anything a div can do on a touch screen, and it is the only kind
 * that a car browser, a screen reader and a gamepad all already understand —
 * and fixes the part that is ours: the box. Bigger target, the value in the
 * weight the value deserves, our own chevron, and a focus ring you can see
 * from the driver's seat.
 *
 * Chrome 79: `appearance` needs the -webkit- prefix and a literal fallback,
 * and the chevron is an inline data URI rather than a pseudo-element, because
 * a select cannot carry one.
 */
.race-app select,
.race-display select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 width: 100%;
 min-height: 48px;
 min-height: var(--ctl-h-min, 48px);
 padding: 0;
 padding-inline-start: 14px;
 padding-inline-start: var(--s5, 14px);
 padding-inline-end: 52px;
 border: 1px solid #3c5560;
 border: 1px solid var(--card-line, #3c5560);
 border-radius: 10px;
 border-radius: var(--ctl-r, 10px);
 /* The same raised surface as the panel's tiles and buttons, with the
    hairline top highlight they carry, so a dropdown reads as one of them and
    not as a text field. Three background layers: the chevron, a hairline that
    divides the trailing zone from the value, and the surface gradient. */
 background-color: #14242c;
 background-color: var(--ctl-bg, #14242c);
 background-image:
  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9cbd0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
  linear-gradient(#3c5560, #3c5560),
  linear-gradient(180deg, #1a2c35, #14242c);
 background-image:
  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9cbd0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
  linear-gradient(var(--card-line, #3c5560), var(--card-line, #3c5560)),
  linear-gradient(180deg, var(--card-bg-raise, #16242d), var(--ctl-bg, #14242c));
 background-repeat: no-repeat;
 background-size: 20px 20px, 1px 60%, 100% 100%;
 background-position: right 12px center, right 43px center, 0 0;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
 color: #f5f8f9;
 color: var(--race-ink, #f5f8f9);
 color-scheme: dark;
 /* The value is the content of the control, so it carries the weight. */
 font-size: 15px;
 font-size: var(--t-ctl, 15px);
 font-weight: 600;
 font-weight: var(--w-med, 600);
 line-height: 1.2;
 text-overflow: ellipsis;
 white-space: nowrap;
 cursor: pointer;
 transition: border-color .15s, box-shadow .15s;
}
/* A phone zooms the page when it focuses anything under 16px. */
html[data-phone="true"] .race-app select,
html[data-phone="true"] .race-display select { font-size: 16px }

[dir="rtl"] .race-app select,
[dir="rtl"] .race-display select { background-position: left 12px center, left 43px center, 0 0 }

/* Hover and focus speak lime, the way every other control's chosen state
   does: the edge first, then the chevron itself. */
.race-app select:hover,
.race-display select:hover {
 border-color: #54e8cf;
 border-color: var(--race-lime, #54e8cf);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(84, 232, 207, .25);
}
.race-app select:focus-visible,
.race-display select:focus-visible {
 outline: 3px solid #54e8cf;
 outline: 3px solid var(--focus, #54e8cf);
 outline-offset: 2px;
 border-color: #54e8cf;
 border-color: var(--focus, #54e8cf);
}
.race-app select:hover,
.race-app select:focus-visible,
.race-display select:hover,
.race-display select:focus-visible {
 background-image:
  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2354e8cf' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
  linear-gradient(rgba(84, 232, 207, .45), rgba(84, 232, 207, .45)),
  linear-gradient(180deg, var(--card-bg-raise, #16242d), var(--ctl-bg, #14242c));
}
.race-app select:disabled,
.race-display select:disabled {
 opacity: .5;
 cursor: not-allowed;
 box-shadow: none;
 background-image:
  linear-gradient(var(--card-line, #3c5560), var(--card-line, #3c5560)),
  linear-gradient(180deg, var(--ctl-bg, #14242c), var(--ctl-bg, #14242c));
 background-size: 1px 60%, 100% 100%;
 background-position: right 43px center, 0 0;
}
[dir="rtl"] .race-app select:disabled,
[dir="rtl"] .race-display select:disabled { background-position: left 43px center, 0 0 }

/* The label above it is the quiet half. */
.race-app label > .race-field-label,
.race-display label > .race-field-label {
 display: flex;
 align-items: center;
 margin-bottom: 6px;
 margin-bottom: var(--s2, 6px);
 font-size: 10px;
 font-size: var(--t-micro, 10px);
 font-weight: 600;
 font-weight: var(--w-med, 600);
 letter-spacing: .06em;
 letter-spacing: var(--ls-caps, .06em);
 text-transform: uppercase;
 color: #9fb0b6;
 color: var(--race-muted, #9fb0b6);
}
.race-app label > .race-field-label > .icon,
.race-display label > .race-field-label > .icon { margin-right: 6px; margin-right: var(--s2, 6px) }
[dir="rtl"] .race-app label > .race-field-label > .icon,
[dir="rtl"] .race-display label > .race-field-label > .icon { margin-right: 0; margin-left: var(--s2, 6px) }

/* The options list is the browser's, but where a platform lets us paint it,
   use an explicit dark palette. Live racing uses a dark --race-ink for other
   HUD surfaces; inheriting that token made popup option text dark on dark. */
.race-app select option,
.race-app select optgroup,
.race-display select option,
.race-display select optgroup {
 padding: 10px 12px;
 background-color: #14242c;
 color: #f5f8f9;
 font-weight: 500;
}
.race-app select optgroup,
.race-display select optgroup { color: #9fb0b6; font-size: 12px; text-transform: uppercase; letter-spacing: .06em }
.race-app select option:checked,
.race-display select option:checked { background-color: #1c3a38; color: #e8fff8 }
.race-app select option:disabled,
.race-display select option:disabled { color: #6f8288 }

/* Native pickers cannot wrap their selected value. Preserve its complete
   meaning below the field only when it actually overflows (including i18n). */
.race-app .race-select-detail,
.race-display .race-select-detail {
 display:block;grid-column:1 / -1;min-width:0;max-width:100%;
 margin:6px 0 0;padding:0;
 color:#b9cbd0;font-size:13px;font-weight:400;line-height:1.45;
 white-space:normal;overflow-wrap:break-word;text-transform:none;letter-spacing:normal;
}
/* Chrome 79 has no :focus-visible support. */
.race-app select:focus,.race-display select:focus {
 outline:2px solid #54e8cf;outline-offset:2px;
}

/* racing-portrait.css */
/* Racing on a tall screen, and on a very wide one.
 *
 * Three layouts that the responsive design called for and the app did not have
 * yet. Each is scoped tightly enough that no other size can pick it up.
 */

/* ── 1. A phone held upright ───────────────────────────────────────────
 * The race was always playable in portrait — the rotate hint is a nag with
 * `pointer-events:none`, not a gate — but nothing was laid out for it, so the
 * instruments sat wherever landscape had left them and the thumbs covered the
 * road. This gives portrait its own shape: the road across the top, one line
 * of instruments under it, and the controls in the bottom third where the
 * thumbs already are. The nag goes: a layout that works does not apologise.
 */
@media (orientation: portrait) {
 html[data-phone="true"] .race-display .race-rotate-hint { display: none }

 html[data-phone="true"] .race-display .race-play > .race-stage-view {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  gap: var(--s3, 8px);
  padding: 8px;
  padding: var(--s3, 8px);
 }
 /* One objective line over the road, never a stacked card. */
 html[data-phone="true"] .race-display .race-stage-view > .race-objective {
  position: static; grid-row: 1; width: 100%; max-width: none; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 /* The middle row is the road. Nothing is allowed to sit in it. */
 html[data-phone="true"] .race-display .race-stage-view > .race-circuit { display: none }
 /* Speed, nitro and the item share one band directly above the thumbs. */
 html[data-phone="true"] .race-display .race-stage-view > .race-nitro,
 html[data-phone="true"] .race-display .race-stage-view > .race-items,
 html[data-phone="true"] .race-display .race-stage-view > .race-speed {
  position: static; grid-row: 3; margin: 0; width: auto; max-width: none;
 }
 html[data-phone="true"] .race-display .race-stage-view > .race-live-board {
  position: absolute; right: 8px; top: 44px; width: 150px; max-width: 46%;
 }
}

/* ── 2. A tablet held upright ──────────────────────────────────────────
 * 768x1024 has room the phone does not and none of the width the car has, so
 * neither layout fits. The road takes a 4:3 band across the top and both rails
 * fold into a deck beneath it — the same instruments, read top to bottom.
 */
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1100px) {
 html:not([data-phone="true"]) .race-display .race-stage-view {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
 }
 /* Row 1 is the road, across both columns and empty by design. */
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-objective { grid-column: 1 / -1; grid-row: 2 }
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-nitro { grid-column: 1; grid-row: 3 }
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-items { grid-column: 2; grid-row: 3 }
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-live-board { grid-column: 1; grid-row: 2 }
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-speed { grid-column: 2; grid-row: 2; align-self: start }
 html:not([data-phone="true"]) .race-display .race-stage-view > .race-circuit { display: none }
}

/* ── 3. A screen wide enough for the car and the setup at once ─────────
 * Below this the setup sheet has to be an overlay, because it would cover the
 * car it is describing. At 1600 and up it does not have to be: the sheet
 * becomes a column of its own and the garage keeps its own room beside it, so
 * choosing a car no longer means hiding it.
 */
@media (min-width: 1600px) and (orientation: landscape) {
 html:not([data-phone="true"]) .race-display.race-home.has-setup-footer .race-stage-menu,
 html:not([data-phone="true"]) .race-display.race-home .race-stage-menu {
  right: 24px; right: var(--s7, 24px);
  width: 520px;
  box-shadow: none;
  border-left: 1px solid #3c5560;
  border-left: 1px solid var(--card-line, #3c5560);
 }
 /* Everything the sheet would have covered now stops short of it. */
 html:not([data-phone="true"]) .race-display.race-home .race-launch-dock,
 html:not([data-phone="true"]) .race-display.race-home .race-home-challenge { right: 580px }
 html:not([data-phone="true"]) .race-display.race-home .race-page-footer { right: 580px }
}

/* racing-evenness.css */
/* Evenness.
 *
 * Four fixes for things that read as unfinished rather than as designed,
 * found by screenshotting the car screen at 880x670 and looking at it:
 *
 *  1. the launch dock held four controls, two of which had no edges
 *  2. the page footer sat underneath the dock instead of below it
 *  3. the mode grid left one tile stranded on a row of its own
 *  4. the setup sheet cut a sentence in half at its scroll boundary
 *
 * Loaded after the sheets that own these elements and before the density
 * sheets, so `html[data-density]` still decides the sizes.
 */

/* ── 1. A row of four controls looks like a row of four controls ──────
 * Car & sound and Course were bare text beside two bordered buttons, so the
 * dock read as "two things and some writing". They are all choices, so they
 * all get an edge — the same border, radius and background the rest use. */
.race-dock-choice {
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 10px;
 border-radius: var(--ctl-r, 10px);
 background: #14242c;
 background: var(--ctl-bg, #14242c);
 padding: 0 12px;
 padding: 0 var(--s4, 12px);
}
.race-dock-choice:hover { border-color: #54e8cf; border-color: var(--race-lime, #54e8cf) }
/* The label is the quiet half and the value is the loud half, in both. */
.race-dock-choice small { color: #9fb0b6; color: var(--race-muted, #9fb0b6) }

/* ── 2. The footer goes below the dock, not behind it ─────────────────
 * Both are anchored to the bottom, so the tagline was being overrun by the
 * dock sitting on top of it. The dock now starts above the footer's band. */
.race-home .race-launch-dock { bottom: 34px }
html[data-tesla="true"] .race-home .race-launch-dock { bottom: 34px }
.race-home .race-page-footer { height: 30px; display: flex; align-items: center }

/* ── 3. Five tiles, no orphan ─────────────────────────────────────────
 * A two-column grid leaves the fifth mode alone on its own row. Letting the
 * tiles size themselves fills the rows evenly at every width the panel has. */
.race-modes {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 8px;
 gap: var(--s3, 8px);
}

/* ── 4. A scroll region should look scrollable, not broken ────────────
 * The panel cut "Reach the finish and learn to avoid cones." through the
 * middle at its lower edge, which reads as a rendering fault rather than as
 * more content below. Padding gives the last line room to finish. */
.race-stage-menu .race-menu-page { padding-bottom: 20px; padding-bottom: var(--s6, 20px) }

/* ── 5. The four dock controls, actually matching ─────────────────────
 * `.race-home .race-launch-choices button` (0,2,1) paints every choice with a
 * transparent border until hover, while the two toggles beside them carry a
 * visible one. The row therefore reads as two controls and two labels. These
 * are all "open a panel" actions, so they all wear the same edge. */
.race-home .race-launch-choices button.race-dock-choice {
 border-color: #2b3f48;
 border-color: var(--ctl-line, #2b3f48);
 background: #14242c;
 background: var(--ctl-bg, #14242c);
}
.race-home .race-launch-choices button.race-dock-choice:hover {
 border-color: #54e8cf;
 border-color: var(--race-lime, #54e8cf);
 background: #16303a;
}

/* ── 6. The two cards belong to the same column ───────────────────────
 * The route card sat top-left and the challenge card middle-right, at
 * different widths and different heights, so the screen had no side to read
 * down. They are one stack now, on the left, the same width — the car keeps
 * the rest of the stage, which is what it is there for. */
/* 880 is the car, so the breakpoint has to be below it — 900 excluded the one
   screen this was written for. */
@media (min-width: 760px) and (orientation: landscape) {
 .race-home .race-home-route,
 .race-home .race-home-challenge {
  left: 24px; left: var(--s7, 24px);
  right: auto;
  width: 332px;
  max-width: 38%;
  box-sizing: border-box;
 }
 .race-home .race-home-route { top: 88px }
 /* racing-car.css sets this card's top twice under html[data-tesla] (0,2,1),
    so the stack needs that weight too or the second card lands on the first. */
 .race-home .race-home-challenge,
 html[data-tesla="true"] .race-home .race-home-challenge { top: 214px; max-width: 38% }
}

/* ── 7. Five modes, two columns, one orphan ───────────────────────────
 * racing-car.css:1516 pins the car to two columns (0,2,1), which leaves
 * Online League alone on a row of its own. Letting the tiles size themselves
 * fills every row; at the car's panel width that is three then two, which is
 * a shape rather than a leftover. */
html[data-tesla="true"] .race-home .race-modes,
.race-home .race-modes {
 grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

/* ── 8. A cut line should look like more content, not a fault ─────────
 * The panel is the one scroll owner, so a sentence will sometimes be halved
 * at its lower edge. A short fade says "there is more below"; a hard cut says
 * "something went wrong". */
.race-stage-menu .race-menu-page {
 -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
 mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
}

/* ── 9. The chevron has to be findable at arm's length ────────────────
 * Now owned by racing-select.css, which sizes the chevron explicitly and
 * reserves its room with logical padding; a second copy here only fought it. */

/* racing-compositions.css */
/* The setup sheet's pages, composed.
 *
 * Every tab renders into `.race-menu-page`, and each was a single column of
 * loose sections: a heading, then whatever the tab happened to render, running
 * straight past the fold on the one screen this product is for. The canvas
 * artboards gave each page the same grammar instead — a header, a body that
 * uses the width it has, and panels with one rhythm — and this is that grammar
 * applied to the pages that already exist.
 *
 * Chrome 79 is the floor: no :has(), so each page carries its own modifier
 * class from RaceApp; grid gap only; a literal before every token.
 */

/* ── the header every page shares ─────────────────────────────────── */
.race-menu-page > .race-menu-heading {
 display: grid;
 gap: 2px;
 padding-bottom: 10px;
 padding-bottom: var(--s3, 10px);
 margin-bottom: 12px;
 margin-bottom: var(--s4, 12px);
 border-bottom: 1px solid #20282e;
 border-bottom: 1px solid var(--race-line, #20282e);
}
.race-menu-page > .race-menu-heading h2,
.race-menu-page > .race-menu-heading h3 {
 margin: 0;
 font-size: 19px;
 font-size: var(--t-head, 19px);
 font-weight: 700;
 font-weight: var(--w-strong, 700);
 letter-spacing: -.02em;
 letter-spacing: var(--ls-tight, -.02em);
 line-height: 1.15;
}

/* ── panels: one surface, one rhythm ──────────────────────────────── */
.race-page-driver > .race-profile-inline,
.race-page-driver > .race-location,
.race-page-driver > .race-signout,
.race-page-boards > .race-board-context,
.race-page-display > fieldset,
.race-page-display > label {
 padding: 12px;
 padding: var(--card-pad, 12px);
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 12px;
 border-radius: var(--card-r, 12px);
 background: #101b21;
 box-sizing: border-box;
}

/* ── Driver: identity on the left, where and who on the right ─────── */
@media (min-width: 760px) {
 .race-page-driver {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  gap: var(--s4, 12px);
  align-content: start;
 }
 .race-page-driver > .race-menu-heading { grid-column: 1 / -1 }
 .race-page-driver > .race-profile-inline { grid-column: 1; grid-row: 2 / span 3 }
 .race-page-driver > .race-location { grid-column: 2; grid-row: 2 }
 /* The season's two numbers fill the column the country card left empty. */
 .race-page-driver > .race-season-stats { grid-column: 2; grid-row: 3 }
 .race-page-driver > .race-signout { grid-column: 2; grid-row: 4; align-self: end }

 /* Boards: the table reads down; its context and rules sit beside it. */
 .race-page-boards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; gap: var(--s4, 12px) }

 /* Display: two columns of settings rather than one long scroll. */
 .race-page-display {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  gap: var(--s4, 12px);
  align-content: start;
 }
 .race-page-display > .race-menu-heading { grid-column: 1 / -1 }
}

/* The icon grid does NOT scroll on its own.
 *
 * It was given `max-height: 232px; overflow-y: auto` because it ran off the
 * fold, which solved that by creating a second scroll region inside
 * `.race-menu-content` — and one scroll region per screen is the shell
 * contract (test/e2e/responsive-shell.spec.js asserts it, §7/§41). It is not a
 * style rule either: nested scroll areas on the car's touchscreen are what
 * produced "controls and scrolling are a pain", and a grid that swallows the
 * drag is exactly the thing that made the panel feel broken.
 *
 * The panel already scrolls, so the grid running long costs nothing: the
 * reader scrolls the page they are already scrolling, and every icon is
 * reachable by the same gesture as everything else on the tab. */

/* ── refinements, from looking at the composed page ───────────────────
 * The two-column body revealed three things the single column had hidden. */

/* A panel in a stretched grid row distributes its own children over the whole
   height, which opened a hole between "COUNTRY" and its select. Content packs
   to the top; the panel can be as tall as the row without the contents drifting. */
.race-page-driver > .race-location,
.race-page-driver > .race-profile-inline,
.race-page-display > fieldset {
 align-content: start;
 align-items: start;
}
.race-page-driver > .race-location { display: grid; gap: 8px; gap: var(--s3, 8px) }

/* The icon grid was six across in one column and three in two, which makes the
   tiles enormous. racing-car.css pins 68px under html[data-tesla] (0,2,1), so
   the narrower column needs that weight to say otherwise. */
.race-page-driver .race-icon-grid,
html[data-tesla="true"] .race-page-driver .race-icon-grid {
 grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
 gap: 6px;
 gap: var(--s2, 6px);
}

/* The eyebrow stays hidden here: racing-entry.css:83 drops it on the home
   sheet to buy vertical space on the car, which is the right call at 670px.
   The rule above only sizes it for the surfaces that do show it. */

/* The eyebrow is the half that says which page this is, so it has to be
   legible rather than technically present. */
.race-menu-page > .race-menu-heading > .race-eyebrow {
 font-size: 10px;
 font-size: var(--t-micro, 10px);
 font-weight: 600;
 font-weight: var(--w-med, 600);
 letter-spacing: .06em;
 letter-spacing: var(--ls-caps, .06em);
 text-transform: uppercase;
 color: #9fb0b6;
 color: var(--race-muted, #9fb0b6);
}

/* ══════════════════════════════════════════════════════════════════════
 * The remaining six surfaces from the canvas. These are not setup tabs, so
 * each is composed against its own root rather than `.race-menu-page`.
 * racing-car.css pins many of these under html[data-tesla] (0,2,1), so the
 * rules that have to win carry that weight deliberately.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Friends: a list you scan, an action per row, one CTA at the foot ── */
.race-friends-body { display: grid; gap: 8px; gap: var(--s3, 8px); align-content: start }
.race-friends-body > * { min-width: 0 }
.race-friend-driver {
 display: flex;
 align-items: center;
 padding: 9px 10px;
 border: 1px solid #20282e;
 border: 1px solid var(--race-line, #20282e);
 border-radius: 10px;
 border-radius: var(--ctl-r, 10px);
 background: #14242c66;
}
.race-friend-driver:hover { border-color: #3c5560; border-color: var(--card-line, #3c5560) }
.race-friend-actions { margin-left: auto; display: flex; align-items: center }
.race-friend-actions > button + button { margin-left: 6px; margin-left: var(--s2, 6px) }
[dir="rtl"] .race-friend-actions { margin-left: 0; margin-right: auto }
.race-friends-footer {
 margin-top: 12px; margin-top: var(--s4, 12px);
 padding-top: 12px; padding-top: var(--s4, 12px);
 border-top: 1px solid #20282e;
 border-top: 1px solid var(--race-line, #20282e);
 display: flex; align-items: center; justify-content: space-between;
}
.race-friends-empty { padding: 14px 12px; text-align: center; color: #9fb0b6; color: var(--race-muted, #9fb0b6) }

/* ── Circuit and League: a heading, a measure, then the road ────────── */
.race-circuit-journey,
.race-league { display: grid; gap: 10px; gap: var(--s3, 10px); align-content: start }
.race-arcade-title,
.race-league-heading { display: flex; align-items: center }
.race-arcade-title > strong,
.race-league-heading h2 { flex: 1 1 auto; min-width: 0 }
.race-league-races { display: grid; gap: 6px; gap: var(--s2, 6px); margin: 0; padding: 0; list-style: none }
.race-league-races > li {
 display: flex; align-items: center;
 padding: 8px 10px;
 border: 1px solid #20282e;
 border: 1px solid var(--race-line, #20282e);
 border-radius: 10px;
 border-radius: var(--ctl-r, 10px);
}
.race-league-races > li[data-state="next"] { border-color: #54e8cf; border-color: var(--race-lime, #54e8cf); background: #1c3a3859 }
.race-league-races > li[data-state="locked"] { opacity: .62 }
.race-league-pagination { display: flex; align-items: center; justify-content: center }
.race-league-pagination > * + * { margin-left: 8px; margin-left: var(--s3, 8px) }

/* ── Cosmetics: a grid of swatches that stays a grid at every width ─── */
.race-cosmetic-grid,
html[data-tesla="true"] .race-cosmetic-grid {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
 gap: 8px;
 gap: var(--s3, 8px);
}
.race-cosmetic-tile {
 display: grid;
 gap: 5px;
 padding: 9px;
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 12px;
 border-radius: var(--card-r, 12px);
 background: #14242c;
 background: var(--ctl-bg, #14242c);
 box-sizing: border-box;
}
.race-cosmetic-tile[aria-pressed="true"] { border-color: #54e8cf; border-color: var(--race-lime, #54e8cf); background: #1c3a38 }
.race-cosmetic-price { color: #f4c95d; color: var(--race-coin, #f4c95d); font-variant-numeric: tabular-nums }

/* ── Tour: left alone ─────────────────────────────────────────────────
 * I composed this blind and broke it: making `.race-tour-body` a flex row
 * turned the step, the copy and the tip into three unreadable vertical
 * slivers. The dialog was already correct — a heading, a step counter, an
 * icon beside the title, the tip, the dots, the actions — so the right change
 * here was none. Left as it was, deliberately. */

/* ══ The garage as a studio ════════════════════════════════════════════
 * The Garage tab already flips the screen into `is-showroom`, but it looked
 * like the garage with a panel open: the route and challenge cards competed
 * with the car, and the camera angles sat off in a corner as if they were
 * another setting.
 *
 * A studio has one subject. So the cards recede while you are looking at the
 * car, the stage gets a floor to stand it on, and the angles become a camera
 * bar centred under the subject — which is where you look for them.
 * Only while the Garage tab is open; every other tab is unaffected.
 */
.race-home.is-showroom .race-home-route,
.race-home.is-showroom .race-home-challenge {
 opacity: .38;
 transition: opacity .2s ease;
}
.race-home.is-showroom .race-home-route:hover,
.race-home.is-showroom .race-home-challenge:hover { opacity: 1 }

/* A floor for the car to stand on: one soft pool, no gradient wash over the
   whole screen. Behind everything, and never catching a touch. */
.race-home.is-showroom::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 46%;
 width: min(620px, 72%);
 height: 260px;
 transform: translate(-50%, -50%);
 border-radius: 50%;
 background: radial-gradient(ellipse at center, rgba(84,232,207,.09) 0%, rgba(84,232,207,.03) 42%, transparent 72%);
 pointer-events: none;
 z-index: 0;
}
.race-display[data-reduced-motion="true"] .race-home.is-showroom .race-home-route,
.race-display[data-reduced-motion="true"] .race-home.is-showroom .race-home-challenge { transition: none }

/* The camera bar: centred under the subject, one surface, not a scatter of
   buttons. racing-arcade.css pins it left at 24px when the sheet is open, so
   this carries the same weight to put it back under the car. */
.race-home.is-showroom .race-showcase-tools,
.race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup {
 left: 50%;
 right: auto;
 transform: translateX(-50%);
 width: auto;
 max-width: calc(100% - 48px);
 display: flex;
 align-items: center;
 padding: 6px;
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 999px;
 background: #0b1319e6;
 box-shadow: 0 8px 24px #05121c59;
}
.race-home.is-showroom .race-showcase-tools > * + * { margin-left: 6px; margin-left: var(--s2, 6px) }
/* The car's name is the only part of the bar with no fixed size, so it is the
   part that gives way: the view buttons are targets and must keep their width
   whatever the car is called. */
.race-home.is-showroom .race-showcase-tools > strong {
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.race-home.is-showroom .race-showcase-tools > .race-showcase-views { flex: 0 0 auto }

/* With the sheet open the car keeps the left half, so the bar centres there
   rather than under the panel. */
@media (min-width: 760px) {
 .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup { left: 30%; }
}

/* ── the studio turntable ─────────────────────────────────────────────
 * Drag anywhere across the stage to turn the car. It covers the car's half
 * of the screen and nothing else: the cards, the dock and the setup sheet all
 * sit above it, so nothing a racer needs to press is behind a drag surface.
 * `touch-action: none` because on a touch screen the browser would otherwise
 * claim the horizontal drag for a scroll that this screen does not have. */
.race-turntable {
 position: absolute;
 left: 0;
 top: 96px;
 bottom: 150px;
 right: 0;
 z-index: 1;
 touch-action: none;
 cursor: grab;
 background: transparent;
}
.race-turntable:active { cursor: grabbing }
.race-turntable:focus-visible {
 outline: 3px solid #54e8cf;
 outline: 3px solid var(--focus, #54e8cf);
 outline-offset: -6px;
 border-radius: 12px;
}
/* With the setup sheet open the car keeps the left side, so the surface stops
   where the panel starts rather than swallowing drags meant for it. */
@media (min-width: 760px) {
 .race-home.has-setup-footer .race-turntable { right: 46% }
}

/* ── the studio on every screen ───────────────────────────────────────
 * The studio was written for the car's landscape panel. On a phone the setup
 * sheet is a bottom sheet covering three quarters of the screen, so changing
 * a car, a paint or a finish showed you nothing at all — the one thing the
 * garage exists to show. Each screen now keeps a window onto the car while
 * the sheet is open, and the turntable covers exactly that window.
 */

/* Phone, upright: the sheet gives back the top half while you are in the
   Garage tab, so a change is visible the moment it is made. */
@media (orientation: portrait) {
 html[data-phone="true"] .race-display.is-showroom .race-stage-menu {
  max-height: min(56%, calc(var(--app-height, 100vh) - 300px));
 }
 html[data-phone="true"] .race-display.is-showroom .race-turntable {
  top: 96px;
  bottom: 58%;
  right: 0;
 }
 /* The camera bar rides just above the sheet rather than under it. */
 html[data-phone="true"] .race-display.is-showroom .race-showcase-tools,
 html[data-phone="true"] .race-display.is-showroom .race-showcase-tools.is-setup {
  bottom: calc(58% + 8px);
  left: 50%;
  right: auto;
 }
}

/* Phone, on its side: the sheet takes the right, the car keeps the left. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-display.is-showroom .race-stage-menu {
  left: auto; right: 0; top: 0; bottom: 0;
  width: min(56%, 420px); max-height: none;
  border-radius: 14px 0 0 14px;
 }
 html[data-phone="true"] .race-display.is-showroom .race-turntable { top: 52px; bottom: 8px; right: 56% }
 html[data-phone="true"] .race-display.is-showroom .race-showcase-tools,
 html[data-phone="true"] .race-display.is-showroom .race-showcase-tools.is-setup { left: 22%; bottom: 158px }
}

/* Tablet upright: the sheet is a bottom sheet here too, so the same rule —
   a window above it, and the turntable only over that window. */
@media (orientation: portrait) and (min-width: 700px) {
 /* 54% left a 263px window for a panel, a car and a camera bar. The sheet
    scrolls; the car cannot, so the sheet gives the height back. */
 html:not([data-phone="true"]) .race-display.is-showroom .race-stage-menu { max-height: 46% }
 html:not([data-phone="true"]) .race-display.is-showroom .race-turntable { top: 104px; bottom: 62%; right: 0 }
 /* The sheet stands above the launch dock, so it starts higher than its own
    max-height suggests — anchoring the bar at 56% put it behind the panel it
    is supposed to sit in front of. */
 html:not([data-phone="true"]) .race-display.is-showroom .race-showcase-tools.is-setup { left: 50%; bottom: calc(63% + 8px) }
}

/* Wide enough for both: the sheet is a column and the car keeps the rest, so
   the turntable stops at the panel edge instead of swallowing its drags. */
@media (min-width: 1600px) and (orientation: landscape) {
 .race-home.has-setup-footer .race-turntable { right: 580px }
 .race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup { left: calc((100% - 580px) / 2) }
}

/* ── the studio's own furniture ───────────────────────────────────────
 * Two things sit over the scene beside the car: the name plate with the
 * gesture that turns it, and the numbers you actually choose a car on. They
 * are anchored to opposite edges of the same window so they cannot collide
 * whatever the viewport does to the space between them.
 */
.race-home.is-showroom .race-turntable-hint {
 display: inline-flex;
 align-items: center;
 white-space: nowrap;
 color: #9fb8bd;
 color: var(--muted, #9fb8bd);
 font-size: 11px;
 font-size: var(--t-small, 11px);
}
.race-home.is-showroom .race-turntable-hint > .icon { margin-right: 6px; margin-right: var(--s2, 6px) }
[dir="rtl"] .race-home.is-showroom .race-turntable-hint > .icon { margin-right: 0; margin-left: var(--s2, 6px) }

/* The stats take the route card's slot rather than a new one: with the sheet
   open there is exactly one free rectangle beside the car at every viewport,
   and the course is what the sheet's own Tracks tab is for. With the sheet
   closed the car is the whole point, so neither card is in the way. */
.race-home.is-showroom .race-showcase-stats { display: none }
.race-home.is-showroom.has-setup-footer .race-home-route { display: none }
.race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup {
 display: block;
 position: absolute;
 z-index: 3;
 top: 8px;
 left: 24px;
 left: var(--s7, 24px);
 width: 248px;
 max-width: calc(100% - 48px);
 padding: 10px 12px;
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 12px;
 border-radius: var(--card-r, 12px);
 background: #0b1319e6;
 box-shadow: 0 8px 24px #05121c59;
 box-shadow: var(--float-shadow, 0 8px 24px #05121c59);
}
.race-home.is-showroom .race-showcase-stats > strong {
 display: block;
 margin-bottom: 8px;
 margin-bottom: var(--s3, 8px);
 color: #e8fff8;
 color: var(--sel-ink, #e8fff8);
 font-size: 12px;
 font-size: var(--t-body, 12px);
 font-weight: 600;
 font-weight: var(--w-med, 600);
}
/* Compact bars keep one row each — stacking the bar under its label reads
   better but costs 70px of height, which is the difference between a panel
   beside the car and a panel over it. So the columns are sized for the widest
   real label and the widest real readout ("Acceleration", "126 km/h") instead,
   and the bar takes what is left. */
.race-car-stats.is-compact { gap: 4px; gap: var(--s1, 4px) }
.race-car-stats.is-compact > div { grid-template-columns: 78px minmax(24px, 1fr) 62px; gap: 6px; gap: var(--s2, 6px) }
.race-car-stats.is-compact > div > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.race-car-stats.is-compact > div > b { white-space: nowrap }

/* One strength, one tradeoff. The marks carry the polarity so the words do
   not have to spend themselves on "Strengths" and "Tradeoffs" labels. */
.race-showcase-traits {
 margin: 8px 0 0;
 margin: var(--s3, 8px) 0 0;
 padding: 0;
 list-style: none;
 color: #a8bac1;
 color: var(--muted, #a8bac1);
 font-size: 11px;
 font-size: var(--t-micro, 11px);
}
.race-showcase-traits > li {
 display: block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 line-height: 1.5;
}
.race-showcase-traits > li::before { display: inline-block; width: 12px; font-weight: 700; font-weight: var(--w-bold, 700) }
.race-showcase-traits > li[data-trait="up"]::before { content: "+"; color: #54e8cf; color: var(--accent, #54e8cf) }
.race-showcase-traits > li[data-trait="down"]::before { content: "\2212"; color: #ffb15c }
[dir="rtl"] .race-showcase-traits > li::before { margin-left: 4px }

/* The window a phone or an upright tablet leaves above the sheet is short, so
   the panel sits directly under the bar and the car is framed below it. */
@media (orientation: portrait) {
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup { top: 12px; left: 16px; left: var(--s5, 16px) }
}
@media (orientation: portrait) and (min-width: 700px) {
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup {
  top: 8px;
  left: 16px; left: var(--s5, 16px);
  right: 16px; right: var(--s5, 16px);
  width: auto;
  max-width: none;
 }
}
/* A phone on its side: the panel spans the window rather than sitting in a
   column of it, so the readouts have somewhere to lie down. */
@media (orientation: landscape) and (max-height: 500px) {
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup {
  top: 8px;
  left: 12px; left: var(--s4, 12px);
  right: 46%;
  width: auto;
  max-width: none;
 }
}

/* Where the window above the sheet is short, five stats only fit as a grid of
   readouts: the bar is the part that compares, the number is the part that
   states, and stating is what survives the squeeze. */
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (min-width: 700px) {
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)) }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact > div { grid-template-columns: minmax(0, 1fr) auto }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact > div > i { display: none }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-showcase-traits { display: flex }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-showcase-traits > li { min-width: 0; flex: 1 1 0 }
}
/* Upright narrow window: the sheet begins 86px under the bar, so the card has
   one strip to live in. Three readouts a row, no bars, no traits — at 600x900
   the two-column card ran 155px and the sheet's head covered its lower half. */
@media (orientation: portrait) and (max-width: 699px) {
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup {
  top: 6px;
  left: 16px; left: var(--s5, 16px);
  right: 16px; right: var(--s5, 16px);
  width: auto;
  max-width: none;
  padding: 6px 10px;
 }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup > strong { margin-bottom: 4px; margin-bottom: var(--s1, 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2px }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact > div { grid-template-columns: minmax(0, 1fr) auto }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact > div > i { display: none }
 .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-showcase-traits { display: none }
}
/* A landscape phone has no room for both the studio sheet and the launcher
   the sheet replaces: the dock's controls are all in the sheet already, and
   its 120px is the difference between a car and a thumbnail. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-home.is-showroom.has-setup-footer .race-launch-dock { display: none }
 html[data-phone="true"] .race-display.is-showroom .race-showcase-tools.is-setup { bottom: 48px }
}

/* ── the drawer on a small screen ─────────────────────────────────────
 * The setup sheet is a bottom sheet on a phone with a body a few hundred
 * pixels tall. Its content was written for a column beside the car: a label
 * on one line, its control on the next, a full-width button under that, and
 * a stats block the panel beside the car now already shows. Stacked, the Car
 * section alone ran to ~700px. Each rule below takes HEIGHT out of the stack:
 * a label beside its control, a button beside the field it acts on, two
 * cosmetic fields to a row, and nothing shown twice.
 *
 * Every label that goes is CLIPPED, never `display:none`: the text is the
 * control's accessible name, and a hidden name is a control a screen reader —
 * and the suite that drives this app by role and name — can no longer find.
 */
html[data-phone="true"] .race-stage-menu .race-eyebrow,
html[data-phone="true"] .race-stage-menu .race-menu-page > .race-menu-heading > p,
html[data-phone="true"] .race-stage-menu .race-garage-editor > .race-muted,
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > p.race-muted,
html[data-phone="true"] .race-stage-menu .race-menu-tabs > button > span,
html[data-phone="true"] .race-stage-menu .race-icon-action > span,
html[data-phone="true"] .race-stage-menu .race-garage-sections > button > span,
html[data-phone="true"] .race-stage-menu .race-car-condition small {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 white-space: nowrap;
}

/* Head: one line, and a close target. ~90px → 52px. */
html[data-phone="true"] .race-stage-menu .race-options-head { padding: 4px 4px 4px 12px; padding: var(--s1, 4px) var(--s1, 4px) var(--s1, 4px) var(--s4, 12px) }
html[data-phone="true"] .race-stage-menu .race-options-head h2 { margin: 0; font-size: 15px; font-size: var(--t-title, 15px) }
html[data-phone="true"] .race-stage-menu .race-options-head > button { width: 44px; height: 44px; min-height: 44px; padding: 0 }

/* Tabs: six icons in one 44px row. */
html[data-phone="true"] .race-stage-menu .race-menu-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 4px; padding: var(--s1, 4px) }
html[data-phone="true"] .race-stage-menu .race-menu-tabs > button { min-height: 44px; padding: 0; justify-content: center }

/* Every page: tighter gutters, controls at the 44px floor and no taller. */
html[data-phone="true"] .race-stage-menu .race-menu-page { padding: 8px 10px; padding: var(--s3, 8px) var(--s4, 10px); gap: 6px; gap: var(--s2, 6px) }
html[data-phone="true"] .race-stage-menu .race-menu-page > .race-menu-heading h2 { margin: 0; font-size: 15px; font-size: var(--t-title, 15px) }
html[data-phone="true"] .race-stage-menu select,
html[data-phone="true"] .race-stage-menu .race-menu-page button {
 min-height: 44px;
 height: auto;
 padding-top: 0;
 padding-bottom: 0;
 font-size: 13px;
 font-size: var(--t-ctl, 13px);
}
html[data-phone="true"] .race-stage-menu .race-field-label { margin: 0; font-size: 11px; font-size: var(--t-micro, 11px); white-space: nowrap }

/* A label beside its control instead of above it: 70px → 44px per field.
   Direct fields only — the cosmetics fieldset pairs its fields up instead. */
html[data-phone="true"] .race-stage-menu .race-garage-editor > label,
html[data-phone="true"] .race-stage-menu .race-garage-audio > label {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr);
 align-items: center;
 gap: 8px;
 gap: var(--s3, 8px);
 width: auto;
 max-width: none;
 margin: 0;
}
html[data-phone="true"] .race-stage-menu .race-garage-editor > label > select,
html[data-phone="true"] .race-stage-menu .race-garage-audio > label > select { margin: 0; min-width: 0 }

/* The button beside the field it acts on: engine preview next to the engine
   sound, horn test next to the horn. Two full-width rows → none. */
html[data-phone="true"] .race-stage-menu .race-garage-audio {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 44px;
 gap: 8px;
 gap: var(--s3, 8px);
 align-items: center;
 padding: 0;
 border: 0;
 background: none;
 box-shadow: none;
}
html[data-phone="true"] .race-stage-menu .race-garage-audio > .race-engine-preview { width: 44px; min-width: 44px; margin: 0; padding: 0; justify-content: center }
html[data-phone="true"] .race-stage-menu .race-garage-editor[data-race-garage-section="car"] { grid-template-columns: minmax(0, 1fr) 44px }
/* app-density.css pins the Car field and the Engine section to grid-row 1 for
   its side-by-side pairing; on a phone they are stacked, so the row must be
   released too or a landscape phone draws them on top of each other. */
html[data-phone="true"] .race-stage-menu .race-garage-editor[data-race-garage-section="car"] > * { grid-column: 1 / -1; grid-row: auto }
html[data-phone="true"] .race-stage-menu .race-garage-editor[data-race-garage-section="car"] > label:nth-of-type(2) { grid-column: 1 }
html[data-phone="true"] .race-stage-menu .race-garage-editor[data-race-garage-section="car"] > .race-horn-preview { grid-column: 2; width: 44px; min-width: 44px; padding: 0; justify-content: center }
html[data-phone="true"] .race-stage-menu .race-icon-action,
html[data-phone="true"] .race-stage-menu .race-garage-sections > button { min-width: 44px; padding-left: 0; padding-right: 0; justify-content: center }
html[data-phone="true"] .race-stage-menu .race-restore-appearance { width: 44px; margin-left: auto }

/* Condition: one line. The repair price is on the button it opens. */
html[data-phone="true"] .race-stage-menu .race-car-condition { min-height: 44px; padding: 0 10px; padding: 0 var(--s4, 10px); gap: 8px; gap: var(--s3, 8px) }
html[data-phone="true"] .race-stage-menu .race-car-condition strong { font-size: 13px; font-size: var(--t-ctl, 13px) }

/* Shown beside the car already — the panel over the scene carries the name,
   the fit, every stat and the traits — so the sheet does not show them twice. */
html[data-phone="true"] .race-stage-menu .race-garage-card,
html[data-phone="true"] .race-stage-menu .race-garage-editor > .race-car-traits,
html[data-phone="true"] .race-stage-menu .race-garage-editor > .race-car-stats { display: none }

/* Cosmetics: two fields to a row. Six rows of 70px → three. */
html[data-phone="true"] .race-stage-menu .race-upgrade-parts {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 6px 8px;
 gap: var(--s2, 6px) var(--s3, 8px);
 padding: 8px;
 padding: var(--s3, 8px);
}
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > legend,
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > .race-paint-presets,
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > .race-restore-appearance,
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > div,
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > section { grid-column: 1 / -1 }
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > label { margin: 0; min-width: 0 }
html[data-phone="true"] .race-stage-menu .race-upgrade-parts > label > select { margin: 0; min-width: 0; width: 100% }

/* The garage saves itself: this is a 32px status line, not a row of controls
   — until something needs a decision, when its label comes back. */
html[data-phone="true"] .race-garage-sync { min-height: 0; margin: 0; padding: 4px 8px; padding: var(--s1, 4px) var(--s3, 8px); font-size: 11px; font-size: var(--t-micro, 11px) }
html[data-phone="true"] .race-garage-sync > span > span { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible }

/* The launch row: "I am parked" and the button. ~75px → 52px. */
html[data-phone="true"] .race-options-launch { padding: 4px 10px; padding: var(--s1, 4px) var(--s4, 10px) }
html[data-phone="true"] .race-options-launch .race-launch-action { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; gap: var(--s3, 8px) }
html[data-phone="true"] .race-launch-action .race-check { min-height: 44px; font-size: 12px; font-size: var(--t-body, 12px); line-height: 1.3 }
html[data-phone="true"] .race-launch-action .race-primary { min-height: 44px; padding: 0 14px; padding: 0 var(--s5, 14px); font-size: 14px; font-size: var(--t-ctl, 14px) }
html[data-phone="true"] .race-check .ui-label-full { display: none }
html[data-phone="true"] .race-check .ui-label-short { display: inline }

/* On a phone the studio sheet IS the launcher: every control in the dock —
   car, course, multiplayer, race options — is a tab or a field inside it, and
   the dock was costing the sheet 114px of a body that had only 89 to begin
   with, so the drawer showed its own chrome and none of the car. Hidden, the
   dock measures 0, and the bottom reservation in app-density.css (which reads
   that measurement rather than a literal) gives the height straight back. */
@media (orientation: portrait) and (max-width: 699px) {
 html[data-phone="true"] .race-home.is-showroom.has-setup-footer .race-launch-dock { display: none }
}

/* ── the small reference blocks the pages were drawn with ─────────────
 * Driver: the season in two numbers. Boards: the rule the board ranks by.
 * Same anatomy each time —
 * a caption line, then figures set large with their unit small beneath. */
.race-season-stats,
.race-board-rules {
 padding: 10px 12px;
 padding: var(--card-pad, 10px) var(--s4, 12px);
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 12px;
 border-radius: var(--card-r, 12px);
 background: #0e1a23e8;
}
.race-season-stats > h4,
.race-board-rules > h4 {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 margin: 0 0 8px;
 margin: 0 0 var(--s3, 8px);
 font-size: 12px;
 font-size: var(--t-body, 12px);
 font-weight: 600;
 font-weight: var(--w-med, 600);
 color: #e8fff8;
 color: var(--sel-ink, #e8fff8);
}
.race-season-stats > h4 > small { font-weight: 400; color: #54e8cf; color: var(--accent, #54e8cf) }
.race-season-stats > dl {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 8px;
 gap: var(--s3, 8px);
 margin: 0;
}
.race-season-stats > dl > div { min-width: 0 }
.race-season-stats dd {
 margin: 0;
 font-size: 20px;
 font-size: var(--t-head, 20px);
 font-weight: 700;
 font-weight: var(--w-bold, 700);
 font-variant-numeric: tabular-nums;
 color: #f5f8f9;
 color: var(--ink, #f5f8f9);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.race-season-stats dt {
 font-size: 11px;
 font-size: var(--t-micro, 11px);
 color: #a8bac1;
 color: var(--muted, #a8bac1);
}
.race-board-rules > p { margin: 8px 0 0; margin: var(--s3, 8px) 0 0 }

/* ── what the 880×670 captures showed ─────────────────────────────────
 * The studio sheet on the car is 400px wide. app-density.css pairs the Car
 * and Engine sound fields side by side above ~480px of VIEWPORT, which is the
 * wrong measure here — the panel is the constraint, and half of it truncates
 * both selects ("City Comp…", "Hear engin…"). Stacked, each gets the width. */
/* Not only the car: the laptop's compact sheet is 400px and the tablet's
   comfortable one 420px, and the desktop capture showed the same three
   truncations there. Every showroom sheet stacks the pair. */
.race-home.is-showroom .race-menu-page.race-garage-editor,
html[data-tesla="true"] .race-home.is-showroom .race-menu-page.race-garage-editor { grid-template-columns: minmax(0, 1fr) }
.race-home.is-showroom .race-menu-page.race-garage-editor > label:first-of-type,
.race-home.is-showroom .race-menu-page.race-garage-editor > .race-garage-audio,
html[data-tesla="true"] .race-home.is-showroom .race-menu-page.race-garage-editor > label:first-of-type,
html[data-tesla="true"] .race-home.is-showroom .race-menu-page.race-garage-editor > .race-garage-audio { grid-column: 1; grid-row: auto }
/* The launch row in that sheet has ~330px for the checkbox and the button;
   the sentence lost its last word. The short label says the same thing. */
.race-home.is-showroom .race-options-launch .race-check .ui-label-full,
html[data-tesla="true"] .race-home.is-showroom .race-options-launch .race-check .ui-label-full { display: none }
.race-home.is-showroom .race-options-launch .race-check .ui-label-short,
html[data-tesla="true"] .race-home.is-showroom .race-options-launch .race-check .ui-label-short { display: inline }

/* The driver page's two columns key on viewport width, but the panel is the
   constraint: 400px at compact, 420px at a landscape tablet — the location
   card broke to one word per line. Two columns only where the sheet is
   wide: the car's 490px and the desktop's 560px. */
@media (min-width: 760px) and (max-width: 1599px) and (orientation: landscape) {
 html:not([data-tesla="true"]) .race-page-driver { display: block }
 html:not([data-tesla="true"]) .race-page-driver > * + * { margin-top: 12px; margin-top: var(--s4, 12px) }
}

/* Cosmetics categories: one row of chips that scrolls, as drawn — not a grid
   that folds "Paint templates" onto two lines at every width under 600px. */
.race-equipment-tabs.race-cosmetic-tabs {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 overflow-y: hidden;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: none;
 margin-left: -2px;
 padding: 2px;
}
.race-equipment-tabs.race-cosmetic-tabs::-webkit-scrollbar { display: none }
.race-equipment-tabs.race-cosmetic-tabs > button {
 flex: 0 0 auto;
 white-space: nowrap;
 padding-left: 12px; padding-left: var(--s4, 12px);
 padding-right: 12px; padding-right: var(--s4, 12px);
 border-radius: 999px;
}
.race-equipment-tabs.race-cosmetic-tabs > button + button { margin-left: 6px; margin-left: var(--s2, 6px) }
[dir="rtl"] .race-equipment-tabs.race-cosmetic-tabs > button + button { margin-left: 0; margin-right: var(--s2, 6px) }

/* Five race modes on a 470px sheet. Five across broke every label mid-word
   ("Arca·de"), and the sheet's own three-across left a hole after the fourth.
   Six tracks: the first three modes take two each, the last two take three
   each — two full rows, nothing orphaned, every label on one line. */
html[data-tesla="true"] .race-home .race-modes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; gap: var(--s3, 8px) }
html[data-tesla="true"] .race-home .race-modes > button { grid-column: span 2; min-width: 0 }
html[data-tesla="true"] .race-home .race-modes > button:nth-child(n+4) { grid-column: span 3 }

/* ── phone captures, second pass ──────────────────────────────────────
 * Five modes in two columns left one orphan and a hole; the fifth takes the
 * row. The sheet's card tint let the course card ghost through its header,
 * so on a phone the drawer is opaque — it is the whole screen's foreground.
 * And the driver page's two columns key on viewport width, which a landscape
 * phone satisfies with a 460px sheet: one column there. */
html[data-phone="true"] .race-home .race-modes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
html[data-phone="true"] .race-home .race-modes > button:nth-child(5):last-child { grid-column: 1 / -1 }
html[data-phone="true"] .race-stage-menu { background: #0d1216 }
html[data-phone="true"] .race-page-driver { display: block }
html[data-phone="true"] .race-page-driver > * + * { margin-top: 10px; margin-top: var(--s4, 10px) }
/* Two selects side by side in 390px truncate both ("Stage 1 · First…",
   "Screen contr…"); stacked, each has the width its label needs. */
html[data-phone="true"] .race-stage-menu .race-setup-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; gap: var(--s3, 8px) }
html[data-phone="true"] .race-stage-menu .race-setup-fields > * { grid-column: 1 / -1; min-width: 0 }
/* On a short viewport racing-entry.css floats the close button over the tab
   row's right end (position:absolute, right:6px), which on a landscape phone
   lands it on the sixth tab. The row keeps that corner clear. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-stage-menu .race-menu-tabs { padding-right: 56px }
 [dir="rtl"] html[data-phone="true"] .race-stage-menu .race-menu-tabs { padding-right: 4px; padding-left: 56px }
}

/* ── the race dialogs, from the state captures ─────────────────────────
 * Ready and pause share one action row: Start (or Resume), a fullscreen
 * toggle, Garage. Two columns put the icon-only toggle in a cell as wide as
 * Start and orphaned Garage on a row of its own. Three tracks — the toggle
 * takes the width of an icon — and the row reads as one line. */
.race-display .race-dialog > .race-lobby-actions {
 grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr);
 align-items: stretch;
}
.race-display .race-dialog > .race-lobby-actions > button { min-width: 0 }
.race-display .race-dialog > .race-lobby-actions > .race-fullscreen-action { min-width: 52px; padding-left: 14px; padding-right: 14px }

/* Results: the canvas draws a wide sheet, not a 340px column beside 540px of
   empty scene. Below 1100px the panel takes the width, and the body flows
   into two columns in DOM order — multi-column keeps reading order, a grid
   would not — so damage, standings and the next stage sit beside the stats
   instead of below the fold. */
@media (min-width: 700px) {
 /* racing-car.css caps every car dialog at 460px (0,3,1); results is the one
    that wants the room, so it carries that weight. At every width from a
    tablet up it is the same centred sheet: 856px or the screen, whichever is
    less — on a desktop a 600px column beside 1300px of scene read as a
    sidebar, and a result is a moment, not a sidebar. */
 .race-display .race-dialog.race-results-dialog,
 html:not([data-tesla="true"]) .race-display .race-dialog.race-results-dialog,
 html[data-tesla="true"] .race-display .race-dialog.race-results-dialog {
  width: calc(100% - 24px);
  max-width: 856px;
  margin-left: auto;
  margin-right: auto;
 }
 .race-display .race-results-dialog .race-result-body {
  -webkit-columns: 2;
  columns: 2;
  -webkit-column-gap: 16px;
  column-gap: 16px;
  column-gap: var(--s5, 16px);
 }
 .race-display .race-results-dialog .race-result-body > * {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  page-break-inside: avoid;
 }
 .race-display .race-results-dialog .race-result-body > .race-result-mark,
 .race-display .race-results-dialog .race-result-body > .race-result-stats {
  -webkit-column-span: all;
  column-span: all;
 }
}

/* Signed out, the consent banner sat on the entry headline; it belongs on the
   bottom edge there. Signed in it stays at the top, clear of the launch dock. */
html[data-race-entry="true"] .race-body .cookie-consent { top: auto; bottom: 12px; bottom: var(--s4, 12px) }

/* The ready dialog on the car ran to 86vw and the HUD's speed card showed
   past its edge. A dialog reads as a dialog at two thirds of the screen; it
   still widens when the garage or wallet opens inside it. */
html[data-tesla="true"] .race-display .race-dialog.race-lobby-dialog:not(.is-open) { width: clamp(420px, 72vw, 640px) }

/* The pause dialog on the car: 340px is a phone's width, and the one-line
   action row truncates "Resume race" and "Garage" in it. Same shape as the
   ready dialog, one size down. */
html[data-tesla="true"] .race-display .race-dialog:not(.race-results-dialog):not(.race-lobby-dialog) { width: clamp(380px, 46vw, 480px); max-width: none }

/* The online sheet was the one sheet narrower than its siblings (380px against
   490px for tracks, boards and display), which folded the tab row onto two
   lines. Same width as the others. */
html[data-tesla="true"] .race-home .race-stage-menu[data-menu="online"] { width: 490px; max-width: calc(100% - 48px) }

/* Course, controller, players, visibility: four selects in three columns
   truncate three of them at 470px. Two to a row, each with a real width. */
html[data-tesla="true"] .race-home .race-setup-fields.has-visibility { grid-template-columns: repeat(2, minmax(0, 1fr)) }

/* Dialogs from a tablet up. The pause and ready dialogs were capped at 365px
   (racing.css) — a phone's width — and on a desktop the fullscreen toggle
   carries a label ("Exit full"), so three actions in 365px truncated two of
   them. A dialog on a screen this size is a modal: wide enough for its row,
   and centred, not pinned to the HUD rail. The car keeps its own sizes. */
@media (min-width: 700px) {
 html:not([data-tesla="true"]) .race-display .race-dialog:not(.race-results-dialog):not(.race-lobby-dialog) {
  width: clamp(460px, 34vw, 520px);
  max-width: min(520px, calc(100% - 24px));
 }
 html:not([data-tesla="true"]) .race-display .race-dialog.race-lobby-dialog {
  width: clamp(420px, 46vw, 760px);
  max-width: min(760px, calc(100% - 24px));
 }
}
/* Comfortable density spells the row out — "Full screen", "Return to
   garage" — which needs 560px, and 46vw of a tablet in landscape is 543. */
@media (min-width: 1100px) {
 html:not([data-tesla="true"]) .race-display .race-dialog.race-lobby-dialog { width: clamp(560px, 46vw, 760px) }
}

/* ── laptop and tablet, from the state captures ───────────────────────
 * Compact density is the laptop as well as the car, and its HUD rails were
 * sized for the car's 880px: at 1366 the item card in a 184px right rail
 * broke its hint to one word per line. Off the car the rails take room the
 * laptop has; the car keeps 232/184, which is what leaves its centre 52%
 * clear. At compact the item card stacks its hint under the button as it
 * does below 1100px — the row layout only ever fit at comfortable density. */
html:not([data-tesla="true"])[data-density="compact"] .race-app,
html:not([data-tesla="true"])[data-density="compact"] .race-display { --hud-rail-left: 264px; --hud-rail-right: 200px }
html[data-density="compact"] .race-display .race-items { flex-direction: column; align-items: stretch; max-width: none }
html[data-density="compact"] .race-display .race-items > div { margin: 4px 0 0; margin: var(--s1, 4px) 0 0; text-align: center }
html[data-density="compact"] .race-display .race-items > div > span.race-item-key { display: none }

/* An upright tablet is the one class where the sheet was a 320px right
   column: tabs on two rows, cards showing through its header. The canvas
   draws it as a bottom sheet, as the studio already is here, so every menu
   is — and away from the car, the sheet is opaque: the tint is for scene
   depth on a panel where nothing sits under the sheet. */
html:not([data-tesla="true"]) .race-home .race-stage-menu { background: #0d1216 }
@media (orientation: portrait) and (min-width: 700px) and (max-width: 1023px) {
 /* app-density's compact width rule ties this on specificity and loads
    later; the extra class settles it. */
 html:not([data-phone="true"]) .race-display.race-home .race-stage-menu {
  left: 12px; left: var(--s4, 12px);
  right: 12px; right: var(--s4, 12px);
  top: auto;
  width: auto;
  max-width: none;
  max-height: 60%;
  border-radius: 16px 16px 12px 12px;
 }
 /* The challenge card had drifted to the right column under the guide
    button; it belongs under the course card, as on every other screen. */
 html:not([data-phone="true"]) .race-home .race-home-challenge {
  left: 24px; left: var(--s7, 24px);
  right: auto;
  top: 252px;
  width: 332px;
  max-width: 44%;
  box-sizing: border-box;
 }
}

/* Off the car the dialogs sat at the top-left of the stage — modal moments
   drawn as a sidebar. Nothing positions them (they are blocks in flow), so
   they centre with margins and a relative offset, and stay in flow. */
@media (min-width: 700px) {
 html:not([data-tesla="true"]) .race-display .race-dialog {
  position: relative;
  top: 50%;
  margin: 0 auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
 }
}

/* ── phones, from the state captures ───────────────────────────────────
 * A phone's dialog is ~340px and its fullscreen toggle is labelled, so
 * three actions on one line truncated the two that matter. The primary
 * takes a row of its own; the toggle and Garage share the next. */
html[data-phone="true"] .race-display .race-dialog > .race-lobby-actions {
 grid-template-columns: auto minmax(0, 1fr);
 row-gap: 8px;
 row-gap: var(--s3, 8px);
}
html[data-phone="true"] .race-display .race-dialog > .race-lobby-actions > .race-start-action { grid-column: 1 / -1 }
/* The rotate hint is for a race about to run; over a result it is noise, and
   over any dialog it covers the heading. Below the dialogs, gone when done. */
html[data-phone="true"] .race-rotate-hint { z-index: 4 }
html[data-phone="true"] .race-display[data-race-state="finished"] .race-rotate-hint { display: none }

/* Landscape phone in the race: the nitro card was the one left-rail child
   still shown, so it sat at the top-left under the track title. The canvas
   puts nitro with the thumb that uses it — a strip just above the stick. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-display.is-handheld-race .race-nitro {
  position: fixed;
  top: auto;
  left: max(12px, env(safe-area-inset-left, 0px));
  bottom: calc(150px + 20px + env(safe-area-inset-bottom, 0px));
  width: min(44vw, 300px);
  z-index: 3;
 }
 /* The room lobby's two columns do not fit a 500px dialog: one column. */
 html[data-phone="true"] .race-display .race-lobby-body { display: block }
 html[data-phone="true"] .race-display .race-lobby-body > .race-lobby-side { margin-top: 8px; margin-top: var(--s3, 8px) }
}

/* A landscape phone gives the ready and pause dialogs ~230px of stage. With
   an eyebrow, a heading, two shortcut buttons and the action row all fixed,
   the scrolling body was a 10px sliver — the objective and the controller
   select were in it, unreachable. The chrome gives the body its height back:
   no eyebrow, a title-size heading, tighter padding, 40px shortcuts. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-display .race-dialog { padding: 8px 12px; padding: var(--s3, 8px) var(--s4, 12px) }
 html[data-phone="true"] .race-display .race-dialog > .race-eyebrow { display: none }
 html[data-phone="true"] .race-display .race-dialog > h2 { margin: 0 0 6px; font-size: 16px; font-size: var(--t-title, 16px) }
 html[data-phone="true"] .race-display .race-lobby-body button[aria-expanded] { min-height: 40px; padding-top: 0; padding-bottom: 0 }
 html[data-phone="true"] .race-display .race-dialog > .race-lobby-actions { padding-top: 6px; padding-top: var(--s2, 6px) }
}

/* The launch row's sentence needs ~470px beside its button. Off the car the
   sheet is 400px at compact and 420px on a landscape tablet on every tab,
   not only the studio's — so below the desktop's 560px sheet, the short
   label everywhere. */
@media (min-width: 700px) and (max-width: 1599px) {
 html:not([data-tesla="true"]) .race-options-launch .race-check .ui-label-full { display: none }
 html:not([data-tesla="true"]) .race-options-launch .race-check .ui-label-short { display: inline }
}

/* ── the rev counter ────────────────────────────────────────────────── */
/* Sized from one token per density, never a fixed pixel: the arc, the gear
   figure inside it and the readout beside it all derive from --rpm-w, so a
   comfortable desktop draws a 96px dial, the car 80px, a phone 56px. Where
   the rail is wide (comfortable, ≥1100px) the dial sits beside the speed;
   where it is not, under it. */
.race-app, .race-display { --rpm-w: 80px }
html[data-density="comfortable"] .race-app, html[data-density="comfortable"] .race-display { --rpm-w: 96px }
html[data-density="ultra"] .race-app, html[data-density="ultra"] .race-display { --rpm-w: 56px }
html[data-phone="true"] .race-app, html[data-phone="true"] .race-display { --rpm-w: 56px }

.race-speed .race-rpm {
 position: relative;
 display: grid;
 grid-template-columns: var(--rpm-w, 80px) auto;
 align-items: end;
 justify-content: end;
 margin-top: 4px;
 margin-top: var(--s1, 4px);
 pointer-events: none;
}
.race-speed .race-rpm svg { display: block; overflow: visible; width: var(--rpm-w, 80px); height: calc(var(--rpm-w, 80px) * .575) }
.race-rpm path { fill: none; stroke-width: 6; stroke-linecap: round }
.race-rpm .race-rpm-track { stroke: #223038 }
.race-rpm .race-rpm-red { stroke: #ffb15c55 }
.race-rpm .race-rpm-fill { stroke: #54e8cf; stroke: var(--accent, #54e8cf); transition: stroke-dasharray .12s linear }
.race-rpm.is-over .race-rpm-fill { stroke: #ffb15c }
.race-rpm .race-rpm-gear {
 position: absolute;
 left: calc(var(--rpm-w, 80px) * .5 - 10px);
 bottom: 2px;
 width: 20px;
 text-align: center;
 font-size: calc(var(--rpm-w, 80px) * .19);
 font-weight: 700;
 font-weight: var(--w-bold, 700);
 font-variant-numeric: tabular-nums;
 color: #f5f8f9;
 color: var(--ink, #f5f8f9);
}
.race-rpm .race-rpm-value {
 margin-left: 8px;
 margin-left: var(--s3, 8px);
 font-size: 13px;
 font-size: var(--t-ctl, 13px);
 font-weight: 600;
 font-weight: var(--w-med, 600);
 font-variant-numeric: tabular-nums;
 color: #e9f7e0;
 line-height: 1;
 white-space: nowrap;
}
.race-rpm .race-rpm-value small { margin-left: 3px; font-size: 10px; font-size: var(--t-micro, 10px); font-weight: 400; letter-spacing: .06em; color: #a8bac1; color: var(--muted, #a8bac1) }
[dir="rtl"] .race-rpm .race-rpm-value { margin-left: 0; margin-right: var(--s3, 8px) }

/* Stacked under the number at every width: beside it, the dial plus its
   readout plus a 48px figure overran a 240px rail and clipped the speed. */
/* A phone in landscape has the speed as a corner readout: value only, the
   arc alone says the revs, the readout would crowd the pedals. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-speed .race-rpm { grid-template-columns: var(--rpm-w, 56px) }
 html[data-phone="true"] .race-speed .race-rpm .race-rpm-value { display: none }
}

/* Landscape phone: with rivals on the grid the standings board is the other
   left-rail child still shown, and it sat under the track title. The column
   under the HUD bar on the right is empty until the speed card; the board
   takes it, four rows deep, and never the road. */
@media (orientation: landscape) and (max-height: 500px) {
 html[data-phone="true"] .race-display.is-handheld-race .race-live-board {
  position: fixed;
  top: calc(52px + 8px + env(safe-area-inset-top, 0px));
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  width: min(38vw, 260px);
  max-height: 150px;
  overflow: hidden;
  z-index: 3;
 }
}

/* ── circuit tips ──────────────────────────────────────────────────── */
.race-circuit-tips {
 margin-top: 10px;
 margin-top: var(--s4, 10px);
 padding: 10px 12px;
 padding: var(--card-pad, 10px) var(--s4, 12px);
 border: 1px solid #2b3f48;
 border: 1px solid var(--ctl-line, #2b3f48);
 border-radius: 12px;
 border-radius: var(--card-r, 12px);
 background: #101b21;
}
.race-circuit-tips > h4 { display: flex; align-items: center; margin: 0; font-size: 13px; font-size: var(--t-ctl, 13px); font-weight: 600; font-weight: var(--w-med, 600); color: #e8fff8; color: var(--sel-ink, #e8fff8) }
.race-circuit-tips > h4 > .icon { margin-right: 6px; margin-right: var(--s2, 6px) }
.race-circuit-tips > p { margin: 4px 0 8px; margin: var(--s1, 4px) 0 var(--s3, 8px); font-size: 11px; font-size: var(--t-small, 11px); color: #a8bac1; color: var(--muted, #a8bac1) }
.race-circuit-tips-cars, .race-circuit-tips-levels { list-style: none; margin: 0; padding: 0 }
.race-circuit-tips-cars > li {
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto;
 grid-template-rows: auto auto;
 column-gap: 8px;
 column-gap: var(--s3, 8px);
 padding: 6px 0;
 padding: var(--s2, 6px) 0;
 border-top: 1px solid #20282e;
 border-top: 1px solid var(--hairline, #20282e);
 font-size: 12px;
 font-size: var(--t-body, 12px);
}
.race-circuit-tips-cars > li:first-child { border-top: 0 }
.race-circuit-tips-cars > li > strong { grid-column: 1; color: #f5f8f9; color: var(--ink, #f5f8f9); font-weight: 600; font-weight: var(--w-med, 600) }
.race-circuit-tips-cars > li > span { grid-column: 2; grid-row: 1; color: #54e8cf; color: var(--accent, #54e8cf); white-space: nowrap; font-size: 11px; font-size: var(--t-small, 11px) }
.race-circuit-tips-cars > li > small { grid-column: 1 / -1; color: #a8bac1; color: var(--muted, #a8bac1); font-size: 11px; font-size: var(--t-micro, 11px) }
.race-circuit-tips-cars > li.is-current > strong::after { content: " ·"; color: #54e8cf; color: var(--accent, #54e8cf) }
.race-circuit-tips-levels { margin-top: 8px; margin-top: var(--s3, 8px); padding-top: 8px; padding-top: var(--s3, 8px); border-top: 1px solid #20282e; border-top: 1px solid var(--hairline, #20282e) }
.race-circuit-tips-levels > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 8px; column-gap: var(--s3, 8px); padding: 3px 0; font-size: 11px; font-size: var(--t-small, 11px); color: #a8bac1; color: var(--muted, #a8bac1) }
.race-circuit-tips-levels > li > b { color: #e8fff8; color: var(--sel-ink, #e8fff8); font-weight: 600; font-weight: var(--w-med, 600) }

/* The scene's failure reason, under the notice: a driver on the car has no
   console, and "unavailable" with no cause cannot be reported or fixed. */
.race-scene-status .race-scene-reason { display: block; max-width: 420px; margin: 6px auto 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-size: var(--t-micro, 11px); color: #ffb15c; word-break: break-word }

/* The course picker's title band repeats the pressed tab. Under 620px of
   height the three-card page overflowed the sheet by a few pixels with it,
   and under 560px by a whole row, so the band gives its height to the list. */
@media (max-height: 620px) {
 .race-home .race-stage-menu .race-course-browser > .race-menu-heading p { display: none }
 .race-home .race-stage-menu .race-course-browser > .race-menu-heading { margin-bottom: 4px; margin-bottom: var(--s1, 4px) }
}
@media (max-height: 560px) {
 .race-home .race-stage-menu .race-course-browser > .race-menu-heading { display: none }
}

/* racing-playzone.css */
/* Racing and workshop share a restrained instrument palette. Density and
   Tesla compatibility remain later in the cascade; no additional blur or GPU layer. */
.race-display{
 --play-ink:#edf6f7;
 --play-muted:#a4b9c3;
 --play-line:#344954;
 --play-panel:#10212bec;
 --play-mint:#76edd1;
 --play-blue:#94d6ff;
}
.race-display .race-play-top,
.race-display .race-play-footer{background:#0c1922f5;border-color:#344954;color:var(--play-ink)}
.race-display .race-play-top h1{font-weight:650;letter-spacing:-.025em}
.race-display .race-play-top .race-eyebrow{color:var(--play-mint)}
.race-display .race-live-stats small{color:var(--play-muted)}
.race-display .race-live-stats b{color:var(--play-ink);font-variant-numeric:tabular-nums}
.race-display .race-hud-rail>.race-objective,
.race-display .race-hud-rail>.race-nitro,
.race-display .race-hud-rail>.race-speed,
.race-display .race-hud-rail>.race-live-board,
.race-display .race-hud-rail>.race-items,
.race-display .race-hud-rail>.race-circuit{
 background:var(--play-panel);border:1px solid var(--play-line);border-radius:12px;
 box-shadow:inset 0 1px 0 #ffffff08,0 3px 12px #00000020;
 color:var(--play-ink);
}
.race-display .race-hud-rail>.race-speed{border-bottom:2px solid var(--play-mint)}
.race-display .race-speed strong{color:#f4fbff;letter-spacing:-.055em}
.race-display .race-speed>span{color:var(--play-muted);font-weight:600}
.race-display .race-live-board-title{color:var(--play-muted)}
.race-display .race-live-board li{border-color:#34495480}
.race-display .race-live-board li.is-you{background:#1c403b;border-radius:6px;color:#d9fff2}
.race-display .race-nitro-label{color:var(--play-blue)}
.race-display .race-nitro-label>span{min-width:0;overflow-wrap:anywhere;letter-spacing:.025em}
.race-display .race-nitro-meter{background:#263e4c;border-radius:4px}
.race-display .race-nitro-meter>i{background:linear-gradient(90deg,#4daee9,#a1e4ff)}
.race-display .race-nitro.is-active{border-color:#9cdfff;background:#16394b}
.race-display .race-nitro-caption{color:#bad0dc}
.race-display .race-play .race-held{
 border:1px solid #526774;border-radius:12px;
 background:linear-gradient(180deg,#263a47,#172a36);
 color:#e6f0f5;box-shadow:inset 0 1px 0 #ffffff10,0 3px 0 #071019;
 transition:background-color .12s,border-color .12s;
}
.race-display .race-play .race-held>span{font-weight:650;letter-spacing:.045em}
.race-display .race-play .race-held.race-throttle{background:#1c4c41!important;border-color:#60cbb1;color:#c8ffeb!important}
.race-display .race-play .race-held.race-brake{background:#432c2b!important;border-color:#b27c6c;color:#ffdbcb!important}
.race-display .race-play .race-held.race-nitro-control{background:#193b53;border-color:#589bc6;color:#cceeff}
.race-display .race-play .race-held.is-held,
.race-display .race-play .race-held.is-boosting{box-shadow:inset 0 0 0 2px #dffff380;border-color:#d9fff2;background:#275750!important}
.race-display .race-play .race-held:disabled{box-shadow:none;opacity:.5}
.race-display .race-stage-menu{border-color:#3b535f;background:#0e1b24;box-shadow:0 12px 32px #00000035}
.race-display .race-garage-editor .race-menu-heading h2{color:#f0f8fa;letter-spacing:-.035em}
.race-display .race-garage-editor .race-menu-heading .race-eyebrow{color:var(--play-mint)}
.race-display .race-garage-sections button{border-color:#344954;background:#142631;color:#b6cbd4}
.race-display .race-garage-sections button[aria-pressed=true]{border-color:#65d9bd;background:#1c3e38;color:#dcfff3;box-shadow:inset 0 -2px 0 #76edd1}
.race-display .race-upgrade-comparison,
.race-display .race-garage-audio,
.race-display .race-garage-card{border-color:#344954;background:#132631;border-radius:12px}
.race-display .race-upgrade-heading{border-bottom:1px solid #344954;padding-bottom:10px}
.race-display .race-upgrade-part-icon{background:#214139;border-color:#487466;color:#b8ffe7}
.race-display .race-upgrade-wallet{background:#332e1d;border-color:#70603b;color:#ffe1a0}
.race-display .race-attachment-details{color:#c2d4dc}
.race-display .race-attachment-details p:first-child{color:#f0f6f8}
.race-display .race-upgrade-stat-bar{background:#293d48}
.race-display .race-upgrade-stat-current{background:#7a9baa}
.race-display .race-upgrade-stat-gain{background:#76edd1}
.race-display .race-upgrade-stats dd[data-loss=true]{color:#ffc39e}
.race-display .race-equipment-part .race-primary{background:#76edd1;color:#082b23;border-color:#9cffdf;font-weight:700}
.race-display .race-equipment-part .race-primary:disabled{background:#273c42;color:#a4b8bc;border-color:#455c63}
.race-display .race-car-condition{border-color:#3d6458;background:#15312e;color:#dcfff0}
.race-display .race-car-condition.needs-repair{border-color:#ac8853;background:#352c1f;color:#ffe0b2}
.race-display button:focus-visible,
.race-display select:focus-visible{outline:2px solid #baf7e9;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.race-display .race-play .race-held{transition:none}}
.race-attachment-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:8px 0}
.race-attachment-metrics>span{padding:8px;border:1px solid #37545f;border-radius:8px;background:#0f2029;color:#d3f2ed;font-size:var(--t-small,12px);font-variant-numeric:tabular-nums}
.race-attachment-care summary{display:flex;align-items:center;min-height:48px;cursor:pointer;color:#a7cbd6;font-size:var(--t-small,12px)}
.race-attachment-care summary:before{content:'+';margin-inline-end:8px;font-size:18px}
.race-attachment-care[open] summary:before{content:'−'}

/* driwe-loader.css */
/* ===========================================================================
   The DRIWE loader.
   ---------------------------------------------------------------------------
   Loaded after the racing sheets so it can settle the scene-status geometry,
   and before car-density/app-density/tesla-compatibility, which stay last.

   The mark is the wordmark's zigzag with a stroke that runs along it and off
   the end — the same path and animation the Drive launch screen uses, so the
   two loading states are recognisably the same product. Racing previously had
   an unlabelled teal dot in a grey pill; this replaces it.

   The important part is not the mark, it is where it sits. Loading is an
   expected state, so it must never cover a control: on the race surfaces the
   loading variant drops to z-index 1 — above the canvas, below the pitch
   column, the sign-in card and the launch dock — and stops taking pointer
   events. Only the states a driver has to act on (slow, unavailable, lost)
   come forward, because only those carry a button.
   =========================================================================== */

.driwe-loader{display:grid;justify-items:center;text-align:center}
.driwe-loader-mark{display:block;width:100%;height:auto;overflow:visible;color:var(--loader-ink,#54e8cf)}
.driwe-loader-mark path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.driwe-loader .logo-trace-base{opacity:.13}
/* pathLength="100" on the drawn path is what lets this be written in
   percentages whatever the real length of the stroke is. */
.driwe-loader .logo-trace{stroke-dasharray:100 100;animation:driwe-trace 2.6s ease-in-out infinite}
.driwe-loader.is-stopped .logo-trace{animation:none;stroke-dashoffset:0}
@keyframes driwe-trace{
 0%,12%{stroke-dashoffset:100;opacity:.5}
 58%,78%{stroke-dashoffset:0;opacity:1}
 100%{stroke-dashoffset:-100;opacity:.5}
}
.driwe-loader-word{
 margin-top:var(--s2,6px);
 color:#e9f6f4;font-size:var(--t-small,11px);font-weight:var(--w-strong,700);
 letter-spacing:.24em;text-indent:.24em;line-height:1;
}
.driwe-loader-label{margin-top:var(--s3,8px);color:#bdd4dd;font-size:var(--t-body,12px);line-height:1.45;max-width:26ch}
.driwe-loader-detail{margin-top:var(--s1,4px);color:#89a3ae;font-size:var(--t-small,11px);line-height:1.4}

/* Sizes name the job, not the pixels. */
.driwe-loader--sm .driwe-loader-mark{width:34px}
.driwe-loader--sm{grid-auto-flow:column;align-items:center;justify-items:start;text-align:left}
.driwe-loader--md .driwe-loader-mark{width:96px}
.driwe-loader--scene .driwe-loader-mark{width:clamp(96px,16vmin,168px)}

/* --- On the race surfaces ------------------------------------------------ */
/* Loading and slow keep the card's box out of the way entirely: no border, no
   background, centred on the scene the visitor is waiting for. */
.race-display .race-scene-status.scene-loading{
 left:0;right:0;top:0;bottom:0;
 z-index:1;
 display:grid;align-content:center;justify-items:center;
 max-width:none;padding:var(--s5,16px);
 border:0;background:none;box-shadow:none;
 pointer-events:none;
}
/* The pitch column and the sign-in card already darken this half of the
   screen; the mark reads through from the middle of the scene instead of
   competing with them. */
.race-home .race-scene-status.scene-loading{justify-items:center}
.race-display .race-scene-status.scene-loading .driwe-loader-label{color:#cadfe7}

/* Signed in, the loading state is a veil over the stage, not a mark behind
   it. Before this the garage — route card, welcome-back, the dock — was
   painted over a black canvas with the loader peeking out between them for
   as long as the scene took (seconds in the car), which read as a broken
   page rather than a loading one. The veil sits under the bar and above every
   panel (the day-start card is 9, the bar 10), on the theme's own ground, and
   takes the taps meant for what it hides. Notices, consent and the guide
   stay above it. Once the scene is ready the veil fades and the garage is
   simply there underneath; visibility follows the fade so a hidden veil is
   hidden to assistive tech and to tests alike. */
.race-display .race-scene-status.scene-loading[data-surface="garage"]{
 top:var(--shell-header,64px);
 z-index:10;
 pointer-events:auto;
 background:radial-gradient(120% 90% at 50% 0%,#11212b 0%,#070a0d 62%);
 transition:opacity .35s ease,visibility 0s linear .35s;
}
.race-display .race-scene-status.scene-loading[data-surface="garage"].is-leaving{opacity:0;visibility:hidden;pointer-events:none}
html[data-phone="true"] .race-display .race-scene-status.scene-loading[data-surface="garage"]{top:calc(var(--shell-header,56px) + env(safe-area-inset-top,0px))}
@media(prefers-reduced-motion:reduce){
 .race-display .race-scene-status.scene-loading[data-surface="garage"]{transition:none}
}

/* Slow is the one loading state with something to press, so it comes forward
   and takes pointer events back. It is still not a card — the same mark, with
   a button under it. */
.race-display .race-scene-status.scene-loading[data-scene="slow"]{z-index:11;pointer-events:auto}
.race-display .race-scene-status.scene-loading[data-scene="slow"] button{margin-top:var(--s4,12px)}

/* The unavailable and lost states keep the card they already had: they are
   alerts with a retry and a way out, and both have to be reachable. */
.race-display .race-scene-status.scene-unavailable{z-index:12}

/* Inline, in the catalogue notice: the same mark at a size that sits on a
   line of text, so "Loading…" is recognisably the same product loading. */
.race-notice .driwe-loader--sm .driwe-loader-mark{width:30px;color:#ffd79a}
.race-notice .driwe-loader--sm>*+*{margin-left:var(--s3,8px)}
[dir=rtl] .race-notice .driwe-loader--sm>*+*{margin-left:0;margin-right:var(--s3,8px)}

@media(max-width:700px){
 .driwe-loader--scene .driwe-loader-mark{width:clamp(84px,26vw,120px)}
 .driwe-loader-label{max-width:30ch}
}
/* A short landscape band has no room for a wordmark under the mark. */
@media(max-height:520px){
 .race-display .race-scene-status.scene-loading .driwe-loader-word{display:none}
 .driwe-loader--scene .driwe-loader-mark{width:clamp(72px,14vmin,110px)}
}

/* The setting asks for less movement, not less information: the stroke rests
   drawn rather than disappearing, so the mark still reads as the loader. */
@media(prefers-reduced-motion:reduce){
 .driwe-loader .logo-trace{animation:none;stroke-dashoffset:0;opacity:1}
}

/* --- Where the loader can stand ------------------------------------------
   The lobby's scene has a free middle: the route card is top-left, the
   challenge top-right, the dock along the bottom. The signed-out page has no
   free middle at all — the pitch column, the proof row and the sign-in card
   between them use the whole viewport — so there the loader takes the one
   band nothing else claims, between the bar and the top of the pitch, and
   lies down into a single line. */
.race-display .race-scene-status.scene-loading[data-surface="entry"]{
 top:var(--shell-header,64px);bottom:auto;
 align-content:start;justify-items:start;
 padding:var(--s2,6px) var(--s7,24px);
}
[dir=rtl] .race-display .race-scene-status.scene-loading[data-surface="entry"]{justify-items:end}
.driwe-loader--entry{grid-auto-flow:column;align-items:center;justify-items:start;text-align:left}
[dir=rtl] .driwe-loader--entry{text-align:right}
.driwe-loader--entry .driwe-loader-mark{width:42px}
.driwe-loader--entry .driwe-loader-label{margin-top:0;margin-left:var(--s3,8px);max-width:none;font-size:var(--t-small,11px)}
[dir=rtl] .driwe-loader--entry .driwe-loader-label{margin-left:0;margin-right:var(--s3,8px)}
@media(max-width:700px){
 .race-display .race-scene-status.scene-loading[data-surface="entry"]{padding:var(--s2,6px) var(--s5,16px)}
 .driwe-loader--entry .driwe-loader-mark{width:34px}
}

/* car-density.css */
/* --- cockpit density --- */
/* The type lift is the one rule here that really is about the car and not the
   viewport: the screen is at arm's length, so micro reads at 11, control at 14,
   title at 16. A laptop window of the same size is at desk distance and keeps
   the base scale. Numerals, headings and the display step are unchanged. */
html[data-tesla="true"]{--t-micro:11px;--t-small:12px;--t-body:13px;--t-ctl:14px;--t-title:16px}

/* Top bar: one 48 px band, 48 px buttons, no second row. */
/* The band is defined here in full. Height alone was not enough: the offset
   came from a rule that also set a 68px height, so where that rule won the bar
   started at 12 and ended at 60 while everything positioned below it — the
   route card, the ribbon — was written for a bar ending at 56. Four pixels of
   overlap, on exactly the screens where the two rules disagreed. */
html[data-car-density] .topbar{top:8px;height:48px;padding:0 var(--s4)}
html[data-car-density] .topbar .icon-btn,html[data-car-density] .account-btn{width:var(--ctl-h-min);height:var(--ctl-h-min)}
html[data-car-density] .topbar .icon-btn .icon{width:20px;height:20px}
html[data-car-density] .topbar .purchase-cta{white-space:nowrap;padding:0 var(--s4);font-size:var(--t-ctl)}
html[data-car-density] .topbar .session-pill em{display:none}
html[data-car-density] .topbar .experience-switch{font-size:var(--t-ctl)}

/* Road ribbon: follows the bar, one line of road name, a 46 px sign. */
html[data-car-density] .route-ribbon{top:56px;left:var(--s4);min-width:0;max-width:300px;padding:var(--s3);border-radius:var(--card-r)}
html[data-car-density] .route-ribbon>*+*{margin-left:var(--s3)}
html[dir="rtl"][data-car-density] .route-ribbon>*+*{margin-left:0;margin-right:var(--s3)}
html[data-car-density] .speed-sign{width:46px;height:50px}
html[data-car-density] .speed-sign strong{font-size:var(--n-lg)}
html[data-car-density] .speed-sign[data-metric="true"] strong{font-size:var(--n-sm)}
html[data-car-density] .speed-sign.over-limit:after{display:none}
html[data-car-density] .route-copy>strong{font-size:var(--t-title);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-car-density] .route-copy>small{font-size:var(--t-small)}
html[data-car-density] .route-ribbon .speed-warning{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:230px;margin-top:var(--s1);padding-top:var(--s1);font-size:var(--t-small);line-height:1.3}
html[data-car-density] .route-ribbon .speed-warning.hidden{display:none}

/* Driving controls: a column under the ribbon, three 48 px icon buttons. */
html[data-car-density] .demo-mode .demo-driving{top:160px;bottom:auto;left:var(--s4);right:auto;max-width:none;display:grid;justify-items:start;gap:var(--s3)}
html[data-car-density] .demo-mode .demo-driving>.demo-drive-toggle{width:var(--ctl-h-min);min-width:var(--ctl-h-min);height:var(--ctl-h-min);padding:0;border-radius:var(--ctl-r);background:rgba(10,18,23,.86)}
html[data-car-density] .demo-touch-controls{gap:var(--s2);min-width:0;width:102px}
html[data-car-density] .demo-touch-controls button{display:flex;align-items:center;justify-content:center;width:var(--ctl-h-min);min-width:var(--ctl-h-min);height:var(--ctl-h-min);min-height:var(--ctl-h-min);padding:0;border-radius:var(--ctl-r);border-color:rgba(255,255,255,.16);background:rgba(10,18,23,.82)}
html[data-car-density] .demo-touch-controls button:last-child{color:#7ef0d4}
html[data-car-density] .demo-touch-controls button:first-child{color:#ffb4a4}
html[data-car-density] .demo-driving button:active{transform:scale(.97)}

/* Bottom cluster: a 52 px dock and the pedal buttons on one line, the
   readout one step above it, and the legal line under everything. */
html[data-car-density] .control-dock,html[data-car-density] .drive-readout,html[data-car-density] .horn-btn,html[data-car-density] .nitro-btn{margin-bottom:0}
html[data-car-density] .disclaimer{bottom:var(--s1);min-height:16px;font-size:var(--t-micro,10px);line-height:1.2;color:var(--text-3)}
html[data-car-density] .control-dock{left:var(--s4);right:220px;bottom:var(--s7);width:auto;height:var(--ctl-h-lg);padding:0 var(--s3);border-radius:var(--card-r);transform:none}
html[data-car-density] .control-dock .sound-icon,html[data-car-density] .control-dock .dock-icon{width:36px;height:36px}
html[data-car-density] .drive-readout{left:var(--s4);right:220px;bottom:84px;width:auto;min-height:0;padding:var(--row-pad);grid-template-columns:112px minmax(140px,1fr) 104px;gap:var(--s4);border-radius:var(--card-r);transform:none}
html[data-car-density] .meter-label{margin-bottom:var(--s1)}
/* The select says P R N D; the label above it said the same thing. */
html[data-car-density] .drive-label{display:none}
html[data-car-density] .gear select.compact-drive{min-height:var(--ctl-h);width:100%}
html[data-car-density] .manual-gear{margin-top:var(--s1)}
html[data-car-density] .nitro-btn{right:var(--s4);bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
html[data-car-density] .horn-btn{right:116px;bottom:var(--s7);width:96px;height:var(--ctl-h-lg);border-radius:var(--ctl-r)}
html[data-car-density] .horn-control select{right:116px;bottom:84px}
/* The legal line is positioned, not laid out, so it cannot push anything: at
   phone-portrait widths its text wraps to a second line and grows *upward*,
   into the dock it is supposed to sit beneath. The cluster reserves the second
   line across the band where the wrap actually happens. Narrower than this the
   ultra tokens already stack the dock well clear of it, and wider than this the
   line fits in one — including every in-car viewport, which keeps its cluster
   exactly where it was. */
@media (min-width:360px) and (max-width:620px){
 html[data-car-density] .control-dock,
 html[data-car-density] .nitro-btn,
 html[data-car-density] .horn-btn{bottom:calc(var(--s7) + 16px)}
 html[data-car-density] .drive-readout,
 html[data-car-density] .horn-control select{bottom:100px}
}

/* The route card takes the height the bar and the ribbon gave back. */
html[data-car-density] .navigation-map{top:56px;right:var(--s4);max-height:calc(100vh - 238px)}
html[data-car-density] .navigation-compact:not(.navigation-modal){top:56px}
/* The chapter title sits in the free band beside the navigation card. */
html[data-car-density] .demo-mode .cinema-title{left:calc(50% - 76px);width:min(360px,calc(100vw - 520px))}

/* Settings: a one-line head so the first options are visible without scrolling. */
html[data-car-density] .panel{padding:0 var(--s5) var(--s5)}
html[data-car-density] .panel-head{padding:var(--s4) var(--s1) var(--s3)}
html[data-car-density] .panel-head h1{font-size:var(--t-head);line-height:1.1;margin:var(--s1) 0 0}
html[data-car-density] .panel-head p{display:none}
html[data-car-density] .panel-kicker{font-size:var(--t-micro)}
html[data-car-density] .experience-entry{margin:var(--s2) 0 var(--s1)}
html[data-car-density] .experience-entry button{min-height:var(--ctl-h);padding:0 var(--s4);font-size:var(--t-ctl)}
html[data-car-density] .panel-nav{top:62px;gap:var(--s3);padding:var(--s2) var(--s1) var(--s3)}
html[data-car-density] .panel-nav button{min-height:var(--ctl-h)}
html[data-car-density] .setting-section{scroll-margin-top:130px}
[dir="rtl"] .cinema-title{text-align:center}
html[data-car-density] .horn-upgrade,html[data-tesla="true"] .horn-upgrade{min-height:var(--ctl-h-min);align-items:center;font-size:var(--t-ctl)}
html[data-car-density] .car-colors>button,html[data-car-density] .custom-color,html[data-tesla="true"] .car-colors>button,html[data-tesla="true"] .custom-color{width:var(--ctl-h-min);height:var(--ctl-h-min)}
html[data-car-density] .lightweight-toggle,html[data-tesla="true"] .lightweight-toggle{min-height:var(--ctl-h-min)}
html[data-car-density] .manual-gear button,html[data-tesla="true"] .manual-gear button{min-width:var(--ctl-h-min);min-height:var(--ctl-h-min)}

/* app-density.css */
/* ===========================================================================
   Density — one responsive layer for the whole application.
   ---------------------------------------------------------------------------
   Loaded after the screen sheets and before tesla-compatibility.css, which
   stays last.

   Everything here keys on `html[data-density]`, written by src/client/density.js
   from the *available viewport* on both axes. That is the change this sheet
   exists to make: the geometry that used to live behind `html[data-tesla]`
   asked which browser was rendering, when the question is how much room it is
   offering. The car at 880x670 and a laptop window at 1024x700 want the same
   answer; the car at 1920x1200 does not.

     comfortable  wide and tall — full labels, full chrome
     compact      under 1100 wide or under 780 tall — short labels, thin chrome
     ultra        500-560 tall landscape, or a phone — icons, one merged bar

   A media-query fallback follows at the end so the layout is right on the
   first paint, before the script has run, and stays right if it never does.
   Chrome 79 (the car) is the floor: no :has(), no container queries without a
   declaration before them, no gap on flex rows.
   =========================================================================== */

/* --- The proportional unit ------------------------------------------------
   One length that everything drawn — icons, glyphs, badge dots, rules — is a
   multiple of, so the interface keeps its proportions instead of holding some
   parts at a fixed pixel size while the type around them scales.

   It follows vmin, the honest measure of "how big is this screen": it tracks
   the short side, so a phone in the hand, the car's landscape panel and a
   desktop window each get a unit sized to what they actually are. The value is
   tuned to land on exactly 1px at 1280x720 — the standard car target — which
   is why every existing `size={18}` renders unchanged there and only moves as
   the screen moves away from that reference.

   Density shifts the curve rather than replacing it: a compact screen is
   usually the car, read at arm's length, so its floor is higher than raw
   proportion would give; an ultra-short screen is a phone at reading distance
   and can afford a smaller one. Touch targets are NOT on this scale — 44px is
   a fact about thumbs, not about screens, and stays absolute throughout. */
:root {
  /* The ceiling was 1.5px, which grew a size={24} glyph to 36px on a 1920x1200
     panel and overflowed cards whose icon slots were drawn for a fixed 24. A
     28px cap keeps the proportion visible without outgrowing the boxes the
     icons live in — proportional, not disruptive. */
  --ui-scale: clamp(.92px, .1389vmin, 1.18px);
  --ui-radius: clamp(8px, 1.1vmin, 14px);
  --ui-hairline: max(1px, .085vmin);
}
html[data-density="compact"] {
  /* Arm's length: the floor rises so the car never drops below a readable glyph. */
  --ui-scale: clamp(1px, .155vmin, 1.32px);
  --ui-radius: clamp(8px, 1vmin, 12px);
}
html[data-density="ultra"] {
  --ui-scale: clamp(.88px, .2vmin, 1.12px);
  --ui-radius: clamp(7px, .9vmin, 10px);
}

/* The 111 literal icon sizes scattered through the sheets were the other half
   of the problem: they pinned a glyph to 20px while its label grew. They are
   superseded here — the element carries its size inline from the unit above,
   which is what a per-icon value has to be. This rule only guarantees the
   glyph never collapses or overflows its control. */
.ui-tool > .icon, button > .icon, a > .icon, label > .icon {
  flex: 0 0 auto;
  max-width: 2.4em;
  max-height: 2.4em;
}

/* Checkboxes and radios are drawn controls too, and the parked confirmation is
   the one that gates every race. At 21x21 it was the smallest aim point in the
   product. It scales with the unit and keeps a floor a thumb can hit; its label
   remains the real 48px target, so the box growing costs no reachability. */
.race-check input[type="checkbox"], .race-check input[type="radio"] {
  width: clamp(24px, 22 * var(--ui-scale, 1px), 32px);
  height: clamp(24px, 22 * var(--ui-scale, 1px), 32px);
  min-height: clamp(24px, 22 * var(--ui-scale, 1px), 32px);
  flex: 0 0 auto;
}

/* --- Type, proportional ---------------------------------------------------
   Three separate declarations were fighting here and the flat ones were
   winning: design-system.css sets the whole application scale in fixed pixels,
   racing.css sets a proportional one, and car-density.css plus racing.css both
   override the proportional one back to fixed pixels for the car. The result
   was type that never answered the screen — a control label read 14px at
   880x670 and the same 14px at 1920x1200, which is the complaint.

   The curve is restored, and the car's arm's-length bump becomes a raised
   floor rather than a flat value. Calibration is deliberate: at 1280x720 and
   880x670 — the two sizes the car actually reports — the compact steps land on
   the values shipping today, so nothing a current driver sees changes size. It
   is the larger panels that finally grow, which is the whole point. */
:root, html[data-density="comfortable"] {
  --t-micro: clamp(10px, 1.55vmin, 13px);
  --t-small: clamp(11px, 1.75vmin, 14px);
  --t-body: clamp(12px, 1.95vmin, 16px);
  --t-ctl: clamp(13px, 2.1vmin, 17px);
  --t-title: clamp(15px, 2.5vmin, 20px);
  --t-head: clamp(19px, 3.1vmin, 26px);
  --t-display: clamp(24px, 4vmin, 34px);
}
/* Read at arm's length: higher floors, same curve. The floors reproduce the
   car's current sizes exactly at vmin 6.7-7.2. */
html[data-density="compact"], html[data-density="compact"] .race-app, html[data-density="compact"] .race-display {
  --t-micro: clamp(11px, 1.53vmin, 14px);
  --t-small: clamp(12px, 1.67vmin, 15px);
  --t-body: clamp(13px, 1.81vmin, 17px);
  --t-ctl: clamp(14px, 1.95vmin, 18px);
  --t-title: clamp(16px, 2.22vmin, 21px);
  --t-head: clamp(19px, 3.1vmin, 26px);
  --t-display: clamp(24px, 4vmin, 34px);
}
/* A phone on its side has the least room and the shortest reading distance. */
html[data-density="ultra"], html[data-density="ultra"] .race-app, html[data-density="ultra"] .race-display {
  --t-micro: clamp(10px, 2.4vmin, 12px);
  --t-small: clamp(11px, 2.7vmin, 13px);
  --t-body: clamp(12px, 3vmin, 14px);
  --t-ctl: clamp(13px, 3.2vmin, 15px);
  --t-title: clamp(14px, 3.6vmin, 17px);
  --t-head: clamp(17px, 4.4vmin, 21px);
  --t-display: clamp(21px, 5.4vmin, 27px);
}

/* --- Density tokens ------------------------------------------------------ */
/* The chrome bands are named once here. Every header, HUD bar and footer in
   the app sizes from these, so "the header is too tall" is one edit. */
:root {
  --shell-header: 64px;
  --shell-bar: 56px;
  --shell-dock: 60px;
  --shell-gut: 16px;
  --shell-pad: 16px;
}
html[data-density="compact"] {
  --shell-header: 52px;
  --shell-bar: 52px;
  --shell-dock: 52px;
  --shell-gut: 12px;
  --shell-pad: 12px;
}
html[data-density="ultra"] {
  /* The header band is the one that gives: at 46px the controls inside it still
     hold their own 48px floor and overhang it by a pixel, because that floor is
     about thumbs, not screens. The merge while racing is done by collapsing the
     top bar (below), not by shrinking the band the controls live in, which is
     what a zero-height bar did: the cap derived from it computed a negative
     height and the lobby's Pause button vanished. */
  --shell-header: 46px;
  --shell-bar: 52px;
  --shell-dock: 52px;
  --shell-gut: 8px;
  --shell-pad: 8px;
}

/* The racing scale tightens with density rather than with a user agent. The
   car keeps the larger type it needs at arm's length, because at 880x670 it is
   `compact`, and compact raises the small steps rather than lowering them. */
html[data-density="compact"] .race-app, html[data-density="compact"] .race-display {
  --s5: 12px; --s6: 14px; --s7: 16px;
  --card-pad: 10px;
}
html[data-density="ultra"] .race-app, html[data-density="ultra"] .race-display {
  --s4: 8px; --s5: 10px; --s6: 12px; --s7: 12px;
  --card-pad: 8px;
  --card-r: 10px;
  /* A short screen gives back padding, never the aim point: 48px is the floor
     `targetsReachable` in the layout suite enforces at every viewport, and 46
     put the lobby chat, the pairing actions and Get ready under it at 960x540. */
  --ctl-h: 48px; --ctl-h-lg: 48px; --ctl-h-tile: 48px;
}

/* --- The responsive label ------------------------------------------------ */
/* See src/client/ToolbarButton.jsx. Both forms are in the DOM; this chooses.
   The whole label is aria-hidden, so hiding it never removes a control's name. */
.ui-label { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-label-short { display: none; }

html[data-density="compact"] .ui-tool--secondary .ui-label-full,
html[data-density="compact"] .ui-tool--tertiary .ui-label-full { display: none; }
html[data-density="compact"] .ui-tool--secondary .ui-label-short,
html[data-density="compact"] .ui-tool--tertiary .ui-label-short { display: inline; }

/* Ultra keeps the icon and drops the words — but only where a short form was
   never the point. A control with no icon would become an empty box (§55), so
   the label stays unless something visible remains. */
html[data-density="ultra"] .ui-tool--secondary .ui-label-full,
html[data-density="ultra"] .ui-tool--secondary .ui-label-short { display: none; }
html[data-density="ultra"] .ui-tool--tertiary .ui-label-full,
html[data-density="ultra"] .ui-tool--tertiary .ui-label-short { display: none; }
html[data-density="ultra"] .ui-tool--secondary > .icon:only-child ~ .ui-label,
html[data-density="ultra"] .ui-tool--tertiary > .icon:only-child ~ .ui-label { display: none; }
/* Primary actions keep their words at every size: Pause, Resume, Race again,
   Confirm and every destructive answer (§12). */
html[data-density="ultra"] .ui-tool--primary .ui-label-full { display: inline; }

/* A control that has lost its label is a square, not a pill. */
html[data-density="ultra"] .ui-tool--secondary,
html[data-density="ultra"] .ui-tool--tertiary { padding-left: 0; padding-right: 0; }

.ui-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctl-h-min, 48px);
  min-width: var(--ctl-h-min, 48px);
  max-width: 100%;
  padding: 0 var(--s4, 12px);
  border-radius: var(--ctl-r, 10px);
  font-size: var(--t-ctl, 13px);
  font-weight: var(--w-med, 600);
  white-space: nowrap;
}
.ui-tool > .icon + .ui-label { margin-left: var(--s3, 8px); }
[dir="rtl"] .ui-tool > .icon + .ui-label { margin-left: 0; margin-right: var(--s3, 8px); }
/* An icon-only control is square and never squeezes its glyph. */
.ui-tool > .icon { flex: 0 0 auto; }
.ui-tool .ui-label:empty { display: none; }

/* --- Application shell ---------------------------------------------------- */
/* Application screens are screens, not pages: the document does not scroll and
   exactly one region inside it may. Marketing and legal pages keep normal page
   scrolling and are excluded by not carrying the attribute. */
html[data-app-shell="true"], html[data-app-shell="true"] body {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
html[data-app-shell="true"] body > #root {
  height: 100vh;
  height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

/* Scrollbars, where a region genuinely owns one: subtle, contained, and never
   able to push the document sideways (§39). */
html[data-app-shell="true"] * { scrollbar-width: thin; }
html[data-app-shell="true"] *::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-app-shell="true"] *::-webkit-scrollbar-thumb { border-radius: 8px; background: rgba(255, 255, 255, .18); }
html[data-app-shell="true"] *::-webkit-scrollbar-track { background: transparent; }

/* ===========================================================================
   Racing
   =========================================================================== */

/* The race document scrolled because `.race-app` asked for `min-height:100vh`
   inside a padded box: any rounding, any 1 px border, and the page grew a
   scrollbar. It is now a fixed shell whose middle row takes what is left. */
body.race-body { overflow: hidden; }
body.race-body #root { min-height: 0; height: 100vh; height: var(--app-height, 100dvh); overflow: hidden; }
.race-app.race-display {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: var(--app-height, 100dvh);
  min-height: 0;
  padding: 0 var(--shell-pad) 0;
  overflow: visible;
}
/* Placement is explicit, never by source order. The screen has a dozen direct
   children — canvas, countdown, nameplates, grain, coin bursts, notices — and
   auto-placement would give each its own implicit row and leave the road with
   whatever was left. Everything defaults to the backdrop cell; the three
   structural bands are the only things that claim a row. */
.race-app.race-display > * { grid-area: 1 / 1 / -1 / 2; }
.race-app.race-display > .topbar {
  grid-area: 1 / 1 / 2 / 2;
  /* Drive floats its bar over the map. Racing cannot afford to: a floating bar
     is out of flow, so the shell's first row collapsed to nothing and the bar
     landed on the race HUD underneath it. Here it is a band the grid measures. */
  position: static;
  top: auto; left: auto; right: auto;
  margin: 0;
  border-radius: 0;
  border-width: 0 0 1px;
  height: var(--shell-header);
  min-height: var(--shell-header);
}
/* Panels that float inside the road still need to know where the bar ends.
   They read the band rather than repeating a number that has now moved twice. */
.race-display .race-stage-menu,
.race-display .race-garage .race-offer { top: var(--s4, 12px); }
/* The sign-in card is the exception, and only on a narrow screen. Everywhere
   else it floats beside the pitch and hangs from the top of the band like the
   panels above. On a phone there is no beside: racing-entry.css stacks the
   two, pitch in the upper 44% and the card under it, and an unconditional
   top here overrode that media query and grew the card over the whole page —
   the signed-out home screen was nothing but a login box. */
@media (min-width: 701px) {
  .race-display .race-entry > .race-login { top: var(--s4, 12px); }
}
/* Clearing the bands, not sitting on them. When the stale `top:62px` offsets
   went I replaced this with a flat gutter, which put every notice — including
   "Race connection lost" — straight over the toolbar's logo and audio control.
   Photographed in Safari. It clears the header, and the race bar too once
   there is one. */
.race-display > .race-notice { top: calc(var(--shell-header) + var(--s2, 6px)); }
.race-display[data-race-state="room"] > .race-notice,
.race-display[data-race-state="finished"] > .race-notice,
.race-display[data-race-state="driving"] > .race-notice {
  top: calc(var(--shell-header) + var(--shell-bar) + var(--s2, 6px));
}
.race-app.race-display > .race-garage,
.race-app.race-display > .race-play,
.race-app.race-display > .race-entry,
.race-app.race-display > .race-login { grid-area: 2 / 1 / 3 / 2; }
.race-app.race-display > .race-page-footer { grid-area: 3 / 1 / 4 / 2; }

/* The middle row is the game. It is never given a pixel height — that is the
   whole point of the grid — and `min-height:0` is what lets it shrink instead
   of pushing the dock off the bottom. */
.race-garage, .race-display .race-play {
  height: auto;
  min-height: 0;
  align-self: stretch;
}
.race-display .race-play { display: block; position: relative; }

/* The two chrome bands, sized from the shared tokens. */
.race-display .race-play-top { height: var(--shell-bar); padding: 0 var(--shell-gut); }
.race-display .race-play-footer { height: var(--shell-dock); padding: 0 var(--shell-gut); }
.race-app .topbar { height: var(--shell-header); }
/* HUD offsets follow the bands rather than repeating their numbers. */
.race-app, .race-display { --hud-bar: var(--shell-bar); --hud-dock: var(--shell-dock); --hud-gut: var(--shell-gut); }

/* --- The top toolbar ----------------------------------------------------- */
/* The logo was a 52 px wordmark floating in a 96 px box. It is now sized to the
   bar it sits in and nothing else (§10). The selector has to outrank the car
   layer's `html[data-tesla] .race-display .topbar .brand-logo`, which is what
   pinned it to 26 px tall in the first place. */
.topbar .brand-logo,
html[data-app-shell] .race-app.race-display .topbar .brand-logo {
  width: clamp(76px, 7vw, 96px);
  max-width: none;
  height: auto;
  max-height: calc(var(--shell-header) - 20px);
}
html[data-density="ultra"] .topbar .brand-logo,
html[data-density="ultra"] .race-app.race-display .topbar .brand-logo { width: clamp(52px, 10vw, 68px); }

/* Controls in a band are 48px, and the bands are sized to hold them — rather
   than the reverse, which made the control a function of the band and produced
   a negative height the moment a band went to zero. */
.race-display .race-play-top .ui-tool,
.race-display .race-play-top button,
.race-display .race-play-footer .ui-tool,
.race-display .race-play-footer button {
  min-height: 48px;
  height: 48px;
}
.race-display .topbar .top-actions > button,
.race-display .topbar .top-actions > a {
  height: min(48px, calc(var(--shell-header) - 4px));
  min-height: 44px;
}

/* Every action in the bar is the same control, so they stop disagreeing about
   their own size. The blanket 52 px square that crushed the labels is gone. */
.race-display .topbar .top-actions > button,
.race-display .topbar .top-actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ctl-h-min, 48px);
  min-width: var(--ctl-h-min, 48px);
  max-width: 100%;
  padding: 0 var(--s3, 8px);
  white-space: nowrap;
  overflow: hidden;
}
.race-display .topbar .top-actions > button > span,
.race-display .topbar .top-actions > a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* A phone's floor is 44, not 48 (racing-mobile.css sets it; this sheet loads
   after it, so the 48 px square above was winning and the six utilities needed
   314 px of a 302 px bar — the driver's own avatar was the one clipped off the
   end). Restated here so the later sheet stops overriding the narrower floor. */
html[data-phone="true"] .race-display .topbar .top-actions > button,
html[data-phone="true"] .race-display .topbar .top-actions > a,
html[data-phone="true"] .race-display .topbar .top-actions .race-audio-trigger {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0 var(--s1, 4px);
}

/* Compact and below, the bar's utilities are icons. Each one already carries an
   aria-label, so this removes decoration and not meaning. */
html[data-density="compact"] .race-display .topbar .top-actions .race-audio-trigger > span,
html[data-density="compact"] .race-display .topbar .top-actions > .race-friends-trigger > span,
html[data-density="compact"] .race-display .topbar .top-actions > .experience-switch > span,
html[data-density="ultra"] .race-display .topbar .top-actions > button > span:not(.ui-label),
html[data-density="ultra"] .race-display .topbar .top-actions > a > span:not(.ui-label) { display: none; }
html[data-density="compact"]:not([data-phone="true"]) .race-display .topbar .top-actions .race-audio-trigger,
html[data-density="compact"]:not([data-phone="true"]) .race-display .topbar .top-actions > .race-friends-trigger,
html[data-density="compact"]:not([data-phone="true"]) .race-display .topbar .top-actions > .experience-switch {
  width: var(--ctl-h-min, 48px);
  padding: 0;
}
/* The pending-requests badge is meaning, not decoration: it stays. */
.race-display .topbar .race-friends-trigger > b { display: block; }

/* The session pill is a status, and the first thing to go when width is short. */
html[data-density="compact"] .race-display .topbar .session-pill em { display: none; }
html[data-density="ultra"] .race-display .topbar .session-pill { display: none; }

/* Currency is a pill, not a card (§47). */
/* Outranks racing-i18n.css, which stacked the coin glyph above the number in a
   56 px column. A currency readout is a pill: one line, icon then figure. */
.race-display .topbar .top-actions > .race-wallet-trigger,
.race-display .topbar .race-wallet-trigger {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: 120px;
  padding: 0 var(--s4, 12px);
  border-radius: 999px;
}
.race-display .topbar .top-actions > .race-wallet-trigger > .icon + b,
.race-display .topbar .race-wallet-trigger > .icon + b { margin-left: var(--s2, 6px); }
.race-display .topbar .race-wallet-trigger > b { font-size: var(--t-ctl, 13px); font-weight: var(--w-med, 600); }
[dir="rtl"] .race-display .topbar .race-wallet-trigger > .icon + b { margin-left: 0; margin-right: var(--s2, 6px); }
.race-display .topbar .race-wallet-trigger > b { font-variant-numeric: tabular-nums; }

/* --- The race HUD bar ---------------------------------------------------- */
/* One row: where you are, then the numbers, then Pause. Grid, so a long stage
   name ellipses instead of pushing the Pause button off the screen (§49). */
.race-display .race-play-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--s4, 12px);
}
.race-display .race-play-top > div:first-child { min-width: 0; }
.race-display .race-play-top h1 {
  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-display .race-play-top .race-eyebrow {
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-display .race-live-stats > span { min-width: 0; }
.race-display .race-live-stats small { font-size: clamp(.68rem, .8vw, .9rem); white-space: nowrap; }
.race-display .race-live-stats b { font-size: clamp(1.05rem, 1.7vw, 1.9rem); line-height: 1.05; }

/* Compact merges the eyebrow into the title line: "Night City · S3". The
   heading keeps the name; the stage moves beside it rather than above it. */
html[data-density="compact"] .race-display .race-play-top > div:first-child,
html[data-density="ultra"] .race-display .race-play-top > div:first-child {
  display: flex;
  align-items: baseline;
  min-width: 0;
}
html[data-density="compact"] .race-display .race-play-top .race-eyebrow,
html[data-density="ultra"] .race-display .race-play-top .race-eyebrow {
  order: 2;
  margin: 0 0 0 var(--s3, 8px);
  flex: 0 1 auto;
}
[dir="rtl"] html[data-density="compact"] .race-display .race-play-top .race-eyebrow { margin: 0 var(--s3, 8px) 0 0; }
html[data-density="compact"] .race-display .race-play-top h1,
html[data-density="ultra"] .race-display .race-play-top h1 { order: 1; flex: 0 1 auto; }

/* Ultra short landscape merges the global bar into the race bar entirely (§22,
   §35): one row carrying brand, race state, numbers and Pause. The toolbar's
   own utilities move into the dock's overflow rather than disappearing. */
/* Only while the car is actually moving. In the lobby, paused, or on the
   result the second row comes back, because that is when Friends, the wallet
   and the profile are what the screen is for — §33 says secondary features
   move, never disappear. */
html[data-density="ultra"] .race-display[data-race-state="driving"] .topbar {
  position: static;
  height: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: hidden;
  /* Not merely clipped: a 0px-tall bar with overflow:hidden still holds its
     seven controls in the tab order and in the accessibility tree, so a
     keyboard user tabbed through invisible buttons and a reader announced
     them. visibility:hidden takes them out of both. */
  visibility: hidden;
}
html[data-density="ultra"] .race-display[data-race-state="driving"] .race-play-top { height: var(--shell-dock); }
/* With both rows present the shell is still only two bands of 46 px. */
html[data-density="ultra"] .race-display[data-race-state="room"],
html[data-density="ultra"] .race-display[data-race-state="finished"] { --shell-header: 46px; }

/* --- Race result --------------------------------------------------------- */
/* On a landscape screen the result is a side panel over a living scene (§17),
   not a dialog that fills the car. `.race-overlay` already aligns to the start;
   what was missing was a width that reads as a panel and a scrim that does not
   black out the road behind it. */
.race-display .race-play .race-overlay { background: linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 42%, rgba(4, 9, 11, .35) 100%); }
[dir="rtl"] .race-display .race-play .race-overlay { background: linear-gradient(270deg, var(--scrim) 0%, var(--scrim) 42%, rgba(4, 9, 11, .35) 100%); }
.race-display .race-dialog.race-results-dialog {
  width: clamp(340px, 32vw, 500px);
  max-width: 100%;
  padding: var(--s4, 12px) var(--s5, 16px);
}
html[data-density="compact"] .race-display .race-dialog.race-results-dialog { padding: var(--s3, 8px) var(--s4, 12px); }

/* The stats read as one row of three, and the supporting lines sit under them
   rather than each in its own card. */
.race-result-stats { column-gap: var(--s3, 8px); margin-top: var(--s2, 6px); }
.race-result-stats strong { font-size: clamp(1.3rem, 2vw, 2.2rem); }
.race-result-stats small { font-size: clamp(.68rem, .8vw, .9rem); }
/* Personal best and tour progress on one line (§71.12). */
.race-results .race-result-best { margin-top: var(--s2, 6px) !important; }
html[data-density="compact"] .race-results .race-result-mark,
html[data-density="ultra"] .race-results .race-result-mark { display: none; }

/* The upgrade nudge was a card with a heading, a sentence, a price and a
   full-width button — 35-40% of the panel for a secondary action (§19). It is
   now one row: what, why, how much, and the action. */
.race-upgrade-advice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s3, 8px);
  flex-wrap: nowrap;
  padding: var(--s2, 6px) var(--s3, 8px);
  margin: var(--s2, 6px) 0;
}
.race-upgrade-advice > * + * { margin-left: 0; }
[dir="rtl"] .race-upgrade-advice > * + * { margin-right: 0; }
.race-upgrade-advice > div { min-width: 0; }
.race-upgrade-advice strong { margin: 0; font-size: var(--t-ctl, 13px); }
/* The explanatory sentence is the first thing to go: the part name and the
   price carry the decision. */
.race-upgrade-advice p { display: none; }
.race-upgrade-advice small { display: inline; font-size: var(--t-small, 11px); }
.race-upgrade-advice small + small:before { content: " · "; }
.race-upgrade-advice button {
  flex: 0 0 auto;
  margin: 0;
  min-height: var(--ctl-h-min, 48px);
  padding: 0 var(--s3, 8px);
  white-space: nowrap;
}
html[data-density="comfortable"] .race-upgrade-advice p { display: block; margin: 0; font-size: var(--t-small, 11px); }

/* The secondary cards — tour progress, mastery, track badge, receipt — were
   four stacked boxes with a heading and a sentence each, which is what pushed
   the panel past the screen. Compact and below they are single rows: the fact
   on the left, the figure on the right, no second line of prose (§18). */
html[data-density="compact"] .race-result-body .race-arcade-journey,
html[data-density="ultra"] .race-result-body .race-arcade-journey,
html[data-density="compact"] .race-result-body .race-scenario-result,
html[data-density="ultra"] .race-result-body .race-scenario-result,
html[data-density="compact"] .race-result-body .race-track-result,
html[data-density="ultra"] .race-result-body .race-track-result {
  padding: var(--s2, 6px) var(--s3, 8px);
  margin: var(--s1, 4px) 0;
  border-radius: var(--ctl-r, 10px);
}
html[data-density="compact"] .race-result-body .race-scenario-result > div > span,
html[data-density="ultra"] .race-result-body .race-scenario-result > div > span,
html[data-density="compact"] .race-result-body .race-track-result > div > span,
html[data-density="ultra"] .race-result-body .race-track-result > div > span,
html[data-density="compact"] .race-result-body .race-arcade-journey .race-arcade-next,
html[data-density="ultra"] .race-result-body .race-arcade-journey .race-arcade-next,
html[data-density="compact"] .race-result-body .race-recap p,
html[data-density="ultra"] .race-result-body .race-recap p { display: none; }
html[data-density="compact"] .race-result-body .race-scenario-result strong,
html[data-density="ultra"] .race-result-body .race-scenario-result strong,
html[data-density="compact"] .race-result-body .race-track-result strong,
html[data-density="ultra"] .race-result-body .race-track-result strong { font-size: var(--t-ctl, 13px); }

/* "Prepare for your next race" said nothing the part name did not. */
html[data-density="compact"] .race-upgrade-advice > div > small:first-child,
html[data-density="ultra"] .race-upgrade-advice > div > small:first-child { display: none; }

/* The result is not the race: once the finish line is crossed the HUD bar is
   showing numbers the panel repeats, and the dock's Mute/Exit are the same two
   actions the panel offers. So the result overlay takes the whole play area
   rather than the band between them — 104 px of panel back on a 670 px screen,
   which is a third of the body's height (§18). */
.race-display .race-play .race-overlay.is-result {
  top: var(--s2, 6px);
  bottom: var(--s2, 6px);
  /* The scrim covers the dock to gain the panel its height. It must not also
     take the dock's taps: Mute and Exit stayed visible under it and stopped
     working. The backdrop is scenery; the panel is the control. */
  pointer-events: none;
}
.race-display .race-play .race-overlay.is-result > .race-dialog { pointer-events: auto; }
/* Pause goes only when the race is over. Hiding it whenever the car was not
   moving took it away in the lobby and while paused too, where the layout
   contract still requires a reachable 48px control — the result screen was the
   only place it was both covered and pointless. */
.race-display[data-race-state="finished"] .race-hud-pause { display: none; }
/* A landscape result also uses the width it has (§36): the panel widens with
   the screen so the blocks below the stats have somewhere to go. */
@media (min-width: 1100px) and (orientation: landscape) {
  .race-display .race-dialog.race-results-dialog { width: clamp(420px, 38vw, 620px); }
}

/* On a tall-enough landscape screen the result must simply fit (§18). The body
   keeps its scroll for genuinely short screens and long multiplayer standings,
   but nothing inside it may own a second one (§7). */
.race-result-body > * { overscroll-behavior: contain; }
.race-result-body .race-chat-messages,
.race-result-body .race-standings,
.race-result-body .race-leaderboard-list { max-height: none; overflow: visible; }

/* Race again is the strongest action; Garage is secondary (§71.15-16). */
.race-result-actions { padding-top: var(--s3, 8px); }
.race-result-actions > button { margin-bottom: var(--s2, 6px); }
.race-result-secondary { column-gap: var(--s2, 6px); }

/* --- The race dock ------------------------------------------------------- */
.race-display .race-play-footer > span { font-size: var(--t-small, 11px); }
html[data-density="compact"] .race-display .race-play-footer small,
html[data-density="ultra"] .race-display .race-play-footer small { display: none; }
.race-display .race-play-footer .ui-tool { padding: 0 var(--s3, 8px); }

/* --- Menus --------------------------------------------------------------- */
/* The setup panel is a master/detail: tabs stay put, one region scrolls, the
   launch action is pinned. It already had that shape; what it lacked was a
   width that uses the car's horizontal room instead of a 330 px column beside
   an empty screen (§9). */
html:not([data-phone="true"]) .race-stage-menu { width: clamp(320px, 30vw, 460px); }
/* Phones are excluded from all three widths: there the panel is a full-bleed
   bottom sheet (racing-mobile.css), and this sheet loads after it, so an
   unscoped `width` won here and left a 300 px sheet in a 390 px screen with
   90 px of dead space beside it. Width only. The panel is anchored to the screen's right edge, and the car
   showcase tools are anchored bottom-left with `max-width:calc(100% - 432px)`
   reserving the panel's column — so an over-constrained box that sets `left`
   against the base rule's `right` does not move the panel, it moves it to the
   other side of the screen and parks it on the car-view buttons. */
html[data-density="compact"]:not([data-phone="true"]) .race-stage-menu { width: clamp(300px, 42vw, 400px); }

/* The setup panel stops above the launch dock, at every height.
   Both are floating cards over the same screen, and the panel is on top, so
   where they meet the panel wins and the dock's Car & sound and Course buttons
   stop responding. The reservations for this were literals — 107px, then 132px
   for the car, then 105px in one media query — each true for the dock as it was
   when that line was written and none of them true once density changed its
   padding. At 1280x600 the panel ran to 588 while the dock started at 499.
   It reads the dock's measured height instead (published by the ResizeObserver
   in RaceApp), plus the dock's own 31px offset and a gutter. Specificity has to
   clear `html[data-tesla] .race-home.has-setup-footer .race-stage-menu`. */
html[data-app-shell] .race-display.race-home.has-setup-footer .race-stage-menu {
  bottom: calc(var(--launch-dock-h, 96px) + 31px + var(--s4, 12px));
}
.race-menu-tabs button { min-height: var(--ctl-h-min, 48px); }
html[data-density="ultra"] .race-menu-tabs button > span { display: none; }
html[data-density="ultra"] .race-menu-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Six 48px tabs, five gaps and the close button's 60px slot need 374px. The
   ultra sheet is clamp(320px, 30vw, 460px) — 320px at 960x540 — so each tab
   overlapped the next by 5px. A floor on the sheet keeps the tabs whole. */
html[data-density="ultra"]:not([data-phone="true"]) .race-home .race-stage-menu { min-width: 374px; }
/* Switching section must not inherit the previous section's scroll (§40). */
.race-menu-content { scroll-behavior: auto; }

/* --- The garage's two decisions ------------------------------------------
   Which car and which engine sound are the two choices that define a race, and
   they sat 300px apart: the car picker, then the selected-car profile card,
   then a three-way section switcher, and only then the sound. Measured at
   880x670 the garage tab held 898px of content in a 294px window, which put
   the engine picker — the thing this product is actually about — two screens
   below the fold with nothing to say it was there.

   They now share the first row. Everything else keeps its order underneath.
   Grid rather than flex because the car's Chrome 79 renders flex gap as zero. */
.race-menu-page.race-garage-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.race-menu-page.race-garage-editor > * { grid-column: 1 / -1; }
.race-menu-page.race-garage-editor > label:first-of-type {
  grid-column: 1;
  grid-row: 1;
}
.race-menu-page.race-garage-editor > .race-garage-audio { grid-column: 2; grid-row: 1; }
/* Its label is a two-column grid whose select reserves 140px. In half a panel
   that leaves nothing for the caption, so "Engine sound" collapsed to a clipped
   icon. Paired, the caption sits above the select like every other field. */
.race-menu-page.race-garage-editor > .race-garage-audio > label { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
/* Under about 340px of panel two columns would truncate both labels, so the
   narrow case keeps the single column and the original order. */
@media (max-width: 480px) {
  .race-menu-page.race-garage-editor { grid-template-columns: minmax(0, 1fr); }
  .race-menu-page.race-garage-editor > label:first-of-type,
  .race-menu-page.race-garage-editor > .race-garage-audio { grid-column: 1; grid-row: auto; }
}

/* Selectable collections are grids, not columns (§6, §44). The car has the
   width for three; a compact screen takes two. */
.race-menu-page .race-tracks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* The course picker is sized to show a whole page of courses without a scroll:
   filters, six cards and the pager. At 880x670 it ran nine pixels over, which
   is a scrollbar and a half-visible last row for the sake of three gaps. The
   gaps give way instead — the cards and their touch targets do not move. */
html[data-density="compact"] .race-home .race-course-browser,
html[data-density="ultra"] .race-home .race-course-browser { padding: var(--s2, 6px); gap: var(--s1, 4px); }
html[data-density="compact"] .race-home .race-course-browser .race-tracks,
html[data-density="ultra"] .race-home .race-course-browser .race-tracks { gap: var(--s1, 4px); }
html[data-density="compact"] .race-home .race-course-filters,
html[data-density="ultra"] .race-home .race-course-filters { gap: var(--s2, 6px); }
html[data-density="comfortable"]:not([data-phone="true"]) .race-stage-menu { width: clamp(420px, 34vw, 560px); }
html[data-density="comfortable"] .race-menu-page .race-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- The lobby's quick actions -------------------------------------------
   Photographed in Safari, reproduced in Chromium at every desktop size: the
   Change car and Coins buttons rendering 73px wide and 162px tall, one letter
   per line. Three nested halvings did it — a 500px dialog, split into a main
   column and a roster beside it, and the main column split again into two
   buttons. What was left for a label was about 27px.

   Where the roster takes half the dialog, the quick actions take the full
   remaining column rather than dividing it again, and the dialog is widened to
   carry both. This is the same defect the toolbar had: a box shrunk without
   deciding what happens to what is inside it. */
@media (min-width: 840px) and (orientation: landscape) {
  .race-display .race-dialog.race-lobby-dialog { width: clamp(420px, 46vw, 760px); }
  .race-lobby-body.has-side .race-lobby-quick { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2, 6px); }
}

/* The general guarantee behind it: a label in one of these controls ends in an
   ellipsis, never in a column of characters. Shrinking the box and deciding
   what happens to its contents are one decision, everywhere. */
.race-icon-action { white-space: nowrap; }
.race-icon-action > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Pause --------------------------------------------------------------- */
/* A light overlay, not a page (§42). */
.race-display .race-dialog:not(.race-results-dialog) { width: clamp(340px, 34vw, 520px); }

/* The lobby is the exception. Pause is a light interruption over a race you can
   still see; the lobby is the screen where the car is chosen, the coins are
   spent and the grid fills, and at 340px it put its roster and its ready action
   several hundred pixels down a 320px scroller while half the car's display
   stayed black. On a landscape screen with the room it takes a panel width, and
   racing-results.css gives it two columns at the same breakpoint. */
/* The width follows the screen rather than a breakpoint: a 340px column is
   right on a phone and wrong on every panel the car ever shows, and the cap
   keeps it a panel rather than a page on a desktop monitor. */
.race-display .race-dialog.race-lobby-dialog { width: clamp(340px, 86vw, 820px); }

/* The rotate hint sat at 44% of the screen — the middle of whatever was on it,
   which over a result panel meant the middle of the result. It belongs under
   the bars, reading as a status: the one band of the screen that is never an
   action, and clear of Race again and Garage at the bottom. */
.race-rotate-hint {
  top: calc(var(--shell-bar) + var(--s3, 8px));
  bottom: auto;
  max-width: calc(100% - var(--s5, 16px) * 2);
  transform: translateX(-50%);
  pointer-events: none;
}
/* And only while there is a race to turn sideways for. On the lobby, pause and
   result the dialog is the content, and a floating hint over its heading is
   noise the reader cannot dismiss. */
.race-display:not([data-race-state="driving"]) .race-rotate-hint { display: none; }

/* --- Two features a phone lost entirely ----------------------------------
   Both were found by walking the tasks rather than the layout: at 390px wide
   the language picker and the way back to Drive could not be reached from the
   racing screen at all.

   The language control lives inside `.brand`, and a `max-width:420px` rule hid
   that whole block to buy room — taking the only language switch with it, with
   no other route to it anywhere in racing. The block stays; the wordmark is
   what goes, because the wordmark is decoration and the picker is a feature.

   The Drive link was hidden on phones on the grounds that the page footer
   carries it. The footer's link goes to "/" rather than to Drive, and on the
   racing screen it is not always shown, so on a phone there was no way across
   to the other half of the product. It comes back as a 48px icon, which is what
   compact density already renders it as. */
@media (max-width: 420px) {
  .race-display .topbar .brand { display: flex; align-items: center; }
  .race-display .topbar .brand > a { display: none; }
}
html[data-phone="true"] .race-display .topbar .top-actions .experience-switch { display: inline-flex; }

/* --- The iPhone chrome-collapse workaround --------------------------------
   Safari on iPhone has no element fullscreen, and folds its toolbars away only
   when the page scrolls. The shell is deliberately unscrollable, so for the
   length of a race on that browser — and nowhere else — the document is given
   just enough height to scroll through, which is what Safari watches for. The
   game itself still measures `--app-height`, so it reflows into the bars'
   space as they collapse rather than being sized for either state. */
html.is-chrome-collapsible,
html.is-chrome-collapsible body {
  height: auto;
  min-height: 100%;
  overflow: visible;
}
html.is-chrome-collapsible body > #root {
  /* 100vh on iOS is the LARGE viewport — the height with the chrome already
     collapsed. Asking for it is what makes the document taller than the window
     and gives the scroll somewhere to go. */
  height: 100vh;
  min-height: 100vh;
}
html.is-chrome-collapsible .race-app.race-display { height: 100vh; }

/* --- Touch controls, sized to the orientation -----------------------------
   The steering pad was `width:min(44vw,300px)` with a fixed 150px zone. 44vw is
   a portrait measure: held sideways it made the pad a third of the screen wide
   and nearly 40% of its height, so it covered the nitro meter on the left and
   took road the driver needs to see. Photographed on an iPhone mid-race.

   Sized from the short side instead, which is the same in both orientations, so
   the pad is the same physical size in the hand whichever way the phone is
   held; landscape simply has less height to give, and gets a shorter zone. The
   pedals keep their own floors — those are thumb targets and stay absolute. */
html[data-orientation="landscape"] .race-display .race-play > .race-joystick-controls > .race-joystick-steering {
  width: clamp(180px, 46vmin, 260px);
}
html[data-orientation="landscape"] .race-display .race-play > .race-joystick-controls .race-joystick-zone {
  height: clamp(84px, 28vmin, 124px);
}
html[data-orientation="portrait"] .race-display .race-play > .race-joystick-controls > .race-joystick-steering {
  width: clamp(190px, 58vmin, 300px);
}
html[data-orientation="portrait"] .race-display .race-play > .race-joystick-controls .race-joystick-zone {
  height: clamp(110px, 34vmin, 170px);
}
/* The nitro meter shares the left edge with the steering pad. It rides above
   it rather than under it, so neither has to guess the other's height. */
html[data-phone="true"] .race-display .race-play > .race-nitro,
html[data-density="ultra"] .race-display .race-play > .race-nitro {
  bottom: calc(var(--shell-dock) + clamp(84px, 28vmin, 124px) + var(--s4, 12px));
  max-width: min(42vw, 240px);
}

/* --- Narrow screens ------------------------------------------------------ */
/* Under about 560 px the HUD cannot show the stage line and the numbers and
   Pause, and truncating all three to "Nig… BOT RAC…" serves nobody. The stage
   name wins; the mode is on the result and in the setup panel. */
@media (max-width: 560px) {
  .race-display .race-play-top .race-eyebrow { display: none; }
  .race-display .race-live-stats > span:nth-child(2) { display: none; }
  .race-upgrade-advice { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s2, 6px); }
  .race-upgrade-advice button { grid-column: 1 / -1; width: 100%; }
}

/* --- Notices and the consent ask ----------------------------------------- */
/* The banner was pinned to the top of the race document at z-index 60 and
   landed squarely on the toolbar — it covered the logo, the audio control and
   the account button at every viewport in the matrix. It now sits below the
   bar it was colliding with, and still clear of the throttle. */
.race-body .cookie-consent {
  top: calc(var(--shell-header) + var(--s4, 12px) + 14px);
  bottom: auto;
  z-index: 60;
}
html[data-density="ultra"] .race-body .cookie-consent {
  top: auto;
  bottom: calc(var(--shell-dock) + var(--s2, 6px));
  max-width: min(560px, calc(100% - 16px));
}

/* ===========================================================================
   Drive, and the pages that share its shell
   ---------------------------------------------------------------------------
   Drive's bar floats over the map and every instrument below it is offset from
   its height, so the band token does not apply here — only the gutters do.
   =========================================================================== */
html[data-density="ultra"] .topbar { left: 8px; right: 8px; padding: 0 6px 0 8px; border-radius: 12px; }
html[data-density="ultra"] .topbar .session-pill { display: none; }

/* The settings panel is a master/detail on a wide screen rather than a 560 px
   column of stacked sections behind one scrollbar (§28). */
html[data-density="comfortable"] .panel { width: min(760px, 100vw); }

/* --- Footer navigation --------------------------------------------------- */
/* The race page footer is bottom-anchored and was 24px tall, which was fine
   while its links were 26px of text. Raising them to a 44px touch target — the
   right call on a touch screen — pushed them 10px past the bottom of a phone
   with nothing able to scroll, so Privacy and Back to Driwe became unreachable.
   The band sizes to what it holds. */
.race-display .race-page-footer { height: auto; min-height: 44px; }
/* Every footer link is a navigation target on a touch screen, so it gets a
   real target (§13, §38). The exception, deliberately, is a link inside running
   legal prose — an address in the middle of a sentence cannot be 44 px tall
   without breaking the paragraph, and it is read rather than aimed at. */
.site-footer .footer-navigation a,
.footer-legal a,
.race-page-footer a,
.home-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s2, 6px);
}
.information-page p a, .site-footer p a { min-height: 0; min-width: 0; padding: 0; }
/* Policy links sit inside a sentence on the checkout page, where a 44 px line
   box would break the paragraph. The target grows instead of the text: padding
   out, the same margin back, so the hit area is 44 px and the layout is not. */
.purchase-policies a, .home-billing-note a {
  display: inline-block;
  padding: 13px 6px;
  margin: -13px -2px;
}

/* --- The garage's floating controls ------------------------------------- */
/* The car-view buttons cleared the launch dock by a literal 183 px — the dock's
   height on the day the rule was written. Once density changed the dock's own
   spacing the literal was wrong and the dock covered the buttons. They ride on
   a measured offset instead: the dock's height, published by the dock. */
.race-home .race-showcase-tools { bottom: calc(var(--launch-dock-h, 183px) + var(--s3, 8px)); }
html[data-density="comfortable"] .race-home .race-showcase-tools { bottom: calc(var(--launch-dock-h, 195px) + var(--s3, 8px)); }

/* Safe areas, for the phones and tablets that have them (§37). */
@supports (padding: env(safe-area-inset-left)) {
  html[data-app-shell="true"] body > #root {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .race-display .race-play-footer { padding-bottom: env(safe-area-inset-bottom); height: calc(var(--shell-dock) + env(safe-area-inset-bottom)); }
}

/* ===========================================================================
   Home — the page that has to sell the app
   ---------------------------------------------------------------------------
   The short-screen rule here used to be "hide the prose": below 760 px of
   height the hero sub-headline, the intro paragraph and all three entry-card
   descriptions were display:none. 760 px of height is the car — the primary
   target — so the page arrived on the screen that matters most with its
   reasons to tap removed, in order to fit a hero into one viewport on a
   document that is 13 700 px long and scrolls anyway. Nothing was bought that
   the copy did not pay for.

   The copy therefore stays at every density and the type and spacing shrink
   instead. Only `ultra` — a 390 px-tall landscape band — drops anything, and
   what it drops is decoration rather than argument.
   =========================================================================== */
html[data-density="compact"] .welcome-hero { min-height: 0; }
html[data-density="compact"] .welcome-visual { min-height: 340px; }
html[data-density="compact"] .welcome-editorial { padding-top: 104px; }
html[data-density="compact"] .welcome-editorial > span { max-width: 30em; font-size: 13px; line-height: 1.55; }
html[data-density="compact"] .welcome-content { padding: var(--s6); }
html[data-density="compact"] .welcome-intro h2 { margin: var(--s2) 0 var(--s3); }
html[data-density="compact"] .welcome-intro > p { margin: 0 0 var(--s4); font-size: 13px; line-height: 1.55; }
html[data-density="compact"] .welcome-footnote { margin-top: var(--s4); }

/* Two lines of "why tap this", clipped rather than deleted. The card title
   names the destination; this names the cost and the payoff, which is the part
   a visitor is actually deciding on. -webkit-line-clamp is Chrome 79 safe. */
html[data-density="compact"] .welcome-page .experience-card p,
html[data-density="ultra"] .welcome-page .experience-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

html[data-density="ultra"] .welcome-hero { min-height: 0; }
html[data-density="ultra"] .welcome-visual { min-height: 240px; }
html[data-density="ultra"] .welcome-editorial { padding-top: 96px; }
html[data-density="ultra"] .welcome-editorial > span { font-size: 12px; line-height: 1.5; }
html[data-density="ultra"] .welcome-content { padding: var(--s5); }
html[data-density="ultra"] .welcome-page .experience-card p { -webkit-line-clamp: 1; }
/* The ambient line sits over artwork that is 240 px tall here. It is mood. */
html[data-density="ultra"] .welcome-scene-note { display: none; }

/* --- Rows that line up ---------------------------------------------------- */
/* A grid of cards is read across as well as down, so the part being compared —
   the availability line, the step's action — sits on one line across the row
   instead of wherever that card's prose happened to stop. */
.home-features article,
.home-feature-catalog article,
.home-racing-access article,
.home-steps li { display: flex; flex-direction: column; }
/* Only in the catalogue, where the availability line is the card's last child.
   The RAW cards and the access cards open with the same class as a heading
   label, and pushing *that* to the bottom moves the whole card with it. */
.home-feature-catalog article > .home-feature-availability { margin-top: auto; }
.home-steps li > a,
.home-steps li > .home-step-note,
.home-racing-access article > .home-plan-link { margin-top: auto; }

/* --- The bands that answer objections ------------------------------------- */
/* Four items across a 1180 px page; two-by-two on the car, where a third
   column would cost each answer two extra lines of wrapping. */
html[data-density="compact"] .home-proof,
html[data-density="ultra"] .home-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px var(--s6); }
html[data-density="compact"] .home-assurance,
html[data-density="ultra"] .home-assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- The section nav ------------------------------------------------------ */
/* Seven pills wrap to two rows at 880 px. They keep the 44 px target and lose
   the padding, which is what was making the second row. */
html[data-density="compact"] .home-section-nav { padding: 12px var(--s6); }
html[data-density="compact"] .home-section-nav a { min-height: 44px; padding: 0 13px; font-size: 12px; }
html[data-density="ultra"] .home-section-nav { padding: 8px var(--s5); }
html[data-density="ultra"] .home-section-nav a { min-height: 44px; padding: 0 11px; font-size: 12px; }

/* --- The consent ask on a marketing page ---------------------------------- */
/* At ultra the banner covered the entry cards it was asking about. It keeps
   its own row at the bottom and the page keeps room underneath it. */
html[data-density="ultra"] .welcome-page ~ .cookie-consent,
html[data-density="ultra"] .cookie-consent { bottom: var(--s2, 6px); padding: var(--s4, 12px); }

/* ===========================================================================
   Shop — the page that has to be readable while it takes money
   ---------------------------------------------------------------------------
   The storefront had exactly two breakpoints, at 1000 px and 760 px of width,
   so the screens between them were sized by neither: a car at 1280x720 and a
   laptop window at the same size both got the roomy 1280 px shell with a
   340 px sticky review column and a 64 px header, on 720 px of height. Density
   answers for those, on both axes, and the two width queries in
   product-polish.css stay where they are for the narrow case.

   Nothing here deletes copy. What shrinks is chrome, type and the gaps — the
   reasons to buy, the policies and the price lines survive every size, because
   this is the page where they are the product (§the Home note above).
   =========================================================================== */
html[data-density="compact"] .shop-header { padding: var(--s3) var(--s5); }
html[data-density="compact"] .shop-header svg.brand-logo { width: 104px; }
html[data-density="compact"] .shop-shell { padding: var(--s5); }
html[data-density="compact"] .shop-heading { margin-bottom: var(--s5); }
html[data-density="compact"] .shop-heading h1 { font-size: 20px; }
html[data-density="compact"] .shop-heading > p { font-size: 13px; line-height: 1.55; }
html[data-density="compact"] .shop-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s6); }
html[data-density="compact"] .shop-layout > .purchase-review { padding: var(--s5); top: var(--s4); }
html[data-density="compact"] .shop-earned,
html[data-density="compact"] .shop-return { padding: var(--s5); margin-bottom: var(--s5); }

/* A short screen cannot hold a sticky column: the review panel is taller than
   the viewport, so pinning it hides its own checkout button. It scrolls with
   the page and the button arrives under the choices it belongs to. */
html[data-density="compact"] .shop-layout > .purchase-review { position: static; }

/* Ultra is a phone, or the car with its browser chrome open. One column, and
   the header keeps the brand, the language and the actions as icons. */
html[data-density="ultra"] .shop-header { padding: var(--s2) var(--s4); }
html[data-density="ultra"] .shop-header svg.brand-logo { width: 88px; }
html[data-density="ultra"] .shop-shell { padding: var(--s4); }
html[data-density="ultra"] .shop-heading h1 { font-size: 20px; margin: var(--s2) 0; }
html[data-density="ultra"] .shop-heading > p { font-size: 12px; line-height: 1.5; }
html[data-density="ultra"] .shop-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
html[data-density="ultra"] .shop-layout > .purchase-review { position: static; padding: var(--s4); }
html[data-density="ultra"] .shop-earned,
html[data-density="ultra"] .shop-return { padding: var(--s4); margin-bottom: var(--s4); }
html[data-density="ultra"] .shop-login, html[data-density="ultra"] .phone-handoff { padding: var(--s4); }
html[data-density="ultra"] .phone-handoff-layout { grid-template-columns: minmax(0, 1fr); }

/* The address is the part of the account chip that can be 40 characters long,
   and it is the part the shopper already knows. The word stays, so a narrow
   header still answers "am I signed in?" — which is the question it is there
   to answer (§13). */
html[data-density="compact"] .shop-account { max-width: 210px; }
html[data-density="ultra"] .shop-account small { display: none; }
html[data-density="ultra"] .shop-account { padding: 0 var(--s3); }
/* Long language names and long step labels both wrap; the numbers do not. */
html[data-density="ultra"] .shop-progress li { min-height: 36px; margin-right: var(--s4); font-size: 11px; }
html[dir="rtl"][data-density="ultra"] .shop-progress li { margin-right: 0; margin-left: var(--s4); }

/* Group tabs are a row of six. At 880 px they wrap to two rows rather than
   scrolling sideways, which is the rule the whole sheet is built on (§39). */
html[data-density="compact"] .addon-group-tabs button,
html[data-density="ultra"] .addon-group-tabs button { font-size: 12px; padding: 0 var(--s3); }

/* ===========================================================================
   First paint, and no-script
   ---------------------------------------------------------------------------
   The attribute arrives with the first effect. These give the same answer from
   the stylesheet alone, so the layout never flashes the wrong density. They are
   deliberately written to be overridden by the attribute rules above: a media
   query cannot see the visual viewport, and the script can.
   =========================================================================== */
@media (max-width: 1099px), (max-height: 779px) {
  html:not([data-density]) { --shell-header: 52px; --shell-bar: 46px; --shell-dock: 52px; --shell-gut: 12px; --shell-pad: 12px; }
  html:not([data-density]) .ui-tool--secondary .ui-label-full,
  html:not([data-density]) .ui-tool--tertiary .ui-label-full { display: none; }
  html:not([data-density]) .ui-tool--secondary .ui-label-short,
  html:not([data-density]) .ui-tool--tertiary .ui-label-short { display: inline; }
}
@media (max-height: 560px) and (orientation: landscape), (max-height: 500px) {
  html:not([data-density]) { --shell-header: 46px; --shell-bar: 0px; --shell-dock: 46px; --shell-gut: 8px; --shell-pad: 8px; }
  html:not([data-density]) .ui-tool--secondary .ui-label,
  html:not([data-density]) .ui-tool--tertiary .ui-label { display: none; }
}

/* racing-phone-app.css */
/* ── Racing on a phone: the app's own scale ───────────────────────────
 *
 * Loaded after app-density.css on purpose. The density tokens are written for
 * screens read at arm's length — a car panel across a cabin, a laptop on a
 * desk — and "compact" raises the type floors for exactly that distance. A
 * phone is held at a third of it, and the same floors read as shouting: a
 * 17px control label, a 21px title, an icon drawn for a dashboard.
 *
 * So a document the server marked as a phone gets the scale the platform's
 * own apps use: 14px body, 11px captions, 17px titles, the system face, and
 * glyphs a tenth smaller. Sizes are fixed rather than vmin-fluid because a
 * phone is held at one distance; the layout is what flexes, not the type.
 * Targets keep the 44px floor throughout — that number is a thumb, not a
 * reading distance, and it does not shrink with the text.
 */
html[data-phone="true"],
html[data-phone="true"] .race-app,
html[data-phone="true"] .race-display {
  --t-micro: 11px;
  --t-small: 12px;
  --t-body: 14px;
  --t-ctl: 15px;
  --t-title: 17px;
  --t-head: 20px;
  --t-display: 24px;
  --ui-scale: .9px;
  --ctl-h-min: 44px;
  --ctl-h: 44px;
  --ctl-h-lg: 48px;
  --ctl-h-tile: 52px;
  --shell-header: 48px;
  --shell-bar: 48px;
  --shell-dock: 48px;
  --shell-gut: 12px;
  --shell-pad: 12px;
  --card-pad: 10px;
  --row-pad: 6px 10px;
  --card-r: 12px;
  --ctl-r: 10px;
  --s7: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
}
html[data-phone="true"] body,
html[data-phone="true"] .race-display {
  font-size: 14px;
  font-size: var(--t-body, 14px);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-phone="true"] .race-display h1,
html[data-phone="true"] .race-display h2,
html[data-phone="true"] .race-display h3 {
  letter-spacing: -.01em;
  font-weight: 600;
  font-weight: var(--w-med, 600);
}
/* Captions are set in small caps elsewhere with wide tracking meant for a
   dashboard; on a phone the tracking eats the width the words need. */
html[data-phone="true"] .race-display .race-eyebrow,
html[data-phone="true"] .race-display .race-field-label {
  letter-spacing: .03em;
}

/* Cards and controls: the padding of an app list, not of a panel. */
html[data-phone="true"] .race-display .race-home-route,
html[data-phone="true"] .race-display .race-home-challenge,
html[data-phone="true"] .race-display .race-launch-dock {
  padding: 8px;
  padding: var(--s3, 8px);
  border-radius: 12px;
  border-radius: var(--card-r, 12px);
}
html[data-phone="true"] .race-display .race-launch-choices button,
html[data-phone="true"] .race-display .race-launch-action button {
  min-height: 44px;
  font-size: 15px;
  font-size: var(--t-ctl, 15px);
}
html[data-phone="true"] .race-display .race-launch-choices small,
html[data-phone="true"] .race-display .race-dock-choice small {
  font-size: 11px;
  font-size: var(--t-micro, 11px);
}

/* Upright: the sheet is a bottom sheet — a grabber's worth of radius, the
   safe area kept clear, and the topbar one band tall. */
@media (orientation: portrait) {
  html[data-phone="true"] .race-display .topbar { height: 48px; height: var(--shell-header, 48px) }
  html[data-phone="true"] .race-stage-menu { border-radius: 16px 16px 0 0 }
}

/* On its side: every sheet is the right column, not only the studio's. The
   left column keeps the scene and, below it, the launcher — which stops at
   the sheet's edge instead of running under it. */
@media (orientation: landscape) and (max-height: 500px) {
  html[data-phone="true"],
  html[data-phone="true"] .race-app,
  html[data-phone="true"] .race-display {
    --shell-header: 44px;
    --shell-dock: 44px;
    --t-title: 16px;
    --t-head: 18px;
  }
  html[data-phone="true"] .race-stage-menu {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(56%, 420px);
    max-height: none;
    border-radius: 14px 0 0 14px;
    padding-bottom: 0;
    padding-right: env(safe-area-inset-right, 0px);
  }
  html[data-phone="true"] .race-home.has-setup-footer .race-launch-dock,
  html[data-phone="true"] .race-home.has-setup-footer .race-page-footer {
    right: calc(56% + 8px);
  }
  /* app-density.css reserves the dock's height under every open sheet, which
     is right when the dock is below the sheet and wrong here, where it is
     beside it. Same weight as that rule, later in the cascade. */
  html[data-phone="true"] .race-display.race-home.has-setup-footer .race-stage-menu {
    bottom: 0;
  }
  html[data-phone="true"] .race-display .race-home-route,
  html[data-phone="true"] .race-display .race-home-challenge {
    max-width: calc(44% - 24px);
  }
}

/* racing-workspace.css */
/* Task-sized pages. Loaded after density, before Tesla compatibility. */
html .race-display.race-hub {--ctl-h-min:48px;--ctl-h:48px;--t-ctl:16px;--t-body:16px}
html .race-display.race-hub button {min-height:48px;min-width:48px}
html .race-display.race-hub .race-menu-page {max-width:1100px;margin:0 auto;width:100%;min-width:0}
html .race-display.race-hub .race-menu-heading {display:none}
html .race-display.race-hub[data-menu-open] .race-launch-dock,
html .race-display.race-hub[data-menu-open] .race-home-route,
html .race-display.race-hub[data-menu-open] .race-home-challenge,
html .race-display.race-hub[data-menu-open] .race-home-readout {display:none}
html .race-display.race-hub #race-options-panel {
 position:fixed;top:64px;bottom:12px;left:12px;right:12px;width:auto;max-width:1400px;
 height:auto;max-height:none;margin:0 auto;padding:0;transform:none;
 /* Let system-font metrics and translated labels determine the sidebar width. */
 display:grid;grid-template-columns:minmax(112px,max-content) minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) auto;
 overflow:hidden;border-radius:12px;background:#0d1216;z-index:12;
}
html .race-display.race-hub #race-options-panel .race-options-head {
 display:flex;grid-column:1/-1;grid-row:1;align-items:center;justify-content:space-between;
 position:static;padding:4px 12px;border-bottom:1px solid #344954;min-height:0;
}
html .race-display.race-hub #race-options-panel .race-options-head h2 {font-size:20px;margin:0}
html .race-display.race-hub #race-options-panel .race-options-head button {position:static;width:48px;height:48px;padding:0}
html .race-display.race-hub #race-options-panel .race-menu-tabs {
 grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;
 padding:8px;gap:6px;border:0;border-right:1px solid #344954;overflow-y:auto;min-height:0;
}
html .race-display.race-hub #race-options-panel .race-menu-tabs button {display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;align-items:center;padding:6px;font-size:14px;min-height:48px;height:auto}
html .race-display.race-hub #race-options-panel .race-menu-tabs button span {display:block;white-space:normal}
html .race-display.race-hub #race-options-panel .race-menu-content {grid-column:2;grid-row:2;overflow-y:auto;overflow-x:hidden;min-height:0;min-width:0;padding:12px;scroll-padding:12px;overscroll-behavior:contain}
html .race-display.race-hub #race-options-panel .race-options-launch {grid-column:1/-1;grid-row:3;position:static;padding:8px 12px;min-height:64px;margin:0;border-top:1px solid #344954;background:#13232b}
html .race-display.race-hub .race-options-launch .race-launch-action {display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,240px);gap:12px}
html .race-display.race-hub .race-options-launch .race-check {min-height:48px;margin:0}
html .race-display.race-hub .race-setup-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html .race-display.race-hub .race-modes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
html .race-display.race-hub .race-modes button {padding:8px;font-size:15px;min-height:56px}
html .race-display.race-hub .race-menu-content select {min-height:48px;font-size:16px}
/* Garage gives the existing WebGL scene its own space; no second canvas. */
html .race-display.race-hub #race-options-panel[data-menu=garage] {left:46%;max-width:none;grid-template-columns:minmax(0,1fr);grid-template-rows:56px auto minmax(0,1fr) auto}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-tabs {grid-column:1;grid-row:2;grid-template-columns:repeat(6,minmax(0,1fr));padding:6px;gap:4px;overflow:visible;border-right:0;border-bottom:1px solid #344954}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-tabs button {display:flex;flex-direction:column;justify-content:center;font-size:12px;padding:4px;min-width:0}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-tabs button .icon {display:none}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-content {grid-column:1;grid-row:3}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-launch {grid-row:4}
html .race-display.race-hub .race-garage-editor>.race-garage-card,
html .race-display.race-hub .race-garage-editor>.race-car-traits,
html .race-display.race-hub .race-garage-editor>.race-car-stats {display:none}
html .race-display.race-hub .race-garage-editor>.race-car-condition {padding:8px;margin:8px 0}
html .race-display.race-hub .race-garage-sections {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:8px 0}
html .race-display.race-hub .race-garage-sections button {font-size:13px;padding:4px;white-space:normal;min-width:0}
html .race-display.race-hub .race-garage-sections .icon {display:none}
html .race-display.race-hub .race-cosmetic-tabs {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
html .race-display.race-hub .race-cosmetic-tabs button {font-size:13px;padding:4px;min-width:0;white-space:normal}
html .race-display.race-hub .race-cosmetic-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0}
html .race-display.race-hub .race-cosmetic-tile {min-height:92px;padding:8px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 8px;text-align:left;align-items:center}
html .race-display.race-hub .race-cosmetic-tile .race-cosmetic-swatch {grid-row:1/3;width:48px;height:48px;min-height:0;aspect-ratio:auto;margin:0}
html .race-display.race-hub .race-cosmetic-tile strong {font-size:14px;white-space:normal}
html .race-display.race-hub .race-cosmetic-tile[data-preview=true] {border-color:#76edd1;background:#1c3e38}
html .race-display.race-hub .race-cosmetic-season,
html .race-display.race-hub .race-cosmetic-earned {display:none}
.race-style-pages {display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:8px 0;text-align:center}
.race-style-review {position:sticky;bottom:-12px;padding:12px;margin-top:8px;background:#182c34;border:1px solid #76edd1;border-radius:10px;z-index:2}
.race-style-review>div:first-child {display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.race-style-review>div:first-child>span {margin-inline-start:8px}
.race-style-actions {display:grid;grid-template-columns:1fr auto 1fr;gap:6px}
.race-style-actions button {font-size:14px;padding:6px;white-space:normal}
html .race-display.race-hub[data-menu-open=garage] .race-showcase-stats {left:12px;right:auto;top:76px;bottom:auto;width:calc(46% - 28px);max-width:340px;padding:12px}
html .race-display.race-hub[data-menu-open=garage] .race-showcase-tools {left:12px;right:auto;bottom:24px;top:auto;width:calc(46% - 28px);display:grid;justify-items:center;gap:6px;transform:none}
html .race-display.race-hub[data-menu-open=garage] .race-turntable {left:12px;right:auto;top:270px;bottom:132px;width:calc(46% - 28px);height:auto;z-index:3}
.race-preview-rotate {display:grid;grid-template-columns:48px 48px;gap:8px}
/* More room goes to content, never to stretched form fields. */
@media(min-width:1600px){
 html .race-display.race-hub #race-options-panel[data-menu=garage] {left:50%;right:max(24px,calc((100vw - 1560px)/2));max-width:760px}
}
@media(max-width:700px){
 html .race-display.race-hub #race-options-panel {left:8px;right:8px;top:60px;bottom:8px;grid-template-columns:minmax(0,1fr);grid-template-rows:52px auto minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel .race-menu-tabs {grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;gap:4px;border-right:0;border-bottom:1px solid #344954}
 html .race-display.race-hub #race-options-panel .race-menu-tabs button {justify-content:center;grid-template-columns:18px auto}
 html .race-display.race-hub #race-options-panel .race-menu-content {grid-column:1;grid-row:3;padding:8px}
 html .race-display.race-hub #race-options-panel .race-options-launch {grid-row:4;padding:6px;min-height:60px}
 html .race-display.race-hub #race-options-panel[data-menu=garage] {left:8px;top:230px}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-head {display:none}
 html .race-display.race-hub #race-options-panel[data-menu=garage] {grid-template-rows:auto minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-tabs {grid-row:1}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-content {grid-row:2}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-launch {grid-row:3}
 html .race-display.race-hub[data-menu-open=garage] .race-showcase-stats {display:none}
 html .race-display.race-hub[data-menu-open=garage] .race-showcase-tools {left:12px;top:64px;bottom:auto;width:calc(100% - 24px);grid-template-columns:1fr auto;text-align:left;justify-items:start;z-index:4}
 html .race-display.race-hub[data-menu-open=garage] .race-turntable-hint {display:none}
 html .race-display.race-hub[data-menu-open=garage] .race-turntable {top:116px;bottom:auto;height:108px;left:12px;width:calc(100% - 24px)}
 html .race-display.race-hub .race-modes {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:500px) and (min-width:701px){
 html .race-display.race-hub #race-options-panel {top:56px;bottom:6px;grid-template-rows:52px minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel[data-menu=garage] {left:42%;grid-template-rows:52px auto minmax(0,1fr) auto}
 html .race-display.race-hub[data-menu-open=garage] .race-showcase-stats {display:none}
 html .race-display.race-hub[data-menu-open=garage] .race-showcase-tools {width:calc(42% - 24px);bottom:12px}
 html .race-display.race-hub[data-menu-open=garage] .race-turntable {top:64px;bottom:110px;width:calc(42% - 24px)}
}
@media(max-height:500px) and (max-width:700px){
 html .race-display.race-hub #race-options-panel[data-menu=garage] {top:60px}
 html .race-display.race-hub[data-menu-open=garage] .race-showcase-tools,
 html .race-display.race-hub[data-menu-open=garage] .race-turntable {display:none}
}
/* Keep overlays usable with keyboards and enlarged text. */
@media(max-height:360px){
 html .race-display.race-hub #race-options-panel {top:4px;bottom:4px}
 html .race-display.race-hub #race-options-panel .race-menu-content {scroll-padding-bottom:72px}
 html .race-display.race-hub #race-options-panel .race-options-launch {min-height:56px}
}
html .race-display.race-hub[data-reduced-motion=true] *,
html .race-display.race-hub[data-reduced-motion=true] *::before,
html .race-display.race-hub[data-reduced-motion=true] *::after {animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.race-style-review,.race-cosmetic-tile {animation:none;transition:none}}
/* Racing remains a fixed play surface; menus own their own scrolling. */
html .race-display.race-hub[data-driving=true] .race-play {overflow:hidden}
html .race-display.race-hub[data-driving=true] .race-play-top .race-eyebrow,
html .race-display.race-hub[data-driving=true] .race-nitro-caption {display:none}
html .race-display.race-hub[data-driving=true] .race-live-stats {display:flex;align-items:center;min-width:0}
html .race-display.race-hub[data-driving=true] .race-live-stats>span {margin:0 8px;min-width:52px}
html .race-display.race-hub[data-driving=true] .race-live-stats small {font-size:11px;letter-spacing:0}
html .race-display.race-hub[data-driving=true] .race-live-stats b {font-size:20px;white-space:nowrap}
html .race-display.race-hub[data-driving=true] .race-play-top h1 {font-size:16px}
html .race-display.race-hub .race-map-toggle {width:48px;height:48px;margin-inline-end:6px;padding:8px}
html .race-display.race-hub .race-touch-controls[data-swapped=true] {flex-direction:row-reverse}
html .race-display.race-hub .race-circuit-map {position:static;width:100%;max-width:160px;max-height:140px;margin:8px 0;padding:8px;background:#10212b;border:1px solid #344954;border-radius:10px}
html .race-display.race-hub .race-circuit-map svg {max-height:96px}
html .race-display.race-hub[data-driving=true] .race-screen-fx {box-shadow:inset 0 0 24px #ffb47c44;background:transparent}
html .race-display.race-hub[data-driving=true] .race-screen-fx-toast {display:none}
html .race-display.race-hub[data-driving=true] .race-nitro.is-active {box-shadow:inset 0 0 0 1px #94d6ff}
@media(max-height:800px){
 html .race-display.race-hub[data-driving=true] .race-live-board li:not(.is-you) {display:none}
 html .race-display.race-hub[data-driving=true] .race-live-board-title {display:none}
 html .race-display.race-hub[data-driving=true] .race-objective {font-size:13px;padding:8px}
 html .race-display.race-hub[data-driving=true] .race-objective .race-scenario {display:none}
}
@media(min-width:1800px){
 html .race-display.race-hub .race-play {max-width:1600px;margin-left:auto;margin-right:auto;width:100%}
}
@media(max-width:600px){
 html .race-display.race-hub[data-driving=true] .race-play-top>div:first-child {display:none}
 html .race-display.race-hub[data-driving=true] .race-live-stats {justify-content:space-between;width:100%}
 html .race-display.race-hub[data-driving=true] .race-live-stats>span {margin:0 4px;min-width:40px}
 html .race-display.race-hub[data-driving=true] .race-live-stats b {font-size:18px}
 html .race-display.race-hub .race-circuit-map {position:absolute;top:64px;left:8px;max-width:120px;pointer-events:none}
}
@media(max-height:500px){
 html .race-display.race-hub[data-driving=true] .race-rpm {display:none}
 html .race-display.race-hub[data-driving=true] .race-play-top {min-height:56px;padding-top:4px;padding-bottom:4px}
 html .race-display.race-hub[data-driving=true] .race-play-top h1 {max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
html .race-display.race-hub .race-garage-editor[data-race-garage-section=cosmetics]>label,
html .race-display.race-hub .race-garage-editor[data-race-garage-section=cosmetics]>.race-car-condition,
html .race-display.race-hub .race-cosmetic-shop>.race-equipment-heading {display:none}
@media(max-width:700px){
 html .race-display.race-hub #race-options-panel[data-menu=garage] {grid-template-rows:52px auto minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-head {display:flex}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-tabs {grid-row:2}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-content {grid-row:3}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-launch {grid-row:4}
}
/* Retire fixed studio controls from earlier density layouts. */
html .race-display.race-hub #race-options-panel {min-width:0}
html .race-display.race-hub #race-options-panel .race-options-head>div {display:block}
html .race-display.race-hub #race-options-panel .race-garage-editor {display:block;padding:0}
html .race-display.race-hub #race-options-panel .race-garage-editor>label:first-of-type {position:static;top:auto;left:auto;right:auto;bottom:auto;width:100%;margin:0 0 8px;padding:0;border:0;background:none}
html .race-display.race-hub #race-options-panel .race-garage-editor[data-race-garage-section=cosmetics]>label:first-of-type {display:none}
html .race-display.race-hub #race-options-panel .race-cosmetic-shop {padding:0;margin:0;border:0}
html .race-display.race-hub #race-options-panel .race-garage-sections {margin:0 0 8px}
html .race-display.race-hub #race-options-panel .race-style-review {position:static;margin:0;padding:0;border:0;background:none}
html .race-display.race-hub #race-options-panel .race-style-review>small {display:block;margin-top:6px}
html .race-display.race-hub[data-style-selection=true] #race-options-panel .race-options-launch>button {display:none}
html .race-display.race-hub #race-options-panel .race-options-launch:empty {display:none}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup {position:fixed;left:12px;right:auto;top:auto;bottom:24px;width:calc(46% - 28px);height:auto;transform:none;background:none;border:0;padding:0;display:grid;justify-items:center;gap:6px;z-index:4}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-turntable {border:0;border-radius:0;background:none}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer[data-garage-section=cosmetics] .race-showcase-stats {display:none}
@media(max-width:700px){
 html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup {display:none}
 html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup {left:12px;top:64px;bottom:auto;width:calc(100% - 24px);display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;justify-items:start}
 html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-turntable {position:fixed;top:116px;bottom:auto;height:108px;left:12px;right:12px;width:auto}
}
@media(max-height:500px) and (min-width:701px){
 html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup {display:none}
 html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup {width:calc(42% - 24px);bottom:12px}
}
@media(max-height:500px) and (max-width:700px){
 html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-tools.is-setup {display:none}
}
.race-inspect-toolbar {position:fixed;top:64px;left:12px;right:12px;z-index:20;display:grid;grid-template-columns:auto minmax(100px,220px) auto;gap:8px;justify-content:center}
.race-inspect-toolbar button {background:#14242c;border:1px solid #76edd1;color:#edf6f7;border-radius:10px;padding:8px}
html .race-display.race-hub #race-options-panel .race-options-head>button:not(:last-child) {width:auto;padding:0 12px;margin-inline-start:auto;margin-inline-end:8px}
html .race-display.race-hub[data-inspect-car=true] #race-options-panel {visibility:hidden;pointer-events:none}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer[data-inspect-car=true] .race-showcase-stats {display:none}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer[data-inspect-car=true] .race-turntable {display:block;position:fixed;top:130px;bottom:130px;left:12px;right:12px;width:auto;height:auto}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer[data-inspect-car=true] .race-showcase-tools.is-setup {display:grid;position:fixed;top:auto;left:12px;right:12px;bottom:12px;width:auto;grid-template-columns:1fr;justify-items:center;text-align:center}
@media(max-width:700px){.race-inspect-toolbar {grid-template-columns:1fr 1fr}.race-inspect-toolbar>button:last-child {grid-column:1/-1}}
html .race-display.race-hub #race-options-panel .race-section-picker {display:none}
html .race-display.race-hub #race-options-panel .race-garage-sections button {overflow-wrap:normal;word-break:normal;hyphens:none}
@media(max-width:420px){html .race-display.race-hub #race-options-panel .race-garage-sections {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px){
 html .race-display.race-hub #race-options-panel,
 html .race-display.race-hub #race-options-panel[data-menu=garage] {grid-template-columns:minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel .race-options-head {grid-row:1}
 html .race-display.race-hub #race-options-panel .race-options-head>div,
 html .race-display.race-hub #race-options-panel .race-menu-tabs,
 html .race-display.race-hub #race-options-panel .race-garage-sections {display:none}
 html .race-display.race-hub #race-options-panel .race-section-picker {display:block;width:180px;max-width:calc(100% - 152px);margin:0}
 html .race-display.race-hub #race-options-panel .race-menu-content {grid-row:2;grid-column:1;padding:8px}
 html .race-display.race-hub #race-options-panel .race-options-launch {grid-row:3;padding:6px 8px}
 html .race-display.race-hub #race-options-panel .race-cosmetic-shop {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 html .race-display.race-hub #race-options-panel .race-cosmetic-shop>select {grid-column:1;grid-row:1}
 html .race-display.race-hub #race-options-panel .race-style-pages {grid-column:2;grid-row:1;margin:0;grid-template-columns:48px auto 48px;gap:2px}
 html .race-display.race-hub #race-options-panel .race-style-pages button {font-size:12px;padding:2px;overflow:hidden}
 html .race-display.race-hub #race-options-panel .race-cosmetic-grid {grid-column:1/-1;grid-row:2;margin:0}
 html .race-display.race-hub #race-options-panel .race-cosmetic-tile {min-height:76px;padding:4px}
 html .race-display.race-hub #race-options-panel .race-artwork {grid-column:1/-1}
}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats>div {display:grid;grid-template-columns:1fr auto;gap:4px}
html body .race-display.race-hub.race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats>div>i {display:none}
html .race-display.race-hub.race-home .race-lobby-inspect {display:none}
html .race-display.race-hub[data-inspect-car=true] .race-play .race-overlay,
html .race-display.race-hub[data-inspect-car=true] .race-play .race-hud-rail,
html .race-display.race-hub[data-inspect-car=true] .race-play .race-play-top,
html .race-display.race-hub[data-inspect-car=true] .race-play .race-play-footer {visibility:hidden;pointer-events:none}
.race-inspect-turn {position:fixed;bottom:16px;left:0;right:0;z-index:20;display:grid;grid-template-columns:48px 48px;gap:8px;justify-content:center}
/* Color identifies a function. Text and shape continue to carry its meaning. */
html .race-display.race-hub {--race-ink:#edf5fa;--race-muted:#adc0cc;--race-lime:#64e2c8;--race-line:#344c60;--ctl-bg:#162738;--card-bg:#11212f;--focus:#9ddefd}
html .race-display.race-hub .icon[data-icon=coins],
html .race-display.race-hub .icon[data-icon=trophy] {color:#f4ce75}
html .race-display.race-hub .icon[data-icon=palette],
html .race-display.race-hub .icon[data-icon=sparkle] {color:#c1a4ff}
html .race-display.race-hub .icon[data-icon=users],
html .race-display.race-hub .icon[data-icon=phone],
html .race-display.race-hub .icon[data-icon=gamepad] {color:#91c6ff}
html .race-display.race-hub .icon[data-icon=engine],
html .race-display.race-hub .icon[data-icon=garage],
html .race-display.race-hub .icon[data-icon=steering] {color:#8edbc7}
html .race-display.race-hub .icon[data-icon=volume],
html .race-display.race-hub .icon[data-icon=music],
html .race-display.race-hub .icon[data-icon=horn] {color:#a9bbff}
html .race-display.race-hub .icon[data-icon=route],
html .race-display.race-hub .icon[data-icon=worlds] {color:#7fd9e6}
html .race-display.race-hub .icon[data-icon=lock] {color:#e4be85}
html .race-display.race-hub .race-primary .icon {color:inherit}
html .race-display.race-hub #race-options-panel .race-menu-tabs button {background:#132331;border-color:#344c60;color:#b8cbd8}
html .race-display.race-hub #race-options-panel .race-menu-tabs button[aria-pressed=true] {background:#183e39;border-color:#64e2c8;color:#e0fff6;box-shadow:inset 0 -2px #64e2c8}
html .race-display.race-hub .race-wallet-trigger {background:#342f21;border-color:#826b36;color:#ffe1a0}
html .race-display.race-hub #race-options-panel .race-options-launch {background:#122632}
html .race-display.race-hub #race-options-panel button {min-height:48px;min-width:48px}
html .race-display.race-hub #race-options-panel .race-options-head button {height:48px}
.race-car-thumb,.race-course-thumb {flex-shrink:0;vertical-align:middle}
.race-course-thumb {display:inline-block;position:relative;line-height:0;border-radius:7px;overflow:hidden}
.race-course-thumb>svg {display:block}
.race-course-flag {position:absolute;right:2px;bottom:2px;border:1px solid #b4c8d0;border-radius:2px;overflow:hidden;line-height:0;box-shadow:0 1px 3px #0008}
html .race-display.race-hub .race-dock-choice>.race-car-thumb,
html .race-display.race-hub .race-dock-choice>.race-course-thumb {margin-inline-end:8px}
html .race-display.race-hub .race-field-label>.race-car-thumb {margin-inline-end:8px}
html .race-display.race-hub .race-track {position:relative;padding-inline-start:88px;min-height:124px;background:#132331;border-color:#344c60;text-align:start}
html .race-display.race-hub .race-track>.race-course-thumb {position:absolute;left:12px;top:40px}
html[dir=rtl] .race-display.race-hub .race-track>.race-course-thumb {left:auto;right:12px}
html .race-display.race-hub .race-track.selected {background:#163a37;border-color:#64e2c8}
html .race-display.race-hub .race-track-region {color:#b8d8ea;display:flex;align-items:center;min-width:0}
html .race-display.race-hub .race-track-region>.flag {margin-inline-end:6px;flex-shrink:0;border:1px solid #668092;border-radius:2px}
html .race-display.race-hub .race-track-access {color:#a8dbb9}
html .race-display.race-hub .race-driver-detail>.race-car-thumb {margin-inline-end:6px}
html .race-display.race-hub .race-public-rooms li>.race-course-thumb {margin-inline-end:8px}
@media(max-width:420px){
 html .race-display.race-hub .race-dock-choice>.race-car-thumb,
 html .race-display.race-hub .race-dock-choice>.race-course-thumb {width:40px;height:28px}
}
/* Feedback changes paint, never control position or the road's visibility. */
html .race-display.race-hub button {transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease}
html .race-display.race-hub button:active:not(:disabled) {background-color:#28504e;border-color:#b5fff0}
html .race-display.race-hub .race-primary:active:not(:disabled) {background-color:#a5f7df;color:#082920}
html .race-display.race-hub button:disabled {cursor:default}
html .race-display.race-hub .race-style-review {animation:race-review-in 160ms ease-out}
html .race-display.race-hub .race-cosmetic-tile[aria-pressed=true] {border-color:#8be8bc;background:#1a3b30}
html .race-display.race-hub .race-cosmetic-tile[data-preview=true] {border-color:#c1a4ff;background:#302a48;box-shadow:inset 0 0 0 1px #c1a4ff}
html .race-display.race-hub .race-style-review>div:first-child strong {color:#decfff}
html .race-display.race-hub .race-cosmetic-shop>p[role=status] {color:#b3efc9;padding:8px;border-left:3px solid #8be8bc;background:#183329;animation:race-review-in 160ms ease-out}
html .race-display.race-hub .race-nitro.is-active {border-color:#91c6ff;background:#163951}
html .race-display.race-hub .race-held.is-held {border-color:#b5fff0;box-shadow:inset 0 0 0 2px #b5fff0}
html .race-display.race-hub button:focus-visible,
html .race-display.race-hub select:focus-visible,
html .race-display.race-hub input:focus-visible {outline:3px solid #9ddefd;outline-offset:2px}
@keyframes race-review-in {from{opacity:.5}to{opacity:1}}
@media(hover:hover) and (pointer:fine){
 html .race-display.race-hub .race-track:hover,
 html .race-display.race-hub .race-cosmetic-tile:hover {border-color:#92c9e9;background-color:#20394b}
}
@media(prefers-reduced-motion:reduce){
 html .race-display.race-hub *,html .race-display.race-hub *::before,html .race-display.race-hub *::after {animation:none!important;transition:none!important}
}
html .race-display.race-hub[data-menu-open=garage] #race-studio-stats {position:fixed;left:12px;right:auto;top:76px;bottom:auto;transform:none;width:calc(46% - 28px);min-width:0;max-width:340px;max-height:none;margin:0;padding:12px}
@media(max-width:700px),(max-height:500px){html .race-display.race-hub[data-menu-open=garage] #race-studio-stats {display:none}}
html .race-display.race-hub .race-style-review [role=alert] {color:#ffd1c9;background:#422c32;border-inline-start:3px solid #ff9e8d;padding:6px 8px;margin:4px 0 0}
html .race-display.race-hub .race-public-rooms li>div {flex:1}
/* Labels remain visible even when a legacy phone rule clips icon captions. */
html .race-display.race-hub #race-options-panel .race-menu-tabs button>span,
html .race-display.race-hub #race-options-panel .race-garage-sections button>span {position:static;width:auto;height:auto;margin:0;padding:0;clip:auto;overflow:visible;white-space:normal}
/* One toolbar rhythm on every screen: 48px controls inside a 56px bar. */
html .race-display.race-hub #race-topbar {position:absolute;top:0;right:0;bottom:auto;left:0;height:56px;min-height:56px;padding:4px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;background:#0c1925;border-bottom:1px solid #344c60;box-shadow:0 2px 10px #0003;z-index:10}
html .race-display.race-hub #race-topbar .brand {display:flex;align-items:center;min-width:0;gap:0}
html .race-display.race-hub #race-topbar .brand>a {display:grid;place-items:center;min-width:48px;height:48px;margin-inline-end:12px}
html .race-display.race-hub #race-topbar .brand-logo {display:block;width:86px;max-height:30px}
html .race-display.race-hub #race-topbar .brand-icon {display:none}
html .race-display.race-hub #race-topbar .session-pill {justify-self:start;display:flex;min-height:32px;height:auto;border:0;background:transparent;font-size:13px;color:#c1d1dc;padding:0}
html .race-display.race-hub #race-topbar .top-actions {display:grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;gap:6px;min-width:0;margin:0}
html .race-display.race-hub #race-topbar .top-actions>button,
html .race-display.race-hub #race-topbar .top-actions>a,
html .race-display.race-hub #race-topbar .race-audio-trigger {display:flex;align-items:center;justify-content:center;width:auto;min-width:48px;height:48px;min-height:48px;padding:0 12px;margin:0;border:1px solid #344c60;border-radius:10px;background:#142737;font-size:14px;color:#dceaf2;box-shadow:none}
html .race-display.race-hub #race-topbar .top-actions .icon {display:block;width:22px;height:22px;flex-shrink:0}
html .race-display.race-hub #race-topbar .top-actions .ui-label {margin-inline-start:6px;white-space:nowrap}
html .race-display.race-hub #race-topbar .top-actions .ui-label-full {display:inline}
html .race-display.race-hub #race-topbar .top-actions .ui-label-short {display:none}
html .race-display.race-hub #race-topbar .race-wallet-trigger {background:#332f21;border-color:#756139;color:#ffe0a0}
html .race-display.race-hub #race-topbar .race-wallet-trigger b {font-size:14px;margin-inline-start:6px}
html .race-display.race-hub #race-topbar .race-language-control {height:48px;min-width:48px;padding:0 10px;background:#142737;border:1px solid #344c60;border-radius:10px}
html .race-display.race-hub #race-topbar .race-language-control select {min-height:48px}
html .race-display.race-hub[data-auth=signed-out] #race-topbar .race-friends-trigger {display:none}
@media(max-width:1050px){
 html .race-display.race-hub #race-topbar {grid-template-columns:minmax(0,1fr) auto;gap:8px}
 html .race-display.race-hub #race-topbar .session-pill {display:none}
 html .race-display.race-hub #race-topbar .top-actions .ui-label {display:none}
 html .race-display.race-hub #race-topbar .top-actions>button,
 html .race-display.race-hub #race-topbar .top-actions>a,
 html .race-display.race-hub #race-topbar .race-audio-trigger {padding:0 10px}
}
@media(max-width:600px){
 html .race-display.race-hub #race-topbar {padding:4px 8px;gap:4px}
 html .race-display.race-hub #race-topbar .brand>a {display:none}
 html .race-display.race-hub[data-auth=signed-out] #race-topbar .brand>a {display:grid;margin-inline-end:8px}
 html .race-display.race-hub #race-topbar .top-actions {gap:4px}
 html .race-display.race-hub #race-topbar .race-language-code {display:none}
 html .race-display.race-hub #race-topbar .top-actions>button,
 html .race-display.race-hub #race-topbar .top-actions>a,
 html .race-display.race-hub #race-topbar .race-audio-trigger {padding:0 6px}
}
@media(max-width:380px){
 html .race-display.race-hub #race-topbar {padding:4px}
 html .race-display.race-hub #race-topbar .race-wallet-trigger b {display:none}
 html .race-display.race-hub #race-topbar .brand-logo {width:66px}
}
/* Welcome: a calm illustration area and one clear sign-in card. */
html .race-display.race-hub #race-welcome {position:absolute;top:56px;right:0;bottom:0;left:0;height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);align-items:center;gap:32px;padding:24px max(24px,calc((100vw - 1320px)/2));overflow:auto;background:linear-gradient(110deg,#081a26bd,#10233644 50%,#091722dd)}
html .race-display.race-hub #race-welcome:after {display:none}
html .race-display.race-hub #race-welcome .race-entry-pitch {position:relative;top:auto;right:auto;bottom:auto;left:auto;display:grid;align-content:center;gap:20px;width:100%;max-width:650px;min-width:0;padding:0;margin:0}
html .race-display.race-hub #race-welcome .race-hero-title {font-size:clamp(28px,3.4vw,52px);line-height:1.12;letter-spacing:-.03em}
html .race-display.race-hub #race-welcome .race-hero-copy {font-size:16px;line-height:1.5;max-width:42ch}
html .race-display.race-hub #race-welcome .race-hero-eyebrow {font-size:12px;letter-spacing:.06em}
html .race-display.race-hub #race-welcome .race-entry-proof {gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
html .race-display.race-hub #race-welcome .race-entry-proof strong {font-size:24px;color:#8ce8d0}
html .race-display.race-hub #race-welcome .race-entry-controls {display:none}
html .race-display.race-hub #race-welcome .race-engine-sampler {background:#132737e8;border:1px solid #344c60;border-radius:12px;padding:12px;width:100%}
html .race-display.race-hub #race-welcome .race-engine-note {display:none}
html .race-display.race-hub #race-sign-in {position:relative;top:auto;right:auto;bottom:auto;left:auto;display:block;width:100%;max-width:420px;max-height:none;min-width:0;margin:0;padding:24px;background:#101f2ef5;border:1px solid #456077;border-radius:18px;box-shadow:0 16px 40px #02091055;overflow:visible;z-index:4}
html .race-display.race-hub #race-sign-in .race-login-emblem {display:grid;place-items:center;width:52px;height:52px;border-radius:14px;color:#80e7cd;background:#1a3f3d;border:1px solid #367b6e;margin-bottom:16px}
html .race-display.race-hub #race-sign-in>.race-eyebrow {font-size:12px;color:#8ce8d0;margin:0 0 6px}
html .race-display.race-hub #race-sign-in h1 {font-size:28px;margin:0;line-height:1.2;letter-spacing:-.02em}
html .race-display.race-hub #race-sign-in>p {font-size:14px;margin:8px 0;color:#b6c9d6}
html .race-display.race-hub #race-sign-in form {display:grid;gap:8px;margin-top:20px}
html .race-display.race-hub #race-sign-in label {font-size:14px;color:#d0e0eb}
html .race-display.race-hub #race-sign-in input {width:100%;height:52px;min-height:48px;font-size:16px;background:#0c1926;border:1px solid #527087;border-radius:10px;padding:10px 12px}
html .race-display.race-hub #race-sign-in button {min-height:48px;font-size:15px;border-radius:10px}
html .race-display.race-hub #race-sign-in .race-primary {background:#80e7cd;color:#072a27;border-color:#80e7cd;font-weight:700}
html .race-display.race-hub #race-sign-in .race-scan-switch {background:transparent;color:#b9daee;border:1px solid #456077}
html .race-display.race-hub #race-sign-in .race-privacy-link {display:flex;align-items:center;justify-content:center;min-height:48px;font-size:13px;color:#adc4d5;margin:4px 0 -12px}
@media(max-width:1050px){
 html .race-display.race-hub #race-welcome {grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:24px;padding:20px}
 html .race-display.race-hub #race-sign-in {padding:20px}
}
@media(max-width:700px){
 html .race-display.race-hub #race-welcome {grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:16px;padding:20px 16px 40px}
 html .race-display.race-hub #race-welcome .race-entry-pitch {max-width:420px;gap:0}
 html .race-display.race-hub #race-welcome .race-hero-stage {display:block}
 html .race-display.race-hub #race-welcome .race-hero-slide {display:none}
 html .race-display.race-hub #race-welcome .race-hero-slide[data-active=true] {display:grid;gap:6px}
 html .race-display.race-hub #race-welcome .race-hero-title {font-size:28px}
 html .race-display.race-hub #race-welcome .race-hero-copy,
 html .race-display.race-hub #race-welcome .race-hero-dots,
 html .race-display.race-hub #race-welcome .race-hero-slide>p,
 html .race-display.race-hub #race-welcome .race-hero-slide>.race-livery-strip,
 html .race-display.race-hub #race-welcome .race-entry-proof,
 html .race-display.race-hub #race-welcome .race-engine-sampler {display:none}
 html .race-display.race-hub #race-sign-in .race-login-emblem {display:none}
}
@media(max-height:600px) and (min-width:701px){
 html .race-display.race-hub #race-welcome {align-items:start;padding:16px;gap:20px;grid-template-columns:minmax(0,1fr) 340px}
 html .race-display.race-hub #race-sign-in {padding:16px}
 html .race-display.race-hub #race-sign-in .race-login-emblem,
 html .race-display.race-hub #race-welcome .race-engine-sampler {display:none}
 html .race-display.race-hub #race-welcome .race-hero-title {font-size:30px}
 html .race-display.race-hub #race-welcome .race-hero-copy {font-size:14px}
}
@media(max-height:400px){
 html .race-display.race-hub #race-welcome {grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:16px;padding:12px;align-content:start}
 html .race-display.race-hub #race-welcome .race-entry-pitch {display:block}
 html .race-display.race-hub #race-welcome .race-hero-title {font-size:24px}
 html .race-display.race-hub #race-welcome .race-hero-copy,
 html .race-display.race-hub #race-welcome .race-hero-dots,
 html .race-display.race-hub #race-welcome .race-entry-proof {display:none}
 html .race-display.race-hub #race-sign-in {padding:12px}
 html .race-display.race-hub #race-sign-in h1 {font-size:24px}
 html .race-display.race-hub #race-sign-in>.race-eyebrow {display:none}
 html .race-display.race-hub #race-sign-in form {margin-top:10px}
}
html .race-display.race-hub[data-race-state=driving] #race-topbar {display:none}
/* Keep audio available on track without restoring the full navigation bar. */
html .race-display.race-hub[data-race-state=driving] #race-topbar {display:block;height:0;min-height:0;padding:0;border:0;background:none;box-shadow:none;visibility:hidden;pointer-events:none;z-index:12}
html .race-display.race-hub[data-race-state=driving] #race-topbar .race-audio-trigger {position:fixed;left:12px;right:auto;top:4px;width:48px;padding:0;visibility:visible;pointer-events:auto}
html .race-display.race-hub[data-race-state=driving] #race-topbar .race-audio-trigger .ui-label {display:none}
html .race-display.race-hub[data-race-state=driving] .race-play-top {padding-left:72px}
/* Promotions are deliberate choices, not moving text or pop-ups. */
html .race-display.race-hub #race-welcome .race-hero-dots {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;margin:0}
html .race-display.race-hub #race-welcome .race-hero-dot {display:grid;justify-items:center;align-content:center;gap:2px;width:auto;min-width:48px;min-height:48px;height:auto;padding:4px 2px;background:#122838;border:1px solid #344c60;color:#bcd3df;font-size:12px;line-height:1.1;border-radius:8px}
html .race-display.race-hub #race-welcome .race-hero-dot[data-active=true] {border-color:#80e7cd;color:#d9fff4;background:#1b3d39}
html .race-display.race-hub #race-welcome .race-hero-dot span {overflow-wrap:anywhere}
html .race-display.race-hub .race-home-promotions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}
html .race-display.race-hub .race-home-promotions button {display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid #344c60;border-radius:8px;background:#152b3c;color:#d2e5ef;font-size:14px;padding:4px 8px}
html .race-display.race-hub .race-home-promotions button .icon {flex-shrink:0;margin-inline-end:6px}
html .race-display.race-hub .race-home-promotions button:first-child {border-color:#806c38;background:#302d20;color:#ffe0a0}
@media(max-width:700px){
 html .race-display.race-hub #race-welcome .race-entry-hero {gap:10px}
 html .race-display.race-hub .race-home-promotions button {font-size:12px;padding:4px}
}
html .race-display.race-hub .race-home-promotions {grid-template-columns:repeat(2,minmax(0,1fr))}
html .race-display.race-hub .race-dock-choice>.race-course-thumb {display:block;position:relative;overflow:hidden}
html .race-display.race-hub .race-dock-choice>.race-course-thumb>.race-course-flag {position:absolute;right:2px;bottom:2px;display:block;width:20px;height:14px;margin:0;padding:0}
html .race-display.race-hub .race-dock-choice>.race-course-thumb>.race-course-flag .flag {display:block;width:20px;height:14px;max-width:none;margin:0}
html .race-display.race-hub .race-course-thumb>svg {width:100%;height:100%;max-width:none;max-height:none;margin:0}
/* Track artwork participates in layout; legacy absolute thumbnails escaped tiles. */
html .race-display.race-hub #race-options-panel .race-course-browser .race-track {display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:4px;min-height:104px!important;padding:10px!important;overflow:hidden}
html .race-display.race-hub #race-options-panel .race-track>.race-course-thumb {position:static;grid-column:1;grid-row:1/4;align-self:center;width:56px!important;height:40px!important;margin:0}
html .race-display.race-hub #race-options-panel .race-track>.race-track-region,
html .race-display.race-hub #race-options-panel .race-track>strong,
html .race-display.race-hub #race-options-panel .race-track>.race-track-access {grid-column:2;min-width:0;max-width:100%;margin:0;overflow-wrap:anywhere}
html .race-display.race-hub #race-options-panel .race-track>strong {font-size:14px;line-height:1.25}
html .race-display.race-hub #race-options-panel .race-track>.race-circuit-thumb {grid-column:1;grid-row:4;width:56px;height:40px;margin:0}
html .race-display.race-hub #race-options-panel .race-course-browser .race-tracks {gap:8px}
@media(max-width:700px){html .race-display.race-hub #race-options-panel .race-course-browser .race-tracks {grid-template-columns:repeat(2,minmax(0,1fr))}html .race-display.race-hub #race-options-panel .race-course-browser .race-track {grid-template-columns:40px minmax(0,1fr);column-gap:6px;padding:8px!important}html .race-display.race-hub #race-options-panel .race-track>.race-course-thumb {width:40px!important;height:30px!important}}
@media(max-width:420px){
 html .race-display.race-hub #race-options-panel,
 html .race-display.race-hub #race-options-panel[data-menu=garage] {grid-template-columns:minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel .race-menu-tabs,
 html .race-display.race-hub #race-options-panel .race-garage-sections,
 html .race-display.race-hub #race-options-panel .race-options-head>div {display:none}
 html .race-display.race-hub #race-options-panel .race-section-picker {display:block;width:190px;max-width:calc(100% - 60px);margin:0}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-section-picker {max-width:calc(100% - 152px)}
 html .race-display.race-hub #race-options-panel .race-menu-content {grid-column:1;grid-row:2}
 html .race-display.race-hub #race-options-panel .race-options-launch {grid-column:1;grid-row:3}
}
@media(max-width:380px){
 html .race-display.race-hub #race-topbar .top-actions {gap:0}
 html .race-display.race-hub #race-topbar .race-wallet-trigger b {display:block;font-size:12px;margin-inline-start:3px}
 html .race-display.race-hub #race-topbar .race-wallet-trigger {max-width:68px;padding:0 4px}
}
html .race-display.race-hub .race-account-loading {padding:16px;display:grid;gap:12px;align-content:start;color:#d5e5ef}
html .race-display.race-hub .race-account-loading p {margin:0;line-height:1.5}
html .race-display.race-hub .race-account-loading button {min-height:48px;justify-self:start;padding:8px 14px;border:1px solid #80e7cd;border-radius:10px;background:#1b3d39;color:#dcfff4}
/* Friend actions wrap below a name instead of squeezing it out of the row. */
@media(max-width:540px){
 html .race-display.race-hub .race-friends-list>li {display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 0}
 html .race-display.race-hub .race-friend-driver {margin:0;min-width:0}
 html .race-display.race-hub .race-friend-actions {margin:0;justify-content:flex-end;max-width:100%;flex-wrap:wrap}
 html .race-display.race-hub .race-friends-footer {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
 html .race-display.race-hub .race-friends-footer>p {margin:0}
}

/* The same scene previews upgrades without changing the saved loadout. */
.race-equipment-preview-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;border:1px solid #397a86;border-radius:12px;background:#102d36}
.race-equipment-preview-actions>span{display:flex;align-items:center;gap:8px;color:#9cebdc;font-weight:700}
.race-equipment-preview-actions button{min-height:48px;padding:8px 12px}
.race-preview-rotate{flex-wrap:wrap;justify-content:center}
.race-preview-rotate select{min-width:0;max-width:140px;min-height:48px;background:#142734;color:#edf6ff;border:1px solid #4c6577;border-radius:10px}
@media(max-width:420px){.race-preview-rotate{gap:4px}.race-preview-rotate select{max-width:115px}.race-showcase-tools.is-setup .race-turntable-hint{display:none}}

html .race-display.race-hub .race-preview-rotate{display:flex;flex-wrap:nowrap;gap:6px;align-items:center}
html .race-display.race-hub .race-preview-rotate select{width:132px;max-width:132px;padding:8px;font-size:13px}
html .race-display.race-hub .race-preview-rotate>.race-select-detail{display:none}
html .race-display.race-hub #race-options-panel .race-inspect-action{display:flex;align-items:center;justify-content:center;gap:6px}
@media(max-width:700px){
 html .race-display.race-hub .race-preview-rotate>select,
 html .race-display.race-hub .race-preview-rotate>button:first-of-type{display:none}
 html .race-display.race-hub #race-options-panel .race-garage-editor:not([data-race-garage-section=car])>label:first-of-type,
 html .race-display.race-hub #race-options-panel .race-garage-editor:not([data-race-garage-section=car])>.race-car-condition{display:none}
}
@media(max-width:420px){
 html .race-display.race-hub #race-options-panel .race-inspect-action{width:48px;min-width:48px;padding:0}
 html .race-display.race-hub #race-options-panel .race-inspect-action>span{display:none}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-section-picker{width:190px;max-width:calc(100% - 112px);padding-inline:8px;font-size:14px}
}

html .race-display.race-hub #race-topbar .account-btn{background:linear-gradient(145deg,#243d51,#10202e);border-color:#698399;padding:5px;box-shadow:inset 0 1px 0 #ffffff18}
html .race-display.race-hub .race-glyph{flex-shrink:0;display:block}
html .race-display.race-hub .race-profile-current{padding:12px;border:1px solid #456177;border-radius:14px;background:linear-gradient(120deg,#1c3446,#101d2b);gap:12px}
html .race-display.race-hub .race-icon-grid .race-icon{background:#142636;border-color:#334f64;padding:8px 4px;border-radius:12px}
html .race-display.race-hub .race-icon-grid .race-icon.selected{border-color:#88e8d1;background:#1a3a3e;box-shadow:inset 0 0 0 1px #88e8d1}
html .race-display.race-hub .race-icon-grid .race-icon-glyph{display:grid;place-items:center}
html .race-display.race-hub .race-friend-driver>.race-glyph{margin-inline-end:10px}

html .race-display.race-hub #race-topbar .account-btn>.race-glyph{width:34px!important;height:34px!important}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-head>div{display:none}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-section-picker{display:block;flex:1;width:190px;min-width:0;max-width:calc(100% - 140px);font-size:14px}
html .race-display.race-hub #race-options-panel .race-garage-sections{grid-template-columns:repeat(5,minmax(0,1fr))}
html .race-display.race-hub .race-artwork-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html .race-display.race-hub .race-artwork-items button{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:4px 8px;text-align:start;padding:8px;min-height:72px;min-width:0}
html .race-display.race-hub .race-artwork-items button>strong{font-size:13px;overflow-wrap:anywhere}
html .race-display.race-hub .race-artwork-items button>span:last-child{grid-column:2;color:#f0cd83;font-size:12px}
@media(max-width:420px){html .race-display.race-hub #race-options-panel[data-menu=garage] .race-section-picker{max-width:calc(100% - 112px)}}

html .race-display.race-hub [data-condition-level=service]{--condition-color:#ebce72;--condition-bg:#332e1b}
html .race-display.race-hub [data-condition-level=repair]{--condition-color:#ffad73;--condition-bg:#39281d}
html .race-display.race-hub [data-condition-level=unusable]{--condition-color:#ffa2a8;--condition-bg:#3b202b}
html .race-display.race-hub .race-car-condition[data-condition-level]:not([data-condition-level=good]),
html .race-display.race-hub .race-condition-warning{color:var(--condition-color);border:1px solid var(--condition-color);background:var(--condition-bg);border-radius:10px}
html .race-display.race-hub .race-condition-warning{display:flex;align-items:center;gap:8px;padding:10px;text-align:start}
html .race-display.race-hub .race-condition-warning strong{font-size:13px;line-height:1.35}
html .race-display.race-hub .race-condition-warning p{margin:4px 0 0;font-size:12px}
html .race-display.race-hub .race-condition-warning button{min-height:48px;padding:8px;flex-shrink:0}
html .race-display.race-hub .race-maintenance-parts [data-condition-level] progress{accent-color:var(--condition-color,#80e7cd)}
html .race-display.race-hub #race-options-panel .race-garage-editor:not([data-race-garage-section=car])>label:first-of-type,
html .race-display.race-hub #race-options-panel .race-garage-editor:not([data-race-garage-section=car])>.race-car-condition{display:none}
html .race-display.race-hub #race-options-panel .race-garage-audio{padding:14px;border:1px solid #47677c;border-radius:14px;background:linear-gradient(140deg,#183a46,#162337)}
html .race-display.race-hub #race-options-panel .race-engine-preview{width:100%;justify-content:center;min-height:56px;color:#092c29;background:#8ae9d2;border-color:#8ae9d2;font-size:15px;font-weight:700}
html .race-display.race-hub #race-options-panel .race-cosmetic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html .race-display.race-hub #race-options-panel .race-cosmetic-tile{min-width:0;padding:8px}
html .race-display.race-hub #race-options-panel .race-cosmetic-tile strong{font-size:13px;overflow-wrap:anywhere}
@media(max-width:420px){html .race-display.race-hub #race-options-panel .race-cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

html .race-display.race-hub #race-options-panel .race-garage-editor[data-race-garage-section=car]>.race-garage-card{display:block;background:linear-gradient(130deg,#1e3d48,#162536);border:1px solid #426474;border-radius:14px;padding:12px;margin:12px 0}
html .race-display.race-hub #race-options-panel .race-garage-editor[data-race-garage-section=car]>.race-car-stats{display:grid;margin:12px 0}
html .race-display.race-hub #race-options-panel .race-garage-car-title{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:12px}
html .race-display.race-hub #race-options-panel .race-garage-car-title strong{font-size:17px}
html .race-display.race-hub #race-options-panel .race-garage-car-title small{display:block;color:#b7ccd8;font-size:12px;line-height:1.4;margin-top:4px}
html .race-display.race-hub .race-artwork-items .race-motif-swatch{width:36px;height:28px;display:block}

html .race-display.race-hub .race-unlock-shortfall{display:flex;align-items:center;justify-content:space-between;gap:8px}
html .race-display.race-hub .race-unlock-shortfall button{min-height:48px;padding:8px 12px;flex-shrink:0}
html .race-display.race-hub .race-offer-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#030b14bd}
html .race-display.race-hub .race-garage .race-offer{position:fixed;top:64px;bottom:12px;left:50%;right:auto;transform:translateX(-50%);width:min(430px,calc(100% - 24px));max-height:calc(100% - 76px);margin:0;padding:20px;z-index:51;overflow:auto;border:1px solid #52748c;background:#112431;border-radius:16px;box-shadow:0 12px 40px #0008}
html .race-display.race-hub .race-offer a,html .race-display.race-hub .race-offer button{min-height:48px;display:flex;align-items:center;justify-content:center;margin:8px 0}

/* Garage navigation is a visible directory; native pickers only edit individual settings. */
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-section-picker{display:none!important}
html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-head>div{display:block}
html .race-display.race-hub .race-garage-directory,
html .race-display.race-hub .race-upgrades-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}
html .race-display.race-hub .race-garage-directory button,
html .race-display.race-hub .race-upgrades-directory button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:72px;height:auto;padding:8px 4px;border:1px solid #3c5d70;border-radius:12px;background:linear-gradient(145deg,#1b3445,#132633);color:#e3f0f6}
html .race-display.race-hub .race-garage-directory strong,
html .race-display.race-hub .race-upgrades-directory strong{font-size:13px;line-height:1.25;white-space:normal;margin-top:6px}
html .race-display.race-hub .race-garage-directory .icon{color:#85e3ce}
html .race-display.race-hub .race-upgrades-directory .icon{color:#f4ca82}
html .race-display.race-hub .race-garage-directory button:nth-child(2) .icon{color:#b8b3ff}
html .race-display.race-hub .race-garage-directory button:nth-child(3) .icon{color:#edb0ce}
html .race-display.race-hub .race-garage-back,
html .race-display.race-hub .race-upgrades-browse{display:flex;align-items:center;gap:8px;min-height:48px;margin:0 0 12px;padding:8px 12px;color:#cde5f2;background:#192e3d;border:1px solid #3e6076;border-radius:10px}
html .race-display.race-hub .race-upgrades-directory{grid-template-columns:repeat(4,minmax(0,1fr))}
html .race-display.race-hub .race-upgrades-directory button{min-height:68px}
@media(max-width:700px){
 html .race-display.race-hub[data-garage-section=overview] #race-options-panel[data-menu=garage],
 html .race-display.race-hub[data-garage-section=upgrades][data-upgrade-part=browse] #race-options-panel[data-menu=garage]{top:64px}
 html .race-display.race-hub[data-garage-section=overview] .race-showcase-tools,
 html .race-display.race-hub[data-garage-section=upgrades][data-upgrade-part=browse] .race-showcase-tools{visibility:hidden}
 html .race-display.race-hub .race-upgrades-directory{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-height:400px) and (min-width:701px){html .race-display.race-hub .race-garage-directory{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Match the Garage specificity so small screens do not retain an empty grid row. */
@media(max-width:420px){
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-content{grid-column:1;grid-row:2}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-launch{grid-column:1;grid-row:3}
}
html .race-display.race-hub .race-car-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html .race-display.race-hub .race-car-cards button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:108px;padding:8px 4px;background:linear-gradient(145deg,#213d50,#152631);border:1px solid #486174;border-radius:12px;color:#eaf4fa}
html .race-display.race-hub .race-car-cards button[aria-pressed=true]{border:2px solid #6ae3c4;background:linear-gradient(145deg,#20544f,#17363e)}
html .race-display.race-hub .race-car-cards svg{max-width:100%;flex-shrink:0}
html .race-display.race-hub .race-car-cards strong{font-size:13px;line-height:1.2;white-space:normal}
html .race-display.race-hub .race-car-cards small{display:flex;align-items:center;gap:4px;font-size:11px;color:#bbd2df}
html .race-display.race-hub .race-car-cards button[aria-pressed=true] small{color:#98f5d9}
html .race-display.race-hub .race-car-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;color:#bad1df;font-size:13px}
html .race-display.race-hub .race-car-pages button{min-width:48px;min-height:48px;display:grid;place-items:center;border:1px solid #486174;border-radius:10px;background:#1b3445;color:#eaf4fa}
/* Settings expose choices directly; six per page bounds touch scrolling. */
html .race-display .race-choice-field{display:block;min-width:0;width:100%;max-width:100%;margin:0;text-transform:none;letter-spacing:normal}
html .race-display .race-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
html .race-display .race-choice-grid button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;height:auto;padding:8px;font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:break-word;border:1px solid #466171;border-radius:9px;background:#172e3b;color:#e7f3f8}
html .race-display .race-choice-grid button[aria-pressed=true]{border-color:#6ee6c7;background:#204b48;color:#b7ffe7;box-shadow:inset 0 0 0 1px #6ee6c7}
html .race-display .race-choice-grid button:disabled{opacity:.45}
html .race-display .race-choice-grid button:focus,html .race-display .race-car-cards button:focus{outline:2px solid #8ef5da;outline-offset:2px}
html .race-display .race-choice-pages{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:6px;font-size:12px;color:#bbd1de}
html .race-display .race-choice-pages button{display:grid;place-items:center;min-height:48px;min-width:48px;background:#1a3343;border:1px solid #466171;border-radius:8px;color:#e7f3f8}
html .race-display.race-hub .race-preview-rotate>.race-choice-field{max-width:270px}
html .race-display.race-hub .race-preview-rotate .race-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
html .race-display.race-hub .race-inspect-toolbar>.race-choice-field{width:auto;max-width:360px}
@media(max-width:700px){html .race-display.race-hub .race-showcase-tools .race-choice-field{display:none}}
@media(max-width:420px){
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]){grid-template-rows:52px auto minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-options-head>div{display:block}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-menu-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-row:2;grid-column:1;gap:4px;padding:4px}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-menu-tabs button{min-height:48px;padding:6px;display:flex;justify-content:center;align-items:center;gap:5px}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-menu-content{grid-row:3}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-options-launch{grid-row:4}
}
@media(max-height:500px) and (min-width:421px){
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]){grid-template-columns:minmax(96px,max-content) minmax(0,1fr);grid-template-rows:52px minmax(0,1fr) auto}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-options-head>div{display:block}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-menu-tabs{display:grid;grid-template-columns:minmax(0,1fr);grid-row:2;grid-column:1;overflow-y:auto;gap:4px;padding:4px}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-menu-content{grid-column:2;grid-row:2}
 html .race-display.race-hub #race-options-panel:not([data-menu=garage]) .race-options-launch{grid-column:1/-1;grid-row:3}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-menu-content{grid-column:1;grid-row:2}
 html .race-display.race-hub #race-options-panel[data-menu=garage] .race-options-launch{grid-column:1;grid-row:3}
}
/* Product illustrations remain crisp without extra textures or WebGL contexts. */
html .race-display .has-product-art .race-choice-grid button{display:flex;flex-direction:column;gap:6px;justify-content:flex-start;padding:8px;overflow:hidden}
html .race-display .has-product-art .race-choice-grid button>span{max-width:100%;white-space:normal}
html .race-display .race-engine-art{width:90px;height:61px;max-width:100%;flex-shrink:0}
html .race-display .race-finish-art,html .race-display .race-wheel-art{width:64px;height:48px;max-width:100%;flex-shrink:0}
html .race-display .race-engine-wave{transform-origin:78px 61px}
html .race-display .race-engine-art[data-playing=true] .race-engine-wave{animation:race-sound-meter .5s ease-in-out infinite alternate}
@keyframes race-sound-meter{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
html .race-display .race-paint-art{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100%;width:78px}
html .race-display .race-paint-art>.race-car-thumb{max-width:100%;height:auto}
html .race-display .race-paint-art-colors{display:flex;gap:3px;margin-top:2px}
html .race-display .race-paint-art-colors i{width:16px;height:5px;border-radius:3px;border:1px solid #ffffff55}
html .race-display.race-hub #race-options-panel .race-cosmetic-tile{grid-template-columns:72px minmax(0,1fr)}
html .race-display.race-hub #race-options-panel .race-cosmetic-swatch{width:72px;height:60px;background:#122633!important;overflow:hidden}
html .race-display.race-hub .race-cosmetic-motif{position:absolute;left:2px;top:2px;font-size:15px}
html .race-display .race-cosmetic-swatch:before{pointer-events:none}
html .race-display .race-cosmetic-tile[data-preview=true] .race-finish-glint{animation:race-paint-glint .6s ease-out 1}
@keyframes race-paint-glint{0%{opacity:.2}50%{opacity:1}100%{opacity:.6}}
html .race-display[data-reduced-motion=true] .race-engine-wave,html .race-display[data-reduced-motion=true] .race-finish-glint{animation:none!important}
@media(prefers-reduced-motion:reduce){html .race-display .race-engine-wave,html .race-display .race-finish-glint{animation:none!important}}
@media(max-width:420px){html .race-display.race-hub #race-options-panel .race-cosmetic-tile{grid-template-columns:56px minmax(0,1fr);gap:4px 6px}html .race-display.race-hub #race-options-panel .race-cosmetic-swatch{width:56px;height:54px}}
/* The old bottom fade obscured the last row, even after scrolling to the end. */
html .race-display.race-hub #race-options-panel .race-menu-content{-webkit-mask-image:none;mask-image:none;padding-bottom:16px;scroll-padding-bottom:16px}
html .race-display.race-hub #race-options-panel .race-options-launch{height:auto;max-height:45vh;overflow-y:auto;overflow-x:hidden;min-width:0;padding-bottom:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
html .race-display.race-hub #race-options-panel .race-style-actions{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
html .race-display.race-hub #race-options-panel .race-style-actions button{min-width:0;white-space:normal;height:auto;min-height:48px;line-height:1.25}
html .race-display.race-hub #race-options-panel .race-menu-page{-webkit-mask-image:none;mask-image:none}
html .race-display .race-garage-save-state{display:flex;align-items:center;gap:5px;font-size:12px;line-height:20px;color:#a9d7c9;margin-bottom:6px}
html .race-display .race-garage-save-alert{position:fixed;z-index:40;top:68px;left:12px;right:12px;max-width:540px;margin:auto;padding:12px;border:1px solid #dcb979;border-radius:12px;background:#182b36;max-height:60vh;overflow:auto}
html .race-display .race-garage-save-alert button{min-height:48px}
html .race-display .race-car-cards button[data-preview=true]{border-color:#c2a0ef;box-shadow:inset 0 0 0 1px #c2a0ef}
html .race-display.race-hub #race-options-panel .race-equip-confirmation .race-style-actions{grid-template-columns:1fr 1fr}
html .race-display.race-hub #race-options-panel .race-options-launch[data-equipment-preview=true]>button{display:none}
/* The former car-picker hiding rule also hid the first real setting: Horn. */
html .race-display.race-hub #race-options-panel .race-garage-editor[data-race-garage-section=sounds]>label:first-of-type{display:block}
html .race-display .race-horn-status{display:block;color:#bbd8e5;font-size:13px;margin:6px 0}
html .race-display .race-horn-status:empty{display:none}
html .race-display.race-hub #race-garage-save-status{min-width:0;max-width:100%;overflow-wrap:break-word}
html .race-display.race-hub #race-garage-save-status .race-garage-sync{margin:0 0 8px;padding:8px;min-width:0;max-width:100%;grid-template-columns:minmax(0,1fr) auto}
html .race-display.race-hub #race-garage-save-status .race-garage-sync p{white-space:normal;overflow-wrap:break-word}
html .race-display .race-country-search{display:block;margin:8px 0}
html .race-display .race-country-search input{width:100%;min-height:48px;padding:10px 12px;font-size:16px;border:1px solid #426274;border-radius:10px;background:#142a38;color:#eef8fc}
html .race-display .race-country-flag{display:block;object-fit:contain;border-radius:3px;box-shadow:0 0 0 1px #afc9d64d}
html .race-display .race-location .has-product-art .race-choice-grid button{flex-direction:row;align-items:center;text-align:start;justify-content:flex-start;gap:10px;min-height:56px}
/* Sound cards need a catalogue layout, not the former select/play grid. */
html .race-display.race-hub #race-options-panel .race-garage-audio{display:block;padding:8px}
html .race-display.race-hub #race-options-panel .race-garage-audio .has-product-art .race-choice-grid button{flex-direction:row;align-items:center;text-align:start;padding:6px;gap:6px;min-height:80px;font-size:12px}
html .race-display.race-hub #race-options-panel .race-garage-audio .race-engine-art{width:64px;height:44px}
html .race-display.race-hub #race-options-panel .race-garage-audio .race-engine-preview{width:100%;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px}
html .race-display.race-hub #race-options-panel .race-garage-audio .race-engine-preview span{display:inline;font-size:13px}
@media(max-width:700px){
 html .race-display.race-hub[data-garage-section=sounds] #race-options-panel[data-menu=garage]{top:64px}
 html .race-display.race-hub[data-garage-section=sounds] .race-showcase-tools{visibility:hidden}
}
html .race-display.race-hub #race-options-panel .race-garage-editor .race-engine-preview>span,
html .race-display.race-hub #race-options-panel .race-garage-editor .race-horn-preview>span{position:static;display:inline;width:auto;height:auto;margin:0;clip:auto;overflow:visible;white-space:normal}
html .race-display.race-hub #race-options-panel .race-horn-preview{width:100%;display:flex;align-items:center;justify-content:center;gap:8px}
/* Finish the catalogue hierarchy without adding height or decorative layers. */
html .race-display.race-hub .race-sound-card-label{display:flex;flex-direction:column;gap:5px;min-width:0;text-align:start}
html .race-display.race-hub .race-sound-card-label strong{font-size:12px;line-height:1.3;font-weight:600}
html .race-display.race-hub .race-sound-card-label small{display:flex;align-items:center;gap:3px;font-size:11px;line-height:1.2;color:#a8d9ca}
html .race-display.race-hub .race-sound-card-label small[data-access=locked]{color:#dfc18c}
html .race-display.race-hub .race-garage-directory button[data-garage-destination="cosmetics:skins"] .icon,
html .race-display.race-hub .race-garage-directory button[data-garage-destination="cosmetics:league"] .icon{color:#e6c77c}
html .race-display.race-hub .race-garage-directory button[data-garage-destination="cosmetics:artwork"] .icon,
html .race-display.race-hub .race-garage-directory button[data-garage-destination="cosmetics:funny"] .icon{color:#c1a9ed}
html .race-display.race-hub .race-garage-directory button[data-garage-destination="upgrades:maintenance"] .icon{color:#efb48c}
html .race-display.race-hub .race-wallet-buy{border:1px solid #786b43;border-radius:12px;background:linear-gradient(120deg,#283328,#192c35);margin:12px 0;padding:0 10px}
html .race-display.race-hub .race-wallet-buy>summary{min-height:52px;display:flex;align-items:center;gap:8px;color:#f3dc9a;font-weight:600}
html .race-display.race-hub .race-wallet-buy[open]>summary{border-bottom:1px solid #57604a;margin-bottom:10px}
html .race-display.race-hub .race-wallet-packs button{border-radius:12px;border:1px solid #626846;background:linear-gradient(145deg,#263f43,#162c38)}
html .race-display.race-hub #race-options-panel .race-options-head h2{line-height:1.2;overflow-wrap:break-word;font-size:18px}
html .race-display.race-hub #race-options-panel .race-options-head>div{min-width:0}
html .race-display.race-hub .race-garage-directory button:focus,
html .race-display.race-hub .race-cosmetic-tile:focus,
html .race-display.race-hub .race-wallet-packs button:focus{outline:2px solid #9aefd8;outline-offset:2px}
@media(hover:hover) and (pointer:fine){
 html .race-display.race-hub .race-garage-directory button:hover,
 html .race-display.race-hub .race-car-cards button:hover,
 html .race-display.race-hub .race-cosmetic-tile:hover{border-color:#87caba;background-color:#23434a}
}
html .race-display .race-choice-grid button>.icon,
html .race-display .race-choice-grid button>.flag{flex-shrink:0;margin-inline-end:6px;color:#9cded2}
html .race-display .race-choice-grid button>.race-choice-label{min-width:0;white-space:normal;line-height:1.3}
html .race-display .race-choice-grid button[data-choice-option=keyboard]>.icon{color:#b1c2ed}
html .race-display .race-choice-grid button[data-choice-option=gamepad]>.icon{color:#c3a9e9}
html .race-display .race-choice-grid button[data-choice-option=phone]>.icon{color:#9bd7ea}
html .race-display .race-choice-grid button[data-choice-option=private]>.icon{color:#e4c791}
html .race-display .race-preview-rotate .race-choice-grid button>.icon{width:16px;height:16px;margin-inline-end:3px}
html .race-phone .race-choice-field{display:block;min-width:0;max-width:100%}
html .race-phone .race-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
html .race-phone .race-choice-grid button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:48px;padding:6px;border:1px solid #496477;border-radius:9px;background:#193242;color:#e5f5fc;font-size:12px;white-space:normal}
html .race-phone .race-choice-grid button[aria-pressed=true]{border-color:#81e4c9;background:#234a45}
html .race-phone .race-choice-grid button>.icon{flex-shrink:0;color:#9cded2}
/* Keep five race modes in two rows on car browsers, without legacy spans
   generating extra rows in the compact workspace grid. */
html .race-display.race-hub .race-setup-page .race-modes{grid-template-columns:repeat(6,minmax(0,1fr))}
html .race-display.race-hub .race-setup-page .race-modes>button{grid-column:span 2;min-width:0}
html .race-display.race-hub .race-setup-page .race-modes>button:nth-child(n+4){grid-column:span 3}
@media(max-width:700px){
 html .race-display.race-hub .race-setup-page .race-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
 html .race-display.race-hub .race-setup-page .race-modes>button{grid-column:auto}
 html .race-display.race-hub .race-setup-page .race-modes>button:nth-child(n+4){grid-column:auto}
 html .race-display.race-hub .race-setup-page .race-modes>button:last-child{grid-column:1/-1}
}
html .race-display .race-course-filters>label{align-self:start;align-content:start;gap:8px}
html .race-display .race-course-filters input[type=search]{height:48px;min-height:48px}
html .race-display .race-setup-fields>label{align-content:start}
html .race-display .race-lobby-options{display:grid;gap:10px;min-width:0;scroll-margin-block:8px;border-radius:10px}
html .race-display .race-lobby-options:focus{outline:2px solid #5de0c8;outline-offset:3px}
html .race-display .race-lobby-options-link{min-height:48px}
html .race-display.race-hub .race-lobby-actions>button{min-height:48px}
/* Multiplayer begins with visible hosting choices and an always-open code form. */
html .race-display .race-online-create{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html .race-display .race-online-create .race-online-host{display:flex;align-items:center;gap:10px;min-height:96px;padding:14px;text-align:start;background:#142f39;border:1px solid #377a78;border-radius:14px;min-width:0}
html .race-display .race-online-host>.icon{flex-shrink:0;color:#70e4cd}
html .race-display .race-online-host>span{display:grid;gap:6px;min-width:0;flex:1}
html .race-display .race-online-host strong{font-size:15px;line-height:1.3}
html .race-display .race-online-host small{color:#b8cbd2;font-size:12px;line-height:1.4}
html .race-display .race-online-host:nth-child(2){background:#222b40;border-color:#58678d}
html .race-display .race-online-host:nth-child(2)>.icon{color:#bbc7ff}
html .race-display .race-online-page>.race-join{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px;border:1px solid #354e5b;border-radius:12px;min-width:0}
html .race-display .race-online-page>.race-join label{grid-column:1/-1}
html .race-display .race-online-page>.race-join input{min-width:0;width:100%;height:48px}
html .race-display .race-online-page>.race-join button{min-height:48px}
@media(max-width:540px){html .race-display .race-online-create{grid-template-columns:1fr}html .race-display .race-online-create .race-online-host{min-height:80px;padding:10px}}
html .race-display.race-hub #race-options-panel .race-options-launch{flex-wrap:wrap}
html .race-display .race-options-error{display:flex;align-items:center;gap:8px;flex:0 0 100%;width:100%;grid-column:1/-1;min-width:0;background:#422c23;color:#ffe0bf;border:1px solid #a46b3f;border-radius:10px;padding:4px 10px;box-sizing:border-box}
html .race-display .race-options-error>span{flex:1;min-width:0;font-size:13px;line-height:1.4;overflow-wrap:anywhere}
html .race-display .race-options-error>.icon{flex-shrink:0;color:#ffba66}
html .race-display .race-options-error>button{min-width:48px;min-height:48px;flex-shrink:0;padding:8px}

/* Landscape input choices need room for translated labels above the utility
   buttons; a narrow text column can push the driving controls off screen. */
@media(min-width:650px) and (max-height:500px){
 .race-app.race-phone .race-phone-input-settings{grid-template-columns:repeat(3,minmax(48px,1fr));row-gap:6px}
 .race-app.race-phone .race-phone-input-settings .race-phone-method{grid-column:1/-1;grid-row:1;width:100%;max-width:none}
 .race-app.race-phone .race-phone-input-settings>button{justify-self:center}
}

/* Upgrade comparisons wrap when larger system-font metrics exceed a column. */
html .race-display.race-hub .race-upgrade-stats dd>span:first-child{white-space:normal;overflow-wrap:anywhere}

/* shop-refresh.css */
/* Storefront: compact car-first catalogue, with a separate review column.
   Scoped so the in-drive purchase dialog keeps its existing layout. */
html .shop-page{scroll-behavior:auto}
html .shop-page .shop-header{padding:12px 24px;max-width:1280px}
html .shop-page .shop-header nav>*{margin:0 0 0 8px}
html .shop-page .shop-header .shop-return-action{background:var(--ctl-bg);border-color:var(--ctl-line);color:#dce8d2}
html .shop-page .shop-shell{padding:24px;max-width:1280px}
html .shop-page .shop-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;margin-bottom:24px}
html .shop-page .shop-heading .welcome-eyebrow{font-size:10px;letter-spacing:.14em}
html .shop-page .shop-heading h1{font-size:30px;line-height:1.15;margin:6px 0 8px}
html .shop-page .shop-heading>p{font-size:13px;line-height:1.5;margin:0;color:#aeb9ad}
html .shop-page .shop-progress{grid-column:2;grid-row:1/4;align-self:center;margin:0}
html .shop-page .shop-progress li{font-size:11px;margin:0 0 0 12px;min-height:32px}
html .shop-page .shop-layout{grid-template-columns:minmax(0,1fr) 270px;gap:24px}
html .shop-page .shop-layout h2{font-size:18px;line-height:1.3;margin:0 0 12px}
html .shop-page .billing-toggle{margin:0 0 16px;max-width:100%;width:100%}
html .shop-page .billing-toggle button{min-width:48px;min-height:48px}
.shop-plan-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
html .shop-page .subscription-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
html .shop-page .subscription-option{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);align-content:start;align-items:start;gap:10px;padding:16px;min-height:154px;border-radius:14px;background:#151c18}
html .shop-page .subscription-option.selected{background:#202b1b;border-color:#a9d779;box-shadow:inset 0 0 0 1px #a9d779}
html .shop-page .subscription-option:focus-within{outline:2px solid #e2f5cd;outline-offset:3px}
html .shop-page .subscription-option input{margin:1px 0 0;width:20px;height:20px}
html .shop-page .subscription-option strong{font-size:14px}
html .shop-page .subscription-option small{font-size:12px;line-height:1.5}
html .shop-page .subscription-option>b{grid-column:2;grid-row:2;text-align:start;font-size:23px;line-height:1.2;white-space:normal}
html .shop-page .subscription-option>b small{font-weight:400;font-size:11px;text-align:start;margin-top:3px}
html .shop-page .subscription-option .product-name .icon{display:none}
html .shop-page .subscription-option em{font-size:11px;line-height:1.4;font-style:normal;margin:6px 0;display:block}
html .shop-page .subscription-option .plan-savings{color:#b5d994;font-size:11px;margin-top:6px}
html .shop-page .shop-layout>.purchase-review{padding:20px;top:16px;background:#1a221c;border-radius:16px}
html .shop-page .order-summary h3{font-size:15px;margin-bottom:20px}
html .shop-page .order-summary>div{gap:12px;font-size:12px;line-height:1.5}
html .shop-page .order-summary .order-total{align-items:center;margin-top:16px;padding-top:16px}
html .shop-page .order-total strong:last-child{font-size:26px;letter-spacing:-.03em}
html .shop-page .purchase-policies,html .shop-page .purchase-reassurance{font-size:11px;line-height:1.6;text-align:start}
html .shop-page .purchase-footer{padding-top:12px}
html .shop-page .phone-checkout-btn{font-size:13px;min-height:48px;padding:12px}
html .shop-page .phone-checkout-note{font-size:11px;margin:8px 0 12px}
html .shop-page .collection-browser{margin:20px 0 12px;background:#151c18;border-color:#354032;border-radius:14px}
html .shop-page .collection-browser>summary{min-height:56px;font-size:14px}
html .shop-page .addon-group-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html .shop-page .addon-group-tabs button{min-width:48px;min-height:48px;margin:0;white-space:normal;font-size:12px;padding:8px}
html .shop-page .shop-support{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #354032;margin-top:28px;padding-top:24px}
html .shop-page .shop-support>section{margin:0;padding:0;border:0;background:none;border-radius:0}
html .shop-page .shop-support strong{font-size:13px;line-height:1.5}
html .shop-page .shop-support p{font-size:12px;line-height:1.6;color:#aeb9ad}
html .shop-page .shop-browser-check a{font-size:12px;min-height:48px;text-decoration:none}
html .shop-page .shop-earned>.icon{margin-inline-end:12px}
html .shop-page .footer-navigation nav{min-width:0}
html .shop-page .footer-navigation a{max-width:100%;overflow-wrap:break-word;word-break:break-word}
html .shop-page .shop-plan-details{margin-top:12px}
/* Navigation uses one icon size and short, visible labels at car widths. */
html .shop-page .shop-header{min-height:72px;--ui-scale:1px}
html .shop-page .shop-header .ui-tool{min-width:48px;min-height:48px;padding:0 12px;border-color:transparent;background:transparent;color:#c2ccc2;border-radius:10px}
html .shop-page .shop-header .ui-tool:hover{background:#202922;color:#eef4e9}
html .shop-page .shop-header .shop-signin-action{border-color:#42513b;background:#1c271a;color:#d5edb8}
html .shop-page .shop-header .shop-return-action{border-color:#354032;background:#151d18;color:#e7eee0}
html .shop-page .shop-header .icon{width:20px!important;height:20px!important;flex:0 0 20px;margin:0}
html .shop-page .shop-header .ui-label{display:inline;max-width:140px}
html .shop-page .shop-header .ui-label-full{display:none}
html .shop-page .shop-header .ui-label-short{display:inline}
html .shop-page .shop-header .shop-account{border:0;background:none;padding:0 8px}
html .shop-page .shop-header .shop-account small{display:none}
html .shop-page .shop-header .ui-tool:focus-visible{outline:2px solid #d5edb8;outline-offset:2px}
html .shop-page #buy,html .shop-page .phone-handoff,html .shop-page #shop-phone-status{scroll-margin-top:16px}
html .shop-page #buy:focus{outline:2px solid #92b974;outline-offset:4px}
html .shop-page .purchase-promo{margin:12px 0 0;border:0;border-top:1px solid #354032;border-radius:0;background:transparent;overflow:visible}
html .shop-page .purchase-promo summary{display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:8px;min-height:48px;padding:8px 0;font-size:12px;font-weight:500}
html .shop-page .purchase-promo summary>span{min-width:0;margin:0}
html .shop-page .purchase-promo summary .icon{flex:0 0 18px;width:18px!important;height:18px!important;margin:0 8px 0 0}
html .shop-page .purchase-promo summary>small{display:none}
html .shop-page .purchase-promo summary>.icon{margin:0;transform:rotate(90deg)}
html .shop-page .purchase-promo[open] summary>.icon{transform:rotate(-90deg)}
html .shop-page .purchase-promo>div{padding:0 0 12px}
html .shop-page .purchase-promo p{font-size:12px;line-height:1.6}
html .shop-page .purchase-selection>.pro-offer{margin:16px 0;padding:16px;border:1px solid #425a32;border-radius:14px;background:#1a2418}
html .shop-page .purchase-selection>.pro-offer .pro-offer-terms{font-size:11px}
html[dir=rtl] .shop-page .shop-header nav>*{margin:0 8px 0 0}
html[dir=rtl] .shop-page .purchase-promo summary>span>.icon{margin:0 0 0 8px}
@media(min-width:761px) and (max-height:800px){
 html .shop-page .shop-shell{padding-top:16px}
 html .shop-page .shop-heading{margin-bottom:16px}
 html .shop-page .shop-heading h1{font-size:26px}
 html .shop-page .subscription-option{padding:14px;gap:8px;min-height:154px}
}
@media(min-width:1100px){html .shop-page .shop-layout{grid-template-columns:minmax(0,1fr) 320px;gap:32px}html .shop-page .subscription-option{min-height:164px}}
@media(max-width:760px){
 html .shop-page .shop-header{padding:12px 16px;row-gap:8px}
 html .shop-page .shop-header nav>*{margin:0 6px 6px 0}
 html .shop-page .shop-shell{padding:20px 16px}
 html .shop-page .shop-heading{display:block;margin-bottom:20px}
 html .shop-page .shop-heading h1{font-size:28px}
 html .shop-page .shop-progress{margin-top:12px}
 html .shop-page .shop-progress li{margin:0 12px 0 0}
 html .shop-page .shop-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 html .shop-page .shop-layout>.purchase-review{position:static}
 html .shop-page .shop-support{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media(max-width:420px){html .shop-page .subscription-options{grid-template-columns:minmax(0,1fr)}html .shop-page .subscription-option{min-height:0}html .shop-page .addon-group-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){
 html .shop-page .shop-header{align-items:center}
 html .shop-page .shop-header-actions{width:100%;justify-content:space-between;margin:0}
 html .shop-page .shop-header .shop-home-action .ui-label,html .shop-page .shop-header .shop-phone-action .ui-label{display:none}
 html .shop-page .shop-header .shop-account{max-width:112px;font-size:11px}
 html .shop-page .shop-header .ui-tool{padding:0 10px}
 html .shop-page .shop-header nav>*{margin:0}
}
@media(max-height:650px){html .shop-page .shop-layout>.purchase-review{position:static}}

/* tesla-compatibility.css */
/* Keep vehicle compatibility last in the cascade: decorative refreshes must
   not restore expensive effects or override native touch gestures. */
html[data-tesla="true"] .topbar,
html[data-tesla="true"] .route-ribbon,
html[data-tesla="true"] .drive-readout,
html[data-tesla="true"] .control-dock,
html[data-tesla="true"] .turn-card,
html[data-tesla="true"] .demo-driving {
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
/* Grid spacing also works in Chromium versions without flex-gap support. */
html[data-tesla="true"] .demo-touch-controls {
 display:grid;
 grid-template-columns:repeat(2,minmax(48px,1fr));
 gap:6px;
}
html[data-tesla="true"] .demo-touch-controls button {
 min-width:48px;
 min-height:48px;
 touch-action:none;
}
html[data-tesla="true"] .panel,
html[data-tesla="true"] .shop-page,
html[data-tesla="true"] .welcome-page {
 -webkit-overflow-scrolling:touch;
}

html[data-tesla="true"] .demo-driving button {min-width:48px;min-height:48px}
@media(max-height:850px){
 html[data-tesla="true"] .scene-status,
 html[data-tesla="true"] .render-mode-badge,
 html[data-tesla="true"] .drive-dynamics,
 html[data-tesla="true"] .turn-card {display:none}
}
@media(min-width:550px) and (max-width:760px){
 html[data-tesla="true"] .route-ribbon {max-width:calc(100vw - 360px)}
 html[data-tesla="true"] .route-copy {min-width:0}
 html[data-tesla="true"] .route-copy>strong {overflow:hidden;text-overflow:ellipsis}
 html[data-tesla="true"] .demo-mode .demo-driving {top:260px;max-width:calc(100vw - 360px)}
 html[data-tesla="true"] .demo-touch-controls {min-width:0;width:100%}
 html[data-tesla="true"] .demo-touch-controls button {padding:6px 2px}
 html[data-tesla="true"] .demo-touch-controls small {font-size:9px;letter-spacing:0}
}

@media(max-width:549px){
 html[data-tesla="true"] .route-ribbon{max-width:calc((100vw - 36px)/2)}
 html[data-tesla="true"] .route-copy{min-width:0}
 html[data-tesla="true"] .route-copy>strong{overflow:hidden;text-overflow:ellipsis}
}
@media(min-width:550px) and (max-width:760px) and (max-height:740px){
 html[data-tesla="true"] .demo-mode .demo-driving{top:78px;max-width:calc(100vw - 224px)}
}
@media(max-width:549px) and (max-height:620px) and (orientation:portrait){
 html[data-tesla="true"] .demo-mode .demo-driving>button{width:calc((100vw - 36px)/2);min-height:50px}
}
@media(max-height:500px) and (orientation:landscape){
 html[data-tesla="true"] .demo-mode .demo-driving{right:224px}
}
/* Driving actions keep full touch targets without covering road information. */
html[data-tesla="true"] .experience-switch{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px}
html[data-tesla="true"] .experience-switch .icon{flex-shrink:0;margin-right:6px}
html[data-tesla="true"] .demo-mode .demo-driving>.demo-drive-toggle{width:48px;min-width:48px;height:48px;min-height:48px;max-width:48px;padding:10px;justify-self:start;flex-shrink:0;display:flex;align-items:center;justify-content:center}
html[data-tesla="true"] .account-btn.session-attention{position:relative;border-color:#e7c975}
html[data-tesla="true"] .account-btn.session-attention::after{content:'';position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#e7c975}
.session-notice-inline{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:start;padding:10px 12px;text-align:left}
.session-notice-inline p{margin:0;overflow-wrap:anywhere;line-height:1.5;font-size:14px}
.session-notice-inline button{min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;padding:8px;background:transparent;color:inherit;border:1px solid #697345;border-radius:8px;cursor:pointer}
@media(max-width:549px){
 html[data-tesla="true"] .experience-switch{width:48px;padding:0}
 html[data-tesla="true"] .experience-switch .icon{margin:0}
 html[data-tesla="true"] .experience-switch span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}

/* A parked showcase keeps the car unobscured and its controls together. */
html[data-showcase="true"] .panel,html[data-showcase="true"] .scrim{display:none!important}
html[data-showcase="true"] #app>:not(canvas),html[data-showcase="true"] #app:after{display:none!important}
html[data-showcase="true"] #app{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:30}
html[data-showcase="true"] #road{z-index:1}

/* Race settings must read independently of the scene behind them. Keep these
   viewport rules last: device-specific density must not squeeze field values. */
html .race-display.race-home .race-stage-menu {background:#0d1216}
html .race-display .race-setup-fields>label {min-width:0}
@media(max-width:700px){
 html .race-display.race-home .race-stage-menu .race-setup-fields {
  grid-template-columns:minmax(0,1fr);
 }
 html .race-display.race-home .race-stage-menu .race-setup-fields>label {grid-column:1 / -1}
 html .race-display.race-home .race-options-launch .race-check .ui-label-full {display:none}
 html .race-display.race-home .race-options-launch .race-check .ui-label-short {display:inline}
}
html[data-phone="true"] .race-display.race-home .race-stage-menu select {min-height:48px}
html[data-phone="true"] .race-display.race-home .race-stage-menu .race-garage-editor>label,
html[data-phone="true"] .race-display.race-home .race-stage-menu .race-garage-audio>label {
 display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
}
html[data-phone="true"] .race-display.race-home .race-stage-menu select {font-size:16px}
@media(max-width:540px){
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact {
  grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;
 }
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact>div {
  grid-template-columns:minmax(0,1fr);gap:2px;align-content:start;
 }
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact>div>span {
  white-space:normal;overflow:visible;font-size:12px;line-height:1.3;
 }
 html .race-home.is-showroom.has-setup-footer .race-showcase-stats.is-setup .race-car-stats.is-compact>div>b {text-align:start}
}
@media(max-width:540px){
 html[data-tesla="true"] .race-display.race-home .topbar {padding:0 8px}
 html[data-tesla="true"] .race-display.race-home .topbar .brand>*+* {margin-left:4px}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions {gap:0}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions>*+* {margin-left:4px}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions>.account-btn {width:48px;min-width:48px;height:48px;min-height:48px}
 html[data-tesla="true"] .race-display.race-home .topbar .top-actions>.race-wallet-trigger {min-width:48px;max-width:64px;padding:4px}
 html[dir="rtl"][data-tesla="true"] .race-display.race-home .topbar .top-actions>*+*,
 html[dir="rtl"][data-tesla="true"] .race-display.race-home .topbar .brand>*+* {margin-left:0;margin-right:4px}
}

/* Keep the selected car and course readable in a narrow browser window. The
   observed dock height reserves room for both rows above the setup footer. */
@media(max-width:540px){
 html .race-display.race-home .race-launch-choices {grid-template-columns:repeat(2,minmax(0,1fr))}
 html .race-display.race-home .race-launch-choices .race-dock-choice strong {display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
}

/* The selected joystick is available on the car display as well as phones. */
html:not([data-phone="true"]) .race-display .race-play>.race-joystick-controls{position:absolute;z-index:3;left:var(--hud-gut);right:var(--hud-gut);bottom:var(--pedal-bottom);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;direction:ltr}
html:not([data-phone="true"]) .race-display .race-play>.race-joystick-controls>*{pointer-events:auto}
html:not([data-phone="true"]) .race-display .race-play>.race-joystick-controls.is-swapped{flex-direction:row-reverse}
html:not([data-phone="true"]) .race-display .race-joystick-steering{width:180px;max-width:35%}
html:not([data-phone="true"]) .race-display .race-joystick-zone{height:112px}
html:not([data-phone="true"]) .race-display .race-joystick-ring{width:84px;height:84px}
html:not([data-phone="true"]) .race-display .race-joystick-hint{display:none}
html:not([data-phone="true"]) .race-display .race-joystick-pedals{grid-template-columns:repeat(2,minmax(48px,1fr));grid-template-rows:repeat(2,48px);column-gap:8px;row-gap:8px;padding:0;width:180px;max-width:35%}
html:not([data-phone="true"]) .race-display .race-joystick-pedal{min-width:48px;min-height:48px;padding:4px;touch-action:none;user-select:none;-webkit-user-select:none}
html:not([data-phone="true"]) .race-display .race-joystick-pedal.is-held{background:#285e53}
html:not([data-phone="true"]) .race-display .race-joystick-pedal{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:12px;line-height:1.2}
html:not([data-phone="true"]) .race-display .race-joystick-pedal>.icon{flex-shrink:0;width:18px;height:18px;margin:0 0 2px}

/* Keep course filters above the cards in reduced-height car browsers. */
html .race-display.race-hub .race-course-filters .race-choice-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:480px){html .race-display.race-hub .race-course-filters .race-choice-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}