/* ============================================================
       SCREEN: MINIATURES LIST
       ============================================================ */
    const MiniaturesList = ({ miniatures, onOpen, onNew, filter, setFilter }) => {
      const filtered = useMemo(() => {
        if (filter === 'All') return miniatures;
        return miniatures.filter(m => m.gameSystem === filter);
      }, [miniatures, filter]);

      return (
        <div className="pb-24">
          <Header
            title="Miniatures"
            subtitle="The faithful & the foul"
            action={
              <button onClick={onNew} className="btn-primary flex items-center gap-1">
                <Icon name="plus" className="w-4 h-4" /> New
              </button>
            }
          />

          <div className="px-4 pt-3 pb-2 overflow-x-auto scroll-area">
            <div className="flex gap-2 min-w-max">
              {['All', ...GAME_SYSTEMS].map(sys => (
                <button
                  key={sys}
                  onClick={() => setFilter(sys)}
                  className={`px-3 py-1.5 rounded-full text-xs whitespace-nowrap border transition-colors ${
                    filter === sys
                      ? 'bg-gold/20 border-gold text-goldBright'
                      : 'border-line text-muted hover:border-gold/50'
                  }`}
                >
                  {sys}
                </button>
              ))}
            </div>
          </div>

          {filtered.length === 0 ? (
            <EmptyState
              icon="helmet"
              title="No miniatures"
              hint="Forge your first warrior to begin."
              action={<button onClick={onNew} className="btn-primary">Create Miniature</button>}
            />
          ) : (
            <div className="px-4 space-y-2">
              {filtered.map(m => (
                <button
                  key={m.id}
                  onClick={() => onOpen(m.id)}
                  className="w-full bg-panel border border-line rounded p-3 flex items-center gap-3 panel-edge active:bg-panel2 text-left"
                >
                  <div className="w-12 h-12 shrink-0 rounded bg-gradient-to-br from-panel2 to-bg border border-line flex items-center justify-center">
                    <span className="serif text-gold text-lg">{m.name.charAt(0)}</span>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="serif text-parchment truncate">{m.name}</div>
                    <div className="text-xs text-muted truncate">{m.faction} · {m.gameSystem}</div>
                    <div className="flex gap-1 mt-1.5 flex-wrap">
                      {(m.keywords || []).slice(0, 3).map(k => (
                        <span key={k} className="chip">{k}</span>
                      ))}
                    </div>
                  </div>
                  <div className="text-right shrink-0">
                    <div className="serif text-gold text-lg leading-none">{m.points}</div>
                    <div className="text-[10px] text-muted uppercase tracking-wider">pts</div>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      );
    };

    /* ============================================================
       SCREEN: MINIATURE DETAIL (view)
       ============================================================ */
    const MiniatureDetail = ({ miniature: m, onBack, onEdit }) => {
      const [expandedAbility, setExpandedAbility] = useState(null);

      return (
        <div className="pb-24">
          <Header
            title={m.name}
            subtitle={`${m.faction || 'No faction'} · ${m.gameSystem}`}
            onBack={onBack}
            action={
              <button onClick={onEdit} className="btn-ghost flex items-center gap-1 py-1.5 px-3">
                <Icon name="edit" className="w-4 h-4" /> Edit
              </button>
            }
          />

          <div className="px-4 pt-4 space-y-5">
            {/* Identity */}
            <div className="bg-panel border border-line rounded p-3 panel-edge flex items-center gap-3">
              <div className="w-14 h-14 shrink-0 rounded bg-gradient-to-br from-panel2 to-bg border border-line flex items-center justify-center">
                <span className="serif text-gold text-2xl">{m.name.charAt(0)}</span>
              </div>
              <div className="flex-1 min-w-0">
                <div className="flex flex-wrap gap-1 mb-1.5">
                  {(m.keywords || []).map(k => (
                    <span key={k} className="chip chip-gold">{k}</span>
                  ))}
                </div>
                <div className="flex items-baseline gap-2">
                  <span className="serif text-gold text-2xl leading-none">{m.points}</span>
                  <span className="text-[10px] text-muted uppercase tracking-wider">points</span>
                </div>
              </div>
            </div>

            {/* Attributes */}
            {Object.keys(m.attributes || {}).length > 0 && (
              <Section title="Attributes">
                <div className="grid grid-cols-2 gap-2">
                  {Object.entries(m.attributes).map(([k, v]) => (
                    <div key={k} className="bg-bg border border-line rounded p-2.5 flex items-center justify-between">
                      <span className="text-[11px] uppercase tracking-wider text-muted">{k}</span>
                      <span className="serif text-gold text-lg leading-none">{v}</span>
                    </div>
                  ))}
                </div>
              </Section>
            )}

            {/* Weapons */}
            {(m.weapons || []).length > 0 && (
              <Section title="Weapons">
                <div className="space-y-2">
                  {m.weapons.map((w, i) => (
                    <div key={i} className="bg-bg border border-line rounded p-3 flex items-start gap-3">
                      <div className="w-8 h-8 shrink-0 rounded bg-panel border border-line flex items-center justify-center text-gold">
                        <Icon name="sword" className="w-4 h-4" />
                      </div>
                      <div className="flex-1 min-w-0">
                        <div className="serif text-parchment text-sm mb-1.5">{w.name}</div>
                        <div className="flex flex-wrap gap-1.5">
                          {Object.entries(w.fields || {}).filter(([,v]) => v).map(([k, v]) => (
                            <span key={k} className="chip">
                              <span className="text-muted">{k}:</span> {v}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </Section>
            )}

            {/* Abilities */}
            {(m.abilities || []).length > 0 && (
              <Section title="Abilities">
                <div className="space-y-2">
                  {m.abilities.map((a, i) => (
                    <div key={i} className="bg-panel border border-line rounded panel-edge overflow-hidden">
                      <button
                        onClick={() => setExpandedAbility(expandedAbility === i ? null : i)}
                        className="w-full p-3 flex items-start gap-3 text-left"
                      >
                        <div className="w-8 h-8 shrink-0 rounded bg-bloodDim/30 border border-blood/40 flex items-center justify-center">
                          <Icon name="bolt" className="w-4 h-4 text-bloodBright" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="serif text-parchment">{a.name}</div>
                          <div className="flex gap-1 flex-wrap mt-1">
                            {(a.tags || []).map(t => (
                              <span key={t} className="chip chip-gold">{t}</span>
                            ))}
                          </div>
                        </div>
                        <Icon name={expandedAbility === i ? 'chevronDown' : 'chevron'} className="w-4 h-4 text-muted shrink-0 mt-1" />
                      </button>
                      {expandedAbility === i && (
                        <div className="px-3 pb-3 pt-1 border-t border-line/60">
                          <p className="text-sm text-parchmentDim leading-relaxed">{a.description}</p>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </Section>
            )}

            {/* Notes */}
            {m.notes && (
              <Section title="Notes">
                <p className="text-sm text-parchmentDim leading-relaxed bg-bg border border-line rounded p-3">{m.notes}</p>
              </Section>
            )}
          </div>
        </div>
      );
    };

    /* ============================================================
       SCREEN: MINIATURE EDITOR
       ============================================================ */
    const MiniatureEditor = ({ initial, onSave, onCancel, onDelete }) => {
      const [form, setForm] = useState(initial || {
        name: '',
        gameSystem: 'Trench Crusade',
        faction: '',
        points: 0,
        keywords: [],
        attributes: { Move: 6, Defense: 12, Attacks: 1, Wounds: 1 },
        abilities: [],
        weapons: [],
        trackers: { HP: 1 },
        notes: ''
      });

      const update = (k, v) => setForm({ ...form, [k]: v });
      const updateAttr = (k, v) => setForm({ ...form, attributes: { ...form.attributes, [k]: v } });
      const removeAttr = (k) => {
        const next = { ...form.attributes };
        delete next[k];
        setForm({ ...form, attributes: next });
      };
      const addKeyword = () => {
        const v = prompt('Keyword');
        if (v) setForm({ ...form, keywords: [...(form.keywords || []), v] });
      };
      const removeKeyword = (i) => {
        const next = [...form.keywords]; next.splice(i, 1);
        setForm({ ...form, keywords: next });
      };
      const addAbility = () => {
        setForm({ ...form, abilities: [...(form.abilities || []), { name: '', description: '', tags: [] }] });
      };
      const updateAbility = (i, k, v) => {
        const next = [...form.abilities]; next[i] = { ...next[i], [k]: v };
        setForm({ ...form, abilities: next });
      };
      const removeAbility = (i) => {
        const next = [...form.abilities]; next.splice(i, 1);
        setForm({ ...form, abilities: next });
      };
      const addWeapon = () => {
        setForm({ ...form, weapons: [...(form.weapons || []), { name: '', fields: { Type: '', Range: '', Damage: '', Attacks: '' } }] });
      };
      const updateWeapon = (i, k, v) => {
        const next = [...form.weapons]; next[i] = { ...next[i], [k]: v };
        setForm({ ...form, weapons: next });
      };
      const removeWeapon = (i) => {
        const next = [...form.weapons]; next.splice(i, 1);
        setForm({ ...form, weapons: next });
      };
      const addWeaponField = (wi) => {
        const k = prompt('Field name (e.g., Range)');
        if (!k) return;
        const next = [...form.weapons];
        next[wi] = { ...next[wi], fields: { ...(next[wi].fields || {}), [k]: '' } };
        setForm({ ...form, weapons: next });
      };
      const updateWeaponField = (wi, k, v) => {
        const next = [...form.weapons];
        next[wi] = { ...next[wi], fields: { ...(next[wi].fields || {}), [k]: v } };
        setForm({ ...form, weapons: next });
      };
      const removeWeaponField = (wi, k) => {
        const next = [...form.weapons];
        const fields = { ...(next[wi].fields || {}) };
        delete fields[k];
        next[wi] = { ...next[wi], fields };
        setForm({ ...form, weapons: next });
      };

      return (
        <div className="pb-32">
          <Header
            title={initial ? 'Edit Miniature' : 'New Miniature'}
            onBack={onCancel}
            action={
              <button onClick={() => onSave(form)} className="btn-primary">Save</button>
            }
          />

          <div className="px-4 pt-4 space-y-5">
            {/* Identity */}
            <Section title="Identity">
              <Field label="Name">
                <input value={form.name} onChange={e => update('name', e.target.value)} placeholder="Inquisitor Veylan" />
              </Field>
              <div className="grid grid-cols-2 gap-3">
                <Field label="Game System">
                  <select value={form.gameSystem} onChange={e => update('gameSystem', e.target.value)}>
                    {GAME_SYSTEMS.map(s => <option key={s}>{s}</option>)}
                  </select>
                </Field>
                <Field label="Points">
                  <input type="number" value={form.points} onChange={e => update('points', parseInt(e.target.value) || 0)} />
                </Field>
              </div>
              <Field label="Faction">
                <input value={form.faction} onChange={e => update('faction', e.target.value)} />
              </Field>
              <Field label="Keywords">
                <div className="flex gap-1 flex-wrap items-center">
                  {(form.keywords || []).map((k, i) => (
                    <span key={i} className="chip-gold chip flex items-center gap-1">
                      {k}
                      <button onClick={() => removeKeyword(i)} className="opacity-70 hover:opacity-100">
                        <Icon name="x" className="w-3 h-3" />
                      </button>
                    </span>
                  ))}
                  <button onClick={addKeyword} className="chip border-dashed">
                    <Icon name="plus" className="w-3 h-3" /> Add
                  </button>
                </div>
              </Field>
            </Section>

            {/* Attributes */}
            <Section title="Attributes">
              <div className="grid grid-cols-2 gap-3">
                {Object.entries(form.attributes || {}).map(([k, v]) => (
                  <div key={k} className="relative">
                    <Field label={k}>
                      <input type="number" value={v} onChange={e => updateAttr(k, parseInt(e.target.value) || 0)} />
                    </Field>
                    <button
                      onClick={() => removeAttr(k)}
                      className="absolute top-0 right-0 p-0.5 text-muted hover:text-blood"
                    >
                      <Icon name="x" className="w-3 h-3" />
                    </button>
                  </div>
                ))}
              </div>
              <button
                onClick={() => {
                  const k = prompt('Attribute name (e.g., Strength)');
                  if (k) updateAttr(k, 0);
                }}
                className="btn-ghost mt-2 w-full"
              >
                <Icon name="plus" className="w-4 h-4 inline mr-1" /> Add Attribute
              </button>
            </Section>

            {/* Abilities */}
            <Section title="Abilities">
              {(form.abilities || []).length === 0 && (
                <p className="text-xs text-muted italic">No abilities granted to this soul.</p>
              )}
              {(form.abilities || []).map((a, i) => (
                <div key={i} className="bg-bg border border-line rounded p-3 space-y-2">
                  <div className="flex gap-2">
                    <input
                      placeholder="Ability name"
                      value={a.name}
                      onChange={e => updateAbility(i, 'name', e.target.value)}
                    />
                    <button onClick={() => removeAbility(i)} className="text-muted hover:text-blood p-1">
                      <Icon name="trash" className="w-4 h-4" />
                    </button>
                  </div>
                  <textarea
                    placeholder="Description"
                    rows="2"
                    value={a.description}
                    onChange={e => updateAbility(i, 'description', e.target.value)}
                  />
                  <input
                    placeholder="Tags (comma separated, e.g., Aura, Passive)"
                    value={(a.tags || []).join(', ')}
                    onChange={e => updateAbility(i, 'tags', e.target.value.split(',').map(s => s.trim()).filter(Boolean))}
                  />
                </div>
              ))}
              <button onClick={addAbility} className="btn-ghost w-full">
                <Icon name="plus" className="w-4 h-4 inline mr-1" /> Add Ability
              </button>
            </Section>

            {/* Weapons */}
            <Section title="Weapons">
              {(form.weapons || []).length === 0 && (
                <p className="text-xs text-muted italic">Unarmed.</p>
              )}
              {(form.weapons || []).map((w, i) => (
                <div key={i} className="bg-bg border border-line rounded p-3 space-y-3">
                  <div className="flex gap-2">
                    <input
                      placeholder="Weapon name"
                      value={w.name}
                      onChange={e => updateWeapon(i, 'name', e.target.value)}
                    />
                    <button onClick={() => removeWeapon(i)} className="text-muted hover:text-blood p-1 shrink-0">
                      <Icon name="trash" className="w-4 h-4" />
                    </button>
                  </div>
                  <div className="space-y-2">
                    {Object.entries(w.fields || {}).map(([k, v]) => (
                      <div key={k} className="flex items-center gap-2">
                        <span className="text-[11px] uppercase tracking-wider text-muted w-20 shrink-0">{k}</span>
                        <input
                          value={v}
                          onChange={e => updateWeaponField(i, k, e.target.value)}
                          className="flex-1"
                        />
                        <button onClick={() => removeWeaponField(i, k)} className="text-muted hover:text-blood p-1 shrink-0">
                          <Icon name="x" className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                  <button onClick={() => addWeaponField(i)} className="btn-ghost w-full text-xs py-1.5">
                    <Icon name="plus" className="w-3 h-3 inline mr-1" /> Add Field
                  </button>
                </div>
              ))}
              <button onClick={addWeapon} className="btn-ghost w-full">
                <Icon name="plus" className="w-4 h-4 inline mr-1" /> Add Weapon
              </button>
            </Section>

            {/* Notes */}
            <Section title="Notes">
              <textarea rows="3" value={form.notes} onChange={e => update('notes', e.target.value)} placeholder="Lore, tactics, reminders..." />
            </Section>

            {initial && (
              <button
                onClick={() => { if (confirm('Banish this soul forever?')) onDelete(initial.id); }}
                className="btn-blood w-full mt-4"
              >
                <Icon name="trash" className="w-4 h-4 inline mr-1" /> Delete Miniature
              </button>
            )}
          </div>
        </div>
      );
    };

    const Section = ({ title, children }) => (
      <div>
        <h3 className="serif text-xs uppercase tracking-widest text-gold mb-2">{title}</h3>
        <div className="space-y-3">{children}</div>
      </div>
    );

    const Field = ({ label, children }) => (
      <label className="block">
        <span className="text-[11px] uppercase tracking-wider text-muted block mb-1">{label}</span>
        {children}
      </label>
    );