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

client/src/common/styles/buttons.sass

@@ -1,53 +1,71 @@
-// Button styles for the Song Battle application
+// Button styles for the Song Battle application - Pixel Art Theme
 
 // Base button style
 .btn
   display: inline-block
   padding: 0.75rem 1.5rem
-  border: none
+  border: 4px solid #000
-  border-radius: 0.5rem
+  border-radius: 0
+  font-family: 'Press Start 2P', monospace
+  font-size: 0.9rem
   font-weight: 600
   cursor: pointer
-  transition: all 0.3s ease
   text-transform: uppercase
   letter-spacing: 1px
   position: relative
-  overflow: hidden
   text-align: center
   min-width: 120px
-  
+  background-color: $primary
-  // Sheen animation on hover
+  color: #000
-  &:before
+  box-shadow: 
-    content: ''
+    4px 4px 0 #000,
-    position: absolute
+    inset -4px -4px 0 darken($primary, 30%),
-    top: 0
+    inset 4px 4px 0 lighten($primary, 10%)
-    left: -100%
+  transition: all 0.1s ease
-    width: 100%
-    height: 100%
-    background: linear-gradient(
-      120deg,
-      transparent,
-      rgba(255, 255, 255, 0.3),
-      transparent
-    )
-    transition: all 0.6s
-  
-  &:hover:before
-    left: 100%
   
   &:hover
-    transform: translateY(-3px)
+    transform: translate(-2px, -2px)
-    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3)
+    box-shadow: 
+      6px 6px 0 #000,
+      inset -4px -4px 0 darken($primary, 30%),
+      inset 4px 4px 0 lighten($primary, 10%)
   
   &:active
-    transform: translateY(0)
+    transform: translate(4px, 4px)
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)
+    box-shadow: 
+      0 0 0 #000,
+      inset -4px -4px 0 darken($primary, 30%),
+      inset 4px 4px 0 lighten($primary, 10%)
     
   &:disabled
     opacity: 0.5
     cursor: not-allowed
     transform: none
-    box-shadow: none
+    
+  // Button types
+  &.primary
+    background-color: $primary
+    color: #000
+    box-shadow: 
+      4px 4px 0 #000,
+      inset -4px -4px 0 darken($primary, 30%),
+      inset 4px 4px 0 lighten($primary, 10%)
+      
+  &.secondary
+    background-color: $secondary
+    color: #000
+    box-shadow: 
+      4px 4px 0 #000,
+      inset -4px -4px 0 darken($secondary, 30%),
+      inset 4px 4px 0 lighten($secondary, 10%)
+      
+  &.accent
+    background-color: $accent
+    color: #000
+    box-shadow: 
+      4px 4px 0 #000,
+      inset -4px -4px 0 darken($accent, 30%),
+      inset 4px 4px 0 lighten($accent, 10%)
 
 // Primary button
 .btn.primary

client/src/common/styles/colors.sass

@@ -1,15 +1,20 @@
-// Colors for Song Battle application
+// Colors for Song Battle application - Pixel Art Theme
 
 // Main colors
-$background: #0f0f1a  // Kept for compatibility
+$background: #1a1126  // Dark purple background for pixel art feel
-$card-bg: rgba(20, 20, 35, 0.85)  // Semi-transparent dark card background
+$card-bg: rgba(32, 24, 48, 0.9)  // Semi-transparent dark purple card background
 $text: #ffffff
-$text-muted: rgba(255, 255, 255, 0.7)  // Brighter for better contrast with gradient
+$text-muted: rgba(255, 255, 255, 0.8)  // Brighter for better contrast with gradient
 
-// Brand colors
+// Brand colors - More saturated for pixel art aesthetic
-$primary: #f0c3ff    // Light purple - complementary to gradient
+$primary: #ff55ff    // Bright magenta - pixel art style
-$secondary: #00e5ff  // Bright cyan - stands out against pink/purple
+$secondary: #00ddff  // Bright cyan - pixel art style
-$accent: #ffcc00     // Bright gold - contrasts with pink/purple
+$accent: #ffcc00     // Bright gold - pixel art style
+
+// Pixel art accent colors
+$pixel-purple: #9900ff
+$pixel-blue: #0088ff
+$pixel-green: #00ff66
 
 // Status colors
 $success: #00c853

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
+      margin-bottom: 1.5rem
-      animation: pulse 2s infinite ease-in-out
+      animation: pixel-float 3s infinite ease-in-out
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.7))
+      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
+      font-family: 'Press Start 2P', monospace
-      text-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 2px 2px 4px rgba(0, 0, 0, 0.3)
+      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)
+    box-shadow: 8px 8px 0 #000
-    border: 1px solid rgba(255, 255, 255, 0.1)
+    border: 4px solid #000
-    backdrop-filter: blur(10px)
     width: 100%
     max-width: 500px
+    position: relative
+    overflow: visible
     
