@import "@/common/styles/colors"


.game-page
  display: flex
  flex-direction: column
  align-items: center
  height: 100vh
  width: 100vw
  position: relative
  animation: page-fade-in 1s ease-in-out
  overflow: hidden

  &.with-otamatone
    .game-layout
      height: calc(100vh - 280px)
      padding-bottom: 20px
      
    .chat-panel
      max-height: calc(100vh - 300px)
  
  .game-layout
    display: flex
    width: 100%
    height: calc(100vh - 180px)
    justify-content: space-between
    align-items: stretch
    padding: 0 20px
    z-index: 2
    position: relative
    transition: height 0.3s ease

  .main-content
    flex: 1
    padding: 20px 30px
    overflow-y: auto
    display: flex
    flex-direction: column
    align-items: center
    min-width: 0
    margin-right: 20px

  .chat-panel
    width: 280px
    height: 100%
    max-height: calc(100vh - 200px)
    background: rgba(255, 255, 255, 0.08)
    backdrop-filter: blur(10px)
    border-radius: 20px
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
    border: 1px solid rgba(255, 255, 255, 0.2)
    display: flex
    flex-direction: column
    overflow: hidden
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), max-height 0.3s ease
    animation: slide-in-right 0.5s ease-out
    
    .chat-header
      display: flex
      align-items: center
      padding: 12px 15px
      background: rgba(30, 30, 30, 0.5)
      border-bottom: 1px solid rgba(255, 255, 255, 0.2)
      
      svg
        font-size: 16px
        color: $white
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
        animation: icon-pulse 3s infinite alternate ease-in-out

      .chat-title
        margin-left: 10px
        font-size: 16px
        color: $white
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.3)

    .chat-messages
      flex: 1
      padding: 10px
      overflow-y: auto
      color: $white
      font-size: 14px
      
      &::-webkit-scrollbar
        width: 4px
        background: transparent
        
      &::-webkit-scrollbar-thumb
        background: rgba(255, 255, 255, 0.2)
        border-radius: 2px
        
        &:hover
          background: rgba(255, 255, 255, 0.3)

      .message
        margin-bottom: 8px
        padding: 6px 10px
        border-radius: 8px
        background: rgba(255, 255, 255, 0.05)
        word-break: break-word
        
        &:hover
          background: rgba(255, 255, 255, 0.1)

        .message-sender
          font-weight: bold
          color: $yellow
          margin-right: 4px
          font-size: 13px

        .message-text
          font-size: 13px

        .message-text.system
          font-style: italic
          color: rgba(255, 255, 255, 0.6)

      .system-message
        text-align: center
        color: rgba(255, 255, 255, 0.6)
        padding: 4px 0
        font-size: 12px

    .chat-input
      display: flex
      padding: 10px
      background: rgba(30, 30, 30, 0.5)
      border-top: 1px solid rgba(255, 255, 255, 0.2)

      input
        flex: 1
        padding: 8px 12px
        border: none
        border-radius: 8px
        outline: none
        background: rgba(0, 0, 0, 0.3)
        color: $white
        font-size: 14px
        
        &:focus
          box-shadow: 0 0 15px rgba(255, 255, 255, 0.2)

      .send-button
        margin-left: 8px
        width: 36px
        height: 36px
        background: linear-gradient(135deg, $purple, $blue)
        color: $white
        border: none
        border-radius: 50%
        cursor: pointer
        display: flex
        align-items: center
        justify-content: center
        transition: all 0.2s ease
        
        &:hover
          transform: translateY(-2px)
          box-shadow: 0 4px 15px rgba(102, 204, 255, 0.5)
        
        &:active
          transform: translateY(0)

