Add team-grouping hint to friends panel

Surface why a player would want to add friends: a small info
card at the top of the panel noting that friends are placed on
the same team.

resources/lang/en.json

@@ -439,6 +439,7 @@
     "no_games": "No games played yet."
   },
   "friends": {
+    "team_info": "Friends are placed on the same team.",
     "add_friend": "Add Friend",
     "public_id_placeholder": "Enter their public player ID",
     "send_request": "Send Request",

src/client/components/FriendsList.ts

@@ -224,8 +224,21 @@ export class FriendsList extends LitElement {
 
     return html`
       <div class="flex flex-col gap-6">
-        ${this.renderAddSection()} ${this.renderRequestsSection()}
-        ${this.renderFriendsSection()}
+        ${this.renderTeamInfo()} ${this.renderAddSection()}
+        ${this.renderRequestsSection()} ${this.renderFriendsSection()}
+      </div>
+    `;
+  }
+
+  private renderTeamInfo(): TemplateResult {
+    return html`
+      <div
+        class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-3 flex items-center gap-3"
+      >
+        <span class="text-blue-400 text-lg shrink-0">🛡️</span>
+        <p class="text-sm text-white/80">
+          ${translateText("friends.team_info")}
+        </p>
       </div>
     `;
   }