-    .tabs
+    // Pixel art decorations
-      display: flex
+    &:before
-      margin-bottom: 1.5rem
+      content: ''
-      border-bottom: 2px solid rgba(255, 255, 255, 0.1)
+      position: absolute
+      top: -10px
+      left: -10px
+      width: 20px
+      height: 20px
+      background-color: $accent
+      z-index: 1
+      animation: pixel-rotate 8s linear infinite
       
-      button
+    &:after
-        flex: 1
+      content: ''
-        background: none
+      position: absolute
-        border: none
+      bottom: -10px
-        color: $text-muted
+      right: -10px
-        padding: 1rem
+      width: 20px
-        font-size: 1rem
+      height: 20px
-        cursor: pointer
+      background-color: $primary
-        transition: color 0.2s, border-bottom 0.2s
+      z-index: 1
-        position: relative
+      animation: pixel-rotate 8s linear infinite reverse
-        
+      
-        &:after
+  @keyframes pixel-rotate
-          content: ''
+    0%
-          position: absolute
+      transform: rotate(0deg)
-          bottom: -2px
+    100%
-          left: 0
+      transform: rotate(360deg)
-          width: 100%
+      
-          height: 2px
+.tabs
-          background-color: transparent
+  display: flex
-          transition: background-color 0.2s
+  margin-bottom: 1.5rem
-        
+  border-bottom: 4px solid #000
-        &.active
-          color: $primary
-          
-          &:after
-            background-color: $primary
   
-  .home-footer
+  button
-    margin-top: 2rem
+    flex: 1
-    text-align: center
+    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%

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

@@ -0,0 +1,191 @@
+// Lobby Screen styles
+
+.lobby-screen
+  display: flex
+  flex-direction: column
+  min-height: 100%
+  padding: 1.5rem
+  
+  .lobby-header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    margin-bottom: 2rem
+    flex-wrap: wrap
+    gap: 1rem
+    
+    h1
+      margin: 0
+      color: $primary
+      font-family: 'Press Start 2P', monospace
+      font-size: 1.8rem
+      text-transform: uppercase
+      position: relative
+      letter-spacing: 2px
+      
+      &:after
+        content: ''
+        position: absolute
+        bottom: -10px
+        left: 0
+        width: 100%
+        height: 4px
+        background-color: $primary
+    
+    .lobby-code
+      display: flex
+      align-items: center
+      background-color: $card-bg
+      padding: 0.75rem 1rem
+      border: 4px solid #000
+      box-shadow: 4px 4px 0 #000
+      
+      p
+        margin: 0 1rem 0 0
+        font-family: 'Press Start 2P', monospace
+        font-size: 0.7rem
+        text-transform: uppercase
+        
+      .code
+        font-family: 'Press Start 2P', monospace
+        font-weight: bold
+        color: $secondary
+        font-size: 1rem
+        letter-spacing: 2px
+        background-color: rgba(0, 0, 0, 0.3)
+        padding: 0.5rem
+        border: 2px solid $secondary
+        
+      .btn
+        padding: 0.25rem 0.5rem
+        font-size: 0.7rem
+  
+  .lobby-content
+    display: flex
+    flex-direction: column
+    flex-grow: 1
+    gap: 1.5rem
+    
+    @media (min-width: 768px)
+      flex-direction: row
+      
+    .settings-section, .players-section
+      background-color: $card-bg
+      border: 4px solid #000
+      box-shadow: 8px 8px 0 #000
+      padding: 1.5rem
+      position: relative
+      
+      h2
+        margin-top: 0
+        margin-bottom: 1rem
+        color: $secondary
+        font-family: 'Press Start 2P', monospace
+        font-size: 1.2rem
+        text-transform: uppercase
+        
+        &:after
+          content: ''
+          display: block
+          width: 100%
+          height: 4px
+          background-color: $secondary
+          margin-top: 0.5rem
+    
+    .players-list
+      flex: 1
+      background-color: $card-bg
+      border-radius: 1rem
+      padding: 1.5rem
+      
+      h2
+        margin-top: 0
+        display: flex
+        align-items: center
+        gap: 0.5rem
+        color: $primary
+        
+      ul
+        list-style: none
+        padding: 0
+        margin: 0
+        
+        li
+          padding: 0.75rem 1rem
+          margin-bottom: 0.5rem
+          border-radius: 0.5rem
+          background-color: rgba(255, 255, 255, 0.05)
+          display: flex
+          justify-content: space-between
+          align-items: center
+          
+          &.host
+            border-left: 3px solid $primary
+            
+          &.disconnected
+            opacity: 0.6
+            
+          .status-disconnected
+            font-size: 0.8rem
+            color: $danger
+            margin-left: auto
+    
+    .lobby-info
+      flex: 1
+      display: flex
+      flex-direction: column
+      
+      .settings-preview
+        background-color: $card-bg
+        border-radius: 1rem
+        padding: 1.5rem
+        margin-bottom: 1.5rem
+        
+        h3
+          margin-top: 0
+          color: $secondary
+          display: flex
+          align-items: center
+          gap: 0.5rem
+        
+      .actions
+        display: flex
+        flex-direction: column
+        gap: 1rem
+        margin-top: auto
+        
+        .warning
+          color: $warning
+          text-align: center
+          margin-top: 1rem
+          font-size: 0.9rem
+  
+  // Modal overlay for settings
+  .modal-overlay
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background-color: rgba(0, 0, 0, 0.7)
+    display: flex
+    justify-content: center
+    align-items: center
+    z-index: 100
+    
+    .modal
+      background-color: $card-bg
+      border-radius: 1rem
+      padding: 2rem
+      width: 90%
+      max-width: 500px
+      
+      h2
+        margin-top: 0
+        color: $primary
+        
+      .modal-actions
+        display: flex
+        justify-content: flex-end
+        gap: 1rem
+        margin-top: 2rem

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

