Optimized and cleaned up more scss

src/components/game/Hud.vue

@@ -17,51 +17,43 @@
 .hud-wrapper {
   position: relative;
   left: -2rem;
-  .profile {
+
+  .profile, .hud, &::before {
     position: absolute;
-    left: 0;
-    top: 0;
+    top: 2rem;
+    left: 2rem;
+    width: 245px;
+    height: 75px;
+    border-radius: 1rem;
+    z-index: 1;
+  }
+
+  .profile {
     width: 4rem;
     height: 4rem;
     background-color: rgba($white, 0.8);
     border-radius: 100%;
     border: 3px solid $white;
-    z-index: 1;
+    top: 0;
+    left: 0;
+    z-index: 2; // Ensure profile is above hud and before
     img {
       width: 2rem;
       position: absolute;
-      left: calc(50% - 1rem);
+      left: 50%;
       top: 50%;
-      transform: translateY(-50%);
+      transform: translate(-50%, -50%);
     }
   }
+
   .hud {
-    position: absolute;
-    left: 2rem;
-    top: 2rem;
-    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;
+    background: url('/assets/shapes/hud-shape.svg') center/cover no-repeat;
   }
 
   &::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-repeat: no-repeat;
-    border-radius: 1rem;
-    mask-image: url('/assets/shapes/hud-image-shape.svg');
+    background: url('/assets/clouds.png') center/cover no-repeat;
+    mask: url('/assets/shapes/hud-image-shape.svg') center/cover no-repeat;
     mask-mode: luminance;
   }
 }

src/components/game/Menu.vue

@@ -42,6 +42,7 @@
 
     .menu-item {
       position: relative;
+
       p {
         position: absolute;
         bottom: 3.125rem;
@@ -65,7 +66,8 @@
           height: 0.5rem;
           width: 0.875rem;
           clip-path: polygon(100% 0, 0 0, 50% 100%);
-          left: calc(50% - 0.4375rem);
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
 
@@ -73,7 +75,7 @@
         padding: 0.5rem;
         background-color: rgba(127, 127, 127, 0.7);
         border: 2px solid $white;
-        border-radius: 100%;
+        border-radius: 50%;
         display: block;
         width: 1.875rem;
         height: 1.875rem;
@@ -88,12 +90,13 @@
         p {
           display: block;
         }
+
         a {
           background-image: url('/assets/galaxy.png');
           background-position: center;
           background-size: cover;
+
           img {
-            -webkit-filter: drop-shadow(0px 3px 6px $black);
             filter: drop-shadow(0px 3px 6px $black);
           }
         }