// 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
      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: $card-bg
      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: 2px solid #000
        padding: 0.25rem 0.75rem
        font-size: 0.75rem
        animation: pixel-pulse 2s infinite

@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
  box-sizing: border-box
  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
        
      .host-info
        margin-top: 0.5rem
        color: #fff
        font-style: italic
        font-size: 0.7rem

  .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
    justify-content: center
    height: 180px
    background-color: rgba(0, 0, 0, 0.3)
    border: 2px dashed rgba(255, 255, 255, 0.3)
    margin-top: 1rem

    .pulse-icon
      font-size: 2rem
      color: $text-muted
      margin-bottom: 0.5rem
      animation: pixel-float 2s infinite

    span
      color: $text-muted
      font-size: 0.9rem

  .vote-count
    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
  flex-direction: column
  align-items: center
  margin: 2rem 0

  .btn
    min-width: 180px
    font-size: 1rem
    
    &.offline
      background-color: $secondary
      position: relative
      
  .offline-notice
    margin-top: 1rem
    padding: 0.5rem
    background-color: rgba($secondary, 0.2)
    border: 2px solid $secondary
    max-width: 400px
    text-align: center
    font-size: 0.7rem
    
    svg
      margin-right: 0.5rem
      color: $secondary
      
  .offline-vote-status
    margin-top: 1rem
    padding: 0.5rem
    background-color: rgba($success, 0.2)
    border: 2px solid $success
    max-width: 400px
    text-align: center
    font-size: 0.7rem
    color: $success
    animation: pulse-opacity 2s infinite
    
    &.error
      background-color: rgba(#f44336, 0.2)
      border-color: #f44336
      color: #f44336

// 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
    
  .reconnecting-notice
    margin: 0.5rem auto 1rem auto
    padding: 0.5rem
    background-color: rgba($secondary, 0.2)
    border: 2px solid $secondary
    max-width: 400px
    text-align: center
    font-size: 0.7rem
    color: $secondary
    animation: pulse-opacity 2s infinite
    
  .auto-advance-notice
    margin: 1rem auto
    max-width: 400px
    padding: 0.75rem
    background-color: rgba($secondary, 0.2)
    border: 2px solid $secondary
    text-align: center
    color: $text-muted
    font-style: italic

  .votes-count
    display: flex
    justify-content: center
    align-items: center
    gap: 0.5rem
    font-family: 'Press Start 2P', monospace
    font-size: 0.8rem
    margin-bottom: 1rem

    span
      color: $primary
      font-weight: bold
      
    .offline-badge
      color: $secondary
      margin-left: 0.5rem
      font-size: 0.7rem
      
  // Player votes list styling
  .player-votes
    background-color: rgba(0, 0, 0, 0.2)
    border: 2px dashed rgba(255, 255, 255, 0.2)
    border-radius: 0.5rem
    padding: 0.75rem
    margin-top: 0.5rem
    
    h4
      margin: 0 0 0.75rem 0
      font-family: 'Press Start 2P', monospace
      font-size: 0.8rem
      color: $secondary
      position: relative
      display: inline-block
      
      &:before, &:after
        content: '>'
        position: absolute
        color: $accent
        animation: pixel-blink 1s infinite
      
      &:before
        left: -1rem
      
      &:after
        right: -1rem
    
    .players-voted-list
      list-style: none
      padding: 0
      margin: 0
      display: grid
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))
      gap: 0.5rem
      
      li
        padding: 0.5rem
        border: 2px solid transparent
        font-size: 0.75rem
        display: flex
        align-items: center
        justify-content: space-between
        transition: all 0.2s ease
        position: relative
        overflow: hidden
        
        &.voted
          background-color: rgba($success, 0.1)
          border-color: rgba($success, 0.5)
          
          .vote-icon
            color: $success
            margin-left: 0.5rem
            filter: drop-shadow(0 0 2px rgba($success, 0.8))
            animation: pixel-pulse 1.5s infinite
          
          &:before
            content: ''
            position: absolute
            top: 0
            left: 0
            width: 100%
            height: 100%
            background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba($success, 0.1) 5px, rgba($success, 0.1) 10px)
            z-index: -1
        
        &.not-voted
          background-color: rgba(255, 255, 255, 0.05)
          border-color: rgba(255, 255, 255, 0.1)
          opacity: 0.7
          
        &.offline-voted
          background-color: rgba($secondary, 0.1)
          border-color: rgba($secondary, 0.5)
          
          .offline-icon
            color: $secondary
            margin-left: 0.5rem
            animation: pixel-pulse 1.5s infinite

