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/character.js

@@ -35,7 +35,7 @@
 
   root.innerHTML = `
     <section class="profile-header" style="--accent:${accent}">
-      <div class="profile-avatar">${initialFor(character.name)}</div>
+      <div class="profile-avatar">${characterPortraitSVG(character)}</div>
       <div>
         <p class="profile-eyebrow">${escapeHtml(character.affiliation)} · ${escapeHtml(character.role)}</p>
         <h1>${escapeHtml(character.name)}</h1>
@@ -52,7 +52,7 @@
       <div class="profile-main">
         ${fruit ? `
           <a class="fruit-callout" href="${fruitLink(fruit.id)}">
-            <div class="fruit-callout__icon">${fruit.icon}</div>
+            <div class="fruit-callout__icon">${fruitPortraitSVG(fruit)}</div>
             <div>
               <p class="fruit-callout__label">${escapeHtml(fruitRelation ? fruitRelation.status : 'Devil Fruit')}</p>
               <h3>${escapeHtml(fruit.name)}</h3>