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>Nebula Strike: Space Combat</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; user-select: none; }
        canvas { display: block; }

        /* UI Overlays */
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; background: rgba(0,0,0,0.7); }
        
        /* Start Screen */
        #start-screen { background: radial-gradient(circle, #1a1a2e 0%, #000 100%); }
        .ship-container { display: flex; gap: 20px; margin-top: 30px; }
        .ship-card { 
            background: rgba(255,255,255,0.1); border: 2px solid #444; padding: 20px; width: 200px; 
            text-align: center; cursor: pointer; transition: 0.3s; border-radius: 10px;
        }
        .ship-card:hover { background: rgba(255,255,255,0.2); border-color: #00d4ff; transform: translateY(-10px); }
        .stat-bar { background: #333; height: 10px; width: 100%; margin: 5px 0; border-radius: 5px; overflow: hidden; }
        .stat-fill { height: 100%; background: #00d4ff; }

        /* HUD */
        #hud { display: none; justify-content: space-between; padding: 20px; width: 100%; box-sizing: border-box; }
        .hud-box { background: rgba(0,0,0,0.5); padding: 10px; border-left: 4px solid #00d4ff; }
        
        /* Death Screen */
        #death-screen { display: none; background: black; z-index: 100; }

        h1 { font-size: 3rem; text-shadow: 0 0 20px #00d4ff; margin-bottom: 10px; }
        .controls-hint { margin-top: 20px; font-size: 0.8rem; color:...