diff --git a/CLAUDE.md b/CLAUDE.md
index 454068a..fb8b0c3 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -384,6 +384,15 @@ These are final. Do not propose alternatives unless explicitly asked.
- Session logs are append-style with a date per entry.
- World and lore are single persistent documents per campaign
stored in campaign_docs with doc_type 'world' and 'lore'.
+- Response envelope: { data } / { error } is the canonical API
+ response shape. campaigns.js uses raw JSON and is a known
+ exception to be reconciled in Phase 11.
+- Route nesting: campaign-scoped resources use nested routes at
+ /api/campaigns/:campaignId/resource, mounted with
+ mergeParams: true.
+- Scope rule: public/index.html and server/index.js are always
+ implicitly in scope when wiring a new feature view and do not
+ need explicit approval as scope expansions.
---
diff --git a/public/css/styles.css b/public/css/styles.css
index 687ad8b..a7912b4 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1173,3 +1173,320 @@ h1, h2, h3, h4, h5, h6 {
margin-top: 0;
flex: 1;
}
+
+.modal-section-title {
+ margin: 4px 0 -4px;
+ padding-top: 14px;
+ border-top: 1px solid var(--border);
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--accent);
+}
+
+.modal-section-title:first-child {
+ margin-top: 0;
+ padding-top: 0;
+ border-top: none;
+}
+
+/* --- NPCs --- */
+
+.npcs-empty-state {
+ max-width: 700px;
+ margin: 40px auto;
+ padding: 20px;
+ text-align: center;
+ font-style: italic;
+ color: var(--text-muted);
+}
+
+.npcs-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ max-width: 700px;
+ margin: 0 auto 16px;
+}
+
+.npcs-title {
+ margin: 0;
+ font-size: 1.4rem;
+}
+
+.npc-create-btn {
+ flex-shrink: 0;
+ padding: 10px 18px;
+ background: var(--bg);
+ border: 1px solid var(--accent);
+ border-radius: 3px;
+ color: var(--accent);
+ font-family: var(--font-heading);
+ font-size: 0.78rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: background var(--transition-speed) ease, border-color var(--transition-speed) ease;
+}
+
+.npc-create-btn:hover {
+ background: var(--bg-hover);
+ border-color: var(--accent-hover);
+}
+
+.npc-filters {
+ display: flex;
+ gap: 8px;
+ max-width: 700px;
+ margin: 0 auto 16px;
+}
+
+.npc-alive-tabs {
+ display: flex;
+ flex: 1;
+ gap: 8px;
+}
+
+.npc-tab {
+ flex: 1;
+ padding: 10px 4px;
+ border: 1px solid var(--border);
+ border-radius: 3px;
+ background: var(--bg);
+ color: var(--text-secondary);
+ font-family: var(--font-heading);
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ cursor: pointer;
+ transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease, background var(--transition-speed) ease;
+}
+
+.npc-tab:hover {
+ color: var(--text-primary);
+ border-color: var(--accent-hover);
+}
+
+.npc-tab.active {
+ border-color: var(--accent);
+ color: var(--accent);
+ background: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+.npc-disposition-filter {
+ flex-shrink: 0;
+ width: 180px;
+ padding: 8px 10px;
+ border: 1px solid var(--border);
+ border-radius: 3px;
+ background: var(--bg);
+ color: var(--text-secondary);
+ font-family: var(--font-body);
+ font-size: 0.82rem;
+ cursor: pointer;
+}
+
+.npc-disposition-filter:focus {
+ outline: none;
+ border-color: var(--accent-hover);
+}
+
+.npc-list {
+ max-width: 700px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.npc-empty {
+ padding: 24px;
+ text-align: center;
+ font-style: italic;
+ color: var(--text-muted);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ background: var(--bg-elevated);
+}
+
+.npc-card {
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ background: var(--bg-elevated);
+ overflow: hidden;
+}
+
+.npc-card.expanded {
+ border-color: var(--accent);
+}
+
+.npc-card-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ width: 100%;
+ padding: 14px 18px;
+ border: none;
+ background: none;
+ color: var(--text-primary);
+ font-family: var(--font-body);
+ font-size: 0.95rem;
+ text-align: left;
+ cursor: pointer;
+}
+
+.npc-card-header:hover {
+ background: var(--bg-hover);
+}
+
+.npc-card-name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.npc-card-badges {
+ flex-shrink: 0;
+ display: flex;
+ gap: 6px;
+}
+
+.npc-status-badge,
+.npc-disposition-badge {
+ flex-shrink: 0;
+ padding: 3px 10px;
+ border-radius: 12px;
+ font-family: var(--font-mono);
+ font-size: 0.68rem;
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ border: 1px solid transparent;
+}
+
+.npc-disposition-badge {
+ color: var(--accent);
+ border-color: var(--accent);
+ background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+
+.npc-status-alive {
+ color: var(--success);
+ border-color: var(--success);
+ background: color-mix(in srgb, var(--success) 12%, transparent);
+}
+
+.npc-status-dead {
+ color: var(--danger);
+ border-color: var(--danger);
+ background: color-mix(in srgb, var(--danger) 12%, transparent);
+}
+
+.npc-status-unknown {
+ color: var(--text-muted);
+ border-color: var(--text-muted);
+ background: color-mix(in srgb, var(--text-muted) 12%, transparent);
+}
+
+.npc-status-missing {
+ color: var(--info);
+ border-color: var(--info);
+ background: color-mix(in srgb, var(--info) 12%, transparent);
+}
+
+.npc-card-detail {
+ border-top: 1px solid var(--border);
+ max-height: 480px;
+ overflow-y: auto;
+}
+
+.npc-section {
+ padding: 14px 18px;
+ border-top: 1px solid var(--border);
+}
+
+.npc-section:first-child {
+ border-top: none;
+}
+
+.npc-section-title {
+ margin-bottom: 8px;
+ font-family: var(--font-heading);
+ font-size: 0.72rem;
+ font-weight: 600;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--accent);
+}
+
+.npc-field {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 8px 0;
+ border-bottom: 1px solid var(--bg);
+}
+
+.npc-field:last-child {
+ border-bottom: none;
+}
+
+.npc-field-label {
+ font-family: var(--font-heading);
+ font-size: 0.68rem;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ color: var(--text-muted);
+}
+
+.npc-field-value {
+ font-size: 0.9rem;
+ color: var(--text-primary);
+ white-space: pre-wrap;
+}
+
+.npc-card-actions {
+ display: flex;
+ gap: 10px;
+ padding: 14px 18px 18px;
+}
+
+.npc-edit-btn,
+.npc-delete-btn {
+ flex: 1;
+ padding: 10px;
+ border-radius: 3px;
+ font-family: var(--font-heading);
+ font-size: 0.75rem;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+ cursor: pointer;
+ background: var(--bg);
+ transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease;
+}
+
+.npc-edit-btn {
+ border: 1px solid var(--accent);
+ color: var(--accent);
+}
+
+.npc-edit-btn:hover {
+ background: var(--bg-hover);
+ border-color: var(--accent-hover);
+}
+
+.npc-delete-btn {
+ border: 1px solid var(--danger);
+ color: var(--danger);
+}
+
+.npc-delete-btn:hover {
+ background: color-mix(in srgb, var(--danger) 10%, var(--bg));
+}
diff --git a/public/index.html b/public/index.html
index 0a6100e..4a0eea9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -307,4 +307,5 @@
+