/* Independent HUD pieces, with a compact center lane clear of mobile controls. */
.bottom-hud,.touch-controls .bottom-hud{position:static;transform:none;container-type:normal;width:auto}
#inventory-panel,#health-panel{--hud-scale:1;position:fixed;left:50%;transform:translateX(-50%);z-index:9;pointer-events:none}
#inventory-panel{--hud-slot:52px;--hud-caption:18px;--hud-gap:4px;width:min(560px,calc(100vw - 48px));height:74px;bottom:calc(34px + env(safe-area-inset-bottom))}
#health-panel{width:min(360px,calc(100vw - 64px));height:24px;bottom:calc(118px + env(safe-area-inset-bottom))}
#health-panel .health-row{display:none}
#health-panel .health-track{height:100%;margin:0;border-width:2px;box-shadow:none}
#health-panel #health-text{font-size:calc(20px * var(--hud-scale));line-height:1}
#inventory-panel #selected-item{font-size:calc(var(--hud-caption) * var(--hud-scale));line-height:1;min-height:0;height:calc(var(--hud-caption) * var(--hud-scale));margin:0 0 calc(var(--hud-gap) * var(--hud-scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#inventory-panel .inventory-row{height:calc(var(--hud-slot) * var(--hud-scale));gap:calc(4px * var(--hud-scale))}
#inventory-panel #hotbar{gap:calc(3px * var(--hud-scale));padding:0}
#inventory-panel #hotbar button,#inventory-panel #hotbar .empty-slot{--slot-size:calc(var(--hud-slot) * var(--hud-scale));flex:0 0 var(--slot-size);width:var(--slot-size);min-width:var(--slot-size);height:var(--slot-size)}
#inventory-panel .inventory-row>button{flex-basis:calc(26px * var(--hud-scale));width:calc(26px * var(--hud-scale));min-width:0;height:100%;min-height:0}
#inventory-panel #hotbar .slot-count{font-size:calc(18px * var(--hud-scale));line-height:1;right:3px;bottom:2px}
#inventory-panel #hotbar .slot-key{font-size:calc(14px * var(--hud-scale));line-height:1}
.bottom-hud .key-help{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);width:max-content;max-width:95vw;margin:0}
.touch-controls #inventory-panel{--hud-slot:44px;--hud-caption:16px;--hud-gap:4px;width:min(520px,calc(100vw - 400px - env(safe-area-inset-left) - env(safe-area-inset-right)));height:64px;bottom:calc(10px + env(safe-area-inset-bottom))}
.touch-controls #health-panel{width:min(320px,calc(100vw - 400px - env(safe-area-inset-left) - env(safe-area-inset-right)));height:20px;bottom:calc(82px + env(safe-area-inset-bottom))}
.touch-controls #health-panel #health-text{font-size:calc(18px * var(--hud-scale))}
.touch-controls .bottom-hud .key-help{display:none}
.touch-controls #inventory-panel[data-mobile-custom],.touch-controls #health-panel[data-mobile-custom]{--hud-scale:var(--mobile-scale,1)}
@media(orientation:portrait){
 .touch-controls #inventory-panel{width:calc(100vw - 64px - env(safe-area-inset-left) - env(safe-area-inset-right))}
 .touch-controls #health-panel{width:min(280px,calc(100vw - 80px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
}
/* Hidden menu/spectator HUD still needs real dimensions for the layout editor. */
body.layout-measuring #hud,body.layout-measuring .bottom-hud{display:block!important;visibility:hidden!important}
body.layout-editing .bottom-hud{visibility:hidden}
#layout-editor .layout-hud{border-radius:0;padding:0;background:#162635a6}
.layout-hud>span{top:auto;bottom:calc(100% + 3px)}
.layout-health-sample{width:100%;height:100%;background:#ee6268;display:grid;place-items:center;font-size:clamp(13px,2vw,22px);pointer-events:none}
.layout-inventory-sample{width:100%;height:70%;display:flex;gap:3px;align-self:flex-end;pointer-events:none}
.layout-inventory-sample i{flex:1;border:1px solid #fff9;background:#4655639e}

/* Keep all ten hotbar cells visible inside the adjustable HUD. */
#inventory-panel #hotbar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));overflow:hidden;align-items:center}
#inventory-panel #hotbar button,#inventory-panel #hotbar .empty-slot{width:100%;min-width:0;height:auto;aspect-ratio:1;max-height:100%;padding:0}