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/lib/account.ts

@@ -1,6 +1,7 @@
 import type { RowDataPacket } from 'mysql2'
 import { db, DB } from './db'
 import type { SessionData } from './session'
+import { getZoneName, getClassCss, getCharacterImage, getRaceName, getClassName } from './character-info'
 
 export interface Character {
   name: string
@@ -8,6 +9,13 @@ export interface Character {
   gold: number
   silver: number
   copper: number
+  race: number
+  classId: number
+  className: string
+  raceName: string
+  classCss: string
+  zone: string
+  imageUrl: string
 }
 
 export interface AccountDashboard {
@@ -64,7 +72,7 @@ export async function getAccountDashboard(session: SessionData): Promise<Account
   let characters: Character[] = []
   try {
     const [ch] = await db(DB.characters).query<RowDataPacket[]>(
-      'SELECT name, level, money FROM characters WHERE account = ?',
+      'SELECT name, level, money, race, class, zone, gender FROM characters WHERE account = ?',
       [accountId],
     )
     characters = ch.map((r) => ({
@@ -73,6 +81,13 @@ export async function getAccountDashboard(session: SessionData): Promise<Account
       gold: Math.floor(r.money / 10000),
       silver: Math.floor((r.money % 10000) / 100),
       copper: r.money % 100,
+      race: r.race,
+      classId: r.class,
+      className: getClassName(r.class),
+      raceName: getRaceName(r.race),
+      classCss: getClassCss(r.class),
+      zone: getZoneName(r.zone),
+      imageUrl: getCharacterImage(r.class, r.race, r.gender),
     }))
   } catch {
     /* la BD de personajes puede no estar poblada */