
/* Input layout is explicit, including hybrid touch + controller devices. */
body.touch-active #touch-controls{display:block}
body.controls-hidden #touch-controls,body.controls-hidden .inspect-touch{display:none!important}
body.touch-active .inspect-touch{display:flex}
body.touch-active #driving-legend{display:none}
body.touch-active .touch-left{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
body.touch-active .touch-right{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));display:flex;gap:10px;align-items:flex-end}
body.touch-active .touch-utility{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:142px;display:flex;gap:8px}
body.touch-active #touch-controls button{color:#fff;background:#132d40d9;border:1px solid #adcfda99;border-radius:12px;font-size:14px;letter-spacing:0;min-width:44px;min-height:44px;touch-action:none;box-shadow:none;backdrop-filter:none}
body.touch-active #touch-steer{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;pointer-events:auto}
#touch-steer i{position:absolute;display:block;width:36px;height:36px;top:calc(50% - 18px);left:calc(50% - 18px);border-radius:50%;background:#74ecdcaa;pointer-events:none}
#touch-steer span{position:absolute;bottom:10px;left:0;right:0;text-align:center;pointer-events:none;font-size:14px}
body.touch-active #touch-controls [data-analog=pedal]{background:linear-gradient(to top,#287f75 calc(var(--input,0)*100%),#132d40d9 calc(var(--input,0)*100%));transform:none}
body.touch-active .touch-right .pedal{width:58px;height:118px;padding:6px}
body.touch-active .touch-right .pedal i{display:none}
body.touch-active .touch-left .clutch{width:112px;height:48px}
body.touch-active .shifts{position:absolute;right:0;bottom:182px;display:flex;flex-direction:row;gap:8px}
body.touch-active .shifts button{width:60px;padding:4px;height:44px}
body.touch-active .touch-utility button{padding:8px;min-height:44px}
body.touch-active .direction-controls{bottom:196px;right:12px}
body.touch-active .direction-controls button{width:44px;min-height:44px}
body.touch-active #speedo{top:auto;bottom:260px;right:12px}
body.touch-active #speed-limit{top:auto;bottom:325px;right:12px}
body.touch-active #map-button:not(.expanded){bottom:202px;left:12px}
body.on-foot .direction-controls,body.on-foot .touch-right{display:none}
body.on-foot .touch-utility{bottom:20px}
body.map-open #touch-controls{visibility:hidden}
#hud-more{min-height:44px}
#fps-counter{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:6px 9px;color:#baffec;background:#102735e8;border-radius:5px;font:14px/1.2 monospace}
#game-version{display:inline-block;font-size:14px;letter-spacing:0;color:#e2f4f5}
#menu .menu-details{display:flex}
.inspect-diagnostics{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100% - 28px);background:#102735ed;border:1px solid #91bfd366;border-radius:6px;z-index:2;touch-action:pan-y}
.inspect-diagnostics summary{cursor:pointer;padding:12px 14px;min-height:44px;font-size:14px;color:#cafff2}
.inspect-diagnostics .inspect-status{position:static;transform:none;max-width:100%;max-height:36dvh;overflow:auto;background:none;padding:0 14px 12px;font-size:13px;pointer-events:auto;overflow-wrap:anywhere}
body.touch-active .inspect-diagnostics{bottom:155px}
body.touch-active .inspect-top>div{max-width:55%}
body.touch-active .inspect-top span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.touch-active .inspect-pad{width:108px;height:108px}
body.touch-active .inspect-altitude button{font-size:14px;min-width:64px;min-height:44px}
body.touch-active .inspect-tools{z-index:4}
body.gamepad-active .inspect-touch{display:none}
body.controls-hidden .inspect-diagnostics{bottom:16px}
body.compact-hud .top-left{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));max-width:calc(100vw - 150px)}
body.compact-hud .mission{margin-top:6px;max-width:260px;padding-left:10px}
body.compact-hud .mission h2{font-size:16px;line-height:1.3;margin:4px 0}
body.compact-hud .district{font-size:12px;letter-spacing:.03em;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.compact-hud .top-right{right:12px;top:max(10px,env(safe-area-inset-top));min-width:106px}
body.compact-hud #stars{font-size:20px}
body.compact-hud #cash{font-size:20px;margin:2px 0 5px}
body.compact-hud .health-label{font-size:12px;letter-spacing:0;gap:8px}
body.compact-hud .health-track{display:block}
body.compact-hud #escape-text{position:static;font-size:12px;max-width:130px;min-height:0;margin-top:4px}
body.compact-hud .tools{top:120px;right:12px;gap:6px;z-index:2}
body.compact-hud .tools button{font-size:14px;min-height:44px;padding:8px}
body.compact-hud:not(.hud-expanded) .mission>span,body.compact-hud:not(.hud-expanded) .mission p,body.compact-hud:not(.hud-expanded) #radio,body.compact-hud:not(.hud-expanded) #gadgets,body.compact-hud:not(.hud-expanded) #sound,body.compact-hud:not(.hud-expanded) #camera,body.compact-hud:not(.hud-expanded) #garage,body.compact-hud:not(.hud-expanded) #vehicle-name,body.compact-hud:not(.hud-expanded) #launch-hint,body.compact-hud:not(.hud-expanded) #touch-controls [data-action=ignition]{display:none}
body.compact-hud.hud-expanded #radio{left:12px;top:166px;bottom:auto;transform:none;width:190px;padding:8px;z-index:2}
body.compact-hud.hud-expanded #gadgets{left:12px;top:242px;bottom:auto;transform:none;gap:6px;z-index:2}
body.compact-hud #gadgets button{min-height:44px;font-size:14px;padding:8px}
body.compact-hud #radio button{min-height:44px;font-size:14px}
body.compact-hud #radio #track-name{font-size:14px}
body.compact-hud .mission p{font-size:14px}
body.compact-hud #speedo{gap:8px;background:#102735d9;padding:8px;border-radius:6px}
body.compact-hud .gear-block{min-width:38px;padding-right:8px}
body.compact-hud .gear-block>span{font-size:30px}
body.compact-hud .gear-block label{font-size:12px;letter-spacing:0}
body.compact-hud #speed{font-size:36px}
body.compact-hud .speed-block>div span{font-size:12px}
body.compact-hud .rev-track{width:120px;margin-top:6px}
body.compact-hud .speed-block p{display:none}
body.compact-hud #speed-limit{gap:6px}
body.compact-hud #radar-warning{font-size:12px;letter-spacing:0;max-width:115px}
body.compact-hud #speed-limit b{min-width:36px;height:36px;font-size:20px}
body.compact-hud #map-button:not(.expanded){width:108px;height:130px}
body.compact-hud #map-button:not(.expanded) #minimap{width:108px;height:108px}
body.compact-hud .map-caption{font-size:12px;letter-spacing:0;height:22px}
body.compact-hud .map-caption span{display:none}
body.compact-hud #toast{font-size:14px;top:32%;padding:8px 12px}
body.compact-hud #ram-status{top:22%;font-size:12px}
body.gamepad-active .direction-controls,body.gamepad-active #driving-legend{display:none}
body.map-open #hud>:not(#map-button):not(#map-tools):not(#map-backdrop){visibility:hidden}
#control-layout{max-width:190px}
#pause-screen .graphics-check{display:flex;gap:10px;align-items:center;font-size:16px;min-height:44px;text-align:left}
@media(orientation:landscape) and (max-height:600px){
 body.compact-hud .top-left{max-width:30vw}
 body.compact-hud .mission{max-width:220px}
 body.compact-hud .tools{top:12px;right:148px}
 body.compact-hud #speedo{bottom:12px;top:auto;right:50%;transform:translateX(50%)}
 body.compact-hud #speed-limit{top:100px;bottom:auto;right:12px}
 body.compact-hud #map-button:not(.expanded){left:12px;bottom:142px;width:88px;height:110px}
 body.compact-hud #map-button:not(.expanded) #minimap{width:88px;height:88px}
 body.compact-hud .rev-track{width:96px}
 body.compact-hud .direction-controls{bottom:194px}
 body.compact-hud.hud-expanded #radio{top:72px;left:32%;width:180px}
 body.compact-hud.hud-expanded #gadgets{top:158px;left:32%}
 body.compact-hud.hud-expanded .mission p{max-height:72px;overflow:auto}
 body.compact-hud #toast{top:39%;max-width:46%}
 body.compact-hud #ram-status{top:29%}
 body.touch-active .inspect-diagnostics{left:50%;transform:translateX(-50%);bottom:64px;max-width:50vw}
 body.touch-active .inspect-altitude{right:120px}
 .inspect-diagnostics .inspect-status{max-height:30dvh}
 body.touch-active .inspect-tools{top:88px;max-width:280px}
}

body.touch-active #touch-controls #touch-steer{border-radius:50%}
body.compact-hud .health-label{display:flex}
body.compact-hud #launch-hint{display:none}
body.compact-hud .map-caption{justify-content:center;white-space:nowrap}
@media(orientation:portrait){
 body.compact-hud #map-button:not(.expanded){top:178px;bottom:auto}
 body.compact-hud #speedo{top:178px;bottom:auto}
 body.compact-hud #speed-limit{top:252px;bottom:auto}
 body.compact-hud.hud-expanded #radio{top:316px}
 body.compact-hud.hud-expanded #gadgets{top:400px}
 body.compact-hud.hud-expanded .tools{max-width:calc(100vw - 24px);flex-wrap:wrap;justify-content:flex-end}
}

/* Keep optional telemetry clear of long road names on narrow screens. */
@media(orientation:portrait){body.compact-hud #fps-counter{top:100px;left:12px;transform:none}}
.inspect-tools:not([open]){width:max-content;max-width:calc(100% - 28px)}

.map-center-cursor{display:none}
body.gamepad-active.map-open .map-center-cursor{display:block;position:absolute;left:50%;top:calc(50% - 11px);transform:translate(-50%,-50%);color:#fff;text-shadow:0 1px 3px #000;font-size:28px;pointer-events:none}

@media(orientation:landscape) and (max-height:600px){
 body.compact-hud.touch-active[data-driving-mode=manual] #map-button:not(.expanded){left:136px;bottom:12px}
}
@media(orientation:portrait){
 body.compact-hud.hud-expanded .touch-utility [data-action=ignition]{position:fixed;left:12px;right:auto;bottom:194px}
}

@media(orientation:landscape) and (max-height:600px){
 body.compact-hud #fps-counter{top:auto;bottom:12px;left:auto;right:148px;transform:none}
}

.release-label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
#game-build-date{font-size:14px;letter-spacing:0;color:#e2f4f5}
#game-build-date::before{content:"\00b7";margin-right:6px}
#menu .menu-details{flex-wrap:wrap}

.controller-dialog{width:min(720px,100%);padding:18px;background:#132638;border:1px solid #7894a4;border-radius:8px;text-align:left}
.controller-dialog h2{font-size:32px;margin:0 0 12px}.controller-dialog p{font-size:14px;line-height:1.45}
.controller-dialog select{max-width:100%;min-width:0}.controller-dialog .driving-setting{flex-wrap:wrap}
.binding-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,1.5fr) auto;align-items:center;gap:8px;padding:7px 0;border-top:1px solid #ffffff25;font-size:14px}
.controller-dialog button{min-height:44px;padding:8px 10px;border-radius:5px;background:#274657;color:#fff;font-size:14px;letter-spacing:0}
.controller-dialog .primary{background:#48e3db;color:#102733}
#controller-learning{position:sticky;top:0;background:#183d49;border:1px solid #65cfca;padding:12px;border-radius:6px;z-index:1}
#controller-learning h3{font-size:18px;margin:0}.mapping-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#controller-live{font:13px/1.4 monospace;overflow-wrap:anywhere;color:#9ae6de}
#controller-deadzone{width:70px;padding:8px;font-size:16px}
@media(max-width:480px){.binding-row{grid-template-columns:1fr auto}.binding-row>span{grid-column:1/-1}.controller-dialog{padding:12px}.controller-dialog .driving-setting{display:block}}

#load-progress{display:block;width:min(330px,100%);height:10px;accent-color:#48e3db;margin:8px 0}
#load-detail{font-size:13px;line-height:1.4;color:#d9e8ea;margin:5px 0 12px;max-width:370px}

body.touch-active #touch-controls button.pressed:not([data-analog]){background:#48e3db;color:#102733;border-color:#c3fff5}

@media(max-height:560px) and (min-width:601px){#menu .intro{display:none}#menu #load-status{margin:7px 0}#load-detail{margin:4px 0 8px}}
@media(max-width:600px) and (max-height:740px){
 #menu .menu-content{top:18px}
 #menu h1{font-size:60px;margin-bottom:12px}
 #menu .intro{display:none}
 #menu #load-status{margin:8px 0;font-size:13px;line-height:1.35}
 #menu .menu-launch button{min-height:44px;padding:10px 14px;font-size:14px}
 #menu .menu-footer>span{display:none}
}
