diff --git a/data/quests.json b/data/quests.json
index 98d0b5e..62a2117 100644
--- a/data/quests.json
+++ b/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"
}
]
-}
+}
\ No newline at end of file
diff --git a/quests/flexbox-frenzy.html b/quests/flexbox-frenzy.html
new file mode 100644
index 0000000..d3af51f
--- /dev/null
+++ b/quests/flexbox-frenzy.html
@@ -0,0 +1,1613 @@
+
+
+
+
+
+ Flexbox Frenzy: The Alignment Heist
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/quests/flexbox-frenzy.png b/quests/flexbox-frenzy.png
new file mode 100644
index 0000000..4d7b12c
Binary files /dev/null and b/quests/flexbox-frenzy.png differ