Add original generated portrait/icon artwork for every entry

Adds js/portraits.js: procedurally generated, original SVG artwork for
all 101 characters (a role-themed line-art medallion — sword for
swordsmen, crown for royalty, compass for navigators, etc., derived
from each character's role/epithet/affiliation) and all 58 Devil
Fruits (a stylized swirled-fruit icon colored by category with the
fruit's symbolic emoji at center).

Official One Piece artwork is copyrighted (Oda/Shueisha/Toei), so
rather than scraping and re-hosting character art from the web, every
image here is drawn from scratch with basic SVG primitives — no
external assets, no copyright risk, fully offline-capable, and crisp
at any size since it's vector.

Wires the new generators into every card and detail view: character
cards/profile header, Devil Fruit cards/detail header, the Devil-Fruit
callout on character pages, and user chips on Devil Fruit pages.
Removes the now-unused plain-letter initialFor() avatar helper.

js/fruit.js

@@ -25,7 +25,7 @@
     if (!c) return '';
     return `
       <a class="user-chip" href="${characterLink(c.id)}" style="--accent:${accentFor(c)}">
-        <div class="user-chip__avatar">${initialFor(c.name)}</div>
+        <div class="user-chip__avatar">${characterPortraitSVG(c)}</div>
         <div>
           <div class="user-chip__name">${escapeHtml(c.name)}</div>
           <div class="user-chip__status">${escapeHtml(u.status)}</div>
@@ -36,7 +36,7 @@
 
   root.innerHTML = `
     <section class="fruit-detail-header" data-cat="${escapeHtml(fruit.category)}">
-      <div class="fruit-detail-header__icon">${fruit.icon}</div>
+      <div class="fruit-detail-header__icon">${fruitPortraitSVG(fruit)}</div>
       <div>
         <p class="profile-eyebrow" style="color:var(--cat-color)">${escapeHtml(fruit.category)}${fruit.subtype ? ' · ' + escapeHtml(fruit.subtype) : ''}${fruit.awakened ? ' · Awakened' : ''}</p>
         <h1>${escapeHtml(fruit.name)}</h1>