update BgChain

src/ui/Duel/PlayMat/Bg/Chain/index.module.scss

+.container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.chain {
+  position: relative;
+  width: 50%;
+  height: 50%;
+  display: flex;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    animation: rotate 5s linear infinite;
+  }
+
+  .text {
+    position: absolute;
+    font-size: 2rem;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

src/ui/Duel/PlayMat/Bg/Chain/index.tsx

+import { useConfig } from "@/config";
+
+import styles from "./index.module.scss";
+
+const { assetsPath } = useConfig();
+
 export const BgChain: React.FC<{ chains: readonly number[] }> = ({
   chains,
-}) => <div></div>;
+}) => (
+  <div className={styles.container}>
+    {chains.map((chain) => (
+      <div className={styles.chain}>
+        <img src={`${assetsPath}/chain.png`} />
+        <div className={styles.text}>{chain}</div>
+      </div>
+    ))}
+  </div>
+);