Fix member cards: round avatar images, badge placement, click handler for modal

css/styles.css

@@ -566,13 +566,20 @@ body {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px;
-  border-radius: 10px;
-  background: #f0f2f5;
+  padding: 16px;
+  border-radius: 12px;
+  background: #fff;
   cursor: pointer;
   transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
-  overflow: hidden;
+  overflow: visible;
+  border: 1px solid #e4e6eb;
+}
+.member-card:hover {
+  background: #f7f8fa;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+  border-color: #1877f2;
 }
 .member-card:hover {
   background: #fff;
@@ -597,10 +604,17 @@ body {
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid transparent;
-  transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
   flex-shrink: 0;
+  border: 2px solid transparent;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 50%;
 }
 .member-card:hover .user-avatar {
   border-color: #1877f2;
@@ -634,16 +648,17 @@ body {
 
 .rank-badge {
   font-size: 11px;
-  padding: 3px 8px;
+  padding: 2px 8px;
   border-radius: 12px;
-  position: absolute;
-  top: -4px;
-  right: 0;
+  display: inline-block;
   font-weight: 500;
+  margin-top: 6px;
+  position: relative;
   transition: transform 0.2s ease;
+  line-height: 1.4;
 }
 .member-card:hover .rank-badge {
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 .rank-badge.rank-rookie { background: #e4e6eb; color: #65676b; }
 .rank-badge.rank-beginner { background: #e7f3e9; color: #0a832c; }