@keyframes pulse-opacity
  0%, 100%
    opacity: 1
  50%
    opacity: 0.5

@keyframes pixel-blink
  0%, 100%
    opacity: 1
  50%
    opacity: 0.3

// Bye container for automatic advances
.bye-container
  display: flex
  justify-content: center
  margin: 2rem 0
  animation: pixel-float 3s infinite ease-in-out

// Vote Progress Bar
.vote-progress-container
  width: 100%
  margin-top: 1.5rem
  margin-bottom: 2rem
  padding: 0 0.5rem
  animation: fade-in-up 0.5s ease forwards
  position: relative

@keyframes fade-in-up
  from
    opacity: 0
    transform: translateY(10px)
  to
    opacity: 1
    transform: translateY(0)

.vote-progress-labels
  display: flex
  justify-content: space-between
  margin-bottom: 0.5rem
  font-size: 0.8rem
  font-family: 'Press Start 2P', monospace

  .vote-label
    padding: 0.5rem 0.75rem
    background-color: rgba(0, 0, 0, 0.7)
    border: 2px solid #000
    transform: translateY(0)
    transition: transform 0.3s ease
    position: relative
    z-index: 2

    &.left
      color: $primary
      border-left-color: $primary
      border-top-color: $primary
      border-bottom-color: $primary
      box-shadow: -3px 3px 0 rgba($primary, 0.3)
      &:hover
        transform: translateY(-3px)
        box-shadow: -5px 5px 0 rgba($primary, 0.5)
    
    &.right
      color: $accent
      border-right-color: $accent
      border-top-color: $accent
      border-bottom-color: $accent
      box-shadow: 3px 3px 0 rgba($accent, 0.3)
      &:hover
        transform: translateY(-3px)
        box-shadow: 5px 5px 0 rgba($accent, 0.5)

    &.winning
      background-color: rgba(#000, 0.8)
      border-width: 3px
      transform: translateY(-3px)
      position: relative
      z-index: 3
      animation: winner-pulse 1.5s infinite alternate
      
      &.left
        box-shadow: -5px 5px 0 rgba($primary, 0.7), 0 0 15px rgba($primary, 0.7)
      
      &.right
        box-shadow: 5px 5px 0 rgba($accent, 0.7), 0 0 15px rgba($accent, 0.7)

    &.landslide
      transform: translateY(-5px)
      font-weight: bold
      animation: winner-landslide-pulse 1s infinite alternate
      
      &.left
        box-shadow: -6px 6px 0 rgba($primary, 0.7), 0 0 25px rgba($primary, 0.9)
      
      &.right
        box-shadow: 6px 6px 0 rgba($accent, 0.7), 0 0 25px rgba($accent, 0.9)

@keyframes winner-landslide-pulse
  from
    box-shadow: -6px 6px 0 rgba($primary, 0.7), 0 0 25px rgba($primary, 0.9)
  to
    box-shadow: -6px 6px 0 rgba($primary, 0.7), 0 0 40px rgba($primary, 1)

.vote-progress-bar
  height: 36px
  background-color: #222
  border: 4px solid #000
  position: relative
  overflow: hidden
  display: flex
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)

  .vote-progress-fill
    height: 100%
    transition: width 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)
    position: relative
    min-width: 0

    &.song1
      background: linear-gradient(to right, darken($primary, 20%), $primary)
      box-shadow: 0 8px 24px rgba($primary, 0.3), 0 0 10px rgba($primary, 0.2)
      animation: pulse-song1 2s infinite alternate

    &.song2
      background: linear-gradient(to left, darken($accent, 20%), $accent)
      box-shadow: 0 8px 24px rgba($accent, 0.3), 0 0 10px rgba($accent, 0.2)
      animation: pulse-song2 2s infinite alternate
    
    .vote-progress-decoration
      position: absolute
      top: 0
      bottom: 0
      width: 20px
      background-size: 4px 4px
      opacity: 0.6
      
      &.left
        right: 10px
        background-image: linear-gradient(45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent)
        animation: move-stripes-left 20s linear infinite
      
      &.right
        left: 10px
        background-image: linear-gradient(-45deg, rgba(255,255,255,0.4) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 75%, transparent 75%, transparent)
        animation: move-stripes-right 20s linear infinite

  &.landslide
    border-width: 5px
    animation: landslide-border-pulse 1.5s infinite alternate
    
    &.song1
      border-color: lighten($primary, 20%)
    
    &.song2
      border-color: lighten($accent, 20%)

  .vote-progress-divider
    position: absolute
    top: -8px
    bottom: -8px
    width: 6px
    background-color: #fff
    transform: translateX(-50%)
    z-index: 10
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 5px rgba(0, 0, 0, 0.5)
    transition: left 1.2s cubic-bezier(0.34, 1.56, 0.64, 1)
    &:before, &:after
      content: ''
      position: absolute
      left: 50%
      width: 12px
      height: 12px
      background-color: #fff
      transform: translateX(-50%) rotate(45deg)
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 3px rgba(0, 0, 0, 0.5)
    
    &:before
      top: 0
    
    &:after
      bottom: 0

