/* Private beta: mobile overlay, appears only during combat on touch devices */
#mobile-controls{display:none}
@media (hover:none) and (pointer:coarse) {
 body{touch-action:none}
 #mobile-controls.playing{display:flex;position:fixed;z-index:30;bottom:max(12px,env(safe-area-inset-bottom));left:2%;right:2%;justify-content:space-between;align-items:flex-end;pointer-events:none}
 #mobile-controls .touch-left,#mobile-controls .touch-right{display:flex;align-items:flex-end;gap:7px;pointer-events:auto}
 #mobile-controls button{touch-action:none;user-select:none;-webkit-user-select:none;min-width:clamp(48px,10vw,75px);height:clamp(48px,11vw,75px);padding:7px;text-align:center;font-size:clamp(12px,2.1vw,18px);font-weight:800;color:#fff;background:#101d39da;border:2px solid #77ccef;border-radius:50%;box-shadow:0 3px 16px #000c}
 #mobile-controls .touch-right button{background:#4b1829df;border-color:#ff937f}
 #mobile-controls button.held{background:#27766b;border-color:#e5fff6;transform:scale(.95)}
 #mobile-controls button[data-key="KeyW"]{transform:translateY(-34px)}
 #mobile-controls button[data-key="KeyW"].held{transform:translateY(-34px) scale(.95)}
 #mobile-controls button[data-action="block"]{transform:translateY(-25px)}
 #mobile-controls button[data-action="block"].held{transform:translateY(-25px) scale(.95)}
 #hint{pointer-events:none;bottom:0;font-size:9px;padding:2px 5px}
 @media (orientation:portrait){#mobile-controls.playing:before{content:'Para jogar melhor, vire o celular na horizontal';position:fixed;left:10%;right:10%;top:10px;text-align:center;font-weight:700;background:#101a2de8;padding:8px;border-radius:7px;font-size:12px}}
}