@@ -7,73 +7,146 @@
   padding: 1.5rem
   position: relative
   overflow: hidden
-  
+
+  // Celebratory pixel confetti
+  &:before
+    content: ''
+    position: absolute
+    top: -20px
+    left: 0
+    width: 100%
+    height: 20px
+    background: repeating-linear-gradient(90deg, $primary 0px, $primary 10px, $accent 10px, $accent 20px, $secondary 20px, $secondary 30px)
+    animation: pixel-rain 8s linear infinite
+
+  @keyframes pixel-rain
+    0%
+      transform: translateY(-20px)
+    100%
+      transform: translateY(100vh)
+
   header
     display: flex
     justify-content: center
-    margin-bottom: 2rem
+    margin-bottom: 3rem
-    
+    position: relative
+
     h1
       margin: 0
-      color: $primary
+      color: $accent
-      text-shadow: 0 0 8px rgba($primary, 0.5)
       display: flex
       align-items: center
-      gap: 0.5rem
+      gap: 0.75rem
       font-size: 2.5rem
-      
+      font-family: 'Press Start 2P', monospace
+      text-transform: uppercase
+      letter-spacing: 3px
+      animation: winner-pulse 2s infinite alternate
+
       svg
         color: $accent
-  
+        filter: drop-shadow(2px 2px 0 #000)
+
+  @keyframes winner-pulse
+    0%
+      transform: scale(1)
+      text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000
+    100%
+      transform: scale(1.05)
+      text-shadow: 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000
+
   .winner-card
     background-color: $card-bg
-    border-radius: 1rem
+    border: 8px solid $accent
-    padding: 1.5rem
+    padding: 2rem
     margin-bottom: 2rem
     display: flex
     flex-direction: column
     gap: 1.5rem
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3)
     position: relative
     overflow: hidden
-    
+    box-shadow: 10px 10px 0 #000, 0 0 20px rgba($accent, 0.7)
-    &::after
+
+    // Trophy decoration
+    &:before
+      content: '🏆'
+      position: absolute
+      top: -15px
+      right: 20px
+      font-size: 2.5rem
+      transform: rotate(15deg)
+      filter: drop-shadow(2px 2px 0 #000)
+      z-index: 1
+
+    // Pixel border pattern
+    &:after
       content: ''
       position: absolute
       top: 0
       left: 0
       right: 0
-      height: 5px
+      bottom: 0
-      background: linear-gradient(to right, $primary, $accent)
+      background: repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgba($accent, 0.2) 10px, rgba($accent, 0.2) 20px)
-    
+      pointer-events: none
+      z-index: 0
+
     @media (min-width: 768px)
       flex-direction: row
       align-items: stretch
-    
+
+    .winner-content
+      z-index: 1
+
+      .winner-title
+        margin-top: 0
+        color: $accent
+        font-family: 'Press Start 2P', monospace
+        font-size: 1.8rem
+        text-transform: uppercase
+        margin-bottom: 1.5rem
+
+      .winner-info
+        margin-bottom: 1.5rem
+
+        .winner-song
+          font-family: 'Press Start 2P', monospace
+          font-size: 1.2rem
+          color: $text
+          margin-bottom: 0.5rem
+
+        .winner-player
+          font-family: 'Press Start 2P', monospace
+          font-size: 1rem
+          color: $primary
+          padding: 0.5rem
+          background-color: rgba($primary, 0.2)
+          border: 3px solid $primary
+          display: inline-block
+
     .winner-info
       flex: 1
-      
+
       h2
         margin: 0 0 0.5rem 0
         font-size: 1.8rem
         color: $text
-      
+
       h3
         margin: 0 0 1rem 0
         color: $text-muted
         font-size: 1.2rem
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
-      
+
       .submitter
         font-size: 0.9rem
         color: $text-muted
         margin-top: auto
-    
+
     .winner-video
       flex: 1
       min-height: 250px
       position: relative
-      
+
       .youtube-embed
         position: absolute
         top: 0
@@ -82,7 +155,7 @@
         height: 100%
         border-radius: 0.5rem
         overflow: hidden
-    
+
     .winner-placeholder
       flex: 1
       display: flex
@@ -91,59 +164,59 @@
       background-color: rgba(0, 0, 0, 0.3)
       border-radius: 0.5rem
       color: $accent
-  
+
   .results-actions
     display: flex
     flex-wrap: wrap
     gap: 1rem
     justify-content: center
     margin-bottom: 2rem
