refactor: money

packages/app/src/components/app/play/ui/money/index.jsx

@@ -9,9 +9,13 @@ function Money({selfEntity}) {
   return (
     <div className={styles.money}>
       <p>
-        <span className={styles.sign}><span className={styles.signText}>$</span></span>
+        <span className={styles.sign}>
+          <span className={styles.signText}>$</span>
+        </span>
         {' '}
-        <span className={styles.number}>{formatted}</span>
+        <span className={styles.number}>
+          <span className={styles.numberText}>{formatted}</span>
+        </span>
       </p>
     </div>
   );

packages/app/src/components/app/play/ui/money/index.module.scss

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'PixelFJVerdana';
+  src: url('./PixelFJVerdana12pt.woff');
+}
+
 .money {
   color: black;
   font-size: 32px;
@@ -14,13 +19,12 @@
   border-radius: 5px;
   box-shadow: inset 0 0 5px black;
   display: inline-block;
-  font-family: monospace;
+  height: 50px;
-  font-weight: bold;
   padding: 10px 15px 10px 20px;
   position: relative;
   left: -25px;
   text-align: right;
-  top: -15px;
+  top: -12px;
   width: 160px;
 }
 
@@ -35,6 +39,22 @@
   width: calc(100% + 6px);
 }
 
+.numberText {
+  --inner-shadow: rgb(196, 182, 103);
+  bottom: 2px;
+  font-family: PixelFJVerdana;
+  font-size: 0.5em;
+  font-weight: bold;
+  right: -8px;
+  position: relative;
+  text-shadow:
+    -1px -1px 0 var(--inner-shadow),
+    -1px 1px 0 var(--inner-shadow),
+    1px -1px 0 var(--inner-shadow),
+    1px 1px 0 var(--inner-shadow),
+  ;
+}
+
 .sign {
   background-color: #fff;
   border: 3px solid black;