make OptionModal pretty

src/ui/Duel/Message/OptionModal/index.module.scss

+.container {
+  :global(.ant-pro-checkcard-header) {
+    font-family: var(--theme-font);
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.ant-pro-checkcard) {
+    background-color: #1414142b;
+  }
+
+  :global(.ant-pro-checkcard-checked) {
+    &::before {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      content: "";
+      z-index: 1;
+      background-color: #0023bf32;
+      box-shadow: 0 0 0 1px #0087e6 inset;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .check-card {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.625rem;
+  }
+}

src/ui/Duel/Message/OptionModal/index.tsx

@@ -16,6 +16,7 @@ import { Container } from "@/container";
 import { getUIContainer } from "@/container/compat";
 
 import { NeosModal } from "../NeosModal";
+import styles from "./index.module.scss";
 
 type Options = { info: string; response: number }[];
 
@@ -67,16 +68,12 @@ export const OptionModal = () => {
       {grouped.map(
         (options, i) =>
           i === page && (
+            <div className={styles.container} key={i}>
               <CheckCard.Group
-              key={i}
                 bordered
                 multiple
                 value={selecteds[i]}
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(2, 1fr)",
-                gap: "0.625rem",
-              }}
+                className={styles["check-card"]}
                 onChange={(values: any) => {
                   const v = selecteds.map((x, i) => (i === page ? values : x));
                   setSelecteds(v);
@@ -96,6 +93,7 @@ export const OptionModal = () => {
                   />
                 ))}
               </CheckCard.Group>
+            </div>
           ),
       )}
     </NeosModal>