Add screens and components for Song Battle game, including Home, Lobby, Voting, Results, and Song Submission screens; implement YouTube video embedding and styles

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

@@ -0,0 +1,199 @@
+// Voting Screen styles
+
+.voting-screen
+  display: flex
+  flex-direction: column
+  min-height: 100%
+  padding: 1.5rem
+  
+  .voting-header
+    display: flex
+    justify-content: space-between
+    align-items: center
+    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
+    
+    .round-info
+      background-color: rgba($card-bg, 0.7)
+      border-radius: 0.5rem
+      padding: 0.75rem 1rem
+      display: flex
+      align-items: center
+      gap: 0.75rem
+      
+      span
+        font-weight: bold
+      
+      .voted-badge
+        background-color: $success
+        color: #fff
+        border-radius: 1rem
+        padding: 0.25rem 0.75rem
+        font-size: 0.85rem
+        animation: pulse 2s infinite
+  
+  .battle-container
+    display: flex
+    flex-direction: column
+    align-items: center
+    gap: 1.5rem
+    margin-bottom: 2rem
+    perspective: 1000px
+    
+    @media (min-width: 768px)
+      flex-direction: row
+      align-items: stretch
+    
+    .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
+      text-shadow: 0 0 10px rgba($accent, 0.5)
+      display: flex
+      align-items: center
+      padding: 0 1rem
+      
+      @media (min-width: 768px)
+        padding: 1rem
+  
+  .voting-actions
+    display: flex
+    justify-content: center
+    margin-bottom: 2rem
+    
+    .btn
+      padding: 0.75rem 2rem
+      font-size: 1.1rem
+  
+  .voting-status
+    margin-top: auto
+    text-align: center
+    
+    p
+      color: $text-muted
+      font-style: italic
+      margin-bottom: 0.5rem
+    
+    .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