refacto: Displaying number of players for each team + adding logo at registration

public/style.css

@@ -134,16 +134,23 @@ body {
 }
 
 .authTeamBadge {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding: 10px;
   border-radius: 10px;
   border: 2px solid rgba(255, 255, 255, 0.1);
-  text-align: center;
   font-weight: 700;
   font-size: 13px;
   transition: border-color 0.15s, background 0.15s;
 }
 
+.authTeamLogo {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
 .authTeamBadge--blue {
   color: rgba(90, 200, 255, 0.9);
 }
@@ -192,6 +199,18 @@ body {
   background: rgba(113, 199, 255, 0.28);
 }
 
+.authTeamCount {
+  display: block;
+  text-align: center;
+  font-size: 10px;
+  font-weight: 600;
+  margin-top: 4px;
+  opacity: 0.7;
+}
+
+.authTeamCount--blue { color: rgba(90, 200, 255, 0.9); }
+.authTeamCount--red  { color: rgba(220, 75, 85, 0.9); }
+
 
 
 /* ── Score board ──────────────────────────────────────────────────────────── */
@@ -239,6 +258,26 @@ body {
   flex-shrink: 0;
 }
 
+.teamLogoWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.teamPlayerCount {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  opacity: 0.75;
+  white-space: nowrap;
+}
+
+.teamPlayerCount--blue { color: rgba(90, 200, 255, 0.9); }
+.teamPlayerCount--red  { color: rgba(220, 75, 85, 0.9); }
+
 .scoreTeam {
   display: flex;
   flex-direction: column;