JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VOIDSTRIKE — Neon Protocol FPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap" rel="stylesheet">
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#05030c; font-family:'Orbitron', monospace; }
canvas { display:block; }
::selection { background:rgba(0,255,220,0.3); }

/* ---------- HUD ---------- */
#hud { position:fixed; inset:0; pointer-events:none; z-index:10; }
body[data-state="menu"] #hud, body[data-state="gameover"] #hud { opacity:0; }

#crosshair { position:absolute; left:50%; top:50%; --sp:8px; }
#crosshair .c { position:absolute; background:#8ffcff; box-shadow:0 0 6px rgba(0,255,255,0.8); }
#crosshair .t { left:-1px; top:calc(-1 * var(--sp) - 11px); width:2px; height:10px; }
#crosshair .b { left:-1px; top:calc(var(--sp) + 1px); width:2px; height:10px; }
#crosshair .l { top:-1px; left:calc(-1 * var(--sp) - 11px); height:2px; width:10px; }
#crosshair .r { top:-1px; left:calc(var(--sp) + 1px); height:2px; width:10px; }
#crosshair .dot { position:absolute; left:-1px; top:-1px; width:2px; height:2px; background:#fff; border-radius:50%; }

#hitmarker { position:absolute; left:50%; top:50%; width:0; height:0; opacity:0; z-index:8; transition:opacity 0.08s; }
#hitmarker span { position:absolute; width:11px; height:2px; background:#fff; box-shadow:0 0 6px #fff; }
#hitmarker span:nth-child(1) { transform:translate(-15px,-9px) rotate(-45deg); }
#hitmarker span:nth-child(2) { transform:translate(4px,-9px) rotate(45deg); }
#hitmarker span:nth-child(3) { transform:translate(-15px,7px) rotate(45deg); }
#hitmarker span:nth-child(4) {...