.game-header
  display: flex
  justify-content: space-between
  align-items: center
  width: 100%
  padding: 15px 30px
  margin-bottom: 10px
  border-bottom: 1px solid rgba(255, 255, 255, 0.1)
  background: rgba(0, 0, 0, 0.2)
  backdrop-filter: blur(10px)
  
  h2
    font-size: 32px
    background: linear-gradient(135deg, $yellow, $pink)
    background-clip: text
    -webkit-background-clip: text
    color: transparent
    margin: 0
    animation: pulse 3s infinite alternate ease-in-out
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3)
  
  .game-role, .game-round
    background: rgba(255, 255, 255, 0.1)
    padding: 8px 15px
    border-radius: 20px
    border: 1px solid rgba(255, 255, 255, 0.2)
    display: flex
    align-items: center
    font-size: 14px
    
    svg
      margin-right: 8px
      color: $yellow

.submit-guess-button, .next-round-button, button:not(.send-button)
  background: linear-gradient(135deg, $purple, $blue)
  color: #fff
  border: none
  border-radius: 10px
  padding: 12px 25px
  font-size: 16px
  font-weight: bold
  cursor: pointer
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
  display: inline-flex
  align-items: center
  justify-content: center
  position: relative
  overflow: hidden
  
  &:before
    content: ""
    position: absolute
    top: -50%
    left: -50%
    width: 200%
    height: 200%
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
    opacity: 0
    transition: opacity 0.5s ease
  
  svg
    margin-right: 10px
  
  &:hover:not(.disabled)
    transform: translateY(-5px)
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 204, 255, 0.4)
    
    &:before
      opacity: 1
  
  &:active:not(.disabled)
    transform: translateY(-2px)
    
  &.disabled
    opacity: 0.5
    cursor: not-allowed
    background: linear-gradient(135deg, #777, #555)

.waiting-phase
  text-align: center
  padding: 100px 0
  animation: fade-in 0.5s ease-out
  
  h3
    font-size: 24px
    color: $white
    margin-bottom: 20px
    animation: pulse 2s infinite alternate ease-in-out

.composing-phase, .guessing-phase, .results-phase
  width: 100%
  max-width: 800px
  margin: 0 auto
  animation: fade-in 0.5s ease-out

.song-display
  text-align: center
  display: flex
  flex-direction: column
  align-items: center
  width: 100%
  margin-bottom: 30px
  
  .song-card
    display: flex
    flex-direction: row
    align-items: center
    background: rgba(40, 40, 60, 0.85)
    padding: 20px
    border-radius: 15px
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4)
    backdrop-filter: blur(10px)
    border: 1px solid rgba(255, 255, 255, 0.15)
    max-width: 500px
    margin: 20px auto
    transition: all 0.3s ease
    
    &:hover
      transform: translateY(-5px)
      border-color: rgba(255, 255, 255, 0.3)
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.1)

    img
      width: 120px
      height: 120px
      object-fit: cover
      border-radius: 8px
      margin-right: 20px
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5)
      border: 2px solid rgba(255, 255, 255, 0.2)

  .music-controls
    margin-top: 30px
    width: 100%
    max-width: 400px
    display: flex
    flex-direction: column
    align-items: center

  .chat-window
    width: 50%
    height: 450px
    background: rgba(255, 255, 255, 0.08)
    backdrop-filter: blur(10px)
    border-radius: 20px
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.1)
    border: 1px solid rgba(255, 255, 255, 0.2)
    display: flex
    flex-direction: column
    overflow: hidden
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    will-change: box-shadow, border
    transform: translateZ(0)
    backface-visibility: hidden
    animation: card-float 6s infinite ease-in-out alternate 0.5s
    
    &:hover
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 255, 255, 0.15)
      border: 1px solid rgba(255, 255, 255, 0.4)

    .chat-header
      display: flex
      align-items: center
      padding: 15px
      background: rgba(30, 30, 30, 0.5)
      border-bottom: 1px solid rgba(255, 255, 255, 0.2)
      
      svg
        font-size: 18pt
        color: $white
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
        animation: icon-pulse 3s infinite alternate ease-in-out

      .chat-title
        margin-left: 15px
        font-size: 18pt
        color: $white
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)

    .chat-messages
      flex: 1
      padding: 10px
      overflow-y: auto
      color: $white
      position: relative
      
      &::-webkit-scrollbar
        width: 8px
        background: rgba(0, 0, 0, 0.2)
        border-radius: 4px
      
      &::-webkit-scrollbar-thumb
        background: rgba(255, 255, 255, 0.2)
        border-radius: 4px
        
        &:hover
          background: rgba(255, 255, 255, 0.3)

      .message
        margin-bottom: 10px
        padding: 8px 12px
        border-radius: 12px
        background: rgba(255, 255, 255, 0.05)
        backdrop-filter: blur(5px)
        border: 1px solid rgba(255, 255, 255, 0.1)
        transition: all 0.3s ease
        animation: message-fade-in 0.5s ease-out
        
        &:hover
          background: rgba(255, 255, 255, 0.1)
          transform: translateY(-2px)

        .message-sender
          font-weight: bold
          color: $yellow
          margin-right: 5px

        .message-text
          margin-left: 5px

        .message-text.system
          font-style: italic
          color: #888

      .system-message
        text-align: center
        font-style: italic
        color: #888
        padding: 5px 0

    .chat-input
      display: flex
      padding: 15px
      background: rgba(30, 30, 30, 0.5)
      border-top: 1px solid rgba(255, 255, 255, 0.2)

      input
        flex: 1
        padding: 12px 15px
        border: none
        border-radius: 10px
        outline: none
        background: rgba(0, 0, 0, 0.3)
        color: $white
        font-family: 'Bangers', sans-serif
        letter-spacing: 0.1rem
        backdrop-filter: blur(5px)
        transition: all 0.3s ease
        will-change: box-shadow
        
        &:focus
          box-shadow: 0 0 20px rgba(255, 255, 255, 0.3)
          background: rgba(0, 0, 0, 0.4)

      button
        margin-left: 15px
        padding: 12px 20px
        background: linear-gradient(135deg, $purple, $blue)
        color: $white
        border: none
        border-radius: 10px
        cursor: pointer
        font-family: 'Bangers', sans-serif
        letter-spacing: 0.1rem
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)
        will-change: transform, background, box-shadow
        transform: translateZ(0)
        position: relative
        overflow: hidden
        
        &:before
          content: ""
          position: absolute
          top: -50%
          left: -50%
          width: 200%
          height: 200%
          background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
          opacity: 0
          transition: opacity 0.5s ease
          
        &:hover
          transform: translateY(-3px) scale(1.05)
          background: linear-gradient(135deg, lighten($purple, 5%), lighten($blue, 5%))
          box-shadow: 0 0 20px rgba(102, 204, 255, 0.7)
          
          &:before
            opacity: 1
            animation: rotate-background 5s linear infinite

