FRIENDLY FIRE 3D

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FRIENDLY FIRE 3D</title>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: #87ceeb;
  font-family: Arial, sans-serif;
  color: white;
  touch-action: none;
}

#hud {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 5;
  background: #0009;
  padding: 12px;
  border-radius: 10px;
  line-height: 1.8;
}

#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  z-index: 3;
  pointer-events: none;
}

#controls {
  position: fixed;
  bottom: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 10;
  pointer-events: none;
}

.pad {
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 5px;
  pointer-events: auto;
}

button {
  background: #142b40cc;
  color: white;
  border: 2px solid #ffffff99;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
  touch-action: none;
}

button:active {
  background: #08aaff;
}

#up { grid-column: 2; }
#left { grid-column: 1; grid-row: 2; }
#down { grid-column: 2; grid-row: 2; }
#right { grid-column: 3; grid-row: 2; }

#shoot {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #c72525dd;
  pointer-events: auto;
  align-self: end;
}

#help {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  background: #0008;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 5;
  text-align: center;
}
</style>
</head>

<body>

<div id="hud">
  <b>🔥 FRIENDLY FIRE</b><br>
  ❤️ HP: <span id="hp">100</span><br>
  🔫 Ammo: <span id="ammo">30</span><br>
  👾 Enemies: <span id="enemies">0</span>
</div>

<div id="crosshair">＋</div>

<div id="help">
  Drag screen to look around • Use buttons to move
</div>

<div id="controls">
  <div class="pad">
    <button id="up">▲</button>
    <button id="left">◀</button>
    <button id="down">▼</button>
    <button id="right">▶</button>
  </div>
  <button id="shoot">FIRE</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>

<script>
if (!window.THREE) {
  document.body.innerHTML =
    '<h2 style="padding:20px">3D engine failed to load. Check your internet and