-    
+
     .btn
       padding: 0.75rem 1.5rem
       display: flex
       align-items: center
       gap: 0.5rem
-  
+
   .battle-history
     background-color: $card-bg
     border-radius: 1rem
     padding: 1.5rem
-    
+
     h3
       margin-top: 0
       color: $secondary
-    
+
     .battles-list
       display: flex
       flex-direction: column
       gap: 1.5rem
-      
+
       .battle-item
         background-color: rgba(255, 255, 255, 0.05)
         border-radius: 0.5rem
         padding: 1rem
-        
+
         .battle-header
           margin-bottom: 1rem
-          
+
           h4
             margin: 0
             font-size: 1.1rem
             color: $text
-        
+
         .battle-songs
           display: flex
           align-items: center
           gap: 1rem
-          
+
           .battle-song
             flex: 1
             padding: 1rem
             border-radius: 0.5rem
             background-color: rgba(0, 0, 0, 0.2)
             position: relative
-            
+
             &.winner
               &::after
                 content: ''
@@ -153,24 +226,24 @@
                 right: 0
                 height: 3px
                 background: $success
-            
+
             .song-info
               h5
                 margin: 0 0 0.25rem 0
                 font-size: 1rem
-              
+
               p
                 margin: 0 0 0.5rem 0
                 color: $text-muted
                 font-size: 0.9rem
-              
+
               .votes
                 display: inline-block
                 font-size: 0.8rem
                 padding: 0.25rem 0.5rem
                 border-radius: 1rem
                 background-color: rgba(255, 255, 255, 0.1)
-          
+
           .versus
             font-family: 'Bangers', cursive
             font-size: 1.5rem

client/src/common/styles/components/song-submission-screen.sass

@@ -17,20 +17,29 @@
     h1
       margin: 0
       color: $primary
-      text-shadow: 0 0 8px rgba($primary, 0.5)
       display: flex
       align-items: center
       gap: 0.5rem
+      font-family: 'Press Start 2P', monospace
+      font-size: 1.8rem
+      text-transform: uppercase
+      letter-spacing: 2px
+      
+      svg
+        filter: drop-shadow(2px 2px 0 #000)
     
     .songs-counter
-      background-color: rgba($card-bg, 0.7)
+      background-color: $card-bg
-      border-radius: 0.5rem
+      border: 4px solid #000
+      box-shadow: 4px 4px 0 #000
       padding: 0.75rem 1rem
-      font-size: 1.1rem
+      font-size: 1rem
+      font-family: 'Press Start 2P', monospace
       
       .counter
         font-weight: bold
-        color: $primary
+        color: $secondary
+        text-shadow: 1px 1px 0 #000
   
   .submission-content
     display: flex
@@ -44,11 +53,62 @@
     .songs-list
       flex: 1.5
       background-color: $card-bg
-      border-radius: 1rem
+      border: 4px solid #000
+      box-shadow: 8px 8px 0 #000
       padding: 1.5rem
       
       h2
         margin-top: 0
+        color: $secondary
+        font-family: 'Press Start 2P', monospace
+        font-size: 1.2rem
+        text-transform: uppercase
+        margin-bottom: 1.5rem
+        
+        &:after
+          content: ''
+          display: block
+          width: 100%
+          height: 4px
+          background-color: $secondary
+          margin-top: 0.5rem
+          
+    .song-item
+      margin-bottom: 1rem
+      padding: 0.75rem
+      background-color: rgba(0, 0, 0, 0.3)
+      border: 3px solid #000
+      position: relative
+      
+      .song-title
+        font-weight: bold
+        font-family: 'Press Start 2P', monospace
+        font-size: 0.9rem
+        color: $text
+        margin-bottom: 0.5rem
+        
+      .song-channel
+        font-size: 0.8rem
+        color: $text-muted
+        
+      .remove-song
+        position: absolute
+        top: 0.5rem
+        right: 0.5rem
+        background: $danger
+        color: #000
+        border: 2px solid #000
+        width: 24px
+        height: 24px
+        font-family: 'Press Start 2P', monospace
+        font-size: 0.7rem
+        display: flex
+        align-items: center
+        justify-content: center
+        cursor: pointer
+        
+        &:hover
+          transform: scale(1.1)
         display: flex
         align-items: center
         gap: 0.5rem

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

@@ -5,7 +5,7 @@
   flex-direction: column
   min-height: 100%
   padding: 1.5rem
-  
+
   .voting-header
     display: flex
     justify-content: space-between
@@ -13,187 +13,275 @@
     margin-bottom: 2rem
     flex-wrap: wrap
     gap: 1rem
-    
+
     h1
       margin: 0
       color: $primary
-      text-shadow: 0 0 8px rgba($primary, 0.5)
       display: flex
       align-items: center
       gap: 0.5rem
-    
+      text-transform: uppercase
+      font-size: 1.8rem
+
+      svg
+        filter: drop-shadow(2px 2px 0 #000)
+
     .round-info
-      background-color: rgba($card-bg, 0.7)
+      background-color: $card-bg
-      border-radius: 0.5rem
+      border: 4px solid #000
+      box-shadow: 4px 4px 0 #000
       padding: 0.75rem 1rem
       display: flex
       align-items: center
       gap: 0.75rem
-      
+      font-family: 'Press Start 2P', monospace
+      font-size: 0.8rem
+
       span
         font-weight: bold
-      
+
       .voted-badge
         background-color: $success
         color: #fff
-        border-radius: 1rem
+        border: 2px solid #000
         padding: 0.25rem 0.75rem
-        font-size: 0.85rem
+        font-size: 0.75rem
-        animation: pulse 2s infinite
+        animation: pixel-pulse 2s infinite
-  
+
-  .battle-container
+@keyframes pixel-pulse
+  0%, 100%
+    transform: scale(1)
+    opacity: 1
+  50%
+    transform: scale(1.1)
+    opacity: 0.8
+
+.battle-container
+  display: flex
+  flex-direction: column
+  align-items: center
+  gap: 2rem
+  margin-bottom: 2rem
+  perspective: 1000px
+
+.song-card
+  width: 100%
+  max-width: 600px
+  background-color: $card-bg
+  border: 4px solid #000
+  box-shadow: 8px 8px 0 #000
+  padding: 1rem
+  transition: all 0.2s ease
+  position: relative
+
+  &.selected
+    border-color: $primary
+    box-shadow: 0 0 20px $primary, 8px 8px 0 #000
+    transform: translateY(-4px)
+
+    .song-spotlight
+      opacity: 1
+
+  &.bye-winner
+    border-color: $accent
+    box-shadow: 0 0 20px $accent, 8px 8px 0 #000
+
+  .song-spotlight
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: linear-gradient(45deg, transparent 0%, rgba($primary, 0.1) 45%, rgba($primary, 0.4) 50%, rgba($primary, 0.1) 55%, transparent 100%)
+    pointer-events: none
+    opacity: 0
+    transition: opacity 0.3s ease
+
+  .song-details
+    h3
+      margin-top: 0
+      margin-bottom: 0.5rem
+      font-family: 'Press Start 2P', monospace
+      font-size: 1.1rem
+      color: $secondary
+
+    p
+      margin-top: 0
+      margin-bottom: 1rem
+      font-family: 'Press Start 2P', monospace
+      font-size: 0.8rem
+      color: $text
+
+    .auto-advance-notice
+      margin-top: 1rem
+      padding: 0.75rem
+      background-color: rgba($accent, 0.2)
+      border: 2px solid $accent
+
+      p
+        margin: 0
+        color: $accent
+        font-weight: bold
+        text-align: center
+
+  .video-container
+    margin-top: 1rem
+    border: 4px solid #000
+    position: relative
+
+    .video-overlay
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+      background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.1),  rgba(0, 0, 0, 0.1) 2px,  transparent 2px,   transparent 4px)
+      pointer-events: none
+      opacity: 0.4
+
+  .no-video
     display: flex
     flex-direction: column
     align-items: center
