// 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