Fix Level Card Buttons Selection Outline

src/app/components/level-card/level-card.scss

@@ -19,7 +19,7 @@ $default_animation_duration: 0.2s;
 
   border-radius: 8px;
   outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 2px solid;
-  overflow: hidden;
+  // overflow: hidden;
 
   &:focus-visible {
     outline-offset: 0;
@@ -35,7 +35,9 @@ $default_animation_duration: 0.2s;
     z-index: 1;
     background-color: light-dark(white, black);
 
-    outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    // outline: light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%)) 1px solid;
 
     .soundtrack {
       display: flex;
@@ -113,6 +115,7 @@ $default_animation_duration: 0.2s;
       flex-direction: row;
       justify-content: flex-end;
       align-items: center;
+      z-index: 10;
 
       width: 100%;
       height: 50%;
@@ -130,8 +133,13 @@ $default_animation_duration: 0.2s;
         --hover-state: 1;
       }
 
+      &:not(:focus-visible) {
+        box-shadow: -1px 0 0 0 light-dark(oklch(0 0 0 / 20%), oklch(1 0 0 / 20%));
+      }
+
       &:focus-visible {
-        outline-offset: -2px;
+        z-index: 11;
+        outline-offset: 0;
       }
 
       div.button-icon {