-    gap: 1.5rem
+    justify-content: center
-    margin-bottom: 2rem
+    height: 180px
-    perspective: 1000px
+    background-color: rgba(0, 0, 0, 0.3)
-    
+    border: 2px dashed rgba(255, 255, 255, 0.3)
-    @media (min-width: 768px)
+    margin-top: 1rem
-      flex-direction: row
+
-      align-items: stretch
+    .pulse-icon
-    
-    .song-card
-      flex: 1
-      background-color: $card-bg
-      border-radius: 1rem
-      padding: 1.5rem
-      display: flex
-      flex-direction: column
-      transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease
-      border: 2px solid transparent
-      cursor: pointer
-      position: relative
-      overflow: hidden
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4)
-      
-      &:hover:not(.voted)
-        transform: translateY(-5px)
-        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6)
-      
-      &.selected:not(.voted)
-        border-color: $secondary
-        box-shadow: 0 0 25px rgba($secondary, 0.4)
-        transform: translateY(-8px) scale(1.02)
-        
-        .song-spotlight
-          opacity: 1
-      
-      &.voted
-        cursor: default
-        
-      .song-spotlight
-        position: absolute
-        top: -50%
-        left: -50%
-        width: 200%
-        height: 200%
-        background: radial-gradient(ellipse at center, rgba($secondary, 0.3) 0%, rgba($secondary, 0) 70%)
-        pointer-events: none
-        opacity: 0
-        transition: opacity 0.5s
-        z-index: 1
-      
-      .song-details
-        margin-bottom: 1rem
-        
-        h3
-          margin: 0 0 0.25rem 0
-          font-size: 1.5rem
-        
-        p
-          margin: 0
-          color: $text-muted
-      
-      .video-container
-        width: 100%
-        flex-grow: 1
-        min-height: 200px
-        position: relative
-        margin-bottom: 0.5rem
-        
-        .youtube-embed
-          position: absolute
-          top: 0
-          left: 0
-          width: 100%
-          height: 100%
-          border-radius: 0.5rem
-          overflow: hidden
-      
-      .no-video
-        flex-grow: 1
-        min-height: 200px
-        display: flex
-        flex-direction: column
-        align-items: center
-        justify-content: center
-        background-color: rgba(0, 0, 0, 0.3)
-        border-radius: 0.5rem
-        color: $text-muted
-        font-size: 3rem
-        gap: 1rem
-        
-        span
-          font-size: 1rem
-      
-      .vote-count
-        position: absolute
-        bottom: 1rem
-        right: 1rem
-        background-color: rgba($background, 0.8)
-        padding: 0.5rem 1rem
-        border-radius: 2rem
-        font-size: 0.9rem
-        
-        &::after
-          content: ''
-          position: absolute
-          top: 0
-          left: 0
-          right: 0
-          bottom: 0
-          background: linear-gradient(to right, $primary, $secondary)
-          opacity: 0.2
-          border-radius: 2rem
-          z-index: -1
-    
-    .versus
-      font-family: 'Bangers', cursive
       font-size: 2rem
