feat: add placeholder in card

src/ui/Duel/PlayMat/Card/index.module.scss

@@ -5,7 +5,7 @@
   height: var(--card-height);
   aspect-ratio: var(--card-ratio);
   transform-style: preserve-3d;
-  .img-wrap {
+  .container {
     transform-style: preserve-3d;
     position: relative;
     margin: auto auto;
@@ -17,7 +17,8 @@
     transition: 0.2s scale;
     cursor: pointer;
     .cover,
-    .back {
+    .back,
+    .placeholder {
       width: 100% !important;
       height: 100%;
       position: absolute;
@@ -26,16 +27,21 @@
       border-radius: 2px;
       overflow: hidden;
     }
-    .cover {
+    .placeholder {
       z-index: 1;
-      transform: translateZ(0.5px);
+      // transform: translateZ(0.5px);
+      background-color: gray;
+    }
+    .cover {
+      z-index: 2;
+      // transform: translateZ(0.5px);
     }
     &.focusing .cover {
       animation: focus 0.6s ease-in-out;
     }
     .back {
       z-index: 0;
-      transform: translateZ(0px);
+      transform: rotateY(180deg);
     }
   }
   .shadow {

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

@@ -305,15 +305,16 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
         trigger={["click"]}
       >
         <div
-          className={classnames(styles["img-wrap"], {
+          className={classnames(styles.container, {
             [styles.focusing]: classFocus,
           })}
         >
+          <YgoCard className={styles.back} isBack />
+          <div className={styles.placeholder} />
           <YgoCard
             className={styles.cover}
             code={snap.code === 0 ? snap.meta.id : snap.code}
           />
-          <YgoCard className={styles.back} isBack />
         </div>
       </Dropdown>
       {snap.selected ? <div className={styles.streamer} /> : <></>}