Hud cutout styling + changes character select

src/assets/scss/_variables.scss

@@ -5,6 +5,7 @@ $purple: #4741e6;
 $lilac: #7b76ff;
 $light-blue: #00c2ff;
 $red: #d50000;
+$dark-red: #b30000;
 $gray: #7f7f7f;
 $gray-2: #696969;
 $dark-gray: #454545;

src/components/Game.vue

@@ -94,7 +94,7 @@ const bootScene = (scene: Phaser.Scene) => {
   position: absolute;
   left: 0;
   right: 0;
-  margin: 0 2rem;
+  margin: 0 3rem;
 }
 .top-ui {
   top: 3rem;

src/components/game/Hud.vue

@@ -16,6 +16,7 @@
 
 .hud-wrapper {
   position: relative;
+  left: -2rem;
   .profile {
     position: absolute;
     left: 0;
@@ -24,7 +25,7 @@
     height: 4rem;
     background-color: rgba($white, 0.8);
     border-radius: 100%;
-    border: 2px solid $white;
+    border: 3px solid $white;
     z-index: 1;
     img {
       width: 2rem;
@@ -38,15 +39,30 @@
     position: absolute;
     left: 2rem;
     top: 2rem;
-    width: 15rem;
-    height: 5rem;
+    width: 245px;
+    height: 75px;
+    background-image: url('/assets/shapes/hud-shape.svg');
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 1rem;
+    z-index: 1;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 2rem;
+    top: 2rem;
+    width: 245px;
+    height: 75px;
     background-image: url('/assets/clouds.png');
     background-position: center;
     background-size: cover;
-    // background-color: rgba(127, 127, 127, 0.7);
-    clip-path: ellipse(3rem 3rem at 0% 0%) invert;
+    background-repeat: no-repeat;
     border-radius: 1rem;
-    border: 2px solid $white;
+    mask-image: url('/assets/shapes/hud-image-shape.svg');
+    mask-mode: luminance;
   }
 }
 </style>

src/components/screens/Characters.vue

@@ -121,6 +121,7 @@ function create() {
         display: flex;
         flex-direction: column;
         background-color: rgba($white, 0.8);
+        outline: 1px solid $white;
         border-radius: 20px;
         position: relative;
 
@@ -206,10 +207,14 @@ function create() {
           padding: 5px;
           border-radius: 100%;
           z-index: 1;
-          right: -5px;
+          right: -10px;
           top: 0;
           transform: translateY(-50%);
           position: absolute;
+
+          &:hover {
+            background-color: $dark-red;
+          }
         }
 
         span {
@@ -244,6 +249,7 @@ function create() {
         border: rgba($white, 0.35) 1px solid;
         border-radius: 5px;
         color: $white;
+        font-size: 18px;
 
         span {
           color: $white;