-      color: $accent
+      color: $text-muted
-      text-shadow: 0 0 10px rgba($accent, 0.5)
+      margin-bottom: 0.5rem
-      display: flex
+      animation: pixel-float 2s infinite
-      align-items: center
+
-      padding: 0 1rem
+    span
-      
+      color: $text-muted
-      @media (min-width: 768px)
+      font-size: 0.9rem
-        padding: 1rem
+
-  
+  .vote-count
-  .voting-actions
+    position: absolute
+    top: 1rem
+    right: 1rem
+    background-color: rgba(#000, 0.7)
+    border: 2px solid $primary
+    padding: 0.5rem
+    display: flex
+    flex-direction: column
+    align-items: center
+
+    .vote-number
+      font-size: 1.5rem
+      font-weight: bold
+      color: $primary
+
+    .vote-text
+      font-size: 0.7rem
+      color: $text-muted
+
+  .selection-indicator
+    position: absolute
+    top: 1rem
+    right: 1rem
+    background-color: $primary
+    color: #000
+    width: 2rem
+    height: 2rem
+    display: flex
+    align-items: center
+    justify-content: center
+    border: 2px solid #000
+    animation: pixel-pulse 1s infinite
+
+.versus
+  display: flex
+  flex-direction: column
+  align-items: center
+  margin: 0.5rem 0
+
+  .versus-text
+    font-family: 'Press Start 2P', monospace
+    font-size: 1.5rem
+    font-weight: bold
+    color: $accent
+    letter-spacing: 2px
+    animation: pixel-flash 1.5s infinite
+
+  .versus-decoration
+    width: 150px
+    height: 4px
+    background-color: $accent
+    margin: 0.5rem 0
+    position: relative
+
+    &:before, &:after
+      content: ''
+      position: absolute
+      width: 15px
+      height: 15px
+      background-color: $accent
+      transform: rotate(45deg)
+
+    &:before
+      left: -5px
+      top: -5px
+
+    &:after
+      right: -5px
+      top: -5px
+
+@keyframes pixel-flash
+  0%, 100%
+    opacity: 1
+  50%
+    opacity: 0.5
+
+@keyframes pixel-float
+  0%, 100%
+    transform: translateY(0)
+  50%
+    transform: translateY(-5px)
+
+// Voting action buttons area
+.voting-actions
+  display: flex
+  justify-content: center
+  margin: 2rem 0
+
+  .btn
+    min-width: 180px
+    font-size: 1rem
+
+// Voting status and information
+.voting-status
+  background-color: $card-bg
+  border: 4px solid #000
+  box-shadow: 4px 4px 0 #000
+  padding: 1rem
+  margin-top: auto
+  text-align: center
+
+  p
+    margin: 0 0 1rem 0
+    font-family: 'Press Start 2P', monospace
+    font-size: 0.9rem
+    color: $text
+
+  .votes-count
     display: flex
     justify-content: center
-    margin-bottom: 2rem
+    align-items: center
-    
+    gap: 0.5rem
-    .btn
+    font-family: 'Press Start 2P', monospace
-      padding: 0.75rem 2rem
+    font-size: 0.8rem
-      font-size: 1.1rem
+
-  
+    span
-  .voting-status
+      color: $primary
-    margin-top: auto
+      font-weight: bold
-    text-align: center
+
-    
+// Bye container for automatic advances
-    p
+.bye-container
-      color: $text-muted
+  display: flex
-      font-style: italic
+  justify-content: center
-      margin-bottom: 0.5rem
+  margin: 2rem 0
-    
+  animation: pixel-float 3s infinite ease-in-out
-    .votes-count
-      display: inline-block
-      padding: 0.5rem 1rem
-      background-color: rgba($card-bg, 0.7)
-      border-radius: 0.5rem
-      
-      span:first-child
-        font-weight: bold
-        color: $secondary

client/src/common/styles/components/youtube-embed.sass

@@ -4,8 +4,38 @@
   width: 100%
   height: 100%
   background-color: #000
-  border-radius: 0.5rem
   overflow: hidden
+  border: 4px solid #000
+  position: relative
   
+  // Pixel art CRT screen effect
+  &:before
+    content: ''
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.1) 50%)
+    background-size: 100% 4px
+    z-index: 2
+    pointer-events: none
+    opacity: 0.4
+  
+  // Video glow effect  
+  &:after
+    content: ''
+    position: absolute
+    top: -3px
+    left: -3px
+    right: -3px
+    bottom: -3px
+    background-color: transparent
+    box-shadow: 0 0 10px rgba($secondary, 0.5)
+    z-index: -1
+    pointer-events: none
+    
   iframe
     border: none
