/* Racing HUD and touch regions / 0.5.1 / Unclecow. Loaded after desktop styles. */
#touchControls{display:none}
#touchControls[hidden]{display:none!important}
.mobile-racing{--mobile-left:max(12px,env(safe-area-inset-left));--mobile-right:max(12px,env(safe-area-inset-right));--mobile-top:max(8px,env(safe-area-inset-top));--mobile-bottom:max(12px,env(safe-area-inset-bottom));overscroll-behavior:none}
.mobile-racing canvas{touch-action:none}
.mobile-racing #touchControls{display:block;position:fixed;inset:0;z-index:8;pointer-events:none}
.mobile-racing #touchControls>div{position:absolute;display:flex;gap:8px;align-items:flex-end;pointer-events:none}
.mobile-racing #touchControls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;min-width:48px;min-height:48px;padding:8px;border:1px solid #ffffff60;border-radius:2px;background:#181818c9;color:#fff;font:13px/1.2 "Microsoft YaHei UI",sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:none}
.mobile-racing #touchControls button[data-pressed=true]{background:#8e211aee;border-color:#f9b3ac}
.mobile-racing #touchControls button:disabled{opacity:.45}
.mobile-racing #touchControls small{font-size:10px;color:#ccc}
.mobile-racing #touchControls .steeringControls{left:var(--mobile-left);bottom:var(--mobile-bottom)}
.mobile-racing #touchControls .steeringControls button{width:56px;height:64px}
.mobile-racing #touchControls .steeringControls span{font:40px/1 Arial,sans-serif}
.mobile-racing #touchControls .pedalControls{right:var(--mobile-right);bottom:var(--mobile-bottom)}
.mobile-racing #touchControls .brakeControl{width:60px;height:76px}
.mobile-racing #touchControls .throttleControl{width:68px;height:92px;background:#da291cbc;border-color:#f58a80}
.mobile-racing #touchControls .throttleControl span{font:32px/1 Arial,sans-serif}
.mobile-racing #touchControls .utilityControls{left:var(--mobile-left);bottom:calc(var(--mobile-bottom) + 84px);display:grid;grid-template-columns:repeat(2,48px)}
.mobile-racing.soloDrive #touchControls .itemControl,.mobile-racing.cleanRace #touchControls .itemControl{display:none}
.mobile-racing .topbar{top:var(--mobile-top);left:var(--mobile-left);right:var(--mobile-right);display:flex;align-items:center;gap:8px;min-height:48px}
.mobile-racing .position{min-width:48px;padding-left:8px;flex:none}
.mobile-racing .position small{font-size:9px;letter-spacing:0}
.mobile-racing .position strong,.mobile-racing.soloDrive .position strong{font-size:24px;letter-spacing:0;line-height:1.1;margin:0}
.mobile-racing .position strong span{font-size:11px;margin-left:3px}
.mobile-racing.soloDrive .position small{display:none}
.mobile-racing.soloDrive .position strong{font-size:18px}
.mobile-racing .raceMeta{min-width:0;flex:1;gap:3px;padding:0}
.mobile-racing .raceMeta span,.mobile-racing .raceMeta b,.mobile-racing .raceMeta time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;line-height:1.25;font-size:11px}
.mobile-racing .raceMeta span{font-size:12px;font-weight:600}
.mobile-racing .topbar #cameraButton,.mobile-racing .topbar #pauseButton{flex:none;pointer-events:auto;min-width:44px;width:44px;height:44px;min-height:44px;margin:0;padding:0;background:#181818c9}
.mobile-racing .topbar #cameraButton{font-size:0}
.mobile-racing .topbar #cameraButton::after{content:"视角";font-size:11px}
.mobile-racing .topbar #pauseButton{font-size:18px}
.mobile-racing #radioPanel{left:var(--mobile-left);right:var(--mobile-right);top:calc(var(--mobile-top) + 58px);max-width:none;height:44px;padding:0 4px 0 8px;gap:4px;box-sizing:border-box;background:#191919bd}
.mobile-racing #radioPanel>div{min-width:0;flex:1}
.mobile-racing #radioPanel small{font-size:9px;line-height:1.2}
.mobile-racing #radioPanel b{max-width:100%;font-size:11px;line-height:1.3;margin-top:3px}
.mobile-racing #radioPanel button{flex:none;width:44px;min-height:44px;height:44px;border:0;background:transparent}
.mobile-racing #radioVolume{display:none}
.mobile-racing #brakePedal{left:var(--mobile-left);right:auto;top:calc(var(--mobile-top) + 116px);bottom:auto;width:152px;height:48px;box-sizing:border-box;grid-template-columns:26px minmax(0,1fr);gap:6px;padding:4px 6px;background:#191919b3}
.mobile-racing .brakePedalGraphic{width:26px;height:40px}
.mobile-racing .brakePedalReadout{padding-top:0;min-width:0}
.mobile-racing .brakePedalReadout>small{position:static;font-size:9px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-racing .brakePedalValue{gap:3px;margin:3px 0}
.mobile-racing .brakePedalValue strong{font-size:18px}
.mobile-racing .brakePedalValue span{font-size:8px}
.mobile-racing #brakeForceTrack{height:3px}
.mobile-racing #brakePedalHint{display:none}
.mobile-racing .bottomHud{display:contents}
.mobile-racing .mapPanel{position:absolute;right:var(--mobile-right);left:auto;top:calc(var(--mobile-top) + 116px);bottom:auto;width:88px!important;padding:0;filter:drop-shadow(0 1px 2px #000);transform:none}
.mobile-racing .mapPanel #map{width:100%;height:90px!important}
.mobile-racing .mapHeading{font-size:8px;letter-spacing:0;margin-bottom:2px}
.mobile-racing .mapHeading span,.mobile-racing .mapLegend{display:none}
.mobile-racing #soloStats{position:absolute;left:var(--mobile-left);right:auto;top:calc(var(--mobile-top) + 178px);bottom:auto;margin:0;padding:5px 8px;gap:12px;background:#19191980;border:0}
.mobile-racing #soloStats small{font-size:10px;margin-bottom:3px}
.mobile-racing #soloStats b{font-size:14px;color:#fff}
.mobile-racing #soloStats>div:last-child{display:none}
.mobile-racing .speedPanel{position:absolute;right:var(--mobile-right);bottom:calc(var(--mobile-bottom) + 176px);margin:0!important;min-width:80px!important;width:88px;box-sizing:border-box;padding:6px 8px!important;background:#171717a6}
.mobile-racing .speedPanel::before{font-size:9px}
.mobile-racing .speedPanel strong{display:block;font-size:38px!important;line-height:1;letter-spacing:-1px}
.mobile-racing .speedPanel>span{font-size:9px}
.mobile-racing .speedPanel .speedBar{margin:4px 0;height:2px}
.mobile-racing .speedPanel small,.mobile-racing .speedPanel br{display:none}
.mobile-racing #driftMeter{left:var(--mobile-left);bottom:calc(var(--mobile-bottom) + 176px);transform:none;width:136px;text-align:left}
.mobile-racing #driftLabel{font-size:9px;letter-spacing:0}
.mobile-racing:not(.soloDrive):not(.cleanRace) #driftMeter{bottom:calc(var(--mobile-bottom) + 304px)}
.mobile-racing .itemPanel{position:absolute;left:var(--mobile-left);bottom:calc(var(--mobile-bottom) + 208px);min-width:0;max-width:none;width:116px;margin:0;padding:0;background:none;border:0}
.mobile-racing .itemSlots{gap:6px;margin:0}
.mobile-racing .itemSlots>span,.mobile-racing .itemSlots>span.selected{width:54px;height:52px;flex:0 0 54px;padding:0;box-sizing:border-box}
.mobile-racing .itemSlots .itemModel,.mobile-racing .itemSlots .selected .itemModel{width:50px;height:50px}
.mobile-racing .itemSlots .slotHint,.mobile-racing .itemCaption,.mobile-racing #itemTip{display:none}
.mobile-racing #status{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-racing #center{top:34%;left:12px;right:12px}
.mobile-racing #countdown{font-size:64px}
.mobile-racing #notice{font-size:12px;letter-spacing:0}
.mobile-racing #spectacleCaption{display:none}
.mobile-racing #threatWarning{top:28%;font-size:11px;max-width:85%}
.mobile-racing #nameplates{clip-path:inset(240px 8px 324px)}
.mobile-racing .modal{padding:12px;box-sizing:border-box}
.mobile-racing .modal .panel{width:min(560px,100%);max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:18px}
.mobile-racing input,.mobile-racing select{font-size:16px}
.mobile-racing #lobby footer>span:first-child{font-size:0}
.mobile-racing #lobby footer>span:first-child::after{content:"触控驾驶 · 横屏视野更开阔";font-size:11px}
.mobile-racing #lobby footer kbd{display:none}
.mobile-racing #lobby .trackStepper button{min-width:44px;min-height:44px}
.mobile-racing #lobby .colorPicker button{min-width:28px;min-height:32px}
@media(max-width:360px){
 .mobile-racing #touchControls .steeringControls button{width:44px;min-width:44px}
 .mobile-racing #touchControls .brakeControl{width:44px;min-width:44px}
 .mobile-racing #touchControls .throttleControl{width:56px}
 .mobile-racing #touchControls .utilityControls{grid-template-columns:repeat(2,44px)}
 .mobile-racing #touchControls .utilityControls button{min-width:44px}
}
@media(orientation:landscape){
 .mobile-racing #nameplates{clip-path:inset(132px 132px 100px)}
 .mobile-racing .raceMeta{flex:0 1 280px}
 .mobile-racing #cameraButton{margin-left:auto!important}
 .mobile-racing #radioPanel{left:50%;right:auto;top:calc(var(--mobile-top) + 58px);transform:translateX(-50%);width:min(240px,32vw)}
 .mobile-racing #brakePedal{top:calc(var(--mobile-top) + 58px)}
 .mobile-racing .mapPanel{top:calc(var(--mobile-top) + 58px);width:72px!important}
 .mobile-racing .mapPanel #map{height:72px!important}
 .mobile-racing #soloStats{top:calc(var(--mobile-top) + 116px)}
 .mobile-racing .speedPanel{right:calc(var(--mobile-right) + 152px);bottom:var(--mobile-bottom)}
 .mobile-racing #touchControls .utilityControls{bottom:calc(var(--mobile-bottom) + 84px)}
 .mobile-racing #touchControls .steeringControls button{height:60px}
 .mobile-racing #touchControls .throttleControl{height:84px}
 .mobile-racing #touchControls .brakeControl{height:70px}
 .mobile-racing #driftMeter,.mobile-racing:not(.soloDrive):not(.cleanRace) #driftMeter{left:50%;bottom:var(--mobile-bottom);transform:translateX(-50%);width:128px;text-align:center}
 .mobile-racing .itemPanel{left:calc(var(--mobile-left) + 136px);bottom:var(--mobile-bottom)}
 .mobile-racing #center{top:38%}
 .mobile-racing #countdown{font-size:48px}
 .mobile-racing #lobby.showroomLobby{padding-left:var(--mobile-left);padding-right:var(--mobile-right)}
}