From dc4d3f3d3ac8994a31bda950aae0cf4e6592e252 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Sat, 5 Sep 2026 13:21:27 +0000
Subject: [PATCH] Fix member cards: round avatar images, badge placement, click
 handler for modal

---
 css/styles.css | 39 +++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 13f4b25..2f960d7 100644
--- a/css/styles.css
+++ b/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; }