.vote-progress-percentages
  display: flex
  justify-content: space-between
  margin-top: 0.75rem
  font-family: 'Press Start 2P', monospace
  font-size: 1rem

  .vote-percent
    font-weight: bold
    text-shadow: 2px 2px 0 #000
    padding: 0.4rem 0.75rem
    background-color: rgba(0, 0, 0, 0.7)
    border: 2px solid #000
    letter-spacing: 1px
    position: relative
    
    &.left
      color: $primary
      border-left-color: $primary
      border-bottom-color: $primary
      transform: skew(-10deg)
      box-shadow: -3px 3px 0 rgba($primary, 0.4)
    
    &.right
      color: $accent
      border-right-color: $accent
      border-bottom-color: $accent
      transform: skew(10deg)
      box-shadow: 3px 3px 0 rgba($accent, 0.4)

    &.winning
      font-size: 1.2rem
      font-weight: bolder
      animation: winner-text-pulse 2s infinite alternate
      
      &.left
        box-shadow: -5px 5px 0 rgba($primary, 0.5), 0 0 10px rgba($primary, 0.5)
      
      &.right
        box-shadow: 5px 5px 0 rgba($accent, 0.5), 0 0 10px rgba($accent, 0.5)

    &.landslide
      font-size: 1.3rem
      animation: landslide-text-pulse 1s infinite alternate
      
      &.left
        box-shadow: -6px 6px 0 rgba($primary, 0.6), 0 0 15px rgba($primary, 0.6)
      
      &.right
        box-shadow: 6px 6px 0 rgba($accent, 0.6), 0 0 15px rgba($accent, 0.6)

@keyframes landslide-text-pulse
  from
    text-shadow: 2px 2px 0 #000, 0 0 10px currentColor
  to
    text-shadow: 2px 2px 0 #000, 0 0 25px currentColor, 0 0 5px #fff

// Bye container for automatic advances
.bye-container
  display: flex
  justify-content: center
  margin: 2rem 0
  animation: pixel-float 3s infinite ease-in-out