feat: life bar style

src/styles/core.scss

 // ref: https://github.com/jvcjunior/login-react-redux
 // thanks!
 @charset "utf-8";
+@import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
 
 ol,
 ul {
@@ -34,7 +35,8 @@ body {
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #141414;
-  font: 87.5%/1.5em "Open Sans", sans-serif;
+  // font: 87.5%/1.5em "Open Sans", sans-serif;
+  font-size: 14px;
   display: flex;
   margin: 0;
   place-items: center;
@@ -94,3 +96,16 @@ img {
   user-select: none;
   -webkit-user-drag: none;
 }
+
+div,
+p,
+section,
+span,
+image,
+img {
+  box-sizing: border-box;
+}
+
+body {
+  --theme-font: "Electrolize", sans-serif;
+}

src/ui/Duel/Message/CardModal/index.scss

-@import url("https://fonts.googleapis.com/css2?family=Electrolize&display=swap");
-
 .card-modal-root {
-  --theme-font: "Electrolize", sans-serif;
   .ant-drawer-content-wrapper {
     box-shadow: none;
   }

src/ui/Duel/PlayMat/LifeBar/index.scss

 #life-bar-container {
   position: fixed;
   display: flex;
-  gap: 20px;
-  top: 20px;
-  right: 20px;
-  font-size: 1.5em;
-  font-weight: 500;
-  font-family: inherit;
+  top: 0;
+  left: 0;
+  height: 100vh; // FIXME: 100% on safari
+  display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  padding: 20px 35px;
+  pointer-events: none;
+  z-index: 100;
 }
 
-#life-bar {
-  padding: 0.8em 1.6em;
-  background-color: #a9a9a9;
+.life-bar {
+  width: 160px;
+  color: white;
+  background-color: rgb(50, 50, 50);
+  font-family: var(--theme-font);
+  border: 1px solid #222;
+  padding: 1rem;
+  padding-bottom: 0.6rem;
   border-radius: 8px;
   text-align: left;
-  border: 1px solid transparent;
-  color: black;
-  opacity: 0.4;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .name {
+    font-size: 0.8rem;
+    font-weight: bold;
+  }
+  .life {
+    font-size: 2rem;
+  }
 }

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

@@ -11,12 +11,14 @@ export const LifeBar: React.FC = () => {
 
   return (
     <div id="life-bar-container">
-      <div id="life-bar">{`${snapPlayer.getMePlayer().name}: ${
-        snap.me.life
-      }`}</div>
-      <div id="life-bar">{`${snapPlayer.getOpPlayer().name}: ${
-        snap.op.life
-      }`}</div>
+      <div className="life-bar">
+        <div className="name">{snapPlayer.getMePlayer().name}</div>
+        <div className="life">{snap.me.life}</div>
+      </div>
+      <div className="life-bar">
+        <div className="name">{snapPlayer.getOpPlayer().name}</div>
+        <div className="life">{snap.op.life}</div>
+      </div>
     </div>
   );
 };