Add: CSS Grid Island Architect quest

data/quests.json

@@ -225,6 +225,32 @@
       "difficulty": "Medium",
       "status": "live"
     },
+    {
+      "id": "css-grid-architect",
+      "name": "CSS Grid Island Architect",
+      "shortDescription": "SimCity-style isometric city builder puzzle game that teaches CSS Grid layout properties.",
+      "longDescription": "## CSS Grid Island Architect\n\nAn interactive SimCity-style isometric city-building puzzle game that teaches CSS Grid layout properties.\n\n### Features\n\n- SimCity-Style City Building Gameplay: Construct city zones by writing real CSS Grid declarations\n- Progressive Level Mechanics: Level-based challenges covering track sizes, column/row spanning, named grid areas, gap spacing, and responsive minmax()\n- Real-Time Isometric Island Canvas: Live rendering of isometric buildings, power grids, and population meters as CSS rules update\n- Web Audio Synthesizer SFX: Audio feedback for building placements and level completion fanfares\n- Built-In CSS Grid Reference Sheet: Instant syntax cheatsheet for grid alignment and track properties",
+      "category": "css-fundamentals",
+      "tags": [
+        "css",
+        "css-grid",
+        "game",
+        "interactive",
+        "isometric",
+        "layout",
+        "quest",
+        "simcity",
+        "web-design"
+      ],
+      "techStack": [
+        "CSS3",
+        "HTML5",
+        "Vanilla JS",
+        "Web Audio API"
+      ],
+      "difficulty": "Medium",
+      "status": "live"
+    },
     {
       "id": "css-grid-quest",
       "name": "CSS Grid Quest",