fix occlusion

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

@@ -6,6 +6,20 @@
   justify-content: center;
   align-items: center;
   z-index: 2;
+
+}
+
+.banish,
+.graveyard {
+  left: 100%;
+}
+
+.extra-deck {
+  right: 100%;
+}
+
+.op {
+  transform: rotate(180deg);
 }
 
 .chain {
@@ -35,6 +49,7 @@
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }

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

+import classnames from "classnames";
+
 import { useConfig } from "@/config";
 
 import styles from "./index.module.scss";
 
 const { assetsPath } = useConfig();
 
-export const BgChain: React.FC<{ chains: readonly number[] }> = ({
+export interface ChainProps {
+  chains: readonly number[];
+  banish?: boolean;
+  graveyard?: boolean;
+  extra?: boolean;
+  op?: boolean;
+}
+
+export const BgChain: React.FC<ChainProps> = ({
   chains,
+  banish,
+  graveyard,
+  extra,
+  op,
 }) => (
-  <div className={styles.container}>
+  <div
+    className={classnames(styles.container, {
+      [styles.banish]: banish,
+      [styles.graveyard]: graveyard,
+      [styles["extra-deck"]]: extra,
+      [styles.op]: op,
+    })}
+  >
     {chains.map((chain) => (
       <div className={styles.chain} key={chain}>
         <img src={`${assetsPath}/chain.png`} />

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

@@ -10,7 +10,7 @@ import {
   placeStore,
 } from "@/stores";
 
-import { BgChain } from "./Chain";
+import { BgChain, ChainProps } from "./Chain";
 import styles from "./index.module.scss";
 
 const { MZONE, SZONE, EXTRA, GRAVE, REMOVED } = ygopro.CardZone;
@@ -20,7 +20,7 @@ const BgBlock: React.FC<
     disabled?: boolean;
     highlight?: boolean;
     glowing?: boolean;
-    chains?: readonly number[];
+    chains: ChainProps;
   }
 > = ({
   disabled = false,
@@ -39,7 +39,7 @@ const BgBlock: React.FC<
   >
     {<DecoTriangles />}
     {<DisabledCross disabled={disabled} />}
-    {<BgChain chains={chains ?? []} />}
+    {<BgChain {...chains} />}
   </div>
 );
 
@@ -59,7 +59,7 @@ const BgExtraRow: React.FC<{
           }}
           disabled={meSnap[i].disabled || opSnap[i].disabled}
           highlight={!!meSnap[i].interactivity || !!opSnap[i].interactivity}
-          chains={meSnap[i].chainIndex.concat(opSnap[i].chainIndex)}
+          chains={{ chains: meSnap[i].chainIndex.concat(opSnap[i].chainIndex) }}
         />
       ))}
     </div>
@@ -79,7 +79,7 @@ const BgRow: React.FC<{
         onClick={() => onBlockClick(snap[i].interactivity)}
         disabled={snap[i].disabled}
         highlight={!!snap[i].interactivity}
-        chains={snap[i].chainIndex}
+        chains={{ chains: snap[i].chainIndex }}
       />
     ))}
   </div>
@@ -113,25 +113,25 @@ const BgOtherBlocks: React.FC<{ op?: boolean }> = ({ op }) => {
       <BgBlock
         className={styles.banish}
         glowing={!op && glowingBanish}
-        chains={genChains(removed)}
+        chains={{ chains: genChains(removed), banish: true, op }}
       />
       <BgBlock
         className={styles.graveyard}
         glowing={!op && glowingGraveyard}
-        chains={genChains(grave)}
+        chains={{ chains: genChains(grave), graveyard: true, op }}
       />
       <BgBlock
         className={styles.field}
         onClick={() => onBlockClick(field.interactivity)}
         disabled={field.disabled}
         highlight={!!field.interactivity}
-        chains={field.chainIndex}
+        chains={{ chains: field.chainIndex, op }}
       />
-      <BgBlock className={styles.deck} />
+      <BgBlock className={styles.deck} chains={{ chains: [] }} />
       <BgBlock
         className={classnames(styles.deck, styles["extra-deck"])}
         glowing={!op && glowingExtra}
-        chains={genChains(extra)}
+        chains={{ chains: genChains(extra), extra: true, op }}
       />
     </div>
   );