Polish remaining UX items: avatar fallback, chat truncation, delete confirmations

- PlayerAvatar component with onError fallback to initial badge; used in
  PlayerManager and ChatBridge.
- ChatBridge: truncate long usernames to 16 chars with tooltip, add avatar
  column, bump tinted text colors to -300 for better dark-mode contrast.
- BackupManager: confirm step for Delete (was one-click).
- ModManager: confirm step for snapshot Delete, clearer "Confirm Restore" /
  "Confirm Delete" labels, unify outer spacing with the rest of admin.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

components/PlayerManager.tsx

@@ -14,6 +14,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { PlayerAvatar } from "@/components/PlayerAvatar";
 
 type PlayerData = {
   ops: { name: string; uuid: string; level: number }[];
@@ -183,11 +184,7 @@ export function PlayerManager() {
                 className="flex items-center justify-between gap-2 px-3 py-2 rounded-md bg-muted/50 group"
               >
                 <div className="flex items-center gap-2 min-w-0">
-                  <img
-                    src={`https://mc-heads.net/avatar/${p.name}/24`}
-                    alt=""
-                    className="w-6 h-6 rounded shrink-0"
-                  />
+                  <PlayerAvatar name={p.name} size={24} />
                   <span className="text-sm font-medium truncate">{p.name}</span>
                   <Badge variant="secondary" className="text-xs px-1.5 py-0 shrink-0">
                     Lv{p.level}
@@ -218,11 +215,7 @@ export function PlayerManager() {
                 className="flex items-center justify-between gap-2 px-3 py-2 rounded-md bg-muted/50 group"
               >
                 <div className="flex items-center gap-2 min-w-0">
-                  <img
-                    src={`https://mc-heads.net/avatar/${p.name}/24`}
-                    alt=""
-                    className="w-6 h-6 rounded shrink-0"
-                  />
+                  <PlayerAvatar name={p.name} size={24} />
                   <span className="text-sm font-medium truncate">{p.name}</span>
                 </div>
                 <Button
@@ -251,11 +244,7 @@ export function PlayerManager() {
               >
                 <div className="min-w-0">
                   <div className="flex items-center gap-2">
-                    <img
-                      src={`https://mc-heads.net/avatar/${p.name}/24`}
-                      alt=""
-                      className="w-6 h-6 rounded shrink-0"
-                    />
+                    <PlayerAvatar name={p.name} size={24} />
                     <span className="text-sm font-medium truncate">{p.name}</span>
                   </div>
                   {p.reason && (