Liedkampf/client/src/common/styles/components/battle-result-screen.sass

// Battle Result Screen styles

.battle-result-screen
  display: flex
  flex-direction: column
  min-height: 100%
  padding: 1.5rem
  position: relative
  overflow: hidden
  
  header
    display: flex
    justify-content: center
    align-items: center
    flex-direction: column
    margin-bottom: 2rem
    
    h1
      margin: 0
      color: $accent
      display: flex
      align-items: center
      gap: 0.75rem
      font-size: 2.2rem
      font-family: 'Press Start 2P', monospace
      text-transform: uppercase
      animation: winner-pulse 2s infinite alternate
      
      svg
        color: $accent
        filter: drop-shadow(2px 2px 0 #000)
    
    .countdown
      margin-top: 1rem
      font-family: 'Press Start 2P', monospace
      font-size: 0.9rem
      color: $text-muted
      padding: 0.8rem 1.2rem
      background-color: rgba(0, 0, 0, 0.3)
      border-radius: 1rem
      animation: pulse 1s infinite alternate
      display: flex
      align-items: center
      gap: 0.5rem
      
      svg
        color: $accent
        margin-right: 0.5rem

  .winner-announcement
    display: flex
    flex-direction: column
    align-items: center
    margin-bottom: 2rem
    
    .song-cards
      display: flex
      flex-direction: column
      width: 100%
      max-width: 700px
      gap: 2rem
      
      @media (min-width: 768px)
        flex-direction: row
        align-items: flex-start
      
      .song-card
        position: relative
        background-color: rgba(0, 0, 0, 0.3)
        padding: 1.5rem
        border-radius: 1rem
        
        &.winner
          flex: 3
          border: 6px solid $accent
          box-shadow: 0 0 20px rgba($accent, 0.3)
          transform: scale(1.05)
          z-index: 1
          
          .victory-badge
            position: absolute
            top: -12px
            right: 10px
            background-color: $accent
            color: white
            font-family: 'Press Start 2P', monospace
            font-size: 0.7rem
            padding: 0.5rem 1rem
            border-radius: 0.5rem
            display: flex
            align-items: center
            gap: 0.5rem
            box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3)
            
            svg
              font-size: 0.8rem
        
        &.loser
          flex: 2
          opacity: 0.7
          filter: saturate(0.7)
          
          .versus
            position: absolute
            top: 50%
            left: -30px
            font-family: 'Bangers', cursive
            font-size: 2.5rem
            color: $accent
            transform: translateY(-50%)
            text-shadow: 0 0 5px rgba($accent, 0.5)
            
            @media (max-width: 767px)
              top: -25px
              left: 50%
              transform: translateX(-50%)
        
        .song-info
          margin-bottom: 1.5rem
          
          h2, h3
            margin: 0 0 0.5rem 0
            font-family: 'Press Start 2P', monospace
            
          h2
            font-size: 1.4rem
            color: $text
            margin-right: 70px
            
          h3
            font-size: 1.2rem
            color: $text
          
          .artist
            color: $text-muted
            font-size: 1.1rem
            margin-bottom: 1rem
            
          .submitter
            font-size: 0.9rem
            color: $text-muted
            font-style: italic
            margin-bottom: 0.5rem
          
          .vote-count
            display: inline-block
            padding: 0.5rem 1rem
            background-color: rgba(0, 0, 0, 0.3)
            border-radius: 1rem
            font-family: 'Press Start 2P', monospace
            font-size: 0.8rem
            
            .votes
              color: $text
        
        .winner-video
          width: 100%
          aspect-ratio: 16 / 9
          border-radius: 0.5rem
          overflow: hidden
          
        .no-video
          width: 100%
          aspect-ratio: 16 / 9
          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
          
          .pulse-icon
            font-size: 2rem
            margin-bottom: 1rem
            animation: pulse 2s infinite

  .battle-actions
    display: flex
    justify-content: center
    margin-top: auto
    padding-top: 1.5rem
    
    .btn
      padding: 1rem 2rem
      font-size: 1.1rem
      display: flex
      align-items: center
      gap: 0.5rem
      
      &.pixelated
        position: relative
        
        .pixel-corner
          position: absolute
          width: 8px
          height: 8px
          background-color: $primary
          
          &.tl
            top: -4px
            left: -4px
          
          &.tr
            top: -4px
            right: -4px
          
          &.bl
            bottom: -4px
            left: -4px
          
          &.br
            bottom: -4px
            right: -4px

// Confetti animation
.confetti
  position: absolute
  width: 10px
  height: 20px
  transform-origin: center bottom
  animation: confetti-fall 3s linear forwards
  z-index: -1

@keyframes confetti-fall
  0%
    transform: translateY(-100vh) rotate(0deg)
  100%
    transform: translateY(100vh) rotate(360deg)

@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

@keyframes pulse
  0%
    opacity: 0.7
  100%
    opacity: 1