Step 5: Add iconic synthwave 3D perspective grid

- Added .neon-grid element with 3D CSS transform
- Grid uses perspective(1000px) and rotateX(60deg) for floor effect
- Magenta grid lines (#ff00ff) at 50px spacing
- Added gridFloat animation for subtle floating motion
- Grid positioned behind content with proper z-index
- Creates authentic 80s synthwave/outrun grid floor
- Added neon-grid div to HTML structure

TEST: Refresh to see the classic synthwave perspective grid floor effect

index.html

@@ -41,6 +41,7 @@
         <!-- Game Header -->
         <header class="game-header hero-header">
             <div class="hero-background"></div>
+            <div class="neon-grid"></div>
             <div class="hero-content">
                 <div class="hero-title-section">
                     <h1 class="hero-title">

src/styles/styles.css

@@ -193,6 +193,26 @@ body {
     animation: synthwaveMove 6s linear infinite;
 }
 
+.neon-grid {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 120%;
+    height: 120%;
+    transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg);
+    background-image: 
+        linear-gradient(rgba(255, 0, 255, 0.3) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 0, 255, 0.3) 1px, transparent 1px);
+    background-size: 50px 50px;
+    animation: gridFloat 8s ease-in-out infinite alternate;
+    z-index: 1;
+}
+
+@keyframes gridFloat {
+    from { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(0); }
+    to { transform: translate(-50%, -50%) perspective(1000px) rotateX(60deg) translateZ(20px); }
+}
+
 @keyframes synthwaveMove {
     0% { transform: translateY(0); }
     100% { transform: translateY(100px); }