{"title":"Mystery MTG Treasure Vaults","description":"import { useState, useEffect, useRef } from \"react\";\n\nconst CRATES = [\n  {\n    id: 1,\n    name: \"Bronze Vault\",\n    subtitle: \"Entry-Level Discovery\",\n    price: \"₩15,000\",\n    color: \"#92620a\",\n    accentBg: \"#fdf6ec\",\n    cardBg: \"linear-gradient(145deg, #fefcf8 0%, #fdf3e4 100%)\",\n    borderColor: \"#e8d5b5\",\n    image: \"https:\/\/placehold.co\/400x400\/fdf3e4\/92620a?text=BRONZE+VAULT\",\n    wins: [\n      { item: \"Rare Land Bundle (4-6 cards)\", chance: \"38%\" },\n      { item: \"Mythic Rare Pull\", chance: \"15%\" },\n      { item: \"Foil Rare Guaranteed\", chance: \"100%\" },\n      { item: \"Random Bonus Token\", chance: \"22%\" },\n    ],\n    highestWinChance: \"100%\",\n    highestWinLabel: \"Foil Rare\",\n    avgPayout: \"115%\",\n    tag: null,\n    category: \"guaranteed\",\n  },\n  {\n    id: 2,\n    name: \"Silver Vault\",\n    subtitle: \"Proven Value\",\n    price: \"₩35,000\",\n    color: \"#4a5568\",\n    accentBg: \"#f1f3f7\",\n    cardBg: \"linear-gradient(145deg, #fcfcfd 0%, #eef0f5 100%)\",\n    borderColor: \"#d2d8e3\",\n    image: \"https:\/\/placehold.co\/400x400\/eef0f5\/4a5568?text=SILVER+VAULT\",\n    wins: [\n      { item: \"Multi-Format Staple Pack\", chance: \"45%\" },\n      { item: \"Mythic Rare (1-2 cards)\", chance: \"40%\" },\n      { item: \"Premium Foil Bundle\", chance: \"100%\" },\n      { item: \"Planeswalker Pull\", chance: \"30%\" },\n    ],\n    highestWinChance: \"100%\",\n    highestWinLabel: \"Premium Foils\",\n    avgPayout: \"125%\",\n    tag: \"POPULAR\",\n    category: \"guaranteed\",\n  },\n  {\n    id: 3,\n    name: \"Gold Vault\",\n    subtitle: \"High-Value Guaranteed\",\n    price: \"₩75,000\",\n    color: \"#916a10\",\n    accentBg: \"#fef9ec\",\n    cardBg: \"linear-gradient(145deg, #fffdf7 0%, #fef5de 100%)\",\n    borderColor: \"#e6d49e\",\n    image: \"https:\/\/placehold.co\/400x400\/fef5de\/916a10?text=GOLD+VAULT\",\n    wins: [\n      { item: \"Chase Mythic Rare\", chance: \"55%\" },\n      { item: \"Commander Staple Bundle\", chance: \"75%\" },\n      { item: \"Premium Foil Mythic\", chance: \"35%\" },\n      { item: \"Planeswalker Guaranteed\", chance: \"100%\" },\n    ],\n    highestWinChance: \"100%\",\n    highestWinLabel: \"Planeswalker\",\n    avgPayout: \"140%\",\n    tag: \"BEST VALUE\",\n    category: \"mythic\",\n  },\n  {\n    id: 4,\n    name: \"Platinum Vault\",\n    subtitle: \"Legendary Tier\",\n    price: \"₩150,000\",\n    color: \"#334155\",\n    accentBg: \"#f0f2f6\",\n    cardBg: \"linear-gradient(145deg, #fbfbfd 0%, #ebeef4 100%)\",\n    borderColor: \"#c8cdd8\",\n    image: \"https:\/\/placehold.co\/400x400\/ebeef4\/334155?text=PLATINUM+VAULT\",\n    wins: [\n      { item: \"Top-Tier Chase Card\", chance: \"40%\" },\n      { item: \"Reserved List Chance\", chance: \"12%\" },\n      { item: \"Mythic Bundle (4+ cards)\", chance: \"100%\" },\n      { item: \"Extended Art \/ Borderless\", chance: \"65%\" },\n    ],\n    highestWinChance: \"100%\",\n    highestWinLabel: \"Mythic Bundle\",\n    avgPayout: \"155%\",\n    tag: \"LEGENDARY\",\n    category: \"mythic\",\n  },\n  {\n    id: 5,\n    name: \"Planeswalker Vault\",\n    subtitle: \"Walk Between Worlds\",\n    price: \"₩55,000\",\n    color: \"#8b2252\",\n    accentBg: \"#fdf2f7\",\n    cardBg: \"linear-gradient(145deg, #fefcfd 0%, #fbeef4 100%)\",\n    borderColor: \"#e4b8cd\",\n    image: \"https:\/\/placehold.co\/400x400\/fbeef4\/8b2252?text=PLANESWALKER+VAULT\",\n    wins: [\n      { item: \"Planeswalker (3+ guaranteed)\", chance: \"100%\" },\n      { item: \"Mythic Planeswalker\", chance: \"50%\" },\n      { item: \"Foil Planeswalker\", chance: \"35%\" },\n      { item: \"Superfriends Synergy Pack\", chance: \"60%\" },\n    ],\n    highestWinChance: \"100%\",\n    highestWinLabel: \"3+ Planeswalkers\",\n    avgPayout: \"130%\",\n    tag: \"LIMITED RUN\",\n    category: \"limited\",\n  },\n  {\n    id: 6,\n    name: \"Commander Vault\",\n    subtitle: \"Lead Your Army\",\n    price: \"₩95,000\",\n    color: \"#5b3a8c\",\n    accentBg: \"#f5f0fa\",\n    cardBg: \"linear-gradient(145deg, #fdfbff 0%, #f0eaf8 100%)\",\n    borderColor: \"#cdbee5\",\n    image: \"https:\/\/placehold.co\/400x400\/f0eaf8\/5b3a8c?text=COMMANDER+VAULT\",\n    wins: [\n      { item: \"Commander Staple Bundle (10+)\", chance: \"100%\" },\n      { item: \"Mythic Legendary Creature\", chance: \"85%\" },\n      { item: \"Sol Ring (any printing)\", chance: \"100%\" },\n      { item: \"Premium Mana Base Cards\", chance: \"70%\" },\n    ],\n    highestWinChance: \"100%\",\n    highestWinLabel: \"Sol Ring + Staples\",\n    avgPayout: \"145%\",\n    tag: \"EDH SPECIAL\",\n    category: \"limited\",\n  },\n];\n\nconst CrateCard = ({ crate, index, onSelect }) =\u0026gt; {\n  const [isHovered, setIsHovered] = useState(false);\n  const [mousePos, setMousePos] = useState({ x: 0.5, y: 0.5 });\n  const cardRef = useRef(null);\n\n  const handleMouseMove = (e) =\u0026gt; {\n    if (!cardRef.current) return;\n    const rect = cardRef.current.getBoundingClientRect();\n    setMousePos({\n      x: (e.clientX - rect.left) \/ rect.width,\n      y: (e.clientY - rect.top) \/ rect.height,\n    });\n  };\n\n  const tiltX = isHovered ? (mousePos.y - 0.5) * -6 : 0;\n  const tiltY = isHovered ? (mousePos.x - 0.5) * 6 : 0;\n\n  return (\n    \u003cdiv ref=\"{cardRef}\" onmouseenter=\"{()\"\u003e setIsHovered(true)}\n      onMouseLeave={() =\u0026gt; { setIsHovered(false); setMousePos({ x: 0.5, y: 0.5 }); }}\n      onMouseMove={handleMouseMove}\n      onClick={() =\u0026gt; onSelect(crate)}\n      style={{\n        position: \"relative\",\n        borderRadius: 14,\n        cursor: \"pointer\",\n        transform: `perspective(800px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(${isHovered ? 1.025 : 1})`,\n        transition: isHovered ? \"transform 0.1s ease-out, box-shadow 0.25s\" : \"transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s\",\n        animation: `cardEntrance 0.55s cubic-bezier(0.34,1.56,0.64,1) ${index * 0.08}s both`,\n        zIndex: isHovered ? 10 : 1,\n        boxShadow: isHovered\n          ? `0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px ${crate.borderColor}`\n          : `0 2px 12px rgba(0,0,0,0.04), 0 0 0 1px ${crate.borderColor}88`,\n      }}\n    \u0026gt;\n      \u003cdiv style=\"{{\" position: borderradius: background: crate.cardbg overflow:\u003e\n        {\/* Hover highlight *\/}\n        \u003cdiv style=\"{{\" position: inset: background: at transparent opacity: ishovered : transition: pointerevents: zindex:\u003e\u003c\/div\u003e\n\n        {crate.tag \u0026amp;\u0026amp; (\n          \u003cdiv style=\"{{\" position: top: right: padding: borderradius: background: crate.color color: fontsize: fontfamily: plex mono monospace fontweight: letterspacing: zindex:\u003e\n            {crate.tag}\n          \u003c\/div\u003e\n        )}\n\n        \u003cdiv style=\"{{\" width: height: overflow: position: borderbottom: solid\u003e\n          \u003cimg src=\"{crate.image}\" alt=\"{crate.name}\" style=\"{{\" width: height: objectfit: transform: ishovered : transition: cubic-bezier\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv style=\"{{\" padding: position: zindex:\u003e\n          \u003ch3 style=\"{{\" margin: fontsize: fontfamily: display serif fontweight: color: lineheight:\u003e\n            {crate.name}\n          \u003c\/h3\u003e\n          \u003cp style=\"{{\" margin: fontsize: fontfamily: plex mono monospace color: crate.color letterspacing: texttransform: fontweight:\u003e\n            {crate.subtitle}\n          \u003c\/p\u003e\n\n          \u003cdiv style=\"{{\" margintop: display: flexdirection: gap:\u003e\n            {crate.wins.slice(0, 3).map((w, i) =\u0026gt; (\n              \u003cdiv key=\"{i}\" style=\"{{\" display: alignitems: justifycontent: gap:\u003e\n                \u003cdiv style=\"{{\" display: alignitems: gap: fontsize: fontfamily: sans sans-serif color: flex: minwidth:\u003e\n                  \u003cdiv style=\"{{\" width: height: borderradius: backgroundcolor: crate.color opacity: flexshrink:\u003e\u003c\/div\u003e\n                  \u003cspan style=\"{{\" overflow: textoverflow: whitespace:\u003e{w.item}\u003c\/span\u003e\n                \u003c\/div\u003e\n                \u003cspan style=\"{{\" fontsize: fontfamily: plex mono monospace color: crate.color fontweight: flexshrink:\u003e{w.chance}\u003c\/span\u003e\n              \u003c\/div\u003e\n            ))}\n            {crate.wins.length \u0026gt; 3 \u0026amp;\u0026amp; (\n              \u003cspan style=\"{{\" fontsize: fontfamily: plex mono monospace color: marginleft:\u003e+{crate.wins.length - 3} more prizes\u003c\/span\u003e\n            )}\n          \u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" margintop: display: gridtemplatecolumns: gap:\u003e\n            \u003cdiv style=\"{{\" padding: borderradius: background: crate.accentbg border: solid textalign:\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace fontweight: color: crate.color lineheight:\u003e{crate.highestWinChance}\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: texttransform: letterspacing: margintop: lineheight:\u003eTop Win Rate\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: crate.color opacity: margintop:\u003e{crate.highestWinLabel}\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003cdiv style=\"{{\" padding: borderradius: background: border: solid textalign:\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace fontweight: color: lineheight:\u003e{crate.avgPayout}\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: texttransform: letterspacing: margintop:\u003eAvg Payout\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: opacity: margintop:\u003eof purchase price\u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" height: background: margin:\u003e\u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" display: alignitems: justifycontent:\u003e\n            \u003cdiv style=\"{{\" fontsize: fontfamily: display serif fontweight: color:\u003e{crate.price}\u003c\/div\u003e\n            \u003cdiv style=\"{{\" padding: borderradius: background: ishovered crate.color : border: solid color: fontsize: fontfamily: plex mono monospace fontweight: letterspacing: texttransform: transition:\u003e\n              Open Vault\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  );\n};\n\nconst Modal = ({ crate, onClose }) =\u0026gt; {\n  const [isVisible, setIsVisible] = useState(false);\n  useEffect(() =\u0026gt; { requestAnimationFrame(() =\u0026gt; setIsVisible(true)); }, []);\n  const handleClose = () =\u0026gt; { setIsVisible(false); setTimeout(onClose, 280); };\n  if (!crate) return null;\n\n  return (\n    \u003cdiv onclick=\"{handleClose}\" style=\"{{\" isvisible position:=\"\" inset:=\"\" zindex:=\"\" display:=\"\" alignitems:=\"\" justifycontent:=\"\" background:=\"\" :=\"\" backdropfilter:=\"\" transition:=\"\" padding:=\"\"\u003e\n      \u003cdiv onclick=\"{(e)\"\u003e e.stopPropagation()}\n        style={{\n          maxWidth: 520, width: \"100%\", borderRadius: 18, background: \"#fff\",\n          border: `1px solid ${crate.borderColor}`,\n          boxShadow: \"0 30px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04)\",\n          transform: isVisible ? \"scale(1) translateY(0)\" : \"scale(0.94) translateY(24px)\",\n          opacity: isVisible ? 1 : 0,\n          transition: \"all 0.35s cubic-bezier(0.34,1.56,0.64,1)\",\n          overflow: \"hidden\", maxHeight: \"90vh\", overflowY: \"auto\", position: \"relative\",\n        }}\n      \u0026gt;\n        \u003cbutton onclick=\"{handleClose}\" style=\"{{\" position: top: right: width: height: borderradius: border: solid background: backdropfilter: color: fontsize: cursor: display: alignitems: justifycontent: zindex:\u003e\n          ×\n        \u003c\/button\u003e\n\n        \u003cdiv style=\"{{\" width: height: overflow:\u003e\n          \u003cimg src=\"{crate.image}\" alt=\"{crate.name}\" style=\"{{\" width: height: objectfit:\u003e\n        \u003c\/div\u003e\n\n        \u003cdiv style=\"{{\" padding:\u003e\n          \u003cdiv style=\"{{\" textalign: marginbottom:\u003e\n            {crate.tag \u0026amp;\u0026amp; (\n              \u003cspan style=\"{{\" display: padding: borderradius: background: crate.color color: fontsize: fontfamily: plex mono monospace fontweight: letterspacing: marginbottom:\u003e{crate.tag}\u003c\/span\u003e\n            )}\n            \u003ch2 style=\"{{\" margin: fontsize: fontfamily: display serif fontweight: color:\u003e{crate.name}\u003c\/h2\u003e\n            \u003cp style=\"{{\" margin: fontsize: fontfamily: plex mono monospace color: crate.color letterspacing: texttransform: fontweight:\u003e{crate.subtitle}\u003c\/p\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" display: gridtemplatecolumns: gap: marginbottom:\u003e\n            \u003cdiv style=\"{{\" padding: borderradius: background: crate.accentbg border: solid textalign:\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace fontweight: color: crate.color\u003e{crate.highestWinChance}\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: texttransform: letterspacing: margintop:\u003eHighest Win Rate\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: crate.color opacity: margintop:\u003e{crate.highestWinLabel}\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003cdiv style=\"{{\" padding: borderradius: background: border: solid textalign:\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace fontweight: color:\u003e{crate.avgPayout}\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: texttransform: letterspacing: margintop:\u003eAvg Payout\u003c\/div\u003e\n              \u003cdiv style=\"{{\" fontsize: fontfamily: plex mono monospace color: opacity: margintop:\u003eof purchase price\u003c\/div\u003e\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" padding: borderradius: background: border: solid marginbottom:\u003e\n            \u003ch4 style=\"{{\" margin: fontsize: fontfamily: plex mono monospace color: crate.color letterspacing: texttransform: fontweight:\u003eWhat You Can Win\u003c\/h4\u003e\n            \u003cdiv style=\"{{\" display: flexdirection: gap:\u003e\n              {crate.wins.map((w, i) =\u0026gt; (\n                \u003cdiv key=\"{i}\" style=\"{{\" display: alignitems: justifycontent: gap:\u003e\n                  \u003cdiv style=\"{{\" display: alignitems: gap: flex: minwidth:\u003e\n                    \u003cdiv style=\"{{\" width: height: borderradius: backgroundcolor: crate.color opacity: flexshrink:\u003e\u003c\/div\u003e\n                    \u003cspan style=\"{{\" fontsize: fontfamily: sans sans-serif color:\u003e{w.item}\u003c\/span\u003e\n                  \u003c\/div\u003e\n                  \u003cdiv style=\"{{\" padding: borderradius: background: crate.accentbg border: solid\u003e\n                    \u003cspan style=\"{{\" fontsize: fontfamily: plex mono monospace fontweight: color: crate.color\u003e{w.chance}\u003c\/span\u003e\n                  \u003c\/div\u003e\n                \u003c\/div\u003e\n              ))}\n            \u003c\/div\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" textalign:\u003e\n            \u003cdiv style=\"{{\" fontsize: fontfamily: display serif fontweight: color: marginbottom:\u003e{crate.price}\u003c\/div\u003e\n            \u003cbutton style=\"{{\" width: padding: borderradius: border: background: crate.color color: fontsize: fontfamily: plex mono monospace fontweight: letterspacing: texttransform: cursor: boxshadow: transition: box-shadow onmouseenter=\"{(e)\"\u003e { e.target.style.transform = \"scale(1.02)\"; e.target.style.boxShadow = `0 6px 28px ${crate.color}44`; }}\n              onMouseLeave={(e) =\u0026gt; { e.target.style.transform = \"scale(1)\"; e.target.style.boxShadow = `0 4px 20px ${crate.color}33`; }}\n            \u0026gt;\n              Open This Vault\n            \u003c\/button\u003e\n          \u003c\/div\u003e\n        \u003c\/div\u003e\n      \u003c\/div\u003e\n    \u003c\/div\u003e\n  );\n};\n\nexport default function TreasureVaultsCollection() {\n  const [selectedCrate, setSelectedCrate] = useState(null);\n  const [filter, setFilter] = useState(\"all\");\n\n  const filters = [\n    { key: \"all\", label: \"All Vaults\" },\n    { key: \"guaranteed\", label: \"Guaranteed Min Value\" },\n    { key: \"mythic\", label: \"Mythic\" },\n    { key: \"limited\", label: \"Limited Edition\" },\n  ];\n\n  const filtered = filter === \"all\" ? CRATES : CRATES.filter((c) =\u0026gt; c.category === filter);\n\n  return (\n    \u0026lt;\u0026gt;\n      \u003cstyle\u003e{`\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@600;700;800;900\u0026family=Cormorant+Garamond:wght@500;600;700\u0026family=DM+Sans:wght@400;500;600\u0026family=IBM+Plex+Mono:wght@400;500;600;700\u0026display=swap');\n\n        @keyframes cardEntrance {\n          from { opacity: 0; transform: perspective(800px) translateY(30px) rotateX(4deg) scale(0.96); }\n          to { opacity: 1; transform: perspective(800px) translateY(0) rotateX(0) scale(1); }\n        }\n\n        @keyframes subtlePulse {\n          0%, 100% { opacity: 0.4; }\n          50% { opacity: 0.7; }\n        }\n\n        * { box-sizing: border-box; margin: 0; padding: 0; }\n        ::-webkit-scrollbar { width: 5px; }\n        ::-webkit-scrollbar-track { background: transparent; }\n        ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }\n      `}\u003c\/style\u003e\n\n      \u003cdiv style=\"{{\" sans sans-serif minheight:=\"\" background:=\"\" color:=\"\" fontfamily:=\"\" position:=\"\"\u003e\n        \u003cdiv style=\"{{\" height: background: opacity:\u003e\u003c\/div\u003e\n\n        \u003cheader style=\"{{\" position: zindex: padding: textalign:\u003e\n          \u003cdiv style=\"{{\" display: alignitems: gap: marginbottom: padding: borderradius: border: solid background:\u003e\n            \u003cspan style=\"{{\" fontsize: fontfamily: garamond serif fontweight: letterspacing: color: texttransform:\u003eMystery MTG\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003ch1 style=\"{{\" fontsize: fontfamily: display serif fontweight: lineheight: color: marginbottom: letterspacing:\u003e\n            Treasure Vaults\n          \u003c\/h1\u003e\n\n          \u003cp style=\"{{\" fontsize: color: maxwidth: margin: auto lineheight: fontfamily: sans sans-serif\u003e\n            Know exactly what you can get, how often you can get it, with full transparency.\n          \u003c\/p\u003e\n\n          \u003cdiv style=\"{{\" display: alignitems: gap: padding: borderradius: background: border: solid marginbottom:\u003e\n            \u003cdiv style=\"{{\" width: height: borderradius: background: animation: ease-in-out infinite\u003e\u003c\/div\u003e\n            \u003cspan style=\"{{\" fontsize: fontfamily: plex mono monospace color: letterspacing: fontweight:\u003eVerified Drop Rates · Guaranteed Minimum Value\u003c\/span\u003e\n          \u003c\/div\u003e\n\n          \u003cdiv style=\"{{\" display: justifycontent: gap: flexwrap: marginbottom:\u003e\n            {filters.map((f) =\u0026gt; (\n              \u003cbutton key=\"{f.key}\" onclick=\"{()\"\u003e setFilter(f.key)}\n                style={{\n                  padding: \"9px 18px\", borderRadius: 8,\n                  border: `1.5px solid ${filter === f.key ? \"#1a1a2e\" : \"#d8d5ce\"}`,\n                  background: filter === f.key ? \"#1a1a2e\" : \"#fff\",\n                  color: filter === f.key ? \"#fff\" : \"#6e6e80\",\n                  fontSize: 11, fontFamily: \"'IBM Plex Mono', monospace\", fontWeight: 600,\n                  letterSpacing: \"0.03em\", cursor: \"pointer\", transition: \"all 0.2s\",\n                }}\n              \u0026gt;\n                {f.label}\n              \u003c\/button\u003e\n            ))}\n          \u003c\/div\u003e\n        \u003c\/header\u003e\n\n        \u003cmain style=\"{{\" position: zindex: maxwidth: margin: auto padding: display: gridtemplatecolumns: minmax gap:\u003e\n          {filtered.map((crate, i) =\u0026gt; (\n            \u003ccratecard key=\"{crate.id}\" crate=\"{crate}\" index=\"{i}\" onselect=\"{setSelectedCrate}\"\u003e\u003c\/cratecard\u003e\n          ))}\n        \u003c\/main\u003e\n\n        \u003cfooter style=\"{{\" textalign: padding:\u003e\n          \u003cdiv style=\"{{\" maxwidth: margin: auto padding: borderradius: border: solid background:\u003e\n            \u003cp style=\"{{\" fontsize: fontfamily: plex mono monospace color: lineheight:\u003e\n              All drop rates are publicly verified. Every vault maintains a guaranteed minimum value. Mystery MTG is committed to fair and transparent experiences for every customer.\n            \u003c\/p\u003e\n          \u003c\/div\u003e\n        \u003c\/footer\u003e\n\n        {selectedCrate \u0026amp;\u0026amp; \u003cmodal crate=\"{selectedCrate}\" onclose=\"{()\"\u003e setSelectedCrate(null)} \/\u0026gt;}\n      \u003c\/modal\u003e\n\u003c\/div\u003e\n    \u0026gt;\n  );\n}","products":[],"url":"https:\/\/mysterymtg.com\/collections\/mystery-mtg-treasure-vaults.oembed","provider":"Mystery MTG","version":"1.0","type":"link"}