Personajes: zona, raza/clase e imagen en el panel de cuenta

- lib/data/zone-names.json: ZONE_NAMES (9156 zonas) exportado de zone_definitions.py.
- lib/character-info.ts: getZoneName, getClassCss/getClassName, getRaceName y
  getCharacterImage (raza/clase/género -> /races/big-*.webp, con validación de
  compatibilidad clase-raza y fallback unknown), portado de account.py.
- lib/account.ts: Character enriquecido (race, class, zone, imageUrl, class/raceName).
- account page: tarjetas con imagen de raza, color de clase WoW, nivel, raza/clase,
  📍 zona y oro. globals.css: colores de clase (.class-*).
- public/races: 20 imágenes de raza del tema + unknown.webp.

Verificado: build OK, imágenes 200, /account 307→login. El JSON de zonas se usa
solo en servidor (no infla el bundle cliente).

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

web-next/app/[locale]/account/page.tsx

@@ -59,12 +59,27 @@ export default async function AccountPage({ params }: { params: Promise<{ locale
         ) : (
           <div className="grid gap-3 sm:grid-cols-2 md:grid-cols-3">
             {data.characters.map((c) => (
-              <div key={c.name} className={card}>
-                <p className="font-semibold text-amber-400">{c.name}</p>
-                <p className="text-sm">{t('level')} {c.level}</p>
-                <p className="text-sm text-amber-200/70">
-                  {c.gold}g {c.silver}s {c.copper}c
-                </p>
+              <div key={c.name} className={`${card} flex gap-3`}>
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                  src={c.imageUrl}
+                  alt={c.raceName}
+                  className="h-16 w-16 shrink-0 rounded-md object-cover ring-1 ring-nw-border/60"
+                  loading="lazy"
+                />
+                <div className="min-w-0">
+                  <p className={`truncate font-semibold class-${c.classCss}`}>{c.name}</p>
+                  <p className="text-xs text-nw-muted">
+                    {t('level')} {c.level} · {c.raceName} {c.className}
+                  </p>
+                  <p className="mt-1 flex items-center gap-1 text-xs text-amber-200/70" title={c.zone}>
+                    <span aria-hidden>📍</span>
+                    <span className="truncate">{c.zone}</span>
+                  </p>
+                  <p className="text-xs text-amber-200/60">
+                    {c.gold}g {c.silver}s {c.copper}c
+                  </p>
+                </div>
               </div>
             ))}
           </div>

web-next/app/globals.css

@@ -48,3 +48,16 @@ body {
 .prose :where(a) {
   color: #7cc0f7;
 }
+
+/* Colores de clase de WoW (nombre de personaje) */
+.class-warrior { color: #c79c6e; }
+.class-paladin { color: #f58cba; }
+.class-hunter { color: #abd473; }
+.class-rogue { color: #fff569; }
+.class-priest { color: #ffffff; }
+.class-death-knight { color: #c41f3b; }
+.class-shaman { color: #0070de; }
+.class-mage { color: #69ccf0; }
+.class-warlock { color: #9482c9; }
+.class-druid { color: #ff7d0a; }
+.class-unknown { color: #f0b100; }