/* r51: feedback shares one edge stack, with a compact cockpit on short screens. */
body.playing .health{--impact-space:0px;--pickup-space:0px;--feedback-width:190px}
body.playing .health:has(#damageStatus:not([hidden])){--impact-space:72px}
body.playing .health:has(#pickupStatus:not([hidden])){--pickup-space:30px}
body.playing .health #damageStatus,
body.playing .health #pickupStatus,
body.playing .health #hazardStatus{left:0;right:auto;transform:none!important;width:var(--feedback-width);min-width:0;max-width:var(--feedback-width);margin:0;box-sizing:border-box;overflow-wrap:anywhere}
body.playing .health #damageStatus{top:calc(100% + 8px);min-height:60px;padding:5px 8px;display:grid;align-content:center;gap:2px;text-align:left}
body.playing .health #damageStatus>span{font-size:10px;line-height:1.4;letter-spacing:0}
body.playing .health #damageStatus>strong{font-size:15px!important;line-height:1.3}
body.playing .health #damageStatus>em{font-size:9px;line-height:1.4}
body.playing .health #pickupStatus{top:calc(100% + 8px + var(--impact-space));min-height:24px;padding:3px 8px;font-size:10px;line-height:1.4;white-space:normal}
body.playing .health #hazardStatus{position:absolute;top:calc(100% + 8px + var(--impact-space) + var(--pickup-space));gap:4px}
body.playing .hazard-effect{grid-template-columns:minmax(0,1fr) auto;min-width:0}
body.playing .hazard-effect strong{min-width:0;white-space:normal;overflow-wrap:anywhere}
body.playing .cockpit-dial #speed{line-height:1.2;top:39px}
body.playing #jetStatus{box-sizing:border-box}
body.playing #jetStatus>div{gap:6px;min-width:0}
body.playing #jetStatus>div>span{min-width:0;overflow-wrap:anywhere}
body.playing #jetStatus strong{flex:none}
body.playing #jetStatus small{overflow-wrap:anywhere}
body.playing #touch #jetControls button{min-width:44px;box-sizing:border-box}
body.playing .jet-button-label{max-width:100%;white-space:normal;overflow-wrap:normal}
body.playing #reviveShield{max-width:calc(100vw - 32px);white-space:normal;text-align:center;box-sizing:border-box}
body.playing #stripStatus{left:0;top:auto;bottom:calc(100% + 8px);transform:none;max-width:170px;white-space:normal}
body.playing #pickupStatus:not([hidden]),body.playing #stripStatus:not([hidden]){animation:race-feedback-in 180ms ease-out;translate:none}
@keyframes race-feedback-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.playing #pickupStatus:not([hidden]),body.playing #stripStatus:not([hidden]){animation:none}}
@media(min-width:651px) and (max-height:650px) and (pointer:fine){
 body.playing .cockpit-dial.telemetry{width:148px}
}

@media(pointer:coarse),(max-width:650px){
 body.playing .health{--feedback-width:162px}
 body.playing .cockpit-dial #speed{top:28px}
 body.playing .health #damageStatus{min-height:56px;padding:4px 6px}
 body.playing .health:has(#damageStatus:not([hidden])){--impact-space:68px}
 body.playing .health #damageStatus>strong{font-size:14px!important}
 body.playing .health #hazardStatus .hazard-effect{padding:3px 6px}
 body.playing #reviveShield{top:max(156px,calc(env(safe-area-inset-top) + 146px))}
}

@media(max-width:360px) and (orientation:portrait){
 body.playing .health{--feedback-width:154px}
 body.playing .hazard-effect strong,
 body.playing .hazard-effect b{font-size:9px!important;line-height:13px!important}
 body.playing .health #hazardStatus .hazard-effect{padding:2px 5px}
 body.playing .cockpit-dial.telemetry,
 body.playing[data-vehicle=roadster] .cockpit-dial.telemetry{width:100px;height:64px;bottom:calc(var(--drive-bottom) + 152px)}
 body.playing .speed-dial{display:none}
 body.playing .cockpit-dial #speed,
 body.playing[data-vehicle=roadster] .cockpit-dial #speed{font-size:32px;top:0}
 body.playing .cockpit-dial>span{top:39px;font-size:8px}
 body.playing .cockpit-dial #hudLev{top:50px;font-size:9px}
}

@media(orientation:landscape) and (max-height:450px){
 #hud{--drive-bottom:max(12px,calc(env(safe-area-inset-bottom) + 8px))}
 body.playing .hudtop,
 body.playing.large-text .hudtop{top:max(60px,calc(env(safe-area-inset-top) + 54px));left:var(--drive-left,16px);right:auto;width:154px;grid-template-columns:102px 52px;gap:0;align-items:stretch}
 body.playing .hudtop>div:first-child{padding:5px 6px;border-radius:2px 0 0 2px;border-right-width:3px}
 body.playing .hudtop>div:first-child>small{font-size:8px;line-height:12px}
 body.playing .hudtop #time{font-size:25px;line-height:1.1;white-space:nowrap}
 body.playing .hudtop .health{padding:5px 6px;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;border-radius:0 2px 2px 0;align-items:center;--feedback-width:154px}
 body.playing .hudtop .health>small{display:none}
 body.playing .hudtop .health>b{font-size:12px;text-align:right;line-height:16px}
 body.playing .healthtrack{width:100%;height:4px;margin:0}
 body.playing #hud>.progress,
 body.playing.large-text #hud>.progress{top:max(60px,calc(env(safe-area-inset-top) + 54px));right:var(--drive-right,16px);left:auto;width:174px;bottom:auto}
 body.playing .cockpit-dial.telemetry{top:max(8px,env(safe-area-inset-top));bottom:auto;left:max(130px,calc(env(safe-area-inset-left) + 126px));width:76px;height:44px}
 body.playing .cockpit-dial .speed-dial,
 body.playing .cockpit-dial #hudLev{display:none}
 body.playing .cockpit-dial #speed{top:0;font-size:28px;line-height:1.2;text-shadow:2px 2px 0 var(--ink)}
 body.playing .cockpit-dial>span{top:34px;font-size:7px;line-height:8px}
 body.playing #stripStatus{position:fixed;left:var(--drive-left,16px);top:auto;bottom:calc(var(--drive-bottom) + 80px);transform:none;max-width:146px;white-space:normal;font-size:8px;line-height:1.3}
 body.playing #touch,
 body.playing.large-text #touch{bottom:var(--drive-bottom);left:var(--drive-left,16px);right:var(--drive-right,16px)}
 body.playing #touch button,
 body.playing #touch button.boost,
 body.playing.large-text #touch button{min-height:56px;height:56px}
 body.playing #jetControls{right:var(--drive-right,16px);bottom:calc(var(--drive-bottom) + 66px)}
 body.playing #touch #jetControls button{width:53px;height:48px;min-height:48px;padding:3px}
 body.playing #jetControls kbd{display:none}
 body.playing #jetStatus{top:max(60px,calc(env(safe-area-inset-top) + 54px));bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:174px;padding:3px 8px}
 body.playing #jetStatus small{display:none}
 body.playing .health #damageStatus,
 body.playing .health #pickupStatus,
 body.playing .health #hazardStatus{left:-102px}
 body.playing .health #damageStatus{top:calc(100% + 8px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 4px;min-height:38px;padding:4px 6px}
 body.playing .health #damageStatus>span{font-size:8px;line-height:12px}
 body.playing .health #damageStatus>strong{font-size:10px!important;line-height:12px;white-space:nowrap}
 body.playing .health #damageStatus>em{grid-column:1/-1;font-size:8px;line-height:12px}
 body.playing .health:has(#damageStatus:not([hidden])){--impact-space:44px}
 body.playing .health:has(#pickupStatus:not([hidden])){--pickup-space:28px}
 body.playing .health #pickupStatus{min-height:22px;font-size:9px;padding:3px 6px}
 body.playing .health #hazardStatus{width:min(220px,calc(50vw - 24px));max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 body.playing .health #hazardStatus .hazard-effect{padding:3px 4px;gap:0 3px;border-left-width:3px;min-height:22px}
 body.playing .health #hazardStatus .hazard-effect strong,
 body.playing .health #hazardStatus .hazard-effect b{font-size:9px!important;line-height:13px!important}
 body.playing .health #hazardStatus .hazard-effect span{display:none}
 body.playing #nitroStatus{right:var(--drive-right,16px);bottom:calc(var(--drive-bottom) + 64px);top:auto;left:auto;transform:none}
 body.playing #reviveShield{top:max(110px,calc(env(safe-area-inset-top) + 104px));font-size:10px;padding:4px 8px}
}