:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#14222b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible{outline:3px solid #efffa7;outline-offset:5px}#game{position:fixed;inset:0;width:100%;height:100%;display:block}#vignette{pointer-events:none;position:fixed;inset:0;background:linear-gradient(180deg,#06131b80,transparent 28%,transparent 65%,#071017b0)}#hit{position:fixed;inset:0;background:#ff492c;opacity:0;pointer-events:none;mix-blend-mode:screen}header{position:fixed;top:32px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:flex-start;z-index:5}.brand{color:#fff;text-decoration:none;font-size:21px;font-weight:900;letter-spacing:-1px}.brand span{color:#d8fa74}.brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:9px;font-weight:400}.top-actions{display:flex;align-items:center;gap:18px}.top-actions button{border:1px solid #ffffff40;background:#17262b70;padding:11px 13px;font-size:10px;letter-spacing:1px}.top-actions #pause{font-size:17px;padding:6px 13px}#fps{font-size:9px;color:#d5e2db90;letter-spacing:1px}.overlay{position:fixed;inset:0;background:linear-gradient(90deg,#061319c9,transparent 90%);z-index:3;display:flex;align-items:center;padding:8vw}.menu-copy{max-width:650px}.kicker{font-size:10px;letter-spacing:3px;font-weight:700;color:#d8fa74;display:flex;align-items:center;gap:9px}.kicker i{width:6px;height:6px;background:#d8fa74;border-radius:50%;box-shadow:0 0 14px #d8fa74}h1{font-size:clamp(55px,7.4vw,112px);line-height:.93;letter-spacing:-6px;margin:25px 0;font-weight:900;font-style:italic}h1 em{color:#d8fa74}p{font-size:14px;line-height:1.8;color:#c5d2d5;margin:28px 0}.primary{display:flex;align-items:center;justify-content:space-between;gap:55px;border:0;padding:20px 24px;background:#d8fa74;color:#16201c;font-size:12px;font-weight:800;letter-spacing:1px;min-width:240px}.primary:hover{background:#e5ff9b}.primary span{font-size:22px}.controls{display:flex;flex-wrap:wrap;gap:15px;margin-top:32px;max-width:490px;font-size:10px;color:#b7c3c8}.controls b{color:white;border:1px solid #ffffff30;padding:5px;margin-right:5px;font-size:9px;font-weight:400}.menu-foot{position:absolute;bottom:30px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#c2d1d3aa}#hud{position:fixed;inset:0;pointer-events:none}.score-panel{position:absolute;left:40px;top:125px}.eyebrow{display:block;font-size:9px;letter-spacing:2px;color:#d1dcd7a0}.score-panel strong{display:block;font-size:39px;font-style:italic;letter-spacing:1px;margin-top:6px;font-variant-numeric:tabular-nums}#combo{font-size:10px;letter-spacing:2px;color:#d8fa74}.bottom{position:absolute;bottom:40px;left:40px;right:40px;display:flex;align-items:flex-end;gap:45px}.speed strong{font-size:80px;line-height:.9;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:-5px}.speed>span{font-size:11px;color:#c8d8d7;margin-left:12px;letter-spacing:2px}.speed-track{height:3px;background:#ffffff20;width:200px;margin-top:15px}.speed-track i{display:block;height:100%;background:#d8fa74;width:0}.trip strong{font-size:23px;display:block;margin:8px 0}.trip small{font-size:10px;font-weight:400}.trip>span:last-child{font-size:9px;letter-spacing:1px;color:#b1c3c6}.nitro{margin-left:auto;width:190px}.nitro b{float:right;border:1px solid #ffffff40;padding:3px;font-size:8px}.nitro>div{height:5px;background:#ffffff20;margin:12px 0}.nitro i{display:block;height:100%;width:100%;background:#d8fa74;box-shadow:0 0 12px #cfff6150}.nitro small{font-size:8px;letter-spacing:1px;color:#acbebf}.damage{position:absolute;right:40px;top:125px;display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:2px}.damage i{height:3px;width:70px;background:#d8fa74;transform-origin:left}#toast{position:absolute;top:29%;left:50%;transform:translateX(-50%);font-size:22px;font-weight:900;font-style:italic;letter-spacing:2px;color:#e1ff95;opacity:0;transition:opacity .2s;white-space:nowrap;text-shadow:0 2px 20px #142b29}.centered{background:#07151bd9;backdrop-filter:blur(8px);justify-content:center;text-align:center}.centered .kicker{justify-content:center}h2{font-size:clamp(40px,6vw,75px);font-style:italic;letter-spacing:-3px;margin:20px 0}.centered .primary{margin:25px auto}.secondary{background:none;border:0;font-size:11px;color:#c5d2d5}.centered small{font-size:11px;color:#b8c9cd}#touch{position:fixed;bottom:140px;left:20px;right:20px;z-index:2;display:flex;justify-content:space-between;pointer-events:none}#touch>div{display:flex;gap:10px;align-items:flex-end}#touch button{pointer-events:auto;touch-action:none;user-select:none;border:1px solid #ffffff50;background:#13242c90;border-radius:12px;min-width:55px;height:65px;font-size:12px;font-weight:bold}#touch .touch-gas{height:90px;background:#c6e96d60}#touch .touch-boost{color:#d8fa74;min-width:45px;height:45px}#error{position:fixed;inset:30%;z-index:10;background:#172830;padding:30px;line-height:1.6}[hidden]{display:none!important}@media(max-width:700px){header{top:22px;left:22px;right:22px}.top-actions{gap:8px}#fps{display:none}.brand{font-size:17px}.brand small{font-size:6px}.overlay{padding:25px}h1{letter-spacing:-3px;font-size:60px}.menu-copy p{font-size:12px}.controls{line-height:2.5;gap:8px}.menu-foot{left:22px;right:22px;font-size:7px}.menu-foot span:last-child{display:none}.score-panel{left:22px;top:100px}.score-panel strong{font-size:29px}.damage{top:105px;right:22px}.bottom{left:22px;right:22px;bottom:28px;gap:20px}.speed strong{font-size:57px}.speed>span{font-size:8px;margin-left:7px}.speed-track{width:130px}.trip{display:none}.nitro{width:130px}.nitro small{font-size:6px}#toast{font-size:16px;top:24%}#touch{bottom:130px}}
.drive-options{display:flex;gap:12px;margin:20px 0}.drive-options label{font-size:8px;letter-spacing:2px;color:#c1d0ce;display:flex;flex-direction:column;gap:8px}.drive-options select{appearance:auto;border:1px solid #ffffff45;background:#13262e;color:white;padding:11px 28px 11px 12px;font:11px Arial;min-width:160px;border-radius:0;cursor:pointer}.drive-options option{background:#13262e;color:white}#city-hud{position:fixed;right:40px;top:160px;z-index:2;width:180px;pointer-events:none}#street-name{font-size:11px;line-height:1.5;letter-spacing:.5px;margin-bottom:9px;padding:7px 10px;background:#13262ed9;border-left:2px solid #d8fa74}#minimap{width:180px;height:180px;border:1px solid #ffffff35;border-radius:5px;box-shadow:0 10px 40px #07131b35}#stream-status{display:block;font-size:7px;letter-spacing:1px;margin:8px 0;color:#d8fa74}#city-hud a{font-size:7px;color:#e0e7e5;text-decoration:none;pointer-events:auto;text-shadow:0 1px 3px #000}#loading{z-index:9}#load-message{font-size:clamp(22px,4vw,48px);letter-spacing:-1px}#retry-load{margin:auto}@media(max-width:700px){.drive-options{gap:10px;flex-wrap:wrap}.drive-options select{min-width:145px;max-width:190px;font-size:10px}#city-hud{right:22px;top:145px;width:120px}#minimap{width:120px;height:120px}#street-name{font-size:9px}#city-hud a{font-size:6px}#stream-status{font-size:6px}.controls{margin-top:20px}.menu-copy h1{font-size:54px}.menu-copy p{margin:20px 0}}
.drive-options{flex-wrap:wrap}.drive-options select{min-width:150px}#vehicle-note{color:#d8fa74;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:-5px 0 18px}.menu-copy{max-width:720px}@media(max-width:700px){.menu-copy h1{font-size:48px;margin:18px 0}.menu-copy p{margin:15px 0}.drive-options{margin:14px 0;gap:9px}.drive-options select{min-width:145px;padding:9px 22px 9px 9px}.menu-copy .primary{padding:15px 22px}#vehicle-note{margin:0 0 13px}}

#map-open{pointer-events:auto;padding:0;border:1px solid #64767b;border-radius:10px;overflow:hidden;background:#13232b;color:#d8fa74;cursor:pointer;width:100%}#map-open canvas{display:block;width:100%;height:auto}#map-open span{display:block;padding:7px;font-size:10px;letter-spacing:1px}#city-map{position:fixed;inset:0;z-index:12;background:#10212a;color:#e4eeed;display:flex;flex-direction:column;padding:18px;gap:12px}#city-map[hidden]{display:none}.map-toolbar,.map-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}#world-map{width:100%;flex:1;min-height:120px;touch-action:none;border-radius:10px}#map-districts{display:flex;gap:8px;overflow:auto;flex-shrink:0}#map-districts button{white-space:nowrap}.map-tools{position:absolute;right:30px;top:145px;display:flex;gap:6px}#city-map button{cursor:pointer}#city-map .primary{width:auto;min-width:160px;margin:0;padding:15px}#city-map small{font-size:10px;opacity:.6}#camera-flash{position:fixed;inset:0;pointer-events:none;z-index:20;background:white;opacity:0;transition:opacity .25s}.top-actions{flex-wrap:wrap;justify-content:flex-end}.top-actions button{font-size:10px}@media(max-width:700px){.map-footer{align-items:stretch;flex-direction:column}.top-actions{max-width:240px}#city-map{padding:10px}#map-message{font-size:12px}}

/* Mobile game surface: gestures belong to the game, not the document. */
html,body{width:100%;height:100%;overscroll-behavior:none;touch-action:manipulation}
body{position:fixed;inset:0;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game{height:var(--app-height,100dvh);touch-action:none}
button{touch-action:manipulation}#touch,#touch button{touch-action:none}
.overlay{max-height:var(--app-height,100dvh);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#menu{align-items:safe center}.menu-copy{flex-shrink:0}
#map-districts{touch-action:pan-x;overscroll-behavior:contain}
#city-map{height:var(--app-height,100dvh);padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.touch-help{display:none}#mobile-notice{position:fixed;z-index:30;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));max-width:640px;margin:auto;padding:18px;background:#172c35;border:1px solid #d8fa7480;border-radius:14px;box-shadow:0 8px 40px #0009;font-size:13px;line-height:1.6;display:flex;gap:16px;align-items:center}#mobile-notice button{min-width:48px;min-height:44px;background:#d8fa74;color:#14222b;border:0;border-radius:8px}
#touch button.pressed{background:#d8fa74c9;color:#14222b;border-color:#eaffad;transform:scale(.96)}
.touch-device header{top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
.touch-device .top-actions{gap:6px;max-width:70%;flex-wrap:wrap}
.touch-device .top-actions button{min-height:44px;min-width:44px;padding:8px;font-size:9px;border-radius:9px}
.touch-device #fps,.touch-device .brand small,.touch-device .controls,.touch-device .menu-foot{display:none}
.touch-device .brand{font-size:15px;margin-top:12px;pointer-events:none}
.touch-device .touch-help{display:block;font-size:12px;margin:12px 0;max-width:440px}
.touch-device .overlay{padding:100px max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.touch-device .drive-options select{font-size:16px;min-height:44px;max-width:100%;width:100%;min-width:0;padding:10px}
.touch-device .drive-options label{flex:1 1 155px;min-width:0}
.touch-device #touch{z-index:4;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));gap:12px}
.touch-device #touch>div{gap:8px}.touch-device #touch button{min-width:60px;width:clamp(54px,9vw,84px);height:72px;border-radius:18px;backdrop-filter:blur(6px)}
.touch-device #touch .touch-gas{height:100px}.touch-device #touch .touch-boost,.touch-device #touch-horn{min-width:44px;width:44px;height:44px;font-size:10px}
.touch-device .bottom{bottom:130px;left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right));gap:15px}
.touch-device .speed strong{font-size:48px}.touch-device .speed-track{width:110px}.touch-device .trip{display:none}.touch-device .nitro{width:110px}.touch-device .nitro small,.touch-device .nitro b{display:none}
.touch-device .score-panel{top:110px;left:max(22px,env(safe-area-inset-left))}.touch-device .score-panel strong{font-size:26px}
.touch-device .damage{top:112px;right:max(22px,env(safe-area-inset-right))}
.touch-device #city-hud{top:145px;right:max(22px,env(safe-area-inset-right));width:110px}.touch-device #street-name{font-size:9px;padding:5px}.touch-device #map-open span{font-size:8px}.touch-device #stream-status{font-size:6px}
.touch-device #toast{font-size:14px;max-width:90%;white-space:normal;text-align:center}
@media (orientation:landscape) and (max-height:600px){
 .touch-device header{align-items:center}.touch-device .top-actions{max-width:none;flex-wrap:nowrap}.touch-device .brand{margin:0}
 .touch-device .overlay{padding-top:max(70px,env(safe-area-inset-top));align-items:flex-start}
 .touch-device .menu-copy{width:100%;max-width:850px}.touch-device .menu-copy h1{font-size:35px;margin:10px 0;letter-spacing:-2px}.touch-device .menu-copy h1 br{display:none}.touch-device .menu-copy>p:not(.touch-help){display:none}.touch-device .drive-options{margin:10px 0}.touch-device .touch-help{font-size:11px;margin:8px 0}.touch-device #vehicle-note{display:none}.touch-device #start{padding:12px 18px;min-height:46px}
 .touch-device .score-panel{top:67px}.touch-device .eyebrow{font-size:7px}.touch-device .score-panel strong{font-size:22px}.touch-device #combo{font-size:8px}
 .touch-device .damage{display:none}.touch-device #city-hud{top:64px;width:86px}.touch-device #street-name{font-size:8px;margin-bottom:3px}.touch-device #stream-status,.touch-device #city-hud>a{display:none}
 .touch-device .bottom{bottom:max(20px,env(safe-area-inset-bottom));left:43%;right:38%;display:block;pointer-events:none}.touch-device .speed strong{font-size:37px}.touch-device .speed>span{font-size:7px;margin-left:4px}.touch-device .speed-track{width:85px;margin-top:6px}.touch-device .nitro{width:85px;margin-top:10px}.touch-device .nitro>div{margin:5px 0}
 .touch-device #toast{top:33%;font-size:15px}.touch-device #touch button{height:64px}.touch-device #touch .touch-gas{height:86px}
 .touch-device #city-map{gap:6px}.touch-device .map-footer{flex-direction:row;align-items:center}.touch-device #city-map .primary{padding:10px;min-height:44px}.touch-device #map-message{font-size:11px}.touch-device #city-map small{display:none}.touch-device .map-tools{top:110px;right:max(20px,env(safe-area-inset-right))}
}
@media(max-width:390px) and (orientation:portrait){.touch-device #touch{left:10px;right:10px;gap:6px}.touch-device #touch>div{gap:5px}.touch-device #touch button{min-width:48px;width:48px}.touch-device #touch .touch-boost,.touch-device #touch-horn{width:40px;min-width:40px}.touch-device .brand{font-size:12px}.touch-device .top-actions{max-width:72%}}

#world-map{flex:1 1 0;height:0;min-height:60px}.touch-device #map-districts button,.touch-device .map-toolbar button,.touch-device .map-tools button{min-height:44px;min-width:44px;border:1px solid #ffffff40;background:#1b343e;border-radius:8px;padding:8px}.touch-device #touch button:active{border-color:#d8fa74}

/* Multiplayer menu and player labels. */
.drive-options input{min-width:150px;max-width:210px;background:#13262e;border:1px solid #ffffff45;color:white;padding:11px 12px;font:16px Arial;border-radius:4px;user-select:text;-webkit-user-select:text;touch-action:manipulation}.drive-options input:invalid:not(:placeholder-shown){border-color:#efaa7c}.drive-options select:disabled{opacity:.65}.username-label{flex:1 1 160px}.menu-copy{max-width:850px}#player-labels{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}.player-name{position:absolute;top:0;left:0;background:#0a202ddd;border:1px solid #77d4ff80;border-radius:7px;padding:5px 9px;color:#dcf4ff;font:600 12px Arial;white-space:nowrap;will-change:transform;box-shadow:0 2px 12px #0005}#connection-status{position:fixed;top:88px;left:40px;z-index:5;color:#91deff;font-size:10px;letter-spacing:1px;pointer-events:none;max-width:75%;text-shadow:0 2px 5px #000}.touch-device #connection-status{top:90px;left:max(20px,env(safe-area-inset-left));font-size:8px}.touch-device .drive-options input{max-width:none;width:100%;min-height:44px}.touch-device .player-name{font-size:10px;padding:4px 7px}@media(orientation:landscape) and (max-height:600px){.touch-device #connection-status{top:53px}.touch-device .drive-options{gap:7px}.touch-device .drive-options label{flex:1 1 130px}.touch-device .menu-copy h1{font-size:28px}}

/* Character selection and walking controls. */
#avatar-picker{display:grid;grid-template-columns:145px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;margin:16px 0;max-width:730px}.avatar-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.avatar-preview canvas{width:135px;height:155px;display:block;touch-action:none}.avatar-preview strong{color:#e4f5cb;font-size:14px}.avatar-preview p{font-size:10px;margin:5px 0;line-height:1.4}.avatar-heading{font-size:10px;letter-spacing:1.3px;color:#d8fa74;display:flex;justify-content:space-between;gap:10px;margin:4px 0 10px}.avatar-heading span{color:#a6bec4;font-size:8px}#avatar-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.avatar-choice{border:1px solid #ffffff26;border-radius:9px;background:#142b34;padding:4px;min-height:74px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;touch-action:manipulation}.avatar-choice svg{width:45px;height:45px;display:block}.avatar-choice span{font-size:10px;font-weight:700}.avatar-choice small{font-size:6px;letter-spacing:1px;color:#9db3b9}.avatar-choice[aria-checked=true]{border-color:#d8fa74;background:#314439;box-shadow:inset 0 0 0 1px #d8fa7460}.avatar-choice:focus-visible{outline:2px solid #d8fa74;outline-offset:2px}#walk-action{position:fixed;z-index:4;left:50%;transform:translateX(-50%);bottom:max(160px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:6px}#vehicle-action{background:#15313ce8;border:1px solid #d8fa7490;border-radius:12px;padding:13px 18px;min-height:48px;min-width:180px;font-size:11px;font-weight:bold;letter-spacing:.5px;color:#e4f3c7;touch-action:manipulation}#vehicle-action:disabled{opacity:.65}#car-distance{font-size:10px;color:#ffe0a7;text-shadow:0 2px 5px #000;text-align:center;background:#102731c9;border-radius:6px;padding:4px 8px}#car-distance:empty{display:none}.own-name{border-color:#d8fa7480;color:#e4f5bd;background:#192b24d9;font-size:10px}body[data-on-foot=true] .nitro{visibility:hidden}body:not([data-game-state=playing]) #walk-action{display:none!important}body[data-on-foot=true] #flash-lights{opacity:.45}.menu-copy h1{font-size:clamp(40px,5.6vw,76px);margin:18px 0}.menu-copy>p:not(.touch-help){margin:15px 0}.menu-copy .controls{margin-top:18px;gap:12px}
@media(max-width:650px){#avatar-picker{grid-template-columns:1fr;gap:8px;padding:9px 0;margin:12px 0}.avatar-preview{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px}.avatar-preview canvas{width:82px;height:100px}.avatar-preview p{font-size:11px}.avatar-heading{font-size:9px}.avatar-choice svg{width:38px;height:38px}.avatar-choice span{font-size:9px}.avatar-choice{min-height:68px}#walk-action{bottom:210px}#vehicle-action{min-width:156px;padding:11px 14px;font-size:10px}}
@media(orientation:landscape) and (max-height:600px){.touch-device #avatar-picker{grid-template-columns:100px minmax(0,1fr);gap:10px;margin:9px 0}.touch-device .avatar-preview{flex-direction:column;text-align:center;gap:0}.touch-device .avatar-preview canvas{width:80px;height:100px}.touch-device .avatar-preview p{font-size:8px}.touch-device #avatar-choices{gap:4px}.touch-device .avatar-choice{min-height:61px}.touch-device .avatar-choice svg{width:33px;height:33px}.touch-device .avatar-choice small{display:none}.touch-device #walk-action{bottom:max(130px,env(safe-area-inset-bottom))}.touch-device #vehicle-action{min-height:44px;min-width:150px;padding:10px}.touch-device #car-distance{font-size:8px}.touch-device .touch-help{max-width:none}}
body[data-on-foot=true] #walk-action{left:max(22px,env(safe-area-inset-left));transform:none;align-items:flex-start}

/* Compact two-step onboarding; game controls stay outside the scrollable card. */
#menu{align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#08171cc7;backdrop-filter:blur(7px)}
#menu .onboarding-card{width:min(720px,100%);max-width:720px;max-height:calc(var(--app-height,100dvh) - 24px);display:flex;flex-direction:column;background:linear-gradient(150deg,#203741f5,#0f232cf5);border:1px solid #9fc7c52d;border-radius:22px;padding:20px;box-shadow:0 24px 80px #0005;min-height:0}
.onboarding-brand{font-weight:900;letter-spacing:-.8px;font-size:21px;line-height:1.2}.onboarding-brand>span{color:#d8fa74}.onboarding-brand small{display:block;letter-spacing:2px;font-size:8px;color:#a6c3c8;margin-top:5px;font-weight:400}.onboarding-tabs{display:flex;gap:8px;margin:14px 0}.onboarding-tabs button{border:0;border-radius:7px;background:#152832;color:#97b1b9;flex:1;padding:10px;font-size:10px;letter-spacing:1px}.onboarding-tabs button[aria-current=step]{background:#d8fa741a;color:#d8fa74;box-shadow:inset 0 -2px #d8fa74}.onboarding-content{min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;padding:1px 2px}.onboarding-footer{display:flex;align-items:center;gap:16px;padding-top:13px;margin-top:auto}.onboarding-footer .primary{flex:1;min-width:0;padding:14px 18px;border-radius:11px;min-height:48px}.onboarding-footer .secondary{min-width:60px;min-height:44px}.onboarding-content .username-label{font-size:8px;letter-spacing:1.5px;color:#b2c9ce;display:flex;gap:8px;align-items:center}.onboarding-content #username{font-size:16px;min-height:44px;padding:10px 12px;flex:1;min-width:0;max-width:none;border:1px solid #99bbc74a;border-radius:8px;background:#0f252e;color:white;user-select:text;-webkit-user-select:text}.onboarding-content #avatar-picker{margin:10px 0 0;padding:8px 0 0;border-bottom:0;grid-template-columns:115px minmax(0,1fr);gap:12px}.onboarding-content .avatar-preview canvas{width:105px;height:135px}.onboarding-content .avatar-preview p{font-size:9px;margin:5px 0}.onboarding-content .avatar-preview strong{font-size:12px}.onboarding-content .avatar-choice{min-height:65px}.onboarding-content .avatar-choice svg{width:35px;height:35px}.onboarding-content .avatar-heading{font-size:8px}.onboarding-content .ride-title{font-size:27px;letter-spacing:-1px;margin:4px 0}.onboarding-content .ride-caption,.onboarding-content .join-hint{font-size:11px;line-height:1.6;margin:8px 0;color:#b5c9ce}.onboarding-content .drive-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.onboarding-content .drive-options select{width:100%;min-width:0;max-width:none;border-radius:8px;font-size:14px;padding:12px}.onboarding-content #vehicle-note{font-size:10px;margin:10px 0}
body[data-game-state=menu] header{display:none}
#steering-pad{width:112px;height:112px;border:1px solid #d8eeeb44;border-radius:50%;background:radial-gradient(circle,#a4c9c912,#112832b8);position:relative;pointer-events:auto;touch-action:none;box-shadow:inset 0 0 25px #0004;display:flex;align-items:center;justify-content:center}#steering-nub{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#c3d8ce77,#668a8d66);border:1px solid #e4f7dd88;box-shadow:0 4px 15px #0005;pointer-events:none;will-change:transform}#steering-label{position:absolute;bottom:7px;font-size:7px;letter-spacing:1.5px;color:#d9efec;pointer-events:none}
.touch-device #touch{bottom:max(15px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));align-items:flex-end}.touch-device #touch .steer-cluster{position:relative;display:block}.touch-device #touch-horn{position:absolute;left:117px;bottom:5px;width:44px;min-width:44px;height:44px;border-radius:50%;font-size:8px}.touch-device #touch .pedal-cluster{position:relative;display:flex;align-items:flex-end;gap:12px;padding-left:38px}.touch-device #touch .touch-gas{height:100px;width:75px;min-width:75px;border-radius:20px 20px 15px 15px;background:linear-gradient(160deg,#c7e77980,#709b4870);font-size:15px;letter-spacing:1px}.touch-device #touch .touch-brake{width:57px;min-width:57px;height:68px;background:#32434bc9;border-radius:14px;font-size:10px}.touch-device #touch .touch-boost{position:absolute;left:-8px;bottom:78px;width:54px;min-width:54px;height:36px;border-radius:18px;font-size:8px;background:#213d42c9;color:#d8fa74}
.touch-device #walk-action{left:max(20px,env(safe-area-inset-left));bottom:150px;transform:none;align-items:flex-start}.touch-device #vehicle-action{min-width:150px;min-height:44px;font-size:9px}.touch-device header{gap:10px}.touch-device .top-actions{gap:5px;max-width:76%}.touch-device .top-actions button{min-width:38px;min-height:38px;padding:7px;font-size:8px}.touch-device #camera-reset{letter-spacing:0}.touch-device .brand{font-size:12px}
@media(max-width:650px){#menu .onboarding-card{padding:14px;border-radius:16px}.onboarding-content #avatar-picker{grid-template-columns:80px minmax(0,1fr);gap:7px}.onboarding-content .avatar-preview{flex-direction:column;text-align:center;gap:0}.onboarding-content .avatar-preview canvas{width:75px;height:112px}.onboarding-content .avatar-preview p{font-size:8px}.onboarding-content .avatar-choice svg{width:29px;height:29px}.onboarding-content .avatar-choice{min-height:59px;padding:3px;gap:2px}.onboarding-content .avatar-choice span{font-size:8px}.onboarding-content .avatar-choice small,.onboarding-content .avatar-heading span{display:none}.onboarding-content #avatar-choices{gap:4px}.onboarding-content .avatar-heading{font-size:7px;letter-spacing:.6px}.onboarding-content .username-label{flex-direction:column;align-items:stretch;gap:6px}.onboarding-content .drive-options select{font-size:16px}.touch-device .bottom{bottom:150px}.touch-device #city-hud{width:90px}}
@media(orientation:landscape) and (max-height:500px){#menu .onboarding-card{width:min(660px,100%);padding:10px 15px;border-radius:13px;max-height:calc(var(--app-height,100dvh) - 12px)}.onboarding-brand{font-size:15px;display:flex;gap:0;align-items:center}.onboarding-brand small{margin:0 0 0 14px;font-size:7px}.onboarding-tabs{margin:7px 0;gap:5px}.onboarding-tabs button{padding:7px;min-height:30px}.onboarding-content .username-label{flex-direction:row;align-items:center;font-size:7px}.onboarding-content #username{min-height:36px;padding:7px 10px}.onboarding-content #avatar-picker{grid-template-columns:80px minmax(0,1fr);margin-top:6px;padding-top:5px}.onboarding-content .avatar-preview canvas{width:66px;height:80px}.onboarding-content .avatar-preview p{display:none}.onboarding-content .avatar-choice{min-height:48px}.onboarding-content .avatar-choice svg{width:25px;height:25px}.onboarding-content .avatar-choice small{display:none}.onboarding-content .avatar-heading{margin:0 0 5px}.onboarding-footer{padding-top:8px;gap:10px}.onboarding-footer .primary{padding:9px 16px;min-height:40px;font-size:10px}.onboarding-content .ride-title{font-size:22px}.onboarding-content .drive-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0}.onboarding-content .drive-options select{font-size:12px;padding:9px;min-height:38px}.onboarding-content .ride-caption{margin:4px 0}.onboarding-content #vehicle-note{margin:7px 0}.onboarding-content .join-hint{font-size:9px;margin:6px 0}.touch-device #steering-pad{width:102px;height:102px}.touch-device #touch .touch-gas{height:86px;width:70px;min-width:70px}.touch-device #touch .touch-brake{height:62px}.touch-device #touch .touch-boost{bottom:72px}.touch-device #touch-horn{left:108px}.touch-device .bottom{bottom:max(16px,env(safe-area-inset-bottom));left:43%;right:38%}.touch-device #walk-action{bottom:132px}.touch-device #city-hud{width:80px;top:57px}.touch-device #street-name{font-size:7px}.touch-device #connection-status{top:49px;font-size:7px}}
@media(max-width:650px) and (orientation:portrait){.touch-device #touch{left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}.touch-device #steering-pad{width:96px;height:96px}.touch-device #touch-horn{left:0;bottom:108px;width:40px;min-width:40px;height:40px}.touch-device #touch .pedal-cluster{padding-left:20px;gap:10px}.touch-device #touch .touch-gas{width:66px;min-width:66px;height:94px}.touch-device #touch .touch-brake{width:48px;min-width:48px;height:64px}.touch-device #touch .touch-boost{left:0;bottom:108px;width:54px;min-width:54px;height:36px}.touch-device #walk-action{top:175px;bottom:auto;left:max(14px,env(safe-area-inset-left))}.touch-device #vehicle-action{min-width:140px;max-width:155px;font-size:8px;padding:10px}.touch-device .bottom{bottom:160px}.touch-device .top-actions{max-width:calc(100% - 90px)}}