.phase-header
  display: flex
  justify-content: space-between
  align-items: center
  width: 100%
  margin-bottom: 20px
  
  .timer
    background: rgba(255, 255, 255, 0.1)
    padding: 10px 15px
    border-radius: 20px
    font-size: 18px
    display: flex
    align-items: center
    
    svg
      margin-right: 8px
      color: $yellow

.song-grid
  display: grid
  grid-template-columns: repeat(3, 1fr)
  gap: 20px
  margin-top: 20px
  animation: fade-in 0.5s ease-out
  
  @media (max-width: 768px)
    grid-template-columns: repeat(2, 1fr)
  
  @media (max-width: 500px)
    grid-template-columns: 1fr
    
  .song-option
    background: rgba(255, 255, 255, 0.1)
    border-radius: 15px
    overflow: hidden
    cursor: pointer
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
    border: 2px solid transparent
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2)
    
    &:hover
      transform: translateY(-5px)
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.1)
      background: rgba(255, 255, 255, 0.15)
    
    &.selected
      border: 2px solid $yellow
      box-shadow: 0 0 20px rgba(255, 255, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.3)
      background: rgba(255, 255, 255, 0.2)
    
    .song-image
      position: relative
      overflow: hidden
      
      img
        width: 100%
        height: 150px
        object-fit: cover
        transition: transform 0.3s ease
        
        .selected &
          transform: scale(1.05)
      
      .selection-indicator
        position: absolute
        top: 10px
        right: 10px
        background-color: $yellow
        color: #000
        width: 30px
        height: 30px
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center
        box-shadow: 0 0 15px rgba(255, 255, 0, 0.7)
        animation: pulse 1.5s infinite ease-in-out
    
    .song-details
      padding: 15px
      
      .song-title
        font-weight: bold
        font-size: 18px
        color: #fff
        margin-bottom: 5px
        
      .song-artist
        font-size: 14px
        color: rgba(255, 255, 255, 0.8)

