/* Size the inventory from the available screen, including phone safe areas. */
.bottom-hud,.touch-controls .bottom-hud{
 container-type:inline-size;
 width:min(78vw,960px,calc(100vw - 32px));
 bottom:calc(14px + env(safe-area-inset-bottom));
}
.inventory-row,.touch-controls .inventory-row{gap:6px;align-items:stretch}
#hotbar,.touch-controls #hotbar{gap:5px;padding:0;scrollbar-width:none;justify-content:flex-start;scroll-snap-type:x proximity}
#hotbar button,#hotbar .empty-slot,.touch-controls #hotbar button,.touch-controls #hotbar .empty-slot{
 --slot-size:clamp(58px,calc((100cqw - 120px)/9),88px);
 flex:0 0 var(--slot-size);width:var(--slot-size);min-width:var(--slot-size);height:var(--slot-size);
 padding:0;scroll-snap-align:start;
}
#hotbar .slot-icon,.touch-controls #hotbar .slot-icon{width:76%;height:76%;margin:8% auto 0}
#hotbar .slot-icon img,.touch-controls #hotbar .slot-icon img{width:100%;height:100%;object-fit:contain}
#hotbar .slot-name,.touch-controls #hotbar .slot-name{display:none}
#hotbar .slot-count,.touch-controls #hotbar .slot-count{font-size:14px;bottom:3px;right:5px;top:auto;text-shadow:0 1px 3px #000}
#hotbar .slot-key{font-size:12px;top:3px;left:5px}
.inventory-row>button,.touch-controls #inventory-next{
 flex:0 0 34px;width:34px;min-width:34px;min-height:0;height:auto;align-self:stretch;padding:0;
}
.health-track,.touch-controls .health-track{height:32px;margin-bottom:6px}
#health-text,.touch-controls #health-text{font-size:18px}
#selected-item,.touch-controls #selected-item{font-size:14px;line-height:18px;min-height:18px;margin-bottom:5px}
.key-help{flex-wrap:wrap;row-gap:4px;font-size:11px}
dialog{max-width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto}
@media(max-width:760px){
 .bottom-hud{width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}
}
@media(min-width:900px){
 body:not(.touch-controls) .bottom-hud{width:min(960px,calc(100vw - 400px))}
}
@media(max-width:899px){
 body:not(.touch-controls) .bottom-hud{width:calc(100vw - 24px)}
 body:not(.touch-controls) .shift-lock-button{top:160px;bottom:auto;left:12px;min-width:100px}
 body:not(.touch-controls) .shop-button{top:160px;bottom:auto;right:12px}
}
.touch-controls .bottom-hud{
 width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
 left:max(12px,env(safe-area-inset-left));transform:none;
 bottom:calc(10px + env(safe-area-inset-bottom));
}
.touch-controls #hotbar button,.touch-controls #hotbar .empty-slot{--slot-size:clamp(58px,calc((100cqw - 70px)/6),76px)}
.touch-controls .health-track{height:28px}
.touch-controls #health-text{font-size:16px}
.touch-controls .top-hud{gap:8px}
.touch-controls .match-chip{flex:none;min-width:64px;gap:6px}
.touch-controls #team-board{min-width:0;gap:4px}
.touch-controls #team-board>div{min-width:0;flex:1;padding:4px 6px}
#team-board.many-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:min(440px,60vw)}
#team-board.many-teams>div{min-width:0;padding:4px 7px}
#team-board.many-teams .team-name{font-size:12px;white-space:nowrap}
.touch-controls #team-board.many-teams>div{min-width:0;padding:2px 4px}
.touch-controls #team-board.many-teams .team-name{font-size:11px}
@media(max-width:360px){
 .touch-controls .match-chip{padding:4px;font-size:11px}
 .touch-controls .match-chip span{font-size:9px}
 .touch-controls #team-board>div{padding:4px}
}
@media(orientation:landscape){
 /* Use the space below the joystick; keep the right-hand action buttons clear. */
 .touch-controls .bottom-hud{width:min(1040px,calc(100vw - 196px - env(safe-area-inset-left) - env(safe-area-inset-right)))}
 .touch-controls #hotbar button,.touch-controls #hotbar .empty-slot{--slot-size:clamp(54px,calc((100cqw - 86px)/9),80px)}
}
@media(orientation:portrait){
 .touch-controls #joystick{bottom:calc(218px + env(safe-area-inset-bottom))}
 .touch-controls .touch-actions{bottom:calc(172px + env(safe-area-inset-bottom))}
}
@media(orientation:portrait) and (max-height:650px){
 .touch-controls .touch-actions{bottom:calc(150px + env(safe-area-inset-bottom))}
 .touch-controls #joystick{bottom:calc(196px + env(safe-area-inset-bottom))}
}
@media(max-height:400px) and (orientation:landscape){
 .touch-controls #joystick{top:36%}
 .touch-controls #selected-item{font-size:12px;line-height:15px;min-height:15px;margin-bottom:3px}
 .touch-controls .health-track{height:24px;margin-bottom:4px}
}