web-next: selector de personaje coloreado + rediseño unstuck + fixes vote/account-info

- CharacterSelect: componente reutilizable que colorea las opciones por clase
  (class="priest big-font"…) y el <select> con la clase seleccionada. Usado en
  unstuck, revive, gold, transfer, trade-points, servicios de pago y recruit.
  getGameCharacters ahora devuelve classCss.
- /unstuck (+revive): diseño del original (info + NOTA, prompt, opciones coloreadas,
  botón "Desbloqueado"/"Revivido" con refresh).
- /vote-points: seed de los 4 sitios con logos y URLs (sql/seed_votesites.sql);
  botón voted-button para sitios en cooldown; etiqueta "Nota:" separada.
- account-info.png (imagen nueva) y CSS de los paneles de cuenta: se añade
  background-blend-mode: saturation y background-size en #account-settings y
  .account-fieldset para que la imagen salga como el original.

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

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

@@ -22,7 +22,7 @@ export default async function GoldPage({ params }: { params: Promise<{ locale: s
   return (
     <PageShell title={t('gold.title')}>
       <ServiceBox>
-        <GoldForm characters={chars.map((c) => c.name)} options={options} />
+        <GoldForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} options={options} />
       </ServiceBox>
     </PageShell>
   )

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

@@ -20,7 +20,9 @@ export default async function RecruitPage({ params }: { params: Promise<{ locale
   const rewards = loggedIn ? await getRecruitRewards(session.accountId!) : []
   const level80Count = loggedIn ? await getRecruitedLevel80Count(session.accountId!) : 0
   const stats = loggedIn ? await getRecruitStats(session.accountId!) : { isRecruited: false, recruitedCount: 0 }
-  const characters = loggedIn ? (await getGameCharacters(session.accountId!)).map((c) => c.name) : []
+  const characters = loggedIn
+    ? (await getGameCharacters(session.accountId!)).map((c) => ({ name: c.name, classCss: c.classCss }))
+    : []
 
   return (
     <PageShell title={t('title')}>

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

@@ -20,7 +20,15 @@ export default async function RevivePage({ params }: { params: Promise<{ locale:
   return (
     <PageShell title={t('reviveTitle')}>
       <ServiceBox>
-        <CharacterActionForm characters={chars.map((c) => c.name)} endpoint="/api/character/revive" actionLabel={t('reviveAction')} buttonClass="revive-button" />
+        <CharacterActionForm
+          characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
+          endpoint="/api/character/revive"
+          actionLabel={t('reviveAction')}
+          processingLabel={t('reviveProcessing')}
+          doneLabel={t('reviveDone')}
+          promptText={t('reviveChoose')}
+          buttonClass="revive-button"
+        />
       </ServiceBox>
     </PageShell>
   )

web-next/app/[locale]/trade-points/page.tsx

@@ -79,7 +79,7 @@ export default async function TradePointsPage({ params }: { params: Promise<{ lo
           </div>
         </fieldset>
 
-        <TradePointsForm characters={chars.map((c) => c.name)} />
+        <TradePointsForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} />
       </ServiceBox>
     </PageShell>
   )

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

@@ -22,7 +22,7 @@ export default async function TransferPage({ params }: { params: Promise<{ local
   return (
     <PageShell title={t('transfer.title')}>
       <ServiceBox>
-        <TransferForm characters={chars.map((c) => c.name)} price={price} />
+        <TransferForm characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))} price={price} />
       </ServiceBox>
     </PageShell>
   )

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

@@ -20,7 +20,27 @@ export default async function UnstuckPage({ params }: { params: Promise<{ locale
   return (
     <PageShell title={t('unstuckTitle')}>
       <ServiceBox>
-        <CharacterActionForm characters={chars.map((c) => c.name)} endpoint="/api/character/unstuck" actionLabel={t('unstuckAction')} buttonClass="unstuck-button" />
+        <br />
+        <p>{t.rich('unstuckInfo1', { b: (c) => <span>{c}</span> })}</p>
+        <p>{t('unstuckInfo2')}</p>
+        <br />
+        <fieldset>
+          <legend>NOTA</legend>
+          <div className="separate2">
+            <p>{t('unstuckNote1')}</p>
+            <p>{t('unstuckNote2')}</p>
+          </div>
+        </fieldset>
+
+        <CharacterActionForm
+          characters={chars.map((c) => ({ name: c.name, classCss: c.classCss }))}
+          endpoint="/api/character/unstuck"
+          actionLabel={t('unstuckAction')}
+          processingLabel={t('unstuckProcessing')}
+          doneLabel={t('unstuckDone')}
+          promptText={t('unstuckChoose')}
+          buttonClass="unstuck-button"
+        />
       </ServiceBox>
     </PageShell>
   )