.guess-actions
  margin-top: 30px
  text-align: center
  animation: fade-in 0.5s ease-out 0.2s both
  
  .submit-guess-button
    background: linear-gradient(135deg, $purple, $blue)
    color: #fff
    border: none
    border-radius: 10px
    padding: 12px 25px
    font-size: 16px
    font-weight: bold
    cursor: pointer
    transition: all 0.3s ease
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
    display: inline-flex
    align-items: center
    justify-content: center
    
    svg
      margin-right: 8px
    
    &:hover:not(.disabled)
      transform: translateY(-3px)
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(102, 204, 255, 0.4)
    
    &:active:not(.disabled)
      transform: translateY(-1px)
      
    &.disabled
      opacity: 0.5
      cursor: not-allowed
      background: linear-gradient(135deg, #999, #666)
  
  .selection-hint
    margin-top: 10px
    color: rgba(255, 255, 255, 0.7)
    font-size: 14px
    font-style: italic

.loading-songs
  text-align: center
  padding: 40px
  color: $white
  
  p
    font-size: 18px
    opacity: 0.8
    animation: pulse 1.5s infinite ease-in-out

@keyframes subtle-text-glow
  0%, 100%
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4)
  50%
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.3)

@keyframes title-glow
  0%, 100%
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 30px rgba(102, 204, 255, 0.4)
  50%
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 40px rgba(102, 204, 255, 0.6), 0 0 60px rgba(102, 204, 255, 0.3)

@keyframes text-shimmer
  0%, 100%
    opacity: 0.95
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5)
  50%
    opacity: 1
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 25px rgba(133, 255, 189, 0.5)

@keyframes album-rotate
  0%, 100%
    transform: rotate(-2deg)
  50%
    transform: rotate(2deg)

@keyframes icon-pulse
  0%, 100%
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
    transform: scale(1)
  50%
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))
    transform: scale(1.1)

@keyframes message-fade-in
  0%
    opacity: 0
    transform: translateY(10px)
  100%
    opacity: 1
    transform: translateY(0)

@keyframes title-shimmer
  0%
    background-position: 0% 50%
  50% 
    background-position: 100% 50%
  100%
    background-position: 0% 50%

@keyframes title-float
  0%, 100%
    transform: translateY(0) scale(1) rotate(-1deg)
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7))
  50%
    transform: translateY(-10px) scale(1.05) rotate(1deg)
    filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 50px rgba(102, 204, 255, 0.6))

@keyframes fade-in
  0%
    opacity: 0
    transform: translateY(20px)
  100%
    opacity: 1
    transform: translateY(0)

@keyframes pulse
  0%, 100%
    opacity: 0.8
    transform: scale(1)
  50%
    opacity: 1
    transform: scale(1.05)

.player-container
  position: fixed
  left: 20px
  bottom: 20px
  display: flex
  flex-direction: column
  align-items: flex-start
  z-index: 100
  background: rgba(0, 0, 0, 0.5)
  padding: 10px
  border-radius: 10px
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3)
  max-width: 320px
  
  .player-controls
    width: 100%
    margin-top: 10px
    position: relative
    left: auto
    top: auto
    right: auto
    background: none
    box-shadow: none
    padding: 0
    
    .volume-controls
      width: 100%
      display: flex
      align-items: center
      background: none
      padding: 5px 0
      position: static
      box-shadow: none
      
      span
        white-space: nowrap
        
      .volume-slider
        flex: 1
        margin-left: 10px