+    z-index: 1
+    position: relative

client/src/common/styles/components/youtube-search.sass

@@ -3,54 +3,107 @@
 
 .search-group
   margin-bottom: 1.5rem
-  
+
   .search-container
     position: relative
     margin-bottom: 1rem
-    
+
     .search-input
       width: 100%
       padding: 0.75rem 2.5rem 0.75rem 1rem
-      border-radius: 0.5rem
+      background: rgba(0, 0, 0, 0.3)
-      background: rgba(255, 255, 255, 0.1)
+      border: 3px solid #000
-      border: 1px solid rgba(255, 255, 255, 0.2)
       color: $text
       font-size: 1rem
-      
+      font-family: 'Press Start 2P', monospace
+      font-size: 0.8rem
+      box-shadow: 4px 4px 0 #000
+
       &:focus
         outline: none
-        border-color: $primary
+        border-color: $secondary
-        box-shadow: 0 0 0 3px rgba($primary, 0.3)
+        box-shadow: 4px 4px 0 #000, 0 0 8px rgba($secondary, 0.5)
-    
+
     .spinner-icon, .clear-icon
       position: absolute
       top: 50%
       right: 1rem
       transform: translateY(-50%)
       color: $text-muted
-      
+      filter: drop-shadow(1px 1px 0 #000)
+
     .clear-icon
       cursor: pointer
+
       &:hover
         color: $text
+        transform: translateY(-50%) scale(1.2)
+        transition: all 0.2s ease
 
   .selected-video
-    background: rgba($card-bg, 0.6)
+    background: $card-bg
-    border-radius: 0.75rem
+    border: 3px solid #000
+    box-shadow: 4px 4px 0 #000
     padding: 1rem
     margin-bottom: 1.5rem
+
+    .video-details
+      h3
+        margin-top: 0.5rem
+        margin-bottom: 0.5rem
+        color: $secondary
+        font-family: 'Press Start 2P', monospace
+        font-size: 0.9rem
+
+      p
+        color: $text-muted
+        margin: 0 0 0.5rem
+        font-family: 'Press Start 2P', monospace
+        font-size: 0.7rem
+
+    .btn
+      margin-top: 1rem
+
+  .search-results
+    .result-item
+      background: rgba($card-bg, 0.7)
+      border: 2px solid #000
+      margin-bottom: 0.5rem
+      padding: 0.75rem
+      cursor: pointer
+      transition: all 0.2s ease
+
+      &:hover
+        border-color: $primary
+        background: rgba($card-bg, 0.9)
+        transform: translateX(4px)
+
+      &.selected
+        border-color: $secondary
+        border-width: 3px
+        box-shadow: 0 0 8px rgba($secondary, 0.5)
+
+      .result-title
+        font-family: 'Press Start 2P', monospace
+        font-size: 0.8rem
+        margin: 0 0 0.25rem
+        color: $text
+
+      .result-channel
+        font-size: 0.7rem
+        color: $text-muted
     border: 1px solid rgba($primary, 0.3)
-    
+
     .preview-header
       display: flex
       justify-content: space-between
       align-items: center
       margin-bottom: 0.75rem
-      
+
       h4
         margin: 0
         color: $primary
-        
+
       .preview-toggle
         background: transparent
         border: none
@@ -59,43 +112,44 @@
         padding: 0.25rem 0.5rem
         border-radius: 0.25rem
         font-size: 0.85rem
-        
+
         &:hover
           background: rgba($secondary, 0.15)
-    
+
     .video-details
       display: flex
       gap: 1rem
       margin-bottom: 1rem
-      
+
       .selected-thumbnail
         width: 120px
         height: 90px
         object-fit: cover
         border-radius: 0.25rem
-        
+
       .selected-info
         display: flex
         flex-direction: column
         justify-content: center
-        
+
         h4
           margin: 0 0 0.25rem 0
           font-size: 1rem
-          
+
         p
           margin: 0
           color: $text-muted
           font-size: 0.9rem
-          
+
     .video-preview
       position: relative
-      padding-bottom: 56.25% // 16:9 aspect ratio
+      padding-bottom: 56.25%
+      // 16:9 aspect ratio
       height: 0
       overflow: hidden
       border-radius: 0.5rem
       margin-top: 1rem
-      
+
       iframe
         position: absolute
         top: 0
@@ -103,14 +157,14 @@
         width: 100%
         height: 100%
         border-radius: 0.5rem
-        
+
   .search-results
     background: rgba($card-bg, 0.6)
     border-radius: 0.75rem
     padding: 1rem
     max-height: 400px
     overflow-y: auto
-    
+
     h4
       margin-top: 0
       margin-bottom: 0.75rem
@@ -118,7 +172,7 @@
       font-size: 0.9rem
       text-transform: uppercase
       letter-spacing: 0.05em
-      
+
     .search-result
       display: flex
       padding: 0.75rem
@@ -127,25 +181,25 @@
       cursor: pointer
       transition: background-color 0.2s ease
       margin-bottom: 0.5rem
-      
+
       &:hover
         background-color: rgba(255, 255, 255, 0.05)
-        
+
       &.selected
         background-color: rgba($primary, 0.15)
         border-left: 3px solid $primary
-        
+
       .result-thumbnail-container
         position: relative
         width: 120px
         flex-shrink: 0
-        
+
         .result-thumbnail
           width: 120px
           height: 68px
           object-fit: cover
           border-radius: 0.25rem
-          
+
         .preview-button
           position: absolute
           right: 0.25rem
@@ -161,20 +215,20 @@
           justify-content: center
           opacity: 0.7
           cursor: pointer
-          
+
           &:hover
             opacity: 1
             background: rgba($secondary, 0.8)
-            
+
       .result-info
         flex-grow: 1
-        
+
         h4
           margin: 0 0 0.25rem 0
           font-size: 0.95rem
           text-transform: none
           letter-spacing: normal
-          
+
         p
           margin: 0
           color: $text-muted

client/src/common/styles/forms.sass

@@ -5,12 +5,17 @@
   
   label
     display: block
-    margin-bottom: 0.5rem
+    margin-bottom: 0.75rem
     font-weight: 500
+    font-family: 'Press Start 2P', monospace
+    font-size: 0.8rem
+    color: $secondary
+    text-transform: uppercase
     
     .required
       color: $danger
       margin-left: 0.25rem
+      animation: pixel-flash 1s infinite
   
   input[type="text"],
   input[type="number"],
@@ -21,31 +26,44 @@
   select
     width: 100%
     padding: 0.75rem
-    background-color: rgba(0, 0, 0, 0.4)
+    background-color: $card-bg
-    border: 2px solid rgba(255, 255, 255, 0.3)
+    border: 3px solid #000
-    border-radius: 0.5rem
     color: $text
     font-size: 1rem
-    transition: all 0.3s ease
+    font-family: 'Press Start 2P', monospace
+    font-size: 0.9rem
+    transition: all 0.2s ease
     box-sizing: border-box
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
+    box-shadow: 4px 4px 0 #000
-    
-    &:focus
-      border-color: $secondary
-      box-shadow: 0 0 15px rgba($secondary, 0.5)
-      outline: none
-      transform: scale(1.02)
-      
-    &::placeholder
-      color: rgba(255, 255, 255, 0.5)
     
     &:focus
       border-color: $primary
-      box-shadow: 0 0 0 2px rgba($primary, 0.25)
+      box-shadow: 4px 4px 0 #000, 0 0 8px $primary
       outline: none
-    
+      
     &::placeholder
       color: rgba(255, 255, 255, 0.4)
+      
+  // Pixel art checkbox
+  input[type="checkbox"]
+    appearance: none
+    width: 24px
+    height: 24px
+    background-color: $card-bg
+    border: 3px solid #000
+    position: relative
+    cursor: pointer
+    
+    &:checked:after
+      content: ''
+      position: absolute
+      left: 6px
+      top: 2px
+      width: 6px
+      height: 12px
+      border: solid $primary
+      border-width: 0 3px 3px 0
+      transform: rotate(45deg)
   
   &.checkbox
     display: flex

client/src/common/styles/main.sass

@@ -15,27 +15,42 @@
 html, body
   margin: 0
   padding: 0
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
+  font-family: 'Press Start 2P', 'Courier New', monospace
-  background: linear-gradient(45deg, #AE00FF 0%, #FF007F 100%) fixed
+  background: linear-gradient(45deg, #6600cc 0%, #ff0066 100%) fixed
   color: $text
   height: 100%
   overflow-x: hidden
+  image-rendering: pixelated
+
+// Pixel art border mixin
+@mixin pixel-border($color: $primary, $size: 4px)
+  border: $size solid $color
+  box-shadow: 0 0 0 2px darken($color, 30%)
+  position: relative
 
 #root, .app
   height: 100%
   width: 100%
   display: flex
   flex-direction: column
+  background-image: url('/background.svg')
+  background-size: 32px 32px
+  background-repeat: repeat
 
 a
-  color: $primary
+  color: $secondary
   text-decoration: none
+  font-weight: bold
+  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000
   &:hover
-    text-decoration: underline
+    color: lighten($secondary, 20%)
+    transform: scale(1.05)
+    transition: all 0.2s ease
 
 h1, h2, h3
-  font-family: 'Bangers', cursive
+  font-family: 'Press Start 2P', 'VT323', monospace
-  letter-spacing: 1px
+  letter-spacing: 2px
+  text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000
 
 // Background elements
 .background-elements