add: Flexbox Frenzy: The Alignment Heist — CSS Flexbox heist quest

data/quests.json

@@ -1177,6 +1177,30 @@
       ],
       "difficulty": "Medium",
       "status": "live"
+    },
+    {
+      "id": "flexbox-frenzy",
+      "name": "Flexbox Frenzy: The Alignment Heist",
+      "shortDescription": "A heist caper where every vault lock is a Flexbox puzzle — write real CSS to slide gold bars onto their targets, judged live by the browser's own layout engine, scored on how few properties you use.",
+      "longDescription": "## Flexbox Frenzy: The Alignment Heist\n\nCrack vaults by solving Flexbox puzzles. Ghostly target outlines show where the gold bars must end up; you write real CSS on the container to slide them into position, and when every bar overlaps its target the vault clicks open. The honest twist: your CSS is applied to actual DOM elements and measured live with `getBoundingClientRect`, so the browser's own layout engine decides whether you cracked the lock. CSS isn't simulated here \u2014 it is the render engine and the judge.\n\n### Features\n\n- Real Flexbox layout as the game engine: properties are applied to live containers and gold bars animate to wherever the browser actually lays them out; a `getBoundingClientRect` overlap check seats each bar. Nothing is hand-authored.\n- Finesse scoring (golf for CSS): validity is only the entry fee \u2014 your score is how few properties you used, rewarding shorthands like `place-content: center` over separate `justify-content` and `align-items`.\n- Procedural vaults with verified solutions: every layout is generated from a known-achievable property set, so par is real, difficulty scales, and no two heists repeat.\n- Five escalating floors: main-axis (`justify-content`), cross-axis (`align-items`), `flex-direction` flips that make the same properties behave differently, `gap`/`flex-grow`/`align-self`, and a timed vault-crack boss where finesse buys time.\n- Teaches the single most confusing thing about Flexbox \u2014 which axis a property acts on \u2014 by flipping `flex-direction` mid-game and letting you watch your assumptions break and correct.\n- Pure visual payoff: gold bars sliding into laser-gridded vaults, Canvas particle bursts on a vault opening, synthetic Web Audio SFX, and a heist-scorecard summary, built in pure vanilla JavaScript with full `prefers-reduced-motion` support and zero external frameworks.",
+      "category": "css-fundamentals",
+      "tags": [
+        "css",
+        "flexbox",
+        "game",
+        "heist",
+        "interactive",
+        "layout"
+      ],
+      "techStack": [
+        "Canvas",
+        "CSS3",
+        "HTML5",
+        "Vanilla JS",
+        "Web Audio API"
+      ],
+      "difficulty": "Hard",
+      "status": "live"
     }
   ]
-}
+}