/* REV25-11: responsive HUD + safe interaction zones */
:root{--ui-bg:rgba(10,17,37,.92)}
#hud,#controls,#build-hud{z-index:9}
#hud.hidden,#controls.hidden,#build-hud.hidden{display:none!important}
#hud .hud-left{max-width:min(380px,45vw)!important;min-width:0}
#hud .hud-vitals{min-width:0;overflow:hidden}
#hud #formName{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:175px}
#hud .hud-top{gap:6px!important;min-width:0}
#hud #hpnum{flex-shrink:0;font-variant-numeric:tabular-nums}
#hud .hud-right{pointer-events:auto;flex-shrink:0}
#build-hud{left:50%!important;right:auto!important;bottom:max(10px,env(safe-area-inset-bottom))!important;transform:translateX(-50%);max-width:calc(100vw - 380px);}
#build-hud .item-row.equip,#build-hud .consumables{margin:0;flex-wrap:nowrap}
#build-hud .item-slot{flex-shrink:0}
#build-hud .bag-open{white-space:nowrap}
#controls{right:max(10px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important}
#controls .skill{user-select:none;-webkit-user-select:none}
#controls .skill.insufficient::after{background:#ff667e!important}
#controls .skill:focus-visible,#build-hud button:focus-visible{outline:3px solid #ffe2a1;outline-offset:2px}
#item-overlay{overscroll-behavior:contain;touch-action:pan-y}
#item-panel{width:min(780px,95vw);max-height:min(91dvh,760px);overflow-y:auto;overscroll-behavior:contain}
#item-panel .item-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
#item-panel .item-option{min-width:0;overflow-wrap:anywhere}
#item-panel .item-row{margin:8px 0}
#injury-overlay{z-index:7!important;pointer-events:none!important}
#testing.hidden{display:none!important}
@media (max-width:1100px){#build-hud{max-width:calc(100vw - 320px)}#build-hud .item-slot{width:30px!important;height:30px!important}}
@media (max-width:820px), (pointer:coarse){
 #hud{left:5px!important;right:5px!important;gap:5px!important}
 #hud .hud-left{width:min(250px,49vw)!important;max-width:min(250px,49vw)!important;padding:4px!important;gap:4px!important}
 #hud .champion-portrait{width:38px;height:38px;flex-shrink:0}
 #hud #formName{max-width:105px;font-size:9px!important}
 #hud #hpnum{font-size:9px}
 #hud .hud-right{gap:3px}
 #hud .chip{padding:6px 5px!important;font-size:10px!important}
 #hud #fullscreenButton,#hud #pauseButton{min-width:33px;min-height:33px;padding:6px!important}
 #build-hud{transform:none!important;left:auto!important;right:max(7px,env(safe-area-inset-right))!important;top:max(57px,env(safe-area-inset-top) + 55px)!important;bottom:auto!important;max-width:80px!important;padding:2px!important;background:transparent!important;border:0!important;backdrop-filter:none!important}
 #build-hud .equip,#build-hud .boot-slot,#build-hud .consumables{display:none!important}
 #build-hud .bag-open{width:52px;min-height:42px;padding:6px 2px!important;font-size:10px!important;background:#172544f2!important;border:1px solid #d7b87e!important;white-space:normal;line-height:1.15}
 #controls{grid-template-columns:repeat(3,clamp(43px,10.5vw,58px));grid-template-rows:repeat(2,clamp(43px,10.5vw,58px));gap:5px;bottom:max(12px,env(safe-area-inset-bottom))!important;right:max(8px,env(safe-area-inset-right))!important}
 #item-overlay{padding:6px!important}
 #item-panel{width:98vw;max-height:95dvh;padding:10px!important}
 #item-panel .item-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
 #item-panel .item-option{padding:7px;min-height:95px}
 #item-panel .item-option strong{font-size:12px}
 #item-panel .item-option .stats,#item-panel .item-option .desc{font-size:10px}
 #item-panel .boot-choice{font-size:10px!important}
}
@media (orientation:portrait) and (max-width:600px){
 #hud .hud-left{width:60vw!important;max-width:60vw!important}
 #hud .chip#timer{display:none}
 #build-hud{top:max(65px,env(safe-area-inset-top) + 63px)!important}
 #controls{grid-template-columns:repeat(3,clamp(46px,14vw,62px));grid-template-rows:repeat(2,clamp(46px,14vw,62px))}
}
@media (max-height:430px) and (orientation:landscape){
 #hud .hud-left{max-height:62px!important}
 #build-hud{top:max(47px,env(safe-area-inset-top) + 46px)!important}
 #controls{grid-template-columns:repeat(3,49px);grid-template-rows:repeat(2,49px);gap:4px;bottom:5px!important}
}

/* Atajos de consumibles, separados del joystick y habilidades */
#quick-potions{position:fixed;z-index:9;bottom:max(11px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:none;gap:5px;pointer-events:auto}
#quick-potions.hidden{display:none!important}
#quick-potions button{color:#fff;background:#16213ddd;border:1px solid #bda1e2;border-radius:10px;min-height:38px;min-width:45px;font-weight:800;box-shadow:0 4px 12px #0009}
#quick-potions button:disabled{opacity:.48}
@media (max-width:820px),(pointer:coarse){#quick-potions:not(.hidden){display:flex}}
@media (max-width:480px){#quick-potions{left:43%}#quick-potions button{min-width:35px;font-size:11px}}