Add player portal + character-sheet front end (phase 4 follow-up)

Turns the raw shard endpoints into proper, navigable pages in the site's visual
language.

- components/CharacterSheet.jsx: reusable sheet — attribute tiles, vitals bars,
  resistances, skills (with bars), and equipment — styled with the shared
  panel/grid vocabulary.
- Player portal with a nav bar: PlayerPortalLayout (Characters / Account tabs +
  sign-out) wraps /player and /account. /player (PlayerCharacters) tells the
  logged-in player if they haven't linked a game account (with the [link code
  prompt) or, once linked, shows their characters grouped by account; each
  character opens its sheet at /player/char/:serial. Account security moved into
  the same shell (the buried "Game accounts" block was removed from it).
  Login/register now land on /player.
- Public: GET /public/shard/online (redacted name+serial+map) drives an
  "Online now" list on /site/shard that links to public character sheets at
  /site/shard/char/:serial (ShardChar). Swagger: ShardOnlinePlayer + regenerated.
- api.shard.online added.

Verified live against the running shard: Darrow's full sheet (STR 120, 58
skills, 3 equipment) renders through the browser-facing proxy; the online list
returns the live roster; player routes 401 without a session.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011qPmpmVH1xGCiZoz9m9vW3

client/src/components/CharacterSheet.jsx

@@ -0,0 +1,141 @@
+// Reusable character-sheet renderer for the char.profile shape returned by
+// /public/shard/char/:serial. Presentational only — the parent handles loading
+// and errors. Styled with the shared theme vocabulary (panel/grid/stat tiles).
+
+const RESIST_LABELS = { phys: 'Physical', fire: 'Fire', cold: 'Cold', pois: 'Poison', energy: 'Energy' }
+
+function StatTile({ value, label }) {
+  return (
+    <div className="panel" style={{ padding: '14px 12px', textAlign: 'center' }}>
+      <div className="display" style={{ fontSize: '1.35rem', color: 'var(--head)' }}>{value}</div>
+      <div className="sans" style={{ color: 'var(--accent)', fontSize: '0.64rem', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 4 }}>{label}</div>
+    </div>
+  )
+}
+
+function Vital({ label, cur, max }) {
+  const pct = max ? Math.min(100, Math.round((cur / max) * 100)) : 0
+  return (
+    <div className="panel" style={{ padding: '12px 14px' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
+        <span className="sans" style={{ color: 'var(--accent)', fontSize: '0.64rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{label}</span>
+        <span className="display" style={{ color: 'var(--head)', fontSize: '0.95rem' }}>{cur ?? '—'}<span className="dim" style={{ fontSize: '0.8rem' }}> / {max ?? '—'}</span></span>
+      </div>
+      <div style={{ height: 6, borderRadius: 999, background: 'var(--line)', overflow: 'hidden' }}>
+        <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)' }} />
+      </div>
+    </div>
+  )
+}
+
+export default function CharacterSheet({ char }) {
+  if (!char) return null
+  const stats = char.stats || {}
+  const resist = stats.resist || {}
+  // Skills the character actually has, best first.
+  const skills = (char.skills || [])
+    .filter((s) => (s.value || s.base || 0) > 0)
+    .sort((a, b) => (b.value || 0) - (a.value || 0))
+  const equipment = char.equipment || []
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
+      {/* Identity */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
+        <h2 className="display" style={{ margin: 0, fontSize: '1.6rem', color: 'var(--head)' }}>{char.name || 'Unknown'}</h2>
+        {char.title && <span className="sans" style={{ color: 'var(--muted)', fontSize: '0.9rem' }}>{char.title}</span>}
+        <span
+          className="sans"
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999,
+            border: '1px solid var(--line)', fontSize: '0.74rem',
+            color: char.online ? '#7fd0a4' : 'var(--muted)',
+          }}
+        >
+          <span style={{ width: 8, height: 8, borderRadius: '50%', background: char.online ? '#7fd0a4' : 'var(--dim)' }} />
+          {char.online ? 'Online' : 'Offline'}
+        </span>
+        <span className="sans dim" style={{ fontSize: '0.76rem', marginLeft: 'auto' }}>{char.serial}</span>
+      </div>
+
+      {/* Core stats */}
+      <section>
+        <div className="field-label" style={{ marginBottom: 8 }}>Attributes</div>
+        <div className="grid-3" style={{ gap: 12 }}>
+          <StatTile value={stats.str ?? '—'} label="Strength" />
+          <StatTile value={stats.dex ?? '—'} label="Dexterity" />
+          <StatTile value={stats.int ?? '—'} label="Intelligence" />
+        </div>
+        <div className="grid-3" style={{ gap: 12, marginTop: 12 }}>
+          <Vital label="Hits" cur={stats.hits} max={stats.hitsMax} />
+          <Vital label="Mana" cur={stats.mana} max={stats.manaMax} />
+          <Vital label="Stamina" cur={stats.stam} max={stats.stamMax} />
+        </div>
+      </section>
+
+      {/* Resistances */}
+      {Object.keys(resist).length > 0 && (
+        <section>
+          <div className="field-label" style={{ marginBottom: 8 }}>Resistances</div>
+          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+            {['phys', 'fire', 'cold', 'pois', 'energy'].map((k) => (
+              <div key={k} className="panel" style={{ padding: '10px 16px', textAlign: 'center', minWidth: 84 }}>
+                <div className="display" style={{ color: 'var(--head)', fontSize: '1.1rem' }}>{resist[k] ?? 0}</div>
+                <div className="sans" style={{ color: 'var(--muted)', fontSize: '0.66rem', textTransform: 'uppercase', letterSpacing: '0.08em', marginTop: 2 }}>{RESIST_LABELS[k]}</div>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Skills */}
+      {skills.length > 0 && (
+        <section>
+          <div className="field-label" style={{ marginBottom: 8 }}>Skills <span className="dim">({skills.length})</span></div>
+          <div className="grid-2" style={{ gap: '8px 18px' }}>
+            {skills.map((s) => {
+              const cap = s.cap || 100
+              const pct = Math.min(100, Math.round(((s.value || 0) / cap) * 100))
+              return (
+                <div key={s.n}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 3 }}>
+                    <span className="sans" style={{ color: 'var(--ink)', fontSize: '0.86rem' }}>{s.n}</span>
+                    <span className="sans" style={{ color: 'var(--head)', fontSize: '0.82rem' }}>{s.value}</span>
+                  </div>
+                  <div style={{ height: 4, borderRadius: 999, background: 'var(--line)', overflow: 'hidden' }}>
+                    <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)' }} />
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* Equipment */}
+      {equipment.length > 0 && (
+        <section>
+          <div className="field-label" style={{ marginBottom: 8 }}>Equipment</div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {equipment.map((it) => (
+              <div key={it.serial} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--line)', borderRadius: 8 }}>
+                <span style={{ flex: 'none', width: 22, height: 22, borderRadius: 5, border: '1px solid var(--line)', background: 'rgba(255,255,255,0.05)' }} />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div className="sans" style={{ color: 'var(--head)', fontSize: '0.88rem' }}>{it.layer || 'Item'}</div>
+                  <div className="sans dim" style={{ fontSize: '0.74rem' }}>id {it.itemId}{it.hue ? ` · hue ${it.hue}` : ''}</div>
+                </div>
+                {it.mods && Object.keys(it.mods).length > 0 && (
+                  <div className="sans" style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: '55%' }}>
+                    {Object.entries(it.mods).map(([k, v]) => (
+                      <span key={k} className="pill" style={{ fontSize: '0.7rem', padding: '2px 8px' }}>{k} {v}</span>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}