Revamp styles for Song Battle screens with pixel art theme; enhance layout, animations, and button designs for a cohesive aesthetic

client/src/common/styles/components/home-screen.sass

@@ -9,73 +9,133 @@
   padding: 2rem
   position: relative
   
+  // Pixel art floating items in background
+  &:before, &:after
+    content: ''
+    position: absolute
+    width: 12px
+    height: 12px
+    background-color: $pixel-blue
+    animation: pixel-float 3s infinite alternate ease-in-out
+    z-index: -1
+    
+  &:before
+    top: 15%
+    left: 20%
+    box-shadow: 0 0 10px $pixel-blue
+    animation-delay: 0s
+    
+  &:after
+    bottom: 20%
+    right: 15%
+    background-color: $pixel-purple
+    box-shadow: 0 0 10px $pixel-purple
+    animation-delay: 1.5s
+    
   .logo
     display: flex
     flex-direction: column
     align-items: center
-    margin-bottom: 2rem
+    margin-bottom: 3rem
     
     .logo-image
       image-rendering: pixelated
-      width: 120px
+      width: 180px
       height: auto
-      margin-bottom: 1rem
-      animation: pulse 2s infinite ease-in-out
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7))
+      margin-bottom: 1.5rem
+      animation: pixel-float 3s infinite ease-in-out
+      filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5))
     
     h1
-      font-size: 3.5rem
+      font-size: 2.5rem
       margin: 0
-      color: white
-      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3)
+      font-family: 'Press Start 2P', monospace
+      color: $primary
+      animation: pixel-flash 3s infinite
+      letter-spacing: 2px
+      text-transform: uppercase
   
   .card
     background-color: $card-bg
-    border-radius: 1rem
     padding: 2rem
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.1)
-    border: 1px solid rgba(255, 255, 255, 0.1)
-    backdrop-filter: blur(10px)
+    box-shadow: 8px 8px 0 #000
+    border: 4px solid #000
     width: 100%
     max-width: 500px
+    position: relative
+    overflow: visible
     
-    .tabs
-      display: flex
-      margin-bottom: 1.5rem
-      border-bottom: 2px solid rgba(255, 255, 255, 0.1)
+    // Pixel art decorations
+    &:before
+      content: ''
+      position: absolute
+      top: -10px
+      left: -10px
+      width: 20px
+      height: 20px
+      background-color: $accent
+      z-index: 1
+      animation: pixel-rotate 8s linear infinite
       
-      button
-        flex: 1
-        background: none
-        border: none
-        color: $text-muted
-        padding: 1rem
-        font-size: 1rem
-        cursor: pointer
-        transition: color 0.2s, border-bottom 0.2s
-        position: relative
-        
-        &:after
-          content: ''
-          position: absolute
-          bottom: -2px
-          left: 0
-          width: 100%
-          height: 2px
-          background-color: transparent
-          transition: background-color 0.2s
-        
-        &.active
-          color: $primary
-          
-          &:after
-            background-color: $primary
+    &:after
+      content: ''
+      position: absolute
+      bottom: -10px
+      right: -10px
+      width: 20px
+      height: 20px
+      background-color: $primary
+      z-index: 1
+      animation: pixel-rotate 8s linear infinite reverse
+      
+  @keyframes pixel-rotate
+    0%
+      transform: rotate(0deg)
+    100%
+      transform: rotate(360deg)
+      
+.tabs
+  display: flex
+  margin-bottom: 1.5rem
+  border-bottom: 4px solid #000
   
-  .home-footer
-    margin-top: 2rem
-    text-align: center
+  button
+    flex: 1
+    background: none
+    border: 4px solid #000
+    border-bottom: none
     color: $text-muted
-    font-style: italic
+    font-family: 'Press Start 2P', monospace
+    font-size: 0.7rem
+    padding: 0.75rem 0.5rem
+    position: relative
+    text-transform: uppercase
+    transition: all 0.2s ease
+    cursor: pointer
+    
+    &:hover:not(.active)
+      background-color: rgba($primary, 0.2)
+      color: $text
+    
+    &.active
+      background-color: $primary
+      color: #000
+      z-index: 1
+      
+      &:after
+        content: ''
+        position: absolute
+        bottom: -4px
+        left: 0
+        width: 100%
+        height: 4px
+        background-color: $primary
+
+.home-footer
+  margin-top: 2rem
+  text-align: center
+  color: $text-muted
+  font-style: italic
 
 @keyframes pulse
   0%