.composer-player
  width: 300px
  height: 169px
  border-radius: 8px
  overflow: hidden

.composer-player
  width: 300px
  height: 169px
  border-radius: 8px
  overflow: hidden

.position-jump-button
  display: block
  margin-top: 10px
  padding: 8px 15px
  background: linear-gradient(135deg, $yellow, $orange)
  color: #fff
  border: none
  border-radius: 8px
  font-size: 14px
  font-weight: 600
  cursor: pointer
  transition: all 0.2s ease
  width: 100%
  
  &:hover
    background: linear-gradient(135deg, lighten($yellow, 5%), lighten($orange, 5%))
    transform: translateY(-2px)
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.3)
  
  &:active
    transform: translateY(0)

.player-container
  width: 100%
  margin-top: 20px
  background: rgba(20, 20, 20, 0.5)
  backdrop-filter: blur(10px)
  padding: 15px
  border-radius: 15px
  border: 1px solid rgba(255, 255, 255, 0.1)
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
  
  h4
    color: $white
    margin: 0 0 15px 0
    text-align: center
    font-size: 16px
    
  .embedded-player
    width: 100%
    border-radius: 8px
    overflow: hidden

.song-player-container
  width: 100%
  max-width: 500px
  margin: 20px auto
  border-radius: 15px
  overflow: hidden
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25)
  background: rgba(0, 0, 0, 0.5)
  
  .song-embedded-player
    width: 100%
    height: auto
    aspect-ratio: 16 / 9

