Add Carbon and Nitrogen elements, new reactions, and grid background

app.js

@@ -22,6 +22,21 @@ const recipes = [
         ingredients: ['O', 'O'], // 2x Sauerstoff
         result: 'O₂ (Sauerstoff-Molekül)',
         color: '#bdc3c7'
+    },
+    {
+        ingredients: ['C', 'O', 'O'], // 1x Kohlenstoff, 2x Sauerstoff
+        result: 'CO₂ (Kohlendioxid)',
+        color: '#7f8c8d'
+    },
+    {
+        ingredients: ['C', 'H', 'H', 'H', 'H'], // 1x Kohlenstoff, 4x Wasserstoff
+        result: 'CH₄ (Methan)',
+        color: '#f39c12'
+    },
+    {
+        ingredients: ['N', 'H', 'H', 'H'], // 1x Stickstoff, 3x Wasserstoff
+        result: 'NH₃ (Ammoniak)',
+        color: '#9b59b6'
     }
 ];
 

index.html

@@ -12,6 +12,8 @@
         <p>Klicke, um Atome zu spawnen.</p>
         <div class="spawn-btn" data-element="H" data-color="#ff9999">Wasserstoff (H)</div>
         <div class="spawn-btn" data-element="O" data-color="#99ccff">Sauerstoff (O)</div>
+        <div class="spawn-btn" data-element="C" data-color="#bdc3c7">Kohlenstoff (C)</div>
+        <div class="spawn-btn" data-element="N" data-color="#cc99ff">Stickstoff (N)</div>
         <div class="spawn-btn" data-element="Na" data-color="#ffcc99">Natrium (Na)</div>
         <div class="spawn-btn" data-element="Cl" data-color="#99ff99">Chlor (Cl)</div>
     </div>

style.css

@@ -35,6 +35,8 @@ body {
 #workspace {
     flex-grow: 1;
     background-color: #ecf0f1;
+    background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
+    background-size: 20px 20px;
     border-radius: 10px;
     position: relative;
     overflow: hidden;