*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;background:#000;overflow:hidden;}
canvas{display:block;position:fixed;top:0;left:0;width:100%;height:100%;}
#hud{position:fixed;top:0;left:0;right:0;padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;z-index:10;}
#hud span{color:#fff;font:bold 20px Arial;text-shadow:0 0 8px #0af;}
#lives{display:flex;gap:5px;}
.lh{width:16px;height:16px;background:#0af;clip-path:polygon(50% 0%,80% 35%,100% 35%,75% 60%,85% 100%,50% 75%,15% 100%,25% 60%,0% 35%,20% 35%);}
#ctrl{position:fixed;bottom:0;left:0;right:0;height:165px;padding:0 20px;padding-bottom:max(16px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;z-index:10;pointer-events:none;}
.btn{border-radius:50%;display:flex;align-items:center;justify-content:center;font:bold 20px Arial;color:#fff;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation;border:2px solid;pointer-events:auto;}
.btn:active{opacity:.6;}
.bl,.br{width:78px;height:78px;background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);}
.bf{width:86px;height:86px;background:rgba(255,55,55,.45);border-color:rgba(255,110,110,.65);}
.bs{width:72px;height:72px;background:rgba(90,50,255,.45);border-color:rgba(140,110,255,.65);font-size:17px;}
.move-g{display:flex;gap:14px;align-items:flex-end;padding-bottom:8px;}
.fire-g{display:flex;flex-direction:row;align-items:flex-end;gap:0px;padding-bottom:8px;}
.hidden{display:none!important;}