.results-phase
  display: flex
  flex-direction: column
  align-items: center
  width: 100%
  
  h3
    margin-bottom: 30px
    font-size: 28px
    color: $white
    text-shadow: 0 2px 15px rgba(255, 255, 255, 0.3)
    
  .round-results
    width: 100%
    max-width: 600px
    display: flex
    flex-direction: column
    align-items: center
    
    .composer-results, .guesser-results
      width: 100%
      margin-bottom: 20px
      text-align: center
      
      p
        font-size: 18px
        margin-bottom: 15px
        color: $white
      
      .correct-song
        margin-top: 10px
        position: relative
        overflow: visible
        z-index: 5
        
        &:before
          content: ""
          position: absolute
          top: -30px
          left: -30px
          right: -30px
          bottom: -30px
          background: rgba(20, 20, 40, 0.2)
          border-radius: 40px
          filter: blur(40px)
          z-index: -1

        .song-card.highlight
          position: relative
          transform: scale(1.05)
          background: linear-gradient(135deg, rgba(40, 40, 60, 0.9), rgba(30, 30, 50, 0.95))
          border: 2px solid $yellow
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 50px rgba(255, 255, 0, 0.2)
          backdrop-filter: blur(30px)
          padding: 25px
          transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)
          -webkit-backdrop-filter: blur(30px)
          background: rgba(35, 35, 50, 0.5)
          border-radius: 18px
          
          &:hover
            transform: translateY(-8px) scale(1.08)
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 255, 0, 0.3), inset 0 0 50px rgba(255, 255, 255, 0.08)
          
          &:after
            content: "✓"
            position: absolute
            top: -15px
            right: -15px
            width: 40px
            height: 40px
            background: linear-gradient(135deg, $yellow, darken($yellow, 15%))
            color: #000
            border-radius: 50%
            border: 3px solid rgba(0, 0, 0, 0.5)
            display: flex
            align-items: center
            justify-content: center
            font-size: 20px
            font-weight: bold
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 0, 0.5)
            animation: pulse-highlight 2s infinite alternate ease-in-out
          
          &:before
            content: ""
            position: absolute
            inset: 0
            background: linear-gradient(135deg, rgba(80, 80, 120, 0.3), rgba(30, 30, 60, 0.8))
            border-radius: 18px
            z-index: -1
            opacity: 0.8

          img
            width: 130px
            height: 130px
            border-radius: 14px
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6)
            border: 3px solid rgba(255, 255, 255, 0.3)
            transform: rotate(-2deg)
            transition: all 0.5s ease, border-radius 0.3s ease
            
            &:hover
              transform: rotate(0deg) scale(1.05)
              border-color: rgba(255, 255, 0, 0.6)
              border-radius: 12px
          
          .song-info
            margin-left: 25px
            
            .song-names
              font-size: 26px
              font-weight: bold
              color: $white
              text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5)
              margin-bottom: 10px
              background: linear-gradient(90deg, $white, rgba(255,255,255,0.7))
              -webkit-background-clip: text
              background-clip: text
              -webkit-text-fill-color: transparent
              
            .song-description
              font-size: 18px
              color: rgba(255, 255, 255, 0.8)
              text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7)

      .guess-result
        margin: 20px 0
        padding: 15px 20px
        border-radius: 16px
        font-size: 18px
        font-weight: bold
        animation: bounce-in 0.5s ease-out
        
        &.correct
          background: linear-gradient(135deg, rgba(50, 200, 100, 0.8), rgba(40, 160, 80, 0.8))
          color: white
          box-shadow: 0 4px 20px rgba(50, 200, 100, 0.4)
          
        &.incorrect
          background: linear-gradient(135deg, rgba(220, 60, 60, 0.8), rgba(180, 40, 40, 0.8))
          color: white
          box-shadow: 0 4px 20px rgba(220, 60, 60, 0.4)

    .scoreboard
      width: 100%
      background: rgba(40, 40, 60, 0.6)
      backdrop-filter: blur(10px)
      border-radius: 20px
      padding: 20px
      margin-bottom: 20px
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3)
      border: 1px solid rgba(255, 255, 255, 0.1)
      margin-top: 5px
      
      h4
        text-align: center
        font-size: 22px
        color: $white
        margin-top: 10px
        margin-bottom: 10px
        padding-bottom: 8px
      
      .scores
        display: flex
        flex-direction: column
        gap: 8px
        
        .score-entry
          display: flex
          justify-content: space-between
          align-items: center
          padding: 12px 15px
          border-radius: 14px
          background: rgba(255, 255, 255, 0.1)
          transition: all 0.2s ease
          
          &:hover
            background: rgba(255, 255, 255, 0.15)
            transform: translateY(-2px)
          
          &.current-user
            background: rgba(102, 204, 255, 0.2)
            border-left: 3px solid $blue
          
          .player-name
            display: flex
            align-items: center
            font-weight: 500
            color: $white
            font-size: 16px
            
            .host-icon
              color: $yellow
              margin-left: 8px
              filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5))
          
          .player-score
            background: rgba(255, 255, 255, 0.2)
            padding: 5px 12px
            border-radius: 20px
            font-weight: bold
            font-size: 18px
            color: $yellow
            min-width: 40px
            text-align: center
            position: relative
            overflow: hidden
            
            &:after
              content: ""
              position: absolute
              top: -50%
              left: -50%
              width: 200%
              height: 200%
              background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%)
              opacity: 0
              transition: opacity 0.5s ease
            
            &.highlighted
              animation: score-highlight 1s ease
    
    .next-round-button
      margin-top: 10px
      padding: 15px 30px
      font-size: 18px

    .waiting-message
      margin-top: 20px
      font-style: italic
      color: rgba(255, 255, 255, 0.7)

@keyframes score-highlight
  0%
    transform: scale(1)
    background: rgba(255, 255, 0, 0.8)
    color: #000
  50%
    transform: scale(1.2)
  100%
    transform: scale(1)
    background: rgba(255, 255, 255, 0.2)
    color: $yellow

@keyframes bounce-in
  0%
    opacity: 0
    transform: scale(0.8)
  50%
    transform: scale(1.05)
  100%
    opacity: 1
    transform: scale(1)

@keyframes pulse-highlight
  0%, 100%
    transform: scale(1)
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 255, 0, 0.3)
  50%
    transform: scale(1.1)
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.6)