html,body{margin:0}.hud-bottom,.hud-top{pointer-events:none;flex-direction:column;align-items:center;gap:4px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.hud-bottom{bottom:24px}.hud-top{top:24px}.health-bar,.target-health-bar{background:#00000080;border-radius:6px;width:200px;height:12px;overflow:hidden}.health-fill,.target-health-fill{background:#e84444;border-radius:6px;width:100%;height:100%;transition:width .1s}.health-text,.target-health-text{color:#fff;text-shadow:0 1px 2px #000;font:11px/1 monospace}.target-text{color:#fc4;text-shadow:0 1px 2px #000;font:11px/1 monospace}.cooldown-bar{background:#00000080;border-radius:3px;width:200px;height:6px;overflow:hidden}.cooldown-fill{background:#fc4;border-radius:3px;width:100%;height:100%}.energy-bar{background:#00000080;border-radius:3px;width:200px;height:6px;overflow:hidden}.energy-fill{background:#4af;border-radius:3px;width:0%;height:100%;transition:width .1s}.hidden{display:none}.dpad{z-index:100;grid-template-rows:repeat(2,64px);grid-template-columns:repeat(3,64px);gap:6px;display:grid;position:fixed;bottom:32px;left:32px}.action-pad{z-index:100;grid-template-rows:repeat(1,64px);grid-template-columns:repeat(2,64px);gap:6px;display:grid;position:fixed;bottom:32px;right:32px}.pad-btn{color:#ffffffd9;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffff26;border:2px solid #ffffff59;border-radius:10px;justify-content:center;align-items:center;font-size:24px;display:flex}.pad-btn:active{background:#ffffff59;border-color:#ffffffb3}.dpad-up{grid-area:1/2}.dpad-left{grid-area:2/1}.dpad-right{grid-area:2/3}.dpad-down{grid-area:2/2}.apad-1{grid-area:1/1}.apad-2{grid-area:1/2}